/* =====================================================================
   GymPlan AI design system (UI redesign spec, Oct 2026). Loaded after styles.css and overrides it.
   Colour has fixed meanings: accent = tap here, good = done, warn = limit, bad = destructive, gold = Pro.
   The gradient is for the one hero button per screen.
   ===================================================================== */
:root {
  --bg: #0a0b0f; --surface: #13151b; --surface-2: #1c1f27; --line: rgba(255, 255, 255, .07);
  --text: #f3f4f8; --muted: #8a91a3;
  --accent: #5b7cff; --accent-strong: #7d95ff; --accent-ink: #ffffff; --accent-2: #9b5cff;
  --accent-tint: #1d2340;
  --good: #2fd27b; --warn: #f59e0b; --bad: #ef4444; --bad-strong: #ff7a7a;
  --gold: #f6c453; --gold-ink: #3a2a00;
  --grad: linear-gradient(135deg, #5b7cff 0%, #9b5cff 100%);
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px;
  --radius-sm: 10px; --radius-btn: 13px; --radius-tile: 14px; --radius: 18px; --radius-pill: 999px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .04) inset, 0 10px 30px rgba(0, 0, 0, .35);
  --shadow-sm: 0 4px 14px rgba(0, 0, 0, .25);
  --nav-bg: rgba(19, 21, 27, .92);
  --tabs-h: 64px;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  :root {
    --bg: #f5f6fa; --surface: #ffffff; --surface-2: #f0f2f7; --line: rgba(15, 20, 40, .08);
    --text: #0e1120; --muted: #667089;
    --accent-strong: #3f5fe6; --accent-tint: #eef1ff; --bad-strong: #c81e1e;
    --shadow: 0 1px 2px rgba(15, 20, 40, .05), 0 10px 30px rgba(15, 20, 40, .07);
    --shadow-sm: 0 3px 10px rgba(15, 20, 40, .07);
    --nav-bg: rgba(255, 255, 255, .92);
    color-scheme: light;
  }
}

body { background: var(--bg); font-size: 15px; line-height: 21px; }
h1 { font-size: 30px; line-height: 33px; font-weight: 800; letter-spacing: -0.9px; margin: 0 0 var(--space-4); }
h2 { font-size: 17px; line-height: 22px; font-weight: 700; letter-spacing: 0; }
.caption { font-size: 12px; line-height: 16px; color: var(--muted); }
.ic { flex: none; display: block; }

/* Focus ring on every interactive element */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---------- Buttons: hero · primary · secondary · text · destructive ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 44px;
  border-radius: var(--radius-btn); font-weight: 650; background: var(--surface-2); border: 1px solid var(--line); color: var(--text); }
.btn.block { display: flex; }
.btn.primary { background: var(--accent-strong); border: 1px solid transparent; color: var(--accent-ink); box-shadow: none; filter: none; }
.btn.hero { background: var(--grad); border: 0; color: var(--accent-ink); min-height: 52px; font-size: 16px; font-weight: 700; box-shadow: var(--shadow-sm); }
.btn.text { background: none; border-color: transparent; color: var(--accent-strong); padding-left: var(--space-2); padding-right: var(--space-2); }
.btn.danger { background: var(--surface-2); color: var(--bad-strong); }
.btn.ghost { background: transparent; border-color: transparent; }
.btn:disabled, .btn[disabled] { opacity: .4; box-shadow: none; }
.btn.sm { min-height: 36px; }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; border-radius: var(--radius-btn); color: var(--text); font-size: 20px; }
.link { color: var(--accent-strong); font-weight: 650; font-size: 13px; padding: 12px 0; white-space: nowrap; }

/* ---------- Cards, chips, segmented control, empty state ---------- */
.card { border-radius: var(--radius); }
.chips button.on { background: var(--accent-strong); border-color: transparent; color: var(--accent-ink); }
.seg { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: var(--space-1); }
.seg button { min-height: 36px; border-radius: var(--radius-sm); font-weight: 650; color: var(--muted); }
.seg button.on, .seg button[aria-selected="true"] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.empty-card { text-align: center; padding: var(--space-6) var(--space-4); display: flex; flex-direction: column; align-items: center; gap: 4px; }
.empty-card b { font-weight: 650; }
.empty-card p { margin: 0 0 var(--space-3); color: var(--muted); font-size: 14px; }
.tag-chip { font-size: 12px; line-height: 16px; padding: 6px 10px; border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text); }
.tag-chip.more { color: var(--muted); }
.pr-pill { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: var(--radius-pill);
  background: var(--accent-tint); color: var(--accent-strong); vertical-align: middle; }

/* Sections sit 24px apart */
.section { margin-top: var(--space-6); }
.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-3); min-height: 44px; }
.section-head h2 { margin: 0; }

/* ---------- Screen header ---------- */
.screen-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.screen-head h1 { margin: 0; }
.screen-head .actions { display: flex; gap: var(--space-1); }
.bell { position: relative; }
.dot-badge { position: absolute; top: 10px; right: 11px; width: 8px; height: 8px; border-radius: 999px; background: var(--accent-strong); border: 2px solid var(--bg); }

/* ---------- Stat tiles ---------- */
.stats { gap: var(--space-2); }
button.stat { text-align: left; color: var(--text); cursor: pointer; font: inherit; }
.stat { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); box-shadow: var(--shadow-sm); padding: var(--space-3); }
.stat b, .stat .val { display: block; font-size: 21px; line-height: 24px; font-weight: 800; letter-spacing: -0.42px;
  background: none; -webkit-background-clip: border-box; background-clip: border-box; color: var(--accent-strong); }
.stat .val small { font-size: 13px; font-weight: 650; color: var(--muted); letter-spacing: 0; }
.stat > span, .stat .lbl { display: block; font-size: 12px; line-height: 16px; color: var(--muted); margin-top: 2px; }
.stat .bar { height: 4px; border-radius: 999px; background: var(--surface-2); margin-top: var(--space-2); overflow: hidden; }
.stat .bar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }

/* ---------- Home: today card ---------- */
.today-hero { display: flex; flex-direction: column; gap: 14px; margin-top: var(--space-6); }
.today-hero .t-top { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.today-hero .t-title { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.3px; }
.today-hero .t-meta { font-size: 13px; line-height: 18px; color: var(--muted); }
.today-hero .t-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.today-hero .t-links { display: flex; justify-content: center; gap: 20px; margin-top: -6px; }
.today-hero .t-links .btn { font-size: 13px; }
.today-quiet .t-row { display: flex; gap: var(--space-3); align-items: center; }
.today-quiet .t-icon { width: 44px; height: 44px; border-radius: var(--radius-tile); background: var(--surface-2); color: var(--accent-strong); display: grid; place-items: center; flex: none; }
.today-quiet .t-icon.done { color: var(--text); background: color-mix(in srgb, var(--good) 22%, var(--surface)); }
.today-quiet .t-btns { display: flex; gap: var(--space-2); }
.today-quiet .t-btns .btn { flex: 1; }

/* ---------- Feed post card ---------- */
.post .post-stats { display: flex; gap: 22px; margin: 12px 0 10px; }
.post .post-stats span { font-size: 12px; line-height: 16px; color: var(--muted); }
.post .post-stats b { font-size: 17px; font-weight: 700; display: flex; align-items: center; gap: 4px; }
.post .post-stats b.rec { color: var(--accent-strong); }
.post h3 { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -0.3px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.post-actions > * { min-height: 44px; }
.post-actions .on { color: var(--bad); }
.post-actions .on .ic path { fill: currentColor; }

/* ---------- Workout tab ---------- */
.week-card { padding: 14px 12px 12px; display: flex; flex-direction: column; gap: 10px; }
.week-card .week-strip { margin: 0; }
.wday { gap: 4px; min-height: 44px; }
.wday .mark, .wday .nomark { width: 16px; height: 16px; }
.wday.today { background: var(--accent-tint); }
.wday.today .wd, .wday.today .dn { color: var(--accent-strong); }
.wday.today .dn { font-weight: 800; }
.wday i { display: none; }
.week-key { display: flex; justify-content: center; gap: 16px; font-size: 12px; line-height: 16px; color: var(--muted); }
.week-key span { display: inline-flex; align-items: center; gap: 6px; }
.key-done { width: 8px; height: 8px; border-radius: 999px; background: var(--good); }
.key-planned { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid var(--accent-strong); box-sizing: border-box; }
.list-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; }
.list-row { display: flex; align-items: center; gap: var(--space-3); padding: 14px var(--space-4); min-height: 44px; color: var(--text); }
.list-row + .list-row, .list-row + .routine-row, .routine-row + .routine-row, .routine-row + .more-row, .folder-head + .routine-row { border-top: 1px solid var(--line); }
.list-row .ic { color: var(--accent-strong); }
.list-row .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.list-row .rt b { font-weight: 650; }
.list-row .chev { color: var(--muted); }
.folder-head { display: flex; align-items: center; gap: var(--space-2); padding: 4px 4px 4px var(--space-4); font-size: 13px; font-weight: 650; color: var(--muted); min-height: 44px; }
.folder-head button.fold { flex: 1; display: flex; align-items: center; gap: var(--space-2); background: none; border: 0; color: inherit; font: inherit; text-align: left; min-height: 44px; padding: 0; }
.folder-head .ic { transition: transform .15s; }
.folder-card.closed .folder-head .fold .ic { transform: rotate(-90deg); }
.folder-card.closed .routine-row, .folder-card.closed .more-row { display: none; }
.routine-row { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-2) var(--space-3) var(--space-4); }
.routine-row .rt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.routine-row .rt b { font-weight: 650; }
.routine-row .rt span { font-size: 13px; line-height: 18px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.play-btn { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--accent-strong); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.play-btn:disabled { opacity: .4; }
.more-btn { width: 36px; min-width: 36px; color: var(--muted); }
.more-row { border: 0; background: none; text-align: left; padding: var(--space-3) var(--space-4); color: var(--accent-strong); font-size: 13px; font-weight: 650; min-height: 44px; }
.routine-cards { display: flex; flex-direction: column; gap: var(--space-3); }

/* ---------- Bottom nav: 72px incl. safe area, centred 640px on desktop ---------- */
.tabs { left: 50%; right: auto; width: 100%; max-width: 640px; transform: translateX(-50%);
  height: calc(64px + var(--safe-b)); min-height: 72px; background: var(--nav-bg);
  border-top: 1px solid var(--line); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); }
.tabs a { color: var(--muted); font-size: 11px; font-weight: 600; gap: 2px; }
.tabs a svg { width: 24px; height: 24px; fill: none; stroke: currentColor; transform: none; filter: none; }
.tabs a.on { color: var(--accent-strong); }
.tabs a.on svg { transform: none; filter: none; }
@media (min-width: 641px) { .tabs { border-left: 1px solid var(--line); border-right: 1px solid var(--line); border-radius: 18px 18px 0 0; } }

/* The minimised workout bar is the screen's hero action while a workout runs */
.active-bar { background: var(--grad); }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- Phase 2: Profile, Settings, Account ---------- */
.back-link { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; color: var(--accent-strong); font-weight: 650; margin-bottom: 2px; }
.btn.danger-fill { background: var(--bad); color: #fff; border-color: transparent; }
.identity { display: flex; align-items: center; gap: 14px; }
.identity .id-name { display: flex; align-items: center; gap: 8px; }
.identity .id-name b { font-size: 18px; line-height: 24px; font-weight: 700; }
.inline-link { color: var(--accent-strong); font-weight: 650; }
.pro-badge, .pro-mark { font-size: 10px; line-height: 14px; font-weight: 800; letter-spacing: .5px; padding: 2px 7px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); flex: none; }
.groups { display: flex; flex-direction: column; gap: var(--space-6); }
.group { display: flex; flex-direction: column; gap: var(--space-2); }
.group-title { margin: 0 0 0 4px; font-size: 12px; line-height: 16px; font-weight: 650; color: var(--muted); }
.list-row.set-row { width: 100%; border-width: 0; border-style: solid; border-color: var(--line); background: none; font: inherit; text-align: left; padding: 10px var(--space-2) 10px var(--space-4); min-height: 52px; }
button.list-row.set-row, a.list-row.set-row, label.list-row.set-row { cursor: pointer; }
.list-row.set-row .rt span:first-child { font-weight: 400; }
.set-row .chev { color: var(--muted); }
.set-row .btn.text { font-size: 15px; }
.danger-text { color: var(--bad-strong); font-weight: 650 !important; }
.seg.mini { display: flex; gap: 4px; padding: 3px; margin: 0; }
.seg.mini button { width: 44px; min-height: 32px; padding: 0; }
.switch { position: relative; flex: none; width: 52px; height: 32px; border-radius: 999px; padding: 0; border: 1px solid var(--muted); background: var(--surface-2); }
.switch span { position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 999px; background: #fff; box-shadow: 0 1px 3px rgba(15, 20, 40, .25); transition: left .15s; }
.switch[aria-checked="true"] { background: var(--accent-strong); border-color: var(--accent-strong); }
.switch[aria-checked="true"] span { left: 23px; }
.sync-dot { width: 12px; height: 12px; border-radius: 999px; background: var(--warn); flex: none; margin: 0 4px; }
.sync-dot.bad { background: var(--bad); }
.chart-card { display: flex; flex-direction: column; gap: var(--space-3); }
.chart-head { display: flex; justify-content: space-between; align-items: baseline; }
.chart-head h2 { margin: 0; }
.muscle-grid { display: grid; grid-template-columns: 76px minmax(0, 1fr) 24px; gap: 10px; align-items: center; font-size: 13px; }
.muscle-grid b { text-align: right; font-weight: 650; }
.mbar { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.mbar i { display: block; height: 100%; background: var(--accent); border-radius: inherit; }
.field-label { font-size: 13px; font-weight: 650; color: var(--text); margin-bottom: -4px; }
.pro-upsell { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
/* While a bottom sheet is open the nav steps away */
body:has(#sheet-root .sheet-backdrop) .tabs, body:has(#sheet-root .sheet-backdrop) .active-bar { display: none; }

.list-card > * + .set-row { border-top-width: 1px; }

/* ---------- Phase 2: AI Coach ---------- */
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
body.in-coach .view { padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 210px); }
.coach .screen-head { margin-bottom: var(--space-3); }
.coach-log { gap: 12px; margin-top: 0; }
.bot-av { width: 28px; height: 28px; background: var(--accent-tint); color: var(--accent-strong); }
.msg { align-items: flex-start; }
.msg .bubble { font-size: 15px; line-height: 21px; padding: 10px 14px; border-radius: 18px; }
.msg.user .bubble { background: var(--accent-strong); color: var(--accent-ink); border-bottom-right-radius: 4px; }
.msg.bot .bubble { background: var(--surface); border: 1px solid var(--line); border-bottom-left-radius: 4px; }
.correction-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 650; color: var(--text); background: color-mix(in srgb, var(--warn) 22%, var(--surface)); border-radius: 999px; padding: 2px 8px; margin-bottom: 6px; }
.correction-tag .ic { color: var(--warn); }
.action-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.action-card.approved, .action-card.declined, .action-card.failed, .action-card.undone { border-color: var(--line); opacity: 1; }
.action-card .ac-head { font-weight: 650; margin: 0; }
.action-card .ac-body { margin: 0; }
.action-card .ok { color: var(--text); font-weight: 400; display: flex; gap: 6px; align-items: center; }
.bad-text { color: var(--bad-strong); }
.wc-line { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; }
.wc-line s { color: var(--muted); }
.wc-line .ic { color: var(--muted); }
.wc-status { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.wc-status.bad { color: var(--bad-strong); }
.wc-status .link-btn { font-size: 13px; padding: 0; min-height: 0; text-decoration: none; }
.coach-input { flex-direction: column; align-items: stretch; gap: 8px; padding: 12px 16px 8px; background: var(--bg); border-top: 1px solid var(--line); left: 50%; right: auto; width: 100%; transform: translateX(-50%); }
.coach-input .ci-row { display: flex; gap: 8px; align-items: flex-end; }
.coach-input textarea { min-height: 44px; border-radius: var(--radius-tile); border: 1px solid var(--muted); background: var(--surface); padding: 11px 14px; font-size: 15px; }
.send-btn { width: 44px; height: 44px; border-radius: 999px; border: 0; background: var(--accent-strong); color: var(--accent-ink); display: grid; place-items: center; flex: none; }
.send-btn:disabled { opacity: .4; }
.prompt-row { position: relative; }
.prompt-row::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 32px; background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none; }
.prompt-scroll { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-right: 32px; }
.prompt-scroll::-webkit-scrollbar { display: none; }
.prompt-pill { flex: none; min-height: 36px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 13px; font-weight: 650; }
.prompt-pill:disabled { opacity: .4; }
.ci-usage, .ci-note { text-align: center; }
.ci-usage:empty { display: none; }
.usage-low { color: var(--text); background: color-mix(in srgb, var(--warn) 25%, transparent); border-radius: 6px; padding: 0 4px; }

/* ---------- Phase 2: Exercises ---------- */
.search-row { display: flex; gap: var(--space-2); align-items: center; }
.search-field { position: relative; flex: 1; min-width: 0; }
.search-field .ic { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; }
.search-field .field { width: 100%; min-height: 44px; padding-left: 40px; }
.filter-btn { background: var(--surface-2); border: 1px solid var(--line); }
.filter-btn.on { background: var(--accent-strong); color: var(--accent-ink); border-color: transparent; }
.chip-fade { position: relative; margin: 12px 0 4px; }
.chip-fade::after { content: ""; position: absolute; top: 0; right: 0; bottom: 4px; width: 40px; background: linear-gradient(90deg, transparent, var(--bg)); pointer-events: none; }
.sheet .chip-fade::after { background: linear-gradient(90deg, transparent, var(--surface)); }
.chip-fade .chips { padding-right: 40px; margin: 0; }
.chips button { min-height: 36px; }
.ex-count { margin: 4px 0 8px 4px; }
.ex-list { padding: 0; }
.ex-list .list-item { padding: 10px var(--space-4); border-bottom: 1px solid var(--line); }
.ex-list .list-item:last-child { border-bottom: 0; }
.wc-status { flex-wrap: wrap; } .wc-status .link-btn { white-space: nowrap; }

/* ---------- Phase 3: social screens ---------- */
.uav { background: var(--accent-tint); color: var(--accent-strong); font-weight: 700; }
.mention { color: var(--accent-strong); font-weight: 650; }
.set-list { display: flex; flex-direction: column; gap: 12px; margin-top: var(--space-3); }
.sl-ex { display: flex; flex-direction: column; gap: 6px; }
.sl-ex + .sl-ex { border-top: 1px solid var(--line); padding-top: 10px; }
.sl-row { display: flex; justify-content: space-between; font-size: 14px; }
.comments-card { padding: 0 var(--space-4); }
.comments-card .comment { padding: 12px 0; border-bottom: 1px solid var(--line); gap: 10px; }
.comments-card .comment:last-child { border-bottom: 0; }
.comment.reply { margin-left: 32px; }
.c-actions { gap: 4px; margin: 2px 0 0 -10px; }
.c-like, .c-reply { min-height: 36px; padding: 0 10px; font-size: 13px; }
.c-like.on { color: var(--bad-strong); }
.comment-bar { position: fixed; z-index: 18; left: 50%; transform: translateX(-50%); width: 100%; max-width: 640px;
  bottom: calc(var(--tabs-h) + var(--safe-b)); padding: 10px 16px; background: var(--bg); border-top: 1px solid var(--line); margin: 0; }
.comment-bar .ci-row { display: flex; gap: 8px; align-items: center; }
.comment-bar .field { flex: 1; min-height: 44px; border-color: var(--muted); background: var(--surface); }
.comment-bar .replying { display: flex; align-items: center; justify-content: space-between; }
body:has(.comment-bar) .view { padding-bottom: calc(var(--tabs-h) + var(--safe-b) + 140px); }
.person-row, .note-row { padding: 10px 12px 10px 16px; }
.follow-btn { min-width: 96px; }
.note-row { color: var(--text); align-items: center; }
.note-row.unread { background: var(--accent-tint); }
.note-row .note-text { font-size: 14px; line-height: 20px; }
.unread-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--accent-strong); flex: none; }
.note-row .sk-line { display: block; height: 11px; margin: 4px 0; }
#people-search { padding-left: 40px; min-height: 44px; width: 100%; }

/* ---------- Phase 3: Report a bug ---------- */
.bug-form { display: flex; flex-direction: column; gap: var(--space-4); }
.fgroup { display: flex; flex-direction: column; gap: 6px; }
.flabel { display: flex; justify-content: space-between; align-items: baseline; font-weight: 650; }
.bug-form textarea.field { min-height: 120px; resize: vertical; border-color: var(--muted); background: var(--surface); }
.ferr { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--bad-strong); }
.bug-file, .bug-add { width: 72px; height: 72px; border-radius: var(--radius-tile); }
.bug-add { background: var(--surface); border: 1px dashed var(--muted); color: var(--accent-strong); }
.bug-file-x { top: -6px; right: -6px; width: 24px; height: 24px; display: grid; place-items: center; background: var(--text); color: var(--bg); border: 2px solid var(--bg); padding: 0; }
.bug-file { overflow: visible; }
.bug-file img { border-radius: var(--radius-tile); }
.info-row { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-tile); }
.info-row summary { list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 44px; padding: 0 16px; cursor: pointer; font-size: 14px; }
.info-row summary::-webkit-details-marker { display: none; }
.info-row summary .ic { color: var(--muted); transition: transform .15s; }
.info-row[open] summary .ic { transform: rotate(90deg); }
.info-body { padding: 0 16px 12px; line-height: 20px; overflow-wrap: anywhere; }
.bug-done { align-items: center; }

/* ---------- Phase 3: Pro coupon entry and price block ---------- */
.promo-hint { text-align: center; margin: 4px 0 12px; }
.promo-hint .link-btn, .promo-chip .link-btn { font-size: inherit; text-decoration: none; padding: 0 0 0 4px; min-height: 0; }
.promo-link { display: block; margin: 4px auto 12px; text-decoration: none; min-height: 44px; }
.promo-field { display: flex; flex-direction: column; gap: 6px; margin: 4px 0 12px; }
.promo-row .field { min-height: 44px; text-transform: uppercase; letter-spacing: .04em; }
.promo-row .btn { min-width: 88px; }
.spinner.sm { width: 14px; height: 14px; border-width: 2px; display: inline-block; vertical-align: middle; }
.promo-chip { display: flex; align-items: center; gap: 8px; margin: 4px 0 12px; padding: 10px 12px; border-radius: var(--radius-tile);
  background: color-mix(in srgb, var(--good) 16%, var(--surface)); color: var(--text); }
.promo-chip .ic { color: var(--text); }
.price-block { display: flex; flex-direction: column; gap: 10px; }
.pb-amount { display: flex; align-items: baseline; gap: 8px; }
.pb-amount b { font-size: 21px; font-weight: 800; }
.pb-save { align-self: flex-end; font-size: 12px; font-weight: 650; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--good) 18%, var(--surface)); color: var(--text); margin-top: -6px; }

/* ---------- Phase 3: Coupon codes (admin) ---------- */
.promo-create { display: flex; flex-direction: column; gap: var(--space-3); }
.promo-create h2 { margin: 0; }
.pc-two { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.suffix-field { position: relative; }
.suffix-field .field { width: 100%; padding-right: 32px; }
.suffix-field span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--muted); }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.promo-row-item { align-items: center; padding: 12px 4px 12px var(--space-4); }
.pc-code { display: flex; align-items: center; gap: 8px; }
.status-chip { font-size: 11px; font-weight: 650; padding: 1px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); }
.status-chip.on { background: color-mix(in srgb, var(--good) 18%, var(--surface)); color: var(--text); }
.note-row.unread .uav { background: var(--surface); }

/* ---------- Phase 4: share screen ---------- */
.share-head { display: grid; grid-template-columns: 56px 1fr 56px; align-items: center; min-height: 44px; margin-bottom: var(--space-3); text-align: center; }
.share-head .btn.text { padding: 0; justify-content: flex-start; font-size: 15px; }
.share-preview { height: 360px; display: grid; place-items: center; background: color-mix(in srgb, var(--muted) 14%, var(--bg)); border-radius: var(--radius); margin-bottom: var(--space-4); overflow: hidden; }
.share-img { display: block; border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 20, 40, .18); }
.share-img.story { height: 320px; width: auto; }
.share-img.post { height: 324px; width: auto; }
.share-img.og { width: min(348px, 92%); height: auto; }
.share-targets { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: var(--space-4) 0; }
.share-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; border: 0; background: none; color: var(--text); font-size: 12px; font-weight: 650; padding: 0; }
.share-tile .ic { width: 56px; height: 56px; padding: 16px; border-radius: 18px; background: var(--surface); border: 1px solid var(--line); color: var(--accent-strong); box-sizing: border-box; }
.share-tile:disabled { opacity: .4; }
.switch:disabled { opacity: .4; }

/* ---------- Phase 5: welcome (phone) and landing page (768px and up) ---------- */
body.in-welcome .view { max-width: none; padding: 0 0 calc(var(--safe-b) + 24px); }
.welcome-phone { display: block; }
.landing { display: none; }
@media (min-width: 768px) { .welcome-phone { display: none; } .landing { display: block; } }
.lp-logo { width: 40px; height: 40px; border-radius: 12px; background: #fff; color: #3f5fe6; display: grid; place-items: center; flex: none; }
.lp-logo .ic { stroke-width: 2.25; }
.invite-banner { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: var(--radius-tile); background: var(--accent-tint); color: var(--text); font-size: 14px; line-height: 20px; }
.invite-banner .ic { color: var(--accent-strong); margin-top: 1px; }
.lp-legal { text-align: center; font-size: 12px; line-height: 16px; color: var(--muted); margin: 0; }
.lp-legal a { color: var(--accent-strong); text-decoration: underline; }

/* phone welcome */
.wp-band { position: relative; height: 352px; background: #3f5fe6; overflow: hidden; color: #fff; }
.wp-band::before { content: ""; position: absolute; right: -60px; top: -50px; width: 240px; height: 240px; border-radius: 50%; background: #5b7cff; }
.wp-band::after { content: ""; position: absolute; left: 22px; bottom: 44px; width: 20px; height: 7px; border-radius: 4px; background: var(--gold); transform: rotate(-30deg); }
.wp-brand { position: absolute; left: 24px; top: calc(40px + env(safe-area-inset-top, 0px)); display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 800; letter-spacing: -0.4px; }
.wp-card { position: absolute; left: 32px; right: 32px; top: calc(128px + env(safe-area-inset-top, 0px)); max-width: 380px; background: #fff; color: #0e1120; border-radius: 18px; padding: 14px; box-shadow: 0 20px 40px rgba(14,17,32,.25); transform: rotate(-3deg); display: flex; flex-direction: column; gap: 10px; }
.wp-card .caption { display: block; font-size: 11px; line-height: 14px; color: #667089; }
.wp-card b { font-size: 16px; line-height: 21px; }
.wp-pr { font-size: 11px; font-weight: 800; padding: 4px 9px; border-radius: 999px; background: var(--gold); color: var(--gold-ink); }
.wp-tiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.wp-tiles div { background: #f0f2f7; border-radius: 10px; padding: 6px 8px; }
.wp-tiles b { display: block; font-size: 15px; font-weight: 800; color: #3f5fe6; }
.wp-tiles span { font-size: 10px; color: #667089; }
.wp-start { height: 36px; border-radius: 10px; background: var(--grad); color: #fff; font-size: 13px; font-weight: 700; display: grid; place-items: center; }
.wp-coach { position: absolute; left: 56px; right: 56px; top: calc(286px + env(safe-area-inset-top, 0px)); max-width: 320px; background: #fff; color: #0e1120; border-radius: 14px; padding: 10px 12px; box-shadow: 0 12px 30px rgba(14,17,32,.2); transform: rotate(2deg); display: flex; gap: 8px; font-size: 12px; line-height: 16px; }
.wp-coach .bot-av { width: 22px; height: 22px; background: #eef1ff; color: #3f5fe6; }
.wp-body { padding: 32px 24px 0; display: flex; flex-direction: column; gap: 18px; max-width: 520px; margin: 0 auto; }
.wp-body h1 { margin: 0; }
.wp-features { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
.wp-features li { display: flex; gap: 8px; align-items: center; font-size: 13px; line-height: 18px; font-weight: 650; }
.wp-features .ic { color: var(--accent-strong); }
.wp-actions { display: flex; flex-direction: column; gap: 10px; }
.wp-actions .link-btn { text-decoration: none; font-weight: 650; padding: 0; }

/* landing page */
.lp-wrap { max-width: 1120px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.lp-hero { background: #3f5fe6; color: #fff; position: relative; overflow: hidden; }
.lp-hero::before { content: ""; position: absolute; right: -60px; bottom: -260px; width: 520px; height: 520px; border-radius: 50%; background: #5b7cff; }
.lp-top { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding-top: 20px; padding-bottom: 20px; position: relative; }
.lp-brand { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 18px; font-weight: 800; letter-spacing: -0.4px; }
.lp-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; font-size: 15px; font-weight: 650; }
.lp-nav a, .lp-nav .link-btn { color: #fff; text-decoration: none; padding: 0; font-weight: 650; font-size: 15px; }
.lp-btn-white { min-height: 44px; padding: 0 16px; border: 0; border-radius: 13px; background: #fff; color: #3f5fe6; font-weight: 700; font-size: 15px; }
.lp-btn-white.big { min-height: 52px; padding: 0 24px; font-size: 16px; }
.lp-hero-body { display: flex; flex-wrap: wrap; gap: 48px; align-items: flex-end; padding-top: 48px; position: relative; }
.lp-hero-text { flex: 999 1 420px; min-width: 0; padding-bottom: 96px; display: flex; flex-direction: column; gap: 20px; }
.lp-hero-text h1 { margin: 0; font-size: 60px; line-height: 62px; font-weight: 800; letter-spacing: -2px; max-width: 560px; color: #fff; }
.lp-hero-text p { margin: 0; font-size: 19px; line-height: 28px; color: #e6ebff; max-width: 500px; }
.lp-pill { align-self: flex-start; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #2f4bc4; }
.lp-cta { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.lp-google { min-width: 240px; }
.lp-note { font-size: 14px; color: #e6ebff; }
.lp-hero .invite-banner { max-width: 500px; }
.lp-hero-art { flex: 1 1 340px; display: flex; justify-content: center; }
.lp-phone { width: 336px; height: 520px; border-radius: 40px 40px 0 0; background: #0e1120; padding: 12px 12px 0; box-shadow: 0 30px 60px rgba(14,17,32,.35); overflow: hidden; }
.lp-screen { height: 100%; border-radius: 30px 30px 0 0; background: #f5f6fa; color: #0e1120; padding: 22px 14px; display: flex; flex-direction: column; gap: 12px; overflow: hidden; }
.lp-screen .caption { color: #667089; }
.lp-h { font-size: 26px; font-weight: 800; letter-spacing: -0.8px; margin-top: -10px; }
.lp-h2 { font-size: 15px; font-weight: 700; }
.lp-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.lp-tiles > div { background: #fff; border: 1px solid rgba(15,20,40,.08); border-radius: 12px; padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.lp-tiles b { font-size: 17px; font-weight: 800; color: #3f5fe6; }
.lp-tiles small { font-size: 11px; color: #667089; }
.lp-tiles span { font-size: 10px; line-height: 13px; color: #667089; }
.lp-tiles i { height: 3px; background: #f0f2f7; border-radius: 99px; margin-top: 4px; overflow: hidden; display: block; }
.lp-tiles em { display: block; height: 100%; background: #5b7cff; }
.lp-today { background: #fff; border: 1px solid rgba(15,20,40,.08); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.lp-today b { font-size: 17px; }
.lp-chips { display: flex; gap: 4px; flex-wrap: wrap; margin: 4px 0; }
.lp-chips span { font-size: 10px; padding: 4px 8px; border-radius: 99px; background: #f0f2f7; }
.lp-start { height: 40px; border-radius: 11px; background: var(--grad); color: #fff; font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.lp-seg { display: flex; background: #f0f2f7; border-radius: 12px; padding: 3px; font-size: 12px; font-weight: 650; color: #667089; }
.lp-seg span { flex: 1; text-align: center; padding: 6px 0; border-radius: 9px; }
.lp-seg .on { background: #fff; color: #0e1120; }
.lp-section { padding-top: 88px; }
.lp-section h2, .lp-final h2 { margin: 0; font-size: 36px; line-height: 40px; font-weight: 800; letter-spacing: -1px; }
.lp-lead { margin: 8px 0 0; max-width: 620px; }
.lp-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin-top: 32px; }
.lp-feature { padding: 24px; display: flex; flex-direction: column; gap: 10px; }
.lp-feature h3 { margin: 0; font-size: 18px; line-height: 24px; }
.lp-feature p { margin: 0; font-size: 15px; line-height: 22px; color: var(--muted); }
.lp-icon { width: 44px; height: 44px; border-radius: 14px; background: var(--accent-tint); color: var(--accent-strong); display: grid; place-items: center; }
.lp-steps { list-style: none; margin: 32px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lp-steps li { display: flex; gap: 16px; align-items: flex-start; }
.lp-steps li > span { width: 40px; height: 40px; border-radius: 999px; background: var(--accent-strong); color: #fff; font-weight: 800; display: grid; place-items: center; flex: none; }
.lp-steps b { font-size: 18px; }
.lp-steps p { margin: 4px 0 0; font-size: 15px; line-height: 22px; color: var(--muted); }
.lp-share { background: #3f5fe6; color: #fff; border-radius: 28px; padding: 40px; display: flex; flex-wrap: wrap; gap: 40px; align-items: center; overflow: hidden; }
.lp-share > div:first-child { flex: 999 1 320px; min-width: 0; }
.lp-share p { margin: 12px 0 0; color: #e6ebff; max-width: 440px; }
.lp-share-cards { flex: 1 1 380px; display: flex; gap: 16px; justify-content: center; align-items: flex-end; }
.lp-share-cards img { border-radius: 14px; box-shadow: 0 20px 40px rgba(14,17,32,.3); background: #2f4bc4; }
.lp-share-cards img[data-sample-card="story"] { width: 180px; height: 320px; transform: rotate(-4deg); }
.lp-share-cards img[data-sample-card="post"] { width: 216px; height: 270px; transform: rotate(3deg); }
.lp-pro { border-radius: 28px; padding: 40px; display: flex; flex-wrap: wrap; gap: 24px; align-items: center; justify-content: space-between; }
.lp-pro > div { display: flex; flex-direction: column; gap: 10px; flex: 1 1 400px; align-items: flex-start; }
.lp-pro h2 { font-size: 30px; line-height: 34px; }
.lp-pro p { margin: 0; }
.lp-pro .btn.hero { padding: 0 28px; }
.lp-final { padding-top: 88px; padding-bottom: 40px; display: flex; flex-direction: column; align-items: center; gap: 16px; text-align: center; }
.lp-final h2 { font-size: 40px; line-height: 44px; }
.lp-final .btn { padding: 0 28px; min-height: 52px; }
.lp-footer { border-top: 1px solid var(--line); }
.lp-footer .lp-wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; align-items: center; padding-top: 24px; padding-bottom: 24px; font-size: 14px; color: var(--muted); }
.lp-footer b { color: var(--text); }
.lp-footer span { display: flex; gap: 20px; flex-wrap: wrap; }
.lp-footer a { color: var(--muted); }