/* Opt-in interface color. Original design tokens and data series are unchanged. */
:root{--ui-accent:#c084fc;--ui-light:#e9d5ff;--ui-strong:#7e22ce;--ui-end:#9333ea;--ui-on-accent:#fff}
:root[data-appearance="violet"]{--ui-accent:#c084fc;--ui-light:#e9d5ff;--ui-strong:#7e22ce;--ui-end:#9333ea}
:root[data-appearance="blue"]{--ui-accent:#60a5fa;--ui-light:#dbeafe;--ui-strong:#1d4ed8;--ui-end:#2563eb}
:root[data-appearance="green"]{--ui-accent:#34d399;--ui-light:#d1fae5;--ui-strong:#065f46;--ui-end:#047857}
:root[data-appearance="orange"]{--ui-accent:#fb923c;--ui-light:#ffedd5;--ui-strong:#92400e;--ui-end:#b45309}
:root[data-appearance="pink"]{--ui-accent:#f472b6;--ui-light:#fce7f3;--ui-strong:#9d174d;--ui-end:#be185d}
:root[data-appearance="white"]{--ui-accent:#ffffff;--ui-light:#f4f4f5;--ui-strong:#ffffff;--ui-end:#e5e7eb;--ui-on-accent:#111827}
:root[data-appearance="black"]{--ui-accent:#a1a1aa;--ui-light:#e4e4e7;--ui-strong:#09090b;--ui-end:#000000}
:root[data-appearance="red"]{--ui-accent:#ef4444;--ui-light:#fecaca;--ui-strong:#b91c1c;--ui-end:#dc2626}
:root[data-appearance="yellow"]{--ui-accent:#facc15;--ui-light:#fef9c3;--ui-strong:#facc15;--ui-end:#fde047;--ui-on-accent:#111827}
:root[data-appearance="turquoise"]{--ui-accent:#22d3ee;--ui-light:#cffafe;--ui-strong:#0e7490;--ui-end:#155e75}
:root[data-appearance="indigo"]{--ui-accent:#818cf8;--ui-light:#e0e7ff;--ui-strong:#4338ca;--ui-end:#4f46e5}
:root[data-appearance]:not([data-appearance="empathy"]){--purple:var(--ui-accent);--purple-soft:color-mix(in srgb,var(--ui-accent) 15%,transparent);--green:var(--ui-accent);--green-soft:var(--purple-soft);--module-accent:var(--ui-accent);--module-tint:color-mix(in srgb,var(--ui-accent) 10%,transparent);--brand-gradient:linear-gradient(115deg,var(--ui-strong),var(--ui-end));--action-gradient:var(--brand-gradient)}
:root[data-appearance]:not([data-appearance="empathy"]) body{background:radial-gradient(ellipse 90% 55% at 15% -10%,color-mix(in srgb,var(--ui-accent) 10%,transparent),transparent 55%),radial-gradient(ellipse 70% 45% at 95% 5%,color-mix(in srgb,var(--ui-accent) 6%,transparent),transparent 50%),var(--empathy-canvas)}
:root[data-appearance]:not([data-appearance="empathy"]) ::selection{background:color-mix(in srgb,var(--ui-strong) 80%,transparent);color:var(--ui-on-accent)}
:root[data-appearance]:not([data-appearance="empathy"]) :is(.nav-link.active,.btn:not(.secondary):not(.subtle):not(.purple):not(.lime),.ai-card .btn){background:var(--action-gradient);color:var(--ui-on-accent);box-shadow:0 4px 18px color-mix(in srgb,var(--ui-accent) 12%,transparent)}
:root[data-appearance]:not([data-appearance="empathy"]) :is(.text-btn,.ai-header,.side-note .leaf-line,.footer-note .icon,.nav-link:hover:not(.active)){color:var(--ui-light)}
:root[data-appearance]:not([data-appearance="empathy"]) :is(.segmented .active,.btn.purple,.btn.subtle,.pill-icon.purple,.tag.ai,.mood.active,.week-today,.activity-filters button[aria-pressed=true],.notice-count){background:var(--module-tint);color:var(--ui-light);border-color:color-mix(in srgb,var(--ui-accent) 40%,transparent);box-shadow:none}
:root[data-appearance]:not([data-appearance="empathy"]) .segmented .active{box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--ui-accent) 35%,transparent)}
:root[data-appearance]:not([data-appearance="empathy"]) :is(.side-note,.info-band,.checkin,.ai-card,.proposal-side.after){background:linear-gradient(135deg,color-mix(in srgb,var(--ui-accent) 10%,transparent),#0d0d10);border-color:color-mix(in srgb,var(--ui-accent) 28%,transparent)}
:root[data-appearance]:not([data-appearance="empathy"]) .info-band{color:var(--ui-light)}
:root[data-appearance]:not([data-appearance="empathy"]) .hero{background:radial-gradient(ellipse at top right,color-mix(in srgb,var(--ui-accent) 15%,transparent),transparent 70%),#08080b;border-color:color-mix(in srgb,var(--ui-accent) 30%,transparent);box-shadow:0 0 36px color-mix(in srgb,var(--ui-accent) 5%,transparent)}
:root[data-appearance]:not([data-appearance="empathy"]) .hero:after{border-color:var(--module-tint);box-shadow:0 0 0 32px color-mix(in srgb,var(--ui-accent) 4%,transparent),0 0 0 65px color-mix(in srgb,var(--ui-accent) 2%,transparent)}
:root[data-appearance]:not([data-appearance="empathy"]) :is(.day.active,.check-btn.active,.exercise-check.active,.effort-presets button[aria-pressed=true],.route-controls button[aria-pressed=true]){background:var(--action-gradient);border-color:var(--ui-accent);color:var(--ui-on-accent);box-shadow:none}
:root[data-appearance]:not([data-appearance="empathy"]) .day[aria-current=date]:not(.active){border-color:var(--ui-accent)}
:root[data-appearance]:not([data-appearance="empathy"]) .toggle.on:before{background:var(--ui-strong)}
:root[data-appearance]:not([data-appearance="empathy"]) .day-session-count{background:var(--module-tint);color:var(--ui-light)}
:root[data-appearance]:not([data-appearance="empathy"]) :is(input[type=range]){accent-color:var(--ui-accent)}
:root[data-appearance]:not([data-appearance="empathy"]) :is(.effort-settings,dialog){border-color:color-mix(in srgb,var(--ui-accent) 25%,transparent)}
:root[data-appearance]:not([data-appearance="empathy"]) .effort-settings{background:var(--module-tint)}
:root[data-appearance]:not([data-appearance="empathy"]) :is(.effort-settings strong,.effort-settings label,.effort-presets button){color:var(--ui-light)}
:root[data-appearance]:not([data-appearance="empathy"]) .mobile-nav a.active{color:var(--ui-light)}
:root[data-appearance]:not([data-appearance="empathy"]) .mobile-nav a.active .nav-icon{background:var(--module-tint);border-color:color-mix(in srgb,var(--ui-accent) 35%,transparent)}
:root[data-appearance]:not([data-appearance="empathy"]) .mobile-nav a.active:after{background:var(--ui-accent)}
:root[data-appearance]:not([data-appearance="empathy"]) .mobile-nav{border-top-color:color-mix(in srgb,var(--ui-accent) 20%,transparent)}
:root[data-appearance]:not([data-appearance="empathy"]) #toast{background:var(--ui-strong);color:var(--ui-on-accent);border-color:var(--ui-accent)}
.appearance-card .section-head{gap:10px;flex-wrap:wrap;margin-bottom:10px}.appearance-description{font-size:var(--fs-12,12px);color:#a1a1aa}.appearance-options{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-top:18px}.appearance-option{position:relative;display:flex;align-items:center;justify-content:center;min-height:50px;padding:8px;background:#ffffff03;border:1px solid #ffffff1c;border-radius:13px;color:#a1a1aa;font-size:var(--fs-12,12px);text-align:left}.appearance-swatch{width:26px;height:26px;border-radius:50%;flex-shrink:0;box-shadow:inset 0 0 0 1px #8888}.appearance-option:hover{border-color:#ffffff55;background:#ffffff06}.appearance-option[aria-pressed=true]{border-color:var(--ui-accent);background:color-mix(in srgb,var(--ui-accent) 9%,transparent);color:var(--ink);box-shadow:0 0 0 1px color-mix(in srgb,var(--ui-accent) 18%,transparent)}.appearance-check{position:absolute;top:3px;right:6px;color:var(--ui-light);font-size:var(--fs-10,10px)}.appearance-save-note{font-size:var(--fs-10,10px);color:#a1a1aa;line-height:1.7;margin-top:14px}
@media(max-width:760px){.appearance-options{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-top:16px}.appearance-option{min-height:44px;padding:6px;border-radius:11px}.appearance-swatch{width:24px;height:24px}.appearance-check{top:2px;right:4px;font-size:var(--fs-9,9px)}.appearance-save-note{font-size:var(--fs-10,10px)}}

/* Light button fills need dark text; the canvas color remains independent. */
:root[data-appearance]:not([data-appearance="empathy"]) .day.active :is(strong,.day-session-count){color:var(--ui-on-accent)}
:root[data-appearance]:not([data-appearance="empathy"]) :is(.day.active .day-dot,.nav-link.active .nav-mark){background:var(--ui-on-accent)}
:root[data-appearance="black"] :is(.nav-link.active,.btn:not(.secondary):not(.subtle):not(.purple):not(.lime)){border:1px solid #71717a}

/* Appearance stays a compact preference until the user opens the controls. */
.card.appearance-card{padding:0}
.appearance-summary{display:flex;align-items:center;gap:16px;min-height:76px;padding:18px 24px;cursor:pointer;list-style:none;border-radius:inherit}
.appearance-summary::-webkit-details-marker{display:none}
.appearance-summary::marker{content:""}
.appearance-summary:focus-visible{outline:2px solid var(--ink);outline-offset:-5px}
.appearance-summary h2{font-size:var(--fs-16,16px);margin:0}
.appearance-current-colors{display:flex;align-items:center;gap:10px;margin-left:auto}
.appearance-current-swatch{display:block;width:28px;height:28px;flex-shrink:0;border-radius:50%;box-shadow:inset 0 0 0 1px #8888}
.appearance-chevron{width:18px;height:18px;flex-shrink:0;color:var(--muted)}
.appearance-card[open]>.appearance-summary .appearance-chevron{transform:rotate(90deg)}
.appearance-panel{padding:0 24px 24px;border-top:1px solid var(--line)}
@media(max-width:760px){.appearance-summary{min-height:68px;padding:16px 20px;gap:12px}.appearance-panel{padding:0 20px 20px}.appearance-current-swatch{width:26px;height:26px}}