/* v0.20.0 — Cascade layer declaration (Modern-CSS-2026 discipline).
 * Load order: tokens (variables) < base (resets) < components (structural) < utilities (overrides).
 * Existing rules remain unlayered — they win over all layers (per CSS spec).
 * Future: gradually migrate rules into explicit layers to unlock utility-first patterns.
 * Reference: [[CSS-Layout-Design-Motion]] section on @layer, and [[Modern-CSS-2026]]. */
@layer tokens, base, components;

/* AxoCommand — Custom styles */
@layer tokens {
:root {
    /* v0.4.0 — dark theme ported from macbook_dashboard (macOS Tahoe inspired) */
    /* Surface palette */
    --bg-0: #0a0d14;
    --bg-1: #10141d;
    --bg-2: #171b26;
    --surface-glass: rgba(255, 255, 255, 0.06);
    --surface-glass-strong: rgba(255, 255, 255, 0.09);
    --surface-glass-hover: rgba(255, 255, 255, 0.11);
    --border-glass: rgba(255, 255, 255, 0.11);
    --border-glass-strong: rgba(255, 255, 255, 0.18);

    /* Semantic aliases (kept for backwards compat with existing CSS) */
    --content-bg: #0a0d14;
    --card-bg: #171b26;
    --sidebar-bg: #10141d;
    --sidebar-border: rgba(255, 255, 255, 0.08);

    /* Text */
    --text-primary: rgba(255, 255, 255, 0.95);
    --text-secondary: rgba(255, 255, 255, 0.62);
    --text-tertiary: rgba(255, 255, 255, 0.38);

    /* Accents (blue-purple, macOS Tahoe) */
    --accent-primary: #0a84ff;
    --accent-secondary: #bf5af2;
    --accent-gradient: linear-gradient(135deg, #0a84ff 0%, #bf5af2 100%);
    --accent-glow: rgba(10, 132, 255, 0.35);

    /* Status colors */
    --success: #30d158;
    --warning: #ffd60a;
    --danger: #ff453a;

    /* v0.20.1 — Success variants (3-green reconciliation).
     * See [[AxoCommand-Design-Tokens-v1]] deferred scope on green shades.
     * Existing --success unchanged; these are DISTINCT tokens, not forced migrations. */
    --success-ios:   #34c759;  /* iOS system green */
    --success-light: #4ade80;  /* Tailwind green-400, slightly desaturated */

    /* v0.20.1 — Platform brand tokens.
     * These are exact brand-mark colors for feed adapters, social integrations,
     * and login provider buttons. Reference by name, not by hex. */
    --brand-linkedin:   #0A66C2;  /* LinkedIn brand blue */
    --brand-blue:       #3b82f6;  /* Twitter/X, Discord, Tailwind blue-500 */
    --brand-violet:     #8b5cf6;  /* Substack, Twitch, Tailwind violet-500 */
    --brand-cyan:       #06b6d4;  /* Tailwind cyan-500 */
    --brand-teal:       #14b8a6;  /* Tailwind teal-500 */
    --brand-emerald:    #10b981;  /* Tailwind emerald-500 */
    --brand-amber:      #f59e0b;  /* Amazon, Tailwind amber-500 */
    --brand-amber-light:#fbbf24;  /* Tailwind amber-400 */
    --brand-red:        #ef4444;  /* Tailwind red-500 */
    --brand-green-500:  #22c55e;  /* Tailwind green-500 */
    --brand-green-600:  #16a34a;  /* Tailwind green-600 */

    /* v0.20.1 — iOS system palette (Apple HIG references). */
    --brand-ios-sky:    #5AC8FA;
    --brand-ios-indigo: #5e5ce6;
    --brand-ios-cyan:   #64d2ff;
    --brand-ios-orange: #ff9f0a;

    /* Motion (from v0.3.0) */
    --spring: cubic-bezier(0.34, 1.36, 0.64, 1);
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

    /* Shadows for dark theme — heavier drop, subtle inset highlight */
    --shadow-tile: 0 4px 16px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.04) inset;
    --shadow-tile-hover: 0 12px 40px rgba(10, 132, 255, 0.28), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    --shadow-glass: 0 8px 32px rgba(0, 0, 0, 0.35), 0 1px 0 rgba(255, 255, 255, 0.06) inset;

    /* ======================================================================
     * v0.20.0 — Modern-CSS-2026 Token Extensions
     * Adds: color-scheme, OKLCH primitives, color-mix() derivations,
     *       --space-*, --fs-*, --radius-*, --z-*, extended --shadow-* scales
     * Existing 35 tokens (above) preserved as backwards-compat aliases.
     * Reference: [[AxoCommand-Design-Tokens-v1]] in vault
     * ====================================================================== */

    /* Explicit color-scheme (v0.20.0 stays dark-only; light-dark ready) */
    color-scheme: dark;

    /* --- Tier 1 Primitives (OKLCH, with hex-fallback in @supports below) --- */
    /* Neutrals — perceptually uniform grayscale */
    --neutral-0:   #0a0d14;   /* Existing --bg-0 raw value */
    --neutral-100: #10141d;   /* Existing --bg-1 raw value */
    --neutral-200: #171b26;   /* Existing --bg-2 raw value */
    --neutral-800: #d6d8de;
    --neutral-950: #f5f6f8;

    /* Brand primitives — hex fallbacks; OKLCH overrides in @supports block */
    --blue-500:   #0a84ff;    /* macOS system blue */
    --purple-500: #bf5af2;    /* macOS system purple */
    --green-500:  #30d158;    /* macOS system green */
    --yellow-500: #ffd60a;    /* Warning yellow */
    --red-500:    #ff453a;    /* Error red */

    /* --- Tier 2 Semantic — derived variants using color-mix() --- */
    --accent-primary-hover: color-mix(in oklch, var(--accent-primary) 85%, white 15%);
    --accent-primary-muted: color-mix(in oklch, var(--accent-primary) 30%, transparent);
    --accent-secondary-hover: color-mix(in oklch, var(--accent-secondary) 85%, white 15%);

    /* --- Space scale (4pt with logical extensions) --- */
    --space-0: 0;
    --space-1: 0.25rem;   /*  4px */
    --space-2: 0.5rem;    /*  8px */
    --space-3: 0.75rem;   /* 12px */
    --space-4: 1rem;      /* 16px */
    --space-5: 1.5rem;    /* 24px */
    --space-6: 2rem;      /* 32px */
    --space-8: 3rem;      /* 48px */

    /* --- Fluid type scale (clamp for viewport-responsive) --- */
    --fs-xs:   clamp(0.75rem,  0.72rem + 0.15vw, 0.85rem);
    --fs-sm:   clamp(0.875rem, 0.83rem + 0.22vw, 1rem);
    --fs-base: clamp(1rem,     0.94rem + 0.30vw, 1.125rem);
    --fs-lg:   clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);
    --fs-xl:   clamp(1.5rem,   1.35rem + 0.75vw, 1.875rem);
    --fs-2xl:  clamp(2rem,     1.72rem + 1.40vw, 2.75rem);

    /* --- Border-radius scale --- */
    --radius-sm:   4px;
    --radius-md:   8px;
    --radius-lg:   12px;
    --radius-xl:   16px;
    --radius-2xl:  24px;
    --radius-full: 9999px;

    /* --- Z-index scale (semantic layering) --- */
    --z-base:     0;
    --z-dropdown: 10;
    --z-sticky:   20;
    --z-fixed:    30;
    --z-overlay:  40;
    --z-modal:    50;
    --z-popover:  60;
    --z-toast:    70;

    /* --- Extended shadow set (dark-tuned) --- */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5), 0 1px 0 rgba(255, 255, 255, 0.06) inset;
    --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6), 0 1px 0 rgba(255, 255, 255, 0.08) inset;
    --shadow-glow-primary: 0 0 24px color-mix(in oklch, var(--accent-primary) 30%, transparent);
}

/* v0.20.0 — OKLCH override for capable browsers (with sRGB fallback above).
 * Rationale: OKLCH is perceptually uniform — equal chroma steps look equal.
 * Fallback: browsers without OKLCH support use the hex values above (safe).
 * Reference: [[Modern-CSS-2026]] section on OKLCH color space. */
@supports (color: oklch(0.5 0.1 250)) {
    :root {
        --neutral-0:   oklch(0.15 0.02 260);
        --neutral-100: oklch(0.19 0.02 260);
        --neutral-200: oklch(0.23 0.02 260);
        --neutral-800: oklch(0.85 0.005 260);
        --neutral-950: oklch(0.98 0.005 260);

        --blue-500:   oklch(0.62 0.20 250);
        --purple-500: oklch(0.68 0.22 310);
        --green-500:  oklch(0.72 0.18 145);
        --yellow-500: oklch(0.88 0.19 90);
        --red-500:    oklch(0.65 0.24 25);
    }
}
} /* /@layer tokens */


@layer base {
* { box-sizing: border-box; }
html {
    background: var(--content-bg);
}

body {
    margin: 0; padding: 0; height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--text-primary);
    background: transparent;
    position: relative;
}

/* v0.3.1 — Ambient aurora — strengthened alpha + html-canvas fix */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(1200px 800px at 15% 20%, rgba(10, 132, 255, 0.28), transparent 50%),
        radial-gradient(1000px 700px at 85% 75%, rgba(191, 90, 242, 0.24), transparent 55%),
        radial-gradient(800px 600px at 50% 100%, rgba(48, 209, 88, 0.12), transparent 55%),
        linear-gradient(180deg, #0a0d14 0%, #060810 100%);
    animation: ambientDrift 32s ease-in-out infinite alternate;
}
} /* /@layer base */

@keyframes ambientDrift {
    0%   { transform: translate3d(0, 0, 0) scale(1);       filter: hue-rotate(0deg); }
    50%  { transform: translate3d(-1.5%, 1%, 0) scale(1.03); filter: hue-rotate(6deg); }
    100% { transform: translate3d(1.5%, -1%, 0) scale(1.02); filter: hue-rotate(-4deg); }
}
[x-cloak] { display: none !important; }

@layer components {
/* App shell layout */
.app-shell {
    display: grid;
    /* Ship AS.15 (v0.31.31) — Collapsible sidebar: grid column driven by CSS variable */
    grid-template-columns: var(--sidebar-width, 240px) 1fr;
    transition: grid-template-columns 0.25s ease;
    min-height: 100vh;
}

/* Sidebar (dark) */
.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-border);
    padding: 20px 12px;
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}

.sidebar-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 14px;
}
.sidebar-brand-logo {
    width: 44px; height: 44px;
    border-radius: 12px;
    background: transparent;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
    filter: drop-shadow(0 4px 12px rgba(10, 132, 255, 0.35));
}

.sidebar-brand-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.sidebar-brand-text {
    color: white; font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
}
.sidebar-brand-sub {
    color: rgba(255,255,255,0.5); font-size: 10px; margin-top: 2px;
}

.nav-item {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 2px;
    user-select: none;
    position: relative;
}
.nav-item:hover {
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.95);
}
.nav-item.active {
    background: rgba(255, 255, 255, 0.07);
    color: white;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 4px 12px rgba(0, 0, 0, 0.3);
}
.nav-item.active::before {
    content: '';
    position: absolute;
    left: -6px;
    top: 50%;
    transform: translateY(-50%);
    width: 3px;
    height: 18px;
    background: var(--accent-gradient);
    border-radius: 999px;
    box-shadow: 0 0 8px rgba(10, 132, 255, 0.6), 0 0 16px rgba(191, 90, 242, 0.35);
}
.nav-icon { font-size: 18px; flex-shrink: 0; width: 22px; text-align: center; }
.nav-badge {
    margin-left: auto; background: rgba(255,255,255,0.15);
    padding: 2px 7px; border-radius: 10px; font-size: 11px;
}

.sidebar-footer {
    margin-top: auto;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* ═══════════════════════════════════════════════════════════════════════════
 * Ship AS.15 (v0.31.31) — Collapsible Sidebar Navigation (Option C)
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Pattern: Collapsible-Sidebar-Grid-Variable-Pattern
 * - CSS Grid column driven by --sidebar-width custom property
 * - .app-shell.sidebar-collapsed modifier flips variable from 240px → 64px
 * - Smooth 0.25s transition on grid-template-columns
 * - Nav labels fade out (opacity + max-width) over 0.15s + 0.25s in parallel
 * - User chip name/role, brand text, and collapse button label all fade
 * - Nav badges shrink to small dot indicators when collapsed
 * - Zero x-show / x-if / :style — pure class-based reactivity on root
 *
 * Alpine wiring: :class="{'sidebar-collapsed': sidebarCollapsed}" on .app-shell
 * ═══════════════════════════════════════════════════════════════════════════ */

/* CSS variables controlling sidebar width */
:root {
    --sidebar-width-expanded: 240px;
    --sidebar-width-collapsed: 64px;
    --sidebar-width: var(--sidebar-width-expanded);
}

/* When .app-shell has .sidebar-collapsed modifier, flip the variable.
 * Grid-template-columns transition on .app-shell handles the smooth width change. */
.app-shell.sidebar-collapsed {
    --sidebar-width: var(--sidebar-width-collapsed);
}

/* ═══════ Option C: Fade transitions on nav labels, brand text, user text ═══════ */

/* Base state — labels visible */
.sidebar .nav-item > span:not(.nav-icon),
.sidebar .sidebar-brand > div:not(.sidebar-brand-logo),
.sidebar .user-chip > div:not(.user-avatar):not(:last-child),
.sidebar .sidebar-collapse-label {
    opacity: 1;
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    /* Fade-IN happens after sidebar expands (0.1s delay waits for width transition) */
    transition: opacity 0.15s ease 0.1s, max-width 0.25s ease;
}

/* Collapsed state — labels fade out quickly, then max-width collapses */
.app-shell.sidebar-collapsed .sidebar .nav-item > span:not(.nav-icon),
.app-shell.sidebar-collapsed .sidebar .sidebar-brand > div:not(.sidebar-brand-logo),
.app-shell.sidebar-collapsed .sidebar .user-chip > div:not(.user-avatar):not(:last-child),
.app-shell.sidebar-collapsed .sidebar .sidebar-collapse-label {
    opacity: 0;
    max-width: 0;
    pointer-events: none;
    /* Fade-OUT happens IMMEDIATELY (no delay) so labels disappear before width shrinks */
    transition: opacity 0.15s ease, max-width 0.25s ease;
}

/* Center icons and content within the narrow collapsed sidebar */
.app-shell.sidebar-collapsed .sidebar .nav-item {
    justify-content: center;
    padding: 10px 0;
    gap: 0;
}

.app-shell.sidebar-collapsed .sidebar .sidebar-brand {
    justify-content: center;
    padding: 6px 0 20px;
    gap: 0;
}

.app-shell.sidebar-collapsed .sidebar .user-chip {
    justify-content: center;
    gap: 0;
}

/* Reduce sidebar overall padding when collapsed (less wasted space) */
.app-shell.sidebar-collapsed .sidebar {
    padding: 20px 8px;
}

/* Nav badges shrink to small dot indicators when collapsed */
.app-shell.sidebar-collapsed .sidebar .nav-badge {
    position: absolute;
    top: 4px;
    right: 10px;
    min-width: 8px;
    width: 8px;
    height: 8px;
    padding: 0;
    border-radius: 50%;
    font-size: 0;
    line-height: 0;
    /* Keep the background color visible as the dot indicator */
}

/* ═══════ Collapse/Expand button styling ═══════ */

.sidebar-collapse-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, padding 0.25s ease;
    user-select: none;
}

.sidebar-collapse-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.14);
}

.sidebar-collapse-btn:active {
    background: rgba(255, 255, 255, 0.09);
    transform: scale(0.98);
}

.sidebar-collapse-icon {
    font-size: 15px;
    line-height: 1;
    display: inline-block;
    transition: transform 0.25s ease;
}

/* In collapsed state, button becomes 44px icon-only */
.app-shell.sidebar-collapsed .sidebar-collapse-btn {
    padding: 10px 0;
    gap: 0;
}

/* Ship AS.15a (v0.31.32) — Hide user avatar circle when sidebar is collapsed.
 * User requested: only the logout icon should be visible in the collapsed user chip.
 * Approach: display: none for crisp snap-hide of the small avatar element.
 * (opacity+max-width would create residual circular space that fights the base .user-avatar fixed sizing.) */
.app-shell.sidebar-collapsed .sidebar .user-chip > .user-avatar {
    display: none;
}

/* ═══════ End Ship AS.15 Collapsible Sidebar ═══════ */
.user-chip {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 10px; border-radius: 10px;
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.03);
    font-size: 13px;
}
.user-avatar {
    width: 32px; height: 32px; border-radius: 8px;
    background: var(--accent-gradient);
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 700; font-size: 13px;
}

/* Content area (light) */
.content {
    padding: 24px 32px;
    overflow-x: hidden;
}
.page-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
}
.page-title { font-size: 22px; font-weight: 700; margin: 0; }
.page-subtitle { font-size: 13px; color: var(--text-secondary); margin: 2px 0 0; }

/* Cards */
.card {
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 14px;
    padding: 18px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.03);
}
.card h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }

.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.stat-card {
    background: var(--card-bg);
    border: 1px solid var(--border-glass);
    border-radius: 14px;
    padding: 18px;
    position: relative;
    overflow: hidden;
}
.stat-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
    background: var(--accent-gradient);
}
.stat-value { font-size: 26px; font-weight: 700; margin: 4px 0 2px; }
.stat-label { font-size: 12px; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.03em; }
.stat-hint { font-size: 11px; color: var(--text-secondary); margin-top: 4px; }

/* Buttons */
.btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 8px; font-size: 13px; font-weight: 500;
    cursor: pointer; border: 1px solid transparent; transition: all 0.15s ease;
    background: var(--surface-glass); color: var(--text-primary);
    border-color: var(--border-glass);
}
.btn:hover { background: rgba(255, 255, 255, 0.08); border-color: var(--border-glass-strong); }
.btn-primary {
    background: var(--accent-gradient);
    color: white;
    border: none;
    border-radius: var(--radius-lg);
    padding-left: 20px;
    padding-right: 20px;
    box-shadow:
        0 2px 8px -2px color-mix(in oklch, var(--accent-primary) 40%, transparent),
        0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transition:
        transform 0.18s var(--ease-out),
        box-shadow 0.18s var(--ease-out),
        filter 0.18s var(--ease-out);
}
.btn-primary:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
    box-shadow:
        0 6px 20px -4px color-mix(in oklch, var(--accent-primary) 55%, transparent),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.btn-primary:active {
    transform: translateY(0);
    filter: brightness(0.98);
    box-shadow:
        0 1px 4px -1px color-mix(in oklch, var(--accent-primary) 35%, transparent),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.btn-primary:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}
.btn-primary:disabled {
    opacity: 0.55;
    cursor: not-allowed;
    transform: none;
    filter: none;
    box-shadow:
        0 1px 2px rgba(0, 0, 0, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.btn-danger {
    background: transparent; border-color: rgba(239, 68, 68, 0.3); color: var(--danger);
}
.btn-danger:hover { background: rgba(239, 68, 68, 0.08); }
.btn-sm { padding: 5px 10px; font-size: 12px; }
.btn-icon { padding: 6px 8px; }

/* Inputs */
.input, textarea.input, select.input {
    width: 100%;
    padding: 8px 12px; border-radius: 8px;
    border: 1px solid var(--border-glass);
    font-size: 13px;
    background: var(--surface-glass);
    color: var(--text-primary);
    outline: none;
    transition: border-color 0.15s ease, background 0.15s ease;
    font-family: inherit;
}
.input:focus, textarea.input:focus, select.input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.1);
}
/* Ship R.1 (v0.28.10): dark-theme <option> rendering — browser-default option bg/color is unreadable on dark select */
select.input option, .input option {
    background: #1a1a1a;
    color: #e8e8e8;
    padding: 4px 8px;
}
select.input optgroup, .input optgroup {
    background: #0f0f0f;
    color: #e8e8e8;
}
label.form-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-secondary); margin-bottom: 4px; }

/* Files browser */
.file-toolbar {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.breadcrumb {
    display: flex; align-items: center; gap: 6px;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.breadcrumb a {
    color: var(--accent-primary);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s var(--ease-out, ease-out), color 0.2s var(--ease-out, ease-out), transform 0.2s var(--ease-out, ease-out);
    padding: 3px 8px;
    border-radius: 6px;
}
.breadcrumb a:hover { text-decoration: underline; }

.file-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}
.file-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 14px;
    cursor: pointer;
    transition: transform 220ms var(--spring), box-shadow 220ms var(--ease-out), border-color 200ms var(--ease-out);
    position: relative;
    user-select: none;
    box-shadow: var(--shadow-tile);
}
.file-tile:hover {
    border-color: var(--accent-primary);
    box-shadow: var(--shadow-tile-hover);
    transform: translateY(-3px) scale(1.015);
}
.file-thumb {
    width: 100%; aspect-ratio: 1;
    border-radius: 8px;
    background: linear-gradient(135deg, var(--bg-2) 0%, var(--bg-1) 100%);
    display: flex; align-items: center; justify-content: center;
    margin-bottom: 10px;
    overflow: hidden;
    font-size: 32px;
}
.file-thumb img,
.file-thumb video { width: 100%; height: 100%; object-fit: cover; }
.file-name {
    font-size: 12px; font-weight: 500;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    margin: 0 0 2px;
}
.file-meta { font-size: 11px; color: var(--text-secondary); }
.file-star {
    position: absolute; top: 8px; right: 8px;
    width: 22px; height: 22px; border-radius: 50%;
    background: rgba(255,255,255,0.9);
    display: flex; align-items: center; justify-content: center;
    opacity: 0; transition: opacity 0.15s ease;
    font-size: 12px; cursor: pointer;
}
.file-tile:hover .file-star, .file-tile.starred .file-star { opacity: 1; }

/* Feed items */
.feed-item {
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 16px 18px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.feed-item:hover { border-color: var(--accent-primary); }
.feed-item.unread { border-left: 3px solid var(--accent-primary); }
.feed-item.read { opacity: 0.7; }
.feed-item-title { font-size: 15px; font-weight: 600; margin: 0 0 4px; }
.feed-item-meta { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.feed-item-source-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 2px 8px; border-radius: 10px;
    background: rgba(10, 132, 255, 0.1);
    color: var(--accent-primary);
    font-weight: 500;
}
.feed-item-summary { font-size: 13px; line-height: 1.5; color: var(--text-secondary); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* Ops / services */
.service-row {
    display: grid;
    grid-template-columns: 40px 1fr auto auto auto;
    gap: 12px; align-items: center;
    padding: 10px 14px;
    border-radius: 10px;
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.05);
    margin-bottom: 8px;
}
.status-dot {
    width: 10px; height: 10px; border-radius: 50%;
    background: var(--text-secondary);
}
.status-dot.up { background: var(--success); box-shadow: 0 0 8px var(--success); }
.status-dot.down { background: var(--danger); }

/* Cortex graph placeholder */
.cortex-graph {
    background: linear-gradient(135deg, #1a0f2e 0%, #0f0a1e 100%);
    border-radius: 14px;
    padding: 32px;
    color: rgba(255,255,255,0.9);
    min-height: 400px;
    position: relative;
    overflow: hidden;
}
.cortex-search {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.15);
    color: white;
    padding: 10px 14px;
    border-radius: 10px;
    width: 100%;
    font-size: 14px;
    outline: none;
}
.cortex-search:focus { border-color: var(--accent-primary); }

/* Modal */
.modal-backdrop {
    position: fixed; inset: 0;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(4px);
    z-index: 100;
    display: flex; align-items: center; justify-content: center;
    padding: 20px;
}
.modal {
    background: var(--card-bg);
    border: 1px solid var(--border-glass);
    border-radius: 16px;
    max-width: 720px; width: 100%;
    max-height: 90vh;
    display: flex; flex-direction: column;
    box-shadow: var(--shadow-modal);
    transform: scale(0.94);
    opacity: 0;
    animation: modalSpringIn 300ms var(--spring) forwards;
}

@keyframes modalSpringIn {
    to { transform: scale(1); opacity: 1; }
}
.modal-header {
    padding: 18px 22px;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    display: flex; align-items: center; justify-content: space-between;
}
.modal-body { padding: 22px; overflow-y: auto; flex: 1; }
.modal-footer {
    padding: 14px 22px;
    border-top: 1px solid rgba(0,0,0,0.06);
    display: flex; gap: 10px; justify-content: flex-end;
}

/* Preview modal special */
.preview-modal { max-width: 1100px; }
.preview-body {
    display: flex; align-items: center; justify-content: center;
    background: #0a0a1a;
    min-height: 500px;
    padding: 0;
}
.preview-body img, .preview-body video { max-width: 100%; max-height: 80vh; }
.preview-body audio { width: 90%; }
.preview-body iframe { width: 100%; height: 80vh; border: 0; }

/* Utilities */
.text-mono { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: 12px; }
.badge {
    display: inline-flex; align-items: center;
    padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 500;
    background: rgba(0,0,0,0.05);
}
.badge-accent { background: rgba(10, 132, 255, 0.12); color: var(--accent-primary); }
.badge-success { background: rgba(16, 185, 129, 0.12); color: var(--success); }
.badge-danger { background: rgba(239, 68, 68, 0.12); color: var(--danger); }

.empty-state {
    text-align: center; padding: 60px 20px;
    color: var(--text-secondary);
}
.empty-state-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.4; }
.empty-state-title { font-size: 16px; font-weight: 600; margin: 0 0 4px; color: var(--text-primary); }
.empty-state-hint { font-size: 13px; margin: 0; }

.loading-spinner {
    display: inline-block;
    width: 18px; height: 18px;
    border: 2px solid rgba(10, 132, 255, 0.2);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: axo-spin 0.8s linear infinite;
}
@keyframes axo-spin {
    to { transform: rotate(360deg); }
}

/* Toast */
/* Ship AF.0i (v0.28.65): toast container uses popover="manual" (HTML living-standard
 * Baseline-2024) to enter the browser top-layer. This is required so toasts appear ABOVE
 * HTML5 <dialog> elements opened via showModal() — z-index cannot cross the top-layer
 * boundary (vault pattern: Native-Dialog-Reactive-Framework-Integration, Gotcha 14).
 * The UA default stylesheet for [popover]:popover-open applies position:fixed inset:0
 * margin:auto border:solid padding:0.25em background:canvas which would center the
 * container and give it chrome styling — we override all of that to preserve the
 * fixed-bottom-right positioning. */
.toast-container {
    position: fixed; bottom: 20px; right: 20px; z-index: 10500;
    display: flex; flex-direction: column; gap: 8px;
}
.toast-container[popover] {
    /* Reset UA popover chrome */
    inset: unset;
    margin: unset;
    padding: 0;
    border: none;
    background: transparent;
    color: inherit;
    overflow: visible;
    /* Re-apply the pre-popover layout (duplicated for specificity robustness) */
    position: fixed;
    bottom: 20px;
    right: 20px;
}
.toast {
    background: var(--bg-2);
    color: var(--text-primary);
    border: 1px solid var(--border-glass);
    border-left: 4px solid var(--accent-primary);
    padding: 12px 16px; border-radius: 8px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.4);
    min-width: 280px; max-width: 400px;
    font-size: 13px;
    animation: slideIn 0.2s ease-out;
}
.toast.success { border-left-color: var(--success); }
.toast.error { border-left-color: var(--danger); }
.toast.warning { border-left-color: var(--warning); }
@keyframes slideIn {
    from { transform: translateX(100%); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Notes */
.note-card {
    background: var(--card-bg);
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 14px 16px;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 10px;
}
.note-card:hover { border-color: var(--accent-primary); }
.note-card.pinned { border-left: 3px solid var(--warning); }
.note-title { font-size: 14px; font-weight: 600; margin: 0 0 4px; }
.note-preview { font-size: 12px; color: var(--text-secondary); margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Table */
.data-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.data-table th, .data-table td {
    padding: 10px 14px;
    text-align: left;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.data-table th { font-weight: 600; color: var(--text-secondary); text-transform: uppercase; font-size: 11px; letter-spacing: 0.03em; }
.data-table tr:hover td { background: rgba(10, 132, 255, 0.03); }

/* Feed source pill */
.source-pill {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 12px; border-radius: 20px;
    background: rgba(0,0,0,0.04);
    font-size: 12px; cursor: pointer;
    transition: all 0.15s ease;
}
.source-pill:hover { background: rgba(10, 132, 255, 0.08); }
.source-pill.active { background: var(--accent-gradient); color: white; }


/* ============ DATASTORE ENHANCEMENTS (v0.2.0) ============ */

.file-drop-overlay {
    position: fixed;
    top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(10, 132, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    border: 3px dashed rgba(10, 132, 255, 0.6);
    border-radius: 8px;
}
.file-drop-inner {
    background: rgba(23, 27, 38, 0.92);
    border: 2px solid rgba(10, 132, 255, 0.75);
    border-radius: 16px;
    padding: 40px 60px;
    text-align: center;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
}
.file-drop-icon {
    font-size: 64px;
    margin-bottom: 12px;
    animation: bounce 0.8s ease-in-out infinite alternate;
}
@keyframes bounce {
    0% { transform: translateY(0); }
    100% { transform: translateY(-10px); }
}
.file-drop-title {
    font-size: 22px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 6px;
}
.file-drop-hint {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.7);
}

.file-upload-progress {
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(20, 15, 30, 0.95);
    border: 1px solid rgba(10, 132, 255, 0.4);
    border-radius: 8px;
    padding: 10px 14px;
    margin-bottom: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}
.progress-track {
    height: 8px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #0a84ff, #bf5af2);
    border-radius: 4px;
    transition: width 0.2s ease;
    box-shadow: 0 0 12px rgba(10, 132, 255, 0.6);
}

.preview-details {
    padding: 8px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(20, 15, 30, 0.5);
}
.preview-detail-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.75);
}
.preview-detail-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

/* v0.22.26: foundational-folder protection notice (moved from inline styles in v0.22.25). */
.preview-protected-notice {
    padding: 8px 12px;
    margin-bottom: 8px;
    background: rgba(255, 180, 80, 0.12);
    border: 1px solid rgba(255, 180, 80, 0.35);
    border-radius: 6px;
    color: var(--fg-2, #d9d5e0);
    font-size: 0.85rem;
}

/* v0.3.2 drag-drop tile enhancements — DO NOT REMOVE */
.file-tile[draggable="true"] { cursor: grab; }
.file-tile.tile-dragging {
    opacity: 0.45;
    transform: scale(0.97);
    cursor: grabbing;
}
.file-tile.folder-drop-target {
    outline: 2px dashed rgba(10, 132, 255, 0.75);
    outline-offset: -3px;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.10), rgba(191, 90, 242, 0.10));
    transform: translateY(-3px) scale(1.025);
    box-shadow: 0 12px 32px -8px rgba(10, 132, 255, 0.35);
}
.file-tile.folder-drop-target .file-thumb {
    transform: scale(1.08);
}

/* v0.3.3 breadcrumb drop-target — properties merged into base .breadcrumb a rule (v0.20.14) */
.breadcrumb a.breadcrumb-drop-target {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.22), rgba(191, 90, 242, 0.22));
    color: rgba(255, 255, 255, 0.98);
    outline: 2px dashed rgba(10, 132, 255, 0.8);
    outline-offset: 1px;
    transform: translateY(-1px) scale(1.05);
    box-shadow: 0 4px 12px -2px rgba(10, 132, 255, 0.35);
}


/* ============================================================
 * v0.5.0: Smart Filter Row — cross-folder filtering UI
 * ============================================================ */
.smart-filter-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 4px 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.smart-filter-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-secondary);
    margin-right: 4px;
    font-weight: 500;
}
.smart-pill {
    padding: 6px 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.smart-pill:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-color: rgba(255, 255, 255, 0.16);
}
.smart-pill.active {
    background: var(--accent-gradient);
    border-color: transparent;
    color: white;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3);
}
.smart-pill-clear {
    margin-left: auto;
    color: rgba(255, 100, 100, 0.8);
    border-color: rgba(255, 100, 100, 0.25);
}
.smart-pill-clear:hover {
    background: rgba(255, 100, 100, 0.15);
    color: rgba(255, 140, 140, 1);
}
.smart-filter-status {
    font-size: 12px;
    color: var(--text-secondary);
    font-style: italic;
    margin-left: auto;
}


/* v0.5.1: Trash button as drop target (soft-delete via drag) */
.trash-drop-target {
    transition: all 0.15s ease;
}
.trash-drop-target.trash-drop-hover {
    background: rgba(255, 69, 58, 0.18);
    border-color: rgba(255, 69, 58, 0.7);
    color: rgba(255, 140, 130, 1);
    transform: scale(1.05);
    box-shadow: 0 0 12px rgba(255, 69, 58, 0.5),
                0 0 24px rgba(255, 69, 58, 0.25);
}


/* v0.5.2: Restore button — macOS system green, positive/recovery action */
.btn-restore {
    background: rgba(48, 209, 88, 0.15);
    border: 1px solid rgba(48, 209, 88, 0.4);
    color: rgba(120, 240, 150, 0.95);
    transition: all 0.15s ease;
}
.btn-restore:hover {
    background: rgba(48, 209, 88, 0.25);
    border-color: rgba(48, 209, 88, 0.7);
    color: rgba(150, 255, 175, 1);
    box-shadow: 0 0 12px rgba(48, 209, 88, 0.35);
    transform: translateY(-1px);
}


/* v0.5.3: App dialog system — native <dialog> replacing browser confirm/prompt/alert */
.app-dialog {
    background: rgba(23, 27, 38, 0.95);
    color: rgba(255, 255, 255, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 0;
    max-width: 480px;
    width: 90vw;
    /* v0.5.4: centering — native <dialog> UA styles apply position:fixed + inset:0;
       explicit margin:auto guarantees center regardless of UA quirks or transforms.
       Without this, some browsers render the dialog at top-left instead of centered. */
    margin: auto;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6),
                0 0 1px rgba(255, 255, 255, 0.1) inset;
    backdrop-filter: blur(20px);
    outline: none;
}
.app-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}
.app-dialog[open] {
    animation: appDialogIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.app-dialog[open]::backdrop {
    animation: appDialogBackdropIn 0.22s ease-out;
}
@keyframes appDialogIn {
    from { opacity: 0; transform: scale(0.95) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes appDialogBackdropIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
.app-dialog-body {
    padding: 24px 24px 12px;
}
.app-dialog-title {
    margin: 0 0 8px;
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}
.app-dialog-message {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.7);
}
.app-dialog-body-content {
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.78);
    white-space: pre-line;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    background: rgba(0, 0, 0, 0.25);
    padding: 12px 14px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.app-dialog-input {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: rgba(255, 255, 255, 0.95);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s, background 0.15s;
    box-sizing: border-box;
}
.app-dialog-input:focus {
    border-color: rgba(10, 132, 255, 0.6);
    background: rgba(0, 0, 0, 0.4);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}
.app-dialog-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
    padding: 12px 20px 20px;
}
/* btn-primary is used by dialogs — ensure gradient hover feel */
.btn.btn-primary {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.35), rgba(191, 90, 242, 0.35));
    border: 1px solid rgba(10, 132, 255, 0.5);
    color: rgba(255, 255, 255, 1);
}
.btn.btn-primary:hover {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.5), rgba(191, 90, 242, 0.5));
    box-shadow: 0 0 12px rgba(10, 132, 255, 0.4);
    transform: translateY(-1px);
}


/* v0.6.0 — AxoCial federation action button (send-to-axocial) */
.btn-axocial {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.15), rgba(138, 114, 229, 0.15));
    border: 1px solid rgba(88, 101, 242, 0.4);
    color: #a0b0ff;
}
.btn-axocial:hover {
    background: linear-gradient(135deg, rgba(88, 101, 242, 0.25), rgba(138, 114, 229, 0.25));
    border-color: rgba(88, 101, 242, 0.7);
    color: #c8d3ff;
    box-shadow: 0 0 12px rgba(88, 101, 242, 0.3);
}



/* =========================================================== */
/* v0.9.0 — Dynamic Notes: two-pane layout                     */
/* =========================================================== */
.notes-workspace {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    height: calc(100vh - 200px);
    min-height: 480px;
}

/* Left sidebar */
.notes-sidebar {
    background: rgba(28, 28, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(12px);
}
.notes-sidebar-toolbar {
    padding: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}
.notes-search-input {
    width: 100%;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 13px;
}
.notes-search-input:focus {
    border-color: rgba(10, 132, 255, 0.6);
    outline: none;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15);
}
.notes-sort-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.notes-sort-select {
    flex: 1;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
}
.notes-newbtn {
    padding: 6px 12px;
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.35), rgba(191, 90, 242, 0.35));
    border: 1px solid rgba(10, 132, 255, 0.5);
    border-radius: 6px;
    color: white;
    font-size: 12px;
    cursor: pointer;
    white-space: nowrap;
}
.notes-newbtn:hover {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.5), rgba(191, 90, 242, 0.5));
    transform: translateY(-1px);
}

/* Sidebar scroll region */
.notes-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 8px 8px 12px;
}
.notes-list-scroll::-webkit-scrollbar { width: 6px; }
.notes-list-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 3px; }

/* Sidebar section headers */
.notes-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    margin: 4px 0;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    border-radius: 6px;
}
.notes-section-header:hover { background: rgba(255,255,255,0.03); }
.notes-section-count {
    background: rgba(255,255,255,0.08);
    padding: 1px 6px;
    border-radius: 8px;
    font-size: 10px;
}
.notes-section-caret {
    display: inline-block;
    transition: transform 180ms ease;
    font-size: 8px;
}
.notes-section-caret.collapsed { transform: rotate(-90deg); }

/* Sidebar note items */
.note-item {
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 120ms ease;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin: 2px 2px;
}
.note-item:hover { background: rgba(255,255,255,0.04); }
.note-item.active {
    background: linear-gradient(135deg, rgba(10, 132, 255, 0.15), rgba(191, 90, 242, 0.10));
    border: 1px solid rgba(10, 132, 255, 0.3);
}
.note-item-pin { font-size: 11px; opacity: 0.85; margin-top: 1px; }
.note-item-body { flex: 1; min-width: 0; }
.note-item-title {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0 0 3px 0;
}
.note-item-preview {
    font-size: 11px;
    color: var(--text-secondary);
    line-height: 1.35;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.note-item-time {
    font-size: 10px;
    color: var(--text-tertiary, rgba(255,255,255,0.4));
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 5px;
}
.note-item-fresh {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 6px rgba(74, 222, 128, 0.6);
}

/* Right editor pane */
.notes-editor {
    background: rgba(28, 28, 32, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(12px);
}
.notes-editor-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 40px;
    color: var(--text-secondary);
}
.notes-editor-empty-icon { font-size: 48px; margin-bottom: 12px; opacity: 0.5; }
.notes-editor-empty h3 { margin: 0 0 6px 0; color: var(--text-primary); }
.notes-editor-empty p { margin: 0; font-size: 13px; }

.notes-editor-header {
    padding: 14px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.notes-title-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    padding: 4px 6px;
    outline: none;
}
.notes-title-input::placeholder { color: rgba(255,255,255,0.25); }
.notes-header-btn {
    background: transparent;
    border: 1px solid transparent;
    padding: 6px 10px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--text-secondary);
    transition: all 120ms ease;
}
.notes-header-btn:hover { background: rgba(255,255,255,0.06); color: var(--text-primary); }
.notes-header-btn.active {
    background: rgba(10, 132, 255, 0.15);
    border-color: rgba(10, 132, 255, 0.4);
    color: #7ab8ff;
}
.notes-header-btn.danger:hover { background: rgba(255, 69, 58, 0.15); color: #ff6b6b; border-color: rgba(255, 69, 58, 0.35); }
.notes-header-btn.axo-cortex:hover { background: rgba(191, 90, 242, 0.15); color: #d9a3ff; border-color: rgba(191, 90, 242, 0.4); }

/* ===== v0.19.1 — Pillar accent button variants + btn-warning =====
   Fixes silent broken classes: .axo-notes (v0.19.0 regression),
   .btn-warning (bulkTrash). Establishes .btn.axo-* as first-class
   pillar-accent variants distinct from .notes-header-btn.axo-*.
   Superseded by v0.20.0 design token refactor (planned). */
.btn.axo-cortex {
    background: transparent;
    border-color: rgba(191, 90, 242, 0.35);
    color: #d9a3ff;
}
.btn.axo-cortex:hover {
    background: rgba(191, 90, 242, 0.15);
    border-color: rgba(191, 90, 242, 0.55);
}
.btn.axo-notes {
    background: transparent;
    border-color: rgba(74, 222, 128, 0.35);
    color: #86efac;
}
.btn.axo-notes:hover {
    background: rgba(74, 222, 128, 0.15);
    border-color: rgba(74, 222, 128, 0.55);
}
.btn-warning {
    background: transparent;
    border-color: rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}
.btn-warning:hover {
    background: rgba(251, 191, 36, 0.12);
    border-color: rgba(251, 191, 36, 0.55);
}

/* Tags row */
.notes-tag-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    flex-shrink: 0;
    align-items: center;
}
.notes-tag-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    background: rgba(10, 132, 255, 0.12);
    border: 1px solid rgba(10, 132, 255, 0.3);
    border-radius: 12px;
    font-size: 11px;
    color: #a8c8ff;
    cursor: pointer;
}
.notes-tag-chip:hover { background: rgba(10, 132, 255, 0.2); }
.notes-tag-chip .tag-x {
    opacity: 0.5;
    padding-left: 4px;
    cursor: pointer;
}
.notes-tag-chip .tag-x:hover { opacity: 1; }
.notes-tag-chip.active {
    background: rgba(191, 90, 242, 0.20);
    border-color: rgba(191, 90, 242, 0.5);
    color: #d9a3ff;
}
.notes-tag-input {
    background: transparent;
    border: 1px dashed rgba(255,255,255,0.15);
    color: var(--text-secondary);
    padding: 3px 10px;
    border-radius: 12px;
    font-size: 11px;
    outline: none;
    width: 100px;
}
.notes-tag-input:focus { border-color: rgba(10, 132, 255, 0.5); color: var(--text-primary); }
/* v0.18.0 CP3 — Notes attachments strip */
.notes-attachments-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 6px 12px 8px 12px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.notes-attachment-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px 4px 8px;
    background: rgba(120, 160, 240, 0.12);
    border: 1px solid rgba(120, 160, 240, 0.25);
    border-radius: 12px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.85);
    max-width: 260px;
    transition: background 120ms ease, border-color 120ms ease;
}
.notes-attachment-chip:hover {
    background: rgba(120, 160, 240, 0.18);
    border-color: rgba(120, 160, 240, 0.4);
}
.notes-attachment-chip .attachment-icon {
    flex-shrink: 0;
    font-size: 13px;
    line-height: 1;
}
.notes-attachment-chip .attachment-name {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 200px;
}
.notes-attachment-chip .attachment-x {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.5);
    padding: 0 2px 0 2px;
    border-radius: 4px;
    transition: color 120ms ease, background 120ms ease;
}
.notes-attachment-chip .attachment-x:hover {
    color: rgba(255, 100, 120, 1);
    background: rgba(255, 100, 120, 0.15);
}


/* Content pane (editor + preview) */
.notes-content-pane {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}
.notes-textarea {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary);
    padding: 16px 24px;
    font-family: 'SF Mono', Consolas, 'Courier New', monospace;
    font-size: 14px;
    line-height: 1.6;
    resize: none;
    outline: none;
    tab-size: 4;
}
.notes-textarea::placeholder { color: rgba(255,255,255,0.2); }
.notes-preview {
    flex: 1;
    overflow-y: auto;
    padding: 16px 24px;
    color: var(--text-primary);
    line-height: 1.6;
    font-size: 14px;
}
.notes-preview h1, .notes-preview h2, .notes-preview h3 {
    color: var(--text-primary);
    margin-top: 20px;
    margin-bottom: 10px;
}
.notes-preview h1 { font-size: 22px; }
.notes-preview h2 { font-size: 18px; }
.notes-preview h3 { font-size: 15px; }
.notes-preview p { margin: 8px 0; }
.notes-preview code {
    background: rgba(0,0,0,0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 13px;
    color: #ffb86c;
}
.notes-preview pre {
    background: rgba(0,0,0,0.45);
    padding: 12px;
    border-radius: 8px;
    overflow-x: auto;
}
.notes-preview pre code { background: transparent; padding: 0; color: var(--text-primary); }
.notes-preview blockquote {
    border-left: 3px solid rgba(10, 132, 255, 0.5);
    padding: 4px 12px;
    color: var(--text-secondary);
    margin: 8px 0;
}
.notes-preview ul, .notes-preview ol { padding-left: 24px; margin: 8px 0; }
.notes-preview a { color: #7ab8ff; text-decoration: underline; }

/* Footer */
.notes-footer {
    padding: 8px 18px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-secondary);
    flex-shrink: 0;
}
.notes-footer-meta { display: flex; gap: 14px; }
.notes-footer-save {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 10px;
}
.notes-footer-save.saving { color: #fbbf24; }
.notes-footer-save.saved { color: #4ade80; }

/* Filter tag banner */
.notes-filter-banner {
    padding: 6px 12px;
    margin: 4px 8px;
    background: rgba(191, 90, 242, 0.10);
    border: 1px solid rgba(191, 90, 242, 0.30);
    border-radius: 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #d9a3ff;
}
.notes-filter-banner .clear-x { cursor: pointer; opacity: 0.6; }
.notes-filter-banner .clear-x:hover { opacity: 1; }

.notes-empty-list {
    padding: 24px 12px;
    text-align: center;
    color: var(--text-secondary);
    font-size: 12px;
    line-height: 1.5;
}


} /* /@layer components */

/* ============================================================
   CALENDAR v0.10.0 — Day/Week/Month grid views + settings dialog
   Uses --cal-slot-h to control hour height for week/day timelines.
   ============================================================ */
@layer tokens {
:root {
    --cal-slot-h: 40px;              /* height per hour in week/day views */
    --cal-grid-line: rgba(255,255,255,0.06);
    --cal-cell-bg: rgba(255,255,255,0.015);
    --cal-cell-hover: rgba(255,255,255,0.04);
    --cal-today-bg: rgba(10, 132, 255, 0.08);
    --cal-today-border: rgba(10, 132, 255, 0.4);
}
} /* /@layer tokens (calendar) */

@layer components {
/* -------- Toolbar -------- */
.cal-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 14px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.cal-toolbar-left, .cal-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.cal-nav-btn {
    font-size: 16px;
    line-height: 1;
    padding: 4px 10px;
    min-width: 32px;
}
.cal-range-label {
    font-size: 15px;
    font-weight: 600;
    margin-left: 6px;
    letter-spacing: 0.2px;
    color: var(--text-primary, #e6e6e6);
}
.cal-view-switcher {
    display: inline-flex;
    border: 1px solid var(--cal-grid-line);
    border-radius: 8px;
    overflow: hidden;
    background: rgba(255,255,255,0.02);
}
.cal-view-switcher button {
    background: transparent;
    border: none;
    color: var(--text-secondary, #a0a0a8);
    padding: 6px 14px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.15s ease;
    border-right: 1px solid var(--cal-grid-line);
}
.cal-view-switcher button:last-child { border-right: none; }
.cal-view-switcher button:hover { background: rgba(255,255,255,0.05); color: var(--text-primary, #e6e6e6); }
.cal-view-switcher button.active {
    background: rgba(10, 132, 255, 0.15);
    color: #66b3ff;
}

/* -------- Legend -------- */
.cal-legend {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 12px;
    padding: 8px 4px;
}
.cal-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: rgba(255,255,255,0.03);
    border: 1px solid var(--cal-grid-line);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s ease;
    user-select: none;
}
.cal-legend-item:hover { background: rgba(255,255,255,0.06); }
.cal-legend-item.off { opacity: 0.4; }
.cal-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    display: inline-block;
}
.cal-legend-count {
    opacity: 0.5;
    font-variant-numeric: tabular-nums;
}

/* -------- Month view -------- */
.cal-month {
    padding: 0;
    overflow: hidden;
}
.cal-month-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-bottom: 1px solid var(--cal-grid-line);
    background: rgba(255,255,255,0.02);
}
.cal-month-dow {
    padding: 10px 12px;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-secondary, #a0a0a8);
    font-weight: 600;
    text-align: right;
    border-right: 1px solid var(--cal-grid-line);
}
.cal-month-dow:last-child { border-right: none; }
.cal-month-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-auto-rows: minmax(110px, 1fr);
}
.cal-month-cell {
    border-right: 1px solid var(--cal-grid-line);
    border-bottom: 1px solid var(--cal-grid-line);
    padding: 6px 6px;
    min-height: 110px;
    display: flex;
    flex-direction: column;
    background: var(--cal-cell-bg);
    cursor: pointer;
    transition: background 0.15s ease;
    overflow: hidden;
}
.cal-month-cell:hover { background: var(--cal-cell-hover); }
.cal-month-cell:nth-child(7n) { border-right: none; }
.cal-month-cell.other-month { opacity: 0.35; }
.cal-month-cell.today {
    background: var(--cal-today-bg);
    box-shadow: inset 0 0 0 1px var(--cal-today-border);
}
.cal-month-cell.weekend .cal-month-date { color: var(--text-secondary, #a0a0a8); }
.cal-month-date {
    font-size: 13px;
    font-weight: 600;
    text-align: right;
    padding-right: 4px;
    margin-bottom: 4px;
    color: var(--text-primary, #e6e6e6);
    font-variant-numeric: tabular-nums;
}
.cal-month-cell.today .cal-month-date {
    color: #66b3ff;
    font-weight: 700;
}
.cal-month-events {
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    flex: 1;
}

/* -------- Event pills (shared across month + all-day rows) -------- */
.cal-event-pill {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    line-height: 1.35;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(255,255,255,0.05);
    border-left: 3px solid #0a84ff;
    color: var(--text-primary, #e6e6e6);
    cursor: pointer;
    transition: background 0.12s ease;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.cal-event-pill:hover { background: rgba(255,255,255,0.1); }
.cal-event-pill.wide {
    padding: 3px 8px;
    margin: 2px 0;
    justify-content: space-between;
    gap: 8px;
}
.cal-event-time {
    font-size: 10px;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
}
.cal-event-title {
    overflow: hidden;
    text-overflow: ellipsis;
}
.cal-event-src {
    opacity: 0.5;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}
.cal-event-more {
    font-size: 10px;
    color: var(--text-secondary, #a0a0a8);
    padding: 2px 6px;
    cursor: pointer;
    font-weight: 600;
}
.cal-event-more:hover { color: #66b3ff; }

/* -------- Week view -------- */
.cal-week {
    padding: 0;
    overflow: hidden;
}
.cal-week-header {
    display: grid;
    grid-template-columns: 64px repeat(7, 1fr);
    border-bottom: 1px solid var(--cal-grid-line);
    background: rgba(255,255,255,0.02);
    position: sticky;
    top: 0;
    z-index: 2;
}
.cal-week-header-gutter { border-right: 1px solid var(--cal-grid-line); }
.cal-week-header-day {
    padding: 8px 4px;
    text-align: center;
    border-right: 1px solid var(--cal-grid-line);
}
.cal-week-header-day:last-child { border-right: none; }
.cal-week-header-day.today .cal-week-dnum {
    background: #0a84ff;
    color: #fff;
}
.cal-week-dow {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary, #a0a0a8);
    font-weight: 600;
}
.cal-week-dnum {
    font-size: 20px;
    font-weight: 600;
    display: inline-block;
    min-width: 32px;
    height: 32px;
    line-height: 32px;
    border-radius: 999px;
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}
.cal-week-allday {
    display: grid;
    grid-template-columns: 64px repeat(7, 1fr);
    border-bottom: 1px solid var(--cal-grid-line);
    background: rgba(255,255,255,0.015);
    min-height: 32px;
    padding: 4px 0;
}
.cal-week-allday-label {
    font-size: 10px;
    text-transform: uppercase;
    color: var(--text-secondary, #a0a0a8);
    text-align: right;
    padding: 2px 8px 0 0;
    letter-spacing: 0.5px;
    border-right: 1px solid var(--cal-grid-line);
}
.cal-week-allday-col {
    border-right: 1px solid var(--cal-grid-line);
    padding: 2px 4px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-height: 20px;
}
.cal-week-allday-col:last-child { border-right: none; }
.cal-week-body {
    display: grid;
    grid-template-columns: 64px repeat(7, 1fr);
    position: relative;
    max-height: 70vh;
    overflow-y: auto;
}
.cal-week-hours {
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--cal-grid-line);
}
.cal-week-hour {
    height: var(--cal-slot-h);
    font-size: 10px;
    color: var(--text-secondary, #a0a0a8);
    text-align: right;
    padding: 2px 8px 0 0;
    box-sizing: border-box;
    border-bottom: 1px dashed var(--cal-grid-line);
    font-variant-numeric: tabular-nums;
}
.cal-week-col {
    position: relative;
    border-right: 1px solid var(--cal-grid-line);
    background: var(--cal-cell-bg);
}
.cal-week-col:last-child { border-right: none; }
.cal-week-col.today { background: var(--cal-today-bg); }
.cal-week-slot {
    height: var(--cal-slot-h);
    border-bottom: 1px dashed var(--cal-grid-line);
    cursor: pointer;
    transition: background 0.1s ease;
    box-sizing: border-box;
}
.cal-week-slot:hover { background: rgba(255,255,255,0.03); }
.cal-week-event {
    position: absolute;
    left: 4px;
    right: 4px;
    background: rgba(20, 20, 24, 0.85);
    backdrop-filter: blur(10px);
    border-left: 3px solid #0a84ff;
    border-radius: 4px;
    padding: 3px 6px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.12s ease, box-shadow 0.12s ease;
    z-index: 1;
    font-size: 11px;
    line-height: 1.3;
    min-height: 18px;
}
.cal-week-event:hover {
    transform: translateY(-1px);
    box-shadow: 0 3px 8px rgba(0,0,0,0.4);
    z-index: 3;
}
.cal-week-event-time {
    font-size: 10px;
    opacity: 0.6;
    font-variant-numeric: tabular-nums;
    margin-bottom: 1px;
}
.cal-week-event-title {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.cal-week-event-src {
    font-size: 9px;
    opacity: 0.5;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 2px;
}

/* -------- Day view -------- */
.cal-day { padding: 0; overflow: hidden; }
.cal-day-header {
    padding: 14px 20px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid var(--cal-grid-line);
    display: flex;
    align-items: baseline;
    gap: 12px;
}
.cal-day-header.today { background: var(--cal-today-bg); }
.cal-day-dow {
    font-size: 12px;
    text-transform: uppercase;
    color: var(--text-secondary, #a0a0a8);
    letter-spacing: 0.5px;
}
.cal-day-date {
    font-size: 22px;
    font-weight: 600;
    color: var(--text-primary, #e6e6e6);
}
.cal-day-header.today .cal-day-date { color: #66b3ff; }
.cal-day-allday {
    display: grid;
    grid-template-columns: 64px 1fr;
    border-bottom: 1px solid var(--cal-grid-line);
    background: rgba(255,255,255,0.015);
    min-height: 32px;
    padding: 4px 0;
}
.cal-day-allday-col {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px 6px;
}
.cal-day-body {
    display: grid;
    grid-template-columns: 64px 1fr;
    position: relative;
    max-height: 70vh;
    overflow-y: auto;
}
.cal-day-col {
    position: relative;
    background: var(--cal-cell-bg);
}

/* -------- Color picker swatch (used in event editor) -------- */
.cal-color-swatch {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: transform 0.12s ease, border-color 0.12s ease;
    padding: 0;
}
.cal-color-swatch:hover { transform: scale(1.1); }
.cal-color-swatch.selected {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(10,132,255,0.6);
}

/* -------- Calendar settings dialog -------- */
/* v0.10.1: Override .app-dialog's max-width:480px so long iCal URLs fit without horizontal scroll */
.cal-settings-dialog {
    max-width: min(960px, 96vw);
    width: 900px;
}
.cal-settings-dialog .app-dialog-body {
    min-width: 0;   /* prevent min-width forcing overflow */
    max-width: none;
    padding: 20px 24px 12px;
}
.cal-settings-dialog .cal-settings-info input.input,
.cal-settings-dialog .cal-settings-add input.input {
    width: 100%;
    box-sizing: border-box;
}
.cal-settings-dialog::backdrop { background: rgba(0,0,0,0.6); }
.cal-settings-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    margin: 12px 0;
    padding-right: 4px;
}
.cal-settings-row {
    display: grid;
    grid-template-columns: 40px 1fr auto;
    gap: 10px;
    align-items: center;
    padding: 10px;
    background: rgba(255,255,255,0.025);
    border: 1px solid var(--cal-grid-line);
    border-radius: 8px;
}
.cal-settings-color input[type="color"] {
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
}
.cal-settings-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}
.cal-settings-info input.input {
    padding: 5px 8px;
    font-size: 12px;
}
.cal-settings-info input.mono {
    font-family: 'SF Mono', ui-monospace, Menlo, Consolas, monospace;
    font-size: 11px;
    opacity: 0.85;
}
.cal-settings-meta {
    display: flex;
    gap: 10px;
    font-size: 10px;
    color: var(--text-secondary, #a0a0a8);
    align-items: center;
    flex-wrap: wrap;
    margin-top: 2px;
}
.cal-settings-actions {
    display: flex;
    gap: 4px;
    align-items: center;
}
.status-ok { color: #34c759; }
.status-err { color: #ff453a; }
.status-pending { color: #ff9f0a; }

.cal-settings-add {
    margin: 16px 0;
    padding: 14px;
    background: rgba(10,132,255,0.05);
    border: 1px dashed rgba(10,132,255,0.3);
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.cal-settings-add input.input { padding: 6px 10px; }
.cal-help {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-secondary, #a0a0a8);
}
.cal-help summary { cursor: pointer; padding: 4px 0; }
.cal-help ol { margin: 6px 0 0 18px; padding: 0; line-height: 1.6; }
.cal-help a { color: #66b3ff; text-decoration: none; }
.cal-help a:hover { text-decoration: underline; }

.cal-settings-axocial {
    margin-top: 12px;
    padding: 10px 14px;
    background: rgba(191, 90, 242, 0.08);
    border: 1px solid rgba(191, 90, 242, 0.2);
    border-radius: 8px;
}
.toggle-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    font-size: 12px;
}

/* -------- Responsive -------- */
@media (max-width: 900px) {
    .cal-toolbar { flex-direction: column; align-items: stretch; }
    .cal-toolbar-right { justify-content: space-between; }
    .cal-month-cell { min-height: 80px; padding: 4px; }
    .cal-month-date { font-size: 12px; }
    .cal-event-pill { font-size: 10px; padding: 1px 4px; }
    .cal-week-header { grid-template-columns: 48px repeat(7, 1fr); }
    .cal-week-body   { grid-template-columns: 48px repeat(7, 1fr); }
    .cal-week-allday { grid-template-columns: 48px repeat(7, 1fr); }
}


/* v0.10.4 — Always-visible URL guidance under the ICS URL input */
.cal-url-hint {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px 12px;
    margin-top: 8px;
    background: rgba(255, 149, 0, 0.08);
    border: 1px solid rgba(255, 149, 0, 0.25);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.85);
}
.cal-url-hint-icon {
    flex-shrink: 0;
    font-size: 14px;
    line-height: 1.4;
}
.cal-url-hint code {
    background: rgba(255, 255, 255, 0.08);
    padding: 1px 5px;
    border-radius: 4px;
    font-family: 'SF Mono', ui-monospace, monospace;
    font-size: 11px;
    color: #ff9500;
}
.cal-url-hint b {
    color: #ff9500;
    font-weight: 600;
}


/* ══════════════════════════════════════════════════════════════════
   v0.11.0 Feeds matrix — paste bar, probe preview, tile grid, chips
   ══════════════════════════════════════════════════════════════════ */

.paste-bar {
    background: linear-gradient(135deg, rgba(93, 143, 240, 0.06), rgba(180, 100, 240, 0.05));
    border: 1px solid rgba(93, 143, 240, 0.18);
    border-radius: 14px;
    padding: 16px 18px;
    margin-bottom: 18px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.paste-bar-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.paste-bar-input {
    flex: 1;
    min-width: 0;
    padding: 11px 14px;
    font-size: 14px;
    border: 1px solid rgba(93, 143, 240, 0.25);
    border-radius: 10px;
    background: rgba(20, 22, 32, 0.6);
    color: var(--text-primary, #e6e6ec);
    transition: border-color 0.16s, background 0.16s;
}
.paste-bar-input:focus {
    outline: none;
    border-color: rgba(93, 143, 240, 0.7);
    background: rgba(28, 30, 42, 0.75);
}
.probe-preview {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-top: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 10px;
    font-size: 13px;
}
.probe-preview-icon { font-size: 22px; line-height: 1; padding-top: 2px; }
.probe-preview-body { flex: 1; min-width: 0; }
.probe-preview-row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.probe-preview-sample { margin-top: 6px; opacity: 0.75; font-style: italic; }
.probe-preview-canonical { margin-top: 4px; font-size: 11px; opacity: 0.55; word-break: break-all; }
.probe-preview-validated { font-size: 12px; margin-left: auto; opacity: 0.7; }
.probe-preview-validated.validated-ok { color: #4ade80; opacity: 1; }
.probe-preview-validated.validated-fail { color: #f87171; opacity: 0.9; }

.badge-type {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(93, 143, 240, 0.16);
    color: rgba(160, 195, 255, 0.95);
    border: 1px solid rgba(93, 143, 240, 0.3);
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-family: ui-monospace, SFMono-Regular, monospace;
}

/* ─── v0.12.0 Sprint A: adapter-pack badges ────────────────────────────────── */
.badge-substack       { background: rgba(255,109,52,.15);  color: #ff6d34; border-color: rgba(255,109,52,.35); }   /* Substack orange */
.badge-medium         { background: rgba(41,41,41,.28);    color: #d0d0d0; border-color: rgba(200,200,200,.28); } /* Medium dark */
.badge-bluesky        { background: rgba(24,127,255,.15);  color: #4a99ff; border-color: rgba(24,127,255,.35); }  /* Bluesky blue */
.badge-mastodon       { background: rgba(99,100,255,.15);  color: #8b8dff; border-color: rgba(99,100,255,.35); }  /* Mastodon purple */
.badge-github_user    { background: rgba(88,166,255,.15);  color: #58a6ff; border-color: rgba(88,166,255,.35); }  /* GitHub blue */
.badge-github_releases{ background: rgba(87,189,138,.16);  color: #57bd8a; border-color: rgba(87,189,138,.36); }  /* GitHub green */
.badge-devto          { background: rgba(255,255,255,.12); color: #f2f2f2; border-color: rgba(255,255,255,.32); } /* DEV bright */
.badge-hashnode       { background: rgba(30,167,253,.15);  color: #4fb3ff; border-color: rgba(30,167,253,.35); }  /* Hashnode blue */


.feed-matrix-stats {
    display: flex;
    gap: 10px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 18px;
    padding: 8px 4px;
}
.stat-chip {
    display: inline-flex;
    gap: 6px;
    align-items: baseline;
    padding: 6px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    font-size: 12px;
}
.stat-chip-value { font-size: 15px; font-weight: 700; color: rgba(180, 200, 255, 0.95); }
.stat-chip-label { opacity: 0.65; }

.feed-tile-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 14px;
    margin-bottom: 24px;
}
.feed-tile {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    transition: transform 0.14s, border-color 0.14s, background 0.14s;
    position: relative;
    overflow: hidden;
}
.feed-tile:hover {
    transform: translateY(-2px);
    border-color: rgba(93, 143, 240, 0.35);
    background: rgba(93, 143, 240, 0.05);
}
.feed-tile-disabled { opacity: 0.55; }
.feed-tile-error { border-color: rgba(248, 113, 113, 0.4); }
.feed-tile-manual { border-style: dashed; border-color: rgba(255,255,255,0.15); }
.feed-tile-manual::after {
    content: 'manual';
    position: absolute;
    top: 8px; right: 10px;
    font-size: 9.5px;
    padding: 2px 6px;
    background: rgba(255, 200, 80, 0.15);
    color: rgba(255, 210, 130, 0.9);
    border: 1px solid rgba(255, 200, 80, 0.28);
    border-radius: 4px;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    font-weight: 600;
}
.feed-tile-header { display: flex; gap: 10px; align-items: flex-start; }
.feed-tile-icon { font-size: 26px; line-height: 1; padding-top: 2px; }
.feed-tile-title-block { flex: 1; min-width: 0; }
.feed-tile-name {
    font-weight: 600;
    font-size: 14px;
    color: var(--text-primary, #e6e6ec);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding-right: 6px;
}
.feed-tile-type { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.feed-tile-count { font-size: 11px; opacity: 0.65; }
.feed-tile-body { display: flex; flex-direction: column; gap: 6px; }
.feed-tile-url {
    font-size: 11px;
    color: rgba(160, 180, 220, 0.7);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
}
.feed-tile-url:hover { color: rgba(180, 210, 255, 0.95); text-decoration: underline; }
.feed-tile-meta { display: flex; gap: 8px; align-items: center; font-size: 11px; opacity: 0.75; }
.feed-tile-health { width: 8px; height: 8px; border-radius: 50%; margin-left: auto; }
.feed-tile-health.health-ok    { background: #4ade80; box-shadow: 0 0 6px rgba(74,222,128,0.45); }
.feed-tile-health.health-error { background: #f87171; box-shadow: 0 0 6px rgba(248,113,113,0.5); }
.feed-tile-health.health-idle  { background: #64748b; }
.feed-tile-actions { display: flex; gap: 6px; margin-top: 4px; }
.feed-tile-actions .btn { flex: 1; }

.feed-items-panel {
    margin-top: 8px;
    padding-top: 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
}


/* ============================================================
   v0.16.0 · STUDIO PHASE B — Storyboard Editor
   Sub-nav, storyboards grid, two-pane editor, clip picker, timeline
   ============================================================ */

/* -------- Sub-navigation tabs -------- */
.studio-tabs {
    display: flex;
    gap: 0.25rem;
    margin: 0 0 1.5rem;
    padding: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    overflow-x: auto;
    scrollbar-width: none;
}
.studio-tabs::-webkit-scrollbar { display: none; }

.studio-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.65rem 1.1rem;
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    transition: color 160ms ease, border-color 160ms ease, background 160ms ease;
}
.studio-tab:hover {
    color: rgba(255, 255, 255, 0.9);
    background: rgba(255, 255, 255, 0.03);
}
.studio-tab.active {
    color: #a78bfa;
    border-bottom-color: #8b5cf6;
    background: rgba(139, 92, 246, 0.06);
}
.studio-tab-icon { font-size: 1rem; }
.studio-tab-badge {
    background: rgba(139, 92, 246, 0.25);
    color: #c4b5fd;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}
.studio-tab-name {
    opacity: 0.7;
    font-size: 0.82em;
    font-weight: 400;
    max-width: 240px;
    overflow: hidden;
    text-overflow: ellipsis;
}
.studio-tab-dirty {
    color: #fbbf24;
    font-size: 0.9rem;
    margin-left: 0.15rem;
}

/* -------- Storyboards grid -------- */
.storyboards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    margin-top: 0.5rem;
}

.storyboard-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1.1rem 1.15rem;
    cursor: pointer;
    transition: all 180ms ease;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    position: relative;
}
.storyboard-card:hover {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.35);
    transform: translateY(-1px);
    box-shadow: 0 8px 20px -8px rgba(139, 92, 246, 0.3);
}

.storyboard-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.5rem;
}
.storyboard-card-title {
    font-weight: 600;
    font-size: 1rem;
    color: white;
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.storyboard-card-delete {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 1.2rem;
    padding: 0 0.35rem;
    line-height: 1;
    border-radius: 4px;
    transition: all 140ms ease;
}
.storyboard-card-delete:hover {
    background: rgba(255, 69, 58, 0.15);
    color: #ff453a;
}

.storyboard-card-meta {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}
.storyboard-card-meta strong { color: #a78bfa; font-weight: 600; }

.storyboard-card-updated {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: auto;
}

/* -------- Editor toolbar -------- */
.editor-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    margin-bottom: 1rem;
    flex-wrap: wrap;
}
.editor-toolbar-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex: 1;
    min-width: 260px;
}
.editor-toolbar-right {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.editor-name-input {
    flex: 1;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    padding: 0.55rem 0.8rem;
    border-radius: 8px;
    font-size: 1.02rem;
    font-weight: 600;
    min-width: 180px;
}
.editor-name-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(0, 0, 0, 0.3);
}
.editor-total-duration {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.75);
    white-space: nowrap;
}
.editor-total-duration strong { color: #a78bfa; font-weight: 600; }
.editor-dirty-dot {
    color: #fbbf24;
    font-size: 1.1rem;
    animation: dirty-pulse 1.6s ease-in-out infinite;
}
@keyframes dirty-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}
.editor-error {
    padding: 0.6rem 0.9rem;
    background: rgba(255, 69, 58, 0.12);
    border: 1px solid rgba(255, 69, 58, 0.3);
    border-radius: 8px;
    color: #ff9a9a;
    font-size: 0.85rem;
    margin-bottom: 1rem;
}

/* -------- Editor two-pane grid -------- */
.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}
@media (max-width: 900px) {
    .editor-grid { grid-template-columns: 1fr; }
}

.editor-left, .editor-right {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.editor-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 1rem 1.1rem;
}
.editor-card-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 0.75rem;
}
.editor-card-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}
.editor-card-title-row .editor-card-title { margin-bottom: 0; }
.editor-count {
    display: inline-block;
    background: rgba(139, 92, 246, 0.2);
    color: #c4b5fd;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-left: 0.35rem;
}

.editor-empty {
    padding: 0.75rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    font-style: italic;
}
.editor-empty-large {
    padding: 2rem;
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
}

/* -------- Editor form fields -------- */
.editor-field {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
    margin-bottom: 0.8rem;
    flex: 1;
    min-width: 0;
}
.editor-field label {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
}
.editor-field input,
.editor-field textarea,
.editor-field select {
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: white;
    padding: 0.5rem 0.7rem;
    border-radius: 7px;
    font-size: 0.88rem;
    font-family: inherit;
    width: 100%;
}
.editor-field textarea { resize: vertical; min-height: 60px; }
.editor-field input:focus,
.editor-field textarea:focus,
.editor-field select:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
    background: rgba(0, 0, 0, 0.3);
}
.editor-field input[readonly] {
    background: rgba(0, 0, 0, 0.35);
    color: rgba(255, 255, 255, 0.6);
    cursor: default;
}

.editor-field-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 0.65rem;
    margin-bottom: 0.8rem;
}
.editor-field-row .editor-field { margin-bottom: 0; }

.editor-clip-row {
    display: flex;
    gap: 0.4rem;
    align-items: stretch;
}
.editor-clip-row input { flex: 1; }

.editor-clip-row .btn-sm {
    padding: 0.35rem 0.7rem;
    font-size: 0.8rem;
}

/* -------- Shot list -------- */
.shot-list {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    max-height: 480px;
    overflow-y: auto;
    padding-right: 0.25rem;
}
.shot-list::-webkit-scrollbar { width: 6px; }
.shot-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.shot-row {
    display: flex;
    gap: 0;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    transition: all 140ms ease;
    --phase-color: #8b5cf6;
}
.shot-row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.1);
}
.shot-row.active {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.4);
}
.shot-row-phase-bar {
    width: 4px;
    background: var(--phase-color);
    flex-shrink: 0;
}
.shot-row-body {
    flex: 1;
    padding: 0.55rem 0.75rem;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.shot-row-top {
    display: flex;
    align-items: baseline;
    gap: 0.6rem;
    font-size: 0.8rem;
}
.shot-row-idx {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 600;
    font-family: 'SF Mono', 'Menlo', monospace;
}
.shot-row-phase {
    color: var(--phase-color);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.03em;
}
.shot-row-dur {
    margin-left: auto;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.75rem;
}
.shot-row-desc {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shot-row-clip {
    font-size: 0.72rem;
    color: rgba(139, 92, 246, 0.7);
    font-family: 'SF Mono', 'Menlo', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.shot-row-actions {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 0.15rem;
    padding: 0.35rem 0.4rem;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
}
.shot-row-actions button {
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    cursor: pointer;
    font-size: 0.85rem;
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
    line-height: 1;
    transition: all 120ms ease;
}
.shot-row-actions button:hover:not(:disabled) {
    background: rgba(139, 92, 246, 0.15);
    color: #c4b5fd;
}
.shot-row-actions button:disabled {
    opacity: 0.25;
    cursor: not-allowed;
}

/* -------- Clip picker (inline expandable) -------- */
.clip-picker {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
}
.clip-picker-search {
    width: 100%;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    padding: 0.5rem 0.8rem;
    border-radius: 7px;
    font-size: 0.9rem;
    margin-bottom: 0.5rem;
}
.clip-picker-search:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.5);
}
.clip-picker-list {
    max-height: 320px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.clip-picker-list::-webkit-scrollbar { width: 6px; }
.clip-picker-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}
.clip-picker-item {
    padding: 0.5rem 0.75rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 120ms ease;
}
.clip-picker-item:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.3);
}
.clip-picker-name {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.9);
    font-family: 'SF Mono', 'Menlo', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clip-picker-desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.65);
    margin-top: 0.15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.clip-picker-meta {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 0.25rem;
}
.clip-picker-footer {
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    padding-top: 0.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    margin-top: 0.5rem;
}

/* -------- Timeline visualization -------- */
.editor-timeline .editor-card-title { margin-bottom: 0.75rem; }
.timeline-track {
    display: flex;
    gap: 2px;
    height: 54px;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 6px;
    padding: 3px;
    overflow: hidden;
}
.timeline-block {
    min-width: 40px;
    background: rgba(139, 92, 246, 0.13);
    border-left: 3px solid #8b5cf6;
    border-radius: 3px;
    padding: 0.35rem 0.4rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.7rem;
    cursor: pointer;
    transition: all 140ms ease;
    overflow: hidden;
}
.timeline-block:hover {
    filter: brightness(1.35);
}
.timeline-block.active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.35);
    filter: brightness(1.5);
}
.timeline-block-idx {
    color: rgba(255, 255, 255, 0.9);
    font-weight: 600;
    font-family: 'SF Mono', 'Menlo', monospace;
}
.timeline-block-dur {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.65rem;
}
.timeline-ruler {
    display: flex;
    justify-content: space-between;
    margin-top: 0.35rem;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'SF Mono', 'Menlo', monospace;
}


/* ═══════════════════════════════════════════════════════════════════════════
   v0.16.3 — Productions Gallery (thumbnail grid, filter chips, pagination,
   detail modal). Design mirrors .file-grid/.file-tile pattern for consistency.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Header row: title + filter chips */
.productions-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 12px;
    flex-wrap: wrap;
}
.productions-title {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text-primary);
}
.productions-count {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    font-weight: 500;
}

/* Filter chip row */
.productions-filters {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.filter-chip {
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 500;
    border-radius: 999px;
    border: 1px solid var(--border-glass);
    background: var(--surface-glass);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background 180ms var(--ease-out), border-color 180ms var(--ease-out),
                color 180ms var(--ease-out), transform 180ms var(--spring);
    user-select: none;
    line-height: 1.4;
    min-height: 32px;              /* touch-friendly */
}
.filter-chip:hover {
    background: var(--surface-glass-hover);
    border-color: var(--border-glass-strong);
    color: var(--text-primary);
    transform: translateY(-1px);
}
.filter-chip.active {
    background: var(--accent-primary);
    border-color: var(--accent-primary);
    color: #fff;
    box-shadow: 0 4px 12px -4px var(--accent-glow);
}
.filter-chip.active:hover {
    filter: brightness(1.08);
    transform: translateY(-1px);
}

/* Thumbnail grid — MATCHES .file-grid spec (160px min, 14px gap) */
.productions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 14px;
}

/* Individual production tile — mirrors .file-tile hover physics */
.production-tile {
    background: var(--card-bg);
    border: 1px solid var(--border-glass);
    border-radius: 12px;
    padding: 10px;
    cursor: pointer;
    transition: transform 220ms var(--spring),
                box-shadow 220ms var(--ease-out),
                border-color 200ms var(--ease-out);
    position: relative;
    user-select: none;
    box-shadow: var(--shadow-tile);
    display: flex;
    flex-direction: column;
    gap: 10px;
    overflow: hidden;
}
.production-tile:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-tile-hover);
    border-color: var(--border-glass-strong);
}
.production-tile:active {
    transform: translateY(-1px);
}

/* 1:1 square thumbnail — matches .file-thumb spec */
.production-thumb {
    width: 100%;
    aspect-ratio: 1;
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}
.production-thumb img,
.production-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.production-thumb.kind-music,
.production-thumb.kind-voice {
    background: linear-gradient(135deg,
                                rgba(139, 92, 246, 0.20) 0%,
                                rgba(59, 130, 246, 0.15) 100%);
}
.production-icon {
    font-size: 42px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
}

/* Kind badge — pill in top-right corner */
.production-badge {
    position: absolute;
    top: 6px;
    right: 6px;
    padding: 2px 8px;
    font-size: 0.62rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #fff;
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    pointer-events: none;
}

/* Caption below thumb */
.production-caption {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-height: 34px;
}
.production-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    word-break: break-word;
}
.production-meta {
    font-size: 0.68rem;
    color: var(--text-tertiary);
    display: flex;
    justify-content: space-between;
    gap: 6px;
}

/* Pagination row */
.productions-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 12px;
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    flex-wrap: wrap;
}
.productions-pagination button {
    min-width: 90px;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.85rem;
}
.productions-pagination button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.pagination-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.pagination-info b {
    color: var(--text-primary);
    font-weight: 600;
}

/* ─────────────── Ship AS.13 (v0.31.29): Storyboards page pagination mirror ─────────────── */
/* Mirrors .productions-pagination visual grammar; preserves semantic class name for the Storyboards sub-view. */
.storyboards-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 12px;
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    flex-wrap: wrap;
}
.storyboards-pagination button {
    min-width: 90px;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.85rem;
}
.storyboards-pagination button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─────────────── Ship AS.14 (v0.31.30): Active Jobs page pagination (5/page, mirror of Ship AS.13) ─────────────── */
/* Mirrors .storyboards-pagination visual grammar; preserves semantic class name for the Active Jobs sub-view. */
.active-jobs-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 12px;
    padding: 12px;
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    flex-wrap: wrap;
}
.active-jobs-pagination button {
    min-width: 90px;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.85rem;
}
.active-jobs-pagination button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─────────────── Ship AS.16 (v0.31.33): Library pagination (Characters/Locations/Objects @ 10/page) ─────────────── */
/* Shared CSS class used by all 3 library-grid sections. Mirrors .active-jobs-pagination / .storyboards-pagination */
/* visual grammar (center-aligned glass pill). Reuses .pagination-info span class for cross-page uniformity. */
.library-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 12px;
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    flex-wrap: wrap;
}
.library-pagination button {
    min-width: 90px;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.85rem;
}
.library-pagination button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─────────────── Ship G.3 (v0.30.116): Files page pagination ─────────────── */
/* Mirrors .productions-pagination style conventions; 32 items/page, controls hidden when ≤32 */
.files-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
    margin-top: 20px;
    padding: 12px;
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    border-radius: 10px;
    flex-wrap: wrap;
}
.files-pagination button {
    min-width: 90px;
    min-height: 36px;
    padding: 8px 14px;
    font-size: 0.85rem;
}
.files-pagination button[disabled] {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}
.files-pagination-info {
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-width: 220px;
    text-align: center;
}

/* ─────────────── Production Detail Modal ─────────────── */

/* Extends .app-dialog with wider max-width for full-size media preview */
.production-detail-dialog {
    max-width: 900px;
    width: 92vw;
    padding: 0;
    border: 1px solid var(--border-glass-strong);
    background: var(--content-bg);
    color: var(--text-primary);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: var(--shadow-modal);
}
.production-detail-dialog::backdrop {
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}
.production-detail-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    overflow-y: auto;
}
.production-detail-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    border-bottom: 1px solid var(--border-glass);
    background: var(--surface-glass);
}
.production-detail-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.95rem;
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}
.production-detail-title .production-badge {
    position: static;
    background: var(--accent-primary);
    flex-shrink: 0;
}
.production-detail-title > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

/* Media area — center, max-height so it fits above the fold */
.production-detail-media {
    background: rgba(0, 0, 0, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    min-height: 200px;
    max-height: 60vh;
    overflow: hidden;
}
.production-detail-media img,
.production-detail-media video {
    max-width: 100%;
    max-height: 55vh;
    object-fit: contain;
    border-radius: 6px;
    display: block;
}
.production-detail-media.kind-music,
.production-detail-media.kind-voice {
    padding: 32px 20px;
    background: linear-gradient(135deg,
                                rgba(139, 92, 246, 0.15) 0%,
                                rgba(59, 130, 246, 0.12) 100%);
}
.audio-detail {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    width: 100%;
    max-width: 480px;
}
.audio-icon {
    font-size: 96px;
    line-height: 1;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

/* Metadata rows */
.production-detail-meta {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 8px 20px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-glass);
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.production-detail-meta b {
    color: var(--text-tertiary);
    font-weight: 500;
    margin-right: 6px;
}
.production-detail-meta > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Footer with action buttons */
.production-detail-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 12px 20px 16px;
    border-top: 1px solid var(--border-glass);
    background: var(--surface-glass);
    flex-wrap: wrap;
}
.production-detail-footer .btn-secondary {
    min-width: 110px;
    text-align: center;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* Responsive tweaks */
@media (max-width: 640px) {
    .productions-grid {
        grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
        gap: 10px;
    }
    .productions-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .production-detail-dialog {
        width: 100vw;
        max-height: 100vh;
        border-radius: 0;
    }
}


/* ========================================================
   v0.17.4 — Bulk File Actions
   ======================================================== */

/* Bulk action bar — appears above file grid when selection non-empty */
.bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 12px 16px;
    margin: 12px 0;
    background: linear-gradient(135deg, rgba(88, 166, 255, 0.12), rgba(179, 71, 217, 0.10));
    border: 1px solid rgba(88, 166, 255, 0.35);
    border-radius: 12px;
    backdrop-filter: blur(8px);
    box-shadow: 0 4px 16px rgba(88, 166, 255, 0.15);
}
.bulk-action-info {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14px;
    color: var(--text-primary, #ffffff);
}
.bulk-count {
    font-weight: 600;
    color: #58a6ff;
}
.bulk-select-all,
.bulk-clear {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-secondary, #aaa);
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.bulk-select-all:hover,
.bulk-clear:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(88, 166, 255, 0.5);
    color: #58a6ff;
}
.bulk-action-buttons {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

/* Checkbox overlay inside file-tile (appears on hover OR when any selection exists) */
.file-tile-checkbox {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 3;
    width: 22px;
    height: 22px;
    cursor: pointer;
    opacity: 0;
    transition: opacity 120ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.file-tile:hover .file-tile-checkbox,
.file-tile.selected .file-tile-checkbox {
    opacity: 1;
}
.file-tile-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 2;
}
.file-tile-checkbox-box {
    display: block;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.55);
    border: 2px solid rgba(255, 255, 255, 0.65);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35);
    position: relative;
    transition: background 120ms ease, border-color 120ms ease;
    pointer-events: none;
}
.file-tile.selected .file-tile-checkbox-box {
    background: #58a6ff;
    border-color: #58a6ff;
}
.file-tile.selected .file-tile-checkbox-box::after {
    content: "";
    position: absolute;
    left: 5px;
    top: 1px;
    width: 5px;
    height: 10px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

/* Selected tile highlight */
.file-tile.selected {
    outline: 2px solid #58a6ff;
    outline-offset: -2px;
    background: rgba(88, 166, 255, 0.10);
}

/* Ensure file-tile has position:relative so checkbox absolute-positioning works */


/* ============================================================ */
/* v0.17.5 — Ops Live Log Viewer                                 */
/* ============================================================ */
.ops-log-pane {
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid var(--border);
    border-radius: 8px;
    padding: 12px 8px;
    height: 400px;
    overflow-y: auto;
    margin-top: 12px;
    white-space: pre;
    color: var(--fg);
}
.ops-log-pane::-webkit-scrollbar { width: 8px; }
.ops-log-pane::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.15); border-radius: 4px; }
.ops-log-empty {
    color: var(--fg-dim);
    text-align: center;
    padding: 60px 20px;
    font-family: inherit;
    white-space: normal;
}
.ops-log-line {
    display: flex;
    gap: 12px;
    padding: 1px 4px;
    border-radius: 3px;
}
.ops-log-line:hover { background: rgba(255, 255, 255, 0.04); }
.ops-log-lineno {
    color: var(--fg-dim);
    opacity: 0.55;
    min-width: 40px;
    text-align: right;
    user-select: none;
    flex-shrink: 0;
}
.ops-log-text {
    flex: 1;
    word-break: break-all;
    white-space: pre-wrap;
}
.ops-log-line.ops-log-meta {
    color: #7fb2ff;
    font-style: italic;
    background: rgba(64, 128, 255, 0.06);
}
.ops-log-line.ops-log-err .ops-log-text {
    color: #ff8080;
}
.ops-log-footer {
    margin-top: 8px;
    padding: 6px 4px;
    font-size: 11px;
    color: var(--fg-dim);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


/* ══════════════════════════════════════════════════════════════════════
   v0.17.6 Phase D — Studio Productions search + sort + inline edit
   ══════════════════════════════════════════════════════════════════════ */

/* Search + sort toolbar row */
.productions-toolbar {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    flex-wrap: wrap;
    width: 100%;
    margin-top: 8px;
}

.productions-search-wrap {
    position: relative;
    flex: 1 1 240px;
    min-width: 200px;
    display: flex;
    align-items: center;
}

.productions-search-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.85rem;
    opacity: 0.55;
    pointer-events: none;
}

.productions-search {
    width: 100%;
    padding: 7px 32px 7px 32px;
    font-size: 0.85rem;
    border: 1px solid var(--border-glass, rgba(255,255,255,0.08));
    background: var(--surface-glass, rgba(255,255,255,0.03));
    color: var(--text-primary, #e6e6e9);
    border-radius: 8px;
    transition: border-color 180ms var(--ease-out, ease-out),
                background 180ms var(--ease-out, ease-out);
    -webkit-appearance: none;
    appearance: none;
}
.productions-search:focus {
    outline: none;
    border-color: var(--accent, #0a84ff);
    background: rgba(10,132,255,0.06);
}
.productions-search::placeholder {
    color: var(--text-tertiary, rgba(255,255,255,0.35));
}
/* Hide native clear button on search-type inputs (we render our own) */
.productions-search::-webkit-search-cancel-button {
    -webkit-appearance: none;
}

.productions-search-clear {
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    background: transparent;
    border: none;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    border-radius: 4px;
    transition: background 120ms var(--ease-out, ease-out),
                color 120ms var(--ease-out, ease-out);
}
.productions-search-clear:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #e6e6e9);
}

.productions-sort {
    padding: 7px 10px;
    font-size: 0.8rem;
    border: 1px solid var(--border-glass, rgba(255,255,255,0.08));
    background: var(--surface-glass, rgba(255,255,255,0.03));
    color: var(--text-primary, #e6e6e9);
    border-radius: 8px;
    cursor: pointer;
    min-width: 160px;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%23888' d='M0 0h10L5 6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 8px 5px;
    padding-right: 26px;
    transition: border-color 180ms var(--ease-out, ease-out);
}
.productions-sort:focus {
    outline: none;
    border-color: var(--accent, #0a84ff);
}
.productions-sort option {
    background: #1a1a1c;
    color: var(--text-primary, #e6e6e9);
}

/* ─── Inline prompt edit in production detail modal ─────────────── */

.production-detail-prompt {
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border-top: 1px solid var(--border-glass, rgba(255,255,255,0.06));
    border-bottom: 1px solid var(--border-glass, rgba(255,255,255,0.06));
}

.prompt-label {
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-tertiary, rgba(255,255,255,0.5));
    margin-bottom: 6px;
    font-weight: 600;
}

.prompt-view-mode {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.prompt-text {
    flex: 1;
    font-size: 0.9rem;
    color: var(--text-primary, #e6e6e9);
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    max-height: 120px;
    overflow-y: auto;
}

.prompt-edit-btn {
    flex-shrink: 0;
    padding: 4px 10px;
    font-size: 0.75rem;
    background: var(--surface-glass, rgba(255,255,255,0.05));
    border: 1px solid var(--border-glass, rgba(255,255,255,0.08));
    color: var(--text-secondary, rgba(255,255,255,0.75));
    border-radius: 6px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 180ms var(--ease-out, ease-out),
                border-color 180ms var(--ease-out, ease-out),
                color 180ms var(--ease-out, ease-out);
}
.prompt-edit-btn:hover {
    background: rgba(10,132,255,0.1);
    border-color: var(--accent, #0a84ff);
    color: var(--accent, #0a84ff);
}

.prompt-edit-mode {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.prompt-edit-textarea {
    width: 100%;
    padding: 10px 12px;
    font-size: 0.9rem;
    font-family: inherit;
    border: 1px solid var(--accent, #0a84ff);
    background: rgba(10,132,255,0.04);
    color: var(--text-primary, #e6e6e9);
    border-radius: 8px;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
    transition: border-color 180ms var(--ease-out, ease-out);
    box-sizing: border-box;
}
.prompt-edit-textarea:focus {
    outline: none;
    border-color: var(--accent, #0a84ff);
    background: rgba(10,132,255,0.08);
}
.prompt-edit-textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.prompt-edit-actions {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
}

.prompt-edit-count {
    font-size: 0.7rem;
    color: var(--text-tertiary, rgba(255,255,255,0.4));
    margin-right: auto;
    font-variant-numeric: tabular-nums;
}

/* Responsive — toolbar stacks below 600px */
@media (max-width: 600px) {
    .productions-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .productions-search-wrap {
        flex: 1 1 auto;
    }
    .productions-sort {
        min-width: 100%;
    }
}


/* ============================================================
 * v0.17.9 Social Composer — modal dialog + form + picker views
 * Reuses --bg-secondary, --border-color, --accent-primary vars
 * ============================================================ */

.composer-dialog {
    max-width: 640px;
    width: 92vw;
    max-height: 88vh;
}

.composer-dialog .app-dialog-body {
    max-height: 82vh;
    overflow-y: auto;
}

.composer-label {
    display: block;
    margin-top: 16px;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-secondary);
}

.composer-optional {
    font-weight: 400;
    text-transform: none;
    opacity: 0.65;
    letter-spacing: normal;
}

.composer-textarea {
    width: 100%;
    resize: vertical;
    min-height: 90px;
    font-family: inherit;
    font-size: 14px;
}

.composer-char-count {
    text-align: right;
    font-size: 11px;
    color: var(--text-secondary);
    margin-top: 4px;
    opacity: 0.75;
}

.composer-char-count.text-warn { color: #d97706; opacity: 1; }
.composer-char-count.text-danger { color: #dc2626; opacity: 1; font-weight: 600; }

.composer-platform-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 8px;
}

.composer-platform-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
}

.composer-platform-tile:hover {
    border-color: var(--accent-primary);
    transform: translateY(-1px);
}

.composer-platform-tile.active {
    border-color: var(--accent-primary);
    background: rgba(99, 179, 237, 0.08);
    box-shadow: 0 0 0 2px rgba(99, 179, 237, 0.15);
}

.composer-platform-tile input[type="checkbox"] {
    display: none;
}

.composer-schedule-radio {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    padding: 8px 0;
}

.composer-schedule-radio label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
}

.composer-schedule-row {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 8px;
}

.composer-schedule-row .input {
    flex: 1;
    min-width: 0;
}

.composer-media-attach-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 8px;
}

.composer-media-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.composer-media-tile {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    background: var(--bg-secondary);
}

.composer-media-name {
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 13px;
}

.composer-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    padding: 8px 0;
    max-height: 50vh;
    overflow-y: auto;
}

.composer-picker-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 14px 8px;
    border: 1px solid var(--border-color);
    border-radius: 8px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.composer-picker-tile:hover {
    border-color: var(--accent-primary);
    transform: translateY(-1px);
    background: rgba(99, 179, 237, 0.05);
}

.composer-picker-tile:focus-visible {
    outline: 2px solid var(--accent-primary);
    outline-offset: 2px;
}

.composer-picker-icon {
    font-size: 32px;
    line-height: 1;
}

.composer-picker-label {
    font-size: 11px;
    line-height: 1.3;
    word-break: break-word;
    max-width: 100%;
    opacity: 0.85;
}

.composer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--border-color);
}


/* ============================================================================
 * v0.17.12 — Composer Picker: Folder Traversal Styles
 * ============================================================================ */

.composer-picker-breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 14px;
    margin-bottom: 12px;
    background: var(--bg-surface, rgba(255,255,255,0.03));
    border: 1px solid var(--border-color, rgba(255,255,255,0.08));
    border-radius: 8px;
    font-size: 13px;
}

.composer-picker-breadcrumb a {
    color: var(--accent, #b347d9);
    cursor: pointer;
    text-decoration: none;
    padding: 2px 6px;
    border-radius: 4px;
    transition: background 0.15s ease;
}

.composer-picker-breadcrumb a:hover {
    background: var(--bg-hover, rgba(179, 71, 217, 0.15));
    text-decoration: underline;
}

.composer-picker-breadcrumb-sep {
    opacity: 0.5;
    font-weight: 300;
}

.composer-picker-section-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-muted, rgba(255,255,255,0.55));
    margin: 12px 4px 8px;
    font-weight: 600;
}

.composer-picker-folder-tile {
    background: linear-gradient(135deg, rgba(179, 71, 217, 0.08), rgba(179, 71, 217, 0.03));
    border-color: rgba(179, 71, 217, 0.25);
}

.composer-picker-folder-tile:hover {
    background: linear-gradient(135deg, rgba(179, 71, 217, 0.18), rgba(179, 71, 217, 0.08));
    border-color: rgba(179, 71, 217, 0.5);
    transform: translateY(-1px);
}

.composer-picker-folder-tile .composer-picker-icon {
    filter: drop-shadow(0 2px 4px rgba(179, 71, 217, 0.3));
}


/* v0.17.13: breadcrumb-item — required wrapper for Alpine <template x-for> single-root compliance */
.composer-picker-breadcrumb-item {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}


/* ==========================================================================
   v0.19.2 - Sentinel D Class Coverage Additions
   Rules for HTML classes that shipped without CSS before this ship.
   Includes v0.19.0 Cortex regression fixes (cortex-related-result,
   cortex-result-row) alongside .axo-notes/.btn-warning fixed in v0.19.1.
   ========================================================================== */

/* Cortex Related dialog result item + Cortex search result row */
/* (v0.19.0 regression: shipped without CSS, same class as .axo-notes/.btn-warning) */
.cortex-related-result,
.cortex-result-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  border: 1px solid rgba(191, 90, 242, 0.15);
  background: rgba(191, 90, 242, 0.05);
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  margin-bottom: 6px;
}
.cortex-related-result:hover,
.cortex-result-row:hover {
  background: rgba(191, 90, 242, 0.12);
  border-color: rgba(191, 90, 242, 0.35);
}
.cortex-related-result:last-child,
.cortex-result-row:last-child {
  margin-bottom: 0;
}

/* Open Graph rich content preview widget (Feeds pillar) */
.og-preview {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px;
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(255, 255, 255, 0.02);
  margin: 8px 0;
  overflow: hidden;
}
.og-preview-image {
  width: 90px;
  height: 90px;
  object-fit: cover;
  border-radius: 6px;
  flex-shrink: 0;
  background: rgba(0, 0, 0, 0.2);
}
.og-preview-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.og-preview-site {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-muted, rgba(255,255,255,0.55));
}
.og-preview-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.og-preview-desc {
  font-size: 12px;
  color: var(--text-secondary);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Utility classes for previously-untyped semantic HTML */
.muted {
  color: var(--text-muted, rgba(255,255,255,0.55));
  font-size: 12px;
}
.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.loading-state {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  color: var(--text-muted, rgba(255,255,255,0.55));
  font-size: 13px;
}
.app-dialog-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px 20px 20px;
}

/* ═════════════════════════════════════════════════════════════════════════════
 * v0.22.2 · Ship 2.3 · STYLE TEMPLATES (Studio sub-tab) — grid + card + modal
 * All classes referenced from index.html Templates panel + detail modal.
 * Zero !important. Layered inside @layer components (CP5 discipline).
 * ═════════════════════════════════════════════════════════════════════════════ */

/* ---- Panel shell ---- */
.style-templates-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 16px 20px 24px;
}
.style-templates-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 16px;
    flex-wrap: wrap;
}
.style-templates-title {
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 4px 0;
    color: var(--text-primary, rgba(255,255,255,0.92));
}
.style-templates-subtitle {
    font-size: 13px;
    color: var(--text-muted, rgba(255,255,255,0.55));
    margin: 0;
}
.style-templates-count {
    font-size: 13px;
    color: var(--text-muted, rgba(255,255,255,0.55));
    padding: 4px 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 999px;
    white-space: nowrap;
}

/* ---- Filter smart-pill row (mirrors Files pillar pattern) ---- */
.style-templates-filters {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.style-templates-filter-label {
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,0.55));
    margin-right: 4px;
}

/* ---- Empty / loading state ---- */
.style-templates-empty,
.style-templates-loading {
    padding: 48px 24px;
    text-align: center;
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-size: 14px;
    background: rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.08);
    border-radius: 8px;
}

/* ---- Grid of template cards ---- */
.style-templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ---- Individual card ---- */
.style-template-card {
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}
.style-template-card:hover {
    transform: translateY(-2px);
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 8px 24px rgba(139, 92, 246, 0.15);
}
.style-template-thumb {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    background: rgba(0,0,0,0.3);
    display: block;
}
.style-template-thumb-fallback {
    width: 100%;
    aspect-ratio: 16 / 9;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, rgba(59,130,246,0.15), rgba(139,92,246,0.15));
    font-size: 42px;
    opacity: 0.6;
}
.style-template-meta {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.style-template-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, rgba(255,255,255,0.92));
    margin: 0;
    line-height: 1.3;
}
.style-template-badge {
    display: inline-block;
    padding: 2px 8px;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    background: rgba(139, 92, 246, 0.15);
    color: rgba(196, 181, 253, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    align-self: flex-start;
}
.style-template-family {
    font-size: 11px;
    color: var(--text-muted, rgba(255,255,255,0.55));
    margin: 0;
    font-family: var(--font-mono, ui-monospace, monospace);
}

/* ---- Detail dialog (extends .app-dialog) ---- */
.style-template-detail-dialog {
    max-width: min(1200px, 94vw);
    width: 100%;
}
.style-template-detail-content {
    display: flex;
    flex-direction: column;
    gap: 20px;
    padding: 24px 28px 28px;
    max-height: 86vh;
    overflow-y: auto;
}

/* ---- Detail header ---- */
.style-template-detail-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.style-template-detail-title-row {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.style-template-detail-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary, rgba(255,255,255,0.95));
    margin: 0;
}
.style-template-detail-meta-row {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 4px;
}
.style-template-detail-family {
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.style-template-detail-version {
    font-size: 12px;
    color: var(--text-muted, rgba(255,255,255,0.55));
    padding: 2px 8px;
    background: rgba(255,255,255,0.04);
    border-radius: 4px;
    font-family: var(--font-mono, ui-monospace, monospace);
}
.style-template-detail-active-badge {
    font-size: 11px;
    color: rgba(134, 239, 172, 0.95);
    padding: 2px 8px;
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 4px;
}

/* ---- Provenance ---- */
/* Ship K.1e (v0.22.98) — flex row: source/ingested/updated on left, Close + Generate variant buttons on right */
.style-template-detail-provenance {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
    background: rgba(0,0,0,0.35);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    padding: 12px 16px;
    margin: 0 0 16px 0;
    font-size: 12px;
    font-family: var(--font-mono, ui-monospace, monospace);
    color: rgba(255,255,255,0.75);
}

.style-template-detail-provenance-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;
}

.style-template-detail-provenance-info b {
    color: rgba(255,255,255,0.6);
    font-weight: 600;
    margin-right: 4px;
}

.style-template-detail-provenance-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.style-template-detail-provenance-actions .btn-primary,
.style-template-detail-provenance-actions .btn-secondary {
    white-space: nowrap;
}

/* ---- Detail section ---- */
.style-template-detail-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.style-template-detail-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, rgba(255,255,255,0.92));
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}
.style-template-detail-count {
    font-size: 12px;
    font-weight: 400;
    color: var(--text-muted, rgba(255,255,255,0.55));
}
.style-template-detail-hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-muted, rgba(255,255,255,0.5));
    font-style: italic;
}

/* ---- Brand tokens ---- */
.brand-tokens-swatches,
.brand-tokens-block {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.brand-tokens-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-weight: 600;
}
.brand-tokens-label-forbidden {
    color: rgba(252, 165, 165, 0.9);
}
.brand-tokens-swatch-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.brand-tokens-swatch {
    width: 32px;
    height: 32px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.brand-tokens-list {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    line-height: 1.6;
}

/* v0.22.28 — Motifs + Forbidden Imagery side-by-side grid layout */
.brand-tokens-motifs-forbidden-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 20px;
    align-items: start;
}
.brand-tokens-json {
    background: rgba(0,0,0,0.35);
    padding: 10px 12px;
    border-radius: 6px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    overflow-x: auto;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

/* ---- Execution recipe ---- */
.style-template-recipe {
    background: rgba(0,0,0,0.35);
    padding: 10px 14px;
    border-radius: 6px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11.5px;
    line-height: 1.45;
    color: rgba(255,255,255,0.82);
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
    max-height: 200px;
    overflow-y: auto;
}

/* ---- Phase structure table ---- */
.style-template-phase-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    color: rgba(255,255,255,0.78);
}
.style-template-phase-table th,
.style-template-phase-table td {
    padding: 8px 10px;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.style-template-phase-table th {
    font-weight: 600;
    color: var(--text-muted, rgba(255,255,255,0.55));
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.5px;
}

/* ---- Output spec ---- */
.style-template-output-spec {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 6px 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.78);
}
.style-template-output-spec b {
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-weight: 600;
    margin-right: 6px;
}

/* ---- Assets gallery ---- */
.style-template-assets-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
}
.style-template-asset-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 6px;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 6px;
    font-size: 11px;
    color: rgba(255,255,255,0.75);
    transition: border-color 180ms ease;
}
.style-template-asset-tile:hover {
    border-color: rgba(139, 92, 246, 0.3);
}
.style-template-asset-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 4px;
    background: rgba(0,0,0,0.3);
}
.style-template-asset-icon {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    background: rgba(0,0,0,0.2);
    border-radius: 4px;
    opacity: 0.75;
}
.style-template-asset-name {
    font-size: 10px;
    color: var(--text-muted, rgba(255,255,255,0.55));
    text-align: center;
    word-break: break-all;
    max-width: 100%;
    line-height: 1.3;
}

/* ---- Variables list ---- */
.style-template-variables-list {
    margin: 0;
    padding-left: 20px;
    font-size: 12px;
    color: rgba(255,255,255,0.78);
    line-height: 1.7;
}
.style-template-variables-list code {
    background: rgba(139, 92, 246, 0.15);
    color: rgba(196, 181, 253, 0.95);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: var(--font-mono, ui-monospace, monospace);
    font-size: 11px;
}

/* ---- Detail footer ---- */
.style-template-detail-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding-top: 12px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
/* ---- Ship 2.3 Sentinel D remediation: 7 rules for singular classes referenced by HTML ---- */
.page-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.style-template-empty-icon {
    font-size: 42px;
    margin-bottom: 12px;
    opacity: 0.75;
}
.style-template-loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255,255,255,0.08);
    border-top-color: rgba(139, 92, 246, 0.7);
    border-radius: 50%;
    margin: 0 auto 12px;
    animation: styleTemplateSpin 900ms linear infinite;
}
@keyframes styleTemplateSpin {
    to { transform: rotate(360deg); }
}
.style-template-thumb-wrap {
    position: relative;
    width: 100%;
    overflow: hidden;
}
.style-template-meta-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.style-template-version {
    font-size: 10px;
    padding: 1px 6px;
    background: rgba(255,255,255,0.04);
    border-radius: 3px;
    color: var(--text-muted, rgba(255,255,255,0.55));
    font-family: var(--font-mono, ui-monospace, monospace);
}
.style-template-active {
    font-size: 10px;
    color: rgba(134, 239, 172, 0.95);
    padding: 1px 6px;
    background: rgba(34, 197, 94, 0.15);
    border-radius: 3px;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* ═══ End Ship 2.3 Style Templates styles ═══ */

} /* /@layer components (calendar+trailing) */


/* ============================================================
 * ACTIVE JOBS — PROGRESS BAR (v0.21.2)
 * ============================================================
 * Visual left-to-right fill with gradient + smooth transition.
 * Renders only for active jobs (running/queued); hidden for error/cancelled
 * via Alpine x-if in the template. */
.job-progress-track {
    margin-top: 0.65rem;
    height: 6px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 3px;
    overflow: hidden;
    position: relative;
}
.job-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #3b82f6 0%, #8b5cf6 100%);
    border-radius: 3px;
    transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 0 12px rgba(139, 92, 246, 0.4);
    min-width: 0;


/* ═══════════════════════════════════════════════════════════════════
 * Ship 2.4b.1: Composition Variant Generation Modal Styling
 * Opens from Style Templates panel → template detail → Generate variant.
 * ═══════════════════════════════════════════════════════════════════ */

dialog.app-dialog.variant-generation-dialog {
    /* Ship I.19a7 — COMPOUND SELECTOR (0,2,1 specificity) beats .app-dialog base (0,1,0) */
    /* Per [[Modal-Sizing-Convention-Pattern]] §Solution: nuclear specificity */
    /* GUARANTEES override regardless of cascade order — no !important needed */
    max-width: min(1120px, 94vw);
    width: 100%;
    max-height: 90vh;
    min-height: min(760px, 88vh);
    padding: 0;
    border: 1px solid rgba(139, 92, 246, 0.28);
    background: linear-gradient(145deg, rgba(15, 15, 26, 0.98) 0%, rgba(24, 22, 42, 0.98) 100%);
    border-radius: 16px;
    color: #e6e6f0;
    overflow: hidden;
}
dialog.app-dialog.variant-generation-dialog::backdrop {
    background: rgba(0, 0, 0, 0.66);
    backdrop-filter: blur(4px);
}

.variant-generation-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 90vh;
}

.variant-generation-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 1.5rem 1.75rem 1.25rem;
    gap: 1rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.variant-generation-eyebrow {
    font-size: 0.72rem;
    color: #8b5cf6;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-bottom: 0.35rem;
}
.variant-generation-title {
    font-size: 1.4rem;
    margin: 0 0 0.3rem 0;
    color: #ffffff;
}
.variant-generation-subtitle {
    font-size: 0.9rem;
    color: rgba(230, 230, 240, 0.6);
}

.variant-generation-body {
    flex: 1;
    padding: 1.5rem 1.75rem;
    overflow-y: auto;
}

.variant-loading {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 0;
    color: rgba(230, 230, 240, 0.7);
}

.variant-form {
    display: flex;
    flex-direction: column;
    gap: 1.35rem;
}
.variant-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.variant-field-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-size: 0.9rem;
    color: #ffffff;
}
.variant-field-label > span:first-child {
    font-weight: 600;
}
.variant-field-hint {
    font-size: 0.78rem;
    color: rgba(230, 230, 240, 0.5);
    font-weight: 400;
}
.variant-field-optional {
    color: rgba(139, 92, 246, 0.7);
    font-size: 0.78rem;
    font-weight: 400;
}
.variant-required {
    color: #ef4444;
    font-weight: 700;
}

.variant-input,
.variant-textarea,
.variant-select {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 0.65rem 0.85rem;
    color: #e6e6f0;
    font-size: 0.92rem;
    font-family: inherit;
    transition: border-color 0.2s, background 0.2s;
}
.variant-input:focus,
.variant-textarea:focus,
.variant-select:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(255, 255, 255, 0.06);
}
.variant-textarea {
    resize: vertical;
    min-height: 3rem;
}
.variant-select {
    cursor: pointer;
}

.variant-radio-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}
.variant-radio {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: rgba(230, 230, 240, 0.85);
    padding: 0.45rem 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    transition: all 0.2s;
}
.variant-radio:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(139, 92, 246, 0.35);
}
.variant-radio input[type="radio"] {
    accent-color: #8b5cf6;
}

.variant-pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 0.55rem;
}
.variant-pillar-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.55rem 0.8rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 0.85rem;
}
.variant-pillar-chip:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(139, 92, 246, 0.35);
}
.variant-pillar-chip.active {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.22) 0%, rgba(59, 130, 246, 0.18) 100%);
    border-color: rgba(139, 92, 246, 0.55);
    color: #ffffff;
}
.variant-pillar-name {
    font-weight: 600;
    color: #ffffff;
}
.variant-pillar-count {
    font-size: 0.75rem;
    color: rgba(230, 230, 240, 0.5);
}

.variant-error-banner {
    padding: 0.75rem 0.95rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.35);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.9rem;
}

.variant-submitting {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 2rem 0.5rem;
}
.variant-submitting-text {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.variant-submitting-title {
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
}
.variant-submitting-detail {
    font-size: 0.85rem;
    color: rgba(230, 230, 240, 0.55);
}

.variant-generation-footer {
    display: flex;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 1.15rem 1.75rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(0, 0, 0, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════════════
   Ship I.19a (v0.22.71) — Composition Variant Modal UX Overhaul (2026-09-28)

   Problem (user reported multiple times):
   The variant-generation-dialog rendered ~350px wide despite existing rule
   `max-width: min(1400px, 96vw)`. Root cause: cache and/or specificity edge
   cases where `.app-dialog` base class was winning over `.variant-generation-dialog`
   in certain browsers/reloads (both are 0,1,0 specificity — cascade order fragile).

   Solution:
   1. NUCLEAR specificity — compound selector `dialog.app-dialog.variant-generation-dialog`
      (0,2,1) GUARANTEES override regardless of cascade order.
   2. Honor vault Modal-Sizing-Convention-Pattern v0.22.27: min(1400px, 96vw).
   3. Redesign form layout: proper pillar-chip grid, better radio group,
      sticky footer with prominent submit button.
   4. Uses ACTUAL HTML class names (variant-pillar-grid, variant-pillar-chip,
      variant-error-banner) — no dead-code selectors.

   Vault: [[Modal-Sizing-Convention-Pattern]] · [[HTML-CSS-Class-Name-Mismatch]]
   ═══════════════════════════════════════════════════════════════════════════ */

/* Ship I.19a4 (v0.22.76) — NUCLEAR modal widening with !important guard
   Root cause of Ship I.19a's undelivered fix identified in Ship I.19a3 (stale cache-buster).
   This iteration adds !important to defeat any lingering base .app-dialog max-width: 480px
   cascade, and forces min-width: 1100px so the modal is BIG regardless of viewport size.
   Vault: [[Vault-Documented-Path-Vs-Reality-Divergence-Pitfall]] Case 6 · [[Modal-Sizing-Convention-Pattern]] */
dialog.app-dialog.variant-generation-dialog {
    max-width: min(1600px, 98vw) !important;
    min-width: min(1100px, 98vw) !important;
    width: 98vw !important;
    max-height: 94vh !important;
    min-height: 720px !important;
    padding: 0 !important;
    border: 1px solid rgba(139, 92, 246, 0.32);
    background: linear-gradient(145deg, rgba(15, 15, 26, 0.98) 0%, rgba(24, 22, 42, 0.98) 100%);
    border-radius: 16px;
    color: #e6e6f0;
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(139, 92, 246, 0.12);
    margin: auto;
}

/* Content wrapper — flex column for sticky footer support */
.variant-generation-dialog .variant-generation-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    max-height: 92vh;
    min-height: 520px;
}

/* Header — roomier for wider modal */
.variant-generation-dialog .variant-generation-header {
    padding: 1.5rem 2rem 1.25rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.variant-generation-dialog .variant-generation-title {
    font-size: 1.5rem;
    letter-spacing: -0.01em;
}

.variant-generation-dialog .variant-generation-subtitle {
    font-size: 0.92rem;
    color: rgba(230, 230, 240, 0.65);
    margin-top: 0.15rem;
}

/* Body — flex 1, scrollable, roomy padding */
.variant-generation-dialog .variant-generation-body {
    flex: 1;
    padding: 1.5rem 2rem 1rem;
    overflow-y: auto;
    min-height: 0;
}

/* Form — vertical stack with generous gap between sections */
.variant-generation-dialog .variant-form {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

/* Field styling within scoped modal */
.variant-generation-dialog .variant-field {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.variant-generation-dialog .variant-field-label > span:first-child {
    font-size: 0.95rem;
    font-weight: 600;
    color: #ffffff;
}

.variant-generation-dialog .variant-field-hint {
    font-size: 0.8rem;
    color: rgba(230, 230, 240, 0.55);
    line-height: 1.4;
    display: block;
    margin-top: 0.15rem;
}

/* Input + textarea + select — scoped with box-sizing to prevent overflow */
.variant-generation-dialog .variant-input,
.variant-generation-dialog .variant-textarea,
.variant-generation-dialog .variant-select {
    width: 100%;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 8px;
    padding: 0.7rem 0.95rem;
    color: #e6e6f0;
    font-size: 0.95rem;
    font-family: inherit;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}

.variant-generation-dialog .variant-input:focus,
.variant-generation-dialog .variant-textarea:focus,
.variant-generation-dialog .variant-select:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(255, 255, 255, 0.06);
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.15);
}

.variant-generation-dialog .variant-textarea {
    min-height: 4rem;
    resize: vertical;
    line-height: 1.5;
}

/* Radio row — 3-column grid of pill cards for Audio Family selector */
.variant-generation-dialog .variant-radio-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.6rem;
    margin-top: 0.15rem;
}

.variant-generation-dialog .variant-radio {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.7rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    font-size: 0.9rem;
    color: rgba(230, 230, 240, 0.85);
}

.variant-generation-dialog .variant-radio:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.3);
}

.variant-generation-dialog .variant-radio:has(input:checked) {
    background: rgba(139, 92, 246, 0.15);
    border-color: rgba(139, 92, 246, 0.55);
    color: #ffffff;
}

.variant-generation-dialog .variant-radio input[type="radio"] {
    accent-color: #8b5cf6;
    cursor: pointer;
}

/* Pillar chip grid — matches actual HTML class .variant-pillar-grid + .variant-pillar-chip */
.variant-generation-dialog .variant-pillar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 0.55rem;
    margin-top: 0.15rem;
}

.variant-generation-dialog .variant-pillar-chip {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
    padding: 0.65rem 0.9rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
    font-size: 0.86rem;
    color: rgba(230, 230, 240, 0.85);
    user-select: none;
}

.variant-generation-dialog .variant-pillar-chip:hover {
    background: rgba(139, 92, 246, 0.08);
    border-color: rgba(139, 92, 246, 0.35);
}

.variant-generation-dialog .variant-pillar-chip.active {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.22) 0%, rgba(59, 130, 246, 0.18) 100%);
    border-color: rgba(139, 92, 246, 0.6);
    color: #ffffff;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25);
}

.variant-generation-dialog .variant-pillar-name {
    font-weight: 600;
    color: #ffffff;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.variant-generation-dialog .variant-pillar-count {
    font-size: 0.72rem;
    color: rgba(139, 92, 246, 0.85);
    flex-shrink: 0;
}

/* Error banner — matches actual HTML class .variant-error-banner */
.variant-generation-dialog .variant-error-banner {
    padding: 0.85rem 1rem;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.4);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Footer — sticky, prominent, with proper button sizing */
.variant-generation-dialog .variant-generation-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.65rem;
    padding: 1.15rem 2rem 1.25rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(15, 15, 26, 0.75);
    backdrop-filter: blur(8px);
    flex-shrink: 0;
}

.variant-generation-dialog .variant-generation-footer .btn-primary {
    padding: 0.75rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 600;
}

/* Submitting state — larger, centered */
.variant-generation-dialog .variant-submitting {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    padding: 3rem 1rem;
    justify-content: center;
}

.variant-generation-dialog .variant-submitting-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: #ffffff;
}

.variant-generation-dialog .variant-submitting-detail {
    font-size: 0.88rem;
    color: rgba(230, 230, 240, 0.6);
    margin-top: 0.2rem;
}

/* Ship I.19a4 — responsive collapse below 1100px viewport
   Below this width, drop min-width so modal can shrink to 98vw without overflow.
   Above, use the min-width: 1100px baseline set in the nuclear rule above. */


/* Ship I.19a6 — content-fill: ensure form elements stretch to fill modal width */
.variant-generation-dialog .variant-input,
.variant-generation-dialog .variant-textarea,
.variant-generation-dialog .variant-select,
.variant-generation-dialog .variant-form,
.variant-generation-dialog .variant-field,
.variant-generation-dialog .variant-radio-row,
.variant-generation-dialog .variant-pillar-grid,
.variant-generation-dialog .variant-generation-body,
.variant-generation-dialog .variant-generation-header,
.variant-generation-dialog .variant-generation-content {
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
}
.variant-generation-dialog .variant-radio-row {
    /* Radio row is 3-column responsive grid */
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
}
.variant-generation-dialog .variant-pillar-grid {
    /* Pillar chip grid — auto-fill chips wrap naturally */
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
}

@media (max-width: 1100px) {
    dialog.app-dialog.variant-generation-dialog {
        min-width: 0 !important;
        max-width: 98vw !important;
        width: 98vw !important;
    }
    .variant-generation-dialog .variant-generation-header,
    .variant-generation-dialog .variant-generation-body,
    .variant-generation-dialog .variant-generation-footer {
        padding-left: 1.25rem;
        padding-right: 1.25rem;
    }
    .variant-generation-dialog .variant-radio-row,
    .variant-generation-dialog .variant-pillar-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* End Ship I.19a modal overhaul */


}

/* v0.22.32: Alpine :style → :class refactor for plan-preview modal step tiles.
 * Previously these were inline :style bindings with string concatenation + ternaries
 * which Alpine's expression parser rejected ("Invalid or unexpected token") causing
 * cosmetic console errors. Class-based bindings compile cleanly.
 * See [[Alpine-Style-Binding-Parse-Error]] solution memory (0.9 confidence). */
.step-tile {
    display: flex;
    gap: 0.75rem;
    align-items: flex-start;
    padding: 0.5rem;
    border-radius: 6px;
}
.step-tile-recycled {
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
}
.step-tile-fresh {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid transparent;
}

.step-kind-label {
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.75rem;
    margin-right: 0.5rem;
}
.step-kind-label-recycled {
    background: rgba(34, 197, 94, 0.25);
}
.step-kind-label-fresh {
    background: rgba(139, 92, 246, 0.2);
}



/* ═════════════════════════════════════════════════════════════════════════
 * Ship I.16 Phase A (v0.22.64) — Metadata Viewer
 * Collapsible metadata pane for File Preview + Studio Production Detail modals
 * Shows parsed metadata JSON with provenance badges
 * ═════════════════════════════════════════════════════════════════════════ */
.metadata-details-section {
    margin: 12px 0;
    padding: 0;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    overflow: hidden;
}
.metadata-details-section.production-metadata {
    margin: 8px 20px;  /* align with production-detail-meta padding */
}

.metadata-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    cursor: pointer;
    user-select: none;
    background: rgba(255, 255, 255, 0.02);
    transition: background 0.15s ease;
}
.metadata-header:hover {
    background: rgba(255, 255, 255, 0.05);
}

.metadata-toggle-caret {
    display: inline-block;
    width: 12px;
    font-family: monospace;
    font-size: 10px;
    color: rgba(255, 255, 255, 0.6);
    transition: transform 0.15s ease;
}
.metadata-title {
    font-size: 13px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.metadata-count {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-family: monospace;
}

.metadata-content {
    padding: 12px 14px 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.metadata-provenance-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}

.metadata-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    font-size: 11px;
    background: rgba(139, 92, 246, 0.15);
    color: rgba(226, 213, 250, 0.95);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: 4px;
    font-family: monospace;
}
.metadata-badge.studio-badge {
    background: rgba(34, 197, 94, 0.12);
    color: rgba(200, 240, 210, 0.95);
    border-color: rgba(34, 197, 94, 0.3);
}
.metadata-badge b {
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.metadata-json {
    margin: 0;
    padding: 12px;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    font-family: 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, monospace;
    font-size: 11.5px;
    line-height: 1.5;
    color: rgba(220, 230, 240, 0.9);
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 280px;
    overflow-y: auto;
    overflow-x: auto;
}
.metadata-json::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
.metadata-json::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}
.metadata-json::-webkit-scrollbar-track {
    background: transparent;
}


/* Ship I.16 Phase B (v0.22.65): Library promotion toggle in metadata viewer */
.metadata-promote-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    margin: 8px 0;
    background: rgba(0, 179, 179, 0.05);
    border: 1px solid rgba(0, 179, 179, 0.15);
    border-radius: 6px;
    flex-wrap: wrap;
}
.metadata-promote-btn {
    background: linear-gradient(135deg, rgba(0, 179, 179, 0.15), rgba(0, 179, 179, 0.05));
    border: 1px solid rgba(0, 179, 179, 0.4);
    color: #00b3b3;
    padding: 8px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.metadata-promote-btn:hover {
    background: linear-gradient(135deg, rgba(0, 179, 179, 0.25), rgba(0, 179, 179, 0.1));
    border-color: rgba(0, 179, 179, 0.6);
    color: #00d4d4;
}
.metadata-promote-btn.promoted {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.15), rgba(34, 197, 94, 0.05));
    border-color: rgba(34, 197, 94, 0.4);
    color: #22c55e;
}
.metadata-promote-btn.promoted:hover {
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.15), rgba(239, 68, 68, 0.05));
    border-color: rgba(239, 68, 68, 0.4);
    color: #ef4444;
}
.metadata-promote-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.metadata-promote-hint {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    font-style: italic;
    flex: 1;
    min-width: 200px;
}
.metadata-promote-hint.promoted-hint {
    color: rgba(34, 197, 94, 0.7);
}


/* ═════════════════════════════════════════════════════════════════════
 * Ship K.2a (v0.22.99) — Character Section CSS (fills Ship K.1a orphan classes)
 *
 * Ship K.1a shipped 21 new HTML classes for the character upload UI without
 * matching CSS rules — the modal rendered as raw DOM flow. This block writes
 * proper styling for all 21 classes, scoped inside .variant-generation-dialog
 * per Modal-Sizing-Convention-Pattern.
 *
 * Class hierarchy:
 *   .variant-characters-container
 *     .variant-character-card
 *       .variant-character-header
 *         .variant-character-name-input
 *         .variant-character-role-select
 *         .variant-character-remove
 *       .variant-character-body  (2-col responsive grid)
 *         .variant-character-image-slot
 *           .variant-character-image-preview
 *             .variant-character-image-name
 *             .variant-character-image-clear
 *           .variant-character-upload-btn (file-drop label)
 *         .variant-character-desc-slot
 *           .variant-character-desc-header
 *             .variant-character-desc-label
 *             .variant-character-vision-btn
 *           .variant-character-desc-textarea
 *           .variant-character-desc-meta
 *             .variant-character-desc-count  (.valid / .invalid)
 *             .variant-character-desc-status (.invalid)
 *     .variant-character-add-btn
 * ═════════════════════════════════════════════════════════════════════ */

/* Container — vertical stack of character cards + add button */
.variant-generation-dialog .variant-characters-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.15rem;
    background: rgba(139, 92, 246, 0.04);
    border: 2px dashed rgba(139, 92, 246, 0.35);
    border-radius: 0.6rem;
    margin-top: 0.4rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.variant-generation-dialog .variant-characters-container:hover {
    border-color: rgba(139, 92, 246, 0.55);
    background: rgba(139, 92, 246, 0.07);
}

/* Individual character card — bordered rounded container matching visual language */
.variant-generation-dialog .variant-character-card {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    background: rgba(139, 92, 246, 0.05);
    border: 1px solid rgba(139, 92, 246, 0.18);
    border-radius: 0.75rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.variant-generation-dialog .variant-character-card:hover {
    background: rgba(139, 92, 246, 0.07);
    border-color: rgba(139, 92, 246, 0.28);
}

/* Header row — name input + role select + remove button */
.variant-generation-dialog .variant-character-header {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.variant-generation-dialog .variant-character-name-input {
    flex: 1 1 auto;
    min-width: 0;
    padding: 0.55rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 500;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.variant-generation-dialog .variant-character-name-input:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(255, 255, 255, 0.07);
}

.variant-generation-dialog .variant-character-name-input::placeholder {
    color: rgba(230, 230, 240, 0.35);
}

.variant-generation-dialog .variant-character-role-select {
    flex: 0 0 auto;
    width: 145px;
    padding: 0.55rem 0.75rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 0.88rem;
    cursor: pointer;
}

.variant-generation-dialog .variant-character-role-select:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.6);
}

.variant-generation-dialog .variant-character-remove {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 0.5rem;
    color: rgba(239, 68, 68, 0.85);
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.variant-generation-dialog .variant-character-remove:hover {
    background: rgba(239, 68, 68, 0.18);
    border-color: rgba(239, 68, 68, 0.45);
    color: #ef4444;
}

/* Body — 2-column responsive grid: image slot left, desc slot right */
.variant-generation-dialog .variant-character-body {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 1rem;
    align-items: start;
}

/* Image slot — file drop area OR image preview */
.variant-generation-dialog .variant-character-image-slot {
    display: flex;
    flex-direction: column;
}

.variant-generation-dialog .variant-character-upload-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    min-height: 140px;
    padding: 1rem 0.85rem;
    background: rgba(255, 255, 255, 0.02);
    border: 2px dashed rgba(139, 92, 246, 0.3);
    border-radius: 0.5rem;
    color: rgba(230, 230, 240, 0.7);
    font-size: 0.85rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.variant-generation-dialog .variant-character-upload-btn:hover {
    background: rgba(139, 92, 246, 0.06);
    border-color: rgba(139, 92, 246, 0.5);
    color: #ffffff;
}

.variant-generation-dialog .variant-character-upload-btn span {
    font-weight: 600;
    color: #ffffff;
}

.variant-generation-dialog .variant-character-upload-btn small {
    font-size: 0.72rem;
    color: rgba(230, 230, 240, 0.5);
    line-height: 1.3;
}

.variant-generation-dialog .variant-character-image-preview {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    padding: 0.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.5rem;
}

.variant-generation-dialog .variant-character-image-preview img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 0.4rem;
    background: rgba(0, 0, 0, 0.3);
}

.variant-generation-dialog .variant-character-image-name {
    font-size: 0.75rem;
    color: rgba(230, 230, 240, 0.65);
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variant-generation-dialog .variant-character-image-clear {
    padding: 0.35rem 0.6rem;
    background: rgba(239, 68, 68, 0.06);
    border: 1px solid rgba(239, 68, 68, 0.2);
    border-radius: 0.35rem;
    color: rgba(239, 68, 68, 0.85);
    font-size: 0.72rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.variant-generation-dialog .variant-character-image-clear:hover {
    background: rgba(239, 68, 68, 0.14);
    color: #ef4444;
}

/* Desc slot — vertical stack: header (label + vision btn) → textarea → meta */
.variant-generation-dialog .variant-character-desc-slot {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
    min-width: 0;   /* allows textarea to shrink within grid */
}

.variant-generation-dialog .variant-character-desc-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.variant-generation-dialog .variant-character-desc-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: #ffffff;
}

.variant-generation-dialog .variant-character-vision-btn {
    padding: 0.4rem 0.75rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.15), rgba(59, 130, 246, 0.12));
    border: 1px solid rgba(139, 92, 246, 0.35);
    border-radius: 0.4rem;
    color: #c4b5fd;
    font-size: 0.78rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.variant-generation-dialog .variant-character-vision-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.25), rgba(59, 130, 246, 0.2));
    border-color: rgba(139, 92, 246, 0.6);
    color: #ffffff;
}

.variant-generation-dialog .variant-character-vision-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.variant-generation-dialog .variant-character-desc-textarea {
    width: 100%;
    box-sizing: border-box;
    min-height: 6rem;
    padding: 0.7rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.variant-generation-dialog .variant-character-desc-textarea:focus {
    outline: none;
    border-color: rgba(139, 92, 246, 0.6);
    background: rgba(255, 255, 255, 0.07);
}

.variant-generation-dialog .variant-character-desc-textarea::placeholder {
    color: rgba(230, 230, 240, 0.35);
    line-height: 1.4;
}

.variant-generation-dialog .variant-character-desc-meta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    font-size: 0.78rem;
}

.variant-generation-dialog .variant-character-desc-count {
    color: rgba(230, 230, 240, 0.55);
    font-weight: 500;
    letter-spacing: 0.01em;
}

.variant-generation-dialog .variant-character-desc-count.valid {
    color: #22c55e;
}

.variant-generation-dialog .variant-character-desc-count.invalid {
    color: #f59e0b;
}

.variant-generation-dialog .variant-character-desc-status {
    color: #22c55e;
    font-weight: 500;
}

.variant-generation-dialog .variant-character-desc-status.invalid {
    color: #f59e0b;
}

/* Add character button — dashed border, prominent CTA */
.variant-generation-dialog .variant-character-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(99, 102, 241, 0.85));
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 0.5rem;
    color: #ffffff;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.variant-generation-dialog .variant-character-add-btn:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(99, 102, 241, 1));
    border-color: rgba(139, 92, 246, 0.7);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    transform: translateY(-1px);
}

.variant-generation-dialog .variant-character-add-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Responsive collapse — character body stacks vertically below 640px viewport */
@media (max-width: 640px) {
    .variant-generation-dialog .variant-character-body {
        grid-template-columns: 1fr;
    }
    .variant-generation-dialog .variant-character-header {
        flex-wrap: wrap;
    }
    .variant-generation-dialog .variant-character-name-input {
        flex: 1 1 100%;
        order: 1;
    }
    .variant-generation-dialog .variant-character-role-select {
        flex: 1 1 auto;
        width: auto;
        order: 2;
    }
    .variant-generation-dialog .variant-character-remove {
        order: 3;
    }
}

/* End Ship K.2a — Character Section CSS */


/* ═════════════════════════════════════════════════════════════════════
 * Ship K.2b (v0.22.99) — Universal Field Layout Polish
 *
 * Follow-on to Ship K.2a. Refines the visual balance of the Generate Variant
 * modal WITHOUT touching dialog max-width (which uses inline !important per
 * empirical fix v0.22.80 — see vault Case 8).
 *
 * Deltas:
 *   1. .variant-form gap increased 1.35 → 1.6rem (more breathing room between fields)
 *   2. All textareas guaranteed min-height 5.5rem (readable multiline default)
 *   3. Pillar chip min-width floor: prevents chips from becoming too narrow
 *      when the pillar list is short (e.g. 2-3 pillars would otherwise stretch)
 *   4. Radio row + pillar grid slight gap increase for tap-target clarity
 *   5. Field labels: text-transform uppercase small-caps for visual hierarchy
 * ═════════════════════════════════════════════════════════════════════ */

/* Increased vertical spacing between form fields */
.variant-generation-dialog .variant-form {
    gap: 1.6rem !important;
}

/* Textareas: guaranteed comfortable min-height for readability */
.variant-generation-dialog .variant-textarea {
    min-height: 5.5rem !important;
    line-height: 1.5;
}

/* Character section textareas — already have min-height: 6rem from K.2a */

/* Pillar chip refinements: min-width so chips maintain consistent size */
.variant-generation-dialog .variant-pillar-chip {
    min-width: 145px;
    max-width: 260px;
    flex: 0 1 auto;
}

/* Radio row - slightly increased gap for tap-target clarity */
.variant-generation-dialog .variant-radio-row {
    gap: 0.85rem !important;
}

/* Field labels — enhanced visual hierarchy via letter-spacing */
.variant-generation-dialog .variant-field-label > span:first-child {
    letter-spacing: 0.01em;
}

/* Field hint — improved contrast */
.variant-generation-dialog .variant-field-hint {
    color: rgba(230, 230, 240, 0.62) !important;
    line-height: 1.45 !important;
}

/* Input focus state — clearer indication */
.variant-generation-dialog .variant-input:focus,
.variant-generation-dialog .variant-textarea:focus,
.variant-generation-dialog .variant-select:focus {
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.18);
}

/* Submit button state improvements */
.variant-generation-dialog .variant-btn-primary:not(:disabled) {
    background: linear-gradient(135deg, #8b5cf6 0%, #3b82f6 100%);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.28);
}

.variant-generation-dialog .variant-btn-primary:not(:disabled):hover {
    box-shadow: 0 6px 20px rgba(139, 92, 246, 0.4);
    transform: translateY(-1px);
}

/* Error banner - improved visibility */
.variant-generation-dialog .variant-error-banner {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.88rem;
    margin-top: 0.5rem;
}

/* Responsive: below 640px, pillar chips take full width */
@media (max-width: 640px) {
    .variant-generation-dialog .variant-pillar-chip {
        min-width: 100%;
        max-width: 100%;
    }
}

/* End Ship K.2b — Universal Field Layout Polish */


/* ═══════════════════════════════════════════════════════════════════
 * Ship K.3 (v0.23.0) — Great Variant Modal CSS Consolidation
 * Authoritative rule block for .variant-generation-dialog
 *
 * PURPOSE: Resolve cascade chaos from 5+ prior ships that left duplicate
 * and conflicting rules for variant modal classes (11+ rules for .variant-field,
 * 8+ for .variant-pillar-chip, 4+ for .variant-radio-row, etc). This block
 * REDEFINES every visual property scoped to .variant-generation-dialog with
 * !important on critical layout properties (display, grid-template-columns,
 * flex-direction, width, box-sizing) to guarantee cascade-order + specificity
 * win over all legacy duplicates above.
 *
 * PRESERVES: Ship K.1e header/footer button relocation (Close + Generate
 * variant now in top provenance section) — those styles are in the parent
 * .style-template-detail-* namespace, not here.
 *
 * PRESERVES: Ship K.2a character section styling (.variant-character-*)
 * — those rules remain untouched above.
 *
 * PRESERVES: Ship I.19a5/a8 inline+!important sizing on <dialog> element
 * — this block does NOT touch dialog max-width/width/max-height.
 * ═══════════════════════════════════════════════════════════════════ */

/* ─── K.3.1 Modal chrome: header + eyebrow + title + subtitle ─────── */
/* CRITICAL: Do NOT set display on the <dialog> element itself — the browser
 * toggles display: none ↔ display: block via the [open] attribute when
 * showModal()/close() is called. Setting display: flex !important here
 * forces the dialog to render ALWAYS OPEN (Ship K.3 bug — hotfix K.3a).
 * Style the .variant-generation-content wrapper inside the dialog instead. */
.variant-generation-dialog[open] {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    border-radius: 14px !important;
    background: linear-gradient(180deg, #12131b 0%, #0d0e14 100%) !important;
    box-shadow: 0 25px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(139, 92, 246, 0.12) !important;
    color: #e6e6f0 !important;
}

.variant-generation-dialog .variant-generation-content {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
}

.variant-generation-dialog .variant-generation-header {
    display: flex !important;
    align-items: flex-start !important;
    justify-content: space-between !important;
    gap: 1.25rem !important;
    padding: 1.65rem 2rem 1.35rem !important;
    border-bottom: 1px solid rgba(139, 92, 246, 0.14) !important;
    background: linear-gradient(180deg, rgba(139, 92, 246, 0.06) 0%, transparent 100%) !important;
    flex-shrink: 0 !important;
}

.variant-generation-dialog .variant-generation-eyebrow {
    display: block !important;
    font-size: 0.7rem !important;
    color: #a78bfa !important;
    letter-spacing: 0.14em !important;
    text-transform: uppercase !important;
    font-weight: 700 !important;
    margin-bottom: 0.45rem !important;
}

.variant-generation-dialog .variant-generation-title {
    display: block !important;
    font-size: 1.55rem !important;
    line-height: 1.25 !important;
    letter-spacing: -0.015em !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    margin: 0 0 0.4rem 0 !important;
}

.variant-generation-dialog .variant-generation-subtitle {
    display: block !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    color: rgba(230, 230, 240, 0.62) !important;
    margin: 0 !important;
    font-weight: 400 !important;
}

/* Modal close button (top-right ×) */
.variant-generation-dialog .app-dialog-close,
.variant-generation-dialog .variant-generation-close {
    all: unset !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: 8px !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: rgba(230, 230, 240, 0.7) !important;
    font-size: 1.15rem !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
    flex-shrink: 0 !important;
    border: 1px solid rgba(255, 255, 255, 0.06) !important;
}
.variant-generation-dialog .app-dialog-close:hover,
.variant-generation-dialog .variant-generation-close:hover {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #fca5a5 !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
}

/* ─── K.3.2 Modal body ────────────────────────────────────────────── */
/* Ship K.5 (v0.23.4): removed !important from `display` property so Alpine's
   x-show can toggle this wrapper. See K.3.10 comment above for rationale. */
.variant-generation-dialog .variant-generation-body {
    display: block;
    flex: 1 1 auto !important;
    padding: 1.75rem 2rem 1.5rem !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    background: transparent !important;
}

/* ─── K.3.3 Modal footer (button row) ─────────────────────────────── */
.variant-generation-dialog .variant-generation-footer {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-end !important;
    gap: 0.75rem !important;
    padding: 1.15rem 2rem !important;
    border-top: 1px solid rgba(139, 92, 246, 0.12) !important;
    background: rgba(0, 0, 0, 0.35) !important;
    flex-shrink: 0 !important;
}

.variant-generation-dialog .variant-generation-footer .btn-secondary,
.variant-generation-dialog .variant-generation-footer button[type="button"]:not(.btn-primary) {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: rgba(230, 230, 240, 0.75) !important;
    padding: 0.65rem 1.35rem !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
}
.variant-generation-dialog .variant-generation-footer .btn-secondary:hover,
.variant-generation-dialog .variant-generation-footer button[type="button"]:not(.btn-primary):hover {
    background: rgba(255, 255, 255, 0.05) !important;
    border-color: rgba(255, 255, 255, 0.22) !important;
    color: #ffffff !important;
}

.variant-generation-dialog .variant-generation-footer .btn-primary {
    background: linear-gradient(145deg, #7c3aed 0%, #4f46e5 100%) !important;
    border: none !important;
    color: #ffffff !important;
    padding: 0.75rem 1.55rem !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.25) !important;
}
.variant-generation-dialog .variant-generation-footer .btn-primary:hover:not(:disabled) {
    background: linear-gradient(145deg, #8b5cf6 0%, #6366f1 100%) !important;
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35) !important;
    transform: translateY(-1px) !important;
}
.variant-generation-dialog .variant-generation-footer .btn-primary:disabled {
    opacity: 0.55 !important;
    cursor: not-allowed !important;
    transform: none !important;
}

/* ─── K.3.4 Form structure ────────────────────────────────────────── */
.variant-generation-dialog .variant-form {
    display: flex !important;
    flex-direction: column !important;
    gap: 1.6rem !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Ship K.6 (v0.23.5): removed !important from `display` property. This class
   is used for BOTH always-visible fields (editorial theme, VO direction) AND
   conditional x-show'd fields (Audio Family, Music track, Character section).
   The !important was forcing conditional fields to show on wrong templates.
   Layout preserved because always-visible fields have no inline display, so
   CSS `display: flex` still wins for them. See vault pitfall:
   Alpine-XShow-Defeated-By-Important-Display. */
.variant-generation-dialog .variant-field {
    display: flex;
    flex-direction: column !important;
    gap: 0.55rem !important;
    margin: 0 !important;
}

.variant-generation-dialog .variant-field-label {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.2rem !important;
    margin: 0 !important;
    color: #ffffff !important;
}

.variant-generation-dialog .variant-field-label > span:first-child {
    display: block !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    letter-spacing: 0.005em !important;
}

.variant-generation-dialog .variant-field-hint {
    display: block !important;
    font-size: 0.8rem !important;
    line-height: 1.5 !important;
    color: rgba(230, 230, 240, 0.58) !important;
    font-weight: 400 !important;
    margin: 0 !important;
}

.variant-generation-dialog .variant-field-optional {
    color: rgba(139, 92, 246, 0.72) !important;
    font-size: 0.78rem !important;
    font-weight: 500 !important;
    margin-left: 0.35rem !important;
}

.variant-generation-dialog .variant-required {
    color: #f87171 !important;
    font-weight: 700 !important;
    margin-left: 0.15rem !important;
}

/* ─── K.3.5 Textarea ──────────────────────────────────────────────── */
.variant-generation-dialog .variant-textarea {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: 6rem !important;
    padding: 0.85rem 1rem !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    line-height: 1.55 !important;
    resize: vertical !important;
    transition: border-color 150ms ease, background 150ms ease !important;
}
.variant-generation-dialog .variant-textarea::placeholder {
    color: rgba(230, 230, 240, 0.38) !important;
}
.variant-generation-dialog .variant-textarea:focus {
    outline: none !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    background: rgba(255, 255, 255, 0.055) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14) !important;
}

/* ─── K.3.6 Select (dropdown) ─────────────────────────────────────── */
.variant-generation-dialog .variant-select {
    display: block !important;
    width: 100% !important;
    box-sizing: border-box !important;
    padding: 0.75rem 2.5rem 0.75rem 1rem !important;
    background: rgba(255, 255, 255, 0.035) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path fill='%238b5cf6' d='M6 8L0 0h12z'/></svg>") !important;
    background-repeat: no-repeat !important;
    background-position: right 1rem center !important;
    background-size: 10px 7px !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 8px !important;
    color: #ffffff !important;
    font-family: inherit !important;
    font-size: 0.92rem !important;
    line-height: 1.4 !important;
    cursor: pointer !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    transition: border-color 150ms ease, background 150ms ease !important;
}
.variant-generation-dialog .variant-select:focus {
    outline: none !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    background-color: rgba(255, 255, 255, 0.055) !important;
    box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.14) !important;
}
.variant-generation-dialog .variant-select option {
    background: #12131b !important;
    color: #ffffff !important;
}

/* ─── K.3.7 Radio row + radio button ──────────────────────────────── */
.variant-generation-dialog .variant-radio-row {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important;
    gap: 0.65rem !important;
    margin-top: 0.3rem !important;
}

.variant-generation-dialog .variant-radio {
    display: flex !important;
    align-items: center !important;
    gap: 0.55rem !important;
    padding: 0.7rem 0.95rem !important;
    background: rgba(255, 255, 255, 0.035) !important;
    border: 1px solid rgba(255, 255, 255, 0.11) !important;
    border-radius: 8px !important;
    color: rgba(230, 230, 240, 0.85) !important;
    font-size: 0.88rem !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
    user-select: none !important;
}
.variant-generation-dialog .variant-radio:hover {
    background: rgba(139, 92, 246, 0.08) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: #ffffff !important;
}
.variant-generation-dialog .variant-radio input[type="radio"] {
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 16px !important;
    height: 16px !important;
    border: 2px solid rgba(255, 255, 255, 0.35) !important;
    border-radius: 50% !important;
    background: transparent !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    position: relative !important;
    transition: all 150ms ease !important;
    margin: 0 !important;
}
.variant-generation-dialog .variant-radio input[type="radio"]:checked {
    border-color: #a78bfa !important;
    background: radial-gradient(circle at center, #a78bfa 40%, transparent 45%) !important;
}
.variant-generation-dialog .variant-radio:has(input[type="radio"]:checked) {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.18) 0%, rgba(79, 70, 229, 0.12) 100%) !important;
    border-color: rgba(139, 92, 246, 0.55) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.25) !important;
}

/* ─── K.3.8 Pillar grid + pillar chip ─────────────────────────────── */
.variant-generation-dialog .variant-pillar-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
    gap: 0.6rem !important;
    margin-top: 0.3rem !important;
    grid-auto-flow: row !important;
}

.variant-generation-dialog .variant-pillar-chip {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.55rem !important;
    padding: 0.7rem 0.95rem !important;
    background: rgba(255, 255, 255, 0.03) !important;
    border: 1px solid rgba(255, 255, 255, 0.09) !important;
    border-radius: 8px !important;
    color: rgba(230, 230, 240, 0.82) !important;
    font-size: 0.85rem !important;
    cursor: pointer !important;
    transition: all 150ms ease !important;
    user-select: none !important;
    min-width: 0 !important;
    max-width: 100% !important;
    min-height: 3rem !important;
    box-sizing: border-box !important;
}
.variant-generation-dialog .variant-pillar-chip:hover {
    background: rgba(139, 92, 246, 0.08) !important;
    border-color: rgba(139, 92, 246, 0.35) !important;
    color: #ffffff !important;
}
.variant-generation-dialog .variant-pillar-chip.active {
    background: linear-gradient(145deg, rgba(139, 92, 246, 0.22) 0%, rgba(79, 70, 229, 0.16) 100%) !important;
    border-color: rgba(139, 92, 246, 0.6) !important;
    color: #ffffff !important;
    box-shadow: 0 0 0 1px rgba(139, 92, 246, 0.28), 0 2px 6px rgba(139, 92, 246, 0.15) !important;
}
.variant-generation-dialog .variant-pillar-name {
    display: block !important;
    flex: 1 1 auto !important;
    font-weight: 500 !important;
    color: inherit !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
    font-size: 0.87rem !important;
}
.variant-generation-dialog .variant-pillar-count {
    display: inline-block !important;
    flex-shrink: 0 !important;
    font-size: 0.72rem !important;
    font-weight: 500 !important;
    color: rgba(230, 230, 240, 0.5) !important;
    background: rgba(255, 255, 255, 0.05) !important;
    padding: 0.15rem 0.5rem !important;
    border-radius: 999px !important;
    letter-spacing: 0.02em !important;
}
.variant-generation-dialog .variant-pillar-chip.active .variant-pillar-count {
    background: rgba(139, 92, 246, 0.22) !important;
    color: #d8c7ff !important;
}

/* ─── K.3.9 Error banner ──────────────────────────────────────────── */
/* Ship K.6 (v0.23.5): removed !important from `display` property so Alpine's
   x-show="variantError" can hide the empty error container. Was rendering as
   a red bar in the modal even when variantError was null. Third instance of
   K.3 !important-vs-x-show reactivity conflict. See vault pitfall:
   Alpine-XShow-Defeated-By-Important-Display. */
.variant-generation-dialog .variant-error-banner {
    display: flex;
    align-items: flex-start !important;
    gap: 0.6rem !important;
    padding: 0.85rem 1.1rem !important;
    background: rgba(239, 68, 68, 0.09) !important;
    border: 1px solid rgba(239, 68, 68, 0.35) !important;
    border-left: 3px solid #ef4444 !important;
    color: #fca5a5 !important;
    font-size: 0.88rem !important;
    line-height: 1.5 !important;
    border-radius: 8px !important;
    margin-top: 0.5rem !important;
}

/* ─── K.3.10 Loading + submitting overlay states ──────────────────── */
/* Ship K.5 (v0.23.4): removed !important from `display` property so Alpine's
   x-show inline `display: none` can hide these elements. Other properties keep
   !important because they don't conflict with reactivity. See vault pitfall:
   Alpine-XShow-Overridden-By-Important-CSS-Anti-Pattern. */
.variant-generation-dialog .variant-loading,
.variant-generation-dialog .variant-submitting {
    display: flex;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 1rem !important;
    padding: 2.5rem 2rem !important;
    color: rgba(230, 230, 240, 0.75) !important;
    text-align: center !important;
}
.variant-generation-dialog .variant-submitting-title {
    display: block !important;
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
    margin: 0 !important;
}
.variant-generation-dialog .variant-submitting-text {
    display: block !important;
    font-size: 0.92rem !important;
    color: rgba(230, 230, 240, 0.7) !important;
    margin: 0 !important;
}
.variant-generation-dialog .variant-submitting-detail {
    display: block !important;
    font-size: 0.82rem !important;
    color: rgba(230, 230, 240, 0.5) !important;
    line-height: 1.5 !important;
    max-width: 42ch !important;
    margin: 0 !important;
}

/* ─── K.3.11 Responsive breakpoints ───────────────────────────────── */
@media (max-width: 720px) {
    .variant-generation-dialog .variant-generation-header {
        padding: 1.35rem 1.4rem 1.15rem !important;
    }
    .variant-generation-dialog .variant-generation-body {
        padding: 1.35rem 1.4rem 1.15rem !important;
    }
    .variant-generation-dialog .variant-generation-footer {
        padding: 1rem 1.4rem !important;
    }
    .variant-generation-dialog .variant-generation-title {
        font-size: 1.35rem !important;
    }
    .variant-generation-dialog .variant-radio-row {
        grid-template-columns: 1fr !important;
    }
    .variant-generation-dialog .variant-pillar-grid {
        grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important;
    }
}

/* End Ship K.3 — Great Variant Modal CSS Consolidation */


/* ═════════════════════════════════════════════════════════════
 * Ship O.3 (v0.25.0) — Character Sheet UI + Character Library Pillar
 * ═════════════════════════════════════════════════════════════
 * Adds two visual features:
 *   1. .variant-character-sheet-slot — in-card sheet generation flow (Generate Variant modal)
 *   2. .character-library-* — dedicated pillar page for browsing all generated sheets
 * ═════════════════════════════════════════════════════════════ */

/* ─── Character sheet slot inside variant character card ─── */
.variant-character-sheet-slot {
    grid-column: 1 / -1;
    margin-top: 0.75rem;
    padding: 0.85rem 1rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 0.55rem;
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
}
.variant-character-sheet-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 1rem;
    flex-wrap: wrap;
}
.variant-character-sheet-label {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-primary);
}
.variant-character-sheet-hint {
    font-weight: 400;
    font-size: 0.72rem;
    color: var(--text-secondary);
    opacity: 0.85;
}
.variant-character-sheet-status {
    display: inline-flex;
    padding: 0.2rem 0.55rem;
    border-radius: 0.35rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.variant-character-sheet-status.cached {
    background: rgba(126, 219, 123, 0.15);
    color: #7edb7b;
    border: 1px solid rgba(126, 219, 123, 0.3);
}
.variant-character-sheet-status.fresh {
    background: rgba(139, 116, 240, 0.15);
    color: #b39ff6;
    border: 1px solid rgba(139, 116, 240, 0.35);
}
.variant-character-sheet-generate {
    padding: 0.65rem 1rem;
    background: linear-gradient(135deg, rgba(139, 116, 240, 0.15), rgba(88, 100, 220, 0.12));
    border: 1px solid rgba(139, 116, 240, 0.4);
    border-radius: 0.45rem;
    color: #d5c9ff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}
.variant-character-sheet-generate:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(139, 116, 240, 0.25), rgba(88, 100, 220, 0.2));
    border-color: rgba(139, 116, 240, 0.65);
    transform: translateY(-1px);
}
.variant-character-sheet-generate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.variant-character-sheet-preview {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
    align-items: stretch;
}
.variant-character-sheet-preview img {
    width: 100%;
    max-height: 320px;
    object-fit: contain;
    background: rgba(0, 0, 0, 0.25);
    border-radius: 0.4rem;
    border: 1px solid rgba(255, 255, 255, 0.06);
}
.variant-character-sheet-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.variant-character-sheet-regenerate,
.variant-character-sheet-download {
    flex: 1;
    min-width: 140px;
    padding: 0.5rem 0.8rem;
    font-size: 0.78rem;
    font-weight: 600;
    border-radius: 0.35rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.15s ease;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.variant-character-sheet-regenerate {
    background: rgba(255, 189, 68, 0.12);
    border: 1px solid rgba(255, 189, 68, 0.35);
    color: #ffcc66;
}
.variant-character-sheet-regenerate:hover:not(:disabled) {
    background: rgba(255, 189, 68, 0.2);
    border-color: rgba(255, 189, 68, 0.55);
}
.variant-character-sheet-regenerate:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.variant-character-sheet-download {
    background: rgba(126, 219, 123, 0.1);
    border: 1px solid rgba(126, 219, 123, 0.3);
    color: #a3e6a0;
}
.variant-character-sheet-download:hover {
    background: rgba(126, 219, 123, 0.18);
    border-color: rgba(126, 219, 123, 0.5);
}

/* ─── Character Library pillar page ─── */
.character-library-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.55rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.character-library-search {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 260px;
}
.character-library-filter {
    flex: 1;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.4rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    min-width: 200px;
}
.character-library-filter:focus {
    outline: none;
    border-color: rgba(139, 116, 240, 0.5);
}
.character-library-refresh {
    padding: 0.5rem 1rem;
    background: rgba(139, 116, 240, 0.15);
    border: 1px solid rgba(139, 116, 240, 0.35);
    border-radius: 0.4rem;
    color: #d5c9ff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}
.character-library-refresh:hover {
    background: rgba(139, 116, 240, 0.25);
}
.character-library-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.character-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Ship Q.6c — Character Library cards restyled to match sheet-picker purple shimmer aesthetic.
   Design language mirrors .sheet-picker-thumbnail (see CSS ~line 6871) so operators
   see identical visual treatment whether browsing the pillar or picking from Studio. */
.character-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}
.character-library-card:hover {
    border-color: rgba(160, 140, 255, 0.55);
    box-shadow: 0 8px 24px rgba(120, 90, 220, 0.25);
    transform: translateY(-2px);
}

.character-library-preview {
    position: relative;
    aspect-ratio: 4 / 5;
    background: rgba(10, 5, 25, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.character-library-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}
.character-library-card:hover .character-library-preview img {
    transform: scale(1.03);
}
/* Purple gradient overlay on hover — matches sheet-picker hover-overlay */
.character-library-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(90, 60, 200, 0.35) 100%);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.character-library-card:hover .character-library-preview::after {
    opacity: 1;
}

.character-library-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}
.character-library-name {
    font-size: 15px;
    font-weight: 600;
    color: #f5f0ff;
    letter-spacing: 0.2px;
}
.character-library-desc {
    font-size: 12px;
    color: rgba(220, 210, 255, 0.65);
    line-height: 1.4;
    min-height: 34px;
}
.character-library-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
/* Meta chips — colored variants matching sheet-picker convention:
   cost = green, model = purple, date = amber */
.character-library-model,
.character-library-cost,
.character-library-cost {
    background: rgba(90, 200, 140, 0.15);
    border-color: rgba(90, 200, 140, 0.3);
    color: #a5f5c0;
}
.character-library-created {
    font-size: 11px;
    color: rgba(220, 210, 255, 0.5);
    font-family: 'SF Mono', 'Menlo', monospace;
    margin-top: 2px;
}

/* Actions — Download and Delete buttons */
.character-library-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.character-library-download {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(135deg, rgba(120, 90, 220, 0.5), rgba(90, 60, 200, 0.65));
    color: #fff;
    border: 1px solid rgba(160, 140, 255, 0.55);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    line-height: 1.4;
}
.character-library-download:hover {
    background: linear-gradient(135deg, rgba(140, 110, 240, 0.7), rgba(110, 80, 220, 0.85));
    border-color: rgba(180, 160, 255, 0.85);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}
.character-library-delete {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(220, 90, 90, 0.15);
    color: rgba(255, 180, 180, 0.9);
    border: 1px solid rgba(220, 90, 90, 0.35);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 150ms ease;
    text-align: center;
    line-height: 1.4;
}
.character-library-delete:hover {
    background: rgba(240, 100, 100, 0.3);
    border-color: rgba(255, 130, 130, 0.6);
    color: #ffcccc;
}

@media (max-width: 720px) {
    .character-library-grid {
        grid-template-columns: 1fr;
    }
    .character-library-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
    .variant-character-sheet-preview img {
        max-height: 240px;
    }
}

/* End Ship O.3 (v0.25.0) — Character Sheet UI + Character Library Pillar */


/* ═════════════════════════════════════════════════════════════════
 * Ship O.6 (v0.26.2) — Character Sheet Picker Modal + inline picker buttons
 * ─────────────────────────────────────────────────────────────────
 * Backdrop z-index: 10000 (above Generate Variant modal at 9999)
 * Picker modal:     10001 (nested above backdrop)
 * Toasts (raised):  10500 (above picker so user sees confirmations)
 *
 * Design notes:
 * - Follows AxoCommand dark glassmorphism theme (rgba backgrounds, blur)
 * - Grid: repeat(auto-fill, minmax(280px, 1fr)) — responsive without breakpoints
 * - Alpine controls visibility via x-show; NEVER use !important on `display`
 *   (Ship K.6 lesson: !important-display fights x-show and leaves ghost elements)
 * - Scoped selectors under .sheet-picker-* prefix to avoid Ship K.3 cascade collisions
 * ═════════════════════════════════════════════════════════════════ */

/* Inline picker buttons in character card (no-sheet state) */
.variant-character-sheet-empty-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}
.variant-character-sheet-empty-actions .variant-character-sheet-generate {
    flex: 2 1 auto;
    min-width: 220px;
}
.variant-character-sheet-pick {
    flex: 1 1 auto;
    min-width: 160px;
    background: linear-gradient(135deg, rgba(120, 90, 220, 0.15), rgba(90, 60, 200, 0.25));
    color: #d5ccff;
    border: 1px solid rgba(140, 120, 240, 0.45);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-direction: column;
    line-height: 1.3;
}
.variant-character-sheet-pick:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(140, 110, 240, 0.25), rgba(110, 80, 220, 0.35));
    border-color: rgba(160, 140, 255, 0.7);
    transform: translateY(-1px);
}
.variant-character-sheet-pick:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.variant-character-sheet-pick-hint {
    font-size: 11px;
    opacity: 0.75;
    font-weight: 400;
}

/* Inline picker buttons in character card (has-sheet state — Swap + Clear) */
.variant-character-sheet-pick-swap,
.variant-character-sheet-clear {
    background: rgba(255, 255, 255, 0.05);
    color: rgba(255, 255, 255, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 150ms ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.variant-character-sheet-pick-swap:hover:not(:disabled) {
    background: rgba(140, 110, 240, 0.2);
    border-color: rgba(160, 140, 255, 0.5);
}
.variant-character-sheet-clear:hover:not(:disabled) {
    background: rgba(220, 90, 90, 0.2);
    border-color: rgba(240, 120, 120, 0.5);
    color: #ffcccc;
}
.variant-character-sheet-pick-swap:disabled,
.variant-character-sheet-clear:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ═════ Picker Modal Backdrop + Container ═════ */
.sheet-picker-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 25, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}
.sheet-picker-modal {
    position: relative;
    z-index: 10001;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    background: linear-gradient(180deg, rgba(28, 22, 60, 0.98), rgba(20, 15, 45, 0.98));
    border: 1px solid rgba(140, 120, 240, 0.35);
    border-radius: 14px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #eae5ff;
}

/* Header */
.sheet-picker-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(140, 120, 240, 0.2);
    background: rgba(50, 35, 100, 0.25);
}
.sheet-picker-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}
.sheet-picker-modal-title-icon {
    font-size: 22px;
    filter: drop-shadow(0 0 8px rgba(160, 140, 255, 0.5));
}
.sheet-picker-modal-title-hint {
    font-size: 13px;
    color: rgba(220, 210, 255, 0.55);
    font-weight: 400;
}
.sheet-picker-modal-close {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.sheet-picker-modal-close:hover {
    background: rgba(220, 90, 90, 0.2);
    color: #ffcccc;
    border-color: rgba(240, 120, 120, 0.5);
}

/* Controls (filter/sort/overwrite) */
.sheet-picker-modal-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(140, 120, 240, 0.15);
    background: rgba(30, 25, 65, 0.6);
    flex-wrap: wrap;
}
.sheet-picker-filter-input {
    flex: 1 1 240px;
    background: rgba(15, 10, 40, 0.7);
    color: #eae5ff;
    border: 1px solid rgba(140, 120, 240, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 150ms ease;
}
.sheet-picker-filter-input:focus {
    border-color: rgba(160, 140, 255, 0.6);
}
.sheet-picker-sort-select {
    background: rgba(15, 10, 40, 0.7);
    color: #eae5ff;
    border: 1px solid rgba(140, 120, 240, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    min-width: 160px;
}
.sheet-picker-overwrite-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(220, 210, 255, 0.85);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}
.sheet-picker-overwrite-label input[type="checkbox"] {
    accent-color: #a090ff;
    cursor: pointer;
}

/* Body — scrollable content area */
.sheet-picker-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 24px;
    min-height: 200px;
}
.sheet-picker-loading,
.sheet-picker-error,
.sheet-picker-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(220, 210, 255, 0.6);
    font-size: 14px;
}
.sheet-picker-error {
    color: rgba(240, 120, 120, 0.85);
}

/* Grid layout */
.sheet-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* Thumbnail card */
.sheet-picker-thumbnail {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    transition: all 200ms ease;
    display: flex;
    flex-direction: column;
}
.sheet-picker-thumbnail:hover {
    border-color: rgba(160, 140, 255, 0.55);
    box-shadow: 0 8px 24px rgba(120, 90, 220, 0.25);
    transform: translateY(-2px);
}
.sheet-picker-thumbnail-image-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    background: rgba(10, 5, 25, 0.5);
    overflow: hidden;
    cursor: pointer;
}
.sheet-picker-thumbnail-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}
.sheet-picker-thumbnail:hover .sheet-picker-thumbnail-image-wrap img {
    transform: scale(1.03);
}
.sheet-picker-thumbnail-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(90, 60, 200, 0.85) 100%);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}
.sheet-picker-thumbnail:hover .sheet-picker-thumbnail-hover-overlay {
    opacity: 1;
}

/* Metadata */
.sheet-picker-thumbnail-metadata {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}
.sheet-picker-thumbnail-name {
    font-size: 15px;
    font-weight: 600;
    color: #f5f0ff;
    letter-spacing: 0.2px;
}
.sheet-picker-thumbnail-desc {
    font-size: 12px;
    color: rgba(220, 210, 255, 0.65);
    line-height: 1.4;
    min-height: 34px;
}
.sheet-picker-thumbnail-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.sheet-picker-thumbnail-meta-chip {
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(140, 120, 240, 0.15);
    color: rgba(220, 210, 255, 0.85);
    border: 1px solid rgba(140, 120, 240, 0.2);
    font-family: 'SF Mono', 'Menlo', monospace;
}
.sheet-picker-thumbnail-meta-chip.cost { background: rgba(90, 200, 140, 0.15); border-color: rgba(90, 200, 140, 0.3); color: #a5f5c0; }
.sheet-picker-thumbnail-meta-chip.model { background: rgba(140, 120, 240, 0.15); border-color: rgba(140, 120, 240, 0.3); }
.sheet-picker-thumbnail-meta-chip.date { background: rgba(200, 160, 90, 0.12); border-color: rgba(200, 160, 90, 0.25); color: #f5d5a5; }

/* Thumbnail action buttons */
.sheet-picker-thumbnail-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.sheet-picker-thumbnail-pick-btn {
    flex: 1 1 auto;
    background: linear-gradient(135deg, rgba(120, 90, 220, 0.5), rgba(90, 60, 200, 0.65));
    color: #fff;
    border: 1px solid rgba(160, 140, 255, 0.55);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}
.sheet-picker-thumbnail-pick-btn:hover {
    background: linear-gradient(135deg, rgba(140, 110, 240, 0.7), rgba(110, 80, 220, 0.85));
    border-color: rgba(180, 160, 255, 0.85);
    transform: translateY(-1px);
}
.sheet-picker-thumbnail-delete-btn {
    background: rgba(220, 90, 90, 0.15);
    color: rgba(255, 180, 180, 0.9);
    border: 1px solid rgba(220, 90, 90, 0.35);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 150ms ease;
    width: 36px;
}
.sheet-picker-thumbnail-delete-btn:hover {
    background: rgba(240, 100, 100, 0.3);
    border-color: rgba(255, 130, 130, 0.6);
    color: #ffcccc;
}

/* Footer */
.sheet-picker-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid rgba(140, 120, 240, 0.2);
    background: rgba(20, 15, 45, 0.6);
    gap: 16px;
}
.sheet-picker-modal-footer-hint {
    font-size: 12px;
    color: rgba(220, 210, 255, 0.55);
    flex: 1 1 auto;
}
.sheet-picker-modal-cancel {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 150ms ease;
}
.sheet-picker-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Responsive tweaks — collapse controls on narrow screens */
@media (max-width: 720px) {
    .sheet-picker-modal-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .sheet-picker-filter-input,
    .sheet-picker-sort-select {
        width: 100%;
    }
    .sheet-picker-grid {
        grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    }
}
/* ═════ End Ship O.6 Character Sheet Picker CSS ═════ */


/* ═══════════════════════════════════════════════════════════════════════════
 * Ship Q.6b (v0.28.2) — Per-Shot Observability Dashboard styles
 * Collapsible metadata section on active studio job cards.
 * Palette: aligned with existing job-card blue/purple theme.
 * ═══════════════════════════════════════════════════════════════════════════ */
.shot-metadata-section {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px dashed rgba(139, 92, 246, 0.25);
}
.shot-metadata-toggle {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.4rem 0.6rem;
    background: rgba(139, 92, 246, 0.06);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 4px;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.78rem;
    font-weight: 500;
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.shot-metadata-toggle:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.35);
}
.shot-metadata-toggle-icon {
    display: inline-block;
    width: 0.9rem;
    font-size: 0.7rem;
    color: rgba(139, 92, 246, 0.9);
}
.shot-metadata-toggle-status {
    margin-left: auto;
    font-size: 0.7rem;
    opacity: 0.7;
    color: rgba(139, 92, 246, 0.9);
}
.shot-metadata-toggle-badge {
    margin-left: auto;
    font-size: 0.7rem;
    padding: 0.1rem 0.4rem;
    background: rgba(139, 92, 246, 0.2);
    border-radius: 3px;
    color: rgba(196, 181, 253, 1);
    font-weight: 600;
}
.shot-metadata-body {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: rgba(2, 6, 23, 0.4);
    border: 1px solid rgba(139, 92, 246, 0.15);
    border-radius: 4px;
}
.shot-metadata-error {
    color: #ff453a;
    font-size: 0.78rem;
    padding: 0.4rem 0;
}
.shot-metadata-empty {
    color: rgba(148, 163, 184, 0.75);
    font-size: 0.78rem;
    font-style: italic;
    padding: 0.4rem 0;
}
.shot-metadata-loading {
    color: rgba(139, 92, 246, 0.9);
    font-size: 0.78rem;
    padding: 0.4rem 0;
}
.shot-metadata-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(105px, 1fr));
    gap: 0.4rem;
    margin-bottom: 0.75rem;
}
.shot-metadata-card {
    padding: 0.5rem 0.6rem;
    background: rgba(59, 130, 246, 0.06);
    border: 1px solid rgba(59, 130, 246, 0.15);
    border-radius: 4px;
}
.shot-metadata-card-label {
    font-size: 0.68rem;
    color: rgba(148, 163, 184, 0.85);
    margin-bottom: 0.2rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.shot-metadata-card-value {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
    font-variant-numeric: tabular-nums;
}
.shot-metadata-histogram {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: 0.75rem;
    padding: 0.4rem 0;
    border-top: 1px solid rgba(139, 92, 246, 0.1);
    border-bottom: 1px solid rgba(139, 92, 246, 0.1);
    font-size: 0.72rem;
}
.shot-metadata-histogram-label {
    color: rgba(148, 163, 184, 0.85);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.65rem;
    margin-right: 0.25rem;
}
.shot-metadata-histogram-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    font-weight: 500;
    font-size: 0.7rem;
}
.shot-metadata-histogram-count {
    padding: 0.05rem 0.35rem;
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
    font-variant-numeric: tabular-nums;
    font-weight: 600;
}
.shot-metadata-mode-chip {
    display: inline-block;
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    white-space: nowrap;
}
/* Injection mode colors */
.imode-o4 {
    background: rgba(34, 197, 94, 0.15);
    border: 1px solid rgba(34, 197, 94, 0.3);
    color: rgba(134, 239, 172, 1);
}
.imode-fallback {
    background: rgba(251, 191, 36, 0.15);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: rgba(253, 224, 71, 1);
}
.imode-null {
    background: rgba(148, 163, 184, 0.1);
    border: 1px solid rgba(148, 163, 184, 0.2);
    color: rgba(148, 163, 184, 0.7);
}
.imode-other {
    background: rgba(139, 92, 246, 0.15);
    border: 1px solid rgba(139, 92, 246, 0.3);
    color: rgba(196, 181, 253, 1);
}
.shot-metadata-table-wrap {
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    border-radius: 4px;
    border: 1px solid rgba(139, 92, 246, 0.1);
}
.shot-metadata-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.72rem;
    font-variant-numeric: tabular-nums;
}
.shot-metadata-table th {
    position: sticky;
    top: 0;
    background: rgba(2, 6, 23, 0.95);
    padding: 0.4rem 0.5rem;
    text-align: left;
    font-weight: 600;
    color: rgba(196, 181, 253, 1);
    text-transform: uppercase;
    letter-spacing: 0.03em;
    font-size: 0.65rem;
    border-bottom: 1px solid rgba(139, 92, 246, 0.3);
    z-index: 1;
}
.shot-metadata-table td {
    padding: 0.35rem 0.5rem;
    border-bottom: 1px solid rgba(148, 163, 184, 0.08);
    color: rgba(226, 232, 240, 0.9);
}
.shot-metadata-table tbody tr:hover {
    background: rgba(139, 92, 246, 0.06);
}

/* ═════════ SHIP Q.4 PHASE 2 — Facial Sharpness Verdict Chips ═════════ */
.shot-sharpness-sharp,
.shot-sharpness-acceptable,
.shot-sharpness-blurry {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.shot-sharpness-sharp {
    background: rgba(34, 197, 94, 0.18);
    color: #4ade80;
    border: 1px solid rgba(34, 197, 94, 0.35);
}
.shot-sharpness-acceptable {
    background: rgba(251, 191, 36, 0.18);
    color: #fbbf24;
    border: 1px solid rgba(251, 191, 36, 0.35);
}
.shot-sharpness-blurry {
    background: rgba(239, 68, 68, 0.18);
    color: #f87171;
    border: 1px solid rgba(239, 68, 68, 0.35);
}

.shot-cache-hit {
    color: rgba(134, 239, 172, 1);
    font-weight: 500;
}
.shot-consistency-pass {
    color: rgba(134, 239, 172, 1);
    font-weight: 600;
}
.shot-consistency-fail {
    color: rgba(252, 165, 165, 1);
    font-weight: 600;
}


/* ============================================================
   Ship O.6e (v0.28.19) — Hybrid Variant-Regenerate Dialog
   ------------------------------------------------------------
   Scoped CSS for the dedicated regenerate dialog that offers
   default sheet-as-reference with optional custom-upload disclosure.
   NO !important on display properties (Alpine x-show discipline).
   ============================================================ */

.variant-regen-dialog {
    padding: 0;
    border: none;
    background: transparent;
    max-width: 560px;
    width: 92vw;
    max-height: 90vh;
    border-radius: 14px;
    overflow: visible;
    /* Ship O.6e-hotfix (v0.28.20): explicit margin:auto to force centering
       on all browsers — see .app-dialog L954-965 for the same discipline.
       Without this, dialog renders top-left instead of centered. */
    margin: auto;
}
.variant-regen-dialog::backdrop {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(6px);
}

.variant-regen-content {
    background: linear-gradient(145deg, rgba(20, 15, 50, 0.95) 0%, rgba(10, 10, 35, 0.95) 100%);
    border: 1px solid rgba(140, 120, 240, 0.25);
    border-radius: 14px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 40px rgba(120, 90, 220, 0.15);
    color: var(--text-primary, #e6e8ee);
    overflow: hidden;
}

.variant-regen-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(140, 120, 240, 0.15);
}
.variant-regen-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: #f0e8ff;
}
.variant-regen-header button {
    background: transparent;
    border: none;
    color: rgba(240, 232, 255, 0.6);
    font-size: 18px;
    cursor: pointer;
    width: 32px;
    height: 32px;
    border-radius: 8px;
    transition: all 180ms ease;
}
.variant-regen-header button:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.variant-regen-body {
    padding: 20px 24px;
}
.variant-regen-description {
    margin: 0 0 20px;
    font-size: 14px;
    line-height: 1.55;
    color: rgba(230, 232, 238, 0.85);
}

.variant-regen-ref-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(140, 120, 240, 0.15);
    border-radius: 10px;
    padding: 16px;
}
.variant-regen-ref-section h4 {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 600;
    color: rgba(240, 232, 255, 0.9);
    letter-spacing: 0.02em;
}

.variant-regen-ref-current {
    display: flex;
    gap: 12px;
    align-items: center;
    padding: 12px;
    background: rgba(10, 5, 25, 0.5);
    border-radius: 8px;
    margin-bottom: 14px;
}
.variant-regen-ref-current img {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid rgba(140, 120, 240, 0.3);
    background: #0a0514;
}
.variant-regen-ref-current-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}
.variant-regen-ref-current-info strong {
    font-size: 13px;
    font-weight: 600;
    color: #f0e8ff;
}
.variant-regen-ref-current-info span {
    font-size: 11px;
    color: rgba(230, 232, 238, 0.55);
}

.variant-regen-disclosure-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: transparent;
    border: 1px solid rgba(140, 120, 240, 0.18);
    border-radius: 8px;
    color: rgba(230, 220, 255, 0.75);
    font-size: 13px;
    cursor: pointer;
    text-align: left;
    transition: all 180ms ease;
}
.variant-regen-disclosure-toggle:hover {
    background: rgba(140, 120, 240, 0.08);
    border-color: rgba(140, 120, 240, 0.35);
    color: #f0e8ff;
}
.variant-regen-disclosure-toggle[aria-expanded="true"] {
    background: rgba(140, 120, 240, 0.1);
    border-color: rgba(140, 120, 240, 0.4);
    color: #f0e8ff;
}
.variant-regen-disclosure-toggle > span:first-child {
    font-family: monospace;
    font-size: 14px;
    width: 14px;
    display: inline-block;
    text-align: center;
}

.variant-regen-disclosure-content {
    margin-top: 12px;
    padding: 14px;
    background: rgba(10, 5, 25, 0.4);
    border: 1px solid rgba(140, 120, 240, 0.1);
    border-radius: 8px;
}

.variant-regen-dropzone {
    border: 2px dashed rgba(140, 120, 240, 0.3);
    border-radius: 8px;
    padding: 16px;
    text-align: center;
    transition: all 200ms ease;
    background: rgba(255, 255, 255, 0.02);
}
.variant-regen-dropzone.drag-over {
    border-color: rgba(160, 140, 255, 0.7);
    background: rgba(140, 120, 240, 0.08);
}

.variant-regen-dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.variant-regen-dropzone-empty button {
    background: rgba(140, 120, 240, 0.15);
    color: #f0e8ff;
    border: 1px solid rgba(140, 120, 240, 0.35);
    padding: 8px 16px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    transition: all 180ms ease;
}
.variant-regen-dropzone-empty button:hover {
    background: rgba(140, 120, 240, 0.25);
    border-color: rgba(160, 140, 255, 0.6);
}
.variant-regen-dropzone-empty span {
    font-size: 12px;
    color: rgba(230, 232, 238, 0.6);
}
.variant-regen-dropzone-empty small {
    font-size: 11px;
    color: rgba(230, 232, 238, 0.45);
    margin-top: 4px;
}

.variant-regen-dropzone-filled {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-content: center;
}
.variant-regen-dropzone-filled img {
    max-width: 120px;
    max-height: 120px;
    border-radius: 6px;
    border: 1px solid rgba(140, 120, 240, 0.4);
    object-fit: cover;
}
.variant-regen-dropzone-filled button {
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.35);
    width: 32px;
    height: 32px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    transition: all 180ms ease;
}
.variant-regen-dropzone-filled button:hover {
    background: rgba(239, 68, 68, 0.25);
    color: #fff;
}

.variant-regen-disclosure-hint {
    margin: 10px 0 0;
    font-size: 11px;
    color: rgba(230, 232, 238, 0.55);
    line-height: 1.4;
}

.variant-regen-footer {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 16px 24px 20px;
    border-top: 1px solid rgba(140, 120, 240, 0.15);
    background: rgba(0, 0, 0, 0.2);
}
.variant-regen-footer .btn-secondary {
    background: transparent;
    color: rgba(230, 232, 238, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.15);
    padding: 9px 18px;
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: all 180ms ease;
}
.variant-regen-footer .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
}
.variant-regen-footer .btn-primary {
    background: linear-gradient(135deg, rgba(140, 120, 240, 0.9) 0%, rgba(120, 90, 220, 0.9) 100%);
    color: #fff;
    border: 1px solid rgba(160, 140, 255, 0.5);
    padding: 9px 20px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 180ms ease;
    min-width: 180px;
}
.variant-regen-footer .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(160, 140, 255, 1) 0%, rgba(140, 110, 240, 1) 100%);
    box-shadow: 0 6px 20px rgba(140, 120, 240, 0.4);
    transform: translateY(-1px);
}
.variant-regen-footer .btn-primary:disabled {
    opacity: 0.55;
    cursor: wait;
}
/* End Ship O.6e */


/* ═════════════════════════════════════════════════════════════════════════ */
/* Ship S.1 (v0.28.30) — Add Character from Library Page                     */
/* Modal dialog on the Characters pillar for direct character sheet creation.*/
/* Based on Native-Dialog-Reactive-Framework-Integration pattern (14 gotchas)*/
/* ═════════════════════════════════════════════════════════════════════════ */

/* Toolbar button */
.character-library-add {
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.15s ease;
    margin-left: 8px;
}
.character-library-add:hover {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
}
.character-library-add:active { transform: translateY(0); }

/* Dialog shell — extends .app-dialog base (Gotcha 9: margin: auto for centering) */
.add-character-dialog {
    margin: auto;
    max-width: 640px;
    width: 90vw;
    max-height: 90vh;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(23, 27, 38, 0.98);
    color: #e5e7eb;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    backdrop-filter: blur(20px);
}
.add-character-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}
.add-character-dialog[open] {
    animation: addCharacterDialogIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes addCharacterDialogIn {
    from { opacity: 0; transform: scale(0.95) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.add-character-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.add-character-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.add-character-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.add-character-header button {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.add-character-header button:hover { background: rgba(255, 255, 255, 0.06); color: #f1f5f9; }

.add-character-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.add-character-field { margin-bottom: 18px; }
.add-character-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 6px;
}
.add-character-field input[type="text"],
.add-character-field textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.add-character-field input[type="text"]:focus,
.add-character-field textarea:focus {
    outline: none;
    border-color: rgba(20, 184, 166, 0.6);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}
.add-character-field input:disabled,
.add-character-field textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.add-character-char-count {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 400;
}
.add-character-char-count.valid { color: #10b981; }
.add-character-field-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
    font-weight: 400;
}

.add-character-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-character-dropzone.drag-over {
    border-color: rgba(20, 184, 166, 0.6);
    background: rgba(20, 184, 166, 0.08);
}
.add-character-dropzone-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.add-character-dropzone-empty button {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.add-character-dropzone-empty button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.add-character-dropzone-empty button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.add-character-dropzone-empty span { font-size: 0.85rem; color: #94a3b8; }
.add-character-dropzone-empty small { font-size: 0.7rem; color: #64748b; }

.add-character-dropzone-filled {
    position: relative;
    display: inline-block;
}
.add-character-dropzone-filled img {
    max-height: 160px;
    max-width: 100%;
    border-radius: 8px;
    display: block;
}
.add-character-dropzone-filled button {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: 2px solid #0f172a;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.add-character-error {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
    margin-top: 12px;
}

.add-character-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.add-character-footer .btn-secondary {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}
.add-character-footer .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}
.add-character-footer .btn-primary {
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.add-character-footer .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
}
.add-character-footer button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Ship AF.0b: Add Location modal CSS (cloned from Add Character, byte-exact) --- */
/* Dialog shell — extends .app-dialog base (Gotcha 9: margin: auto for centering) */
.add-location-dialog {
    margin: auto;
    max-width: 640px;
    width: 90vw;
    max-height: 90vh;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(23, 27, 38, 0.98);
    color: #e5e7eb;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    backdrop-filter: blur(20px);
}
.add-location-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}
.add-location-dialog[open] {
    animation: addLocationDialogIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes addLocationDialogIn {
    from { opacity: 0; transform: scale(0.95) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.add-location-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.add-location-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.add-location-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.add-location-header button {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.add-location-header button:hover { background: rgba(255, 255, 255, 0.06); color: #f1f5f9; }

.add-location-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.add-location-field { margin-bottom: 18px; }
.add-location-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 6px;
}
.add-location-field input[type="text"],
.add-location-field textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.add-location-field input[type="text"]:focus,
.add-location-field textarea:focus {
    outline: none;
    border-color: rgba(20, 184, 166, 0.6);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}
.add-location-field input:disabled,
.add-location-field textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.add-location-char-count {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 400;
}
.add-location-char-count.valid { color: #10b981; }
.add-location-field-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
    font-weight: 400;
}

.add-location-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-location-dropzone.drag-over {
    border-color: rgba(20, 184, 166, 0.6);
    background: rgba(20, 184, 166, 0.08);
}
.add-location-dropzone-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.add-location-dropzone-empty button {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.add-location-dropzone-empty button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.add-location-dropzone-empty button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.add-location-dropzone-empty span { font-size: 0.85rem; color: #94a3b8; }
.add-location-dropzone-empty small { font-size: 0.7rem; color: #64748b; }

.add-location-dropzone-filled {
    position: relative;
    display: inline-block;
}
.add-location-dropzone-filled img {
    max-height: 160px;
    max-width: 100%;
    border-radius: 8px;
    display: block;
}
.add-location-dropzone-filled button {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: 2px solid #0f172a;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.add-location-error {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
    margin-top: 12px;
}

.add-location-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.add-location-footer .btn-secondary {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}
.add-location-footer .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}
.add-location-footer .btn-primary {
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.add-location-footer .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
}
.add-location-footer button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@keyframes addLocationDialogIn {
    from { opacity: 0; transform: scale(0.95) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- Ship AF.0b: Add Object modal CSS (cloned from Add Character, byte-exact) --- */
/* Dialog shell — extends .app-dialog base (Gotcha 9: margin: auto for centering) */
.add-object-dialog {
    margin: auto;
    max-width: 640px;
    width: 90vw;
    max-height: 90vh;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(23, 27, 38, 0.98);
    color: #e5e7eb;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    backdrop-filter: blur(20px);
}
.add-object-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}
.add-object-dialog[open] {
    animation: addObjectDialogIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes addObjectDialogIn {
    from { opacity: 0; transform: scale(0.95) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.add-object-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}
.add-object-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}
.add-object-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }
.add-object-header button {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}
.add-object-header button:hover { background: rgba(255, 255, 255, 0.06); color: #f1f5f9; }

.add-object-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}
.add-object-field { margin-bottom: 18px; }
.add-object-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 6px;
}
.add-object-field input[type="text"],
.add-object-field textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}
.add-object-field input[type="text"]:focus,
.add-object-field textarea:focus {
    outline: none;
    border-color: rgba(20, 184, 166, 0.6);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}
.add-object-field input:disabled,
.add-object-field textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.add-object-char-count {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 400;
}
.add-object-char-count.valid { color: #10b981; }
.add-object-field-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
    font-weight: 400;
}

.add-object-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.add-object-dropzone.drag-over {
    border-color: rgba(20, 184, 166, 0.6);
    background: rgba(20, 184, 166, 0.08);
}
.add-object-dropzone-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}
.add-object-dropzone-empty button {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.add-object-dropzone-empty button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}
.add-object-dropzone-empty button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.add-object-dropzone-empty span { font-size: 0.85rem; color: #94a3b8; }
.add-object-dropzone-empty small { font-size: 0.7rem; color: #64748b; }

.add-object-dropzone-filled {
    position: relative;
    display: inline-block;
}
.add-object-dropzone-filled img {
    max-height: 160px;
    max-width: 100%;
    border-radius: 8px;
    display: block;
}
.add-object-dropzone-filled button {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: 2px solid #0f172a;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.add-object-error {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
    margin-top: 12px;
}

.add-object-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}
.add-object-footer .btn-secondary {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}
.add-object-footer .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}
.add-object-footer .btn-primary {
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
}
.add-object-footer .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
}
.add-object-footer button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

@keyframes addObjectDialogIn {
    from { opacity: 0; transform: scale(0.95) translateY(4px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

/* --- End Ship AF.0b dialog CSS clone --- */


/* ═════ End Ship S.1 ═════ */


/* ═════ Ship U.0 (v0.28.35) — Editorial Theme LLM Enrichment ═════ */
/* UI sits above the editorial_theme textarea in the Generate Variant modal. */
/* Visual identity: subtle purple/magenta tone for "LLM assistance" accent. */
/* See [[Editorial-Brief-LLM-Enrichment-Pattern]] in vault for design rationale. */

.variant-field-seed-enrich {
    background: linear-gradient(135deg, rgba(147, 51, 234, 0.04), rgba(236, 72, 153, 0.03));
    border-left: 3px solid rgba(147, 51, 234, 0.4);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 14px;
}

.variant-field-seed-enrich .variant-field-label span:first-child {
    color: #d8b4fe; /* Light purple accent for the "✨ Seed idea" label */
}

.variant-seed-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
    margin-top: 4px;
}

.variant-seed-input {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 14px;
    padding: 9px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #e5e7eb;
    border-radius: 5px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.variant-seed-input:focus {
    outline: none;
    border-color: rgba(147, 51, 234, 0.5);
    box-shadow: 0 0 0 3px rgba(147, 51, 234, 0.1);
}

.variant-seed-input:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.variant-seed-enrich-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    background: linear-gradient(135deg, #9333ea, #ec4899);
    color: white;
    border: none;
    padding: 9px 16px;
    font-weight: 500;
    border-radius: 5px;
    cursor: pointer;
    transition: opacity 0.15s ease, transform 0.1s ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.variant-seed-enrich-btn:hover:not(:disabled) {
    opacity: 0.9;
    transform: translateY(-1px);
}

.variant-seed-enrich-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.variant-seed-spinner-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
}

.variant-seed-spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

.variant-seed-char-count {
    text-align: right;
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 4px;
    font-variant-numeric: tabular-nums;
}

.variant-seed-undo-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 8px;
    padding: 7px 10px;
    background: rgba(34, 197, 94, 0.08);
    border: 1px solid rgba(34, 197, 94, 0.25);
    border-radius: 5px;
    animation: variant-seed-undo-slide-in 0.25s ease-out;
}

@keyframes variant-seed-undo-slide-in {
    from { opacity: 0; transform: translateY(-6px); }
    to { opacity: 1; transform: translateY(0); }
}

.variant-seed-success-badge {
    color: #86efac; /* Light green */
    font-size: 12px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.variant-seed-success-badge span {
    font-variant-numeric: tabular-nums;
    color: #4ade80;
    font-weight: 600;
}

.variant-seed-undo-btn {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 4px 10px;
    background: transparent;
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.variant-seed-undo-btn:hover {
    background: rgba(34, 197, 94, 0.15);
    border-color: rgba(34, 197, 94, 0.5);
}


/* ─────────────────────────────────────────────────────────────────
 * Ship X.0 (v0.28.40) — View Final Output button on Active Jobs completed card
 * Per Active-Jobs-Persistent-Tile-Pattern R-3 (Semantic Color Discipline):
 * complete state anchor = rgba(74, 222, 128, ...) green.
 * Per R-6 (observability actions gate on data presence) — visibility is
 * controlled by Alpine x-show in the host template, not CSS.
 * ───────────────────────────────────────────────────────────────── */
.job-view-output-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgb(74, 222, 128);
    background: rgba(74, 222, 128, 0.12);
    border: 1px solid rgba(74, 222, 128, 0.35);
    border-radius: 0.4rem;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
    white-space: nowrap;
    flex-shrink: 0;
}
.job-view-output-btn:hover {
    background: rgba(74, 222, 128, 0.2);
    border-color: rgba(74, 222, 128, 0.6);
}
.job-view-output-btn:active {
    transform: scale(0.97);
}
.job-view-output-btn:focus-visible {
    outline: 2px solid rgba(74, 222, 128, 0.6);
    outline-offset: 2px;
}


/* ═══════════════════════════════════════════════════════════════════════════
 * Ship AF.0 — Locations & Objects Library CSS (mirror of character-library-*)
 * ═══════════════════════════════════════════════════════════════════════════ */

/* --- Location Library grid + card --- */
/* ─── Character Library pillar page ─── */
.location-library-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.55rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.location-library-search {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 260px;
}

.location-library-filter {
    flex: 1;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.4rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    min-width: 200px;
}

.location-library-filter:focus {
    outline: none;
    border-color: rgba(139, 116, 240, 0.5);
}

.location-library-refresh {
    padding: 0.5rem 1rem;
    background: rgba(139, 116, 240, 0.15);
    border: 1px solid rgba(139, 116, 240, 0.35);
    border-radius: 0.4rem;
    color: #d5c9ff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.location-library-refresh:hover {
    background: rgba(139, 116, 240, 0.25);
}

.location-library-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.location-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Ship Q.6c — Character Library cards restyled to match sheet-picker purple shimmer aesthetic.
   Design language mirrors .sheet-picker-thumbnail (see CSS ~line 6871) so operators
   see identical visual treatment whether browsing the pillar or picking from Studio. */
.location-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}

.location-library-card:hover {
    border-color: rgba(160, 140, 255, 0.55);
    box-shadow: 0 8px 24px rgba(120, 90, 220, 0.25);
    transform: translateY(-2px);
}

.location-library-preview {
    position: relative;
    aspect-ratio: 4 / 5;
    background: rgba(10, 5, 25, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-library-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}

.location-library-card:hover .location-library-preview img {
    transform: scale(1.03);
}

/* Purple gradient overlay on hover — matches sheet-picker hover-overlay */
.location-library-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(90, 60, 200, 0.35) 100%);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.location-library-card:hover .location-library-preview::after {
    opacity: 1;
}

.location-library-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.location-library-name {
    font-size: 15px;
    font-weight: 600;
    color: #f5f0ff;
    letter-spacing: 0.2px;
}

.location-library-desc {
    font-size: 12px;
    color: rgba(220, 210, 255, 0.65);
    line-height: 1.4;
    min-height: 34px;
}

.location-library-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Meta chips — colored variants matching sheet-picker convention:
   cost = green, model = purple, date = amber */
.location-library-model,
.location-library-cost,
.location-library-cost {
    background: rgba(90, 200, 140, 0.15);
    border-color: rgba(90, 200, 140, 0.3);
    color: #a5f5c0;
}

.location-library-created {
    font-size: 11px;
    color: rgba(220, 210, 255, 0.5);
    font-family: 'SF Mono', 'Menlo', monospace;
    margin-top: 2px;
}

/* Actions — Download and Delete buttons */
.location-library-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.location-library-download {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(135deg, rgba(120, 90, 220, 0.5), rgba(90, 60, 200, 0.65));
    color: #fff;
    border: 1px solid rgba(160, 140, 255, 0.55);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    line-height: 1.4;
}

.location-library-download:hover {
    background: linear-gradient(135deg, rgba(140, 110, 240, 0.7), rgba(110, 80, 220, 0.85));
    border-color: rgba(180, 160, 255, 0.85);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.location-library-delete {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(220, 90, 90, 0.15);
    color: rgba(255, 180, 180, 0.9);
    border: 1px solid rgba(220, 90, 90, 0.35);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 150ms ease;
    text-align: center;
    line-height: 1.4;
}

.location-library-delete:hover {
    background: rgba(240, 100, 100, 0.3);
    border-color: rgba(255, 130, 130, 0.6);
    color: #ffcccc;
}

@media (max-width: 720px) {
    .location-library-grid {
        grid-template-columns: 1fr;
    }

    .location-library-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Toolbar button */
.location-library-add {
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.location-library-add:hover {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
}

.location-library-add:active { transform: translateY(0); }

/* --- Object Library grid + card --- */
/* ─── Character Library pillar page ─── */
.object-library-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.55rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.object-library-search {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 260px;
}

.object-library-filter {
    flex: 1;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.4rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    min-width: 200px;
}

.object-library-filter:focus {
    outline: none;
    border-color: rgba(139, 116, 240, 0.5);
}

.object-library-refresh {
    padding: 0.5rem 1rem;
    background: rgba(139, 116, 240, 0.15);
    border: 1px solid rgba(139, 116, 240, 0.35);
    border-radius: 0.4rem;
    color: #d5c9ff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.object-library-refresh:hover {
    background: rgba(139, 116, 240, 0.25);
}

.object-library-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.object-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

/* Ship Q.6c — Character Library cards restyled to match sheet-picker purple shimmer aesthetic.
   Design language mirrors .sheet-picker-thumbnail (see CSS ~line 6871) so operators
   see identical visual treatment whether browsing the pillar or picking from Studio. */
.object-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}

.object-library-card:hover {
    border-color: rgba(160, 140, 255, 0.55);
    box-shadow: 0 8px 24px rgba(120, 90, 220, 0.25);
    transform: translateY(-2px);
}

.object-library-preview {
    position: relative;
    aspect-ratio: 4 / 5;
    background: rgba(10, 5, 25, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.object-library-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}

.object-library-card:hover .object-library-preview img {
    transform: scale(1.03);
}

/* Purple gradient overlay on hover — matches sheet-picker hover-overlay */
.object-library-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(90, 60, 200, 0.35) 100%);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.object-library-card:hover .object-library-preview::after {
    opacity: 1;
}

.object-library-body {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.object-library-name {
    font-size: 15px;
    font-weight: 600;
    color: #f5f0ff;
    letter-spacing: 0.2px;
}

.object-library-desc {
    font-size: 12px;
    color: rgba(220, 210, 255, 0.65);
    line-height: 1.4;
    min-height: 34px;
}

.object-library-meta {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

/* Meta chips — colored variants matching sheet-picker convention:
   cost = green, model = purple, date = amber */
.object-library-model,
.object-library-cost,
.object-library-cost {
    background: rgba(90, 200, 140, 0.15);
    border-color: rgba(90, 200, 140, 0.3);
    color: #a5f5c0;
}

.object-library-created {
    font-size: 11px;
    color: rgba(220, 210, 255, 0.5);
    font-family: 'SF Mono', 'Menlo', monospace;
    margin-top: 2px;
}

/* Actions — Download and Delete buttons */
.object-library-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.object-library-download {
    flex: 1 1 0;
    min-width: 0;
    background: linear-gradient(135deg, rgba(120, 90, 220, 0.5), rgba(90, 60, 200, 0.65));
    color: #fff;
    border: 1px solid rgba(160, 140, 255, 0.55);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
    text-decoration: none;
    text-align: center;
    display: inline-block;
    line-height: 1.4;
}

.object-library-download:hover {
    background: linear-gradient(135deg, rgba(140, 110, 240, 0.7), rgba(110, 80, 220, 0.85));
    border-color: rgba(180, 160, 255, 0.85);
    transform: translateY(-1px);
    color: #fff;
    text-decoration: none;
}

.object-library-delete {
    flex: 1 1 0;
    min-width: 0;
    background: rgba(220, 90, 90, 0.15);
    color: rgba(255, 180, 180, 0.9);
    border: 1px solid rgba(220, 90, 90, 0.35);
    border-radius: 5px;
    padding: 6px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 150ms ease;
    text-align: center;
    line-height: 1.4;
}

.object-library-delete:hover {
    background: rgba(240, 100, 100, 0.3);
    border-color: rgba(255, 130, 130, 0.6);
    color: #ffcccc;
}

@media (max-width: 720px) {
    .object-library-grid {
        grid-template-columns: 1fr;
    }

    .object-library-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}

/* Toolbar button */
.object-library-add {
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.object-library-add:hover {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
}

.object-library-add:active { transform: translateY(0); }

/* --- Add Location dialog --- */
/* Dialog shell — extends .app-dialog base (Gotcha 9: margin: auto for centering) */
.add-location-dialog {
    margin: auto;
    max-width: 640px;
    width: 90vw;
    max-height: 90vh;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(23, 27, 38, 0.98);
    color: #e5e7eb;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.add-location-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

.add-location-dialog[open] {
    animation: addCharacterDialogIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.add-location-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.add-location-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.add-location-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }

.add-location-header button {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.add-location-header button:hover { background: rgba(255, 255, 255, 0.06); color: #f1f5f9; }

.add-location-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.add-location-field { margin-bottom: 18px; }

.add-location-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.add-location-field input[type="text"],
.add-location-field textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.add-location-field input[type="text"]:focus,
.add-location-field textarea:focus {
    outline: none;
    border-color: rgba(20, 184, 166, 0.6);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

.add-location-field input:disabled,
.add-location-field textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-location-char-count {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 400;
}

.add-location-char-count.valid { color: #10b981; }

.add-location-field-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
    font-weight: 400;
}

.add-location-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-location-dropzone.drag-over {
    border-color: rgba(20, 184, 166, 0.6);
    background: rgba(20, 184, 166, 0.08);
}

.add-location-dropzone-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.add-location-dropzone-empty button {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-location-dropzone-empty button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.add-location-dropzone-empty button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-location-dropzone-empty span { font-size: 0.85rem; color: #94a3b8; }

.add-location-dropzone-empty small { font-size: 0.7rem; color: #64748b; }

.add-location-dropzone-filled {
    position: relative;
    display: inline-block;
}

.add-location-dropzone-filled img {
    max-height: 160px;
    max-width: 100%;
    border-radius: 8px;
    display: block;
}

.add-location-dropzone-filled button {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: 2px solid #0f172a;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.add-location-error {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
    margin-top: 12px;
}

.add-location-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.add-location-footer .btn-secondary {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}

.add-location-footer .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}

.add-location-footer .btn-primary {
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.add-location-footer .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
}

.add-location-footer button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Add Object dialog --- */
/* Dialog shell — extends .app-dialog base (Gotcha 9: margin: auto for centering) */
.add-object-dialog {
    margin: auto;
    max-width: 640px;
    width: 90vw;
    max-height: 90vh;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(23, 27, 38, 0.98);
    color: #e5e7eb;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.6);
    overflow: hidden;
    backdrop-filter: blur(20px);
}

.add-object-dialog::backdrop {
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
}

.add-object-dialog[open] {
    animation: addCharacterDialogIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.add-object-content {
    display: flex;
    flex-direction: column;
    max-height: 90vh;
}

.add-object-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    flex-shrink: 0;
}

.add-object-header h3 { margin: 0; font-size: 1.1rem; font-weight: 600; }

.add-object-header button {
    background: transparent;
    border: none;
    color: #94a3b8;
    font-size: 1.3rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 4px;
    transition: all 0.15s ease;
}

.add-object-header button:hover { background: rgba(255, 255, 255, 0.06); color: #f1f5f9; }

.add-object-body {
    padding: 20px 24px;
    overflow-y: auto;
    flex: 1;
}

.add-object-field { margin-bottom: 18px; }

.add-object-field label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.85rem;
    font-weight: 500;
    color: #cbd5e1;
    margin-bottom: 6px;
}

.add-object-field input[type="text"],
.add-object-field textarea {
    width: 100%;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    color: #e5e7eb;
    font-size: 0.9rem;
    font-family: inherit;
    resize: vertical;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.add-object-field input[type="text"]:focus,
.add-object-field textarea:focus {
    outline: none;
    border-color: rgba(20, 184, 166, 0.6);
    box-shadow: 0 0 0 2px rgba(20, 184, 166, 0.15);
}

.add-object-field input:disabled,
.add-object-field textarea:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-object-char-count {
    font-size: 0.75rem;
    color: #ef4444;
    font-weight: 400;
}

.add-object-char-count.valid { color: #10b981; }

.add-object-field-hint {
    font-size: 0.75rem;
    color: #94a3b8;
    margin-top: 4px;
    font-weight: 400;
}

.add-object-dropzone {
    border: 2px dashed rgba(255, 255, 255, 0.15);
    border-radius: 10px;
    padding: 24px;
    text-align: center;
    background: rgba(0, 0, 0, 0.2);
    transition: all 0.15s ease;
    min-height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.add-object-dropzone.drag-over {
    border-color: rgba(20, 184, 166, 0.6);
    background: rgba(20, 184, 166, 0.08);
}

.add-object-dropzone-empty {
    display: flex;
    flex-direction: column;
    gap: 8px;
    align-items: center;
}

.add-object-dropzone-empty button {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    color: #e5e7eb;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.add-object-dropzone-empty button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
}

.add-object-dropzone-empty button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.add-object-dropzone-empty span { font-size: 0.85rem; color: #94a3b8; }

.add-object-dropzone-empty small { font-size: 0.7rem; color: #64748b; }

.add-object-dropzone-filled {
    position: relative;
    display: inline-block;
}

.add-object-dropzone-filled img {
    max-height: 160px;
    max-width: 100%;
    border-radius: 8px;
    display: block;
}

.add-object-dropzone-filled button {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ef4444;
    color: white;
    border: 2px solid #0f172a;
    cursor: pointer;
    font-size: 0.75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.add-object-error {
    padding: 10px 14px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 8px;
    color: #fca5a5;
    font-size: 0.85rem;
    margin-top: 12px;
}

.add-object-footer {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    padding: 14px 24px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.add-object-footer .btn-secondary {
    padding: 8px 16px;
    background: rgba(255, 255, 255, 0.08);
    color: #cbd5e1;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s ease;
}

.add-object-footer .btn-secondary:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}

.add-object-footer .btn-primary {
    padding: 8px 18px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 500;
    transition: all 0.15s ease;
}

.add-object-footer .btn-primary:hover:not(:disabled) {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
}

.add-object-footer button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ============================================================ */
/* Ship AF.0c — Library-Page Chrome CSS Clone (v0.28.57)     */
/* 18 .character-library-* rule-blocks cloned to .location-   */
/* library-* and .object-library-* per R-25 rule-count audit. */
/* Byte-exact clones of Character styling for parity.         */
/* ============================================================ */

/* --- LOCATION LIBRARY (18 rules cloned from .character-library-*) --- */

.location-library-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.55rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.location-library-search {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 260px;
}

.location-library-filter {
    flex: 1;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.4rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    min-width: 200px;
}

.location-library-filter:focus {
    outline: none;
    border-color: rgba(139, 116, 240, 0.5);
}

.location-library-refresh {
    padding: 0.5rem 1rem;
    background: rgba(139, 116, 240, 0.15);
    border: 1px solid rgba(139, 116, 240, 0.35);
    border-radius: 0.4rem;
    color: #d5c9ff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.location-library-refresh:hover {
    background: rgba(139, 116, 240, 0.25);
}

.location-library-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.location-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.location-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}

.location-library-card:hover {
    border-color: rgba(160, 140, 255, 0.55);
    box-shadow: 0 8px 24px rgba(120, 90, 220, 0.25);
    transform: translateY(-2px);
}

.location-library-preview {
    position: relative;
    aspect-ratio: 4 / 5;
    background: rgba(10, 5, 25, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-library-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}

.location-library-card:hover .location-library-preview img {
    transform: scale(1.03);
}

.location-library-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(90, 60, 200, 0.35) 100%);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.location-library-card:hover .location-library-preview::after {
    opacity: 1;
}

.location-library-add {
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.location-library-add:hover {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
}

.location-library-add:active { transform: translateY(0); }

/* --- OBJECT LIBRARY (18 rules cloned from .character-library-*) --- */

.object-library-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.5rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 0.55rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}

.object-library-search {
    display: flex;
    gap: 0.5rem;
    flex: 1;
    min-width: 260px;
}

.object-library-filter {
    flex: 1;
    padding: 0.5rem 0.85rem;
    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 0.4rem;
    color: var(--text-primary);
    font-size: 0.85rem;
    min-width: 200px;
}

.object-library-filter:focus {
    outline: none;
    border-color: rgba(139, 116, 240, 0.5);
}

.object-library-refresh {
    padding: 0.5rem 1rem;
    background: rgba(139, 116, 240, 0.15);
    border: 1px solid rgba(139, 116, 240, 0.35);
    border-radius: 0.4rem;
    color: #d5c9ff;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
}

.object-library-refresh:hover {
    background: rgba(139, 116, 240, 0.25);
}

.object-library-stats {
    font-size: 0.8rem;
    color: var(--text-secondary);
    display: flex;
    gap: 0.75rem;
    align-items: center;
}

.object-library-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1.25rem;
}

.object-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}

.object-library-card:hover {
    border-color: rgba(160, 140, 255, 0.55);
    box-shadow: 0 8px 24px rgba(120, 90, 220, 0.25);
    transform: translateY(-2px);
}

.object-library-preview {
    position: relative;
    aspect-ratio: 4 / 5;
    background: rgba(10, 5, 25, 0.5);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.object-library-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}

.object-library-card:hover .object-library-preview img {
    transform: scale(1.03);
}

.object-library-preview::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 60%, rgba(90, 60, 200, 0.35) 100%);
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.object-library-card:hover .object-library-preview::after {
    opacity: 1;
}

.object-library-add {
    padding: 8px 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.85), rgba(16, 185, 129, 0.85));
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    font-size: 0.9rem;
    transition: all 0.15s ease;
    margin-left: 8px;
}

.object-library-add:hover {
    background: linear-gradient(135deg, rgba(20, 184, 166, 1), rgba(16, 185, 129, 1));
    box-shadow: 0 4px 14px rgba(20, 184, 166, 0.35);
    transform: translateY(-1px);
}

.object-library-add:active { transform: translateY(0); }



/* ═════════════════════════════════════════════════════════════════════════════ */
/* Ship AF.0e Phase 3a (v0.28.59) — Location + Object Picker Modal CSS            */
/*   Cloned from .sheet-picker-* top-level rules × 2.                             */
/*   All rules TOP-LEVEL (depth=0) per R-27 — no @media wrapping.                 */
/*   Original character picker CSS preserved unchanged above.                     */
/* ═════════════════════════════════════════════════════════════════════════════ */

/* ─────────────── Location Picker Modal ─────────────── */


/* Ship Q.6c — Character Library cards restyled to match sheet-picker purple shimmer aesthetic.
   Design language mirrors .location-picker-thumbnail (see CSS ~line 6871) so operators
   see identical visual treatment whether browsing the pillar or picking from Studio. */
.character-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}
 NEVER use !important on `display`
 *   (Ship K.6 lesson: !important-display fights x-show and leaves ghost elements)
 * - Scoped selectors under .location-picker-* prefix to avoid Ship K.3 cascade collisions
 * ═════════════════════════════════════════════════════════════════ */

/* Inline picker buttons in character card (no-sheet state) */
.variant-character-sheet-empty-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}


/* ═════ Picker Modal Backdrop + Container ═════ */
.location-picker-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 25, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.location-picker-modal {
    position: relative;
    z-index: 10001;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    background: linear-gradient(180deg, rgba(28, 22, 60, 0.98), rgba(20, 15, 45, 0.98));
    border: 1px solid rgba(140, 120, 240, 0.35);
    border-radius: 14px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #eae5ff;
}


/* Header */
.location-picker-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(140, 120, 240, 0.2);
    background: rgba(50, 35, 100, 0.25);
}

.location-picker-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.location-picker-modal-title-icon {
    font-size: 22px;
    filter: drop-shadow(0 0 8px rgba(160, 140, 255, 0.5));
}

.location-picker-modal-title-hint {
    font-size: 13px;
    color: rgba(220, 210, 255, 0.55);
    font-weight: 400;
}

.location-picker-modal-close {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.location-picker-modal-close:hover {
    background: rgba(220, 90, 90, 0.2);
    color: #ffcccc;
    border-color: rgba(240, 120, 120, 0.5);
}


/* Controls (filter/sort/overwrite) */
.location-picker-modal-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(140, 120, 240, 0.15);
    background: rgba(30, 25, 65, 0.6);
    flex-wrap: wrap;
}

.location-picker-filter-input {
    flex: 1 1 240px;
    background: rgba(15, 10, 40, 0.7);
    color: #eae5ff;
    border: 1px solid rgba(140, 120, 240, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 150ms ease;
}

.location-picker-filter-input:focus {
    border-color: rgba(160, 140, 255, 0.6);
}

.location-picker-sort-select {
    background: rgba(15, 10, 40, 0.7);
    color: #eae5ff;
    border: 1px solid rgba(140, 120, 240, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    min-width: 160px;
}

.location-picker-overwrite-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(220, 210, 255, 0.85);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.location-picker-overwrite-label input[type="checkbox"] {
    accent-color: #a090ff;
    cursor: pointer;
}


/* Body — scrollable content area */
.location-picker-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 24px;
    min-height: 200px;
}

.location-picker-loading,
.location-picker-error,
.location-picker-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(220, 210, 255, 0.6);
    font-size: 14px;
}

.location-picker-error {
    color: rgba(240, 120, 120, 0.85);
}


/* Grid layout */
.location-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}


/* Thumbnail card */
.location-picker-thumbnail {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    transition: all 200ms ease;
    display: flex;
    flex-direction: column;
}

.location-picker-thumbnail:hover {
    border-color: rgba(160, 140, 255, 0.55);
    box-shadow: 0 8px 24px rgba(120, 90, 220, 0.25);
    transform: translateY(-2px);
}

.location-picker-thumbnail-image-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    background: rgba(10, 5, 25, 0.5);
    overflow: hidden;
    cursor: pointer;
}

.location-picker-thumbnail-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}

.location-picker-thumbnail:hover .location-picker-thumbnail-image-wrap img {
    transform: scale(1.03);
}

.location-picker-thumbnail-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(90, 60, 200, 0.85) 100%);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.location-picker-thumbnail:hover .location-picker-thumbnail-hover-overlay {
    opacity: 1;
}


/* Metadata */
.location-picker-thumbnail-metadata {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.location-picker-thumbnail-name {
    font-size: 15px;
    font-weight: 600;
    color: #f5f0ff;
    letter-spacing: 0.2px;
}

.location-picker-thumbnail-desc {
    font-size: 12px;
    color: rgba(220, 210, 255, 0.65);
    line-height: 1.4;
    min-height: 34px;
}

.location-picker-thumbnail-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.location-picker-thumbnail-meta-chip {
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(140, 120, 240, 0.15);
    color: rgba(220, 210, 255, 0.85);
    border: 1px solid rgba(140, 120, 240, 0.2);
    font-family: 'SF Mono', 'Menlo', monospace;
}

.location-picker-thumbnail-meta-chip.cost { background: rgba(90, 200, 140, 0.15); border-color: rgba(90, 200, 140, 0.3); color: #a5f5c0; }

.location-picker-thumbnail-meta-chip.model { background: rgba(140, 120, 240, 0.15); border-color: rgba(140, 120, 240, 0.3); }

.location-picker-thumbnail-meta-chip.date { background: rgba(200, 160, 90, 0.12); border-color: rgba(200, 160, 90, 0.25); color: #f5d5a5; }


/* Thumbnail action buttons */
.location-picker-thumbnail-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.location-picker-thumbnail-pick-btn {
    flex: 1 1 auto;
    background: linear-gradient(135deg, rgba(120, 90, 220, 0.5), rgba(90, 60, 200, 0.65));
    color: #fff;
    border: 1px solid rgba(160, 140, 255, 0.55);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.location-picker-thumbnail-pick-btn:hover {
    background: linear-gradient(135deg, rgba(140, 110, 240, 0.7), rgba(110, 80, 220, 0.85));
    border-color: rgba(180, 160, 255, 0.85);
    transform: translateY(-1px);
}

.location-picker-thumbnail-delete-btn {
    background: rgba(220, 90, 90, 0.15);
    color: rgba(255, 180, 180, 0.9);
    border: 1px solid rgba(220, 90, 90, 0.35);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 150ms ease;
    width: 36px;
}

.location-picker-thumbnail-delete-btn:hover {
    background: rgba(240, 100, 100, 0.3);
    border-color: rgba(255, 130, 130, 0.6);
    color: #ffcccc;
}


/* Footer */
.location-picker-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid rgba(140, 120, 240, 0.2);
    background: rgba(20, 15, 45, 0.6);
    gap: 16px;
}

.location-picker-modal-footer-hint {
    font-size: 12px;
    color: rgba(220, 210, 255, 0.55);
    flex: 1 1 auto;
}

.location-picker-modal-cancel {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 150ms ease;
}

.location-picker-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
}


/* Ship Q.6c — Character Library cards restyled to match sheet-picker purple shimmer aesthetic.
   Design language mirrors .location-picker-thumbnail (see CSS ~line 6871) so operators
   see identical visual treatment whether browsing the pillar or picking from Studio. */
.location-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}


/* Ship Q.6c — Character Library cards restyled to match sheet-picker purple shimmer aesthetic.
   Design language mirrors .location-picker-thumbnail (see CSS ~line 6871) so operators
   see identical visual treatment whether browsing the pillar or picking from Studio. */
.object-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}

/* ─────────────── Object Picker Modal ─────────────── */


/* Ship Q.6c — Character Library cards restyled to match sheet-picker purple shimmer aesthetic.
   Design language mirrors .object-picker-thumbnail (see CSS ~line 6871) so operators
   see identical visual treatment whether browsing the pillar or picking from Studio. */
.character-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}
 NEVER use !important on `display`
 *   (Ship K.6 lesson: !important-display fights x-show and leaves ghost elements)
 * - Scoped selectors under .object-picker-* prefix to avoid Ship K.3 cascade collisions
 * ═════════════════════════════════════════════════════════════════ */

/* Inline picker buttons in character card (no-sheet state) */
.variant-character-sheet-empty-actions {
    display: flex;
    flex-direction: row;
    gap: 8px;
    flex-wrap: wrap;
}


/* ═════ Picker Modal Backdrop + Container ═════ */
.object-picker-modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 8, 25, 0.75);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
}

.object-picker-modal {
    position: relative;
    z-index: 10001;
    width: 100%;
    max-width: 1200px;
    max-height: 90vh;
    background: linear-gradient(180deg, rgba(28, 22, 60, 0.98), rgba(20, 15, 45, 0.98));
    border: 1px solid rgba(140, 120, 240, 0.35);
    border-radius: 14px;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: #eae5ff;
}


/* Header */
.object-picker-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    border-bottom: 1px solid rgba(140, 120, 240, 0.2);
    background: rgba(50, 35, 100, 0.25);
}

.object-picker-modal-title {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.object-picker-modal-title-icon {
    font-size: 22px;
    filter: drop-shadow(0 0 8px rgba(160, 140, 255, 0.5));
}

.object-picker-modal-title-hint {
    font-size: 13px;
    color: rgba(220, 210, 255, 0.55);
    font-weight: 400;
}

.object-picker-modal-close {
    background: transparent;
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    width: 32px;
    height: 32px;
    font-size: 16px;
    cursor: pointer;
    transition: all 150ms ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.object-picker-modal-close:hover {
    background: rgba(220, 90, 90, 0.2);
    color: #ffcccc;
    border-color: rgba(240, 120, 120, 0.5);
}


/* Controls (filter/sort/overwrite) */
.object-picker-modal-controls {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 24px;
    border-bottom: 1px solid rgba(140, 120, 240, 0.15);
    background: rgba(30, 25, 65, 0.6);
    flex-wrap: wrap;
}

.object-picker-filter-input {
    flex: 1 1 240px;
    background: rgba(15, 10, 40, 0.7);
    color: #eae5ff;
    border: 1px solid rgba(140, 120, 240, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 14px;
    outline: none;
    transition: border-color 150ms ease;
}

.object-picker-filter-input:focus {
    border-color: rgba(160, 140, 255, 0.6);
}

.object-picker-sort-select {
    background: rgba(15, 10, 40, 0.7);
    color: #eae5ff;
    border: 1px solid rgba(140, 120, 240, 0.25);
    border-radius: 8px;
    padding: 8px 12px;
    font-size: 13px;
    cursor: pointer;
    min-width: 160px;
}

.object-picker-overwrite-label {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(220, 210, 255, 0.85);
    font-size: 13px;
    cursor: pointer;
    user-select: none;
}

.object-picker-overwrite-label input[type="checkbox"] {
    accent-color: #a090ff;
    cursor: pointer;
}


/* Body — scrollable content area */
.object-picker-modal-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 20px 24px;
    min-height: 200px;
}

.object-picker-loading,
.object-picker-error,
.object-picker-empty {
    text-align: center;
    padding: 60px 20px;
    color: rgba(220, 210, 255, 0.6);
    font-size: 14px;
}

.object-picker-error {
    color: rgba(240, 120, 120, 0.85);
}


/* Grid layout */
.object-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}


/* Thumbnail card */
.object-picker-thumbnail {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    transition: all 200ms ease;
    display: flex;
    flex-direction: column;
}

.object-picker-thumbnail:hover {
    border-color: rgba(160, 140, 255, 0.55);
    box-shadow: 0 8px 24px rgba(120, 90, 220, 0.25);
    transform: translateY(-2px);
}

.object-picker-thumbnail-image-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    background: rgba(10, 5, 25, 0.5);
    overflow: hidden;
    cursor: pointer;
}

.object-picker-thumbnail-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 300ms ease;
}

.object-picker-thumbnail:hover .object-picker-thumbnail-image-wrap img {
    transform: scale(1.03);
}

.object-picker-thumbnail-hover-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(90, 60, 200, 0.85) 100%);
    color: #fff;
    font-weight: 600;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding-bottom: 20px;
    opacity: 0;
    transition: opacity 200ms ease;
    pointer-events: none;
}

.object-picker-thumbnail:hover .object-picker-thumbnail-hover-overlay {
    opacity: 1;
}


/* Metadata */
.object-picker-thumbnail-metadata {
    padding: 12px 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
}

.object-picker-thumbnail-name {
    font-size: 15px;
    font-weight: 600;
    color: #f5f0ff;
    letter-spacing: 0.2px;
}

.object-picker-thumbnail-desc {
    font-size: 12px;
    color: rgba(220, 210, 255, 0.65);
    line-height: 1.4;
    min-height: 34px;
}

.object-picker-thumbnail-meta-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.object-picker-thumbnail-meta-chip {
    font-size: 10px;
    padding: 3px 7px;
    border-radius: 4px;
    background: rgba(140, 120, 240, 0.15);
    color: rgba(220, 210, 255, 0.85);
    border: 1px solid rgba(140, 120, 240, 0.2);
    font-family: 'SF Mono', 'Menlo', monospace;
}

.object-picker-thumbnail-meta-chip.cost { background: rgba(90, 200, 140, 0.15); border-color: rgba(90, 200, 140, 0.3); color: #a5f5c0; }

.object-picker-thumbnail-meta-chip.model { background: rgba(140, 120, 240, 0.15); border-color: rgba(140, 120, 240, 0.3); }

.object-picker-thumbnail-meta-chip.date { background: rgba(200, 160, 90, 0.12); border-color: rgba(200, 160, 90, 0.25); color: #f5d5a5; }


/* Thumbnail action buttons */
.object-picker-thumbnail-actions {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}

.object-picker-thumbnail-pick-btn {
    flex: 1 1 auto;
    background: linear-gradient(135deg, rgba(120, 90, 220, 0.5), rgba(90, 60, 200, 0.65));
    color: #fff;
    border: 1px solid rgba(160, 140, 255, 0.55);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 150ms ease;
}

.object-picker-thumbnail-pick-btn:hover {
    background: linear-gradient(135deg, rgba(140, 110, 240, 0.7), rgba(110, 80, 220, 0.85));
    border-color: rgba(180, 160, 255, 0.85);
    transform: translateY(-1px);
}

.object-picker-thumbnail-delete-btn {
    background: rgba(220, 90, 90, 0.15);
    color: rgba(255, 180, 180, 0.9);
    border: 1px solid rgba(220, 90, 90, 0.35);
    border-radius: 6px;
    padding: 8px 10px;
    font-size: 12px;
    cursor: pointer;
    transition: all 150ms ease;
    width: 36px;
}

.object-picker-thumbnail-delete-btn:hover {
    background: rgba(240, 100, 100, 0.3);
    border-color: rgba(255, 130, 130, 0.6);
    color: #ffcccc;
}


/* Footer */
.object-picker-modal-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid rgba(140, 120, 240, 0.2);
    background: rgba(20, 15, 45, 0.6);
    gap: 16px;
}

.object-picker-modal-footer-hint {
    font-size: 12px;
    color: rgba(220, 210, 255, 0.55);
    flex: 1 1 auto;
}

.object-picker-modal-cancel {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 8px 20px;
    font-size: 13px;
    cursor: pointer;
    transition: all 150ms ease;
}

.object-picker-modal-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.35);
}


/* Ship Q.6c — Character Library cards restyled to match sheet-picker purple shimmer aesthetic.
   Design language mirrors .object-picker-thumbnail (see CSS ~line 6871) so operators
   see identical visual treatment whether browsing the pillar or picking from Studio. */
.location-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}


/* Ship Q.6c — Character Library cards restyled to match sheet-picker purple shimmer aesthetic.
   Design language mirrors .object-picker-thumbnail (see CSS ~line 6871) so operators
   see identical visual treatment whether browsing the pillar or picking from Studio. */
.object-library-card {
    background: rgba(20, 15, 50, 0.7);
    border: 1px solid rgba(140, 120, 240, 0.2);
    border-radius: 10px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: all 200ms ease;
}


/* ═════════════════════════════════════════════════════════════════════════════ */
/* Ship AF.0e Phase 3a (v0.28.59) — Generate Variant modal: Locations + Objects sections */
/* Family-gated to aexyr-generative-music-video — see index.html x-show gate.                */
/* Container + picker trigger button + attached chip list + chip card styling.               */
/* All TOP-LEVEL rules (depth=0) per R-27 — no @media wrapping.                              */
/* ═════════════════════════════════════════════════════════════════════════════ */

.variant-locations-container,
.variant-objects-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.85rem;
    padding: 1rem 1.15rem;
    background: rgba(139, 92, 246, 0.04);
    border: 2px dashed rgba(139, 92, 246, 0.35);
    border-radius: 0.6rem;
    margin-top: 0.4rem;
    transition: border-color 0.15s ease, background 0.15s ease;
}

.variant-locations-container:hover,
.variant-objects-container:hover {
    border-color: rgba(139, 92, 246, 0.55);
    background: rgba(139, 92, 246, 0.07);
}

.variant-locations-picker-trigger,
.variant-objects-picker-trigger {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.variant-locations-picker-btn,
.variant-objects-picker-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.65rem 1.25rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.85), rgba(99, 102, 241, 0.85));
    color: #ffffff;
    border: 1px solid rgba(139, 92, 246, 0.4);
    border-radius: 0.5rem;
    font-size: 0.92rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
}

.variant-locations-picker-btn:hover,
.variant-objects-picker-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 1), rgba(99, 102, 241, 1));
    border-color: rgba(139, 92, 246, 0.7);
    box-shadow: 0 4px 14px rgba(139, 92, 246, 0.35);
    transform: translateY(-1px);
}

.variant-locations-count-chip,
.variant-objects-count-chip {
    padding: 4px 10px;
    background: rgba(20, 184, 166, 0.2);
    color: #99f6e4;
    border: 1px solid rgba(20, 184, 166, 0.4);
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 500;
}

.variant-locations-attached-list,
.variant-objects-attached-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgba(139, 92, 246, 0.18);
}

.variant-location-chip,
.variant-object-chip {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 0.8rem;
    background: rgba(139, 92, 246, 0.08);
    border: 1px solid rgba(139, 92, 246, 0.22);
    border-radius: 0.55rem;
    transition: all 0.15s ease;
}

.variant-location-chip:hover,
.variant-object-chip:hover {
    background: rgba(139, 92, 246, 0.12);
    border-color: rgba(139, 92, 246, 0.4);
}

.variant-location-chip-thumb,
.variant-object-chip-thumb {
    width: 56px;
    height: 56px;
    border-radius: 6px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(0, 0, 0, 0.3);
}

.variant-location-chip-info,
.variant-object-chip-info {
    flex: 1;
    min-width: 0;
}

.variant-location-chip-name,
.variant-object-chip-name {
    font-weight: 600;
    color: #e5e7eb;
    font-size: 0.95rem;
    margin-bottom: 2px;
}

.variant-location-chip-desc,
.variant-object-chip-desc {
    color: #9ca3af;
    font-size: 0.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.variant-location-chip-remove,
.variant-object-chip-remove {
    padding: 6px 10px;
    background: rgba(239, 68, 68, 0.15);
    color: #fca5a5;
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.variant-location-chip-remove:hover,
.variant-object-chip-remove:hover {
    background: rgba(239, 68, 68, 0.3);
    color: #fecaca;
    border-color: rgba(239, 68, 68, 0.5);
}



/* ═══════════════════════════════════════════════════════════════════
 * Ship H.11 (v0.30.35) — Crown Editor Timeline Containment Lockdown
 * ═══════════════════════════════════════════════════════════════════
 * 
 * Root cause of persistent vertical bar bug (Ships H.8 / H.9 / H.10):
 * The .cjeditor-timeline div had BOTH :style (Alpine binding) and style (literal)
 * attributes. When storyboardEditor.audioUrl was truthy, :style evaluated to "" 
 * (empty string). Alpine's :style binding, when evaluating to an empty string,
 * can WIPE the entire literal style attribute. This stripped critical layout
 * properties including position: relative, overflow: hidden, and height: 32px.
 * 
 * Consequence: The 29 shot tick markers (position: absolute; top: 0; bottom: 0)
 * fell back to positioning relative to the next positioned ancestor (viewport
 * or body), causing them to render as full-viewport-height vertical bars in
 * their intended color rgba(167, 139, 250, 0.25).
 * 
 * Fix: Move all critical layout properties to CSS classes. CSS class-based
 * styles cannot be wiped by Alpine :style binding. The literal style attribute
 * is reduced to only non-critical visual properties (background, border) 
 * that are visually desirable but non-structural.
 * 
 * Diagnostic clue match:
 *   - Color exactly matches rgba(167, 139, 250, 0.25) tick marker ✓
 *   - Count ~29-30 matches shot count ✓
 *   - Not inspectable (pointer-events: none passes clicks through) ✓
 *   - Toasts in front (markers have default z-index, toasts have 10500) ✓
 *   - Appear only after storyboard loads (markers render x-for shots) ✓
 * 
 * See vault note: CSS-Alpine-Style-Binding-Wipes-Inline-Style-Pitfall
 * ═══════════════════════════════════════════════════════════════════ */

.cjeditor-timeline {
    flex: 1;
    height: 32px;
    position: relative;
    overflow: hidden;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s ease;
}

.cjeditor-timeline.disabled {
    cursor: not-allowed;
    opacity: 0.4;
}

.cjeditor-timeline-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(167, 139, 250, 0.25);
    pointer-events: none;
    /* Explicit containment: these markers must NEVER escape .cjeditor-timeline */
    /* The parent .cjeditor-timeline has position: relative + overflow: hidden */
    /* These styles should produce 32px-tall thin ticks CONFINED to the timeline bar */
}

.cjeditor-timeline-active-range {
    position: absolute;
    top: 0;
    bottom: 0;
    background: rgba(139, 92, 246, 0.18);
    pointer-events: none;
}

.cjeditor-timeline-cursor {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 2px;
    background: #ec4899;
    box-shadow: 0 0 8px rgba(236, 72, 153, 0.6);
    pointer-events: none;
    transition: left 0.08s linear;
}

.cjeditor-timeline-no-audio {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    opacity: 0.5;
    pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════════════
 * End Ship H.11 Timeline Containment Lockdown
 * ═══════════════════════════════════════════════════════════════════ */


/* ═══ Ship I.2 — Alpine :style Empty-String Wipe Prevention ═══ */
/* Pattern: Migrate from inline style + :style ternary to CSS classes + :class */
/* Context: :style evaluating to '' wipes the entire literal `style` attribute */
/* Vault: [[Alpine-Style-Binding-Empty-String-Wipes-Inline-Style-Pitfall]] */

.cjeditor-send-production-btn {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%);
    color: #fff;
    border: none;
    padding: 0.4rem 0.9rem;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: opacity 0.15s;
}

.cjeditor-send-production-btn.disabled,
.cjeditor-send-production-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* ═══════════════════════════════════════════════════════════════════
 * Ship I.5 (v0.30.41) · Universal Storyboard Editor Horizontal Shot Scroller
 *
 * REPLACES the previous 3-column auto-fill grid with a single-row horizontal
 * scroll strip. Each shot card is a fixed-width (320px) scroll-snap item.
 *
 * The active shot card is kept CENTERED in the viewport via imperative
 * scroll centering (see editorScrollActiveShotIntoView in app.js).
 *
 * CRITICAL DISCIPLINE (Ship H.11 lesson):
 *   • ALL layout-critical properties live in these CSS classes, NEVER in
 *     Alpine :style bindings. Alpine :style evaluating to '' wipes inline
 *     style attributes, breaking layout silently.
 *   • The active-shot pink border uses the existing .cjeditor-shot-active
 *     class, which stays as a :class binding (safe).
 *
 * Vault: [[Ship-I5-Horizontal-Shot-Scroller-Pattern]]
 * ═══════════════════════════════════════════════════════════════════ */

.cjeditor-shot-scroller {
    /* Ship AS.2 (v0.31.5) — Scrollbar visibility boost (regression fix):
     * - overflow-x: scroll (was: auto) forces ALWAYS-visible scrollbar
     * - scrollbar-color 85% opacity (was: 40%) — undeniably visible
     * - padding-bottom 1.25rem for scrollbar breathing room
     * Alpha-starvation fix: 0.3 alpha on invisible track was essentially non-existent. */
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    gap: 1rem;
    overflow-x: scroll;
    overflow-y: visible;
    scroll-behavior: smooth;
    scroll-snap-type: x proximity;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    padding: 1rem;
    padding-bottom: 1.25rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-color: rgba(167, 139, 250, 0.85) rgba(255, 255, 255, 0.05);
    scrollbar-width: auto;
}

.cjeditor-shot-scroller::-webkit-scrollbar {
    height: 14px;
    background: rgba(0, 0, 0, 0.4);
}

.cjeditor-shot-scroller::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 7px;
}

.cjeditor-shot-scroller::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.85);
    border-radius: 7px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    min-width: 40px;
}

.cjeditor-shot-scroller::-webkit-scrollbar-thumb:hover {
    background: rgba(167, 139, 250, 0.5);
}

.cjeditor-shot-scroller-item {
    flex: 0 0 320px;
    width: 320px;
    max-width: 320px;
    min-width: 320px;
    scroll-snap-align: center;
    scroll-snap-stop: normal;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    min-height: 100px;
    padding: 0.75rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* When active, lift the card slightly to emphasize focus */
.cjeditor-shot-scroller-item.cjeditor-shot-active {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(236, 72, 153, 0.25);
}

/* ═══════════════════════════════════════════════════════════════════
 * End Ship I.5 Horizontal Shot Scroller
 * ═══════════════════════════════════════════════════════════════════ */


/* ======================================================================
 * Ship α.2 (v0.30.147) · Scaffold Mode Segmented Timeline
 * ----------------------------------------------------------------------
 * Purpose:  Live-growing segmented timeline for New Storyboard · Scaffold
 *           Mode. Starts as 1 segment with first shot card, grows as
 *           shots are added. Segment width is proportional to shot
 *           duration (flex-grow: duration_s).
 *
 * Design:   PURE CSS CLASSES. No Alpine :style bindings with empty-string
 *           ternaries. Honors Ship H.11 pitfall + Ship I.5 containment
 *           lockdown — new namespace does NOT collide with .cjeditor-timeline
 *           (loaded-mode audio-driven timeline).
 *
 * Related:  [[Alpine-Style-Binding-Empty-String-Wipes-Inline-Style-Pitfall]]
 *           [[Ship-I5-Horizontal-Shot-Scroller-Pattern]]
 * ====================================================================== */

.scaffold-timeline-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: rgba(0, 0, 0, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-bottom: 1rem;
}
.scaffold-timeline-header {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.82rem;
}
.scaffold-timeline-header-title {
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}
.scaffold-timeline-header-meta {
    opacity: 0.55;
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Menlo', monospace;
}
/* ───────── Ship α.2a (v0.30.166) · Scaffold Timeline Scroll Wrapper ───────── */
/* Wraps track + ruler so both scroll together horizontally when total segment width exceeds container. */
/* Scrollbar appears at bottom of wrapper — naturally in line with ruler second marks (0s / total s). */
/* Thin purple webkit scrollbar matching Ship I.5 convention (rgba(139,92,246,0.5)). */
/* Ship AS.2 (v0.31.5) — Scrollbar visibility boost:
 * - overflow-x: scroll (was: auto) forces ALWAYS-visible scrollbar
 * - height 14px (was: 8px) — bigger, more findable
 * - thumb 85% opacity brand violet (was: 50%) — undeniably visible
 * - track light bg (was: dark) — contrast against dark theme
 * - padding-bottom gives scrollbar breathing room
 * Alpha-starvation fix: 0.5 alpha on dark bg was nearly invisible even with 22 shots. */
.scaffold-timeline-scroll-wrapper {
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-bottom: 2px;
}
.scaffold-timeline-scroll-wrapper::-webkit-scrollbar {
    height: 14px;
    background: rgba(0, 0, 0, 0.4);
}
.scaffold-timeline-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.85);
    border-radius: 7px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    min-width: 40px;
}
.scaffold-timeline-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 181, 253, 1.0);
}
.scaffold-timeline-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 7px;
}
/* Firefox fallback — same visibility boost */
.scaffold-timeline-scroll-wrapper {
    scrollbar-width: auto;
    scrollbar-color: rgba(167, 139, 250, 0.85) rgba(255, 255, 255, 0.05);
}

/* ───────── Ship AS.2 (v0.31.5) · Universal Editor Timeline Horizontal Scroll + Zoom ───────── */
/* Wraps .cjeditor-timeline so it can be scaled 1x/2x/4x/8x via :style="width: calc(100% * zoom)". */
/* Scrollbar appears when zoom > 1 and content width exceeds wrapper viewport. */
/* Styling matches scaffold-timeline-scroll-wrapper for design-system consistency. */
.cjeditor-timeline-scroll-wrapper {
    width: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    scroll-behavior: smooth;
    padding-bottom: 2px;
    scrollbar-width: auto;
    scrollbar-color: rgba(167, 139, 250, 0.85) rgba(255, 255, 255, 0.05);
}
.cjeditor-timeline-scroll-wrapper::-webkit-scrollbar {
    height: 14px;
    background: rgba(0, 0, 0, 0.4);
}
.cjeditor-timeline-scroll-wrapper::-webkit-scrollbar-thumb {
    background: rgba(167, 139, 250, 0.85);
    border-radius: 7px;
    border: 2px solid rgba(0, 0, 0, 0.3);
    min-width: 40px;
}
.cjeditor-timeline-scroll-wrapper::-webkit-scrollbar-thumb:hover {
    background: rgba(196, 181, 253, 1.0);
}
.cjeditor-timeline-scroll-wrapper::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 7px;
}
/* Zoom controls styling — buttons inherit inline :style; container is flex row. */
.cjeditor-timeline-controls {
    user-select: none;
}
.cjeditor-timeline-controls button:hover {
    filter: brightness(1.15);
}
/* ───────── /Ship AS.2 Universal Editor Timeline Zoom + Scroll ───────── */
/* ───────── /Ship α.2a Scroll Wrapper ───────── */

.scaffold-timeline-track {
    display: flex;
    gap: 3px;
    height: 56px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 3px;
    position: relative;
    /* Ship α.2a (v0.30.166): overflow: hidden REMOVED — scroll handled by .scaffold-timeline-scroll-wrapper. */
    /* min-width: fit-content lets track grow beyond wrapper viewport so segments can scroll into view. */
    min-width: fit-content;
}
.scaffold-timeline-block {
    min-width: 56px;
    /* Ship α.2a (v0.30.166): flex-shrink: 0 so segments retain flex-grow-derived width */
    /* instead of compressing to fit container (which was clipping shots 18-N at >17 shot counts). */
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.18), rgba(139, 92, 246, 0.12));
    border-left: 3px solid #a78bfa;
    border-radius: 4px;
    padding: 0.4rem 0.5rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    font-size: 0.7rem;
    cursor: pointer;
    transition: filter 140ms ease, transform 140ms ease, box-shadow 140ms ease;
    overflow: hidden;
    position: relative;
}
.scaffold-timeline-block:hover {
    filter: brightness(1.4);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(167, 139, 250, 0.25);
}
.scaffold-timeline-block.active {
    box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4), 0 2px 10px rgba(167, 139, 250, 0.35);
    filter: brightness(1.55);
    background: linear-gradient(180deg, rgba(167, 139, 250, 0.28), rgba(139, 92, 246, 0.18));
}
.scaffold-timeline-block-idx {
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600;
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 0.72rem;
    letter-spacing: 0.02em;
}
.scaffold-timeline-block-dur {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.66rem;
    font-family: 'SF Mono', 'Menlo', monospace;
}
.scaffold-timeline-block-desc {
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.68rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    margin-top: 0.1rem;
}
.scaffold-timeline-ruler {
    display: flex;
    justify-content: space-between;
    font-size: 0.68rem;
    color: rgba(255, 255, 255, 0.4);
    font-family: 'SF Mono', 'Menlo', monospace;
    padding: 0 0.1rem;
}
.scaffold-timeline-empty-hint {
    text-align: center;
    padding: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.78rem;
    font-style: italic;
}

/* Shot card highlight when activated via timeline click.
 * Uses outline (not border) to avoid layout shift. Fades out after a short delay. */
.scaffold-shot-card-focused {
    outline: 2px solid rgba(167, 139, 250, 0.65);
    outline-offset: -2px;
    box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.12);
    transition: outline-color 320ms ease, box-shadow 320ms ease;
}

/* ======================================================================
 * /Ship α.2 Scaffold Timeline
 * ====================================================================== */

/* ─────── Ship α.3 (v0.30.148) · Scaffold Shot Card UI Parity ─────── */
/* VISUAL-ONLY additions: timeline position badge, shot kind marker, chip zones (empty slots), scene-still placeholder. */
/* Phase β will populate state. These styles are compatible with existing scaffold-shot-card markup. */

/* Enhanced shot card wrapper — upgrades the previous inline-styled div to a reusable class */
.scaffold-shot-card {
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    transition: border-color 0.18s ease, background 0.18s ease;
}
.scaffold-shot-card:hover {
    border-color: rgba(167, 139, 250, 0.3);
    background: rgba(0, 0, 0, 0.3);
}
.scaffold-shot-card-focused {
    animation: scaffoldShotFlash 1.2s ease-out;
}
@keyframes scaffoldShotFlash {
    0% { box-shadow: 0 0 0 3px rgba(167, 139, 250, 0.6), 0 0 20px rgba(167, 139, 250, 0.4); border-color: rgba(167, 139, 250, 0.9); }
    100% { box-shadow: none; border-color: rgba(255, 255, 255, 0.08); }
}

/* Header row — Shot label + position badge + shot kind marker + delete button */
.scaffold-shot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-bottom: 0.1rem;
}
.scaffold-shot-header-left {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex: 1;
    min-width: 0;
}
.scaffold-shot-label {
    font-weight: 600;
    font-size: 0.85rem;
    color: #a78bfa;
    white-space: nowrap;
}

/* Ship AS.2c (v0.31.8) · Unified shot card badges · Used by BOTH Scaffold Mode shot cards AND Universal Storyboards Editor shot cards. Promotes previous inline styles to shared classes for cross-view visual parity. */
.cjshot-id-badge {
    background: rgba(139, 92, 246, 0.25);
    color: #c4b5fd;
    padding: 0.25rem 0.6rem;
    border-radius: 5px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid rgba(139, 92, 246, 0.35);
    display: inline-block;
}
.cjshot-time-badge {
    background: rgba(236, 72, 153, 0.18);
    color: #f9a8d4;
    padding: 0.25rem 0.55rem;
    border-radius: 5px;
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    border: 1px solid rgba(236, 72, 153, 0.3);
    opacity: 0.95;
    display: inline-block;
}
.scaffold-shot-position-badge {
    background: rgba(167, 139, 250, 0.14);
    color: #c4b5fd;
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.7rem;
    font-family: 'Monaco', 'Menlo', monospace;
    letter-spacing: 0.02em;
    border: 1px solid rgba(167, 139, 250, 0.2);
}
.scaffold-shot-kind-chip {
    padding: 0.1rem 0.45rem;
    border-radius: 3px;
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}
.scaffold-shot-kind-veo3 {
    background: rgba(59, 130, 246, 0.14);
    color: #93c5fd;
    border: 1px solid rgba(59, 130, 246, 0.3);
}
.scaffold-shot-kind-reused {
    background: rgba(34, 197, 94, 0.14);
    color: #86efac;
    border: 1px solid rgba(34, 197, 94, 0.3);
}

/* Scene-still placeholder zone — 160x90 dashed slot for Phase β */
.scaffold-scene-still-slot {
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 110px;
    border: 2px dashed rgba(255, 255, 255, 0.12);
    border-radius: 6px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    background: rgba(0, 0, 0, 0.2);
    transition: border-color 0.18s ease;
}
.scaffold-scene-still-slot:hover {
    border-color: rgba(167, 139, 250, 0.25);
}
.scaffold-scene-still-slot-icon {
    font-size: 1.4rem;
    opacity: 0.4;
}
.scaffold-scene-still-slot-hint {
    font-size: 0.65rem;
    opacity: 0.5;
    text-align: center;
    letter-spacing: 0.02em;
}

/* Reference chip rows — character, location, objects (empty for α.3, Phase β fills) */
.scaffold-ref-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.3rem 0.5rem;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 5px;
    min-height: 1.9rem;
}
.scaffold-ref-row-label {
    font-size: 0.68rem;
    opacity: 0.55;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    white-space: nowrap;
}
.scaffold-ref-row-empty {
    font-size: 0.7rem;
    opacity: 0.35;
    font-style: italic;
}
.scaffold-ref-chip {
    padding: 0.1rem 0.4rem;
    border-radius: 3px;
    font-size: 0.7rem;
    display: inline-flex;
    align-items: center;
    gap: 0.2rem;
}
.scaffold-ref-chip-character {
    background: rgba(236, 72, 153, 0.14);
    color: #f9a8d4;
    border: 1px solid rgba(236, 72, 153, 0.3);
}
.scaffold-ref-chip-location {
    background: rgba(14, 165, 233, 0.14);
    color: #7dd3fc;
    border: 1px solid rgba(14, 165, 233, 0.3);
}
.scaffold-ref-chip-object {
    background: rgba(234, 179, 8, 0.14);
    color: #fde68a;
    border: 1px solid rgba(234, 179, 8, 0.3);
}

/* Phase + duration row — slightly tightened spacing from inline original */
.scaffold-shot-meta-row {
    display: flex;
    gap: 0.4rem;
    align-items: center;
    flex-wrap: wrap;
}
.scaffold-shot-meta-label {
    font-size: 0.68rem;
    opacity: 0.65;
    letter-spacing: 0.02em;
}
/* ─────── /Ship α.3 ─────── */


/* ═════════════════════════════════════════════════════════════════════ */
/* Ship β.1 (v0.30.149) — Universal Storyboarding Tool: AI-Assist Layer   */
/* Generate Shot button (shot card entry point to the Generate Shot modal) */
/* ═════════════════════════════════════════════════════════════════════ */

.scaffold-generate-shot-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    width: 100%;
    padding: 0.5rem 0.75rem;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.22), rgba(167, 139, 250, 0.18));
    color: #ddd6fe;
    border: 1px solid rgba(167, 139, 250, 0.4);
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    margin-bottom: 0.35rem;
    letter-spacing: 0.01em;
}

.scaffold-generate-shot-btn:hover {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.32), rgba(167, 139, 250, 0.28));
    border-color: rgba(167, 139, 250, 0.55);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(139, 92, 246, 0.2);
}

.scaffold-generate-shot-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(139, 92, 246, 0.15);
}

.scaffold-generate-shot-btn-theme-preview {
    font-weight: 400;
    opacity: 0.75;
    font-size: 0.72rem;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 60%;
}

/* ═════════════════════════════════════════════════════════════════════ */
/* /Ship β.1 CSS                                                          */
/* ═════════════════════════════════════════════════════════════════════ */


/* ─────── Ship AS.4 (v0.31.12) — Insertion-Point Drag-Drop with Shift Animations ─────── */
/* Replaces Ship H.6 card-as-drop-target UX with between-card gap zones. */
/* All state transitions use CSS classes (not inline :style) to honor */
/* [[Alpine-Style-Binding-Empty-String-Wipes-Inline-Style-Pitfall]] (Case #3 fired 2026-10-07). */

/* Gap zone baseline — thin invisible, minimal layout impact when idle */
.cjeditor-insertion-zone {
    width: 8px;
    flex-shrink: 0;
    background: transparent;
    border-radius: 3px;
    transition: width 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
    align-self: stretch;
    min-height: 100px;  /* ensure drop target has vertical hit area equal to shot cards */
    pointer-events: auto;  /* always drop-receptive even when idle (invisible but hittable) */
}

/* Gap zone when a drag is actively hovering over it — expanded + amber highlight */
.cjeditor-insertion-zone.active {
    width: 36px;
    background: linear-gradient(180deg, rgba(251, 191, 36, 0.3) 0%, rgba(251, 191, 36, 0.6) 50%, rgba(251, 191, 36, 0.3) 100%);
    box-shadow: 0 0 8px rgba(251, 191, 36, 0.4);
}

/* Shot card shift animations — GPU-accelerated via transform */
.cjeditor-shot-scroller-item.cjeditor-shift-left {
    transform: translateX(-14px);
    transition: transform 0.2s ease;
}

.cjeditor-shot-scroller-item.cjeditor-shift-right {
    transform: translateX(14px);
    transition: transform 0.2s ease;
}

/* Dragging source card — slight fade + lift */
.cjeditor-shot-scroller-item.cjeditor-shot-dragging {
    opacity: 0.5;
    transform: scale(0.98);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

/* ─────── /Ship AS.4 ─────── */


/* ═════ Ship AS.19 (v0.31.34) — Preview-Before-Save Character Workflow ═════ */
/* Preview section inside Add Character modal — shown when addCharacterForm.previewMode=true */
.add-character-preview {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 0.5rem 0;
}
.add-character-preview-title {
    font-size: 1.05rem;
    font-weight: 600;
    color: #e2e8f0;
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.01em;
}
.add-character-preview-comparison {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}
.add-character-preview-comparison.has-reference {
    grid-template-columns: 2fr 1fr;
}
.add-character-preview-image-block {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.add-character-preview-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: #94a3b8;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.add-character-preview-image-wrap {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: #0f172a;
    border: 1px solid rgba(99, 102, 241, 0.25);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
}
.add-character-preview-image {
    display: block;
    width: 100%;
    height: auto;
    max-height: 500px;
    object-fit: contain;
}
.add-character-preview-image-reference {
    max-height: 300px;
}
.add-character-preview-regen-overlay {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.85);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    color: #e2e8f0;
    font-size: 0.95rem;
    font-weight: 500;
    z-index: 10;
    backdrop-filter: blur(2px);
}
.add-character-preview-regen-spinner {
    width: 44px;
    height: 44px;
    border: 3px solid rgba(99, 102, 241, 0.2);
    border-top-color: #6366f1;
    border-radius: 50%;
    animation: as19-spin 0.9s linear infinite;
}
@keyframes as19-spin {
    to { transform: rotate(360deg); }
}
.add-character-preview-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}
.add-character-preview-chip {
    display: inline-flex;
    align-items: center;
    padding: 0.3rem 0.65rem;
    border-radius: 999px;
    background: rgba(99, 102, 241, 0.15);
    color: #c7d2fe;
    font-size: 0.78rem;
    font-weight: 500;
    border: 1px solid rgba(99, 102, 241, 0.3);
}
.add-character-preview-chip-cache {
    background: rgba(16, 185, 129, 0.15);
    color: #a7f3d0;
    border-color: rgba(16, 185, 129, 0.3);
}
.add-character-preview-chip-total {
    background: rgba(245, 158, 11, 0.12);
    color: #fde68a;
    border-color: rgba(245, 158, 11, 0.3);
}
.add-character-preview-chip-regen {
    background: rgba(236, 72, 153, 0.12);
    color: #fbcfe8;
    border-color: rgba(236, 72, 153, 0.3);
}
.add-character-preview-field {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}
.add-character-preview-field label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #cbd5e1;
}
.add-character-preview-field textarea {
    width: 100%;
    padding: 0.65rem 0.8rem;
    border-radius: 8px;
    background: #0f172a;
    border: 1px solid rgba(99, 102, 241, 0.25);
    color: #e2e8f0;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    resize: vertical;
    min-height: 60px;
    transition: border-color 0.15s ease;
}
.add-character-preview-field textarea:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.add-character-preview-field textarea:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}
.add-character-preview-warning {
    padding: 0.75rem 0.9rem;
    border-radius: 8px;
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.35);
    color: #fde68a;
    font-size: 0.85rem;
    line-height: 1.5;
}
.add-character-preview-warning-cap {
    background: rgba(239, 68, 68, 0.1);
    border-color: rgba(239, 68, 68, 0.4);
    color: #fecaca;
}
/* Footer button row — unified style for input + preview modes */
.add-character-footer-row {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
    align-items: center;
    width: 100%;
}
.add-character-footer-row-preview {
    justify-content: space-between;
}
.add-character-footer-row-preview .btn-danger {
    margin-right: auto;
}
/* btn-danger baseline (if not already defined project-wide) */
.add-character-footer-row-preview .btn-danger {
    padding: 0.5rem 1rem;
    border-radius: 6px;
    background: rgba(239, 68, 68, 0.15);
    border: 1px solid rgba(239, 68, 68, 0.35);
    color: #fca5a5;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
}
.add-character-footer-row-preview .btn-danger:hover:not(:disabled) {
    background: rgba(239, 68, 68, 0.25);
    border-color: rgba(239, 68, 68, 0.5);
    color: #fecaca;
}
.add-character-footer-row-preview .btn-danger:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Responsive: stack comparison vertically on narrow screens */
@media (max-width: 720px) {
    .add-character-preview-comparison.has-reference {
        grid-template-columns: 1fr;
    }
    .add-character-footer-row-preview {
        flex-wrap: wrap;
    }
    .add-character-footer-row-preview .btn-danger {
        margin-right: 0;
    }
}
/* ═════ End Ship AS.19 ═════ */

/* ═════════════════════════════════════════════════════════════════════════
 * Ship AS.21 (v0.31.49) — Reused Veo Clip Shot Card Preview Sync
 * Visual indicator: teal glow border on shot cards where user has picked a
 * replacement clip via "Use Existing" in the Veo Clip Library picker.
 * Fires alongside the ♻ Reused Veo Clip badge inside the card body.
 * ═════════════════════════════════════════════════════════════════════════ */
.cjeditor-shot-scroller-item.cjeditor-shot-reused {
    outline: 2px solid rgba(16, 185, 129, 0.55);
    outline-offset: -2px;
    box-shadow: 0 0 12px rgba(16, 185, 129, 0.18);
}
.cjeditor-shot-scroller-item.cjeditor-shot-reused video,
.cjeditor-shot-scroller-item.cjeditor-shot-reused img {
    /* Subtle teal corner-glow on the video thumbnail itself to reinforce reuse state */
    box-shadow: inset 0 0 0 1px rgba(16, 185, 129, 0.35);
}


/* ========================================================================================
   SHIP IF.3 — DASHBOARD REVOLVING-DOOR MP4 SHOWCASE
   Vault pattern: [[Media-Endpoint-Playback-Performance-Hardening-Pattern]] L1-L6 + Case 3
   ======================================================================================== */

/* --- Loading shimmer --- */
.dashboard-loading-shimmer {
    padding: 2rem;
    max-width: 1600px;
    margin: 0 auto;
}
.dashboard-loading-shimmer .shimmer-hero {
    width: 100%;
    height: 480px;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.03) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: 20px;
    margin-bottom: 2rem;
}
.dashboard-loading-shimmer .shimmer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.dashboard-loading-shimmer .shimmer-tile {
    aspect-ratio: 16 / 9;
    background: linear-gradient(90deg,
        rgba(255,255,255,0.03) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 100%);
    background-size: 200% 100%;
    animation: shimmer 1.4s ease-in-out infinite;
    border-radius: 12px;
}
@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* --- Empty state --- */
.dashboard-empty {
    padding: 6rem 2rem;
    text-align: center;
    max-width: 600px;
    margin: 0 auto;
}

/* --- Showcase container --- */
.dashboard-showcase {
    padding: 1.5rem;
    max-width: 1600px;
    margin: 0 auto;
}

/* --- Hero strip --- */
.showcase-hero-wrapper {
    margin-bottom: 2.5rem;
}
.showcase-hero-meta {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}
.showcase-hero-title h1 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    letter-spacing: -0.02em;
}
.showcase-hero-title p {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}
.rotate-badge {
    color: #10b981;
    font-size: 0.75rem;
    animation: pulse 2s ease-in-out infinite;
}
.rotate-badge-paused {
    color: var(--text-secondary);
    font-size: 0.75rem;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.5; }
}
.showcase-hero-controls {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.showcase-ctrl-btn {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.showcase-ctrl-btn:hover {
    background: var(--surface-glass-hover);
    border-color: var(--border-glass-strong);
    transform: translateY(-1px);
}
.showcase-hero-index {
    font-variant-numeric: tabular-nums;
    font-size: 0.85rem;
    color: var(--text-secondary);
    padding: 0 0.75rem;
    min-width: 60px;
    text-align: center;
}

.showcase-hero-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    max-height: 560px;
    border-radius: 20px;
    overflow: hidden;
    cursor: pointer;
    background: #000;
    box-shadow:
        0 20px 60px rgba(0, 0, 0, 0.5),
        0 0 0 1px var(--border-glass-strong);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}
.showcase-hero-stage:hover {
    transform: translateY(-2px);
    box-shadow:
        0 24px 72px rgba(0, 0, 0, 0.6),
        0 0 0 1px rgba(99, 102, 241, 0.4);
}
.showcase-hero-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.showcase-hero-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 2rem;
    background: linear-gradient(to top,
        rgba(0, 0, 0, 0.85) 0%,
        rgba(0, 0, 0, 0.5) 60%,
        transparent 100%);
    pointer-events: none;
}
.showcase-hero-name {
    font-size: 1.25rem;
    font-weight: 600;
    color: #fff;
    margin-bottom: 0.25rem;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.8);
    word-break: break-word;
}
.showcase-hero-stats {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.75);
    margin-bottom: 0.5rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8);
}
.showcase-hero-cta {
    display: inline-block;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.9);
    background: rgba(99, 102, 241, 0.25);
    border: 1px solid rgba(99, 102, 241, 0.5);
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* --- Grid --- */
.showcase-grid-wrapper {
    margin-top: 1rem;
}
.showcase-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    flex-wrap: wrap;
    gap: 0.75rem;
}
.showcase-grid-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}
.showcase-sort {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.showcase-sort select {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    padding: 0.4rem 0.6rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}
.showcase-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}
.showcase-tile {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    background: var(--bg-2);
    border: 1px solid var(--border-glass);
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease, box-shadow 0.2s ease;
}
.showcase-tile:hover {
    transform: scale(1.03);
    border-color: rgba(99, 102, 241, 0.5);
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(99, 102, 241, 0.3);
    z-index: 2;
}
.showcase-tile.is-hero {
    border-color: rgba(99, 102, 241, 0.6);
    box-shadow: inset 0 0 0 2px rgba(99, 102, 241, 0.3);
}
.showcase-tile-poster,
.showcase-tile-video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.showcase-tile-hover-zone {
    position: absolute;
    inset: 0;
    z-index: 2;
}
.showcase-tile-meta {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0.6rem 0.75rem 0.5rem;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    pointer-events: none;
    z-index: 3;
}
.showcase-tile-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: #fff;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 0.15rem;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.9);
}
.showcase-tile-stats {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.65);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
}

/* --- Pagination --- */
.showcase-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2rem 0 1rem;
    font-size: 0.85rem;
    color: var(--text-secondary);
}
.showcase-pagination button {
    background: var(--surface-glass);
    border: 1px solid var(--border-glass);
    color: var(--text-primary);
    padding: 0.5rem 1rem;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
    transition: all 0.15s ease;
}
.showcase-pagination button:hover:not(:disabled) {
    background: var(--surface-glass-hover);
    border-color: var(--border-glass-strong);
}
.showcase-pagination button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* --- Cinema modal --- */
.dashboard-cinema-modal {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.92);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
}
.cinema-modal-content {
    position: relative;
    width: 100%;
    max-width: 1400px;
    max-height: 90vh;
    background: var(--bg-1);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.8);
    border: 1px solid var(--border-glass-strong);
}
.cinema-close-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: all 0.15s ease;
}
.cinema-close-btn:hover {
    background: rgba(0, 0, 0, 0.85);
    transform: scale(1.08);
}
.cinema-modal-video {
    width: 100%;
    max-height: calc(90vh - 100px);
    display: block;
    background: #000;
}
.cinema-modal-meta {
    padding: 1rem 1.5rem;
    background: var(--bg-2);
}
.cinema-modal-meta h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 0.25rem 0;
    word-break: break-word;
}
.cinema-modal-meta p {
    font-size: 0.8rem;
    color: var(--text-secondary);
    margin: 0;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .dashboard-showcase { padding: 1rem; }
    .showcase-hero-title h1 { font-size: 1.35rem; }
    .showcase-grid { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }
    .showcase-hero-stage { max-height: 240px; border-radius: 14px; }
    .showcase-hero-overlay { padding: 1rem; }
    .cinema-modal-content { max-height: 95vh; border-radius: 14px; }
}
/* END SHIP IF.3 CSS */