/* ===================================================================
   YT Down — theme.css (v2 "Teal & Orange" grading)
   Replaces the indigo→violet→pink 3-stop gradient (the single most
   common "AI-generated SaaS" palette) with the actual convention
   professional video tools use: neutral, unhued chrome (so it never
   competes with the video's own colors) + the classic film-grading
   complementary pair, teal and orange, used with real restraint.
   =================================================================== */

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

:root {
    /* Brand — Cinema Orange (was --dash-accent: #6366f1 indigo) */
    --dash-accent: #E0793C;
    --dash-accent-dark: #B85F2C;
    --dash-accent-light: #F3B27C;
    --dash-accent-rgb: 224, 121, 60;

    /* Secondary — Cinema Teal (was --dash-accent-2: #8b5cf6 violet).
       Orange = primary actions, active player state, download progress.
       Teal   = organization: playlists, tags, trim handles, chips.
       This is the teal/orange pairing you'll recognize from film
       color grading — it's a deliberate two-tone system, not a
       rainbow, which is what makes it read premium instead of "SaaS
       template". Resist the urge to add a third hue back in. */
    --dash-accent-2: #1F9E96;
    --dash-accent-2-dark: #167A74;
    --dash-accent-2-light: #6FCFC8;
    --dash-accent-2-rgb: 31, 158, 150;

    /* --dash-accent-3 deprecated (was #ec4899 pink — the third stop of
       the generic gradient). Kept as an alias only so old markup
       referencing it doesn't break; new work should use a named
       semantic token below instead. */
    --dash-accent-3: var(--dash-danger, #E5484D);

    /* Semantic */
    --dash-success: #2FAE68;
    --dash-success-rgb: 47, 174, 104;
    --dash-danger: #E5484D;
    --dash-danger-rgb: 229, 72, 77;
    --dash-warning: #F2C94C;
    --dash-warning-rgb: 242, 201, 76;
    --dash-info: #4C8DFF;
    --dash-info-rgb: 76, 141, 255;

    /* Neutrals — true, unhued gray. A video product's chrome should
       never cast a color tint (no blue-black, no purple-black): that
       tint fights the actual video content for attention. This is
       why YouTube, Netflix and VLC all use neutral gray/black, not a
       hued dark theme. */
    --dash-bg-body: #F4F4F5;
    --dash-text-primary: #18181B;
    --dash-text-secondary: #52525B;
    --dash-text-muted: #8A8A93;

    /* Glass cards — kept from your original approach, it's a good
       restrained look; only the tint changes downstream in dark mode. */
    --dash-card-bg: rgba(255, 255, 255, 0.65);
    --dash-card-border: rgba(0, 0, 0, 0.06);
    --dash-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 6px 16px rgba(0, 0, 0, 0.04);
    --dash-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.06), 0 12px 28px rgba(0, 0, 0, 0.08);

    /* Crisp tight shadows — replace blurry glow box-shadows */
    --shadow-crisp-sm: 0 1px 2px rgba(0, 0, 0, 0.05), 0 1px 3px rgba(0, 0, 0, 0.04);
    --shadow-crisp-md: 0 2px 4px rgba(0, 0, 0, 0.06), 0 4px 8px rgba(0, 0, 0, 0.06);

    /* Player-specific tokens */
    --player-progress-fill: var(--dash-accent);
    --player-progress-track: rgba(0, 0, 0, 0.1);
    --player-buffered: rgba(0, 0, 0, 0.2);
    --trim-handle: var(--dash-accent-2);
    --waveform-peak: var(--dash-accent-2);
    --download-ring: var(--dash-accent);
    --ad-free-badge-bg: rgba(31, 158, 150, 0.12);
    --ad-free-badge-text: var(--dash-accent-2-dark);

    /* Module aliases */
    --dl-accent: var(--dash-accent);
    --dl-accent-2: var(--dash-accent-2);
    --dl-accent-3: var(--dash-accent-3);

    --pl-accent: var(--dash-accent-2);
    --pl-accent-2: var(--dash-accent);

    --ytm-accent: var(--dash-accent);
    --ytm-accent-light: var(--dash-accent-light);
    --ytm-accent-pink: var(--dash-accent-2);
    --ytm-accent-purple: var(--dash-accent-2);
    --ytm-accent-cyan: var(--dash-accent-2-light);

    /* Now-playing screen — visualizer and artwork */
    --visualizer-bar-color: var(--dash-accent);
    --visualizer-bar-color-alt: var(--dash-accent-2);
    --artwork-size: min(70vh, 480px);
    --artwork-glow-blur: 60px;
}

[data-bs-theme="dark"] {
    /* True neutral near-black (was rgba(30,30,46) — a violet-tinted
       "Catppuccin" dark that's become its own generic tell). #121212
       is the industry-standard video-canvas black: neutral at any
       brightness, so thumbnails and footage render true. */
    --dash-bg-body: #121212;
    --dash-text-primary: #F4F4F5;
    --dash-text-secondary: #B4B4BC;
    --dash-text-muted: #7A7A82;

    --dash-card-bg: rgba(26, 26, 26, 0.65);
    --dash-card-border: rgba(255, 255, 255, 0.06);
    --dash-card-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 16px rgba(0, 0, 0, 0.15);
    --dash-card-shadow-hover: 0 4px 12px rgba(0, 0, 0, 0.2), 0 12px 28px rgba(0, 0, 0, 0.25);

    --shadow-crisp-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0, 0, 0, 0.2);
    --shadow-crisp-md: 0 2px 4px rgba(0, 0, 0, 0.4), 0 4px 8px rgba(0, 0, 0, 0.3);

    --player-progress-track: rgba(255, 255, 255, 0.15);
    --player-buffered: rgba(255, 255, 255, 0.3);
    --ad-free-badge-bg: rgba(31, 158, 150, 0.16);
    --ad-free-badge-text: var(--dash-accent-2-light);
}

/* ===================================================================
   Typography — this is where "premium" is actually judged more than
   color. Two families, one job each: Manrope's geometric, slightly
   tighter shapes read confident at display size (titles, hero,
   playlist names); Inter stays for anything read at length or at
   small size (body copy, metadata, timestamps) because it's built
   for that and Manrope isn't.
   =================================================================== */

:root {
    --font-display: 'Manrope', 'Inter', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Modular scale, ~1.25 ratio. Every size on this list should be
       used somewhere — an unused step is a sign the scale is
       decorative rather than a real system. */
    --text-xs: 0.75rem;    /* 12px — metadata, timestamps, badges */
    --text-sm: 0.875rem;   /* 14px — secondary UI text, captions */
    --text-base: 1rem;     /* 16px — body copy */
    --text-md: 1.125rem;   /* 18px — card titles */
    --text-lg: 1.25rem;    /* 20px — section headers */
    --text-xl: 1.5rem;     /* 24px — page titles */
    --text-2xl: 1.875rem;  /* 30px — dashboard heading */
    --text-3xl: 2.25rem;   /* 36px — empty-state / onboarding display */

    --leading-tight: 1.2;    /* headings */
    --leading-snug: 1.4;     /* card titles, buttons */
    --leading-normal: 1.6;   /* body copy, descriptions */

    --font-regular: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    --font-extrabold: 800;   /* Manrope display only — never on body */

    /* Tight tracking on headings is the single fastest way to make
       type feel considered rather than default. Wide tracking on
       small uppercase labels (badges, "1080p", "NO ADS") keeps them
       legible instead of cramped. Never mix the two directions. */
    --tracking-tight: -0.02em;
    --tracking-normal: 0;
    --tracking-wide: 0.04em;
}

/* Ready-to-use type roles so headings stop inheriting default weight/
   tracking by accident — that inconsistency is what usually gives
   away an unfinished type system faster than the font choice itself. */
.text-display   { font: var(--font-extrabold) var(--text-3xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.text-h1        { font: var(--font-bold) var(--text-2xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.text-h2        { font: var(--font-semibold) var(--text-xl)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); }
.text-card-title{ font: var(--font-semibold) var(--text-md)/var(--leading-snug) var(--font-display); }
.text-body      { font: var(--font-regular) var(--text-base)/var(--leading-normal) var(--font-body); }
.text-caption   { font: var(--font-medium) var(--text-xs)/var(--leading-snug) var(--font-body); color: var(--dash-text-muted); }
.text-label-tag { font: var(--font-semibold) var(--text-xs)/1 var(--font-body); letter-spacing: var(--tracking-wide); text-transform: uppercase; }

body {
    font-family: var(--font-body);
}

/* Apply display font to headings by default */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.dash-welcome h3,
.sidebar-brand,
.app-page-title,
.top-navbar h5,
.stat-value {
    font-family: var(--font-display) !important;
    letter-spacing: var(--tracking-tight);
}

/* ===================================================================
   Spacing — 4px base grid. Cramped or inconsistent padding is the
   fastest way to make a UI feel cheap regardless of its colors, and
   an ad-hoc mix of 10px/14px/18px paddings is the usual cause. Every
   margin/padding/gap in the app should resolve to one of these.
   =================================================================== */
:root {
    --space-1: 0.25rem;   /* 4px  — icon-to-label gaps */
    --space-2: 0.5rem;    /* 8px  — tight inline gaps */
    --space-3: 0.75rem;   /* 12px — chip/badge padding */
    --space-4: 1rem;      /* 16px — default card padding */
    --space-5: 1.25rem;   /* 20px */
    --space-6: 1.5rem;    /* 24px — section gaps */
    --space-8: 2rem;      /* 32px — between major blocks */
    --space-10: 2.5rem;   /* 40px */
    --space-12: 3rem;     /* 48px — page-level top/bottom padding */
    --space-16: 4rem;     /* 64px — hero/empty-state breathing room */
}

/* ===================================================================
   Motion — a progress bar or download ring that snaps instead of
   eases reads unfinished no matter how good the colors underneath
   are. A custom curve (not the browser default linear/ease) is what
   separates "animated" from "considered."
   =================================================================== */
:root {
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);  /* general UI transitions */
    --ease-out: cubic-bezier(0, 0, 0.2, 1);          /* things entering/expanding */
    --ease-in: cubic-bezier(0.4, 0, 1, 1);           /* things leaving/collapsing */

    --duration-fast: 120ms;   /* hover states, toggles */
    --duration-base: 200ms;   /* progress bar fill, panel expand */
    --duration-slow: 320ms;   /* modal/sheet transitions */
}

.player-progress-fill,
.download-ring {
    transition: width var(--duration-base) var(--ease-standard),
                stroke-dashoffset var(--duration-base) var(--ease-standard);
}

/* ===================================================================
   Icons — not a color/spacing token, but worth stating explicitly:
   pick ONE icon set (Lucide is a solid fit here) at ONE stroke width
   and never mix in a second set for "just this one icon." Mixed
   outline/filled or mismatched stroke weights undercuts a clean
   palette faster than almost anything else in the UI.
   =================================================================== */
:root {
    --icon-stroke-width: 1.75px;
    --icon-size-sm: 16px;
    --icon-size-md: 20px;
    --icon-size-lg: 24px;
}

/* ===================================================================
   Component fixes — the two things still leaking the old indigo/
   rainbow palette after the last pass: the primary CTA button and
   the four stat cards. Both should read as ONE system, not four
   different tinted cards or a leftover purple button.
   =================================================================== */

/* Primary CTA (Fetch button, and any equivalent "go" action) —
   crisp tight shadow, no blurry glow. */
.btn-primary,
.btn-fetch,
.dash-url-fetch-btn {
    background: linear-gradient(135deg, var(--dash-accent) 0%, var(--dash-accent-dark) 100%) !important;
    color: #FFFFFF !important;
    border: none !important;
    box-shadow: var(--shadow-crisp-sm) !important;
    transition: all var(--duration-base) var(--ease-standard) !important;
}

.btn-primary:hover,
.btn-fetch:hover,
.dash-url-fetch-btn:hover:not(:disabled) {
    background: var(--dash-accent-hover) !important;
    transform: none !important;
    box-shadow: var(--shadow-crisp-md) !important;
}

.btn-primary:active,
.btn-fetch:active,
.dash-url-fetch-btn:active:not(:disabled) {
    background: var(--dash-accent-active) !important;
    transform: translateY(0);
}

.btn-primary:focus-visible,
.btn-fetch:focus-visible,
.dash-url-fetch-btn:focus-visible {
    box-shadow: var(--focus-ring) !important;
    outline: none !important;
}

.btn-primary:disabled,
.btn-fetch:disabled,
.dash-url-fetch-btn:disabled {
    opacity: var(--disabled-opacity) !important;
    pointer-events: none !important;
}

/* Paste-URL dropzone — was a lavender dashed border, now neutral so
   it doesn't quietly reintroduce indigo next to the orange CTA. */
.dropzone-url,
.dash-url-inner {
    border: 1px dashed var(--dash-card-border);
    background: var(--dash-card-bg);
}

/* ===================================================================
   Stat card v2 — Ultra-Modern Compact Glass Tiles (Horizontal Layout)
   =================================================================== */
.stat-card-v2 {
    background: var(--dash-card-bg) !important;
    border: 1px solid var(--dash-card-border) !important;
    box-shadow: var(--shadow-crisp-sm) !important;
    border-radius: 14px;
    padding: 0.85rem 1.1rem;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 0.85rem;
    min-height: 72px;
    transition: box-shadow var(--duration-base, 200ms) var(--ease-standard),
                background-color var(--duration-base, 200ms) var(--ease-standard),
                border-color var(--duration-base, 200ms) var(--ease-standard);
    cursor: default;
}

.stat-card-v2::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    border-top-left-radius: 14px;
    border-bottom-left-radius: 14px;
    transition: width var(--duration-fast, 120ms) var(--ease-standard);
}

.stat-card-v2:hover {
    background: var(--surface-2) !important;
    box-shadow: var(--shadow-crisp-md) !important;
    transform: none !important;
}

.stat-card-v2:hover::before {
    width: 4px;
}

/* Card 3px Left Accent Bars */
.stat-card-v2.downloads::before { background: var(--dash-accent); }
.stat-card-v2.downloads:hover { border-color: rgba(224, 121, 60, 0.3) !important; }

.stat-card-v2.playlists::before { background: var(--dash-accent-2); }
.stat-card-v2.playlists:hover { border-color: rgba(31, 158, 150, 0.3) !important; }

.stat-card-v2.videos::before { background: rgba(0, 0, 0, 0.2); }
[data-bs-theme="dark"] .stat-card-v2.videos::before { background: rgba(255, 255, 255, 0.25); }
.stat-card-v2.videos:hover { border-color: rgba(255, 255, 255, 0.15) !important; }

.stat-card-v2.is-active::before { background: var(--dash-success); }
.stat-card-v2.is-active:hover { border-color: rgba(47, 174, 104, 0.3) !important; }

/* Stat Icons v2 — 40x40px rounded capsule */
.stat-icon-v2 {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    flex-shrink: 0;
    position: relative;
    box-shadow: none !important;
}

.stat-icon-v2.downloads {
    background: rgba(224, 121, 60, 0.12);
    border: 1.5px solid rgba(224, 121, 60, 0.35);
    color: var(--dash-accent);
}

.stat-icon-v2.playlists {
    background: rgba(31, 158, 150, 0.12);
    border: 1.5px solid rgba(31, 158, 150, 0.35);
    color: var(--dash-accent-2);
}

.stat-icon-v2.videos {
    background: rgba(0, 0, 0, 0.04);
    border: 1.5px solid rgba(0, 0, 0, 0.12);
    color: var(--dash-text-secondary);
}

[data-bs-theme="dark"] .stat-icon-v2.videos {
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    color: var(--dash-text-secondary);
}

.stat-icon-v2.active {
    background: rgba(47, 174, 104, 0.14);
    border: 1.5px solid rgba(47, 174, 104, 0.35);
    color: var(--dash-success);
}

.stat-card-v2.is-active.has-active .stat-icon-v2.active::after {
    content: "";
    position: absolute;
    inset: -3px;
    border-radius: inherit;
    border: 2px solid var(--dash-success);
    opacity: 0.8;
    animation: pulse-ring 2s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    pointer-events: none;
}

.stat-icon-v2 .spin-icon {
    display: inline-block;
    animation: statSpin 2.5s linear infinite;
}

@keyframes statSpin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes pulse-ring {
    0% { transform: scale(0.95); opacity: 0.8; }
    50% { transform: scale(1.15); opacity: 0; }
    100% { transform: scale(1.15); opacity: 0; }
}

/* Stat Middle Content (Value + Label) */
.stat-card-v2 .stat-content {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.stat-card-v2 .stat-value {
    font-family: var(--font-display) !important;
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.05;
    letter-spacing: -0.025em;
    font-variant-numeric: tabular-nums;
    color: var(--dash-text-primary);
    margin: 0;
}

.stat-card-v2.is-active.has-active .stat-value {
    color: var(--dash-success);
}

.stat-card-v2 .stat-label {
    font-family: var(--font-body);
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dash-text-muted);
    line-height: 1.1;
    margin-top: 0.2rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Stat Pill / Badge on Right */
.stat-card-v2 .stat-badge-pill {
    margin-left: auto;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.22rem 0.55rem;
    border-radius: 20px;
    font-size: 0.68rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}

.stat-badge-pill.trend-positive {
    background: rgba(47, 174, 104, 0.12);
    border: 1px solid rgba(47, 174, 104, 0.25);
    color: var(--dash-success);
}

.stat-badge-pill.status-active {
    background: rgba(47, 174, 104, 0.14);
    border: 1px solid rgba(47, 174, 104, 0.35);
    color: var(--dash-success);
}

.stat-badge-pill.status-idle {
    background: rgba(122, 122, 130, 0.1);
    border: 1px solid rgba(122, 122, 130, 0.15);
    color: var(--dash-text-muted);
    font-weight: 500;
}

.stat-badge-pill.status-neutral {
    background: rgba(122, 122, 130, 0.08);
    border: 1px solid rgba(122, 122, 130, 0.15);
    color: var(--dash-text-muted);
    font-weight: 500;
}

.stat-badge-pill .pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--dash-success);
    display: inline-block;
    animation: statLivePulse 1.5s ease-in-out infinite;
}

@keyframes statLivePulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.35; transform: scale(0.75); }
}

/* ===================================================================
   Interactive states — a "premium" palette that only defines resting
   colors is half a system. Every clickable element needs a defined
   hover, active/pressed, focus, and disabled state, or the browser
   default (or nothing) shows through and breaks the illusion.
   =================================================================== */
:root {
    /* Hover = +8% lighter (light mode) / brighter, used on buttons,
       chips, and any filled interactive surface. */
    --dash-accent-hover: #ED8A52;
    --dash-accent-active: #C96A32;   /* pressed = darker, gives tactile feedback */
    --dash-accent-2-hover: #26B0A7;
    --dash-accent-2-active: #18827B;

    /* Elevation — 3 surface levels instead of one flat card color.
       Page → card → raised (modal/dropdown/hover-lifted card). Using
       only one card color everywhere is why interfaces can feel flat
       despite good colors; a slight step between levels reads depth. */
    --surface-0: var(--dash-bg-body);
    --surface-1: var(--dash-card-bg);
    --surface-2: #FFFFFF;   /* modals, dropdowns, hovered card */

    /* Focus ring — required for accessibility AND it's a visible
       "quality" signal. Orange-tinted so it matches the brand instead
       of the browser's default blue outline. */
    --focus-ring: 0 0 0 3px rgba(224, 121, 60, 0.35);
    --focus-ring-error: 0 0 0 3px rgba(229, 72, 77, 0.3);

    /* Disabled — one rule everywhere, never a bespoke gray per
       component. */
    --disabled-opacity: 0.45;
    --disabled-bg: rgba(0, 0, 0, 0.04);

    /* Row / list interactive states (download list, playlist list) */
    --row-hover-bg: rgba(0, 0, 0, 0.03);
    --row-selected-bg: rgba(224, 121, 60, 0.08);
    --row-selected-border: var(--dash-accent);

    /* Inputs */
    --input-border: var(--dash-card-border);
    --input-border-focus: var(--dash-accent);
    --input-border-error: var(--dash-danger);

    /* Toggle / switch (e.g. dark mode, autoplay) */
    --toggle-on-bg: var(--dash-accent);
    --toggle-off-bg: rgba(0, 0, 0, 0.15);
    --toggle-thumb: #FFFFFF;

    /* Overlay (modal backdrop, media lightbox) */
    --overlay-bg: rgba(18, 18, 18, 0.5);

    /* Tooltip — a dark chip regardless of theme is the standard
       convention and reads more intentional than theme-matched. */
    --tooltip-bg: #18181B;
    --tooltip-text: #F4F4F5;

    /* Skeleton / shimmer loading state for thumbnails while metadata
       fetches — avoids a blank flash that reads unfinished. */
    --skeleton-base: #E4E4E7;
    --skeleton-shimmer: #F4F4F5;

    /* Selection (text highlight) */
    --selection-bg: rgba(224, 121, 60, 0.25);

    /* Site-wide component tokens */
    --avatar-default-bg: linear-gradient(135deg, var(--dash-accent), var(--dash-accent-dark));
    --role-admin-bg: rgba(31, 158, 150, 0.12);
    --role-admin-text: var(--dash-accent-2);
    --role-user-bg: rgba(0, 0, 0, 0.05);
    --role-user-text: var(--dash-text-secondary);
    --dash-bg-input: rgba(0, 0, 0, 0.03);
    --view-toggle-active-bg: var(--bs-body-bg, #FFFFFF);
    --view-toggle-active-color: var(--dash-accent);
    --tab-active-bg: linear-gradient(135deg, var(--dash-accent), var(--dash-accent-dark));
    --tab-active-color: #FFFFFF;

    /* The ONE sanctioned place both accents mix: a Pro/Premium badge.
       Reserve this exact gradient for that single use — if it starts
       showing up elsewhere, the two-accent system has broken down. */
    --gradient-premium: linear-gradient(135deg, var(--dash-accent) 0%, var(--dash-accent-2) 100%);
}

[data-bs-theme="dark"] {
    --dash-accent-hover: #ED8A52;
    --dash-accent-active: #F3B27C;
    --dash-accent-2-hover: #34BDB3;
    --dash-accent-2-active: #6FCFC8;

    --surface-2: #1F1F1F;

    --disabled-bg: rgba(255, 255, 255, 0.06);
    --row-hover-bg: rgba(255, 255, 255, 0.04);
    --row-selected-bg: rgba(224, 121, 60, 0.14);

    --toggle-off-bg: rgba(255, 255, 255, 0.18);
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --skeleton-base: #232323;
    --skeleton-shimmer: #2C2C2C;

    --role-user-bg: rgba(255, 255, 255, 0.06);
    --role-user-text: var(--dash-text-secondary);
    --dash-bg-input: rgba(255, 255, 255, 0.04);
    --view-toggle-active-bg: rgba(255, 255, 255, 0.08);
}

/* Component state rules — reference implementation for the states
   above. Selectors are illustrative; map them to actual component
   classes during implementation. */
.btn-primary:hover, .btn-fetch:hover   { background: var(--dash-accent-hover) !important; }
.btn-primary:active, .btn-fetch:active { background: var(--dash-accent-active) !important; }
.btn-primary:focus-visible, .btn-fetch:focus-visible { box-shadow: var(--focus-ring) !important; outline: none; }
.btn-primary:disabled, .btn-fetch:disabled { opacity: var(--disabled-opacity) !important; pointer-events: none; }

.list-row:hover     { background: var(--row-hover-bg); }
.list-row.selected  { background: var(--row-selected-bg); border-left: 2px solid var(--row-selected-border); }

.input-field        { border: 1px solid var(--input-border); }
.input-field:focus  { border-color: var(--input-border-focus); box-shadow: var(--focus-ring); outline: none; }
.input-field.error  { border-color: var(--input-border-error); box-shadow: var(--focus-ring-error); }

.toggle-switch[data-on="true"]  { background: var(--toggle-on-bg); }
.toggle-switch[data-on="false"] { background: var(--toggle-off-bg); }

.skeleton {
    background: linear-gradient(90deg, var(--skeleton-base) 25%, var(--skeleton-shimmer) 50%, var(--skeleton-base) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.4s var(--ease-standard) infinite;
}
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

::selection { background: var(--selection-bg); }

/* ===================================================================
/* ===================================================================
   Branded SweetAlert2 Dialogs (Teal & Orange Design Language)
   =================================================================== */
.swal2-container.swal2-backdrop-show {
    background: rgba(18, 18, 18, 0.65) !important;
    backdrop-filter: blur(6px) !important;
    -webkit-backdrop-filter: blur(6px) !important;
}

.swal2-popup.swal-custom-popup,
.swal2-popup {
    background: var(--surface-2, #FFFFFF) !important;
    border: 1px solid var(--dash-card-border, rgba(0, 0, 0, 0.08)) !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.2), 0 4px 12px rgba(0, 0, 0, 0.06) !important;
    padding: 24px 24px 28px !important;
    color: var(--dash-text-primary, #18181B) !important;
    max-width: 440px !important;
    width: calc(100vw - 32px) !important;
}

[data-bs-theme="dark"] .swal2-popup.swal-custom-popup,
[data-bs-theme="dark"] .swal2-popup {
    background: var(--surface-2, #1F1F1F) !important;
    border-color: rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 24px 54px rgba(0, 0, 0, 0.6), 0 6px 16px rgba(0, 0, 0, 0.35) !important;
    color: var(--dash-text-primary, #F4F4F5) !important;
}

.swal2-title,
.swal-custom-title {
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: var(--dash-text-primary, #18181B) !important;
    letter-spacing: var(--tracking-tight, -0.02em) !important;
    padding: 6px 0 0 !important;
    margin-bottom: 4px !important;
}

[data-bs-theme="dark"] .swal2-title,
[data-bs-theme="dark"] .swal-custom-title {
    color: var(--dash-text-primary, #F4F4F5) !important;
}

.swal2-html-container,
.swal-custom-html {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    color: var(--dash-text-secondary, #52525B) !important;
    line-height: 1.55 !important;
    margin: 8px 0 0 !important;
    padding: 0 8px !important;
}

[data-bs-theme="dark"] .swal2-html-container,
[data-bs-theme="dark"] .swal-custom-html {
    color: var(--dash-text-secondary, #B4B4BC) !important;
}

/* ── Branded SweetAlert Icons ── */
.swal2-icon {
    width: 58px !important;
    height: 58px !important;
    margin: 8px auto 12px !important;
    border-width: 2.5px !important;
}

/* Warning Icon: Cinema Orange / Amber tint */
.swal2-icon.swal2-warning {
    border-color: rgba(224, 121, 60, 0.45) !important;
    color: var(--dash-accent, #E0793C) !important;
    background: rgba(224, 121, 60, 0.08) !important;
}

.swal2-icon.swal2-warning .swal2-icon-content {
    color: var(--dash-accent, #E0793C) !important;
    font-family: var(--font-display, "Manrope", sans-serif) !important;
    font-weight: 800 !important;
}

/* Error / Danger Icon: Red tint */
.swal2-icon.swal2-error {
    border-color: rgba(229, 72, 77, 0.45) !important;
    color: var(--dash-danger, #E5484D) !important;
    background: rgba(229, 72, 77, 0.08) !important;
}

.swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
    background-color: var(--dash-danger, #E5484D) !important;
}

/* Question / Info Icon: Cinema Teal tint */
.swal2-icon.swal2-question,
.swal2-icon.swal2-info {
    border-color: rgba(31, 158, 150, 0.45) !important;
    color: var(--dash-accent-2, #1F9E96) !important;
    background: rgba(31, 158, 150, 0.08) !important;
}

.swal2-icon.swal2-question .swal2-icon-content,
.swal2-icon.swal2-info .swal2-icon-content {
    color: var(--dash-accent-2, #1F9E96) !important;
    font-family: var(--font-display, "Manrope", sans-serif) !important;
    font-weight: 800 !important;
}

/* Success Icon: Emerald tint */
.swal2-icon.swal2-success {
    border-color: rgba(47, 174, 104, 0.45) !important;
    color: var(--dash-success, #2FAE68) !important;
    background: rgba(47, 174, 104, 0.08) !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'] {
    background-color: var(--dash-success, #2FAE68) !important;
}

.swal2-icon.swal2-success .swal2-success-ring {
    border-color: rgba(47, 174, 104, 0.3) !important;
}

/* ── Actions & Buttons ── */
.swal2-actions {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    margin-top: 20px !important;
    width: 100% !important;
}

/* Primary Confirm (Orange Gradient) */
.swal2-confirm.swal-primary-btn,
.swal2-confirm.swal-confirm-btn,
.swal2-confirm {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    background: var(--gradient-primary, linear-gradient(135deg, var(--dash-accent, #E0793C), var(--dash-accent-dark, #B85F2C))) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 20px !important;
    box-shadow: 0 4px 14px rgba(224, 121, 60, 0.25) !important;
    transition: all var(--duration-fast, 120ms) var(--ease-standard) !important;
    cursor: pointer !important;
}

.swal2-confirm.swal-primary-btn:hover,
.swal2-confirm.swal-confirm-btn:hover,
.swal2-confirm:hover {
    background: linear-gradient(135deg, var(--dash-accent-hover, #ED8A52), var(--dash-accent, #E0793C)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(224, 121, 60, 0.35) !important;
}

/* Danger / Destructive Confirm Button */
.swal2-confirm.swal-danger-btn,
.swal2-confirm.swal-warning-btn {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #FFFFFF !important;
    background: linear-gradient(135deg, var(--dash-danger, #E5484D), #C4363B) !important;
    border: none !important;
    border-radius: 10px !important;
    padding: 9px 20px !important;
    box-shadow: 0 4px 14px rgba(229, 72, 77, 0.25) !important;
    transition: all var(--duration-fast, 120ms) var(--ease-standard) !important;
    cursor: pointer !important;
}

.swal2-confirm.swal-danger-btn:hover,
.swal2-confirm.swal-warning-btn:hover {
    background: linear-gradient(135deg, #F0585D, var(--dash-danger, #E5484D)) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 18px rgba(229, 72, 77, 0.35) !important;
}

/* Cancel Button */
.swal2-cancel.swal-cancel-btn,
.swal2-cancel {
    font-family: var(--font-body, 'Inter', sans-serif) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    background: var(--surface-1, #F4F4F5) !important;
    color: var(--dash-text-secondary, #52525B) !important;
    border: 1px solid var(--dash-card-border, rgba(0, 0, 0, 0.1)) !important;
    border-radius: 10px !important;
    padding: 9px 18px !important;
    box-shadow: var(--shadow-crisp-sm) !important;
    transition: all var(--duration-fast, 120ms) var(--ease-standard) !important;
    cursor: pointer !important;
}

[data-bs-theme="dark"] .swal2-cancel.swal-cancel-btn,
[data-bs-theme="dark"] .swal2-cancel {
    background: #27272A !important;
    color: var(--dash-text-secondary, #B4B4BC) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.swal2-cancel.swal-cancel-btn:hover,
.swal2-cancel:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: var(--dash-text-primary, #18181B) !important;
    transform: translateY(-1px) !important;
}

[data-bs-theme="dark"] .swal2-cancel.swal-cancel-btn:hover,
[data-bs-theme="dark"] .swal2-cancel:hover {
    background: #323236 !important;
    color: #FFFFFF !important;
}

/* ── Sidebar Notification Action Badge (GEMINI.md Teal & Orange) ── */
.sidebar-badge {
    min-width: 19px !important;
    height: 19px !important;
    padding: 0 5px !important;
    border-radius: 99px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--font-display, 'Manrope', sans-serif) !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    margin-left: auto !important;
    background: rgba(224, 121, 60, 0.12) !important;
    color: var(--dash-accent, #E0793C) !important;
    border: 1px solid rgba(224, 121, 60, 0.28) !important;
    flex-shrink: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    transition: all var(--duration-fast, 120ms) var(--ease-standard, cubic-bezier(0.4, 0, 0.2, 1)) !important;
}

[data-bs-theme="dark"] .sidebar-badge {
    background: rgba(224, 121, 60, 0.20) !important;
    border-color: rgba(224, 121, 60, 0.38) !important;
    color: var(--dash-accent-light, #F3B27C) !important;
}

.nav-link.active .sidebar-badge {
    background: var(--dash-accent, #E0793C) !important;
    color: #FFFFFF !important;
    border-color: var(--dash-accent, #E0793C) !important;
    box-shadow: 0 1px 3px rgba(224, 121, 60, 0.3) !important;
}

.sidebar.collapsed .sidebar-badge {
    display: none !important;
}