:root {
  --bg: #0d1117;
  --bg-2: #141b24;
  --bg-3: #1b242f;
  --line: #243040;
  --fg: #e6edf3;
  --fg-2: #9aa7b4;
  --fg-3: #64748b;
  --up: #3fb950;
  --down: #f85149;
  --warn: #d29922;
  --accent: #58a6ff;
  --accent-2: #a371f7;
  --flash-up: rgba(63, 185, 80, .22);
  --flash-down: rgba(248, 81, 73, .22);
  /* nền cho chỉ số vượt ngưỡng + hàng được tô màu */
  --alert-bg: rgba(248, 81, 73, .16);
  --alert-bg-hot: rgba(248, 81, 73, .42);
  --alert-line: rgba(248, 81, 73, .38);
  --alert-row: rgba(248, 81, 73, .06);
  --alert-row-hover: rgba(248, 81, 73, .14);
  --good-row: rgba(63, 185, 80, .07);
  --good-row-hover: rgba(63, 185, 80, .15);
  --hot-bg: rgba(210, 153, 34, .10);
  --hot-line: rgba(210, 153, 34, .55);
}
:root[data-theme="light"] {
  --bg: #f6f8fa; --bg-2: #ffffff; --bg-3: #eef2f6; --line: #d5dce4;
  --fg: #10151b; --fg-2: #4a5665; --fg-3: #7b8794;
  --up: #1a7f37; --down: #cf222e; --warn: #9a6700; --accent: #0969da; --accent-2: #8250df;
  --flash-up: rgba(26,127,55,.16); --flash-down: rgba(207,34,46,.16);
  --alert-bg: rgba(207,34,46,.12); --alert-bg-hot: rgba(207,34,46,.34);
  --alert-line: rgba(207,34,46,.34); --alert-row: rgba(207,34,46,.05);
  --alert-row-hover: rgba(207,34,46,.12);
  --good-row: rgba(26,127,55,.07); --good-row-hover: rgba(26,127,55,.14);
  --hot-bg: rgba(154,103,0,.09); --hot-line: rgba(154,103,0,.45);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg); color: var(--fg); min-height: 100vh;
  font: 13px/1.45 ui-sans-serif, -apple-system, "SF Pro Text", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; font-weight: 650; }
button, input, select {
  font: inherit; color: var(--fg); background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 7px; padding: 6px 11px;
}
button { cursor: pointer; }
button:hover { border-color: var(--accent); }
button.ghost { background: transparent; }
.muted { color: var(--fg-2); }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

/* ---------------------------------------------------------------- header */
.top {
  position: sticky; top: 0; z-index: 30; display: flex; flex-wrap: wrap;
  gap: 12px 20px; align-items: center; justify-content: space-between;
  padding: 10px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 9px; }
.brand h1 { font-size: 15px; letter-spacing: .2px; }
/* Tên ứng dụng là đường về trang chủ — phải trông bấm được. */
.home-link {
  display: flex; align-items: center; gap: 9px;
  color: inherit; text-decoration: none; border-radius: 7px;
  padding: 2px 6px; margin: -2px -6px;
}
.home-link:hover { background: var(--bg-3); }
.home-link:hover h1 { color: var(--accent); }
.home-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.tag { font-size: 11px; color: var(--fg-2); }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--fg-3); flex: none; }
.dot.on { background: var(--up); box-shadow: 0 0 0 3px rgba(63,185,80,.16); }
.dot.off { background: var(--down); }
.stats { display: flex; gap: 16px; flex-wrap: wrap; font-size: 11.5px; color: var(--fg-2); }
.stats b { color: var(--fg); font-variant-numeric: tabular-nums; font-weight: 600; }
.actions { display: flex; gap: 8px; align-items: center; }
.actions input { width: 170px; }

/* Dải tin chạy ngang kiểu bảng điện tử.
   overflow HIDDEN (không phải auto): dải tự trôi nên không cần thanh cuộn,
   và phần bản sao thứ hai phải bị che đi chứ không được cuộn tới. */
.ticker-strip {
  overflow: hidden; padding: 6px 0; background: var(--bg);
  border-bottom: 1px solid var(--line); min-height: 30px;
  position: relative; --ticker-fade: 42px;
  /* Mờ dần hai mép để tin không bị "cụt" đột ngột ở rìa màn hình. */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ticker-fade),
                      #000 calc(100% - var(--ticker-fade)), transparent 100%);
          mask-image: linear-gradient(to right, transparent 0, #000 var(--ticker-fade),
                      #000 calc(100% - var(--ticker-fade)), transparent 100%);
}
.ticker-track {
  display: flex; gap: 8px; width: max-content;
  animation: ticker-run 60s linear infinite;
}
/* Trượt đúng 50%: track chứa hai bản danh sách giống hệt nhau, nên khi bản
   một trôi hết thì bản hai đã nằm đúng chỗ xuất phát -> vòng lặp liền mạch. */
@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* Dừng khi rê chuột để còn kịp đọc và bấm vào tin. */
.ticker-strip:hover .ticker-track { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .ticker-track { animation: none; }
  .ticker-strip { overflow-x: auto; scrollbar-width: thin; }
}

.ticker-strip .ev {
  flex: none; font-size: 11px; padding: 3px 9px; border-radius: 20px;
  background: var(--bg-3); border: 1px solid var(--line); white-space: nowrap;
  color: var(--fg); text-decoration: none;
}
a.ev:hover { border-color: var(--accent); color: var(--accent); }
.ticker-strip .ev.liq-long { border-color: rgba(248,81,73,.5); }
.ticker-strip .ev.liq-short { border-color: rgba(63,185,80,.5); }
.ticker-strip .ev.ann { border-color: var(--accent); }
.ticker-strip .ev.news { border-color: rgba(163,113,247,.45); }

/* Tin QUAN TRỌNG (niêm yết, hack, mở khoá, thanh lý lớn…): nền vàng đặc để
   nổi hẳn khỏi dòng tin thường đang trôi qua. */
.ticker-strip .ev.hot {
  background: var(--warn); border-color: var(--warn); color: #1a1200;
  font-weight: 650;
}
:root[data-theme="light"] .ticker-strip .ev.hot { color: #fff; }

/* ----------------------------------------------------------------- table */
main { padding: 0 0 40px; }
.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; min-width: 1450px; }
thead th {
  position: sticky; top: 0; z-index: 10; background: var(--bg-2);
  border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap;
  padding: 8px 10px; font-size: 11px; font-weight: 600; color: var(--fg-2);
  cursor: pointer; user-select: none;
}
thead th:first-child, thead th.l { text-align: left; }
thead th:hover { color: var(--fg); }
thead th.sorted { color: var(--accent); }
thead th .arrow { font-size: 9px; opacity: .8; }
tbody td {
  padding: 6px 10px; text-align: right; white-space: nowrap;
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
tbody td.l { text-align: left; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--bg-2); }
tbody tr.sel { background: var(--bg-3); box-shadow: inset 3px 0 0 var(--accent); }

td.flash-up { animation: fu .9s ease-out; }
td.flash-down { animation: fd .9s ease-out; }
@keyframes fu { from { background: var(--flash-up); } to { background: transparent; } }
@keyframes fd { from { background: var(--flash-down); } to { background: transparent; } }

.sym { display: flex; align-items: center; gap: 8px; }
.sym img { width: 18px; height: 18px; border-radius: 50%; background: var(--bg-3); }
.sym .code { font-weight: 650; }
.sym .nm { color: var(--fg-3); font-size: 11px; max-width: 130px; overflow: hidden;
           text-overflow: ellipsis; }
.up { color: var(--up); } .down { color: var(--down); } .warn { color: var(--warn); }
.badge {
  display: inline-block; padding: 1px 6px; border-radius: 5px; font-size: 10px;
  border: 1px solid var(--line); color: var(--fg-2);
}
/* Rủi ro cao là thứ phải đập vào mắt: tô nền đỏ đặc chứ không chỉ đổi màu chữ. */
.badge.cao { color: #fff; background: var(--down); border-color: var(--down);
             font-weight: 650; }
.badge.cao.hot { animation: alert-blink 1.1s ease-in-out infinite; }
.badge.tb { color: var(--warn); border-color: rgba(210,153,34,.45); }
.badge.thap { color: var(--up); border-color: rgba(63,185,80,.4); }
.badge.new { color: var(--accent-2); border-color: rgba(163,113,247,.45); }
.badge.good { color: #fff; background: var(--up); border-color: var(--up);
              font-weight: 650; letter-spacing: .3px; }

/* Icon coin tiềm năng. Dùng ký tự ★ chứ không phải emoji: emoji mỗi hệ điều
   hành vẽ một kiểu và ở cỡ 11px thường bệt thành một cục màu. */
.gem {
  color: var(--up); font-size: 13px; line-height: 1; cursor: help;
  text-shadow: 0 0 8px rgba(63,185,80,.45);
}

/* ------------------------------------------------- chú thích cho từng cột
   Tự vẽ thay vì dùng thuộc tính title: title đợi ~1 giây mới hiện, không
   xuống dòng, và bị cắt cụt với câu dài như mấy dòng giải thích ở đây. */
thead th.has-help { position: relative; }
thead th.has-help::after {
  content: "?"; display: inline-block; margin-left: 4px;
  width: 12px; height: 12px; line-height: 12px; text-align: center;
  border-radius: 50%; font-size: 9px; font-weight: 700;
  background: var(--bg-3); color: var(--fg-3); border: 1px solid var(--line);
  vertical-align: middle;
}
thead th.has-help:hover::after { background: var(--accent); color: #fff;
                                 border-color: var(--accent); }
.coltip {
  display: none; position: absolute; z-index: 60; top: calc(100% + 6px); left: 0;
  width: 290px; padding: 9px 11px; text-align: left; white-space: normal;
  font-size: 11.5px; font-weight: 400; line-height: 1.5; color: var(--fg-2);
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,.45); cursor: default;
}
thead th.has-help:hover .coltip { display: block; }
.coltip b { display: block; color: var(--fg); font-size: 12px; margin-bottom: 3px; }
.coltip i { display: block; margin-top: 6px; font-style: normal; font-size: 10.5px;
            color: var(--fg-3); }
/* Cột cuối bảng: bung tooltip sang trái để không tràn khỏi màn hình. */
thead th.has-help:nth-last-child(-n+4) .coltip { left: auto; right: 0; }
.flagcount { color: var(--down); font-weight: 650; }

/* ------------------------------------------------------- cảnh báo & tiềm năng
   .alert  : chỉ số vượt ngưỡng nguy hiểm — chữ đỏ trên nền đỏ nhạt.
   .hot    : mức nặng nhất — nhấp nháy.
   Nhấp nháy chỉ đổi độ mờ nền, KHÔNG chớp tắt cả chữ: chớp tắt chữ thì lúc
   người dùng nhìn vào đúng nhịp tắt sẽ không đọc được số. */
.alert {
  color: var(--down); font-weight: 650;
  background: var(--alert-bg); border-radius: 5px; padding: 1px 5px;
  box-shadow: inset 0 0 0 1px var(--alert-line);
}
.alert.hot { animation: alert-blink 1.1s ease-in-out infinite; }
@keyframes alert-blink {
  0%, 100% { background: var(--alert-bg); }
  50%      { background: var(--alert-bg-hot); }
}
@media (prefers-reduced-motion: reduce) {
  .alert.hot, .badge.cao.hot,
  tbody tr.row-risk-hot td:first-child { animation: none; }
  /* Tắt nhấp nháy thì phải giữ lại độ tương phản, không thì mất luôn cảnh báo. */
  .alert.hot { background: var(--alert-bg-hot); }
}

/* Vạch màu đầu hàng: nhìn lướt cả bảng là thấy ngay coin nào đỏ, coin nào xanh. */
tbody tr.row-risk td:first-child { box-shadow: inset 3px 0 0 var(--down); }
tbody tr.row-risk-hot td:first-child { animation: edge-blink 1.1s ease-in-out infinite; }
tbody tr.row-good td:first-child { box-shadow: inset 3px 0 0 var(--up); }
tbody tr.row-good { background: var(--good-row); }
tbody tr.row-risk-hot { background: var(--alert-row); }
/* Hàng đã tô màu vẫn phải phản hồi khi rê chuột: nếu không, đúng những hàng
   đáng chú ý nhất lại là những hàng bấm vào mà không thấy gì nhúc nhích. */
tbody tr.row-good:hover { background: var(--good-row-hover); }
tbody tr.row-risk-hot:hover { background: var(--alert-row-hover); }
@keyframes edge-blink {
  0%, 100% { box-shadow: inset 3px 0 0 var(--down); }
  50%      { box-shadow: inset 3px 0 0 rgba(248,81,73,.25); }
}
h3.danger { color: var(--down); }
.score { font-weight: 650; }
.bar { display: inline-block; height: 4px; border-radius: 2px; background: var(--accent);
       vertical-align: middle; margin-left: 6px; }
.dim { color: var(--fg-3); }
.livedot { display:inline-block; width:6px; height:6px; border-radius:50%;
           background: var(--up); margin-right: 5px; vertical-align: middle; }
.livedot.stale { background: var(--fg-3); }
.empty { padding: 40px 16px; color: var(--fg-2); text-align: center; }

/* =================================================== MÀN HÌNH RIÊNG CỦA COIN */
.coin { animation: slidein .18s ease-out; }
@keyframes slidein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
body.on-coin .hide-filters #search,
body.on-coin .hide-filters #risk-filter { display: none; }

.coin-head {
  position: sticky; top: 47px; z-index: 20;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 11px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line);
}
.coin-head #c-logo { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-3); }
.coin-id h2 { font-size: 18px; }
.coin-id .muted { font-size: 11.5px; }
.coin-px { margin-left: auto; text-align: right; }
.coin-px .px { font-size: 22px; font-weight: 680; line-height: 1.1; }
.coin-px .px.flash-up { animation: fu .9s ease-out; }
.coin-px .px.flash-down { animation: fd .9s ease-out; }
.moves { display: flex; gap: 6px; margin-top: 5px; flex-wrap: wrap; justify-content: flex-end; }
.mv {
  display: inline-flex; flex-direction: column; align-items: center; min-width: 52px;
  padding: 3px 7px; border: 1px solid var(--line); border-radius: 7px;
  background: var(--bg-3); font-variant-numeric: tabular-nums;
}
.mv .mk { font-size: 9.5px; color: var(--fg-3); letter-spacing: .4px; }
.mv .mvv { font-size: 12px; font-weight: 620; }
.mv.up .mvv { color: var(--up); } .mv.down .mvv { color: var(--down); }
.mv.on { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(88,166,255,.25); }
.coin-actions { display: flex; align-items: center; gap: 8px; }
.feed-state { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--fg-2); }
.feed-state .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fg-3); }
.feed-state.live .dot { background: var(--up); box-shadow: 0 0 0 3px rgba(63,185,80,.16); }
.feed-state.busy .dot { background: var(--warn); animation: blink 1s infinite; }
.feed-state.bad .dot { background: var(--down); }
@keyframes blink { 50% { opacity: .25; } }

.coin-body {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: 16px; padding: 16px; align-items: start;
}
.col-main, .col-side { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.col-side { position: sticky; top: 118px; }
.col-side .chart-panel { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.col-side .tv-host { height: 300px; min-height: 0; }
.side-body { max-height: 62vh; overflow-y: auto; padding-right: 4px; }

/* --------------------------------------------------- thẻ "vì sao tăng/giảm" */
.why {
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
  padding: 14px 16px;
}
.why-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.why-head h3 { font-size: 16px; }
.why-dir {
  font-size: 11px; font-weight: 700; letter-spacing: .5px; padding: 3px 9px;
  border-radius: 6px; background: var(--bg-3); border: 1px solid var(--line);
  color: var(--fg-2); white-space: nowrap;
}
.why-dir.up { color: var(--up); border-color: rgba(63,185,80,.45); }
.why-dir.down { color: var(--down); border-color: rgba(248,81,73,.45); }
.why-verdict { margin: 9px 0 12px; font-size: 13.5px; line-height: 1.5; }
.conf { display: flex; align-items: center; gap: 10px; font-size: 11px; }
.conf .ctrack { flex: 1; height: 7px; background: var(--bg-3); border-radius: 4px;
                overflow: hidden; min-width: 90px; }
.conf .cfill { height: 100%; background: var(--fg-3); transition: width .3s; }
.conf .cfill.good { background: var(--up); }
.conf .cfill.mid { background: var(--warn); }
.conf .cfill.low { background: var(--fg-3); }
.conf b { font-variant-numeric: tabular-nums; white-space: nowrap; }
.why-lines { margin: 12px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.6;
             color: var(--fg); }
.why-lines li { margin-bottom: 4px; }
.why-sub { margin: 14px 0 7px; font-size: 11px; text-transform: uppercase;
           letter-spacing: .6px; color: var(--fg-2); }
.drivers { display: flex; flex-direction: column; gap: 7px; }
.driver { display: flex; gap: 10px; background: var(--bg-3); border: 1px solid var(--line);
          border-radius: 8px; padding: 7px 10px; }
.driver .dw { width: 4px; border-radius: 3px; background: var(--line); flex: none;
              display: flex; align-items: flex-end; }
.driver .dwf { width: 100%; background: var(--fg-3); border-radius: 3px; }
.driver.up .dwf { background: var(--up); }
.driver.down .dwf { background: var(--down); }
.driver .dbody { min-width: 0; flex: 1; }
.dtop { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 10.5px;
        color: var(--fg-2); margin-bottom: 2px; }
.dkind { font-weight: 620; color: var(--fg); }
.dtext { font-size: 12.5px; line-height: 1.45; display: block; }
.dtext.plain { color: var(--fg-2); }
.dsrc { font-size: 10.5px; margin-top: 2px; }
.badge.warn-b { color: var(--warn); border-color: rgba(210,153,34,.45); }
.badge.off { color: var(--accent); border-color: rgba(88,166,255,.5); }
.why-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
             gap: 8px; margin-top: 13px; }
.ws-cell { background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
           padding: 6px 9px; }
.ws-cell .k { font-size: 10px; color: var(--fg-2); }
.ws-cell .v { font-size: 14px; font-weight: 620; font-variant-numeric: tabular-nums; }
.evchips { margin-top: 10px; }

/* ------------------------------------------------------------ dòng tin */
.feed-wrap { background: var(--bg-2); border: 1px solid var(--line); border-radius: 12px;
             padding: 12px 14px 16px; }
.feed-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.feed-bar h3 { font-size: 13px; }
.feed-bar .dim { font-size: 10.5px; margin-left: auto; }
.feed-bar .dim.pulse { animation: pulse 1.1s ease-out; }
@keyframes pulse { from { color: var(--accent); } to { color: var(--fg-3); } }
.feed { display: flex; flex-direction: column; gap: 9px; }
.na { border: 1px solid var(--line); border-left-width: 3px; border-radius: 0 9px 9px 0;
      background: var(--bg-3); padding: 9px 12px; }
.na.pos { border-left-color: var(--up); }
.na.neg { border-left-color: var(--down); }
.na.neu { border-left-color: var(--line); }
.na.fresh { animation: freshin 1.4s ease-out; }

/* Tin QUAN TRỌNG: niêm yết, hack, mở khoá, gọi vốn, thông báo chính chủ…
   Nền vàng nhạt + viền vàng để lướt mắt qua là thấy ngay, mà vẫn giữ được
   viền trái xanh/đỏ cho biết tin tốt hay xấu. */
.na.hot {
  background: var(--hot-bg); border-color: var(--hot-line);
  box-shadow: 0 0 0 1px var(--hot-line) inset;
}
.na.hot .na-title { color: var(--fg); }
.badge.hot-b {
  color: #1a1200; background: var(--warn); border-color: var(--warn);
  font-weight: 700; letter-spacing: .2px;
}
:root[data-theme="light"] .badge.hot-b { color: #fff; }
@keyframes freshin { from { background: rgba(88,166,255,.20); transform: translateY(-3px); }
                     to { background: var(--bg-3); transform: none; } }
.na-top { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 10.5px;
          color: var(--fg-3); margin-bottom: 4px; }
.na-src { color: var(--fg-2); font-weight: 600; }
.na-title { font-size: 13.5px; font-weight: 600; line-height: 1.4; text-decoration: none;
            display: block; }
.na-title:hover { text-decoration: underline; }
.na-sum { font-size: 11.5px; color: var(--fg-2); margin-top: 4px; line-height: 1.5;
          display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
          overflow: hidden; }
.na-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 7px; align-items: center; }
.tone { font-size: 10px; padding: 1px 7px; border-radius: 20px; border: 1px solid var(--line); }
.tone.pos { color: var(--up); border-color: rgba(63,185,80,.4); }
.tone.neg { color: var(--down); border-color: rgba(248,81,73,.45); }
.tone.neu { color: var(--fg-3); }
.na-tags .pill { margin: 0; font-size: 10px; padding: 1px 7px; }

@media (max-width: 1100px) {
  .coin-body { grid-template-columns: 1fr; }
  .col-side { position: static; }
  .side-body { max-height: none; }
}

/* ---------------------------------------------------- biểu đồ TradingView */
.chart-panel { border-bottom: 1px solid var(--line); flex: none; }
.chart-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 7px 16px; background: var(--bg-2);
}
.seg { display: flex; border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.seg button {
  border: 0; border-radius: 0; background: transparent; padding: 3px 9px;
  font-size: 11px; color: var(--fg-2); border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--fg); background: var(--bg-3); }
.seg button.on { background: var(--accent); color: #fff; }
.chart-sym { font-size: 11px; color: var(--fg-3); margin-left: auto;
             font-variant-numeric: tabular-nums; }
button.tiny { padding: 2px 8px; font-size: 11px; }
.tv-host { height: 46vh; min-height: 260px; background: var(--bg); }
.tv-host iframe { display: block; border: 0; }
.chart-panel.collapsed .tv-host { display: none; }
.tv-fallback { padding: 22px 16px; color: var(--fg-2); font-size: 12px; text-align: center; }

.sec { margin-bottom: 20px; }
.sec > h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .6px;
            color: var(--fg-2); margin-bottom: 8px; }
.kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr)); gap: 8px; }
.kv .cell { background: var(--bg-3); border: 1px solid var(--line); border-radius: 8px;
            padding: 7px 9px; }
.kv .cell .k { font-size: 10.5px; color: var(--fg-2); }
.kv .cell .v { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.buckets { display: flex; flex-direction: column; gap: 5px; }
.brow { display: grid; grid-template-columns: 92px 1fr 42px; align-items: center; gap: 8px;
        font-size: 11.5px; }
.brow .track { height: 7px; background: var(--bg-3); border-radius: 4px; overflow: hidden; }
.brow .fill { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent-2)); }
.flags { display: flex; flex-direction: column; gap: 6px; }
.flag { border-left: 3px solid var(--line); padding: 5px 9px; background: var(--bg-3);
        border-radius: 0 6px 6px 0; font-size: 11.5px; }
/* Cờ nghiêm trọng: nền đỏ + chữ đỏ, không để lẫn với cờ nhắc nhở thông thường. */
.flag.high { border-left-color: var(--down); background: var(--alert-bg);
             color: var(--down); font-weight: 600; }
.flag.high .code { color: var(--down); }
.flag.medium { border-left-color: var(--warn); }
.flag.info { border-left-color: var(--accent); }
.flag .code { font-weight: 650; margin-right: 6px; }
table.mini { width: 100%; min-width: 0; font-size: 11.5px; }
table.mini th { position: static; background: transparent; padding: 4px 6px; }
table.mini td { padding: 4px 6px; }
.note { font-size: 11px; color: var(--fg-3); margin-top: 6px; }
.spark { display: block; width: 100%; height: 46px; }
.pill { display:inline-block; padding:2px 8px; border-radius:20px; background:var(--bg-3);
        border:1px solid var(--line); font-size:11px; margin:0 4px 4px 0; }
.loading { color: var(--fg-2); font-size: 12px; }
a { color: var(--accent); }

footer { padding: 14px 16px 30px; color: var(--fg-3); font-size: 11px;
         border-top: 1px solid var(--line); }

@media (max-width: 900px) {
  .stats { order: 3; width: 100%; }
  .actions input { width: 120px; }
}