:root { --blue:#1769aa; --blue2:#0b4777; --cyan:#26c6a5; --ink:#172236; --muted:#66758d; --line:#dbe5ef; --bg:#f3f7fb; --danger:#d9485f; --shadow:0 8px 28px rgba(25,68,110,.08); }
* { box-sizing:border-box; }
body { margin:0; font-family:Inter,"Microsoft YaHei",Arial,sans-serif; color:var(--ink); background:var(--bg); }
button,input,select,textarea { font:inherit; }
button { border:0; border-radius:9px; padding:10px 15px; color:#fff; background:var(--blue); cursor:pointer; transition:.18s ease; }
button:hover { transform:translateY(-1px); filter:brightness(.96); }
button:disabled { opacity:.42; cursor:not-allowed; transform:none; }
button.primary { background:linear-gradient(135deg,var(--blue),#1687c7); }
button.ghost { background:#eaf2f8; color:var(--blue2); }
button.danger { background:var(--danger); }
button.wide { width:100%; padding:13px; }
.hidden { display:none!important; }
.app-shell { min-height:100vh; display:grid; grid-template-columns:224px 1fr; }
.sidebar { position:fixed; inset:0 auto 0 0; width:224px; padding:22px 16px; color:#fff; background:linear-gradient(180deg,#0b4777 0%,#092f50 100%); display:flex; flex-direction:column; z-index:10; }
.logo { display:flex; align-items:center; gap:11px; padding:5px 8px 26px; }
.logo>span,.brand-mark { display:grid; place-items:center; width:45px; height:45px; border-radius:13px; font-weight:800; background:linear-gradient(135deg,#2fe0bb,#26a8e0); color:#05334f; }
.logo b { display:block; font-size:19px; }.logo small { opacity:.7; letter-spacing:2px; }
nav { display:grid; gap:7px; }.nav { width:100%; text-align:left; background:transparent; color:#cde1f2; font-size:16px; }.nav.active { background:rgba(255,255,255,.13); color:#fff; }.nav span { margin-left:9px; }
.safety-note { margin-top:auto; padding:13px; border:1px solid rgba(255,255,255,.14); border-radius:10px; color:#dcebf5; font-size:13px; }.safety-note small { color:#8fb3cb; }
.content { grid-column:2; min-width:0; padding:0 28px 36px; }
.topbar { height:88px; display:flex; align-items:center; justify-content:space-between; }.topbar h2 { margin:0 0 5px; font-size:25px; }.topbar span { color:var(--muted); font-size:13px; }.user-box { display:flex; align-items:center; gap:12px; }.user-box>span { font-size:14px; color:var(--ink); }
.page { display:none; }.page.active { display:block; }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:18px; }.kpi { padding:20px; border-radius:14px; background:#fff; box-shadow:var(--shadow); border:1px solid #edf2f7; }.kpi span,.kpi small { display:block; color:var(--muted); }.kpi strong { display:block; margin:10px 0 7px; font-size:26px; }.kpi.accent { color:#fff; background:linear-gradient(135deg,var(--blue),#27a4c9); }.kpi.accent span,.kpi.accent small { color:#d9f5ff; }
.two-col { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin-bottom:18px; }.three-col { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin:18px 0; }.span-2 { grid-column:span 2; }
.panel { padding:21px; border:1px solid #e5edf4; border-radius:15px; background:#fff; box-shadow:var(--shadow); min-width:0; }.panel-head { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; margin-bottom:16px; }.panel h3 { margin:0 0 5px; font-size:18px; }.panel-head p { margin:0; color:var(--muted); font-size:13px; }.badge { padding:5px 10px; border-radius:20px; color:var(--blue); background:#e7f4fb; font-size:13px; }
.device-visual { display:flex; align-items:center; justify-content:center; gap:28px; min-height:170px; border-radius:12px; background:linear-gradient(180deg,#f4fbfe,#edf7f9); }.column { position:relative; width:62px; height:140px; border:3px solid #5c7e94; border-radius:7px 7px 15px 15px; overflow:hidden; background:#e4f7ff; }.column-fill { position:absolute; inset:38% 0 0; background:linear-gradient(180deg,#89dae5,#377e9b); transition:.5s; }.light-head { position:absolute; left:18px; top:8px; width:20px; height:95px; border-radius:8px; background:linear-gradient(90deg,#1a6379,#51dfd0); box-shadow:0 0 13px #3ae5cf; }.device-copy { display:grid; gap:9px; }.device-copy span { color:var(--muted); font-size:13px; }
.button-row { display:flex; flex-wrap:wrap; gap:9px; margin-top:16px; }.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:9px; }.metric { padding:12px; border-radius:10px; background:#f5f8fb; }.metric span { display:block; color:var(--muted); font-size:12px; }.metric b { display:block; margin-top:6px; font-size:18px; }.metric-grid.empty { display:block; padding:30px; text-align:center; color:var(--muted); }
.recommendation { margin-top:13px; padding:14px; border-left:4px solid var(--cyan); border-radius:8px; background:#ebfbf6; }.recommendation.muted { border-color:#b8c8d7; background:#f4f6f8; color:var(--muted); }.recommendation strong { color:#087d65; }
.event-list { display:grid; gap:8px; }.event { display:grid; grid-template-columns:145px 120px 1fr; gap:10px; padding:9px 0; border-bottom:1px solid #edf2f6; font-size:13px; }.event:last-child { border:0; }.event time,.event span { color:var(--muted); }
.experiment-form { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.experiment-form label,.login-card label { color:#516176; font-size:13px; }.experiment-form input,.experiment-form select,.experiment-form textarea,.login-card input,.user-form input,.user-form select { width:100%; margin-top:6px; padding:10px 11px; border:1px solid #cbd9e5; border-radius:8px; background:#fff; color:var(--ink); }.experiment-form textarea { resize:vertical; }.guide-panel { background:linear-gradient(145deg,#0c507f,#0b385f); color:#fff; }.workflow { list-style:none; padding:0; margin:20px 0; counter-reset:item; }.workflow li { position:relative; padding:5px 0 18px 42px; }.workflow li:before { counter-increment:item; content:counter(item); position:absolute; left:0; top:2px; display:grid; place-items:center; width:28px; height:28px; border-radius:50%; color:#063b55; background:#3fe0bd; font-weight:700; }.workflow li:not(:last-child):after { content:""; position:absolute; left:14px; top:31px; height:20px; border-left:1px dashed #7db2ce; }.workflow b,.workflow span { display:block; }.workflow span { color:#bcd5e5; font-size:13px; margin-top:3px; }.notice { padding:14px; border-radius:10px; background:rgba(255,255,255,.09); color:#d8ecf8; font-size:13px; line-height:1.65; }
.table-wrap { overflow:auto; }table { width:100%; border-collapse:collapse; font-size:13px; }th { color:var(--muted); font-weight:600; text-align:left; }th,td { padding:11px 9px; border-bottom:1px solid #e7eef4; white-space:nowrap; }tbody tr { cursor:pointer; }tbody tr:hover { background:#f4f9fc; }.status { display:inline-block; padding:4px 8px; border-radius:15px; background:#edf3f7; }.status.completed { color:#087b64; background:#e4f8f1; }.status.running { color:#0d6fa5; background:#e3f3fb; }.demo { margin-left:5px; color:#8a5b00; }
canvas { width:100%; display:block; border-radius:8px; background:#fbfdff; }.analysis-detail { margin-top:18px; }.recommendation-panel { background:linear-gradient(145deg,#fff,#effbf8); }.recommend-title { font-size:28px; color:#08826a; margin:7px 0; }.reason-list { padding-left:18px; color:#526477; font-size:13px; line-height:1.7; }.warning { margin-top:12px; padding:10px; border-radius:8px; color:#8b3b00; background:#fff3df; font-size:13px; }
.user-form { display:grid; grid-template-columns:1fr 1fr 180px auto; gap:10px; margin-bottom:16px; }.user-form input,.user-form select { margin:0; }.small { padding:6px 9px; font-size:12px; }
.overlay { position:fixed; inset:0; z-index:100; display:grid; place-items:center; background:radial-gradient(circle at 65% 15%,#176aa5,#082e4d 65%); }.overlay.hidden { display:none; }.login-card { width:min(430px,calc(100vw - 32px)); padding:34px; border-radius:18px; background:#fff; box-shadow:0 30px 80px rgba(0,0,0,.32); }.login-card .brand-mark { margin-bottom:18px; }.login-card h1 { margin:0; font-size:27px; }.login-card sup { color:var(--cyan); }.login-card p { margin:5px 0 22px; color:var(--muted); }.login-card label { display:block; margin:14px 0; }.error { min-height:24px; color:var(--danger); font-size:13px; }.toast { position:fixed; right:24px; bottom:24px; z-index:200; max-width:360px; padding:13px 17px; border-radius:9px; color:#fff; background:#193b56; box-shadow:var(--shadow); opacity:0; transform:translateY(10px); pointer-events:none; transition:.2s; }.toast.show { opacity:1; transform:none; }
@media(max-width:1100px){.kpi-grid{grid-template-columns:1fr 1fr}.two-col,.three-col{grid-template-columns:1fr}.span-2{grid-column:auto}.user-form{grid-template-columns:1fr 1fr}}
@media(max-width:760px){.app-shell{display:block}.sidebar{position:static;width:auto;min-height:auto}.sidebar nav{grid-template-columns:1fr 1fr}.safety-note{display:none}.content{padding:0 14px 24px}.topbar{height:74px}.kpi-grid{grid-template-columns:1fr}.experiment-form,.user-form{grid-template-columns:1fr}.span-2{grid-column:auto}.event{grid-template-columns:1fr}.sidebar .logo{padding-bottom:12px}}