:root{--surface:#fff;--soft:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 0.6243) 93.922% / 1.0000);--on-accent:#fff;--text:var(--ink)}
:root[data-appearance=dark]{--paper:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 0.6583) 9.608% / 1.0000);--surface:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 0.5597) 14.314% / 1.0000);--soft:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 0.5431) 19.412% / 1.0000);--ink:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 0.4301) 94.118% / 1.0000);--muted:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 0.2288) 72.353% / 1.0000);--line:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 0.3776) 25.686% / 1.0000);color-scheme:dark}
body{background:var(--paper)}
.card,.activity-card,.snapshot-card,.recording-grid .recording-row,.health-item,dialog,.gate-form{background:var(--surface);color:var(--ink);border-color:var(--line)}
input,select,.device-switch select{background:var(--surface);color:var(--ink);border-color:var(--line)}
.topbar{background:color-mix(in srgb,var(--surface) 94%,transparent);height:auto;min-height:83px;padding-block:12px;gap:14px}
.top-actions{justify-content:flex-end}.top-label{flex-shrink:0}
.button.primary,.hero-card,.sidebar{background:var(--green);color:var(--on-accent)}
.button.secondary,.quick,.step-number,.icon-tile,.subtle-note,.chip,.today,.appearance-presets button,.recording-row .segment-badge{background:var(--soft);color:var(--ink)}
.text-button,.app-story-filter{color:var(--ink)}.hero-card p,.hero-card .hero-foot,.sidebar nav button,.sidebar .brand,.sidebar .brandmark,.sidebar .version,.sidebar .sidebar-password-link,.sidebar .nav-caption,.sidebar .privacy-mini p{color:color-mix(in srgb,var(--on-accent) 85%,transparent)}
.sidebar nav button.active{color:var(--on-accent);background:color-mix(in srgb,var(--on-accent) 16%,transparent)}
.sidebar nav button.active:before{background:var(--on-accent)}
.sidebar .brandmark{border-color:color-mix(in srgb,var(--on-accent) 40%,transparent)}
:root[data-appearance=dark] .notice:not(.amber),:root[data-appearance=dark] .camera-auto-settings,:root[data-appearance=dark] .app-story-filter[aria-pressed=true]{background:var(--soft);color:var(--ink)}
:root[data-appearance=dark] .notice.amber{background:#463719;color:#f7dda2}
:root[data-appearance=dark] .button.danger{background:#482e2b;color:#ffd1c6;border-color:#7a5047}
:root[data-appearance=dark] .health-item small{color:var(--muted)}
.recording-row small{color:var(--muted)}
.icon-tile.warm{background:var(--soft);color:var(--green)}
.bulk-tools{border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:18px;margin:18px 0}.bulk-tools h3{margin-bottom:12px}.bulk-tools .button-row{align-items:center}.bulk-select-all,.media-selection{display:flex;align-items:center;gap:8px;font-size:12px;cursor:pointer}.bulk-select-all input,.media-selection input{width:20px;min-height:20px;margin:0;accent-color:var(--green)}.bulk-date-row{display:flex;align-items:end;gap:14px;flex-wrap:wrap;margin-top:16px}.bulk-date-row label{display:grid;gap:7px;font-size:12px}.bulk-date-row input{max-width:220px}.media-selection{padding:10px 14px;color:var(--ink)}.snapshot-card:has([data-media-select]:checked),.recording-row:has([data-media-select]:checked){outline:2px solid var(--green);outline-offset:2px}.bulk-delete-dialog{max-width:550px}.snapshot-viewer-nav{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin:12px 0}.snapshot-viewer-nav .button{font-size:12px;padding:9px 12px}.snapshot-viewer-nav span{font-size:12px}.snapshot-preview:fullscreen,.snapshot-preview.is-expanded{width:100vw;max-width:none;height:100dvh;max-height:none;inset:0;margin:0;border:0;border-radius:0;padding:18px;background:var(--surface);overflow:auto}.snapshot-preview:fullscreen>img,.snapshot-preview.is-expanded>img{width:100%;max-height:calc(100dvh - 195px);object-fit:contain}.snapshot-preview>img{touch-action:pan-y}.snapshot-preview h2{font-size:18px}@media(max-width:600px){.bulk-tools{padding:13px}.bulk-date-row{align-items:stretch}.bulk-date-row label{flex:1;min-width:125px}.bulk-date-row button{width:100%}.snapshot-viewer-nav{gap:7px}.snapshot-viewer-nav .button{flex:1}.snapshot-preview{padding:15px}.snapshot-preview h2{font-size:16px}}
#appearance-dialog{width:min(490px,calc(100vw - 32px));padding:28px;border:1px solid var(--line);border-radius:20px;max-height:90dvh;overflow:auto}
dialog::backdrop{background:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 1.0285) 4.510% / 0.6588)}.appearance-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.appearance-presets button{border:2px solid transparent;border-radius:10px;padding:10px 5px}.appearance-presets button[aria-pressed=true]{border-color:var(--green)}
.appearance-field{display:flex;align-items:center;justify-content:space-between;gap:14px;margin:22px 0}.appearance-field input[type=color]{width:66px;padding:4px;height:44px;min-height:44px;cursor:pointer}.appearance-check{justify-content:flex-start}.appearance-check input{width:22px;min-height:22px}.appearance-field input{accent-color:var(--green)}
/* The sidebar fits the viewport; only navigation scrolls, with a narrow theme-matched thumb. */
@media(min-width:851px){.sidebar{height:100dvh;min-height:0;overflow:hidden;gap:0}.sidebar>.brand,.sidebar>.nav-caption,.sidebar-bottom{flex-shrink:0}.sidebar .nav-caption{margin:24px 12px 10px}.sidebar nav{display:flex;flex-direction:column;flex:1;min-height:0;max-height:none;overflow-y:auto;overflow-x:hidden;gap:5px;padding-inline-end:6px;margin-inline-end:-8px;scrollbar-gutter:stable}.sidebar nav button{flex-shrink:0;padding:12px;position:relative}.sidebar nav button.active:before{right:0}.sidebar-bottom{padding-top:12px}.sidebar .lock-btn{margin:12px 6px}.sidebar .privacy-mini{padding:12px}.sidebar .sidebar-password-link{display:block;padding:8px 6px}}
.sidebar nav{scrollbar-width:thin;scrollbar-color:color-mix(in srgb,var(--on-accent) 38%,transparent) transparent;overscroll-behavior:contain}
.sidebar nav::-webkit-scrollbar{width:5px;height:5px}.sidebar nav::-webkit-scrollbar-track{background:transparent}.sidebar nav::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--on-accent) 38%,transparent);border-radius:10px}.sidebar nav::-webkit-scrollbar-button{display:none}
@supports selector(::-webkit-scrollbar){.sidebar nav{scrollbar-width:auto;scrollbar-color:auto}.sidebar nav::-webkit-scrollbar-button{width:0;height:0;display:none}.sidebar nav::-webkit-scrollbar-corner{background:transparent}}
.sidebar .brand{font-size:20px;white-space:nowrap}.sidebar .brandmark{width:38px;height:42px;font-size:20px;flex-shrink:0}
@media(min-width:851px) and (max-width:1150px){.sidebar .brand{font-size:18px}}
@media(min-width:851px) and (max-height:850px){.sidebar .privacy-mini{display:none}.sidebar{padding-block:22px}}
@media(max-width:850px){.sidebar nav{max-height:none;overflow-y:hidden;overflow-x:auto;padding-bottom:7px;scrollbar-width:thin}.topbar{min-height:72px}.top-label{flex-shrink:1}}
.recording-cover.video-preview{position:relative;aspect-ratio:16/9;padding:0;overflow:hidden;isolation:isolate;background:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 0.7168) 11.765% / 1.0000);font-size:12px;display:block}
.video-preview img,.video-preview video{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;background:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 0.7168) 11.765% / 1.0000)}
.video-preview video{z-index:2}.video-preview .preview-label{position:absolute;top:9px;inset-inline-start:9px;max-width:calc(100% - 18px);padding:4px 9px;background:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 1.4132) 6.863% / 0.8000);color:#fff;border-radius:7px;z-index:3;font-size:11px}
.preview-toggle{position:absolute;inset-inline-end:9px;bottom:9px;padding:7px 11px;background:#fff;color:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 1.0003) 16.863% / 1.0000);border-radius:8px;z-index:3;font-size:11px;font-weight:600;box-shadow:0 1px 5px #0003}
.video-preview.is-previewing .preview-label{background:hsl(var(--theme-hue, 156) calc(var(--theme-saturation, 46.5%) * 1.5813) 13.333% / 0.9020)}
@media(max-width:500px){.topbar{padding-inline:14px}.top-actions{gap:8px;width:100%;justify-content:space-between}.top-actions .avatar{display:none}.top-label{width:100%}.device-switch select{max-width:155px}}