/* ================================================================
   VELANTHOR — Auth Overlay Styles
   Extracted from inline <style> for caching & performance
   ================================================================ */

/* ══════════════════════════════════════════════════
   MIDNIGHT BLUE — Design System Tokens
   ══════════════════════════════════════════════════ */
   :root {
    --mb-bg0:        #04060f;   /* deepest dark */
    --mb-bg1:        #070c1a;   /* card bg */
    --mb-bg2:        #0a1228;   /* input bg */
    --mb-bg3:        #0e1a36;   /* subtle panels */
    --mb-border:     #1a2a50;   /* default border */
    --mb-border-hi:  #2a3f6e;   /* hover border */
    --mb-blue:       #3b82f6;   /* electric blue */
    --mb-blue-hi:    #60a5fa;   /* lighter blue */
    --mb-blue-glow:  rgba(59,130,246,0.18);
    --mb-white:      #e8efff;   /* soft white */
    --mb-white-dim:  #8899bb;   /* dimmed text */
    --mb-mute:       #2a3a5a;   /* muted text */
    --mb-err:        #f43f5e;
  }
  
  #auth-overlay {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 99999;
    backdrop-filter: blur(22px) saturate(0.25);
    -webkit-backdrop-filter: blur(22px) saturate(0.25);
    background: rgba(4,6,15,0.92);
    transition: opacity 0.4s ease;
  }
  #auth-overlay.hidden {
    opacity: 0;
    pointer-events: none;
  }
  
  /* ── Card ── */
  #auth-card {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 420px;
    max-width: calc(100vw - 24px);
    background: var(--mb-bg1);
    border: 1px solid var(--mb-border);
    border-radius: 14px;
    overflow: hidden;
    box-shadow:
      0 60px 140px rgba(0,0,0,.9),
      0 0 0 1px rgba(59,130,246,.06),
      0 0 60px rgba(59,130,246,.05);
    animation: authCardRise .5s cubic-bezier(.16,1,.3,1) both;
  }
  #auth-card.payment-mode {
    width: 520px;
    max-width: calc(100vw - 24px);
  }
  @keyframes authCardRise {
    from { opacity:0; transform: translate(-50%,-46%) scale(.95); }
    to   { opacity:1; transform: translate(-50%,-50%) scale(1); }
  }
  
  #auth-card-top {
    height: 2px;
    background: linear-gradient(90deg, transparent 0%, var(--mb-blue) 30%, var(--mb-blue-hi) 50%, var(--mb-blue) 70%, transparent 100%);
    background-size: 200% 100%;
    animation: authShift 5s linear infinite;
  }
  @keyframes authShift { to { background-position: 200% 0; } }
  
  #auth-card-body {
    padding: 36px 32px 32px;
    background: var(--mb-bg1);
    /* subtle noise grain overlay */
    position: relative;
  }
  #auth-card-body::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% -20%, rgba(59,130,246,0.07) 0%, transparent 65%);
    pointer-events: none;
  }
  
  .auth-logo-wrap { text-align: center; margin-bottom: 6px; position: relative; z-index: 1; }
  .auth-logo {
    font-family: 'Orbitron', sans-serif;
    font-size: 22px; font-weight: 900;
    letter-spacing: 8px; color: var(--mb-white);
    position: relative; display: inline-block;
    text-shadow: 0 0 30px rgba(59,130,246,.35);
  }
  .auth-logo-accent { color: var(--mb-blue-hi); }
  
  .auth-status {
    display: flex; align-items: center; justify-content: center;
    gap: 7px; font-family: 'Share Tech Mono', monospace;
    font-size: 9px; letter-spacing: 2.5px; color: var(--mb-blue-hi);
    text-transform: uppercase; margin: 8px 0 24px;
    position: relative; z-index: 1;
  }
  .auth-status-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: var(--mb-blue); animation: authPulse 2s infinite;
    box-shadow: 0 0 8px var(--mb-blue);
  }
  @keyframes authPulse { 0%,100%{opacity:1} 50%{opacity:.25} }
  
  /* Tabs */
  .auth-tabs {
    display: flex; gap: 4px;
    background: var(--mb-bg0);
    border-radius: 8px; padding: 4px; margin-bottom: 24px;
    border: 1px solid var(--mb-border);
    position: relative; z-index: 1;
  }
  .auth-tab {
    flex: 1; text-align: center; padding: 9px;
    border-radius: 6px; cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--mb-mute); transition: all .2s; border: none; background: transparent;
  }
  .auth-tab.active {
    background: var(--mb-bg3);
    color: var(--mb-blue-hi);
    border: 1px solid var(--mb-border-hi);
    box-shadow: inset 0 1px 0 rgba(59,130,246,0.1);
  }
  
  /* Panels */
  .auth-panel { display: none; animation: authFadeSlide .25s ease both; position: relative; z-index: 1; }
  .auth-panel.active { display: block; }
  @keyframes authFadeSlide {
    from { opacity:0; transform: translateY(7px); }
    to   { opacity:1; transform: translateY(0); }
  }
  
  /* Fields */
  .auth-field { margin-bottom: 14px; }
  .auth-label {
    display: block; font-family: 'Share Tech Mono', monospace;
    font-size: 9px; letter-spacing: 2px; text-transform: uppercase;
    color: var(--mb-mute); margin-bottom: 6px;
  }
  .auth-input-wrap { position: relative; }
  .auth-input {
    width: 100%;
    background: var(--mb-bg2);
    border: 1px solid var(--mb-border);
    border-radius: 8px;
    color: var(--mb-white);
    font-family: 'Share Tech Mono', monospace; font-size: 13px;
    padding: 11px 40px 11px 14px; outline: none;
    transition: border-color .15s, box-shadow .15s;
    box-sizing: border-box;
  }
  .auth-input::placeholder { color: var(--mb-mute); }
  .auth-input:focus {
    border-color: var(--mb-blue);
    box-shadow: 0 0 0 3px rgba(59,130,246,.1);
  }
  .auth-input.err { border-color: var(--mb-err) !important; box-shadow: 0 0 0 3px rgba(244,63,94,.08) !important; }
  .auth-input.ok  { border-color: rgba(59,130,246,.5); }
  
  .auth-eye {
    position: absolute; right: 12px; top: 50%; transform: translateY(-50%);
    background: none; border: none; color: var(--mb-mute); cursor: pointer;
    display: flex; align-items: center; padding: 0; transition: color .15s;
  }
  .auth-eye:hover { color: var(--mb-white-dim); }
  
  /* Alert */
  .auth-alert {
    border-radius: 8px; font-family: 'Share Tech Mono', monospace;
    font-size: 11px; padding: 10px 14px; margin-bottom: 12px;
    display: none; align-items: flex-start; gap: 8px;
    animation: authFadeIn .2s ease; line-height: 1.5;
  }
  @keyframes authFadeIn { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
  .auth-alert.show { display: flex; }
  .auth-alert.err { background: rgba(244,63,94,.08); border: 1px solid rgba(244,63,94,.25); color: var(--mb-err); }
  .auth-alert.suc { background: rgba(59,130,246,.07); border: 1px solid rgba(59,130,246,.2); color: var(--mb-blue-hi); }
  
  /* Primary button */
  .auth-btn-primary {
    width: 100%;
    background: var(--mb-blue);
    color: #ffffff;
    border: none; border-radius: 9px;
    font-family: 'Orbitron', sans-serif; font-size: 10px;
    font-weight: 700; letter-spacing: 3px; text-transform: uppercase;
    padding: 14px; margin-top: 4px; cursor: pointer;
    transition: all .2s; position: relative; overflow: hidden;
    box-shadow: 0 4px 24px rgba(59,130,246,.3);
  }
  .auth-btn-primary:disabled { opacity: .35; cursor: not-allowed; box-shadow: none; }
  .auth-btn-primary:not(:disabled):hover {
    background: var(--mb-blue-hi);
    transform: translateY(-1px);
    box-shadow: 0 8px 32px rgba(59,130,246,.45);
  }
  .auth-btn-primary:not(:disabled):active { transform: translateY(0); }
  .auth-btn-primary::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(135deg,rgba(255,255,255,.15) 0%,transparent 60%);
    pointer-events: none;
  }
  .auth-btn-primary .auth-spinner {
    display: none; width: 14px; height: 14px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,.3); border-top-color: #fff;
    animation: authSpin .6s linear infinite; margin: 0 auto;
  }
  .auth-btn-primary.loading .auth-btn-text { display: none; }
  .auth-btn-primary.loading .auth-spinner { display: block; }
  @keyframes authSpin { to { transform: rotate(360deg); } }
  
  /* Ghost button */
  .auth-btn-ghost {
    width: 100%;
    background: var(--mb-bg2);
    color: var(--mb-mute);
    border: 1px solid var(--mb-border);
    border-radius: 9px;
    font-family: 'Orbitron', sans-serif; font-size: 10px;
    letter-spacing: 3px; text-transform: uppercase;
    padding: 14px; margin-top: 10px; cursor: pointer; transition: all .2s;
  }
  .auth-btn-ghost:hover {
    border-color: var(--mb-blue);
    color: var(--mb-blue-hi);
    background: rgba(59,130,246,.05);
  }
  
  /* Divider */
  .auth-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 16px 0 0; color: var(--mb-mute);
    font-family: 'Share Tech Mono', monospace; font-size: 8px; letter-spacing: 2px;
  }
  .auth-divider::before, .auth-divider::after {
    content: ''; flex: 1; height: 1px; background: var(--mb-border);
  }
  
  /* PW strength */
  .auth-pw-strength { margin-top: 6px; display: none; }
  .auth-pw-strength.show { display: block; }
  .auth-pw-bars { display: flex; gap: 3px; margin-bottom: 3px; }
  .auth-pw-bar { height: 3px; flex: 1; border-radius: 2px; background: var(--mb-border); transition: background .3s; }
  .auth-pw-bar.weak   { background: var(--mb-err); }
  .auth-pw-bar.medium { background: #f59e0b; }
  .auth-pw-bar.strong { background: var(--mb-blue); }
  .auth-pw-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 1px; color: var(--mb-mute); }
  
  /* Security badges */
  .auth-sec-badges {
    display: flex; justify-content: center; gap: 14px;
    flex-wrap: wrap; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid var(--mb-border);
    position: relative; z-index: 1;
  }
  .auth-sec-badge {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Share Tech Mono', monospace; font-size: 8px;
    letter-spacing: 1.5px; color: var(--mb-mute); text-transform: uppercase;
  }
  .auth-sec-badge svg { width: 11px; height: 11px; fill: none; stroke: var(--mb-border-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  
  /* pw confirm match */
  .auth-match { font-family:'Share Tech Mono',monospace; font-size:9px; margin-top:4px; }
  
  /* ══════════════════════════════════════════════════════
     PAYMENT PANEL — MIDNIGHT BLUE PREMIUM
     ══════════════════════════════════════════════════════ */
  
  .pw-header {
    text-align: center;
    margin-bottom: 28px;
    position: relative; z-index: 1;
  }
  .pw-eyebrow {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px; letter-spacing: 4px; text-transform: uppercase;
    color: var(--mb-blue); opacity: 0.7; margin-bottom: 8px;
  }
  .pw-headline {
    font-family: 'Orbitron', sans-serif;
    font-size: 18px; font-weight: 900; letter-spacing: 2px;
    color: var(--mb-white);
    line-height: 1.2;
  }
  .pw-headline span { color: var(--mb-blue-hi); }
  .pw-subline {
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px; letter-spacing: 1.5px; color: var(--mb-mute);
    margin-top: 6px;
  }
  
  /* Plan grid */
  .auth-plans {
    display: flex;
    gap: 10px;
    margin-bottom: 0;
    background: transparent;
    overflow: visible;
    position: relative; z-index: 1;
  }
  
  .auth-plan {
    flex: 1;
    display: flex;
    flex-direction: column;
    position: relative;
    cursor: pointer;
    border-radius: 12px;
    padding: 20px 14px 18px;
    background: var(--mb-bg2);
    border: 1px solid var(--mb-border);
    transition: all 0.3s cubic-bezier(0.16,1,.3,1);
    overflow: hidden;
  }
  .auth-plan::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 50% 0%, rgba(59,130,246,0.08) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.3s;
    pointer-events: none;
  }
  .auth-plan:hover {
    border-color: var(--mb-blue);
    transform: translateY(-2px);
    box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(59,130,246,.15), 0 0 30px rgba(59,130,246,.06);
  }
  .auth-plan:hover::before { opacity: 1; }
  
  .auth-plan.featured {
    background: linear-gradient(160deg, #0c1736 0%, #091228 100%);
    border-color: var(--mb-blue);
    box-shadow:
      0 0 0 1px rgba(59,130,246,.2),
      0 30px 80px rgba(0,0,0,.6),
      inset 0 1px 0 rgba(96,165,250,.12),
      0 0 40px rgba(59,130,246,.08);
  }
  .auth-plan.featured::before { opacity: 1; }
  
  /* Featured badge pill */
  .auth-plan-featured-pill {
    display: none;
    position: absolute;
    top: -1px; left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(90deg, var(--mb-blue), var(--mb-blue-hi));
    color: #fff;
    font-family: 'Share Tech Mono', monospace;
    font-size: 7px; letter-spacing: 2px; text-transform: uppercase;
    font-weight: 700;
    padding: 3px 12px;
    border-radius: 0 0 7px 7px;
    box-shadow: 0 4px 14px rgba(59,130,246,.4);
  }
  .auth-plan.featured .auth-plan-featured-pill { display: block; }
  
  .auth-plan-top { display: none; }
  
  .auth-plan-name {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px; font-weight: 400; letter-spacing: 3px;
    color: var(--mb-mute); text-transform: uppercase;
    margin-bottom: 10px; margin-top: 12px;
  }
  .auth-plan.featured .auth-plan-name { color: var(--mb-blue-hi); }
  
  .auth-plan-price {
    font-family: 'Orbitron', sans-serif;
    font-size: 28px; font-weight: 900;
    color: var(--mb-white); line-height: 1;
    margin-bottom: 3px;
    letter-spacing: -1px;
  }
  .auth-plan.featured .auth-plan-price {
    color: var(--mb-blue-hi);
    text-shadow: 0 0 20px rgba(59,130,246,.3);
  }
  
  .auth-plan-period {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px; letter-spacing: 1.5px;
    color: var(--mb-mute); text-transform: uppercase;
  }
  
  .auth-plan-badge {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px; letter-spacing: 1.5px;
    color: var(--mb-blue-hi); text-transform: uppercase;
    margin-top: 8px;
    background: rgba(59,130,246,0.08);
    padding: 3px 7px; border-radius: 4px;
    display: inline-block;
    border: 1px solid rgba(59,130,246,0.2);
  }
  
  /* Feature list */
  .auth-plan-features {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    border-top: 1px solid var(--mb-border);
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .auth-plan-features li {
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px; letter-spacing: 1px; color: var(--mb-mute);
    display: flex; align-items: center; gap: 6px;
  }
  .auth-plan.featured .auth-plan-features li { color: var(--mb-white-dim); }
  .auth-plan-features li::before {
    content: '—';
    color: var(--mb-border-hi);
    font-size: 9px; flex-shrink: 0;
  }
  .auth-plan.featured .auth-plan-features li::before { color: var(--mb-blue); }
  
  .auth-plan-btn {
    margin-top: auto;
    padding-top: 14px;
    padding-bottom: 0;
    background: transparent;
    border: none;
    cursor: pointer;
    text-align: left;
  }
  .auth-plan-btn-inner {
    width: 100%;
    display: block;
    padding: 10px 14px;
    border-radius: 7px;
    font-family: 'Orbitron', sans-serif;
    font-size: 8px; letter-spacing: 2.5px; text-transform: uppercase;
    font-weight: 700;
    text-align: center;
    transition: all 0.2s ease;
    border: 1px solid var(--mb-border);
    background: transparent;
    color: var(--mb-mute);
  }
  .auth-plan:hover .auth-plan-btn-inner {
    border-color: var(--mb-blue);
    color: var(--mb-blue-hi);
    background: rgba(59,130,246,.05);
  }
  .auth-plan.featured .auth-plan-btn-inner {
    background: var(--mb-blue);
    border-color: var(--mb-blue);
    color: #fff;
    box-shadow: 0 4px 20px rgba(59,130,246,.35);
  }
  .auth-plan.featured:hover .auth-plan-btn-inner {
    background: var(--mb-blue-hi);
    box-shadow: 0 6px 30px rgba(59,130,246,.5);
    transform: translateY(-1px);
  }
  
  /* Dev mode */
  .auth-dev-note {
    margin-top: 18px; padding: 11px 16px;
    background: rgba(59,130,246,0.03);
    border: 1px solid rgba(59,130,246,0.1);
    border-radius: 9px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 9px; letter-spacing: 1px; color: var(--mb-mute);
    display: flex; align-items: center; justify-content: space-between;
    gap: 10px;
    position: relative; z-index: 1;
  }
  .auth-dev-btn {
    background: transparent;
    border: 1px solid var(--mb-border-hi);
    color: var(--mb-white-dim);
    padding: 5px 14px; border-radius: 5px; cursor: pointer;
    font-family: 'Share Tech Mono', monospace;
    font-size: 8px; letter-spacing: 1.5px;
    text-transform: uppercase; transition: all 0.2s;
    white-space: nowrap; flex-shrink: 0;
  }
  .auth-dev-btn:hover {
    background: rgba(59,130,246,.07);
    border-color: var(--mb-blue);
    color: var(--mb-blue-hi);
  }
  
  /* Guarantee row */
  .pw-guarantee {
    display: flex; align-items: center; justify-content: center;
    gap: 20px; margin-top: 16px; flex-wrap: wrap;
    position: relative; z-index: 1;
  }
  .pw-guarantee-item {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Share Tech Mono', monospace;
    font-size: 7.5px; letter-spacing: 1.5px; color: var(--mb-mute);
    text-transform: uppercase;
  }
  .pw-guarantee-item svg {
    width: 10px; height: 10px;
    fill: none; stroke: var(--mb-border-hi);
    stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    flex-shrink: 0;
  }
  
  /* PW strength */
  .auth-pw-strength { margin-top: 6px; display: none; }
  .auth-pw-strength.show { display: block; }
  .auth-pw-bars { display: flex; gap: 3px; margin-bottom: 3px; }
  .auth-pw-bar { height: 3px; flex: 1; border-radius: 2px; background: #1a1a26; transition: background .3s; }
  .auth-pw-bar.weak   { background: #ff3b5c; }
  .auth-pw-bar.medium { background: #f5a623; }
  .auth-pw-bar.strong { background: var(--mb-blue); }
  .auth-pw-label { font-family: 'Share Tech Mono', monospace; font-size: 9px; letter-spacing: 1px; color: #3a3a52; }
  
  /* Sec badges */
  .auth-sec-badges {
    display: flex; justify-content: center; gap: 14px;
    flex-wrap: wrap; margin-top: 18px; padding-top: 14px;
    border-top: 1px solid #0a1a10;
  }
  .auth-sec-badge {
    display: flex; align-items: center; gap: 5px;
    font-family: 'Share Tech Mono', monospace; font-size: 8px;
    letter-spacing: 1.5px; color: var(--mb-mute); text-transform: uppercase;
  }
  .auth-sec-badge svg { width: 11px; height: 11px; fill: none; stroke: var(--mb-border-hi); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
  
  /* pw confirm match */
  .auth-match { font-family:'Share Tech Mono',monospace; font-size:9px; margin-top:4px; }
  
  /* ================================================================
     PERFORMANCE: Reduced Motion
     ================================================================ */
  @media (prefers-reduced-motion: reduce) {
    #auth-card-top,
    .auth-status-dot,
    .auth-btn-primary .auth-spinner,
    .auth-card {
      animation: none !important;
    }
    #auth-card-top {
      background: var(--mb-blue);
    }
  }