/* ============================================================
   新能源开发前期规划平台 · 共用设计系统
   deep-blue dark theme  ·  主色 #3b71f0
   被 index / light / wind / sim / assess 五页共用
   ============================================================ */

:root{
  --bg:#0b1522;          /* 页面底色 */
  --bg-deep:#050d15;
  --panel:#0e1a28;       /* 面板 */
  --panel-2:#122032;     /* 面板浮起层 */
  --card:rgba(24,42,62,.72);
  --line:rgba(70,110,150,.25);
  --line-strong:rgba(90,140,190,.45);
  --txt:#dceaf7;
  --txt-2:#cfe0f2;
  --mut:#8fa8c0;
  --mut-2:#7d95ad;
  --acc:#3b71f0;
  --acc-2:#2b5fd9;
  --acc-soft:rgba(59,113,240,.16);
  --ok:#3eb300;
  --warn:#ffcd00;
  --bad:#fc6e67;
  --radius:10px;
  --shadow:0 10px 34px rgba(2,8,18,.55);
}

*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  font-family:"PingFang SC","Microsoft YaHei","Helvetica Neue",Arial,sans-serif;
  background:var(--bg); color:var(--txt-2); font-size:14px;
  -webkit-font-smoothing:antialiased;
}
a{color:#7fb2f2;text-decoration:none;}
a:hover{color:#a9cdfb;}
::-webkit-scrollbar{width:9px;height:9px;}
::-webkit-scrollbar-thumb{background:rgba(90,140,190,.35);border-radius:5px;}
::-webkit-scrollbar-track{background:transparent;}

/* ── 通用控件 ───────────────────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 16px;border:1px solid transparent;border-radius:8px;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;
  font-size:13.5px;cursor:pointer;transition:filter .18s,transform .18s,border-color .18s;
  font-family:inherit;
}
.btn:hover{filter:brightness(1.12);}
.btn:active{transform:translateY(1px);}
.btn.ghost{background:rgba(255,255,255,.04);border-color:var(--line-strong);color:var(--txt-2);}
.btn.ghost:hover{background:rgba(255,255,255,.09);}
.btn.sm{height:28px;padding:0 12px;font-size:12.5px;border-radius:6px;}
.btn:disabled{opacity:.5;cursor:not-allowed;filter:none;}

input[type=text],input[type=password],input[type=number],select,textarea{
  height:36px;padding:0 12px;border-radius:6px;font-size:13.5px;font-family:inherit;
  border:1px solid var(--line-strong);background:#0a1420;color:var(--txt);outline:none;
  transition:border-color .18s,box-shadow .18s;width:100%;
}
textarea{height:auto;padding:9px 12px;resize:vertical;line-height:1.6;}
input:focus,select:focus,textarea:focus{border-color:var(--acc);box-shadow:0 0 0 3px rgba(59,113,240,.18);}
input::placeholder,textarea::placeholder{color:#5d7a97;}
label.field{display:block;margin-bottom:12px;}
label.field > span{display:block;font-size:12.5px;color:var(--mut);margin-bottom:6px;}

.badge{
  display:inline-block;font-size:11px;line-height:1.6;padding:2px 9px;border-radius:10px;
  background:var(--acc-soft);color:#7fb2f2;white-space:nowrap;
}
.badge.ok{background:rgba(62,179,0,.16);color:#7ad34e;}
.badge.warn{background:rgba(255,205,0,.16);color:#ffd94d;}
.badge.bad{background:rgba(252,110,103,.18);color:#ff9d97;}
.badge.mut{background:rgba(143,168,192,.16);color:#9fb6cc;}

.demo-tip{
  display:flex;align-items:center;gap:8px;font-size:12px;color:#c8a24a;
  background:rgba(255,205,0,.08);border:1px dashed rgba(255,205,0,.35);
  border-radius:8px;padding:7px 12px;line-height:1.6;
}

/* ── 首页外壳 ───────────────────────────────────────────── */
.bg{position:fixed;inset:0;z-index:0;
  background:linear-gradient(175deg,#0b1522 0%,#050d15 55%,#02060b 100%);}
.bg::before{content:"";position:absolute;left:0;right:0;bottom:0;height:42%;
  background:
    radial-gradient(ellipse 90% 70% at 50% 115%, rgba(35,80,120,.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 20% 100%, rgba(45,110,150,.35) 0%, transparent 70%),
    radial-gradient(ellipse 60% 50% at 80% 100%, rgba(50,90,140,.30) 0%, transparent 70%);}
.city{position:absolute;left:0;right:0;bottom:0;height:30%;opacity:.35;
  background:repeating-linear-gradient(90deg,
    rgba(90,140,180,.5) 0 14px, transparent 14px 46px,
    rgba(90,140,180,.35) 46px 58px, transparent 58px 96px);}
.dots{position:absolute;inset:0;z-index:0;
  background-image:
    radial-gradient(rgba(90,160,220,.55) 1px, transparent 1.6px),
    radial-gradient(rgba(90,160,220,.28) 1px, transparent 1.6px),
    radial-gradient(rgba(90,160,220,.16) 1px, transparent 1.6px);
  background-size:120px 120px, 70px 70px, 34px 34px;
  background-position:0 0, 40px 60px, 15px 20px;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 55%);
          mask-image:linear-gradient(180deg,transparent 0%,#000 55%);}

/* ── 大顶栏（首页用） ───────────────────────────────────── */
.nav{position:relative;z-index:10;height:60px;display:flex;align-items:center;
  justify-content:space-between;padding:0 42px;color:var(--txt-2);}
.brand{display:flex;align-items:center;gap:10px;}
.brand .mark{width:46px;height:46px;border-radius:50%;display:block;object-fit:cover;
  background:#fdf7e8;box-shadow:0 1px 4px rgba(0,0,0,.18);}
.brand .name{font-size:19px;font-weight:800;letter-spacing:2.5px;color:#fff;}
.brand .name small{letter-spacing:0;}
.brand .name small{font-size:12px;font-weight:400;color:#8fb4d8;margin-left:6px;}
.nav-right{display:flex;align-items:center;gap:22px;font-size:13.5px;}
.nav-right a{color:#b8cfe4;cursor:pointer;transition:color .2s;}
.nav-right a:hover{color:#fff;}
.nav-right .lang{display:flex;gap:6px;align-items:center;}
.nav-right .lang span{cursor:pointer;padding:3px 8px;border-radius:4px;color:#8fa8c0;}
.nav-right .lang span.on{color:#fff;background:rgba(59,113,240,.35);}
.nav-right .btn-login{padding:6px 18px;border-radius:16px;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;border:none;
  cursor:pointer;font-size:13.5px;font-family:inherit;}

/* ── 登录卡（首页用） ───────────────────────────────────── */
.login-card{width:420px;max-width:92vw;background:rgba(20,36,56,.88);border:1px solid rgba(80,130,190,.35);
  border-radius:12px;padding:24px 30px;backdrop-filter:blur(6px);box-shadow:var(--shadow);}
.login-tabs{display:flex;margin-bottom:20px;}
.login-tabs span{flex:1;text-align:center;padding:9px 0;font-size:14.5px;color:#8fa8c0;
  cursor:pointer;border-bottom:2px solid transparent;}
.login-tabs span.on{color:#fff;border-bottom-color:var(--acc);font-weight:600;}
.login-card input{margin-bottom:14px;}
.login-submit{width:100%;height:42px;border:none;border-radius:6px;margin-top:4px;cursor:pointer;
  background:linear-gradient(135deg,var(--acc),var(--acc-2));color:#fff;font-size:15px;
  letter-spacing:2px;font-family:inherit;}
.login-submit:hover{filter:brightness(1.1);}
.login-row{display:flex;gap:10px;}
.login-row input{flex:1;}
.login-row .btn{height:36px;white-space:nowrap;}
.login-msg{font-size:12.5px;color:var(--bad);min-height:18px;margin-top:8px;}
.login-msg.ok{color:#7ad34e;}
.login-foot{display:flex;justify-content:space-between;font-size:12.5px;color:#7d95ad;margin-top:6px;}
.login-foot a{cursor:pointer;}

/* ── 内页顶栏 ───────────────────────────────────────────── */
.topbar{height:52px;display:flex;align-items:center;justify-content:space-between;
  padding:0 18px;background:linear-gradient(180deg,#0d1826,#0a1320);
  border-bottom:1px solid var(--line);flex-shrink:0;z-index:2000;}
.topbar .left{display:flex;align-items:center;gap:22px;min-width:0;}
.topbar .brand{font-size:15.5px;font-weight:600;gap:9px;white-space:nowrap;}
.topbar .brand .mark{width:42px;height:42px;border-radius:50%;display:block;object-fit:cover;background:#fdf7e8;}
.topbar .brand .bname{font-size:18px;font-weight:800;color:#eaf2ff;letter-spacing:2.5px;}
.topbar .brand .bsub{font-size:13px;font-weight:400;color:#9fb6cc;}
.topbar .menu{display:flex;gap:18px;font-size:13px;color:#9fb6cc;}
.topbar .menu a{cursor:pointer;padding:3px 2px;border-bottom:2px solid transparent;color:#9fb6cc;}
.topbar .menu a:hover{color:var(--txt);}
.topbar .menu a.on{color:#7fb2f2;border-bottom-color:var(--acc);}
.topbar .right{display:flex;align-items:center;gap:12px;font-size:13px;color:#9fb6cc;}
.topbar .avatar{width:28px;height:28px;border-radius:50%;
  background:linear-gradient(135deg,var(--acc),#1e3a8a);display:flex;align-items:center;
  justify-content:center;color:#fff;font-size:12px;}

/* ── 内页骨架 ───────────────────────────────────────────── */
.app{display:flex;flex-direction:column;height:100%;}
.body{display:flex;flex:1;min-height:0;}
.side{width:340px;flex-shrink:0;background:var(--panel);border-right:1px solid var(--line);
  display:flex;flex-direction:column;z-index:1500;min-height:0;}
.side .head{padding:14px 16px;font-size:14.5px;font-weight:600;color:var(--txt);
  border-bottom:1px solid rgba(70,110,150,.2);display:flex;align-items:center;gap:8px;}
.side .head .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);}
.side .head .cnt{margin-left:auto;font-size:12px;color:var(--mut-2);font-weight:400;}
.side .search{margin:12px 16px;position:relative;}
.side .scroll{flex:1;overflow-y:auto;padding:0 10px 14px;min-height:0;}
.side .foot{padding:10px 16px;border-top:1px solid rgba(70,110,150,.2);display:flex;gap:8px;}

.item{padding:12px;margin-bottom:8px;border-radius:8px;cursor:pointer;
  background:var(--card);border:1px solid rgba(70,110,150,.22);
  transition:border-color .2s,background .2s;}
.item:hover,.item.on{border-color:rgba(59,113,240,.6);background:rgba(30,52,78,.85);}
.item .t{font-size:13.5px;color:#d9e7f5;font-weight:600;margin-bottom:5px;}
.item .m{font-size:12px;color:var(--mut-2);line-height:1.6;}
.item .tags{display:flex;gap:6px;margin-top:7px;flex-wrap:wrap;}
.item .tags b{font-size:11px;font-weight:400;padding:2px 8px;border-radius:10px;
  background:var(--acc-soft);color:#7fb2f2;}
.empty{color:var(--mut-2);font-size:12.5px;text-align:center;padding:26px 0;}

.content{flex:1;position:relative;min-width:0;display:flex;flex-direction:column;}
#map,.map{position:absolute;inset:0;background:#0a1420;}
.map-wrap{position:relative;flex:1;min-height:0;}
.canvas-pad{flex:1;overflow-y:auto;padding:18px 20px;}

/* ── 底部状态栏 ─────────────────────────────────────────── */
.statusbar{height:30px;flex-shrink:0;display:flex;align-items:center;gap:18px;
  padding:0 16px;font-size:12px;color:var(--mut-2);
  background:#081220;border-top:1px solid var(--line);}
.statusbar .sep{width:1px;height:12px;background:var(--line);}
.statusbar .right{margin-left:auto;display:flex;gap:14px;align-items:center;}

/* ── 地图元素 ───────────────────────────────────────────── */
.leaflet-container{background:#0a1420;font-family:inherit;}
.leaflet-bar{border:1px solid var(--line-strong)!important;}
.leaflet-bar a{background:#0e1a28!important;color:var(--txt-2)!important;
  border-bottom:1px solid rgba(90,140,190,.3)!important;}
.leaflet-bar a:hover{background:#16283e!important;}
.leaflet-control-attribution{background:rgba(14,26,40,.8)!important;color:#5d7186!important;font-size:10px!important;}
.leaflet-control-attribution a{color:var(--mut-2)!important;}

.ymarker{position:relative;width:16px;height:16px;border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);box-shadow:0 0 10px rgba(255,205,0,.6);
  border:2px solid #fff;transition:box-shadow .2s,transform .2s;}
.ymarker.gold{background:#ffcd00;}
.ymarker.cyan{background:#39d0d8;box-shadow:0 0 10px rgba(57,208,216,.6);}
.ymarker.on{box-shadow:0 0 0 6px rgba(59,113,240,.35),0 0 16px rgba(255,205,0,.9);}
.ymarker .tip{position:absolute;transform:rotate(45deg);left:20px;top:-26px;width:210px;
  background:rgba(14,26,40,.96);border:1px solid var(--line-strong);border-radius:6px;
  padding:8px 10px;font-size:11.5px;color:var(--txt-2);white-space:nowrap;z-index:900;
  opacity:0;pointer-events:none;transition:opacity .18s;}
.ymarker .tip.show,.ymarker:hover .tip,.ymarker.on .tip{opacity:1;}
.ymarker .tip .a{color:var(--warn);font-weight:600;}
.ymarker.cyan .tip .a{color:#39d0d8;}
.ymarker .tip .b{color:var(--mut);}

.legend{position:absolute;left:18px;bottom:22px;z-index:1000;background:rgba(14,26,40,.92);
  border:1px solid var(--line-strong);border-radius:8px;padding:10px 14px;font-size:12px;
  color:#9fb6cc;backdrop-filter:blur(4px);}
.legend .grad{width:180px;height:10px;border-radius:5px;margin:8px 0 4px;
  background:linear-gradient(90deg,#0b3d91,#3b71f0,#3eb300,#ffcd00,#fc6e67);}
.legend .row{display:flex;justify-content:space-between;font-size:11px;color:var(--mut-2);}

.map-btn{position:absolute;right:18px;bottom:22px;z-index:1000;display:flex;flex-direction:column;gap:8px;}
.map-btn button{width:38px;height:38px;border-radius:9px;cursor:pointer;font-size:16px;
  background:rgba(14,26,40,.92);border:1px solid var(--line-strong);color:var(--txt-2);
  font-family:inherit;transition:background .2s,border-color .2s;}
.map-btn button:hover{background:#16283e;border-color:var(--acc);}

/* ── 信息面板 / 卡片 / 表格 ─────────────────────────────── */
.info-card{position:absolute;top:16px;right:16px;width:300px;z-index:1000;
  background:rgba(14,26,40,.94);border:1px solid var(--line-strong);border-radius:var(--radius);
  box-shadow:var(--shadow);backdrop-filter:blur(6px);overflow:hidden;}
.info-card .hd{padding:12px 14px;border-bottom:1px solid rgba(70,110,150,.2);
  font-size:14px;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:8px;}
.info-card .hd .x{margin-left:auto;cursor:pointer;color:var(--mut-2);font-size:15px;}
.info-card .bd{padding:12px 14px;font-size:12.5px;}
.kv{display:flex;justify-content:space-between;gap:10px;padding:6px 0;
  border-bottom:1px dashed rgba(70,110,150,.18);}
.kv:last-child{border-bottom:none;}
.kv .k{color:var(--mut-2);}
.kv .v{color:var(--txt);font-weight:600;text-align:right;}

.panel-box{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
  padding:16px 18px;margin-bottom:16px;}
.panel-box h3{font-size:14.5px;color:var(--txt);margin-bottom:12px;font-weight:600;
  display:flex;align-items:center;gap:8px;}
.panel-box h3 .sub{font-size:12px;color:var(--mut-2);font-weight:400;}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:16px;}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:16px;}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px;}
.kpi .k{font-size:12.5px;color:var(--mut-2);margin-bottom:8px;}
.kpi .v{font-size:23px;font-weight:700;color:var(--txt);letter-spacing:.5px;}
.kpi .v small{font-size:12px;font-weight:400;color:var(--mut-2);margin-left:4px;}
.kpi .d{font-size:12px;margin-top:6px;color:var(--mut-2);}
.kpi .d.up{color:#7ad34e;}
.kpi .d.down{color:#ff9d97;}

table.tb{width:100%;border-collapse:collapse;font-size:12.5px;}
table.tb th{text-align:left;color:var(--mut);font-weight:500;padding:9px 10px;
  border-bottom:1px solid var(--line);white-space:nowrap;}
table.tb td{padding:10px;border-bottom:1px solid rgba(70,110,150,.14);color:var(--txt-2);}
table.tb tr:last-child td{border-bottom:none;}
table.tb tbody tr:hover{background:rgba(59,113,240,.07);}
table.tb td.num{text-align:right;font-variant-numeric:tabular-nums;}

.progress{height:8px;border-radius:4px;background:rgba(90,140,190,.2);overflow:hidden;}
.progress i{display:block;height:100%;width:0;border-radius:4px;
  background:linear-gradient(90deg,var(--acc),#39d0d8);transition:width .25s;}
.log{height:150px;overflow-y:auto;background:#081220;border:1px solid var(--line);
  border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.9;color:var(--mut);
  font-family:"SFMono-Regular",Menlo,Consolas,monospace;}
.log .t{color:#7fb2f2;}
.log .ok{color:#7ad34e;}

/* ── 弹层 ───────────────────────────────────────────────── */
.mask{position:fixed;inset:0;background:rgba(3,8,16,.72);z-index:5000;display:none;
  align-items:center;justify-content:center;backdrop-filter:blur(3px);padding:24px;}
.mask.show{display:flex;}
.modal{width:620px;max-width:94vw;max-height:86vh;overflow-y:auto;background:var(--panel);
  border:1px solid var(--line-strong);border-radius:12px;box-shadow:var(--shadow);}
.modal .hd{padding:16px 20px;border-bottom:1px solid var(--line);display:flex;
  align-items:center;font-size:15.5px;font-weight:600;color:var(--txt);}
.modal .hd .x{margin-left:auto;cursor:pointer;color:var(--mut-2);}
.modal .bd{padding:18px 20px;font-size:13.5px;line-height:1.85;color:var(--txt-2);}
.modal .bd h4{color:var(--txt);font-size:14px;margin:14px 0 6px;}
.modal .bd h4:first-child{margin-top:0;}
.modal .bd ul{padding-left:20px;}
.modal .ft{padding:14px 20px;border-top:1px solid var(--line);display:flex;
  justify-content:flex-end;gap:10px;}

.toast{position:fixed;left:50%;bottom:52px;transform:translate(-50%,20px);z-index:6000;
  background:rgba(14,26,40,.96);border:1px solid var(--line-strong);color:var(--txt);
  padding:10px 20px;border-radius:22px;font-size:13px;box-shadow:var(--shadow);
  opacity:0;pointer-events:none;transition:opacity .22s,transform .22s;}
.toast.show{opacity:1;transform:translate(-50%,0);}

/* ── 响应式 ─────────────────────────────────────────────── */
@media (max-width:900px){
  .side{width:290px;}
  .info-card{width:250px;}
}
@media (max-width:760px){
  .body{flex-direction:column;}
  .side{width:100%;max-height:44%;border-right:none;border-bottom:1px solid var(--line);}
  .statusbar{flex-wrap:wrap;height:auto;padding:6px 12px;gap:10px;}
  .statusbar .right{margin-left:0;}
  .nav{padding:0 18px;}
  .topbar .menu{display:none;}
}