/* ============ 天枢 · 城市运行态势识别与预警平台 ============ */
:root{
  --bg:#070d1f; --panel:#0c1730; --panel2:#101f42; --line:#1d2f5e;
  --txt:#dbe7ff; --sub:#7d93c4; --dim:#51648f;
  --cyan:#3fd2ff; --blue:#4f8bff; --ok:#2fd48c;
  --yellow:#ffd23d; --orange:#ff8a3d; --red:#ff5470; --lvblue:#3fa9ff;
}
*{margin:0;padding:0;box-sizing:border-box}
html,body{height:100%}
body{
  background:var(--bg); color:var(--txt);
  font-family:"Microsoft YaHei","PingFang SC","Segoe UI",sans-serif;
  font-size:14px; overflow:hidden;
}
::-webkit-scrollbar{width:8px;height:8px}
::-webkit-scrollbar-thumb{background:#24386b;border-radius:4px}
::-webkit-scrollbar-track{background:transparent}

.app{display:flex;height:100vh}

/* ---------- 侧边栏 ---------- */
.sidebar{
  width:212px;flex:none;background:linear-gradient(180deg,#0a1330,#081026);
  border-right:1px solid var(--line);display:flex;flex-direction:column;padding:16px 12px;
}
.brand{display:flex;align-items:center;gap:10px;padding:4px 6px 16px;border-bottom:1px solid var(--line)}
.brand-logo{
  width:44px;height:44px;border-radius:10px;flex:none;
  background:radial-gradient(circle at 30% 30%,#123a72,#0a1f4a);
  border:1px solid #2b5aa6;color:var(--cyan);font-size:24px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 14px rgba(63,210,255,.35);
}
.brand-text h1{font-size:17px;letter-spacing:2px;color:#eaf4ff}
.brand-text p{font-size:10.5px;color:var(--sub);margin-top:3px;letter-spacing:1px}
#nav{margin-top:12px;display:flex;flex-direction:column;gap:4px;flex:1}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;
  color:var(--sub);cursor:pointer;font-size:13.5px;letter-spacing:1px;
  border:1px solid transparent;transition:all .18s;user-select:none;
}
.nav-item .ico{font-size:15px;width:20px;text-align:center}
.nav-item:hover{color:var(--txt);background:rgba(63,210,255,.06)}
.nav-item.active{
  color:#eaffff;background:linear-gradient(90deg,rgba(63,210,255,.16),rgba(79,139,255,.05));
  border-color:rgba(63,210,255,.35);box-shadow:inset 0 0 12px rgba(63,210,255,.08);
}
.sidebar-foot{text-align:center;border-top:1px solid var(--line);padding-top:12px}
.sim-badge{font-size:10.5px;color:var(--ok);letter-spacing:1px;animation:blink 2.2s infinite}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.45}}
.sim-clock{font-size:24px;font-weight:700;color:var(--cyan);margin-top:6px;font-variant-numeric:tabular-nums;text-shadow:0 0 12px rgba(63,210,255,.4)}
.sim-date{font-size:10.5px;color:var(--dim);margin-top:2px}

/* ---------- 主区 ---------- */
.main{flex:1;display:flex;flex-direction:column;min-width:0}
.topbar{
  height:52px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(90deg,rgba(12,23,48,.9),rgba(10,18,40,.6));
}
.view-title{font-size:17px;letter-spacing:2px;color:#eaf4ff}
.view-title::before{content:"▮";color:var(--cyan);margin-right:8px}
.topbar-right{display:flex;gap:8px}
.chip{font-size:11.5px;padding:5px 12px;border-radius:20px;border:1px solid;letter-spacing:.5px}
.chip-warn{color:var(--yellow);border-color:rgba(255,210,61,.45);background:rgba(255,210,61,.08)}
.chip-ok{color:var(--ok);border-color:rgba(47,212,140,.45);background:rgba(47,212,140,.08)}
.chip-orange{color:var(--orange);border-color:rgba(255,138,61,.5);background:rgba(255,138,61,.1)}

#views{flex:1;overflow-y:auto;padding:14px 16px 22px}
.view{display:none;animation:fadeIn .25s}
.view.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

/* ---------- 卡片 ---------- */
.card{
  background:linear-gradient(180deg,var(--panel),#0a142c);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;margin-bottom:12px;
  box-shadow:0 2px 14px rgba(0,0,0,.25);
}
.card-title{
  font-size:14px;color:#cfe4ff;letter-spacing:1px;margin-bottom:8px;
  display:flex;align-items:center;justify-content:space-between;
}
.card-title::before{content:"◈";color:var(--cyan);margin-right:8px}
.card-tag{font-size:10.5px;color:var(--dim);font-weight:400;letter-spacing:.5px}
.report-actions{display:flex;gap:8px}

.chart{width:100%;height:300px}
.chart-map{height:530px}
.chart-md{height:250px}
.chart-sm{height:210px}

/* ---------- KPI ---------- */
.kpi-row{display:grid;grid-template-columns:1.25fr 1fr 1fr 1fr 1fr 1fr;gap:12px;margin-bottom:12px}
.kpi-card{
  background:linear-gradient(160deg,var(--panel2),#0b1531);
  border:1px solid var(--line);border-radius:10px;padding:12px 14px;min-height:118px;
  position:relative;overflow:hidden;
}
.kpi-card::after{content:"";position:absolute;left:0;top:0;width:3px;height:100%;background:linear-gradient(180deg,var(--cyan),transparent)}
.kpi-label{font-size:12px;color:var(--sub);letter-spacing:1px}
.kpi-value{font-size:30px;font-weight:700;color:#eaf6ff;margin-top:8px;font-variant-numeric:tabular-nums;text-shadow:0 0 14px rgba(63,210,255,.25)}
.kpi-sub{font-size:11px;color:var(--dim);margin-top:4px}
.kpi-gauge{width:100%;height:82px}

.ov-grid{display:grid;grid-template-columns:1fr 350px;gap:12px}
.ov-side .card{margin-bottom:12px}
.map-card{margin-bottom:12px}

/* ---------- 预警列表 ---------- */
.warn-list{list-style:none;max-height:300px;overflow-y:auto}
.warn-list li{
  display:flex;gap:10px;padding:9px 8px;border-bottom:1px dashed rgba(29,47,94,.8);
  cursor:pointer;border-radius:6px;align-items:flex-start;
}
.warn-list li:hover{background:rgba(63,210,255,.05)}
.lv-bar{width:4px;border-radius:2px;flex:none;align-self:stretch}
.warn-t{font-size:13px;color:#e6f0ff}
.warn-d{font-size:11px;color:var(--sub);margin-top:3px;line-height:1.5}
.warn-time{font-size:10.5px;color:var(--dim);margin-top:3px}

/* ---------- 通用网格 ---------- */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid-2>.card{margin-bottom:12px}

/* ---------- 表格 ---------- */
.table-wrap{overflow:auto;max-height:330px}
.dtable{width:100%;border-collapse:collapse;font-size:12.5px}
.dtable th{
  text-align:left;color:var(--sub);font-weight:400;padding:8px 10px;
  border-bottom:1px solid var(--line);position:sticky;top:0;background:#0d1a38;
}
.dtable td{padding:8px 10px;border-bottom:1px dashed rgba(29,47,94,.6);color:#d5e3ff}
.dtable tr:hover td{background:rgba(63,210,255,.04)}
.tag{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;border:1px solid}
.tag-ok{color:var(--ok);border-color:rgba(47,212,140,.4);background:rgba(47,212,140,.07)}
.tag-blue{color:var(--lvblue);border-color:rgba(63,169,255,.4);background:rgba(63,169,255,.07)}
.tag-yellow{color:var(--yellow);border-color:rgba(255,210,61,.4);background:rgba(255,210,61,.07)}
.tag-orange{color:var(--orange);border-color:rgba(255,138,61,.4);background:rgba(255,138,61,.07)}
.tag-red{color:var(--red);border-color:rgba(255,84,112,.4);background:rgba(255,84,112,.07)}

/* ---------- 事件列表 ---------- */
.evt-list{list-style:none;max-height:300px;overflow-y:auto}
.evt-list li{padding:9px 6px;border-bottom:1px dashed rgba(29,47,94,.7);font-size:12.5px}
.evt-head{display:flex;justify-content:space-between;align-items:center;gap:8px}
.evt-name{color:#e6f0ff;font-size:13px}
.evt-desc{color:var(--sub);font-size:11.5px;margin-top:4px;line-height:1.55}

/* ---------- mini 统计 ---------- */
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px}
.mini{
  background:rgba(16,31,66,.6);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;text-align:center;
}
.mini b{display:block;font-size:20px;color:var(--cyan);margin-top:4px}
.mini span{font-size:11px;color:var(--sub)}
.note-block{
  font-size:12.5px;color:#bcd0f5;line-height:1.8;background:rgba(20,38,80,.4);
  border:1px solid var(--line);border-left:3px solid var(--cyan);
  border-radius:6px;padding:10px 12px;margin-bottom:10px;
}

/* ---------- 风险卡片 ---------- */
.risk-grid{display:flex;flex-direction:column;gap:8px;max-height:300px;overflow-y:auto}
.risk-item{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:rgba(16,31,66,.5);border:1px solid var(--line);border-radius:8px;padding:9px 12px;
}
.risk-name{font-size:13px}
.risk-sub{font-size:10.5px;color:var(--dim);margin-top:2px}
.risk-val{font-size:16px;font-weight:700;color:var(--cyan);font-variant-numeric:tabular-nums}

/* ---------- AI 视图 ---------- */
.ai-grid{display:grid;grid-template-columns:340px 1fr;gap:12px}
.form-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.form-row label{width:70px;flex:none;font-size:12.5px;color:var(--sub)}
.form-row select,.form-row input{
  flex:1;background:#0a1430;border:1px solid var(--line);color:var(--txt);
  border-radius:6px;padding:8px 10px;font-size:12.5px;outline:none;min-width:0;
}
.form-row select:focus,.form-row input:focus{border-color:var(--cyan)}
.check-row{display:flex;gap:8px;align-items:center;font-size:12px;color:var(--sub);cursor:pointer;margin-top:4px}
.hint{font-size:11.5px;color:var(--dim);line-height:1.7;margin-bottom:10px}
.btn{
  background:#132655;border:1px solid #2b4a8f;color:#cfe4ff;border-radius:7px;
  padding:8px 16px;font-size:13px;cursor:pointer;letter-spacing:1px;transition:all .18s;
}
.btn:hover{border-color:var(--cyan);color:#fff;box-shadow:0 0 10px rgba(63,210,255,.25)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:linear-gradient(90deg,#1560d4,#3fa9ff);border:none;color:#fff;font-weight:600}
.btn-block{width:100%;padding:11px;font-size:14.5px}
.btn-sm{padding:5px 10px;font-size:11.5px}
.btn-ghost{background:transparent}
.ai-status{font-size:11.5px;color:var(--dim);text-align:center;margin-top:9px;min-height:16px}

.pipeline{display:flex;flex-direction:column;gap:7px}
.pipe-step{
  display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--dim);
  padding:7px 10px;border:1px solid var(--line);border-radius:7px;transition:all .25s;
}
.pipe-step .dot{width:8px;height:8px;border-radius:50%;background:#2b3f6e;flex:none}
.pipe-step.active{color:#eaffff;border-color:rgba(63,210,255,.5);background:rgba(63,210,255,.07)}
.pipe-step.active .dot{background:var(--cyan);animation:blink .7s infinite}
.pipe-step.done{color:var(--ok);border-color:rgba(47,212,140,.3)}
.pipe-step.done .dot{background:var(--ok)}

.report-body{
  height:640px;overflow-y:auto;font-size:13px;line-height:1.95;color:#d9e7ff;
  white-space:pre-wrap;padding:6px 4px;
}
.report-body em{color:var(--cyan);font-style:normal}
.hist-list{list-style:none;max-height:170px;overflow-y:auto;font-size:12px}
.hist-list li{padding:7px 8px;border-bottom:1px dashed rgba(29,47,94,.7);cursor:pointer;color:var(--sub);border-radius:5px}
.hist-list li:hover{color:var(--txt);background:rgba(63,210,255,.05)}
.hist-list li.empty{cursor:default;color:var(--dim)}

/* ---------- 架构图 ---------- */
.arch{display:flex;flex-direction:column;align-items:stretch;gap:2px}
.arch-layer{
  display:flex;align-items:center;gap:14px;background:rgba(16,31,66,.55);
  border:1px solid var(--line);border-radius:8px;padding:10px 14px;
}
.arch-name{width:130px;flex:none;color:var(--cyan);font-size:13px;letter-spacing:2px;font-weight:600}
.arch-items{display:flex;flex-wrap:wrap;gap:6px}
.arch-items span{
  background:rgba(63,210,255,.07);border:1px solid rgba(63,210,255,.22);
  color:#bcd9ff;font-size:11.5px;padding:3px 10px;border-radius:12px;
}
.arch-arrow{text-align:center;color:var(--dim);font-size:11px;line-height:1.4}
.about-p,.about-ul{font-size:13px;color:#c6d8f8;line-height:2}
.about-ul{list-style:none}
.about-ul li{padding-left:16px;position:relative}
.about-ul li::before{content:"▸";position:absolute;left:0;color:var(--cyan)}
.about-ul b{color:#eaf4ff}

/* ---------- 弹窗 ---------- */
.modal-mask{
  position:fixed;inset:0;background:rgba(4,8,20,.72);display:none;
  align-items:center;justify-content:center;z-index:50;backdrop-filter:blur(3px);
}
.modal-mask.show{display:flex}
.modal{
  width:560px;max-width:92vw;background:linear-gradient(180deg,#0e1c3e,#0a142c);
  border:1px solid #2b4a8f;border-radius:12px;box-shadow:0 10px 50px rgba(0,0,0,.6);
  animation:fadeIn .2s;
}
.modal-head{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{font-size:15px;letter-spacing:2px}
.modal-close{background:none;border:none;color:var(--sub);font-size:16px;cursor:pointer}
.modal-body{padding:16px 18px;font-size:13px;line-height:1.9;max-height:60vh;overflow-y:auto;color:#d5e3ff}
.modal-body table{width:100%;border-collapse:collapse;margin:8px 0}
.modal-body td{padding:6px 8px;border-bottom:1px dashed rgba(29,47,94,.6);vertical-align:top}
.modal-body td:first-child{width:76px;color:var(--sub);flex:none}
.modal-foot{padding:12px 18px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:10px}

@media (max-width:1100px){
  .kpi-row{grid-template-columns:repeat(3,1fr)}
  .ov-grid,.grid-2,.ai-grid{grid-template-columns:1fr}
  body{overflow:auto}
}
@media print{
  body *{visibility:hidden}
  .modal,.modal *{visibility:visible}
  .modal{position:absolute;left:0;top:0;width:100%}
}