:root{--bg:#f0f2f5;--panel:#fff;--line:#e2e5ea;--text:#1a1d23;--muted:#6b7280;--sidebar:#0f172a;--nav-hover:#1e293b;--nav-active:#2563eb;--nav-text:#94a3b8;--accent:#2563eb;--accent-soft:#dbeafe;--green:#16a34a;--yellow:#f59e0b;--pink:#ec4899;--purple:#7c3aed;--radius:12px}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:Inter,"Microsoft YaHei",-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--text);display:flex;min-height:100vh}
/* Sidebar */
.sidebar{position:fixed;inset:0 auto 0 0;width:240px;background:var(--sidebar);color:#fff;display:flex;flex-direction:column;z-index:100;overflow-y:auto}
.sidebar-brand{padding:24px 20px 16px}.sidebar-brand h2{font-size:22px;font-weight:800;margin:0}.sidebar-brand span{font-size:11px;color:var(--nav-text);letter-spacing:.1em;text-transform:uppercase}
.sidebar-nav{display:grid;gap:2px;padding:0 12px;flex:1}
.sidebar-nav a{display:flex;align-items:center;gap:8px;color:var(--nav-text);padding:10px 14px;border-radius:10px;font-size:14px;font-weight:500;text-decoration:none;transition:.15s}
.sidebar-nav a:hover{background:var(--nav-hover);color:#e2e8f0}.sidebar-nav a.active{background:var(--nav-active);color:#fff}
.sidebar-footer{padding:14px 20px;display:flex;flex-wrap:wrap;gap:4px;border-top:1px solid rgba(255,255,255,.06)}
.tag{display:inline-block;padding:3px 8px;border-radius:4px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em}
.tag-yellow{background:#fef3c7;color:#92400e}.tag-blue{background:#dbeafe;color:#1e40af}.tag-pink{background:#fce7f3;color:#9d174d}.tag-green{background:#d1fae5;color:#065f46}
/* Main */
.main{margin-left:240px;flex:1;min-width:0}
.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:12px 28px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:50;flex-wrap:wrap;gap:8px}
.topbar h1{font-size:20px;font-weight:700;margin:0}.topbar p{font-size:13px;color:var(--muted);margin-top:2px}
.topbar-right{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.tb-btn{border:1px solid var(--line);background:var(--panel);padding:6px 12px;border-radius:8px;cursor:pointer;font-size:12px;font-weight:600;transition:.15s;white-space:nowrap}
.tb-btn:hover{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
/* Toast */
.toast{position:fixed;bottom:24px;right:24px;background:#1a1d23;color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;z-index:999;box-shadow:0 8px 24px rgba(0,0,0,.2);transition:opacity .3s}
/* Module */
.module{display:none;padding:0 28px 40px}.module.active{display:block}
/* Status strip */
.status-strip{display:flex;gap:16px;flex-wrap:wrap;padding:10px 0;margin-bottom:12px;font-size:12px;color:var(--muted);border-bottom:1px solid var(--line)}
.status-strip span{display:flex;align-items:center;gap:4px}
.status-strip span::before{content:"";display:inline-block;width:6px;height:6px;background:var(--green);border-radius:50%}
/* Cards */
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:12px;margin:12px 0}
.card-grid.small{grid-template-columns:repeat(auto-fill,minmax(130px,1fr))}
.metric-card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:0 1px 3px rgba(0,0,0,.04)}
.metric-label{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.04em;font-weight:600}
.metric-value{font-size:28px;font-weight:800;margin-top:4px}.metric-sub{font-size:12px;color:var(--muted);margin-top:2px}
/* Health grid */
.health-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.health-card{display:flex;align-items:center;gap:10px;padding:12px 14px;background:#f8fafc;border:1px solid var(--line);border-radius:10px;font-size:14px}
.health-dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}.health-dot.ok{background:var(--green)}.health-dot.warn{background:var(--yellow)}
/* Quick links */
.quick-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.quick-card{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:16px;cursor:pointer;transition:.15s;text-align:center}
.quick-card:hover{border-color:var(--accent);box-shadow:0 4px 12px rgba(37,99,235,.1)}
.quick-card .icon{font-size:28px;margin-bottom:6px}.quick-card strong{display:block;font-size:14px}.quick-card span{font-size:12px;color:var(--muted)}
/* Info list */
.info-list{display:grid;gap:6px}.info-list p{margin:0;font-size:14px;padding:6px 0;border-bottom:1px solid var(--line)}
/* Panel */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:0 1px 3px rgba(0,0,0,.04);margin-bottom:12px}
.panel h3{font-size:16px;font-weight:700;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.big{font-size:20px;font-weight:700;color:var(--accent);letter-spacing:.02em}.muted{color:var(--muted);font-size:13px}
/* Org chain */
.org-chain{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.org-node{background:var(--panel);border:2px solid var(--line);border-radius:var(--radius);padding:14px 18px;min-width:150px;display:grid;gap:3px;transition:.15s}
.org-node:hover{border-color:var(--accent)}.org-node strong{font-size:15px}.org-node span{font-size:12px;color:var(--muted)}
.org-arrow{font-size:22px;font-weight:700;color:var(--muted)}
.code-block{font-family:"Cascadia Mono",Consolas,monospace;white-space:pre;background:#0f172a;color:#e5e7eb;border-radius:var(--radius);padding:18px;line-height:1.8;font-size:13px}
/* Table */
.table-wrap{overflow-x:auto}table{width:100%;border-collapse:collapse;font-size:14px}
th{text-align:left;color:var(--muted);font-size:12px;font-weight:600;text-transform:uppercase;background:#f8fafc;position:sticky;top:0}th,td{padding:10px 14px;border-bottom:1px solid var(--line)}
tr:hover td{background:#f8fafc}tr.selected td{background:var(--accent-soft)}
.badge{display:inline-flex;padding:3px 10px;border-radius:999px;font-size:12px;font-weight:700;background:var(--accent-soft);color:var(--accent)}
.status-active{color:var(--green);font-weight:600}
/* Toolbar */
.toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}
.toolbar input[type=text]{flex:1;min-width:160px;border:1px solid var(--line);border-radius:10px;padding:10px 14px;font-size:14px;outline:none;transition:.15s}
.toolbar input[type=text]:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.filter-group{display:flex;gap:6px;flex-wrap:wrap}
.filter-btn{border:1px solid var(--line);background:var(--panel);padding:8px 14px;border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;transition:.15s}
.filter-btn:hover{border-color:var(--accent);color:var(--accent)}.filter-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
/* Staff layout */
.staff-layout{display:flex;gap:16px;flex-wrap:wrap}.staff-table{flex:1;min-width:400px}
.detail-card{width:280px;background:#f8fafc;border:1px solid var(--line);border-radius:var(--radius);padding:18px;flex-shrink:0}
.detail-card h4{font-size:15px;margin-bottom:10px}.detail-card p{margin:5px 0;font-size:13px}
.detail-visible{color:var(--green);font-weight:600}.detail-hidden{color:var(--muted)}
.empty-state{padding:40px 20px;text-align:center;color:var(--muted);font-size:15px;background:#f8fafc;border:2px dashed var(--line);border-radius:var(--radius)}
/* Funnel */
.funnel-row{display:flex;align-items:center;gap:12px;padding:6px 0}
.funnel-name{width:70px;text-align:right;font-weight:600;font-size:14px}
.funnel-track{flex:1;height:26px;background:#e5e7eb;border-radius:13px;overflow:hidden}
.funnel-fill{height:100%;border-radius:13px;background:linear-gradient(90deg,var(--accent),var(--purple));transition:width .4s ease}
.funnel-count{width:40px;font-size:14px;font-weight:700;text-align:right}
/* Rules */
.rules-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.rule-card{background:#f8fafc;border:1px solid var(--line);border-radius:10px;padding:14px}.rule-card strong{display:block;font-size:14px}.rule-card p{font-size:13px;color:var(--muted);margin-top:4px}
/* Simulation */
.btn-row{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.sim-btn{border:1px solid var(--line);background:var(--panel);padding:10px 18px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:700;transition:.15s}
.sim-btn:hover{border-color:var(--accent)}.sim-btn.active{background:var(--accent);color:#fff;border-color:var(--accent)}
.sim-btn small{display:block;font-size:11px;font-weight:400;opacity:.8}
.sim-detail{background:#f8fafc;border:1px solid var(--line);border-radius:var(--radius);padding:20px}
.sim-detail h3{font-size:16px;margin-bottom:12px}.sim-detail p{margin:6px 0;font-size:14px}
.green{color:var(--green);font-weight:600}.conclusion{margin-top:12px;padding:10px 14px;background:var(--accent-soft);border-radius:8px;font-size:13px;font-weight:600}
.chip{display:inline-flex;padding:2px 8px;border-radius:999px;font-size:12px;margin:2px}.chip-green{background:#d1fae5;color:#065f46}.chip-gray{background:#e5e7eb;color:#6b7280}
.link-btn{display:inline-block;margin-top:8px;padding:6px 14px;background:var(--accent);color:#fff;border-radius:999px;cursor:pointer;font-size:13px;font-weight:600;border:none}
/* Banners */
.banner{padding:14px 18px;border-radius:var(--radius);font-size:14px;margin-bottom:8px}
.banner-green{background:#f0fdf4;border:1px solid #86efac}.banner-yellow{background:#fffbeb;border:1px solid #fbbf24}.banner-blue{background:#eff6ff;border:1px solid #93c5fd}
.forbid-list{display:grid;gap:6px}.forbid-list li{font-size:14px;padding:8px 12px;background:#fff;border:1px solid var(--line);border-radius:8px;list-style:none}.forbid-list li::before{content:"🚫 ";margin-right:6px}
/* Info table */
.info-table td{padding:8px 14px;font-size:14px}.info-table td:first-child{font-weight:600;color:var(--muted);width:120px}
/* Phase list */
.phase-list{display:grid;gap:6px}.phase-item{display:flex;gap:12px;align-items:center;padding:10px 14px;background:#f8fafc;border:1px solid var(--line);border-radius:8px;font-size:14px}
.phase-dot{width:10px;height:10px;background:var(--green);border-radius:50%;flex-shrink:0}.phase-meta{font-size:12px;color:var(--muted);margin-left:auto}
/* Sim shortcut */
.sim-shortcut{margin-top:12px;display:flex;gap:8px}
/* Responsive */
@media(max-width:900px){
.sidebar{position:static;width:auto;flex-direction:row;overflow-x:auto;padding:8px}.sidebar-brand,.sidebar-footer{display:none}
.sidebar-nav{display:flex;flex-direction:row;gap:2px;padding:0}.sidebar-nav a{font-size:12px;padding:8px 10px;white-space:nowrap}
.main{margin-left:0}.topbar{padding:12px 16px}.module{padding:0 16px 30px}.card-grid{grid-template-columns:repeat(2,1fr)}
.org-chain{flex-direction:column;align-items:stretch}.org-arrow{transform:rotate(90deg);text-align:center}
.staff-layout{flex-direction:column}.detail-card{width:100%}.staff-table{min-width:0}
}@media(max-width:600px){.card-grid{grid-template-columns:1fr}.filter-group{width:100%}.topbar-right{width:100%}.tb-btn{flex:1}}