/* Glass is restricted to interface surfaces. WSI canvases, heatmaps and ROI overlays retain their original colors. */
:root[data-appearance]{--hue:205;--sat:65%;--scene-sat:60%;--tint-sat:40%;--accent:hsl(var(--hue) var(--sat) 32%);--blue:var(--accent);--bg:hsl(var(--hue) 30% 94%);--text:#203044;--muted:#506175;--line:hsl(var(--hue) 24% 75% / .65);--panel:hsl(var(--hue) 35% 98% / .78);--glass-fill:255 255 255;--glass-alpha:.72;--glass-blur:22px;--glass-border:rgb(255 255 255 / .85);--glass-shadow:0 8px 32px hsl(var(--hue) 30% 25% / .07),inset 0 1px 0 rgb(255 255 255 / .75);--control:rgb(255 255 255 / .48);--control-hover:hsl(var(--hue) var(--tint-sat) 88% / .7);--selected:hsl(var(--hue) var(--tint-sat) 85% / .63);--glow-alpha:.22;--sheen-alpha:0;--surface:linear-gradient(125deg,rgb(255 255 255 / var(--sheen-alpha)),transparent 45%,hsl(var(--hue) var(--scene-sat) 80% / var(--sheen-alpha))),rgb(var(--glass-fill) / var(--glass-alpha));--scene:radial-gradient(ellipse at 3% 6%,hsl(var(--hue) var(--scene-sat) 70% / var(--glow-alpha)),transparent 48%),radial-gradient(ellipse at 95% 43%,hsl(calc(var(--hue) + 28) var(--scene-sat) 78% / var(--glow-alpha)),transparent 50%),radial-gradient(ellipse at 35% 95%,hsl(var(--hue) var(--scene-sat) 70% / var(--glow-alpha)),transparent 48%),var(--bg)}
:root[data-appearance=sage]{--hue:132;--sat:27%}
:root[data-appearance=lavender]{--hue:267;--sat:42%}
:root[data-appearance=sakura]{--hue:337;--sat:48%}
:root[data-appearance=champagne]{--hue:37;--sat:44%}
:root[data-appearance=stone]{--hue:211;--sat:12%;--scene-sat:8%;--tint-sat:8%}
:root[data-appearance][data-theme=dark]{--bg:hsl(var(--hue) 19% 10%);--text:#e7edf6;--muted:#acb9ca;--accent:hsl(var(--hue) var(--sat) 76%);--panel:hsl(var(--hue) 18% 16% / .9);--line:hsl(var(--hue) 20% 55% / .35);--glass-fill:24 32 44;--glass-border:rgb(255 255 255 / .15);--glass-shadow:0 8px 32px #0003,inset 0 1px 0 #ffffff0f;--control:rgb(255 255 255 / .05);--control-hover:hsl(var(--hue) 25% 38% / .5);--selected:hsl(var(--hue) 30% 40% / .4)}
:root[data-appearance][data-texture=mist]{--glass-alpha:.5;--glass-blur:12px;--glow-alpha:.2;--sheen-alpha:0}
:root[data-appearance][data-texture=soft]{--glass-alpha:.8;--glass-blur:28px;--glow-alpha:.26;--sheen-alpha:0}
:root[data-appearance][data-texture=luminous]{--glass-alpha:.62;--glass-blur:20px;--glow-alpha:.38;--sheen-alpha:.19}
:root[data-appearance] body,:root[data-appearance] .login-screen{background:var(--scene);background-attachment:fixed}
:root[data-appearance] :is(header,.library,.viewer-card,.panel,.inspector,.login-card,#accountDialog,#appearanceDialog){background:var(--surface);border-color:var(--glass-border);box-shadow:var(--glass-shadow);backdrop-filter:blur(var(--glass-blur)) saturate(115%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(115%)}
:root[data-appearance] header{height:auto;min-height:64px;gap:16px;padding:12px 22px;position:relative;z-index:10}
:root[data-appearance] .brand{flex-shrink:0}
:root[data-appearance] .header-right{justify-content:flex-end;flex-wrap:wrap;gap:8px}
:root[data-appearance] :is(.viewer-card,.panel,.inspector){border-radius:14px}
:root[data-appearance] :is(button,.button,.slide){background:var(--control);border-color:var(--line);color:var(--text)}
:root[data-appearance] :is(button:hover,.button:hover,.upload:hover){background:var(--control-hover);border-color:var(--accent)}
:root[data-appearance] :is(input,select,textarea){background:var(--control);border:1px solid var(--line);color:var(--text);border-radius:7px;font:inherit}
:root[data-appearance] option{background:var(--bg);color:var(--text)}
:root[data-appearance] input[type=checkbox],:root[data-appearance] input[type=radio]{accent-color:var(--accent)}
:root[data-appearance] :is(label,summary,.section-title,.header-right,.steps li,.model-name,#analysisSettings>summary,.class-row b){color:var(--muted)}
:root[data-appearance] :is(.slide.selected,nav button.active,.segmented button.active,.history button.active){background:var(--selected);border-color:var(--accent);color:var(--accent)}
:root[data-appearance] :is(.primary,.brandmark){background:var(--accent);border-color:var(--accent);color:white}
:root[data-appearance][data-theme=dark] :is(.primary,.brandmark){color:#152334}
:root[data-appearance] .primary:hover{background:var(--accent);filter:brightness(1.08)}
:root[data-appearance] :is(.quiet,nav button,.segmented button){background:transparent}
:root[data-appearance] :is(.toolbar,.heat-controls,.compare-controls,.curtain-control,.viewer-resize){background:var(--control)}
:root[data-appearance] :is(.viewer-footer,footer,.placeholder,.pill,.login-card small,.steps small){color:var(--muted)}
:root[data-appearance] .primary-prob span{color:var(--text)}
:root[data-appearance] .steps li.done b{background:var(--selected);border-color:var(--accent);color:var(--accent)}
:root[data-appearance] :is(.log-panel pre,#annotationHistory pre){background:var(--control);color:var(--text)}
:root[data-appearance] :is(.notice,#roiContextMenu){background:var(--bg);color:var(--text);border-color:var(--line)}
:root[data-appearance] .danger{color:#b33737;background:#ffeeeecf}
:root[data-appearance][data-theme=dark] .danger{color:#ffb3b3;background:#522d38}
:root[data-appearance] progress::-webkit-progress-bar{background:var(--line)}
:root[data-appearance] .login-card{max-height:calc(100dvh - 100px);overflow:auto}
.login-appearance-actions{position:absolute;right:20px;top:20px;display:flex;gap:8px}
.login-appearance-actions .login-theme{position:static}
.appearance-toggle{font-size:12px;white-space:nowrap;padding:6px 10px;display:inline-flex;gap:6px;align-items:center}
.appearance-toggle::before{content:'';width:13px;height:13px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--control));border:1px solid var(--accent)}
#appearanceDialog{position:fixed;margin:18px 18px 18px auto;inset:0;width:410px;max-width:calc(100vw - 24px);max-height:calc(100dvh - 36px);height:fit-content;overflow:auto;border:1px solid var(--glass-border);border-radius:22px;padding:25px;color:var(--text)}
#appearanceDialog::backdrop{background:rgb(15 25 40 / .2)}
.appearance-heading{display:flex;justify-content:space-between;align-items:center;gap:12px}
.appearance-heading h2{font-size:23px;letter-spacing:-.4px}
#closeAppearance{font-size:22px;line-height:1;padding:7px 10px;border-radius:50%}
.appearance-intro{font-size:12px;color:var(--muted);margin:14px 0 22px}
#appearanceDialog fieldset{border:0;padding:0;margin:0 0 23px;display:grid;gap:9px;grid-template-columns:repeat(3,minmax(0,1fr))}
#appearanceDialog legend{font-size:13px;font-weight:600;margin-bottom:12px;color:var(--text)}
#appearanceDialog legend small{font-weight:400;color:var(--muted);margin-left:8px}
.appearance-choice,.texture-choice{position:relative;cursor:pointer;border:1px solid var(--line);border-radius:12px;padding:12px 4px;display:flex;flex-direction:column;align-items:center;gap:7px;background:var(--control);font-size:12px;text-align:center}
#appearanceDialog input[type=radio]{position:absolute;width:1px;height:1px;opacity:0;margin:0;padding:0}
#appearanceDialog label:has(input:checked){background:var(--selected);border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent);color:var(--text)}
#appearanceDialog label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:3px}
#appearanceDialog label:hover{border-color:var(--accent)}
.color-swatch{width:35px;height:35px;border-radius:50%;background:linear-gradient(140deg,#ffffffb0,transparent 65%),var(--swatch);border:1px solid #ffffff9f;box-shadow:0 3px 8px #142d4520,inset 0 1px 1px #fffc}
.choice-check{position:absolute;right:6px;top:5px;font-size:12px;color:var(--accent);visibility:hidden}
input:checked~.choice-check{visibility:visible}
.texture-choice strong{font-size:13px;font-weight:600}.texture-choice small{font-size:10px;color:var(--muted)}
.texture-sample{width:60px;height:37px;border-radius:8px;background:linear-gradient(140deg,hsl(var(--hue) 45% 68%),hsl(var(--hue) 40% 90%));padding:7px;display:grid;gap:4px;overflow:hidden}
.texture-sample i{border-radius:3px;background:#ffffff55;border:1px solid #ffffff90}
.sample-soft i{background:#ffffffbf;box-shadow:0 0 8px #fff8}
.sample-luminous{background:linear-gradient(120deg,hsl(var(--hue) 60% 67%),#fff 45%,hsl(calc(var(--hue) + 30) 60% 79%))}
.appearance-preview{display:flex;align-items:center;gap:12px;border:1px solid var(--glass-border);border-radius:14px;padding:16px;background:var(--surface);box-shadow:var(--glass-shadow)}
.preview-mark{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:var(--accent);color:var(--bg);font-size:22px;font-weight:700}
.appearance-preview strong{font-size:14px}.appearance-preview small{display:block;font-size:11px;margin-top:3px;color:var(--muted)}
.appearance-note{font-size:11px;color:var(--muted);line-height:1.8;margin:16px 0}
.appearance-footer{display:flex;justify-content:space-between;align-items:center;gap:8px}.appearance-footer button{font-size:12px}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){:root[data-appearance][data-texture]{--glass-alpha:.97}}
@media(prefers-reduced-transparency:reduce){:root[data-appearance][data-texture]{--glass-alpha:1;--glass-blur:0px;--sheen-alpha:0}}
@media(max-width:760px){:root[data-appearance] header{align-items:flex-start;padding:12px;flex-direction:column;gap:10px}:root[data-appearance] .header-right{justify-content:flex-start}.login-appearance-actions{top:14px;right:14px}#appearanceDialog{margin:12px auto;padding:20px}.appearance-toggle{padding:6px;font-size:11px}}