:root{
  --bg:#0b0f16; --bg2:#111823; --bg3:#161f2c; --line:#243044;
  --fg:#e6edf7; --fg2:#93a4bd; --fg3:#61738d;
  --acc:#4c8dff; --acc2:#2f6bd8; --ok:#31c48d; --warn:#f5a524; --bad:#f05252;
  --r:10px;
}
*{margin:0;padding:0;box-sizing:border-box;}
/* 关键：.gate/.custom 等设了 display，会覆盖 hidden 属性，必须显式压掉 */
[hidden]{display:none!important;}
html,body{height:100%;}
body{
  background:var(--bg); color:var(--fg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Microsoft YaHei",sans-serif;
  font-size:14px; -webkit-font-smoothing:antialiased;
}
#app{max-width:1400px;margin:0 auto;padding:18px 18px 40px;}

/* ---------- 顶栏 ---------- */
.top{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;margin-bottom:16px;}
.brand{display:flex;align-items:center;gap:12px;}
.logo{width:38px;height:38px;border-radius:10px;flex:0 0 38px;
  background:linear-gradient(135deg,var(--acc),#7c3aed);
  box-shadow:0 6px 18px rgba(76,141,255,.35);position:relative;}
.logo::after{content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 21l6-8 5 5 4-6 7 9' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/24px no-repeat;}
h1{font-size:19px;font-weight:650;letter-spacing:.2px;}
.sub{font-size:12.5px;color:var(--fg3);margin-top:2px;}
.actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap;}

.btn{
  border:1px solid var(--acc); background:var(--acc); color:#fff;
  padding:7px 14px;border-radius:8px;font-size:13px;cursor:pointer;
  font-family:inherit;transition:filter .15s,background .15s;
}
.btn:hover{filter:brightness(1.1);}
.btn:active{transform:translateY(1px);}
.btn.sm{padding:6px 11px;font-size:12.5px;}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--fg2);}
.btn.ghost:hover{border-color:var(--acc);color:var(--fg);}

.sw{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;color:var(--fg2);cursor:pointer;user-select:none;}
.sw input{accent-color:var(--acc);width:15px;height:15px;cursor:pointer;}

/* ---------- 控制区 ---------- */
.controls{display:flex;flex-direction:column;gap:11px;margin-bottom:16px;
  background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:12px;}
.seg{display:flex;gap:0;flex-wrap:wrap;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:fit-content;max-width:100%;}
.seg button{background:transparent;border:0;border-right:1px solid var(--line);color:var(--fg2);
  padding:7px 15px;font-size:13px;cursor:pointer;font-family:inherit;transition:.15s;}
.seg button:last-child{border-right:0;}
.seg button:hover{background:var(--bg3);color:var(--fg);}
.seg button.on{background:var(--acc);color:#fff;}
.custom{display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.custom .arw{color:var(--fg3);}
input[type=datetime-local],select,input[type=text],#inPath{
  background:var(--bg3);border:1px solid var(--line);color:var(--fg);
  padding:6px 9px;border-radius:7px;font-size:13px;font-family:inherit;
}
input[type=datetime-local]{color-scheme:dark;}
#inPath{width:100%;}
.filters{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;}
.fld{display:flex;flex-direction:column;gap:4px;}
.fld>span{font-size:11.5px;color:var(--fg3);letter-spacing:.3px;}
.fld.grow{flex:1;min-width:220px;}
select:focus,#inPath:focus,input:focus{outline:none;border-color:var(--acc);}

.err{background:rgba(240,82,82,.12);border:1px solid rgba(240,82,82,.45);color:#ffb4b4;
  padding:9px 12px;border-radius:8px;font-size:13px;margin-bottom:14px;}

/* ---------- 指标卡 ---------- */
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px;}
.card{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:14px 15px;position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--acc);opacity:.85;}
.card.ok::before{background:var(--ok);}
.card.warn::before{background:var(--warn);}
.card.purple::before{background:#a855f7;}
.card .k{font-size:12px;color:var(--fg3);margin-bottom:7px;letter-spacing:.3px;}
.card .v{font-size:25px;font-weight:650;line-height:1.1;font-variant-numeric:tabular-nums;}
.card .x{font-size:11.5px;color:var(--fg3);margin-top:6px;}

/* ---------- 面板 ---------- */
.panel{background:var(--bg2);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px 15px;margin-bottom:14px;min-width:0;}
.ph{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px;flex-wrap:wrap;}
.ph h2{font-size:14px;font-weight:600;letter-spacing:.2px;}
.ph .hint{font-size:11.5px;color:var(--fg3);}
.legend{display:flex;gap:14px;font-size:12px;color:var(--fg2);}
.lg{display:inline-flex;align-items:center;gap:6px;}
.lg i{width:11px;height:11px;border-radius:3px;display:inline-block;}
.lg.pv i{background:var(--acc);}
.lg.uv i{background:#a855f7;}

.grid{display:grid;gap:14px;}
.grid.g2{grid-template-columns:1.25fr 1fr;}
.grid.g3{grid-template-columns:repeat(3,1fr);}
.grid>.panel{margin-bottom:14px;min-width:0;}

/* ---------- 图表 ---------- */
.chart{position:relative;width:100%;min-height:240px;}
.chart svg{display:block;width:100%;}
.empty{color:var(--fg3);font-size:13px;padding:70px 0;text-align:center;}
.tip{position:fixed;z-index:60;pointer-events:none;background:#0d1420;border:1px solid var(--line);
  border-radius:8px;padding:8px 11px;font-size:12.5px;box-shadow:0 10px 28px rgba(0,0,0,.55);line-height:1.65;}
.tip b{color:var(--fg);font-weight:600;}
.tip .r{display:flex;justify-content:space-between;gap:14px;color:var(--fg2);}
.tip .r span:last-child{color:var(--fg);font-variant-numeric:tabular-nums;}

/* ---------- 表格 ---------- */
.tbl{max-height:320px;overflow:auto;min-width:0;}
.tbl table{width:100%;border-collapse:collapse;font-size:13px;}
.tbl th{position:sticky;top:0;background:var(--bg2);text-align:left;color:var(--fg3);
  font-weight:500;font-size:11.5px;padding:6px 8px;border-bottom:1px solid var(--line);z-index:1;}
.tbl th.n,.tbl td.n{text-align:right;font-variant-numeric:tabular-nums;}
.tbl td{padding:6px 8px;border-bottom:1px solid rgba(36,48,68,.5);}
.tbl tr{cursor:pointer;}
.tbl tbody tr:hover{background:var(--bg3);}
.tbl td.p{max-width:340px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg);}
.tbl td.p .badge{display:inline-block;font-size:10.5px;padding:1px 6px;border-radius:4px;
  background:var(--bg3);color:var(--fg3);margin-left:6px;vertical-align:1px;}

/* ---------- 条形榜 ---------- */
.bars{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow:auto;}
.bar{position:relative;padding:5px 8px;border-radius:6px;background:var(--bg3);overflow:hidden;cursor:pointer;}
.bar .fill{position:absolute;left:0;top:0;bottom:0;background:rgba(76,141,255,.22);}
.bar .row{position:relative;display:flex;justify-content:space-between;gap:10px;font-size:12.5px;}
.bar .row .t{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--fg2);}
.bar .row .n{color:var(--fg);font-variant-numeric:tabular-nums;flex:0 0 auto;}
.bar:hover .row .t{color:var(--fg);}

/* ---------- 实时 ---------- */
.live{max-height:320px;overflow:auto;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:12px;}
.live .l{display:flex;gap:9px;padding:4px 2px;border-bottom:1px solid rgba(36,48,68,.4);white-space:nowrap;min-width:0;}
.live .l .tm{color:var(--fg3);flex:0 0 58px;}
.live .l .m{flex:0 0 44px;color:var(--fg3);}
.live .l .pa{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--fg2);}
.live .l .st{flex:0 0 34px;text-align:right;}
.live .l .ip{flex:0 1 auto;max-width:110px;overflow:hidden;text-overflow:ellipsis;color:var(--fg3);text-align:right;}
.st2{color:var(--ok);} .st3{color:var(--warn);} .st4{color:var(--bad);} .st5{color:var(--bad);}

/* ---------- 采集状态 ---------- */
.meta{font-size:12.5px;color:var(--fg2);line-height:1.9;}
.meta code{background:var(--bg3);padding:1px 6px;border-radius:4px;font-size:12px;color:var(--fg);}
.meta .kv{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid rgba(36,48,68,.4);padding:3px 0;}
.meta .kv span:last-child{color:var(--fg);font-variant-numeric:tabular-nums;}

.foot{text-align:center;color:var(--fg3);font-size:11.5px;margin-top:18px;}

/* ---------- 登录门 ---------- */
.gate{position:fixed;inset:0;z-index:80;background:rgba(6,10,18,.88);backdrop-filter:blur(6px);
  display:flex;align-items:center;justify-content:center;padding:20px;}
.gatebox{background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:30px 26px;
  max-width:360px;width:100%;text-align:center;box-shadow:0 24px 60px rgba(0,0,0,.6);}
.glogo{width:52px;height:52px;margin:0 auto 16px;border-radius:14px;
  background:linear-gradient(135deg,var(--acc),#7c3aed);position:relative;}
.glogo::after{content:'';position:absolute;inset:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M5 21l6-8 5 5 4-6 7 9' fill='none' stroke='%23fff' stroke-width='2.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/32px no-repeat;}
.gatebox h3{font-size:17px;margin-bottom:9px;}
.gatebox p{font-size:13px;color:var(--fg3);line-height:1.7;margin-bottom:20px;}
.gatebox .btn{width:100%;padding:10px;font-size:14px;}

/* ---------- 响应式 ---------- */
@media (max-width:1000px){
  .grid.g3{grid-template-columns:1fr;}
}
@media (max-width:820px){
  .grid.g2{grid-template-columns:1fr;}
  .cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:560px){
  #app{padding:12px 11px 30px;}
  h1{font-size:17px;}
  .logo{width:32px;height:32px;flex-basis:32px;border-radius:8px;}
  .cards{gap:9px;}
  .card{padding:11px 12px;}
  .card .v{font-size:20px;}
  .seg{width:100%;}
  .seg button{flex:1 0 auto;padding:7px 9px;font-size:12px;}
  .panel{padding:11px 11px 13px;}
  .top{gap:9px;}
  .actions{width:100%;}
  .actions .btn{flex:1;}
  .fld.grow{min-width:100%;}
  .tbl td.p{max-width:150px;}
  .live .l .ip{display:none;}
  .live .l .m{flex:0 0 40px;}
  .legend{gap:9px;font-size:11.5px;}
}