:root{
  --bg:#0a0d14; --bg2:#0f1420; --panel:#141b2b; --panel2:#1a2334;
  --border:#232c40; --border2:#2e3a52;
  --text:#e6edf7; --text2:#9aa7bd; --text3:#6b7891;
  --up:#f6465d;      /* 涨 / 买入 / 抛压警示 - 红 */
  --down:#2ebd85;    /* 跌 / 卖出 - 绿 */
  --danger:#ff4d4f;
  --warn:#f0a020;
  --info:#3b82f6;
  --purple:#a855f7;
  --gold:#f0b90b;
  --radius:10px;
  --mono:'SFMono-Regular',Consolas,'Liberation Mono',Menlo,monospace;
}

*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--text);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,'Segoe UI','PingFang SC','Hiragino Sans GB','Microsoft YaHei',sans-serif;
  padding:0 18px 40px;
  min-height:100vh;
}
h1,h2,h3,h4{font-weight:600}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit;font-size:13px}

/* ---------- 顶栏 ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 0 14px;margin-bottom:16px;
  border-bottom:1px solid var(--border);
  position:sticky;top:0;background:var(--bg);z-index:50;
}
.brand{display:flex;align-items:center;gap:12px}
.logo{font-size:30px;line-height:1}
.brand h1{
  font-size:19px;letter-spacing:.3px;
  background:linear-gradient(90deg,#60a5fa 0%,#a855f7 55%,#f0b90b 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.brand .sub{font-size:11px;color:var(--text3);letter-spacing:.4px}
.topstats{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.tstat{display:flex;flex-direction:column;gap:2px;min-width:70px}
.tstat label{font-size:10px;color:var(--text3);text-transform:uppercase;letter-spacing:.6px}
.tstat span{font-size:14px;font-weight:600;font-family:var(--mono)}
.dot-off{color:var(--warn)!important}
.dot-on{color:var(--down)!important}
.dot-err{color:var(--up)!important}

/* ---------- 按钮 ---------- */
.btn-ghost{
  background:var(--panel2);border:1px solid var(--border2);color:var(--text2);
  padding:6px 13px;border-radius:7px;font-size:12.5px;transition:.15s;
}
.btn-ghost:hover{background:#232f45;color:var(--text);border-color:#3d4c69}
.btn-primary{
  background:linear-gradient(135deg,#3b82f6,#2563eb);border:none;color:#fff;
  padding:8px 20px;border-radius:7px;font-size:13px;font-weight:500;
}
.btn-primary:hover{filter:brightness(1.12)}
.btn-mini{
  background:var(--panel2);border:1px solid var(--border2);color:var(--text2);
  padding:3px 10px;border-radius:6px;font-size:11.5px;
}
.btn-mini:hover{color:var(--text);border-color:var(--info)}

/* ---------- 告警横幅（可点击定位到事件） ---------- */
.alert-banner{
  display:flex;align-items:center;gap:12px;cursor:pointer;
  background:linear-gradient(90deg,rgba(255,77,79,.18),rgba(255,77,79,.06));
  border:1px solid rgba(255,77,79,.45);border-left:4px solid var(--danger);
  border-radius:var(--radius);padding:11px 16px;margin-bottom:16px;
  font-size:13.5px;color:#ffd7d7;animation:bannerIn .3s ease;
  transition:background .15s,border-color .15s;
}
.alert-banner:hover{background:linear-gradient(90deg,rgba(255,77,79,.28),rgba(255,77,79,.1));border-color:var(--danger)}
.alert-banner:focus-visible{outline:2px solid var(--danger);outline-offset:2px}
.alert-banner .pulse{
  width:9px;height:9px;border-radius:50%;background:var(--danger);flex:none;
  animation:pulse 1.1s infinite;
}
.banner-hint{
  font-size:11.5px;color:#ff9b9b;opacity:.8;flex:none;
  padding:2px 8px;border:1px solid rgba(255,77,79,.4);border-radius:5px;
}
.alert-banner:hover .banner-hint{opacity:1;background:rgba(255,77,79,.15)}
.banner-close{
  margin-left:auto;background:none;border:none;color:#ffb3b3;
  font-size:19px;line-height:1;padding:0 4px;flex:none;
}
.banner-close:hover{color:#fff}

/* ---------- 告警入口按钮与未读角标 ---------- */
.alert-btn{position:relative}
.alert-btn.ringing{animation:ring 1.2s ease 3}
.badge{
  position:absolute;top:-6px;right:-6px;min-width:17px;height:17px;padding:0 4px;
  background:var(--danger);color:#fff;border-radius:9px;
  font-size:10px;font-weight:700;line-height:17px;text-align:center;
  box-shadow:0 0 0 2px var(--bg);
}
@keyframes ring{
  0%,100%{transform:rotate(0)} 20%{transform:rotate(-12deg)}
  40%{transform:rotate(10deg)} 60%{transform:rotate(-8deg)} 80%{transform:rotate(6deg)}
}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(1.5)}}
@keyframes bannerIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.hidden{display:none!important}

/* ---------- KPI ---------- */
.kpi-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  gap:12px;margin-bottom:16px;
}
.kpi-card{
  background:linear-gradient(160deg,var(--panel),var(--bg2));
  border:1px solid var(--border);border-radius:var(--radius);
  padding:14px 16px 12px;position:relative;overflow:hidden;
}
.kpi-card.danger{border-color:rgba(255,77,79,.3)}
.kpi-card.danger::before{
  content:'';position:absolute;inset:0;
  background:radial-gradient(circle at 100% 0%,rgba(255,77,79,.10),transparent 60%);
  pointer-events:none;
}
.kpi-label{font-size:11.5px;color:var(--text3);margin-bottom:7px;display:flex;align-items:center;gap:5px}
.hint{
  display:inline-flex;align-items:center;justify-content:center;
  width:14px;height:14px;border-radius:50%;background:var(--panel2);
  color:var(--text3);font-size:9.5px;cursor:help;
}
.kpi-value{font-size:25px;font-weight:700;font-family:var(--mono);letter-spacing:-.5px;line-height:1.15}
.kpi-sub{font-size:11px;color:var(--text3);margin-top:5px;font-family:var(--mono)}
.kpi-bar{height:3px;background:var(--panel2);border-radius:2px;margin-top:10px;overflow:hidden}
.kpi-bar-fill{height:100%;width:0%;border-radius:2px;transition:width .6s cubic-bezier(.4,0,.2,1)}
.bar-pressure{background:linear-gradient(90deg,#f0a020,var(--up))}
.bar-buy{background:linear-gradient(90deg,#3b82f6,var(--up))}
.bar-rug{background:linear-gradient(90deg,#a855f7,var(--danger))}
.bar-transfer{background:linear-gradient(90deg,#3b82f6,#60a5fa)}

/* ---------- 图表 ---------- */
.chart-grid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));
  gap:12px;margin-bottom:16px;
}
.panel{
  background:var(--panel);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px 16px;
}
.panel-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:12px;margin-bottom:12px;flex-wrap:wrap;
}
.panel-head h2{font-size:13.5px;color:var(--text);letter-spacing:.2px}
.panel-note{font-size:11px;color:var(--text3)}
.seg{display:flex;gap:2px;background:var(--bg2);border-radius:7px;padding:2px}
.seg button{
  background:none;border:none;color:var(--text3);
  padding:3px 11px;border-radius:5px;font-size:11.5px;transition:.15s;
}
.seg button.active{background:var(--panel2);color:var(--text)}
canvas{display:block;width:100%}

/* ---------- 主工作区 ---------- */
.main-grid{
  display:grid;grid-template-columns:1fr 320px;gap:12px;align-items:start;
}
@media(max-width:1100px){.main-grid{grid-template-columns:1fr}}
.stream-panel{display:flex;flex-direction:column;max-height:640px}
.filters{display:flex;gap:7px;align-items:center;flex-wrap:wrap}
.filters select,.filters input[type=search]{
  background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  padding:5px 9px;border-radius:6px;font-size:12px;
}
.filters input[type=search]{width:170px}
.switch{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--text3);cursor:pointer}

/* ---------- 事件流 ---------- */
.event-list{
  flex:1;overflow-y:auto;display:flex;flex-direction:column;gap:6px;
  padding-right:5px;min-height:220px;
}
.event-list::-webkit-scrollbar{width:7px}
.event-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:4px}
.event-list::-webkit-scrollbar-track{background:transparent}

.evt{
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--border2);
  border-radius:8px;padding:9px 12px;display:flex;gap:11px;align-items:flex-start;
  animation:evtIn .28s ease;
}
@keyframes evtIn{from{opacity:0;transform:translateX(-10px)}to{opacity:1;transform:none}}
.evt.buy{border-left-color:var(--up)}
.evt.sell{border-left-color:var(--down)}
.evt.rug{border-left-color:var(--danger);background:rgba(255,77,79,.07)}
.evt.cex-in{border-left-color:var(--warn)}
.evt.cex-out{border-left-color:var(--gold)}
.evt.new{border-left-color:var(--purple)}
.evt.watch{box-shadow:0 0 0 1px rgba(59,130,246,.35)}

.evt-ico{font-size:17px;line-height:1.2;flex:none;width:22px;text-align:center}
.evt-body{flex:1;min-width:0}
.evt-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.evt-type{
  font-size:10.5px;padding:1.5px 7px;border-radius:4px;font-weight:600;
  letter-spacing:.3px;flex:none;
}
.t-rug{background:rgba(255,77,79,.18);color:#ff8b8b}
.t-buy{background:rgba(246,70,93,.16);color:#ff8a97}
.t-sell{background:rgba(46,189,133,.16);color:#5fd6a8}
.t-cexin{background:rgba(240,160,32,.16);color:#f7bd5e}
.t-cexout{background:rgba(240,185,11,.16);color:#f5cf5a}
.t-transfer{background:rgba(59,130,246,.16);color:#7cb0fb}
.t-new{background:rgba(168,85,247,.16);color:#c79bfb}
.t-lp{background:rgba(59,130,246,.16);color:#7cb0fb}

.evt-sum{font-size:12.5px;color:var(--text);flex:1;min-width:0}
.evt-amt{font-family:var(--mono);font-size:13px;font-weight:600;flex:none}
.amt-up{color:var(--up)}
.amt-down{color:var(--down)}
.amt-flat{color:var(--text2)}
.evt-meta{
  font-size:11px;color:var(--text3);font-family:var(--mono);
  margin-top:3px;display:flex;gap:9px;flex-wrap:wrap;
}
.evt-meta a{color:var(--text3);text-decoration:none}
.evt-meta a:hover{color:var(--info);text-decoration:underline}
.risk{
  font-size:10px;padding:1px 6px;border-radius:4px;font-family:var(--mono);flex:none;
}
.risk-low{background:rgba(59,130,246,.14);color:#7cb0fb}
.risk-mid{background:rgba(240,160,32,.16);color:#f7bd5e}
.risk-high{background:rgba(255,77,79,.2);color:#ff8b8b;animation:riskBlink 1.4s infinite}
@keyframes riskBlink{0%,100%{opacity:1}50%{opacity:.5}}
.tag-watch{color:var(--info);font-size:10px;border:1px solid rgba(59,130,246,.4);padding:0 5px;border-radius:4px}

/* ---------- 侧栏 ---------- */
.side-col{display:flex;flex-direction:column;gap:12px}
.watch-list,.whale-list{display:flex;flex-direction:column;gap:6px;max-height:270px;overflow-y:auto}
.watch-list::-webkit-scrollbar,.whale-list::-webkit-scrollbar{width:6px}
.watch-list::-webkit-scrollbar-thumb,.whale-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.watch-item,.whale-item{
  background:var(--bg2);border:1px solid var(--border);border-radius:7px;
  padding:8px 10px;display:flex;align-items:center;gap:8px;
}
.watch-item.off{opacity:.45}
.wi-main{flex:1;min-width:0}
.wi-label{font-size:12.5px;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.wi-addr{font-size:10.5px;color:var(--text3);font-family:var(--mono)}
.wi-hits{font-size:10px;color:var(--info);font-family:var(--mono);flex:none}
.wi-del{background:none;border:none;color:var(--text3);font-size:15px;line-height:1;padding:0 3px}
.wi-del:hover{color:var(--up)}
.whale-item{cursor:pointer;transition:.15s}
.whale-item:hover{border-color:var(--info);background:var(--panel2)}
.wi-rank{
  width:19px;height:19px;border-radius:5px;background:var(--panel2);
  display:flex;align-items:center;justify-content:center;
  font-size:10.5px;font-weight:700;color:var(--text3);flex:none;font-family:var(--mono);
}
.whale-item:nth-child(1) .wi-rank{background:rgba(240,185,11,.2);color:#f5cf5a}
.whale-item:nth-child(2) .wi-rank{background:rgba(160,174,192,.18);color:#cbd5e1}
.whale-item:nth-child(3) .wi-rank{background:rgba(217,119,6,.18);color:#f0a868}

.empty{color:var(--text3);font-size:12px;text-align:center;padding:22px 8px}

/* ---------- 系统状态 ---------- */
.sys-status{display:flex;flex-direction:column;gap:6px;font-size:11.5px}
.sys-row{display:flex;justify-content:space-between;gap:10px;padding:3px 0;border-bottom:1px dashed var(--border)}
.sys-row:last-child{border:none}
.sys-row label{color:var(--text3)}
.sys-row span{font-family:var(--mono);color:var(--text2)}
.sys-ok{color:var(--down)!important}
.sys-bad{color:var(--up)!important}
.rpc-list{margin-top:6px;display:flex;flex-direction:column;gap:3px}
.rpc-item{display:flex;align-items:center;gap:6px;font-size:10.5px;font-family:var(--mono);color:var(--text3)}
.rpc-dot{width:6px;height:6px;border-radius:50%;background:var(--down);flex:none}
.rpc-dot.bad{background:var(--up)}
.rpc-dot.idle{background:var(--text3)}

/* ---------- 告警记录面板 ---------- */
.alert-toolbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--border);
}
.alert-list{display:flex;flex-direction:column;gap:8px;max-height:60vh;overflow-y:auto}
.alert-list::-webkit-scrollbar{width:6px}
.alert-list::-webkit-scrollbar-thumb{background:var(--border2);border-radius:3px}
.alert-item{
  background:var(--bg2);border:1px solid var(--border);border-left:3px solid var(--border2);
  border-radius:8px;padding:10px 13px;
}
.alert-item.r3{border-left-color:var(--danger);background:rgba(255,77,79,.07)}
.alert-item.r2{border-left-color:var(--warn)}
.ai-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}
.ai-time{font-size:10.5px;color:var(--text3);font-family:var(--mono);margin-left:auto}
.ai-sum{font-size:12.5px;color:var(--text);margin-bottom:6px;line-height:1.55}
.ai-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--text3);font-family:var(--mono);margin-bottom:8px}
.ai-usd{color:var(--up);font-weight:600}
.ai-actions{display:flex;gap:7px;flex-wrap:wrap}
.ai-actions .btn-mini{text-decoration:none;display:inline-block}

/* 事件流中被定位并高亮的项 */
.evt-focus{
  border-color:var(--info)!important;
  box-shadow:0 0 0 2px rgba(59,130,246,.45),0 0 18px rgba(59,130,246,.25);
  animation:focusFlash 1s ease 3;
}
@keyframes focusFlash{0%,100%{background:var(--bg2)}50%{background:rgba(59,130,246,.14)}}

/* ---------- 弹窗 ---------- */
.modal{
  position:fixed;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;z-index:200;padding:20px;
  animation:fadeIn .16s ease;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.modal-box{
  background:var(--panel);border:1px solid var(--border2);border-radius:13px;
  padding:22px 24px;width:100%;max-width:400px;
  max-height:88vh;overflow-y:auto;
  animation:boxIn .2s cubic-bezier(.2,.8,.3,1);
}
.modal-box.wide{max-width:560px}
@keyframes boxIn{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
.modal-box h3{font-size:16px;margin-bottom:15px}
.modal-box h4{
  font-size:12px;color:var(--text3);text-transform:uppercase;letter-spacing:.7px;
  margin:17px 0 9px;padding-bottom:5px;border-bottom:1px solid var(--border);
}
.modal-box label{display:block;font-size:11.5px;color:var(--text2);margin:10px 0 4px}
.modal-box input[type=text],.modal-box input[type=number],.modal-box select{
  width:100%;background:var(--bg2);border:1px solid var(--border2);color:var(--text);
  padding:8px 11px;border-radius:7px;font-size:13px;
}
.modal-box input[type=range]{width:100%;accent-color:var(--info)}
.modal-box input:focus,.modal-box select:focus{outline:none;border-color:var(--info)}
.tiny{font-size:10.5px;color:var(--text3);margin-top:5px;line-height:1.5}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chkline{display:flex!important;align-items:center;gap:7px;font-size:12.5px;color:var(--text2);margin:7px 0!important}
.chkline input{width:auto!important;accent-color:var(--info)}
.modal-actions{display:flex;justify-content:flex-end;gap:9px;margin-top:22px}

.foot{
  margin-top:26px;padding-top:14px;border-top:1px solid var(--border);
  font-size:11px;color:var(--text3);text-align:center;line-height:1.7;
}