:root { --surface:#1c1e22; --sidebar:#111214; --hover:#292d31; --accent:#b0dccb; --folder-tint:8%; }
body, .login-view { background:var(--bg); }
.lab-sidebar { background:var(--sidebar); }
.lab-brand { flex-wrap:nowrap; font-size:18px; }
.lab-main { padding-bottom:110px; }
.lab-search,.login-card,.item-edit-dialog { background:var(--surface); }
.folder-title-button { color:var(--muted); }
.folder-card .shortcut-card { padding:5px 3px; min-height:29px; }
.folder-card .shortcut-card .item-main { gap:2px; }
.folder-card .shortcut-card:hover { background:var(--hover); }
.folder-card .line-chip { background:color-mix(in srgb,var(--text) 7%,transparent); color:var(--muted); }
.folder-card .line-chip:nth-child(2n) { background:color-mix(in srgb,var(--accent) 10%,transparent); }
.lab-nav-item.selected { background:color-mix(in srgb,var(--accent) 12%,transparent); color:var(--accent); }
.lab-nav-item:hover { background:var(--hover); }
.lab-favorites .float-card { background:var(--surface); border-color:var(--line); }
.lab-favorites .float-card:hover { background:var(--hover); border-color:var(--accent); }
.brand-mark { background:var(--accent); color:var(--bg); }
.lab-category-folders .folder-card { background:linear-gradient(145deg,color-mix(in srgb,var(--folder-color) var(--folder-tint),var(--surface)),var(--surface) 70%); border:1px solid var(--line); box-shadow:inset 0 1px color-mix(in srgb,var(--folder-color) 22%,transparent); }
.folder-card[data-effect=aurora] { background:linear-gradient(130deg,color-mix(in srgb,var(--folder-color) 17%,var(--surface)),var(--surface),color-mix(in srgb,var(--folder-color) 10%,var(--surface))); background-size:200% 200%; animation:vaultAurora 12s ease-in-out infinite alternate; }
.folder-card[data-effect=border] { border-color:color-mix(in srgb,var(--folder-color) 65%,var(--line)); box-shadow:inset 0 0 25px color-mix(in srgb,var(--folder-color) 8%,transparent); }
.folder-card[data-effect=wash] { background:color-mix(in srgb,var(--folder-color) 19%,var(--surface)); border-color:color-mix(in srgb,var(--folder-color) 45%,var(--line)); }
.folder-card[data-effect=pulse] { animation:vaultPulse 5s ease-in-out infinite; }
@keyframes vaultAurora { to { background-position:100% 100%; } }
@keyframes vaultPulse { 50% { border-color:color-mix(in srgb,var(--folder-color) 65%,var(--line)); box-shadow:0 0 12px color-mix(in srgb,var(--folder-color) 13%,transparent); } }
.vault-palette { display:grid; gap:5px; width:100%; max-width:260px; padding:10px; background:var(--sidebar); border:1px solid var(--line); border-radius:5px; margin:8px 0; }
.palette-row { display:grid; grid-template-columns:repeat(8,minmax(0,1fr)); gap:5px; }
.palette-swatch { aspect-ratio:1; min-width:0; border:1px solid #8885; background:var(--swatch); border-radius:3px; cursor:pointer; }
.palette-swatch.selected { outline:2px solid var(--text); outline-offset:1px; }
.palette-swatch[data-style=aurora] { background:linear-gradient(135deg,var(--swatch),#25282d); }
.palette-swatch[data-style=border] { background:var(--surface); border:2px solid var(--swatch); }
.palette-swatch[data-style=wash] { background:color-mix(in srgb,var(--swatch) 45%,var(--surface)); }
.palette-swatch[data-style=pulse] { background:var(--surface); box-shadow:inset 0 0 9px var(--swatch); }
.vault-dock { position:fixed; right:28px; bottom:24px; z-index:30; display:flex; gap:4px; padding:6px; border:1px solid var(--line); border-radius:7px; background:var(--surface); box-shadow:0 8px 28px #0003; }
.vault-dock>button { width:38px; height:38px; display:grid; place-items:center; border:0; border-radius:4px; background:transparent; color:var(--muted); cursor:pointer; }
.vault-dock button:hover { color:var(--text); background:var(--hover); }
.vault-dock button[aria-expanded=true],.vault-dock button[aria-pressed=true] { color:var(--accent); }
.vault-create-menu,.vault-theme-menu { position:absolute; right:0; bottom:60px; min-width:210px; max-width:min(340px,calc(100vw - 32px)); padding:10px; background:var(--surface); border:1px solid var(--line); border-radius:6px; box-shadow:0 12px 35px #0004; }
.vault-create-menu button,.vault-theme-menu button { display:flex; align-items:center; gap:10px; width:100%; padding:10px; color:var(--text); background:transparent; border:0; border-radius:4px; text-align:left; cursor:pointer; }
.vault-theme-menu label { display:grid; gap:8px; padding:8px; color:var(--muted); font-size:12px; }
.vault-theme-menu select { background:var(--sidebar); color:var(--text); border:1px solid var(--line); padding:8px; border-radius:4px; }
.backup-result { overflow-wrap:anywhere; font-size:11px; color:var(--muted); padding:4px 8px; }
html[data-theme=light] { color-scheme:light; --bg:#f4f6f7; --surface:#ffffff; --sidebar:#edf1f2; --panel:#ffffff; --text:#20262b; --muted:#59636b; --quiet:#737e87; --line:#d7dfe3; --hover:#e9eff0; --accent:#227e68; }
html[data-theme=graphite] { --bg:#181818; --surface:#222222; --sidebar:#121212; --text:#eeeeee; --muted:#b9b9b9; --quiet:#8e8e8e; --line:#383838; --hover:#303030; --accent:#e2c27d; }
html[data-theme=forest] { --bg:#111b18; --surface:#1a2822; --sidebar:#0c1411; --text:#e4ece5; --muted:#a7b9ac; --quiet:#81988a; --line:#31483c; --hover:#293e31; --accent:#b4d794; }
html[data-theme=paper] { color-scheme:light; --bg:#f6f5f2; --surface:#ffffff; --sidebar:#eeede8; --text:#343735; --muted:#646a67; --quiet:#818682; --line:#d9ded8; --hover:#ecefe9; --accent:#8a5743; }
html[data-theme=terminal] { --bg:#080e0d; --surface:#0f1916; --sidebar:#060b09; --text:#c6edd6; --muted:#8cbda0; --quiet:#61836d; --line:#234433; --hover:#162a20; --accent:#73e5a0; }
html[data-theme=terminal] body { font-family:Consolas,monospace; }
html[data-theme=terminal] .folder-card { border-radius:0; background:var(--surface); border-top:2px solid var(--folder-color); box-shadow:none; }
html[data-theme=neon] { --bg:#111016; --surface:#1c1923; --sidebar:#0c0b10; --text:#f2eaf5; --muted:#bfb0c8; --quiet:#94829c; --line:#3c3047; --hover:#302438; --accent:#ed91b5; --folder-tint:14%; }
html[data-theme=neon] .lab-sidebar { border-right-color:#766046; }
html[data-theme=neon] .brand-mark { box-shadow:0 0 18px #ed91b533; }
html[data-theme=paper] .folder-card { border-top:3px solid var(--folder-color); background:var(--surface); box-shadow:none; }
html[data-theme=light] .field input,html[data-theme=paper] .field input { background:var(--bg); color:var(--text); }
@media(prefers-reduced-motion:reduce) { .folder-card { animation:none!important; } }
@media(max-width:600px) { .vault-dock { right:16px; bottom:16px; } }