/* Shared document reset; root rem base is 10px at browser default. */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: 62.5%; overflow-y: scroll; scrollbar-gutter: stable; }
@font-face{font-family:"Google Sans";src:url("?r=asset&file=google-sans.woff2") format("woff2");font-weight:400 700;font-display:swap}
/* Trangia brand palette, sampled from the reference site's primary button. */
:root{ --brand-blue-50:#eff6ff;--brand-blue-100:#dbeafe;--brand-blue-200:#bfdbfe;--brand-blue-300:#93c5fd; --brand-blue-400:#60a5fa;--brand-blue-500:#3b82f6;--brand-blue-600:#2167dd;--brand-blue-700:var(--tg-primary-hover);--brand-blue-800:#1e40af;--brand-blue-900:#1e3a8a; --brand-ink:#1e293b;--brand-muted:#52647a;--brand-soft:#63758b;--brand-canvas:#f5faff;--brand-nav:#f8fbff; --brand-line:#dce7f4;--brand-line-strong:#bed1e8;--brand-sky:#e0f2fe;--brand-white:#ffffff; --brand-sun:#fef08a;--brand-shadow:#2167dd0b;--brand-shadow-art:#2167dd26;--brand-overlay:#1e293b66; --brand-activity-glow:#dbeafe;--brand-activity-clear:#dbeafe00; --brand-card-shadow:#2167dd16;--brand-activity-shadow:0 12px 32px #2167dd0a; }
:root{ /* Shared UI sizes: change this scale to update every page. 1rem = 10px at browser default. */ --text-xs:1.25rem;--text-sm:1.4rem;--text-base:1.5rem;--text-md:1.5rem; --text-lg:1.7rem;--text-xl:2rem;--text-2xl:2.6rem;--text-3xl:3rem; --text-display:4.4rem;--text-hero:5.6rem;--text-art:7.2rem; --text-caption:var(--text-xs);--text-control:var(--text-sm);--text-label:var(--text-sm);--text-error:var(--text-sm); --icon-stroke:1.75; --field-gap:var(--space-4);--form-gap:var(--space-4);--label-gap:var(--space-2); --section-gap:var(--space-5);--card-padding:var(--space-6);--card-heading-gap:var(--space-5); --control-padding-x:var(--space-3);--control-padding-y:10px; --font-family:var(--tg-font); --surface:var(--brand-white);--white:var(--brand-white);--success:#287e67;--success-light:#e8f5ee;--warning:#aa7820;--warning-light:#fff6e1;--danger:#bb4e5f;--danger-light:#ffedf0;--art-lime:var(--brand-sun);--art-sky:var(--brand-blue-300);--art-cream:var(--brand-white);--overlay:var(--brand-overlay);--shadow-color:var(--brand-shadow);--shadow-art:var(--brand-shadow-art); --radius-sm:10px;--radius-xl:24px;--radius-pill:999px;--sidebar:248px;--topbar:78px;--space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;--space-7:28px;--space-8:32px;--space-10:40px;--space-12:48px;--shadow:0 4px 20px var(--shadow-color); }
*{box-sizing:border-box}
body{margin:0;background:var(--canvas);color:var(--ink);font:400 var(--text-base)/1.55 var(--font-family)}
button,input,select,textarea{font:inherit}
button,a,input,select,textarea{ -webkit-tap-highlight-color:transparent}
button,a{cursor:pointer}
button{color:inherit}
a{color:var(--primary);text-decoration:none}
button:disabled{opacity:.55;}
button:focus-visible,a:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
input:focus,textarea:focus,select:focus{outline:0;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
[hidden]{display:none!important}
h1,h2,h3,p{margin:0}
h1{font-size:var(--text-3xl);font-weight:600;line-height:1.24;}
h2{font-size:var(--text-lg);font-weight:600;}
h3{font-size:var(--text-md);font-weight:600}
.muted{color:var(--ink-muted)}
.accent{color:var(--primary)}
.eyebrow{display:block;font-weight:600;color:var(--ink-muted);margin-bottom:var(--space-3);}
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-3) var(--space-5);border:1px solid transparent;border-radius:var(--radius-sm);font-size:var(--text-sm);font-weight:600;transition:background .18s,transform .18s;white-space:nowrap;}
.button.primary{background:var(--primary);color:var(--white);box-shadow:var(--shadow)}
.button.primary:hover{background:var(--primary-hover)}
.button.secondary{background:var(--surface);border-color:var(--line-strong);color:var(--ink)}
.button.secondary:hover{background:var(--primary-soft);border-color:var(--primary)}
.button.subtle{background:transparent;color:var(--ink-muted)}
.button.danger{color:var(--danger);background:var(--danger-light)}
.button.wide{width:100%}
.text-button{border:0;background:none;color:var(--primary);font-size:var(--text-sm);font-weight:500}
.tag,.skill-badge{display:inline-flex;align-items:center;gap:var(--space-2);padding:6px var(--space-3);border-radius:var(--radius-pill);background:var(--primary-soft);color:var(--primary);font-size:var(--text-xs);font-weight:500}
.skill-badge{border:1px solid var(--line);background:var(--surface)}
.sidebar{position:fixed;inset:0 auto 0 0;width:var(--sidebar);background:var(--nav);display:flex;flex-direction:column;padding:var(--space-8) var(--space-5);z-index:15;}
.brand{display:flex;align-items:center;gap:var(--space-3);font-size:var(--text-xl);font-weight:600;}
.brand-soft{font-weight:400;}
.brand small{display:block;color:var(--nav-text);margin-top:2px;transform-origin:left;}
.brand-mark{position:relative;display:grid;place-items:center;background:var(--primary);border-radius:var(--radius-sm);width:42px;height:42px;font-size:var(--text-3xl);line-height:1;}
.brand-mark span{position:absolute;right:3px;top:2px;color:var(--art-lime);}
.workspace-label{display:flex;gap:var(--space-3);align-items:center;border:1px solid var(--nav-line);border-radius:var(--radius-sm);padding:var(--space-3) var(--space-2);}
.workspace-label strong{font-size:var(--text-xs);font-weight:500;display:block}
.workspace-label small{font-size:var(--text-xs);color:var(--nav-text)}
.workspace-avatar{width:30px;height:30px;background:var(--nav-active);display:grid;place-items:center;border-radius:var(--radius-xs);font-size:var(--text-xs)}
.workspace-label>span:last-child{color:var(--nav-text);}
.nav-caption{font-weight:500;color:var(--nav-text);margin:0 var(--space-3) var(--space-3);}
.nav-item{display:flex;width:100%;border:0;background:none;color:var(--nav-text);border-radius:var(--radius-sm);text-align:left;}
.nav-item>span{font-size:var(--text-xl);line-height:1;text-align:center;}
.nav-item:hover{background:var(--nav-active);}
.nav-item.active{background:var(--nav-active);}
.nav-item b{background:var(--nav-line);font-size:var(--text-xs);font-weight:400;min-width:21px;text-align:center;padding:1px var(--space-1);border-radius:var(--radius-xs);}
.sidebar-bottom{margin-top:auto}
.agent-status{border:1px solid var(--nav-line);border-radius:var(--radius-sm);padding:var(--space-3);display:flex;gap:var(--space-2);}
.agent-status strong{display:block;font-size:var(--text-xs);font-weight:500}
.agent-status small{color:var(--nav-text);font-size:var(--text-xs)}
.status-dot{width:7px;height:7px;border-radius:var(--radius-circle);background:var(--ink-soft);display:inline-block;flex-shrink:0;margin-top:6px}
.account{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-5);border-top:1px solid var(--nav-line);margin-top:var(--space-3)}
.user-avatar{display:grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-circle);background:var(--hero-bg);color:var(--hero-text);font-weight:600}
.user-avatar.small{width:32px;height:32px;font-size:var(--text-xs)}
.account strong,.account small{display:block;font-size:var(--text-xs);font-weight:400}
.account small{color:var(--nav-text)}
.account button{border:0;background:none;color:var(--nav-text);font-size:var(--text-xl);margin-left:auto}
.main{margin-left:var(--sidebar);min-height:100vh}
.topbar{height:var(--topbar);padding:0 var(--space-10);border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;}
.topbar>div,.topbar-right{display:flex;align-items:center;gap:var(--space-5)}
.breadcrumb{font-size:var(--text-xs);color:var(--ink-muted)}
.breadcrumb span{margin:0 var(--space-3);color:var(--ink-soft)}
.breadcrumb b{font-weight:500;color:var(--ink)}
.storage-chip{font-size:var(--text-xs);color:var(--ink-muted);display:flex;gap:var(--space-2);align-items:center}
.storage-chip i{width:6px;height:6px;border-radius:var(--radius-circle);background:var(--success)}
.topbar-divider{height:20px;width:1px;background:var(--line)}
#menu-toggle{display:none;border:0;background:none;font-size:var(--text-xl)}
.view{padding:var(--space-10);max-width:1600px;margin:auto}
.page-heading{display:flex;justify-content:space-between;align-items:center;gap:var(--space-6);}
.page-heading p{color:var(--ink-muted);margin-top:var(--space-3);}
.overview-grid{display:grid;}
.hero-card{border-radius:var(--radius-lg);position:relative;overflow:hidden;display:flex;color:var(--hero-text);}
.hero-card>div:first-child{z-index:2}
.hero-card h2{line-height:1.18;margin:var(--space-5) 0 var(--space-3);}
.hero-card p{font-size:var(--text-sm);color:var(--hero-text);line-height:1.8}
.hero-card .button{margin-top:var(--space-6)}
.hero-meta{display:flex;gap:var(--space-3);align-items:center;margin-top:var(--space-5);color:var(--hero-text);}
.hero-meta i{height:3px;width:3px;border-radius:var(--radius-circle);background:var(--hero-text)}
.hero-art{position:absolute;width:190px;height:245px;}
.art-card{position:absolute;border-radius:var(--radius-xs);box-shadow:0 18px 25px var(--shadow-art);width:158px;height:220px;overflow:hidden}
.art-card.back{background:var(--art-lime);transform:rotate(-14deg);left:-15px;top:-6px;padding:var(--space-3);}
.art-card.back span{font-size:var(--text-xl);line-height:1.1}
.art-card.back i{position:absolute;bottom:var(--space-5);right:var(--space-3);height:80px;width:80px;border-radius:var(--radius-circle);border:20px solid var(--hero-text)}
.art-card.front{background:var(--primary);transform:rotate(11deg);left:35px;top:var(--space-3);padding:var(--space-3);color:var(--white)}
.art-card.front small{font-size:var(--text-xs);display:block;transform:scale(.6);transform-origin:left;white-space:nowrap}
.art-card.front b{font-size:var(--text-3xl);font-weight:500;line-height:1;display:block;margin-top:var(--space-3);}
.art-card.front b em{font-style:normal;color:var(--art-lime)}
.art-card.front>span{font-size:var(--text-hero);position:absolute;right:0;bottom:25px;color:var(--art-lime);line-height:1}
.art-card footer{position:absolute;bottom:var(--space-3);font-size:var(--text-xs);transform:scale(.6);transform-origin:left;white-space:nowrap}
.art-sticker{position:absolute;bottom:0;left:-22px;background:var(--art-cream);border-radius:var(--radius-circle);width:70px;height:70px;display:grid;place-content:center;text-align:center;font-size:var(--text-xs);color:var(--ink);transform:rotate(-12deg);box-shadow:var(--shadow)}
.workflow-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);}
.workflow-card h3{margin-bottom:var(--space-6)}
.workflow-card ol{list-style:none;padding:0;margin:0 0 var(--space-6)}
.workflow-card li{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-5)}
.workflow-card li b{width:34px;height:34px;background:var(--canvas);border-radius:var(--radius-circle);display:grid;place-items:center;font-size:var(--text-xs);color:var(--primary);font-weight:500}
.workflow-card li strong,.workflow-card li small{display:block;font-size:var(--text-sm)}
.workflow-card li strong{font-weight:500}
.workflow-card li small{font-size:var(--text-xs);color:var(--ink-muted);margin-top:3px}
.stats-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);}
.stat>span{display:flex;align-items:center;justify-content:space-between;color:var(--ink-muted);}
.stat i{font-style:normal;color:var(--primary);font-size:var(--text-lg)}
.stat>strong{display:block;font-weight:500;margin:var(--space-2) 0;}
.stat>small{font-size:var(--text-xs);color:var(--ink-muted)}
.section-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-5)}
.section-heading p{font-size:var(--text-xs);color:var(--ink-muted);margin-top:var(--space-1)}
.recent-jobs{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.recent-row{display:flex;width:100%;align-items:center;text-align:left;padding:var(--space-5) var(--space-6);gap:var(--space-4);border:0;border-bottom:1px solid var(--line);background:var(--surface)}
.recent-row:last-child{border-bottom:0}
.recent-row:hover{background:var(--primary-soft)}
.recent-icon{background:var(--primary-light);width:40px;height:44px;border-radius:var(--radius-sm);display:grid;place-items:center;color:var(--primary);font-size:var(--text-xl)}
.recent-info{flex:1}
.recent-info strong{display:block;font-size:var(--text-sm);font-weight:500}
.recent-info small{color:var(--ink-muted);font-size:var(--text-xs)}
.recent-date{font-size:var(--text-xs);color:var(--ink-muted);min-width:90px;text-align:right}
.empty-state{text-align:center;padding:var(--space-10) var(--space-6)}
.empty-state .empty-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:var(--radius-md);margin:0 auto var(--space-4);font-size:var(--text-2xl);color:var(--primary);background:var(--primary-soft)}
.empty-state strong{display:block;font-size:var(--text-md);font-weight:500}
.empty-state p{font-size:var(--text-sm);color:var(--ink-muted);margin-top:var(--space-2);max-width:440px;margin-left:auto;margin-right:auto}
.empty-state .button{margin-top:var(--space-5)}
.library-callout{display:flex;gap:var(--space-5);padding:var(--space-6);margin-top:var(--space-6);border:1px dashed var(--line-strong);}
.callout-icon{font-size:var(--text-3xl);color:var(--primary)}
.library-callout p{color:var(--ink-muted);margin-top:var(--space-1);}
.library-callout .button{margin-left:auto}
.page-footer{display:flex;justify-content:space-between;max-width:1600px;margin:auto;padding:var(--space-6) var(--space-10);color:var(--ink-soft);font-size:var(--text-xs)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--card-padding);box-shadow:var(--shadow)}
.brief-layout{display:grid;gap:var(--space-6);align-items:start;}
.card-heading{display:flex;flex-wrap:wrap;gap:var(--space-2) var(--space-3);align-items:baseline;}
.section-number{background:var(--primary-soft);color:var(--primary);width:34px;height:34px;display:grid;place-items:center;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:500}
.card-heading p{color:var(--ink-muted);margin-top:0;}
.card-heading>.tag{margin-left:auto}
label{display:block;font-weight:500;margin-bottom:var(--field-gap);}
label em{font-style:normal;color:var(--danger)}
input:not([type=radio]):not([type=checkbox]),select,textarea{display:block;width:100%;padding:var(--control-padding-y) var(--control-padding-x);border:1px solid var(--line-strong);background:var(--surface);color:var(--ink);font-size:var(--text-sm);margin-top:var(--space-2);min-height:44px;transition:border .15s,box-shadow .15s;}
input::placeholder,textarea::placeholder{color:var(--ink-soft);font-weight:400}
textarea{resize:vertical;line-height:1.7}
label .field-note{display:block;margin-top:var(--space-2)}
.field-note{color:var(--ink-muted);font-size:var(--text-xs);font-weight:400;line-height:1.6}
.two-cols{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5)}
.three-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-4)}
.size-grid{display:grid;grid-template-columns:1fr 12px 1fr 72px 110px;gap:var(--space-3);}
.size-grid>span{color:var(--ink-soft);}
.vector-options{border:0;padding:0;margin:0 0 var(--space-5)}
.vector-options legend{font-size:var(--text-sm);font-weight:500;margin-bottom:var(--space-3)}
.choice{display:flex;gap:var(--space-3);padding:var(--space-4);border:1px solid var(--line);border-radius:var(--radius-sm);margin-bottom:var(--space-3);cursor:pointer;}
.choice:has(input:checked){background:var(--primary-soft);border-color:var(--primary)}
.choice input{accent-color:var(--primary);width:16px;height:16px;margin:0}
.choice strong,.choice small{display:block}
.choice strong{font-size:var(--text-sm);font-weight:500}
.choice small{font-size:var(--text-xs);color:var(--ink-muted);font-weight:400;margin-top:var(--space-1)}
.choice>b{font-size:var(--text-xs);font-weight:400;color:var(--primary);margin-left:auto}
details{border-top:1px solid var(--line);padding-top:var(--space-5)}
summary{cursor:pointer;font-size:var(--text-sm);font-weight:500}
summary span{font-size:var(--text-xs);color:var(--ink-muted);font-weight:400;float:right}
.details-body{margin-top:var(--space-6)}
.upload-zone{position:relative;text-align:center;border:1px dashed var(--line-strong);border-radius:var(--radius-md);cursor:pointer;margin:0;}
.upload-zone>span{display:block;color:var(--primary);font-size:var(--text-2xl)}
.upload-zone strong{display:block;font-size:var(--text-sm);font-weight:500;margin:var(--space-1)}
.upload-zone small{font-size:var(--text-xs);color:var(--ink-muted);font-weight:400}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;margin:0;cursor:pointer;min-height:100%;padding:0}
.upload-zone:focus-within{outline:2px solid var(--primary)}
.asset-list{list-style:none;padding:0;margin:var(--space-3) 0 0}
.asset-list li{display:flex;align-items:center;border:1px solid var(--line);margin-top:var(--space-2);border-radius:var(--radius-sm);font-size:var(--text-xs);overflow-wrap:anywhere;}
.asset-list button{margin-left:auto;border:0;background:none;color:var(--danger);font-size:var(--text-lg)}
.asset-list small{color:var(--ink-muted)}
.brief-summary{position:sticky;}
.summary-card{background:var(--surface);border-radius:var(--radius-md);padding:var(--space-6);}
.summary-art{background:var(--primary-soft);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;flex-direction:column;color:var(--primary);margin-bottom:var(--space-5);gap:var(--space-2);}
.summary-art>span{font-size:var(--text-art);line-height:.8;margin-bottom:var(--space-2);color:var(--art-sky)}
.summary-art strong{font-weight:500;}
.summary-art small{font-size:var(--text-xs);color:var(--ink-muted)}
.summary-card>p{font-size:var(--text-xs);color:var(--ink-muted);margin-top:var(--space-2)}
.summary-divider{height:1px;background:var(--line);margin:var(--space-5) 0}
.deliverables{padding:0;list-style:none;font-size:var(--text-sm)}
.deliverables li{display:flex;gap:var(--space-3);margin-bottom:var(--space-3);color:var(--primary)}
.deliverables li span{color:var(--ink-muted)}
.mini-note{display:flex;gap:var(--space-3);font-size:var(--text-xs);color:var(--ink-muted);padding:var(--space-4);background:var(--canvas);border-radius:var(--radius-sm);margin:var(--space-5) 0;}
.summary-card>.field-note{text-align:center;display:block;margin-top:var(--space-2)}
.search-field{margin:0;flex:1;}
.search-field input{margin:0!important;padding-left:var(--space-10)!important}
.jobs-layout{display:grid;}
.job-row{display:block;}
.job-row strong{display:block;font-weight:500;font-size:var(--text-sm);margin:var(--space-2) 0}
.job-row small{color:var(--ink-muted);font-size:var(--text-xs)}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--tg-space-1) var(--tg-space-2);background:var(--canvas);color:var(--ink-muted);}
.badge.review,.badge.queued,.badge.needs_input{background:var(--warning-light);color:var(--warning)}
.badge.running,.badge.checking{background:var(--primary-light);}
.badge.approved{background:var(--success-light);color:var(--success)}
.badge.failed,.badge.revision,.badge.interrupted,.badge.cancel_requested{background:var(--danger-light);color:var(--danger)}
.detail-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-4)}
.detail-header h2{margin:var(--space-3) 0 var(--space-2);overflow-wrap:anywhere;}
.detail-header small{font-size:var(--text-xs);color:var(--ink-muted)}
.progress-message{background:var(--canvas);border-radius:var(--radius-sm);padding:var(--space-4);white-space:pre-wrap;overflow-wrap:anywhere;}
.job-preview{width:100%;max-height:520px;object-fit:contain;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--canvas);margin-bottom:var(--space-5)}
.actions,.button-row{display:flex;gap:var(--space-3);flex-wrap:wrap}
.check-line{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--line);font-size:var(--text-xs)}
.check-line strong{font-weight:500}
.check-line a{margin-left:auto}
.check-line em{color:var(--warning);font-style:normal}
.checks{margin:var(--space-5) 0}
.feedback{border-top:1px solid var(--line);padding-top:var(--space-5);margin-top:var(--space-6)}
.delivery-note{margin:var(--space-4) 0 var(--space-5);font-size:var(--text-xs);color:var(--ink-muted)}
.style-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-6)}
.style-grid>.empty-state{grid-column:1/-1;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-12)}
.style-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden}
.style-card>img{width:100%;height:220px;object-fit:contain;background:var(--canvas);border-bottom:1px solid var(--line)}
.style-info{padding:var(--space-5)}
.style-info h3{margin:var(--space-3) 0 var(--space-2)}
.style-info p{font-size:var(--text-sm);color:var(--ink-muted);white-space:pre-wrap}
.swatches{display:flex;gap:var(--space-2);margin:var(--space-4) 0}
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-6);align-items:start}
.settings-grid .card>p{margin:var(--space-2) 0 var(--space-5);font-size:var(--text-sm)}
.settings-grid form{margin-top:var(--space-5)}
.worker-row{display:flex;justify-content:space-between;padding:var(--space-4) 0;border-bottom:1px solid var(--line);font-size:var(--text-sm)}
.worker-row small{color:var(--ink-muted)}
dialog{width:520px;max-width:calc(100vw - 32px);border:1px solid var(--line);padding:var(--space-8);color:var(--ink);box-shadow:0 20px 80px var(--shadow-art);}
dialog::backdrop{background:var(--overlay);backdrop-filter:blur(3px)}
dialog h2{font-size:var(--text-xl);margin-bottom:var(--space-3)}
dialog p{font-size:var(--text-sm);color:var(--ink-muted);margin-bottom:var(--space-6)}
.close-dialog{position:absolute;border:0;background:none;font-size:var(--text-2xl);color:var(--ink-muted);}
.toast{position:fixed;bottom:var(--space-6);left:calc(50% + var(--sidebar)/2);transform:translateX(-50%);z-index:50;padding:14px var(--space-6);border-radius:var(--radius-sm);background:var(--nav);color:var(--white);box-shadow:var(--shadow);font-size:var(--text-sm);max-width:85vw}
.toast.error{background:var(--danger)}
.notice{padding:var(--space-4) var(--space-6);font-size:var(--text-sm);border-radius:var(--radius-sm);margin:var(--space-5) 0}
.notice.warning{background:var(--warning-light);color:var(--warning);margin:var(--space-5) var(--space-10) 0}
.notice.danger{background:var(--danger-light);color:var(--danger)}
.notice button{background:none;border:0;color:inherit;text-decoration:underline}
.auth-page{display:grid;place-items:center;min-height:100vh;padding:var(--space-8)}
.auth-shell{display:grid;grid-template-columns:1.08fr 1fr;width:100%;border:1px solid var(--line);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow);background:var(--surface);}
.auth-story{display:flex;flex-direction:column;justify-content:space-between;}
.auth-story .eyebrow{color:var(--art-sky);margin-top:var(--space-10)}
.auth-story h1{font-weight:500;line-height:1.16;}
.auth-story h1 em{font-style:normal;color:var(--art-sky)}
.auth-story p{font-size:var(--text-sm);line-height:1.9;color:var(--nav-text);margin-top:var(--space-5)}
.auth-story>small{color:var(--nav-text);font-size:var(--text-xs);margin-top:var(--space-6)}
.auth-art{height:175px;margin-top:var(--space-8);position:relative;overflow:hidden;border:1px solid var(--nav-line);border-radius:var(--radius-md);padding:var(--space-5)}
.auth-art>span{font-size:var(--text-3xl);line-height:1.1;}
.auth-art>i{position:absolute;width:145px;height:145px;border-radius:var(--radius-circle);right:var(--space-6);top:15px;}
.auth-art>b{position:absolute;right:var(--space-8);top:15px;font-size:var(--text-art);font-weight:400;}
.auth-art>small{position:absolute;bottom:var(--space-4);left:var(--space-5);font-size:var(--text-xs);color:var(--nav-text)}
.auth-form{display:flex;flex-direction:column;justify-content:center;}
.auth-form>.tag{align-self:flex-start}
.auth-form h2{margin:var(--space-5) 0 var(--space-3);}
.auth-form>p{font-size:var(--text-sm);color:var(--ink-muted);}
.auth-form .button{margin-top:var(--space-2)}
.auth-note{padding:var(--space-4);color:var(--ink-muted);background:var(--canvas);border-radius:var(--radius-sm);}
.secure-note{font-size:var(--text-xs);color:var(--ink-soft);text-align:center;margin-top:var(--space-8)}
.setup-card{max-width:720px;width:100%;background:var(--surface);padding:var(--space-10);border-radius:var(--radius-xl);border:1px solid var(--line)}
.brand.dark{color:var(--ink);margin-bottom:var(--space-8)}
.setup-card h1{margin:var(--space-5) 0}
.setup-card p,.setup-card li{font-size:var(--text-base);color:var(--ink-muted);line-height:1.9}
.setup-card ol{padding-left:var(--space-6)}
.setup-card .button{margin-top:var(--space-6)}
@media(min-width:1550px){.hero-art{right:8%;transform:scale(1.13)}.hero-card{min-height:360px}}
@media(max-width:1300px){:root{--sidebar:226px}.view{padding:var(--space-8)}.topbar{padding:0 var(--space-8)}.hero-art{right:2%;transform:scale(.84);transform-origin:right center}.hero-card h2{font-size:var(--text-2xl)}.hero-card p{max-width:260px}.desktop-only{display:none}.workflow-card{padding:var(--space-6)}.stats-grid{gap:var(--space-3)}.stat{padding:var(--space-5)}.brief-layout{grid-template-columns:minmax(0,1fr) 260px}.size-grid{grid-template-columns:1fr 12px 1fr 65px}.size-grid>label:last-child{grid-column:1 / 3}.three-cols{grid-template-columns:1fr 1fr}.jobs-layout{grid-template-columns:230px minmax(0,1fr)}}
@media(max-width:1100px){.overview-grid{grid-template-columns:1fr}.hero-art{right:8%;transform:scale(1)}.hero-card{min-height:320px}.workflow-card{display:none}.brief-layout{grid-template-columns:1fr}.brief-summary{position:static}.summary-art{display:none}.summary-card{margin-bottom:var(--space-6)}.style-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.jobs-layout{grid-template-columns:1fr}#job-list{display:flex;gap:var(--space-3);overflow:auto}#job-list .job-row{min-width:230px;max-width:250px;flex-shrink:0}.library-callout .button{white-space:normal}.auth-form{padding:var(--space-8)}.auth-story{padding:var(--space-8)}}
@media(max-width:800px){:root{--sidebar:0px}.sidebar{width:248px;transform:translateX(-100%);transition:transform .2s;box-shadow:0 0 0 100vmax transparent;pointer-events:none}.sidebar.open{transform:translateX(0);box-shadow:0 0 0 100vmax var(--overlay);pointer-events:auto}#menu-toggle{display:block}.view{padding:var(--space-6)}.topbar{padding:0 var(--space-6);height:66px}.page-heading{align-items:flex-start;flex-wrap:wrap;gap:var(--space-5)}h1{font-size:var(--text-2xl)}.stats-grid{grid-template-columns:1fr 1fr;margin-bottom:var(--space-8)}.settings-grid{grid-template-columns:1fr}.page-footer{padding:var(--space-6);gap:var(--space-5)}.page-footer>span:last-child{display:none}.auth-shell{grid-template-columns:1fr;max-width:550px;min-height:0}.auth-story{display:none}.auth-form{padding:var(--space-10)}.auth-page{padding:var(--space-5)}.auth-form h2{font-size:var(--text-2xl)}.notice.warning{margin:var(--space-5) var(--space-6) 0}.toast{left:50%}}
@media(max-width:520px){.view{padding:var(--space-6) var(--space-4)}.topbar{padding:0 var(--space-4)}.breadcrumb{font-size:var(--text-xs)}.breadcrumb>span{margin:0 var(--space-2)}.topbar-right{gap:var(--space-3)}.storage-chip{display:none}.hero-card{padding:var(--space-6);min-height:340px}.hero-art{right:-10px;top:125px;transform:scale(.63);transform-origin:right center;opacity:.9}.hero-card p{max-width:235px;font-size:var(--text-xs)}.hero-card h2{font-size:var(--text-2xl)}.hero-meta{font-size:var(--text-xs);gap:var(--space-2)}.hero-card .button{position:relative;z-index:3;margin-top:var(--space-6)}.stat{padding:var(--space-4)}.stat>small{font-size:var(--text-xs)}.stat>strong{font-size:var(--text-2xl)}.recent-row{padding:var(--space-4);gap:var(--space-3);flex-wrap:wrap}.recent-date{display:none}.recent-info{min-width:160px}.recent-row>.badge{margin-left:52px}.library-callout{flex-wrap:wrap;padding:var(--space-5)}.library-callout>div{flex:1}.library-callout .button{width:100%}.two-cols,.three-cols{grid-template-columns:1fr;gap:0}.form-card,.card{padding:var(--card-padding)}.size-grid{grid-template-columns:1fr 12px 1fr 60px;gap:var(--space-2)}.size-grid label{font-size:var(--text-xs)}.size-grid>label:last-child{grid-column:1/-1}.size-grid input,.size-grid select{padding-left:var(--space-2);padding-right:var(--space-2)}.choice{padding:var(--space-3)}.choice>b{display:none}summary>span{display:block;float:none;margin-top:var(--space-2)}.brief-summary .button{min-height:46px}.filter-bar{flex-direction:column}.filter-bar select{width:100%}.style-grid{grid-template-columns:1fr}.detail-header{flex-wrap:wrap}.detail-header h2{font-size:var(--text-lg)}.check-line{flex-wrap:wrap}.check-line em{width:100%}.auth-form{padding:var(--space-8) var(--space-6)}.auth-form h2{font-size:var(--text-xl)}.setup-card{padding:var(--space-7)}dialog{padding:var(--space-7)}.toast{min-width:280px;text-align:center}.tag,.skill-badge{font-size:var(--text-xs)}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
/* Print Studio 2 — shared visual tokens and responsive product workspace. */
:root{ --ink:var(--brand-ink);--ink-muted:var(--brand-muted);--ink-soft:var(--brand-soft);--canvas:var(--brand-canvas);--line:var(--brand-line);--line-strong:var(--brand-line-strong);--primary:var(--brand-blue-600);--primary-hover:var(--brand-blue-700);--primary-light:var(--brand-blue-100);--primary-soft:var(--brand-blue-50);--nav:var(--brand-nav);--nav-active:var(--brand-blue-100);--nav-line:var(--brand-line);--nav-text:var(--brand-muted);--hero-bg:var(--brand-sky);--hero-text:var(--brand-ink); --success:#21744f;--success-light:#e9f4ed;--warning:#8a6110;--warning-light:#fff3d7;--danger:#ad354b;--danger-light:#ffebef; --warm:var(--brand-blue-50);--rose:#f0dce0;--mint:#dce8df;--blue:var(--brand-blue-100);--label-ink:#294b37;--poster-ink:#744542;--banner-ink:#264b70;--paper:#fffcf3;--card-shadow:var(--brand-card-shadow); --shadow:0 3px 18px var(--shadow-color);--shadow-hover:0 12px 28px var(--card-shadow);--radius-md:16px;--radius-lg:16px;--topbar:74px; }
html{scroll-behavior:smooth;scroll-padding-top:var(--space-6)}
body{overflow-wrap:break-word}
button,input,textarea,select{max-width:100%}
button{touch-action:manipulation}
button:not(.nav-scrim){min-height:var(--target-size)}
button:disabled{cursor:not-allowed}
.button{min-height:44px}
.text-button{min-height:var(--target-size)}
input[readonly]{background:var(--canvas)}
.skip-link{position:fixed;top:-100px;left:var(--space-5);padding:var(--space-3) var(--space-5);background:var(--primary);color:var(--white);z-index:100;border-radius:var(--radius-sm)}
.skip-link:focus{top:var(--space-3)}
.main:focus{outline:none}
.sidebar{overflow-y:auto;padding-top:var(--space-7);padding-bottom:var(--space-5)}
.sidebar nav{margin-bottom:var(--space-5)}
.workspace-label{margin:var(--space-6) 0}
.nav-item{font-size:var(--text-sm);margin-bottom:var(--space-1);padding:var(--space-3);min-height:44px}
.admin-caption{margin-top:var(--space-6)}
.sidebar-bottom{padding-top:var(--space-4)}
.agent-status{margin-bottom:var(--space-3)}
.agent-status small{display:block;line-height:1.5}
.account>div{min-width:0}
.account strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account button{flex-shrink:0;min-width:32px}
.topbar{background:var(--surface)}
.topbar-create{font-weight:600}
.topbar-right{gap:var(--space-4)}
.view{padding-top:var(--space-8)}
.page-heading{margin-bottom:var(--section-gap)}
.page-heading h1{font-size:clamp(var(--text-2xl),2.2vw,var(--text-3xl));}
.page-heading p{font-size:var(--text-sm);line-height:1.7;max-width:680px}
.eyebrow{font-size:var(--text-xs);}
.nav-scrim{display:none}
.overview-grid{gap:var(--space-5);grid-template-columns:minmax(0,1.75fr) minmax(275px,1fr)}
.hero-card{min-height:320px;padding:var(--space-8);border:1px solid var(--line)}
.hero-card h2{font-size:var(--text-3xl);font-weight:600;}
.hero-card p{max-width:340px}
.hero-tag{font-size:var(--text-xs);font-weight:600;}
.live-spark{font-size:var(--text-md)}
.hero-card .dark-button{border-radius:var(--radius-pill);padding:var(--space-3) var(--space-6)}
.hero-art{right:4%;top:48px;transform:scale(.95)}
.hero-meta{font-size:var(--text-xs)}
.workflow-card{padding:var(--space-6);display:flex;flex-direction:column;justify-content:center}
.workflow-card .eyebrow{font-size:var(--text-xs)}
.workflow-card h3{line-height:1.5}
.workflow-card ol{margin-bottom:var(--space-4)}
.workflow-card li:last-child{margin-bottom:0}
.workflow-card .skill-badge{align-self:flex-start;margin-top:var(--space-5);font-size:var(--text-xs)}
.product-heading{margin-top:var(--space-8);gap:var(--space-4)}
.product-heading p{font-size:var(--text-sm)}
.product-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-4);margin-bottom:var(--space-7)}
.product-card{position:relative;text-align:left;border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-3) var(--space-3) var(--space-5);background:var(--surface);overflow:hidden;transition:transform .2s,box-shadow .2s}
.product-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.product-card strong,.product-card>small{display:block;margin:0 var(--space-2)}
.product-card strong{font-size:var(--text-sm);margin-top:var(--space-4);font-weight:600;padding-right:var(--space-6)}
.product-card>small{font-size:var(--text-xs);color:var(--ink-muted);margin-top:var(--space-1);line-height:1.6}
.product-arrow{font-size:var(--text-md);color:var(--ink-muted);}
.product-art{height:135px;background:var(--warm);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;overflow:hidden}
.product-art i{font-style:normal;box-shadow:0 7px 12px var(--card-shadow);position:relative}
.product-label .product-art{background:var(--mint)}
.product-cardprint .product-art{background:var(--warm)}
.product-poster .product-art{background:var(--rose)}
.product-banner .product-art{background:var(--blue)}
.label-mock{border-radius:var(--radius-circle);width:112px;height:112px;background:var(--paper);color:var(--label-ink);display:flex;align-items:center;justify-content:center;flex-direction:column;font-size:var(--text-xl);font-weight:600;transform:rotate(-10deg);border:8px solid var(--label-ink)}
.label-mock small{font-size:var(--text-xs);font-weight:400;transform:scale(.5);white-space:nowrap;margin-top:var(--space-1)}
.card-mock{height:87px;width:147px;transform:rotate(-9deg);background:var(--hero-text);color:var(--paper);padding:var(--space-3)}
.card-mock b{font-size:var(--text-lg);line-height:1.05;display:block}
.card-mock small{display:block;font-size:var(--text-xs);transform:scale(.55);transform-origin:left;margin-top:var(--space-2);white-space:nowrap;color:var(--art-lime)}
.poster-mock{height:126px;width:94px;transform:rotate(8deg);background:var(--paper);padding:var(--space-2);color:var(--poster-ink)}
.poster-mock>small{font-size:var(--text-xs);transform:scale(.65);display:block;transform-origin:left}
.poster-mock b{display:block;font-size:var(--text-lg);line-height:1;}
.poster-mock em{font-style:normal;font-size:var(--text-3xl);display:block;text-align:right;line-height:1;margin-top:var(--space-2)}
.banner-mock{width:166px;height:98px;padding:var(--space-3);background:var(--banner-ink);color:var(--paper);transform:rotate(-5deg)}
.banner-mock small{display:block;font-size:var(--text-xs);transform:scale(.5);transform-origin:left;white-space:nowrap}
.banner-mock b{display:block;font-size:var(--text-xl);line-height:1.05;}
.banner-mock em{position:absolute;right:var(--space-3);bottom:var(--space-3);font-style:normal;font-size:var(--text-display);line-height:1;color:var(--warm)}
.stats-grid{gap:var(--space-4);margin:var(--space-6) 0 var(--space-8)}
.stat{padding:var(--space-5);box-shadow:none}
.stat>span{font-size:var(--text-sm)}
.stat>strong{font-size:var(--text-2xl);line-height:1.25}
.recent-info{min-width:0}
.recent-info strong{overflow-wrap:anywhere}
.recent-row>span:last-child{margin-left:var(--space-2)}
.library-callout{background:var(--surface);border-style:solid}
.library-callout p{font-size:var(--text-sm);line-height:1.7;max-width:630px}
.brief-steps{display:flex;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--space-2);margin-bottom:var(--space-6);gap:var(--space-2)}
.brief-steps button{flex:1;display:flex;text-align:left;align-items:center;justify-content:flex-start;gap:var(--space-3);background:none;border:0;border-radius:var(--radius-sm);padding:var(--space-3) var(--space-5);font-size:var(--text-sm);font-weight:500;color:var(--ink-muted)}
.brief-steps button.current{background:var(--primary-soft);color:var(--primary)}
.brief-steps b{width:32px;height:32px;border-radius:var(--radius-circle);background:var(--canvas);display:grid;place-items:center;font-size:var(--text-sm);font-weight:500;flex-shrink:0}
.brief-steps .current b{background:var(--primary);color:var(--white)}
.brief-steps .complete b{background:var(--success-light);color:var(--success)}
.brief-steps small{display:block;font-size:var(--text-xs);font-weight:400;color:var(--ink-muted);margin-top:var(--space-1)}
.brief-layout{grid-template-columns:minmax(0,1fr) 295px}
.brief-layout>div{min-width:0}
.form-card{margin-bottom:0;min-height:480px}
.card-heading{margin-bottom:var(--space-6)}
.card-heading p{font-size:var(--text-sm)}
.preset-inline{padding:var(--space-4);background:var(--canvas);border-radius:var(--radius-sm);margin-bottom:var(--space-5)}
.preset-inline label{margin-bottom:0}
.step-footer{display:flex;align-items:center;gap:var(--space-4);padding:var(--space-5) 0}
.step-footer>span{margin-right:auto;color:var(--ink-muted);font-size:var(--text-xs)}
.step-footer #step-back[hidden]+span{margin-right:auto}
.brief-summary{top:var(--space-6)}
.summary-card{border:1px solid var(--line);box-shadow:none}
.summary-art{height:165px}
.summary-art strong{font-size:var(--text-lg);overflow-wrap:anywhere}
.summary-card h3{overflow-wrap:anywhere;font-size:var(--text-lg)}
.summary-card .deliverables{gap:var(--space-3)}
.summary-card .mini-note{margin-bottom:var(--space-5)}
.deliverables li{line-height:1.6}
.mini-note{line-height:1.65}
.choice{align-items:flex-start}
.choice input{margin-top:var(--space-1);flex-shrink:0}
.choice small{line-height:1.6}
.vector-options .choice:has(input[value=mixed]){order:-1}
.upload-zone{border-color:var(--line-strong);padding:var(--space-7);background:var(--primary-soft);transition:background .2s,border .2s}
.upload-zone.dragging{background:var(--primary-light);border:2px dashed var(--primary)}
.upload-zone small{display:block;line-height:1.7}
.upload-zone.compact{padding:var(--space-5);margin-bottom:var(--space-3)}
.asset-list li{background:var(--surface);padding:var(--space-3);gap:var(--space-3)}
.asset-copy{min-width:0;flex:1}
.asset-copy strong,.asset-copy small{display:block;font-size:var(--text-xs);line-height:1.6}
.asset-copy strong{font-weight:500}
.asset-thumb,.file-type{width:42px;height:42px;flex-shrink:0;border:1px solid var(--line);border-radius:var(--radius-sm);object-fit:cover}
.file-type{display:grid;place-items:center;background:var(--canvas);color:var(--primary);font-size:var(--text-xs);font-weight:600}
.asset-list button{flex-shrink:0;}
.asset-saved{color:var(--success)}
.filter-bar{display:flex;gap:var(--space-3);align-items:center;margin-bottom:var(--space-5)}
.filter-bar label{margin:0;flex:1;min-width:0}
.search-field{display:flex;position:relative;align-items:center}
.search-field>span{position:absolute;left:var(--space-4);font-size:var(--text-xl);color:var(--ink-muted);z-index:1}
.search-field input{padding-left:var(--space-10);margin:0}
.filter-bar select{width:auto;max-width:230px;margin:0;min-width:180px}
.jobs-layout{grid-template-columns:250px minmax(0,1fr);align-items:start;gap:var(--space-5)}
#job-list{max-height:calc(100vh - 140px);overflow:auto;position:sticky;top:var(--space-5)}
.job-row{text-align:left;width:100%;border-radius:var(--radius-md);padding:var(--space-5);margin-bottom:var(--space-3);background:var(--surface);border:1px solid var(--line)}
.job-row.selected{border-color:var(--primary);background:var(--primary-soft);box-shadow:inset 3px 0 var(--primary)}
.job-row strong{overflow-wrap:anywhere;line-height:1.5}
.detail-header h2{font-size:var(--text-xl);line-height:1.4}
.progress-message{font-size:var(--text-sm);line-height:1.7;margin:var(--space-5) 0;color:var(--ink-muted)}
.version-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-4)}
.version-toolbar label{font-size:var(--text-xs);color:var(--ink-muted);}
.version-toolbar select{width:auto;max-width:70%;margin:0;font-size:var(--text-xs);min-height:var(--target-size)}
.version-note{padding:var(--space-3) var(--space-4);background:var(--warning-light);color:var(--warning);border-radius:var(--radius-sm);margin-bottom:var(--space-4);font-size:var(--text-xs);line-height:1.6}
.preview-frame{display:block;position:relative;margin-bottom:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--canvas)}
.preview-frame .job-preview{display:block;border:0;border-radius:0;margin:0;min-height:200px;max-height:490px}
.preview-frame>span{text-align:center;padding:var(--space-3);background:var(--surface);border-top:1px solid var(--line);font-size:var(--text-xs);font-weight:500;}
.preview-placeholder{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:240px;background:var(--canvas);border:1px dashed var(--line-strong);border-radius:var(--radius-md);padding:var(--space-6);margin-bottom:var(--space-5);text-align:center}
.preview-placeholder>span{font-size:var(--text-display);color:var(--primary);margin-bottom:var(--space-3)}
.preview-placeholder strong{font-size:var(--text-md);font-weight:500}
.preview-placeholder p{font-size:var(--text-sm);color:var(--ink-muted);margin-top:var(--space-2);max-width:350px}
.quality-details{margin-top:var(--space-5);padding-top:var(--space-5)}
.detail-actions{margin-top:var(--space-5);align-items:center}
.feedback>.button{margin:var(--space-4) 0 var(--space-2)}
.feedback>.field-note{display:block}
.feedback .section-heading{margin-bottom:var(--space-5)}
.feedback .section-heading p{font-size:var(--text-sm);line-height:1.7}
.project-meta{margin-top:var(--space-6)}
.brief-readonly{display:grid;grid-template-columns:110px minmax(0,1fr);gap:var(--space-4);margin:var(--space-5) 0;font-size:var(--text-sm)}
.brief-readonly dt{color:var(--ink-muted)}
.brief-readonly dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}
.reference-downloads{padding:0;list-style:none;margin:var(--space-4) 0}
.reference-downloads li{padding:var(--space-3) 0;border-bottom:1px solid var(--line)}
.reference-downloads a{font-size:var(--text-sm);}
.reference-downloads small,.reference-downloads p{display:block;color:var(--ink-muted);font-size:var(--text-xs);margin-top:var(--space-1)}
.timeline{list-style:none;padding:0;margin:var(--space-6) 0 var(--space-2)}
.timeline li{display:flex;gap:var(--space-4);padding:0 0 var(--space-5);position:relative}
.timeline li:before{content:"";position:absolute;left:5px;top:15px;bottom:0;width:1px;background:var(--line)}
.timeline li:last-child:before{display:none}
.timeline li>span{width:11px;height:11px;flex-shrink:0;background:var(--primary-light);border:2px solid var(--primary);border-radius:var(--radius-circle);margin-top:6px}
.timeline li>div{min-width:0}
.timeline strong{display:block;font-size:var(--text-sm);font-weight:500}
.timeline small{font-size:var(--text-xs);color:var(--ink-muted)}
.timeline p{font-size:var(--text-sm);white-space:pre-wrap;margin-top:var(--space-2)}
.timeline .text-button{display:block;padding:0;font-size:var(--text-xs)}
.plan-current{display:flex;align-items:center;justify-content:space-between;gap:var(--space-6);margin-bottom:var(--space-6)}
.plan-current h2{font-size:var(--text-xl)}
.plan-current p{margin-top:var(--space-2);font-size:var(--text-sm);color:var(--ink-muted)}
.plan-current .eyebrow{font-size:var(--text-xs);margin-bottom:var(--space-2)}
.usage-block{width:300px;max-width:100%}
.usage-block progress{width:100%;height:8px;appearance:none;border:0;border-radius:var(--radius-pill);overflow:hidden;background:var(--line)}
.usage-block progress::-webkit-progress-bar{background:var(--line)}
.usage-block progress::-webkit-progress-value{background:var(--primary)}
.usage-block progress::-moz-progress-bar{background:var(--primary)}
.usage-block small{display:block;font-size:var(--text-xs);color:var(--ink-muted);margin-top:var(--space-2)}
.plan-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
.plan-card{padding:var(--space-6);display:flex;flex-direction:column;box-shadow:none}
.plan-card.current{border-color:var(--primary);background:var(--primary-soft)}
.plan-card .tag{font-size:var(--text-xs)}
.plan-card h2{margin-top:var(--space-5);font-size:var(--text-xl)}
.plan-card p{font-size:var(--text-sm);color:var(--ink-muted);line-height:1.7;margin-top:var(--space-3)}
.plan-card-top{flex:1}
.plan-price{font-size:var(--text-2xl);font-weight:600;margin:var(--space-6) 0;overflow-wrap:anywhere}
.plan-price small{display:block;font-size:var(--text-xs);color:var(--ink-muted);font-weight:400;margin-top:var(--space-1)}
.plan-card .deliverables{margin:0 0 var(--space-5);border-top:1px solid var(--line);padding-top:var(--space-5)}
.plan-card .field-note{font-size:var(--text-xs)}
.service-note{font-size:var(--text-sm);color:var(--ink-muted);margin:var(--space-6) 0}
.account-card{text-align:center;padding:var(--space-8)}
.profile-avatar{width:72px;height:72px;font-size:var(--text-2xl);margin:0 auto var(--space-5)}
.account-card .tag{margin-top:var(--space-3)}
.account-card .mini-note{margin-top:var(--space-6);text-align:left}
.account-card>p{overflow-wrap:anywhere}
.admin-tabs{display:flex;border-bottom:1px solid var(--line);gap:var(--space-6);margin-bottom:var(--space-6);overflow:auto}
.admin-tabs button{border:0;border-bottom:3px solid transparent;background:transparent;padding:var(--space-3) 0;white-space:nowrap;font-size:var(--text-sm);color:var(--ink-muted)}
.admin-tabs button.active{border-bottom-color:var(--primary);color:var(--primary);font-weight:600}
.admin-tabs b{padding:1px 6px;border-radius:var(--radius-pill);background:var(--warning-light);color:var(--warning);font-size:var(--text-xs);margin-left:var(--space-1)}
.admin-tabs button:focus-visible{outline-offset:-3px}
.member-list{border:1px solid var(--line);border-radius:var(--radius-md);overflow:hidden;background:var(--surface)}
.member-row{display:grid;grid-template-columns:36px minmax(160px,1fr) 95px 125px 140px;align-items:center;gap:var(--space-4);padding:var(--space-5);border-bottom:1px solid var(--line)}
.member-row:last-child{border-bottom:0}
.member-copy{min-width:0}
.member-copy strong,.member-copy small{display:block;overflow-wrap:anywhere}
.member-copy strong{font-size:var(--text-sm);font-weight:500}
.member-copy small{font-size:var(--text-xs);color:var(--ink-muted);margin-top:var(--space-1)}
.member-role{font-size:var(--text-xs);color:var(--ink-muted)}
.member-row .badge{justify-self:start;font-size:var(--text-xs)}
.member-row .button{font-size:var(--text-xs);padding:var(--space-2) var(--space-3)}
.queue-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);text-align:left;width:100%;padding:var(--space-4) 0;border:0;border-bottom:1px solid var(--line);background:none;font-size:var(--text-sm)}
.queue-row>span:first-child{min-width:0;overflow-wrap:anywhere}
.queue-row .badge{flex-shrink:0;font-size:var(--text-xs)}
.quiet-state{text-align:center;padding:var(--space-8) 0;color:var(--ink-muted)}
.quiet-state>span{display:block;font-size:var(--text-2xl);color:var(--success);margin-bottom:var(--space-3)}
.quiet-state p{font-size:var(--text-sm)}
dialog{max-height:calc(100dvh - 32px);overflow-y:auto}
dialog input,dialog select{font-size:var(--text-sm)}
dialog .close-dialog{min-width:36px;min-height:36px}
.badge{font-size:var(--text-xs);white-space:normal;line-height:1.4}
.auth-shell{max-width:1160px;min-height:760px}
.auth-story{padding:var(--space-10)}
.auth-story h1{font-size:var(--text-display);}
.auth-story .eyebrow{font-size:var(--text-xs)}
.auth-story .auth-art{margin-top:var(--space-6)}
.auth-form{padding:var(--space-12)}
.auth-form h2{font-size:var(--text-2xl);line-height:1.3}
.auth-form>p{line-height:1.7;margin-bottom:var(--space-6)}
.auth-switch{font-size:var(--text-sm);color:var(--ink-muted);text-align:center;margin-top:var(--space-6)}
.auth-switch a{font-weight:500;}
.auth-note{font-size:var(--text-xs);line-height:1.8;margin-top:var(--space-4)}
.auth-features{display:flex;flex-wrap:wrap;gap:var(--space-3);font-size:var(--text-xs);margin-top:var(--space-5);}
.auth-mobile-brand{display:none}
.registered-state{display:flex;flex-direction:column;align-items:flex-start}
.registered-icon{display:grid;place-items:center;width:64px;height:64px;font-size:var(--text-2xl);border-radius:var(--radius-circle);color:var(--success);background:var(--success-light);margin-bottom:var(--space-6)}
.registered-state p{font-size:var(--text-sm);line-height:1.8;color:var(--ink-muted);margin-bottom:var(--space-5)}
.registered-state .field-note{margin-top:var(--space-4)}
@media(min-width:1700px){.view{max-width:1570px}.hero-art{right:7%;transform:scale(1.08)}.hero-card{min-height:325px}.product-art{height:160px}}
@media(max-width:1380px){.hero-art{right:0;transform:scale(.8);transform-origin:right center}.hero-card p{max-width:275px}.hero-card h2{font-size:var(--text-2xl)}.hero-card{padding:var(--space-6)}.workflow-card{padding:var(--space-5)}.brief-layout{grid-template-columns:minmax(0,1fr) 270px}.brief-steps button{padding:var(--space-3)}.member-row{grid-template-columns:36px minmax(130px,1fr) 90px 110px 120px;gap:var(--space-3)}}
@media(max-width:1150px){.overview-grid{grid-template-columns:minmax(0,1fr)}.workflow-card{display:none}.hero-art{right:6%;transform:scale(1)}.hero-card{padding:var(--space-8)}.hero-card p{max-width:340px}.hero-card h2{font-size:var(--text-3xl)}.brief-layout{grid-template-columns:minmax(0,1fr)}.brief-summary{position:static}.summary-art{display:none}.summary-card{margin-bottom:0}.brief-summary .deliverables{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.summary-card .mini-note{margin:var(--space-4) 0}.jobs-layout{grid-template-columns:minmax(0,1fr)}#job-list{position:static;display:flex;max-height:none;gap:var(--space-3);padding-bottom:var(--space-2)}#job-list .job-row{min-width:230px;max-width:250px;flex-shrink:0;margin-bottom:0}.product-grid{gap:var(--space-3)}.product-art{height:110px}.label-mock{transform:rotate(-10deg) scale(.8)}.card-mock{transform:rotate(-9deg) scale(.8)}.poster-mock{transform:rotate(8deg) scale(.8)}.banner-mock{transform:rotate(-5deg) scale(.8)}.product-card{padding:var(--space-2) var(--space-2) var(--space-4)}.product-card>small{min-height:38px}.product-arrow{display:none}.plan-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.member-row{grid-template-columns:36px minmax(120px,1fr) 120px}.member-role{grid-column:2}.member-row>.badge{grid-column:3;grid-row:1}.member-row>.button{grid-column:3;grid-row:2}.member-row>.user-avatar{grid-row:1/3}.auth-shell{min-height:720px}.auth-form{padding:var(--space-8)}.auth-story{padding:var(--space-8)}}
@media(max-width:800px){.sidebar{width:270px;box-shadow:none;z-index:30}.sidebar.open{box-shadow:none}.nav-scrim{display:block;position:fixed;inset:0;background:var(--overlay);border:0;z-index:25;backdrop-filter:blur(2px)}.sidebar.open .nav-item{min-height:44px}.topbar{height:66px}.page-heading h1{font-size:var(--text-2xl)}.topbar-create{font-size:var(--text-xs)}.product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.product-card>small{font-size:var(--text-xs)}.overview-grid{gap:var(--space-4)}.auth-mobile-brand{display:flex;align-self:flex-start;margin-bottom:var(--space-8)}.auth-story{display:none}.auth-form{padding:var(--space-8)}.auth-shell{min-height:0;max-width:530px}.auth-form h2{font-size:var(--text-2xl)}.auth-form>.tag{font-size:var(--text-xs)}.auth-page{padding:var(--space-4)}.brief-steps small{display:none}.brief-steps button{justify-content:center}.brief-steps b{width:28px;height:28px}.brief-steps{gap:var(--space-1)}.plan-current{flex-wrap:wrap}.usage-block{width:100%}.admin-tabs{gap:var(--space-5)}.view{padding:var(--space-6)}.hero-card p{max-width:320px}.hero-art{right:3%}}
@media(max-width:600px){.product-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.product-art{height:120px}.product-card>small{min-height:0}.product-card{padding:var(--space-2) var(--space-2) var(--space-4)}.product-card strong{font-size:var(--text-sm)}.product-heading{align-items:flex-start}.product-heading .text-button{max-width:130px;text-align:right;font-size:var(--text-xs)}.hero-card{min-height:325px;padding:var(--space-6)}.hero-card h2{font-size:var(--text-2xl)}.hero-card p{max-width:270px;font-size:var(--text-sm)}.hero-tag{font-size:var(--text-xs)}.hero-art{top:132px;right:-8px;transform:scale(.62);transform-origin:right center}.hero-meta{margin-top:var(--space-5);position:relative;z-index:3}.hero-card .button{margin-top:var(--space-5);font-size:var(--text-xs)}.hero-card .dark-button{padding:var(--space-3) var(--space-4)}.stats-grid{gap:var(--space-3)}.stat>span{font-size:var(--text-xs)}.stat{padding:var(--space-4)}.page-heading{margin-bottom:var(--space-6)}.view{padding:var(--space-6) var(--space-4)}.page-heading>.button{width:100%}.topbar-right .topbar-divider{display:none}.breadcrumb{font-size:var(--text-xs)}.breadcrumb>span{margin:0 var(--space-2)}.topbar>div{gap:var(--space-3)}.topbar-create{display:none}.topbar-right .user-avatar{width:30px;height:30px}.brief-steps{padding:var(--space-1)}.brief-steps button{padding:var(--space-3) var(--space-1);gap:var(--space-2);font-size:var(--text-xs)}.brief-steps b{width:24px;height:24px;font-size:var(--text-xs)}.brief-steps button>span{line-height:1.25}.form-card{min-height:0}.card-heading{gap:var(--space-3)}.card-heading h2{font-size:var(--text-md)}.card-heading p{font-size:var(--text-xs)}.brief-summary .deliverables{grid-template-columns:1fr}.summary-card{padding:var(--space-5)}.form-card,.card{padding:var(--card-padding)}.brief-readonly{grid-template-columns:1fr;gap:var(--space-2)}.brief-readonly dd{margin-bottom:var(--space-3)}.version-toolbar{align-items:flex-start;flex-direction:column;gap:var(--space-2)}.version-toolbar select{width:100%;max-width:100%}.detail-header .button{min-height:var(--target-size);font-size:var(--text-xs)}.detail-actions .button,.actions .button{flex:1;white-space:normal;min-width:130px}.detail-header h2{font-size:var(--text-lg)}.preview-placeholder{min-height:215px}.feedback>.button{width:100%}.filter-bar{align-items:stretch;flex-direction:column}.filter-bar select{width:100%;max-width:none}.filter-bar label{width:100%}.plan-grid{grid-template-columns:1fr}.plan-price{font-size:var(--text-2xl)}.member-row{padding:var(--space-4);gap:var(--space-2);grid-template-columns:32px minmax(0,1fr)}.member-row>.user-avatar{width:32px;height:32px;grid-row:1;align-self:start}.member-row>.badge{grid-column:2;grid-row:3;margin-top:var(--space-1)}.member-row>.button{grid-column:2;grid-row:4;margin-top:var(--space-2);justify-self:start;min-width:140px}.member-role{grid-column:2;grid-row:2}.member-copy small{font-size:var(--text-xs)}.admin-tabs{gap:var(--space-4)}.admin-tabs button{font-size:var(--text-sm)}.queue-row{flex-wrap:wrap}.queue-row>span:first-child{width:100%}.auth-form{padding:var(--space-7) var(--space-6)}.auth-mobile-brand{margin-bottom:var(--space-6)}.auth-form h2{font-size:var(--text-xl)}.auth-form>p{font-size:var(--text-sm)}.auth-page{padding:var(--space-3)}.auth-shell{border-radius:var(--radius-lg)}.auth-features{display:none}.auth-form input,.view input,.view textarea,.view select,dialog input,dialog select,dialog textarea{font-size:var(--text-md)}.step-footer{gap:var(--space-3)}.step-footer .button{padding:var(--space-3);font-size:var(--text-xs)}.step-footer>span{font-size:var(--text-xs)}.recent-row .recent-info{min-width:130px}.recent-row>.badge{margin-left:52px}.service-note{font-size:var(--text-xs)}.page-footer{padding:var(--space-6) var(--space-4)}.toast{max-width:calc(100vw - 32px);min-width:0;width:max-content;font-size:var(--text-sm)}.upload-zone{padding:var(--space-5)}.upload-zone strong{font-size:var(--text-sm)}.asset-list button{min-height:var(--target-size)}.style-card>img{height:230px}}
@media(max-width:360px){.hero-art{opacity:.5;right:-12px;transform:scale(.5)}.hero-card p{max-width:235px}.hero-meta{gap:var(--space-2);font-size:var(--text-xs)}.hero-card{padding:var(--space-5)}.brief-steps b{display:none}.product-card strong,.product-card>small{margin-left:var(--space-1);margin-right:var(--space-1)}.product-art{height:105px}.stat{padding:var(--space-3)}.size-grid{grid-template-columns:1fr 10px 1fr 65px}.page-heading h1{font-size:var(--text-xl)}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;scroll-behavior:auto!important;transition:none!important}.product-card:hover{transform:none}}
.workflow-result{padding:var(--space-4);border:1px solid var(--line);background:var(--canvas);border-radius:var(--radius-sm);margin-top:var(--space-5);font-size:var(--text-sm)}
.workflow-result p{font-size:var(--text-xs);margin:var(--space-2) 0;color:var(--ink-muted)}
.workflow-result a{font-size:var(--text-xs)}
.workflow-result.needs-fix{background:var(--danger-light);border-color:var(--danger);color:var(--danger)}
@media(max-width:600px){.hero-art{display:none}.hero-card{min-height:315px}.hero-card p{max-width:none}.hero-meta{flex-wrap:wrap}}
/* Design activity: discrete server states, ornamental motion, shared tokens. */
:root{ --activity-bg:var(--brand-blue-50);--activity-edge:var(--brand-line);--activity-ink:var(--brand-blue-900);--activity-muted:var(--brand-muted); --activity-highlight:var(--brand-blue-500);--activity-highlight-light:var(--brand-blue-200);--activity-blue:var(--brand-blue-400);--activity-track:var(--brand-blue-100); --activity-glow:var(--brand-activity-glow);--activity-glow-clear:var(--brand-activity-clear);--activity-core:var(--brand-blue-50);--activity-core-edge:var(--brand-blue-200); --orbit-size:148px;--orbit-core-size:52px;--orbit-dot-size:7px;--orbit-ring-width:2px; --orbit-duration:12s;--orbit-inner-duration:7s;--orbit-middle-duration:18s;--orbit-pulse-duration:4s; --activity-shadow:var(--brand-activity-shadow); }
.design-activity{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:var(--space-5) 0;border:1px solid var(--activity-edge);border-radius:var(--radius-lg);text-align:center;overflow:hidden;}
.activity-copy{position:relative;min-width:0;}
.activity-copy h3{text-wrap:balance;}
.activity-copy p{color:var(--activity-muted);margin-top:var(--space-2);text-wrap:pretty;}
.activity-steps{align-items:center;justify-content:center;list-style:none;}
.activity-steps li{display:flex;align-items:center;color:var(--activity-muted);white-space:nowrap;}
.activity-steps li>span{display:grid;place-items:center;border:1px solid var(--activity-edge);border-radius:var(--radius-circle);font-weight:500;}
.activity-steps .is-current{font-weight:600;}
.activity-steps .is-current>span{color:var(--white);}
.activity-steps .is-done>span{color:var(--success);background:var(--success-light);border-color:var(--success-light)}
.design-activity.is-compact{--orbit-size:88px;--orbit-core-size:34px;--orbit-dot-size:5px;flex-direction:row;justify-content:flex-start;text-align:left;}
.is-compact .activity-copy{max-width:none}
.is-compact .activity-label{}
.is-compact .activity-steps{justify-content:flex-start;margin-top:var(--space-3);}
@media(max-width:600px){ .design-activity{--orbit-size:124px;--orbit-core-size:44px;min-height:320px;padding:var(--space-6) var(--space-4)} .activity-copy h3{font-size:var(--text-md)} .activity-label{} .activity-steps,.is-compact .activity-steps{gap:var(--space-3);flex-wrap:wrap} .design-activity.is-compact{--orbit-size:64px;--orbit-core-size:28px;padding:var(--space-5) var(--space-4);gap:var(--space-4);align-items:flex-start} .is-compact .activity-label{font-size:var(--text-xs);} .is-compact .activity-copy{flex:1} .is-compact .activity-steps li{white-space:normal} }
/* Light surfaces preserve a clear hierarchy throughout the workspace. */
.sidebar{color:var(--ink);border-right:1px solid var(--line)}
.brand{color:var(--ink)}
.brand-soft{color:var(--primary)}
.brand-mark{color:var(--white)}
.workspace-avatar{color:var(--primary)}
.nav-item:hover{color:var(--primary-hover)}
.nav-item.active{color:var(--primary-hover);font-weight:600}
.nav-item.active>span{color:var(--primary)}
.nav-item.active b{color:var(--primary);background:var(--surface)}
.agent-status{background:var(--surface)}
.button.dark-button{background:var(--primary);color:var(--white)}
.button.dark-button:hover{background:var(--primary-hover)}
.hero-card{background:linear-gradient(120deg,var(--brand-blue-100),var(--brand-sky) 55%,var(--surface));border-color:var(--brand-blue-200)}
.hero-card .hero-meta{color:var(--brand-blue-800)}
.auth-page{background:var(--canvas)}
.auth-story{background:linear-gradient(145deg,var(--brand-blue-100),var(--brand-sky) 55%,var(--surface));color:var(--ink)}
.auth-story .eyebrow,.auth-story h1 em{color:var(--primary)}
.auth-art{background:var(--surface);border-color:var(--brand-blue-200)}
.auth-art>span{color:var(--brand-blue-800)}
.auth-art>i{background:var(--brand-blue-100)}
.auth-art>b{color:var(--primary)}
.auth-features{color:var(--brand-muted)}
.badge.running,.badge.checking{color:var(--primary-hover)}
.art-card.back{color:var(--ink)}
.status-dot.online{background:var(--success)}
/* UI quality baseline: typography, vector icons, shape and interaction. */
:root{--radius-xs:6px;--radius-control:10px;--radius-card:16px;--radius-dialog:24px;--radius-circle:50%;--icon-size:20px;--icon-sm:16px;--icon-lg:24px;--target-size:44px;--line-body:1.65;--line-heading:1.3}
.ui-icon{stroke-width:var(--icon-stroke);display:inline-block;width:var(--icon-size);height:var(--icon-size);flex:0 0 auto;vertical-align:middle;pointer-events:none}
body{line-height:var(--line-body)}
h1,h2,h3{line-height:var(--line-heading)}
.brand small{transform:none;font-size:var(--text-xs)}
.brand-mark span{font-size:var(--text-xs)}
.eyebrow,.activity-label{font-weight:600}
.button,.text-button{gap:var(--space-2);align-items:center;justify-content:center;min-height:var(--target-size);border-radius:var(--radius-control)}
.text-button{display:inline-flex;padding:var(--space-2) var(--space-3)}
.button .ui-icon,.text-button .ui-icon,.tag .ui-icon,.skill-badge .ui-icon,.reference-downloads .ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
.button.primary,.button.secondary,.button.dark-button,.hero-card .dark-button{border-radius:var(--radius-control)}
input:not([type=radio]):not([type=checkbox]),select,textarea{border-radius:var(--radius-control)}
.card,.hero-card,.workflow-card,.recent-jobs,.product-card,.stat,.summary-card,.style-card,.plan-card,.preview-frame,.preview-placeholder,.design-activity,.upload-zone,.account-card{border-radius:var(--radius-card)}
.job-row,.nav-item,.workspace-label,.agent-status{border-radius:var(--radius-control)}
dialog{border-radius:var(--radius-dialog)}
.badge{border-radius:var(--radius-xs)}
.nav-item{gap:var(--space-3);align-items:center}
.nav-item>span{display:inline-flex;align-items:center;justify-content:center;width:var(--icon-size);flex-shrink:0}
.nav-item b{margin-left:auto;flex-shrink:0}
.nav-caption{font-size:var(--text-xs);line-height:1.5}
.stat i{display:inline-flex;align-items:center}
.callout-icon .ui-icon,.empty-icon .ui-icon{width:var(--icon-lg);height:var(--icon-lg)}
.search-field>span{top:0;bottom:0;display:inline-flex;align-items:center}
.upload-zone>span .ui-icon{width:var(--icon-lg);height:var(--icon-lg)}
.deliverables li,.auth-features>span{display:flex;align-items:flex-start;gap:var(--space-2)}
.deliverables li>.ui-icon,.auth-features .ui-icon{width:var(--icon-sm);height:var(--icon-sm);margin-top:var(--space-1)}
.summary-art>span .ui-icon{width:48px;height:48px}
.recent-row>span:last-child .ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
.product-arrow{display:inline-flex;align-items:center;justify-content:center}
.product-arrow .ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
.close-dialog,#logout{display:inline-flex;align-items:center;justify-content:center;width:var(--target-size);height:var(--target-size);padding:0;border-radius:var(--radius-control)}
.close-dialog{top:var(--space-3);right:var(--space-3)}
.close-dialog:hover,#logout:hover{background:var(--primary-light);color:var(--primary-hover)}
#menu-toggle{width:var(--target-size);height:var(--target-size);padding:var(--space-3);border-radius:var(--radius-control)}
.asset-list button{display:inline-flex;align-items:center;justify-content:center;min-width:var(--target-size);min-height:var(--target-size);border-radius:var(--radius-control)}
.preview-placeholder>span{display:inline-flex}
.preview-placeholder>span .ui-icon{width:36px;height:36px}
.activity-steps li>span .ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
.preview-frame>span{display:flex;align-items:center;justify-content:center;gap:var(--space-2)}
.preview-frame>span .ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
.library-callout{align-items:center;border-radius:var(--radius-card)}
.reference-downloads a{display:inline-flex;align-items:center;gap:var(--space-2);min-height:var(--target-size);overflow-wrap:anywhere}
.job-detail .button-row{align-items:center}
.job-detail .detail-header>div{min-width:0}
.job-detail .detail-header h2{font-size:var(--text-xl);line-height:1.4}
.version-toolbar label{margin:0}
.button:focus-visible,.text-button:focus-visible,.nav-item:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
@media(max-width:800px){#menu-toggle{display:inline-flex;align-items:center;justify-content:center}}
@media(max-width:600px){ .page-heading>.button{width:100%} .detail-header{gap:var(--space-4);flex-wrap:wrap} .library-callout{align-items:flex-start;flex-wrap:wrap;gap:var(--space-3)} .library-callout .button{margin-left:0} .job-detail .button-row{row-gap:var(--space-2)} .version-toolbar{align-items:flex-start;gap:var(--space-2)} }
.auth-switch a{display:inline-flex;align-items:center;min-height:var(--target-size);padding:0 var(--space-2);border-radius:var(--radius-control)}
@media(max-width:600px){input:not([type=radio]):not([type=checkbox]),.auth-form input:not([type=radio]):not([type=checkbox]),.view input:not([type=radio]):not([type=checkbox]),select,textarea{font-size:var(--text-md);min-width:0}}
.hero-tag{display:inline-flex;align-items:center;gap:var(--space-2)}
.live-spark{display:inline-flex;align-items:center}
.live-spark .ui-icon,.mini-note>.ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
.workspace-label>span:last-child{margin-left:0}
.product-arrow{position:absolute;top:var(--space-4);right:var(--space-4);bottom:auto;width:28px;height:28px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-control)}
@media(max-width:600px){.topbar-create .button-label{display:none}.topbar-create{width:var(--target-size);height:var(--target-size);padding:0}.topbar>div:first-child{min-width:0}.breadcrumb{min-width:0}.product-arrow{top:var(--space-3);right:var(--space-3)}}
/* Readable controls and shared interactions, 2026-10-06. */
:root{ --control-height:44px;--control-popup-max:320px;--control-popup-shadow:0 12px 36px var(--brand-shadow-art);--motion-control:160ms; }
body{font-size:var(--text-base)}
label{font-size:var(--text-label);line-height:1.55}
input:not([type=radio]):not([type=checkbox]):not([type=file]),select,textarea,.auth-form input,.view input,.view textarea,.view select,dialog input,dialog select,dialog textarea{font-size:var(--text-control);line-height:1.5;min-height:var(--control-height)}
.button,.step-footer .button,.brief-summary .button,.member-row .button,.hero-card .button,.hero-card .dark-button{font-size:var(--text-control)}
.text-button,.nav-item,.admin-tabs button{font-size:var(--text-sm)}
.field-note,.nav-caption,.account strong,.account small,.agent-status strong,.agent-status small,.tag,.badge,.skill-badge,.step-footer>span,.eyebrow{font-size:var(--text-caption)}
.select-control{position:relative;display:block;width:100%;min-width:0;margin-top:var(--space-2);font-size:var(--text-control)}
.select-control>.ui-native-select{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;min-height:0!important;padding:0!important;margin:0!important;opacity:0!important;pointer-events:none!important;border:0!important;z-index:0}
.select-trigger{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:var(--control-height);margin:0;padding:var(--control-padding-y) var(--control-padding-x);border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);font-family:var(--font-family);font-size:var(--text-control);font-weight:400;line-height:1.5;text-align:left;transition:border-color var(--motion-control),box-shadow var(--motion-control),background var(--motion-control)}
.select-trigger:hover:not(:disabled){border-color:var(--primary);background:var(--primary-soft)}
.select-trigger:focus-visible,.select-control.is-open .select-trigger{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}
.select-trigger:disabled{background:var(--canvas);cursor:not-allowed;opacity:.65}
.select-value{display:block;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}
.select-arrow{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;color:var(--ink-muted);transition:transform var(--motion-control)}
.select-arrow svg{width:100%;height:100%}
.select-popup{position:fixed;inset:auto;z-index:70;box-sizing:border-box;max-width:calc(100vw - 24px);max-height:var(--control-popup-max);margin:0;padding:var(--space-2);border:1px solid var(--line-strong);border-radius:var(--radius-control);background:var(--surface);color:var(--ink);box-shadow:var(--control-popup-shadow);overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--line-strong) transparent;animation:select-reveal var(--motion-control) ease-out}
.select-popup::backdrop{background:transparent}
.select-option{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);width:100%;min-height:var(--target-size);padding:10px var(--space-3);border:0;border-radius:var(--radius-xs);background:transparent;color:var(--ink);font-family:var(--font-family);font-size:var(--text-control);font-weight:400;text-align:left;line-height:1.5;white-space:normal;overflow-wrap:anywhere}
.select-option>span:first-child{min-width:0;flex:1}
.select-option.is-active,.select-option:hover:not([aria-disabled=true]){background:var(--primary-soft);color:var(--primary-hover)}
.select-option.is-selected{font-weight:500;color:var(--primary-hover)}
.select-option[aria-disabled=true]{color:var(--ink-soft);opacity:.65;cursor:not-allowed}
.select-option-check{display:flex;align-items:center;justify-content:center;width:18px;height:18px;flex-shrink:0;visibility:hidden;color:var(--primary)}
.select-option-check svg{width:100%;height:100%}
.select-option.is-selected .select-option-check{visibility:visible}
.select-group,.select-empty{padding:var(--space-2) var(--space-3);font-size:var(--text-caption);color:var(--ink-muted);line-height:1.6}
.select-group{font-weight:600}
.filter-bar>.select-control{width:230px;max-width:100%;margin:0;flex:0 1 230px}
.version-toolbar>.select-control{width:auto;max-width:70%;min-width:210px;margin:0}
.size-grid .select-trigger{gap:var(--space-1);padding-left:var(--space-2);padding-right:var(--space-2)}
.size-grid .select-arrow{width:14px;height:14px}
.field-error{display:block;margin-top:var(--space-2);font-size:var(--text-error);font-weight:400;line-height:1.55;color:var(--danger);overflow-wrap:anywhere}
input[aria-invalid=true],textarea[aria-invalid=true],.select-trigger[aria-invalid=true]{border-color:var(--danger)!important;background:var(--danger-light)}
input[aria-invalid=true]:focus,textarea[aria-invalid=true]:focus,.select-trigger[aria-invalid=true]:focus-visible{box-shadow:0 0 0 3px var(--danger-light)}
.confirm-dialog{width:480px;max-width:calc(100vw - 32px);padding:var(--space-8);border-radius:var(--radius-dialog)}
.confirm-symbol{display:flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:var(--radius-control);background:var(--primary-light);color:var(--primary);margin-bottom:var(--space-5)}
.confirm-symbol svg{width:24px;height:24px}
.confirm-dialog.is-danger .confirm-symbol{background:var(--danger-light);color:var(--danger)}
.confirm-dialog h2{padding-right:0;line-height:1.4;font-size:var(--text-xl);margin-bottom:var(--space-3)}
.confirm-dialog>p{font-size:var(--text-sm);line-height:1.75;margin-bottom:var(--space-6)}
.confirm-actions{display:flex;justify-content:flex-end;gap:var(--space-3);flex-wrap:wrap}
.confirm-actions .button{white-space:normal;text-align:center;flex:1;min-width:150px}
.confirm-dialog[open]{animation:confirm-reveal 180ms ease-out}
@keyframes select-reveal{from{opacity:0;transform:translateY(-3px)}to{opacity:1;transform:translateY(0)}}
@keyframes confirm-reveal{from{opacity:0;transform:translateY(6px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@media(max-width:800px){.brief-steps button{font-size:var(--text-sm)}}
@media(max-width:600px){ .filter-bar>.select-control{width:100%;max-width:none;flex:auto}.version-toolbar>.select-control{width:100%;max-width:100%;min-width:0} .brief-steps button{font-size:var(--text-error);gap:var(--space-1)}.brief-steps b{width:24px;height:24px;flex-shrink:0} .step-footer .button{font-size:var(--text-control)}.member-row .button{font-size:var(--text-control)} .auth-form input,.view input,.view textarea,.view select,dialog input,dialog textarea,dialog select{font-size:var(--text-control)} .select-popup{max-height:min(var(--control-popup-max),50dvh)}.confirm-dialog{padding:var(--space-6)}.confirm-actions{flex-direction:column-reverse}.confirm-actions .button{width:100%;min-width:0} }
@media(prefers-reduced-motion:reduce){.select-trigger,.select-arrow{transition:none}.select-popup,.confirm-dialog[open]{animation:none}}
.detail-header .button{font-size:var(--text-control)}
@media(max-width:600px){.detail-actions{display:flex;flex-direction:column;align-items:stretch}.detail-actions .button{width:100%;min-width:0;flex:auto;white-space:normal}.detail-actions>.badge{align-self:flex-start}.detail-header .button{font-size:var(--text-control)}}
@media(max-width:600px){.size-grid{grid-template-columns:minmax(0,1fr) 10px minmax(0,1fr) 92px}.size-grid label{min-width:0}.size-grid .select-trigger{padding-left:var(--space-2);padding-right:var(--space-2)}.size-grid .select-value{text-overflow:clip}}
.size-grid{align-items:start}
.size-grid>span{margin-top:var(--space-10)}
/* Narrow phones: two readable fields per row and a separate step caption. */
@media(max-width:380px){ .size-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-2) var(--space-3);align-items:start} .size-grid>span{display:none} .size-grid>label{font-size:var(--text-sm);min-width:0} .size-grid>label:nth-of-type(1){grid-column:1;grid-row:1} .size-grid>label:nth-of-type(2){grid-column:2;grid-row:1} .size-grid>label:nth-of-type(3){grid-column:1;grid-row:2} .size-grid>label:nth-of-type(4){grid-column:2;grid-row:2} .step-footer{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-3)} .step-footer>span{grid-column:1/-1;grid-row:1;justify-self:center;margin:0;white-space:nowrap} .step-footer #step-back{grid-column:1;grid-row:2} .step-footer #step-next{grid-column:2;grid-row:2} .step-footer .button{padding:var(--space-3) var(--space-2)} }
/* Upload previews preserve logos, edges and transparent artwork. */
:root{--upload-thumb-size:72px;--upload-preview-max:880px;--upload-preview-grid:12px}
.asset-list .asset-preview-button{position:relative;display:block;width:var(--upload-thumb-size);height:var(--upload-thumb-size);min-width:var(--upload-thumb-size);padding:0;margin:0;overflow:hidden;border:1px solid var(--line-strong);background:var(--surface);border-radius:var(--radius-control);flex:0 0 auto}
.asset-preview-button .asset-thumb{display:block;width:100%;height:100%;border:0;border-radius:0;object-fit:contain;padding:var(--space-1)}
.asset-list .asset-preview-button,.asset-preview-canvas{background-color:var(--surface);background-image:conic-gradient(var(--primary-soft) 25%,var(--surface) 0 50%,var(--primary-soft) 0 75%,var(--surface) 0);background-size:var(--upload-preview-grid) var(--upload-preview-grid)}
.asset-preview-hint{position:absolute;right:2px;bottom:2px;display:grid;place-items:center;width:24px;height:24px;border-radius:var(--radius-xs);background:var(--surface);color:var(--primary)}
.asset-preview-hint .ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
.asset-list .file-type{width:var(--upload-thumb-size);height:var(--upload-thumb-size)}
.asset-copy strong{font-size:var(--text-sm);overflow-wrap:anywhere}
.asset-preview-note{margin-top:var(--space-1)}
.asset-preview-dialog{width:min(var(--upload-preview-max),calc(100vw - 32px));max-width:calc(100vw - 32px);max-height:calc(100dvh - 32px);padding:var(--space-5);overflow:auto}
.asset-preview-header{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-4)}
.asset-preview-header h2{flex:1;min-width:0;overflow-wrap:anywhere;font-size:var(--text-md)}
.asset-preview-header button{flex-shrink:0;padding:var(--space-2)}
.asset-preview-canvas{display:grid;place-items:center;min-height:160px;border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-3)}
.asset-preview-canvas img{display:block;max-width:100%;max-height:65dvh;object-fit:contain}
@media(max-width:380px){:root{--upload-thumb-size:60px}.asset-list li{gap:var(--space-2);padding:var(--space-2)}}
/* CSS-only universe: layered stars, lit planets and pointer depth. */
:root{--cosmic-width:380px;--cosmic-height:244px;--cosmic-planet-size:108px;--cosmic-perspective:680px;--cosmic-loop:24s;--cosmic-slow-loop:38s;--cosmic-near-loop:16s;--cosmic-float-loop:7s;--cosmic-star-size:3px;--cosmic-ice:var(--brand-blue-100);--cosmic-blue:var(--brand-blue-500);--cosmic-deep:var(--brand-blue-900);--cosmic-gold:#ecd4a2;--cosmic-gold-shade:#c79d55;--cosmic-shadow:rgba(30,64,175,.16);--cosmic-x:0px;--cosmic-y:0px;--cosmic-tilt-x:0deg;--cosmic-tilt-y:0deg}
.design-activity{min-height:410px;padding-top:var(--space-6);}
.design-orbit.cosmic-scene{position:relative;flex-shrink:0;width:min(var(--cosmic-width),100%);height:var(--cosmic-height);perspective:var(--cosmic-perspective);pointer-events:none}
.cosmic-aura{position:absolute;border-radius:var(--radius-circle);}
.cosmic-depth{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateX(var(--cosmic-tilt-x)) rotateY(var(--cosmic-tilt-y));transition:transform .25s ease-out}
.cosmic-layer{position:absolute;inset:8% 4%;transform:translate3d(calc(var(--cosmic-x)*var(--cosmic-depth-factor)),calc(var(--cosmic-y)*var(--cosmic-depth-factor)),var(--cosmic-z));transition:transform .3s ease-out}
.cosmic-far{--cosmic-depth-factor:.35;--cosmic-z:-70px;opacity:.4}
.cosmic-mid{--cosmic-depth-factor:.7;--cosmic-z:10px;inset:0 6%;opacity:.7}
.cosmic-near{--cosmic-depth-factor:1.4;--cosmic-z:70px;inset:12% 10%}
.cosmic-starfield{position:absolute;inset:0;transform:rotate(-12deg)}
.cosmic-star{position:absolute;left:var(--star-x);top:var(--star-y);width:var(--cosmic-star-size);height:var(--cosmic-star-size);border-radius:var(--radius-circle);background:var(--cosmic-blue);box-shadow:0 0 6px var(--brand-blue-200)}
.cosmic-far .cosmic-star{width:2px;height:2px}
.cosmic-mid .cosmic-star:nth-child(3n){background:var(--cosmic-gold-shade)}
.cosmic-near .cosmic-star:nth-child(3n){width:7px;height:7px;border-radius:0;clip-path:polygon(50% 0,62% 37%,100% 50%,62% 62%,50% 100%,37% 62%,0 50%,37% 37%)}
.cosmic-near .cosmic-star:nth-child(2n){opacity:0}
.cosmic-orbit-plane{position:absolute;transform-style:preserve-3d;}
.cosmic-path{position:absolute;inset:0;border:1px solid var(--brand-blue-200);border-radius:var(--radius-circle);opacity:.65}
.cosmic-moon-track{position:absolute;inset:0;transform-style:preserve-3d;transform:rotate(35deg)}
.cosmic-moon-track-second{inset:13%;transform:rotate(195deg)}
.cosmic-moon{position:absolute;left:50%;top:-12px;border-radius:var(--radius-circle);transform:rotateX(-57deg);background:radial-gradient(circle at 28% 25%,var(--surface),var(--brand-blue-300) 40%,var(--brand-blue-700) 100%);box-shadow:0 6px 12px var(--cosmic-shadow);}
.cosmic-moon-warm{top:-8px;background:radial-gradient(circle at 25% 25%,var(--surface),var(--cosmic-gold) 35%,var(--cosmic-gold-shade) 100%);}
.cosmic-central{position:absolute;left:50%;top:50%;width:var(--cosmic-planet-size);height:var(--cosmic-planet-size);transform:translate3d(calc(-50% + var(--cosmic-x)*.8),calc(-50% + var(--cosmic-y)*.8),36px);transition:transform .3s ease-out}
.cosmic-planet-float{position:relative;width:100%;height:100%;transform-style:preserve-3d}
.cosmic-planet{position:absolute;z-index:2;}
.cosmic-planet::after{content:"";position:absolute;inset:9%;border-radius:inherit;background:repeating-linear-gradient(-24deg,transparent 0 13px,var(--brand-blue-100) 14px 16px,transparent 17px 28px);opacity:.2;mask-image:radial-gradient(circle,black,transparent 70%)}
.cosmic-ring{position:absolute;border-left-color:var(--cosmic-gold-shade);border-right-color:var(--brand-blue-200);border-radius:var(--radius-circle);}
.cosmic-ring-back{z-index:1}
.cosmic-ring-front{z-index:3;}
.cosmic-glint{position:absolute;left:17%;top:18%;width:14px;height:14px;z-index:4;border-radius:var(--radius-circle);background:var(--surface);opacity:.55;filter:blur(3px)}
.cosmic-distant-planet{position:absolute;transform:translate3d(calc(var(--cosmic-x)*.4),calc(var(--cosmic-y)*.4),-25px);transition:transform .3s ease-out;}
.cosmic-distant-planet>span{display:block;border-radius:var(--radius-circle);}
.cosmic-shooting-star{position:absolute;left:9%;top:24%;width:72px;height:2px;opacity:0;transform:rotate(-25deg);background:linear-gradient(90deg,transparent,var(--brand-blue-300));border-radius:var(--radius-pill)}
.design-activity.is-compact{--cosmic-width:120px;--cosmic-height:96px;--cosmic-planet-size:46px;min-height:0;gap:var(--space-5);padding:var(--space-5)}
.is-compact .cosmic-scene{width:120px;max-width:28%;min-width:72px}
.is-compact .cosmic-ring{border-width:4px}
.is-compact .cosmic-distant-planet,.is-compact .cosmic-near,.is-compact .cosmic-shooting-star{display:none}
.is-compact .cosmic-moon{width:12px;height:12px;top:-5px}
.is-compact .cosmic-motion-toggle{position:absolute;right:var(--space-2);top:var(--space-1);font-size:var(--text-sm);opacity:1}
.is-compact .activity-copy{padding-top:var(--space-7)}
@keyframes cosmic-star-drift{from{transform:rotate(-12deg) translate3d(-8px,6px,0);opacity:.5}50%{opacity:1}to{transform:rotate(12deg) translate3d(8px,-6px,16px);opacity:.5}}
@keyframes cosmic-moon-orbit{from{transform:rotate(35deg)}to{transform:rotate(395deg)}}
@keyframes cosmic-moon-orbit-second{from{transform:rotate(195deg)}to{transform:rotate(-165deg)}}
@keyframes cosmic-planet-float{0%,100%{transform:translateY(-4px) rotate(-3deg)}50%{transform:translateY(6px) rotate(3deg)}}
@keyframes cosmic-shoot{0%,72%,100%{opacity:0;transform:translate3d(-20px,0,0) rotate(-25deg)}76%{opacity:.7}87%{opacity:0;transform:translate3d(170px,-70px,40px) rotate(-25deg)}}
@media(prefers-reduced-motion:no-preference){ .is-moving .cosmic-starfield{animation:cosmic-star-drift var(--cosmic-loop) ease-in-out infinite alternate} .is-moving .cosmic-far .cosmic-starfield{animation-duration:var(--cosmic-slow-loop);animation-delay:-12s} .is-moving .cosmic-near .cosmic-starfield{animation-duration:var(--cosmic-near-loop);animation-delay:-5s} .is-moving .cosmic-moon-track{animation:cosmic-moon-orbit var(--cosmic-loop) linear infinite} .is-moving .cosmic-moon-track-second{animation:cosmic-moon-orbit-second var(--cosmic-slow-loop) linear infinite} .is-moving .cosmic-planet-float,.is-moving .cosmic-distant-planet>span{animation:cosmic-planet-float var(--cosmic-float-loop) ease-in-out infinite} .is-moving .cosmic-distant-planet>span{animation-delay:-3s}.is-moving .cosmic-shooting-star{animation:cosmic-shoot var(--cosmic-near-loop) linear infinite} }
.cosmic-user-paused .cosmic-scene *,.cosmic-offscreen .cosmic-scene *,.cosmic-tab-hidden .cosmic-scene *{animation-play-state:paused!important}
@media(max-width:600px){.design-activity{--cosmic-width:300px;--cosmic-height:200px;--cosmic-planet-size:86px;min-height:360px;padding:var(--space-5) var(--space-3)}.design-activity.is-compact{--cosmic-height:80px;--cosmic-planet-size:38px;padding:var(--space-4);gap:var(--space-3)}.is-compact .cosmic-scene{width:88px;min-width:56px}.is-compact .cosmic-motion-toggle{font-size:var(--text-sm)}.cosmic-orbit-plane{inset:18% 9%}}
@media(prefers-reduced-motion:reduce){.cosmic-depth,.cosmic-layer,.cosmic-central,.cosmic-distant-planet{transition:none;transform:none}.cosmic-central{transform:translate(-50%,-50%)}.cosmic-orbit-plane{transform:rotateX(57deg) rotateZ(-24deg)}}
.cosmic-star-0{--star-x:7%;--star-y:13%;}
.cosmic-star-1{--star-x:44%;--star-y:66%;}
.cosmic-star-2{--star-x:81%;--star-y:25%;}
.cosmic-star-3{--star-x:22%;--star-y:78%;}
.cosmic-star-4{--star-x:59%;--star-y:37%;}
.cosmic-star-5{--star-x:0%;--star-y:90%;}
.cosmic-star-6{--star-x:37%;--star-y:49%;}
.cosmic-star-7{--star-x:74%;--star-y:8%;}
.cosmic-star-8{--star-x:15%;--star-y:61%;}
.cosmic-star-9{--star-x:52%;--star-y:20%;}
.cosmic-star-10{--star-x:89%;--star-y:73%;}
.cosmic-star-11{--star-x:30%;--star-y:32%;}
.cosmic-star-12{--star-x:67%;--star-y:85%;}
.cosmic-star-13{--star-x:8%;--star-y:44%;}
.cosmic-star-14{--star-x:45%;--star-y:3%;}
.cosmic-star-15{--star-x:82%;--star-y:56%;}
.cosmic-star-16{--star-x:23%;--star-y:15%;}
.cosmic-star-17{--star-x:60%;--star-y:68%;}
@media(max-width:600px){.design-activity.is-compact{padding-top:calc(var(--target-size) + var(--space-3))}.design-activity.is-compact .activity-copy{padding-top:0}}
/* Detailed universe: hand-built vector materials and restrained status layout. */
:root{--cosmic-width:520px;--cosmic-height:280px;--cosmic-planet-size:144px;--cosmic-pearl:#edf7ff;--cosmic-night:#11295a;--cosmic-gold:#ebd6af;--cosmic-gold-shade:#b69a65;--cosmic-grain-opacity:.11;--cosmic-detail-shadow:rgba(29,78,216,.12);--cosmic-dust-size:2px;--cosmic-step-size:28px;--cosmic-panel-bg:rgba(255,255,255,.82)}
.design-activity{padding:var(--space-7) var(--space-8) var(--space-5);gap:var(--space-3);background:radial-gradient(ellipse at 50% 22%,var(--surface) 5%,var(--brand-blue-50) 76%);box-shadow:0 12px 36px var(--brand-shadow)}
.design-activity::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse at 24% 18%,var(--brand-blue-100),transparent 40%),radial-gradient(ellipse at 80% 60%,var(--brand-sky),transparent 42%);opacity:.42;pointer-events:none}
.cosmic-aura{inset:14% 14%;background:radial-gradient(ellipse,var(--brand-blue-200),transparent 66%);opacity:.52}
.cosmic-nebula{position:absolute;inset:0;pointer-events:none;border-radius:var(--radius-circle);opacity:.45;transform:rotate(-24deg)}
.cosmic-nebula-a{background:radial-gradient(ellipse at 35% 48%,var(--brand-blue-100) 0,transparent 54%)}
.cosmic-nebula-b{background:radial-gradient(ellipse at 65% 40%,var(--brand-sky),transparent 47%);transform:rotate(30deg)}
.cosmic-planet{background:none;box-shadow:none;inset:-6%;border-radius:var(--radius-circle);filter:drop-shadow(0 14px 18px var(--cosmic-detail-shadow))}
.cosmic-planet::after{display:none}
.cosmic-planet-art{display:block;width:100%;height:100%;overflow:visible}
.cosmic-atmosphere{fill:none;stroke:var(--brand-blue-200);stroke-width:3;opacity:.6}
.cosmic-clouds{fill:var(--cosmic-pearl);opacity:.28}
.cosmic-clouds path:nth-child(2n){fill:var(--brand-blue-900);opacity:.2}
.cosmic-clouds path:nth-child(3n){fill:var(--brand-blue-200);opacity:.7}
.cosmic-ring{inset:17% -49%;border:0;box-shadow:none;transform:rotate(-27deg)}
.cosmic-ring svg{display:block;width:100%;height:100%;overflow:visible}
.cosmic-ring-front{clip-path:polygon(0 48%,100% 48%,100% 100%,0 100%)}
.cosmic-orbit-plane{inset:9% 7%;transform:rotateX(60deg) rotateZ(-23deg)}
.cosmic-path-outer{border-color:var(--brand-blue-200);box-shadow:0 0 0 6px var(--brand-blue-50)}
.cosmic-path-inner{inset:10%;border-color:var(--brand-blue-200);border-style:solid;opacity:.5}
.cosmic-asteroid-belt{position:absolute;inset:5%;border-radius:var(--radius-circle);transform-style:preserve-3d}
.cosmic-dust{position:absolute;left:var(--dust-x);top:var(--dust-y);width:var(--cosmic-dust-size);height:var(--cosmic-dust-size);background:var(--cosmic-gold-shade);border-radius:var(--radius-circle);opacity:.6}
.cosmic-dust:nth-child(3n){background:var(--brand-blue-400);width:3px;height:3px}
.cosmic-constellation{position:absolute;inset:-3%;width:106%;height:106%;overflow:visible;opacity:.5;transform:translate3d(calc(var(--cosmic-x)*.25),calc(var(--cosmic-y)*.25),-50px);transition:transform .4s ease-out}
.cosmic-constellation path{fill:none;stroke:var(--brand-blue-200);stroke-width:.6;stroke-dasharray:2 4}
.cosmic-constellation circle{fill:var(--brand-blue-400)}
.cosmic-distant-planet{right:18%;top:9%}
.cosmic-distant-planet>span{width:44px;height:44px;background:radial-gradient(circle at 26% 22%,var(--surface),var(--brand-blue-100) 25%,var(--brand-blue-300) 62%,var(--brand-blue-600));box-shadow:inset -4px -3px 8px var(--cosmic-shadow),0 8px 16px var(--cosmic-shadow)}
.cosmic-lunar-planet{position:absolute;left:16%;bottom:16%;transform:translate3d(calc(var(--cosmic-x)*1.1),calc(var(--cosmic-y)*1.1),55px);transition:transform .3s ease-out}
.cosmic-lunar-planet>span{display:block;width:28px;height:28px;border-radius:var(--radius-circle);background:radial-gradient(circle at 32% 35%,var(--brand-blue-200) 0 9%,transparent 10%),radial-gradient(circle at 61% 58%,var(--brand-blue-200) 0 8%,transparent 9%),radial-gradient(circle at 26% 25%,var(--surface),var(--cosmic-pearl) 40%,var(--brand-blue-300));box-shadow:inset -3px -3px 6px var(--cosmic-shadow),0 7px 10px var(--cosmic-detail-shadow)}
.cosmic-moon{width:21px;height:21px}
.cosmic-moon-warm{width:14px;height:14px}
.cosmic-starfield .cosmic-star:nth-child(5n){box-shadow:0 0 8px 2px var(--brand-blue-200)}
.cosmic-shooting-star-second{left:68%;top:65%;width:44px}
.cosmic-beacon{position:absolute;left:25%;top:18%;width:5px;height:5px;background:var(--surface);box-shadow:0 0 0 4px var(--brand-blue-100),0 0 16px 4px var(--brand-blue-200);clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);transform:translateZ(50px)}
.activity-copy{max-width:600px;width:100%}
.activity-label{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:6px var(--space-3);border:1px solid var(--line);border-radius:var(--radius-pill);background:var(--cosmic-panel-bg);color:var(--ink-muted);font-size:var(--text-xs);font-weight:500;margin-bottom:var(--space-3)}
.activity-label .ui-icon{width:var(--icon-sm);height:var(--icon-sm);color:var(--primary)}
.activity-copy h3{font-size:var(--text-xl);font-weight:600;color:var(--ink);line-height:1.4}
.activity-copy p{font-size:var(--text-base);max-width:520px;margin:var(--space-3) auto 0;line-height:1.65}
.activity-steps{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-2);width:min(480px,100%);padding:var(--space-2);border:1px solid var(--line);border-radius:var(--radius-card);background:var(--cosmic-panel-bg);margin:var(--space-6) auto 0}
.activity-steps li{justify-content:center;gap:var(--space-2);padding:var(--space-2);border-radius:var(--radius-control);font-size:var(--text-sm);min-width:0}
.activity-steps li>span{flex-shrink:0;width:var(--cosmic-step-size);height:var(--cosmic-step-size);background:var(--surface);border-color:var(--line-strong);font-size:var(--text-xs)}
.activity-steps .is-current{background:var(--primary-soft);color:var(--primary-hover)}
.activity-steps .is-current>span{background:var(--primary);border-color:var(--primary)}
.activity-steps .is-done{color:var(--success)}
.cosmic-motion-toggle{display:inline-flex;gap:var(--space-2);min-height:var(--target-size);font-size:var(--text-sm);color:var(--ink-muted);padding:var(--space-2) var(--space-3)}
.cosmic-motion-toggle .ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
.cosmic-motion-toggle:hover{background:var(--surface);color:var(--primary)}
.is-compact .cosmic-planet{inset:-6%}
.is-compact .cosmic-constellation,.is-compact .cosmic-lunar-planet,.is-compact .cosmic-asteroid-belt,.is-compact .cosmic-nebula,.is-compact .cosmic-beacon{display:none}
.is-compact .activity-label{border:0;padding:0;background:none}
.is-compact .activity-copy h3{font-size:var(--text-md)}
.is-compact .activity-copy p{margin:var(--space-2) 0 0;font-size:var(--text-sm)}
.is-compact .activity-steps{display:flex;width:auto;padding:0;border:0;background:none;gap:var(--space-3);margin:var(--space-3) 0 0}
.is-compact .activity-steps li{padding:0;font-size:var(--text-xs);background:none}
.is-compact .activity-steps li>span{width:24px;height:24px}
@media(prefers-reduced-motion:no-preference){.is-moving .cosmic-asteroid-belt{animation:cosmic-moon-orbit 62s linear infinite}.is-moving .cosmic-shooting-star-second{animation-delay:-8s}.is-moving .cosmic-lunar-planet>span{animation:cosmic-planet-float 11s ease-in-out infinite}}
@media(max-width:600px){ .design-activity{--cosmic-width:360px;--cosmic-height:220px;--cosmic-planet-size:110px;padding:var(--space-5) var(--space-3);gap:var(--space-4)} .activity-copy h3{font-size:var(--text-xl)}.activity-copy p{font-size:var(--text-sm)} .activity-steps{gap:var(--space-1);padding:var(--space-1);margin-top:var(--space-5)} .activity-steps li{flex-direction:column;gap:var(--space-2);padding:var(--space-3) var(--space-1);font-size:var(--text-sm)} .is-compact .activity-steps li{flex-direction:row;padding:0}.is-compact .activity-label{font-size:var(--text-xs)} .cosmic-distant-planet>span{width:32px;height:32px}.cosmic-lunar-planet>span{width:20px;height:20px} }
@media(prefers-reduced-motion:reduce){.cosmic-constellation,.cosmic-lunar-planet{transition:none;transform:none}}
.cosmic-dust-0{--dust-x:98.00%;--dust-y:50.00%;}
.cosmic-dust-1{--dust-x:91.57%;--dust-y:74.00%;}
.cosmic-dust-2{--dust-x:74.00%;--dust-y:91.57%;}
.cosmic-dust-3{--dust-x:50.00%;--dust-y:98.00%;}
.cosmic-dust-4{--dust-x:26.00%;--dust-y:91.57%;}
.cosmic-dust-5{--dust-x:8.43%;--dust-y:74.00%;}
.cosmic-dust-6{--dust-x:2.00%;--dust-y:50.00%;}
.cosmic-dust-7{--dust-x:8.43%;--dust-y:26.00%;}
.cosmic-dust-8{--dust-x:26.00%;--dust-y:8.43%;}
.cosmic-dust-9{--dust-x:50.00%;--dust-y:2.00%;}
.cosmic-dust-10{--dust-x:74.00%;--dust-y:8.43%;}
.cosmic-dust-11{--dust-x:91.57%;--dust-y:26.00%;}
/* Moons face the camera while their parent follows the tilted orbit plane. */
.cosmic-moon-blue{transform:rotateZ(-12deg) rotateX(-60deg)}
.cosmic-moon-warm{transform:rotateZ(-172deg) rotateX(-60deg)}
@keyframes cosmic-moon-face{from{transform:rotateZ(-12deg) rotateX(-60deg)}to{transform:rotateZ(-372deg) rotateX(-60deg)}}
@keyframes cosmic-moon-face-second{from{transform:rotateZ(-172deg) rotateX(-60deg)}to{transform:rotateZ(188deg) rotateX(-60deg)}}
@keyframes cosmic-nebula-breathe{from{transform:rotate(-24deg) scale(.97);opacity:.35}to{transform:rotate(-14deg) scale(1.04);opacity:.5}}
@keyframes cosmic-star-shimmer{0%,100%{opacity:.4}50%{opacity:1}}
@media(prefers-reduced-motion:no-preference){ .is-moving .cosmic-moon-blue{animation:cosmic-moon-face var(--cosmic-loop) linear infinite} .is-moving .cosmic-moon-warm{animation:cosmic-moon-face-second var(--cosmic-slow-loop) linear infinite} .is-moving .cosmic-nebula-a{animation:cosmic-nebula-breathe 22s ease-in-out infinite alternate} .is-moving .cosmic-star:nth-child(4n){animation:cosmic-star-shimmer 6s ease-in-out infinite} .is-moving .cosmic-star:nth-child(8n){animation-delay:-3s} }
.cosmic-user-paused .cosmic-nebula,.cosmic-offscreen .cosmic-nebula,.cosmic-tab-hidden .cosmic-nebula{animation-play-state:paused!important}
/* Draft delivery: customer actions stay separate from print approval. */
.delivery-requirements{margin:var(--space-5) 0;padding:var(--space-5);border:1px solid var(--line-strong);border-radius:var(--radius-card);background:var(--primary-soft);color:var(--ink)}
.delivery-requirements.is-draft{background:var(--warning-light);border-color:var(--warning)}
.requirements-heading{display:flex;align-items:flex-start;gap:var(--space-3)}
.requirements-heading>span{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:36px;height:36px;border-radius:var(--radius-control);background:var(--surface);color:var(--primary)}
.is-draft .requirements-heading>span{color:var(--warning)}
.requirements-heading h3{font-size:var(--text-md);line-height:1.5}
.requirements-heading p,.requirements-fallback{margin-top:var(--space-2);font-size:var(--text-sm);line-height:1.75;color:var(--ink-muted)}
.requirements-list{margin:var(--space-4) 0;padding-left:var(--space-6);font-size:var(--text-sm);line-height:1.75}
.requirements-list li{padding-left:var(--space-1);margin-bottom:var(--space-2);white-space:pre-line;overflow-wrap:anywhere}
.requirements-list li::marker{color:var(--primary);font-weight:600}
.is-draft .requirements-list li::marker{color:var(--warning)}
.delivery-requirements>.button{margin-top:var(--space-3);max-width:100%;white-space:normal}
@media(max-width:600px){.delivery-requirements{padding:var(--space-4)}.requirements-heading{gap:var(--space-2)}.requirements-heading>span{width:30px;height:30px}.delivery-requirements>.button{width:100%}}
/* Draft download names remain readable at narrow widths. */
.actions .button{max-width:100%;min-width:0}
.actions .draft-file-label{min-width:0;white-space:normal;overflow-wrap:anywhere}
/* Full-width review workspace; uses the shared typography and palette. */
:root{--review-list-width:200px;--review-inspector-width:340px}
#view-jobs{max-width:none;padding:var(--space-6)}
#view-jobs .jobs-layout{grid-template-columns:var(--review-list-width) minmax(0,1fr);}
#job-detail{min-width:0}
.job-detail{padding:var(--space-6)}
.design-workspace{display:grid;grid-template-columns:minmax(0,1fr) var(--review-inspector-width);gap:var(--space-6);margin-top:var(--space-5);align-items:start}
.design-stage,.design-inspector{min-width:0}
.design-stage{top:var(--space-5);}
.design-stage .preview-frame{background:var(--canvas);}
.design-stage .job-preview{object-fit:contain;}
.design-stage .preview-placeholder{min-height:360px}
.design-stage .version-toolbar{margin-top:var(--space-4)}
.design-stage .actions{margin-top:var(--space-4)}
.design-inspector{padding-left:var(--space-6);}
.inspector-heading p{color:var(--ink-muted);}
.design-inspector .progress-message{margin:var(--space-4) 0}
.design-inspector .workflow-result{margin:var(--space-4) 0;}
.design-inspector .detail-actions{margin:var(--space-4) 0}
.design-inspector .detail-actions .button{flex:1;}
.design-inspector .check-line{flex-wrap:wrap}
.design-inspector .check-line strong{width:100%}
.design-inspector .check-line a{margin-left:0}
.design-inspector .brief-readonly{grid-template-columns:1fr;gap:var(--space-2)}
.design-inspector .brief-readonly dd{margin-bottom:var(--space-3);overflow-wrap:anywhere}
.design-inspector .reference-downloads a,.design-inspector .timeline p{overflow-wrap:anywhere}
.design-inspector .feedback .upload-zone{padding:var(--space-4)}
.design-inspector .feedback>.button{width:100%}
.workspace-expand{margin-left:auto;white-space:nowrap}
body.workspace-expanded{overflow:hidden}
#view-jobs.is-expanded{position:fixed;inset:0;z-index:90;overflow:auto;background:var(--canvas);margin:0;width:100%;max-width:none}
#view-jobs.is-expanded>.page-heading,#view-jobs.is-expanded>.filter-bar,#view-jobs.is-expanded #job-list{display:none}
#view-jobs.is-expanded .jobs-layout{grid-template-columns:minmax(0,1fr)}
@media(min-width:1240px) and (max-width:1550px){:root{--review-list-width:180px;--review-inspector-width:300px}.design-workspace{gap:var(--space-4)}.design-inspector{padding-left:var(--space-4)}}
@media(max-width:1239px){.design-workspace{grid-template-columns:minmax(0,1fr)}.design-stage{position:static}.design-inspector{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:var(--space-5)}#view-jobs.is-expanded .design-workspace{grid-template-columns:minmax(0,1fr) 320px}#view-jobs.is-expanded .design-inspector{border-top:0;border-left:1px solid var(--line);padding-top:0;padding-left:var(--space-5)}}
@media(max-width:800px){#view-jobs{padding:var(--space-4)}#view-jobs .jobs-layout{grid-template-columns:minmax(0,1fr)}#view-jobs.is-expanded .design-workspace{grid-template-columns:minmax(0,1fr)}#view-jobs.is-expanded .design-inspector{border-left:0;border-top:1px solid var(--line);padding-left:0;padding-top:var(--space-5)}.job-detail{padding:var(--space-4)}.detail-header{flex-wrap:wrap}.workspace-expand{margin-left:0}.design-stage .preview-frame,.design-stage .preview-placeholder{min-height:240px}.design-stage .job-preview{max-height:65vh}.design-stage .version-toolbar select{width:100%}}
/* Three independent, aligned review cards. Typography belongs to the web only. */
:root{--inspector-body:var(--text-base);--inspector-small:var(--text-caption);--inspector-heading:var(--text-lg);--review-list-width:220px;--review-inspector-width:360px;--review-body:var(--text-base);--review-small:var(--text-caption);--review-heading:var(--text-lg);--review-title:var(--text-xl);--review-card-padding:var(--tg-space-5)}
#view-jobs .jobs-layout{align-items:stretch;gap:var(--space-5)}
#view-jobs #job-list,.design-stage,.design-inspector{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-md);padding:var(--review-card-padding);box-shadow:var(--shadow);min-width:0}
#view-jobs #job-list{align-self:stretch}
.jobs-list-heading{display:flex;justify-content:space-between;gap:var(--space-2);align-items:center;margin-bottom:var(--space-4)}
.jobs-list-heading h3{font-size:var(--review-heading);font-weight:600}
.jobs-list-heading span{font-size:var(--review-small);color:var(--ink-muted);white-space:nowrap}
#view-jobs .job-row{border-radius:var(--radius-sm);}
#view-jobs .job-row:last-child{margin-bottom:0}
#view-jobs .job-row strong{font-size:var(--review-body);line-height:1.5;font-weight:600}
#view-jobs .job-row small,#view-jobs .badge{font-size:var(--review-small);line-height:1.5}
#view-jobs .job-detail{padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;height:100%}
#view-jobs .design-workspace{margin-top:0;align-items:stretch;gap:var(--space-5);height:100%;min-height:calc(100vh - 290px)}
.design-stage{position:static}
.design-stage .detail-header{align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5)}
.design-stage .detail-header>div{flex:1;min-width:0}
.design-stage .detail-header h2{font-size:var(--review-title);line-height:1.35;font-weight:600;margin:var(--space-3) 0 var(--space-2)}
.design-stage .detail-header small{font-size:var(--review-small);line-height:1.6}
.design-stage .version-toolbar{margin:var(--space-5) 0 var(--space-4);font-size:var(--review-body)}
.design-stage #progress-sync{font-size:var(--review-small);line-height:1.6}
.design-stage .preview-frame{min-height:0}
.design-stage .job-preview{max-height:72vh}
.design-inspector{--review-body:var(--inspector-body);--review-small:var(--inspector-small);--review-heading:var(--inspector-heading);border-left:1px solid var(--line);padding:var(--review-card-padding);font-size:var(--review-body);line-height:1.6}
.inspector-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:var(--space-3);align-items:center;margin-bottom:var(--space-5)}
.inspector-heading h3{grid-column:1;grid-row:1;font-size:var(--review-heading);line-height:1.4;font-weight:600}
.inspector-heading p{grid-column:1/-1;grid-row:2;margin-top:var(--space-2);font-size:var(--review-small);line-height:1.6}
.inspector-heading .workspace-expand{grid-column:2;grid-row:1;margin:0;padding:var(--space-2) var(--space-3);font-size:var(--review-small)}
.design-inspector p,.design-inspector label,.design-inspector textarea,.design-inspector .progress-message,.design-inspector summary,.design-inspector .workflow-result strong,.design-inspector .feedback h3{font-size:var(--review-body);line-height:1.6}
.design-inspector small,.design-inspector .field-note,.design-inspector summary>span,.design-inspector .workflow-result a,.design-inspector .check-line,.design-inspector .timeline small{font-size:var(--review-small);line-height:1.6}
.design-inspector .workflow-result{padding:var(--space-4);border-radius:var(--radius-sm)}
.design-inspector .workflow-result p{margin-top:var(--space-2)}
.design-inspector .button,.design-stage .button{font-size:var(--review-body);line-height:1.5;min-height:48px;border-radius:var(--radius-control);padding:var(--space-3) var(--space-4)}
.design-inspector .detail-actions{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--space-3);align-items:stretch}
.design-inspector .detail-actions .button{width:100%;min-width:0;min-height:48px;justify-content:center;white-space:normal;margin:0}
.design-inspector .button .ui-icon{flex-shrink:0}
.design-inspector textarea{min-height:144px;border-radius:var(--radius-control);padding:var(--space-3)}
.design-inspector .feedback{padding-top:var(--space-5);margin-top:var(--space-5)}
.design-inspector .upload-zone strong{font-size:var(--review-body);line-height:1.5}
.design-inspector .upload-zone small{font-size:var(--review-small)}
#view-jobs.is-expanded .job-detail{min-height:0}
@media(min-width:1240px) and (max-width:1550px){:root{--review-list-width:200px;--review-inspector-width:320px;--review-card-padding:var(--tg-space-4)}}
@media(max-width:1239px){#view-jobs .design-workspace{grid-template-columns:minmax(0,1fr);height:auto;min-height:0}#view-jobs .design-inspector{border:1px solid var(--line);padding:var(--review-card-padding)}#view-jobs.is-expanded .design-workspace{grid-template-columns:minmax(0,1fr) var(--review-inspector-width)}}
@media(max-width:800px){:root{--review-card-padding:var(--tg-space-4)}#view-jobs .jobs-layout{gap:var(--space-4)}#view-jobs .design-workspace,#view-jobs.is-expanded .design-workspace{grid-template-columns:minmax(0,1fr);gap:var(--space-4)}#view-jobs.is-expanded .design-inspector{border:1px solid var(--line);padding:var(--review-card-padding)}.design-stage .detail-header{flex-wrap:wrap}.design-stage .detail-header h2{font-size:var(--review-title)}.inspector-heading{column-gap:var(--space-2)}}
#view-jobs .jobs-layout #job-list{display:block}
/* Review-first brief helper and compact project navigation. */
#view-jobs .jobs-layout #job-list{align-self:start;height:auto;max-height:calc(100vh - 160px);overflow:auto;position:sticky;top:var(--space-5)}
#view-jobs .job-row{padding:var(--space-3);margin-bottom:var(--space-2)}
#view-jobs .job-row strong{margin:var(--space-2) 0 var(--space-1)}
#view-jobs .job-row small{display:block;line-height:1.6}
.brief-assistant{margin-bottom:var(--space-6);padding:var(--space-6)}
.assistant-intro{display:flex;align-items:flex-start;gap:var(--space-4);margin-bottom:var(--space-5)}
.assistant-mark{width:44px;height:44px;display:grid;place-items:center;flex-shrink:0;background:var(--primary-light);color:var(--primary);border-radius:var(--radius-sm)}
.assistant-intro h2{font-size:var(--review-title);line-height:1.4}
.assistant-intro p{font-size:var(--review-body);line-height:1.6;color:var(--ink-muted);margin-top:var(--space-2)}
.brief-assistant label,.brief-assistant input,.brief-assistant textarea,.brief-assistant .button{font-size:var(--review-body);line-height:1.6}
.brief-assistant .field-note{font-size:var(--review-small)}
.assistant-toolbar{display:flex;flex-wrap:wrap;gap:var(--space-3);align-items:center;margin-top:var(--space-4)}
.assistant-upload{position:relative;margin:0;cursor:pointer}
.assistant-upload input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.assistant-status{margin-top:var(--space-4);font-size:var(--review-body);color:var(--ink-muted);overflow-wrap:anywhere}
.assistant-status:empty{display:none}
#assistant-result{border-top:1px solid var(--line);margin-top:var(--space-5);padding-top:var(--space-5)}
.assistant-result-heading{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3)}
.assistant-result-heading h3,.assistant-notes h3{font-size:var(--review-heading)}
.assistant-summary{font-size:var(--review-body);line-height:1.7;margin:var(--space-4) 0;white-space:pre-wrap;overflow-wrap:anywhere}
.assistant-notes{background:var(--canvas);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--space-4);margin:var(--space-3) 0}
.assistant-notes li{font-size:var(--review-body);line-height:1.7;overflow-wrap:anywhere}
.assistant-notes ul{margin:var(--space-2) 0 0;padding-left:var(--space-5)}
.assistant-proposal-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--space-4);margin:var(--space-5) 0}
.assistant-proposal-fields label:has(textarea){grid-column:1/-1}
.assistant-more{margin-bottom:var(--space-5)}
@media(max-width:800px){#view-jobs .jobs-layout #job-list{position:static;max-height:260px}.brief-assistant{padding:var(--space-4)}.assistant-intro{gap:var(--space-3)}.assistant-intro h2{font-size:var(--review-heading)}.assistant-proposal-fields{grid-template-columns:minmax(0,1fr)}.assistant-toolbar .button{width:100%;justify-content:center}.assistant-result-heading{align-items:flex-start;flex-direction:column}}
/* Desktop navigation width tokens and accessible resize edge. */
:root{--sidebar-compact:76px;--sidebar-min:200px;--sidebar-max:360px;--sidebar-collapse-at:160px;--sidebar-grip:10px}
.sidebar .brand-mark,.sidebar .workspace-avatar,.sidebar .nav-item>span:first-child{flex-shrink:0}
.sidebar .brand>span:last-child,.sidebar .workspace-label>span:last-child{min-width:0}
.sidebar .nav-item .nav-label{width:auto;min-width:0;flex:1;font-size:inherit;line-height:1.5;}
.sidebar-resizer{position:fixed;top:0;bottom:0;left:calc(var(--sidebar) - var(--sidebar-grip)/2);width:var(--sidebar-grip);z-index:31;cursor:col-resize;touch-action:none}
.sidebar-resizer::after{content:"";position:absolute;inset:var(--space-4) auto var(--space-4) 50%;width:2px;border-radius:var(--radius-pill);background:transparent;transition:background .15s}
.sidebar-resizer:hover::after,.sidebar-resizer:focus-visible::after,.sidebar-resizing .sidebar-resizer::after{background:var(--primary)}
.sidebar-resizer:focus-visible{outline:2px solid var(--primary);outline-offset:-2px}
.sidebar-resizing,.sidebar-resizing *{cursor:col-resize!important;user-select:none!important}
.sidebar.is-collapsed{padding:var(--space-7) var(--space-3) var(--space-5)}
.sidebar.is-collapsed .brand{justify-content:center}
.sidebar.is-collapsed .brand>span:last-child,.sidebar.is-collapsed .workspace-label>span:last-child,.sidebar.is-collapsed .nav-label,.sidebar.is-collapsed .nav-item b,.sidebar.is-collapsed .nav-caption,.sidebar.is-collapsed .agent-status>div,.sidebar.is-collapsed .account>div{display:none}
.sidebar.is-collapsed .workspace-label{justify-content:center;padding:var(--space-2);margin:var(--space-6) 0}
.sidebar.is-collapsed .nav-item{padding:var(--space-3);gap:0;}
.sidebar.is-collapsed .agent-status{justify-content:center;padding:var(--space-3)}
.sidebar.is-collapsed .status-dot{margin-top:0}
.sidebar.is-collapsed .account{flex-direction:column;gap:var(--space-2)}
.sidebar.is-collapsed .account button{margin-left:0}
.sidebar.is-collapsed .brand-mark{width:42px}
@media(max-width:800px){.sidebar-resizer{display:none}.main{margin-left:0}.sidebar{max-width:calc(100vw - var(--space-8))}}
/* Job stages use real status; animation only marks a status change. */
:root{--progress-marker:32px;--progress-font:var(--text-sm);--progress-caption-font:var(--text-caption);--progress-duration:650ms}
.design-progress{padding:var(--space-4);margin-bottom:var(--space-5);border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--canvas)}
.design-progress ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));list-style:none;margin:0;padding:0;gap:var(--space-2)}
.progress-step{position:relative;display:flex;flex-direction:column;align-items:center;gap:var(--space-2);color:var(--ink-muted);text-align:center;min-width:0;font-size:var(--progress-font);line-height:1.4}
.progress-step:not(:last-child)::after{content:"";position:absolute;top:calc(var(--progress-marker)/2);left:calc(50% + var(--progress-marker)/2 + var(--space-1));width:calc(100% - var(--progress-marker));height:2px;background:var(--line);transition:background var(--progress-duration)}
.step-marker{width:var(--progress-marker);height:var(--progress-marker);display:grid;place-items:center;flex-shrink:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-circle);font-weight:600;transition:background var(--progress-duration),color var(--progress-duration),box-shadow var(--progress-duration)}
.step-marker .ui-icon{width:16px;height:16px}
.is-done .step-marker{background:var(--primary-light);color:var(--primary);border-color:var(--primary-light)}
.is-done::after{background:var(--primary)!important}
.progress-step.is-current{color:var(--primary);font-weight:600}
.is-current .step-marker{background:var(--primary);border-color:var(--primary);color:var(--white);box-shadow:0 0 0 4px var(--primary-light)}
.progress-caption{font-size:var(--progress-caption-font);color:var(--ink-muted);text-align:center;margin-top:var(--space-3);line-height:1.6}
.design-progress.is-paused .is-current{color:var(--warning)}
.design-progress.is-paused .is-current .step-marker{background:var(--warning-light);border-color:var(--warning-light);color:var(--warning);box-shadow:none}
.step-transition .is-current .step-marker{animation:progress-arrive var(--progress-duration) ease-out both}
.step-transition .is-done::after{animation:progress-connect var(--progress-duration) ease-out both;transform-origin:left}
@keyframes progress-arrive{0%{transform:scale(.8);box-shadow:0 0 0 0 var(--primary-light)}60%{transform:scale(1.12)}100%{transform:scale(1)}}
@keyframes progress-connect{from{transform:scaleX(.2)}to{transform:scaleX(1)}}
@media(max-width:800px){.design-progress{padding:var(--space-3)}.design-progress ol{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:var(--space-4)}.progress-step:nth-child(3)::after{display:none}}
@media(prefers-reduced-motion:reduce){.design-progress *, .design-progress *::after{animation:none!important;transition:none!important}}
/* Compact project identity, specifications and review toolbar. */
:root{--summary-title:var(--text-xl);--summary-body:var(--text-base);--summary-label:var(--text-caption);--summary-select-width:260px}
.design-summary{border:1px solid var(--line);border-radius:var(--radius-md);background:var(--surface);padding:var(--space-5);margin-bottom:var(--space-5)}
.design-stage .design-summary .detail-header{margin:0 0 var(--space-5);align-items:flex-start}
.design-summary .detail-header>div{display:flex;flex-wrap:wrap;align-items:center;gap:var(--space-3)}
.design-stage .design-summary .detail-header h2{order:-1;flex:0 1 auto;margin:0;font-size:var(--summary-title);line-height:1.4;overflow-wrap:anywhere}
.design-summary .detail-header .badge{font-size:var(--summary-label);white-space:nowrap}
.design-specs{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);flex-basis:100%;margin:var(--space-1) 0 0}
.design-specs>div{display:grid;gap:var(--space-1)}
.design-specs dt{font-size:var(--summary-label);color:var(--ink-muted);line-height:1.5}
.design-specs dd{margin:0;font-size:var(--summary-body);font-weight:500;color:var(--ink);line-height:1.5}
.design-summary-tools{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--space-4);border-top:1px solid var(--line);padding-top:var(--space-4)}
.design-stage .design-sync{display:flex;flex:1 1 240px;flex-wrap:wrap;align-items:center;gap:var(--space-2) var(--space-3);margin:0}
.design-stage .design-sync #progress-sync{flex-basis:100%;font-size:var(--summary-label);color:var(--ink-muted);line-height:1.6}
.design-sync [data-refresh-progress]{display:inline-flex;align-items:center;gap:var(--space-2);min-height:44px;border:1px solid var(--line);border-radius:var(--radius-control);padding:var(--space-2) var(--space-3);background:var(--canvas);font-size:var(--summary-body);font-weight:500}
.design-stage .design-summary .version-toolbar{display:grid;flex:0 1 var(--summary-select-width);min-width:0;gap:var(--space-2);margin:0;font-size:var(--summary-body)}
.design-summary .version-toolbar label{font-size:var(--summary-label);color:var(--ink-muted)}
.design-summary .version-toolbar select{width:100%;min-width:0;font-size:var(--summary-body);min-height:44px}
.design-summary .version-toolbar .ui-select{width:100%;min-width:0}
@media(max-width:800px){.design-summary{padding:var(--space-4)}.design-stage .design-summary .detail-header{gap:var(--space-3)}.design-specs{gap:var(--space-3) var(--space-4)}.design-summary-tools{align-items:stretch}.design-stage .design-summary .version-toolbar{flex:1 1 100%}.design-stage .design-sync{flex-basis:100%}.design-summary .detail-header>.button{min-height:44px}}
/* Fill the actual custom-select wrapper, aligned to the toolbar edge. */
.design-summary .version-toolbar>.select-control{width:100%;max-width:100%;min-width:0;margin:0;justify-self:stretch}
.design-summary .version-toolbar select{max-width:100%;margin:0}
.design-stage .design-summary .version-toolbar{margin-left:auto;align-self:end}
@media(max-width:800px){.design-stage .design-summary .version-toolbar{margin-left:0}}
.design-stage .design-summary .version-toolbar{grid-template-columns:minmax(0,1fr);justify-content:stretch}
/* Navigation labels share a left edge; icons and counts keep fixed columns. */
.sidebar .nav-item .nav-label{display:block;text-align:left;justify-content:flex-start;white-space:normal;overflow-wrap:normal}
.sidebar .nav-item{justify-content:flex-start}
.sidebar .nav-item>span:first-child{width:var(--icon-size);justify-content:center}
.sidebar .nav-item b{margin-left:auto;min-width:22px;text-align:center}
.sidebar.is-collapsed .nav-item{justify-content:center}
.sidebar.is-collapsed .nav-item .nav-label{display:none}
/* One full-width content frame for all authenticated workspace pages. */
:root{--workspace-gutter:var(--space-6)}
.main>.view,.main>#view-jobs{width:100%;max-width:none;margin:0;padding:var(--workspace-gutter);min-width:0}
.main>.topbar{padding-left:var(--workspace-gutter);padding-right:var(--workspace-gutter)}
.main>.page-footer{padding-left:var(--workspace-gutter);padding-right:var(--workspace-gutter)}
@media(max-width:800px){:root{--workspace-gutter:var(--space-4)}}
/* Brief supporting copy follows the shared type scale. */
#view-new .assistant-intro p,#view-new .brief-assistant input,#view-new .brief-assistant textarea,#view-new .form-card input,#view-new .form-card textarea,#view-new .form-card select,#view-new .select-trigger,#view-new .card-heading p,#view-new .brief-summary .deliverables li{font-size:var(--text-sm);line-height:1.6}
#view-new .brief-assistant .field-note,#view-new .form-card .field-note{font-size:var(--text-xs);line-height:1.6}
/* Retain centered native modal positioning after the universal margin reset. */
dialog{margin:auto}
/* Shared form rhythm. Grid gap replaces the child labels' bottom margins. */
.two-cols,.three-cols{column-gap:var(--form-gap);row-gap:var(--field-gap);margin-bottom:var(--field-gap)}
.two-cols>label,.three-cols>label{margin-bottom:0;min-width:0}
.two-cols:last-child,.three-cols:last-child{margin-bottom:0}
@media(max-width:800px){:root{--card-padding:var(--space-4);--card-heading-gap:var(--space-4)}}
.imposition-delete .ui-icon{width:var(--icon-sm);height:var(--icon-sm)}
/* Shared disclosure arrow: identical shape, size and motion across views. */
:root body svg.ui-icon.ui-chevron{box-sizing:border-box;width:16px!important;height:16px!important;flex:0 0 16px;display:inline-block;vertical-align:middle;stroke-width:1.92;pointer-events:none;transform-origin:50% 50%;transition:transform .18s ease}
svg.ui-chevron{transform:rotate(0deg)}
[aria-expanded=true]>svg.ui-chevron,[aria-expanded=true]>.select-arrow>svg.ui-chevron,details[open]>summary svg.ui-chevron{transform:rotate(180deg)}
.select-control .select-arrow{width:16px;height:16px;transition:none}
.select-control.is-open .select-arrow{transform:none}
summary[data-ui-disclosure]{list-style:none}
summary[data-ui-disclosure]::marker{content:""}
summary[data-ui-disclosure]::-webkit-details-marker{display:none}
summary[data-ui-disclosure]>svg.ui-chevron{float:right;margin-inline-start:8px}
@media(prefers-reduced-motion:reduce){:root body svg.ui-icon.ui-chevron{transition:none}}

/* Shared TG Studio identity: same supplied SVG as the design editor. */
.brand.brand-tg{gap:0;min-width:0;flex-shrink:0;}
.brand-tg .brand-logo{display:block;width:208px;max-width:100%;height:auto;object-fit:contain;}
.auth-story .brand-tg .brand-logo{width:260px;}
.studio-workspace .brand.brand-tg{padding:0 var(--tg-space-2);}
.studio-workspace .sidebar.is-collapsed .brand.brand-tg{width:40px;padding:0;overflow:hidden;}
.studio-workspace .sidebar.is-collapsed .brand-tg .brand-logo{width:112px;max-width:none;flex:none;}
@media(max-width:800px){.auth-mobile-brand.brand-tg .brand-logo{width:208px;max-width:100%;}}