.home-hero { display: flex; flex-direction: column; gap: .45rem; align-items: center; }
.home-title {
    font-size: clamp(1.8rem, 3.5vw, 2.8rem);
    font-weight: 800;
    line-height: 1.1;
    color: #fff;
    margin: 0;
    letter-spacing: -.02em;
    text-align: center;
}
.home-title em { font-style: normal; color: #3dff8f; }
.home-subhead {
    font-size: clamp(.82rem, 1.3vw, .92rem);
    color: rgba(255,255,255,.6);
    line-height: 1.55;
    margin: 0;
    text-align: center;
    max-width: 480px;
}
.home-bullets {
    display: flex;
    flex-wrap: wrap;
    gap: .3rem .8rem;
    justify-content: center;
}
.home-bullet { font-size: .76rem; color: rgba(255,255,255,.4); letter-spacing: .03em; }

/* ── Centre: Studio preview — THE HERO ──────────────────────────────────── */
.home-center {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .6rem;
}
.home-preview-label {
    font-size: .72rem;
    color: rgba(255,255,255,.45);
    letter-spacing: .05em;
    text-transform: uppercase;
    text-align: center;
    margin: 0;
}
.home-studio-preview {
    width: 100%;
    max-width: none;
    aspect-ratio: 1200 / 589;  /* always shows the full studio image, no cropping */
    max-height: none;
    background: #111;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0,0,0,.75);
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: transform .55s cubic-bezier(.22,1,.36,1),
                border-radius .55s ease,
                box-shadow .2s ease;
    transform-origin: center center;
}
.home-studio-preview:hover {
    box-shadow: 0 28px 90px rgba(0,0,0,.85), 0 0 0 1.5px rgba(61,255,143,.3);
    transform: translateY(-3px) scale(1.005);
}

/* Zoom-in: studio preview expands to fill viewport, rest fades out */
.home-cinematic.is-zooming .home-studio-preview {
    transform: scale(9) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}
.home-cinematic.is-zooming .home-top,
.home-cinematic.is-zooming .home-bottom,
.home-cinematic.is-zooming .home-preview-label,
.home-cinematic.is-zooming .home-gallery,
.home-cinematic.is-zooming .home-samples,
.home-cinematic.is-zooming .home-col-news {
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease;
}

/* ── Bottom: steps row + CTA + beta ─────────────────────────────────────── */
.home-bottom {
    width: 100%;
    max-width: 720px;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.home-steps-label {
    font-size: .7rem;
    color: rgba(255,255,255,.38);
    text-transform: uppercase;
    letter-spacing: .07em;
    margin: 0;
    text-align: center;
}
/* Three steps side by side */
.home-steps-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 14px;
    overflow: hidden;
}
.home-step {
    flex: 1 1 0;
    display: flex;
    align-items: flex-start;
    gap: .65rem;
    padding: .85rem 1rem;
}
.home-step-div {
    width: 1px;
    background: rgba(255,255,255,.07);
    flex-shrink: 0;
    align-self: stretch;
}
.home-step-num {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(61,255,143,.14);
    border: 1px solid rgba(61,255,143,.4);
    color: #3dff8f;
    font-size: .72rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: .1rem;
}
.home-step-body { display: flex; flex-direction: column; gap: .18rem; }
.home-step-body strong { font-size: .82rem; color: #fff; font-weight: 600; }
.home-step-body span { font-size: .74rem; color: rgba(255,255,255,.42); line-height: 1.4; }

.home-guide-hint {
    display: flex;
    align-items: center;
    gap: .7rem;
    justify-content: flex-start;
}
/* In the left news column, push guide hint to the bottom */
.home-col-news .home-guide-hint {
    margin-top: auto;
    padding-top: .75rem;
    border-top: 1px solid rgba(255,255,255,.06);
}
.home-guide-box {
    flex-shrink: 0;
    padding: .22rem .55rem;
    background: rgba(61,255,143,.18);
    border: 1.5px solid #3dff8f;
    border-radius: 6px;
    color: #3dff8f;
    font-size: .7rem;
    font-weight: 600;
    letter-spacing: .04em;
    white-space: nowrap;
}
.home-guide-hint span { font-size: .76rem; color: rgba(255,255,255,.4); line-height: 1.4; }

/* ── CTA ────────────────────────────────────────────────────────────────── */
.home-cta { display: flex; flex-direction: column; gap: .5rem; align-items: center; }
.home-enter-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .85rem 2.4rem;
    background: #3dff8f;
    color: #09090b;
    border: none;
    border-radius: 50px;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .02em;
    cursor: pointer;
    transition: background .18s, transform .14s, box-shadow .18s;
    box-shadow: 0 4px 22px rgba(61,255,143,.3);
}
.home-enter-btn:hover {
    background: #5bffa6;
    transform: translateY(-2px);
    box-shadow: 0 6px 30px rgba(61,255,143,.4);
}
.home-enter-btn:active { transform: translateY(0); }
.home-cta-hint { font-size: .72rem; color: rgba(255,255,255,.3); margin: 0; }

/* ── Beta bar + changelog ───────────────────────────────────────────────── */
.home-changelog-wrap { display: flex; flex-direction: column; gap: .5rem; }
.home-beta-bar { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; justify-content: center; }
.home-beta-badge {
    flex-shrink: 0;
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .08em;
    background: rgba(61,255,143,.12);
    border: 1px solid rgba(61,255,143,.4);
    color: #3dff8f;
    border-radius: 4px;
    padding: .1rem .42rem;
}
.home-beta-text { font-size: .76rem; color: rgba(255,255,255,.4); line-height: 1.4; }

/* ── Studio mockup internals (size tuned for larger preview) ────────────── */
.sp-topbar {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .65rem .9rem;
    background: #1a1a1a;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.sp-brand-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    background: #3dff8f;
    flex-shrink: 0;
    margin-right: .3rem;
}
.sp-tab {
    font-size: .7rem;
    padding: .22rem .6rem;
    border-radius: 20px;
    color: rgba(255,255,255,.35);
    white-space: nowrap;
}
.sp-tab--active { background: rgba(255,255,255,.1); color: #fff; }
.sp-tab--add { color: rgba(255,255,255,.25); }
.sp-topbar-title {
    font-size: .72rem;
    font-weight: 700;
    color: rgba(255,255,255,.8);
    letter-spacing: .03em;
    margin-right: .2rem;
}
.sp-topbar-sep { flex: 1; }

/* ── Studio preview wrapper — natural image width/height, container clips bottom ── */
.sp-img-wrap {
    position: relative;   /* overlays anchor here */
    width: 100%;
    line-height: 0;       /* no baseline gap under img */
}
.sp-screenshot {
    width: 100%;
    height: auto;         /* natural aspect ratio — NO object-fit zoom distortion */
    display: block;
}

/* Subtle top + bottom fades — full image visible, edges blend into page */
.sp-screenshot-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        rgba(0,0,0,.25) 0%,
        transparent 8%,
        transparent 80%,
        rgba(17,17,17,.9) 100%
    );
    pointer-events: none;
}

/* ── Step annotation overlays ── */
/* Positions mapped to 1024×504 screenshot content:
   workflow strip  y=5-25%  →  label at top:14%
   left sidebar    x=0-11%  →  label at left:1%  top:55%
   dark canvas     x=11%+   →  label at left:30% top:60%   */
.sp-ol {
    position: absolute;
    display: flex;
    align-items: center;
    gap: .35rem;
    pointer-events: none;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,.9));
}
/* Positions mapped to actual screencapUI.jpg content (1200×589):
   nav=0-7%  |  workflow strip=7-20%  |  sidebar=x<7%,y>20%  |  canvas=x>7%,y>20%  |  right panel=x>65% */
.sp-ol--workflow { top: 12%; left:  3%; }                                /* left of workflow cards */
.sp-ol--image    { top: 30%; left:  1%; flex-direction: column; align-items: flex-start; } /* sidebar */
.sp-ol--generate { top: 76%; left: 64%; flex-direction: row-reverse; left: auto; right: 2%; } /* generate btn */

.sp-ol-badge {
    width: 17px; height: 17px;
    border-radius: 50%;
    background: #3dff8f;
    color: #050f07;
    font-size: .56rem;
    font-weight: 900;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 0 8px rgba(61,255,143,.7);
    animation: sp-ol-pop 6s ease-in-out infinite;
}
.sp-ol-text {
    font-size: .6rem;
    font-weight: 800;
    color: #3dff8f;
    text-transform: uppercase;
    letter-spacing: .07em;
    white-space: nowrap;
    text-shadow: 0 1px 4px rgba(0,0,0,.9);
}

/* stagger fade-in so labels appear one by one */
.sp-ol--workflow { animation: sp-ol-fadein 9s ease-in-out infinite; animation-delay: 0s; }
.sp-ol--image    { animation: sp-ol-fadein 9s ease-in-out infinite; animation-delay: 3s; }
.sp-ol--generate { animation: sp-ol-fadein 9s ease-in-out infinite; animation-delay: 6s; }

@keyframes sp-ol-fadein {
    0%, 8%    { opacity: 0;   transform: translateY(4px); }
    15%, 85%  { opacity: 1;   transform: translateY(0); }
    95%, 100% { opacity: .2;  transform: translateY(0); }
}
@keyframes sp-ol-pop {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.15); }
}
.sp-rail {
    width: 80px;
    background: #161616;
    border-right: 1px solid rgba(255,255,255,.06);
    padding: .55rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .32rem;
}
.sp-rail-label {
    font-size: .5rem;
    color: rgba(255,255,255,.22);
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .2rem 0 .1rem;
}
.sp-swatch { background: rgba(255,255,255,.07); border-radius: 5px; height: 46px; }
.sp-swatch--sm { height: 30px; }
.sp-swatch--xs { height: 20px; }
.sp-canvas {
    flex: 1;
    position: relative;  /* for absolute label */
    padding: 1.6rem .85rem .85rem;  /* top room for the label */
    display: flex;
    flex-direction: column;
    gap: .55rem;
    justify-content: center;
    align-items: center;
}
.sp-drop-zone {
    border: 1.5px dashed rgba(255,255,255,.18);
    border-radius: 10px;
    padding: 1rem 1.2rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .35rem;
    color: rgba(255,255,255,.28);
    font-size: .66rem;
    width: 100%;
    box-sizing: border-box;
}
.sp-drop-zone svg { color: rgba(255,255,255,.22); width: 24px; height: 24px; }
.sp-gen-btn {
    background: #3dff8f;
    color: #09090b;
    border-radius: 20px;
    font-size: .68rem;
    font-weight: 700;
    padding: .35rem 1rem;
    align-self: flex-end;
}
.sp-renders {
    width: 80px;
    background: #161616;
    border-left: 1px solid rgba(255,255,255,.06);
    padding: .55rem .5rem;
    display: flex;
    flex-direction: column;
    gap: .32rem;
}
.sp-thumb { background: rgba(255,255,255,.08); border-radius: 5px; height: 46px; }
.sp-thumb--sm { height: 32px; }


/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    /* On mid-size screens collapse to single center column */
    .home-layout { grid-template-columns: 1fr; }
    .home-col-news { display: none; }
    .home-samples  { display: none; }
}
@media (max-width: 680px) {
    .home-content { padding: 1.5rem 1rem 4rem; gap: 1.3rem; }
    .home-title { font-size: clamp(1.7rem, 7vw, 2.2rem); }
    .home-steps-row { flex-direction: column; border-radius: 12px; }
    .home-step-div { width: auto; height: 1px; }
    .home-enter-btn { width: 100%; justify-content: center; }
    .home-studio-preview { max-height: 240px; aspect-ratio: auto; }
}


/* ═══════════════════════════════════════════════════════════════════════════
   PREMIUM TIER — gold treatment for compound multi-step workflows
   ═══════════════════════════════════════════════════════════════════════════ */

/* -- Design tokens -- */
:root {
    --gold:          #D4AF37;
    --gold-light:    #E8CC6E;
    --gold-dark:     #B8960C;
    --gold-glow:     rgba(212, 175, 55, 0.25);
    --gold-border:   rgba(212, 175, 55, 0.45);
    --gold-bg:       rgba(212, 175, 55, 0.07);
    --gold-badge-bg: linear-gradient(135deg, #D4AF37 0%, #E8CC6E 50%, #D4AF37 100%);
    --gold-badge-fg: #1a1400;
}

/* -- PREMIUM badge (shared across all surfaces) -- */
.premium-badge {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.56rem;
    font-weight: 900;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    background: var(--gold-badge-bg);
    color: var(--gold-badge-fg);
    padding: 2px 8px;
    border-radius: 20px;
    line-height: 1.6;
    white-space: nowrap;
    box-shadow: 0 1px 6px rgba(212, 175, 55, 0.3);
}

/* -- Carousel card (compact strip) -- */
.demo-card.demo-card--premium {
    border-color: var(--gold-border);
}
.demo-card.demo-card--premium:hover {
    border-color: var(--gold);
    box-shadow: 0 0 16px var(--gold-glow), 0 4px 18px rgba(0,0,0,0.35);
}
.demo-card.demo-card--premium.is-active {
    border-color: var(--gold);
    box-shadow: 0 0 20px var(--gold-glow), 0 0 0 1px var(--gold-border);
}
.demo-card--premium .premium-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
}

/* -- Launcher card (full-page grid) -- */
.launcher-card.launcher-card--premium {
    border: 1px solid var(--gold-border);
}
.launcher-card.launcher-card--premium:hover {
    border-color: var(--gold);
    box-shadow: 0 0 20px var(--gold-glow), 0 8px 28px rgba(0,0,0,0.3);
}
.launcher-card--premium .premium-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 5;
}
.launcher-card--premium .launcher-card-media {
    position: relative;
}

/* -- Workflows page card -- */
.wf-card.wf-card--premium {
    border-color: var(--gold-border);
}
.wf-card.wf-card--premium:hover {
    border-color: var(--gold);
    box-shadow: 0 0 18px var(--gold-glow);
}
.wf-card--premium .wf-premium-badge {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 5;
}
.wf-card--premium .wf-media {
    position: relative;
}

/* -- Workflow page header pill -- */
.premium-pill {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    background: var(--gold-bg);
    color: var(--gold);
    border: 1px solid var(--gold-border);
    padding: 2px 10px;
    border-radius: 20px;
    margin-left: 8px;
    vertical-align: middle;
}

/* Gold accent line on the workflow form panel for premium workflows */
.demo-effect-workspace.demo-effect-workspace--premium {
    border-top: 2px solid var(--gold-border);
}

/* ──────────────────────────────────────────────────────────────────────
   PREMIUM POLISH LAYER — applies to ALL 9 premium tools
   (unified: chrome logo / matrix / dunk / season / reveal / placement,
    custom:  chrome FX / brand stage / 360 spin)
   Goal: every workflow component inside a premium workspace gets a gold
   accent treatment so users feel the tier consistently. The neutral
   orange/white system stays for free + AI tools; gold is reserved for
   premium and is applied through this single rule cluster.
   ────────────────────────────────────────────────────────────────────── */

/* Render bar — subtle gold border + gold tint background, more weight than the
   neutral generate bar so the "render moment" feels premium across all 9 tools. */
.demo-effect-workspace--premium .wf-generate-bar {
    border-color: var(--gold-border);
    background: linear-gradient(135deg, rgba(212,175,55,.05) 0%, rgba(212,175,55,.02) 100%);
    box-shadow: 0 0 0 1px rgba(212,175,55,.06), 0 4px 18px rgba(0,0,0,.18);
}

/* Primary CTA — gold gradient button replaces the orange default for premium tools.
   Same dimensions/typography as .wf-generate-btn — only the visual skin changes. */
.demo-effect-workspace--premium .wf-generate-btn {
    background: linear-gradient(135deg, #D4AF37 0%, #E8CC6E 50%, #D4AF37 100%);
    color: #1a1400;
    font-weight: 800;
    letter-spacing: .02em;
    box-shadow: 0 2px 10px rgba(212,175,55,.25);
    transition: transform .12s ease, box-shadow .15s ease, opacity .15s;
}
.demo-effect-workspace--premium .wf-generate-btn:hover:not(:disabled) {
    box-shadow: 0 4px 22px rgba(212,175,55,.45), 0 0 0 1px var(--gold-border);
    transform: translateY(-1px);
    opacity: 1;
}
.demo-effect-workspace--premium .wf-generate-btn:disabled {
    background: linear-gradient(135deg, rgba(212,175,55,.35) 0%, rgba(232,204,110,.2) 100%);
    box-shadow: none;
    color: rgba(26,20,0,.5);
}

/* Render bar title — slightly gold tint so it reads as the premium hero line */
.demo-effect-workspace--premium .wf-generate-info h3 {
    color: var(--gold-light, #E8CC6E);
}

/* Options toolbar — soft gold left edge marker, keeps the rest neutral so
   long toolbars (Reveal: 3 selects + 2 colors) still read calmly. */
.demo-effect-workspace--premium .wf-options-toolbar {
    border-color: rgba(212,175,55,.18);
    box-shadow: inset 3px 0 0 var(--gold-border);
}

/* Radio cards selected — gold ring instead of orange so the chosen option
   matches the premium accent everywhere it appears. */
.demo-effect-workspace--premium .wf-radio-card:has(input:checked) {
    border-color: var(--gold);
    background: var(--gold-bg);
}

/* Form controls focus — gold focus ring on selects, textareas, color pickers */
.demo-effect-workspace--premium .wf-select:focus,
.demo-effect-workspace--premium .wf-textarea:focus {
    border-color: var(--gold);
    outline: none;
    box-shadow: 0 0 0 2px rgba(212,175,55,.12);
}

/* Color picker swatch — gold ring so it matches the premium options */
.demo-effect-workspace--premium .wf-color-input {
    border-color: var(--gold-border);
}

/* Premium pill in the title row — keep readable, slight extra glow */
.demo-effect-workspace--premium .premium-pill {
    box-shadow: 0 0 12px rgba(212,175,55,.18);
}

/* Title typography — slightly larger H1 for premium tools so the page feels
   weightier. Caps at the existing 800px wizard width via the title-bar rule. */
.demo-effect-workspace--premium .demo-effect-browser-head h1 {
    font-size: 1.6rem;
    letter-spacing: -.01em;
}

/* "What this creates" inspiration thumb — premium tools get a subtle gold ring */
.demo-effect-workspace--premium .wf-title-thumb {
    border: 1px solid var(--gold-border);
}
.demo-effect-workspace--premium .wf-title-thumb-label {
    color: rgba(232,204,110,.65);
}

/* Options toolbar — wrap row breaks more cleanly when many controls (Reveal,
   Chrome FX builder step). The base flex-wrap already wraps; the gap below
   gives the wrapped row breathing room without changing single-row layouts. */
.demo-effect-workspace--premium .wf-options-toolbar {
    row-gap: .65rem;
}

/* Mobile — tighten the gold gradient button so it doesn't overpower phone screens */
@media (max-width: 720px) {
    .demo-effect-workspace--premium .wf-generate-btn {
        box-shadow: 0 2px 8px rgba(212,175,55,.22);
    }
    .demo-effect-workspace--premium .demo-effect-browser-head h1 {
        font-size: 1.35rem;
    }
}

/* ── Premium workspace: constrain wizard/flow so they never stretch full-screen ─ */
/* Applies to Chrome FX, 360 Spin, Brand Stage, and all unified premium workflows  */
.demo-effect-workspace--premium .wf-wizard,
.demo-effect-workspace--premium .wf-flow {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* Title bar (.demo-effect-browser-head) and About accordion (.wf-about-panel) are
   constrained to the same 860px column so the "What this creates" thumbnail
   aligns with the right edge of the wizard body instead of floating to the
   workspace edge. Selector includes `html.embedded-workspace` to win specificity
   against the embedded-mode `margin: 0 0 2px` rule that would otherwise zero
   our auto margins and prevent centering. */
html .demo-effect-workspace--premium .demo-effect-browser-head,
html .demo-effect-workspace--premium > .wf-about-panel {
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

/* -- Mobile gallery card -- */
.mobile-gallery-card.mobile-gallery-card--premium {
    border: 1px solid var(--gold-border);
}
.mobile-gallery-card--premium .premium-badge {
    position: absolute;
    top: 6px;
    left: 6px;
    z-index: 5;
}

/* -- Pricing table premium row -- */
.credits-chip.premium-credits {
    background: rgba(212, 175, 55, 0.15);
    color: var(--gold);
}
.td-category.cat-premium {
    color: var(--gold);
}

/* -- Premium filter button active state -- */
.carousel-filter-btn.is-active[data-filter-value="premium"] {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold);
}
.launcher-filter-btn.is-active[data-launcher-cat="premium"] {
    background: rgba(212, 175, 55, 0.18);
    color: var(--gold);
}
.wf-filter-btn.is-active[data-wf-filter="premium"] {
    border-color: var(--gold);
    color: var(--gold);
    background: rgba(212, 175, 55, 0.08);
}

/* -- Free filter button & badge -- */
.carousel-filter-btn--free { color: #4ade80; }
.carousel-filter-btn.is-active[data-filter-value="free"] {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}
.launcher-filter-btn.is-active[data-launcher-cat="free"] {
    background: rgba(74, 222, 128, 0.15);
    color: #4ade80;
}
.card-free-badge {
    position: absolute;
    bottom: 28px; /* sits just above the card tagline footer */
    left: 5px;
    z-index: 6;
    background: #4ade80;
    color: #0a0f1a;
    font-size: 0.52rem;
    font-weight: 800;
    letter-spacing: 0.07em;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.3;
    pointer-events: none;
}
.launcher-free-badge {
    position: absolute;
    top: 8px;
    left: 8px;
    z-index: 6;
    background: #4ade80;
    color: #0a0f1a;
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 6px;
    border-radius: 3px;
    line-height: 1.3;
    pointer-events: none;
}


/* ════════════════════════════════════════════════════════════════════════════
   BETA REQUEST MODAL
   ════════════════════════════════════════════════════════════════════════════ */
.beta-req-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9500;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(7, 9, 14, 0.84);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    padding: 16px;
}
.beta-req-backdrop[hidden] { display: none !important; }
.beta-req-backdrop.is-open { opacity: 1; pointer-events: auto; }

.beta-req-card {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: calc(100dvh - 32px);
    overflow-y: auto;
    border-radius: 20px;
    padding: 36px 32px 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transform: translateY(16px);
    transition: transform 0.3s ease;
    background: #12151c;
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 32px 80px rgba(0,0,0,0.7);
}
.beta-req-backdrop.is-open .beta-req-card { transform: translateY(0); }

.beta-req-close {
    position: absolute;
    top: 14px;
    right: 16px;
    width: 32px;
    height: 32px;
    border-radius: 999px;
    border: none;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.6);
    font-size: 1.2rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.beta-req-close:hover { background: rgba(255,255,255,0.14); color: #fff; }

.beta-req-logo {
    display: flex;
    align-items: center;
    gap: 12px;
}
.beta-req-logo-img { height: 40px; width: auto; }
.beta-req-pill {
    background: rgba(72,199,102,0.15);
    color: #48c766;
    border: 1px solid rgba(72,199,102,0.3);
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 3px 10px;
    text-transform: uppercase;
}

.beta-req-title {
    font-size: 1.4rem;
    font-weight: 800;
    margin: 0;
    line-height: 1.2;
    color: #fff;
}
.beta-req-lede {
    margin: 0;
    font-size: 0.88rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.55;
}

.beta-req-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.beta-req-label {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.78rem;
    font-weight: 600;
    color: rgba(255,255,255,0.7);
}
.beta-req-star { color: #f28b3c; margin-left: 2px; }
.beta-req-input,
.beta-req-select {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.05);
    color: #fff;
    font-size: 0.88rem;
    font-family: inherit;
    outline: none;
    transition: border-color 180ms, background 180ms;
}
.beta-req-input:focus,
.beta-req-select:focus {
    border-color: rgba(72,199,102,0.5);
    background: rgba(255,255,255,0.08);
}
.beta-req-input::placeholder { color: rgba(255,255,255,0.3); }
.beta-req-select option { background: #1a1d24; color: #fff; }

.beta-req-submit {
    margin-top: 4px;
    padding: 12px 24px;
    border-radius: 12px;
    border: none;
    background: linear-gradient(135deg, #48c766, #36a855);
    color: #fff;
    font-size: 0.95rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 150ms, transform 120ms, box-shadow 150ms;
    box-shadow: 0 4px 18px rgba(72,199,102,0.3);
}
.beta-req-submit:hover {
    background: linear-gradient(135deg, #3fb85c, #2d9248);
    transform: translateY(-1px);
    box-shadow: 0 6px 24px rgba(72,199,102,0.4);
}
.beta-req-submit:active { transform: translateY(0); }
.beta-req-submit:disabled {
    opacity: 0.6;
    cursor: wait;
    transform: none;
}

.beta-req-note {
    font-size: 0.72rem;
    text-align: center;
    margin: 0;
    color: rgba(255,255,255,0.35);
}

.beta-req-success {
    text-align: center;
    padding: 20px 0 10px;
}
.beta-req-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #48c766, #36a855);
    color: #fff;
    font-size: 1.6rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
}
.beta-req-success-title {
    font-size: 1.2rem;
    font-weight: 800;
    margin: 0 0 8px;
    color: #fff;
}
.beta-req-success-text {
    font-size: 0.85rem;
    color: rgba(255,255,255,0.6);
    line-height: 1.55;
    margin: 0;
}

@media (max-width: 720px) {
    .beta-req-backdrop { padding: 10px; }
    .beta-req-card {
        max-width: 100%;
        padding: 24px 18px 20px;
        gap: 12px;
        border-radius: 16px;
    }
    .beta-req-title { font-size: 1.15rem; }
    .beta-req-lede { font-size: .82rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PIPELINE STEP NODES — premium WORKFLOW visualization
   ═══════════════════════════════════════════════════════════════════════════
   Replaces the single WORKFLOW node with N step nodes (one per pipeline step).
   Each node has a fixed 100x100 square viewport (inherits .cg-node-icon size)
   so the layout stays uniform regardless of step count.
   States:
     .cg-step-pending — greyed, no animation, waiting
     .cg-step-active  — full color + 8-bit scanline + grid overlay
     .cg-step-done    — intermediate result thumbnail visible, ✓ badge
   The Inspector seal stamps the bottom-right corner of every node like a
   Fruit-of-the-Loom QC seal — premium "AIFI hand-picked this engine" feel.
   ═════════════════════════════════════════════════════════════════════════ */

.dr-queue-eyebrow-row {
    display: flex;
    align-items: center;
    gap: .4rem;
    padding: .75rem 1.5rem .25rem;
    position: relative;
}
.dr-queue-eyebrow-row .dr-queue-eyebrow {
    padding: 0;
}

/* ── ONE Best-in-Class badge for the whole pipeline ────────────────────────
   Quality stamp, not the hero. Lives at the RIGHT edge of the workflow
   header row so the WORKFLOW label still leads the eye into the nodes.
   Subtle outline + small star + a single inline label. Click reveals the
   curated pipeline popover listing every step's chosen engine and why. */
.cg-bic-badge {
    margin-left: auto;          /* push to the right edge of the eyebrow row */
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 999px;
    border: 1px solid rgba(242, 139, 60, .35);
    background: rgba(242, 139, 60, .06);
    color: rgba(255, 255, 255, .72);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    line-height: 1;
    transition: all .15s ease;
}
.cg-bic-badge:hover,
.cg-bic-badge:focus-visible {
    border-color: rgba(242, 139, 60, .7);
    background: rgba(242, 139, 60, .12);
    color: #fff;
    outline: none;
}
.cg-bic-badge[aria-expanded="true"] {
    border-color: var(--accent, #f28b3c);
    background: rgba(242, 139, 60, .18);
    color: #fff;
}
.cg-bic-badge-star {
    font-size: .78rem;
    line-height: 1;
    color: var(--accent, #f28b3c);
}
.cg-bic-badge-text {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
}
.cg-bic-badge-line1 {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: var(--accent, #f28b3c);
    text-transform: uppercase;
}
.cg-bic-badge-line2 {
    font-size: .58rem;
    font-weight: 500;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .45);
    /* On narrow screens this extra context can hide — keeps the badge tight */
}
@media (max-width: 720px) {
    .cg-bic-badge-line2 { display: none; }
}

/* Legacy class kept for backwards-compat — now hidden, replaced by .cg-bic-badge. */
.cg-legend-toggle { display: none !important; }

/* Best-in-Class detail popover — anchored to the badge on the right */
/* Best-in-Class popover — escapes ALL parent overflow via position:fixed.
   The previous absolute-positioned version was clipped by the workflow row's
   horizontal-scroll container (pipeline tiles need their own overflow), which
   forced scroll bars to appear inside the row and let the popover disappear
   behind clipped edges. As a fixed-position element it floats above the
   page, untouched by any parent overflow / transform / clip context.

   Position is set imperatively in JS using getBoundingClientRect() of the
   badge, on every open + on window resize/scroll while open. The CSS just
   describes the rest state and the dissolve-in transition. */
.cg-legend-popover {
    position: fixed;
    top: 0;          /* placeholder; JS overwrites on open */
    left: 0;         /* placeholder; JS overwrites on open */
    z-index: 9999;   /* above the workflow row, hero, everything */
    background: #0e0e16;
    border: 1px solid rgba(242,139,60,.4);
    border-radius: 12px;
    padding: 16px 18px 14px;
    width: min(420px, calc(100vw - 24px));
    box-shadow: 0 16px 48px rgba(0,0,0,.65), 0 0 0 1px rgba(242,139,60,.05);
    /* Dissolve-in: starts invisible + slightly above its anchor, fades down
       into place. Off state uses visibility (not display:none) so the
       transition can actually run. */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    pointer-events: none;
    transition:
        opacity    .18s ease,
        transform  .18s ease,
        visibility 0s   linear .18s;
}
.cg-legend-popover.cg-bic-popover-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition:
        opacity    .18s ease,
        transform  .18s ease,
        visibility 0s   linear 0s;
}
/* Arrow is hidden in the floating-tip mode — without a stable parent it can
   never reliably point at the badge across viewport sizes / scroll states.
   The fade-in down motion already ties the popover visually to the click. */
.cg-legend-popover .cg-legend-popover-arrow,
.cg-legend-popover-arrow {
    display: none !important;
}
/* Curated pipeline reveal — the one popover users click to see all picks. */
.cg-bic-step-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 360px;
    overflow-y: auto;
    padding-right: 2px;
}
.cg-bic-step-row {
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(255,255,255,.025);
    border: 1px solid rgba(255,255,255,.05);
}
.cg-bic-step-head {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 4px;
}
.cg-bic-step-num {
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-size: .68rem;
    font-weight: 700;
    color: var(--accent, #f28b3c);
    background: rgba(242,139,60,.12);
    border-radius: 4px;
    padding: 1px 6px;
    line-height: 1.2;
    flex-shrink: 0;
}
.cg-bic-step-process {
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.95);
    flex: 1;
    min-width: 0;
}
.cg-bic-step-engine {
    font-size: .7rem;
    font-weight: 600;
    color: rgba(120,180,255,.85);
    letter-spacing: .02em;
    flex-shrink: 0;
}
.cg-bic-step-why {
    font-size: .74rem;
    line-height: 1.45;
    color: rgba(255,255,255,.62);
    margin: 0;
}
.cg-legend-popover-arrow {
    position: absolute;
    top: -6px;
    left: 18px;
    width: 10px; height: 10px;
    background: #0e0e16;
    border-left: 1px solid rgba(242,139,60,.3);
    border-top:  1px solid rgba(242,139,60,.3);
    transform: rotate(45deg);
}
.cg-legend-heading {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    color: var(--accent, #f28b3c);
    margin: 0 0 4px;
}
.cg-legend-sub {
    font-size: .72rem;
    line-height: 1.4;
    color: rgba(255,255,255,.6);
    margin: 0 0 10px;
}
.cg-legend-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
    max-height: 280px;
    overflow-y: auto;
}
.cg-legend-row {
    display: grid;
    grid-template-columns: 38px 90px 1fr;
    gap: 6px;
    align-items: baseline;
    font-size: .74rem;
    padding: 3px 0;
    border-bottom: 1px solid rgba(255,255,255,.04);
}
.cg-legend-row:last-child { border-bottom: 0; }
.cg-legend-num {
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    font-weight: 700;
    color: #c33;
}
.cg-legend-name {
    font-weight: 600;
    color: rgba(255,255,255,.9);
}
.cg-legend-spec {
    font-size: .68rem;
    color: rgba(255,255,255,.45);
}

/* ── Per-step "Why this engine" popover ────────────────────────────────────
   Anchored next to the seal on each step node. One short educational
   line — never process talk, never marketing. */
.cg-bic-popover {
    position: absolute;
    bottom: calc(100% + 12px);
    right: -8px;
    z-index: 60;
    width: 260px;
    background: #0e0e16;
    border: 1px solid rgba(220, 90, 90, 0.45);
    border-radius: 10px;
    padding: 12px 14px 11px;
    box-shadow: 0 12px 36px rgba(0,0,0,.55);
    pointer-events: auto;
    text-align: left;
    text-transform: none;
    font-family: inherit;
    color: rgba(255,255,255,.85);
    transform: rotate(0deg);  /* cancel the parent .cg-bic-stamp's tilt */
}
.cg-bic-popover-arrow {
    position: absolute;
    bottom: -6px;
    right: 22px;
    width: 10px; height: 10px;
    background: #0e0e16;
    border-right:  1px solid rgba(220, 90, 90, 0.45);
    border-bottom: 1px solid rgba(220, 90, 90, 0.45);
    transform: rotate(45deg);
}
.cg-bic-popover-eyebrow {
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .14em;
    color: rgba(220, 90, 90, 0.95);
    text-transform: uppercase;
    margin: 0 0 4px;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
}
.cg-bic-popover-title {
    font-size: .82rem;
    font-weight: 600;
    color: rgba(255,255,255,.95);
    margin: 0 0 6px;
    line-height: 1.25;
}
.cg-bic-popover-engine {
    color: var(--accent, #f28b3c);
    font-weight: 700;
}
.cg-bic-popover-divider {
    color: rgba(255,255,255,.3);
    margin: 0 4px;
}
.cg-bic-popover-step {
    color: rgba(255,255,255,.75);
}
.cg-bic-popover-why {
    font-size: .76rem;
    line-height: 1.45;
    color: rgba(255,255,255,.72);
    margin: 0;
}

/* On narrow viewports the popover would clip the right edge; flip it left. */
@media (max-width: 599px) {
    .cg-bic-popover {
        right: auto;
        left: -8px;
        width: 240px;
    }
    .cg-bic-popover-arrow {
        right: auto;
        left: 22px;
    }
}

/* ── Step node container (overrides .cg-node-step inside the queue) ── */
.dr-queue-section .cg-step {
    border-color: rgba(120,180,255,.3);
    background: rgba(120,180,255,.05);
    cursor: default;
    transition: border-color .25s ease, background .25s ease, opacity .25s ease;
}

/* PENDING — not started yet, greyed */
.dr-queue-section .cg-step-pending {
    opacity: .42;
    border-color: rgba(255,255,255,.1);
    background: rgba(255,255,255,.02);
}
.dr-queue-section .cg-step-pending .cg-step-icon img,
.dr-queue-section .cg-step-pending .cg-step-icon video {
    filter: grayscale(.85) brightness(.65);
}

/* Checkerboard backdrop for step-icon viewports.
   Many intermediate assets are transparent PNGs (e.g. Bria cutouts) — without
   a checker pattern behind them, transparent areas read as solid black and
   the user can't tell a cutout apart from a normal photo. The checker only
   shows through where the image is transparent (or where object-fit:contain
   letterboxes a non-square image), so opaque thumbnails are unaffected. */
.dr-queue-section .cg-step-icon {
    background-color: #1a1a24;
    background-image:
        linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%),
        linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.06) 75%);
    background-size: 12px 12px;
    background-position: 0 0, 6px 6px;
    border-radius: 6px;
    overflow: hidden;
}
.dr-queue-section .cg-step-icon img,
.dr-queue-section .cg-step-icon video {
    background: transparent !important;
}

/* ACTIVE — currently rendering, full color + scanline */
.dr-queue-section .cg-step-active {
    border-color: var(--accent, #f28b3c);
    background: rgba(242,139,60,.08);
    box-shadow: 0 0 0 1px rgba(242,139,60,.15), 0 0 20px rgba(242,139,60,.18);
}
.dr-queue-section .cg-step-active .cg-step-engine-badge {
    color: var(--accent, #f28b3c);
}
.dr-queue-section .cg-step-active .cg-step-icon img,
.dr-queue-section .cg-step-active .cg-step-icon video {
    filter: brightness(1.05) saturate(1.1);
}

/* DONE — border goes green, badge goes green, ✓ appears */
.dr-queue-section .cg-step-done {
    border-color: rgba(100,220,140,.4);
    background: rgba(100,220,140,.05);
}
.dr-queue-section .cg-step-done .cg-step-engine-badge {
    color: #6ddc8c;
}

/* ── Tool icon — always the primary node visual ─────────────────────── */
/* The user sees "BRIA → SEEDREAM → SEEDREAM", not thumbnails, so they
   understand the process rather than just seeing images stacking up. */
.cg-step-tool-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.35);
    transition: color .2s ease;
}
.cg-step-tool-icon svg {
    width: 42%;
    height: 42%;
    flex-shrink: 0;
}
.cg-step-active  .cg-step-tool-icon { color: rgba(242,139,60,.75); }
.cg-step-done    .cg-step-tool-icon { color: rgba(100,220,140,.6); }
.cg-step-pending .cg-step-tool-icon { color: rgba(255,255,255,.18); }

/* ── Result preview — fills the tile when the step is done ─────────────
   Was originally a hover-only overlay (the user had to mouse over to see
   the result). The Stacked Effect Strip plan promoted it to the primary
   visual once the step transitions to `done`: the tile becomes the result
   slot in-place, replacing the trailing "Result" tile that used to sit
   to the right. The preview stays hidden while the step is still
   pending/active/up-next so the tool icon + STAND BY can do their job. */
.cg-step-preview {
    position: absolute;
    inset: 0;
    border-radius: 6px;
    overflow: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}
.cg-step-preview img,
.cg-step-preview video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Audio result plate — same role as <img>/<video> above for tts/sfx etc.
   Music-note glyph centred on a dark gradient so the tile reads as a
   completed audio render rather than an empty/pending tile. */
.cg-step-preview-audio {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(ellipse at center, #2a2a3a 0%, #14141c 70%, #08080d 100%);
    color: rgba(180,200,230,.85);
}
.cg-step-preview-audio svg {
    width: 42%;
    height: 42%;
}
/* Done state: result image becomes full-bleed and the tool icon fades
   out of the way. No more hover gating — the user always sees the
   finished output, mirroring the "stacked completed effect" tile in the
   mockup. */
.cg-step-done .cg-step-preview:not(:empty) {
    opacity: 1;
    pointer-events: auto;
}
.cg-step-done .cg-step-tool-icon {
    opacity: 0;
}
/* Tile is no longer interactive on hover (nothing extra to reveal). */
.cg-step-done {
    cursor: default;
}

/* ── 8-bit scanline overlay — visible only when step is active ── */
.cg-step-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 6px;
    opacity: 0;
    transition: opacity .15s ease;
}
.cg-step-active .cg-step-scanline { opacity: 1; }

/* The horizontal sweep line that travels top-to-bottom */
.cg-step-scanline-line {
    position: absolute;
    left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg,
        transparent 0%,
        rgba(242,139,60,.95) 20%,
        rgba(255,210,150,1) 50%,
        rgba(242,139,60,.95) 80%,
        transparent 100%);
    box-shadow: 0 0 12px rgba(242,139,60,.9), 0 0 4px rgba(255,210,150,1);
    animation: cgStepScanlineSweep 1.6s linear infinite;
}

/* The 8-bit grid overlay — gives the "rendering on retro CRT" feel */
.cg-step-scanline-grid {
    position: absolute;
    inset: 0;
    background-image:
        repeating-linear-gradient(0deg,
            rgba(242,139,60,.08) 0px,
            rgba(242,139,60,.08) 1px,
            transparent 1px,
            transparent 4px),
        repeating-linear-gradient(90deg,
            rgba(242,139,60,.06) 0px,
            rgba(242,139,60,.06) 1px,
            transparent 1px,
            transparent 4px);
    mix-blend-mode: screen;
    animation: cgStepGridFlicker 0.9s steps(3) infinite;
}

@keyframes cgStepScanlineSweep {
    0%   { top: -10%; opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { top: 110%; opacity: 0; }
}
@keyframes cgStepGridFlicker {
    0%, 100% { opacity: .55; }
    33%      { opacity: .85; }
    66%      { opacity: .4; }
}

/* ── "PLEASE STAND BY" broadcast slate ───────────────────────────────────
   Visible only when a step is in the .cg-step-up-next state — the immediate
   pending step downstream of the active one. Replaces the original 7-bar
   SMPTE colour-bars pattern, which compressed to unreadable slivers in a
   110px square and clipped its "WAITING FOR SIGNAL" label. The slate keeps
   the same broadcast-nostalgia metaphor (late-night TV test card) but is
   built around big legible type instead of tiny colour bands, so it reads
   at every tile size from mobile up. Pure CSS — no images, no JS. */
.cg-step-standby {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    border-radius: 6px;
    opacity: 0;
    z-index: 2;
    transition: opacity .2s ease;
    /* Deep broadcast blue (NTSC blue, ~Pantone 286) with a soft vignette
       so the centred mark + text reads as the focal point. */
    background:
        radial-gradient(ellipse at center, #1c3b8a 0%, #0d1f4d 70%, #050d24 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    /* Subtle CRT scan lines for the broadcast-card feel. */
    background-image:
        repeating-linear-gradient(0deg,
            rgba(0,0,0,.16) 0px,
            rgba(0,0,0,.16) 1px,
            transparent 1px,
            transparent 3px),
        radial-gradient(ellipse at center, #1c3b8a 0%, #0d1f4d 70%, #050d24 100%);
}
/* Slate is shown on EVERY node that has not rendered yet:
   - up-next pipeline step (immediate next)
   - further-out pending pipeline steps
   - the final Result tile while the job is still processing
   This is what makes every tool's render panel look identical to Hero —
   no node ever appears as a faded thumbnail or empty spinner; either it
   has its rendered output or it broadcasts PLEASE STAND BY. */
.cg-step-up-next .cg-step-standby,
.cg-step-pending .cg-step-standby,
.cg-node-output.cg-node-pending .cg-step-standby { opacity: 1; }

/* Centred test-card crosshair + ring — pure CSS test-pattern stand-in for
   the old Indian-head circle. Sized small so it doesn't crowd the text. */
.cg-step-standby-mark {
    position: relative;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
}
.cg-step-standby-mark-ring {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(255,255,255,.55);
    border-radius: 50%;
    box-shadow: inset 0 0 0 1px rgba(0,0,0,.35);
}
.cg-step-standby-mark-x,
.cg-step-standby-mark-y {
    position: absolute;
    background: rgba(255,255,255,.55);
}
.cg-step-standby-mark-x {
    top: 50%; left: 4px; right: 4px;
    height: 1px;
    transform: translateY(-.5px);
}
.cg-step-standby-mark-y {
    left: 50%; top: 4px; bottom: 4px;
    width: 1px;
    transform: translateX(-.5px);
}

/* Two-line "PLEASE / STAND BY" caption — the part that does the work.
   Broadcast condensed display feel via heavy weight + tight letter
   spacing on STAND BY, with a slim PLEASE above. */
.cg-step-standby-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    line-height: 1;
    text-shadow: 0 1px 0 rgba(0,0,0,.5);
}
.cg-step-standby-line1 {
    font-family: 'SF Mono', 'Monaco', 'Menlo', 'Courier New', monospace;
    font-size: .52rem;
    font-weight: 600;
    letter-spacing: .28em;
    color: rgba(255,255,255,.78);
    margin-bottom: 3px;
    /* Visual indent so the wider "STAND BY" centres optically. */
    padding-left: .28em;
}
.cg-step-standby-line2 {
    font-family: 'Helvetica Neue', 'Arial Narrow', 'Inter', sans-serif;
    font-size: .82rem;
    font-weight: 800;
    letter-spacing: .04em;
    color: #fff;
    /* Subtle blink so the slate reads "live but waiting", not frozen. */
    animation: cgStandbyBlink 2.6s ease-in-out infinite;
}
@keyframes cgStandbyBlink {
    0%, 70%, 100% { opacity: 1; }
    80%, 90%      { opacity: .55; }
}

/* While the slate is up, hide the thumbnail underneath — the tile should
   read as a broadcast card, not a faded preview. Applies to all not-yet-
   rendered states (up-next + further-out pending) and the Result tile. */
.cg-step-up-next .cg-step-icon img,
.cg-step-up-next .cg-step-icon video,
.cg-step-pending .cg-step-icon img,
.cg-step-pending .cg-step-icon video {
    visibility: hidden;
}
.cg-step-up-next .cg-node-icon-empty,
.cg-step-pending .cg-node-icon-empty,
.cg-node-output.cg-node-pending .cg-node-icon-empty {
    display: none;
}
.dr-queue-section .cg-step-up-next {
    /* Lift the up-next node slightly — "ready, on standby" rather than dim */
    border-color: rgba(120,180,255,.35);
    opacity: .92;
}
.cg-step-up-next .cg-step-engine-badge {
    color: rgba(120,180,255,.55);
}

/* On very narrow tiles (mobile / squashed grids) the type scales down a
   touch and the crosshair drops to keep the slate uncluttered. */
@media (max-width: 600px) {
    .cg-step-standby-line1 { font-size: .46rem; letter-spacing: .22em; }
    .cg-step-standby-line2 { font-size: .72rem; }
    .cg-step-standby-mark  { width: 22px; height: 22px; }
}

/* ── Done badge (✓) — top-right corner, only visible when step is done ── */
.cg-step-done-badge {
    position: absolute;
    top: 4px; right: 4px;
    width: 18px; height: 18px;
    border-radius: 50%;
    background: #6ddc8c;
    color: #0a0a12;
    font-size: .8rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
    opacity: 0;
    transform: scale(.5);
    transition: opacity .25s ease, transform .25s cubic-bezier(.34,1.56,.64,1);
    box-shadow: 0 2px 6px rgba(0,0,0,.4);
}
.cg-step-done .cg-step-done-badge {
    opacity: 1;
    transform: scale(1);
}

/* ── Input chips — collapsed inputs inside the stacked completed tile ──
   Renders only on the LAST step tile when the whole pipeline is done
   (`.cg-step-stacked` class set by `_pipeline_strip.html`). Replaces the
   separate INPUT columns that used to live to the left of the strip,
   which made each effect take 3+ tiles of horizontal space. With chips
   inside, every finished effect collapses to ONE tile — the strip grows
   by one node per effect, never blowing out the row.

   Chips sit in the bottom-left corner so the result image (which fills
   the tile via .cg-step-preview) stays the dominant visual. They're
   intentionally tiny — they're a "what fed this" recall hint, not a
   thumbnail viewer. The Build Detail panel below keeps the full-size
   originals for inspection. */

/* ── Input card deck (multiple inputs stacked like playing cards) ──────────
   Replaces the old side-by-side INPUT tiles with arrows between them.
   The container takes up the space of ONE tile; each .cg-node-input card is
   absolutely positioned and offset/rotated so earlier cards peek out from
   behind the top card like a physical deck.
   Top card (last in DOM) has no transform (depth = 0).
   Each card deeper in the stack gets: translate(-5px, 5px) rotate(-2deg)
   per depth level — set via inline style from Jinja2. */
.cg-node-input-stack {
    position: relative;
    /* Match the .dr-queue-section .cg-node sizing so the deck looks like
       a single tile. Width/height come from the contained .cg-node cards. */
    width: min(140px, 100%);
    /* Extra height to accommodate the offset cards peeking out at the bottom-left */
    height: 140px;
    flex-shrink: 0;
}
.cg-node-input-stack .cg-node-input {
    position: absolute;
    inset: 0;
    /* transition so cards animate into position if they re-render */
    transition: transform .25s ease, box-shadow .2s;
    /* override the normal dr-queue-section width/max-width */
    width: 100%;
    max-width: unset;
}
/* Single-input: no stacking needed, render flat */
.cg-node-input-stack--single .cg-node-input {
    position: relative;
    inset: unset;
    transform: none !important;
}
.cg-node-input-stack--single {
    height: auto;
    width: min(140px, 100%);
}
/* Count badge — bottom-right, shows how many inputs are stacked */
.cg-input-stack-count {
    position: absolute;
    bottom: 4px;
    right: 4px;
    background: rgba(120,180,255,.85);
    color: #fff;
    font-size: .6rem;
    font-weight: 700;
    line-height: 1;
    padding: 2px 5px;
    border-radius: 8px;
    z-index: 20;
    pointer-events: none;
    letter-spacing: .04em;
}
@media (max-width: 599px) {
    .cg-node-input-stack { width: min(110px, 100%); height: 120px; }
}

/* ── cgc-step-wrapper: arrow + tile bundled for JS show/hide ──────────────
   Each pipeline step is wrapped in this so hiding one step also hides its
   leading arrow. JS sets display:none on the wrapper; we keep it flex so
   the arrow and tile sit in the same flow as the parent dr-queue-section. */
.cgc-step-wrapper {
    display: contents; /* transparent to flex layout by default */
}

/* ── "+N more steps" queue badge on the up-next tile ─────────────────────
   JS populates and shows this badge (display:none by default).
   Positioned bottom-right of the step tile, inside .cg-node which is
   position:relative. */
.cg-step-queue-more {
    position: absolute;
    bottom: -6px;
    right: -6px;
    background: #3b82f6;
    color: #fff;
    font-size: .6rem;
    font-weight: 800;
    line-height: 1;
    padding: 3px 6px;
    border-radius: 10px;
    border: 1.5px solid #1e3a5f;
    z-index: 20;
    pointer-events: none;
    letter-spacing: .04em;
    white-space: nowrap;
}

.cg-step-input-chips {
    position: absolute;
    left: 5px;
    bottom: 5px;
    display: flex;
    gap: 3px;
    z-index: 3;
    pointer-events: none;
}
.cg-step-input-chip {
    width: 22px;
    height: 22px;
    border-radius: 4px;
    overflow: hidden;
    background: #1a1a22;
    border: 1.5px solid rgba(0,0,0,.55);
    box-shadow: 0 1px 3px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.18);
    flex-shrink: 0;
}
.cg-step-input-chip img,
.cg-step-input-chip video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.cg-step-input-chip-audio {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.7);
}
.cg-step-input-chip-audio svg {
    width: 60%;
    height: 60%;
}
.cg-step-input-chip-more {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .58rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    background: rgba(0,0,0,.65);
    letter-spacing: .02em;
}

/* Stacked-tile polish — green border already comes from .cg-step-done
   (rule above at .dr-queue-section .cg-step-done). Add a subtle inner
   ring so the tile reads as a "completed unit" rather than just a node
   that happens to have a thumbnail. */
.cg-step-stacked {
    box-shadow: 0 0 0 1px rgba(100,220,140,.18) inset, 0 4px 12px rgba(0,0,0,.35);
}
@media (max-width: 600px) {
    .cg-step-input-chip { width: 18px; height: 18px; border-width: 1px; }
    .cg-step-input-chip-more { font-size: .5rem; }
    .cg-step-input-chips { left: 3px; bottom: 3px; gap: 2px; }
}

/* ── Best-in-Class seal — DEPRECATED (per-step) ──────────────────────────
   The per-step seal cluttered the pipeline. Replaced by ONE consolidated
   .cg-bic-badge in the workflow header that opens a popover listing every
   step's chosen engine. These rules are kept hidden so any stale browser
   cache or older template render won't paint orphan seals. */
.cg-bic-stamp,
.cg-bic-popover { display: none !important; }
.cg-bic-stamp-noop {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(195, 50, 50, 0.08);
    border: 1.5px solid rgba(195, 50, 50, 0.55);
    color: rgba(220, 90, 90, 0.95);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-transform: uppercase;
    font-family: 'SF Mono', 'Monaco', 'Menlo', monospace;
    transform: rotate(-8deg);
    z-index: 3;
    /* Inset shadow gives the slightly imperfect "inked stamp" feel */
    box-shadow: inset 0 0 0 0.5px rgba(195, 50, 50, 0.2),
                0 1px 4px rgba(0,0,0,.3);
    opacity: .85;
    padding: 2px 0 0;
    cursor: help;
    transition: transform .18s cubic-bezier(.34,1.56,.64,1),
                opacity .18s ease,
                box-shadow .18s ease;
}
.cg-bic-stamp:hover,
.cg-bic-stamp:focus-visible {
    opacity: 1;
    transform: rotate(-8deg) scale(1.06);
    box-shadow: inset 0 0 0 0.5px rgba(195, 50, 50, 0.3),
                0 2px 10px rgba(220, 90, 90, .35);
    outline: none;
}
.cg-bic-stamp[aria-expanded="true"] {
    opacity: 1;
    transform: rotate(-8deg) scale(1.08);
}
.cg-bic-stamp-line {
    font-size: .42rem;
    letter-spacing: .04em;
    line-height: 1.05;
    font-weight: 700;
}
.cg-bic-stamp-star {
    font-size: .82rem;
    line-height: 1;
    margin-top: 2px;
    /* Star is the focal point — slightly brighter than the text */
    text-shadow: 0 0 6px rgba(220, 90, 90, 0.5);
}
/* Active step: seal glows slightly */
.cg-step-active .cg-bic-stamp {
    border-color: rgba(220, 90, 90, 0.85);
    color: rgba(255, 130, 130, 1);
    opacity: 1;
}
.cg-step-active .cg-bic-stamp-star {
    text-shadow: 0 0 8px rgba(255, 130, 130, 0.85);
}
/* Done step: seal turns green to match the completion theme */
.cg-step-done .cg-bic-stamp {
    background: rgba(100, 220, 140, 0.08);
    border-color: rgba(100, 220, 140, 0.6);
    color: rgba(140, 240, 170, 0.95);
    opacity: 1;
}
.cg-step-done .cg-bic-stamp-star {
    text-shadow: 0 0 6px rgba(140, 240, 170, 0.6);
}

/* Smaller seal on mobile */
@media (max-width: 599px) {
    .cg-bic-stamp { width: 34px; height: 34px; bottom: -5px; right: -5px; padding-top: 1px; }
    .cg-bic-stamp-line { font-size: .32rem; }
    .cg-bic-stamp-star { font-size: .65rem; margin-top: 1px; }
}

/* Engine badge — replaces the generic "WORKFLOW" pill above the node icon */
.cg-step-engine-badge {
    color: #78b4ff;
    font-size: .55rem;
    letter-spacing: .08em;
}

/* ══════════════════════════════════════════════════════════════════════════
   WORKFLOW LAYOUT EDITOR — admin-only in-page panel editor
   Gear icon → overlay panel → drag chips between step columns → save JSON.
   ══════════════════════════════════════════════════════════════════════════ */

/* Gear icon — appears bottom-right of the workflow workspace (admin only) */
.wf-layout-edit-icon {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 20;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.15);
    color: rgba(255,255,255,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}
.wf-layout-edit-icon:hover {
    background: rgba(249, 115, 22, .15);
    border-color: rgba(249, 115, 22, .5);
    color: #f97316;
}

/* Overlay backdrop */
.wf-layout-editor-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0,0,0,.55);
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    opacity: 0;
    transition: opacity .28s ease;
    pointer-events: none;
}
.wf-layout-editor-overlay.is-open {
    opacity: 1;
    pointer-events: auto;
}

/* Editor panel — slides in from the right */
.wf-layout-editor-panel {
    width: min(92vw, 860px);
    height: 100vh;
    background: #1a1a24;
    border-left: 1px solid rgba(255,255,255,.1);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform .3s cubic-bezier(.4,0,.2,1);
    overflow: hidden;
}
.wf-layout-editor-overlay.is-open .wf-layout-editor-panel {
    transform: translateX(0);
}

.wf-layout-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 12px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.wf-layout-editor-header h2 { margin: 0; font-size: 1.1rem; }
.wf-layout-editor-close {
    background: none;
    border: none;
    color: rgba(255,255,255,.6);
    font-size: 1.5rem;
    cursor: pointer;
    line-height: 1;
    padding: 4px 8px;
    border-radius: 4px;
    transition: background .12s, color .12s;
}
.wf-layout-editor-close:hover { background: rgba(255,255,255,.08); color: #fff; }

.wf-layout-editor-hint {
    padding: 8px 24px;
    font-size: .78rem;
    flex-shrink: 0;
}

/* Toolbar: add step / clear layout */
.wf-le-toolbar {
    display: flex;
    gap: 8px;
    padding: 8px 24px;
    flex-shrink: 0;
}

/* Step columns container — horizontal scroll for many steps */
.wf-le-columns {
    display: flex;
    gap: 12px;
    padding: 12px 24px 0;
    overflow-x: auto;
    flex: 1;
    align-items: flex-start;
}

.wf-le-column {
    min-width: 180px;
    max-width: 220px;
    flex-shrink: 0;
    background: rgba(255,255,255,.04);
    border: 1px solid rgba(255,255,255,.09);
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wf-le-col-header {
    display: flex;
    align-items: center;
    gap: 6px;
}
.wf-le-step-label {
    flex: 1;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 6px;
    color: #fff;
    font-size: .8rem;
    padding: 5px 8px;
    min-width: 0;
}
.wf-le-step-label:focus { outline: none; border-color: #f97316; }
.wf-le-remove-step {
    background: none;
    border: none;
    color: rgba(255,255,255,.35);
    cursor: pointer;
    font-size: 1rem;
    padding: 2px 5px;
    border-radius: 4px;
    flex-shrink: 0;
    transition: background .12s, color .12s;
}
.wf-le-remove-step:hover { background: rgba(220,60,60,.15); color: #f97777; }

/* Chip list — droppable zone */
.wf-le-chip-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 60px;
    border-radius: 6px;
    padding: 4px;
    transition: background .15s;
}
.wf-le-chip-list.wf-le-drop-target {
    background: rgba(249, 115, 22, .1);
    outline: 2px dashed rgba(249, 115, 22, .5);
    outline-offset: -2px;
}

/* Element chips */
.wf-le-chip {
    padding: 7px 10px;
    border-radius: 6px;
    font-size: .76rem;
    font-weight: 500;
    cursor: grab;
    border: 1px solid transparent;
    transition: opacity .15s, box-shadow .15s;
    user-select: none;
}
.wf-le-chip:active { cursor: grabbing; }
.wf-le-chip.is-dragging { opacity: .4; }

.wf-le-chip--input  { background: rgba(96,165,250,.12); border-color: rgba(96,165,250,.3);  color: #93c5fd; }
.wf-le-chip--option { background: rgba(167,139,250,.12);border-color: rgba(167,139,250,.3); color: #c4b5fd; }
.wf-le-chip--render { background: rgba(249,115,22,.12); border-color: rgba(249,115,22,.3);  color: #fdba74; }

/* Save bar at the bottom */
.wf-le-save-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-top: 1px solid rgba(255,255,255,.08);
    flex-shrink: 0;
}
.wf-le-status { font-size: .8rem; }

/* ══════════════════════════════════════════════════════════════════════════
   PANEL WIZARD — horizontal slide-through stepper
   Usage: wrap sections in .wf-wizard > .wf-wizard-step elements,
   then call initWfWizard() from wf_wizard.js.
   ══════════════════════════════════════════════════════════════════════════ */

.wf-wizard {
    position: relative;
    overflow: hidden;
    /* Height is determined by the active step — set min to avoid collapse during transition */
    min-height: 420px;
}

/* All non-active steps must be position:absolute so they don't push the container width.
   Only the active step is position:relative (in flow) so it defines the container height. */
.wf-wizard-step {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateX(100%);
    transition: transform .38s cubic-bezier(.4, 0, .2, 1),
                opacity .28s ease;
    opacity: 0;
    pointer-events: none;
}

.wf-wizard-step.is-behind {
    transform: translateX(-100%);
}

.wf-wizard-step.is-active {
    position: relative; /* back in flow — defines the wizard container height */
    transform: translateX(0);
    opacity: 1;
    pointer-events: auto;
}

/* Nav bar injected by wf_wizard.js */
.wf-wizard-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0 6px;
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 20px;
}

.wf-wizard-nav-back {
    background: transparent;
    border: 1.5px solid rgba(255,255,255,.2);
    color: rgba(255,255,255,.75);
    border-radius: 8px;
    padding: 9px 20px;
    font-size: .85rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.wf-wizard-nav-back:hover {
    border-color: rgba(255,255,255,.45);
    color: #fff;
    background: rgba(255,255,255,.04);
}
.wf-wizard-nav-back[hidden] { display: none; }

.wf-wizard-nav-next {
    background: var(--accent, #f97316);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 28px;
    font-size: .92rem;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    transition: background .15s, opacity .15s, transform .1s;
}
.wf-wizard-nav-next:hover:not(:disabled) {
    background: #ea6b0f;
    transform: translateY(-1px);
}
.wf-wizard-nav-next:disabled {
    opacity: .38;
    cursor: not-allowed;
    transform: none;
}
.wf-wizard-nav-next[hidden] { display: none; }

/* Step indicator dots */
.wf-wizard-stepper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.wf-wizard-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,.2);
    transition: background .2s, transform .2s;
}

.wf-wizard-dot.is-done {
    background: rgba(255,255,255,.45);
}

.wf-wizard-dot.is-current {
    background: var(--accent, #f97316);
    transform: scale(1.35);
}

/* Step label shown next to dots on wider screens */
.wf-wizard-step-label {
    font-size: .78rem;
    color: rgba(255,255,255,.5);
    letter-spacing: .04em;
    margin-left: 4px;
}

/* Shared last-step render panel shell */
.wf-wizard-render-panel {
    margin-bottom: 0;
}

/* The shared render bar partial — identical across every wizard tool */
.wf-wizard-render-bar {
    margin-top: 20px;
    border-top: 1px solid rgba(255,255,255,.08);
    padding-top: 16px;
}

/* Gate shake animation — plays when user clicks Next on a blocked step */
@keyframes wf-wizard-shake {
    0%, 100% { transform: translateX(0); }
    20%       { transform: translateX(-6px); }
    40%       { transform: translateX(6px); }
    60%       { transform: translateX(-4px); }
    80%       { transform: translateX(4px); }
}
.wf-wizard-step--shake { animation: wf-wizard-shake .35s ease; }

@media (max-width: 599px) {
    .wf-wizard-nav { padding: 12px 0 4px; }
    .wf-wizard-nav-next { padding: 9px 20px; font-size: .85rem; }
    .wf-wizard-step-label { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   DROP ZONE MAKEOVER — new visual design for all drop zones
   ═══════════════════════════════════════════════════════════════════════ */

/* Page body: left rail + form side by side */
.wf-page-body {
    display: contents; /* default: single-column, form fills screen */
}
.demo-effect-screen:has(.wf-media-rail) .wf-page-body {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 6px;
    min-height: 0;
    overflow: hidden;
    flex: 1 1 auto;
}
/* When rail is present, the screen becomes a 2-row grid (topbar + body) */
.demo-effect-screen:has(.wf-media-rail) {
    grid-template-rows: auto minmax(0, 1fr);
}

/* ── Left Media Rail ────────────────────────────────────────────────── */
.wf-media-rail {
    --rail-w: 200px;
    width: var(--rail-w);
    min-width: var(--rail-w);
    max-width: var(--rail-w); /* fixed — no user resize */
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    overflow: hidden;
    position: relative;
    padding: 8px 26px 8px 8px; /* right padding reserves room for full-height collapse strip */
    box-sizing: border-box;
    transition: width 280ms cubic-bezier(0.4,0,0.2,1),
                min-width 280ms cubic-bezier(0.4,0,0.2,1),
                opacity 200ms ease,
                padding 280ms ease;
    align-self: stretch;
}
.wf-media-rail.is-collapsed {
    width: 28px;
    min-width: 28px;
    padding-left: 4px;
    padding-right: 4px;
    overflow: hidden;
}

/* Resize drag handle — right edge of rail (used by both /wf/ and Studio pages) */
.wf-rail-resize-handle {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: col-resize;
    z-index: 10;
    background: transparent;
    transition: background .15s;
}
.wf-rail-resize-handle:hover,
.wf-media-rail.is-resizing .wf-rail-resize-handle,
.workspace-rail.is-resizing ~ .studio-rail-resize-handle {
    background: rgba(242,139,60,.35);
}

/* Studio rail resize handle styles now live in menu.html <style> block,
   driven by --studio-rail-w CSS var. Nothing needed here. */

/* ── Ghost-line drag indicator ──────────────────────────────────────────────
   Shown during rail resize drag. Moves via transform only — fully GPU
   composited. Zero layout recalculation. Same pattern as VS Code / Figma.
   ─────────────────────────────────────────────────────────────────────────── */
.rail-resize-ghost {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;                          /* origin — JS sets translateX */
    width: 2px;
    background: var(--aifi-accent, #f28b3c);
    opacity: 0.75;
    z-index: 9999;
    pointer-events: none;
    will-change: transform;           /* promote to own compositor layer */
}
.wf-media-rail.is-collapsed .wf-rail-tabs,
.wf-media-rail.is-collapsed .wf-rail-panel {
    opacity: 0;
    pointer-events: none;
    transition: opacity 150ms ease;
}
.wf-media-rail:not(.is-collapsed) .wf-rail-collapse-btn svg {
    transform: none;
}
.wf-media-rail.is-collapsed .wf-rail-collapse-btn svg {
    transform: rotate(180deg);
}

/* Tab strip */
.wf-rail-tabs {
    display: flex;
    gap: 2px;
    padding: 0 2px 6px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 6px;
    flex-shrink: 0;
}
.wf-rail-tab {
    flex: 1;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,.4);
    cursor: pointer;
    padding: 6px 4px;
    transition: background .15s, color .15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
}
.wf-rail-tab:hover { color: rgba(255,255,255,.78); background: rgba(255,255,255,.06); }
.wf-rail-tab.is-active { color: #fff; background: rgba(255,255,255,.12); }
.wf-rail-count {
    font-size: .6rem;
    font-weight: 700;
    background: rgba(255,255,255,.18);
    border-radius: 999px;
    padding: 1px 5px;
    line-height: 1.4;
    min-width: 16px;
    text-align: center;
}
.wf-rail-tab.is-active .wf-rail-count { background: rgba(255,255,255,.3); }
.wf-rail-count:empty { display: none; }

/* Panels */
.wf-rail-panel { display: none; flex-direction: column; min-height: 0; flex: 1 1 auto; overflow: hidden; }
.wf-rail-panel.is-active { display: flex; }

/* ── Your Bin ────────────────────────────────────────────────────────── */

/* Compact header row: "Your Bin" title + "+" button */
.wf-bin-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 2px 2px 6px;
    flex-shrink: 0;
    gap: 6px;
}
.wf-bin-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
}
.wf-bin-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(255,255,255,.07);
    border: 1px solid rgba(255,255,255,.12);
    color: rgba(255,255,255,.6);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    flex-shrink: 0;
}
.wf-bin-add-btn:hover { background: rgba(242,139,60,.18); border-color: rgba(242,139,60,.4); color: #f28b3c; }

/* Drop-target wrapper — invisible by default, lights up on drag-over */
.wf-bin-drop-wrap {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
    overflow-y: auto;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color .15s, background .15s;
    gap: 5px;
}
.wf-bin-drop-wrap::-webkit-scrollbar { width: 3px; }
.wf-bin-drop-wrap::-webkit-scrollbar-track { background: transparent; }
.wf-bin-drop-wrap::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.wf-bin-drop-wrap.is-drop-target {
    border-color: rgba(242,139,60,.45);
    background: rgba(242,139,60,.04);
}

/* Ghost text when user has no uploads yet */
.wf-bin-body:empty::before {
    content: "Your images appear here";
    display: block;
    grid-column: 1 / -1;
    font-size: .68rem;
    color: rgba(255,255,255,.2);
    text-align: center;
    padding: 12px 4px 4px;
    pointer-events: none;
}

/* Sample images row — sits below user uploads */
.wf-bin-samples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding-bottom: 4px;
}

/* X remove button on each bin asset */
.wf-bin-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.65);
    color: rgba(255,255,255,.8);
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s;
    padding: 0;
    z-index: 5;
}
.wf-rail-asset:hover .wf-bin-remove { opacity: 1; }
.wf-bin-remove:hover { background: #e53e3e; color: #fff; }

/* Sample badge — tiny "sample" indicator */
.wf-bin-sample::after {
    content: "sample";
    position: absolute;
    bottom: 3px;
    left: 3px;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.5);
    border-radius: 3px;
    padding: 1px 4px;
    pointer-events: none;
}

/* Old importer — now just a drop wrapper, keep selector for any legacy fallback */
.wf-rail-importer { display: contents; }

/* ── Studio "Your Bin" — compact header + drop-wrap ──────────────────── */
.studio-bin-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px 6px;
    flex-shrink: 0;
}
.studio-bin-title {
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: rgba(255,255,255,.45);
    flex: 1;
}
.studio-bin-add-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,.15);
    background: transparent;
    color: rgba(255,255,255,.5);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s;
}
.studio-bin-add-btn:hover { background: rgba(242,139,60,.18); border-color: rgba(242,139,60,.4); color: #f28b3c; }
.studio-bin-status {
    font-size: .65rem;
    color: rgba(255,255,255,.4);
    flex-shrink: 0;
    max-width: 80px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.studio-bin-status.is-error { color: #fc8181; }

/* Drop-wrap scrollable container */
.studio-bin-drop-wrap {
    flex: 1 1 auto;
    min-height: 0;
    border-radius: 8px;
    border: 1px solid transparent;
    transition: border-color .15s, background .15s;
    padding: 4px;
}
.studio-bin-drop-wrap.is-drop-target {
    border-color: rgba(242,139,60,.45);
    background: rgba(242,139,60,.04);
}

/* Ghost text when user has no uploads */
[data-inputs-rail] .rail-empty-state[data-rail-empty]::before {
    content: "Your images appear here";
    display: block;
    font-size: .68rem;
    color: rgba(255,255,255,.2);
    text-align: center;
    padding: 12px 4px 4px;
    pointer-events: none;
}
[data-inputs-rail] .rail-empty-state[data-rail-empty] { min-height: 36px; }

/* Sample images row below user uploads */
.studio-bin-samples {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    padding-top: 4px;
}

/* X remove button on each bin asset */
.bin-remove-btn {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,.65);
    color: rgba(255,255,255,.8);
    font-size: .7rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .15s, background .15s;
    padding: 0;
    z-index: 5;
}
.history-asset:hover .bin-remove-btn,
.studio-bin-sample:hover .bin-remove-btn { opacity: 1; }
.bin-remove-btn:hover { background: #e53e3e; color: #fff; }

/* "sample" badge on preset images */
.studio-bin-sample {
    position: relative;
}
.studio-bin-sample::after {
    content: "sample";
    position: absolute;
    bottom: 3px;
    left: 3px;
    font-size: .52rem;
    font-weight: 700;
    letter-spacing: .04em;
    background: rgba(0,0,0,.55);
    color: rgba(255,255,255,.5);
    border-radius: 3px;
    padding: 1px 4px;
    pointer-events: none;
}

/* Scrollable asset area (renders tab + library) */
.wf-rail-body {
    flex: 1 1 auto;
    overflow-y: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
    align-content: start;
    padding-bottom: 4px;
}
.wf-rail-body::-webkit-scrollbar { width: 3px; }
.wf-rail-body::-webkit-scrollbar-track { background: transparent; }
.wf-rail-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,.2); border-radius: 3px; }
.wf-rail-empty {
    grid-column: 1 / -1;
    font-size: .75rem;
    line-height: 1.5;
    padding: 8px 4px;
    text-align: center;
}
/* Bin body lives inside the scrolling drop-wrap, so it doesn't scroll itself */
.wf-bin-body {
    overflow: visible;
    flex: none;
}

/* Individual asset cards in rail */
.wf-rail-asset {
    border-radius: 8px;
    overflow: hidden;
    cursor: grab;
    aspect-ratio: 1;
    background: rgba(255,255,255,.05);
    position: relative;
    transition: transform .12s, box-shadow .12s;
}
.wf-rail-asset:hover { transform: scale(1.04); box-shadow: 0 4px 14px rgba(0,0,0,.4); }
.wf-rail-asset.is-dragging { opacity: .5; }
.wf-rail-asset img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Library section — account render history inside the renders tab */
.wf-rail-library {
    /* Not a scroll container — lives inside the unified media body scroller */
    border-top: 1px solid rgba(255,255,255,.08);
    margin-top: 6px;
    padding-top: 4px;
}
.wf-rail-library-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 6px 6px;
    font-size: .65rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
}
.wf-rail-library-link {
    font-size: .65rem;
    font-weight: 600;
    color: rgba(242,139,60,.7);
    text-decoration: none;
    letter-spacing: 0;
    text-transform: none;
}
.wf-rail-library-link:hover { color: #f28b3c; }

/* Collapse strip — full-height vertical button on the right edge of the rail.
   Mirrors the studio rail's .rail-collapse-strip / .rail-reopen-strip so collapse
   and re-open feel symmetric (no tiny arrow buttons). */
.wf-rail-collapse-btn {
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    width: 22px;
    border: none;
    border-left: 1px solid rgba(255,255,255,.07);
    border-radius: 0;
    background: rgba(35,38,48,.92);
    color: rgba(255,255,255,.55);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    z-index: 25;
    transition: color .15s, background .15s;
}
.wf-rail-collapse-btn:hover { color: #f28b3c; background: rgba(242,139,60,.18); }
.wf-rail-collapse-btn svg { transition: transform 280ms cubic-bezier(0.4,0,0.2,1); flex-shrink: 0; }
.wf-rail-collapse-label {
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-size: 0.56rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    line-height: 1;
}
/* When the rail is collapsed (28px wide), drop the divider since there's nothing
   to its left — the strip IS the rail. */
.wf-media-rail.is-collapsed .wf-rail-collapse-btn { border-left: none; }

/* ── Drop Zone Idle State ───────────────────────────────────────────── */
.wf-dz-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 28px 20px 22px;
    text-align: center;
    width: 100%;
}
/* Hide the old dropzone-layout when new idle state is present */
.paste-box .wf-dz-idle ~ .dropzone-layout { display: none; }

.wf-dz-icon {
    color: rgba(255,255,255,.55);
    margin-bottom: 4px;
    flex-shrink: 0;
}
[data-image-panel]:hover .wf-dz-icon,
[data-image-panel].is-drop-target .wf-dz-icon {
    color: rgba(72,200,230,.8);
}
[data-image-panel].has-preview .wf-dz-idle { display: none; }

.wf-dz-title {
    font-size: 1rem;
    font-weight: 700;
    color: rgba(255,255,255,.85);
    margin: 0;
    line-height: 1.2;
}
.wf-dz-sub {
    font-size: .78rem;
    margin: 0;
    color: rgba(255,255,255,.38);
}

/* Action buttons row */
.wf-dz-actions {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: center;
    margin-top: 8px;
}
.wf-dz-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border: 1px solid rgba(255,255,255,.16);
    border-radius: 999px;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.7);
    font: inherit;
    font-size: .78rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, background .15s, color .15s;
    white-space: nowrap;
    text-decoration: none;
}
.wf-dz-btn:hover {
    border-color: rgba(255,255,255,.3);
    background: rgba(255,255,255,.1);
    color: #fff;
}
.wf-dz-btn--primary {
    border-color: rgba(242,139,60,.6);
    background: rgba(242,139,60,.1);
    color: #f28b3c;
}
.wf-dz-btn--primary:hover {
    border-color: rgba(242,139,60,.9);
    background: rgba(242,139,60,.18);
    color: #f5a55a;
}

/* Record button (#37) */
.wf-dz-btn--record {
    border-color: rgba(248,113,113,.5);
    color: #f87171;
}
.wf-dz-btn--record:hover {
    border-color: rgba(248,113,113,.9);
    background: rgba(248,113,113,.1);
}
@keyframes wf-pulse-rec {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .4; transform: scale(0.85); }
}

/* AI source button — subtle accent so it reads as "different mode" */
.wf-dz-btn--ai {
    border-color: rgba(168,85,247,.45);
    color: rgba(192,132,252,.9);
}
.wf-dz-btn--ai:hover {
    border-color: rgba(168,85,247,.8);
    background: rgba(168,85,247,.1);
    color: #c084fc;
}

/* AI source area — inline prompt UI inside the image panel */
.wf-ai-source-area {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid rgba(168,85,247,.22);
    border-radius: 12px;
    background: rgba(168,85,247,.04);
    margin: 4px 0;
}
.wf-ai-source-hint {
    font-size: .78rem;
    color: var(--muted, rgba(255,255,255,.5));
    margin: 0;
    line-height: 1.4;
}
.wf-ai-source-textarea {
    resize: vertical;
    width: 100%;
    box-sizing: border-box;
    min-height: 64px;
    background: rgba(0,0,0,.25);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 8px;
    color: var(--text, #eee);
    font: inherit;
    font-size: .83rem;
    padding: 8px 10px;
    transition: border-color .15s;
}
.wf-ai-source-textarea:focus {
    outline: none;
    border-color: rgba(168,85,247,.5);
}
.wf-ai-source-btns {
    display: flex;
    gap: 6px;
    align-items: center;
}
.wf-ai-gen-btn {
    flex: 1;
}
.wf-ai-regen-btn {
    width: 100%;
    text-align: center;
    border-color: rgba(168,85,247,.45);
    color: rgba(192,132,252,.9);
}
.wf-ai-regen-btn:hover {
    border-color: rgba(168,85,247,.8);
    background: rgba(168,85,247,.1);
    color: #c084fc;
}
.wf-ai-source-spinner {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .78rem;
}

/* Drag-active state: border glows, buttons hide */
.paste-box.is-drop-target .wf-dz-idle .wf-dz-actions,
.paste-box.is-drop-target .wf-dz-idle .wf-dz-sub {
    opacity: 0;
    pointer-events: none;
    transition: opacity .1s;
}
.paste-box.is-drop-target .wf-dz-idle .wf-dz-title {
    color: rgba(72,200,230,.95);
}
.paste-box.is-drop-target .wf-dz-idle .wf-dz-icon {
    color: rgba(72,200,230,.9);
    filter: drop-shadow(0 0 8px rgba(72,200,230,.5));
}

/* Same treatment for video/audio wf-dropzone drag state */
.wf-dropzone.wf-dz-media.is-dragover .wf-dz-idle .wf-dz-actions,
.wf-dropzone.wf-dz-media.is-dragover .wf-dz-idle .wf-dz-sub {
    opacity: 0;
    pointer-events: none;
}
.wf-dropzone.wf-dz-media.is-dragover .wf-dz-idle .wf-dz-title {
    color: rgba(72,200,230,.95);
}
.wf-dropzone.wf-dz-media.is-dragover .wf-dz-idle .wf-dz-icon {
    color: rgba(72,200,230,.9);
    filter: drop-shadow(0 0 8px rgba(72,200,230,.5));
}

/* ── Tools Panel ───────────────────────────────────────────────────── */
.wf-rail-panel--tools {
    display: none;
    flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.wf-rail-panel--tools.is-active { display: flex; }

/* Header: search + view toggle + cat mode toggle */
.wf-tools-header {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    padding: 0 2px 6px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    margin-bottom: 6px;
}
.wf-tools-search {
    flex: 1;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    color: rgba(255,255,255,.85);
    font: inherit;
    font-size: .74rem;
    padding: 5px 8px;
    outline: none;
    min-width: 0;
}
.wf-tools-search::placeholder { color: rgba(255,255,255,.3); }
.wf-tools-search:focus { border-color: rgba(242,139,60,.5); }
.wf-tools-view-btn {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    border: 1px solid rgba(255,255,255,.1);
    border-radius: 6px;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.5);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: color .15s, background .15s;
}
.wf-tools-view-btn:hover { color: #fff; background: rgba(255,255,255,.1); }

/* Grid mode (default): show grid icon active, hide list icon */
.wf-tools-view-icon--list { display: none; }
.wf-tools-view-icon--grid { display: block; }
.wf-tools-panel--list-mode .wf-tools-view-icon--list { display: block; }
.wf-tools-panel--list-mode .wf-tools-view-icon--grid { display: none; }

/* Body: categories left, cards right */
.wf-tools-body {
    display: flex;
    gap: 0;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
}

/* Category nav — text mode (default) */
.wf-tools-cats {
    width: 110px;
    min-width: 110px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
    overflow-y: auto;
    padding-right: 4px;
    border-right: 1px solid rgba(255,255,255,.07);
    margin-right: 5px;
    transition: width .2s ease, min-width .2s ease;
}
.wf-tools-cats::-webkit-scrollbar { display: none; }

/* Icon mode — narrower sidebar, icons only */
.wf-tools-cats.is-icon-mode {
    width: 38px;
    min-width: 38px;
}

.wf-tools-cat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    padding: 6px 4px 6px 6px;
    border-radius: 5px;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    position: relative;
    transition: background .12s;
}
.wf-tools-cat:hover { background: rgba(255,255,255,.06); }
.wf-tools-cat.is-active { background: rgba(255,255,255,.08); }
.wf-tools-cat.is-active::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    bottom: 20%;
    width: 2px;
    border-radius: 2px;
    background: #f28b3c;
}

/* Text mode */
.wf-tools-cat-icon { display: none; flex-shrink: 0; color: rgba(255,255,255,.45); }
.wf-tools-cats.is-icon-mode .wf-tools-cat-icon { display: flex; }
.wf-tools-cat.is-active .wf-tools-cat-icon { color: rgba(255,255,255,.85); }

.wf-tools-cat-name {
    font-size: .7rem;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    white-space: nowrap;
    overflow: visible;
    flex: 1;
    line-height: 1.2;
}
.wf-tools-cat.is-active .wf-tools-cat-name { color: rgba(255,255,255,.92); }
.wf-tools-cats.is-icon-mode .wf-tools-cat-name { display: none; }

.wf-tools-cat-count {
    font-size: .6rem;
    font-weight: 700;
    color: rgba(255,255,255,.28);
    background: rgba(255,255,255,.08);
    border-radius: 4px;
    padding: 1px 4px;
    flex-shrink: 0;
    line-height: 1.4;
}
.wf-tools-cat.is-active .wf-tools-cat-count { color: rgba(255,255,255,.6); background: rgba(255,255,255,.14); }
/* In icon mode, count becomes a small dot/badge overlapping the icon */
.wf-tools-cats.is-icon-mode .wf-tools-cat-count {
    position: absolute;
    top: 3px;
    right: 3px;
    padding: 0 3px;
    font-size: .52rem;
    min-width: 13px;
    text-align: center;
}

/* Workflow cards area */
.wf-tools-cards {
    flex: 1;
    overflow-y: auto;
    min-width: 0;
}
.wf-tools-cards::-webkit-scrollbar { width: 3px; }
.wf-tools-cards::-webkit-scrollbar-track { background: transparent; }
.wf-tools-cards::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18); border-radius: 3px; }

/* ── GRID view (default) — responsive columns via auto-fill ── */
.wf-tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, var(--rail-scale, 82px));
    gap: 4px;
    align-content: start;
    padding-bottom: 8px;
}
.wf-tool-card {
    display: flex;
    flex-direction: column;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: rgba(255,255,255,.07);
    border: 1.5px solid rgba(255,255,255,.16);
    box-shadow: 0 2px 6px rgba(0,0,0,.45);
    transition: border-color .15s, background .15s, transform .13s, box-shadow .15s;
    text-decoration: none;
    outline: none;
}
.wf-tool-card:hover {
    background: rgba(255,255,255,.13);
    border-color: rgba(242,139,60,.7);
    box-shadow: 0 0 0 2px rgba(242,139,60,.25), 0 4px 12px rgba(0,0,0,.55);
    transform: translateY(-2px) scale(1.02);
}
.wf-tool-card:active {
    transform: translateY(0) scale(.98);
    box-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.wf-tool-card.is-current {
    border-color: #f28b3c;
    background: rgba(242,139,60,.14);
    box-shadow: 0 0 0 2px rgba(242,139,60,.45), 0 4px 12px rgba(0,0,0,.55);
}
.wf-tool-card-thumb {
    aspect-ratio: 16/9;
    background: rgba(255,255,255,.05);
    overflow: hidden;
    position: relative;
}
.wf-tool-card-thumb img,
.wf-tool-card-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
/* Subtle bottom-fade so the name label reads on top of any image */
.wf-tool-card-thumb::after {
    content: '';
    position: absolute;
    inset: auto 0 0 0;
    height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,.55) 0%, transparent 100%);
    pointer-events: none;
}
.wf-tool-card-thumb--empty {
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,.15);
    font-size: 1.2rem;
}
.wf-tool-card-name {
    font-size: .68rem;
    font-weight: 700;
    color: rgba(255,255,255,.92);
    background: rgba(0,0,0,.35);
    padding: 4px 6px 5px;
    line-height: 1.25;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: .01em;
    text-align: center;
}
.wf-tool-card.is-current .wf-tool-card-name {
    color: #f9b97e;
    background: rgba(242,139,60,.15);
}

/* Tier badge */
.wf-tool-card-thumb { position: relative; }
.wf-tool-tier {
    position: absolute;
    top: 3px;
    right: 3px;
    font-size: .55rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(242,139,60,.85);
    color: #fff;
    line-height: 1.4;
}

/* ── LIST view ── */
.wf-tools-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding-bottom: 8px;
}
.wf-tool-row {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 6px 6px;
    border-radius: 6px;
    cursor: pointer;
    background: transparent;
    border: none;
    text-align: left;
    width: 100%;
    text-decoration: none;
    transition: background .12s;
}
.wf-tool-row:hover { background: rgba(255,255,255,.07); }
.wf-tool-row.is-current { background: rgba(242,139,60,.08); }
.wf-tool-row-thumb {
    width: 28px;
    height: 20px;
    border-radius: 4px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255,255,255,.07);
}
.wf-tool-row-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wf-tool-row-name {
    font-size: .74rem;
    font-weight: 600;
    color: rgba(255,255,255,.78);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    flex: 1;
}
.wf-tool-row.is-current .wf-tool-row-name { color: #f5a55a; }
.wf-tool-row-type {
    font-size: .6rem;
    color: rgba(255,255,255,.28);
    flex-shrink: 0;
}

/* No-results message */
.wf-tools-empty {
    padding: 12px 4px;
    font-size: .74rem;
    color: rgba(255,255,255,.35);
    text-align: center;
}

/* Mobile: keep existing mobile-upload-row styles, hide new idle on mobile */
@media (max-width: 700px) {
    .wf-media-rail { display: none !important; }
    .demo-effect-screen:has(.wf-media-rail) .wf-page-body {
        grid-template-columns: 1fr;
    }
}

/* Embedded workspace: no rail, single-column */
html.embedded-workspace .wf-media-rail { display: none !important; }
html.embedded-workspace .wf-page-body { display: contents; }


/* ═══════════════════════════════════════════════════════════════════════════
   FAITHTOOLS — CLERGY BRAND THEME
   Applied when <body class="brand-clergy"> (user.brand == "clergy").
   Warm gold/ivory palette. Replaces neon orange accent with sacred gold.
   All sizing is unchanged — only colour and typography decorations change.
   ═══════════════════════════════════════════════════════════════════════════ */