:root { color-scheme: dark; --bg:#09101c; --panel:#111c2c; --line:#283955; --text:#edf4ff; --muted:#93a6c1; --accent:#39a0ff; --good:#36d399; --danger:#ff6b73; }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,"Microsoft YaHei",system-ui,sans-serif; background:radial-gradient(circle at 20% 0,#142d4e 0,transparent 34%),var(--bg); color:var(--text); }
.topbar { min-height:88px; display:flex; align-items:center; justify-content:space-between; padding:18px clamp(20px,5vw,72px); border-bottom:1px solid var(--line); background:rgba(7,14,25,.88); backdrop-filter:blur(14px); position:sticky; top:0; z-index:5; }
h1,h2,h3,p { margin-top:0; } h1 { margin-bottom:0; font-size:24px; } h2 { font-size:17px; } h3 { font-size:13px; color:var(--muted); margin:18px 0 8px; }
.eyebrow { color:var(--accent); font-size:11px; letter-spacing:.2em; font-weight:700; margin-bottom:4px; }
.layout { width:min(1500px,calc(100% - 32px)); margin:28px auto 60px; }
.login-card { width:min(430px,100%); margin:8vh auto; padding:30px; background:rgba(17,28,44,.94); border:1px solid var(--line); border-radius:18px; box-shadow:0 28px 80px #0008; }
label { display:flex; flex-direction:column; gap:6px; color:#b9c8dc; font-size:12px; font-weight:650; }
input,select { width:100%; min-height:39px; padding:8px 10px; border-radius:8px; border:1px solid #344c6f; background:#0a1423; color:var(--text); outline:none; }
input:focus,select:focus { border-color:var(--accent); box-shadow:0 0 0 3px #39a0ff22; }
.login-card label { margin:15px 0; }
.button { border:0; border-radius:9px; padding:10px 16px; color:white; cursor:pointer; font-weight:750; }
.button.primary { background:linear-gradient(135deg,#1888ed,#35a9ff); width:100%; }
.button.secondary { background:#1b2a40; border:1px solid #3d5372; }
.button.danger { background:#5a2630; color:#ffccd0; }
.button:disabled { opacity:.5; cursor:not-allowed; }
.account { display:flex; align-items:center; gap:10px; }.badge { border:1px solid #37506f; background:#142238; border-radius:999px; padding:7px 12px; font-size:12px; }
.workflow { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; }
.workflow>div { display:grid; grid-template-columns:36px 1fr; background:#101b2b; border:1px solid var(--line); padding:13px; border-radius:12px; }
.workflow span { grid-row:1/3; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; background:#143d66; color:#65bbff; font-weight:800; }.workflow small { color:var(--muted); }
.workspace-grid { display:grid; grid-template-columns:minmax(440px,610px) minmax(420px,1fr); gap:20px; align-items:start; }
.sidebar,.results { display:flex; flex-direction:column; gap:14px; }
.panel { background:linear-gradient(150deg,#121f31,#0e1928); border:1px solid var(--line); border-radius:14px; padding:18px; box-shadow:0 12px 30px #0003; }
.field-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }.five-zone { display:grid; grid-template-columns:repeat(5,1fr); gap:7px; }
.run { min-height:48px; font-size:15px; }
.status-panel>div:first-child { display:flex; justify-content:space-between; }.status-panel small { display:block; color:var(--muted); word-break:break-all; }.progress { height:8px; background:#080f19; border-radius:99px; overflow:hidden; margin:14px 0; }.progress i { display:block; height:100%; width:0; background:linear-gradient(90deg,#168eff,#4ad5b1); transition:width .3s; }
.kpi-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; }.kpi-grid article { min-height:140px; padding:18px; border-radius:14px; border:1px solid var(--line); background:#111e30; display:flex; flex-direction:column; justify-content:center; }.kpi-grid span,.kpi-grid small { color:var(--muted); }.kpi-grid strong { font-size:clamp(28px,4vw,45px); margin:8px 0; }
.error { color:#ff9ea5; min-height:20px; margin-top:10px; font-size:13px; }.result-note p { color:#b4c3d8; line-height:1.7; }.chemistry:empty { display:none; }
@media(max-width:980px){.workspace-grid{grid-template-columns:1fr}.workflow{grid-template-columns:1fr}.kpi-grid{position:static}.topbar{position:static}}
@media(max-width:560px){.field-grid{grid-template-columns:1fr}.five-zone{grid-template-columns:repeat(2,1fr)}.kpi-grid{grid-template-columns:1fr}.layout{width:min(100% - 20px,1500px)}}