@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap');

@font-face {
    font-family: 'BrandMark Sans';
    src: url('/static/fonts/BrandMarkSans.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

:root {
    --carbon-black: #1e2019;
    --space-indigo: #2c2754;
    --white-smoke: #f2f4f3;
    --blue-energy: #3f8efc;
    --electric-sapphire: #2667ff;

    --bg-primary: var(--carbon-black);
    --bg-card: var(--space-indigo);
    --bg-input: #1a1833;
    --bg-input-border: #3d3766;

    --text-primary: var(--white-smoke);
    --text-secondary: rgba(242, 244, 243, 0.55);
    --text-muted: rgba(242, 244, 243, 0.35);

    --accent-primary: var(--electric-sapphire);
    --accent-hover: var(--blue-energy);

    --success-bg: #0f3d1a;
    --success-text: #4ade80;
    --warn-bg: #3d2e0f;
    --warn-text: #facc15;
    --error-bg: #3d0f0f;
    --error-text: #f87171;

    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-full: 9999px;

    --font-brand: 'BrandMark Sans', system-ui, sans-serif;
    --font-body: 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --font-mono: ui-monospace, 'Cascadia Code', 'Fira Code', monospace;
}

/* ── Reset ── */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--font-body);
    background: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.6;
    min-height: 100vh;
}

img, svg { display: block; max-width: 100%; }

/* ── Typography ── */

h1 { font-size: 1.5rem; font-weight: 600; margin-bottom: 1.25rem; }
h2 { font-size: 1.1rem; font-weight: 500; margin-bottom: 0.75rem; color: var(--text-secondary); }
p { margin-bottom: 0.5rem; }

a {
    color: var(--blue-energy);
    text-decoration: none;
    transition: color 0.15s ease;
}
a:hover { color: var(--accent-primary); text-decoration: underline; }

/* ── Navbar ── */

.navbar {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.875rem 2rem;
    background: var(--bg-card);
    border-bottom: 1px solid rgba(242, 244, 243, 0.08);
    position: sticky;
    top: 0;
    z-index: 100;
}

.navbar-brand {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    text-decoration: none;
    color: var(--text-primary);
}
.navbar-brand:hover { text-decoration: none; color: var(--text-primary); }

.navbar-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    object-fit: contain;
    flex-shrink: 0;
}

.navbar-brand-name {
    font-family: var(--font-brand);
    font-size: 1.35rem;
    font-weight: 400;
    letter-spacing: 0.02em;
}

.navbar-spacer { flex: 1; }

.navbar-user {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.navbar-links {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.navbar-links a {
    font-size: 0.85rem;
    color: var(--text-secondary);
    transition: color 0.15s ease;
}
.navbar-links a:hover { color: var(--text-primary); text-decoration: none; }

/* ── Layout ── */

.page-container {
    max-width: 720px;
    margin: 0 auto;
    padding: 2rem;
}

.page-container--narrow { max-width: 520px; }

/* ── Cards ── */

.card {
    background: var(--bg-card);
    border-radius: var(--radius-md);
    padding: 1.25rem;
    margin-bottom: 1rem;
    border: 1px solid rgba(242, 244, 243, 0.06);
}

/* ── Buttons ── */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    border: none;
    border-radius: var(--radius-sm);
    padding: 0.5rem 1.15rem;
    cursor: pointer;
    font-size: 0.9rem;
    font-family: var(--font-body);
    font-weight: 500;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    text-decoration: none;
    line-height: 1.4;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

.btn-primary {
    background: var(--accent-primary);
    color: #fff;
}
.btn-primary:hover { background: var(--accent-hover); color: #fff; }

.btn-secondary {
    background: rgba(242, 244, 243, 0.08);
    color: var(--text-primary);
    border: 1px solid rgba(242, 244, 243, 0.12);
}
.btn-secondary:hover { background: rgba(242, 244, 243, 0.14); }

.btn-danger {
    background: #c03030;
    color: #fff;
}
.btn-danger:hover { background: #e04040; }

.btn-lg {
    padding: 0.75rem 2rem;
    font-size: 1.05rem;
    border-radius: var(--radius-md);
}

.btn-outline {
    background: transparent;
    color: var(--text-primary);
    border: 1px solid var(--accent-primary);
}
.btn-outline:hover { background: rgba(38, 103, 255, 0.1); }

.btn-sm {
    padding: 0.25rem 0.65rem;
    font-size: 0.78rem;
}

/* ── Avatars ── */

.avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 2px solid rgba(242, 244, 243, 0.12);
    flex-shrink: 0;
}
.avatar--sm { width: 28px; height: 28px; }
.avatar--lg { width: 56px; height: 56px; }
.avatar--navbar { width: 32px; height: 32px; }

.avatar-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(242, 244, 243, 0.1);
    color: var(--text-secondary);
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.avatar--lg.avatar-placeholder { font-size: 0.8rem; }

/* ── Platform Icons ── */

.platform-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    object-fit: contain;
    vertical-align: middle;
}

/* ── Status Badges ── */

.status {
    display: inline-block;
    padding: 0.15rem 0.55rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
}
.status-ok { background: var(--success-bg); color: var(--success-text); }
.status-warn { background: var(--warn-bg); color: var(--warn-text); }
.status-off { background: var(--error-bg); color: var(--error-text); }

/* ── Inputs ── */

input, textarea, select {
    background: var(--bg-input);
    color: var(--text-primary);
    border: 1px solid var(--bg-input-border);
    border-radius: var(--radius-sm);
    padding: 0.5rem 0.75rem;
    width: 100%;
    font-size: 0.9rem;
    font-family: var(--font-body);
    transition: border-color 0.15s ease;
}
input:focus, textarea:focus, select:focus {
    outline: none;
    border-color: var(--accent-primary);
}

textarea {
    min-height: 80px;
    resize: vertical;
    font-family: var(--font-mono);
}

label {
    display: block;
    margin-bottom: 0.3rem;
    color: var(--text-secondary);
    font-size: 0.85rem;
}

.field { margin-bottom: 0.75rem; }

.row {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    flex-wrap: wrap;
}
.row > .field { flex: 1; min-width: 140px; }

/* ── Messages ── */

.msg {
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-sm);
    margin-top: 0.5rem;
    font-size: 0.85rem;
}
.msg-ok { background: var(--success-bg); color: var(--success-text); }
.msg-err { background: var(--error-bg); color: var(--error-text); }
.msg-warn { background: var(--warn-bg); color: var(--warn-text); }

/* ── Tables ── */

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
th, td {
    text-align: left;
    padding: 0.5rem 0.6rem;
    border-bottom: 1px solid rgba(242, 244, 243, 0.06);
}
th { color: var(--text-secondary); font-weight: 500; }

/* ── Meta / secondary text ── */

.meta { color: var(--text-secondary); font-size: 0.85rem; }

/* ── Code Display ── */

.code-display {
    background: var(--bg-input);
    border: 1px solid var(--bg-input-border);
    border-radius: var(--radius-sm);
    padding: 0.75rem 1rem;
    font-family: var(--font-mono);
    font-size: 1.1rem;
    margin-top: 0.5rem;
    word-break: break-all;
}

/* ── Hero Section (homepage) ── */

.hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 73px);
    padding: 4rem 2rem;
    background: linear-gradient(170deg, var(--carbon-black) 0%, var(--space-indigo) 100%);
}

.hero-headline {
    font-family: var(--font-brand);
    font-size: clamp(2.2rem, 5vw, 3.5rem);
    font-weight: 400;
    line-height: 1.2;
    margin-bottom: 1rem;
    color: var(--text-primary);
}

.hero-tagline {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 480px;
    margin-bottom: 2.5rem;
}

.hero-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    justify-content: center;
}

/* ── Login screen ── */

.login-container {
    text-align: center;
    padding: 6rem 2rem 4rem;
}

.login-container h1 {
    font-family: var(--font-brand);
    font-size: 1.8rem;
    margin-bottom: 0.5rem;
}

.login-container p {
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

.login-buttons {
    display: flex;
    gap: 0.75rem;
    justify-content: center;
    flex-wrap: wrap;
}

/* ── Impersonation banner ── */

.impersonation-banner {
    background: rgba(44, 39, 84, 0.6);
    border: 1px solid var(--blue-energy);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.impersonation-banner strong { color: var(--blue-energy); }

/* ── Delegate picker ── */

.delegate-picker {
    background: var(--bg-card);
    border: 1px solid rgba(242, 244, 243, 0.06);
    border-radius: var(--radius-md);
    padding: 0.75rem 1rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: flex-end;
    gap: 0.75rem;
    flex-wrap: wrap;
}

/* ── Invite URL block ── */

.invite-url-block {
    display: block;
    width: 100%;
    margin-top: 0.5rem;
    padding: 0.65rem 0.75rem;
    background: var(--bg-primary);
    border: 1px solid var(--bg-input-border);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 0.75rem;
    font-weight: 400;
    line-height: 1.45;
    word-break: break-all;
    text-align: left;
    color: var(--text-primary);
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease;
}
.invite-url-block:hover { background: rgba(30, 32, 25, 0.8); border-color: var(--accent-primary); }
.invite-url-block:focus { outline: 2px solid var(--accent-primary); outline-offset: 2px; }
.invite-url-block.copied { border-color: var(--success-text); }

.invite-copy-hint { margin-top: 0.4rem; font-size: 0.8rem; color: var(--text-secondary); }
.invite-copy-hint.done { color: var(--success-text); }

/* ── Signed-in-as line ── */

.signed-in-as {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 0.75rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.signed-in-as strong { color: var(--text-primary); }

/* ── User info row ── */

.user-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* ── Subscription card split layout ── */

.subscription-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}

.subscription-row .claim-action {
    text-align: left;
    min-width: 0;
}

/* ── 403 page ── */

.error-page {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: calc(100vh - 73px);
    padding: 4rem 2rem;
}

.error-page h1 {
    font-size: 5rem;
    font-weight: 700;
    color: var(--accent-primary);
    margin-bottom: 0.5rem;
    line-height: 1;
}

.error-page p {
    font-size: 1.2rem;
    color: var(--text-secondary);
    margin-bottom: 2rem;
}

/* ── Role Cards (homepage) ── */

.role-cards {
    display: flex;
    gap: 1.5rem;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 640px;
}

.role-card {
    flex: 1;
    min-width: 250px;
    background: rgba(44, 39, 84, 0.45);
    border: 1px solid rgba(242, 244, 243, 0.08);
    border-radius: var(--radius-lg);
    padding: 1.75rem 1.5rem;
    text-align: center;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.role-card:hover {
    border-color: rgba(63, 142, 252, 0.3);
    background: rgba(44, 39, 84, 0.6);
}

.role-card-title {
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.5rem;
}

.role-card-desc {
    font-size: 0.88rem;
    color: var(--text-secondary);
    margin-bottom: 1.25rem;
    line-height: 1.5;
}

.role-card-actions {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.role-card-actions .btn { width: 100%; }

/* ── Creator disabled state ── */

.creator-disabled-wrapper {
    pointer-events: none;
    opacity: 0.35;
    user-select: none;
    filter: grayscale(40%);
}

.creator-disabled-notice {
    background: var(--warn-bg);
    border: 1px solid var(--warn-text);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.25rem;
    text-align: center;
}
.creator-disabled-notice h2 {
    color: var(--warn-text);
    font-size: 1.1rem;
    margin-bottom: 0.35rem;
}
.creator-disabled-notice p {
    color: var(--text-secondary);
    font-size: 0.9rem;
    margin-bottom: 0;
}

/* ── Codes Summary ── */

.codes-summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 0.5rem 0.6rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.codes-summary strong { color: var(--text-primary); }
.codes-summary .btn { margin-left: auto; }

/* ── Responsive ── */

@media (max-width: 600px) {
    .navbar { padding: 0.75rem 1rem; }
    .page-container { padding: 1.25rem; }
    .hero { padding: 3rem 1.25rem; }
    .hero-actions { flex-direction: column; align-items: stretch; }
    .hero-actions .btn { width: 100%; }
    .role-cards { flex-direction: column; align-items: stretch; }
    .subscription-row { flex-direction: column; align-items: flex-start; }
    .subscription-row .claim-action { text-align: left; width: 100%; }
}