/* ===========================================================================
   photonichat webapp — 960×400 device UI
   Fonts: Orbitron (display/numbers) + Titillium Web (text).  Same dark palette
   as the quote-API homepage, tuned for a black OLED panel.
   =========================================================================== */
:root{
  --bg:#000;
  --panel:#0C0F16;
  --panel2:#10141d;
  --line:#1f2632;
  --line-soft:#161b25;
  --gold:#F5CC1B;          /* the warm display gold from the mockup */
  --gold-dim:#8c7a18;
  --white:#ffffff;
  --text:#e9edf4;
  --dim:#8b93a3;
  --faint:#5a626f;
  --up:#2BD17E;
  --down:#FF5C6C;
  --up-bg:rgba(43,209,126,.12);
  --down-bg:rgba(255,92,108,.12);
  --batt:#39D353;
  --rain:#37A8FF;
  --r:14px;
  --orb:'Orbitron', ui-monospace, "SF Mono", Menlo, monospace;
  --titi:'Titillium Web', -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --price:var(--orb);   /* switchable price-number font (top-bar font buttons) */
  --clock:var(--orb);   /* switchable clock font (Settings → Clock font buttons) */
  --feat-px-size:68px;  /* featured price size; Orbitron(wide)=68, other fonts→72 (set in setPriceFont) */
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{
  background:#05060a;
  color:var(--text);
  font-family:var(--titi);
  display:flex; align-items:center; justify-content:center;
  overflow:hidden;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  user-select:none; -webkit-user-select:none;
  touch-action:none;
}

/* scales the fixed 960×400 stage to the viewport (1:1 on the real device) */
.fit{ transform-origin:center center; transition:transform .15s ease }

.stage{
  position:relative; width:960px; height:400px;
  background:var(--bg); overflow:hidden;
  border-radius:14px;
  box-shadow:0 40px 120px -40px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.03);
}

/* ───────────────────────── pixel ruler (dev/preview aid) ─────────────────────
   A 1:1 pixel ruler drawn in the gutter around the 960×400 stage so the device
   resolution is obvious when previewing in a desktop browser. Auto-shown when the
   viewport has room around the stage; toggled manually with the "r" key. The
   real device viewport is exactly 960×400, so the gutter never appears there. */
.ruler-frame{ position:relative; padding:0 }
body.ruler-on .ruler-frame{ padding:30px 0 0 30px }
.ruler{ display:none; position:absolute; color:var(--faint);
  font:600 10px/1 var(--orb); letter-spacing:.02em }
body.ruler-on .ruler, body.ruler-on .ruler-corner{ display:block }
.ruler-x{ top:0; left:30px; width:960px; height:30px }
.ruler-y{ top:30px; left:0; width:30px; height:400px }
.ruler .tick{ position:absolute; background:var(--faint) }
.ruler-x .tick{ bottom:0; width:1px; height:7px }
.ruler-x .tick.maj{ height:13px; background:var(--gold-dim) }
.ruler-y .tick{ right:0; height:1px; width:7px }
.ruler-y .tick.maj{ width:13px; background:var(--gold-dim) }
.ruler .tlabel{ position:absolute; color:var(--dim); white-space:nowrap }
.ruler-x .tlabel{ bottom:15px; transform:translateX(-50%) }
.ruler-y .tlabel{ right:4px; transform:translateY(-50%) rotate(-90deg);
  transform-origin:100% 50% }
.ruler-corner{ display:none; position:absolute; top:0; left:0; width:30px; height:30px;
  font:700 9px/1.25 var(--orb); color:var(--gold-dim); text-align:center;
  align-items:center; justify-content:center }
body.ruler-on .ruler-corner{ display:flex }

/* preview toolbars: price-font switcher (left) + ruler/download (right). Fixed to
   the viewport so they stay readable at any preview scale; shown only when
   previewing (the real 960×400 device has no room around the stage). */
.ruler-toolbar{ display:none; position:fixed; top:12px; right:12px; z-index:100; gap:8px }
.font-toolbar{ display:none; position:fixed; top:12px; left:12px; z-index:100;
  gap:6px; align-items:center; flex-wrap:wrap; max-width:46vw }
body.preview .ruler-toolbar, body.preview .font-toolbar{ display:flex }
.ft-label{ font:600 10px/1 var(--titi); color:var(--faint); letter-spacing:.12em;
  text-transform:uppercase; margin-right:2px }
.ruler-toolbar button, .font-toolbar button{ font:600 12px/1 var(--titi); color:var(--text);
  background:var(--panel2); border:1px solid var(--line); border-radius:8px;
  padding:8px 12px; cursor:pointer; letter-spacing:.02em }
.ruler-toolbar button:hover, .font-toolbar button:hover{ border-color:var(--gold-dim); color:var(--gold) }
.ruler-toolbar button:active, .font-toolbar button:active{ transform:translateY(1px) }
.ruler-toolbar button[disabled]{ opacity:.55; cursor:default }
.font-btn.on, .cfont-btn.on, .ruler-toolbar button.on{ border-color:var(--gold); color:var(--gold); background:rgba(245,204,27,.08) }
.ft-break{ flex-basis:100%; height:0 }   /* force the Clock-font row below the Price-font row */
/* clock-font picker in Settings — each button previews its own typeface */
.fontsel{ display:flex; flex-wrap:wrap; gap:7px; margin-top:6px }
.fontsel button{ font:600 13px/1 var(--titi); color:var(--text); background:var(--panel2);
  border:1px solid var(--line); border-radius:9px; padding:9px 12px; cursor:pointer }
.fontsel button.on{ border-color:var(--gold); color:var(--gold); background:rgba(245,204,27,.08) }
/* segmented preview-zoom control (−  [type %]  +) */
.zoom-ctl{ display:inline-flex; align-items:stretch }
.zoom-ctl button, .zoom-ctl input, .zoom-ctl .zoom-pct{ border-radius:0; margin:0 }
.zoom-ctl > *:first-child{ border-radius:8px 0 0 8px }
.zoom-ctl > *:last-child{ border-radius:0 8px 8px 0 }
.zoom-ctl > * + *{ border-left:0 }
#btn-zoom-dn, #btn-zoom-up{ padding:8px 12px; font-weight:700 }
.zoom-ctl input{ width:42px; text-align:right; font:600 12px/1 var(--titi); color:var(--text);
  background:var(--panel2); border:1px solid var(--line); padding:8px 4px;
  font-variant-numeric:tabular-nums; -moz-appearance:textfield }
.zoom-ctl input:focus{ outline:none; border-color:var(--gold-dim); color:var(--gold) }
.zoom-ctl input.on{ color:var(--gold) }
.zoom-ctl input::-webkit-outer-spin-button, .zoom-ctl input::-webkit-inner-spin-button{ -webkit-appearance:none; margin:0 }
.zoom-ctl .zoom-pct{ display:inline-flex; align-items:center; padding:8px 8px 8px 2px;
  font:600 12px/1 var(--titi); color:var(--faint); background:var(--panel2); border:1px solid var(--line) }

/* ───────────────────────── status bar ───────────────────────── */
.statusbar{
  position:absolute; top:0; left:0; right:0; height:42px; z-index:30;
  display:flex; align-items:center; padding:0 20px; pointer-events:none;
}
.sb-icons{ display:flex; align-items:center; gap:12px }
.sb-icon{ display:inline-flex; width:24px; height:20px; color:#fff }
.sb-icon svg{ width:100%; height:100% }
.sb-icon.off{ color:#4a515e }
.batt{ display:inline-flex; align-items:center; color:var(--batt) }
.batt-box{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:20px; padding:0 6px; border:2px solid currentColor; border-radius:4px;
  font:700 12px/1 var(--orb); color:currentColor; letter-spacing:.02em }
.batt-box::after{ content:""; position:absolute; right:-5px; top:5px; width:3px; height:8px;
  background:currentColor; border-radius:0 2px 2px 0 }
.batt.low{ color:var(--down) } .batt.mid{ color:var(--gold) }
.sb-right{ margin-left:auto; font:600 12px/1 var(--titi); color:var(--faint);
  letter-spacing:.22em; text-transform:uppercase }
/* top-center cluster: nav dots over the page subtitle (clickable — the rest of
   the status bar stays pointer-events:none) */
.sb-center{ position:absolute; left:50%; top:0; transform:translateX(-50%);
  height:42px; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:3px; pointer-events:auto }
.sb-sub{ display:flex; align-items:center; gap:7px; font:600 11px/1 var(--titi);
  color:var(--dim); letter-spacing:.14em; text-transform:uppercase }
.sb-sub .live-dot{ width:7px; height:7px }
.sb-sub #page-sub{ white-space:nowrap }

/* ───────────────────────── pager ───────────────────────── */
.track{
  position:absolute; inset:0; display:flex; width:max-content;
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  will-change:transform;
}
.track.no-anim{ transition:none }
.page{
  width:960px; height:400px; flex:none; position:relative;
  padding:46px 40px 22px; box-sizing:border-box;
}

.dots{ position:absolute; left:50%; bottom:8px; transform:translateX(-50%); z-index:30;
  display:flex; justify-content:center; gap:9px; pointer-events:auto }
.dot{ width:7px; height:7px; border-radius:50%; background:#3a404c;
  cursor:pointer; transition:background .2s, transform .2s, box-shadow .2s; }
.dot:hover{ background:#566; }
.dot.on{ background:transparent; border:2px solid #fff; width:8px; height:8px;
  box-shadow:0 0 8px rgba(255,255,255,.35) }

/* ───────────────────────── page 1 · clock + weather ───────────────────────── */
.page-clock{ padding:40px 36px 40px }
/* page 2 · clock + news: flex column so the news strip flows BELOW the clock (can't
   overlap the time/weather) and sits ABOVE the nav dots. Divider trimmed to fit. */
.page-clocknews{ padding:30px 36px 28px; display:flex; flex-direction:column }
.page-clocknews .clock-wrap{ flex:1 1 auto; height:auto; min-height:0 }
.page-clocknews .clock-div{ height:244px }
/* the news strip: block (not flex) so the marquee track isn't shrunk; track centers. */
.clock-news{ flex:0 0 auto; height:56px; margin-top:6px; overflow:hidden;
  white-space:nowrap; border-top:1px solid var(--line-soft) }
.clock-news .news-track{ height:56px; align-items:center }
.clock-wrap{ display:flex; align-items:center; height:100%; gap:26px }
.clock-left{ flex:1 1 0; min-width:0; text-align:center }
.clock-time{ font:700 120px/.86 var(--clock); color:var(--gold); letter-spacing:-2px;
  font-variant-numeric:tabular-nums; white-space:nowrap;
  text-shadow:0 0 38px rgba(245,204,27,.18) }
.clock-time .colon{ position:relative; margin:0 2px }
.clock-time .colon.blink{ animation:colonBlink 1.05s steps(1,end) infinite }
.ck-ampm{ font-size:30px; margin-left:12px; color:var(--gold-dim) }
.ck-ampm:empty{ margin-left:0 }   /* 24h mode: no AM/PM, don't shift the time right */
.clock-date{ font:300 40px/1 var(--titi); color:var(--white); margin-top:18px;
  letter-spacing:.5px; white-space:nowrap }
/* full-screen big clock (page 2) */
.page-bigclock{ padding:0 }
.bc-sectoggle{ position:absolute; top:52px; right:24px; z-index:20; cursor:pointer;
  font:700 13px/1 var(--titi); letter-spacing:.1em; padding:8px 12px; border-radius:8px;
  color:var(--dim); background:transparent; border:1px solid var(--line-soft) }
.bc-sectoggle:hover{ color:var(--white); border-color:var(--dim) }
.bc-sectoggle.on{ color:var(--bg); background:var(--gold); border-color:var(--gold) }
.bigclock-wrap{ height:100%; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px }
.bc-time{ font:700 174px/.9 var(--clock); color:var(--gold); letter-spacing:-2px;
  font-variant-numeric:tabular-nums; text-shadow:0 0 46px rgba(245,204,27,.20) }
/* seconds hidden → HH:MM only, so go larger */
.bc-time.nosec{ font-size:248px; letter-spacing:-4px; white-space:nowrap }
.bc-date{ font:300 36px/1 var(--titi); color:var(--white); letter-spacing:.5px }

/* scrolling market ticker (page 3) — markets line on top, news line below */
.page-ticker{ padding:0; display:flex; align-items:center }
.ticker-stack{ width:100%; display:flex; flex-direction:column; gap:26px }
.ticker-wrap{ width:100%; overflow:hidden; white-space:nowrap }
.ticker-track{ display:inline-flex; will-change:transform; animation:tkscroll 50s linear infinite }
.tk-seg{ display:inline-flex; flex:0 0 auto }
.tk-it{ display:inline-flex; align-items:center; gap:9px; padding:0 26px; white-space:nowrap;
  font:600 26px/1 var(--price); color:#fff; border-right:1px solid var(--line-soft) }
.tk-it b{ color:var(--gold); font:700 22px/1 var(--orb) }
.tk-it .tk-px{ font-variant-numeric:tabular-nums }
.tk-it .up{ color:var(--up) } .tk-it .dn{ color:var(--down) }
@keyframes tkscroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* general-news line (front page + under the markets ticker): bigger, slower, and
   flipped to scroll leftward (default direction, opposite the previous reverse). */
.news-track{ animation-duration:150s }
.nl-it{ display:inline-flex; align-items:baseline; gap:11px; padding:0 28px; white-space:nowrap;
  font:400 35px/1 var(--titi); color:var(--text); border-right:1px solid var(--line-soft) }
.nl-it .nl-tag{ font:700 16px/1 var(--titi); letter-spacing:.08em; color:var(--bg);
  background:var(--gold); padding:5px 9px; border-radius:6px; align-self:center }
.nl-it .nl-src{ color:var(--gold); font-weight:600 }
.nl-it .nl-tt{ color:var(--white) }
.nl-it .nl-ago{ color:var(--dim); font-weight:400; font-size:.62em; white-space:nowrap }
/* clocknews page only: 25% slower scroll (150s→188s) + text 10% smaller (35→31.5px) */
.clock-news .news-track{ animation-duration:188s }
.clock-news .nl-it{ font-size:31.5px }
.clock-news .nl-it .nl-tag{ font-size:14px }
body.portrait .bc-time{ font-size:84px; letter-spacing:-1px }
body.portrait .bc-date{ font-size:26px }
body.portrait .tk-it{ font-size:20px } body.portrait .tk-it b{ font-size:17px }
@media (prefers-reduced-motion: reduce){ .ticker-track{ animation:none } }

.clock-div{ flex:0 0 auto; width:3px; height:288px; border-radius:2px;
  background:linear-gradient(180deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent) }
.clock-right{ flex:1 1 0; display:flex; align-items:center; gap:12px; min-width:0 }
.wx-text{ flex:1 1 auto; min-width:0 }
.wx-city{ font:600 50px/1 var(--orb); color:var(--gold); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis }
.wx-temp{ font:700 50px/1 var(--titi); color:var(--white); margin-top:12px;
  font-variant-numeric:tabular-nums }
.wx-cond{ font:300 34px/1.05 var(--titi); color:var(--white); margin-top:7px }
.wx-meta{ font:600 14px/1.4 var(--titi); color:var(--dim); margin-top:13px;
  letter-spacing:.04em }
.wx-icon{ flex:0 0 140px; width:140px; height:140px; display:flex; align-items:center;
  justify-content:center }
.wx-icon svg{ width:100%; height:100% }

/* ───────────────────────── boards (stocks / crypto) ───────────────────────── */
.live-dot{ width:8px; height:8px; border-radius:50%; background:var(--up);
  box-shadow:0 0 9px var(--up); animation:pulse 1.9s ease-in-out infinite }

.board-grid{ height:100% }
.two-col{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr;
  gap:9px 16px }

.crypto-split{ display:grid; grid-template-columns:1fr 1px 1fr; gap:0 22px;
  height:100% }
.split-rule{ background:linear-gradient(180deg,transparent,var(--line) 12%,var(--line) 88%,transparent) }
.board-col{ display:grid; grid-auto-rows:1fr; gap:8px; min-width:0 }

/* a single instrument row */
/* No card box — transparent rows; the green/red rise/fall indicator is the only
   chrome, drawn as a clean inset 5px rounded rectangle (no glow) instead of a
   full-height edge strip. Applies to all boards using .row (stocks + crypto). */
.row{ display:flex; align-items:center; gap:12px; min-width:0;
  padding:0 14px; position:relative; overflow:hidden }
.row::before{ content:""; position:absolute; left:0; top:9px; bottom:9px; width:5px;
  border-radius:2px; background:var(--faint); opacity:.5 }
.row.up::before{ background:var(--up) }
.row.dn::before{ background:var(--down) }
.row .ico{ flex:0 0 auto }
.r-meta{ flex:1 1 auto; min-width:0 }
.r-tk{ font:700 16px/1 var(--orb); color:#fff; letter-spacing:.02em;
  display:flex; align-items:center; gap:7px }
/* USDC quote-currency suffix on a pair, dimmed after the base ticker */
.qc{ color:var(--faint); font-weight:600 }
/* "24/7" always-on tag for Hyperliquid perps */
.tag247{ font:700 9px/1 var(--titi); letter-spacing:.06em; color:var(--gold);
  border:1px solid var(--gold-dim); border-radius:999px; padding:3px 6px;
  display:inline-flex; align-items:center; gap:4px; white-space:nowrap }
.tag247::before{ content:""; width:5px; height:5px; border-radius:50%;
  background:var(--gold); box-shadow:0 0 6px var(--gold) }
.r-nm{ font:400 11px/1.2 var(--titi); color:var(--dim); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.r-vals{ flex:0 0 auto; text-align:right }
.r-px{ font:600 17px/1 var(--price); color:#fff; font-variant-numeric:tabular-nums }
.r-ch{ font:600 12px/1 var(--titi); margin-top:5px; font-variant-numeric:tabular-nums }
.r-ch.up{ color:var(--up) } .r-ch.dn{ color:var(--down) }
.r-ch.up::before{ content:"\25B2 "; font-size:8px }
.r-ch.dn::before{ content:"\25BC "; font-size:8px }
/* No background tint on price change — just the green/red left bar. */
.row.empty{ align-items:center; justify-content:center; color:var(--faint);
  font:400 13px var(--titi) }
.row.empty::before{ display:none }

/* circle-clipped instrument logo + monogram fallback */
.ico{ position:relative; display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; border-radius:50%; background:var(--panel2);
  border:1px solid var(--line-soft); font:700 13px/1 var(--orb); color:var(--dim);
  overflow:hidden }
.ico::before{ content:attr(data-m) }
/* Fill the round frame with the logo and let the circle clip it (enlarge + crop)
   — no padding, no white backdrop. object-fit:cover handles non-square logos; the
   slight scale crops any thin built-in margin so the logo reaches the circle edge
   instead of sitting in a white ring. Applies everywhere icons are used
   (stocks, crypto, markets, featured). */
.ico img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
  padding:0; background:transparent; transform:scale(1.12) }
.ico.sm{ width:22px; height:22px; font-size:10px }

/* ───────────────────────── page 5 · markets ───────────────────────── */
.mkt-grid{ display:grid; grid-template-columns:1fr 1fr; grid-template-rows:1fr 1fr;
  gap:14px; height:100% }
.mkt-card{ position:relative; padding:13px 16px 10px; border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 46%),var(--panel);
  border:1px solid var(--line-soft); display:flex; flex-direction:column; overflow:hidden }
.mkt-top{ display:flex; align-items:center; gap:10px }
.mkt-tk{ font:700 23px/1 var(--orb); color:#fff;
  display:flex; align-items:center; gap:7px }
.mkt-nm{ font:400 16px/1.2 var(--titi); color:var(--dim); margin-top:3px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.mkt-meta{ flex:1 1 auto; min-width:0 }
.mkt-px{ font:700 34px/1 var(--price); color:#fff; font-variant-numeric:tabular-nums;
  margin-left:auto; text-align:right }
.mkt-ch{ display:inline-block; font:600 17px/1 var(--titi); margin-top:5px;
  text-align:right; width:100% }
.mkt-ch.up{ color:var(--up) } .mkt-ch.dn{ color:var(--down) }
.mkt-chart{ flex:1 1 auto; margin-top:8px; min-height:0 }
.mkt-chart svg{ display:block; width:100%; height:100% }
.spark-line{ fill:none; stroke-width:2; vector-effect:non-scaling-stroke }
.spark-area{ stroke:none; opacity:.15 }
.up .spark-line{ stroke:var(--up) } .up .spark-area{ fill:var(--up) }
.dn .spark-line{ stroke:var(--down) } .dn .spark-area{ fill:var(--down) }

/* ───────────────────────── page 2 · featured (2 big cards) ───────────────────────── */
.feat-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr));
  gap:18px; height:100% }
.feat-card{ position:relative; padding:18px 22px 14px; border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.025),transparent 44%),var(--panel);
  border:1px solid var(--line-soft); display:flex; flex-direction:column; overflow:hidden }
.feat-card.up{ border-color:rgba(43,209,126,.35) }
.feat-card.dn{ border-color:rgba(255,92,108,.35) }
.feat-top{ display:flex; align-items:center; gap:13px }
.feat-top .ico{ width:46px; height:46px; flex:0 0 46px }
.feat-meta{ flex:1 1 auto; min-width:0 }
.feat-tk{ font:700 24px/1 var(--orb); color:#fff; display:flex; align-items:center; gap:8px }
.feat-nm{ font:400 13px/1.2 var(--titi); color:var(--dim); margin-top:5px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.feat-pxrow{ display:flex; align-items:baseline; justify-content:space-between;
  gap:14px; margin-top:16px }
.feat-px{ font:700 var(--feat-px-size)/1 var(--price); color:#fff; font-variant-numeric:tabular-nums;
  letter-spacing:-1px; min-width:0 }
.feat-ch{ font:700 30px/1 var(--titi); font-variant-numeric:tabular-nums; flex:none }
.feat-ch.up{ color:var(--up) } .feat-ch.dn{ color:var(--down) }
.feat-chart{ flex:1 1 auto; margin-top:10px; min-height:0 }
.feat-chart svg{ display:block; width:100%; height:100% }

/* ───────────────────────── page 6 · world ───────────────────────── */
.world-wrap{ display:grid; grid-template-columns:1.45fr 1fr; gap:22px;
  height:100% }
.world-clocks{ display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:12px }
.wc{ padding:12px 16px; border-radius:13px;
  background:linear-gradient(180deg,rgba(255,255,255,.02),transparent 50%),var(--panel);
  border:1px solid var(--line-soft); display:flex; flex-direction:column;
  justify-content:center }
.wc-city{ font:600 13px/1 var(--orb); color:var(--gold); letter-spacing:.12em;
  text-transform:uppercase; display:flex; align-items:baseline; gap:8px }
.wc-city .off{ font:400 10px/1 var(--titi); color:var(--faint); letter-spacing:.05em }
.wc-time{ font:700 38px/1 var(--orb); color:#fff; font-variant-numeric:tabular-nums;
  margin-top:8px }
.wc-time .s{ font-size:18px; color:var(--dim) }
.wc-date{ font:400 12px/1 var(--titi); color:var(--dim); margin-top:7px }
.world-side{ display:flex; flex-direction:column }
.cat-label{ font:600 11px/1 var(--orb); letter-spacing:.16em; color:var(--gold);
  text-transform:uppercase; margin-bottom:8px }
.metals{ display:flex; flex-direction:column; gap:8px }
.m-row{ display:flex; align-items:center; gap:10px; padding:9px 13px; border-radius:11px;
  background:var(--panel); border:1px solid var(--line-soft) }
.m-row .m-nm{ font:600 13px/1 var(--titi); color:var(--text) }
.m-row .m-vals{ margin-left:auto; text-align:right }
.m-row .m-px{ font:600 15px/1 var(--price); color:#fff; font-variant-numeric:tabular-nums }
.m-row .m-ch{ font:600 11px/1 var(--titi); margin-top:4px }
.m-row .m-ch.up{ color:var(--up) } .m-row .m-ch.dn{ color:var(--down) }

/* ───────────────────────── page 7 · news ───────────────────────── */
/* wider, edge-to-edge list: no per-row panel bg, no visible scrollbar */
.page-news{ padding:44px 22px 26px }
.news-list{ height:100%; overflow-y:auto; overflow-x:hidden; touch-action:pan-y;
  display:flex; flex-direction:column; gap:0; scrollbar-width:none }
.news-list::-webkit-scrollbar{ width:0; height:0; display:none }
.news-row{ display:flex; align-items:center; gap:12px; padding:11px 2px;
  background:transparent; border:0; border-bottom:1px solid var(--line-soft);
  text-decoration:none; color:inherit }
.news-row:last-child{ border-bottom:0 }
.news-row:hover .news-title{ color:#fff }
.news-row .ico{ flex:0 0 auto }
.news-body{ display:flex; flex-direction:column; gap:4px; min-width:0 }
.news-title{ font:600 32px/1.3 var(--titi); color:var(--text);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.news-meta{ font:600 24px/1 var(--titi); color:var(--faint); letter-spacing:.02em }
.news-empty{ color:var(--faint); font:600 26px/1 var(--titi); text-align:center;
  padding-top:40px }

/* ───────────────────────── page 9 · settings ───────────────────────── */
.settings-scroll{ height:100%; overflow-y:auto; overflow-x:hidden;
  display:grid; grid-template-columns:1fr 1fr; gap:13px 18px; align-content:start;
  padding-right:6px; touch-action:pan-y; scrollbar-width:thin;
  scrollbar-color:#2a313d transparent }
.settings-scroll::-webkit-scrollbar{ width:7px }
.settings-scroll::-webkit-scrollbar-thumb{ background:#2a313d; border-radius:4px }
.set-group{ background:var(--panel); border:1px solid var(--line-soft);
  border-radius:13px; padding:13px 15px }
.set-group.wide{ grid-column:1 / -1 }
.set-group h3{ font:600 12px/1 var(--orb); letter-spacing:.14em; color:var(--gold);
  text-transform:uppercase; margin:0 0 12px }
.set-row{ display:flex; align-items:center; gap:10px; margin-bottom:10px }
.set-row:last-child{ margin-bottom:0 }
.set-row .lbl{ font:400 14px/1.2 var(--titi); color:var(--text) }
.set-row .lbl small{ display:block; font-size:11px; color:var(--dim); margin-top:2px }
.set-row .sp{ margin-left:auto }

/* text input */
.txt{ width:100%; padding:9px 12px; border-radius:9px; background:var(--panel2);
  border:1px solid var(--line); color:var(--text); font:400 14px/1 var(--titi);
  outline:none; transition:border-color .15s, box-shadow .15s }
.txt:focus{ border-color:var(--gold-dim); box-shadow:0 0 0 3px rgba(245,204,27,.12) }
.txt::placeholder{ color:var(--faint) }

/* toggle switch */
.toggle{ position:relative; width:46px; height:26px; flex:0 0 auto; cursor:pointer }
.toggle input{ position:absolute; opacity:0; width:0; height:0 }
.toggle .tk{ position:absolute; inset:0; border-radius:14px; background:#2a313d;
  transition:background .18s }
.toggle .tk::after{ content:""; position:absolute; top:3px; left:3px; width:20px;
  height:20px; border-radius:50%; background:#fff; transition:transform .18s }
.toggle input:checked + .tk{ background:var(--gold) }
.toggle input:checked + .tk::after{ transform:translateX(20px) }

/* segmented control */
.seg{ display:inline-flex; border:1px solid var(--line); border-radius:9px;
  overflow:hidden }
.seg button{ border:0; background:var(--panel2); color:var(--dim); cursor:pointer;
  font:600 12px/1 var(--titi); padding:8px 14px; letter-spacing:.04em }
.seg button.on{ background:var(--gold); color:#1a1a1a }

/* chips (editable symbol lists) */
.chips{ display:flex; flex-wrap:wrap; gap:7px; margin-bottom:10px }
.chip{ display:inline-flex; align-items:center; gap:6px; padding:6px 8px 6px 11px;
  border-radius:9px; background:var(--panel2); border:1px solid var(--line);
  font:600 13px/1 var(--orb); color:#fff }
.chip .x{ cursor:pointer; width:17px; height:17px; border-radius:50%;
  display:inline-flex; align-items:center; justify-content:center; color:var(--dim);
  font:400 15px/1 var(--titi); background:rgba(255,255,255,.05) }
.chip .x:hover{ color:var(--down); background:var(--down-bg) }
.chip.empty{ color:var(--faint); font-family:var(--titi); font-weight:400;
  border-style:dashed }

/* symbol search box + dropdown */
.sym-add{ position:relative }
.sym-results{ position:absolute; left:0; right:0; top:calc(100% + 5px); z-index:40;
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  overflow:hidden; max-height:184px; overflow-y:auto; display:none;
  box-shadow:0 18px 40px -18px rgba(0,0,0,.85) }
.sym-results.open{ display:block }
.sr-row{ display:flex; align-items:center; gap:10px; padding:8px 11px; cursor:pointer;
  border-bottom:1px solid var(--line-soft) }
.sr-row:last-child{ border-bottom:0 }
.sr-row:hover,.sr-row.sel{ background:var(--panel) }
.sr-tk{ font:700 13px/1 var(--orb); color:#fff; min-width:64px }
.sr-nm{ flex:1 1 auto; font:400 12px/1.2 var(--titi); color:var(--dim);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.sr-cat{ font:600 10px/1 var(--titi); color:var(--faint); text-transform:uppercase;
  letter-spacing:.05em }

.btn{ cursor:pointer; border:1px solid var(--line); background:var(--panel2);
  color:var(--text); border-radius:9px; font:600 12px/1 var(--titi); padding:9px 14px;
  letter-spacing:.04em }
.btn:hover{ border-color:var(--dim) }
.btn.danger:hover{ border-color:var(--down); color:var(--down) }
.set-status{ display:flex; gap:9px; flex-wrap:wrap; margin-top:2px }
.pill{ font:600 11px/1 var(--titi); padding:6px 9px; border-radius:8px;
  border:1px solid var(--line); color:var(--dim); display:inline-flex; align-items:center; gap:6px }
.pill .pd{ width:7px; height:7px; border-radius:50%; background:var(--faint) }
.pill.ok{ color:var(--up); border-color:rgba(43,209,126,.4) } .pill.ok .pd{ background:var(--up); box-shadow:0 0 7px var(--up) }
.pill.bad{ color:var(--down); border-color:rgba(255,92,108,.4) } .pill.bad .pd{ background:var(--down) }
.set-saved-on{ color:var(--up) }

.loading{ color:var(--faint); font:400 14px var(--titi); padding:8px 2px }

/* ───────────────────────── page 7 · tools (stopwatch/timer/alarm) ───────────────────────── */
.tools-grid{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px; height:100% }
.tool{ display:flex; flex-direction:column; align-items:center; padding:16px 14px 14px;
  border-radius:14px; border:1px solid var(--line-soft);
  background:linear-gradient(180deg,rgba(255,255,255,.022),transparent 46%),var(--panel) }
.tool-hd{ font:700 13px/1 var(--orb); letter-spacing:.16em; color:var(--gold) }
.tool-time{ font:700 42px/1 var(--orb); color:#fff; font-variant-numeric:tabular-nums;
  margin:18px 0 16px; letter-spacing:-1px }
.tool-time input[type="time"]{ color-scheme:dark; font:700 36px/1 var(--orb); color:#fff;
  background:transparent; border:none; text-align:center; font-variant-numeric:tabular-nums }
.tool-btns{ display:flex; gap:8px; flex-wrap:wrap; justify-content:center }
.tbtn{ font:600 13px/1 var(--titi); color:var(--text); background:var(--panel2);
  border:1px solid var(--line); border-radius:9px; padding:9px 15px; cursor:pointer }
.tbtn:hover{ border-color:var(--gold-dim); color:var(--gold) }
.tbtn:active{ transform:translateY(1px) }
.tbtn.primary{ border-color:var(--up); color:var(--up) }
.tbtn.danger{ border-color:var(--down); color:var(--down) }
.tool-presets{ display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin-bottom:14px }
.tool-presets button{ font:600 12px/1 var(--titi); color:var(--dim); background:transparent;
  border:1px solid var(--line); border-radius:999px; padding:6px 11px; cursor:pointer }
.tool-presets button:hover{ border-color:var(--gold-dim); color:var(--gold) }
.tool-presets button.adj{ color:var(--faint) }
.tool-laps{ width:100%; margin-top:14px; display:flex; flex-direction:column; gap:4px;
  overflow:hidden }
.lap{ display:flex; justify-content:space-between; font:600 12px/1.4 var(--titi);
  color:var(--dim); font-variant-numeric:tabular-nums; padding:0 4px }
.tool-note{ font:600 12px/1 var(--titi); color:var(--dim); letter-spacing:.06em;
  text-transform:uppercase; margin-top:14px }
.tool.firing{ border-color:var(--gold); animation:toolFlash 1s ease-in-out infinite }

/* ───────────────────────── portrait (upright 400×960 reflow) ─────────────────────────
   Genuine portrait: the stage becomes 400×960 and each page reflows to a tall,
   narrow column layout (no rotation — everything stays upright). */
body.portrait .stage{ width:400px; height:960px }
body.portrait .page{ width:400px; height:960px; padding:48px 20px 28px }
body.portrait .dots{ gap:7px }
/* the 400px-wide bar has no room for the subtitle next to the page name */
body.portrait .sb-sub{ display:none !important }
/* ruler tracks follow the portrait 400×960 footprint */
body.portrait .ruler-x{ width:400px }
body.portrait .ruler-y{ height:960px }

/* clock: stack clock over weather with a horizontal divider */
body.portrait .page-clock{ padding:48px 24px }
body.portrait .clock-wrap{ flex-direction:column; justify-content:center; gap:34px }
body.portrait .clock-left, body.portrait .clock-right{ flex:0 0 auto; width:100% }
body.portrait .clock-time{ font-size:84px; letter-spacing:-1px }
body.portrait .clock-date{ font-size:30px; margin-top:12px }
body.portrait .clock-div{ align-self:center; width:72%; height:3px;
  background:linear-gradient(90deg,transparent,var(--gold) 18%,var(--gold) 82%,transparent) }
body.portrait .clock-right{ flex-direction:column; text-align:center; gap:16px }
body.portrait .wx-text{ flex:0 0 auto }
body.portrait .wx-city{ font-size:42px } body.portrait .wx-temp{ font-size:46px }
body.portrait .wx-icon{ flex:0 0 110px; width:110px; height:110px; margin:0 auto }

/* boards → single column */
body.portrait .two-col{ grid-template-columns:1fr }
body.portrait .feat-grid{ grid-template-columns:1fr; grid-auto-rows:1fr }
body.portrait .mkt-grid{ grid-template-columns:1fr; grid-template-rows:repeat(4,1fr) }
body.portrait .tools-grid{ grid-template-columns:1fr; grid-template-rows:repeat(3,1fr) }

/* crypto: single column, drop the centre rule */
body.portrait .crypto-split{ display:flex; flex-direction:column; gap:0 }
body.portrait .crypto-split .split-rule{ display:none }
body.portrait .board-col{ flex:1 1 0 }

/* world: clocks above, metals/fx below */
body.portrait .world-wrap{ grid-template-columns:1fr; grid-template-rows:auto 1fr; gap:18px }
body.portrait .world-clocks{ grid-template-columns:1fr 1fr }

/* ───────────────────────── animations ───────────────────────── */
@keyframes toolFlash{ 50%{ background:rgba(245,204,27,.12) } }
@keyframes pulse{ 50%{ opacity:.3 } }
@keyframes colonBlink{ 50%{ opacity:.18 } }
@keyframes rainfall{ 0%{ transform:translateY(-3px); opacity:0 } 30%{ opacity:1 }
  100%{ transform:translateY(10px); opacity:0 } }
.wx-drop{ animation:rainfall 1.2s linear infinite }
@media (prefers-reduced-motion: reduce){
  *{ animation:none !important }
  .track{ transition:none }
}