/* ── Step-flow state indicators ─────────────────────────── */
@keyframes step-blink {
    0%, 49% {
        border-color: rgba(56, 189, 116, 0.9);
        box-shadow: var(--shadow), 0 0 0 3px rgba(56, 189, 116, 0.4);
    }
    50%, 100% {
        border-color: rgba(56, 189, 116, 0.08);
        box-shadow: var(--shadow);
    }
}

.section-next {
    animation: step-blink 0.9s step-start infinite;
    transition: none;
}

.section-complete {
    border-color: rgba(56, 189, 116, 0.85) !important;
    box-shadow: var(--shadow), 0 0 0 2px rgba(56, 189, 116, 0.22);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
    animation: none;
}

.shell-header {
    position: sticky;
    top: 0;
    z-index: 10;
    display: grid;
    grid-template-columns: 1fr;
    align-items: start;
    gap: 8px;
    margin-bottom: 6px;
    padding: 10px 12px 10px;
    background:
        linear-gradient(180deg, rgba(24, 27, 33, 0.98), rgba(17, 20, 25, 0.98)),
        linear-gradient(135deg, rgba(242, 139, 60, 0.08), transparent 26%);
    box-shadow:
        0 12px 34px rgba(0, 0, 0, 0.22),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.shell-brandbar {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    gap: 16px;
    min-height: 56px;
}

/* ── Drawer handle — shared tokens for carousel (horizontal) and rail (vertical) ── */
/* Both are flat tabs: same bg, border, color, font. Only orientation differs.        */

/* ── Shared drawer handle tokens ─────────────────────────────────────────────── */
.carousel-expand-tab,
.carousel-collapse-handle {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 16px;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
    border: none;
    border-radius: 0;
    background: rgba(22, 24, 30, 0.82);
    color: rgba(255, 255, 255, 0.28);
    font: inherit;
    font-size: 0.58rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    text-transform: uppercase;
    white-space: nowrap;
    cursor: pointer;
    z-index: 20;
    transition: color 0.15s, background 0.15s;
}
.carousel-expand-tab:hover,
.carousel-collapse-handle:hover {
    background: rgba(35, 38, 48, 0.95);
    color: rgba(255, 255, 255, 0.65);
}

/* Collapse handle: anchored to bottom of shell-mainrow (moved inside mainrow in HTML) */
.carousel-collapse-handle {
    bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
}
/* Show only when carousel is open */
.shell-header:not(.is-carousel-collapsed) .carousel-collapse-handle {
    display: flex;
}

/* Expand tab: sits just below the collapsed header (still in shell-header after mainrow) */
.carousel-expand-tab {
    bottom: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    transform: translateY(100%);  /* pushes it below the header boundary */
}
/* Show only when carousel is collapsed */
.shell-header.is-carousel-collapsed .carousel-expand-tab {
    display: flex;
}

/* shell-mainrow needs position:relative so the collapse handle inside it uses it as anchor */
.page-shell.shell-mode .shell-mainrow {
    position: relative;
}

/* The original Hide/Show pill button stays in the brandbar */
/* Absolutely positioned at right edge of brandbar (which has position: relative).
   This sidesteps the flex/order complexity of shell-mode's brandbar layout. */
.shell-carousel-fold {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px 4px 8px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.5);
    font: inherit;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    white-space: nowrap;
    cursor: pointer;
    z-index: 3;
    transition: color 0.15s, border-color 0.15s, background 0.15s;
}

.shell-carousel-fold:hover {
    color: #f4efe9;
    border-color: rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.07);
}

.shell-carousel-fold svg {
    flex-shrink: 0;
    transition: transform 0.2s ease;
}

.shell-header.is-carousel-collapsed .shell-carousel-fold svg {
    transform: rotate(180deg);
}

.shell-header.is-carousel-collapsed .shell-mainrow {
    max-height: 0 !important;
    opacity: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    pointer-events: none;
}

/* Allow both the expand tab and the collapse handle to overflow header bounds */
.shell-header {
    overflow: visible;
}
/* ─────────────────────────────────────────────────────────────────────────── */

/* Nav stretches to fill space — user cluster pushed right */
.shell-brandbar > .demo-effect-nav {
    flex: 1;
    min-width: 0;
}

.shell-brandbar-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

/* Bottom-align carousel with copy so the row height (from the left blurb)
   does not leave a dead band above the workspace iframe. */
.shell-mainrow {
    display: grid;
    grid-template-columns: minmax(260px, 300px) minmax(0, 1fr);
    align-items: end;
    gap: 12px;
}

.shell-copy {
    padding-top: 0;
    padding-bottom: 2px;
}

.shell-copy .eyebrow {
    margin-bottom: 2px;
    font-size: 0.72rem;
}

.shell-copy h1 {
    font-size: clamp(1.15rem, 1.6vw, 1.65rem);
    margin-bottom: 2px;
    line-height: 1.15;
}

.shell-copy .lede {
    margin-bottom: 0;
    font-size: 0.84rem;
    line-height: 1.35;
    max-width: 36ch;
}

/* == Stack Stories chips — hero copy section ========================== */
.stack-stories {
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

/* Shared tagline connecting all pages to the stacking brand message */
.page-brand-tagline {
    margin-top: 10px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(0, 200, 255, 0.7);
    letter-spacing: 0.02em;
}

.stack-stories-label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.38);
    margin: 0 0 3px 0;
}

.stack-story-chip {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 10px;
    background: rgba(0, 200, 255, 0.05);
    border: 1px solid rgba(0, 200, 255, 0.16);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}

.stack-story-chip:hover {
    background: rgba(0, 200, 255, 0.11);
    border-color: rgba(0, 200, 255, 0.38);
}

.stack-story-title {
    font-size: 0.74rem;
    font-weight: 600;
    color: rgba(255,255,255,0.88);
    line-height: 1.2;
}

.stack-story-chain {
    font-size: 0.63rem;
    color: rgba(0, 200, 255, 0.65);
    line-height: 1.3;
    font-family: ui-monospace, monospace;
}

@media (max-width: 900px) {
    .stack-stories { display: none; }
}

/* == Workflow carousel ================================================= */
.shell-demo-carousel {
    position: relative;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 18px;
    padding: 6px 12px 10px;
}

.shell-demo-strip {
    display: flex;
    flex-direction: row;
    gap: 14px;
    min-width: max-content;
    padding-top: 18px;
    transition: transform 300ms cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

.shell-demo-strip .demo-card.compact {
    flex: 0 0 auto;
    width: 170px;
}

.shell-carousel-btn {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    border: none;
    border-radius: 0;
    background: rgba(255,255,255,0.07);
    color: rgba(255,255,255,0.85);
    cursor: pointer;
    transition: background 180ms, color 180ms, width 180ms;
    padding: 0;
    box-shadow: none;
    opacity: 1;
}
.shell-carousel-btn svg { width: 22px; height: 22px; display: block; stroke-width: 2.8; }
.shell-carousel-btn:hover:not([disabled]) {
    background: rgba(255,255,255,0.15);
    color: #fff;
    width: 52px;
}
.shell-carousel-btn[disabled] { opacity: 0.22; pointer-events: none; }
.shell-carousel-btn--prev { left: 0; border-radius: 12px 0 0 12px; }
.shell-carousel-btn--next { right: 0; border-radius: 0 12px 12px 0; }
.carousel-more-badge {
    position: absolute;
    top: 8px;
    min-width: 24px;
    height: 24px;
    padding: 0 6px;
    border-radius: 12px;
    background: #f28b3c;
    color: #fff;
    font-size: 11px;
    font-weight: 800;
    line-height: 24px;
    text-align: center;
    pointer-events: none;
    box-shadow: 0 2px 8px rgba(0,0,0,0.5);
}
.shell-carousel-btn--prev .carousel-more-badge {
    left: 50%;
    transform: translateX(-50%);
}
.shell-carousel-btn--next .carousel-more-badge {
    right: 50%;
    transform: translateX(50%);
}

.shell-carousel-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    min-height: 0;
}
.shell-carousel-footer:empty { display: none; }

.shell-carousel-dots { display: flex; gap: 5px; align-items: center; }
.shell-carousel-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    transition: background 200ms, transform 200ms;
    cursor: pointer;
}
.shell-carousel-dot.is-active {
    background: #f28b3c;
    transform: scale(1.3);
}

.shell-carousel-label {
    font-size: 0.68rem;
    color: rgba(255,255,255,0.38);
    letter-spacing: 0.06em;
    line-height: 1;
}

/* ── Studio menu (shell-mode): reclaim vertical space for the iframe ─ */
.page-shell.shell-mode {
    padding: 6px 6px 10px;
}

/* Carousel strip is removed from Studio — content lives in the Tools rail tab.
   Hide only the filmstrip row + fold button, NOT the brandbar/nav. */
.page-shell.shell-mode .shell-mainrow,
.page-shell.shell-mode .carousel-expand-tab,
.page-shell.shell-mode .shell-carousel-fold {
    display: none !important;
}
/* Remove bottom padding from shell-header since the carousel row is gone */
.page-shell.shell-mode .shell-header {
    padding-bottom: 0 !important;
    margin-bottom: 0 !important;
}

.page-shell.shell-mode .shell-brandbar {
    display: flex;
    align-items: center;
    position: relative;
    gap: 6px 12px;
    justify-content: center;
}
.page-shell.shell-mode .topbar-brand-center {
    order: 0;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: auto;
    z-index: 2;
}
.page-shell.shell-mode .topbar-brand-tagline {
    display: none;
}
.page-shell.shell-mode .demo-site-brand-logo {
    height: 80px;
}
.page-shell.shell-mode .demo-effect-nav {
    order: 1;
}

.page-shell.shell-mode .demo-effect-nav {
    flex-wrap: wrap;
    gap: 4px 10px;
}

.page-shell.shell-mode .shell-active-demo {
    margin-left: auto;
    min-width: 0;
}

.page-shell.shell-mode .shell-mainrow {
    grid-template-columns: 1fr;
    gap: 4px;
    align-items: start;
}

.page-shell.shell-mode .shell-copy {
    display: none;
}

.page-shell.shell-mode .shell-demo-carousel {
    gap: 0;
    height: 250px;
    flex-shrink: 0;
    overflow: hidden;
}

.page-shell.shell-mode [data-demo-clip] {
    flex: 1 1 0;
    min-height: 0;
    overflow: hidden;
}

.page-shell.shell-mode .shell-demo-strip {
    gap: 12px;
}

/* Shell-mode: slightly narrower cards, smaller media */
.page-shell.shell-mode .shell-demo-strip .demo-card.compact {
    width: 152px;
}
.page-shell.shell-mode .demo-card.compact .card-media {
    height: 104px;
}
.page-shell.shell-mode .demo-card.compact .card-header {
    padding: 6px 8px 3px;
}
.page-shell.shell-mode .demo-card.compact h2 {
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    flex: 1;
}

.page-shell.shell-mode .shell-carousel-btn {
    top: 0;
}

.page-shell.shell-mode .shell-carousel-footer {
    display: none;
}

.page-shell.shell-mode .demo-card.is-active {
    transform: none;
}

.page-shell.shell-mode .shell-brandbar,
.page-shell.shell-mode .shell-mainrow {
    flex-shrink: 0;
}

/* ── Carousel collapse slide animation (shell-mode only) ─────────────────── */
.page-shell.shell-mode .shell-mainrow {
    overflow: hidden;
    max-height: 400px;
    transition: max-height 320ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 240ms ease,
                padding-top 320ms ease,
                padding-bottom 320ms ease;
}

/* ── Rail collapse slide animation (shell-mode only) ─────────────────────── */
.page-shell.shell-mode .workspace-rail {
    overflow: hidden;
    transition: max-width 320ms cubic-bezier(0.4, 0, 0.2, 1),
                min-width 320ms cubic-bezier(0.4, 0, 0.2, 1),
                opacity 240ms ease,
                padding 320ms ease;
    max-width: 260px;
}

.page-shell.shell-mode .workspace-grid {
    gap: 6px;
    flex: 1;
    min-height: 0;
    align-items: stretch;
    /* Breathing room between nav and rail top, especially when carousel is collapsed */
    padding-top: 4px;
}

.page-shell.shell-mode .workspace-shell.panel {
    padding: 4px 6px;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.page-shell.shell-mode .workspace-rail {
    padding: 6px 8px 8px;
    max-height: none;
    height: 100%;
    box-sizing: border-box;
    /* Flex column so: tabs → shared-controls → active-panel(flex:1) stack cleanly */
    display: flex !important;
    flex-direction: column;
    gap: 0;
}

.page-shell.shell-mode .demo-frame {
    flex: 1;
    min-height: 0;
    max-height: none;
}

.shell-active-demo {
    display: inline-flex;
    flex-direction: column;
    gap: 2px;
    min-width: 170px;
}

.shell-active-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--accent);
    font-weight: 700;
}

.shell-active-demo strong {
    font-size: 0.96rem;
    line-height: 1.2;
}

/* ── Active renders bar ─────────────────────────────────────────── */

.shell-active-renders {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    padding: 6px 0 0;
    margin-top: 4px;
}

.active-renders-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.active-renders-label {
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: var(--accent, #f28b3c);
    font-weight: 700;
    white-space: nowrap;
    opacity: 0.8;
}

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

.active-render-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px 4px 8px;
    border-radius: 20px;
    background: rgba(242, 139, 60, 0.12);
    border: 1px solid rgba(242, 139, 60, 0.3);
    color: rgba(255, 255, 255, 0.85);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.active-render-chip:hover {
    background: rgba(242, 139, 60, 0.22);
    border-color: rgba(242, 139, 60, 0.55);
}

.active-render-chip-label {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.active-render-kill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    padding: 0;
    border: none;
    border-radius: 50%;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.85rem;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s ease, color 0.12s ease;
}

.active-render-kill:hover {
    background: rgba(255, 80, 80, 0.25);
    color: #ff6b6b;
}

.active-render-spinner {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: 2px solid rgba(242, 139, 60, 0.3);
    border-top-color: var(--accent, #f28b3c);
    animation: spin 0.8s linear infinite;
    flex-shrink: 0;
}

/* ── Workspace shell ─────────────────────────────────────────────── */

.workspace-shell {
    padding: 4px 8px 10px;
    background:
        linear-gradient(180deg, rgba(18, 21, 26, 0.98), rgba(12, 14, 18, 0.98)),
        radial-gradient(circle at top left, rgba(242, 139, 60, 0.06), transparent 26%);
}

.workspace-grid {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 10px;
    align-items: start;
}

.workspace-rail {
    padding: 0 0 10px;
    /* Width driven by --studio-rail-w so drag handle and toggle button track automatically. */
    width: var(--studio-rail-w, 260px);
    min-width: var(--studio-rail-w, 220px);
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: 0;
    align-self: stretch;
    max-height: calc(100vh - 126px);
    /* Allow tab strip to overflow upward (icons), clip only the panel body area */
    overflow: visible;
    position: relative;
    /* GPU layer hint for width changes during drag-resize */
    will-change: width;
}

/* ── Drag-resize performance: freeze content during handle drag ─────────────
   Without these rules, every mousemove pixel triggers:
     1. grid-template-columns recalculation on .workspace-grid
     2. width recalculation on .workspace-rail
     3. repeat(auto-fill, 82px) reflow inside every content grid
   That cascading layout work is what makes the sizer feel "sticky".

   During drag (.is-rail-resizing on .workspace-grid):
   • min-width:0 removes a redundant constraint so the browser only has to
     satisfy one dimension (width) instead of two.
   • overflow:hidden on the rail clips content at the new edge instead of
     reflowing it — the grid columns stay where they are visually; the rail
     just masks them. No column-count recalculation needed.
   • pointer-events:none on panels prevents hover states from dirtying layout.
   ─────────────────────────────────────────────────────────────────────────── */
.workspace-grid.is-rail-resizing .workspace-rail {
    min-width: 0 !important;
    overflow: hidden;
    cursor: col-resize;
}
.workspace-grid.is-rail-resizing .workspace-rail-panel,
.workspace-grid.is-rail-resizing .workspace-rail-tabs {
    pointer-events: none;
}
/* Prevent auto-fill grids from recounting columns on every pixel */
.workspace-grid.is-rail-resizing .shell-asset-grid,
.workspace-grid.is-rail-resizing .wf-tools-grid,
.workspace-grid.is-rail-resizing .wf-tools-list {
    contain: layout style;
}
/* Propagate col-resize cursor across the whole viewport during drag */
.workspace-grid.is-rail-resizing,
.workspace-grid.is-rail-resizing * {
    cursor: col-resize !important;
}
/* Clip only the panels, not the tab strip */
.workspace-rail-panel {
    overflow: hidden;
    /* Scoped layout: when rail panel content changes (images, cards), the browser
       doesn't need to re-check layout outside the panel. Measurable perf win
       when renderShellStateForSlug rebuilds innerHTML in one of these panels. */
    contain: layout style;
}
/* Needed because display:grid overrides the [hidden] attribute's display:none */
.workspace-rail[hidden] { display: none !important; }

/* Tab strip — overflow:visible so icon SVGs aren't clipped by the rail's overflow:hidden */
.workspace-rail-tabs {
    display: flex;
    gap: 2px;
    padding: 4px 2px 6px;  /* top padding prevents icons clipping at rail top edge */
    border-bottom: 1px solid rgba(255,255,255,0.08);
    overflow: visible;
    margin-bottom: 6px;
    flex-shrink: 0;
    scrollbar-width: none;
}
.workspace-rail-tabs::-webkit-scrollbar { display: none; }
/* Icon-only tabs — each tab is a square with an SVG icon + count badge */
.workspace-rail-tab {
    flex: 1;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 6px;
    color: rgba(255,255,255,0.40);
    cursor: pointer;
    padding: 6px 4px;
    transition: background 0.15s, color 0.15s;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0;
    min-width: 0;
    overflow: visible; /* allow corner badge to bleed outside button bounds */
}
.workspace-rail-tab:hover { color: rgba(255,255,255,0.78); background: rgba(255,255,255,0.06); }
.workspace-rail-tab.is-active { color: #fff; background: rgba(255,255,255,0.12); }
.rail-tab-icon {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}
/* Count badge — subtle corner overlay, phone-notification style */
.rail-tab-count {
    position: absolute;
    top: -4px;
    right: -5px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 11px;
    height: 11px;
    padding: 0 2px;
    border-radius: 99px;
    background: rgba(255,255,255,0.25);
    color: rgba(255,255,255,0.9);
    font-size: 0.5rem;
    font-weight: 600;
    line-height: 1;
    pointer-events: none;
}
.rail-tab-count:empty { display: none; }
/* Photo icons for rail tabs */
.rail-tab-photo {
    width: 28px;
    height: 28px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    opacity: 0.5;
    transition: opacity 0.15s;
}
.workspace-rail-tab:hover .rail-tab-photo { opacity: 0.85; }
.workspace-rail-tab.is-active .rail-tab-photo { opacity: 1; }
/* Tab text labels — visible by default so first-time users (housewives, kids,
   teachers) can read each tab. The "Aa" toggle in the rail control row hides
   them for power users who only need icons.

   When labels are visible we switch the tab strip to a 3×2 CSS grid: six
   functional tabs fill the grid evenly, and the collapse-rail button becomes
   a thin full-width strip on a third row so it stays reachable but never
   distorts the tile alignment. When labels are hidden we revert to the
   original tight single-row flex layout. */
.rail-tab-label {
    display: block;
    margin-top: 4px;
    font-size: 0.68rem;
    font-weight: 500;
    line-height: 1.05;
    letter-spacing: 0;
    color: inherit;
    opacity: 0.82;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    pointer-events: none;
}
.workspace-rail-tab.is-active .rail-tab-label { opacity: 1; }

/* Default (labels visible) — 3×2 grid with consistent tile heights */
.workspace-rail-tabs:not(.labels-hidden) {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 3px;
    padding: 6px 4px 6px;
    align-items: stretch;
}
.workspace-rail-tabs:not(.labels-hidden) .workspace-rail-tab {
    flex: none;
    padding: 8px 4px 6px;
    min-height: 60px;     /* uniform tile height regardless of active state */
    border-radius: 8px;
}
/* Active tile gets a clearer fill but no extra size — keeps the grid even */
.workspace-rail-tabs:not(.labels-hidden) .workspace-rail-tab.is-active {
    background: rgba(242,139,60,0.14);
    box-shadow: inset 0 0 0 1px rgba(242,139,60,0.35);
}
/* Collapse button becomes a thin full-width strip at the bottom of the grid */
.workspace-rail-tabs:not(.labels-hidden) .workspace-rail-tab.rail-collapse-btn {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    min-height: 18px;
    padding: 2px 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 4px;
}

/* Labels hidden: revert to the original tight single-row layout */
.workspace-rail-tabs.labels-hidden .rail-tab-label { display: none; }
.workspace-rail-tabs.labels-hidden { display: flex; flex-wrap: nowrap; }
/* Hide label inside the collapse-rail button — it's an action, not a section */
.workspace-rail-tab.rail-collapse-btn .rail-tab-label { display: none; }
/* Labels toggle button — sits in the rail control row; tinted when labels are on */
.rail-labels-toggle.is-active,
.rail-labels-toggle[aria-pressed="true"] {
    background: rgba(242,139,60,0.18);
    color: rgba(242,139,60,0.95);
}
.rail-labels-toggle-text {
    font-family: inherit;
    font-size: 0.74rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: 0.02em;
}
/* Sidebar category filter photo icons — larger than count badge so icon dominates */
.wf-cat-img {
    width: 30px;
    height: 30px;
    object-fit: cover;
    border-radius: 6px;
    display: block;
    flex-shrink: 0;
}
/* Legacy .workspace-rail-tab small (keep for any unreplaced tabs) */
.workspace-rail-tab small {
    background: rgba(255,255,255,0.18);
    border-radius: 99px;
    font-size: 0.68rem;
    line-height: 1;
    min-width: 16px;
    padding: 2px 4px;
    text-align: center;
}
.workspace-rail-tab.is-active small { background: rgba(255,255,255,0.3); }

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

.workspace-rail-body {
    overflow: auto;
    padding-right: 4px;
    display: block;
    flex: 1;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.28) transparent;
}
.workspace-rail-body::-webkit-scrollbar { width: 4px; }
.workspace-rail-body::-webkit-scrollbar-track { background: transparent; }
.workspace-rail-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.28); border-radius: 4px; }
.workspace-rail-body::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.5); }
.workspace-rail-body-history {
    overflow-y: auto;
}

/* Render cards in renders rail mirror asset cards */
.workspace-rail-panel [data-renders-rail] .history-asset {
    cursor: grab;
}
.shell-render-card {
    position: relative;
}
.shell-render-dismiss {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 2;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.65);
    color: rgba(255,255,255,0.8);
    font-size: 0.8rem;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.15s;
    padding: 0;
}
.shell-render-card:hover .shell-render-dismiss {
    opacity: 1;
}
.shell-render-dismiss:hover {
    background: rgba(200,40,40,0.8);
    color: #fff;
}

/* ── Rail importer (left asset panel) ─────────────────────────── */
.rail-importer {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 16px 12px;
    border-radius: 12px;
    border: 2px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    text-align: center;
    transition: border-color 0.18s ease, background 0.18s ease;
    outline: none;
    user-select: none;
    min-height: 90px;
}
.rail-importer:hover,
.rail-importer:focus {
    border-color: rgba(242, 139, 60, 0.5);
    background: rgba(242, 139, 60, 0.05);
}
.rail-importer.is-drop-target {
    border-color: rgba(242, 139, 60, 0.8);
    background: rgba(242, 139, 60, 0.1);
}
.rail-importer.is-loading {
    opacity: 0.7;
    pointer-events: none;
}
.rail-importer-icon {
    font-size: 1.6rem;
    font-weight: 300;
    line-height: 1;
    color: rgba(255, 255, 255, 0.45);
}
.rail-importer:hover .rail-importer-icon,
.rail-importer:focus .rail-importer-icon {
    color: rgba(242, 139, 60, 0.8);
}
.rail-importer-label {
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    margin: 0;
}
.rail-importer-hint {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    margin: 0;
    letter-spacing: 0.02em;
}
.rail-importer-status {
    font-size: 0.72rem;
    color: rgba(242, 139, 60, 0.9);
    min-height: 1em;
    margin-top: 2px;
}
.rail-importer-status.is-error {
    color: rgba(255, 100, 100, 0.9);
}

.rail-empty-state {
    padding: 10px 4px;
    font-size: 0.78rem;
    line-height: 1.5;
}
.rail-empty-state p { margin: 0 0 4px; }

.compact-head {
    margin-bottom: 2px;
}

.workspace-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 2px;
    padding: 0 0 4px;
}

.workspace-head h2 {
    margin-bottom: 0;
    font-size: 1.05rem;
}

.demo-frame {
    width: 100%;
    min-height: calc(100vh - 156px);
    border: 0;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
}

#frame-loading-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(10, 10, 12, 0.55);
    backdrop-filter: blur(4px);
    border-radius: 12px;
    z-index: 10;
    pointer-events: none;
}
#frame-loading-overlay[hidden] { display: none; }

.frame-loader-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.15);
    border-top-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    animation: frame-spin 0.7s linear infinite;
}
@keyframes frame-spin { to { transform: rotate(360deg); } }

/* Audit #29: instant click-feedback on demo cards. The frame loader
   covers the iframe area but the user's eye is still on the card they
   just clicked — without a card-side cue they often double-click in
   frustration. Pulse the clicked card with an accent-coloured ring so
   the click is unmistakably acknowledged within ~16 ms. The class is
   removed by JS as soon as the iframe finishes loading (or after a 5 s
   safety timeout). */
.demo-card.is-launching {
    animation: demo-card-launch-pulse 1.2s ease-out infinite;
    box-shadow:
        0 0 0 2px var(--accent, #f28b3c),
        0 0 18px rgba(242, 139, 60, 0.55);
    transform: scale(0.98);
    transition: transform .08s ease-out;
    cursor: progress;
}
@keyframes demo-card-launch-pulse {
    0%   { box-shadow: 0 0 0 2px var(--accent, #f28b3c), 0 0 12px rgba(242, 139, 60, .35); }
    50%  { box-shadow: 0 0 0 3px var(--accent, #f28b3c), 0 0 22px rgba(242, 139, 60, .65); }
    100% { box-shadow: 0 0 0 2px var(--accent, #f28b3c), 0 0 12px rgba(242, 139, 60, .35); }
}

html.embedded-workspace .page-shell {
    width: 100%;
    padding: 6px 8px 10px;
}

html.embedded-workspace .reference-strip,
html.embedded-workspace .result-history-rail {
    display: none;
}

html.embedded-workspace .result-shell {
    display: block;
}

html.embedded-workspace .back-link {
    display: none;
}

html.embedded-workspace .page-shell > p:first-child {
    display: none;
}

html.embedded-workspace .hero {
    display: none;
}

html.embedded-workspace h1 {
    font-size: clamp(1.15rem, 2vw, 1.9rem);
    margin-bottom: 4px;
}

html.embedded-workspace .eyebrow {
    margin-bottom: 4px;
    font-size: 0.7rem;
}

html.embedded-workspace .lede {
    font-size: 0.88rem;
    line-height: 1.35;
    margin-bottom: 0;
}

html.embedded-workspace .panel,
html.embedded-workspace .card-copy {
    padding: 12px;
}


html.embedded-workspace .form-stack {
    gap: 14px;
}

.instructions p:last-child {
    margin-bottom: 0;
}

.warning {
    color: #8a2f27;
}

.form-stack {
    display: grid;
    gap: 24px;
}

.field {
    display: grid;
    gap: 8px;
}

.field span {
    font-weight: 600;
}

.quiz-shell {
    display: grid;
    gap: 16px;
    padding: 16px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.quiz-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.choice-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.choice-chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink);
    cursor: pointer;
}

.choice-chip input {
    accent-color: var(--accent);
}

.effect-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(132px, 1fr));
    gap: 12px;
    margin-top: 14px;
}

.effect-card {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 12px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    overflow: hidden;
}

.effect-card input {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
}

.effect-card:has(input:checked) {
    border-color: rgba(242, 139, 60, 0.44);
    box-shadow: inset 0 0 0 1px rgba(242, 139, 60, 0.14);
}

.effect-card-media {
    display: block;
    height: 72px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background:
        radial-gradient(circle at center, rgba(255, 255, 255, 0.12), transparent 46%),
        linear-gradient(135deg, rgba(19, 22, 28, 0.96), rgba(11, 13, 17, 0.96));
}

.effect-card-label {
    font-size: 0.9rem;
    font-weight: 700;
}

.effect-electric .effect-card-media {
    background:
        radial-gradient(circle at 50% 45%, rgba(108, 198, 255, 0.7), transparent 24%),
        linear-gradient(120deg, transparent 34%, rgba(108, 198, 255, 0.9) 46%, transparent 58%),
        linear-gradient(135deg, #121822, #091018);
}

.effect-fire .effect-card-media {
    background:
        radial-gradient(circle at 38% 64%, rgba(255, 194, 77, 0.92), transparent 26%),
        linear-gradient(140deg, rgba(255, 94, 0, 0.84), rgba(93, 16, 0, 0.95));
}

.effect-water .effect-card-media {
    background:
        radial-gradient(circle at 34% 34%, rgba(163, 238, 255, 0.58), transparent 22%),
        linear-gradient(160deg, rgba(0, 143, 214, 0.9), rgba(5, 38, 87, 0.95));
}

.effect-frost .effect-card-media {
    background:
        linear-gradient(135deg, rgba(233, 245, 255, 0.92), rgba(113, 183, 255, 0.35)),
        linear-gradient(160deg, rgba(15, 35, 61, 0.94), rgba(8, 15, 25, 0.98));
}

.effect-heat .effect-card-media {
    background:
        radial-gradient(circle at 62% 40%, rgba(255, 155, 54, 0.75), transparent 22%),
        linear-gradient(145deg, rgba(255, 140, 0, 0.85), rgba(92, 23, 0, 0.96));
}

.effect-plasma .effect-card-media {
    background:
        radial-gradient(circle at 40% 48%, rgba(255, 105, 255, 0.72), transparent 20%),
        linear-gradient(135deg, rgba(135, 45, 255, 0.92), rgba(11, 17, 45, 0.97));
}

.effect-wireframe .effect-card-media {
    background:
        linear-gradient(90deg, rgba(76, 226, 255, 0.45) 1px, transparent 1px),
        linear-gradient(rgba(76, 226, 255, 0.45) 1px, transparent 1px),
        linear-gradient(135deg, rgba(13, 27, 37, 0.96), rgba(8, 11, 18, 0.98));
    background-size: 14px 14px, 14px 14px, auto;
}

.effect-neon .effect-card-media {
    background:
        radial-gradient(circle at 30% 50%, rgba(255, 0, 180, 0.74), transparent 18%),
        linear-gradient(120deg, rgba(0, 255, 238, 0.82), rgba(142, 0, 255, 0.9));
}

.effect-xray .effect-card-media {
    background:
        radial-gradient(circle at 58% 50%, rgba(181, 255, 245, 0.65), transparent 20%),
        linear-gradient(150deg, rgba(26, 70, 91, 0.94), rgba(7, 16, 22, 0.98));
}

input[type="text"],
input[type="file"],
select,
textarea {
    width: 100%;
    font: inherit;
}

input[type="text"],
select,
textarea {
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    background: rgba(17, 20, 25, 0.92);
    color: var(--ink);
}

textarea {
    resize: vertical;
}

.thumb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.thumb-grid.is-disabled {
    opacity: 0.46;
    pointer-events: none;
}

.thumb-card {
    position: relative;
    display: block;
    padding: 10px;
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.thumb-card input[type="radio"],
.thumb-card input[type="checkbox"] {
    position: absolute;
    inset: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
    margin: 0;
    z-index: 1;
}

.thumb-card:hover {
    border-color: rgba(242, 139, 60, 0.28);
}

.thumb-card:has(input:checked) {
    border-color: rgba(242, 139, 60, 0.5);
    box-shadow: var(--shadow), 0 0 0 1px rgba(242, 139, 60, 0.18);
    background: rgba(242, 139, 60, 0.06);
}

.thumb-card img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 14px;
    pointer-events: none;
}

.thumb-title {
    margin: 8px 0;
    font-size: 0.95rem;
}

.paste-box {
    border: 2px dashed rgba(72, 200, 230, 0.28);
    border-radius: 18px;
    background: rgba(72, 200, 230, 0.04);
    padding: 18px;
    min-height: 150px;
    transition: border-color 0.18s, background 0.18s;
}
.paste-box.is-drop-target,
.paste-box:focus-within {
    border-color: rgba(72, 199, 102, 0.7);
    background: rgba(72, 199, 102, 0.06);
}

/* Icon zone: fills available vertical space between controls and canvas */
.drop-icon-hint {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1 1 auto;
    min-height: 120px;
    width: 100%;
    opacity: 0.3;
    pointer-events: none;
    transition: opacity 0.2s;
}

.drop-icon-hint img {
    width: min(200px, 55%);
    height: auto;
    object-fit: contain;
}

[data-image-panel]:hover .drop-icon-hint,
[data-image-panel].is-drop-target .drop-icon-hint {
    opacity: 0.55;
}

[data-image-panel].has-preview .drop-icon-hint {
    display: none;
}

/* Make the panel itself a flex column so icon naturally fills the gap */
.paste-box[data-image-panel]:not(.has-preview) {
    display: flex;
    flex-direction: column;
}

/* demo1 custom zone */
.d1-image-zone:not(.has-preview) {
    display: flex;
    flex-direction: column;
}

.d1-image-zone .drop-icon-hint {
    flex: 1 1 auto;
    min-height: 100px;
}

.dropzone-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(220px, 0.9fr);
    gap: 18px;
    align-items: start;
}

.dropzone-copy {
    display: grid;
    gap: 10px;
    align-content: start;
}

.dropzone-art {
    overflow: hidden;
    border-radius: 16px;
    border: 1px solid rgba(103, 149, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: inset 0 0 0 3px rgba(103, 149, 255, 0.18);
    min-height: 180px;
}

.dropzone-art img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 180px;
    object-fit: cover;
}

.image-panel.has-preview .dropzone-art {
    display: none;
}

.image-panel:focus {
    outline: none;
    border-color: rgba(242, 139, 60, 0.75);
    box-shadow: 0 0 0 4px rgba(242, 139, 60, 0.14);
}

.canvas-wrap {
    position: relative;
    display: inline-block;
    margin-top: 14px;
}

.preview-image {
    display: none;
    max-width: min(100%, 480px);
    max-height: 480px;
    border-radius: 14px;
    border: 1px solid rgba(39, 46, 60, 0.16);
}

.draw-canvas {
    display: none;
    position: absolute;
    inset: 0;
    cursor: crosshair;
}

/* ── Legacy result image (chromafy_review, texturize_review, job_status, etc.) */
.result-image {
    display: block;
    max-width: 100%;
    width: auto;
    max-height: min(62vh, calc(100vh - 260px));
    height: auto;
    object-fit: contain;
    border-radius: 18px;
    border: 1px solid rgba(39, 46, 60, 0.16);
    margin: 0 auto;
}

/* ── Direct-job result page ─────────────────────────────── */
.direct-result-shell {
    display: flex;
    flex-direction: column;
    height: 100dvh;
    background: #0d0f14;
    overflow: hidden;
}

.direct-result-main {
    flex: 1;
    min-height: 0;
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
    padding: 8px 16px 8px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    overflow-y: auto;
}

/* Two-column grid: result left, sidebar right (desktop only) */
.dr-two-col {
    display: grid;
    grid-template-columns: 1fr 260px;
    gap: 14px;
    flex: 1;
    min-height: 0;
}
.dr-col-left {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 0;
    overflow-y: auto;
}

/* ── Right sidebar ── */
.dr-sidebar {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 16px 14px;
    background: #151821;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.07);
    overflow-y: auto;
    align-self: start;
    max-height: 100%;
    position: sticky;
    top: 0;
    margin-top: 8px;
}
.dr-sidebar-section {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.05);
}
.dr-sidebar-section:last-child { border-bottom: none; padding-bottom: 0; }
.dr-sidebar-heading {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: rgba(255,255,255,0.5);
    margin: 0 0 2px;
}

/* Big download button in sidebar */
.dr-sidebar-download {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid rgba(80,200,120,0.4);
    background: rgba(80,200,120,0.1);
    color: #6edda0;
    cursor: pointer;
    transition: background .18s, border-color .18s;
}
.dr-sidebar-download:hover {
    background: rgba(80,200,120,0.2);
    border-color: rgba(80,200,120,0.6);
}
.dr-sidebar-download svg { width: 18px; height: 18px; flex-shrink: 0; }

/* Social row inside sidebar */
.dr-sidebar-share-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.dr-sidebar-share-row .dr-share-btn {
    padding: 5px 8px;
    font-size: 0;
}
.dr-sidebar-share-row .dr-share-btn svg { width: 16px; height: 16px; }
.dr-sidebar-share-row .dr-share-btn span { display: none; }
.dr-sidebar-share-row .dr-share-copy { font-size: 0.72rem; }
.dr-sidebar-share-row .dr-share-copy span { display: inline; }

/* Stats in sidebar */
.dr-sidebar-stats {
    gap: 4px;
}
.dr-sidebar-stats .result-stat-chip {
    font-size: 0.76rem;
    padding: 4px 0;
    background: none;
    border: none;
}

/* Meta in sidebar */
.dr-sidebar-meta .dr-run-id { font-size: 0.68rem; word-break: break-all; }

/* Nav in sidebar */
.dr-sidebar-nav {
    flex-direction: row;
    gap: 8px;
    margin-top: auto;
    padding-top: 6px;
    border-top: 1px solid rgba(255,255,255,0.06);
}
.dr-sidebar-nav .secondary-btn { flex: 1; text-align: center; font-size: 0.78rem; }

/* Chain CTA in sidebar */
.dr-sidebar .dr-chain-cta-btn {
    width: 100%;
    font-size: 0.82rem;
    padding: 8px 10px;
}

/* Compound grid in sidebar */
.dr-sidebar .dr-compound-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.dr-sidebar .dr-compound-btn {
    font-size: 0.72rem;
    padding: 4px 8px;
}

/* ── Mobile: single column ── */
@media (max-width: 768px) {
    .dr-two-col {
        grid-template-columns: 1fr;
    }
    .dr-sidebar {
        position: static;
        border-radius: 12px;
    }
    /* Switch from app-shell (fixed height, internal scroll) to natural document
       scroll so the sidebar below the left column is actually reachable. */
    .direct-result-shell {
        height: auto;
        min-height: 100dvh;
        overflow: visible;
    }
    .direct-result-main {
        flex: none;
        overflow: visible;
    }
    .dr-two-col {
        flex: none;
        overflow: visible;
    }
    .dr-col-left {
        overflow-y: visible;
    }
}

/* Hero: fills all remaining vertical space after fixed-height rows below */
.dr-result-hero {
    flex: 0 1 auto;
    min-height: 0;
    /* Tall enough to show the result without scrolling, short enough to fit in
       the workspace iframe alongside the workflow queue below it. */
    max-height: min(62vh, calc(100dvh - 300px));
    display: flex;
    justify-content: center;
    align-items: center;
    background: #0d0f14;
    border-radius: 14px;
    overflow: hidden;
    gap: 8px;
    flex-wrap: wrap;
}

.dr-result-hero--compare {
    align-items: flex-start;
    justify-content: center;
    gap: 12px;
    padding: 10px 8px;
}

.dr-compare-figure {
    margin: 0;
    flex: 1 1 min(280px, 100%);
    max-width: min(420px, 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.dr-compare-caption {
    margin: 0;
    padding: 0 6px;
    text-align: center;
    font-size: 0.78rem;
    line-height: 1.35;
    color: rgba(242, 139, 60, 0.92);
    max-width: 44ch;
}

/* Checkerboard wrapper — shown for transparent PNG results (e.g. backdrop-aifi-it) */
.dr-transparent-preview {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    background-image:
        linear-gradient(45deg, #c8c8c8 25%, transparent 25%),
        linear-gradient(-45deg, #c8c8c8 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #c8c8c8 75%),
        linear-gradient(-45deg, transparent 75%, #c8c8c8 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border-radius: 16px;
    overflow: hidden;
    max-width: 100%;
    max-height: min(62vh, calc(100dvh - 300px));
    flex: 0 1 auto;
    min-height: 0;
}
.dr-transparent-preview .dr-fit-media {
    border-radius: 0;
    border: none;
    max-height: min(60vh, calc(100dvh - 320px));
    max-width: 100%;
    object-fit: contain;
}

/* Audio result hero — centered waveform icon + native audio controls */
.dr-audio-result {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    min-height: 200px;
    gap: 0;
}
.dr-audio-player {
    width: min(480px, 90%);
    accent-color: var(--accent, #f37120);
}

/* The result image/video: fills the hero flex container, scales to fit, never overflows */
.dr-fit-media {
    display: block;
    max-width: 100%;
    max-height: 100%;        /* constrained by flex parent .dr-result-hero */
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
}

/* Action / share bar */
.dr-action-bar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: #151821;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    flex-shrink: 0;
}

.dr-action-left {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}

.dr-run-id {
    font-size: 0.72rem;
}

.dr-action-right {
    display: flex;
    gap: 10px;
    margin-left: auto;
}

/* Share group */
.dr-share-group {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.dr-share-label {
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-right: 4px;
}

.dr-share-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 500;
    text-decoration: none;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.75);
    cursor: pointer;
    transition: background .18s, color .18s, border-color .18s;
}

.dr-share-btn:hover {
    background: rgba(255,255,255,0.13);
    color: #fff;
    border-color: rgba(255,255,255,0.25);
}

.dr-share-btn svg {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.dr-share-download { border-color: rgba(80,200,120,0.35); color: #6edda0; }
.dr-share-download:hover { background: rgba(80,200,120,0.12); }

.dr-share-x       { border-color: rgba(255,255,255,0.18); }
.dr-share-linkedin { border-color: rgba(10,102,194,0.5); color: #5aa9e6; }
.dr-share-linkedin:hover { background: rgba(10,102,194,0.15); }
.dr-share-instagram { border-color: rgba(228,64,95,0.4); color: #f0738a; }
.dr-share-instagram:hover { background: rgba(228,64,95,0.12); }
.dr-share-facebook { border-color: rgba(24,119,242,0.5); color: #6aa0f5; }
.dr-share-facebook:hover { background: rgba(24,119,242,0.12); }

/* Status & error panels */
.dr-status-panel {
    margin: 16px auto;
    width: 100%;
}

/* Two-column processing layout: log left, preview images right */
.dr-processing-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    padding: 16px;
}

.dr-processing-left {
    flex: 0 0 260px;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.dr-generating-heading {
    font-size: 1rem;
    font-weight: 700;
    margin: 0;
    color: #fff;
}

.dr-render-tracked-hint {
    font-size: .72rem;
    color: rgba(255,255,255,.32);
    margin: 4px 0 0;
    line-height: 1.4;
}

.dr-loading-card-inline {
    text-align: left;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    flex-direction: row;
    gap: 10px;
    justify-content: flex-start;
    align-items: flex-start;
}

.dr-loading-card-inline .loading-spinner {
    flex-shrink: 0;
    margin-top: 3px;
}

/* Live step thumbnails — right column, grow as images arrive */
.dr-live-thumbs {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin: 10px 0 4px;
    min-height: 0;
}

.dr-live-thumbs-right {
    flex: 1 1 0;
    margin: 0;
    align-content: flex-start;
    justify-content: flex-start;
}

.dr-live-thumbs:empty {
    display: none;
}

.dr-live-thumb {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 120px;
    opacity: 1;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.dr-live-thumb img {
    width: 120px;
    height: 120px;
    object-fit: cover;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: #0d0f14;
    display: block;
}

.dr-live-thumb span {
    font-size: 0.62rem;
    color: rgba(255,255,255,0.45);
    text-align: center;
    line-height: 1.3;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Pop-in animation when a new thumb arrives via JS */
.dr-live-thumb-new {
    opacity: 0 !important;
    transform: scale(0.82) !important;
}

/* Narrow screens: stack vertically */
@media (max-width: 540px) {
    .dr-processing-layout { flex-direction: column; }
    .dr-processing-left { flex: none; width: 100%; }
    .dr-live-thumbs-right { justify-content: center; }
}

.dr-error-block {
    text-align: left;
    margin-top: 12px;
}

/* Build detail accordion */
.dr-detail-panel {
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.07);
    background: #151821;
    padding: 0;
}

.dr-detail-panel summary {
    padding: 12px 18px;
    cursor: pointer;
    font-size: 0.82rem;
    color: rgba(255,255,255,0.5);
    user-select: none;
}

.dr-detail-panel[open] summary {
    border-bottom: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 12px;
}

.dr-detail-panel > *:not(summary) {
    padding: 0 18px 16px;
}

.reference-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 18px;
    margin-bottom: 22px;
}

.prepared-frame-strip,
.current-swap-strip {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 14px;
}

.current-swap-strip-review {
    grid-template-columns: repeat(2, minmax(0, 240px));
    justify-content: start;
}

.chromafy-prepared-strip {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}

.compact-panel {
    flex: 0 1 220px;
    padding: 16px;
}

.compact-panel h2 {
    font-size: 1rem;
    margin-bottom: 10px;
}

.reference-image {
    display: block;
    width: 100%;
    max-width: 180px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* Larger build-step tiles inside the direct job status detail panel */
.dr-detail-panel .reference-strip {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 20px;
}

.dr-detail-panel .compact-panel {
    flex: none;
    width: 100%;
}

.dr-detail-panel .reference-image {
    max-width: 100%;
    width: 100%;
    object-fit: contain;
    max-height: 340px;
    background: #111;
}

.chromafy-frame-card {
    display: grid;
    gap: 10px;
    align-content: start;
}

.prepared-frame-placeholder {
    display: grid;
    place-items: center;
    min-height: 180px;
    border-radius: 14px;
    border: 1px dashed rgba(255, 255, 255, 0.14);
    background: rgba(255, 255, 255, 0.03);
    color: var(--muted-text);
    text-align: center;
    padding: 16px;
}

.chromafy-review-image {
    max-width: 100%;
    min-height: 180px;
    object-fit: contain;
    background: rgba(255, 255, 255, 0.02);
}

.chromafy-warning-card {
    border-color: rgba(242, 139, 60, 0.35);
    background: linear-gradient(180deg, rgba(242, 139, 60, 0.12), rgba(255, 255, 255, 0.03));
}

.current-swap-card {
    display: grid;
    gap: 10px;
    align-content: start;
    padding: 14px;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.current-swap-card .muted {
    margin-bottom: 0;
}

.current-swap-image {
    display: block;
    width: 100%;
    max-width: 200px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
    object-fit: contain;
}

.result-image-scaled {
    max-width: 460px;
    max-height: 420px;
    margin-inline: auto;
    object-fit: contain;
}

.two-column-review {
    align-items: start;
}

.result-shell {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.7fr);
    gap: 18px;
    align-items: start;
}

.result-main {
    display: grid;
    gap: 16px;
    min-width: 0;
}

.result-history-rail {
    position: sticky;
    top: 8px;
    display: grid;
    gap: 12px;
    max-height: calc(100vh - 20px);
    overflow: auto;
}

.result-history-head {
    display: grid;
    gap: 6px;
    padding-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.result-history-head h2 {
    margin-bottom: 0;
    font-size: 1.05rem;
}

.history-stack {
    display: grid;
    gap: 10px;
}

.history-card {
    display: grid;
    gap: 8px;
    padding: 10px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.025);
}

.history-card.is-active {
    box-shadow:
        inset 0 0 0 1px rgba(242, 139, 60, 0.24),
        0 0 0 1px rgba(242, 139, 60, 0.12);
    background: linear-gradient(180deg, rgba(242, 139, 60, 0.08), rgba(255, 255, 255, 0.025));
}

.history-card-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.history-card-head-main {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    min-width: 0;
    flex: 1 1 auto;
}

.history-card-summary-thumb {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    flex: 0 0 auto;
}
.history-card-summary-thumb .shelf-play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
    color: rgba(255,255,255,0.85);
    pointer-events: none;
}

.history-card-summary-thumb img,
.history-card-summary-thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.history-card-toggle {
    list-style: none;
    cursor: pointer;
}

.history-card-toggle::-webkit-details-marker {
    display: none;
}

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

.history-star-btn {
    display: inline-grid;
    place-items: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
}

.history-star-btn.is-starred {
    color: #ffcf6d;
    background: rgba(255, 194, 95, 0.14);
}

/* ── History card action buttons ───────────────────────────────── */
.history-card-actions {
    margin-top: .5rem;
    gap: .5rem;
    flex-wrap: wrap;
}

/* ── History chain section ─────────────────────────────────────────── */
.history-chain-section {
    margin: .5rem 0 0;
    padding-top: .5rem;
    border-top: 1px solid rgba(255,255,255,.07);
}
.history-chain-bar {
    display: flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
}
.history-chain-add-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .3rem .65rem;
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 2rem;
    background: rgba(255,255,255,.05);
    color: rgba(255,255,255,.65);
    font-size: .7rem;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .15s, color .15s, background .15s;
}
.history-chain-add-btn:hover {
    border-color: var(--accent, #f28b3c);
    color: var(--accent, #f28b3c);
    background: rgba(242,139,60,.08);
}
.history-chain-hint {
    font-size: .68rem;
    color: rgba(255,255,255,.45);
    font-style: italic;
}
.history-chain-picker {
    margin-top: .4rem;
    display: flex;
    flex-wrap: wrap;
    gap: .3rem;
}
.history-chain-picker .chain-history-pick {
    padding: .25rem .55rem;
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .4rem;
    background: rgba(255,255,255,.04);
    color: rgba(255,255,255,.75);
    font-size: .7rem;
    cursor: pointer;
    transition: border-color .12s, background .12s;
}
.history-chain-picker .chain-history-pick:hover {
    border-color: var(--accent, #f28b3c);
    background: rgba(242,139,60,.08);
    color: var(--accent, #f28b3c);
}

/* Highlight input assets that are sources for next chain step */
.history-asset.cg-node-new-source .history-asset-thumb {
    outline: 2px solid var(--accent, #f28b3c);
    outline-offset: 2px;
    border-radius: 4px;
    animation: cg-pulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent, #f28b3c) 22%, transparent);
}

.history-open-tab-btn,
.history-use-setup-btn {
    font-size: .78rem;
    padding: .35rem .75rem;
    border-radius: .45rem;
    cursor: pointer;
}
.history-open-tab-btn {
    background: rgba(242,139,60,.12);
    border-color: rgba(242,139,60,.35);
    color: var(--accent, #f28b3c);
}
.history-open-tab-btn:hover {
    background: rgba(242,139,60,.22);
    border-color: var(--accent, #f28b3c);
}
.history-use-setup-btn {
    background: rgba(255,255,255,.05);
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.7);
}
.history-use-setup-btn:hover {
    background: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.3);
    color: #fff;
}

.history-card-chevron {
    width: 10px;
    height: 10px;
    border-right: 2px solid rgba(255, 255, 255, 0.55);
    border-bottom: 2px solid rgba(255, 255, 255, 0.55);
    transform: rotate(45deg);
    transition: transform 0.16s ease;
}

.history-card[open] .history-card-chevron {
    transform: rotate(225deg);
}

.history-demo,
.history-prompt-id {
    margin: 0;
}

.history-demo {
    font-size: 0.95rem;
    font-weight: 700;
}

.history-prompt-id {
    color: var(--muted);
    font-size: 0.8rem;
}

.history-seed {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(242, 139, 60, 0.14);
    color: #ffc89e;
    font-size: 0.82rem;
    white-space: nowrap;
}

.history-preview {
    overflow: hidden;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.history-columns {
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    align-items: start;
}

.history-column {
    display: grid;
    gap: 10px;
    min-width: 0;
}

.history-column-label {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #c6cfdb;
 }

.history-preview img,
.history-preview video {
    display: block;
    width: 100%;
    max-height: 220px;
    object-fit: contain;
    background: #0b0d11;
}

/* Compact video thumbnail in history panel */
.history-preview-video-thumb {
    position: relative;
    width: 100%;
    height: 72px;
    overflow: hidden;
    border-radius: 10px;
    background: #0b0d11;
    cursor: pointer;
}
.history-preview-video-thumb video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    max-height: none;
}
.history-video-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: rgba(255,255,255,0.85);
    background: rgba(0,0,0,0.25);
    transition: background 0.15s;
}
.history-preview-video-thumb:hover .history-video-play-overlay {
    background: rgba(0,0,0,0.45);
}
.history-preview-fullvideo video {
    max-height: 200px;
}

.shell-history-draggable {
    cursor: grab;
}

.shell-history-draggable:active {
    cursor: grabbing;
}

.history-preview-placeholder {
    display: grid;
    justify-items: center;
    gap: 10px;
    padding: 18px 14px;
    text-align: center;
    color: var(--muted);
}

.history-mini-spinner {
    width: 26px;
    height: 26px;
    border-radius: 999px;
    border: 3px solid rgba(242, 139, 60, 0.18);
    border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
}

.history-prompts {
    display: grid;
    gap: 10px;
}

.history-prompt-field {
    display: grid;
    gap: 6px;
}

.history-prompt-field span {
    font-size: 0.85rem;
    font-weight: 700;
    color: #c6cfdb;
}

.history-prompt-field textarea {
    min-height: unset;
    resize: none;
    font-size: 0.8rem;
    line-height: 1.3;
    overflow: hidden;
}

.history-assets {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 8px;
}

.shell-asset-grid {
    display: grid;
    gap: 10px;
    grid-template-columns: repeat(auto-fill, var(--rail-scale, 82px));
    align-content: start;
    justify-items: stretch;
    margin-top: 0;
}

.shell-asset-grid-top {
    align-items: start;
}

.history-derived-assets {
    margin-top: 2px;
}

.history-asset {
    display: grid;
    gap: 6px;
    min-width: 0;
    align-content: start;
}

.shell-shelf-asset {
    cursor: grab;
    padding: 8px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
}

.shell-shelf-asset:active {
    cursor: grabbing;
}

.history-asset span {
    font-size: 0.72rem;
    line-height: 1.25;
    color: var(--muted);
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.history-asset-thumb {
    aspect-ratio: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.02);
}

.history-asset-thumb img,
.history-asset-thumb video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    background: rgba(255, 255, 255, 0.02);
}
.history-asset-thumb .shelf-play-badge {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    color: rgba(255,255,255,0.8);
    pointer-events: none;
}

.history-nested-group {
    margin-top: 4px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}

.history-nested-group summary {
    list-style: none;
    cursor: pointer;
    padding: 10px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.history-nested-group summary::-webkit-details-marker {
    display: none;
}

.history-nested-group[open] summary {
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.history-nested-group .shell-asset-grid {
    padding: 10px;
}

[data-image-panel].is-drop-target {
    box-shadow: 0 0 0 2px rgba(242, 139, 60, 0.5);
}

.history-empty {
    padding: 10px 0 4px;
}

.step-panel {
    padding: 0;
    overflow: hidden;
}

.step-panel-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 18px 20px;
}

.step-panel-summary::-webkit-details-marker {
    display: none;
}

.step-panel-summary h2 {
    margin: 0;
}

.step-panel-note {
    margin: 4px 0 0;
}

.step-state-pill {
    display: inline-flex;
    align-items: center;
    min-height: 28px;
    padding: 0 12px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.04);
    color: var(--muted);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
}

.step-panel-body {
    padding: 0 20px 20px;
}

.step-panel-nav {
    margin-top: 18px;
    justify-content: flex-end;
}

.step-next-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    transform: none;
}

.step-panel.is-step-active {
    border-color: rgba(242, 139, 60, 0.5);
    box-shadow: 0 0 0 1px rgba(242, 139, 60, 0.2), var(--shadow);
}

.step-panel.is-step-active .step-state-pill {
    color: #ffc89e;
    border-color: rgba(242, 139, 60, 0.3);
    background: rgba(242, 139, 60, 0.14);
}

.step-panel.is-step-complete .step-state-pill {
    color: #b8f1c1;
    border-color: rgba(53, 188, 108, 0.22);
    background: rgba(53, 188, 108, 0.12);
}

.step-panel.is-step-upcoming {
    opacity: 0.8;
}

.primary-btn,
.secondary-btn,
.link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 46px;
    padding: 0 18px;
    border-radius: 999px;
    font: inherit;
    text-decoration: none;
    cursor: pointer;
}

.primary-btn {
    border: 0;
    background: var(--accent);
    color: #fff;
}

.primary-btn:hover {
    background: var(--accent-dark);
}

.secondary-btn,
.link-btn {
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink);
}

.secondary-btn:hover,
.link-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(242, 139, 60, 0.34);
    transform: translateY(-1px);
}

.secondary-btn:focus-visible,
.link-btn:focus-visible,
.primary-btn:focus-visible {
    outline: 2px solid rgba(242, 139, 60, 0.75);
    outline-offset: 2px;
}

/* Never put pointer-events:none on .secondary-btn:active — it kills the click gesture. */
.secondary-btn:active,
.link-btn:active {
    opacity: 0.9;
    transform: translateY(0);
}

.primary-btn:disabled,
.primary-btn[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    pointer-events: none;
}

.primary-btn:active {
    transform: translateY(0);
}

/* ── Render Estimate Badge ──────────────────────────────────────────── */
.render-estimate-wrap {
    margin: 10px 0 4px;
}

.render-estimate-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 10px;
    padding: 10px 14px 8px;
    font-size: 0.82rem;
    color: var(--text-secondary, #a0a0b0);
}

.re-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.re-icon { font-size: 0.95rem; }

.re-title {
    font-weight: 600;
    color: var(--text-primary, #e0e0f0);
    font-size: 0.83rem;
}

.re-confidence {
    margin-left: auto;
    font-size: 0.74rem;
    padding: 2px 7px;
    border-radius: 20px;
    background: rgba(255,255,255,0.06);
    white-space: nowrap;
}
.re-conf-high   { color: #5de888; }
.re-conf-medium { color: #f5c542; }
.re-conf-low    { color: #f59442; }
.re-conf-none   { color: #888; }

.re-total {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary, #e8e8f8);
    line-height: 1.3;
}

.re-cost {
    font-size: 0.82rem;
    font-weight: 400;
    color: var(--text-secondary, #a0a0b0);
}

.re-steps-detail {
    margin-top: 7px;
    font-size: 0.78rem;
}

.re-steps-detail summary {
    cursor: pointer;
    color: var(--text-secondary, #888);
    user-select: none;
    padding: 2px 0;
}

.re-steps-list {
    list-style: none;
    margin: 6px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.re-steps-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 0;
    border-bottom: 1px solid rgba(255,255,255,0.04);
}

.re-step-label {
    flex: 1;
    color: var(--text-primary, #ccc);
}

.re-step-range {
    color: var(--text-secondary, #999);
    white-space: nowrap;
}

.re-step-n {
    font-size: 0.72rem;
    color: #666;
    min-width: 36px;
    text-align: right;
}
.re-step-est { color: #555; font-style: italic; }

/* ── Job Result Cost/Time row ───────────────────────────────────────── */
.result-stats-row {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
    margin: 4px 0 2px;
    flex-shrink: 0;
}

.result-stat-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 0.82rem;
    color: var(--text-secondary, #bbb);
}

.result-stat-chip strong {
    color: var(--text-primary, #eee);
    font-weight: 600;
}

.is-action-btn {
    min-width: 168px;
    font-weight: 700;
    background: rgba(242, 139, 60, 0.12);
    border-color: rgba(242, 139, 60, 0.26);
}

.is-next-step-glow {
    border-color: rgba(72, 199, 102, 0.8);
    box-shadow: 0 0 0 1px rgba(72, 199, 102, 0.3), 0 0 24px rgba(72, 199, 102, 0.28);
    animation: next-step-pulse 1.2s ease-in-out infinite alternate;
}

@keyframes next-step-pulse {
    from {
        transform: translateY(0);
        box-shadow: 0 0 0 1px rgba(72, 199, 102, 0.22), 0 0 12px rgba(72, 199, 102, 0.18);
    }
    to {
        transform: translateY(-1px);
        box-shadow: 0 0 0 1px rgba(72, 199, 102, 0.38), 0 0 28px rgba(72, 199, 102, 0.34);
    }
}

.button-row,
.full-row {
    display: flex;
    gap: 12px;
}

.wrap-row {
    flex-wrap: wrap;
}

.button-row form {
    margin: 0;
}

.thumb-grid-editor {
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}

.thumb-card-editor {
    position: relative;
    padding: 0;
    overflow: hidden;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(33, 36, 45, 0.96), rgba(21, 24, 31, 0.94));
    border: 1px solid rgba(255, 255, 255, 0.06);
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.thumb-card-editor input {
    position: absolute;
    opacity: 0;
    inset: 0;
    pointer-events: none;
}

.thumb-card-editor .thumb-media {
    aspect-ratio: 1.2 / 1;
    background: rgba(255, 255, 255, 0.03);
    overflow: hidden;
}

.thumb-card-editor .thumb-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.thumb-copy {
    padding: 14px 16px 16px;
    display: grid;
    gap: 6px;
}

.thumb-title {
    font-weight: 700;
    font-size: 1rem;
    color: #f4f7fb;
}

.thumb-card-editor:hover {
    border-color: rgba(242, 139, 60, 0.28);
    transform: translateY(-1px);
}

.thumb-card-editor:has(input:checked) {
    border-color: rgba(242, 139, 60, 0.85);
    box-shadow: 0 0 0 1px rgba(242, 139, 60, 0.28), 0 18px 38px rgba(242, 139, 60, 0.18);
}

.thumb-grid.is-disabled {
    opacity: 0.45;
    pointer-events: none;
    filter: grayscale(0.25);
}

.prompt-editor-shell {
    display: grid;
    grid-template-columns: minmax(300px, 0.94fr) minmax(480px, 1.06fr);
    gap: 22px;
    align-items: start;
}

.car360-v2-form {
    gap: 18px;
}

.car360-v2-header {
    display: flex;
    justify-content: space-between;
    gap: 18px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.car360-v2-readiness {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    padding: 12px 18px;
    border-radius: 999px;
    background: rgba(242, 139, 60, 0.14);
    border: 1px solid rgba(242, 139, 60, 0.28);
    color: #ffd2a9;
    font-weight: 700;
    letter-spacing: 0.02em;
}

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

.car360-v2-slot {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    align-items: start;
}

.car360-v2-slot-copy h3 {
    margin-bottom: 6px;
}

.car360-v2-slot-copy .muted {
    margin: 0;
}

.car360-v2-dropzone {
    min-height: 0;
    padding: 8px;
}

.car360-v2-upload-status,
.car360-v2-draw-status {
    margin-top: 10px;
}

.car360-v2-canvas-wrap {
    display: block;
    margin-top: 12px;
    aspect-ratio: 16 / 9;
    min-height: 240px;
    border-radius: 18px;
    overflow: hidden;
    background:
        radial-gradient(circle at top, rgba(242, 139, 60, 0.12), transparent 50%),
        linear-gradient(180deg, rgba(38, 42, 54, 0.92), rgba(24, 27, 35, 0.98));
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.car360-v2-dropzone .preview-image {
    width: 100%;
    max-width: none;
    max-height: none;
    height: 100%;
    object-fit: contain;
    border: 0;
    border-radius: 0;
}

.car360-v2-dropzone .draw-canvas {
    width: 100%;
    height: 100%;
}

.car360-v2-guide {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 20px;
    color: rgba(255, 255, 255, 0.7);
    text-align: center;
}

.image-panel.has-preview .car360-v2-guide {
    display: none;
}

.car360-v2-guide-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(242, 139, 60, 0.18);
    border: 1px solid rgba(242, 139, 60, 0.28);
    color: #ffd7b5;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 0.08em;
}

.car360-v2-guide-image {
    width: min(90%, 300px);
    aspect-ratio: 16 / 10;
    object-fit: cover;
    border-radius: 14px;
    background: #f7f7f7;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.car360-v2-guide-text {
    margin: 0;
    max-width: 280px;
    font-size: 0.95rem;
    line-height: 1.4;
}

.car360-v2-panel-actions {
    margin-top: 0;
}

.car360-v2-hidden-control {
    display: none;
}

@media (max-width: 980px) {
    .car360-v2-grid {
        grid-template-columns: 1fr;
    }
}

.prompt-editor-preview,
.prompt-editor-controls {
    min-width: 0;
}

.prompt-editor-preview {
    position: sticky;
    top: 10px;
    display: grid;
    gap: 16px;
    align-self: start;
}

.prompt-editor-preview-head,
.prompt-editor-preview-block,
.prompt-editor-section {
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: linear-gradient(180deg, rgba(27, 31, 40, 0.98), rgba(21, 24, 31, 0.96));
    padding: 18px 20px;
}

.prompt-editor-preview-head h3,
.prompt-editor-toolbar h3 {
    margin: 0;
}

.prompt-editor-preview-head p,
.prompt-editor-toolbar p {
    margin-bottom: 0;
}

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

.preview-media-card {
    border-radius: 18px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.02);
    min-height: 220px;
    display: flex;
    flex-direction: column;
}

.preview-media-label {
    padding: 12px 14px 0;
    font-size: 0.78rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--muted);
    font-weight: 700;
}

.preview-media-card img {
    width: calc(100% - 24px);
    margin: 12px;
    border-radius: 16px;
    aspect-ratio: 1 / 1;
    object-fit: cover;
    display: none;
}

.preview-media-card img.is-visible {
    display: block;
}

.preview-media-empty {
    margin: auto 14px 14px;
}

.preview-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.preview-chip {
    display: inline-flex;
    align-items: center;
    min-height: 34px;
    padding: 0 14px;
    border-radius: 999px;
    border: 1px solid rgba(242, 139, 60, 0.22);
    background: rgba(242, 139, 60, 0.1);
    color: #ffd6b7;
    font-size: 0.92rem;
    font-weight: 600;
}

.preview-chip.is-empty {
    color: var(--muted);
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
}

.preview-meta-head {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.preview-meta-head h4 {
    margin: 0;
}

.prompt-editor-copy-preview {
    min-height: 220px;
    margin: 0;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.prompt-editor-controls {
    display: grid;
    gap: 16px;
}

.prompt-editor-section-hero {
    display: grid;
    gap: 16px;
    padding: 20px 22px;
    background:
        linear-gradient(180deg, rgba(34, 38, 48, 0.98), rgba(22, 25, 33, 0.96)),
        radial-gradient(circle at top right, rgba(242, 139, 60, 0.08), transparent 32%);
}

.compact-quiz-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: end;
}

.prompt-editor-inline-status {
    min-height: 22px;
}

.prompt-editor-subhead {
    display: grid;
    gap: 6px;
    margin-bottom: 14px;
}

.prompt-editor-subhead h4 {
    margin: 0;
}

.prompt-editor-toolbar {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: 16px;
}

.choice-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.option-card-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 12px;
}

.option-pill-grid {
    grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}

.option-card {
    position: relative;
    display: grid;
    gap: 6px;
    min-height: 84px;
    padding: 16px 16px 14px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.025);
    cursor: pointer;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease, background 0.18s ease;
}

.option-card input {
    position: absolute;
    opacity: 0;
    inset: 0;
    pointer-events: none;
}

.option-card-title {
    font-size: 1rem;
    font-weight: 700;
    color: #edf1f8;
}

.option-card:hover {
    transform: translateY(-1px);
    border-color: rgba(242, 139, 60, 0.24);
}

.option-card:has(input:checked) {
    border-color: rgba(242, 139, 60, 0.9);
    background: linear-gradient(180deg, rgba(242, 139, 60, 0.16), rgba(242, 139, 60, 0.07));
    box-shadow: 0 0 0 1px rgba(242, 139, 60, 0.22), 0 14px 30px rgba(242, 139, 60, 0.16);
}

.option-card-compact {
    min-height: 62px;
    padding-top: 12px;
    padding-bottom: 12px;
}

.option-pill {
    min-height: 70px;
    padding: 14px 15px 12px;
    align-content: center;
}

.choice-chip-strong {
    border-color: rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.03);
    color: var(--ink);
    min-height: 46px;
    padding-inline: 16px;
    transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, transform 0.18s ease;
}

.choice-chip-strong:hover {
    border-color: rgba(242, 139, 60, 0.26);
    transform: translateY(-1px);
}

.choice-chip-strong:has(input:checked) {
    border-color: rgba(242, 139, 60, 0.82);
    background: linear-gradient(180deg, rgba(242, 139, 60, 0.16), rgba(242, 139, 60, 0.08));
    box-shadow: 0 0 0 1px rgba(242, 139, 60, 0.2), 0 10px 24px rgba(242, 139, 60, 0.14);
}

.prompt-editor-collapse {
    padding: 0;
    overflow: hidden;
}

.prompt-editor-collapse-summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 18px 20px;
}

.prompt-editor-collapse-summary::-webkit-details-marker {
    display: none;
}

.prompt-editor-collapse-summary h4 {
    margin: 0;
}

.prompt-editor-collapse-body {
    display: grid;
    gap: 16px;
    padding: 0 20px 20px;
}

.full-row {
    grid-column: 1 / -1;
}

.back-link {
    color: var(--accent);
    text-decoration: none;
}

.dr-progress-log {
    max-height: 320px;
    overflow-y: auto;
    scroll-behavior: smooth;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .78rem;
    line-height: 1.6;
}
/* Thin scrollbar for the log */
.dr-progress-log::-webkit-scrollbar { width: 4px; }
.dr-progress-log::-webkit-scrollbar-thumb { background: rgba(255,255,255,.15); border-radius: 2px; }

/* ── Live clock ring — compact, inline with status text ───────────────────── */
.dr-status-row {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 6px 0 0;
}
.dr-status-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    text-align: left;
    min-width: 0;
}
.dr-clock-wrap {
    position: relative;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin: 0;
}
.dr-clock-svg {
    position: absolute;
    inset: 0;
    width: 52px;
    height: 52px;
}
/* The arc group spins around the ring center */
.dr-clock-arc {
    animation: dr-clock-spin 2.2s linear infinite;
    transform-origin: 44px 44px;
}
@keyframes dr-clock-spin {
    to { transform: rotate(360deg); }
}
.dr-clock-time {
    position: relative;
    z-index: 1;
    font-size: .78rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1;
    pointer-events: none;
}
/* Last log line shown next to the clock */
.dr-last-step {
    font-size: .78rem;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.45);
    max-width: none;
    text-align: left;
    margin: 0;
    min-height: 1.1em;
    word-break: break-word;
    transition: opacity .25s;
}
/* Elapsed chip inside progress log <summary> */
.dr-log-elapsed {
    font-size: .7rem;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 8px;
    font-weight: 500;
}
.dr-log-elapsed:empty { display: none; }

.pre-block {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 16px;
    text-align: left;
}

.loading-card {
    display: grid;
    justify-items: center;
    gap: 14px;
    text-align: center;
    padding: 28px 20px;
}

.is-hidden {
    display: none !important;
}

.loading-spinner {
    width: 54px;
    height: 54px;
    border-radius: 999px;
    border: 4px solid rgba(182, 86, 51, 0.18);
    border-top-color: var(--accent);
    animation: spin 0.9s linear infinite;
}

.loading-copy {
    margin: 0;
}

/* Build-log progress — steps accumulate instead of cycling */
.loading-copy.recipe-log {
    display: flex;
    flex-direction: column;
    gap: 5px;
    text-align: left;
}

.recipe-log-step {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.88rem;
    line-height: 1.4;
    transition: opacity 0.4s;
}

.recipe-log-step.is-active {
    color: #fff;
    opacity: 1;
    font-weight: 600;
}

.recipe-log-step.is-done {
    color: var(--accent);
    opacity: 0.5;
    font-weight: 400;
}

.loading-dots::after {
    content: "";
    display: inline-block;
    width: 1.4em;
    text-align: left;
    animation: dots 1.2s steps(4, end) infinite;
}

code {
    font-family: Consolas, "Courier New", monospace;
}

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

@keyframes dots {
    0% {
        content: "";
    }
    25% {
        content: ".";
    }
    50% {
        content: "..";
    }
    75% {
        content: "...";
    }
    100% {
        content: "";
    }
}

@media (max-width: 900px) {
    .page-shell {
        width: calc(100vw - 16px);
        padding-left: 8px;
        padding-right: 8px;
    }

    .shell-header {
        position: static;
    }

    .workspace-head {
        flex-direction: column;
        align-items: flex-start;
    }

    .demo-frame {
        min-height: 68vh;
    }

    .dropzone-layout {
        grid-template-columns: 1fr;
    }
}

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

    .workspace-rail {
        max-height: none;
    }

    .result-shell {
        grid-template-columns: 1fr;
    }

    .result-history-rail {
        position: static;
        max-height: none;
    }

    .prompt-editor-shell {
        grid-template-columns: 1fr;
    }

    .prompt-editor-preview {
        position: static;
    }
}

@media (max-width: 960px) {
    .prompt-preview-media-grid {
        grid-template-columns: 1fr;
    }

    .prompt-editor-toolbar {
        flex-direction: column;
    }

    .option-card-grid {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .compact-quiz-grid {
        grid-template-columns: 1fr;
    }
}


@media (max-width: 1100px) {
    .shell-header {
        grid-template-columns: 1fr;
    }

    .shell-demo-strip {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* ── Reveal browser layout ──────────────────────────── */
.reveal-browser-grid {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(280px, 0.7fr);
    gap: 12px;
    align-items: start;
}

.reveal-browser-main {
    display: grid;
    gap: 12px;
    align-content: start;
}

.reveal-browser-review {
    display: grid;
    gap: 12px;
    align-content: start;
}

/* Bigger product image */
.demo-effect-screen-reveal .reveal-upload-panel .canvas-wrap {
    min-height: 280px;
}

.demo-effect-screen-reveal .reveal-upload-panel .preview-image {
    max-width: 100%;
    max-height: 380px;
    object-fit: contain;
}

/* Look panel */
.reveal-look-panel {
    display: grid;
    gap: 14px;
}

/* Prompts accordion */
.reveal-prompts-details {
    display: grid;
}

.reveal-prompts-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    gap: 12px;
    list-style: none;
    padding: 0;
}

.reveal-prompts-summary::-webkit-details-marker { display: none; }

.reveal-prompts-toggle-label {
    font-size: 0.75rem;
    color: rgba(255,255,255,0.45);
    flex-shrink: 0;
}

.reveal-prompt-grid {
    display: grid;
    gap: 10px;
    margin-top: 12px;
}

.reveal-render-panel {
    display: grid;
    gap: 12px;
    align-content: start;
}

.reveal-color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
}

.reveal-mode-grid {
    margin-bottom: 4px;
}

.reveal-color-control {
    display: grid;
    gap: 14px;
}

.reveal-color-field {
    display: grid;
    grid-template-columns: 72px 1fr;
    gap: 12px;
    align-items: center;
}

.reveal-color-field input[type="color"] {
    width: 72px;
    height: 54px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 14px;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.reveal-color-field input[type="text"] {
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.reveal-swatch-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.reveal-swatch-chip {
    width: 36px;
    height: 36px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1);
    flex: 0 0 auto;
}

.reveal-swatch-row p {
    margin: 0;
    color: var(--muted);
}

.reveal-prompt-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 18px;
}

.reveal-prompts-details {
    padding: 0;
    overflow: hidden;
}

.reveal-prompts-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 18px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.reveal-prompts-summary::-webkit-details-marker {
    display: none;
}

.reveal-prompts-summary h2 {
    margin: 0 0 2px;
}

.reveal-prompts-summary .muted {
    margin: 0;
}

.reveal-prompts-toggle-label {
    flex-shrink: 0;
    font-size: 0.8rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.45);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.reveal-prompts-details[open] .reveal-prompts-toggle-label {
    color: rgba(255, 255, 255, 0.3);
}

.reveal-prompts-details > .reveal-prompt-grid,
.reveal-prompts-details > .button-row {
    padding: 0 18px 14px;
}

.shell-copy-actions {
    margin-top: 12px;
}

.page-shell.ui-lab-shell {