@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;600;700;800;900&family=Rajdhani:wght@400;500;600;700&family=Space+Mono:wght@400;700&display=swap');

:root {
    --bg:           #09090f;
    --bg-2:         #0d0d16;
    --panel:        #0f0f1a;
    --panel-2:      #14141f;
    --panel-3:      #1a1a28;

    --gold:         #f6c90e;
    --gold-2:       #e8b800;
    --gold-dim:     rgba(246,201,14,0.12);
    --gold-glow:    rgba(246,201,14,0.35);
    --gold-faint:   rgba(246,201,14,0.06);

    --navy:         #1a2040;
    --navy-2:       #151830;

    --line:         rgba(246,201,14,0.10);
    --line-2:       rgba(246,201,14,0.22);
    --line-dim:     rgba(255,255,255,0.05);

    --text:         #e8e8f0;
    --text-dim:     #8888a8;
    --text-faint:   #555570;
    --white:        #ffffff;

    --ok:           #3ddc97;
    --danger:       #e53e3e;
    --warn:         #f6c90e;

    --radius:       12px;
    --radius-sm:    8px;
    --radius-xs:    5px;

    --font-display: 'Orbitron', sans-serif;
    --font-head:    'Rajdhani', sans-serif;
    --font-body:    'Rajdhani', sans-serif;
    --font-mono:    'Space Mono', monospace;

    --shadow-gold:  0 0 30px rgba(246,201,14,0.12);
    --shadow-card:  0 20px 60px -20px rgba(0,0,0,0.8);
    --glow-sm:      0 0 14px rgba(246,201,14,0.2);
}

*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);min-height:100%}
::selection{background:var(--gold);color:#09090f}

/* ─── BACKGROUND SYSTEM ──────────────────────────────────────── */
.b-body {
    font-family: var(--font-body);
    font-size: 15px;
    color: var(--text);
    line-height: 1.6;
    min-height: 100vh;
    background:
        radial-gradient(ellipse 70% 50% at 50% -10%, rgba(246,201,14,0.05) 0%, transparent 70%),
        radial-gradient(ellipse 40% 30% at 90% 20%, rgba(26,32,64,0.8) 0%, transparent 60%),
        linear-gradient(180deg, #09090f 0%, #0b0b14 100%);
}

/* circuit grid overlay */
.b-bg {
    position: fixed; inset: 0; z-index: 0; pointer-events: none;
    background-image:
        linear-gradient(rgba(246,201,14,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(246,201,14,0.03) 1px, transparent 1px);
    background-size: 40px 40px;
    mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
    -webkit-mask-image: radial-gradient(ellipse 90% 70% at 50% 0%, #000 20%, transparent 75%);
}

a{color:inherit;text-decoration:none}
.b-link{color:var(--gold);text-decoration:underline}
code{font-family:var(--font-mono);font-size:.85em;background:var(--gold-faint);padding:1px 7px;border-radius:4px;color:var(--gold)}
.b-mono{font-family:var(--font-mono);font-size:.84em;color:var(--text-dim)}

/* ─── TOPBAR ─────────────────────────────────────────────────── */
.b-topbar {
    position: sticky; top: 0; z-index: 20;
    background: rgba(9,9,15,0.92);
    backdrop-filter: blur(20px) saturate(180%);
    border-bottom: 1px solid var(--line);
    box-shadow: 0 1px 0 rgba(246,201,14,0.06), 0 4px 20px rgba(0,0,0,0.4);
}
.b-topbar-inner {
    max-width: 1400px; margin: 0 auto;
    padding: 10px 28px;
    display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.b-brand {display: flex; align-items: center; gap: 12px; text-decoration: none}
.b-brand-mark {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    border-radius: 50%; overflow: hidden; flex-shrink: 0;
    box-shadow: 0 0 0 1px var(--line-2), var(--glow-sm);
}
.b-brand-mark img {width: 100%; height: 100%; object-fit: cover; display: block}
.b-brand-mark-sm{width:28px;height:28px}
.b-brand-text {display: flex; flex-direction: column; line-height: 1.1}
.b-brand-name {
    font-family: var(--font-display);
    font-weight: 700; font-size: .78rem;
    letter-spacing: .12em; text-transform: uppercase;
    color: var(--gold);
    text-shadow: 0 0 20px var(--gold-glow);
}
.b-brand-name-sm{font-family:var(--font-display);font-weight:700;font-size:.7rem;letter-spacing:.1em;color:var(--gold)}
.b-brand-sub {
    font-family: var(--font-head);
    font-weight: 500; font-size: .65rem;
    letter-spacing: .28em; text-transform: uppercase;
    color: var(--text-faint); margin-top: 1px;
}
.b-user {display: flex; align-items: center; gap: 10px}
.b-user-email {font-size: .84rem; color: var(--text-dim); font-family: var(--font-head)}
.b-logout-form {margin: 0}

/* ─── LAYOUT ─────────────────────────────────────────────────── */
.b-shell{max-width:1400px;margin:0 auto;display:grid;grid-template-columns:220px 1fr;position:relative;z-index:2}

.b-sidebar {
    position: sticky; top: 58px;
    height: calc(100vh - 58px);
    padding: 20px 12px;
    border-right: 1px solid var(--line);
    overflow-y: auto;
    display: flex; flex-direction: column; gap: 2px;
    background: linear-gradient(180deg, rgba(15,15,26,0.5) 0%, transparent 100%);
}
.b-nav{display:flex;flex-direction:column;gap:2px;margin-bottom:2px}
.b-nav-section {
    font-family: var(--font-display);
    font-weight: 600; font-size: .55rem;
    letter-spacing: .22em; text-transform: uppercase;
    color: var(--text-faint);
    padding: 16px 10px 6px;
}
.b-nav-link {
    display: block; padding: 9px 12px;
    border-radius: var(--radius-sm);
    font-family: var(--font-head);
    font-weight: 600; font-size: .94rem;
    color: var(--text-dim);
    transition: all .18s;
    border: 1px solid transparent;
    position: relative;
}
.b-nav-link:hover {
    background: var(--gold-faint);
    color: var(--gold);
    border-color: var(--line);
}
.b-nav-link.is-active {
    background: var(--gold-dim);
    color: var(--gold);
    border-color: var(--line-2);
    text-shadow: 0 0 12px var(--gold-glow);
}
.b-nav-link.is-active::before {
    content: '';
    position: absolute; left: -1px; top: 20%; bottom: 20%;
    width: 2px;
    background: var(--gold);
    border-radius: 0 2px 2px 0;
    box-shadow: 0 0 8px var(--gold-glow);
}

.b-main{padding:32px 36px;min-width:0;position:relative;z-index:2}
.b-main-centered{display:flex;align-items:center;justify-content:center;min-height:calc(100vh - 140px);padding:40px 24px}

/* ─── FOOTER ─────────────────────────────────────────────────── */
.b-footer{border-top:1px solid var(--line);margin-top:48px;padding:20px 28px;position:relative;z-index:2}
.b-footer-inner{max-width:1400px;margin:0 auto;display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;font-size:.82rem;color:var(--text-faint)}
.b-footer-nav{display:flex;gap:18px}
.b-footer-nav a{color:var(--text-faint);transition:.15s}
.b-footer-nav a:hover{color:var(--gold)}

/* ─── PAGE ───────────────────────────────────────────────────── */
.b-page{display:flex;flex-direction:column;gap:24px;max-width:1100px}
.b-page-head {
    display: flex; justify-content: space-between; align-items: flex-end;
    gap: 18px; flex-wrap: wrap;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--line);
}
.b-eyebrow {
    font-family: var(--font-display);
    font-weight: 600; font-size: .58rem;
    letter-spacing: .24em; text-transform: uppercase;
    color: var(--gold); display: block; margin-bottom: 8px;
    text-shadow: 0 0 14px var(--gold-glow);
}
.b-page-head h1 {
    font-family: var(--font-display);
    font-weight: 700; font-size: clamp(1.3rem, 2vw, 1.8rem);
    color: var(--white); line-height: 1.1;
    letter-spacing: .04em;
}
.b-page-meta{color:var(--text-dim);font-size:.92rem;margin-top:6px;font-family:var(--font-head)}

/* ─── ALERTS ─────────────────────────────────────────────────── */
.b-alert{padding:13px 18px;border-radius:var(--radius-sm);font-size:.92rem;border:1px solid;line-height:1.5;font-family:var(--font-head)}
.b-alert-success{background:rgba(61,220,151,.06);border-color:rgba(61,220,151,.3);color:#8fefc1}
.b-alert-error{background:rgba(229,62,62,.06);border-color:rgba(229,62,62,.3);color:#ff9a9a}
.b-alert-warn{background:rgba(246,201,14,.06);border-color:rgba(246,201,14,.3);color:var(--gold)}

/* ─── BUTTONS ────────────────────────────────────────────────── */
.b-btn {
    display: inline-flex; align-items: center; justify-content: center;
    gap: 7px; font-family: var(--font-head);
    font-weight: 700; font-size: .9rem;
    letter-spacing: .06em; text-transform: uppercase;
    padding: 9px 20px; border-radius: var(--radius-sm);
    border: 1px solid transparent; cursor: pointer;
    transition: all .18s; white-space: nowrap; text-decoration: none;
}
.b-btn-primary {
    color: #09090f;
    background: linear-gradient(135deg, #f6c90e 0%, #e8b800 100%);
    border-color: var(--gold-2);
    box-shadow: 0 4px 20px -6px var(--gold-glow), inset 0 1px 0 rgba(255,255,255,0.2);
}
.b-btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 28px -6px var(--gold-glow);
    background: linear-gradient(135deg, #ffd428 0%, #f6c90e 100%);
}
.b-btn-ghost {
    color: var(--text-dim);
    background: rgba(255,255,255,0.02);
    border-color: var(--line);
}
.b-btn-ghost:hover {
    border-color: var(--line-2);
    background: var(--gold-faint);
    color: var(--gold);
}
.b-btn-danger{color:#ff9a9a;background:rgba(229,62,62,.08);border-color:rgba(229,62,62,.35)}
.b-btn-danger:hover{background:rgba(229,62,62,.16);color:#fff}
.b-btn-danger-ghost{color:var(--text-faint);background:none;border:none;padding:8px 12px}
.b-btn-danger-ghost:hover{color:var(--danger)}
.b-btn-sm{padding:6px 14px;font-size:.8rem}
.b-btn-block{width:100%;justify-content:center}
.b-inline-form{margin:0;display:inline}

/* ─── CARDS ──────────────────────────────────────────────────── */
.b-card {
    background: linear-gradient(140deg, rgba(20,20,31,0.9) 0%, rgba(15,15,26,0.95) 100%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 24px;
    display: flex; flex-direction: column; gap: 16px;
    box-shadow: var(--shadow-card);
    position: relative; overflow: hidden;
}
.b-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.b-card h2{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1rem;letter-spacing:.06em}
.b-card h3{font-family:var(--font-head);font-weight:600;color:var(--text);font-size:1rem}
.b-card-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.b-card-danger{border-color:rgba(229,62,62,.25);background:rgba(229,62,62,.03)}
.b-card-warn{border-color:rgba(246,201,14,.2);background:rgba(246,201,14,.03)}
.b-empty-card{text-align:center;padding:40px;color:var(--text-dim)}

/* ─── STATS ──────────────────────────────────────────────────── */
.b-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.b-stat {
    background: linear-gradient(140deg, rgba(20,20,31,0.9), rgba(15,15,26,0.95));
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: 20px;
    position: relative; overflow: hidden;
}
.b-stat::after {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold-dim), transparent);
}
.b-stat-label {
    font-family: var(--font-display);
    font-weight: 600; font-size: .58rem;
    letter-spacing: .18em; text-transform: uppercase;
    color: var(--text-faint); margin-bottom: 10px;
}
.b-stat-value{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--white)}

/* ─── TABLE / ROWS ───────────────────────────────────────────── */
.b-table{display:flex;flex-direction:column;border-radius:var(--radius-sm);border:1px solid var(--line);overflow:hidden}
.b-row{display:flex;align-items:center;gap:12px;padding:13px 18px;border-bottom:1px solid var(--line-dim);transition:.15s;color:var(--text)}
.b-row:last-child{border-bottom:0}
.b-row:hover{background:var(--gold-faint);color:var(--white)}
.b-row-main{flex:1;font-family:var(--font-head);font-weight:500}
.b-row-side{font-size:.84rem;color:var(--text-dim);font-family:var(--font-head)}
.b-empty-line{color:var(--text-dim);padding:10px 0;font-size:.92rem}

/* ─── PILLS ──────────────────────────────────────────────────── */
.b-pill{display:inline-flex;align-items:center;font-family:var(--font-display);font-weight:600;font-size:.6rem;letter-spacing:.08em;text-transform:uppercase;padding:3px 10px;border-radius:100px;white-space:nowrap}
.b-pill-active,.b-pill-trialing,.b-pill-succeeded,.b-pill-paid,.b-pill-ok{background:rgba(61,220,151,.1);color:#8fefc1;border:1px solid rgba(61,220,151,.3)}
.b-pill-open,.b-pill-incomplete,.b-pill-processing,.b-pill-warn{background:rgba(246,201,14,.1);color:var(--gold);border:1px solid rgba(246,201,14,.3)}
.b-pill-canceled,.b-pill-past_due,.b-pill-unpaid,.b-pill-void,.b-pill-requires_payment_method{background:rgba(229,62,62,.1);color:#ff9a9a;border:1px solid rgba(229,62,62,.3)}
.b-pill-draft,.b-pill-uncollectible{background:rgba(255,255,255,.05);color:var(--text-dim);border:1px solid var(--line)}
.b-text-warn{color:var(--warn)}

/* ─── SESSIONS ───────────────────────────────────────────────── */
.b-sessions{display:flex;flex-direction:column;gap:10px}
.b-session{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:14px 18px;background:rgba(15,15,26,0.6);border:1px solid var(--line);border-radius:var(--radius-sm)}
.b-session.is-current{border-color:var(--line-2)}
.b-session-info{flex:1;min-width:0}
.b-session-device{font-family:var(--font-head);font-weight:600;color:var(--white);display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:4px}
.b-session-meta{font-size:.82rem;color:var(--text-faint)}
.b-session-actions{display:flex;gap:6px;flex-shrink:0}

/* ─── GRID / TABLES ──────────────────────────────────────────── */
.b-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.b-detail-table{width:100%;border-collapse:collapse;font-size:.92rem}
.b-detail-table th,.b-detail-table td{padding:10px 0;border-bottom:1px solid var(--line-dim);vertical-align:top;text-align:left}
.b-detail-table th{color:var(--text-faint);width:150px;font-family:var(--font-display);font-weight:600;font-size:.7rem;letter-spacing:.08em;text-transform:uppercase;padding-right:16px}
.b-detail-table tr:last-child th,.b-detail-table tr:last-child td{border-bottom:0}

/* ─── FORMS ──────────────────────────────────────────────────── */
.b-form{display:flex;flex-direction:column;gap:16px}
.b-field{display:flex;flex-direction:column;gap:6px}
.b-field label{font-family:var(--font-display);font-weight:600;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-dim)}
.b-field label small{font-size:.8em;letter-spacing:.04em;text-transform:none;font-weight:400;color:var(--text-faint);margin-left:6px}
.b-field input,.b-field textarea,.b-field select{
    font-family:var(--font-body);font-size:.96rem;color:var(--text);
    background:rgba(9,9,15,0.8);
    border:1px solid var(--line);
    border-radius:var(--radius-sm);
    padding:10px 14px;
    transition:border-color .2s,box-shadow .2s;width:100%;
}
.b-field input:focus,.b-field textarea:focus,.b-field select:focus{
    outline:0;border-color:rgba(246,201,14,0.5);
    box-shadow:0 0 0 3px rgba(246,201,14,0.1);
}
.b-field input[disabled]{opacity:.5;cursor:not-allowed}
.b-field-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.b-form-actions{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:4px}
.b-check{display:flex;align-items:flex-start;gap:10px;cursor:pointer;font-size:.92rem;color:var(--text-dim);line-height:1.5}
.b-check input{accent-color:var(--gold);width:16px;height:16px;flex-shrink:0;margin-top:2px}
.b-check a{color:var(--gold)}
.b-check-large{padding:8px 0;font-size:.95rem;color:var(--text)}
.b-list{padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--text-dim);font-size:.92rem}
.b-list li{line-height:1.5}

/* ─── AUTH CARDS ─────────────────────────────────────────────── */
.b-auth{width:100%;display:flex;align-items:center;justify-content:center;padding:40px 16px}
.b-auth-card {
    width: 100%; max-width: 420px;
    background: linear-gradient(160deg, rgba(20,20,31,0.95) 0%, rgba(12,12,20,0.98) 100%);
    border: 1px solid var(--line-2);
    border-radius: var(--radius);
    padding: 36px;
    box-shadow: 0 40px 90px -40px rgba(0,0,0,0.95), var(--shadow-gold);
    display: flex; flex-direction: column; gap: 16px;
    position: relative; overflow: hidden;
}
.b-auth-card::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; height: 2px;
    background: linear-gradient(90deg, transparent, var(--gold), transparent);
}
.b-auth-card h1{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1.4rem;letter-spacing:.06em}
.b-auth-sub{color:var(--text-dim);font-size:.92rem;font-family:var(--font-head)}
.b-auth-sep{text-align:center;position:relative;color:var(--text-faint);font-size:.8rem}
.b-auth-sep::before,.b-auth-sep::after{content:'';position:absolute;top:50%;width:40%;height:1px;background:var(--line)}
.b-auth-sep::before{left:0}.b-auth-sep::after{right:0}
.b-auth-sep span{background:rgba(12,12,20,.98);padding:0 10px;position:relative}
.b-auth-foot{font-size:.84rem;color:var(--text-faint);text-align:center}
.b-auth-foot a{color:var(--gold)}

/* ─── TABS ───────────────────────────────────────────────────── */
.b-tabs{display:flex;border-bottom:1px solid var(--line);margin-bottom:4px}
.b-tab{padding:9px 18px;font-family:var(--font-display);font-weight:600;font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:.15s;margin-bottom:-1px}
.b-tab.is-active{color:var(--gold);border-bottom-color:var(--gold);text-shadow:0 0 10px var(--gold-glow)}

/* ─── RECOVERY ───────────────────────────────────────────────── */
.b-recovery{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:8px 0}
.b-recovery code{display:block;text-align:center;background:rgba(9,9,15,0.8);border:1px solid var(--line);border-radius:var(--radius-sm);padding:8px;font-size:.9rem;letter-spacing:.08em;color:var(--gold)}
.b-totp-setup{display:flex;gap:20px;align-items:flex-start;flex-wrap:wrap}
.b-totp-setup img{border-radius:10px;background:#fff;padding:8px;flex-shrink:0}
.b-totp-secret{display:block;word-break:break-all;font-size:.9rem;line-height:1.7;background:rgba(9,9,15,0.8);border:1px solid var(--line);border-radius:var(--radius-sm);padding:12px;margin-top:8px;font-family:var(--font-mono);color:var(--gold)}

/* ─── CHECKOUT ───────────────────────────────────────────────── */
.b-checkout-wrapper{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;padding:32px 16px}
.b-checkout-box{display:grid;grid-template-columns:1fr 1fr;max-width:860px;width:100%;background:linear-gradient(140deg,rgba(20,20,31,0.95),rgba(12,12,20,0.98));border:1px solid var(--line-2);border-radius:var(--radius);box-shadow:var(--shadow-card),var(--shadow-gold);overflow:hidden}
.b-checkout-summary{padding:40px 32px;background:linear-gradient(160deg,rgba(246,201,14,0.06),rgba(26,32,64,0.4));border-right:1px solid var(--line);display:flex;flex-direction:column;gap:12px}
.b-checkout-brand{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.b-checkout-amount{font-family:var(--font-display);font-weight:800;font-size:2.2rem;color:var(--white);line-height:1}
.b-checkout-desc{font-size:1rem;color:var(--text);margin-top:4px;font-family:var(--font-head)}
.b-checkout-meta{font-size:.82rem;color:var(--text-faint);margin-top:2px;font-family:var(--font-head)}
.b-checkout-form{padding:40px 32px;display:flex;flex-direction:column;gap:14px}
.b-checkout-secure{font-size:.75rem;color:var(--text-faint);text-align:center;margin-top:8px;font-family:var(--font-head)}
.b-checkout-card{max-width:540px;margin:0 auto;width:100%}
.b-checkout-confirm{text-align:center}
.b-checkout-check{font-size:3rem;width:80px;height:80px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:rgba(61,220,151,.1);color:#3ddc97;border:2px solid rgba(61,220,151,.4);margin:0 auto 8px}
.b-checkout-check-pending{background:rgba(246,201,14,.1);color:var(--gold);border-color:rgba(246,201,14,.4)}
.b-loading{color:var(--text-faint);font-size:.92rem;padding:24px 0;text-align:center;font-family:var(--font-head)}

.b-passkey-status{margin-top:8px}
#passkey-status{display:block}

/* ─── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:940px){
    .b-shell{grid-template-columns:1fr}
    .b-sidebar{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line);flex-direction:row;flex-wrap:wrap;padding:12px;gap:0}
    .b-nav{flex-direction:row;flex-wrap:wrap}
    .b-nav-link{padding:6px 10px;font-size:.84rem}
    .b-main{padding:20px 16px}
    .b-stats{grid-template-columns:1fr}
    .b-grid-2{grid-template-columns:1fr}
    .b-checkout-box{grid-template-columns:1fr}
    .b-checkout-summary{border-right:0;border-bottom:1px solid var(--line);padding:24px}
    .b-checkout-form{padding:24px}
    .b-field-row{grid-template-columns:1fr}
    .b-recovery{grid-template-columns:repeat(2,1fr)}
}

/* ─── MISC ───────────────────────────────────────────────────── */
.b-checkout-fields-title{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1rem;margin-bottom:4px;letter-spacing:.06em}
.b-checkout-fields-intro{color:var(--text-dim);font-size:.9rem;margin-bottom:6px;font-family:var(--font-head)}
.b-field-hint{font-size:.78rem;color:var(--text-faint);margin-top:3px;line-height:1.5;display:block}
.b-field-error{font-size:.8rem;color:#ff9a9a;margin-top:3px;display:block}
.b-checkout-fields-summary{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:8px}
.b-checkout-field-row{display:flex;flex-direction:column;gap:2px}
.b-checkout-field-label{font-family:var(--font-display);font-weight:600;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint)}
.b-checkout-field-val{font-family:var(--font-mono);font-size:.84rem;color:var(--gold)}

[hidden]{display:none!important}
.b-btn:disabled{opacity:.4;cursor:not-allowed;pointer-events:none}

.b-add-pm-layout{display:grid;grid-template-columns:1fr 320px;gap:20px;align-items:start}
.b-add-pm-info{display:flex;flex-direction:column;gap:16px}
.b-pm-types{display:flex;flex-direction:column;gap:10px}
.b-pm-type{display:flex;align-items:center;gap:10px;font-size:.92rem;color:var(--text-dim)}
.b-secure-badge{display:flex;align-items:center;gap:7px;font-size:.78rem;color:var(--text-faint)}
.b-auth-icon{width:64px;height:64px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto;border:1px solid}
.b-auth-icon-warn{background:rgba(246,201,14,.1);border-color:rgba(246,201,14,.4);color:var(--gold)}
.b-auth-features{background:rgba(9,9,15,0.6);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 18px;width:100%}
.b-auth-features .b-auth-feature-label{font-family:var(--font-display);font-weight:600;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.b-auth-features ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.b-auth-features li{font-size:.88rem;color:var(--text-dim);padding-left:16px;position:relative}
.b-auth-features li::before{content:'—';position:absolute;left:0;color:var(--gold-dim)}

.b-onboarding{min-height:calc(100vh - 140px);display:flex;align-items:center;justify-content:center;padding:40px 24px}
.b-onboarding-card{width:100%;max-width:540px;display:flex;flex-direction:column;gap:24px}
.b-onboarding-head h1{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1.5rem;margin-bottom:6px;letter-spacing:.06em}
.b-onboarding-head p{color:var(--text-dim);font-size:.95rem;font-family:var(--font-head)}
.b-onboarding-progress{display:flex;align-items:center;gap:0;margin-bottom:8px}
.b-onboarding-step{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;font-size:.7rem;flex-shrink:0;border:2px solid var(--line);color:var(--text-faint);transition:.2s}
.b-onboarding-step.is-active{border-color:var(--gold);background:var(--gold-dim);color:var(--white);box-shadow:0 0 10px var(--gold-glow)}
.b-onboarding-step.is-done{border-color:var(--ok);background:rgba(61,220,151,.12);color:var(--ok)}
.b-onboarding-line{flex:1;height:2px;background:var(--line);transition:.2s}
.b-onboarding-line.is-done{background:rgba(61,220,151,.4)}

.b-locked-state{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:60px 30px;gap:18px;border:1px dashed var(--line);border-radius:var(--radius)}
.b-locked-icon{color:var(--text-faint);opacity:.7}
.b-locked-state h2{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1.3rem;letter-spacing:.06em}
.b-locked-state p{color:var(--text-dim);max-width:360px;line-height:1.65;font-family:var(--font-head)}

.b-alert-banner{border-radius:0;border-left:0;border-right:0;border-top:0}
.b-empty-state{padding:28px 0;text-align:center;color:var(--text-dim);font-size:.92rem;font-family:var(--font-head)}
.b-field-has-error input,.b-field-has-error textarea{border-color:rgba(229,62,62,.5)}
.b-row-nolink{color:var(--text)}

/* ─── INVOICE ────────────────────────────────────────────────── */
.b-invoice-doc{gap:28px}
.b-invoice-header{display:flex;justify-content:space-between;align-items:flex-start;padding-bottom:24px;border-bottom:1px solid var(--line)}
.b-invoice-brand{display:flex;align-items:center;gap:14px}
.b-invoice-brand-name{font-family:var(--font-display);font-weight:700;color:var(--white);font-size:1rem;letter-spacing:.08em}
.b-invoice-brand-sub{font-family:var(--font-head);font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:.68rem;color:var(--text-faint);margin-top:3px}
.b-invoice-meta{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.b-invoice-number{font-family:var(--font-display);font-weight:700;font-size:1rem;color:var(--gold)}
.b-invoice-parties{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px;padding:20px 0;border-bottom:1px solid var(--line)}
.b-invoice-party-label{font-family:var(--font-display);font-weight:600;font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text-faint);margin-bottom:8px}
.b-invoice-party-name{font-weight:600;color:var(--white);font-size:.98rem;margin-bottom:4px;font-family:var(--font-head)}
.b-invoice-party-address{font-size:.88rem;color:var(--text-dim);line-height:1.6;margin-bottom:4px;font-family:var(--font-head)}
.b-invoice-party-vat{font-size:.84rem;color:var(--text-faint);margin-bottom:2px}
.b-invoice-party-meta{font-size:.84rem;color:var(--text-faint)}
.b-invoice-dates{display:flex;flex-direction:column;gap:8px}
.b-invoice-date-row{display:flex;flex-direction:column;gap:2px}
.b-invoice-date-row span{font-family:var(--font-display);font-weight:600;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint)}
.b-invoice-date-row strong{color:var(--white);font-size:.92rem;font-family:var(--font-head)}
.b-invoice-lines{width:100%;border-collapse:collapse;font-size:.92rem}
.b-invoice-lines th{font-family:var(--font-display);font-weight:600;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--text-faint);padding:10px 0;border-bottom:1px solid var(--line);text-align:left}
.b-invoice-lines td{padding:12px 0;border-bottom:1px solid var(--line-dim);color:var(--text);vertical-align:top;font-family:var(--font-head)}
.b-invoice-qty,.b-invoice-price,.b-invoice-amount{text-align:right;white-space:nowrap}
.b-invoice-lines th.b-invoice-qty,.b-invoice-lines th.b-invoice-price,.b-invoice-lines th.b-invoice-amount{text-align:right}
.b-invoice-subtotal td,.b-invoice-tax td{color:var(--text-dim);padding:8px 0}
.b-invoice-total td{padding:12px 0;color:var(--white);font-size:1rem;border-top:2px solid var(--line-2)}
.b-invoice-paid td{color:var(--ok);padding:6px 0;font-size:.88rem}
.b-invoice-due td{color:var(--white);padding:8px 0;font-size:1rem;border-top:1px solid var(--line)}
.b-invoice-notes{background:rgba(9,9,15,0.5);border:1px solid var(--line);border-radius:var(--radius-sm);padding:14px 16px}
.b-invoice-notes-label{font-family:var(--font-display);font-weight:600;font-size:.58rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-faint);margin-bottom:6px}
.b-invoice-notes p{font-size:.9rem;color:var(--text-dim);line-height:1.65;font-family:var(--font-head)}
.b-invoice-footer-note{font-size:.82rem;color:var(--text-faint);padding-top:8px;border-top:1px solid var(--line)}
.b-invoice-footer-note a{color:var(--gold)}
@media(max-width:860px){.b-add-pm-layout{grid-template-columns:1fr}.b-invoice-parties{grid-template-columns:1fr}}

.b-claim-wrong-email{padding-top:16px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:10px}
.b-claim-wrong-email p{font-size:.82rem;color:var(--text-faint)}
.b-claim-email-form .b-field label{font-size:.72rem}

.b-pay-tabs{display:flex;gap:0;border-bottom:1px solid var(--line);margin-bottom:16px}
.b-pay-tab{padding:9px 18px;font-family:var(--font-display);font-weight:600;font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--text-dim);background:none;border:none;border-bottom:2px solid transparent;cursor:pointer;transition:.15s;margin-bottom:-1px}
.b-pay-tab:hover{color:var(--gold)}
.b-pay-tab.is-active{color:var(--gold);border-bottom-color:var(--gold)}
.b-invoice-due-amount{font-family:var(--font-display);font-weight:800;font-size:1.3rem;color:var(--white)}

.b-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:60vh;padding:40px 24px;gap:16px}
.b-empty h1{font-family:var(--font-display);font-size:5rem;font-weight:900;color:var(--line-2);letter-spacing:-.03em;line-height:1;margin-bottom:0}
.b-empty p{font-size:1rem;color:var(--text-dim);max-width:340px;line-height:1.65;font-family:var(--font-head)}

/* checkout interval label */
.co-summary-interval{font-family:var(--font-display);font-size:.62rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);margin-top:2px}