/* ============================================================
   Design tokens (light default, dark via [data-theme="dark"])
   ============================================================ */
:root {
  color-scheme: light;
  --bg: #F5F5F7; --surface: #FFFFFF; --sheet: #FFFFFF;
  --fill: #F0F0F3; --fill2: #E3E3E8; --sep: #E8E8EC;
  --text: #0A0A0A; --text2: #6E6E73; --text3: #AEAEB2;
  --accent: #C6FF3A; --accent-pressed: #B3EB2C; --on-accent: #0A0A0A; --accent-tint: #F1FFCF;
  --destructive: #FF3B30; --destructive-tint: #FFE9E7;
  --hero: linear-gradient(160deg, #1D1D20 0%, #0C0C0E 100%);
  --hero-text: #FFFFFF; --hero-text2: rgba(255,255,255,0.64); --hero-fill: rgba(255,255,255,0.10);
  --ring-track: #E5E5EA; --tabbar: rgba(249,249,251,0.92); --scrim: rgba(0,0,0,0.34);
  --shadow: 0 1px 2px rgba(0,0,0,0.04), 0 8px 24px rgba(0,0,0,0.06);
  --border: 1px solid rgba(0,0,0,0.04);
  --chart-muted: #E3E3E8; --chart-grid: #ECECF0; --thumb: #EDEDF1;
  --heat-empty: #E9E9EE; --heat-future: #F3F3F6; --knob: #FFFFFF; --segment: #FFFFFF;
  --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', Inter, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0A0A0A; --surface: #1C1C1E; --sheet: #2C2C2E;
  --fill: #2C2C2E; --fill2: #3A3A3C; --sep: #2E2E31;
  --text: #FFFFFF; --text2: #9A9AA0; --text3: #5F5F66;
  --accent-tint: #30381F;
  --destructive: #FF453A; --destructive-tint: #3A2422;
  --hero: linear-gradient(160deg, #27272B 0%, #18181B 100%);
  --hero-fill: rgba(255,255,255,0.08);
  --ring-track: #2C2C2E; --tabbar: rgba(20,20,22,0.92); --scrim: rgba(0,0,0,0.62);
  --shadow: none; --border: 1px solid #2A2A2D;
  --chart-muted: #3A3A3C; --chart-grid: #2A2A2D; --thumb: #2A2A2D;
  --heat-empty: #2A2A2D; --heat-future: #202023; --segment: #48484A;
}

/* ============================================================
   Base
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body { min-height: 100vh; min-height: 100dvh; overscroll-behavior-y: none; -webkit-text-size-adjust: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; text-align: inherit; }
input, select { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
svg { display: block; flex: none; }
img { display: block; max-width: 100%; }
[hidden] { display: none !important; }
.tnum { font-variant-numeric: tabular-nums; }
.c2 { color: var(--text2); } .c3 { color: var(--text3); } .c1 { color: var(--text); }
.ellipsis { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.center { text-align: center; }
.row { display: flex; align-items: center; gap: 8px; }
.row.between { justify-content: space-between; }
.col { display: flex; flex-direction: column; gap: 8px; }
.grow { flex: 1; min-width: 0; }
.mt4 { margin-top: 4px; } .mt8 { margin-top: 8px; } .mt12 { margin-top: 12px; } .mt16 { margin-top: 16px; }
.gap4 { gap: 4px; } .gap6 { gap: 6px; } .gap12 { gap: 12px; } .gap16 { gap: 16px; }

/* Type scale (SF Pro sizes) */
.t-large { font-size: 34px; line-height: 41px; font-weight: 700; letter-spacing: -0.6px; }
.t-title1 { font-size: 28px; line-height: 34px; font-weight: 700; letter-spacing: -0.5px; }
.t-title2 { font-size: 22px; line-height: 28px; font-weight: 700; letter-spacing: -0.35px; }
.t-title3 { font-size: 20px; line-height: 25px; font-weight: 600; letter-spacing: -0.3px; }
.t-head { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.25px; }
.t-body { font-size: 17px; line-height: 22px; font-weight: 400; letter-spacing: -0.25px; }
.t-callout { font-size: 16px; line-height: 21px; font-weight: 400; letter-spacing: -0.2px; }
.t-sub { font-size: 15px; line-height: 20px; font-weight: 400; letter-spacing: -0.15px; }
.t-sub-b { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -0.15px; }
.t-foot { font-size: 13px; line-height: 18px; font-weight: 400; }
.t-foot-b { font-size: 13px; line-height: 18px; font-weight: 600; }
.t-cap { font-size: 12px; line-height: 16px; font-weight: 400; }
.t-cap-b { font-size: 12px; line-height: 16px; font-weight: 600; }
.t-over { font-size: 11px; line-height: 13px; font-weight: 600; letter-spacing: 0.7px; text-transform: uppercase; }
.t-numxl { font-size: 56px; line-height: 60px; font-weight: 700; letter-spacing: -2.2px; }
.t-numm { font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.7px; }
.t-nums { font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.25px; }

/* ============================================================
   Screen layout
   ============================================================ */
#app { min-height: 100vh; min-height: 100dvh; }
.screen { min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column; padding-top: max(env(safe-area-inset-top), 14px); }
.content { flex: 1; display: flex; flex-direction: column; gap: 16px; padding: 0 16px; padding-bottom: calc(49px + env(safe-area-inset-bottom) + 24px); }
.content.tight { gap: 12px; }
.content.no-tab { padding-bottom: calc(env(safe-area-inset-bottom) + 24px); }
.content.with-bar { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.content.with-bar-2 { padding-bottom: calc(126px + env(safe-area-inset-bottom)); }
.nav { height: 44px; display: flex; align-items: center; justify-content: space-between; flex: none; }
.nav .back { display: flex; align-items: center; height: 44px; margin-left: -6px; padding-right: 8px; }
.nav .trailing { display: flex; gap: 8px; align-items: center; }
.header { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex: none; }
.header .titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.section { display: flex; align-items: baseline; justify-content: space-between; }
.stack { display: flex; flex-direction: column; gap: 10px; }

/* Tab bar */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: calc(49px + env(safe-area-inset-bottom)); padding: 6px 12px env(safe-area-inset-bottom); background: var(--tabbar); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-top: 0.5px solid var(--sep); display: flex; justify-content: space-around; }
.tabbar a { width: 72px; display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--text3); font-size: 10px; line-height: 12px; font-weight: 500; letter-spacing: 0.1px; }
.tabbar a.on { color: var(--text); font-weight: 600; }

/* Bottom action bar */
.bottom-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; padding: 12px 16px calc(env(safe-area-inset-bottom) + 12px); background: var(--bg); border-top: 0.5px solid var(--sep); display: flex; flex-direction: column; gap: 8px; }
.bottom-bar.plain { border-top: 0; }

/* ============================================================
   Components
   ============================================================ */
.card { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); border: var(--border); padding: 16px; display: flex; flex-direction: column; }
.card.flush { padding: 0; overflow: hidden; }
.card.tap:active { background: var(--fill); }
.hairline { height: 0.5px; background: var(--sep); }

.btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 56px; padding: 0 20px; border-radius: 16px; width: 100%; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.25px; user-select: none; -webkit-user-select: none; transition: transform 0.08s ease, background 0.12s ease; flex: none; }
.btn:active { transform: scale(0.985); }
.btn-primary { background: var(--accent); color: var(--on-accent); }
.btn-primary:active { background: var(--accent-pressed); }
.btn-secondary { background: var(--fill); color: var(--text); }
.btn-secondary:active { background: var(--fill2); }
.btn-destructive { background: var(--destructive-tint); color: var(--destructive); }
.btn-text { background: transparent; color: var(--text); width: auto; padding: 0 8px; }
.btn-apple { background: #000000; color: #FFFFFF; }
:root[data-theme="dark"] .btn-apple { background: #FFFFFF; color: #000000; }
.btn[disabled], .btn.is-disabled { background: var(--fill); color: var(--text3); pointer-events: none; }
.btn.is-loading { pointer-events: none; }
.btn-md { height: 44px; border-radius: 12px; font-size: 15px; padding: 0 16px; }
.btn-sm { height: 36px; border-radius: 10px; font-size: 13px; padding: 0 14px; width: auto; }
.btn.auto { width: auto; }
.icon-btn { width: 36px; height: 36px; border-radius: 50%; background: var(--fill); color: var(--text); display: flex; align-items: center; justify-content: center; flex: none; }
.icon-btn:active { background: var(--fill2); }
.icon-btn.lg { width: 56px; height: 56px; }
.icon-btn.plain { background: transparent; }
.icon-btn.plain:active { background: var(--fill); }
.icon-btn.sm { width: 30px; height: 30px; }
.icon-btn.c2 { color: var(--text2); }

.spinner { animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.pill { height: 22px; padding: 0 8px; border-radius: 999px; background: var(--fill); color: var(--text2); display: inline-flex; align-items: center; gap: 4px; font-size: 12px; line-height: 16px; font-weight: 600; flex: none; white-space: nowrap; }
.pill.md { height: 28px; padding: 0 10px; font-size: 13px; line-height: 18px; }
.pill.accent { background: var(--accent-tint); color: var(--text); }
.pill.hero { background: var(--hero-fill); color: var(--hero-text); }
.pill.solid { background: var(--surface); color: var(--text); box-shadow: 0 1px 4px rgba(0,0,0,0.08); }
.pill.on-accent { background: var(--accent); color: var(--on-accent); }

.check { width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--fill2); flex: none; display: flex; align-items: center; justify-content: center; }
.check.done { background: var(--accent); color: var(--on-accent); border: 0; }
.check.active { border: 2px solid var(--text); }
.check.sm { width: 24px; height: 24px; }

.toggle { width: 51px; height: 31px; border-radius: 16px; background: var(--fill2); position: relative; flex: none; transition: background 0.15s ease; }
.toggle::after { content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%; background: var(--knob); box-shadow: 0 2px 6px rgba(0,0,0,0.18); transition: left 0.15s ease; }
.toggle.on { background: var(--accent); }
.toggle.on::after { left: 22px; }

.segmented { display: flex; background: var(--fill); border-radius: 10px; padding: 2px; height: 34px; flex: none; }
.segmented button { flex: 1; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text2); padding: 0 10px; white-space: nowrap; }
.segmented button.on { background: var(--segment); color: var(--text); }
:root[data-theme="light"] .segmented button.on { box-shadow: 0 1px 3px rgba(0,0,0,0.08); }

.field-input { width: 100%; height: 52px; border-radius: 14px; background: var(--fill); border: 1px solid transparent; padding: 0 16px; font-size: 17px; color: var(--text); outline: none; -webkit-appearance: none; appearance: none; }
.field-input:focus { border-color: var(--accent); background: var(--surface); }
.field-input::placeholder { color: var(--text3); }
.form { display: flex; flex-direction: column; gap: 12px; }
.form label { font-size: 13px; line-height: 18px; font-weight: 600; color: var(--text2); display: flex; flex-direction: column; gap: 6px; }
.error { color: var(--destructive); font-size: 13px; line-height: 18px; }

/* Thumbnails and previews */
.thumb { width: 56px; height: 56px; border-radius: 14px; background: var(--thumb); position: relative; display: flex; align-items: center; justify-content: center; color: var(--text2); flex: none; overflow: hidden; }
.thumb.sm { width: 44px; height: 44px; border-radius: 12px; }
.thumb.xs { width: 36px; height: 36px; border-radius: 10px; }
.thumb img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.thumb .badge { position: absolute; right: 4px; bottom: 4px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; }
.preview { height: 200px; border-radius: 20px; background: var(--thumb); position: relative; display: flex; align-items: center; justify-content: center; color: var(--text3); overflow: hidden; flex: none; width: 100%; }
.preview.sm { height: 140px; }
.preview img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; }
.preview .pict { position: absolute; left: 16px; top: 14px; color: var(--text3); }
.preview .play { position: relative; width: 56px; height: 56px; border-radius: 50%; background: var(--surface); color: var(--text); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 12px rgba(0,0,0,0.14); }
.preview .corner { position: absolute; left: 12px; bottom: 12px; }
.preview .corner-r { position: absolute; right: 12px; bottom: 12px; }
.preview:active .play { transform: scale(0.96); }

/* Hero */
.hero { background: var(--hero); border-radius: 24px; padding: 22px 20px 20px; display: flex; flex-direction: column; gap: 16px; color: var(--hero-text); }
.hero .c2 { color: var(--hero-text2); }

/* Exercise rows */
.ex-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px 10px 16px; min-height: 76px; border-bottom: 0.5px solid var(--sep); width: 100%; }
.ex-row:last-child { border-bottom: 0; }
.ex-row:active { background: var(--fill); }
.ex-row.done .name { color: var(--text2); text-decoration: line-through; text-decoration-color: var(--text3); }
.ex-row .texts { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }

/* Set table */
.set-table { padding: 8px 12px 10px; gap: 5px; }
.set-head { display: flex; align-items: center; gap: 8px; height: 28px; padding: 0 4px; }
.set-head > div { text-align: center; }
.c-set { width: 28px; flex: none; } .c-prev { width: 72px; flex: none; } .c-kg { flex: 1; min-width: 0; } .c-reps { width: 64px; flex: none; } .c-check { width: 28px; flex: none; }
.set-row-wrap { position: relative; border-radius: 12px; overflow: hidden; }
.set-row-wrap .delete { position: absolute; right: 0; top: 0; bottom: 0; width: 88px; background: var(--destructive); color: #fff; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 13px; font-weight: 600; }
.set-row { display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 4px; background: var(--surface); position: relative; transition: transform 0.18s ease; width: 100%; }
.set-row.swiped { transform: translateX(-88px); }
.mini { height: 36px; border-radius: 10px; background: var(--fill); display: flex; align-items: center; justify-content: center; font-size: 17px; line-height: 22px; font-weight: 600; letter-spacing: -0.25px; font-variant-numeric: tabular-nums; color: var(--text); border: 0; text-align: center; width: 100%; -webkit-appearance: none; appearance: none; outline: none; padding: 0; }
.mini::placeholder { color: var(--text3); font-weight: 600; }
.mini:focus { box-shadow: 0 0 0 2px var(--accent) inset; background: var(--surface); }
.set-active { background: var(--accent-tint); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.numfield { flex: 1; min-width: 0; height: 64px; border-radius: 14px; background: var(--surface); border: 1px solid var(--sep); display: flex; align-items: center; padding: 0 8px; gap: 2px; }
.numfield:focus-within { border: 2px solid var(--accent); }
.numfield .val { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.numfield input { width: 100%; text-align: center; background: transparent; border: 0; outline: none; padding: 0; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: -0.7px; font-variant-numeric: tabular-nums; color: var(--text); -webkit-appearance: none; appearance: none; -moz-appearance: textfield; }
.numfield input::-webkit-outer-spin-button, .numfield input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.numfield input::placeholder { color: var(--text3); }
.stepper { width: 40px; height: 40px; border-radius: 50%; background: var(--fill); color: var(--text); display: flex; align-items: center; justify-content: center; flex: none; }
.stepper:active { background: var(--fill2); }
.stepper[disabled] { color: var(--text3); }
.add-set { height: 44px; border-radius: 12px; background: var(--fill); color: var(--text); display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 15px; font-weight: 600; width: 100%; }
.add-set:active { background: var(--fill2); }
.segs { display: flex; gap: 4px; }
.segs > div { flex: 1; height: 4px; border-radius: 2px; background: var(--fill2); overflow: hidden; }
.segs > div.done { background: var(--accent); }
.segs > div > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }

/* Stat tile, ring, chips, days */
.stat { flex: 1; min-width: 0; background: var(--surface); border-radius: 20px; box-shadow: var(--shadow); border: var(--border); padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; }
.tiles { display: flex; gap: 12px; }
.ring { position: relative; flex: none; }
.ring svg { transform: rotate(-90deg); }
.ring .center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.chips { display: flex; gap: 8px; overflow-x: auto; margin: 0 -16px; padding: 0 16px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { height: 40px; min-width: 60px; padding: 0 14px; border-radius: 12px; background: var(--fill); color: var(--text2); display: flex; align-items: center; justify-content: center; gap: 5px; flex: none; font-size: 15px; font-weight: 600; letter-spacing: -0.15px; }
.chip.done { color: var(--text); }
.chip.on { background: var(--accent); color: var(--on-accent); }
.days { display: flex; justify-content: space-between; }
.days > div { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 28px; font-size: 12px; color: var(--text3); }
.days .dot { width: 24px; height: 24px; border-radius: 50%; background: var(--fill); display: flex; align-items: center; justify-content: center; }
.days .dot.done { background: var(--accent); color: var(--on-accent); }
.days .dot.today { background: transparent; border: 2px solid var(--accent); }
.days .dot.rest { background: transparent; }
.days .dot.rest::after { content: ''; width: 6px; height: 6px; border-radius: 50%; background: var(--fill2); }
.days .today-l { color: var(--text); font-weight: 600; }

/* Day rows (program) */
.day-row { display: flex; align-items: center; gap: 12px; padding: 10px 16px; min-height: 64px; border-bottom: 0.5px solid var(--sep); width: 100%; }
.day-row:last-child { border-bottom: 0; }
.day-row:active { background: var(--fill); }
.day-badge { width: 44px; height: 44px; border-radius: 12px; background: var(--fill); color: var(--text); display: flex; flex-direction: column; align-items: center; justify-content: center; flex: none; }
.day-badge.on { background: var(--accent); color: var(--on-accent); }
.day-badge .n { font-size: 17px; line-height: 20px; font-weight: 600; }
.day-badge .d { font-size: 10px; line-height: 12px; font-weight: 600; letter-spacing: 0.6px; text-transform: uppercase; opacity: 0.7; }
.rest-row { display: flex; align-items: center; gap: 12px; padding: 0 16px; height: 44px; border-bottom: 0.5px solid var(--sep); }
.rest-row:last-child { border-bottom: 0; }

/* Settings list */
.list-row { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 16px; border-bottom: 0.5px solid var(--sep); width: 100%; }
.list-row:last-child { border-bottom: 0; }
.list-row.tap:active { background: var(--fill); }
.list-row .lbl { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.group { display: flex; flex-direction: column; gap: 6px; }
.group > .t-over { padding-left: 16px; }

/* Sheets and overlays */
#overlay { position: fixed; inset: 0; z-index: 50; pointer-events: none; }
#overlay.open { pointer-events: auto; }
.scrim { position: absolute; inset: 0; background: var(--scrim); opacity: 0; transition: opacity 0.2s ease; }
#overlay.open .scrim { opacity: 1; }
.sheet { position: absolute; left: 0; right: 0; bottom: 0; background: var(--sheet); border-radius: 24px 24px 0 0; padding: 8px 20px calc(env(safe-area-inset-bottom) + 20px); box-shadow: 0 -8px 40px rgba(0,0,0,0.16); display: flex; flex-direction: column; max-height: 88vh; max-height: 88dvh; overflow-y: auto; transform: translateY(100%); transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
#overlay.open .sheet { transform: translateY(0); }
.grabber { width: 36px; height: 5px; border-radius: 3px; background: var(--fill2); margin: 0 auto 12px; flex: none; }
.modal { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 16px; }
.modal .box { background: var(--sheet); border-radius: 20px; padding: 20px; width: 100%; max-width: 360px; display: flex; flex-direction: column; gap: 12px; }
.video-box { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); padding: 0 12px; display: flex; flex-direction: column; gap: 12px; }
.video-frame { position: relative; width: 100%; padding-top: 56.25%; background: #000; border-radius: 16px; overflow: hidden; }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.alt-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; min-height: 68px; border-bottom: 0.5px solid var(--sep); width: 100%; }
.alt-row:last-child { border-bottom: 0; }

/* Empty state */
.empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 32px 24px; }
.empty .ico { width: 56px; height: 56px; border-radius: 50%; background: var(--fill); color: var(--text2); display: flex; align-items: center; justify-content: center; margin-bottom: 4px; }

/* Heatmap */
.heat { display: flex; flex-direction: column; gap: 3px; }
.heat .r { display: flex; gap: 3px; align-items: center; }
.heat .l { width: 14px; font-size: 12px; color: var(--text3); text-align: center; }
.heat .c { width: 16px; height: 16px; border-radius: 4px; background: var(--heat-empty); flex: none; }
.heat .c.done { background: var(--accent); }
.heat .c.future { background: var(--heat-future); }
.heat .c.rest { background: transparent; }
.heat .c.today { background: transparent; border: 2px solid var(--accent); }
.heat .wl { width: 16px; font-size: 11px; color: var(--text3); text-align: center; }

/* Toast and misc */
.toast { position: fixed; left: 16px; right: 16px; bottom: calc(49px + env(safe-area-inset-bottom) + 16px); z-index: 60; background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 14px; font-size: 15px; font-weight: 600; text-align: center; box-shadow: 0 8px 24px rgba(0,0,0,0.18); animation: toast 0.2s ease; }
@keyframes toast { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.tip { background: var(--surface); border-radius: 16px; padding: 12px 14px; display: flex; gap: 12px; align-items: center; border: var(--border); box-shadow: var(--shadow); }
.cue { display: flex; align-items: flex-start; gap: 12px; }
.cue .n { width: 24px; height: 24px; border-radius: 50%; background: var(--fill); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; flex: none; }
.login-wrap { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 24px; padding: 24px 16px calc(env(safe-area-inset-bottom) + 24px); max-width: 420px; width: 100%; margin: 0 auto; }
.logo { width: 64px; height: 64px; border-radius: 18px; background: var(--accent); color: var(--on-accent); display: flex; align-items: center; justify-content: center; }
.progress-bar { height: 4px; border-radius: 2px; background: var(--fill2); overflow: hidden; }
.progress-bar > i { display: block; height: 100%; background: var(--accent); border-radius: 2px; }
.warm-row { display: flex; align-items: center; gap: 12px; }
.ex-focus { touch-action: pan-y; }
.record-row { display: flex; align-items: center; gap: 12px; height: 48px; border-bottom: 0.5px solid var(--sep); }
.record-row:last-child { border-bottom: 0; }
@media (min-width: 560px) {
  .screen { max-width: 520px; margin: 0 auto; }
  .tabbar, .bottom-bar { max-width: 520px; margin: 0 auto; }
  .sheet { max-width: 520px; margin: 0 auto; }
}