/* mAInframe -- UI Stylesheet */

@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/dm-sans-latin-400.woff2") format("woff2");
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/dm-sans-latin-500.woff2") format("woff2");
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url("fonts/dm-sans-latin-600.woff2") format("woff2");
}
@font-face {
    font-family: "DM Sans";
    font-style: normal;
    font-weight: 700;
    font-display: swap;
    src: url("fonts/dm-sans-latin-700.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/jetbrains-mono-latin-400.woff2") format("woff2");
}
@font-face {
    font-family: "JetBrains Mono";
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url("fonts/jetbrains-mono-latin-500.woff2") format("woff2");
}
/* Corpta: the "mainframe" wordmark face (A-Z / a-z only, no digits). */
@font-face {
    font-family: "Corpta";
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url("fonts/corpta.woff2") format("woff2"),
         url("fonts/corpta.woff") format("woff");
}
.wordmark {
    font-family: "Corpta", var(--font, system-ui);
    font-weight: 400;
    letter-spacing: 0.01em;
    white-space: nowrap;
}
/* Logo palette (matches mframelogo.svg / mframe_text.svg), theme-independent. */
.wordmark .wm-a { color: #f0be6f; }
.wordmark .wm-b { color: #b3d0c6; }
:root[data-theme="light"] .wordmark .wm-a { color: #b9822a; }
:root[data-theme="light"] .wordmark .wm-b { color: #4f7a70; }

:root {
    --bg-0: #07090f;
    --bg-1: #0c1019;
    --bg-2: #131926;
    --bg-3: #1a2233;
    --border: rgba(255,255,255,0.06);
    --border-hover: rgba(255,255,255,0.16);
    --gold: #f0be6f;
    --gold-dim: #c4903c;
    --gold-glow: color-mix(in srgb, var(--accent) 18%, transparent);
    --gold-glow-strong: color-mix(in srgb, var(--accent) 35%, transparent);
    --accent: var(--gold);
    --sage: #b3d0c6;
    --text: #e8ecf2;
    --text-2: #bbc4d1;
    --text-3: #a0a9b9;
    --text-4: #8993a4;
    --red: #f0625e;
    --error: #f0625e;
    --green: #4ade80;
    --on-accent: #1a1206;
    /* Text accents and filled controls have distinct contrast requirements. */
    --accent-hover: #f7cf91;
    --surface: var(--bg-1);
    --bg: var(--bg-0);
    --muted: var(--text-3);
    --text-dim: var(--text-3);
    --surface-hover: var(--bg-2);
    --floating-bg: var(--bg-1);
    --hub-bg: radial-gradient(ellipse at 50% 35%, var(--bg-1), var(--bg-0));
    --selected-bg: color-mix(in srgb, var(--accent) 12%, var(--bg-1));
    --media-bg: #10151e;
    --media-text: #f4f6fa;
    color-scheme: dark;
    --r: 6px;
    --r-lg: 10px;
    --font: "DM Sans", system-ui, "Segoe UI", -apple-system, sans-serif;
    --mono: "JetBrains Mono", ui-monospace, "Cascadia Code", "Consolas", monospace;
    /* Letterbox backdrop behind video/image previews. */
    --stage-bg: #000;
    --stage-text: #b9c4d4;
    /* RGB triplet used to fade the style sidebar footer into the surface. */
    --fade-rgb: 12 16 25;
    --titlebar-h: 52px;
    --header-h: 34px;
    --chrome-offset: calc(var(--titlebar-h) + var(--header-h));
    --res-cpu: #60a5fa;
    --res-ram: #a78bfa;
    --res-gpu: #34d399;
    --res-vram: #fbbf24;
}

/* ---- SCROLLBARS (plugin-wide) ---- */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--bg-3) transparent;
}
*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background: var(--bg-3);
    border-radius: 3px;
    border: 1px solid transparent;
    background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
    background: var(--gold-dim);
    background-clip: padding-box;
}
*::-webkit-scrollbar-corner {
    background: transparent;
}

/* ---- THEMES (override the palette; everything else reads the vars) ---- */
/* Light: bright neutral surfaces with a deeper gold accent for contrast. */
:root[data-theme="light"] {
    --bg-0: #f5f7fb;
    --bg-1: #ebeef5;
    --bg-2: #e1e6f0;
    --bg-3: #d4dce8;
    --border: rgba(20,28,42,0.12);
    --border-hover: rgba(20,28,42,0.22);
    --gold: #805416;
    --gold-dim: #956522;
    --gold-glow: rgba(185,130,42,0.16);
    --gold-glow-strong: rgba(185,130,42,0.32);
    --accent: #edba67;
    --accent-hover: #f5c77e;
    --sage: #216c58;
    --text: #16202e;
    --text-2: rgba(22,32,46,0.72);
    --text-3: #505d70;
    --text-4: #505d70;
    --red: #b42a29;
    --error: #b42a29;
    --green: #216c3c;
    --on-accent: #1a1206;
    --stage-bg: #dfe4ec;
    --stage-text: #465166;
    --fade-rgb: 235 238 245;
    color-scheme: light;
}

/* Retro: Windows 3.1 -- silver beveled chrome, teal desktop, navy title bars. */
:root[data-theme="retro"] {
    --bg-0: #c0c0c0;   /* controls stay silver; teal belongs to the desktop */
    --bg-1: #c0c0c0;   /* silver window surface */
    --bg-2: #c0c0c0;
    --bg-3: #b8b8b8;
    --border: #808080;
    --border-hover: #000000;
    --gold: #000080;        /* navy = selection / accent */
    --gold-dim: #000060;
    --gold-glow: rgba(0,0,128,0);        /* no glow in 3.1 */
    --gold-glow-strong: rgba(0,0,128,0);
    --accent: var(--gold);
    --accent-hover: #000060;
    --hub-bg: #008080;
    --surface-hover: #d4d0c8;
    --sage: #006000;
    --text: #000000;
    --text-2: #1a1a1a;
    --text-3: #3c3c3c;
    --text-4: #4a4a4a;
    --red: #970000;
    --error: #970000;
    --green: #006000;
    --on-accent: #ffffff;
    --stage-bg: #404040;
    --stage-text: #eeeeee;
    --fade-rgb: 192 192 192;
    --r: 0px;          /* everything is square */
    --r-lg: 0px;
    --font: "MS Sans Serif", Tahoma, Geneva, Verdana, sans-serif;
    color-scheme: light;
}

/* ---- Windows 3.1 structural chrome (retro only) ---- */
/* Navy active title bar with white text. */
:root[data-theme="retro"] .titlebar {
    background: linear-gradient(180deg, #000088, #000060);
    border-bottom: 1px solid #000;
    color: #fff;
}
:root[data-theme="retro"] .titlebar-variant,
:root[data-theme="retro"] .titlebar-brand { color: #fff; }

/* Tab bar / footer sit on the silver surface. */
:root[data-theme="retro"] .tab-bar { background: #c0c0c0; border-bottom: 1px solid #808080; }
:root[data-theme="retro"] .tab.active .tab-icon { box-shadow: none; }

/* Raised beveled buttons (white top-left, black/grey bottom-right). */
:root[data-theme="retro"] .btn,
:root[data-theme="retro"] .btn-gold,
:root[data-theme="retro"] .btn-outline,
:root[data-theme="retro"] .btn-danger {
    background: #c0c0c0;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
    text-shadow: none;
    text-transform: none;
    letter-spacing: 0;
}
:root[data-theme="retro"] .btn-danger { color: var(--error); }
:root[data-theme="retro"] .btn:hover:not(:disabled),
:root[data-theme="retro"] .btn-gold:hover:not(:disabled),
:root[data-theme="retro"] .btn-outline:hover:not(:disabled),
:root[data-theme="retro"] .btn-danger:hover:not(:disabled) {
    background: #c8c8c8;
    color: #000;
    border-color: #000;
    transform: none;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
/* Pressed = sunken bevel. */
:root[data-theme="retro"] .btn:active:not(:disabled),
:root[data-theme="retro"] .btn-gold:active:not(:disabled),
:root[data-theme="retro"] .btn-outline:active:not(:disabled) {
    box-shadow: inset -1px -1px 0 #fff, inset 1px 1px 0 #808080;
}

/* Sunken (recessed) text fields. */
:root[data-theme="retro"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root[data-theme="retro"] select,
:root[data-theme="retro"] textarea {
    background: #fff;
    color: #000;
    border: 1px solid #000;
    border-radius: 0;
    box-shadow: inset 1px 1px 0 #808080;
}

/* Silver beveled panels (collapsible advanced panel etc). */
:root[data-theme="retro"] .advanced-panel {
    background: #c0c0c0;
    border: 1px solid #000;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}

*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
::selection { background:var(--accent); color:var(--on-accent); }

/* Fluid type scale: the whole UI tracks window width / DPI instead of
   staying at fixed 13px. Components sized in px keep their proportions;
   rem-based ones (body, controls) scale between 12 and 16px roots. */
:root { font-size: clamp(12px, 0.55vw + 9px, 16px); }

html, body {
    height: 100%;
    max-height: 100%;
    overflow: hidden;
}

body {
    font-family: var(--font);
    font-size: 1rem;
    background: var(--bg-0);
    color: var(--text);
    display: flex;
    flex-direction: column;
    min-width: 0;
    -webkit-font-smoothing: antialiased;
}

/* ---- CUSTOM TITLEBAR ---- */
.titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    height: auto;
    min-height: var(--titlebar-min, 52px);
    row-gap: 2px;
    padding-top: 0;
    background: var(--bg-0);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 50;
    -webkit-app-region: drag;
    app-region: drag;
    user-select: none;
}
.titlebar-drag {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding-left: 12px;
    flex: 1 1 180px;
    min-width: 0;
}
.titlebar-brand {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 1px;
    padding-top: 0;
}
.titlebar-variant {
    font-family: var(--mono);
    font-size: 8px;
    line-height: 1;
    text-transform: lowercase;
    letter-spacing: 0.08em;
    color: var(--gold);
    margin-left: 1px;
}
.titlebar-controls {
    display: flex;
    align-self: stretch;
    align-items: stretch;
    height: auto;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.update-toast {
    position: fixed;
    top: calc(var(--titlebar-h) + 12px);
    right: 12px;
    z-index: 80;
    display: flex;
    align-items: center;
    gap: 12px;
    max-width: min(420px, calc(100vw - 24px));
    padding: 10px 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
    color: var(--text);
    font-size: 12px;
}
.update-toast.hidden { display: none; }
.update-toast p { margin: 0; white-space: nowrap; }
.update-actions { display: flex; gap: 8px; flex-shrink: 0; }
.update-modal-card { width: min(520px, 100%); max-width: 520px; }
.update-notes {
    white-space: pre-wrap;
    color: var(--text-2);
    font-size: 13px;
    line-height: 1.5;
    max-height: min(50vh, 360px);
    overflow: auto;
    margin: 0 0 16px;
}
.win-btn {
    background: none;
    border: none;
    color: var(--text);
    width: 46px;
    height: auto;
    min-width: 46px;
    padding: 0;
    margin: 0;
    cursor: pointer;
    transition: background 0.1s, color 0.1s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.win-btn svg {
    display: block;
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.win-btn:hover { background: var(--surface-hover); color: var(--text); }
.win-btn-close:hover { background: #e81123; color: #fff; }

/* ---- HEADER ---- */
header {
    display: flex;
    align-items: center;
    justify-content: center;
    height: var(--header-h);
    padding: 0 12px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 20;
    min-width: 0;
}

.header-left {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-width: 0;
}
.header-logo {
    height: 34px;
    width: 34px;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px var(--gold-glow));
}
.header-wordmark-svg {
    height: 18px;
    flex-shrink: 0;
    opacity: 0.95;
    font-family: var(--font);
    font-weight: 700;
}
.header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.titlebar-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: 8px;
    min-width: 0;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}

.scene-badge {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-3);
    background: var(--bg-0);
    padding: 2px 8px;
    border-radius: 99px;
    border: 1px solid var(--border);
    letter-spacing: 0.04em;
    max-width: min(28vw, 220px);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.conn-dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    transition: all 0.3s;
}
.conn-dot.connected { background:var(--green); box-shadow:0 0 6px rgba(74,222,128,0.4); }
.conn-dot.disconnected { background:var(--red); box-shadow:0 0 4px rgba(240,98,94,0.3); }

#btn-pin { font-size: 12px; opacity: 0.4; transition: opacity 0.2s; }

/* Resource Monitor */
.resource-monitor {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: var(--bg-0);
    padding: 3px 12px;
    border-radius: 99px;
    border: 1px solid var(--border);
    font-family: var(--mono);
    font-size: 10px;
}
.res-gpu-name {
    color: var(--text-2);
    font-weight: 600;
    font-size: 9px;
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.res-divider {
    width: 1px;
    height: 12px;
    background: var(--border);
}
.res-stat { display:flex; align-items:center; gap:4px; }
.res-dot {
    width: 5px; height: 5px;
    border-radius: 50%;
    flex-shrink: 0;
    background: var(--text-3);
}
.res-label { color:var(--text-3); font-size:9px; text-transform:uppercase; letter-spacing:0.03em; }
.res-val { color:var(--text); font-weight:600; min-width:24px; text-align:right; }
.res-meter {
    position: relative;
    display: grid;
    grid-template-columns: auto auto;
    grid-template-rows: auto 3px;
    column-gap: 6px;
    row-gap: 3px;
    min-width: 54px;
    height: auto;
    padding: 0;
    background: transparent;
    overflow: visible;
    flex-shrink: 0;
}
.res-meter-track {
    grid-column: 1 / -1;
    height: 3px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.14);
    overflow: hidden;
}
.res-meter-fill {
    display: block;
    height: 100%;
    width: 0%;
    background: #3d7ec4;
    transition: width 0.35s ease;
}
.res-meter-ram .res-meter-fill { background: #8d86d4; }
.res-meter-gpu .res-meter-fill { background: #3d7ec4; }
.res-meter-vram .res-meter-fill { background: #4a93c9; }
.res-meter-temp .res-meter-fill { background: #d4a24a; }
.res-meter-label,
.res-meter-val {
    position: static;
    color: var(--text-2);
    text-shadow: none;
    line-height: 1;
}
.res-meter-label {
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    font-weight: 650;
}
.res-meter-val {
    margin-left: 0;
    font-size: 12px;
    font-weight: 700;
    color: var(--text);
    text-align: right;
}
.res-meter-track { height: 4px; }
.resource-monitor { gap: 16px; }

/* ---- TAB BAR (Style Transfer stepper only) ---- */
.tab-bar {
    display: none;
    align-items: center;
    justify-content: center;
    gap: 0;
    height: auto;
    min-height: 36px;
    overflow-x: auto;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    z-index: 10;
}
body.tool-style .tab-bar { display: flex; }
.tab {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--text-3);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 500;
    padding: 4px 14px;
    cursor: pointer;
    transition: color 0.15s, transform 0.15s;
    letter-spacing: 0.02em;
}
.tab:hover { color:var(--text-2); }
.tab.active {
    color: var(--gold);
    transform: scale(1.06);
}
.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px; height: 16px;
    border-radius: 50%;
    background: var(--bg-3);
    color: var(--text-3);
    font-size: 8px;
    font-weight: 700;
    transition: all 0.15s;
}
.tab.active .tab-icon {
    background: var(--accent);
    color: var(--on-accent);
    width: 22px;
    height: 22px;
    font-size: 10px;
    box-shadow: 0 0 8px var(--gold-glow);
}
.tab.done .tab-icon {
    background: var(--accent);
    color: var(--on-accent);
}
.tab.done + .tab-line { background: var(--gold-dim); }
.tab-line {
    width: 24px;
    height: 1px;
    background: var(--border);
}

/* ---- MAIN ---- */
main {
    flex: 1;
    overflow: hidden;
    position: relative;
}
.tab-panel {
    display: none;
    width: 100%; height: 100%;
    position: absolute; top: 0; left: 0;
}
.tab-panel.active { display:flex; }

/* ---- CAPTURE TAB ---- */
.capture-layout {
    display: flex;
    flex-direction: column;
    width: 100%; height: 100%;
    padding: 12px;
    gap: 8px;
    position: relative;
}
.capture-video-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-radius: var(--r-lg);
    overflow: hidden;
    background: var(--stage-bg);
    position: relative;
}
.capture-video-area {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    position: relative;
}
.capture-player {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: contain !important;
    display: none;
}
.capture-player.loaded { display:block !important; }

.capture-passes {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    flex-shrink: 0;
    padding: 6px 2px 0;
}
.capture-pass {
    border: 1px solid var(--border);
    background: transparent;
    color: var(--text-3);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    border-radius: 999px;
    padding: 3px 10px;
    cursor: pointer;
}
.capture-pass:hover:not(:disabled) { color: var(--text); border-color: var(--border-hover); }
.capture-pass.active {
    color: var(--text);
    border-color: var(--gold-dim);
    background: var(--bg-3);
}
.capture-pass:disabled { opacity: 0.35; cursor: default; }

.timeline-container { padding: 4px 8px 0; flex-shrink: 0; }
.timeline-bar {
    position: relative;
    height: 6px;
    margin: 10px 8px 22px;
    background: var(--bg-3);
    border-radius: 99px;
    cursor: pointer;
    user-select: none;
}
.timeline-range {
    position: absolute; top: 0; height: 100%;
    background: var(--gold);
    border-radius: 99px;
    pointer-events: none;
}
.timeline-handle {
    position: absolute; top: 50%;
    width: 14px; height: 14px;
    margin-left: -7px;
    border-radius: 50%;
    background: var(--sage);
    transform: translateY(-50%);
    cursor: ew-resize;
    z-index: 3;
}
.timeline-handle:hover,
.timeline-handle.dragging {
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--sage) 35%, transparent);
}
.handle-label {
    position: absolute; top: 16px;
    left: 50%; transform: translateX(-50%);
    font-size: 10px; font-weight: 700;
    color: var(--sage);
    font-family: var(--mono);
    white-space: nowrap;
    pointer-events: none;
}
.timeline-playhead {
    position: absolute; top: -5px;
    width: 2px; height: 16px;
    margin-left: -1px;
    background: #fff;
    pointer-events: none;
    z-index: 2;
}
.capture-transport.video-controls {
    justify-content: center;
    gap: 8px;
    padding: 2px 0 0;
    background: transparent;
    border-top: none;
}
.capture-transport .vc-play,
.capture-transport .tl-step {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}
.capture-transport .vc-play:hover,
.capture-transport .tl-step:hover { border-color: var(--border-hover); color: var(--gold); }
.pass-source {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 0 0 8px;
    flex-shrink: 0;
}
#vid-pass-source {
    display: grid;
    grid-template-columns: minmax(168px, 220px) minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}
.pass-source-controls {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
    min-width: 0;
}
.pass-source > label:first-child,
.pass-source-controls > label,
.pass-blend-weight {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}
#style-pass-source { padding: 0 12px 8px; }
/* This row sits on the preview stage, so its captions use the stage text colour. */
#style-pass-source > label:first-child,
#style-pass-source .pass-blend-weight,
#style-pass-source .checkbox-label { color: var(--stage-text); }
#style-pass-source .slim-slider { width: 88px; flex: 0 0 88px; }
#style-pass-source .input-sm { width: auto; min-width: 88px; }
#vid-pass-source .slim-slider { width: 100%; flex: none; }
#vid-pass-source .input-sm { width: 100%; min-width: 0; }
.pass-source select:focus,
.pass-source select:focus-visible {
    outline: none;
    outline-offset: 0;
    box-shadow: none;
    border-color: var(--border);
}
.pass-source-preview {
    display: flex;
    gap: 8px;
    min-width: 0;
    min-height: 148px;
}
.pass-source-preview[hidden] { display: none; }
.pass-source-thumb { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.pass-source-thumb canvas,
.pass-source-thumb video {
    width: 100%;
    height: 168px;
    object-fit: contain;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.pass-source-thumb span {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3);
}
.vid-ref-editor { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px; }
.timeline-frame-readout {
    font-family: var(--mono);
    font-size: 13px;
    color: var(--text);
    text-align: center;
    padding: 6px 0 2px;
    line-height: 1;
}

.capture-toolbar {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
    flex-wrap: wrap;
}
.capture-adjust {
    flex: 1 1 140px;
    min-width: 0;
}
.capture-adjust > summary {
    list-style: none;
    cursor: pointer;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-3);
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}
.capture-adjust > summary::-webkit-details-marker { display: none; }
.capture-adjust > summary:hover { color: var(--text); border-color: var(--border-hover); }
.capture-adjust[open] > summary { color: var(--gold); border-color: var(--gold-dim); }
.capture-adjust-readout {
    font-family: var(--mono);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--text-2);
}
.capture-adjust-body {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 10px;
    margin-top: 8px;
    padding: 10px 12px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.capture-adjust[open] { flex: 1 1 100%; }
.capture-toggle {
    align-self: flex-end;
    min-height: 30px;
    padding-bottom: 4px;
    white-space: nowrap;
}
.toolbar-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.toolbar-group label {
    font-size: 8px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
/* Camera names can be long; give the dropdown room to show the full value
   instead of clipping it to the width of the short "Active" option. */
#setting-camera {
    min-width: 180px;
    max-width: 320px;
}

/* ---- STYLE TAB ---- */
.style-layout {
    display: flex;
    width: 100%; height: 100%;
}
.style-preview {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
    min-height: 0;
    background: var(--stage-bg);
}
.wipe-container {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: 0;
}
.wipe-stage {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: center center;
    will-change: transform;
}
.frame-img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: none;
    z-index: 1;
}
.frame-img.loaded { display:block; }

.wipe-img {
    position: absolute; inset:0;
    width: 100%; height: 100%;
    object-fit: contain;
    display: none;
}
.wipe-img.loaded { display:block; }
.wipe-styled { z-index:2; }

.wipe-line {
    position: absolute; top:0;
    width: 2px; height:100%;
    background: var(--accent);
    box-shadow: 0 0 6px var(--gold-glow);
    z-index: 3;
    pointer-events: none;
    display: none;
}
.wipe-container.comparing .wipe-line { display:block; }

.frame-overlay {
    position: absolute; inset:0;
    display: flex;
    align-items: flex-start;
    justify-content: flex-end;
    padding: 8px 10px;
    background: none;
    color: var(--text-3);
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 5;
    pointer-events: auto;
}
.wipe-container:hover .frame-overlay { opacity:1; }
.wipe-container.comparing .frame-overlay,
.wipe-container.has-styled .frame-overlay { pointer-events: none; }
.wipe-container.comparing:hover .frame-overlay,
.wipe-container.has-styled:hover .frame-overlay,
.wipe-container.comparing .frame-overlay:focus-within,
.wipe-container.has-styled .frame-overlay:focus-within { opacity: 1; }
.wipe-container.comparing .frame-overlay-copy,
.wipe-container.comparing #btn-upload-input,
.wipe-container.has-styled .frame-overlay-copy,
.wipe-container.has-styled #btn-upload-input { display: none; }
.wipe-container.comparing #btn-markup-edit,
.wipe-container.has-styled #btn-markup-edit { pointer-events: auto; }
.frame-overlay.drag-active { opacity:1; border:2px dashed var(--gold); background:color-mix(in srgb, var(--accent) 12%, transparent); align-items:center; justify-content:center; }
.frame-overlay-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    pointer-events: auto;
}
.frame-overlay-copy {
    display: none;
}
.frame-overlay.drag-active .frame-overlay-copy {
    display: block;
    text-align: center;
}
.frame-overlay.drag-active .frame-overlay-inner {
    flex-direction: column;
}
.frame-overlay-actions {
    display: flex;
    align-items: center;
    gap: 6px;
}
.frame-overlay-btn {
    min-width: 28px;
    min-height: 28px;
    padding: 0 10px;
    border: 1px solid var(--border-hover);
    border-radius: var(--r);
    background: var(--floating-bg);
    color: var(--text);
    font-family: var(--font);
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: border-color 0.15s, color 0.15s, transform 0.15s, background 0.15s;
}
.frame-overlay-btn:hover {
    border-color: var(--gold-dim);
    color: var(--gold);
    background: var(--floating-bg);
}
.frame-overlay-btn-label {
    min-width: auto;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.viewer-hint {
    position: absolute;
    left: 12px;
    bottom: 12px;
    padding: 6px 10px;
    border-radius: var(--r);
    background: var(--floating-bg);
    border: 1px solid var(--border);
    color: var(--text-2);
    font-size: 10px;
    pointer-events: none;
    z-index: 6;
}

.scrubber-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}
.scrubber-label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    flex-shrink: 0;
}
.slim-slider {
    flex: 1;
    height: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: var(--bg-3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
}
.slim-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-0);
    cursor: pointer;
}
.slim-slider::-moz-range-thumb {
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var(--accent);
    border: 2px solid var(--bg-0);
    cursor: pointer;
}
.scrubber-val {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--text);
    min-width: 28px;
    text-align: right;
}
.scrubber-range {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-4);
}

/* ---- SIDEBAR ---- */
.style-sidebar {
    width: clamp(240px, 26vw, 340px);
    padding: 14px;
    flex-shrink: 0;
    background: var(--bg-1);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}
.style-sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}
.style-sidebar-scroll::-webkit-scrollbar { width:4px; }
.style-sidebar-scroll::-webkit-scrollbar-track { background:transparent; }
.style-sidebar-scroll::-webkit-scrollbar-thumb { background:var(--bg-3); border-radius:2px; }
.style-sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
    background: linear-gradient(180deg, rgb(var(--fade-rgb) / 0) 0%, rgb(var(--fade-rgb) / 1) 24%);
}

.sidebar-section { margin-bottom: 8px; }

.advanced-panel {
    margin-top: 10px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: rgba(255, 255, 255, 0.02);
    overflow: hidden;
}
.advanced-summary {
    list-style: none;
    cursor: pointer;
    padding: 8px 10px;
    font-size: 9px;
    font-weight: 700;
    color: var(--text-2);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    user-select: none;
}
.advanced-summary::-webkit-details-marker { display: none; }
.advanced-summary::after {
    content: "+";
    float: right;
    color: var(--gold);
    font-size: 11px;
}
.advanced-panel[open] .advanced-summary::after {
    content: "\2212";
}
.advanced-content {
    padding: 0 10px 10px;
    border-top: 1px solid var(--border);
}

.sidebar-heading {
    font-size: 9px;
    font-weight: 700;
    color: var(--gold-dim);
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin-bottom: 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--border);
}

.field { margin-bottom: 10px; }
.field label {
    display: block;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 4px;
}
/* A pill toggle inside a field reads like every other toggle, not like a caption. */
.field label.checkbox-label {
    display: flex;
    font-size: 11px;
    font-weight: 400;
    color: var(--text-2);
    text-transform: none;
    letter-spacing: 0;
    margin: 8px 0 0;
}
.field-hint {
    display: block;
    font-size: 9px;
    color: var(--text-4);
    font-style: italic;
    margin-top: 2px;
}
.toggle-block {
    display: flex;
    flex-direction: column;
}
.toggle-block .field-hint {
    margin: -2px 0 6px 34px;
    max-width: 42ch;
}
#vid-steps-cfg-row.ltx-locked {
    opacity: 0.45;
    pointer-events: none;
}

.field-row {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    margin-bottom: 6px;
}
.field-row .field { margin-bottom:0; }
.prompt-label-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.prompt-label-row label { margin-bottom: 0; }
.prompt-save-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 14px;
    padding: 0;
    border: none;
    background: transparent;
    color: var(--text-3);
    cursor: pointer;
}
.prompt-save-btn:hover { color: var(--gold); }
.prompt-save-btn.hidden { display: none; }
.field-x {
    color: var(--text-4);
    font-size: 11px;
    padding-bottom: 6px;
}
.flex-1 { flex:1; min-width:0; }

.field-row-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 4px;
}
.field-row-2col .field { margin-bottom:6px; }


.section-divider {
    height: 1px;
    background: var(--border);
    margin: 12px 0;
}

/* ---- INPUTS ---- */
.input-sm {
    width: 100%;
    padding: 5px 8px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--text);
    font-family: var(--mono);
    font-size: 11px;
    outline: none;
    transition: border-color 0.15s;
    -moz-appearance: textfield;
}
.input-sm::-webkit-outer-spin-button,
.input-sm::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
.input-sm:focus {
    border-color: var(--gold-dim);
    box-shadow: inset 0 0 0 1px var(--gold-glow);
}
.input-wide { width:100%; }

.input-row {
    display: flex;
    gap: 4px;
    align-items: center;
}
.input-row .input-sm { flex:1; }

select, textarea {
    width: 100%;
    background: var(--bg-0);
    border: 1px solid var(--border);
    color: var(--text);
    padding: 5px 8px;
    border-radius: var(--r);
    font-family: var(--font);
    font-size: 11px;
    outline: none;
    transition: border-color 0.15s;
}
select:focus, textarea:focus {
    border-color: var(--gold-dim);
    box-shadow: inset 0 0 0 1px var(--gold-glow);
}
select option { background:var(--bg-1); color:var(--text); }
textarea { resize:vertical; min-height:40px; line-height:1.5; cursor:text; }
textarea#custom-prompt { min-height:54px; }

/* Range sliders */
input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 3px;
    background: var(--bg-3);
    border-radius: 2px;
    outline: none;
    cursor: pointer;
    margin: 4px 0;
}
input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--cfg-hue, var(--gold));
    border: 2px solid var(--bg-0);
    box-shadow: 0 0 4px var(--gold-glow);
    cursor: pointer;
    transition: transform 0.1s;
}
input[type="range"]::-webkit-slider-thumb:hover { transform:scale(1.15); }
input[type="range"]::-moz-range-thumb {
    width: 12px; height: 12px;
    border-radius: 50%;
    background: var(--cfg-hue, var(--gold));
    border: 2px solid var(--bg-0);
    box-shadow: 0 0 4px var(--gold-glow);
    cursor: pointer;
}
input[type="range"]::-moz-range-track {
    height: 3px;
    background: var(--bg-3);
    border-radius: 2px;
}

.lora-picks { display: flex; flex-direction: column; gap: 8px; }
.lora-picks:empty { display: none; }
.lora-pick {
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 8px;
    background: var(--bg-0);
}
.lora-pick-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.lora-pick-name {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
    font-size: 11px;
}
.lora-pick label {
    display: block;
    margin-top: 6px;
}
#style-lora-field select.hidden,
#vid-lora-field select.hidden { display: none; }

.val-badge {
    float: right;
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    color: var(--gold);
    text-transform: none;
    letter-spacing: 0;
    cursor: pointer;
}
.val-badge:hover { text-decoration:underline; }

.editable-input {
    width: 40px;
    padding: 1px 4px;
    background: var(--bg-0);
    border: 1px solid var(--gold);
    border-radius: 3px;
    color: var(--gold);
    font-weight: 600;
    font-size: 10px;
    font-family: var(--mono);
    text-align: right;
    outline: none;
    float: right;
}

/* ---- BUTTONS ---- */
.btn {
    padding: 6px 12px;
    background: var(--bg-2);
    color: var(--text-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
}
.btn:disabled { opacity:0.35; cursor:not-allowed; }

.btn-gold {
    background: var(--accent);
    color: var(--on-accent);
    box-shadow: 0 0 12px var(--gold-glow);
}
:root:not([data-theme="retro"]) .btn-gold {
    border-radius: 999px;
    background: var(--accent);
}
.btn-gold.btn-wide {
    padding: 10px 16px;
    font-size: 11px;
}
.btn-gold:hover:not(:disabled) {
    background: var(--accent-hover);
    box-shadow: 0 0 20px var(--gold-glow-strong);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--text-2);
    border: 1px solid var(--border);
}
.btn-outline:hover:not(:disabled) {
    border-color: var(--gold-dim);
    color: var(--gold);
}

.btn-ghost {
    background: transparent;
    color: var(--text-3);
}
.btn-ghost:hover:not(:disabled) { color:var(--text); }

.btn-danger {
    background: transparent;
    color: var(--red);
    border: 1px solid rgba(240,98,94,0.25);
}
.btn-danger:hover:not(:disabled) {
    border-color: var(--red);
    background: rgba(240,98,94,0.06);
}

.btn-sm { padding:4px 10px; font-size:9px; }
.btn-xs { padding:3px 8px; font-size:9px; }
.btn-wide { width:100%; }
.hidden { display:none !important; }
.hidden-file-input { display:none; }
.push-right { margin-left:auto; }
.timeline-frames-row { margin-top:6px; }

.action-row {
    display: flex;
    gap: 6px;
    margin-top: 6px;
}
.action-row-secondary {
    display: flex;
    gap: 6px;
    margin-top: 4px;
    justify-content: flex-end;
}
.action-row-spaced { margin-top:16px; }

/* ---- SETTINGS PANEL ---- */
.settings-btn {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 16px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
    transition: color 0.15s;
}
.settings-btn:hover { color:var(--gold); }

.settings-panel {
    position: fixed;
    top: var(--titlebar-h);
    right: 0;
    bottom: 0;
    width: var(--settings-w);
    max-height: none;
    display: flex;
    flex-direction: column;
    background: var(--bg-1);
    border: 0;
    border-left: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    z-index: 45;
    overflow: hidden;
}
.settings-panel.hidden { display:none; }
.settings-back-btn {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
    padding: 0;
}
.settings-back-mark { font-size: 20px; line-height: 1; }
.settings-back-btn:hover { color: var(--gold); }
body.solo-settings .settings-back-mark { display: none; }
body.solo-settings .settings-back-btn { cursor: default; pointer-events: none; }
.settings-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--gold-dim);
}
.settings-close-btn {
    background: none;
    border: none;
    color: var(--text-3);
    font-size: 16px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}
.settings-close-btn:hover { color:var(--text); }
.settings-panel-body {
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    flex: 1;
    min-height: 0;
    max-height: none;
    overflow-y: auto;
}
.settings-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.settings-group > .btn { align-self: flex-start; }
.settings-group-title {
    font-size: 9px;
    font-weight: 700;
    color: var(--gold-dim);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.project-group {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding-top: 8px;
    border-top: 1px solid var(--border);
}
.project-group-copy { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.project-group .toggle-row { flex: 0 0 auto; white-space: nowrap; padding-top: 0; }
.project-welcome {
    flex: 1 1 auto;
    align-self: stretch;
    min-height: 0;
    width: 100%;
    display: flex;
    flex-direction: column;
    z-index: 1;
}
.project-welcome.hidden { display: none !important; }
body.project-open .tools-hub { display: flex !important; }
body.project-open .tool-workspace { display: none !important; }
body.project-open .tools-grid { display: none !important; }
body.project-open .tools-hub-inner { overflow: hidden; }
.project-welcome-card {
    flex: 1 1 auto;
    min-height: 0;
    width: min(720px, 100%);
    margin: 0 auto;
    display: flex;
    flex-direction: column;
}
.project-welcome-scroll {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 8px 24px 20px;
}
.project-welcome-card h2 {
    margin: 0;
    font-size: 22px;
    font-weight: 650;
    color: var(--text);
}
.project-welcome-groups { display: none; flex-direction: column; gap: 8px; }
.project-welcome-groups.paths-open { display: flex; }
.project-group { flex-wrap: wrap; }
.project-group-path { display: block; flex: 1 0 100%; }
#welcome-paths-toggle { width: 100%; }
#welcome-paths-toggle[aria-expanded="true"] { color: var(--gold); border-color: var(--gold-dim); }
.project-welcome-foot {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    width: min(720px, 100%);
    margin: 0 auto;
    padding: 12px 24px 16px;
    border-top: 1px solid var(--border);
    background: var(--bg-0);
}
.addons-list { display: flex; flex-direction: column; gap: 8px; }
.addon-card { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-2); }
.addon-card-copy { min-width: 0; }
.addon-card-title { color: var(--text); font-size: 12px; font-weight: 700; }
.addon-card-meta { color: var(--gold); font-size: 10px; margin-left: 5px; }
.addon-card-desc { color: var(--text-2); font-size: 11px; line-height: 1.35; margin-top: 3px; }
.addon-card .btn { flex-shrink: 0; white-space: nowrap; }
.settings-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.settings-field label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-2);
    cursor: pointer;
    padding: 4px 0;
    line-height: 1.4;
}
.settings-actions {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
    border-top: 1px solid var(--border);
}

/* ---- VIDEO TAB ---- */
.video-layout {
    display: flex;
    width: 100%; height: 100%;
    align-items: flex-start;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
}
.video-card {
    width: 100%;
    max-width: min(720px, 92vw);
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px;
}

/* ---- OUTPUT TAB ---- */
.output-wrap {
    display: flex;
    flex-direction: column;
    width: 100%; height: 100%;
    min-height: 0;
    padding: 10px 12px 8px;
    gap: 8px;
}
.output-stage {
    flex: 1;
    min-height: 0;
    position: relative;
    display: flex;
    gap: 8px;
    background: var(--stage-bg);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
}
.output-view {
    flex: 1;
    min-width: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stage-bg);
    overflow: hidden;
}
.output-tag {
    position: absolute;
    top: 10px; left: 10px;
    z-index: 4;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: #fff;
    background: rgba(8,10,14,0.62);
    backdrop-filter: blur(6px);
    border: 1px solid var(--border);
    padding: 3px 9px;
    border-radius: 99px;
    pointer-events: none;
}
.output-view-input .output-tag  { color: var(--sage); }
.output-view-result .output-tag { color: var(--gold); }
.output-player {
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--stage-bg);
    display: none;
}
.output-player.loaded { display: block; }

/* Compare (swipe) mode: stack the two views and reveal the output via a
   clip on top of the input, mirroring the Style tab wipe. */
.output-stage.mode-compare { gap: 0; cursor: ew-resize; }
.output-stage.mode-compare .output-view {
    position: absolute;
    inset: 0;
}
.output-stage.mode-compare .output-view-input  { z-index: 1; }
.output-stage.mode-compare .output-view-result {
    z-index: 2;
    /* The result view sits on top of the input view. Its opaque black
       background would otherwise cover the input wherever the result video is
       clipped away, so make it transparent and let the clipped video reveal
       the input layer underneath. */
    background: transparent;
}
/* In compare mode both videos must occupy the exact same box as the stage so
   the clip edge and the wipe line align at every position (object-fit keeps
   the aspect ratio and letterboxes identically for input and output). */
.output-stage.mode-compare .output-player {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}
.output-stage.mode-compare .output-view-result .output-player {
    /* clip-path is set inline from JS based on pointer position */
    clip-path: inset(0 0 0 50%);
}
.output-stage.mode-compare .output-tag { pointer-events: none; }

.output-wipe-line {
    display: none;
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    margin-left: -1px;
    background: rgba(255,255,255,0.85);
    box-shadow: 0 0 10px rgba(0,0,0,0.6);
    z-index: 3;
    pointer-events: none;
}
.output-stage.mode-compare .output-wipe-line { display: block; }

/* View mode: a single, front-and-centre result video (input hidden). This is
   the default and also what the live/latent preview shows into during render. */
.output-stage.mode-view .output-view-input { display: none; }
.output-stage.mode-view .output-wipe-line  { display: none; }
.output-stage.mode-view .output-view-result { flex: 1; }
.output-stage.mode-view .output-tag { display: none; }

/* Live (latent) preview overlay shown while a render is running. */
.output-live {
    position: absolute;
    inset: 0;
    display: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background: var(--stage-bg);
    z-index: 6;
}
.output-live.active { display: flex; }
.output-latent {
    max-width: min(100%, 960px);
    max-height: calc(100% - 48px);
    width: auto;
    height: auto;
    object-fit: contain;
    display: none;
    border-radius: var(--r);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.output-latent.has-frame { display: block; }
.output-live-label {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--gold);
    opacity: 0.85;
}

/* Built-in preset text uses the secondary accent. A user preset, when one is also selected,
   continues in the same box in gold. */
.preset-prompt-box {
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.preset-prompt-box:focus-within { border-color: var(--gold-dim); }
.preset-prompt-box textarea,
.preset-prompt-box textarea:focus {
    display: block;
    width: 100%;
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    resize: none;
    min-height: 40px;
    max-height: none;
    padding: 6px 8px;
    line-height: 1.45;
    overflow: hidden;
    outline: none;
}
.preset-prompt-box .prompt-user { padding-top: 0; }
.prompt-preset {
    color: var(--sage);
    font-style: italic;
}
.prompt-user {
    color: var(--gold);
    font-style: italic;
}
.prompt-user.is-empty { display: none; }

.preset-manage-btn {
    display: block;
    margin: 0 0 4px;
    padding: 0;
    border: none;
    background: none;
    font: inherit;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    text-align: left;
}
.preset-manage-btn:hover { color: var(--gold); }

.field.preset-reveal {
    height: 0;
    margin-bottom: 0;
    overflow: hidden;
    pointer-events: none;
    transition: height 0.14s ease-out, margin-bottom 0.22s ease;
}
.field.preset-reveal.is-open {
    margin-bottom: 10px;
    pointer-events: auto;
}
.field.preset-reveal.is-typing {
    transition: margin-bottom 0.22s ease;
}
.preset-reveal-clip {
    overflow: hidden;
}
@media (prefers-reduced-motion: reduce) {
    .field.preset-reveal { transition: none; }
}

.user-preset-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 320px;
    overflow: auto;
    margin-bottom: 12px;
}
.user-preset-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 8px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-0);
}
.user-preset-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.preset-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
}
.preset-icon-btn:hover { color: var(--gold); border-color: var(--gold-dim); }
.preset-icon-btn.danger:hover { color: #e06c6c; border-color: #e06c6c; }

/* Small inline action button that sits on a field label (e.g. "From Style"). */
.label-with-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.label-action-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.label-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    font-size: 10px;
    font-weight: 600;
    color: var(--gold);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: 99px;
    cursor: pointer;
    line-height: 1;
}
.label-action-btn:hover {
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: var(--gold);
}
.label-action-text { text-transform: none; letter-spacing: 0; }
.style-h3-refs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    min-height: 28px;
}
#style-frame-slider:disabled {
    opacity: 0.35;
    pointer-events: none;
}
.h3-seg-btn {
    border: 0;
    background: transparent;
    color: var(--text-3, #8b93a7);
    font: inherit;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 4px;
    border-radius: calc(var(--r, 6px) - 2px);
    cursor: pointer;
}
.h3-seg-btn:hover { color: var(--text); }
.h3-seg-btn.active {
    background: var(--bg-2, #1a2030);
    color: var(--text);
}
#minimax-options .toggle-row,
#minimax-options .checkbox-label,
#ltx25-options .toggle-row {
    margin: 8px 0 2px;
}
.output-wipe-grip {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; height: 28px;
    border-radius: 50%;
    background: rgba(8,10,14,0.85);
    border: 1px solid rgba(255,255,255,0.7);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

.output-placeholder {
    position: absolute; inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--stage-bg);
}
.output-placeholder.hidden { display: none; }
.output-placeholder-note {
    margin: 6px 0 0;
    font-size: 11px;
    color: var(--text-4);
    max-width: 280px;
    line-height: 1.4;
}

/* ---- PLACEHOLDER ---- */
.placeholder {
    color: var(--stage-text);
    font-size: 12px;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
}
/* Overlay the capture area instead of sitting beside the video, so
   "Capturing..." stays centered when re-capturing over an old preview. */
#capture-placeholder {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: var(--stage-bg);
}
.placeholder-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
}
.placeholder-icon {
    font-size: 28px;
    color: var(--stage-text);
    opacity: 0.8;
}

/* ---- CONSOLE PANEL ---- */
.console-panel {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--border);
    background: var(--bg-0);
    transition: height 0.25s ease;
    overflow: hidden;
}
.console-panel.collapsed { height: 26px; }
.console-panel.expanded  { height: min(220px, 40vh); }
.console-header {
    height: 26px;
    min-height: 26px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    cursor: pointer;
    user-select: none;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
}
.console-title {
    font-family: var(--mono);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--text-3);
}
.console-actions { display: flex; align-items: center; gap: 8px; }
.console-action-btn {
    background: none;
    border: none;
    color: var(--text-4);
    font-size: 10px;
    cursor: pointer;
    padding: 2px 4px;
    line-height: 1;
}
.console-action-btn:hover { color: var(--text); }
.console-action-btn.active { color: var(--gold); }
.console-chevron {
    font-size: 10px;
    color: var(--text-4);
    transition: transform 0.25s;
}
.console-panel.collapsed .console-chevron { transform: rotate(180deg); }
.console-panel.expanded  .console-chevron { transform: rotate(0deg); }
.console-body {
    flex: 1;
    overflow: hidden;
    display: flex;
}
.console-panel.collapsed .console-body { display: none; }
.console-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 6px 12px;
    scroll-behavior: smooth;
}
.console-scroll::-webkit-scrollbar { width: 5px; }
.console-scroll::-webkit-scrollbar-track { background: transparent; }
.console-scroll::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
#console-output {
    font-family: var(--mono);
    font-size: 11px;
    line-height: 1.55;
    white-space: pre-wrap;
    overflow-wrap: break-word;
    word-break: normal;
    color: var(--text-2);
}
.log-line { display: block; }
.log-ts { color: var(--text-3); }
.log-info { color: var(--text); }
.log-warn { color: var(--gold); }
.log-error { color: var(--error); }
.log-progress { color: var(--text-3); }
.log-debug { color: var(--text-3); opacity: 0.8; }

/* ---- FOOTER ---- */
footer {
    flex-shrink: 0;
    height: auto;
    min-height: 28px;
    padding: 4px 14px;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
    z-index: 10;
}
/* The tool panels follow the footer in the markup; keep the status bar at the
   bottom for every tool so it does not jump when switching tools. */
.tool-workspace > footer { order: 1; }
.busy-indicator {
    display: flex;
    align-items: center;
    gap: 6px;
    font-family: var(--mono);
    font-size: 10px;
    color: var(--gold);
    white-space: nowrap;
}
.busy-indicator-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 0 10px var(--gold-glow-strong);
    animation: busyPulse 1s infinite ease-in-out;
}
@keyframes busyPulse {
    0%, 100% { transform: scale(0.8); opacity: 0.45; }
    50% { transform: scale(1.1); opacity: 1; }
}
.progress-section {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
}
.progress-section.hidden { display:none; }
.progress-track {
    flex: 1;
    height: 3px;
    background: var(--bg-3);
    border-radius: 2px;
    overflow: hidden;
}
.progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--gold), var(--sage));
    border-radius: 2px;
    width: 0%;
    transition: width 0.3s;
}
.progress-fill.indeterminate {
    width: 30%;
    animation: indet 1.5s infinite ease-in-out;
}
@keyframes indet {
    0% { transform:translateX(-100%); }
    100% { transform:translateX(400%); }
}
.progress-pct {
    font-family: var(--mono);
    font-size: 9px;
    color: var(--text-3);
    min-width: 32px;
    text-align: right;
}
.status-msg[data-level="error"] { color: var(--error); }
.status-msg[data-level="warn"] { color: var(--gold); }
.status-msg {
    font-size: 11px;
    color: var(--text);
    white-space: normal;
    overflow: visible;
    overflow-wrap: anywhere;
    min-width: 0;
    flex: 1;
}
footer .scene-badge {
    margin-left: auto;
    flex-shrink: 1;
    max-width: none;
    white-space: normal;
}

/* ---- VIDEO CONTROLS ---- */
.video-controls {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 12px;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    flex-shrink: 0;
}

/* Transport bar (Output tab) */
.output-chrome {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
}
.output-transport {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
}
.output-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    flex-wrap: wrap;
}

.vc-btn {
    background: color-mix(in srgb, var(--text) 4%, transparent);
    border: 1px solid var(--border);
    color: var(--gold);
    cursor: pointer;
    padding: 0;
    line-height: 0;
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.vc-btn:hover {
    color: var(--gold);
    background: color-mix(in srgb, var(--accent) 12%, transparent);
    border-color: var(--gold-dim);
}
.vc-btn:active { transform: scale(0.92); }
.vc-btn svg { display: block; }

.vc-seek-bar {
    flex: 1;
    height: 6px;
    background: var(--bg-3);
    border-radius: 99px;
    cursor: pointer;
    position: relative;
    align-self: center;
}
.vc-seek-bar::before {
    /* larger invisible hit area for easier grabbing */
    content: "";
    position: absolute;
    inset: -7px 0;
}
.vc-seek-fill {
    position: absolute;
    left: 0; top: 0;
    height: 100%;
    width: 0%;
    background: linear-gradient(90deg, var(--gold-dim), var(--gold));
    border-radius: 99px;
    pointer-events: none;
}
.vc-seek-knob {
    position: absolute;
    top: 50%;
    left: 0%;
    width: 13px; height: 13px;
    margin-left: -6.5px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.5);
    transform: translateY(-50%) scale(0);
    transition: transform 0.12s ease;
    pointer-events: none;
}
.vc-seek-bar:hover .vc-seek-knob,
.vc-seek-bar.scrubbing .vc-seek-knob { transform: translateY(-50%) scale(1); }
.vc-time {
    font-family: var(--mono);
    font-size: 10px;
    color: var(--text-3);
    white-space: nowrap;
    flex-shrink: 0;
    min-width: 74px;
    text-align: right;
}

/* Segmented Split/Compare toggle */
.seg-toggle {
    display: inline-flex;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 2px;
    flex-shrink: 0;
}
.seg-btn {
    background: none;
    border: none;
    color: var(--text-3);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    padding: 5px 12px;
    border-radius: var(--r);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}
.seg-btn:hover:not(.active) { color: var(--text); background: var(--surface-hover); }
.seg-btn.active {
    background: var(--accent);
    color: var(--on-accent);
}
.seg-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.output-save-group {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    margin-left: auto;
}

/* Previous renders strip */
.output-history { flex-shrink: 0; }
.output-history-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.output-history-title {
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-4);
}
.output-history-strip {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    padding-bottom: 2px;
    scrollbar-width: thin;
}
.output-history-strip:empty::after {
    content: "No saved renders yet.";
    color: var(--text-4);
    font-size: 11px;
    padding: 8px 2px;
}
.oh-cell {
    position: relative;
    flex: 0 0 auto;
    width: clamp(88px, 7vw, 128px);
    aspect-ratio: 16 / 9;
    height: auto;
    border-radius: var(--r);
    overflow: hidden;
    border: 1px solid var(--border);
    background: #000;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.1s ease;
}
.oh-cell:hover { border-color: var(--gold-dim); transform: translateY(-1px); }
.oh-cell.active { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold); }
.oh-cell video {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.oh-cell .oh-play {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.9);
    background: rgba(0,0,0,0.18);
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.oh-cell:hover .oh-play { opacity: 0; }
.oh-cell .oh-date {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    font-size: 8px;
    font-family: var(--mono);
    color: rgba(255,255,255,0.75);
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    padding: 8px 5px 3px;
    pointer-events: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ---- CUSTOM CHECKBOX / TOGGLE ---- */
.vid-preview-card { max-width: 360px; }
.vid-latent-preview {
    width: 100%;
    border-radius: var(--r);
    border: 1px solid var(--border);
    background: var(--bg-0);
    min-height: 120px;
    object-fit: contain;
}

.scrubber-bar .compare-toggle {
    margin-left: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: var(--text-2);
    cursor: pointer;
}
.checkbox-label input[type="checkbox"],
.toggle-row input[type="checkbox"] {
    -webkit-appearance: none;
    appearance: none;
    position: relative;
    width: 30px;
    height: 16px;
    background: var(--bg-3);
    border: 1px solid var(--border-hover);
    border-radius: 99px;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.2s, border-color 0.2s;
    margin: 0;
}
.checkbox-label input[type="checkbox"]::after,
.toggle-row input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--text-2);
    transition: transform 0.15s ease, background 0.15s;
}
.checkbox-label input[type="checkbox"]:checked,
.toggle-row input[type="checkbox"]:checked {
    background: var(--accent);
    border-color: var(--gold);
}
.checkbox-label input[type="checkbox"]:checked::after,
.toggle-row input[type="checkbox"]:checked::after {
    transform: translateX(14px);
    background: var(--on-accent);
}

.checkbox-label input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
/* Plain-text dialog bodies keep the line breaks of server messages. */
.confirm-modal-text { white-space: pre-wrap; overflow-wrap: anywhere; }
/* Scene-owned values shown for reference (not editable here). */
.input-readonly { color: var(--text-3); background: transparent; cursor: default; }
.input-readonly:focus { outline: none; border-color: var(--border); }

/* Square radios match checkbox chrome */
input[type="radio"] {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    margin: 0;
    flex-shrink: 0;
    box-sizing: border-box;
    border: 1px solid var(--border-hover);
    border-radius: 50%;
    background: var(--bg-0);
    cursor: pointer;
    position: relative;
    vertical-align: middle;
    transition: border-color 0.15s, box-shadow 0.15s;
}
input[type="radio"]:hover {
    border-color: var(--gold-dim);
}
input[type="radio"]:checked {
    border-color: var(--gold);
    box-shadow: 0 0 0 1px var(--gold-glow);
}
input[type="radio"]:checked::after {
    content: "";
    position: absolute;
    left: 3px;
    top: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--accent);
}

/* ---- NEXT BUTTONS ---- */

/* ---- OUTPUT SAVE BUTTONS ---- */
.btn-save-output {
    margin-top: 8px;
    align-self: center;
}

/* ---- MODAL ---- */
.modal-overlay {
    position: fixed; inset:0;
    background: rgba(7,9,15,0.85);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 16px;
}
.modal-card {
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    padding: 20px 24px;
    max-width: 440px;
    width: 90%;
    /* Short windows: never push the action buttons off-screen. */
    max-height: min(86vh, 100vh - 48px);
    overflow-y: auto;
    box-shadow: 0 16px 48px rgba(0,0,0,.3);
}
.modal-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--gold);
    margin-bottom: 10px;
}
.modal-body {
    font-size: 12px;
    line-height: 1.6;
    color: var(--text-2);
    margin-bottom: 16px;
}
.modal-body a { color:var(--gold); text-decoration:underline; }
.modal-body code {
    background: var(--bg-3);
    padding: 1px 4px;
    border-radius: 3px;
    font-size: 11px;
    color: var(--text);
}
.modal-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    flex-wrap: wrap;
}
.license-modal-card {
    max-width: 520px;
}
.license-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 12px;
}
.license-field label {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--text-3);
}
.license-modal-message {
    min-height: 18px;
    margin-bottom: 12px;
    font-size: 11px;
    color: var(--text-2);
}
.license-modal-message.error {
    color: var(--error);
}
.license-modal-message.success {
    color: var(--green);
}

/* ---- FORMAT PILLS ---- */
.format-pills {
    display: flex;
    gap: 6px;
    padding: 4px 0;
}
.pill-check {
    cursor: pointer;
}
.pill-check input[type="checkbox"] {
    position: absolute; width: 1px; height: 1px; opacity: 0;
    clip-path: inset(50%); overflow: hidden;
}
.pill-check .pill {
    display: inline-block;
    padding: 4px 12px;
    font-size: 10px;
    font-weight: 600;
    color: var(--text-3);
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 99px;
    transition: all 0.15s;
    letter-spacing: 0.02em;
}
.pill-check input:checked + .pill {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--gold);
    box-shadow: 0 0 8px var(--gold-glow);
}
.pill-check .pill:hover {
    border-color: var(--gold-dim);
    color: var(--text-2);
}
.pill-check input:checked + .pill:hover {
    color: var(--on-accent);
    background: var(--accent-hover);
}
.png-sub-option {
    padding-left: 4px;
    font-size: 10px;
}

/* ---- FOLDER BROWSER ---- */
.folder-browser-card {
    max-width: 500px;
    width: 90%;
    max-height: 70vh;
    display: flex;
    flex-direction: column;
}
.fb-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--border);
}
.fb-breadcrumb {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 8px 0;
    font-size: 10px;
    font-family: var(--mono);
    color: var(--text-3);
    overflow-x: auto;
    flex-shrink: 0;
    white-space: nowrap;
}
.fb-crumb {
    cursor: pointer;
    color: var(--gold-dim);
    padding: 2px 4px;
    border-radius: 3px;
    transition: background 0.1s;
}
.fb-crumb:hover { background: var(--bg-3); color: var(--gold); }
.fb-sep { color: var(--text-4); padding: 0 1px; }
.fb-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    flex-shrink: 0;
}
.fb-nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background: var(--bg-0);
    color: var(--text-3);
    border: 1px solid var(--border);
    border-radius: var(--r);
    cursor: pointer;
    transition: color 0.1s, border-color 0.1s;
}
.fb-nav-btn:hover:not(:disabled) { color: var(--gold); border-color: var(--gold-dim); }
.fb-nav-btn:disabled { opacity: 0.35; cursor: default; }
.fb-nav-btn.on { color: var(--gold); }
.fb-nav-btn.on .fb-star-shape { fill: var(--gold); }
.fb-address {
    flex: 1;
    min-width: 0;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-0);
    cursor: text;
}
.fb-address:hover { border-color: var(--gold-dim); }
.fb-address .fb-breadcrumb { padding: 5px 8px; }
.fb-address.editing .fb-breadcrumb { display: none; }
.fb-path {
    width: 100%;
    padding: 5px 8px;
    font-size: 10px;
    font-family: var(--mono);
    color: var(--text-1);
    background: transparent;
    border: 0;
    outline: none;
}
.fb-pins {
    display: flex;
    gap: 4px;
    padding: 0 0 8px;
    overflow-x: auto;
    flex-shrink: 0;
}
.fb-pin-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 8px;
    font-size: 10px;
    font-family: var(--mono);
    color: var(--text-2);
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: 12px;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.1s, border-color 0.1s;
}
.fb-pin-chip:hover { color: var(--gold); border-color: var(--gold-dim); }
.fb-pin-x { color: var(--text-4); font-size: 12px; line-height: 1; }
.fb-pin-x:hover { color: var(--error); }
.fb-new input {
    flex: 1;
    font-size: 11px;
    font-family: var(--mono);
    color: var(--text-1);
    background: var(--bg-2);
    border: 1px solid var(--gold-dim);
    border-radius: 3px;
    padding: 2px 6px;
    outline: none;
}
.fb-list {
    flex: 1;
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-0);
    min-height: 200px;
    max-height: 400px;
}
.fb-list::-webkit-scrollbar { width: 5px; }
.fb-list::-webkit-scrollbar-track { background: transparent; }
.fb-list::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 3px; }
.fb-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    font-size: 11px;
    color: var(--text-2);
    cursor: pointer;
    transition: background 0.1s;
    border-bottom: 1px solid rgba(255,255,255,0.02);
}
.fb-item:hover { background: var(--bg-2); }
.fb-item.selected { background: var(--selected-bg); color: var(--gold); }
.fb-icon { font-size: 14px; flex-shrink: 0; opacity: 0.5; }
.fb-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    border-top: 1px solid var(--border);
    margin-top: 8px;
}
.fb-selected {
    font-size: 10px;
    font-family: var(--mono);
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    margin-right: 8px;
}
.fb-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ------------------------------------------------------------------ */
/*  Model Manager                                                      */
/* ------------------------------------------------------------------ */
.mm-card {
    max-width: 640px;
    display: flex;
    flex-direction: column;
    max-height: 86vh;
}
.mm-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.mm-dir-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    margin-bottom: 8px;
    font-size: 11px;
}
.mm-dir-label { color: var(--text-3); white-space: nowrap; }
.mm-dir-path {
    flex: 1;
    min-width: 0;
    color: var(--text);
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r);
    padding: 4px 8px;
    font: inherit;
    font-size: 11px;
    direction: ltr;
    text-align: left;
}
.mm-dir-path:focus {
    outline: none;
    border-color: var(--gold);
}
.mm-tabs { display: flex; gap: 6px; margin: 0 0 10px; }
.mm-tab {
    padding: 6px 16px;
    font-size: 12px;
    color: var(--text-2);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r);
    cursor: pointer;
}
.mm-tab:hover { color: var(--text); }
.mm-tab.active {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--gold);
    font-weight: 600;
}
.mm-empty { padding: 16px 12px; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.mm-summary {
    font-size: 11px;
    color: var(--text-2);
    margin-bottom: 8px;
}
.mm-list {
    overflow-y: auto;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-0);
    min-height: 120px;
}
.mm-cat { border-bottom: 1px solid var(--border); }
.mm-cat > .mm-group-head { background: var(--bg-2); }
.mm-cat-body .mm-group { border-bottom: 1px solid var(--border); }
.mm-cat-body .mm-group:last-child { border-bottom: none; }
.mm-cat-body .mm-group-head { padding-left: 22px; background: transparent; }
.mm-kind {
    padding: 8px 12px 2px 36px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-3);
}
.mm-group { border-bottom: 1px solid var(--border); }
.mm-group:last-child { border-bottom: none; }
.mm-group-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    cursor: pointer;
    background: var(--bg-1);
    user-select: none;
}
.mm-group-head:hover { background: var(--bg-2); }
.mm-group.expanded .mm-group-head { border-bottom: 1px solid var(--border); }
.mm-group-head .mm-alt-toggle { flex-shrink: 0; margin-left: 8px; font-size: 10.5px; }
.mm-group-head .mm-alt-toggle input[type="checkbox"]:disabled { opacity: .45; cursor: default; }
.mm-group-caret {
    width: 12px;
    flex-shrink: 0;
    color: var(--text-3);
    font-size: 10px;
}
.mm-group-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}
.mm-group-status {
    flex: 1;
    font-size: 10.5px;
    color: var(--text-3);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.mm-group-status.ok { color: var(--sage); }
.mm-group-action { flex-shrink: 0; }
.mm-group-check { color: var(--sage); font-size: 13px; }
.mm-group-note {
  margin: 0;
  padding: 8px 14px 8px 36px;
  font-size: 12px;
  line-height: 1.45;
  color: var(--text-2);
  border-bottom: 1px solid var(--border);
}
.mm-group-body .mm-row { padding-left: 36px; }
.mm-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    border-bottom: 1px solid var(--border);
    font-size: 11.5px;
}
.mm-row:last-child { border-bottom: none; }
.mm-row-status {
    width: 10px; height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}
.mm-row-status.ok { background: var(--sage); box-shadow: 0 0 6px rgba(126,203,180,0.5); }
.mm-row-status.missing { background: var(--error); }
.mm-row-status.busy { background: var(--accent); animation: mm-pulse 1s infinite alternate; }
@keyframes mm-pulse { from { opacity: 0.4; } to { opacity: 1; } }
.mm-row-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text);
}
.mm-row-size { color: var(--text-3); white-space: nowrap; font-size: 10.5px; }
.mm-row-action { flex-shrink: 0; min-width: 86px; text-align: right; }
.mm-row.is-downloading { align-items: flex-start; }
.mm-row.is-downloading .mm-dl {
    flex: 1 0 100%;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 20px;
}
.mm-row-manual { color: var(--text-3); font-size: 10px; font-style: italic; }
.mm-row-error { color: var(--error); font-size: 10px; }
.mm-hf {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-1);
    padding: 10px 12px;
    margin-bottom: 8px;
    font-size: 12px;
}
.mm-hf-title { font-weight: 600; margin-bottom: 4px; }
.mm-hf-steps, .mm-hf-repos { margin: 4px 0 8px 18px; padding: 0; line-height: 1.5; }
.mm-hf-state { color: var(--text-2); }
.mm-hf-token { display: flex; gap: 6px; align-items: center; }
.mm-hf-token input { flex: 1; min-width: 0; }
.mm-progress {
    position: relative;
    flex: 1;
    min-width: 80px;
    height: 8px;
    background: var(--bg-3);
    border: 1px solid var(--border);
    border-radius: 999px;
    overflow: hidden;
}
.mm-progress-fill {
    display: block;
    height: 100%;
    width: 0;
    background: var(--accent);
    border-radius: 999px;
}
.mm-progress-fill.indeterminate {
    width: 35%;
    animation: mm-indeterminate 1.1s ease-in-out infinite;
}
@keyframes mm-indeterminate {
    0% { transform: translateX(-130%); }
    100% { transform: translateX(320%); }
}
.mm-dl-meta {
    flex-shrink: 0;
    font-size: 10.5px;
    color: var(--text-2);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.need-models-track > div.indeterminate {
    width: 35%;
    animation: mm-indeterminate 1.1s ease-in-out infinite;
}

/* ==================================================================
   Gallery
   ================================================================== */
.modal-card.gallery-card {
    width: min(1040px, 96vw);
    max-width: min(1040px, 96vw);
    height: min(86vh, 920px);
    max-height: min(86vh, 100vh - 48px);
    display: flex;
    flex-direction: column;
    overflow: hidden; /* grid scrolls; the card itself must not */
}
.modal-card.gallery-card .mm-header {
    flex-shrink: 0;
    margin-bottom: 0;
}
.gallery-tabs {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-shrink: 0;
    margin: 4px 0 12px;
}
.gallery-tab {
    padding: 6px 20px;
    font-size: 12px;
    color: var(--text-dim, #9aa0ab);
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--r);
    cursor: pointer;
}
.gallery-tab:hover { border-color: var(--border-hover); color: var(--text); }
.gallery-tab.active {
    color: var(--on-accent);
    background: var(--accent);
    border-color: var(--gold, #d4af37);
    font-weight: 600;
}
.gallery-refresh { margin-left: auto; }
.gallery-grid {
    flex: 1 1 auto;
    min-height: 0; /* flex child must shrink or overflow-y never fires */
    overflow-y: auto;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    align-content: start;
    gap: 16px 14px;
    padding: 2px 4px 14px;
}
.gallery-cell {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--bg-2, #0d0f12);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    overflow: hidden;
    cursor: pointer;
    min-height: 0;
}
.gallery-cell:hover { border-color: var(--gold-dim); }
/* Videos have no intrinsic box in the Layout WebView. Lock 16:9 from
   width so thumbs stay cards instead of collapsing to slivers. */
.gallery-thumb-wrap {
    position: relative;
    width: 100%;
    aspect-ratio: 16 / 9;
    height: auto;
    background: #000;
    flex: 0 0 auto;
}
@supports not (aspect-ratio: 16 / 9) {
    .gallery-thumb-wrap {
        height: 0;
        padding-top: 56.25%;
    }
}
.gallery-thumb {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    background: #000;
}
.gallery-caption {
    display: flex;
    flex-direction: column;
    flex: 0 0 auto;
    padding: 8px 10px 9px;
    gap: 2px;
    min-height: 36px;
    background: var(--bg-1);
}
.gallery-name {
    font-size: 11px;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.gallery-date { font-size: 10px; color: var(--text-3); }
.gallery-badge {
    position: absolute;
    top: 6px; right: 6px;
    background: rgba(0,0,0,0.65);
    border-radius: var(--r);
    padding: 2px 7px;
    font-size: 10px;
    color: #fff;
    pointer-events: none;
}
.gallery-empty { color: var(--text-3); padding: 60px 20px; text-align: center; grid-column: 1 / -1; font-size: 13px; }

#gallery-lightbox { z-index: 10001; }
.gallery-lightbox-inner {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    max-width: 92vw;
    max-height: 88vh;
}
.gallery-lightbox-media img,
.gallery-lightbox-media video {
    max-width: 88vw;
    max-height: 76vh;
    border-radius: var(--r-lg);
    display: block;
}
.gallery-lightbox-bar { display: flex; align-items: center; gap: 14px; justify-content: center; }
.gallery-lightbox-name { font-size: 12px; opacity: 0.8; }
.gallery-lightbox-close {
    position: absolute;
    top: -34px; right: -6px;
    z-index: 2;
}

/* ==================================================================
   Console: hidden in the main window, shown in its own plugin window
   ================================================================== */
.console-panel.main-hidden { display: none; }

/* ==================================================================
   Solo mode (standalone plugin windows via ?panel=...)
   ================================================================== */
body.solo .tab-bar,
body.solo main,
body.solo header,
body.solo footer,
body.solo #tools-hub,
body.solo .hub-dock,
body.solo #btn-tools-home,
body.solo .titlebar-actions,
body.solo .chrome-utils { display: none !important; }
body.solo #btn-gallery,
body.solo #btn-settings { display: none; }

body.solo .modal-overlay { top: var(--titlebar-h); }

/* The panel's own overlay becomes the window itself (opaque, no inset) */
body.solo-gallery #gallery-modal,
body.solo-models #mm-modal {
    padding: 0;
    background: var(--bg-0);
}

/* Solo gallery / model manager fill the entire window: no floating card */
body.solo-gallery #gallery-modal .modal-card,
body.solo-models #mm-modal .modal-card {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    border: none;
    border-radius: 0;
    box-shadow: none;
}

body.solo-console .console-panel.main-hidden {
    display: flex;
    flex: 1;
    height: auto;
    border-top: none;
}
body.solo-console .console-panel.collapsed { height: auto; }
body.solo-console .console-chevron { display: none; }
body.solo-console .console-header { cursor: default; }
body.solo-console .console-body { flex: 1; display: flex; flex-direction: column; min-height: 0; }
body.solo-console .console-scroll { flex: 1; max-height: none; }

body.solo-settings .settings-panel {
    top: calc(var(--titlebar-h) + 8px);
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(560px, 92vw);
    bottom: 12px;
    overflow-y: auto;
}
body.solo-settings #settings-close { display: none; }

body.solo-models #mm-close,
body.solo-models #mm-close-btn,
body.solo-gallery #gallery-close { display: none; }

/* ============================================================ */
/*  MARKUP TAB                                                  */
/* ============================================================ */
.markup-layout {
    display: flex;
    width: 100%; height: 100%;
}
.markup-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0; min-height: 0;
    background: var(--stage-bg);
}
.markup-stage-wrap {
    flex: 1;
    position: relative;
    overflow: hidden;
    min-height: 0;
    background:
        linear-gradient(45deg, var(--bg-0) 25%, transparent 25%) 0 0/24px 24px,
        linear-gradient(-45deg, var(--bg-0) 25%, transparent 25%) 0 0/24px 24px,
        linear-gradient(45deg, transparent 75%, var(--bg-0) 75%) 0 0/24px 24px,
        linear-gradient(-45deg, transparent 75%, var(--bg-0) 75%) 0 0/24px 24px,
        var(--stage-bg);
}
.markup-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.markup-frame {
    position: absolute;
    /* left/top/width/height set by JS to the contained image rect */
    display: none;
}
.markup-frame.ready { display: block; }
.markup-base {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    object-fit: fill;
    z-index: 1;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.markup-canvas {
    position: absolute;
    inset: 0;
    width: 100%; height: 100%;
    z-index: 2;
    touch-action: none;
}
.markup-canvas.tool-brush { cursor: crosshair; }
.markup-canvas.tool-eraser { cursor: cell; }
.markup-canvas.disabled { pointer-events: none; }
.markup-images {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
}
.markup-images.active { pointer-events: none; }

/* placed image */
.mk-img {
    position: absolute;
    transform-origin: center center;
    pointer-events: auto;
    cursor: pointer;
    will-change: transform;
}
/* A selected layer receives brush/eraser strokes on its body, so show the
   paint cursor; unselected layers just select on click. */
.mk-img.selected { cursor: crosshair; }
.mk-img > img,
.mk-img > canvas.mk-img-canvas {
    display: block;
    width: 100%; height: 100%;
    user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}
.mk-img .mk-box {
    position: absolute;
    inset: -1px;
    border: 1.5px solid var(--gold);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.4);
    display: none;
    pointer-events: none;
}
.mk-img.selected { z-index: 50; }
.mk-img.selected .mk-box { display: block; }
.mk-img.selected .mk-handle,
.mk-img.selected .mk-rotate,
.mk-img.selected .mk-move,
.mk-img.selected .mk-remove { display: flex; }

.mk-move {
    position: absolute;
    left: 50%; bottom: -30px;
    width: 20px; height: 20px;
    margin-left: -10px;
    background: var(--accent);
    border: 1.5px solid var(--bg-0);
    border-radius: var(--r);
    color: var(--on-accent);
    cursor: move;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 52;
}
.mk-move:hover { filter: brightness(1.1); }

.mk-handle {
    position: absolute;
    width: 12px; height: 12px;
    background: var(--accent);
    border: 1.5px solid var(--bg-0);
    border-radius: 2px;
    display: none;
    z-index: 51;
}
.mk-handle.nw { left: -6px; top: -6px; cursor: nwse-resize; }
.mk-handle.ne { right: -6px; top: -6px; cursor: nesw-resize; }
.mk-handle.sw { left: -6px; bottom: -6px; cursor: nesw-resize; }
.mk-handle.se { right: -6px; bottom: -6px; cursor: nwse-resize; }
.mk-rotate {
    position: absolute;
    left: 50%; top: -30px;
    width: 16px; height: 16px;
    margin-left: -8px;
    background: var(--sage);
    border: 1.5px solid var(--bg-0);
    border-radius: 50%;
    cursor: grab;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 51;
}
.mk-rotate::before {
    content: "";
    position: absolute;
    top: 14px; left: 50%;
    width: 1.5px; height: 16px;
    margin-left: -1px;
    background: var(--sage);
}
.mk-remove {
    position: absolute;
    right: -10px; top: -10px;
    width: 18px; height: 18px;
    background: var(--red);
    border: 1.5px solid var(--bg-0);
    border-radius: 50%;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 52;
    font-family: var(--font);
    font-weight: 700;
}
.mk-remove:hover { filter: brightness(1.15); }

/* brush cursor ring */
.mk-cursor {
    position: absolute;
    border: 1.5px solid rgba(255,255,255,0.85);
    box-shadow: 0 0 0 1px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(0,0,0,0.4);
    border-radius: 50%;
    pointer-events: none;
    z-index: 40;
    display: none;
    transform: translate(-50%, -50%);
}

.markup-placeholder {
    position: absolute;
    inset: 0;
    z-index: 10;
}

.markup-scrubber { gap: 10px; }
.markup-scrubber .slim-slider { flex: 1; }

/* sidebar */
.markup-sidebar {
    width: clamp(240px, 26vw, 340px);
    padding: 14px;
    flex-shrink: 0;
    background: var(--bg-1);
    border-left: 1px solid var(--border);
    display: flex;
    flex-direction: column;
    gap: 4px;
    position: relative;
    overflow: hidden;
}
.markup-sidebar-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding-right: 2px;
}
.markup-sidebar-scroll::-webkit-scrollbar { width: 4px; }
.markup-sidebar-scroll::-webkit-scrollbar-track { background: transparent; }
.markup-sidebar-scroll::-webkit-scrollbar-thumb { background: var(--bg-3); border-radius: 2px; }
.markup-sidebar-footer {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid var(--border);
}

.markup-tool-row {
    display: flex;
    gap: 6px;
    margin-bottom: 10px;
}
.markup-tool {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 6px;
    background: var(--bg-2);
    border: 1px solid var(--border);
    border-radius: var(--r);
    color: var(--text-2);
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.markup-tool:hover { border-color: var(--border-hover); color: var(--text); }
.markup-tool.active {
    background: var(--gold-glow);
    border-color: var(--gold);
    color: var(--gold);
}
.markup-tool-icon { font-size: 14px; line-height: 1; }

.markup-color-row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}
.markup-color-input {
    -webkit-appearance: none;
    appearance: none;
    width: 40px; height: 30px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: none;
    cursor: pointer;
    flex-shrink: 0;
}
.markup-color-input::-webkit-color-swatch-wrapper { padding: 2px; }
.markup-color-input::-webkit-color-swatch { border: none; border-radius: 3px; }
.markup-color-hex {
    flex: 1;
    text-transform: uppercase;
    font-family: var(--mono);
}
.markup-swatches {
    display: grid;
    grid-template-columns: repeat(8, 1fr);
    gap: 5px;
}
.mk-swatch {
    aspect-ratio: 1;
    border-radius: var(--r);
    border: 1px solid var(--border-hover);
    cursor: pointer;
    transition: transform 0.1s;
}
.mk-swatch:hover { transform: scale(1.12); }
.mk-swatch.active { box-shadow: 0 0 0 2px var(--gold); }

.markup-action-row {
    display: flex;
    gap: 6px;
    margin-bottom: 8px;
}
.markup-action-row .btn { flex: 1; }

/* ---- VIDEO RESOLUTION SELECTOR ---- */
.resx {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.resx-select { width: 100%; }
.resx-preset-row { display: flex; align-items: center; gap: 8px; }
.resx-preset-row .resx-select { flex: 1; min-width: 0; }

/* Aspect-ratio chips */
.resx-aspects {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.resx-chip {
    appearance: none;
    flex: 1 1 auto;
    min-width: 42px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    color: var(--text-2);
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 500;
    padding: 5px 6px;
    border-radius: var(--r);
    cursor: pointer;
    transition: background 0.14s ease, color 0.14s ease, border-color 0.14s ease;
}
.resx-chip:hover { color: var(--text); border-color: var(--border-hover); }
.resx-chip.active {
    background: var(--gold-glow);
    color: var(--gold);
    border-color: var(--gold-dim);
    font-weight: 700;
}

/* Live scalable stage */
.resx-stage {
    position: relative;
    width: 100%;
    height: clamp(140px, 22vh, 280px);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background:
        radial-gradient(circle at center, rgba(255,255,255,0.03), transparent 70%) border-box,
        repeating-linear-gradient(0deg, transparent 0 17px, rgba(255,255,255,0.03) 17px 18px),
        repeating-linear-gradient(90deg, transparent 0 17px, rgba(255,255,255,0.03) 17px 18px),
        var(--bg-1);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
.resx-frame {
    position: absolute;
    width: 80px;
    height: 45px;
    background: linear-gradient(135deg, var(--gold-glow-strong), var(--gold-glow));
    border: 1.5px solid var(--gold);
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 18px rgba(0,0,0,0.4);
    transition: background 0.12s ease;
}
.resx-frame.dragging { transition: none; cursor: nwse-resize; }
.resx-dim {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 600;
    color: var(--text);
    pointer-events: none;
    white-space: nowrap;
    text-shadow: 0 1px 3px var(--bg-0);
}
.resx-handle {
    position: absolute;
    right: -7px;
    bottom: -7px;
    width: 15px;
    height: 15px;
    border-radius: var(--r);
    background: var(--accent);
    border: 2px solid var(--bg-0);
    cursor: nwse-resize;
    box-shadow: 0 0 0 1px var(--gold-glow-strong);
    touch-action: none;
}
.resx-handle:hover { background: var(--text); }

/* Width / lock / height fields (sliders side by side) */
.resx-fields {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 8px;
}
.resx-slider { margin: 0; flex: 1; min-width: 0; }
.resx-lock {
    appearance: none;
    flex-shrink: 0;
    margin-bottom: 2px;
    width: 30px;
    height: 30px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    background: var(--bg-1);
    color: var(--text-3);
    border-radius: var(--r);
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.resx-lock:hover { color: var(--text); border-color: var(--border-hover); }
.resx-lock.locked {
    color: var(--gold);
    border-color: var(--gold-dim);
    background: var(--gold-glow);
}
.resx-lock .resx-lock-shackle { transition: transform 0.16s ease, opacity 0.16s ease; transform-origin: 16px 8px; }
.resx-lock:not(.locked) .resx-lock-shackle { transform: rotate(-26deg) translateX(-2px); }

/* Meta line -- aspect badge + orientation toggle, centred */
.resx-meta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.resx-badge {
    font-family: var(--mono);
    font-size: 11px;
    font-weight: 700;
    color: var(--gold);
    background: var(--gold-glow);
    border: 1px solid var(--gold-dim);
    border-radius: var(--r);
    padding: 3px 8px;
}
.resx-orient {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border: 1px solid var(--border);
    background: var(--bg-1);
    color: var(--text-2);
    border-radius: var(--r);
    padding: 3px 9px;
    cursor: pointer;
    transition: color 0.14s ease, border-color 0.14s ease, background 0.14s ease;
}
.resx-orient:hover { color: var(--text); border-color: var(--border-hover); }
.resx-orient svg { transition: transform 0.18s ease; }
.resx-orient.portrait svg { transform: rotate(90deg); }
.resx-orient-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

/* Expandable "more" sections (resolution detail + advanced engine knobs) */
.resx-more, .adv-more {
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-1);
}
.adv-more { margin-top: 10px; }
.resx-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 11px;
    cursor: pointer;
    list-style: none;
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--text-2);
    user-select: none;
}
.resx-summary::-webkit-details-marker { display: none; }
.resx-summary:hover { color: var(--text); }
.resx-summary-chevron { transition: transform 0.18s ease; flex-shrink: 0; }
details[open] > .resx-summary .resx-summary-chevron { transform: rotate(180deg); }
.resx-more-body, .adv-more-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 0 11px 11px;
}

/* ---- Tools hub (mAInframe2) ---- */
.titlebar-edition {
    margin-left: 1px;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.06em;
    color: var(--gold);
    opacity: 0.9;
}
.titlebar-tool {
    margin-left: 14px;
    padding-left: 14px;
    border-left: 1px solid var(--border);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--text-2);
}
.titlebar-tool.hidden { display: none; }
.btn-tools-home {
    margin-right: 10px;
    padding: 4px 12px;
    font-size: 11px;
    font-weight: 600;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-1);
    color: var(--text);
    cursor: pointer;
    -webkit-app-region: no-drag;
    app-region: no-drag;
}
.btn-tools-home:hover { border-color: var(--accent); color: var(--accent); }
.btn-tools-home.hidden { display: none !important; }

.chrome-utils {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    margin-right: 8px;
}
.chrome-util {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    color: var(--text-3);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 4px 8px;
    border-radius: var(--r);
    cursor: pointer;
}
.chrome-util svg {
    width: 12px;
    height: 12px;
    flex-shrink: 0;
}
.chrome-util:hover { color: var(--gold); background: color-mix(in srgb, var(--text) 4%, transparent); }

/* One Menu button replaces the Settings / Models / Gallery / Account icons and
   the "Tools" button; the breadcrumb handles going back. */
.chrome-utils, .btn-tools-home, .account-menu#license-status { display: none !important; }
.main-menu-wrap { position: relative; margin-right: 8px; -webkit-app-region: no-drag; app-region: no-drag; }
.main-menu-btn { border: 1px solid var(--border); color: var(--text-2); padding: 4px 10px; }
.main-menu-btn[aria-expanded="true"], .main-menu-btn:hover { color: var(--gold); border-color: var(--gold-dim); }
.main-menu-pop {
    position: absolute; right: 0; top: calc(100% + 6px); z-index: 200; min-width: 230px;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 6px;
    box-shadow: 0 18px 48px rgba(0,0,0,0.55);
}
.main-menu-pop.hidden { display: none; }
.main-menu-item {
    display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%;
    background: none; border: 0; border-radius: var(--r); padding: 8px 10px; color: var(--text); font: inherit; font-size: 13px; cursor: pointer; text-align: left;
}
.main-menu-item small { font-size: 10.5px; color: var(--text-3); }
.main-menu-item:hover { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--gold); }
.main-menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }

/* Breadcrumb in the titlebar */
.titlebar-tool { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-width: 0; overflow: visible; white-space: normal; -webkit-app-region: no-drag; app-region: no-drag; }
.titlebar-tool .crumb { background: none; border: 0; padding: 2px 4px; border-radius: var(--r); color: var(--text-3); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; flex-shrink: 0; pointer-events: auto; position: relative; z-index: 1; -webkit-app-region: no-drag; app-region: no-drag; }
.titlebar-tool .crumb:hover { color: var(--gold); background: color-mix(in srgb, var(--text) 4%, transparent); }
.titlebar-tool .crumb.current { color: var(--text); cursor: default; }
.titlebar-tool .crumb-sep { color: var(--text-4); font-size: 12px; }

/* LightWave viewport drag buttons (Move / Rotate / Zoom), upper right. */
.lw-nav-controls {
    position: absolute; top: 8px; right: 8px; z-index: 6; display: flex; gap: 2px;
    background: var(--floating-bg); border: 1px solid var(--border); border-radius: var(--r); padding: 2px;
    -webkit-app-region: no-drag; app-region: no-drag; user-select: none;
}
.lw-nav-controls button {
    width: 24px; height: 22px; border: 0; border-radius: var(--r); background: none; color: var(--text-2);
    font-size: 14px; line-height: 1; cursor: ew-resize; touch-action: none;
}
.lw-nav-controls button[data-lw="rotate"], .lw-nav-controls button[data-lw="move"] { cursor: move; }
.lw-nav-controls button:hover { color: var(--gold); background: rgba(255,255,255,0.05); }
.lw-nav-controls button.active { color: var(--on-accent); background: var(--accent); }

.tools-hub {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    background: var(--bg-0);
    container-type: size;
    container-name: hub;
}
.tools-hub::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.35;
    background:
        radial-gradient(ellipse 70% 40% at 50% -10%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 55%),
        repeating-linear-gradient(90deg, transparent 0 46px, color-mix(in srgb, var(--accent) 4%, transparent) 46px 47px),
        repeating-linear-gradient(0deg, transparent 0 46px, color-mix(in srgb, var(--accent) 4%, transparent) 46px 47px);
}
.tools-hub.hidden { display: none !important; }
.tools-hub-inner {
    flex: 1;
    min-height: 0;
    min-width: 0;
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 0;
    overflow-x: hidden;
    overflow-y: auto;
    width: 100%;
}
.hub-cats {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 4px 16px;
    margin: 0;
    padding: 10px 16px 10px;
    flex-shrink: 0;
    width: 100%;
}
.hub-cat {
    background: none;
    border: none;
    border-bottom: 1px solid transparent;
    color: var(--text-4);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 6px 2px 8px;
    cursor: pointer;
    outline: none;
}
.hub-cat:hover { color: var(--text-2); }
.hub-cat:focus-visible {
    color: var(--gold);
}
.hub-cat.active {
    color: var(--gold);
    border-bottom-color: var(--gold);
}
.tools-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr));
    justify-content: center;
    justify-items: stretch;
    align-items: start;
    align-content: start;
    gap: 12px;
    width: 100%;
    max-width: min(1080px, 100%);
    flex: 0 0 auto;
    min-height: min-content;
    padding: 12px 16px 20px;
}
.tools-grid[data-count="0"] {
    grid-template-columns: 1fr;
}
.tools-grid[data-count="1"] {
    grid-template-columns: minmax(0, 340px);
    justify-content: center;
}
.tools-grid[data-count="2"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
}
.tools-grid[data-count="3"] {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
}
.hub-empty {
    width: 100%;
    text-align: center;
    color: var(--text-3);
    font-size: 13px;
    padding: 36px 12px;
}
/* Hub tool cards share the AI Motion engine-card anatomy (.am-card). */
.tools-hub { background: var(--hub-bg); }
.tools-hub::before { opacity: 0.22; }
.hub-cats { padding-top: 22px; }
.hub-cat { font-size: 11px; }
.tool-card {
    appearance: none;
    -webkit-appearance: none;
    font: inherit;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    gap: 8px;
    width: 100%;
    max-width: 340px;
    min-width: 0;
    height: 100%;
    min-height: min-content;
    justify-self: center;
    padding: 18px 18px 16px;
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    background: var(--bg-1);
    color: var(--text);
    cursor: pointer;
    overflow: visible;
    transition: border-color .12s, transform .12s, box-shadow .12s;
}
.tool-card:hover:not(:disabled) {
    border-color: var(--gold-dim);
    transform: translateY(-2px);
    box-shadow: 0 14px 40px rgba(0,0,0,0.45);
}
.tool-card:disabled { cursor: default; opacity: 0.55; }
.tool-card-head { display: flex; align-items: center; gap: 10px; }
.tool-card-art {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--gold);
    flex-shrink: 0;
}
.tool-card-art svg { width: 100%; height: 100%; }
.tool-card-title { font-size: 20px; font-weight: 600; color: var(--text); }
.tool-card-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.tool-card-blurb { font-size: 12.5px; line-height: 1.5; color: var(--text-2); flex: 1; overflow-wrap: break-word; }
.tool-card-meta { font-family: var(--mono); font-size: 11px; color: var(--text-3); min-height: 1em; }
.tool-card-start {
    align-self: flex-start;
    margin-top: 6px;
    padding: 6px 14px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 600;
}
.tool-card:disabled .tool-card-start { background: var(--bg-2); color: var(--text-3); }
/* Tiles share a row, size with the hub, and the hub scrolls when they do not fit. */
.tools-grid { flex: 0 0 auto; margin: 0; align-items: stretch; align-content: start; gap: 12px; grid-auto-rows: auto; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); justify-content: center; }
.tools-grid[data-count="1"] { grid-template-columns: minmax(0, 340px); }
.tools-grid[data-count="2"],
.tools-grid[data-count="3"],
.tools-grid[data-count="4"],
.tools-grid[data-count="5"],
.tools-grid[data-count="6"] { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.tool-card { height: auto; min-height: 0; max-width: none; }
.tool-card-blurb { flex: 1 1 auto; }
.tool-card-start { margin-top: auto; }
@container hub (max-width: 660px) {
    .tools-grid, .tools-grid[data-count] { grid-template-columns: minmax(0, 1fr); }
    .tool-card-blurb { display: none; }
    .tool-card { padding: 10px 12px 38px; gap: 4px; }
    .tool-card-title { font-size: 15px; }
    .tool-card-art { width: 22px; height: 22px; }
}
/* MotionBricks has a single toolset, so its tab strip is noise. */
.am-toolstrip .am-tabs[data-am-engine="motionbricks"] { display: none !important; }
/* Engine controls live in the status toolbar; viewport-corner status is folded into the footer status line. */
.status-toolbar .am-hud-top { position: static; margin-left: auto; margin-right: 10px; flex-shrink: 0; }
.status-toolbar .am-hud-top.hidden { display: none; }
.status-toolbar .am-hud-btn, .status-toolbar .am-hud-chip { padding: 3px 10px; font-size: 11px; backdrop-filter: none; }
.status-toolbar #mf-job-banner { flex: 0 1 auto; }
.am-hud-status { display: none !important; }
.status-toolbar .am-hud-top { display: none; }
body.tool-ai-motion .status-toolbar .am-hud-top:not(.hidden) { display: flex; }
#ai-motion-placeholder .placeholder-icon { animation: am-load-pulse 1.2s ease-in-out infinite; }
#ai-motion-placeholder.is-guide .placeholder-icon { animation: none; }
#ai-motion-placeholder.is-guide .ai-model-note { text-align: center; }
@keyframes am-load-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
.hub-dock {
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    width: 100%;
    max-width: 100%;
    padding: 10px 12px 38px;
    background: var(--bg-0);
}
.hub-dock-btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-right: none;
    color: var(--text-3);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    padding: 7px 16px;
    cursor: pointer;
}
.hub-dock-btn:first-child {
    border-radius: 8px 0 0 8px;
}
.hub-dock-btn:last-child {
    border-right: 1px solid var(--border);
    border-radius: 0 8px 8px 0;
}
.hub-dock-btn:hover {
    color: var(--gold);
    background: var(--surface-hover);
}
.hub-dock-btn:focus-visible {
    outline: 1px solid var(--gold-dim);
    z-index: 1;
}
body.tool-open .hub-dock { display: none; }

/* Narrow hub: cats shrink first. Two posters stay side-by-side until ~640px.
   Three cards go compact when a third column would wrap (~720px). */
@container hub (max-width: 860px) {
    .hub-cats { gap: 2px 12px; }
    .hub-cat {
        font-size: 9px;
        letter-spacing: 0.08em;
    }
}


@container hub (max-width: 520px) {
    .hub-cat { letter-spacing: 0.05em; }
    .hub-dock-btn { padding: 6px 10px; }
}

.tool-workspace {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.tool-workspace.hidden { display: none !important; }

body.tool-open .tools-hub { display: none !important; }
body.hub-only .tool-workspace { display: none !important; }
body.project-open .tools-hub { display: flex !important; }
body.project-open .tool-workspace { display: none !important; }

/* AI Model tool */
body.tool-ai-model .tab-bar,
body.tool-ai-model main { display: none !important; }
body.tool-ai-model #panel-ai-model { display: flex !important; }
body.tool-ai-model #panel-ai-texture { display: none !important; }
body.tool-style .ai-model-panel { display: none !important; }

/* Preview | right rail for every tool that uses this layout. Never stack
   the controls under the stage (the 860px column layout is the one users
   reject - it also makes the action footer look enormous). */
body.tool-ai-model .ai-model-layout,
body.tool-ai-texture .ai-model-layout,
body.tool-ai-rig .ai-model-layout,
body.tool-mocap .mocap-layout,
body.tool-ai-motion .ai-motion-layout {
    grid-template-columns: minmax(0, 1fr) var(--side-w, minmax(220px, min(320px, 38vw))) !important;
    grid-template-rows: minmax(0, 1fr) !important;
}
body.tool-ai-model .ai-model-sidebar,
body.tool-ai-texture .ai-model-sidebar,
body.tool-ai-rig .ai-model-sidebar,
body.tool-mocap .mocap-sidebar{
    border-left: 1px solid var(--border, #2a2f3a) !important;
    border-top: none !important;
    min-width: 220px;
}

/* AI Texture tool */
body.tool-ai-texture .tab-bar,
body.tool-ai-texture main { display: none !important; }
body.tool-ai-texture #panel-ai-texture { display: flex !important; }
body.tool-ai-texture #panel-ai-model { display: none !important; }
body.tool-ai-texture .ai-motion-panel,
body.tool-ai-texture .mocap-panel { display: none !important; }
body.tool-ai-texture .console-panel:not(.main-hidden) { display: flex; }

/* Every non-Style tool replaces the stepper and main with its own panel. */
body.tool-ai-motion .tab-bar,
body.tool-ai-motion main,
body.tool-mocap .tab-bar,
body.tool-mocap main,
body.tool-ai-rig .tab-bar,
body.tool-ai-rig main,
body.tool-auto-uv .tab-bar,
body.tool-auto-uv main { display: none !important; }

/* AI Motion tool (ARDY) */
body.tool-ai-motion .ai-motion-panel { display: flex !important; }
body.tool-ai-motion .ai-model-panel { display: none !important; }
body.tool-ai-model .ai-motion-panel,
body.tool-style .ai-motion-panel { display: none !important; }
body.tool-ai-motion .console-panel:not(.main-hidden) { display: flex; }

/* Video Mocap tool */
body.tool-mocap .mocap-panel { display: flex !important; }
body.tool-mocap .ai-model-panel,
body.tool-mocap .ai-motion-panel { display: none !important; }
body.tool-ai-model .mocap-panel,
body.tool-ai-motion .mocap-panel,
body.tool-style .mocap-panel { display: none !important; }
body.tool-mocap .console-panel:not(.main-hidden) { display: flex; }

/* AI Rig tool (SkinTokens) */
body.tool-ai-rig #panel-ai-rig { display: flex !important; }
body.tool-ai-rig #panel-ai-model,
body.tool-ai-rig #panel-ai-texture,
body.tool-ai-rig #panel-auto-uv,
body.tool-ai-rig .ai-motion-panel,
body.tool-ai-rig .mocap-panel { display: none !important; }
body.tool-ai-rig .console-panel:not(.main-hidden) { display: flex; }

/* Auto UV tool */
body.tool-auto-uv #panel-auto-uv { display: flex !important; }
body.tool-auto-uv .ai-motion-panel,
body.tool-auto-uv .mocap-panel { display: none !important; }

.mocap-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}
.mocap-layout {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-w, minmax(220px, min(320px, 38vw)));
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    gap: 0;
}
.mocap-preview-wrap {
    position: relative;
    min-height: 0;
    background: var(--stage-bg, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    outline: none;
}
.mocap-preview {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
}
.mocap-sidebar {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 16px;
    overflow: auto;
    border-left: 1px solid var(--border, #2a2a2a);
    background: var(--surface, #141414);
}
.mocap-progress { margin-top: 4px; }
/* Animation tool sidebars (Video Mocap, AI Rig): numbered steps in workflow order. */
.anim-sidebar { gap: 10px; }
.anim-step {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px 12px;
    border: 1px solid var(--border);
    border-radius: var(--r, 8px);
    background: var(--bg-1, transparent);
}
.anim-step-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text);
    letter-spacing: .02em;
}
.anim-step-num {
    width: 20px;
    height: 20px;
    flex: 0 0 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 1px solid var(--border-hover, var(--border));
    color: var(--gold);
    font-size: 11px;
    font-weight: 700;
    transition: background .15s, color .15s, border-color .15s;
}
.anim-step.is-done .anim-step-num {
    background: var(--accent);
    border-color: transparent;
    color: var(--on-accent);
}
.anim-step .settings-field { margin: 0; }
.anim-step .ai-model-source-row .input-sm { flex: 1 1 auto; min-width: 0; width: auto; }
.anim-step .settings-field .ai-model-source-row { flex-wrap: nowrap; }
.anim-step .ai-model-source-row > .btn { flex: 1 1 auto; }
.anim-step .settings-field .ai-model-source-row > .btn { flex: 0 0 auto; }
.anim-step > .btn { width: 100%; }
.anim-run-row { display: flex; gap: 6px; }
.anim-run-row .btn { flex: 1 1 auto; min-height: 30px; }
.anim-run-row .btn.btn-outline { flex: 0 0 auto; }
.anim-step .checkbox-row.is-disabled { opacity: .55; }
.anim-step .ai-model-advanced { margin: 0; }
.ai-model-weights.warn + #ai-rig-setup-retry { align-self: flex-start; }
.ai-motion-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    --amt-tick: var(--text-3);
    --amt-extent: color-mix(in srgb, var(--accent) 35%, transparent);
}
/* ---- Stage (viewport) ---------------------------------------------- */
.am-stage {
    position: relative;
    flex: 1;
    min-height: 0;
    background: var(--stage-bg, #000);
    overflow: hidden;
}
.ai-motion-frame {
    width: 100%;
    height: 100%;
    border: 0;
    background: #111;
    display: block;
}
.um-stage-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #000;
    object-fit: contain;
    z-index: 2;
}
.am-hud {
    position: absolute;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 6px;
}
.am-hud-top { top: 10px; right: 10px; }
.am-hud-btn {
    appearance: none;
    border: 1px solid var(--border-hover);
    background: var(--floating-bg);
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    padding: 5px 11px;
    border-radius: 999px;
    cursor: pointer;
    backdrop-filter: blur(6px);
    transition: background .12s, color .12s, border-color .12s;
}
.am-hud-btn:hover:not(:disabled) { color: var(--text); border-color: rgba(255,255,255,0.28); }
.am-hud-btn:disabled { opacity: .45; cursor: default; }
.am-hud-btn.gold { background: var(--accent); color: var(--on-accent); border-color: transparent; font-weight: 600; }
.am-hud-btn.gold:hover:not(:disabled) { background: var(--accent-hover); color: var(--on-accent); }
.am-hud-btn.gold:disabled { background: var(--floating-bg); color: var(--text-3); border-color: var(--border-hover); font-weight: 400; }
.am-hud-btn.am-hud-icon { padding: 4px 9px; font-size: 15px; line-height: 1; }
.am-hud-chip {
    font-family: var(--mono);
    font-size: 11px;
    color: var(--text-2);
    background: var(--floating-bg);
    border: 1px solid var(--border-hover);
    border-radius: 999px;
    padding: 5px 10px;
    max-width: 260px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* Engine chooser */
.am-chooser {
    position: absolute; inset: 0; z-index: 5;
    display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
    background: var(--hub-bg);
    padding: 52px 16px 16px;
    overflow: auto;
    container-type: inline-size;
    container-name: chooser;
}
.am-chooser.hidden { display: none; }
.am-chooser-back {
    position: absolute; top: 14px; left: 16px;
    background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--text-2);
    font: inherit; font-size: 12px; padding: 5px 12px; cursor: pointer;
}
.am-chooser-back:hover { color: var(--gold); border-color: var(--gold-dim); }
.am-chooser-hint { margin: 10px 0 0; font-size: 11px; color: var(--text-4); }
.am-card { background: var(--bg-1); }
.am-chooser-title { font-family: "Corpta", var(--font, system-ui); font-size: 30px; color: var(--gold); letter-spacing: .02em; }
.am-chooser-sub { margin: 0 0 14px; font-size: 13px; color: var(--text-2); text-align: center; }
.am-chooser-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); justify-content: center; gap: 12px; width: 100%; max-width: 980px; }
.um-prompt, .um-names { align-items: flex-start; }
.um-prompt textarea, .um-names textarea {
    width: 280px; min-height: 0; resize: vertical; font: inherit; color: inherit;
    background: var(--bg-2); border: 1px solid var(--border); border-radius: var(--r);
    padding: 6px 8px;
}
.am-card {
    appearance: none; text-align: left; display: flex; flex-direction: column; gap: 8px;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 18px 18px 16px;
    color: var(--text); font: inherit; cursor: pointer; transition: border-color .12s, transform .12s, box-shadow .12s;
}
.am-card:hover:not(:disabled) { border-color: var(--gold-dim); transform: translateY(-2px); box-shadow: 0 14px 40px rgba(0,0,0,0.45); }
.am-card:disabled { opacity: .55; cursor: default; }
.am-card.needs-weights { border-style: dashed; }
.am-card.needs-weights .am-card-cta { background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border); }
.am-card-name { font-size: 20px; font-weight: 600; }
.am-card-tag { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.am-card-desc { font-size: 12.5px; line-height: 1.5; color: var(--text-2); flex: 1; }
.am-card-meta { font-family: var(--mono); font-size: 11px; color: var(--text-3); }
.am-card-meta.warn { color: var(--error); }
.am-card-cta { align-self: flex-start; margin-top: 6px; padding: 6px 14px; border-radius: 999px; background: var(--accent); color: var(--on-accent); font-size: 12px; font-weight: 600; }
.am-card:disabled .am-card-cta { background: var(--bg-2); color: var(--text-3); }
.am-chooser-note { margin: 6px 0 0; font-size: 12px; color: var(--text-3); min-height: 1em; }
.am-tool-label { font-size: 11px; color: var(--text-3); letter-spacing: .04em; text-transform: uppercase; }
.am-hud-status {
    position: absolute;
    left: 12px;
    bottom: 10px;
    z-index: 4;
    margin: 0;
    max-width: 60%;
    font-size: 12px;
    color: var(--text-2);
    background: var(--floating-bg);
    border-radius: var(--r);
    padding: 4px 9px;
    pointer-events: none;
}
.am-hud-status:empty { display: none; }
.am-hud-status.warn { color: var(--gold); }
.am-hud-status.error { color: var(--error); }
/* Settings popover */
.am-pop {
    position: absolute;
    top: 46px;
    right: 10px;
    z-index: 6;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r-lg);
    box-shadow: 0 14px 40px rgba(0,0,0,0.55);
    padding: 14px 16px;
    max-width: min(880px, calc(100% - 20px));
    max-height: calc(100% - 60px);
    overflow: auto;
}
.am-pop.hidden { display: none; }
.am-pop-cols { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: 18px; }
.am-pop-col { min-width: 0; }
.am-pop-title { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); margin-bottom: 6px; }
.am-pop-title-gap { margin-top: 12px; }
.am-pop-grid { display: grid; grid-template-columns: auto 72px; gap: 4px 8px; align-items: center; font-size: 12px; color: var(--text-2); }
.am-pop-grid input { width: 100%; }
.am-pop input[type="number"], .am-pop input[type="text"], .am-pop select {
    background: var(--bg-0); border: 1px solid var(--border); color: var(--text); border-radius: var(--r); padding: 4px 6px; font: inherit; font-size: 12px; width: 100%; margin: 2px 0 6px;
}
.am-pop .settings-field { display: block; font-size: 11px; color: var(--text-3); margin-top: 6px; }
.am-pop .btn-sm { margin-top: 6px; }
.am-opacity { justify-content: space-between; }
.am-opacity input { width: 90px; }
/* ---- Tool strip ----------------------------------------------------- */
.am-toolstrip {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: var(--bg-1);
    border-top: 1px solid var(--border);
    padding: 4px 12px 6px;
    gap: 4px;
}
.am-tabs { display: flex; gap: 18px; margin: 0; }
.am-tab {
    appearance: none;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-3);
    font: inherit;
    font-size: 11px;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 999px;
    cursor: pointer;
}
.am-tab:hover { color: var(--text-2); }
.am-tab.active { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-glow); }
.am-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 10px; min-height: 30px; }
.am-tools.hidden { display: none; }
.am-tool {
    appearance: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-2);
    font: inherit;
    font-size: 12px;
    padding: 4px 9px;
    border-radius: var(--r);
    cursor: pointer;
    white-space: nowrap;
}
.am-tool:hover:not(:disabled) { background: var(--bg-2); color: var(--text); border-color: var(--border); }
.am-tool:disabled { opacity: .4; cursor: default; }
.am-tool.gold { color: var(--gold); }
.am-tool.danger:hover:not(:disabled) { color: var(--error); }
.am-tool-ico { font-size: 13px; line-height: 1; opacity: .85; }
.am-tool-toggle:has(input:checked) { color: var(--gold); border-color: var(--gold-dim); background: var(--gold-glow); }
.am-tool-field input, .am-tool-field select {
    width: 64px; background: var(--bg-0); border: 1px solid var(--border); color: var(--text); border-radius: var(--r); padding: 2px 5px; font: inherit; font-size: 12px;
}
.am-tool-field select { width: auto; }
.am-tool-sep { width: 1px; height: 18px; background: var(--border); margin: 0 2px; }
.am-tool-hint { font-size: 11px; color: var(--text-3); }
.am-tool-dd { position: relative; }
.am-dd-menu {
    position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 7; min-width: 260px; max-height: 260px; overflow: auto;
    background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: 0 10px 30px rgba(0,0,0,0.5); padding: 4px;
}
.am-dd-menu.hidden { display: none; }
.am-dd-menu button {
    display: block; width: 100%; text-align: left; appearance: none; background: transparent; border: 0; color: var(--text-2);
    font: inherit; font-size: 12px; padding: 6px 10px; border-radius: var(--r); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.am-dd-menu button:hover { background: var(--bg-2); color: var(--text); }
/* ---- Host timeline -------------------------------------------------- */
.am-timeline {
    flex-shrink: 0;
    display: flex;
    background: var(--bg-0);
    border-top: 1px solid var(--border);
    outline: none;
    user-select: none;
}
.am-timeline.hidden { display: none; }
.am-timeline:focus-visible { box-shadow: inset 0 0 0 1px var(--gold-dim); }
.amt-labels { width: 78px; flex-shrink: 0; border-right: 1px solid var(--border); background: var(--bg-1); }
.amt-label { display: flex; align-items: center; padding: 0 8px; font-size: 10px; color: var(--text-3); border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent); box-sizing: border-box; }
.amt-label-prompts { color: var(--text-2); font-size: 11px; }
.amt-body { position: relative; flex: 1; min-width: 0; overflow: hidden; cursor: default; }
.amt-ruler { display: block; width: 100%; border-bottom: 1px solid var(--border); background: var(--bg-1); cursor: ew-resize; }
.amt-row { position: relative; border-bottom: 1px solid color-mix(in srgb, var(--text) 4%, transparent); box-sizing: border-box;
    background-image: linear-gradient(to right, color-mix(in srgb, var(--text) 4%, transparent) 1px, transparent 1px); background-size: 40px 100%; }
.amt-prompts { background-color: rgba(255,255,255,0.02); cursor: crosshair; }
.amt-clip {
    position: absolute; top: 3px; height: calc(100% - 6px); box-sizing: border-box;
    display: flex; align-items: center; gap: 8px; padding: 0 8px;
    background: var(--clip); border-radius: var(--r); color: #fff; font-size: 11px; cursor: pointer;
    box-shadow: inset 0 0 0 1px var(--border-hover);
    overflow: hidden;
}
.amt-clip.inf { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.amt-clip.selected { box-shadow: inset 0 0 0 2px #fff, 0 0 0 1px var(--clip); }
.amt-clip:hover { filter: brightness(1.12); }
.amt-clip-dur { flex-shrink: 0; font-family: var(--mono); font-size: 10px; opacity: .85; background: rgba(0,0,0,0.25); padding: 1px 5px; border-radius: 3px; }
.amt-clip-text { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-weight: 500; }
.amt-clip-edge { position: absolute; top: 0; bottom: 0; width: 7px; cursor: ew-resize; }
.amt-clip-edge.left { left: 0; } .amt-clip-edge.right { right: 0; }
.amt-clip-edge:hover { background: rgba(255,255,255,0.25); }
.amt-key {
    position: absolute; top: 50%; width: 8px; height: 8px; transform: translate(-50%, -50%) rotate(45deg);
    background: var(--accent); border: 1px solid var(--on-accent); cursor: pointer; box-sizing: border-box;
}
.amt-key:hover { background: #fff; }
.amt-key.selected { background: #fff; outline: 2px solid var(--gold); }
.amt-playhead { position: absolute; top: 0; bottom: 0; width: 0; border-left: 1px solid var(--gold); pointer-events: none; z-index: 3; }
.amt-playhead.offscreen { display: none; }
.amt-playbadge {
    position: absolute; top: 2px; left: 0; transform: translateX(-50%);
    background: var(--accent); color: var(--on-accent); font-family: var(--mono); font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: var(--r); white-space: nowrap;
}
.amt-sel { position: absolute; z-index: 2; background: var(--gold-glow-strong); border: 1px dashed var(--gold); box-sizing: border-box;
    display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; color: var(--gold); pointer-events: none; }
.amt-sel.hidden { display: none; }
.amt-inline { position: absolute; z-index: 5; padding: 3px; box-sizing: border-box; }
.amt-inline-input {
    width: 100%; height: 100%; box-sizing: border-box; background: var(--bg-1); color: var(--text);
    border: 1px solid var(--gold); border-radius: var(--r); padding: 0 8px; font: inherit; font-size: 12px; outline: none;
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
}
.amt-menu {
    position: fixed; z-index: 10000; min-width: 210px; background: var(--bg-1); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: 0 12px 34px rgba(0,0,0,0.55); padding: 4px;
}
.amt-menu.hidden { display: none; }
.amt-menu-item {
    display: flex; justify-content: space-between; gap: 18px; width: 100%; appearance: none; background: transparent; border: 0;
    color: var(--text); font: inherit; font-size: 12px; padding: 6px 10px; border-radius: var(--r); cursor: pointer; text-align: left;
}
.amt-menu-item:hover:not(:disabled) { background: var(--selected-bg); color: var(--gold); }
.amt-menu-item:disabled { opacity: .4; cursor: default; }
.amt-menu-item.danger:hover:not(:disabled) { background: color-mix(in srgb, var(--error) 15%, transparent); color: var(--error); }
.amt-menu-hint { font-family: var(--mono); font-size: 10px; color: var(--text-3); }
.amt-menu-sep { height: 1px; background: var(--border); margin: 4px 6px; }
/* ---- Transport ------------------------------------------------------ */
.ai-motion-transport {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 12px;
    border-top: 1px solid var(--border);
    background: var(--bg-1);
    flex-shrink: 0;
}
.ai-motion-fps,
.ai-motion-frame-readout {
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-2);
    min-width: 5.5em;
}
.ai-motion-transport-btns { display: flex; gap: 6px; position: absolute; left: 50%; transform: translateX(-50%); }
.ai-motion-transport { position: relative; }
.am-play { min-width: 64px; font-weight: 700; letter-spacing: .08em; }
.am-transport-spacer { flex: 1; }
.am-active-prompt { font-size: 11px; color: var(--sage, #7ecbb4); max-width: 40%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.am-waypoint-banner {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    padding: 6px 12px;
    border-radius: 999px;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 12px;
    font-weight: 600;
    pointer-events: none;
    box-shadow: 0 4px 16px rgba(0,0,0,0.35);
}
.am-waypoint-banner.hidden { display: none; }
.ai-motion-bones {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #0b0d12;
}
.mb-wasd {
    display: grid;
    grid-template-columns: repeat(3, 26px);
    gap: 3px;
    margin: 0 6px;
}
.mb-wasd .btn { padding: 2px 0; min-height: 22px; font-size: 11px; }
.mb-styles { display: flex; flex-wrap: wrap; gap: 4px; max-width: 520px; }
.mb-style {
    appearance: none;
    border: 1px solid var(--border);
    background: var(--bg-2);
    color: var(--text-2);
    border-radius: var(--r);
    padding: 3px 7px;
    font-size: 11px;
    cursor: pointer;
}
.mb-style.active,
.mb-key.active {
    background: var(--gold-glow);
    border-color: var(--gold-dim);
    color: var(--gold);
}
.ai-motion-check {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-2);
    margin: 6px 0;
}
.ai-motion-tips {
    margin: 4px 0 0;
    padding-left: 16px;
    font-size: 11px;
    line-height: 1.45;
    color: var(--muted, #9a9aaa);
}
.ai-motion-tips li { margin-bottom: 4px; }
/* Scoped: this was a bare .btn-sm rule that silently restyled every small
   button in the app (conflicting with the global 9px .btn-sm). */
.ai-motion-panel .btn-sm,
.mocap-panel .btn-sm,
.ai-model-panel .btn-sm { padding: 4px 10px; font-size: 12px; min-height: 28px; }

/* Keep the docked console usable while an AI Model job runs. */
body.tool-ai-model .console-panel:not(.main-hidden) {
    display: flex;
}
body.solo-console #tools-hub,
body.solo-console .tab-bar,
body.solo-console main,
body.solo-console footer,
body.solo-console .ai-model-panel,
body.solo-console #btn-tools-home {
    display: none !important;
}
body.solo-console .tool-workspace {
    display: flex !important;
    flex: 1;
    min-height: 0;
}

.ai-model-panel {
    display: none;
    flex: 1;
    min-height: 0;
    flex-direction: column;
}
.ai-model-layout {
    flex: 1;
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--side-w, minmax(220px, min(320px, 38vw)));
    grid-template-rows: minmax(0, 1fr);
    min-height: 0;
    gap: 0;
}
.ai-model-preview-wrap {
    position: relative;
    background: var(--stage-bg, #000);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
    outline: none;
    cursor: pointer;
}
.ai-model-preview-wrap.drag-over {
    box-shadow: inset 0 0 0 2px var(--accent, #E8A948);
}
/* AI Texture stage: result tabs + live-view caption */
.ai-tex-tabs {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    z-index: 6;
    padding: 4px;
    border-radius: var(--r, 6px);
    background: var(--floating-bg);
    backdrop-filter: blur(3px);
}
.ai-tex-tabs .btn.is-active {
    color: var(--accent, #E8A948);
    box-shadow: inset 0 0 0 1px var(--accent, #E8A948);
}
.ai-tex-stage-note {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    margin: 0;
    padding: 4px 10px;
    border-radius: var(--r, 6px);
    background: var(--floating-bg);
    color: var(--text-dim, #9aa3b2);
    font-size: 11px;
    z-index: 6;
    pointer-events: none;
    white-space: nowrap;
}
.ai-model-preview {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    pointer-events: none;
}
.ai-model-fx {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: 3;
    pointer-events: none;
}
.ai-model-fx.hidden { display: none; }
.ai-model-fx-label {
    position: absolute;
    left: 50%;
    bottom: 16px;
    transform: translateX(-50%);
    z-index: 4;
    padding: 4px 12px;
    border-radius: var(--r);
    background: var(--floating-bg);
    color: var(--text);
    font-size: 12px;
    pointer-events: none;
    white-space: nowrap;
}
.ai-model-fx-label.hidden { display: none; }
.ai-model-viewer {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #0a0c10;
    --progress-bar-color: var(--gold, #E8A948);
}
.ai-rig-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #0a0c10;
    touch-action: none;
}
.ai-rig-viewport-bar {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 4;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    padding: 8px 10px;
    border: 1px solid var(--border, #2a2f3a);
    background: var(--floating-bg);
    backdrop-filter: blur(6px);
    font-size: 11px;
    color: var(--text-2, #b8c0cc);
}
.ai-rig-vp-field {
    display: flex;
    align-items: center;
    gap: 6px;
}
.ai-rig-vp-field select {
    min-width: 120px;
    max-width: 180px;
}
.ai-rig-vp-modes {
    display: flex;
    gap: 4px;
}
.ai-rig-vp-modes .btn.is-active {
    color: var(--gold, #E8A948);
    border-color: var(--gold, #E8A948);
}
.ai-rig-vp-check {
    display: flex;
    align-items: center;
    gap: 5px;
    cursor: pointer;
    user-select: none;
}
.ai-rig-pose-hint {
    margin-left: auto;
    opacity: 0.7;
    font-size: 10px;
}
.ai-rig-pose-hint.is-dirty {
    color: var(--gold, #E8A948);
    opacity: 1;
}
.ai-model-preview-wrap.showing-mesh {
    cursor: default;
}
.ai-model-preview-wrap.showing-mesh #ai-model-placeholder,
.ai-model-preview-wrap.showing-mesh #ai-model-preview,
.ai-model-preview-wrap.showing-mesh .ai-model-fx,
.ai-model-preview-wrap.showing-mesh .ai-model-fx-label {
    display: none !important;
}
.ai-model-viewer-clear {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 5;
}
.ai-model-send-top {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    min-width: 140px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.45), 0 0 12px var(--gold-glow);
}
/* Keep centering - .btn-gold:hover's translateY alone drops translateX(-50%). */
.ai-model-send-top.btn-gold:hover:not(:disabled),
.ai-model-send-top.btn-gold:active:not(:disabled) {
    transform: translateX(-50%) translateY(-1px);
}
.ai-model-preview-wrap.rotate-mode model-viewer {
    cursor: crosshair;
}
.ai-model-vp-stack {
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 10px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 6px;
    pointer-events: none;
}
.ai-model-vp-stack > * {
    pointer-events: auto;
}
.ai-model-vp-bar {
    position: static;
    left: auto;
    right: auto;
    bottom: auto;
    z-index: 5;
    pointer-events: auto;
}
.ai-model-vp-bar .btn-xs {
    padding: 3px 8px;
    font-size: 10.5px;
}
.ai-model-result-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    border: 1px solid var(--border, #2a2f3a);
    background: var(--floating-bg);
    backdrop-filter: blur(6px);
    border-radius: var(--r, 6px);
    min-width: 0;
}
.ai-model-out-label {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--text-3, #8b93a7);
    white-space: nowrap;
}
.ai-model-out-input {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-size: 11px;
    line-height: 1.35;
    font-family: var(--mono, ui-monospace, Consolas, monospace);
    color: var(--text-2, #c5cad6);
    background: var(--bg-0, #07090f);
    border: 1px solid var(--border, #2a2f3a);
    border-radius: var(--r, 6px);
    padding: 4px 8px;
}
.ai-model-out-input:focus {
    outline: none;
    border-color: var(--gold-dim, #c4903c);
    color: var(--text, #e8ecf2);
}
.ai-model-result-bar .btn {
    flex: 0 0 auto;
    white-space: nowrap;
}
.ai-model-send-card {
    max-width: 420px;
}
.save-image-card { max-width: 480px; }
.save-image-card .settings-field { margin-bottom: 12px; }
.save-image-card .checkbox-label { margin: 2px 0 8px; }
.save-image-error {
    min-height: 1.2em;
    margin: 0 0 12px;
    color: var(--error);
    font-size: 11px;
}
.ai-model-send-body .settings-field {
    margin-bottom: 10px;
}
.ai-model-send-body .check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-2);
    margin: 6px 0;
    cursor: pointer;
}
/* Merged declaration (was split across two conflicting blocks): scrolling
   lives in .ai-model-sidebar-scroll, so the sidebar itself stays clipped. */
.ai-model-sidebar {
    border-left: 1px solid var(--border, #2a2f3a);
    background: var(--surface, #12151c);
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    overflow: hidden;
}
.ai-model-note {
    margin: 10px 0 0;
    font-size: 12px;
    line-height: 1.45;
    color: var(--text-3, #8b93a7);
    max-width: 36em;
}
.ai-model-seg {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 3px;
    border-radius: var(--r, 6px);
    background: var(--bg-1, #0d1016);
    border: 1px solid var(--border, #2a2f3a);
}
.ai-model-seg-btn {
    border: 0;
    background: transparent;
    color: var(--text-3, #8b93a7);
    font: inherit;
    font-size: 13px;
    font-weight: 600;
    padding: 8px 6px;
    border-radius: calc(var(--r, 6px) - 2px);
    cursor: pointer;
}
.ai-model-seg-btn.active {
    background: var(--bg-2, #1a2030);
    color: var(--text);
}
.ai-model-source-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-model-source-row .btn { flex: 1 1 auto; min-width: 0; }
/* Source pickers are real buttons; ghost text alone read as captions. */
.ai-model-source-row .btn-ghost { border: 1px solid var(--border); }
.ai-model-source-row .btn-ghost:hover:not(:disabled) { border-color: var(--border-hover); }
#ai-model-prompt {
    width: 100%;
    resize: vertical;
    min-height: 5em;
    font-family: inherit;
}
.ai-model-block {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ai-model-tex-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ai-model-tex-row .checkbox-row { margin: 0; flex: 0 0 auto; }
.ai-model-tex-row select { flex: 1; min-width: 0; }
.ai-model-mv-row {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}
.ai-model-mv-slot {
    min-width: 0;
}
.ai-model-mv-tile {
    position: relative;
    aspect-ratio: 1 / 1;
    width: 100%;
    border: 1px dashed var(--border-hover, var(--border-hover));
    border-radius: var(--r, 6px);
    background: var(--bg-0, #07090f);
    cursor: pointer;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.ai-model-mv-tile:hover,
.ai-model-mv-tile:focus-visible {
    border-color: var(--gold-dim, #c4903c);
    outline: none;
}
.ai-model-mv-tile.drag-over {
    border-color: var(--gold, #e8a948);
    border-style: solid;
    box-shadow: inset 0 0 0 1px var(--gold-glow), 0 0 10px var(--gold-glow);
    background: color-mix(in srgb, var(--accent) 8%, transparent);
}
.ai-model-mv-tile.has-image {
    border-style: solid;
    border-color: var(--border-hover, var(--border-hover));
}
.ai-model-mv-caption {
    position: absolute;
    left: 6px;
    bottom: 5px;
    z-index: 2;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text-3, #8b93a7);
    pointer-events: none;
}
.ai-model-mv-tile.has-image .ai-model-mv-caption {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0,0,0,0.85);
}
.ai-model-mv-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
}
.ai-model-mv-clear {
    position: absolute;
    top: 4px;
    right: 4px;
    z-index: 3;
    width: 20px;
    height: 20px;
    padding: 0;
    border: 1px solid var(--border, #2a2f3a);
    border-radius: var(--r);
    background: var(--floating-bg);
    color: var(--text-2, #c5cad6);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
}
.ai-model-mv-clear:hover {
    color: var(--gold, #e8a948);
    border-color: var(--gold-dim, #c4903c);
}
.ai-model-advanced {
    font-size: 12px;
    color: var(--text-3, #8b93a7);
}
.ai-model-advanced summary {
    cursor: pointer;
    margin-bottom: 8px;
    user-select: none;
    font-weight: 600;
    color: var(--text-2);
    transition: color 0.15s;
}
.ai-model-advanced summary:hover { color: var(--text); }
.ai-model-advanced summary::marker { color: var(--gold); }
.ai-model-advanced[open] summary { margin-bottom: 10px; }
.ai-model-hint {
    margin: 4px 0 0;
    font-size: 11px;
    color: var(--text-3, #8b93a7);
    line-height: 1.35;
}
.ai-model-source-label,
.ai-model-weights,
.ai-model-status {
    font-size: 12px;
    color: var(--text-3, #8b93a7);
    margin: 0;
}
.ai-model-weights.warn { color: var(--gold); }
.ai-model-weights.ok { color: var(--green); }
.ai-model-actions {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 0;
}
.ai-model-actions .btn { width: 100%; }
.ai-model-result {
    border-top: 1px solid var(--border, #2a2f3a);
    padding-top: 6px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ai-model-result .ai-model-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-model-result .ai-model-actions .btn {
    width: auto;
    flex: 1 1 auto;
    min-height: 28px;
    padding: 5px 10px;
}
.ai-model-result-path {
    margin: 0;
    font-size: 11px;
    line-height: 1.4;
    color: var(--text-2, #c5cad6);
    word-break: break-all;
    font-family: var(--mono, ui-monospace, Consolas, monospace);
}
.checkbox-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-2, #c5cad6);
    cursor: pointer;
}
@media (max-width: 860px) {
    /* Keep the right rail. Stacking preview-over-controls is rejected. */
    .ai-model-layout,
    .mocap-layout,
    .ai-motion-layout {
        grid-template-columns: minmax(0, 1fr) minmax(220px, 38vw);
        grid-template-rows: minmax(0, 1fr);
    }
    .ai-model-sidebar,
    .mocap-sidebar{
        border-left: 1px solid var(--border, #2a2f3a);
        border-top: none;
    }
}

.ai-model-sidebar-scroll {
    /* Hug content at the top. Growing this to fill the rail is what left
       a huge empty band above Generate. Shrink+scroll only when needed. */
    flex: 0 1 auto;
    min-height: 0;
    overflow-y: auto;
    padding: 12px 12px 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ai-model-sidebar-footer {
    flex: 0 0 auto;
    padding: 8px 12px 10px;
    border-top: 1px solid var(--border);
    background: var(--bg-1);
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ai-model-sidebar-footer .ai-model-actions {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 6px;
}
.ai-model-sidebar-footer .ai-model-actions .btn {
    width: auto;
    flex: 1 1 auto;
    min-width: 38%;
    min-height: 30px;
    padding: 6px 10px;
}
.ai-model-sidebar-footer .ai-model-weights,
.ai-model-sidebar-footer .ai-model-status {
    font-size: 11px;
    line-height: 1.3;
}
.ai-model-source-row .input-sm {
    flex: 1;
    min-width: 0;
}
.vid-output-more { margin: 14px 0 4px; }
.ai-model-hint:not(.is-lead) { color: var(--text-4); }

:root[data-theme="light"] .tool-card {
    background: #ffffff;
    border-color: rgba(20,28,42,0.1);
}
:root[data-theme="light"] .tool-card:hover:not(:disabled) { background: #f7f8fb; }
:root[data-theme="light"] .tool-card-title { color: #16202e; }

:root[data-theme="light"] .tools-hub::before { opacity: 0.2; }
:root[data-theme="light"] .hub-dock-btn {
    background: #eef1f6;
    border-color: rgba(20,28,42,0.12);
    color: var(--text-2);
}
:root[data-theme="light"] .hub-dock-btn:last-child { border-right-color: rgba(20,28,42,0.12); }
:root[data-theme="light"] .hub-dock-btn:hover { background: #fff; }

:root[data-theme="retro"] .tools-hub { background: #008080; }
:root[data-theme="retro"] .tools-hub::before { display: none; }
:root[data-theme="retro"] .tool-card,
:root[data-theme="retro"] .hub-dock-btn,
:root[data-theme="retro"] .capture-adjust > summary {
    background: #c0c0c0;
    color: #000;
    border: 1px solid #000;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
    border-radius: 0;
}
:root[data-theme="retro"] .hub-dock-btn:last-child { border-right: 1px solid #000; }
:root[data-theme="retro"] .tool-card-art { color: #000080; filter: none; }
:root[data-theme="retro"] .tool-card-title { color: #000; }
:root[data-theme="retro"] .tool-card-blurb { color: #3c3c3c; text-transform: none; }
:root[data-theme="retro"] .tool-card-start {
    background: #c0c0c0;
    color: #000;
    border: 1px solid #000;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
    border-radius: 0;
}
:root[data-theme="retro"] .chrome-util:hover { background: #000080; color: #fff; }

/* ---- RESPONSIVE: narrow / short / docked windows ---- */
@media (max-width: 980px) {
    .res-label { display: none; }
    .res-meter { width: 64px; padding: 0 4px; }
    .resource-monitor { gap: 7px; padding: 3px 8px; }
    .res-gpu-name { max-width: 72px; }
    .scene-badge { max-width: none; white-space: normal; }
    .chrome-util { padding: 4px 6px; }
    .chrome-util span { display: none; }
    .titlebar-actions { gap: 6px; margin-right: 4px; }
    .titlebar-actions .scene-badge { max-width: none; }
}
@media (max-width: 700px) {
    .resource-monitor { flex-wrap: wrap; height: auto; justify-content: flex-start; }
    header { height: auto; min-height: var(--header-h); }
    .header-right { gap: 6px; }
}
@media (max-width: 640px) {
    .style-layout, .markup-layout { flex-direction: column; }
    .style-sidebar, .markup-sidebar {
        width: 100%;
        max-height: 45vh;
        border-left: none;
        border-top: 1px solid var(--border);
    }
    .tab { padding: 4px 8px; }
    .tab-line { width: 12px; }
    .video-layout { padding: 12px; }
    .video-card { padding: 14px; }
}
@media (max-height: 700px) {
    :root {
        --titlebar-h: 44px;
        --titlebar-min: 44px;
        --header-h: 30px;
    }
    .header-logo { height: 28px; width: 28px; }
    .titlebar { padding-top: 0; }
    .tab-bar { min-height: 32px; }
}
@media (max-height: 600px) {
    .style-sidebar, .markup-sidebar {
        width: clamp(200px, 28vw, 280px);
        padding: 10px;
    }
}

/* Viewport fallback if container queries are unavailable. */
@media (max-width: 860px) {
    .hub-cats { gap: 2px 12px; }
    .hub-cat {
        font-size: 9px;
        letter-spacing: 0.08em;
    }
}


@media (max-width: 520px) {
    .hub-cat { letter-spacing: 0.05em; }
    .hub-dock-btn { padding: 6px 10px; }
}

/* Foreground task ownership and capture review. */
.mf-job-banner { display: flex; flex: 0 0 auto; align-items: center; justify-content: space-between; gap: 12px; padding: 8px 16px; background: var(--bg-2); color: var(--text); border-bottom: 1px solid var(--border); font-size: 12px; }
.ai-texture-review { padding: 12px 0; border-top: 1px solid var(--border); }
.ai-texture-review-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0; max-height: 230px; overflow-y: auto; }
.ai-texture-review-thumb { padding: 3px; border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2); cursor: pointer; font: inherit; font-size: 11px; }
.ai-texture-review-thumb:hover, .ai-texture-review-thumb:focus-visible { border-color: var(--accent); }
.ai-texture-review-thumb img { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; }

/* UI organization: keep workflow controls stable; simplify shared chrome. */
.hub-dock { display: none; } /* Settings, Models and Gallery remain in the titlebar. */
.settings-section { border-bottom: 1px solid var(--border); }
.settings-section > summary { cursor: pointer; padding: 14px 0; color: var(--text); font-size: 13px; font-weight: 600; }
.settings-section > summary::marker { color: var(--gold); }
.settings-section > .settings-group { margin: 0; padding: 0 0 18px; border: 0; }
.settings-panel-body > .settings-actions { padding-top: 18px; flex-wrap: wrap; }
.settings-panel .field-hint { line-height: 1.55; overflow-wrap: anywhere; }
.settings-panel .settings-actions { gap: 8px; }
.settings-panel input:not([type=checkbox]), .settings-panel select { max-width: 100%; min-width: 0; }
.settings-panel .input-row { min-width: 0; }
button:focus-visible, a:focus-visible, summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
.modal-card { overscroll-behavior: contain; }
@media (max-width: 600px) {
    .settings-panel { width: min(100vw, var(--settings-w)); max-width: 100vw; }
    .modal-overlay { padding: 12px; }
    .modal-card { max-width: 100%; }
    .mf-job-banner { flex-wrap: wrap; }
    .hub-cats { flex-wrap: wrap; gap: 8px; }
}
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
.settings-panel { width: var(--settings-w); }
.settings-panel-header { font-size: 13px; text-transform: none; letter-spacing: 0; color: var(--text); }
.settings-panel-body { gap: 4px; }
.settings-panel-body > .settings-group + .settings-group { margin-top: 14px; }
.settings-panel .field > label, .settings-panel .settings-field > label, .settings-panel .toggle-row { font-size: 12px; text-transform: none; letter-spacing: 0; color: var(--text-2); }
.settings-panel .field-hint { font-size: 12px; font-style: normal; opacity: 1; color: var(--text-2); }
.settings-panel input:not([type=checkbox]), .settings-panel select { min-height: 32px; font-size: 12px; }
.settings-close-btn { min-width: 28px; min-height: 28px; color: var(--text-2); }

/* Account is a quiet titlebar utility, not a license warning. */
.account-menu { -webkit-app-region: no-drag; app-region: no-drag; flex-shrink: 0; margin-right: 8px; }

/* Standalone console owns all remaining window space. */
body.solo-console .tool-workspace { display: none !important; }
body.solo-console #console-panel { flex: 1 1 0; height: auto !important; min-height: 0; }
body.solo-console #console-panel .console-body { display: flex; flex: 1; min-height: 0; }
body.solo-console .console-scroll { min-height: 0; max-height: none; }
.console-action-label, .console-action-btn { font-family: var(--font); font-size: 12px; padding: 4px 8px; color: var(--text-2); }
.console-header { min-height: 34px; height: 34px; }
.console-scroll .log-debug { color: var(--text-2); }
.ai-model-stage-column { display: flex; flex-direction: column; min-width: 0; min-height: 0; overflow: hidden; }
.ai-model-stage-column > .ai-model-preview-wrap { flex: 1; min-height: 0; }
.ai-model-stage-column > .ai-model-result-bar { flex: 0 0 auto; border-radius: 0; background: var(--bg-1); padding: 10px 12px; border-width: 1px 0 0; backdrop-filter: none; }
.ai-model-stage-column .ai-model-out-input { width: 0; min-width: 0; flex: 1; }

/* Shared compact telemetry/task strip: no separate full-width job banner. */
:root { --header-h: 30px; }
header.status-toolbar { position: relative; justify-content: flex-end; flex-wrap: wrap; gap: 8px 12px; height: auto; min-height: var(--header-h); row-gap: 4px; padding: 2px 12px; }
.status-toolbar .header-left {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
}
.status-toolbar .resource-monitor { pointer-events: auto; background: none; border: 0; padding: 0; border-radius: 0; }
.status-toolbar #mf-job-banner { position: relative; z-index: 2; flex: 0 1 34%; min-width: 0; margin-left: auto; justify-content: flex-end; gap: 12px; padding: 0; border: 0; background: none; font-size: 11px; flex-wrap: nowrap; }
.status-toolbar #mf-job-message { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-toolbar #mf-job-cancel { flex-shrink: 0; padding: 3px 8px; min-height: 24px; }
body.solo header.status-toolbar:has(#mf-job-banner:not(.hidden)) { display: flex !important; }
body.solo .status-toolbar .header-left { display: none; }
@media (max-width: 760px) {
    .status-toolbar .res-gpu-name, .status-toolbar .res-divider { display: none; }
    .status-toolbar .resource-monitor { display: flex; gap: 7px; }
    header.status-toolbar { gap: 8px; padding: 0 8px; }
}
@media (max-width: 560px) {
    .status-toolbar:has(#mf-job-banner:not(.hidden)) .header-left { display: none; }
    .status-toolbar #mf-job-banner { justify-content: space-between; }
}

/* Logs are available exclusively through the standalone Console plugin. */
body:not(.solo-console) #console-panel { display: none !important; }

@container hub (max-width: 720px) {
    .tools-grid[data-count="2"], .tools-grid[data-count="3"] { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
    .tool-card { max-width: none; }
}

/* Engine HUD + job banner pack to the right of the status toolbar. */
.status-toolbar #mf-job-banner { flex: 0 1 auto; margin-left: auto; }
body.tool-ai-motion .status-toolbar .am-hud-top:not(.hidden) ~ #mf-job-banner { margin-left: 0; }


/* =====================================================================
   DESIGN SYSTEM PASS (2026-09-20). One shape, one type scale, one surface.
   Later rules win; keep additions BELOW this line so they inherit the system.
   Shape:  buttons = rounded rect var(--r); pills ONLY for read-only chips.
   Type:   var(--font) everywhere; var(--mono) only for numeric readouts.
   Sizes:  button 28px (toolbar 24px, card CTA 32px); text 12px/600.
   ===================================================================== */

/* ---- Buttons: every interactive control shares this ---------------- */
.btn,
.am-tool,
.am-hud-btn,
.am-tab,
.mb-style,
.mb-key,
.main-menu-btn,
.am-chooser-back,
.hub-dock-btn,
.chrome-util,
.btn-tools-home {
    font-family: var(--font);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1;
    min-height: 28px;
    padding: 0 12px;
    border-radius: var(--r);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: none;
    transition: background .12s, color .12s, border-color .12s;
}
.btn-sm, .btn-xs, .am-hud-btn, .am-tab, .mb-style, .mb-key, .main-menu-btn, .am-chooser-back {
    min-height: 24px; font-size: 11.5px; padding: 0 10px;
}
/* Primary */
:root:not([data-theme="retro"]) .btn-gold,
.am-tool.gold, .am-hud-btn.gold, .tool-card-start, .am-card-cta {
    background: var(--accent); color: var(--on-accent); border: 1px solid transparent; border-radius: var(--r); box-shadow: none;
}
:root:not([data-theme="retro"]) .btn-gold:hover:not(:disabled),
.am-tool.gold:hover:not(:disabled), .am-hud-btn.gold:hover:not(:disabled),
.tool-card:hover:not(:disabled) .tool-card-start, .am-card:hover:not(:disabled) .am-card-cta {
    background: var(--accent-hover); color: var(--on-accent); transform: none; box-shadow: none;
}
/* Secondary (surface + border) */
.btn-outline, .am-tool, .am-hud-btn, .mb-style, .mb-key, .main-menu-btn, .am-chooser-back, .lw-nav-controls button {
    background: var(--bg-2); color: var(--text-2); border: 1px solid var(--border);
}
.btn-outline:hover:not(:disabled), .am-tool:hover:not(:disabled), .am-hud-btn:hover:not(:disabled),
.mb-style:hover:not(:disabled), .mb-key:hover:not(:disabled), .main-menu-btn:hover, .am-chooser-back:hover {
    background: var(--bg-3); color: var(--text); border-color: var(--border-hover);
}
/* Selected state for toggles / tabs / style keys */
.am-tab.active, .mb-style.active, .mb-key.active, .am-tool-toggle:has(input:checked), .lw-nav-controls button.active {
    background: var(--selected-bg); color: var(--gold); border-color: var(--gold-dim);
}
/* Ghost */
.btn-ghost { background: transparent; border: 1px solid transparent; color: var(--text-3); }
.btn-ghost:hover:not(:disabled) { color: var(--text); background: var(--bg-2); }
/* Danger */
.btn-danger, .am-tool.danger { color: var(--error); }
.am-tool.danger:hover:not(:disabled) { border-color: color-mix(in srgb, var(--error) 50%, transparent); color: var(--error); }
/* Disabled: one rule */
.btn:disabled, .am-tool:disabled, .am-hud-btn:disabled, .mb-style:disabled, .mb-key:disabled, .am-card:disabled .am-card-cta, .tool-card:disabled .tool-card-start {
    opacity: .4; cursor: default; background: var(--bg-2); color: var(--text-3); border-color: var(--border);
}
/* Pressed: a one-pixel nudge confirms the click without moving the layout. */
.btn:active:not(:disabled), .chrome-util:active:not(:disabled), .hub-dock-btn:active, .main-menu-btn:active {
    transform: translateY(1px);
    transition-duration: 0s;
}
:root:not([data-theme="retro"]) .btn-gold:active:not(:disabled) { filter: brightness(0.94); }
.am-hud-btn.gold:disabled { font-weight: 600; }
.am-tool-ico { font-size: 12px; opacity: .8; }
.am-tool-field { padding-right: 6px; }
.am-tool-field input, .am-tool-field select {
    height: 20px; padding: 0 6px; font-size: 11.5px; border-radius: var(--r); background: var(--bg-0);
}
/* Read-only status chips: the only pills. */
.am-hud-chip, .scene-badge {
    font-family: var(--font); font-size: 11.5px; font-weight: 500; color: var(--text-2);
    background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 0 10px 0 8px; min-height: 24px;
    display: inline-flex; align-items: center; gap: 7px; white-space: nowrap;
}
.scene-badge { font-family: var(--mono); font-size: 10.5px; }
.am-hud-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--text-4); flex-shrink: 0; }
.am-hud-chip[data-state="on"]::before { background: var(--green); box-shadow: 0 0 6px color-mix(in srgb, var(--green) 60%, transparent); }
.am-hud-chip[data-state="busy"]::before { background: var(--accent); animation: am-load-pulse 1s ease-in-out infinite; }
.am-hud-chip[data-state="error"]::before { background: var(--error); }

/* ---- Titlebar ------------------------------------------------------- */
.titlebar { background: var(--bg-0); }
.titlebar-tool { margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--border); gap: 4px; }
.titlebar-tool .crumb { font-size: 12px; font-weight: 500; color: var(--text-2); padding: 3px 6px; }
.titlebar-tool .crumb:hover { color: var(--gold); background: var(--bg-2); text-decoration: none; }
.titlebar-tool .crumb.current { color: var(--text); font-weight: 600; }
.titlebar-tool .crumb-sep { color: var(--text-4); font-size: 13px; padding: 0 1px; }
.main-menu-wrap { margin-right: 10px; }
.main-menu-btn { gap: 7px; }
.main-menu-pop { background: var(--bg-1); border-radius: var(--r-lg); padding: 6px; min-width: 240px; }
.main-menu-item { border-radius: var(--r); padding: 8px 10px; }
.main-menu-item span { font-size: 12.5px; font-weight: 600; }
.main-menu-item small { font-size: 11px; font-weight: 400; color: var(--text-3); }

/* ---- Status toolbar: readouts left, tool actions right ------------- */
header.status-toolbar { gap: 10px; }
.status-toolbar .am-hud-top { gap: 6px; margin-right: 0; }
.status-toolbar .am-hud-top .am-hud-icon { width: 26px; padding: 0; font-size: 14px; }
.status-toolbar #mf-job-banner { margin-left: 0; }
.status-toolbar #mf-job-cancel { min-height: 24px; }
/* Meters stay centered in the strip. A task on the right does not move them. */
header.status-toolbar { display: flex; align-items: center; flex-wrap: wrap; height: auto; min-height: var(--header-h); }
.status-toolbar .header-left {
    position: absolute;
    left: 50%;
    top: 0;
    height: 100%;
    transform: translateX(-50%);
    z-index: 1;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: max-content;
    max-width: calc(100% - 24px);
}
.status-toolbar .resource-monitor { flex-wrap: nowrap; height: auto; max-width: 100%; justify-content: center; pointer-events: auto; }
.status-toolbar .status-actions { flex: 0 1 auto; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.status-toolbar .am-hud-top { margin-left: 0; flex: 0 1 auto; min-width: 0; }
.status-toolbar .am-hud-btn, .status-toolbar #mf-job-cancel { flex-shrink: 0; }
.status-toolbar .am-hud-chip { flex: 0 1 auto; min-width: 0; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }
.status-toolbar #mf-job-banner { flex: 0 1 auto; min-width: 0; }
.status-toolbar #mf-job-message { max-width: 200px; }
.res-val { font-family: var(--mono); }
.res-label { font-family: var(--font); font-weight: 600; letter-spacing: .04em; }

/* ---- Cards: hub tiles and engine chooser are the same component ---- */
.tool-card, .am-card { background: var(--bg-1); border: 1px solid var(--border); border-radius: var(--r-lg); padding: 12px 14px; gap: 6px; }
.tool-card { position: relative; overflow: hidden; padding-bottom: 42px; }
.tool-card-foot {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--accent);
    color: var(--on-accent);
    font-size: 13px;
    font-weight: 600;
    transform: translateY(100%);
    pointer-events: none;
}
.tool-card-soon { margin-top: auto; font-size: 12px; color: var(--text-3); }
:root[data-theme="retro"] .tool-card-foot {
    background: #c0c0c0;
    color: #000;
    border-top: 1px solid #000;
}
.tool-card:hover:not(:disabled), .am-card:hover:not(:disabled) { border-color: var(--gold-dim); transform: none; box-shadow: none; background: var(--surface-hover); }
.tool-card-title, .am-card-name { font-size: 16px; font-weight: 600; line-height: 1.2; }
.tool-card-tag, .am-card-tag { font-size: 10.5px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--gold); }
.tool-card-blurb, .am-card-desc { font-size: 12px; line-height: 1.4; color: var(--text-2); }
.tool-card-meta, .am-card-meta { font-family: var(--font); font-size: 11.5px; color: var(--text-3); }
.tool-card-start, .am-card-cta { min-height: 28px; padding: 0 14px; font-size: 12px; font-weight: 600; display: inline-flex; align-items: center; margin-top: auto; align-self: flex-start; }
.am-card-cta { margin-top: 6px; }
.am-chooser-cards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.am-card { min-height: 0; }
.am-chooser-title { font-size: 28px; }
.am-chooser-sub, .am-chooser-note { font-size: 12.5px; }
.am-chooser-hint { font-size: 11.5px; }
.hub-cat { font-size: 10.5px; letter-spacing: .12em; padding: 6px 2px 8px; }
.tools-hub, .am-chooser { background: var(--hub-bg); }
.tools-hub::before { display: none; }

/* ---- AI Motion bottom bar ------------------------------------------ */
.am-toolstrip { align-items: stretch; padding: 6px 12px; gap: 6px; background: var(--bg-1); }
.am-tabs { gap: 2px; padding: 2px; background: var(--bg-0); border: 1px solid var(--border); border-radius: calc(var(--r) + 2px); align-self: flex-start; }
.am-tab { border-color: transparent; background: transparent; color: var(--text-3); min-height: 22px; padding: 0 12px; }
.am-tab:hover { color: var(--text); background: var(--bg-2); }
.am-tab.active { background: var(--bg-2); color: var(--gold); border-color: transparent; }
.am-tools { justify-content: flex-start; gap: 6px; min-height: 28px; }
.am-tool-group { display: inline-flex; align-items: center; gap: 6px; }
.am-tool-group-end { margin-left: auto; }
.am-tool-sep { height: 20px; margin: 0 4px; }
.am-tool-hint, .am-tool-label { font-size: 11.5px; color: var(--text-3); text-transform: none; letter-spacing: 0; }
.am-tool-label { color: var(--text-2); font-weight: 600; }
.mb-wasd { grid-template-columns: repeat(3, 28px); gap: 3px; margin: 0; }
.mb-wasd .mb-key { min-height: 22px; padding: 0; font-size: 11px; }
.mb-styles { gap: 4px; max-width: none; }
.mb-style { min-height: 24px; padding: 0 9px; }
.ai-motion-transport { padding: 6px 12px; gap: 12px; background: var(--bg-1); }
.ai-motion-fps, .ai-motion-frame-readout { font-size: 11.5px; color: var(--text-3); }
.ai-motion-transport-btns { gap: 4px; }
.ai-motion-transport-btns .btn { min-width: 32px; }
.am-play { min-width: 72px; letter-spacing: 0; }
.am-active-prompt { font-size: 11.5px; }
.am-waypoint-banner { border-radius: var(--r); font-size: 12px; }
.am-pop { background: var(--bg-1); border-radius: var(--r-lg); }
.am-pop-title { font-size: 10.5px; }
.am-dd-menu { background: var(--bg-1); border-radius: var(--r-lg); }
.am-dd-menu button { min-height: 0; padding: 7px 10px; font-weight: 500; justify-content: flex-start; }
#ai-motion-placeholder .placeholder-content span { font-size: 14px; color: var(--stage-text); }

/* ---- Viewport drag buttons --------------------------------------- */
.lw-nav-controls { background: var(--bg-1); border-radius: var(--r); padding: 2px; gap: 2px; }
.lw-nav-controls button { width: 26px; min-height: 22px; padding: 0; font-size: 13px; border-radius: var(--r); }

/* Drive strip: WASD cluster | styles (wrap) | Facing · Record · Reset, one deliberate block. */
.am-tools[data-am-panel="drive"]:not(.hidden) {
    display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto; align-items: center; column-gap: 8px;
}
.am-tools[data-am-panel="drive"] .mb-styles { flex-wrap: wrap; }
.am-tools[data-am-panel="drive"] .am-tool-group-end { margin-left: 0; justify-self: end; }

/* ---- AI Assistant column (right side, pushes the tool over) ---- */
:root { --assistant-w: 380px; --settings-w: 380px; --chrome-push: 0px; }
.assistant-drawer { position: fixed; top: var(--titlebar-h); right: 0; bottom: 0; width: var(--assistant-w); z-index: 40;
  display: flex; flex-direction: column; background: var(--bg-1); border-left: 1px solid var(--border); }
.assistant-drawer.hidden { display: none; }
body:not(.solo) > :not(.titlebar):not(.assistant-drawer):not(.settings-panel):not(.menu-column):not(.modal-overlay):not(.project-welcome):not(script) {
  margin-right: var(--chrome-push);
}
.menu-column {
  position: fixed; top: var(--titlebar-h); right: 0; bottom: 0; width: var(--menu-col-w, var(--settings-w)); z-index: 45;
  display: flex; flex-direction: column; background: var(--bg-1); border-left: 1px solid var(--border); overflow: hidden;
}
.menu-column.hidden { display: none; }
.menu-column-track { display: flex; width: 300%; height: 100%; flex: 1 1 auto; min-height: 0; }
.menu-column-track > .menu-face,
.menu-column .settings-panel,
.menu-column .project-panel {
  flex: 0 0 33.333%; width: 33.333%; height: 100%; min-width: 0; min-height: 0;
  position: relative; top: auto; right: auto; bottom: auto; max-height: none;
  border: 0; border-radius: 0; box-shadow: none; z-index: auto;
  display: flex; flex-direction: column; background: var(--bg-1);
}
.menu-column-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  font-size: 13px; font-weight: 600; color: var(--text);
}
.menu-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px; }
.menu-list .main-menu-item { padding: 10px 12px; }
body.menu-open #btn-main-menu { color: var(--gold); border-color: var(--gold-dim); }
body.solo-settings #menu-column,
body.solo-settings .menu-column-track { display: contents; }
body.solo-settings #main-menu-pop { display: none !important; }
.assistant-head { flex: 0 0 auto; height: auto; position: static; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
.assistant-title { flex: 1; display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text); }
.assistant-state { font-size: 11px; font-weight: 500; padding: 1px 8px; border-radius: 99px; background: var(--bg-3); color: var(--text-3); }
.assistant-state.ready { color: var(--sage); }
.assistant-state.loading, .assistant-state.thinking { color: var(--gold); }
.assistant-state.error { color: var(--error); }
.assistant-icon-btn { background: none; border: 1px solid var(--border); color: var(--text-2); border-radius: var(--r); padding: 2px 8px; cursor: pointer; font: inherit; font-size: 11px; }
.assistant-icon-btn:hover { color: var(--text); border-color: var(--border-hover); }
.assistant-messages { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.assistant-hint { color: var(--text-3); font-size: 11px; line-height: 1.5; }
.assistant-msg { max-width: 92%; padding: 8px 10px; border-radius: var(--r); font-size: 12px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; }
.assistant-msg.user { align-self: flex-end; background: var(--bg-3); color: var(--text); }
.assistant-msg.bot { align-self: flex-start; background: var(--bg-2); color: var(--text); }
.assistant-msg.error { align-self: stretch; color: var(--error); background: var(--bg-2); }
.assistant-card { align-self: stretch; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); padding: 10px 12px; font-size: 12px; }
.assistant-card-title { color: var(--text-2); font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 8px; }
.assistant-card-actions { display: flex; gap: 8px; margin-top: 10px; }
.assistant-foot { flex: 0 0 auto; height: auto; min-height: 0; position: static; align-items: stretch; justify-content: flex-start; border-top: 1px solid var(--border); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.assistant-compose { display: flex; gap: 8px; align-items: flex-end; }
.assistant-compose textarea { flex: 1 1 auto; width: 100%; min-width: 0; box-sizing: border-box; resize: vertical; min-height: 40px; max-height: 160px; background: var(--bg-2); color: var(--text); border: 1px solid var(--border); border-radius: var(--r); padding: 6px 8px; font: inherit; font-size: 12px; }
.assistant-compose textarea:focus { outline: none; border-color: var(--gold); }
.assistant-top-btn { display: inline-flex; align-items: center; gap: 6px; margin-right: 6px; -webkit-app-region: no-drag; app-region: no-drag; }
.chrome-util.icon-only { padding: 5px; gap: 0; }
.chrome-util.icon-only svg { width: 16px; height: 16px; }
.project-top-btn { margin-right: 6px; -webkit-app-region: no-drag; app-region: no-drag; }
body.project-open .project-top-btn { color: var(--gold); border-color: var(--gold-dim); }
body.assistant-open .assistant-top-btn { color: var(--gold); border-color: var(--gold-dim); }
body.solo .assistant-top-btn { display: none; }

/* Assistant attachments and "+" menu */
.assistant-attachments { display: flex; flex-wrap: wrap; gap: 6px; }
.assistant-attachments.hidden { display: none; }
.assistant-attachment { display: inline-flex; align-items: center; gap: 6px; padding: 2px 4px 2px 10px; border: 1px solid var(--border); border-radius: 99px; background: var(--bg-2); color: var(--text-2); font-size: 11px; }
.assistant-attachment button { background: none; border: none; color: var(--text-3); cursor: pointer; font-size: 13px; line-height: 1; padding: 0 4px; }
.assistant-attachment button:hover { color: var(--text); }
.assistant-attach-wrap { position: relative; flex: 0 0 auto; align-self: flex-end; }
.assistant-attach-btn { width: 30px; height: 30px; border-radius: var(--r); border: 1px solid var(--border); background: var(--bg-2); color: var(--text-2); font: inherit; font-size: 16px; line-height: 1; cursor: pointer; }
.assistant-attach-btn:hover, .assistant-attach-btn[aria-expanded="true"] { color: var(--gold); border-color: var(--gold-dim); }
.assistant-attach-menu { position: absolute; left: 0; right: auto; top: auto; bottom: calc(100% + 6px); min-width: 210px; z-index: 60;
  transform-origin: bottom left; animation: assistantMenuIn 0.14s ease-out; }
@keyframes assistantMenuIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
/* Suggestions: one action each */
.assistant-prompt-text { color: var(--text); font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
.assistant-card-summary { color: var(--text-2); font-size: 12px; margin-bottom: 6px; }
.assistant-steps { margin: 0; padding-left: 16px; color: var(--text-2); font-size: 12px; line-height: 1.7; }
.assistant-steps li.done { color: var(--sage); }
.assistant-steps li.failed { color: var(--error); }
.assistant-auto { margin-right: 4px; font-size: 11px; color: var(--text-2); }
.mf-ai-flash {
    animation: mfAiFlash 0.9s ease;
    border-color: var(--gold) !important;
}
@keyframes mfAiFlash {
    0% { box-shadow: 0 0 0 1px var(--gold), 0 0 18px color-mix(in srgb, var(--gold) 55%, transparent); }
    100% { box-shadow: 0 0 0 0 transparent; }
}
body.solo-assistant .assistant-drawer {
    display: flex !important;
    position: fixed;
    top: var(--titlebar-h);
    right: 0;
    bottom: 0;
    left: 0;
    width: auto;
    border: 0;
}
body.solo-assistant.assistant-open > :not(.titlebar):not(.assistant-drawer):not(.modal-overlay):not(script) {
    margin-right: 0;
}
/* Resizable columns */
.col-resizable:not(.assistant-drawer) { position: relative; }
.col-resizer { position: absolute; top: 0; bottom: 0; left: -3px; width: 7px; cursor: col-resize; z-index: 30; }
.col-resizer:hover, body.col-resizing .col-resizer { background: color-mix(in srgb, var(--accent) 25%, transparent); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }
.fb-item.fb-file .fb-icon { opacity: 0.8; }

/* Output seek bar doubles as a progress bar while rendering */
.vc-seek-bar .vc-seek-progress { position: absolute; left: 0; top: 0; bottom: 0; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--gold-dim), var(--gold)); transition: width 0.4s ease; pointer-events: none; }
.vc-seek-bar.generating { pointer-events: none; }
.vc-seek-bar.generating .vc-seek-fill, .vc-seek-bar.generating .vc-seek-knob { visibility: hidden; }
.vc-seek-bar.generating.indeterminate .vc-seek-progress { animation: seekIndeterminate 1.3s ease-in-out infinite; }
@keyframes seekIndeterminate { 0% { left: -30%; } 100% { left: 100%; } }
/* Assistant attachment thumbnails */
.assistant-thumb { width: 28px; height: 28px; object-fit: cover; border-radius: var(--r); background: var(--bg-3); flex: 0 0 auto; }
.assistant-thumb.missing { visibility: hidden; }
.assistant-attachment { padding-left: 3px; }
.assistant-msg-thumbs { display: flex; gap: 6px; margin-bottom: 6px; }
.assistant-msg-thumbs .assistant-thumb { width: 56px; height: 56px; }

/* ---- Video references (Style tab) and Video tab summary ----------- */
#style-h3-section .vref-frames,
#vid-ref-ends { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
#style-h3-section .vref-part { display: flex; flex-direction: column; gap: 5px; min-width: 0; margin-bottom: 10px; }
.vref-title { display: block; font-size: 9px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; }
.vref-title .val-badge { float: none; margin-left: 6px; cursor: default; }
.vref-title .val-badge:hover { text-decoration: none; }
.vref-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.vref-cell { position: relative; width: 68px; height: 68px; flex: 0 0 68px; }
.vref-slot {
    width: 100%; height: 100%; padding: 0; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2);
    color: var(--text-3); font: inherit; font-size: 10px; cursor: pointer;
    transition: border-color 0.15s, color 0.15s;
}
.vref-slot.empty { border-style: dashed; border-color: var(--border-hover); background: transparent; }
.vref-slot:hover:not(:disabled), .vref-slot.drag-over { border-color: var(--gold-dim); color: var(--gold); }
.vref-slot.is-full { opacity: 0.45; cursor: not-allowed; }
.vref-slot:disabled { opacity: 0.5; cursor: default; }
.vref-slot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vref-remove {
    position: absolute; top: 3px; right: 3px; width: 18px; height: 18px; padding: 0;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--border-hover); border-radius: 50%; background: rgba(7,9,15,0.82);
    color: var(--text); cursor: pointer; opacity: 0; transition: opacity 0.12s;
}
.vref-cell:hover .vref-remove, .vref-remove:focus-visible { opacity: 1; }
.vref-remove:hover { color: var(--error); border-color: var(--error); }
.vref-remove:disabled { display: none; }
.vref-index {
    position: absolute; left: 3px; bottom: 3px; min-width: 15px; height: 15px; padding: 0 3px;
    border-radius: var(--r); background: rgba(7,9,15,0.8); color: var(--text-2);
    font-size: 9.5px; font-weight: 600; line-height: 15px; text-align: center; pointer-events: none;
}
.vref-first-last { margin-top: 2px; }
.main-menu-pop.vref-menu { position: fixed; right: auto; top: 0; left: 0; z-index: 1200; }
.vref-summary { border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2); padding: 8px 10px; margin: 4px 0 10px; }
.vref-summary-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vref-summary-thumbs { display: flex; gap: 4px; margin-top: 6px; }
.vref-summary-thumbs.hidden { display: none; }
.vref-summary-thumbs img { width: 36px; height: 36px; object-fit: cover; border-radius: var(--r); border: 1px solid var(--border); }
#h3-only-bottom .ai-model-hint { margin: 6px 0 12px; }

.tools-hub:has(.store-panel:not(.hidden)) {
    padding-right: 12px;
}
.tools-hub-inner:has(> .store-panel:not(.hidden)) {
    overflow: hidden;
}
.tools-hub-inner .store-panel {
    position: relative;
    inset: auto;
    z-index: 1;
    flex: 1 1 0;
    width: 100%;
    min-height: 0;
    max-height: 100%;
    padding-top: 0;
    background: transparent;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
}
.tools-hub-inner .store-panel::-webkit-scrollbar { width: 10px; }
.store-panel {
    position: fixed; inset: 0; z-index: 40; display: flex; flex-direction: column;
    background: var(--bg-0); padding-top: calc(var(--titlebar-h) + 8px); overflow: auto;
}
.need-models-card { max-width: 420px; }
.need-models-card p { margin: 0 0 12px; color: var(--text-2); line-height: 1.45; }
.need-models-list { margin: 0 0 14px; padding-left: 18px; max-height: 280px; overflow: auto; }
.need-models-list li { margin: 0 0 6px; color: var(--text); }
.need-models-progress.hidden { display: none; }
.need-models-track {
    height: 4px; border-radius: 999px; background: var(--bg-2);
    border: 1px solid var(--border); overflow: hidden;
}
.need-models-track > div {
    height: 100%; width: 0; background: var(--accent);
}
.store-panel.hidden { display: none; }
.store-bar {
    display: flex; align-items: center; gap: 12px; padding: 14px 20px;
    border-bottom: 1px solid var(--border);
}
.store-bar h2 { margin: 0; font-size: 16px; font-weight: 600; }
.store-tabs { display: flex; gap: 6px; flex: 1; }
.store-tab {
    border: 1px solid var(--border); background: transparent; color: var(--text-2);
    border-radius: 999px; padding: 4px 12px; font: inherit; font-size: 12px; cursor: pointer;
}
.store-tab.is-active { color: var(--text); border-color: var(--gold); }
.store-grid {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    align-items: stretch;
    width: 100%;
    box-sizing: border-box;
    gap: 12px; padding: 16px 20px 32px;
}
.store-card {
    display: flex; flex-direction: column; gap: 8px; padding: 14px;
    height: 100%; box-sizing: border-box;
    border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-1);
}
.store-card .store-blurb { flex: 1 1 auto; }
.store-card .store-price { margin-top: auto; }
.store-card > .btn { width: 100%; justify-content: center; box-sizing: border-box; }

@container hub (max-width: 640px) {
    .tools-grid,
    .tools-grid[data-count="2"],
    .tools-grid[data-count="3"] {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
        padding: 8px 10px 14px;
    }
    .tool-card {
        max-width: none;
        padding: 10px 12px 38px;
        gap: 4px;
    }
    .tool-card-blurb { display: none; }
    .tool-card-title { font-size: 15px; }
    .tool-card-art { width: 22px; height: 22px; }
    .tool-card-foot { height: 32px; font-size: 12px; }
}
@container chooser (max-width: 640px) {
    .am-chooser-cards { grid-template-columns: minmax(0, 1fr); }
    .am-card-desc, .am-chooser-sub { display: none; }
    .am-card { padding: 10px 12px; gap: 4px; }
    .am-card-name { font-size: 15px; }
    .am-chooser-title { font-size: 22px; }
}

@keyframes mf-splash-spin { to { transform: rotate(360deg); } }
.mf-stage-splash {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #020617;
    color: #b3d0c6;
    font-family: "Segoe UI", var(--font), sans-serif;
}
.mf-stage-splash.hidden { display: none; }
.mf-stage-splash.is-setup { z-index: 8; }
.mf-stage-splash-box { text-align: center; max-width: 40em; padding: 0 16px; max-height: 80%; overflow: auto; }
.mf-stage-splash-spin {
    width: 40px;
    height: 40px;
    margin: 0 auto 16px;
    border: 3px solid rgba(240, 190, 111, 0.25);
    border-top-color: #f0be6f;
    border-radius: 50%;
    animation: mf-splash-spin 0.8s linear infinite;
}
.mf-stage-splash-title { font-size: 14px; letter-spacing: 0.3px; }
.mf-stage-splash-sub { font-size: 12px; opacity: 0.55; margin-top: 8px; line-height: 1.45; overflow-wrap: anywhere; }
.store-card h3 { margin: 0; font-size: 15px; line-height: 1.25; overflow-wrap: anywhere; }
.store-seller, .store-blurb, .store-note { margin: 0; color: var(--text-2); font-size: 12px; line-height: 1.45; }
.store-seller { color: var(--text-3); }
.store-note { padding: 8px 20px 0; min-height: 0; }
.store-note:empty { display: none; }
.store-note.is-error { color: var(--error); }
.store-note.is-ok { color: var(--green); }
.store-card { transition: border-color 0.15s ease, background-color 0.15s ease; }
.store-card:hover { border-color: var(--border-hover); }
.store-card.is-highlight { border-color: var(--gold); }
.store-card-head { display: flex; align-items: center; gap: 10px; min-width: 0; }
.store-card-titles { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.store-logo {
    flex: 0 0 auto; width: 36px; height: 36px; display: grid; place-items: center;
    border: 1px solid var(--border); border-radius: var(--r); background: var(--bg-2);
    color: var(--gold); font-weight: 600; font-size: 15px; overflow: hidden;
}
.store-logo img { width: 100%; height: 100%; object-fit: cover; }
.store-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.store-chip {
    border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px;
    color: var(--text-3); font-size: 11px; line-height: 16px; white-space: nowrap;
}
.store-chip.is-accent { color: var(--gold); border-color: color-mix(in srgb, var(--gold) 45%, transparent); }
.store-chip.is-ok { color: var(--green); border-color: color-mix(in srgb, var(--green) 40%, transparent); }
.store-card-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 4px; }
.store-card-foot .btn { min-width: 96px; justify-content: center; }
.store-card .store-card-foot .store-price { margin-top: 0; }
.store-card-extra { display: flex; justify-content: flex-end; gap: 12px; }
.store-link {
    border: 0; background: none; padding: 0; font: inherit; font-size: 12px;
    color: var(--text-3); cursor: pointer;
}
.store-link:hover:not(:disabled) { color: var(--text); text-decoration: underline; }
.store-link:disabled { opacity: 0.5; cursor: default; }
.store-price { margin: 0; color: var(--gold); font-size: 14px; font-weight: 600; }
.store-price.is-owned { color: var(--text-3); font-weight: 500; font-size: 12px; }
.store-saved {
    color: var(--text-3); font-size: 12px; white-space: nowrap;
    border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px;
}
.store-saved.hidden, .store-count.hidden { display: none; }
.store-count {
    display: inline-block; min-width: 16px; margin-left: 4px; padding: 0 5px; border-radius: 999px;
    background: var(--bg-3); color: var(--text); font-size: 10px; line-height: 16px; text-align: center;
}
.store-tab.is-active .store-count { background: var(--gold); color: var(--on-accent); }
.store-empty {
    grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 48px 20px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-1);
    color: var(--text-2); font-size: 13px; text-align: center;
}
.store-empty p { margin: 0; max-width: 46ch; line-height: 1.5; }
.store-card-skeleton { min-height: 168px; background: linear-gradient(100deg, var(--bg-1) 30%, var(--bg-2) 50%, var(--bg-1) 70%); background-size: 300% 100%; animation: mf-store-shimmer 1.4s ease-in-out infinite; }
@keyframes mf-store-shimmer { from { background-position: 100% 0; } to { background-position: 0 0; } }
.store-panel.is-busy .store-grid { cursor: progress; }
.store-pay { padding: 16px 20px 24px; }
.store-pay-card {
    max-width: 520px; margin: 0 auto; padding: 18px; display: flex; flex-direction: column; gap: 10px;
    border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-1);
}
.store-pay-title { margin: 0; font-size: 16px; }
.store-pay-label { margin: 0; color: var(--text-2); font-size: 13px; }
.store-payment-element { min-height: 120px; }
.store-pay-actions { display: flex; gap: 8px; justify-content: flex-end; }
.store-pay-secure { margin: 0; color: var(--text-3); font-size: 11px; line-height: 1.4; }
.store-plugin { padding: 8px 20px 24px; }
.store-plugin-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.store-plugin-title { font-weight: 600; color: var(--text); }
.store-plugin iframe { width: 100%; min-height: 70vh; border: 1px solid var(--border); border-radius: var(--r); background: var(--bg); }
body.suite-locked #btn-open-models,
body.suite-locked #btn-open-gallery,
body.suite-locked #hub-models,
body.suite-locked #hub-gallery,
body.suite-locked #btn-assistant,
body.suite-locked [data-menu="models"],
body.suite-locked [data-menu="gallery"] { display: none !important; }

:root[data-theme="retro"] .seg-btn:hover:not(.active),
:root[data-theme="retro"] .hub-cat:hover,
:root[data-theme="retro"] .tab:hover,
:root[data-theme="retro"] .btn-ghost:hover:not(:disabled),
:root[data-theme="retro"] .btn-outline:hover:not(:disabled) {
    color: #000;
    background: #d4d0c8;
    transform: none;
}
:root[data-theme="retro"] .btn-gold:hover:not(:disabled) {
    background: #d4d0c8;
    color: #000;
    transform: none;
    box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #808080;
}
:root[data-theme="retro"] .tool-card:hover,
:root[data-theme="retro"] .store-card:hover,
:root[data-theme="retro"] .gallery-cell:hover,
:root[data-theme="retro"] .oh-cell:hover {
    transform: none;
    border-color: #000;
}
:root[data-theme="retro"] .chrome-util:hover,
:root[data-theme="retro"] .win-btn:hover {
    background: #000080;
    color: #fff;
}
:root[data-theme="retro"] .res-meter-track { background: #808080; box-shadow: inset 1px 1px 0 #404040; }

:root[data-theme="lightwave"] {
    --bg-0: #2b2b2b;
    --bg-1: #3a3a3a;
    --bg-2: #333333;
    --bg-3: #484848;
    --border: #1c1c1c;
    --border-hover: #6e6e6e;
    --gold: #a4c9f3;
    --gold-dim: #84aedb;
    --gold-glow: transparent;
    --gold-glow-strong: transparent;
    --accent: #3b6798;
    --accent-hover: #426f9f;
    --error: #ffb0ac;
    --red: #ffb0ac;
    --sage: #b3d0c6;
    --text: #e6e6e6;
    --text-2: #c6c6c6;
    --text-3: #bdbdbd;
    --text-4: #bdbdbd;
    --on-accent: #ffffff;
    --stage-bg: #5a5a5a;
    --stage-text: #eeeeee;
    --fade-rgb: 43 43 43;
    --r: 2px;
    --r-lg: 2px;
    --font: Tahoma, "Segoe UI", sans-serif;
}
:root[data-theme="lightwave"] .titlebar {
    background: linear-gradient(180deg, #4d7eb8 0%, #2d5f96 100%);
    color: #fff;
    border-bottom: 1px solid #1a1a1a;
}
:root[data-theme="lightwave"] .titlebar-brand,
:root[data-theme="lightwave"] .titlebar-variant { color: #fff; }
:root[data-theme="lightwave"] .btn,
:root[data-theme="lightwave"] .btn-gold,
:root[data-theme="lightwave"] .btn-outline,
:root[data-theme="lightwave"] .btn-ghost,
:root[data-theme="lightwave"] .btn-danger {
    background: linear-gradient(180deg, #5a5a5a, #454545);
    color: #eee;
    border: 1px solid #1c1c1c;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 #6e6e6e;
    text-shadow: none;
    text-transform: none;
    letter-spacing: 0;
}
:root[data-theme="lightwave"] .btn-gold {
    background: var(--accent);
    color: #fff;
}
:root[data-theme="lightwave"] .btn:hover:not(:disabled),
:root[data-theme="lightwave"] .btn-gold:hover:not(:disabled) {
    background: var(--surface-hover);
    filter: none;
    transform: none;
}
:root[data-theme="lightwave"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
:root[data-theme="lightwave"] select,
:root[data-theme="lightwave"] textarea {
    background: #2a2a2a;
    color: #eee;
    border: 1px solid #1a1a1a;
    border-radius: 2px;
    box-shadow: inset 0 1px 0 #111;
}
:root[data-theme="lightwave"] .tool-card,
:root[data-theme="lightwave"] .store-card,
:root[data-theme="lightwave"] .modal-card {
    background: #3c3c3c;
    border: 1px solid #1c1c1c;
    box-shadow: inset 0 1px 0 #555;
}
:root[data-theme="lightwave"] .res-meter-track { background: #1e1e1e; }

.announce-card { max-width: 520px; }
.announce-kicker {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 8px;
}
.announce-card .modal-title {
    font-size: 20px;
    line-height: 1.3;
    color: var(--text);
    margin-bottom: 12px;
}
.announce-card .modal-body {
    font-size: 14px;
    line-height: 1.55;
    color: var(--text);
    white-space: pre-wrap;
}
.menu-unread, .inbox-btn { position: relative; }
.inbox-btn { color: var(--gold); }
.support-card { width: min(520px, 100%); }
.support-card .field > label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
.support-card .toggle-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 2px 0 12px;
    font-size: 11px;
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    color: var(--text-2);
}
.support-card textarea, .support-card input[type="text"], .support-card input.input-wide { width: 100%; }
.bug-file-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.bug-file-label {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 11px;
    color: var(--text-3);
}
.bug-previews { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.bug-thumb { position: relative; width: 72px; height: 72px; }
.bug-thumb img, .bug-thumb video {
    width: 72px;
    height: 72px;
    object-fit: cover;
    border: 1px solid var(--border);
    border-radius: var(--r);
    display: block;
}
.bug-thumb-remove {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 18px;
    height: 18px;
    padding: 0;
    border: none;
    border-radius: 99px;
    background: rgba(7, 9, 15, 0.88);
    color: var(--text);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}
.bug-thumb-remove:hover { color: var(--gold); }
.inbox-msg { border: 1px solid var(--border); padding: 8px 10px; margin: 0 0 8px; }
.inbox-msg.admin { background: var(--bg-2); }
.inbox-item { display: block; width: 100%; text-align: left; margin: 0 0 8px; }

/* Shared interaction states. Keep foreground/background pairs together so
   palette changes cannot leave dark text on a dark hover or selection. */
.am-tool.gold, .am-hud-btn.gold { background: var(--accent); color: var(--on-accent); }
.am-tool.gold:hover:not(:disabled), .am-hud-btn.gold:hover:not(:disabled) {
    background: var(--accent-hover); color: var(--on-accent); border-color: transparent;
}
.seg-btn.active:hover, .gallery-tab.active:hover {
    background: var(--accent-hover); color: var(--on-accent);
}
.mb-style.active:hover, .mb-key.active:hover, .am-tab.active:hover,
.am-tool-toggle:has(input:checked):hover, .lw-nav-controls button.active:hover {
    background: var(--selected-bg); color: var(--gold); border-color: var(--gold-dim);
}
.store-tab:hover, .store-tab.is-active { background: var(--selected-bg); color: var(--gold); }
.store-tab, .gallery-tab, .seg-toggle, .seg-btn { border-radius: var(--r); }
.store-card, .modal-card, .am-pop, .am-dd-menu, .amt-menu { border-radius: var(--r-lg); }
/* Focus stays inside the field's own box so it never covers neighbouring controls. */
input:focus-visible, select:focus-visible, textarea:focus-visible,
input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--gold);
    box-shadow: inset 0 0 0 1px var(--gold);
}
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible, input[type="range"]:focus-visible {
    outline: 1px solid var(--gold); outline-offset: 0;
    box-shadow: none;
}
input[type="checkbox"]:focus:not(:focus-visible), input[type="radio"]:focus:not(:focus-visible), input[type="range"]:focus:not(:focus-visible) { box-shadow: none; }
input::placeholder, textarea::placeholder { color: var(--text-3); opacity: 1; }
.pill-check:focus-within .pill { outline: 2px solid var(--gold); outline-offset: 2px; }
.vc-btn:disabled { opacity: .4; cursor: default; }
.vc-btn:hover:not(:disabled) { background: var(--selected-bg); color: var(--gold); }
.am-tool.gold:disabled, .am-hud-btn.gold:disabled {
    background: var(--bg-2); color: var(--text-3); border-color: var(--border);
}
/* Media badges need a stable pair even over white imagery in a light theme. */
.vref-remove, .vref-index, .bug-thumb-remove {
    background: var(--media-bg); color: var(--media-text);
}
.vref-remove:hover, .bug-thumb-remove:hover { background: #721f24; color: #fff; }
.ai-tex-stage-note { color: var(--text-2); }
.ai-model-viewer, .ai-rig-canvas, .ai-motion-bones { background: var(--stage-bg); }
:root .ai-model-send-top.btn-gold:hover:not(:disabled),
:root .ai-model-send-top.btn-gold:active:not(:disabled) { transform: translateX(-50%); }

/* Native-looking themes still use the same accessible interaction contracts. */
:root[data-theme="retro"] .hub-cats,
:root[data-theme="retro"] .hub-empty { background: var(--bg-1); }
:root[data-theme="retro"] .am-chooser { background: var(--bg-1); }
:root[data-theme="retro"] .tool-card:hover:not(:disabled),
:root[data-theme="retro"] .am-card:hover:not(:disabled) { background: var(--surface-hover); }
:root[data-theme="retro"] .tool-card:hover:not(:disabled) .tool-card-start {
    background: var(--surface-hover); color: var(--text);
}
:root[data-theme="retro"] .btn-danger:hover:not(:disabled) { color: var(--error); }
:root[data-theme="lightwave"] .btn-gold:hover:not(:disabled) {
    background: var(--accent-hover); color: var(--on-accent);
}
:root[data-theme="lightwave"] .btn-danger,
:root[data-theme="lightwave"] .btn-danger:hover:not(:disabled) { color: var(--error); }
:root[data-theme="lightwave"] .btn:disabled,
:root[data-theme="retro"] .btn:disabled {
    background: var(--bg-2); color: var(--text-3); border-color: var(--border); box-shadow: none;
}
:root[data-theme="lightwave"] .tool-card:hover:not(:disabled),
:root[data-theme="lightwave"] .am-card:hover:not(:disabled) { background: var(--surface-hover); }
:root:is([data-theme="retro"], [data-theme="lightwave"]) .titlebar {
    --text: #fff; --text-2: #fff; --text-3: #e0e7f2; --text-4: #ced8e8;
}
/* Menus are ordinary window surfaces, not part of the colored title strip. */
:root[data-theme="retro"] .main-menu-pop {
    --text: #000; --text-2: #1a1a1a; --text-3: #3c3c3c; --text-4: #606060;
}
:root[data-theme="lightwave"] .main-menu-pop {
    --text: #e6e6e6; --text-2: #c6c6c6; --text-3: #b5b5b5; --text-4: #aeaeae;
}
:root:is([data-theme="retro"], [data-theme="lightwave"]) .titlebar-tool .crumb:hover,
:root:is([data-theme="retro"], [data-theme="lightwave"]) .chrome-util:hover,
:root:is([data-theme="retro"], [data-theme="lightwave"]) .win-btn:hover {
    background: #000060; color: #fff;
}
:root:is([data-theme="retro"], [data-theme="lightwave"]) .main-menu-btn {
    background: var(--accent); color: var(--on-accent); border-color: var(--on-accent);
}
:root .win-btn-close:hover { background: #b52331; color: #fff; }

:root:is([data-theme="retro"], [data-theme="lightwave"]) .titlebar-edition { color: #fff; opacity: 1; }
:root:is([data-theme="retro"], [data-theme="lightwave"]) .titlebar :focus-visible { outline-color: #fff; }
:root:is([data-theme="retro"], [data-theme="lightwave"]) .main-menu-pop :focus-visible { outline-color: var(--gold); }

.placeholder .ai-model-note, .output-placeholder-note, .output-live-label { color: var(--stage-text); opacity: 1; }
.output-tag { background: var(--floating-bg); }

:root .btn.btn-gold:disabled { background: var(--bg-2); color: var(--text-3); border-color: var(--border); box-shadow: none; }

/* Style markup editor. Motion is JS (mfRun); do not add transitions here. */
.mf-markup-view {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    z-index: 2;
    pointer-events: none;
    display: none;
}
.mf-markup-view.is-on { display: block; }
.wipe-styled { z-index: 3; }
.wipe-line { z-index: 4; }
.mf-edit-toolbar {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    height: auto;
    flex: 0 0 auto;
    gap: 0;
    padding: 4px 8px 6px;
    background: var(--bg-1);
    border-bottom: 1px solid var(--border);
    box-sizing: border-box;
    overflow: visible;
    position: relative;
    z-index: 2;
}
.mf-edit-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr);
    align-items: center;
    width: 100%;
    min-height: 36px;
}
.mf-edit-tools-row {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 2px;
    min-width: 0;
    min-height: 36px;
    overflow: visible;
    position: relative;
    z-index: 4;
}
.mf-edit-commit {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 14px;
    padding-left: 12px;
}
@media (max-width: 760px) {
    .mf-edit-top { grid-template-columns: minmax(0, 1fr) max-content; }
    .mf-edit-top-side { display: none; }
    .mf-edit-tools-row { justify-content: flex-start; }
}
.mf-opt-num {
    width: 46px;
    height: 22px;
    padding: 0 4px;
    font-family: var(--mono);
    font-size: 11px;
    text-align: right;
    color: var(--text);
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--r, 4px);
    box-sizing: border-box;
    -moz-appearance: textfield;
}
.mf-opt-num::-webkit-inner-spin-button,
.mf-opt-num::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.mf-spl-preview {
    width: 96px;
    height: 28px;
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--r, 4px);
    box-sizing: border-box;
}
.mf-commit {
    border: none;
    background: transparent;
    padding: 4px 2px;
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-2);
    cursor: pointer;
}
#mf-edit-save.mf-commit { color: var(--gold); }
.mf-commit:disabled { opacity: 0.35; cursor: default; }
#mf-edit-shell button:focus,
#mf-edit-shell button:focus-visible { outline: none; box-shadow: none; }
.mf-edit-gap { flex: 1 1 auto; height: 100%; min-width: 8px; }
.mf-edit-swatch-anchor { position: relative; flex: 0 0 auto; }
.mf-edit-options {
    position: relative;
    transform: none;
    width: 100%;
    min-height: 32px;
    margin-top: 2px;
    padding: 0 48px;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: 18px;
    row-gap: 2px;
    pointer-events: none;
    white-space: nowrap;
}
.mf-edit-options > * { pointer-events: auto; }
.mf-edit-tool-name,
#mf-edit-tool-name { display: none; }
.mf-opt {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 30px;
    font-size: 11px;
    color: var(--text-3);
}
.mf-opt[hidden] { display: none !important; }
.mf-opt input[type="range"] { width: clamp(54px, 6.5vw, 92px); }
.mf-opt-pair input[type="range"] + input[type="range"] { margin-left: 2px; }
.mf-edit-options .mf-edit-tool { width: 28px; height: 28px; padding: 0; }
.mf-edit-options .mf-edit-tool svg { width: 18px; height: 18px; }
.mf-edit-options .checkbox-label { gap: 6px; font-size: 11px; color: var(--text-3); }
#mf-pen-apply { font-size: 12px; color: var(--gold); padding: 4px 6px; }
.mf-select-modes { gap: 1px; }
.mf-select-modes .mf-edit-tool {
    color: color-mix(in srgb, var(--text-2) 38%, transparent);
}
.mf-select-modes .mf-edit-tool.is-active {
    color: var(--text);
    background: var(--bg-0);
}
.mf-protect { gap: 0; }
.mf-protect .mf-edit-tool { color: var(--text-2); }
.mf-protect .mf-edit-tool.is-on { color: var(--text); }
.mf-edit-tool {
    width: 36px;
    height: 36px;
    padding: 0 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    overflow: visible;
    position: relative;
    box-sizing: border-box;
    border: none;
    border-radius: var(--r);
    background: transparent;
    color: var(--text-2);
    cursor: pointer;
    flex-shrink: 0;
}
.mf-edit-tool.is-active { background: transparent; color: var(--text); }
.mf-edit-tools-row > .mf-edit-tool.is-active {
    flex-direction: column;
    justify-content: center;
    gap: 1px;
    min-width: 36px;
    height: 36px;
    padding: 2px 5px 3px;
    overflow: hidden;
    background: var(--bg-0);
    color: #75b0c1;
    z-index: 1;
}
.mf-edit-tools-row > .mf-edit-tool.is-active svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}
.mf-edit-tool:disabled { opacity: 0.35; cursor: default; }
.mf-edit-save { color: var(--gold); }
.mf-edit-options > #mf-edit-image {
    position: absolute;
    right: 4px;
    top: 0;
    width: 36px;
    height: 36px;
}
.mf-edit-options > #mf-edit-image svg { width: 22px; height: 22px; }
.mf-edit-color {
    width: 22px;
    height: 22px;
    padding: 3px;
    border: 1px solid var(--border-hover);
    border-radius: 2px;
    background: var(--bg-0);
    cursor: pointer;
    box-sizing: border-box;
}
#mf-edit-color-chip {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 1px;
    background: #e8a948;
}
.mf-color-pop {
    position: absolute;
    top: 34px;
    left: 50%;
    transform: translateX(-50%);
    width: 196px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
    z-index: 6;
}
.mf-color-pop[hidden] { display: none !important; }
.mf-color-sv-wrap { position: relative; width: 100%; height: 112px; }
#mf-color-sv {
    width: 100%;
    height: 100%;
    display: block;
    border-radius: 2px;
    cursor: crosshair;
}
#mf-color-cursor {
    position: absolute;
    width: 12px;
    height: 12px;
    margin: -6px 0 0 -6px;
    border: 2px solid #fff;
    border-radius: 50%;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.7);
    pointer-events: none;
}
#mf-color-hue {
    width: 100%;
    height: 8px;
    margin: 2px 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
#mf-color-hue::-webkit-slider-thumb {
    background: #fff;
    border: 2px solid var(--bg-0);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
#mf-color-hue::-moz-range-thumb {
    background: #fff;
    border: 2px solid var(--bg-0);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.55);
}
#mf-color-hue::-moz-range-track {
    height: 8px;
    border-radius: 4px;
    background: linear-gradient(90deg, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
}
.mf-color-hex {
    display: flex;
    align-items: center;
    gap: 4px;
    font-family: var(--mono);
    font-size: 12px;
    color: var(--text-3);
}
.mf-color-hex input {
    width: 76px;
    height: 24px;
    padding: 0 6px;
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--text);
    background: var(--bg-0);
    border: 1px solid var(--border);
    border-radius: var(--r);
}
.mf-edit-swatches {
    position: absolute;
    top: 40px;
    left: 0;
    display: grid;
    grid-template-columns: repeat(4, 16px);
    gap: 4px;
    padding: 8px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r);
    z-index: 3;
}
.mf-edit-swatches[hidden] { display: none !important; }
.mf-edit-swatches .mk-swatch {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: 2px;
    cursor: pointer;
}
.mf-edit-stage {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
}
.mf-edit-status {
    position: absolute;
    left: 12px;
    bottom: 12px;
    font-size: 12px;
    color: var(--text-2);
    pointer-events: none;
}
.mf-edit-status:empty { display: none; }
.mf-tool-name {
    position: static;
    font-family: var(--font);
    font-size: 11px;
    font-weight: 600;
    color: var(--gold);
    white-space: nowrap;
    line-height: 1;
    pointer-events: none;
}
.mf-fill-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 4px;
    background: var(--bg-3);
    z-index: 5;
}
.mf-fill-bar[hidden] { display: none !important; }
.mf-fill-bar div {
    height: 100%;
    width: 0;
    background: var(--gold);
}
.mf-brush-hud {
    position: fixed;
    z-index: 80;
    transform: translate(-50%, -50%);
    pointer-events: none;
}
.mf-brush-hud[hidden] { display: none !important; }
.mf-brush-hud canvas { display: block; }
.mf-ai-row {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    width: min(520px, calc(100% - 24px));
    padding: 6px;
    background: var(--bg-1);
    border: 1px solid var(--border);
    border-radius: var(--r);
    box-sizing: border-box;
    z-index: 4;
}
.mf-ai-row[hidden] { display: none !important; }
.mf-ai-row textarea,
.mf-ai-row textarea:focus {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    height: 28px;
    min-height: 28px;
    margin: 0;
    padding: 4px 8px;
    resize: none;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-0);
    color: var(--text);
    box-shadow: none;
    outline: none;
}
.mf-ai-row .btn { flex: 0 0 auto; }
.mf-edit-shell {
    display: none;
}
.mf-edit-shell[hidden] { display: none !important; }
body.mf-markup-editing .tab-bar,
body.mf-markup-editing .style-sidebar,
body.mf-markup-editing .frame-overlay,
body.mf-markup-editing .viewer-hint { display: none !important; }
body.mf-markup-editing .mf-edit-shell {
    position: fixed;
    top: var(--titlebar-h);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    background: var(--stage-bg);
}
body.mf-markup-editing #mf-edit-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
    background: var(--stage-bg);
}
.scrubber-slider-wrap {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 2px;
    min-width: 0;
}
.mf-scrub-marks {
    position: relative;
    height: 4px;
}
.mf-scrub-marks:empty { height: 0; }
.mf-scrub-mark {
    position: absolute;
    top: 0;
    height: 4px;
    background: var(--gold);
    border-radius: 1px;
    pointer-events: none;
}
.mf-markup-tracks {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 0 12px 6px;
    background: var(--bg-1);
}
.mf-markup-tracks:empty { display: none; }
.mf-markup-clear-row {
    display: flex;
    justify-content: flex-end;
}
.mf-markup-clear {
    padding: 0 8px;
    height: 18px;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-0);
    color: var(--text-2);
    font-size: 10px;
    cursor: pointer;
}
.mf-markup-clear:hover { color: var(--text-0); border-color: var(--text-2); }
.mf-markup-row {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 16px;
}
.mf-markup-x {
    width: 16px;
    height: 16px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--r);
    background: var(--bg-0);
    color: var(--text-2);
    font-size: 12px;
    line-height: 1;
    cursor: pointer;
    flex-shrink: 0;
}
.mf-markup-lane {
    position: relative;
    flex: 1;
    height: 8px;
}
.mf-markup-span {
    position: absolute;
    top: 0;
    height: 8px;
    min-width: 8px;
    background: color-mix(in srgb, var(--accent) 45%, var(--bg-3));
    border: 1px solid var(--border);
    border-radius: 2px;
    box-sizing: border-box;
}
.mf-markup-handle {
    position: absolute;
    top: -2px;
    width: 6px;
    height: 12px;
    background: var(--text-2);
    border-radius: 1px;
    cursor: ew-resize;
}
.mf-markup-handle.is-left { left: -2px; }
.mf-markup-handle.is-right { right: -2px; }


/* Explanatory hints show as a delayed hover tip on the control they describe. */
.hint-as-tip { display: none !important; }
#mf-hover-tip {
    position: fixed;
    z-index: 10000;
    max-width: 320px;
    padding: 8px 10px;
    background: var(--bg-3);
    color: var(--text-2);
    border: 1px solid var(--border-hover);
    border-radius: var(--r);
    font-size: 12px;
    line-height: 1.45;
    white-space: pre-line;
    pointer-events: none;
    opacity: 0;
    transform: translateY(2px);
    transition: opacity 0.12s ease, transform 0.12s ease;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
}
#mf-hover-tip.is-visible { opacity: 1; transform: none; }

.vid-engine-readout .vid-engine-current { color: var(--text-3); font-size: 12px; }
.vid-engine-readout .vid-engine-current strong { color: var(--text); font-weight: 600; }
.magic-wand-btn:disabled { opacity: 0.55; cursor: progress; }

/* Which way the object faces in each extra photo; hidden once a photo is set. */
.ai-model-mv-tile { position: relative; }
.ai-model-mv-guide {
    position: absolute;
    inset: 14% 18% 26%;
    width: 64%;
    height: 60%;
    object-fit: contain;
    opacity: 0.32;
    pointer-events: none;
}
.ai-model-mv-tile.has-image .ai-model-mv-guide { display: none; }
:root[data-theme="light"] .ai-model-mv-guide { filter: invert(1); opacity: 0.28; }

/* Home: Render, Mesh and Motion sections on one screen (no category tabs). */
#tools-grid.tools-grid {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 26px;
    width: 100%;
    max-width: min(1180px, 100%);
    padding: 26px 20px 32px;
    grid-template-columns: none;
}
.hub-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
}
.hub-section-title {
    margin: 0;
    font-size: clamp(26px, 3.2vw, 38px);
    line-height: 1;
    color: var(--gold);
    text-transform: lowercase;
}
.hub-section-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 300px));
    justify-content: center;
    gap: 14px;
    width: 100%;
    min-width: 0;
}
.hub-section-cards .tool-card { max-width: none; height: 100%; }
:root[data-theme="retro"] .hub-section-title { color: #000080; }
/* Status toolbar: meters centred, tool actions right, never on top of each other.
   The side columns grow to their content, so a long engine chip pushes the
   meters over instead of covering them. */
header.status-toolbar {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    column-gap: 12px;
    row-gap: 4px;
}
header.status-toolbar::before { content: ""; grid-column: 1; grid-row: 1; }
.status-toolbar .header-left {
    position: static;
    transform: none;
    grid-column: 2;
    grid-row: 1;
    width: auto;
    max-width: none;
    height: auto;
    min-width: 0;
    pointer-events: auto;
}
.status-toolbar .status-actions { grid-column: 3; grid-row: 1; justify-self: end; min-width: max-content; }
@media (max-width: 1100px) {
    header.status-toolbar { grid-template-columns: minmax(0, 1fr) auto; }
    header.status-toolbar::before { display: none; }
    .status-toolbar .header-left { grid-column: 1; justify-self: start; overflow: hidden; }
    .status-toolbar .status-actions { grid-column: 2; }
    .status-toolbar .res-gpu-name { display: none; }
}
@media (max-width: 820px) {
    .status-toolbar .res-meter-temp, .status-toolbar .res-meter-gpu { display: none; }
}
#vid-resx[hidden], #vid-veda-size[hidden], #vid-veda-size-hint[hidden] { display: none; }