/* ==========================================================================
   律智云 · 总部数据大屏
   ========================================================================== */
.scr{
  --scr-bg:#060B16;
  --scr-panel:rgba(17,28,50,.72);
  --scr-line:rgba(96,140,225,.18);
  --scr-line-2:rgba(96,140,225,.32);
  --scr-txt:#D6E2F8;
  --scr-dim:#7C90B4;
  --scr-cyan:#38E0D0;
  --scr-blue:#4C8DFF;
  --scr-gold:#E8C87A;
  --scr-red:#FF6B6B;
  --scr-amber:#FFB454;

  position:fixed;inset:0;z-index:500;overflow:hidden;
  background:
    radial-gradient(1200px 700px at 50% -12%,rgba(28,58,124,.55),transparent 62%),
    radial-gradient(900px 620px at 8% 108%,rgba(20,80,90,.32),transparent 60%),
    radial-gradient(900px 620px at 94% 104%,rgba(72,50,120,.26),transparent 60%),
    linear-gradient(170deg,#08101F,#050A14 60%,#04070E);
  color:var(--scr-txt);
  font-family:var(--ff);
  display:flex;flex-direction:column;
  animation:scr-in .5s var(--ease-out);
}
@keyframes scr-in{from{opacity:0;transform:scale(1.012)}to{opacity:1;transform:none}}
/* 网格底纹 */
.scr::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(96,140,225,.055) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(96,140,225,.055) 1px,transparent 1px);
  background-size:48px 48px;
  mask-image:radial-gradient(1400px 900px at 50% 40%,#000 30%,transparent 88%);
  -webkit-mask-image:radial-gradient(1400px 900px at 50% 40%,#000 30%,transparent 88%);
}

/* ------------------------------ 顶栏 ------------------------------ */
.scr-head{
  position:relative;z-index:2;flex:none;
  height:74px;display:flex;align-items:center;gap:18px;padding:0 26px;
  background:linear-gradient(180deg,rgba(12,22,42,.9),rgba(12,22,42,.25));
  border-bottom:1px solid var(--scr-line);
}
.scr-head::after{
  content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  width:min(620px,52vw);height:2px;
  background:linear-gradient(90deg,transparent,var(--scr-cyan),transparent);
  box-shadow:0 0 18px var(--scr-cyan);opacity:.75;
}
.scr-brand{display:flex;align-items:center;gap:13px}
.scr-brand .mk{
  width:40px;height:40px;border-radius:12px;flex:none;
  background:linear-gradient(145deg,var(--gold-300),var(--gold-600));
  color:#241A05;font-family:var(--ff-serif);font-weight:700;font-size:20px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 22px -6px rgba(192,154,69,.6);
}
/* 站点装修配置的 Logo：垫一层浅色底，避免深色 Logo 在深色大屏上看不清 */
.scr-brand .mk.img{
  object-fit:contain;background:rgba(255,255,255,.92);padding:3px;
  box-shadow:0 8px 22px -6px rgba(0,0,0,.5);
}
.scr-title{font-size:21px;font-weight:600;letter-spacing:.16em;color:#fff;
  background:linear-gradient(100deg,#fff,#9FC4FF 60%,#E8C87A);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.scr-sub{font-size:11px;color:var(--scr-dim);letter-spacing:.2em;margin-top:2px}
.scr-head-right{margin-left:auto;display:flex;align-items:center;gap:16px}
.scr-clock{text-align:right;line-height:1.25}
.scr-clock b{font-size:20px;font-weight:600;color:#fff;font-family:var(--ff-num);letter-spacing:.04em}
.scr-clock span{display:block;font-size:11px;color:var(--scr-dim);letter-spacing:.08em}
.scr-btn{
  display:inline-flex;align-items:center;gap:6px;
  padding:8px 15px;border-radius:9px;font-size:12px;font-weight:500;
  background:rgba(76,141,255,.12);border:1px solid var(--scr-line-2);color:#BBD3FF;
  cursor:pointer;transition:.18s var(--ease);
}
.scr-btn:hover{background:rgba(76,141,255,.24);border-color:var(--scr-cyan);color:#fff;
  box-shadow:0 0 18px -4px rgba(56,224,208,.4)}
.scr-live{display:inline-flex;align-items:center;gap:7px;font-size:11px;color:var(--scr-cyan)}
.scr-live i{width:7px;height:7px;border-radius:50%;background:var(--scr-cyan);
  box-shadow:0 0 0 0 rgba(56,224,208,.6);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(56,224,208,.55)}70%{box-shadow:0 0 0 9px rgba(56,224,208,0)}100%{box-shadow:0 0 0 0 rgba(56,224,208,0)}}

/* ------------------------------ 主体栅格 ------------------------------ */
.scr-grid{
  position:relative;z-index:2;flex:1;min-height:0;
  display:grid;grid-template-columns:340px minmax(0,1fr) 360px;
  gap:16px;padding:16px 22px 10px;
}
.scr-col{display:flex;flex-direction:column;gap:14px;min-height:0;overflow:hidden}
.scr-col.mid{overflow:visible}

/* ------------------------------ 面板 ------------------------------ */
.scr-panel{
  position:relative;border-radius:14px;padding:14px 16px 15px;
  background:var(--scr-panel);
  border:1px solid var(--scr-line);
  backdrop-filter:blur(10px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 14px 34px -22px rgba(0,0,0,.9);
  display:flex;flex-direction:column;min-height:0;
}
.scr-panel::before,.scr-panel::after{
  content:"";position:absolute;width:12px;height:12px;pointer-events:none;
  border-color:var(--scr-cyan);opacity:.7;
}
.scr-panel::before{left:-1px;top:-1px;border-left:2px solid;border-top:2px;border-radius:14px 0 0 0}
.scr-panel::after{right:-1px;bottom:-1px;border-right:2px solid;border-bottom:2px;border-radius:0 0 14px 0}
.scr-panel-h{display:flex;align-items:center;gap:9px;margin-bottom:12px;flex:none}
.scr-panel-h .bar{width:3px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,var(--scr-cyan),var(--scr-blue));box-shadow:0 0 10px var(--scr-cyan)}
.scr-panel-h h3{font-size:13.5px;font-weight:600;color:#EAF2FF;letter-spacing:.06em}
.scr-panel-h .more{margin-left:auto;font-size:11px;color:var(--scr-dim)}
.scr-panel-b{flex:1;min-height:0;overflow:auto}
.scr-panel-b::-webkit-scrollbar{width:5px}
.scr-panel-b::-webkit-scrollbar-thumb{background:rgba(96,140,225,.3)}

/* ------------------------------ KPI ------------------------------ */
.scr-kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.scr-kpi{
  position:relative;overflow:hidden;border-radius:11px;padding:11px 13px;
  background:linear-gradient(150deg,rgba(48,86,160,.26),rgba(20,34,62,.3));
  border:1px solid var(--scr-line);
}
.scr-kpi::after{
  content:"";position:absolute;right:-18px;bottom:-22px;width:56px;height:56px;border-radius:50%;
  background:var(--c,var(--scr-blue));opacity:.16;filter:blur(6px);
}
.scr-kpi .k{font-size:11px;color:var(--scr-dim);position:relative;z-index:1;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.scr-kpi .v{
  font-size:25px;font-weight:700;line-height:1.15;margin-top:5px;position:relative;z-index:1;
  font-family:var(--ff-num);letter-spacing:-.02em;color:#fff;
  text-shadow:0 0 22px rgba(76,141,255,.45);
}
.scr-kpi .v small{font-size:11px;font-weight:500;color:var(--scr-dim);margin-left:3px;letter-spacing:0}
.scr-kpi .x{font-size:10.5px;color:var(--scr-dim);margin-top:2px;position:relative;z-index:1}
.scr-kpi.wide{grid-column:1/-1}

/* KPI 大条（地图下方） */
.scr-band{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:14px}
.scr-band .item{
  text-align:center;padding:12px 8px;border-radius:12px;
  background:linear-gradient(180deg,rgba(48,86,160,.22),rgba(16,28,52,.28));
  border:1px solid var(--scr-line);
}
.scr-band .item .k{font-size:11px;color:var(--scr-dim);letter-spacing:.06em}
.scr-band .item .v{font-size:23px;font-weight:700;font-family:var(--ff-num);margin-top:4px;
  color:var(--scr-gold);text-shadow:0 0 20px rgba(232,200,122,.35);letter-spacing:-.02em}
.scr-band .item .v.c{color:var(--scr-cyan);text-shadow:0 0 20px rgba(56,224,208,.35)}

/* ------------------------------ 中国地图 ------------------------------ */
.scr-map-wrap{position:relative;flex:1;min-height:0;display:flex;align-items:center;justify-content:center}
.scr-map{width:100%;height:100%;max-height:100%;display:block;overflow:visible}
/* 真实省界多边形 */
.prov-fills .prov-shape{
  stroke:none;transition:filter .2s var(--ease),opacity .2s var(--ease);
  cursor:default;
}
.prov-fills .prov-shape.has{cursor:pointer}
.prov-fills .prov-shape.has:hover{filter:brightness(1.5) drop-shadow(0 0 8px rgba(56,224,208,.55))}
.prov-fills .prov-shape.hq{filter:brightness(1.15)}
.prov-lines{pointer-events:none}
.prov-line{
  fill:none;stroke:rgba(150,195,255,.5);stroke-width:1;stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.prov-label .lbl{
  font-size:11px;fill:#DCE9FF;font-weight:600;text-anchor:middle;
  paint-order:stroke;stroke:rgba(6,12,24,.85);stroke-width:3px;stroke-linejoin:round;
}
.prov-label .cnt{font-size:10.5px;fill:#38E0D0;font-weight:700;text-anchor:middle;
  font-family:var(--ff-num);paint-order:stroke;stroke:rgba(6,12,24,.85);stroke-width:3px}
.prov-label.hq .lbl{fill:#FFEBB8}
.prov-label.hq .cnt{fill:#FFEBB8}
/* 南海诸岛内嵌框 */
.map-inset .inset-shape{
  fill:rgba(44,72,128,.55);
  stroke:rgba(150,195,255,.55);
  stroke-width:.9;
  stroke-linejoin:round;
}
.map-inset .inset-lbl{
  font-size:9.5px;fill:#7C90B4;text-anchor:middle;letter-spacing:.06em;
}

.prov-label .ring{fill:none;stroke:#E8C87A;stroke-width:1.2;
  transform-box:fill-box;transform-origin:center;animation:pulse-ring 2.6s ease-out infinite}
.hq-mark{animation:hq-breathe 3.4s ease-in-out infinite}
@keyframes hq-breathe{0%,100%{opacity:.85}50%{opacity:.4}}

.prov-tile{
  cursor:pointer;transition:transform .2s var(--ease-out),filter .2s var(--ease);
  transform-box:fill-box;transform-origin:center;
}
.prov-tile:hover{transform:scale(1.42);filter:brightness(1.35)}
.prov-tile .box{stroke:rgba(255,255,255,.22);stroke-width:.8}
.prov-tile .lbl{font-size:9.5px;fill:#9FB6D8;font-weight:500;text-anchor:middle;
  pointer-events:none;letter-spacing:.02em}
.prov-tile.has .lbl{fill:#DCE9FF;font-weight:600}
.prov-tile .cnt{font-size:9px;fill:#38E0D0;font-weight:700;text-anchor:middle;pointer-events:none;
  font-family:var(--ff-num)}
.prov-tile .ring{fill:none;stroke:var(--scr-cyan);stroke-width:1.2;opacity:.85;
  transform-box:fill-box;transform-origin:center;animation:pulse-ring 2.6s ease-out infinite}
@keyframes pulse-ring{0%{transform:scale(.55);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.arc{fill:none;stroke-linecap:round;stroke-dasharray:5 9;animation:flow 1.6s linear infinite}
@keyframes flow{to{stroke-dashoffset:-28}}
.arc-glow{fill:none;stroke-linecap:round;opacity:.28;filter:blur(3px)}
.map-legend{position:absolute;left:2px;bottom:2px;display:flex;align-items:center;gap:10px;
  font-size:10.5px;color:var(--scr-dim);background:rgba(10,18,34,.6);
  padding:6px 11px;border-radius:8px;border:1px solid var(--scr-line)}
.map-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:4px;vertical-align:-1px}
.map-tip{
  position:absolute;pointer-events:none;z-index:9;
  background:rgba(10,20,40,.95);border:1px solid var(--scr-line-2);border-radius:9px;
  padding:9px 12px;font-size:11.5px;color:#DCE9FF;min-width:150px;
  box-shadow:0 16px 34px -12px rgba(0,0,0,.9);backdrop-filter:blur(8px);
  transition:opacity .16s var(--ease);
}
.map-tip b{display:block;font-size:12.5px;color:#fff;margin-bottom:5px}
.map-tip .r{display:flex;justify-content:space-between;gap:14px;color:var(--scr-dim)}
.map-tip .r span:last-child{color:var(--scr-cyan);font-family:var(--ff-num);font-weight:600}

/* ------------------------------ 条状排行 ------------------------------ */
.rank{display:flex;flex-direction:column;gap:9px}
.rank-row{display:flex;align-items:center;gap:9px;font-size:12px}
.rank-row .idx{
  width:18px;height:18px;border-radius:5px;flex:none;text-align:center;line-height:18px;
  font-size:10px;font-weight:700;font-family:var(--ff-num);
  background:rgba(96,140,225,.16);color:#8FB0E8;
}
.rank-row:nth-child(1) .idx{background:linear-gradient(135deg,#E8C87A,#B98A2C);color:#2A1F05}
.rank-row:nth-child(2) .idx{background:rgba(56,224,208,.22);color:#7FF0E4}
.rank-row:nth-child(3) .idx{background:rgba(76,141,255,.22);color:#A8C8FF}
.rank-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#C9D9F2}
.rank-row .val{font-family:var(--ff-num);font-weight:600;color:var(--scr-cyan);flex:none}
.rank-row .bar{position:absolute;left:0;top:0;bottom:0;border-radius:5px;background:rgba(76,141,255,.1);z-index:-1}
.rank-row{position:relative;padding:5px 8px;border-radius:7px;z-index:0}
.rank-row:hover{background:rgba(76,141,255,.08)}

/* 水平条图 */
.bar-list{display:flex;flex-direction:column;gap:10px}
.bar-item{font-size:11.5px}
.bar-item .t{display:flex;justify-content:space-between;color:#C9D9F2;margin-bottom:5px}
.bar-item .t span:last-child{color:var(--scr-cyan);font-family:var(--ff-num);font-weight:600}
.bar-item .tr{height:6px;border-radius:99px;background:rgba(96,140,225,.14);overflow:hidden}
.bar-item .tr i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--scr-blue),var(--scr-cyan));
  box-shadow:0 0 12px -2px var(--scr-cyan);
  width:0;transition:width 1s var(--ease-out)}

/* 趋势迷你图 */
.spark{width:100%;height:74px;display:block;overflow:visible}
.spark .area{fill:url(#sparkGrad)}
.spark .line{fill:none;stroke:var(--scr-cyan);stroke-width:1.8;stroke-linejoin:round}
.spark .dot{fill:#0A1424;stroke:var(--scr-cyan);stroke-width:1.6}
.spark .ax{font-size:9px;fill:var(--scr-dim);font-family:var(--ff-num)}

/* ------------------------------ 底部日志 ------------------------------ */
/* 高度随视口自适应：
   · 默认 96px → 容纳 3 行（矮屏优先保证上方图表区不被挤扁）
   · ≥940px 高的屏幕 → 142px，刚好容纳 5 行（5×18 + 4×6 + 22 内边距 + 2 边框） */
.scr-foot{
  position:relative;z-index:2;flex:none;
  margin:0 22px 16px;height:96px;
  border-radius:14px;border:1px solid var(--scr-line);
  background:var(--scr-panel);backdrop-filter:blur(10px);
  display:flex;overflow:hidden;
}
@media (min-height:940px){
  .scr-foot{height:142px}
}
.scr-foot .hd{
  flex:none;width:110px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  border-right:1px solid var(--scr-line);background:rgba(76,141,255,.06);
}
.scr-foot .hd b{font-size:12px;color:#EAF2FF;letter-spacing:.08em}
.scr-foot .hd span{font-size:10px;color:var(--scr-dim)}
.scr-log{
  flex:1;min-height:0;overflow:hidden;padding:11px 16px;
  display:flex;flex-direction:column;gap:6px;
  /* 行数超出容器时末尾渐隐，避免像以前那样被硬切掉半行字 */
  -webkit-mask-image:linear-gradient(#000 calc(100% - 26px), transparent);
  mask-image:linear-gradient(#000 calc(100% - 26px), transparent);
}
/**
 * flex:none 必须有：.scr-log 是 flex 列容器，行默认 flex-shrink:1，
 * 一旦行数超出容器，每行会被压到 8px 高（字号 11.5px），文字就会互相重叠。
 * 行高固定 18px，配合 .scr-foot 高度即可精确容纳 5 行。
 */
.log-line{display:flex;align-items:center;gap:9px;flex:none;line-height:18px;font-size:11.5px;color:#A9BEDD;
  animation:log-in .4s var(--ease-out);white-space:nowrap;overflow:hidden}
@keyframes log-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.log-line time{color:#5F7699;font-family:var(--ff-num);flex:none}
.log-line .a{color:var(--scr-cyan);flex:none}
.log-line .o{color:#8FB0E8;flex:none}
.log-line .t{color:#DCE9FF;overflow:hidden;text-overflow:ellipsis}

/* 状态灯 */
.state-list{display:flex;flex-direction:column;gap:8px}
.state-row{display:flex;align-items:center;gap:9px;font-size:11.5px}
.state-row .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#C9D9F2}
.state-row .meta{font-size:10px;color:var(--scr-dim)}
.led{width:7px;height:7px;border-radius:50%;flex:none}
.led.on{background:var(--scr-cyan);box-shadow:0 0 8px var(--scr-cyan)}
.led.off{background:#4A5A78}
.led.warn{background:var(--scr-amber);box-shadow:0 0 8px var(--scr-amber)}
.led.err{background:var(--scr-red);box-shadow:0 0 8px var(--scr-red)}

/* 预警分区 */
.warn-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.warn-cell{text-align:center;padding:10px 4px;border-radius:10px;border:1px solid var(--scr-line);
  background:rgba(16,28,52,.4)}
.warn-cell .k{font-size:10.5px;color:var(--scr-dim)}
.warn-cell .v{font-size:19px;font-weight:700;font-family:var(--ff-num);margin-top:3px}
.warn-cell.r .v{color:var(--scr-red);text-shadow:0 0 16px rgba(255,107,107,.4)}
.warn-cell.a .v{color:var(--scr-amber);text-shadow:0 0 16px rgba(255,180,84,.4)}
.warn-cell.c .v{color:var(--scr-cyan);text-shadow:0 0 16px rgba(56,224,208,.4)}
.warn-cell.g .v{color:#8FB0E8}

/* ------------------------------ 响应式 ------------------------------ */
@media (max-width:1500px){
  .scr-grid{grid-template-columns:300px minmax(0,1fr) 320px}
  .scr{font-size:13px}
}
@media (max-width:1220px){
  .scr-grid{grid-template-columns:minmax(0,1fr);overflow-y:auto;padding:12px}
  .scr-col{overflow:visible}
  .scr-foot{display:none}
  .scr-band{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:820px){
  .scr-kpis{grid-template-columns:repeat(2,1fr)}
  .scr-head{height:auto;padding:12px 14px;flex-wrap:wrap;gap:10px}
  .scr-title{font-size:16px;letter-spacing:.08em}
  .scr-head-right{width:100%;justify-content:space-between}
  .warn-grid{grid-template-columns:repeat(2,1fr)}
}