:root{
  --bg:#0a0d10;--surface:#101419;--panel:#171b21;--panel2:#1d2229;
  --line:#2b323b;--line2:#39424e;--text:#eef1f4;--muted:#78818d;
  --muted2:#aeb5bf;--primary:#f25c54;--primary2:#ff766d;--ok:#27c7bb;
  --warn:#f0aa48;--bad:#ff6b6b;--sidebar:224px;--fermi-icp-footer-height:30px
}
*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{background:var(--bg);color:var(--text);font:13px/1.5 Inter,"PingFang SC","Microsoft YaHei",sans-serif}
button{font:inherit}
.app{display:flex;height:calc(100vh - var(--fermi-icp-footer-height));overflow:hidden}
.sidebar{width:var(--sidebar);flex:0 0 var(--sidebar);padding:14px 0;overflow:auto;z-index:30;border-right:1px solid var(--line);background:var(--surface)}
.brand{width:100%;padding:0 17px 17px;border:0;border-bottom:1px solid var(--line);background:transparent;color:inherit;text-align:left;cursor:pointer}
.brand-name{display:block;font-size:18px;font-weight:750}.brand-name span{color:var(--primary)}
.brand-sub{display:block;margin-top:2px;color:var(--muted);font-size:11px}
.nav-group{padding:18px 17px 7px;color:var(--muted);font-size:11px}
.nav-item{position:relative;display:flex;align-items:center;gap:11px;width:100%;padding:11px 15px;border:0;border-left:3px solid transparent;background:transparent;color:var(--muted2);text-align:left;cursor:pointer}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--text)}
.nav-item.active{border-left-color:var(--primary);background:rgba(242,92,84,.12);color:var(--primary)}
.nav-icon{width:16px;height:16px;filter:invert(76%) sepia(8%) saturate(300%) hue-rotate(177deg);opacity:.9}
.nav-item.active .nav-icon{filter:invert(50%) sepia(94%) saturate(1500%) hue-rotate(326deg);opacity:1}
.nav-status{width:7px;height:7px;margin-left:auto;border-radius:50%;background:var(--muted)}
.nav-status.ok,.service-card i.ok{background:var(--ok);box-shadow:0 0 10px rgba(39,199,187,.5)}
.nav-status.bad,.service-card i.bad{background:var(--bad)}
.main{position:relative;min-width:0;flex:1;background:var(--bg)}
.topbar{height:58px;display:flex;align-items:center;gap:12px;padding:0 24px;border-bottom:1px solid var(--line);background:var(--surface)}
.topbar h1{margin:0;font-size:14px;font-weight:680}
.nav-toggle{display:none;padding:6px 10px;border:1px solid var(--line);border-radius:7px;background:var(--panel);color:var(--text)}
.top-status{display:flex;align-items:center;gap:7px;margin-left:auto;color:var(--muted);font-size:12px}
.top-status i,.service-card i{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--muted)}
.top-status.ok{color:var(--ok)}.top-status.ok i{background:var(--ok)}.top-status.bad{color:var(--bad)}.top-status.bad i{background:var(--bad)}
.view{position:absolute;inset:58px 0 0;display:none}.view.active{display:block}
.view-frame iframe{width:100%;height:100%;border:0;background:var(--bg)}
.overview,.planned-page{height:100%;overflow:auto;padding:clamp(24px,3.2vw,48px)}
.overview-heading,.planned-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:24px}
.eyebrow{margin:0;color:var(--muted);font:650 10px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:.14em}.eyebrow span{color:var(--primary)}
.overview h2,.planned-heading h2{margin:12px 0 7px;font-size:clamp(28px,3.4vw,44px);line-height:1.12}
.overview-copy,.planned-heading>div>p:last-child{max-width:720px;margin:0;color:var(--muted2);font-size:14px}
.overview-upload{display:flex;align-items:center;gap:12px;min-width:245px;padding:13px 15px;border:1px solid rgba(242,92,84,.45);border-radius:12px;background:rgba(242,92,84,.1);color:var(--text);text-align:left;cursor:pointer}
.overview-upload:hover{background:rgba(242,92,84,.16)}.overview-upload img{width:24px;filter:invert(55%) sepia(89%) saturate(1240%) hue-rotate(323deg)}
.overview-upload strong,.overview-upload small{display:block}.overview-upload small{color:var(--muted);font-size:11px}
.kpi-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:28px 0 16px}
.kpi-card{padding:18px;border:1px solid var(--line);border-radius:12px;background:linear-gradient(145deg,var(--panel),#11151a)}
.kpi-card span,.kpi-card small{display:block;color:var(--muted);font-size:11px}.kpi-card strong{display:block;margin:7px 0 3px;font-size:27px}
.overview-grid{display:grid;grid-template-columns:1.35fr .8fr .72fr;gap:14px}
.overview-card,.service-card,.planned-card,.roadmap{padding:19px;border:1px solid var(--line);border-radius:13px;background:var(--panel)}
.card-title{display:flex;align-items:flex-start;gap:12px;margin-bottom:15px}.card-title>div{flex:1}.card-title h3{margin:0 0 3px;font-size:15px}.card-title p{margin:0;color:var(--muted);font-size:11px}.card-title>img{width:19px;filter:invert(65%);opacity:.8}
.text-button{border:0;background:transparent;color:var(--primary2);cursor:pointer;font-size:11px}
.material-table{max-height:255px;overflow:auto;border:1px solid #252b33;border-radius:9px}
table{width:100%;border-collapse:collapse}th,td{padding:9px 10px;border-bottom:1px solid #252b33;text-align:left;white-space:nowrap}th{position:sticky;top:0;background:#12161b;color:var(--muted);font-size:10px}td{font-size:11px}tr:last-child td{border-bottom:0}
.table-status{display:inline-flex;padding:2px 6px;border-radius:99px;background:rgba(39,199,187,.1);color:var(--ok);font-size:9px}
.structure-card,.target-card{min-height:330px}
.overview-structure{position:relative;height:245px;overflow:hidden;border:1px solid #252b33;border-radius:10px;background:radial-gradient(circle at 50% 45%,#1b2834,#0d1115 70%)}
.structure-empty{position:absolute;inset:0;display:grid;place-items:center;color:var(--muted);font-size:11px;pointer-events:none}
.target-content{display:flex;min-height:245px;flex-direction:column;align-items:center;justify-content:center;padding:18px;border:1px solid #252b33;border-radius:10px;background:#11151a;text-align:center}
.target-content span{color:var(--primary2);font-size:11px}.target-content strong{margin:12px 0 7px;font-size:17px}.target-content small{color:var(--muted)}
.service-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:14px}
.service-card{position:relative}.service-card i{position:absolute;right:18px;top:18px}.service-card h3{margin:0 0 7px;font-size:13px}.service-card p{margin:0;color:var(--muted);font-size:11px}
.view-placeholder.active{display:block}
.state-pill{display:inline-block;padding:5px 10px;border:1px solid rgba(240,170,72,.35);border-radius:999px;background:rgba(240,170,72,.1);color:var(--warn);font-size:11px;white-space:nowrap}
.planned-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:30px}
.planned-card{min-height:210px}.planned-card>span{display:grid;width:32px;height:32px;place-items:center;border-radius:9px;background:rgba(242,92,84,.12);color:var(--primary2);font:700 11px ui-monospace,monospace}
.planned-card h3{margin:17px 0 8px}.planned-card p,.planned-card li{color:var(--muted2);font-size:12px}.planned-card ul{margin:0;padding-left:17px}.planned-card li+li{margin-top:7px}
.roadmap{margin-top:14px}.roadmap h3{margin:0 0 16px}.roadmap-stages{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.roadmap-stage{position:relative;padding:14px;border:1px solid #29313a;border-radius:10px;background:#11151a}.roadmap-stage::after{content:"";position:absolute;right:-11px;top:50%;width:11px;border-top:1px solid #46505c}.roadmap-stage:last-child::after{display:none}.roadmap-stage small{display:block;color:var(--primary2)}.roadmap-stage strong{display:block;margin-top:4px;font-size:12px}
.scrim{display:none}
.fermi-icp-footer{
  display:flex;align-items:center;justify-content:center;
  height:var(--fermi-icp-footer-height);border-top:1px solid var(--line);
  background:var(--surface);font-size:11px
}
.fermi-icp-footer a{color:var(--muted);text-decoration:none}
.fermi-icp-footer a:hover{color:var(--primary2)}
@media(max-width:1100px){
  .overview-grid{grid-template-columns:1fr 1fr}.material-card{grid-column:1/-1}.planned-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
  .sidebar{position:fixed;inset:0 auto 0 0;transform:translateX(-100%);transition:transform .2s ease;box-shadow:18px 0 40px rgba(0,0,0,.42)}
  .sidebar.is-open{transform:none}.scrim{position:fixed;inset:0;z-index:20;border:0;background:rgba(0,0,0,.55)}.scrim.is-open{display:block}
  .nav-toggle{display:inline-block}.topbar{padding:0 12px}.topbar h1{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.top-status span{display:none}
  .overview-heading,.planned-heading{display:block}.overview-upload{width:100%;margin-top:18px}.kpi-grid,.overview-grid,.service-grid,.planned-grid,.roadmap-stages{grid-template-columns:1fr}
  .material-card{grid-column:auto}.roadmap-stage::after{display:none}
}