/* ==========================================================================
   Kanki 3D — OPSMASTER DESIGN SYSTEM
   Tokens sourced from the OpsMaster design system (v1).
   Legacy variable names below are aliases onto OpsMaster tokens so the
   whole app inherits the system without per-component rewrites.
   ========================================================================== */

:root {
    /* ---- Motion: what UI transitions animate. Never layout (width, padding,
       position): that re-flows the page every frame and stutters. ---- */
    --ui-props: color, background-color, border-color, box-shadow, opacity, transform, filter, outline-color, fill, stroke;
    --ease-smooth: cubic-bezier(0.2, 0, 0, 1);

    /* ---- OpsMaster: color ---- */
    --ops-canvas: #060708;
    --ops-surface-100: #0a0b0d;
    --ops-surface-200: #1e2126;   /* panels: matches the category card body */
    --ops-surface-300: #272b31;   /* raised / inset areas inside panels */

    --ops-border-subtle: #333a41;
    --ops-border-strong: #454d55;

    --ops-ink: #f5f6f8;
    --ops-ink-muted: #8b9096;
    --ops-ink-faint: #6f7681;

    --ops-accent-primary: #ffffff;
    --ops-accent-primary-ink: #0c0d10;

    --ops-accent-danger: #e64a3f;
    --ops-accent-danger-muted: #301412;

    --ops-accent-success: #34d399;
    --ops-accent-success-muted: #0f2a1f;

    --ops-accent-neutral-dot: #454d55;
    --ops-focus-ring: #5ac8fa;
    --ops-scrim: rgba(3, 4, 5, 0.75);

    /* ---- OpsMaster: radius ---- */
    --ops-radius-sm: 8px;
    --ops-radius-md: 14px;
    --ops-radius-lg: 20px;
    --ops-radius-xl: 28px;
    --ops-radius-full: 9999px;

    /* ---- OpsMaster: spacing ---- */
    --ops-space-1: 4px;
    --ops-space-2: 8px;
    --ops-space-3: 12px;
    --ops-space-4: 16px;
    --ops-space-5: 20px;
    --ops-space-6: 24px;
    --ops-space-8: 32px;

    /* ---- OpsMaster: shadow ---- */
    --ops-shadow-card: 0 8px 24px rgba(0, 0, 0, 0.45);
    --ops-shadow-danger-glow: 0 0 32px rgba(230, 74, 63, 0.5);
    --ops-shadow-success-glow: 0 0 20px rgba(52, 211, 153, 0.35);

    /* ==== Legacy aliases → OpsMaster ==== */

    /* Surfaces in elevation order */
    --bg-base: var(--ops-surface-100);
    --bg-base-deep: var(--ops-canvas);
    --bg-surface: var(--ops-surface-200);
    --bg-surface-elevated: var(--ops-surface-300);

    /* "Selected" accent is white — never a status color */
    --cyan-glow: var(--ops-accent-primary);
    --cyan-dim: var(--ops-ink);
    --cyan-subtle: rgba(255, 255, 255, 0.10);
    --cyan-aura: rgba(255, 255, 255, 0.18);

    --burgundy-glow: var(--ops-accent-primary);
    --burgundy-core: var(--ops-accent-primary);
    --burgundy-dim: var(--ops-ink);
    --burgundy-subtle: rgba(255, 255, 255, 0.10);

    --purple-glow: var(--ops-accent-primary);
    --purple-subtle: rgba(255, 255, 255, 0.10);

    --gold-accent: var(--ops-ink-muted);
    --gold-light: var(--ops-ink);
    --gold-glow: rgba(139, 144, 150, 0.18);

    /* Status: danger / success only */
    --rose-accent: var(--ops-accent-danger);
    --rose-glow: rgba(230, 74, 63, 0.20);

    --emerald-accent: var(--ops-accent-success);
    --emerald-glow: rgba(52, 211, 153, 0.20);

    /* Panels: opaque instrument surfaces, no acrylic */
    --glass-blur: none;
    --glass-blur-sm: none;
    --glass-blur-heavy: none;

    --glass-header: var(--ops-surface-100);
    --glass-panel: var(--ops-surface-200);
    --glass-card: var(--ops-surface-200);
    --glass-card-hover: var(--ops-surface-300);
    --glass-card-active: var(--ops-surface-300);
    --glass-inset: var(--ops-canvas);
    --glass-pill: var(--ops-surface-300);
    --glass-pill-active: var(--ops-accent-primary);

    --hud-panel-bg: var(--ops-surface-200);
    --hud-panel-border: var(--ops-border-subtle);
    --hud-panel-radius: var(--ops-radius-lg);
    --hud-panel-shadow: var(--ops-shadow-card);
    --hud-status-on: var(--ops-accent-success);
    --hud-status-off: var(--ops-accent-neutral-dot);
    --hud-status-warn: var(--ops-accent-danger);

    --surface-light: var(--ops-ink);
    --surface-light-sub: #dfe2e6;
    --text-on-light: var(--ops-accent-primary-ink);
    --text-on-light-sub: #5b6169;

    /* Borders: calm chrome */
    --border-glass: var(--ops-border-subtle);
    --border-glass-subtle: #262c32;
    --border-glass-hover: var(--ops-border-strong);
    --border-glass-active: var(--ops-accent-primary);
    --border-neon: var(--ops-accent-primary);

    --shadow-glass-card: var(--ops-shadow-card);
    --shadow-glass-pill: var(--ops-shadow-card);
    --shadow-glow-cyan: var(--ops-shadow-card);
    --shadow-glow-gold: var(--ops-shadow-card);

    /* Text ladder */
    --text-main: var(--ops-ink);
    --text-sub: var(--ops-ink-muted);
    /* OpsMaster: ink-muted is the label color and clears 4.5:1 on
       surface-100/200; ink-faint is decorative/disabled only. This codebase
       uses --text-muted for real labels, so it maps to ink-muted. */
    --text-muted: var(--ops-ink-muted);
    --text-faint: var(--ops-ink-faint);
    --text-cyan: var(--ops-accent-primary);
    --text-gold: var(--ops-ink-muted);

    /* Radii */
    --radius-xs: var(--ops-radius-sm);
    --radius-sm: var(--ops-radius-sm);
    --radius-md: var(--ops-radius-md);
    --radius-lg: var(--ops-radius-lg);
    --radius-xl: var(--ops-radius-xl);
    --radius-capsule: var(--ops-radius-full);
    --radius-btn: var(--ops-radius-md);
    --radius-btn-sm: var(--ops-radius-sm);
    --radius-btn-lg: var(--ops-radius-md);

    --font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
    /* OpsMaster reserves mono for instrument readouts only; --font-hud is the
       app's heading/label face and therefore maps to the sans family. */
    --font-hud: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
    --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--font-sans);
    background-color: var(--ops-surface-100);
    background-image:
        radial-gradient(ellipse 90% 70% at 50% 55%, #0d0e11 0%, var(--ops-canvas) 100%);
    background-attachment: fixed;
    color: var(--text-main);
    overflow-x: hidden;
    min-height: 100vh;
    letter-spacing: -0.015em;
    -webkit-font-smoothing: antialiased;
}

/* Apple Fluid Scrollbar */
::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
::-webkit-scrollbar-track {
    background: transparent;
}
::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-capsule);
    backdrop-filter: blur(4px);
}
::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.60);
}

/* Procedural Wireframe Topography Canvas Backdrop */
.topography-bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    z-index: 0;
    opacity: 0.95;
}

.wizard-container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    width: 100vw;
}

/* ==========================================================================
   RODIN AI & APPLE GLASS HEADER
   ========================================================================== */
.wizard-header {
    height: 74px;
    background: var(--glass-header);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-bottom: 1px solid var(--border-glass);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    position: sticky;
    top: 0;
    z-index: 1000;
}

.brand {
    display: flex;
    align-items: center;
    gap: 14px;
    user-select: none;
}

.logo-gem {
    display: flex;
    align-items: center;
    justify-content: center;
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.5));
}

.kanki-main-svg-logo {
    width: 32px;
    height: 32px;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.brand:hover .kanki-main-svg-logo {
    transform: scale(1.12) translateY(-1px);
}

@keyframes gemFloat {
    0%, 100% { transform: translateY(0) scale(1); }
    50% { transform: translateY(-2px) scale(1.04); }
}

.brand-text h1 {
    font-family: var(--font-hud);
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 0.06em;
    color: var(--ops-ink);
    margin: 0;
    line-height: 1.1;
}

.brand-pill {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ops-ink);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 2px 8px;
    border-radius: var(--radius-capsule);
    display: inline-block;
    margin-top: 2px;
}

.header-center-title {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-hud);
    font-size: 13px;
    font-weight: 700;
    color: var(--ops-ink);
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    pointer-events: none;
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
    z-index: 5;
}

/* ==========================================================================
   PIPELINE SWITCHER (T 01 vs P 01) - APPLE SEGMENTED GLASS PILL
   ========================================================================== */
.pipeline-switcher-container {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(0, 0, 0, 0.40);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    padding: 4px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-glass);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);
}

.btn-pipeline-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    border-radius: var(--radius-btn-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-sub);
    font-family: var(--font-hud);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-pipeline-toggle:hover {
    color: var(--ops-ink);
    background: rgba(255, 255, 255, 0.05);
}

.btn-pipeline-toggle.active {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    color: var(--ops-ink);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.badge-pipeline {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: var(--radius-capsule);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.badge-t01 {
    background: rgba(255, 255, 255, 0.18);
    color: var(--gold-light);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.badge-p01 {
    background: rgba(255, 255, 255, 0.15);
    color: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

/* ==========================================================================
   STEPPER NAVIGATION (DEBUG TOOL) & HEADER PROFILE
   ========================================================================== */
.stepper-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--glass-pill, rgba(24, 24, 27, 0.6));
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    padding: 4px 6px;
    border-radius: var(--radius-capsule);
    border: 1px solid var(--hud-panel-border, rgba(255, 255, 255, 0.1));
    box-shadow: var(--hud-panel-shadow);
}

.stepper-nav.debug-nav-hidden {
    display: none !important;
}

.step-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: var(--radius-capsule);
    background: var(--ops-surface-200);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ops-ink-muted);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.step-item:hover {
    color: var(--ops-ink);
    background: var(--ops-surface-300);
    border-color: rgba(255, 255, 255, 0.16);
}

.step-item.active {
    background: rgba(255, 255, 255, 0.14);
    backdrop-filter: blur(4px);
    color: var(--ops-ink);
    box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    border: 1px solid var(--ops-accent-primary);
}

.step-item.completed {
    color: var(--text-sub);
    border-color: rgba(52, 211, 153, 0.25);
}

/* Header Actions & Profile */
.header-status {
    display: flex;
    align-items: center;
    gap: 10px;
}

.pulse-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hud-status-on);
    box-shadow: 0 0 4px var(--hud-status-on);
    animation: pulseGlow 2s infinite ease-in-out;
}

@keyframes pulseGlow {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.4; transform: scale(0.75); }
}

.btn-header-action {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(24, 24, 27, 0.6);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--ops-ink);
    padding: 7px 14px;
    border-radius: var(--radius-capsule);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: none;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn-header-action:hover {
    background: var(--ops-surface-300);
    color: var(--ops-ink);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 12px rgba(0, 0, 0, 0.45);
}

/* Header Profile Widget */
.header-profile-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ops-surface-200);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 4px 10px 4px 5px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.35);
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
}

.header-profile-btn:hover {
    background: var(--ops-surface-300);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
}

.header-profile-btn:hover {
    background: var(--ops-surface-300);
    border-color: rgba(255, 255, 255, 0.40);
    box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.profile-avatar-wrap {
    position: relative;
    width: 26px;
    height: 26px;
    border-radius: 50%;
}

.profile-avatar-inner {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var(--ops-accent-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ops-accent-primary-ink);
    font-weight: 800;
    font-size: 11px;
    box-shadow: 0 2px 6px rgba(255, 255, 255, 0.35);
}

.profile-avatar-letter {
    line-height: 1;
}

/* Google account photo / signed-out icon inside the avatars */
.profile-avatar-inner,
.profile-hero-avatar {
    overflow: hidden;
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.profile-avatar-generic {
    width: 60%;
    height: 60%;
}

.profile-status-indicator {
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    border: 1.5px solid var(--ops-surface-200);
    background: var(--ops-accent-success);
}

.profile-meta {
    display: flex;
    align-items: center;
    gap: 6px;
}

.profile-username {
    color: var(--ops-ink);
    font-size: 12px;
    font-weight: 600;
}

.profile-plan-pill {
    font-size: 9px;
    font-weight: 800;
    padding: 2px 6px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.profile-plan-pill.pro {
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.40);
    color: var(--ops-accent-primary);
}

.profile-chevron-svg {
    width: 12px;
    height: 12px;
    color: var(--ops-ink-muted);
    transition: transform 0.2s ease, color 0.2s ease;
}

.header-profile-btn:hover .profile-chevron-svg {
    color: var(--ops-ink);
    transform: translateY(1px);
}

/* Switch Toggle Component */
.switch-toggle input:checked + .slider-toggle-round {
    background-color: var(--ops-accent-primary);
    border-color: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
}

.switch-toggle input:checked + .slider-toggle-round:before {
    transform: translateX(20px);
}

.slider-toggle-round {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.20);
    transition-property: var(--ui-props);
    transition-duration: .3s;
    transition-timing-function: ease;
    border-radius: 24px;
}

.slider-toggle-round:before {
    position: absolute;
    content: "";
    height: 18px;
    width: 18px;
    left: 2px;
    bottom: 2px;
    background-color: var(--ops-ink);
    transition-property: var(--ui-props);
    transition-duration: .3s;
    transition-timing-function: ease;
    border-radius: 50%;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

/* ==========================================================================
   PROFILE & SUBSCRIPTION SYSTEM MODAL STYLES
   ========================================================================== */
.modal-profile-window {
    background: var(--ops-surface-200) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.85), 0 0 0 rgba(0,0,0,0) !important;
}

.profile-icon-box {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.30);
    display: flex;
    align-items: center;
    justify-content: center;
}

.profile-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    background: var(--ops-surface-200);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.profile-hero-left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.profile-hero-avatar-wrap {
    position: relative;
}

.profile-hero-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ops-accent-primary);
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ops-accent-primary-ink);
    font-size: 22px;
    font-weight: 800;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.4);
}

.profile-avatar-edit-btn {
    position: absolute;
    bottom: -2px;
    right: -2px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--ops-surface-200);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: var(--ops-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.profile-avatar-edit-btn:hover {
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    border-color: var(--ops-accent-primary);
}

.profile-hero-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-hero-name-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.profile-hero-displayname {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ops-ink);
}

.profile-hero-badge.verified {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ops-accent-success);
    background: rgba(52, 211, 153, 0.12);
    border: 1px solid rgba(52, 211, 153, 0.30);
    padding: 1px 7px;
    border-radius: 4px;
    letter-spacing: 0.04em;
}

.profile-hero-handle {
    font-size: 12px;
    color: var(--text-muted);
}

.profile-hero-tags {
    display: flex;
    gap: 6px;
    margin-top: 4px;
}

.profile-tag-item {
    font-size: 10px;
    font-weight: 600;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--ops-ink-muted);
    padding: 2px 7px;
    border-radius: 4px;
}

/* Subscription Active Card */
.subscription-active-card {
    background: var(--ops-surface-200);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-md);
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.10);
    position: relative;
    overflow: hidden;
}

.subscription-active-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; height: 3px;
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
}

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

.sub-tier-pill {
    font-size: 9.5px;
    font-weight: 800;
    color: var(--ops-accent-primary);
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.30);
    padding: 2px 7px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 4px;
}

.sub-tier-title {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    color: var(--ops-ink);
}

.sub-tier-price {
    display: flex;
    align-items: baseline;
    gap: 4px;
}

.price-val {
    font-size: 22px;
    font-weight: 800;
    color: var(--ops-ink);
}

.price-period {
    font-size: 12px;
    color: var(--text-muted);
}

.sub-features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: var(--radius-sm);
}

.sub-feature-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--ops-ink);
}

.sub-feature-item .check-icon {
    color: var(--ops-accent-success);
    font-weight: 800;
    font-size: 12px;
}

.sub-quota-box {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 4px;
}

.sub-quota-header {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted);
}

.quota-counter {
    color: var(--ops-ink);
    font-weight: 600;
}

.quota-bar-track {
    width: 100%;
    height: 7px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 4px;
    overflow: hidden;
}

.quota-bar-fill {
    height: 100%;
    background: var(--ops-accent-primary);
    border-radius: 4px;
    color: var(--ops-accent-primary-ink);
}

.quota-footer {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: var(--text-sub);
}

.quota-reset {
    color: var(--text-muted);
}

.sub-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 4px;
}

.profile-settings-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.profile-section-title {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    color: var(--ops-ink-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.profile-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.profile-input-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.profile-input-group label {
    font-size: 11.5px;
    color: var(--text-sub);
    font-weight: 500;
}

/* ==========================================================================
   WORKSPACE MAIN LAYOUT & CARDS
   ========================================================================== */
.wizard-main {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 12px 36px 0 36px;
    max-width: 1560px;
    margin: 0 auto;
    width: 100%;
}

.wizard-step {
    display: none;
    animation: stepFadeIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* ==========================================================================
   UNIVERSAL INSTRUMENT FRAME
   One static frame shared by every page, so the app always reads like the
   same tablet-style device shell. Individual steps no longer draw their own.
   ========================================================================== */
.wizard-step.active {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: calc(100vh - 114px);
    min-height: 620px;
    background: transparent;
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-xl);
    box-shadow: var(--ops-shadow-card);
    overflow: hidden;
    position: relative;
}

@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Studio Modular HUD Card */
.studio-card {
    background: var(--hud-panel-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--hud-panel-border);
    border-radius: var(--hud-panel-radius);
    box-shadow: var(--hud-panel-shadow);
    padding: 28px 32px;
    position: relative;
    overflow: hidden;
}

.studio-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25) 30%, rgba(255, 255, 255, 0.35) 70%, transparent);
}

.card-header h2 {
    font-family: var(--font-hud);
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--ops-ink);
    margin-bottom: 6px;
}

.card-header p {
    font-size: 13px;
    color: var(--text-sub);
    line-height: 1.5;
}

/* Input Mode Tabs */
.input-mode-tabs {
    display: flex;
    gap: 8px;
    background: rgba(0, 0, 0, 0.35);
    padding: 5px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-glass-subtle);
    margin: 20px 0 16px 0;
    width: fit-content;
}

.btn-mode-tab {
    padding: 8px 18px;
    border-radius: var(--radius-btn-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn-mode-tab.active {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(4px);
    color: var(--ops-ink);
    border: 1px solid rgba(255, 255, 255, 0.18);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

/* Presets Bar */
.presets-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.presets-label {
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.btn-preset-pill {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    padding: 6px 14px;
    border-radius: var(--radius-btn-sm);
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    backdrop-filter: blur(4px);
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn-preset-pill:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--ops-ink);
    border-color: rgba(255, 255, 255, 0.20);
    transform: translateY(-1px);
}

/* Apple Drop Zone */
.drop-zone {
    border: 2px dashed rgba(255, 255, 255, 0.14);
    background: rgba(10, 14, 24, 0.40);
    backdrop-filter: blur(5px);
    border-radius: var(--radius-md);
    padding: 40px 24px;
    text-align: center;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
}

.drop-zone:hover {
    border-color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.03);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
}

.drop-icon {
    font-size: 36px;
    margin-bottom: 12px;
    filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.5));
}

.drop-content h3 {
    font-family: var(--font-hud);
    font-size: 16px;
    font-weight: 700;
    color: var(--ops-ink);
    margin-bottom: 4px;
}

.drop-content p {
    font-size: 13px;
    color: var(--text-muted);
}

.browse-link {
    color: var(--ops-ink);
    text-decoration: underline;
    font-weight: 600;
}

.upload-preview {
    max-width: 320px;
    margin: 0 auto;
    position: relative;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border-glass);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6);
}

.upload-preview img {
    width: 100%;
    display: block;
}

.btn-remove-preview {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--ops-ink);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    backdrop-filter: blur(4px);
}

.upload-preview.hidden {
    display: none;
}

/* Action Bar */
.step-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid var(--border-glass-subtle);
}

.btn-primary-action,
.hero-primary-cta,
.studio-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    border: 1px solid rgba(255, 255, 255, 0.35);
    padding: 8px 18px 8px 14px;
    border-radius: var(--radius-btn);
    font-family: var(--font-hud);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition-property: var(--ui-props);
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    text-decoration: none;
    position: relative;
    user-select: none;
}

.btn-primary-action:hover:not(:disabled),
.hero-primary-cta:hover:not(:disabled),
.studio-primary-btn:hover:not(:disabled) {
    transform: translateY(-1.5px) scale(1.015);
    background: var(--ops-accent-primary);
    border-color: rgba(255, 255, 255, 0.60);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    color: var(--ops-accent-primary-ink);
}

.btn-primary-action:active:not(:disabled),
.hero-primary-cta:active:not(:disabled),
.studio-primary-btn:active:not(:disabled) {
    transform: translateY(0.5px) scale(0.99);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.btn-primary-action:disabled,
.hero-primary-cta:disabled,
.studio-primary-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
    box-shadow: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border-color: rgba(255, 255, 255, 0.08);
    transform: none;
}

.btn-secondary-action {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--ops-surface-200);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--ops-ink);
    padding: 8px 18px;
    border-radius: var(--radius-btn);
    font-family: inherit;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.35);
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
    text-decoration: none;
    user-select: none;
}

.btn-secondary-action:hover {
    background: var(--ops-surface-300);
    color: var(--ops-ink);
    border-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* ==========================================================================
   STEP 3: RODIN 3D VIEWPORT & HOLOGRAPHIC SYNTHESIZER
   ========================================================================== */
.studio-3d-layout {
    display: grid;
    grid-template-columns: 1fr 360px;
    gap: 24px;
    min-height: calc(100vh - 160px);
}

.viewport-container {
    position: relative;
    background: radial-gradient(circle at 50% 50%, var(--ops-surface-100) 0%, var(--ops-canvas) 100%);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass-card);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 580px;
}

.three-viewport-canvas {
    width: 100% !important;
    height: 100% !important;
    display: block;
    outline: none;
}

/* Floating Top HUD (Telemetry Chip) */
.viewport-top-hud {
    position: absolute;
    top: 18px;
    left: 20px;
    right: 20px;
    display: flex;
    justify-content: space-between;
    pointer-events: none;
    z-index: 20;
}

.hud-pill-group {
    display: flex;
    gap: 8px;
    pointer-events: auto;
}

.hud-stat-pill {
    background: rgba(16, 18, 20, 0.65);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-glass);
    padding: 6px 14px;
    border-radius: var(--radius-capsule);
    font-family: var(--font-hud);
    font-size: 11px;
    color: var(--text-sub);
    box-shadow: var(--shadow-glass-pill);
    display: flex;
    align-items: center;
    gap: 6px;
}

.hud-stat-pill strong {
    color: var(--ops-ink);
    font-weight: 700;
}

/* Floating Bottom HUD (Apple Liquid Glass Dock) */
.viewport-bottom-hud {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(12, 16, 28, 0.65);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid rgba(255, 255, 255, 0.14);
    padding: 6px;
    border-radius: var(--radius-btn);
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.7), 
                inset 0 1px 1px rgba(255, 255, 255, 0.25), 
                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    z-index: 20;
}

.btn-hud-tool {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-sub);
    padding: 8px 16px;
    border-radius: var(--radius-btn-sm);
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-hud-tool:hover {
    color: var(--ops-ink);
    background: rgba(255, 255, 255, 0.08);
}

.btn-hud-tool.active {
    background: rgba(255, 255, 255, 0.16);
    color: var(--ops-ink);
    border-color: rgba(255, 255, 255, 0.22);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   HOLOGRAPHIC 3D SYNTHESIZER OVERLAY (TRIPO/RODIN REAL-TIME CREATION EFFECT)
   ========================================================================== */
.hologram-generation-overlay {
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at 50% 50%, rgba(8, 12, 24, 0.45) 0%, rgba(6, 7, 8, 0.85) 100%);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: none;
    flex-direction: column;
    justify-content: space-between;
    padding: 24px;
    z-index: 30;
    pointer-events: none;
    overflow: hidden;
}

.hologram-generation-overlay.active {
    display: flex;
}

/* Sweeping Vertical Laser Scanline
   A full-height layer moved with transform (its % = the overlay height);
   the visible 3px line is its ::before. Animating `top` re-laid-out the
   overlay every frame. */
.holo-scanline {
    position: absolute;
    inset: 0;
    pointer-events: none;
    animation: sweepScan 3s infinite ease-in-out;
    opacity: 0.85;
}

.holo-scanline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--cyan-glow) 30%, #ffffff 50%, var(--cyan-glow) 70%, transparent);
    box-shadow: 0 0 24px var(--cyan-glow), 0 0 40px var(--cyan-glow);
}

@keyframes sweepScan {
    0% { transform: translateY(5%); opacity: 0.2; }
    50% { transform: translateY(90%); opacity: 0.9; }
    100% { transform: translateY(5%); opacity: 0.2; }
}

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

.holo-title-group h3 {
    font-family: var(--font-hud);
    font-size: 15px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--ops-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.holo-subtitle {
    font-family: var(--font-hud);
    font-size: 11px;
    color: var(--cyan-glow);
    margin-top: 3px;
    letter-spacing: 0.04em;
}

.holo-telemetry-badge {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.18);
    padding: 6px 14px;
    border-radius: var(--radius-capsule);
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 800;
    color: var(--ops-ink);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
}

/* Center Holographic Gyro Radar */
.holo-center-radar {
    align-self: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.radar-ring {
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 2px dashed rgba(255, 255, 255, 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    animation: rotateRing 12s infinite linear;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
}

.radar-inner-ring {
    width: 108px;
    height: 108px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.5);
    animation: rotateRingRev 8s infinite linear;
}

@keyframes rotateRing {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes rotateRingRev {
    from { transform: rotate(360deg); }
    to { transform: rotate(0deg); }
}

.radar-pct {
    position: absolute;
    font-family: var(--font-hud);
    font-size: 26px;
    font-weight: 800;
    color: var(--ops-ink);
    text-shadow: 0 0 16px var(--cyan-glow);
}

.holo-bottom-hud {
    background: rgba(16, 18, 20, 0.70);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--border-glass);
    padding: 14px 20px;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-glass-card);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.holo-stage-text {
    font-family: var(--font-hud);
    font-size: 13px;
    font-weight: 700;
    color: var(--ops-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.holo-metric-item {
    font-family: var(--font-hud);
    font-size: 11px;
    color: var(--text-sub);
    display: flex;
    gap: 6px;
}

.holo-metric-item strong {
    color: var(--cyan-glow);
}

/* ==========================================================================
   STUDIO SIDEBAR & CONTROLS
   ========================================================================== */
.studio-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sidebar-panel {
    background: var(--hud-panel-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--hud-panel-border);
    border-radius: var(--hud-panel-radius);
    padding: 16px 18px;
    box-shadow: var(--hud-panel-shadow);
}

.sidebar-panel h4 {
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-sub);
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--hud-panel-border);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    text-transform: uppercase;
}

.sidebar-panel h4::after {
    content: '';
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: rotate(45deg);
    margin-left: auto;
    opacity: 0.7;
}

.control-slider-group {
    margin-bottom: 14px;
}

.slider-label-row {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-sub);
    margin-bottom: 6px;
    font-weight: 600;
}

.cyber-slider {
    width: 100%;
    -webkit-appearance: none;
    appearance: none;
    height: 5px;
    border-radius: var(--radius-capsule);
    background: rgba(255, 255, 255, 0.12);
    outline: none;
    transition: background 0.2s;
}

.cyber-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.cyber-slider::-webkit-slider-thumb:hover {
    transform: scale(1.25);
}

/* Material Presets Pills */
.metal-presets-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 6px;
}

.btn-metal-preset {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid var(--border-glass);
    padding: 8px 6px;
    border-radius: var(--radius-sm);
    color: var(--text-sub);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    backdrop-filter: blur(4px);
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn-metal-preset:hover {
    background: rgba(255, 255, 255, 0.10);
    color: var(--ops-ink);
    border-color: rgba(255, 255, 255, 0.20);
}

.btn-metal-preset.active {
    background: rgba(255, 255, 255, 0.18);
    border-color: var(--ops-ink);
    color: var(--ops-ink);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.swatch-circle {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

.swatch-gold { background: linear-gradient(135deg, #fbbf24, #d97706); }
.swatch-rose { background: linear-gradient(135deg, #f4b8a8, #b76e51); }
.swatch-silver { background: linear-gradient(135deg, #f8fafc, #94a3b8); }

/* ==========================================================================
   STEP 4: FIT & CHAIN STUDIO
   ========================================================================== */
.chain-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
    gap: 12px;
    margin-top: 6px;
}

.chain-card {
    background: rgba(14, 18, 30, 0.55);
    backdrop-filter: var(--glass-blur-sm);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 12px 10px;
    text-align: center;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.chain-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.chain-card.active {
    border-color: var(--ops-ink);
    background: rgba(255, 255, 255, 0.12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* ==========================================================================
   FROSTED GLASS MODALS (SETTINGS & UV ATLAS)
   ========================================================================== */
.studio-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(6, 7, 8, 0.75);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(4px) saturate(180%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 2000;
    padding: 24px;
}

.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(6, 7, 8, 0.82);
    backdrop-filter: blur(8px) saturate(180%);
    -webkit-backdrop-filter: blur(4px) saturate(180%);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    padding: 24px;
}

.modal-backdrop.active {
    display: flex !important;
}

.modal-backdrop.hidden {
    display: none !important;
}

.modal-window {
    background: var(--ops-surface-100);
    border: 1px solid var(--ops-border-strong);
    border-radius: var(--radius-md);
    box-shadow: var(--ops-shadow-elevated);
    position: relative;
    animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    overflow: hidden;
}

.studio-modal-overlay.active {
    display: flex;
}

.studio-modal-card {
    background: rgba(18, 24, 40, 0.70);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-xl);
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.8), 
                inset 0 1px 1px rgba(255, 255, 255, 0.25), 
                inset 0 0 0 1px rgba(255, 255, 255, 0.05);
    max-width: 640px;
    width: 100%;
    padding: 32px;
    position: relative;
    animation: modalPop 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modalPop {
    from { opacity: 0; transform: scale(0.94); }
    to { opacity: 1; transform: scale(1); }
}

.modal-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.modal-header-row h3 {
    font-family: var(--font-hud);
    font-size: 18px;
    font-weight: 800;
    color: var(--ops-ink);
}

.btn-close-modal {
    background: var(--ops-surface-300) !important;
    border: 1px solid var(--ops-border-subtle) !important;
    color: var(--ops-ink-muted) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-btn-sm) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    margin-left: 16px !important;
    transition-property: var(--ui-props) !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease !important;
}

.btn-close-modal:hover {
    background: var(--ops-accent-danger-muted) !important;
    border-color: var(--ops-accent-danger) !important;
    color: var(--ops-accent-danger) !important;
    transform: none !important;
}
/* ==========================================================================
   ADDITIONAL APPLE FROSTED GLASS & RODIN STUDIO COMPONENTS
   ========================================================================== */

/* Step 4: Fit & Chain Layout */
.fit-studio-layout {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 24px;
    min-height: 560px;
}

.fit-viewport-container {
    position: relative;
    background: radial-gradient(circle at 50% 50%, var(--ops-surface-100) 0%, var(--ops-canvas) 100%);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-glass-card);
    overflow: hidden;
    min-height: 560px;
}

/* Step 5: Export Summary & Stream Packaging */
.export-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 20px 0;
}

.export-card-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.export-telemetry-box {
    background: rgba(16, 18, 20, 0.6);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 18px;
    font-family: var(--font-hud);
    font-size: 12px;
    line-height: 1.8;
}

.export-telemetry-row {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    padding: 6px 0;
}

.export-telemetry-row:last-child {
    border-bottom: none;
}

.export-telemetry-row span {
    color: var(--text-sub);
}

.export-telemetry-row strong {
    color: var(--cyan-glow);
}

.btn-export-download {
    background: linear-gradient(135deg, var(--ops-accent-success) 0%, var(--ops-accent-success) 100%);
    color: var(--ops-ink);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 14px 28px;
    border-radius: var(--radius-btn);
    font-family: var(--font-hud);
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 8px 24px rgba(52, 211, 153, 0.35);
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

.btn-export-download:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(52, 211, 153, 0.55);
}

/* Step 6: UV & Mesh Debug Studio */
.uv-debug-layout {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 24px;
    margin: 20px 0;
}

.uv-canvas-container {
    background: #000;
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

#uv-preview-canvas {
    width: 100% !important;
    height: 100% !important;
    image-rendering: pixelated;
}

.lod-pill-selector {
    display: flex;
    gap: 6px;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-glass-subtle);
    width: fit-content;
    margin-bottom: 12px;
}

.btn-lod-pill {
    padding: 6px 14px;
    border-radius: var(--radius-btn-sm);
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-sub);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn-lod-pill.active {
    background: rgba(255, 255, 255, 0.14);
    color: var(--ops-ink);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

/* Form Groups & Glass Inputs */
.glass-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.glass-input-group label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-sub);
    font-family: var(--font-hud);
}

.glass-input {
    background: rgba(16, 18, 20, 0.6);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
    color: var(--ops-ink);
    font-family: inherit;
    font-size: 13px;
    outline: none;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.glass-input:focus {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}

/* Notification Toast */
.cyber-toast {
    position: fixed;
    bottom: 24px;
    right: 24px;
    background: rgba(14, 18, 32, 0.90);
    backdrop-filter: var(--glass-blur-heavy);
    -webkit-backdrop-filter: var(--glass-blur-heavy);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    padding: 14px 20px;
    color: var(--ops-ink);
    font-family: var(--font-hud);
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    z-index: 3000;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes toastSlideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
    margin-bottom: 20px;
}

.modal-header h3 {
    font-family: var(--font-hud);
    font-size: 18px;
    font-weight: 800;
    color: var(--ops-ink);
    display: flex;
    align-items: center;
    gap: 8px;
}

.uv-display-toggle-bar {
    display: flex;
    gap: 6px;
    background: rgba(0, 0, 0, 0.35);
    padding: 4px;
    border-radius: var(--radius-btn);
    border: 1px solid rgba(255, 255, 255, 0.05);
    width: fit-content;
    margin-bottom: 16px;
}

.btn-uv-toggle {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-sub);
    padding: 6px 14px;
    border-radius: var(--radius-btn-sm);
    font-size: 11px;
    font-weight: 700;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn-uv-toggle.active {
    background: rgba(255, 255, 255, 0.14);
    color: var(--ops-ink);
    border-color: rgba(255, 255, 255, 0.2);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.uv-inspector-canvas-box {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    max-width: 480px;
    margin: 0 auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: #000;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.7);
}

.uv-inspector-canvas-box img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
}


/* ==========================================================================
   HYPER3D / RODIN HERO & FLOATING GENERATOR DOCK STYLES
   ========================================================================== */
.hyper-hero-container {
    display: grid;
    grid-template-columns: 1.08fr 480px;
    gap: 36px;
    align-items: center;
    min-height: calc(100vh - 90px);
    max-width: 1400px;
    margin: 0 auto;
    padding: 12px 36px;
    position: relative;
}

@media (max-width: 1100px) {
    .hyper-hero-container {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 16px;
    }
}

.hyper-hero-left {
    display: flex;
    flex-direction: column;
    justify-content: center;
    z-index: 10;
}

.hyper-badge-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: var(--radius-capsule);
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.12em;
    color: var(--ops-ink-muted);
    margin-bottom: 18px;
    width: fit-content;
}

.hyper-title {
    font-family: var(--font-sans);
    font-size: 50px;
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.035em;
    color: var(--ops-ink);
    margin-bottom: 16px;
}

.hyper-title-gradient {
    background: linear-gradient(135deg, var(--ops-ink) 40%, var(--ops-ink-muted) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.hyper-subtitle {
    font-size: 14.5px;
    line-height: 1.6;
    color: var(--ops-ink-muted);
    max-width: 520px;
    margin-bottom: 26px;
}

.hyper-cta-row {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}

.hyper-btn-start {
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    font-family: var(--font-sans);
    font-weight: 800;
    font-size: 14px;
    padding: 12px 28px;
    border-radius: var(--radius-btn-lg);
    border: 1px solid rgba(255, 255, 255, 0.35);
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition-property: var(--ui-props);
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.hyper-btn-start:hover {
    transform: translateY(-1.5px) scale(1.015);
    background: var(--ops-accent-primary);
    border-color: rgba(255, 255, 255, 0.60);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    color: var(--ops-accent-primary-ink);
}

.hyper-quick-stats {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-capsule);
    backdrop-filter: blur(4px);
}

.quick-stat-item {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.stat-num {
    font-family: var(--font-hud);
    font-size: 12px;
    font-weight: 800;
    color: var(--ops-ink);
}

.stat-lbl {
    font-size: 9.5px;
    color: var(--ops-ink-muted);
}

.stat-divider {
    width: 1px;
    height: 16px;
    background: rgba(255, 255, 255, 0.1);
}

/* Hyper3D Right Side Aurora & Dock */
.hyper-hero-right {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hyper-aurora-glow {
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(190, 18, 60, 0.35) 0%, rgba(136, 19, 55, 0.18) 45%, transparent 70%);
    filter: blur(65px);
    pointer-events: none;
    z-index: 1;
}

.hyper-dock-layout {
    position: relative;
    z-index: 10;
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.hyper-glass-card {
    width: 100%;
    max-width: 480px;
    background: rgba(14, 18, 28, 0.90);
    backdrop-filter: blur(12px) saturate(190%);
    -webkit-backdrop-filter: blur(4px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 18px;
    padding: 13px 14px;
    box-shadow: 0 20px 40px -10px rgba(0, 0, 0, 0.85), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    transition-property: var(--ui-props);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.hyper-tool-dock {
    display: none !important;
}

.hyper-card-tabs {
    display: flex;
    gap: 6px;
    padding: 3px;
    background: rgba(0, 0, 0, 0.45);
    border-radius: var(--radius-capsule);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.hyper-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 10px;
    border-radius: var(--radius-capsule);
    background: transparent;
    border: none;
    color: var(--ops-ink-muted);
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.04em;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.hyper-tab-btn .tab-svg {
    width: 13px;
    height: 13px;
}

.hyper-tab-btn:hover {
    color: var(--ops-ink);
}

.hyper-tab-btn.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ops-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.hyper-presets-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 7px;
    flex-wrap: wrap;
}

.hyper-presets-label {
    font-family: var(--font-hud);
    font-size: 10px;
    font-weight: 700;
    color: var(--ops-ink-muted);
    letter-spacing: 0.04em;
}

.btn-preset-pill {
    padding: 2.5px 8px;
    border-radius: var(--radius-capsule);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
    color: var(--ops-ink);
    font-size: 10.5px;
    font-weight: 600;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn-preset-pill:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--ops-ink);
}

/* 4-SLOT DROPZONE GRID */
.multi-dropzone-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
}

.hyper-dropzone {
    width: 100%;
    aspect-ratio: 1 / 1;
    height: 84px;
    min-height: unset;
    background: radial-gradient(circle at 50% 30%, rgba(26, 32, 48, 0.45) 0%, rgba(10, 13, 20, 0.75) 100%);
    border: 1px dashed rgba(255, 255, 255, 0.16);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    overflow: hidden;
    padding: 4px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.hyper-dropzone:hover, .hyper-dropzone.dragover {
    border-style: solid;
    border-color: rgba(255, 255, 255, 0.7);
    background: radial-gradient(circle at 50% 30%, rgba(255, 255, 255, 0.12) 0%, rgba(16, 18, 20, 0.85) 100%);
    box-shadow: 0 0 16px rgba(255, 255, 255, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    transform: translateY(-1px);
}

.dropzone-slot-header {
    position: absolute;
    top: 4px;
    left: 4px;
    z-index: 5;
    pointer-events: none;
}

.dropzone-slot-tag {
    font-family: var(--font-hud);
    font-size: 8px;
    font-weight: 800;
    padding: 1.5px 5px;
    border-radius: 4px;
    letter-spacing: 0.05em;
    display: inline-flex;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
}

.dropzone-slot-tag.tag-front {
    background: rgba(255, 255, 255, 0.18);
    color: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.dropzone-slot-tag.tag-side {
    background: rgba(255, 255, 255, 0.18);
    color: var(--ops-ink);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.dropzone-slot-tag.tag-back {
    background: rgba(255, 255, 255, 0.18);
    color: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.45);
}

.hyper-drop-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    margin-top: 6px;
    gap: 1px;
}

.hyper-plus-icon {
    font-size: 18px;
    font-weight: 300;
    color: var(--ops-ink-muted);
    line-height: 1;
    margin-bottom: 2px;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.hyper-dropzone:hover .hyper-plus-icon {
    color: var(--ops-accent-primary);
    transform: scale(1.15);
}

.hyper-drop-hint {
    font-family: var(--font-sans);
    font-size: 9px;
    font-weight: 600;
    color: var(--ops-ink-muted);
    text-align: center;
    letter-spacing: 0.01em;
}

.hyper-preview-box {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    background: #080a0f;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.hyper-preview-box.hidden,
.hidden {
    display: none !important;
}

.hyper-preview-box img:not([src]),
.hyper-preview-box img[src=""] {
    display: none !important;
}

.hyper-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.btn-remove-preview {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--ops-ink);
    font-size: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.15s;
    transition-timing-function: ease;
    z-index: 6;
}

.btn-remove-preview:hover {
    background: var(--ops-accent-danger);
    border-color: var(--ops-accent-danger);
    transform: scale(1.08);
}

/* MULTI-VIEW AI ASSISTANT BAR */
.turnaround-assistant-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 7px;
    padding: 7px 10px;
    background: linear-gradient(135deg, rgba(14, 19, 32, 0.85) 0%, rgba(20, 26, 45, 0.7) 100%);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 10px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06), 0 3px 10px rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(5px);
}

.turnaround-assistant-info {
    display: flex;
    align-items: center;
    gap: 7px;
    min-width: 0;
    flex: 1;
}

.assistant-icon {
    width: 16px;
    height: 16px;
    color: var(--ops-accent-primary);
    flex-shrink: 0;
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.4));
}

.assistant-text-col {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.assistant-title {
    font-family: var(--font-hud);
    font-size: 10.5px;
    font-weight: 800;
    color: var(--ops-ink);
    letter-spacing: 0.03em;
    line-height: 1.2;
}

.assistant-sub {
    font-size: 9px;
    color: var(--ops-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.2;
}

.btn-assistant-action {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.22) 0%, rgba(255, 255, 255, 0.22) 100%);
    border: 1px solid rgba(255, 255, 255, 0.55);
    color: var(--ops-ink);
    font-family: var(--font-hud);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.03em;
    padding: 5px 10px;
    border-radius: 7px;
    cursor: pointer;
    white-space: nowrap;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    flex-shrink: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.btn-assistant-action:hover {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.38) 100%);
    border-color: var(--ops-accent-primary);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
    transform: translateY(-1px);
}

/* PROMPT AREA */
.hyper-prompt-area {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.hyper-textarea {
    width: 100%;
    height: 90px;
    padding: 8px 10px;
    background: rgba(8, 11, 18, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--ops-ink);
    font-family: inherit;
    font-size: 11.5px;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
}

.hyper-textarea:focus {
    border-color: var(--ops-accent-primary);
}

/* 3D GENERATION ENGINES DECK (2x2 GRID) */
.engine-selector-deck {
    background: rgba(10, 14, 24, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    padding: 9px 11px;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.06), 0 3px 12px rgba(0, 0, 0, 0.2);
}

.engine-selector-title-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 7px;
}

.engine-selector-heading {
    font-family: var(--font-hud);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.07em;
    color: var(--ops-ink-muted);
    display: flex;
    align-items: center;
    gap: 6px;
}

.engine-indicator-dot {
    width: 5px;
    height: 5px;
    background: var(--ops-accent-primary);
    border-radius: 50%;
    box-shadow: 0 0 7px var(--ops-accent-primary);
    animation: pulseGlow 2s infinite ease-in-out;
}

.engine-active-chip {
    font-family: var(--font-hud);
    font-size: 8.5px;
    font-weight: 800;
    padding: 1.5px 7px;
    border-radius: var(--radius-capsule);
    background: rgba(255, 255, 255, 0.15);
    color: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.35);
    letter-spacing: 0.04em;
}

.engine-selector-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
}

.engine-pill-btn {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 8px;
    text-align: left;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    gap: 2px;
    position: relative;
    user-select: none;
}

.engine-pill-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.18);
    transform: translateY(-1px);
}

.engine-pill-btn.active {
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(30, 41, 59, 0.5) 100%);
    border-color: var(--ops-accent-primary);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.engine-pill-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1px;
}

.engine-badge-tag {
    font-family: var(--font-hud);
    font-size: 7.5px;
    font-weight: 800;
    padding: 1.5px 5px;
    border-radius: 3px;
    letter-spacing: 0.04em;
    display: inline-block;
}

.engine-badge-tag.tfinal { background: rgba(255, 255, 255, 0.22); color: var(--ops-accent-primary); border: 1px solid rgba(255, 255, 255, 0.55); }
.engine-badge-tag.singletest { background: rgba(255, 255, 255, 0.22); color: var(--ops-accent-primary); border: 1px solid rgba(255, 255, 255, 0.55); }
.engine-badge-tag.kankiv1 { background: rgba(255, 255, 255, 0.22); color: var(--ops-accent-primary); border: 1px solid rgba(255, 255, 255, 0.55); }
.engine-badge-tag.tripotest { background: rgba(255, 255, 255, 0.22); color: var(--ops-ink-muted); border: 1px solid rgba(255, 255, 255, 0.55); }

.engine-tag-label {
    font-family: var(--font-hud);
    font-size: 7.5px;
    font-weight: 700;
    color: var(--ops-ink-muted);
    letter-spacing: 0.03em;
}

.engine-name {
    font-family: var(--font-sans);
    font-size: 10.5px;
    font-weight: 700;
    color: var(--ops-ink);
    line-height: 1.2;
}

.engine-desc {
    font-size: 8.5px;
    color: var(--ops-ink-muted);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* BIG PRIMARY CTA BUTTON */
.hyper-btn-generate {
    width: 100%;
    height: 42px;
    border-radius: var(--radius-btn-lg);
    background: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--ops-accent-primary-ink);
    font-family: var(--font-hud);
    font-weight: 800;
    font-size: 11.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 3px 12px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.4);
    transition-property: var(--ui-props);
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    position: relative;
    overflow: hidden;
}

.hyper-btn-generate:hover {
    background: var(--ops-accent-primary);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 5px 16px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.5);
    transform: translateY(-1.5px);
    color: var(--ops-accent-primary-ink);
}

.hyper-btn-generate:active {
    transform: translateY(0.5px);
    box-shadow: 0 0 0 rgba(0,0,0,0), inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* ==========================================================================
   MASTER COMMAND DECK & HOLOGRAPHIC STAGE (UGC PLATFORMS & FIVEM HUBS)
   ========================================================================== */

.hub-container {
    max-width: 1440px;
    width: 100%;
    margin: 0 auto;
    padding: var(--ops-space-5);
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-5);
}

.hub-nav-bar {
    height: 48px;
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ops-space-4);
    margin: 0 !important;
    max-width: none !important;
    padding: 0 var(--ops-space-5);
    background: var(--ops-surface-100);
    border-bottom: 1px solid var(--ops-border-subtle);
}

.hub-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-hud);
    font-size: 13px;
    color: var(--text-muted);
}

.bc-sep {
    color: rgba(255, 255, 255, 0.2);
}

.bc-active {
    color: var(--cyan-glow);
    font-weight: 700;
}

/* Command Deck Header */
.deck-header {
    text-align: center;
    max-width: 860px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.hyper-badge-pill {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--ops-ink);
    padding: 4px 14px;
    border-radius: var(--radius-capsule);
    font-family: var(--font-hud);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.1em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
}

.deck-title {
    font-family: var(--font-hud);
    font-size: 32px;
    font-weight: 900;
    line-height: 1.15;
    background: linear-gradient(135deg, #ffffff 40%, var(--ops-ink) 75%, var(--ops-ink-muted) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    letter-spacing: -0.02em;
    filter: drop-shadow(0 4px 18px rgba(0, 0, 0, 0.6));
    margin: 0;
}

.deck-subtitle {
    font-size: 13.5px;
    line-height: 1.45;
    color: var(--ops-ink);
    font-weight: 500;
    max-width: 680px;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.6);
    margin: 0;
}

/* ==========================================================================
   EPIC RESPONSIVE GAME & CATEGORY GRID SYSTEM
   ========================================================================== */
.platform-hub-expanded {
    max-width: 1560px;
    margin: 0 auto;
    width: 100%;
    padding: 0;
    position: relative;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    flex: 1;
    min-height: 0;
}

/* Legacy rule floated the category top bar absolutely, so it never spanned
   the frame like every other page's. It now behaves like the shared bar. */
#wizard-step-fivem-hub .hub-nav-bar {
    position: static;
    margin: 0;
    z-index: 30;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ops-space-4);
}

.platform-epic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
    margin-top: 24px;
}

/* ==========================================================================
   TRIPO-STYLE 3D CURVED ARC CAROUSEL & FLOATING DOCK DESIGN SYSTEM
   ========================================================================== */

/* 1. Floating Creator Dock */
.tripo-floating-dock-wrap {
    width: 100%;
    max-width: 640px;
    margin: 8px auto 12px auto;
    position: relative;
    z-index: 20;
    display: flex;
    justify-content: center;
    padding: 0 16px;
}

.tripo-floating-dock {
    width: 100%;
    background: var(--ops-surface-200);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--ops-border-strong);
    border-radius: var(--ops-radius-md);
    padding: 5px 6px 5px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    box-shadow: var(--ops-shadow-card);
    transition-property: var(--ui-props);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.tripo-floating-dock:hover, .tripo-floating-dock:focus-within {
    border-color: rgba(255, 255, 255, 0.40);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.80), 0 0 0 rgba(0,0,0,0), inset 0 1px 0 rgba(255, 255, 255, 0.20);
    transform: translateY(-2px);
}

.dock-input-zone {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    overflow: hidden;
    user-select: none;
}

.dock-input-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ops-ink);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    flex-shrink: 0;
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

.dock-svg {
    width: 18px;
    height: 18px;
}

.tripo-floating-dock:hover .dock-input-icon {
    background: rgba(255, 255, 255, 0.18);
    border-color: rgba(255, 255, 255, 0.45);
    color: var(--ops-accent-primary);
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.25);
    transform: scale(1.05);
}

.dock-input-placeholder {
    font-size: 13.5px;
    font-weight: 600;
    color: var(--ops-ink-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}

.tripo-floating-dock:hover .dock-input-placeholder {
    color: var(--ops-ink);
}

.tripo-dock-cta {
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    border: 1px solid rgba(255, 255, 255, 0.35);
    font-family: var(--font-hud);
    font-size: 11.5px;
    font-weight: 800;
    letter-spacing: 0.04em;
    padding: 7px 18px;
    height: 36px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition-property: var(--ui-props);
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.tripo-dock-cta:hover {
    transform: translateY(-1.5px) scale(1.015);
    background: var(--ops-accent-primary);
    border-color: rgba(255, 255, 255, 0.60);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    color: var(--ops-accent-primary-ink);
}

.tripo-dock-cta:active {
    transform: translateY(0.5px) scale(0.99);
}

.dock-cta-arrow {
    transition: transform 0.2s ease;
}

.tripo-dock-cta:hover .dock-cta-arrow {
    transform: translateX(3px);
}

/* 2. Flat Carousel Stage (Clean, Straight & Flat Layout) */
.arc-carousel-stage {
    position: relative;
    width: auto;
    max-width: none;
    margin: 0 var(--ops-space-5) var(--ops-space-5) var(--ops-space-5);
    padding: var(--ops-space-5) 0;
    background: var(--ops-surface-100);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-xl);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    min-height: unset;
}

/* Subtle Ambient Spotlight (Clean, No Bleeding Pink Blur) */
.arc-carousel-stage::before {
    content: '';
    position: absolute;
    top: 35%;
    left: 50%;
    transform: translate(-50%, -20%);
    width: 800px;
    height: 320px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.03) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.arc-carousel-viewport {
    position: relative;
    width: 100%;
    height: 460px;
    display: flex;
    align-items: center;
    justify-content: center;
    user-select: none;
    cursor: grab;
    z-index: 1;
}

.arc-carousel-viewport:active {
    cursor: grabbing;
}

.arc-carousel-track {
    position: relative;
    width: 290px;
    height: 440px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Until ArcCarousel3D has placed the cards (app.js adds .arc-ready), keep them
   invisible and unanimated: no stacked flash, no fly-out on load. */
.arc-carousel-track:not(.arc-ready) .arc-card-item {
    opacity: 0 !important;
    transition: none !important;
}

/* 3. Arc Card Items - Developer Pipeline 3D Dynamic Perspective Layout */
.arc-card-item {
    position: absolute;
    top: 0;
    left: 0;
    width: 290px;
    height: 425px;
    border-radius: var(--ops-radius-lg);
    overflow: hidden;
    background: var(--ops-surface-200);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: 1px solid var(--ops-border-subtle);
    box-shadow: var(--ops-shadow-card);
    display: flex;
    flex-direction: column;
    padding: 0;
    cursor: pointer;
    opacity: 1;
    transition: transform 0.55s var(--ease-smooth), opacity 0.45s var(--ease-smooth), border-color 0.3s ease, box-shadow 0.3s ease;
    user-select: none;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Inactive Side Cards: Crisp & Unblurred, matching card structure */
.arc-card-item:not(.active-center) {
    border: 1px solid var(--ops-border-subtle);
    box-shadow: var(--ops-shadow-card);
    background: linear-gradient(180deg, #32383f 0%, #1e2126 100%);
}

/* Outer Last Cards on Far Left and Far Right: Soft Peripheral Fade */
.arc-card-item.flank-outer {
    border-color: rgba(255, 255, 255, 0.12);
}

/* Black & White / Grayscale effect ONLY on the images */
.arc-card-item:not(.active-center) .card-hero-img {
    filter: grayscale(100%) blur(0px) brightness(0.85) contrast(1.05);
    -webkit-filter: grayscale(100%) blur(0px) brightness(0.85) contrast(1.05);
}

.arc-card-item:not(.active-center) .card-body-zone {
    opacity: 1;
    background: transparent;
}

.arc-card-item:not(.active-center) .card-brand-icon {
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95));
    -webkit-filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95));
}

.arc-card-item:not(.active-center) .card-status-pill {
    /* Retain natural color and contrast */
    opacity: 0.92;
}

/* Active Center Card (Full Vivid Color, scale(1.06), var(--ops-accent-primary) Rim & Glowing Highlights) */
.arc-card-item.active-center {
    opacity: 1;
    background: linear-gradient(180deg, #32383f 0%, #1e2126 100%);
    /* Same 1px border as the side cards (a thicker one nudges the content
       half a pixel when the card turns active); the inset ring thickens it. */
    border: 1px solid var(--ops-accent-primary);
    box-shadow: 0 20px 48px rgba(0, 0, 0, 0.80), inset 0 0 0 0.5px var(--ops-accent-primary), inset 0 1px 1px rgba(255, 255, 255, 0.10);
    cursor: pointer;
}

/* Center card default state: crystal sharp & vivid, zero blur */
.arc-card-item.active-center .card-hero-img {
    filter: blur(0px) brightness(1.0) contrast(1.06) grayscale(0%);
    -webkit-filter: blur(0px) brightness(1.0) contrast(1.06) grayscale(0%);
}

.arc-card-item.active-center .card-brand-icon {
    filter: grayscale(0%) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95));
    -webkit-filter: grayscale(0%) drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95));
}

/* Hovering unselected side cards: image stays black and white, bottom half remains colored */
.arc-card-item:not(.active-center):hover {
    background: linear-gradient(180deg, #32383f 0%, #1e2126 100%);
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.25);
    opacity: 1 !important;
}

.arc-card-item:not(.active-center):hover .card-hero-img {
    filter: grayscale(100%) blur(0px) brightness(1.0) contrast(1.06) !important;
    -webkit-filter: grayscale(100%) blur(0px) brightness(1.0) contrast(1.06) !important;
}

.arc-card-item:not(.active-center):hover .card-body-zone {
    opacity: 1;
}

/* Hovering active center card: full color focus & sharp punch */
.arc-card-item.active-center:hover .card-hero-img {
    filter: blur(0px) brightness(1.04) contrast(1.08) grayscale(0%) !important;
    -webkit-filter: blur(0px) brightness(1.04) contrast(1.08) grayscale(0%) !important;
}

/* ==========================================================================
   STUDIO 3D CARDS (60% HERO / 40% INFO BODY SPLIT)
   ========================================================================== */

/* Top Hero Visual Container (~60% of Card Height = 315px) */
.card-hero-zone {
    position: relative;
    width: 100%;
    height: 250px;
    overflow: hidden;
    background: #08090E;
}

/* Default state: crystal clear rendering with 0 blur */
.card-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    filter: blur(0px) brightness(1.0) contrast(1.05);
    transition: filter 0.45s cubic-bezier(0.16, 1, 0.3, 1), transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hover state transition: banner image underneath scales slightly with crisp sharpness */
.arc-card-item:hover .card-hero-img {
    transform: scale(1.04);
}

/* Subtle Backlit Glow */
.card-hero-glow {
    display: none;
}

/* Clean bottom edge vignette fade into card body */
.card-hero-fade {
    position: absolute;
    inset: 0;
    background: linear-gradient(
        to bottom,
        transparent 0%,
        transparent 65%,
        rgba(30, 33, 38, 0.45) 85%,
        #1e2126 100%
    );
    pointer-events: none;
    z-index: 2;
}

/* Top Meta Header Bar */
.card-top-bar {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    z-index: 4;
    pointer-events: none;
}

.card-engine-kicker {
    font-family: var(--font-hud);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    color: var(--ops-ink);
    text-transform: uppercase;
    background: var(--ops-surface-300);
    border: 1px solid var(--ops-border-subtle);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 4px 10px;
    border-radius: var(--radius-capsule);
    border: 1px solid rgba(255, 255, 255, 0.14);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35);
    transition: opacity 0.35s ease, transform 0.35s ease;
}

/* Smoothly hide kicker on hover so brand badge sits gracefully in top-left */
.arc-card-item:hover .card-engine-kicker {
    opacity: 0;
    transform: translateX(-8px);
}

.card-status-pill {
    font-family: var(--font-hud);
    font-size: 9px;
    font-weight: 800;
    padding: 4px 10px;
    border-radius: var(--radius-capsule);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-left: auto;
}

.card-status-pill.live {
    background: rgba(52, 211, 153, 0.22);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ops-accent-success);
    border: 1px solid rgba(52, 211, 153, 0.45);
}

.card-status-pill.soon {
    background: var(--ops-surface-300);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: var(--ops-ink-muted);
    border: 1px solid var(--ops-border-subtle);
}

/* Center Brand Showcase Stage (Watermark Default -> Top-Left Badge Hover)
   The logo glides to the corner with one transform (no layout change, so no
   jump and no per-frame re-flow). The badge plate fades in underneath it. */
.card-brand-stage {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    z-index: 3;
    pointer-events: none;
    /* cqw/cqh below = this stage (the hero image area) */
    container-type: size;
}

/* Badge plate in the top-left corner (38px, 12px in) */
.card-brand-stage::before {
    content: '';
    position: absolute;
    top: 12px;
    left: 12px;
    width: 38px;
    height: 38px;
    border-radius: 10px;
    background: rgba(16, 18, 20, 0.88);
    border: 1px solid rgba(255, 255, 255, 0.20);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.60);
    opacity: 0;
    transform: scale(0.7);
    transition: opacity 0.3s ease, transform 0.45s var(--ease-smooth);
}

.card-brand-blend-wrap {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 120px;
    height: 120px;
    padding: 10px;
    border-radius: 16px;
    transition: transform 0.5s var(--ease-smooth);
}

/* Atmospheric Soft Dark Backing Behind Logo */
.card-brand-blend-wrap::before {
    content: '';
    position: absolute;
    width: 210px;
    height: 210px;
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.85) 0%, rgba(0, 0, 0, 0.45) 55%, transparent 75%);
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    transition: opacity 0.35s ease;
}

.card-brand-icon {
    width: 96px;
    height: 96px;
    color: var(--ops-ink);
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95)) drop-shadow(0 2px 6px rgba(0, 0, 0, 0.85));
}

.card-brand-icon.fivem-icon {
    color: var(--ops-accent-primary);
    filter: drop-shadow(0 14px 28px rgba(0, 0, 0, 0.95));
}

.arc-card-item:hover .card-brand-stage::before {
    opacity: 1;
    transform: scale(1);
}

/* Center of the stage -> center of the badge (12px + 19px = 31px from the
   corner), 96px icon -> 24px. cqw/cqh measure the content box, so the 20px
   stage padding comes off: 31px - 20px - 50cq. */
.arc-card-item:hover .card-brand-blend-wrap {
    transform: translate(calc(11px - 50cqw), calc(11px - 50cqh)) scale(0.25);
}

.arc-card-item:hover .card-brand-blend-wrap::before {
    opacity: 0;
}

/* Bottom Card Body Info (~40% of Card Height = 210px) */
.card-body-zone {
    position: relative;
    padding: 10px 14px 12px 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 175px;
    z-index: 2;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.card-text-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-header-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
}

.card-title {
    font-family: var(--font-hud);
    font-size: 16px;
    font-weight: 800;
    color: var(--ops-ink);
    letter-spacing: -0.015em;
    line-height: 1.2;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-subtitle {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--ops-ink-muted);
    letter-spacing: 0.02em;
    white-space: nowrap;
    display: block;
}

.card-spec-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 6px;
    overflow: hidden;
}

.spec-pill {
    font-family: var(--font-hud);
    font-size: 10px;
    font-weight: 700;
    color: var(--ops-ink-muted);
    background: var(--ops-surface-300);
    border: 1px solid var(--ops-border-subtle);
    padding: 3px 8px;
    border-radius: var(--ops-radius-sm);
    letter-spacing: 0.02em;
    user-select: none;
    white-space: nowrap;
}

/* Remove text clutter/random paragraphs completely */
.card-desc {
    display: none !important;
}

/* Action CTA Buttons */
.card-cta-btn {
    width: 100%;
    height: 34px;
    border-radius: var(--radius-btn-sm);
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    margin-top: 6px;
}

.card-cta-btn.live {
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 3px 10px rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.35);
}

.card-cta-btn.live:hover {
    background: var(--ops-accent-primary);
    border-color: rgba(255, 255, 255, 0.60);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 5px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.45);
    transform: translateY(-1.5px) scale(1.015);
    color: var(--ops-accent-primary-ink);
}

.card-cta-btn.soon {
    background: var(--ops-surface-200);
    color: var(--ops-ink-muted);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.card-cta-btn.soon:hover {
    background: var(--ops-surface-300);
    color: var(--ops-ink);
    border-color: rgba(255, 255, 255, 0.22);
    transform: translateY(-1px);
}

/* 4. Navigation Buttons - Perfectly Placed at the Outer Edge of Last Cards */
.arc-nav-btn {
    position: absolute;
    top: 58%;
    transform: translateY(-50%);
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(22, 24, 27, 0.90);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(4px);
    border: 1.5px solid rgba(255, 255, 255, 0.22);
    color: var(--ops-ink);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 30;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.70), inset 0 1px 1px rgba(255, 255, 255, 0.20);
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    display: none !important;
}

.arc-nav-btn svg {
    width: 20px;
    height: 20px;
    transition: transform 0.2s ease;
}

.arc-nav-prev {
    left: max(16px, calc(50% - 370px));
}

.arc-nav-next {
    right: max(16px, calc(50% - 370px));
}

.arc-nav-btn:hover {
    background: rgba(28, 30, 42, 0.98);
    border-color: var(--ops-accent-primary);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 12px 32px rgba(0, 0, 0, 0.80);
    transform: translateY(-50%) scale(1.10);
    color: var(--ops-ink);
}

.arc-nav-prev:hover svg {
    transform: translateX(-2px);
}

.arc-nav-next:hover svg {
    transform: translateX(2px);
}

.arc-nav-btn:active {
    transform: translateY(-50%) scale(0.95);
}

/* 5. Pagination Dots */
.arc-carousel-dots {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 10px;
    margin-bottom: 2px;
    z-index: 20;
    position: relative;
}

.arc-dot-item {
    width: 8px;
    height: 8px;
    border-radius: var(--radius-capsule);
    background: rgba(255, 255, 255, 0.22);
    border: 1px solid rgba(255, 255, 255, 0.10);
    cursor: pointer;
    /* The active dot grows into a pill; 8 tiny dots re-flowing is cheap. */
    transition-property: var(--ui-props), width;
    transition-duration: 0.35s;
    transition-timing-function: var(--ease-smooth);
}

.arc-dot-item:hover {
    background: rgba(255, 255, 255, 0.60);
    transform: scale(1.2);
}

.arc-dot-item.active {
    width: 28px;
    background: var(--ops-accent-primary);
    border-color: var(--ops-accent-primary);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    color: var(--ops-accent-primary-ink);
}

/* 6. Partner Logo Strip */
.partner-logos-strip {
    display: none !important;
    flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    margin-top: 15px;
    user-select: none;
}

.partner-strip-label {
    font-family: var(--font-hud);
    font-size: 10px;
    font-weight: 800;
    letter-spacing: 0.12em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.partner-logo-items {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}

.partner-pill {
    background: rgba(22, 24, 27, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.10);
    padding: 6px 14px;
    border-radius: var(--radius-capsule);
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 700;
    color: var(--text-sub);
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 7px;
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

.partner-pill:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(26, 29, 40, 0.85);
    color: var(--ops-ink);
    transform: translateY(-1px);
}

.partner-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.45);
}
.partner-dot.red { background: var(--ops-accent-danger); }

@media (max-width: 1024px) {
    .arc-carousel-stage {
        perspective: 1100px;
    }
    .arc-nav-prev { left: 8px; }
    .arc-nav-next { right: 8px; }
}

@media (max-width: 640px) {
    .tripo-floating-dock-wrap {
        padding: 0 12px;
    }
    .tripo-floating-dock {
        flex-direction: column;
        border-radius: var(--radius-lg);
        padding: 12px;
    }
    .tripo-dock-cta {
        width: 100%;
        justify-content: center;
    }
    .arc-carousel-viewport {
        height: 440px;
    }
    .arc-carousel-track, .arc-card-item {
        width: 300px;
        height: 420px;
    }
    .card-viewport-frame {
        height: 85px;
    }
    .brand-emblem-box {
        width: 46px;
        height: 46px;
        min-width: 46px;
    }
    .brand-vector-svg {
        width: 26px;
        height: 26px;
    }
    .brand-game-title {
        font-size: 16px;
    }
}

/* Lock & Coming Soon modal badge */
.lock-modal-badge {
    padding: 6px 14px;
    border-radius: var(--radius-capsule);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    color: var(--ops-ink);
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.08em;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    bottom: 28px;
    right: 28px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 99999;
    pointer-events: none;
}

.toast-item {
    pointer-events: auto;
    padding: 12px 20px;
    background: rgba(22, 24, 27, 0.90);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: var(--radius-md);
    color: var(--ops-ink);
    font-size: 13px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    gap: 10px;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    transition-property: var(--ui-props);
    transition-duration: 0.3s;
    transition-timing-function: ease;
}

@keyframes toastSlideIn {
    from { transform: translateX(50px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.cyber-toast {
    position: fixed;
    bottom: 28px;
    right: 28px;
    background: rgba(22, 24, 27, 0.92);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-capsule);
    padding: 12px 22px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--ops-ink);
    font-size: 13px;
    font-weight: 600;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.2);
    z-index: 99999;
    animation: toastSlideIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Vector SVG HUD Icons */
.dock-svg {
    width: 20px;
    height: 20px;
    stroke: currentColor;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.tab-svg {
    width: 16px;
    height: 16px;
    stroke: currentColor;
}

.hud-svg {
    width: 14px;
    height: 14px;
    stroke: currentColor;
}

.panel-svg-icon {
    width: 16px;
    height: 16px;
    fill: var(--cyan-glow);
    display: inline-block;
    vertical-align: middle;
}

/* ==========================================================================
   3D MODEL VAULT / LIBRARY STYLES
   ========================================================================== */
.vault-counter-pill {
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    font-size: 10.5px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: var(--radius-capsule);
    margin-left: 4px;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.vault-icon-box {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-total-count {
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-capsule);
    background: rgba(255, 255, 255, 0.08);
    color: var(--ops-ink);
    border: 1px solid rgba(255, 255, 255, 0.15);
}

.vault-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 0;
    border-bottom: 1px solid var(--border-glass-subtle);
    flex-wrap: wrap;
}

.vault-search-box {
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(10, 11, 13, 0.65);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-capsule);
    padding: 8px 16px;
    flex: 1;
    min-width: 240px;
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

.vault-search-box:focus-within {
    border-color: rgba(255, 255, 255, 0.35);
    box-shadow: 0 0 16px rgba(0, 0, 0, 0.5);
}

.vault-search-box input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--ops-ink);
    font-size: 13px;
    width: 100%;
    font-family: inherit;
}

.vault-search-box input::placeholder {
    color: var(--text-muted);
}

.vault-filter-tabs {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(16, 18, 20, 0.6);
    padding: 4px;
    border-radius: var(--radius-btn);
    border: 1px solid var(--border-glass-subtle);
}

.vault-filter-btn {
    background: transparent;
    border: none;
    color: var(--text-sub);
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-btn-sm);
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.vault-filter-btn:hover {
    color: var(--ops-ink);
    background: rgba(255, 255, 255, 0.06);
}

.vault-filter-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--ops-ink);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.vault-grid-container {
    flex: 1;
    overflow-y: auto;
    padding: 16px 4px 8px 4px;
    max-height: 58vh;
}

.vault-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.vault-card {
    background: rgba(22, 24, 27, 0.85);
    backdrop-filter: blur(5px);
    border: 1px solid var(--border-glass);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    transition-property: var(--ui-props);
    transition-duration: 0.3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
}

.vault-card:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.75), inset 0 1px 1px rgba(255, 255, 255, 0.15);
}

.vault-card-thumb-wrap {
    position: relative;
    width: 100%;
    height: 160px;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: var(--ops-surface-300);
    border: 1px solid rgba(255, 255, 255, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
}

.vault-card-thumb-wrap img {
    max-width: 88%;
    max-height: 88%;
    object-fit: contain;
    filter: drop-shadow(0 8px 16px rgba(0,0,0,0.6));
    transition: transform 0.3s ease;
}

.vault-card:hover .vault-card-thumb-wrap img {
    transform: scale(1.05);
}

.vault-card-engine-tag {
    position: absolute;
    top: 8px;
    left: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--ops-ink);
    font-size: 10px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: var(--radius-capsule);
    letter-spacing: 0.5px;
}

.vault-card-date-tag {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(4px);
    color: var(--text-muted);
    font-size: 10px;
    padding: 2px 7px;
    border-radius: var(--radius-capsule);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.vault-card-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.vault-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ops-ink);
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.vault-card-meta-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11.5px;
    color: var(--text-sub);
}

.vault-card-formats {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

.vault-format-chip {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-sub);
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
}

.vault-format-chip.gold {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--gold-light);
}

.vault-format-chip.rose {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--ops-accent-primary);
}

.vault-card-actions {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 8px;
    margin-top: 4px;
    padding-top: 10px;
    border-top: 1px solid var(--border-glass-subtle);
}

.vault-btn-load {
    background: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.22);
    color: var(--ops-accent-primary-ink);
    font-size: 12px;
    font-weight: 700;
    padding: 8px 12px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
    box-shadow: 0 4px 14px rgba(255, 255, 255, 0.30);
}

.vault-btn-load:hover {
    background: var(--ops-accent-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(255, 255, 255, 0.45);
    color: var(--ops-accent-primary-ink);
}

.vault-btn-dl {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--border-glass);
    color: var(--ops-ink);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.vault-btn-dl:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--ops-ink);
}

.vault-btn-delete {
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-muted);
    padding: 8px 10px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.vault-btn-delete:hover {
    color: var(--ops-accent-danger);
    background: rgba(230, 74, 63, 0.1);
    border-color: rgba(230, 74, 63, 0.3);
}

.vault-empty-state {
    grid-column: 1 / -1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    color: var(--text-muted);
    text-align: center;
    gap: 12px;
}

/* ==========================================================================
   UV MAP & SEAM INSPECTOR MODAL STYLES
   ========================================================================== */
.modal-uv-window {
    background: rgba(15, 17, 24, 0.95);
    backdrop-filter: blur(9px) saturate(190%);
    -webkit-backdrop-filter: blur(4px) saturate(190%);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.9), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.uv-display-toggle-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(10, 11, 13, 0.7);
    padding: 4px;
    border-radius: var(--radius-btn);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-uv-toggle {
    background: transparent;
    border: none;
    color: var(--text-sub);
    font-size: 11.5px;
    font-weight: 600;
    padding: 6px 14px;
    border-radius: var(--radius-btn-sm);
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn-uv-toggle:hover {
    color: var(--ops-ink);
    background: rgba(255, 255, 255, 0.08);
}

.btn-uv-toggle.active {
    background: rgba(255, 255, 255, 0.18);
    color: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 2px 10px rgba(255, 255, 255, 0.2);
}


/* ==========================================================================
   KANKI PRO STUDIO WORKSTATION (UNIFIED MONOLITHIC DCC ARCHITECTURE)
   Precision UI tokens, zero emojis, monolithic glass frame, native vector glyphs
   ========================================================================== */

/* Step 3 & Step 4 Full-Bleed Workstation Mode (Exact Sizing Parity) */
#wizard-step-3,
#wizard-step-4 {
    width: 100%;
    height: 100%;
}

#wizard-step-3.active,
#wizard-step-4.active {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    height: 100% !important;
    max-height: 100% !important;
    min-height: 0 !important;
    overflow: hidden !important;
}

body.step-3-active,
body.step-4-active {
    overflow-x: hidden;
    overflow-y: auto !important;
    height: auto !important;
    min-height: 100vh !important;
}

body.step-3-active .wizard-container,
body.step-4-active .wizard-container {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
}

body.step-3-active .wizard-main,
body.step-4-active .wizard-main,
body:has(#wizard-step-3.active) .wizard-main,
body:has(#wizard-step-4.active) .wizard-main,
.wizard-main:has(#wizard-step-3.active),
.wizard-main:has(#wizard-step-4.active) {
    max-width: 100% !important;
    padding: 8px 16px 8px 16px !important;
    height: auto !important;
    min-height: calc(100vh - 74px) !important;
    max-height: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
}

/* Monolithic Workstation Frame (One Solid Tool, Full Viewport Height at Top) */
.studio-workstation-frame {
    width: 100%;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    background: transparent;
    border: none;
    border-radius: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    position: relative;
    box-sizing: border-box;
}

/* Studio Workstation Top Bar (Continuous Header Spanning All Columns) */
.studio-workstation-header {
    height: 48px;
    min-height: 48px;
    background: var(--ops-surface-100);
    /* No backdrop-filter: OpsMaster panels are opaque, and a backdrop-filter
       here would become the containing block for the bottom metric tiles. */
    border-bottom: 1px solid var(--ops-border-subtle);
    padding: 0 var(--ops-space-5);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ops-space-4);
    z-index: 10;
}

.studio-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.studio-breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
}

.studio-bc-root {
    color: var(--text-muted);
}

.studio-bc-sep {
    color: rgba(255, 255, 255, 0.2);
    font-size: 10px;
}

.studio-bc-current {
    color: var(--ops-ink);
    font-family: var(--font-hud);
    letter-spacing: -0.01em;
}

.studio-engine-badge {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ops-ink);
    padding: 3px 10px;
    border-radius: var(--radius-capsule);
    font-family: var(--font-hud);
    font-size: 9.5px;
    font-weight: 600;
    letter-spacing: 0.04em;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Studio Header Center Telemetry Container (Matches Mock Reference) */
/* ==========================================================================
   BOTTOM METRIC TILES (OpsMaster placement)
   The reference runs its metric tiles as a full-width row along the bottom
   of the frame, below the viewport. Positioned out of the header flow with
   CSS only so every id/handler in the markup is untouched.
   ========================================================================== */
.studio-header-telemetry {
    position: static;
    display: flex;
    align-items: center;
    gap: var(--ops-space-4);
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
}

.studio-telemetry-pill {
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-full);
    box-shadow: none;
    padding: 4px 12px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    min-height: 0;
    white-space: nowrap;
}


.studio-telemetry-pill .telemetry-label {
    color: var(--ops-ink-muted);
    font-weight: 500;
    font-size: 11px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.studio-telemetry-pill .telemetry-value {
    font-family: var(--font-mono);
    font-weight: 700;
    color: var(--ops-ink);
    font-size: 22px;
    line-height: 27px;
    letter-spacing: -0.01em;
    overflow-wrap: anywhere;
}

.studio-telemetry-pill .telemetry-value.positive {
    color: var(--ops-accent-success);
}

.studio-telemetry-pill .telemetry-value.live {
    color: var(--ops-accent-primary);
}

/* Studio Header Actions */
.studio-header-actions {
    display: flex;
    align-items: center;
    gap: 10px;
}

.studio-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    border-radius: var(--radius-btn);
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    font-family: var(--font-hud);
    text-decoration: none;
    user-select: none;
}

.studio-header-btn.secondary {
    background: var(--ops-surface-200);
    backdrop-filter: var(--glass-blur-sm);
    -webkit-backdrop-filter: var(--glass-blur-sm);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: var(--ops-ink);
    padding: 8px 18px;
    border-radius: var(--radius-btn);
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 2px 8px rgba(0, 0, 0, 0.35);
}

.studio-header-btn.secondary:hover {
    background: var(--ops-surface-300);
    border-color: rgba(255, 255, 255, 0.28);
    color: var(--ops-ink);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16), 0 4px 14px rgba(0, 0, 0, 0.45);
}

/* Hero Primary Action: Fit Chain Studio (Vibrant Attention-Grabbing Crimson Action) */
.studio-header-btn.hero-primary-cta {
    background: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--ops-accent-primary-ink);
    padding: 8px 18px 8px 14px;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: 0.01em;
    position: relative;
    border-radius: var(--radius-btn);
    display: inline-flex;
    align-items: center;
    gap: 9px;
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.35);
    transition-property: var(--ui-props);
    transition-duration: 0.22s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    cursor: pointer;
}

.studio-header-btn.hero-primary-cta:hover {
    background: var(--ops-accent-primary);
    border-color: rgba(255, 255, 255, 0.60);
    color: var(--ops-accent-primary-ink);
    transform: translateY(-1.5px) scale(1.015);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 6px 20px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

.studio-header-btn.hero-primary-cta:active {
    transform: translateY(0.5px) scale(0.99);
    box-shadow: 0 0 0 rgba(0,0,0,0), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.cta-step-badge {
    background: rgba(12, 13, 16, 0.10);
    border: 1px solid rgba(12, 13, 16, 0.25);
    color: var(--ops-accent-primary-ink);
    font-size: 10px;
    font-weight: 800;
    padding: 2px 7px;
    border-radius: 5px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.cta-btn-text {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.cta-arrow-box {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.22);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, background 0.2s ease;
}

.studio-header-btn.hero-primary-cta:hover .cta-arrow-box,
.btn-primary-action:hover .cta-arrow-box {
    transform: translateX(2px);
    background: rgba(255, 255, 255, 0.38);
}

.cta-arrow-box svg {
    width: 12px;
    height: 12px;
    color: var(--ops-ink);
}

/* Studio Workstation Body (Seamless 3-Column Docking Engine) */
.studio-workstation-body {
    flex: 1;
    min-height: 0 !important;
    height: calc(100% - 48px) !important;
    display: flex;
    overflow: hidden;
    position: relative;
    gap: var(--ops-space-5);
    padding: var(--ops-space-5);
}

/* ==========================================================================
   OPSMASTER SPATIAL MODEL
   Side rails are transparent gutters; each dock-section is its own floating
   instrument panel over the viewport. The stage keeps flex:1 in the middle.
   ========================================================================== */
.studio-dock {
    width: 264px;
    min-width: 264px;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-4);
    overflow: hidden;
    z-index: 5;
    height: 100%;
    min-height: 0;
}

.studio-dock-left {
    border-right: none;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100%;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: var(--ops-border-strong) transparent;
}

.studio-dock-right {
    width: 300px;
    min-width: 300px;
    border-left: none;
    height: 100%;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-4);
    scrollbar-width: thin;
    scrollbar-color: var(--ops-border-strong) transparent;
}

@media (max-width: 1440px) {
    .studio-dock {
        width: 236px;
        min-width: 236px;
    }
    .studio-dock-right {
        width: 268px;
        min-width: 268px;
    }
}

/* Each section = one floating instrument card */
.studio-dock-section {
    padding: var(--ops-space-4);
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-lg);
    box-shadow: var(--ops-shadow-card);
    border-bottom: 1px solid var(--ops-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-3);
    flex-shrink: 0;
}

.studio-dock-titlebar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    position: relative;
    padding-right: 14px;
    padding-bottom: var(--ops-space-3);
    border-bottom: 1px solid var(--ops-border-subtle);
}

/* Reusable uppercase technical section header w/ chevron indicator,
   matching the OPSMASTER "BUILDING DATA / STATUS" pattern. Any
   .studio-dock-titlebar (or element carrying .hud-section-header)
   gets the trailing caret automatically. Absolutely positioned so it
   never disturbs the existing space-between layout of its siblings. */
.studio-dock-titlebar::after,
.hud-section-header::after {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid var(--text-muted);
    border-bottom: 1.5px solid var(--text-muted);
    transform: translateY(-65%) rotate(45deg);
    opacity: 0.7;
    pointer-events: none;
}

.hud-section-header {
    position: relative;
    padding-right: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--text-muted);
    padding-bottom: 8px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.hud-section-header .hud-section-meta {
    margin-left: auto;
    margin-right: 8px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-sub);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid var(--hud-panel-border);
    border-radius: var(--radius-capsule);
    padding: 2px 8px;
    font-size: 9.5px;
}

.studio-dock-title {
    display: flex;
    align-items: center;
    gap: var(--ops-space-2);
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--ops-ink-muted);
    text-transform: uppercase;
}

.studio-dock-icon {
    width: 14px;
    height: 14px;
    color: var(--cyan-glow);
}

.studio-status-tag {
    font-family: var(--font-hud);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.06em;
    padding: 2px 7px;
    border-radius: var(--radius-capsule);
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-muted);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.studio-status-tag.active {
    background: rgba(255, 255, 255, 0.12);
    color: var(--cyan-glow);
    border-color: rgba(255, 255, 255, 0.35);
}

/* Landing Page Styled Dropzone Plate */
.studio-dropzone-plate {
    position: relative;
    border: 1px dashed rgba(255, 255, 255, 0.16);
    background: rgba(10, 11, 13, 0.7);
    border-radius: var(--radius-sm);
    padding: 16px 12px;
    text-align: center;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-dropzone-plate:hover {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.studio-dropzone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}

.studio-dropzone-glyph-wrap {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: ease;
}

.studio-dropzone-plate:hover .studio-dropzone-glyph-wrap {
    background: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
}

.studio-upload-glyph {
    width: 17px;
    height: 17px;
    color: var(--ops-ink-muted);
    transition: color 0.2s;
}

.studio-dropzone-plate:hover .studio-upload-glyph {
    color: var(--cyan-glow);
}

.studio-dropzone-label {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-main);
    letter-spacing: -0.01em;
}

.studio-dropzone-caption {
    font-size: 9.5px;
    font-family: var(--font-hud);
    color: var(--text-muted);
    letter-spacing: 0.03em;
}

.studio-preview-wrapper {
    position: relative;
    width: 100%;
    height: 110px;
    background: #040508;
    border-radius: var(--radius-xs);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.studio-preview-wrapper img {
    max-width: 92%;
    max-height: 92%;
    object-fit: contain;
}

.studio-preview-clear-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: var(--ops-ink);
    width: 22px;
    height: 22px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition-property: var(--ui-props);
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.studio-preview-clear-btn:hover {
    background: var(--cyan-glow);
    border-color: var(--cyan-glow);
}

/* Field Group */
.studio-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.studio-field-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.studio-field-label {
    font-size: 10px;
    font-family: var(--font-hud);
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.studio-field-hint {
    font-size: 9.5px;
    font-family: var(--font-hud);
    color: rgba(255, 255, 255, 0.3);
}

.studio-input-area {
    width: 100%;
    background: rgba(10, 11, 13, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xs);
    color: var(--text-main);
    font-family: inherit;
    font-size: 11.5px;
    line-height: 1.4;
    padding: 8px 10px;
    outline: none;
    resize: none;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.studio-input-area:focus {
    border-color: rgba(255, 255, 255, 0.5);
    background: rgba(8, 10, 18, 0.95);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* Primary Generate Button (Clean Brand Crimson Action matching Landing Page) */
.studio-primary-btn {
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    padding: 11px 16px;
    font-family: var(--font-hud);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 4px 18px rgba(255, 255, 255, 0.35);
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.studio-primary-btn:hover {
    transform: translateY(-1px);
    background: var(--ops-accent-primary);
    box-shadow: 0 6px 24px rgba(255, 255, 255, 0.55);
    border-color: rgba(255, 255, 255, 0.35);
    color: var(--ops-accent-primary-ink);
}

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

.studio-btn-glyph {
    width: 12px;
    height: 12px;
}

/* Custom Track Sliders (Clean Monochromatic Black & White Styling) */
.studio-slider-row {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* OpsMaster slider row: label on its own line, then track + boxed readout
   side by side. Done with grid + display:contents so the existing markup
   and all input ids/handlers stay exactly as they are. */
.studio-slider-row {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    column-gap: var(--ops-space-3);
    row-gap: var(--ops-space-2);
}

.studio-slider-header {
    display: contents;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-sub);
}

.studio-slider-header > :first-child {
    grid-column: 1 / -1;
    grid-row: 1;
    font-size: 11px;
    font-weight: 500;
    color: var(--ops-ink-muted);
}

.studio-slider-row > .cyber-slider,
.studio-slider-row > input[type=range] {
    grid-column: 1;
    grid-row: 2;
    width: 100%;
}

.studio-value-readout {
    grid-column: 2;
    grid-row: 2;
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--ops-ink);
    background: var(--ops-surface-300);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-sm);
    padding: 4px 8px;
    min-width: 52px;
    text-align: center;
}

.cyber-slider,
.studio-slider-row input[type=range] {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    border-radius: var(--ops-radius-full);
    background: rgba(255, 255, 255, 0.10);
    border: none;
    outline: none;
    transition: none;
}



.cyber-slider:focus-visible,
.studio-slider-row input[type=range]:focus-visible {
    outline: 2px solid var(--ops-focus-ring);
    outline-offset: 2px;
}

.cyber-slider::-webkit-slider-thumb,
.studio-slider-row input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 20px;
    border-radius: 4px;
    background: var(--ops-accent-primary);
    border: none;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
    cursor: pointer;
    transition: transform 0.15s ease;
}

.cyber-slider::-webkit-slider-thumb:hover,
.studio-slider-row input[type=range]::-webkit-slider-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

/* Photorealistic PBR Material Swatches */
.studio-presets-matrix {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 4px;
}

.studio-preset-chip {
    background: rgba(14, 14, 18, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 8px 4px 7px 4px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.studio-preset-chip:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: rgba(24, 24, 30, 0.95);
    transform: translateY(-1px);
}

.studio-preset-chip.active {
    border-color: var(--ops-ink-muted);
    box-shadow: none;
    background: rgba(255, 255, 255, 0.08);
}

.studio-preset-chip#preset-metal-gold.active {
    border-color: #f59e0b;
    box-shadow: none;
    background: rgba(245, 158, 11, 0.08);
}

.studio-preset-chip#preset-metal-rose.active {
    border-color: #d98f76;
    box-shadow: none;
    background: rgba(217, 143, 118, 0.10);
}

.studio-preset-chip#preset-metal-silver.active {
    border-color: #cbd5e1;
    box-shadow: none;
    background: rgba(203, 213, 225, 0.08);
}

.preset-sphere-wrap {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.preset-sphere-img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
    transition: transform 0.2s ease;
}

.studio-preset-chip:hover .preset-sphere-img {
    transform: scale(1.08);
}

.preset-meta-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 10.5px;
    font-weight: 600;
    color: var(--ops-ink);
}

.preset-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
}
.preset-dot.gold { background: #eab308; }
.preset-dot.rose { background: #d98f76; }
.preset-dot.silver { background: #d4d4d8; }

/* Generative Model Select Dropdown */
.studio-select-wrap {
    position: relative;
    width: 100%;
}

.studio-select-dark {
    width: 100%;
    background: rgba(14, 14, 18, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--ops-ink);
    font-family: inherit;
    font-size: 11px;
    font-weight: 600;
    padding: 8px 10px;
    border-radius: 6px;
    outline: none;
    cursor: pointer;
    transition: border-color 0.2s ease;
}

.studio-select-dark:focus {
    border-color: rgba(255, 255, 255, 0.6);
}

/* Center Stage Viewport (Transparent so Landing Page Topography Shows Directly) */
.studio-stage {
    flex: 1;
    position: relative;
    background: var(--ops-surface-100);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-xl);
    overflow: hidden;
    height: 100%;
}

/* Neutral floor light under the model (no colored spotlight) */
.studio-stage::before {
    content: '';
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%, -45%);
    width: 520px;
    height: 360px;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.07) 0%, rgba(255, 255, 255, 0.025) 48%, transparent 72%);
    pointer-events: none;
    z-index: 1;
    filter: blur(14px);
}

.studio-stage .three-viewport-canvas {
    position: relative;
    z-index: 2;
    width: 100% !important;
    height: 100% !important;
    display: block;
}

/* === HUD Panel System (overhaul): Bottom Metric / Gauge Row ===
   Decorative floating panel row beneath the 3D stage, matching the
   reference's bottom bank of circular-gauge readouts. Purely visual —
   no ids here are read by app.js. */
/* Gauge panels ride the stage's top-right; the whole bottom edge belongs to
   the round tool controls, so the two never collide. */
.hud-metric-row {
    position: absolute;
    left: auto;
    right: var(--ops-space-5);
    top: var(--ops-space-5);
    bottom: auto;
    transform: none;
    display: flex;
    gap: var(--ops-space-2);
    z-index: 20;
    pointer-events: none;
}

@media (max-width: 1100px) {
    .hud-metric-row { display: none; }
}

.hud-metric-panel {
    pointer-events: auto;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: var(--hud-panel-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border: 1px solid var(--hud-panel-border);
    border-radius: var(--hud-panel-radius);
    box-shadow: var(--hud-panel-shadow);
}

.hud-gauge {
    position: relative;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    background:
        radial-gradient(closest-side, var(--hud-panel-bg) 68%, transparent 70%),
        conic-gradient(var(--cyan-glow) calc(var(--gauge-val, 72) * 1%), rgba(255,255,255,0.08) 0);
}

.hud-gauge span {
    font-family: var(--font-hud);
    font-size: 8.5px;
    font-weight: 800;
    color: var(--text-main);
}

.hud-metric-copy {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.hud-metric-copy .hud-metric-label {
    font-family: var(--font-hud);
    font-size: 9px;
    font-weight: 800;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.hud-metric-copy .hud-metric-value {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-main);
}

/* Status badge pill (warn/ok/off dot + label), reference's
   "WARNING EXTREME HEAT" / green-dot status usage. */
.hud-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: var(--radius-capsule);
    font-family: var(--font-hud);
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    border: 1px solid var(--hud-panel-border);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-sub);
}

.hud-status-badge .hud-status-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--hud-status-on);
    box-shadow: 0 0 6px currentColor;
}

.hud-status-badge.warn {
    color: var(--ops-accent-danger);
    border-color: rgba(230, 74, 63, 0.4);
    background: rgba(230, 74, 63, 0.12);
}
.hud-status-badge.warn .hud-status-dot { background: var(--hud-status-warn); color: var(--hud-status-warn); }

.hud-status-badge.ok .hud-status-dot { background: var(--hud-status-on); color: var(--hud-status-on); }

/* Glassmorphism Controls Floating Pill */
/* Reference places the viewport controls as discrete round buttons in the
   lower-left of the stage, not as one centered bar. */
.studio-viewport-toolbar {
    position: absolute;
    bottom: var(--ops-space-5);
    left: var(--ops-space-5);
    transform: none;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: var(--ops-space-2);
    z-index: 25;
    box-shadow: none;
}

.studio-tool-btn {
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    color: var(--ops-ink-muted);
    padding: 0 var(--ops-space-3);
    height: 36px;
    min-width: 36px;
    border-radius: var(--ops-radius-full);
    font-family: inherit;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    white-space: nowrap;
    box-shadow: var(--ops-shadow-card);
    transition-property: var(--ui-props);
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.studio-tool-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.studio-tool-btn:hover {
    color: var(--ops-ink);
    background: var(--ops-surface-300);
    border-color: var(--ops-border-strong);
}

.studio-tool-btn.active {
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    border-color: var(--ops-accent-primary);
    box-shadow: var(--ops-shadow-card);
}



/* Right Dock: Model Vault */
.studio-vault-section {
    flex: 1;
    min-height: 0;
    height: 100%;
    overflow: hidden;
    padding: 16px 12px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.studio-search-bar {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(10, 11, 13, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-sm);
    padding: 8px 12px;
    gap: 8px;
    transition: border-color 0.2s;
    flex-shrink: 0;
}

.studio-search-bar:focus-within {
    border-color: rgba(255, 255, 255, 0.5);
}

.studio-search-glyph {
    width: 14px;
    height: 14px;
    color: var(--text-muted);
}

.studio-search-bar input {
    background: transparent;
    border: none;
    outline: none;
    color: var(--ops-ink);
    font-family: inherit;
    font-size: 11.5px;
    width: 100%;
}

.studio-vault-feed {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: max-content;
    gap: 8px;
    padding-right: 5px;
    padding-bottom: 24px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.45) rgba(16, 18, 20, 0.45);
}

.studio-vault-feed::-webkit-scrollbar {
    width: 6px;
}

.studio-vault-feed::-webkit-scrollbar-track {
    background: rgba(16, 18, 20, 0.45);
    border-radius: 4px;
}

.studio-vault-feed::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    transition: background 0.2s;
}

.studio-vault-feed::-webkit-scrollbar-thumb:hover {
    background: var(--ops-surface-300);
}

.studio-vault-card {
    background: #121214;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    padding: 7px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    user-select: none;
}

.studio-vault-card:hover {
    background: #18181c;
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.7);
}

.studio-vault-card.active {
    border: 1px solid var(--ops-accent-primary);
    background: var(--ops-surface-300);
    box-shadow: var(--ops-shadow-card);
}

.studio-vault-thumb {
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: var(--ops-radius-sm);
    background: linear-gradient(180deg, #32383f 0%, #1e2126 100%); border: 1px solid rgba(255, 255, 255, 0.03);
    border: 1px solid var(--ops-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    padding: var(--ops-space-3);
}

.studio-vault-thumb img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1), filter 0.25s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.25s ease;
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55));
}

/* Landing Page Black & White Contrast Effect on Inactive Vault Cards */
.studio-vault-card:not(.active) .studio-vault-thumb img {
    filter: brightness(0.98) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
    opacity: 0.85;
}

.studio-vault-card:not(.active):hover .studio-vault-thumb img {
    filter: brightness(1.05) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
    opacity: 1;
    transform: scale(1.08);
}

.studio-vault-card.active .studio-vault-thumb img {
    filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.65));
    opacity: 1;
}

.studio-vault-card.active:hover .studio-vault-thumb img {
    transform: scale(1.08);
}

.studio-vault-tag-pill {
    position: absolute;
    top: 5px;
    left: 5px;
    font-size: 8px;
    font-family: var(--font-hud);
    font-weight: 800;
    color: rgba(255, 255, 255, 0.85);
    background: rgba(0, 0, 0, 0.65);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    padding: 1px 5px;
    border-radius: 4px;
    letter-spacing: 0.03em;
    pointer-events: none;
}

.studio-vault-active-pill {
    position: absolute;
    top: 5px;
    right: 5px;
    font-size: 8px;
    font-family: var(--font-hud);
    font-weight: 900;
    color: var(--ops-accent-primary-ink);
    background: var(--ops-accent-primary);
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    box-shadow: none;
    pointer-events: none;
}

.studio-vault-card:not(.active) .studio-vault-active-pill {
    display: none !important;
}

.studio-vault-details {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 0 2px 2px 2px;
}

.studio-vault-title {
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ops-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.01em;
}

.studio-vault-meta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 9.5px;
    color: var(--ops-ink-muted);
}

.studio-vault-poly {
    font-family: var(--font-hud);
    color: var(--ops-ink-muted);
    font-size: 9.5px;
    font-weight: 500;
}

/* ==========================================================================
   MULTI-IMAGE DROPZONE GRID & DUAL SLOTS (FLAGSHIP ENGINE)
   ========================================================================== */

/* Duplicate rule removed - .multi-dropzone-grid is defined in Step 1 section */

.dropzone-slot-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    margin-bottom: 8px;
    padding: 0 4px;
}

.dropzone-slot-tag {
    font-family: var(--font-hud);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--ops-ink);
    background: rgba(255, 255, 255, 0.08);
    padding: 2px 6px;
    border-radius: 4px;
    border: 1px solid rgba(255, 255, 255, 0.12);
}

.dropzone-slot-tag.side-tag {
    color: var(--ops-accent-danger);
    background: rgba(230, 74, 63, 0.12);
    border-color: rgba(230, 74, 63, 0.3);
}

.dropzone-slot-sub {
    font-size: 10px;
    color: var(--ops-ink-muted);
    font-family: var(--font-mono, monospace);
}

.studio-multiview-drop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    width: 100%;
    margin-bottom: 12px;
}

/* When not flagship engine, hide the side view slot and collapse grids to 1 col */
.hide-side-slot .multi-image-slot-side {
    display: none !important;
}

.hide-side-slot.multi-dropzone-grid,
.hide-side-slot .multi-dropzone-grid,
.hide-side-slot.studio-multiview-drop-grid,
.hide-side-slot .studio-multiview-drop-grid {
    grid-template-columns: 1fr !important;
}

.step4-chain-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

/* Step 4 Pendant Preview Card */
.step4-pendant-preview-card {
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(10, 11, 13, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 10px;
}

.step4-pendant-thumb-box {
    width: 100%;
    height: 132px;
    border-radius: var(--ops-radius-sm);
    background: var(--ops-surface-300);
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--ops-border-subtle);
    padding: var(--ops-space-3);
}

.step4-pendant-thumb-box img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.step4-pendant-meta-wrap {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.step5-input-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.step5-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(16, 18, 20, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 7px;
    padding: 2px 8px;
    transition: border-color 0.2s;
}

.step5-input-wrap:focus-within {
    border-color: var(--cyan-glow);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.step5-input-prefix {
    font-family: var(--font-hud);
    font-size: 11px;
    color: var(--cyan-glow);
    font-weight: 600;
    margin-right: 4px;
}

.step5-text-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ops-ink);
    font-family: var(--font-hud);
    font-size: 11.5px;
    padding: 6px 0;
}

.step4-export-action-box {
    margin-top: auto;
    padding-top: 8px;
    flex-shrink: 0;
}

.step5-hero-export-btn {
    width: 100%;
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    border: none;
    border-radius: 9px;
    padding: 12px 14px;
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.02em;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(255, 255, 255, 0.35);
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.step5-hero-export-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 22px rgba(255, 255, 255, 0.55);
    filter: brightness(1.08);
}

/* Polished Chain Catalog & Rotation Preset Buttons */
.step4-chain-grid .chain-card {
    background: rgba(16, 18, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 8px;
    padding: 10px 8px;
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 700;
    color: var(--ops-ink);
    cursor: pointer;
    text-align: center;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.step4-chain-grid .chain-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.22);
    color: var(--ops-ink);
    transform: translateY(-1px);
}

.step4-chain-grid .chain-card.active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.6);
    color: var(--ops-ink);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.btn-rot-preset {
    background: rgba(16, 18, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 6px;
    padding: 6px 4px;
    font-family: var(--font-hud);
    font-size: 10px;
    font-weight: 600;
    color: var(--ops-ink-muted);
    cursor: pointer;
    text-align: center;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: ease;
}

.btn-rot-preset:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.2);
    color: var(--ops-ink);
}

.btn-rot-preset.active {
    background: rgba(255, 255, 255, 0.14);
    border-color: rgba(255, 255, 255, 0.55);
    color: var(--ops-ink);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

/* ==========================================================================
   STEP 5: FIVEM EXPORT WORKSTATION & ADVANCED MODALS DESIGN SYSTEM (V.1)
   ========================================================================== */

/* Step 5 Layout & Components */
.step5-config-card {
    background: rgba(16, 18, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step5-input-label {
    font-family: var(--font-hud);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.step5-input-wrap {
    display: flex;
    align-items: center;
    background: rgba(10, 11, 13, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-btn);
    overflow: hidden;
    transition-property: var(--ui-props);
    transition-duration: 0.2s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.step5-input-wrap:focus-within {
    border-color: var(--ops-accent-primary);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.step5-input-prefix {
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 700;
    color: var(--ops-accent-primary);
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.08);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    user-select: none;
}

.step5-text-input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ops-ink);
    font-family: var(--font-sans);
    font-size: 12px;
    font-weight: 600;
    padding: 8px 12px;
}

.step5-text-input.font-mono {
    font-family: monospace;
}

.step5-hint-text {
    font-size: 10.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

/* Locked Fit Parameters Matrix (2x2 Grid) */
.step5-fit-matrix {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.step5-fit-chip {
    background: rgba(16, 18, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.step5-fit-chip-label {
    font-family: var(--font-hud);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--text-muted);
    text-transform: uppercase;
}

.step5-fit-chip-val {
    font-family: var(--font-hud);
    font-size: 12.5px;
    font-weight: 800;
    color: var(--ops-accent-primary);
}

/* RAGE Shader Card */
.step5-shader-card {
    background: rgba(16, 18, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.step5-shader-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 11px;
    padding-bottom: 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}

.step5-shader-row:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.step5-shader-key {
    color: var(--text-sub);
    font-weight: 500;
}

.step5-shader-val {
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 700;
    color: var(--ops-ink);
}

.step5-shader-val.badge {
    background: rgba(255, 255, 255, 0.12);
    color: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
}

.step5-shader-val.highlight {
    color: var(--ops-accent-primary);
    background: rgba(251, 113, 133, 0.1);
    border: 1px solid rgba(251, 113, 133, 0.25);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
}

.step5-shader-val.highlight-diff {
    color: var(--ops-accent-success);
    background: rgba(52, 211, 153, 0.1);
    border: 1px solid rgba(52, 211, 153, 0.25);
    padding: 2px 7px;
    border-radius: 4px;
    font-size: 10px;
}

/* FiveM Package Tree View Card */
.step5-package-tree {
    background: rgba(16, 18, 20, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step5-tree-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 6px;
    border-radius: 6px;
    transition: background 0.15s ease;
}

.step5-tree-item:hover {
    background: rgba(255, 255, 255, 0.04);
}

.step5-tree-item.root {
    font-family: var(--font-hud);
    font-size: 11.5px;
    font-weight: 700;
    color: var(--ops-ink);
}

.step5-tree-item.child {
    padding-left: 20px;
    position: relative;
}

.step5-tree-item.child::before {
    content: '';
    position: absolute;
    left: 8px;
    top: -4px;
    bottom: 50%;
    width: 1px;
    background: rgba(255, 255, 255, 0.15);
}

.step5-tree-icon {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

.step5-tree-icon.folder { color: var(--ops-ink-muted); }
.step5-tree-icon.file.ydd { color: var(--ops-accent-primary); }
.step5-tree-icon.file.ytd { color: var(--ops-accent-success); }
.step5-tree-icon.file.lua { color: #a78bfa; }

.step5-tree-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.step5-tree-name {
    font-family: var(--font-hud);
    font-size: 11px;
    font-weight: 700;
    color: var(--ops-ink);
}

.step5-tree-desc {
    font-size: 9.5px;
    color: var(--text-muted);
}

.step5-tree-badge {
    margin-left: auto;
    font-family: var(--font-hud);
    font-size: 8.5px;
    font-weight: 700;
    background: rgba(255, 255, 255, 0.15);
    color: var(--ops-ink-muted);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Quick Server Setup Card */
.step5-server-cfg-card {
    background: rgba(10, 11, 13, 0.85);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.step5-cfg-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    font-family: var(--font-hud);
    font-size: 10px;
    font-weight: 700;
    color: var(--text-muted);
}

.step5-btn-copy-cfg {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--ops-ink);
    font-family: var(--font-hud);
    font-size: 9.5px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition-property: var(--ui-props);
    transition-duration: 0.15s;
    transition-timing-function: ease;
}

.step5-btn-copy-cfg:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
    color: var(--ops-ink);
}

.step5-cfg-code {
    padding: 10px;
    margin: 0;
    font-family: monospace;
    font-size: 11.5px;
    color: var(--ops-accent-primary);
    background: transparent;
    user-select: all;
}

/* Step 5 Export Action Section & Download Hub */
.step5-export-action-section {
    margin-top: auto;
}

.step5-download-hub {
    display: flex;
    flex-direction: column;
    gap: 8px;
    width: 100%;
}

.step5-hero-export-btn {
    width: 100%;
    background: linear-gradient(135deg, var(--ops-accent-success) 0%, var(--ops-accent-success) 55%, #047857 100%);
    color: var(--ops-ink);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-btn);
    padding: 12px 16px;
    font-family: var(--font-hud);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.04em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    box-shadow: 0 4px 20px rgba(52, 211, 153, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transition-property: var(--ui-props);
    transition-duration: 0.25s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
}

.step5-hero-export-btn:hover {
    transform: translateY(-2px);
    background: linear-gradient(135deg, var(--ops-accent-success) 0%, var(--ops-accent-success) 55%, var(--ops-accent-success) 100%);
    box-shadow: 0 8px 28px rgba(52, 211, 153, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.step5-hero-export-btn:active {
    transform: translateY(0);
}

/* ==========================================================================
   UNIFIED MODALS DESIGN SYSTEM (SETTINGS, VAULT, PROFILE, UV, LOCKED)
   ========================================================================== */

/* Modal Header Lead */
.modal-header-lead {
    display: flex;
    align-items: center;
    gap: 12px;
}

.modal-icon-badge {
    width: 38px;
    height: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5);
}

.modal-icon-badge.brand {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--ops-accent-primary);
}

.modal-icon-badge.cyan {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--ops-accent-primary);
}

.modal-icon-badge.gold {
    background: rgba(255, 255, 255, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.35);
    color: var(--ops-ink);
}

.modal-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.modal-title {
    margin: 0;
    font-family: var(--font-hud);
    font-size: 17px;
    font-weight: 800;
    color: var(--ops-ink);
    letter-spacing: -0.01em;
}

.modal-badge-pill {
    font-family: var(--font-hud);
    font-size: 9.5px;
    font-weight: 800;
    padding: 2px 8px;
    border-radius: var(--radius-capsule);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--ops-ink);
}

.modal-subtitle {
    margin: 2px 0 0 0;
    font-size: 11.5px;
    color: var(--text-muted);
    line-height: 1.4;
}

.modal-footer {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid var(--border-glass);
    background: rgba(10, 11, 13, 0.5);
}

/* Settings Modal Specifics */
.settings-modal-body {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-height: calc(88vh - 140px);
}

.settings-group-card {
    background: rgba(16, 18, 20, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: var(--radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.settings-group-title {
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: var(--font-hud);
    font-size: 10.5px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: var(--ops-ink);
    text-transform: uppercase;
}

.settings-field-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.settings-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-sub);
}

.settings-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.settings-input {
    width: 100%;
    height: 36px;
    padding: 8px 36px 8px 12px;
    background: rgba(10, 11, 13, 0.8);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: var(--radius-btn);
    color: var(--ops-ink);
    font-size: 12px;
    outline: none;
    transition: border-color 0.2s;
}

.settings-input:focus {
    border-color: var(--ops-accent-primary);
    box-shadow: 0 0 0 rgba(0,0,0,0);
}

.btn-toggle-mask {
    position: absolute;
    right: 8px;
    background: transparent;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    font-size: 13px;
    padding: 4px;
    transition: color 0.15s;
}

.btn-toggle-mask:hover {
    color: var(--ops-ink);
}

.settings-select {
    width: 100%;
    height: 38px;
    padding: 8px 12px;
    background: rgba(10, 11, 13, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: var(--radius-btn);
    color: var(--ops-ink);
    font-family: var(--font-hud);
    font-size: 11.5px;
    outline: none;
    cursor: pointer;
}

.settings-select:focus {
    border-color: var(--ops-accent-primary);
    box-shadow: 0 0 14px rgba(255, 255, 255, 0.3);
}

.settings-gpu-card {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm);
    padding: 10px 14px;
}

.settings-gpu-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-gpu-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--font-hud);
    font-size: 12.5px;
    color: var(--ops-ink);
}

.settings-gpu-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--ops-accent-success);
    box-shadow: 0 0 8px var(--ops-accent-success);
}

.settings-gpu-spec {
    font-size: 10.5px;
    color: var(--ops-accent-primary);
    font-family: var(--font-hud);
}

.settings-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radius-sm);
}

.settings-toggle-row.dev {
    border-style: dashed;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.03);
}

.settings-toggle-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.settings-toggle-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 700;
    color: var(--ops-ink);
}

.settings-pill-tag {
    font-family: var(--font-hud);
    font-size: 9px;
    font-weight: 800;
    padding: 1px 6px;
    border-radius: 4px;
    letter-spacing: 0.04em;
    background: rgba(255, 255, 255, 0.15);
    color: var(--ops-accent-primary);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.settings-pill-tag.dev {
    background: rgba(255, 255, 255, 0.15);
    color: var(--ops-accent-primary);
    border-color: rgba(255, 255, 255, 0.35);
}

.settings-toggle-desc {
    margin: 0;
    font-size: 11px;
    color: var(--text-muted);
    line-height: 1.35;
}

.settings-toggle-desc kbd {
    background: rgba(255, 255, 255, 0.1);
    padding: 1px 5px;
    border-radius: 3px;
    font-size: 9.5px;
    font-family: monospace;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* Switches */
.switch-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    margin: 0;
    cursor: pointer;
    flex-shrink: 0;
}

.switch-toggle input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider-toggle-round {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.18);
    transition-property: var(--ui-props);
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 34px;
}

.slider-toggle-round:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 3px;
    bottom: 3px;
    background-color: var(--ops-ink);
    transition-property: var(--ui-props);
    transition-duration: .3s;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: 50%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.switch-toggle input:checked + .slider-toggle-round {
    background-color: var(--ops-accent-primary);
    border-color: var(--ops-accent-primary);
    box-shadow: 0 0 0 rgba(0,0,0,0);
    color: var(--ops-accent-primary-ink);
}

.switch-toggle input:checked + .slider-toggle-round:before {
    transform: translateX(20px);
}

/* UV Modal Toolbar & Chips */
.uv-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 14px 20px;
    gap: 12px;
    flex-wrap: wrap;
}

.uv-meta-info {
    display: flex;
    gap: 8px;
}

.uv-meta-chip {
    font-family: var(--font-hud);
    font-size: 10.5px;
    color: var(--text-sub);
    background: rgba(255, 255, 255, 0.05);
    padding: 4px 10px;
    border-radius: var(--radius-capsule);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.uv-inspector-canvas-box {
    position: relative;
    width: calc(100% - 40px);
    aspect-ratio: 1 / 1;
    max-width: 520px;
    margin: 0 auto 20px auto;
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: #07080B;
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.85);
}

.uv-inspector-canvas-box img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.uv-inspector-canvas-box img:not(.active) {
    display: none;
}

.uv-inspector-canvas-box img.active {
    display: block;
}

.uv-inspector-canvas-box canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    display: none;
}

/* Modal Header & Close Button Alignment Fix */
.modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    border-bottom: 1px solid var(--ops-border-strong) !important;
    background: var(--ops-surface-200) !important;
}

.modal-header-lead {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
}

.btn-close-modal {
    background: var(--ops-surface-300) !important;
    border: 1px solid var(--ops-border-subtle) !important;
    color: var(--ops-ink-muted) !important;
    width: 32px !important;
    height: 32px !important;
    border-radius: var(--radius-btn-sm) !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 16px !important;
    flex-shrink: 0 !important;
    margin-left: 16px !important;
    transition-property: var(--ui-props) !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease !important;
}

.btn-close-modal:hover {
    background: var(--ops-accent-danger-muted) !important;
    border-color: var(--ops-accent-danger) !important;
    color: var(--ops-accent-danger) !important;
    transform: none !important;
}

/* Step 5 Viewport Floating Badge Position */
/* Stage HUD zones: status badge top-left, gauges top-right, tools bottom-left. */
.studio-viewport-status-badge {
    position: absolute !important;
    top: var(--ops-space-5) !important;
    left: var(--ops-space-5) !important;
    transform: none !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    background: var(--ops-surface-200) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: 1px solid var(--ops-border-subtle) !important;
    padding: 6px 14px !important;
    border-radius: var(--radius-capsule) !important;
    font-family: var(--font-hud) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: var(--ops-accent-success) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5) !important;
    z-index: 10 !important;
    pointer-events: none !important;
    white-space: nowrap !important;
}

/* Profile Modal Form Styling */
.profile-modal-body {
    overflow-y: auto;
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-height: calc(88vh - 140px);
}

.profile-form-grid .step5-text-input {
    background: rgba(10, 11, 13, 0.85) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    border-radius: var(--radius-btn) !important;
    height: 38px !important;
    padding: 8px 12px !important;
    font-size: 12px !important;
    color: #ffffff !important;
    transition-property: var(--ui-props) !important;
    transition-duration: 0.2s !important;
    transition-timing-function: ease !important;
}

.profile-form-grid .step5-text-input:focus {
    border-color: var(--ops-accent-primary) !important;
    box-shadow: 0 0 0 rgba(0,0,0,0) !important;
}

/* Locked Modal Window */
.modal-locked-window {
    background: rgba(14, 16, 23, 0.96) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    border-radius: 16px !important;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.9), 0 0 30px rgba(255, 255, 255, 0.1) !important;
}

/* ==========================================================================
   HUB PAGES (LANDING / CATEGORY) — STUDIO PARITY
   Reuses the studio's metric-tile look, but in normal flow at the bottom of
   the hub frame rather than absolutely pinned like the studio's row.
   ========================================================================== */
.hub-metric-row {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    align-items: stretch;
    gap: var(--ops-space-5);
    margin: 0 var(--ops-space-5) var(--ops-space-5) var(--ops-space-5);
}

.hub-metric-row .studio-telemetry-pill:nth-child(2) {
    background: var(--surface-light);
    border-color: var(--surface-light);
}

.hub-metric-row .studio-telemetry-pill:nth-child(2) .telemetry-label {
    color: var(--text-on-light-sub);
}

.hub-metric-row .studio-telemetry-pill:nth-child(2) .telemetry-value,
.hub-metric-row .studio-telemetry-pill:nth-child(2) .telemetry-value.positive {
    color: var(--text-on-light);
}

/* Deck header sits inside the frame now, so it carries its own padding */
.platform-hub-expanded .deck-header {
    padding: var(--ops-space-6) var(--ops-space-5) 0 var(--ops-space-5);
}

.platform-hub-expanded .tripo-floating-dock-wrap {
    padding: 0 var(--ops-space-5);
}

/* Engine/partner compatibility strip -> HUD panel */
.partner-logos-strip {
    margin: 0 var(--ops-space-5) var(--ops-space-4) var(--ops-space-5);
    padding: var(--ops-space-4) var(--ops-space-5);
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-lg);
    box-shadow: var(--ops-shadow-card);
}

.hub-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--ops-space-2);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ops-ink-muted);
}

.hub-breadcrumb .bc-active {
    color: var(--ops-ink);
    font-weight: 600;
}

/* Hub frame fills the viewport like .studio-workstation-frame, so the header,
   carousel stage and metric tiles are all visible without scrolling. */
.platform-hub-expanded {
    height: 100%;
    max-height: none;
    min-height: 0;
    gap: 0;
}

.platform-hub-expanded .arc-carousel-stage {
    flex: 1;
    min-height: 0;
    margin-top: 0;
}

.platform-hub-expanded .deck-header {
    padding: var(--ops-space-5) var(--ops-space-5) var(--ops-space-3) var(--ops-space-5);
}

.platform-hub-expanded .tripo-floating-dock-wrap {
    padding: 0 var(--ops-space-5) var(--ops-space-4) var(--ops-space-5);
}

/* ==========================================================================
   STEP 1 — same HUD language as the hub and studio pages
   ========================================================================== */
#wizard-step-1 .hub-nav-bar {
    max-width: none !important;
    margin: 0 !important;
}

#wizard-step-1 .hyper-hero-container {
    flex: 1;
    min-height: 0;
    max-width: none;
    margin: 0 var(--ops-space-5);
    padding: var(--ops-space-5);
    background: var(--ops-surface-100);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-xl);
    overflow: hidden;
}

#wizard-step-1 .hub-metric-row {
    margin: var(--ops-space-5);
}

/* The hero's inner card becomes a flat HUD panel */
#wizard-step-1 .hyper-glass-card {
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-lg);
    box-shadow: var(--ops-shadow-card);
    max-width: none;
}

/* Frame breathing room + no page scroll: the shell owns the viewport */
.wizard-main {
    padding: var(--ops-space-5) var(--ops-space-5) var(--ops-space-5) var(--ops-space-5);
    min-height: 0;
}

/* Cards are clipped by the STAGE (tall enough to contain them), not the
   viewport (shorter than a card, which sliced their tops/bottoms off). */
.arc-carousel-viewport {
    overflow: visible;
}

/* ==========================================================================
   FRAME BUDGET — compact the chrome so the carousel stage gets enough height
   for a full card (incl. the active card's scale) without clipping.
   ========================================================================== */
.platform-hub-expanded .deck-header {
    padding: var(--ops-space-3) var(--ops-space-5) var(--ops-space-2) var(--ops-space-5);
    gap: 2px;
}

.platform-hub-expanded .deck-title,
#wizard-step-1 .deck-title {
    font-size: 26px;
    line-height: 1.15;
}

.platform-hub-expanded .deck-subtitle,
#wizard-step-1 .deck-subtitle {
    font-size: 12.5px;
}

.platform-hub-expanded .hyper-badge-pill,
#wizard-step-1 .hyper-badge-pill {
    transform: scale(0.9);
}

.platform-hub-expanded .tripo-floating-dock-wrap {
    padding: 0 var(--ops-space-5) var(--ops-space-3) var(--ops-space-5);
}

.platform-hub-expanded .arc-carousel-stage {
    margin: 0 var(--ops-space-5) var(--ops-space-3) var(--ops-space-5);
    padding: var(--ops-space-3) 0;
}

.hub-metric-row {
    margin: 0 var(--ops-space-5) var(--ops-space-5) var(--ops-space-5);
}

.hub-metric-row .studio-telemetry-pill,
.studio-header-telemetry .studio-telemetry-pill {
    min-height: 72px;
    padding: var(--ops-space-3) var(--ops-space-5);
}

/* Final frame budget: give the carousel stage every spare pixel so a full
   card (plus the active card's scale) clears the stage edges. */
.platform-hub-expanded .arc-carousel-stage {
    padding: 0;
    margin: 0 var(--ops-space-5) var(--ops-space-3) var(--ops-space-5);
}

.hub-metric-row .studio-telemetry-pill,
.studio-header-telemetry .studio-telemetry-pill {
    min-height: 64px;
    padding: var(--ops-space-3) var(--ops-space-5);
}

.hub-metric-row .telemetry-value,
.studio-header-telemetry .telemetry-value {
    font-size: 20px;
    line-height: 24px;
}

/* The active card is lifted by the carousel's "pop" transform, leaving slack
   at the bottom of the stage. Nudge the track down so the card sits centred
   and neither edge clips. */
.platform-hub-expanded .arc-carousel-viewport {
    transform: translateY(14px);
}

/* Reclaim the last pixels so the scaled active card (451px) clears the stage. */
.platform-hub-expanded .deck-header,
#wizard-step-1 .deck-header {
    padding: var(--ops-space-2) var(--ops-space-5) 2px var(--ops-space-5);
}

.platform-hub-expanded .tripo-floating-dock-wrap {
    padding: 0 var(--ops-space-5) var(--ops-space-2) var(--ops-space-5);
}

.platform-hub-expanded .arc-carousel-stage {
    margin: 0 var(--ops-space-5) var(--ops-space-2) var(--ops-space-5);
}

.hub-metric-row {
    margin: 0 var(--ops-space-5) var(--ops-space-4) var(--ops-space-5);
}

.hub-metric-row .studio-telemetry-pill,
.studio-header-telemetry .studio-telemetry-pill {
    min-height: 56px;
    padding: var(--ops-space-2) var(--ops-space-5);
    gap: 2px;
}

.hub-metric-row .telemetry-value,
.studio-header-telemetry .telemetry-value {
    font-size: 18px;
    line-height: 22px;
}

/* Centre the track in the stage: the scaled active card grows upward from the
   track's top edge, so shift the track down by half the remaining slack. */
.platform-hub-expanded .arc-carousel-viewport {
    transform: translateY(13px);
}

/* ==========================================================================
   Legacy studio-step sizing forced height:100% against an auto-height
   .wizard-main, which let the frame grow past the viewport. Clamp steps 3/4
   to the same shared frame height as every other page.
   ========================================================================== */
#wizard-step-3.active,
#wizard-step-4.active {
    height: calc(100vh - 114px) !important;
    min-height: 620px !important;
    max-height: calc(100vh - 114px) !important;
}

body.step-3-active .wizard-main,
body.step-4-active .wizard-main,
body:has(#wizard-step-3.active) .wizard-main,
body:has(#wizard-step-4.active) .wizard-main,
.wizard-main:has(#wizard-step-3.active),
.wizard-main:has(#wizard-step-4.active) {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
}

/* ==========================================================================
   CONSISTENCY FIXES — no element escapes its container
   ========================================================================== */

/* Soft edge fade so outer carousel cards dissolve at the frame instead of
   being sliced by a hard vertical cut. */
.platform-hub-expanded .arc-carousel-stage {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

/* Grid/flex children must be allowed to shrink, or they overflow the rail. */
.studio-vault-feed,
.step4-chain-grid {
    min-width: 0;
}

.studio-vault-feed > *,
.step4-chain-grid > * {
    min-width: 0;
    max-width: 100%;
}

.studio-vault-card,
.studio-vault-thumb,
.studio-vault-details,
.studio-vault-title,
.chain-card {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
}

.studio-vault-title,
.studio-vault-poly {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Inputs must never exceed their wrapper. */
.step5-input-wrap,
.step5-text-input,
.studio-input-area,
.studio-select-dark {
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}

.step5-text-input {
    width: 100%;
}

/* ==========================================================================
   STEP 2 — same frame composition as every other page
   ========================================================================== */
#wizard-step-2 > .studio-card {
    flex: 1;
    min-height: 0;
    margin: 0 var(--ops-space-5);
    overflow-y: auto;
    border-radius: var(--ops-radius-xl);
    background: var(--ops-surface-100);
}

#wizard-step-2 .hub-metric-row {
    margin: var(--ops-space-5);
}

/* Nested cards inside a page-level card shouldn't repeat the big radius */
#wizard-step-2 .studio-card .studio-card {
    border-radius: var(--ops-radius-lg);
    background: var(--ops-surface-200);
}

/* Broken/empty preview slots read as empty HUD wells, not white boxes */
img:not([src]),
img[src=""] {
    opacity: 0;
}

/* ==========================================================================
   Carousel scales with the frame. Cards are a fixed 425px (451px when the
   active one is scaled), so on shorter viewports the stage would clip them.
   Scaling the track keeps the layout and the arc maths untouched.
   ========================================================================== */
.platform-hub-expanded .arc-carousel-viewport {
    transform-origin: center center;
}

@media (max-height: 899px) {
    .platform-hub-expanded .arc-carousel-viewport {
        transform: translateY(16px) scale(0.90);
    }
}

@media (max-height: 849px) {
    .platform-hub-expanded .arc-carousel-viewport {
        transform: translateY(16px) scale(0.83);
    }
}

@media (max-height: 799px) {
    .platform-hub-expanded .arc-carousel-viewport {
        transform: translateY(15px) scale(0.76);
    }
}

@media (max-height: 749px) {
    .platform-hub-expanded .arc-carousel-viewport {
        transform: translateY(13px) scale(0.68);
    }
}

@media (max-height: 699px) {
    .platform-hub-expanded .arc-carousel-viewport {
        transform: translateY(5px) scale(0.64);
    }
}

/* Header telemetry: compact inline readouts */
.studio-header-telemetry .telemetry-label {
    font-size: 10.5px;
    letter-spacing: 0.04em;
    text-transform: none;
    color: var(--ops-ink-muted);
}

.studio-header-telemetry .telemetry-value {
    font-size: 12px !important;
    line-height: 16px !important;
    font-weight: 600;
}

/* Top bar lead group (back button + breadcrumb) sits together on the left */
.hub-nav-lead {
    display: flex;
    align-items: center;
    gap: var(--ops-space-4);
    min-width: 0;
}

/* ==========================================================================
   STEP 1 — single image input, T Final engine only, page-1/2 composition
   Extra slots and the engine deck are hidden rather than deleted so every
   input id and event handler app.js binds to stays intact.
   ========================================================================== */

/* One image input only (front view) */
#slot-left-image-step1,
#slot-back-image-step1,
#slot-right-image-step1 {
    display: none !important;
}

#step1-dropzone-grid {
    grid-template-columns: 1fr !important;
}

#main-drop-zone {
    min-height: 190px;
}

/* No multi-angle helper with a single input, and no engine picker:
   wizardState.pipeline already defaults to T_FINAL. */
.turnaround-assistant-bar,
.engine-selector-deck {
    display: none !important;
}

/* ---- Composition: top bar, then centred title, then the panel (pages 1/2) ---- */
#wizard-step-1 .hyper-hero-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ops-space-4);
    overflow-y: auto;
}

#wizard-step-1 .hyper-hero-left {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    max-width: 780px;
    gap: var(--ops-space-2);
}

#wizard-step-1 .hyper-title {
    font-size: 30px;
    line-height: 1.15;
}

#wizard-step-1 .hyper-subtitle {
    font-size: 13px;
    max-width: 620px;
    margin-bottom: 0;
}

#wizard-step-1 .hyper-cta-row {
    justify-content: center;
}

#wizard-step-1 .hyper-hero-right {
    width: 100%;
    max-width: 620px;
    margin: 0 auto;
}

#wizard-step-1 .hyper-aurora-glow {
    display: none;
}

#wizard-step-1 .hyper-glass-card {
    max-width: none;
}

/* Studio header holds breadcrumb + engine badge + telemetry + actions.
   Let every group shrink so the row can never exceed the frame. */
.studio-workstation-header > * {
    min-width: 0;
}

.studio-header-left,
.studio-header-telemetry,
.studio-header-actions {
    min-width: 0;
    flex-shrink: 1;
}

.studio-header-telemetry {
    overflow: hidden;
}

.studio-header-actions {
    flex-shrink: 0;
}

.studio-breadcrumb,
.studio-bc-current,
.studio-engine-badge {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 1500px) {
    .studio-header-telemetry .studio-telemetry-pill:nth-child(n+3) {
        display: none;
    }
}

@media (max-width: 1320px) {
    .studio-header-telemetry {
        display: none;
    }
}

/* Header telemetry pills must fit the 48px header, not the old tile height. */
.studio-header-telemetry .studio-telemetry-pill {
    min-height: 0 !important;
    height: 28px;
    padding: 0 12px !important;
    gap: 6px !important;
}

/* ==========================================================================
   STEP 1 deck header mirrors the hub pages EXACTLY
   (badge y160/h22, title y203/h30, subtitle y235/h18, panel y331)
   ========================================================================== */
#wizard-step-1 .hyper-hero-container {
    padding: 0;
    gap: 0;
    justify-content: flex-start;
    overflow: hidden;
}

#wizard-step-1 .hyper-hero-left {
    max-width: none;
    width: 100%;
}

#wizard-step-1 .hyper-title,
#wizard-step-1 .hyper-subtitle {
    margin: 0;
    max-width: none;
    white-space: nowrap;
}

/* CTA row occupies the same slot as the hub pages' creator dock */
#wizard-step-1 .hyper-cta-row {
    padding: 0 var(--ops-space-5) var(--ops-space-3) var(--ops-space-5);
    margin: 0;
    min-height: 56px;
    align-items: center;
}

/* the input panel becomes the "stage": same frame, same margins, fills down */
#wizard-step-1 .hyper-hero-right {
    flex: 1;
    min-height: 0;
    width: auto;
    max-width: none;
    margin: 0 var(--ops-space-5) var(--ops-space-3) var(--ops-space-5);
    padding: var(--ops-space-5);
    background: var(--ops-surface-100);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-xl);
    overflow-y: auto;
    display: flex;
    justify-content: center;
}

#wizard-step-1 .hyper-dock-layout {
    width: 100%;
    max-width: 620px;
    align-items: flex-start;
}

/* Final: step 1's deck block resolves to the SAME values as pages 1/2.
   (Earlier #wizard-step-1 rules set 30px/13px/8px-gap and were winning.) */
#wizard-step-1 .deck-header {
    gap: 2px;
}

#wizard-step-1 .hyper-title,
#wizard-step-1 .deck-title {
    font-size: 26px;
    line-height: 1.15;
    margin: 0;
}

#wizard-step-1 .hyper-subtitle,
#wizard-step-1 .deck-subtitle {
    font-size: 12.5px;
    line-height: 1.45;
    margin: 0;
}

/* Last-pixel alignment: land step 1's deck + CTA + panel on page 1's exact Ys
   (title 203, subtitle 235, CTA slot 263, panel 331). */
#wizard-step-1 .deck-header {
    padding-top: 5px;
    padding-bottom: 0;
}

#wizard-step-1 .hyper-cta-row {
    margin-top: 10px;
    padding: 0 var(--ops-space-5) var(--ops-space-3) var(--ops-space-5);
}

/* Panel lands on page 1's stage Y (331) and centres its card, so the framed
   area reads as a deliberate stage rather than an empty box. */
#wizard-step-1 .hyper-hero-right {
    margin-top: 10px;
    align-items: center;
    justify-content: center;
}

#wizard-step-1 .hyper-dock-layout {
    max-width: 680px;
    align-items: center;
}

/* One frame, not three: the stage is the frame, the form sits inside it as
   content (pages 1/2 do the same — the stage frames the cards). */
#wizard-step-1 .hyper-glass-card {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 0;
    width: 100%;
    max-width: none;
}

#wizard-step-1 .hyper-dock-layout {
    max-width: 560px;
    width: 100%;
}

/* The hero container is a COLUMN flex: align-items governs WIDTH here.
   `center` was shrinking the deck and the stage to content width (325px).
   Stretch them to the frame; the deck/CTA centre their own contents. */
#wizard-step-1 .hyper-hero-container {
    align-items: stretch;
}

#wizard-step-1 .deck-header {
    align-items: center;
    text-align: center;
}

#wizard-step-1 .hyper-cta-row {
    display: flex;
    justify-content: center;
}

/* The hero container is the page body (like .platform-hub-expanded), not a
   frame. An earlier rule gave it margin+border+background, which produced a
   nested frame and shrank the stage by 42px. */
#wizard-step-1 .hyper-hero-container {
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
}

/* ==========================================================================
   STEP 1 INPUT — single hero dropzone in HUD language
   Tabs (Image/Text) and Quick Samples are hidden, not deleted, so the
   #tab-mode-* and #preset-* ids app.js binds to stay intact.
   ========================================================================== */
#wizard-step-1 .hyper-card-tabs,
#wizard-step-1 .hyper-presets-bar {
    display: none !important;
}

/* Proportionate to the stage */
#wizard-step-1 .hyper-dock-layout {
    max-width: 760px;
    width: 100%;
}

#wizard-step-1 #mode-upload-container {
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-4);
}

/* The dropzone: flat HUD surface, hairline border, big enough to be the hero */
#wizard-step-1 #main-drop-zone {
    aspect-ratio: auto;
    height: auto;
    min-height: 380px;
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-lg);
    box-shadow: var(--ops-shadow-card);
    transition: border-color 0.15s ease, background 0.15s ease;
}

#wizard-step-1 #main-drop-zone:hover {
    border-color: var(--ops-border-strong);
    background: var(--ops-surface-300);
}

#wizard-step-1 #main-drop-zone.drag-over,
#wizard-step-1 #main-drop-zone.dragover {
    border-color: var(--ops-accent-primary);
    background: var(--ops-surface-300);
}

/* Slot header row (FRONT tag) as a HUD chip in the corner */
#wizard-step-1 #main-drop-zone .dropzone-slot-header {
    position: absolute;
    top: var(--ops-space-3);
    left: var(--ops-space-3);
    z-index: 2;
}

#wizard-step-1 .dropzone-slot-tag {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 9px;
    border-radius: var(--ops-radius-sm);
    background: var(--ops-surface-300);
    border: 1px solid var(--ops-border-subtle);
    color: var(--ops-ink-muted);
    box-shadow: none;
    backdrop-filter: none;
}

/* Empty-state: icon disc + label + helper line */
#wizard-step-1 .hyper-drop-empty {
    margin: 0;
    gap: var(--ops-space-2);
}

#wizard-step-1 .hyper-plus-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--ops-radius-full);
    background: var(--ops-surface-300);
    border: 1px solid var(--ops-border-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    font-weight: 300;
    color: var(--ops-ink);
    margin-bottom: var(--ops-space-2);
}

#wizard-step-1 #main-drop-zone:hover .hyper-plus-icon {
    border-color: var(--ops-border-strong);
}

#wizard-step-1 .hyper-drop-hint {
    font-size: 13px;
    font-weight: 600;
    color: var(--ops-ink);
    letter-spacing: 0;
}

#wizard-step-1 .hyper-drop-hint::after {
    content: "Drop a pendant photo here, click to browse, or paste with Ctrl+V";
    display: block;
    margin-top: 4px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ops-ink-muted);
}

/* Loaded-image state fills the taller well */
#wizard-step-1 .hyper-preview-box {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--ops-space-4);
}

#wizard-step-1 .hyper-preview-box img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: var(--ops-radius-sm);
}

/* Generate CTA: same primary as everywhere else */
#wizard-step-1 .hyper-btn-generate {
    height: 48px;
    border-radius: var(--ops-radius-md);
    font-size: 12px;
    letter-spacing: 0.08em;
}

/* Same soft side-fade as the carousel stages on pages 1/2 */
#wizard-step-1 .hyper-hero-right {
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 7%, #000 93%, transparent 100%);
}

/* Slot header is absolutely positioned; let it hug its chip instead of
   keeping its old full-row width. */
#wizard-step-1 #main-drop-zone .dropzone-slot-header {
    width: auto;
    right: auto;
    display: inline-flex;
}

/* ==========================================================================
   STEP 1 STAGE COMPOSITION — input card + spec rail
   Same anatomy as the platform cards (kicker / hero / body / CTA) beside
   the same HUD panels the studio rails use.
   ========================================================================== */
#wizard-step-1 .hyper-hero-right {
    padding: var(--ops-space-6);
    align-items: center;
}

#wizard-step-1 .hyper-dock-layout {
    display: grid;
    grid-template-columns: minmax(0, 1.35fr) minmax(280px, 0.85fr);
    gap: var(--ops-space-5);
    align-items: stretch;
    width: 100%;
    max-width: 1080px;
}

/* ---- the input card (left) ---- */
#wizard-step-1 .hyper-glass-card {
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-lg);
    box-shadow: var(--ops-shadow-card);
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    min-height: 0;
}

#wizard-step-1 #mode-upload-container {
    flex: 1;
    min-height: 0;
    gap: 0;
}

#wizard-step-1 #step1-dropzone-grid {
    flex: 1;
    min-height: 0;
    display: flex !important;
}

/* hero zone = the drop well, flush inside the card like .card-hero-zone */
#wizard-step-1 #main-drop-zone {
    flex: 1;
    min-height: 300px;
    border: none;
    border-radius: 0;
    box-shadow: none;
    background:
        radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.04) 0%, transparent 60%),
        var(--ops-surface-300);
}

/* inner dashed target so the well reads as a drop zone, not an empty tile */
#wizard-step-1 #main-drop-zone::before {
    content: '';
    position: absolute;
    inset: var(--ops-space-4);
    border: 1px dashed var(--ops-border-strong);
    border-radius: var(--ops-radius-md);
    pointer-events: none;
    opacity: 0.55;
    transition: opacity 0.15s ease, border-color 0.15s ease;
}

#wizard-step-1 #main-drop-zone:hover::before,
#wizard-step-1 #main-drop-zone.dragover::before {
    opacity: 1;
    border-color: var(--ops-accent-primary);
}

#wizard-step-1 #main-drop-zone:hover,
#wizard-step-1 #main-drop-zone.dragover {
    background:
        radial-gradient(ellipse at 50% 42%, rgba(255, 255, 255, 0.07) 0%, transparent 60%),
        var(--ops-surface-300);
}

/* kicker chip top-left + a status pill top-right, like .card-top-bar */
#wizard-step-1 #main-drop-zone .dropzone-slot-header {
    top: var(--ops-space-4);
    left: var(--ops-space-4);
}

#wizard-step-1 #main-drop-zone::after {
    content: 'AWAITING INPUT';
    position: absolute;
    top: var(--ops-space-4);
    right: var(--ops-space-4);
    font-family: var(--font-hud);
    font-size: 9px;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 4px 9px;
    border-radius: var(--ops-radius-full);
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    color: var(--ops-ink-muted);
    z-index: 2;
}

#wizard-step-1 .hyper-plus-icon {
    width: 52px;
    height: 52px;
    font-size: 24px;
    background: var(--ops-surface-200);
}

#wizard-step-1 .hyper-drop-hint {
    font-size: 13.5px;
}

#wizard-step-1 .hyper-drop-hint::after {
    font-size: 11.5px;
}

/* body zone = title / subtitle / chips, like .card-body-zone */
#wizard-step-1 .input-card-body {
    padding: var(--ops-space-4) var(--ops-space-5) var(--ops-space-3) var(--ops-space-5);
    border-top: 1px solid var(--ops-border-subtle);
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-3);
}

#wizard-step-1 .input-card-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--ops-ink);
    letter-spacing: -0.01em;
}

#wizard-step-1 .input-card-subtitle {
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ops-ink-muted);
    margin-top: 2px;
}

#wizard-step-1 .input-card-body .card-spec-pills {
    margin-top: 0;
}

/* CTA sits in the card footer, same as .card-cta-btn */
#wizard-step-1 .hyper-btn-generate {
    margin: 0 var(--ops-space-5) var(--ops-space-5) var(--ops-space-5);
    width: auto;
    height: 44px;
    border-radius: var(--ops-radius-md);
    font-size: 11.5px;
    letter-spacing: 0.08em;
}

/* ---- the spec rail (right): studio panels, stacked ---- */
#wizard-step-1 .input-spec-rail {
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-4);
    min-width: 0;
}

#wizard-step-1 .input-spec-rail .studio-dock-section {
    flex: 0 0 auto;
}

#wizard-step-1 .input-spec-rail .studio-dock-section:last-child {
    flex: 1;
}

/* label / value rows — the reference's "Building: Turbine" pattern */
.hud-kv-list {
    display: flex;
    flex-direction: column;
}

.hud-kv-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ops-space-3);
    padding: 7px 0;
    border-bottom: 1px solid var(--ops-border-subtle);
    font-size: 11.5px;
}

.hud-kv-row:last-child {
    border-bottom: none;
}

.hud-kv-label {
    color: var(--ops-ink-muted);
    font-weight: 500;
}

.hud-kv-value {
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--ops-ink);
    background: var(--ops-surface-300);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-sm);
    padding: 3px 8px;
    white-space: nowrap;
}

.hud-status-dot {
    width: 9px;
    height: 9px;
    border-radius: var(--ops-radius-full);
    background: var(--ops-accent-neutral-dot);
    flex-shrink: 0;
}

.hud-status-dot.on {
    background: var(--ops-accent-success);
    box-shadow: var(--ops-shadow-success-glow);
}

/* Live state without JS: when the preview box is shown (app.js removes
   .hidden after a successful load), flip the status dot and the pill. */
#wizard-step-1:has(#upload-preview-box:not(.hidden)) #lbl-step1-ref-dot {
    background: var(--ops-accent-success);
    box-shadow: var(--ops-shadow-success-glow);
}

#wizard-step-1:has(#upload-preview-box:not(.hidden)) #main-drop-zone::after {
    content: 'REFERENCE LOADED';
    color: var(--ops-accent-success);
    border-color: rgba(52, 211, 153, 0.45);
}

#wizard-step-1:has(#upload-preview-box:not(.hidden)) #main-drop-zone::before {
    opacity: 0;
}

/* ==========================================================================
   SLIDER UX — nudge buttons, typed entry, reset, bigger grab target
   ========================================================================== */
.slider-track-wrap {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    align-items: center;
    gap: var(--ops-space-2);
    min-width: 0;
}

.slider-track-wrap > input[type="range"] {
    flex: 1;
    min-width: 0;
    grid-column: auto;
    grid-row: auto;
    /* taller invisible hit area so the thumb is easy to grab */
    height: 20px;
    background: transparent;
    padding: 0;
    cursor: pointer;
}

.slider-track-wrap > input[type="range"]::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: var(--ops-radius-full);
    background: inherit;
}

.slider-track-wrap > input[type="range"]::-webkit-slider-thumb {
    width: 14px;
    height: 22px;
    margin-top: -8px;
    border-radius: 5px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.6), 0 0 0 1px var(--ops-border-strong);
}

.slider-nudge {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    border-radius: var(--ops-radius-full);
    background: var(--ops-surface-300);
    border: 1px solid var(--ops-border-subtle);
    color: var(--ops-ink);
    font-size: 15px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    user-select: none;
    padding: 0;
    transition: background 0.12s ease, border-color 0.12s ease, transform 0.08s ease;
}

.slider-nudge:hover {
    background: var(--ops-surface-200);
    border-color: var(--ops-border-strong);
}

.slider-nudge:active {
    transform: scale(0.92);
    background: var(--ops-accent-primary);
    color: var(--ops-accent-primary-ink);
    border-color: var(--ops-accent-primary);
}

.slider-nudge:focus-visible {
    outline: 2px solid var(--ops-focus-ring);
    outline-offset: 2px;
}

/* readout becomes an obvious input target */
.studio-value-readout.is-editable {
    cursor: text;
    transition: border-color 0.12s ease, background 0.12s ease;
}

.studio-value-readout.is-editable:hover {
    border-color: var(--ops-border-strong);
    background: var(--ops-surface-200);
}

.slider-type-input {
    width: 100%;
    min-width: 44px;
    background: transparent;
    border: none;
    outline: none;
    color: var(--ops-ink);
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: 500;
    text-align: center;
    padding: 0;
    -moz-appearance: textfield;
}

.slider-type-input::-webkit-inner-spin-button,
.slider-type-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.studio-value-readout:has(.slider-type-input) {
    border-color: var(--ops-accent-primary);
}

/* panel-level reset */
.slider-reset-all {
    margin-left: auto;
    margin-right: 14px;
    height: 20px;
    padding: 0 8px;
    border-radius: var(--ops-radius-full);
    background: transparent;
    border: 1px solid var(--ops-border-subtle);
    color: var(--ops-ink-muted);
    font-family: var(--font-hud);
    font-size: 9.5px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    transition: color 0.12s ease, border-color 0.12s ease, background 0.12s ease;
}

.slider-reset-all:hover {
    color: var(--ops-ink);
    border-color: var(--ops-border-strong);
    background: var(--ops-surface-300);
}

/* the sidebar h4 chevron is ::after; keep reset left of it */
.sidebar-panel h4 .slider-reset-all {
    margin-right: 6px;
}

/* compact icon reset so panel titles stay on one line in the rails */
.slider-reset-all {
    width: 22px;
    height: 22px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.slider-reset-all svg {
    width: 12px;
    height: 12px;
}

.studio-dock-title {
    white-space: nowrap;
    min-width: 0;
}

/* ==========================================================================
   TOPS STUDIO (garment -> 4-angle try-on -> isolation -> Tripo staging)
   ========================================================================== */
.tops-studio {
    display: grid;
    grid-template-columns: minmax(280px, 340px) 1fr;
    gap: var(--ops-space-6);
    padding: var(--ops-space-6);
    max-width: 1400px;
    margin: 0 auto;
    width: 100%;
    box-sizing: border-box;
}
.tops-panel { display: flex; flex-direction: column; gap: var(--ops-space-4); }
.tops-panel-block,
.tops-views {
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-md);
    padding: var(--ops-space-4);
}
.tops-heading {
    font-family: var(--font-hud);
    font-size: 13px;
    font-weight: 700;
    color: var(--ops-ink);
    margin: 0 0 var(--ops-space-2);
}
.tops-sub { font-size: 12px; color: var(--ops-ink-muted); margin: 0 0 var(--ops-space-3); line-height: 1.45; }
.tops-dropzone {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    border: 1px dashed var(--ops-border-strong);
    border-radius: var(--ops-radius-sm);
    background: var(--ops-canvas);
    cursor: pointer;
    overflow: hidden;
}
.tops-dropzone:hover,
.tops-dropzone.dragging { border-color: var(--ops-accent-primary); }
.tops-dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--ops-space-2);
    font-size: 12px;
    color: var(--ops-ink-muted);
}
.tops-dropzone-empty svg { width: 22px; height: 22px; }
.tops-garment-preview { max-width: 100%; max-height: 260px; object-fit: contain; }
.tops-file-name { font-size: 11px; color: var(--ops-ink-faint); margin-top: var(--ops-space-2); word-break: break-all; }
.tops-toggle { display: flex; gap: var(--ops-space-2); align-items: flex-start; font-size: 12px; color: var(--ops-ink); line-height: 1.4; cursor: pointer; }
.tops-toggle input { margin-top: 2px; }
.tops-key-status { font-size: 11px; color: var(--ops-ink-muted); margin: var(--ops-space-3) 0; }
.tops-key-status.warn { color: #f0b429; }
.tops-generate-btn { width: 100%; justify-content: center; }

.tops-stepper { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--ops-space-3); }
.tops-stepper li { display: flex; gap: var(--ops-space-3); align-items: flex-start; }
.tops-step-dot {
    flex: none;
    width: 12px;
    height: 12px;
    margin-top: 3px;
    border-radius: var(--ops-radius-full);
    border: 2px solid var(--ops-border-strong);
    box-sizing: border-box;
}
.tops-step-label { font-size: 12.5px; font-weight: 600; color: var(--ops-ink-muted); }
.tops-step-detail { font-size: 11px; color: var(--ops-ink-faint); margin-top: 2px; line-height: 1.4; }
.tops-stepper li[data-state="active"] .tops-step-dot { border-color: var(--ops-focus-ring); animation: tops-pulse 1.1s ease-in-out infinite; }
.tops-stepper li[data-state="active"] .tops-step-label,
.tops-stepper li[data-state="done"] .tops-step-label { color: var(--ops-ink); }
.tops-stepper li[data-state="done"] .tops-step-dot { border-color: var(--ops-accent-success); background: var(--ops-accent-success); }
.tops-stepper li[data-state="error"] .tops-step-dot { border-color: var(--ops-accent-danger); background: var(--ops-accent-danger); }
.tops-stepper li[data-state="error"] .tops-step-detail { color: var(--ops-accent-danger); }
@keyframes tops-pulse { 50% { box-shadow: 0 0 0 4px rgba(90, 200, 250, 0.25); } }

.tops-views-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--ops-space-3); flex-wrap: wrap; margin-bottom: var(--ops-space-3); }
.tops-views-bar .tops-heading { margin: 0; }
.tops-view-tabs { display: flex; gap: 2px; background: var(--ops-canvas); border-radius: var(--ops-radius-full); padding: 3px; }
.tops-view-tabs button {
    border: 0;
    background: transparent;
    color: var(--ops-ink-muted);
    font: 600 11.5px var(--font-hud);
    padding: 6px 12px;
    border-radius: var(--ops-radius-full);
    cursor: pointer;
}
.tops-view-tabs button[aria-selected="true"] { background: var(--ops-accent-primary); color: var(--ops-accent-primary-ink); }

.tops-view-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--ops-space-3); }
.tops-view { margin: 0; }
.tops-view-canvas {
    aspect-ratio: var(--tops-view-aspect, 2 / 3);
    background: var(--ops-canvas);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.tops-view-grid.checker .tops-view-canvas {
    background-color: #1a1d20;
    background-image: conic-gradient(#24282c 25%, transparent 0 50%, #24282c 0 75%, transparent 0);
    background-size: 16px 16px;
}
.tops-view-canvas img { width: 100%; height: 100%; object-fit: contain; display: block; }
.tops-view-empty { font-size: 11px; color: var(--ops-ink-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.tops-view figcaption { display: flex; justify-content: space-between; gap: var(--ops-space-2); font-size: 11.5px; color: var(--ops-ink); margin-top: var(--ops-space-2); }
.tops-view-meta { color: var(--ops-ink-faint); text-align: right; }

.tops-milestone {
    margin-top: var(--ops-space-4);
    padding: var(--ops-space-3) var(--ops-space-4);
    border-radius: var(--ops-radius-sm);
    border: 1px solid var(--ops-accent-success);
    background: var(--ops-accent-success-muted);
    font-size: 12px;
    color: var(--ops-ink);
}
.tops-milestone.error { border-color: var(--ops-accent-danger); background: var(--ops-accent-danger-muted); }
.tops-tripo-row { display: flex; align-items: center; gap: var(--ops-space-3); flex-wrap: wrap; margin-top: var(--ops-space-3); }
.tops-tripo-status { font-size: 11.5px; color: var(--ops-ink-muted); }
.tops-milestone p { margin: 4px 0 0; color: var(--ops-ink-muted); line-height: 1.45; word-break: break-word; }

@media (max-width: 900px) {
    .tops-studio { grid-template-columns: 1fr; padding: var(--ops-space-4); }
    .tops-view-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.tops-reprocess-btn { margin-top: var(--ops-space-2); }
.tops-view-download { display: block; margin-top: 6px; text-align: center; font-size: 11.5px; font-weight: 600; color: var(--ops-ink); border: 1px solid var(--ops-border-strong); border-radius: var(--ops-radius-full); padding: 5px 0; text-decoration: none; }
.tops-view-download:hover { border-color: var(--ops-accent-primary); }
.tops-job-select { width: 100%; background: var(--ops-canvas); color: var(--ops-ink); border: 1px solid var(--ops-border-strong); border-radius: var(--ops-radius-sm); padding: 8px 10px; font-size: 12px; }
.tops-side-hint { margin-top: var(--ops-space-3); margin-bottom: var(--ops-space-2); }
.tops-side-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--ops-space-2); }
.tops-side-slot {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1;
    border: 1px dashed var(--ops-border-strong);
    border-radius: var(--ops-radius-sm);
    background: var(--ops-canvas);
    cursor: pointer;
    overflow: hidden;
    font-size: 11px;
    color: var(--ops-ink-muted);
}
.tops-side-slot:hover { border-color: var(--ops-accent-primary); }
.tops-side-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.tops-side-slot img:not(.hidden) + span { position: absolute; bottom: 3px; left: 5px; color: var(--ops-ink); text-shadow: 0 1px 2px #000; }
.tops-side-clear {
    position: absolute; top: 3px; right: 3px;
    width: 20px; height: 20px; border: 0; border-radius: var(--ops-radius-full);
    background: rgba(0, 0, 0, 0.7); color: var(--ops-ink); cursor: pointer; line-height: 20px; padding: 0;
}
.tops-view-redo {
    display: block; width: 100%; margin-top: 6px; padding: 5px 0;
    font-size: 11.5px; font-weight: 600; color: var(--ops-ink-muted);
    background: transparent; border: 1px dashed var(--ops-border-strong);
    border-radius: var(--ops-radius-full); cursor: pointer;
}
.tops-view-redo:hover:not(:disabled) { color: var(--ops-ink); border-color: var(--ops-accent-primary); }
.tops-view-redo:disabled { opacity: 0.5; cursor: default; }

/* Compact studio: 4 upload tiles in one row, left column fits the viewport */
.tops-upload-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--ops-space-2); }
.tops-upload-row .tops-tile { min-height: 0; aspect-ratio: 1; }
.tops-upload-row .tops-dropzone { border-style: solid; }
.tops-upload-row .tops-dropzone-empty { gap: 4px; font-size: 11px; }
.tops-upload-row .tops-dropzone-empty svg { width: 16px; height: 16px; }
.tops-upload-row .tops-garment-preview { width: 100%; height: 100%; max-height: none; object-fit: contain; }
.tops-panel-block { padding: var(--ops-space-3); }
.tops-panel { gap: var(--ops-space-3); }
.tops-heading { margin-bottom: 4px; }
.tops-sub { margin-bottom: var(--ops-space-2); }
.tops-key-status { margin: var(--ops-space-2) 0; }
.tops-stepper { gap: var(--ops-space-2); }
.tops-studio { padding-top: var(--ops-space-4); padding-bottom: var(--ops-space-4); align-items: start; }
@media (min-width: 901px) {
    .tops-panel { position: sticky; top: var(--ops-space-4); max-height: calc(100vh - 170px); overflow-y: auto; }
}

/* ==========================================================================
   DE-DECORATION PASS (2026-09-23)
   Flat, quiet headings; no glow, gradient text or pulsing status dots.
   ========================================================================== */
.deck-title,
#wizard-step-1 .deck-title,
#wizard-step-1 .hyper-title {
    background: none;
    -webkit-background-clip: border-box;
    background-clip: border-box;
    -webkit-text-fill-color: currentColor;
    color: var(--ops-ink);
    filter: none;
    font-weight: 700;
    letter-spacing: -0.015em;
}

.deck-subtitle,
#wizard-step-1 .deck-subtitle {
    color: var(--ops-ink-muted);
    text-shadow: none;
}

.deck-header {
    gap: 4px;
    padding-top: var(--ops-space-5);
    padding-bottom: var(--ops-space-2);
}

.pulse-dot {
    animation: none;
    box-shadow: none;
}

/* Card subtitle now carries the plain description; give it room */
.arc-card-item .card-subtitle {
    white-space: normal;
}

/* Chains page: the panel stands alone now that the decorative rail is gone */
#wizard-step-1 .hyper-dock-layout {
    grid-template-columns: minmax(0, 640px);
    justify-content: center;
}

#wizard-step-1 #main-drop-zone::after {
    content: none;
}

/* ---------- Settings > API keys ---------- */
.api-keys-panel { display: flex; flex-direction: column; gap: 10px; }
.api-keys-note { font-size: 11px; color: var(--text-muted); margin: 0; line-height: 1.45; }
.api-keys-row { display: flex; flex-direction: column; gap: 5px; }
.api-keys-controls { display: flex; gap: 6px; }
.api-keys-controls .settings-select { flex: 1; min-width: 0; }
.api-keys-btn { padding: 6px 12px; font-size: 12px; white-space: nowrap; }
.api-keys-add { display: grid; grid-template-columns: 130px 1fr 1.4fr auto; gap: 6px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.api-keys-add .settings-input { padding-right: 12px; }
.api-keys-msg { font-size: 11.5px; margin: 0; min-height: 1em; color: var(--text-sub); }
.api-keys-msg.ok { color: var(--ops-accent-success); }
.api-keys-msg.err { color: var(--ops-accent-danger); }
@media (max-width: 640px) { .api-keys-add { grid-template-columns: 1fr 1fr; } }

/* ==========================================================================
   LAYOUT PASS (2026-09-24)
   Hub pages: header gets real breathing room, the carousel sits directly on
   the frame (its old box border was cut by the edge fade into two stray
   lines), and a "recent" row anchors the bottom. Chains page: upload card
   plus a side column with photo guidance and recent pendants.
   ========================================================================== */
.platform-hub-expanded .deck-header,
#wizard-step-1 .deck-header {
    padding: var(--ops-space-8) var(--ops-space-5) var(--ops-space-2);
    gap: 6px;
}

.platform-hub-expanded .arc-carousel-stage {
    background: transparent;
    border: 0;
    border-radius: 0;
    margin: 0;
}

.platform-hub-expanded .arc-carousel-stage::before {
    display: none;
}

/* ---- recent row (hub pages) ---- */
.hub-recent {
    flex-shrink: 0;
    margin: 0 var(--ops-space-5) var(--ops-space-5);
    padding: var(--ops-space-4) var(--ops-space-5);
    border-top: 1px solid var(--ops-border-subtle);
    display: flex;
    align-items: center;
    gap: var(--ops-space-6);
}

.hub-recent[hidden],
.side-panel-recent[hidden] {
    display: none;
}

.hub-recent-head {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex-shrink: 0;
    width: 150px;
}

.hub-recent-title,
.side-panel-title {
    font-family: var(--font-sans);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ops-ink);
    margin: 0;
    letter-spacing: 0;
    text-transform: none;
}

.hub-recent-meta {
    font-size: 11px;
    color: var(--ops-ink-faint);
}

.hub-recent-list {
    flex: 1;
    min-width: 0;
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: var(--ops-space-3);
}

/* ---- shared recent item ---- */
.recent-item {
    display: flex;
    align-items: center;
    gap: var(--ops-space-3);
    min-width: 0;
    padding: 6px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--ops-radius-sm);
    color: inherit;
    text-align: left;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.recent-item:hover,
.recent-item:focus-visible {
    background: var(--ops-surface-300);
    border-color: var(--ops-border-subtle);
    outline: none;
}

.recent-thumb {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    border-radius: 6px;
    overflow: hidden;
    background: var(--ops-surface-300);
}

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

.recent-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.recent-name {
    font-size: 12px;
    font-weight: 500;
    color: var(--ops-ink);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recent-meta {
    font-size: 11px;
    color: var(--ops-ink-faint);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1500px) {
    .hub-recent-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .hub-recent-list > :nth-child(n+5) { display: none; }
}

/* Short screens: the carousel needs the height more than the row does */
@media (max-height: 820px) {
    .hub-recent { display: none; }
}

/* ---- chains page: upload card + side column ---- */
#wizard-step-1 .hyper-dock-layout {
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: var(--ops-space-5);
    max-width: 1000px;
    align-items: stretch;
}

#wizard-step-1 .hyper-glass-card,
#wizard-step-1 #mode-upload-container,
#wizard-step-1 #step1-dropzone-grid {
    display: flex;
    flex-direction: column;
}

#wizard-step-1 #step1-dropzone-grid,
#wizard-step-1 #main-drop-zone {
    flex: 1;
}

#wizard-step-1 #main-drop-zone {
    min-height: 300px;
}

.chains-side {
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-4);
    min-width: 0;
}

.side-panel {
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-subtle);
    border-radius: var(--ops-radius-lg);
    padding: var(--ops-space-5);
}

.side-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--ops-space-3);
}

.side-tips {
    list-style: none;
    counter-reset: tip;
    margin: var(--ops-space-4) 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--ops-space-3);
}

.side-tips li {
    counter-increment: tip;
    position: relative;
    padding-left: 26px;
    font-size: 12px;
    line-height: 1.5;
    color: var(--ops-ink-muted);
}

.side-tips li::before {
    content: counter(tip);
    position: absolute;
    left: 0;
    top: 1px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 1px solid var(--ops-border-strong);
    font-size: 9.5px;
    font-weight: 600;
    line-height: 14px;
    text-align: center;
    color: var(--ops-ink-muted);
}

.side-tips strong {
    display: block;
    color: var(--ops-ink);
    font-weight: 500;
}

.side-recent-grid {
    margin-top: var(--ops-space-3);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.side-recent-grid .recent-item {
    margin: 0 -6px;
}

@media (max-width: 1100px) {
    #wizard-step-1 .hyper-dock-layout { grid-template-columns: minmax(0, 1fr); }
}

/* Same stray-box issue as the hub stage: the chains stage outline showed as
   bare lines once the panel inside it stopped filling it. */
#wizard-step-1 .hyper-hero-right {
    border: 0;
    background: transparent;
    box-shadow: none;
    padding-top: var(--ops-space-4);
}

.hub-recent-head { width: 120px; }

/* Short screens: never clip the top of the chains panel */
#wizard-step-1 .hyper-hero-container,
#wizard-step-1 .hyper-hero-right {
    justify-content: safe center;
}

@media (max-height: 860px) {
    #wizard-step-1 #main-drop-zone { min-height: 200px; }
    #wizard-step-1 .deck-header { padding-top: var(--ops-space-5); }
    .side-panel { padding: var(--ops-space-4); }
    .side-tips { gap: var(--ops-space-2); margin-top: var(--ops-space-3); }
}

@media (max-height: 860px) {
    #wizard-step-1 .hyper-dock-layout { margin-top: var(--ops-space-3); }
}

/* ==========================================================================
   PANEL SHADE (2026-09-24): every panel uses the category-card slate
   (--ops-surface-200 #1e2126). Wells inside a panel (drop zones, view
   canvases, segmented controls) sit one step darker in the same family
   instead of near-black.
   ========================================================================== */
:root { --ops-inset: #16191d; }

.tops-dropzone,
.tops-side-slot,
.tops-view-canvas,
.tops-view-tabs,
.tops-job-select {
    background-color: var(--ops-inset);
}

.modal-window {
    background: var(--ops-surface-200);
}

.settings-group-card {
    background: var(--ops-inset);
    border-color: var(--ops-border-subtle);
}

/* Chains drop zone: same slate as its card, the dashed outline marks it */
#wizard-step-1 #main-drop-zone,
#wizard-step-1 #main-drop-zone.dragover {
    background: var(--ops-surface-200);
}
#wizard-step-1 #main-drop-zone:hover {
    background: #22262b;
}

.modal-footer {
    background: transparent;
}

/* ==========================================================================
   UX LAYER (ux.js) — drop overlay, shortcuts sheet, focus, reduced motion
   ========================================================================== */
.ux-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    display: grid;
    place-items: center;
    padding: 24px;
    background: rgba(6, 7, 8, 0.72);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
}
.ux-drop-overlay.visible { opacity: 1; }
.ux-drop-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 48px 72px;
    background: var(--ops-surface-200);
    border: 1px dashed var(--ops-ink-muted);
    border-radius: var(--ops-radius-lg);
    transform: scale(0.98);
    transition: transform 0.15s ease;
}
.ux-drop-overlay.visible .ux-drop-card { transform: scale(1); }
.ux-drop-label { font-size: 15px; font-weight: 600; color: var(--ops-ink); }
.ux-drop-sub { font-size: 12px; color: var(--ops-ink-faint); }

.ux-sheet-backdrop {
    position: fixed;
    inset: 0;
    z-index: 9100;
    display: grid;
    place-items: center;
    padding: 24px;
    background: var(--ops-scrim);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.15s ease, visibility 0.15s;
}
.ux-sheet-backdrop.visible { opacity: 1; visibility: visible; }
.ux-sheet {
    width: min(520px, 100%);
    max-height: 80vh;
    overflow: auto;
    background: var(--ops-surface-200);
    border: 1px solid var(--ops-border-strong);
    border-radius: var(--ops-radius-lg);
    box-shadow: var(--ops-shadow-card);
}
.ux-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--ops-border-subtle);
}
.ux-sheet-head h3 { margin: 0; font-size: 14px; font-weight: 600; color: var(--ops-ink); }
.ux-sheet-close {
    font: inherit;
    font-size: 11px;
    color: var(--ops-ink-muted);
    background: var(--ops-inset);
    border: 1px solid var(--ops-border-subtle);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
}
.ux-sheet-close:hover { color: var(--ops-ink); border-color: var(--ops-border-strong); }
.ux-sheet-body { padding: 8px 20px 20px; display: grid; gap: 16px; }
.ux-sheet-body h4 {
    margin: 12px 0 6px;
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ops-ink-faint);
}
.ux-sheet-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 6px 0;
    font-size: 12.5px;
    color: var(--ops-ink-muted);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.ux-sheet-row:last-child { border-bottom: 0; }
.ux-sheet kbd {
    flex-shrink: 0;
    min-width: 24px;
    text-align: center;
    font-family: var(--font-sans);
    font-size: 11px;
    font-weight: 500;
    color: var(--ops-ink);
    background: var(--ops-inset);
    border: 1px solid var(--ops-border-subtle);
    border-bottom-width: 2px;
    border-radius: 5px;
    padding: 2px 7px;
}

/* One consistent keyboard focus ring (mouse clicks stay ring-free) */
button:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[role="tab"]:focus-visible,
select:focus-visible,
input:focus-visible,
textarea:focus-visible,
.arc-card-item:focus-visible {
    outline: 2px solid var(--ops-focus-ring);
    outline-offset: 2px;
}

/* No reduced-motion kill switch here (user decision 2026-09-24, same as the
   boot splash): with Windows "Animation effects" off it cut every transition
   to 0.01ms, so cards teleported and pages hard-cut. The motion in this app
   is short fades and glides, none of it large or flashing. */

/* ==========================================================================
   Access gate: sign-in / "invite not active" screen over the studio
   (cloud-deploy-plan step 3, showAccessGate in app.js)
   ========================================================================== */
.access-gate {
    position: fixed;
    inset: 0;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: var(--ops-scrim);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}
.access-gate-card {
    width: 100%;
    max-width: 400px;
    padding: 32px 28px;
    border: 1px solid var(--ops-border-subtle);
    border-radius: 16px;
    background: var(--ops-surface-200);
    color: var(--ops-ink);
    text-align: center;
    font-family: var(--font-sans);
}
.access-gate-logo { display: block; margin: 0 auto 16px; }
.access-gate-card h2 { margin: 0 0 8px; font-size: 20px; font-weight: 600; }
.access-gate-text { margin: 0 0 20px; color: var(--ops-ink-muted); font-size: 14px; line-height: 1.5; }
.access-gate-google { display: flex; justify-content: center; min-height: 44px; }
.access-gate-msg { min-height: 1.2em; margin: 12px 0 0; color: var(--ops-ink-muted); font-size: 13px; }
.access-gate-actions { display: flex; flex-direction: column; gap: 8px; align-items: center; margin-top: 12px; }
.access-gate-link {
    border: 0;
    background: none;
    padding: 4px;
    color: var(--ops-ink-muted);
    font: inherit;
    font-size: 13px;
    text-decoration: underline;
    cursor: pointer;
}
.access-gate-link:hover { color: var(--ops-ink); }
.access-gate-link:focus-visible { outline: 2px solid var(--ops-focus-ring); outline-offset: 2px; border-radius: 4px; }

/* Profile: monthly credits per provider (cloud-deploy-plan step 5) */
.credits-row { margin: 10px 0; }
.credits-row-label {
    display: flex;
    justify-content: space-between;
    margin-bottom: 6px;
    color: var(--ops-ink-muted);
    font-size: 12px;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   SMOOTH PAGE CHANGES (ux.js initSmoothPages)
   ========================================================================== */
/* The old per-page entrance slid the whole frame up 8px from blank. */
.wizard-step { animation: none; }

/* Header and backdrop never take part in the crossfade: they stay live. */
.wizard-header { view-transition-name: app-header; }
#topography-canvas { view-transition-name: app-backdrop; }
::view-transition-old(app-header),
::view-transition-old(app-backdrop) { display: none; }
::view-transition-new(app-header),
::view-transition-new(app-backdrop) { animation: none; }

/* The page frame holds its place; only what is inside it crossfades. */
.wizard-step.active { view-transition-name: page-frame; }
::view-transition-group(page-frame) {
    animation-duration: 240ms;
    animation-timing-function: cubic-bezier(0.2, 0, 0, 1);
}
::view-transition-old(page-frame) {
    animation: ux-page-out 140ms cubic-bezier(0.4, 0, 1, 1) both;
}
::view-transition-new(page-frame) {
    animation: ux-page-in 220ms cubic-bezier(0, 0, 0.2, 1) 60ms both;
}
::view-transition-group(root) { animation-duration: 200ms; }

@keyframes ux-page-out { to { opacity: 0; } }
@keyframes ux-page-in { from { opacity: 0; } }

/* Browsers without view transitions: a plain fade, no movement. */
@supports not (view-transition-name: none) {
    .wizard-step.active { animation: ux-page-in 200ms cubic-bezier(0, 0, 0.2, 1) both; }
}

/* First paint of a carousel page: cards take their place instantly. */
.ux-settling .arc-card-item,
.ux-settling .arc-card-item * { transition: none !important; }

/* Recent rows keep their space while loading (no jump when data lands). */
.recent-skeleton {
    display: flex;
    align-items: center;
    gap: var(--ops-space-3);
    padding: 6px;
}
.recent-skeleton::before,
.recent-skeleton::after {
    content: "";
    display: block;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--ops-surface-300) 0%, #2e333a 50%, var(--ops-surface-300) 100%);
    background-size: 200% 100%;
    animation: ux-shimmer 1.4s ease-in-out infinite;
}
.recent-skeleton::before { width: 44px; height: 44px; flex-shrink: 0; }
.recent-skeleton::after { height: 10px; flex: 1; max-width: 110px; }
@keyframes ux-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }


/* ==========================================================================
   SMOOTH DIALOGS + TOASTS (ux.js initSmoothDialogs)
   ========================================================================== */
/* Opening: the dim backdrop fades in with the window instead of popping. */
.modal-backdrop { animation: ux-dialog-in 200ms var(--ease-smooth) both; }
.modal-window,
.studio-modal-card { animation: ux-window-in 280ms var(--ease-smooth) both; }

/* Closing: held on screen for the fade, then really hidden. */
.modal-backdrop.ux-closing {
    display: flex !important;
    pointer-events: none;
    animation: ux-dialog-out 170ms cubic-bezier(0.4, 0, 1, 1) both;
}
.modal-backdrop.ux-closing .modal-window,
.modal-backdrop.ux-closing .studio-modal-card {
    animation: ux-window-out 170ms cubic-bezier(0.4, 0, 1, 1) both;
}

@keyframes ux-dialog-in { from { opacity: 0; } }
@keyframes ux-dialog-out { to { opacity: 0; } }
@keyframes ux-window-in { from { opacity: 0; transform: translateY(6px) scale(0.975); } }
@keyframes ux-window-out { to { opacity: 0; transform: translateY(4px) scale(0.985); } }

/* Toasts: one entrance for both styles; leaving is a class, not a cut. */
.cyber-toast,
.toast-item { animation: ux-toast-in 320ms var(--ease-smooth) both; }
.cyber-toast.ux-leaving,
.toast-item.ux-leaving { animation: ux-toast-out 220ms cubic-bezier(0.4, 0, 1, 1) both; }
@keyframes ux-toast-in { from { opacity: 0; transform: translateY(12px) scale(0.98); } }
@keyframes ux-toast-out { to { opacity: 0; transform: translateY(8px) scale(0.98); } }


/* UV inspector: Auto Unwrap + Rebake action */
.btn-uv-unwrap {
    border: 1px solid var(--cyan-glow, #38bdf8);
    color: var(--cyan-glow, #38bdf8);
}
.btn-uv-unwrap:disabled {
    opacity: 0.6;
    cursor: progress;
}

/* Admin-only: app.js unhides it once /api/auth/me says admin */
.api-keys-panel[hidden] { display: none !important; }