/* Token Meter for Claude — product page.
   Inherits the shared design system (style.css); adds the app icon, the
   "coming soon" CTA, and the dark menu-bar dropdown visual. */

.tm-icon {
  width: 100px; height: 100px; border-radius: 23px; display: block;
  margin: 0 auto 28px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.10), 0 12px 36px rgba(0,0,0,0.16);
}

/* Coming-soon pill — same shape as the CTA, but inert/muted */
.cta-soon {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 28px;
  background: #e8e2d9; color: #8a847d;
  border-radius: 100px; font-size: 1rem; font-weight: 600;
  letter-spacing: -0.01em; cursor: default; user-select: none;
}
.cta-soon svg { width: 18px; height: 18px; opacity: 0.75; }

/* Dark menu-bar dropdown visual (matches the real app in dark mode) */
.tm-visual { display: flex; justify-content: center; margin-top: 4px; }
.tm-card {
  width: 364px; border-radius: 16px; overflow: hidden; text-align: left;
  background: linear-gradient(180deg, #2c3038 0%, #23262d 100%);
  box-shadow: 0 30px 70px rgba(0,0,0,0.28), 0 6px 18px rgba(0,0,0,0.16),
              inset 0 0 0 0.5px rgba(255,255,255,0.09);
}
.tm-sec { padding: 15px 18px 13px; }
.tm-r1 { display: flex; justify-content: space-between; align-items: baseline; }
.tm-ttl { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-weight: 700;
  font-size: 15px; color: #f3f4f6; letter-spacing: -0.3px; }
.tm-pct { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 14px; color: #c5c8cf; }
.tm-bar { height: 6px; border-radius: 3px; background: rgba(120,160,255,0.18);
  margin: 11px 0 10px; overflow: hidden; }
.tm-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg,#0a84ff,#3f9bff); }
.tm-rst { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 12.5px; color: #8b9099; }
.tm-dv { height: 1px; background: rgba(255,255,255,0.08); margin: 0 18px; }
.tm-ft { display: flex; justify-content: space-between; align-items: center;
  padding: 12px 18px; font-size: 15.5px; color: #f3f4f6; }
.tm-ft .upd { font-family: ui-monospace,"SF Mono",Menlo,monospace; font-size: 12px; color: #8b9099; }

/* Non-affiliation / trademark note */
.tm-legal {
  max-width: 620px; margin: 0 auto; padding: 0 24px;
  font-size: 0.72rem; color: #a8a39c; line-height: 1.7; text-align: center;
}

@media (max-width: 720px) {
  .tm-card { width: min(364px, 92vw); }
}

/* ============================================================
   Dark theme — Token Meter pages only (matches the app + store
   screenshots). Re-maps the shared design tokens on the page
   body so nav/cards/footer recolor automatically; the few
   hard-coded surfaces in style.css are patched below.
   ============================================================ */
/* Belt-and-suspenders: keep any sub-pixel overflow from exposing the
   default white html background when dragged horizontally on mobile.
   Scoped to Token Meter pages so Keyz pages are untouched. */
html:has(body.tm-page) { overflow-x: hidden; }

.tm-page {
  --bg: #0c1c28;
  --white: #18222e;         /* elevated dark surface (cards) */
  --text: #f2f7f9;
  --muted: #9db1bc;
  --border: rgba(255,255,255,0.10);
  --cta-bg: #3fe3cc;
  --cta-text: #08131f;
  background:
    radial-gradient(900px 600px at 92% 6%, rgba(63,227,204,.14), transparent 60%),
    radial-gradient(760px 560px at 80% 96%, rgba(47,111,237,.12), transparent 60%),
    linear-gradient(158deg,#0d2530 0%,#0a1a27 55%,#07121d 100%);
  background-attachment: fixed;
}
.tm-page #nav { background: rgba(10,20,30,0.72); }
.tm-page .feat:hover { background: #1c2733; }
.tm-page .feat-icon { background: rgba(255,255,255,0.06); }
.tm-page .footer-meta { color: #7d8893; }
.tm-page .footer-copy { color: #6b757f; }
.tm-page .tm-legal { color: #8a949d; }
.tm-page .fm-icon { box-shadow: inset 0 0 0 1px rgba(255,255,255,0.08); }
.tm-page .lang-btn:hover { background: rgba(255,255,255,0.06); }

/* Coming-soon pill: outlined for dark */
.tm-page .cta-soon {
  background: transparent; color: #cfe0e6;
  border: 1.5px solid rgba(255,255,255,0.22);
}

/* App-card pops off the dark bg with a soft glow + crisper edge */
.tm-page .tm-visual { position: relative; }
.tm-page .tm-visual::before {
  content: ""; position: absolute; z-index: 0;
  width: min(480px, 100vw); height: 480px; left: 50%; top: 50%;
  transform: translate(-50%,-50%); border-radius: 50%;
  background: radial-gradient(circle, rgba(63,227,204,.14), rgba(47,111,237,.08) 45%, transparent 70%);
  filter: blur(10px);
}
.tm-page .tm-card {
  position: relative; z-index: 1;
  box-shadow: 0 30px 70px rgba(0,0,0,0.5), inset 0 0 0 0.5px rgba(255,255,255,0.1);
}