/* User-approved beginner layouts, 2026-10-16. Existing DS-2.0 tokens and motion.
   No controls hidden; the existing dialogs/tabs/conditional states stay intact. */
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .navitem{color:var(--text);font-size:var(--fs-md);font-weight:600;line-height:1.5;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .navitem.active{color:var(--accent-text);font-weight:700;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .navgroup{color:var(--text-2);font-weight:600;}

/* Shared, non-interactive step guide. Loading/empty states remain owned by the
   original editors; this wrapper never substitutes a simulated task state. */
.beginner-guide{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s-4);list-style:none;padding:var(--s-2) 0;margin:0 0 var(--s-5);}
.beginner-guide li{display:flex;align-items:center;gap:var(--s-3);min-width:0;color:var(--text-2);font-size:var(--fs-sm);}
.beginner-guide li+li{border-left:1px solid var(--border);padding-left:var(--s-4);}
.beginner-step{display:grid;place-items:center;width:32px;height:32px;flex:none;border-radius:50%;border:1px solid var(--border-strong);color:var(--text-2);background:var(--surface);font-weight:600;}
.beginner-guide .is-current{color:var(--accent-text);}
.beginner-guide .is-current .beginner-step{color:var(--on-accent);background:var(--accent);border-color:var(--accent);}

/* Local specificity intentionally exceeds old named form grids; no !important. */
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(.beginner-images,.beginner-listing){min-width:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(.beginner-images,.beginner-listing) :is(select,textarea,input:not([type=checkbox]):not([type=radio])){background:var(--surface);color:var(--text);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(.beginner-help,.beginner-section-intro){font-size:var(--fs-sm);line-height:var(--lh);color:var(--text-2);margin:0 0 var(--s-3);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-subhead{font-size:var(--fs-lg);line-height:1.4;margin:0 0 var(--s-3);font-weight:600;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images .beginner-live-status{margin:0;font-size:var(--fs-xs);color:var(--text-2);flex-wrap:wrap;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images #biz-image-form{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:var(--s-5);align-items:start;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(.beginner-image-prep,.beginner-image-settings){display:flex;flex-direction:column;gap:var(--s-3);grid-column:auto;grid-row:auto;min-width:0;padding:var(--s-4);border:1px solid var(--border);border-radius:var(--r-sm);background:var(--surface);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(.beginner-image-prep,.beginner-image-settings)>.field{margin:0;width:100%;min-width:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings .field .beginner-help{margin:var(--s-1) 0 0;font-size:var(--fs-xs);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-model-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);min-width:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-model-grid>.field{min-width:0;margin:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images .biz-source-version{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-2);padding:var(--s-2) 0;margin:0;border-bottom:1px solid var(--border);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images .biz-source-version label{flex:1 1 70%;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images .image-brand{padding:var(--s-3);background:var(--surface-2);border-radius:var(--r-sm);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images .image-brand p{margin:var(--s-1) 0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images #biz-image-form details{min-width:0;margin:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images #biz-reference-summary{font-weight:600;margin-bottom:var(--s-2);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-prep .biz-reference-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(180px,100%),1fr));gap:var(--s-3);margin:var(--s-3) 0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-prep .biz-reference-grid>article{max-width:300px;min-width:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-prep .biz-material-preview{max-height:200px;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-prep textarea{min-height:96px;resize:vertical;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings .image-spec{padding:0;margin:0;background:transparent;border:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings .image-spec .formgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings .biz-counts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s-2);margin-top:var(--s-3);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings .biz-counts h3{grid-column:1/-1;margin:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings .biz-counts p{grid-column:1/-1;text-align:right;font-weight:600;margin:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings .biz-participation{padding:var(--s-3);margin:0;background:var(--surface-2);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings .biz-participation ul{margin:var(--s-2) 0 0;padding:0;list-style:none;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings .biz-participation li{font-size:var(--fs-xs);line-height:1.6;margin:var(--s-1) 0;overflow-wrap:anywhere;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-next{color:var(--warning);background:var(--warning-soft);border:1px solid var(--warning);border-radius:var(--r-sm);padding:var(--s-3);margin:0;font-size:var(--fs-sm);line-height:1.6;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-next.is-ready{color:var(--text-2);background:var(--surface-2);border-color:var(--border);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings>.actions{position:static;display:flex;padding:0;margin:0;background:transparent;border:0;box-shadow:none;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-image-settings>.actions>button{flex:1;min-height:var(--control-h);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-prompt-preview{margin-top:var(--s-4);padding-top:var(--s-4);border-top:1px solid var(--border);min-width:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images :is(.cat-empty,.studio-empty){min-height:72px;padding:var(--s-5);box-sizing:border-box;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images #image-step-two fieldset{padding:0;margin:0;min-width:0;}

/* Listing: preserve all seven source/version rows and all eight existing tabs. */
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-product-strip{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-5);padding:var(--s-4);margin-bottom:var(--s-4);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-product-strip>.studio-control{flex:1 1 280px;display:grid;grid-template-columns:auto minmax(120px,1fr);gap:var(--s-3);margin:0;max-width:480px;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-product-strip>.studio-product-identity{display:flex;align-items:center;gap:var(--s-3);margin:0;padding:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-product-strip>.studio-product-identity img{width:64px;height:56px;object-fit:contain;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-product-strip>p{margin:0;flex:1 1 240px;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-workbench{display:grid;grid-template-columns:minmax(330px,.72fr) minmax(0,1.28fr);gap:var(--s-4);align-items:start;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-workbench>:is(aside,.studio-right){display:flex;flex-direction:column;gap:var(--s-4);min-width:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-card{padding:var(--s-4);margin:0;min-width:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-source-row{display:grid;grid-template-columns:auto minmax(100px,1fr) minmax(140px,1.25fr);gap:var(--s-1) var(--s-2);padding:var(--s-3) 0;min-width:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-source-row>select{grid-column:3;grid-row:1;min-width:0;width:100%;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-source-actions{grid-column:2/-1;display:flex;justify-content:flex-end;gap:var(--s-2);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing-settings>.studio-control{display:grid;grid-template-columns:88px minmax(0,1fr);gap:var(--s-2);margin-bottom:var(--s-2);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-output-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-2);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-output-choices label{display:flex;align-items:center;gap:var(--s-1);font-size:var(--fs-sm);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing-outputs .studio-two-btn{display:flex;flex-direction:column;align-items:stretch;position:static;box-shadow:none;padding:0;background:transparent;border:0;gap:var(--s-2);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing-outputs .studio-two-btn button{width:100%;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing-outputs .studio-two-btn button.outline-strong{background:var(--surface);color:var(--accent-text);border-color:var(--accent);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing :is(.studio-cardhead,.studio-tabs){flex-wrap:wrap;gap:var(--s-2);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-tabs{display:flex;overflow:visible;margin-bottom:var(--s-4);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-tabs>button{flex:1 1 auto;white-space:nowrap;min-width:0;padding-inline:var(--s-2);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-result-field textarea{min-height:64px;height:64px;resize:vertical;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-bullet-row{display:grid;grid-template-columns:24px minmax(0,1fr) auto auto;gap:var(--s-2);align-items:start;margin-bottom:var(--s-2);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-bullet-row textarea{min-height:56px;height:56px;resize:vertical;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-preflight{padding:var(--s-3);border:1px solid var(--border-strong);border-radius:var(--r-sm);background:var(--surface-2);font-size:var(--fs-sm);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-preflight ul{margin:var(--s-2) 0;padding-left:var(--s-5);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-preflight li{margin:var(--s-1) 0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-flow strong{font-size:var(--fs-xs);line-height:1.5;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-ads-settings{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-3);}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-ads-settings .studio-control{display:flex;flex-direction:column;gap:var(--s-1);min-width:0;margin:0;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-ads-settings .studio-control:last-child{grid-column:1/-1;}
html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing-history{margin-top:var(--s-4);}

@media(max-width:1180px){
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-workbench{grid-template-columns:minmax(310px,.8fr) minmax(0,1.2fr);}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-bullet-row{grid-template-columns:24px minmax(0,1fr) auto;}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-bullet-row>.danger{grid-column:3;}
}
@media(max-width:1020px){
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-images #biz-image-form{grid-template-columns:minmax(0,1fr);}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-workbench{grid-template-columns:minmax(0,1fr);}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-source-row{grid-template-columns:auto minmax(0,1fr) minmax(0,1fr);}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-source-row>select{grid-column:3;grid-row:1;}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-source-actions{grid-column:2/-1;}
}
@media(max-width:600px){
 .beginner-guide{gap:var(--s-2);margin-bottom:var(--s-4);}
 .beginner-guide li{flex-direction:column;align-items:flex-start;gap:var(--s-2);font-size:var(--fs-xs);}
 .beginner-guide li+li{padding-left:var(--s-2);}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(.beginner-image-prep,.beginner-image-settings){padding:var(--s-3);}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-model-grid{grid-template-columns:minmax(0,1fr);}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-source-row{grid-template-columns:auto minmax(0,1fr);}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-source-row>select{grid-column:2;grid-row:auto;}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing-settings>.studio-control{grid-template-columns:76px minmax(0,1fr);}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-bullet-row{grid-template-columns:24px minmax(0,1fr) auto;}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-listing .studio-bullet-row>.danger{grid-column:3;}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(.beginner-images,.beginner-listing) :is(input:not([type=checkbox]):not([type=radio]),select,button){min-height:44px;}
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) .beginner-product-strip>.studio-control{grid-template-columns:minmax(0,1fr);flex-basis:100%;}
}
@media(prefers-reduced-motion:reduce){
 html body #app:not(#\#):not(#\#):not(#\#):not(#\#):not(#\#) :is(.beginner-images,.beginner-listing) :is(input,select,textarea){transition:none;}
}