:root{
  --bg:#020915; --bg2:#071525; --panel:#081a2cdd; --panel2:#0b2036ee; --line:#16456d; --line2:#2387d7;
  --text:#e9f4ff; --muted:#8fa9bf; --blue:#1aa7ff; --cyan:#6bd7ff; --gold:#f7b84b; --orange:#ff8a3d;
  --green:#42d68a; --red:#ff5f70; --shadow:0 0 28px rgba(0,145,255,.15), inset 0 0 22px rgba(15,83,135,.14);
}
*{box-sizing:border-box} body{margin:0;color:var(--text);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Microsoft YaHei",Arial,sans-serif;background:radial-gradient(circle at top left,#0b2b49 0,#061326 36%,#020711 100%);min-height:100vh;}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(71,174,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(71,174,255,.04) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(to bottom,rgba(0,0,0,.55),rgba(0,0,0,.08));}
.app-shell{min-height:100vh;display:flex;flex-direction:column}.topbar{height:86px;border-bottom:1px solid var(--line);background:linear-gradient(90deg,#061321,#0b1d31 56%,#06111e);display:flex;align-items:center;justify-content:space-between;padding:0 26px;box-shadow:0 6px 28px rgba(0,0,0,.32)}
.brand{display:flex;align-items:center;gap:16px}.brand h1{margin:0;font-size:29px;letter-spacing:1.5px}.brand p{margin:5px 0 0;color:#c5d8e8;font-size:14px;font-style:italic}.brand-logo{width:54px;height:54px;border:1px solid #2b85c5;border-radius:12px;position:relative;background:radial-gradient(circle,#0e65b8 0 8%,transparent 10%),linear-gradient(135deg,#071b30,#0e2741);box-shadow:0 0 18px rgba(24,152,255,.35)}.brand-logo:after{content:"";position:absolute;inset:11px;border:1px dashed #63c9ff;border-radius:50%;transform:rotate(25deg)}.brand-logo span{position:absolute;left:18px;top:18px;width:18px;height:18px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 12px rgba(45,174,255,.12),0 0 20px var(--blue)}.demo-badge{border:1px solid var(--gold);color:var(--gold);padding:7px 12px;border-radius:7px;background:rgba(255,184,75,.08);font-weight:700}
.nav-tabs{display:flex;height:100%;align-items:stretch}.nav-tab{background:transparent;border:0;border-left:1px solid rgba(70,152,213,.18);color:#b8c9d8;padding:0 28px;font-size:17px;cursor:pointer}.nav-tab.active{color:#fff;background:linear-gradient(180deg,#0b3768,#0b2440);box-shadow:inset 0 -3px 0 var(--blue),0 0 24px rgba(25,140,255,.22)}
main{flex:1;padding:14px}.page{display:none}.page-active{display:block}.layout{display:grid;gap:14px}.layout-student{grid-template-columns:440px minmax(620px,1fr) 390px}.layout-ai{grid-template-columns:360px minmax(780px,1fr) 290px}.panel{background:linear-gradient(145deg,rgba(7,24,42,.96),rgba(6,18,32,.86));border:1px solid var(--line);border-radius:12px;box-shadow:var(--shadow);position:relative;overflow:hidden}.panel:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 85% 10%,rgba(33,170,255,.10),transparent 30%);pointer-events:none}.left-panel,.right-panel{padding:16px}.center-panel{min-width:0}.panel-title{display:flex;align-items:center;gap:11px;margin-bottom:14px}.panel-title span{color:var(--cyan);font-size:22px}.panel-title h2{font-size:19px;margin:0}.panel-title p{margin:3px 0 0;color:var(--muted);font-size:12px}.panel-title.compact{justify-content:flex-start;margin-bottom:10px}.panel-title.compact h2{font-size:17px}.panel-title .link-btn{margin-left:auto}.mini-title{color:#bfe8ff;font-weight:700;margin:7px 0 10px;letter-spacing:.3px}.slider-list{display:flex;flex-direction:column;gap:11px}.slider-row{display:grid;grid-template-columns:38px 1fr 74px;gap:10px;align-items:center}.element{font-size:22px}.range-wrap{display:grid;grid-template-columns:42px 1fr 42px;align-items:center;gap:8px;color:#8da7bb;font-size:12px}input[type=range]{width:100%;accent-color:var(--blue);filter:drop-shadow(0 0 5px rgba(0,178,255,.8))}.value-box{background:#061326;border:1px solid #2a648d;border-radius:7px;color:#fff;padding:8px;text-align:center;font-size:16px}.value-box input{width:100%;background:transparent;border:0;color:#fff;text-align:center;font-size:16px;outline:none}.task-card,.advanced-card,.subpanel{border:1px solid #17456c;background:rgba(10,36,61,.62);border-radius:10px;padding:13px;margin-top:14px}.task-card h3{margin:0 0 7px;color:#48bbff}.task-card p,.hint,.muted{color:var(--muted);font-size:13px;line-height:1.5}.advanced-card summary{cursor:pointer;color:#dff5ff;font-weight:700}.advanced-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:12px 0}.advanced-grid label,.switch-list label{color:#dceeff;font-size:13px}input[type=checkbox]{accent-color:var(--blue)}.action-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px}.btn{border:1px solid #2f6f9e;border-radius:9px;padding:12px 14px;color:#fff;background:#112a42;cursor:pointer;font-weight:800;font-size:16px;transition:.15s}.btn:hover{transform:translateY(-1px);filter:brightness(1.08)}.btn.primary{background:linear-gradient(135deg,#0667d2,#159fff);box-shadow:0 0 18px rgba(20,143,255,.28)}.btn.secondary{background:linear-gradient(135deg,#1a3158,#2a45a3)}.btn.gold{background:linear-gradient(135deg,#81570b,#e0a12a);border-color:#ffce62}.btn.ghost{background:rgba(120,160,190,.12)}.btn.small{font-size:13px;padding:8px 10px}.link-btn{background:transparent;border:0;color:var(--cyan);cursor:pointer}.kpi-grid{display:grid;grid-template-columns:1.25fr repeat(3,1fr);gap:14px;margin-bottom:14px}.kpi{min-height:112px;padding:16px;background:linear-gradient(145deg,rgba(9,30,51,.98),rgba(5,18,32,.93));border:1px solid #1d557c;border-radius:12px;box-shadow:var(--shadow)}.kpi-main{border-color:#17b4ff;box-shadow:0 0 26px rgba(23,180,255,.25),inset 0 0 26px rgba(23,180,255,.08)}.kpi-label{color:#c9ddea;font-weight:700}.info{font-size:11px;color:var(--gold);border:1px solid rgba(247,184,75,.45);padding:2px 6px;border-radius:4px;margin-left:5px}.kpi-value{font-size:48px;font-weight:900;color:var(--blue);line-height:1.15}.kpi-main .kpi-value{font-size:68px;color:#5ad9ff;text-shadow:0 0 16px rgba(51,197,255,.55)}.kpi-value small{font-size:18px;color:#b7c8d6;margin-left:6px}.kpi-value.risk{color:var(--gold)}.kpi-sub{margin-top:7px;color:#a6bfd4}.hidden{display:none!important}.chart-row{display:grid;grid-template-columns:1.1fr .95fr;gap:14px}.chart-panel{padding:14px}.chart-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}.chart-title h3{margin:0;font-size:18px}.chart-title span{color:var(--muted);font-size:12px}canvas{width:100%;height:auto;display:block}.bar-chart{padding:12px 6px}.bar-row{display:grid;grid-template-columns:42px 1fr 70px;align-items:center;gap:10px;margin:14px 0}.bar-track{height:16px;background:#071323;border:1px solid #174a73;border-radius:10px;position:relative;overflow:hidden}.bar-fill{height:100%;border-radius:10px;background:linear-gradient(90deg,#126fc7,#4ac3ff);box-shadow:0 0 12px rgba(42,174,255,.55)}.bar-fill.negative{background:linear-gradient(90deg,#ff8b38,#d85b18)}.formula-panel{padding:16px;margin-top:14px}.formula{font-size:25px;line-height:1.35;color:#dceeff;font-weight:800;word-break:break-all}.formula b,.formula .accent{color:var(--blue)}.flags{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.flag{border:1px solid rgba(255,184,75,.45);color:#ffcf73;background:rgba(247,184,75,.08);padding:4px 8px;border-radius:20px;font-size:12px}.feedback-list{display:flex;flex-direction:column;gap:9px}.feedback-item{background:rgba(26,167,255,.08);border:1px solid rgba(60,172,255,.28);border-radius:9px;padding:10px;color:#d7edf9;line-height:1.45}.rank-list,.leaderboard-list{display:flex;flex-direction:column;gap:8px}.rank-row,.leader-row{display:grid;grid-template-columns:38px 1fr 70px 52px;gap:8px;align-items:center;padding:9px;border:1px solid rgba(63,154,217,.22);border-radius:8px;background:rgba(4,14,25,.35);font-size:13px}.rank-row:first-child,.leader-row:first-child{border-color:rgba(247,184,75,.65);background:rgba(247,184,75,.08)}.rank-num{color:var(--gold);font-weight:900}.model-note ul{margin:0;padding-left:20px;color:#c7d8e4;line-height:1.8}.right-panel{display:flex;flex-direction:column;gap:14px}.right-panel .panel{padding:14px}.form-row{display:grid;grid-template-columns:105px 1fr;gap:10px;align-items:center;margin:9px 0;color:#cce4f5}.form-row select,.form-row input,.weight-grid input,.switch-list input[type=number]{width:100%;background:#061326;border:1px solid #1f557b;border-radius:7px;color:#fff;padding:8px}.range-editor{display:grid;gap:8px}.range-row{display:grid;grid-template-columns:34px 1fr 1fr;gap:8px;align-items:center}.range-row input{background:#061326;border:1px solid #1f557b;color:#fff;border-radius:7px;padding:7px}.segmented div{display:flex;gap:8px}.seg,.method{background:#092039;border:1px solid #255d86;color:#ddecf8;border-radius:7px;padding:8px;cursor:pointer}.seg.active,.method.active{background:linear-gradient(135deg,#065fbf,#148be5);border-color:#41bcff;color:#fff}.switch-list{display:grid;gap:8px;margin-top:10px}.switch-list label{display:grid;grid-template-columns:18px 1fr 76px;align-items:center;gap:6px}.weight-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.weight-grid label{font-size:12px;color:#cbe0ef}.method-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.ai-kpis{grid-template-columns:repeat(4,1fr)}.ai-charts{grid-template-columns:1fr 1fr}.results-table-panel{padding:13px;margin-top:14px}.table-scroll{overflow:auto}table{width:100%;border-collapse:collapse;font-size:13px}th,td{border-bottom:1px solid rgba(69,142,193,.22);padding:10px 8px;text-align:left;white-space:nowrap}th{color:#a9c9df;background:rgba(25,90,140,.15)}td{color:#e5f2fb}.gold-text,.score-cell{color:var(--gold)!important;font-weight:900}.best-panel{display:grid;gap:4px}.best-panel p{color:#a9c1d4;margin:4px 0 0}.progress{height:10px;background:#071323;border:1px solid #1f557b;border-radius:10px;overflow:hidden}.progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#156ee8,#6bd7ff);box-shadow:0 0 12px #36b8ff}.flow-list{margin:0;padding-left:22px;color:#d8edf8;line-height:2.05}.best-card{font-size:13px;color:#d7edf9;line-height:1.8}.full-panel{padding:22px;min-height:calc(100vh - 146px)}.analysis-grid{display:grid;grid-template-columns:repeat(2,minmax(280px,1fr));gap:14px}.diagnostic-card{border:1px solid #1d557c;border-radius:12px;background:rgba(7,23,40,.7);padding:16px}.diagnostic-card h3{margin-top:0;color:#78d9ff}.diagnostic-card ul{line-height:1.9;color:#d5e6f2}.metric-line{display:flex;justify-content:space-between;border-bottom:1px solid rgba(80,150,200,.15);padding:7px 0;color:#d9edf9}.footer-note{border-top:1px solid var(--line);background:rgba(4,13,24,.82);color:#bfd1df;text-align:center;padding:12px;font-size:14px}.submit-dialog{border:1px solid #2a85c5;border-radius:12px;background:#07192b;color:#fff;box-shadow:0 0 50px rgba(0,0,0,.6)}.submit-dialog::backdrop{background:rgba(0,0,0,.55)}.submit-dialog form{display:grid;gap:14px;min-width:360px}.submit-dialog input{width:100%;margin-top:6px;background:#061326;border:1px solid #2a648d;border-radius:7px;color:#fff;padding:10px}.dialog-actions{display:flex;justify-content:flex-end;gap:10px}
@media(max-width:1300px){.layout-student,.layout-ai{grid-template-columns:1fr}.right-panel{display:grid;grid-template-columns:repeat(2,1fr)}.topbar{height:auto;align-items:flex-start;gap:10px;flex-direction:column;padding:14px}.nav-tabs{width:100%;height:58px}.nav-tab{flex:1}.chart-row,.ai-charts{grid-template-columns:1fr}.kpi-grid,.ai-kpis{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.brand h1{font-size:20px}.nav-tab{padding:0 8px;font-size:13px}.right-panel{grid-template-columns:1fr}.kpi-grid,.ai-kpis{grid-template-columns:1fr}.advanced-grid,.weight-grid{grid-template-columns:1fr}.analysis-grid{grid-template-columns:1fr}.slider-row{grid-template-columns:32px 1fr 64px}}