:root {
    color-scheme: light;
    --page-background: linear-gradient(135deg,#f0fdfa,#f8fafc 45%,#eff6ff);
    --surface-soft: #f1f6f5;
    --surface-raised: #fff;
    --appearance-accent: #0f766e;
    --ball-size: 38px;
    --ball-font-size: 11px;
    --ball-number-weight: 400;
    --ball-marked-surface: var(--ball-varnish), radial-gradient(circle farthest-corner at 31% 24%,
        var(--ball-highlight) 0 7%,
        color-mix(in srgb,var(--ball-highlight) 82%,var(--ball-mid)) 24%,
        color-mix(in srgb,var(--ball-highlight) 34%,var(--ball-mid)) 46%,
        color-mix(in srgb,var(--ball-mid) 92%,black) 66%,
        color-mix(in srgb,var(--ball-highlight) 20%,var(--ball-mid)) 75%,
        color-mix(in srgb,var(--ball-mid) 82%,black) 100%);
}
:root[data-theme="dark"] {
    color-scheme: dark;
    --ink: #e5edf4;
    --muted: #a7b7c8;
    --paper: #1b2b3d;
    --line: #354a5e;
    --accent: #5bd1bb;
    --accent-dark: #9ae7d4;
    --soft: #1e3d3e;
    --danger: #ffb4ab;
    --page-background: linear-gradient(135deg,#536b78,#455c6e 48%,#5b6c80);
    --surface-soft: #23364a;
    --surface-raised: #213247;
    --appearance-accent: #8ce0cb;
}
[data-ball-color="teal"]{--ball-highlight:#38877e;--ball-mid:#023b35}
[data-ball-color="blue"]{--ball-highlight:#4d79a2;--ball-mid:#0c2f58}
[data-ball-color="red"]{--ball-highlight:#ae5561;--ball-mid:#4e1425}
[data-ball-color="purple"]{--ball-highlight:#895fa3;--ball-mid:#301747}
[data-ball-color="orange"]{--ball-highlight:#b57540;--ball-mid:#5a2f0b}
[data-ball-color="gold"]{--ball-highlight:#aa913f;--ball-mid:#493607}
[data-ball-color="pink"]{--ball-highlight:#b64b83;--ball-mid:#571539}
[data-ball-color="cyan"]{--ball-highlight:#368fa9;--ball-mid:#064357}
[data-ball-color="emerald"]{--ball-highlight:#40945c;--ball-mid:#104825}
[data-ball-color="graphite"]{--ball-highlight:#737e8d;--ball-mid:#242b36}
:root[data-ball-size="large"]{--ball-size:46px}
:root[data-ball-size="extra"]{--ball-size:56px}
:root[data-bold-numbers="true"]{--ball-number-weight:700}
body{background:var(--page-background)}
.card,.stat,.toolbar,.modal{background:var(--paper)}
input:not([type="range"]):not([type="radio"]):not([type="checkbox"]){background:var(--paper);color:var(--ink);border-color:var(--line)}
.grid{grid-template-columns:repeat(auto-fill,minmax(max(var(--ball-size),calc(var(--ball-font-size) * 2.5)),1fr))}
.ball,.appearance-preview-ball{font-size:var(--ball-font-size);font-weight:var(--ball-number-weight)}
.ball.checked,.ranking-ball,.appearance-preview-ball.is-marked{background:var(--ball-marked-surface)}
.ranking-ball{font-weight:var(--ball-number-weight)}

.appearance-launcher{position:fixed;left:0;top:42%;z-index:8;display:flex;flex-direction:column;align-items:center;gap:14px;padding:18px 12px;border-radius:0 18px 18px 0;background:#115e50;box-shadow:0 4px 24px #064e3b26;color:#fff;font-family:inherit;font-size:12px;font-weight:600;line-height:1.2;letter-spacing:0;text-transform:none}
.appearance-launcher>span:not(.appearance-arrow){writing-mode:vertical-rl;transform:rotate(180deg)}
.appearance-launcher:hover{transform:translateX(3px);box-shadow:0 5px 24px #064e3b33}
#distribute,.appearance-launcher,.insights-launcher{
    background:linear-gradient(145deg,var(--ball-highlight) 0%,color-mix(in srgb,var(--ball-highlight) 35%,var(--ball-mid)) 55%,var(--ball-mid) 100%);
    color:#fff;
}
.modal-actions .compact-close,.appearance-panel .appearance-close,.insights-panel .insights-close,.shortcut-panel .shortcut-close{
    display:grid;
    place-items:center;
    flex-shrink:0;
    width:32px;
    height:32px;
    padding:0;
    border:0;
    border-radius:50%;
    background:var(--ball-varnish),radial-gradient(circle farthest-corner at 31% 24%,
        var(--neutral-ball-highlight) 0 7%,
        var(--neutral-ball-light) 24%,
        var(--neutral-ball-mid) 48%,
        color-mix(in srgb,var(--neutral-ball-mid) 72%,var(--neutral-ball-dark)) 66%,
        var(--neutral-ball-light) 75%,
        var(--neutral-ball-dark) 100%);
    color:#17202a;
}
:is(.modal-actions .compact-close,.appearance-panel .appearance-close,.insights-panel .insights-close,.shortcut-panel .shortcut-close) svg{width:16px;height:16px;stroke-width:2}
:is(.modal-actions .compact-close,.appearance-panel .appearance-close,.insights-panel .insights-close,.shortcut-panel .shortcut-close):hover{transform:translateY(-1px)}
:is(.modal-actions .compact-close,.appearance-panel .appearance-close,.insights-panel .insights-close,.shortcut-panel .shortcut-close):active{transform:translateY(2px)}
:is(.modal-actions .compact-close,.appearance-panel .appearance-close,.insights-panel .insights-close,.shortcut-panel .shortcut-close):focus-visible{outline:3px solid var(--neutral-ball-dark);outline-offset:2px}
.appearance-launcher,.insights-launcher{box-shadow:0 4px 24px color-mix(in srgb,var(--ball-mid) 15%,transparent)}
.appearance-launcher:hover,.insights-launcher:hover{box-shadow:0 5px 24px color-mix(in srgb,var(--ball-mid) 20%,transparent)}
.appearance-arrow{display:flex}.appearance-arrow svg{width:17px;height:17px}
.appearance-panel{position:fixed;inset:0 auto 0 0;margin:0;padding:0;width:360px;max-width:calc(100% - 18px);height:100%;height:100dvh;max-height:100dvh;border:0;border-radius:0 24px 24px 0;background:var(--paper);color:var(--ink);box-shadow:20px 0 80px #092a2829;overflow:hidden;overscroll-behavior:contain;transform:translateX(-100%);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .25s}
.appearance-panel[open]{display:flex;flex-direction:column}
.appearance-panel.is-visible{transform:translateX(0);opacity:1}
.appearance-panel::backdrop{background:#10202e66;backdrop-filter:blur(3px)}
.appearance-panel button{font-family:inherit;letter-spacing:0;text-transform:none}
.appearance-header{display:flex;justify-content:space-between;align-items:center;padding:24px 22px 17px;border-bottom:1px solid var(--line);flex-shrink:0}
.appearance-header h2{font-size:24px;letter-spacing:-.6px;margin:0;line-height:1.2}
.appearance-close{display:grid;place-items:center;width:38px;height:38px;padding:0;border-radius:50%;background:var(--surface-soft);color:var(--ink)}
.appearance-close:hover{transform:none}
.appearance-scroll{flex:1;padding:17px 22px;min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
.appearance-scroll>.appearance-section:first-child{margin-top:0}
.appearance-preview{flex-shrink:0;margin:17px 22px 0;padding:8px 12px;border-radius:15px;background:var(--surface-soft);text-align:center}
.appearance-preview-balls{display:flex;align-items:center;justify-content:center;gap:12px}
.appearance-preview-ball{display:grid;place-items:center;flex-shrink:0;width:max(var(--ball-size),calc(var(--ball-font-size) * 2.5));aspect-ratio:1;border-radius:50%;background:var(--ball-varnish),radial-gradient(circle farthest-corner at 31% 24%,var(--neutral-ball-highlight) 0 7%,var(--neutral-ball-light) 24%,var(--neutral-ball-mid) 48%,color-mix(in srgb,var(--neutral-ball-mid) 72%,var(--neutral-ball-dark)) 66%,var(--neutral-ball-light) 75%,var(--neutral-ball-dark) 100%);color:#000}
.appearance-preview-ball.is-marked{color:#fff}
.ball:not(.checked),.appearance-preview-ball:not(.is-marked){color:var(--unmarked-ball-font-color,#000)}
.ball.checked,.ranking-ball,.appearance-preview-ball.is-marked{color:var(--marked-ball-font-color,#fff)}
.appearance-section{padding:0;margin:22px 0 0;min-width:0;border:0}
.appearance-section legend,.appearance-label-row label{font-size:12px;font-weight:700;margin:0 0 10px;padding:0}
.appearance-segments{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.appearance-panel label{cursor:pointer}
.appearance-segments label,.appearance-color{position:relative;margin:0;font-weight:500}
.appearance-segments input,.appearance-color input,.appearance-toggle input{position:absolute;width:1px;height:1px;opacity:0;padding:0;margin:0;border:0}
.appearance-segments label>span{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:11px 3px;border:1px solid var(--line);border-radius:10px;background:var(--surface-soft);font-size:11px}
.appearance-segments input:checked+span{border-color:var(--appearance-accent);background:var(--soft);color:var(--accent-dark);box-shadow:inset 0 0 0 1px var(--appearance-accent)}
.appearance-segments input:focus-visible+span,.appearance-color input:focus-visible+span,.appearance-toggle input:focus-visible+span{outline:3px solid var(--accent);outline-offset:4px}
.appearance-size-options label>span{min-height:40px;padding:8px 3px}
.appearance-colors{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px 6px}
.appearance-color{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;color:var(--muted);font-size:9px;line-height:1.2}
.appearance-swatch{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;color:#fff;background:var(--ball-varnish),radial-gradient(circle farthest-corner at 31% 24%,var(--ball-highlight) 0 7%,color-mix(in srgb,var(--ball-highlight) 82%,var(--ball-mid)) 24%,color-mix(in srgb,var(--ball-highlight) 34%,var(--ball-mid)) 46%,color-mix(in srgb,var(--ball-mid) 92%,black) 66%,color-mix(in srgb,var(--ball-highlight) 20%,var(--ball-mid)) 75%,color-mix(in srgb,var(--ball-mid) 82%,black) 100%)}
.appearance-swatch svg{opacity:0}
.appearance-color input:checked+.appearance-swatch{outline:2px solid var(--appearance-accent);outline-offset:3px}
.appearance-color input:checked+.appearance-swatch svg{opacity:1}
.appearance-color input:checked~span:last-child{color:var(--ink);font-weight:700}
.appearance-label-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:8px}
.appearance-label-row label{margin:0}
.appearance-label-row output{border-radius:6px;padding:4px 7px;background:var(--surface-soft);color:var(--accent-dark);font-size:11px;font-variant-numeric:tabular-nums}
#appearanceFontSize,.appearance-font-tone{display:block;accent-color:var(--appearance-accent);width:100%;height:24px;margin:0;padding:0;border:0;background:transparent;cursor:pointer}
.appearance-tone-control+.appearance-tone-control{margin-top:18px}
.appearance-tone-control .appearance-label-row label{font-weight:500}
.appearance-font-tone{appearance:none;-webkit-appearance:none}
.appearance-font-tone::-webkit-slider-runnable-track{height:10px;border:1px solid #8b98a8;border-radius:8px;background:linear-gradient(to right,#fff,#000)}
.appearance-font-tone::-moz-range-track{height:8px;border:1px solid #8b98a8;border-radius:8px;background:linear-gradient(to right,#fff,#000)}
.appearance-font-tone::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;margin-top:-5px;border:2px solid var(--paper);border-radius:50%;background:var(--appearance-accent);box-shadow:0 0 0 1px var(--appearance-accent)}
.appearance-font-tone::-moz-range-thumb{width:14px;height:14px;border:2px solid var(--paper);border-radius:50%;background:var(--appearance-accent);box-shadow:0 0 0 1px var(--appearance-accent)}
.appearance-panel .appearance-font-auto{margin-top:9px;padding:6px 9px;border:1px solid var(--line);border-radius:7px;background:var(--surface-soft);color:var(--ink);font-size:10px}
.appearance-font-auto:disabled{opacity:.5;cursor:default;transform:none;filter:none}
.appearance-range-labels{display:flex;justify-content:space-between;color:var(--muted);font-size:10px;margin-top:3px}
.appearance-accessibility{border-top:1px solid var(--line);padding-top:5px}
.appearance-toggle{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:15px 0 0;font-size:12px}
.appearance-toggle small{display:block;font-size:10px;font-weight:400;color:var(--muted);margin-top:4px}
.appearance-switch{position:relative;width:36px;height:22px;border-radius:20px;background:var(--line);flex-shrink:0;transition:background .18s}
.appearance-switch:after{content:"";position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;box-shadow:0 1px 3px #0003;transition:transform .18s}
.appearance-toggle input:checked+.appearance-switch{background:#0f766e}
.appearance-toggle input:checked+.appearance-switch:after{transform:translateX(14px)}
.appearance-footer{flex-shrink:0;border-top:1px solid var(--line);padding:14px 22px calc(14px + env(safe-area-inset-bottom));margin-top:auto}
#resetAppearance{display:flex;justify-content:center;align-items:center;gap:8px;width:100%;padding:10px;background:var(--surface-soft);color:var(--ink);border:1px solid var(--line);font-size:11px;border-radius:10px}
#resetAppearance svg{width:16px;height:16px}
#appearanceSaveStatus{font-size:10px;color:var(--muted);text-align:center;margin:9px 0 0;line-height:1.4}

/* Carry the dark palette through the existing dialogs. Progress owns its palette. */
:root[data-theme="dark"] .secondary,:root[data-theme="dark"] .logout{background:var(--surface-soft);color:var(--ink)}
:root[data-theme="dark"] .alert{background:#4d282c}
:root[data-theme="dark"] .card>div[style]{background:var(--paper)!important;border-color:var(--line)!important}
:root[data-theme="dark"] .modal li{border-color:var(--line)!important}

@media(max-width:980px){.dashboard{padding-left:58px}.appearance-launcher{padding:15px 10px}}
@media(max-width:540px){
    :root{--ball-size:30px}
    :root[data-ball-size="large"]{--ball-size:40px}
    :root[data-ball-size="extra"]{--ball-size:50px}
    .dashboard{padding-left:10px}
    .appearance-launcher{top:auto;left:14px;bottom:calc(18px + env(safe-area-inset-bottom));flex-direction:row;gap:8px;border-radius:30px;padding:12px 15px}
    .appearance-launcher>span:not(.appearance-arrow){writing-mode:horizontal-tb;transform:none}
    .appearance-launcher>svg{width:18px;height:18px}
    .appearance-launcher .appearance-arrow{display:none}
    .appearance-header{padding-top:20px}
}
@media(max-width:360px){.appearance-header,.appearance-scroll,.appearance-footer{padding-left:16px;padding-right:16px}.appearance-preview{margin-left:16px;margin-right:16px}.appearance-launcher{left:10px;padding:12px}.insights-launcher{right:10px;padding:12px}}
:root[data-motion="reduced"] *,:root[data-motion="reduced"] *::before,:root[data-motion="reduced"] *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
:root[data-motion="reduced"] .ball:is(:hover,:active){transform:none}
@media(prefers-reduced-motion:reduce){.appearance-panel,.appearance-launcher,.appearance-switch,.appearance-switch:after{transition:none}}