/* 访客数据大屏 · 视觉（复刻高保真效果图，全部本地无外链） */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#00d4ff;--primary-2:#8b5cf6;--success:#10b981;
  --danger:#ef4444;--warning:#f59e0b;
  --bg:#050810;--panel:rgba(15,23,42,.8);--border:rgba(0,212,255,.2);
  --text:#e2e8f0;--text-dim:rgba(255,255,255,.5);
}
html,body{height:100%;overflow:hidden}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--text);font-size:13px;-webkit-font-smoothing:antialiased;
}
.bg-glow{position:fixed;inset:0;
  background:radial-gradient(circle at 20% 30%,rgba(0,212,255,.08),transparent 40%),
            radial-gradient(circle at 80% 70%,rgba(139,92,246,.08),transparent 40%);
  pointer-events:none;z-index:0}
.screen{position:relative;z-index:1;height:100vh;display:grid;grid-template-rows:60px 1fr 36px;gap:12px;padding:12px}
.top-bar{display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(90deg,rgba(0,212,255,.05),rgba(139,92,246,.05));
  border:1px solid var(--border);border-radius:12px;padding:0 20px;position:relative;overflow:hidden;gap:12px}
.top-bar::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent)}
.top-title{font-size:20px;font-weight:900;letter-spacing:4px;
  background:linear-gradient(90deg,var(--primary),var(--primary-2));
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  white-space:nowrap;min-width:0;overflow:hidden;text-overflow:ellipsis}
.top-time{font-family:'SF Mono',Menlo,Consolas,monospace;font-size:18px;color:var(--primary);
  text-shadow:0 0 12px rgba(0,212,255,.5);white-space:nowrap}
.top-right{display:flex;align-items:center;gap:12px;flex-shrink:0}
.top-status{display:flex;gap:16px;align-items:center;font-size:12.5px;color:var(--text-dim)}
.status-dot{width:8px;height:8px;border-radius:50%;background:var(--success);box-shadow:0 0 8px var(--success);
  display:inline-block;margin-right:6px;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}
.lang-select{background:rgba(255,255,255,.08);border:1px solid var(--border);color:var(--text);
  padding:6px 8px;border-radius:8px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;outline:none}
.lang-select option{background:#0f172a;color:#e2e8f0}
.license-badge{font-size:11px;padding:5px 10px;border-radius:8px;border:1px solid var(--border);
  background:rgba(255,255,255,.06);color:var(--text-dim);text-decoration:none;white-space:nowrap}
.license-badge.licensed{color:var(--success);border-color:rgba(16,185,129,.4)}
.main{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px;min-height:0}
.col{display:flex;flex-direction:column;gap:12px;min-height:0;min-width:0}
.panel{background:var(--panel);border:1px solid var(--border);border-radius:12px;padding:14px;position:relative;
  overflow:hidden;display:flex;flex-direction:column;min-height:0}
.panel::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),transparent)}
.panel-title{font-size:13px;font-weight:700;color:var(--primary);letter-spacing:1px;margin-bottom:12px;
  display:flex;align-items:center;gap:8px;flex-shrink:0;padding-bottom:8px;border-bottom:1px solid rgba(0,212,255,.1)}
.panel-title .ico{font-size:15px}
.panel-title .side{margin-left:auto;font-size:10.5px;font-weight:600;color:var(--text-dim);
  border:1px solid var(--border);border-radius:6px;padding:1px 8px;cursor:pointer}
.panel-title .side:hover{color:var(--primary);border-color:var(--primary)}
.period-tag{font-size:10px;color:var(--text-dim);font-weight:600;margin-left:auto}
.kpi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.kpi-card{background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(139,92,246,.08));
  border:1px solid rgba(0,212,255,.15);border-radius:10px;padding:12px 8px;text-align:center;transition:all .2s;min-width:0}
.kpi-card:hover{border-color:var(--primary);box-shadow:0 0 16px rgba(0,212,255,.2)}
.kpi-value{font-size:22px;font-weight:900;color:var(--primary);font-family:'SF Mono',Menlo,Consolas,monospace;
  text-shadow:0 0 10px rgba(0,212,255,.4);line-height:1.1}
.kpi-label{font-size:11px;color:var(--text-dim);margin-top:4px}
.kpi-trend{font-size:10px;color:var(--success);margin-top:2px}
.kpi-trend.down{color:var(--danger)}
.kpi-trend.flat{color:var(--text-dim)}
.chart-wrap{flex:1;position:relative;min-height:0}
canvas{display:block;width:100%;height:100%}
.chart-legend{display:flex;gap:14px;justify-content:center;font-size:10.5px;color:var(--text-dim);padding-top:4px}
.chart-legend i{display:inline-block;width:10px;height:3px;border-radius:2px;margin-right:5px;vertical-align:middle}
.donut-wrap{flex:1;display:flex;align-items:center;gap:16px;min-height:0}
.donut-canvas{width:140px;height:140px;flex-shrink:0;position:relative}
.donut-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;pointer-events:none}
.donut-center b{display:block;font-size:22px;font-weight:900;color:var(--primary);font-family:'SF Mono',monospace}
.donut-center span{font-size:10px;color:var(--text-dim)}
.legend{flex:1;display:flex;flex-direction:column;gap:8px;min-width:0;overflow-y:auto}
.legend-item{display:flex;align-items:center;gap:8px;font-size:12px}
.legend-color{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.legend-name{flex:1;color:rgba(255,255,255,.75);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.legend-value{color:var(--primary);font-weight:700;font-family:'SF Mono',monospace}
.rank-list{flex:1;overflow:hidden;min-height:0;position:relative}
.rank-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid rgba(255,255,255,.04);font-size:12.5px}
.rank-item:last-child{border-bottom:none}
.rank-num{width:20px;height:20px;border-radius:5px;background:rgba(255,255,255,.08);color:var(--text-dim);
  font-size:11px;font-weight:800;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.rank-item:nth-child(1) .rank-num{background:linear-gradient(135deg,#f59e0b,#ef4444);color:#fff}
.rank-item:nth-child(2) .rank-num{background:linear-gradient(135deg,#94a3b8,#64748b);color:#fff}
.rank-item:nth-child(3) .rank-num{background:linear-gradient(135deg,#d97706,#92400e);color:#fff}
.rank-icon{font-size:16px}
.rank-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.85)}
.rank-cat{font-size:10px;color:var(--text-dim);margin-right:4px}
.rank-bar{width:60px;height:5px;background:rgba(255,255,255,.08);border-radius:3px;overflow:hidden;flex-shrink:0}
.rank-bar-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--primary-2));border-radius:3px;transition:width .5s}
.rank-value{font-family:'SF Mono',monospace;color:var(--primary);font-weight:700;font-size:12px;width:46px;text-align:right;flex-shrink:0}
.visitor-list{flex:1;overflow:hidden;position:relative;min-height:0}
.visitor-scroll{height:100%;overflow:hidden}
.visitor-item{display:flex;align-items:center;gap:10px;padding:6px 0;font-size:12px;color:rgba(255,255,255,.75);animation:slideIn .4s ease}
@keyframes slideIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:translateX(0)}}
.visitor-time{font-family:monospace;color:var(--text-dim);font-size:11px;width:52px;flex-shrink:0}
.visitor-ip{color:var(--primary);font-family:monospace;font-size:11.5px;width:104px;flex-shrink:0}
.visitor-action{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:rgba(255,255,255,.65)}
.visitor-badge{font-size:9.5px;color:var(--warning);border:1px solid rgba(245,158,11,.4);border-radius:4px;padding:0 4px;flex-shrink:0}
.empty-tip{flex:1;display:flex;align-items:center;justify-content:center;color:var(--text-dim);font-size:12px;text-align:center;padding:20px}
.notice-list{flex:1;overflow:hidden;min-height:0;position:relative}
.notice-item{padding:10px 12px;background:rgba(0,212,255,.05);border-left:3px solid var(--primary);border-radius:6px;
  font-size:12.5px;line-height:1.55;color:rgba(255,255,255,.85)}
.notice-item .n-time{display:block;font-size:10.5px;color:var(--text-dim);margin-top:4px;font-family:monospace}
.tool-count-card{display:flex;align-items:center;justify-content:space-around;padding:20px 12px;
  background:linear-gradient(135deg,rgba(0,212,255,.08),rgba(139,92,246,.08));border-radius:12px;border:1px solid rgba(0,212,255,.15)}
.tool-count-item{text-align:center}
.tool-count-num{font-size:28px;font-weight:900;color:var(--primary);font-family:'SF Mono',monospace;text-shadow:0 0 12px rgba(0,212,255,.4)}
.tool-count-label{font-size:11.5px;color:var(--text-dim);margin-top:4px}
.bottom-bar{background:linear-gradient(90deg,rgba(0,212,255,.05),rgba(139,92,246,.05));border:1px solid var(--border);
  border-radius:12px;padding:0 20px;display:flex;align-items:center;gap:16px;overflow:hidden;position:relative}
.alert-badge{background:linear-gradient(135deg,#ef4444,#f59e0b);color:#fff;font-size:11px;font-weight:800;
  padding:3px 10px;border-radius:8px;letter-spacing:1px;flex-shrink:0;animation:pulse 1.5s infinite;white-space:nowrap}
.alert-track{flex:1;overflow:hidden;white-space:nowrap;position:relative;height:100%;display:flex;align-items:center}
.alert-scroll{display:inline-block;animation:marquee 30s linear infinite;font-size:12.5px;color:rgba(255,255,255,.75)}
@keyframes marquee{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
.alert-item{display:inline-block;margin-right:40px}
.alert-item::before{content:'●';color:var(--danger);margin-right:6px}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:rgba(0,212,255,.3);border-radius:2px}
::-webkit-scrollbar-thumb:hover{background:rgba(0,212,255,.6)}
@media(max-width:1000px){.main{grid-template-columns:1fr 1fr}}
@media(max-width:760px){
  html,body{overflow:auto}
  .screen{height:auto;min-height:100vh;grid-template-rows:auto auto auto;padding:8px}
  .top-bar{flex-wrap:wrap;height:auto;padding:12px 16px;gap:10px}
  .top-title{font-size:15px;letter-spacing:2px}.top-time{font-size:14px}.top-status{gap:10px;font-size:11px}
  .main{grid-template-columns:1fr}.col{gap:10px}.panel{padding:12px}.kpi-value{font-size:18px}
  .donut-canvas{width:110px;height:110px}.donut-center b{font-size:18px}
}
@media(max-width:480px){.kpi-grid{grid-template-columns:repeat(2,1fr)}}

/* ---------- TOP10 列表超高无缝上滚（鼠标悬停暂停） ---------- */
.roll-track{display:flex;flex-direction:column}
.can-roll{-webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent);
  mask-image:linear-gradient(180deg,#000 calc(100% - 14px),transparent)}
.can-roll .roll-track{animation:rollUp linear infinite}
.rank-list:hover .roll-track,.visitor-scroll:hover .roll-track,.notice-list:hover .roll-track{animation-play-state:paused}
.notice-list .roll-track{gap:10px}
@keyframes rollUp{0%{transform:translateY(0)}100%{transform:translateY(-50%)}}

/* 顶栏在中宽屏压缩为单行（隐藏主机名；不影响 1000px 的三列断点） */
@media(max-width:1200px){
  .top-bar{padding:0 12px;gap:10px}
  .top-title{font-size:15px;letter-spacing:1px}
  .top-time{font-size:13px}
  .top-status,.top-right{gap:8px;font-size:11px;flex-wrap:nowrap}
  .top-status>span:nth-child(2){display:none}
}