/* Google Fonts - Raleway */

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



:root {

    color-scheme: dark;

    /* Fresh Modern Dark Theme: Deep Space & Electric Accents */

    --color-bg: #0a0b12;

    --color-surface: rgba(18, 20, 30, 0.95);

    --color-surface-alt: rgba(25, 28, 40, 0.92);

    --color-accent: #60a5fa;

    --color-accent-secondary: #a78bfa;

    --color-accent-muted: rgba(96, 165, 250, 0.25);

    --color-accent-strong: rgba(96, 165, 250, 0.45);

    --color-text: #f1f5f9;

    --color-text-muted: #cbd5e1;

    --color-border: rgba(255, 255, 255, 0.12);

    --color-border-strong: rgba(255, 255, 255, 0.22);

    --color-success: #34d399;

    --color-warning: #fbbf24;

    --color-error: #f87171;

    

    /* Fresh Atmosphere: Purple Haze - Matching show page theme */

    --vertali-haze: linear-gradient(to bottom, rgba(139, 92, 246, 0.2) 0%, rgba(167, 139, 250, 0.15) 40%, rgba(10, 11, 18, 0.4) 100%),

        linear-gradient(to bottom, rgba(167, 139, 250, 0.1) 0%, transparent 100%),

        radial-gradient(circle at 50% 0%, rgba(139, 92, 246, 0.1), transparent 70%);

    --vertali-overlay: linear-gradient(180deg, rgba(10, 11, 18, 0.95), rgba(8, 9, 14, 0.98));

    

    --vertali-glass-surface: linear-gradient(135deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.03));

    --vertali-glass-border: rgba(255, 255, 255, 0.18);

    --vertali-chip: rgba(255, 255, 255, 0.1);

    --vertali-chip-border: rgba(255, 255, 255, 0.15);

    --vertali-focus: rgba(96, 165, 250, 0.4);

    --vertali-border: var(--color-border);

    --vertali-light-text: rgba(241, 245, 249, 0.85);

    --vertali-body-background: var(--vertali-overlay);

    --vertali-body-overlay: var(--vertali-haze);

    --vertali-panel-background: var(--vertali-glass-surface);

    --vertali-surface: var(--vertali-glass-surface);

    --vertali-section-heading-background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(167, 139, 250, 0.15), transparent 70%);

    --vertali-chip-background: var(--vertali-chip);

    --vertali-control-background: rgba(18, 20, 30, 0.9);

    --vertali-control-border: rgba(255, 255, 255, 0.18);

    --vertali-control-placeholder: rgba(203, 213, 225, 0.65);

    --vertali-control-focus-ring: var(--vertali-focus);

    --vertali-control-text: var(--color-text);

    --accent-color: var(--color-accent);

    --accent-soft: var(--color-accent-muted);

    --accent-glow: rgba(96, 165, 250, 0.55);

    --accent-strong: var(--color-accent-strong);

    --accent-contrast: rgba(8, 9, 14, 0.98);

    

    /* Fresh Glass Gradients with Modern Depth - Purple Theme */

    --vertali-glass-primary: linear-gradient(145deg, rgba(30, 35, 50, 0.85), rgba(15, 18, 28, 0.92));

    --vertali-glass-secondary: linear-gradient(155deg, rgba(139, 92, 246, 0.15), rgba(167, 139, 250, 0.08), rgba(10, 11, 18, 0.88));

    --vertali-glass-soft: linear-gradient(150deg, rgba(139, 92, 246, 0.1), rgba(20, 25, 35, 0.78));

    --vertali-glass-ambient: linear-gradient(150deg, rgba(139, 92, 246, 0.12), rgba(167, 139, 250, 0.08), rgba(10, 11, 18, 0.85));

    

    /* Gradient utility variables for consistent card styling */

    --vertali-card-border-blue: rgba(59, 130, 246, 0.3);

    --vertali-card-border-purple: rgba(139, 92, 246, 0.3);

    --vertali-card-bg-blue: linear-gradient(to bottom right, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08), transparent);

    --vertali-card-bg-purple: linear-gradient(to bottom right, rgba(139, 92, 246, 0.15), rgba(139, 92, 246, 0.08), transparent);

    --vertali-glow-blue: 0 0 15px rgba(96, 165, 250, 0.55), 0 0 40px rgba(96, 165, 250, 0.3);

    --vertali-glow-purple: 0 0 15px rgba(167, 139, 250, 0.55), 0 0 40px rgba(167, 139, 250, 0.3);

    

    --vertali-border-soft: rgba(255, 255, 255, 0.18);

    --vertali-border-stronger: rgba(255, 255, 255, 0.28);

    --vertali-chip-surface: rgba(30, 35, 50, 0.78);

    --vertali-chip-elevated: rgba(40, 45, 60, 0.65);

}



/* Consistent color utility classes matching the established theme */

.vertali-blue-primary { color: var(--color-accent); }

.vertali-blue-secondary { color: var(--color-accent-secondary); }

.vertali-blue-bg { background-color: var(--color-accent); }

.vertali-blue-bg-light { background-color: var(--color-accent-muted); }

.vertali-blue-bg-strong { background-color: var(--color-accent-strong); }

.vertali-blue-border { border-color: var(--color-accent); }

.vertali-blue-border-light { border-color: rgba(96, 165, 250, 0.3); }

.vertali-blue-border-strong { border-color: rgba(96, 165, 250, 0.5); }



.vertali-purple-primary { color: var(--color-accent-secondary); }

.vertali-purple-bg { background-color: var(--color-accent-secondary); }

.vertali-purple-bg-light { background-color: rgba(167, 139, 250, 0.25); }

.vertali-purple-border { border-color: var(--color-accent-secondary); }

.vertali-purple-border-light { border-color: rgba(167, 139, 250, 0.3); }



.vertali-gradient-primary { background: linear-gradient(135deg, var(--color-accent-muted), var(--color-accent-strong)); }

.vertali-gradient-secondary { background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(167, 139, 250, 0.15)); }

.vertali-gradient-mixed { background: linear-gradient(135deg, var(--color-accent-muted), rgba(167, 139, 250, 0.15)); }



/*

 * Improve the readability of muted text helpers that rely on Tailwind's

 * runtime utilities. The default opacities (35–55%) were too low against the

 * glassmorphism background, making key labels like "Airdate" and "Next Episode"

 * difficult to see. We override the generated classes with higher contrast

 * values while keeping the relative hierarchy between each step intact. The

 * updated range nudges each step closer to full white to comfortably exceed

 * 4.5:1 contrast on the frosted panels.

 */

.text-white\/35 {

    color: rgba(255, 255, 255, 0.72) !important;

}



.text-white\/40 {

    color: rgba(255, 255, 255, 0.78) !important;

}



.text-white\/45 {

    color: rgba(255, 255, 255, 0.84) !important;

}



.text-white\/50 {

    color: rgba(255, 255, 255, 0.88) !important;

}



.text-white\/55 {

    color: rgba(255, 255, 255, 0.92) !important;

}



[data-palette-ready="fallback"] {

    --accent-color: var(--color-accent) !important;

    --accent-soft: rgba(245, 245, 245, 0.22) !important;

    --accent-glow: rgba(245, 245, 245, 0.32) !important;

    --accent-strong: rgba(225, 225, 225, 0.45) !important;

    --accent-contrast: rgba(12, 12, 12, 0.92) !important;

}



:root,

* {

    scrollbar-width: thin;

    scrollbar-color: rgba(245, 245, 245, 0.45) rgba(18, 20, 24, 0.35);

}



html {

    min-height: 100%;

    background: var(--vertali-body-background);

    scrollbar-gutter: stable both-edges;

}



@media (prefers-reduced-motion: no-preference) {

    @keyframes scrollbarPulse {

        0% {

            box-shadow: 0 0 0 rgba(245, 245, 245, 0.35);

        }



        50% {

            box-shadow: 0 0 16px rgba(245, 245, 245, 0.6);

        }



        100% {

            box-shadow: 0 0 0 rgba(245, 245, 245, 0.35);

        }

    }

}



*::-webkit-scrollbar {

    width: 12px;

    height: 12px;

}



*::-webkit-scrollbar-track {

    border-radius: 999px;

    background:

        linear-gradient(135deg, rgba(245, 245, 245, 0.16), transparent),

        rgba(18, 20, 24, 0.45);

    border: 1px solid rgba(72, 78, 90, 0.378);

    box-shadow: inset 0 0 24px rgba(6, 7, 12, 0.55);

}



*::-webkit-scrollbar-thumb {

    border-radius: 999px;

    border: 2px solid rgba(18, 20, 24, 0.65);

    background:

        linear-gradient(135deg, rgba(245, 245, 245, 0.9), rgba(245, 245, 245, 0.6)),

        linear-gradient(270deg, rgba(220, 220, 220, 0.85), rgba(115, 115, 115, 0.55));

    box-shadow: 0 6px 18px rgba(245, 245, 245, 0.3);

    transition: background 0.3s ease, box-shadow 0.3s ease, transform 0.3s ease;

}



@media (prefers-reduced-motion: no-preference) {

    *::-webkit-scrollbar-thumb {

        animation: scrollbarPulse 3.2s ease-in-out infinite;

    }

}



*::-webkit-scrollbar-thumb:hover {

    background:

        linear-gradient(135deg, rgba(210, 210, 210, 0.95), rgba(245, 245, 245, 0.85)),

        linear-gradient(270deg, rgba(220, 220, 220, 0.95), rgba(115, 115, 115, 0.65));

    box-shadow: 0 10px 24px rgba(245, 245, 245, 0.45);

}



*::-webkit-scrollbar-thumb:active {

    transform: translateY(-1px);

    background:

        linear-gradient(135deg, rgba(170, 170, 170, 0.95), rgba(110, 110, 110, 0.85)),

        linear-gradient(270deg, rgba(185, 185, 185, 0.95), rgba(120, 120, 120, 0.75));

}



*::-webkit-scrollbar-corner {

    background: rgba(18, 20, 24, 0.65);

}



:root[data-theme="light"] {

    color-scheme: light;

    --color-bg: #f5f7fb;

    --color-surface: rgba(255, 255, 255, 0.94);

    --color-surface-alt: rgba(241, 245, 255, 0.88);

    --color-text: #1f2937;

    --color-text-muted: #4b5563;

    --color-border: rgba(148, 163, 184, 0.35);

    --color-border-strong: rgba(100, 116, 139, 0.45);

    --vertali-overlay: linear-gradient(180deg, rgba(231, 236, 249, 0.9), rgba(245, 247, 251, 0.95));

    --vertali-haze: radial-gradient(120% 120% at 0% 0%, rgba(107, 163, 255, 0.2), transparent 58%),

        radial-gradient(90% 90% at 85% 10%, rgba(59, 130, 246, 0.18), transparent 60%);

    --vertali-panel-background: linear-gradient(130deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.75));

    --vertali-surface: var(--vertali-panel-background);

    --vertali-chip: rgba(15, 23, 42, 0.05);

    --vertali-chip-border: rgba(15, 23, 42, 0.08);

    --vertali-control-background: rgba(255, 255, 255, 0.85);

    --vertali-control-border: rgba(148, 163, 184, 0.45);

    --vertali-control-placeholder: rgba(100, 116, 139, 0.7);

    --vertali-control-text: #1f2937;

    --accent-soft: rgba(37, 99, 235, 0.16);

    --accent-glow: rgba(37, 99, 235, 0.22);

    --accent-strong: rgba(37, 99, 235, 0.35);

    --accent-contrast: #0f172a;

}



body {

    position: relative;

    min-height: 100vh;

    background-color: var(--color-bg);

    background-image: var(--vertali-overlay), var(--vertali-haze);

    background-repeat: no-repeat;

    background-size: cover;

    color: var(--color-text);

    font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    transition: background 0.6s ease, color 0.3s ease;

}



.sr-only {

    position: absolute;

    width: 1px;

    height: 1px;

    padding: 0;

    margin: -1px;

    overflow: hidden;

    clip: rect(0, 0, 0, 0);

    white-space: nowrap;

    border: 0;

}



.glass-bar {

    border-bottom: 1px solid var(--color-border);

    background: linear-gradient(180deg, rgba(30, 25, 50, 0.95), rgba(25, 18, 45, 0.85));

    backdrop-filter: blur(32px) saturate(180%);

    border-radius: 0 0 16px 16px;

    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;

}



.site-brand {

    display: flex;

    align-items: center;

    gap: 1rem;

    text-decoration: none;

    color: inherit;

}



.site-brand__mark {

    height: 3rem;

    width: auto;

    filter: drop-shadow(0 10px 20px rgba(18, 20, 24, 0.45));

}



.site-brand__lockup {

    display: flex;

    flex-direction: column;

    gap: 0.3rem;

    line-height: 1.2;

}





.site-brand__title {

    font-size: 0.88rem;

    font-weight: 700;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: var(--color-text-muted);

}



.brand-tagline {

    font-size: 0.78rem;

    font-weight: 500;

    color: rgba(209, 217, 235, 0.8);

    max-width: 24rem;

}



.header-accent {

    display: flex;

    align-items: center;

    gap: 1.5rem;

}



.header-nav {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    flex-wrap: wrap;

}



.header-nav__link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.5rem 1.2rem;

    border-radius: 999px;

    border: 1px solid transparent;

    background: rgba(30, 41, 59, 0.45);

    font-size: 0.72rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(209, 217, 235, 0.75);

    text-decoration: none;

    transition: color 0.25s ease, border-color 0.25s ease, transform 0.25s ease, background 0.25s ease;

}



.header-nav__link:hover,

.header-nav__link:focus-visible {

    color: var(--color-text);

    border-color: rgba(148, 163, 184, 0.5);

    background: rgba(46, 60, 89, 0.65);

    transform: translateY(-1px);

}



.header-accent__strapline {

    display: none;

    font-size: 0.7rem;

    letter-spacing: 0.38em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.65);

}



@media (min-width: 640px) {

    .header-accent__strapline {

        display: block;

    }

}



.header-accent__mode {

    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    border-radius: 999px;

    border: 1px solid var(--color-border);

    background: linear-gradient(140deg, rgba(20, 28, 44, 0.85), rgba(62, 80, 120, 0.32));

    padding: 0.55rem 1.4rem;

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.85);

}



.header-accent__indicator {

    display: inline-flex;

    height: 0.5rem;

    width: 0.5rem;

    border-radius: 999px;

    background: linear-gradient(135deg, rgba(94, 234, 212, 0.95), rgba(59, 130, 246, 0.8));

    box-shadow: 0 0 14px rgba(94, 234, 212, 0.6);

}



.footer-tagline {

    font-size: 0.85rem;

    font-weight: 500;

    color: rgba(214, 222, 237, 0.82);

}



.footer-compliance {

    display: flex;

    align-items: center;

    gap: 0.6rem;

    padding: 0.2rem 0;

    color: rgba(214, 222, 237, 0.82);

    text-decoration: none;

    transition: color 0.2s ease, transform 0.2s ease;

}



.footer-compliance:hover,

.footer-compliance:focus-visible {

    color: #fff;

    transform: translateX(4px);

}



.footer-compliance__text {

    font-size: 0.95rem;

    line-height: 1.3;

}



.footer-link {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    color: rgba(214, 222, 237, 0.82);

    text-decoration: none;

    transition: color 0.2s ease, transform 0.2s ease;

}



.footer-link:hover,

.footer-link:focus-visible {

    color: #fff;

    transform: translateX(2px);

}



.footer-social-link {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 2.75rem;

    width: 2.75rem;

    border-radius: 9999px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(18, 20, 24, 0.35);

    box-shadow: 0 10px 30px rgba(18, 20, 24, 0.35);

    color: rgba(214, 222, 237, 0.82);

    backdrop-filter: blur(20px);

    transition: transform 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;

}



.footer-social-link:hover,

.footer-social-link:focus-visible {

    color: #fff;

    transform: translateY(-3px);

    box-shadow: 0 16px 40px rgba(18, 20, 24, 0.55);

}



a {

    transition: color 0.2s ease, opacity 0.2s ease;

}



.glass-ring {

    border-radius: 9999px;

    border: 1px solid var(--vertali-glass-border);

    background: linear-gradient(140deg, rgba(25, 30, 45, 0.9), rgba(40, 50, 70, 0.5));

    color: var(--color-text-muted);

    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(96, 165, 250, 0.1) inset;

    backdrop-filter: blur(28px) saturate(180%);

    transition: box-shadow 0.35s cubic-bezier(0.4, 0, 0.2, 1), transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), color 0.3s ease, border-color 0.3s ease, background 0.35s ease;

}



.glass-ring:hover,

.glass-ring:focus-visible {

    color: var(--color-text);

    border-color: rgba(96, 165, 250, 0.4);

    background: linear-gradient(140deg, rgba(35, 45, 65, 0.95), rgba(96, 165, 250, 0.25));

    box-shadow: 0 28px 70px rgba(0, 0, 0, 0.6), 0 0 40px rgba(96, 165, 250, 0.2), 0 0 0 1px rgba(96, 165, 250, 0.2) inset;

    transform: translateY(-2px);

}



.glass-ring.is-favorited {

    border-color: rgba(248, 113, 113, 0.55);

    background: linear-gradient(140deg, rgba(40, 22, 30, 0.85), rgba(248, 113, 113, 0.28));

    color: rgba(255, 228, 230, 0.85);

}



.glass-ring.is-favorited:hover,

.glass-ring.is-favorited:focus-visible {

    border-color: rgba(248, 113, 113, 0.75);

    background: linear-gradient(140deg, rgba(60, 25, 38, 0.9), rgba(248, 113, 113, 0.35));

    box-shadow: 0 26px 64px rgba(248, 113, 113, 0.5);

    color: #fff;

}



.frosted-panel {

    position: relative;

    border-radius: 1rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-primary);

    backdrop-filter: blur(12px);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    overflow: hidden;

}



.frosted-panel::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);

    opacity: 0.4;

}



.frosted-panel:hover {

    border-color: var(--vertali-border-stronger);

    transform: translateY(-2px);

    box-shadow: 0 12px 40px rgba(96, 165, 250, 0.15);

}



/* Override frosted-panel for admin login with modern styles - HIGHER SPECIFICITY */

section.admin-login .admin-login__panel.frosted-panel {

    border-radius: 2.5rem;

    border: 1px solid var(--vertali-glass-border) !important;

    background: var(--vertali-glass-primary) !important;

    box-shadow:

        0 48px 120px rgba(0, 0, 0, 0.75),

        0 24px 80px rgba(96, 165, 250, 0.15),

        0 0 0 1px rgba(255, 255, 255, 0.08) inset,

        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;

    backdrop-filter: blur(40px) saturate(200%) !important;

    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1) !important;

    overflow: hidden;

}



section.admin-login .admin-login__panel.frosted-panel::before {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: radial-gradient(circle at 25% 25%, rgba(96, 165, 250, 0.1), transparent 50%),

                radial-gradient(circle at 75% 75%, rgba(167, 139, 250, 0.08), transparent 50%);

    pointer-events: none;

    z-index: -1;

}



section.admin-login .admin-login__panel.frosted-panel:hover {

    border-color: rgba(96, 165, 250, 0.4) !important;

    background: var(--vertali-glass-secondary) !important;

    box-shadow:

        0 56px 140px rgba(0, 0, 0, 0.8),

        0 32px 100px rgba(96, 165, 250, 0.25),

        0 0 40px rgba(96, 165, 250, 0.15),

        0 0 0 1px rgba(96, 165, 250, 0.2) inset !important;

    transform: translateY(-4px);

}



.frosted-panel:hover,

.frosted-panel:focus-within {

    border-color: rgba(96, 165, 250, 0.35);

    transform: translateY(-2px);

    box-shadow:

        0 40px 100px rgba(0, 0, 0, 0.7),

        0 30px 120px rgba(96, 165, 250, 0.25),

        0 0 0 1px rgba(96, 165, 250, 0.15) inset;

    background: linear-gradient(140deg, rgba(28, 36, 52, 0.95), rgba(45, 60, 85, 0.7));

    transform: translateY(-2px);

}



/* Announcement Notification Icon */

.announcement-notification {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.5rem;

    border-radius: 0.5rem;

    background: linear-gradient(135deg, rgba(251, 191, 36, 0.1), rgba(251, 191, 36, 0.05));

    border: 1px solid rgba(251, 191, 36, 0.2);

    transition: all 0.3s ease;

}



.announcement-notification:hover {

    background: linear-gradient(135deg, rgba(251, 191, 36, 0.15), rgba(251, 191, 36, 0.08));

    border-color: rgba(251, 191, 36, 0.3);

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(251, 191, 36, 0.2);

}



.announcement-notification:focus {

    outline: none;

    ring: 2px;

    ring-color: rgba(251, 191, 36, 0.5);

}



.home-spotlight,

.home-grid {

    width: 100%;

    max-width: 72rem;

    margin: 0 auto;

    padding: 0 1.5rem;

}



.home-spotlight {

    padding-top: 4rem;

    padding-bottom: 2rem;

}



.home-grid {

    padding-bottom: 4rem;

}



.home-spotlight__panel {

    position: relative;

    overflow: hidden;

    border-radius: 2.75rem;

    padding: clamp(2.75rem, 5vw, 4rem);

    background: linear-gradient(140deg, rgba(18, 22, 35, 0.95), rgba(40, 55, 85, 0.65));

    border: 1px solid rgba(96, 165, 250, 0.2);

    box-shadow:

        0 40px 100px rgba(0, 0, 0, 0.7),

        0 32px 140px rgba(96, 165, 250, 0.25),

        0 0 0 1px rgba(255, 255, 255, 0.05) inset;

    backdrop-filter: blur(36px) saturate(180%);

}



.home-spotlight__panel > * {

    position: relative;

    z-index: 1;

}



.home-spotlight__atmosphere {

    position: absolute;

    inset: 0;

    opacity: 0.5;

    background: radial-gradient(circle at 10% 50%, rgba(245, 245, 245, 0.25), transparent 60%),

        radial-gradient(circle at 90% 60%, rgba(115, 115, 115, 0.18), transparent 65%);

    mix-blend-mode: screen;

    pointer-events: none;

}



.home-spotlight__content {

    display: grid;

    gap: 3rem;

}



.home-spotlight__intro {

    max-width: 48rem;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.home-spotlight__eyebrow {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.35rem 1.1rem;

    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.2);

    background: rgba(18, 20, 24, 0.4);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.88);

}



.home-spotlight__title {

    font-size: clamp(2.5rem, 4vw, 3.25rem);

    font-weight: 600;

    letter-spacing: -0.02em;

    color: #fff;

}



.home-spotlight__description {

    font-size: 1rem;

    line-height: 1.8;

    color: rgba(214, 222, 237, 0.8);

    max-width: 60ch;

}



.home-spotlight__grid {

    display: grid;

    gap: 2.75rem;

}



.home-spotlight__metrics {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 1.25rem;

}



.spotlight-metric {

    border-radius: 1.75rem;

    border: 1px solid rgba(148, 163, 184, 0.22);

    background: linear-gradient(140deg, rgba(15, 22, 36, 0.85), rgba(38, 53, 79, 0.5));

    padding: 1.25rem 1.5rem;

    box-shadow: 0 22px 48px rgba(8, 12, 20, 0.5);

}



.spotlight-metric__label {

    font-size: 0.75rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.78);

}



.spotlight-metric__value {

    margin-top: 0.85rem;

    font-size: 2.5rem;

    font-weight: 700;

    color: #fff;

    letter-spacing: -0.02em;

}



.spotlight-metric__hint {

    margin-top: 0.45rem;

    font-size: 0.85rem;

    color: rgba(214, 222, 237, 0.74);

    line-height: 1.6;

}



.spotlight-card {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

    border-radius: 2rem;

    border: 1px solid rgba(148, 163, 184, 0.22);

    background: linear-gradient(150deg, rgba(15, 22, 36, 0.85), rgba(42, 58, 88, 0.5));

    padding: 1.75rem 2rem;

    box-shadow: 0 32px 70px rgba(8, 12, 20, 0.55);

}



.spotlight-card__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

}



.spotlight-card__eyebrow {

    font-size: 0.8rem;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.72);

}



.spotlight-card__body {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}



.spotlight-card__statuses {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.5rem;

}



.spotlight-card__title {

    font-size: 1.75rem;

    font-weight: 600;

    letter-spacing: -0.03em;

    color: #fff;

}



.spotlight-card__episode {

    font-size: 0.95rem;

    color: rgba(214, 222, 237, 0.78);

}



.spotlight-card__meta {

    display: grid;

    gap: 1rem;

}



.spotlight-card__meta div {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

    padding: 1rem 1.1rem;

    border-radius: 1.5rem;

    border: 1px solid rgba(148, 163, 184, 0.28);

    background: rgba(18, 20, 24, 0.35);

}



.spotlight-card__meta dt {

    font-size: 0.65rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(72, 78, 90, 0.9);

}



.spotlight-card__meta dd {

    font-size: 0.95rem;

    font-weight: 500;

    color: rgba(234, 234, 234, 0.92);

}



.spotlight-card__hype {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.spotlight-card__hype span {

    font-size: 0.8rem;

    font-weight: 400;

    color: rgba(234, 234, 234, 0.7);

    line-height: 1.5;

}



.spotlight-card__hype--upcoming {

    color: #9be7ff;

}



.spotlight-card__hype--active {

    color: #fceec5;

}



.spotlight-card__hype--muted,

.spotlight-card__hype--past {

    color: rgba(214, 222, 237, 0.8);

}



.spotlight-card__hype--neutral {

    color: rgba(214, 222, 237, 0.88);

}



.spotlight-card__footer {

    display: flex;

    align-items: center;

}



.spotlight-card__cta {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    border-radius: 999px;

    border: 1px solid rgba(96, 165, 250, 0.3);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.25), rgba(96, 165, 250, 0.1));

    color: #fff;

    font-size: 0.9rem;

    font-weight: 600;

    text-decoration: none;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease, border-color 0.3s ease, background 0.3s ease;

    backdrop-filter: blur(12px);

}



.spotlight-card__cta:hover,

.spotlight-card__cta:focus-visible {

    transform: translateY(-3px);

    border-color: rgba(96, 165, 250, 0.5);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.35), rgba(96, 165, 250, 0.15));

    box-shadow: 0 12px 40px rgba(96, 165, 250, 0.3), 0 0 20px rgba(96, 165, 250, 0.2);

}



.spotlight-card__cta.is-disabled {

    border-style: dashed;

    background: rgba(72, 78, 90, 0.42);

    color: rgba(234, 234, 234, 0.6);

    cursor: default;

}



.home-grid__panel {

    position: relative;

    overflow: hidden;

    border-radius: 2.25rem;

    padding: clamp(2.5rem, 4vw, 3.5rem);

}



.poll-panel {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.18), rgba(210, 210, 210, 0.12)), var(--vertali-panel-background);

    border: 1px solid rgba(72, 78, 90, 0.378);

}



.poll-panel__header {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.poll-panel__intro {

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

}



.poll-panel__title {

    font-size: clamp(1.65rem, 3vw, 2.1rem);

    font-weight: 600;

    color: #fff;

}



.poll-panel__subtitle {

    font-size: 0.95rem;

    color: rgba(214, 222, 237, 0.82);

}



.poll-alert {

    padding: 1rem 1.25rem;

    border-radius: 1.5rem;

    font-size: 0.95rem;

    border: 1px solid rgba(72, 78, 90, 0.525);

    background: rgba(72, 78, 90, 0.252);

    color: rgba(234, 234, 234, 0.9);

}



.poll-alert--info {

    border-color: rgba(72, 78, 90, 0.525);

    background: rgba(245, 245, 245, 0.12);

    color: rgba(234, 234, 234, 0.92);

}



.poll-alert--success {

    border-color: rgba(34, 197, 94, 0.35);

    background: rgba(34, 197, 94, 0.16);

    color: rgba(224, 252, 238, 0.95);

}



.poll-alert--warning {

    border-color: rgba(250, 204, 21, 0.35);

    background: rgba(217, 119, 6, 0.18);

    color: rgba(254, 243, 199, 0.95);

}



.poll-alert--error {

    border-color: rgba(239, 68, 68, 0.35);

    background: rgba(239, 68, 68, 0.18);

    color: rgba(254, 226, 226, 0.95);

}



.poll-form {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.poll-form__options {

    margin: 0;

    padding: 0;

    border: none;

    display: grid;

    gap: 0.75rem;

}



.poll-option {

    display: grid;

    grid-template-columns: auto 1fr;

    align-items: center;

    gap: 0.9rem;

    padding: 0.9rem 1.1rem;

    border-radius: 1.4rem;

    border: 1px solid rgba(72, 78, 90, 0.462);

    background: rgba(18, 20, 24, 0.55);

    transition: border-color 0.2s ease, transform 0.2s ease, background 0.2s ease;

}



.poll-option:hover {

    border-color: rgba(205, 205, 205, 0.45);

    background: rgba(40, 68, 140, 0.45);

    transform: translateY(-1px);

}



.poll-option input[type='radio'] {

    appearance: none;

    width: 1.1rem;

    height: 1.1rem;

    border-radius: 999px;

    border: 2px solid rgba(176, 193, 220, 0.6);

    background: rgba(9, 14, 24, 0.85);

    display: grid;

    place-items: center;

    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;

}



.poll-option input[type='radio']:checked {

    border-color: rgba(125, 175, 255, 0.85);

    box-shadow: 0 0 0 4px rgba(56, 152, 255, 0.18);

    background: rgba(15, 23, 42, 0.95);

}



.poll-option__label {

    font-size: 0.98rem;

    color: rgba(234, 234, 234, 0.92);

}



.poll-submit {

    align-self: flex-start;

    padding: 0.75rem 1.75rem;

    border-radius: 999px;

    border: 1px solid rgba(205, 205, 205, 0.55);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.8), rgba(210, 210, 210, 0.85));

    color: rgba(234, 234, 234, 0.96);

    font-size: 0.9rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.poll-submit:hover {

    transform: translateY(-1px);

    box-shadow: 0 18px 32px rgba(245, 245, 245, 0.25);

}



.poll-footnote {

    font-size: 0.8rem;

    color: rgba(214, 222, 237, 0.65);

}



.poll-results {

    display: grid;

    gap: 1rem;

}



.poll-result {

    padding: 1rem 1.25rem;

    border-radius: 1.5rem;

    border: 1px solid rgba(72, 78, 90, 0.462);

    background: rgba(18, 20, 24, 0.5);

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    transition: border-color 0.2s ease, background 0.2s ease;

}



.poll-result.is-selected {

    border-color: rgba(245, 245, 245, 0.55);

    background: rgba(90, 90, 90, 0.45);

}



.poll-result__header {

    display: flex;

    align-items: baseline;

    justify-content: space-between;

    gap: 0.75rem;

}



.poll-result__label {

    font-size: 1rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.95);

}



.poll-result__stat {

    font-size: 0.85rem;

    color: rgba(214, 222, 237, 0.72);

}



.poll-result__meter {

    position: relative;

    width: 100%;

    height: 0.65rem;

    border-radius: 999px;

    background: rgba(72, 78, 90, 0.378);

    overflow: hidden;

}



.poll-result__meter span {

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.9), rgba(210, 210, 210, 0.85));

    border-radius: inherit;

}



.poll-total {

    font-size: 0.85rem;

    color: rgba(234, 234, 234, 0.7);

}



.poll-results + .poll-footnote {

    margin-top: 0.5rem;

}



.poll-results + .poll-footnote + .poll-total {

    margin-top: -0.5rem;

}



.home-grid__title {

    font-size: clamp(2rem, 3vw, 2.5rem);

    font-weight: 600;

    color: #fff;

}



@media (min-width: 640px) {

    .home-spotlight__metrics {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (min-width: 1024px) {

    .home-spotlight__content {

        gap: 3.5rem;

    }



    .home-spotlight__grid {

        grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);

        align-items: start;

    }



    .home-spotlight__metrics {

        grid-template-columns: repeat(4, minmax(0, 1fr));

    }



    .spotlight-card {

        align-self: stretch;

    }

}



:root[data-theme="light"] .home-spotlight__panel {

    background: linear-gradient(135deg, rgba(191, 219, 254, 0.85), rgba(224, 231, 255, 0.82));

    box-shadow: 0 20px 60px rgba(18, 20, 24, 0.2);

}



:root[data-theme="light"] .home-spotlight__atmosphere {

    opacity: 0.35;

}



:root[data-theme="light"] .home-spotlight__eyebrow {

    border-color: rgba(18, 20, 24, 0.12);

    background: rgba(234, 234, 234, 0.7);

    color: rgba(90, 90, 90, 0.85);

}



:root[data-theme="light"] .home-spotlight__title {

    color: #10131a;

}



:root[data-theme="light"] .home-spotlight__description {

    color: rgba(30, 41, 59, 0.75);

}



:root[data-theme="light"] .spotlight-metric {

    border-color: rgba(72, 78, 90, 0.378);

    background: linear-gradient(140deg, rgba(255, 255, 255, 0.82), rgba(234, 234, 234, 0.6));

    box-shadow: 0 18px 36px rgba(72, 78, 90, 0.525);

}



:root[data-theme="light"] .spotlight-metric__label {

    color: rgba(30, 41, 59, 0.6);

}



:root[data-theme="light"] .spotlight-metric__value {

    color: #10131a;

}



:root[data-theme="light"] .spotlight-metric__hint {

    color: rgba(30, 41, 59, 0.65);

}



:root[data-theme="light"] .spotlight-card {

    border-color: rgba(72, 78, 90, 0.504);

    background: linear-gradient(150deg, rgba(234, 234, 234, 0.92), rgba(214, 222, 237, 0.82));

    box-shadow: 0 28px 50px rgba(72, 78, 90, 0.588);

}



:root[data-theme="light"] .spotlight-card__eyebrow {

    color: rgba(30, 41, 59, 0.55);

}



:root[data-theme="light"] .spotlight-card__title {

    color: #10131a;

}

:root[data-theme="light"] .spotlight-card__eyebrow {

    color: rgba(30, 41, 59, 0.55);

}



:root[data-theme="light"] .spotlight-card__title {

    color: #10131a;

}



:root[data-theme="light"] .spotlight-card__episode {

    color: rgba(30, 41, 59, 0.65);

}



:root[data-theme="light"] .spotlight-card__meta div {

    border-color: rgba(72, 78, 90, 0.525);

    background: linear-gradient(135deg, rgba(234, 234, 234, 0.9), rgba(214, 222, 237, 0.72));

}



:root[data-theme="light"] .spotlight-card__meta dt {

    color: rgba(30, 41, 59, 0.55);

}



:root[data-theme="light"] .spotlight-card__meta dd {

    color: rgba(18, 20, 24, 0.85);

}



:root[data-theme="light"] .spotlight-card__hype span {

    color: rgba(30, 41, 59, 0.6);

}



:root[data-theme="light"] .spotlight-card__cta {

    border-color: rgba(90, 90, 90, 0.28);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.22), rgba(205, 205, 205, 0.18));

    color: #1e3a8a;

}



:root[data-theme="light"] .spotlight-card__cta.is-disabled {

    background: rgba(234, 234, 234, 0.6);

    color: rgba(71, 85, 105, 0.75);

}



:root[data-theme="light"] .home-grid__panel {

    box-shadow: 0 24px 48px rgba(72, 78, 90, 0.462);

}



:root[data-theme="light"] .home-grid__title {

    color: #10131a;

}



:root[data-theme="light"] .poll-panel {

    background: linear-gradient(135deg, rgba(191, 219, 254, 0.68), rgba(224, 231, 255, 0.6));

    border-color: rgba(72, 78, 90, 0.735);

}



:root[data-theme="light"] .poll-option {

    background: rgba(234, 234, 234, 0.9);

    border-color: rgba(72, 78, 90, 0.735);

}



:root[data-theme="light"] .poll-option:hover {

    background: rgba(219, 234, 254, 0.9);

    border-color: rgba(245, 245, 245, 0.55);

}



:root[data-theme="light"] .poll-submit {

    border-color: rgba(245, 245, 245, 0.45);

    color: #10131a;

}



:root[data-theme="light"] .poll-footnote,

:root[data-theme="light"] .poll-total {

    color: rgba(71, 85, 105, 0.75);

}



:root[data-theme="light"] .poll-result {

    background: rgba(234, 234, 234, 0.92);

    border-color: rgba(72, 78, 90, 0.588);

}



:root[data-theme="light"] .poll-result.is-selected {

    border-color: rgba(245, 245, 245, 0.55);

    background: rgba(219, 234, 254, 0.85);

}



:root[data-theme="light"] .poll-result__label {

    color: rgba(18, 20, 24, 0.85);

}



:root[data-theme="light"] .poll-result__stat {

    color: rgba(71, 85, 105, 0.7);

}



:root[data-theme="light"] .poll-alert {

    border-color: rgba(72, 78, 90, 0.9);

    color: rgba(30, 41, 59, 0.85);

}



:root[data-theme="light"] .poll-alert--info {

    background: rgba(191, 219, 254, 0.6);

}



:root[data-theme="light"] .poll-alert--success {

    background: rgba(167, 243, 208, 0.6);

    color: rgba(22, 101, 52, 0.85);

}



:root[data-theme="light"] .poll-alert--warning {

    background: rgba(253, 230, 138, 0.6);

    color: rgba(124, 45, 18, 0.85);

}



:root[data-theme="light"] .poll-alert--error {

    background: rgba(254, 202, 202, 0.6);

    color: rgba(153, 27, 27, 0.85);

}



.next-episode-card {

    position: relative;

    overflow-wrap: anywhere;

    word-break: break-word;

}



.next-episode-card .next-episode-title,

.next-episode-card .next-episode-meta {

    overflow-wrap: anywhere;

    word-break: break-word;

}





.section-heading {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.25rem 0.85rem;

    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: var(--vertali-section-heading-background);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.25em;

    text-transform: uppercase;

}



.panel-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.5rem;

}



.panel-header > div:first-child {

    max-width: 70ch;

}



.muted-description {

    color: var(--vertali-light-text);

}



/* Enhanced Legal Document Styling */

.legal-document {

    background: linear-gradient(145deg, rgba(30, 35, 50, 0.85), rgba(15, 18, 28, 0.92));

    border: 1px solid rgba(255, 255, 255, 0.18);

    border-radius: 1.5rem;

    backdrop-filter: blur(20px);

    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

}



.legal-header {

    background: linear-gradient(155deg, rgba(59, 130, 246, 0.15), rgba(139, 92, 246, 0.08), rgba(10, 11, 18, 0.88));

    border-bottom: 1px solid rgba(255, 255, 255, 0.18);

}



.legal-content {

    line-height: 1.8;

    color: rgba(241, 245, 249, 0.85);

}



.legal-content h2 {

    color: white;

    font-weight: 600;

    margin-top: 2rem;

    margin-bottom: 1rem;

    padding-bottom: 0.5rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.18);

}



.legal-content h3 {

    color: #60a5fa;

    font-weight: 500;

    margin-top: 1.5rem;

    margin-bottom: 0.75rem;

}



.legal-content ul, .legal-content ol {

    margin: 1rem 0;

    padding-left: 1.5rem;

}



.legal-content li {

    margin: 0.5rem 0;

}



.legal-content a {

    color: #60a5fa;

    text-decoration: underline;

    transition: color 0.3s ease;

}



.legal-content a:hover {

    color: white;

}



.legal-content strong {

    color: white;

    font-weight: 600;

}



.legal-content table {

    margin: 1.5rem 0;

    border-collapse: collapse;

}



.legal-content th {

    background: rgba(96, 165, 250, 0.25);

    color: white;

    font-weight: 600;

    padding: 1rem;

    text-align: left;

    border-bottom: 2px solid #60a5fa;

}



.legal-content td {

    padding: 1rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.18);

}



.legal-content tr:hover {

    background: linear-gradient(150deg, rgba(59, 130, 246, 0.1), rgba(20, 25, 35, 0.78));

}



.stat-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    border-radius: 999px;

    border: 1px solid rgba(96, 165, 250, 0.3);

    background: rgba(96, 165, 250, 0.25);

    color: #60a5fa;

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    backdrop-filter: blur(8px);

    box-shadow: 0 0 20px rgba(96, 165, 250, 0.15);

    transition: all 0.3s ease;

}



.stat-chip:hover {

    border-color: rgba(96, 165, 250, 0.5);

    background: rgba(96, 165, 250, 0.45);

    color: white;

    transform: translateY(-1px);

    box-shadow: 0 0 30px rgba(96, 165, 250, 0.25);

}



.timeline {

    display: grid;

    gap: 1.25rem;

}



.timeline-item {

    position: relative;

    padding: 2rem;

    border-radius: 2rem;

    border: 1px solid rgba(96, 165, 250, 0.15);

    background: linear-gradient(145deg, rgba(18, 20, 30, 0.85), rgba(25, 28, 40, 0.75));

    backdrop-filter: blur(20px) saturate(180%);

    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(96, 165, 250, 0.1) inset;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.3s ease, background 0.3s ease, box-shadow 0.3s ease;

}



.timeline-item:hover {

    transform: translateY(-6px);

    border-color: rgba(96, 165, 250, 0.3);

    background: linear-gradient(145deg, rgba(30, 35, 50, 0.92), rgba(40, 45, 60, 0.85));

    box-shadow: 0 16px 48px rgba(96, 165, 250, 0.2), 0 0 0 1px rgba(96, 165, 250, 0.2) inset, 0 0 40px rgba(96, 165, 250, 0.1);

}



.timeline-item > * {

    margin-left: 0;

}



.data-table thead {

    background: rgba(72, 78, 90, 0.168);

    text-transform: uppercase;

    letter-spacing: 0.2em;

    font-size: 0.7rem;

}



.data-table tbody tr {

    transition: background-color 0.2s ease;

}



.data-table tbody tr:hover {

    background-color: rgba(72, 78, 90, 0.126);

}



.table-scroll {

    overflow-x: auto;

    scrollbar-width: thin;

    scrollbar-color: rgba(72, 78, 90, 0.84) transparent;

    -webkit-overflow-scrolling: touch;

}



.table-scroll::-webkit-scrollbar {

    height: 8px;

}



.table-scroll::-webkit-scrollbar-track {

    background: transparent;

}



.table-scroll::-webkit-scrollbar-thumb {

    background: rgba(72, 78, 90, 0.735);

    border-radius: 999px;

}



.table-scroll::-webkit-scrollbar-thumb:hover {

    background: rgba(72, 78, 90, 0.9);

}



.form-panel {

    position: relative;

    overflow: hidden;

    border-radius: 2rem;

    border: 1px solid var(--color-border);

    background: linear-gradient(140deg, rgba(15, 23, 42, 0.88), rgba(46, 70, 110, 0.45));

    box-shadow: 0 32px 70px rgba(8, 12, 20, 0.55);

    backdrop-filter: blur(26px);

}



.form-helper {

    font-size: 0.75rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: var(--vertali-light-text);

}



.input-field {

    width: 100%;

    border-radius: 1.5rem;

    border: 1px solid var(--vertali-control-border);

    background: var(--vertali-control-background);

    padding: 0.85rem 1.15rem;

    color: var(--vertali-control-text);

    -webkit-appearance: none;

    -moz-appearance: none;

    appearance: none;

    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;

}



/* Global form element styling - ensure dark backgrounds throughout */

input[type="text"],

input[type="email"],

input[type="password"],

input[type="search"],

input[type="number"],

input[type="tel"],

input[type="url"],

textarea,

select {

    background-color: transparent !important;

    background-image: linear-gradient(to bottom right, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.08), transparent) !important;

    color: white !important;

}



input[type="text"]:focus,

input[type="email"]:focus,

input[type="password"]:focus,

input[type="search"]:focus,

input[type="number"]:focus,

input[type="tel"]:focus,

input[type="url"]:focus,

textarea:focus,

select:focus {

    background-image: linear-gradient(to bottom right, rgba(59, 130, 246, 0.2), rgba(59, 130, 246, 0.12), transparent) !important;

}



/* Select dropdown options */

select option {

    background-color: #0a0b12 !important;

    color: white !important;

}



input.input-field,

textarea.input-field,

select.input-field {

    background: var(--vertali-control-background);

    color: var(--vertali-control-text);

}



select.input-field {

    background-image: none;

}



.input-field::placeholder {

    color: var(--vertali-control-placeholder);

}



.input-field:focus-visible {

    outline: none;

    border-color: rgba(96, 165, 250, 0.5);

    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2), 0 0 20px rgba(96, 165, 250, 0.15);

    background: rgba(18, 22, 32, 0.95);

}



.support-form__control {

    width: 100%;

    border-radius: 1.5rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-chip-surface);

    color: var(--vertali-control-text);

    padding: 0.85rem 1.15rem;

    font-size: 0.95rem;

    line-height: 1.6;

    transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease, color 0.2s ease;

    appearance: none;

}



.support-form__control::placeholder {

    color: rgba(183, 196, 214, 0.65);

}



.support-form__control:focus-visible {

    outline: none;

    border-color: var(--vertali-focus);

    box-shadow: 0 0 0 3px rgba(107, 163, 255, 0.32);

    background: rgba(8, 12, 24, 0.92);

}



.support-form__control--error {

    border-color: rgba(239, 68, 68, 0.6);

    box-shadow: 0 0 0 2px rgba(239, 68, 68, 0.18);

}



.support-form__control--error:focus-visible {

    border-color: rgba(239, 68, 68, 0.75);

    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.28);

}



.support-form__control--select {

    padding-right: 3rem;

    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%23E2E8F0' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E");

    background-repeat: no-repeat;

    background-position: right 1.2rem center;

    background-size: 0.85rem;

}



.support-form__control--select::-ms-expand {

    display: none;

}



.support-form__control option {

    background: #10131a;

    color: #eaeaea;

}



.support-form__control--textarea {

    min-height: 9rem;

    resize: vertical;

}



.support-shell {

    position: relative;

}



.support-panel {

    display: flex;

    flex-direction: column;

    gap: 3rem;

}



.support-hero {

    display: grid;

    gap: 2.5rem;

    align-items: stretch;

}



@media (min-width: 1024px) {

    .support-hero {

        grid-template-columns: minmax(0, 1fr);

    }

}



.support-hero__intro {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}



.support-hero__copy {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.support-hero__title {

    font-size: clamp(2rem, 2.4vw + 1.2rem, 3rem);

    font-weight: 600;

    color: #fff;

    line-height: 1.2;

}



.support-hero__description {

    color: rgba(214, 222, 237, 0.78);

    line-height: 1.7;

    font-size: 0.98rem;

}



.support-hero__pills {

    display: grid;

    gap: 1rem;

}



@media (min-width: 640px) {

    .support-hero__pills {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (min-width: 1024px) {

    .support-hero__pills {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



.support-pill {

    border-radius: 1.5rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-secondary);

    padding: 1.25rem 1.35rem;

    display: flex;

    flex-direction: column;

    gap: 0.45rem;

    box-shadow: 0 20px 44px rgba(6, 12, 24, 0.38);

}



.support-pill__eyebrow {

    text-transform: uppercase;

    letter-spacing: 0.32em;

    font-size: 0.65rem;

    color: rgba(148, 197, 255, 0.92);

}



.support-pill__body {

    margin: 0;

    font-size: 0.9rem;

    color: rgba(217, 226, 240, 0.9);

    line-height: 1.65;

}



.support-hero__stats {

    display: grid;

    gap: 1rem;

}



@media (min-width: 640px) {

    .support-hero__stats {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (min-width: 1024px) {

    .support-hero__stats {

        grid-template-columns: 1fr;

    }

}



.support-stat {

    border-radius: 1.75rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-primary);

    padding: 1.5rem 1.75rem;

    box-shadow: 0 24px 55px rgba(6, 12, 24, 0.4);

}



.support-stat__label {

    display: block;

    margin-bottom: 0.85rem;

    text-transform: uppercase;

    letter-spacing: 0.32em;

    font-size: 0.65rem;

    color: rgba(186, 197, 214, 0.82);

}



.support-stat__value {

    margin: 0;

    font-size: clamp(2.25rem, 2vw + 1.2rem, 3rem);

    font-weight: 600;

    color: #fff;

    line-height: 1.1;

}



.support-stat__meta {

    margin-top: 0.6rem;

    font-size: 0.75rem;

    letter-spacing: 0.08em;

    color: rgba(199, 210, 224, 0.7);

}



.support-highlights {

    display: grid;

    gap: 1.5rem;

}



@media (min-width: 640px) {

    .support-highlights {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (min-width: 1024px) {

    .support-highlights {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



.support-highlight-card {

    border-radius: 1.75rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-soft);

    padding: 1.75rem;

    display: flex;

    flex-direction: column;

    gap: 1.1rem;

    min-height: 100%;

}



.support-highlight-card__eyebrow {

    text-transform: uppercase;

    letter-spacing: 0.32em;

    font-size: 0.65rem;

    color: rgba(189, 201, 220, 0.8);

}



.support-highlight-card__list {

    margin: 0;

    padding: 0;

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    font-size: 0.92rem;

    color: rgba(214, 222, 237, 0.82);

    line-height: 1.65;

}



.support-flow__list {

    margin: 0;

    padding: 0;

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.support-flow__step {

    display: flex;

    gap: 1rem;

    align-items: flex-start;

    border-radius: 1.25rem;

    border: 1px solid rgba(245, 245, 245, 0.18);

    background: rgba(18, 20, 24, 0.55);

    padding: 1rem 1.25rem;

}



.support-flow__step-number {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 3rem;

    padding: 0.6rem 0.85rem;

    border-radius: 999px;

    border: 1px solid rgba(225, 225, 225, 0.35);

    background: rgba(245, 245, 245, 0.15);

    text-transform: uppercase;

    letter-spacing: 0.32em;

    font-size: 0.7rem;

    color: rgba(191, 219, 254, 0.85);

}



.support-flow__step-body h3 {

    margin: 0 0 0.35rem;

    font-size: 1rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.95);

}



.support-flow__step-body p {

    margin: 0;

    font-size: 0.9rem;

    color: rgba(234, 234, 234, 0.7);

    line-height: 1.65;

}



.support-content-grid {

    display: grid;

    gap: 2.5rem;

}



@media (min-width: 1280px) {

    .support-content-grid {

        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);

    }

}



.support-form-card {

    border-radius: 1.75rem;

    border: 1px solid rgba(72, 78, 90, 0.378);

    background: rgba(18, 20, 24, 0.58);

    padding: 2rem;

    box-shadow: 0 22px 48px rgba(8, 11, 19, 0.35);

    backdrop-filter: blur(18px);

}



@media (max-width: 639px) {

    .support-form-card {

        padding: 1.5rem;

    }

}



.support-aside {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}





.support-aside__section {

    border-radius: 1.75rem;

    border: 1px solid rgba(96, 110, 141, 0.52);

    background: rgba(19, 25, 38, 0.72);

    padding: 1.75rem;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    font-size: 0.9rem;

    color: rgba(235, 241, 255, 0.92);

    line-height: 1.65;

}



.support-aside__section--muted {

    background: rgba(19, 25, 38, 0.64);

}



.support-aside__section--accent {

    border-color: rgba(245, 245, 245, 0.32);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.22), transparent 60%), rgba(18, 20, 24, 0.6);

}



.support-aside__eyebrow {

    text-transform: uppercase;

    letter-spacing: 0.32em;

    font-size: 0.65rem;

    color: rgba(173, 204, 255, 0.92);

    margin: 0;

}



.support-aside__list {

    margin: 0;

    padding: 0;

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.85rem;

}



.support-aside__body {

    margin: 0;

}



.support-link {

    color: rgba(191, 219, 254, 0.85);

    text-decoration: underline;

    text-decoration-style: dotted;

    text-decoration-thickness: 1px;

    text-underline-offset: 0.35em;

    transition: color 0.2s ease;

}



.support-link:hover,

.support-link:focus-visible {

    color: rgba(255, 255, 255, 0.95);

}



.input-field:-webkit-autofill,

.input-field:-webkit-autofill:hover,

.input-field:-webkit-autofill:focus {

    -webkit-text-fill-color: var(--vertali-control-text);

    -webkit-box-shadow: 0 0 0px 1000px var(--vertali-control-background) inset;

    transition: background-color 9999s ease-in-out 0s;

}



.input-field:-moz-autofill {

    color: var(--vertali-control-text);

    box-shadow: 0 0 0px 1000px var(--vertali-control-background) inset;

}



.form-switch {

    position: relative;

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 0.85rem 1rem;

    border-radius: 1.25rem;

    border: 1px solid rgba(72, 78, 90, 0.588);

    background: linear-gradient(135deg, rgba(18, 20, 24, 0.55), rgba(90, 90, 90, 0.25));

    box-shadow: 0 16px 28px rgba(8, 11, 24, 0.45);

    cursor: pointer;

    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;

}



.form-switch:hover,

.form-switch:focus-within {

    border-color: rgba(225, 225, 225, 0.5);

    background: linear-gradient(135deg, rgba(90, 90, 90, 0.45), rgba(245, 245, 245, 0.35));

    box-shadow: 0 22px 40px rgba(0, 162, 196, 0.35);

    transform: translateY(-2px);

}



.form-switch__input {

    position: absolute;

    inset: 0;

    width: 100%;

    height: 100%;

    opacity: 0;

    margin: 0;

    cursor: pointer;

}



.form-switch__control {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: flex-start;

    width: 3.25rem;

    height: 1.6rem;

    border-radius: 9999px;

    background: rgba(72, 78, 90, 0.735);

    box-shadow: inset 0 0 0 1px rgba(72, 78, 90, 0.84);

    transition: background 0.25s ease, box-shadow 0.25s ease;

    pointer-events: none;

}



.form-switch__thumb {

    position: absolute;

    left: 0.25rem;

    top: 50%;

    width: 1.2rem;

    height: 1.2rem;

    border-radius: 9999px;

    background: linear-gradient(135deg, rgba(234, 234, 234, 0.95), rgba(234, 234, 234, 0.9));

    box-shadow: 0 8px 16px rgba(18, 20, 24, 0.35);

    transform: translateY(-50%);

    transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;

}



.form-switch__label {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    flex: 1 1 auto;

    color: rgba(214, 222, 237, 0.82);

}



.form-switch__title {

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.85);

}



.form-switch__description {

    font-size: 0.75rem;

    line-height: 1.35;

    color: rgba(214, 222, 237, 0.72);

}



.form-switch__input:focus-visible + .form-switch__control {

    outline: 2px solid rgba(225, 225, 225, 0.7);

    outline-offset: 3px;

}



.form-switch__input:checked + .form-switch__control {

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.7), rgba(245, 245, 245, 0.85));

    box-shadow: inset 0 0 0 1px rgba(165, 243, 252, 0.65), 0 18px 32px rgba(13, 148, 136, 0.4);

}



.form-switch__input:checked + .form-switch__control .form-switch__thumb {

    transform: translate(1.65rem, -50%);

    background: linear-gradient(135deg, rgba(234, 234, 234, 0.98), rgba(234, 234, 234, 0.95));

    box-shadow: 0 12px 20px rgba(210, 210, 210, 0.38);

}



:root[data-theme="light"] .form-switch {

    border-color: rgba(18, 20, 24, 0.08);

    background: linear-gradient(135deg, rgba(214, 222, 237, 0.85), rgba(191, 219, 254, 0.55));

    box-shadow: 0 16px 32px rgba(18, 20, 24, 0.14);

}



:root[data-theme="light"] .form-switch:hover,

:root[data-theme="light"] .form-switch:focus-within {

    border-color: rgba(245, 245, 245, 0.35);

    background: linear-gradient(135deg, rgba(191, 219, 254, 0.9), rgba(225, 225, 225, 0.65));

    box-shadow: 0 22px 42px rgba(245, 245, 245, 0.25);

}



:root[data-theme="light"] .form-switch__label {

    color: rgba(18, 20, 24, 0.75);

}



:root[data-theme="light"] .form-switch__title {

    color: rgba(18, 20, 24, 0.82);

}



:root[data-theme="light"] .form-switch__description {

    color: rgba(18, 20, 24, 0.6);

}



select.input-field.input-field--no-chevron {

    padding-right: 1.15rem;

    background-image: none;

    background-position: initial;

    background-repeat: initial;

    background-size: auto;

}



select.input-field.input-field--no-chevron:focus-visible {

    background-image: none;

}



.stacked-list {

    display: grid;

    gap: 1rem;

}



.stacked-list-item {

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    padding: 1.25rem 1.5rem;

    background: rgba(72, 78, 90, 0.126);

    transition: border-color 0.2s ease, transform 0.2s ease;

}



.stacked-list-item:hover {

    border-color: rgba(255, 255, 255, 0.3);

    transform: translateY(-3px);

}



.badge-muted {

    display: block;

    width: 100%;

    border-radius: 1rem;

    padding: 0.75rem 1rem;

    background: rgba(72, 78, 90, 0.252);

    border: 1px solid rgba(72, 78, 90, 0.588);

    font-size: 0.8rem;

    letter-spacing: 0.02em;

    text-transform: none;

    line-height: 1.6;

    word-break: break-word;

    text-align: left;

}



.divider {

    height: 1px;

    width: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent);

}



.callout {

    border-radius: 1.5rem;

    border: 1px solid rgba(52, 211, 153, 0.3);

    background: linear-gradient(140deg, rgba(52, 211, 153, 0.2), rgba(52, 211, 153, 0.05));

    color: #a7f3d0;

    padding: 1.25rem 1.5rem;

    backdrop-filter: blur(12px);

    box-shadow: 0 8px 24px rgba(52, 211, 153, 0.15);

    transition: box-shadow 0.3s ease, border-color 0.3s ease;

}



.callout:hover {

    border-color: rgba(52, 211, 153, 0.4);

    box-shadow: 0 12px 32px rgba(52, 211, 153, 0.2);

}



.callout--error {

    border-color: rgba(248, 113, 113, 0.4);

    background: linear-gradient(140deg, rgba(248, 113, 113, 0.22), rgba(248, 113, 113, 0.06));

    color: #fee2e2;

    box-shadow: 0 8px 24px rgba(248, 113, 113, 0.15);

}



.callout--error:hover {

    border-color: rgba(248, 113, 113, 0.5);

    box-shadow: 0 12px 32px rgba(248, 113, 113, 0.2);

}



.callout--info {

    border-color: rgba(96, 165, 250, 0.4);

    background: linear-gradient(140deg, rgba(96, 165, 250, 0.22), rgba(96, 165, 250, 0.06));

    color: #dbeafe;

    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.15);

}



.callout--info:hover {

    border-color: rgba(96, 165, 250, 0.5);

    box-shadow: 0 12px 32px rgba(96, 165, 250, 0.2);

}



.callout--warning {

    border-color: rgba(251, 191, 36, 0.4);

    background: linear-gradient(140deg, rgba(251, 191, 36, 0.22), rgba(251, 191, 36, 0.06));

    color: #fef3c7;

    box-shadow: 0 8px 24px rgba(251, 191, 36, 0.15);

}



.callout--warning:hover {

    border-color: rgba(251, 191, 36, 0.5);

    box-shadow: 0 12px 32px rgba(251, 191, 36, 0.2);

}



.link-arrow {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.88);

}



.link-arrow svg {

    transition: transform 0.2s ease;

}



.link-arrow:hover svg {

    transform: translateX(4px);

}



.conversation {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    margin: 0;

    padding: 0;

}



.conversation__message {

    border-left: 2px solid rgba(72, 78, 90, 0.63);

    padding-left: 1rem;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.conversation__message--team {

    border-color: rgba(245, 245, 245, 0.45);

}



.conversation__message--requester {

    border-color: rgba(244, 114, 182, 0.45);

}



.conversation__meta {

    display: flex;

    justify-content: space-between;

    font-size: 0.75rem;

    color: rgba(214, 222, 237, 0.65);

    text-transform: uppercase;

    letter-spacing: 0.12em;

}



.conversation__author {

    font-weight: 600;

    color: rgba(214, 222, 237, 0.85);

}



.conversation__body {

    font-size: 0.92rem;

    line-height: 1.6;

    color: rgba(214, 222, 237, 0.88);

}



.conversation__form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.conversation__field {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.conversation__label {

    font-size: 0.78rem;

    text-transform: uppercase;

    letter-spacing: 0.18em;

    color: rgba(234, 234, 234, 0.5);

}



.conversation__time {

    font-weight: 500;

}



.request-card__section--conversation {

    border-top: 1px solid rgba(72, 78, 90, 0.252);

    margin-top: 2rem;

    padding-top: 2rem;

}



.request-card__conversation-header {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    margin-bottom: 1.5rem;

}



.request-card__conversation-link {

    font-size: 0.75rem;

    color: rgba(234, 234, 234, 0.6);

}



.request-card__conversation-url {

    font-family: "JetBrains Mono", monospace;

    font-size: 0.7rem;

    color: rgba(214, 222, 237, 0.82);

    padding: 0.3rem 0.6rem;

    border-radius: 0.75rem;

    background: rgba(72, 78, 90, 0.252);

}



.request-card__conversation-empty,

.request-status__conversation-empty {

    font-size: 0.9rem;

    color: rgba(214, 222, 237, 0.72);

}



.request-status__grid {

    display: grid;

    gap: 2.5rem;

}



.request-status__tabset {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.request-status__tablist {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    justify-content: center;

    padding-bottom: 0.75rem;

    border-bottom: 1px solid var(--vertali-border-soft);

}



.request-status__tab {

    position: relative;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.4rem;

    padding: 0.65rem 1.4rem;

    border: 1px solid var(--vertali-border-soft);

    border-radius: 999px;

    background: rgba(10, 16, 28, 0.72);

    color: rgba(214, 222, 237, 0.72);

    font-size: 0.78rem;

    font-weight: 600;

    letter-spacing: 0.26em;

    text-transform: uppercase;

    cursor: pointer;

    transition: color 0.3s ease, background 0.3s ease, transform 0.3s ease, border-color 0.3s ease;

}



.request-status__tab:is(:hover, :focus-visible) {

    color: rgba(236, 244, 255, 0.92);

    transform: translateY(-1px);

    border-color: rgba(107, 163, 255, 0.45);

}



.request-status__tab.is-active {

    background: var(--vertali-glass-secondary);

    border-color: rgba(107, 163, 255, 0.6);

    color: #f8fbff;

    box-shadow: 0 16px 30px rgba(46, 115, 230, 0.28);

}



.request-status__panels {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.request-status__panel {

    display: block;

}



.request-status__panel[hidden] {

    display: none !important;

}



@media (min-width: 1024px) {

    .request-status__grid {

        grid-template-columns: minmax(0, 1fr);

    }



    .request-status__summary {

        margin: 0 auto;

        max-width: 960px;

        width: 100%;

    }

}



.request-status__hero {

    display: flex;

    gap: 1.5rem;

    align-items: flex-start;

}



.request-status__poster {

    width: 160px;

    height: 224px;

    object-fit: cover;

    border-radius: 1.25rem;

    box-shadow: 0 20px 45px rgba(8, 11, 19, 0.55);

}



.request-status__poster--placeholder {

    background: linear-gradient(180deg, rgba(72, 78, 90, 0.42), rgba(30, 41, 59, 0.2));

}



.request-status__hero-content {

    display: flex;

    flex-direction: column;

    gap: 0.85rem;

}



.status-board {

    position: relative;

    display: grid;

    gap: 1.75rem;

    padding: 2rem 2.25rem;

    border-radius: 1.9rem;

    border: 1px solid rgba(148, 163, 184, 0.24);

    background:

        radial-gradient(circle at -10% -20%, rgba(107, 163, 255, 0.18), transparent 55%),

        radial-gradient(circle at 110% 10%, rgba(94, 234, 212, 0.15), transparent 60%),

        rgba(15, 22, 36, 0.78);

    box-shadow: 0 32px 70px rgba(8, 12, 20, 0.55);

    overflow: hidden;

}



.status-board__hero,

.status-board__meta {

    position: relative;

    z-index: 1;

}



.status-board__hero {

    flex-direction: column;

    gap: 1.75rem;

}



@media (min-width: 768px) {

    .status-board__hero {

        flex-direction: row;

        align-items: flex-start;

    }

}



.status-board__meta {

    display: flex;

    align-items: stretch;

}



.status-board__insights {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    width: 100%;

}



.status-board__insights .request-status__insight-grid {

    height: 100%;

}



.status-board__insights .insight-card {

    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(34, 52, 84, 0.5));

    border-color: rgba(148, 163, 184, 0.28);

}

@media (min-width: 1024px) {

    .status-board {

        grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.9fr);

        align-items: stretch;

    }

}



@media (max-width: 640px) {

    .status-board {

        padding: 1.6rem 1.65rem;

    }

}



.status-progress {

    display: grid;

    gap: 1.6rem;

    padding: 1.85rem 2rem;

    border-radius: 1.75rem;

    border: 1px solid rgba(72, 78, 90, 0.42);

    background:

        radial-gradient(circle at 0% 0%, rgba(120, 120, 120, 0.25), transparent 65%),

        linear-gradient(135deg, rgba(18, 20, 24, 0.82), rgba(90, 90, 90, 0.38));

    box-shadow: 0 26px 52px rgba(8, 11, 19, 0.48);

}



@media (min-width: 768px) {

    .status-progress {

        grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);

        align-items: center;

    }

}



.status-progress__meter-block {

    display: flex;

    flex-direction: column;

    gap: 1.1rem;

}



.status-progress__header {

    display: flex;

    flex-wrap: wrap;

    align-items: baseline;

    justify-content: space-between;

    gap: 0.85rem;

}



.status-progress__headline {

    display: inline-flex;

    align-items: baseline;

    gap: 0.75rem;

    flex-wrap: wrap;

}



.status-progress__percent {

    display: inline-flex;

    align-items: baseline;

    gap: 0.3rem;

    font-size: clamp(2.35rem, 4vw, 3.1rem);

    font-weight: 700;

    letter-spacing: 0.08em;

    font-variant-numeric: tabular-nums;

    color: #fff;

}



.status-progress__percent-symbol {

    font-size: 0.6em;

    opacity: 0.75;

    letter-spacing: 0.18em;

}



.status-progress__caption {

    font-size: 0.78rem;

    text-transform: uppercase;

    letter-spacing: 0.34em;

    color: rgba(234, 234, 234, 0.6);

}



.status-progress__meter {

    position: relative;

    height: 0.85rem;

    border-radius: 9999px;

    border: 1px solid rgba(72, 78, 90, 0.588);

    background: rgba(18, 20, 24, 0.6);

    overflow: hidden;

}



.status-progress__meter-track {

    position: absolute;

    inset: 0;

    background: linear-gradient(90deg, rgba(72, 78, 90, 0.588), rgba(72, 78, 90, 0));

}



.status-progress__meter-fill {

    position: absolute;

    inset: 0 auto 0 0;

    width: var(--progress);

    background: linear-gradient(90deg, rgba(245, 245, 245, 0.95), rgba(115, 115, 115, 0.85));

    box-shadow: 0 14px 32px rgba(245, 245, 245, 0.35);

    border-radius: 9999px;

    transition: width 0.35s ease;

}



.status-progress__legend {

    display: grid;

    gap: 1.25rem;

}



@media (min-width: 640px) {

    .status-progress__legend {

        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    }

}



.status-progress__item {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    padding: 1.15rem 1.3rem;

    border-radius: 1.25rem;

    border: 1px solid rgba(72, 78, 90, 0.42);

    background: rgba(18, 20, 24, 0.58);

    box-shadow: 0 20px 40px rgba(8, 11, 19, 0.45);

}



.status-progress__eyebrow {

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.32em;

    color: rgba(234, 234, 234, 0.5);

    margin: 0;

}



.status-progress__label {

    margin: 0;

    font-size: 1.05rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.94);

}



.status-progress__description {

    margin: 0;

    font-size: 0.85rem;

    line-height: 1.6;

    color: rgba(234, 234, 234, 0.7);

}



.request-status__share {

    max-width: 360px;

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

    padding: 1.35rem 1.6rem;

    border-radius: 1.75rem;

    border: 1px solid rgba(72, 78, 90, 0.525);

    background: radial-gradient(circle at 0% -20%, rgba(225, 225, 225, 0.35), transparent 58%), rgba(72, 78, 90, 0.168);

    box-shadow: 0 22px 44px rgba(8, 11, 19, 0.45);

    backdrop-filter: blur(12px);

}



.request-status__share-label {

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.32em;

    color: rgba(234, 234, 234, 0.45);

}



.request-status__share-url {

    display: inline-flex;

    align-items: center;

    gap: 0.55rem;

    font-family: "JetBrains Mono", monospace;

    font-size: 0.78rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.92);

    word-break: break-all;

}



.request-status__share-url svg {

    flex-shrink: 0;

    opacity: 0.65;

}



.request-status__share-hint {

    font-size: 0.68rem;

    color: rgba(234, 234, 234, 0.5);

    line-height: 1.5;

}



.request-status__hero-header {

    display: flex;

    align-items: center;

    gap: 0.75rem;

    flex-wrap: wrap;

}



.request-status__office-alert {

    margin: 1.5rem auto 0;

    max-width: 44rem;

    padding: 1.25rem 1.5rem;

    border-radius: 1.25rem;

    background:

        linear-gradient(140deg, rgba(72, 78, 90, 0.378), rgba(245, 245, 245, 0.12)),

        rgba(18, 20, 24, 0.55);

    border: 1px solid rgba(72, 78, 90, 0.588);

    box-shadow: 0 24px 48px rgba(6, 7, 12, 0.35);

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.9rem;

    text-align: center;

    color: rgba(234, 234, 234, 0.95);

}



.request-status__office-alert-icon {

    display: grid;

    place-items: center;

    width: 3rem;

    height: 3rem;

    border-radius: 999px;

    background:

        radial-gradient(circle at 30% 30%, rgba(72, 78, 90, 0.672), transparent 70%),

        rgba(245, 245, 245, 0.2);

    color: rgba(234, 234, 234, 0.92);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 8px 18px rgba(18, 20, 24, 0.35);

}



.request-status__office-alert-icon svg {

    width: 1.5rem;

    height: 1.5rem;

}



.request-status__office-alert-text {

    margin: 0;

    font-size: 0.95rem;

    line-height: 1.65;

    max-width: 38rem;

    color: rgba(234, 234, 234, 0.92);

    text-align: center;

}



.status-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.35rem 0.85rem;

    border-radius: 9999px;

    background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(107, 163, 255, 0.18));

    border: 1px solid rgba(148, 163, 184, 0.3);

    color: rgba(214, 222, 237, 0.88);

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    box-shadow: 0 18px 36px rgba(56, 189, 248, 0.25);

}



.status-note {

    font-size: 0.78rem;

    color: rgba(214, 222, 237, 0.72);

    line-height: 1.5;

    max-width: 420px;

}



.request-status__title {

    font-size: 1.85rem;

    font-weight: 600;

    color: #fff;

}



@media (min-width: 640px) {

    .request-status__title {

        font-size: 2.1rem;

    }

}



.request-status__summary-text {

    font-size: 0.95rem;

    line-height: 1.7;

    color: rgba(214, 222, 237, 0.82);

}



.request-status__hero-meta {

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem 1.25rem;

    padding: 0;

    margin: 0;

}



.request-status__hero-meta li {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    min-width: 150px;

}



.request-status__hero-meta-label {

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.24em;

    color: rgba(234, 234, 234, 0.45);

}



.request-status__hero-meta-value {

    font-size: 0.9rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.86);

}



.request-status__hero-link {

    font-size: 0.82rem;

    color: rgba(214, 222, 237, 0.88);

}



.request-status__insight-grid {

    display: grid;

    gap: 1rem;

    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

}





.admin-requests__hero {

    position: relative;

    overflow: hidden;

    border-radius: 2rem;

    border: 1px solid rgba(148, 163, 184, 0.24);

    background: radial-gradient(circle at 15% -10%, rgba(107, 163, 255, 0.18), transparent 45%),

        radial-gradient(circle at 85% 120%, rgba(94, 234, 212, 0.16), transparent 55%),

        linear-gradient(135deg, rgba(12, 18, 32, 0.9), rgba(32, 48, 78, 0.65));

    padding: 2.75rem 2.5rem;

    display: grid;

    gap: 2rem;

}



.admin-requests__hero > * {

    position: relative;

    z-index: 1;

}

.admin-requests__hero > * {

    position: relative;

    z-index: 1;

}



@media (min-width: 1024px) {

    .admin-requests__hero {

        grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr);

        align-items: center;

    }

}



.admin-requests__hero-content {

    display: flex;

    flex-direction: column;

    gap: 1.35rem;

}



.admin-requests__hero-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.4rem 0.85rem;

    border-radius: 999px;

    border: 1px solid rgba(205, 205, 205, 0.45);

    background: rgba(120, 120, 120, 0.15);

    color: rgba(191, 219, 254, 0.95);

    font-size: 0.72rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    font-weight: 600;

}



.admin-requests__hero-title {

    margin: 0;

    font-size: clamp(2.1rem, 2.8vw, 2.75rem);

    font-weight: 600;

    color: #fff;

    letter-spacing: -0.01em;

}



.admin-requests__hero-copy {

    margin: 0;

    font-size: 0.95rem;

    line-height: 1.75;

    color: rgba(214, 222, 237, 0.8);

    max-width: 40ch;

}



.admin-requests__hero-meta {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 1rem;

    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));

}



.admin-requests__hero-meta-label {

    display: block;

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.24em;

    color: rgba(234, 234, 234, 0.5);

    margin-bottom: 0.35rem;

}



.admin-requests__hero-meta-value {

    font-size: 2.2rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: rgba(224, 231, 255, 0.95);

}



.admin-requests__hero-actions {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    align-items: flex-start;

}



.admin-requests__hero-note {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    border-radius: 1.25rem;

    border: 1px solid rgba(72, 78, 90, 0.42);

    background: rgba(18, 20, 24, 0.55);

    padding: 1rem 1.1rem;

    color: rgba(214, 222, 237, 0.82);

    font-size: 0.85rem;

    line-height: 1.6;

    max-width: 22rem;

}



.admin-requests__hero-note-icon {

    width: 1.5rem;

    height: 1.5rem;

    color: rgba(205, 205, 205, 0.85);

    flex-shrink: 0;

}



.admin-requests__hero-buttons {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

}



.admin-requests__hero-buttons .glass-ring {

    border-color: rgba(72, 78, 90, 0.735);

    background: rgba(18, 20, 24, 0.35);

}



.admin-requests__hero-graphic {

    position: relative;

    display: grid;

    place-items: center;

    width: 100%;

    min-height: 160px;

}



.admin-requests__hero-orb {

    position: absolute;

    width: 160px;

    height: 160px;

    border-radius: 999px;

    background: radial-gradient(circle at 30% 30%, rgba(205, 205, 205, 0.55), transparent 65%);

    filter: blur(0.5px);

    opacity: 0.75;

}



.admin-requests__hero-orb--accent {

    width: 220px;

    height: 220px;

    background: radial-gradient(circle at 70% 30%, rgba(34, 211, 238, 0.45), transparent 70%);

    opacity: 0.55;

    transform: translate(20px, -30px);

}



.admin-requests__hero-glimmer {

    position: absolute;

    width: 2.75rem;

    height: 2.75rem;

    border-radius: 999px;

    background: radial-gradient(circle, rgba(244, 244, 245, 0.9), rgba(244, 244, 245, 0));

    opacity: 0.75;

    transform: translate(60px, 40px);

}



.admin-requests__insight-grid {

    display: grid;

    gap: 1.1rem;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

}



.insight-card {

    position: relative;

    padding: 1.2rem 1.35rem;

    border-radius: 1.35rem;

    border: 1px solid rgba(148, 163, 184, 0.28);

    background: linear-gradient(135deg, rgba(15, 23, 42, 0.78), rgba(38, 55, 88, 0.52));

    box-shadow: 0 24px 50px rgba(8, 12, 20, 0.5);

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    color: rgba(214, 222, 237, 0.88);

    overflow: hidden;

    z-index: 0;

}



.insight-card--metric {

    padding: 1.5rem 1.75rem;

    gap: 0.75rem;

}



.insight-card__topline {

    display: flex;

    align-items: center;

    gap: 0.75rem;

}



.insight-card__icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 2.1rem;

    height: 2.1rem;

    border-radius: 0.85rem;

    background: rgba(245, 245, 245, 0.18);

    color: rgba(191, 219, 254, 0.95);

    box-shadow: inset 0 0 0 1px rgba(245, 245, 245, 0.35);

}



.insight-card__icon svg {

    width: 1.2rem;

    height: 1.2rem;

}



.insight-card__label {

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.24em;

    color: rgba(234, 234, 234, 0.48);

}



.insight-card__value {

    font-size: 0.98rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.92);

    margin: 0;

}



.insight-card__value--xl {

    font-size: 2.35rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    color: rgba(234, 234, 234, 0.95);

    margin: 0;

    font-variant-numeric: tabular-nums;

}





.insight-card--violet .insight-card__icon {

    background: rgba(196, 181, 253, 0.2);

    color: rgba(233, 213, 255, 0.95);

    box-shadow: inset 0 0 0 1px rgba(196, 181, 253, 0.35);

}



.insight-card--teal .insight-card__icon {

    background: rgba(220, 220, 220, 0.18);

    color: rgba(153, 246, 228, 0.95);

    box-shadow: inset 0 0 0 1px rgba(220, 220, 220, 0.35);

}



.insight-card__meta {

    font-size: 0.75rem;

    color: rgba(234, 234, 234, 0.6);

    margin: 0;

}



.insight-card__tags {

    list-style: none;

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    padding: 0;

    margin: 0;

}



.insight-card__tags li {

    padding: 0.3rem 0.7rem;

    border-radius: 9999px;

    background: rgba(72, 78, 90, 0.336);

    border: 1px solid rgba(72, 78, 90, 0.525);

    font-size: 0.74rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.8);

    letter-spacing: 0.03em;

}



.insight-card--collapsible .insight-card__details {

    display: block;

}



.insight-card__summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    list-style: none;

    cursor: pointer;

    padding: 0;

}



.insight-card__summary::-webkit-details-marker {

    display: none;

}



.insight-card__summary-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.25rem;

    padding: 0.3rem 0.7rem;

    border-radius: 9999px;

    border: 1px solid rgba(148, 163, 184, 0.35);

    background: rgba(37, 99, 235, 0.15);

    font-size: 0.68rem;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.78);

    font-weight: 600;

}



.insight-card__details-body {

    margin-top: 1rem;

    padding-top: 1rem;

    border-top: 1px solid rgba(72, 78, 90, 0.336);

}



.insight-card--span {

    grid-column: span 2;

}



@media (max-width: 640px) {

    .insight-card--span {

        grid-column: span 1;

    }

}



.admin-requests__health {

    border-radius: 1.75rem;

    border: 1px solid rgba(72, 78, 90, 0.42);

    background: linear-gradient(140deg, rgba(18, 20, 24, 0.8), rgba(30, 41, 59, 0.6));

    padding: 1.85rem 2rem;

    box-shadow: 0 24px 46px rgba(8, 11, 19, 0.4);

    display: flex;

    flex-direction: column;

    gap: 1.65rem;

}



.admin-requests__health-header {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    justify-content: space-between;

    gap: 1.25rem;

}



.admin-requests__health-title {

    margin: 0;

    font-size: 1.25rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.95);

}



.admin-requests__health-subtitle {

    margin: 0.4rem 0 0;

    font-size: 0.85rem;

    color: rgba(234, 234, 234, 0.62);

}



.admin-requests__health-tag {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.35rem 0.8rem;

    border-radius: 999px;

    border: 1px solid rgba(205, 205, 205, 0.35);

    background: rgba(245, 245, 245, 0.18);

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.22em;

    color: rgba(191, 219, 254, 0.92);

    font-weight: 600;

}



.admin-requests__distribution {

    display: flex;

    align-items: center;

    gap: 0.35rem;

    border-radius: 999px;

    background: rgba(18, 20, 24, 0.65);

    border: 1px solid rgba(72, 78, 90, 0.378);

    padding: 0.5rem;

    min-height: 1.25rem;

    overflow: hidden;

}



.admin-requests__segment {

    display: block;

    height: 0.75rem;

    border-radius: 999px;

    flex: 0 0 var(--segment-size, 25%);

    min-width: 0.45rem;

    transition: flex-basis 0.3s ease;

}



.admin-requests__segment--new {

    background: linear-gradient(90deg, rgba(245, 245, 245, 0.85), rgba(245, 245, 245, 0.4));

}



.admin-requests__segment--reviewing {

    background: linear-gradient(90deg, rgba(196, 181, 253, 0.85), rgba(196, 181, 253, 0.4));

}



.admin-requests__segment--scheduled {

    background: linear-gradient(90deg, rgba(220, 220, 220, 0.85), rgba(220, 220, 220, 0.4));

}



.admin-requests__segment--completed {

    background: linear-gradient(90deg, rgba(163, 230, 53, 0.75), rgba(163, 230, 53, 0.38));

}



.admin-requests__segment--archived {

    background: linear-gradient(90deg, rgba(72, 78, 90, 0.9), rgba(72, 78, 90, 0.735));

}



.admin-requests__segment--empty {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 100%;

    height: 2.25rem;

    border-radius: 1.1rem;

    background: rgba(18, 20, 24, 0.65);

    color: rgba(234, 234, 234, 0.6);

    font-size: 0.8rem;

    font-style: italic;

}



.admin-requests__breakdown {

    list-style: none;

    margin: 0;

    padding: 0;

    display: grid;

    gap: 1rem;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

}



.admin-requests__breakdown-item {

    display: flex;

    gap: 0.85rem;

    align-items: flex-start;

}



.admin-requests__breakdown-dot {

    width: 0.9rem;

    height: 0.9rem;

    border-radius: 999px;

    box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.05);

}



.admin-requests__breakdown-dot--new {

    background: linear-gradient(135deg, rgba(245, 245, 245, 1), rgba(245, 245, 245, 0.6));

}



.admin-requests__breakdown-dot--reviewing {

    background: linear-gradient(135deg, rgba(196, 181, 253, 1), rgba(196, 181, 253, 0.6));

}



.admin-requests__breakdown-dot--scheduled {

    background: linear-gradient(135deg, rgba(220, 220, 220, 1), rgba(220, 220, 220, 0.6));

}



.admin-requests__breakdown-dot--completed {

    background: linear-gradient(135deg, rgba(163, 230, 53, 0.95), rgba(190, 242, 100, 0.6));

}



.admin-requests__breakdown-dot--archived {

    background: linear-gradient(135deg, rgba(72, 78, 90, 0.9), rgba(72, 78, 90, 0.9));

}



.admin-requests__breakdown-copy {

    display: flex;

    flex-direction: column;

    gap: 0.3rem;

}



.admin-requests__breakdown-label {

    margin: 0;

    font-size: 0.85rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.92);

}



.admin-requests__breakdown-meta {

    margin: 0;

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    font-size: 0.75rem;

    color: rgba(234, 234, 234, 0.6);

}



.admin-requests__breakdown-count {

    font-variant-numeric: tabular-nums;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.82);

}



.admin-requests__breakdown-percentage {

    font-weight: 600;

    color: rgba(148, 191, 255, 0.85);

}



.admin-requests__breakdown-description {

    margin: 0;

    font-size: 0.78rem;

    line-height: 1.55;

    color: rgba(234, 234, 234, 0.6);

}



.admin-requests__breakdown-separator {

    opacity: 0.4;

}



.admin-requests__toolbar {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1.75rem;

    flex-wrap: wrap;

    padding: 1.5rem 1.75rem;

    border-radius: 1.75rem;

    border: 1px solid rgba(72, 78, 90, 0.378);

    background: linear-gradient(135deg, rgba(18, 20, 24, 0.75), rgba(30, 41, 59, 0.6));

    box-shadow: 0 18px 36px rgba(8, 11, 19, 0.35);

}



.admin-requests__toolbar-summary {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

    min-width: 200px;

}



.admin-requests__toolbar-label {

    font-size: 0.68rem;

    text-transform: uppercase;

    letter-spacing: 0.24em;

    color: rgba(234, 234, 234, 0.48);

    font-weight: 600;

}



.admin-requests__toolbar-count {

    margin: 0;

    font-size: 0.85rem;

    color: rgba(214, 222, 237, 0.78);

    display: flex;

    align-items: center;

    gap: 0.45rem;

    flex-wrap: wrap;

}



.admin-requests__toolbar-count strong {

    font-size: 1.1rem;

    color: rgba(224, 231, 255, 0.95);

    letter-spacing: 0.1em;

}



.admin-requests__toolbar-divider {

    color: rgba(234, 234, 234, 0.35);

}



.admin-requests__toolbar-icon {

    width: 1.2rem;

    height: 1.2rem;

    color: rgba(245, 245, 245, 0.9);

}



.admin-requests__toolbar-hint {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    font-size: 0.78rem;

    color: rgba(234, 234, 234, 0.6);

    max-width: 18rem;

}



.admin-requests__toolbar-hint span {

    display: inline-block;

}



.admin-requests__queue {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}



.admin-requests__queue-tablist {

    display: flex;

    flex-wrap: wrap;

    gap: 0.85rem;

}



.admin-requests__queue-tab {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    border-radius: 999px;

    border: 1px solid rgba(72, 78, 90, 0.63);

    background: rgba(18, 20, 24, 0.55);

    color: rgba(214, 222, 237, 0.8);

    font-size: 0.75rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    padding: 0.65rem 1.4rem;

    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;

}



.admin-requests__queue-tab.is-active {

    color: rgba(234, 234, 234, 0.95);

    border-color: rgba(245, 245, 245, 0.45);

    background: rgba(220, 220, 220, 0.16);

    box-shadow: 0 12px 28px rgba(220, 220, 220, 0.18);

}



.admin-requests__queue-tab:focus-visible {

    outline: 2px solid rgba(225, 225, 225, 0.65);

    outline-offset: 3px;

}



.admin-requests__queue-tab-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 1.65rem;

    height: 1.65rem;

    border-radius: 999px;

    border: 1px solid rgba(72, 78, 90, 0.735);

    background: rgba(18, 20, 24, 0.75);

    font-size: 0.72rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.82);

}



.admin-requests__queue-panels {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}



.admin-requests__queue-panel {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}



.admin-requests__queue-panel[hidden] {

    display: none !important;

}



@media (max-width: 768px) {

    .admin-requests__health {

        padding: 1.5rem 1.5rem;

    }



    .admin-requests__toolbar {

        align-items: stretch;

        padding: 1.25rem 1.35rem;

    }



    .admin-requests__toolbar-summary {

        min-width: 100%;

    }

}



.request-status__timeline {

    border-radius: 1.5rem;

    border: 1px solid rgba(72, 78, 90, 0.336);

    background: linear-gradient(140deg, rgba(18, 20, 24, 0.75), rgba(30, 41, 59, 0.55));

    padding: 1.75rem 1.85rem;

    box-shadow: 0 24px 48px rgba(8, 11, 19, 0.45);

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.request-status__timeline h3 {

    margin: 0;

    font-size: 0.95rem;

    text-transform: uppercase;

    letter-spacing: 0.3em;

    color: rgba(234, 234, 234, 0.58);

}



.timeline {

    list-style: none;

    margin: 0;

    padding: 0;

    display: flex;

    flex-direction: column;

    gap: 1.6rem;

    position: relative;

}



.timeline__step {

    position: relative;

    padding-left: 2.6rem;

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.timeline__marker {

    position: absolute;

    left: 0;

    top: 0.3rem;

    width: 1.2rem;

    height: 1.2rem;

    border-radius: 9999px;

    border: 2px solid rgba(72, 78, 90, 0.63);

    background: rgba(72, 78, 90, 0.378);

    box-shadow: 0 12px 24px rgba(8, 11, 19, 0.35);

}



.timeline__title {

    font-size: 0.95rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.9);

    text-transform: none;

}



.timeline__description {

    font-size: 0.82rem;

    color: rgba(234, 234, 234, 0.6);

    line-height: 1.6;

    margin: 0;

}



.timeline__step--complete .timeline__marker {

    background: linear-gradient(135deg, rgba(107, 163, 255, 0.3), rgba(94, 234, 212, 0.28));

    border-color: rgba(148, 163, 184, 0.4);

    box-shadow: 0 16px 32px rgba(56, 189, 248, 0.35);

}



.timeline__step--complete .timeline__title {

    color: rgba(214, 222, 237, 0.95);

}



.timeline__step--current .timeline__marker {

    background: rgba(37, 99, 235, 0.25);

    border-color: rgba(125, 175, 255, 0.8);

    box-shadow: 0 14px 28px rgba(59, 130, 246, 0.35);

}



.timeline__step--current .timeline__title {

    color: rgba(214, 222, 237, 0.98);

}



.timeline__step--current .timeline__description {

    color: rgba(214, 222, 237, 0.78);

}



.timeline__step--upcoming .timeline__marker {

    background: rgba(51, 65, 85, 0.35);

    border-color: rgba(71, 85, 105, 0.6);

}

.request-status__timeline .timeline__step:last-child {

    padding-bottom: 0;

}



.request-status__conversation {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    padding: 1.75rem;

    border-radius: 1.6rem;

    border: 1px solid rgba(72, 78, 90, 0.336);

    background: linear-gradient(135deg, rgba(18, 20, 24, 0.78), rgba(30, 41, 59, 0.62));

    box-shadow: 0 24px 48px rgba(8, 11, 19, 0.45);

}



.request-status__conversation-header {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.request-status__conversation-empty {

    font-size: 0.9rem;

    color: rgba(214, 222, 237, 0.72);

    padding: 1.25rem 1.5rem;

    border-radius: 1.25rem;

    border: 1px dashed rgba(72, 78, 90, 0.525);

    background: rgba(30, 41, 59, 0.45);

}



.conversation__message {

    border-left: none;

    padding: 1.1rem 1.35rem;

    border-radius: 1.25rem;

    border: 1px solid rgba(72, 78, 90, 0.378);

    background: rgba(18, 20, 24, 0.75);

    box-shadow: 0 16px 32px rgba(8, 11, 19, 0.4);

}



.conversation__message--team {

    border-color: rgba(245, 245, 245, 0.4);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.18), rgba(18, 20, 24, 0.75));

}



.conversation__message--requester {

    border-color: rgba(244, 114, 182, 0.35);

    background: linear-gradient(135deg, rgba(244, 114, 182, 0.18), rgba(18, 20, 24, 0.75));

}



.conversation__meta {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    font-size: 0.78rem;

    letter-spacing: 0.08em;

    color: rgba(234, 234, 234, 0.6);

}



.conversation__author {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.88);

}



.conversation__author-name {

    display: inline-flex;

    align-items: center;

}



.conversation__badge {

    display: inline-flex;

    align-items: center;

    gap: 0.3rem;

    padding: 0.25rem 0.55rem;

    border-radius: 999px;

    border: 1px solid rgba(225, 225, 225, 0.45);

    background: rgba(245, 245, 245, 0.18);

    font-size: 0.6rem;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.8);

}



.conversation__badge-icon {

    width: 0.85rem;

    height: 0.85rem;

}



.conversation__time {

    color: rgba(214, 222, 237, 0.65);

    letter-spacing: 0.16em;

}



.conversation__body {

    font-size: 0.92rem;

    line-height: 1.65;

    color: rgba(234, 234, 234, 0.88);

}



.conversation__body p {

    margin: 0 0 0.95rem;

}



.conversation__body p:last-child {

    margin-bottom: 0;

}



.conversation__body ul,

.conversation__body ol {

    margin: 0 0 0.95rem 1.35rem;

    padding: 0;

}



.conversation__body ul:last-child,

.conversation__body ol:last-child {

    margin-bottom: 0;

}



.conversation__body li + li {

    margin-top: 0.35rem;

}



.conversation__body strong {

    color: rgba(234, 234, 234, 0.95);

}



.conversation__edit {

    margin-top: 0.9rem;

    border-radius: 1rem;

    border: 1px solid rgba(72, 78, 90, 0.42);

    background: rgba(18, 20, 24, 0.55);

    overflow: hidden;

}



.conversation__edit[open] {

    box-shadow: 0 18px 40px rgba(8, 11, 22, 0.45);

}



.conversation__edit-summary {

    cursor: pointer;

    padding: 0.8rem 1rem;

    font-size: 0.75rem;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.72);

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.6rem;

    background: rgba(18, 20, 24, 0.65);

}



.conversation__edit-summary::-webkit-details-marker {

    display: none;

}



.conversation__edit-summary-text {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.conversation__edit-icon {

    width: 0.85rem;

    height: 0.85rem;

}



.conversation__edit-form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    padding: 1rem;

}



.conversation__field--edit .conversation__label {

    color: rgba(234, 234, 234, 0.6);

}



.conversation__edit-textarea {

    min-height: 180px;

}



.conversation__edit-submit {

    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    gap: 0.6rem;

    padding: 0.55rem 1.4rem;

    border-radius: 999px;

    border: 1px solid rgba(225, 225, 225, 0.4);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.35), rgba(210, 210, 210, 0.25));

    font-size: 0.72rem;

    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: rgba(234, 234, 234, 0.92);

    transition: transform 0.2s ease, box-shadow 0.2s ease;

}



.conversation__edit-submit:hover {

    transform: translateY(-1px);

    box-shadow: 0 12px 24px rgba(170, 170, 170, 0.35);

}



.conversation__edit-submit-icon {

    width: 0.85rem;

    height: 0.85rem;

}



.conversation__form {

    padding: 1.25rem 1.5rem;

    border-radius: 1.35rem;

    border: 1px solid rgba(72, 78, 90, 0.378);

    background: rgba(18, 20, 24, 0.72);

    box-shadow: 0 18px 36px rgba(8, 11, 19, 0.42);

}



.conversation__label {

    color: rgba(234, 234, 234, 0.58);

}



.conversation__field textarea {

    min-height: 160px;

}



.conversation__submit {

    display: inline-flex;

    align-items: center;

    gap: 0.65rem;

    padding: 0.65rem 1.6rem;

    border-radius: 999px;

    border: 1px solid rgba(225, 225, 225, 0.4);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.35), rgba(210, 210, 210, 0.25));

    font-size: 0.78rem;

    font-weight: 600;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    color: rgba(234, 234, 234, 0.9);

    backdrop-filter: blur(12px);

    transition: transform 0.2s ease, box-shadow 0.2s ease, color 0.2s ease,

        border-color 0.2s ease, background 0.2s ease;

}



.conversation__submit:hover,

.conversation__submit:focus-visible {

    transform: translateY(-2px);

    border-color: rgba(245, 245, 245, 0.65);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.6), rgba(210, 210, 210, 0.4));

    color: #f8f8f8;

    box-shadow: 0 16px 32px rgba(210, 210, 210, 0.35);

}



.conversation__submit:focus-visible {

    outline: none;

    box-shadow: 0 0 0 2px rgba(18, 20, 24, 0.65), 0 0 0 6px rgba(245, 245, 245, 0.35);

}



.conversation__submit-icon {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 1rem;

    height: 1rem;

    font-size: 0.95rem;

    line-height: 1;

}



.request-status__lookup .request-status__form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.request-status__field {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.request-status__label {

    font-size: 0.78rem;

    text-transform: uppercase;

    letter-spacing: 0.18em;

    color: rgba(234, 234, 234, 0.5);

}



.request-status__conversation {

    display: flex;

    flex-direction: column;

}



.request-form__panel {

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: linear-gradient(140deg, rgba(72, 78, 90, 0.252), transparent 65%), rgba(18, 20, 24, 0.55);

    padding: 1.75rem;

    backdrop-filter: blur(18px);

}



.request-form__field {

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    font-size: 0.95rem;

    color: rgba(214, 222, 237, 0.88);

}



.request-form__label {

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(234, 234, 234, 0.45);

}



.request-form__hint {

    font-size: 0.75rem;

    color: rgba(234, 234, 234, 0.45);

}



.request-search {

    position: relative;

    z-index: 40;

}



.request-search__panel {

    position: absolute;

    inset: auto 0 0;

    transform: translateY(calc(100% + 0.75rem));

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(18, 20, 24, 0.92);

    box-shadow: 0 24px 48px rgba(8, 11, 19, 0.45);

    overflow: hidden;

    z-index: 60;

}



.request-search__results {

    list-style: none;

    margin: 0;

    padding: 0.75rem 0;

    max-height: 18rem;

    overflow-y: auto;

}



.request-search__result {

    display: flex;

    flex-direction: column;

    gap: 0.2rem;

    padding: 0.75rem 1.25rem;

    cursor: pointer;

    transition: background 0.2s ease, transform 0.2s ease;

}



.request-search__result:hover,

.request-search__result:focus {

    background: rgba(245, 245, 245, 0.12);

    transform: translateX(4px);

}



.request-search__result-title {

    font-weight: 600;

    color: rgba(234, 234, 234, 0.95);

}



.request-search__result-meta {

    font-size: 0.75rem;

    color: rgba(214, 222, 237, 0.65);

}



.request-search__result-summary {

    font-size: 0.7rem;

    color: rgba(234, 234, 234, 0.45);

}



.request-search__status {

    padding: 0.75rem 1.25rem 1rem;

    font-size: 0.75rem;

    color: rgba(234, 234, 234, 0.45);

}



.request-deliverable {

    display: flex;

    align-items: flex-start;

    gap: 0.75rem;

    padding: 0.9rem 1rem;

    border-radius: 1.25rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(18, 20, 24, 0.5);

    transition: border 0.2s ease, background 0.2s ease;

}



.request-deliverable:hover {

    border-color: rgba(245, 245, 245, 0.4);

    background: rgba(18, 20, 24, 0.65);

}



.request-deliverable__checkbox {

    margin-top: 0.3rem;

    width: 1rem;

    height: 1rem;

    accent-color: rgba(245, 245, 245, 0.85);

}



.request-deliverable__label {

    font-size: 0.85rem;

    color: rgba(214, 222, 237, 0.85);

}



.request-preview {

    border-radius: 1.75rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(18, 20, 24, 0.55);

    padding: 1.5rem;

    backdrop-filter: blur(18px);

    min-height: 18rem;

}



.request-preview__card {

    display: grid;

    gap: 1rem;

}



@media (min-width: 640px) {

    .request-preview__card {

        grid-template-columns: 0.95fr 1.1fr;

        align-items: center;

    }

}



.request-preview__media {

    position: relative;

    width: 100%;

    overflow: hidden;

    border-radius: 1.25rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(18, 20, 24, 0.6);

    min-height: 10rem;

}



.request-preview__image {

    display: block;

    width: 100%;

    height: 100%;

    object-fit: cover;

}



.request-preview__placeholder {

    width: 100%;

    height: 100%;

    background: repeating-linear-gradient(135deg, rgba(72, 78, 90, 0.315), rgba(72, 78, 90, 0.315) 8px, rgba(72, 78, 90, 0.105) 8px, rgba(72, 78, 90, 0.105) 16px);

}



.request-preview__content {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.request-preview__title {

    font-size: 1.2rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.95);

}



.request-preview__meta {

    font-size: 0.8rem;

    color: rgba(234, 234, 234, 0.6);

}



.request-preview__genres {

    font-size: 0.75rem;

    color: rgba(234, 234, 234, 0.5);

}



.request-preview__summary {

    font-size: 0.8rem;

    line-height: 1.4;

    color: rgba(214, 222, 237, 0.82);

    max-height: 8rem;

    overflow: hidden;

}



.request-preview__empty {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.request-filter {

    display: flex;

    flex-wrap: wrap;

    align-items: flex-end;

    gap: 1rem;

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(18, 20, 24, 0.5);

    padding: 1rem 1.25rem;

}



.request-filter--inline {

    padding: 0;

    border: none;

    background: transparent;

}



.request-filter__field {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

    min-width: 16rem;

}



.request-filter__label {

    font-size: 0.7rem;

    letter-spacing: 0.26em;

    text-transform: uppercase;

    color: rgba(234, 234, 234, 0.45);

    font-weight: 600;

}



.request-filter__reset {

    font-size: 0.75rem;

    color: rgba(234, 234, 234, 0.6);

    text-decoration: underline;

    text-decoration-style: dotted;

    text-underline-offset: 0.3rem;

}



.request-filter__reset:hover {

    color: rgba(234, 234, 234, 0.9);

}



.request-card {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 2rem;

    padding: clamp(1.75rem, 1.4rem + 1vw, 2.4rem);

    border-radius: 2rem;

    border: 1px solid rgba(148, 163, 184, 0.28);

    background:

        radial-gradient(140% 120% at 0% 0%, rgba(107, 163, 255, 0.18), transparent 55%),

        radial-gradient(120% 120% at 100% 0%, rgba(94, 234, 212, 0.12), transparent 65%),

        linear-gradient(140deg, rgba(12, 18, 32, 0.85), rgba(34, 52, 84, 0.6));

    backdrop-filter: blur(24px);

    box-shadow: 0 30px 65px rgba(8, 12, 20, 0.5);

    overflow: hidden;

}



.request-card > * {

    position: relative;

    z-index: 1;

}



.request-card__header {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}



@media (min-width: 1024px) {

    .request-card__header {

        flex-direction: row;

        align-items: stretch;

        justify-content: space-between;

    }

}



.request-card__identity {

    display: flex;

    gap: 1.5rem;

    align-items: flex-start;

}



@media (max-width: 640px) {

    .request-card__identity {

        flex-direction: column;

        align-items: flex-start;

    }

}



.request-card__poster {

    width: clamp(90px, 80px + 4vw, 136px);

    aspect-ratio: 2 / 3;

    border-radius: 1.35rem;

    object-fit: cover;

    border: 1px solid var(--vertali-border-soft);

    background: rgba(8, 12, 20, 0.75);

    box-shadow: 0 22px 44px rgba(6, 12, 24, 0.48);

}



.request-card__poster--placeholder {

    display: flex;

    align-items: center;

    justify-content: center;

    color: rgba(186, 198, 220, 0.85);

    font-size: 0.7rem;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    background:

        linear-gradient(150deg, rgba(59, 130, 246, 0.32), rgba(15, 23, 42, 0.85));

}



.request-card__heading {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.request-card__chips {

    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem;

}



.request-card__chip {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.45rem 0.95rem;

    border-radius: 999px;

    font-size: 0.68rem;

    font-weight: 600;

    letter-spacing: 0.26em;

    text-transform: uppercase;

    border: 1px solid rgba(72, 78, 90, 0.504);

    background: rgba(255, 255, 255, 0.08);

    color: rgba(234, 234, 234, 0.92);

    backdrop-filter: blur(12px);

}



.request-card__chip--status {

    background: rgba(245, 245, 245, 0.18);

    border-color: rgba(245, 245, 245, 0.35);

    color: rgba(224, 242, 254, 0.95);

}



.request-card__chip--priority {

    background: rgba(147, 51, 234, 0.22);

    border-color: rgba(147, 51, 234, 0.4);

    color: rgba(237, 233, 254, 0.95);

}



.request-card__chip--timeline {

    background: rgba(220, 220, 220, 0.2);

    border-color: rgba(220, 220, 220, 0.4);

    color: rgba(224, 242, 254, 0.92);

}



.request-card__title {

    font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem);

    font-weight: 600;

    color: rgba(234, 234, 234, 0.95);

}



.request-card__subtitle {

    display: flex;

    flex-wrap: wrap;

    align-items: center;

    gap: 0.45rem;

    font-size: 0.9rem;

    color: rgba(234, 234, 234, 0.6);

}



.request-card__subtitle-divider {

    color: rgba(72, 78, 90, 0.84);

}



.request-card__action-link {

    align-self: flex-start;

    font-size: 0.8rem;

    color: rgba(225, 225, 225, 0.9);

    text-decoration: none;

    border-bottom: 1px dashed rgba(225, 225, 225, 0.4);

    padding-bottom: 0.2rem;

}



.request-card__action-link:hover {

    color: rgba(186, 230, 253, 0.95);

    border-color: rgba(186, 230, 253, 0.6);

}



.request-card__snapshot {

    display: grid;

    gap: 0.75rem;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

}



.request-card__snapshot-item {

    position: relative;

    padding: 0.95rem 1.15rem;

    border-radius: 1.25rem;

    border: 1px solid rgba(72, 78, 90, 0.378);

    background: rgba(18, 20, 24, 0.65);

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.request-card__snapshot-item--wide {

    grid-column: 1 / -1;

}



.request-card__snapshot dt {

    font-size: 0.68rem;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: rgba(234, 234, 234, 0.5);

}



.request-card__snapshot dd {

    margin: 0;

    font-size: 0.95rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.95);

    word-break: break-word;

}



.request-card__snapshot-meta {

    font-size: 0.75rem;

    color: rgba(234, 234, 234, 0.6);

}



.request-card__snapshot-link {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    font-size: 0.8rem;

    color: rgba(225, 225, 225, 0.9);

    word-break: break-all;

}



.request-card__snapshot-link:hover {

    color: rgba(186, 230, 253, 0.95);

}



.request-card__snapshot-token {

    font-size: 0.85rem;

    letter-spacing: 0.24em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.78);

    background: rgba(18, 20, 24, 0.6);

    padding: 0.35rem 0.6rem;

    border-radius: 0.6rem;

    display: inline-block;

}



.request-card__tabset {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.request-card__tablist {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    border-bottom: 1px solid rgba(255, 255, 255, 0.08);

    padding-bottom: 0.75rem;

}



.request-card__tab {

    border: 1px solid rgba(72, 78, 90, 0.504);

    background: rgba(18, 20, 24, 0.6);

    color: rgba(234, 234, 234, 0.7);

    font-size: 0.75rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    border-radius: 999px;

    padding: 0.55rem 1.1rem;

    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;

}



.request-card__tab.is-active {

    color: rgba(234, 234, 234, 0.95);

    border-color: rgba(245, 245, 245, 0.45);

    background: rgba(220, 220, 220, 0.18);

    box-shadow: 0 10px 24px rgba(220, 220, 220, 0.18);

}



.request-card__tab:focus-visible {

    outline: 2px solid rgba(225, 225, 225, 0.65);

    outline-offset: 3px;

}



.request-card__tab-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    min-width: 1.65rem;

    height: 1.65rem;

    margin-left: 0.6rem;

    border-radius: 999px;

    background: rgba(18, 20, 24, 0.75);

    border: 1px solid rgba(72, 78, 90, 0.735);

    font-size: 0.7rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.82);

}



.request-card__panels {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.request-card__panel {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.request-card__panel[hidden] {

    display: none !important;

}



.request-card__panel-grid {

    display: grid;

    gap: 1.25rem;

}



.request-card__panel-grid--two {

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

}



.request-card__panel-grid--stack {

    grid-template-columns: minmax(0, 1fr);

}



.request-card__panel-card {

    border-radius: 1.5rem;

    border: 1px solid rgba(72, 78, 90, 0.378);

    background: rgba(18, 20, 24, 0.6);

    padding: 1.25rem 1.5rem;

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);

}



@media (min-width: 900px) {

    .request-card__panel-card--wide {

        grid-column: span 2;

    }

}



.request-card__panel-title {

    font-size: 0.82rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.65);

    font-weight: 600;

}



.request-card__panel-text {

    font-size: 0.88rem;

    color: rgba(214, 222, 237, 0.8);

    line-height: 1.6;

}



.request-card__panel-text--emphasis {

    font-size: 1.05rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.95);

}



.request-card__panel-text--code code {

    font-size: 0.8rem;

    letter-spacing: 0.26em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.82);

}



.request-card__panel-link {

    font-size: 0.82rem;

    color: rgba(225, 225, 225, 0.9);

    text-decoration: none;

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

}



.request-card__panel-link:hover {

    color: rgba(186, 230, 253, 0.95);

}

.request-card__panel-meta {

    font-size: 0.78rem;

    color: rgba(234, 234, 234, 0.6);

}



.request-card__taglist {

    display: flex;

    flex-wrap: wrap;

    gap: 0.55rem;

}



.request-card__tag {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.4rem 0.8rem;

    border-radius: 999px;

    font-size: 0.72rem;

    background: rgba(245, 245, 245, 0.16);

    color: rgba(191, 219, 254, 0.92);

    border: 1px solid rgba(245, 245, 245, 0.28);

}



.request-card__tag--muted {

    background: rgba(72, 78, 90, 0.378);

    border-color: rgba(72, 78, 90, 0.63);

    color: rgba(234, 234, 234, 0.7);

}



.request-card__info-list {

    display: grid;

    gap: 0.65rem;

}



.request-card__info-row {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

    font-size: 0.85rem;

    color: rgba(214, 222, 237, 0.82);

}



.request-card__info-row dt {

    font-weight: 600;

    letter-spacing: 0.1em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.65);

}



.request-card__info-row dd {

    margin: 0;

}



.request-card__messages {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.request-card__conversation-header {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



@media (min-width: 768px) {

    .request-card__conversation-header {

        flex-direction: row;

        justify-content: space-between;

        align-items: flex-start;

        gap: 1.5rem;

    }

}



.request-card__conversation-link {

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

    max-width: 100%;

}



.request-card__conversation-empty {

    font-size: 0.85rem;

    color: rgba(214, 222, 237, 0.72);

    padding: 1rem 1.25rem;

    border-radius: 1rem;

    border: 1px dashed rgba(107, 163, 255, 0.38);

    background: rgba(8, 12, 24, 0.72);

}



.request-card__actions {

    border-radius: 1.5rem;

    border: 1px solid var(--vertali-border-soft);

    background: rgba(8, 12, 24, 0.78);

    padding: 1.5rem 1.75rem;

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}



.request-card__actions-header {

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

}



.request-card__form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



@media (min-width: 768px) {

    .request-card__form {

        flex-direction: row;

        align-items: flex-end;

        flex-wrap: wrap;

        gap: 1.25rem;

    }

}



.request-card__form-field {

    display: flex;

    flex-direction: column;

    gap: 0.55rem;

    min-width: 14rem;

}



.request-card__form-field--notes {

    flex: 1;

}



.request-card__form-label {

    font-size: 0.68rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.65);

    font-weight: 600;

}





.admin-requests__empty {

    border-radius: 1.75rem;

    border: 1px dashed rgba(72, 78, 90, 0.735);

    background: rgba(30, 41, 59, 0.45);

    padding: 2.5rem;

    text-align: left;

    color: rgba(234, 234, 234, 0.7);

    box-shadow: inset 0 0 0 1px rgba(72, 78, 90, 0.252);

}



.admin-requests__empty-title {

    font-size: 1.1rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.9);

    margin: 0 0 0.75rem;

}



.admin-requests__empty-copy {

    margin: 0;

    font-size: 0.9rem;

    color: rgba(234, 234, 234, 0.62);

}



.admin-requests__list {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}



@media (max-width: 768px) {

    .admin-requests__insight-grid {

        grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

    }

}



.disclaimer-grid {

    display: grid;

    gap: 1.5rem;

}



.dashboard-highlight {

    position: relative;

    display: grid;

    gap: 1rem;

    max-width: 22rem;

    border-radius: 1.75rem;

    border: 1px solid rgba(148, 163, 184, 0.28);

    background:

        linear-gradient(135deg, rgba(107, 163, 255, 0.22), rgba(94, 234, 212, 0.12)),

        linear-gradient(180deg, rgba(12, 18, 32, 0.9), rgba(24, 36, 58, 0.65));

    padding: 2rem;

    box-shadow: 0 30px 60px rgba(8, 12, 20, 0.5);

    backdrop-filter: blur(28px);

}



.dashboard-highlight__kicker {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    border-radius: 999px;

    padding: 0.35rem 0.9rem;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(245, 245, 245, 0.25);

    font-size: 0.7rem;

    font-weight: 700;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.88);

}



.dashboard-highlight__title {

    position: relative;

    font-size: 1.5rem;

    font-weight: 700;

    color: #fff;

}



.dashboard-highlight__description,

.dashboard-highlight__list {

    position: relative;

    color: rgba(214, 222, 237, 0.82);

    font-size: 0.95rem;

    line-height: 1.6;

}



.dashboard-highlight__list {

    display: grid;

    gap: 0.65rem;

    margin: 0;

    padding: 0;

    list-style: none;

}



.dashboard-highlight__list li {

    display: flex;

    align-items: center;

    gap: 0.6rem;

}



.dashboard-metric {

    position: relative;

    border-radius: 1.5rem;

    border: 1px solid rgba(148, 163, 184, 0.28);

    background: linear-gradient(140deg, rgba(15, 22, 36, 0.78), rgba(38, 55, 88, 0.5));

    padding: 1.5rem;

    box-shadow: 0 20px 40px rgba(8, 12, 20, 0.45);

    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

}



.dashboard-metric:hover {

    transform: translateY(-4px);

    border-color: rgba(255, 255, 255, 0.28);

    box-shadow: 0 22px 45px rgba(18, 20, 24, 0.45);

}



.dashboard-metric__label {

    font-size: 0.7rem;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: rgba(234, 234, 234, 0.6);

}



.dashboard-metric__value {

    margin-top: 0.75rem;

    font-size: 2.25rem;

    font-weight: 700;

    color: #fff;

}



.dashboard-metric__hint {

    margin-top: 0.5rem;

    font-size: 0.85rem;

    color: rgba(214, 222, 237, 0.72);

    line-height: 1.5;

}



.dashboard-progress {

    border-radius: 1.5rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-soft);

    padding: 1.5rem;

    box-shadow: 0 22px 48px rgba(6, 12, 24, 0.4);

}



.dashboard-progress__label {

    font-size: 0.75rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(234, 234, 234, 0.7);

}



.dashboard-progress__bar {

    position: relative;

    margin-top: 1rem;

    height: 0.5rem;

    border-radius: 999px;

    background: rgba(4, 8, 18, 0.65);

    overflow: hidden;

}



.dashboard-progress__bar span {

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.85), rgba(107, 163, 255, 0.6));

    box-shadow: 0 10px 30px rgba(59, 130, 246, 0.35);

}



.dashboard-progress__hint {

    margin-top: 0.85rem;

    font-size: 0.85rem;

    color: rgba(214, 222, 237, 0.72);

    line-height: 1.6;

}



.dashboard-quick-link {

    position: relative;

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 1rem;

    border-radius: 1.5rem;

    border: 1px solid var(--vertali-border-soft);

    padding: 1.25rem 1.4rem;

    background: var(--vertali-glass-secondary);

    color: rgba(222, 232, 245, 0.88);

    text-decoration: none;

    transition: transform 0.25s ease, border-color 0.25s ease, background 0.2s ease, color 0.25s ease;

}



.dashboard-quick-link:hover,

.dashboard-quick-link:focus-visible {

    transform: translateY(-4px);

    border-color: rgba(107, 163, 255, 0.48);

    background: var(--vertali-glass-primary);

    color: #f9fbff;

}



.dashboard-quick-link__label {

    font-size: 0.95rem;

    font-weight: 600;

    color: inherit;

}



.dashboard-quick-link__hint {

    margin-top: 0.3rem;

    font-size: 0.8rem;

    color: rgba(234, 234, 234, 0.6);

    line-height: 1.5;

}



.dashboard-quick-link__meta {

    align-self: center;

    border-radius: 999px;

    border: 1px solid rgba(107, 163, 255, 0.35);

    padding: 0.35rem 0.9rem;

    font-size: 0.7rem;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: rgba(222, 232, 245, 0.82);

}



.admin-poll-list {

    display: grid;

    gap: 1.5rem;

}



@media (min-width: 768px) {

    .admin-poll-list {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.admin-poll-card {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    border-radius: 1.75rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-soft);

    padding: 1.75rem;

    box-shadow: 0 28px 55px rgba(6, 12, 24, 0.4);

    transition: border-color 0.25s ease, transform 0.25s ease;

}



.admin-poll-card.is-active {

    border-color: rgba(107, 163, 255, 0.55);

    box-shadow: 0 30px 60px rgba(46, 115, 230, 0.28);

}



.admin-poll-card:hover {

    transform: translateY(-2px);

}



.admin-poll-card__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 1rem;

}



.admin-poll-card__title {

    font-size: 1.15rem;

    font-weight: 600;

    color: #fff;

}



.admin-poll-card__options {

    display: grid;

    gap: 0.75rem;

    margin: 0;

    padding: 0;

    list-style: none;

}



.admin-poll-card__option {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 0.8rem 1rem;

    border-radius: 1.25rem;

    background: rgba(15, 23, 42, 0.72);

    border: 1px solid rgba(107, 163, 255, 0.25);

}



.admin-poll-card__option-label {

    font-size: 0.95rem;

    color: rgba(234, 234, 234, 0.92);

}



.admin-poll-card__option-votes {

    font-size: 0.85rem;

    color: rgba(234, 234, 234, 0.6);

}



.admin-poll-card__meta {

    display: flex;

    flex-wrap: wrap;

    gap: 1rem;

    font-size: 0.8rem;

    color: rgba(214, 222, 237, 0.65);

}



.admin-poll-card__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

}



:root[data-theme="light"] .admin-poll-card {

    background: linear-gradient(150deg, rgba(255, 255, 255, 0.92), rgba(214, 222, 237, 0.8));

    border-color: rgba(72, 78, 90, 0.588);

}



:root[data-theme="light"] .admin-poll-card__option {

    background: rgba(234, 234, 234, 0.88);

    border-color: rgba(72, 78, 90, 0.588);

}



:root[data-theme="light"] .admin-poll-card__option-label {

    color: rgba(30, 41, 59, 0.85);

}



:root[data-theme="light"] .admin-poll-card__option-votes {

    color: rgba(71, 85, 105, 0.7);

}



:root[data-theme="light"] .admin-poll-card__meta {

    color: rgba(71, 85, 105, 0.7);

}



.dashboard-status {

    display: flex;

    align-items: flex-start;

    gap: 0.85rem;

    padding: 1.1rem 1.25rem;

    border-radius: 1.5rem;

    border: 1px solid var(--vertali-border-soft);

    background: rgba(8, 12, 24, 0.72);

}



.dashboard-status__indicator {

    flex-shrink: 0;

    height: 0.75rem;

    width: 0.75rem;

    border-radius: 999px;

    background: linear-gradient(135deg, rgba(28, 170, 102, 0.9), rgba(34, 197, 94, 0.85));

    box-shadow: 0 0 14px rgba(28, 170, 102, 0.6);

    margin-top: 0.35rem;

}



.dashboard-status__title {

    font-weight: 600;

    color: #fff;

}



.dashboard-status__hint {

    margin-top: 0.35rem;

    font-size: 0.8rem;

    color: rgba(214, 222, 237, 0.72);

    line-height: 1.5;

}



@media (min-width: 768px) {

    .timeline {

        gap: 1.25rem;

    }



    .disclaimer-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.admin-grid-accent {

    background: linear-gradient(120deg, rgba(185, 185, 185, 0.14), rgba(245, 245, 245, 0.12));

}





.show-grid {

    display: grid;

    gap: 1.25rem;

    grid-template-columns: repeat(1, minmax(0, 1fr));

}



.showboard-layout {

    display: flex;

    flex-direction: column;

    gap: 2.5rem;

}



.showboard-sidebar {

    flex: 0 0 auto;

    width: 100%;

}



.showboard-content {

    flex: 1 1 auto;

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}



.showboard-summary {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.showboard-summary__counts {

    font-size: 0.95rem;

    letter-spacing: 0.02em;

    color: rgba(214, 222, 237, 0.88);

}



.showboard-summary__active {

    font-size: 0.85rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(72, 78, 90, 0.9);

}



.show-filter {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    padding: 1.75rem;

    border-radius: 1.75rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: linear-gradient(150deg, rgba(72, 78, 90, 0.294), rgba(72, 78, 90, 0.105));

    box-shadow: 0 24px 48px rgba(18, 20, 24, 0.35);

    backdrop-filter: blur(18px);

}



.show-filter__intro {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



:root[data-theme="light"] .show-filter {

    border-color: rgba(18, 20, 24, 0.08);

    background: linear-gradient(150deg, rgba(210, 210, 210, 0.12), rgba(90, 90, 90, 0.06));

    box-shadow: 0 22px 40px rgba(18, 20, 24, 0.16);

}



.show-filter__heading {

    font-size: 0.9rem;

    letter-spacing: 0.18em;

    text-transform: uppercase;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.85);

}



.show-filter__description {

    font-size: 0.85rem;

    line-height: 1.6;

    color: rgba(214, 222, 237, 0.74);

}



.show-filter__options {

    list-style: none;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    margin: 0;

    padding: 0;

}



.show-filter__option {

    width: 100%;

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 0.85rem 1.1rem;

    border-radius: 1.25rem;

    border: 1px solid rgba(255, 255, 255, 0.08);

    background: rgba(18, 20, 24, 0.15);

    color: rgba(234, 234, 234, 0.82);

    font-size: 0.95rem;

    font-weight: 500;

    transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease, color 0.2s ease;

}



.show-filter__option:hover,

.show-filter__option:focus-visible {

    border-color: rgba(255, 255, 255, 0.22);

    background: rgba(18, 20, 24, 0.28);

    color: #fff;

    transform: translateY(-1px);

}



.show-filter__option.is-active {

    border-color: rgba(245, 245, 245, 0.5);

    background: linear-gradient(135deg, rgba(28, 170, 102, 0.22), rgba(245, 245, 245, 0.18));

    color: #fff;

    box-shadow: 0 12px 28px rgba(28, 170, 102, 0.24);

}



.show-filter__option-label {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

}



.show-filter__count {

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    color: rgba(72, 78, 90, 0.9);

}



.show-filter--detached {

    width: 100%;

}



.show-filter--detached .show-filter__options {

    width: 100%;

}



@media (min-width: 1024px) {

    .show-filter--detached {

        flex-direction: row;

        align-items: flex-start;

        justify-content: space-between;

        gap: 2.5rem;

    }



    .show-filter--detached .show-filter__intro {

        max-width: 320px;

    }



    .show-filter--detached .show-filter__options {

        flex-direction: row;

        flex-wrap: wrap;

        gap: 0.75rem;

        max-width: 360px;

    }



    .show-filter--detached .show-filter__option {

        flex: 1 1 calc(50% - 0.5rem);

    }

}



.show-empty-state {

    display: none;

}



.show-empty-state.is-visible {

    display: block;

}



.show-empty-state[hidden] {

    display: none !important;

}



.show-empty-state__panel {

    border-radius: 1.5rem;

    border: 1px dashed rgba(72, 78, 90, 0.84);

    background: rgba(18, 20, 24, 0.35);

    padding: 2.5rem;

    text-align: center;

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    color: rgba(214, 222, 237, 0.88);

}



.show-empty-state__title {

    font-size: 1.25rem;

    font-weight: 600;

    color: #fff;

}



.show-empty-state__description {

    font-size: 0.9rem;

    line-height: 1.7;

    color: rgba(234, 234, 234, 0.7);

}



.show-card.is-hidden {

    display: none;

}



@media (min-width: 640px) {

    .show-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



@media (min-width: 1024px) {

    .show-grid {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }



    .showboard-layout {

        flex-direction: row;

        align-items: flex-start;

    }



    .showboard-sidebar {

        max-width: 280px;

        position: sticky;

        top: 1.5rem;

    }

}



.in-house-badge {

    position: relative;

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    padding: 0.45rem 0.95rem;

    border-radius: 9999px;

    border: 1px solid rgba(148, 222, 255, 0.55);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.92), rgba(245, 245, 245, 0.88));

    color: rgba(1, 57, 66, 0.92);

    font-size: 0.55rem;

    font-weight: 700;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    box-shadow: 0 16px 32px rgba(13, 148, 136, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.45);

    text-decoration: none;

    white-space: nowrap;

    backdrop-filter: blur(6px);

}



.in-house-badge__icon {

    width: 0.85rem;

    height: 0.85rem;

    flex: none;

    color: rgba(0, 162, 196, 0.9);

}



.in-house-badge__text {

    letter-spacing: inherit;

}



.in-house-badge--overlay {

    position: absolute;

    top: 0.85rem;

    left: 0.85rem;

    z-index: 5;

}



.in-house-badge--modal {

    top: 1.15rem;

    left: 1.15rem;

}



.in-house-badge--poster {

    top: 1rem;

    left: 1rem;

}



.in-house-badge--inline {

    font-size: 0.6rem;

    letter-spacing: 0.34em;

}



.in-house-badge--compact {

    font-size: 0.5rem;

    padding: 0.35rem 0.75rem;

    letter-spacing: 0.28em;

}



.in-house-badge--compact.in-house-badge--overlay {

    top: 0.65rem;

    left: 0.65rem;

}



:root[data-theme="light"] .in-house-badge {

    border-color: rgba(170, 170, 170, 0.35);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.92), rgba(245, 245, 245, 0.88));

    color: rgba(18, 20, 24, 0.9);

    box-shadow: 0 16px 32px rgba(245, 245, 245, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.6);

}



:root[data-theme="light"] .in-house-badge__icon {

    color: rgba(0, 162, 196, 0.85);

}



.official-record-badge {

    position: relative;

    display: inline-block;

    user-select: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}



.official-record-badge__label {

    position: absolute;

    top: -0.75rem;

    right: 1rem;

    background: var(--vertali-glass-secondary);

    color: var(--color-accent-secondary);

    font-size: 0.6rem;

    font-weight: 700;

    letter-spacing: 0.15em;

    padding: 0.35rem 1rem;

    border-radius: 0.5rem;

    border: 2px solid var(--color-accent-secondary);

    backdrop-filter: blur(12px);

    box-shadow: 0 8px 32px rgba(167, 139, 250, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2);

    z-index: 2;

    text-transform: uppercase;

    animation: officialPulse 3s ease-in-out infinite;

}



@keyframes officialPulse {

    0%, 100% { box-shadow: 0 8px 32px rgba(167, 139, 250, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.2); }

    50% { box-shadow: 0 8px 32px rgba(167, 139, 250, 0.6), 0 0 0 2px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

}



.official-record-badge__content {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.5rem 2rem;

    background: var(--vertali-glass-secondary);

    border: 2px solid var(--color-accent-secondary);

    border-radius: 1rem;

    backdrop-filter: blur(16px);

    box-shadow: 0 20px 60px rgba(167, 139, 250, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.05), inset 0 2px 0 rgba(255, 255, 255, 0.1);

    position: relative;

    overflow: hidden;

    user-select: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}



.official-record-badge__content::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(167, 139, 250, 0.15), transparent);

    animation: officialScan 4s ease-in-out infinite;

    pointer-events: none;

}



@keyframes officialScan {

    0% { left: -100%; }

    50% { left: 100%; }

    100% { left: 100%; }

}



.official-record-badge__icon {

    width: 2rem;

    height: 2rem;

    flex: none;

    color: var(--color-accent-secondary);

    filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.6));

    animation: iconGlow 2s ease-in-out infinite alternate;

    pointer-events: none;

}



@keyframes iconGlow {

    from { filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.6)); }

    to { filter: drop-shadow(0 0 20px rgba(167, 139, 250, 0.8)); }

}



.official-record-badge__text {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

    user-select: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}



.official-record-badge__label-text {

    font-size: 0.8rem;

    font-weight: 600;

    color: var(--color-accent-secondary);

    letter-spacing: 0.1em;

    text-transform: uppercase;

}



.official-record-badge__report-id {

    font-size: 1.25rem;

    font-weight: 800;

    color: var(--color-text);

    letter-spacing: 0.05em;

    font-family: 'Courier New', monospace;

    text-shadow: 0 0 10px rgba(167, 139, 250, 0.5);

    user-select: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}



.official-record-badge__seal {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.25rem;

    padding: 0.5rem;

    border: 2px solid var(--color-accent-secondary);

    border-radius: 50%;

    background: conic-gradient(from 0deg, var(--color-accent-secondary), var(--color-accent-secondary), transparent, var(--color-accent-secondary));

    animation: sealRotate 20s linear infinite;

}



@keyframes sealRotate {

    from { transform: rotate(0deg); }

    to { transform: rotate(360deg); }

}



.official-record-badge__seal-text {

    font-size: 0.5rem;

    font-weight: 700;

    color: var(--color-accent-secondary);

    letter-spacing: 0.1em;

    text-transform: uppercase;

    position: absolute;

    bottom: -1rem;

    background: var(--vertali-glass-secondary);

    padding: 0.125rem 0.5rem;

    border-radius: 0.25rem;

    border: 1px solid var(--color-accent-secondary);

}



.official-record-badge__clearance {

    font-size: 0.65rem;

    font-weight: 600;

    color: var(--color-accent-secondary);

    letter-spacing: 0.1em;

    text-transform: uppercase;

    opacity: 0.8;

    margin-top: 0.25rem;

}



.official-record-badge__subtitle {

    font-size: 0.75rem;

    font-weight: 500;

    color: var(--color-text);

    opacity: 0.9;

    margin-top: 0.5rem;

    padding: 0.5rem;

    background: rgba(167, 139, 250, 0.1);

    border: 1px solid rgba(167, 139, 250, 0.3);

    border-radius: 0.375rem;

    text-align: center;

    font-style: italic;

    user-select: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}



.official-record-badge__username-section {

    position: absolute;

    top: 50%;

    right: -2rem;

    transform: translateY(-50%);

    display: flex;

    align-items: center;

    gap: 0.5rem;

    background: var(--vertali-glass-secondary);

    border: 2px solid var(--color-accent-secondary);

    border-radius: 0.5rem;

    padding: 0.5rem 1rem;

    box-shadow: 0 8px 32px rgba(167, 139, 250, 0.3);

    backdrop-filter: blur(12px);

    animation: usernamePulse 3s ease-in-out infinite;

}



@keyframes usernamePulse {

    0%, 100% { box-shadow: 0 8px 32px rgba(167, 139, 250, 0.3); }

    50% { box-shadow: 0 8px 32px rgba(167, 139, 250, 0.5); }

}



.official-record-badge__username-arrow {

    width: 0;

    height: 0;

    border-top: 0.5rem solid transparent;

    border-bottom: 0.5rem solid transparent;

    border-right: 0.75rem solid var(--color-accent-secondary);

    filter: drop-shadow(0 0 4px rgba(167, 139, 250, 0.4));

}



.official-record-badge__username-text {

    font-size: 0.875rem;

    font-weight: 600;

    color: var(--color-accent-secondary);

    letter-spacing: 0.05em;

    text-transform: uppercase;

    user-select: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}



.official-record-badge__watermark {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%) rotate(-45deg);

    font-size: 3rem;

    font-weight: 900;

    color: rgba(167, 139, 250, 0.08);

    letter-spacing: 0.2em;

    text-transform: uppercase;

    pointer-events: none;

    user-select: none;

    -webkit-user-select: none;

    -moz-user-select: none;

    -ms-user-select: none;

}



.official-record-badge__corner-bracket {

    position: absolute;

    width: 1rem;

    height: 1rem;

    border: 2px solid var(--color-accent-secondary);

    pointer-events: none;

}



.official-record-badge__corner-bracket.top-left {

    top: 0.5rem;

    left: 0.5rem;

    border-right: none;

    border-bottom: none;

}



.official-record-badge__corner-bracket.top-right {

    top: 0.5rem;

    right: 0.5rem;

    border-left: none;

    border-bottom: none;

}



.official-record-badge__corner-bracket.bottom-left {

    bottom: 0.5rem;

    left: 0.5rem;

    border-right: none;

    border-top: none;

}



.official-record-badge__corner-bracket.bottom-right {

    bottom: 0.5rem;

    right: 0.5rem;

    border-left: none;

    border-top: none;

}



/* Light theme styles for official record badge */

:root[data-theme="light"] .official-record-badge__label {

    background: var(--vertali-glass-secondary);

    color: var(--color-accent-secondary);

    border-color: var(--color-accent-secondary);

    box-shadow: 0 8px 32px rgba(167, 139, 250, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.3);

}



:root[data-theme="light"] .official-record-badge__content {

    background: var(--vertali-glass-secondary);

    border-color: var(--color-accent-secondary);

    box-shadow: 0 20px 60px rgba(167, 139, 250, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 2px 0 rgba(255, 255, 255, 0.2);

}



:root[data-theme="light"] .official-record-badge__icon {

    color: var(--color-accent-secondary);

    filter: drop-shadow(0 0 12px rgba(167, 139, 250, 0.5));

}



:root[data-theme="light"] .official-record-badge__label-text {

    color: var(--color-accent-secondary);

}



:root[data-theme="light"] .official-record-badge__report-id {

    color: var(--color-text);

    text-shadow: 0 0 10px rgba(167, 139, 250, 0.4);

}



.show-card {

    position: relative;

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    padding: 1.25rem;

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: linear-gradient(140deg, rgba(72, 78, 90, 0.252), rgba(72, 78, 90, 0));

    box-shadow: 0 18px 36px rgba(18, 20, 24, 0.32);

    transition: transform 0.25s ease, border-color 0.25s ease, background 0.25s ease;

    min-height: 240px;

    cursor: pointer;

    overflow: hidden;

    text-align: center;

}



:root[data-theme="light"] .show-card {

    border-color: rgba(18, 20, 24, 0.08);

    background: linear-gradient(140deg, rgba(90, 90, 90, 0.08), rgba(210, 210, 210, 0.04));

    box-shadow: 0 20px 35px rgba(18, 20, 24, 0.12);

}



.show-card__media {

    position: relative;

    overflow: hidden;

    border-radius: 1.25rem;

    border: 1px solid rgba(255, 255, 255, 0.14);

    aspect-ratio: 2 / 3;

    max-height: 210px;

    background: linear-gradient(135deg, rgba(15, 22, 36, 0.88), rgba(38, 55, 88, 0.52));

}



.show-card__media img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    display: block;

    transition: transform 0.35s ease;

}



.trial-overlay {

    position: absolute;

    top: 0.85rem;

    right: 0.85rem;

    z-index: 6;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.35rem 0.85rem;

    border-radius: 999px;

    border: 1px solid rgba(244, 114, 182, 0.45);

    background: linear-gradient(135deg, rgba(115, 115, 115, 0.86), rgba(244, 114, 182, 0.7));

    color: #ffe9f1;

    font-size: 0.55rem;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    box-shadow: 0 18px 32px rgba(115, 115, 115, 0.4);

    pointer-events: none;

}



.trial-overlay--compact {

    font-size: 0.48rem;

    padding: 0.3rem 0.7rem;

}



.trial-overlay--modal {

    top: 1.15rem;

    right: 1.15rem;

}



.show-card__media-placeholder {

    position: absolute;

    inset: 0;

    display: flex;

    align-items: center;

    justify-content: center;

    padding: 1.5rem;

    text-align: center;

    font-size: 0.75rem;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.7);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.24), rgba(115, 115, 115, 0.18));

}



:root[data-theme="light"] .show-card__media {

    border-color: rgba(18, 20, 24, 0.1);

    background: linear-gradient(135deg, rgba(90, 90, 90, 0.12), rgba(210, 210, 210, 0.08));

}



:root[data-theme="light"] .trial-overlay {

    border-color: rgba(190, 24, 93, 0.45);

    background: linear-gradient(135deg, rgba(244, 114, 182, 0.92), rgba(250, 204, 21, 0.58));

    color: rgba(74, 20, 140, 0.95);

    box-shadow: 0 16px 30px rgba(244, 114, 182, 0.25);

}



:root[data-theme="light"] .show-card__media-placeholder {

    color: rgba(18, 20, 24, 0.55);

    background: linear-gradient(135deg, rgba(245, 245, 245, 0.18), rgba(245, 245, 245, 0.12));

}



.show-card__content {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    flex: 1 1 auto;

    align-items: center;

    text-align: center;

}



.show-card:hover,

.show-card:focus-within {

    transform: translateY(-6px);

    border-color: rgba(148, 163, 184, 0.35);

    background: linear-gradient(140deg, rgba(23, 35, 58, 0.92), rgba(52, 73, 108, 0.55));

}



.show-card:hover .show-card__media img,

.show-card:focus-within .show-card__media img {

    transform: scale(1.05);

}



:root[data-theme="light"] .show-card:hover,

:root[data-theme="light"] .show-card:focus-within {

    border-color: rgba(90, 90, 90, 0.26);

}



.show-card__header {

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    flex-wrap: wrap;

}



.show-card__status-group {

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 0.5rem;

    flex-wrap: wrap;

}



.show-card__status-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

}



.show-card__body {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.85rem;

    flex: 1 1 auto;

}



.show-card__title {

    font-size: 1.25rem;

    font-weight: 600;

    letter-spacing: -0.01em;

}



.show-card__meta {

    display: grid;

    gap: 0.85rem;

    justify-items: center;

    font-size: 0.85rem;

}



@media (min-width: 640px) {

    .show-card__meta {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.show-card__meta div {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

    padding: 0.9rem 1rem;

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.16);

    background: rgba(18, 20, 24, 0.35);

    align-items: center;

    text-align: center;

}



:root[data-theme="light"] .show-card__meta div {

    background: linear-gradient(135deg, rgba(214, 222, 237, 0.8), rgba(234, 234, 234, 0.52));

    border-color: rgba(72, 78, 90, 0.525);

}



.show-card__meta dt {

    text-transform: uppercase;

    letter-spacing: 0.3em;

    font-size: 0.65rem;

    color: rgba(72, 78, 90, 0.9);

}



.show-card__meta dd {

    font-size: 0.95rem;

    font-weight: 500;

    color: #d1d5db;

}



:root[data-theme="light"] .show-card__meta dd {

    color: #10131a;

}



.status-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.35rem 0.9rem;

    border-radius: 999px;

    border: 1px solid rgba(107, 163, 255, 0.38);

    font-size: 0.7rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.18), rgba(10, 16, 28, 0.82));

    color: rgba(238, 244, 255, 0.92);

}



.status-pill--running {

    border-color: rgba(34, 197, 94, 0.6);

    background: linear-gradient(135deg, rgba(34, 197, 94, 0.25), rgba(16, 185, 129, 0.15));

    color: #86efac;

    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.1), 0 1px 3px rgba(34, 197, 94, 0.2);

}



.status-pill--available {

    border-color: rgba(59, 130, 246, 0.6);

    background: linear-gradient(135deg, rgba(59, 130, 246, 0.25), rgba(37, 99, 235, 0.15));

    color: #93c5fd;

    box-shadow: 0 0 0 1px rgba(59, 130, 246, 0.1), 0 1px 3px rgba(59, 130, 246, 0.2);

}



.status-pill--pending {

    border-color: rgba(168, 85, 247, 0.6);

    background: linear-gradient(135deg, rgba(168, 85, 247, 0.25), rgba(139, 92, 246, 0.15));

    color: #c4b5fd;

    box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.1), 0 1px 3px rgba(168, 85, 247, 0.2);

    position: relative;

}



.status-pill--pending::after {

    content: '';

    position: absolute;

    top: 2px;

    right: 2px;

    width: 6px;

    height: 6px;

    border-radius: 50%;

    background: #a855f7;

    box-shadow: 0 0 6px rgba(168, 85, 247, 0.6);

    animation: pulse-pending 2s infinite;

}



@keyframes pulse-pending {

    0%, 100% {

        opacity: 1;

        transform: scale(1);

    }

    50% {

        opacity: 0.7;

        transform: scale(1.2);

    }

}



.status-pill--trial {

    border-color: rgba(244, 114, 182, 0.6);

    background: linear-gradient(135deg, rgba(244, 114, 182, 0.25), rgba(236, 72, 153, 0.15));

    color: #f9a8d4;

    box-shadow: 0 0 0 1px rgba(244, 114, 182, 0.1), 0 1px 3px rgba(244, 114, 182, 0.2);

}



.status-pill--held {

    border-color: rgba(217, 119, 6, 0.6);

    background: linear-gradient(135deg, rgba(217, 119, 6, 0.25), rgba(245, 158, 11, 0.15));

    color: #fbbf24;

    box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.1), 0 1px 3px rgba(217, 119, 6, 0.2);

}



.status-pill--private {

    border-color: rgba(107, 114, 128, 0.6);

    background: linear-gradient(135deg, rgba(107, 114, 128, 0.25), rgba(75, 85, 99, 0.15));

    color: #d1d5db;

    box-shadow: 0 0 0 1px rgba(107, 114, 128, 0.1), 0 1px 3px rgba(107, 114, 128, 0.2);

}



.status-pill--upcoming {

    border-color: rgba(56, 189, 248, 0.6);

    background: linear-gradient(135deg, rgba(56, 189, 248, 0.25), rgba(14, 165, 233, 0.15));

    color: #7dd3fc;

    box-shadow: 0 0 0 1px rgba(56, 189, 248, 0.1), 0 1px 3px rgba(56, 189, 248, 0.2);

}



.status-pill--unavailable {

    border-color: rgba(239, 68, 68, 0.6);

    background: linear-gradient(135deg, rgba(239, 68, 68, 0.25), rgba(220, 38, 38, 0.15));

    color: #fca5a5;

    box-shadow: 0 0 0 1px rgba(239, 68, 68, 0.1), 0 1px 3px rgba(239, 68, 68, 0.2);

}



.status-pill--default {

    border-color: rgba(107, 114, 128, 0.6);

    background: linear-gradient(135deg, rgba(107, 114, 128, 0.25), rgba(75, 85, 99, 0.15));

    color: #d1d5db;

    box-shadow: 0 0 0 1px rgba(107, 114, 128, 0.1), 0 1px 3px rgba(107, 114, 128, 0.2);

}



.countdown-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.4rem 1rem;

    border-radius: 999px;

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    border: 1px solid rgba(96, 165, 250, 0.25);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(96, 165, 250, 0.05));

    color: rgba(147, 197, 253, 0.95);

    box-shadow: 0 0 20px rgba(96, 165, 250, 0.1);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.countdown-badge--upcoming {

    border-color: rgba(96, 165, 250, 0.35);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.08));

    color: #93c5fd;

    box-shadow: 0 0 24px rgba(96, 165, 250, 0.15);

}



.countdown-badge--upcoming:hover {

    border-color: rgba(96, 165, 250, 0.5);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0.12));

    box-shadow: 0 0 32px rgba(96, 165, 250, 0.25);

    transform: translateY(-1px);

}



.countdown-badge--active {

    border-color: rgba(167, 139, 250, 0.45);

    background: linear-gradient(135deg, rgba(167, 139, 250, 0.25), rgba(167, 139, 250, 0.1));

    color: #c4b5fd;

    box-shadow: 0 0 28px rgba(167, 139, 250, 0.2);

}



.countdown-badge--active:hover {

    border-color: rgba(167, 139, 250, 0.6);

    background: linear-gradient(135deg, rgba(167, 139, 250, 0.35), rgba(167, 139, 250, 0.15));

    box-shadow: 0 0 40px rgba(167, 139, 250, 0.3);

    transform: translateY(-1px);

}



.countdown-badge--past {

    border-color: rgba(72, 78, 90, 0.4);

    background: linear-gradient(135deg, rgba(72, 78, 90, 0.2), rgba(72, 78, 90, 0.08));

    color: rgba(203, 213, 225, 0.7);

    box-shadow: 0 0 16px rgba(0, 0, 0, 0.2);

}



.countdown-badge--neutral {

    border-color: rgba(96, 165, 250, 0.2);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.12), rgba(96, 165, 250, 0.04));

    color: rgba(203, 213, 225, 0.85);

    box-shadow: 0 0 16px rgba(96, 165, 250, 0.08);

}



.episode-chronology {

    position: relative;

    overflow: hidden;

}



.episode-chronology__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 1.5rem;

}



.episode-chronology__kicker {

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    color: var(--color-text-muted);

}



.episode-chronology__title {

    margin-top: 0.75rem;

    font-size: 1.5rem;

    font-weight: 700;

    letter-spacing: -0.01em;

    color: var(--color-text);

    line-height: 1.2;

}



.episode-chronology__status {

    display: flex;

    align-items: center;

    justify-content: flex-end;

    min-width: max-content;

}



.episode-chronology__controls {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding-top: 0.5rem;

}



.episode-chronology__nav {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.65rem 1.2rem;

    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(18, 20, 24, 0.68);

    color: rgba(234, 234, 234, 0.82);

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    transition: background 0.3s ease, border-color 0.3s ease, transform 0.3s ease, color 0.3s ease;

}



.episode-chronology__nav:hover {

    transform: translateY(-2px);

    color: #fff;

    border-color: rgba(72, 78, 90, 0.9);

    background: rgba(245, 245, 245, 0.18);

}



.episode-chronology__nav:focus-visible {

    outline: 2px solid rgba(245, 245, 245, 0.6);

    outline-offset: 3px;

}



.episode-chronology__nav-icon {

    font-size: 1rem;

}



.episode-chronology__nav-label {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    max-width: clamp(7.5rem, 30vw, 16rem);

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;

}



.episode-chronology__viewport {

    position: relative;

    overflow: hidden;

    border-radius: 0.75rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-secondary);

    backdrop-filter: blur(8px);

    padding: 1.5rem;

    cursor: grab;

    scroll-behavior: smooth;

    touch-action: pan-y;

}



.episode-chronology.is-dragging .episode-chronology__viewport {

    cursor: grabbing;

}



.episode-chronology__viewport:focus-visible {

    outline: 2px solid rgba(245, 245, 245, 0.55);

    outline-offset: 4px;

}



.episode-chronology__track {

    display: flex;

    align-items: stretch;

    gap: 1.5rem;

    padding: 1.5rem 0 1.75rem;

    min-width: max-content;

}



.episode-chronology__item {

    position: relative;

    flex: 0 0 clamp(260px, 55vw, 340px);

    display: flex;

    flex-direction: column;

    gap: 1rem;

    padding: 1.5rem;

    border-radius: 0.75rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-secondary);

    backdrop-filter: blur(8px);

    color: var(--color-text-muted);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    opacity: 0.6;

}



.episode-chronology__item.is-active {

    border-color: var(--vertali-border-stronger);

    background: var(--vertali-glass-primary);

    color: var(--color-text);

    box-shadow: 0 8px 25px rgba(96, 165, 250, 0.15);

    transform: translateY(-2px);

    opacity: 1;

}



.episode-chronology__item.is-previous,

.episode-chronology__item.is-next {

    opacity: 0.85;

}



.episode-chronology__item-header {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 0.75rem;

    min-height: 1.5rem;

}



.episode-chronology__position-label {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    padding: 0.35rem 0.8rem;

    border-radius: 0.375rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-soft);

    font-size: 0.62rem;

    font-weight: 600;

    letter-spacing: 0.025em;

    text-transform: uppercase;

    color: var(--color-text-muted);

}



.episode-chronology__item.is-previous .episode-chronology__position-label {

    color: rgba(214, 222, 237, 0.82);

    border-color: rgba(234, 234, 234, 0.28);

    background: rgba(72, 78, 90, 0.315);

}



.episode-chronology__item.is-next .episode-chronology__position-label {

    color: rgba(225, 225, 225, 0.85);

    border-color: rgba(225, 225, 225, 0.32);

    background: rgba(245, 245, 245, 0.18);

}



.episode-chronology__code {

    font-size: 0.85rem;

    font-weight: 600;

    letter-spacing: 0.025em;

    text-transform: uppercase;

    color: var(--color-text-muted);

}



.episode-chronology__item.is-active .episode-chronology__code {

    color: var(--color-text);

}



.episode-chronology__name {

    font-size: 1.12rem;

    font-weight: 600;

    line-height: 1.4;

    color: inherit;

}



.episode-chronology__meta {

    display: flex;

    flex-wrap: wrap;

    gap: 0.65rem;

    font-size: 0.72rem;

    letter-spacing: 0.025em;

    text-transform: uppercase;

    color: var(--color-text-muted);

}



.episode-chronology__meta span {

    white-space: nowrap;

}



.episode-chronology__countdown {

    font-size: 0.8rem;

    font-weight: 600;

    letter-spacing: 0.025em;

    text-transform: uppercase;

    color: var(--color-text-muted);

}



.episode-chronology__summary {

    font-size: 0.92rem;

    line-height: 1.65;

    color: var(--color-text-muted);

    display: -webkit-box;

    -webkit-line-clamp: 4;

    line-clamp: 4;

    -webkit-box-orient: vertical;

    overflow: hidden;

}



@media (min-width: 768px) {

    .episode-chronology__item {

        flex-basis: clamp(280px, 42vw, 360px);

    }



    .episode-chronology__title {

        font-size: 1.75rem;

    }

}



@media (max-width: 640px) {

    .episode-chronology__header {

        flex-direction: column;

        align-items: flex-start;

    }



    .episode-chronology__status {

        width: 100%;

        justify-content: flex-start;

    }



    .episode-chronology__nav-label {

        max-width: 9rem;

        font-size: 0.65rem;

    }



    .episode-chronology__viewport {

        padding: 0 1rem;

    }

}



.episode-season {

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(255, 255, 255, 0.05);

    color: rgba(234, 234, 234, 0.9);

    transition: border-color 0.2s ease, background-color 0.2s ease;

    overflow: hidden;

}



.episode-season[open] {

    border-color: rgba(255, 255, 255, 0.2);

    background: rgba(255, 255, 255, 0.08);

}



.episode-season__summary {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 1rem;

    padding: 1.25rem 1.5rem;

    cursor: pointer;

    list-style: none;

    outline: none;

}



.episode-season {

    list-style: none;

}



.episode-season__summary::-webkit-details-marker {

    display: none;

}



.episode-season__summary::marker {

    content: '';

    color: transparent;

    font-size: 0;

}



.episode-season__summary:focus-visible {

    box-shadow: 0 0 0 2px rgba(245, 245, 245, 0.35);

    border-radius: 1.25rem;

}



.episode-season__summary-content {

    display: flex;

    align-items: center;

    justify-content: space-between;

    flex-wrap: wrap;

    gap: 0.75rem;

    width: 100%;

}



.episode-season__chevron {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    width: 2rem;

    height: 2rem;

    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(255, 255, 255, 0.08);

    color: rgba(214, 222, 237, 0.85);

    transition: transform 0.3s ease, background-color 0.2s ease, border-color 0.2s ease;

}



.episode-season__chevron-icon {

    width: 0.875rem;

    height: 0.875rem;

}



.episode-season[open] .episode-season__chevron {

    transform: rotate(180deg);

    background: rgba(255, 255, 255, 0.12);

    border-color: rgba(255, 255, 255, 0.28);

}



.episode-season__body {

    padding: 0 1.5rem 1.5rem;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.episode-season__list {

    margin-top: 1.25rem;

}



.episode-season__empty {

    margin-top: 1.25rem;

}



.episode-season__list li {

    transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;

}



.episode-season__list li:hover {

    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.2);

    background: rgba(255, 255, 255, 0.08);

}



.empty-state {

    display: grid;

    gap: 1rem;

    padding: 3rem;

    border-radius: 2rem;

    border: 1px dashed rgba(255, 255, 255, 0.25);

    background: rgba(18, 20, 24, 0.45);

    text-align: center;

}



#show-modal {

    transition: opacity 0.35s ease;

}



#show-modal.hidden {

    opacity: 0;

}



#show-modal.flex {

    opacity: 1;

}



#show-modal > * {

    position: relative;

    z-index: 1;

}



.modal-hero {

    aspect-ratio: 2 / 3;

    max-height: 360px;

    overflow: hidden;

    border-radius: 1.75rem;

    border: 1px solid var(--accent-soft, rgba(72, 78, 90, 0.525));

    background:

        linear-gradient(160deg, rgba(18, 20, 24, 0.65), transparent 55%),

        var(--accent-soft, rgba(72, 78, 90, 0.378));

    box-shadow: inset 0 0 0 1px rgba(18, 20, 24, 0.2), 0 18px 45px var(--accent-glow, rgba(245, 245, 245, 0.2));

    transition: border-color 0.4s ease, background 0.4s ease, box-shadow 0.4s ease;

}



@media (min-width: 768px) {

    .modal-hero {

        max-height: 420px;

    }

}



.modal-hero img {

    width: 100%;

    height: 100%;

    object-fit: cover;

    transform: scale(1.08);

    transform-origin: center;

}



.modal-panel {

    position: relative;

    background:

        linear-gradient(140deg, rgba(72, 78, 90, 0.378), var(--accent-soft, rgba(245, 245, 245, 0.12))),

        rgba(18, 20, 24, 0.72);

    backdrop-filter: blur(28px);

    box-shadow: 0 30px 80px var(--accent-glow, rgba(245, 245, 245, 0.3));

    transition: background 0.6s ease, box-shadow 0.6s ease;

    z-index: 1;

}



.modal-header {

    backdrop-filter: blur(12px);

}

.modal-header {

    backdrop-filter: blur(12px);

}



.modal-body {

    position: relative;

    max-height: min(65vh, 640px);

    overflow-y: auto;

}



.modal-body::-webkit-scrollbar {

    width: 0.5rem;

}



.modal-body::-webkit-scrollbar-track {

    background: rgba(72, 78, 90, 0.168);

    border-radius: 999px;

}



.modal-body::-webkit-scrollbar-thumb {

    background: rgba(72, 78, 90, 0.63);

    border-radius: 999px;

}



.modal-content {

    display: grid;

    gap: 2rem;

}



.modal-overview {

    display: grid;

    gap: 1.75rem;

}



@media (min-width: 1024px) {

    .modal-overview {

        grid-template-columns: minmax(0, 320px) minmax(0, 1fr);

        align-items: start;

    }

}



.modal-overview__media {

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

}



.modal-overview__labels {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



@media (min-width: 640px) {

    .modal-overview__labels {

        flex-direction: row;

        justify-content: space-between;

        align-items: flex-end;

    }

}



.modal-status-stack {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

}



.modal-metric-stack {

    display: flex;

    flex-wrap: wrap;

    gap: 0.6rem;

}



.modal-metric-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.45rem 1rem;

    border-radius: 999px;

    border: 1px solid rgba(72, 78, 90, 0.672);

    background: rgba(18, 20, 24, 0.6);

    font-size: 0.65rem;

    font-weight: 600;

    letter-spacing: 0.24em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.88);

}



:root[data-theme="light"] .modal-metric-chip {

    background: rgba(234, 234, 234, 0.7);

    border-color: rgba(72, 78, 90, 0.9);

    color: #10131a;

}



.modal-overview__summary {

    display: grid;

    gap: 1.25rem;

}



.modal-overview__kicker {

    text-transform: uppercase;

    letter-spacing: 0.4em;

    font-size: 0.7rem;

    color: rgba(72, 78, 90, 0.9);

}



.modal-overview__title {

    font-size: clamp(2rem, 1.2rem + 1.8vw, 2.75rem);

    font-weight: 600;

    color: #eaeaea;

}



:root[data-theme="light"] .modal-overview__title {

    color: #10131a;

}



.modal-overview__genres {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}



.modal-overview__description {

    font-size: 1rem;

    line-height: 1.7;

    color: rgba(214, 222, 237, 0.85);

}



:root[data-theme="light"] .modal-overview__description {

    color: rgba(18, 20, 24, 0.72);

}



.modal-detail-grid {

    display: grid;

    gap: 1rem;

}



@media (min-width: 640px) {

    .modal-detail-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.modal-detail-card {

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(18, 20, 24, 0.45);

    padding: 1.25rem;

}



:root[data-theme="light"] .modal-detail-card {

    background: rgba(214, 222, 237, 0.88);

    border-color: rgba(72, 78, 90, 0.735);

}



.modal-detail-card__label {

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.32em;

    color: rgba(72, 78, 90, 0.9);

}



.modal-detail-card__value {

    margin-top: 0.75rem;

    font-size: 0.95rem;

    font-weight: 600;

    color: rgba(234, 234, 234, 0.92);

}



:root[data-theme="light"] .modal-detail-card__value {

    color: #10131a;

}



.modal-cast {

    display: grid;

    gap: 1rem;

}



.modal-section-title {

    font-size: 1.25rem;

    font-weight: 600;

    color: #eaeaea;

}



:root[data-theme="light"] .modal-section-title {

    color: #10131a;

}



.modal-actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

}



/* Office application */

.office-hero__aurora {

    position: absolute;

    inset: -45% -30% -50% -30%;

    opacity: 0.85;

    filter: blur(120px) saturate(140%);

    pointer-events: none;

}



.office-hero__orb {

    position: absolute;

    width: 35rem;

    height: 35rem;

    border-radius: 50%;

    mix-blend-mode: screen;

    opacity: 0.55;

    animation: officeOrbDrift 18s ease-in-out infinite alternate;

}



.office-hero__orb--cyan {

    top: -15%;

    left: -5%;

    background: radial-gradient(circle at 30% 30%, rgba(220, 220, 220, 0.7), transparent 65%);

}



.office-hero__orb--violet {

    right: -10%;

    bottom: -20%;

    background: radial-gradient(circle at 60% 60%, rgba(115, 115, 115, 0.65), transparent 65%);

    animation-delay: 4s;

}



.office-hero__orb--rose {

    left: 40%;

    bottom: -35%;

    width: 28rem;

    height: 28rem;

    background: radial-gradient(circle at 40% 40%, rgba(244, 114, 182, 0.55), transparent 70%);

    animation-delay: 8s;

}



@keyframes officeOrbDrift {

    from {

        transform: translate3d(0, 0, 0) scale(1);

    }



    to {

        transform: translate3d(-40px, -25px, 0) scale(1.1);

    }

}



/* Viewing Restrictions Announcement Animations */

@media (prefers-reduced-motion: no-preference) {

    @keyframes pulseGlow {

        0%, 100% {

            opacity: 1;

            box-shadow: 0 0 8px rgba(212, 175, 55, 0.6), 0 0 16px rgba(212, 175, 55, 0.4);

        }

        50% {

            opacity: 0.7;

            box-shadow: 0 0 12px rgba(212, 175, 55, 0.8), 0 0 24px rgba(212, 175, 55, 0.6);

        }

    }



    @keyframes float {

        0%, 100% {

            transform: translateY(0px) translateX(0px);

        }

        33% {

            transform: translateY(-20px) translateX(10px);

        }

        66% {

            transform: translateY(-10px) translateX(-10px);

        }

    }



    @keyframes fadeInUp {

        from {

            opacity: 0;

            transform: translateY(20px);

        }

        to {

            opacity: 1;

            transform: translateY(0);

        }

    }



    .animate-pulse-glow {

        animation: pulseGlow 2s ease-in-out infinite;

    }



    .animate-float {

        animation: float 8s ease-in-out infinite;

    }



    .animate-fade-in-up {

        animation: fadeInUp 0.8s ease-out forwards;

    }

}



@media (prefers-reduced-motion: reduce) {

    .animate-pulse-glow,

    .animate-float,

    .animate-fade-in-up {

        animation: none;

    }

}



.office-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.35rem 0.9rem;

    border-radius: 999px;

    background: rgba(72, 78, 90, 0.252);

    border: 1px solid rgba(72, 78, 90, 0.588);

    font-size: 0.75rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.8);

}



.office-metric {

    position: relative;

    padding: 1.5rem;

    border-radius: 1.5rem;

    background: linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent), rgba(18, 20, 24, 0.45);

    border: 1px solid rgba(72, 78, 90, 0.42);

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.04);

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.office-metric__label {

    font-size: 0.75rem;

    letter-spacing: 0.26em;

    text-transform: uppercase;

    color: rgba(214, 222, 237, 0.65);

}



.office-metric__value {

    font-size: 1.75rem;

    font-weight: 700;

    display: flex;

    align-items: baseline;

    gap: 0.35rem;

    color: #eaeaea;

}



.office-metric__total {

    font-size: 1rem;

    color: rgba(214, 222, 237, 0.65);

    font-weight: 500;

}



.office-metric__caption {

    font-size: 0.78rem;

    color: rgba(203, 213, 225, 0.6);

}



.office-region {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}



.office-region__header {

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

}



@media (min-width: 640px) {

    .office-region__header {

        flex-direction: row;

        align-items: baseline;

        justify-content: space-between;

    }

}



.office-region__title {

    font-size: 1.5rem;

    font-weight: 700;

    letter-spacing: -0.01em;

}



.office-region__count {

    display: inline-flex;

    align-items: center;

    gap: 0.4rem;

    padding: 0.35rem 0.85rem;

    border-radius: 999px;

    background: rgba(245, 245, 245, 0.12);

    border: 1px solid rgba(245, 245, 245, 0.28);

    font-size: 0.75rem;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: rgba(209, 250, 229, 0.85);

}



.office-region__grid {

    display: grid;

    gap: 1.5rem;

}



@media (min-width: 768px) {

    .office-region__grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.office-card {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    border-radius: 2rem;

    padding: 1.75rem;

    background: linear-gradient(140deg, rgba(107, 163, 255, 0.18), rgba(18, 20, 24, 0.68));

    border: 1px solid rgba(148, 163, 184, 0.28);

    box-shadow: 0 32px 70px rgba(8, 12, 20, 0.5);

    overflow: hidden;

}



.office-card__header {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    align-items: flex-start;

}



.office-card__city {

    font-size: 1.25rem;

    font-weight: 600;

    letter-spacing: -0.01em;

}



.office-card__timezone {

    margin-top: 0.25rem;

    font-size: 0.8rem;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    color: rgba(72, 78, 90, 0.9);

}



.status-pill {

    display: inline-flex;

    align-items: center;

    gap: 0.375rem;

    padding: 0.5rem 1rem;

    border-radius: 0.5rem;

    border: 1px solid;

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.025em;

    text-transform: uppercase;

    backdrop-filter: blur(8px);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.status-pill::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);

    transition: left 0.5s ease;

}



.status-pill:hover::before {

    left: 100%;

}



.status-pill:hover {

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);

}



.status-pill[data-status-tone='emerald'] {

    color: #b7f4c8;

    background: rgba(22, 163, 74, 0.16);

    border-color: rgba(22, 163, 74, 0.35);

}



.status-pill[data-status-tone='amber'] {

    color: #93c5fd;

    background: rgba(96, 165, 250, 0.18);

    border-color: rgba(96, 165, 250, 0.35);

}



.status-pill[data-status-tone='rose'] {

    color: #fda4af;

    background: rgba(225, 29, 72, 0.18);

    border-color: rgba(225, 29, 72, 0.35);

}



.status-pill[data-status-tone='sky'] {

    color: #9bdcf8;

    background: rgba(170, 170, 170, 0.18);

    border-color: rgba(170, 170, 170, 0.35);

}



.office-card__body {

    display: grid;

    gap: 1.5rem;

}



@media (min-width: 640px) {

    .office-card__body {

        grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);

        align-items: center;

    }

}



.office-card__clock {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.office-card__time {

    font-size: 2.3rem;

    font-weight: 700;

    letter-spacing: -0.03em;

}



.office-card__meridiem {

    margin-left: 0.6rem;

    font-size: 0.9rem;

    letter-spacing: 0.32em;

}



.office-card__date {

    font-size: 0.85rem;

    color: rgba(203, 213, 225, 0.65);

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.office-card__status {

    display: flex;

    flex-direction: column;

    gap: 0.55rem;

}



.office-card__status-text {

    font-size: 0.95rem;

    color: rgba(214, 222, 237, 0.82);

    line-height: 1.5;

}



.office-card__change {

    font-size: 0.8rem;

    text-transform: uppercase;

    letter-spacing: 0.2em;

    color: rgba(72, 78, 90, 0.9);

}



.office-card__meta {

    display: grid;

    gap: 1.25rem;

}



@media (min-width: 640px) {

    .office-card__meta {

        grid-template-columns: repeat(3, minmax(0, 1fr));

    }

}



.office-card__meta-block {

    display: flex;

    flex-direction: column;

    gap: 0.45rem;

}



.office-card__meta-label {

    font-size: 0.78rem;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: rgba(72, 78, 90, 0.9);

}



.office-card__meta-value {

    font-size: 0.95rem;

    color: rgba(234, 234, 234, 0.82);

    line-height: 1.4;

}



.office-card__meta-list {

    display: flex;

    flex-direction: column;

    gap: 0.4rem;

    font-size: 0.9rem;

}



.office-card__link {

    color: rgba(205, 205, 205, 0.95);

    text-decoration: none;

}



.office-card__link:hover {

    text-decoration: underline;

}



.office-card__address {

    color: rgba(203, 213, 225, 0.65);

    line-height: 1.4;

}



.office-card__capabilities {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.office-card__capability {

    font-size: 0.85rem;

    color: rgba(191, 219, 254, 0.8);

    position: relative;

    padding-left: 1rem;

}



.office-card:hover {

    transform: translateY(-4px);

    transition: transform 0.3s ease;

}



.office-card:hover .status-pill {

    transform: translateY(-2px);

}

.office-card:hover {

    transform: translateY(-4px);

    transition: transform 0.3s ease;

}



.office-card:hover .status-pill {

    transform: translateY(-2px);

}



.outreach-toggle {

    display: inline-flex;

    align-items: center;

    gap: 0.45rem;

    padding: 0.35rem 0.9rem;

    border-radius: 999px;

    border: 1px solid rgba(110, 231, 183, 0.25);

    background: rgba(28, 170, 102, 0.12);

    font-size: 0.65rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    line-height: 1;

}



.outreach-toggle__icon {

    font-size: 0.95rem;

    line-height: 1;

    transition: color 0.25s ease;

}



.outreach-toggle[aria-expanded='true'] {

    background: rgba(28, 170, 102, 0.22);

    border-color: rgba(110, 231, 183, 0.45);

    color: #ecfdf5;

}



.outreach-toggle[aria-expanded='true'] .outreach-toggle__icon {

    color: #b7f4c8;

}



.outreach-episodes {

    transition: opacity 0.25s ease;

}



.outreach-episodes[hidden] {

    opacity: 0;

}



.admin-login {

    position: relative;

}



.admin-login-grid {

    display: grid;

    gap: clamp(2rem, 4vw, 3.25rem);

}



@media (min-width: 1024px) {

    .admin-login-grid {

        grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);

        align-items: stretch;

    }

}



.admin-login__panel {

    display: flex;

    flex-direction: column;

    gap: clamp(2rem, 3vw, 2.75rem);

    padding: clamp(2.5rem, 4vw, 3.75rem);

    isolation: isolate;

}



.admin-login__intro {

    display: flex;

    flex-direction: column;

    gap: 0.85rem;

}



.admin-login__title {

    font-size: clamp(2rem, 3.5vw, 2.85rem);

    font-weight: 700;

    letter-spacing: -0.015em;

    background: linear-gradient(135deg, #fff, rgba(191, 219, 254, 0.9));

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: titleShimmer 8s ease-in-out infinite;

}



@keyframes titleShimmer {

    0%, 100% { background-position: 0% 50%; }

    50% { background-position: 100% 50%; }

}



.admin-login__subtitle {

    font-size: 0.95rem;

    max-width: 48ch;

    line-height: 1.7;

}



.admin-login__form {

    display: grid;

    gap: 1.35rem;

}



/* Horizontal form layout */

.admin-login__form--horizontal {

    gap: 2rem;

}



.admin-login__form-row {

    display: grid;

    grid-template-columns: 1fr 1fr auto;

    gap: 1.5rem;

    align-items: end;

}



.admin-login__form-actions {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    align-items: flex-start;

}



/* Horizontal grid layout modifier */

.admin-login-grid--horizontal {

    grid-template-columns: 1fr;

    max-width: 1200px;

    margin: 0 auto;

}



@media (min-width: 1024px) {

    .admin-login-grid--horizontal {

        grid-template-columns: 1.2fr 0.8fr;

        align-items: start;

    }

    

    .admin-login__form-row {

        gap: 2rem;

    }

    

    .admin-login__terms {

        margin: 0;

        max-width: 400px;

    }

}



@media (min-width: 1280px) {

    .admin-login-grid--horizontal {

        grid-template-columns: 1.3fr 0.7fr;

    }

}



/* Mobile fallback - stack vertically on small screens */

@media (max-width: 767px) {

    .admin-login__form-row {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .admin-login__submit {

        width: 100%;

        min-width: auto;

    }

}



.form-label {

    display: flex;

    flex-direction: column;

    gap: 0.6rem;

    font-size: 0.85rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.88);

    position: relative;

}



.form-label > span {

    letter-spacing: 0.08em;

    text-transform: uppercase;

    transition: color 0.3s ease;

}



.form-label:focus-within > span {

    color: var(--color-accent);

}



.form-label .input-field {

    margin-top: 0;

    position: relative;

    background: var(--vertali-control-background);

    border: 1px solid var(--vertali-control-border);

    border-radius: 1rem;

    padding: 1rem 1.25rem;

    font-size: 0.95rem;

    color: var(--vertali-control-text);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(12px);

}



.form-label .input-field::placeholder {

    color: var(--vertali-control-placeholder);

    opacity: 0.8;

}



.form-label .input-field:focus {

    outline: none;

    border-color: var(--color-accent);

    background: rgba(96, 165, 250, 0.08);

    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.15), 0 8px 24px rgba(96, 165, 250, 0.2);

    transform: translateY(-1px);

}



.form-label .input-field:hover {

    border-color: rgba(96, 165, 250, 0.4);

    background: rgba(30, 35, 50, 0.95);

}



.admin-login__submit {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.75rem;

    width: 100%;

    min-width: 180px;

    border-radius: 999px;

    border: 1px solid rgba(96, 165, 250, 0.4);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.9), rgba(96, 165, 250, 0.7));

    color: #0b0c10;

    font-size: 0.9rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    padding: 1rem 2rem;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(16px);

    box-shadow: 0 12px 32px rgba(96, 165, 250, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);

    position: relative;

    overflow: hidden;

    align-self: flex-end;

}



.admin-login__submit::before {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.2), transparent);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.admin-login__submit:hover,

.admin-login__submit:focus-visible {

    transform: translateY(-3px);

    border-color: rgba(96, 165, 250, 0.6);

    background: linear-gradient(135deg, rgba(96, 165, 250, 1), rgba(96, 165, 250, 0.8));

    box-shadow: 0 20px 48px rgba(96, 165, 250, 0.4), 0 8px 24px rgba(0, 0, 0, 0.3);

}



.admin-login__submit:hover::before,

.admin-login__submit:focus-visible::before {

    opacity: 1;

}



.admin-login__submit:active {

    transform: translateY(-1px);

    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.3), 0 4px 16px rgba(0, 0, 0, 0.2);

}



.admin-login__terms {

    font-size: 0.75rem;

    color: rgba(234, 234, 234, 0.6);

    line-height: 1.6;

}



.admin-login__terms a {

    color: rgba(225, 225, 225, 0.9);

    text-decoration: underline;

    text-decoration-style: dotted;

    text-underline-offset: 0.3rem;

}



.login-security {

    border-radius: 1.5rem;

    border: 1px solid rgba(245, 245, 245, 0.28);

    background: linear-gradient(140deg, rgba(245, 245, 245, 0.18), rgba(245, 245, 245, 0.1));

    padding: 1.5rem;

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

    color: rgba(214, 222, 237, 0.88);

}



.login-security__title {

    font-size: 0.95rem;

    font-weight: 700;

    letter-spacing: 0.08em;

    text-transform: uppercase;

}



.login-security__copy {

    font-size: 0.85rem;

    line-height: 1.8;

}



.login-security__copy code {

    font-family: 'SFMono-Regular', Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;

    font-size: 0.8rem;

    background: rgba(18, 20, 24, 0.6);

    border-radius: 0.5rem;

    padding: 0.2rem 0.5rem;

    border: 1px solid rgba(72, 78, 90, 0.63);

}



.admin-login__aside {

    position: relative;

    overflow: hidden;

    border-radius: 2.5rem;

    border: 1px solid var(--vertali-glass-border);

    background: var(--vertali-glass-ambient);

    padding: clamp(2.5rem, 4vw, 3.5rem);

    display: flex;

    flex-direction: column;

    gap: 2rem;

    box-shadow:

        0 40px 100px rgba(0, 0, 0, 0.6),

        0 20px 60px rgba(167, 139, 250, 0.12),

        inset 0 1px 0 rgba(255, 255, 255, 0.12);

    backdrop-filter: blur(36px) saturate(180%);

    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);

}



.admin-login__aside::before {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: 

        radial-gradient(circle at 30% 20%, rgba(96, 165, 250, 0.12), transparent 60%),

        radial-gradient(circle at 70% 80%, rgba(167, 139, 250, 0.1), transparent 60%),

        linear-gradient(135deg, rgba(59, 130, 246, 0.05), transparent 50%);

    pointer-events: none;

    z-index: 0;

}



.admin-login__aside:hover {

    border-color: rgba(167, 139, 250, 0.35);

    box-shadow:

        0 48px 120px rgba(0, 0, 0, 0.7),

        0 24px 80px rgba(167, 139, 250, 0.18),

        0 0 30px rgba(167, 139, 250, 0.12);

    transform: translateY(-2px);

}



.admin-login__aside > * {

    position: relative;

    z-index: 1;

}

.admin-login__aside > * {

    position: relative;

    z-index: 1;

}



.admin-login__badge {

    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1.25rem;

    border-radius: 9999px;

    border: 1px solid rgba(96, 165, 250, 0.3);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.1));

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: rgba(191, 219, 254, 0.95);

    backdrop-filter: blur(12px);

    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.2);

    transition: all 0.3s ease;

}



.admin-login__badge:hover {

    border-color: rgba(96, 165, 250, 0.5);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0.15));

    transform: translateY(-1px);

    box-shadow: 0 12px 32px rgba(96, 165, 250, 0.3);

}



.admin-login__aside-title {

    font-size: clamp(1.75rem, 3.5vw, 2.6rem);

    font-weight: 800;

    line-height: 1.1;

    max-width: 22ch;

    background: linear-gradient(135deg, #fff, rgba(167, 139, 250, 0.9));

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    margin-bottom: 1rem;

    letter-spacing: -0.02em;

}



.admin-login__aside-copy {

    font-size: 1rem;

    line-height: 1.8;

    color: rgba(234, 234, 234, 0.9);

    max-width: 50ch;

    font-weight: 400;

    margin-bottom: 1.5rem;

}



.admin-login__aside-list {

    list-style: none;

    display: grid;

    gap: 1.1rem;

    padding: 0;

    margin: 0;

}



.admin-login__aside-list li {

    display: flex;

    align-items: flex-start;

    gap: 0.85rem;

    font-size: 0.95rem;

    line-height: 1.7;

    color: rgba(214, 222, 237, 0.88);

    padding: 0.75rem 1rem;

    border-radius: 1rem;

    transition: all 0.3s ease;

    border: 1px solid transparent;

}



.admin-login__aside-list li:hover {

    background: rgba(96, 165, 250, 0.08);

    border-color: rgba(96, 165, 250, 0.2);

    transform: translateX(4px);

    color: rgba(241, 245, 249, 0.95);

}



.admin-login__aside-list i {

    font-size: 1rem;

    margin-top: 0.25rem;

    color: rgba(225, 225, 225, 0.95);

    transition: all 0.3s ease;

}



.admin-login__aside-list li:hover i {

    color: var(--color-accent);

    transform: scale(1.1);

}



.admin-login__contact {

    margin-top: auto;

    padding-top: 1.5rem;

    border-top: 1px solid rgba(255, 255, 255, 0.18);

    font-size: 0.9rem;

    line-height: 1.7;

    color: rgba(214, 222, 237, 0.8);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.05), transparent);

    border-radius: 1rem;

    padding: 1.5rem;

    transition: all 0.3s ease;

}



.admin-login__contact:hover {

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.1), rgba(167, 139, 250, 0.05));

    border-color: rgba(96, 165, 250, 0.3);

}



.admin-login__contact h3 {

    font-size: 0.95rem;

    font-weight: 700;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    margin-bottom: 0.75rem;

    color: rgba(191, 219, 254, 0.95);

}



.admin-login__contact a {

    color: rgba(191, 219, 254, 0.95);

    text-decoration: underline;

    text-decoration-style: dotted;

    text-underline-offset: 0.3rem;

    transition: all 0.3s ease;

    font-weight: 500;

}



.admin-login__contact a:hover {

    color: var(--color-accent);

    text-decoration-style: solid;

    transform: translateX(2px);

    display: inline-block;

}



/* Modern Admin Dashboard Styles */

.admin-dashboard {

    display: flex;

    flex-direction: column;

    gap: 2rem;

}



.admin-dashboard__header {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    padding: 2rem;

    border-radius: 2rem;

    border: 1px solid var(--vertali-glass-border);

    background: var(--vertali-glass-primary);

    box-shadow:

        0 48px 120px rgba(0, 0, 0, 0.75),

        0 24px 80px rgba(96, 165, 250, 0.15),

        0 0 0 1px rgba(255, 255, 255, 0.08) inset,

        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    backdrop-filter: blur(40px) saturate(200%);

    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);

    overflow: hidden;

}



.admin-dashboard__header::before {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: radial-gradient(circle at 25% 25%, rgba(96, 165, 250, 0.1), transparent 50%),

                radial-gradient(circle at 75% 75%, rgba(167, 139, 250, 0.08), transparent 50%);

    pointer-events: none;

    z-index: -1;

}



.admin-dashboard__header:hover {

    border-color: rgba(96, 165, 250, 0.4);

    background: var(--vertali-glass-secondary);

    box-shadow:

        0 56px 140px rgba(0, 0, 0, 0.8),

        0 32px 100px rgba(96, 165, 250, 0.25),

        0 0 40px rgba(96, 165, 250, 0.15),

        0 0 0 1px rgba(96, 165, 250, 0.2) inset;

    transform: translateY(-2px);

}



.admin-dashboard__header-main {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 2rem;

}



.admin-dashboard__title-section {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.admin-dashboard__badge {

    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1.25rem;

    border-radius: 9999px;

    border: 1px solid rgba(96, 165, 250, 0.3);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.1));

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.32em;

    text-transform: uppercase;

    color: rgba(191, 219, 254, 0.95);

    backdrop-filter: blur(12px);

    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.2);

    transition: all 0.3s ease;

}



.admin-dashboard__badge:hover {

    border-color: rgba(96, 165, 250, 0.5);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.3), rgba(96, 165, 250, 0.15));

    transform: translateY(-1px);

    box-shadow: 0 12px 32px rgba(96, 165, 250, 0.3);

}



.admin-dashboard__title {

    font-size: clamp(2rem, 3.5vw, 2.85rem);

    font-weight: 700;

    letter-spacing: -0.015em;

    background: linear-gradient(135deg, #fff, rgba(191, 219, 254, 0.9));

    background-clip: text;

    -webkit-background-clip: text;

    -webkit-text-fill-color: transparent;

    animation: titleShimmer 8s ease-in-out infinite;

}



.admin-dashboard__metrics {

    display: flex;

    gap: 2rem;

}



.admin-dashboard__metric {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

}



.admin-dashboard__metric-value {

    font-size: 2rem;

    font-weight: 800;

    color: var(--color-accent);

    font-variant-numeric: tabular-nums;

}



.admin-dashboard__metric-label {

    font-size: 0.875rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.8);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.admin-dashboard__actions {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.admin-dashboard__action {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    border-radius: 9999px;

    border: 1px solid var(--vertali-glass-border);

    background: var(--vertali-glass-soft);

    color: rgba(214, 222, 237, 0.9);

    font-size: 0.875rem;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(12px);

}



.admin-dashboard__action:hover {

    border-color: var(--color-accent);

    background: rgba(96, 165, 250, 0.1);

    color: #fff;

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.2);

}



.admin-dashboard__action--primary {

    border-color: rgba(34, 197, 94, 0.4);

    background: rgba(34, 197, 94, 0.1);

    color: rgba(134, 239, 172, 0.9);

}



.admin-dashboard__action--primary:hover {

    border-color: rgba(34, 197, 94, 0.6);

    background: rgba(34, 197, 94, 0.2);

    color: #fff;

    box-shadow: 0 8px 24px rgba(34, 197, 94, 0.3);

}



.admin-dashboard__action--logout {

    border-color: rgba(239, 68, 68, 0.4);

    background: rgba(239, 68, 68, 0.1);

    color: rgba(252, 165, 165, 0.9);

}



.admin-dashboard__action--logout:hover {

    border-color: rgba(239, 68, 68, 0.6);

    background: rgba(239, 68, 68, 0.2);

    color: #fff;

    box-shadow: 0 8px 24px rgba(239, 68, 68, 0.3);

}



/* Tab Navigation */

.admin-dashboard__tabs {

    display: flex;

    gap: 0.5rem;

    padding: 0.5rem;

    border-radius: 1.5rem;

    border: 1px solid var(--vertali-glass-border);

    background: var(--vertali-glass-soft);

    backdrop-filter: blur(20px);

    overflow-x: auto;

}



.admin-dashboard__tab {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.75rem 1.5rem;

    border-radius: 1rem;

    border: 1px solid transparent;

    background: transparent;

    color: rgba(214, 222, 237, 0.7);

    font-size: 0.875rem;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    white-space: nowrap;

}



.admin-dashboard__tab:hover {

    color: #fff;

    background: rgba(255, 255, 255, 0.05);

    transform: translateY(-1px);

}



.admin-dashboard__tab.is-active {

    border-color: var(--color-accent);

    background: rgba(96, 165, 250, 0.15);

    color: #fff;

    box-shadow: 0 4px 16px rgba(96, 165, 250, 0.2);

}



.admin-dashboard__tab i {

    font-size: 0.875rem;

}



/* Panel Styles */

.admin-dashboard__panel {

    padding: 2rem;

    border-radius: 1.5rem;

    border: 1px solid var(--vertali-glass-border);

    background: var(--vertali-glass-primary);

    box-shadow:

        0 32px 80px rgba(0, 0, 0, 0.6),

        0 16px 48px rgba(96, 165, 250, 0.1),

        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    backdrop-filter: blur(32px) saturate(180%);

    transition: all 0.45s cubic-bezier(0.4, 0, 0.2, 1);

}



.admin-dashboard__panel:hover {

    border-color: rgba(96, 165, 250, 0.3);

    box-shadow:

        0 40px 100px rgba(0, 0, 0, 0.7),

        0 20px 60px rgba(96, 165, 250, 0.15),

        inset 0 1px 0 rgba(255, 255, 255, 0.15);

    transform: translateY(-2px);

}



.admin-dashboard__panel-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-bottom: 2rem;

}



.admin-dashboard__panel-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: #fff;

    letter-spacing: -0.01em;

}



.admin-dashboard__panel-status {

    padding: 0.5rem 1rem;

    border-radius: 9999px;

    background: rgba(34, 197, 94, 0.15);

    color: rgba(134, 239, 172, 0.9);

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.admin-dashboard__panel-stats {

    display: flex;

    gap: 1rem;

    flex-wrap: wrap;

}



.admin-dashboard__panel-stat {

    padding: 0.5rem 1rem;

    border-radius: 9999px;

    background: rgba(96, 165, 250, 0.1);

    color: rgba(191, 219, 254, 0.9);

    font-size: 0.75rem;

    font-weight: 600;

}



.admin-dashboard__panel-status-group {

    display: flex;

    gap: 0.5rem;

    align-items: center;

}



.admin-dashboard__panel-status-small {

    padding: 0.25rem 0.75rem;

    border-radius: 9999px;

    background: rgba(255, 255, 255, 0.1);

    color: rgba(214, 222, 237, 0.8);

    font-size: 0.7rem;

    font-weight: 500;

}



/* Metrics Grid */

.admin-dashboard__metrics-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));

    gap: 1.5rem;

    margin-bottom: 2rem;

}



.admin-dashboard__metric-card {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.5rem;

    padding: 1.5rem;

    border-radius: 1rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.02);

    transition: all 0.3s ease;

}



.admin-dashboard__metric-card:hover {

    border-color: var(--color-accent);

    background: rgba(96, 165, 250, 0.05);

    transform: translateY(-2px);

}



.admin-dashboard__metric-card-value {

    font-size: 2.5rem;

    font-weight: 800;

    color: var(--color-accent);

    font-variant-numeric: tabular-nums;

}



.admin-dashboard__metric-card-label {

    font-size: 0.875rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.8);

    text-align: center;

}



/* Progress Bars */

.admin-dashboard__progress-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 1.5rem;

}



.admin-dashboard__progress-item {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.admin-dashboard__progress-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.admin-dashboard__progress-label {

    font-size: 0.875rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.9);

}



.admin-dashboard__progress-value {

    font-size: 0.875rem;

    font-weight: 700;

    color: var(--color-accent);

}



.admin-dashboard__progress-bar {

    height: 0.5rem;

    border-radius: 9999px;

    background: rgba(255, 255, 255, 0.1);

    overflow: hidden;

}



.admin-dashboard__progress-fill {

    height: 100%;

    background: linear-gradient(90deg, var(--color-accent), var(--color-accent-secondary));

    border-radius: inherit;

    transition: width 0.6s ease;

}



/* Empty States */

.admin-dashboard__empty-state {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 1rem;

    padding: 3rem;

    text-align: center;

    border-radius: 1rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.02);

}



.admin-dashboard__empty-state i {

    font-size: 3rem;

    color: rgba(214, 222, 237, 0.3);

}



.admin-dashboard__empty-state p {

    font-size: 1.125rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.7);

}



.admin-dashboard__empty-state span {

    font-size: 0.875rem;

    color: rgba(214, 222, 237, 0.5);

}



/* Request Cards */

.admin-dashboard__requests-grid {

    display: grid;

    gap: 1rem;

    margin-bottom: 1.5rem;

}



.admin-dashboard__request-card {

    padding: 1.5rem;

    border-radius: 1rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.02);

    transition: all 0.3s ease;

}



.admin-dashboard__request-card:hover {

    border-color: rgba(96, 165, 250, 0.3);

    background: rgba(96, 165, 250, 0.05);

    transform: translateY(-1px);

}



.admin-dashboard__request-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 1rem;

    margin-bottom: 1rem;

}



.admin-dashboard__request-title h3 {

    font-size: 1rem;

    font-weight: 700;

    color: #fff;

    margin: 0;

}



.admin-dashboard__request-meta {

    display: flex;

    gap: 1rem;

    margin-top: 0.5rem;

}



.admin-dashboard__request-priority {

    font-size: 0.75rem;

    font-weight: 600;

    color: rgba(251, 191, 36, 0.9);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.admin-dashboard__request-date {

    font-size: 0.75rem;

    color: rgba(214, 222, 237, 0.6);

}



.admin-dashboard__request-details {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.admin-dashboard__request-requester {

    font-size: 0.875rem;

    color: rgba(214, 222, 237, 0.7);

}



.admin-dashboard__request-pitch {

    font-size: 0.875rem;

    color: rgba(214, 222, 237, 0.6);

    font-style: italic;

}



.admin-dashboard__request-deliverables {

    font-size: 0.75rem;

    color: rgba(214, 222, 237, 0.5);

}



.admin-dashboard__showing-more {

    font-size: 0.875rem;

    color: rgba(214, 222, 237, 0.5);

    text-align: center;

}



/* Activity Timeline */

.admin-dashboard__activity-timeline {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.admin-dashboard__activity-item {

    display: flex;

    gap: 1rem;

}



.admin-dashboard__activity-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 2rem;

    height: 2rem;

    border-radius: 50%;

    background: rgba(96, 165, 250, 0.1);

    color: var(--color-accent);

    flex-shrink: 0;

}



.admin-dashboard__activity-icon i {

    font-size: 0.5rem;

}



.admin-dashboard__activity-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.admin-dashboard__activity-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 1rem;

}



.admin-dashboard__activity-category {

    font-size: 0.75rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.6);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.admin-dashboard__activity-time {

    font-size: 0.75rem;

    color: rgba(214, 222, 237, 0.5);

}



.admin-dashboard__activity-title {

    font-size: 1rem;

    font-weight: 600;

    color: #fff;

    margin: 0;

}



.admin-dashboard__activity-description {

    font-size: 0.875rem;

    color: rgba(214, 222, 237, 0.7);

    line-height: 1.5;

}



/* Panel Footer */

.admin-dashboard__panel-footer {

    display: flex;

    justify-content: space-between;

    align-items: center;

    margin-top: 1.5rem;

    padding-top: 1.5rem;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

}



.admin-dashboard__panel-link {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    color: var(--color-accent);

    text-decoration: none;

    font-size: 0.875rem;

    font-weight: 600;

    transition: all 0.3s ease;

}



.admin-dashboard__panel-link:hover {

    color: #fff;

    transform: translateX(2px);

}



.admin-dashboard__sync-info {

    font-size: 0.75rem;

    color: rgba(214, 222, 237, 0.5);

}



.admin-dashboard__panel-actions {

    display: flex;

    gap: 1rem;

    align-items: center;

}



.admin-dashboard__action-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1rem;

    border-radius: 0.5rem;

    border: 1px solid rgba(255, 255, 255, 0.2);

    background: rgba(255, 255, 255, 0.1);

    color: rgba(214, 222, 237, 0.9);

    font-size: 0.75rem;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.3s ease;

    cursor: pointer;

}



.admin-dashboard__action-btn:hover {

    background: rgba(255, 255, 255, 0.15);

    transform: translateY(-1px);

}



.admin-dashboard__action-btn--danger {

    border-color: rgba(239, 68, 68, 0.4);

    background: rgba(239, 68, 68, 0.1);

    color: rgba(252, 165, 165, 0.9);

}



.admin-dashboard__action-btn--danger:hover {

    border-color: rgba(239, 68, 68, 0.6);

    background: rgba(239, 68, 68, 0.2);

    color: #fff;

}



/* Audience Section */

.admin-dashboard__audience-grid {

    display: grid;

    gap: 2rem;

    grid-template-columns: 1fr;

}



@media (min-width: 1024px) {

    .admin-dashboard__audience-grid {

        grid-template-columns: 1fr 1fr;

    }

}



.admin-dashboard__watch-summary {

    display: grid;

    grid-template-columns: repeat(3, 1fr);

    gap: 1rem;

    margin-bottom: 2rem;

}



.admin-dashboard__watch-metric {

    display: flex;

    flex-direction: column;

    align-items: center;

    gap: 0.25rem;

    padding: 1rem;

    border-radius: 0.75rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.02);

}



.admin-dashboard__watch-value {

    font-size: 1.5rem;

    font-weight: 800;

    color: var(--color-accent);

    font-variant-numeric: tabular-nums;

}



.admin-dashboard__watch-label {

    font-size: 0.75rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.7);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.admin-dashboard__top-viewers {

    margin-bottom: 2rem;

}



.admin-dashboard__section-title {

    font-size: 1rem;

    font-weight: 600;

    color: rgba(214, 222, 237, 0.9);

    margin-bottom: 1rem;

}



.admin-dashboard__viewer-chips {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}



.admin-dashboard__viewer-chip {

    display: inline-block;

    padding: 0.5rem 1rem;

    border-radius: 9999px;

    background: rgba(96, 165, 250, 0.1);

    color: rgba(191, 219, 254, 0.9);

    font-size: 0.75rem;

    font-weight: 500;

    border: 1px solid rgba(96, 165, 250, 0.2);

}



/* Toolkit Section */

.admin-dashboard__tools-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));

    gap: 1rem;

}



.admin-dashboard__tool-card {

    display: flex;

    align-items: center;

    gap: 1rem;

    padding: 1.5rem;

    border-radius: 1rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    background: rgba(255, 255, 255, 0.02);

    text-decoration: none;

    transition: all 0.3s ease;

    position: relative;

    overflow: hidden;

}



.admin-dashboard__tool-card::before {

    content: '';

    position: absolute;

    inset: 0;

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.05), transparent);

    opacity: 0;

    transition: opacity 0.3s ease;

}



.admin-dashboard__tool-card:hover {

    border-color: rgba(96, 165, 250, 0.3);

    background: rgba(96, 165, 250, 0.05);

    transform: translateY(-2px);

    box-shadow: 0 8px 24px rgba(96, 165, 250, 0.15);

}



.admin-dashboard__tool-card:hover::before {

    opacity: 1;

}



.admin-dashboard__tool-icon {

    display: flex;

    align-items: center;

    justify-content: center;

    width: 3rem;

    height: 3rem;

    border-radius: 0.75rem;

    background: rgba(96, 165, 250, 0.1);

    color: var(--color-accent);

    flex-shrink: 0;

    font-size: 1.25rem;

}



.admin-dashboard__tool-content {

    flex: 1;

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.admin-dashboard__tool-title {

    font-size: 1rem;

    font-weight: 600;

    color: #fff;

    margin: 0;

}



.admin-dashboard__tool-description {

    font-size: 0.875rem;

    color: rgba(214, 222, 237, 0.6);

    line-height: 1.4;

}



.admin-dashboard__tool-category {

    padding: 0.25rem 0.75rem;

    border-radius: 9999px;

    background: rgba(255, 255, 255, 0.1);

    color: rgba(214, 222, 237, 0.7);

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



/* Responsive Design */

@media (max-width: 768px) {

    .admin-dashboard__header-main {

        flex-direction: column;

        align-items: flex-start;

        gap: 1.5rem;

    }

    

    .admin-dashboard__metrics {

        width: 100%;

        justify-content: space-between;

    }

    

    .admin-dashboard__actions {

        width: 100%;

        justify-content: center;

    }

    

    .admin-dashboard__tabs {

        overflow-x: auto;

        -webkit-overflow-scrolling: touch;

    }

    

    .admin-dashboard__metrics-grid {

        grid-template-columns: 1fr;

    }

    

    .admin-dashboard__progress-grid {

        grid-template-columns: 1fr;

    }

    

    .admin-dashboard__watch-summary {

        grid-template-columns: 1fr;

    }

    

    .admin-dashboard__tools-grid {

        grid-template-columns: 1fr;

    }

    

    .admin-dashboard__panel-footer {

        flex-direction: column;

        gap: 1rem;

        align-items: flex-start;

    }

    

    .admin-dashboard__panel-actions {

        width: 100%;

        justify-content: center;

    }

}



/* Modern Show Page Styles - Complete Layout Overhaul */

.show-page {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    width: 100%;

    max-width: 100%;

    position: relative;

}



/* Hero Section - Modern Layout */

.show-page__hero {

    display: flex;

    flex-direction: column;

    gap: 2rem;

    padding: 2rem;

    border-radius: 1rem;

    background: var(--vertali-glass-primary);

    border: 1px solid var(--vertali-border-soft);

    backdrop-filter: blur(12px);

    position: relative;

    overflow: hidden;

}



.show-page__hero::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);

    opacity: 0.6;

}



.show-page__header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 2rem;

    flex-wrap: wrap;

}



.show-page__title-section {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    flex: 1;

    min-width: 280px;

}



.show-page__badge {

    align-self: flex-start;

    display: inline-flex;

    align-items: center;

    padding: 0.5rem 1rem;

    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));

    color: white;

    font-size: 0.625rem;

    font-weight: 600;

    letter-spacing: 0.05em;

    text-transform: uppercase;

    border-radius: 0.5rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.25);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



.show-page__badge:hover {

    background: linear-gradient(135deg, #7c3aed, #a855f7);

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);

}



.show-page__title {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 800;

    letter-spacing: -0.02em;

    line-height: 1.1;

    color: var(--color-text);

    margin: 0;

    text-shadow: 0 2px 20px rgba(0, 0, 0, 0.3);

}



.show-page__status-group {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

    align-items: center;

}



/* Modern Status Badges - Fixed */

.show-page__status-group .badge,

.show-page__status-group .status-badge,

.show-page__status-group span[class*="badge"],

.show-page__status-group span[class*="status"] {

    padding: 0.25rem 0.625rem;

    border-radius: 0.25rem;

    font-size: 0.625rem;

    font-weight: 600;

    letter-spacing: 0.025em;

    text-transform: uppercase;

    border: none;

    transition: all 0.2s ease;

}



/* Workflow Status */

.show-page__status-group .badge-active,

.show-page__status-group .status-active,

.show-page__status-group span:contains("Active"),

.show-page__status-group span:contains("Running") {

    background: linear-gradient(135deg, #10b981, #059669);

    color: #ffffff;

    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2);

}



.show-page__status-group .badge-pending,

.show-page__status-group .status-pending,

.show-page__status-group span:contains("Pending"),

.show-page__status-group span:contains("Waiting") {

    background: linear-gradient(135deg, #f59e0b, #d97706);

    color: #ffffff;

    box-shadow: 0 1px 4px rgba(245, 158, 11, 0.2);

}



.show-page__status-group .badge-inactive,

.show-page__status-group .status-inactive,

.show-page__status-group span:contains("Inactive"),

.show-page__status-group span:contains("Ended") {

    background: linear-gradient(135deg, #64748b, #475569);

    color: #ffffff;

    box-shadow: 0 1px 4px rgba(100, 116, 139, 0.2);

}



/* Trial Status */

.show-page__status-group .badge-trial,

.show-page__status-group .status-trial,

.show-page__status-group span:contains("Trial"),

.show-page__status-group span:contains("Free") {

    background: linear-gradient(135deg, #ec4899, #db2777);

    color: #ffffff;

    box-shadow: 0 1px 4px rgba(236, 72, 153, 0.2);

}



/* Official Status */

.show-page__status-group .badge-official,

.show-page__status-group .status-official,

.show-page__status-group span:contains("Official"),

.show-page__status-group span:contains("Verified") {

    background: linear-gradient(135deg, #3b82f6, #2563eb);

    color: #ffffff;

    box-shadow: 0 1px 4px rgba(59, 130, 246, 0.2);

}



.show-page__favorite-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.375rem;

    padding: 0.5rem 1rem;

    border-radius: 0.5rem;

    border: 1px solid rgba(239, 68, 68, 0.3);

    background: rgba(239, 68, 68, 0.05);

    color: #ef4444;

    font-size: 0.75rem;

    font-weight: 600;

    text-decoration: none;

    transition: all 0.2s ease;

    cursor: pointer;

}



.show-page__favorite-btn:hover {

    border-color: rgba(239, 68, 68, 0.5);

    background: rgba(239, 68, 68, 0.1);

    color: #dc2626;

    transform: translateY(-1px);

    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);

}



.show-page__favorite-btn i {

    font-size: 0.75rem;

}



/* Main Content - Modern Layout */

.show-page__main-content {

    display: grid;

    grid-template-columns: 1fr 320px;

    gap: 2rem;

    align-items: start;

}



@media (max-width: 1024px) {

    .show-page__main-content {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .show-page__sidebar {

        position: static;

        order: -1;

    }

}



.show-page__info-section {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.show-page__summary {

    font-size: 1rem;

    line-height: 1.7;

    color: var(--color-text-muted);

    font-weight: 400;

    background: var(--vertali-glass-secondary);

    padding: 1.5rem;

    border-radius: 0.75rem;

    border: 1px solid var(--vertali-border-soft);

    backdrop-filter: blur(8px);

    position: relative;

}



.show-page__summary::before {

    content: '';

    position: absolute;

    inset: 0;

    border-radius: 0.75rem;

    padding: 1px;

    background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), transparent);

    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    -webkit-mask-composite: xor;

    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);

    mask-composite: exclude;

    pointer-events: none;

}



.show-page__genres {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem;

}



.show-page__genre-chip {

    display: inline-block;

    padding: 0.5rem 1rem;

    border-radius: 0.5rem;

    background: var(--vertali-card-bg-blue);

    color: var(--color-accent);

    font-size: 0.8rem;

    font-weight: 500;

    text-decoration: none;

    border: 1px solid var(--vertali-card-border-blue);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(4px);

}



.show-page__genre-chip:hover {

    background: var(--vertali-card-bg-purple);

    color: var(--color-accent-secondary);

    border-color: var(--vertali-card-border-purple);

    transform: translateY(-2px);

    box-shadow: 0 4px 12px rgba(167, 139, 250, 0.2);

}



/* Sidebar - Modern Layout */

.show-page__sidebar {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    position: sticky;

    top: 2rem;

    height: fit-content;

}



.show-page__rating-card {

    padding: 1.5rem;

    border-radius: 0.75rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-secondary);

    backdrop-filter: blur(8px);

    position: relative;

    overflow: hidden;

}



.show-page__rating-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-warning), transparent);

    opacity: 0.4;

}



.show-page__rating-title {

    font-size: 0.7rem;

    font-weight: 600;

    color: var(--color-text-muted);

    margin-bottom: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.show-page__rating-display {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    align-items: center;

    text-align: center;

}



.show-page__rating-value {

    font-size: 2.5rem;

    font-weight: 900;

    color: var(--color-warning);

    font-variant-numeric: tabular-nums;

    line-height: 1;

    text-shadow: 0 2px 8px rgba(251, 191, 36, 0.3);

}



.show-page__rating-stars {

    display: flex;

    gap: 0.25rem;

    justify-content: center;

}



.show-page__star--active {

    color: var(--color-warning);

    filter: drop-shadow(0 1px 2px rgba(251, 191, 36, 0.3));

}



.show-page__star--inactive {

    color: rgba(255, 255, 255, 0.15);

}



.show-page__rating-count {

    font-size: 0.7rem;

    color: var(--color-text-muted);

    font-weight: 500;

}



.show-page__user-review {

    padding: 1.5rem;

    border-radius: 0.75rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-secondary);

    backdrop-filter: blur(8px);

}



.show-page__review-title {

    font-size: 0.7rem;

    font-weight: 600;

    color: var(--color-text-muted);

    margin-bottom: 1rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.show-page__existing-review {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.show-page__review-stars {

    display: flex;

    gap: 0.25rem;

    justify-content: center;

}



.show-page__review-subtitle {

    font-size: 1rem;

    font-weight: 600;

    color: var(--color-text);

    margin: 0;

    text-align: center;

}



.show-page__review-content {

    font-size: 0.875rem;

    color: var(--color-text-muted);

    line-height: 1.5;

    margin: 0;

    text-align: center;

}



.show-page__review-form {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.show-page__form-group {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.show-page__form-label {

    font-size: 0.7rem;

    font-weight: 600;

    color: var(--color-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.show-page__form-select,

.show-page__form-input,

.show-page__form-textarea {

    padding: 0.75rem 1rem;

    border-radius: 0.5rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-soft);

    color: var(--color-text);

    font-size: 0.875rem;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(4px);

}



.show-page__form-select:focus,

.show-page__form-input:focus,

.show-page__form-textarea:focus {

    outline: none;

    border-color: var(--color-accent);

    background: var(--vertali-glass-primary);

    box-shadow: 0 0 0 2px rgba(96, 165, 250, 0.2);

}



.show-page__form-select::placeholder,

.show-page__form-input::placeholder,

.show-page__form-textarea::placeholder {

    color: var(--color-text-muted);

    opacity: 0.7;

}



.show-page__submit-btn {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    border-radius: 0.5rem;

    border: none;

    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-secondary));

    color: #ffffff;

    font-size: 0.8rem;

    font-weight: 600;

    cursor: pointer;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 0 2px 8px rgba(96, 165, 250, 0.25);

}



.show-page__submit-btn:hover {

    background: linear-gradient(135deg, var(--color-accent-secondary), var(--color-accent));

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(96, 165, 250, 0.4);

}



.show-page__poster-container {

    position: relative;

    border-radius: 0.75rem;

    overflow: hidden;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-secondary);

    backdrop-filter: blur(8px);

    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);

    max-width: 240px;

    margin: 0 auto;

}



.show-page__poster {

    width: 100%;

    height: auto;

    object-fit: cover;

    display: block;

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    aspect-ratio: 2/3;

}



.show-page__poster-container:hover .show-page__poster {

    transform: scale(1.02);

}



.show-page__trial-overlay {

    position: absolute;

    top: 0.75rem;

    left: 0.75rem;

    padding: 0.375rem 0.75rem;

    border-radius: 0.375rem;

    background: linear-gradient(135deg, var(--color-error), #dc2626);

    color: #ffffff;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.025em;

    box-shadow: 0 2px 8px rgba(236, 72, 153, 0.3);

    backdrop-filter: blur(4px);

}



/* Intelligence Section - Modern Design */

.show-page__intelligence {

    padding: 2rem;

    border-radius: 1rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-primary);

    backdrop-filter: blur(12px);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.show-page__intelligence::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-accent-secondary), transparent);

    opacity: 0.6;

}



.show-page__intelligence:hover {

    border-color: var(--vertali-border-stronger);

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(96, 165, 250, 0.15);

}



.show-page__intelligence-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 2rem;

    gap: 1rem;

    flex-wrap: wrap;

}



.show-page__intelligence-kicker {

    font-size: 0.7rem;

    font-weight: 600;

    color: var(--color-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.show-page__intelligence-title {

    font-size: 1.5rem;

    font-weight: 700;

    color: var(--color-text);

    letter-spacing: -0.01em;

    margin-top: 0.5rem;

    line-height: 1.2;

}



.show-page__intelligence-badge {

    padding: 0.375rem 0.875rem;

    border-radius: 0.375rem;

    background: linear-gradient(135deg, var(--color-success), #059669);

    color: #ffffff;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.025em;

    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);

    backdrop-filter: blur(4px);

}



.show-page__intelligence-content {

    display: grid;

    grid-template-columns: 280px 1fr;

    gap: 2rem;

    align-items: start;

}



@media (max-width: 768px) {

    .show-page__intelligence-content {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

}



.show-page__rating-intelligence {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.show-page__rating-metric {

    padding: 1.5rem;

    border-radius: 0.75rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-secondary);

    backdrop-filter: blur(8px);

    height: 100%;

    display: flex;

    flex-direction: column;

    justify-content: space-between;

    position: relative;

    overflow: hidden;

}



.show-page__rating-metric::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-warning), transparent);

    opacity: 0.4;

}



.show-page__rating-header {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.show-page__rating-label {

    font-size: 0.625rem;

    font-weight: 600;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.show-page__rating-score {

    display: flex;

    align-items: baseline;

    gap: 0.375rem;

}



.show-page__rating-number {

    font-size: 2rem;

    font-weight: 800;

    color: #ffffff;

    font-variant-numeric: tabular-nums;

}



.show-page__rating-max {

    font-size: 0.75rem;

    color: #94a3b8;

}



.show-page__rating-description {

    font-size: 0.75rem;

    color: #94a3b8;

    line-height: 1.4;

}



.show-page__rating-progress {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.show-page__progress-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.show-page__progress-label {

    font-size: 0.625rem;

    font-weight: 600;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.show-page__progress-value {

    font-size: 0.625rem;

    font-weight: 600;

    color: #94a3b8;

}



.show-page__progress-bar {

    height: 0.25rem;

    border-radius: 9999px;

    background: rgba(148, 163, 184, 0.1);

    overflow: hidden;

}



.show-page__progress-fill {

    height: 100%;

    border-radius: inherit;

    transition: width 0.4s ease;

}



.show-page__progress-note {

    font-size: 0.625rem;

    color: #64748b;

}



/* Cast Section - Fixed Sizing */

.show-page__cast-section {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



.show-page__cast-header {

    display: flex;

    justify-content: space-between;

    align-items: center;

}



.show-page__cast-label {

    font-size: 0.625rem;

    font-weight: 600;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.show-page__cast-subtitle {

    font-size: 0.625rem;

    color: #94a3b8;

}



.show-page__cast-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));

    gap: 0.5rem;

}



.show-page__cast-card {

    display: flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem;

    border-radius: 0.5rem;

    border: 1px solid rgba(148, 163, 184, 0.1);

    background: rgba(30, 41, 59, 0.3);

    transition: all 0.2s ease;

}



.show-page__cast-card:hover {

    border-color: rgba(99, 102, 241, 0.2);

    background: rgba(30, 41, 59, 0.4);

    transform: translateY(-1px);

}



.show-page__cast-avatar {

    width: 2.5rem;

    height: 2.5rem;

    border-radius: 0.375rem;

    object-fit: cover;

    border: 1px solid rgba(148, 163, 184, 0.1);

}



.show-page__cast-avatar-placeholder {

    width: 2.5rem;

    height: 2.5rem;

    border-radius: 0.375rem;

    background: rgba(99, 102, 241, 0.1);

    display: flex;

    align-items: center;

    justify-content: center;

    font-size: 1rem;

    font-weight: 600;

    color: #818cf8;

    border: 1px solid rgba(99, 102, 241, 0.2);

}



.show-page__cast-info {

    flex: 1;

    min-width: 0;

}



.show-page__cast-name {

    font-size: 0.75rem;

    font-weight: 600;

    color: #ffffff;

    margin: 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.show-page__cast-character {

    font-size: 0.625rem;

    color: #94a3b8;

    margin: 0.125rem 0 0;

    overflow: hidden;

    text-overflow: ellipsis;

    white-space: nowrap;

}



.show-page__cast-type {

    font-size: 0.5rem;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.025em;

}



/* Episode Cards - Modern Design */

.show-page__episodes-grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 1.5rem;

    margin-top: 2rem;

}



.show-page__episode-card {

    padding: 1.5rem;

    border-radius: 0.75rem;

    border: 1px solid var(--vertali-border-soft);

    background: var(--vertali-glass-secondary);

    backdrop-filter: blur(8px);

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.show-page__episode-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 1px;

    background: linear-gradient(90deg, transparent, var(--color-accent), transparent);

    opacity: 0.4;

}



.show-page__episode-card:hover {

    transform: translateY(-2px);

    box-shadow: 0 8px 25px rgba(96, 165, 250, 0.15);

    border-color: var(--vertali-border-stronger);

}



.show-page__episode-header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 1.5rem;

    gap: 1rem;

    flex-wrap: wrap;

}



.show-page__episode-title-section {

    display: flex;

    flex-direction: column;

    gap: 0.25rem;

}



.show-page__episode-kicker {

    font-size: 0.7rem;

    font-weight: 600;

    color: var(--color-text-muted);

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.show-page__episode-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: var(--color-text);

    margin: 0.5rem 0 0 0;

    line-height: 1.2;

}



.show-page__episode-code {

    display: inline-block;

    padding: 0.25rem 0.5rem;

    border-radius: 0.25rem;

    font-size: 0.7rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.025em;

    margin-top: 0.5rem;

    background: rgba(255, 255, 255, 0.1);

    color: var(--color-text-muted);

    font-weight: 500;

}



.show-page__episode-countdown {

    display: flex;

    align-items: center;

}



.show-page__countdown-badge {

    padding: 0.25rem 0.75rem;

    border-radius: 0.25rem;

    font-size: 0.625rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.025em;

}



.show-page__countdown-badge--soon {

    background: linear-gradient(135deg, #10b981, #059669);

    color: #ffffff;

    box-shadow: 0 1px 4px rgba(16, 185, 129, 0.2);

}



.show-page__countdown-badge--live {

    background: linear-gradient(135deg, #ef4444, #dc2626);

    color: #ffffff;

    box-shadow: 0 1px 4px rgba(239, 68, 68, 0.2);

}



.show-page__countdown-badge--past {

    background: linear-gradient(135deg, #64748b, #475569);

    color: #ffffff;

    box-shadow: 0 1px 4px rgba(100, 116, 139, 0.2);

}



.show-page__episode-details {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.show-page__episode-detail {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 0.5rem;

}



.show-page__detail-label {

    font-size: 0.625rem;

    font-weight: 600;

    color: #64748b;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.show-page__detail-value {

    font-size: 0.75rem;

    color: #e2e8f0;

    font-weight: 500;

    text-align: right;

}



.show-page__episode-summary {

    font-size: 0.75rem;

    line-height: 1.4;

    color: #94a3b8;

}



.show-page__episode-summary--placeholder {

    font-style: italic;

    color: #64748b;

}



/* Responsive Design - Fixed */

@media (max-width: 1024px) {

    .show-page__main-content {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    

    .show-page__intelligence-content {

        grid-template-columns: 1fr;

        gap: 1rem;

    }

    

    .show-page__cast-grid {

        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));

    }

}



@media (max-width: 768px) {

    .show-page {

        gap: 0.75rem;

        padding: 0 0.75rem;

    }

    

    .show-page__hero {

        padding: 1rem;

    }

    

    .show-page__header {

        flex-direction: column;

        gap: 0.75rem;

        align-items: flex-start;

    }

    

    .show-page__title {

        font-size: 1.5rem;

    }

    

    .show-page__episodes-grid {

        grid-template-columns: 1fr;

        gap: 0.75rem;

    }

    

    .show-page__episode-card {

        padding: 0.75rem;

    }

    

    .show-page__intelligence {

        padding: 1rem;

    }

    

    .show-page__cast-grid {

        grid-template-columns: 1fr;

    }

}



@media (max-width: 480px) {

    .show-page {

        gap: 0.5rem;

        padding: 0 0.5rem;

    }

    

    .show-page__title {

        font-size: 1.25rem;

    }

    

    .show-page__episode-card {

        padding: 0.5rem;

    }

    

    .show-page__intelligence {

        padding: 0.75rem;

    }

}



[data-tabs] .tab-trigger {

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 9999px;

    padding: 0.5rem 1.25rem;

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: rgba(248, 250, 252, 0.6);

    background-color: transparent;

    transition: all 0.2s ease;

}



[data-tabs] .tab-trigger:hover,

[data-tabs] .tab-trigger:focus-visible {

    color: rgba(248, 250, 252, 0.9);

    border-color: rgba(248, 250, 252, 0.3);

    outline: none;

}



[data-tabs] .tab-trigger[aria-selected="true"] {

    color: rgba(248, 250, 252, 0.95);

    border-color: rgba(248, 250, 252, 0.5);

    background-color: rgba(148, 163, 184, 0.2);

    box-shadow: 0 6px 20px rgba(15, 23, 42, 0.25);

    transform: translateY(-2px);

}



.tab-panel.hidden {

    display: none;

}



/* Admin users redesign */

.admin-users__hero {

    gap: 2rem;

}



.admin-users__stats-grid {

    display: grid;

    gap: 1.25rem;

    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));

}



.admin-users__stat-card {

    position: relative;

    border-radius: 1.75rem;

    padding: 1.5rem;

    background: linear-gradient(135deg, rgba(30, 64, 175, 0.16), rgba(15, 23, 42, 0.6));

    border: 1px solid rgba(255, 255, 255, 0.08);

    box-shadow: 0 25px 45px rgba(8, 15, 40, 0.35);

    overflow: hidden;

}



.admin-users__stat-card::after {

    content: "";

    position: absolute;

    inset: 0;

    border-radius: inherit;

    background: radial-gradient(circle at top right, rgba(129, 140, 248, 0.25), transparent 55%);

    opacity: 0.7;

    pointer-events: none;

}



.admin-users__stat-label {

    position: relative;

    z-index: 1;

    font-size: 0.65rem;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: rgba(226, 232, 240, 0.65);

    display: block;

}



.admin-users__stat-value {

    position: relative;

    z-index: 1;

    margin-top: 0.85rem;

    font-size: 2.25rem;

    font-weight: 700;

    color: rgba(248, 250, 252, 0.95);

    line-height: 1.1;

}



.admin-users__stat-copy {

    position: relative;

    z-index: 1;

    margin-top: 0.75rem;

    font-size: 0.8rem;

    color: rgba(226, 232, 240, 0.65);

}



.admin-users__content-grid {

    align-items: stretch;

}



.admin-users__create-card {

    padding: 2.5rem;

    border-radius: 2rem;

    display: flex;

}



.admin-users__create-content {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

    width: 100%;

}



.admin-users__create-header {

    display: flex;

    flex-direction: column;

    gap: 0.65rem;

}



.admin-users__fieldset {

    display: flex;

    flex-direction: column;

    gap: 1rem;

}



.admin-users__fieldset + .admin-users__fieldset {

    border-top: 1px solid rgba(248, 250, 252, 0.08);

    padding-top: 1.5rem;

    margin-top: 1.25rem;

}



.admin-users__fieldset-label {

    font-size: 0.65rem;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    color: rgba(226, 232, 240, 0.4);

    font-weight: 600;

}



.admin-users__form-grid {

    display: grid;

    gap: 1rem;

}



@media (min-width: 640px) {

    .admin-users__form-grid {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.admin-users__create-footer {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

}



@media (min-width: 640px) {

    .admin-users__create-footer {

        flex-direction: row;

        align-items: center;

        justify-content: space-between;

    }

}



.admin-users__list-card {

    border-radius: 2rem;

    backdrop-filter: blur(22px);

}



.admin-users__toolbar {

    gap: 1.5rem;

}



.admin-users__list {

    display: flex;

    flex-direction: column;

}



.user-card {

    border-radius: 1.75rem;

    border-color: rgba(255, 255, 255, 0.08);

    background: linear-gradient(135deg, rgba(15, 23, 42, 0.75), rgba(30, 41, 59, 0.55));

    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

}



.user-card:hover {

    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.18);

    box-shadow: 0 24px 40px rgba(7, 12, 30, 0.45);

}



.user-card[open] {

    border-color: rgba(148, 163, 184, 0.3);

    box-shadow: 0 30px 50px rgba(7, 12, 30, 0.55);

}



.user-card__summary {

    align-items: flex-start;

}



.user-card__summary h3 {

    font-size: 1.1rem;

}



.user-card__summary .glass-ring {

    backdrop-filter: blur(12px);

}



.user-card__chevron {

    background: rgba(148, 163, 184, 0.12);

}



.user-card__body {

    background: rgba(15, 23, 42, 0.6);

    border-radius: 0 0 1.75rem 1.75rem;

}



.user-card__form-grid {

    align-items: start;

}



.user-card__actions {

    margin-top: 0.5rem;

}



.user-card__allowance {

    border-radius: 1.5rem;

    background: rgba(15, 23, 42, 0.55);

}



.user-card__allowance-summary {

    align-items: center;

}



.user-card__allowance-summary h4 {

    font-size: 1rem;

}



.user-card__allowance-summary .glass-ring {

    backdrop-filter: blur(12px);

}

/* Dashboard shell redesign */

.dashboard-shell {

    display: grid;

    grid-template-columns: clamp(220px, 20vw, 260px) minmax(0, 1fr);

    gap: 2.5rem;

    width: 100%;

    padding: 3rem clamp(1.5rem, 4vw, 4rem) 4rem;

    max-width: 1400px;

    margin: 0 auto;

}



.dashboard-rail {

    position: sticky;

    top: 2.5rem;

    align-self: start;

    display: flex;

    flex-direction: column;

    gap: 2rem;

    border-radius: 2rem;

    padding: 2rem;

    background: linear-gradient(145deg, rgba(14, 24, 46, 0.85), rgba(12, 21, 39, 0.6));

    border: 1px solid rgba(148, 163, 184, 0.15);

    backdrop-filter: blur(16px);

    box-shadow: 0 35px 60px -30px rgba(8, 12, 24, 0.65);

}



.dashboard-rail__header {

    display: flex;

    align-items: center;

    justify-content: space-between;

}



.dashboard-rail__brand {

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    color: rgba(226, 232, 240, 0.7);

}



.dashboard-rail__nav ul {

    display: flex;

    flex-direction: column;

    gap: 0.75rem;

    list-style: none;

    padding: 0;

    margin: 0;

}



.dashboard-rail__link {

    display: flex;

    gap: 1rem;

    align-items: flex-start;

    border-radius: 1.25rem;

    padding: 1rem 1.25rem;

    background: linear-gradient(140deg, rgba(30, 64, 175, 0.14), rgba(12, 19, 33, 0.6));

    border: 1px solid rgba(148, 163, 184, 0.25);

    text-decoration: none;

    color: rgba(248, 250, 252, 0.85);

    transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;

}



.dashboard-rail__link:hover,

.dashboard-rail__link:focus-visible,

.dashboard-rail__link.is-active {

    transform: translateX(4px);

    border-color: rgba(148, 163, 184, 0.45);

    box-shadow: 0 18px 35px -22px rgba(56, 189, 248, 0.55);

    outline: none;

}



.dashboard-rail__icon {

    font-size: 1.3rem;

    line-height: 1;

}



.dashboard-rail__text {

    display: flex;

    flex-direction: column;

    gap: 0.35rem;

}



.dashboard-rail__label {

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: uppercase;

    font-size: 0.75rem;

}



.dashboard-rail__description {

    font-size: 0.7rem;

    color: rgba(226, 232, 240, 0.65);

    line-height: 1.4;

}



.dashboard-rail__footer {

    margin-top: auto;

}



.dashboard-rail__logout {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    border-radius: 999px;

    padding: 0.75rem 1.75rem;

    font-size: 0.7rem;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    text-decoration: none;

    border: 1px solid rgba(255, 255, 255, 0.18);

    color: rgba(248, 250, 252, 0.75);

    transition: transform 0.25s ease, border-color 0.25s ease;

}



.dashboard-rail__logout:hover,

.dashboard-rail__logout:focus-visible {

    transform: translateY(-2px);

    border-color: rgba(255, 255, 255, 0.4);

    outline: none;

}



.dashboard-main {

    display: flex;

    flex-direction: column;

    gap: 2.5rem;

}



.dashboard-hero {

    position: relative;

    display: grid;

    gap: 2rem;

    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);

    padding: clamp(2rem, 4vw, 3rem);

    border-radius: 2.5rem;

    background: linear-gradient(160deg, rgba(30, 64, 175, 0.28), rgba(15, 23, 42, 0.8)),

        radial-gradient(circle at top left, rgba(56, 189, 248, 0.18), transparent 60%),

        linear-gradient(120deg, rgba(56, 189, 248, 0.22), rgba(15, 23, 42, 0.7));

    border: 1px solid rgba(148, 163, 184, 0.25);

    overflow: hidden;

}



.dashboard-hero::after {

    content: "";

    position: absolute;

    inset: 0;

    background: radial-gradient(circle at 20% 20%, rgba(148, 163, 184, 0.2), transparent 65%);

    opacity: 0.6;

    pointer-events: none;

}



.dashboard-hero__content {

    position: relative;

    z-index: 1;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.dashboard-hero__eyebrow {

    font-size: 0.75rem;

    font-weight: 700;

    letter-spacing: 0.4em;

    text-transform: uppercase;

    color: rgba(226, 232, 240, 0.65);

}



.dashboard-hero__title {

    font-size: clamp(2.5rem, 3vw, 3.25rem);

    font-weight: 700;

    line-height: 1.1;

}



.dashboard-hero__description {

    font-size: 1rem;

    color: rgba(226, 232, 240, 0.78);

    max-width: 42ch;

}



.dashboard-hero__chips {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

    padding: 0;

    margin: 0;

    list-style: none;

}



.dashboard-hero__status {

    position: relative;

    z-index: 1;

    align-self: center;

    justify-self: end;

    display: flex;

    flex-direction: column;

    gap: 1rem;

    padding: 1.75rem;

    border-radius: 2rem;

    background: linear-gradient(160deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.4));

    border: 1px solid rgba(148, 163, 184, 0.25);

    box-shadow: 0 25px 55px -30px rgba(15, 23, 42, 0.7);

    color: rgba(248, 250, 252, 0.85);

}



.dashboard-hero__status--steady {

    border-color: rgba(74, 222, 128, 0.4);

}



.dashboard-hero__status--caution {

    border-color: rgba(250, 204, 21, 0.4);

}



.dashboard-hero__status--critical {

    border-color: rgba(248, 113, 113, 0.45);

}



.dashboard-status-badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.5rem 1.5rem;

    border-radius: 999px;

    font-size: 0.7rem;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    background: rgba(148, 163, 184, 0.18);

    border: 1px solid rgba(148, 163, 184, 0.3);

}



.dashboard-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.5rem 1.1rem;

    border-radius: 999px;

    font-size: 0.75rem;

    letter-spacing: 0.05em;

    background: rgba(255, 255, 255, 0.08);

    border: 1px solid rgba(148, 163, 184, 0.25);

    color: rgba(226, 232, 240, 0.85);

    backdrop-filter: blur(12px);

}



.dashboard-chip--elevated {

    background: linear-gradient(140deg, rgba(56, 189, 248, 0.16), rgba(15, 23, 42, 0.6));

    border-color: rgba(56, 189, 248, 0.35);

    box-shadow: 0 15px 35px -20px rgba(56, 189, 248, 0.5);

}



.dashboard-tabs {

    display: flex;

    flex-direction: column;

    gap: 1.75rem;

}



.dashboard-tabs__list {

    display: flex;

    gap: 0.75rem;

    flex-wrap: wrap;

}



.dashboard-tab {

    border-radius: 999px;

    border: 1px solid rgba(148, 163, 184, 0.25);

    padding: 0.65rem 1.75rem;

    font-size: 0.75rem;

    font-weight: 600;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    background: rgba(12, 19, 33, 0.6);

    color: rgba(226, 232, 240, 0.7);

    cursor: pointer;

    transition: transform 0.25s ease, border-color 0.25s ease, color 0.25s ease;

}



.dashboard-tab:hover,

.dashboard-tab:focus-visible,

.dashboard-tab[aria-selected="true"] {

    transform: translateY(-2px);

    border-color: rgba(226, 232, 240, 0.55);

    color: rgba(248, 250, 252, 0.95);

    outline: none;

}



.dashboard-tab--sub {

    padding: 0.55rem 1.35rem;

    font-size: 0.65rem;

    letter-spacing: 0.25em;

}



.dashboard-tabs__panels,

.dashboard-subtabs__panels {

    display: grid;

}



.tab-panel[hidden] {

    display: none;

}



.dashboard-grid {

    display: grid;

    gap: 1.75rem;

}



.dashboard-grid--metrics,

.dashboard-grid--insights,

.dashboard-grid--policy,

.dashboard-grid--support {

    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));

}



.dashboard-grid--policy {

    align-items: stretch;

}



.dashboard-subtabs {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    padding: 1.5rem;

    border-radius: 2rem;

    background: linear-gradient(150deg, rgba(15, 23, 42, 0.7), rgba(15, 23, 42, 0.45));

    border: 1px solid rgba(148, 163, 184, 0.25);

}



.dashboard-subtabs__list {

    display: flex;

    gap: 0.5rem;

    flex-wrap: wrap;

}



.dashboard-card {

    position: relative;

    display: flex;

    flex-direction: column;

    gap: 1.25rem;

    border-radius: 2rem;

    padding: clamp(1.5rem, 2vw, 2rem);

    background: linear-gradient(155deg, rgba(12, 19, 33, 0.85), rgba(12, 19, 33, 0.65));

    border: 1px solid rgba(148, 163, 184, 0.22);

    box-shadow: 0 30px 60px -35px rgba(15, 23, 42, 0.7);

}



.dashboard-card--metric {

    min-height: 100%;

    background: linear-gradient(150deg, rgba(30, 64, 175, 0.18), rgba(12, 19, 33, 0.78));

}



.dashboard-card--list,

.dashboard-card--insight {

    background: linear-gradient(160deg, rgba(56, 189, 248, 0.15), rgba(12, 19, 33, 0.75));

}



.dashboard-card--policy.is-success {

    border-color: rgba(74, 222, 128, 0.35);

}



.dashboard-card--policy.is-caution {

    border-color: rgba(250, 204, 21, 0.35);

}



.dashboard-card--policy.is-critical {

    border-color: rgba(248, 113, 113, 0.35);

}



.dashboard-card__eyebrow {

    font-size: 0.65rem;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    color: rgba(226, 232, 240, 0.6);

}



.dashboard-card__title {

    font-size: 1.35rem;

    font-weight: 600;

    line-height: 1.25;

}



.dashboard-card__value {

    display: flex;

    align-items: baseline;

    gap: 0.75rem;

}



.dashboard-card__value-number {

    font-size: clamp(2.5rem, 3.5vw, 3rem);

    font-weight: 700;

    color: rgba(248, 250, 252, 0.95);

}



.dashboard-card__value-meta {

    font-size: 0.75rem;

    letter-spacing: 0.35em;

    text-transform: uppercase;

    color: rgba(226, 232, 240, 0.6);

}



.dashboard-card__data {

    display: grid;

    gap: 0.65rem;

}



.dashboard-card__data-row {

    display: flex;

    justify-content: space-between;

    font-size: 0.85rem;

    color: rgba(226, 232, 240, 0.75);

}



.dashboard-card__data-row dt {

    font-weight: 600;

}



.dashboard-card__description {

    font-size: 0.9rem;

    color: rgba(226, 232, 240, 0.7);

    line-height: 1.6;

}



.dashboard-card__lead {

    font-size: 1rem;

    color: rgba(248, 250, 252, 0.85);

    line-height: 1.7;

}



.dashboard-card__footnote {

    font-size: 0.7rem;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: rgba(226, 232, 240, 0.5);

}



.dashboard-card__actions {

    display: flex;

    flex-wrap: wrap;

    gap: 0.75rem;

}



.dashboard-history {

    display: grid;

    gap: 1rem;

    padding: 0;

    margin: 0;

    list-style: none;

}



.dashboard-history__item {

    border-radius: 1.5rem;

    padding: 1.1rem 1.25rem;

    background: rgba(12, 19, 33, 0.65);

    border: 1px solid rgba(148, 163, 184, 0.2);

    display: grid;

    gap: 0.6rem;

}



.dashboard-history__header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    gap: 1rem;

}



.dashboard-history__headline {

    display: grid;

    gap: 0.35rem;

}



.dashboard-history__title {

    font-weight: 600;

    color: rgba(248, 250, 252, 0.9);

}



.dashboard-history__subtitle {

    font-size: 0.8rem;

    color: rgba(226, 232, 240, 0.65);

}



.dashboard-history__meta {

    font-size: 0.7rem;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: rgba(148, 163, 184, 0.65);

}



.dashboard-history__details {

    display: flex;

    flex-wrap: wrap;

    gap: 0.5rem 1rem;

    padding: 0;

    margin: 0;

    list-style: none;

    font-size: 0.75rem;

    color: rgba(226, 232, 240, 0.7);

}



.dashboard-history__badge {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    padding: 0.35rem 0.9rem;

    border-radius: 999px;

    font-size: 0.65rem;

    letter-spacing: 0.3em;

    text-transform: uppercase;

    border: 1px solid rgba(148, 163, 184, 0.25);

    color: rgba(226, 232, 240, 0.75);

}



.dashboard-history__badge--success {

    border-color: rgba(74, 222, 128, 0.35);

    color: rgba(134, 239, 172, 0.85);

}



.dashboard-history__badge--accent {

    border-color: rgba(148, 163, 184, 0.35);

    color: rgba(191, 219, 254, 0.85);

}



.dashboard-policy-list {

    display: grid;

    gap: 0.75rem;

    padding: 0;

    margin: 0;

    list-style: none;

    font-size: 0.85rem;

    color: rgba(226, 232, 240, 0.75);

}



.dashboard-top-shows {

    display: grid;

    gap: 0.75rem;

    padding: 0;

    margin: 0;

    list-style: none;

}



.dashboard-top-shows li {

    display: grid;

    grid-template-columns: auto 1fr auto;

    align-items: center;

    gap: 0.75rem;

    padding: 0.85rem 1rem;

    border-radius: 1.2rem;

    background: rgba(12, 19, 33, 0.6);

    border: 1px solid rgba(148, 163, 184, 0.18);

}



.dashboard-top-shows__rank {

    font-weight: 700;

    color: rgba(148, 163, 184, 0.65);

    font-size: 0.85rem;

}



.dashboard-top-shows__title {

    font-weight: 600;

    color: rgba(248, 250, 252, 0.85);

}



.dashboard-top-shows__meta {

    font-size: 0.7rem;

    text-transform: uppercase;

    letter-spacing: 0.25em;

    color: rgba(148, 163, 184, 0.65);

}



.dashboard-support-list {

    display: grid;

    gap: 0.85rem;

    margin: 0;

    padding: 0;

}



.dashboard-support-list__item {

    display: grid;

    gap: 0.25rem;

}



.dashboard-support-list__item dt {

    font-size: 0.7rem;

    letter-spacing: 0.25em;

    text-transform: uppercase;

    color: rgba(148, 163, 184, 0.65);

}



.dashboard-support-list__item dd {

    margin: 0;

    font-size: 0.9rem;

}



.dashboard-support-list__item a {

    color: rgba(191, 219, 254, 0.9);

    text-decoration: none;

    border-bottom: 1px dotted rgba(191, 219, 254, 0.6);

    padding-bottom: 0.1rem;

}



.dashboard-support-list__item a:hover,

.dashboard-support-list__item a:focus-visible {

    color: rgba(255, 255, 255, 0.95);

    outline: none;

}



.dashboard-accordions {

    display: grid;

    gap: 1rem;

    margin-top: 1.5rem;

}



.dashboard-accordion {

    border-radius: 1.75rem;

    background: rgba(12, 19, 33, 0.65);

    border: 1px solid rgba(148, 163, 184, 0.22);

    padding: 1.25rem 1.5rem;

}



.dashboard-accordion summary {

    cursor: pointer;

    font-size: 0.85rem;

    letter-spacing: 0.2em;

    text-transform: uppercase;

    color: rgba(226, 232, 240, 0.75);

}



.dashboard-accordion summary::-webkit-details-marker {

    display: none;

}



.dashboard-accordion__body {

    margin-top: 0.75rem;

    font-size: 0.9rem;

    color: rgba(226, 232, 240, 0.75);

    display: grid;

    gap: 0.6rem;

}



.dashboard-accordion__body ul {

    padding-left: 1.1rem;

    margin: 0;

    display: grid;

    gap: 0.35rem;

}



@media (max-width: 1023px) {

    .dashboard-shell {

        grid-template-columns: minmax(0, 1fr);

        padding-top: 2rem;

    }



    .dashboard-rail {

        position: static;

        flex-direction: column;

        gap: 1.5rem;

        padding: 1.5rem;

    }



    .dashboard-rail__nav ul {

        flex-direction: row;

        overflow-x: auto;

        scrollbar-width: none;

        gap: 0.5rem;

    }



    .dashboard-rail__nav ul::-webkit-scrollbar {

        display: none;

    }



    .dashboard-rail__link {

        min-width: 220px;

    }



    .dashboard-main {

        gap: 2rem;

    }



    .dashboard-hero {

        grid-template-columns: 1fr;

        text-align: left;

    }



    .dashboard-hero__status {

        justify-self: start;

    }

}



@media (max-width: 767px) {

    .dashboard-hero {

        padding: 1.75rem;

    }



    .dashboard-tabs__list,

    .dashboard-subtabs__list {

        overflow-x: auto;

        flex-wrap: nowrap;

        padding-bottom: 0.5rem;

    }



    .dashboard-tab,

    .dashboard-tab--sub {

        flex: 0 0 auto;

    }



    .dashboard-grid--metrics,

    .dashboard-grid--insights,

    .dashboard-grid--policy,

    .dashboard-grid--support {

        grid-template-columns: minmax(0, 1fr);

    }



    .dashboard-hero__chips {

        gap: 0.25rem;

    }

}



.sunset-layout {

    display: grid;

    gap: 2rem;

}



.sunset-card {

    border-radius: 2rem;

    background: var(--vertali-panel-background);

    border: 1px solid rgba(255, 255, 255, 0.12);

    padding: 2rem;

    box-shadow: 0 28px 60px rgba(4, 10, 24, 0.45);

    backdrop-filter: blur(24px);

}



.sunset-card__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 1.5rem;

}



.sunset-card__poster {

    width: 120px;

    height: 170px;

    object-fit: cover;

    border-radius: 1.25rem;

    border: 1px solid rgba(255, 255, 255, 0.15);

    box-shadow: 0 18px 40px rgba(2, 6, 14, 0.55);

}



.sunset-chip {

    display: inline-flex;

    align-items: center;

    gap: 0.35rem;

    border-radius: 999px;

    border: 1px solid rgba(255, 255, 255, 0.18);

    background: rgba(255, 255, 255, 0.12);

    padding: 0.35rem 0.85rem;

    font-weight: 600;

    letter-spacing: 0.2em;

}



.sunset-chip--muted {

    background: rgba(148, 163, 184, 0.12);

    border-color: rgba(148, 163, 184, 0.2);

}



.sunset-card__metrics {

    display: grid;

    gap: 1rem;

    margin-top: 1.75rem;

}



@media (min-width: 640px) {

    .sunset-card__metrics {

        grid-template-columns: repeat(2, minmax(0, 1fr));

    }

}



.sunset-metric {

    border-radius: 1.5rem;

    background: rgba(15, 23, 42, 0.55);

    border: 1px solid rgba(255, 255, 255, 0.08);

    padding: 1rem 1.25rem;

}



.sunset-metric__label {

    font-size: 0.65rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.55);

}



.sunset-metric__value {

    margin-top: 0.35rem;

    font-size: 1.35rem;

    font-weight: 600;

    color: #fff;

}



.sunset-metric__hint {

    margin-top: 0.15rem;

    font-size: 0.75rem;

    color: rgba(255, 255, 255, 0.6);

}



.sunset-episodes {

    margin-top: 1.75rem;

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.12);

    background: rgba(15, 23, 42, 0.35);

    padding: 1.5rem;

}



.sunset-episodes__title {

    font-size: 0.85rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.6);

    margin-bottom: 0.85rem;

}



.sunset-episodes__list {

    display: grid;

    gap: 0.75rem;

}



.sunset-episodes__item {

    display: flex;

    justify-content: space-between;

    gap: 1rem;

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.8);

}



.sunset-episodes__airdate {

    font-size: 0.75rem;

    color: rgba(255, 255, 255, 0.6);

}



.sunset-notes {

    margin-top: 1.75rem;

    border-radius: 1.5rem;

    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(12, 19, 33, 0.45);

    padding: 1.5rem;

}



.sunset-notes__title {

    font-size: 0.85rem;

    letter-spacing: 0.28em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.55);

    margin-bottom: 0.65rem;

}



.sunset-notes__body {

    font-size: 0.9rem;

    line-height: 1.65;

    color: rgba(255, 255, 255, 0.78);

}



.sunset-empty {

    border-radius: 2rem;

    border: 1px solid rgba(255, 255, 255, 0.15);

}



.sunset-faq {

    position: sticky;

    top: 2rem;

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    border-radius: 2rem;

    border: 1px solid rgba(255, 255, 255, 0.14);

    background: rgba(10, 16, 28, 0.75);

    padding: 2rem;

}



.sunset-faq__title {

    font-size: 1.2rem;

    font-weight: 600;

    color: #fff;

}



.sunset-faq__intro {

    font-size: 0.9rem;

    color: rgba(255, 255, 255, 0.7);

}



.sunset-faq__list {

    display: grid;

    gap: 1.25rem;

}



.sunset-faq__item {

    border-left: 2px solid rgba(148, 163, 184, 0.35);

    padding-left: 1rem;

}



.sunset-faq__question {

    font-size: 0.85rem;

    letter-spacing: 0.26em;

    text-transform: uppercase;

    color: rgba(255, 255, 255, 0.6);

    margin-bottom: 0.5rem;

}



.sunset-faq__answer {

    font-size: 0.95rem;

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.78);

}



.sunset-faq__cta {

    margin-top: auto;

}



.sunset-home-callout {

    margin-top: 2.5rem;

    border-radius: 1.75rem;

    border: 1px solid rgba(255, 255, 255, 0.15);

    background: linear-gradient(135deg, rgba(37, 99, 235, 0.12), rgba(15, 23, 42, 0.8));

    padding: 2rem;

    display: flex;

    flex-direction: column;

    align-items: center;

    text-align: center;

    gap: 1rem;

}



.sunset-home-callout__heading {

    font-size: 0.95rem;

    font-weight: 600;

    color: #fff;

    text-transform: uppercase;

    letter-spacing: 0.24em;

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 0.2rem 0.75rem;

    border-radius: 9999px;

    background: rgba(255, 255, 255, 0.08);

    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);

}



.sunset-home-callout__heading::before,

.sunset-home-callout__heading::after {

    content: "";

    height: 1px;

    flex: 1 1 2.5rem;

    background: linear-gradient(90deg, rgba(148, 163, 184, 0), rgba(148, 163, 184, 0.55), rgba(148, 163, 184, 0));

}



.sunset-home-callout__description {

    font-size: 0.85rem;

    color: rgba(255, 255, 255, 0.72);

    max-width: 36rem;

    margin: 0 auto;

}



.sunset-home-callout__cta {

    align-self: center;

    display: inline-flex;

    align-items: center;

    justify-content: center;

    gap: 0.65rem;

    padding: 0.75rem 1.75rem;

    border-radius: 9999px;

    font-size: 0.85rem;

    font-weight: 600;

    letter-spacing: 0.08em;

    text-transform: none;

    text-decoration: none;

    color: rgba(241, 245, 249, 0.92);

    border: 1px solid rgba(148, 163, 184, 0.35);

    background: linear-gradient(140deg, rgba(59, 130, 246, 0.35), rgba(15, 23, 42, 0.65));

    box-shadow: 0 20px 44px rgba(8, 12, 20, 0.45);

    backdrop-filter: blur(24px);

    transition: transform 0.25s ease, box-shadow 0.25s ease, background 0.25s ease, color 0.25s ease,

        border-color 0.25s ease;

}



.sunset-home-callout__cta:hover,

.sunset-home-callout__cta:focus-visible {

    color: #fff;

    border-color: rgba(148, 163, 184, 0.5);

    background: linear-gradient(140deg, rgba(96, 165, 250, 0.45), rgba(30, 64, 175, 0.85));

    box-shadow: 0 26px 60px rgba(15, 23, 42, 0.55);

    transform: translateY(-2px);

}



.sunset-home-callout__cta svg {

    width: 1rem;

    height: 1rem;

    transition: transform 0.25s ease;

}



.sunset-home-callout__cta:hover svg,

.sunset-home-callout__cta:focus-visible svg {

    transform: translateX(4px);

}



/* Electric blue color utilities for viewing restrictions announcement */

.text-gold-200 {

    color: #93c5fd;

}



.text-gold-200\/90 {

    color: rgba(147, 197, 253, 0.9);

}



.text-gold-300 {

    color: #60a5fa;

}



.bg-gold-400 {

    background-color: #3b82f6;

}



.bg-gold-500\/20 {

    background-color: rgba(96, 165, 250, 0.2);

}



.border-gold-400\/30 {

    border-color: rgba(96, 165, 250, 0.3);

}



.from-gold-300 {

    --tw-gradient-from: #60a5fa;

    --tw-gradient-to: rgba(96, 165, 250, 0);

    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);

}



.via-gold-200 {

    --tw-gradient-to: rgba(147, 197, 253, 0);

    --tw-gradient-stops: var(--tw-gradient-from), #93c5fd, var(--tw-gradient-to);

}



.to-gold-300 {

    --tw-gradient-to: #60a5fa;

}



/* Modern Utility Classes */



/* Gradient Utilities */

.gradient-electric-blue {

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.2), rgba(96, 165, 250, 0.05));

}



.gradient-electric-purple {

    background: linear-gradient(135deg, rgba(167, 139, 250, 0.2), rgba(167, 139, 250, 0.05));

}



.gradient-electric-dual {

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(167, 139, 250, 0.1));

}



/* Spacing Scale Utilities */

.spacing-xs { gap: 0.5rem; }

.spacing-sm { gap: 0.75rem; }

.spacing-md { gap: 1rem; }

.spacing-lg { gap: 1.5rem; }

.spacing-xl { gap: 2rem; }

.spacing-2xl { gap: 3rem; }



/* Animation Utilities */

.animate-hover-lift {

    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;

}



.animate-hover-lift:hover {

    transform: translateY(-4px);

}



.animate-hover-glow {

    transition: box-shadow 0.3s ease, border-color 0.3s ease;

}



.animate-hover-glow:hover {

    box-shadow: 0 0 30px rgba(96, 165, 250, 0.3);

    border-color: rgba(96, 165, 250, 0.4);

}



.animate-smooth {

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

}



/* Badge/Chip Variants */

.badge-electric {

    display: inline-flex;

    align-items: center;

    padding: 0.35rem 0.85rem;

    border-radius: 999px;

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    border: 1px solid rgba(96, 165, 250, 0.3);

    background: linear-gradient(135deg, rgba(96, 165, 250, 0.15), rgba(96, 165, 250, 0.05));

    color: #93c5fd;

    box-shadow: 0 0 20px rgba(96, 165, 250, 0.1);

}



.badge-purple {

    display: inline-flex;

    align-items: center;

    padding: 0.35rem 0.85rem;

    border-radius: 999px;

    font-size: 0.7rem;

    font-weight: 600;

    letter-spacing: 0.15em;

    text-transform: uppercase;

    border: 1px solid rgba(167, 139, 250, 0.3);

    background: linear-gradient(135deg, rgba(167, 139, 250, 0.15), rgba(167, 139, 250, 0.05));

    color: #c4b5fd;

    box-shadow: 0 0 20px rgba(167, 139, 250, 0.1);

}



/* Enhanced Focus States */

.focus-ring-blue:focus-visible {

    outline: none;

    border-color: rgba(96, 165, 250, 0.5);

    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2), 0 0 20px rgba(96, 165, 250, 0.15);

}



.focus-ring-purple:focus-visible {

    outline: none;

    border-color: rgba(167, 139, 250, 0.5);

    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2), 0 0 20px rgba(167, 139, 250, 0.15);

}



/* Loading State Animation */

@keyframes pulse-glow {

    0%, 100% {

        opacity: 1;

        box-shadow: 0 0 20px rgba(96, 165, 250, 0.3);

    }

    50% {

        opacity: 0.7;

        box-shadow: 0 0 30px rgba(96, 165, 250, 0.5);

    }

}



.animate-pulse-glow {

    animation: pulse-glow 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;

}



/* Subtle Hover Effects */

.hover-lift-subtle {

    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);

}



.hover-lift-subtle:hover {

    transform: translateY(-2px);

}



.hover-glow-subtle {

    transition: box-shadow 0.3s ease;

}



/* ===================================

   MODERN LEGAL PAGE STYLES

   =================================== */



/* Legal Page Container */

.legal-page {

    max-width: 80rem; /* max-w-5xl equivalent */

    margin: 0 auto;

    padding: 0 1.5rem;

    min-height: 100vh;

    background: linear-gradient(135deg, 

        var(--vertali-dark-primary) 0%, 

        var(--vertali-dark-secondary) 50%, 

        var(--vertali-dark-tertiary) 100%

    );

    position: relative;

    overflow: hidden;

}



.legal-page::before {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: 

        radial-gradient(circle at 20% 20%, rgba(167, 139, 250, 0.1) 0%, transparent 50%),

        radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),

        radial-gradient(circle at 40% 70%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);

    pointer-events: none;

    z-index: 1;

}



/* Legal Hero Section */

.legal-hero {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 80vh;

    padding: clamp(4rem, 8vw, 8rem) 0;

    margin-top: 4rem;

    z-index: 2;

}



.legal-hero__content {

    flex: 1;

    max-width: 800px;

    position: relative;

    z-index: 3;

}



.legal-hero__badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.2), 

        rgba(96, 165, 250, 0.15)

    );

    border: 1px solid rgba(167, 139, 250, 0.3);

    border-radius: 2rem;

    color: var(--vertali-accent-primary);

    font-size: 0.875rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 2rem;

    backdrop-filter: blur(20px);

    box-shadow: 

        0 8px 32px rgba(167, 139, 250, 0.2),

        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    animation: float 6s ease-in-out infinite;

}



.legal-hero__title {

    font-size: clamp(2.5rem, 6vw, 5rem);

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 1.5rem;

    background: linear-gradient(135deg, 

        #ffffff 0%, 

        rgba(167, 139, 250, 0.9) 50%, 

        rgba(96, 165, 250, 0.8) 100%

    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 40px rgba(167, 139, 250, 0.3);

}



.legal-hero__subtitle {

    font-size: clamp(1.125rem, 2vw, 1.375rem);

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 3rem;

    max-width: 600px;

}



.legal-hero__actions {

    display: flex;

    align-items: center;

    gap: 2rem;

    flex-wrap: wrap;

}



.legal-hero__stat {

    padding: 1rem 1.5rem;

    background: linear-gradient(135deg, 

        rgba(139, 92, 246, 0.15), 

        rgba(167, 139, 250, 0.1)

    );

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 1rem;

    color: var(--vertali-accent-secondary);

    font-weight: 600;

    font-size: 0.875rem;

    backdrop-filter: blur(10px);

}



.legal-hero__link {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 1rem 2rem;

    background: linear-gradient(135deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    border: none;

    border-radius: 1rem;

    color: white;

    font-weight: 600;

    font-size: 0.875rem;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 

        0 8px 32px rgba(167, 139, 250, 0.3),

        0 4px 16px rgba(139, 92, 246, 0.2);

}



.legal-hero__link:hover {

    transform: translateY(-2px);

    box-shadow: 

        0 12px 40px rgba(167, 139, 250, 0.4),

        0 6px 20px rgba(139, 92, 246, 0.3);

}



.legal-hero__link svg {

    transition: transform 0.3s ease;

}



.legal-hero__link:hover svg {

    transform: translateX(4px);

}



.legal-hero__visual {

    position: absolute;

    top: 50%;

    right: 10%;

    transform: translateY(-50%);

    width: 400px;

    height: 400px;

    opacity: 0.6;

}



.legal-hero__accessibility-icon,

.legal-hero__dmca-icon,

.legal-hero__health-icon,

.legal-hero__privacy-icon,

.legal-hero__rights-icon,

.legal-hero__terms-icon {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.1), 

        rgba(96, 165, 250, 0.05)

    );

    border-radius: 50%;

    border: 2px solid rgba(167, 139, 250, 0.2);

    display: flex;

    align-items: center;

    justify-content: center;

    animation: rotate 20s linear infinite;

    backdrop-filter: blur(20px);

    box-shadow: 

        0 0 60px rgba(167, 139, 250, 0.2),

        inset 0 0 60px rgba(96, 165, 250, 0.1);

}



.legal-hero__accessibility-icon::before,

.legal-hero__dmca-icon::before,

.legal-hero__health-icon::before,

.legal-hero__privacy-icon::before,

.legal-hero__rights-icon::before,

.legal-hero__terms-icon::before {

    content: '';

    position: absolute;

    top: -10%;

    left: -10%;

    right: -10%;

    bottom: -10%;

    background: linear-gradient(45deg, 

        transparent 30%, 

        rgba(167, 139, 250, 0.1) 50%, 

        transparent 70%

    );

    border-radius: 50%;

    animation: rotate 15s linear infinite reverse;

}



.legal-hero__accessibility-icon svg,

.legal-hero__dmca-icon svg,

.legal-hero__health-icon svg,

.legal-hero__privacy-icon svg,

.legal-hero__rights-icon svg,

.legal-hero__terms-icon svg {

    color: var(--vertali-accent-primary);

    animation: pulse 3s ease-in-out infinite;

}



/* Standards Section */

.legal-standards {

    padding: clamp(3rem, 6vw, 6rem) 0;

    text-align: center;

    position: relative;

    z-index: 2;

}



.legal-standards__content {

    max-width: 800px;

    margin: 0 auto;

}



.legal-standards__title {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    margin-bottom: 1.5rem;

    background: linear-gradient(135deg, 

        #ffffff 0%, 

        rgba(167, 139, 250, 0.8) 100%

    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.legal-standards__text {

    font-size: clamp(1rem, 1.5vw, 1.125rem);

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 1.5rem;

}



/* Legal Grid Layout */

.legal-grid {

    padding: clamp(2rem, 4vw, 4rem) 0;

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));

    gap: 2rem;

    position: relative;

    z-index: 2;

}



.legal-card {

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.05), 

        rgba(255, 255, 255, 0.02)

    );

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 2rem;

    padding: 2.5rem;

    backdrop-filter: blur(40px);

    box-shadow: 

        0 20px 60px rgba(0, 0, 0, 0.3),

        0 0 0 1px rgba(255, 255, 255, 0.05) inset;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.legal-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    opacity: 0;

    transition: opacity 0.3s ease;

}



.legal-card:hover::before {

    opacity: 1;

}



.legal-card:hover {

    transform: translateY(-4px);

    box-shadow: 

        0 30px 80px rgba(0, 0, 0, 0.4),

        0 0 0 1px rgba(167, 139, 250, 0.2) inset;

    border-color: rgba(167, 139, 250, 0.3);

}



.legal-card--secondary {

    background: linear-gradient(135deg, 

        rgba(139, 92, 246, 0.05), 

        rgba(139, 92, 246, 0.02)

    );

    border-color: rgba(139, 92, 246, 0.2);

}



.legal-card__header {

    display: flex;

    align-items: center;

    gap: 1rem;

    margin-bottom: 1.5rem;

}



.legal-card__icon {

    width: 48px;

    height: 48px;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.2), 

        rgba(96, 165, 250, 0.15)

    );

    border: 1px solid rgba(167, 139, 250, 0.3);

    border-radius: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vertali-accent-primary);

    backdrop-filter: blur(10px);

}



.legal-card__title {

    font-size: 1.5rem;

    font-weight: 700;

    color: white;

}



.legal-card__description {

    font-size: 1rem;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 2rem;

}



.legal-card__features {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

}



.feature-item {

    padding: 1.5rem;

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.03), 

        rgba(255, 255, 255, 0.01)

    );

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 1rem;

    transition: all 0.3s ease;

}



.feature-item:hover {

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.1), 

        rgba(96, 165, 250, 0.05)

    );

    border-color: rgba(167, 139, 250, 0.2);

}



.feature-item__title {

    font-size: 1.125rem;

    font-weight: 600;

    color: white;

    margin-bottom: 0.75rem;

}



.feature-item__description {

    font-size: 0.875rem;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.6);

}



/* Testing List */

.testing-list {

    display: flex;

    flex-direction: column;

    gap: 1rem;

    margin-bottom: 1.5rem;

}



.testing-item {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    padding: 1rem;

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.03), 

        rgba(255, 255, 255, 0.01)

    );

    border: 1px solid rgba(255, 255, 255, 0.08);

    border-radius: 0.75rem;

}



.testing-item__label {

    font-weight: 600;

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.875rem;

}



.testing-item__value {

    font-size: 0.875rem;

    color: rgba(255, 255, 255, 0.6);

    text-align: right;

    max-width: 60%;

}



.legal-card__note {

    font-size: 0.75rem;

    color: rgba(255, 255, 255, 0.5);

    font-style: italic;

}



/* Contact Section */

.legal-contact {

    padding: clamp(3rem, 6vw, 6rem) 0;

    position: relative;

    z-index: 2;

}



.legal-contact__content {

    max-width: 1200px;

    margin: 0 auto;

    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 3rem;

    align-items: start;

}



.legal-contact__info {

    padding: 2rem;

}



.legal-contact__title {

    font-size: clamp(1.5rem, 3vw, 2.5rem);

    font-weight: 700;

    margin-bottom: 1.5rem;

    background: linear-gradient(135deg, 

        #ffffff 0%, 

        rgba(167, 139, 250, 0.8) 100%

    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.legal-contact__description {

    font-size: 1rem;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

}



.legal-contact__card {

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.05), 

        rgba(255, 255, 255, 0.02)

    );

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 2rem;

    padding: 2.5rem;

    backdrop-filter: blur(40px);

    box-shadow: 

        0 20px 60px rgba(0, 0, 0, 0.3),

        0 0 0 1px rgba(255, 255, 255, 0.05) inset;

}



.legal-contact__card-title {

    font-size: 1.25rem;

    font-weight: 700;

    color: white;

    margin-bottom: 2rem;

}



.contact-info {

    display: flex;

    flex-direction: column;

    gap: 1.5rem;

    margin-bottom: 1.5rem;

}



.contact-item {

    display: flex;

    flex-direction: column;

    gap: 0.5rem;

}



.contact-item__label {

    font-weight: 600;

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.875rem;

    text-transform: uppercase;

    letter-spacing: 0.05em;

}



.contact-item__value {

    font-size: 1rem;

    color: rgba(255, 255, 255, 0.7);

    text-decoration: none;

    transition: color 0.3s ease;

}



.contact-item__value:hover {

    color: var(--vertali-accent-primary);

}



.legal-contact__note {

    font-size: 0.875rem;

    color: rgba(255, 255, 255, 0.5);

    font-style: italic;

}



/* Legal Footer */

.legal-footer {

    padding: 2rem 0;

    text-align: center;

    position: relative;

    z-index: 2;

}



.legal-footer p {

    font-size: 0.875rem;

    color: rgba(255, 255, 255, 0.5);

}



/* Responsive Design */

@media (max-width: 768px) {

    .legal-hero {

        min-height: auto;

        padding: 4rem 0;

        text-align: center;

    }

    

    .legal-hero__visual {

        display: none;

    }

    

    .legal-hero__actions {

        justify-content: center;

        flex-direction: column;

        gap: 1rem;

    }

    

    .legal-grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

    

    .legal-contact__content {

        grid-template-columns: 1fr;

        gap: 2rem;

    }

    

    .testing-item {

        flex-direction: column;

        gap: 0.5rem;

    }

    

    .testing-item__value {

        max-width: 100%;

        text-align: left;

    }

}



@media (max-width: 480px) {

    .legal-card {

        padding: 1.5rem;

    }

    

    .legal-contact__card {

        padding: 1.5rem;

    }

    

    .feature-item {

        padding: 1rem;

    }

}



/* ===================================

   MODERN LICENSING PAGE STYLES

   =================================== */



/* Licensing Page Container */

.licensing-page {

    max-width: 80rem; /* max-w-5xl equivalent */

    margin: 0 auto;

    padding: 0 1.5rem;

    min-height: 100vh;

    background: linear-gradient(135deg, 

        var(--vertali-dark-primary) 0%, 

        var(--vertali-dark-secondary) 50%, 

        var(--vertali-dark-tertiary) 100%

    );

    position: relative;

    overflow: hidden;

}



.licensing-page::before {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: 

        radial-gradient(circle at 20% 20%, rgba(167, 139, 250, 0.1) 0%, transparent 50%),

        radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),

        radial-gradient(circle at 40% 70%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);

    pointer-events: none;

    z-index: 1;

}



/* Licensing Hero Section */

.licensing-hero {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 80vh;

    padding: clamp(4rem, 8vw, 8rem) 0;

    margin-top: 4rem;

    z-index: 2;

}



.licensing-hero__content {

    flex: 1;

    max-width: 800px;

    position: relative;

    z-index: 3;

}



.licensing-hero__badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.2), 

        rgba(96, 165, 250, 0.15)

    );

    border: 1px solid rgba(167, 139, 250, 0.3);

    border-radius: 2rem;

    color: var(--vertali-accent-primary);

    font-size: 0.875rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 2rem;

    backdrop-filter: blur(20px);

    box-shadow: 

        0 8px 32px rgba(167, 139, 250, 0.2),

        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    animation: float 6s ease-in-out infinite;

}



.licensing-hero__title {

    font-size: clamp(2.5rem, 6vw, 5rem);

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 1.5rem;

    background: linear-gradient(135deg, 

        #ffffff 0%, 

        rgba(167, 139, 250, 0.9) 50%, 

        rgba(96, 165, 250, 0.8) 100%

    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 40px rgba(167, 139, 250, 0.3);

}



.licensing-hero__subtitle {

    font-size: clamp(1.125rem, 2vw, 1.375rem);

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 3rem;

    max-width: 600px;

}



.licensing-hero__actions {

    display: flex;

    align-items: center;

    gap: 2rem;

    flex-wrap: wrap;

}



.licensing-hero__stat {

    padding: 1rem 1.5rem;

    background: linear-gradient(135deg, 

        rgba(139, 92, 246, 0.15), 

        rgba(167, 139, 250, 0.1)

    );

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 1rem;

    color: var(--vertali-accent-secondary);

    font-weight: 600;

    font-size: 0.875rem;

    backdrop-filter: blur(10px);

}



.licensing-hero__link {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 1rem 2rem;

    background: linear-gradient(135deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    border: none;

    border-radius: 1rem;

    color: white;

    font-weight: 600;

    font-size: 0.875rem;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 

        0 8px 32px rgba(167, 139, 250, 0.3),

        0 4px 16px rgba(139, 92, 246, 0.2);

}



.licensing-hero__link:hover {

    transform: translateY(-2px);

    box-shadow: 

        0 12px 40px rgba(167, 139, 250, 0.4),

        0 6px 20px rgba(139, 92, 246, 0.3);

}



.licensing-hero__link svg {

    transition: transform 0.3s ease;

}



.licensing-hero__link:hover svg {

    transform: translateX(4px);

}



.licensing-hero__visual {

    position: absolute;

    top: 50%;

    right: 10%;

    transform: translateY(-50%);

    width: 400px;

    height: 400px;

    opacity: 0.6;

}



.licensing-hero__globe {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.1), 

        rgba(96, 165, 250, 0.05)

    );

    border-radius: 50%;

    border: 2px solid rgba(167, 139, 250, 0.2);

    position: relative;

    animation: rotate 20s linear infinite;

    backdrop-filter: blur(20px);

    box-shadow: 

        0 0 60px rgba(167, 139, 250, 0.2),

        inset 0 0 60px rgba(96, 165, 250, 0.1);

}



.licensing-hero__globe::before {

    content: '';

    position: absolute;

    top: -10%;

    left: -10%;

    right: -10%;

    bottom: -10%;

    background: linear-gradient(45deg, 

        transparent 30%, 

        rgba(167, 139, 250, 0.1) 50%, 

        transparent 70%

    );

    border-radius: 50%;

    animation: rotate 15s linear infinite reverse;

}



/* Overview Section */

.licensing-overview {

    padding: clamp(3rem, 6vw, 6rem) 0;

    text-align: center;

    position: relative;

    z-index: 2;

}



.licensing-overview__content {

    max-width: 800px;

    margin: 0 auto;

}



.licensing-overview__title {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    margin-bottom: 1.5rem;

    background: linear-gradient(135deg, 

        #ffffff 0%, 

        rgba(167, 139, 250, 0.8) 100%

    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.licensing-overview__text {

    font-size: clamp(1rem, 1.5vw, 1.125rem);

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 1.5rem;

}



/* Search Section */

.licensing-search {

    padding: 0 0 2rem;

    text-align: center;

    position: relative;

    z-index: 2;

}



.licensing-search__input {

    width: 100%;

    max-width: 600px;

    padding: 1rem 1.5rem;

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.05), 

        rgba(255, 255, 255, 0.02)

    );

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 1rem;

    color: white;

    font-size: 1rem;

    backdrop-filter: blur(20px);

    transition: all 0.3s ease;

}



.licensing-search__input:focus {

    outline: none;

    border-color: var(--vertali-accent-primary);

    box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.2);

}



.licensing-search__input::placeholder {

    color: rgba(255, 255, 255, 0.5);

}



/* Region Filters */

.region-filters {

    display: flex;

    justify-content: center;

    gap: 1rem;

    padding: 0 0 2rem;

    flex-wrap: wrap;

    position: relative;

    z-index: 2;

}



.region-filter {

    padding: 0.5rem 1rem;

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.05), 

        rgba(255, 255, 255, 0.02)

    );

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 2rem;

    color: rgba(255, 255, 255, 0.7);

    font-size: 0.875rem;

    cursor: pointer;

    transition: all 0.3s ease;

    backdrop-filter: blur(10px);

}



.region-filter:hover {

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.1), 

        rgba(96, 165, 250, 0.05)

    );

    border-color: rgba(167, 139, 250, 0.3);

    color: white;

}



.region-filter.active {

    background: linear-gradient(135deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    border-color: var(--vertali-accent-primary);

    color: white;

}



/* Regional Partners */

.licensing-regions {

    padding: 0 0 4rem;

    position: relative;

    z-index: 2;

}



.licensing-region {

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.03), 

        rgba(255, 255, 255, 0.01)

    );

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 2rem;

    padding: 2rem;

    margin-bottom: 2rem;

    backdrop-filter: blur(40px);

    box-shadow: 

        0 20px 60px rgba(0, 0, 0, 0.3),

        0 0 0 1px rgba(255, 255, 255, 0.05) inset;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.licensing-region::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    opacity: 0;

    transition: opacity 0.3s ease;

}



.licensing-region:hover::before {

    opacity: 1;

}



.licensing-region:hover {

    transform: translateY(-4px);

    box-shadow: 

        0 30px 80px rgba(0, 0, 0, 0.4),

        0 0 0 1px rgba(167, 139, 250, 0.2) inset;

    border-color: rgba(167, 139, 250, 0.3);

}



.licensing-region__header {

    display: flex;

    justify-content: space-between;

    align-items: flex-start;

    margin-bottom: 2rem;

    gap: 1rem;

}



.licensing-region__info {

    flex: 1;

}



.licensing-region__title {

    font-size: 1.5rem;

    font-weight: 700;

    color: white;

    margin-bottom: 0.75rem;

}



.licensing-region__description {

    font-size: 0.875rem;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

}



.licensing-region__badge {

    padding: 0.5rem 1rem;

    background: linear-gradient(135deg, 

        rgba(139, 92, 246, 0.2), 

        rgba(167, 139, 250, 0.15)

    );

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 1rem;

    color: var(--vertali-accent-secondary);

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    backdrop-filter: blur(10px);

}



.licensing-region__partners {

    margin-top: 1.5rem;

}



/* Enhanced Partner Grid Display */

.partner-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));

    gap: 0.5rem;

    padding: 1rem;

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.02), 

        rgba(255, 255, 255, 0.01)

    );

    border-radius: 1rem;

    border: 1px solid rgba(255, 255, 255, 0.1);

    height: 320px; /* Fixed height for all regions */

    overflow-y: auto;

    position: relative;

}



.partner-grid::-webkit-scrollbar {

    width: 8px;

}



.partner-grid::-webkit-scrollbar-track {

    background: rgba(255, 255, 255, 0.05);

    border-radius: 4px;

}



.partner-grid::-webkit-scrollbar-thumb {

    background: linear-gradient(135deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    border-radius: 4px;

}



.partner-grid::before {

    content: attr(data-partner-count) " partners";

    position: sticky;

    top: 0;

    left: 0;

    right: 0;

    background: linear-gradient(135deg, 

        rgba(139, 92, 246, 0.2), 

        rgba(167, 139, 250, 0.15)

    );

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 0.5rem;

    padding: 0.5rem 1rem;

    color: var(--vertali-accent-primary);

    font-size: 0.75rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 1rem;

    backdrop-filter: blur(10px);

    z-index: 10;

}



.partner-chip {

    display: flex;

    align-items: center;

    justify-content: center;

    min-height: 2.5rem;

    padding: 0.5rem 0.375rem;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.1), 

        rgba(96, 165, 250, 0.05)

    );

    border: 1px solid rgba(167, 139, 250, 0.2);

    border-radius: 0.5rem;

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.75rem;

    font-weight: 500;

    text-align: center;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    cursor: pointer;

    position: relative;

    overflow: hidden;

    white-space: nowrap;

    text-overflow: ellipsis;

    line-height: 1.1;

}



.partner-chip::before {

    content: '';

    position: absolute;

    top: 0;

    left: -100%;

    width: 100%;

    height: 100%;

    background: linear-gradient(90deg, 

        transparent, 

        rgba(255, 255, 255, 0.1), 

        transparent

    );

    transition: left 0.6s ease;

}



.partner-chip:hover::before {

    left: 100%;

}



.partner-chip:hover {

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.2), 

        rgba(96, 165, 250, 0.15)

    );

    border-color: rgba(167, 139, 250, 0.4);

    transform: translateY(-1px);

    box-shadow: 

        0 4px 12px rgba(167, 139, 250, 0.2),

        0 2px 6px rgba(96, 165, 250, 0.1);

}



.partner-chip.highlighted {

    background: linear-gradient(135deg, 

        rgba(139, 92, 246, 0.3), 

        rgba(167, 139, 250, 0.2)

    );

    border-color: rgba(139, 92, 246, 0.5);

    color: white;

    animation: pulse-glow 2s ease-in-out infinite;

}



@keyframes pulse-glow {

    0%, 100% {

        box-shadow: 

            0 0 0 0 rgba(139, 92, 246, 0.4),

            0 2px 6px rgba(167, 139, 250, 0.2);

    }

    50% {

        box-shadow: 

            0 0 0 6px rgba(139, 92, 246, 0),

            0 4px 12px rgba(167, 139, 250, 0.3);

    }

}



/* Governance Section */

.licensing-governance {

    padding: clamp(3rem, 6vw, 6rem) 0;

    position: relative;

    z-index: 2;

}



.licensing-governance__header {

    text-align: center;

    margin-bottom: 3rem;

}



.licensing-governance__title {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    margin-bottom: 1rem;

    background: linear-gradient(135deg, 

        #ffffff 0%, 

        rgba(167, 139, 250, 0.8) 100%

    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.licensing-governance__subtitle {

    font-size: clamp(1rem, 1.5vw, 1.125rem);

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

    max-width: 600px;

    margin: 0 auto;

}



.licensing-governance__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));

    gap: 2rem;

    max-width: 1200px;

    margin: 0 auto;

}



.governance-card {

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.05), 

        rgba(255, 255, 255, 0.02)

    );

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 2rem;

    padding: 2rem;

    backdrop-filter: blur(40px);

    box-shadow: 

        0 20px 60px rgba(0, 0, 0, 0.3),

        0 0 0 1px rgba(255, 255, 255, 0.05) inset;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.governance-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    opacity: 0;

    transition: opacity 0.3s ease;

}



.governance-card:hover::before {

    opacity: 1;

}



.governance-card:hover {

    transform: translateY(-4px);

    box-shadow: 

        0 30px 80px rgba(0, 0, 0, 0.4),

        0 0 0 1px rgba(167, 139, 250, 0.2) inset;

    border-color: rgba(167, 139, 250, 0.3);

}



.governance-card__icon {

    width: 48px;

    height: 48px;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.2), 

        rgba(96, 165, 250, 0.15)

    );

    border: 1px solid rgba(167, 139, 250, 0.3);

    border-radius: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vertali-accent-primary);

    margin-bottom: 1.5rem;

    backdrop-filter: blur(10px);

}



.governance-card__title {

    font-size: 1.25rem;

    font-weight: 700;

    color: white;

    margin-bottom: 1rem;

}



.governance-card__description {

    font-size: 0.875rem;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

}



/* Responsive Design */

@media (max-width: 768px) {

    .licensing-hero {

        min-height: auto;

        padding: 4rem 0;

        text-align: center;

    }

    

    .licensing-hero__visual {

        display: none;

    }

    

    .licensing-hero__actions {

        justify-content: center;

        flex-direction: column;

        gap: 1rem;

    }

    

    .licensing-region__header {

        flex-direction: column;

        gap: 1rem;

        text-align: center;

    }

    

    .partner-grid {

        grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));

        gap: 0.375rem;

        padding: 0.75rem;

        height: 280px; /* Consistent height on mobile too */

    }

    

    .partner-chip {

        min-height: 2rem;

        padding: 0.375rem 0.25rem;

        font-size: 0.7rem;

        line-height: 1.0;

        border-radius: 0.375rem;

    }

    

    .licensing-region {

        padding: 1.5rem;

    }

    

    .region-filters {

        gap: 0.5rem;

    }

    

    .region-filter {

        padding: 0.375rem 0.75rem;

        font-size: 0.75rem;

    }

    

    .licensing-governance__grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

}



.licensing-page::before {

    content: '';

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: 

        radial-gradient(circle at 20% 20%, rgba(167, 139, 250, 0.1) 0%, transparent 50%),

        radial-gradient(circle at 80% 80%, rgba(96, 165, 250, 0.08) 0%, transparent 50%),

        radial-gradient(circle at 40% 70%, rgba(139, 92, 246, 0.06) 0%, transparent 50%);

    pointer-events: none;

    z-index: 1;

}



/* Hero Section */

.licensing-hero {

    position: relative;

    display: flex;

    align-items: center;

    min-height: 100vh;

    padding: clamp(4rem, 8vw, 8rem) clamp(2rem, 5vw, 4rem);

    z-index: 2;

}



.licensing-hero__content {

    flex: 1;

    max-width: 800px;

    position: relative;

    z-index: 3;

}



.licensing-hero__badge {

    display: inline-flex;

    align-items: center;

    gap: 0.5rem;

    padding: 0.75rem 1.5rem;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.2), 

        rgba(96, 165, 250, 0.15)

    );

    border: 1px solid rgba(167, 139, 250, 0.3);

    border-radius: 2rem;

    color: var(--vertali-accent-primary);

    font-size: 0.875rem;

    font-weight: 600;

    text-transform: uppercase;

    letter-spacing: 0.05em;

    margin-bottom: 2rem;

    backdrop-filter: blur(20px);

    box-shadow: 

        0 8px 32px rgba(167, 139, 250, 0.2),

        inset 0 1px 0 rgba(255, 255, 255, 0.1);

    animation: float 6s ease-in-out infinite;

}



.licensing-hero__title {

    font-size: clamp(2.5rem, 6vw, 5rem);

    font-weight: 800;

    line-height: 1.1;

    margin-bottom: 1.5rem;

    background: linear-gradient(135deg, 

        #ffffff 0%, 

        rgba(167, 139, 250, 0.9) 50%, 

        rgba(96, 165, 250, 0.8) 100%

    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

    text-shadow: 0 0 40px rgba(167, 139, 250, 0.3);

}



.licensing-hero__subtitle {

    font-size: clamp(1.125rem, 2vw, 1.375rem);

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

    margin-bottom: 3rem;

    max-width: 600px;

}



.licensing-hero__actions {

    display: flex;

    align-items: center;

    gap: 2rem;

    flex-wrap: wrap;

}



.licensing-hero__stat {

    padding: 1rem 1.5rem;

    background: linear-gradient(135deg, 

        rgba(139, 92, 246, 0.15), 

        rgba(167, 139, 250, 0.1)

    );

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 1rem;

    color: var(--vertali-accent-secondary);

    font-weight: 600;

    font-size: 0.875rem;

    backdrop-filter: blur(10px);

}



.licensing-hero__link {

    display: inline-flex;

    align-items: center;

    gap: 0.75rem;

    padding: 1rem 2rem;

    background: linear-gradient(135deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    border: none;

    border-radius: 1rem;

    color: white;

    font-weight: 600;

    font-size: 0.875rem;

    text-decoration: none;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    box-shadow: 

        0 8px 32px rgba(167, 139, 250, 0.3),

        0 4px 16px rgba(139, 92, 246, 0.2);

}



.licensing-hero__link:hover {

    transform: translateY(-2px);

    box-shadow: 

        0 12px 40px rgba(167, 139, 250, 0.4),

        0 6px 20px rgba(139, 92, 246, 0.3);

}



.licensing-hero__link svg {

    transition: transform 0.3s ease;

}



.licensing-hero__link:hover svg {

    transform: translateX(4px);

}



.licensing-hero__visual {

    position: absolute;

    top: 50%;

    right: 10%;

    transform: translateY(-50%);

    width: 400px;

    height: 400px;

    opacity: 0.6;

}



.licensing-hero__globe {

    width: 100%;

    height: 100%;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.1), 

        rgba(96, 165, 250, 0.05)

    );

    border-radius: 50%;

    border: 2px solid rgba(167, 139, 250, 0.2);

    position: relative;

    animation: rotate 20s linear infinite;

    backdrop-filter: blur(20px);

    box-shadow: 

        0 0 60px rgba(167, 139, 250, 0.2),

        inset 0 0 60px rgba(96, 165, 250, 0.1);

}



.licensing-hero__globe::before {

    content: '';

    position: absolute;

    top: -10%;

    left: -10%;

    right: -10%;

    bottom: -10%;

    background: linear-gradient(45deg, 

        transparent 30%, 

        rgba(167, 139, 250, 0.1) 50%, 

        transparent 70%

    );

    border-radius: 50%;

    animation: rotate 15s linear infinite reverse;

}



/* Overview Section */

.licensing-overview {

    padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 4rem);

    text-align: center;

    position: relative;

    z-index: 2;

}



.licensing-overview__content {

    max-width: 800px;

    margin: 0 auto;

}



.licensing-overview__title {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    margin-bottom: 1.5rem;

    background: linear-gradient(135deg, 

        #ffffff 0%, 

        rgba(167, 139, 250, 0.8) 100%

    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.licensing-overview__text {

    font-size: clamp(1rem, 1.5vw, 1.125rem);

    line-height: 1.7;

    color: rgba(255, 255, 255, 0.7);

}



/* Regional Partners Grid */

.licensing-regions {

    padding: clamp(2rem, 4vw, 4rem) clamp(2rem, 5vw, 4rem);

    display: grid;

    gap: 3rem;

    position: relative;

    z-index: 2;

}



.licensing-region {

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.05), 

        rgba(255, 255, 255, 0.02)

    );

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 2rem;

    padding: 2.5rem;

    backdrop-filter: blur(40px);

    box-shadow: 

        0 20px 60px rgba(0, 0, 0, 0.3),

        0 0 0 1px rgba(255, 255, 255, 0.05) inset;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.licensing-region::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 4px;

    background: linear-gradient(90deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    opacity: 0;

    transition: opacity 0.3s ease;

}



.licensing-region:hover::before {

    opacity: 1;

}



.licensing-region:hover {

    transform: translateY(-4px);

    box-shadow: 

        0 30px 80px rgba(0, 0, 0, 0.4),

        0 0 0 1px rgba(167, 139, 250, 0.2) inset;

    border-color: rgba(167, 139, 250, 0.3);

}



.licensing-region__header {

    display: flex;

    align-items: flex-start;

    justify-content: space-between;

    gap: 2rem;

    margin-bottom: 2rem;

}



.licensing-region__info {

    flex: 1;

}



.licensing-region__title {

    font-size: clamp(1.5rem, 3vw, 2rem);

    font-weight: 700;

    margin-bottom: 1rem;

    color: white;

}



.licensing-region__description {

    font-size: 1rem;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

}



.licensing-region__badge {

    padding: 0.75rem 1.25rem;

    background: linear-gradient(135deg, 

        rgba(139, 92, 246, 0.2), 

        rgba(167, 139, 250, 0.15)

    );

    border: 1px solid rgba(139, 92, 246, 0.3);

    border-radius: 1rem;

    color: var(--vertali-accent-secondary);

    font-weight: 600;

    font-size: 0.875rem;

    white-space: nowrap;

    backdrop-filter: blur(10px);

}



.licensing-region__partners {

    margin-top: 2rem;

}



.partner-grid {

    display: grid;

    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));

    gap: 0.75rem;

}



.partner-chip {

    padding: 0.75rem 1rem;

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.08), 

        rgba(255, 255, 255, 0.04)

    );

    border: 1px solid rgba(255, 255, 255, 0.15);

    border-radius: 0.75rem;

    color: rgba(255, 255, 255, 0.9);

    font-size: 0.875rem;

    font-weight: 500;

    text-align: center;

    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    backdrop-filter: blur(10px);

}



.partner-chip:hover {

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.15), 

        rgba(96, 165, 250, 0.1)

    );

    border-color: rgba(167, 139, 250, 0.3);

    color: white;

    transform: translateY(-2px);

}



/* Governance Section */

.licensing-governance {

    padding: clamp(3rem, 6vw, 6rem) clamp(2rem, 5vw, 4rem);

    position: relative;

    z-index: 2;

}



.licensing-governance__header {

    text-align: center;

    margin-bottom: 4rem;

}



.licensing-governance__title {

    font-size: clamp(2rem, 4vw, 3rem);

    font-weight: 700;

    margin-bottom: 1rem;

    background: linear-gradient(135deg, 

        #ffffff 0%, 

        rgba(167, 139, 250, 0.8) 100%

    );

    -webkit-background-clip: text;

    background-clip: text;

    -webkit-text-fill-color: transparent;

}



.licensing-governance__subtitle {

    font-size: clamp(1rem, 1.5vw, 1.125rem);

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

    max-width: 600px;

    margin: 0 auto;

}



.licensing-governance__grid {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));

    gap: 2rem;

    max-width: 1200px;

    margin: 0 auto;

}



.governance-card {

    background: linear-gradient(135deg, 

        rgba(255, 255, 255, 0.05), 

        rgba(255, 255, 255, 0.02)

    );

    border: 1px solid rgba(255, 255, 255, 0.1);

    border-radius: 1.5rem;

    padding: 2rem;

    backdrop-filter: blur(40px);

    box-shadow: 

        0 15px 40px rgba(0, 0, 0, 0.2),

        0 0 0 1px rgba(255, 255, 255, 0.05) inset;

    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    position: relative;

    overflow: hidden;

}



.governance-card::before {

    content: '';

    position: absolute;

    top: 0;

    left: 0;

    right: 0;

    height: 3px;

    background: linear-gradient(90deg, 

        var(--vertali-accent-primary), 

        var(--vertali-accent-secondary)

    );

    opacity: 0;

    transition: opacity 0.3s ease;

}



.governance-card:hover::before {

    opacity: 1;

}



.governance-card:hover {

    transform: translateY(-4px);

    box-shadow: 

        0 25px 60px rgba(0, 0, 0, 0.3),

        0 0 0 1px rgba(167, 139, 250, 0.2) inset;

    border-color: rgba(167, 139, 250, 0.3);

}



.governance-card__icon {

    width: 48px;

    height: 48px;

    background: linear-gradient(135deg, 

        rgba(167, 139, 250, 0.2), 

        rgba(96, 165, 250, 0.15)

    );

    border: 1px solid rgba(167, 139, 250, 0.3);

    border-radius: 1rem;

    display: flex;

    align-items: center;

    justify-content: center;

    color: var(--vertali-accent-primary);

    margin-bottom: 1.5rem;

    backdrop-filter: blur(10px);

}



.governance-card__title {

    font-size: 1.25rem;

    font-weight: 700;

    margin-bottom: 1rem;

    color: white;

}



.governance-card__description {

    font-size: 0.875rem;

    line-height: 1.6;

    color: rgba(255, 255, 255, 0.7);

}



/* Animations */

@keyframes float {

    0%, 100% {

        transform: translateY(0px);

    }

    50% {

        transform: translateY(-10px);

    }

}



@keyframes rotate {

    from {

        transform: rotate(0deg);

    }

    to {

        transform: rotate(360deg);

    }

}



/* Responsive Design */

@media (max-width: 768px) {

    .licensing-hero {

        min-height: auto;

        padding: 4rem 2rem;

        text-align: center;

    }

    

    .licensing-hero__visual {

        display: none;

    }

    

    .licensing-hero__actions {

        justify-content: center;

        flex-direction: column;

        gap: 1rem;

    }

    

    .licensing-region__header {

        flex-direction: column;

        align-items: flex-start;

        gap: 1rem;

    }

    

    .licensing-region__badge {

        align-self: flex-start;

    }

    

    .partner-grid {

        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));

    }

    

    .licensing-governance__grid {

        grid-template-columns: 1fr;

        gap: 1.5rem;

    }

}



@media (max-width: 480px) {

    .licensing-region {

        padding: 1.5rem;

    }

    

    .governance-card {

        padding: 1.5rem;

    }

    

    .partner-grid {

        grid-template-columns: 1fr;

    }

}






/* ============================================
   UNIFIED LOGIN SYSTEM - Royal Purple/Blue Theme
   ============================================ */

.login-wrapper {
    display: flex;
    min-height: calc(100vh - 140px);
    background: linear-gradient(135deg, #1a0f4a 0%, #2d1f5f 50%, #1e3a8a 100%);
    border-radius: 16px;
    overflow: hidden;
}

.login-left {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 3rem;
    position: relative;
    overflow: hidden;
}

.login-orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    animation: orb-float 15s ease-in-out infinite;
}

.login-orb-1 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(139, 92, 246, 0.5) 0%, transparent 70%);
    top: 10%;
    right: -10%;
}

.login-orb-2 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(59, 130, 246, 0.4) 0%, transparent 70%);
    bottom: 10%;
    left: 10%;
    animation-delay: -7s;
}

@keyframes orb-float {
    0%, 100% { transform: translate(0, 0) scale(1); }
    50% { transform: translate(20px, -20px) scale(1.1); }
}

.login-brand {
    position: relative;
    z-index: 10;
}

.login-logo {
    width: 72px;
    height: 72px;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    box-shadow: 0 0 40px rgba(139, 92, 246, 0.4);
}

.login-title {
    font-size: 2.75rem;
    font-weight: 700;
    color: white;
    margin-bottom: 1rem;
}

.login-subtitle {
    font-size: 1.125rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.login-features {
    margin-top: 2.5rem;
    display: flex;
    gap: 1.5rem;
}

.login-feature {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.login-feature-icon {
    width: 36px;
    height: 36px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8b5cf6;
}

.login-right {
    width: 420px;
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
    padding: 3rem;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.login-header {
    margin-bottom: 2rem;
}

.login-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.5rem;
}

.login-header p {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
}

.login-error {
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.2);
    padding: 0.875rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.5rem;
    color: #fca5a5;
    font-size: 0.875rem;
}

.login-input {
    width: 100%;
    padding: 0.875rem 1rem;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: white;
    font-size: 0.9375rem;
    margin-bottom: 1rem;
    transition: all 0.2s;
}

.login-input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

.login-input:focus {
    outline: none;
    border-color: #8b5cf6;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.5rem;
}

.login-checkbox {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.875rem;
}

.login-checkbox input[type="checkbox"] {
    accent-color: #8b5cf6;
}

.login-forgot {
    color: #a78bfa;
    font-size: 0.875rem;
    text-decoration: none;
}

.login-forgot:hover {
    color: #c4b5fd;
    text-decoration: underline;
}

.login-submit {
    width: 100%;
    padding: 0.875rem;
    background: linear-gradient(135deg, #8b5cf6, #3b82f6);
    border: none;
    border-radius: 10px;
    color: white;
    font-size: 0.9375rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.login-submit:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -8px rgba(139, 92, 246, 0.5);
}

.login-back {
    margin-top: 1.5rem;
    text-align: center;
}

.login-back a {
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.875rem;
    text-decoration: none;
}

.login-back a:hover {
    color: #a78bfa;
}

.login-footer-note {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    text-align: center;
}

.login-footer-note a {
    color: #a78bfa;
    text-decoration: none;
}

.login-disclaimer {
    margin-top: 2rem;
    padding-top: 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.login-disclaimer-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    color: #f87171;
}

.login-disclaimer-header h3 {
    font-size: 0.875rem;
    font-weight: 600;
    color: white;
}

.login-disclaimer p {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
}

@media (max-width: 900px) {
    .login-wrapper {
        flex-direction: column;
    }
    
    .login-left {
        padding: 2rem;
        min-height: 280px;
    }
    
    .login-title {
        font-size: 2rem;
    }
    
    .login-right {
        width: 100%;
        border-left: none;
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }
}

/* Comprehensive Legal Disclaimer Styles */
.login-disclaimer-content {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
}

.login-disclaimer-content p {
    margin-bottom: 0.75rem;
}

.login-disclaimer-content strong {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.login-disclaimer-content em {
    color: rgba(255, 255, 255, 0.7);
    font-style: italic;
}

.login-disclaimer-content ul {
    margin: 0.5rem 0 0.75rem 1rem;
    list-style: disc;
}

.login-disclaimer-content li {
    margin-bottom: 0.35rem;
    color: rgba(255, 255, 255, 0.5);
}

.login-disclaimer-content a {
    color: #a78bfa;
    text-decoration: none;
}

.login-disclaimer-content a:hover {
    text-decoration: underline;
}

.disclaimer-final {
    margin-top: 1rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: center;
}