/* H3Y Kali — account / membership pages. Pink/purple/wine on dark purple. */
:root{
  --au-ink:#0e0717; --au-pnl:linear-gradient(180deg,#1b1232,#120a1e);
  --au-bd:#33214a; --au-bd2:#49305f; --au-pink:#ff4fa3; --au-purple:#a95cf0;
  --au-text:#ece3f4; --au-dim:#b7a6c4; --au-ease:cubic-bezier(.22,1,.36,1);
}
*{ box-sizing:border-box; }
html,body{ margin:0; }
body.auth{
  min-height:100vh; background:
    radial-gradient(90% 60% at 50% -10%, rgba(169,92,240,.14), transparent 60%),
    radial-gradient(70% 50% at 50% 110%, rgba(255,79,163,.08), transparent 60%),
    var(--au-ink);
  color:var(--au-text); font-family:"Inter",system-ui,sans-serif;
  display:flex; flex-direction:column; align-items:center;
}

/* top bar */
.au-nav{ width:100%; max-width:1100px; display:flex; align-items:center; justify-content:space-between;
  padding:1.4rem clamp(1rem,4vw,2rem); }
.au-nav__mark{ display:flex; align-items:center; gap:.55rem; text-decoration:none; color:#fff;
  font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:1.15rem; }
.au-nav__dot{ width:10px; height:10px; border-radius:50%; background:var(--au-pink);
  box-shadow:0 0 14px rgba(255,79,163,.7); }
.au-nav__back{ font-family:"JetBrains Mono",monospace; font-size:.82rem; color:var(--au-dim);
  text-decoration:none; padding:.5rem .9rem; border:1px solid var(--au-bd); border-radius:10px;
  transition:color .2s var(--au-ease), border-color .2s var(--au-ease); }
.au-nav__back:hover{ color:#fff; border-color:rgba(255,79,163,.4); }

/* centred card */
.au-wrap{ flex:1; width:100%; display:flex; align-items:center; justify-content:center;
  padding:clamp(1rem,5vw,3rem); }
.au-card{ position:relative; overflow:hidden; width:100%; max-width:440px;
  padding:clamp(1.6rem,5vw,2.6rem); border-radius:18px; background:var(--au-pnl);
  border:1px solid #38244e;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05), 0 30px 70px -36px rgba(0,0,0,.9), 0 0 60px -30px rgba(255,79,163,.28); }
.au-card--wide{ max-width:560px; }
.au-card::before{ content:""; position:absolute; top:0; left:0; right:0; height:2px;
  background:linear-gradient(90deg,transparent,rgba(255,79,163,.85),rgba(169,92,240,.6),transparent); }

.au-eyebrow{ font-family:"JetBrains Mono",monospace; font-size:.64rem; letter-spacing:.24em;
  text-transform:uppercase; color:#b07fc0; margin:0 0 .5rem; }
.au-title{ font-family:"Space Grotesk",sans-serif; font-weight:700; font-size:clamp(1.5rem,4vw,2rem);
  margin:0 0 .4rem; letter-spacing:-.01em;
  background:linear-gradient(174deg,#fbeef6 34%,var(--au-pink)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.au-sub{ color:var(--au-dim); font-size:.96rem; line-height:1.6; margin:0 0 1.4rem; }

/* form */
.au-field{ margin:0 0 .9rem; }
.au-label{ display:block; font-family:"JetBrains Mono",monospace; font-size:.66rem; letter-spacing:.14em;
  text-transform:uppercase; color:#9a8fa6; margin:0 0 .4rem; }
.au-input{ width:100%; font-family:"Inter",sans-serif; font-size:1rem; color:#fff;
  padding:.8rem .95rem; border-radius:11px; background:linear-gradient(180deg,#19102c,#110a1d);
  border:1px solid var(--au-bd); box-shadow:inset 0 2px 6px rgba(0,0,0,.45);
  transition:border-color .2s var(--au-ease), box-shadow .2s var(--au-ease); }
.au-input::placeholder{ color:#6f6480; }
.au-input:focus{ outline:none; border-color:rgba(255,79,163,.55);
  box-shadow:inset 0 2px 6px rgba(0,0,0,.45), 0 0 0 3px rgba(255,79,163,.14); }

.au-btn{ display:inline-flex; align-items:center; justify-content:center; gap:.5rem; width:100%;
  font-family:"JetBrains Mono",monospace; font-size:.95rem; cursor:pointer; text-decoration:none;
  padding:.85rem 1.2rem; border-radius:12px; border:1px solid transparent; margin-top:.4rem;
  color:#140811; background:linear-gradient(135deg,var(--au-pink),#c45ad0);
  box-shadow:0 10px 26px -10px rgba(255,79,163,.6);
  transition:transform .18s var(--au-ease), filter .18s var(--au-ease); }
.au-btn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.au-btn:disabled{ opacity:.6; cursor:default; transform:none; filter:none; }
.au-btn--ghost{ color:var(--au-text); background:rgba(255,255,255,.04); border-color:var(--au-bd2);
  box-shadow:none; }
.au-btn--ghost:hover{ border-color:rgba(255,79,163,.45); color:#fff; background:rgba(255,79,163,.07); }

.au-row{ display:flex; gap:.7rem; flex-wrap:wrap; }
.au-row .au-btn{ flex:1 1 160px; }

.au-alt{ margin:1.1rem 0 0; font-size:.88rem; color:var(--au-dim); text-align:center; }
.au-alt a{ color:var(--au-pink); text-decoration:none; }
.au-alt a:hover{ text-decoration:underline; }

.au-msg{ margin:1rem 0 0; padding:.7rem .9rem; border-radius:10px; font-size:.88rem; line-height:1.5;
  font-family:"JetBrains Mono",monospace; display:none; }
.au-msg.is-on{ display:block; }
.au-msg--err{ color:#ffb3c9; background:rgba(177,35,78,.18); border:1px solid rgba(255,79,163,.4); }
.au-msg--ok{ color:#d7f0c2; background:rgba(120,200,120,.12); border:1px solid rgba(120,200,120,.35); }
.au-msg--info{ color:#d9c2e6; background:rgba(169,92,240,.12); border:1px solid rgba(169,92,240,.35); }

/* account status */
.au-status{ display:flex; align-items:center; gap:.6rem; margin:.2rem 0 1.2rem;
  padding:.85rem 1rem; border-radius:12px; background:linear-gradient(180deg,#201436,#160d24);
  border:1px solid var(--au-bd2); font-family:"JetBrains Mono",monospace; font-size:.92rem; }
.au-status__dot{ width:10px; height:10px; border-radius:50%; background:#6f6480; flex:none; }
.au-status--active .au-status__dot{ background:#7fd06a; box-shadow:0 0 12px rgba(127,208,106,.7); }
.au-status--inactive .au-status__dot{ background:#ff7b72; box-shadow:0 0 12px rgba(255,123,114,.6); }
.au-meta{ font-family:"JetBrains Mono",monospace; font-size:.8rem; color:#9a8fa6; margin:.1rem 0 1.3rem; }
.au-email{ font-family:"JetBrains Mono",monospace; color:#fbeef6; }

.au-price{ display:flex; align-items:baseline; gap:.4rem; margin:.2rem 0 1.2rem; }
.au-price b{ font-family:"Space Grotesk",sans-serif; font-size:2.2rem; color:#fff; }
.au-price span{ color:var(--au-dim); font-size:.9rem; }
.au-list{ list-style:none; padding:0; margin:0 0 1.4rem; }
.au-list li{ display:flex; gap:.6rem; align-items:flex-start; color:var(--au-dim); font-size:.95rem; margin:.5rem 0; }
.au-list li::before{ content:"✓"; color:var(--au-pink); font-weight:700; }

@media (prefers-reduced-motion:reduce){ .au-btn{ transition:none; } }

/* make the `hidden` attribute win over display rules like .au-btn{display:inline-flex} */
[hidden]{ display:none !important; }