:root { color-scheme: light; --background:#f2f5fa; --surface:#fff; --surface-2:#f8faff; --text:#172033; --muted:#687386; --line:#dce3ec; --primary:#3157d5; --primary-dark:#2444ad; --primary-soft:#e9eeff; --success:#067647; --danger:#b42318; --danger-bg:#fee4e2; --shadow:0 18px 50px rgba(32,46,76,.09); }
[data-theme="dark"] { color-scheme:dark; --background:#0d1321; --surface:#171f30; --surface-2:#202a3d; --text:#edf2ff; --muted:#aab5c9; --line:#344057; --primary:#829cff; --primary-dark:#aec0ff; --primary-soft:#26345f; --success:#65d6a1; --danger:#ff8f87; --danger-bg:#492523; --shadow:0 18px 50px rgba(0,0,0,.25); }
* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; text-size-adjust:100%; }
body { min-height:100vh; margin:0; color:var(--text); background:radial-gradient(circle at top left, color-mix(in srgb,var(--primary) 15%,transparent),transparent 32rem),var(--background); font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif; }
button,input,select { font:inherit; }
.topbar,.page-shell { width:min(1180px,calc(100% - 40px)); margin:0 auto; }
.topbar { padding:34px 0 20px; display:flex; align-items:center; justify-content:space-between; }
.topbar__brand { display:flex; align-items:center; gap:18px; min-width:0; }
.brand-logo { width:92px; height:auto; flex:0 0 auto; object-fit:contain; }
.topbar__actions { display:flex; align-items:center; gap:10px; }
.page-shell { padding-bottom:48px; }
.auth-screen { display:grid; min-height:calc(100vh - 160px); place-items:center; padding:30px 20px 60px; }
.auth-card { display:grid; width:min(440px,100%); gap:15px; padding:30px; border:1px solid var(--line); border-radius:20px; background:var(--surface); box-shadow:var(--shadow); }
.auth-card h2 { font-size:1.65rem; }.auth-card>p { margin:0 0 5px; color:var(--muted); line-height:1.5; }.auth-card .button--primary { width:100%; margin-top:4px; }.auth-actions { display:flex; flex-wrap:wrap; gap:10px; }.auth-actions .button { flex:1; padding-inline:12px; }
.eyebrow { display:block; margin-bottom:7px; color:var(--primary); font-size:.72rem; font-weight:850; letter-spacing:.13em; text-transform:uppercase; }
h1,h2 { margin:0; letter-spacing:-.035em; } h1 { font-size:clamp(1.9rem,5vw,3rem); } h2 { font-size:1.45rem; }
.icon-button { width:46px; height:46px; border:1px solid var(--line); border-radius:50%; color:var(--text); background:var(--surface); cursor:pointer; }
.summary-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.summary-card,.panel { border:1px solid var(--line); background:var(--surface); box-shadow:var(--shadow); }
.summary-card { min-width:0; padding:20px; border-radius:17px; }
.summary-card span { display:block; margin-bottom:7px; color:var(--muted); font-size:.8rem; font-weight:700; }
.summary-card strong { font-size:clamp(1.3rem,3vw,1.8rem); }
.summary-card--accent { color:#fff; border-color:transparent; background:linear-gradient(135deg,#3157d5,#2444ad); }
.summary-card--accent span { color:rgba(255,255,255,.78); }
.summary-card--positive { border-color:color-mix(in srgb,var(--success) 35%,var(--line)); background:color-mix(in srgb,var(--success) 9%,var(--surface)); }
.summary-card--positive strong { color:var(--success); }
.summary-card--negative { border-color:color-mix(in srgb,var(--danger) 35%,var(--line)); background:color-mix(in srgb,var(--danger) 9%,var(--surface)); }
.summary-card--negative strong { color:var(--danger); }
:root:not([data-theme="dark"]) .summary-card--positive { border-color:#69c99b; background:#e3f8ed; }
:root:not([data-theme="dark"]) .summary-card--positive span { color:#356a51; }
:root:not([data-theme="dark"]) .summary-card--positive strong,
:root:not([data-theme="dark"]) .value-positive { color:#045d38!important; }
:root:not([data-theme="dark"]) .summary-card--accent .value-positive,
[data-theme="dark"] .summary-card--accent .value-positive { color:#d8ffe9!important; }
:root:not([data-theme="dark"]) .summary-card--accent .value-negative,
[data-theme="dark"] .summary-card--accent .value-negative { color:#ffe0dd!important; }
.panel { min-width:0; margin-top:20px; padding:clamp(20px,4vw,32px); overflow:hidden; border-radius:20px; }
.privacy-notice { display:flex; align-items:flex-start; gap:13px; margin:20px 0; padding:16px 18px; border:1px solid color-mix(in srgb,var(--primary) 25%,var(--line)); border-radius:14px; color:var(--primary-dark); background:var(--primary-soft); }
.privacy-notice__icon { font-size:1.25rem; } .privacy-notice strong { display:block; font-size:.9rem; } .privacy-notice p { margin:4px 0 0; color:var(--muted); font-size:.82rem; line-height:1.5; }
.panel__header { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:25px; }
.settings { display:grid; grid-template-columns:1fr auto; align-items:end; gap:14px; margin:-5px 0 24px; padding:18px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.form-grid { width:100%; min-width:0; display:grid; grid-template-columns:1.15fr 1.25fr repeat(3,minmax(0,1fr)); gap:14px; }
.field { display:grid; gap:8px; min-width:0; font-size:.82rem; font-weight:750; }
input,select { width:100%; min-width:0; max-width:100%; min-height:48px; padding:0 13px; border:1px solid var(--line); border-radius:11px; outline:none; color:var(--text); background:var(--surface-2); }
input[type="time"],input[type="date"],input[type="number"] { display:block; min-inline-size:0; }
input:focus,select:focus { border-color:var(--primary); box-shadow:0 0 0 3px var(--primary-soft); }
input[readonly] { color:var(--muted); background:color-mix(in srgb,var(--surface-2) 75%,var(--line)); cursor:not-allowed; }
.forecast { display:flex; flex-wrap:wrap; align-items:center; gap:8px 22px; margin:16px 0 0; padding:13px 15px; border-radius:11px; color:var(--primary-dark); background:var(--primary-soft); font-size:.86rem; }
.forecast>strong { margin-left:auto; font-size:.95rem; } .forecast__warning { width:100%; padding-top:8px; border-top:1px solid color-mix(in srgb,var(--primary) 20%,transparent); color:var(--danger); font-weight:700; }
.mobile-photo-field { display:none; margin-top:16px; }
.photo-capture { display:flex; width:100%; align-items:center; gap:12px; padding:14px; border:1px dashed var(--primary); border-radius:12px; color:var(--primary-dark); background:var(--primary-soft); font:inherit; text-align:left; cursor:pointer; }
.photo-capture__icon { font-size:1.45rem; } .photo-capture strong,.photo-capture small { display:block; } .photo-capture small { margin-top:3px; color:var(--muted); font-size:.76rem; }
.photo-preview { display:grid; gap:10px; margin-top:10px; }
.photo-preview__item { display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); }
.photo-preview img { width:64px; height:64px; border-radius:9px; object-fit:cover; } .photo-preview strong { display:block; font-size:.84rem; }
.photo-preview button { margin-top:5px; padding:0; border:0; color:var(--danger); background:transparent; font-size:.78rem; font-weight:800; cursor:pointer; }
.actions,.toolbar { display:flex; flex-wrap:wrap; gap:10px; align-items:center; } .actions { margin-top:20px; }
.button { min-height:44px; padding:0 17px; border:0; border-radius:10px; color:var(--text); font-weight:800; cursor:pointer; transition:transform .15s ease; }
.button:hover { transform:translateY(-1px); } .button--primary { color:#fff; background:#3157d5; } .button--secondary { color:var(--primary-dark); background:var(--primary-soft); } .button--ghost { border:1px solid var(--line); background:transparent; }
.button--install { min-height:40px; color:#fff; background:#3157d5; }
.button--danger { color:#fff; background:#b42318; }
.month-filter { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:.82rem; font-weight:750; } .month-filter input { width:auto; min-height:44px; }
.table-wrap { overflow-x:auto; } table { width:100%; border-collapse:collapse; font-size:.86rem; }
th,td { padding:14px 12px; border-bottom:1px solid var(--line); text-align:left; white-space:nowrap; }
th { color:var(--muted); font-size:.72rem; letter-spacing:.05em; text-transform:uppercase; }
.tag { display:inline-block; padding:5px 9px; border-radius:999px; color:var(--primary-dark); background:var(--primary-soft); font-size:.74rem; font-weight:800; }
.value-positive { color:var(--success)!important; font-weight:800; } .value-negative { color:var(--danger)!important; font-weight:800; }
.table-action { padding:6px 8px; border:0; border-radius:7px; color:var(--primary-dark); background:var(--primary-soft); cursor:pointer; }
.table-action--delete { color:var(--danger); background:var(--danger-bg); }
.empty-state { margin:28px 0 5px; color:var(--muted); text-align:center; }
.photo-history { margin-top:28px; padding-top:24px; border-top:1px solid var(--line); }
.photo-history__heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; } .photo-history__heading h3 { margin:0; font-size:1rem; } .photo-history__heading span { color:var(--muted); font-size:.78rem; font-weight:700; }
.photo-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(135px,1fr)); gap:12px; }
.photo-card { padding:0; overflow:hidden; border:1px solid var(--line); border-radius:12px; color:var(--text); background:var(--surface-2); text-align:left; cursor:pointer; transition:transform .15s ease,border-color .15s ease; }
.photo-card:hover { border-color:var(--primary); transform:translateY(-2px); } .photo-card img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; }
.photo-card__info { display:block; padding:9px 10px; } .photo-card__info strong,.photo-card__info small { display:block; } .photo-card__info strong { font-size:.8rem; } .photo-card__info small { margin-top:2px; color:var(--muted); font-size:.7rem; }
.error-message { margin:14px 0 0; color:var(--danger); font-size:.88rem; font-weight:750; }
.auth-success { margin:0; color:var(--success); font-size:.88rem; font-weight:750; }
.confirm-dialog { width:min(440px,calc(100% - 32px)); padding:26px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--surface); box-shadow:0 24px 70px rgba(0,0,0,.28); }
.confirm-dialog::backdrop { background:rgba(7,12,24,.58); backdrop-filter:blur(3px); }
.confirm-dialog__icon { display:grid; place-items:center; width:42px; height:42px; margin-bottom:16px; border-radius:50%; color:var(--danger); background:var(--danger-bg); font-size:1.2rem; font-weight:900; }
.confirm-dialog h2 { font-size:1.3rem; } .confirm-dialog p { margin:10px 0 22px; color:var(--muted); line-height:1.55; }
.confirm-dialog__actions { display:flex; justify-content:flex-end; gap:10px; }
.photo-type-icon { color:var(--primary-dark); background:var(--primary-soft); } .photo-type-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; } .photo-type-actions #photo-type-cancel { grid-column:1/-1; }
.photo-dialog { width:min(720px,calc(100% - 24px)); padding:16px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--surface); box-shadow:0 24px 70px rgba(0,0,0,.32); }
.photo-dialog::backdrop { background:rgba(7,12,24,.72); backdrop-filter:blur(3px); } .photo-dialog__header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.photo-dialog__header h2 { font-size:1.15rem; } .photo-dialog__header .icon-button { width:38px; height:38px; font-size:1.4rem; } .photo-dialog img { display:block; width:100%; max-height:75vh; border-radius:12px; object-fit:contain; background:#0b1020; }
.camera-dialog { width:min(640px,calc(100% - 20px)); padding:14px; border:1px solid var(--line); border-radius:18px; color:var(--text); background:var(--surface); box-shadow:0 24px 70px rgba(0,0,0,.32); }
.camera-dialog::backdrop { background:rgba(7,12,24,.85); } .camera-dialog video { display:block; width:100%; max-height:70vh; border-radius:12px; background:#050812; object-fit:contain; } .camera-dialog__actions { display:flex; padding-top:12px; } .camera-dialog__actions .button { width:100%; }
.toast-region { position:fixed; z-index:20; right:22px; bottom:22px; display:grid; gap:10px; width:min(380px,calc(100% - 32px)); pointer-events:none; }
.toast { padding:14px 16px; border:1px solid var(--line); border-left:4px solid var(--primary); border-radius:11px; color:var(--text); background:var(--surface); box-shadow:var(--shadow); font-size:.88rem; font-weight:700; animation:toast-in .2s ease-out; }
.toast--success { border-left-color:var(--success); } .toast--error { border-left-color:var(--danger); }
@keyframes toast-in { from { opacity:0; transform:translateY(10px); } }
[hidden] { display:none!important; }
.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:900px) { .summary-grid { grid-template-columns:repeat(2,1fr); } .form-grid { grid-template-columns:repeat(2,1fr); } .settings { grid-template-columns:1fr 1fr; } }
@media (max-width:768px) {
  .entry-panel { padding-inline:16px; }
  #export-csv { display:none; }
  .entry-panel .panel__header { align-items:stretch; }
  .entry-panel #settings-toggle { width:100%; }
  #hours-form { display:block; width:100%; min-width:0; max-width:100%; }
  .form-grid { display:flex; width:100%; min-width:0; max-width:100%; flex-direction:column; align-items:stretch; }
  .form-grid>.field { display:flex; width:100%; min-width:0; max-width:100%; flex-direction:column; align-items:stretch; }
  .form-grid input,.form-grid select { display:block; width:100%!important; min-width:0!important; max-width:100%!important; height:52px!important; min-height:52px!important; max-height:52px!important; inline-size:100%!important; block-size:52px!important; padding-block:0!important; box-sizing:border-box; line-height:normal; }
  #work-date,#day-type,#start-time,#end-time,#break-time { text-align:center; text-align-last:center; }
  .forecast { align-items:flex-start; flex-direction:column; } .forecast>strong { margin-left:0; }
}
@media (max-width:580px) { .topbar,.page-shell { width:min(100% - 24px,1180px); } .topbar__brand { gap:11px; } .brand-logo { width:58px; } .topbar__brand h1 { font-size:1.4rem; } .topbar__brand .eyebrow { font-size:.6rem; } .topbar__actions { gap:6px; } .button--install { padding:0 10px; font-size:.75rem; flex-grow:0; } .summary-grid,.form-grid,.settings { grid-template-columns:minmax(0,1fr); } #hours-form,.field,.work-field { width:100%; min-width:0; max-width:100%; } input[type="time"],input[type="date"],input[type="number"],select { width:100%; min-width:0; max-width:100%; box-sizing:border-box; } .panel__header { align-items:flex-start; flex-direction:column; } .toolbar { width:100%; } .button { flex-grow:1; } .mobile-photo-field { display:block; } }
@media (max-width:1024px) and (pointer:coarse) {
  #export-csv { display:none; }
  .mobile-photo-field { display:block; }
  .entry-panel { padding-inline:16px; }
  .entry-panel .panel__header { align-items:stretch; flex-direction:column; }
  .entry-panel #settings-toggle { width:100%; }
  #hours-form { display:block; width:100%; min-width:0; max-width:100%; }
  .form-grid,.settings { display:flex; width:100%; min-width:0; max-width:100%; flex-direction:column; align-items:stretch; }
  .form-grid>.field { display:flex; width:100%; min-width:0; max-width:100%; flex-direction:column; align-items:stretch; }
  .form-grid input,.form-grid select { display:block; width:100%!important; min-width:0!important; max-width:100%!important; height:52px!important; min-height:52px!important; max-height:52px!important; inline-size:100%!important; block-size:52px!important; padding-block:0!important; box-sizing:border-box; line-height:normal; }
  #work-date,#day-type,#start-time,#end-time,#break-time { text-align:center; text-align-last:center; }
}
@supports (-webkit-touch-callout:none) {
  #hours-form,.form-grid,.form-grid>* { min-width:0; max-width:100%; }
  input[type="time"],input[type="date"] { display:block; inline-size:100%; min-inline-size:0; max-inline-size:100%; overflow:hidden; -webkit-appearance:none; appearance:none; font-size:16px; }
  input[type="time"]::-webkit-date-and-time-value,input[type="date"]::-webkit-date-and-time-value { display:flex; width:100%; min-width:0; height:52px; margin:0; padding:0; align-items:center; justify-content:center; line-height:52px; text-align:center; }
  input[type="time"]::-webkit-datetime-edit,input[type="date"]::-webkit-datetime-edit { display:flex; width:100%; height:52px; padding:0; align-items:center; justify-content:center; }
  input[type="time"]::-webkit-datetime-edit-fields-wrapper,input[type="date"]::-webkit-datetime-edit-fields-wrapper { display:flex; align-items:center; justify-content:center; }
  input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button { margin:0; -webkit-appearance:none; appearance:none; }
}
@media print { body { background:#fff; color:#000; } .topbar,.entry-panel,.toolbar,th:last-child,td:last-child { display:none!important; } .page-shell { width:100%; } .summary-card,.panel { box-shadow:none; border:1px solid #bbb; } .summary-grid { grid-template-columns:repeat(4,1fr); } }