/* FeedSig Signals Club — shared stylesheet
   Palette: bg #07060e, ink #ffffff, accent gradient #3d6bf6 → #9b3ff0, lilac #b48cff
   Type: Poppins 300/400/500/600 */

/* ---------- base ---------- */
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
html, body { margin: 0; padding: 0; background: #07060e; }
* { box-sizing: border-box; }
/* The [hidden] attribute must always win. A class that sets `display`
   (.btn, .install-banner) otherwise out-ranks the user-agent rule, which
   silently breaks every element toggled with element.hidden = true. */
[hidden] { display: none !important; }
body {
  font-family: Poppins, Helvetica, Arial, sans-serif;
  color: #ffffff;
}
p, h1, h2, h3, div, span, a { overflow-wrap: break-word; }
a { color: rgba(255,255,255,0.72); text-decoration: none; }
a:hover { color: #ffffff; }
::selection { background: rgba(124,77,255,0.4); }

/* ---------- page shell ---------- */
.page {
  position: relative;
  overflow: hidden;
  /* `clip` clips identically but is not a scroll container, so the sticky
     `.topbar` keeps working; `hidden` above is the fallback. */
  overflow: clip;
  min-height: 100vh;
  width: 100%;
  background: #07060e;
}
.glow-layer { position: absolute; inset: 0; pointer-events: none; }
.content { position: relative; z-index: 2; }
.wrap {
  max-width: 1240px;
  margin: 0 auto;
  padding-left: clamp(18px, 5vw, 40px);
  padding-right: clamp(18px, 5vw, 40px);
}

/* ---------- brand lockup ---------- */
.brand { display: flex; align-items: center; gap: 9px; }
.brand-mark {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: conic-gradient(from 210deg, #7a3cf0, #3f6ef5 55%, rgba(122,60,240,0.15) 80%, #7a3cf0);
  display: flex; align-items: center; justify-content: center;
}
.brand-mark i {
  width: 15px; height: 15px; border-radius: 50%; background: #0a0813;
  display: flex; align-items: center; justify-content: center;
}
.brand-mark i b { width: 5px; height: 5px; border-radius: 50%; background: #a97cff; }
.brand-name { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; color: #ffffff; line-height: 1.05; }
.brand-sub { font-size: 10px; font-weight: 400; color: rgba(255,255,255,0.6); letter-spacing: 0.02em; line-height: 1.05; }

/* ---------- nav ---------- */
/* The landing bar is fixed to the viewport; `.nav-spacer` reserves the row it
   used to occupy and `--nav-h` is measured by the page script. */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  border-bottom: 1px solid transparent;
  transition: background .24s ease, border-color .24s ease, box-shadow .24s ease;
}
.site-header[data-scrolled="true"], .site-header[data-nav-open="true"] {
  background: rgba(9,7,20,0.82);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border-bottom-color: rgba(255,255,255,0.08);
  box-shadow: 0 18px 44px rgba(0,0,0,0.4);
}
.nav-spacer { height: var(--nav-h, 78px); }
section[id] { scroll-margin-top: calc(var(--nav-h, 78px) + 10px); }
.nav-links { display: flex; }
.nav-cta { display: inline-flex; }
.nav-toggle { display: none; }
.nav-panel { display: none; }
.nav-toggle span {
  display: block; width: 18px; height: 1.5px; border-radius: 2px; background: #ffffff;
  transition: transform .26s ease, opacity .18s ease;
}
header[data-nav-open="true"] .nav-toggle span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); }
header[data-nav-open="true"] .nav-toggle span:nth-child(2) { opacity: 0; }
header[data-nav-open="true"] .nav-toggle span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); }
@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-cta { display: none; }
  .nav-toggle { display: flex; }
  header[data-nav-open="true"] .nav-panel { display: flex; }
}

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 46px; padding: 0 24px;
  border: 0; border-radius: 999px;
  font-family: inherit; font-size: 13.5px; font-weight: 500; color: #ffffff;
  cursor: pointer; transition: filter .18s ease, background .18s ease, border-color .18s ease;
}
.btn-primary {
  background: linear-gradient(100deg, #3d6bf6, #9b3ff0);
  box-shadow: 0 12px 34px rgba(120,60,240,0.4);
}
.btn-primary:hover, .h0:hover, .h1:hover, .h2:hover { filter: brightness(1.08); }
.btn-ghost {
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.05);
  font-weight: 400; font-size: 13px;
}
.btn-ghost:hover { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.22); }
.btn-block { display: flex; width: 100%; }

.badge-icon {
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 10px;
}
.badge-tg { background: #29a9eb; color: #ffffff; font-size: 9px; }
.badge-g { background: #ffffff; color: #1a1a1a; font-size: 11px; font-weight: 600; }

/* ---------- surfaces ---------- */
.card {
  padding: 24px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02));
}
.card-tint {
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.09);
  background: linear-gradient(160deg, rgba(120,70,225,0.16), rgba(255,255,255,0.025));
}
.panel {
  padding: clamp(24px, 3vw, 34px);
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,0.1);
  background: linear-gradient(180deg, rgba(255,255,255,0.075), rgba(255,255,255,0.02));
  box-shadow: 0 30px 70px rgba(0,0,0,0.45);
}

/* ---------- type helpers ---------- */
.h-hero { margin: 0; font-size: clamp(33px, 7.1vw, 68px); line-height: 1.16; font-weight: 600; letter-spacing: -0.025em; text-wrap: pretty; }
.h-section { margin: 0; font-size: clamp(27px, 4.4vw, 42px); line-height: 1.22; font-weight: 600; letter-spacing: -0.02em; }
.h-panel { margin: 0; font-size: clamp(22px, 2.4vw, 27px); font-weight: 600; letter-spacing: -0.02em; }
.lede { font-size: clamp(13.5px, 1.4vw, 15px); line-height: 1.75; font-weight: 300; color: rgba(255,255,255,0.62); }
.body-sm { font-size: 12.5px; line-height: 1.85; font-weight: 300; color: rgba(255,255,255,0.55); }
.meta { font-size: 10.5px; line-height: 1.8; font-weight: 300; color: rgba(255,255,255,0.35); }
.link-accent { color: #b48cff; font-weight: 400; }
.checklist { display: grid; gap: 14px; font-size: 13px; color: rgba(255,255,255,0.8); }
.checklist > div { display: flex; align-items: center; gap: 10px; }

/* ---------- forms ---------- */
.form { display: grid; gap: 16px; }
.field { display: grid; gap: 8px; }
.field-label {
  display: flex; align-items: baseline; gap: 6px;
  font-size: 12px; font-weight: 400; color: rgba(255,255,255,0.72);
}
.field-label--split { justify-content: space-between; gap: 12px; }
.field-hint { font-weight: 300; color: rgba(255,255,255,0.35); }
.input {
  width: 100%; min-height: 46px; padding: 0 14px;
  border-radius: 11px; border: 1px solid rgba(255,255,255,0.14);
  background: rgba(8,6,18,0.6); color: #ffffff;
  font-family: inherit; font-size: 13.5px;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.input::placeholder { color: rgba(255,255,255,0.3); }
.input:focus {
  outline: none;
  border-color: rgba(150,110,255,0.75);
  box-shadow: 0 0 0 3px rgba(122,60,240,0.18);
}
.input-affix { position: relative; display: block; }
.input-affix .input { padding-right: 66px; }
.input-action {
  position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
  min-height: 32px; padding: 0 10px;
  border: 0; border-radius: 8px; background: transparent;
  font-family: inherit; font-size: 11.5px; color: rgba(255,255,255,0.55);
  cursor: pointer;
}
.input-action:hover { color: #ffffff; }
.check {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12.5px; line-height: 1.7; font-weight: 300;
  color: rgba(255,255,255,0.62); cursor: pointer;
}
.check input { width: 16px; height: 16px; margin-top: 2px; flex: none; accent-color: #7a3cf0; }
.alert {
  display: none;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid rgba(239,91,107,0.35); background: rgba(239,91,107,0.12);
  font-size: 12px; font-weight: 300; color: #ffb3bc;
}
.alert[data-visible="true"] { display: block; }
.divider {
  margin: 22px 0; display: flex; align-items: center; gap: 14px;
  font-size: 11px; color: rgba(255,255,255,0.35);
}
.divider::before, .divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(255,255,255,0.1);
}
.strength { display: flex; align-items: center; gap: 10px; }
.strength-bars { flex: 1; display: flex; gap: 4px; }
.strength-bars span {
  flex: 1; height: 3px; border-radius: 2px;
  background: rgba(255,255,255,0.12); transition: background .2s ease;
}
.strength-label { min-width: 54px; font-size: 10.5px; font-weight: 300; color: rgba(255,255,255,0.4); }

/* ---------- app shell (member area) ---------- */
.app { display: flex; min-height: 100vh; position: relative; z-index: 2; }
.sidebar {
  width: 244px; flex: none;
  display: flex; flex-direction: column; gap: 26px;
  padding: 24px 18px;
  border-right: 1px solid rgba(255,255,255,0.07);
  background: rgba(9,7,20,0.72);
  backdrop-filter: blur(14px);
  position: sticky; top: 0;
  /* On a phone 100vh is the LARGE viewport — the height the page would have
     with the URL bar retracted — so the drawer ends up taller than what is on
     screen. Combined with `.side-foot { margin-top: auto }`, which absorbs any
     slack, the content never exceeds the box: nothing overflows, so nothing
     scrolls, and the footer sits below the fold permanently out of reach.
     dvh tracks the viewport that is actually visible. */
  height: 100vh;
  height: 100dvh;
  overflow-y: auto; overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb {
  border-radius: 999px;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.16);
  background-clip: padding-box;
}
.sidebar::-webkit-scrollbar-thumb:hover {
  background: rgba(180,140,255,0.5);
  background-clip: padding-box;
}
.side-group { display: grid; gap: 4px; }
.side-title {
  padding: 0 12px 6px;
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.3);
}
.side-link {
  display: flex; align-items: center; gap: 11px;
  min-height: 42px; padding: 0 12px;
  border-radius: 10px;
  font-size: 13px; font-weight: 400; color: rgba(255,255,255,0.62);
  transition: background .16s ease, color .16s ease;
}
.side-link:hover { background: rgba(255,255,255,0.05); color: #ffffff; }
.side-link[aria-current="page"] {
  color: #ffffff;
  background: linear-gradient(100deg, rgba(61,107,246,0.28), rgba(155,63,240,0.24));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.1);
}
.side-link i { width: 16px; text-align: center; font-style: normal; font-size: 13px; opacity: 0.85; }
/* Marks a sidebar link that leaves the site. Pushed to the right so the
   labels stay left-aligned with the internal links above them. */
.side-out { margin-left: auto; font-size: 10px; opacity: 0.4; }
.side-link:hover .side-out { opacity: 0.75; }
.side-foot { margin-top: auto; padding-top: 4px; display: grid; gap: 12px; }
.user-chip {
  display: flex; align-items: center; gap: 10px;
  padding: 10px; border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.04);
}
.avatar {
  width: 32px; height: 32px; flex: none; border-radius: 50%;
  background: linear-gradient(140deg, #4b6ef6, #8b3df0);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #ffffff;
}

.main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 25;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(16px, 3vw, 34px);
  border-bottom: 1px solid rgba(255,255,255,0.07);
  background: rgba(9,7,20,0.82);
  backdrop-filter: blur(16px);
}
.topbar h1 { margin: 0; font-size: clamp(19px, 2.2vw, 24px); font-weight: 600; letter-spacing: -0.02em; }
.topbar p { margin: 5px 0 0; font-size: 12px; font-weight: 300; color: rgba(255,255,255,0.45); }
.topbar-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.icon-btn {
  width: 38px; height: 38px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 11px; border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: rgba(255,255,255,0.75); font-family: inherit; font-size: 14px; cursor: pointer;
  transition: background .16s ease, border-color .16s ease;
}
.icon-btn:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.22); color: #ffffff; }
.sidebar-open { display: none; }
.view { padding: clamp(20px, 3vw, 32px) clamp(16px, 3vw, 34px) 56px; display: grid; gap: clamp(16px, 2vw, 24px); }
.view > * { min-width: 0; }
.grid-auto { display: grid; gap: clamp(14px, 1.6vw, 20px); grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); }
.grid-2 { display: grid; gap: clamp(14px, 1.8vw, 22px); grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); align-items: start; }
.scrim { display: none; }
@media (max-width: 980px) {
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 40;
    transform: translateX(-100%); transition: transform .26s ease;
    box-shadow: 0 30px 80px rgba(0,0,0,0.6);
    /* Keep the last item clear of the home indicator / gesture bar. */
    padding-bottom: max(24px, env(safe-area-inset-bottom, 0px));
    /* Tighter than desktop so the whole menu usually fits a phone without
       scrolling at all; it still scrolls when it does not. */
    gap: 18px;
  }
  body[data-side-open="true"] .sidebar { transform: none; }
  /* Without this a swipe that reaches the end of the drawer scrolls the page
     behind it instead, which reads as the drawer refusing to move. */
  body[data-side-open="true"] { overflow: hidden; }
  body[data-side-open="true"] .scrim {
    display: block; position: fixed; inset: 0; z-index: 30;
    background: rgba(4,3,10,0.6); backdrop-filter: blur(2px); border: 0;
  }
  .sidebar-open { display: flex; }
}

/* Large screens: pin the sidebar to the viewport and offset the main column.
   `.page` sets `overflow: hidden`, which neutralises `position: sticky`, so the
   sidebar is fixed rather than sticky here. */
@media (min-width: 981px) {
  .sidebar { position: fixed; top: 0; left: 0; z-index: 30; }
  .main { margin-left: 244px; }
}

/* ---------- data display ---------- */
.stat { padding: 18px 20px 20px; }
.stat-label { font-size: 11px; font-weight: 400; letter-spacing: 0.02em; color: rgba(255,255,255,0.45); }
.stat-value { margin-top: 10px; font-size: clamp(22px, 2.4vw, 27px); font-weight: 600; letter-spacing: -0.02em; }
.stat-note { margin-top: 6px; font-size: 11px; font-weight: 300; color: rgba(255,255,255,0.42); }
.pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.02em;
  border: 1px solid transparent;
}
.pill-long { color: #7ff0bb; background: rgba(62,207,142,0.14); border-color: rgba(62,207,142,0.3); }
.pill-short { color: #ffa9b3; background: rgba(239,91,107,0.14); border-color: rgba(239,91,107,0.3); }
.pill-live { color: #cbb6ff; background: rgba(139,61,240,0.18); border-color: rgba(139,61,240,0.38); }
.pill-muted { color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.12); }
.pos { color: #3ecf8e; }
.neg { color: #ef5b6b; }
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  min-height: 36px; padding: 0 16px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.12); background: rgba(255,255,255,0.04);
  font-family: inherit; font-size: 12px; color: rgba(255,255,255,0.65); cursor: pointer;
  transition: background .16s ease, color .16s ease, border-color .16s ease;
}
.tab:hover { color: #ffffff; border-color: rgba(255,255,255,0.24); }
.tab[aria-selected="true"] {
  color: #ffffff; border-color: transparent;
  background: linear-gradient(100deg, #3d6bf6, #9b3ff0);
}
.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; min-width: 620px; }
table.data th {
  text-align: left; padding: 0 14px 12px;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.38);
}
table.data td {
  padding: 14px; font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,0.75);
  border-top: 1px solid rgba(255,255,255,0.06);
}
table.data td strong { font-weight: 500; color: #ffffff; }
.kv { display: grid; gap: 4px; }
.kv-k { font-size: 10.5px; font-weight: 400; color: rgba(255,255,255,0.4); }
.kv-v { font-size: 13px; font-weight: 500; }
.bar { height: 4px; border-radius: 3px; background: rgba(255,255,255,0.1); overflow: hidden; }
.bar > span { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #3d6bf6, #9b3ff0); }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }

/* ---------- auth layout ---------- */
.auth-grid {
  position: relative; z-index: 2;
  min-height: 100vh;
  max-width: 1320px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(440px, 100%), 1fr));
}
.auth-pane {
  display: flex; flex-direction: column; justify-content: space-between; gap: 40px;
  padding: clamp(30px, 4vw, 54px) clamp(28px, 4vw, 60px);
}
.auth-main {
  display: flex; align-items: center; justify-content: center;
  padding: clamp(30px, 6vw, 56px) clamp(18px, 5vw, 44px);
}
.auth-back {
  display: inline-flex; align-items: center; gap: 8px;
  margin-bottom: 26px; font-size: 12.5px; color: rgba(255,255,255,0.55);
}
@media (max-width: 900px) { .auth-pane { display: none; } }

/* ---------- flash + inline messages ---------- */
.alert-success {
  border-color: rgba(62,207,142,0.35);
  background: rgba(62,207,142,0.12);
  color: #9df3c7;
}
.notice {
  padding: 14px 16px;
  border-radius: 12px;
  border: 1px solid rgba(139,61,240,0.34);
  background: rgba(139,61,240,0.14);
  font-size: 12.5px; line-height: 1.7; font-weight: 300;
  color: rgba(255,255,255,0.78);
}
.notice strong { font-weight: 500; color: #ffffff; }

/* A button that has to read as a link (sign out, inline actions). */
.linkish {
  padding: 0; border: 0; background: none;
  font-family: inherit; font-size: inherit; color: rgba(255,255,255,0.42);
  cursor: pointer; text-align: left;
}
.linkish:hover { color: #ffffff; text-decoration: underline; }
.link-accent.linkish { color: #b48cff; }

.trace {
  margin: 0 0 22px;
  padding: 14px;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  background: rgba(8,6,18,0.7);
  font-family: Consolas, Menlo, monospace;
  font-size: 11px; line-height: 1.6; color: rgba(255,255,255,0.6);
  overflow-x: auto;
  white-space: pre-wrap; word-break: break-word;
}

/* ---------- checkout ---------- */
.checkout-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  max-width: 1120px; margin: 0 auto;
  padding: 22px clamp(18px, 5vw, 40px);
}
.checkout-secure { font-size: 11.5px; font-weight: 300; color: rgba(255,255,255,0.5); }
.checkout-wrap {
  max-width: 1120px; margin: 0 auto;
  padding: clamp(10px, 2vw, 24px) clamp(18px, 5vw, 40px) clamp(40px, 6vw, 70px);
}
.checkout-foot {
  max-width: 780px; margin: 0 auto;
  padding: 0 clamp(18px, 5vw, 40px) 40px;
}
.checkout-grid {
  display: grid; gap: clamp(18px, 2.4vw, 28px);
  grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  align-items: start;
}
.checkout-main { min-width: 0; }
/* The summary follows the buyer down the form on wide screens. */
.checkout-aside { min-width: 0; position: sticky; top: 24px; }
@media (max-width: 900px) {
  .checkout-grid { grid-template-columns: minmax(0, 1fr); }
  .checkout-aside { position: static; order: -1; }
}

.checkout-step {
  display: flex; align-items: center; gap: 12px;
  padding: 18px clamp(20px, 3vw, 28px);
  border-bottom: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
}
.checkout-step-no {
  width: 24px; height: 24px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #4b6ef6, #8b3df0);
  font-size: 11px; font-weight: 600; color: #ffffff;
}
.checkout-body { padding: clamp(20px, 3vw, 28px); }
.checkout-body + .checkout-step { border-top: 1px solid rgba(255,255,255,0.08); }

.success-mark {
  width: 62px; height: 62px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: linear-gradient(140deg, #3ecf8e, #2aa9c9);
  box-shadow: 0 14px 40px rgba(62,207,142,0.32);
  font-size: 28px; color: #05210f;
}

/* ---------- signals & affiliate (scope v2) ---------- */

/* Levels are withheld from members without active access. */
.locked-levels {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 12px;
  border: 1px dashed rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.03);
  display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
  font-size: 12.5px; font-weight: 300; color: rgba(255,255,255,0.55);
}

/* Read-only value plus an action, e.g. the affiliate link. */
.copy-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: stretch; }
.copy-row .input { flex: 1 1 260px; min-width: 0; }

/* Unread counter on the topbar bell. */
.icon-btn.bell { position: relative; text-decoration: none; }
.bell-dot {
  position: absolute; top: -5px; right: -5px;
  min-width: 17px; height: 17px; padding: 0 4px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: linear-gradient(140deg, #ef5b6b, #b8324a);
  font-size: 9.5px; font-weight: 600; color: #ffffff;
  box-shadow: 0 0 0 2px rgba(9,7,20,0.9);
}

/* Numbered how-it-works lists reuse .checklist but need round markers. */
.checklist > div > span {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 18px;
}

select.input {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, rgba(255,255,255,0.5) 50%),
                    linear-gradient(135deg, rgba(255,255,255,0.5) 50%, transparent 50%);
  background-position: calc(100% - 19px) calc(50% + 1px), calc(100% - 14px) calc(50% + 1px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 38px;
}
select.input option { background: #0f0b1e; color: #ffffff; }

textarea.input { resize: vertical; line-height: 1.6; }

/* Anchor-based tabs (admin filters) must match the button ones. */
a.tab {
  display: inline-flex; align-items: center;
  text-decoration: none;
}

/* ---------- consent checkbox ---------- */
/* The box must sit on the first line of wrapping copy, not float above it.
   Centring it within one line-box keeps it aligned however the text reflows. */
.check {
  align-items: flex-start;
  gap: 11px;
}
.check > span { display: block; flex: 1; min-width: 0; }
.check input[type="checkbox"] {
  width: 16px; height: 16px; flex: none;
  /* (line-height - box height) / 2, so it centres on the first line only. */
  margin: calc((1.7em - 16px) / 2) 0 0;
  accent-color: #7a3cf0;
  cursor: pointer;
}
.check a { text-decoration: underline; text-underline-offset: 2px; }

/* ---------- legal pages ---------- */
.legal-wrap {
  max-width: 780px;
  margin: 0 auto;
  padding: clamp(28px, 5vw, 56px) clamp(18px, 5vw, 40px) clamp(56px, 8vw, 90px);
}
.legal h1 { margin: 10px 0 0; }
.legal h2 {
  margin: 34px 0 10px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: #ffffff;
}
.legal p, .legal li {
  font-size: 13.5px; line-height: 1.85; font-weight: 300;
  color: rgba(255,255,255,0.66);
}
.legal p { margin: 0 0 12px; }
.legal ul { margin: 0 0 12px; padding-left: 20px; }
.legal li { margin-bottom: 7px; }
.legal strong { font-weight: 500; color: rgba(255,255,255,0.9); }
.legal .lede { margin-bottom: 8px; }

/* ---------- install prompt ---------- */
.install-banner {
  position: fixed;
  left: 50%;
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 80;
  width: min(560px, calc(100% - 24px));
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(16,12,32,0.94);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
}
.install-icon { flex: none; border-radius: 10px; }
.install-copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.install-copy strong { font-size: 13px; font-weight: 500; color: #ffffff; }
.install-sub { font-size: 11.5px; line-height: 1.5; font-weight: 300; color: rgba(255,255,255,0.55); }
.install-share {
  display: inline-block; padding: 0 3px;
  border-radius: 4px; background: rgba(255,255,255,0.12);
}
.install-actions { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.install-dismiss { font-size: 11px; color: rgba(255,255,255,0.45); }

@media (max-width: 460px) {
  .install-banner { align-items: flex-start; }
  .install-actions { flex-direction: column; }
}

/* Never show it once the app is running as an installed app. */
@media (display-mode: standalone) {
  .install-banner { display: none !important; }
}

/* ---------- tab panels ---------- */
/* Panels are shown by default so the page is complete without JS; the
   script hides all but the active one. The global [hidden] rule does the
   hiding, so nothing here may set display on .tab-panel. */
.tab-panel { margin-top: 0; }
.tabs[data-tabs] { gap: 6px; overflow-x: auto; padding-bottom: 2px; }
/* The bar scrolls sideways on a phone rather than wrapping to two rows. */
.tabs[data-tabs] .tab { flex: none; }
.tabs[data-tabs]::-webkit-scrollbar { height: 0; }

/* ---------- topbar heading / breadcrumb ---------- */
/* The page title used to sit in the topbar flex row. A long one pushed the
   bell and the Live signals button around and stretched the bar, so on the
   drawer breakpoint the title moves out into its own breadcrumb strip and the
   bar is left with just the hamburger and the actions. */
.topbar-lead { display: flex; align-items: center; gap: 12px; min-width: 0; }
.topbar-heading { min-width: 0; }

.crumbs { display: none; }
.crumbs ol {
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px;
  margin: 0; padding: 0; list-style: none;
}
.crumbs li { display: flex; align-items: center; gap: 6px; min-width: 0; }
/* The separator belongs to the item that follows it, so it never trails the
   last crumb and never sits alone at the start of a wrapped line. */
.crumbs li + li::before {
  content: "\203A";
  color: rgba(255,255,255,0.28);
  font-size: 13px; line-height: 1;
}
.crumbs a { color: rgba(255,255,255,0.5); }
.crumbs a:hover { color: #ffffff; }
.crumbs [aria-current="page"] {
  color: #ffffff; font-weight: 500;
  /* The leaf is the real heading here, so let it truncate rather than wrap. */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

@media (max-width: 980px) {
  .topbar { padding-top: 14px; padding-bottom: 14px; }
  .topbar-heading { display: none; }
  .topbar-actions { gap: 8px; }

  .crumbs {
    display: block;
    position: sticky; top: 66px; z-index: 24;
    padding: 9px clamp(16px, 3vw, 34px) 10px;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    background: rgba(9,7,20,0.82);
    backdrop-filter: blur(16px);
    font-size: 12.5px;
  }
  .crumbs [aria-current="page"] { max-width: 62vw; }
}
/* ---------- mobile readability ---------- */
/* Body copy is tuned for a desktop reading distance; on a phone the same
   pixel sizes read as fine print. Headings already scale with vw via clamp(),
   so only the fixed-size copy, labels and controls are lifted here. */
@media (max-width: 720px) {
  .lede { font-size: 15px; }
  .body-sm { font-size: 14px; }
  .meta { font-size: 12px; }
  .checklist { font-size: 14.5px; }

  .btn { font-size: 14.5px; }
  .btn-ghost { font-size: 14px; }

  .field-label { font-size: 13px; }
  /* 16px is the threshold below which iOS Safari zooms into a focused field,
     so this doubles as a fix for the page jumping on every tap. */
  .input { font-size: 16px; }
  .input-action { font-size: 12.5px; }
  .check { font-size: 13.5px; }
  .alert { font-size: 13px; }
  .notice { font-size: 13.5px; }
  .divider { font-size: 12px; }
  .strength-label { font-size: 11.5px; }

  .side-title { font-size: 10.5px; }
  .side-link, .side-link i { font-size: 14.5px; }
  .topbar p { font-size: 13px; }

  .stat-label, .stat-note { font-size: 12px; }
  .pill { font-size: 11.5px; }
  .tab { font-size: 13px; }
  table.data th { font-size: 11.5px; }
  table.data td { font-size: 13.5px; }
  .kv-k { font-size: 11.5px; }
  .kv-v { font-size: 14px; }
  .trace { font-size: 12px; }

  .auth-back { font-size: 13.5px; }
  .checkout-secure { font-size: 12.5px; }
  .locked-levels { font-size: 13.5px; }

  .legal p, .legal li { font-size: 15px; }

  .install-copy strong { font-size: 14px; }
  .install-sub { font-size: 12.5px; }
  .install-dismiss { font-size: 12px; }
}