/* ═══════════════════════════════════════════════════════════════════════════
   STANDARD DESIGN SYSTEM v2
   Scoped via body.ds2 — coexists with existing CSS, zero risk to old pages.

   Three-tier token system:
   Tier 1: Primitives (raw color/spacing values on :root)
   Tier 2: Semantic (purpose-based tokens on body.ds2)
   Tier 3: Component (specific component overrides)

   Specificity strategy: body.ds2 defines NEW semantic variables (--bg-page, --text-primary)
   that reference --ds2- prefixed primitives. No variable name collision with existing :root
   variables — the PoC concern from the plan is resolved by namespacing, not override semantics.

   Old pages: no body.ds2 class → these styles don't apply.
   New pages: add body.ds2 → new design system activates.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ds2-reset is declared first (lowest priority) for future CSS reset rules */
@layer ds2-reset, ds2-tokens, ds2-components, ds2-utilities;

/* ═══════════════════════════════════════════════════════════════════════════
   TIER 1: PRIMITIVES (raw values, global scope)
   These extend :root without conflicting — unique --ds2- prefix.
   ═══════════════════════════════════════════════════════════════════════════ */

@layer ds2-tokens {

:root {
    /* Zinc palette (dark mode base) */
    --ds2-zinc-50: #fafafa;
    --ds2-zinc-100: #f4f4f5;
    --ds2-zinc-200: #e4e4e7;
    --ds2-zinc-300: #d4d4d8;
    --ds2-zinc-400: #a1a1aa;
    --ds2-zinc-500: #71717a;
    --ds2-zinc-600: #52525b;
    --ds2-zinc-700: #3f3f46;
    --ds2-zinc-800: #27272a;
    --ds2-zinc-900: #18181b;
    --ds2-zinc-950: #09090b;

    /* Amber palette (primary action) */
    /* Note: --ds2-amber-* values use orange-range hex (#f97316, #ea580c) per design spec,
       intentionally deviating from Tailwind's amber palette (#f59e0b) */
    --ds2-amber-50: #fffbeb;
    --ds2-amber-100: #fef3c7;
    --ds2-amber-200: #fde68a;
    --ds2-amber-300: #fcd34d;
    --ds2-amber-400: #fbbf24;
    --ds2-amber-500: #f97316;
    --ds2-amber-600: #ea580c;
    --ds2-amber-700: #c2410c;

    /* Emerald palette (success/positive) */
    --ds2-emerald-400: #34d399;
    --ds2-emerald-500: #10b981;
    --ds2-emerald-600: #059669;

    /* Red palette (error/destructive) */
    --ds2-red-400: #f87171;
    --ds2-red-500: #ef4444;
    --ds2-red-600: #dc2626;

    /* Blue palette (info/links) */
    --ds2-blue-400: #60a5fa;
    --ds2-blue-500: #3b82f6;

    /* Yellow palette (warning) */
    --ds2-yellow-400: #facc15;
    --ds2-yellow-500: #eab308;

    /* Purple palette (reviewer/creator) */
    --ds2-purple-400: #c084fc;
    --ds2-purple-500: #a855f7;

    /* Indigo palette (interactive/primary) */
    --ds2-indigo-400: #818cf8;
    --ds2-indigo-500: #6264ee;
    --ds2-indigo-600: #4f46e5;

    /* Spacing scale (4px base) */
    --ds2-space-0: 0;
    --ds2-space-1: 0.25rem;   /* 4px */
    --ds2-space-2: 0.5rem;    /* 8px */
    --ds2-space-3: 0.75rem;   /* 12px */
    --ds2-space-4: 1rem;      /* 16px */
    --ds2-space-5: 1.25rem;   /* 20px */
    --ds2-space-6: 1.5rem;    /* 24px */
    --ds2-space-8: 2rem;      /* 32px */
    --ds2-space-10: 2.5rem;   /* 40px */
    --ds2-space-12: 3rem;     /* 48px */
    --ds2-space-16: 4rem;     /* 64px */

    /* Border radius */
    --ds2-radius-sm: 0.25rem;
    --ds2-radius-md: 0.5rem;
    --ds2-radius-lg: 0.75rem;
    --ds2-radius-xl: 1rem;
    --ds2-radius-full: 9999px;

    /* Font families — Inter for body (data-heavy SaaS standard), Plus Jakarta Sans for headings */
    --ds2-font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
    --ds2-font-body: 'Inter', system-ui, -apple-system, sans-serif;
    --ds2-font-mono: 'Geist Mono', ui-monospace, monospace;

    /* Font sizes */
    --ds2-text-xs: 0.75rem;
    --ds2-text-sm: 0.875rem;
    --ds2-text-base: 1rem;
    --ds2-text-lg: 1.125rem;
    --ds2-text-xl: 1.25rem;
    --ds2-text-2xl: 1.5rem;
    --ds2-text-3xl: 1.875rem;

    /* Shadows */
    --ds2-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --ds2-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.3);
    --ds2-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.3);

    /* Transitions */
    --ds2-transition-fast: 150ms ease;
    --ds2-transition-base: 200ms ease;
    --ds2-transition-slow: 300ms ease;
}


/* ═══════════════════════════════════════════════════════════════════════════
   TIER 2: SEMANTIC TOKENS (purpose-based, scoped to body.ds2)

   DUAL-ACCENT SYSTEM
   ──────────────────
   Indigo (#6264ee) — Interactive elements:
     Buttons, links, focus rings, active tabs, sidebar active state.
     Tokens: --interactive-primary, --color-primary
     Components: .ds2-btn-primary, .settings-tab.active, .sidebar-link.active

   Amber (#f97316) — Brand accent / warmth:
     Featured highlights, hero CTAs, wizard progress, session indicators,
     marketing accents, brand touchpoints, prominent action buttons.
     Tokens: --brand-accent, --brand-accent-hover, --brand-accent-subtle, --brand-accent-glow
     Components: .ds2-btn-brand, .c-badge-brand, .c-card-featured, .wizard-indicator

   Revenue (#f59e0b) — Monetary displays:
     Earnings, payouts, pricing, financial metrics.
     Tokens: --color-revenue, --color-revenue-bg

   Legacy alias: --ember in style.css maps to the same #f97316 amber.
   On DS2 pages, always prefer --brand-accent over --ember.
   ═══════════════════════════════════════════════════════════════════════════ */

body.ds2 {
    /* Page backgrounds — 4-level elevation system for visual depth
       Each step is 14+ hex-value apart for VISIBLE contrast on dark screens.
       Tested: #1a1a1e card on #0c0c0e page = clearly distinct rectangle. */
    --bg-page: #0c0c0e;
    --bg-surface: #1a1a1e;
    --bg-surface-raised: #222226;
    --bg-surface-overlay: #2a2a2e;

    /* Section alternation for marketing pages */
    --bg-section-alt: #121214;

    /* Nested surface — role switcher, search bar, segmented controls (v3) */
    --bg-nested: #111113;

    /* Shadows for surface elevation — ring borders use solid hex, not rgba.
       Shadow spread is supplemental; borders + surface color do the real hierarchy work. */
    --shadow-card: 0 1px 2px rgba(0,0,0,0.5), 0 2px 8px rgba(0,0,0,0.3), 0 0 0 1px #1e1e22;
    --shadow-card-hover: 0 4px 16px rgba(0,0,0,0.6), 0 8px 32px rgba(0,0,0,0.3), 0 0 0 1px #2a2a2e;

    /* 4-level elevation scale */
    --shadow-elevation-1: 0 1px 3px rgba(0,0,0,0.4), 0 0 0 1px #1e1e22;
    --shadow-elevation-2: 0 2px 8px rgba(0,0,0,0.5), 0 4px 16px rgba(0,0,0,0.25), 0 0 0 1px #1e1e22;
    --shadow-elevation-3: 0 8px 24px rgba(0,0,0,0.6), 0 16px 48px rgba(0,0,0,0.3), 0 0 0 1px #2a2a2e;
    --shadow-elevation-4: 0 16px 48px rgba(0,0,0,0.7), 0 32px 80px rgba(0,0,0,0.35), 0 0 0 1px #2a2a2e;

    /* Text hierarchy — WCAG AA compliant on all surface backgrounds.
       Contrast on #0c0c0e: primary 16.8:1, secondary ~5.0:1, muted ~4.9:1, disabled 2.4:1.
       --text-disabled is intentionally below AA — only for truly disabled/decorative elements. */
    --text-primary: #ededf0;
    --text-secondary: #8b8b96;
    --text-muted: #858590;
    --text-disabled: #3d3d44;
    --text-inverse: var(--ds2-zinc-950);

    /* Borders — v3 subtler scale (shifted down one step).
       Solid hex values, NOT rgba. Tested on all surface elevations. */
    --border-default: #1e1e22;
    --border-subtle: #1a1a1e;
    --border-strong: #2a2a2e;

    /* Interactive elements — INDIGO for buttons, links, focus rings.
       #6264ee gives white text 4.53:1 contrast (AA compliant). */
    --interactive-primary: #6264ee;
    --interactive-primary-hover: #5558e6;
    --interactive-primary-text: #ffffff;

    /* Link text on dark backgrounds — lighter indigo for AA contrast on surfaces */
    --interactive-link: #818cf8;

    /* Brand accent — warm amber for visual warmth and personality.
       Used for: "Live Now" badges, featured highlights, hero CTAs,
       session indicators, marketing accents, brand touchpoints.
       Distinct from --interactive-primary (indigo) which handles buttons/links. */
    --brand-accent: #f97316;
    --brand-accent-hover: #ea580c;
    --brand-accent-subtle: rgba(249, 115, 22, 0.12);
    --brand-accent-glow: rgba(249, 115, 22, 0.3);
    --brand-accent-text: #ffffff;

    /* Semantic accent colors (multi-role system) */
    --color-primary: #6264ee;
    --color-primary-hover: #5558e6;
    --color-primary-bg: rgba(98, 100, 238, 0.12);
    --color-primary-text: #ffffff;
    --color-revenue: #f59e0b;
    --color-revenue-bg: rgba(245, 158, 11, 0.12);
    --color-success: #10b981;
    --color-success-bg: rgba(16, 185, 129, 0.12);
    --color-destructive: #ef4444;
    --color-destructive-bg: rgba(239, 68, 68, 0.12);
    --color-info: #3b82f6;
    --color-info-bg: rgba(59, 130, 246, 0.12);
    --color-warning: #eab308;
    --color-warning-bg: rgba(234, 179, 8, 0.12);
    --color-purple: #a855f7;
    --color-purple-bg: rgba(168, 85, 247, 0.12);

    /* Chart palette (v3 Recharts colors) */
    --chart-1: #6264ee;
    --chart-2: #10b981;
    --chart-3: #f59e0b;
    --chart-4: #3b82f6;
    --chart-5: #ef4444;

    /* Status colors */
    --status-success: var(--ds2-emerald-500);
    --status-error: var(--ds2-red-500);
    --status-warning: var(--ds2-yellow-500);
    --status-info: var(--ds2-blue-500);
    --status-live: var(--ds2-red-500);

    /* Legacy alias — referenced in live.html + live-session-v2.css */
    --color-warning-500: var(--ds2-yellow-500);

    /* Yellow alpha variants for warning borders/backgrounds (Sprint 16) */
    --status-warning-30: rgba(234, 179, 8, 0.3);   /* border emphasis */
    --status-warning-15: rgba(234, 179, 8, 0.15);  /* divider soft */
    --status-warning-04: rgba(234, 179, 8, 0.04);  /* background tint */

    /* Ambient glow for hero sections and featured elements */
    --glow-primary: radial-gradient(ellipse at 50% 0%, rgba(99,102,241,0.12) 0%, transparent 60%);

    /* Glass effect tokens */
    --glass-bg: rgba(255, 255, 255, 0.03);

    /* Subtle gradient overlay for cards */
    --card-gradient: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);

    /* Component defaults */
    --card-bg: var(--bg-surface);
    --card-border: var(--border-default);
    --card-radius: var(--ds2-radius-lg);
    --input-bg: #111113;
    --input-border: #1e1e22;
    --input-focus-ring: #6264ee;

    /* Focus ring — 2px page-color gap + 2px indigo ring for clear visibility */
    --focus-ring: 0 0 0 2px #0c0c0e, 0 0 0 4px #6264ee;

    /* Toast notification colors */
    --toast-success-bg: rgba(16, 185, 129, 0.15);
    --toast-success-border: #10b981;
    --toast-error-bg: rgba(239, 68, 68, 0.15);
    --toast-error-border: #ef4444;
    --toast-info-bg: rgba(59, 130, 246, 0.15);
    --toast-info-border: #3b82f6;

    /* Skeleton loading animation colors */
    --skeleton-base: #1a1a1e;
    --skeleton-shine: #222226;

    /* Line height scale — increased ~10% for dark mode readability */
    --leading-tight: 1.25;
    --leading-normal: 1.6;
    --leading-relaxed: 1.75;

    /* Typography */
    font-family: var(--ds2-font-body);
    color: var(--text-primary);
    background-color: var(--bg-page);
    line-height: var(--leading-normal);
}

} /* end @layer ds2-tokens */


/* ═══════════════════════════════════════════════════════════════════════════
   TIER 3: COMPONENT STYLES (scoped to body.ds2)
   ═══════════════════════════════════════════════════════════════════════════ */

@layer ds2-components {

/* ── Cards ──────────────────────────────────────────────────────────────── */
body.ds2 .ds2-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--ds2-space-5);
    box-shadow: var(--shadow-card);
}

body.ds2 .ds2-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--ds2-space-4);
}

body.ds2 .ds2-card-title {
    font-size: var(--ds2-text-lg);
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.01em;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
body.ds2 .ds2-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ds2-space-2);
    padding: var(--ds2-space-2) var(--ds2-space-4);
    font-size: var(--ds2-text-sm);
    font-weight: 500;
    border-radius: var(--ds2-radius-md);
    border: 1px solid transparent;
    cursor: pointer;
    transition: all var(--ds2-transition-fast);
    text-decoration: none;
    line-height: 1.5;
}

body.ds2 .ds2-btn-primary {
    background: var(--interactive-primary);
    color: var(--interactive-primary-text);
    border-color: var(--interactive-primary);
}

body.ds2 .ds2-btn-primary:hover {
    background: var(--interactive-primary-hover);
    border-color: var(--interactive-primary-hover);
}

body.ds2 .ds2-btn-secondary {
    background: transparent;
    color: var(--text-primary);
    border-color: var(--border-strong);
}

body.ds2 .ds2-btn-secondary:hover {
    background: var(--bg-surface-raised);
}

body.ds2 .ds2-btn-ghost {
    background: transparent;
    color: var(--text-secondary);
    border-color: transparent;
}

body.ds2 .ds2-btn-ghost:hover {
    color: var(--text-primary);
    background: var(--bg-surface);
}

body.ds2 .ds2-btn-brand {
    background: var(--brand-accent);
    color: var(--brand-accent-text);
    border-color: var(--brand-accent);
}

body.ds2 .ds2-btn-brand:hover {
    background: var(--brand-accent-hover);
    border-color: var(--brand-accent-hover);
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
body.ds2 .ds2-badge {
    display: inline-flex;
    align-items: center;
    padding: var(--ds2-space-1) var(--ds2-space-2);
    font-size: var(--ds2-text-xs);
    font-weight: 600;
    border-radius: var(--ds2-radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

body.ds2 .ds2-badge-live {
    background: var(--color-destructive-bg);
    color: var(--color-destructive);
    animation: ds2-pulse 2s ease-in-out infinite;
}

body.ds2 .ds2-badge-pro {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-muted);
}

body.ds2 .ds2-badge-success {
    background: rgba(16, 185, 129, 0.15);
    color: var(--ds2-emerald-400);
}

@keyframes ds2-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.6; }
}

/* ── Sidebar (v3: 220px, page-bg, border-right) ───────────────────────── */
body.ds2 .sidebar {
    width: 220px;
    background: var(--bg-page);
    border-right: 1px solid var(--border-default);
}

body.ds2 .sidebar-section-title {
    color: var(--text-disabled);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    padding: var(--ds2-space-2) var(--ds2-space-2) var(--ds2-space-1);
}

body.ds2 .sidebar-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--text-muted);
    padding: 0 10px;
    height: 32px;
    border-radius: var(--ds2-radius-md);
    font-size: 12.5px;
    font-weight: 400;
    transition: color 0.12s ease, background 0.12s ease;
    text-decoration: none;
}

body.ds2 .sidebar-link:hover {
    color: var(--text-primary);
    background: var(--bg-surface);
}

body.ds2 .sidebar-link.active {
    color: var(--text-primary);
    background: var(--bg-surface);
    font-weight: 500;
}

body.ds2 .sidebar-link.active svg {
    color: var(--interactive-primary);
}

body.ds2 .sidebar-link.locked {
    opacity: 0.4;
}

body.ds2 .sidebar-link.locked:hover {
    opacity: 0.6;
    background: var(--bg-surface-raised);
}

/* Collapsed sidebar: center icons, hide text */
body.ds2 .sidebar.collapsed .sidebar-link {
    justify-content: center;
    padding: 0;
}

body.ds2 .sidebar.collapsed .sidebar-link svg {
    margin: 0 auto;
}

/* ── Sidebar Mobile Behavior ───────────────────────────────────────── */
/* Mobile sidebar backdrop */
.sidebar-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: var(--z-sidebar-backdrop); /* Just below sidebar (z-sticky = 20) */
    cursor: pointer;
}

/* Show backdrop when sidebar is open on mobile */
@media (max-width: 1023px) {
    .sidebar.sidebar-mobile-open ~ .sidebar-backdrop {
        display: block;
    }

    /* Override legacy display:none with slide-in overlay on DS2 pages */
    body.ds2 .sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        transform: translateX(-100%);
        transition: transform 0.25s ease;
        z-index: var(--z-sticky, 20);
    }

    body.ds2 .sidebar.sidebar-mobile-open {
        transform: translateX(0);
    }
}

/* Hide backdrop on desktop */
@media (min-width: 1024px) {
    .sidebar-backdrop {
        display: none !important;
    }
}

/* ── App Top Bar (v3) ──────────────────────────────────────────────── */
body.ds2 .app-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--ds2-space-4);
    height: 56px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border-default);
    background: var(--bg-page);
}

@media (min-width: 1024px) {
    body.ds2 .app-topbar {
        padding: 0 var(--ds2-space-6);
    }
}

body.ds2 .app-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--ds2-space-3);
}

body.ds2 .app-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--ds2-space-2);
}

body.ds2 .app-topbar-hamburger {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    border-radius: var(--ds2-radius-lg);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

@media (min-width: 1024px) {
    body.ds2 .app-topbar-hamburger { display: none; }
}

/* Search button — desktop */
body.ds2 .topbar-search-btn {
    display: none;
    align-items: center;
    gap: var(--ds2-space-2);
    padding: 0 var(--ds2-space-3);
    height: 32px;
    border-radius: var(--ds2-radius-lg);
    background: var(--bg-nested);
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    font-size: 12px;
    cursor: pointer;
    transition: border-color 0.15s ease;
}

@media (min-width: 640px) {
    body.ds2 .topbar-search-btn { display: flex; }
}

body.ds2 .topbar-search-btn:hover {
    border-color: var(--border-strong);
}

body.ds2 .topbar-search-label {
    color: var(--text-muted);
}

body.ds2 .topbar-search-kbd {
    margin-left: var(--ds2-space-4);
    padding: 2px 6px;
    border-radius: var(--ds2-radius-sm);
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    font-size: 9px;
    color: var(--text-muted);
    font-family: inherit;
}

/* Search button — mobile */
body.ds2 .topbar-search-btn-mobile {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: var(--ds2-radius-lg);
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
}

@media (min-width: 640px) {
    body.ds2 .topbar-search-btn-mobile { display: none; }
}

/* Notification bell */
body.ds2 .topbar-bell {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 8px;
    border-radius: var(--ds2-radius-lg);
    color: var(--text-muted);
    text-decoration: none;
    transition: color 0.15s ease;
}

body.ds2 .topbar-bell:hover {
    color: var(--text-primary);
}

body.ds2 .topbar-bell-dot {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #ef4444;
}

/* Main content area with topbar */
body.ds2 main.has-topbar {
    display: flex;
    flex-direction: column;
}

/* ── Sidebar View Switcher (v3: role/view toggle) ──────────────────── */
body.ds2 .sidebar-view-switcher {
    padding: 0 var(--ds2-space-3);
    margin-bottom: var(--ds2-space-4);
}

body.ds2 .sidebar-switcher-track {
    display: flex;
    background: var(--bg-nested);
    border-radius: var(--ds2-radius-md);
    padding: 2px;
}

body.ds2 .sidebar-switcher-btn {
    flex: 1;
    padding: var(--ds2-space-1) var(--ds2-space-2);
    font-size: var(--ds2-text-xs);
    font-weight: 500;
    color: var(--text-secondary);
    background: transparent;
    border: none;
    border-radius: calc(var(--ds2-radius-md) - 2px);
    cursor: pointer;
    transition: all 0.15s ease;
}

body.ds2 .sidebar-switcher-btn.active {
    background: var(--bg-surface);
    color: var(--text-primary);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* ── Bottom Tabs (v3: page-bg, border-strong, safe-area) ───────────── */
body.ds2 .bottom-tabs {
    background: var(--bg-page);
    border-top: 1px solid var(--border-strong);
    padding-bottom: env(safe-area-inset-bottom);
}

body.ds2 .bottom-tab {
    color: var(--text-muted);
    transition: color var(--ds2-transition-fast);
}

body.ds2 .bottom-tab .bottom-tab-label {
    font-size: 10px;
    font-weight: 400;
}

body.ds2 .bottom-tab:hover,
body.ds2 .bottom-tab.active {
    color: var(--interactive-primary);
}

body.ds2 .bottom-tab.active .bottom-tab-label {
    font-weight: 600;
}

body.ds2 .bottom-tab.ds2-tab-primary svg {
    color: var(--interactive-primary);
}

/* ── Form Controls ──────────────────────────────────────────────────────── */
body.ds2 .ds2-input {
    width: 100%;
    padding: var(--ds2-space-2) var(--ds2-space-3);
    font-size: var(--ds2-text-sm);
    color: var(--text-primary);
    background: var(--input-bg);
    border: 1px solid var(--input-border);
    border-radius: var(--ds2-radius-md);
    transition: border-color var(--ds2-transition-fast);
}

body.ds2 .ds2-input:focus {
    outline: none;
    border-color: var(--input-focus-ring);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

body.ds2 .ds2-input::placeholder {
    color: var(--text-muted);
}

body.ds2 .ds2-label {
    display: block;
    font-size: var(--ds2-text-sm);
    font-weight: 500;
    color: var(--text-secondary);
    margin-bottom: var(--ds2-space-1);
}

/* ── Skeleton Loaders (for HTMX widget loading) ─────────────────────── */
body.ds2 .ds2-skeleton {
    background: linear-gradient(
        90deg,
        var(--ds2-zinc-800) 25%,
        var(--ds2-zinc-700) 50%,
        var(--ds2-zinc-800) 75%
    );
    background-size: 200% 100%;
    animation: ds2-shimmer 1.5s ease-in-out infinite;
    border-radius: var(--ds2-radius-md);
}

@keyframes ds2-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* ── Widget Grid (dashboard) ─────────────────────────────────────────── */
body.ds2 .ds2-widget-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: var(--ds2-space-5);
}

body.ds2 .ds2-widget-error {
    padding: var(--ds2-space-4);
    color: var(--text-muted);
    font-size: var(--ds2-text-sm);
    text-align: center;
}

/* ── Elevation utilities (v3) ──────────────────────────────────────────── */
body.ds2 .elevation-1 {
    background: var(--bg-surface);
    box-shadow: var(--shadow-elevation-1);
}
body.ds2 .elevation-2 {
    background: var(--bg-surface-raised);
    box-shadow: var(--shadow-elevation-2);
}
body.ds2 .elevation-3 {
    background: var(--bg-surface-overlay);
    box-shadow: var(--shadow-elevation-3);
}
body.ds2 .elevation-4 {
    background: var(--bg-surface-overlay);
    box-shadow: var(--shadow-elevation-4);
}

/* ── Animations (v3) ──────────────────────────────────────────────────── */
@keyframes ds2-pulse-live {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
@keyframes ds2-slide-in-right {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

body.ds2 .animate-pulse-live {
    animation: ds2-pulse-live 1.5s ease-in-out infinite;
}
body.ds2 .animate-slide-in-right {
    animation: ds2-slide-in-right 0.3s ease;
}

/* ── Focus utility (v3) ──────────────────────────────────────────────── */
body.ds2 .std-focus { outline: none; }
body.ds2 .std-focus:focus-visible {
    box-shadow: var(--focus-ring);
}

/* ── Scrollbar styling (v3) ──────────────────────────────────────────── */
body.ds2 ::-webkit-scrollbar { width: 5px; height: 5px; }
body.ds2 ::-webkit-scrollbar-track { background: transparent; }
body.ds2 ::-webkit-scrollbar-thumb { background: var(--bg-surface-raised); border-radius: 9999px; }
body.ds2 ::-webkit-scrollbar-thumb:hover { background: var(--bg-surface-overlay); }

/* ── Links (v3: unstyled <a> tags get color + hover) ───────────────────── */
body.ds2 a:not([class]) {
    color: var(--interactive-link);
    text-decoration: none;
    transition: color 150ms ease;
}
body.ds2 a:not([class]):hover {
    color: var(--interactive-primary);
    text-decoration: underline;
}

/* ── Lists (v3: markers, spacing, indentation) ─────────────────────────── */
body.ds2 ul:not([class]),
body.ds2 ol:not([class]) {
    padding-left: var(--ds2-space-6);
    margin-bottom: var(--ds2-space-4);
}
body.ds2 ul:not([class]) li,
body.ds2 ol:not([class]) li {
    margin-bottom: var(--ds2-space-2);
    color: var(--text-secondary);
}
body.ds2 ul:not([class]) li::marker {
    color: var(--text-muted);
}

} /* end @layer ds2-components */


/* ═══════════════════════════════════════════════════════════════════════════
   UTILITIES (scoped to body.ds2)
   ═══════════════════════════════════════════════════════════════════════════ */

@layer ds2-utilities {

body.ds2 .ds2-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

body.ds2 .ds2-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

body.ds2 .ds2-text-muted { color: var(--text-muted); }
body.ds2 .ds2-text-secondary { color: var(--text-secondary); }
body.ds2 .ds2-text-primary { color: var(--text-primary); }
body.ds2 .ds2-text-accent { color: var(--interactive-primary); }

body.ds2 .ds2-text-xs { font-size: var(--ds2-text-xs); }
body.ds2 .ds2-text-sm { font-size: var(--ds2-text-sm); }
body.ds2 .ds2-text-base { font-size: var(--ds2-text-base); }
body.ds2 .ds2-text-lg { font-size: var(--ds2-text-lg); }
body.ds2 .ds2-text-xl { font-size: var(--ds2-text-xl); }

} /* end @layer ds2-utilities */


/* ═══════════════════════════════════════════════════════════════════════════
   SETTINGS TABS
   Shared tab navigation for settings pages (Profile, API Keys, Subscription, Licenses)
   ═══════════════════════════════════════════════════════════════════════════ */

body.ds2 .settings-tabs {
    display: flex;
    gap: var(--ds2-space-1);
    border-bottom: 1px solid var(--border-default);
    margin-bottom: var(--ds2-space-6);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}

body.ds2 .settings-tabs::-webkit-scrollbar {
    display: none;
}

body.ds2 .settings-tab {
    padding: var(--ds2-space-2) var(--ds2-space-4);
    font-size: var(--ds2-text-sm);
    font-weight: 500;
    color: var(--text-muted);
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    transition: color var(--ds2-transition-fast), border-color var(--ds2-transition-fast);
}

body.ds2 .settings-tab:hover {
    color: var(--text-primary);
}

body.ds2 .settings-tab.active {
    color: var(--interactive-primary);
    border-bottom-color: var(--interactive-primary);
}


/* ═══════════════════════════════════════════════════════════════════════════
   BUNDLE WIZARD
   Multi-step setup wizard for qualification bundles (e.g. Live Streaming)
   ═══════════════════════════════════════════════════════════════════════════ */

/* Layout: sidebar progress + content */
body.ds2 .wizard-layout {
    display: flex;
    gap: var(--ds2-space-8);
    align-items: flex-start;
}

/* Vertical progress bar (desktop sidebar) */
body.ds2 .wizard-progress {
    width: 200px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

body.ds2 .wizard-progress-step {
    display: flex;
    align-items: flex-start;
    gap: var(--ds2-space-3);
    padding: var(--ds2-space-3) 0;
    position: relative;
    cursor: default;
}

/* Connecting line between step indicators */
body.ds2 .wizard-progress-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 15px;
    top: 44px;
    width: 2px;
    bottom: -4px;
    background: rgba(255,255,255,0.08);
}

body.ds2 .wizard-progress-step.completed:not(:last-child)::after {
    background: var(--brand-accent);
}

/* Step indicator circle */
body.ds2 .wizard-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: var(--ds2-text-xs);
    font-weight: 700;
    transition: background var(--ds2-transition-fast), border-color var(--ds2-transition-fast);
}

body.ds2 .wizard-progress-step.completed .wizard-indicator {
    background: var(--brand-accent);
    color: var(--brand-accent-text);
}

body.ds2 .wizard-progress-step.current .wizard-indicator {
    background: transparent;
    color: var(--text-primary);
    border: 2px solid var(--brand-accent);
}

body.ds2 .wizard-progress-step.pending .wizard-indicator {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
}

body.ds2 .wizard-step-label {
    font-size: var(--ds2-text-sm);
    color: var(--text-muted);
    line-height: 32px;
}

body.ds2 .wizard-progress-step.current .wizard-step-label {
    color: var(--text-primary);
    font-weight: 600;
}

body.ds2 .wizard-progress-step.completed .wizard-step-label {
    color: var(--text-muted);
}

/* Main content area */
body.ds2 .wizard-content {
    flex: 1;
    min-width: 0;
}

body.ds2 .wizard-step-panel {
    display: none;
}

body.ds2 .wizard-step-panel.active {
    display: block;
}

body.ds2 .wizard-step-title {
    font-size: var(--ds2-text-lg);
    font-weight: 700;
    margin: 0 0 var(--ds2-space-2);
}

body.ds2 .wizard-step-desc {
    color: var(--text-muted);
    font-size: var(--ds2-text-sm);
    margin: 0 0 var(--ds2-space-6);
}

/* Navigation buttons */
body.ds2 .wizard-nav {
    display: flex;
    justify-content: space-between;
    margin-top: var(--ds2-space-8);
    padding-top: var(--ds2-space-4);
    border-top: 1px solid var(--border-default);
}

body.ds2 .wizard-nav .btn-back {
    background: transparent;
    border: 1px solid var(--border-default);
    color: var(--text-muted);
    padding: 8px 20px;
    border-radius: var(--ds2-radius-sm);
    font-size: var(--ds2-text-sm);
    cursor: pointer;
    transition: color var(--ds2-transition-fast), border-color var(--ds2-transition-fast);
}

body.ds2 .wizard-nav .btn-back:hover {
    color: var(--text-primary);
    border-color: var(--text-muted);
}

body.ds2 .wizard-nav .btn-next {
    background: var(--brand-accent);
    color: var(--brand-accent-text);
    border: none;
    padding: 8px 24px;
    border-radius: var(--ds2-radius-sm);
    font-size: var(--ds2-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: opacity var(--ds2-transition-fast);
}

body.ds2 .wizard-nav .btn-next:hover {
    opacity: 0.9;
}

body.ds2 .wizard-nav .btn-next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Profile field status indicators */
body.ds2 .profile-field-row {
    display: flex;
    align-items: center;
    gap: var(--ds2-space-3);
    padding: var(--ds2-space-3) 0;
    border-bottom: 1px solid var(--border-default);
}

body.ds2 .profile-field-row:last-child {
    border-bottom: none;
}

body.ds2 .field-status {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 11px;
}

body.ds2 .field-status.complete {
    background: rgba(34, 197, 94, 0.15);
    color: #22c55e;
}

body.ds2 .field-status.missing {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
}

body.ds2 .field-label {
    font-size: var(--ds2-text-sm);
    color: var(--text-primary);
    flex: 1;
}

body.ds2 .field-value {
    font-size: var(--ds2-text-sm);
    color: var(--text-muted);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Slug input with availability indicator */
body.ds2 .slug-input-group {
    display: flex;
    align-items: center;
    gap: var(--ds2-space-2);
}

body.ds2 .slug-prefix {
    font-size: var(--ds2-text-sm);
    color: var(--text-muted);
    white-space: nowrap;
}

body.ds2 .slug-input {
    flex: 1;
    max-width: 280px;
}

body.ds2 .slug-status {
    font-size: var(--ds2-text-xs);
    margin-top: var(--ds2-space-1);
}

body.ds2 .slug-status.available {
    color: #22c55e;
}

body.ds2 .slug-status.taken {
    color: #ef4444;
}

body.ds2 .slug-status.checking {
    color: var(--text-muted);
}

/* Terms scrollable container */
body.ds2 .terms-scroll {
    max-height: 300px;
    overflow-y: auto;
    padding: var(--ds2-space-4);
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-default);
    border-radius: var(--ds2-radius-sm);
    font-size: var(--ds2-text-sm);
    color: var(--text-muted);
    line-height: 1.6;
    margin-bottom: var(--ds2-space-4);
}

body.ds2 .terms-checkbox {
    display: flex;
    align-items: center;
    gap: var(--ds2-space-2);
    font-size: var(--ds2-text-sm);
    cursor: pointer;
}

/* Stripe connect states */
body.ds2 .connect-status {
    padding: var(--ds2-space-4);
    border-radius: var(--ds2-radius-sm);
    margin-bottom: var(--ds2-space-4);
}

body.ds2 .connect-status.not-started {
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--border-default);
}

body.ds2 .connect-status.in-progress {
    background: rgba(245, 158, 11, 0.08);
    border: 1px solid rgba(245, 158, 11, 0.2);
}

body.ds2 .connect-status.complete {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.2);
}

/* Self-service bundle confirmation */
body.ds2 .bundle-confirm-card {
    text-align: center;
    padding: var(--ds2-space-8);
}

body.ds2 .bundle-confirm-card h2 {
    margin: 0 0 var(--ds2-space-2);
}

body.ds2 .bundle-confirm-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
    margin: var(--ds2-space-4) 0 var(--ds2-space-6);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE BREAKPOINTS
   Mobile-first: base styles are mobile, add complexity at breakpoints.
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 639px) {
    body.ds2 .ds2-widget-grid {
        grid-template-columns: 1fr;
    }

    /* Wizard: stack vertically on mobile */
    body.ds2 .wizard-layout {
        flex-direction: column;
        gap: var(--ds2-space-4);
    }

    body.ds2 .wizard-progress {
        width: 100%;
        flex-direction: row;
        overflow-x: auto;
        gap: var(--ds2-space-2);
        padding-bottom: var(--ds2-space-3);
        border-bottom: 1px solid var(--border-default);
    }

    body.ds2 .wizard-progress-step {
        flex-direction: column;
        align-items: center;
        min-width: 64px;
        padding: var(--ds2-space-2) var(--ds2-space-1);
    }

    body.ds2 .wizard-progress-step:not(:last-child)::after {
        display: none;
    }

    body.ds2 .wizard-step-label {
        font-size: 10px;
        line-height: 1.2;
        text-align: center;
    }

    body.ds2 .slug-input-group {
        flex-direction: column;
        align-items: flex-start;
    }
}

@media (min-width: 1024px) {
    body.ds2 .ds2-widget-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


/* ═══════════════════════════════════════════════════════════════════════════
   ACCESSIBILITY: Reduced Motion
   Disable all transitions/animations for users with vestibular disorders.
   ═══════════════════════════════════════════════════════════════════════════ */

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