:root {
  --bg: #060b16; --bg2: #0a1222; --panel: #0c1526; --panel2: #101b30; --line: #1a2740; --line2: #23344f;
  --text: #e6edf6; --muted: #8b9bb4; --dim: #5b6b85; --blue: #2563eb; --blue2: #3b82f6; --blue-soft: rgba(37,99,235,.16);
  --gold: #f5b942; --gold-soft: rgba(245,185,66,.14); --green: #22c55e; --green-soft: rgba(34,197,94,.14);
  --red: #ef4444; --red-soft: rgba(239,68,68,.14); --amber: #f59e0b; --amber-soft: rgba(245,158,11,.15); --purple: #a855f7;
  --radius: 10px; --sidebar: 200px; --right: 410px; --top: 64px;
  --font: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", "Cascadia Mono", Consolas, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text); font: 13.5px/1.45 var(--font); }
a { color: var(--blue2); text-decoration: none; } a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 9px; height: 9px; } ::-webkit-scrollbar-thumb { background: #1d2a42; border-radius: 6px; } ::-webkit-scrollbar-track { background: transparent; }
.num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); }
.muted { color: var(--muted); } .dim { color: var(--dim); } .green { color: var(--green); } .red { color: var(--red); } .gold { color: var(--gold); } .amber { color: var(--amber); } .blue { color: var(--blue2); }
.hidden { display: none !important; }

/* ---------------- shell ---------------- */
.app { display: grid; grid-template-columns: var(--sidebar) 1fr var(--right); grid-template-rows: var(--top) 1fr; height: 100vh; }
.topbar { grid-column: 1 / 4; display: flex; align-items: center; gap: 0; background: var(--bg2); border-bottom: 1px solid var(--line); min-width: 0; }
.brand { width: var(--sidebar); display: flex; align-items: center; gap: 10px; padding: 0 16px; border-right: 1px solid var(--line); height: 100%; flex: none; }
.brand svg { flex: none; } .brand b { display: block; font-size: 15px; letter-spacing: -.2px; white-space: nowrap; } .brand span { display: block; font-size: 10.5px; color: var(--muted); white-space: nowrap; }
.tb-cell { display: flex; flex-direction: column; justify-content: center; padding: 0 18px; height: 100%; border-right: 1px solid var(--line); min-width: 0; white-space: nowrap; }
.tb-cell small { color: var(--muted); font-size: 11px; } .tb-cell b { font-size: 14px; }
.tb-price { flex-direction: row; align-items: center; gap: 12px; } .tb-price b, .tb-price small { display: block; }
.tb-price .px { font-size: 22px; font-weight: 700; letter-spacing: -.5px; } .tb-price .chg { font-size: 12.5px; }
.tb-spacer { flex: 1; }
.tb-select { background: var(--panel); border: 1px solid var(--line2); border-radius: 8px; padding: 6px 8px; max-width: 220px; }
.dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--dim); margin-right: 6px; }
.dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); } .dot.off { background: var(--red); } .dot.warn { background: var(--amber); }
.iconbtn { background: none; border: 0; padding: 0 16px; height: 100%; cursor: pointer; color: var(--muted); position: relative; display: flex; align-items: center; }
.iconbtn:hover { color: var(--text); } .iconbtn .count { position: absolute; top: 14px; right: 9px; background: var(--red); color: #fff; font-size: 10px; border-radius: 9px; padding: 0 5px; min-width: 16px; text-align: center; }
.sidebar { background: var(--bg2); border-right: 1px solid var(--line); display: flex; flex-direction: column; padding: 14px 10px; gap: 2px; overflow-y: auto; }
.nav { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 8px; color: var(--text); cursor: pointer; border: 0; background: none; text-align: left; width: 100%; opacity: .86; }
.nav:hover { background: var(--panel); opacity: 1; text-decoration: none; } .nav.active { background: var(--blue); opacity: 1; box-shadow: 0 6px 16px rgba(37,99,235,.25); }
.nav svg { flex: none; opacity: .9; }
.sidebar .foot { margin-top: auto; padding: 14px 8px 4px; color: var(--muted); font-size: 11.5px; } .sidebar .foot b { color: var(--text); font-size: 12.5px; }
.main { overflow-y: auto; padding: 16px 18px 40px; min-width: 0; }
.right { border-left: 1px solid var(--line); background: var(--bg2); overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 14px; }

/* ---------------- building blocks ---------------- */
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; min-width: 0; }
.panel h3 { margin: 0 0 10px; font-size: 15px; display: flex; align-items: center; gap: 8px; } .panel h3 .grow { flex: 1; }
.panel h4 { margin: 14px 0 8px; font-size: 13px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .4px; }
.sub { color: var(--muted); font-size: 12.5px; margin: -6px 0 10px; }
.grid { display: grid; gap: 14px; } .g2 { grid-template-columns: repeat(2, minmax(0,1fr)); } .g3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.g4 { grid-template-columns: repeat(4, minmax(0,1fr)); } .g6 { grid-template-columns: repeat(6, minmax(0,1fr)); } .g7 { grid-template-columns: repeat(7, minmax(0,1fr)); } .g8 { grid-template-columns: repeat(8, minmax(0,1fr)); }
.g-chart { grid-template-columns: minmax(0, 1fr) 320px; }
.mt { margin-top: 14px; } .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .row.between { justify-content: space-between; } .grow { flex: 1; }
.kpi { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px 14px; min-width: 0; }
.kpi small { color: var(--muted); font-size: 11.5px; display: block; } .kpi b { font-size: 19px; display: block; margin: 3px 0 1px; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi span { font-size: 12px; color: var(--muted); display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.g7 .kpi { padding: 10px 11px; } .g7 .kpi b { font-size: 16px; white-space: normal; line-height: 1.2; overflow-wrap: anywhere; }
.g7 .kpi span { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.btn { background: var(--panel2); border: 1px solid var(--line2); border-radius: 8px; padding: 7px 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.btn:hover { border-color: var(--blue2); } .btn.primary { background: var(--blue); border-color: var(--blue); color: #fff; } .btn.primary:hover { background: var(--blue2); }
.btn.gold { background: var(--gold); border-color: var(--gold); color: #1a1205; font-weight: 600; } .btn.sm { padding: 4px 9px; font-size: 12px; } .btn:disabled { opacity: .5; cursor: default; }
.btn.danger { border-color: rgba(239,68,68,.5); color: #fca5a5; }
input[type=text], input[type=number], input[type=password], input[type=time], input[type=search], select, textarea {
  background: var(--bg2); border: 1px solid var(--line2); border-radius: 7px; padding: 6px 9px; color: var(--text); min-width: 0; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--blue2); }
label.f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); } label.f > * { color: var(--text); }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; letter-spacing: .3px; border: 1px solid transparent; white-space: nowrap; }
.b-green { background: var(--green-soft); color: #4ade80; border-color: rgba(34,197,94,.35); } .b-red { background: var(--red-soft); color: #f87171; border-color: rgba(239,68,68,.35); }
.b-amber { background: var(--amber-soft); color: #fbbf24; border-color: rgba(245,158,11,.4); } .b-blue { background: var(--blue-soft); color: #93c5fd; border-color: rgba(59,130,246,.35); }
.b-gray { background: #18233a; color: var(--muted); border-color: var(--line2); } .b-gold { background: var(--gold-soft); color: var(--gold); border-color: rgba(245,185,66,.4); }
.b-purple { background: rgba(168,85,247,.15); color: #c084fc; border-color: rgba(168,85,247,.35); }
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; overflow-x: auto; }
.tab { padding: 10px 16px; border: 0; background: none; color: var(--muted); cursor: pointer; border-bottom: 2px solid transparent; display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.tab:hover { color: var(--text); } .tab.active { color: var(--text); border-bottom-color: var(--blue2); background: linear-gradient(to top, rgba(37,99,235,.12), transparent); }
.pills { display: flex; gap: 6px; background: var(--bg2); padding: 4px; border-radius: 9px; border: 1px solid var(--line); }
.pill { flex: 1; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--line2); background: var(--panel); color: var(--muted); cursor: pointer; text-align: center; white-space: nowrap; }
.pill.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.seg { display: inline-flex; border: 1px solid var(--line2); border-radius: 8px; overflow: hidden; } .seg button { border: 0; background: var(--panel); padding: 5px 11px; cursor: pointer; color: var(--muted); }
.seg button.active { background: var(--blue); color: #fff; }
.toggle { position: relative; display: inline-block; vertical-align: middle; width: 52px; height: 26px; flex: none; cursor: pointer; } .toggle input { display: none; }
.toggle span { position: absolute; inset: 0; background: #1d2a42; border-radius: 26px; transition: .2s; border: 1px solid var(--line2); }
.toggle span::after { content: "OFF"; position: absolute; right: 7px; top: 4px; font-size: 10px; color: var(--muted); font-weight: 700; }
.toggle span::before { content: ""; position: absolute; width: 20px; height: 20px; left: 3px; top: 2px; background: #fff; border-radius: 50%; transition: .2s; }
.toggle input:checked + span { background: var(--blue); border-color: var(--blue); } .toggle input:checked + span::before { transform: translateX(25px); }
.toggle input:checked + span::after { content: "ON"; left: 8px; right: auto; color: #fff; }
.toggle.small { width: 40px; height: 22px; } .toggle.small span::after { display: none; } .toggle.small span::before { width: 16px; height: 16px; } .toggle.small input:checked + span::before { transform: translateX(18px); }
table.t { width: 100%; border-collapse: collapse; font-size: 12.8px; } table.t th { text-align: left; color: var(--muted); font-weight: 500; padding: 7px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; position: sticky; top: 0; background: var(--panel); }
table.t td { padding: 7px 8px; border-bottom: 1px solid #142035; vertical-align: top; } table.t tr:hover td { background: rgba(37,99,235,.05); } table.t td.r, table.t th.r { text-align: right; }
.tablewrap { overflow: auto; max-height: 520px; border-radius: 8px; }
.empty { color: var(--muted); padding: 18px; text-align: center; border: 1px dashed var(--line2); border-radius: 9px; }
.note { border-left: 3px solid var(--gold); background: rgba(245,185,66,.06); padding: 9px 12px; border-radius: 0 8px 8px 0; color: #d6c39a; font-size: 12.5px; }
.note.blue { border-left-color: var(--blue2); background: var(--blue-soft); color: #bfd5ff; }
.note a { color: inherit; word-break: break-all; }
.remote-url { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 6px 0 12px; font-size: 17px; font-weight: 700; }
.remote-url a { color: var(--gold); word-break: break-all; }
.fgbar { display: block; height: 6px; border-radius: 3px; background: linear-gradient(90deg, #ef4444, #f5b942 50%, #22c55e); opacity: .35; position: relative; }
.fgbar i { display: block; height: 100%; border-right: 2px solid #fff; box-sizing: border-box; }
.remote-code { font-size: 26px; font-weight: 800; letter-spacing: 2px; color: var(--gold); margin: 6px 0; }
.bar { height: 7px; background: #172238; border-radius: 6px; overflow: hidden; position: relative; } .bar i { position: absolute; top: 0; bottom: 0; left: 0; border-radius: 6px; }
.split { display: flex; height: 22px; border-radius: 6px; overflow: hidden; font-size: 11.5px; font-weight: 700; }
.split div { display: flex; align-items: center; justify-content: center; white-space: nowrap; overflow: hidden; }
.kv { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; font-size: 12.8px; } .kv dt { color: var(--muted); } .kv dd { margin: 0; text-align: right; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 3px 9px; border-radius: 14px; border: 1px solid var(--line2); background: var(--panel2); font-size: 12px; cursor: pointer; color: var(--muted); user-select: none; }
.chip.on { border-color: var(--blue2); color: var(--text); background: var(--blue-soft); }
.list > * + * { border-top: 1px solid #142035; } .li { padding: 9px 2px; display: flex; gap: 10px; align-items: flex-start; }
.li .t { font-weight: 600; } .li .m { color: var(--muted); font-size: 12px; }
details summary { cursor: pointer; color: var(--muted); } details[open] summary { margin-bottom: 8px; }

/* ---------------- chart ---------------- */
.chartbox { position: relative; display: grid; grid-template-columns: 38px 1fr; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); overflow: hidden; }
.chart-tools { border-right: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; padding: 8px 0; gap: 4px; background: var(--bg2); }
.chart-tools button { width: 28px; height: 28px; border: 0; background: none; color: var(--muted); border-radius: 6px; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chart-tools button:hover { background: var(--panel2); color: var(--text); } .chart-tools button.active { background: var(--blue-soft); color: #93c5fd; }
.chart-head { display: flex; align-items: center; gap: 12px; padding: 10px 14px 0; flex-wrap: wrap; font-size: 12.5px; }
.chart-head b { font-size: 14px; } .chart-ohlc span { margin-right: 8px; }
.chart-canvas { height: clamp(560px, calc(100vh - 250px), 900px); position: relative; } .chart-canvas.tall { height: clamp(620px, calc(100vh - 200px), 980px); }
.chartbox.full { position: fixed; inset: 0; z-index: 60; border-radius: 0; } .chartbox.full .chart-canvas { height: calc(100vh - 92px); }
.chart-foot { display: flex; align-items: center; gap: 14px; padding: 8px 14px; border-top: 1px solid var(--line); flex-wrap: wrap; }
.legend { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.legend .lg { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; } .legend .lg.off { opacity: .4; }
.legend i.line { width: 16px; height: 2px; display: inline-block; } .legend i.box { width: 14px; height: 9px; display: inline-block; border-radius: 2px; }
.tfbar { margin-left: auto; display: flex; gap: 3px; } .tfbar button { border: 1px solid var(--line2); background: var(--panel2); color: var(--muted); border-radius: 6px; padding: 3px 9px; cursor: pointer; font-size: 12px; }
.tfbar button.active { background: var(--blue); color: #fff; border-color: var(--blue); }
.chart-tip { position: absolute; z-index: 5; pointer-events: none; background: rgba(10,18,34,.95); border: 1px solid var(--line2); border-radius: 8px; padding: 8px 10px; font-size: 12px; max-width: 360px; display: none; }

/* ---------------- right panel ---------------- */
.rp-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px 14px; }
.rp-title { display: flex; align-items: center; gap: 9px; font-size: 16px; font-weight: 700; margin-bottom: 11px; } .rp-title .grow { flex: 1; }
.sig { border: 1px solid var(--blue); border-radius: 10px; padding: 12px; background: linear-gradient(180deg, rgba(37,99,235,.08), transparent); margin-top: 10px; }
.sig.sell { border-color: rgba(239,68,68,.6); background: linear-gradient(180deg, rgba(239,68,68,.07), transparent); }
.sig .hd { display: flex; align-items: center; gap: 8px; } .sig .hd b { font-size: 15px; } .sig .sub2 { color: var(--muted); font-size: 12px; margin: 2px 0 8px; }
.sig .body { display: grid; grid-template-columns: 1fr auto; gap: 12px; } .sig ul { list-style: none; margin: 0; padding: 0; } .sig li { display: flex; gap: 7px; align-items: flex-start; font-size: 12.5px; margin: 4px 0; }
.ck { width: 15px; height: 15px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; margin-top: 2px; }
.ck.ok { background: var(--green); color: #052e14; } .ck.no { background: var(--red); color: #fff; } .ck.na { background: #334155; color: #cbd5e1; }
.lv { display: grid; grid-template-columns: auto auto; gap: 3px 12px; font-size: 12.5px; align-content: start; } .lv span { color: var(--muted); }
.filter-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; } .filter-row + .filter-row { border-top: 1px solid #142035; }
.filter-row .ic { width: 30px; height: 30px; border-radius: 8px; background: var(--panel2); display: flex; align-items: center; justify-content: center; color: var(--muted); flex: none; }
.filter-row .tx { flex: 1; min-width: 0; } .filter-row .tx b { display: block; font-size: 13px; } .filter-row .tx small { color: var(--muted); font-size: 11.5px; }
.news-item { display: flex; gap: 10px; padding: 9px 0; } .news-item + .news-item { border-top: 1px solid #142035; }
.news-item .flag { width: 22px; height: 22px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.news-item .tt { font-size: 12.8px; line-height: 1.35; } .news-item .badge { align-self: flex-start; } .news-item .mm { color: var(--muted); font-size: 11.5px; margin-top: 2px; }

/* ---------------- plan cards & misc ---------------- */
.plan { border-radius: 10px; padding: 12px 13px; border: 1px solid var(--line2); background: var(--panel2); }
.plan.a.bull { border-color: rgba(34,197,94,.55); } .plan.a.bear { border-color: rgba(239,68,68,.55); }
.plan .ph { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .plan .ph b { font-size: 13.5px; } .plan p { margin: 0; font-size: 12.8px; color: #cbd5e1; }
.tfm td .arrow { font-weight: 800; } .catbar { display: grid; grid-template-columns: 150px 1fr 48px; gap: 10px; align-items: center; font-size: 12.5px; margin: 5px 0; }
.dbar { height: 9px; background: #172238; border-radius: 5px; position: relative; } .dbar::after { content: ""; position: absolute; left: 50%; top: -2px; bottom: -2px; width: 1px; background: var(--line2); }
.dbar i { position: absolute; top: 0; bottom: 0; border-radius: 5px; }
.zone-row { display: grid; grid-template-columns: 74px 1fr auto; gap: 8px; align-items: center; padding: 7px 0; } .zone-row + .zone-row { border-top: 1px solid #142035; }
.ladder { position: relative; height: 420px; border-left: 1px solid var(--line2); margin-left: 70px; }
.ladder .lz { position: absolute; left: 6px; right: 0; border-radius: 4px; font-size: 11px; padding: 0 6px; display: flex; align-items: center; overflow: hidden; white-space: nowrap; }
.ladder .lp { position: absolute; left: -70px; width: 64px; text-align: right; font-size: 11px; color: var(--muted); transform: translateY(-50%); }
.ladder .now { position: absolute; left: -4px; right: 0; height: 0; border-top: 2px dashed var(--gold); }
.footprint { font-family: var(--mono); font-size: 11.5px; } .footprint .fr { display: grid; grid-template-columns: 70px 1fr 1fr; gap: 6px; align-items: center; height: 17px; }
.footprint .fb { height: 11px; border-radius: 2px; } .footprint .fr.imb-b { background: rgba(34,197,94,.07); } .footprint .fr.imb-s { background: rgba(239,68,68,.07); }
.matrix td, .matrix th { text-align: center !important; } .matrix td:first-child, .matrix th:first-child { text-align: left !important; }

/* ---------------- toasts & modal ---------------- */
.toasts { position: fixed; right: 18px; bottom: 18px; z-index: 50; display: flex; flex-direction: column; gap: 8px; width: 380px; max-width: calc(100vw - 36px); }
.toast { background: #0f1a2e; border: 1px solid var(--line2); border-left: 4px solid var(--blue2); border-radius: 9px; padding: 10px 12px; box-shadow: 0 10px 30px rgba(0,0,0,.4); animation: tin .25s ease; cursor: pointer; }
.toast.success { border-left-color: var(--green); } .toast.warning { border-left-color: var(--amber); } .toast.error { border-left-color: var(--red); }
.toast b { display: block; font-size: 13px; } .toast div { color: var(--muted); font-size: 12px; white-space: pre-line; max-height: 90px; overflow: hidden; }
@keyframes tin { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }
.modal-bg { position: fixed; inset: 0; background: rgba(2,6,15,.72); z-index: 40; display: flex; align-items: flex-start; justify-content: center; padding: 50px 16px; overflow-y: auto; }
.modal { background: var(--panel); border: 1px solid var(--line2); border-radius: 12px; width: 920px; max-width: 100%; padding: 18px 20px; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
.modal h2 { margin: 0 0 4px; font-size: 18px; display: flex; align-items: center; gap: 10px; } .modal h2 .grow { flex: 1; }
.drawer { position: fixed; top: var(--top); right: 0; bottom: 0; width: 420px; max-width: 100vw; background: var(--bg2); border-left: 1px solid var(--line2); z-index: 30; overflow-y: auto; padding: 14px; box-shadow: -20px 0 50px rgba(0,0,0,.35); }
.spinner { width: 16px; height: 16px; border: 2px solid var(--line2); border-top-color: var(--blue2); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }
.progress { height: 6px; background: #172238; border-radius: 5px; overflow: hidden; } .progress i { display: block; height: 100%; background: var(--blue2); transition: width .3s; }
iframe.report { width: 100%; height: 76vh; border: 1px solid var(--line); border-radius: 10px; background: #060b16; }

/* ---------------- responsive ---------------- */
@media (max-width: 1500px) { :root { --right: 360px; } .g-chart { grid-template-columns: 1fr; } }
@media (max-width: 1250px) {
  .app { grid-template-columns: var(--sidebar) 1fr; } .right { grid-column: 2; grid-row: auto; border-left: 0; border-top: 1px solid var(--line); }
  .app { grid-template-rows: var(--top) auto; height: auto; min-height: 100vh; } .main { overflow: visible; } .sidebar { position: sticky; top: 0; height: calc(100vh - var(--top)); }
  .g6, .g7, .g8 { grid-template-columns: repeat(3, minmax(0,1fr)); } .g4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 860px) {
  :root { --sidebar: 0px; } .sidebar { display: none; } .app { grid-template-columns: 1fr; } .right { grid-column: 1; } .brand { width: auto; }
  .tb-hide { display: none; } .g2, .g3 { grid-template-columns: 1fr; } .g6, .g7, .g8 { grid-template-columns: repeat(2, minmax(0,1fr)); } .main { padding: 12px; }
  .mobile-nav { display: flex !important; } .chart-canvas { height: 440px; }
}
.mobile-nav { display: none; gap: 6px; overflow-x: auto; padding: 8px 12px; background: var(--bg2); border-bottom: 1px solid var(--line); grid-column: 1 / -1; }