/* Reusable surfaces and controls */
*{box-sizing:border-box} [hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.5;min-height:100vh;background-image:radial-gradient(ellipse at 10% 0%,var(--glow-a),transparent 60%),radial-gradient(ellipse at 100% 55%,var(--glow-b),transparent 60%);background-attachment:fixed}
button,input,textarea{font:inherit} button,a,input,textarea{-webkit-tap-highlight-color:transparent}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);box-shadow:inset 0 1px 0 var(--highlight),var(--shadow);padding:24px;margin-top:18px}
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){.panel{backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%)}}
input,textarea{width:100%;padding:15px 16px;border-radius:16px;border:1px solid var(--border);background:var(--panel-2);color:var(--text);font-size:18px}textarea{font-size:16px;min-height:128px;resize:vertical;line-height:1.5}input::placeholder,textarea::placeholder{color:var(--muted);opacity:1}
button{width:100%;margin-top:12px;padding:13px 18px;min-height:48px;border-radius:16px;border:1px solid transparent;background:var(--accent);color:var(--accent-text);font-weight:700;cursor:pointer;transition:filter .15s,background .15s}button:hover{filter:brightness(1.08)}
.secondary-btn{background:var(--panel);color:var(--text);border-color:var(--border)}
:where(button,a,input,textarea):focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.tag,.pill,.bin-badge{display:inline-flex;align-items:center;border:1px solid var(--border);border-radius:999px;background:var(--panel-2);color:var(--text);padding:7px 12px;font-size:14px;text-decoration:none}.pill{min-height:44px}.pill:hover{border-color:var(--focus)}
.errors,.success,.report-status{border-radius:16px;padding:14px 16px;margin-top:18px;border:1px solid currentColor;font-size:15px}.errors{background:var(--danger-bg);color:var(--danger)}.success{background:var(--success-bg);color:var(--success)}.report-status{background:var(--warning-bg);color:var(--warning)}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
@media(prefers-reduced-transparency:reduce){.panel{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}}

/* Compact theme picker: keeps the existing header action footprint. */
.header-actions .theme-select{font:inherit;font-size:13px;font-weight:700;min-height:48px;width:100px;max-width:100%;padding:10px 12px;border:1px solid var(--border);border-radius:16px;background:var(--panel);color:var(--text);cursor:pointer}
.theme-select option{background:var(--bg);color:var(--text)}
.theme-select:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
@media(max-width:560px){.header-actions .theme-select{font-size:12px;width:92px}}

/* Aero is entirely opt-in; decorative layers do not capture input. */
:root[data-theme="aero"] body{
 background-color:var(--bg);
 background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%201600%201000%22%20preserveAspectRatio%3D%22xMidYMid%20slice%22%3E%0A%3Cdefs%3E%0A%20%3ClinearGradient%20id%3D%22sky%22%20x2%3D%220%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%230783dd%22%2F%3E%3Cstop%20offset%3D%22.62%22%20stop-color%3D%22%2378d7f6%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23d3f7ff%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3ClinearGradient%20id%3D%22hill%22%20x2%3D%22.3%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%23a5e954%22%2F%3E%3Cstop%20offset%3D%22.4%22%20stop-color%3D%22%235cc633%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23278d2d%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3ClinearGradient%20id%3D%22front%22%20x2%3D%22.6%22%20y2%3D%221%22%3E%3Cstop%20stop-color%3D%22%2381d733%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23226d2b%22%2F%3E%3C%2FlinearGradient%3E%0A%20%3CradialGradient%20id%3D%22sun%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.9%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%220%22%2F%3E%3C%2FradialGradient%3E%0A%20%3Cfilter%20id%3D%22soft%22%3E%3CfeGaussianBlur%20stdDeviation%3D%2212%22%2F%3E%3C%2Ffilter%3E%0A%20%3CradialGradient%20id%3D%22bubble%22%20cx%3D%22.3%22%20cy%3D%22.22%22%3E%3Cstop%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.9%22%2F%3E%3Cstop%20offset%3D%22.22%22%20stop-color%3D%22%23e5ffff%22%20stop-opacity%3D%22.15%22%2F%3E%3Cstop%20offset%3D%22.8%22%20stop-color%3D%22%23c8f8ff%22%20stop-opacity%3D%22.08%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%20stop-opacity%3D%22.6%22%2F%3E%3C%2FradialGradient%3E%0A%3C%2Fdefs%3E%0A%3Cpath%20fill%3D%22url(%23sky)%22%20d%3D%22M0%200h1600v1000H0z%22%2F%3E%0A%3Cellipse%20cx%3D%221250%22%20cy%3D%22130%22%20rx%3D%22330%22%20ry%3D%22300%22%20fill%3D%22url(%23sun)%22%2F%3E%0A%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.85%22%20filter%3D%22url(%23soft)%22%3E%0A%20%3Cellipse%20cx%3D%22200%22%20cy%3D%22175%22%20rx%3D%22195%22%20ry%3D%2235%22%2F%3E%3Cellipse%20cx%3D%22145%22%20cy%3D%22150%22%20rx%3D%2280%22%20ry%3D%2240%22%2F%3E%3Cellipse%20cx%3D%22235%22%20cy%3D%22140%22%20rx%3D%22105%22%20ry%3D%2252%22%2F%3E%0A%20%3Cellipse%20cx%3D%221080%22%20cy%3D%22310%22%20rx%3D%22255%22%20ry%3D%2243%22%2F%3E%3Cellipse%20cx%3D%221010%22%20cy%3D%22280%22%20rx%3D%22110%22%20ry%3D%2250%22%2F%3E%3Cellipse%20cx%3D%221135%22%20cy%3D%22269%22%20rx%3D%22125%22%20ry%3D%2265%22%2F%3E%0A%20%3Cellipse%20cx%3D%22630%22%20cy%3D%2275%22%20rx%3D%22170%22%20ry%3D%2228%22%2F%3E%0A%3C%2Fg%3E%0A%3Cpath%20fill%3D%22url(%23hill)%22%20d%3D%22M0%20765C310%20615%20490%20635%20780%20737S1270%20742%201600%20590V1000H0z%22%2F%3E%0A%3Cpath%20fill%3D%22url(%23front)%22%20d%3D%22M0%20920C360%20775%20580%20780%20900%20858S1370%20853%201600%20765V1000H0z%22%2F%3E%0A%3Cg%20fill%3D%22url(%23bubble)%22%20stroke%3D%22%23e6ffff%22%20stroke-opacity%3D%22.5%22%20stroke-width%3D%222%22%3E%0A%20%3Ccircle%20cx%3D%2290%22%20cy%3D%22485%22%20r%3D%2248%22%2F%3E%3Ccircle%20cx%3D%221450%22%20cy%3D%22510%22%20r%3D%2270%22%2F%3E%3Ccircle%20cx%3D%221520%22%20cy%3D%22655%22%20r%3D%2228%22%2F%3E%3Ccircle%20cx%3D%22230%22%20cy%3D%22610%22%20r%3D%2219%22%2F%3E%0A%3C%2Fg%3E%3C%2Fsvg%3E");
 background-position:center;background-size:cover;background-repeat:no-repeat;
}
:root[data-theme="aero"] .panel{
 background:linear-gradient(165deg,rgba(255,255,255,.97),rgba(238,251,255,.86) 48%,rgba(213,241,251,.90));
 border-color:var(--border);
 box-shadow:inset 0 1px 0 #fff,inset 0 -1px 0 rgba(255,255,255,.7),var(--shadow);
}
:root[data-theme="aero"] button{
 background:linear-gradient(#8bddff 0%,#329fdf 46%,#0870b7 49%,#04569a 100%);
 border-color:#075590;color:#fff;
 box-shadow:inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(0,49,102,.25),0 3px 8px rgba(5,75,124,.2);
 text-shadow:0 1px 1px rgba(0,40,85,.6);
}
:root[data-theme="aero"] .secondary-btn,
:root[data-theme="aero"] .header-actions .theme-select{
 background:linear-gradient(#fff 0%,#e9faff 46%,#c8ebfa 49%,#e3f5fc 100%);
 border-color:var(--border);color:var(--text);text-shadow:none;
 box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(5,75,124,.13);
}
:root[data-theme="aero"] input,:root[data-theme="aero"] textarea{
 background:linear-gradient(#e2f3fa,#fff 28%);box-shadow:inset 0 2px 5px rgba(18,93,139,.1);
}
:root[data-theme="aero"] .staff-home .tool-icon{
 background:radial-gradient(ellipse at 35% 0%,rgba(255,255,255,.95),transparent 55%),linear-gradient(#7fcbea 46%,#127caf 49%,#065480);
 color:#fff;border-color:#08618f;box-shadow:inset 0 1px 0 #fff,0 4px 10px rgba(5,75,124,.22);text-shadow:0 1px 2px #064269;
}
:root[data-theme="aero"] .staff-home .tool-card:nth-child(even) .tool-icon{
 background:radial-gradient(ellipse at 35% 0%,rgba(255,255,255,.95),transparent 55%),linear-gradient(#b1e870 46%,#559e2b 49%,#286d21);border-color:#438229;
}
:root[data-theme="aero"] :is(.staff-home,.admin-home) .account-panel{
 background:linear-gradient(155deg,#fff,#e4f7ff 65%,#d3effb);box-shadow:inset 0 1px 0 #fff,var(--shadow);
}
:root[data-theme="aero"] :is(.staff-home,.admin-home) .account-panel::backdrop{background:rgba(10,59,99,.4)}
:root[data-theme="aero"] :is(.staff-home,.admin-home) .account-option{background:linear-gradient(#fff,#e0f4fc);box-shadow:inset 0 1px 0 #fff}
:root[data-theme="aero"] :is(.staff-home,.admin-home) .account-option:hover{background:#fff}
:root[data-theme="aero"] .staff-home .portal-header h1{color:#08365c;text-shadow:0 1px 0 rgba(255,255,255,.9),0 2px 12px rgba(255,255,255,.55)}
:root[data-theme="aero"] .staff-home .portal-header .hint,
:root[data-theme="aero"] .staff-home .portal-header .eyebrow,
:root[data-theme="aero"] .staff-home .portal-intro,
:root[data-theme="aero"] .staff-home .portal-badge{color:#103859;text-shadow:0 1px 2px #fff,0 0 12px #fff}
:root[data-theme="aero"] .staff-home .portal-intro .hint{color:#103859}
@media(prefers-reduced-transparency:reduce){
 :root[data-theme="aero"] .panel{background:#f2fbff;backdrop-filter:none;-webkit-backdrop-filter:none}
 :root[data-theme="aero"] :is(.staff-home,.admin-home) .account-panel::backdrop{backdrop-filter:none;-webkit-backdrop-filter:none}
}

/* Themes live in the Account dialog; all seven share the same control. */
.account-panel .account-appearance{padding:18px 16px;margin:0 0 18px;border:1px solid var(--border);border-radius:16px;background:var(--panel)}
.account-panel .appearance-heading{margin:0 0 12px;font-size:15px;font-weight:700;color:var(--text)}
.account-panel .theme-label{display:block;font-size:13px;font-weight:600;margin-bottom:8px;color:var(--text)}
.account-panel .theme-select{display:block;width:100%;min-height:48px;margin:0;padding:12px 14px;border:1px solid var(--border);border-radius:12px;background:var(--panel-2);color:var(--text);font:inherit;font-size:16px;cursor:pointer}
.account-panel .theme-description{font-size:13px;line-height:1.5;margin:12px 0 0;color:var(--muted);min-height:39px}
.account-panel .theme-storage-note{font-size:12px;color:var(--muted);margin:8px 0 0}
.account-panel .theme-preview{height:8px;margin-top:14px;border:1px solid var(--border);border-radius:999px;background:linear-gradient(90deg,var(--bg) 0% 25%,var(--panel-2) 25% 50%,var(--accent) 50% 75%,var(--text) 75%)}
:root[data-theme="aero"] .account-panel .theme-select{background:linear-gradient(#fff 0%,#e9faff 46%,#c8ebfa 49%,#e3f5fc);box-shadow:inset 0 1px 0 #fff}

/* Midnight Cellar: warm brass over velvet and walnut. */
:root[data-theme="midnight"] body{background-image:radial-gradient(ellipse at 12% 0%,rgba(130,29,60,.35),transparent 65%),radial-gradient(ellipse at 100% 90%,rgba(181,116,45,.16),transparent 60%),repeating-linear-gradient(92deg,transparent 0 72px,rgba(218,176,115,.025) 73px 74px)}
:root[data-theme="midnight"] .panel{background:linear-gradient(150deg,#3c202d,#2e2026 65%,#38271f);box-shadow:inset 0 1px 0 rgba(255,217,167,.17),var(--shadow)}
:where(:root[data-theme="midnight"]) button{background:linear-gradient(#f0d09b,#d6a764)}
:root[data-theme="midnight"] :is(.tool-icon,.card-icon){background:linear-gradient(#4b2935,#241820);color:#f3cb8a;box-shadow:inset 0 1px 0 rgba(255,217,167,.2)}

/* Y2K Candy: static sparkle wallpaper and jelly highlights. */
:root[data-theme="candy"] body{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22240%22%20height%3D%22240%22%20viewBox%3D%220%200%20240%20240%22%3E%3Cg%20fill%3D%22%23fff%22%20opacity%3D%22.65%22%3E%3Cpath%20d%3D%22m44%2024%204%2015%2015%204-15%204-4%2015-4-15-15-4%2015-4z%22%2F%3E%3Cpath%20d%3D%22m170%20132%203%2011%2011%203-11%203-3%2011-3-11-11-3%2011-3z%22%2F%3E%3C%2Fg%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23b884d2%22%20opacity%3D%22.22%22%3E%3Ccircle%20cx%3D%22185%22%20cy%3D%2245%22%20r%3D%2219%22%2F%3E%3Ccircle%20cx%3D%2265%22%20cy%3D%22184%22%20r%3D%2228%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),radial-gradient(ellipse at 0% 0%,#c8f0ff,transparent 60%),radial-gradient(ellipse at 100% 80%,#e4c0f5,transparent 65%);background-size:240px 240px,cover,cover}
:root[data-theme="candy"] .panel{background:linear-gradient(150deg,rgba(255,255,255,.98),rgba(255,235,249,.95) 55%,rgba(232,239,255,.95));box-shadow:inset 0 2px 0 #fff,var(--shadow)}
:where(:root[data-theme="candy"]) button{background:linear-gradient(#ad65b9 0%,#913793 46%,#75267a 49%,#9141a3);border-color:#753180;color:#fff;text-shadow:0 1px 1px #591b61;box-shadow:inset 0 1px 0 #eab8f4,0 3px 8px rgba(141,55,151,.2)}
:root[data-theme="candy"] .secondary-btn,:root[data-theme="candy"] .account-panel .theme-select{background:linear-gradient(#fff,#f9e2f4 47%,#eac9ef 50%,#f3e7ff);color:var(--text);box-shadow:inset 0 1px 0 #fff}
:root[data-theme="candy"] :is(.tool-icon,.card-icon){background:radial-gradient(ellipse at 35% 0%,#fff,transparent 65%),linear-gradient(#f7b3df,#d9b0f5 48%,#afd8f3);color:#70317e;box-shadow:inset 0 1px 0 #fff,0 3px 8px rgba(141,55,151,.13)}
:root[data-theme="candy"] :is(.staff-home,.admin-home) .account-panel{background:linear-gradient(150deg,#fff6fc,#f0e8ff)}

/* Retro Terminal: scanlines stay in the background, never over text. */
:root[data-theme="terminal"] body{background-image:repeating-linear-gradient(0deg,rgba(95,234,136,.035) 0 1px,transparent 1px 4px),radial-gradient(ellipse at 50% 0%,rgba(34,118,57,.2),transparent 70%)}
:root[data-theme="terminal"] .panel{background:#0c1e14;box-shadow:inset 0 1px 0 rgba(130,255,168,.12),var(--shadow)}
:root[data-theme="terminal"] :is(h1,h2,.tool-icon,.card-icon){text-shadow:0 0 12px rgba(82,255,140,.22)}
:root[data-theme="terminal"] :is(.tool-icon,.card-icon){background:#07190f;border-color:#3c9660;color:#7befa4}
:where(:root[data-theme="terminal"]) button{background:#7befa4;box-shadow:0 0 14px rgba(75,242,132,.12)}

/* Art Deco Lounge: engraved geometry and champagne-gold accents. */
:root[data-theme="deco"] body{background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22160%22%20height%3D%22200%22%20viewBox%3D%220%200%20160%20200%22%3E%3Cg%20fill%3D%22none%22%20stroke%3D%22%23dfbd76%22%20stroke-width%3D%221%22%20opacity%3D%22.12%22%3E%3Cpath%20d%3D%22M0%20100%2080%200l80%20100-80%20100zM16%20100%2080%2020l64%2080-64%2080zM32%20100%2080%2040l48%2060-48%2060zM80%200v200M0%20100h160%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"),radial-gradient(ellipse at 0% 0%,rgba(182,143,58,.12),transparent 65%),radial-gradient(ellipse at 100% 90%,rgba(32,91,65,.2),transparent 60%);background-size:160px 200px,cover,cover}
:root[data-theme="deco"] .panel{background:linear-gradient(135deg,#292c23,#1b221d);box-shadow:inset 0 1px 0 rgba(246,216,151,.35),inset 0 0 0 5px rgba(227,193,123,.035),var(--shadow)}
:root[data-theme="deco"] :is(.tool-icon,.card-icon){background:linear-gradient(135deg,#3a3828,#19251e);border-color:#ac8a46;color:#f2d79e;box-shadow:inset 0 0 0 3px rgba(227,193,123,.08)}
:where(:root[data-theme="deco"]) button{background:linear-gradient(135deg,#f0d79e,#c9a25a);border-color:#b69250}

/* Keep the XP-inspired Back button from the earlier Aero customization. */
:root[data-theme="aero"] button[onclick="history.back()"]{background:linear-gradient(#ffb6a6 0%,#ee7864 46%,#d8432c 49%,#a92316);border-color:#8f2116;color:#fff;text-shadow:0 1px 1px rgba(80,10,0,.6);box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 -1px 0 rgba(100,15,0,.3),0 3px 8px rgba(110,25,10,.2)}
@media(prefers-reduced-transparency:reduce){:root:is([data-theme="midnight"],[data-theme="candy"],[data-theme="terminal"],[data-theme="deco"]) .panel{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none}}