:root {
        --primary: #3B82F6;
        --primary-hover: #60A5FA;
        --primary-active: #2563EB;
        --secondary: #8EC5FF;
        --success: #22C55E;
        --warning: #F59E0B;
        --danger: #EF4444;
        --background: #07111F;
        --surface: #0B1729;
        --surface-2: rgba(255,255,255,.07);
        --surface-3: rgba(255,255,255,.1);
        --glass-bg: rgba(22,34,50,.78);
        --glass-border: rgba(255,255,255,.1);
        --glass-highlight: rgba(255,255,255,.16);
        --text-primary: #F8FAFC;
        --text-secondary: #B9C6D8;
        --text-muted: #7E91A8;
        --shadow-xs: 0 12px 32px rgba(2,8,23,.24);
        --shadow-sm: 0 20px 48px rgba(2,8,23,.32);
        --shadow-md: 0 30px 80px rgba(2,8,23,.42);
        --radius-sm: 14px;
        --radius-md: 18px;
        --radius-lg: 22px;
        --radius-xl: 26px;
        --radius-2xl: 32px;
        --fast: 300ms;
    }

    body {
        background: radial-gradient(circle at top, #18345C 0%, #0B1729 35%, #07111F 100%);
        color: var(--text-primary);
        font-family: 'Inter', 'SF Pro Display', 'Plus Jakarta Sans', 'Segoe UI', system-ui, sans-serif;
    }

    body::before {
        background: linear-gradient(120deg, rgba(59,130,246,.16), transparent 44%, rgba(255,255,255,.06) 100%);
        opacity: 1;
    }

    button,
    input,
    textarea,
    select {
        font-family: inherit;
    }

    button {
        transition: transform var(--fast), box-shadow var(--fast), background-color var(--fast), border-color var(--fast), color var(--fast);
    }

    button:focus-visible,
    input:focus-visible,
    textarea:focus-visible,
    select:focus-visible {
        outline: 2px solid rgba(96,165,250,.65);
        outline-offset: 2px;
    }

    ::placeholder {
        color: rgba(185, 198, 216, .7);
        opacity: 1;
    }

    .header-shell {
        padding: 1.1rem 1rem 0.95rem;
    }

    .header-actions {
        gap: 0.6rem;
        margin-bottom: 1rem;
    }

    .header-copy {
        gap: 0.45rem;
    }

    #h-name-disp {
        color: var(--text-primary);
        font-size: clamp(1.15rem, 4.7vw, 1.9rem);
        font-weight: 700;
        letter-spacing: 0.28em;
        text-transform: uppercase;
        text-shadow: 0 10px 24px rgba(2,8,23,.28);
    }

    #r-num-disp {
        color: var(--text-secondary);
        font-size: 0.78rem;
        letter-spacing: 0.3em;
        font-weight: 700;
        margin-top: 0.2rem;
    }

    #greeting-disp,
    #greet-sub {
        color: var(--text-secondary);
        font-style: normal;
        letter-spacing: 0.16em;
        line-height: 1.6;
    }

    #greet-sub {
        background: linear-gradient(90deg, rgba(255,255,255,.12) 0%, rgba(96,165,250,.72) 48%, rgba(255,255,255,.12) 100%);
        -webkit-background-clip: text;
        background-clip: text;
        -webkit-text-fill-color: transparent;
        background-size: 200% auto;
        animation: greetShimmer 3.6s linear infinite;
    }

    .neon-box,
    .neon-btn,
    .modal-container,
    .adm-sec,
    #l-box,
    .toast,
    .item-row,
    .btn-icon,
    .add-btn,
    .sec-btn,
    .save-main-btn,
    footer {
        backdrop-filter: blur(22px);
        -webkit-backdrop-filter: blur(22px);
    }

    .neon-box,
    .modal-container,
    .adm-sec,
    #l-box,
    .toast,
    .item-row,
    .btn-icon {
        border: 1px solid var(--glass-border);
        box-shadow: var(--shadow-xs);
    }

    .neon-box {
        background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
        border-radius: var(--radius-xl);
        color: var(--text-primary);
        transition: transform var(--fast), box-shadow var(--fast), border-color var(--fast), background-color var(--fast);
    }

    .neon-box:hover {
        transform: translateY(-2px);
        background: linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.04));
        box-shadow: var(--shadow-sm);
        border-color: rgba(96,165,250,.28);
    }

    .neon-box:active,
    .neon-btn:active,
    .sec-btn:active,
    .save-main-btn:active {
        transform: translateY(0) scale(0.985);
    }

    .neon-btn {
        background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
        border: 1px solid var(--glass-border);
        color: var(--text-primary);
        border-radius: var(--radius-lg);
        box-shadow: var(--shadow-xs);
        font-weight: 700;
        letter-spacing: 0.14em;
        text-transform: uppercase;
    }

    .neon-btn:hover {
        background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
        box-shadow: var(--shadow-sm);
        transform: translateY(-1px);
    }

    .neon-text {
        color: var(--secondary);
        text-shadow: none;
    }

    input,
    textarea,
    select {
        width: 100%;
        min-height: 46px;
        padding: 13px 15px;
        border-radius: var(--radius-md);
        border: 1px solid var(--glass-border) !important;
        background: rgba(10,20,34,.75) !important;
        color: var(--text-primary) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(2,8,23,.14);
    }

    textarea {
        min-height: 120px;
        resize: vertical;
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: rgba(96,165,250,.6) !important;
        box-shadow: 0 0 0 3px rgba(96,165,250,.16), inset 0 1px 0 rgba(255,255,255,.03);
    }

    .mini-inp {
        min-height: 46px;
        border-radius: var(--radius-md);
        background: rgba(10,20,34,.75) !important;
        color: var(--text-primary) !important;
        box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 10px 24px rgba(2,8,23,.14);
    }

    .overlay {
        background: rgba(7,17,31,.8);
        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);
    }

    .modal-container {
        width: min(100%, 560px);
        padding: 1.4rem;
        border-radius: var(--radius-2xl);
        background: linear-gradient(180deg, rgba(11,23,41,.96), rgba(8,16,28,.94));
        box-shadow: var(--shadow-md);
        border: 1px solid var(--glass-border);
    }

    .toast {
        border-radius: 999px;
        padding: 0.8rem 1rem;
        background: rgba(11,23,41,.95);
        color: var(--text-primary);
        box-shadow: var(--shadow-sm);
        border: 1px solid var(--glass-border);
    }

    .adm-sec {
        padding: 1.1rem;
        border-radius: var(--radius-xl);
        background: linear-gradient(180deg, rgba(255,255,255,.068), rgba(255,255,255,.035));
        box-shadow: inset 0 1px 0 rgba(255,255,255,.05), var(--shadow-xs);
    }

    .adm-sec-title {
        color: var(--secondary);
        font-size: 0.72rem;
        font-weight: 700;
        letter-spacing: 0.22em;
        text-transform: uppercase;
    }

    .item-row {
        border-radius: var(--radius-lg);
        padding: 0.8rem 0.95rem;
        background: rgba(255,255,255,.045);
        transition: transform var(--fast), background-color var(--fast), border-color var(--fast);
    }

    .item-row:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.065);
        border-color: rgba(96,165,250,.24);
    }

    .btn-icon {
        width: 40px;
        height: 40px;
        border-radius: 14px;
        background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
        color: var(--text-primary);
        border: 1px solid var(--glass-border);
        box-shadow: var(--shadow-xs);
    }

    .btn-icon:hover {
        transform: translateY(-1px);
        background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.06));
    }

    .add-btn {
        border-radius: var(--radius-lg);
        background: rgba(255,255,255,.04);
        border: 1px dashed rgba(96,165,250,.3);
        color: var(--secondary);
        padding: 0.95rem 1rem;
        letter-spacing: 0.16em;
        text-transform: uppercase;
        font-weight: 700;
    }

    .add-btn:hover {
        transform: translateY(-1px);
        background: rgba(255,255,255,.06);
        border-color: rgba(96,165,250,.42);
    }

    .sec-btn,
    .save-main-btn,
    #theme-toggle-btn,
    button[onclick="toggleL()"] {
        border-radius: var(--radius-lg);
        font-weight: 700;
        letter-spacing: 0.16em;
        text-transform: uppercase;
    }

    .sec-btn-p,
    .save-main-btn {
        background: linear-gradient(135deg, var(--primary), var(--primary-hover));
        color: #ffffff;
        box-shadow: 0 16px 40px rgba(59,130,246,.24);
    }

    .sec-btn-p:hover,
    .save-main-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 20px 48px rgba(59,130,246,.3);
    }

    .sec-btn-s {
        background: rgba(255,255,255,.05);
        color: var(--text-secondary);
        border: 1px solid var(--glass-border) !important;
    }

    .sec-btn-s:hover {
        background: rgba(255,255,255,.08);
        color: var(--text-primary);
    }

    #theme-toggle-btn,
    button[onclick="toggleL()"] {
        min-width: 48px;
        padding: 0.7rem 0.85rem;
        background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
        color: var(--text-primary);
        border: 1px solid var(--glass-border) !important;
        box-shadow: var(--shadow-xs);
    }

    #theme-toggle-btn:hover,
    button[onclick="toggleL()"]:hover {
        transform: translateY(-1px);
        background: linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.06));
    }

    #l-box {
        background: rgba(11,23,41,.96);
        border: 1px solid var(--glass-border);
        border-radius: 20px;
        box-shadow: var(--shadow-md);
        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);
    }

    #event-alert-btn,
    #house-rules-banner {
        border-radius: var(--radius-lg);
        background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04));
        border: 1px solid var(--glass-border);
        box-shadow: var(--shadow-xs);
        color: var(--text-primary);
    }

    #event-alert-btn:hover,
    #house-rules-banner:hover {
        transform: translateY(-1px);
        border-color: rgba(96,165,250,.3);
    }

    footer {
        background: linear-gradient(180deg, rgba(7,17,31,.3), rgba(7,17,31,.88));
        border-top: 1px solid rgba(255,255,255,.08);
        box-shadow: 0 -12px 28px rgba(2,8,23,.24);
    }

    footer a {
        color: var(--secondary);
        font-weight: 700;
        letter-spacing: 0.2em;
    }

    footer button:hover {
        opacity: 1;
    }

    .lang-chip {
        background: rgba(255,255,255,.06);
        border: 1px solid var(--glass-border);
        color: var(--text-secondary);
        border-radius: 999px;
        padding: 0.55rem 0.75rem;
    }

    .lang-chip .x {
        color: var(--danger);
    }

    @media (max-width: 520px) {
        .header-shell {
            padding: 0.95rem 0.8rem 0.8rem;
        }

        .header-actions {
            gap: 0.45rem;
            margin-bottom: 0.8rem;
        }

        #h-name-disp {
            letter-spacing: 0.2em;
        }

        .neon-box {
            padding: 1.1rem;
        }

        .modal-container {
            padding: 1.15rem;
            border-radius: 24px;
        }
    }