/* ============================================================
   Halo auth pages — login / signup / forgot / reset.

   Split layout: a brand hero on the left, the form card on the
   right, over the same aurora + grain backdrop and the same
   purple -> pink -> orange gradient the Halo funnel uses
   (funnel/index.html), so the marketing site and the studio's
   front door read as one product.

   Body is the app shell here (flex column, footer last child) —
   nothing inside sets its own 100vh, so the "Powered by Jhome
   Automation" credit in .halo-auth-footer always lands on screen.
   ============================================================ */

.halo-auth {
  margin: 0;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--bg0, #050509);
  color: var(--text, #f0f0f6);
  font-family: var(--font-ui, 'Manrope', system-ui, -apple-system, sans-serif);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

.halo-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- ambient backdrop (mirrors the funnel) ---------- */
.halo-auth-aurora { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.halo-auth-aurora span { position: absolute; border-radius: 50%; filter: blur(110px); }
.halo-auth-aurora .a1 { width: 640px; height: 640px; top: -240px; left: -170px; background: #8b6cff; opacity: .30; }
.halo-auth-aurora .a2 { width: 520px; height: 520px; bottom: -240px; left: 8%;   background: #ff4fa3; opacity: .20; }
.halo-auth-aurora .a3 { width: 580px; height: 580px; top: 14%; right: -260px;    background: #4fd6ff; opacity: .13; }
.halo-auth-grain {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 44px 44px;
  -webkit-mask-image: radial-gradient(circle at 32% 30%, #000, transparent 76%);
  mask-image: radial-gradient(circle at 32% 30%, #000, transparent 76%);
}

/* ---------- split ---------- */
.halo-auth-split {
  position: relative; z-index: 1; flex: 1;
  width: 100%; max-width: 1400px; margin: 0 auto;
  padding: 56px 40px;
  display: grid; grid-template-columns: 1fr minmax(0, 560px);
  align-items: center; gap: 56px;
}

/* ---------- brand column ---------- */
.halo-auth-brand { max-width: 560px; }

.halo-auth-logo { display: inline-block; text-decoration: none; color: inherit; }
.halo-auth-domain {
  margin: 14px 0 0; font-size: 20px; font-weight: 600; letter-spacing: -.01em;
  color: var(--dim, #a3a3ba);
}
.halo-auth-domain .tld {
  background: var(--grad, linear-gradient(135deg,#8b6cff,#ff4fa3 55%,#ff9a5a));
  -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700;
}

.halo-auth-headline {
  margin: 52px 0 0;
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: clamp(32px, 3.9vw, 48px); font-weight: 700;
  letter-spacing: -.025em; line-height: 1.08;
}
.halo-auth-headline .grad {
  background: var(--grad, linear-gradient(135deg,#8b6cff,#ff4fa3 55%,#ff9a5a));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.halo-auth-lead {
  margin: 20px 0 0; max-width: 46ch;
  font-size: 18px; line-height: 1.65; color: var(--dim, #a3a3ba);
}

/* feature strip */
.halo-auth-features {
  margin: 54px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px;
  max-width: 520px;
}
.halo-auth-features li { text-align: center; }
.halo-auth-features svg { width: 30px; height: 30px; margin-bottom: 12px; }
.halo-auth-features b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.halo-auth-features span { display: block; margin-top: 4px; font-size: 14px; line-height: 1.4; color: var(--faint, #6f6f88); }
.halo-auth-features .f1 b { color: #8b6cff; } .halo-auth-features .f1 svg { color: #8b6cff; }
.halo-auth-features .f2 b { color: #ff4fa3; } .halo-auth-features .f2 svg { color: #ff4fa3; }
.halo-auth-features .f3 b { color: #4fd6ff; } .halo-auth-features .f3 svg { color: #4fd6ff; }
.halo-auth-features .f4 b { color: #ff9a5a; } .halo-auth-features .f4 svg { color: #ff9a5a; }

/* ---------- brand lockup ----------
   Mirrors the app shell's own .halo-brand: the gradient mark beside the
   word, mixed case, display face — not an invented auth-only wordmark. */
.halo-lockup { display: flex; align-items: center; gap: .34em;
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-weight: 700; letter-spacing: -.02em; line-height: 1;
  font-size: clamp(34px, 4.2vw, 54px); }
.halo-lockup .halo-mark-lg { width: .78em; height: .78em; border-radius: .23em;
  background: var(--grad); box-shadow: 0 0 18px var(--glow); flex: none; }

/* ---------- card ---------- */
.halo-auth-panel { display: flex; justify-content: center; }

.halo-auth-card {
  position: relative; overflow: hidden;
  width: min(500px, 100%); padding: 44px 40px;
  border-radius: 24px;
  background: rgba(16, 16, 25, .72);
  border: 1px solid rgba(255, 255, 255, .13);
  -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px);
  box-shadow: 0 44px 90px -44px rgba(0, 0, 0, .95),
              0 0 70px -34px rgba(139, 108, 255, .55);
}
/* the lit top edge from the design reference */
.halo-auth-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: var(--grad, linear-gradient(135deg,#8b6cff,#ff4fa3 55%,#ff9a5a));
  opacity: .85;
}

.halo-auth-card h1 {
  margin: 0; text-align: center;
  font-family: var(--font-display, 'Space Grotesk', system-ui, sans-serif);
  font-size: 32px; font-weight: 700; letter-spacing: -.025em; line-height: 1.15;
  color: var(--text, #f0f0f6);
}
.halo-auth-sub {
  margin: 10px 0 32px; text-align: center;
  font-size: 17px; color: var(--dim, #a3a3ba);
}
.halo-auth-card p { margin: 0 0 16px; font-size: 17px; line-height: 1.6; color: var(--dim, #a3a3ba); }

/* ---------- messages ---------- */
.halo-alert {
  display: none; margin: 0 0 20px; padding: 12px 16px; border-radius: 12px;
  font-size: 16px; line-height: 1.5;
}
.halo-alert.is-shown { display: block; }
.halo-alert-error { background: rgba(248, 113, 113, .10); border: 1px solid rgba(248, 113, 113, .34); color: #fca5a5; }
.halo-alert-ok    { background: rgba(79, 214, 255, .09);  border: 1px solid rgba(79, 214, 255, .30);  color: #9ee6ff; }

/* ---------- fields ---------- */
.halo-field { margin-bottom: 22px; }
.halo-field > label {
  display: block; margin-bottom: 9px;
  font-size: 15px; font-weight: 600; letter-spacing: -.005em;
  color: var(--text, #f0f0f6);
}
.halo-input { position: relative; display: flex; align-items: center; }
.halo-input > svg {
  position: absolute; left: 16px; width: 20px; height: 20px;
  color: var(--faint, #6f6f88); pointer-events: none;
}
.halo-input input {
  width: 100%; padding: 15px 16px 15px 48px;
  font-family: inherit; font-size: 17px; line-height: 1.4;
  color: var(--text, #f0f0f6);
  background: rgba(255, 255, 255, .035);
  border: 1px solid rgba(255, 255, 255, .13); border-radius: 13px;
  transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.halo-input input::placeholder { color: var(--faint, #6f6f88); }
.halo-input input:focus {
  outline: none; background: rgba(255, 255, 255, .055);
  border-color: rgba(139, 108, 255, .70);
  box-shadow: 0 0 0 4px rgba(139, 108, 255, .16);
}
.halo-input.has-toggle input { padding-right: 54px; }
.halo-pw-toggle {
  position: absolute; right: 8px; display: flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border: 0; border-radius: 10px;
  background: none; color: var(--faint, #6f6f88); cursor: pointer;
  transition: color .16s ease, background .16s ease;
}
.halo-pw-toggle:hover { color: var(--text, #f0f0f6); background: rgba(255, 255, 255, .06); }
.halo-pw-toggle:focus-visible { outline: 2px solid rgba(139, 108, 255, .8); outline-offset: 2px; }
.halo-pw-toggle svg { width: 20px; height: 20px; }
.halo-pw-toggle .eye-off { display: none; }
.halo-pw-toggle.is-revealed .eye { display: none; }
.halo-pw-toggle.is-revealed .eye-off { display: block; }

.halo-field-hint { margin: 8px 0 0; font-size: 14px; color: var(--faint, #6f6f88); }

/* ---------- options row ---------- */
.halo-auth-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; margin: 0 0 26px; font-size: 16px;
}
.halo-remember { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; color: var(--dim, #a3a3ba); }
.halo-remember input {
  width: 19px; height: 19px; margin: 0; cursor: pointer;
  accent-color: #8b6cff;
}
.halo-link { color: #a68bff; text-decoration: none; font-weight: 600; }
.halo-link:hover { color: #c3b2ff; text-decoration: underline; }

/* ---------- buttons ---------- */
.halo-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  width: 100%; box-sizing: border-box;
  font-family: inherit; font-size: 17px; font-weight: 700; letter-spacing: -.005em;
  padding: 16px 24px; border-radius: 14px; border: 1px solid transparent;
  text-decoration: none; cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.halo-btn-primary {
  background: var(--grad, linear-gradient(135deg,#8b6cff,#ff4fa3 55%,#ff9a5a)); color: #fff;
  box-shadow: 0 14px 34px -14px rgba(139, 108, 255, .8);
}
.halo-btn-primary:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 20px 46px -16px rgba(139, 108, 255, .9); }
.halo-btn-primary:disabled { opacity: .55; cursor: progress; transform: none; }
.halo-btn-oauth {
  background: rgba(255, 255, 255, .04); color: var(--text, #f0f0f6);
  border-color: rgba(255, 255, 255, .14);
}
.halo-btn-oauth:hover { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .28); transform: translateY(-2px); }
.halo-btn-oauth svg { width: 20px; height: 20px; }

/* ---------- divider ---------- */
.halo-divider {
  display: flex; align-items: center; gap: 16px;
  margin: 26px 0; font-size: 15px; color: var(--faint, #6f6f88);
}
.halo-divider::before, .halo-divider::after {
  content: ""; flex: 1; height: 1px; background: rgba(255, 255, 255, .12);
}

/* ---------- card footer ---------- */
.halo-auth-alt {
  margin: 30px 0 0; text-align: center;
  font-size: 16px; color: var(--dim, #a3a3ba);
}
.halo-auth-legal { margin: 18px 0 0; text-align: center; font-size: 14px; color: var(--faint, #6f6f88); }
.halo-auth-legal a { color: var(--faint, #6f6f88); text-decoration: underline; }
.halo-auth-legal a:hover { color: var(--dim, #a3a3ba); }

/* ---------- page footer (carries the brand credit) ---------- */
.halo-auth-footer {
  position: relative; z-index: 1;
  display: flex; flex-wrap: wrap; align-items: center; gap: 10px 28px;
  padding: 16px 40px calc(16px + env(safe-area-inset-bottom));
  border-top: 1px solid rgba(255, 255, 255, .07);
  background: rgba(5, 5, 9, .72);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  font-size: 14px; color: var(--faint, #6f6f88);
}
.halo-auth-footer a { color: var(--faint, #6f6f88); text-decoration: none; }
.halo-auth-footer a:hover { color: var(--dim, #a3a3ba); text-decoration: underline; }
.halo-auth-footer .f-left { flex: 1 1 220px; }
.halo-auth-footer .f-mid { flex: 1 1 240px; text-align: center; opacity: .85; }
.halo-auth-footer .f-right { flex: 1 1 220px; text-align: right; display: flex; gap: 14px; justify-content: flex-end; }

/* ---------- short viewports ----------
   The credit footer is the last child of the shell, so anything that makes
   the split taller than the viewport pushes it below the fold. On a laptop
   (~720-800px tall) the card alone is nearly that tall, so compact the
   rhythm rather than let the brand credit fall off screen. */
@media (min-width: 1081px) and (max-height: 900px) {
  .halo-auth-split { padding: 16px 40px; gap: 40px; }
  .halo-auth-card { padding: 30px 34px; }
  .halo-auth-card h1 { font-size: 28px; }
  .halo-auth-sub { margin-bottom: 22px; font-size: 16px; }
  .halo-field { margin-bottom: 16px; }
  .halo-auth-row { margin-bottom: 20px; }
  .halo-btn { padding: 14px 24px; }
  .halo-divider { margin: 18px 0; }
  .halo-auth-alt { margin-top: 18px; }
  .halo-auth-legal { margin-top: 12px; }
  .halo-auth-headline { margin-top: 32px; }
  .halo-auth-lead { margin-top: 16px; }
  .halo-auth-features { margin-top: 32px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1080px) {
  .halo-auth-split {
    grid-template-columns: 1fr; justify-items: center; text-align: center;
    gap: 44px; padding: 44px 24px;
  }
  .halo-auth-brand { max-width: 620px; }
  .halo-auth-lead { margin-left: auto; margin-right: auto; }
  .halo-auth-headline { margin-top: 34px; }
  .halo-auth-features { margin: 38px auto 0; }
  .halo-auth-panel { width: 100%; }
  /* the split centres the brand column at this width — the form inside the
     card still reads top-down-left, so don't let that inherit */
  .halo-auth-card { text-align: left; }
}

/* On a phone the form is the point — the brand block collapses to a compact
   wordmark above the card, and the feature strip moves below it, so "Welcome
   back" and the email field are on screen the moment the page loads.
   `display: contents` dissolves the brand <section> so its children can be
   reordered against the card, which is its sibling in the grid. */
@media (max-width: 640px) {
  .halo-auth-split { padding: 26px 18px; gap: 26px; }
  .halo-auth-brand { display: contents; }
  .halo-auth-logo { order: 1; justify-self: center; text-align: center; }
  .halo-auth-panel { order: 2; }
  .halo-auth-features { order: 3; }
  .halo-auth-headline, .halo-auth-lead { display: none; }
    .halo-auth-domain { margin-top: 8px; font-size: 16px; }
  .halo-auth-features { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; margin: 0 auto; max-width: 360px; }
  .halo-auth-features svg { width: 26px; height: 26px; margin-bottom: 8px; }
  .halo-auth-features b { font-size: 15px; }
  .halo-auth-features span { font-size: 14px; }
  .halo-auth-card { padding: 32px 22px; border-radius: 20px; }
  .halo-auth-card h1 { font-size: 27px; }
  .halo-auth-row { flex-wrap: wrap; }
  .halo-auth-footer { padding: 16px 20px calc(16px + env(safe-area-inset-bottom)); }
}

/* Three footer zones side by side need ~800px of usable width; below that
   they stack into centred rows instead of wrapping mid-phrase. */
@media (max-width: 900px) {
  .halo-auth-footer { justify-content: center; gap: 8px 20px; }
  .halo-auth-footer .f-left, .halo-auth-footer .f-mid, .halo-auth-footer .f-right {
    flex: 1 1 100%; text-align: center; justify-content: center;
  }
  .halo-auth-footer a { white-space: nowrap; }
}

@media (prefers-reduced-motion: reduce) {
  .halo-btn:hover { transform: none; }
  .halo-btn, .halo-input input, .halo-pw-toggle { transition: none; }
}

.mc-legal-body {
  background: #0b0d14;
  color: #d5d7e0;
  font-family: 'Manrope', sans-serif;
}

.mc-legal {
  max-width: 720px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  /* Clears the fixed .mc-credit footer (10px + text + 10px + safe-area-inset)
     so the last paragraph/link isn't hidden underneath it on notched phones. */
  padding-bottom: calc(3rem + 44px + env(safe-area-inset-bottom));
}

.mc-legal, .mc-legal p, .mc-legal li { font-size: 17px; line-height: 1.65; }
.mc-legal h1 { color: #f4f4f6; }
.mc-legal a { color: #8b8cf6; }

/* ===== Tokens / billing page ===== */
.mc-tokens {
  max-width: 860px;
  margin: 0 auto;
  padding: 3rem 1.5rem;
  padding-bottom: calc(3rem + 44px + env(safe-area-inset-bottom));
  font-size: 17px;
  line-height: 1.65;
}
.mc-tokens h1 { color: #f4f4f6; margin: 0 0 1.5rem; }
.mc-tokens h2 { color: #f4f4f6; font-size: 1.25rem; margin: 2.5rem 0 1rem; }
.mc-tokens-back { color: #8b8cf6; text-decoration: none; font-size: 16px; }
.mc-tokens-flash {
  background: #1b2a1e; border: 1px solid #2f5136; color: #a7e0b5;
  border-radius: 10px; padding: 0.75rem 1rem; font-size: 16px;
}
.mc-tokens-balance {
  border: 1px solid var(--mc-border, #232634); border-radius: 16px;
  padding: 1.5rem; background: var(--mc-panel, #12141d);
}
.mc-tokens-amount {
  font-size: 2.75rem; font-weight: 700; margin: 0; color: #f4f4f6; line-height: 1.1;
}
/* A balance we couldn't read must not look like an empty one. */
.mc-balance-low .mc-tokens-amount { color: #f0c987; }
.mc-balance-zero .mc-tokens-amount { color: #f87171; }
.mc-balance-unknown .mc-tokens-amount { color: var(--mc-muted, #8b8fa3); }
.mc-bundle-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px;
}
.mc-bundle {
  border: 1px solid var(--mc-border, #232634); border-radius: 14px;
  padding: 1.25rem; background: var(--mc-panel, #12141d); text-align: center;
}
.mc-bundle-tier {
  margin: 0 0 0.35rem; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--mc-muted, #8b8fa3);
}
.mc-bundle-price { margin: 0; font-size: 1.5rem; font-weight: 700; color: #f4f4f6; }
.mc-bundle-credit { margin: 0.25rem 0 1rem; font-size: 16px; color: var(--mc-muted, #8b8fa3); }
.mc-tokens-legal {
  margin-top: 2rem; font-size: 14px; line-height: 1.6; color: var(--mc-muted, #8b8fa3);
}

/* Danger zone -- account deletion on the Tokens page.
   Deliberately quiet until opened: a destructive control that shouts is one
   people learn to click past. Colour carries the warning, not size. */
.mc-danger-zone {
  margin-top: 3.5rem;
  padding-top: 2rem;
  border-top: 1px solid #2a2b36;
}
.mc-danger-zone h2 { color: #f4f4f6; }
.mc-danger-lead { color: #b9bcc9; font-size: 17px; margin: 0 0 1.25rem; max-width: 62ch; }
.mc-danger-list {
  color: #b9bcc9; font-size: 16px; line-height: 1.6;
  margin: 0 0 1.5rem; padding-left: 1.15rem; max-width: 62ch;
}
.mc-danger-list li { margin-bottom: 0.35rem; }

.mc-btn-danger {
  background: transparent; color: #f87171;
  border: 1px solid #5a2b32; border-radius: 10px;
  padding: 0.7rem 1.15rem; font-size: 16px; font-weight: 600;
  cursor: pointer;
  transition: background 160ms ease-out, border-color 160ms ease-out;
}
.mc-btn-danger:hover { background: #2a1619; border-color: #7a3a43; }
.mc-btn-danger:focus-visible { outline: 2px solid #f87171; outline-offset: 2px; }
.mc-btn-danger[disabled] { opacity: 0.55; cursor: default; }

.mc-danger-form {
  display: grid;
  gap: 0.9rem;
  max-width: 26rem;
  background: #1a1218;
  border: 1px solid #4a2530;
  border-radius: 12px;
  padding: 1.35rem;
}
/* The `hidden` attribute is only display:none at single-class specificity, so
   the rule above would beat it and leave the form on screen. */
.mc-danger-form[hidden] { display: none; }

.mc-danger-form label { color: #e6e7ee; font-size: 16px; font-weight: 600; }
.mc-danger-form input {
  width: 100%; box-sizing: border-box;
  background: #120e13; border: 1px solid #3d2932; border-radius: 8px;
  color: #f4f4f6; font-size: 16px; padding: 0.65rem 0.8rem;
}
.mc-danger-form input:focus-visible {
  outline: 2px solid #f87171; outline-offset: 1px; border-color: #7a3a43;
}
.mc-danger-hint { color: #9aa0b0; font-size: 14px; margin: 0; }
.mc-danger-error { color: #f87171; font-size: 16px; margin: 0; }
.mc-danger-error[hidden] { display: none; }
.mc-danger-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.mc-danger-actions .mc-btn { font-size: 16px; }

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