:root{--page:#f6f5ff;--surface:#ffffffed;--field:#fcfbff;--text:#24204d;--muted:#666182;--line:#dfd9f4;--accent:#7040df;--soft:#eee7ff;--selected:#e8dcff;--shadow:0 12px 38px #6752b010;--brand-position:top}
:root[data-theme=dark]{--page:#17183d;--surface:#24254bee;--field:#1d2043;--text:#f3f0ff;--muted:#bbb5d9;--line:#44436d;--accent:#cab3ff;--soft:#35305c;--selected:#493779;--shadow:0 12px 38px #08082330;--brand-position:bottom}
body{background:radial-gradient(ellipse at 7% 3%,#b699ff30,transparent 36%),radial-gradient(ellipse at 94% 14%,#ffb7ee26,transparent 30%),radial-gradient(ellipse at 80% 50%,#77dfff16,transparent 35%),var(--page);color:var(--text)}
header{border-color:var(--line);flex-wrap:wrap;padding-top:16px;padding-bottom:16px}.wordmark{display:block;flex-shrink:0}.brand-art{display:block;width:300px;aspect-ratio:4 / 1;background-image:url('./assets/brand-approved.png');background-size:100% 200%;background-position:var(--brand-position);background-repeat:no-repeat;border-radius:12px}
.site-nav{flex-wrap:wrap}.site-nav [aria-current=page],.history-link,#legacyDraft a{color:var(--accent)}.theme-label{display:flex;align-items:center;gap:8px;margin:0;color:var(--muted);font-size:12px}.theme-label select{width:112px;padding:7px 9px;border-radius:20px}
section,.work-card,dialog{background:var(--surface);border-color:var(--line);color:var(--text);box-shadow:var(--shadow);border-radius:22px}button,input,select,textarea{background:var(--field);border-color:var(--line);color:var(--text);border-radius:12px}button:hover:enabled{border-color:var(--accent)}input::placeholder,textarea::placeholder{color:var(--muted);opacity:.85}
.primary{background:linear-gradient(110deg,#7041f3,#a53af2);border-color:transparent;color:#fff;box-shadow:0 5px 18px #893de530;border-radius:14px}.hint,.intro p,.candidate p,.style-card small,.testing,.empty,label small,.extra-requirements small,.direction-panel h3 small,.toolbar span{color:var(--muted)}.eyebrow,summary,#selectedReferenceNote{color:var(--accent)}
.intro{padding:26px 0 30px}.intro h1{font-weight:850;color:var(--text);font-size:clamp(34px,4vw,54px)}.heading>span,.combination,#workStatus,#notice{background:var(--soft);color:var(--text);border-color:var(--line)}.heading>span{color:var(--accent)}.combination>span{color:var(--muted)}.candidate{background:var(--field);border-color:var(--line)}.candidate.selected,.chips button[aria-pressed=true],.style-card[aria-pressed=true]{background:var(--selected);border-color:var(--accent);color:var(--text)}.pill{color:var(--accent);border-color:var(--line)}.uploads>div,.generate-bar,.testing{border-color:var(--line)}pre{background:var(--field);color:var(--text)}.mock-note,.mock{color:var(--muted)}#notice.error{background:#fff0e9;color:#832f1d;border-color:#d56745}.test-banner{background:var(--soft);color:var(--text)}:focus-visible{outline-color:var(--accent)}
@media(max-width:800px){.brand-art{width:260px}header{gap:14px}.site-nav{width:100%;justify-content:space-between}.intro{padding-top:12px}.intro h1{font-size:36px}}
@media(max-width:360px){.brand-art{width:245px}.site-nav{gap:8px}.theme-label{gap:4px}.theme-label select{width:96px}.intro h1{font-size:32px}}

/* Optical crop of approved two-panel source; no redraw of lettering. */
:root{--brand-position:center 10%}:root[data-theme=dark]{--brand-position:center 90%}.brand-art{background-size:135% 270%}.intro h1{background:linear-gradient(110deg,var(--text) 10%,#874bed 75%,#52aadc);background-clip:text;-webkit-background-clip:text;color:transparent;max-width:800px}

/* V5: visible theme buttons and viewport-sized luminous color fields. */
body{background:var(--page);isolation:isolate}body::before{content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse at 0% 8%,#c4a1ff 0,transparent 52%),radial-gradient(ellipse at 100% 20%,#ffd1f1 0,transparent 48%),radial-gradient(ellipse at 85% 95%,#b5efff 0,transparent 53%),linear-gradient(135deg,#f5edff,#fcf5ff 50%,#e5f6ff)}
:root[data-theme=dark] body::before{background:radial-gradient(ellipse at 0% 0%,#6039ba 0,transparent 52%),radial-gradient(ellipse at 100% 24%,#83378b99 0,transparent 50%),radial-gradient(ellipse at 92% 100%,#126c9c88 0,transparent 55%),linear-gradient(125deg,#23205b,#232453 48%,#172749)}
header{background:var(--surface);border-radius:0 0 24px 24px}.theme-switch{display:flex;gap:4px;padding:4px;background:var(--soft);border:1px solid var(--line);border-radius:24px}.theme-switch button{border:0;border-radius:20px;padding:7px 12px;font-size:12px;background:transparent;color:var(--text);white-space:nowrap}.theme-switch button[aria-pressed=true]{background:linear-gradient(110deg,#7342ff,#c242f1);color:white;box-shadow:0 3px 12px #8e43f54d}
.intro{position:relative;border:1px solid #ffffff50;border-radius:28px;padding:30px 32px;margin:0 0 24px;overflow:hidden;background:linear-gradient(110deg,#ffffffb8,#e4c8ff80 55%,#fac8ef80 78%,#b4eaff80);box-shadow:0 14px 45px #773dc414}.intro::after{content:'';position:absolute;right:5%;top:18%;width:145px;height:145px;border-radius:40% 60% 65% 35%;transform:rotate(-25deg);background:linear-gradient(135deg,#b1f5ff,#9974ff 45%,#f7a7f1 76%,#dcfaff);box-shadow:inset 8px 8px 18px #ffffffb0,inset -10px -10px 20px #7c48d770,0 18px 40px #9c66ee38;pointer-events:none;opacity:.8}.intro>*{position:relative;z-index:1}.intro h1{font-size:clamp(32px,3.8vw,50px);max-width:75%;margin:14px 0}.intro p{max-width:75%}
:root[data-theme=dark] .intro{background:linear-gradient(110deg,#302773e8,#563697a0 60%,#b14bab50 83%,#46a1c644)}
section,.work-card{background:linear-gradient(135deg,#ffffffee,#ffffffbb 65%,#f5ecffcf)}:root[data-theme=dark] section,:root[data-theme=dark] .work-card{background:linear-gradient(130deg,#353270ed,#282950ed 60%,#343469d9)}
.primary{background:linear-gradient(105deg,#643cff 0%,#9f36f4 55%,#e44bf4 100%);box-shadow:0 6px 22px #a140ed45}.chips button[aria-pressed=true],.style-card[aria-pressed=true]{background:linear-gradient(120deg,var(--selected),var(--soft))}
@media(max-width:800px){.intro{padding:24px 20px}.intro::after{width:90px;height:90px;right:4%;top:23%}.intro p{max-width:82%}.theme-switch{margin-left:auto}.site-nav{gap:10px}}
@media(max-width:500px){.theme-switch{width:100%;margin:3px 0 0;justify-content:center}.theme-switch button{flex:1}.intro h1{max-width:85%;font-size:32px}.intro::after{opacity:.32;right:-18px}.intro p{max-width:100%}header .site-nav{justify-content:flex-start;gap:18px}}
/* V6: continuous header and transparent brand artwork. */
header{background:transparent;border:0;border-radius:0;box-shadow:none;padding-top:24px;padding-bottom:10px}.brand-art{background-color:transparent;border-radius:0}main{padding-top:22px}.test-banner{background:#ffffff12}.intro{border-color:transparent;box-shadow:none}
.brand-art{position:relative;background-image:none}.brand-art::before{content:'';position:absolute;inset:0;background-image:url('./assets/brand-approved.png?v=6');background-size:135% 270%;background-position:var(--brand-position);background-repeat:no-repeat;clip-path:inset(0 0 18% 0)}.brand-art::after{content:'从开黑到开赛，好图都安排';position:absolute;left:28%;right:3%;bottom:3px;text-align:center;font:9px/1.3 system-ui,'Microsoft YaHei',sans-serif;letter-spacing:1px;color:var(--text)}
/* V7: render clean approved source, separate readable HTML slogan. */
.brand-clean{display:flex;align-items:center;gap:9px;width:330px}.brand-icon{width:75px;height:75px;flex:none;overflow:hidden}.brand-copy{display:flex;flex-direction:column;align-items:center;flex:1;min-width:0;gap:5px}.brand-type{display:block;width:100%;height:57px;overflow:hidden}.brand-slogan{font:12px/1.5 system-ui,'Microsoft YaHei',sans-serif;letter-spacing:.5px;white-space:nowrap;color:var(--text)}:root[data-theme=dark] .brand-type{filter:brightness(0) invert(1)}
@media(max-width:500px){.brand-clean{width:285px;gap:7px}.brand-icon{width:63px;height:67px}.brand-type{height:49px}.brand-slogan{font-size:11px;letter-spacing:0}}
/* V8: slogan tracks the full wordmark width, matching approved lockup. */
.brand-slogan{display:flex;justify-content:space-between;align-items:center;align-self:stretch;width:100%;padding:0 7px;letter-spacing:0;font-size:12px;line-height:1.5}.brand-slogan>span{flex:0 0 auto}.brand-copy{gap:3px}
@media(max-width:500px){.brand-slogan{font-size:11px;padding:0 5px;letter-spacing:0}}
/* V9: quiet contrast behind brand, smoothly merging with page color. */
body::before{background:radial-gradient(ellipse 720px 300px at 0% 0%,#fcfaff 0%,#f7f0ffed 35%,#f2e8ff80 65%,transparent 100%),radial-gradient(ellipse at 0% 8%,#c4a1ff 0,transparent 52%),radial-gradient(ellipse at 100% 20%,#ffd1f1 0,transparent 48%),radial-gradient(ellipse at 85% 95%,#b5efff 0,transparent 53%),linear-gradient(135deg,#f5edff,#fcf5ff 50%,#e5f6ff)}
:root[data-theme=dark] body::before{background:radial-gradient(ellipse 720px 300px at 0% 0%,#111b3c 0%,#182047ed 35%,#23215b88 65%,transparent 100%),radial-gradient(ellipse at 0% 0%,#6039ba 0,transparent 52%),radial-gradient(ellipse at 100% 24%,#83378b99 0,transparent 50%),radial-gradient(ellipse at 92% 100%,#126c9c88 0,transparent 55%),linear-gradient(125deg,#23205b,#232453 48%,#172749)}
/* V10: esports hero art replaces abstract blob. */
.intro::after{display:none}.intro>.hero-esports{position:absolute;z-index:0;right:3%;top:50%;transform:translateY(-50%);width:235px;height:235px;object-fit:contain;pointer-events:none}.intro h1,.intro p,.intro .eyebrow{position:relative;z-index:1}.intro h1,.intro p{max-width:calc(100% - 240px)}
@media(max-width:800px){.intro>.hero-esports{width:155px;height:155px;right:10px}.intro h1,.intro p{max-width:calc(100% - 150px)}}
@media(max-width:500px){.intro>.hero-esports{position:static;display:block;transform:none;width:145px;height:145px;margin:8px auto -10px}.intro h1,.intro p{max-width:100%}}
/* V11: luminous accent for the icon only; approved silhouette remains. */
.brand-neon{filter:drop-shadow(0 0 4px #c376ff55) drop-shadow(0 0 9px #78dcff22)}:root[data-theme=dark] .brand-neon{filter:brightness(1.16) drop-shadow(0 0 4px #c376ff80) drop-shadow(0 0 10px #78dcff40)}
/* V13: pearlescent B palette with crisp outline; contain button gradient. */
.brand-neon,:root[data-theme=dark] .brand-neon{filter:none}
.primary,.theme-switch button[aria-pressed=true]{box-shadow:none;background-clip:padding-box;overflow:hidden}
.primary{border:0;isolation:isolate}
/* Compact appearance menu and announcements, shared across header layouts. */
header .header-tools{position:relative;display:flex;align-items:center;gap:8px;margin-left:auto;flex:0 0 auto;order:4;width:auto;z-index:40}
header .header-tools .header-icon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;min-height:38px;padding:8px;border:0;border-radius:50%;background:transparent;color:var(--accent);box-shadow:none;cursor:pointer}
header .header-tools .header-icon:hover,header .header-tools .header-icon[aria-expanded=true]{background:var(--soft)}
header .header-tools svg{width:20px;height:20px;flex:none}
header .header-tools .header-popover{position:absolute;top:calc(100% + 10px);right:0;margin:0;padding:7px;background:var(--surface);color:var(--text);border:1px solid var(--line);border-radius:10px;box-shadow:0 8px 28px #15132b20;backdrop-filter:blur(18px)}
header .header-tools [hidden]{display:none!important}
header .header-tools .theme-options{width:156px}
header .header-tools .theme-options button{display:flex;align-items:center;gap:10px;width:100%;min-height:40px;padding:9px 10px;border:0;border-radius:6px;background:transparent;color:var(--text);font:inherit;font-size:14px;text-align:left;white-space:nowrap;box-shadow:none;cursor:pointer}
header .header-tools .theme-options button:hover,header .header-tools .theme-options button[aria-pressed=true]{background:var(--soft)}
header .header-tools .theme-options button[aria-pressed=true]{font-weight:700}
header .header-tools .announcement-panel{width:300px;max-width:calc(100vw - 36px);padding:18px}
header .header-tools .announcement-panel h2{margin:0;font-size:17px;text-align:left}
header .header-tools .announcement-empty{padding:24px 4px;text-align:center;color:var(--muted)}
header .header-tools .announcement-empty svg{width:30px;height:30px;opacity:.65}
header .header-tools .announcement-empty p{margin:10px 0 4px;font-size:15px}
header .header-tools .announcement-empty span{font-size:13px}
header .header-tools button:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
@media(max-width:700px){header .header-tools{order:2;gap:4px;margin-left:auto}header .header-tools .header-icon{width:36px;height:36px;min-height:36px}}