/* ============================================================
   万域智瞰 · 城市AI营销实时数据大屏
   ============================================================ */
.screen-body{
  background:var(--screen-bg);color:#cfe6ee;
  font-family:var(--sans);overflow:hidden;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% -10%,rgba(47,141,125,.16),transparent 60%),
    radial-gradient(ellipse 50% 40% at 90% 110%,rgba(111,208,226,.1),transparent 60%);
}
.screen-body::before{display:none}
.screen-wrap{width:100vw;height:100vh;padding:14px 18px 16px;display:flex;flex-direction:column;gap:12px}

/* 顶栏 */
.scr-header{
  position:relative;height:74px;flex:none;
  background:linear-gradient(180deg,rgba(111,208,226,.1),transparent);
  display:flex;align-items:center;justify-content:space-between;padding:0 26px;
}
.scr-header::after{
  content:"";position:absolute;left:5%;right:5%;bottom:0;height:2px;
  background:linear-gradient(90deg,transparent,var(--screen-cyan),transparent);
  opacity:.5;
}
.scr-title{text-align:center;position:absolute;left:50%;top:8px;transform:translateX(-50%)}
.scr-title h1{
  font-family:var(--serif);font-size:clamp(22px,2.4vw,34px);font-weight:700;
  letter-spacing:.18em;
  background:linear-gradient(180deg,#fff,#9fd5e2);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  white-space:nowrap;
}
.scr-title .sub{
  font-size:11px;letter-spacing:.5em;color:rgba(159,213,226,.65);margin-top:3px;
  display:flex;align-items:center;gap:14px;justify-content:center;
}
.scr-title .sub::before,.scr-title .sub::after{content:"";width:60px;height:1px;background:linear-gradient(90deg,transparent,rgba(159,213,226,.4))}
.scr-title .sub::after{background:linear-gradient(90deg,rgba(159,213,226,.4),transparent)}
.scr-side{display:flex;align-items:center;gap:18px;z-index:2;font-size:13px;color:rgba(207,230,238,.75)}
.scr-side .live-dot{display:inline-flex;align-items:center;gap:7px}
.scr-side .live-dot i{width:8px;height:8px;border-radius:50%;background:#52e39b;box-shadow:0 0 10px #52e39b;animation:scrPulse 1.6s infinite}
@keyframes scrPulse{50%{opacity:.4}}
.scr-side .clock{font-family:var(--num);font-size:20px;color:var(--screen-gold);letter-spacing:.08em}
.scr-back{
  display:inline-flex;align-items:center;gap:7px;padding:8px 16px;border-radius:3px;
  border:1px solid rgba(111,208,226,.4);color:#9fd5e2;font-size:12.5px;transition:.25s;
}
.scr-back:hover{background:rgba(111,208,226,.12)}
#scrDate{font-size:12px;opacity:.65}

/* 主体三栏 */
.scr-main{flex:1;display:grid;grid-template-columns:340px 1fr 340px;gap:12px;min-height:0}
.scr-col{display:flex;flex-direction:column;gap:12px;min-height:0}
.scr-panel{
  position:relative;flex:1;min-height:0;
  border:1px solid var(--screen-line);
  background:linear-gradient(180deg,rgba(13,50,64,.55),rgba(9,36,48,.35));
  backdrop-filter:blur(4px);border-radius:4px;padding:14px 16px;display:flex;flex-direction:column;
}
.scr-panel::before,.scr-panel::after{
  content:"";position:absolute;width:14px;height:14px;border:2px solid var(--screen-cyan);opacity:.7;
}
.scr-panel::before{left:-1px;top:-1px;border-right:none;border-bottom:none}
.scr-panel::after{right:-1px;bottom:-1px;border-left:none;border-top:none}
.sp-title{
  display:flex;align-items:center;gap:9px;font-size:14.5px;letter-spacing:.14em;color:#dff0f5;
  margin-bottom:10px;flex:none;font-weight:600;
}
.sp-title::before{content:"";width:4px;height:14px;background:linear-gradient(180deg,var(--screen-cyan),var(--screen-gold))}
.sp-title .en{margin-left:auto;font-size:10px;letter-spacing:.2em;color:rgba(159,213,226,.4);font-weight:400}
.chart{flex:1;min-height:0;width:100%}

/* 中央列 */
.scr-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex:none;height:108px}
.kpi{
  position:relative;border:1px solid var(--screen-line);border-radius:4px;overflow:hidden;
  background:linear-gradient(160deg,rgba(111,208,226,.12),rgba(111,208,226,.02));
  display:flex;flex-direction:column;justify-content:center;padding:0 18px;
}
.kpi .kpi-label{font-size:12.5px;color:rgba(207,230,238,.65);letter-spacing:.12em;display:flex;align-items:center;gap:7px}
.kpi .kpi-label i{width:6px;height:6px;background:var(--screen-gold);transform:rotate(45deg)}
.kpi .kpi-num{
  font-family:var(--num);font-size:clamp(26px,2.2vw,38px);font-weight:700;line-height:1.25;
  color:#fff;letter-spacing:.02em;
}
.kpi .kpi-num small{font-size:14px;color:var(--screen-gold);margin-left:5px;font-weight:400}
.kpi .kpi-trend{font-size:11.5px;color:#5fd4a0}
.kpi .kpi-trend.down{color:#ff8a7e}
.kpi::after{
  content:"";position:absolute;right:-20px;bottom:-20px;width:70px;height:70px;border-radius:50%;
  border:1px solid rgba(111,208,226,.25);
}
.scr-map-panel{flex:1;min-height:0}

/* 地图 */
.scr-map{flex:1;position:relative;min-height:0}
.scr-map svg{width:100%;height:100%}
.map-dot{cursor:pointer}
.map-dot circle.core{animation:mapPulse 2.4s infinite}
@keyframes mapPulse{0%{r:5;opacity:.9}100%{r:22;opacity:0}}
.map-tip{
  position:absolute;pointer-events:none;background:rgba(9,32,43,.92);border:1px solid var(--screen-cyan);
  border-radius:3px;padding:8px 12px;font-size:12px;color:#dff0f5;opacity:0;transition:.15s;z-index:5;
  white-space:nowrap;
}
.map-tip b{color:var(--screen-gold)}

/* 实时滚动列表 */
.feed{flex:1;overflow:hidden;position:relative;min-height:0}
.feed-track{display:flex;flex-direction:column;gap:9px;animation:feedRoll 22s linear infinite}
.feed:hover .feed-track{animation-play-state:paused}
@keyframes feedRoll{to{transform:translateY(-50%)}}
.feed-item{
  display:flex;align-items:center;gap:10px;font-size:12.5px;flex:none;
  padding:9px 12px;border:1px solid var(--screen-line);border-radius:3px;
  background:rgba(111,208,226,.04);
}
.feed-item .fi-tag{
  font-size:10.5px;padding:2px 8px;border-radius:2px;flex:none;letter-spacing:.1em;
}
.fi-tag.lead{background:rgba(216,184,119,.16);color:var(--screen-gold)}
.fi-tag.cite{background:rgba(111,208,226,.16);color:var(--screen-cyan)}
.feed-item .fi-time{margin-left:auto;color:rgba(159,213,226,.5);font-family:var(--num);font-size:11.5px;flex:none}
.feed-item p{margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:rgba(223,240,245,.85)}

/* 排行榜条 */
.rank-list{display:flex;flex-direction:column;gap:11px;padding-top:2px}
.rank-list li{display:grid;grid-template-columns:24px 86px 1fr 52px;align-items:center;gap:10px;font-size:12.5px}
.rank-list .rk-no{
  font-family:var(--num);font-weight:700;color:rgba(159,213,226,.5);
}
.rank-list li:nth-child(-n+3) .rk-no{color:var(--screen-gold)}
.rank-list .rk-name{color:rgba(223,240,245,.9);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rank-list .rk-bar{height:6px;background:rgba(111,208,226,.1);border-radius:3px;overflow:hidden}
.rank-list .rk-bar i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,#2e8f86,var(--screen-cyan));width:0;transition:width 1.2s ease}
.rank-list .rk-val{font-family:var(--num);color:var(--screen-gold);text-align:right}

/* 漏斗 */
.funnel{display:flex;flex-direction:column;gap:7px;justify-content:center;flex:1;padding:6px 0}
.funnel .frow{display:grid;grid-template-columns:74px 1fr 60px;align-items:center;gap:12px;font-size:12.5px}
.funnel .fbar{height:26px;border-radius:3px;display:flex;align-items:center;padding:0 12px;color:#06222d;font-weight:700;font-size:12px;
  background:linear-gradient(90deg,rgba(216,184,119,.95),rgba(111,208,226,.85));white-space:nowrap;overflow:hidden}
.funnel .fval{font-family:var(--num);color:var(--screen-gold)}

/* 小屏适配 */
@media(max-width:1280px){
  .scr-main{grid-template-columns:300px 1fr 300px}
}
.scr-note{position:absolute;left:18px;bottom:10px;font-size:11px;color:rgba(159,213,226,.4);letter-spacing:.1em}
.scr-exit-mobile{display:none}
@media(max-width:900px){
  .screen-wrap{height:auto;min-height:100vh;overflow:visible}
  .scr-main{grid-template-columns:1fr}
  .scr-panel{min-height:300px}
  .scr-kpis{grid-template-columns:repeat(2,1fr);height:auto}
  .kpi{padding:14px 16px}
  body.screen-body{overflow:auto}
  .scr-header{flex-wrap:wrap;height:auto;padding:12px 16px;gap:8px}
  .scr-title{position:static;transform:none;order:-1;width:100%}
}