/* * Zhengxuan product UI, August 2026. * This is the final product layer. Legacy styles remain for stable component * behavior; this file owns hierarchy, density, typography and responsiveness. */ :root { --product-canvas: #f3f6f4; --product-surface: #ffffff; --product-surface-soft: #f7faf8; --product-ink: #172622; --product-copy: #425650; --product-muted: #71817c; --product-line: #d8e2dd; --product-line-strong: #c6d2cc; --product-accent: #137c6a; --product-accent-hover: #0e6859; --product-accent-soft: #e2f0eb; --product-info-soft: #edf4f7; --product-warning: #8b651e; --product-warning-soft: #fff7e7; --product-danger: #a14d47; --product-danger-soft: #fff1ef; --product-shadow: 0 1px 2px rgba(23, 38, 34, .04), 0 10px 28px rgba(23, 38, 34, .045); --product-radius: 12px; --product-control-radius: 8px; } #mainApp:not(.auth-locked), #mainApp:not(.auth-locked) button, #mainApp:not(.auth-locked) input, #mainApp:not(.auth-locked) select, #mainApp:not(.auth-locked) textarea { font-family: "Microsoft YaHei", "PingFang SC", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important; } #mainApp:not(.auth-locked) { grid-template-columns: 204px minmax(0, 1fr) !important; min-width: 0 !important; background: var(--product-canvas) !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) *, #mainApp:not(.auth-locked) *::before, #mainApp:not(.auth-locked) *::after { box-sizing: border-box; } #mainApp:not(.auth-locked) .sidebar { min-width: 0 !important; min-height: 100vh !important; background: #f9fbfa !important; border-right: 1px solid var(--product-line) !important; box-shadow: none !important; color: var(--product-copy) !important; } #mainApp:not(.auth-locked) .brand { min-height: 72px !important; padding: 17px 20px !important; border-bottom: 1px solid var(--product-line) !important; background: transparent !important; } #mainApp:not(.auth-locked) .brand-mark { width: 30px !important; height: 30px !important; border-radius: 9px !important; background: var(--product-accent) !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .brand h1 { color: var(--product-ink) !important; font-size: 16px !important; line-height: 1.2 !important; letter-spacing: -.01em !important; } #mainApp:not(.auth-locked) .brand small { color: var(--product-muted) !important; font-size: 9px !important; letter-spacing: .12em !important; } #mainApp:not(.auth-locked) .nav-group { padding: 16px 12px !important; } #mainApp:not(.auth-locked) .nav-label { margin: 0 10px 8px !important; color: #8a9893 !important; font-size: 10px !important; font-weight: 700 !important; letter-spacing: .08em !important; } #mainApp:not(.auth-locked) .nav-item { min-height: 42px !important; margin: 3px 0 !important; padding: 0 12px !important; border: 1px solid transparent !important; border-radius: 9px !important; background: transparent !important; color: #52645e !important; font-size: 13px !important; font-weight: 600 !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .nav-item:hover { background: #eef4f1 !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .nav-item.active { border-color: #cfe3dc !important; background: var(--product-accent-soft) !important; color: #0d6f5f !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .nav-icon { width: 25px !important; height: 25px !important; margin-right: 9px !important; border: 0 !important; border-radius: 7px !important; background: #eef3f1 !important; color: #61736d !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .nav-item.active .nav-icon { background: #cce7de !important; color: #0b6b5c !important; } #mainApp:not(.auth-locked) .side-foot { padding: 12px !important; } #mainApp:not(.auth-locked) .security-box { padding: 12px !important; border: 1px solid var(--product-line) !important; border-radius: 10px !important; background: var(--product-surface-soft) !important; color: var(--product-copy) !important; } #mainApp:not(.auth-locked) .security-box strong { color: var(--product-ink) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .security-box p { margin-top: 5px !important; color: var(--product-muted) !important; font-size: 10px !important; line-height: 1.55 !important; } #mainApp:not(.auth-locked) .main { min-width: 0 !important; background: var(--product-canvas) !important; } #mainApp:not(.auth-locked) .topbar { height: 64px !important; padding: 0 24px !important; border-bottom: 1px solid var(--product-line) !important; background: rgba(255, 255, 255, .94) !important; box-shadow: none !important; backdrop-filter: blur(12px) !important; } #mainApp:not(.auth-locked) .crumb { color: var(--product-muted) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .crumb strong { color: var(--product-ink) !important; font-size: 13px !important; } #mainApp:not(.auth-locked) .env-tag { border-color: #bfddd4 !important; background: #edf7f3 !important; color: #0e7463 !important; } #mainApp:not(.auth-locked) .user { padding: 5px 7px !important; border-radius: 9px !important; } #mainApp:not(.auth-locked) .user:hover { background: #f1f5f3 !important; } #mainApp:not(.auth-locked) .avatar { background: var(--product-accent-soft) !important; color: var(--product-accent) !important; } #mainApp:not(.auth-locked) .user-name { color: var(--product-ink) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .user-name small { color: var(--product-muted) !important; font-size: 9px !important; } #mainApp:not(.auth-locked) .workspace { padding: 24px clamp(20px, 2.2vw, 34px) 48px !important; background: var(--product-canvas) !important; scrollbar-gutter: stable !important; } #mainApp:not(.auth-locked) .page { width: 100% !important; max-width: 1580px !important; margin: 0 auto !important; } #mainApp:not(.auth-locked) .page-title { min-height: 54px !important; align-items: flex-end !important; gap: 18px !important; margin: 0 0 18px !important; } #mainApp:not(.auth-locked) .page-title h2 { margin: 2px 0 0 !important; color: var(--product-ink) !important; font-size: 25px !important; font-weight: 720 !important; line-height: 1.25 !important; letter-spacing: -.025em !important; } #mainApp:not(.auth-locked) .page-title p { margin: 5px 0 0 !important; color: var(--product-muted) !important; font-size: 13px !important; line-height: 1.6 !important; } #mainApp:not(.auth-locked) .eyebrow, #mainApp:not(.auth-locked) .overview-kicker { color: var(--product-accent) !important; font-size: 10px !important; font-weight: 750 !important; letter-spacing: .1em !important; } #mainApp:not(.auth-locked) .actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 8px !important; } #mainApp:not(.auth-locked) .btn { min-height: 40px !important; padding: 0 15px !important; border: 1px solid var(--product-line-strong) !important; border-radius: var(--product-control-radius) !important; background: var(--product-surface) !important; color: #334841 !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.2 !important; box-shadow: none !important; touch-action: manipulation !important; transition: background-color .16s ease, border-color .16s ease, color .16s ease, transform .08s ease !important; } #mainApp:not(.auth-locked) .btn:hover { border-color: #aebeb7 !important; background: #f8faf9 !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .btn:active { transform: translateY(1px) !important; } #mainApp:not(.auth-locked) .btn.primary, #mainApp:not(.auth-locked) .btn.success { border-color: var(--product-accent) !important; background: var(--product-accent) !important; color: #fff !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .btn.primary:hover, #mainApp:not(.auth-locked) .btn.success:hover { border-color: var(--product-accent-hover) !important; background: var(--product-accent-hover) !important; } #mainApp:not(.auth-locked) .btn.danger { border-color: #e5c1bd !important; background: #fff7f6 !important; color: var(--product-danger) !important; } #mainApp:not(.auth-locked) .btn.small { min-height: 34px !important; padding: 0 11px !important; font-size: 12px !important; } #mainApp:not(.auth-locked) :is(button, a, input, select, textarea, summary):focus-visible { outline: 3px solid rgba(19, 124, 106, .22) !important; outline-offset: 2px !important; } #mainApp:not(.auth-locked) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 42px !important; border: 1px solid var(--product-line-strong) !important; border-radius: var(--product-control-radius) !important; background: #fff !important; color: var(--product-ink) !important; font-size: 13px !important; line-height: 1.5 !important; box-shadow: none !important; } #mainApp:not(.auth-locked) textarea { min-height: 96px !important; padding: 11px 12px !important; resize: vertical !important; } #mainApp:not(.auth-locked) :is(input, textarea)::placeholder { color: #96a39e !important; } #mainApp:not(.auth-locked) label { color: #4e625b !important; font-size: 12px !important; font-weight: 650 !important; } #mainApp:not(.auth-locked) .card, #mainApp:not(.auth-locked) .workspace-panel, #mainApp:not(.auth-locked) .input-section, #mainApp:not(.auth-locked) .workbench-disclosure { border: 1px solid var(--product-line) !important; border-radius: var(--product-radius) !important; background: var(--product-surface) !important; background-image: none !important; color: var(--product-ink) !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .card-head, #mainApp:not(.auth-locked) .workspace-panel-head { min-height: 51px !important; padding: 13px 16px !important; border-bottom: 1px solid var(--product-line) !important; background: transparent !important; } #mainApp:not(.auth-locked) .card-head h3, #mainApp:not(.auth-locked) .workspace-panel-head h3 { color: var(--product-ink) !important; font-size: 15px !important; font-weight: 700 !important; } #mainApp:not(.auth-locked) .card-head span, #mainApp:not(.auth-locked) .workspace-panel-head > span { color: var(--product-muted) !important; font-size: 11px !important; } #mainApp:not(.auth-locked) .card-body { padding: 16px !important; } #mainApp:not(.auth-locked) .status { display: inline-flex !important; align-items: center !important; min-height: 24px !important; padding: 3px 8px !important; border-radius: 999px !important; background: #eef2f0 !important; color: #5c6f68 !important; font-size: 11px !important; font-weight: 650 !important; } #mainApp:not(.auth-locked) .status.ok { background: var(--product-accent-soft) !important; color: #0d715f !important; } #mainApp:not(.auth-locked) .status.review { background: var(--product-warning-soft) !important; color: var(--product-warning) !important; } #mainApp:not(.auth-locked) .status.risk { background: var(--product-danger-soft) !important; color: var(--product-danger) !important; } /* Dashboard and catalog: concise summaries, no oversized decorative panels. */ #mainApp:not(.auth-locked) #dashboard .project-workbench-header { padding: 17px 18px 14px !important; border: 1px solid var(--product-line) !important; border-radius: var(--product-radius) !important; background: var(--product-surface) !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) #dashboard .project-workbench-title .overview-kicker { color: var(--product-accent) !important; } #mainApp:not(.auth-locked) #dashboard .project-workbench-title h3 { color: var(--product-ink) !important; font-size: 20px !important; line-height: 1.35 !important; } #mainApp:not(.auth-locked) #dashboard .project-workbench-title > span:last-child { color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .project-workbench-header .workbench-stage-nav { gap: 5px !important; margin-top: 13px !important; padding: 4px !important; border: 1px solid var(--product-line) !important; border-radius: 10px !important; background: var(--product-surface-soft) !important; } #mainApp:not(.auth-locked) .project-workbench-header .stage-nav-item { min-height: 38px !important; padding: 6px 8px !important; border: 1px solid transparent !important; border-radius: 7px !important; background: transparent !important; color: #536760 !important; } #mainApp:not(.auth-locked) .project-workbench-header .stage-nav-item.active { border-color: #cbe2da !important; background: #fff !important; color: #0b7060 !important; } #mainApp:not(.auth-locked) .project-workbench-header .stage-nav-item > span { width: 22px !important; height: 22px !important; background: #e6ece9 !important; color: #62746e !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .project-workbench-header .stage-nav-item.active > span { background: var(--product-accent) !important; color: #fff !important; } #mainApp:not(.auth-locked) .project-workbench-header .stage-nav-item strong { font-size: 11px !important; } #mainApp:not(.auth-locked) .project-workbench-meta { margin-top: 10px !important; border-top: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .project-workbench-meta div { padding: 9px 12px 0 !important; border-color: var(--product-line) !important; } #mainApp:not(.auth-locked) .project-workbench-meta span { color: var(--product-muted) !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .project-workbench-meta b { color: var(--product-ink) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) #dashboard :is(.current-project-card, .next-action, .overview-mini-card, .workspace-panel, .catalog-project-card) { border-color: var(--product-line) !important; background: #fff !important; color: var(--product-ink) !important; box-shadow: none !important; } #mainApp:not(.auth-locked) #dashboard :is(.current-project-title h3, .next-action h3, .overview-mini-card strong, .workspace-panel h3, .catalog-project-main h3) { color: var(--product-ink) !important; } #mainApp:not(.auth-locked) #dashboard :is(.current-project-copy > p, .next-action p, .overview-mini-card > span, .overview-mini-card small, .workspace-panel-head > span, .catalog-project-main p) { color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .catalog-summary { border-color: var(--product-line) !important; border-radius: var(--product-radius) !important; background: #fff !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .catalog-summary > div { min-height: 66px !important; padding: 13px 16px !important; border-color: var(--product-line) !important; } #mainApp:not(.auth-locked) .catalog-summary span { color: var(--product-muted) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .catalog-summary strong { color: var(--product-ink) !important; font-size: 22px !important; } #mainApp:not(.auth-locked) .catalog-project-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 12px !important; } #mainApp:not(.auth-locked) .catalog-project-card { padding: 17px 18px !important; border-radius: var(--product-radius) !important; background: #fff !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .catalog-project-main h3 { color: var(--product-ink) !important; font-size: 16px !important; } #mainApp:not(.auth-locked) .catalog-project-main p { color: var(--product-muted) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .workspace-loading, #mainApp:not(.auth-locked) .workspace-empty { min-height: 150px !important; border-color: var(--product-line-strong) !important; border-radius: var(--product-radius) !important; background: rgba(255,255,255,.62) !important; color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .workspace-empty.slim { min-height: 88px !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker { width: max-content !important; max-width: 100% !important; margin: 0 0 10px auto !important; border: 0 !important; background: transparent !important; color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker > summary { min-height: 30px !important; padding: 5px 8px !important; border: 1px solid var(--product-line) !important; border-radius: 7px !important; background: #fff !important; color: var(--product-muted) !important; font-size: 11px !important; font-weight: 650 !important; cursor: pointer !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker[open] { display: grid !important; grid-template-columns: auto minmax(180px, 280px) !important; align-items: center !important; gap: 7px !important; width: min(100%, 430px) !important; padding: 8px !important; border: 1px solid var(--product-line) !important; border-radius: 9px !important; background: #fff !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker[open] > summary { grid-column: 1 / -1 !important; border: 0 !important; padding: 0 !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker label { font-size: 11px !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker select { min-height: 34px !important; height: 34px !important; font-size: 12px !important; } /* Creation wizard: form owns the canvas; progress and model permissions stay compact. */ #mainApp:not(.auth-locked) .steps { display: flex !important; align-items: center !important; min-height: 44px !important; margin: 0 0 14px !important; padding: 4px 0 12px !important; border: 0 !important; border-bottom: 1px solid var(--product-line) !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .step { min-width: 0 !important; min-height: 32px !important; padding: 0 8px 0 0 !important; color: var(--product-muted) !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1.35 !important; } #mainApp:not(.auth-locked) .step:not(:last-child)::after { left: 36px !important; right: 12px !important; top: 14px !important; background: var(--product-line-strong) !important; } #mainApp:not(.auth-locked) .step-num { width: 28px !important; height: 28px !important; flex: 0 0 28px !important; margin-right: 8px !important; border: 1px solid var(--product-line-strong) !important; background: #fff !important; color: var(--product-muted) !important; font-size: 12px !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .step.done { color: var(--product-accent) !important; } #mainApp:not(.auth-locked) .step.done .step-num { border-color: var(--product-accent) !important; background: var(--product-accent) !important; color: #fff !important; } #mainApp:not(.auth-locked) .step.active { color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .step.active .step-num { border: 2px solid var(--product-accent) !important; background: #fff !important; color: var(--product-accent) !important; } #mainApp:not(.auth-locked) .wizard-layout { grid-template-columns: minmax(0, 1fr) 250px !important; gap: 14px !important; align-items: start !important; } #mainApp:not(.auth-locked) .template-picker { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 10px !important; } #mainApp:not(.auth-locked) .pick-card { min-height: 126px !important; padding: 15px !important; border-color: var(--product-line) !important; border-radius: 10px !important; background: #fff !important; color: var(--product-ink) !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .pick-card.selected { border-color: #9fcabd !important; background: #f1f8f5 !important; } #mainApp:not(.auth-locked) .pick-card h4 { color: var(--product-ink) !important; font-size: 14px !important; } #mainApp:not(.auth-locked) .pick-card p { color: var(--product-muted) !important; font-size: 11px !important; line-height: 1.55 !important; } #mainApp:not(.auth-locked) .pick-icon { width: 31px !important; height: 31px !important; background: var(--product-accent-soft) !important; color: var(--product-accent) !important; } #mainApp:not(.auth-locked) .compliance-card { position: sticky !important; top: 80px !important; background: var(--product-surface-soft) !important; } #mainApp:not(.auth-locked) .compliance-card h3 { color: var(--product-ink) !important; font-size: 14px !important; } #mainApp:not(.auth-locked) .compliance-card li, #mainApp:not(.auth-locked) .compliance-card .note { color: var(--product-copy) !important; font-size: 11px !important; line-height: 1.55 !important; } #mainApp:not(.auth-locked) .model-permissions > label { margin-bottom: 8px !important; color: var(--product-ink) !important; font-size: 13px !important; } #mainApp:not(.auth-locked) .model-permission-list { display: grid !important; gap: 0 !important; overflow: hidden !important; border: 1px solid var(--product-line) !important; border-radius: 10px !important; background: #fff !important; } #mainApp:not(.auth-locked) .model-permission-row { display: grid !important; grid-template-columns: 20px minmax(0, 1fr) auto !important; align-items: center !important; gap: 11px !important; min-height: 62px !important; margin: 0 !important; padding: 10px 12px !important; border: 0 !important; border-bottom: 1px solid var(--product-line) !important; border-radius: 0 !important; background: #fff !important; cursor: pointer !important; } #mainApp:not(.auth-locked) .model-permission-row:last-child { border-bottom: 0 !important; } #mainApp:not(.auth-locked) .model-permission-row:hover { background: #f8fbf9 !important; } #mainApp:not(.auth-locked) .model-permission-row:has(input:checked) { background: #f6faf8 !important; } #mainApp:not(.auth-locked) .model-permission-row input { width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--product-accent) !important; } #mainApp:not(.auth-locked) .model-permission-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; } #mainApp:not(.auth-locked) .model-permission-copy strong { color: var(--product-ink) !important; font-size: 13px !important; font-weight: 700 !important; line-height: 1.35 !important; } #mainApp:not(.auth-locked) .model-permission-copy small { color: var(--product-muted) !important; font-size: 11px !important; font-weight: 400 !important; line-height: 1.45 !important; } #mainApp:not(.auth-locked) .model-permission-state { min-width: 46px !important; color: var(--product-muted) !important; font-size: 11px !important; font-weight: 650 !important; text-align: right !important; white-space: nowrap !important; } #mainApp:not(.auth-locked) .model-permission-row input:checked ~ .model-permission-state { color: var(--product-accent) !important; } #mainApp:not(.auth-locked) .model-permission-row .permission-on { display: none !important; } #mainApp:not(.auth-locked) .model-permission-row input:checked ~ .model-permission-state .permission-on { display: inline !important; } #mainApp:not(.auth-locked) .model-permission-row input:checked ~ .model-permission-state .permission-off { display: none !important; } #mainApp:not(.auth-locked) .model-permission-row.requires-approval .permission-off { color: var(--product-warning) !important; } /* Professional workbenches: two-thirds or more stays with the user's work. */ #mainApp:not(.auth-locked) .project-workbench-shell { grid-template-columns: minmax(150px, 176px) minmax(0, 1fr) minmax(220px, 252px) !important; gap: 12px !important; margin: 14px 0 22px !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .inputs-shell { grid-template-columns: minmax(0, 1fr) 228px !important; } #mainApp:not(.auth-locked) :is(.workbench-context, .workbench-inspector, .workbench-primary) { border-color: var(--product-line) !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .workbench-primary { padding: 18px !important; } #mainApp:not(.auth-locked) :is(.workbench-context, .workbench-inspector) { padding: 12px !important; } #mainApp:not(.auth-locked) .script-shell { grid-template-columns: 174px minmax(0, 1fr) 230px !important; } #mainApp:not(.auth-locked) :is(.production-shell, .final-cut-workbench) { grid-template-columns: 170px minmax(0, 1fr) 244px !important; } #mainApp:not(.auth-locked) .delivery-shell { grid-template-columns: 180px minmax(0, 1fr) 262px !important; } #mainApp:not(.auth-locked) .workbench { grid-template-columns: 190px minmax(0, 1fr) 228px !important; height: calc(100vh - 144px) !important; min-height: 620px !important; border-color: var(--product-line) !important; border-radius: var(--product-radius) !important; background: #fff !important; } #mainApp:not(.auth-locked) .pane-head { min-height: 52px !important; padding: 13px 14px !important; border-color: var(--product-line) !important; } #mainApp:not(.auth-locked) .pane-head h3 { color: var(--product-ink) !important; font-size: 14px !important; } #mainApp:not(.auth-locked) .pane-head small { color: var(--product-muted) !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .pane-body { font-size: 13px !important; } #mainApp:not(.auth-locked) .scene { color: var(--product-copy) !important; font-size: 13px !important; line-height: 1.75 !important; } #mainApp:not(.auth-locked) .source-item { padding: 11px !important; border-radius: 8px !important; } #mainApp:not(.auth-locked) .source-item strong { font-size: 12px !important; } #mainApp:not(.auth-locked) .source-item p { color: var(--product-muted) !important; font-size: 11px !important; line-height: 1.55 !important; } /* Model choice is contextual, never a hero card. */ #mainApp:not(.auth-locked) .stage-model-selector { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; min-height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; color: var(--product-copy) !important; box-shadow: none !important; position: relative !important; } #mainApp:not(.auth-locked) .stage-model-menu { position: relative !important; width: auto !important; max-width: 100% !important; min-width: 0 !important; } #mainApp:not(.auth-locked) .stage-model-trigger { display: inline-flex !important; align-items: center !important; gap: 7px !important; width: auto !important; max-width: min(100%, 286px) !important; min-width: 0 !important; min-height: 36px !important; padding: 0 11px !important; border: 1px solid var(--product-line-strong) !important; border-radius: var(--product-control-radius) !important; background: #fff !important; color: var(--product-copy) !important; cursor: pointer !important; font-size: 12px !important; font-weight: 600 !important; line-height: 1 !important; list-style: none !important; white-space: nowrap !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .stage-model-trigger::-webkit-details-marker { display: none !important; } #mainApp:not(.auth-locked) .stage-model-trigger:hover { border-color: #aebeb7 !important; background: #f9fbfa !important; } #mainApp:not(.auth-locked) .stage-model-menu[open] > .stage-model-trigger { border-color: #90c7bb !important; box-shadow: 0 0 0 3px rgba(19,124,106,.1) !important; } #mainApp:not(.auth-locked) .stage-model-glyph { flex: 0 0 auto !important; color: var(--product-accent) !important; font-size: 15px !important; line-height: 1 !important; } #mainApp:not(.auth-locked) .stage-model-current { min-width: 0 !important; overflow: hidden !important; text-overflow: ellipsis !important; white-space: nowrap !important; } #mainApp:not(.auth-locked) .stage-model-chevron { flex: 0 0 auto !important; width: 7px !important; height: 7px !important; margin-left: 2px !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: translateY(-2px) rotate(45deg) !important; transition: transform .14s ease !important; } #mainApp:not(.auth-locked) .stage-model-menu[open] .stage-model-chevron { transform: translateY(2px) rotate(225deg) !important; } #mainApp:not(.auth-locked) .stage-model-popover { position: absolute !important; top: calc(100% + 6px) !important; left: 0 !important; z-index: 80 !important; display: grid !important; gap: 8px !important; width: min(340px, calc(100vw - 48px)) !important; min-width: 260px !important; padding: 11px !important; border: 1px solid var(--product-line) !important; border-radius: 10px !important; background: #fff !important; color: var(--product-copy) !important; box-shadow: var(--product-shadow) !important; } #mainApp:not(.auth-locked) :is(.workbench-inspector, .workspace-rail) .stage-model-popover { right: 0 !important; left: auto !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-heading { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; grid-column: 1 !important; grid-row: auto !important; width: 100% !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-title { color: var(--product-muted) !important; font-size: 10px !important; font-weight: 650 !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-heading-meta { display: inline-flex !important; gap: 5px !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-recommendation, #mainApp:not(.auth-locked) .stage-model-selector .stage-model-state { min-height: 20px !important; padding: 2px 6px !important; font-size: 9px !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-choice { display: block !important; grid-column: 1 !important; grid-row: auto !important; width: 100% !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-select { width: 100% !important; min-height: 38px !important; height: 38px !important; padding: 0 30px 0 10px !important; border: 1px solid var(--product-line-strong) !important; border-radius: 8px !important; background: #fff !important; color: var(--product-ink) !important; font-size: 12px !important; font-weight: 600 !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-details { position: static !important; grid-column: 1 !important; grid-row: auto !important; width: 100% !important; min-width: 0 !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-details > summary { display: inline-flex !important; min-height: 26px !important; padding: 3px 0 !important; color: var(--product-accent) !important; font-size: 10px !important; white-space: nowrap !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-details > summary::after { content: none !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-details-body { position: static !important; display: grid !important; gap: 5px !important; width: 100% !important; padding: 5px 0 0 !important; border: 0 !important; border-top: 1px solid var(--product-line) !important; border-radius: 0 !important; background: transparent !important; color: var(--product-copy) !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-meta { color: var(--product-muted) !important; font-size: 10px !important; line-height: 1.45 !important; } #mainApp:not(.auth-locked) .stage-model-selector .stage-model-note { color: var(--product-muted) !important; font-size: 10px !important; line-height: 1.45 !important; } #mainApp:not(.auth-locked) .stage-model-empty, #mainApp:not(.auth-locked) .stage-model-error { display: inline-flex !important; align-items: center !important; width: auto !important; max-width: 100% !important; min-height: 34px !important; padding: 6px 10px !important; border-radius: 8px !important; font-size: 10px !important; line-height: 1.35 !important; } /* Model controls follow the primary operation instead of competing with it. */ #mainApp:not(.auth-locked) .generation-actions > .stage-model-selector { flex: 0 0 100% !important; order: 30 !important; } #mainApp:not(.auth-locked) :is(.generation-actions, .script-primary-actions, .storyboard-generation-action, .script-assist-tools, .voice-model-action, .review-model-action, .production-resume-model) > .stage-model-selector { padding: 0 !important; border: 0 !important; background: transparent !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .script-primary-actions > .stage-model-selector, #mainApp:not(.auth-locked) .storyboard-generation-action > .stage-model-selector, #mainApp:not(.auth-locked) .voice-model-action > .stage-model-selector, #mainApp:not(.auth-locked) .review-model-action > .stage-model-selector, #mainApp:not(.auth-locked) .production-resume-model > .stage-model-selector { grid-column: 1 / -1 !important; grid-row: 2 !important; flex: 0 0 100% !important; order: 30 !important; justify-self: start !important; width: 100% !important; max-width: none !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #mainApp:not(.auth-locked) .script-primary-actions > .btn, #mainApp:not(.auth-locked) .storyboard-generation-action > .btn, #mainApp:not(.auth-locked) .voice-model-action > .btn, #mainApp:not(.auth-locked) .review-model-action > .btn, #mainApp:not(.auth-locked) .production-resume-model > .btn { grid-column: 1 / -1 !important; grid-row: 1 !important; order: 10 !important; } #mainApp:not(.auth-locked) .script-assist-tools > .stage-model-selector { grid-column: 1 / -1 !important; grid-row: 4 !important; justify-self: start !important; width: 100% !important; max-width: none !important; padding: 0 !important; border: 0 !important; background: transparent !important; } /* Legacy and static production views use the same compact model chip. */ #mainApp:not(.auth-locked) .inline-model-menu { position: relative !important; width: max-content !important; max-width: 100% !important; margin: 0 !important; } #mainApp:not(.auth-locked) .inline-model-menu > summary { display: inline-flex !important; align-items: center !important; gap: 7px !important; max-width: 286px !important; min-height: 36px !important; padding: 0 11px !important; border: 1px solid var(--product-line-strong) !important; border-radius: var(--product-control-radius) !important; background: #fff !important; color: var(--product-copy) !important; cursor: pointer !important; font-size: 12px !important; font-weight: 600 !important; list-style: none !important; white-space: nowrap !important; } #mainApp:not(.auth-locked) .inline-model-menu > summary::-webkit-details-marker { display: none !important; } #mainApp:not(.auth-locked) .inline-model-menu > summary::after { content: "" !important; width: 7px !important; height: 7px !important; margin-left: 2px !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: translateY(-2px) rotate(45deg) !important; } #mainApp:not(.auth-locked) .inline-model-menu[open] > summary { border-color: #90c7bb !important; box-shadow: 0 0 0 3px rgba(19,124,106,.1) !important; } #mainApp:not(.auth-locked) .inline-model-menu[open] > summary::after { transform: translateY(2px) rotate(225deg) !important; } #mainApp:not(.auth-locked) .inline-model-menu > summary > span:first-child { color: var(--product-accent) !important; font-size: 15px !important; } #mainApp:not(.auth-locked) .inline-model-popover { position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important; z-index: 80 !important; display: grid !important; grid-template-columns: repeat(2, minmax(0,1fr)) !important; gap: 9px !important; width: min(390px, calc(100vw - 48px)) !important; min-width: 290px !important; padding: 11px !important; border: 1px solid var(--product-line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: var(--product-shadow) !important; } #mainApp:not(.auth-locked) .inline-model-popover label { display: grid !important; gap: 5px !important; color: var(--product-muted) !important; font-size: 10px !important; font-weight: 650 !important; } #mainApp:not(.auth-locked) .inline-model-popover select { width: 100% !important; min-height: 38px !important; height: 38px !important; border: 1px solid var(--product-line-strong) !important; border-radius: 8px !important; background: #fff !important; color: var(--product-ink) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .script-tools .runtime-model-picker { margin-left: auto !important; padding-left: 0 !important; border-left: 0 !important; } #mainApp:not(.auth-locked) .storyboard-model-menu { margin: 12px 0 !important; } #mainApp:not(.auth-locked) .storyboard-model-menu .inline-model-popover { right: auto !important; left: 0 !important; } /* The right-side readiness rail must not turn the model chip back into a card. */ #mainApp:not(.auth-locked) .inputs-shell .stage-model-selector, #mainApp:not(.auth-locked) .inputs-shell .workspace-rail .stage-model-selector { display: inline-flex !important; grid-template-columns: none !important; width: auto !important; max-width: 100% !important; min-height: 36px !important; padding: 0 !important; border: 0 !important; border-radius: 0 !important; background: transparent !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .inputs-shell .stage-model-selector .stage-model-heading, #mainApp:not(.auth-locked) .inputs-shell .workspace-rail .stage-model-selector .stage-model-heading { display: flex !important; width: 100% !important; } #mainApp:not(.auth-locked) .inputs-shell .stage-model-selector .stage-model-choice, #mainApp:not(.auth-locked) .inputs-shell .workspace-rail .stage-model-selector .stage-model-choice { display: block !important; width: 100% !important; } #mainApp:not(.auth-locked) .inputs-shell .stage-model-selector .stage-model-select, #mainApp:not(.auth-locked) .inputs-shell .workspace-rail .stage-model-selector .stage-model-select { width: 100% !important; min-height: 38px !important; height: 38px !important; border-color: var(--product-line-strong) !important; background: #fff !important; color: var(--product-ink) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .inputs-shell .stage-model-selector .stage-model-details, #mainApp:not(.auth-locked) .inputs-shell .workspace-rail .stage-model-selector .stage-model-details { position: static !important; width: 100% !important; min-width: 0 !important; } /* Legacy injected storyboard selector: one quiet chip, with controls on demand. */ #mainApp:not(.auth-locked) .legacy-stage-model-picker { position: relative !important; display: block !important; width: max-content !important; max-width: 100% !important; margin: 0 0 10px auto !important; padding: 0 !important; border: 0 !important; background: transparent !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker > summary { display: inline-flex !important; align-items: center !important; gap: 7px !important; max-width: 286px !important; min-height: 36px !important; padding: 0 11px !important; border: 1px solid var(--product-line-strong) !important; border-radius: var(--product-control-radius) !important; background: #fff !important; color: var(--product-copy) !important; cursor: pointer !important; font-size: 12px !important; font-weight: 600 !important; list-style: none !important; white-space: nowrap !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker > summary::-webkit-details-marker { display: none !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker > summary::after { content: "" !important; width: 7px !important; height: 7px !important; margin-left: 2px !important; border-right: 1.5px solid currentColor !important; border-bottom: 1.5px solid currentColor !important; transform: translateY(-2px) rotate(45deg) !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker[open] > summary { padding: 0 11px !important; border: 1px solid #90c7bb !important; box-shadow: 0 0 0 3px rgba(19,124,106,.1) !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker[open] > summary::after { transform: translateY(2px) rotate(225deg) !important; } #mainApp:not(.auth-locked) .legacy-stage-model-glyph { color: var(--product-accent) !important; font-size: 15px !important; } #mainApp:not(.auth-locked) .legacy-stage-model-popover { position: absolute !important; top: calc(100% + 6px) !important; right: 0 !important; z-index: 80 !important; display: grid !important; gap: 6px !important; width: min(310px, calc(100vw - 48px)) !important; min-width: 250px !important; padding: 11px !important; border: 1px solid var(--product-line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: var(--product-shadow) !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker label { color: var(--product-muted) !important; font-size: 10px !important; font-weight: 650 !important; } #mainApp:not(.auth-locked) .legacy-stage-model-picker select { width: 100% !important; min-height: 38px !important; height: 38px !important; border: 1px solid var(--product-line-strong) !important; border-radius: 8px !important; background: #fff !important; color: var(--product-ink) !important; font-size: 12px !important; } /* Guided creation follows the same calm workspace language. */ #mainApp:not(.auth-locked) .guided-shell { max-width: none !important; padding: 18px !important; border: 1px solid var(--product-line) !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .guided-home-hero { min-height: 0 !important; padding: 20px 22px !important; border: 1px solid var(--product-line) !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .guided-home-hero h2 { margin: 4px 0 !important; color: var(--product-ink) !important; font-size: 25px !important; } #mainApp:not(.auth-locked) .guided-home-hero p { color: var(--product-muted) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .guided-home-recent { padding: 18px !important; border-color: var(--product-line) !important; border-radius: var(--product-radius) !important; background: #fff !important; } #mainApp:not(.auth-locked) .guided-home-recent h3 { color: var(--product-ink) !important; font-size: 17px !important; } #mainApp:not(.auth-locked) .guided-home-recent header span { color: var(--product-muted) !important; font-size: 11px !important; } #mainApp:not(.auth-locked) .guided-home-card { padding: 14px !important; border-color: var(--product-line) !important; border-radius: 10px !important; background: var(--product-surface-soft) !important; } #mainApp:not(.auth-locked) .template-grid { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 12px !important; } #mainApp:not(.auth-locked) .template-grid > .template { height: auto !important; min-height: 132px !important; padding: 18px !important; border: 1px solid var(--product-line) !important; border-top: 3px solid var(--product-accent) !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .template-grid > .template::after { display: none !important; } #mainApp:not(.auth-locked) .template-grid > .template h4 { margin: 0 0 8px !important; color: var(--product-ink) !important; font-size: 16px !important; } #mainApp:not(.auth-locked) .template-grid > .template p { margin: 0 !important; color: var(--product-muted) !important; font-size: 12px !important; line-height: 1.6 !important; opacity: 1 !important; } #mainApp:not(.auth-locked) .guided-shell-head { align-items: center !important; } #mainApp:not(.auth-locked) .guided-shell-head h1 { color: var(--product-ink) !important; font-size: 23px !important; } #mainApp:not(.auth-locked) .guided-shell-head p { color: var(--product-muted) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .guided-progress { gap: 6px !important; } #mainApp:not(.auth-locked) .guided-progress li { min-height: 42px !important; padding: 7px 9px !important; border-color: var(--product-line) !important; border-radius: 8px !important; background: var(--product-surface-soft) !important; color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .guided-progress li.active { border-color: #b8d9cf !important; background: var(--product-accent-soft) !important; color: #0d6f5f !important; } #mainApp:not(.auth-locked) .guided-progress li.done { border-color: #cbe2da !important; background: #f0f7f4 !important; color: #356d5e !important; } #mainApp:not(.auth-locked) .guided-stage { min-height: 0 !important; border-color: var(--product-line) !important; border-radius: 10px !important; background: #fff !important; color: var(--product-ink) !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .guided-step { min-height: 0 !important; } #mainApp:not(.auth-locked) .guided-stage-body { padding: 22px !important; } #mainApp:not(.auth-locked) .guided-section-head { margin-bottom: 17px !important; } #mainApp:not(.auth-locked) .guided-section-head h2 { color: var(--product-ink) !important; font-size: 21px !important; } #mainApp:not(.auth-locked) .guided-section-head p { color: var(--product-muted) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .guided-empty { min-height: 170px !important; padding: 22px !important; } #mainApp:not(.auth-locked) .guided-script-layout { grid-template-columns: 180px minmax(0, 1fr) !important; } #mainApp:not(.auth-locked) .guided-visual-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #mainApp:not(.auth-locked) .guided-final-layout { grid-template-columns: minmax(0, 1fr) 250px !important; } /* Assets, models, billing and review: operations first, reference material second. */ #mainApp:not(.auth-locked) .assets-page-shell { color: var(--product-ink) !important; gap: 14px !important; } #mainApp:not(.auth-locked) .assets-page-heading h2 { color: var(--product-ink) !important; font-size: 25px !important; } #mainApp:not(.auth-locked) .assets-page-heading p, #mainApp:not(.auth-locked) .assets-page-management-note { color: var(--product-muted) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .model-summary { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 9px !important; margin-bottom: 12px !important; } #mainApp:not(.auth-locked) .model-card { min-height: 84px !important; padding: 13px 15px !important; border-color: var(--product-line) !important; background: #fff !important; } #mainApp:not(.auth-locked) .model-card::after { display: none !important; } #mainApp:not(.auth-locked) .model-type { color: var(--product-muted) !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .model-card h3 { margin: 6px 0 2px !important; color: var(--product-ink) !important; font-size: 14px !important; } #mainApp:not(.auth-locked) .model-card p, #mainApp:not(.auth-locked) .model-health { margin-top: 4px !important; color: var(--product-muted) !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .api-layout { grid-template-columns: minmax(0, 1fr) 252px !important; gap: 12px !important; } #mainApp:not(.auth-locked) .api-group { padding: 16px !important; border-color: var(--product-line) !important; } #mainApp:not(.auth-locked) .api-group-head { margin-bottom: 12px !important; } #mainApp:not(.auth-locked) .api-group-head h3 { color: var(--product-ink) !important; font-size: 14px !important; } #mainApp:not(.auth-locked) .api-group-head span { color: var(--product-muted) !important; font-size: 11px !important; } #mainApp:not(.auth-locked) .source-pill { padding: 9px 10px !important; border-color: var(--product-line) !important; border-radius: 8px !important; background: #fff !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .source-pill.active { border-color: #a9cec3 !important; background: #f0f8f5 !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .source-pill b { color: var(--product-ink) !important; font-size: 11px !important; } #mainApp:not(.auth-locked) .source-pill span { color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .provider-row { padding: 10px 0 !important; border-color: var(--product-line) !important; font-size: 11px !important; } #mainApp:not(.auth-locked) .provider-row strong { color: var(--product-ink) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .provider-row small { color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .wallet-hero { min-height: 0 !important; margin-bottom: 12px !important; border: 1px solid var(--product-line) !important; border-radius: var(--product-radius) !important; background: #fff !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .wallet-main { padding: 20px 22px !important; } #mainApp:not(.auth-locked) .wallet-main span, #mainApp:not(.auth-locked) .wallet-main p { color: var(--product-muted) !important; font-size: 11px !important; } #mainApp:not(.auth-locked) .wallet-main h2 { margin: 6px 0 4px !important; color: var(--product-ink) !important; font-size: 28px !important; } #mainApp:not(.auth-locked) .wallet-actions { margin-top: 14px !important; } #mainApp:not(.auth-locked) .wallet-actions .btn { border-color: var(--product-line-strong) !important; background: #fff !important; color: var(--product-copy) !important; } #mainApp:not(.auth-locked) .wallet-actions .btn.primary { border-color: var(--product-accent) !important; background: var(--product-accent) !important; color: #fff !important; } #mainApp:not(.auth-locked) .wallet-side { background: var(--product-line) !important; } #mainApp:not(.auth-locked) .wallet-stat { padding: 16px !important; background: var(--product-surface-soft) !important; } #mainApp:not(.auth-locked) .wallet-stat span { color: var(--product-muted) !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .wallet-stat b { margin-top: 5px !important; color: var(--product-ink) !important; font-size: 16px !important; } #mainApp:not(.auth-locked) .billing-grid { grid-template-columns: minmax(0, 1fr) 260px !important; gap: 12px !important; } #mainApp:not(.auth-locked) .review-flow { padding: 12px 15px !important; margin-bottom: 10px !important; } #mainApp:not(.auth-locked) .review-step b { color: var(--product-ink) !important; font-size: 11px !important; } #mainApp:not(.auth-locked) .review-step span { color: var(--product-muted) !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .review-logic { gap: 7px !important; margin-bottom: 10px !important; } #mainApp:not(.auth-locked) .logic-card { padding: 10px 11px !important; border-color: var(--product-line) !important; border-radius: 9px !important; } #mainApp:not(.auth-locked) .logic-card b { color: var(--product-ink) !important; font-size: 11px !important; } #mainApp:not(.auth-locked) .logic-card span { color: var(--product-muted) !important; font-size: 10px !important; } #mainApp:not(.auth-locked) .logic-card.active { border-color: #b8d9cf !important; background: #f0f8f5 !important; } #mainApp:not(.auth-locked) .review-v2 { grid-template-columns: minmax(0, 1fr) 300px !important; gap: 12px !important; } #mainApp:not(.auth-locked) .review-delivery-grid { grid-template-columns: minmax(0, 1.35fr) minmax(280px, .65fr) !important; gap: 12px !important; } #mainApp:not(.auth-locked) .readiness-blockers { display: grid !important; gap: 7px !important; margin: 0 !important; padding: 13px 16px 13px 34px !important; border-bottom: 1px solid var(--product-line) !important; background: var(--product-warning-soft) !important; color: #76581d !important; font-size: 12px !important; line-height: 1.55 !important; } #mainApp:not(.auth-locked) .approval-layout { grid-template-columns: minmax(0, 1fr) 320px !important; gap: 12px !important; } /* Tables and repeated rows must be readable without wasting height. */ #mainApp:not(.auth-locked) table { color: var(--product-copy) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) th { height: 40px !important; padding: 9px 11px !important; background: var(--product-surface-soft) !important; color: var(--product-muted) !important; font-size: 11px !important; font-weight: 650 !important; } #mainApp:not(.auth-locked) td { min-height: 44px !important; padding: 11px !important; border-color: var(--product-line) !important; } #mainApp:not(.auth-locked) .project-row { min-height: 52px !important; color: var(--product-copy) !important; font-size: 12px !important; } @media (max-width: 1180px) { #mainApp:not(.auth-locked) { display: grid !important; grid-template-columns: 184px minmax(0, 1fr) !important; } #mainApp:not(.auth-locked) .project-workbench-shell, #mainApp:not(.auth-locked) .script-shell, #mainApp:not(.auth-locked) .production-shell, #mainApp:not(.auth-locked) .final-cut-workbench, #mainApp:not(.auth-locked) .delivery-shell { grid-template-columns: 164px minmax(0, 1fr) !important; grid-template-areas: "context primary" "inspector inspector" !important; } #mainApp:not(.auth-locked) .inputs-shell { grid-template-columns: minmax(0, 1fr) 214px !important; grid-template-areas: none !important; } #mainApp:not(.auth-locked) :is(.script-inspector, .production-inspector, .cut-properties, .delivery-inspector) { position: static !important; } #mainApp:not(.auth-locked) .workbench { grid-template-columns: 170px minmax(0, 1fr) !important; height: auto !important; } #mainApp:not(.auth-locked) .workbench > .pane:last-child { grid-column: 1 / -1 !important; border-top: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .api-layout, #mainApp:not(.auth-locked) .billing-grid, #mainApp:not(.auth-locked) .review-v2 { grid-template-columns: minmax(0, 1fr) 230px !important; } } @media (max-width: 820px) { #mainApp:not(.auth-locked) { display: block !important; height: auto !important; overflow: visible !important; } #mainApp:not(.auth-locked) .sidebar { position: sticky !important; top: 0 !important; z-index: 50 !important; min-height: 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .brand, #mainApp:not(.auth-locked) .side-foot, #mainApp:not(.auth-locked) .nav-label { display: none !important; } #mainApp:not(.auth-locked) .nav-group { display: flex !important; gap: 4px !important; width: 100% !important; max-width: 100vw !important; padding: 7px 10px !important; overflow-x: auto !important; overscroll-behavior-inline: contain !important; contain: inline-size !important; } #mainApp:not(.auth-locked) .nav-item { flex: 0 0 auto !important; min-height: 38px !important; margin: 0 !important; padding: 0 10px !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .nav-icon { display: none !important; } #mainApp:not(.auth-locked) .main { height: auto !important; overflow: visible !important; } #mainApp:not(.auth-locked) .topbar { height: 56px !important; padding: 0 14px !important; } #mainApp:not(.auth-locked) .user-name { display: none !important; } #mainApp:not(.auth-locked) .workspace { padding: 18px 14px 36px !important; overflow: visible !important; } #mainApp:not(.auth-locked) .page-title { align-items: flex-start !important; flex-direction: column !important; } #mainApp:not(.auth-locked) .page-title .actions { margin-left: 0 !important; width: 100% !important; } #mainApp:not(.auth-locked) .page-title .actions .btn { flex: 1 1 auto !important; } #mainApp:not(.auth-locked) .wizard-layout, #mainApp:not(.auth-locked) .project-workbench-shell, #mainApp:not(.auth-locked) .inputs-shell, #mainApp:not(.auth-locked) .script-shell, #mainApp:not(.auth-locked) .production-shell, #mainApp:not(.auth-locked) .final-cut-workbench, #mainApp:not(.auth-locked) .delivery-shell, #mainApp:not(.auth-locked) .workbench, #mainApp:not(.auth-locked) .api-layout, #mainApp:not(.auth-locked) .billing-grid, #mainApp:not(.auth-locked) .review-v2, #mainApp:not(.auth-locked) .review-delivery-grid, #mainApp:not(.auth-locked) .approval-layout, #mainApp:not(.auth-locked) .guided-final-layout { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: none !important; } #mainApp:not(.auth-locked) :is(.compliance-card, .workspace-rail, .script-inspector, .production-inspector, .cut-properties, .delivery-context, .delivery-inspector) { position: static !important; } #mainApp:not(.auth-locked) .template-picker, #mainApp:not(.auth-locked) .catalog-project-grid, #mainApp:not(.auth-locked) .model-summary, #mainApp:not(.auth-locked) .guided-visual-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } #mainApp:not(.auth-locked) .steps { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px !important; width: 100% !important; padding: 10px !important; } #mainApp:not(.auth-locked) .step { min-width: 0 !important; padding: 5px !important; } #mainApp:not(.auth-locked) .step::after { display: none !important; } #mainApp:not(.auth-locked) .hub-toolbar { display: grid !important; grid-template-columns: minmax(0,1fr) !important; gap: 8px !important; width: 100% !important; } #mainApp:not(.auth-locked) .hub-tabs { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; } #mainApp:not(.auth-locked) .hub-search { width: 100% !important; max-width: none !important; } #mainApp:not(.auth-locked) .project-shell { grid-template-columns: minmax(0,1fr) !important; width: 100% !important; } #mainApp:not(.auth-locked) .project-side { width: 100% !important; min-width: 0 !important; } #mainApp:not(.auth-locked) .story-layout { grid-template-columns: minmax(0,1fr) !important; width: 100% !important; height: auto !important; min-height: 0 !important; } #mainApp:not(.auth-locked) .story-layout .shot-grid { grid-template-columns: minmax(0,1fr) !important; } #mainApp:not(.auth-locked) .editor-layout { grid-template-columns: minmax(0,1fr) !important; width: 100% !important; min-width: 0 !important; } #mainApp:not(.auth-locked) #editor .card, #mainApp:not(.auth-locked) #editor .card-body, #mainApp:not(.auth-locked) #editor .preview { width: 100% !important; min-width: 0 !important; } #mainApp:not(.auth-locked) #editor .timeline { width: 100% !important; max-width: 100% !important; overflow-x: auto !important; } #mainApp:not(.auth-locked) #editor .timeline > * { min-width: 680px !important; } #mainApp:not(.auth-locked) .kb-shell { grid-template-columns: minmax(0,1fr) !important; width: 100% !important; min-height: 0 !important; overflow: visible !important; } #mainApp:not(.auth-locked) .kb-col { width: 100% !important; min-width: 0 !important; } #mainApp:not(.auth-locked) .kb-col + .kb-col { border-left: 0 !important; border-top: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .kb-doc { grid-template-columns: 34px minmax(0,1fr) auto !important; } #mainApp:not(.auth-locked) .kb-doc > b { display: none !important; } #mainApp:not(.auth-locked) .workbench > .pane { grid-column: auto !important; border-left: 0 !important; border-top: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .stage-model-selector { grid-template-columns: minmax(0, 1fr) auto !important; } #mainApp:not(.auth-locked) .stage-model-heading { grid-column: 1 !important; } #mainApp:not(.auth-locked) .stage-model-choice { grid-column: 1 !important; } #mainApp:not(.auth-locked) .stage-model-details { grid-column: 2 !important; grid-row: 1 / span 2 !important; } } @media (max-width: 520px) { #mainApp:not(.auth-locked) .crumb > span:first-child, #mainApp:not(.auth-locked) .env-tag { display: none !important; } #mainApp:not(.auth-locked) .page-title h2 { font-size: 22px !important; } #mainApp:not(.auth-locked) .template-picker, #mainApp:not(.auth-locked) .catalog-project-grid, #mainApp:not(.auth-locked) .model-summary, #mainApp:not(.auth-locked) .guided-visual-grid, #mainApp:not(.auth-locked) .package-grid, #mainApp:not(.auth-locked) .guided-facts { grid-template-columns: minmax(0, 1fr) !important; } #mainApp:not(.auth-locked) .template-grid { grid-template-columns: minmax(0,1fr) !important; } #mainApp:not(.auth-locked) .catalog-summary { grid-template-columns: minmax(0, 1fr) !important; } #mainApp:not(.auth-locked) .catalog-summary > div { min-height: 52px !important; border-right: 0 !important; border-bottom: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .catalog-summary > div:last-child { border-bottom: 0 !important; } #mainApp:not(.auth-locked) .guided-script-layout { grid-template-columns: minmax(0, 1fr) !important; } #mainApp:not(.auth-locked) .guided-progress { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } /* Product redesign v3. One visual language for every authenticated page. */ :root { --product-canvas: #f5f7f8; --product-surface: #ffffff; --product-surface-soft: #f8faf9; --product-ink: #17212b; --product-copy: #44535f; --product-muted: #6d7b85; --product-line: #dde4e7; --product-line-strong: #cbd5d9; --product-accent: #14766b; --product-accent-hover: #0f6259; --product-accent-soft: #e8f3f0; --product-warning: #8a641f; --product-warning-soft: #fff7e8; --product-danger: #9b4646; --product-danger-soft: #fff1f1; --product-shadow: 0 8px 26px rgba(35, 53, 61, .06); --product-radius: 10px; --product-control-radius: 8px; } #mainApp:not(.auth-locked), #mainApp:not(.auth-locked) button, #mainApp:not(.auth-locked) input, #mainApp:not(.auth-locked) select, #mainApp:not(.auth-locked) textarea { font-family: "Noto Sans SC", "PingFang SC", "Microsoft YaHei UI", "Microsoft YaHei", system-ui, sans-serif !important; -webkit-font-smoothing: antialiased !important; } #mainApp:not(.auth-locked) { grid-template-columns: 196px minmax(0, 1fr) !important; background: var(--product-canvas) !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .sidebar { display: flex !important; flex-direction: column !important; align-items: stretch !important; width: auto !important; min-height: 100dvh !important; overflow: hidden !important; background: #fbfcfc !important; border-right: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .brand { flex: 0 0 auto !important; width: 100% !important; min-height: 64px !important; height: 64px !important; padding: 14px 18px !important; } #mainApp:not(.auth-locked) .brand-mark { width: 28px !important; height: 28px !important; margin-right: 9px !important; border-radius: 7px !important; } #mainApp:not(.auth-locked) .brand h1 { font-size: 15px !important; font-weight: 720 !important; } #mainApp:not(.auth-locked) .brand small { margin-top: 2px !important; font-size: 9px !important; letter-spacing: .03em !important; } #mainApp:not(.auth-locked) .nav-group { display: flex !important; flex: 0 0 auto !important; flex-direction: column !important; align-items: stretch !important; gap: 2px !important; width: 100% !important; height: auto !important; padding: 14px 10px !important; overflow: visible !important; } #mainApp:not(.auth-locked) .nav-label { margin: 0 9px 7px !important; font-size: 10px !important; letter-spacing: .03em !important; } #mainApp:not(.auth-locked) .nav-item { flex: 0 0 auto !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; min-height: 40px !important; margin: 0 !important; padding: 0 10px !important; border: 0 !important; border-radius: 8px !important; font-size: 13px !important; white-space: nowrap !important; } #mainApp:not(.auth-locked) .nav-item.active { background: #e9f3f0 !important; color: #0d685f !important; } #mainApp:not(.auth-locked) .nav-icon { width: 24px !important; height: 24px !important; margin-right: 8px !important; border-radius: 6px !important; } #mainApp:not(.auth-locked) .side-foot { display: block !important; margin-top: auto !important; padding: 10px !important; } #mainApp:not(.auth-locked) .security-box { padding: 10px !important; border-radius: 8px !important; background: #f7f9f8 !important; } #mainApp:not(.auth-locked) .security-box strong { font-size: 11px !important; } #mainApp:not(.auth-locked) .security-box p { font-size: 9px !important; line-height: 1.5 !important; } #mainApp:not(.auth-locked) .main { min-width: 0 !important; height: 100dvh !important; overflow: hidden !important; } #mainApp:not(.auth-locked) .topbar { height: 58px !important; padding: 0 clamp(16px, 2vw, 26px) !important; background: rgba(255,255,255,.97) !important; backdrop-filter: blur(10px) !important; } #mainApp:not(.auth-locked) .workspace { height: calc(100dvh - 58px) !important; padding: 18px clamp(16px, 1.8vw, 26px) 34px !important; overflow-y: auto !important; background: var(--product-canvas) !important; } #mainApp:not(.auth-locked) .page { max-width: 1480px !important; } #mainApp:not(.auth-locked) .page-title { min-height: 0 !important; align-items: center !important; margin-bottom: 14px !important; } #mainApp:not(.auth-locked) .page-title h2 { font-size: 23px !important; font-weight: 720 !important; letter-spacing: -.02em !important; } #mainApp:not(.auth-locked) .page-title p { margin-top: 4px !important; color: var(--product-muted) !important; font-size: 12px !important; line-height: 1.55 !important; } #mainApp:not(.auth-locked) :is(.page-title .eyebrow, .overview-kicker, .prompt-kicker, .queue-eyebrow, .model-inspector-eyebrow) { display: none !important; } #mainApp:not(.auth-locked) .btn { min-height: 38px !important; padding: 0 13px !important; border-radius: 8px !important; font-size: 12px !important; font-weight: 650 !important; transition: border-color .16s ease, background-color .16s ease, color .16s ease, transform .08s ease !important; } #mainApp:not(.auth-locked) .btn.small { min-height: 32px !important; padding-inline: 10px !important; font-size: 11px !important; } #mainApp:not(.auth-locked) :is(input:not([type="checkbox"]):not([type="radio"]), select, textarea) { min-height: 40px !important; border-color: var(--product-line-strong) !important; border-radius: 8px !important; color: var(--product-ink) !important; font-size: 13px !important; } #mainApp:not(.auth-locked) textarea { min-height: 88px !important; padding: 10px 11px !important; line-height: 1.65 !important; } #mainApp:not(.auth-locked) label { color: #4c5b66 !important; font-size: 12px !important; font-weight: 650 !important; } #mainApp:not(.auth-locked) :is(input, textarea)::placeholder { color: #86939b !important; opacity: 1 !important; } #mainApp:not(.auth-locked) :is(.card, .workspace-panel, .input-section, .workbench-disclosure, .workbench-context, .workbench-primary, .workbench-inspector) { border-color: var(--product-line) !important; border-radius: 10px !important; background: #fff !important; box-shadow: none !important; } #mainApp:not(.auth-locked) :is(.card-head, .workspace-panel-head) { min-height: 48px !important; padding: 11px 14px !important; } #mainApp:not(.auth-locked) :is(.card-head h3, .workspace-panel-head h3) { font-size: 14px !important; } #mainApp:not(.auth-locked) .card-body { padding: 14px !important; } #mainApp:not(.auth-locked) .status { min-height: 22px !important; padding: 2px 7px !important; border-radius: 6px !important; font-size: 10px !important; } #mainApp:not(.auth-locked) #dashboard .project-workbench-header { padding: 14px 16px 12px !important; border-radius: 10px !important; } #mainApp:not(.auth-locked) .project-workbench-title { align-items: baseline !important; gap: 8px !important; } #mainApp:not(.auth-locked) .project-workbench-title h3 { font-size: 19px !important; line-height: 1.35 !important; } #mainApp:not(.auth-locked) .project-workbench-title > span:last-child { font-size: 11px !important; } #mainApp:not(.auth-locked) .project-workbench-header .workbench-stage-nav { gap: 4px !important; margin-top: 11px !important; padding: 3px !important; border-radius: 8px !important; } #mainApp:not(.auth-locked) .project-workbench-header .stage-nav-item { min-height: 36px !important; padding: 5px 7px !important; border-radius: 6px !important; } #mainApp:not(.auth-locked) .project-workbench-header .stage-nav-item > span { width: 20px !important; height: 20px !important; font-size: 9px !important; } #mainApp:not(.auth-locked) .project-workbench-header .stage-nav-item strong { font-size: 11px !important; } #mainApp:not(.auth-locked) .project-workbench-meta { margin-top: 8px !important; } #mainApp:not(.auth-locked) .project-workbench-meta div { min-height: 46px !important; padding: 8px 10px 0 !important; } #mainApp:not(.auth-locked) .project-workbench-meta span { font-size: 9px !important; } #mainApp:not(.auth-locked) .project-workbench-meta b { font-size: 11px !important; } #mainApp:not(.auth-locked) .project-workbench-shell { grid-template-columns: 158px minmax(0, 1fr) 248px !important; gap: 10px !important; margin: 12px 0 18px !important; align-items: start !important; } #mainApp:not(.auth-locked) .inputs-shell { grid-template-columns: minmax(0, 1fr) 248px !important; } #mainApp:not(.auth-locked) .inputs-shell > .workspace-primary { grid-area: auto !important; grid-column: 1 !important; order: 0 !important; } #mainApp:not(.auth-locked) .inputs-shell > .workspace-rail { grid-area: auto !important; grid-column: 2 !important; order: 0 !important; } #mainApp:not(.auth-locked) .script-shell { grid-template-columns: 158px minmax(0, 1fr) 248px !important; } #mainApp:not(.auth-locked) :is(.production-shell, .final-cut-workbench) { grid-template-columns: 154px minmax(0, 1fr) 250px !important; } #mainApp:not(.auth-locked) .delivery-shell { grid-template-columns: 164px minmax(0, 1fr) 266px !important; } #mainApp:not(.auth-locked) .workbench-primary { min-width: 0 !important; min-height: 0 !important; padding: 14px !important; } #mainApp:not(.auth-locked) :is(.workbench-context, .workbench-inspector) { min-width: 0 !important; padding: 11px !important; } #mainApp:not(.auth-locked) :is(.script-inspector, .production-inspector, .cut-properties, .delivery-context, .delivery-inspector, .workspace-rail) { top: 70px !important; } #mainApp:not(.auth-locked) .workbench-subhead { min-height: 0 !important; padding: 0 0 10px !important; } #mainApp:not(.auth-locked) .workbench-subhead strong { font-size: 14px !important; } #mainApp:not(.auth-locked) .workbench-subhead small { font-size: 10px !important; line-height: 1.45 !important; } #mainApp:not(.auth-locked) .script-editor-panel { padding: 14px !important; } #mainApp:not(.auth-locked) .script-primary-actions { display: flex !important; align-items: center !important; flex-wrap: wrap !important; gap: 7px !important; margin: 0 0 12px !important; padding: 0 !important; } #mainApp:not(.auth-locked) .script-primary-actions > .btn { order: 10 !important; } #mainApp:not(.auth-locked) .script-primary-actions > .stage-model-selector { order: 20 !important; flex: 0 0 100% !important; } #mainApp:not(.auth-locked) .workbench-title-input { height: 40px !important; margin: 0 0 9px !important; } #mainApp:not(.auth-locked) .script-content-input { min-height: 150px !important; flex: 0 0 auto !important; } #mainApp:not(.auth-locked) .script-assistant { margin-top: 14px !important; padding-top: 12px !important; border-top: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .script-inspector { gap: 9px !important; background: #f8faf9 !important; } #mainApp:not(.auth-locked) .script-inspector h3 { margin: 0 !important; font-size: 17px !important; } #mainApp:not(.auth-locked) .script-inspector p, #mainApp:not(.auth-locked) .script-inspector small { margin: 0 !important; color: var(--product-muted) !important; font-size: 11px !important; line-height: 1.55 !important; } #mainApp:not(.auth-locked) .storyboard-generation-action { gap: 7px !important; } /* Model selection is contextual text, never a panel. */ #mainApp:not(.auth-locked) .stage-model-selector { min-height: 30px !important; } #mainApp:not(.auth-locked) .stage-model-trigger { min-height: 30px !important; max-width: min(100%, 260px) !important; padding: 0 4px !important; border: 0 !important; border-radius: 5px !important; background: transparent !important; color: #5d6d77 !important; font-size: 11px !important; font-weight: 600 !important; } #mainApp:not(.auth-locked) .stage-model-trigger:hover { background: #f1f5f4 !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .stage-model-menu[open] > .stage-model-trigger { background: #eef5f3 !important; box-shadow: none !important; } #mainApp:not(.auth-locked) .stage-model-glyph { display: none !important; } #mainApp:not(.auth-locked) .stage-model-chevron { width: 6px !important; height: 6px !important; } #mainApp:not(.auth-locked) .stage-model-popover { width: min(320px, calc(100vw - 40px)) !important; padding: 10px !important; border-radius: 8px !important; box-shadow: 0 12px 34px rgba(35,53,61,.13) !important; } #mainApp:not(.auth-locked) .input-section.is-open { padding: 16px !important; } #mainApp:not(.auth-locked) .input-section-head { margin-bottom: 14px !important; } #mainApp:not(.auth-locked) .input-section-head h3 { font-size: 19px !important; } #mainApp:not(.auth-locked) .project-input-form { gap: 12px !important; } #mainApp:not(.auth-locked) .workbench-disclosure > summary { min-height: 48px !important; padding: 10px 13px !important; } #mainApp:not(.auth-locked) .workbench-disclosure-body { padding: 13px !important; } #mainApp:not(.auth-locked) .production-readiness-panel { padding: 12px !important; background: #f8faf9 !important; } #mainApp:not(.auth-locked) .production-readiness-panel h3 { font-size: 15px !important; } #mainApp:not(.auth-locked) .readiness-blockers { padding: 10px 12px 10px 28px !important; font-size: 11px !important; } #mainApp:not(.auth-locked) .generation-queue-details { margin: 12px 0 18px !important; border-color: var(--product-line) !important; border-radius: 9px !important; background: #fff !important; } #mainApp:not(.auth-locked) .generation-queue-details > summary { min-height: 42px !important; padding: 9px 12px !important; background: #fff !important; color: var(--product-copy) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .catalog-summary { border-radius: 10px !important; } #mainApp:not(.auth-locked) .catalog-summary > div { min-height: 58px !important; padding: 11px 14px !important; } #mainApp:not(.auth-locked) .catalog-summary strong { font-size: 20px !important; } #mainApp:not(.auth-locked) .catalog-project-grid { gap: 10px !important; } #mainApp:not(.auth-locked) .catalog-project-card { padding: 14px 15px !important; border-radius: 10px !important; } #mainApp:not(.auth-locked) .project-filter-simple { gap: 6px !important; margin-bottom: 12px !important; } @media (max-width: 1280px) and (min-width: 821px) { #mainApp:not(.auth-locked) { grid-template-columns: 176px minmax(0, 1fr) !important; } #mainApp:not(.auth-locked) .project-workbench-shell:not(.inputs-shell) { grid-template-columns: 148px minmax(0, 1fr) !important; grid-template-areas: "context primary" "inspector inspector" !important; } #mainApp:not(.auth-locked) .project-workbench-shell:not(.inputs-shell) > .workbench-context { grid-area: context !important; } #mainApp:not(.auth-locked) .project-workbench-shell:not(.inputs-shell) > .workbench-primary { grid-area: primary !important; } #mainApp:not(.auth-locked) .project-workbench-shell:not(.inputs-shell) > .workbench-inspector { grid-area: inspector !important; position: static !important; } #mainApp:not(.auth-locked) .inputs-shell { grid-template-columns: minmax(0, 1fr) 224px !important; } } @media (max-width: 820px) { #mainApp:not(.auth-locked) { display: block !important; } #mainApp:not(.auth-locked) .sidebar { position: sticky !important; top: 0 !important; z-index: 50 !important; display: block !important; min-height: 0 !important; border-right: 0 !important; border-bottom: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .brand, #mainApp:not(.auth-locked) .side-foot, #mainApp:not(.auth-locked) .nav-label { display: none !important; } #mainApp:not(.auth-locked) .nav-group { display: flex !important; flex-direction: row !important; gap: 4px !important; padding: 7px 10px !important; overflow-x: auto !important; } #mainApp:not(.auth-locked) .nav-item { width: auto !important; min-height: 36px !important; padding-inline: 10px !important; } #mainApp:not(.auth-locked) .nav-icon { display: none !important; } #mainApp:not(.auth-locked) .main { height: auto !important; overflow: visible !important; } #mainApp:not(.auth-locked) .topbar { height: 54px !important; } #mainApp:not(.auth-locked) .workspace { height: auto !important; min-height: calc(100dvh - 98px) !important; padding: 14px 12px 28px !important; overflow: visible !important; } #mainApp:not(.auth-locked) .project-workbench-shell, #mainApp:not(.auth-locked) .project-workbench-shell:not(.inputs-shell), #mainApp:not(.auth-locked) .inputs-shell { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "primary" "context" "inspector" !important; } #mainApp:not(.auth-locked) .inputs-shell { grid-template-areas: "primary" "inspector" !important; } #mainApp:not(.auth-locked) .inputs-shell > .workspace-primary { grid-area: primary !important; grid-column: 1 !important; } #mainApp:not(.auth-locked) .inputs-shell > .workspace-rail { grid-area: inspector !important; grid-column: 1 !important; } #mainApp:not(.auth-locked) .project-workbench-shell > .workbench-primary { grid-area: primary !important; } #mainApp:not(.auth-locked) .project-workbench-shell > .workbench-context { grid-area: context !important; } #mainApp:not(.auth-locked) .project-workbench-shell > .workbench-inspector { grid-area: inspector !important; } #mainApp:not(.auth-locked) .project-workbench-header .workbench-stage-nav { display: flex !important; overflow-x: auto !important; } #mainApp:not(.auth-locked) .project-workbench-header .stage-nav-item { flex: 0 0 120px !important; } } @media (max-width: 520px) { #mainApp:not(.auth-locked) .topbar { padding-inline: 12px !important; } #mainApp:not(.auth-locked) .env-tag, #mainApp:not(.auth-locked) .crumb > span:first-child { display: none !important; } #mainApp:not(.auth-locked) .page-title { align-items: flex-start !important; } #mainApp:not(.auth-locked) .page-title h2 { font-size: 21px !important; } #mainApp:not(.auth-locked) .page-title .actions { width: 100% !important; } #mainApp:not(.auth-locked) .page-title .actions .btn { flex: 1 1 auto !important; } #mainApp:not(.auth-locked) #dashboard .project-workbench-header { padding: 12px !important; } #mainApp:not(.auth-locked) .project-workbench-meta div:nth-child(n+3) { display: none !important; } #mainApp:not(.auth-locked) .script-primary-actions > .btn { width: 100% !important; } #mainApp:not(.auth-locked) .catalog-project-grid { grid-template-columns: minmax(0, 1fr) !important; } } @media (prefers-reduced-motion: reduce) { #mainApp:not(.auth-locked) *, #mainApp:not(.auth-locked) *::before, #mainApp:not(.auth-locked) *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; } } @media (prefers-reduced-motion: reduce) { #mainApp:not(.auth-locked) *, #mainApp:not(.auth-locked) *::before, #mainApp:not(.auth-locked) *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; } } /* Keep provider execution secondary to the user's creative work. */ #mainApp:not(.auth-locked) .generation-queue-details > summary { min-height: 40px !important; padding: 8px 12px !important; border: 1px solid var(--product-line) !important; border-radius: var(--product-control-radius) !important; background: var(--product-surface) !important; color: var(--product-muted) !important; font-size: 12px !important; font-weight: 650 !important; } #mainApp:not(.auth-locked) .generation-queue-details[open] > summary { border-bottom-color: var(--product-line) !important; border-radius: var(--product-control-radius) var(--product-control-radius) 0 0 !important; background: var(--product-surface) !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .generation-queue-details .generation-queue-workbench, #mainApp:not(.auth-locked) .generation-queue-workbench { gap: 12px !important; padding: 14px !important; border: 1px solid var(--product-line) !important; border-radius: var(--product-control-radius) !important; background: var(--product-surface) !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .generation-queue-details .generation-queue-workbench { border-top: 0 !important; border-radius: 0 0 var(--product-control-radius) var(--product-control-radius) !important; } #mainApp:not(.auth-locked) .queue-workbench-head h4, #mainApp:not(.auth-locked) .queue-task-title strong, #mainApp:not(.auth-locked) .queue-empty strong { color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .queue-workbench-head p, #mainApp:not(.auth-locked) .queue-summary span, #mainApp:not(.auth-locked) .queue-filter-field, #mainApp:not(.auth-locked) .queue-filter-count, #mainApp:not(.auth-locked) .queue-task-meta, #mainApp:not(.auth-locked) .queue-task-meta span + span, #mainApp:not(.auth-locked) .queue-priority, #mainApp:not(.auth-locked) .queue-priority-readonly, #mainApp:not(.auth-locked) .queue-cost, #mainApp:not(.auth-locked) .queue-empty { color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .queue-eyebrow, #mainApp:not(.auth-locked) .queue-live-status { color: var(--product-accent) !important; } #mainApp:not(.auth-locked) .queue-summary { border-color: #bde7df !important; background: #edf9f6 !important; color: var(--product-accent) !important; } #mainApp:not(.auth-locked) .queue-filters { padding: 10px 0 !important; border-color: var(--product-line) !important; } #mainApp:not(.auth-locked) .queue-filter-field select, #mainApp:not(.auth-locked) .queue-priority input { border: 1px solid var(--product-line-strong) !important; background: #fff !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .generation-queue-details .queue-task-card, #mainApp:not(.auth-locked) .queue-task-card { padding: 12px !important; border-color: var(--product-line) !important; background: #fbfcfc !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .queue-task-type { background: #e7f5f2 !important; color: #08776d !important; } #mainApp:not(.auth-locked) .queue-task-type--video { background: #eaf1f8 !important; color: #285e8a !important; } #mainApp:not(.auth-locked) .queue-task-type--audio { background: #f8f0e3 !important; color: #8b611f !important; } #mainApp:not(.auth-locked) .queue-task-type--edit { background: #f1ecf7 !important; color: #6e4b8b !important; } #mainApp:not(.auth-locked) .queue-task-status { background: #eef2f4 !important; color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .queue-task-status--queued { background: #eaf1f8 !important; color: #285e8a !important; } #mainApp:not(.auth-locked) .queue-task-status--running, #mainApp:not(.auth-locked) .queue-task-status--processing { background: #e7f5f2 !important; color: #08776d !important; } #mainApp:not(.auth-locked) .queue-task-status--failed { background: #f9e9ea !important; color: #a33e46 !important; } #mainApp:not(.auth-locked) .queue-task-status--needs_attention { background: #f8f0e3 !important; color: #8b611f !important; } #mainApp:not(.auth-locked) .queue-progress { background: #e4eaed !important; } #mainApp:not(.auth-locked) .queue-progress span { background: var(--product-accent) !important; } #mainApp:not(.auth-locked) .queue-progress-row em { color: var(--product-muted) !important; } #mainApp:not(.auth-locked) .queue-error { background: #fdf0f1 !important; color: #923b43 !important; } #mainApp:not(.auth-locked) .queue-error strong { color: #762d34 !important; } #mainApp:not(.auth-locked) .queue-actions .btn { border-color: var(--product-line-strong) !important; background: #fff !important; color: var(--product-ink) !important; } #mainApp:not(.auth-locked) .queue-actions .btn:hover { border-color: #8fd5c8 !important; background: #edf9f6 !important; color: #075d55 !important; } #mainApp:not(.auth-locked) .queue-actions .btn.danger { border-color: #e5b5b9 !important; color: #a33e46 !important; } #mainApp:not(.auth-locked) .queue-empty { border-color: var(--product-line-strong) !important; } @media (max-width: 520px) { #mainApp:not(.auth-locked) .stage-model-popover, #mainApp:not(.auth-locked) :is(.workbench-inspector, .workspace-rail) .stage-model-popover, #mainApp:not(.auth-locked) .inline-model-popover, #mainApp:not(.auth-locked) .storyboard-model-menu .inline-model-popover, #mainApp:not(.auth-locked) .legacy-stage-model-popover { right: auto !important; left: 0 !important; width: min(320px, calc(100vw - 40px)) !important; min-width: 0 !important; } #mainApp:not(.auth-locked) .inline-model-popover { grid-template-columns: minmax(0, 1fr) !important; } #mainApp:not(.auth-locked) .stage-model-trigger, #mainApp:not(.auth-locked) .inline-model-menu > summary, #mainApp:not(.auth-locked) .legacy-stage-model-picker > summary { max-width: min(286px, calc(100vw - 52px)) !important; } } /* Final conflict guard for legacy dark queue rules loaded earlier in this file. */ #mainApp:not(.auth-locked) .generation-queue-details { margin: 12px 0 18px !important; border: 1px solid var(--product-line) !important; border-radius: 9px !important; background: #fff !important; color: var(--product-copy) !important; overflow: hidden !important; } #mainApp:not(.auth-locked) .generation-queue-details > summary, #mainApp:not(.auth-locked) .generation-queue-details[open] > summary { min-height: 42px !important; padding: 9px 12px !important; border-color: var(--product-line) !important; background: #fff !important; color: var(--product-copy) !important; font-size: 12px !important; font-weight: 650 !important; } #mainApp:not(.auth-locked) .generation-queue-details .generation-queue-workbench { border-color: var(--product-line) !important; background: #fff !important; color: var(--product-copy) !important; } /* Final layout ownership. These selectors intentionally outrank legacy stage CSS. */ html body #mainApp:not(.auth-locked) .project-workbench-shell.script-shell { grid-template-columns: 140px minmax(0, 1fr) 220px !important; gap: 10px !important; margin: 12px 0 18px !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell.production-shell, html body #mainApp:not(.auth-locked) .project-workbench-shell.final-cut-workbench { grid-template-columns: 140px minmax(0, 1fr) 224px !important; gap: 10px !important; margin: 12px 0 18px !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell.delivery-shell { grid-template-columns: 148px minmax(0, 1fr) 236px !important; gap: 10px !important; margin: 12px 0 18px !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell.inputs-shell { grid-template-columns: minmax(0, 1fr) 224px !important; gap: 10px !important; margin: 12px 0 18px !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell.inputs-shell > .workspace-primary { grid-area: auto !important; grid-column: 1 !important; order: 0 !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell.inputs-shell > .workspace-rail { grid-area: auto !important; grid-column: 2 !important; order: 0 !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell .workbench-primary textarea.script-content-input { height: 170px !important; min-height: 170px !important; flex: 0 0 170px !important; } html body #mainApp:not(.auth-locked) .script-inspector > .status { justify-self: start !important; width: auto !important; min-width: 0 !important; background: var(--product-warning-soft) !important; color: var(--product-warning) !important; } /* Management views keep operational records dominant; readiness is a compact rail. */ html body #mainApp:not(.auth-locked) .review-delivery-grid { grid-template-columns: minmax(0, 1fr) 300px !important; gap: 10px !important; } html body #mainApp:not(.auth-locked) .readiness-blockers { max-height: 230px; overflow: auto; scrollbar-width: thin; } @media (max-width: 820px) { html body #mainApp:not(.auth-locked) .review-delivery-grid { grid-template-columns: minmax(0, 1fr) !important; } } @media (max-width: 1280px) and (min-width: 821px) { html body #mainApp:not(.auth-locked) .project-workbench-shell:not(.inputs-shell) { grid-template-columns: 140px minmax(0, 1fr) !important; grid-template-areas: "context primary" "inspector inspector" !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell:not(.inputs-shell) > .workbench-context { grid-area: context !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell:not(.inputs-shell) > .workbench-primary { grid-area: primary !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell:not(.inputs-shell) > .workbench-inspector { grid-area: inspector !important; position: static !important; } } @media (max-width: 820px) { html body #mainApp:not(.auth-locked) .project-workbench-shell, html body #mainApp:not(.auth-locked) .project-workbench-shell.inputs-shell, html body #mainApp:not(.auth-locked) .project-workbench-shell.script-shell, html body #mainApp:not(.auth-locked) .project-workbench-shell.production-shell, html body #mainApp:not(.auth-locked) .project-workbench-shell.final-cut-workbench, html body #mainApp:not(.auth-locked) .project-workbench-shell.delivery-shell { grid-template-columns: minmax(0, 1fr) !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell.script-shell, html body #mainApp:not(.auth-locked) .project-workbench-shell.production-shell, html body #mainApp:not(.auth-locked) .project-workbench-shell.final-cut-workbench, html body #mainApp:not(.auth-locked) .project-workbench-shell.delivery-shell { grid-template-areas: "primary" "context" "inspector" !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell > .workbench-primary, html body #mainApp:not(.auth-locked) .project-workbench-shell > .workbench-context, html body #mainApp:not(.auth-locked) .project-workbench-shell > .workbench-inspector { width: auto !important; min-width: 0 !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell.inputs-shell > .workspace-primary { grid-area: primary !important; grid-column: 1 !important; } html body #mainApp:not(.auth-locked) .project-workbench-shell.inputs-shell > .workspace-rail { grid-area: inspector !important; grid-column: 1 !important; } } /* Final ownership for the plain-language shot editor. */ #mainApp:not(.auth-locked) .prompt-policy-editor { display: grid !important; gap: 14px !important; width: 100% !important; min-width: 0 !important; padding: 16px !important; border: 1px solid var(--product-line) !important; border-radius: 10px !important; background: #fff !important; overflow: hidden !important; } #mainApp:not(.auth-locked) .prompt-structure-head { display: block !important; min-width: 0 !important; padding: 0 0 11px !important; border-bottom: 1px solid var(--product-line) !important; } #mainApp:not(.auth-locked) .prompt-structure-head h3 { margin: 0 !important; color: var(--product-ink) !important; font-size: 18px !important; line-height: 1.35 !important; } #mainApp:not(.auth-locked) .prompt-structure-head p { max-width: 68ch !important; margin: 4px 0 0 !important; color: var(--product-muted) !important; font-size: 12px !important; line-height: 1.55 !important; } #mainApp:not(.auth-locked) .prompt-natural-description { display: grid !important; gap: 7px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; } #mainApp:not(.auth-locked) .prompt-natural-description > span, #mainApp:not(.auth-locked) .prompt-quick-adjustments > span { color: var(--product-ink) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1.4 !important; } #mainApp:not(.auth-locked) .prompt-natural-description textarea { display: block !important; width: 100% !important; min-width: 0 !important; min-height: 104px !important; margin: 0 !important; padding: 11px 12px !important; border: 1px solid var(--product-line-strong) !important; border-radius: var(--product-control-radius) !important; background: #fff !important; color: var(--product-ink) !important; font-size: 13px !important; font-weight: 500 !important; line-height: 1.65 !important; } #mainApp:not(.auth-locked) .prompt-quick-adjustments { display: grid !important; gap: 7px !important; width: 100% !important; min-width: 0 !important; margin: 0 !important; } #mainApp:not(.auth-locked) .prompt-quick-adjustments > div { display: flex !important; flex-wrap: wrap !important; gap: 7px !important; } #mainApp:not(.auth-locked) .prompt-quick-adjustments .btn { min-height: 34px !important; padding: 0 11px !important; border-color: var(--product-line-strong) !important; background: #fff !important; color: var(--product-copy) !important; font-size: 12px !important; } #mainApp:not(.auth-locked) .prompt-quick-adjustments .btn:hover, #mainApp:not(.auth-locked) .prompt-quick-adjustments .btn:focus-visible { border-color: #8fc5b8 !important; background: var(--product-accent-soft) !important; color: var(--product-accent) !important; } #mainApp:not(.auth-locked) .prompt-policy-editor > .workbench-actions { margin: 0 !important; padding: 0 !important; } @media (max-width: 820px) { #mainApp:not(.auth-locked) .steps { display: block !important; min-height: 44px !important; padding: 4px 0 10px !important; } #mainApp:not(.auth-locked) .step { display: none !important; } #mainApp:not(.auth-locked) .step.active { display: flex !important; width: 100% !important; min-height: 32px !important; } #mainApp:not(.auth-locked) .step.active::after { display: none !important; } #mainApp:not(.auth-locked) .model-permission-row { grid-template-columns: 20px minmax(0, 1fr) !important; gap: 9px 10px !important; } #mainApp:not(.auth-locked) .model-permission-state { grid-column: 2 !important; text-align: left !important; } #mainApp:not(.auth-locked) .prompt-policy-editor { padding: 14px !important; } #mainApp:not(.auth-locked) .prompt-quick-adjustments .btn { flex: 1 1 calc(50% - 7px) !important; } }