/* 2026-10-13 · Referenced Temu workbench: dark navigation, quiet task cards. */
:root{--wb-rail:216px;--wb-form:360px;--wb-ink:var(--color-navigation);--wb-ink-soft:var(--color-navigation-hover);--wb-ink-line:var(--color-navigation-border);--wb-ink-muted:var(--color-navigation-muted)}
body{grid-template-columns:var(--wb-rail) minmax(0,1fr);grid-template-rows:64px minmax(0,1fr);background:var(--color-page);-webkit-font-smoothing:antialiased}
.app-sidebar{grid-row:1/-1;display:flex;flex-direction:column;background:var(--wb-ink);border:0;color:#f2f2f5;overflow:hidden}
.wb-brand{height:90px;flex-shrink:0;display:flex;align-items:center;gap:10px;padding:0 18px;border-bottom:1px solid var(--wb-ink-line)}
.wb-brand-mark{display:grid;place-items:center;width:34px;height:36px;border-radius:9px;background:var(--color-brand);font-size:20px;font-weight:650;color:white;flex-shrink:0}
.wb-brand .brand{font-size:17px;font-weight:650;letter-spacing:-.3px;line-height:1.4}.wb-brand .brand>span{display:block;font-size:14px;font-weight:400;letter-spacing:0;color:var(--wb-ink-muted);margin-top:3px}
#primaryNavigation{display:flex;flex-direction:column;width:100%;min-height:0;flex:1;padding:20px 12px 16px;gap:0;overflow:hidden}
.top-navigation{display:grid;grid-template-columns:1fr 1fr;align-self:stretch;gap:6px;padding:0 0 22px;margin:0;order:0;flex-shrink:0;border-bottom:1px solid var(--wb-ink-line)}
.top-navigation .nav{width:100%;min-height:42px;height:auto;padding:8px 4px;border-radius:7px;font-size:14px;font-weight:500;text-align:center;color:#bbc0ca;background:transparent}
.top-navigation .nav.active{color:white;background:#383b46}.top-navigation .nav.active::before{display:none}
.top-navigation .nav:hover{color:white;background:var(--wb-ink-soft)}
.wb-nav-label{font-size:14px;color:var(--wb-ink-muted);padding:22px 12px 12px;order:1}
#primaryNavigation>[data-workspace-navigation]{order:2;flex:1;min-height:0;flex-direction:column;overflow-y:auto;gap:4px;scrollbar-width:thin;scrollbar-color:#444854 transparent}
#primaryNavigation .nav:not([data-workspace]){min-height:44px;padding:10px 14px;font-size:15px;font-weight:500;color:#bec2cc;text-align:left;border-radius:7px}
#primaryNavigation .nav:not([data-workspace]):hover{background:var(--wb-ink-soft);color:white}
#primaryNavigation .nav:not([data-workspace]).active{background:#382a26;color:#ffab80}
#primaryNavigation .nav:not([data-workspace]).active::before{left:0;top:14px;bottom:14px;width:3px;background:var(--color-brand)}
#primaryNavigation .nav-library{order:3;margin-top:auto;padding-top:16px;flex-shrink:0;border-top:1px solid var(--wb-ink-line);gap:2px}
#primaryNavigation .production-recover{order:4;color:#bcc1cc!important;text-align:left;padding:10px 14px!important;margin:0;font-size:14px!important;flex-shrink:0;min-height:42px}
.app-header{grid-column:2;grid-row:1;min-width:0;padding:0 28px;gap:16px;background:white;border-bottom:1px solid var(--color-border)}
.wb-page-title{display:flex;align-items:center;gap:14px;min-width:0}.wb-page-title>span{font-size:14px;color:var(--color-text-muted);white-space:nowrap}.wb-page-title .wb-breadcrumb-divider{color:#b9bbc0}
.wb-page-title h1{font-size:18px;font-weight:650;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wb-history-button{margin-left:auto;font-size:14px;min-height:40px;padding:8px 12px;white-space:nowrap;color:var(--color-text-secondary);border:1px solid var(--color-border);border-radius:7px;background:white}.wb-history-button:hover{background:var(--color-page)}.wb-history-button>span{margin-left:8px;color:#8d929a}
.wb-menu-button,.wb-close-menu,.wb-nav-backdrop,.wb-view-switch{display:none}
main{grid-row:2;grid-column:2;padding:24px;overflow:hidden;min-height:0}
.workspace,.creative-workspace{height:100%;grid-template-columns:var(--wb-form) minmax(0,1fr);gap:20px}
.settings,.cm-settings{background:white;border:1px solid var(--color-border);border-radius:12px;overflow:hidden;box-shadow:0 1px 2px #22262c03}
.settings{display:flex;flex-direction:column;padding:0}
.settings-scroll,.cm-scroll{padding:22px;min-height:0;flex:1;overflow:auto;scrollbar-width:thin;scrollbar-color:#d6d5d1 transparent}
.settings-footer,.cm-foot{padding:16px 22px;border-top:1px solid var(--color-border);background:#fff;flex-shrink:0}
.settings-footer .primary,.cm-foot .primary{width:100%;min-height:44px;margin-top:9px;font-size:15px}
.section-title,.cm-headrow h2{font-size:18px;margin:0;font-weight:650}.product-heading,.cm-headrow{margin-bottom:20px;display:flex;align-items:center;min-height:26px;gap:10px}
.product-heading{justify-content:flex-start}.cm-headrow h2{margin-right:auto}
.product-heading::before,.cm-headrow::before{content:'';width:3px;height:17px;background:var(--color-brand);border-radius:2px;flex-shrink:0}
.field{margin-bottom:18px}.field label,.planfields label{font-size:14px;font-weight:600;margin-bottom:8px}
input[type=text],input[type=number],input[type=url],textarea,select,.select-control{border:1px solid var(--color-border);border-radius:8px;background:#fff;padding:10px 12px;min-height:44px;font-size:15px;line-height:1.55;box-shadow:0 1px 2px #22262c02}
input[type=text]:hover,textarea:hover,.select-control:hover{border-color:#c8c9cb}input[type=text]:focus,textarea:focus,.select-control[aria-expanded=true]{border-color:var(--color-brand);outline:0;box-shadow:0 0 0 3px #f45d160c}
input::placeholder,textarea::placeholder{color:#93969d;font-size:14px}textarea{min-height:92px;line-height:1.65}#selling{height:112px;min-height:100px}#requirements{height:88px;min-height:88px}
.row{gap:12px}.settings-section,.cm-section{margin-top:24px;padding-top:22px;border-color:var(--color-border)}.settings h3,.cm-section>h3{font-size:16px;font-weight:650;margin-bottom:14px}.structure-heading h3{margin-bottom:2px}.sub{font-size:14px}
.image-heading,.cm-upload-label{font-size:14px;font-weight:600;margin-bottom:10px}.image-count{font-size:14px;font-weight:400;color:var(--color-text-muted)}
.upload-zone,.cm-upload{padding:20px 14px;border:1px dashed #d6d2cc;border-radius:9px;background:#faf9f6;min-height:0}
.upload-zone:not(:has(.photo)) .upload-actions{min-height:94px;gap:10px}.upload-actions{gap:10px}.upload-button,.cm-upload>.primary{background:white;border:1px solid #d8d5cf;box-shadow:0 1px 2px #00000005;color:var(--color-text);border-radius:7px;padding:8px 18px;font-size:14px;min-height:40px}.upload-button:hover,.cm-upload>.primary:hover{border-color:var(--color-brand);color:var(--color-primary);background:white}
.drop-hint,.cm-upload p{font-size:14px;color:var(--color-text-muted)}.upload-help{font-size:14px;line-height:1.6;margin:10px 0 20px}.cm-upload{margin-bottom:18px}.cm-upload p{margin-top:9px}.cm-upload.compact{padding:14px}
.primary{border-radius:8px;font-weight:600;box-shadow:0 1px 2px #a5411418;font-size:15px}.secondary{border-radius:8px;font-size:14px;min-height:40px;padding:8px 14px}.textbtn{min-height:32px;font-size:14px}.counttotal,.cm-count{font-size:14px}.counttotal b,.cm-count b{font-size:16px}
.typegrid{gap:0;margin-top:14px;border:1px solid var(--color-border);border-radius:8px;overflow:hidden}.type{border:0;border-bottom:1px solid var(--color-border);padding:11px 12px;border-radius:0;background:#fff}.type:last-child{border:0}.type b{font-size:14px;font-weight:600}.type small{font-size:14px;margin-top:3px}.counter{gap:0;background:#f8f8f6;border:1px solid var(--color-border);border-radius:6px;overflow:hidden}.counter button{border:0;background:transparent;width:28px;height:30px;font-size:17px}.counter>span{min-width:25px;text-align:center;font-size:14px}
.choose-layouts{background:#fff;border:1px solid var(--color-border);color:var(--color-text-secondary);min-height:36px;padding:6px 12px;font-size:14px;font-weight:500}.choose-layouts:hover{border-color:var(--color-brand);color:var(--color-primary);background:white}
.listing-setting{margin-top:20px;padding-top:20px}.listing-setting strong{font-size:14px}.listing-setting p{font-size:14px}.switch-control{transform:scale(.92);transform-origin:right center}
.canvas,.cm-canvas{padding:0;background:transparent;min-width:0;overflow:auto;scrollbar-width:thin;scrollbar-color:#d6d5d1 transparent;border:0}
.canvas:has(#configure:not(.hidden) .suite-overview){background:transparent}
.suite-example-board,.cm-example{border:1px solid var(--color-border);border-radius:12px;padding:22px;background:white;box-shadow:0 1px 2px #22262c03}
.suite-example-board{grid-template-columns:32% minmax(0,1fr);gap:20px}.suite-intro{padding-bottom:17px;border-bottom:1px solid #efeee9;margin-bottom:0}.suite-intro h2,.cm-example h2{font-size:17px;font-weight:650;line-height:1.5}.cm-example h2{padding-bottom:17px;border-bottom:1px solid #efeee9;margin-bottom:20px}
.suite-example-image{height:clamp(132px,calc((100dvh - 350px)/2),216px);border-radius:8px}.suite-example-support{gap:16px 12px}.suite-example-main .suite-example-image{height:auto}.suite-example-card figcaption,.cm-example figcaption{font-size:14px;font-weight:400;padding-top:10px;min-height:32px;color:var(--color-text-secondary)}
.cm-detail-demo{grid-template-columns:1fr 1fr 1fr;gap:14px}.cm-detail-demo .cm-example-image{height:clamp(135px,calc((100dvh - 350px)/2),216px)}.cm-detail-demo figure:first-child .cm-example-image{height:auto}.cm-reference-demo .cm-example-image{height:clamp(200px,48dvh,350px)}.cm-fashion-demo .cm-example-image{height:clamp(220px,48dvh,350px);aspect-ratio:auto}
.cm-models{gap:10px}.cm-model{border-radius:8px}.cm-model img{max-height:190px;object-fit:contain}.cm-chip{padding:8px 10px;min-height:40px}.cm-module{padding:11px 9px;gap:7px;border-radius:8px}.cm-module span{font-size:14px;font-weight:600}.cm-module small{font-size:14px}.cm-module input{margin-top:3px}
.plancard,.cm-plan-card,.listing-draft{background:white;border:1px solid var(--color-border);border-radius:12px;padding:20px}.cm-plan-layout{grid-template-columns:138px minmax(0,1fr);gap:16px}.cm-outline button{background:transparent;padding:9px 10px}.cm-outline button:hover{background:white}.planfields{gap:14px}.planheader strong,.cm-plan-heading h3{font-size:16px}.statusbar{background:white;padding:16px 20px;border:1px solid var(--color-border);border-radius:10px;margin-bottom:18px}.plan-tools{padding:18px 0}.canvas-header{padding:0 0 20px;margin:0}.canvas-header h1{font-size:22px}.empty{background:white;border:1px solid var(--color-border);border-radius:12px;padding:60px 24px}
.work-row,.image-work-row{background:#fff;border:1px solid var(--color-border);border-radius:10px;padding:18px;margin-bottom:12px}.image-work-row img{width:80px;height:80px}.image-work-row h3,.work-row h3{font-size:16px}.image-work-row p{font-size:14px}.library-actions{margin-bottom:16px}
.workspace.library{grid-template-columns:minmax(0,1fr)}.workspace.library>.canvas{padding:4px;max-width:none}
.toast{z-index:120}
@media(min-width:1500px){:root{--wb-form:380px}main{padding:28px}.workspace,.creative-workspace{gap:24px}.suite-example-board,.cm-example{padding:26px}}
@media(min-width:761px) and (max-width:1100px){:root{--wb-rail:192px;--wb-form:320px}.app-header{padding:0 20px}.wb-brand{padding:0 13px;gap:8px}.wb-brand .brand{font-size:15px}.wb-brand-mark{width:30px;height:34px}main{padding:18px}.workspace,.creative-workspace{gap:16px}.settings-scroll,.cm-scroll{padding:18px}.settings-footer,.cm-foot{padding:14px 18px}.suite-example-board{padding:18px;grid-template-columns:1fr}.suite-example-main{max-width:220px;margin:auto}.suite-example-main .suite-example-image{height:200px;flex:none}.suite-example-main img{position:static}.suite-example-support{grid-template-columns:repeat(2,minmax(0,1fr))}.suite-example-support .suite-example-card,.suite-example-support .suite-example-card:nth-child(4),.suite-example-support .suite-example-card:nth-child(5){grid-column:auto}.suite-example-image{height:145px}.cm-plan-layout{grid-template-columns:1fr}.cm-outline{display:none}}
@media(min-width:761px) and (max-width:900px){main{overflow:auto}.workspace,.creative-workspace{grid-template-columns:1fr;height:100%;overflow:auto}.settings,.cm-settings{min-height:580px;max-height:720px}.canvas,.cm-canvas{overflow:visible}.suite-example-board{grid-template-columns:30% minmax(0,1fr)}.suite-example-main{max-width:none}.suite-example-main .suite-example-image{height:auto;flex:1}.suite-example-main img{position:absolute}.cm-example{margin-bottom:20px}}
@media(max-width:760px){
 body{height:100dvh;grid-template-columns:minmax(0,1fr);grid-template-rows:60px minmax(0,1fr);overflow:hidden}
 body.wb-has-form{grid-template-rows:60px 52px minmax(0,1fr)}
 .app-header{grid-column:1;grid-row:1;gap:12px;padding:0 16px;min-height:60px;display:flex;overflow:visible}
 .wb-menu-button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;width:36px;min-height:40px;padding:8px;flex-shrink:0;border:1px solid var(--color-border);border-radius:7px}.wb-menu-button span{width:16px;height:1.5px;background:var(--color-text);border-radius:2px}
 .wb-page-title{gap:0}.wb-page-title>span{display:none}.wb-page-title h1{font-size:17px}.wb-history-button{border:0;padding:8px 0;font-size:14px;min-height:40px}.wb-history-button>span{margin-left:4px}
 .app-sidebar{position:fixed;z-index:100;inset:0 auto 0 0;width:min(286px,84vw);height:100dvh;visibility:hidden;transform:translateX(-100%);transition:transform .18s ease,visibility .18s;box-shadow:12px 0 50px #10131928}
 .wb-navigation-open .app-sidebar{visibility:visible;transform:translateX(0)}.wb-navigation-open .wb-nav-backdrop{display:block;position:fixed;inset:0;z-index:90;background:#15171e80}
 .wb-close-menu{display:block;margin-left:auto;width:32px;min-height:40px;font-size:25px;color:#aeb3bf}.wb-brand{height:82px}.wb-brand .brand{font-size:17px}
 #primaryNavigation{padding:18px 14px 18px;min-height:0}#primaryNavigation .top-navigation{display:grid;grid-template-columns:1fr 1fr;gap:8px}.top-navigation .nav{min-height:44px;font-size:15px}#primaryNavigation .nav:not([data-workspace]){font-size:16px}
 .wb-has-form .wb-view-switch{display:flex;grid-column:1;grid-row:2;margin:0;padding:7px 16px;gap:6px;background:#fff;border-bottom:1px solid var(--color-border)}.wb-view-switch button{flex:1;font-size:14px;color:var(--color-text-secondary);min-height:36px;border-radius:6px}.wb-view-switch button[aria-pressed=true]{background:var(--color-primary-soft);color:var(--color-primary);font-weight:600}
 main{grid-column:1;grid-row:2;padding:16px 14px;overflow:auto;min-height:0}.wb-has-form main{grid-row:3}
 .workspace,.creative-workspace{display:grid;grid-template-columns:minmax(0,1fr);height:auto;gap:16px;overflow:visible}.settings,.cm-settings{height:auto;max-height:none;min-height:0;border-radius:10px;overflow:visible}.settings-scroll,.cm-scroll{padding:20px;overflow:visible;flex:none}.settings-footer,.cm-foot{padding:16px 20px;border-radius:0 0 10px 10px}.canvas,.cm-canvas{padding:0;overflow:visible}
 .wb-has-form[data-workbench-view=settings] :is(#workspace>.canvas,#creativeWorkspace>.cm-canvas){display:none}
 .wb-has-form[data-workbench-view=preview] :is(#settings,#creativeWorkspace>.cm-settings){display:none}
 .suite-example-board{display:grid;grid-template-columns:1fr;padding:18px;gap:18px;border-radius:10px}.suite-example-main{max-width:240px;margin:auto}.suite-example-main .suite-example-image{height:220px;flex:none}.suite-example-main img{position:static}.suite-example-support{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 12px}.suite-example-support .suite-example-card,.suite-example-support .suite-example-card:nth-child(4),.suite-example-support .suite-example-card:nth-child(5){grid-column:auto}.suite-example-image{height:auto;aspect-ratio:1}
 .cm-example{padding:18px;border-radius:10px}.cm-detail-demo{grid-template-columns:1fr 1fr}.cm-detail-demo figure:first-child{grid-column:1/-1;grid-row:auto;max-width:240px;margin:auto}.cm-detail-demo figure:first-child .cm-example-image{height:220px}.cm-detail-demo figure:first-child img{position:static}.cm-detail-demo .cm-example-image{height:auto;aspect-ratio:1}.cm-reference-demo{gap:12px}.cm-reference-demo .cm-example-image{height:auto;aspect-ratio:1}.cm-fashion-demo{grid-template-columns:1fr 1fr;gap:12px}.cm-fashion-demo figure:first-child{grid-column:1/-1;max-width:210px;margin:auto}.cm-fashion-demo .cm-example-image{height:230px}
 .cm-plan-layout{grid-template-columns:1fr}.cm-outline{display:none}.plancard,.cm-plan-card{padding:16px}.planfields{grid-template-columns:1fr}.listing-fields{grid-template-columns:1fr}.work-row,.image-work-row{padding:16px}.row{gap:12px}.cm-module span{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.app-sidebar{transition:none}}

/* Keep each example at its natural proportion, independent of the form height. */
.suite-example-board{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:20px 14px;container-type:inline-size;container-name:examples}
.suite-intro{grid-column:1/-1}
.suite-example-support{display:contents}
.suite-example-board .suite-example-card,.suite-example-support .suite-example-card:nth-child(4),.suite-example-support .suite-example-card:nth-child(5){grid-column:auto;max-width:none;margin:0;align-self:start}
.suite-example-board .suite-example-image,.suite-example-board .suite-example-main .suite-example-image{height:auto;aspect-ratio:1;flex:none;background:#fafaf8}
.suite-example-board .suite-example-main img{position:static}
.cm-example{container-type:inline-size;container-name:examples}
.cm-detail-demo{grid-template-columns:repeat(3,minmax(0,1fr));align-items:start;gap:20px 14px}
.cm-detail-demo figure:first-child{grid-column:auto;grid-row:auto;max-width:none;margin:0}
.cm-detail-demo .cm-example-image,.cm-detail-demo figure:first-child .cm-example-image{height:auto;aspect-ratio:1;flex:none;background:#fafaf8}
.cm-detail-demo figure:first-child img{position:static}
@container examples (max-width:560px){.suite-example-board>.suite-example-main{grid-column:1}.cm-detail-demo{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:1200px){.suite-example-board{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){.suite-example-board{gap:18px 12px}.cm-detail-demo{grid-template-columns:repeat(2,minmax(0,1fr))}}

body[data-workspace=video] #primaryNavigation{padding-top:20px;gap:0}
@media(min-width:761px) and (max-width:800px){body{height:100dvh;overflow:hidden;grid-template-columns:var(--wb-rail) minmax(0,1fr);grid-template-rows:64px minmax(0,1fr)}.app-sidebar{position:static;height:auto}.app-header{display:flex;grid-template-rows:none}}
@media(max-width:760px){body[data-workspace=video] #primaryNavigation{padding-top:18px}}