/* HyperJournal live dashboard (Hyperbot-style) - section trong luồng /w/<addr>, full-bleed cân giữa */
body { overflow-x:hidden; }
#hjdash { --bg:#0a0e14; --card:#11161f; --card2:#0d1117; --bd:#1f2937; --bd2:#2a3340;
  --tx:#e6edf3; --mut:#8b98a9; --grn:#26d07c; --grnd:#1c7d52; --red:#ff5c6c; --blue:#3b82f6; --pur:#7c5cff;
  width:100vw; margin-left:calc(50% - 50vw); margin-bottom:6px;
  font-family:-apple-system,"Segoe UI",Roboto,system-ui,sans-serif; color:var(--tx); box-sizing:border-box; }
.hjd-inner { max-width:1180px; margin:0 auto; padding:4px 18px 2px; box-sizing:border-box; }
.hjd-h { font:700 15px/1.2 system-ui; text-transform:uppercase; letter-spacing:.05em; color:var(--mut); margin:2px 2px 13px; }
#hjdash *, #hjdash *::before, #hjdash *::after { box-sizing:border-box; }
#hjdash a { color:var(--grn); }

/* ---- top stat cards ---- */
.hjd-cards { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:12px; }
.hjd-card { background:var(--card); border:1px solid var(--bd); border-radius:16px; padding:16px 18px; min-height:108px; position:relative; display:flex; justify-content:space-between; gap:10px; }
.hjd-card .lbl { font-size:12.5px; color:var(--mut); font-weight:600; margin-bottom:7px; }
.hjd-card .big { font-size:26px; font-weight:800; letter-spacing:-.02em; line-height:1.05; }
.hjd-card .sub { margin-top:9px; font-size:12px; color:var(--mut); }
.hjd-card .sub .row { display:flex; align-items:center; gap:6px; justify-content:space-between; padding:2px 0; }
.hjd-card .dot { width:8px; height:8px; border-radius:50%; flex:none; }
.hjd-card .cv { color:var(--tx); font-weight:600; }
.hjd-ringwrap { flex:none; width:74px; height:74px; align-self:center; }
.hjd-perf { display:grid; grid-template-columns:1fr 1fr; gap:4px 14px; align-content:center; flex:1; }
.hjd-perf .k { font-size:11px; color:var(--mut); font-weight:600; }
.hjd-perf .v { font-size:19px; font-weight:800; letter-spacing:-.02em; }

/* ---- main row: side + chart ---- */
.hjd-main { display:grid; grid-template-columns:320px 1fr; gap:12px; align-items:stretch; }
.hjd-side { background:var(--card); border:1px solid var(--bd); border-radius:16px; padding:16px 18px; }
.hjd-side .sh { display:flex; justify-content:space-between; align-items:baseline; }
.hjd-side .sh b { font-size:13px; color:var(--mut); font-weight:600; }
.hjd-side .pill { font-size:11px; color:var(--mut); border:1px solid var(--bd2); border-radius:20px; padding:2px 9px; }
.hjd-side .num { font-size:23px; font-weight:800; letter-spacing:-.02em; margin:4px 0 2px; }
.hjd-sect { margin-top:18px; }
.hjd-sect .t { display:flex; justify-content:space-between; font-size:12px; color:var(--mut); font-weight:600; margin-bottom:7px; }
.hjd-sect .t .rt { color:var(--tx); }
.hjd-kv { display:flex; justify-content:space-between; font-size:12.5px; margin:5px 0; }
.hjd-kv .vk { color:var(--mut); }
.hjd-bar { height:6px; border-radius:6px; background:#1a212b; overflow:hidden; margin:5px 0 2px; }
.hjd-bar > i { display:block; height:100%; border-radius:6px; }
.hjd-divider { height:1px; background:var(--bd); margin:16px 0; }

/* ---- chart ---- */
.hjd-chart-wrap { background:var(--card); border:1px solid var(--bd); border-radius:16px; padding:14px 16px 10px; display:flex; flex-direction:column; min-width:0; }
.hjd-chead { display:flex; align-items:flex-start; justify-content:space-between; gap:10px; flex-wrap:wrap; }
.hjd-chead .ttl { font-size:13px; color:var(--mut); font-weight:600; }
.hjd-chead .pnl { font-size:25px; font-weight:800; letter-spacing:-.02em; margin-top:2px; }
.hjd-ctrls { display:flex; gap:7px; flex-wrap:wrap; }
.hjd-sel { position:relative; }
.hjd-sel select { -webkit-appearance:none; appearance:none; background:#141a23; color:var(--tx); border:1px solid var(--bd2); border-radius:9px; padding:6px 26px 6px 11px; font:600 12px system-ui; cursor:pointer; outline:none; }
.hjd-sel::after { content:"▾"; position:absolute; right:9px; top:50%; transform:translateY(-50%); color:var(--mut); font-size:10px; pointer-events:none; }
.hjd-canvas { position:relative; flex:1; min-height:300px; margin-top:8px; }
.hjd-canvas .lwchart { position:absolute; inset:0; }
.hjd-wm { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; gap:9px; pointer-events:none; opacity:.10; z-index:1; }
.hjd-wm img { width:34px; height:34px; border-radius:50%; }
.hjd-wm span { font-size:26px; font-weight:800; letter-spacing:.02em; }

/* ---- danmaku ---- */
.hjd-dm-layer { position:absolute; inset:0; overflow:hidden; pointer-events:none; z-index:3; }
.hjd-dm { position:absolute; white-space:nowrap; font:700 14px system-ui; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,.85); padding:2px 4px; will-change:transform; }
@keyframes hjd-fly { from { transform:translateX(0); } to { transform:translateX(var(--dx)); } }
.hjd-dmbar { display:flex; align-items:center; gap:9px; margin-top:9px; }
.hjd-toggle { flex:none; display:inline-flex; align-items:center; gap:7px; cursor:pointer; user-select:none; }
.hjd-sw { width:38px; height:21px; border-radius:21px; background:#2a3340; position:relative; transition:background .15s; flex:none; }
.hjd-sw > i { position:absolute; top:2px; left:2px; width:17px; height:17px; border-radius:50%; background:#fff; transition:left .15s; }
.hjd-toggle.on .hjd-sw { background:var(--grn); }
.hjd-toggle.on .hjd-sw > i { left:19px; }
.hjd-toggle .tl { font-size:11px; font-weight:700; color:var(--mut); }
.hjd-toggle.on .tl { color:var(--grn); }
.hjd-dmform { flex:1; display:flex; align-items:center; gap:8px; background:#0c1118; border:1px solid var(--bd2); border-radius:24px; padding:5px 6px 5px 15px; }
.hjd-dmform input { flex:1; background:none; border:0; outline:none; color:var(--tx); font:500 13px system-ui; min-width:0; }
.hjd-dmform input::placeholder { color:#5b6675; }
.hjd-dmform button { flex:none; width:34px; height:34px; border-radius:50%; border:0; background:linear-gradient(135deg,var(--grn),#17a2c4); color:#04140c; font-size:15px; cursor:pointer; display:grid; place-items:center; }
.hjd-dmform button:disabled { opacity:.45; cursor:default; }
.hjd-dmhint { font-size:10.5px; color:#5b6675; margin:3px 0 2px 54px; }

/* ---- positions strip ---- */
.hjd-pos { display:flex; gap:8px; flex-wrap:wrap; margin-top:10px; }
.hjd-pos .p { background:#10161f; border:1px solid var(--bd2); border-radius:10px; padding:6px 11px; font:600 12px system-ui; display:flex; gap:8px; align-items:center; }
.hjd-pos .p .s-long { color:var(--grn); } .hjd-pos .p .s-short { color:var(--red); }
.hjd-empty { color:var(--mut); font-size:12.5px; padding:6px 0; }

#hjdash.loading { opacity:.5; }
#hjdash .hjd-err { color:var(--red); font-size:13px; padding:10px 0; }

@media (max-width:1080px){ .hjd-cards{ grid-template-columns:repeat(2,1fr);} .hjd-main{ grid-template-columns:1fr; } }
@media (max-width:560px){ .hjd-cards{ grid-template-columns:1fr;} .hjd-card .big{font-size:23px;} }