:root {
  /* v2.7 — AMOLED palette + vivid OLED green/red */
  --bg: #000000;
  --bg-2: #050505;
  --bg-3: #0d0d0d;
  --line: #1a1a1a;
  --fg: #f0f3f5;
  --fg-2: #9aa6b2;
  --fg-3: #5a6470;
  --green: #00e676;       /* OLED bright green */
  --red:   #ff1744;       /* OLED bright red */
  --amber: #ffab00;
  --blue:  #40c4ff;
  --purple:#ba68c8;
  --ok:    #00e676;
  --bad:   #ff1744;
  --pending: #ffab00;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100vh; background: var(--bg); color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, sans-serif;
  font-size: 13px; overflow: hidden; }
button { font: inherit; color: inherit; background: var(--bg-3);
  border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px;
  cursor: pointer; }
button:hover { background: #2a3441; }
button.primary { background: var(--blue); color: #0d1117; border-color: var(--blue); }
button.primary:hover { background: #6fd0ff; }
button.ghost { background: transparent; }
code { background: var(--bg-3); padding: 1px 5px; border-radius: 3px; font-size: 11px; }
.hidden { display: none !important; }
.ok { color: var(--ok); }
.bad { color: var(--bad); }
.amber { color: var(--amber); }

/* ── header ── */
.top { display: flex; align-items: center; gap: 14px; height: 44px;
  padding: 0 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.brand { display: flex; gap: 8px; align-items: center; font-weight: 600; letter-spacing: 0.2px; }
.brand .dot { width: 8px; height: 8px; background: var(--green); border-radius: 50%; box-shadow: 0 0 6px var(--green); }
.seg { display: flex; background: var(--bg-3); padding: 2px; border-radius: 6px; border: 1px solid var(--line); }
.seg button { padding: 4px 12px; font-size: 12px; border: none; background: transparent;
  border-radius: 4px; color: var(--fg-2); }
.seg button.active { background: var(--blue); color: #0d1117; font-weight: 600; }
.intervals { display: flex; gap: 4px; }
.intervals button { padding: 4px 9px; font-size: 12px; }
.intervals button.active { background: var(--blue); color: #0d1117; border-color: var(--blue); }
.actions { margin-left: auto; display: flex; gap: 10px; align-items: center; }
.conn { font-size: 12px; padding: 3px 8px; border-radius: 10px; }
.conn.pending { background: rgba(255,183,77,0.15); color: var(--pending); }
.conn.ok { background: rgba(76,175,80,0.15); color: var(--ok); }
.conn.bad { background: rgba(244,67,54,0.15); color: var(--bad); }
.risk-pill { font-size: 12px; padding: 3px 8px; border-radius: 10px; }
.risk-pill.muted { background: var(--bg-3); color: var(--fg-3); }
.risk-pill.ok { background: rgba(38,166,154,0.15); color: var(--green); }
.risk-pill.bad { background: rgba(239,83,80,0.15); color: var(--red); }
.liq-pill { font-size: 12px; padding: 3px 8px; border-radius: 10px;
  cursor: pointer; font-variant-numeric: tabular-nums; }
.liq-pill.muted { background: var(--bg-3); color: var(--fg-3); }
.liq-pill.low { background: rgba(154,166,178,0.15); color: var(--fg-2); }
.liq-pill.med { background: rgba(255,183,77,0.15); color: var(--amber); }
.liq-pill.high { background: rgba(239,83,80,0.18); color: var(--red); font-weight: 600; }
.liq-pill .liq-up   { color: var(--green); }
.liq-pill .liq-down { color: var(--red); }

.arm-counts { font-size: 11.5px; padding: 3px 8px; border-radius: 10px;
  background: var(--bg-3); border: 1px solid var(--line);
  font-variant-numeric: tabular-nums; display: inline-flex; gap: 6px; align-items: center; }
.arm-counts.hot { background: rgba(38,166,154,0.10); border-color: rgba(38,166,154,0.4); }
.arm-counts .ac-up    { color: var(--green); font-weight: 600; }
.arm-counts .ac-down  { color: var(--red);   font-weight: 600; }
.arm-counts .ac-ok    { color: var(--fg-2); }
.arm-counts .ac-bad   { color: var(--fg-3); }
.arm-counts .ac-amber { color: var(--amber); }

/* ── layouts ──
   v2.8: fluid columns via media queries so the dashboard fits any screen
   without horizontal scrolling, AND so the default zoom level is usable
   without the user resizing panes. */
.layout { height: calc(100vh - 44px); }
.layout-detail { display: grid; grid-template-columns: 280px 1fr 320px; }
.layout-grid { display: grid; grid-template-rows: minmax(280px, 45vh) 1fr;
  gap: 12px; padding: 12px; overflow: hidden; }
.layout-btc { display: grid; grid-template-columns: 1fr 280px; }

/* wide-ish laptops */
@media (max-width: 1400px) {
  .layout-detail { grid-template-columns: 240px 1fr 280px; }
  .layout-btc { grid-template-columns: 1fr 240px; }
  body { font-size: 12.5px; }
}

/* small laptops / external displays at low res */
@media (max-width: 1100px) {
  .layout-detail { grid-template-columns: 200px 1fr 240px; }
  .layout-btc { grid-template-columns: 1fr 220px; }
  body { font-size: 12px; }
  .sym-name, .mini-sym { font-size: 11px; }
  .sym-price, .mini-px { font-size: 11px; }
  .chart-header { padding: 6px 10px; }
  .info-panel .tabs button { font-size: 10.5px; padding: 6px 2px; }
  .top { gap: 10px; }
  .arm-counts, .liq-pill, .risk-pill { font-size: 11px; padding: 2px 6px; }
}

/* phone / very narrow — stack the sidebar as a horizontal scroll row
   above the main chart, and turn the right info panel into a drawer */
@media (max-width: 860px) {
  .layout-detail {
    grid-template-columns: 1fr;
    grid-template-rows: 100px 1fr;
  }
  .layout-detail > .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
  }
  .layout-detail > .sidebar .sym-list {
    flex-direction: row;
    flex-wrap: nowrap;
  }
  .layout-detail > .sidebar .sym-row {
    flex: 0 0 160px;
    grid-template-rows: 18px 38px 12px;
  }
  .layout-detail > .info-panel {
    position: fixed;
    top: 44px; right: 0; bottom: 0;
    width: min(360px, 80vw);
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.2s ease;
  }
  .layout-detail.info-open > .info-panel { transform: translateX(0); }
  .layout-btc { grid-template-columns: 1fr; grid-template-rows: 1fr 220px; }
  .layout-btc > .btc-info { border-left: none; border-top: 1px solid var(--line); }
}

/* ── sidebar (Detail view) — per-row live mini chart ── */
.sidebar { background: var(--bg-2); border-right: 1px solid var(--line);
  overflow-y: auto; padding: 8px 0; }
.sidebar-section { padding: 6px 10px 14px; }
.sidebar-title { font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--fg-3); margin: 4px 4px 8px; }

.sym-list { display: flex; flex-direction: column; gap: 4px; }

/* Each row is a 3-band block: head | live chart | foot.
   Tightened in v2.6 (20/38/14 = ~72 px content + padding ~84 px) so all 10
   coin rows fit a 1080p viewport without scrolling. */
.sym-row {
  display: grid;
  /* v3.0 sidebar diet — head 18 + spark 44 + foot 12 = 74 px + 4+4 pad = 82 px */
  grid-template-rows: 18px 44px 12px;
  gap: 1px;
  padding: 4px 8px 4px 9px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-left: 4px solid var(--fg-3);
  border-radius: 6px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.12s;
  line-height: 1;     /* don't let browser zoom inflate rows */
}
.sym-row .sym-head,
.sym-row .sym-foot,
.sym-row .sym-name,
.sym-row .sym-price,
.sym-row .sym-dist,
.sym-row .sym-atr,
.sym-row .sym-cvd { line-height: 1; }
.sym-row:hover { background: #232c39; }
.sym-row.active {
  background: rgba(79,195,247,0.08);
  outline: 1px solid var(--blue);
}

/* Status → left border color + faint background tint (stronger than v2.5) */
.sym-row.state-idle        { border-left-color: var(--fg-3); }
.sym-row.state-ready       { border-left-color: rgba(38,166,154,0.55); }
.sym-row.state-armed-long  { border-left-color: var(--green); background: rgba(38,166,154,0.10);
                              box-shadow: 0 0 8px rgba(38,166,154,0.20); }
.sym-row.state-armed-short { border-left-color: var(--red);   background: rgba(239,83,80,0.10);
                              box-shadow: 0 0 8px rgba(239,83,80,0.20); }
.sym-row.state-cooldown    { border-left-color: var(--amber); background: rgba(255,183,77,0.07); }
.sym-row.state-blocked     { border-left-color: var(--fg-3); opacity: 0.78; }

.sym-head { display: flex; align-items: center; gap: 6px; }
.sym-name { font-weight: 600; font-size: 12px; flex: 0 0 auto; }
.sym-state-dot { font-size: 11px; line-height: 1; color: var(--fg-3); }
.sym-row.state-ready       .sym-state-dot { color: rgba(38,166,154,0.7); }
.sym-row.state-armed-long  .sym-state-dot { color: var(--green); text-shadow: 0 0 6px var(--green); font-weight: bold; }
.sym-row.state-armed-short .sym-state-dot { color: var(--red);   text-shadow: 0 0 6px var(--red);   font-weight: bold; }
.sym-row.state-cooldown    .sym-state-dot { color: var(--amber); }
.sym-row.state-blocked     .sym-state-dot { color: var(--fg-3); }
.sym-price { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--fg); }
.row-chart { width: 100%; height: 100%; min-height: 44px; }
.sym-foot { display: flex; justify-content: space-between; font-size: 10px;
  color: var(--fg-2); font-variant-numeric: tabular-nums; }
.sym-dist { }
.sym-atr { color: var(--fg-3); }

/* ── chart area (Detail view) ── */
.chart-area { display: flex; flex-direction: column; background: var(--bg); min-width: 0; }
.chart-header { display: flex; justify-content: space-between; align-items: center;
  padding: 8px 14px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.chart-header.subtitle { padding: 4px 14px; background: var(--bg);
  border-top: 1px solid var(--line); border-bottom: none; color: var(--fg-3); font-size: 11px; }
.chart-symbol { font-weight: 600; font-size: 14px; }
.chart-meta { color: var(--fg-2); font-size: 12px; font-variant-numeric: tabular-nums; }
.chart { flex: 1; min-height: 0; }
.atr { height: 130px; border-top: 1px solid var(--line); }

/* ── info panel (Detail view right column) ── */
.info-panel { background: var(--bg-2); border-left: 1px solid var(--line);
  display: flex; flex-direction: column; min-width: 0; }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: none; background: transparent; border-radius: 0;
  padding: 8px 4px; color: var(--fg-3); font-size: 11.5px; letter-spacing: 0.3px; }
.tabs button.active { color: var(--blue); border-bottom: 2px solid var(--blue); }
.tab-body { flex: 1; overflow-y: auto; padding: 12px 14px; font-size: 12px; line-height: 1.6; }
.tab-section { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line); }
.tab-section:last-child { border-bottom: none; }
.tab-section h4 { margin: 0 0 8px; font-size: 11px; text-transform: uppercase;
  letter-spacing: 0.8px; color: var(--fg-3); font-weight: 600; }
.tab-section p.hint { font-size: 11px; color: var(--fg-3); margin: 4px 0; }
.kv { display: flex; justify-content: space-between; padding: 2.5px 0; font-variant-numeric: tabular-nums; }
.kv span { color: var(--fg-2); }
.kv strong { color: var(--fg); font-weight: 500; }
.kv strong.ok { color: var(--green); }
.kv strong.bad { color: var(--red); }

/* mini-table inside tabs */
.mini-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 6px;
  font-variant-numeric: tabular-nums; }
.mini-table th { text-align: left; padding: 4px 6px; color: var(--fg-3);
  border-bottom: 1px solid var(--line); font-weight: 500; }
.mini-table td { padding: 4px 6px; border-bottom: 1px solid #1a2029; }
.mini-table td.ok { color: var(--green); }
.mini-table td.bad { color: var(--red); }

/* gauges */
.gauge { margin: 6px 0; }
.gauge-bar { width: 100%; height: 8px; background: var(--bg); border-radius: 4px;
  border: 1px solid var(--line); overflow: hidden; }
.gauge-fill { height: 100%; background: var(--blue); transition: width 0.4s; }
.gauge-fill.ok { background: var(--green); }
.gauge-fill.bad { background: var(--red); }
.gauge-meta { font-size: 11px; color: var(--fg-2); margin-top: 3px;
  font-variant-numeric: tabular-nums; }

/* ── Grid view ── */
.layout-grid > .grid-btc { min-height: 0; }
.grid-btc { display: flex; flex-direction: column;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  overflow: hidden; }
.grid-btc-head { display: flex; justify-content: space-between; align-items: center;
  padding: 6px 12px; background: var(--bg-3); border-bottom: 1px solid var(--line);
  font-size: 12px; }
.grid-btc-head .hint { font-size: 11px; color: var(--fg-3); }
.grid-btc-chart { flex: 1; min-height: 0; }

/* Grid of mini-cards: 5 columns × 2 rows for 10 alts at standard widths;
   gracefully reflows on narrow viewports. */
.grid-minis { display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px; min-height: 0; overflow: hidden; }
@media (max-width: 1280px) {
  .grid-minis { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 980px) {
  .grid-minis { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .grid-minis { grid-template-columns: repeat(2, 1fr); }
}

.mini-card {
  display: grid;
  grid-template-rows: 22px 1fr 18px;
  gap: 3px;
  padding: 6px 8px 6px 9px;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-left: 4px solid var(--fg-3);
  border-radius: 7px;
  cursor: pointer;
  min-height: 0;
  transition: border-color 0.15s, background 0.12s, transform 0.08s;
}
.mini-card:hover { background: #1c232e; transform: translateY(-1px); }

/* Same state classes as sym-row — single visual language */
.mini-card.state-idle        { border-left-color: var(--fg-3); }
.mini-card.state-ready       { border-left-color: rgba(38,166,154,0.55); }
.mini-card.state-armed-long  { border-left-color: var(--green); background: rgba(38,166,154,0.08);
                                box-shadow: 0 0 10px rgba(38,166,154,0.35); }
.mini-card.state-armed-short { border-left-color: var(--red);   background: rgba(239,83,80,0.08);
                                box-shadow: 0 0 10px rgba(239,83,80,0.35); }
.mini-card.state-cooldown    { border-left-color: var(--amber); background: rgba(255,183,77,0.06); opacity: 0.9; }
.mini-card.state-blocked     { border-left-color: var(--fg-3); opacity: 0.78; }

.mini-head { display: flex; align-items: center; gap: 6px; }
.mini-sym { font-weight: 600; font-size: 12px; }
.mini-state-dot { font-size: 11px; line-height: 1; color: var(--fg-3); }
.mini-card.state-ready       .mini-state-dot { color: rgba(38,166,154,0.7); }
.mini-card.state-armed-long  .mini-state-dot { color: var(--green); text-shadow: 0 0 6px var(--green); font-weight: bold; }
.mini-card.state-armed-short .mini-state-dot { color: var(--red);   text-shadow: 0 0 6px var(--red);   font-weight: bold; }
.mini-card.state-cooldown    .mini-state-dot { color: var(--amber); }
.mini-px { margin-left: auto; font-size: 12px; font-variant-numeric: tabular-nums; }
.mini-chart { width: 100%; height: 100%; min-height: 0; }
.mini-foot { display: flex; justify-content: space-between; font-size: 10.5px;
  color: var(--fg); font-variant-numeric: tabular-nums; }
.mini-foot .mini-band { color: var(--fg-2); }

/* ── BTC view ── */
.btc-charts { display: flex; flex-direction: column; background: var(--bg);
  overflow-y: auto; }
.pane-label { padding: 4px 12px; font-size: 10.5px; color: var(--fg-3);
  text-transform: uppercase; letter-spacing: 0.6px; background: var(--bg-2);
  border-bottom: 1px solid var(--line); border-top: 1px solid var(--line); }
.pane { width: 100%; }
.pane-tall { height: 50vh; min-height: 320px; }
.pane-short { height: 22vh; min-height: 140px; }
/* Liquidations pane in BTC view */
.pane-liq { height: 30vh; min-height: 180px; overflow-y: auto;
  background: var(--bg); border-top: 1px solid var(--line); padding: 0; }
.liq-empty { padding: 16px; color: var(--fg-3); font-size: 12px; text-align: center; }
.liq-list { list-style: none; margin: 0; padding: 0; font-size: 11.5px;
  font-variant-numeric: tabular-nums; }
.liq-list li { display: grid;
  grid-template-columns: 70px 90px 1fr 90px 90px;
  gap: 6px; padding: 4px 12px; border-bottom: 1px solid #1a2029; }
.liq-list li:first-child { animation: liq-flash 1s ease-out; }
.liq-list .liq-sym { font-weight: 600; }
.liq-list .liq-side-BUY { color: var(--green); }
.liq-list .liq-side-SELL { color: var(--red); }
.liq-list .liq-usd { text-align: right; color: var(--fg); }
.liq-list .liq-time { color: var(--fg-3); }
@keyframes liq-flash {
  from { background: rgba(255,183,77,0.25); }
  to   { background: transparent; }
}

/* CVD chip in sidebar row foot */
.sym-cvd { font-variant-numeric: tabular-nums; }
.sym-cvd.buy  { color: var(--green); }
.sym-cvd.sell { color: var(--red); }
.sym-cvd.flat { color: var(--fg-3); }

.btc-info { background: var(--bg-2); border-left: 1px solid var(--line);
  padding: 12px 14px; overflow-y: auto; }
.btc-info h3 { font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--fg-3); margin: 0 0 10px; font-weight: 600; }
.btc-info-body { display: flex; flex-direction: column; gap: 4px; font-variant-numeric: tabular-nums; }
.kv-row { display: flex; justify-content: space-between; padding: 4px 0;
  border-bottom: 1px solid #1a2029; font-size: 12px; }
.kv-row span { color: var(--fg-2); }
.kv-row strong { color: var(--fg); font-weight: 500; }
.kv-row strong.ok { color: var(--green); }
.kv-row strong.bad { color: var(--red); }

/* ── drawer ── */
.scrim { position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 90; }
.drawer { position: fixed; top: 0; right: 0; height: 100vh; width: 380px;
  background: var(--bg-2); border-left: 1px solid var(--line); z-index: 100;
  display: flex; flex-direction: column;
  transform: translateX(0); transition: transform 0.2s ease; }
.drawer.hidden { transform: translateX(100%); }
.drawer-head { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 16px; border-bottom: 1px solid var(--line); }
.drawer-head h3 { margin: 0; font-size: 14px; font-weight: 600; }
.drawer-head button { background: transparent; border: none; font-size: 22px;
  color: var(--fg-2); line-height: 1; padding: 0 6px; }
.drawer-body { flex: 1; overflow-y: auto; padding: 12px 16px; }
.drawer-foot { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 16px;
  border-top: 1px solid var(--line); }
.field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.field label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--fg-3); display: flex; justify-content: space-between; }
.field label .hint { text-transform: none; letter-spacing: 0; color: var(--fg-3); font-size: 11px; }
.field input[type=number], .field input[type=text] { background: var(--bg-3);
  border: 1px solid var(--line); color: var(--fg); padding: 6px 8px;
  border-radius: 5px; font: inherit; font-variant-numeric: tabular-nums; }
.field input[type=checkbox] { transform: scale(1.1); margin-right: 6px; }
.field .toggle { display: flex; align-items: center; }
.section-divider { font-size: 10px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--fg-3); margin: 6px 0 10px; padding-bottom: 4px; border-bottom: 1px solid var(--line); }
.per-coin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.per-coin-row { display: flex; align-items: center; gap: 6px; font-size: 11px;
  text-transform: none; letter-spacing: 0; color: var(--fg-2); }
.per-coin-row input { flex: 1; padding: 3px 6px !important; font-size: 11px !important; }

/* ── v2.7 — coin icons + price-flash + armed pulse + market bias tint ── */

.sym-icon { display: inline-block; vertical-align: middle; border-radius: 50%;
  flex: 0 0 auto; object-fit: contain; background: transparent; }
.sym-head .sym-icon { margin-right: 5px; }
.mini-head .sym-icon { margin-right: 6px; }
.btc-info-logo { display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 16px;
  color: var(--fg); font-weight: 600; }
.btc-info-logo .btc-logo { width: 28px; height: 28px; }

/* Tick flash on price text — quick green/red wash that fades */
.sym-price, .mini-px, .sym-picker-price {
  transition: background-color 0.35s ease,
              color 0.35s ease,
              text-shadow 0.35s ease;
  padding: 0 4px; border-radius: 3px;
}
.tick-up   { background: rgba(0,230,118,0.22); color: var(--green) !important;
             text-shadow: 0 0 6px rgba(0,230,118,0.5); }
.tick-down { background: rgba(255,23,68,0.22); color: var(--red) !important;
             text-shadow: 0 0 6px rgba(255,23,68,0.5); }

/* 24h change pill inside the picker bar (mobile) — fills the dead space
   between symbol name and price. */
.sym-picker-change {
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--bg-3);
  color: var(--fg-3);
  margin-left: 8px;
  letter-spacing: 0.02em;
}
.sym-picker-change.ok  { background: rgba(0,230,118,0.13); color: var(--green); }
.sym-picker-change.bad { background: rgba(255,23,68,0.13); color: var(--red); }
.sym-picker-change:empty { display: none; }

/* Armed-state pulse — calm 1.4s pulse on the left border + glow */
@keyframes pulse-armed-long {
  0%, 100% { box-shadow: 0 0 6px rgba(0,230,118,0.25); border-left-color: var(--green); }
  50%      { box-shadow: 0 0 14px rgba(0,230,118,0.55); border-left-color: #4dffa8; }
}
@keyframes pulse-armed-short {
  0%, 100% { box-shadow: 0 0 6px rgba(255,23,68,0.25); border-left-color: var(--red); }
  50%      { box-shadow: 0 0 14px rgba(255,23,68,0.55); border-left-color: #ff5775; }
}
.sym-row.state-armed-long,
.mini-card.state-armed-long  { animation: pulse-armed-long 1.4s ease-in-out infinite; }
.sym-row.state-armed-short,
.mini-card.state-armed-short { animation: pulse-armed-short 1.4s ease-in-out infinite; }

/* Market-bias tint — full viewport very faint background.
   The body gets `data-bias="bull"` / "bear" / "neutral" from app.js. */
body { position: relative; }
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: -1;
  transition: background-color 0.8s ease;
  background-color: transparent;
}
body[data-bias="bull"]::before { background-color: rgba(0,230,118,0.025); }
body[data-bias="bear"]::before { background-color: rgba(255,23,68,0.025); }

/* ── v3.0 — dedicated volume pane below the candle chart ── */
.vol-pane { width: 100%; height: 80px;
  border-top: 1px solid var(--line); }
.vol-pane-grid { height: 70px; }   /* inside Grid view's BTC big block */
.vol-pane-btc  { height: 100px; }  /* a bit taller inside BTC view */

/* ── v3.0 — Strategy cards (collapsible <details>) ── */
.strat-card { background: var(--bg-3); border: 1px solid var(--line);
  border-radius: 6px; margin-bottom: 10px; overflow: hidden; }
.strat-card[open] { border-color: rgba(64,196,255,0.2); }
.strat-card > summary {
  list-style: none;
  cursor: pointer;
  padding: 7px 10px;
  display: flex; align-items: center; gap: 8px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  user-select: none;
  font-size: 12px;
  font-weight: 600;
  color: var(--fg);
}
.strat-card > summary::-webkit-details-marker { display: none; }
.strat-card .strat-title { flex: 1; text-transform: uppercase; letter-spacing: 0.6px;
  color: var(--fg-3); font-weight: 600; font-size: 10.5px; }
.strat-card .strat-pill { font-size: 10px; padding: 1.5px 6px; border-radius: 8px;
  background: var(--bg); border: 1px solid var(--line); }
.strat-card .strat-pill .ok    { color: var(--green); }
.strat-card .strat-pill .bad   { color: var(--red); }
.strat-card .strat-pill .amber { color: var(--amber); }
.strat-card .strat-chevron { color: var(--fg-3); transition: transform 0.15s ease; font-size: 12px; }
.strat-card:not([open]) .strat-chevron { transform: rotate(-90deg); }
.strat-card .strat-body { padding: 8px 12px;
  display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px;
  font-variant-numeric: tabular-nums; font-size: 12px; }
.strat-card .strat-body .kv { display: contents; }
.strat-card .strat-body .kv > span { color: var(--fg-2); white-space: nowrap; }
.strat-card .strat-body .kv > strong { color: var(--fg); text-align: right; font-weight: 500; }

/* Squeeze the tab-body padding a notch since cards already have their own */
.tab-body { padding: 10px 12px; }

/* ============================================================
   MOBILE / TOUCH ENHANCEMENTS  (added for iPad · Android · iPhone)
   ============================================================ */

/* Prevent tap highlight & accidental text selection on interactive cards */
.sym-row, .mini-card, .tabs button, .seg button, .intervals button,
.strat-card > summary {
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Active-state feedback for touch devices (replaces hover) */
@media (hover: none) {
  .sym-row:active            { background: #232c39; }
  .mini-card:active          { background: #1c232e; transform: translateY(-1px); }
  .seg button:active         { background: rgba(64,196,255,0.18); }
  .intervals button:active   { background: rgba(64,196,255,0.18); }
  .tabs button:active        { color: var(--blue); }
}

/* ── iPad / large tablet (769 – 1024 px) ─────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  body { font-size: 12.5px; }

  /* Two-column: persistent sidebar (200px) + full chart area.
     Info panel lives OUTSIDE the grid — slides in from right on demand. */
  .layout-detail {
    grid-template-columns: 200px 1fr;
    grid-template-rows: 1fr;
  }
  .layout-detail > .sidebar {
    overflow-y: auto;
    overflow-x: hidden;
    border-right: 1px solid var(--line);
    border-bottom: none;
  }
  .layout-detail > .info-panel {
    position: fixed;
    top: 44px; right: 0; bottom: 0;
    width: 300px;
    z-index: 50;
    border-left: 1px solid var(--line);
    transform: translateX(100%);
    transition: transform 0.25s ease;
    -webkit-overflow-scrolling: touch;
  }
  .layout-detail.info-open > .info-panel { transform: translateX(0); }

  /* Scrim behind the info panel when open */
  .info-scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.35);
    z-index: 48;
  }

  /* Info-toggle button: visible in the chart header on tablet */
  .info-toggle-btn { display: inline-flex !important; }

  /* BTC view: single column, info panel below */
  .layout-btc {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .layout-btc > .btc-info {
    border-left: none;
    border-top: 1px solid var(--line);
    max-height: 35vh;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }

  /* Compact header */
  .top { gap: 8px; padding: 0 12px; }
  .intervals button { padding: 6px 10px; font-size: 12px; }
  .tabs button { padding: 11px 4px; font-size: 12px; }
  .sym-row { grid-template-rows: 20px 52px 14px; padding: 7px 9px 7px 10px; }

  /* BTC pane heights for tablet */
  .pane-tall  { height: 46vw; min-height: 300px; }
  .pane-short { height: 22vw; min-height: 140px; }
  .pane-liq   { height: 28vw; min-height: 180px; }
}

/* ── iPhone / phone (≤ 768 px) ───────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Header: 2-row compact — row 1: brand + actions, row 2: interval buttons
     View switcher moves to bottom nav → hide from header.
     CRITICAL: padding-top must include safe-area-inset-top so the brand row
     doesn't sit under the iOS status bar (viewport-fit=cover lets the page
     extend edge-to-edge by design). */
  .top {
    height: auto;
    min-height: 44px;
    flex-wrap: wrap;
    padding: calc(5px + env(safe-area-inset-top, 0px)) 10px 5px;
    gap: 4px 8px;
    /* Solid background up to the top edge so iOS status-bar text remains
       readable over our dark bg. */
    background: var(--bg-2);
  }
  .top .seg    { display: none; }            /* replaced by bottom nav */
  .brand       { flex: 0 0 auto; order: 1; }
  .actions     { flex: 0 0 auto; order: 2; margin-left: auto; gap: 5px; }
  .intervals   { order: 3; width: 100%; display: flex; gap: 3px; padding-bottom: 2px; }
  .intervals button { flex: 1; padding: 9px 2px; font-size: 11.5px; text-align: center; min-height: 38px; }
  button { min-height: 36px; }
  .tabs button { padding: 12px 4px; font-size: 12px; min-height: 44px; }

  /* Layout height: subtract header (~84px 2-row) + bottom-nav (56px) */
  .layout {
    height: calc(100vh - 84px - 56px);
    height: calc(100dvh - 84px - 56px);
  }

  /* Detail: horizontal-scroll sidebar strip on top, chart below */
  .layout-detail {
    grid-template-columns: 1fr;
    grid-template-rows: 100px 1fr;
  }
  .layout-detail > .sidebar {
    border-right: none;
    border-bottom: 1px solid var(--line);
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
  }
  .layout-detail > .sidebar .sym-list {
    flex-direction: row;
    flex-wrap: nowrap;
    padding: 5px 10px;
    gap: 7px;
    height: 100%;
    align-items: center;
  }
  .layout-detail > .sidebar .sym-row {
    flex: 0 0 155px;
    grid-template-rows: 18px 46px 13px;
    padding: 6px 8px 6px 9px;
  }

  /* Info panel: full-height slide-in from right */
  .layout-detail > .info-panel {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    width: min(340px, 88vw);
    z-index: 50;
    transform: translateX(100%);
    transition: transform 0.22s ease;
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .layout-detail.info-open > .info-panel { transform: translateX(0); }

  /* Info FAB — positioned above the bottom nav, iOS-style */
  .info-fab {
    position: fixed;
    bottom: calc(72px + env(safe-area-inset-bottom, 0px));
    right: 14px;
    z-index: 45;
    width: 52px; height: 52px;
    border-radius: 50%;
    background: var(--blue);
    color: #0a0c12;
    border: none;
    font-size: 22px;
    font-weight: 600;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 22px rgba(64, 196, 255, 0.32),
                0 2px 6px  rgba(0, 0, 0, 0.4);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    transition: transform 0.16s cubic-bezier(.2,.7,.3,1.2), background 0.18s, box-shadow 0.18s;
  }
  .info-fab:active {
    transform: scale(0.9);
    background: #6fd0ff;
    box-shadow: 0 4px 12px rgba(64, 196, 255, 0.28);
  }
  .info-fab.panel-open {
    background: #2a3242;
    color: #e7eaf0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
  }

  .info-scrim {
    display: none;
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.42);
    z-index: 48;
  }

  /* Other element tweaks */
  .tab-body { -webkit-overflow-scrolling: touch; }
  .sym-row { grid-template-rows: 20px 50px 14px; padding: 7px 9px 7px 10px; }
  .sym-name, .mini-sym { font-size: 13px; }
  .sym-price, .mini-px { font-size: 13px; }
  .row-chart { min-height: 50px; }
  .mini-card { padding: 7px 9px 7px 10px; }
  .drawer { width: 100vw; max-width: 100%; }
  .drawer-head button { min-width: 44px; min-height: 44px; font-size: 26px; }

  /* BTC view: single column */
  .layout-btc {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr auto;
  }
  .layout-btc > .btc-info {
    border-left: none;
    border-top: 1px solid var(--line);
    max-height: 36vh;
    -webkit-overflow-scrolling: touch;
    overflow-y: auto;
  }
  .pane-tall  { height: 46vw; min-height: 220px; }
  .pane-short { height: 23vw; min-height: 120px; }
  .pane-liq   { height: 27vw; min-height: 160px; }
}

@media (max-width: 520px) {
  .arm-counts, .liq-pill, .risk-pill { display: none; }
  .liq-list li { grid-template-columns: 65px 80px 1fr 80px; }
  .liq-list li .liq-time { display: none; }
}

@media (max-width: 480px) {
  .grid-minis { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .layout-grid { padding: 8px; gap: 8px; }
}


/* ============================================================
   TOUCH FIX v2 — correct pointer-events + FAB visibility
   ============================================================ */

/* The sparkline / mini-chart canvases inside each card were swallowing
   all touch events, making rows un-tappable on mobile.
   pointer-events: none lets taps fall through to the parent card. */
.row-chart,  .row-chart *,
.mini-chart, .mini-chart * {
  pointer-events: none;
}

/* The main detail/btc charts DO need pointer events for zoom + pan */
#chart *, #atrChart *, #volumeChart *,
#btcPriceChart *, #btcVolumeChart *, #btcRetHist *, #btcOiPane *, #btcLsPane *,
#gridBtcChart *, #gridBtcVolumeChart * {
  pointer-events: auto;
}

/* FAB: hidden by default; show on phone only when .hidden is NOT present */
.info-fab           { display: none !important; }
@media (max-width: 768px) {
  .info-fab:not(.hidden) { display: flex !important; }
}

/* Sidebar: min-height:0 is critical — without it the grid item expands to fit
   all content, so overflow-y:auto never triggers (nothing to scroll). */
.sidebar { min-height: 0; }

/* Sidebar scroll: iOS needs explicit -webkit-overflow-scrolling */
.layout-detail > .sidebar {
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}

/* Touch devices (iPad / iPhone) in vertical-sidebar mode (≥769px):
   pan-y tells iPadOS to commit to a vertical scroll immediately,
   instead of waiting to decide between tap and scroll. */
@media (hover: none) and (min-width: 769px) {
  .layout-detail > .sidebar {
    touch-action: pan-y;
    overscroll-behavior-y: contain;
  }
  .layout-detail > .sidebar .sym-row {
    touch-action: pan-y;
  }
}

/* Sym-rows and mini-cards: ensure the whole card is a tap target */
.sym-row, .mini-card { cursor: pointer; }

/* Increase tappable row height on touch devices */
@media (hover: none) and (max-width: 768px) {
  .sym-row { min-height: 80px; }
  .mini-card { min-height: 96px; }
}

/* ── Info-toggle button (iPad chart header — hidden by default) ─────────── */
.info-toggle-btn {
  display: none;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  color: var(--fg-2);
  font-size: 12px;
  cursor: pointer;
  min-height: 34px;
  flex-shrink: 0;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.info-toggle-btn:active         { background: rgba(64,196,255,0.12); color: var(--blue); }
.info-toggle-btn.panel-open     { background: rgba(64,196,255,0.10); color: var(--blue);
                                   border-color: rgba(64,196,255,0.4); }

/* ── Bottom navigation bar (iPhone — hidden by default) ──────────────────
   v4.19 — edge-to-edge bar, locked to the bottom, rounded top corners.
   Modern glass look (blur + top shadow) without the dated flat border-top.
   Sits in grid row 3 (static) so the chart fills exactly to it. */
.bottom-nav {
  display: none;                       /* shown via @media ≤768px */
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: calc(56px + env(safe-area-inset-bottom, 0px));
  padding-bottom: env(safe-area-inset-bottom, 0px);
  padding-left: 4px;
  padding-right: 4px;
  background: rgba(11, 13, 19, 0.92);
  border-radius: 18px 18px 0 0;
  z-index: 40;
  align-items: center;
  justify-content: space-around;
  -webkit-backdrop-filter: saturate(180%) blur(28px);
  backdrop-filter: saturate(180%) blur(28px);
  box-shadow:
    0 -1px 0 rgba(255, 255, 255, 0.08),
    0 -8px 28px rgba(0, 0, 0, 0.45);
}
.bottom-nav button {
  position: relative;
  flex: 1;
  border: none;
  border-radius: 14px;
  background: transparent;
  color: var(--fg-3);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 6px 12px;
  min-height: unset;
  /* iOS-style state changes — fast on press, smooth on release */
  transition: color 0.18s ease, background 0.18s ease, transform 0.12s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.bottom-nav button .nav-icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.9;
  transition: transform 0.18s ease, stroke-width 0.18s ease;
}
.bottom-nav button .nav-label {
  font-size: 10.5px;
  line-height: 1;
  opacity: 0.9;
}

/* Active state — accent color + pill background + slightly thicker stroke */
.bottom-nav button.active {
  color: var(--blue);
  background: rgba(64, 196, 255, 0.11);
}
.bottom-nav button.active .nav-icon {
  stroke-width: 2.3;
}

/* Press feedback — quick scale-down */
.bottom-nav button:active .nav-icon { transform: scale(0.92); }
.bottom-nav button:active           { color: var(--blue); background: rgba(64, 196, 255, 0.07); }

@media (max-width: 768px) {
  .bottom-nav { display: flex !important; }
}

/* ============================================================
   MOBILE SCROLL FIX v2 — min-height:0, iOS momentum, touch-action
   ============================================================
   Root cause: CSS grid children have min-height:auto by default.
   This makes them expand to fit their content, overflowing the grid
   cell and defeating overflow-y:scroll — the browser never sees a
   constrained height, so there's nothing to scroll.
   Fix: min-height:0 on every scrollable grid child.
   ============================================================ */

/* BTC charts: always needs momentum scroll (not just mobile) */
.btc-charts {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
}

@media (max-width: 1024px) {
  /* Tab body: use 'scroll' not 'auto' — iOS only activates momentum on scroll */
  .tab-body {
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }
}

@media (max-width: 768px) {
  /* ── 1. Sidebar horizontal scroll ──────────────────────────────────────── */
  /* pan-x on container + rows: iOS commits to horizontal pan immediately
     instead of waiting to decide between tap/scroll. */
  .layout-detail > .sidebar {
    touch-action: pan-x;
    overscroll-behavior-x: contain;
  }
  .layout-detail > .sidebar .sym-row {
    touch-action: pan-x;
  }

  /* ── 2. Detail view — chart area ────────────────────────────────────────
     .chart-area is a 1fr grid child. Without min-height:0 it expands beyond
     1fr, so overflow-y:auto never triggers. With it, the grid constrains
     height and scroll works. Also shrink pane heights so the main chart
     stays readable on small screens (iPhone SE etc). */
  .chart-area {
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
  .atr      { height: 90px;  }   /* was 130px — saves 40px */
  .vol-pane { height: 65px;  }   /* was 80px  — saves 15px */

  /* ── 3. BTC view ────────────────────────────────────────────────────────
     Same fix: btc-charts is a 1fr grid child, needs min-height:0. */
  .btc-charts {
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }
  /* btc-info (second grid row) also needs to scroll if content is tall */
  .layout-btc > .btc-info {
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
  }

  /* ── 4. Grid view ───────────────────────────────────────────────────────
     BTC section auto-sizes; minis fill 1fr and scroll vertically.
     grid-minis: min-height:0 is the key that unlocks overflow-y:scroll. */
  .layout-grid {
    grid-template-rows: auto 1fr;
    overflow: hidden;
  }
  .grid-btc         { flex-shrink: 0; }
  .grid-btc-chart   { height: 150px; }
  .vol-pane-grid    { height: 50px; }

  .grid-minis {
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    align-content: start;
    grid-auto-rows: 115px;
    grid-template-columns: repeat(2, 1fr);
  }
  .mini-card { touch-action: manipulation; min-height: unset; }

  /* ── 5. Info panel ──────────────────────────────────────────────────────
     On phone the info-panel is position:fixed full-height.
     The tabs bar is fixed-height; tab-body fills the rest and must scroll. */
  .info-panel {
    display: flex;
    flex-direction: column;
  }
  .tab-body {
    flex: 1;
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
}

/* ── Touch-device grid scroll (ALL iPads, tablets, phones) ─────────────────
   @media (hover: none) matches any device without a hover pointer — i.e. every
   touch screen regardless of viewport width.  The ≤768px block above already
   handles phones; this block extends the same grid scroll fixes to iPads and
   larger tablets that fall outside that breakpoint. */
@media (hover: none) {
  /* Grid layout: BTC header auto-sizes; mini-cards fill remaining height and scroll. */
  .layout-grid {
    grid-template-rows: auto 1fr;
    overflow: hidden;
  }
  .grid-btc        { flex-shrink: 0; }
  .grid-btc-chart  { height: 180px; }
  .vol-pane-grid   { height: 65px; }

  /* THE key fix: min-height:0 lets the 1fr cell honour overflow-y:scroll */
  .grid-minis {
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
    align-content: start;
  }
  .mini-card { touch-action: manipulation; }

  /* Sidebar (coin list) must also scroll on touch iPads */
  .sidebar {
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }

  /* BTC view charts */
  .btc-charts {
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
  .layout-btc > .btc-info {
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
  }

  /* Info-panel tab body */
  .tab-body {
    min-height: 0;
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: contain;
    touch-action: pan-y;
  }
}


/* ============================================================
   v3.3 — iPhone / iPad polish
   Professional pass: tap targets, viewport sizing, chart gesture
   isolation, font smoothing, focus rings, and selection control.
   ============================================================ */

/* 1. Dynamic viewport — accounts for iOS Safari's URL bar showing/hiding.
   Without 100dvh, `100vh` is the LARGEST viewport (URL bar hidden), so
   bottom UI gets clipped when the bar is showing. */
html, body {
  height: 100dvh;
  /* iOS / macOS font smoothing — crisper text on retina */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
.layout { height: calc(100dvh - 44px); }

/* 2. Prevent iOS auto-zoom on input focus — only triggers when font-size <16px */
@media (hover: none) {
  input, select, textarea { font-size: 16px; }
}

/* 3. Global tap-highlight off + no text selection on UI chrome.
   Per-element re-enable below for content the user might want to copy. */
* {
  -webkit-tap-highlight-color: transparent;
}
.top, .seg, .intervals, .tabs, .bottom-nav, .info-panel,
.sym-row, .mini-card, .info-fab, .info-toggle-btn, .drawer-head {
  -webkit-user-select: none;
  user-select: none;
}
.tab-body, .btc-info-body, .liq-list, .trade-list, code {
  -webkit-user-select: text;
  user-select: text;
}

/* 4. Chart gesture isolation — let Lightweight Charts own its pinch/pan.
   `touch-action: none` means the browser won't try to interpret the
   gesture as page-scroll or page-zoom, and won't trigger the iOS
   pull-to-refresh or rubber-band. The chart library handles every
   gesture itself. */
@media (hover: none) {
  #chart, #atrChart, #volumeChart,
  #btcPriceChart, #btcVolumeChart, #btcRetHist,
  #btcOiPane, #btcLsPane,
  #gridBtcChart, #gridBtcVolumeChart {
    touch-action: none;
    overscroll-behavior: contain;
  }
}

/* 5. Larger, easier-to-hit interval buttons on iPhone. Tighter on iPad. */
@media (max-width: 768px) {
  .intervals { padding: 0 4px 4px; gap: 4px; }
  .intervals button {
    border-radius: 8px;
    font-weight: 500;
    background: var(--bg-3);
    border: 1px solid rgba(255,255,255,0.04);
  }
  .intervals button.active {
    background: var(--blue);
    color: #0a0c12;
    border-color: var(--blue);
    font-weight: 600;
  }
  /* Header pills — slightly larger so they're readable */
  .conn, .risk-pill, .liq-pill, .arm-counts {
    font-size: 11.5px;
    padding: 4px 9px;
    border-radius: 12px;
  }
}

/* 6. iPad — give intervals + tabs a touch more breathing room */
@media (min-width: 769px) and (max-width: 1024px) {
  .intervals button { padding: 7px 12px; border-radius: 8px; font-weight: 500; }
  .tabs button     { min-height: 42px; }
  /* Smoothen the info-panel slide on iPad — match iOS easing */
  .layout-detail > .info-panel {
    transition: transform 0.28s cubic-bezier(.32, .72, 0, 1);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.5);
  }
}

/* 7. Accessible focus ring on keyboard-only nav (touch leaves it off) */
button:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 2px;
}

/* 8. Smoother hardware-accelerated transforms on the slide-in info panel */
.info-panel { will-change: transform; }
.bottom-nav { will-change: transform; }

/* 9. Prevent the body from rubber-banding when the user reaches the edge */
html, body { overscroll-behavior: none; }

/* 10. Hide the bottom nav when the on-screen keyboard appears (iOS resize) —
   only kicks in for very short viewports where the nav would crowd inputs. */
@media (max-width: 768px) and (max-height: 480px) {
  .bottom-nav { transform: translateY(110%); transition: transform 0.18s ease; }
}

/* ── v3.6 — data-source status pill ───────────────────────────────────────
   Shows the current REST tier. Hidden when futures (tier 1, the default).
   Amber "spot" when on tier 2/3 (futures-only data missing). Red "no data"
   when every REST tier failed (live ticks via WS still work). */
.data-source-pill {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 10px;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: help;
  border: 1px solid transparent;
}
.data-source-pill.warn {
  background: rgba(255, 171, 0, 0.15);
  color: var(--amber);
  border-color: rgba(255, 171, 0, 0.3);
}
.data-source-pill.err {
  background: rgba(255, 23, 68, 0.18);
  color: var(--red);
  border-color: rgba(255, 23, 68, 0.4);
  font-weight: 600;
  animation: pulse-err 2s ease-in-out infinite;
}
.data-source-pill.ok {
  background: rgba(0, 230, 118, 0.10);
  color: var(--green);
  border-color: rgba(0, 230, 118, 0.25);
}
@keyframes pulse-err {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.65; }
}
@media (max-width: 520px) {
  /* On tiny screens, keep only the red "no data" pill (most important alert) */
  .data-source-pill.ok, .data-source-pill.warn { display: none; }
}


/* ============================================================
   v4.3 — Mobile rework + brand logo + symbol picker sheet
   ============================================================ */

/* ── Brand logo (replaces the old pulsing green dot) ──────────────────────── */
.brand {
  flex-shrink: 0;
  min-width: 0;
}
.brand > span {
  font-weight: 600;
  letter-spacing: 0.2px;
  white-space: nowrap;
}
.brand-logo {
  width: 22px; height: 22px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 2px 6px rgba(0,0,0,0.4);
  display: block;
}
@media (max-width: 768px) {
  .brand-logo { width: 22px; height: 22px; }
  .brand > span { font-size: 14px; }
}

/* ── Symbol picker bar (mobile-only — sits where the horizontal-scroll
       sym-list used to). Tap = open bottom-sheet with all symbols. ────────── */
.sym-picker-bar {
  display: none;                       /* desktop hides; ≤768px shows */
  width: 100%;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 10px;
  color: var(--fg);
  font: inherit;
  text-align: left;
  min-height: 48px;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sym-picker-bar:active { background: #1a2230; }
.sym-picker-icon {
  display: inline-flex; align-items: center;
  width: 24px; height: 24px;
}
.sym-picker-icon img { width: 22px; height: 22px; border-radius: 50%; }
.sym-picker-name { font-weight: 600; font-size: 15px; }
.sym-picker-price {
  margin-left: auto; font-size: 14px; color: var(--fg);
  font-variant-numeric: tabular-nums;
}
.sym-picker-chevron { color: var(--fg-3); font-size: 14px; }

/* ── Bottom-sheet symbol picker modal ───────────────────────────────────── */
.sym-sheet {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.sym-sheet.hidden { display: none; }
.sym-sheet-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.62);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  animation: ssh-fade 0.18s ease;
}
.sym-sheet-panel {
  position: relative;
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-radius: 18px 18px 0 0;
  padding: 10px 14px calc(14px + env(safe-area-inset-bottom, 0px));
  max-height: 72vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  animation: ssh-slide 0.24s cubic-bezier(.32, .72, 0, 1);
  box-shadow: 0 -16px 30px rgba(0,0,0,0.5);
}
.sym-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 4px 4px 10px;
  font-weight: 600; font-size: 14px;
  color: var(--fg-2);
}
.sym-sheet-close {
  background: transparent; border: none; color: var(--fg-2);
  font-size: 26px; line-height: 1;
  min-width: 44px; min-height: 44px;
  cursor: pointer; padding: 0;
}
.sym-sheet-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.sym-sheet-cell {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 6px;
  padding: 14px 6px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 12px;
  min-height: 78px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.12s, border-color 0.12s;
}
.sym-sheet-cell:active { background: #1a2230; }
.sym-sheet-cell.active {
  background: rgba(64,196,255,0.12);
  border-color: var(--blue);
}
.sym-sheet-cell img { width: 26px; height: 26px; border-radius: 50%; }
.sym-sheet-cell .sc-name { font-weight: 600; font-size: 12.5px; line-height: 1; }
.sym-sheet-cell .sc-px {
  font-size: 11px; color: var(--fg-2);
  font-variant-numeric: tabular-nums; line-height: 1;
}
@keyframes ssh-slide { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes ssh-fade  { from { opacity: 0; } to { opacity: 1; } }

/* ── BTC view sticky summary bar (mobile only) ───────────────────────────── */
.btc-summary {
  display: none;                       /* desktop hides */
  padding: 8px 12px;
  background: var(--bg-2);
  border-bottom: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}
.btc-summary-cell {
  display: flex; flex-direction: column; gap: 2px;
  font-size: 9.5px; color: var(--fg-3);
  letter-spacing: 0.06em; text-transform: uppercase;
  min-width: 0;
  overflow: hidden;
}
.btc-summary-cell strong {
  font-size: 14px; color: var(--fg);
  font-weight: 600;
  letter-spacing: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.btc-summary-cell strong.ok  { color: var(--ok); }
.btc-summary-cell strong.bad { color: var(--bad); }

/* ── Mobile overrides (≤768px) ──────────────────────────────────────────── */
@media (max-width: 768px) {
  /* v4.9 — Edge-to-edge mobile redesign.
     Goals: no scroll on the Detail view; all chart panes visible; tighter
     chrome; modern look. Drop the "Trend Hunter" wordmark on phone (logo
     stays + favicon/app icon carries the brand). */
  .top {
    padding: calc(2px + env(safe-area-inset-top, 0px)) 10px 3px;
    min-height: 30px;
    gap: 3px 6px;
  }
  .brand > span { display: none; }            /* drop wordmark on phone */
  .brand-logo  { width: 24px; height: 24px; }
  .arm-counts, .liq-pill, .risk-pill { display: none; }  /* free header space */
  .conn { font-size: 10.5px; padding: 2px 7px; }
  #paramsBtn { padding: 5px 9px; font-size: 12px; min-height: 30px; }
  .intervals { padding: 0 4px 3px; gap: 4px; }
  .intervals button {
    min-height: 30px;
    padding: 5px 0;
    font-size: 11px;
    border-radius: 7px;
  }
  /* v4.26 — Use 100vh (not dvh / fill-available) for body height.
     In iOS PWA standalone mode, 100dvh and -webkit-fill-available both resolve
     to the SAFE-AREA viewport (~818pt on iPhone 14 Pro), not the full physical
     screen (852pt). This leaves a 34pt home-indicator zone as raw black screen
     below the nav. 100vh in standalone mode = the "large viewport" = full screen
     including the safe-area zones (viewport-fit:cover makes the ICB the full
     screen). Body layout: flex column (header → layout → nav). */
  html {
    height: 100vh;
    overflow: hidden !important;
    margin: 0 !important;
  }
  body {
    height: 100vh;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .top  { flex: 0 0 auto; }
  .layout {
    flex: 1 1 0 !important;
    min-height: 0 !important;
    height: auto !important;
  }
  /* Nav: last flex child — always flush at the bottom, no fixed-position needed. */
  .bottom-nav {
    flex: 0 0 auto !important;
    position: static !important;
    bottom: auto !important;
    left: auto !important;
    right: auto !important;
    width: 100% !important;
    margin: 0 !important;
  }

  /* Detail view: picker row + chart-area (grid-fills the rest, no scroll).
     grid-template-columns MUST be reset to 1fr — the base rule has 3 desktop
     columns (280px 1fr 320px). Without this, auto-placement puts sidebar and
     chart-area side-by-side in row 1, leaving row 2 (1fr) empty = dead space. */
  .layout-detail {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
  }
  .layout-detail > .sidebar {
    padding: 5px 8px 4px;
    overflow: hidden;
  }
  .layout-detail > .sidebar .sidebar-section { display: none; }
  .layout-detail > .sidebar .sym-list        { display: none; }
  .sym-picker-row { display: flex; gap: 6px; align-items: stretch; }
  .sym-picker-bar { display: flex; flex: 1; padding: 7px 12px; min-height: 40px; border-radius: 10px; }
  .sym-picker-info {
    flex: 0 0 40px;
    width: 40px; min-height: 40px;
    background: var(--bg-3);
    border: 1px solid var(--line);
    border-radius: 10px;
    color: var(--blue);
    font-size: 18px;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  .sym-picker-info:active { background: rgba(64,196,255,0.10); }
  .sym-picker-name  { font-size: 14.5px; }
  .sym-picker-price { font-size: 13.5px; }

  /* Chart area — grid-allocate panes, no scroll. Hide every label header.
     The ATR pane is sized a bit taller because it carries the shared
     time-axis labels on mobile (see detail.js mount). */
  .chart-area {
    display: grid;
    grid-template-rows: 1fr 50px 72px;
    overflow: hidden;
    min-height: 0;
  }
  .chart-area > .chart-header { display: none; }
  .chart-area > #chart      { min-height: 0; }
  .chart-area > #volumeChart,
  .chart-area > #atrChart   { min-height: 0; height: auto; }
  .atr, .vol-pane { height: auto; }

  /* The floating Info FAB is replaced by the inline #symPickerInfo button
     above. Hide the FAB on phone — cleaner look, no overlap with chart.
     ID selector to win specificity over `.info-fab:not(.hidden)` earlier. */
  #infoFab.info-fab { display: none !important; }

  /* 3. BTC view — sticky summary at top + tighter pane labels.
     Same fix: base rule has 2 columns (1fr 280px), reset to single column. */
  .layout-btc {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr auto;
  }
  .btc-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px 14px;
  }
  /* Tighten the BTC view's verbose pane labels on phone. */
  .btc-charts .pane-label {
    font-size: 10px;
    padding: 3px 10px;
    color: var(--fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin: 0;
  }

  /* 4. Grid view — BTC banner stays at top, minis fill the rest. The cards
        grow to fill the 1fr cell so there's no dead space at the bottom. */
  .layout-grid {
    grid-template-rows: auto 1fr;
    padding: 8px;
    gap: 8px;
  }
  /* Drop the verbose hint + "BTC/USDT" label on mobile — the BTC banner is
     visually obvious, no need to explain it. */
  .grid-btc-head { display: none !important; }
  /* CRITICAL: the base .grid-btc-chart has flex: 1 which makes flex-basis: 0
     override our explicit height (0 wins in flexbox). Force a fixed flex
     basis so the candle chart actually renders at 180 px. */
  .grid-btc-chart  { flex: 0 0 180px; height: 180px; }
  .vol-pane-grid   { flex: 0 0 50px;  height: 50px;  }
  /* Stretch the mini-card grid rows to fill the 1fr cell — no empty band
     below the last row. minmax(115px, 1fr) keeps a sensible minimum size
     while letting rows grow to use available height. */
  .grid-minis {
    grid-auto-rows: minmax(110px, 1fr);
    grid-template-columns: repeat(2, 1fr);
    align-content: stretch;
  }

  /* 5. Mini tile text overflow fix (right-column 86.435 vs 86.4350 issue).
        Tighten font, allow ellipsis, prevent flex children from forcing width. */
  .mini-card { min-width: 0; overflow: hidden; }
  .mini-head { gap: 4px; min-width: 0; }
  .mini-sym  { font-size: 12.5px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .mini-px   { font-size: 12px; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
  .mini-foot { font-size: 10px; gap: 4px; }
  .mini-band { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  .mini-dist { white-space: nowrap; flex-shrink: 0; }
}

/* ── Tiny screens (≤480px) — keep the picker grid 3-col but tighten ─────── */
@media (max-width: 380px) {
  .sym-sheet-cell { padding: 10px 4px; min-height: 70px; }
  .sym-sheet-cell img { width: 22px; height: 22px; }
  .sym-sheet-cell .sc-name { font-size: 11.5px; }
  .btc-summary { padding: 7px 10px; gap: 4px 10px; }
  .btc-summary-cell strong { font-size: 12.5px; }
}


/* ============================================================
   v4.6 — PWA install prompt sheet
   ============================================================
   Reuses .sym-sheet machinery (backdrop, slide-up animation) and
   adds an install-specific panel inside.
*/
.install-panel {
  padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
}
.install-head {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  gap: 10px;
  align-items: center;
  padding: 6px 4px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 14px;
}
.install-logo {
  width: 44px; height: 44px;
  border-radius: 12px;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.4);
}
.install-title {
  font-size: 16px; font-weight: 600; color: var(--fg);
  line-height: 1.2;
}
.install-sub {
  font-size: 11.5px; color: var(--fg-3); margin-top: 2px;
  letter-spacing: 0.04em; text-transform: uppercase;
}
.install-body {
  display: flex; flex-direction: column; gap: 12px;
  padding: 0 4px 16px;
  color: var(--fg-2);
  font-size: 13.5px;
  line-height: 1.45;
}
.install-pitch { margin: 4px 0 8px; }
.install-step {
  display: flex; align-items: flex-start; gap: 10px;
}
.install-step-n {
  flex: 0 0 24px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: var(--blue);
  color: #0a0c12;
  font-weight: 700; font-size: 12.5px;
  display: inline-flex; align-items: center; justify-content: center;
}
.install-step strong { color: var(--fg); }
.install-icon-share {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  background: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 13px;
  vertical-align: middle;
  margin: 0 2px;
}
.install-actions {
  display: flex; flex-direction: column; gap: 8px;
  padding: 6px 4px 0;
}
.install-btn {
  width: 100%;
  padding: 14px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 600;
  border: 1px solid var(--line);
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.install-btn-primary {
  background: var(--blue);
  color: #0a0c12;
  border-color: var(--blue);
}
.install-btn-primary:active { background: #6fd0ff; }
.install-btn-ghost {
  background: transparent;
  color: var(--fg-2);
}
.install-btn-ghost:active { background: var(--bg-3); }


/* ── v4.6 shared state placeholders (loading / empty / error) ────────────── */
.state-skeleton {
  padding: 12px;
  display: flex; flex-direction: column; gap: 8px;
}
.state-skeleton-row {
  height: 14px;
  border-radius: 4px;
  background: linear-gradient(90deg, #0d0d0d 0%, #161616 50%, #0d0d0d 100%);
  background-size: 200% 100%;
  animation: state-shimmer 1.4s ease-in-out infinite;
}
@keyframes state-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.state-empty {
  padding: 24px 16px;
  text-align: center;
  color: var(--fg-3);
}
.state-empty-msg { font-size: 13px; }
.state-empty-sub { font-size: 11.5px; margin-top: 6px; color: var(--fg-3); opacity: 0.7; }

.state-error {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px;
  background: rgba(255, 23, 68, 0.12);
  border: 1px solid rgba(255, 23, 68, 0.32);
  border-radius: 8px;
  color: #ffb3c1;
  font-size: 12.5px;
}
.state-error-icon { font-size: 16px; }
.state-error-msg  { flex: 1; min-width: 0; }
.state-error-retry {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 6px;
  color: #ffe1e7;
  padding: 5px 10px;
  font-size: 11.5px;
  font-weight: 600;
  cursor: pointer;
  min-height: 30px;
}
.state-error-retry:active { background: rgba(255,255,255,0.12); }

#dataSourceBanner {
  margin: 8px 12px;
}


/* ── v4.7 notification permission banner ─────────────────────────────────── */
.notify-banner {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(58px + env(safe-area-inset-bottom, 0px));
  z-index: 55;
  display: flex;
  align-items: center;
  gap: 10px;
  width: min(560px, calc(100vw - 16px));
  padding: 8px 10px 8px 12px;
  border-radius: 10px;
  background: rgba(15, 18, 24, 0.96);
  border: 1px solid rgba(64, 196, 255, 0.30);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(255,255,255,0.04);
  -webkit-backdrop-filter: blur(10px) saturate(160%);
  backdrop-filter: blur(10px) saturate(160%);
  animation: notify-slide-up 0.28s cubic-bezier(.32, .72, 0, 1);
}
@keyframes notify-slide-up {
  from { transform: translate(-50%, 30px); opacity: 0; }
  to   { transform: translate(-50%,  0);   opacity: 1; }
}
.notify-banner-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}
.notify-banner-text {
  display: flex; flex-direction: column; gap: 0;
  min-width: 0; flex: 1;
}
.notify-banner-text strong {
  color: var(--fg); font-size: 12.5px; font-weight: 600; line-height: 1.2;
}
.notify-banner-text span {
  color: var(--fg-2); font-size: 11px; line-height: 1.3;
  /* Truncate to one line on mobile so the banner stays ~44 px tall instead
     of wrapping to 3 lines and burying the chart panes. */
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.notify-btn {
  font: inherit; border-radius: 7px; border: 1px solid var(--line);
  cursor: pointer; min-height: 30px; padding: 4px 10px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.notify-btn-primary {
  background: var(--blue); color: #0a0c12; border-color: var(--blue);
  font-weight: 600; font-size: 12px;
}
.notify-btn-primary:active { background: #6fd0ff; }
.notify-btn-ghost {
  background: transparent; color: var(--fg-3);
  font-size: 14px; padding: 4px 7px; line-height: 1;
}
.notify-btn-ghost:active { background: var(--bg-3); }

@media (max-width: 768px) {
  .notify-banner {
    /* nav is static in grid row 3; banner floats above it via fixed position.
       nav height = 56px + safe-area-inset-bottom; add 8px gap above nav. */
    bottom: calc(56px + 8px + env(safe-area-inset-bottom, 0px));
    padding: 9px 11px;
    gap: 8px;
  }
  .notify-banner-text strong { font-size: 12.5px; }
  .notify-banner-text span   { font-size: 11px; }
}

.notify-perm-row {
  display: flex; align-items: center; gap: 8px;
}
.notify-perm-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 10px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.notify-perm-pill.perm-granted { background: rgba(0,230,118,0.15); color: var(--green); }
.notify-perm-pill.perm-default { background: rgba(255,171,0,0.15); color: var(--amber); }
.notify-perm-pill.perm-denied  { background: rgba(255,23,68,0.18); color: var(--red); }

/* Toast — feedback after notification permission attempts and similar */
.notify-toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
  z-index: 70;
  max-width: min(520px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--fg);
  background: rgba(20, 24, 32, 0.96);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 12px 36px rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  animation: toast-in 0.22s ease;
  text-align: center;
}
.notify-toast-ok   { border-color: rgba(0,230,118,0.45);   color: #c1ffd9; }
.notify-toast-warn { border-color: rgba(255,171,0,0.45);   color: #ffe9bd; }
.notify-toast-info { border-color: rgba(64,196,255,0.40); color: #d4f0ff; }
.notify-toast-out { animation: toast-out 0.4s ease forwards; }
@keyframes toast-in  { from { opacity: 0; transform: translate(-50%, 20px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes toast-out { to { opacity: 0; transform: translate(-50%, 20px); } }