/* ─── FONTS ─────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@10..48,500;10..48,600;10..48,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');

/* ─── TOKENS ────────────────────────────────────────────────── */
:root {
  --ink:     #f1ece2;
  --ink-2:   #b8b1a3;
  --ink-3:   #6f6a5e;
  --bg:      #1c1c1f;
  --bg-2:    #232327;
  --bg-3:    #2a2a2f;
  --accent:  #ff8a3d;
  --danger:  #ff6b6b;
  --success: #8be08b;

  --warm-1: #ff8a3d;
  --warm-2: #ffb347;
  --warm-3: #ff5e3a;
  --warm-4: #ff6b1a;
  --warm-5: #ffd0a0;

  --font-base:  'Inter', system-ui, sans-serif;
  --font-head:  'Bricolage Grotesque', sans-serif;
  --font-mono:  'JetBrains Mono', monospace;

  --radius-sm:  7px;
  --radius-md:  10px;
  --radius-lg:  14px;
  --radius-xl:  20px;
}

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

html, body {
  width: 100%; height: 100%;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-base);
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}

button { font-family: var(--font-base); cursor: pointer; border: none; background: none; }
input  { font-family: var(--font-base); }
a      { color: var(--accent); text-decoration: none; }
svg    { display: inline-block; flex-shrink: 0; }

/* ─── APP SHELL ─────────────────────────────────────────────── */
#app {
  width: 100%;
  max-width: 480px;
  height: 100dvh;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  background: var(--bg);
}

/* ─── TELEGRAM CONTEXT ───────────────────────────────────────── */
/* Safe-area top padding — applied to screens (absolute children ignore #app padding) */
.in-tg .screen {
  padding-top: var(--tg-safe-top, 0px);
}
/* Hide our back arrows — Telegram provides its own */
.in-tg .btn-back { display: none !important; }
/* Compensate header left padding when back button is gone */
.in-tg .screen-header { padding-left: 16px; }

/* ─── SCREENS ───────────────────────────────────────────────── */
.screen {
  display: none;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--bg);
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  overflow: hidden;
}

.screen--active {
  display: flex;
  animation: screen-in .22s cubic-bezier(.2,.8,.2,1) both;
}

@keyframes screen-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Scrollable content area */
.screen__scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 16px 16px 16px;
}
.screen__scroll::-webkit-scrollbar { display: none; }

/* ─── LAYOUT UTILS ───────────────────────────────────────────── */
.row   { display: flex; align-items: center; gap: 8px; }
.col   { display: flex; flex-direction: column; gap: 8px; }
.flex1 { flex: 1; min-width: 0; }
.center { display: flex; align-items: center; justify-content: center; }
.gap4  { gap: 4px; }
.gap6  { gap: 6px; }
.gap10 { gap: 10px; }
.gap12 { gap: 12px; }
.gap14 { gap: 14px; }
.gap16 { gap: 16px; }
.gap18 { gap: 18px; }
.gap20 { gap: 20px; }
.mt4   { margin-top: 4px; }
.mt6   { margin-top: 6px; }
.mt8   { margin-top: 8px; }
.mt10  { margin-top: 10px; }
.mt12  { margin-top: 12px; }
.mt14  { margin-top: 14px; }

/* ─── TYPOGRAPHY ─────────────────────────────────────────────── */
.t-head {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: 'opsz' 32;
}

.t-head-md {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: var(--ink);
  font-variation-settings: 'opsz' 24;
}

.t-head-sm {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  font-variation-settings: 'opsz' 18;
}

.t-label {
  font-size: 10.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: .06em;
  font-weight: 500;
}

.t-mono {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  letter-spacing: -0.01em;
}

.t-body  { font-size: 13px; color: var(--ink-2); line-height: 1.5; }
.t-small { font-size: 11.5px; color: var(--ink-3); line-height: 1.4; }
.t-ink   { color: var(--ink); }
.t-accent { color: var(--accent); }
.t-success { color: var(--success); }
.t-danger  { color: var(--danger); }

/* ─── DIVIDER ────────────────────────────────────────────────── */
.divider {
  height: 1px;
  border-top: 1.2px dashed var(--ink-3);
  opacity: .45;
  margin: 10px 0;
}
.divider--accent {
  border-top-color: var(--accent);
  opacity: .25;
}

/* ─── BOXES ──────────────────────────────────────────────────── */
.box {
  border: 1.5px dashed var(--ink-3);
  border-radius: var(--radius-md);
  padding: 12px;
  background: transparent;
  position: relative;
}
.box--solid  { border-style: solid; border-color: rgba(184,177,163,.18); }
.box--accent { border-color: var(--accent); }
.box--filled { background: var(--bg-2); border-style: solid; border-color: transparent; }
.box--warn   { background: rgba(255,107,107,.06); border-style: solid; border-color: rgba(255,107,107,.3); }
.box--success { background: rgba(139,224,139,.06); border-style: solid; border-color: rgba(139,224,139,.3); }

/* ─── CHIP / BADGE ───────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 99px;
  border: 1.2px dashed var(--ink-3);
  font-size: 11px; color: var(--ink-2);
  font-weight: 500;
  white-space: nowrap;
}
.chip--accent  { border-color: var(--accent);  color: var(--accent); }
.chip--ok      { border-color: var(--success); color: var(--success); border-style: solid; }
.chip--danger  { border-color: var(--danger);  color: var(--danger); }

/* ─── BUTTONS ────────────────────────────────────────────────── */
.btn-primary {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 50px;
  background: var(--accent); color: #1c1c1f;
  border-radius: var(--radius-lg);
  font-size: 15px; font-weight: 700;
  letter-spacing: -0.01em;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn-primary:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
}

.btn-ghost {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  height: 44px; padding: 0 16px;
  border: 1.5px dashed var(--accent);
  color: var(--accent);
  border-radius: var(--radius-md);
  font-size: 13px; font-weight: 600;
  -webkit-tap-highlight-color: transparent;
}

.btn-icon {
  width: 34px; height: 34px; padding: 0;
  background: transparent;
  border: 1.2px dashed var(--ink-3);
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: color .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.btn-icon:active, .btn-icon--active {
  color: var(--accent);
  border-color: var(--accent);
}

.btn-mini {
  height: 32px; padding: 0 14px;
  border-radius: var(--radius-sm);
  background: var(--accent); color: #1c1c1f;
  font-size: 12px; font-weight: 600;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.btn-mini:active { opacity: .85; }

.btn-mini--ghost {
  background: transparent;
  color: var(--accent);
  border: 1.4px dashed var(--accent);
}

.btn-mail {
  display: flex; align-items: center; gap: 5px;
  height: 34px; padding: 0 12px;
  background: transparent;
  border: 1.2px dashed var(--ink-3);
  color: var(--ink-2);
  border-radius: var(--radius-sm);
  font-size: 12px; font-weight: 500;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}
.btn-mail:active { color: var(--accent); border-color: var(--accent); }

/* Main action button wrapper (flex child at bottom of screen) */
.btn-main-wrap {
  flex-shrink: 0;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
}

/* Floating main button (bottom fixed) */
.btn-main {
  display: flex; align-items: center; justify-content: center;
  width: 100%;
  height: 50px;
  background: var(--accent); color: #1c1c1f;
  border-radius: var(--radius-lg);
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn-main:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 rgba(0,0,0,.2);
}

/* ─── INPUT ──────────────────────────────────────────────────── */
.input {
  width: 100%; background: transparent; border: none; outline: none;
  color: var(--ink);
  font-family: var(--font-mono);
  /* 16px prevents iOS zoom on focus */
  font-size: 16px; letter-spacing: .01em;
  padding: 10px 0;
  caret-color: var(--accent);
}
.input::placeholder { color: var(--ink-3); }
.input--text {
  font-family: var(--font-base);
  font-size: 16px;
}

/* ─── HEADER ─────────────────────────────────────────────────── */
.screen-header {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px 0;
  flex-shrink: 0;
}

.btn-back {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink-2);
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
  margin-left: -6px;
}
.btn-back:active { color: var(--accent); }

/* ─── BOTTOM TABS ────────────────────────────────────────────── */
.tabs {
  flex-shrink: 0;
  width: 100%;
  background: var(--bg);
  padding: 8px 16px calc(8px + env(safe-area-inset-bottom));
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid rgba(184,177,163,.12);
  z-index: 50;
}

.tab {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 6px 0;
  font-size: 10.5px; font-weight: 500;
  color: var(--ink-3);
  position: relative;
  -webkit-tap-highlight-color: transparent;
  transition: color .15s;
}
.tab svg { transition: color .15s; }
.tab--active { color: var(--accent); }
.tab--active svg { color: var(--accent); }
.tab--active::before {
  content: '';
  position: absolute; top: -9px; left: 50%;
  width: 20px; height: 2px;
  background: var(--accent);
  border-radius: 99px;
  transform: translateX(-50%);
}

/* ─── RING (subscription timer) ─────────────────────────────── */
.ring-wrap {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ring-svg-el {
  position: absolute; inset: 0;
  overflow: visible;
}

.ring-text {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  z-index: 1;
  pointer-events: none;
}
.ring-text__num {
  font-family: var(--font-head);
  font-size: 32px; font-weight: 700;
  line-height: 1; letter-spacing: -0.03em;
  color: var(--ink);
  font-variation-settings: 'opsz' 48;
}
.ring-text__label {
  font-size: 11px; color: var(--ink-3);
  margin-top: 3px;
}

/* ─── PROGRESS BAR (liquid wave) ────────────────────────────── */
.pbc {
  height: 7px; border-radius: 99px;
  background: var(--bg-3);
  overflow: hidden; position: relative;
}
.pbc__fill {
  display: block; height: 100%;
  background: var(--accent);
  border-radius: 99px;
  position: relative;
  transition: width .8s cubic-bezier(.2,.7,.3,1);
}
.pbc__fill::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(circle at 8px 50%, rgba(255,255,255,.4) 0 4px, transparent 5px),
    radial-gradient(circle at 24px 50%, rgba(255,255,255,.3) 0 3px, transparent 4px),
    radial-gradient(circle at 40px 50%, rgba(255,255,255,.35) 0 5px, transparent 6px);
  background-size: 48px 100%;
  background-repeat: repeat-x;
  animation: wave 1.6s linear infinite;
  opacity: .9;
  mix-blend-mode: overlay;
}
@keyframes wave {
  from { background-position: 0 0; }
  to   { background-position: 48px 0; }
}

/* ─── TARIFF CARD ────────────────────────────────────────────── */
.plan-card {
  border-radius: var(--radius-md);
  padding: 14px 16px;
  cursor: pointer;
  position: relative;
  border: 1.5px solid rgba(184,177,163,.18);
  transition: border-color .15s, background .15s;
  -webkit-tap-highlight-color: transparent;
}
.plan-card--selected {
  border-style: dashed;
  border-color: var(--accent);
  background: rgba(255,138,61,.06);
}
.plan-badge {
  position: absolute; top: -10px; right: 14px;
  background: var(--bg);
  padding: 2px 8px;
  border: 1.2px dashed var(--accent);
  border-radius: 99px;
  font-size: 10px; color: var(--accent); font-weight: 500;
}
.plan-card:active { opacity: .85; }

/* ─── SETTING ROW ────────────────────────────────────────────── */
.setting-row {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 0;
  border-top: 1px solid rgba(184,177,163,.1);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .1s;
}
.setting-row:active { opacity: .7; }
.setting-row:first-child { border-top: none; }

/* ─── HISTORY ROW ────────────────────────────────────────────── */
.hist-row {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 0;
  border-top: 1px solid rgba(184,177,163,.1);
}
.hist-row:first-child { border-top: none; }

/* ─── AVATAR ─────────────────────────────────────────────────── */
.avatar {
  width: 44px; height: 44px;
  border-radius: 13px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 14px; font-weight: 600;
  background: var(--bg-3);
  color: var(--ink-2);
  border: 1.5px solid rgba(184,177,163,.2);
  flex-shrink: 0;
}

/* ─── MINI ACTIONS (3-grid on home) ─────────────────────────── */
.mini-actions {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.mini-action {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 6px;
  border: 1.5px solid rgba(184,177,163,.18);
  border-radius: var(--radius-md);
  color: var(--ink-2);
  -webkit-tap-highlight-color: transparent;
  transition: border-color .15s;
}
.mini-action--accent { border-color: var(--accent); color: var(--accent); }
.mini-action span { font-size: 11.5px; font-weight: 500; color: var(--ink); }
.mini-action--accent span { color: var(--accent); }
.mini-action:active { opacity: .75; }

/* ─── CREDENTIAL CARD ────────────────────────────────────────── */
.cred-row {
  display: flex; align-items: center; gap: 8px;
}
.cred-value {
  flex: 1; min-width: 0;
  font-family: var(--font-mono);
  font-size: 15px; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ─── VPN ROW ────────────────────────────────────────────────── */
.vpn-row {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; margin-top: 10px;
  background: rgba(255,138,61,.06);
  border-radius: var(--radius-md);
  border: 1px dashed rgba(255,138,61,.3);
}

/* ─── OTP DIGITS ─────────────────────────────────────────────── */
.otp-grid {
  display: grid; grid-template-columns: repeat(6, 1fr);
  gap: 8px;
}
.otp-digit {
  height: 52px; border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 24px; font-weight: 600;
  border: 1.5px dashed var(--ink-3);
  color: var(--ink-3);
  background: transparent;
  transition: all .15s;
}
.otp-digit--filled {
  border-style: solid;
  border-color: var(--accent);
  background: rgba(255,138,61,.06);
  color: var(--accent);
}
.otp-digit--error {
  border-color: var(--danger);
  background: rgba(255,107,107,.06);
  color: var(--danger);
  animation: shake .35s cubic-bezier(.36,.07,.19,.97) both;
}
@keyframes shake {
  10%, 90% { transform: translateX(-2px); }
  20%, 80% { transform: translateX(3px); }
  30%, 50%, 70% { transform: translateX(-4px); }
  40%, 60% { transform: translateX(4px); }
}

/* ─── WIZARD ─────────────────────────────────────────────────── */
.wiz-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.wiz-body::-webkit-scrollbar { display: none; }

.wiz-foot {
  flex-shrink: 0;
  width: 100%;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 72%, transparent);
  z-index: 60;
  display: flex; gap: 8px;
}

.btn-wiz-next {
  flex: 1; height: 50px; border-radius: var(--radius-lg);
  background: var(--accent); color: #1c1c1f;
  font-size: 15px; font-weight: 700; letter-spacing: -0.01em;
  box-shadow: 0 4px 0 rgba(0,0,0,.2);
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
}
.btn-wiz-next:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0,0,0,.2); }

.btn-wiz-back {
  width: 50px; height: 50px; flex-shrink: 0;
  border-radius: var(--radius-lg);
  border: 1.5px dashed var(--ink-3);
  color: var(--ink-2);
  display: flex; align-items: center; justify-content: center;
  transition: color .12s, border-color .12s;
  -webkit-tap-highlight-color: transparent;
}
.btn-wiz-back:active { color: var(--accent); border-color: var(--accent); }

/* Finale glass buttons */
.wiz-foot--finale {
  background: transparent;
  padding-bottom: max(24px, env(safe-area-inset-bottom));
}
.btn-glass {
  flex: 1; height: 52px; border-radius: var(--radius-lg);
  background: rgba(28,28,31,.5);
  backdrop-filter: blur(24px) saturate(1.3);
  border: 1px solid rgba(255,255,255,.15);
  color: #fff;
  font-size: 15px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 24px rgba(0,0,0,.3);
  -webkit-tap-highlight-color: transparent;
}
.btn-glass--primary {
  background: linear-gradient(135deg, #ff8a3d 0%, #ff5e3a 100%);
  backdrop-filter: none;
  border-color: rgba(255,255,255,.3);
  box-shadow: 0 10px 30px rgba(255,138,61,.45), 0 0 0 1px rgba(255,255,255,.15) inset;
}
.btn-glass--sq { flex: 0 0 52px; }
.btn-glass:active { opacity: .88; }

/* ─── FINALE (step 6) ────────────────────────────────────────── */
.finale {
  flex: 1;
  position: relative;
  overflow: hidden; background: var(--bg);
  display: flex; flex-direction: column;
}
.finale__paint {
  position: absolute; inset: -25%;
  filter: blur(60px) saturate(1.4);
  opacity: .88; z-index: 1;
}
.blob {
  position: absolute; width: 55%; height: 55%;
  border-radius: 50%; mix-blend-mode: screen;
}
.b1 { top:2%;  left:5%;  background:var(--warm-1); animation:drift 14s ease-in-out infinite alternate; }
.b2 { top:12%; right:2%; background:var(--warm-3); animation:drift 18s ease-in-out infinite alternate -4s; }
.b3 { bottom:5%;  left:8%;  background:var(--warm-2); animation:drift 16s ease-in-out infinite alternate -8s; }
.b4 { bottom:2%;  right:5%; background:var(--warm-4); animation:drift 20s ease-in-out infinite alternate -12s; }
.b5 { top:38%; left:30%; background:var(--warm-5); animation:drift 22s ease-in-out infinite alternate -6s; opacity:.55; }
@keyframes drift {
  0%   { transform: translate(-8%,-8%)  scale(.88); }
  50%  { transform: translate(14%,-14%) scale(1.22); }
  100% { transform: translate(-12%,16%) scale(.98); }
}
.finale__sweep {
  position: absolute; inset: 0; z-index: 2;
  overflow: hidden; pointer-events: none;
}
.finale__sweep::before {
  content: '';
  position: absolute; top: -30%; left: -50%;
  width: 200%; height: 160%;
  background: linear-gradient(75deg,
    transparent 35%, rgba(255,209,160,0) 45%,
    rgba(255,209,160,.38) 50%,
    rgba(255,209,160,0) 55%, transparent 65%);
  animation: sweep 6s ease-in-out infinite;
  filter: blur(20px);
}
@keyframes sweep {
  0%,100% { transform: translateX(-30%) rotate(-3deg); opacity: 0; }
  30%      { opacity: 1; }
  70%      { opacity: .8; }
  100%     { transform: translateX(55%) rotate(-3deg); opacity: 0; }
}
.finale__sparkles { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.finale__sparkle {
  position: absolute; width: 3px; height: 3px; border-radius: 50%;
  background: var(--warm-5);
  box-shadow: 0 0 6px rgba(255,209,160,.9);
  animation: sparkle 3s ease-in-out infinite;
  opacity: 0;
}
@keyframes sparkle {
  0%,100% { opacity: 0; transform: scale(.5); }
  50%     { opacity: 1; transform: scale(1.5); }
}
.finale__vignette {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 160px; z-index: 5; pointer-events: none;
  background: linear-gradient(to top, rgba(15,15,18,.85) 0%, transparent 100%);
}
.finale__content {
  position: absolute; inset: 0; z-index: 6;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  padding: 0 24px; text-align: center;
  pointer-events: none;
}
.finale__title {
  font-family: var(--font-head);
  font-size: 52px; font-weight: 700;
  line-height: 1; letter-spacing: -0.04em;
  color: #fff; margin: 0;
  font-variation-settings: 'opsz' 48;
  text-shadow: 0 2px 28px rgba(0,0,0,.5), 0 1px 2px rgba(0,0,0,.3);
  animation: rise .8s cubic-bezier(.2,.8,.2,1) both;
}
.finale__sub {
  font-size: 16px; font-weight: 500;
  color: rgba(255,255,255,.88);
  margin-top: 14px; line-height: 1.4;
  text-shadow: 0 1px 10px rgba(0,0,0,.45);
  animation: rise .8s cubic-bezier(.2,.8,.2,1) .15s both;
}
@keyframes rise {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── PROMO ROW ──────────────────────────────────────────────── */
.promo-hint {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* ─── EMPTY STATE (no subscription) ─────────────────────────── */
.empty-hero {
  background: rgba(255,138,61,.06);
  border: 1.5px dashed rgba(255,138,61,.25);
  border-radius: var(--radius-xl);
  padding: 28px 20px;
  text-align: center;
  margin-bottom: 4px;
}

/* ─── ADOBE APPS ROW ─────────────────────────────────────────── */
.app-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.app-chip {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  border-radius: 7px;
  border: 1.2px dashed;
  font-family: var(--font-mono);
  font-size: 10px; font-weight: 500;
}
.app-chip--ps { color: #5ab0ff; border-color: #5ab0ff; }
.app-chip--ai { color: #ffb05a; border-color: #ffb05a; }
.app-chip--lr { color: #7ddc8b; border-color: #7ddc8b; }
.app-chip--id { color: #ff6b6b; border-color: #ff6b6b; }
.app-chip--pr { color: #b08bff; border-color: #b08bff; }
.app-chip--ae { color: #a4b4ff; border-color: #a4b4ff; }
.app-chip--xd { color: #ff8acb; border-color: #ff8acb; }

/* ─── PROFILE AVATAR ─────────────────────────────────────────── */
.profile-avatar {
  width: 48px; height: 48px;
  border-radius: 14px;
  background: var(--bg-3);
  border: 1.5px solid rgba(184,177,163,.2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head);
  font-size: 16px; font-weight: 600;
  color: var(--ink-2);
  flex-shrink: 0;
}

/* ─── STEP CARD (instruction) ────────────────────────────────── */
.step-card {
  background: var(--bg-2);
  border-radius: var(--radius-lg);
  padding: 16px;
  border: 1px solid rgba(184,177,163,.1);
}

/* ─── BUSINESS PROFILE CHOICE ────────────────────────────────── */
.profile-choice {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 10px; margin-top: 16px;
}
.profile-option {
  border-radius: var(--radius-md);
  padding: 12px;
  border: 1.5px solid rgba(184,177,163,.18);
}
.profile-option--bad   { opacity: .5; }
.profile-option--good  { border-color: var(--accent); background: rgba(255,138,61,.06); position: relative; }
.profile-option__check {
  position: absolute; top: 8px; right: 8px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--accent);
  display: flex; align-items: center; justify-content: center;
}
.profile-letter {
  width: 26px; height: 26px; border-radius: 6px;
  border: 1.2px solid; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600;
}

/* ─── FOOTER LINKS ───────────────────────────────────────────── */
.footer-links {
  display: flex; align-items: center; justify-content: center;
  gap: 12px;
  font-family: var(--font-mono); font-size: 10.5px;
  color: var(--ink-3);
  padding: 8px 0;
}
.footer-links span { opacity: .4; }

/* ─── SAFE AREA ──────────────────────────────────────────────── */
.safe-bottom {
  height: calc(16px + env(safe-area-inset-bottom));
}
.safe-bottom--tabs {
  display: none;
}

/* ─── FINALE V2 (ember canvas + glass card) ─────────────────── */
.finale-v2 {
  position: absolute; inset: 0;
  background: #0b0a0d;
  overflow: hidden;
}

.ember-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block;
}

.finale-v2-content {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  padding: 24px; pointer-events: none;
}

.finale-v2-card {
  width: 100%;
  border-radius: 20px; padding: 28px 32px;
  text-align: center;
  background: rgba(255,138,61,.07);
  border: 1px solid rgba(255,138,61,.28);
  backdrop-filter: blur(20px) saturate(1.5);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  box-shadow: 0 0 60px rgba(255,138,61,.18),
              0 0 0 1px rgba(255,255,255,.06) inset;
}

.finale-v2-title {
  font-family: var(--font-head);
  font-size: 26px; font-weight: 700;
  letter-spacing: -.02em; line-height: 1.1;
  color: #fff;
  font-variation-settings: 'opsz' 48;
  text-shadow: 0 0 32px rgba(255,138,61,.75), 0 2px 10px rgba(0,0,0,.35);
  animation: rise .8s cubic-bezier(.2,.8,.2,1) both;
}

/* Finale footer buttons */
.finale-btn {
  flex: 1; height: 52px;
  border-radius: var(--radius-lg);
  background: rgba(28,28,31,.55);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,.15);
  color: rgba(255,255,255,.75);
  font-size: 15px; font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.finale-btn:active { opacity: .82; }

.finale-btn--primary {
  background: var(--accent);
  backdrop-filter: none;
  border-color: rgba(255,255,255,.25);
  color: #1c1c1f;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(255,138,61,.45);
}

/* ─── TRANSITIONS ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}