:root {
    --primary: #002045;
    --primary-container: #1a365d;
    --surface: #f7fafc;
    --surface-container-low: #f1f4f6;
    --surface-container-lowest: #ffffff;
    --surface-container-high: #e5e9eb;
    --surface-container-highest: #e0e3e5;
    --surface-tint: #455f88;
    --on-surface: #181c1e;
    --on-surface-variant: #43474e;
    --outline-variant: #c4c6cf;
    --success-bg: #003f23;
    --success-fg: #4bb278;
    --error: #ba1a1a;
}

body {
    background: var(--surface);
    color: var(--on-surface);
}

.glass-nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(12px);
}

.nav-link {
    color: #565f70;
    transition: color 0.2s ease;
}

.nav-link:hover {
    color: var(--primary-container);
}

.font-headline {
    font-weight: 800;
    letter-spacing: -0.02em;
}

.trace-sep {
    width: 1px;
    height: 0.75rem;
    background: var(--surface-tint);
    opacity: 0.3;
}

.surface-low {
    background: var(--surface-container-low);
}

.surface-card {
    background: var(--surface-container-lowest);
}

.action-gradient {
    background: linear-gradient(120deg, var(--primary) 0%, var(--primary-container) 100%);
}

.input-shell {
    background: var(--surface-container-highest);
    border: 0;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s ease;
}

.input-shell:focus {
    border-bottom-color: var(--primary);
    outline: none;
    box-shadow: none;
}

.input-shell-soft {
    background: var(--surface-container-low);
    border: 1px solid var(--outline-variant);
    border-radius: 0.75rem;
}

.input-shell-soft:focus {
    border-color: var(--surface-tint);
    outline: none;
}

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.quota-bar {
    height: 0.5rem;
    border-radius: 9999px;
    background: var(--surface-container-highest);
    overflow: hidden;
}

.quota-bar-fill {
    height: 100%;
    border-radius: 9999px;
    background: var(--primary);
}

.player-gradient {
    background: linear-gradient(180deg, #001226 0%, #002045 100%);
}

.badge {
    display: inline-flex;
    align-items: center;
    border-radius: 9999px;
    padding: 0.2rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.badge-approved {
    background: #e8f7ef;
    color: #16653d;
}

.badge-rejected {
    background: #ffe2df;
    color: #9a1e1e;
}

.badge-pending {
    background: #edf2ff;
    color: #2f4f8a;
}

.badge-neutral {
    background: #eef0f2;
    color: #3e4758;
}

.table-shell {
    overflow: hidden;
    border-radius: 0.9rem;
    border: 1px solid rgba(196, 198, 207, 0.45);
    background: #fff;
    box-shadow: 0 12px 24px rgba(0, 27, 60, 0.04);
}

.table-row-hover:hover {
    background: #f7fafc;
}