:root{
    --ink:#0a0a0c; --panel:#121216;
    --gold:#d4af37; --gold-2:#f1d27a; --gold-dim:rgba(212,175,55,.35);
    --text:#f4f1e8; --muted:#9b968a; --hairline:rgba(212,175,55,.18);
  }
  *{margin:0;padding:0;box-sizing:border-box}
  html{color-scheme:dark}
  body{
    font-family:-apple-system,system-ui,'Segoe UI',sans-serif;
    background:
      radial-gradient(1100px 500px at 50% -10%, rgba(212,175,55,.10), transparent 60%),
      var(--ink);
    color:var(--text); line-height:1.6; min-height:100vh;
    padding:0 20px 80px;
  }
  .wrap{max-width:560px;margin:0 auto}
  .kicker{
    margin:56px auto 0; text-align:center;
    font-size:11px; font-weight:700; letter-spacing:.42em; text-transform:uppercase;
    color:var(--gold);
  }
  .kicker::before,.kicker::after{content:"—"; color:var(--gold-dim); margin:0 14px}
  h1{
    margin:16px 0 22px; text-align:center;
    font-size:clamp(26px,6vw,34px); font-weight:800; letter-spacing:-.02em;
    background:linear-gradient(180deg,#fff 20%,var(--gold-2) 90%);
    -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  }
  .status{
    background:var(--panel); border:1px solid var(--hairline); border-radius:2px;
    padding:13px 16px; margin:16px 0; text-align:center;
    font-size:13.5px; color:var(--muted);
  }
  .status.error{color:#e8a6a0; border-color:rgba(232,166,160,.35)}
  .card{
    background:var(--panel); border:1px solid var(--hairline); border-radius:2px;
    padding:20px 18px; margin:16px 0;
  }
  .card h2{
    font-size:11px; font-weight:800; letter-spacing:.34em; text-transform:uppercase;
    color:var(--gold); margin-bottom:12px;
  }
  .signin{
    display:block; width:100%; margin:10px 0; padding:14px; cursor:pointer;
    font-size:14px; font-weight:700; letter-spacing:.04em;
    border:1px solid var(--hairline); border-radius:2px; color:var(--text);
    background:#17171c;
  }
  .signin.apple{background:#000}
  .planName{font-size:22px; font-weight:800; color:#fff}
  .planState{font-size:12.5px; color:var(--muted); margin-top:2px}
  .live{color:#4ade80}
  .bal{font-size:34px; font-weight:800; color:#fff}
  .bal small{font-size:12px; font-weight:700; letter-spacing:.18em; color:var(--muted); margin-left:8px}
  .grid{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:14px}
  .pack{
    padding:13px 8px; cursor:pointer; text-align:center;
    font-size:13.5px; color:var(--text);
    border:1px solid var(--hairline); border-radius:2px; background:#17171c;
  }
  .pack b{display:block; font-size:17px; color:var(--gold-2)}
  .pack:disabled{opacity:.5}
  .gold{
    display:block; width:100%; margin-top:14px; padding:14px; cursor:pointer;
    font-size:12.5px; font-weight:800; letter-spacing:.24em; text-transform:uppercase;
    color:var(--ink); border:0; border-radius:2px;
    background:linear-gradient(180deg,var(--gold-2),var(--gold));
  }
  .gold:disabled{opacity:.5}
  .foot{margin-top:26px; text-align:center}
  .foot button{
    background:none; border:0; color:var(--muted); font-size:12.5px;
    text-decoration:underline; cursor:pointer;
  }
  .who{text-align:center; font-size:12px; color:var(--muted); margin-top:6px}

.center{text-align:center}.spaced{margin-top:10px}[hidden]{display:none!important}label{display:block;margin:12px 0}input,select{width:100%;padding:12px;background:#17171c;color:#fff;border:1px solid var(--hairline);font:inherit}a{color:var(--gold-2)}button:disabled{opacity:.5;cursor:wait}