/* Brand colors. Telegram only chooses dark or light — not these values. */

:root {
  color-scheme: light;
  --accent:     #e36b4d;
  --accent-txt: #ffffff;
  --bg:         #f6f3f1;
  --card:       #ffffff;
  --txt:        #1c1917;
  --hint:       #7a736e;
  --sub:        #7a736e;
  --link:       #e36b4d;
  --sep:        rgba(28, 25, 23, 0.08);
  --danger:     #e5484d;
  --header-bg:  #f6f3f1;
  --bottom-bg:  #ffffff;
  --hero:       linear-gradient(105deg, #ffffff 0%, #ffe4d8 72%, #ffcbb8 100%);
  --refer-bg:   #fff8ec;
  --refer-ink:  #2c2114;
  --refer-gold: #9a7040;
  --refer-line: rgba(154, 112, 64, 0.4);
  --refer-mark: #f4e4c4;
  --radius-sm:  12px;
  --radius-md:  18px;
  --radius-lg:  24px;
  --radius-xl:  28px;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-scheme="light"]) {
    color-scheme: dark;
    --accent:     #ff8b6a;
    --accent-txt: #ffffff;
    --bg:         #17181c;
    --card:       #2a2b31;
    --txt:        #ffffff;
    --hint:       #9b9ba1;
    --sub:        #9b9ba1;
    --link:       #ff8b6a;
    --sep:        rgba(255, 255, 255, 0.08);
    --danger:     #ff6b6b;
    --header-bg:  #17181c;
    --bottom-bg:  #17181c;
    --hero:       linear-gradient(105deg, #2a2b31 0%, #3a2a28 70%, #5a3a32 100%);
    --refer-bg:   #2c2822;
    --refer-ink:  #fff6e8;
    --refer-gold: #e4c98a;
    --refer-line: rgba(228, 201, 138, 0.42);
    --refer-mark: rgba(228, 201, 138, 0.16);
  }
}

:root[data-scheme="light"] {
  color-scheme: light;
  --accent:     #e36b4d;
  --accent-txt: #ffffff;
  --bg:         #f6f3f1;
  --card:       #ffffff;
  --txt:        #1c1917;
  --hint:       #7a736e;
  --sub:        #7a736e;
  --link:       #e36b4d;
  --sep:        rgba(28, 25, 23, 0.08);
  --danger:     #e5484d;
  --header-bg:  #f6f3f1;
  --bottom-bg:  #ffffff;
  --hero:       linear-gradient(105deg, #ffffff 0%, #ffe4d8 72%, #ffcbb8 100%);
  --refer-bg:   #fff8ec;
  --refer-ink:  #2c2114;
  --refer-gold: #9a7040;
  --refer-line: rgba(154, 112, 64, 0.4);
  --refer-mark: #f4e4c4;
}

:root[data-scheme="dark"] {
  color-scheme: dark;
  --accent:     #ff8b6a;
  --accent-txt: #ffffff;
  --bg:         #17181c;
  --card:       #2a2b31;
  --txt:        #ffffff;
  --hint:       #9b9ba1;
  --sub:        #9b9ba1;
  --link:       #ff8b6a;
  --sep:        rgba(255, 255, 255, 0.08);
  --danger:     #ff6b6b;
  --header-bg:  #17181c;
  --bottom-bg:  #17181c;
  --hero:       linear-gradient(105deg, #2a2b31 0%, #3a2a28 70%, #5a3a32 100%);
  --refer-bg:   #2c2822;
  --refer-ink:  #fff6e8;
  --refer-gold: #e4c98a;
  --refer-line: rgba(228, 201, 138, 0.42);
  --refer-mark: rgba(228, 201, 138, 0.16);
}

/* ─── Reset ─────────────────────────────────────────────────────────────── */

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

html, body { margin: 0; min-height: 100%; }

body {
  background: var(--bg);
  color: var(--txt);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", sans-serif;
  font-feature-settings: "kern" 1, "liga" 1;
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }

[hidden] {
  display: none !important;
}

/* ─── Shell ──────────────────────────────────────────────────────────────── */

.shell {
  min-height: 100dvh;
  max-width: 32rem;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  background: var(--bg);
}

/* ─── Topbar ─────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  min-height: 3.25rem;
  padding: calc(0.4rem + env(safe-area-inset-top)) 1rem 0.4rem;
  background: var(--header-bg);
  border-bottom: 1px solid var(--sep);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.topbar h1 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.icon-btn {
  width: 2.2rem;
  height: 2.2rem;
  border: 0;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--link);
  transition: opacity .15s;
}
.icon-btn:active { opacity: .55; }
.icon-btn svg { width: 1.3rem; height: 1.3rem; }
.icon-btn[hidden] { display: none; }

/* ─── Brandbar ───────────────────────────────────────────────────────────── */

.brandbar {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0.9rem 1rem 0;
  padding: 0.6rem 0.75rem;
  border-radius: var(--radius-lg);
  background: var(--card);
  box-shadow: 0 1px 0 var(--sep);
}
.brandbar[hidden] { display: none; }

.brand-logo {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 50%;
  overflow: hidden;
  flex: none;
  background: #050505;
}
.brand-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.brand-copy {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.brand-copy strong {
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.brand-copy span {
  color: var(--hint);
  font-size: 0.72rem;
  margin-top: 0.05rem;
}

.lang-chip {
  border: 0;
  border-radius: 999px;
  padding: 0.28rem 0.65rem;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: transparent;
  color: var(--txt);
  box-shadow: inset 0 0 0 1.5px var(--sep);
}

.price-chip {
  border-radius: 999px;
  padding: 0.28rem 0.7rem;
  font-size: 0.78rem;
  font-weight: 700;
  background: var(--accent);
  color: var(--accent-txt);
  letter-spacing: -0.01em;
}

/* ─── Tabs have-tabs overrides ───────────────────────────────────────────── */

body.has-tabs .topbar { display: none; }
body.has-tabs .app { padding-bottom: calc(5.5rem + env(safe-area-inset-bottom)); }

/* ─── Shared screen basics ───────────────────────────────────────────────── */

.app {
  flex: 1;
  padding: 1rem 1rem 1.5rem;
}

.screen[hidden] { display: none; }

h2 {
  margin: 0 0 0.35rem;
  font-size: 1.55rem;
  font-weight: 750;
  letter-spacing: -0.025em;
}

.subtitle {
  color: var(--sub);
  font-size: 0.9rem;
  margin: 0 0 1.1rem;
}

.error {
  border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem;
  margin: 0.7rem 0;
  background: color-mix(in srgb, var(--danger) 10%, var(--card));
  color: var(--danger);
  font-size: 0.88rem;
}

/* ─── Gate screen ────────────────────────────────────────────────────────── */

.gate-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 70dvh;
  text-align: center;
  padding: 0 1.5rem;
}

.gate-logo {
  width: 8.5rem;
  height: 8.5rem;
  border-radius: 50%;
  overflow: hidden;
  margin-bottom: 0;
  background: #050505;
  box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.16),
              0 16px 40px rgba(0, 0, 0, 0.28);
}
.gate-logo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.gate-wrap .subtitle { margin-top: 1.1rem; }

/* ─── Home screen — Hero card ────────────────────────────────────────────── */

.hero-card {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-xl);
  padding: 1.25rem 1.1rem 1.1rem;
  margin-bottom: 0.85rem;
  background: var(--hero);
}

.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 120% 100% at 110% -10%,
    color-mix(in srgb, var(--accent) 35%, transparent),
    transparent 65%
  );
  pointer-events: none;
}

.hero-eyebrow {
  margin: 0 0 0.2rem;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 80%, var(--txt));
}

.hero-name {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.15;
  color: var(--txt);
}

.hero-avatar {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 3.1rem;
  height: 3.1rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.03em;
  background: color-mix(in srgb, var(--accent) 18%, var(--bg));
  color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent);
  overflow: hidden;
}

.hero-avatar.has-photo,
.member-avatar.has-photo {
  background: transparent;
}

.hero-avatar img,
.member-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}

/* ─── Home screen — Plan hero card ──────────────────────────────────────── */

.plan-hero-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 1.3rem 1.1rem 1.1rem;
  margin-bottom: 0.85rem;
  position: relative;
  overflow: hidden;
}

.plan-hero-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    color-mix(in srgb, var(--accent) 70%, transparent),
    var(--accent),
    color-mix(in srgb, var(--accent) 50%, transparent)
  );
}

.plan-hero-label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.65rem 0.22rem 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.plan-hero-label svg { width: 10px; height: 10px; }

.plan-hero-price {
  margin: 0 0 1rem;
  font-size: 2.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--txt);
  line-height: 1;
}
.plan-hero-price small {
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: var(--hint);
  margin-left: 0.25rem;
}

.feat-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.feat-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
}

.feat-icon {
  width: 2rem;
  height: 2rem;
  border-radius: 8px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 1rem;
  background: color-mix(in srgb, var(--accent) 8%, var(--bg));
}

/* ─── Referral banner ────────────────────────────────────────────────────── */

.refer-banner {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  text-align: left;
  border: 1px solid var(--refer-line);
  cursor: pointer;
  border-radius: var(--radius-lg);
  padding: 0.78rem 0.8rem;
  margin: 0 0 0.85rem;
  color: var(--refer-ink);
  background: var(--refer-bg);
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0.7rem;
  box-shadow: none;
}
.refer-mark {
  width: 2.35rem;
  height: 2.35rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  background: var(--refer-mark);
  color: var(--refer-gold);
  font-size: 0.95rem;
  font-weight: 800;
}
.refer-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.08rem;
}
.refer-banner strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
}
.refer-kicker {
  font-size: 0.66rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-weight: 800;
  color: var(--refer-gold);
  opacity: 1;
}
.refer-chevron {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  color: var(--refer-gold);
  opacity: 1;
}
.refer-banner:active { opacity: 0.9; }

.refer-board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.refer-stat {
  background: var(--card);
  border-radius: 16px;
  padding: 0.75rem 0.4rem;
  text-align: center;
}
.refer-stat span {
  display: block;
  color: var(--hint);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.refer-stat strong {
  display: block;
  margin-top: 0.28rem;
  font-size: 0.92rem;
  letter-spacing: -0.02em;
}
.refer-rate,
.refer-note {
  margin: 0 0 0.75rem;
  color: var(--hint);
  font-size: 0.8rem;
  line-height: 1.4;
}
.refer-link-card {
  background: var(--card);
  border-radius: 18px;
  padding: 0.85rem 0.95rem;
  margin-bottom: 0.75rem;
}
.refer-link-card span {
  color: var(--hint);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.refer-link-card p {
  margin: 0.35rem 0 0;
  word-break: break-all;
  font-size: 0.88rem;
  font-weight: 650;
}
.refer-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.25rem;
  margin: 0.35rem 0 0.75rem;
  background: var(--card);
  border-radius: 16px;
}
.refer-tab {
  border: 0;
  border-radius: 12px;
  min-height: 2.45rem;
  background: transparent;
  color: var(--hint);
  font-weight: 700;
  font-size: 0.86rem;
}
.refer-tab.active {
  background: var(--accent);
  color: var(--accent-txt);
}
.refer-tab:active { opacity: 0.9; }

.refer-heading {
  margin: 1.05rem 0 0.55rem;
  font-size: 0.95rem;
}

.stats-wrap {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.stats-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.84rem;
}
.stats-table th {
  text-align: left;
  color: var(--hint);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.75rem 0.5rem;
  border-bottom: 1px solid var(--sep);
}
.stats-table td {
  padding: 0.72rem 0.5rem;
  border-bottom: 1px solid var(--sep);
  vertical-align: middle;
}
.stats-table th.code,
.stats-table td.code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.stats-table tr:last-child td { border-bottom: 0; }
.stats-table td.num {
  font-weight: 700;
  white-space: nowrap;
}
.stats-table .hist-pill { font-size: 0.68rem; }
#refer-withdraw { width: 100%; margin-top: 0.55rem; }
#refer-withdraw.ready {
  background: var(--accent);
  color: var(--accent-txt);
}
#refer-withdraw:disabled { opacity: 0.45; }
#withdraw-form { margin-top: 0.7rem; }
#withdraw-form[hidden] { display: none; }
#withdraw-form .cta-btn { width: 100%; }
#withdraw-method {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--txt);
  font-size: 16px;
  outline: none;
  padding: 0.15rem 0;
}
.withdraw-method {
  margin-top: 0.15rem;
  color: var(--hint);
  font-family: inherit;
  font-size: 0.68rem;
  letter-spacing: 0;
  text-transform: none;
}

/* ─── Support card ───────────────────────────────────────────────────────── */

.support-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 0.85rem 0.9rem;
  margin-bottom: 0.85rem;
}

.support-icon {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  display: grid;
  place-items: center;
  flex: none;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: var(--accent);
}
.support-icon svg { width: 1.2rem; height: 1.2rem; }

.support-card > div {
  flex: 1;
  min-width: 0;
}
.support-card strong { display: block; font-size: 0.9rem; font-weight: 700; }
.support-card p { margin: 0.1rem 0 0; color: var(--hint); font-size: 0.78rem; }

/* ─── Membership hero (active subscription) ─────────────────────────────── */

.member-hero {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 1rem 1rem;
  margin-bottom: 0.85rem;
  position: relative;
  overflow: hidden;
}

.member-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 80% 80% at -5% 50%,
    color-mix(in srgb, var(--accent) 12%, transparent),
    transparent 65%
  );
  pointer-events: none;
}

.member-avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  flex: none;
  font-weight: 800;
  font-size: 1.15rem;
  letter-spacing: -0.03em;
  background: color-mix(in srgb, var(--accent) 15%, var(--bg));
  color: var(--accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 25%, transparent),
              0 0 0 6px color-mix(in srgb, var(--accent) 10%, transparent);
  overflow: hidden;
}

.member-copy { flex: 1; min-width: 0; }
.member-copy strong { display: block; font-size: 1.05rem; font-weight: 700; letter-spacing: -0.01em; }
.member-copy p { margin: 0.1rem 0 0.4rem; font-size: 0.82rem; color: var(--hint); }

.active-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.22rem 0.6rem 0.22rem 0.45rem;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: color-mix(in srgb, #30d158 15%, transparent);
  color: #30d158;
}

.pulse-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #30d158;
  animation: pulse-dot 2s ease-in-out infinite;
  flex: none;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .5; transform: scale(.7); }
}

/* ─── Timer card ─────────────────────────────────────────────────────────── */

.timer-card {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 1.1rem 1.1rem 1rem;
  margin-bottom: 0.85rem;
  position: relative;
  overflow: hidden;
}

.timer-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--accent),
    color-mix(in srgb, var(--accent) 40%, transparent)
  );
}

.timer-head { margin-bottom: 0.75rem; }
.timer-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--hint);
  margin: 0 0 0.15rem;
}
.timer-plan { margin: 0; font-size: 0.88rem; color: var(--hint); }
.timer-plan span { color: var(--txt); font-weight: 650; }

.timer-row {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}

.timer-row div {
  text-align: center;
  background: color-mix(in srgb, var(--accent) 9%, var(--bg));
  border-radius: var(--radius-sm);
  padding: 0.65rem 0.2rem 0.5rem;
}

.timer-row strong {
  display: block;
  font-size: 1.45rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  color: var(--txt);
}

.timer-row span {
  display: block;
  margin-top: 0.15rem;
  color: var(--hint);
  font-size: 0.6rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.timer-sep {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--hint);
  text-align: center;
  padding-bottom: 0.7rem;
}

.timer-since { margin: 0; font-size: 0.8rem; color: var(--hint); }

/* ─── Action list (manage subscription rows) ─────────────────────────────── */

#open-groups { margin-bottom: 0.85rem; }

.action-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
}

.profile-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.profile-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border-bottom: 1px solid var(--sep);
}
.profile-row:last-child { border-bottom: 0; }
.profile-row span {
  color: var(--hint);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  flex: none;
}
.profile-row strong {
  font-size: 0.92rem;
  font-weight: 650;
  text-align: right;
  overflow-wrap: anywhere;
}

/* ─── Support full screen ────────────────────────────────────────────────── */

.support-full {
  background: var(--card);
  border-radius: var(--radius-xl);
  padding: 1.8rem 1.2rem 1.2rem;
  text-align: center;
}
.support-full-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 1rem;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: var(--accent);
}
.support-full-icon svg { width: 2.4rem; height: 2.4rem; }
.support-full h2 { margin-bottom: 0.4rem; }
.support-full p {
  color: var(--hint);
  font-size: 0.9rem;
  margin-bottom: 1.2rem;
  line-height: 1.55;
}

/* ─── Form card ──────────────────────────────────────────────────────────── */

.form-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  margin-bottom: 0.85rem;
  overflow: hidden;
}

.field {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--sep);
  position: relative;
}
.field:last-child { border-bottom: 0; }
.field:focus-within::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
  border-radius: 0 3px 3px 0;
}

label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--hint);
  margin-bottom: 0.2rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

input {
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--txt);
  padding: 0;
  outline: none;
  font-size: 16px;
}
input::placeholder { color: var(--hint); opacity: .7; }

.coupon-row {
  display: flex;
  gap: 0.6rem;
  align-items: flex-end;
}
.coupon-row > div { flex: 1; }

.coupon-note {
  margin: -0.25rem 0 0.75rem;
  font-size: 0.82rem;
  color: var(--hint);
  padding: 0 0.15rem;
}

/* ─── Checkout header ────────────────────────────────────────────────────── */

.checkout-header {
  margin-bottom: 0.9rem;
}
.checkout-label {
  margin: 0 0 0.1rem;
  font-size: 0.78rem;
  color: var(--hint);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.checkout-total {
  margin: 0;
  font-size: 2.2rem;
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ─── History ────────────────────────────────────────────────────────────── */

.history-card {
  background: var(--card);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 0.7rem;
  position: relative;
  overflow: hidden;
}

.history-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--accent);
  border-radius: 0 4px 4px 0;
}

.history-card h3 {
  margin: 0 0 0.2rem;
  font-size: 0.97rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  padding-left: 0.6rem;
}

.history-card .hist-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 0.4rem;
  padding-left: 0.6rem;
}

.history-card .meta {
  color: var(--hint);
  font-size: 0.82rem;
  margin: 0.1rem 0 0 0.6rem;
}

.history-card.skeleton::before { background: var(--sep); }
.sk-line {
  height: 0.72rem;
  width: 46%;
  margin: 0.55rem 0 0.55rem 0.6rem;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--sep) 25%, color-mix(in srgb, var(--hint) 28%, var(--card)) 50%, var(--sep) 75%);
  background-size: 200% 100%;
  animation: sk-shine 1.1s ease-in-out infinite;
}
.sk-line.wide { width: 72%; height: 0.95rem; margin-top: 0.15rem; }
.sk-line.short { width: 34%; }
@keyframes sk-shine {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}

.hist-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 0.18rem 0.55rem;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
}

.hist-pill.expired {
  background: color-mix(in srgb, var(--hint) 14%, transparent);
  color: var(--hint);
}

.empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--hint);
  background: var(--card);
  border-radius: var(--radius-lg);
  font-size: 0.92rem;
}

/* ─── Buttons ────────────────────────────────────────────────────────────── */

.cta-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 3.1rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--accent);
  color: var(--accent-txt);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), opacity .15s;
}
.cta-btn svg { width: 1.1rem; height: 1.1rem; opacity: .9; }
.cta-btn:active { transform: scale(0.97); opacity: .9; }
.cta-btn:disabled { opacity: .45; cursor: default; }

.soft-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 2.9rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--txt);
  font-weight: 600;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), opacity .15s;
}
.soft-btn:active { transform: scale(0.97); }

.ghost-btn {
  border: 0;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  white-space: nowrap;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), opacity .15s;
}
.ghost-btn:active { transform: scale(0.95); }

.apply-btn {
  border: 0;
  background: color-mix(in srgb, var(--accent) 12%, var(--bg));
  color: var(--accent);
  font-weight: 700;
  font-size: 0.82rem;
  border-radius: 999px;
  padding: 0.42rem 0.9rem;
  white-space: nowrap;
  align-self: center;
  transition: transform .15s, opacity .15s;
}
.apply-btn:active { transform: scale(0.95); }

.linkish {
  background: transparent;
  border: 0;
  color: var(--link);
  width: 100%;
  min-height: 2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
}

/* Row button (for manage / join group) */
button.row, a.button.secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 3rem;
  padding: 0.8rem 1rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--txt);
  font-weight: 550;
  font-size: 0.92rem;
  text-decoration: none;
  transition: transform .15s cubic-bezier(.2,.8,.2,1);
}
button.row:active, a.button.secondary:active { transform: scale(0.98); }

button.row::after {
  content: "";
  width: 0.42rem;
  height: 0.42rem;
  border-right: 2px solid var(--hint);
  border-top: 2px solid var(--hint);
  transform: rotate(45deg);
}

button.danger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  border: 0;
  border-radius: var(--radius-md);
  background: var(--card);
  color: var(--danger);
  font-weight: 650;
  font-size: 0.92rem;
  transition: transform .15s;
}
button.danger:active { transform: scale(0.97); }

/* ─── Dock (sticky bottom of forms) ─────────────────────────────────────── */

.dock {
  position: sticky;
  bottom: 0;
  padding: 0.9rem 0 0;
  background: linear-gradient(to top, var(--bg) 60%, transparent);
}

/* ─── Stack / list helpers ───────────────────────────────────────────────── */

.stack {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

/* ─── Center state (pending / cancelled) ─────────────────────────────────── */

.center-state {
  min-height: 60dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 0.4rem;
}
.center-state p { color: var(--hint); font-size: 0.9rem; max-width: 22rem; }
.center-state .stack { margin-top: 0.8rem; width: 100%; }

.pulse-ring {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: color-mix(in srgb, var(--accent) 10%, var(--bg));
  color: var(--accent);
  margin-bottom: 0.4rem;
  animation: ring-pulse 2s ease-in-out infinite;
}
.pulse-ring svg { width: 1.8rem; height: 1.8rem; }

@keyframes ring-pulse {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 30%, transparent); }
  50%       { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
}

.status-icon {
  width: 4rem;
  height: 4rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin-bottom: 0.4rem;
  background: color-mix(in srgb, var(--hint) 12%, var(--bg));
  color: var(--hint);
}
.status-icon svg { width: 1.8rem; height: 1.8rem; }

/* ─── Tabbar ─────────────────────────────────────────────────────────────── */

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(32rem, 100%);
  z-index: 10;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: end;
  background: var(--bottom-bg);
  border-top: 1px solid var(--sep);
  padding: 0.35rem 0.2rem calc(0.35rem + env(safe-area-inset-bottom));
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
.tabbar[hidden] { display: none; }

.tabbar button {
  border: 0;
  background: transparent;
  color: var(--hint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  font-size: 0.65rem;
  font-weight: 600;
  min-height: 3rem;
  padding: 0.25rem 0;
  border-radius: var(--radius-sm);
  letter-spacing: 0.01em;
  transition: color .2s, transform .15s cubic-bezier(.2,.8,.2,1);
}

.tabbar button svg {
  width: 1.35rem;
  height: 1.35rem;
  transition: transform .22s cubic-bezier(.2,.8,.2,1);
}

.tabbar button.active {
  color: var(--accent);
}
.tabbar button.active svg {
  transform: translateY(-2px);
}

.tabbar .fab {
  width: 3.5rem;
  height: 3.5rem;
  min-height: 3.5rem;
  margin: -1.25rem auto 0.15rem;
  padding: 0;
  border-radius: 50%;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: #050505;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.28);
  transition: transform .15s cubic-bezier(.2,.8,.2,1), box-shadow .15s;
}
.tabbar .fab img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.tabbar .fab:active {
  transform: scale(0.92);
  box-shadow: 0 2px 8px color-mix(in srgb, var(--accent) 30%, transparent);
}

/* ─── Cancel bottom sheet ────────────────────────────────────────────────── */

.sheet {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  background: color-mix(in srgb, #000 38%, transparent);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.sheet[hidden] { display: none; }

.lang-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.25rem;
  background: color-mix(in srgb, #000 55%, transparent);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

.lang-card {
  width: min(22rem, 100%);
  border-radius: 28px;
  background: var(--card);
  color: var(--txt);
  text-align: center;
  padding: 1.35rem 1.05rem 1.05rem;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}

.lang-logo {
  width: 4.25rem;
  height: 4.25rem;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  margin: 0 auto 0.85rem;
}

.lang-card h2 {
  margin: 0;
  font-size: 1.35rem;
  letter-spacing: -0.03em;
}

.lang-card p {
  margin: 0.3rem 0 1rem;
  color: var(--hint);
  font-size: 0.95rem;
}

.lang-choices {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.lang-choice {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  min-height: 3.5rem;
  border: 0;
  border-radius: 16px;
  background: var(--bg);
  color: var(--txt);
  text-align: left;
  padding: 0.55rem 0.75rem;
  box-shadow: inset 0 0 0 1.5px transparent;
}

.lang-code {
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 12px;
  display: grid;
  place-items: center;
  flex: none;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: color-mix(in srgb, var(--accent) 14%, var(--card));
  color: var(--accent);
}

.lang-name {
  flex: 1;
  font-size: 1.02rem;
  font-weight: 700;
}

.lang-check {
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  flex: none;
  box-shadow: inset 0 0 0 1.5px var(--sep);
}

.lang-choice.selected {
  box-shadow: inset 0 0 0 2px var(--accent);
}

.lang-choice.selected .lang-check {
  background: var(--accent);
  box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 12.5l4 4L18 8' fill='none' stroke='white' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 0.85rem;
  background-repeat: no-repeat;
  background-position: center;
}

.lang-dismiss {
  margin-top: 0.35rem;
  border: 0;
  background: transparent;
  color: var(--hint);
  min-height: 2.6rem;
  width: 100%;
  font-weight: 650;
}

.sheet-inner {
  width: min(32rem, 100%);
  border-radius: 28px 28px 0 0;
  background: var(--card);
  padding: 0.75rem 1.2rem calc(1.4rem + env(safe-area-inset-bottom));
  text-align: center;
}

.sheet-handle {
  width: 2.5rem;
  height: 4px;
  border-radius: 999px;
  background: var(--sep);
  margin: 0 auto 1.25rem;
}

.cancel-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: grid;
  place-items: center;
  margin: 0 auto 0.85rem;
  background: color-mix(in srgb, var(--danger) 12%, var(--bg));
  color: var(--danger);
}
.cancel-icon svg { width: 1.4rem; height: 1.4rem; }

.sheet-inner h2 { margin-bottom: 0.4rem; }
.sheet-inner p { color: var(--hint); font-size: 0.88rem; margin-bottom: 1.2rem; line-height: 1.5; }

.sheet-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cancel-confirm-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3rem;
  border: 0;
  border-radius: var(--radius-md);
  background: color-mix(in srgb, var(--danger) 12%, var(--bg));
  color: var(--danger);
  font-weight: 700;
  font-size: 0.92rem;
  transition: transform .15s cubic-bezier(.2,.8,.2,1), opacity .15s;
}
.cancel-confirm-btn:active { transform: scale(0.97); }

/* ─── Animations ─────────────────────────────────────────────────────────── */

@keyframes rise {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: none; }
}

@keyframes pop {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: none; }
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes sheet-up {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: none; }
}

/* Screen enter */
.screen.enter { animation: fade-in 0.22s ease both; }

.screen.enter .hero-card,
.screen.enter .member-hero {
  animation: rise 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

.screen.enter .plan-hero-card,
.screen.enter .timer-card,
.screen.enter .profile-card {
  animation: rise 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) 0.06s both;
}

.screen.enter .refer-banner,
.screen.enter .support-card,
.screen.enter .form-card,
.screen.enter .checkout-header {
  animation: rise 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) 0.1s both;
}

.screen.enter .action-list,
.screen.enter .stack,
.screen.enter .dock {
  animation: rise 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) 0.14s both;
}

.screen.enter .timer-row > div {
  animation: pop 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.screen.enter .timer-row > div:nth-child(1) { animation-delay: 0.10s; }
.screen.enter .timer-row > div:nth-child(3) { animation-delay: 0.16s; }
.screen.enter .timer-row > div:nth-child(5) { animation-delay: 0.22s; }
.screen.enter .timer-row > div:nth-child(7) { animation-delay: 0.28s; }

.screen.enter .feat-list li {
  animation: rise 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.screen.enter .feat-list li:nth-child(1) { animation-delay: 0.12s; }
.screen.enter .feat-list li:nth-child(2) { animation-delay: 0.18s; }
.screen.enter .feat-list li:nth-child(3) { animation-delay: 0.24s; }

.screen.enter .history-card {
  animation: rise 0.38s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.screen.enter .history-card:nth-child(1) { animation-delay: 0.04s; }
.screen.enter .history-card:nth-child(2) { animation-delay: 0.09s; }
.screen.enter .history-card:nth-child(3) { animation-delay: 0.14s; }
.screen.enter .history-card:nth-child(4) { animation-delay: 0.19s; }
.screen.enter .history-card:nth-child(n+5) { animation-delay: 0.22s; }

/* Brandbar entrance */
.brandbar:not([hidden]) {
  animation: rise 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Sheet entrance */
.sheet:not([hidden]) .sheet-inner {
  animation: sheet-up 0.35s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* Gate logo pulse */
.gate-logo {
  animation: glow-ring 3s ease-in-out infinite;
}

@keyframes glow-ring {
  0%, 100% {
    box-shadow: 0 0 0 6px rgba(212, 175, 55, 0.14),
                0 16px 40px rgba(0, 0, 0, 0.28);
  }
  50% {
    box-shadow: 0 0 0 12px rgba(212, 175, 55, 0.22),
                0 18px 48px rgba(0, 0, 0, 0.34);
  }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}