/* ═══════════════════════════════════════════════════════════
   BOB STUDIO — Dark Premium · LiquidGlass Design System
   ═══════════════════════════════════════════════════════════ */

/* ─── Design Tokens ─────────────────────────────────────── */
:root {
    /* Core backgrounds — light theme */
    --bg:              #faf9ff;
    --bg-surface:      #f3eeff;
    --bg-raised:       #ffffff;

    /* Glass surfaces */
    --glass:           rgba(255, 255, 255, 0.82);
    --glass-hover:     rgba(255, 255, 255, 0.97);
    --glass-elevated:  rgba(255, 255, 255, 0.97);
    --glass-sidebar:   rgba(255, 255, 255, 0.94);
    --glass-topbar:    rgba(250, 249, 255, 0.90);

    /* Borders */
    --line:            rgba(123, 53, 216, 0.10);
    --line-strong:     rgba(123, 53, 216, 0.18);
    --line-subtle:     rgba(123, 53, 216, 0.06);

    /* Brand — bob purple */
    --primary:         #7B35D8;
    --primary-light:   #9f5ff0;
    --primary-dim:     rgba(123, 53, 216, 0.08);
    --primary-glow:    rgba(123, 53, 216, 0.15);

    /* Text */
    --text:            #1a1a2e;
    --text-muted:      rgba(26, 26, 46, 0.58);
    --text-soft:       rgba(26, 26, 46, 0.38);

    /* Semantic */
    --success:         #059669;
    --success-dim:     rgba(5, 150, 105, 0.10);
    --warning:         #d97706;
    --warning-dim:     rgba(217, 119, 6, 0.10);
    --danger:          #dc2626;
    --danger-dim:      rgba(220, 38, 38, 0.10);
    --info:            #2563eb;
    --info-dim:        rgba(37, 99, 235, 0.10);

    /* Shadows */
    --shadow-xs:  0 1px 4px rgba(0,0,0,0.06);
    --shadow-sm:  0 2px 12px rgba(0,0,0,0.08);
    --shadow-md:  0 4px 24px rgba(0,0,0,0.09);
    --shadow-lg:  0 8px 48px rgba(0,0,0,0.12);
    --glow:       0 0 24px rgba(123, 53, 216, 0.12);

    /* Glass recipe helpers */
    --glass-blur:    blur(20px) saturate(160%);
    --glass-shadow:  0 2px 16px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.9);
    --glass-inset:   inset 0 1px 0 rgba(255,255,255,0.9);

    /* Shape */
    --radius-sm:      8px;
    --radius-control: 10px;
    --radius-card:    14px;
    --radius-panel:   18px;
    --radius-pill:    9999px;

    /* Spacing */
    --space-2:  8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;
    --space-7: 28px;

    /* Layout */
    --sidebar-width: 252px;
}

/* ─── Base Reset ─────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
    margin: 0;
    min-height: 100vh;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
button, input, textarea, select { font: inherit; }
button { border: 0; cursor: pointer; }

.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
    line-height: 1;
    flex-shrink: 0;
}

/* ─── Atmosphere Orbs ────────────────────────────────────── */
body::before {
    content: '';
    position: fixed;
    top: -25%;
    left: -8%;
    width: 900px;
    height: 900px;
    background: radial-gradient(ellipse at center,
        rgba(109, 40, 217, 0.24) 0%,
        rgba(124, 92, 246, 0.10) 35%,
        transparent 68%);
    pointer-events: none;
    z-index: 0;
    animation: orb-a 22s ease-in-out infinite alternate;
}

body::after {
    content: '';
    position: fixed;
    bottom: -22%;
    right: -6%;
    width: 750px;
    height: 750px;
    background: radial-gradient(ellipse at center,
        rgba(59, 130, 246, 0.16) 0%,
        rgba(99, 102, 241, 0.07) 38%,
        transparent 68%);
    pointer-events: none;
    z-index: 0;
    animation: orb-b 28s ease-in-out infinite alternate;
}

@keyframes orb-a {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(50px, 35px) scale(1.12); }
}
@keyframes orb-b {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(-40px, -25px) scale(1.09); }
}

/* ─── LiquidGlass Panel System ───────────────────────────── */
.panel {
    border-radius: var(--radius-panel);
    position: relative;
    z-index: 1;
}

/* Shimmer highlight shared by glass panels */
.panel-glass::before,
.panel-pop::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(135deg, rgba(255,255,255,0.2) 0%, transparent 55%);
    pointer-events: none;
    z-index: 0;
}

.panel-glass {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--line);
    box-shadow: var(--glass-shadow);
}

.panel-pop {
    background: rgba(123, 53, 216, 0.05);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--line-strong);
    box-shadow: var(--glass-shadow), var(--glow);
}

.panel-pop::before {
    background: linear-gradient(135deg, rgba(124, 92, 246, 0.13) 0%, rgba(255,255,255,0.04) 60%, transparent 100%);
}

.panel-soft {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--line);
    box-shadow: var(--shadow-md);
}

.product-table,
.capability-zone,
.auth-copy,
.auth-form-card {
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--line);
    box-shadow: var(--glass-shadow);
}

.metric-card,
.queue-card,
.timeline-item,
.sidebar-card,
.user-chip,
.auth-note,
.alert-error,
.utility-link,
.schema-item {
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
}

/* ─── Typography ─────────────────────────────────────────── */
.auth-copy h1,
.topbar-title,
.hero-panel h2,
.section-heading h2,
.auth-form-card h2,
.priority-block h3,
.connection-card h3 {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.04em;
}

/* ─── Chips & Labels ─────────────────────────────────────── */
.eyebrow,
.card-label,
.status-pill,
.filter-chip,
.action-chip,
.mini-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 24px;
    padding: 0 0.6rem;
    border-radius: 6px;
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
}

.eyebrow,
.card-label {
    background: var(--primary-dim);
    color: var(--primary-light);
    border: 1px solid rgba(124, 92, 246, 0.26);
}

.status-pill,
.action-chip,
.mini-chip {
    background: rgba(255, 255, 255, 0.07);
    color: var(--text-muted);
    border: 1px solid var(--line);
}

.filter-chip {
    background: var(--glass);
    border: 1px solid var(--line-strong);
    color: var(--text-muted);
}

.filter-chip.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ─── Buttons ────────────────────────────────────────────── */
.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-height: 38px;
    padding: 0 1.1rem;
    border-radius: var(--radius-control);
    font-weight: 600;
    font-size: 0.875rem;
    transition: all 150ms ease;
    cursor: pointer;
}

.button-primary {
    background: var(--primary);
    color: #fff;
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.14), 0 4px 18px rgba(124, 92, 246, 0.32);
}

.button-primary:hover {
    background: var(--primary-light);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.16), 0 6px 24px rgba(124, 92, 246, 0.46);
    transform: translateY(-1px);
}

.button-secondary {
    background: var(--glass);
    border: 1px solid var(--line);
    color: var(--text-muted);
    backdrop-filter: blur(10px);
}

.button-secondary:hover {
    background: var(--glass-hover);
    border-color: var(--line-strong);
    color: var(--text);
}

.button-agent {
    min-height: 36px;
    background: var(--glass);
    border: 1px solid var(--line);
    color: var(--text-muted);
    font-size: 0.85rem;
    border-radius: var(--radius-control);
    backdrop-filter: blur(10px);
    transition: all 150ms ease;
}

.button-agent:hover {
    background: var(--glass-hover);
    border-color: var(--line-strong);
    color: var(--text);
}

.button-small {
    min-height: 32px;
    font-size: 0.82rem;
    padding: 0 0.8rem;
}

.button-ghost {
    background: transparent;
    border: 1px solid var(--line);
    color: var(--text-soft);
    backdrop-filter: none;
}

.button-ghost:hover {
    background: var(--glass);
    border-color: var(--line-strong);
    color: var(--text);
}

.icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--glass);
    border: 1px solid var(--line);
    color: var(--text-muted);
}

/* ─── Form Fields ────────────────────────────────────────── */
.field {
    display: grid;
    gap: 8px;
}

.field span {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-muted);
}

.field input,
.field select,
.field textarea,
.topbar-search input {
    width: 100%;
    border: 0;
    outline: none;
    color: var(--text);
}

.field input {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    transition: all 150ms ease;
}

.field select,
.field textarea {
    padding: 0.9rem 1rem;
    border-radius: var(--radius-control);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--line);
    transition: all 150ms ease;
}

.field select {
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
    background-position: calc(100% - 18px) calc(1em + 2px), calc(100% - 12px) calc(1em + 2px);
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    padding-right: 2.3rem;
}

.field textarea {
    resize: vertical;
    min-height: 98px;
}

.field input::placeholder,
.field textarea::placeholder,
.topbar-search input::placeholder { color: var(--text-soft); }

.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: rgba(124, 92, 246, 0.55);
    box-shadow: 0 0 0 3px rgba(124, 92, 246, 0.14);
    background: rgba(255, 255, 255, 0.09);
    outline: none;
}

.topbar-search input {
    transition: all 150ms ease;
}

.topbar-search input:focus {
    border-color: rgba(124, 92, 246, 0.45);
    box-shadow: 0 0 0 3px rgba(124, 92, 246, 0.12);
    background: rgba(255, 255, 255, 0.09);
    outline: none;
}

/* ─── Alerts ─────────────────────────────────────────────── */
.alert-success {
    margin-bottom: var(--space-4);
    padding: var(--space-4);
    border-radius: var(--radius-card);
    border: 1px solid rgba(52, 211, 153, 0.24);
    background: var(--success-dim);
    color: var(--success);
    font-weight: 600;
}

.alert-error {
    margin-bottom: 18px;
    padding: var(--space-4);
    background: var(--danger-dim);
    border-color: rgba(248, 113, 113, 0.24);
    color: var(--danger);
    font-weight: 600;
}

/* ─── Landing / Home (v2 – lyst design) ─────────────────── */

/* Reset & shell */
.lp-shell {
    --lp-purple: #7B35D8;
    --lp-navy:   #2A1460;
    --lp-pink:   #E88ABF;
    --lp-bg:     #faf9ff;
    --lp-card:   #ffffff;
    --lp-border: rgba(123,53,216,0.12);
    --lp-text:   #1a1a2e;
    --lp-muted:  #6b7280;
    background: var(--lp-bg);
    color: var(--lp-text);
    font-family: 'Inter', sans-serif;
    overflow-x: hidden;
}

/* ── Eyebrow ── */
.lp-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--lp-purple);
    margin-bottom: 12px;
}

/* ── Buttons ── */
.lp-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.18s ease;
    padding: 9px 18px;
    border: none;
}
.lp-btn .material-symbols-outlined { font-size: 16px; }
.lp-btn-primary {
    background: var(--lp-purple);
    color: #fff;
    box-shadow: 0 4px 18px rgba(123,53,216,0.28);
}
.lp-btn-primary:hover {
    background: #6a29c4;
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(123,53,216,0.38);
}
.lp-btn-ghost {
    background: transparent;
    color: var(--lp-text);
    border: 1.5px solid var(--lp-border);
}
.lp-btn-ghost:hover {
    border-color: var(--lp-purple);
    color: var(--lp-purple);
    background: rgba(123,53,216,0.04);
}
.lp-btn-lg { padding: 13px 26px; font-size: 15px; border-radius: 12px; }
.lp-btn-lg .material-symbols-outlined { font-size: 18px; }

/* ── Nav ── */
.lp-nav {
    display: flex;
    align-items: center;
    gap: 24px;
    padding: 16px 48px;
    position: sticky;
    top: 0;
    z-index: 100;
    background: rgba(250,249,255,0.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--lp-border);
}
.lp-brand img { height: 32px; display: block; }
.lp-nav-links {
    display: flex;
    gap: 24px;
    margin-left: 16px;
    flex: 1;
}
.lp-nav-links a {
    font-size: 14px;
    font-weight: 500;
    color: var(--lp-muted);
    text-decoration: none;
    transition: color 0.15s;
}
.lp-nav-links a:hover { color: var(--lp-purple); }
.lp-nav-actions { display: flex; gap: 8px; }

/* ── Hero ── */
.lp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
    padding: 80px 48px 64px;
    max-width: 1200px;
    margin: 0 auto;
}
.lp-hero-right h1 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(2rem, 4vw, 3.2rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 20px;
    color: var(--lp-navy);
}
.lp-gradient-text {
    background: linear-gradient(135deg, var(--lp-purple) 0%, #c084fc 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.lp-hero-sub {
    font-size: 17px;
    color: var(--lp-muted);
    line-height: 1.65;
    margin: 0 0 32px;
    max-width: 480px;
}
.lp-hero-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 28px; }
.lp-hero-trust {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}
.lp-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 500;
    color: var(--lp-muted);
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 20px;
    padding: 4px 12px;
}
.lp-trust-badge .material-symbols-outlined { font-size: 13px; color: var(--lp-purple); }
.lp-auth-note {
    font-size: 13px;
    color: var(--lp-muted);
    margin-top: 16px;
}
.lp-auth-note a { color: var(--lp-purple); }

/* ── Hero mascot ── */
.lp-hero-left { display: flex; justify-content: center; align-items: center; }
.lp-hero-mascot {
    position: relative;
    width: 340px;
    height: 340px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.lp-bob-glow {
    position: absolute;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,53,216,0.15) 0%, rgba(123,53,216,0) 70%);
    animation: lpGlowPulse 3s ease-in-out infinite;
}
.lp-bob-svg {
    width: 200px;
    height: 200px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 8px 24px rgba(123,53,216,0.18));
}
.lp-bob-bubble {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 14px 14px 14px 4px;
    padding: 9px 16px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(123,53,216,0.10);
    z-index: 3;
    transition: opacity 0.3s ease, transform 0.3s ease;
    color: var(--lp-navy);
}
/* Floating activity chips */
.lp-float-chip {
    position: absolute;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 20px;
    padding: 5px 12px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--lp-navy);
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
    z-index: 3;
    white-space: nowrap;
}
.lp-float-chip .material-symbols-outlined { font-size: 13px; color: var(--lp-purple); }
.lp-fc-1 { bottom: 60px; left: -20px; animation: lpFloat1 5s ease-in-out infinite; }
.lp-fc-2 { top: 90px;   right: -10px; animation: lpFloat2 6s ease-in-out infinite 0.8s; }
.lp-fc-3 { bottom: 24px; right: 0px;  animation: lpFloat3 4.5s ease-in-out infinite 0.3s; }

/* Bob animations */
#lp-bob-head   { animation: lpWobble 4s ease-in-out infinite; }
.lp-antenna    { animation: lpAntennaWiggle 3s ease-in-out infinite; }
.lp-eye-l      { animation: lpBlink 3.5s ease-in-out infinite; }
.lp-eye-r      { animation: lpBlink 3.5s ease-in-out infinite 0.15s; }
.lp-smile      { animation: lpSmile 4s ease-in-out infinite; }
.lp-pupil      { animation: lpPupilDrift 6s ease-in-out infinite; }

/* ── Marquee ── */
.lp-marquee-wrap {
    overflow: hidden;
    border-top: 1px solid var(--lp-border);
    border-bottom: 1px solid var(--lp-border);
    background: #fff;
    padding: 12px 0;
    margin: 0;
}
.lp-marquee { overflow: hidden; }
.lp-marquee-track {
    display: flex;
    gap: 0;
    width: max-content;
    animation: lpMarquee 28s linear infinite;
}
.lp-marquee-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 24px;
    font-size: 13px;
    font-weight: 500;
    color: var(--lp-muted);
    border-right: 1px solid var(--lp-border);
    white-space: nowrap;
}
.lp-marquee-item .material-symbols-outlined { font-size: 15px; color: var(--lp-purple); }

/* ── Section base ── */
.lp-section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 96px 48px;
}
.lp-section-head {
    text-align: center;
    margin-bottom: 56px;
}
.lp-section-head h2 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    font-weight: 800;
    color: var(--lp-navy);
    margin: 0;
    max-width: 600px;
    margin: 0 auto;
    line-height: 1.25;
}

/* ── Features grid ── */
.lp-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.lp-feature {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 28px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.lp-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(123,53,216,0.10);
    border-color: rgba(123,53,216,0.25);
}
.lp-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--icon-bg, rgba(123,53,216,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.lp-feature-icon .material-symbols-outlined {
    font-size: 22px;
    color: var(--icon-color, var(--lp-purple));
}
.lp-feature h3 {
    font-size: 15px;
    font-weight: 700;
    color: var(--lp-navy);
    margin: 0 0 8px;
}
.lp-feature p {
    font-size: 13.5px;
    color: var(--lp-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── How it works ── */
.lp-how { background: #fff; border-radius: 24px; }
.lp-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
    position: relative;
}
.lp-steps-line {
    position: absolute;
    top: 30px;
    left: calc(12.5% + 16px);
    right: calc(12.5% + 16px);
    height: 2px;
    background: linear-gradient(90deg, var(--lp-purple), rgba(123,53,216,0.2));
    z-index: 0;
}
.lp-step {
    text-align: center;
    padding: 0 20px;
    position: relative;
    z-index: 1;
}
.lp-step-num {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    color: var(--lp-purple);
    opacity: 0.5;
    margin-bottom: 8px;
}
.lp-step-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: #fff;
    border: 2px solid var(--lp-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 16px;
    box-shadow: 0 0 0 6px var(--lp-bg);
}
.lp-step-icon .material-symbols-outlined { font-size: 22px; color: var(--lp-purple); }
.lp-step h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lp-navy);
    margin: 0 0 8px;
}
.lp-step p {
    font-size: 13px;
    color: var(--lp-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── CTA ── */
.lp-cta {
    max-width: 1200px;
    margin: 0 auto 80px;
    padding: 64px 48px;
    background: linear-gradient(135deg, #f3eeff 0%, #faf5ff 60%, #fff 100%);
    border: 1px solid var(--lp-border);
    border-radius: 24px;
    display: flex;
    align-items: center;
    gap: 56px;
}
.lp-cta-bob { flex-shrink: 0; }
.lp-cta-svg {
    width: 130px;
    height: 130px;
    filter: drop-shadow(0 6px 20px rgba(123,53,216,0.16));
}
.lp-cta-copy { flex: 1; }
.lp-cta-copy h2 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.5rem, 2.5vw, 2.2rem);
    font-weight: 800;
    color: var(--lp-navy);
    margin: 0 0 12px;
}
.lp-cta-copy p {
    font-size: 15px;
    color: var(--lp-muted);
    margin: 0 0 28px;
    line-height: 1.6;
}

/* ── Footer ── */
.lp-footer {
    text-align: center;
    padding: 24px 48px 40px;
    font-size: 13px;
    color: var(--lp-muted);
    border-top: 1px solid var(--lp-border);
}

/* ── Scroll reveal ── */
.lp-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.55s ease, transform 0.55s ease;
}
.lp-reveal.lp-in {
    opacity: 1;
    transform: translateY(0);
}
/* Stagger children of feature grid */
.lp-features-grid .lp-feature:nth-child(2) { transition-delay: 0.08s; }
.lp-features-grid .lp-feature:nth-child(3) { transition-delay: 0.16s; }
.lp-features-grid .lp-feature:nth-child(4) { transition-delay: 0.08s; }
.lp-features-grid .lp-feature:nth-child(5) { transition-delay: 0.16s; }
.lp-features-grid .lp-feature:nth-child(6) { transition-delay: 0.24s; }
.lp-steps .lp-step:nth-child(2) { transition-delay: 0.1s; }
.lp-steps .lp-step:nth-child(3) { transition-delay: 0.2s; }
.lp-steps .lp-step:nth-child(4) { transition-delay: 0.3s; }

/* ── Keyframes ── */
@keyframes lpWobble {
    0%,100% { transform: rotate(0deg) translateY(0px); }
    20%      { transform: rotate(2.5deg) translateY(-2px); }
    40%      { transform: rotate(-2deg) translateY(1px); }
    60%      { transform: rotate(1.5deg) translateY(-1px); }
    80%      { transform: rotate(-1deg) translateY(0px); }
}
@keyframes lpBlink {
    0%,90%,100% { transform: scaleY(1); }
    93%,97%     { transform: scaleY(0.08); }
}
@keyframes lpSmile {
    0%,100% { transform: scaleX(1); }
    50%     { transform: scaleX(1.08); }
}
@keyframes lpAntennaWiggle {
    0%,100% { transform: rotate(0deg); transform-origin: 50% 100%; }
    30%     { transform: rotate(12deg); transform-origin: 50% 100%; }
    60%     { transform: rotate(-8deg); transform-origin: 50% 100%; }
}
@keyframes lpPupilDrift {
    0%,100% { transform: translate(0,0); }
    25%     { transform: translate(-3px, 1px); }
    50%     { transform: translate(2px, -1px); }
    75%     { transform: translate(-1px, 2px); }
}
@keyframes lpWave {
    0%,100% { transform: rotate(0deg); }
    20%     { transform: rotate(18deg); }
    40%     { transform: rotate(-8deg); }
    60%     { transform: rotate(14deg); }
    80%     { transform: rotate(-4deg); }
}
@keyframes lpGlowPulse {
    0%,100% { transform: scale(1); opacity: 0.7; }
    50%     { transform: scale(1.15); opacity: 1; }
}
@keyframes lpFloat1 {
    0%,100% { transform: translateY(0px) rotate(-1deg); }
    50%     { transform: translateY(-8px) rotate(1deg); }
}
@keyframes lpFloat2 {
    0%,100% { transform: translateY(0px) rotate(1deg); }
    50%     { transform: translateY(-10px) rotate(-1deg); }
}
@keyframes lpFloat3 {
    0%,100% { transform: translateY(0px); }
    50%     { transform: translateY(-6px); }
}
@keyframes lpMarquee {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}

/* ── Nav active link ── */
.lp-nav-active { color: var(--lp-purple) !important; font-weight: 600; }

/* ── Pricing page ── */
.lp-pricing-hero {
    text-align: center;
    padding: 80px 24px 40px;
    max-width: 640px;
    margin: 0 auto;
}
.lp-pricing-hero h1 {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 800;
    line-height: 1.18;
    color: var(--lp-navy);
    margin: 12px 0 16px;
}
.lp-pricing-hero-sub {
    color: #64748b;
    font-size: 1.05rem;
    margin-bottom: 32px;
}
.lp-billing-toggle {
    display: inline-flex;
    background: #f1f0f8;
    border-radius: 12px;
    padding: 4px;
    gap: 4px;
}
.lp-toggle-btn {
    border: none;
    background: transparent;
    padding: 8px 20px;
    border-radius: 9px;
    font-size: 0.9rem;
    font-weight: 500;
    color: #64748b;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    display: flex;
    align-items: center;
    gap: 6px;
}
.lp-toggle-btn.lp-toggle-active {
    background: #fff;
    color: var(--lp-navy);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.lp-toggle-badge {
    background: #dcfce7;
    color: #16a34a;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 20px;
}
.lp-pricing-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    max-width: 1040px;
    margin: 0 auto;
    padding: 0 24px 80px;
    align-items: stretch;
}
.lp-plan {
    background: #fff;
    border: 1.5px solid #e8e4f4;
    border-radius: 20px;
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
    transition: box-shadow 0.2s, transform 0.2s;
}
.lp-plan:hover {
    box-shadow: 0 8px 32px rgba(123,53,216,0.10);
    transform: translateY(-2px);
}
.lp-plan-featured {
    background: linear-gradient(145deg, #7B35D8 0%, #5b21b6 100%);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 12px 40px rgba(123,53,216,0.30);
    transform: translateY(-8px);
}
.lp-plan-featured:hover {
    transform: translateY(-10px);
    box-shadow: 0 16px 48px rgba(123,53,216,0.38);
}
.lp-plan-badge {
    position: absolute;
    top: -14px;
    left: 50%;
    transform: translateX(-50%);
    background: #facc15;
    color: #78350f;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 3px 14px;
    border-radius: 20px;
    white-space: nowrap;
}
.lp-plan-header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}
.lp-plan-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--icon-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.lp-plan-icon .material-symbols-outlined { font-size: 22px; color: var(--icon-color); }
.lp-plan-name { font-size: 1.35rem; font-weight: 800; margin: 0; color: inherit; }
.lp-plan-tagline { font-size: 0.88rem; color: #94a3b8; margin: 0; }
.lp-plan-featured .lp-plan-tagline { color: rgba(255,255,255,0.7); }
.lp-plan-price-wrap { margin-bottom: 24px; }
.lp-plan-price { display: flex; align-items: baseline; gap: 4px; }
.lp-price-amount { font-size: 2.4rem; font-weight: 800; color: var(--lp-navy); line-height: 1; }
.lp-plan-featured .lp-price-amount { color: #fff; }
.lp-price-unit { font-size: 0.9rem; color: #64748b; font-weight: 500; }
.lp-plan-featured .lp-price-unit { color: rgba(255,255,255,0.7); }
.lp-price-note { font-size: 0.8rem; color: #94a3b8; margin: 4px 0 0; min-height: 1.2em; }
.lp-plan-featured .lp-price-note { color: rgba(255,255,255,0.6); }
.lp-plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
}
.lp-plan-features li { display: flex; align-items: flex-start; gap: 8px; font-size: 0.9rem; color: #334155; }
.lp-plan-featured .lp-plan-features li { color: rgba(255,255,255,0.9); }
.lp-plan-features li .material-symbols-outlined { font-size: 16px; color: var(--lp-purple); flex-shrink: 0; margin-top: 1px; }
.lp-plan-featured .lp-plan-features li .material-symbols-outlined { color: #c4b5fd; }
.lp-feat-no { opacity: 0.45; }
.lp-feat-note { color: #94a3b8; font-size: 0.82em; }
.lp-plan-featured .lp-feat-note { color: rgba(255,255,255,0.5); }
.lp-plan-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 12px;
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    transition: opacity 0.15s, transform 0.15s;
}
.lp-plan-cta:hover { opacity: 0.88; transform: translateY(-1px); }
.lp-plan-cta .material-symbols-outlined { font-size: 16px; }
.lp-plan-cta-featured { background: #fff; color: var(--lp-purple); }
.lp-token-info {
    background: #fff;
    border-radius: 24px;
    max-width: 860px;
    margin: 0 auto 64px;
    padding: 48px 40px;
    text-align: center;
}
.lp-token-info h3 { font-size: 1.5rem; font-weight: 800; color: var(--lp-navy); margin: 8px 0 16px; }
.lp-token-info > p { color: #64748b; margin: 0 auto 32px; max-width: 520px; }
.lp-token-examples {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-bottom: 24px;
}
.lp-token-ex {
    background: #faf9ff;
    border: 1.5px solid #e8e4f4;
    border-radius: 16px;
    padding: 20px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.lp-token-ex .material-symbols-outlined { font-size: 26px; color: var(--lp-purple); }
.lp-token-ex strong { font-size: 1.1rem; color: var(--lp-navy); }
.lp-token-ex span:last-child { font-size: 0.82rem; color: #64748b; text-align: center; }
.lp-token-note { font-size: 0.82rem; color: #94a3b8; margin: 0; }
.lp-faq-list {
    max-width: 680px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-faq-item {
    background: #fff;
    border: 1.5px solid #e8e4f4;
    border-radius: 14px;
    overflow: hidden;
}
.lp-faq-item summary {
    padding: 16px 20px;
    font-weight: 600;
    color: var(--lp-navy);
    cursor: pointer;
    list-style: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.95rem;
}
.lp-faq-item summary::-webkit-details-marker { display: none; }
.lp-faq-item summary::after { content: '+'; font-size: 1.2rem; color: var(--lp-purple); flex-shrink: 0; margin-left: 12px; }
.lp-faq-item[open] summary::after { content: '−'; }
.lp-faq-item p { padding: 0 20px 16px; color: #64748b; font-size: 0.9rem; margin: 0; line-height: 1.6; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .lp-pricing-grid { grid-template-columns: 1fr; max-width: 440px; }
    .lp-plan-featured { transform: none; }
    .lp-plan-featured:hover { transform: translateY(-2px); }
    .lp-token-examples { grid-template-columns: 1fr; }
    .lp-token-info { padding: 32px 20px; }
    .lp-nav { padding: 14px 24px; }
    .lp-nav-links { display: none; }
    .lp-hero {
        grid-template-columns: 1fr;
        padding: 48px 24px 40px;
        gap: 40px;
        text-align: center;
    }
    .lp-hero-left { order: -1; }
    .lp-hero-actions { justify-content: center; }
    .lp-hero-trust { justify-content: center; }
    .lp-hero-sub { margin: 0 auto 32px; }
    .lp-features-grid { grid-template-columns: 1fr 1fr; }
    .lp-steps { grid-template-columns: 1fr 1fr; gap: 32px; }
    .lp-steps-line { display: none; }
    .lp-cta { flex-direction: column; text-align: center; gap: 32px; padding: 48px 24px; }
    .lp-section { padding: 64px 24px; }
}
@media (max-width: 600px) {
    .lp-features-grid { grid-template-columns: 1fr; }
    .lp-steps { grid-template-columns: 1fr; }
    .lp-hero-mascot { width: 260px; height: 260px; }
    .lp-bob-svg { width: 160px; height: 160px; }
    .lp-float-chip { display: none; }
}

/* ─── Console Shell ──────────────────────────────────────── */
.console-shell { display: block; }

/* ─── Sidebar ────────────────────────────────────────────── */
.sidebar {
    position: fixed;
    inset: 0 auto 0 0;
    width: var(--sidebar-width);
    padding: 20px 12px 20px;
    border: 0;
    border-right: 1px solid var(--line);
    background: var(--glass-sidebar);
    backdrop-filter: blur(32px) saturate(160%);
    -webkit-backdrop-filter: blur(32px) saturate(160%);
    box-shadow: none;
    display: flex;
    flex-direction: column;
    z-index: 40;
}

.sidebar-head { display: grid; gap: 16px; }

.brand-lockup { margin-bottom: 0; }

.brand-logo {
    display: block;
    width: 110px;
    max-width: 100%;
    height: auto;
    filter: brightness(0.88) saturate(1.2) drop-shadow(0 1px 4px rgba(123, 53, 216, 0.18));
}

.sidebar-intro {
    margin: 0;
    font-size: 0.81rem;
    color: var(--text-soft);
    max-width: 210px;
    line-height: 1.55;
}

.sidebar-workspace {
    display: grid;
    gap: 2px;
    padding: 10px 12px;
    background: rgba(123, 53, 216, 0.05);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    box-shadow: none;
}

.sidebar-workspace strong {
    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    font-weight: 700;
}

.sidebar-workspace span {
    color: var(--text-soft);
    font-size: 0.79rem;
}

.nav-stack {
    display: grid;
    gap: 3px;
    margin: 28px 0 auto;
}

.nav-link {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: var(--radius-control);
    color: var(--text-muted);
    font-family: 'Manrope', sans-serif;
    font-size: 0.87rem;
    font-weight: 600;
    transition: all 150ms ease;
    border: 1px solid transparent;
}

.nav-link:hover:not(.is-active) {
    background: rgba(123, 53, 216, 0.06);
    color: var(--text);
}

.nav-link.is-active {
    background: var(--primary-dim);
    color: var(--primary-light);
    border-color: rgba(124, 92, 246, 0.22);
}

.nav-link.is-active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 999px;
    background: var(--primary);
    box-shadow: 0 0 10px var(--primary-glow);
}

.nav-icon { font-size: 1.15rem; }

.nav-link-badge {
    margin-left: auto;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(239, 68, 68, 0.14);
    color: #dc2626;
    border: 1px solid rgba(239, 68, 68, 0.28);
    line-height: 1;
}

.nav-link-badge[hidden] {
    display: none;
}

.sidebar-footer { display: grid; gap: 10px; }
.sidebar-upgrade { width: 100%; }

.utility-links { display: grid; gap: 2px; }

.utility-link {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--text-soft);
    border-radius: var(--radius-control);
    font-size: 0.83rem;
    transition: all 150ms ease;
    background: transparent;
    border: 1px solid transparent;
    box-shadow: none;
}

.utility-link:hover {
    background: rgba(123, 53, 216, 0.06);
    color: var(--text-muted);
    border-color: transparent;
}

/* ─── Console Main ───────────────────────────────────────── */
.console-main {
    margin-left: var(--sidebar-width);
    min-height: 100vh;
    padding: 20px 26px 44px;
    position: relative;
    z-index: 1;
}

/* ─── Topbar ─────────────────────────────────────────────── */
.topbar {
    position: sticky;
    top: 0;
    z-index: 25;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px;
    margin-bottom: 22px;
    border-radius: var(--radius-panel);
    background: var(--glass-topbar);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    background-color: transparent;
    border: 1px solid var(--line);
    box-shadow: 0 1px 12px rgba(0,0,0,0.06), inset 0 1px 0 rgba(255,255,255,0.8);
}

.topbar-search {
    position: relative;
    flex: 1;
    max-width: 440px;
}

.topbar-search input {
    width: 100%;
    padding: 0.62rem 1rem 0.62rem 2.4rem;
    border-radius: var(--radius-control);
    background: #f8f7ff;
    border: 1px solid var(--line);
    color: var(--text);
    font-size: 0.84rem;
}

.search-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-soft);
    font-size: 1.1rem;
}

.topbar-actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ─── Page Heading ───────────────────────────────────────── */
.page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.page-heading-actions {
    display: flex;
    align-items: center;
    gap: 12px;
}

.topbar-title {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.7rem, 3vw, 2.15rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.04em;
}

.page-subtitle {
    margin: 6px 0 0;
    color: var(--text-soft);
    font-size: 0.87rem;
}

/* ─── User Chip ──────────────────────────────────────────── */
.user-chip {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-radius: var(--radius-control);
    box-shadow: none;
}

.user-chip strong {
    display: block;
    font-size: 0.90rem;
}

.user-chip span {
    color: var(--text-soft);
    font-size: 0.79rem;
}

.user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, #5B21B6 0%, #A78BFA 100%);
    color: #fff;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 0.79rem;
    box-shadow: 0 0 14px rgba(124, 92, 246, 0.45);
    flex-shrink: 0;
}

/* ─── Stats Bar ──────────────────────────────────────────── */
.console-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.metric-card {
    padding: 20px 22px;
    background: var(--glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-xs);
    transition: all 180ms ease;
}

.metric-card:nth-child(2) { border-left-color: var(--success); }
.metric-card:nth-child(3) { border-left-color: var(--info); }

.metric-card:hover {
    background: var(--glass-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.metric-value,
.queue-count {
    display: block;
    margin-bottom: 5px;
    font-family: 'Manrope', sans-serif;
    font-size: 1.85rem;
    font-weight: 800;
    letter-spacing: -0.04em;
}

.metric-label { font-size: 0.84rem; }

/* ─── Content Layout ─────────────────────────────────────── */
.console-content { display: grid; gap: 16px; }

.content-grid {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 16px;
}

/* Dashboard-specific wider activity column */
.dash-main-grid {
    grid-template-columns: 1.45fr 0.8fr;
}

.dash-side-stack {
    display: grid;
    gap: 16px;
    align-content: start;
}

.console-content > .panel,
.content-grid > .panel {
    padding: var(--space-6);
}

/* ─── Dashboard v2 ──────────────────────────────────────── */
.dash-main {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding-bottom: 32px;
}

/* Hero bar */
.dash-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 4px 0 8px;
}

.dash-hero-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
    font-family: 'Manrope', sans-serif;
}

.dash-hero-title .material-symbols-outlined {
    font-size: 1.3rem;
    color: #7c5cf6;
}

.dash-hero-sub {
    font-size: 0.85rem;
    color: var(--text-muted);
    margin: 0;
}

.dash-hero-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
}

/* Shared card */
.dash-card {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(118,134,156,0.18);
    border-radius: var(--radius-panel);
    overflow: hidden;
}

.dash-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 13px 16px 12px;
    border-bottom: 1px solid rgba(118,134,156,0.12);
    font-size: 0.82rem;
}

.dash-card-head .material-symbols-outlined {
    font-size: 1rem;
    color: var(--text-muted);
    flex-shrink: 0;
}

.dash-card-head strong {
    font-weight: 700;
    color: var(--text);
    font-size: 0.82rem;
    letter-spacing: 0.01em;
}

.dash-card-link {
    margin-left: auto;
    font-size: 0.78rem;
    color: #7c5cf6;
    text-decoration: none;
    font-weight: 600;
}

.dash-card-link:hover { text-decoration: underline; }

/* Pills */
.dash-pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 20px;
    font-size: 0.72rem;
    font-weight: 700;
}

.dash-pill-green {
    background: rgba(52,211,153,0.12);
    color: #059669;
}

.dash-pill-warn {
    background: rgba(251,191,36,0.15);
    color: #b45309;
}

/* Empty state */
.dash-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 20px;
    text-align: center;
    color: var(--text-muted);
    font-size: 0.84rem;
}

.dash-empty .material-symbols-outlined {
    font-size: 2rem;
    opacity: 0.35;
}

/* Two-column grid */
.dash-grid {
    display: grid;
    grid-template-columns: 300px 1fr;
    gap: 16px;
    align-items: start;
}

/* Automations card */
.dash-flow-list {
    display: flex;
    flex-direction: column;
}

.dash-flow-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(118,134,156,0.08);
    text-decoration: none;
    transition: background 0.12s;
}

.dash-flow-row:last-child { border-bottom: none; }

.dash-flow-row:hover { background: rgba(124,92,246,0.04); }

.dash-flow-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.dash-flow-name {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-flow-meta {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-muted);
}

.dash-flow-meta .material-symbols-outlined { font-size: 12px; }

/* Bob runs card */
.dash-bob-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-bob-run {
    padding: 14px 16px;
    border-bottom: 1px solid rgba(118,134,156,0.08);
}

.dash-bob-run:last-child { border-bottom: none; }

.dash-bob-run.has-errors { background: rgba(251,191,36,0.04); }

.dash-bob-run-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.dash-bob-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-bob-avatar.done {
    background: rgba(99,102,241,0.1);
    color: #6366f1;
}

.dash-bob-avatar.warn {
    background: rgba(251,191,36,0.15);
    color: #b45309;
}

.dash-bob-avatar .material-symbols-outlined { font-size: 1rem; }

.dash-bob-run-meta {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-bob-run-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-bob-run-time {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.dash-bob-narrative {
    font-size: 0.8rem;
    color: var(--text-soft, #475569);
    margin: 0 0 8px;
    line-height: 1.45;
}

.dash-bob-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.dash-bob-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(99,102,241,0.07);
    border: 1px solid rgba(99,102,241,0.15);
    font-size: 0.72rem;
    font-weight: 600;
    color: #6366f1;
}

.dash-bob-chip .material-symbols-outlined { font-size: 12px; }

/* Action queue */
.dash-queue-card { }

.dash-queue-list {
    display: flex;
    flex-direction: column;
}

.dash-queue-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid rgba(118,134,156,0.08);
    text-decoration: none;
    transition: background 0.12s;
}

.dash-queue-row:last-child { border-bottom: none; }

.dash-queue-row:hover { background: rgba(124,92,246,0.04); }

.dash-queue-media {
    position: relative;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
}

.dash-queue-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.dash-queue-icon.warn {
    background: rgba(251,191,36,0.12);
    color: #b45309;
}

.dash-queue-icon.info {
    background: rgba(99,102,241,0.1);
    color: #6366f1;
}

.dash-queue-icon .material-symbols-outlined { font-size: 1rem; }

.dash-queue-thumb {
    width: 36px;
    height: 36px;
    border-radius: 9px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(118,134,156,0.22);
}

.dash-queue-thumb-status {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 18px;
    height: 18px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255,255,255,0.95);
}

.dash-queue-thumb-status.warn {
    background: rgba(251,191,36,0.92);
    color: #8a4407;
}

.dash-queue-thumb-status.info {
    background: rgba(99,102,241,0.92);
    color: #ffffff;
}

.dash-queue-thumb-status .material-symbols-outlined {
    font-size: 11px;
}

.dash-queue-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-queue-title {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.dash-queue-issue {
    font-size: 0.74rem;
    color: var(--text-muted);
}

.dash-queue-sku {
    font-size: 0.72rem;
    color: var(--text-muted);
    flex-shrink: 0;
    font-family: monospace;
}

.dash-queue-arrow {
    font-size: 1rem;
    color: rgba(118,134,156,0.4);
    flex-shrink: 0;
    transition: color 0.12s;
}

.dash-queue-row:hover .dash-queue-arrow { color: #7c5cf6; }

.dash-queue-more {
    padding: 10px 16px;
    font-size: 0.78rem;
    text-align: center;
    border-top: 1px solid rgba(118,134,156,0.1);
}

.dash-queue-more a {
    color: #7c5cf6;
    text-decoration: none;
    font-weight: 600;
}

/* Readiness strip */
.dash-readiness {
    background: rgba(255,255,255,0.97);
    border: 1px solid rgba(118,134,156,0.18);
    border-radius: 12px;
    overflow: hidden;
}

.dash-readiness-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
    list-style: none;
    user-select: none;
}

.dash-readiness-summary::-webkit-details-marker { display: none; }

.dash-readiness-summary .material-symbols-outlined:first-child {
    font-size: 1rem;
}

.dash-readiness-chevron {
    margin-left: auto;
    transition: transform 0.2s;
}

details.dash-readiness[open] .dash-readiness-chevron {
    transform: rotate(180deg);
}

.dash-readiness-body {
    border-top: 1px solid rgba(118,134,156,0.1);
    display: flex;
    flex-direction: column;
}

.dash-readiness-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid rgba(118,134,156,0.07);
    font-size: 0.82rem;
}

.dash-readiness-item:last-child { border-bottom: none; }

.dash-readiness-icon {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.dash-readiness-icon.ready { color: #34d399; }
.dash-readiness-icon.warn  { color: #f59e0b; }
.dash-readiness-icon.miss  { color: rgba(118,134,156,0.5); }

.dash-readiness-copy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.dash-readiness-copy strong {
    font-weight: 600;
    color: var(--text);
}

.dash-readiness-copy span {
    font-size: 0.75rem;
    color: var(--text-muted);
}

@media (max-width: 860px) {
    .dash-grid { grid-template-columns: 1fr; }
}

/* ─── Dashboard (Operational) ───────────────────────────── */
.dashboard-content {
    gap: 14px;
}

.dashboard-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(320px, 0.7fr);
    align-items: start;
}

.dashboard-secondary-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
}

.dashboard-block {
    padding: 20px;
}

.dashboard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 14px;
    margin-bottom: 14px;
}

.dashboard-head h2 {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.04em;
    font-size: 1.34rem;
    line-height: 1.1;
}

.dashboard-head p {
    margin: 8px 0 0;
    color: var(--text-muted);
    font-size: 0.85rem;
    line-height: 1.45;
}

.dashboard-head-tight {
    margin-bottom: 10px;
}

.dashboard-queue-table {
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.02);
}

.dashboard-queue-head,
.dashboard-queue-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) 1fr 0.92fr 1.25fr 1.1fr;
    align-items: center;
    gap: 14px;
}

.dashboard-queue-head {
    padding: 12px 16px;
    color: var(--text-soft);
    font-size: 0.69rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    border-bottom: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.03);
}

a.dashboard-queue-row {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    color: inherit;
    text-decoration: none;
    transition: background-color 140ms ease, box-shadow 150ms ease;
}

a.dashboard-queue-row:hover {
    background: rgba(124, 92, 246, 0.05);
    box-shadow: inset 3px 0 0 var(--primary);
}

a.dashboard-queue-row:first-of-type {
    border-top: 0;
}

.dashboard-queue-row .product-main strong {
    font-size: 0.95rem;
}

.dashboard-queue-updated {
    color: var(--text-muted);
    font-size: 0.81rem;
}

.dashboard-footnote {
    margin: 10px 2px 0;
    color: var(--text-muted);
    font-size: 0.81rem;
}

.dashboard-status-block {
    background: linear-gradient(180deg, rgba(245, 248, 253, 0.9), rgba(239, 244, 250, 0.84));
}

.dashboard-readiness-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.45);
}

.dashboard-readiness-item {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 12px;
    align-items: center;
    padding: 14px 16px;
    border-top: 1px solid var(--line);
    transition: background-color 140ms ease;
}

.dashboard-readiness-item:first-child {
    border-top: 0;
}

.dashboard-readiness-item:hover {
    background: rgba(124, 92, 246, 0.04);
}

.dashboard-readiness-copy strong {
    display: block;
    font-size: 0.9rem;
}

.dashboard-readiness-copy p {
    margin: 5px 0 0;
    color: var(--text-muted);
    font-size: 0.8rem;
    line-height: 1.35;
}

.dashboard-readiness-meta {
    display: grid;
    justify-items: end;
    gap: 6px;
}

.dashboard-readiness-meta .text-link {
    margin-top: 0;
    font-size: 0.81rem;
}

.dashboard-side-actions {
    margin-top: 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.dashboard-snapshot-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.dashboard-snapshot-item {
    padding: 14px 14px 12px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(245, 249, 254, 0.82));
    box-shadow: var(--shadow-xs);
    transition: transform 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}

.dashboard-snapshot-item:hover {
    transform: translateY(-1px);
    border-color: rgba(124, 92, 246, 0.25);
    box-shadow: var(--shadow-sm);
}

.dashboard-snapshot-value {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-size: 1.48rem;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.dashboard-snapshot-label {
    display: block;
    margin-top: 4px;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.dashboard-timeline {
    margin-top: 8px;
}

.dash-reveal {
    animation: dash-rise-in 260ms ease both;
}

.dash-reveal:nth-child(2) {
    animation-delay: 45ms;
}

@keyframes dash-rise-in {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .dash-reveal {
        animation: none;
    }
}

.workbench-bar,
.table-toolbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.workbench-bar h2,
.table-toolbar h2 {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    letter-spacing: -0.04em;
    font-weight: 800;
}

.summary-note,
.table-toolbar-note,
.source-stack span {
    color: var(--text-muted);
    line-height: 1.5;
    font-size: 0.87rem;
}

.table-toolbar {
    padding: 18px 20px 14px;
    border-bottom: 1px solid var(--line);
}

.table-toolbar-compact { padding: 16px 20px; }
.table-toolbar-note { margin: 0; }

/* ─── Hero Panel ─────────────────────────────────────────── */
.hero-panel,
.floating-panel,
.capability-zone,
.product-table { padding: 22px; }

.hero-panel h2,
.section-heading h2 {
    font-size: clamp(1.2rem, 2vw, 1.55rem);
    line-height: 1.2;
}

.hero-text { max-width: 42rem; margin-top: 10px; }

.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.section-heading { max-width: 58rem; }

.login-feature-strip,
.hero-chip-row,
.filter-row,
.hero-actions.compact-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.floating-panel { position: relative; }

.priority-block + .priority-block {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--line);
}

.priority-block h3 {
    font-size: 1.05rem;
    font-weight: 700;
    margin: 0 0 6px;
}

.text-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-top: 8px;
    color: var(--primary-light);
    font-weight: 600;
    font-size: 0.87rem;
    transition: gap 180ms ease, color 140ms ease;
}

.text-link:hover { gap: 10px; }

/* ─── Queue Cards ────────────────────────────────────────── */
.queue-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 12px;
    margin-top: 16px;
}

.queue-card {
    display: grid;
    gap: 8px;
    padding: 16px 14px;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    border-top: 2px solid var(--primary);
    box-shadow: none;
    transition: all 180ms ease;
}

.queue-card:nth-child(2) { border-top-color: var(--warning); }
.queue-card:nth-child(3) { border-top-color: var(--info); }

.queue-card:hover {
    background: var(--glass-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.queue-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.queue-icon { color: var(--primary-light); }

/* ─── Activity Timeline ──────────────────────────────────── */
.timeline {
    display: grid;
    gap: 0;
    margin-top: 14px;
}

.timeline-item {
    display: grid;
    grid-template-columns: 52px minmax(0, 1fr);
    gap: 14px;
    padding: 15px 0;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--line);
    box-shadow: none;
    background: transparent;
}

.timeline-time {
    color: var(--primary-light);
    font-weight: 700;
    font-size: 0.81rem;
    letter-spacing: 0.04em;
    padding-top: 3px;
}

.timeline-item strong { font-size: 0.91rem; display: block; }
.timeline-item p { margin: 4px 0 0; font-size: 0.84rem; }

/* ─── Connections page ───────────────────────────────────── */
.connections-layout,
.connection-page-grid { align-items: start; }

.connection-form { margin-top: var(--space-5); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-4);
}

.field-wide { grid-column: 1 / -1; }
.form-grid-single { grid-template-columns: 1fr; }

.section-heading { max-width: 58rem; }

.integration-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.queue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.connection-grid { display: grid; gap: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }

.integration-card {
    display: grid;
    gap: 8px;
    padding: 16px;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: none;
    transition: all 180ms ease;
}

.integration-card:hover {
    background: var(--glass-hover);
    border-color: var(--line-strong);
    box-shadow: var(--shadow-xs);
}

.integration-card.is-active {
    border-color: rgba(124, 92, 246, 0.32);
    background: rgba(124, 92, 246, 0.09);
}

.integration-card-top,
.connection-item,
.connection-item-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.integration-card strong,
.connection-item-main strong {
    display: block;
    margin-bottom: 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 1rem;
    font-weight: 700;
}

.integration-card span,
.connection-item-main span,
.connection-item p {
    color: var(--text-muted);
    font-size: 0.84rem;
}

.connection-list {
    display: grid;
    gap: 0;
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
    background: rgba(255, 255, 255, 0.03);
}

.connection-item {
    padding: 16px 18px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
    transition: background-color 140ms ease;
}

.connection-item:hover { background: rgba(255, 255, 255, 0.04); }
.connection-item:first-child { border-top: 0; }

.connection-item-main { min-width: 0; }

.connection-item-main span {
    display: block;
    word-break: break-word;
    font-size: 0.83rem;
}

.connection-item-meta {
    flex-wrap: wrap;
    justify-content: flex-end;
}

.connection-url {
    color: var(--text-muted);
    word-break: break-word;
    font-size: 0.83rem;
}

/* ─── Products Table ─────────────────────────────────────── */
.product-table {
    overflow: hidden;
    padding: 0;
}

.connection-table {
    padding: 0;
    box-shadow: none;
    border: 0;
}

.product-table-header,
.product-row {
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) 0.9fr 0.75fr 1.05fr 1.45fr;
    gap: 16px;
    align-items: center;
}

.product-table-header-workbench,
.product-row-workbench {
    grid-template-columns: minmax(0, 2.3fr) 1fr 1fr 1fr 1fr;
}

.product-table-header {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line);
    color: var(--text-soft);
    font-size: 0.71rem;
    font-weight: 700;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.03);
}

.product-row {
    padding: 15px 20px;
    border-radius: 0;
    border: 0;
    border-top: 1px solid var(--line);
    background: transparent;
    box-shadow: none;
    transition: background-color 140ms ease;
}

.product-row:hover { background: rgba(255, 255, 255, 0.04); }
.product-row:first-of-type { border-top: 0; }

/* Clickable product row */
a.product-row-link {
    text-decoration: none;
    color: inherit;
    display: grid;
    cursor: pointer;
    transition: background 0.15s ease, box-shadow 0.15s ease;
}
a.product-row-link:hover {
    background: rgba(255, 255, 255, 0.06);
    box-shadow: inset 3px 0 0 var(--primary);
}
a.product-row-link:hover strong { color: var(--primary-light); }

.product-main { display: grid; gap: 4px; }

.source-stack { display: grid; gap: 4px; }
.source-stack strong { font-size: 0.93rem; }

.action-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.action-chip {
    min-height: 28px;
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
}

.table-action {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 0.65rem;
    border: 1px solid var(--line);
    border-radius: 7px;
    background: var(--glass);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.80rem;
    cursor: pointer;
    transition: all 140ms ease;
}

.table-action:hover {
    background: var(--primary-dim);
    border-color: rgba(124, 92, 246, 0.30);
    color: var(--primary-light);
}

.table-status {
    display: inline-flex;
    align-items: center;
    color: var(--text-muted);
    font-size: 0.89rem;
    font-weight: 600;
}

.table-status-ready { color: var(--success); }
.table-status-warning { color: var(--warning); }
.table-status-muted { color: var(--text-muted); }

.status-stack {
    display: grid;
    gap: 4px;
}

.status-stack .table-status {
    line-height: 1.35;
    font-size: 0.82rem;
}

/* ─── Panel Stack ────────────────────────────────────────── */
.panel-stack { display: grid; gap: 16px; }

.console-content > .panel,
.content-grid > .panel { padding: var(--space-6); }

.panel-stack > * { /* inner content just inherits, no extra padding needed */ }

.compact-empty-state { padding: 22px; }

.empty-state {
    display: grid;
    gap: var(--space-2);
    padding: var(--space-6);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.03);
    border: 1px dashed var(--line);
    color: var(--text-muted);
}

.inline-form { margin: 0; }
.card-topline { margin-bottom: 10px; }

/* ─── Status Pill Variants ───────────────────────────────── */
.status-pill-success {
    background: var(--success-dim);
    border-color: rgba(52, 211, 153, 0.26);
    color: var(--success);
}

.status-pill-warning {
    background: var(--warning-dim);
    border-color: rgba(251, 191, 36, 0.26);
    color: var(--warning);
}

.status-pill-info {
    background: var(--info-dim);
    border-color: rgba(96, 165, 250, 0.26);
    color: var(--info);
}

/* ─── Misc ───────────────────────────────────────────────── */
.clean-list {
    margin: 14px 0 0;
    padding-left: 18px;
    color: var(--text-muted);
    line-height: 1.6;
}

.insight-banner {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    margin-top: 20px;
    padding: var(--space-4);
    border-radius: var(--radius-card);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid var(--line);
}

.insight-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    border-radius: 50%;
    background: var(--primary-dim);
    color: var(--primary-light);
}

/* ─── Light Content Zone ────────────────────────────────────
   The sidebar stays dark. Everything inside .console-main
   switches to light-mode variables automatically.
   ─────────────────────────────────────────────────────────── */
.console-main {
    /* Override design tokens for the light zone */
    --glass:           rgba(252, 254, 255, 0.95);
    --glass-hover:     rgba(255, 255, 255, 1);
    --glass-elevated:  rgba(255, 255, 255, 1);
    --glass-topbar:    rgba(250, 253, 255, 0.92);
    --line:            rgba(101, 119, 146, 0.24);
    --line-strong:     rgba(88, 106, 132, 0.38);
    --line-subtle:     rgba(101, 119, 146, 0.14);
    --text:            #0f172a;
    --text-muted:      #46556f;
    --text-soft:       #6a7892;
    --success:         #1a8f52;
    --success-dim:     rgba(26, 143, 82, 0.10);
    --warning:         #b45309;
    --warning-dim:     rgba(180, 83, 9, 0.10);
    --danger:          #c84d67;
    --danger-dim:      rgba(200, 77, 103, 0.10);
    --info:            #2563eb;
    --info-dim:        rgba(37, 99, 235, 0.10);
    --shadow-xs:  0 1px 3px rgba(15, 23, 42, 0.05);
    --shadow-sm:  0 4px 14px rgba(15, 23, 42, 0.07), 0 1px 4px rgba(15, 23, 42, 0.04);
    --shadow-md:  0 10px 24px rgba(15, 23, 42, 0.1);
    --shadow-lg:  0 14px 38px rgba(15, 23, 42, 0.14);
    --glow:       0 0 24px rgba(124, 92, 246, 0.10);
    --glass-shadow: 0 1px 3px rgba(0,0,0,0.06), 0 2px 8px rgba(0,0,0,0.05),
                    inset 0 1px 0 rgba(255,255,255,0.90);

    background:
        radial-gradient(circle at 120% -20%, rgba(124, 92, 246, 0.08) 0%, rgba(124, 92, 246, 0) 46%),
        linear-gradient(180deg, #e8eff8 0%, #edf3fa 100%);
    /* Re-evaluate color with the local --text so inherited text is dark */
    color: var(--text);
}

/* panel-pop and panel-soft need explicit bg overrides (not variable-driven) */
.console-main .panel-pop {
    background: rgba(248, 251, 255, 0.96);
    border-color: rgba(118, 134, 156, 0.24);
    box-shadow: var(--shadow-sm);
}
.console-main .panel-pop::before {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, transparent 60%);
}
.console-main .panel-soft {
    background: rgba(238, 243, 250, 0.9);
    border-color: rgba(118, 134, 156, 0.2);
    box-shadow: var(--shadow-sm);
}

/* Topbar in light zone */
.console-main .topbar {
    background-color: rgba(250, 253, 255, 0);
    border-color: rgba(118, 134, 156, 0.24);
    box-shadow: 0 1px 4px rgba(16,24,40,0.05), 0 6px 14px rgba(16,24,40,0.06),
                inset 0 1px 0 rgba(255,255,255,0.88);
}

/* Hardcoded dark rgba backgrounds that need light overrides */
.console-main .connection-list      { background: rgba(244, 248, 253, 0.9); }
.console-main .product-table-header { background: rgba(240, 245, 251, 0.96); }
.console-main .product-row:hover    { background: rgba(124, 92, 246, 0.04); }
.console-main a.product-row-link:hover { background: rgba(124, 92, 246, 0.05); box-shadow: inset 3px 0 0 var(--primary); }
.console-main .connection-item:hover{ background: rgba(239, 244, 251, 0.9); }
.console-main .empty-state          { background: rgba(242, 246, 252, 0.95); border-color: rgba(118, 134, 156, 0.24); }
.console-main .insight-banner       { background: rgba(124, 92, 246, 0.05); }
.console-main .timeline-item        { border-top-color: rgba(118, 134, 156, 0.2); }
.console-main .schema-item          { background: rgba(248, 252, 255, 0.95); border-color: rgba(118, 134, 156, 0.22); }
.console-main .priority-block + .priority-block { border-top-color: rgba(118, 134, 156, 0.2); }

/* Cards */
.console-main .metric-card,
.console-main .queue-card {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(247, 251, 255, 0.94));
    border-color: rgba(118, 134, 156, 0.24);
    box-shadow: var(--shadow-sm);
}

/* Eyebrow/chip stays purple-tinted */
.console-main .status-pill,
.console-main .action-chip,
.console-main .mini-chip {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
    color: var(--text-muted);
}

/* Buttons in light zone */
.console-main .button-secondary {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(118, 134, 156, 0.22);
    color: var(--text-muted);
}
.console-main .button-secondary:hover {
    background: #fff;
    border-color: rgba(118, 134, 156, 0.34);
    color: var(--text);
}
.console-main .button-agent {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(118, 134, 156, 0.22);
    color: var(--text-muted);
}
.console-main .button-agent:hover {
    background: #fff;
    border-color: rgba(118, 134, 156, 0.34);
    color: var(--text);
}

/* Inputs in light zone */
.console-main .field input {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(118, 134, 156, 0.22);
    color: var(--text);
}
.console-main .field select,
.console-main .field textarea {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(118, 134, 156, 0.22);
    color: var(--text);
}
.console-main .field input::placeholder,
.console-main .field textarea::placeholder { color: var(--text-soft); }
.console-main .field input:focus,
.console-main .field select:focus,
.console-main .field textarea:focus {
    background: #fff;
    border-color: rgba(124, 92, 246, 0.5);
}
.console-main .topbar-search input {
    background: rgba(255, 255, 255, 0.75);
    border-color: rgba(118, 134, 156, 0.2);
    color: var(--text);
}
.console-main .topbar-search input:focus {
    background: #fff;
}

/* Table action in light zone */
.console-main .table-action {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(118, 134, 156, 0.22);
    color: var(--text-muted);
}
.console-main .table-action:hover {
    background: rgba(124, 92, 246, 0.08);
    border-color: rgba(124, 92, 246, 0.22);
    color: var(--primary);
}

/* User chip in light zone */
.console-main .user-chip {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(118, 134, 156, 0.2);
}

/* Integration cards */
.console-main .integration-card.is-active {
    background: rgba(124, 92, 246, 0.07);
}

/* Alerts in light zone */
.console-main .alert-success {
    background: #f0fdf6;
    border-color: rgba(26, 143, 82, 0.22);
}
.console-main .alert-error {
    background: #fff6f8;
    border-color: rgba(200, 77, 103, 0.22);
}

/* Status pill variants in light zone */
.console-main .status-pill-success {
    background: rgba(26, 143, 82, 0.10);
    border-color: rgba(26, 143, 82, 0.22);
    color: var(--success);
}
.console-main .status-pill-warning {
    background: rgba(180, 83, 9, 0.10);
    border-color: rgba(180, 83, 9, 0.20);
    color: var(--warning);
}
.console-main .status-pill-info {
    background: rgba(37, 99, 235, 0.10);
    border-color: rgba(37, 99, 235, 0.20);
    color: var(--info);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 1180px) {
    .sidebar {
        position: static;
        width: auto;
        border-right: 0;
        border: 1px solid var(--line);
        border-radius: var(--radius-panel);
        margin: 16px;
    }

    .console-main {
        margin-left: 0;
        padding-top: 0;
    }

    .nav-stack {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .nav-link.is-active::before { display: none; }

    .content-grid,
    .dash-main-grid,
    .dashboard-grid,
    .dashboard-secondary-grid,
    .queue-grid,
    .connection-grid,
    .integration-grid,
    .creator-prompt-grid,
    .creator-project-grid,
    .console-stats,
    .auth-grid,
    .form-grid {
        grid-template-columns: 1fr;
    }

    .dashboard-snapshot-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 760px) {
    .console-main { padding: 14px; }

    .sidebar { margin: 14px; }

    .topbar,
    .topbar-actions,
    .page-heading,
    .workbench-bar,
    .table-toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .nav-stack { grid-template-columns: 1fr; }

    .product-table-header { display: none; }

    .dashboard-head {
        flex-direction: column;
        align-items: stretch;
    }

    .dashboard-queue-head {
        display: none;
    }

    .dashboard-queue-row {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .dashboard-queue-row .table-action {
        width: fit-content;
    }

    .dashboard-readiness-item {
        grid-template-columns: 1fr;
        align-items: start;
    }

    .dashboard-readiness-meta {
        justify-items: start;
    }

    .dashboard-snapshot-grid {
        grid-template-columns: 1fr;
    }

    .product-row,
    .product-table-header-workbench,
    .product-row-workbench { grid-template-columns: 1fr; }

    .integration-card-top,
    .connection-item,
    .connection-item-meta {
        align-items: flex-start;
        flex-direction: column;
    }

    .button,
    .button-small,
    .button-agent { width: 100%; }

    .auth-copy,
    .auth-form-card,
    .hero-panel,
    .floating-panel,
    .capability-zone,
    .sidebar,
    .topbar { padding: 18px; }

    .product-table { padding: 0; }
    .login-brand-logo { width: min(180px, 60%); }
}

/* ═══════════════════════════════════════════════════════════
   LOCALE / LANGUAGE CHIPS
   ═══════════════════════════════════════════════════════════ */

.locale-section {
    border-top: 1px solid var(--line);
    padding-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.locale-section-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.locale-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.locale-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 8px;
    background: var(--glass);
    border: 1px solid var(--line);
    font-size: 0.78rem;
}

.locale-chip-default {
    background: var(--primary-dim);
    border-color: rgba(124, 92, 246, 0.3);
}

.locale-chip-code {
    font-weight: 800;
    letter-spacing: 0.04em;
    color: var(--text);
    font-size: 0.72rem;
}

.locale-chip-name { color: var(--text-muted); font-weight: 500; }

.locale-chip-badge {
    background: var(--primary);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 1px 5px;
    border-radius: 4px;
}

.console-main .locale-chip { background: rgba(0,0,0,0.04); border-color: rgba(0,0,0,0.08); }
.console-main .locale-chip-default { background: var(--primary-dim); border-color: rgba(124,92,246,0.25); }
.console-main .locale-chip-name { color: var(--text-muted); }

/* ═══════════════════════════════════════════════════════════
   PRODUCT DETAIL PAGE
   ═══════════════════════════════════════════════════════════ */

.product-detail-grid {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    gap: 18px;
    align-items: start;
}

.product-back-row {
    margin: 0 0 12px;
}

.product-back-row-embed {
    margin: 0;
    padding: 16px 24px 0;
}

.product-back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.8);
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 700;
    transition: transform 180ms ease, border-color 180ms ease, color 180ms ease, box-shadow 180ms ease;
}

.product-back-link .material-symbols-outlined {
    font-size: 1rem;
}

.product-back-link:hover {
    color: var(--primary);
    border-color: rgba(124, 92, 246, 0.32);
    transform: translateY(-1px);
    box-shadow: 0 6px 14px rgba(124, 92, 246, 0.12);
}

.product-back-row-embed .product-back-link {
    background: rgba(248, 251, 255, 0.96);
}

.product-detail-surface {
    border-radius: 16px;
    border: 1px solid var(--line);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(249, 252, 255, 0.94));
    box-shadow: var(--shadow-sm);
    transition: transform 220ms ease, box-shadow 220ms ease, border-color 220ms ease;
}

.product-detail-surface:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-md);
    transform: translateY(-1px);
}

.product-detail-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    position: sticky;
    top: 22px;
}

.product-image-panel {
    overflow: hidden;
    padding: 0;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.product-cover-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    background: linear-gradient(145deg, rgba(249, 252, 255, 0.96), rgba(242, 247, 255, 0.96));
}

.product-cover-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 32px 20px;
    text-align: center;
    color: var(--text-soft);
}

.product-cover-placeholder .material-symbols-outlined {
    font-size: 2.3rem;
    opacity: 0.5;
}

.product-cover-placeholder span {
    font-size: 0.86rem;
    font-weight: 700;
}

.product-meta-card {
    padding: 18px;
}

.product-meta-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.product-meta-counter {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    min-height: 24px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid rgba(88, 106, 132, 0.28);
    background: rgba(247, 250, 255, 0.96);
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 700;
}

.shopify-warning-stack {
    display: grid;
    gap: 8px;
    margin: 0 0 12px;
}

.shopify-warning-line {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 9px 10px;
    border-radius: 10px;
    border: 1px solid rgba(180, 83, 9, 0.2);
    background: rgba(180, 83, 9, 0.08);
    color: #97500f;
    font-size: 0.79rem;
    font-weight: 600;
    line-height: 1.4;
}

.shopify-warning-line .material-symbols-outlined {
    font-size: 1rem;
    margin-top: 1px;
}

.shopify-market-list {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 9px;
}

.shopify-market-item {
    padding: 10px 11px;
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(248, 251, 255, 0.94);
    display: grid;
    gap: 8px;
}

.shopify-market-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.shopify-market-top strong {
    font-size: 0.86rem;
    color: var(--text);
}

.shopify-market-badges {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 6px;
}

.shopify-pill {
    display: inline-flex;
    align-items: center;
    border-radius: 999px;
    border: 1px solid rgba(88, 106, 132, 0.22);
    background: rgba(255, 255, 255, 0.95);
    color: var(--text-muted);
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 8px;
    white-space: nowrap;
}

.shopify-pill.is-primary {
    color: #225fcb;
    border-color: rgba(37, 99, 235, 0.24);
    background: rgba(37, 99, 235, 0.1);
}

.shopify-pill.is-enabled {
    color: #1c6d42;
    border-color: rgba(26, 143, 82, 0.24);
    background: rgba(26, 143, 82, 0.1);
}

.shopify-pill.is-disabled {
    color: #7b879c;
    border-color: rgba(101, 119, 146, 0.24);
    background: rgba(101, 119, 146, 0.08);
}

.shopify-market-bottom {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 9px;
}

.shopify-market-inline {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--text-muted);
    font-size: 0.77rem;
    font-weight: 600;
}

.shopify-market-inline .material-symbols-outlined {
    font-size: 0.9rem;
    color: var(--text-soft);
}

.shopify-market-regions {
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text-soft);
}

.shopify-field-list {
    display: grid;
    gap: 0;
    border: 1px solid rgba(118, 134, 156, 0.16);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.68);
}

.shopify-field-hint {
    font-size: 0.78rem;
    line-height: 1.4;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.shopify-field-item {
    border: 0;
    border-top: 1px solid rgba(118, 134, 156, 0.12);
    border-radius: 0;
    background: transparent;
    padding: 12px 14px;
    display: grid;
    gap: 8px;
}

.shopify-field-item:first-child {
    border-top: 0;
}

.shopify-field-head {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 8px;
    flex-wrap: wrap;
}

.shopify-field-label {
    margin: 0;
    font-size: 0.75rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    color: var(--text);
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid rgba(118, 134, 156, 0.16);
    border-radius: 6px;
    padding: 4px 7px;
    overflow-wrap: anywhere;
}

.shopify-field-type {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-muted);
    border: 1px solid rgba(118, 134, 156, 0.18);
    border-radius: 999px;
    padding: 3px 8px;
    background: rgba(255, 255, 255, 0.82);
    white-space: nowrap;
}

.shopify-field-description {
    font-size: 0.76rem;
    line-height: 1.4;
    color: var(--text-soft);
}

.shopify-field-value {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.45;
    overflow-wrap: anywhere;
}

.shopify-field-value summary {
    cursor: pointer;
}

.shopify-field-value pre {
    margin: 8px 0 0;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid rgba(118, 134, 156, 0.2);
    background: rgba(255, 255, 255, 0.92);
    white-space: pre-wrap;
    word-break: break-word;
    font-size: 0.75rem;
    line-height: 1.45;
    color: var(--text);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.shopify-definition-list {
    display: grid;
    gap: 8px;
}

.shopify-definition-item {
    border: 1px solid rgba(118, 134, 156, 0.22);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.94);
    padding: 9px 10px;
    display: grid;
    gap: 6px;
}

.shopify-definition-item strong {
    font-size: 0.82rem;
    color: var(--text);
}

.shopify-def-count {
    font-size: 0.74rem;
    color: var(--text-soft);
}

/* ─── AI-generated images panel ─────────────────────────── */
.product-genimg-panel {
    padding: 16px;
}

.product-genimg-panel .product-meta-heading {
    display: flex;
    align-items: center;
    gap: 6px;
}

.product-genimg-panel .product-meta-heading .material-symbols-outlined {
    font-size: 1rem;
    color: #7c5cf6;
}

.product-genimg-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
    margin-bottom: 10px;
}

.product-genimg-thumb {
    position: relative;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    display: block;
    border: 1px solid rgba(118, 134, 156, 0.18);
    background: rgba(246, 249, 253, 0.8);
    transition: box-shadow 0.15s;
}

.product-genimg-thumb:hover {
    box-shadow: 0 2px 12px rgba(124, 92, 246, 0.18);
}

.product-genimg-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.product-genimg-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: opacity 0.15s;
    color: #fff;
}

.product-genimg-overlay .material-symbols-outlined {
    font-size: 1.4rem;
}

.product-genimg-thumb:hover .product-genimg-overlay {
    opacity: 1;
}

.product-genimg-note {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin: 0;
}

.product-genimg-note a {
    color: #7c5cf6;
    text-decoration: none;
}

.product-genimg-note a:hover {
    text-decoration: underline;
}

.product-meta-heading {
    margin: 0 0 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.92rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

.product-meta-list {
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px 14px;
    align-items: center;
}

.product-meta-list dt {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-soft);
    white-space: nowrap;
}

.product-meta-list dd {
    margin: 0;
    font-size: 0.89rem;
    font-weight: 600;
    color: var(--text);
    word-break: break-word;
    display: flex;
    align-items: center;
    gap: 6px;
}

.lang-chip {
    background: rgba(124, 92, 246, 0.12);
    color: #4d3ab8;
    border: 1px solid rgba(124, 92, 246, 0.24);
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.06em;
}

.product-detail-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.product-content-card {
    padding: 0;
    overflow: hidden;
}

.product-content-head {
    padding: 24px 26px 18px;
    display: grid;
    gap: 12px;
}

.product-content-title {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.6rem, 3vw, 2rem);
    font-weight: 800;
    letter-spacing: -0.04em;
    color: var(--text);
    line-height: 1.1;
}

.product-content-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.product-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 30px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(245, 249, 255, 0.96);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
}

.product-meta-chip .material-symbols-outlined {
    font-size: 0.98rem;
    color: var(--text-soft);
}

.product-section-divider {
    height: 1px;
    background: var(--line);
}

.product-content-section {
    padding: 22px 26px 24px;
}

.product-inline-meta-row {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.product-inline-meta-label {
    font-size: 0.74rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.product-inline-meta-value {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(245, 249, 255, 0.96);
    color: var(--text);
    font-size: 0.83rem;
    font-weight: 700;
}

.product-inline-meta-row-translation {
    margin-top: 0;
    margin-bottom: 2px;
    padding-top: 0;
    border-top: 0;
}

.product-section-title {
    margin: 0 0 12px;
    font-family: 'Manrope', sans-serif;
    font-size: 0.98rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--text);
}

.product-description-body {
    font-size: 0.92rem;
    line-height: 1.72;
    color: var(--text);
}

.product-description-body p {
    margin: 0 0 1em;
}

.product-description-body p:last-child {
    margin-bottom: 0;
}

.product-description-body ul,
.product-description-body ol {
    padding-left: 1.35em;
    margin: 0 0 1em;
}

.product-description-body li {
    margin-bottom: 0.3em;
}

.product-description-body h2,
.product-description-body h3 {
    margin: 1.2em 0 0.5em;
    font-family: 'Manrope', sans-serif;
}

.product-description-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 22px 0 4px;
    text-align: center;
    color: var(--text-muted);
}

.product-description-empty .material-symbols-outlined {
    font-size: 2rem;
    opacity: 0.4;
}

.product-description-empty p {
    margin: 0;
    font-size: 0.86rem;
}

.product-source-generate-form {
    margin-top: 8px;
}

.console-main .product-content-title {
    color: var(--text);
}

.console-main .product-description-body {
    color: var(--text);
}

.console-main .product-meta-list dd {
    color: var(--text);
}

.console-main .product-image-panel {
    background: linear-gradient(160deg, rgba(250, 253, 255, 0.96), rgba(244, 248, 255, 0.96));
}

.console-main .product-cover-placeholder {
    color: var(--text-soft);
}

.product-ai-card {
    padding: 18px;
    display: grid;
    gap: 12px;
}

.product-ai-card.is-source-missing .product-language-list {
    opacity: 0.42;
    filter: saturate(0.68);
}

.product-ai-card.is-source-missing .product-language-item {
    box-shadow: none;
    background: rgba(246, 248, 252, 0.78);
    border-color: rgba(145, 154, 172, 0.2);
}

.product-ai-card.is-source-missing .product-ai-summary,
.product-ai-card.is-source-missing .product-language-state,
.product-ai-card.is-source-missing .product-language-note,
.product-ai-card.is-source-missing .product-language-title,
.product-ai-card.is-source-missing .product-language-body {
    color: var(--text-soft);
}

.product-ai-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.product-ai-headline {
    display: grid;
    gap: 4px;
}

.product-ai-head h3 {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 1.06rem;
    letter-spacing: -0.02em;
    color: var(--text);
}

.product-ai-summary {
    margin: 0;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-muted);
}

.product-ai-summary.is-ready {
    color: var(--success);
}

.product-ai-summary.is-warning {
    color: var(--warning);
}

.product-ai-bulk-form {
    display: flex;
}

.product-ai-bulk-form .button {
    min-width: 210px;
}

.product-ai-empty {
    border: 1px dashed var(--line);
    border-radius: 12px;
    padding: 12px;
    color: var(--text-muted);
    font-size: 0.83rem;
    background: rgba(248, 251, 255, 0.7);
}

/* ── EAN Research panel ────────────────────────────────────────────────── */

.ean-panel-topbar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.ean-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 0;
}

.ean-panel-icon {
    font-size: 22px;
    color: var(--purple, #635bff);
    background: rgba(99, 91, 255, 0.1);
    border-radius: 10px;
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ean-panel-code {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    margin-top: 6px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(118, 134, 156, 0.22);
    background: rgba(245, 249, 255, 0.96);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}

.ean-panel-action {
    display: flex;
    align-items: center;
}

.ean-run-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    justify-content: center;
    min-height: 42px;
    padding: 0 16px;
    background: linear-gradient(135deg, rgba(99,91,255,0.14) 0%, rgba(99,91,255,0.08) 100%);
    border: 1px solid rgba(99,91,255,0.28);
    border-radius: 12px;
    color: var(--purple, #635bff);
    font-size: 0.87rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 8px 18px rgba(99, 91, 255, 0.08);
    transition: background 0.2s, border-color 0.2s, transform 0.15s, box-shadow 0.15s;
    font-family: inherit;
    line-height: 1.2;
    appearance: none;
    -webkit-appearance: none;
}

.ean-run-btn:hover {
    background: linear-gradient(135deg, rgba(99,91,255,0.18) 0%, rgba(99,91,255,0.1) 100%);
    border-color: rgba(99,91,255,0.42);
    transform: translateY(-1px);
    box-shadow: 0 10px 22px rgba(99, 91, 255, 0.12);
}

.ean-run-btn .material-symbols-outlined {
    font-size: 18px;
}

/* ── Stepper ── */
.ean-stepper {
    padding: 12px 0 6px;
    display: flex;
    flex-direction: column;
}

.ean-stepper-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    opacity: 0.3;
    transition: opacity 0.4s ease;
}

.ean-stepper-item:not([data-pending]) {
    opacity: 1;
}

.ean-stepper-dot {
    grid-row: 1;
    grid-column: 1;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--surface-2, rgba(0,0,0,0.05));
    border: 1.5px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s, border-color 0.3s, box-shadow 0.3s;
    position: relative;
    z-index: 1;
}

.ean-stepper-dot .material-symbols-outlined {
    font-size: 15px;
    color: var(--text-muted);
    transition: color 0.3s;
}

.ean-stepper-item[data-active] .ean-stepper-dot {
    background: rgba(99,91,255,0.12);
    border-color: rgba(99,91,255,0.5);
    box-shadow: 0 0 0 4px rgba(99,91,255,0.1);
    animation: ean-dot-pulse 1.4s ease-in-out infinite;
}

.ean-stepper-item[data-active] .ean-stepper-dot .material-symbols-outlined {
    color: var(--purple, #635bff);
}

.ean-stepper-item[data-done] .ean-stepper-dot {
    background: rgba(42,122,75,0.1);
    border-color: rgba(42,122,75,0.4);
}

.ean-stepper-item[data-done] .ean-stepper-dot .material-symbols-outlined {
    color: #2a7a4b;
}

.ean-stepper-line {
    grid-row: 2;
    grid-column: 1;
    width: 2px;
    height: 20px;
    background: var(--line);
    margin: 3px auto 3px;
    border-radius: 1px;
    transition: background 0.4s;
}

.ean-stepper-item[data-done] .ean-stepper-line {
    background: rgba(42,122,75,0.3);
}

.ean-stepper-item:last-child .ean-stepper-line {
    display: none;
}

.ean-stepper-text {
    grid-row: 1;
    grid-column: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 32px;
}

.ean-stepper-label {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.ean-stepper-sub {
    font-size: 0.75rem;
    color: var(--text-muted);
    margin-top: 1px;
}

@keyframes ean-dot-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(99,91,255,0.1); }
    50%       { box-shadow: 0 0 0 6px rgba(99,91,255,0.18); }
}

/* ── Result ── */
.ean-result-summary {
    background: rgba(99,91,255,0.05);
    border: 1px solid rgba(99,91,255,0.15);
    border-radius: 10px;
    padding: 10px 12px;
    margin-bottom: 10px;
}

.ean-research-summary {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text);
    line-height: 1.45;
    margin-bottom: 6px;
}

.ean-result-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.ean-research-meta {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.ean-field-chip {
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--purple, #635bff);
    background: rgba(99,91,255,0.1);
    border-radius: 5px;
    padding: 1px 6px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.ean-specs-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 10px;
    font-size: 0.81rem;
}

.ean-specs-table th,
.ean-specs-table td {
    padding: 5px 8px;
    border-bottom: 1px solid var(--line);
    text-align: left;
    vertical-align: top;
}

.ean-specs-table th {
    color: var(--text-muted);
    font-weight: 500;
    width: 42%;
    white-space: nowrap;
}

.ean-specs-table td {
    color: var(--text);
}

.ean-specs-table tr:last-child th,
.ean-specs-table tr:last-child td {
    border-bottom: none;
}

@keyframes ean-updated-flash-kf {
    0%   { background: rgba(99, 91, 255, 0.1); }
    100% { background: transparent; }
}

.ean-updated-flash {
    animation: ean-updated-flash-kf 1.8s ease-out forwards;
    border-radius: 8px;
}

.product-ai-stream {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(249, 252, 255, 0.88);
    padding: 10px 12px;
    display: grid;
    gap: 8px;
}

.product-ai-stream[hidden] {
    display: none !important;
}

.product-ai-stream-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.84rem;
    color: var(--text);
}

.product-ai-spinner {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(124, 92, 246, 0.24);
    border-top-color: var(--primary);
    animation: product-ai-spin 0.85s linear infinite;
}

@keyframes product-ai-spin {
    to {
        transform: rotate(360deg);
    }
}

.product-ai-stream-log {
    max-height: 120px;
    overflow: auto;
    display: grid;
    gap: 4px;
    font-size: 0.79rem;
    color: var(--text-muted);
}

.product-ai-stream-delta {
    margin: 0;
    max-height: 120px;
    overflow: auto;
    padding: 8px;
    border-radius: 8px;
    border: 1px dashed var(--line);
    background: rgba(255, 255, 255, 0.88);
    font-size: 0.76rem;
    line-height: 1.35;
    color: var(--text);
    white-space: pre-wrap;
    word-break: break-word;
}

.product-language-list {
    display: grid;
    gap: 10px;
}

.product-language-item {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 12px;
    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.product-language-item:hover {
    border-color: var(--line-strong);
    box-shadow: var(--shadow-xs);
    transform: translateY(-1px);
}

.product-language-item.is-missing {
    border-color: rgba(180, 83, 9, 0.25);
    background: rgba(255, 248, 238, 0.75);
}

.product-language-item.is-ready {
    border-color: rgba(26, 143, 82, 0.2);
    background: rgba(241, 251, 245, 0.78);
}

.product-language-main {
    min-width: 0;
    display: grid;
    gap: 6px;
}

.product-language-top {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.product-language-top strong {
    font-size: 0.84rem;
    letter-spacing: 0.05em;
}

.product-language-state {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    padding: 0 8px;
    border-radius: 999px;
    border: 1px solid var(--line);
    font-size: 0.73rem;
    font-weight: 700;
}

.product-language-state.is-missing {
    color: var(--warning);
    border-color: rgba(180, 83, 9, 0.28);
    background: rgba(255, 248, 238, 0.95);
}

.product-language-state.is-ready {
    color: var(--success);
    border-color: rgba(26, 143, 82, 0.24);
    background: rgba(241, 251, 245, 0.95);
}

.product-language-preview {
    display: grid;
    gap: 4px;
}

.product-language-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text);
}

.product-language-body {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.45;
}

.product-language-note {
    font-size: 0.79rem;
    color: var(--text-muted);
}

.product-language-sync-note {
    font-size: 0.75rem;
    color: var(--text-soft);
}

.product-language-action {
    flex-shrink: 0;
}

@keyframes product-fade-up {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.product-back-row,
.product-detail-aside .product-detail-surface,
.product-detail-body > .product-detail-surface,
.product-language-item {
    animation: product-fade-up 320ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.product-detail-aside .product-detail-surface:nth-child(1) { animation-delay: 40ms; }
.product-detail-aside .product-detail-surface:nth-child(2) { animation-delay: 90ms; }
.product-detail-body > .product-detail-surface:nth-child(1) { animation-delay: 70ms; }
.product-detail-body > .product-detail-surface:nth-child(2) { animation-delay: 120ms; }

@media (prefers-reduced-motion: reduce) {
    .product-back-row,
    .product-detail-aside .product-detail-surface,
    .product-detail-body > .product-detail-surface,
    .product-language-item {
        animation: none !important;
    }

    .product-detail-surface,
    .product-language-item,
    .product-back-link {
        transition: none !important;
        transform: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════
   CREATOR STUDIO
   ═══════════════════════════════════════════════════════════ */

.creator-studio-panel {
    padding: 22px;
}

.creator-headline h2 {
    margin: 10px 0 8px;
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.45rem, 2.6vw, 2rem);
    letter-spacing: -0.03em;
}

.creator-headline p {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.93rem;
    line-height: 1.45;
}

.creator-form {
    display: grid;
    gap: 14px;
}

.creator-stepper {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.creator-step-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 38px;
    padding: 0 12px;
    border-radius: 10px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 700;
}

.creator-step-pill span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.05);
    color: inherit;
    font-size: 0.73rem;
}

.creator-step-pill.is-active {
    border-color: rgba(124, 92, 246, 0.4);
    background: rgba(124, 92, 246, 0.1);
    color: var(--primary);
}

.creator-step-pill.is-done {
    border-color: rgba(26, 143, 82, 0.24);
    background: rgba(26, 143, 82, 0.08);
    color: var(--success);
}

.creator-step-card {
    display: grid;
    gap: 14px;
    border: 1px solid var(--line);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.03);
    padding: 16px;
}

.creator-step-card h3 {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-size: 1.04rem;
    letter-spacing: -0.02em;
}

.creator-step-final {
    padding-top: 12px;
}

.creator-provider-note-inline {
    margin: 0;
    color: var(--text-soft);
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
}

.creator-source-choice {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.creator-choice-card {
    display: flex;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: var(--glass);
    padding: 10px 12px;
    cursor: pointer;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.creator-choice-card:hover {
    border-color: rgba(124, 92, 246, 0.25);
    background: rgba(124, 92, 246, 0.07);
}

.creator-choice-card:has(input:checked) {
    border-color: rgba(124, 92, 246, 0.38);
    background: rgba(124, 92, 246, 0.12);
}

.creator-choice-card .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--primary);
}

.creator-choice-card strong {
    display: block;
    font-size: 0.88rem;
}

.creator-choice-card small {
    display: block;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.creator-choice-card input {
    accent-color: var(--primary);
    margin: 0;
}

.creator-hidden-control {
    display: none !important;
}

.creator-mode-toggle {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.creator-search-meta {
    color: var(--text-muted);
    font-size: 0.76rem;
    font-weight: 500;
}

.creator-search-results {
    display: grid;
    gap: 7px;
    max-height: 280px;
    overflow: auto;
    padding-right: 2px;
}

.creator-search-empty {
    border: 1px dashed var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    color: var(--text-muted);
    font-size: 0.79rem;
}

.creator-search-item {
    display: grid;
    grid-template-columns: 42px 1fr;
    align-items: center;
    gap: 10px;
    border: 1px solid var(--line);
    background: var(--glass);
    border-radius: 10px;
    padding: 8px;
    text-align: left;
    transition: background-color 120ms ease, border-color 120ms ease;
}

.creator-search-item:hover {
    background: rgba(124, 92, 246, 0.08);
    border-color: rgba(124, 92, 246, 0.28);
}

.creator-search-item.is-selected {
    border-color: rgba(124, 92, 246, 0.36);
    background: rgba(124, 92, 246, 0.11);
}

.creator-search-thumb {
    width: 42px;
    height: 42px;
    min-width: 42px;
    min-height: 42px;
    max-width: 42px;
    max-height: 42px;
    flex: 0 0 42px;
    border-radius: 8px;
    border: 1px solid var(--line);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.18);
}

.creator-search-item img {
    width: 42px !important;
    height: 42px !important;
    max-width: 42px !important;
    max-height: 42px !important;
    object-fit: cover;
}

.creator-search-thumb-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.64rem;
    color: var(--text-soft);
    border-style: dashed;
}

.creator-search-label {
    display: grid;
    gap: 2px;
    color: var(--text);
    font-size: 0.8rem;
    line-height: 1.35;
}

.creator-search-label strong {
    font-family: 'Manrope', sans-serif;
    font-size: 0.84rem;
    color: var(--text);
}

.creator-search-label small {
    color: var(--text-muted);
    font-size: 0.72rem;
}

.creator-source-block {
    display: grid;
    gap: 12px;
    padding: 12px;
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
}

.creator-selected-product {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    padding: 9px 12px;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.creator-selected-product.is-ready {
    border-color: rgba(124, 92, 246, 0.25);
    background: rgba(124, 92, 246, 0.08);
    color: var(--text);
}

.creator-image-picker {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 8px;
}

.creator-image-option {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--glass);
    padding: 6px;
    display: grid;
    gap: 6px;
    text-align: left;
}

.creator-image-option.is-selected {
    border-color: rgba(124, 92, 246, 0.45);
    box-shadow: inset 0 0 0 1px rgba(124, 92, 246, 0.18);
}

.creator-image-option-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    border-radius: 8px;
}

.creator-image-option span {
    color: var(--text-muted);
    font-size: 0.72rem;
    line-height: 1.2;
}

.creator-image-preview-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px dashed var(--line);
    border-radius: 12px;
    min-height: 220px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.creator-stage-preview {
    min-height: 180px;
}

.creator-image-preview {
    display: block;
    width: min(100%, 520px);
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
}

.creator-image-preview-empty {
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 600;
}

.creator-upload-zone {
    border: 1px dashed var(--line-strong);
    border-radius: 12px;
    min-height: 140px;
    display: grid;
    place-items: center;
    text-align: center;
    gap: 6px;
    padding: 14px;
    background: rgba(255, 255, 255, 0.03);
    cursor: pointer;
}

.creator-upload-zone input {
    display: none;
}

.creator-upload-zone .material-symbols-outlined {
    font-size: 1.4rem;
    color: var(--primary);
}

.creator-upload-zone strong {
    font-size: 0.9rem;
    font-family: 'Manrope', sans-serif;
}

.creator-upload-zone small {
    color: var(--text-muted);
    font-size: 0.78rem;
}

.creator-upload-file {
    margin: 0;
    color: var(--text-muted);
    font-size: 0.78rem;
}

.creator-attach-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    font-size: 0.87rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    user-select: none;
}

.creator-attach-toggle input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary);
    cursor: pointer;
    flex-shrink: 0;
}

.creator-attach-toggle small {
    font-weight: 400;
    color: var(--text-muted);
}

.creator-attach-product-panel {
    margin-top: 12px;
    padding: 14px;
    background: rgba(123, 53, 216, 0.04);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.creator-attach-product-panel[hidden] { display: none; }

.creator-attach-empty {
    margin: 0;
    font-size: 0.83rem;
    color: var(--text-muted);
}

.creator-template-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.creator-template-pill {
    min-height: 34px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--glass);
    color: var(--text-muted);
    font-size: 0.81rem;
    font-weight: 600;
}

.creator-template-pill.is-selected {
    border-color: rgba(124, 92, 246, 0.35);
    background: rgba(124, 92, 246, 0.1);
    color: var(--primary);
}

.creator-advanced {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
}

.creator-advanced summary {
    cursor: pointer;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-muted);
}

.creator-advanced-grid {
    margin-top: 10px;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.creator-inline-note {
    color: var(--text-muted);
    font-size: 0.75rem;
    line-height: 1.4;
}

.creator-prompt-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px;
}

.creator-project-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.creator-project-card {
    display: grid;
    gap: 10px;
    padding: 14px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: var(--glass);
}

.creator-project-card.is-selected {
    border-color: rgba(124, 92, 246, 0.35);
    box-shadow: inset 0 0 0 1px rgba(124, 92, 246, 0.12);
}

.creator-project-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.creator-project-top strong {
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    line-height: 1.3;
}

.creator-project-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    color: var(--text-muted);
    font-size: 0.76rem;
}

.creator-project-images {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.creator-image-label {
    margin-bottom: 5px;
    color: var(--text-muted);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.creator-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 10px;
    border: 1px solid var(--line);
    object-fit: cover;
    background: rgba(255, 255, 255, 0.2);
}

.creator-thumb-empty {
    height: 100%;
    min-height: 120px;
    border-radius: 10px;
    border: 1px dashed var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    font-size: 0.8rem;
}

.creator-error-note {
    font-size: 0.79rem;
    line-height: 1.45;
    color: var(--danger);
    background: var(--danger-dim);
    border: 1px solid rgba(248, 113, 113, 0.2);
    border-radius: 8px;
    padding: 8px 10px;
}

.creator-submit-feedback {
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 10px 12px;
    font-size: 0.84rem;
    font-weight: 600;
}

.creator-submit-feedback.is-success {
    border-color: rgba(26, 143, 82, 0.25);
    background: rgba(26, 143, 82, 0.08);
    color: var(--success);
}

.creator-submit-feedback.is-error {
    border-color: rgba(248, 113, 113, 0.26);
    background: rgba(248, 113, 113, 0.1);
    color: var(--danger);
}

.creator-generate-button {
    width: 100%;
    min-height: 46px;
    font-size: 0.95rem;
    font-weight: 700;
}

.creator-submit-spinner {
    width: 14px;
    height: 14px;
    border-radius: 999px;
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.92);
    animation: creator-submit-spin 0.75s linear infinite;
}

@keyframes creator-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

.creator-history {
    border: 1px solid var(--line);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    padding: 10px 12px;
}

.creator-history summary {
    cursor: pointer;
    font-size: 0.9rem;
    font-weight: 700;
}

.creator-history[open] {
    padding-bottom: 14px;
}

.creator-history[open] > * + * {
    margin-top: 12px;
}

/* ═══════════════════════════════════════════════════════════
   FLOWS — Visual Node Canvas Builder
   ═══════════════════════════════════════════════════════════ */

/* ── Full-canvas layout override ── */
.flow-page-clean {
    display: flex;
    flex-direction: column;
    flex: 1;
    gap: 0;
    padding: 0;
    overflow: hidden;
    min-height: 0;
    height: 100%;
}

.console-main:has(.flow-page-clean) .page-heading,
.console-main:has(.flow-page-clean) .console-stats {
    display: none;
}

.console-main:has(.flow-page-clean) {
    overflow: hidden;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 10px 14px 14px;
}

.console-main:has(.flow-page-clean) .topbar {
    padding: 8px 10px;
    gap: 10px;
    background: rgba(250, 253, 255, 0.92);
    border-color: rgba(101, 119, 146, 0.26);
    margin-bottom: 10px;
}

.console-main:has(.flow-page-clean) .topbar-search {
    display: none;
}

.console-main:has(.flow-page-clean) .topbar-extra {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
}

.console-main:has(.flow-page-clean) .topbar-actions {
    flex-shrink: 0;
}

/* ── Flow Topbar ── */
.flow-topbar {
    height: 52px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    padding: 0 var(--space-5);
    gap: var(--space-3);
    flex-shrink: 0;
    z-index: 50;
}

.flow-topbar-left {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: max-content;
}

.flow-name-input {
    font-family: 'Manrope', sans-serif;
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text);
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid var(--line);
    outline: none;
    padding: 6px 10px;
    border-radius: 10px;
    transition: background 180ms ease, border-color 180ms ease;
    width: 220px;
}
.flow-name-input:hover { background: var(--glass); }
.flow-name-input:focus {
    background: #fff;
    border-color: rgba(124, 92, 246, 0.38);
}

.flow-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 700;
}
.flow-status-pill.active {
    background: var(--success-dim);
    color: var(--success);
}
.flow-status-pill.draft {
    background: var(--glass);
    color: var(--text-muted);
}
.flow-status-pill.paused {
    background: var(--warning-dim);
    color: var(--warning);
}
.flow-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}
.flow-status-pill.active .flow-status-dot {
    animation: flow-pulse-dot 2s ease infinite;
}
@keyframes flow-pulse-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.flow-topbar-center {
    flex: 0 0 auto;
    display: flex;
    justify-content: center;
}

.flow-zoom-controls {
    display: flex;
    align-items: center;
    gap: 2px;
    background: var(--glass);
    border-radius: var(--radius-pill);
    padding: 2px;
}
.flow-zoom-btn {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 180ms ease;
}
.flow-zoom-btn:hover { background: var(--glass-hover); color: var(--text); }
.flow-zoom-btn .material-symbols-outlined { font-size: 18px; }
.flow-zoom-level {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted);
    min-width: 38px;
    text-align: center;
}

.flow-topbar-right {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: max-content;
}

.flow-selector {
    min-height: 34px;
    max-width: 250px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.88);
    color: var(--text);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 0 34px 0 12px;
    outline: none;
    appearance: none;
    -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--text-soft) 50%), linear-gradient(135deg, var(--text-soft) 50%, transparent 50%);
    background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
}

.flow-selector:focus {
    background-color: #fff;
    border-color: rgba(124, 92, 246, 0.38);
}

.flow-btn-ghost {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    font-family: inherit;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 180ms ease;
}
.flow-btn-ghost:hover { background: var(--glass); color: var(--text); }
.flow-btn-ghost .material-symbols-outlined { font-size: 18px; }

.flow-btn-run {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 7px 18px;
    background: var(--primary);
    border: none;
    color: #fff;
    font-size: 0.82rem;
    font-weight: 700;
    font-family: inherit;
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: all 180ms ease;
    box-shadow: 0 2px 12px rgba(124, 92, 246, 0.35);
}
.flow-btn-run:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 20px rgba(124, 92, 246, 0.45);
}
.flow-btn-run .material-symbols-outlined { font-size: 18px; }
.flow-btn-run:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.flow-hidden-inputs {
    display: none;
}

/* ── Canvas Area ── */
.flow-canvas-area {
    flex: 1;
    min-height: 0;
    display: flex;
    overflow: hidden;
    position: relative;
}

.flow-flash {
    width: 100%;
    margin: 0 0 8px;
    padding: 10px 12px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 600;
    border: 1px solid var(--line);
}

.flow-flash-success {
    background: rgba(26, 143, 82, 0.1);
    border-color: rgba(26, 143, 82, 0.22);
    color: #17603a;
}

.flow-flash-error {
    background: rgba(200, 77, 103, 0.1);
    border-color: rgba(200, 77, 103, 0.24);
    color: #8f2f4a;
}

/* ── Node Palette (left drawer) ── */
.flow-palette {
    width: 260px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    z-index: 40;
    flex-shrink: 0;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}
.flow-palette.is-hidden {
    transform: translateX(-100%);
    opacity: 0;
    pointer-events: none;
    position: absolute;
    left: 0; top: 0; bottom: 0;
}

.flow-palette-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-4) var(--space-5);
}
.flow-palette-title {
    font-family: 'Manrope', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--text);
}
.flow-palette-close {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.flow-palette-close:hover { background: var(--glass-hover); }
.flow-palette-close .material-symbols-outlined { font-size: 18px; }

.flow-palette-search {
    margin: 0 var(--space-4) var(--space-3);
    padding: 8px 12px 8px 36px;
    background: var(--glass-hover);
    border: 1px solid var(--line);
    border-radius: var(--radius-pill);
    font-size: 0.82rem;
    color: var(--text);
    font-family: inherit;
    outline: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(238,240,255,0.35)' stroke-width='2'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.35-4.35'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: 12px center;
    transition: all 180ms ease;
}
.flow-palette-search:focus {
    border-color: var(--line-strong);
    background-color: var(--glass-elevated);
    box-shadow: 0 0 0 2px var(--primary-dim);
}
.flow-palette-search::placeholder { color: var(--text-soft); }

.flow-palette-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-4) var(--space-4);
}

.flow-palette-section { margin-bottom: var(--space-5); }
.flow-palette-section-title {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: var(--space-2);
    padding-left: var(--space-2);
}

.flow-palette-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 8px;
    border-radius: var(--radius-control);
    cursor: grab;
    transition: all 180ms ease;
    margin-bottom: 2px;
}
.flow-palette-item:hover { background: var(--glass-hover); }
.flow-palette-item:active { cursor: grabbing; transform: scale(0.97); }

.flow-palette-item-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.flow-palette-item-icon .material-symbols-outlined { font-size: 18px; color: #fff; }
.flow-palette-item-icon.trigger  { background: var(--primary); }
.flow-palette-item-icon.action   { background: #1565c0; }
.flow-palette-item-icon.condition { background: #e65100; }
.flow-palette-item-icon.transform { background: #2e7d32; }
.flow-palette-item-icon.output   { background: #7b1fa2; }

.flow-palette-item-text { flex: 1; min-width: 0; }
.flow-palette-item-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}
.flow-palette-item-desc {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ── Canvas ── */
.flow-canvas {
    flex: 1;
    position: relative;
    background:
        linear-gradient(0deg, rgba(124, 92, 246, 0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 92, 246, 0.07) 1px, transparent 1px),
        linear-gradient(180deg, #eef4fc 0%, #e8eff8 100%);
    background-size: 24px 24px, 24px 24px, auto;
    cursor: grab;
    overflow: hidden;
}
.flow-canvas:active { cursor: grabbing; }
.flow-canvas.is-connecting { cursor: crosshair; }

.flow-canvas-viewport {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    transform-origin: 0 0;
}

/* ── SVG Connection Lines ── */
.flow-connections-layer {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    pointer-events: none;
    z-index: 1;
}

.flow-connection-path {
    fill: none;
    stroke: rgba(75, 56, 198, 0.96);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
    opacity: 0.9;
    vector-effect: non-scaling-stroke;
    shape-rendering: geometricPrecision;
    transition: opacity 180ms ease, stroke-width 180ms ease;
    pointer-events: stroke;
    cursor: pointer;
}
.flow-connection-path:hover,
.flow-connection-path.is-active {
    opacity: 0.94;
    stroke-width: 2.6;
}
.flow-connection-path.is-drawing {
    opacity: 0.25;
    stroke-dasharray: 8 4;
    animation: flow-dash 0.6s linear infinite;
}
@keyframes flow-dash { to { stroke-dashoffset: -12; } }

/* ── Flow Nodes ── */
.flow-node {
    position: absolute;
    width: 240px;
    background: var(--glass-elevated);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-sm);
    cursor: grab;
    z-index: 10;
    transition: box-shadow 180ms ease, transform 180ms ease, border-color 180ms ease;
    user-select: none;
}
.flow-node:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--line-strong);
    z-index: 20;
}
.flow-node.is-dragging {
    box-shadow: var(--shadow-lg);
    z-index: 100;
    cursor: grabbing;
    transform: scale(1.02);
}
.flow-node.is-selected {
    border-color: rgba(124, 92, 246, 0.5);
    box-shadow: 0 0 0 2px var(--primary-dim), var(--shadow-sm);
}
.flow-node.is-run-pending {
    border-color: rgba(118, 134, 156, 0.35);
}
.flow-node.is-run-running {
    border-color: rgba(124, 92, 246, 0.72);
    box-shadow: 0 0 0 2px rgba(124, 92, 246, 0.18), 0 10px 26px rgba(76, 58, 186, 0.24);
}
.flow-node.is-run-done {
    border-color: rgba(26, 143, 82, 0.45);
    box-shadow: 0 0 0 2px rgba(26, 143, 82, 0.1), var(--shadow-sm);
}
.flow-node.is-run-error {
    border-color: rgba(200, 77, 103, 0.52);
    box-shadow: 0 0 0 2px rgba(200, 77, 103, 0.12), var(--shadow-sm);
}

.flow-node-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4);
    border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.flow-node-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.flow-node-icon .material-symbols-outlined { font-size: 20px; color: #fff; }
.flow-node-icon.trigger  { background: var(--primary); }
.flow-node-icon.action   { background: #1565c0; }
.flow-node-icon.condition { background: #e65100; }
.flow-node-icon.transform { background: #2e7d32; }
.flow-node-icon.output   { background: #7b1fa2; }

.flow-node-title-wrap { flex: 1; min-width: 0; }
.flow-node-title {
    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.flow-node-subtitle {
    font-size: 0.72rem;
    color: var(--text-muted);
    margin-top: 1px;
}

.flow-node-menu {
    width: 28px;
    height: 28px;
    border: none;
    background: none;
    color: var(--text-soft);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    transition: all 180ms ease;
}
.flow-node:hover .flow-node-menu { opacity: 1; }
.flow-node-menu:hover { background: var(--glass-hover); color: var(--text-muted); }
.flow-node-menu .material-symbols-outlined { font-size: 18px; }

.flow-node-body {
    padding: 0 var(--space-4) var(--space-4);
}

.flow-node-config-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: var(--glass);
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
    font-size: 0.75rem;
}
.flow-node-config-row:last-child { margin-bottom: 0; }
.flow-node-config-key { color: var(--text-muted); font-weight: 500; }
.flow-node-config-value { color: var(--text); font-weight: 600; }

/* ── Node Ports (connection handles) ── */
.flow-node-port {
    position: absolute;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg-raised);
    border: 2px solid var(--primary);
    cursor: crosshair;
    z-index: 15;
    transition: all 180ms ease;
}
.flow-node-port:hover {
    transform: scale(1.4);
    background: var(--primary);
    box-shadow: 0 0 0 4px var(--primary-dim);
}
.flow-node-port.is-active {
    transform: scale(1.45);
    background: var(--primary);
    box-shadow: 0 0 0 5px var(--primary-dim), 0 0 0 1px rgba(124, 92, 246, 0.35);
}
.flow-node-port.input  { left: -6px;  top: 50%; margin-top: -6px; }
.flow-node-port.output { right: -6px; top: 50%; margin-top: -6px; }
.flow-node-port.output-true  { right: -6px; top: 35%; }
.flow-node-port.output-false { right: -6px; top: 65%; }

.flow-port-label {
    position: absolute;
    font-size: 0.65rem;
    font-weight: 700;
    pointer-events: none;
}
.flow-port-label.true-label  { right: 16px; top: -2px; color: var(--success); }
.flow-port-label.false-label { right: 16px; top: -2px; color: var(--danger); }

/* ── Execution badges ── */
.flow-exec-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 16;
    box-shadow: var(--shadow-xs);
}
.flow-exec-badge .material-symbols-outlined { font-size: 14px; color: #fff; }
.flow-exec-badge.success { background: var(--success); }
.flow-exec-badge.error   { background: var(--danger); }
.flow-exec-badge.running {
    background: var(--primary);
    animation: flow-exec-spin 1s linear infinite;
}
@keyframes flow-exec-spin { to { transform: rotate(360deg); } }

/* ── Node Config Panel (right drawer) ── */
.flow-panel {
    width: 340px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-left: 1px solid var(--line);
    display: flex;
    flex-direction: column;
    z-index: 40;
    flex-shrink: 0;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1), opacity 300ms ease;
}
.flow-panel.is-hidden {
    transform: translateX(100%);
    opacity: 0;
    pointer-events: none;
}

.flow-panel-header {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-5) var(--space-5) var(--space-4);
}
.flow-panel-header .flow-node-icon { width: 40px; height: 40px; border-radius: var(--radius-control); }
.flow-panel-header .flow-node-icon .material-symbols-outlined { font-size: 22px; }
.flow-panel-title-group { flex: 1; }
.flow-panel-title {
    font-family: 'Manrope', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text);
}
.flow-panel-subtitle {
    font-size: 0.78rem;
    color: var(--text-muted);
    margin-top: 2px;
}
.flow-panel-close {
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.flow-panel-close:hover { background: var(--glass-hover); }
.flow-panel-close .material-symbols-outlined { font-size: 20px; }

.flow-panel-tabs {
    display: flex;
    padding: 0 var(--space-5);
    border-bottom: 1px solid var(--line);
}
.flow-panel-tab {
    padding: 10px var(--space-4);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-muted);
    border: none;
    background: none;
    cursor: pointer;
    position: relative;
    font-family: inherit;
    transition: color 180ms ease;
}
.flow-panel-tab:hover { color: var(--text); }
.flow-panel-tab.is-active { color: var(--primary-light); font-weight: 600; }
.flow-panel-tab.is-active::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: var(--space-4); right: var(--space-4);
    height: 2px;
    background: var(--primary);
    border-radius: 2px 2px 0 0;
}

.flow-panel-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-5);
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Panel form controls */
.flow-field-group {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}
.flow-field-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.flow-field-input {
    padding: 8px 12px;
    background: var(--glass-hover);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text);
    font-family: inherit;
    outline: none;
    transition: all 180ms ease;
}
.flow-field-input:focus {
    border-color: var(--line-strong);
    box-shadow: 0 0 0 2px var(--primary-dim);
}
.flow-field-select {
    padding: 8px 12px;
    background: var(--glass-hover);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    font-size: 0.82rem;
    color: var(--text);
    font-family: inherit;
    outline: none;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='rgba(238,240,255,0.4)' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 32px;
}

.flow-field-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    background: var(--glass);
    border-radius: var(--radius-sm);
}
.flow-field-toggle-label {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text);
}
.flow-toggle-switch {
    width: 38px;
    height: 20px;
    background: var(--glass-elevated);
    border-radius: var(--radius-pill);
    position: relative;
    cursor: pointer;
    transition: background 180ms ease;
    border: none;
}
.flow-toggle-switch.is-on { background: var(--primary); }
.flow-toggle-switch::after {
    content: '';
    position: absolute;
    top: 3px; left: 3px;
    width: 14px; height: 14px;
    border-radius: 50%;
    background: #fff;
    box-shadow: var(--shadow-xs);
    transition: transform 180ms ease;
}
.flow-toggle-switch.is-on::after { transform: translateX(18px); }

.flow-divider {
    height: 1px;
    background: var(--line);
    margin: var(--space-2) 0;
}

.flow-output-card {
    border: 1px solid var(--line);
    background: var(--glass);
    border-radius: 12px;
    padding: 12px;
    display: grid;
    gap: 8px;
}

.flow-output-title {
    font-size: 0.78rem;
    font-weight: 700;
    color: var(--text);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flow-output-desc {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.45;
    color: var(--text-muted);
}

.flow-output-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
}

.flow-output-metric {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--glass-hover);
    padding: 8px 10px;
    display: grid;
    gap: 4px;
}

.flow-output-metric span {
    font-size: 0.68rem;
    color: var(--text-soft);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.flow-output-metric strong {
    font-size: 1rem;
    color: var(--text);
}

.flow-output-actions {
    display: flex;
    gap: 8px;
}

.flow-output-btn {
    border: 1px solid var(--line);
    background: var(--glass-hover);
    color: var(--text);
    border-radius: 999px;
    min-height: 34px;
    padding: 0 12px;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
}

.flow-output-btn:hover {
    border-color: var(--line-strong);
    background: #fff;
}

.flow-output-btn.primary {
    border-color: rgba(124, 92, 246, 0.45);
    background: rgba(124, 92, 246, 0.12);
    color: #5537d1;
}

.flow-output-btn.primary:hover {
    background: rgba(124, 92, 246, 0.2);
}

.flow-output-log {
    display: grid;
    gap: 6px;
}

.flow-output-log-line {
    border: 1px solid var(--line);
    border-radius: 10px;
    background: var(--glass-hover);
    padding: 8px 10px;
    font-size: 0.76rem;
    color: var(--text-muted);
    line-height: 1.35;
}

/* ── Execution Log Drawer ── */
.flow-exec-drawer {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 200px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-top: 1px solid var(--line);
    z-index: 45;
    display: flex;
    flex-direction: column;
    transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}
.flow-exec-drawer.is-hidden { transform: translateY(100%); }

.flow-exec-drawer-header {
    display: flex;
    align-items: center;
    padding: 8px var(--space-5);
    gap: var(--space-3);
    flex-shrink: 0;
}
.flow-exec-drawer-title {
    font-family: 'Manrope', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}

.flow-exec-drawer-body {
    flex: 1;
    overflow-y: auto;
    padding: 0 var(--space-5) var(--space-4);
    font-size: 0.75rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text-muted);
    line-height: 1.8;
}
.flow-exec-line { display: flex; gap: var(--space-3); }
.flow-exec-time { color: var(--text-soft); flex-shrink: 0; }
.flow-exec-msg.success { color: var(--success); }
.flow-exec-msg.error { color: var(--danger); }

/* ── Keyboard Hints ── */
.flow-kb-hints {
    position: absolute;
    bottom: var(--space-5);
    left: var(--space-5);
    display: flex;
    gap: var(--space-3);
    z-index: 30;
}
.flow-kb-hint {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.68rem;
    color: var(--text-soft);
}
.flow-kb-key {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 5px;
    background: var(--glass-elevated);
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    color: var(--text-muted);
}

/* ── Minimap ── */
.flow-minimap {
    position: absolute;
    bottom: var(--space-5);
    right: var(--space-5);
    width: 160px;
    height: 100px;
    background: var(--glass);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    z-index: 30;
    overflow: hidden;
    padding: 4px;
}
.flow-minimap-viewport {
    border: 1.5px solid var(--primary);
    border-radius: 3px;
    background: var(--primary-dim);
    position: absolute;
}
.flow-minimap-node {
    position: absolute;
    border-radius: 2px;
    opacity: 0.5;
}

/* ── Flow Choice (used in panel forms) ── */
.flow-choice-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.flow-choice {
    min-height: 32px;
    padding: 0 12px;
    border-radius: var(--radius-pill);
    border: 1px solid var(--line);
    background: var(--glass);
    color: var(--text-muted);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 140ms ease;
}
.flow-choice:hover {
    border-color: var(--line-strong);
    color: var(--text);
}
.flow-choice.is-active {
    border-color: rgba(124, 92, 246, 0.4);
    background: var(--primary-dim);
    color: var(--primary-light);
}

/* ── Responsive ── */
@media (max-width: 900px) {
    .flow-palette { width: 220px; }
    .flow-panel { width: 300px; }
    .console-main:has(.flow-page-clean) .topbar { padding: 8px; }
    .flow-name-input { width: 160px; }
    .flow-selector { max-width: 170px; }
    .flow-topbar-center { display: none; }
    .creator-stepper { grid-template-columns: 1fr; }
    .product-detail-grid { grid-template-columns: 1fr; }
    .product-detail-aside { position: static; top: auto; }
    .product-image-panel { aspect-ratio: 16 / 9; }
    .product-content-head,
    .product-content-section { padding: 18px; }
    .product-ai-card { padding: 14px; }
    .product-ai-head { flex-direction: column; align-items: stretch; }
    .product-ai-bulk-form,
    .product-ai-bulk-form .button { width: 100%; }
    .product-language-item { flex-direction: column; }
    .product-language-action { width: 100%; }
    .product-language-action .button { width: 100%; justify-content: center; }
    .creator-source-choice,
    .creator-advanced-grid { grid-template-columns: 1fr; }
    .creator-image-picker,
    .creator-project-images { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   AUTOPILOT — Goals UI
   ═══════════════════════════════════════════════════════════ */

/* ─── Page layout ───────────────────────────────────────── */
.autopilot-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.autopilot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.autopilot-heading {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
    color: var(--text);
}

.autopilot-subline {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* ─── Wizard ─────────────────────────────────────────────── */
.goal-wizard {
    display: none;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-panel);
    overflow: hidden;
    padding: 0;
}

.goal-wizard.wizard-open {
    display: flex;
}

.wizard-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px 16px;
    border-bottom: 1px solid var(--line);
}

.wizard-header-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.wizard-close {
    background: none;
    color: var(--text-muted);
    padding: 4px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    transition: color 0.15s, background 0.15s;
}

.wizard-close:hover {
    color: var(--text);
    background: var(--glass-hover);
}

.wizard-section {
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-subtle);
}

.wizard-section-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ─── Choice cards ───────────────────────────────────────── */
.wizard-choices {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wz-choice {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    background: var(--glass);
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    user-select: none;
}

.wz-choice:hover {
    background: var(--glass-hover);
    border-color: var(--line-strong);
}

.wz-choice.is-checked {
    border-color: var(--primary);
    background: var(--primary-dim);
}

.wz-choice-input {
    display: none;
}

.wz-choice-icon {
    width: 30px;
    height: 30px;
    border-radius: var(--radius-sm);
    background: var(--glass-elevated);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-light);
}

.wz-choice.is-checked .wz-choice-icon {
    background: var(--primary-dim);
    color: var(--primary-light);
}

.wz-choice-body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.wz-choice-title {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
}

.wz-choice-desc {
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.4;
}

.wz-choice-check {
    font-size: 1.2rem;
    color: var(--text-soft);
    flex-shrink: 0;
    transition: color 0.15s;
}

.wz-choice.is-checked .wz-choice-check {
    color: var(--primary);
}

/* EAN Scout "NY" badge */
.wz-badge-new {
    display: inline-block;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: linear-gradient(135deg, #635bff, #a78bfa);
    color: #fff;
    border-radius: 4px;
    padding: 1px 5px;
    margin-left: 5px;
    vertical-align: middle;
    line-height: 1.6;
}

/* Image generation sub-panel */
.wz-subpanel {
    margin: -4px 0 0 0;
    padding: 14px 16px 16px;
    background: rgba(99,91,255,0.04);
    border: 1px solid rgba(99,91,255,0.20);
    border-top: none;
    border-radius: 0 0 10px 10px;
}

.wz-image-templates {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
}

.wz-tpl-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 10px 12px;
    border: 1.5px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: var(--surface);
}

.wz-tpl-card:hover {
    background: var(--glass-hover);
    border-color: rgba(99,91,255,0.4);
}

.wz-tpl-card.is-selected {
    border-color: var(--primary);
    background: rgba(99,91,255,0.06);
}

.wz-tpl-input { display: none; }

.wz-tpl-icon {
    font-size: 1.2rem;
    color: var(--text-muted);
}

.wz-tpl-card.is-selected .wz-tpl-icon {
    color: var(--primary);
}

.wz-tpl-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
}

.wz-tpl-desc {
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.35;
}

.wz-custom-prompt-textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 8px 10px;
    border: 1.5px solid var(--border);
    border-radius: 7px;
    background: var(--surface);
    color: var(--text);
    font-size: 0.83rem;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.15s;
}

.wz-custom-prompt-textarea:focus {
    outline: none;
    border-color: var(--primary);
}

/* Compact variant (product scope) */
.wizard-choices-compact .wz-choice {
    padding: 10px 14px;
}

.wizard-choices-compact .wz-choice-title {
    font-size: 0.85rem;
}

/* ─── Wizard footer ──────────────────────────────────────── */
.wizard-footer {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 24px;
}

.wizard-name-input {
    flex: 1;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: 10px 14px;
    color: var(--text);
    font-size: 0.9rem;
    transition: border-color 0.15s;
}

.wizard-name-input:focus {
    outline: none;
    border-color: var(--primary);
}

.wizard-name-input::placeholder {
    color: var(--text-soft);
}

/* ─── Goal cards ─────────────────────────────────────────── */
.goal-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.goal-card {
    border-radius: var(--radius-panel);
    padding: 0;
    overflow: hidden;
    transition: border-color 0.15s;
}

.goal-card.active  { border-color: rgba(124, 92, 246, 0.25); }
.goal-card.paused  { border-color: rgba(251, 191, 36, 0.15); }
.goal-card.draft   { border-color: var(--line); }

.goal-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-subtle);
}

.goal-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.goal-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px 3px 7px;
    border-radius: var(--radius-pill);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.goal-status-pill.active  { background: var(--success-dim);  color: var(--success); }
.goal-status-pill.paused  { background: var(--warning-dim);  color: var(--warning); }
.goal-status-pill.draft   { background: var(--glass);         color: var(--text-muted); }

.goal-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

.goal-status-pill.active .goal-status-dot  { animation: pulse-dot 2s ease-in-out infinite; }

@keyframes pulse-dot {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.4; }
}

.goal-trigger-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--text-muted);
}

.goal-card-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.goal-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: var(--radius-control);
    font-size: 0.8rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s;
    cursor: pointer;
    text-decoration: none;
    color: var(--text-muted);
    background: var(--glass);
    border: 1px solid var(--line);
}

.goal-action-btn:hover {
    background: var(--glass-hover);
    color: var(--text);
}

.goal-action-btn .material-symbols-outlined { font-size: 0.95rem; }

.goal-action-run {
    color: var(--primary-light);
    border-color: rgba(124, 92, 246, 0.3);
    background: var(--primary-dim);
}

.goal-action-run:hover {
    background: rgba(124, 92, 246, 0.28);
    color: #fff;
}

.goal-action-run:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.goal-card-body {
    padding: 18px 20px;
}

.goal-card-name {
    margin: 0 0 4px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.goal-card-summary {
    margin: 0 0 12px;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.goal-pill-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.goal-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    background: var(--glass);
    border: 1px solid var(--line);
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--text-muted);
}

.goal-pill .material-symbols-outlined { font-size: 0.85rem; }

.goal-card-footer {
    padding: 10px 20px 14px;
    border-top: 1px solid var(--line-subtle);
}

.goal-last-run {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: var(--text-soft);
}

/* ─── Empty state ────────────────────────────────────────── */
.goal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 48px 32px;
    gap: 10px;
}

.goal-empty-icon {
    font-size: 2.8rem;
    color: var(--primary);
    opacity: 0.7;
}

.goal-empty strong {
    font-size: 1rem;
}

.goal-empty p {
    font-size: 0.88rem;
    color: var(--text-muted);
    max-width: 380px;
    margin: 0;
    line-height: 1.5;
}

/* ─── Activity log ───────────────────────────────────────── */
.goal-log {
    border-radius: var(--radius-panel);
    overflow: hidden;
}

.goal-log-summary {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px 20px;
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text-muted);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.goal-log-summary::-webkit-details-marker { display: none; }

.goal-log-chevron {
    margin-left: auto;
    font-size: 1.1rem;
    transition: transform 0.2s;
}

details[open] .goal-log-chevron {
    transform: rotate(180deg);
}

.goal-log-body {
    border-top: 1px solid var(--line-subtle);
    padding: 4px 0;
}

.goal-log-row {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 7px 20px;
    font-size: 0.78rem;
    line-height: 1.4;
    border-bottom: 1px solid var(--line-subtle);
}

.goal-log-row:last-child { border-bottom: none; }

.goal-log-time {
    flex-shrink: 0;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
    min-width: 140px;
}

.goal-log-msg {
    color: var(--text-muted);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .autopilot-header { flex-direction: column; align-items: flex-start; }
    .goal-card-top    { flex-direction: column; align-items: flex-start; }
    .wizard-footer    { flex-direction: column; }
    .wizard-name-input { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════
   INDBAKKE — bob's inbox
   ═══════════════════════════════════════════════════════════ */

/* ─── Page layout ───────────────────────────────────────── */
.inbox-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

.inbox-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.inbox-heading {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.35rem;
    letter-spacing: -0.03em;
}

.inbox-subline {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-muted);
}

/* ─── Stat pills ─────────────────────────────────────────── */
.inbox-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.inbox-stat {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--line);
}

.inbox-stat .material-symbols-outlined { font-size: 0.9rem; }

.inbox-stat.neutral { background: var(--glass);        color: var(--text-muted); }
.inbox-stat.warning { background: var(--warning-dim);  color: var(--warning);    border-color: rgba(251,191,36,0.2); }
.inbox-stat.success { background: var(--success-dim);  color: var(--success);    border-color: rgba(52,211,153,0.2); }

/* ─── Inbox sections ─────────────────────────────────────── */
.inbox-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.inbox-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
}

.inbox-section-summary {
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.inbox-section-summary::-webkit-details-marker { display: none; }

.inbox-section-icon {
    font-size: 1.15rem;
}

.inbox-section-icon.done { color: var(--success); }
.inbox-section-icon.warn { color: var(--warning); }

.inbox-section-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.92rem;
    letter-spacing: -0.01em;
}

.inbox-section-badge {
    padding: 2px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
}

.inbox-section-badge.warn { background: var(--warning-dim); color: var(--warning); }
.inbox-section-badge.done { background: var(--success-dim); color: var(--success); }

.inbox-section-chevron {
    margin-left: auto;
    font-size: 1.1rem;
    color: var(--text-soft);
    transition: transform 0.2s;
}

details[open] .inbox-section-chevron {
    transform: rotate(180deg);
}

/* ─── Activity feed ──────────────────────────────────────── */
.inbox-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--radius-card);
    overflow: hidden;
}

.inbox-feed-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 13px 16px;
    border-bottom: 1px solid var(--line-subtle);
}

.inbox-feed-item:last-child { border-bottom: none; }

.inbox-feed-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-top: 5px;
    flex-shrink: 0;
}

.inbox-feed-dot.done { background: var(--success); }
.inbox-feed-dot.warn { background: var(--warning); }

.inbox-feed-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
}

.inbox-feed-text {
    font-size: 0.86rem;
    color: var(--text);
    line-height: 1.4;
}

.inbox-feed-text em {
    color: var(--primary-light);
    font-style: normal;
    font-weight: 500;
}

.inbox-feed-time {
    font-size: 0.75rem;
    color: var(--text-soft);
    font-variant-numeric: tabular-nums;
}

.inbox-feed-error {
    font-size: 0.75rem;
    color: var(--danger);
}

/* ─── Group label ────────────────────────────────────────── */
.inbox-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding: 0 2px;
}

/* ─── Inbox list ─────────────────────────────────────────── */
.inbox-list {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: var(--radius-card);
    overflow: hidden;
    border: 1px solid var(--line);
}

.inbox-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line-subtle);
    text-decoration: none;
    color: var(--text);
    transition: background 0.15s;
    cursor: pointer;
}

.inbox-item:last-child { border-bottom: none; }

.inbox-item:hover { background: var(--glass-hover); }

.inbox-item-warn  { background: rgba(251,191,36,0.04); }
.inbox-item-ready { background: var(--glass); }

.inbox-item-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.inbox-item-title {
    font-weight: 500;
    font-size: 0.88rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-item-sku {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.inbox-item-action {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--primary-light);
    flex-shrink: 0;
    white-space: nowrap;
}

.inbox-item-langs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.inbox-lang-chip {
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    background: var(--success-dim);
    color: var(--success);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.inbox-overflow {
    padding: 10px 16px;
    font-size: 0.78rem;
    color: var(--text-soft);
    border-top: 1px solid var(--line-subtle);
    background: var(--glass);
    text-align: center;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .inbox-header { flex-direction: column; align-items: flex-start; }
    .inbox-item   { flex-wrap: wrap; }
    .inbox-item-action { margin-left: auto; }
}

/* ═══════════════════════════════════════════════════════════
   INBOX SHELL — two-panel email-style inbox
   ═══════════════════════════════════════════════════════════ */

/* ─── Override console-main for full-height layout ───────── */
.console-main:has(.inbox-shell) {
    overflow: hidden;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 16px;
    gap: 0;
}

.console-main:has(.inbox-shell) .page-heading,
.console-main:has(.inbox-shell) .console-stats {
    display: none;
}

.console-main:has(.inbox-shell) .topbar {
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* ─── Shell container ────────────────────────────────────── */
.inbox-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    border-radius: var(--radius-panel);
    border: 1px solid rgba(118, 134, 156, 0.2);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
}

/* ─── Left column: list ──────────────────────────────────── */
.inbox-list-col {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(118, 134, 156, 0.18);
    background: rgba(246, 249, 253, 0.97);
}

.inbox-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(118, 134, 156, 0.18);
    flex-shrink: 0;
}

.inbox-list-head-title {
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.02em;
    color: var(--text);
}

.inbox-list-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    border-radius: var(--radius-pill);
    background: var(--primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
}

.inbox-sync-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    background: transparent;
    border: 1px solid rgba(118, 134, 156, 0.2);
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    flex-shrink: 0;
}

.inbox-sync-btn:hover {
    background: rgba(124, 92, 246, 0.08);
    color: var(--primary);
    border-color: rgba(124, 92, 246, 0.25);
}

.inbox-sync-btn .material-symbols-outlined {
    font-size: 1rem;
}

.inbox-list-tabs {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(118, 134, 156, 0.18);
    flex-shrink: 0;
    background: rgba(246, 249, 253, 0.98);
}

.inbox-list-tab {
    appearance: none;
    border: 1px solid rgba(118, 134, 156, 0.2);
    background: rgba(255, 255, 255, 0.75);
    color: var(--text-muted);
    border-radius: 10px;
    padding: 7px 8px 6px;
    display: flex;
    flex-direction: column;
    gap: 3px;
    align-items: flex-start;
    cursor: pointer;
    text-align: left;
    transition: background 0.16s, border-color 0.16s, color 0.16s, box-shadow 0.16s;
}

.inbox-list-tab:hover {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(118, 134, 156, 0.32);
}

.inbox-list-tab.is-active {
    background: rgba(124, 92, 246, 0.11);
    border-color: rgba(124, 92, 246, 0.36);
    color: var(--primary);
    box-shadow: inset 0 0 0 1px rgba(124, 92, 246, 0.1);
}

.inbox-list-tab-label {
    font-size: 0.61rem;
    line-height: 1.2;
    font-weight: 700;
    letter-spacing: 0.04em;
}

.inbox-list-tab-count {
    font-size: 0.72rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.inbox-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 32px 20px;
    font-size: 0.83rem;
    color: var(--text-soft);
    text-align: center;
}

.inbox-list-empty .material-symbols-outlined {
    font-size: 1.8rem;
    opacity: 0.5;
}

/* ─── List scroll area ───────────────────────────────────── */
.inbox-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0 16px;
}

.inbox-list-scroll::-webkit-scrollbar {
    width: 4px;
}

.inbox-list-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.inbox-list-scroll::-webkit-scrollbar-thumb {
    background: rgba(118, 134, 156, 0.25);
    border-radius: 2px;
}

.inbox-tab-panel {
    display: none;
    flex-direction: column;
}

.inbox-tab-panel.is-active {
    display: flex;
}

.inbox-tab-empty {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 14px;
    font-size: 0.78rem;
    color: var(--text-soft);
}

.inbox-tab-empty .material-symbols-outlined {
    font-size: 1rem;
}

.inbox-tab-more {
    padding: 8px 14px 4px;
    font-size: 0.73rem;
    color: var(--text-soft);
}

/* ─── Group labels in list ───────────────────────────────── */
.inbox-group-label {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 14px 14px 5px;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.inbox-group-label.muted {
    color: var(--text-soft);
}

.inbox-group-count {
    margin-left: auto;
    font-size: 0.68rem;
    font-weight: 600;
    color: var(--text-soft);
    letter-spacing: 0;
    text-transform: none;
}

.inbox-group-more {
    padding: 6px 14px 2px;
    font-size: 0.75rem;
    color: var(--text-soft);
}

/* ─── List row ───────────────────────────────────────────── */
.inbox-list-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 9px 14px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: none;
    border-left: 3px solid transparent;
    cursor: pointer;
    transition: background 0.12s;
    position: relative;
}

.inbox-list-row:hover {
    background: rgba(124, 92, 246, 0.05);
}

.inbox-list-row.is-active {
    background: rgba(124, 92, 246, 0.08);
    border-left-color: var(--primary);
}

.inbox-message-row.is-unread {
    background: rgba(124, 92, 246, 0.03);
}

.inbox-message-row.is-unread .inbox-row-title {
    font-weight: 700;
}

.inbox-message-row.is-read .inbox-row-title {
    font-weight: 600;
}

.inbox-unread-dot {
    flex-shrink: 0;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--primary);
    margin-right: -3px;
    align-self: center;
}

.inbox-row-avatar.type-text {
    background: rgba(37, 99, 235, 0.08);
    color: #2563eb;
}

.inbox-row-avatar.type-trans {
    background: rgba(8, 145, 178, 0.08);
    color: #0891b2;
}

.inbox-row-avatar.type-image {
    background: rgba(124, 58, 237, 0.08);
    color: #7c3aed;
}

.inbox-row-media {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
    margin-top: 1px;
}

.inbox-row-thumb {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(118, 134, 156, 0.24);
}

.inbox-row-media .inbox-row-avatar {
    margin-top: 0;
}

.inbox-row-media-status {
    position: absolute;
    right: -3px;
    bottom: -3px;
    width: 16px;
    height: 16px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.95);
}

.inbox-row-media-status.warn {
    background: rgba(251, 191, 36, 0.92);
    color: #7c2d12;
}

.inbox-row-media-status.ready {
    background: rgba(16, 185, 129, 0.92);
    color: #ffffff;
}

.inbox-row-media-status .material-symbols-outlined {
    font-size: 11px;
}

.inbox-row-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}

.inbox-row-avatar .material-symbols-outlined {
    font-size: 1rem;
}

.inbox-row-avatar.done {
    background: var(--success-dim);
    color: var(--success);
}

.inbox-row-avatar.warn {
    background: var(--warning-dim);
    color: var(--warning);
}

.inbox-row-avatar.ready {
    background: rgba(124, 92, 246, 0.1);
    color: var(--primary);
}

.inbox-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.inbox-row-snippet {
    font-size: 0.74rem;
    color: var(--text-muted);
    line-height: 1.35;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-row-title {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
}

.inbox-row-meta {
    font-size: 0.73rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inbox-row-pill {
    flex-shrink: 0;
    margin-top: 3px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.03em;
}

.inbox-row-pill.unread {
    background: rgba(99, 102, 241, 0.12);
    color: #4f46e5;
}

.inbox-row-alert {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--danger);
    color: #fff;
    font-size: 0.68rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 4px;
}

.inbox-product-row .inbox-row-title {
    font-weight: 600;
}

/* ─── Right column: detail ───────────────────────────────── */
.inbox-detail-col {
    flex: 1;
    min-width: 0;
    position: relative;
    background: rgba(255, 255, 255, 0.98);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ─── Detail panel (hidden by default) ──────────────────── */
.inbox-detail-panel {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.inbox-detail-panel.is-visible {
    display: flex;
}

/* ─── Welcome/empty detail ───────────────────────────────── */
.inbox-detail-welcome {
    align-items: center;
    justify-content: center;
}

.idet-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
    color: var(--text-muted);
}

.idet-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
    color: var(--primary);
    display: block;
    margin-bottom: 4px;
}

.idet-empty strong {
    font-size: 1rem;
    color: var(--text);
}

.idet-empty p {
    font-size: 0.86rem;
    margin: 0;
}

/* ─── Detail panel header ────────────────────────────────── */
.idet-head {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 28px 32px 24px;
    flex-shrink: 0;
}

.idet-head-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.idet-head-icon .material-symbols-outlined {
    font-size: 1.6rem;
}

.idet-head-icon.done {
    background: var(--success-dim);
    color: var(--success);
}

.idet-head-icon.warn {
    background: var(--warning-dim);
    color: var(--warning);
}

.idet-head-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px;
    min-width: 0;
}

.idet-title {
    margin: 0;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1.1rem;
    letter-spacing: -0.02em;
    color: var(--text);
    line-height: 1.3;
}

.idet-meta {
    font-size: 0.82rem;
    color: var(--text-muted);
}

.idet-divider {
    height: 1px;
    background: rgba(118, 134, 156, 0.15);
    flex-shrink: 0;
    margin: 0 32px;
}

/* ─── Detail body ────────────────────────────────────────── */
.idet-body {
    padding: 24px 32px 32px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.idet-section-label {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 12px;
}

/* ─── Stats row (bob activity) ───────────────────────────── */
.idet-stat-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.idet-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 14px 20px;
    border-radius: var(--radius-card);
    border: 1px solid rgba(118, 134, 156, 0.18);
    background: rgba(248, 251, 255, 0.9);
    min-width: 90px;
}

.idet-stat.muted {
    background: transparent;
    border-color: rgba(118, 134, 156, 0.12);
}

.idet-stat-num {
    font-family: 'Manrope', sans-serif;
    font-weight: 800;
    font-size: 1.6rem;
    letter-spacing: -0.03em;
    color: var(--primary);
    line-height: 1;
}

.idet-stat.muted .idet-stat-num {
    color: var(--text-muted);
    font-size: 1.3rem;
}

.idet-stat-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-align: center;
}

/* ─── Callout ────────────────────────────────────────────── */
.idet-callout {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    border-radius: var(--radius-card);
    font-size: 0.85rem;
    line-height: 1.5;
}

.idet-callout .material-symbols-outlined {
    font-size: 1.1rem;
    flex-shrink: 0;
    margin-top: 1px;
}

.idet-callout.warn {
    background: var(--warning-dim);
    color: var(--text);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.idet-callout.warn .material-symbols-outlined {
    color: var(--warning);
}

.idet-callout.done {
    background: var(--success-dim);
    color: var(--text);
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.idet-callout.done .material-symbols-outlined {
    color: var(--success);
}

/* ─── Bob run panel — narrative redesign ────────────────── */
.bob-run-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 28px 28px 20px;
}

.bob-run-hero-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.bob-avatar {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.bob-avatar.done {
    background: linear-gradient(135deg, rgba(124,92,246,.15), rgba(124,92,246,.08));
    border: 1px solid rgba(124,92,246,.2);
    color: var(--primary);
}

.bob-avatar.warn {
    background: var(--warning-dim);
    border: 1px solid rgba(180,83,9,.2);
    color: var(--warning);
}

.bob-avatar .material-symbols-outlined {
    font-size: 1.5rem;
}

.bob-run-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.bob-run-meta {
    font-size: 0.78rem;
    color: var(--text-soft);
    margin-top: 3px;
}

.bob-run-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: linear-gradient(135deg, var(--primary), #9f82fa);
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 16px rgba(124,92,246,.3);
}

.bob-run-badge-num {
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
}

.bob-run-badge-label {
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0.85;
    margin-top: 2px;
}

.bob-message-summary {
    margin: 0 28px 14px;
    padding: 12px 14px;
    border-radius: 11px;
    border: 1px solid rgba(118, 134, 156, 0.18);
    background: rgba(248, 251, 255, 0.96);
}

.bob-message-summary-label {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-bottom: 6px;
}

.bob-message-summary-line {
    font-size: 0.82rem;
    color: var(--text);
    line-height: 1.45;
}

.bob-message-summary-line.muted {
    color: var(--text-muted);
    margin-top: 3px;
}

.bob-narrative {
    margin: 0 28px 24px;
    padding: 16px 18px;
    background: rgba(124,92,246,.05);
    border: 1px solid rgba(124,92,246,.12);
    border-radius: 12px;
    font-size: 0.9rem;
    line-height: 1.65;
    color: var(--text);
}

.bob-stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    gap: 10px;
    padding: 0 28px 24px;
}

.bob-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 14px 10px;
    border-radius: 12px;
    background: rgba(118,134,156,.07);
    border: 1px solid rgba(118,134,156,.14);
    text-align: center;
}

.bob-stat.muted {
    opacity: 0.6;
}

.bob-stat-icon .material-symbols-outlined {
    font-size: 1rem;
    color: var(--primary);
}

.bob-stat.muted .bob-stat-icon .material-symbols-outlined {
    color: var(--text-soft);
}

.bob-stat-num {
    font-size: 1.6rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1;
    letter-spacing: -0.02em;
}

.bob-stat.muted .bob-stat-num {
    font-size: 1.2rem;
    color: var(--text-soft);
}

.bob-stat-label {
    font-size: 0.72rem;
    color: var(--text-soft);
    font-weight: 500;
}

.bob-success-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 28px 28px;
    padding: 12px 16px;
    border-radius: 10px;
    background: var(--success-dim);
    border: 1px solid rgba(52,211,153,.2);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--text);
}

.bob-success-bar .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--success);
    flex-shrink: 0;
}

/* ─── Bob product list ───────────────────────────────────── */
.bob-product-list-section {
    margin: 4px 28px 20px;
    border-top: 1px solid rgba(118,134,156,0.15);
    padding-top: 16px;
}

.bob-product-list-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.bob-product-list-label .material-symbols-outlined {
    font-size: 14px;
}

.bob-product-list {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.bob-product-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 8px;
    background: rgba(248,250,252,0.9);
    border: 1px solid rgba(118,134,156,0.12);
    cursor: pointer;
    transition: background 0.13s, border-color 0.13s, box-shadow 0.13s;
    text-align: left;
    width: 100%;
    font-family: inherit;
}

.bob-product-row:hover {
    background: rgba(99,102,241,0.06);
    border-color: rgba(99,102,241,0.22);
    box-shadow: 0 1px 4px rgba(99,102,241,0.08);
}

.bob-product-icon {
    font-size: 16px;
    color: var(--text-muted);
    flex-shrink: 0;
}

.bob-product-thumb {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(118,134,156,0.2);
    flex-shrink: 0;
}

.bob-product-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.bob-product-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bob-product-sku {
    font-size: 11px;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bob-product-badges {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.bob-product-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(99,102,241,0.1);
    color: #6366f1;
}

.bob-product-badge .material-symbols-outlined {
    font-size: 13px;
}

.bob-product-arrow {
    font-size: 16px;
    color: rgba(118,134,156,0.5);
    flex-shrink: 0;
    transition: color 0.13s;
}

.bob-product-row:hover .bob-product-arrow {
    color: #6366f1;
}

.bob-product-more {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
    padding: 8px 0 4px;
}

.bob-error-section {
    margin: 0 28px 28px;
}

.bob-error-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--warning);
    margin-bottom: 10px;
}

.bob-error-label .material-symbols-outlined {
    font-size: 1rem;
}

/* ─── Language chips in detail ───────────────────────────── */
.idet-lang-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 4px;
}

.idet-lang-chip {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
}

.idet-lang-chip.warn {
    background: var(--warning-dim);
    color: var(--warning);
    border: 1px solid rgba(251, 191, 36, 0.2);
}

.idet-lang-chip.done {
    background: rgba(124, 92, 246, 0.1);
    color: var(--primary);
    border: 1px solid rgba(124, 92, 246, 0.2);
}

.idet-lang-chip.muted {
    background: var(--glass);
    color: var(--text-soft);
    border: 1px solid var(--line);
}

/* ─── Body preview text ──────────────────────────────────── */
.idet-body-preview {
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--text-muted);
    margin: 0 0 20px;
    padding: 14px 16px;
    border-radius: var(--radius-card);
    background: rgba(248, 251, 255, 0.9);
    border: 1px solid rgba(118, 134, 156, 0.15);
}

/* ─── Error list ─────────────────────────────────────────── */
.idet-error-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.idet-error-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    background: rgba(220, 38, 38, 0.05);
    border: 1px solid rgba(220, 38, 38, 0.15);
    font-size: 0.8rem;
    color: var(--text);
}

.idet-error-row .material-symbols-outlined {
    font-size: 0.95rem;
    color: var(--danger);
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── Meta row (language + label pairs) ──────────────────── */
.idet-meta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px 20px;
    margin-bottom: 6px;
}

.idet-meta-pair {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.idet-meta-label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-right: 2px;
}

/* ─── Empty-body placeholder (no source text) ────────────── */
.idet-empty-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 32px 20px 20px;
    text-align: center;
    color: var(--text-soft);
}

.idet-empty-body .material-symbols-outlined {
    font-size: 2.2rem;
    opacity: 0.35;
}

.idet-empty-body p {
    margin: 0;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}

.idet-empty-sub {
    font-size: 0.81rem;
    color: var(--text-soft);
    font-weight: 400 !important;
}

/* ─── CTA actions ────────────────────────────────────────── */
.idet-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    padding-top: 24px;
    flex-wrap: wrap;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 800px) {
    .inbox-list-col { width: 240px; }
    .inbox-list-tab-label { font-size: 0.56rem; }
    .inbox-list-tab-count { font-size: 0.67rem; }
    .idet-head      { padding: 20px 20px 16px; }
    .idet-divider   { margin: 0 20px; }
    .idet-body      { padding: 16px 20px 24px; }
}

@media (max-width: 600px) {
    .inbox-shell {
        flex-direction: column;
    }

    .inbox-list-col {
        width: 100%;
        max-height: 40vh;
        border-right: none;
        border-bottom: 1px solid rgba(118, 134, 156, 0.18);
    }

    .inbox-list-tabs {
        display: flex;
        overflow-x: auto;
    }

    .inbox-list-tab {
        min-width: 116px;
        flex: 1 0 auto;
    }
}

/* ═══════════════════════════════════════════════════════════
   CONNECTIONS PAGE — conn-* classes
   ═══════════════════════════════════════════════════════════ */

/* ─── Page wrapper ───────────────────────────────────────── */
.conn-page {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
}

/* ─── Two-column layout (configured state) ───────────────── */
.conn-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 20px;
    align-items: start;
}

.conn-left,
.conn-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ─── Onboarding (no connections) ────────────────────────── */
.conn-onboarding {
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 680px;
}

.conn-onboarding-intro {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px 24px;
}

.conn-onboarding-icon {
    width: 44px;
    height: 44px;
    border-radius: 10px;
    background: var(--primary-dim);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.conn-onboarding-icon .material-symbols-outlined {
    font-size: 1.4rem;
}

.conn-onboarding-title {
    margin: 0 0 6px;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: -0.02em;
}

.conn-onboarding-desc {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.6;
}

/* ─── Connection card (active store) ─────────────────────── */
.conn-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.conn-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 20px;
    flex-wrap: wrap;
}

.conn-card-identity {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
}

.conn-card-avatar {
    width: 38px;
    height: 38px;
    border-radius: 8px;
    background: var(--primary-dim);
    color: var(--primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.conn-card-avatar .material-symbols-outlined {
    font-size: 1.15rem;
}

.conn-card-name {
    display: block;
    font-family: 'Manrope', sans-serif;
    font-weight: 700;
    font-size: 0.95rem;
    letter-spacing: -0.01em;
    color: var(--text);
}

.conn-card-url {
    display: block;
    font-size: 0.78rem;
    color: var(--text-muted);
    word-break: break-all;
    margin-top: 2px;
}

.conn-card-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.conn-version-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: 0.72rem;
    font-weight: 600;
    background: var(--glass);
    border: 1px solid var(--line);
    color: var(--text-muted);
}

/* ─── Status pills ───────────────────────────────────────── */
.conn-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.73rem;
    font-weight: 600;
}

.conn-status-pill::before {
    content: '';
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
    flex-shrink: 0;
}

.conn-status-pill.active {
    background: var(--success-dim);
    color: var(--success);
    border: 1px solid rgba(52, 211, 153, 0.2);
}

.conn-status-pill.ready {
    background: var(--primary-dim);
    color: var(--primary-light);
    border: 1px solid rgba(124, 92, 246, 0.2);
}

/* ─── Locale section inside card ─────────────────────────── */
.conn-locale-section {
    padding: 14px 20px;
    border-top: 1px solid var(--line-subtle);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.conn-locale-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.conn-locale-label .material-symbols-outlined {
    font-size: 0.9rem;
}

/* ─── Language settings form ─────────────────────────────── */
.conn-lang-form {
    padding: 14px 20px;
    border-top: 1px solid var(--line-subtle);
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.conn-lang-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: start;
}

.conn-lang-targets {
    border: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

.conn-lang-targets legend {
    font-size: 0.83rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 8px;
}

.conn-lang-check {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.84rem;
    cursor: pointer;
    padding: 4px 0;
    color: var(--text);
}

.conn-lang-check input[type="checkbox"] {
    accent-color: var(--primary);
}

.conn-lang-save {
    align-self: flex-start;
}

/* ─── No locales notice ──────────────────────────────────── */
.conn-no-locales {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 12px 20px;
    border-top: 1px solid var(--line-subtle);
    font-size: 0.82rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.conn-no-locales .material-symbols-outlined {
    font-size: 0.95rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── Form card ──────────────────────────────────────────── */
.conn-form-card {
    display: flex;
    flex-direction: column;
    gap: 0;
    overflow: hidden;
    padding: 0;
}

.conn-form-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 20px;
    border-bottom: 1px solid var(--line-subtle);
}

.conn-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text);
}

.conn-platform-badge .material-symbols-outlined {
    font-size: 1rem;
    color: var(--primary-light);
}

.conn-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px;
}

.conn-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
}

.conn-form-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding-top: 4px;
}

.conn-form-hint {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.76rem;
    color: var(--text-soft);
    margin: 0;
}

.conn-form-hint .material-symbols-outlined {
    font-size: 0.9rem;
}

.conn-form-tip {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 12px 20px;
    border-top: 1px solid var(--line-subtle);
    font-size: 0.78rem;
    color: var(--text-soft);
    line-height: 1.5;
}

.conn-form-tip .material-symbols-outlined {
    font-size: 0.9rem;
    flex-shrink: 0;
    margin-top: 1px;
}

/* ─── Coming soon strip ──────────────────────────────────── */
.conn-coming-soon {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 4px 0;
}

.conn-coming-label {
    font-size: 0.73rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
    margin-right: 4px;
}

.conn-coming-chip {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.74rem;
    font-weight: 500;
    background: var(--glass);
    border: 1px solid var(--line);
    color: var(--text-soft);
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .conn-layout      { grid-template-columns: 1fr; }
    .conn-lang-grid   { grid-template-columns: 1fr; }
    .conn-form-row    { grid-template-columns: 1fr; }
}

@media (max-width: 600px) {
    .conn-card-head   { flex-direction: column; align-items: flex-start; }
    .conn-form-footer { flex-direction: column; align-items: stretch; }
}


/* ════════════════════════════════════════════════════════════
   CREATOR STUDIO — two-panel inbox-style layout
   ════════════════════════════════════════════════════════════ */

/* Override console-main so creator-shell fills full height */
.console-main:has(.creator-shell) {
    overflow: hidden;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 16px;
}

.console-main:has(.creator-shell) .page-heading,
.console-main:has(.creator-shell) .console-stats {
    display: none;
}

/* ─── Shell container ────────────────────────────────────── */
.creator-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    border-radius: var(--radius-panel);
    border: 1px solid rgba(118, 134, 156, 0.2);
    overflow: hidden;
    background: #fff;
}

/* ─── Left column: project list ─────────────────────────── */
.creator-list-col {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border-right: 1px solid rgba(118, 134, 156, 0.18);
    background: rgba(246, 249, 253, 0.97);
}

.creator-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 14px 12px;
    border-bottom: 1px solid rgba(118, 134, 156, 0.15);
    flex-shrink: 0;
}

.creator-list-head-title {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.creator-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    background: rgba(124, 92, 246, 0.1);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
}

.creator-new-btn:hover {
    background: rgba(124, 92, 246, 0.18);
}

.creator-list-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.creator-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 40px 20px;
    color: var(--text-soft);
    font-size: 0.84rem;
    text-align: center;
}

.creator-list-empty .material-symbols-outlined {
    font-size: 2rem;
    opacity: 0.4;
}

/* ─── Project list rows ──────────────────────────────────── */
.creator-proj-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-left: 3px solid transparent;
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.12s, border-left-color 0.12s;
}

.creator-proj-row:hover {
    background: rgba(124, 92, 246, 0.05);
}

.creator-proj-row.is-active {
    background: rgba(124, 92, 246, 0.08);
    border-left-color: var(--primary);
}

.creator-proj-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 1px;
    overflow: hidden;
    background: var(--glass);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
}

.creator-proj-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.creator-proj-thumb-placeholder {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    flex-shrink: 0;
    margin-top: 1px;
    background: var(--glass);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    font-size: 1.2rem;
}

.creator-proj-row-body {
    flex: 1;
    min-width: 0;
}

.creator-proj-row-name {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3;
    margin-bottom: 2px;
}

.creator-proj-row-meta {
    font-size: 0.74rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.creator-proj-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-soft);
}

.creator-proj-status-dot.dot-done    { background: var(--success); }
.creator-proj-status-dot.dot-pending { background: var(--warning); }
.creator-proj-status-dot.dot-error   { background: #ef4444; }

/* ─── Right column: detail / form panels ────────────────── */
.creator-detail-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ─── Generic panel (hidden by default) ─────────────────── */
.cs-panel {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
}

.cs-panel.is-visible {
    display: flex;
}

.cs-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px 12px;
    border-bottom: 1px solid var(--line);
    flex-shrink: 0;
}

.cs-panel-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
}

.cs-panel-sub {
    font-size: 0.82rem;
    color: var(--text-soft);
    margin-top: 2px;
}

.cs-panel-body {
    flex: 1;
    padding: 20px 24px 32px;
    overflow-y: auto;
}

/* ─── Flash messages inside creator panels ───────────────── */
.cs-flash {
    padding: 10px 14px;
    border-radius: var(--radius);
    font-size: 0.84rem;
    margin-bottom: 16px;
}

.cs-flash.cs-flash-success {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.3);
    color: #065f46;
}

.cs-flash.cs-flash-error {
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #991b1b;
}

/* ─── Back button ────────────────────────────────────────── */
.cs-back-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 12px;
    border-radius: var(--radius-pill);
    font-size: 0.8rem;
    font-weight: 500;
    border: 1px solid var(--line);
    background: transparent;
    color: var(--text-soft);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
}

.cs-back-btn:hover {
    background: var(--glass);
    color: var(--text);
}

/* ─── Project detail panel ───────────────────────────────── */
.cs-proj-detail-head {
    padding: 16px 24px 0;
    flex-shrink: 0;
}

.cs-proj-detail-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    margin: 6px 0 0;
}

.cs-proj-detail-body {
    padding: 16px 24px 32px;
    flex: 1;
    overflow-y: auto;
}

/* ─── Side-by-side images ────────────────────────────────── */
.cs-proj-images {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-bottom: 20px;
}

.cs-proj-image-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cs-proj-image-label {
    font-size: 0.74rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.cs-proj-image-frame {
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--line);
    background: var(--glass);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cs-proj-image-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cs-proj-image-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-soft);
    font-size: 0.8rem;
    padding: 24px;
    text-align: center;
}

.cs-proj-image-empty .material-symbols-outlined {
    font-size: 1.8rem;
    opacity: 0.4;
}

/* ─── Metadata chips ─────────────────────────────────────── */
.cs-proj-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
}

.cs-proj-meta-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 10px;
    border-radius: var(--radius-pill);
    font-size: 0.76rem;
    font-weight: 500;
    background: var(--glass);
    border: 1px solid var(--line);
    color: var(--text-soft);
}

.cs-proj-meta-chip .material-symbols-outlined {
    font-size: 0.9rem;
}

/* ─── Error banner inside project detail ─────────────────── */
.cs-proj-error {
    padding: 10px 14px;
    border-radius: var(--radius);
    background: rgba(239, 68, 68, 0.08);
    border: 1px solid rgba(239, 68, 68, 0.25);
    color: #991b1b;
    font-size: 0.84rem;
    margin-bottom: 16px;
}

/* ─── Actions row ────────────────────────────────────────── */
.cs-proj-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .creator-list-col   { width: 240px; }
    .cs-proj-images     { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
    .console-main:has(.creator-shell) { padding: 0; }
    .creator-shell      { border-radius: 0; border: none; }
    .creator-list-col   { width: 200px; }
    .cs-panel-body      { padding: 16px; }
    .cs-proj-detail-body { padding: 16px; }
}


/* ════════════════════════════════════════════════════════════
   INBOX — AJAX product pane & embed layout
   ════════════════════════════════════════════════════════════ */

/* Product pane: fills the detail column, scrollable */
.inbox-prod-pane {
    display: none;
    flex-direction: column;
    height: 100%;
    overflow-y: auto;
    padding: 0;
}

.inbox-prod-pane.is-visible {
    display: flex;
}

/* Loading state */
.inbox-pane-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex: 1;
    color: var(--text-soft);
    font-size: 0.85rem;
}

.inbox-pane-spinner {
    display: block;
    width: 28px;
    height: 28px;
    border: 3px solid rgba(124, 92, 246, 0.15);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: inbox-spin 0.7s linear infinite;
}

@keyframes inbox-spin {
    to { transform: rotate(360deg); }
}

/* Error state */
.inbox-pane-error {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    color: var(--text-soft);
    font-size: 0.85rem;
}

.inbox-pane-error .material-symbols-outlined {
    color: #ef4444;
    font-size: 1.2rem;
}

/* ─── Embedded product layout (prod-embed-wrap) ──────────── */
/* When product is shown embedded in the inbox pane:          */
/* - give it its own scrollable padded area                   */
/* - the sticky aside doesn't make sense inside a pane        */

.prod-embed-wrap {
    padding: 20px 24px 32px;
    min-height: 100%;
}

.prod-embed-wrap.is-embed .product-detail-aside {
    position: static;  /* disable sticky positioning inside pane */
}

/* Tighten the detail grid a bit when embedded */
.prod-embed-wrap.is-embed .product-detail-grid {
    grid-template-columns: minmax(0, 1fr) minmax(280px, 320px);
    gap: 16px;
    align-items: start;
}

/* In inbox embed, prioritize editable content over meta side panels */
.prod-embed-wrap.is-embed .product-detail-body {
    order: 1;
}

.prod-embed-wrap.is-embed .product-detail-aside {
    order: 2;
    gap: 12px;
}

/* Keep the top image compact in the inbox pane */
.prod-embed-wrap.is-embed .product-image-panel {
    aspect-ratio: 4 / 3;
    max-height: 260px;
}

/* Improve readability of long EAN spec rows in the narrow embed pane */
.prod-embed-wrap.is-embed .ean-specs-table th {
    width: 36%;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

.prod-embed-wrap.is-embed .ean-specs-table td {
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}

@media (max-width: 1240px) {
    .prod-embed-wrap.is-embed .product-detail-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Hide the console-content padding wrapper inside pane */
.inbox-prod-pane .console-content {
    display: contents;
}


/* ════════════════════════════════════════════════════════════
   SEARCH PAGE
   ════════════════════════════════════════════════════════════ */

/* ══════════════════════════════════════════════════════════
   SEARCH — inbox split-pane
   ══════════════════════════════════════════════════════════ */

/* Mirror the inbox-shell :has() pattern exactly */
.console-main:has(.srch-shell) {
    overflow: hidden;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 16px;
    gap: 0;
}
.console-main:has(.srch-shell) .page-heading,
.console-main:has(.srch-shell) .console-stats {
    display: none;
}
.console-main:has(.srch-shell) .topbar {
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* Shell — same structure as inbox-shell */
.srch-shell {
    flex: 1;
    min-height: 0;
    display: grid;
    grid-template-columns: 320px 1fr;
    border-radius: var(--radius-panel);
    border: 1px solid rgba(118, 134, 156, 0.2);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06), 0 1px 3px rgba(16, 24, 40, 0.04);
    background: #fff;
}

/* ── Left: list column ──────────────────────────────────── */
.srch-list-col {
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(118, 134, 156, 0.18);
    background: rgba(246, 249, 253, 0.97);
    overflow: hidden;
}

/* Column header — mirrors .inbox-list-head */
.srch-list-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(118, 134, 156, 0.18);
    flex-shrink: 0;
}
.srch-list-head-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
    flex: 1;
}
.srch-list-head-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 20px;
    padding: 0 6px;
    background: rgba(99, 91, 255, 0.12);
    color: var(--primary);
    border-radius: 99px;
    font-size: 0.7rem;
    font-weight: 700;
}

/* Empty state */
.srch-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex: 1;
    padding: 40px 20px;
    text-align: center;
    color: var(--text-soft);
}
.srch-empty .material-symbols-outlined { font-size: 2.4rem; opacity: 0.3; }
.srch-empty p { font-size: 0.84rem; max-width: 240px; margin: 0; line-height: 1.6; }
.srch-empty strong { color: var(--text); }

/* List */
.srch-list {
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* List item */
.srch-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border: none;
    border-bottom: 1px solid rgba(118, 134, 156, 0.14);
    background: transparent;
    cursor: pointer;
    text-align: left;
    transition: background 0.1s;
}
.srch-item:hover { background: rgba(99, 91, 255, 0.05); }
.srch-item.is-active {
    background: rgba(255, 255, 255, 0.92);
    border-left: 3px solid var(--primary);
    padding-left: 11px;
    box-shadow: inset 0 0 0 1px rgba(99, 91, 255, 0.08);
}

/* Thumbnail */
.srch-item-thumb {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(118, 134, 156, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}
.srch-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.srch-item-thumb .material-symbols-outlined {
    font-size: 1rem;
    color: var(--text-soft);
}

/* Body */
.srch-item-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.srch-item-title {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.srch-item-sub {
    font-size: 0.75rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Meta (right side of list item) */
.srch-item-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    flex-shrink: 0;
}

/* Type badges */
.srch-type-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 6px;
    white-space: nowrap;
}
.srch-type-product    { background: rgba(37,99,235,0.1);  color: #2563eb; }
.srch-type-creator    { background: rgba(124,58,237,0.1); color: #7c3aed; }
.srch-type-connection { background: rgba(5,150,105,0.1);  color: #059669; }
.srch-type-flow       { background: rgba(217,119,6,0.1);  color: #d97706; }

/* Status dot */
.srch-status-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    display: block;
}
.srch-status-done    { background: var(--success, #10b981); }
.srch-status-warn    { background: var(--warning, #f59e0b); }
.srch-status-neutral { background: rgba(118, 134, 156, 0.5); }

/* ── Right: detail column ───────────────────────────────── */
.srch-detail-col {
    overflow-y: auto;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    background: #fff;
}
.srch-detail-inner { flex: 1; }

/* Detail placeholder (no selection) */
.srch-detail-placeholder {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: var(--text-soft);
    text-align: center;
}
.srch-detail-placeholder .material-symbols-outlined { font-size: 2.5rem; opacity: 0.25; }
.srch-detail-placeholder p { font-size: 0.88rem; max-width: 260px; margin: 0; }

/* ── Detail content ─────────────────────────────────────── */
.sd-product, .sd-generic {
    display: flex;
    flex-direction: column;
    gap: 20px;
    max-width: 560px;
}
.sd-thumb-wrap {
    width: 100%;
    max-height: 280px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--line);
}
.sd-thumb {
    width: 100%;
    height: 280px;
    object-fit: contain;
    display: block;
    background: #f8f8ff;
}
.sd-thumb--square { object-fit: cover; }
.sd-thumb-placeholder {
    width: 100%;
    height: 160px;
    border-radius: 14px;
    background: rgba(99, 91, 255, 0.06);
    border: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
}
.sd-thumb-placeholder .material-symbols-outlined { font-size: 3rem; color: var(--primary); opacity: 0.5; }

.sd-body { display: flex; flex-direction: column; gap: 10px; }

.sd-type-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.sd-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 2px 8px 2px 5px;
    border-radius: 20px;
}
.sd-status .material-symbols-outlined { font-size: 13px; }
.sd-status.done { background: rgba(16,185,129,0.1); color: #059669; }
.sd-status.warn { background: rgba(251,191,36,0.12); color: #b45309; }
.sd-status.neutral { background: rgba(118,134,156,0.1); color: var(--text-soft); }

.sd-title {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--text);
    line-height: 1.3;
}
.sd-sku {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-soft);
}
.sd-langs {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.sd-lang {
    font-size: 0.72rem;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 6px;
    background: rgba(118, 134, 156, 0.12);
    color: var(--text-soft);
}
.sd-preview {
    margin: 0;
    font-size: 0.86rem;
    color: var(--text-muted);
    line-height: 1.65;
    border-left: 3px solid rgba(99, 91, 255, 0.2);
    padding-left: 12px;
}
.sd-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    text-decoration: none;
    font-size: 0.88rem;
}
.sd-link .material-symbols-outlined { font-size: 16px; }

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
    .console-main:has(.srch-shell) {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }
    .srch-shell {
        grid-template-columns: 1fr;
        grid-template-rows: auto 1fr;
        overflow: visible;
        flex: none;
    }
    .srch-list-col {
        border-right: none;
        border-bottom: 1px solid rgba(118, 134, 156, 0.18);
        max-height: 45vh;
    }
    .srch-detail-col { padding: 20px 16px; }
}

/* ─── Page layout ───────────────────────────────────────── */
.search-page {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

/* ─── Header / search bar ───────────────────────────────── */
.search-page-head {
    display: flex;
    align-items: center;
    gap: 16px;
}

.search-page-query-wrap {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    border: 1.5px solid rgba(124, 92, 246, 0.3);
    border-radius: var(--radius-control);
    padding: 0 16px;
    box-shadow: 0 2px 8px rgba(124, 92, 246, 0.08);
}

.search-page-icon {
    font-size: 1.2rem;
    color: var(--primary);
    flex-shrink: 0;
}

.search-page-form {
    flex: 1;
    display: contents;
}

.search-page-input {
    flex: 1;
    height: 48px;
    border: none;
    background: transparent;
    font-size: 1rem;
    color: var(--text);
    outline: none;
}

.search-page-input::placeholder {
    color: var(--text-soft);
}

.search-page-count {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-soft);
    white-space: nowrap;
}

/* ─── Empty / prompt states ─────────────────────────────── */
.search-empty-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 80px 24px;
    text-align: center;
    color: var(--text-soft);
}

.search-empty-icon {
    font-size: 3rem;
    opacity: 0.3;
}

.search-empty-prompt p {
    font-size: 0.9rem;
    max-width: 400px;
    margin: 0;
    line-height: 1.6;
}

/* ─── Results container ─────────────────────────────────── */
.search-results {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* ─── Section ───────────────────────────────────────────── */
.search-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.search-section-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.search-section-label .material-symbols-outlined {
    font-size: 0.95rem;
}

.search-section-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 18px;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    background: rgba(124, 92, 246, 0.1);
    color: var(--primary);
}

.search-more {
    font-size: 0.8rem;
    color: var(--text-soft);
    padding: 12px 16px;
    text-align: center;
}

/* ─── Product cards grid ────────────────────────────────── */
.search-product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 10px;
}

.search-product-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 14px 16px;
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.search-product-card:hover {
    border-color: rgba(124, 92, 246, 0.3);
    box-shadow: 0 4px 16px rgba(124, 92, 246, 0.1);
    transform: translateY(-1px);
}

.spc-top {
    display: flex;
    align-items: flex-start;
    gap: 10px;
}

.spc-thumb-wrap {
    position: relative;
    width: 34px;
    height: 34px;
    flex-shrink: 0;
}

.spc-thumb {
    width: 34px;
    height: 34px;
    border-radius: 9px;
    object-fit: cover;
    display: block;
    border: 1px solid rgba(118, 134, 156, 0.24);
}

.spc-thumb-status {
    position: absolute;
    right: -4px;
    bottom: -4px;
    width: 17px;
    height: 17px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.95);
}

.spc-thumb-status.warn {
    background: rgba(251, 191, 36, 0.92);
    color: #7c2d12;
}

.spc-thumb-status.done {
    background: rgba(16, 185, 129, 0.9);
    color: #ffffff;
}

.spc-thumb-status .material-symbols-outlined {
    font-size: 11px;
}

.spc-avatar {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.spc-avatar.warn {
    background: var(--warning-dim);
    color: var(--warning);
}

.spc-avatar.done {
    background: rgba(16, 185, 129, 0.12);
    color: var(--success);
}

.spc-avatar .material-symbols-outlined {
    font-size: 1rem;
}

.spc-head {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.spc-title {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.spc-sku {
    font-size: 0.74rem;
    color: var(--text-soft);
}

.spc-preview {
    font-size: 0.8rem;
    color: var(--text-soft);
    line-height: 1.55;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.spc-foot {
    display: flex;
    align-items: center;
    gap: 5px;
    flex-wrap: wrap;
    margin-top: 2px;
}

.spc-status {
    font-size: 0.72rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 999px;
}

.spc-status.warn {
    background: var(--warning-dim);
    color: var(--warning);
}

.spc-status.done {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.spc-lang {
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--glass);
    border: 1px solid var(--line);
    color: var(--text-soft);
}

/* ─── Creator cards ─────────────────────────────────────── */
.search-creator-grid {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-creator-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.search-creator-card:hover {
    background: rgba(124, 92, 246, 0.04);
    border-color: rgba(124, 92, 246, 0.25);
}

.scc-thumb {
    width: 48px;
    height: 48px;
    border-radius: 8px;
    overflow: hidden;
    background: var(--glass);
    border: 1px solid var(--line);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-soft);
    font-size: 1.3rem;
}

.scc-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.scc-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scc-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scc-product {
    font-size: 0.78rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scc-date {
    font-size: 0.74rem;
    color: var(--text-soft);
}

.scc-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--line-strong);
}

.scc-dot.dot-done    { background: var(--success); }
.scc-dot.dot-pending { background: var(--warning); }
.scc-dot.dot-error   { background: #ef4444; }

/* ─── Connection / flow rows ────────────────────────────── */
.search-conn-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.search-conn-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: var(--radius-card);
    border: 1px solid var(--line);
    background: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.search-conn-row:hover {
    background: rgba(124, 92, 246, 0.04);
    border-color: rgba(124, 92, 246, 0.25);
}

.scr-avatar {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background: rgba(124, 92, 246, 0.08);
    color: var(--primary);
    font-size: 1rem;
}

.scr-avatar.flow {
    background: rgba(16, 185, 129, 0.08);
    color: var(--success);
}

.scr-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.scr-name {
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--text);
}

.scr-url {
    font-size: 0.76rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.scr-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.scr-version {
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--glass);
    border: 1px solid var(--line);
    color: var(--text-soft);
    font-weight: 500;
}

.scr-status {
    font-size: 0.74rem;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 999px;
}

.scr-status.done {
    background: rgba(16, 185, 129, 0.1);
    color: var(--success);
}

.scr-status.warn {
    background: var(--warning-dim);
    color: var(--warning);
}

/* ─── Topbar search form ─────────────────────────────────── */
.topbar-search {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    /* existing topbar-search styles already apply */
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 900px) {
    .search-product-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
    .search-product-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════════════════
   AUTOPILOT / FLOWS — Two-panel shell (mirrors inbox layout)
   ═══════════════════════════════════════════════════════════ */

.console-main:has(.flows-shell) {
    overflow: hidden;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 16px;
    gap: 0;
}

.console-main:has(.flows-shell) .page-heading,
.console-main:has(.flows-shell) .console-stats {
    display: none;
}

.console-main:has(.flows-shell) .topbar {
    margin-bottom: 12px;
    flex-shrink: 0;
}

/* ─── Shell container ────────────────────────────────────── */
.flows-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    border-radius: var(--radius-panel);
    border: 1px solid rgba(118, 134, 156, 0.2);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
}

/* ─── Left column ────────────────────────────────────────── */
.flows-list-col {
    width: 300px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(118, 134, 156, 0.18);
    overflow: hidden;
    background: rgba(246, 249, 253, 0.97);
}

.flows-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(118, 134, 156, 0.18);
    flex-shrink: 0;
}

.flows-list-title {
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-soft);
}

.flows-new-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 12px;
    border-radius: 8px;
    background: rgba(118, 134, 156, 0.1);
    border: 1px solid rgba(118, 134, 156, 0.25);
    color: #374151;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.flows-new-btn .material-symbols-outlined {
    font-size: 1rem;
}

.flows-new-btn:hover,
.flows-new-btn.is-active {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}

/* ─── Flow list ──────────────────────────────────────────── */
.flows-list-body {
    flex: 1;
    overflow-y: auto;
    padding: 6px 0;
}

.flows-list-empty {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 40px 24px;
    text-align: center;
    color: var(--text-soft);
}

.flows-list-empty .material-symbols-outlined {
    font-size: 2.2rem;
    opacity: 0.4;
}

.flows-list-empty p {
    font-size: 0.82rem;
    line-height: 1.5;
    margin: 0;
}

/* ─── Flow row ───────────────────────────────────────────── */
.flows-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.12s;
    border-left: 2px solid transparent;
}

.flows-row:hover {
    background: rgba(118, 134, 156, 0.07);
}

.flows-row.is-active {
    background: rgba(124, 92, 246, 0.08);
    border-left-color: var(--primary);
}

.flows-row-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-muted, #aaa);
}

.flows-row-dot.active  { background: var(--success); box-shadow: 0 0 0 2px rgba(16,185,129,.25); }
.flows-row-dot.paused  { background: var(--warning); }
.flows-row-dot.draft   { background: var(--text-soft); }

.flows-row-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.flows-row-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flows-row-sub {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: var(--text-soft);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.flows-row-sub .material-symbols-outlined {
    font-size: 0.82rem;
    flex-shrink: 0;
}

.flows-row-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 999px;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.flows-row-badge.active  { background: rgba(16,185,129,.12); color: var(--success); }
.flows-row-badge.paused  { background: var(--warning-dim);   color: var(--warning); }
.flows-row-badge.draft   { background: rgba(118,134,156,.1);   color: #6b7280; border: 1px solid rgba(118,134,156,.2); }

/* ─── Activity log (left col footer) ────────────────────── */
.flows-log {
    flex-shrink: 0;
    border-top: 1px solid rgba(118, 134, 156, 0.18);
}

.flows-log-summary {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-soft);
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.flows-log-summary::-webkit-details-marker { display: none; }

.flows-log-summary .material-symbols-outlined {
    font-size: 0.92rem;
}

.flows-log-chevron {
    margin-left: auto;
    transition: transform 0.18s;
}

details[open] .flows-log-chevron {
    transform: rotate(180deg);
}

.flows-log-body {
    padding: 4px 0 8px;
    max-height: 180px;
    overflow-y: auto;
}

.flows-log-row {
    display: flex;
    gap: 8px;
    padding: 4px 14px;
    font-size: 0.72rem;
    line-height: 1.4;
}

.flows-log-time {
    color: var(--text-soft);
    flex-shrink: 0;
    white-space: nowrap;
}

.flows-log-msg {
    color: var(--text);
}

/* ─── Flash messages ─────────────────────────────────────── */
.flows-flash {
    margin: 10px 12px 0;
    border-radius: 8px;
    font-size: 0.82rem;
}

/* ─── Right column ───────────────────────────────────────── */
.flows-detail-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
}

.flows-wizard-wrap {
    display: flex;
    flex-direction: column;
    max-width: 720px;
    width: 100%;
    margin: 0 auto;
    padding: 28px 32px 48px;
    gap: 0;
}

/* ─── Wizard header ──────────────────────────────────────── */
.flows-wizard-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 28px;
}

.flows-wizard-head-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.flows-wizard-icon {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(124, 92, 246, 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.flows-wizard-icon .material-symbols-outlined {
    font-size: 1.3rem;
    color: var(--primary);
}

.flows-wizard-title {
    display: block;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1.2;
}

.flows-wizard-sub {
    display: block;
    font-size: 0.78rem;
    color: var(--text-soft);
    margin-top: 2px;
}

/* ── Inline name editor in header ── */
.flows-wizard-sub-wrap {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-top: 2px;
}
.flows-wizard-name-inline {
    background: none;
    border: none;
    border-bottom: 1.5px dashed rgba(123,53,216,0.3);
    border-radius: 3px 3px 0 0;
    padding: 2px 4px;
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    color: var(--text);
    outline: none;
    width: 220px;
    max-width: 320px;
    transition: border-color 0.15s, background 0.15s, width 0.2s;
}
.flows-wizard-name-inline:hover {
    border-bottom: 1.5px solid rgba(123,53,216,0.5);
    background: rgba(123,53,216,0.05);
}
.flows-wizard-name-inline:focus {
    border-bottom: 1.5px solid var(--primary);
    background: rgba(123,53,216,0.07);
    width: 300px;
}
.flows-wizard-name-inline::placeholder { color: var(--text-soft); font-style: italic; font-weight: 400; }
.flows-wizard-name-edit-hint {
    font-size: 13px;
    color: rgba(123,53,216,0.5);
    opacity: 0.5;
    transition: opacity 0.15s;
    pointer-events: none;
    flex-shrink: 0;
}
.flows-wizard-sub-wrap:hover .flows-wizard-name-edit-hint { opacity: 1; }

.flows-wizard-head-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* ─── Wizard form overrides (inherits .wizard-* styles) ──── */
.flows-wizard-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.flows-iterations-group {
    max-width: 220px;
}

.flows-iterations-input {
    width: 100%;
}

.flows-iterations-note {
    margin: 0;
    font-size: 0.74rem;
    color: var(--text-soft);
    line-height: 1.45;
}

.flows-wizard-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-top: 8px;
}

.flows-wizard-footer-btns {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 860px) {
    .flows-list-col { width: 240px; }

    .flows-wizard-wrap {
        padding: 20px 20px 40px;
    }
}

@media (max-width: 640px) {
    .flows-shell {
        flex-direction: column;
    }

    .flows-list-col {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid rgba(118, 134, 156, 0.18);
        max-height: 220px;
    }
}

.job-stack {
    display: grid;
    gap: 10px;
}

.job-stack-page {
    margin-bottom: 18px;
}

.job-card {
    border: 1px solid rgba(121, 137, 168, 0.18);
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.92);
    padding: 14px 16px;
    box-shadow: 0 16px 30px rgba(19, 29, 51, 0.05);
}

.job-card-compact {
    padding: 12px 14px;
    border-radius: 14px;
    box-shadow: none;
}

.job-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
}

.job-card-head strong {
    font-size: 0.92rem;
    color: var(--text);
}

.job-status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    border: 1px solid rgba(121, 137, 168, 0.18);
    background: rgba(246, 248, 252, 0.9);
    font-size: 0.74rem;
    font-weight: 700;
    color: var(--text-soft);
    white-space: nowrap;
}

.job-card-summary {
    margin: 0;
    font-size: 0.86rem;
    line-height: 1.5;
    color: var(--text-soft);
}

.job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 10px;
    font-size: 0.76rem;
    color: var(--text-muted);
}

.job-status-queued {
    border-color: rgba(121, 137, 168, 0.2);
}

.job-status-running {
    border-color: rgba(84, 101, 255, 0.22);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(246, 248, 255, 0.96) 100%);
}

.job-status-completed {
    border-color: rgba(47, 166, 107, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(244, 252, 247, 0.96) 100%);
}

.job-status-failed {
    border-color: rgba(213, 99, 65, 0.2);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(255, 247, 245, 0.96) 100%);
}

.inbox-job-stack {
    display: grid;
    gap: 10px;
    margin: 0 14px 12px;
}

.flows-job-stack {
    padding: 0 12px 12px;
}

/* ── Job card progress layout ───────────────────────────────── */
.job-card-row {
    display: flex;
    align-items: center;
    gap: 11px;
}

.job-card-icon {
    flex-shrink: 0;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-dim);
    color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.job-card-icon .material-symbols-outlined { font-size: 17px; }

.job-card-icon.is-spinning .material-symbols-outlined {
    animation: job-card-spin 1.4s linear infinite;
}

@keyframes job-card-spin { to { transform: rotate(360deg); } }

.job-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.job-card-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.job-card-progress {
    height: 4px;
    background: rgba(121, 137, 168, 0.16);
    border-radius: 99px;
    overflow: hidden;
}

.job-card-progress-bar {
    height: 100%;
    border-radius: 99px;
    background: var(--primary);
    transition: width 0.6s ease;
}

.job-card-meta-text {
    font-size: 0.74rem;
    color: var(--text-muted);
}

/* Job status pill colored variants */
.job-status-pill--running {
    background: var(--primary-dim);
    color: var(--primary);
    border-color: rgba(123, 53, 216, 0.2);
}

.job-status-pill--queued {
    background: rgba(121, 137, 168, 0.08);
    color: var(--text-muted);
    border-color: rgba(121, 137, 168, 0.18);
}

/* ── Bob Notification Toast ─────────────────────────────────────── */
.bob-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    z-index: 2147483000;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
    isolation: isolate;
    pointer-events: none;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease;
}
.bob-toast.bob-toast-hidden {
    transform: translateX(calc(100% + 40px));
    opacity: 0;
}
.bob-toast.bob-toast-visible {
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Speech bubble */
.bob-toast-bubble {
    background: rgba(255, 255, 255, 0.99);
    border: 1px solid rgba(123, 53, 216, 0.25);
    border-radius: 14px 14px 4px 14px;
    padding: 10px 16px;
    font-size: 13.5px;
    font-weight: 500;
    color: #1a1a2e;
    line-height: 1.45;
    max-width: 240px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(123, 53, 216, 0.12);
    margin-bottom: 8px;
    opacity: 1;
    position: relative;
    z-index: 2;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: bobBubblePop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Body row: mascot + detail side-by-side */
.bob-toast-body {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    background: rgba(255,255,255,0.985);
    border: 1px solid rgba(123, 53, 216, 0.18);
    border-radius: 16px;
    padding: 12px 14px 12px 10px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10), 0 2px 8px rgba(123,53,216,0.08);
    position: relative;
    z-index: 1;
    opacity: 1;
    min-width: 240px;
    max-width: 290px;
}

/* Mascot SVG container */
.bob-toast-mascot {
    flex-shrink: 0;
    width: 72px;
    height: 72px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bob-toast-mascot svg {
    width: 72px;
    height: 72px;
}

/* Text detail area */
.bob-toast-detail {
    flex: 1;
    min-width: 0;
}
.bob-toast-detail-name {
    font-size: 12px;
    font-weight: 600;
    color: #7B35D8;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bob-toast-detail-row {
    font-size: 12px;
    color: #4a4a6a;
    margin-bottom: 6px;
    line-height: 1.4;
}
.bob-toast-detail-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.bob-toast-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    background: rgba(123,53,216,0.08);
    color: #7B35D8;
    border-radius: 20px;
    padding: 2px 8px 2px 5px;
    font-size: 11px;
    font-weight: 500;
}
.bob-toast-chip.chip-warn {
    background: rgba(245,158,11,0.1);
    color: #b45309;
}
.bob-toast-chip .material-symbols-outlined { font-size: 12px; }
.bob-toast-detail-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: #7B35D8;
    text-decoration: none;
    font-weight: 500;
}
.bob-toast-detail-link:hover { text-decoration: underline; }
.bob-toast-detail-link .material-symbols-outlined { font-size: 13px; }

/* Close button */
.bob-toast-close {
    position: absolute;
    top: 7px;
    right: 9px;
    background: none;
    border: none;
    cursor: pointer;
    color: #9ca3af;
    font-size: 16px;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.bob-toast-close:hover { color: #374151; background: rgba(0,0,0,0.05); }

@keyframes bobBubblePop {
    from { transform: scale(0.8) translateY(6px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* ══════════════════════════════════════════════════════════════════
   Login / Register pages  (lg-* namespace)
   ══════════════════════════════════════════════════════════════════ */

/* ── Login shell ── */
.lg-shell {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 100vh;
    background: #faf9ff;
    font-family: 'Inter', sans-serif;
}

/* ── Left panel ── */
.lg-left {
    background: linear-gradient(160deg, #f3eeff 0%, #ede5ff 60%, #e8d5ff 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 56px;
    position: relative;
    overflow: hidden;
}
.lg-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 60% 30%, rgba(168,110,238,0.18) 0%, transparent 60%);
    pointer-events: none;
}
.lg-logo {
    position: absolute;
    top: 28px;
    left: 32px;
}
.lg-logo img { height: 28px; display: block; }

/* ── Bob mascot ── */
.lg-mascot-wrap {
    position: relative;
    width: 220px;
    height: 220px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 40px;
}
.lg-bob-glow {
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(123,53,216,0.2) 0%, transparent 70%);
    animation: lgGlowPulse 3s ease-in-out infinite;
}
.lg-bob-svg {
    width: 170px;
    height: 170px;
    position: relative;
    z-index: 2;
    filter: drop-shadow(0 8px 24px rgba(123,53,216,0.20));
}
.lg-bob-bubble {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border: 1px solid rgba(123,53,216,0.2);
    border-radius: 14px 14px 14px 4px;
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    box-shadow: 0 4px 16px rgba(123,53,216,0.10);
    z-index: 3;
    color: #1a1a2e;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

/* ── Left copy ── */
.lg-left-copy {
    max-width: 360px;
    text-align: center;
}
.lg-left-copy h2 {
    font-family: 'Manrope', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: #2A1460;
    margin: 0 0 28px;
    line-height: 1.3;
}
.lg-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
    text-align: left;
}
.lg-features li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.lg-feat-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(123,53,216,0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.lg-feat-icon .material-symbols-outlined { font-size: 18px; color: #7B35D8; }
.lg-features strong {
    display: block;
    font-size: 13.5px;
    font-weight: 700;
    color: #2A1460;
    margin-bottom: 2px;
}
.lg-features span {
    font-size: 12.5px;
    color: #6b7280;
    line-height: 1.5;
}

/* ── Right panel ── */
.lg-right {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px 40px;
    background: #fff;
}
.lg-form-card {
    width: 100%;
    max-width: 380px;
}
.lg-form-head { margin-bottom: 32px; }
.lg-eyebrow {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #7B35D8;
    margin-bottom: 10px;
}
.lg-form-head h1 {
    font-family: 'Manrope', sans-serif;
    font-size: 1.8rem;
    font-weight: 800;
    color: #1a1a2e;
    margin: 0 0 8px;
}
.lg-form-head p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

/* ── Error ── */
.lg-error {
    display: flex;
    align-items: center;
    gap: 8px;
    background: rgba(220,38,38,0.06);
    border: 1px solid rgba(220,38,38,0.2);
    border-radius: 10px;
    padding: 10px 14px;
    font-size: 13.5px;
    color: #dc2626;
    margin-bottom: 20px;
}
.lg-error .material-symbols-outlined { font-size: 16px; flex-shrink: 0; }

/* ── Form fields ── */
.lg-form { display: flex; flex-direction: column; gap: 18px; margin-bottom: 20px; }
.lg-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.lg-field > span {
    font-size: 13px;
    font-weight: 600;
    color: #374151;
}
.lg-input-wrap {
    position: relative;
}
.lg-input-icon {
    position: absolute;
    left: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #9ca3af;
    pointer-events: none;
}
.lg-input-wrap input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    font-size: 14px;
    font-family: 'Inter', sans-serif;
    color: #1a1a2e;
    background: #fff;
    outline: none;
    transition: border-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}
.lg-input-wrap input:focus {
    border-color: #7B35D8;
    box-shadow: 0 0 0 3px rgba(123,53,216,0.10);
}
.lg-input-wrap input::placeholder { color: #c4c4c4; }

/* ── Submit ── */
.lg-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 13px;
    background: #7B35D8;
    color: #fff;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    cursor: pointer;
    transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(123,53,216,0.28);
    margin-top: 4px;
}
.lg-submit .material-symbols-outlined { font-size: 18px; }
.lg-submit:hover {
    background: #6a29c4;
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(123,53,216,0.36);
}
.lg-submit:active { transform: translateY(0); }

/* ── Demo note ── */
.lg-demo-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    background: rgba(123,53,216,0.05);
    border: 1px solid rgba(123,53,216,0.14);
    border-radius: 10px;
    padding: 12px 14px;
    margin-top: 16px;
    font-size: 12.5px;
}
.lg-demo-note > .material-symbols-outlined { font-size: 15px; color: #7B35D8; flex-shrink: 0; margin-top: 1px; }
.lg-demo-note strong { display: block; font-weight: 600; color: #2A1460; margin-bottom: 2px; }
.lg-demo-note span { color: #6b7280; font-family: 'Courier New', monospace; letter-spacing: 0.02em; }

/* ── Back link ── */
.lg-back {
    text-align: center;
    margin-top: 24px;
}
.lg-back a {
    font-size: 13px;
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s;
}
.lg-back a:hover { color: #7B35D8; }

/* ── Bob animations ── */
#lg-bob-head  { animation: lgWobble 4s ease-in-out infinite; }
.lg-antenna   { animation: lgAntennaWiggle 3s ease-in-out infinite; }
.lg-eye-l     { animation: lgBlink 3.5s ease-in-out infinite; }
.lg-eye-r     { animation: lgBlink 3.5s ease-in-out infinite 0.15s; }
.lg-smile     { animation: lgSmile 4s ease-in-out infinite; }

@keyframes lgWobble {
    0%,100% { transform: rotate(0deg) translateY(0px); }
    20%     { transform: rotate(2.5deg) translateY(-2px); }
    40%     { transform: rotate(-2deg) translateY(1px); }
    60%     { transform: rotate(1.5deg) translateY(-1px); }
    80%     { transform: rotate(-1deg) translateY(0px); }
}
@keyframes lgBlink {
    0%,90%,100% { transform: scaleY(1); }
    93%,97%     { transform: scaleY(0.08); }
}
@keyframes lgSmile {
    0%,100% { transform: scaleX(1); }
    50%     { transform: scaleX(1.08); }
}
@keyframes lgAntennaWiggle {
    0%,100% { transform: rotate(0deg); transform-origin: 50% 100%; }
    30%     { transform: rotate(12deg); transform-origin: 50% 100%; }
    60%     { transform: rotate(-8deg); transform-origin: 50% 100%; }
}
@keyframes lgGlowPulse {
    0%,100% { transform: scale(1); opacity: 0.7; }
    50%     { transform: scale(1.15); opacity: 1; }
}

/* ── Responsive ── */
@media (max-width: 800px) {
    .lg-shell { grid-template-columns: 1fr; }
    .lg-left {
        padding: 48px 32px 40px;
        min-height: auto;
    }
    .lg-right { padding: 40px 24px; }
    .lg-mascot-wrap { width: 180px; height: 180px; margin-bottom: 28px; }
    .lg-bob-svg { width: 140px; height: 140px; }
    .lg-left-copy { text-align: left; }
    .lg-left-copy h2 { font-size: 1.25rem; }
}

/* ══════════════════════════════════════════════════════════════════
   Leverandør-import (sup-* / suppliers-*)
   ══════════════════════════════════════════════════════════════════ */

.suppliers-layout {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 20px;
    height: 100%;
    align-items: start;
}

/* ── Left list ── */
.suppliers-list-col {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.suppliers-list-head {
    padding: 14px 16px 12px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.suppliers-list-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-soft);
}
.suppliers-list-title .material-symbols-outlined { font-size: 15px; }
.suppliers-list-count {
    background: rgba(123,53,216,0.1);
    color: var(--primary);
    border-radius: 12px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    line-height: 1.6;
}
.suppliers-list-body { padding: 6px 0; flex: 1; }
.suppliers-list-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 36px 20px;
    color: var(--text-soft);
    text-align: center;
    font-size: 13px;
}
.suppliers-list-empty .material-symbols-outlined { font-size: 30px; opacity: 0.35; }
.suppliers-list-empty p { margin: 0; line-height: 1.5; }
.suppliers-list-item {
    padding: 10px 16px;
    border-bottom: 1px solid var(--line);
    display: flex;
    align-items: center;
    gap: 11px;
    cursor: default;
    transition: background 0.12s;
}
.suppliers-list-item:hover { background: var(--glass); }
.suppliers-list-item:last-child { border-bottom: none; }
.suppliers-list-item-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(123,53,216,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.suppliers-list-item-avatar .material-symbols-outlined { font-size: 15px; color: var(--primary); }
.suppliers-list-item-info { flex: 1; min-width: 0; }
.suppliers-list-item-name { font-size: 13px; font-weight: 600; color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suppliers-list-item-date {
    font-size: 11px;
    color: var(--text-soft);
    margin-top: 2px;
    display: flex;
    align-items: center;
    gap: 3px;
}
.suppliers-list-item-date .material-symbols-outlined { font-size: 11px; }
.suppliers-list-footer {
    padding: 12px 16px;
    border-top: 1px solid var(--line);
    font-size: 11.5px;
    color: var(--text-soft);
    display: flex;
    align-items: flex-start;
    gap: 7px;
    line-height: 1.5;
}
.suppliers-list-footer .material-symbols-outlined { font-size: 14px; flex-shrink: 0; margin-top: 1px; }

/* ── Stepper ── */
.sup-stepper {
    display: flex;
    align-items: center;
    margin-bottom: 18px;
    padding: 0 2px;
}
.sup-step {
    display: flex;
    align-items: center;
    gap: 9px;
    flex-shrink: 0;
}
.sup-step-circle {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--glass);
    border: 2px solid var(--line);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--text-soft);
    transition: background 0.2s, border-color 0.2s, color 0.2s;
    flex-shrink: 0;
    position: relative;
}
.sup-step-label {
    font-size: 12.5px;
    font-weight: 500;
    color: var(--text-soft);
    transition: color 0.2s;
    white-space: nowrap;
}
.sup-step.is-active .sup-step-circle {
    background: var(--primary);
    border-color: var(--primary);
    color: #fff;
}
.sup-step.is-active .sup-step-label { color: var(--text); font-weight: 600; }
.sup-step.is-done .sup-step-circle {
    background: #34d399;
    border-color: #34d399;
    color: #fff;
}
.sup-step.is-done .sup-step-num { display: none; }
.sup-step.is-done .sup-step-circle::after { content: '✓'; font-size: 12px; font-weight: 700; }
.sup-step.is-done .sup-step-label { color: var(--text-soft); }
.sup-step-line {
    flex: 1;
    height: 2px;
    background: var(--line);
    margin: 0 10px;
    min-width: 16px;
    border-radius: 1px;
    transition: background 0.3s;
}
.sup-step-line.is-done { background: #34d399; }

/* ── Upload panel ── */
.suppliers-upload-panel {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px;
    transition: padding 0.2s, gap 0.2s;
}

/* Collapsed state — mini bar after analysis */
.suppliers-upload-panel.is-collapsed {
    padding: 12px 20px;
    gap: 0;
}
.suppliers-upload-panel.is-collapsed .sup-upload-full { display: none; }
.sup-upload-collapsed {
    display: none;
    align-items: center;
    gap: 10px;
}
.suppliers-upload-panel.is-collapsed .sup-upload-collapsed { display: flex; }
.sup-upload-collapsed-check { font-size: 18px; color: #34d399; flex-shrink: 0; }
.sup-upload-collapsed-label { font-size: 12.5px; color: var(--text-soft); white-space: nowrap; }
.sup-upload-collapsed-name { font-size: 13px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sup-upload-change-btn { margin-left: auto; font-size: 12.5px; padding: 5px 10px; flex-shrink: 0; }

.suppliers-upload-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}
.suppliers-upload-icon-wrap {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: rgba(123,53,216,0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 1px;
}
.suppliers-upload-icon-wrap .material-symbols-outlined { font-size: 22px; color: var(--primary); }
.suppliers-upload-head h2 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
    margin: 0 0 4px;
}
.suppliers-upload-head p {
    font-size: 13px;
    color: var(--text-soft);
    margin: 0;
    line-height: 1.5;
}

/* ── Drop zone ── */
.suppliers-drop-zone {
    border: 2px dashed var(--line);
    border-radius: var(--radius);
    padding: 36px 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
    background: rgba(123,53,216,0.02);
}
.suppliers-drop-zone:hover,
.suppliers-drop-zone.is-drag-over {
    border-color: var(--primary);
    background: rgba(123,53,216,0.05);
}
.sup-drop-icon { font-size: 38px; color: var(--primary); opacity: 0.55; }
.sup-drop-label { font-size: 14px; font-weight: 600; color: var(--text); margin: 0; }
.sup-drop-sub { font-size: 12px; color: var(--text-soft); margin: 0; }
.sup-drop-formats { font-size: 11px; color: var(--text-soft); margin: 4px 0 0; letter-spacing: 0.05em; }
.sup-browse-btn { cursor: pointer; }

/* ── File chosen ── */
.suppliers-file-chosen {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(123,53,216,0.06);
    border: 1px solid rgba(123,53,216,0.2);
    border-radius: var(--radius-control);
    padding: 10px 14px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--text);
}
.suppliers-file-chosen .material-symbols-outlined { color: var(--primary); font-size: 18px; }
.suppliers-file-clear {
    margin-left: auto;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--text-soft);
    display: flex;
    align-items: center;
    padding: 2px;
    border-radius: 4px;
    transition: color 0.15s, background 0.15s;
}
.suppliers-file-clear:hover { color: var(--text); background: var(--glass); }

.sup-analyze-btn { width: 100%; justify-content: center; padding: 13px; font-size: 15px; }

/* ── Mapping panel ── */
#sup-mapping-panel { display: flex; flex-direction: column; gap: 12px; }
#sup-mapping-panel[hidden] { display: none; }
.suppliers-mapping-head {
    padding: 18px 22px;
    margin-bottom: 0;
}
.sup-mapping-title-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}
.sup-mapping-title-row h2 { font-size: 1.1rem; font-weight: 700; margin: 0 0 4px; color: var(--text); }
.sup-mapping-sub { font-size: 13px; color: var(--text-soft); margin: 0; }

.sup-reused-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 14px;
    background: rgba(123,53,216,0.07);
    border: 1px solid rgba(123,53,216,0.18);
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 12.5px;
    color: var(--primary);
    font-weight: 500;
}
.sup-reused-badge .material-symbols-outlined { font-size: 15px; }

/* ── Mapping table ── */
.suppliers-mapping-table-wrap { overflow: auto; }
.suppliers-mapping-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
}
.suppliers-mapping-table th {
    padding: 10px 16px;
    text-align: left;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-soft);
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
    background: var(--glass);
}
.suppliers-mapping-table td {
    padding: 9px 16px;
    border-bottom: 1px solid var(--line);
    vertical-align: middle;
}
.suppliers-mapping-table tr:last-child td { border-bottom: none; }
.suppliers-mapping-table tbody tr.has-mapping { background: rgba(123,53,216,0.025); }
.suppliers-mapping-table tbody tr.has-mapping:hover { background: rgba(123,53,216,0.045); }
.suppliers-mapping-table tbody tr:not(.has-mapping):hover { background: var(--glass); }
.sup-col-name {
    font-weight: 600;
    color: var(--text);
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
}
.sup-col-sample {
    color: var(--text-soft);
    max-width: 380px;
    white-space: normal;
    overflow-wrap: anywhere;
    word-break: break-word;
    font-size: 12.5px;
}
.sup-col-map { width: 220px; }

.sup-field-select {
    width: 100%;
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: var(--radius-control);
    padding: 6px 10px;
    font-size: 13px;
    color: var(--text);
    font-family: inherit;
    cursor: pointer;
    outline: none;
    transition: border-color 0.15s;
}
.sup-field-select:focus { border-color: var(--primary); }
tr.has-mapping .sup-field-select { border-color: rgba(123,53,216,0.3); }

/* ── Import footer ── */
.suppliers-import-footer { padding: 16px 20px; }
.sup-import-footer-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}
.sup-import-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12.5px;
    color: var(--text-soft);
}
.sup-import-info .material-symbols-outlined { font-size: 16px; color: var(--primary); flex-shrink: 0; }

/* ── Loading panel ── */
.suppliers-loading-panel {
    padding: 48px 40px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    text-align: center;
}
.sup-loading-header { text-align: center; }
.sup-loading-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text);
}
.sup-loading-spin {
    font-size: 22px;
    color: var(--primary);
    display: inline-block;
    animation: spin 1.4s linear infinite;
}
.sup-loading-sub {
    font-size: 13px;
    color: var(--text-soft);
    margin: 6px 0 0;
    font-style: italic;
}
.sup-loading-steps {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
    max-width: 420px;
    text-align: left;
}
.sup-lstep {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-radius: 10px;
    background: var(--glass);
    border: 1px solid var(--line);
    transition: background 0.2s, border-color 0.2s, opacity 0.2s;
    opacity: 0.45;
}
.sup-lstep.is-active {
    opacity: 1;
    border-color: rgba(123,53,216,0.3);
    background: rgba(123,53,216,0.06);
}
.sup-lstep.is-done {
    opacity: 0.75;
    border-color: rgba(52,211,153,0.25);
    background: rgba(52,211,153,0.05);
}
.sup-lstep-icon .material-symbols-outlined {
    font-size: 17px;
    color: var(--text-soft);
    display: block;
    transition: color 0.2s;
}
.sup-lstep.is-active .sup-lstep-icon .material-symbols-outlined { color: var(--primary); }
.sup-lstep.is-done .sup-lstep-icon .material-symbols-outlined { color: #34d399; }
.sup-lstep-label {
    font-size: 13.5px;
    color: var(--text-soft);
    font-weight: 500;
    transition: color 0.2s;
}
.sup-lstep.is-active .sup-lstep-label { color: var(--text); font-weight: 600; }
.sup-lstep.is-done .sup-lstep-label { color: var(--text); }
.sup-loading-progress-wrap { width: 100%; max-width: 420px; }
.sup-loading-bar {
    height: 4px;
    background: var(--line);
    border-radius: 2px;
    overflow: hidden;
}
.sup-loading-fill {
    height: 100%;
    background: var(--primary);
    border-radius: 2px;
    width: 0%;
    transition: width 0.6s ease;
}

/* ── Done panel ── */
.suppliers-done-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 52px 32px;
    text-align: center;
}
.sup-done-icon { font-size: 52px; color: #34d399; }
.suppliers-done-panel h2 { font-size: 1.3rem; font-weight: 700; margin: 0; color: var(--text); }
.suppliers-done-panel > p { font-size: 13.5px; color: var(--text-soft); margin: 0; }
.sup-done-stats { display: flex; gap: 12px; justify-content: center; }
.sup-done-stat {
    background: rgba(52,211,153,0.08);
    border: 1px solid rgba(52,211,153,0.22);
    border-radius: 12px;
    padding: 16px 28px;
    text-align: center;
    min-width: 100px;
}
.sup-done-stat.is-skipped {
    background: rgba(251,191,36,0.07);
    border-color: rgba(251,191,36,0.22);
}
.sup-done-stat-num {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text);
    line-height: 1;
}
.sup-done-stat-label {
    display: block;
    font-size: 11.5px;
    color: var(--text-soft);
    margin-top: 5px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.sup-done-actions { display: flex; gap: 12px; margin-top: 6px; }

/* ── Error ── */
.suppliers-error {
    background: rgba(220,38,38,0.06);
    border: 1px solid rgba(220,38,38,0.2);
    border-radius: 8px;
    padding: 10px 14px;
    font-size: 13px;
    color: #dc2626;
    margin-bottom: 12px;
}

/* ── Spin animation (reuse) ── */
@keyframes spin { to { transform: rotate(360deg); } }
.spin { display: inline-block; animation: spin 0.8s linear infinite; }

/* ── Ensure flex panels respect [hidden] attribute ── */
.suppliers-loading-panel[hidden],
.suppliers-done-panel[hidden],
.suppliers-file-chosen[hidden] { display: none; }

@media (max-width: 860px) {
    .suppliers-layout { grid-template-columns: 1fr; }
    .suppliers-list-col { display: none; }
}

/* ── Settings shell (inbox-style) ─────────────────────────────────────── */
.console-main:has(.settings-shell) {
    overflow: hidden;
    min-height: 100dvh;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    padding: 16px 20px 16px;
    gap: 0;
}

.console-main:has(.settings-shell) .page-heading,
.console-main:has(.settings-shell) .console-stats {
    display: none;
}

.console-main:has(.settings-shell) .topbar {
    margin-bottom: 12px;
    flex-shrink: 0;
}

.settings-shell {
    flex: 1;
    min-height: 0;
    display: flex;
    border-radius: var(--radius-panel);
    border: 1px solid rgba(118, 134, 156, 0.2);
    overflow: hidden;
    box-shadow: 0 2px 12px rgba(16, 24, 40, 0.06);
}

.settings-nav-col {
    width: 280px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-right: 1px solid rgba(118, 134, 156, 0.18);
    background: rgba(246, 249, 253, 0.97);
}

.settings-nav-head {
    padding: 18px 16px 14px;
    border-bottom: 1px solid rgba(118, 134, 156, 0.18);
}

.settings-nav-kicker {
    display: inline-block;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 8px;
}

.settings-nav-head h1 {
    margin: 0 0 6px;
    font-family: 'Manrope', sans-serif;
    font-size: 1.05rem;
    letter-spacing: -0.02em;
}

.settings-nav-head p {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.settings-nav-list {
    display: grid;
    gap: 4px;
    padding: 10px 8px 14px;
}

.settings-nav-item {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 38px;
    padding: 0 10px;
    border-radius: 10px;
    color: var(--text-muted);
    font-size: 0.84rem;
    font-weight: 500;
    border: 1px solid transparent;
}

.settings-nav-item .material-symbols-outlined { font-size: 1rem; }

.settings-nav-item:hover {
    background: rgba(124, 92, 246, 0.06);
    color: var(--text);
}

.settings-nav-item.is-active {
    background: rgba(124, 92, 246, 0.10);
    border-color: rgba(124, 92, 246, 0.2);
    color: var(--primary);
}

.settings-nav-foot {
    margin-top: auto;
    border-top: 1px solid rgba(118, 134, 156, 0.18);
    padding: 10px;
    display: grid;
    gap: 8px;
}

.settings-mini-stat {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(118, 134, 156, 0.15);
    border-radius: 10px;
}

.settings-mini-stat .material-symbols-outlined {
    font-size: 1rem;
    color: var(--text-muted);
}

.settings-mini-stat div {
    display: grid;
    gap: 2px;
}

.settings-mini-stat strong {
    font-size: 0.77rem;
    color: var(--text);
}

.settings-mini-stat span {
    font-size: 0.73rem;
    color: var(--text-muted);
}

.settings-content-col {
    flex: 1;
    min-width: 0;
    overflow-y: auto;
    background: rgba(255, 255, 255, 0.98);
}

.settings-pane {
    display: none;
    padding: 22px 24px 30px;
    flex-direction: column;
    gap: 14px;
}

.settings-pane.is-visible {
    display: flex;
}

.settings-pane-head h2 {
    margin: 0 0 4px;
    font-family: 'Manrope', sans-serif;
    font-size: 1.08rem;
    letter-spacing: -0.02em;
}

.settings-pane-head p {
    margin: 0;
    font-size: 0.84rem;
    color: var(--text-muted);
}

.settings-budget-card {
    border: 1px solid var(--line);
    border-radius: 14px;
    padding: 16px;
    background: rgba(124, 92, 246, 0.04);
}

.settings-budget-card.is-warning {
    background: rgba(251, 191, 36, 0.08);
    border-color: rgba(217, 119, 6, 0.24);
}

.settings-budget-card.is-over {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.24);
}

.settings-budget-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}

.settings-budget-label {
    display: block;
    margin-bottom: 4px;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.settings-budget-top strong {
    font-size: 1.24rem;
    letter-spacing: -0.02em;
}

.settings-budget-meta {
    text-align: right;
    display: grid;
}

.settings-budget-meta span {
    font-size: 1.06rem;
    font-weight: 700;
}

.settings-budget-meta small {
    font-size: 0.72rem;
    color: var(--text-muted);
}

.settings-progress-track {
    height: 8px;
    width: 100%;
    background: rgba(118, 134, 156, 0.2);
    border-radius: 999px;
    overflow: hidden;
}

.settings-progress-track span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #7B35D8, #2563eb);
}

.settings-budget-grid {
    margin-top: 10px;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 10px;
}

.settings-budget-grid div {
    background: rgba(255,255,255,0.72);
    border: 1px solid rgba(118, 134, 156, 0.16);
    border-radius: 10px;
    padding: 9px 10px;
    display: grid;
    gap: 2px;
}

.settings-budget-grid span {
    font-size: 0.7rem;
    color: var(--text-muted);
}

.settings-budget-grid strong {
    font-size: 0.88rem;
    color: var(--text);
}

.settings-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
}

.settings-kpi-card {
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: 14px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settings-kpi-icon {
    font-size: 20px;
    color: var(--primary);
}

.settings-kpi-value {
    font-size: 1.2rem;
    font-weight: 700;
    line-height: 1.1;
}

.settings-kpi-label {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.settings-note-card {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(118, 134, 156, 0.2);
    background: rgba(255,255,255,0.72);
}

.settings-note-card .material-symbols-outlined {
    font-size: 1rem;
    margin-top: 2px;
    color: var(--text-muted);
}

.settings-note-card p {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--text-muted);
}

.settings-section {
    padding: 16px 16px 14px;
}

.settings-section h3 {
    margin: 0 0 12px;
    font-size: 0.9rem;
    letter-spacing: -0.01em;
}

.settings-chart-wrap {
    position: relative;
    height: 190px;
}

.settings-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.82rem;
}

.settings-table th {
    text-align: left;
    padding: 7px 9px;
    color: var(--text-muted);
    font-weight: 600;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.settings-table th.num,
.settings-table td.num {
    text-align: right;
}

.settings-table td {
    padding: 8px 9px;
    border-bottom: 1px solid var(--line-subtle);
    color: var(--text);
    vertical-align: middle;
}

.settings-table tbody tr:last-child td {
    border-bottom: none;
}

.settings-model-badge {
    display: inline-block;
    background: rgba(99, 91, 255, 0.08);
    color: #635bff;
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.76rem;
    font-weight: 600;
}

.settings-model-badge--sm {
    font-size: 0.7rem;
    padding: 1px 6px;
    color: var(--text-muted);
    background: rgba(0,0,0,0.04);
}

.settings-table-footnote {
    margin: 10px 2px 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

/* ── Settings: Plan tab ── */
.splan-current {
    padding: 20px;
    margin-bottom: 20px;
}
.splan-current-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 20px;
}
.splan-current-identity { flex: 1; min-width: 0; }
.splan-badge {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--primary);
    background: rgba(99, 91, 255, 0.1);
    padding: 2px 8px;
    border-radius: 20px;
    margin-bottom: 8px;
}
.splan-name-row {
    display: flex;
    align-items: baseline;
    gap: 14px;
    flex-wrap: wrap;
}
.splan-name {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: var(--text);
}
.splan-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary);
}
.splan-price small {
    font-size: 0.78rem;
    font-weight: 400;
    color: var(--text-muted);
    margin-left: 2px;
}
.splan-tagline {
    margin: 4px 0 0;
    font-size: 0.84rem;
    color: var(--text-muted);
}
.splan-upgrade-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    background: var(--primary);
    color: #fff;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s;
}
.splan-upgrade-btn:hover { opacity: 0.85; }
.splan-upgrade-btn .material-symbols-outlined { font-size: 15px; }

/* Token bar */
.splan-token-section {
    background: rgba(99, 91, 255, 0.04);
    border: 1px solid rgba(99, 91, 255, 0.12);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 16px;
}
.splan-token-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.splan-token-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-muted);
}
.splan-token-label .material-symbols-outlined { font-size: 15px; }
.splan-token-count {
    font-size: 0.88rem;
    font-weight: 700;
    color: var(--text);
}
.splan-token-count em { font-style: normal; font-weight: 400; color: var(--text-muted); }
.splan-token-bar {
    height: 8px;
    background: rgba(118, 134, 156, 0.15);
    border-radius: 99px;
    overflow: hidden;
    margin-bottom: 8px;
}
.splan-token-bar span {
    display: block;
    height: 100%;
    border-radius: 99px;
    transition: width 0.4s ease;
}
.splan-token-bar.is-ok span    { background: var(--primary); }
.splan-token-bar.is-warning span { background: #f59e0b; }
.splan-token-bar.is-over span  { background: #ef4444; }
.splan-token-meta {
    margin: 0;
    font-size: 0.75rem;
    color: var(--text-muted);
}

/* Plan features list */
.splan-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
}
.splan-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.83rem;
    color: var(--text-muted);
}
.splan-features li .material-symbols-outlined {
    font-size: 15px;
    color: var(--primary);
}
.splan-feat-no { opacity: 0.5; }
.splan-feat-no .material-symbols-outlined { color: #ef4444 !important; }

/* Upgrade section */
.splan-upgrade-section {
    margin-top: 28px;
}
.splan-upgrade-head {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 16px;
}
.splan-upgrade-head > .material-symbols-outlined {
    font-size: 20px;
    color: var(--primary);
    margin-top: 2px;
    flex-shrink: 0;
}
.splan-upgrade-head h3 { margin: 0 0 2px; font-size: 1rem; }
.splan-upgrade-head p  { margin: 0; font-size: 0.83rem; color: var(--text-muted); }
.splan-upgrade-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 12px;
    margin-bottom: 14px;
}
.splan-upgrade-card {
    padding: 16px;
    position: relative;
    border: 1.5px solid rgba(118, 134, 156, 0.18);
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.splan-upgrade-featured {
    border-color: var(--primary);
    background: rgba(99, 91, 255, 0.03);
}
.splan-upgrade-star {
    position: absolute;
    top: -11px;
    left: 16px;
    background: #facc15;
    color: #78350f;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 2px 10px;
    border-radius: 20px;
}
.splan-upgrade-top {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}
.splan-upgrade-top h4 { margin: 0 0 2px; font-size: 0.95rem; }
.splan-upgrade-top p  { margin: 0; font-size: 0.78rem; color: var(--text-muted); }
.splan-upgrade-price {
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--primary);
    white-space: nowrap;
    text-align: right;
}
.splan-upgrade-price small { font-size: 0.72rem; font-weight: 400; color: var(--text-muted); }
.splan-upgrade-feats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.splan-upgrade-feats li {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.81rem;
    color: var(--text-muted);
}
.splan-upgrade-feats li .material-symbols-outlined { font-size: 14px; color: var(--primary); }
.splan-upgrade-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 9px;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none;
    background: rgba(118, 134, 156, 0.1);
    color: var(--text);
    transition: background 0.15s;
}
.splan-upgrade-action:hover { background: rgba(118, 134, 156, 0.18); }
.splan-upgrade-action .material-symbols-outlined { font-size: 14px; }
.splan-upgrade-action--primary {
    background: var(--primary);
    color: #fff;
}
.splan-upgrade-action--primary:hover { background: #5247e0; }
.splan-upgrade-note {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-muted);
    margin: 0;
}
.splan-upgrade-note .material-symbols-outlined { font-size: 14px; }
.splan-top-note {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px;
    margin-top: 16px;
}
.splan-top-note .material-symbols-outlined { font-size: 22px; color: #f59e0b; flex-shrink: 0; }
.splan-top-note strong { display: block; margin-bottom: 2px; font-size: 0.9rem; }
.splan-top-note p { margin: 0; font-size: 0.82rem; color: var(--text-muted); }
.splan-top-note a { color: var(--primary); }

.settings-plan-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.settings-plan-card {
    padding: 16px 16px 12px;
}

.settings-plan-card h3 {
    margin: 0 0 12px;
    font-size: 0.94rem;
}

.settings-plan-card ul {
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
}

.settings-plan-card li {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    border-bottom: 1px dashed rgba(118, 134, 156, 0.24);
    padding-bottom: 8px;
}

.settings-plan-card li:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.settings-plan-card li span {
    font-size: 0.77rem;
    color: var(--text-muted);
}

.settings-plan-card li strong {
    font-size: 0.8rem;
    color: var(--text);
    text-align: right;
}

.settings-empty-state {
    margin: 28px auto;
    text-align: center;
    color: var(--text-muted);
    display: grid;
    gap: 8px;
}

.settings-empty-state .material-symbols-outlined {
    font-size: 2rem;
    opacity: 0.45;
}

.settings-empty-state p {
    margin: 0;
    font-size: 0.84rem;
}

@media (max-width: 1024px) {
    .settings-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-budget-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 860px) {
    .settings-shell {
        flex-direction: column;
    }

    .settings-nav-col {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(118, 134, 156, 0.18);
    }

    .settings-nav-list {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-nav-foot {
        margin-top: 0;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .settings-plan-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    .settings-nav-list,
    .settings-nav-foot,
    .settings-kpi-grid,
    .settings-budget-grid {
        grid-template-columns: 1fr;
    }

    .settings-pane {
        padding: 16px 14px 20px;
    }
}

/* ═══════════════════════════════════════════════════════════
   FEATURE SUBPAGES  (lp-fp-* + lp-mock-* + nav dropdown)
   ═══════════════════════════════════════════════════════════ */

/* ── Nav dropdown ────────────────────────────────────────── */
.lp-nav-dropdown {
    position: relative;
}
.lp-nav-dropdown-toggle {
    font-size: 14px;
    font-weight: 500;
    color: var(--lp-muted);
    text-decoration: none;
    cursor: pointer;
    transition: color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.lp-nav-dropdown-toggle:hover { color: var(--lp-purple); }
.lp-nav-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    /* transparent top padding bridges the gap — hover isn't lost between toggle and menu */
    padding-top: 8px;
    min-width: 230px;
    z-index: 200;
}
.lp-nav-dropdown-menu-inner {
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10);
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.lp-nav-dropdown:hover .lp-nav-dropdown-menu { display: block; }
.lp-nav-dropdown-menu a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 12px;
    border-radius: 9px;
    font-size: 13.5px;
    font-weight: 500;
    color: var(--lp-text);
    transition: background 0.12s;
}
.lp-nav-dropdown-menu a:hover { background: rgba(123,53,216,0.06); color: var(--lp-purple); }
.lp-nav-dropdown-menu .material-symbols-outlined { font-size: 16px; color: var(--lp-purple); }
.lp-nav-dropdown-divider {
    height: 1px;
    background: var(--lp-border);
    margin: 4px 8px;
}

/* ── Breadcrumb ──────────────────────────────────────────── */
.lp-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 14px 48px;
    font-size: 12.5px;
    color: var(--lp-muted);
    border-bottom: 1px solid var(--lp-border);
    background: rgba(250,249,255,0.6);
}
.lp-breadcrumb a { color: var(--lp-muted); text-decoration: none; transition: color 0.15s; }
.lp-breadcrumb a:hover { color: var(--lp-purple); }
.lp-breadcrumb span:last-child { color: var(--lp-text); font-weight: 500; }
.lp-breadcrumb .material-symbols-outlined { font-size: 14px; }

/* ── Feature hero ────────────────────────────────────────── */
.lp-fp-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
    padding: 72px 48px 64px;
    max-width: 1200px;
    margin: 0 auto;
}
.lp-fp-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--fp-bg, rgba(123,53,216,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.lp-fp-icon .material-symbols-outlined {
    font-size: 28px;
    color: var(--fp-color, var(--lp-purple));
}
.lp-fp-hero-text h1 {
    font-family: 'Manrope', sans-serif;
    font-size: clamp(1.9rem, 3.8vw, 3rem);
    font-weight: 800;
    line-height: 1.18;
    margin: 0 0 18px;
    color: var(--lp-navy);
}
.lp-fp-sub {
    font-size: 16px;
    color: var(--lp-muted);
    line-height: 1.7;
    margin: 0 0 32px;
    max-width: 460px;
}
.lp-fp-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.lp-fp-hero-visual { display: flex; justify-content: flex-end; align-items: flex-start; }

/* ── Benefits section ────────────────────────────────────── */
.lp-fp-benefits {
    background: #fff;
    padding: 80px 48px;
}
.lp-fp-benefits-grid {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}
.lp-fp-benefit {
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: 16px;
    padding: 28px 24px;
    transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s;
}
.lp-fp-benefit:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px rgba(123,53,216,0.09);
    border-color: rgba(123,53,216,0.22);
}
.lp-fp-benefit-icon {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--fp-bg, rgba(123,53,216,0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 14px;
}
.lp-fp-benefit-icon .material-symbols-outlined {
    font-size: 20px;
    color: var(--fp-color, var(--lp-purple));
}
.lp-fp-benefit h3 {
    font-size: 14.5px;
    font-weight: 700;
    color: var(--lp-navy);
    margin: 0 0 7px;
}
.lp-fp-benefit p {
    font-size: 13px;
    color: var(--lp-muted);
    line-height: 1.6;
    margin: 0;
}

/* ── Other features grid ─────────────────────────────────── */
.lp-fp-others {
    max-width: 1200px;
    margin: 0 auto;
    padding: 80px 48px;
}
.lp-fp-others-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 0;
}
.lp-fp-other-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: var(--lp-card);
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    padding: 18px 20px;
    text-decoration: none;
    color: var(--lp-text);
    transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
.lp-fp-other-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 24px rgba(123,53,216,0.09);
    border-color: rgba(123,53,216,0.22);
}
.lp-fp-other-card .lp-feature-icon { flex-shrink: 0; margin-bottom: 0; }
.lp-fp-other-card h3 {
    font-size: 13.5px;
    font-weight: 700;
    color: var(--lp-navy);
    margin: 0 0 2px;
}
.lp-fp-other-card p {
    font-size: 11.5px;
    color: var(--lp-muted);
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 600;
}
.lp-fp-other-arrow {
    margin-left: auto;
    font-size: 18px;
    color: var(--lp-muted);
    flex-shrink: 0;
    transition: color 0.15s, transform 0.15s;
}
.lp-fp-other-card:hover .lp-fp-other-arrow { color: var(--lp-purple); transform: translateX(3px); }

/* ══════════════════════════════════════════════════════════
   MOCK UIs — shared base
   ══════════════════════════════════════════════════════════ */
.lp-mock {
    width: 100%;
    max-width: 500px;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 18px;
    box-shadow: 0 16px 48px rgba(0,0,0,0.10), 0 0 0 1px rgba(123,53,216,0.06);
    overflow: hidden;
    font-size: 13px;
    color: var(--lp-text);
}
.lp-mock-topbar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 16px;
    background: #f7f5ff;
    border-bottom: 1px solid var(--lp-border);
}
.lp-mock-topbar-label {
    margin-left: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--lp-muted);
    display: inline-flex;
    align-items: center;
    gap: 5px;
}
.lp-mock-topbar-label .material-symbols-outlined { font-size: 14px; color: var(--lp-purple); }
.lp-mock-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.lp-mock-dot-r { background: #ff5f57; }
.lp-mock-dot-y { background: #ffbd2e; }
.lp-mock-dot-g { background: #28c840; }
.lp-mock-body { padding: 16px; display: flex; flex-direction: column; gap: 10px; }

/* ── Autopilot mock ──────────────────────────────────────── */
.lp-mock-job {
    display: flex;
    align-items: center;
    gap: 12px;
    background: #faf9ff;
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    padding: 12px 14px;
}
.lp-mock-job-icon .material-symbols-outlined { font-size: 20px; color: var(--lp-purple); }
.lp-mock-job-running .lp-mock-job-icon .material-symbols-outlined {
    color: var(--lp-purple);
    animation: lpSpin 1.4s linear infinite;
}
.lp-mock-job-done .lp-mock-job-icon .material-symbols-outlined { color: #059669; }
.lp-mock-job-scheduled .lp-mock-job-icon .material-symbols-outlined { color: #d97706; }
@keyframes lpSpin { to { transform: rotate(360deg); } }
.lp-mock-job-info { flex: 1; min-width: 0; }
.lp-mock-job-name { display: block; font-weight: 600; font-size: 12.5px; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mock-progress { height: 4px; background: var(--lp-border); border-radius: 99px; overflow: hidden; margin-bottom: 5px; }
.lp-mock-progress-bar { height: 100%; border-radius: 99px; transition: width 0.4s ease; }
.lp-mock-job-meta { font-size: 11px; color: var(--lp-muted); }
.lp-mock-badge {
    padding: 3px 9px;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}
.lp-mock-badge-running { background: rgba(123,53,216,0.10); color: var(--lp-purple); }
.lp-mock-badge-done    { background: rgba(5,150,105,0.10);  color: #059669; }
.lp-mock-badge-sched   { background: rgba(217,119,6,0.10);  color: #d97706; }
.lp-mock-stat-row { display: flex; gap: 8px; margin-top: 4px; }
.lp-mock-stat {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: #faf9ff;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    padding: 10px 6px;
    text-align: center;
}
.lp-mock-stat .material-symbols-outlined { font-size: 16px; color: var(--lp-purple); }
.lp-mock-stat strong { font-size: 15px; font-weight: 800; color: var(--lp-navy); }
.lp-mock-stat span { font-size: 10.5px; color: var(--lp-muted); }

/* ── Flows mock ──────────────────────────────────────────── */
.lp-mock-body-flows { padding: 0; gap: 0; }
.lp-mock-canvas {
    position: relative;
    height: 240px;
    padding: 0;
    overflow: hidden;
}
.lp-mock-node {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 1.5px solid var(--lp-border);
    border-radius: 11px;
    padding: 10px 13px;
    font-size: 12px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.06);
    white-space: nowrap;
}
.lp-mock-node strong { display: block; font-weight: 700; font-size: 12px; color: var(--lp-navy); line-height: 1.2; }
.lp-mock-node span { font-size: 11px; color: var(--lp-muted); line-height: 1; }
.lp-mock-node .material-symbols-outlined { font-size: 18px; flex-shrink: 0; }
.lp-mock-node-trigger { border-color: rgba(5,150,105,0.35); }
.lp-mock-node-trigger .material-symbols-outlined { color: #059669; }
.lp-mock-node-action { border-color: rgba(123,53,216,0.30); }
.lp-mock-node-action .material-symbols-outlined { color: var(--lp-purple); }
.lp-mock-node-done { border-color: rgba(37,99,235,0.30); }
.lp-mock-node-done .material-symbols-outlined { color: #2563eb; }
.lp-mock-arrow { position: absolute; overflow: visible; }
.lp-mock-flows-toolbar {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--lp-border);
    background: #faf9ff;
}
.lp-mock-flows-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    background: #fff;
    border: 1px solid var(--lp-border);
    color: var(--lp-muted);
    cursor: pointer;
}
.lp-mock-flows-btn .material-symbols-outlined { font-size: 14px; }
.lp-mock-flows-btn-run { background: var(--lp-purple); color: #fff; border-color: var(--lp-purple); }

/* ── Creator Studio mock ─────────────────────────────────── */
.lp-mock-body-studio { flex-direction: row; padding: 0; gap: 0; }
.lp-mock-studio-sidebar {
    width: 138px;
    flex-shrink: 0;
    border-right: 1px solid var(--lp-border);
    display: flex;
    flex-direction: column;
    background: #faf9ff;
    overflow: hidden;
}
.lp-mock-studio-list-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 10px 8px;
    border-bottom: 1px solid var(--lp-border);
}
.lp-mock-studio-list-title { font-size: 11px; font-weight: 700; color: var(--lp-navy); }
.lp-mock-studio-new-btn {
    display: inline-flex;
    align-items: center;
    background: var(--lp-purple);
    color: #fff;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 10px;
    font-weight: 700;
    gap: 2px;
    cursor: pointer;
}
.lp-mock-studio-new-btn .material-symbols-outlined { font-size: 12px; }
.lp-mock-studio-proj {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--lp-border);
    cursor: pointer;
}
.lp-mock-studio-proj-active { background: rgba(123,53,216,0.06); }
.lp-mock-studio-proj-thumb {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background: #f3eeff;
    border: 1px solid var(--lp-border);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--lp-purple);
}
.lp-mock-studio-proj-thumb .material-symbols-outlined { font-size: 14px; }
.lp-mock-studio-proj-body { flex: 1; min-width: 0; }
.lp-mock-studio-proj-name { display: block; font-size: 10.5px; font-weight: 600; color: var(--lp-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mock-studio-proj-meta { display: block; font-size: 10px; color: var(--lp-muted); }
.lp-mock-studio-proj-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--lp-border);
    flex-shrink: 0;
}
.lp-mock-studio-proj-dot-done { background: #059669; }
.lp-mock-studio-canvas {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    overflow: hidden;
}
.lp-mock-studio-det-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
}
.lp-mock-studio-det-name { font-size: 12px; font-weight: 700; color: var(--lp-navy); }
.lp-mock-studio-det-pill {
    font-size: 10px;
    font-weight: 700;
    background: rgba(5,150,105,0.10);
    color: #059669;
    border-radius: 99px;
    padding: 2px 8px;
    flex-shrink: 0;
}
.lp-mock-studio-det-images { display: flex; gap: 8px; flex: 1; }
.lp-mock-studio-det-img { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.lp-mock-studio-det-label { font-size: 10px; color: var(--lp-muted); font-weight: 600; }
.lp-mock-studio-det-frame {
    flex: 1;
    background: #f3eeff;
    border: 1px solid var(--lp-border);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--lp-purple);
    min-height: 80px;
}
.lp-mock-studio-det-frame .material-symbols-outlined { font-size: 26px; opacity: 0.4; }
.lp-mock-studio-det-frame-out { background: #f0ecff; border-color: rgba(123,53,216,0.25); }
.lp-mock-studio-det-frame-out .material-symbols-outlined { opacity: 0.65; }
.lp-mock-studio-dl-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--lp-purple);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 7px 12px;
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    align-self: flex-start;
}
.lp-mock-studio-dl-btn .material-symbols-outlined { font-size: 14px; }

/* ── Inbox mock ──────────────────────────────────────────── */
.lp-mock-unread-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--lp-purple);
    color: #fff;
    border-radius: 99px;
    font-size: 10px;
    font-weight: 700;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    margin-left: 4px;
}
.lp-mock-body-inbox { flex-direction: row; padding: 0; gap: 0; }
.lp-mock-inbox-col {
    width: 158px;
    flex-shrink: 0;
    border-right: 1px solid var(--lp-border);
    display: flex;
    flex-direction: column;
    background: #faf9ff;
    overflow: hidden;
}
.lp-mock-inbox-tabs2 { display: flex; border-bottom: 1px solid var(--lp-border); }
.lp-mock-inbox-tab2 {
    flex: 1;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 7px 3px;
    color: var(--lp-muted);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3px;
}
.lp-mock-inbox-tab2-active { color: var(--lp-purple); border-bottom: 2px solid var(--lp-purple); }
.lp-mock-inbox-tab2-count {
    background: rgba(123,53,216,0.1);
    color: var(--lp-purple);
    border-radius: 99px;
    font-size: 8.5px;
    font-weight: 700;
    min-width: 15px;
    height: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 3px;
}
.lp-mock-inbox-row2 {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 9px;
    border-bottom: 1px solid var(--lp-border);
    cursor: pointer;
    position: relative;
    background: none;
    border-left: none;
    border-right: none;
    border-top: none;
    text-align: left;
    width: 100%;
}
.lp-mock-inbox-row2-active { background: rgba(123,53,216,0.05); }
.lp-mock-inbox-row2-read { opacity: 0.6; }
.lp-mock-inbox-udot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--lp-purple);
    flex-shrink: 0;
    margin-top: 5px;
}
.lp-mock-inbox-av {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.lp-mock-inbox-av .material-symbols-outlined { font-size: 13px; }
.lp-mock-inbox-av-text  { background: rgba(37,99,235,0.10);  color: #2563eb; }
.lp-mock-inbox-av-trans { background: rgba(8,145,178,0.10);  color: #0891b2; }
.lp-mock-inbox-av-img   { background: rgba(124,58,237,0.10); color: #7c3aed; }
.lp-mock-inbox-rbody { flex: 1; min-width: 0; }
.lp-mock-inbox-rtitle { display: block; font-size: 10.5px; font-weight: 700; color: var(--lp-navy); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lp-mock-inbox-rsnip  { display: block; font-size: 10px; color: var(--lp-muted); }
.lp-mock-inbox-rmeta  { display: block; font-size: 9.5px; color: var(--lp-muted); }
.lp-mock-inbox-pill2 {
    font-size: 8.5px;
    font-weight: 700;
    background: var(--lp-purple);
    color: #fff;
    border-radius: 99px;
    padding: 2px 5px;
    flex-shrink: 0;
    align-self: center;
}
.lp-mock-inbox-detail2 {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 12px;
    overflow: hidden;
}
.lp-mock-inbox-det-head { display: flex; align-items: flex-start; gap: 8px; }
.lp-mock-inbox-det-title { font-size: 12px; font-weight: 700; color: var(--lp-navy); line-height: 1.3; }
.lp-mock-inbox-det-msg { font-size: 11px; color: var(--lp-muted); line-height: 1.5; margin: 0; }
.lp-mock-inbox-det-chips { display: flex; gap: 5px; flex-wrap: wrap; }
.lp-mock-inbox-det-chip {
    font-size: 10.5px;
    font-weight: 600;
    background: #f3eeff;
    color: var(--lp-purple);
    border-radius: 6px;
    padding: 3px 8px;
}
.lp-mock-inbox-det-chip-flow { background: rgba(5,150,105,0.09); color: #059669; }

/* ── Connect mock (Shopify / Shopware) ───────────────────── */
.lp-mock-connect-card {
    background: #faf9ff;
    border: 1px solid var(--lp-border);
    border-radius: 14px;
    padding: 18px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.lp-mock-connect-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 15px;
    font-weight: 800;
    color: var(--lp-navy);
}
.lp-mock-connect-field { display: flex; flex-direction: column; gap: 4px; }
.lp-mock-connect-field label { font-size: 11px; font-weight: 700; color: var(--lp-muted); text-transform: uppercase; letter-spacing: 0.06em; }
.lp-mock-connect-input {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--lp-border);
    border-radius: 9px;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--lp-navy);
    font-weight: 500;
}
.lp-mock-connect-input span { color: var(--lp-muted); font-weight: 400; }
.lp-mock-connect-input-secret { letter-spacing: 0.08em; color: var(--lp-muted); }
.lp-mock-connect-oauth {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    background: #059669;
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.lp-mock-connect-oauth .material-symbols-outlined { font-size: 15px; }
.lp-mock-connect-status {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
    border-radius: 9px;
}
.lp-mock-connect-status .material-symbols-outlined { font-size: 15px; }
.lp-mock-connect-status-ok {
    background: rgba(5,150,105,0.10);
    color: #059669;
    border: 1px solid rgba(5,150,105,0.20);
}
.lp-mock-connect-langs {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.lp-mock-connect-lang {
    font-size: 11px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 99px;
    background: rgba(123,53,216,0.08);
    color: var(--lp-purple);
    border: 1px solid rgba(123,53,216,0.16);
}
.lp-mock-connect-lang-source { background: var(--lp-purple); color: #fff; border-color: var(--lp-purple); }
.lp-mock-connect-import {
    display: flex;
    align-items: center;
    gap: 10px;
}
.lp-mock-connect-import-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--lp-purple);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 9px 14px;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
}
.lp-mock-connect-import-btn .material-symbols-outlined { font-size: 15px; }
.lp-mock-connect-import-hint { font-size: 11.5px; color: var(--lp-muted); }

/* ── Supplier import mock ────────────────────────────────── */
.lp-mock-supplier-upload {
    display: flex;
    align-items: center;
    gap: 10px;
    background: #faf9ff;
    border: 1px dashed rgba(123,53,216,0.25);
    border-radius: 12px;
    padding: 14px 16px;
}
.lp-mock-supplier-upload-icon { font-size: 24px; color: var(--lp-purple); }
.lp-mock-supplier-upload strong { font-size: 13px; color: var(--lp-navy); }
.lp-mock-supplier-upload-meta { font-size: 11px; color: var(--lp-muted); margin-left: auto; }
.lp-mock-supplier-mapping {
    background: #faf9ff;
    border: 1px solid var(--lp-border);
    border-radius: 12px;
    overflow: hidden;
}
.lp-mock-supplier-map-header,
.lp-mock-supplier-map-row {
    display: grid;
    grid-template-columns: 1fr 18px 1fr;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    font-size: 11.5px;
}
.lp-mock-supplier-map-header {
    background: #f0ecff;
    font-size: 10.5px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--lp-muted);
}
.lp-mock-supplier-map-row { border-top: 1px solid var(--lp-border); }
.lp-mock-supplier-map-row .material-symbols-outlined { font-size: 14px; justify-self: center; }
.lp-mock-supplier-col { font-family: monospace; font-size: 11.5px; color: var(--lp-navy); }
.lp-mock-supplier-field { font-weight: 600; color: var(--lp-navy); }
.lp-mock-supplier-conf {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 7px;
    border-radius: 99px;
    text-align: center;
}
.lp-mock-supplier-conf-hi  { background: rgba(5,150,105,0.10); color: #059669; }
.lp-mock-supplier-conf-med { background: rgba(217,119,6,0.10);  color: #d97706; }
.lp-mock-supplier-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}
.lp-mock-supplier-btn-import {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--lp-purple);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
}
.lp-mock-supplier-btn-import .material-symbols-outlined { font-size: 15px; }
.lp-mock-supplier-match {
    font-size: 12px;
    color: #059669;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
}
.lp-mock-supplier-match::before {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #059669;
    display: inline-block;
}

/* ── Feature page — responsive ───────────────────────────── */
@media (max-width: 1024px) {
    .lp-fp-benefits-grid,
    .lp-fp-others-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 820px) {
    .lp-fp-hero { grid-template-columns: 1fr; gap: 32px; padding: 48px 24px; }
    .lp-fp-hero-visual { justify-content: center; }
    .lp-fp-benefits { padding: 56px 24px; }
    .lp-fp-others { padding: 56px 24px; }
    .lp-fp-benefits-grid { grid-template-columns: 1fr; }
    .lp-fp-others-grid { grid-template-columns: repeat(2, 1fr); }
    .lp-breadcrumb { padding: 12px 24px; }
}
@media (max-width: 560px) {
    .lp-fp-others-grid { grid-template-columns: 1fr; }
    .lp-mock { max-width: 100%; }
}

/* ── Feature card "Læs mere" link ────────────────────────── */
.lp-feature-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 14px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--lp-purple);
    opacity: 0.75;
    transition: opacity 0.15s, gap 0.15s;
}
.lp-feature-link .material-symbols-outlined { font-size: 14px; }
.lp-feature:hover .lp-feature-link { opacity: 1; gap: 7px; }