@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&family=Merriweather:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400;1,700;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oswald:wght@200..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;


:root {
    --site-primary: 204 100% 60%;
    --site-secondary: 186 100% 62%;
    --btn-primary: 209 100% 62%;
    --btn-accent: 28 100% 62%;
    --btn-danger: 356 85% 64%;
    --app-font: "Montserrat", "Segoe UI", ui-sans-serif, system-ui;
    --app-bg: 216 18% 12%;
    --app-bg-soft: 214 20% 16%;
    --panel-bg: 218 18% 18%;
    --panel-bg-strong: 218 16% 24%;
    --panel-border: 215 20% 28%;
    --text-main: 210 32% 96%;
    --text-muted: 215 16% 66%;
    --glow-soft: 0 0 0 1px hsl(var(--panel-border) / 0.35), 0 18px 44px hsl(199 100% 62% / 0.12);
    --glow-strong: 0 0 0 1px hsl(196 100% 64% / 0.28), 0 28px 72px hsl(199 100% 60% / 0.16);
}

:root[data-theme='light'] {
    --site-primary: 212 100% 56%;
    --site-secondary: 190 100% 45%;
    --btn-primary: 212 100% 56%;
    --btn-accent: 28 100% 52%;
    --btn-danger: 356 88% 60%;
    --app-bg: 205 60% 98%;
    --app-bg-soft: 205 83% 100%;
    --panel-bg: 0 0% 100%;
    --panel-bg-strong: 210 40% 99%;
    --panel-border: 214 32% 91%;
    --text-main: 214 16% 18%;
    --text-muted: 214 10% 50%;
    --glow-soft: 0 0 0 1px hsl(var(--panel-border) / 0.08), 0 16px 44px hsl(var(--site-secondary) / 0.08);
    --glow-strong: 0 0 0 1px hsl(var(--panel-border) / 0.18), 0 20px 52px hsl(var(--site-secondary) / 0.12);
    --sidebar-bg: 228 13% 18%;
    --sidebar-bg-strong: 228 14% 14%;
    --sidebar-border: 228 10% 24%;
    --sidebar-text: 220 18% 88%;
    --sidebar-text-muted: 220 10% 66%;
    --sidebar-active-bg: 0 0% 100%;
    --sidebar-active-text: 222 33% 14%;
    --sidebar-active-dot: 212 100% 56%;
    --content-bg: 210 20% 98%;
    --content-bg-soft: 210 33% 100%;
}

@layer base {
    html {
        color-scheme: dark;
    }

    html[data-theme='light'] {
        color-scheme: light;
    }

    body {
        font-family: var(--app-font);
        color: hsl(var(--text-main));
        background:
            radial-gradient(circle at top left, hsl(196 100% 60% / 0.15), transparent 28%),
            radial-gradient(circle at top right, hsl(214 100% 68% / 0.12), transparent 26%),
            linear-gradient(180deg, hsl(var(--app-bg-soft)) 0%, hsl(var(--app-bg)) 48%, hsl(222 24% 7%) 100%);
        min-height: 100vh;
    }

    html[data-theme='light'] body {
        background:
            radial-gradient(circle at top left, hsl(202 100% 78% / 0.14), transparent 28%),
            linear-gradient(180deg, hsl(var(--content-bg-soft)) 0%, hsl(var(--content-bg)) 100%);
    }

    a {
        color: hsl(var(--site-secondary));
        transition: color 180ms ease, opacity 180ms ease;
    }

    a:hover {
        color: hsl(196 100% 78%);
    }

    html[data-theme='light'] a:hover {
        color: hsl(199 82% 42%);
    }

    ::selection {
        background: hsl(var(--site-secondary) / 0.28);
        color: white;
    }

    input,
    textarea,
    select {
        color: hsl(var(--text-main));
        background: hsl(var(--panel-bg-strong) / 0.9);
        border-color: hsl(var(--panel-border));
    }

    input::placeholder,
    textarea::placeholder {
        color: hsl(var(--text-muted));
    }

    input:focus,
    textarea:focus,
    select:focus {
        border-color: hsl(var(--site-secondary) / 0.9);
        box-shadow: 0 0 0 3px hsl(var(--site-secondary) / 0.18);
        outline: none;
    }

    button:focus-visible,
    a:focus-visible {
        outline: 2px solid hsl(var(--site-secondary) / 0.72);
        outline-offset: 2px;
    }
}

@layer components {
    .btn {
        @apply inline-flex items-center justify-center gap-2 rounded-xl text-sm font-medium px-4 py-2.5 border border-transparent transition;
    }

    .btn-primary {
        background: linear-gradient(135deg, hsl(var(--btn-primary)) 0%, hsl(211 100% 70%) 100%);
        box-shadow: var(--glow-strong);
        @apply text-slate-950 hover:brightness-110;
    }

    .btn-accent {
        background: linear-gradient(135deg, hsl(var(--btn-accent)) 0%, hsl(var(--site-secondary)) 100%);
        box-shadow: var(--glow-soft);
        @apply text-white hover:brightness-110;
    }

    .btn-danger {
        background: linear-gradient(135deg, hsl(var(--btn-danger)) 0%, hsl(344 78% 59%) 100%);
        @apply text-white hover:brightness-110;
    }

    .btn-outline {
        background: hsl(var(--panel-bg) / 0.72);
        border-color: hsl(var(--panel-border));
        box-shadow: var(--glow-soft);
        @apply text-slate-100 hover:bg-slate-800/80;
    }

    .btn-secondary {
        background: hsl(var(--panel-bg) / 0.82);
        border-color: hsl(var(--panel-border));
        @apply text-slate-100 hover:bg-slate-800/80 shadow-[0_0_0_1px_rgba(148,163,184,0.24)];
    }

    .btn:disabled,
    .btn[disabled] {
        opacity: 0.55;
        cursor: not-allowed;
        box-shadow: none;
    }

    .theme-switch {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        width: 100%;
        min-height: 3rem;
        padding: 0.55rem 0.9rem;
        border-radius: 9999px;
        border: 1px solid hsl(var(--panel-border) / 0.95);
        background: linear-gradient(180deg, hsl(var(--panel-bg-strong) / 0.95) 0%, hsl(var(--panel-bg) / 0.88) 100%);
        box-shadow: var(--glow-soft);
        color: hsl(var(--text-main));
        transition: border-color 180ms ease, box-shadow 180ms ease, transform 180ms ease, background 180ms ease;
    }

    .theme-switch:hover {
        border-color: hsl(var(--site-secondary) / 0.55);
        box-shadow: var(--glow-strong);
        transform: translateY(-1px);
    }

    .theme-switch__icon {
        @apply inline-flex items-center justify-center text-slate-400 transition duration-150 ease-in-out;
        width: 1.6rem;
        height: 1.6rem;
        line-height: 1;
    }

    .theme-switch__icon.is-active {
        @apply text-white;
    }

    .theme-switch__track {
        position: relative;
        width: 3rem;
        height: 1.4rem;
        border-radius: 9999px;
        background: hsl(var(--panel-bg) / 0.72);
        border: 1px solid hsl(var(--panel-border) / 0.7);
        flex-shrink: 0;
    }

    .theme-switch__thumb {
        position: absolute;
        top: 50%;
        left: 2px;
        width: 1rem;
        height: 1rem;
        border-radius: 9999px;
        background: hsl(0 0% 100%);
        transform: translateY(-50%);
        transition: transform 180ms ease, background 180ms ease;
        box-shadow: 0 10px 24px hsl(var(--panel-border) / 0.12);
    }

    .theme-switch__thumb.is-light {
        left: calc(100% - 1rem - 2px);
        transform: translateY(-50%);
        background: hsl(var(--site-secondary) / 0.95);
    }

    .theme-switch__label {
        @apply text-xs font-semibold tracking-[0.14em];
        color: hsl(var(--text-muted));
        white-space: nowrap;
    }

    .app-panel {
        background: linear-gradient(180deg, hsl(var(--panel-bg-strong) / 0.95) 0%, hsl(var(--panel-bg) / 0.92) 100%);
        border: 1px solid hsl(var(--panel-border));
        box-shadow: var(--glow-soft);
        @apply rounded-2xl backdrop-blur-xl;
    }

    .app-panel-subtle {
        background: hsl(var(--panel-bg) / 0.68);
        border: 1px solid hsl(var(--panel-border) / 0.85);
        @apply rounded-xl backdrop-blur-md;
    }

    .app-card {
        background: linear-gradient(180deg, hsl(var(--panel-bg-strong) / 0.96) 0%, hsl(var(--panel-bg) / 0.94) 100%);
        border: 1px solid hsl(var(--panel-border));
        box-shadow: var(--glow-soft);
        @apply rounded-2xl backdrop-blur-xl;
    }

    .app-card-muted {
        background: linear-gradient(180deg, hsl(var(--panel-bg) / 0.88) 0%, hsl(222 18% 12% / 0.92) 100%);
        border: 1px solid hsl(var(--panel-border) / 0.82);
        @apply rounded-2xl;
    }

    .app-card-header {
        @apply flex items-center justify-between gap-3 px-5 py-4;
        border-bottom: 1px solid hsl(var(--panel-border) / 0.72);
    }

    .app-card-body {
        @apply p-5;
    }

    .app-metric-card {
        background:
            radial-gradient(circle at top right, hsl(var(--site-secondary) / 0.18), transparent 38%),
            linear-gradient(180deg, hsl(var(--panel-bg-strong) / 0.98) 0%, hsl(var(--panel-bg) / 0.95) 100%);
        border: 1px solid hsl(var(--panel-border));
        box-shadow: var(--glow-soft);
        @apply rounded-3xl p-5 backdrop-blur-xl;
    }

    .app-table-shell {
        background: linear-gradient(180deg, hsl(var(--panel-bg-strong) / 0.97) 0%, hsl(var(--panel-bg) / 0.95) 100%);
        border: 1px solid hsl(var(--panel-border));
        box-shadow: var(--glow-soft);
        @apply overflow-hidden rounded-2xl backdrop-blur-xl;
    }

    .app-table-head {
        background: hsl(219 18% 17% / 0.92);
        color: hsl(var(--text-muted));
    }

    .app-list-shell {
        background: linear-gradient(180deg, hsl(var(--panel-bg-strong) / 0.97) 0%, hsl(var(--panel-bg) / 0.95) 100%);
        border: 1px solid hsl(var(--panel-border));
        box-shadow: var(--glow-soft);
        @apply overflow-hidden rounded-2xl;
    }

    .app-list-head {
        background: hsl(var(--panel-bg-strong) / 0.9);
        color: hsl(var(--text-muted));
        @apply text-sm font-medium;
    }

    .app-list-row {
        border-top: 1px solid hsl(var(--panel-border) / 0.72);
        @apply transition-colors;
    }

    .app-list-row:hover {
        background: hsl(var(--panel-bg-strong) / 0.42);
    }

    .app-modal-panel {
        background: linear-gradient(180deg, hsl(var(--panel-bg-strong) / 0.98) 0%, hsl(var(--panel-bg) / 0.96) 100%);
        border: 1px solid hsl(var(--panel-border));
        box-shadow: var(--glow-strong);
        @apply rounded-3xl;
    }

    .app-segmented {
        background: hsl(var(--panel-bg) / 0.72);
        border: 1px solid hsl(var(--panel-border));
        @apply inline-flex overflow-hidden rounded-xl p-1;
    }

    .app-segmented-option {
        color: hsl(var(--text-muted));
        @apply rounded-lg px-3 py-1.5 text-sm font-medium transition;
    }

    .app-segmented-option.is-active {
        background: hsl(var(--panel-bg-strong));
        color: hsl(var(--text-main));
        box-shadow: 0 0 0 1px hsl(var(--panel-border) / 0.82);
    }

    .app-pagination-link {
        background: hsl(var(--panel-bg) / 0.78);
        border: 1px solid hsl(var(--panel-border));
        color: hsl(var(--text-muted));
        @apply rounded-xl px-3 py-1.5 text-sm transition;
    }

    .app-pagination-link:hover {
        color: hsl(var(--text-main));
        border-color: hsl(var(--site-secondary) / 0.4);
    }

    .app-pagination-link.is-active {
        background: hsl(var(--panel-bg-strong));
        color: hsl(var(--text-main));
        box-shadow: 0 0 0 1px hsl(var(--site-secondary) / 0.18);
    }

    .app-grid-bg {
        background-image:
            linear-gradient(to right, hsl(214 32% 26% / 0.18) 1px, transparent 1px),
            linear-gradient(to bottom, hsl(214 32% 26% / 0.16) 1px, transparent 1px);
        background-size: 36px 36px;
    }

    .theme-switch {
        position: relative;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 0.75rem;
        min-height: 3rem;
        padding: 0.55rem 0.9rem;
        border-radius: 9999px;
        border: 1px solid hsl(var(--panel-border) / 0.95);
        background:
            linear-gradient(180deg, hsl(var(--panel-bg-strong) / 0.95) 0%, hsl(var(--panel-bg) / 0.88) 100%);
        box-shadow: var(--glow-soft);
        color: hsl(var(--text-main));
        transition:
            border-color 180ms ease,
            box-shadow 180ms ease,
            transform 180ms ease,
            background 180ms ease;
    }

    .theme-switch:hover {
        border-color: hsl(var(--site-secondary) / 0.55);
        box-shadow: var(--glow-strong);
        transform: translateY(-1px);
    }

    .theme-switch__track {
        position: relative;
        width: 3.75rem;
        height: 2rem;
        border-radius: 9999px;
        border: 1px solid hsl(var(--panel-border) / 0.9);
        background:
            linear-gradient(135deg, hsl(220 20% 13% / 0.98) 0%, hsl(212 76% 18% / 0.95) 100%);
        box-shadow:
            inset 0 1px 4px hsl(220 30% 5% / 0.42),
            0 0 20px hsl(196 100% 62% / 0.12);
        transition: background 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
    }

    .theme-switch__thumb {
        position: absolute;
        top: 50%;
        left: 0.28rem;
        width: 1.4rem;
        height: 1.4rem;
        border-radius: 9999px;
        background: linear-gradient(135deg, hsl(212 100% 75%) 0%, hsl(191 100% 68%) 100%);
        box-shadow:
            0 0 0 1px hsl(196 100% 62% / 0.18),
            0 0 22px hsl(196 100% 62% / 0.42);
        transform: translateY(-50%);
        transition:
            left 220ms ease,
            background 220ms ease,
            box-shadow 220ms ease,
            transform 220ms ease;
    }

    .theme-switch__thumb.is-light {
        left: calc(100% - 1.68rem);
        background: linear-gradient(135deg, hsl(44 100% 74%) 0%, hsl(196 100% 76%) 100%);
        box-shadow:
            0 0 0 1px hsl(45 100% 72% / 0.25),
            0 0 24px hsl(196 100% 62% / 0.34);
    }

    .theme-switch__icon {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 1.2rem;
        font-size: 1rem;
        line-height: 1;
        color: hsl(var(--text-muted));
        transition: color 180ms ease, text-shadow 180ms ease, transform 180ms ease;
    }

    .theme-switch__icon.is-active {
        color: hsl(var(--site-secondary));
        text-shadow: 0 0 14px hsl(var(--site-secondary) / 0.42);
        transform: scale(1.05);
    }

    .theme-switch__label {
        min-width: 5.75rem;
        text-align: left;
        font-size: 0.76rem;
        font-weight: 600;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: hsl(var(--text-main));
    }
}

:root[data-theme='light'] .app-grid-bg {
    background-image:
        linear-gradient(to right, hsl(201 74% 65% / 0.09) 1px, transparent 1px),
        linear-gradient(to bottom, hsl(215 32% 62% / 0.08) 1px, transparent 1px);
}

:root[data-theme='light'] .app-panel,
:root[data-theme='light'] .app-card,
:root[data-theme='light'] .app-table-shell {
    background:
        linear-gradient(180deg, hsl(var(--panel-bg-strong) / 1) 0%, hsl(var(--panel-bg) / 1) 100%);
    border-color: hsl(var(--panel-border));
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.72),
        0 20px 50px hsl(215 38% 83% / 0.16);
    backdrop-filter: none;
}

:root[data-theme='light'] .app-panel-subtle,
:root[data-theme='light'] .app-card-muted {
    background:
        linear-gradient(180deg, hsl(210 40% 99%) 0%, hsl(210 30% 98%) 100%);
    border-color: hsl(214 28% 90%);
}

:root[data-theme='light'] .app-card-header {
    border-bottom-color: hsl(var(--panel-border));
}

:root[data-theme='light'] .app-metric-card {
    background:
        radial-gradient(circle at top right, hsl(var(--site-secondary) / 0.08), transparent 42%),
        linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(210 40% 99%) 100%);
    border-color: hsl(var(--panel-border));
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.64),
        0 18px 44px hsl(215 38% 82% / 0.14);
}

:root[data-theme='light'] .app-table-head {
    background: hsl(210 33% 98%);
    color: hsl(215 12% 46%);
}

:root[data-theme='light'] .btn-outline {
    background: hsl(0 0% 100%);
    border-color: hsl(var(--panel-border));
    color: hsl(var(--text-main));
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.72),
        0 10px 24px hsl(215 38% 83% / 0.08);
}

:root[data-theme='light'] .btn-outline:hover {
    background: hsl(210 33% 98%);
    color: hsl(var(--text-main));
}

:root[data-theme='light'] .btn-secondary {
    background: hsl(210 33% 98%);
    border-color: hsl(var(--panel-border));
    color: hsl(var(--text-main));
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.68),
        0 8px 18px hsl(215 38% 83% / 0.08);
}

:root[data-theme='light'] .btn-secondary:hover {
    background: hsl(0 0% 100%);
    color: hsl(var(--text-main));
}

:root[data-theme='light'] .btn:disabled,
:root[data-theme='light'] .btn[disabled] {
    opacity: 0.42;
    color: hsl(215 16% 72%);
    background: hsl(210 33% 98%);
    border-color: hsl(214 28% 92%);
}

:root[data-theme='light'] .app-list-shell,
:root[data-theme='light'] .app-modal-panel {
    background: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(210 40% 99%) 100%);
    border-color: hsl(var(--panel-border));
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.7),
        0 22px 54px hsl(215 38% 82% / 0.16);
}

:root[data-theme='light'] .app-list-head {
    background: hsl(210 33% 98%);
    color: hsl(215 12% 46%);
}

:root[data-theme='light'] .app-list-row:hover {
    background: hsl(210 33% 98%);
}

:root[data-theme='light'] .app-segmented {
    background: hsl(210 33% 98%);
    border-color: hsl(var(--panel-border));
}

:root[data-theme='light'] .app-segmented-option.is-active {
    background: hsl(0 0% 100%);
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.8),
        0 8px 20px hsl(215 38% 82% / 0.12);
}

:root[data-theme='light'] .app-pagination-link {
    background: hsl(0 0% 100%);
    border-color: hsl(var(--panel-border));
    color: hsl(215 12% 46%);
}

:root[data-theme='light'] .app-pagination-link.is-active {
    color: hsl(var(--text-main));
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.8),
        0 10px 24px hsl(215 38% 82% / 0.12);
}

:root[data-theme='light'] .theme-switch {
    background: linear-gradient(180deg, hsl(0 0% 100%) 0%, hsl(210 40% 99%) 100%);
    border-color: hsl(var(--panel-border));
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.75),
        0 12px 30px hsl(215 38% 83% / 0.12);
}

:root[data-theme='light'] .theme-switch__track {
    background:
        linear-gradient(135deg, hsl(214 18% 95%) 0%, hsl(190 100% 97%) 100%);
    border-color: hsl(214 28% 84% / 0.95);
    box-shadow:
        inset 0 1px 4px hsl(214 26% 90% / 0.35),
        0 0 18px hsl(var(--site-secondary) / 0.08);
}

:root[data-theme='light'] .layout-shell {
    background: linear-gradient(180deg, hsl(var(--content-bg-soft)) 0%, hsl(var(--content-bg)) 100%);
}

:root[data-theme='light'] .layout-sidebar {
    background:
        linear-gradient(180deg, hsl(var(--sidebar-bg)) 0%, hsl(var(--sidebar-bg-strong)) 100%);
    border-color: hsl(var(--sidebar-border));
    box-shadow:
        0 0 0 1px hsl(var(--sidebar-border) / 0.85),
        0 28px 60px hsl(226 28% 8% / 0.24);
}

:root[data-theme='light'] .sidebar-header {
    border-bottom-color: hsl(220 12% 100% / 0.08);
}

:root[data-theme='light'] .logo-shell {
    background: hsl(220 20% 100% / 0.06);
    border-color: hsl(220 18% 100% / 0.1);
    box-shadow: none;
}

:root[data-theme='light'] .workspace-kicker {
    color: hsl(var(--sidebar-text-muted));
}

:root[data-theme='light'] .workspace-title {
    color: hsl(var(--sidebar-text));
}

:root[data-theme='light'] .sidebar-nav-link {
    color: hsl(var(--sidebar-text-muted));
}

:root[data-theme='light'] .sidebar-nav-link:hover {
    background: hsl(220 20% 100% / 0.06);
    color: hsl(var(--sidebar-text));
}

:root[data-theme='light'] .sidebar-nav-link.is-active {
    background: hsl(var(--sidebar-active-bg));
    color: hsl(var(--sidebar-active-text));
    box-shadow:
        0 10px 26px hsl(218 32% 9% / 0.18),
        inset 0 0 0 1px hsl(214 28% 92%);
}

:root[data-theme='light'] .sidebar-nav-dot {
    background: hsl(220 12% 38%);
    box-shadow: none;
}

:root[data-theme='light'] .sidebar-nav-dot.is-active {
    background: hsl(var(--sidebar-active-dot));
    box-shadow: 0 0 0 4px hsl(var(--sidebar-active-dot) / 0.15);
}

:root[data-theme='light'] .sidebar-logout {
    background: hsl(220 18% 100% / 0.06);
    border-color: hsl(220 18% 100% / 0.08);
    color: hsl(var(--sidebar-text));
    box-shadow: none;
}

:root[data-theme='light'] .sidebar-logout:hover {
    background: hsl(220 18% 100% / 0.12);
}

:root[data-theme='light'] .mobile-toggle,
:root[data-theme='light'] .mobile-drawer {
    background: linear-gradient(180deg, hsl(var(--sidebar-bg)) 0%, hsl(var(--sidebar-bg-strong)) 100%);
    border-color: hsl(var(--sidebar-border));
    color: hsl(var(--sidebar-text));
}

:root[data-theme='light'] .flash-shell {
    background: hsl(0 0% 100% / 0.92);
    border-color: hsl(var(--panel-border));
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.72),
        0 22px 52px hsl(215 38% 82% / 0.2);
}

:root[data-theme='light'] .guest-logo-shell {
    background: hsl(0 0% 100%);
    border-color: hsl(var(--panel-border));
    box-shadow:
        0 0 0 1px hsl(var(--panel-border) / 0.7),
        0 24px 52px hsl(215 38% 82% / 0.16);
}

/* ================================================================
   JudExpert Design System — extended components
   ================================================================ */

/* ── Status pills ── */
.status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.status-pill::before {
    content: "";
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}
.status-pill.status-in_progress { color: #38bdf8; background: rgba(56,189,248,0.14); }
.status-pill.status-waiting     { color: #f59e0b; background: rgba(245,158,11,0.14); }
.status-pill.status-done        { color: #10b981; background: rgba(16,185,129,0.14); }
.status-pill.status-fini        { color: #10b981; background: rgba(16,185,129,0.14); }
.status-pill.status-draft       { color: #94a3b8; background: rgba(30,41,59,0.8); }
.status-pill.status-non_paye    { color: #fb7185; background: rgba(244,63,94,0.14); }
.status-pill.status-todo        { color: #f59e0b; background: rgba(245,158,11,0.14); }
.status-pill.status-sent        { color: #818cf8; background: rgba(129,140,248,0.14); }
.status-pill.status-paid        { color: #10b981; background: rgba(16,185,129,0.14); }
.status-pill.status-cancelled   { color: #94a3b8; background: rgba(30,41,59,0.8); }
.status-pill.status-archived    { color: #64748b; background: rgba(30,41,59,0.7); }
.status-pill.status-classe      { color: #94a3b8; background: rgba(30,41,59,0.8); }

/* ── Role badges ── */
.role-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    background: rgba(129,140,248,0.16);
    color: #c7d2fe;
    border: 1px solid rgba(129,140,248,0.24);
    white-space: nowrap;
}
.role-badge.role-primaire { background: rgba(34,211,238,0.16); color: #67e8f9; border-color: rgba(34,211,238,0.24); }
.role-badge.role-sapiteur { background: rgba(168,85,247,0.16); color: #d8b4fe; border-color: rgba(168,85,247,0.24); }
.role-badge.role-coexpert { background: rgba(129,140,248,0.16); color: #c7d2fe; border-color: rgba(129,140,248,0.24); }

/* ── KPI cards ── */
.kpi-card {
    background: hsl(var(--panel-bg-strong) / 0.98);
    border: 1px solid hsl(var(--panel-border));
    border-radius: 20px;
    padding: 22px;
    position: relative;
    overflow: hidden;
}
.kpi-card::before {
    content: "";
    position: absolute; top: 0; right: 0;
    width: 160px; height: 120px;
    background: radial-gradient(circle at top right, rgba(34,211,238,0.12), transparent 60%);
    pointer-events: none;
}
.kpi-card.kpi-accent::before {
    background: radial-gradient(circle at top right, rgba(34,211,238,0.22), transparent 60%);
}
.kpi-card .kpi-label {
    font-size: 10px;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: hsl(var(--text-muted));
    font-weight: 600;
    position: relative;
}
.kpi-card .kpi-value {
    font-size: 26px;
    font-weight: 700;
    color: hsl(var(--text-main));
    margin-top: 10px;
    font-family: "JetBrains Mono", monospace;
    letter-spacing: -0.02em;
    line-height: 1.1;
    position: relative;
}
.kpi-card.kpi-accent .kpi-value { color: #22d3ee; }
.kpi-card .kpi-value small { font-size: 14px; color: hsl(var(--text-muted)); font-weight: 600; }

/* ── Expertise cards ── */
.exp-card {
    background: hsl(var(--panel-bg) / 0.88);
    border: 1px solid hsl(var(--panel-border));
    border-radius: 20px;
    padding: 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}
.exp-card:hover {
    border-color: rgba(103,232,249,0.40);
    box-shadow: 0 18px 44px rgba(34,211,238,0.10);
}
.exp-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, #22d3ee, transparent);
    opacity: 0;
    transition: opacity 0.2s ease;
}
.exp-card.is-featured::before { opacity: 1; }
.exp-card .exp-ref {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: #22d3ee;
    font-weight: 600;
    letter-spacing: 0.04em;
}
.exp-card .exp-title {
    font-size: 14px;
    font-weight: 700;
    color: hsl(var(--text-main));
    line-height: 1.35;
    letter-spacing: -0.005em;
    margin: 4px 0 0;
}
.exp-card dl {
    display: grid;
    grid-template-columns: 90px 1fr;
    gap: 6px 10px;
    margin: 0;
    font-size: 12px;
}
.exp-card dt { color: #64748b; font-weight: 500; }
.exp-card dd { margin: 0; color: hsl(var(--text-main)); font-weight: 500; }
.exp-card .exp-due-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 12px;
    border-top: 1px dashed hsl(var(--panel-border) / 0.6);
    font-size: 11px;
}
.exp-card .due-pill {
    padding: 3px 10px;
    border-radius: 8px;
    background: hsl(var(--panel-bg-strong) / 0.9);
    color: hsl(var(--text-main));
    font-family: "JetBrains Mono", monospace;
    font-weight: 600;
    font-size: 11px;
}
.exp-card .due-pill.due-late { background: rgba(244,63,94,0.14); color: #fb7185; }
.exp-card .due-pill.due-warn { background: rgba(245,158,11,0.14); color: #fbbf24; }

/* ── Contact cards ── */
.ct-card {
    background: hsl(var(--panel-bg) / 0.88);
    border: 1px solid hsl(var(--panel-border));
    border-radius: 18px;
    padding: 18px;
    display: flex;
    gap: 14px;
    align-items: flex-start;
    transition: border-color 0.2s ease;
}
.ct-card:hover { border-color: rgba(103,232,249,0.32); }
.ct-card .ct-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(135deg, #22d3ee, #6366f1);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}
.ct-card.ct-company .ct-avatar {
    background: linear-gradient(135deg, #818cf8, #f472b6);
    border-radius: 10px;
}
.ct-tag {
    font-size: 9px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    display: inline-block;
}
.ct-tag.ct-tag-person { background: rgba(34,211,238,0.14); color: #22d3ee; }
.ct-tag.ct-tag-company { background: rgba(129,140,248,0.14); color: #c7d2fe; }

/* ── Document card grid ── */
.doc-card {
    background: hsl(var(--panel-bg) / 0.88);
    border: 1px solid hsl(var(--panel-border));
    border-radius: 16px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    cursor: pointer;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.doc-card:hover {
    border-color: rgba(103,232,249,0.40);
    box-shadow: 0 12px 28px rgba(34,211,238,0.08);
}
.doc-card .doc-thumb {
    height: 80px;
    border-radius: 10px;
    background: hsl(var(--panel-bg-strong) / 0.9);
    border: 1px solid hsl(var(--panel-border) / 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.doc-card .doc-ext {
    position: absolute;
    bottom: 6px;
    right: 6px;
    font-family: "JetBrains Mono", monospace;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 4px;
    background: hsl(var(--panel-bg-strong));
    color: #22d3ee;
    border: 1px solid hsl(var(--panel-border));
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
}

/* ── Accordion sections ── */
.acc-section {
    background: hsl(var(--panel-bg) / 0.88);
    border: 1px solid hsl(var(--panel-border));
    border-radius: 18px;
    overflow: hidden;
    transition: border-color 0.2s ease;
}
.acc-section.acc-open { border-color: hsl(var(--panel-border)); }
.acc-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px 20px;
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    cursor: pointer;
    text-align: left;
    color: hsl(var(--text-main));
    transition: background 0.15s ease;
}
.acc-section.acc-open .acc-trigger { border-bottom-color: hsl(var(--panel-border) / 0.7); }
.acc-trigger:hover { background: hsl(var(--panel-bg-strong) / 0.4); }
.acc-caret {
    width: 22px;
    height: 22px;
    border-radius: 7px;
    background: hsl(var(--panel-bg-strong) / 0.9);
    border: 1px solid hsl(var(--panel-border));
    color: #22d3ee;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
    transition: transform 0.2s ease;
}
.acc-section.acc-open .acc-caret { transform: rotate(90deg); }
.acc-trigger h4 {
    font-size: 14px;
    font-weight: 700;
    margin: 0;
    color: hsl(var(--text-main));
    flex: 1;
}
.acc-count {
    font-family: "JetBrains Mono", monospace;
    font-size: 11px;
    color: hsl(var(--text-muted));
    background: hsl(var(--panel-bg-strong) / 0.9);
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid hsl(var(--panel-border));
}
.acc-body { padding: 18px 22px; }

/* ── Timeline ── */
.timeline-list {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.timeline-list::before {
    content: "";
    position: absolute;
    left: 7px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(180deg, #22d3ee, transparent);
    opacity: 0.4;
}
.timeline-item {
    padding: 6px 0 12px 28px;
    position: relative;
    font-size: 12px;
}
.timeline-item::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 10px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #22d3ee;
    box-shadow: 0 0 8px rgba(34,211,238,0.6);
}
.timeline-item.tl-done::before { background: #10b981; box-shadow: 0 0 8px rgba(16,185,129,0.6); }
.timeline-item.tl-pending::before { background: #475569; box-shadow: none; }
.timeline-ts {
    font-family: "JetBrains Mono", monospace;
    font-size: 10px;
    color: #64748b;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.timeline-lbl { color: hsl(var(--text-main)); font-weight: 600; margin: 2px 0; font-size: 12px; }
.timeline-desc { color: hsl(var(--text-muted)); font-size: 11px; }

/* ── Totals card ── */
.totals-card {
    background: linear-gradient(135deg, rgba(34,211,238,0.10) 0%, rgba(56,189,248,0.04) 100%);
    border: 1px solid rgba(103,232,249,0.20);
    border-radius: 18px;
    padding: 20px;
}
.totals-card .totals-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    font-size: 13px;
    color: hsl(var(--text-muted));
}
.totals-card .totals-row + .totals-row { border-top: 1px dashed hsl(var(--panel-border) / 0.5); }
.totals-card .totals-row.totals-total {
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px solid hsl(var(--panel-border));
    font-size: 15px;
    font-weight: 700;
    color: hsl(var(--text-main));
}
.totals-val {
    font-family: "JetBrains Mono", monospace;
    font-weight: 700;
    color: hsl(var(--text-main));
}

/* ── Filters bar ── */
.filters-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.filter-chip {
    height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    background: hsl(var(--panel-bg-strong) / 0.9);
    border: 1px solid hsl(var(--panel-border));
    color: hsl(var(--text-muted));
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.15s ease;
}
.filter-chip:hover { color: hsl(var(--text-main)); border-color: rgba(34,211,238,0.3); }
.filter-chip.filter-chip-active {
    background: rgba(34,211,238,0.14);
    color: #22d3ee;
    border-color: rgba(34,211,238,0.4);
}
.filter-input {
    height: 38px;
    background: hsl(var(--panel-bg) / 0.88);
    border: 1px solid hsl(var(--panel-border));
    border-radius: 12px;
    padding: 0 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: hsl(var(--text-muted));
}
.filter-input input, .filter-input select {
    background: none;
    border: none;
    outline: none;
    color: hsl(var(--text-main));
    font-family: inherit;
    font-size: 13px;
    width: 100%;
}

/* ── Page header ── */
.page-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin-bottom: 24px;
    gap: 16px;
}
.page-breadcrumb {
    font-size: 11px;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
    margin-bottom: 4px;
}
.page-breadcrumb b { color: #22d3ee; font-weight: 600; }
.page-title-h1 {
    font-size: 24px;
    font-weight: 700;
    color: hsl(var(--text-main));
    letter-spacing: -0.01em;
    margin: 0;
}
.page-sub-text {
    font-size: 13px;
    color: hsl(var(--text-muted));
    margin: 4px 0 0;
}
.page-actions {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-shrink: 0;
}

/* ── Search box ── */
.search-box {
    height: 38px;
    width: 260px;
    background: hsl(var(--panel-bg) / 0.88);
    border: 1px solid hsl(var(--panel-border));
    border-radius: 12px;
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: hsl(var(--text-muted));
}
.search-box input {
    background: none;
    border: none;
    outline: none;
    color: hsl(var(--text-main));
    font-family: inherit;
    font-size: 13px;
    flex: 1;
}
.search-box input::placeholder { color: hsl(var(--text-muted)); }

/* ── Action buttons for design system ── */
.btn-ds-primary {
    height: 38px;
    padding: 0 18px;
    border-radius: 12px;
    background: linear-gradient(135deg, #38bdf8 0%, #67e8f9 100%);
    color: #0c1a30;
    font-weight: 700;
    font-size: 13px;
    border: none;
    cursor: pointer;
    box-shadow: 0 6px 24px rgba(34,211,238,0.28);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    white-space: nowrap;
    transition: brightness 0.15s;
}
.btn-ds-primary:hover { filter: brightness(1.08); }
.btn-ds-ghost {
    height: 38px;
    padding: 0 16px;
    border-radius: 12px;
    background: hsl(var(--panel-bg) / 0.88);
    border: 1px solid hsl(var(--panel-border));
    color: hsl(var(--text-main));
    font-weight: 600;
    font-size: 13px;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    white-space: nowrap;
}
.btn-ds-ghost:hover { border-color: rgba(34,211,238,0.3); background: hsl(var(--panel-bg-strong) / 0.9); }
.btn-ds-danger {
    height: 34px;
    padding: 0 13px;
    border-radius: 10px;
    background: rgba(244,63,94,0.12);
    border: 1px solid rgba(244,63,94,0.30);
    color: #fb7185;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s;
}
.btn-ds-danger:hover { background: rgba(244,63,94,0.18); }

/* ── Row actions ── */
.row-actions {
    display: inline-flex;
    gap: 6px;
}
.row-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: hsl(var(--panel-bg-strong) / 0.9);
    border: 1px solid hsl(var(--panel-border));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: hsl(var(--text-muted));
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
    text-decoration: none;
}
.row-action-btn:hover { color: #22d3ee; border-color: rgba(34,211,238,0.4); }

/* ── Info grid (key-value pairs) ── */
.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px 24px;
}
.info-field { display: flex; flex-direction: column; gap: 3px; }
.info-label {
    font-size: 10px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #64748b;
    font-weight: 600;
}
.info-value {
    font-size: 13px;
    color: hsl(var(--text-main));
    font-weight: 500;
}
.info-value.mono { font-family: "JetBrains Mono", monospace; }

/* ── Mono ref ── */
.mono-ref {
    font-family: "JetBrains Mono", monospace;
    font-size: 12px;
    color: #22d3ee;
    font-weight: 600;
}

/* ── Settings layout ── */
.settings-layout {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 20px;
    align-items: start;
}
.settings-nav {
    background: hsl(var(--panel-bg) / 0.88);
    border: 1px solid hsl(var(--panel-border));
    border-radius: 18px;
    padding: 8px;
}
.settings-nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 14px;
    border-radius: 10px;
    color: hsl(var(--text-muted));
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.15s ease;
    background: none;
    border: none;
    width: 100%;
    text-align: left;
}
.settings-nav-link:hover:not(.settings-nav-active) {
    color: hsl(var(--text-main));
    background: hsl(var(--panel-bg-strong) / 0.6);
}
.settings-nav-link.settings-nav-active {
    background: rgba(34,211,238,0.12);
    color: #22d3ee;
}
.settings-field-row {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: 20px;
    align-items: start;
    padding: 18px 0;
    border-bottom: 1px dashed hsl(var(--panel-border) / 0.6);
}
.settings-field-row:last-child { border-bottom: none; }
.settings-field-label {
    font-size: 13px;
    font-weight: 600;
    color: hsl(var(--text-main));
    margin: 0 0 3px;
}
.settings-field-desc {
    font-size: 11px;
    color: hsl(var(--text-muted));
}
.settings-toggle {
    width: 40px;
    height: 22px;
    background: hsl(var(--panel-bg-strong) / 0.9);
    border: 1px solid hsl(var(--panel-border));
    border-radius: 999px;
    position: relative;
    cursor: pointer;
    transition: background 0.2s, border-color 0.2s;
    flex-shrink: 0;
}
.settings-toggle::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #475569;
    transition: all 0.2s ease;
}
.settings-toggle.toggle-on {
    background: rgba(34,211,238,0.20);
    border-color: rgba(34,211,238,0.40);
}
.settings-toggle.toggle-on::after {
    left: calc(100% - 18px);
    background: #22d3ee;
    box-shadow: 0 0 12px rgba(34,211,238,0.6);
}

/* ── Light theme overrides for new components ── */
:root[data-theme='light'] .status-pill.status-draft,
:root[data-theme='light'] .status-pill.status-cancelled,
:root[data-theme='light'] .status-pill.status-archived,
:root[data-theme='light'] .status-pill.status-classe {
    background: rgba(148,163,184,0.15);
    color: #64748b;
}
:root[data-theme='light'] .exp-card,
:root[data-theme='light'] .ct-card,
:root[data-theme='light'] .doc-card,
:root[data-theme='light'] .acc-section,
:root[data-theme='light'] .kpi-card,
:root[data-theme='light'] .totals-card {
    background: hsl(0 0% 100%);
    border-color: hsl(var(--panel-border));
}
:root[data-theme='light'] .exp-card:hover,
:root[data-theme='light'] .ct-card:hover {
    border-color: hsl(var(--site-secondary) / 0.4);
    box-shadow: 0 12px 32px hsl(var(--site-secondary) / 0.10);
}
:root[data-theme='light'] .exp-card dt { color: hsl(214 10% 50%); }
:root[data-theme='light'] .info-label { color: hsl(214 10% 50%); }
:root[data-theme='light'] .filter-chip {
    background: hsl(0 0% 100%);
    border-color: hsl(var(--panel-border));
    color: hsl(215 12% 46%);
}
:root[data-theme='light'] .kpi-card::before {
    background: radial-gradient(circle at top right, hsl(var(--site-secondary) / 0.08), transparent 60%);
}
:root[data-theme='light'] .settings-nav,
:root[data-theme='light'] .settings-nav-link {
    background: hsl(0 0% 100%);
    border-color: hsl(var(--panel-border));
}
:root[data-theme='light'] .totals-card {
    background: linear-gradient(135deg, hsl(var(--site-secondary) / 0.06), transparent);
    border-color: hsl(var(--site-secondary) / 0.18);
}