:root{--bg:#f5f7fb;--panel:#fff;--text:#172033;--muted:#64748b;--line:#e2e8f0;--brand:#2457f5;--brand2:#6f42ff;--green:#12a150;--orange:#f59e0b;--red:#e5484d;--cyan:#0891b2;--purple:#7c3aed;--shadow:0 18px 45px #0f172a14;--radius:18px;color:var(--text);background:radial-gradient(circle at top left, #2457f51f, transparent 28%), var(--bg);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,PingFang SC,Microsoft YaHei,sans-serif}*{box-sizing:border-box}body{background:radial-gradient(circle at top left, #2457f51f, transparent 28%), var(--bg);min-width:1180px;margin:0}button,input,select{font:inherit}button{cursor:pointer}button:focus-visible,input:focus-visible,select:focus-visible{outline-offset:3px;outline:3px solid #2457f559}button:disabled{cursor:not-allowed;opacity:.45}input,select{border:1px solid var(--line);color:var(--text);background:#fff;border-radius:999px;outline:none;padding:9px 13px}select{color:var(--text);background:0 0;border:0;padding:0}h1,h2,h3,p{margin-top:0}.app-shell{grid-template-columns:286px 1fr;min-height:100vh;display:grid}.sidebar{color:#e5e7eb;background:#0f172a;height:100vh;padding:24px 18px;position:sticky;top:0;overflow-y:auto}.brand{align-items:center;gap:12px;margin-bottom:24px;display:flex}.brand-mark{color:#fff;background:linear-gradient(135deg, var(--brand), #8b5cf6);border-radius:14px;flex:none;place-items:center;width:42px;height:42px;font-size:13px;font-weight:850;display:grid;box-shadow:0 12px 30px #2457f559}.brand-title{letter-spacing:-.02em;font-size:15px;font-weight:850}.brand-subtitle{color:#94a3b8;margin-top:4px;font-size:12px}.nav-group-title{color:#94a3b8;letter-spacing:.14em;text-transform:uppercase;margin:22px 10px 10px;font-size:11px;font-weight:850}.sidebar nav{gap:8px;display:grid}.nav-item{color:#cbd5e1;text-align:left;background:0 0;border:0;border-radius:14px;align-items:center;gap:10px;width:100%;padding:11px 12px;font-size:14px;font-weight:750;display:flex}.nav-item:hover{color:#fff;background:#94a3b81f}.nav-item.active{background:linear-gradient(135deg, var(--brand), var(--brand2));color:#fff;box-shadow:0 14px 30px #2457f547}.nav-icon{color:#dbeafe;background:#ffffff1a;border-radius:10px;place-items:center;width:28px;height:28px;font-size:11px;font-weight:850;display:grid}.nav-item.active .nav-icon{color:#fff;background:#fff3}.sidebar-card{background:#0f172a8c;border:1px solid #94a3b838;border-radius:18px;margin-top:24px;padding:16px;box-shadow:0 18px 45px #0000002e}.sidebar-card strong{color:#fff;margin-bottom:8px;font-size:14px;display:block}.sidebar-card p{color:#cbd5e1;margin:0;font-size:12px;line-height:1.65}main{min-width:0;padding:24px 28px 48px;overflow:auto}.topbar{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:16px;display:flex}.page-kicker{color:var(--brand);letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:12px;font-weight:850}.page-title{letter-spacing:-.04em;margin:4px 0 0;font-size:30px;line-height:1.2}.page-desc{max-width:880px;color:var(--muted);margin:8px 0 0;font-size:14px;line-height:1.7}.actions,.filters{flex-wrap:wrap;align-items:center;gap:10px;display:flex}.actions{justify-content:flex-end}.filters{margin:14px 0}.pill,.button,.select-like{border:1px solid var(--line);color:var(--text);background:#fff;border-radius:999px;align-items:center;gap:8px;padding:9px 13px;font-size:13px;font-weight:700;display:inline-flex;box-shadow:0 8px 20px #0f172a0a}.button,.select-like,.link-button{appearance:none}.button.primary,.actions>button:not(.select-like):first-of-type:hover,.card button:not(.link-button):hover,.drawer button:not(.link-button):hover{color:#fff;background:linear-gradient(135deg, var(--brand), var(--brand2));border-color:#0000}.config-panel{border-radius:var(--radius);background:#ffffffc7;border:1px solid #e2e8f0e6;grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;align-items:center;gap:10px;width:min(860px,100%);margin-top:0;padding:14px;display:grid;box-shadow:0 12px 30px #0f172a0a}.config-panel input{min-width:0}.config-help{color:var(--muted);grid-column:1/-1;font-size:12px}.prototype-note,.boundary,.scope-note{color:#1e3a8a;background:linear-gradient(135deg,#eff6ffeb,#ffffffeb);border:1px solid #bfdbfe;border-radius:16px;padding:14px 16px;font-size:13px;line-height:1.75}.prototype-note{margin-bottom:18px}.boundary{margin-bottom:0}.page-stack{gap:18px;display:grid}.card,.metric,.state-card,.error-banner{border-radius:var(--radius);box-shadow:var(--shadow);background:#fffffff0;border:1px solid #e2e8f0e6}.card{min-width:0;padding:18px}.card h2{letter-spacing:-.02em;margin:0 0 14px;font-size:18px;line-height:1.35}.card h3{margin:0 0 10px;font-size:15px}.metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;display:grid}.metric-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}.metric{gap:8px;padding:18px;display:grid;position:relative;overflow:hidden}.metric:before{content:"";background:linear-gradient(180deg, var(--brand), var(--brand2));width:5px;position:absolute;inset:0 auto 0 0}.metric span{color:var(--muted);font-size:13px;font-weight:750}.metric strong{letter-spacing:-.03em;word-break:break-word;font-size:22px;line-height:1.25}.metric.success:before{background:var(--green)}.metric.warning:before{background:var(--orange)}.metric.danger:before{background:var(--red)}table{border-collapse:collapse;width:100%;font-size:13px}th,td{border-bottom:1px solid var(--line);text-align:left;vertical-align:middle;padding:12px 10px}th{color:var(--muted);letter-spacing:.04em;text-transform:uppercase;font-size:12px;font-weight:850}tbody tr:hover{background:#f8fafc}tr:last-child td{border-bottom:0}.selected-row{background:#eff6ff}td:first-child{font-weight:750}.card button,.drawer button,.state-card button{border:1px solid var(--line);color:var(--text);background:#fff;border-radius:999px;padding:8px 12px;font-size:12px;font-weight:800;box-shadow:0 8px 20px #0f172a0a}.link-button{font-weight:850;text-decoration:underline;box-shadow:none!important;color:var(--brand)!important;background:0 0!important;border:0!important;padding:0!important}.state-card,.error-banner{margin:18px 0;padding:22px}.empty{color:var(--muted)}.error-banner{color:#991b1b;background:#fef2f2;border-color:#fecaca;font-weight:800}.drawer-backdrop{z-index:20;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background:#0f172a6b;position:fixed;inset:0}.drawer{background:#fff;width:min(900px,88vw);height:100%;margin-left:auto;padding:24px;overflow:auto;box-shadow:-20px 0 50px #0f172a33}.drawer header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:16px;margin-bottom:18px;padding-bottom:14px;display:flex}.drawer h2{letter-spacing:-.03em;margin:0;font-size:22px}.comparison-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;display:grid}.comparison-card{border:1px solid var(--line);background:#f8fafc;border-radius:16px;gap:8px;padding:14px;display:grid}.comparison-card strong{font-size:14px}.comparison-card span{color:var(--brand);font-size:20px;font-weight:850}.comparison-card small,.timeline small,.alert-list small{color:var(--muted)}.two-columns{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;display:grid}.two-columns ul,.card>ul{color:var(--muted);margin:0;padding-left:18px;line-height:1.85}.timeline{border-left:3px solid #bfdbfe;gap:14px;margin:16px 0 0;padding-left:18px;list-style:none;display:grid}.timeline li{gap:5px;display:grid;position:relative}.timeline li:before{content:"";background:var(--brand);border:3px solid #fff;border-radius:999px;width:12px;height:12px;position:absolute;top:4px;left:-26px;box-shadow:0 0 0 2px #bfdbfe}.timeline strong{color:var(--text)}.timeline span{color:#1d4ed8;background:#eff6ff;border-radius:999px;width:fit-content;padding:4px 8px;font-size:12px;font-weight:800;display:inline-flex}.alert-list{gap:12px;margin:0;padding-left:0;list-style:none;display:grid}.alert-list li{background:#fff7ed;border:1px solid #fed7aa;border-radius:16px;gap:6px;padding:14px;display:grid}.alert-list strong{color:#9a3412}.role-select{color:#cbd5e1;gap:8px;margin-top:14px;font-size:12px;font-weight:800;display:grid}.role-select select{color:#fff;background:#0f172ab8;border:1px solid #94a3b859;border-radius:999px;width:100%;padding:9px 12px}.card-heading-row{justify-content:space-between;align-items:center;gap:12px;display:flex}.tag{color:#1d4ed8;background:#eff6ff;border-radius:999px;width:fit-content;padding:4px 9px;font-size:12px;font-weight:850;display:inline-flex}.tag.orange{color:#c2410c;background:#fff7ed}.tag.red{color:#b91c1c;background:#fef2f2}.recommendation-grid{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px;display:grid}.recommendation-card{border:1px solid var(--line);background:#f8fafc;border-radius:16px;gap:12px;padding:16px;display:grid}.recommendation-card h3,.recommendation-card p,.recommendation-card ul{margin:0}.recommendation-card ul{color:var(--muted);padding-left:18px;line-height:1.7}.toast{z-index:40;color:#fff;background:#0f172a;border-radius:16px;max-width:420px;padding:14px 16px;font-size:13px;font-weight:750;position:fixed;bottom:24px;right:24px;box-shadow:0 18px 45px #0f172a40}@media (width<=1180px){body{min-width:0}.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:static}.sidebar nav{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}.topbar{flex-direction:column}.actions{justify-content:flex-start}.config-panel,.metric-grid,.metric-grid.compact,.two-columns{grid-template-columns:1fr;width:100%}}
