/* V8 — sampled from the user's desktop client, not a monochrome color wash.
   Layer 0: #100f10 canvas. Layer 1: #17191a panels. Layer 2: #202222 controls.
   Theme color is reserved for hero, navigation selection, table header and actions. */
html:root[data-theme=dark]{--e-bg:#100f10;--e-panel:#17191a;--e-raised:#202222;--e-inset:#121314;--e-border:#393632;--e-text:#f1e6d5;--e-secondary:#cdbb9f;--e-muted:#b5a58b;--e-accent:#deb578;--e-accent-soft:#d1a56910;--e-theme:#852b35;--e-good:#ef654e;--e-negative:#8dbcaa;--e-hero-text:#fff0db;--e-shadow:#0003;--client-header:#35151c;--client-border:#79623f;--client-selected:#2c251e}
html:root[data-theme=forest]{--e-bg:#101211;--e-panel:#171b19;--e-raised:#202623;--e-inset:#121613;--e-border:#373e37;--e-text:#f0eadb;--e-secondary:#c6c4ac;--e-muted:#adae95;--e-accent:#d7bf84;--e-accent-soft:#c2b46b10;--e-theme:#31573c;--e-good:#ed7a60;--e-negative:#8ebca8;--e-hero-text:#f9f0d7;--e-shadow:#0003;--client-header:#193528;--client-border:#6c7850;--client-selected:#292e22}
html:root[data-theme] .main{background:var(--e-bg)}
html:root[data-theme] .shell{grid-template-columns:244px minmax(0,1fr)}
html:root[data-theme] .content{padding:12px 14px 28px;max-width:1800px}
html:root[data-theme] .topbar{height:54px;min-height:54px;padding:0 22px;border-bottom:1px solid var(--client-border);background:#101212}
html:root[data-theme] .topbar .breadcrumb{font-size:12px}
html:root[data-theme] .topbar .breadcrumb b{font-size:13px}
html:root[data-theme] .top-actions :is(.top-button,.icon-button){min-height:34px;padding:7px 11px;border-radius:3px}
html:root[data-theme] .top-actions [data-action=account]{background:color-mix(in srgb,var(--client-header) 80%,#17191a);border-color:var(--client-border)}
/* Sidebar: retain the client's seal, material and accent ribbon. */
html:root[data-theme] .sidebar{padding:0 14px 18px;border-right:2px solid var(--client-border);background:linear-gradient(#101212dd,#0e1010ec),url('assets/sidebar-iron.png') center/cover}
html:root[data-theme=dark] .sidebar:before{content:'';display:block;position:absolute;left:0;top:0;width:47px;height:208px;background:url('assets/sidebar-flag.png') top left/100% 100% no-repeat;opacity:.95;pointer-events:none}
html:root[data-theme=forest] .sidebar{background:linear-gradient(#101713ee,#101311f2),url('assets/forest-bark.webp') center/cover}
html:root[data-theme=forest] .sidebar:before{display:none}
html:root[data-theme] .sidebar:after{height:190px;opacity:.75;pointer-events:none}
html:root[data-theme] .brand{position:relative;z-index:1;min-height:190px;height:190px;flex-direction:column;justify-content:center;gap:10px;padding:13px 0 19px;margin:0 0 12px;border-bottom:1px solid var(--client-border)}
html:root[data-theme] .brand-mark{width:72px;height:77px}
html:root[data-theme] .brand-text{text-align:center}
html:root[data-theme] .brand-name{font-size:38px;line-height:1.25;letter-spacing:.025em}
html:root[data-theme] .brand-sub{font-family:'Team Song','SimSun',serif;font-size:15px;letter-spacing:.15em;font-weight:900;color:var(--e-secondary);margin-top:7px}
html:root[data-theme] .nav-label{font-size:12px;margin:10px 0 7px;padding-inline:12px;letter-spacing:.06em}
html:root[data-theme] .nav{gap:4px}
html:root[data-theme] .nav-btn{min-height:43px;padding:8px 12px;font-size:17px;font-weight:450;border-radius:2px;gap:11px}
html:root[data-theme] .nav-icon{font-size:18px;width:20px}
html:root[data-theme] .nav-separator{display:none}
html:root[data-theme=dark] .nav-btn.active{background:linear-gradient(#761c28b3,#4a101bc9),url('assets/crimson-silk-v3.webp') center/cover;border:1px solid #b28b50;color:#fff0dc;box-shadow:inset 0 0 0 2px #d5b07120}
html:root[data-theme=forest] .nav-btn.active{background:linear-gradient(#244b2aa8,#173923bb),url('assets/forest-silk.webp') center/cover;border:1px solid #9aa366;color:#f0efcf;box-shadow:inset 0 0 0 2px #c3ce7a20}
html:root[data-theme] .nav-btn.active:before{display:none}
html:root[data-theme] .sidebar-bottom{padding:22px 10px 0}
html:root[data-theme] .sidebar-bottom .side-foot{font-family:'Client Serif','SimSun',serif;font-size:30px;color:var(--e-accent);letter-spacing:.04em;font-weight:900}
/* Header is the major colored surface; secondary surfaces remain neutral. */
html:root[data-theme] .hero-kicker{display:none}
html:root[data-theme] .page-heading{min-height:190px;padding:23px 34px;margin-bottom:12px;border:1px solid var(--client-border);border-radius:1px;gap:22px;box-shadow:inset 0 0 0 2px #cfad6620}
html:root[data-theme] .page-heading>.frame-corner{width:30px;height:30px;opacity:1}
html:root[data-theme] .page-heading h1{font-size:50px;line-height:1.2;margin:0 0 7px;letter-spacing:.035em}
html:root[data-theme] .page-heading p{font-family:'Client Serif','SimSun',serif;font-size:22px;line-height:1.45;font-weight:900;color:#f8e6ce}
html:root[data-theme] .hero-caption{font-size:13px;line-height:1.7;margin-top:8px;color:#e4d9c1}
html:root[data-theme] .heading-side{flex:0 0 55%;min-width:0;padding:8px 0 8px 23px;border:0;border-left:1px solid #d8b57370;border-radius:0;background:none;backdrop-filter:none;text-shadow:0 1px 4px #0009}
html:root[data-theme] .heading-side>div{font-size:14px;letter-spacing:0;color:#f4e4c8}
html:root[data-theme] .heading-side strong{font-size:72px;line-height:1.1;margin:9px 0;color:#e5c185;font-weight:600}
html:root[data-theme] .heading-side span{font-size:13px;color:#e6dbc4}
html:root[data-theme] .demo-banner{background:transparent;border:0;border-bottom:1px solid var(--e-border);border-radius:0;min-height:30px;padding:3px 12px 7px;margin:0 0 12px;gap:12px}
html:root[data-theme] .snapshot-status strong,html:root[data-theme] .snapshot-status>div>span{font-size:11px}
html:root[data-theme] .demo-banner button{min-height:25px}
/* One continuous metric strip, divided by understated inset rules. */
html:root[data-theme] .stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;background:var(--e-panel);border:1px solid var(--e-border);border-radius:1px;margin-bottom:10px;overflow:hidden}
html:root[data-theme] .metric{position:relative;padding:14px 19px;min-height:90px;background:none;border:0;border-radius:0;box-shadow:none}
html:root[data-theme] .metric+.metric:before{content:'';display:block;position:absolute;left:0;top:26px;bottom:26px;width:1px;background:#3c3a35}
html:root[data-theme] .metric-label{font-size:13px;color:var(--e-secondary)}
html:root[data-theme] .metric-value{font-size:30px;line-height:1.15;margin-top:9px;color:var(--e-text);font-weight:600}
html:root[data-theme] .metric-value small{font-size:11px;color:var(--e-muted)}
/* Compact neutral filter shelf; labels remain available to assistive technology. */
html:root[data-theme] :is(.toolbar,.variant-controls){padding:10px 12px;gap:10px;background:var(--e-panel);border:1px solid #4e4434;border-radius:4px;margin-bottom:10px}
html:root[data-theme] .real-toolbar{align-items:center}
html:root[data-theme] .real-toolbar>.field>label{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
html:root[data-theme] .real-toolbar .field{min-width:130px;gap:0}
html:root[data-theme] .real-toolbar .search-field{min-width:180px}
html:root[data-theme] :is(.field select,.field input,.real-toolbar>.button){height:36px;min-height:36px;padding:7px 10px;font-size:13px;border-radius:3px;background:#17191a;border-color:#514837}
html:root[data-theme] :is(.button,.top-button,.icon-button,.config-more-filters>summary){border-radius:3px}
/* Table layers: accent header, charcoal rows, warm lead-row highlight. */
html:root[data-theme] :is(.panel,.config-library){background:var(--e-panel);border-color:var(--e-border);border-radius:1px}
html:root[data-theme] .panel-head{background:transparent;border-color:var(--e-border);padding:15px 18px;min-height:0}
html:root[data-theme] :is(.page-rank,.page-white,.page-mid,.page-high) .panel>.panel-head{padding:5px 14px;border-bottom:0}
html:root[data-theme] :is(.page-rank,.page-white,.page-mid,.page-high) .panel>.panel-head h2{display:none}
html:root[data-theme] :is(.page-rank,.page-white,.page-mid,.page-high) .panel>.panel-head p{font-size:11px;line-height:1.6;margin:0;color:var(--e-muted)}
html:root[data-theme] .data-table th{background:var(--client-header);color:#f3e5cf;font-size:13px;line-height:1.5;padding:12px;border-bottom:1px solid #59463b;box-shadow:none}
html:root[data-theme] :is(.real-table,.analysis-table) td{height:52px;padding:8px 12px;font-size:16px;border-bottom:1px solid #333634;line-height:1.5;color:var(--e-text)}
html:root[data-theme] :is(.real-table,.analysis-table) tbody tr,html:root[data-theme] :is(.real-table,.analysis-table) tbody tr:nth-child(even){background:var(--e-panel)}
html:root[data-theme] .real-table tbody tr:first-child{background:var(--client-selected)}
html:root[data-theme] .real-table .team-title{font-size:20px;line-height:1.6;letter-spacing:0;min-width:240px}
html:root[data-theme] .analysis-table .team-title{font-size:20px;line-height:1.7;letter-spacing:0}
html:root[data-theme] .real-table .rank-number{font-family:'Team Song','SimSun',serif;font-size:18px;font-weight:900;color:var(--e-accent)}
html:root[data-theme] :is(.real-table,.analysis-table) :is(.trusted,.exchange-value){font-size:27px;font-weight:600;color:var(--e-accent)}
html:root[data-theme] .real-table .red-count{color:var(--e-accent);font-size:15px}
html:root[data-theme] :is(.real-table,.analysis-table) .sample-value{font-size:16px;color:var(--e-text)}
html:root[data-theme] :is(.real-table,.analysis-table) :is(.loss-diff,.is-positive){color:var(--e-good);font-size:16px;font-weight:600}
html:root[data-theme] :is(.real-table,.analysis-table) :is(.negative,.is-negative){color:var(--e-negative);font-size:16px;font-weight:600}
html:root[data-theme] .real-table [data-real-inspect]{background:none;border:0;min-height:32px;min-width:32px;color:var(--e-accent);font-size:18px;padding:2px 5px}
html:root[data-theme] .table-wrap:has(.real-table,.analysis-table){scrollbar-color:#786d56 #17191a}
/* The same neutral content layering carries through the other pages. */
html:root[data-theme] .baseline-panel{background:linear-gradient(110deg,#20241f,#171b1a);border-color:#44483b;border-radius:2px;padding:18px 20px;margin-bottom:14px}
html:root[data-theme] .baseline-value strong{color:var(--e-accent)}
html:root[data-theme] .ribbon-heading{background:var(--client-header);border-bottom-color:var(--client-border);min-height:53px;padding:14px 15px}
html:root[data-theme] .config-main-filters select{background:var(--e-inset)}
html:root[data-theme] .team-button{background:transparent;border-color:#373b36;min-height:84px}
html:root[data-theme] .team-button.selected{background:var(--client-selected);border-left-color:var(--e-accent);box-shadow:none}
html:root[data-theme] .build-card{background:var(--e-panel);border-color:#43453c;border-radius:2px}
html:root[data-theme] .build-card[open]{background:var(--e-panel);border-color:var(--client-border)}
html:root[data-theme] .build-summary{background:var(--e-panel);min-height:90px}
html:root[data-theme] .build-card[open]>.build-summary{background:var(--client-header);border-bottom-color:var(--client-border)}
html:root[data-theme] .unit-build{border-color:#43483e}
html:root[data-theme] .skill-chip{background:#d2b7750a;border:1px solid #535342;color:var(--e-text)}
html:root[data-theme] .matchup-context{background:#20241f;border-color:#454a3e}
html:root[data-theme] .evidence-caption{background:var(--e-panel)}
html:root[data-theme] .note{background:transparent;border:0;border-top:1px solid var(--e-border);padding:13px 16px;font-size:12px;border-radius:0}
html:root[data-theme] .modal,html:root[data-theme] .theme-options{background:var(--e-panel);border-color:var(--client-border)}
html:root[data-theme] .modal-head{background:var(--client-header);border-color:var(--client-border)}
@media(hover:hover) and (pointer:fine){html:root[data-theme] :is(.real-table,.analysis-table) tbody tr:hover{background:var(--client-selected)!important}html:root[data-theme] .team-button:not(.selected):hover{background:#242922}}
@media(min-width:768px) and (max-width:1199px){
 html:root[data-theme] .shell{grid-template-columns:72px minmax(0,1fr)}
 html:root[data-theme] .sidebar{padding:0 8px 16px}
 html:root[data-theme] .brand{height:100px;min-height:100px;padding:12px 0;margin-bottom:10px}
 html:root[data-theme] .brand-mark{width:42px;height:47px}
 html:root[data-theme] .brand-text,html:root[data-theme] .sidebar-bottom,html:root[data-theme] .nav-label{display:none}
 html:root[data-theme] .nav-btn{justify-content:center;padding:10px 0;min-height:46px}
 html:root[data-theme=dark] .sidebar:before{width:24px;height:100px;opacity:.5}
 html:root[data-theme] .page-heading{min-height:172px;padding:22px 25px}
 html:root[data-theme] .page-heading h1{font-size:40px}
 html:root[data-theme] .page-heading p{font-size:18px}
 html:root[data-theme] .heading-side{flex-basis:47%}
 html:root[data-theme] .heading-side strong{font-size:60px}
 html:root[data-theme] .heading-side>div,html:root[data-theme] .heading-side span{font-size:12px}
 html:root[data-theme] .metric{padding:14px;min-height:86px}
 html:root[data-theme] .metric-value{font-size:28px}
}
@media(max-width:767px){
 html:root[data-theme] .shell{display:block}
 html:root[data-theme] .sidebar{width:min(290px,85vw);padding:0 14px 20px}
 html:root[data-theme] .brand{height:170px;min-height:170px;padding:18px 0 15px;margin-top:0;margin-bottom:10px;gap:8px}
 html:root[data-theme] .brand-mark{width:58px;height:62px}
 html:root[data-theme] .brand-name{font-size:32px}
 html:root[data-theme] .brand-sub{font-size:13px}
 html:root[data-theme] .nav-label{display:block;font-size:11px}
 html:root[data-theme] .nav-btn{font-size:16px;min-height:45px;justify-content:flex-start}
 html:root[data-theme] .content{padding:12px 12px max(28px,env(safe-area-inset-bottom))}
 html:root[data-theme] .topbar{height:62px;min-height:62px;padding:7px 12px;gap:7px}
 html:root[data-theme] .top-actions :is(.top-button,.icon-button){min-height:44px}
 html:root[data-theme] .page-heading{min-height:153px;padding:19px 19px;margin-bottom:9px;gap:0}
 html:root[data-theme] .page-heading h1{font-size:34px;line-height:1.25}
 html:root[data-theme] .page-heading p{font-size:15px;line-height:1.6;max-width:23ch}
 html:root[data-theme] .hero-caption{font-size:10px;line-height:1.8;max-width:36ch;margin-top:6px}
 html:root[data-theme] .config-hero .hero-caption{font-size:14px}
 html:root[data-theme] .heading-side{display:none}
 html:root[data-theme] .demo-banner{min-height:52px;padding:5px 7px 8px;margin-bottom:10px;gap:9px}
 html:root[data-theme] .snapshot-status strong,html:root[data-theme] .snapshot-status>div>span{font-size:10px}
 html:root[data-theme] .demo-banner button{min-height:44px}
 html:root[data-theme] .stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:10px;border-radius:1px}
 html:root[data-theme] .metric{padding:13px 15px;min-height:88px;border:0;background:none}
 html:root[data-theme] .metric:nth-child(n+3){border-top:1px solid var(--e-border)}
 html:root[data-theme] .metric+.metric:before{top:18px;bottom:18px}
 html:root[data-theme] .metric:nth-child(3):before{display:none}
 html:root[data-theme] .metric-label{font-size:11px}
 html:root[data-theme] .metric-value{font-size:29px;margin-top:8px}
 html:root[data-theme] :is(.toolbar,.variant-controls){padding:12px;gap:10px;margin-bottom:12px}
 html:root[data-theme] .real-toolbar>.field>label{position:static;width:auto;height:auto;clip-path:none;overflow:visible;font-size:11px;display:block;margin-bottom:5px}
 html:root[data-theme] .real-toolbar .field{min-width:0}
 html:root[data-theme] :is(.field input,.field select,.real-toolbar>.button){height:44px;min-height:44px;font-size:16px}
 html:root[data-theme] .real-toolbar>.button{font-size:12px}
 html:root[data-theme] :is(.page-rank,.page-white,.page-mid,.page-high) .panel>.panel-head{padding:7px 12px}
 html:root[data-theme] :is(.real-table,.analysis-table) tbody{padding:10px;gap:10px}
 html:root[data-theme] :is(.real-table,.analysis-table) tbody tr,html:root[data-theme] :is(.real-table,.analysis-table) tbody tr:nth-child(even){background:var(--e-panel)!important;border-color:#45463a;border-radius:2px;padding:15px 13px;gap:14px 10px}
 html:root[data-theme] .real-table tbody tr:first-child{border-color:var(--client-border);background:var(--client-selected)!important}
 html:root[data-theme] :is(.real-table,.analysis-table) td{height:auto;padding:0!important;font-size:14px}
 html:root[data-theme] :is(.real-table,.analysis-table) .team-title{font-size:21px;line-height:1.8;min-width:0}
 html:root[data-theme] .real-table .rank-number{font-size:17px}
 html:root[data-theme] :is(.real-table,.analysis-table) :is(.trusted,.exchange-value){font-size:28px!important}
 html:root[data-theme] :is(.real-table,.analysis-table) :is(.loss-diff,.is-positive){color:var(--e-good);font-size:14px}
 html:root[data-theme] :is(.real-table,.analysis-table) :is(.negative,.is-negative){color:var(--e-negative);font-size:14px}
 html:root[data-theme] .real-table .red-count{font-size:13px}
 html:root[data-theme] .real-table [data-real-inspect]{min-height:44px;min-width:44px;border:1px solid var(--e-border)}
 html:root[data-theme] .baseline-panel{padding:17px 14px}
 html:root[data-theme] .build-card[open]>.build-summary{background:var(--client-header)}
 html:root[data-theme] .build-content{padding:19px 16px 0}
 html:root[data-theme] .unit-build h3{font-size:25px}
 html:root[data-theme] .skill-chip{font-size:13px}
 html:root[data-theme] .sidebar-bottom{display:block}
}
@media(max-width:359px){html:root[data-theme] .page-heading{padding:18px 16px;min-height:150px}html:root[data-theme] .page-heading h1{font-size:31px}html:root[data-theme] .metric-value{font-size:26px}html:root[data-theme] .metric{padding:12px}html:root[data-theme] .theme-options{width:calc(100vw - 48px)}}

/* Account/configuration tiers; retain the crimson/forest design tokens. */
.config-access-note{display:flex;align-items:center;flex-wrap:wrap;gap:12px;padding:16px 20px;margin:14px 0;border:1px solid var(--border, #423b32);border-radius:10px;background:rgba(255,255,255,.025);font-size:14px;line-height:1.7}.config-access-note small{flex-basis:100%;opacity:.65}.auth-tabs{flex-wrap:wrap;gap:8px}#live-auth-form{display:grid;gap:9px}#live-auth-form input{box-sizing:border-box;width:100%;min-width:0;min-height:44px}#live-auth-form label{margin-top:8px}#live-auth-form .auth-message{min-height:1.6em;overflow-wrap:anywhere}.auth-tabs .button{min-height:44px}.config-access-note .button{min-height:44px}@media(max-width:600px){.auth-tabs .button{flex:1 1 120px}.config-access-note{padding:14px}.config-access-note .button{width:100%}}