:root {
  --dark-0: #14100C;
  --dark-1: #261F18;
  --dark-2: #3E342A;
  --warm-0: #312C26;
  --warm-1: #524A3F;
  --warm-2: #8A7C69;
  --gold: #FFD16B;
  --gold-deep: #C9912C;
  --gold-glow: rgba(255, 196, 74, 0.55);
  --green: #34D399;
  --ink: #FFFFFF;
  --ink-soft: rgba(255, 255, 255, 0.82);
  --ink-mute: rgba(255, 255, 255, 0.58);
  --ink-faint: rgba(255, 255, 255, 0.45);
  --glass: rgba(20, 18, 16, 0.5);
  --hair: rgba(255, 255, 255, 0.12);
  --r-tile: 20px;
  --r-pill: 20px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, Roboto, Helvetica, Arial, sans-serif;
  background: linear-gradient(158deg, #CFC2AD 0%, #8A7C69 22%, #524A3F 52%, #312C26 100%);
  background-attachment: fixed;
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 980px; margin: 0 auto; padding: 20px 16px 48px; }

/* ---------- header ---------- */
.topbar { display: flex; align-items: center; margin-bottom: 18px; position: relative; }
.brand { font-size: 16px; font-weight: 500; letter-spacing: 1.4px; margin: 0; }
.acct-btn {
  margin-left: auto; display: flex; align-items: center; gap: 7px; cursor: pointer;
  background: rgba(255,255,255,0.18); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.22); border-radius: var(--r-pill);
  padding: 5px 11px 5px 6px; color: var(--ink); font-size: 12.5px; font-family: inherit;
}
.acct-avatar {
  width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 500;
}
.acct-menu {
  position: absolute; top: 40px; right: 0; width: 214px; z-index: 40;
  background: rgba(28,25,22,0.94); backdrop-filter: blur(30px); -webkit-backdrop-filter: blur(30px);
  border: 1px solid rgba(255,255,255,0.16); border-radius: 16px; padding: 14px;
}
.acct-menu[hidden] { display: none; }
.acct-email { margin: 0 0 12px; color: var(--ink-mute); font-size: 11.5px; word-break: break-all; }
.acct-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 0; cursor: pointer;
  color: var(--ink); font-size: 13px; background: none; border: 0; width: 100%;
  text-align: left; font-family: inherit;
}
.acct-item + .acct-item { border-top: 1px solid rgba(255,255,255,0.1); }
.acct-item svg { width: 16px; height: 16px; stroke: var(--ink-mute); flex-shrink: 0; }

/* ---------- tiles ---------- */
.grid { display: flex; gap: 12px; flex-wrap: wrap; align-items: stretch; margin-bottom: 12px; }
.tile { flex: 1; min-width: 262px; border-radius: var(--r-tile); padding: 22px; }
.tile-glass { background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--hair); }
.tile-dark { background: linear-gradient(158deg, var(--dark-2) 0%, var(--dark-1) 52%, var(--dark-0) 100%); border: 1px solid rgba(255,209,107,0.34); }
.tile-warm { background: linear-gradient(158deg, var(--warm-2) 0%, var(--warm-1) 45%, var(--warm-0) 100%); }
.tile-head { display: flex; align-items: center; gap: 12px; margin-bottom: 18px; }
.tile-label { margin: 0; color: var(--ink-soft); font-size: 14px; }
.tile-icon {
  width: 44px; height: 44px; border-radius: 14px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(140deg, #FFE9B8, #E8B75A 52%, #C08F2E);
}
.tile-icon svg { width: 23px; height: 23px; stroke: #5C4415; }

/* ---------- savings ---------- */
.money-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 8px 0 4px; }
.big-money { margin: 0 0 16px; font-size: 76px; font-weight: 500; letter-spacing: -3.6px; line-height: .92; }
.big-money .cents { font-size: 38px; letter-spacing: -1.2px; }
.gain {
  display: inline-flex; align-items: center; gap: 7px;
  background: rgba(52,211,153,0.16); border: 1px solid rgba(52,211,153,0.36);
  border-radius: 15px; padding: 7px 14px 7px 11px; color: var(--green); font-size: 13px; font-weight: 500;
}
.gain svg { width: 16px; height: 16px; stroke: var(--green); }

/* ---------- tier coin ---------- */
.tier-head { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.coin-stage { width: 88px; height: 88px; flex-shrink: 0; position: relative; perspective: 800px; }
.coin-halo {
  position: absolute; inset: -26px; border-radius: 50%; opacity: .78; transition: opacity .5s ease;
  background: radial-gradient(circle, rgba(255,196,74,0.42) 0%, rgba(255,196,74,0.12) 42%, rgba(255,196,74,0) 72%);
}
.coin-ring {
  position: absolute; inset: -6px; border-radius: 50%; opacity: .5; transition: opacity .5s ease;
  background: radial-gradient(circle, rgba(255,232,160,0.5) 40%, rgba(255,232,160,0) 70%);
}
.coin-img { position: relative; width: 88px; height: 88px; display: block; transition: transform .5s cubic-bezier(.2,.7,.3,1); will-change: transform; }
.coin-stage:hover .coin-img { transform: rotateY(-24deg) rotateX(6deg) scale(1.07); }
.coin-stage:hover .coin-halo { opacity: 1; }
.coin-stage:hover .coin-ring { opacity: .9; }
@media (hover: none) {
  .coin-img { animation: sway 5s ease-in-out infinite; }
  @keyframes sway {
    0%, 100% { transform: rotateY(-9deg); }
    50% { transform: rotateY(9deg); }
  }
}
.tier-kicker { margin: 0 0 5px; color: var(--ink-mute); font-size: 13px; }
.tier-name { margin: 0; color: var(--gold); font-size: 26px; font-weight: 500; line-height: 1.1; letter-spacing: -.3px; text-shadow: 0 0 22px var(--gold-glow); }
.bar-row { display: flex; align-items: center; gap: 11px; margin-bottom: 18px; }
.bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.12); overflow: hidden; }
.bar > i { display: block; height: 7px; border-radius: 4px; background: linear-gradient(90deg, var(--gold-deep), #FFDE8E); box-shadow: 0 0 12px rgba(255,196,74,0.7); }
.bar-note { margin: 0; color: var(--gold); font-size: 12.5px; font-weight: 500; }
.perks { background: rgba(255,255,255,0.055); border: 1px solid rgba(255,209,107,0.16); border-radius: 14px; padding: 15px; }
.perk { display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: rgba(255,255,255,0.88); }
.perk + .perk { margin-top: 11px; }
.perk svg { width: 15px; height: 15px; stroke: var(--gold); flex-shrink: 0; }

/* ---------- deal list ---------- */
.list-title { margin: 0 0 16px; font-size: 15px; font-weight: 500; }
.deal { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.deal:last-child { border-bottom: 0; padding-bottom: 0; }
.deal:first-of-type { padding-top: 0; }
.deal-thumb {
  width: 46px; height: 46px; border-radius: 14px; flex-shrink: 0; object-fit: cover;
  background: linear-gradient(140deg, #6E6255, #3E362D);
  display: flex; align-items: center; justify-content: center;
  font-size: 17px; font-weight: 500; color: rgba(255,225,168,0.9);
}
img.deal-thumb { background: rgba(255,255,255,0.06); }
.deal-body { flex: 1; min-width: 0; }
.deal-name { margin: 0 0 3px; font-size: 14px; font-weight: 500; }
.deal-price { margin: 0; color: rgba(255,255,255,0.62); font-size: 12px; }
.deal-price b { color: var(--green); font-weight: 500; }
.deal-cta {
  background: #fff; color: #2E2A25; border: 0; border-radius: 15px;
  padding: 9px 18px; font-size: 12.5px; font-weight: 500; cursor: pointer;
  flex-shrink: 0; font-family: inherit; text-decoration: none;
}

/* ---------- login ---------- */
.login-wrap { max-width: 420px; margin: 0 auto; padding: 56px 16px; }
.login-card { background: var(--glass); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); border: 1px solid var(--hair); border-radius: var(--r-tile); padding: 28px 24px; }
.lockup {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 0 26px; font-size: 15px; font-weight: 500; letter-spacing: 2.2px;
}
.lockup img { width: 30px; height: 30px; flex-shrink: 0; }
.login-title { margin: 0 0 6px; font-size: 22px; font-weight: 500; text-align: center; }
.login-sub { margin: 0 0 22px; color: var(--ink-mute); font-size: 13.5px; line-height: 1.55; text-align: center; }
.field-label { display: block; margin: 0 0 7px; font-size: 12.5px; font-weight: 500; }
.field {
  width: 100%; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  border-radius: 10px; padding: 13px 14px; color: var(--ink); font-size: 15px; font-family: inherit;
}
.field::placeholder { color: rgba(255,255,255,0.35); }
.field:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(255,209,107,0.16); }
.field.code { text-align: center; letter-spacing: 9px; font-size: 22px; font-weight: 500; }
.btn {
  width: 100%; margin-top: 14px; background: var(--gold); color: #3A2A05; border: 0;
  border-radius: 12px; padding: 14px; font-size: 14.5px; font-weight: 500; cursor: pointer; font-family: inherit;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-ghost { background: transparent; color: var(--ink-soft); border: 1px solid rgba(255,255,255,0.22); }
.btn-danger { background: #B03A2E; color: #fff; }
.btn-dark { background: #3E342A; color: #fff; }
.btn-green { background: #1E8E68; color: #fff; }
.banner {
  margin: 0 0 16px; background: #B03A2E; color: #fff; border-radius: 10px;
  padding: 12px 14px; text-align: center; font-size: 14px; font-weight: 500;
}
.btn-link { background: none; border: 0; color: var(--ink-mute); font-size: 13px; text-decoration: underline; cursor: pointer; font-family: inherit; padding: 12px; width: 100%; }
.fineprint { margin: 16px 0 0; color: var(--ink-faint); font-size: 11.5px; line-height: 1.6; text-align: center; }
.note { margin: 14px 0 0; padding: 11px 13px; border-radius: 10px; font-size: 12.5px; line-height: 1.5; }
.note-err { background: rgba(224,90,74,0.16); border: 1px solid rgba(224,90,74,0.4); color: #FFB4A6; }
.note-ok { background: rgba(52,211,153,0.14); border: 1px solid rgba(52,211,153,0.34); color: var(--green); }
.note[hidden] { display: none; }

/* ---------- manage / cancel ---------- */
.panel { max-width: 460px; margin: 0 auto; }
.steps { display: flex; gap: 5px; margin-bottom: 18px; }
.steps i { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.16); }
.steps i.on { background: var(--gold); }
.panel-title { margin: 0 0 6px; font-size: 20px; font-weight: 500; }
.panel-sub { margin: 0 0 16px; color: var(--ink-mute); font-size: 13px; line-height: 1.55; }
.kv { background: rgba(255,255,255,0.06); border: 1px solid var(--hair); border-radius: 12px; padding: 14px; margin-bottom: 16px; }
.kv-row { display: flex; justify-content: space-between; align-items: center; font-size: 12.5px; padding: 7px 0; }
.kv-row + .kv-row { border-top: 1px solid rgba(255,255,255,0.09); }
.kv-row span { color: var(--ink-mute); }
.kv-row b { font-weight: 500; }
.offer { border: 1px solid rgba(255,255,255,0.16); border-radius: 14px; padding: 15px; margin-bottom: 12px; }
.offer h3 { margin: 0 0 4px; font-size: 14.5px; font-weight: 500; }
.offer p { margin: 0 0 12px; color: var(--ink-mute); font-size: 12.5px; line-height: 1.5; }
.offer .price { font-size: 20px; font-weight: 500; color: var(--ink); }
.offer .was { color: var(--ink-faint); font-size: 13px; text-decoration: line-through; margin-left: 7px; }
.reason { display: block; width: 100%; text-align: left; background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.16); border-radius: 11px; padding: 13px 14px; margin-bottom: 9px; color: var(--ink); font-size: 13px; cursor: pointer; font-family: inherit; }
.reason.sel { border-color: var(--gold); background: rgba(255,209,107,0.12); }
.done-icon { width: 46px; height: 46px; border-radius: 50%; background: rgba(52,211,153,0.16); display: flex; align-items: center; justify-content: center; margin-bottom: 14px; }
.done-icon svg { width: 24px; height: 24px; stroke: var(--green); }

.view[hidden] { display: none; }
.center { text-align: center; }
.muted { color: var(--ink-mute); }
.skeleton { background: rgba(255,255,255,0.08); border-radius: 8px; color: transparent !important; animation: pulse 1.4s ease-in-out infinite; }
@keyframes pulse { 50% { opacity: .5; } }

@media (max-width: 620px) {
  .wrap { padding: 16px 12px 40px; }
  .tile { min-width: 100%; padding: 20px; }
  .big-money { font-size: 54px; letter-spacing: -2.4px; }
  .big-money .cents { font-size: 28px; }
  .tier-name { font-size: 24px; }
}