:root { --chosen-dark:#82e3ed; --chosen-light:#126679; --chosen-rgb-dark:130,227,237; --chosen-rgb-light:18,102,121; }
:root[data-accent=green] { --chosen-dark:#a5e5a0; --chosen-light:#276b38; --chosen-rgb-dark:165,229,160; --chosen-rgb-light:39,107,56; }
:root[data-accent=red] { --chosen-dark:#ff9f9b; --chosen-light:#a52e3e; --chosen-rgb-dark:255,159,155; --chosen-rgb-light:165,46,62; }
:root[data-accent=yellow] { --chosen-dark:#f1d383; --chosen-light:#805900; --chosen-rgb-dark:241,211,131; --chosen-rgb-light:128,89,0; }
:root[data-accent=purple] { --chosen-dark:#c9afff; --chosen-light:#6944a2; --chosen-rgb-dark:201,175,255; --chosen-rgb-light:105,68,162; }
:root[data-accent=orange] { --chosen-dark:#ffba86; --chosen-light:#a44a16; --chosen-rgb-dark:255,186,134; --chosen-rgb-light:164,74,22; }
body { --accent:var(--chosen-dark); --accent-rgb:var(--chosen-rgb-dark); --accent-on:#071114; }
body.light { --accent:var(--chosen-light); --accent-rgb:var(--chosen-rgb-light); --accent-on:#fff; }
body,body.light { --line:color-mix(in srgb,var(--accent) 20%,var(--bg)); --line-bright:color-mix(in srgb,var(--accent) 43%,var(--bg)); --wash:color-mix(in srgb,var(--accent) 10%,var(--bg)); }
.status-dot { box-shadow:0 0 9px rgba(var(--accent-rgb),.35); }
body .primary-link,body.light .primary-link,body .detail-actions>a,body.light .detail-actions>a,body #reset,body.light #reset,body #toast,body.light #toast,body .home-search-row>button,body.light .home-search-row>button { color:var(--accent-on); }
#appearance-toggle { display:inline-flex; align-items:center; justify-content:center; gap:9px; min-height:44px; background:transparent; color:var(--ink); font:12px var(--sans); padding:8px 0 8px 8px; }
.accent-preview { width:11px; height:11px; border:1px solid var(--accent); background:var(--accent); box-shadow:0 0 15px rgba(var(--accent-rgb),.12); }
#appearance-panel { width:min(520px,calc(100vw - 36px)); max-width:520px; max-height:calc(100dvh - 44px); padding:28px; background:var(--nav); color:var(--ink); border:1px solid var(--line-bright); }
.appearance-header { display:flex; align-items:center; justify-content:space-between; gap:18px; padding-bottom:20px; border-bottom:1px solid var(--line); }
.appearance-header h2 { margin:0; font:600 32px/1.2 var(--display); }
#close-appearance { width:44px; height:44px; background:var(--surface); color:var(--muted); border:1px solid var(--line); font-size:26px; flex-shrink:0; }
#appearance-panel h3 { margin:24px 0 14px; font:600 16px/1.7 var(--sans); }
#appearance-panel>p { font-size:14px; line-height:1.8; color:var(--muted); margin:20px 0 0; }
#accent-options { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
#accent-options>button { display:flex; align-items:center; gap:12px; min-height:54px; padding:14px; border:1px solid var(--line); color:var(--ink); background:var(--surface); text-align:left; font:15px/1.5 var(--sans); }
#accent-options>button:hover { border-color:var(--line-bright); }
#accent-options>button[aria-checked=true] { border-color:var(--accent); background:var(--wash); }
.accent-swatch { display:block; width:18px; height:18px; background:var(--swatch); border:1px solid rgba(255,255,255,.2); flex-shrink:0; }
.accent-check { margin-left:auto; color:var(--accent); opacity:0; }
[aria-checked=true]>.accent-check { opacity:1; }
.appearance-theme-row { display:flex; align-items:center; justify-content:space-between; gap:15px; padding-top:22px; margin-top:22px; border-top:1px solid var(--line); }
#appearance-theme { color:var(--muted); font-size:14px; }
#appearance-panel #theme { min-height:46px; padding:11px 15px; background:var(--surface); border:1px solid var(--line-bright); color:var(--ink); font:14px var(--sans); }
@media(max-width:700px) { #appearance-panel { padding:22px; } #appearance-toggle { min-width:44px; font-size:12px; padding-left:0; gap:7px; } .topbar-actions { gap:15px; } .appearance-theme-row { align-items:flex-start; flex-direction:column; gap:12px; } }