:root {
    --bg-primary:   #0d1117;
    --bg-secondary: #161b22;
    --bg-tertiary:  #21262d;
    --border:       #30363d;
    --text-primary: #e6edf3;
    --text-secondary:#8b949e;
    --text-muted:   #6e7681;
    --accent:       #58a6ff;
    --success:      #3fb950;
    --warning:      #d29922;
    --danger:       #f85149;
    --font-mono:    'SF Mono','Cascadia Code','Fira Code',monospace;
    --font-sans:    -apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}
* { box-sizing:border-box; margin:0; padding:0; }
body {
    background:var(--bg-primary); color:var(--text-primary);
    font-family:var(--font-sans); font-size:14px; line-height:1.5;
    min-height:100vh;
}
#loading-screen {
    display:flex; flex-direction:column; align-items:center;
    justify-content:center; height:100vh; gap:16px;
}
.spinner {
    width:32px; height:32px;
    border:3px solid var(--border);
    border-top-color:var(--accent);
    border-radius:50%;
    animation:spin .8s linear infinite;
}
@keyframes spin { to{transform:rotate(360deg)} }

/* ── Layout ── */
.app-layout { display:flex; min-height:100vh; }
.sidebar { width:240px; background:var(--bg-secondary); border-right:1px solid var(--border); display:flex; flex-direction:column; flex-shrink:0; }
.sidebar-header { padding:16px; font-weight:700; font-size:15px; border-bottom:1px solid var(--border); }
.sidebar-nav { flex:1; overflow-y:auto; padding:8px 0; }
.nav-section-title { padding:8px 16px 4px; font-size:11px; text-transform:uppercase; color:var(--text-muted); letter-spacing:.5px; }
.nav-item { display:flex; align-items:center; gap:8px; padding:8px 16px; color:var(--text-secondary); text-decoration:none; transition:background .15s; }
.nav-item:hover { background:var(--bg-tertiary); color:var(--text-primary); }
.nav-item.active { background:var(--bg-tertiary); color:var(--accent); border-left:3px solid var(--accent); }
.nav-icon { font-size:16px; width:20px; text-align:center; }
.sidebar-footer { padding:12px 16px; border-top:1px solid var(--border); }
.key-info { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:var(--text-muted); margin-bottom:8px; }
.key-rotate { cursor:pointer; color:var(--accent); }
.logout-btn { display:block; width:100%; text-align:left; padding:8px 0; border:none; background:none; color:var(--danger); cursor:pointer; font-size:13px; }
.main-content { flex:1; padding:24px 32px; overflow-y:auto; }

/* ── Page Header ── */
.page-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; }
.page-header h2 { margin:0; font-size:20px; }

/* ── Stat Grid ── */
.stat-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:16px; margin-bottom:24px; }
.stat-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:20px; text-align:center; }
.stat-value { font-size:28px; font-weight:700; color:var(--accent); margin-bottom:4px; font-family:var(--font-mono); }
.stat-label { font-size:13px; color:var(--text-secondary); }

/* ── Status Grid ── */
.status-grid { display:flex; gap:12px; margin-bottom:24px; }
.status-card { display:flex; align-items:center; gap:8px; padding:10px 16px; border-radius:6px; font-size:13px; font-weight:600; }
.status-ok { background:rgba(63,185,80,.12); color:var(--success); border:1px solid rgba(63,185,80,.25); }
.status-err { background:rgba(248,81,73,.12); color:var(--danger); border:1px solid rgba(248,81,73,.25); }
.status-dot { width:8px; height:8px; border-radius:50%; display:inline-block; }
.status-ok .status-dot { background:var(--success); }
.status-err .status-dot { background:var(--danger); }

/* ── Card ── */
.card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:8px; padding:20px; margin-bottom:16px; }
.card h3 { margin:0 0 12px; font-size:15px; }

/* ── Data Table ── */
.data-table { width:100%; border-collapse:collapse; }
.data-table th { text-align:left; padding:10px 12px; font-size:12px; text-transform:uppercase; color:var(--text-muted); border-bottom:1px solid var(--border); font-weight:600; }
.data-table td { padding:10px 12px; border-bottom:1px solid var(--border); font-size:13px; }
.data-table tr:hover td { background:var(--bg-tertiary); }
.action-cell { white-space:nowrap; }
.empty-cell { text-align:center; padding:32px !important; color:var(--text-muted); }

/* ── Search ── */
.search-bar { margin-bottom:12px; }
.search-bar input { width:100%; max-width:360px; padding:8px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg-tertiary); color:var(--text-primary); font-size:13px; outline:none; }
.search-bar input:focus { border-color:var(--accent); }

/* ── Buttons ── */
.btn { display:inline-flex; align-items:center; gap:4px; padding:6px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg-tertiary); color:var(--text-primary); cursor:pointer; font-size:12px; transition:background .15s; }
.btn:hover { background:var(--border); }
.btn-primary { background:var(--accent); color:#fff; border-color:var(--accent); }
/* Keep the fill on hover: plain `.btn:hover` sets a light background and, being
   a class+pseudo-class rule, outranks the single-class `.btn-primary`. */
.btn-primary:hover { background:var(--accent); border-color:var(--accent); filter:brightness(1.1); }
.btn-sm { padding:4px 8px; font-size:11px; }
.btn-danger { color:var(--danger); border-color:var(--danger); }
.btn-danger:hover { background:rgba(248,81,73,.15); }
.btn-ship { background:rgba(63,185,80,.12); color:var(--success); border-color:rgba(63,185,80,.25); }
.btn-ship:hover { background:rgba(63,185,80,.20); }
[data-theme="light"] .btn-ship { background:rgba(46,125,50,.08); border-color:rgba(46,125,50,.20); }
[data-theme="light"] .btn-ship:hover { background:rgba(46,125,50,.15); }
/* Closed application flow: the control stays visible but inert — no pointer
   affordance and no hover state, so it cannot be mistaken for active. */
.btn.is-disabled, .btn.is-disabled:hover {
    background: var(--bg-tertiary); border-color: var(--border); color: var(--text-muted);
    cursor: not-allowed;
}

/* ── Modal ── */
.modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,.6); display:flex; align-items:center; justify-content:center; z-index:1000; }
.modal { background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; padding:24px; width:100%; max-width:440px; max-height:80vh; overflow-y:auto; }
.modal h3 { margin:0 0 16px; font-size:16px; }
.modal label { display:block; font-size:12px; color:var(--text-secondary); margin-bottom:4px; margin-top:12px; }
.modal input, .modal select { width:100%; padding:8px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg-tertiary); color:var(--text-primary); font-size:13px; outline:none; }
.modal input:focus, .modal select:focus { border-color:var(--accent); }
.modal select { cursor:pointer; }
.modal-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:20px; }
.modal .error-msg { margin-top:12px; }

/* ── Badge ── */
.badge { display:inline-block; padding:2px 8px; border-radius:10px; font-size:11px; font-weight:600; }
.badge-allow { background:rgba(63,185,80,.15); color:var(--success); }
.badge-ban { background:rgba(248,81,73,.15); color:var(--danger); }
.badge-active { background:rgba(63,185,80,.15); color:var(--success); }
.badge-inactive { background:rgba(139,148,158,.15); color:var(--text-secondary); }

/* ── Key Display ── */
.key-display { font-family:var(--font-mono); font-size:13px; background:var(--bg-tertiary); padding:10px 12px; border-radius:6px; word-break:break-all; margin:8px 0; border:1px solid var(--border); }
.copy-btn { cursor:pointer; }

/* ── Toast ── */
.toast-container { position:fixed; top:16px; left:50%; transform:translateX(-50%); z-index:9999; display:flex; flex-direction:column; gap:8px; }
.toast { padding:10px 16px; border-radius:6px; font-size:13px; animation:toast-in .25s ease; }
.toast-success { background:var(--success); color:#fff; }
.toast-error { background:var(--danger); color:#fff; }

/* Inventory modal row colors */
.row-unused { background: var(--bg-secondary); }
.row-frozen { background: #fff3cd; }
.row-expired { background: #f8d7da; }
.row-used { background: transparent; }
.badge-expired { background: var(--danger); color: #fff; }
@keyframes toast-in { from{opacity:0;transform:translateY(-8px)} }

/* ── Inventory Modal ── */
.inventory-modal { max-width:700px !important; }
.row-unused td { background:var(--bg-unused-row,#1a2a1a); }
[data-theme="light"] .row-unused td { background:#f0faf0; }
.row-used td { background:var(--bg-used-row,#2a1a1a); }
[data-theme="light"] .row-used td { background:#fff0f0; }

/* ── Empty State ── */
.empty-state { text-align:center; padding:40px; color:var(--text-muted); }
.empty-state .icon { font-size:36px; margin-bottom:8px; }

/* ── Error ── */
.error-msg { color:var(--danger); font-size:12px; margin-top:4px; }
.hint { font-size:12px; color:var(--text-muted); }

/* ── Login ── */
.login-page { display:flex; align-items:center; justify-content:center; min-height:100vh; }
.login-card { background:var(--bg-secondary); border:1px solid var(--border); border-radius:10px; padding:32px; width:100%; max-width:380px; }
.login-card h1 { margin:0; text-align:center; font-size:22px; }
.login-card .subtitle { text-align:center; color:var(--text-muted); margin-bottom:20px; font-size:13px; }
.login-card label { display:block; font-size:13px; margin-bottom:4px; color:var(--text-secondary); }
.login-card input { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:6px; background:var(--bg-tertiary); color:var(--text-primary); font-size:14px; outline:none; margin-bottom:16px; }
.login-card input:focus { border-color:var(--accent); }
.login-card .btn-primary { width:100%; padding:10px; font-size:14px; justify-content:center; }
.checkbox-row { display:flex; align-items:center; gap:8px; margin:12px 0; }
.checkbox-row input { width:auto; margin:0; }
.checkbox-row label { margin:0; font-size:12px; color:var(--text-muted); }

/* ── Login Tabs ── */
.login-tabs { display:flex; gap:0; margin-bottom:20px; border-bottom:1px solid var(--border); }
.login-tab { flex:1; text-align:center; padding:8px; cursor:pointer; font-size:13px; color:var(--text-muted); border-bottom:2px solid transparent; transition:all .15s; }
.login-tab:hover { color:var(--text-primary); }
.login-tab.active { color:var(--accent); border-bottom-color:var(--accent); }

/* ── Success Box ── */
.success-box { margin-top:16px; padding:12px; background:rgba(63,185,80,.1); border:1px solid rgba(63,185,80,.25); border-radius:8px; word-break:break-all; }
.success-box .key-display { margin:8px 0; }

/* ── Monitor Grid ── */
.monitor-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; }
.monitor-card h3 { font-size:14px; margin-bottom:16px; }
.metric-row { display:flex; flex-wrap:wrap; gap:16px; }
.metric-item { flex:1; min-width:80px; text-align:center; }
.metric-value { font-size:22px; font-weight:700; font-family:var(--font-mono); color:var(--accent); }
.metric-value-danger { color:var(--danger); }
.metric-label { font-size:11px; color:var(--text-muted); margin-top:2px; }

/* ── Tenant Usage ── */
.tenant-usage-container { display:flex; flex-direction:column; gap:12px; }
.tenant-usage-row { display:flex; align-items:center; gap:12px; }
.tenant-usage-label { flex:0 0 180px; display:flex; justify-content:space-between; font-size:13px; }
.tenant-usage-nums { color:var(--text-muted); }
.progress-bar { flex:1; height:8px; background:var(--bg-tertiary); border-radius:4px; overflow:hidden; }
.progress-fill { height:100%; border-radius:4px; transition:width .3s ease; }
.progress-bar-ok { background:var(--success); }
.progress-bar-warn { background:var(--warning); }
.progress-bar-danger { background:var(--danger); }
.tenant-usage-pct { flex:0 0 40px; text-align:right; font-size:12px; color:var(--text-muted); font-family:var(--font-mono); }

/* ── Trend Chart ── */
.trend-chart { display:flex; align-items:flex-end; gap:8px; height:180px; padding:8px 0; }
.trend-bar-wrap { flex:1; display:flex; flex-direction:column; align-items:center; height:100%; justify-content:flex-end; }
.trend-bar { width:100%; max-width:32px; background:var(--bg-tertiary); border-radius:4px 4px 0 0; position:relative; min-height:2px; }
.trend-bar-delivered { position:absolute; bottom:0; left:0; right:0; background:var(--accent); border-radius:4px 4px 0 0; transition:height .3s ease; }
.trend-label { font-size:10px; color:var(--text-muted); margin-top:4px; text-align:center; }

/* ── Theme Toggle ── */
.theme-toggle {
    padding: 12px 20px;
    cursor: pointer;
    font-size: 14px;
    border-top: 1px solid var(--border);
}
.theme-toggle:hover {
    background: var(--bg-tertiary);
}

/* ── Light Theme - CSS variable overrides ── */
[data-theme="light"] {
    --bg-primary:   #f5f5f7;
    --bg-secondary: #ffffff;
    --bg-tertiary:  #f0f0f5;
    --border:       #d0d0d0;
    --text-primary: #1a1a2e;
    --text-secondary:#666666;
    --text-muted:   #888888;
    --accent:       #1976d2;
    --success:      #2e7d32;
    --warning:      #f57f17;
    --danger:       #d32f2f;
}

/* ── Light Theme - hardcoded color overrides ── */
[data-theme="light"] .modal-overlay {
    background: rgba(0,0,0,0.3);
}
[data-theme="light"] .status-ok {
    background: rgba(46,125,50,.12);
    border-color: rgba(46,125,50,.25);
}
[data-theme="light"] .status-err {
    background: rgba(211,47,47,.12);
    border-color: rgba(211,47,47,.25);
}
[data-theme="light"] .badge-allow,
[data-theme="light"] .badge-active {
    background: rgba(46,125,50,.15);
}
[data-theme="light"] .badge-ban {
    background: rgba(211,47,47,.15);
}
[data-theme="light"] .badge-inactive {
    background: rgba(136,136,136,.15);
}
[data-theme="light"] .btn-danger:hover {
    background: rgba(211,47,47,.15);
}
[data-theme="light"] .success-box {
    background: rgba(46,125,50,.1);
    border-color: rgba(46,125,50,.25);
}

/* ══ Public pages (apply / activate) — light + full-bleed ═══════════════
   The public flow re-declares the theme variables locally, so every shared
   component (.btn / .key-display / inputs) turns light automatically while the
   admin panel keeps its dark theme. Look: one accent colour (tech blue) plus
   neutral greys, a hairline grid and two soft washes for a modern/hi-tech feel
   — deliberate whitespace instead of heavy fills, and text always sits on a
   plain surface so contrast never depends on the artwork. */

/* The shell owns the page frame (theme, background, padding) so the header
   interlinks and the footer sit on the same light surface as the page body. */
.public-shell {
    /* local theme */
    --bg-primary: #f5f7fa;
    --bg-secondary: #ffffff;
    --bg-tertiary: #eef1f6;
    --border: #dde4ee;
    --text-primary: #0c1424;
    --text-secondary: #3b4759;
    --text-muted: #58677c;
    --accent: #1656c9;
    --success: #12794a;
    --warning: #8a5b00;
    --danger: #c62828;

    position: relative;
    display: flex;
    flex-direction: column;
    gap: clamp(14px, 2vw, 22px);
    width: 100%;
    min-height: 100vh;
    padding: clamp(14px, 2.4vw, 30px) clamp(14px, 4vw, 64px) clamp(28px, 4vw, 56px);
    color: var(--text-primary);
    background-color: var(--bg-primary);
    background-image:
        radial-gradient(1100px 420px at 8% -8%, rgba(31,111,235,.10), transparent 62%),
        radial-gradient(900px 420px at 92% -4%, rgba(6,182,212,.09), transparent 58%),
        linear-gradient(rgba(12,20,36,.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(12,20,36,.035) 1px, transparent 1px);
    background-size: auto, auto, 34px 34px, 34px 34px;
}

/* the page markup is a plain container inside that frame */
.apply-page {
    position: relative;
    width: 100%;
    min-height: 0;
    padding: 0;
    color: inherit;
    background: none;
}

/* ── Header interlinks (the four public entries) ── */
/* Test-only notice on the application pages (short-lived test credentials). */
.apply-notice {
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
    padding: 12px 18px;
    border: 1px solid rgba(138, 91, 0, .35);
    border-left: 4px solid var(--warning);
    border-radius: 12px;
    background: rgba(138, 91, 0, .06);
    color: var(--text-secondary);
    font-size: clamp(12.5px, 1vw, 14px);
    line-height: 1.6;
    text-align: center;
}
.apply-notice strong { color: var(--warning); }

/* ── Application form: four clearly separated blocks (plan / details /
   target / submit), with compact identity rows. ────────────────────────── */
.apply-block { padding: clamp(14px, 1.6vw, 20px) 0; border-top: 1px solid var(--border); }
.apply-block:first-child { border-top: 0; padding-top: 0; }
.apply-block:last-child { padding-bottom: 0; }
.block-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.block-no {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-tertiary);
    color: var(--accent);
    font-size: 11px;
    font-weight: 700;
}
.field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 14px; }
.field-row label { margin-top: 0; }
/* Submit button: same full-width, centred, prominent button on every page
   (the block-based pages used to fall back to a short left-aligned .btn). */
.apply-block .btn-row { display: flex; gap: 10px; margin-top: 14px; }
.apply-block .btn-primary {
    flex: 1 1 auto;
    width: 100%;
    padding: 13px 18px;
    font-size: 14px;
    border-radius: 10px;
    justify-content: center;
}
/* Details row: tight, and Send Code keeps its natural width without wrapping */
.field-row .apply-input { margin-bottom: 0; }
.verify-row { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: nowrap; }
.verify-row .apply-input { flex: 1 1 auto; min-width: 0; margin: 0; }
.verify-row .btn {
    flex: 0 0 auto;
    min-width: 140px;
    padding: 10px 16px;
    font-size: 14px;
    white-space: nowrap;
    justify-content: center;
}
/* Input with a fixed suffix, e.g. "@shared-domain" after an agent name. The
   text is right-aligned so the caret always sits right next to the "@", and both
   halves share one height so the suffix is flush with the input. */
.input-affix { display: flex; align-items: stretch; height: 46px; }
.input-affix .apply-input {
    flex: 1 1 auto;
    min-width: 0;
    height: 46px;
    padding: 0 14px;
    margin: 0;
    text-align: right;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
/* Three-part form: [profile] . [typed] @ [domain] — reads as one address. */
/* Three-part form: [profile] . [typed] @ [domain] — reads as one address.
   Widths follow the address shape: profile 2 shares, identifier 1, domain 2
   (the dot is a separator on top of those, with breathing room both sides). */
.input-affix.is-triple {
    display: grid;
    grid-template-columns: minmax(0, 2fr) auto minmax(0, 1fr) minmax(0, 2fr);
    align-items: stretch;
    height: 46px;
}
.input-affix.is-triple .input-prefix {
    display: flex;
    align-items: center;
    justify-content: flex-end;   /* the hint sits next to the dot, not the edge */
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-right: 0;
    border-radius: 10px 0 0 10px;
    background: var(--bg-tertiary);
    color: var(--text-muted);
    font-size: 13px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}
.input-affix.is-triple .affix-dot {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 10px 0 8px;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 19px;
    font-weight: 600;
    line-height: 1;
    user-select: none;
}
.input-affix.is-triple .apply-input {
    height: 46px;
    padding: 0 10px;
    margin: 0;
    text-align: left;
    border-left: 0;
    border-radius: 0;
}
.input-affix.is-triple .input-suffix {
    height: 46px;
    padding: 0 12px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.input-suffix {
    display: flex;
    align-items: center;
    height: 46px;
    padding: 0 12px;
    border: 1px solid var(--border);
    border-left: 0;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    background: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: 13px;
    white-space: nowrap;
}
.hint-line { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-muted); }
@media (max-width: 640px) {
    .verify-row { flex-wrap: wrap; }
    .verify-row .btn { width: 100%; }
}

.public-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px 16px;
    padding: 8px 4px 12px;
    border-bottom: 1px solid var(--border);
}
.public-nav-brand { font-weight: 700; font-size: 15px; letter-spacing: .2px; }
.public-nav-links { display: flex; flex-wrap: wrap; gap: 6px; }
.public-nav-item {
    padding: 7px 13px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    text-decoration: none;
    font-size: 12.5px;
    white-space: nowrap;
    transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.public-nav-item:hover { color: var(--accent); border-color: var(--accent); }
.public-nav-item.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
/* Entry kept visible but not clickable (its flow is not open yet): mute it and
   drop the hover highlight so it cannot read as an active link. */
.public-nav-item.is-disabled, .public-nav-item.is-disabled:hover {
    background: var(--bg-secondary); border-color: var(--border); color: var(--text-muted);
    opacity: .6; cursor: not-allowed;
}

/* ── Footer ── */
.public-footer {
    margin-top: auto;
    padding: 18px 4px 4px;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 12.5px;
    line-height: 1.7;
}
.public-footer-brand { font-weight: 700; color: var(--text-primary); font-size: 13.5px; letter-spacing: .2px; }
.public-footer-links { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 8px 0; }
.public-footer-links a { color: var(--text-secondary); text-decoration: none; }
.public-footer-links a:hover { color: var(--accent); }
.public-footer-links .is-disabled { color: var(--text-muted); opacity: .6; cursor: not-allowed; }
.public-footer-note { max-width: 900px; }

/* ── Result / note boxes on the light surface ── */
.apply-note {
    margin-top: 20px;
    padding: 16px;
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    border-radius: 12px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.9;
}
.apply-note b, .apply-note strong { color: var(--text-primary); }
.apply-note p { margin-bottom: 6px; }
.apply-warn {
    margin-top: 14px;
    padding: 12px 14px;
    background: rgba(138,91,0,.07);
    border: 1px solid rgba(138,91,0,.28);
    border-radius: 12px;
    font-size: 13px;
    line-height: 1.7;
    color: var(--text-secondary);
}

/* ── First paint on a public entry: light surface, no dark flash ── */
[data-public] #loading-screen { background: #f5f7fa; color: #58677c; }
[data-public] #loading-screen .spinner { border-color: #dde4ee; border-top-color: #1656c9; }
[data-public] #loading-screen .loading-label::after { content: ''; }
[data-public] .loading-label { font-size: 13px; }

/* ── Hero ── */
.apply-hero { text-align: center; margin: 0 auto clamp(20px, 3vw, 34px); }
.apply-hero .logo { font-size: clamp(34px, 4vw, 50px); line-height: 1; }
.apply-hero h1 {
    margin: 12px 0 10px;
    font-size: clamp(23px, 3vw, 36px);
    letter-spacing: .2px;
    color: var(--text-primary);
}
.apply-hero p {
    max-width: 780px;
    margin: 0 auto;
    color: var(--text-secondary);
    font-size: clamp(13px, 1vw, 15px);
    line-height: 1.75;
}

/* ── Cards: full width (no centred island) ── */
.apply-card,
.apply-result {
    width: 100%;
    max-width: none;
    margin: 0 0 clamp(16px, 2vw, 26px);
    /* Wide screens: the controls form one readable column instead of stretching
       edge to edge (520px is wider than any phone, so mobile keeps full width). */
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: clamp(20px, 2.6vw, 40px);
    box-shadow: 0 10px 30px rgba(12,20,36,.06);
}
.apply-card .card-title {
    text-align: left;
    font-size: 16px;
    margin-bottom: 20px;
    color: var(--text-primary);
}

/* ── Form ── */
.apply-card > * { width: 100%; max-width: 520px; }
.apply-result > * { width: 100%; max-width: 620px; }
/* Plan description: soft and borderless on every page (no box, no fill). */
.plan-box {
    font-size: 13px;
    line-height: 1.85;
    color: var(--text-secondary);
    margin: 0;
}
.plan-box b { color: var(--text-primary); font-weight: 600; }
.apply-block .plan-box { margin-top: 8px; }        /* tight under the select */

/* One label style for all public forms (the system page used to own this). */
.apply-card label {
    display: block;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    letter-spacing: .3px;
}
.apply-input,
.apply-page select.apply-input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: 10px;
    color: var(--text-primary);
    caret-color: var(--accent);
    font-size: 16px;              /* >=16px: iOS does not zoom on focus */
    -webkit-text-fill-color: var(--text-primary);
    transition: border-color .15s ease, box-shadow .15s ease;
}
/* Send Code: filled like the submit button so it reads as clickable. */
.verify-row .btn {
    background: var(--accent);
    border-color: var(--accent);
    color: #fff;
    font-weight: 500;
}
.verify-row .btn:hover { background: var(--accent); filter: brightness(1.08); }
.verify-row .btn[disabled] { opacity: .6; cursor: not-allowed; filter: none; }
/* Verification feedback needs a full line: the space beside the code box cannot
   hold a sentence, and the server's answer is what tells the applicant what to
   do next. Hidden while empty. */
.verify-status { margin: 8px 0 0; font-size: 12.5px; line-height: 1.7; color: var(--text-secondary); }
.verify-status:empty { display: none; }
.verify-hint { margin: 8px 0 0; font-size: 12px; line-height: 1.6; color: var(--text-muted); }
.verify-hint b { color: var(--text-secondary); }

/* Public pages: the placeholder must read as a hint, not as typed input. */
.public-shell .apply-input::placeholder {
    color: #9aa6b6;
    -webkit-text-fill-color: #9aa6b6;
    opacity: 1;
}
.apply-input::placeholder {
    color: var(--text-muted);
    /* -webkit-text-fill-color on .apply-input would otherwise win for the
       placeholder and paint it as typed text. */
    -webkit-text-fill-color: var(--text-muted);
    opacity: 1;
}
/* typed text must stay readable without selecting it (autofill used to paint
   dark-on-dark) */
.apply-input:-webkit-autofill,
.apply-input:-webkit-autofill:hover,
.apply-input:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--text-primary);
    caret-color: var(--accent);
    -webkit-box-shadow: 0 0 0 1000px var(--bg-secondary) inset;
    box-shadow: 0 0 0 1000px var(--bg-secondary) inset;
    transition: background-color 9999s ease-in-out 0s;
}
.apply-input:focus {
    outline: none;
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(22,86,201,.16);
}

/* ── Binding hint + live availability ── */
.bind-hint { font-size: 12px; color: var(--text-muted); margin: 0 0 14px; line-height: 1.6; }
/* The affixed field carries no bottom margin of its own, so give the hint below
   it an explicit gap (the plain .apply-input already has 16px). */
.input-affix + .bind-hint { margin-top: 14px; }
.bind-status { font-size: 13px; line-height: 1.6; margin: -4px 0 14px; padding: 8px 12px; border-radius: 8px; }
.bind-ok    { color: var(--success); background: rgba(18,121,74,.07);  border: 1px solid rgba(18,121,74,.30); }
.bind-warn  { color: var(--warning); background: rgba(138,91,0,.07);   border: 1px solid rgba(138,91,0,.28); }
.bind-bad   { color: var(--danger);  background: rgba(198,40,40,.06);  border: 1px solid rgba(198,40,40,.28); }
.bind-check { color: var(--text-secondary); background: var(--bg-tertiary); border: 1px dashed var(--border); }

/* ── Buttons (styling lives in .apply-block .btn-row/.btn-primary above) ── */

/* ── Result / success block ── */
.apply-result .footer-note {
    margin-top: 18px;
    font-size: 12px;
    color: var(--text-muted);
    line-height: 1.7;
}
.apply-result .footer-note a { color: var(--accent); text-decoration: none; }

/* ── Shared components inside the public flow (light surfaces) ── */
.apply-page .empty-state { text-align: center; color: var(--text-secondary); }
.apply-page .empty-state .icon { font-size: 34px; margin-bottom: 10px; }
.apply-page .error-msg { color: var(--danger); font-size: 13px; margin-top: 6px; }
.apply-page .success-box {
    background: rgba(18,121,74,.06);
    border: 1px solid rgba(18,121,74,.25);
    border-radius: 12px;
    color: var(--text-primary);
    padding: 16px 18px;
}
.apply-page .key-display {
    background: var(--bg-tertiary);
    border: 1px solid var(--border);
    color: var(--text-primary);
}
.apply-page .form-group { margin-bottom: 4px; }

/* ── Responsive: single column + full-width actions on phones ── */
@media (max-width: 640px) {
    .public-shell { padding: 12px 14px 36px; }
    .public-nav { align-items: flex-start; }
    .public-nav-links { width: 100%; overflow-x: auto; padding-bottom: 4px; flex-wrap: nowrap; }
    .apply-card, .apply-result { border-radius: 14px; padding: 18px 14px; }
    .apply-block .btn-row { flex-direction: column; }
    .apply-block .btn-primary { width: 100%; }
    .apply-hero h1 { font-size: 22px; }
}