/* AI OFM Stack · shared workspace identity. Task logic lives in the existing renderers. */
@font-face{font-family:Manrope;src:url('/welcome-assets/manrope.ttf') format('truetype');font-weight:400 800;font-display:swap}
:root{
  color-scheme:dark;
  --bg:#101113;--paper:#17191c;--panel:#17191c;--panel-2:#22252a;
  --side:#17191c;--field:#111316;--raised:#22252a;
  --ink:#f3f4f6;--text:#f3f4f6;--muted:#b6bbc3;
  --line:#34383f;--line-2:#454a53;--sidebar-divider:#34383f;
  --accent:#e5f52b;--highlight:#e5f52b;--accent-2:#f0fc69;
  --accent-soft:rgba(229,245,43,.10);--on-accent:#202207;
  --ok:#70d4a1;--warn:#f4c269;--err:#ff8793;
  --radius:14px;--radius-sm:8px;
  font-family:Manrope,sans-serif;
}
body{background:var(--bg);color:var(--ink);font-family:Manrope,sans-serif;-webkit-font-smoothing:antialiased}
button,input,textarea,select{font-family:inherit}
h1,h2,h3{letter-spacing:-.025em}
::selection{background:var(--accent);color:var(--on-accent)}
input,textarea{caret-color:var(--accent)}
input::placeholder,textarea::placeholder{color:#a4aab4;opacity:1}
:where(a,button,input,textarea,select,summary):focus-visible{outline:2px solid var(--accent);outline-offset:3px}
:where(input[type=checkbox],input[type=radio],input[type=range],progress){accent-color:var(--accent)}
:where(.sidebar,.models,.results,.ai-model-list){scrollbar-color:#555b65 var(--paper);scrollbar-width:thin}
.brand>span,.brand-wordmark{font-weight:700}
.brand b,.brand-wordmark>span{font-weight:400;color:var(--accent)}
.brand img{width:32px;height:36px;object-fit:contain}
.primary,.lime{background:var(--accent);border-color:transparent;color:var(--on-accent);font-weight:700}
.primary:hover,.lime:hover{background:var(--accent-2);color:var(--on-accent)}
.secondary{background:var(--raised);border-color:var(--line);color:var(--ink)}
.secondary:hover{background:#2d3137;color:var(--ink)}
.primary:disabled,.secondary:disabled{cursor:not-allowed;opacity:.45}
.text-button{color:var(--accent)}
:where(dialog,.auth-card){background:var(--paper);color:var(--ink);border-color:var(--line)}
:where(dialog)::backdrop{background:#000b}
/* Desktop shell: quiet navigation; the work and its media carry the composition. */
.sidebar{width:238px;padding:24px 15px 16px;border-right:1px solid var(--line);background:var(--side);color:var(--muted)}
.sidebar>.brand{padding:0 10px 22px;gap:12px;margin-bottom:16px}
.brand .brand-wordmark{font-size:18px;font-weight:700;letter-spacing:-.03em}
.brand-label{gap:7px}.version{color:var(--muted);border-color:var(--line);font-weight:400}
.main-nav button,.main-nav a{color:var(--muted);min-height:40px;font-size:12px;border-radius:8px}
.main-nav svg{color:inherit;width:17px;height:17px}
.studio-nav button.active,.main-nav button.active{background:var(--accent);color:var(--on-accent);font-weight:700}
.main-nav button.active svg{color:var(--on-accent)}
.main-nav button:hover:not(.active),.main-nav a:hover{background:var(--raised);color:var(--ink)}
.studio-nav-group h2{color:var(--muted);font-size:11px;font-weight:500;letter-spacing:0;text-transform:none}
.sidebar-bottom{border-color:var(--line)}
.sidebar-bottom>button{color:var(--muted)}
.sidebar-avatar,.sidebar-plan{background:var(--raised);color:var(--ink);border-color:var(--line)}
.app-shell{margin-left:238px}
.topbar{height:68px;padding:0 30px;background:var(--bg);border-color:var(--line)}
.breadcrumb{font-size:12px}.breadcrumb span{color:var(--muted)}
.app-shell>main{padding:28px 30px 40px;max-width:1700px}
.panel>.heading h1{font-size:28px;letter-spacing:-.03em;font-weight:600}
.panel>.heading{margin-bottom:24px;padding-bottom:0;border-bottom:0}
.panel .eyebrow{display:none}
.studio-card,.job-card,.update-card,.inspector,.extract-settings,.ai-models,.ai-compose,.ai-output{background:var(--paper);border-color:var(--line);box-shadow:none}
.stats>div{background:transparent;border-color:var(--line)}
.stats strong{color:var(--ink);font-variant-numeric:tabular-nums}
.overview-actions{gap:14px;margin-top:22px}
.overview-actions button{padding:20px;min-height:112px}
.overview-actions button svg{color:var(--ink)}
.overview-actions button strong{font-size:15px}
.overview-actions button:hover{background:var(--raised);border-color:var(--accent)}
.overview-status{gap:20px}
.overview-status .studio-card{padding:22px}
/* One real workflow entry, using the existing navigation actions. Artwork is illustrative. */
.stack-intro{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(180px,1fr);gap:24px;align-items:center;overflow:hidden;background:var(--paper);border-radius:16px;padding:30px 32px;min-height:230px}
.stack-intro h2{font-size:32px;line-height:1.15;font-weight:600;max-width:19ch;letter-spacing:-.03em}
.stack-intro p{font-size:13px;line-height:1.7;color:var(--muted);margin-top:12px;max-width:50ch}
.stack-intro-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.stack-intro-art{height:192px;display:flex;gap:10px;align-items:center;position:relative}
.stack-intro-art span{display:block;flex:1;height:160px;border-radius:12px;background-image:url('/welcome-assets/characters.webp');background-size:300% auto;background-position:0 22%;background-repeat:no-repeat;background-color:var(--bg)}
.stack-intro-art span:nth-child(2){height:192px;background-position-x:50%}
.stack-intro-art span:nth-child(3){background-position-x:100%}
.stack-intro-art small{position:absolute;bottom:-22px;right:0;font-size:10px;color:var(--muted)}
/* Keep operational selections separate from status colors and media pixels. */
.segmented{background:var(--paper);border-color:var(--line)}
.segmented button{color:var(--muted)}
.segmented button.active,.seg button.on{background:var(--raised);color:var(--accent);box-shadow:none}
.media-card,.ai-result,.character-card{background:var(--paper);border-color:var(--line);box-shadow:none}
.media-cover,.ai-output-media,.inspector-preview{background:var(--field)}
.media-card.selected{border-color:var(--accent)}
.source-badge,.tool-badge,.ai-model-list button .creation-favorite{background:var(--raised);color:var(--muted);border-color:var(--line)}
#panel-generate .ai-model-list button.active,#panel-generate .ai-model-list .creation-model-variant[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.phone-pair-card,.phone-pilot-screen{background:var(--field);border-color:var(--line)}
#panel-timeline{--timeline-surface:#111316;--timeline-raised:#22252a;--timeline-divider:#34383f}
.tl-row:nth-child(odd){background:#191c20}
.tl-clip{background:#34414e;border-color:#687d91}
.tl-clip.selected{border-color:var(--accent);box-shadow:none}
#tlStage{background:#0b0c0e}
/* Cloud: same sidebar language, wider content lanes and an explicit task heading. */
.cloud-workspace-heading{padding:28px 28px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.cloud-workspace-heading h1{font-size:28px;line-height:1.2;font-weight:600}
.cloud-workspace-heading p{color:var(--muted);font-size:13px;margin:8px 0 0;max-width:65ch}
body:has(#view-generate[hidden]) .cloud-workspace-heading{display:none}
body:has(.cloud-nav) .top{background:var(--bg)}
.cloud-nav .brand{font-size:18px;gap:12px}
.cloud-nav .tabs button.on{background:var(--accent);color:var(--on-accent);border-color:transparent}
.cloud-model-choice.on,.cloud-model-mode[aria-pressed=true]{background:var(--accent-soft);border-color:var(--accent);color:var(--ink)}
.model.on,.model-card.on{border-color:var(--accent)}
.models{background:var(--paper)}
.form-pane{background:var(--bg)}
.results{background:var(--paper)}
.cloud-nav-label{font-size:12px;letter-spacing:0;text-transform:none;font-weight:500}
.cloud-location b{font-weight:500}
.gallery-page,.page{padding:28px}
.gallery-grid{gap:18px}
.gallery-card{background:var(--paper);border-color:var(--line);box-shadow:none;border-radius:14px}
.gallery-thumb{background:var(--field)}
/* Authentication is part of the same product, with unchanged form behavior. */
body:has(.auth-card){background:var(--bg)}
.auth-card{border:1px solid var(--line);border-radius:16px;box-shadow:0 18px 55px #0003}
.auth-card .brand{font-size:22px;gap:12px}
.auth-card .brand b{color:var(--accent);font-weight:400}
.auth-card input,.auth-card select{background:var(--field);color:var(--ink);border-color:var(--line)}
.auth-card input:focus,.auth-card select:focus{outline-color:var(--accent);box-shadow:none}
.auth-provider{background:var(--raised);border-color:var(--line)}
.auth-provider:hover{background:#2d3137;border-color:var(--accent)}
.auth-card .err{color:var(--err)}
@media(min-width:1000px){
 :root{--cloud-sidebar:238px}
 .cloud-nav{background:var(--side);padding:24px 15px}
 .cloud-nav .brand{padding:0 10px 22px}
 .cloud-nav .tabs{gap:6px}
 .cloud-nav .tabs button{min-height:42px;font-size:13px;padding:10px 13px}
 body:has(.cloud-nav) .top{height:68px;padding:0 28px}
 .cloud-location{gap:12px}
 .gen{margin:0 28px 28px;border:1px solid var(--line);border-radius:14px;overflow:hidden;grid-template-columns:230px minmax(0,1fr)}
 .models{top:0;max-height:none}
}
@media(min-width:1430px){
 .gen{grid-template-columns:230px minmax(320px,420px) minmax(0,1fr);height:calc(100dvh - 208px);min-height:440px}
}
@media(max-width:1100px){
 .stack-intro{grid-template-columns:minmax(0,1fr) 200px;padding:26px;gap:18px}
 .stack-intro h2{font-size:28px}
 .stack-intro-art span:first-child{display:none}
 .topbar{padding-inline:22px}.app-shell>main{padding-inline:22px}
}
@media(max-width:999px){
 .cloud-nav .brand{font-size:15px}
 .cloud-nav .brand img{width:26px;height:30px}
 .cloud-workspace-heading{padding:22px 16px}
 .cloud-workspace-heading h1{font-size:24px}
 .cloud-workspace-heading p{font-size:12px}
 .gallery-page,.page{padding:20px 16px}
}
@media(max-width:760px){
 .stack-intro{grid-template-columns:minmax(0,1fr);min-height:0;padding:24px}
 .stack-intro-art{display:none}
 .stack-intro h2{font-size:26px}
 .cloud-workspace-heading{display:block}
 .app-shell>main{padding:22px 16px}
 .topbar{padding-inline:16px}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}
/* Finish the shared chrome, including fixed status bars and transient feedback. */
.activity-bar{left:238px;background:var(--paper);color:var(--muted);padding-inline:30px}
.activity-bar button,.activity-arrow{color:var(--muted)}
.status-dot{background:var(--muted)}.status-dot.running{background:var(--accent)}
.toast{background:var(--raised);color:var(--ink)}
.toast.error,.banner.error{background:#382127;color:var(--err);border-color:#70434b}
.inline-error{color:var(--err)}
.job-icon,.job-card .job-status,.job-progress{background:var(--raised)}
.job-card small{color:var(--muted)}
.job-progress>div{background:var(--accent)}
.gallery-play:hover{background-color:var(--accent-soft)}
a.btn.primary{background:var(--accent);color:var(--on-accent)}
@media(min-width:1430px){.results-head{flex-wrap:wrap}.results-head h2{flex:1;min-width:135px}}
.library-toolbar{flex-wrap:wrap;min-width:0}
.planner-calendar-nav,.planner-tabs{flex-wrap:wrap}
#plannerList{min-width:0}
.version,.activity-bar,.activity-bar button,.sidebar-profile-text small,.sidebar-plan{font-size:11px}
#panel-timeline input[type=range]{accent-color:var(--accent)}