/* ============================================================
   Anakai App Prototype — shared styles
   Visual language ported from shapes/_l0-explore/network-health.html
   (dark theme, Maks-approved). Conventions: prototype-conventions.md;
   Rule 6 (no brand colors) superseded for app/ — see app-prototype-design.md.
   ============================================================ */

/* ---------- tokens ---------- */
:root {
  --board: #0f1115;
  --screen: #14161c;
  --frame: #15181e;
  --frame-border: rgba(255,255,255,0.18);

  --card: rgba(255,255,255,0.04);
  --card-soft: rgba(255,255,255,0.03);
  --card-border: rgba(255,255,255,0.08);
  --hairline: rgba(255,255,255,0.07);

  --text: rgba(255,255,255,0.85);
  --text-hi: #ffffff;
  --text-mid: rgba(255,255,255,0.6);
  --text-low: rgba(255,255,255,0.4);

  --acc-blue: rgba(140,190,255,1);
  --acc-purple: rgba(180,140,230,1);
  --acc-gold: rgba(255,210,120,1);
  --acc-gold-deep: rgba(230,160,90,1);
  --acc-teal: rgba(72,207,173,1);
  --acc-green: rgba(120,220,160,1);
  --acc-orange: rgba(230,140,90,1);
  --acc-red: rgba(255,125,125,1);

  --grad-primary: linear-gradient(135deg, rgba(140,190,255,0.95), rgba(180,140,230,0.95));
  --grad-gold: linear-gradient(135deg, rgba(255,200,110,0.96), rgba(230,150,90,0.96));
  --grad-warm: linear-gradient(135deg, rgba(120,210,180,0.95), rgba(110,170,235,0.92));
  --grad-logo: linear-gradient(135deg, #7fb4e8, #6fcf9f);

  --r-card: 15px;
  --r-btn: 13px;

  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-serif: 'Source Serif 4', Georgia, 'Times New Roman', serif;

  --nav-clearance: 104px;
}

* { box-sizing: border-box; }

/* ---------- board (the page around the phone) ---------- */
body.board {
  margin: 0;
  font-family: var(--font);
  background: var(--board);
  color: var(--text);
  padding: 28px 32px 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  min-height: 100vh;
}
.board-title { font-size: 16px; font-weight: 700; color: var(--text-hi); margin: 0; align-self: center; }
.board-note { font-size: 12px; color: var(--text-mid); margin: 0; max-width: 640px; text-align: center; line-height: 1.5; }
.board-note b { color: var(--text); }
.board-link { color: var(--acc-blue); text-decoration: none; }
.board-link:hover { text-decoration: underline; }

/* ---------- phone shell ---------- */
sp-app-frame { display: block; }
.frame {
  width: 390px; height: 844px;
  background: var(--frame);
  border: 1.5px solid var(--frame-border);
  border-radius: 38px;
  padding: 12px;
  display: flex; flex-direction: column;
  flex-shrink: 0;
}
.frame-caption { font-size: 12px; color: var(--text-low); text-align: center; margin-bottom: 10px; }
.screen {
  flex: 1;
  background: var(--screen);
  border-radius: 28px;
  display: flex; flex-direction: column;
  overflow: hidden;
  position: relative;
}
.statusbar {
  display: flex; justify-content: space-between;
  font-size: 11px; color: rgba(255,255,255,0.55);
  padding: 14px 24px 0;
  flex-shrink: 0;
}
.home-indicator {
  position: absolute; bottom: 7px; left: 50%; transform: translateX(-50%);
  width: 120px; height: 4px; border-radius: 2px;
  background: rgba(255,255,255,0.35);
  z-index: 40;
  pointer-events: none;
}

/* scrollable content column inside .screen */
.screen-body {
  flex: 1;
  padding: 6px 15px 12px;
  display: flex; flex-direction: column; gap: 12px;
  overflow-y: auto;
  /* soft fade under the header instead of a hard clip while scrolling */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 20px, #000 100%);
}
.screen-body::-webkit-scrollbar { width: 0; }
.screen-body.with-nav { padding-bottom: var(--nav-clearance); }

/* ---------- app header (greeting + avatar) ---------- */
.app-header { display: flex; align-items: center; gap: 12px; padding: 12px 22px 10px; flex-shrink: 0; }
.app-header .who { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.app-header .hello { font-family: var(--font-serif); font-style: italic; font-size: 15px; color: var(--text-hi); }
.app-header .sub { font-size: 11.5px; color: var(--text-mid); }
.bell { position: relative; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; color: var(--text-mid); text-decoration: none; flex-shrink: 0; margin-right: 9px; }
.bell svg { width: 18px; height: 18px; }
.bell .b-dot { position: absolute; top: 1px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,0.95); border: 2px solid #14161c; }
.avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: linear-gradient(135deg, rgba(140,190,255,0.5), rgba(180,140,230,0.5));
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 650; color: #fff; flex-shrink: 0;
  text-decoration: none;
}

/* ---------- bottom overlay nav: scrim + pill + Ana FAB ---------- */
.nav-scrim {
  position: absolute; left: 0; right: 0; bottom: 0; height: 128px;
  background: linear-gradient(180deg, rgba(20,22,28,0) 0%, rgba(20,22,28,0.82) 52%, rgba(20,22,28,0.97) 100%);
  pointer-events: none;
  z-index: 20;
}
.nav-row {
  position: absolute; left: 14px; right: 14px; bottom: 22px;
  display: flex; align-items: center; justify-content: space-between;
  z-index: 30;
}
.pill-nav {
  display: flex; align-items: center; gap: 4px;
  padding: 5px;
  border-radius: 999px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.12);
  backdrop-filter: blur(6px);
}
.pill-item {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 11px;
  border-radius: 999px;
  color: var(--text-low);
  text-decoration: none;
  font-size: 12.5px; font-weight: 650;
}
.pill-item svg { width: 19px; height: 19px; display: block; }
.pill-item.active {
  background: rgba(255,255,255,0.13);
  color: var(--text-hi);
  padding: 9px 14px 9px 11px;
}
.pill-item.active svg { color: var(--acc-gold); }
.pill-item .pill-label { display: none; }
.pill-item.active .pill-label { display: inline; }
.pill-item.nav-soon { opacity: 0.55; cursor: default; }

.ana-fab {
  width: 52px; height: 52px; border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 25%, rgba(150,215,235,0.95), rgba(111,207,159,0.9) 55%, rgba(90,150,210,0.92));
  border: 1px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
  text-decoration: none;
  position: relative;
  flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(90,180,190,0.35);
}
.ana-fab svg { width: 24px; height: 24px; }
/* no lock badge on the FAB — the paywall stub inside Ana does the selling (Dima 2026-07-07) */

/* ---------- shared content patterns (ported from network-health) ---------- */
.sec {
  font-size: 10.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  color: var(--text-low);
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 2px;
}
.sec .cnt { color: rgba(255,255,255,0.32); font-weight: 600; letter-spacing: 0; }
.card { background: var(--card); border: 1px solid var(--card-border); border-radius: var(--r-card); padding: 14px; }

.status-pill { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; font-size: 11.5px; font-weight: 650; }
.status-pill.ok   { background: rgba(72,207,173,0.14); border: 1px solid rgba(72,207,173,0.4); color: rgba(140,235,200,0.98); }
.status-pill.warn { background: rgba(255,200,110,0.12); border: 1px solid rgba(255,200,110,0.35); color: rgba(255,220,160,0.95); }
.status-pill.risk { background: rgba(230,140,90,0.16); border: 1px solid rgba(230,140,90,0.42); color: rgba(245,175,135,0.98); }

/* full-height column that hosts header + body + nav inside .screen */
.screen-col { flex: 1; display: flex; flex-direction: column; min-height: 0; }

/* my status / progress */
.ms-top { display: flex; align-items: baseline; justify-content: space-between; }
.ms-rank { font-size: 18px; font-weight: 750; color: var(--text-hi); }
.ms-rank small { font-size: 12px; font-weight: 600; color: rgba(255,255,255,0.5); margin-left: 6px; }
.ms-qv { font-size: 12.5px; color: rgba(255,255,255,0.7); font-weight: 600; font-variant-numeric: tabular-nums; }
.ms-qv b { color: #fff; }
.ms-qv i { font-style: normal; color: rgba(255,255,255,0.42); font-weight: 500; font-size: 11px; }
.ms-bar { position: relative; height: 9px; border-radius: 5px; background: rgba(255,255,255,0.08); margin-top: 12px; overflow: hidden; }
.ms-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: linear-gradient(90deg, rgba(140,190,255,0.85), rgba(180,140,230,0.9)); }
.ms-fill.gold { background: linear-gradient(90deg, rgba(255,210,120,0.7), rgba(230,160,90,0.8)); }
.ms-foot { margin-top: 9px; font-size: 11.5px; color: rgba(255,255,255,0.62); line-height: 1.4; }
.ms-foot b { color: rgba(255,210,120,0.98); }
.ms-foot b.good { color: rgba(120,220,160,0.98); }

/* leg balance */
.nh { background: var(--card-soft); border: 1px solid rgba(255,255,255,0.1); border-radius: 16px; padding: 15px; }
.nh-head { display: flex; align-items: center; justify-content: space-between; }
.nh-cap { font-size: 10.5px; color: var(--text-low); font-weight: 600; }
.legs { margin-top: 13px; display: flex; flex-direction: column; gap: 11px; }
.leg { font-size: 12.5px; }
.leg-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 5px; }
.leg-name { flex: 1; color: rgba(255,255,255,0.85); }
.leg-name .up { color: rgba(255,210,120,0.92); font-weight: 600; }
.leg-name .rk-tag { color: var(--text-low); font-weight: 500; }
.leg-qv { color: rgba(255,255,255,0.5); font-variant-numeric: tabular-nums; font-size: 11.5px; }
.leg-pct { width: 38px; text-align: right; font-weight: 700; color: rgba(255,255,255,0.95); }
.lbar { position: relative; height: 10px; border-radius: 5px; background: rgba(255,255,255,0.07); overflow: hidden; }
.lbar .counted { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; }
.lbar .counted.good { background: rgba(72,207,173,0.8); }
.lbar .counted.cap  { background: rgba(230,140,90,0.85); }
.lbar .surplus { position: absolute; top: 0; bottom: 0;
  background-image: repeating-linear-gradient(45deg, rgba(230,140,90,0.4) 0 4px, rgba(230,140,90,0.12) 4px 8px); }
.lbar .capline { position: absolute; left: 40%; top: -3px; bottom: -3px; width: 2px; background: rgba(255,255,255,0.6); z-index: 2; }
.leg-note { margin-top: 4px; font-size: 10.5px; color: rgba(245,175,135,0.9); }
.cap-key { display: inline-flex; align-items: center; gap: 5px; font-size: 10px; color: rgba(255,255,255,0.42); margin-top: 11px; }
.cap-key i { display: inline-block; width: 2px; height: 11px; background: rgba(255,255,255,0.6); }
.fix { margin-top: 14px; font-size: 12.5px; color: rgba(255,235,200,0.95); line-height: 1.5; background: rgba(255,200,110,0.09); border: 1px solid rgba(255,200,110,0.26); border-radius: 12px; padding: 12px 13px; }
.fix .fl { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: rgba(255,210,120,0.8); display: block; margin-bottom: 5px; }
.fix b { color: var(--text-hi); }
.fix.ok { background: rgba(72,207,173,0.08); border-color: rgba(72,207,173,0.26); color: rgba(205,240,228,0.95); }
.fix.ok .fl { color: rgba(140,235,200,0.85); }

/* buttons */
.unlock-btn { margin-top: 13px; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 14px; border-radius: var(--r-btn); font-size: 14px; font-weight: 750; cursor: default; text-decoration: none; }
.unlock-btn.gold { background: var(--grad-gold); color: #20160a; }
.unlock-btn.warm { background: var(--grad-warm); color: #07221c; }
.btn-primary { display: flex; align-items: center; justify-content: center; padding: 15px; border-radius: var(--r-btn); font-size: 14.5px; font-weight: 750; text-decoration: none; background: var(--grad-gold); color: #20160a; }
.btn-ghost { display: flex; align-items: center; justify-content: center; padding: 13px; border-radius: var(--r-btn); font-size: 13px; font-weight: 650; text-decoration: none; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: var(--text); }

/* invite / referral strip */
.invite-row { display: flex; align-items: center; gap: 7px; }
.invite-link { flex: 1; font-size: 12px; color: rgba(195,218,255,0.92); background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 10px; padding: 10px 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.invite-copy { font-size: 12px; font-weight: 650; color: rgba(195,218,255,0.95); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); border-radius: 9px; padding: 9px 12px; }
.invite-share { font-size: 12px; font-weight: 700; color: #fff; background: var(--grad-primary); border-radius: 9px; padding: 9px 13px; }
.card.invite { background: linear-gradient(135deg, rgba(140,190,255,0.10), rgba(180,140,230,0.07)); border-color: rgba(140,190,255,0.26); padding: 12px; }
.invite-hint { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 9px; }

/* team ranks donut */
.donut-wrap { display: flex; align-items: center; gap: 15px; }
.donut { width: 112px; height: 112px; border-radius: 50%; flex-shrink: 0; position: relative; }
.donut::after { content: ''; position: absolute; inset: 25px; border-radius: 50%; background: #181b22; }
.donut-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 1; }
.donut-num { font-size: 23px; font-weight: 780; color: #fff; line-height: 1; }
.donut-lbl { font-size: 9px; color: rgba(255,255,255,0.5); margin-top: 2px; letter-spacing: 0.5px; }
.donut-legend { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dl { display: flex; align-items: center; gap: 7px; font-size: 11px; }
.dl .sw { width: 9px; height: 9px; border-radius: 2px; flex-shrink: 0; }
.dl .dlr { color: rgba(255,255,255,0.82); font-weight: 650; width: 30px; }
.dl .dln { color: rgba(255,255,255,0.45); font-size: 10.5px; }
.dl .dlc { color: rgba(255,255,255,0.6); margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 600; }
.dl.above .dlr { color: rgba(255,210,120,0.95); }
.donut-note { font-size: 10.5px; color: rgba(255,255,255,0.5); margin-top: 11px; line-height: 1.45; border-top: 1px solid var(--hairline); padding-top: 9px; }
.donut-note b { color: rgba(255,210,120,0.9); }
.near { margin-top: 11px; font-size: 12px; color: rgba(255,225,160,0.92); line-height: 1.45; }
.near b { color: var(--text-hi); }

/* bonus blocks */
.bb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bb-status { font-size: 13.5px; font-weight: 700; }
.bb-status.ok { color: rgba(120,220,160,0.98); }
.bb-status.warn { color: rgba(255,210,120,0.98); }
.bb-status.protect { color: rgba(150,200,255,0.98); }
.bb-sub { font-size: 11.5px; color: rgba(255,255,255,0.52); margin-top: 4px; line-height: 1.45; }
.bb-sub b { color: rgba(255,255,255,0.8); }
.secured-strip { padding: 11px 13px; display: flex; align-items: center; gap: 10px; background: rgba(72,207,173,0.08); border: 1px solid rgba(72,207,173,0.28); border-radius: 14px; }
.secured-strip .txt { flex: 1; font-size: 11.5px; color: rgba(205,240,228,0.95); }
.secured-strip .txt b { color: #fff; }
.secured-strip .txt .dim { color: rgba(255,255,255,0.5); }

/* help / people rows */
.help { margin-top: 11px; border-top: 1px solid var(--hairline); padding-top: 11px; }
.help-t { font-size: 11.5px; color: rgba(255,255,255,0.55); margin-bottom: 8px; line-height: 1.4; }
.help-t b { color: rgba(255,210,120,0.95); }
.prow { display: flex; align-items: center; gap: 9px; padding: 6px 0; }
.pav { width: 27px; height: 27px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 10px; color: rgba(255,255,255,0.7); flex-shrink: 0; font-weight: 600; }
.pmain { flex: 1; min-width: 0; }
.pname { font-size: 13px; color: rgba(255,255,255,0.88); }
.pmeta { font-size: 11px; color: rgba(255,255,255,0.45); line-height: 1.35; }
.pmeta b { color: rgba(255,210,120,0.9); }
.pmeta .on { color: rgba(120,225,180,0.95); }
.pmeta .off { color: var(--text-low); }
.pchip { font-size: 10.5px; font-weight: 600; padding: 5px 11px; border-radius: 999px; background: rgba(140,190,255,0.14); border: 1px solid rgba(140,190,255,0.34); color: rgba(190,215,255,0.98); white-space: nowrap; }
.pchip.ok { background: rgba(72,207,173,0.14); border-color: rgba(72,207,173,0.36); color: rgba(150,235,200,0.98); }
.pchip.warn { background: rgba(255,210,120,0.16); border-color: rgba(255,210,120,0.4); color: rgba(255,225,160,0.98); }

/* legacy floating 40% tick — Tier C draft only (pre-rework style, kept as-is) */
.tickwrap { position: relative; height: 0; }
.tick { position: absolute; left: 40%; top: -13px; height: 13px; width: 2px; background: rgba(255,255,255,0.55); }
.tick::after { content: '40%'; position: absolute; top: -13px; left: 50%; transform: translateX(-50%); font-size: 8.5px; color: rgba(255,255,255,0.5); white-space: nowrap; }

/* draft marker for not-yet-reworked states (top-center: clear of avatar and modal ✕) */
.draft-pill { position: absolute; top: 44px; left: 50%; transform: translateX(-50%); z-index: 60; font-size: 9.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 4px 10px; border-radius: 999px; background: rgba(28,24,26,0.9); box-shadow: 0 0 0 1px rgba(255,110,110,0.55); border: none; color: rgba(255,170,170,0.98); white-space: nowrap; }

/* locked preview */
.locked { background: linear-gradient(135deg, rgba(120,210,180,0.10), rgba(110,170,235,0.07)); border: 1px solid rgba(120,210,180,0.28); border-radius: 16px; padding: 15px; }
.locked-h { display: flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: var(--text-hi); }
.locked-h .lk { font-size: 14px; }
.locked-sub { font-size: 11.5px; color: rgba(255,255,255,0.6); margin-top: 4px; line-height: 1.45; }
.locked-items { margin-top: 12px; display: flex; flex-direction: column; gap: 9px; }
.li { display: flex; align-items: center; gap: 11px; }
.li .lic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.li .lit { font-size: 12.5px; color: rgba(255,255,255,0.9); font-weight: 600; }
.li .lid { font-size: 11px; color: rgba(255,255,255,0.5); margin-top: 1px; }

/* goals stack */
.ms2 { display: flex; flex-direction: column; gap: 13px; }
.ms2 > div + div { border-top: 1px solid var(--hairline); padding-top: 13px; }
.goal-h { display: flex; align-items: baseline; justify-content: space-between; }
.goal-n { font-size: 13.5px; font-weight: 700; color: var(--text-hi); }
.goal-n b { color: rgba(255,210,120,0.95); }
.goal-r { font-size: 11.5px; color: rgba(255,255,255,0.5); font-weight: 600; }
.goal-v { font-size: 11.5px; color: rgba(255,255,255,0.6); margin-top: 8px; font-variant-numeric: tabular-nums; line-height: 1.45; }
.goal-v b { color: rgba(255,235,200,0.95); }

/* selling modal */
.modal { flex: 1; border-radius: 28px; overflow: hidden; display: flex; flex-direction: column; position: relative; }
.modal.tierC { background: radial-gradient(120% 60% at 50% 0%, rgba(255,200,110,0.24), rgba(120,70,30,0.10) 45%, #14161c 80%); }
.modal.tierB { background: radial-gradient(120% 60% at 50% 0%, rgba(140,180,255,0.22), rgba(40,60,120,0.10) 48%, #14161c 82%); }
.modal.tierA { background: radial-gradient(120% 60% at 50% 0%, rgba(110,215,180,0.20), rgba(30,90,80,0.10) 48%, #14161c 82%); }
.m-glow { position: absolute; top: -40px; left: 50%; transform: translateX(-50%); width: 300px; height: 300px; border-radius: 50%; filter: blur(12px); }
.modal.tierC .m-glow { background: radial-gradient(circle, rgba(255,200,110,0.38), transparent 65%); }
.modal.tierB .m-glow { background: radial-gradient(circle, rgba(140,180,255,0.32), transparent 65%); }
.modal.tierA .m-glow { background: radial-gradient(circle, rgba(110,215,180,0.30), transparent 65%); }
.m-top { position: relative; padding: 22px 24px 0; display: flex; justify-content: space-between; align-items: center; }
.m-close { width: 30px; height: 30px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.7); font-size: 16px; text-decoration: none; }
.m-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; }
.modal.tierC .m-eyebrow { color: rgba(255,210,150,0.9); }
.modal.tierB .m-eyebrow { color: rgba(175,205,255,0.9); }
.modal.tierA .m-eyebrow { color: rgba(150,235,205,0.92); }
.m-hero { position: relative; text-align: center; padding: 12px 24px 4px; }
.m-badge { font-size: 60px; line-height: 1; }
.m-rank { font-size: 32px; font-weight: 800; color: #fff; letter-spacing: -0.5px; margin-top: 6px; }
.m-rank span { font-weight: 800; }
.modal.tierC .m-rank span { color: rgba(255,205,130,1); }
.modal.tierB .m-rank span { color: rgba(175,200,255,1); }
.modal.tierA .m-rank span { color: rgba(150,235,205,1); }
.m-tag { font-size: 12.5px; color: rgba(255,255,255,0.72); margin-top: 7px; line-height: 1.45; }
.m-list { padding: 15px 22px 4px; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; flex: 1;
  /* soft fade at BOTH ends instead of hard clips (hero above, horizon pill below) */
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 52px), transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 26px, #000 calc(100% - 52px), transparent 100%); }
.m-list::-webkit-scrollbar { width: 0; }
.m-item { display: flex; align-items: center; gap: 13px; padding: 12px 13px; border-radius: 14px; background: rgba(255,255,255,0.05); }
.modal.tierC .m-item { border: 1px solid rgba(255,210,140,0.18); }
.modal.tierB .m-item { border: 1px solid rgba(160,190,255,0.18); }
.modal.tierA .m-item { border: 1px solid rgba(130,225,195,0.18); }
.m-ic { width: 38px; height: 38px; border-radius: 11px; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.modal.tierC .m-ic { background: rgba(255,200,110,0.14); }
.modal.tierB .m-ic { background: rgba(150,185,255,0.14); }
.modal.tierA .m-ic { background: rgba(120,215,185,0.14); }
.m-item.accent { border-color: rgba(120,210,180,0.4) !important; background: rgba(72,207,173,0.08); }
.m-item.accent .m-ic { background: rgba(72,207,173,0.16) !important; }
.m-it { flex: 1; }
.m-ih { font-size: 14px; font-weight: 700; color: #fff; }
.m-is { font-size: 11.5px; color: rgba(255,255,255,0.62); margin-top: 2px; line-height: 1.38; }
.m-horizon { font-size: 11px; text-align: center; padding: 10px 22px 0; line-height: 1.5; }
.m-horizon span { display: inline-block; padding: 7px 13px; border-radius: 999px; background: rgba(255,200,110,0.1); border: 1px solid rgba(255,200,110,0.25); color: rgba(255,220,160,0.92); }
.modal.tierA .m-horizon span { background: rgba(120,215,185,0.1); border-color: rgba(120,215,185,0.28); color: rgba(150,235,205,0.95); }
.m-cta { margin: 12px 22px 22px; text-align: center; padding: 16px; border-radius: 15px; font-size: 15px; font-weight: 800; text-decoration: none; display: block; }
.modal.tierC .m-cta { background: linear-gradient(135deg, rgba(255,205,120,1), rgba(235,150,80,1)); color: #221603; }
.modal.tierB .m-cta { background: linear-gradient(135deg, rgba(150,185,255,1), rgba(120,150,245,1)); color: #0a1430; }
.modal.tierA .m-cta { background: linear-gradient(135deg, rgba(120,215,185,1), rgba(110,180,235,1)); color: #07221c; }

/* ---------- auth screens ---------- */
.auth-body { flex: 1; padding: 6px 22px 26px; display: flex; flex-direction: column; overflow-y: auto; }
.auth-body::-webkit-scrollbar { width: 0; }
.auth-back { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; color: var(--text); text-decoration: none; font-size: 15px; margin: 8px 0 14px; }
.auth-title { font-size: 24px; font-weight: 780; color: var(--text-hi); letter-spacing: -0.3px; }
.auth-title .serif { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.auth-sub { font-size: 12.5px; color: var(--text-mid); margin-top: 6px; line-height: 1.5; }
.auth-sub b { color: var(--text); }
.field { margin-top: 16px; }
.field-label-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 7px; }
.field-label { font-size: 12px; font-weight: 650; color: var(--text); }
.field-hint-link { font-size: 12px; color: var(--acc-blue); text-decoration: none; }
.input {
  display: flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 12px;
  padding: 13px 14px;
  font-size: 14px; color: var(--text-hi);
}
.input .placeholder { color: var(--text-low); }
.input .eye { margin-left: auto; opacity: 0.5; font-size: 14px; }
.input.focused { border-color: rgba(140,190,255,0.65); box-shadow: 0 0 0 3px rgba(140,190,255,0.14); }
.input.error { border-color: rgba(255,125,125,0.65); }
.input .caret { display: inline-block; width: 1.5px; height: 16px; background: rgba(140,190,255,0.9); }
.field-error { font-size: 11.5px; color: var(--acc-red); margin-top: 7px; line-height: 1.45; }
.auth-cta { margin-top: auto; }
.auth-note { font-size: 11px; color: var(--text-low); text-align: center; margin-top: 12px; line-height: 1.5; }
.auth-note a { color: var(--acc-blue); text-decoration: none; }

/* toast */
.toast { position: absolute; left: 14px; right: 14px; top: 14px; z-index: 50; display: flex; align-items: center; gap: 9px; background: rgba(30,36,32,0.97); border: 1px solid rgba(120,220,160,0.4); border-radius: 13px; padding: 12px 14px; font-size: 12.5px; color: rgba(205,240,228,0.98); }
.toast .tclose { margin-left: auto; opacity: 0.6; }
.toast.error { border-color: rgba(255,125,125,0.45); color: rgba(255,190,190,0.98); }

/* faceid sheet overlay */
.overlay-dim { position: absolute; inset: 0; background: rgba(0,0,0,0.55); z-index: 45; border-radius: 28px; display: flex; align-items: center; justify-content: center; }
.faceid-card { width: 150px; border-radius: 20px; background: rgba(28,32,40,0.98); border: 1px solid rgba(255,255,255,0.14); padding: 20px 16px; text-align: center; }
.faceid-card .fi-icon { font-size: 44px; }
.faceid-card .fi-t { font-size: 13px; font-weight: 700; color: var(--text-hi); margin-top: 10px; }

/* ============================================================
   Screen-specific sections (Rule 2: all styles live here).
   One block per screen, prefixed by the screen name.
   ============================================================ */

/* ---------- entry-splash ---------- */
.splash-link { display: flex; flex-direction: column; flex: 1; text-decoration: none; }
.splash-center { flex: 1; display: flex; align-items: center; justify-content: center; }
.splash-glow { position: absolute; inset: 30% 15% auto; height: 260px; border-radius: 50%;
  background: radial-gradient(circle, rgba(111,207,159,0.10), rgba(127,180,232,0.06) 55%, transparent 75%);
  filter: blur(10px); pointer-events: none; }
.wordmark { text-align: center; padding-bottom: 54px; font-size: 24px; color: rgba(255,255,255,0.92); letter-spacing: 0.5px; }
.wordmark .kai { font-family: var(--font-serif); font-style: italic; }

/* ---------- entry-welcome ---------- */
.welcome { flex: 1; display: flex; flex-direction: column; position: relative; overflow: hidden;
  background:
    radial-gradient(90% 55% at 50% 78%, rgba(127,180,232,0.20), transparent 70%),
    radial-gradient(70% 40% at 50% 88%, rgba(111,207,159,0.16), transparent 70%),
    radial-gradient(120% 80% at 50% 110%, rgba(60,90,150,0.35), transparent 75%),
    #0b0e14; }
.welcome .statusbar { position: relative; z-index: 2; }
/* neural burst — pure CSS: thin conic rays + core glow */
.burst { position: absolute; left: 50%; top: 62%; width: 340px; height: 340px; transform: translate(-50%, -50%); pointer-events: none; }
.burst .core { position: absolute; inset: 38%; border-radius: 50%;
  background: radial-gradient(circle, rgba(220,240,255,0.85), rgba(140,190,255,0.35) 45%, transparent 70%); filter: blur(2px); }
.burst .rays { position: absolute; inset: 0; border-radius: 50%; opacity: 0.5; filter: blur(0.4px);
  background: repeating-conic-gradient(from 8deg, rgba(160,210,255,0.28) 0deg 1.2deg, transparent 1.2deg 9deg);
  -webkit-mask: radial-gradient(circle, transparent 18%, #000 32%, transparent 72%);
          mask: radial-gradient(circle, transparent 18%, #000 32%, transparent 72%); }
.burst .halo { position: absolute; inset: 10%; border-radius: 50%;
  background: radial-gradient(circle, transparent 45%, rgba(120,180,240,0.12) 60%, transparent 75%); }
.welcome-copy { position: relative; padding: 26px 24px 0; }
.welcome-eyebrow { font-family: var(--font-serif); font-style: italic; font-size: 26px; color: rgba(235,243,255,0.95); }
.welcome-h { font-size: 30px; font-weight: 760; color: #fff; letter-spacing: -0.4px; line-height: 1.18; margin-top: 4px; }
.welcome-cta { position: relative; margin: auto 20px 26px; }

/* ---------- entry-terms ---------- */
.terms-head { padding: 6px 22px 4px; }
.terms-body { flex: 1; overflow-y: auto; padding: 8px 22px 18px; font-size: 12.5px; color: var(--text-mid); line-height: 1.62; }
.terms-body::-webkit-scrollbar { width: 0; }
.terms-body p { margin: 0 0 14px; }
.terms-fade { position: relative; height: 0; }
.terms-fade::before { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 56px;
  background: linear-gradient(180deg, rgba(20,22,28,0), rgba(20,22,28,0.95)); pointer-events: none; }
.agree-row { display: flex; align-items: center; gap: 10px; padding: 12px 22px 4px; font-size: 12.5px; color: var(--text); }
.agree-row a { color: var(--acc-blue); text-decoration: none; }
.checkbox { width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid rgba(255,255,255,0.3); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #07221c; }
.checkbox.checked { background: var(--grad-warm); border-color: transparent; }
.btn-primary.disabled { opacity: 0.4; }
.terms-cta { margin: 10px 20px 24px; }

/* ---------- entry-kyc ---------- */
.kyc-topbar { display: flex; justify-content: space-between; align-items: center; padding: 10px 22px 0; font-size: 11.5px; color: var(--text-mid); flex-shrink: 0; }
.kyc-topbar .kebab { font-size: 15px; color: var(--text-low); letter-spacing: 1px; }
.kyc-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 34px; gap: 10px; }
.icon-circle { width: 66px; height: 66px; border-radius: 50%; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
  display: flex; align-items: center; justify-content: center; font-size: 28px; }
.icon-circle.ok { background: rgba(72,207,173,0.12); border-color: rgba(72,207,173,0.35); }
.icon-circle.warn { background: rgba(255,200,110,0.12); border-color: rgba(255,200,110,0.35); }
.icon-circle.bad { background: rgba(255,125,125,0.10); border-color: rgba(255,125,125,0.32); }
.kyc-h { font-size: 20px; font-weight: 770; color: var(--text-hi); line-height: 1.3; letter-spacing: -0.2px; }
.kyc-h .serif { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.kyc-sub { font-size: 12.5px; color: var(--text-mid); line-height: 1.55; }
.kyc-sub b { color: var(--text); }
.kyc-ctas { margin: 0 20px 24px; display: flex; flex-direction: column; gap: 9px; }
.kyc-link { text-align: center; font-size: 13px; color: var(--text-mid); text-decoration: none; padding: 6px; }
.sumsub-box { flex: 1; margin: 16px 20px; border: 1.5px dashed rgba(255,255,255,0.2); border-radius: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--text-low); font-size: 13px; }
.sumsub-box b { color: var(--text-mid); font-weight: 650; }

/* ---------- entry-2fa ---------- */
.otp-row { display: flex; gap: 8px; margin-top: 4px; text-decoration: none; }
.otp-box { width: 44px; height: 52px; border-radius: 11px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14);
  display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 650; color: var(--text-hi); }
.otp-box.focused { border-color: rgba(140,190,255,0.65); box-shadow: 0 0 0 3px rgba(140,190,255,0.14); }
.otp-box.focused .caret { display: inline-block; width: 1.5px; height: 18px; background: rgba(140,190,255,0.9); }
.otp-box.error { border-color: rgba(255,125,125,0.6); }
.otp-links { display: flex; justify-content: space-between; align-items: baseline; margin-top: 12px; font-size: 12px; }
.otp-links .lnk { color: var(--acc-blue); text-decoration: none; }
.otp-links .paste { color: var(--text-mid); }

/* ---------- entry-forgot ---------- */
.rules { font-size: 11.5px; color: var(--text-mid); line-height: 1.65; margin-top: 10px; }
.rules s { color: var(--text-low); }
.resend-timer { text-align: center; font-size: 12.5px; color: var(--text-low); margin-top: 12px; }
.resend-link { display: block; text-align: center; font-size: 12.5px; color: var(--acc-blue); margin-top: 12px; text-decoration: none; }
.spam-note { font-size: 10.5px; color: var(--text-low); text-align: center; line-height: 1.5; margin-top: 11px; }
.spam-note a { color: var(--acc-blue); text-decoration: none; }
.overlay-dim.bottom { align-items: flex-end; }
.sheet { width: 100%; background: #1b1f26; border: 1px solid rgba(255,255,255,0.1); border-bottom: none;
  border-radius: 22px 22px 28px 28px; padding: 16px 18px 26px; }
.sheet-head { display: flex; justify-content: space-between; align-items: baseline; }
.sheet-title { font-size: 15px; font-weight: 750; color: var(--text-hi); }
.sheet-close { color: var(--text-low); font-size: 15px; }
.sheet-sub { font-size: 11.5px; color: var(--text-mid); margin-top: 3px; }
.sheet-row { display: flex; align-items: center; gap: 11px; padding: 13px 2px; border-bottom: 1px solid var(--hairline); font-size: 13.5px; color: var(--text); }
.sheet-row:last-child { border-bottom: none; }
.sheet-row .mail-ic { width: 28px; height: 28px; border-radius: 8px; background: rgba(255,255,255,0.07); display: flex; align-items: center; justify-content: center; font-size: 14px; }
.sheet-row .ext { margin-left: auto; color: var(--text-low); font-size: 12px; }

/* ---------- entry-passcode ---------- */
.pass-center { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 0 30px; }
.pass-title { font-size: 16px; font-weight: 700; color: var(--text-hi); text-align: center; }
.pass-sub { font-size: 12.5px; color: var(--text-mid); text-align: center; margin-top: -8px; }
.otp-row.pass { justify-content: center; }
/* iOS-style alert (Face not recognized) */
.ios-alert { width: 240px; border-radius: 16px; background: rgba(38,42,50,0.98); border: 1px solid rgba(255,255,255,0.12); overflow: hidden; text-align: center; }
.ios-alert .ia-body { padding: 18px 16px 14px; }
.ios-alert .ia-t { font-size: 14px; font-weight: 700; color: var(--text-hi); }
.ios-alert .ia-s { font-size: 12px; color: var(--text-mid); margin-top: 4px; }
.ios-alert .ia-btn { display: block; padding: 12px; font-size: 13.5px; font-weight: 650; color: rgba(140,190,255,0.98); border-top: 1px solid rgba(255,255,255,0.1); text-decoration: none; }
.ios-alert .ia-btn.plain { color: var(--text-mid); font-weight: 500; }
/* generic chevron row list (forgot-passcode options, settings later) */
.row-list { display: flex; flex-direction: column; }
.row-item { display: flex; align-items: center; gap: 12px; padding: 15px 4px; border-bottom: 1px solid var(--hairline); font-size: 13.5px; color: var(--text); text-decoration: none; }
.row-item:last-child { border-bottom: none; }
.row-item .ri-ic { width: 30px; height: 30px; border-radius: 9px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 14px; flex-shrink: 0; }
.row-item .chev { margin-left: auto; color: var(--text-low); font-size: 14px; }

/* ---------- entry-suite-gate ---------- */
.gate-hero { flex: 0 0 auto; padding: 12px 8px 4px; }
.gate-sec { margin-top: 16px; }
.gate-locked { margin-top: 8px; }
.gate-items { margin-top: 2px; }
.gate-signout { display: block; margin-top: 6px; }
.forgot-options { margin-top: 14px; }
.tier-ladder { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 4px; }
.tier-chip { font-size: 11px; font-weight: 650; padding: 6px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); color: var(--text-low); position: relative; }
.tier-chip.you::after { content: 'you'; position: absolute; top: -7px; right: -6px; font-size: 8px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase;
  background: rgba(255,255,255,0.12); border-radius: 999px; padding: 1px 6px; color: var(--text-mid); }
.tier-chip.target { background: var(--grad-gold); border-color: transparent; color: #20160a; font-weight: 750; }

/* ---------- Live (was Calendar — month/week/day grid removed 2026-07-08) ---------- */
/* timezone line: all event times render in the profile timezone; links to Profile → Settings */
.tz-line { display: flex; justify-content: center; align-items: baseline; gap: 5px; font-size: 10.5px; color: var(--text-low); margin: -2px 0 0; }
.tz-line .tz-change { color: var(--acc-blue); text-decoration: none; }
/* NEW marker: admins added/updated this day's events since your last look; clears on tap (seen) */
.new-pill { position: absolute; top: -3px; right: -4px; font-size: 7.5px; font-weight: 800; letter-spacing: 0.5px;
  background: rgba(255,255,255,0.92); color: #101216; border-radius: 999px; padding: 1.5px 5px; }
/* spacing utilities (stop the inline-style creep in flow layouts) */
.stack-8 { margin-top: 8px; }
.stack-16 { margin-top: 16px; }
/* inline code/file tokens in the dev board docs (replaces inline style="font-family:monospace") */
.mono { font-family: 'SF Mono', Consolas, ui-monospace, monospace; }
.live-badge { display: inline-flex; align-items: center; gap: 5px; background: rgba(255,255,255,0.95); color: #101216; font-size: 9.5px; font-weight: 800; letter-spacing: 0.8px; text-transform: uppercase; padding: 3px 9px; border-radius: 999px; }
.live-badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #101216; }
/* rank-fit chip on events */
.rank-fit { display: inline-flex; align-items: center; font-size: 9.5px; font-weight: 700; letter-spacing: 0.4px; text-transform: uppercase; color: rgba(255,255,255,0.8); background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 2px 8px; }

/* ---------- calendar-event ---------- */
.ev-cover { position: relative; height: 148px; border-radius: 16px; overflow: hidden;
  background: radial-gradient(120% 110% at 20% 0%, rgba(255,255,255,0.16), rgba(255,255,255,0.05) 45%, rgba(10,12,16,0.9)), #0d0f14;
  border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: flex-end; padding: 12px; }
.ev-cover .cover-mark { position: absolute; top: 14px; right: 14px; opacity: 0.5; }
.ev-title { font-size: 20px; font-weight: 770; color: var(--text-hi); letter-spacing: -0.2px; line-height: 1.25; margin-top: 14px; }
.ev-meta-rows { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.ev-meta-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text); }
.ev-meta-row .mi { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.06); display: flex; align-items: center; justify-content: center; font-size: 12px; flex-shrink: 0; }
.ev-meta-row b { color: var(--text-hi); }
.countdown-chip { display: inline-flex; align-items: center; gap: 6px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); border-radius: 999px; padding: 6px 12px; font-size: 11.5px; font-weight: 650; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.ev-desc { font-size: 12.5px; color: var(--text-mid); line-height: 1.55; }
.ev-desc b { color: var(--text); }

/* ---------- webinar player + chat ---------- */
.player { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; flex-shrink: 0;
  background: radial-gradient(100% 130% at 50% 0%, rgba(255,255,255,0.10), rgba(255,255,255,0.03) 55%, #0a0c10), #0a0c10;
  border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; }
.play-btn { width: 52px; height: 52px; border-radius: 50%; background: rgba(255,255,255,0.94); color: #101216; display: flex; align-items: center; justify-content: center; font-size: 18px; padding-left: 4px; }
.player .p-live { position: absolute; top: 10px; left: 10px; }
.player .p-count { position: absolute; top: 10px; right: 10px; font-size: 10.5px; color: rgba(255,255,255,0.85); background: rgba(10,12,16,0.7); border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; padding: 4px 9px; }
.player .p-via { position: absolute; bottom: 8px; right: 10px; font-size: 9.5px; color: rgba(255,255,255,0.45); letter-spacing: 0.3px; }
.player .p-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,0.15); }
.player .p-progress i { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(255,255,255,0.85); }
.player .p-time { position: absolute; bottom: 8px; left: 10px; font-size: 10px; color: rgba(255,255,255,0.75); font-variant-numeric: tabular-nums; }
.stream-head { padding: 12px 2px 8px; }
.stream-title { font-size: 14.5px; font-weight: 750; color: var(--text-hi); line-height: 1.3; }
.stream-meta { font-size: 11px; color: var(--text-mid); margin-top: 3px; }
/* floating reactions over the player: static ones set the scene, .fly spawns on tap */
.float-emoji { position: absolute; font-size: 16px; opacity: 0.85; pointer-events: none; z-index: 4; }
.float-emoji.fe1 { right: 18px; bottom: 30px; }
.float-emoji.fe2 { right: 44px; bottom: 62px; font-size: 13px; opacity: 0.5; }
.float-emoji.fe3 { right: 29px; bottom: 92px; font-size: 19px; opacity: 0.65; }
.float-emoji.fly { bottom: 14px; animation: float-up 1.4s ease-out forwards; }
@keyframes float-up { from { transform: translateY(0); opacity: 0.9; } to { transform: translateY(-96px); opacity: 0; } }

/* landscape live: fullscreen video, reactions overlaid (chat stays in portrait) */
.frame.landscape { width: 844px; height: 390px; }
.land { flex: 1; display: flex; min-height: 0; position: relative; }
.player.fill { flex: 1; aspect-ratio: auto; height: 100%; border-radius: 0; border: none; }
.player.fill .auth-back { position: absolute; top: 10px; left: 12px; margin: 0; z-index: 5; }
.player.fill .p-live { top: 12px; left: 58px; }
.chat-input .ci-field { display: flex; align-items: center; gap: 8px; }
/* chat-feed / chat-input primitives — used by the Anakai chat and the live webinar chat */
.chat-feed { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 11px; min-height: 0; margin-top: 12px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 100%);
          mask-image: linear-gradient(180deg, transparent 0, #000 16px, #000 100%); }
.chat-feed::-webkit-scrollbar { width: 0; }
.chat-input { display: flex; gap: 8px; align-items: center; padding-top: 10px; flex-shrink: 0; }
.chat-input .ci-field { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 999px; padding: 11px 15px; font-size: 12.5px; color: var(--text-low); }
.chat-input .ci-send { width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,0.92); color: #101216; display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
/* replay chapters */
.chapter-row { display: flex; align-items: center; gap: 10px; padding: 11px 2px; border-bottom: 1px solid var(--hairline); font-size: 12.5px; color: var(--text); text-decoration: none; }
.chapter-row:last-child { border-bottom: none; }
.chapter-row .ch-time { width: 44px; font-variant-numeric: tabular-nums; color: var(--text-mid); font-size: 11.5px; }
.chapter-row .ch-now { margin-left: auto; font-size: 9.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: rgba(255,255,255,0.9); background: rgba(255,255,255,0.12); border-radius: 999px; padding: 2px 8px; }

/* ---------- Live feed (Calendar → Live, 2026-07-08): pinned broadcast · sponsored slot · host action ---------- */
/* pinned at the top: the live webinar, or the latest replay when nothing is live */
.live-pin { display: block; background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 14px; text-decoration: none; }
.live-pin.on { border-color: rgba(255,255,255,0.4); background: rgba(255,255,255,0.06); }
.live-pin .lp-top { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.live-pin .lp-kicker { font-size: 10px; font-weight: 800; letter-spacing: 0.7px; text-transform: uppercase; color: var(--text-mid); }
.live-pin .lp-count { margin-left: auto; font-size: 10.5px; color: var(--text-low); }
.live-pin .lp-title { font-size: 15px; font-weight: 780; color: var(--text-hi); line-height: 1.3; letter-spacing: -0.2px; }
.live-pin .lp-meta { font-size: 11.5px; color: var(--text-mid); margin-top: 4px; }
.live-pin .lp-cta { display: inline-flex; margin-top: 12px; }
/* Sponsored — company promo BANNER (a flagship company event, e.g. a summit; targeted by rank + language; first 2 months = 2 company promos) */
.ad-banner { position: relative; display: flex; flex-direction: column; justify-content: flex-end; overflow: hidden; min-height: 128px; padding: 15px 16px; border-radius: 16px; border: 1px solid var(--card-border); text-decoration: none;
  background: radial-gradient(130% 120% at 82% 0%, rgba(255,255,255,0.17), rgba(255,255,255,0.045) 46%, rgba(10,12,16,0.92)), #0d0f14; }
.ad-banner .ad-mark { position: absolute; top: 13px; right: 14px; opacity: 0.5; }
.ad-banner .ad-t { font-size: 19px; font-weight: 800; color: var(--text-hi); letter-spacing: -0.3px; line-height: 1.15; }
.ad-banner .ad-m { font-size: 12px; color: var(--text-mid); margin-top: 5px; }
.ad-banner .ad-cta { margin-top: 11px; font-size: 12px; font-weight: 750; color: var(--text-hi); }
/* empty Live feed — nothing scheduled at all (warm, replay fallback) */
.feed-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 40px 26px 28px; }
.feed-empty .fe-ic { font-size: 30px; opacity: 0.5; }
.feed-empty .fe-t { font-size: 15px; font-weight: 750; color: var(--text-hi); }
.feed-empty .fe-s { font-size: 12.5px; color: var(--text-mid); line-height: 1.5; max-width: 280px; }
.feed-empty .fe-cta { margin-top: 8px; }

/* Live chat — OUR chat (build, not buy — Dima 2026-07-09); fills the watch screen, input pinned to the bottom */
.live-chat { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 12px; }
/* pinned message = the leader's own words, no links → the CTA (and the host's "pin") */
.lc-pin { display: flex; gap: 8px; align-items: flex-start; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 10px 12px; font-size: 12px; color: var(--text); line-height: 1.45; flex-shrink: 0; }
.lc-pin .lc-pin-ic { flex-shrink: 0; }
.lc-pin b { color: var(--text-hi); }
.live-chat .lc-feed { flex: 1; min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow-y: auto; margin-top: 10px;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 100%); mask-image: linear-gradient(180deg, transparent 0, #000 14px, #000 100%); }
.live-chat .lc-feed::-webkit-scrollbar { width: 0; }
.lc-msg { font-size: 12.5px; color: var(--text); line-height: 1.45; }
.lc-msg .lc-name { font-weight: 700; color: var(--text-hi); margin-right: 5px; }
.lc-msg .lc-name.host { color: #fff; }
/* quiet-room empty state — warm, never a dead void (the common case for a small hand-picked group) */
.lc-empty { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 0 26px; }
.lc-empty .lc-empty-ic { font-size: 26px; opacity: 0.5; }
.lc-empty .lc-empty-t { font-size: 13px; font-weight: 700; color: var(--text-hi); }
.lc-empty .lc-empty-s { font-size: 11.5px; color: var(--text-mid); line-height: 1.5; }
/* Live watch screen (2026-07-09 re-cut): video hero + identity row (tap → about) + pinned CTA + react button in the input */
.live-watch { padding-top: 10px; }
.live-watch .player .auth-back { position: absolute; top: 10px; left: 12px; z-index: 5; margin: 0; }
.live-watch .player .p-live { left: auto; right: 10px; }
.p-full { position: absolute; bottom: 8px; left: 12px; z-index: 5; font-size: 15px; color: rgba(255,255,255,0.85); text-decoration: none; }
.live-id { border-bottom: 1px solid var(--hairline); margin-top: 12px; }
.live-id summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; padding: 2px 0 12px; }
.live-id summary::-webkit-details-marker { display: none; }
.live-id .li-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.live-id .li-title { font-size: 14px; font-weight: 750; color: var(--text-hi); line-height: 1.25; }
.live-id .li-meta { font-size: 11px; color: var(--text-mid); margin-top: 3px; }
.live-id .li-live { color: var(--text-hi); font-weight: 700; }
.live-id .li-chev { color: var(--text-low); transition: transform 0.15s; }
.live-id[open] .li-chev { transform: rotate(90deg); }
.live-id .li-about { font-size: 12px; color: var(--text-mid); line-height: 1.5; padding-bottom: 12px; }

/* ---------- marathon (PARKED for Phase 2 → Star Factory; task pack: instructions + checks + claim) ---------- */
.mar-hero { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,0.16); padding: 20px 16px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.12), rgba(255,255,255,0.03) 55%, transparent), #101318; }
.mar-hero .mh-ic { font-size: 40px; line-height: 1; }
.mar-hero .mh-t { font-size: 20px; font-weight: 800; color: var(--text-hi); margin-top: 7px; letter-spacing: -0.2px; }
.mar-hero .mh-s { font-size: 12px; color: var(--text-mid); margin-top: 6px; line-height: 1.5; }
.mar-hero .countdown-chip { margin-top: 11px; }
.task-card { display: flex; gap: 11px; align-items: flex-start; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 13px; }
.task-num { width: 26px; height: 26px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 750; color: var(--text-hi); flex-shrink: 0; }
.task-num.done { background: rgba(255,255,255,0.92); border-color: transparent; color: #101216; }
.task-main { flex: 1; min-width: 0; }
.task-t { font-size: 13px; font-weight: 700; color: var(--text-hi); }
.task-m { font-size: 11px; color: var(--text-mid); margin-top: 3px; line-height: 1.45; }
.task-act { margin-top: 9px; display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.reward-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 10.5px; font-weight: 650; padding: 5px 11px; border-radius: 999px;
  background: rgba(255,255,255,0.07); border: 1px dashed rgba(255,255,255,0.4); color: rgba(255,255,255,0.92); }

/* ---------- team (mobile = table/list, no tree — canon) ---------- */
.sponsor-row { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 10px 13px; text-decoration: none; }
.sponsor-row .sr-main { flex: 1; min-width: 0; }
.sponsor-row .sr-label { display: block; font-size: 9px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; color: var(--text-low); }
.sponsor-row .sr-name { display: block; font-size: 13px; font-weight: 700; color: var(--text-hi); margin-top: 1px; }
/* sponsor = name only + email action (no drill-down to the upline's card — privacy: cards open DOWN the tree, not up) */
.sponsor-row .sr-email { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--text-hi); border: 1px solid var(--card-border); border-radius: 999px; padding: 5px 11px; text-decoration: none; white-space: nowrap; }
/* breadcrumbs — team drill-down trail (You › Marina › Ken); cards open down the structure */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; font-size: 11px; color: var(--text-low); margin-bottom: 10px; }
.crumbs .crumb { color: var(--text-mid); text-decoration: none; }
.crumbs .crumb.here { color: var(--text-hi); font-weight: 600; }
.crumbs .crumb + .crumb::before { content: "\203A"; margin: 0 6px; color: var(--text-low); opacity: 0.7; }
.search-field { display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); border-radius: 12px; padding: 11px 13px; font-size: 12.5px; color: var(--text-low); }
/* filter chips — one-tap presets; saved segments look the same with ★ */
.fchips { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 2px; flex-shrink: 0; }
.fchips::-webkit-scrollbar { height: 0; }
.fchip { flex-shrink: 0; font-size: 11.5px; font-weight: 650; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--text-mid); white-space: nowrap; text-decoration: none; }
.fchip.active { background: rgba(255,255,255,0.92); border-color: transparent; color: #101216; }
.fchip.active .x { margin-left: 5px; opacity: 0.7; }
.fchip.more { border-style: dashed; }
/* "so what" header — every filter result answers: how many, how much, what to do */
.sowhat { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 12px 13px; font-size: 12px; color: var(--text); line-height: 1.5; }
.sowhat b { color: var(--text-hi); }
.sowhat .sw-act { display: inline-flex; margin-top: 9px; font-size: 10.5px; font-weight: 650; padding: 5px 11px; border-radius: 999px; background: rgba(255,255,255,0.09); border: 1px solid rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); }
/* member rows (list, expandable into next line) */
.trow { display: flex; gap: 10px; align-items: center; padding: 11px 2px; border-bottom: 1px solid var(--hairline); text-decoration: none; }
.trow:last-child { border-bottom: none; }
.trow .pav { width: 32px; height: 32px; font-size: 11px; }
.trow-main { flex: 1; min-width: 0; }
.trow-name { font-size: 13.5px; font-weight: 700; color: var(--text-hi); display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.rank-chip { font-size: 9px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; padding: 1.5px 7px; border-radius: 999px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.22); color: rgba(255,255,255,0.85); }
.trow-meta { display: block; font-size: 11px; color: var(--text-mid); margin-top: 2px; font-variant-numeric: tabular-nums; }
.trow-flags { display: block; font-size: 10.5px; margin-top: 2px; color: var(--text-low); }
.trow .exp { width: 26px; height: 26px; border-radius: 8px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); display: flex; align-items: center; justify-content: center; font-size: 12px; color: var(--text-mid); flex-shrink: 0; }
.trow .chev { color: var(--text-low); }
/* expanded next line: indented rail, like the reference's connector */
.tchildren { border-left: 2px solid rgba(255,255,255,0.13); margin-left: 17px; padding-left: 12px; }
.tchildren .trow { padding: 9px 2px; }
.tmore { display: block; font-size: 11px; color: var(--acc-blue); text-decoration: none; padding: 7px 2px 9px; }
/* filter sheet */
.fs-section { margin-top: 13px; }
.fs-title { font-size: 10px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; color: var(--text-low); margin-bottom: 7px; }
.opt-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.opt { font-size: 11.5px; font-weight: 650; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.14); color: var(--text-mid); text-decoration: none; display: inline-block; }
.opt.sel { background: rgba(255,255,255,0.92); border-color: transparent; color: #101216; }
.opt.locked { opacity: 0.45; }
.sheet-actions { display: flex; gap: 8px; margin-top: 16px; }
.sheet-actions .btn-primary { flex: 1; }
.sheet-actions .btn-ghost { width: 92px; }
.save-seg { display: block; text-align: center; font-size: 11.5px; color: var(--acc-blue); margin-top: 11px; text-decoration: none; }
/* member screen */
.mem-head { display: flex; align-items: center; gap: 12px; }
.mem-head .pav { width: 46px; height: 46px; font-size: 15px; }
.mem-name { font-size: 18px; font-weight: 770; color: var(--text-hi); display: flex; align-items: baseline; gap: 7px; flex-wrap: wrap; }
.mem-sub { font-size: 11.5px; color: var(--text-mid); margin-top: 2px; }
.mem-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mstat { background: var(--card); border: 1px solid var(--card-border); border-radius: 12px; padding: 10px 11px; }
.mstat .v { font-size: 14.5px; font-weight: 750; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.mstat .l { font-size: 9px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--text-low); margin-top: 2px; line-height: 1.35; }

/* withdraw sheet: visual = the canon money path Margin → USP → d1 */
.ws-visual { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 8px 0 2px; }
.ws-flow { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; justify-content: center; }
.ws-node { font-size: 11px; font-weight: 700; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.22); color: var(--text); }
.ws-node.hot { background: rgba(255,255,255,0.92); color: #101216; border-color: transparent; }
.ws-arr { color: var(--text-low); font-size: 12px; }
.cta-cap { font-size: 10px; color: var(--text-low); text-align: center; margin-top: -3px; }

/* action-sheet router (insight tap → bottom sheet with redirect CTAs) */
[data-sheet-open] { cursor: pointer; }
.overlay-dim.sheet-pop { display: none; }
.overlay-dim.sheet-pop.open { display: flex; }
.as-sub { font-size: 12px; color: var(--text-mid); line-height: 1.55; margin-top: 6px; }
.as-sub b { color: var(--text); }
.as-ctas { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.sheet-close { cursor: pointer; }

/* ---------- programs (storefront: 12 tiles, 3 phases, rank-gated) ---------- */
.money-head { background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 13px 14px; }
.mh-top { display: flex; align-items: baseline; justify-content: space-between; }
.mh-label { font-size: 9.5px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; color: var(--text-low); }
.mh-balance { font-size: 22px; font-weight: 800; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.mh-balance small { font-size: 11px; font-weight: 600; color: var(--text-mid); margin-left: 5px; }
.mh-qv { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 11px; }
.mh-cell .v { display: block; font-size: 13px; font-weight: 750; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.mh-cell .l { display: block; font-size: 8.5px; font-weight: 700; letter-spacing: 0.5px; text-transform: uppercase; color: var(--text-low); margin-top: 2px; line-height: 1.4; }
.mh-total { margin-top: 12px; border-top: 1px solid var(--hairline); padding-top: 11px; }
.phase-note { font-size: 10.5px; color: var(--text-low); }
.pgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ptile { position: relative; overflow: hidden; background: var(--card); border: 1px solid rgba(255,255,255,0.14); border-radius: 15px; padding: 12px; text-decoration: none; display: flex; flex-direction: column; gap: 6px; min-height: 108px; }
.ptile .pt-ic { font-size: 22px; line-height: 1; }
.ptile .pt-name { font-size: 12.5px; font-weight: 750; color: var(--text-hi); line-height: 1.25; }
.ptile .pt-status { font-size: 10px; color: var(--text-mid); line-height: 1.4; margin-top: auto; }
.ptile .pt-status b { color: rgba(255,255,255,0.92); }
/* festive-in-mono: unlocked tiles get a soft top shine */
.ptile::before { content: ''; position: absolute; inset: 0 0 auto; height: 42px;
  background: linear-gradient(180deg, rgba(255,255,255,0.07), transparent); pointer-events: none; }
.ptile.earned .pt-badge, .ptile .pt-badge { position: absolute; top: 9px; right: 9px; font-size: 9px; font-weight: 800; letter-spacing: 0.5px; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; background: rgba(255,255,255,0.92); color: #101216; }
.ptile.locked { border-style: dashed; border-color: rgba(255,255,255,0.14); }
.ptile.locked::before { display: none; }
.ptile.locked .pt-ic, .ptile.locked .pt-name { opacity: 0.55; }
.ptile.locked .pt-badge { background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.25); color: rgba(255,255,255,0.8); }
/* program page */
.prog-hero { display: flex; align-items: flex-start; gap: 12px; }
.prog-hero .ph-ic { width: 46px; height: 46px; border-radius: 13px; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.14); display: flex; align-items: center; justify-content: center; font-size: 22px; flex-shrink: 0; }
.prog-hero .ph-name { display: block; font-size: 19px; font-weight: 780; color: var(--text-hi); line-height: 1.25; }
.prog-hero .ph-meta { display: block; font-size: 11px; color: var(--text-mid); margin-top: 3px; }
.payrow { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-bottom: 1px solid var(--hairline); font-size: 12px; color: var(--text); }
.payrow:last-child { border-bottom: none; }
.payrow .pr-when { width: 64px; color: var(--text-mid); font-size: 11px; }
.payrow .pr-sum { margin-left: auto; font-weight: 750; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.payrow .pr-sum.ok::after { content: ' ✓'; }
/* locked program hero (gamified) */
.lock-hero { position: relative; overflow: hidden; border-radius: 16px; border: 1px solid rgba(255,255,255,0.16); padding: 22px 18px; text-align: center;
  background: radial-gradient(120% 90% at 50% 0%, rgba(255,255,255,0.13), rgba(255,255,255,0.03) 55%, transparent), #101318; }
.lock-hero .lh-ic { font-size: 44px; line-height: 1; }
.lock-hero .lh-t { font-size: 21px; font-weight: 800; color: var(--text-hi); margin-top: 8px; letter-spacing: -0.2px; }
.lock-hero .lh-t .serif { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.lock-hero .lh-s { font-size: 12px; color: var(--text-mid); margin-top: 6px; line-height: 1.5; }
.rank-ladder { display: flex; gap: 5px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ---------- profile & settings ---------- */
.row-item .rv { margin-left: auto; font-size: 11.5px; color: var(--text-mid); }
.row-item .rv + .chev { margin-left: 8px; }
.row-item .rv .pill-count { display: inline-flex; min-width: 18px; height: 18px; align-items: center; justify-content: center; border-radius: 999px; background: rgba(255,255,255,0.92); color: #101216; font-size: 10px; font-weight: 800; padding: 0 5px; }
/* mono toggle */
.tog { width: 40px; height: 24px; border-radius: 999px; background: rgba(255,255,255,0.12); border: 1px solid rgba(255,255,255,0.18); position: relative; flex-shrink: 0; margin-left: auto; }
.tog::after { content: ''; position: absolute; top: 2.5px; left: 3px; width: 17px; height: 17px; border-radius: 50%; background: rgba(255,255,255,0.55); transition: left 0.15s; }
.tog.on { background: rgba(255,255,255,0.92); border-color: transparent; }
.tog.on::after { left: 18px; background: #101216; }
/* usage bars (Claude-style daily/weekly limits) */
.usage-head { display: flex; align-items: baseline; justify-content: space-between; }
.usage-pct { font-size: 20px; font-weight: 800; color: var(--text-hi); font-variant-numeric: tabular-nums; }
.usage-reset { font-size: 11px; color: var(--text-mid); font-variant-numeric: tabular-nums; }
.usage-bar { position: relative; height: 9px; border-radius: 5px; background: rgba(255,255,255,0.08); margin-top: 11px; overflow: hidden; }
.usage-bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 5px; background: rgba(255,255,255,0.85); }
.usage-bar.warn i { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.85) 0 4px, rgba(255,255,255,0.45) 4px 8px); }
/* notifications */
.notif { display: flex; gap: 11px; align-items: flex-start; padding: 12px 2px; border-bottom: 1px solid var(--hairline); text-decoration: none; position: relative; }
.notif:last-child { border-bottom: none; }
.notif .n-ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); display: flex; align-items: center; justify-content: center; font-size: 15px; flex-shrink: 0; }
.notif .n-main { flex: 1; min-width: 0; }
.notif .n-t { display: block; font-size: 12.5px; font-weight: 700; color: var(--text-hi); line-height: 1.35; }
.notif .n-m { display: block; font-size: 11px; color: var(--text-mid); margin-top: 2px; }
.notif .n-dot { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.92); flex-shrink: 0; margin-top: 5px; }
.notif.read .n-t { color: var(--text); font-weight: 600; }

/* ---------- Ana (paywall + chat) ---------- */
.ana-orb { border-radius: 50%; background: radial-gradient(120% 120% at 30% 25%, #f4f4f4, #cfcfcf 55%, #a8a8a8);
  border: 1px solid rgba(255,255,255,0.4); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 18px rgba(0,0,0,0.45); }
.ana-orb.lg { width: 72px; height: 72px; }
.ana-orb.lg svg { width: 32px; height: 32px; }
.ana-orb.sm { width: 28px; height: 28px; box-shadow: none; }
.ana-orb.sm svg { width: 14px; height: 14px; }
.ana-orb-letter { font-size: 12px; font-weight: 700; color: #3a3a3a; line-height: 1; }
/* teaser: the locked daily brief — blurred until subscribed */
.teaser { position: relative; overflow: hidden; }
.teaser .t-body { filter: blur(3.5px); opacity: 0.75; pointer-events: none; user-select: none; }
.teaser .t-lock { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.teaser .t-lock span { font-size: 11px; font-weight: 700; padding: 7px 13px; border-radius: 999px; background: rgba(16,18,22,0.85); border: 1px solid rgba(255,255,255,0.35); color: rgba(255,255,255,0.95); }
/* Ana chat bubbles: Ana = card-like block (she answers with structure), user = plain right-aligned */
.ana-msg { display: flex; gap: 9px; align-items: flex-start; }
.ana-msg .am-body { flex: 1; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 4px 14px 14px 14px; padding: 11px 13px; font-size: 12.5px; color: var(--text); line-height: 1.5; }
.ana-msg .am-body b { color: var(--text-hi); }
.ana-msg .am-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
/* welcome video card inside an Anakai message (onboarding: our welcome + John's referral video) */
.ana-msg .am-video { display: flex; align-items: center; gap: 10px; margin-top: 10px; background: rgba(255,255,255,0.05); border: 1px solid var(--card-border); border-radius: 12px; padding: 8px; text-decoration: none; }
.am-video .av-thumb { position: relative; width: 74px; height: 46px; border-radius: 8px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(120% 130% at 50% 0%, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 55%, #0a0c10), #0a0c10; border: 1px solid rgba(255,255,255,0.12); }
.am-video .av-thumb.john { background: radial-gradient(120% 130% at 50% 0%, rgba(255,255,255,0.22), rgba(255,255,255,0.06) 55%, #0a0c10), #0a0c10; }
.am-video .av-play { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.94); color: #101216; display: flex; align-items: center; justify-content: center; font-size: 10px; padding-left: 2px; }
.am-video .av-meta { min-width: 0; }
.am-video .av-t { display: block; font-size: 11.5px; font-weight: 700; color: var(--text-hi); }
.am-video .av-d { display: block; font-size: 10px; color: var(--text-low); margin-top: 2px; }
.user-msg { align-self: flex-end; max-width: 78%; background: rgba(255,255,255,0.92); color: #101216; border-radius: 14px 4px 14px 14px; padding: 10px 13px; font-size: 12.5px; font-weight: 600; line-height: 1.45; }
.chat-limit { display: flex; gap: 9px; align-items: center; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.3); border-radius: 12px; padding: 10px 12px; font-size: 11.5px; color: var(--text); }
.ci-field.off { opacity: 0.45; }
/* chat header: back · orb · title · ☰ (the ☰ menu = new chat + history, nothing else — canon) */
.chat-top .auth-back { margin: 0; }
.chat-top .chat-title { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.chat-top .mem-name { font-size: 15px; }
.chat-menu { width: 34px; height: 34px; border-radius: 10px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center; color: var(--text); font-size: 14px; flex-shrink: 0; cursor: pointer; }
/* ☰ drawer — Claude-style left panel; reuses the sheet-pop open/close mechanics */
.overlay-dim.drawer { padding: 0; align-items: stretch; justify-content: flex-start; }
.drawer-panel { width: 74%; max-width: 292px; background: #191c23; border-right: 1px solid rgba(255,255,255,0.12);
  border-radius: 28px 0 0 28px; padding: 18px 12px 20px; display: flex; flex-direction: column; overflow-y: auto; }
.drawer-panel::-webkit-scrollbar { width: 0; }
.drawer-rest { flex: 1; cursor: pointer; }
.dr-brand { display: flex; align-items: center; gap: 9px; padding: 2px 10px 14px; font-family: var(--font-serif); font-style: italic; font-size: 19px; color: var(--text-hi); }
.dr-new { display: flex; align-items: center; gap: 9px; padding: 12px 11px; border-radius: 12px; font-size: 13px; font-weight: 700; color: var(--text-hi);
  text-decoration: none; background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.16); }
.dr-new .plus { width: 20px; height: 20px; border-radius: 50%; border: 1.5px solid rgba(255,255,255,0.6); display: flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
.dr-sec { font-size: 10px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; color: var(--text-low); padding: 18px 11px 7px; }
.dr-item { display: block; padding: 10px 11px; border-radius: 10px; font-size: 12.5px; color: var(--text); text-decoration: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dr-item:hover { background: rgba(255,255,255,0.05); }
.dr-item.active { background: rgba(255,255,255,0.09); color: var(--text-hi); }
/* dynamic history items: label + rename affordance */
.dr-item-dynamic { display: flex; align-items: center; gap: 6px; }
.dr-item-dynamic .dr-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.dr-item-dynamic .dr-rename { flex-shrink: 0; opacity: 0.35; }
.dr-item-dynamic .dr-rename:hover { opacity: 1; }
/* new-chat empty state: serif greeting + starter chips (in Conversation Ana still opens the day with the brief) */
.chat-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 0 14px; }
.chat-empty .ce-greet { font-family: var(--font-serif); font-style: italic; font-size: 23px; color: var(--text-hi); margin-top: 10px; }
.chat-empty .ce-sub { font-size: 12px; color: var(--text-mid); line-height: 1.55; max-width: 250px; }
.ce-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 8px; }

/* ---------- board aside (schematic explainers next to the phone) ---------- */
.board-row { display: flex; gap: 16px; align-items: flex-start; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.board-aside { width: 392px; background: var(--card); border: 1px solid var(--card-border); border-radius: 16px; padding: 16px; }
.ba-title { font-size: 13px; font-weight: 750; color: var(--text-hi); margin-bottom: 12px; }
.ba-step { display: flex; gap: 11px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--hairline); }
.ba-step:last-of-type { border-bottom: none; }
.ba-step .bn { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 750; color: var(--text-hi); flex-shrink: 0; }
.ba-step .bt { font-size: 12px; color: var(--text-mid); line-height: 1.5; }
.ba-step .bt b { color: var(--text); }
.ba-note { margin-top: 12px; font-size: 11px; color: var(--text-low); line-height: 1.5; border-top: 1px solid var(--hairline); padding-top: 10px; }
.ba-note b { color: var(--text-mid); }
/* admin record field rows */
.ba-group { font-size: 10px; font-weight: 750; letter-spacing: 1px; text-transform: uppercase; color: var(--text-low); margin: 12px 0 3px; }
.ba-group:first-of-type { margin-top: 2px; }
.ba-field { display: flex; gap: 10px; padding: 4.5px 0; font-size: 11.5px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ba-field:last-child { border-bottom: none; }
.bf-name { width: 122px; flex-shrink: 0; font-family: Consolas, 'SF Mono', monospace; font-size: 10.5px; color: var(--text-hi); padding-top: 1px; }
.bf-hint { flex: 1; color: var(--text-mid); line-height: 1.45; }
.bf-hint b { color: var(--text); }

/* ---------- index hub ---------- */
.hub { max-width: 1240px; width: 100%; align-self: center; }
.hub-head { margin-bottom: 6px; }
.hub-title { font-size: 22px; font-weight: 800; color: var(--text-hi); margin: 0; }
.hub-title .serif { font-family: var(--font-serif); font-style: italic; font-weight: 600; }
.hub-sub { font-size: 12.5px; color: var(--text-mid); margin-top: 6px; max-width: 760px; line-height: 1.55; }
.hub-block { margin-top: 26px; }
.hub-block-h { font-size: 12px; font-weight: 750; letter-spacing: 1.2px; text-transform: uppercase; color: var(--text-mid); display: flex; align-items: baseline; gap: 10px; }
.hub-block-h .n { color: var(--text-low); font-weight: 600; letter-spacing: 0; text-transform: none; }
.hub-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.hub-cell {
  width: 190px; min-height: 84px;
  border-radius: 14px; padding: 12px 13px;
  background: var(--card); border: 1px solid var(--card-border);
  text-decoration: none; display: flex; flex-direction: column; gap: 4px;
}
.hub-cell:hover { background: rgba(255,255,255,0.07); }
.hub-cell .hc-name { font-size: 13px; font-weight: 700; color: var(--text-hi); }
.hub-cell .hc-desc { font-size: 11px; color: var(--text-mid); line-height: 1.4; }
.hub-cell .hc-badge { margin-top: auto; align-self: flex-start; font-size: 9.5px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; }
.hub-cell.live .hc-badge { background: rgba(72,207,173,0.14); border: 1px solid rgba(72,207,173,0.4); color: rgba(140,235,200,0.98); }
.hub-cell.soon { opacity: 0.5; cursor: default; }
.hub-cell.soon:hover { background: var(--card); }
.hub-cell.soon .hc-badge { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.14); color: var(--text-mid); }

/* ============================================================
   MONO REPAINT — Sathya 2026-07-06: production design must be
   implementable → black & white only (effectively re-instates
   conventions Rule 6). The color layer above is kept intact and
   tagged `app-proto-color` in git — to roll back, delete this
   section (or checkout the tag).
   Semantics move from hue to: luminance (ok = bright fill),
   pattern (risk/over-cap = hatched), weight, and borders.
   ============================================================ */
:root {
  --acc-blue: rgba(255,255,255,0.88);
  --acc-purple: rgba(255,255,255,0.7);
  --acc-gold: rgba(255,255,255,0.92);
  --acc-gold-deep: rgba(205,205,205,0.9);
  --acc-teal: rgba(255,255,255,0.82);
  --acc-green: rgba(255,255,255,0.88);
  --acc-orange: rgba(255,255,255,0.6);
  --acc-red: rgba(255,255,255,0.95);
  --grad-primary: linear-gradient(135deg, #f5f5f5, #c9c9c9);
  --grad-gold: linear-gradient(135deg, #ffffff, #cdcdcd);
  --grad-warm: linear-gradient(135deg, #efefef, #bdbdbd);
  --grad-logo: linear-gradient(135deg, #f0f0f0, #a6a6a6);
}
/* buttons: white = the primary action */
.btn-primary { color: #101216; }
.unlock-btn.gold, .unlock-btn.warm { color: #101216; }
.checkbox.checked { color: #101216; }
/* links & focus */
.input.focused { border-color: rgba(255,255,255,0.55); box-shadow: 0 0 0 3px rgba(255,255,255,0.10); }
.otp-box.focused { border-color: rgba(255,255,255,0.55); box-shadow: 0 0 0 3px rgba(255,255,255,0.10); }
.otp-box.focused .caret, .input .caret { background: rgba(255,255,255,0.9); }
.ios-alert .ia-btn { color: rgba(255,255,255,0.92); }
/* errors: heavy white border + bold text instead of red */
.input.error, .otp-box.error { border-color: rgba(255,255,255,0.85); }
.field-error { color: rgba(255,255,255,0.9); font-weight: 600; }
.toast { border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.95); background: rgba(32,35,42,0.97); }
.toast.error { border-color: rgba(255,255,255,0.75); color: rgba(255,255,255,0.95); }
/* status pills: ok = filled bright · warn = outlined · risk = hatched */
.status-pill.ok   { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.95); }
.status-pill.warn { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); }
.status-pill.risk { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.14) 0 4px, rgba(255,255,255,0.04) 4px 8px); border-color: rgba(255,255,255,0.5); color: rgba(255,255,255,0.95); }
/* progress & bars */
.ms-fill, .ms-fill.gold { background: rgba(255,255,255,0.85); }
.ms-foot b, .ms-foot b.good { color: rgba(255,255,255,0.95); }
.lbar .counted.good { background: rgba(255,255,255,0.72); }
.lbar .counted.cap  { background: repeating-linear-gradient(45deg, rgba(255,255,255,0.75) 0 4px, rgba(255,255,255,0.35) 4px 8px); }
.lbar .surplus { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.28) 0 4px, rgba(255,255,255,0.08) 4px 8px); }
.leg-note { color: rgba(255,255,255,0.6); }
.leg-name .up { color: rgba(255,255,255,0.95); }
.fix { background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.24); color: rgba(255,255,255,0.88); }
.fix .fl { color: rgba(255,255,255,0.6); }
.fix.ok { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.18); color: rgba(255,255,255,0.8); }
.fix.ok .fl { color: rgba(255,255,255,0.55); }
/* locked preview / secured / invite */
.locked { background: rgba(255,255,255,0.045); border-color: rgba(255,255,255,0.22); }
.secured-strip { background: rgba(255,255,255,0.055); border-color: rgba(255,255,255,0.28); }
.secured-strip .txt { color: rgba(255,255,255,0.85); }
.card.invite { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.2); }
.invite-link, .invite-copy { color: rgba(255,255,255,0.85); }
.invite-share { color: #101216; }
/* people & bonuses */
.pmeta b { color: rgba(255,255,255,0.9); }
.pmeta .on { color: rgba(255,255,255,0.92); font-weight: 600; }
.bb-status.ok, .bb-status.warn, .bb-status.protect { color: rgba(255,255,255,0.95); }
.help-t b { color: rgba(255,255,255,0.9); }
.pchip { background: rgba(255,255,255,0.09); border-color: rgba(255,255,255,0.3); color: rgba(255,255,255,0.9); }
.pchip.ok { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.45); color: rgba(255,255,255,0.95); }
.pchip.warn { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.4); color: rgba(255,255,255,0.85); }
.near { color: rgba(255,255,255,0.85); }
.donut-note b, .dl.above .dlr, .goal-n b { color: rgba(255,255,255,0.95); }
/* header avatar */
.avatar { background: linear-gradient(135deg, rgba(255,255,255,0.35), rgba(255,255,255,0.15)); }
/* modals: one neutral glow for every tier */
.modal.tierA, .modal.tierB, .modal.tierC { background: radial-gradient(120% 60% at 50% 0%, rgba(255,255,255,0.14), rgba(255,255,255,0.04) 48%, #14161c 82%); }
.modal.tierA .m-glow, .modal.tierB .m-glow, .modal.tierC .m-glow { background: radial-gradient(circle, rgba(255,255,255,0.2), transparent 65%); }
.modal.tierA .m-eyebrow, .modal.tierB .m-eyebrow, .modal.tierC .m-eyebrow { color: rgba(255,255,255,0.7); }
.modal.tierA .m-rank span, .modal.tierB .m-rank span, .modal.tierC .m-rank span { color: rgba(255,255,255,0.95); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 5px; }
.modal.tierA .m-item, .modal.tierB .m-item, .modal.tierC .m-item { border: 1px solid rgba(255,255,255,0.14); }
.modal.tierA .m-ic, .modal.tierB .m-ic, .modal.tierC .m-ic { background: rgba(255,255,255,0.08); }
.m-item.accent { border-color: rgba(255,255,255,0.45) !important; background: rgba(255,255,255,0.09); }
.m-item.accent .m-ic { background: rgba(255,255,255,0.16) !important; }
.m-horizon span, .modal.tierA .m-horizon span { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.25); color: rgba(255,255,255,0.85); }
.modal.tierA .m-cta, .modal.tierB .m-cta, .modal.tierC .m-cta { background: linear-gradient(135deg, #ffffff, #cdcdcd); color: #101216; }
/* nav + FAB */
.pill-item.active svg { color: rgba(255,255,255,0.95); }
.ana-fab { background: radial-gradient(120% 120% at 30% 25%, #f4f4f4, #cfcfcf 55%, #a8a8a8); border-color: rgba(255,255,255,0.4); box-shadow: 0 4px 18px rgba(0,0,0,0.45); }
/* welcome & splash glows */
.welcome { background:
  radial-gradient(90% 55% at 50% 78%, rgba(255,255,255,0.14), transparent 70%),
  radial-gradient(70% 40% at 50% 88%, rgba(255,255,255,0.08), transparent 70%),
  radial-gradient(120% 80% at 50% 110%, rgba(120,120,120,0.28), transparent 75%),
  #0b0e14; }
.burst .core { background: radial-gradient(circle, rgba(255,255,255,0.9), rgba(255,255,255,0.3) 45%, transparent 70%); }
.burst .rays { background: repeating-conic-gradient(from 8deg, rgba(255,255,255,0.25) 0deg 1.2deg, transparent 1.2deg 9deg); }
.burst .halo { background: radial-gradient(circle, transparent 45%, rgba(255,255,255,0.1) 60%, transparent 75%); }
.splash-glow { background: radial-gradient(circle, rgba(255,255,255,0.07), rgba(255,255,255,0.03) 55%, transparent 75%); }
/* misc chrome */
.draft-pill { box-shadow: 0 0 0 1px rgba(255,255,255,0.5); color: rgba(255,255,255,0.85); background: rgba(20,22,28,0.92); }
.icon-circle.ok, .icon-circle.warn, .icon-circle.bad { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.25); }
.hub-cell.live .hc-badge { background: rgba(255,255,255,0.14); border-color: rgba(255,255,255,0.45); color: rgba(255,255,255,0.95); }
.rk .rkfill { background: rgba(255,255,255,0.65); }
.tick, .lbar .capline { background: rgba(255,255,255,0.75); }
/* emoji are the only remaining colour inside the phone — gray them wholesale.
   Everything else is already mono, so the filter is a no-op for the rest. */
.screen { filter: grayscale(1); }