:root {
    --operon-bg: #0a0f15;
    --operon-shell: #101720;
    --operon-layer-1: #10161e;
    --operon-layer-2: #202a37;
    --operon-layer-3: #2a3645;
    --operon-text: #f3f5f8;
    --operon-text-secondary: #a4afbf;
    --operon-text-muted: #6d788a;
    --operon-divider: #2b3442;
    --operon-now: #4fd1c5;
    --operon-next: #8b8df8;
    --operon-blocked: #f5c451;
    --operon-done: #74d680;
    --operon-overdue: #f26d7d;
    --operon-start-delayed: #f59e62;
    --operon-on-accent: #071312;
    --operon-on-next: #f5f5ff;
    --operon-hover-layer: #26313e;
    --operon-success: #8be0af;
    --operon-success-container: #0f1f16;
    --operon-success-container-strong: #173322;
    --operon-success-border: #245f38;
    --operon-error-container: #220f0f;
    --operon-error-border: #7a1f1f;
    --operon-scrim: rgba(3, 7, 11, 0.66);
    --operon-scrim-subtle: rgba(3, 7, 11, 0.62);
    --operon-elevation-drawer: -24px 0 60px rgba(0, 0, 0, 0.36);
    --operon-elevation-panel: 0 28px 80px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(255, 255, 255, 0.02);
    --operon-elevation-floating: 0 20px 60px rgba(0, 0, 0, 0.45);
    --operon-now-subtle: rgba(79, 209, 197, 0.1);
    --operon-now-border: rgba(79, 209, 197, 0.3);
    --operon-overdue-subtle: rgba(242, 109, 125, 0.12);
    --operon-overdue-border: rgba(242, 109, 125, 0.3);
    --operon-blocked-subtle: rgba(245, 196, 81, 0.1);
    --operon-blocked-border: rgba(245, 196, 81, 0.3);
    --operon-start-delayed-subtle: rgba(245, 158, 98, 0.12);
    --operon-start-delayed-border: rgba(245, 158, 98, 0.3);
    --operon-done-subtle: rgba(116, 214, 128, 0.1);
    --operon-done-border: rgba(116, 214, 128, 0.3);
    --operon-muted-subtle: rgba(164, 175, 191, 0.1);
    --operon-radius-control: 0.1875rem;
    --operon-radius-card: 0.25rem;
    --operon-radius-section: 0.375rem;
    --operon-font-sans: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

html { background: var(--operon-bg); }

body {
    background: var(--operon-bg) !important;
    color: var(--operon-text);
    font-family: var(--operon-font-sans);
}

::selection { background: var(--operon-now-border); color: var(--operon-text); }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 500, 'GRAD' 0, 'opsz' 24;
    vertical-align: middle;
}

.operon-wordmark,
.font-display-md,
.font-headline-md,
.font-title-lg { font-family: var(--operon-font-sans); }

.rounded-lg { border-radius: var(--operon-radius-control) !important; }
.rounded-xl { border-radius: var(--operon-radius-section) !important; }

.operon-topbar {
    background: var(--operon-shell);
    border-bottom: 1px solid var(--operon-divider);
    backdrop-filter: blur(12px);
}

.operon-topbar-link { color: var(--operon-text-secondary); }
.operon-topbar-link:hover { color: var(--operon-text); }
.operon-mobile-menu { display: inline-grid; width: 2.25rem; height: 2.25rem; margin-right: 0.55rem; place-items: center; color: var(--operon-text-secondary); background: var(--operon-layer-2); border: 1px solid var(--operon-divider); border-radius: var(--operon-radius-control); }
.operon-mobile-menu:hover { color: var(--operon-text); background: var(--operon-layer-3); }

.operon-user-avatar {
    color: var(--operon-text);
    background: var(--operon-layer-2);
    border: 1px solid var(--operon-divider);
}

.operon-sidebar,
.operon-mobile-nav {
    background: var(--operon-shell);
    border-color: var(--operon-divider);
}

.operon-sidebar { border-right: 1px solid var(--operon-divider); }
.operon-sidebar-brand { border-bottom: 1px solid var(--operon-divider); }
.operon-nav-label { color: var(--operon-text-muted); }

.operon-nav-link {
    position: relative;
    color: var(--operon-text-secondary);
    border: 1px solid transparent;
    border-radius: var(--operon-radius-control);
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
}

.operon-nav-link:hover { color: var(--operon-text); background: var(--operon-layer-1); border-color: var(--operon-divider); }
.operon-nav-link.is-active { color: var(--operon-text); background: var(--operon-layer-2); border-color: var(--operon-divider); }
.operon-nav-link.is-active::after { content: ''; position: absolute; top: 0.5rem; bottom: 0.5rem; right: -0.25rem; width: 3px; background: var(--operon-next); }
.operon-nav-link.is-active .material-symbols-outlined { color: var(--operon-next); }

.operon-mobile-nav { border-top: 1px solid var(--operon-divider); }
.operon-mobile-nav-link { color: var(--operon-text-muted); }
.operon-mobile-nav-link.is-active { color: var(--operon-now); }

.operon-stage-board { padding: 0; overflow: hidden; }
.operon-stage-board[draggable="true"] { transition: opacity 140ms ease, transform 140ms ease; }
.operon-stage-task { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; background: var(--operon-layer-2); border-radius: var(--operon-radius-control); }
.operon-stage-task:hover { background: var(--operon-layer-3); }
[data-stage-dropzone].is-drag-over { background: var(--operon-now-subtle); outline: 2px dashed var(--operon-now); outline-offset: -4px; }

button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }

:focus-visible {
    outline: 2px solid var(--operon-now);
    outline-offset: 3px;
}

@media (max-width: 767.98px) {
    .operon-topbar { padding-right: 1rem; padding-left: 1rem; }
    .operon-mobile-nav { padding-bottom: env(safe-area-inset-bottom); height: calc(4rem + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Shared off-canvas navigation for every protected mobile screen. */
.operon-mobile-sidebar-backdrop { display: none; }

@media (max-width: 767.98px) {
    .operon-sidebar {
        display: flex !important;
        width: min(17.5rem, calc(100vw - 3rem));
        transform: translateX(-105%);
        transition: transform 190ms ease;
        box-shadow: var(--operon-elevation-drawer);
    }

    body.operon-mobile-menu-open { overflow: hidden; }
    body.operon-mobile-menu-open .operon-sidebar { transform: translateX(0); }

    .operon-mobile-sidebar-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 55;
        background: var(--operon-scrim-subtle);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity 180ms ease, visibility 180ms ease;
    }

    body.operon-mobile-menu-open .operon-mobile-sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }
}