/* ── Tokens (from prototype) ── */
:root {
  --bg-ocean:      #EBF0F5;
  --bg-island:     #FFFFFF;
  --bg-tertiary:   #E1E6EB;
  --bg-accent:     #0077FF;
  --bg-attention:  #FF8800;
  --bg-success:    #00B849;
  --bg-error:      #FF4400;
  --text-primary:   #141414;
  --text-secondary: #76787A;
  --text-accent:    #0077FF;
  --text-success:   #00B849;
  --text-error:     #FF4400;
  --text-warning:   #e0a500;
  --text-white:     #FFFFFF;
  --text-disabled:  #C4C8CC;
  --btn-disabled-bg: #C4C8CC;
  --icon-accent:    #0077FF;
  --continent: 32px;
  --island:   16px;
  --pebble:   12px;
  --garden:   8px;
  --button:   8px;
  --rounding: 3264px;
  --base-2xs: 4px;
  --base-xs:  6px;
  --base-s:   8px;
  --base-m:   12px;
  --base-l:   16px;
  --base-xl:  24px;
  --base-xxl: 32px;
  --base-3xl: 48px;
}

/* ── Euclid Circular A ── */
@font-face { font-family:'Euclid Circular A'; src:url('fonts/Euclid Circular A Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Euclid Circular A'; src:url('fonts/Euclid Circular A Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face { font-family:'Euclid Circular A'; src:url('fonts/Euclid Circular A SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:'Euclid Circular A'; src:url('fonts/Euclid Circular A Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }

*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }

body {
  font-family:'Euclid Circular A', -apple-system, 'SF Pro Text', sans-serif;
  background:var(--bg-ocean);
  min-height:100dvh;
  display:flex;
  flex-direction:column;
  -webkit-font-smoothing:antialiased;
  color:var(--text-primary);
  overflow-x:hidden;
}

/* ── Navbar ── */
.navbar { height:48px; background:var(--bg-ocean); display:flex; align-items:center; justify-content:space-between; padding:0 var(--base-s); flex-shrink:0; position:sticky; top:0; z-index:100; }
.navbar-left { width:44px; height:44px; flex-shrink:0; position:relative; }
.navbar-left .navbar-btn { position:absolute; inset:0; }
.navbar-btn { width:44px; height:44px; display:flex; align-items:center; justify-content:center; color:var(--text-accent); font-size:24px; cursor:pointer; flex-shrink:0; background:none; border:none; -webkit-tap-highlight-color:transparent; }
.navbar-ghost { width:44px; height:44px; flex-shrink:0; }
.navbar-center { position:absolute; left:0; right:0; display:flex; flex-direction:column; align-items:center; justify-content:center; pointer-events:none; }
.navbar-title { font-size:17px; font-weight:600; line-height:22px; color:var(--text-primary); white-space:nowrap; }
.navbar-subtitle { font-size:14px; font-weight:400; line-height:18px; color:var(--text-secondary); white-space:nowrap; }

/* ── Scroll content ── */
.scroll-content { flex:1; overflow-y:auto; padding:var(--base-l); display:flex; flex-direction:column; gap:var(--base-l); padding-bottom:140px; }
.scroll-content::-webkit-scrollbar { display:none; }

/* ── Screen (app-level) ── */
.screen { display:none; flex-direction:column; flex:1; min-height:0; }
.screen.active { display:flex; }

/* ── Island ── */
.island { background:var(--bg-island); border-radius:var(--island); overflow:hidden; flex-shrink:0; }
.island-padded { background:var(--bg-island); border-radius:var(--island); padding:var(--base-l) var(--base-l) var(--base-xl); flex-shrink:0; display:flex; flex-direction:column; gap:var(--base-l); }

/* ── Divider ── */
.divider { height:1px; background:var(--bg-ocean); margin:0 var(--base-l); flex-shrink:0; }

/* ── SectionLabel ── */
.section-label { font-size:13px; font-weight:600; line-height:18px; color:var(--text-secondary); letter-spacing:0.01em; padding:0 var(--base-s); }

/* ── ServiceTeaser ── */
.service-teaser { width:48px; height:48px; border-radius:var(--garden); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.service-teaser i { font-size:24px; }
.service-teaser.start       { background:var(--bg-tertiary); }
.service-teaser.start i     { color:var(--text-secondary); }
.service-teaser.max         { background:#e0a500; }
.service-teaser.max i       { color:#fff; }
.service-teaser.dark        { background:#1C1C1E; }
.service-teaser.dark i      { color:#fff; }
.service-teaser.accent      { background:rgba(0,119,255,0.12); }
.service-teaser.accent i    { color:var(--text-accent); }
.service-teaser.success     { background:rgba(0,184,73,0.12); }
.service-teaser.success i   { color:var(--text-success); }
.service-teaser.error       { background:rgba(255,68,0,0.12); }
.service-teaser.error i     { color:var(--text-error); }
.service-teaser.custom      { background:var(--teaser-bg); }
.service-teaser.custom i    { color:var(--teaser-icon); }

/* ── PlanCard ── */
#package-list { display:flex; flex-direction:column; gap:12px; }
.plan-card { display:flex; flex-direction:column; gap:16px; background:var(--bg-island); border-radius:20px; padding:20px; width:100%; border:2px solid transparent; flex-shrink:0; cursor:pointer; transition:border-color 0.15s; -webkit-tap-highlight-color:transparent; }
.plan-card.selected   { border-color:var(--bg-accent); }
.plan-card.active-plan { border-color:var(--bg-success); }
.plan-card-header { display:flex; align-items:center; gap:var(--base-l); }
.plan-card-meta { display:flex; align-items:center; gap:6px; }
.plan-card-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--base-xs); }
.plan-card-title { font-size:17px; font-weight:600; line-height:22px; color:var(--text-primary); }
.plan-card-price { font-size:14px; font-weight:400; line-height:18px; color:var(--text-secondary); }
.plan-card-price .old-price { text-decoration:line-through; color:var(--text-disabled); margin-right:4px; }
.plan-card-note { font-size:13px; font-weight:400; line-height:18px; color:var(--text-accent); letter-spacing:0.01em; }
.plan-radio { width:24px; height:24px; border-radius:50%; border:2px solid var(--bg-tertiary); flex-shrink:0; display:flex; align-items:center; justify-content:center; transition:border-color 0.15s; }
.plan-radio.selected::after { content:''; width:12px; height:12px; border-radius:50%; background:var(--bg-accent); }
.plan-radio.selected { border-color:var(--bg-accent); }
.plan-radio.active { border-color:var(--bg-success); }
.plan-radio.active::after { content:''; width:12px; height:12px; border-radius:50%; background:var(--bg-success); }
.card-radio { width:24px; height:24px; border-radius:50%; border:2px solid var(--bg-tertiary); flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.card-radio.checked { border-color:var(--bg-success); background:var(--bg-success); }
.card-radio.checked.accent { border-color:var(--text-accent); background:var(--text-accent); }
.card-radio.checked.accent::after { content:''; width:8px; height:8px; border-radius:50%; background:#fff; }

/* ── PlanBadge ── */
.plan-badge { display:inline-flex; align-items:center; justify-content:center; padding:2px 8px; border-radius:var(--rounding); font-size:11px; font-weight:600; line-height:16px; letter-spacing:0.01em; flex-shrink:0; min-width:86px; text-align:center; }
.plan-badge.success { background:rgba(0,184,73,0.12); color:#00B849; }
.plan-badge.warning { background:rgba(255,136,0,0.12); color:#FF8800; }
.plan-badge.accent  { background:rgba(0,119,255,0.12); color:#0077FF; }

/* ── BulletList ── */
.bullet-list { display:flex; flex-direction:column; gap:10px; }
.bullet-item { display:flex; align-items:center; gap:10px; min-height:22px; }
.bullet-icon { width:20px; height:20px; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.bullet-icon i { font-size:18px; }
.bullet-text { font-size:14px; font-weight:500; line-height:20px; letter-spacing:0.01em; }
.bullet-item.check .bullet-icon i { color:var(--icon-accent); }
.bullet-item.check .bullet-text   { color:var(--text-primary); }
.bullet-item.cross .bullet-icon i { color:var(--text-disabled); }
.bullet-item.cross .bullet-text   { color:var(--text-disabled); }

/* ── StickyFooter ── */
.icon-btn { background:none; border:none; padding:8px; cursor:pointer; border-radius:50%; -webkit-tap-highlight-color:transparent; }
.icon-btn:active { background:var(--bg-tertiary); }
.sticky-footer { position:fixed; bottom:0; left:0; right:0; background:var(--bg-ocean); padding:var(--base-l) var(--base-l) 48px; display:flex; flex-direction:column; align-items:center; gap:var(--base-s); z-index:50; }
.sticky-btn { width:100%; height:48px; border-radius:var(--island); border:none; cursor:pointer; font-family:inherit; font-size:17px; font-weight:500; line-height:22px; display:flex; align-items:center; justify-content:center; gap:8px; -webkit-tap-highlight-color:transparent; }
.sticky-btn.primary   { background:#0077FF; color:#fff; }
.sticky-btn.secondary { background:var(--bg-island); color:var(--text-accent); }
.sticky-btn.disabled  { background:var(--btn-disabled-bg); color:#fff; cursor:not-allowed; pointer-events:none; }

/* Terms checkbox */
.terms-checkbox { display:flex; align-items:flex-start; gap:10px; padding:4px 6px 8px; cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; width:100%; }
.terms-checkbox input { position:absolute; opacity:0; pointer-events:none; }
.terms-checkbox-box { width:20px; height:20px; border-radius:6px; border:2px solid var(--bg-tertiary); display:flex; align-items:center; justify-content:center; flex-shrink:0; background:#fff; transition:all 0.15s; margin-top:1px; }
.terms-checkbox-box i { color:#fff; font-size:14px; opacity:0; transition:opacity 0.15s; }
.terms-checkbox input:checked ~ .terms-checkbox-box { background:var(--bg-accent); border-color:var(--bg-accent); }
.terms-checkbox input:checked ~ .terms-checkbox-box i { opacity:1; }
.terms-checkbox-text { font-size:13px; font-weight:400; line-height:18px; color:var(--text-secondary); }
.terms-checkbox-text a { color:var(--text-accent); text-decoration:none; font-weight:500; }

/* ── Button ── */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:var(--base-s); height:48px; padding:0 var(--base-xl); border-radius:var(--button); border:none; cursor:pointer; font-family:inherit; font-size:17px; font-weight:500; line-height:22px; white-space:nowrap; -webkit-tap-highlight-color:transparent; }
.btn.full { width:100%; border-radius:var(--pebble); }
.btn.primary { background:var(--bg-accent); color:#fff; }
.btn.ghost   { background:transparent; color:var(--text-accent); }
.btn.muted   { background:transparent; color:var(--text-secondary); }
.btn.danger  { background:rgba(255,68,0,0.10); color:var(--bg-error); }

/* ── Badge ── */
.badge { display:inline-flex; align-items:center; gap:4px; border-radius:var(--rounding); font-weight:500; white-space:nowrap; width:fit-content; padding:2px 6px; font-size:12.5px; line-height:16px; }
.badge.success   { background:rgba(0,184,73,0.16); color:#00B849; }
.badge.attention { background:rgba(255,136,0,0.16); color:#FF8800; }
.badge.error     { background:rgba(255,68,0,0.16); color:#FF4400; }
.badge.secondary { background:rgba(197,210,224,0.16); color:var(--text-secondary); }

/* ── ControlRow ── */
.control-row { display:flex; align-items:center; gap:var(--base-m); padding:var(--base-l); width:100%; }
.control-text { flex:1; min-width:0; display:flex; flex-direction:column; gap:var(--base-2xs); }
.control-title { font-size:17px; font-weight:500; line-height:22px; color:var(--text-primary); }
.control-subtitle { font-size:14px; font-weight:400; line-height:18px; color:var(--text-secondary); }

/* ── CellButton ── */
.cell-btn { display:flex; align-items:center; gap:var(--base-m); background:var(--bg-island); border-radius:var(--island); padding:var(--base-l); cursor:pointer; width:100%; border:none; font-family:inherit; -webkit-tap-highlight-color:transparent; }
.cell-btn-title { font-size:17px; font-weight:500; line-height:22px; color:var(--text-primary); flex:1; text-align:left; }
.cell-btn-title.accent { color:var(--text-accent); }
.cell-btn-title.danger { color:var(--bg-error); }
.cell-btn-chevron { font-size:16px; color:var(--text-secondary); flex-shrink:0; display:flex; align-items:center; }

/* ── CellButtonAlert ── */
.cell-btn-alert { display:flex; align-items:center; gap:var(--base-m); border-radius:var(--island); padding:var(--base-m) var(--base-l); width:100%; }
.cell-btn-alert-icon { font-size:24px; color:#fff; flex-shrink:0; }
.cell-btn-alert-text { display:flex; flex-direction:column; gap:var(--base-2xs); flex:1; min-width:0; }
.cell-btn-alert-title { font-size:17px; font-weight:600; line-height:22px; color:#fff; }
.cell-btn-alert-subtitle { font-size:14px; font-weight:400; line-height:18px; color:rgba(255,255,255,0.85); }
.cell-btn-alert.attention { background:#FF8800; }
.cell-btn-alert.negative { background:var(--bg-error); }

/* ── EmptyState ── */
.empty-state { display:flex; flex-direction:column; align-items:center; gap:var(--base-m); padding:var(--base-xl); text-align:center; width:100%; }
.empty-state-icon { width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:24px; flex-shrink:0; }
.empty-state-icon.accent  { background:var(--bg-accent); color:#fff; }
.empty-state-icon.neutral { background:var(--bg-tertiary); color:var(--text-secondary); }
.empty-state-icon.error   { background:rgba(255,68,0,0.12); color:var(--bg-error); }
.empty-state-title { font-size:17px; font-weight:600; line-height:22px; color:var(--text-primary); }
.empty-state-subtitle { font-size:14px; font-weight:400; line-height:20px; color:var(--text-secondary); }

/* ── Loading ── */
.loading-center { flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:var(--base-l); padding:var(--base-xl); }
.spinner { display:inline-block; width:24px; height:24px; flex-shrink:0; border-radius:50%; border:2.5px solid var(--bg-tertiary); border-top-color:var(--bg-accent); animation:spin 0.75s linear infinite; }
.spinner.lg { width:36px; height:36px; border-width:3px; }
@keyframes spin { to { transform:rotate(360deg); } }

/* ── Result center ── */
.result-center { flex:1; display:flex; flex-direction:column; align-items:center; padding:var(--base-xl) var(--base-l) 120px; gap:var(--base-l); overflow-y:auto; }
.result-center::-webkit-scrollbar { display:none; }
.result-icon { width:72px; height:72px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.result-icon.success { background:rgba(0,184,73,0.12); }
.result-icon.success i { font-size:36px; color:#00B849; }
.result-icon.error { background:rgba(255,68,0,0.12); }
.result-icon.error i { font-size:36px; color:var(--bg-error); }
.result-icon.neutral { background:var(--bg-tertiary); }
.result-icon.neutral i { font-size:36px; color:var(--text-secondary); }
.result-icon.warning { background:rgba(255,136,0,0.12); }
.result-icon.warning i { font-size:36px; color:#FF8800; }
.result-title { font-size:22px; font-weight:600; line-height:28px; color:var(--text-primary); text-align:center; }
.result-sub   { font-size:15px; font-weight:400; line-height:20px; color:var(--text-secondary); text-align:center; }
.payment-info { font-size:13px; font-weight:400; line-height:18px; color:var(--text-secondary); text-align:center; letter-spacing:0.01em; }

/* ── ValueList ── */
.value-list { display:flex; flex-direction:column; gap:var(--base-s); width:100%; }
.value-row { display:flex; align-items:center; min-height:18px; width:100%; }
.value-label { font-size:14px; font-weight:400; line-height:18px; color:var(--text-secondary); flex:1; }
.value-data { font-size:14px; font-weight:500; line-height:18px; color:var(--text-primary); text-align:right; flex:1; min-width:0; }
.value-data .currency { font-weight:400; color:var(--text-secondary); }

/* ── Informer ── */
.informer { display:flex; align-items:flex-start; gap:var(--base-m); padding:var(--base-m) var(--base-l); border-radius:var(--button); background:var(--bg-island); width:100%; }
.informer.standalone { border-radius:var(--island); padding:var(--base-l); }
.informer.accent-tinted { background:rgba(0,119,255,0.08); }
.informer.error-tinted  { background:rgba(255,68,0,0.06); }
.informer.warning-tinted { background:rgba(255,136,0,0.08); }
.informer-icon { font-size:16px; flex-shrink:0; }
.informer.accent-tinted .informer-icon { color:var(--text-accent); }
.informer.error-tinted  .informer-icon { color:var(--text-error); }
.informer.warning-tinted .informer-icon { color:#FF8800; }
.informer-text { font-size:13px; font-weight:400; line-height:18px; color:var(--text-primary); flex:1; letter-spacing:0.01em; }

/* ── Toast ── */
.toast { position:fixed; top:var(--base-l); left:var(--base-l); right:var(--base-l); background:var(--bg-island); border-radius:var(--island); height:64px; padding:0 var(--base-l); display:none; align-items:center; gap:var(--base-m); z-index:200; box-shadow:0 4px 16px rgba(0,0,0,0.1); }
.toast.show { display:flex; animation:toastIn 0.3s ease; }
@keyframes toastIn { from { opacity:0; transform:translateY(-12px); } to { opacity:1; transform:translateY(0); } }
.toast-icon-wrap { width:32px; height:32px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:18px; flex-shrink:0; }
.toast-icon-wrap.success { background:rgba(0,184,73,0.2); color:#00b849; }
.toast-icon-wrap.error   { background:rgba(255,68,0,0.15); color:#ff4400; }
.toast-text { font-size:14px; font-weight:500; line-height:18px; color:var(--text-primary); flex:1; }

/* ── BottomSheet ── */
.bs-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.4); z-index:150; display:none; }
.bs-overlay.show { display:block; }
.bottom-sheet { position:fixed; bottom:0; left:0; right:0; z-index:160; background:var(--bg-ocean); border-radius:var(--continent) var(--continent) 0 0; display:none; flex-direction:column; transform:translateY(100%); transition:transform 0.3s ease; }
.bottom-sheet.show { display:flex; transform:translateY(0); }
.grab-handle { width:100%; display:flex; justify-content:center; padding:var(--base-m) 0 var(--base-xl); flex-shrink:0; }
.grab-handle-pill { width:48px; height:4px; border-radius:var(--rounding); background:var(--bg-accent); }
.bs-header { display:flex; flex-direction:column; align-items:flex-start; gap:var(--base-m); padding:var(--base-xl) var(--base-l) var(--base-l); width:100%; flex-shrink:0; }
.bs-title { font-size:17px; font-weight:600; line-height:22px; color:var(--text-primary); }
.bs-subtitle { font-size:14px; font-weight:400; line-height:20px; color:var(--text-secondary); }
.bs-actions { display:flex; flex-direction:column; gap:var(--base-s); padding:var(--base-l) var(--base-l) var(--base-3xl); flex-shrink:0; align-items:center; }

/* ── BankCardCell ── */
.bank-card-cell { display:flex; align-items:center; gap:var(--base-m); background:var(--bg-island); border-radius:var(--island); padding:var(--base-l); cursor:pointer; width:100%; }
.bank-logo { width:48px; height:36px; border-radius:var(--garden); display:flex; align-items:center; justify-content:center; flex-shrink:0; overflow:hidden; font-size:10px; font-weight:700; color:#fff; letter-spacing:0.02em; }
.bank-logo.blue  { background:linear-gradient(135deg, #0077FF, #0047CC); }
.bank-logo.green { background:linear-gradient(135deg, #1DB954, #0a8a3a); }
.bank-logo.orange{ background:linear-gradient(135deg, #FF8800, #E65C00); }
.bank-info { flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; }
.bank-title { font-size:17px; font-weight:500; line-height:22px; color:var(--text-primary); }
.bank-subtitle { font-size:14px; font-weight:400; line-height:18px; color:var(--text-secondary); }
.bank-chevron { font-size:20px; color:var(--text-secondary); flex-shrink:0; }

/* ── FAQ ── */
.faq-section { background:var(--bg-island); border-radius:var(--island); padding:var(--base-l); width:100%; }
.faq-toggle { display:flex; align-items:center; gap:var(--base-m); cursor:pointer; user-select:none; -webkit-tap-highlight-color:transparent; }
.faq-toggle-title { font-size:17px; font-weight:600; line-height:22px; color:var(--text-primary); flex:1; }
.faq-toggle-icon { font-size:20px; color:var(--text-secondary); flex-shrink:0; transition:transform 0.25s; }
.faq-section.collapsed .faq-toggle-icon { transform:rotate(180deg); }
.faq-body { display:flex; flex-direction:column; padding-top:var(--base-l); overflow:hidden; max-height:2000px; transition:max-height 0.3s ease, padding-top 0.3s ease; }
.faq-section.collapsed .faq-body { max-height:0; padding-top:0; }
.faq-item { display:flex; flex-direction:column; gap:var(--base-s); padding:var(--base-l) 0; }
.faq-item:first-child { padding-top:0; }
.faq-item:last-child  { padding-bottom:0; }
.faq-question { font-size:14px; font-weight:600; line-height:18px; color:var(--text-primary); }
.faq-answer   { font-size:14px; font-weight:400; line-height:18px; color:var(--text-secondary); }

/* ── Info footer ── */
.info-footer { font-size:12px; font-weight:400; line-height:16px; color:var(--text-secondary); text-align:center; letter-spacing:0.01em; }
.info-footer a { color:var(--text-accent); text-decoration:none; }

/* ── Promo screen (2a) ── */
/* Footer (terms + "Начать бесплатно") stays pinned to the bottom like other
   screens — it must never scroll out of view. The scroll-content reserves room
   so the differentiator card clears the taller two-row footer. */
#screen-promo .scroll-content { padding-bottom:200px; }
#screen-promo .sticky-footer { padding-top:var(--base-m); }

.promo-hero {
  background:linear-gradient(160deg,#0047CC 0%,#0077FF 100%);
  border-radius:var(--island);
  padding:40px var(--base-xl) 32px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--base-m);
}
.promo-hero-logo {
  width:80px; height:80px;
  border-radius:var(--island);
  background:rgba(255,255,255,0.15);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:4px;
}
.promo-hero-title { font-size:28px; font-weight:700; line-height:34px; color:#fff; text-align:center; }
.promo-hero-price { font-size:20px; font-weight:600; line-height:26px; color:#fff; text-align:center; }
.promo-hero-discount { display:inline-block; background:rgba(255,255,255,0.2); backdrop-filter:blur(4px); color:#fff; font-size:13px; font-weight:600; line-height:18px; padding:4px 12px; border-radius:20px; letter-spacing:0.02em; }
.promo-hero-sub { font-size:13px; font-weight:400; line-height:18px; color:rgba(255,255,255,0.75); text-align:center; letter-spacing:0.01em; }
.promo-tags { display:flex; gap:var(--base-s); flex-wrap:wrap; justify-content:center; margin-top:var(--base-s); }
.promo-tag { background:rgba(255,255,255,0.2); border-radius:var(--rounding); padding:4px 12px; font-size:12px; font-weight:500; color:var(--text-white); letter-spacing:0.01em; }

.promo-feature { display:flex; align-items:center; gap:var(--base-m); padding:var(--base-2xs) 0; }
.promo-feature-icon { width:40px; height:40px; border-radius:var(--garden); background:rgba(0,119,255,0.1); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.promo-feature-icon i { font-size:20px; color:var(--text-accent); }
.promo-feature-text { display:flex; flex-direction:column; gap:2px; flex:1; min-width:0; }
.promo-feature-title { font-size:15px; font-weight:600; line-height:20px; color:var(--text-primary); }
.promo-feature-sub { font-size:13px; font-weight:400; line-height:18px; color:var(--text-secondary); letter-spacing:0.01em; }

/* ── Terms modal ── */
.terms-modal-overlay { position:fixed; inset:0; z-index:650; display:none; align-items:flex-end; justify-content:center; background:rgba(0,0,0,0.45); padding:0; }
.terms-modal-overlay.show { display:flex; }
.terms-modal { width:100%; max-width:480px; max-height:88vh; background:var(--bg-island); border-radius:24px 24px 0 0; display:flex; flex-direction:column; overflow:hidden; box-shadow:0 -16px 40px rgba(0,0,0,0.18); }
.terms-modal-header { flex-shrink:0; padding:24px 20px 12px; display:flex; align-items:center; justify-content:center; }
.terms-modal-title { font-size:20px; font-weight:700; line-height:26px; color:var(--text-primary); text-align:center; }
.terms-modal-body { flex:1; overflow:auto; padding:8px 20px 20px; font-size:14px; font-weight:400; line-height:20px; color:var(--text-primary); white-space:pre-wrap; -webkit-user-select:text; user-select:text; }
.terms-modal-actions { flex-shrink:0; padding:12px 20px calc(20px + env(safe-area-inset-bottom)); background:var(--bg-island); border-top:1px solid var(--bg-tertiary); }

/* ── Restricted overlay ── */
.restricted-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.5); z-index:500; display:none; align-items:center; justify-content:center; padding:24px; }
.restricted-overlay.show { display:flex; }
.restricted-modal { background:var(--bg-island); border-radius:var(--island); padding:var(--base-xxl) var(--base-xl); text-align:center; max-width:340px; width:100%; display:flex; flex-direction:column; align-items:center; gap:var(--base-m); }
.restricted-icon { width:48px; height:48px; border-radius:50%; background:rgba(255,68,0,0.12); color:var(--bg-error); display:flex; align-items:center; justify-content:center; font-size:24px; }
.restricted-title { font-size:17px; font-weight:600; line-height:22px; color:var(--text-primary); }
.restricted-text { font-size:14px; font-weight:400; line-height:20px; color:var(--text-secondary); margin-bottom:var(--base-s); }

/* ── Test login ── */
.test-login { position:fixed; inset:0; background:var(--bg-ocean); z-index:400; display:none; align-items:center; justify-content:center; padding:24px; }
.test-login.show { display:flex; }
.test-login-card { background:var(--bg-island); border-radius:var(--island); padding:var(--base-xxl) var(--base-xl); text-align:center; max-width:380px; width:100%; }
.test-badge { display:inline-block; background:var(--bg-attention); color:#fff; font-size:11px; font-weight:700; letter-spacing:1px; padding:4px 12px; border-radius:var(--rounding); margin-bottom:var(--base-l); }
.test-login-title { font-size:22px; font-weight:600; margin-bottom:var(--base-xs); }
.test-login-sub { font-size:14px; color:var(--text-secondary); margin-bottom:var(--base-xl); line-height:1.4; }
.test-input-group { display:flex; align-items:center; background:var(--bg-ocean); border:1.5px solid var(--bg-tertiary); border-radius:var(--pebble); overflow:hidden; margin-bottom:var(--base-m); }
.test-input-prefix { padding:12px 0 12px 16px; font-size:16px; font-weight:500; color:var(--text-secondary); white-space:nowrap; }
.test-input { flex:1; border:none; background:transparent; outline:none; font-family:inherit; font-size:16px; padding:12px 16px 12px 8px; color:var(--text-primary); }
.test-select { width:100%; padding:12px 16px; font-family:inherit; font-size:15px; border:1.5px solid var(--bg-tertiary); border-radius:var(--pebble); background:var(--bg-ocean); color:var(--text-primary); margin-bottom:var(--base-l); appearance:auto; cursor:pointer; }
.test-hint { font-size:12px; color:var(--text-disabled); margin-top:var(--base-m); }

/* ── Discount styling ── */
.discount-tag { display:inline-flex; align-items:center; padding:2px 8px; border-radius:var(--rounding); font-size:11px; font-weight:600; background:rgba(255,68,0,0.1); color:var(--bg-error); margin-left:4px; }

/* ── Safe area ── */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
  .sticky-footer { padding-bottom:calc(48px + env(safe-area-inset-bottom)); }
}

/* ── Selection suppression ── */
* { -webkit-user-select:none; user-select:none; }
input, textarea, select { -webkit-user-select:auto; user-select:auto; }