:root{--bg:#111315;--panel:#191c20;--panel-2:#23272c;--line:#30353b;--fg:#f3f1eb;--muted:#a0a7ae;--accent:#ffc568;--accent-ink:#251b0d;--accent-soft:#3c3223;--stage-top:#20252b;--stage-bottom:#15191e;--stage-glow:#303943;--r:9px}
.app{grid-template-columns:276px minmax(0,1fr) 300px;grid-template-rows:70px minmax(0,1fr)}
.top{padding:0 24px;gap:24px;background:#191c20;color:#f3f1eb}.top .brand{gap:16px}.top .brand h1{font-size:22px}.top .brand small{font:12px var(--font-body);border-left:1px solid #41464c;padding-left:16px;color:#a0a7ae}.top nav .guide,.top nav>a,.top nav .sep{display:none}.top nav{gap:12px}.top nav .header-export{background:var(--accent);color:var(--accent-ink);padding:13px 20px;font-weight:600}
.rail{padding:22px 18px;gap:24px}.group h2{font-size:11px;letter-spacing:.09em}.lib>.group:first-child>h2{font-size:19px;letter-spacing:-.4px;text-transform:none;color:var(--fg);margin-bottom:8px}.library-intro{font-size:12px;color:var(--muted);margin:0 0 8px}.library-search{width:100%;padding:12px!important;background:var(--bg)!important}.library-tabs,.categories{display:flex;gap:5px}.library-tabs{border-bottom:1px solid var(--line);margin-bottom:4px}.library-tabs button{flex:1;background:transparent;border:0;border-radius:0;padding:12px 4px;color:var(--muted)}.library-tabs button[aria-selected=true]{color:var(--accent-text);box-shadow:inset 0 -2px var(--accent)}.categories{margin:5px 0 9px}.categories button{font-size:11px;padding:6px 9px;border-radius:20px;background:transparent}.categories button[aria-pressed=true]{background:var(--accent-soft);color:var(--accent-text);border-color:var(--accent)}
.presets{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.preset{padding:5px 5px 10px;border-color:transparent;border-radius:10px;background:var(--panel-2);gap:8px}.preset .thumb{aspect-ratio:1/1.08;background:linear-gradient(145deg,var(--panel-2),var(--bg));border-radius:7px}.preset .label{font-size:12px}.preset[aria-pressed=true]{box-shadow:0 0 0 1px var(--accent);border-color:var(--accent);background:var(--accent-soft)}.lib .sitelinks{margin-top:auto}.lib>details{display:none}
.stage{margin:14px;border:1px solid var(--line);border-radius:14px;overflow:hidden}.hint{bottom:14px;font-size:10px;gap:12px}.edit{border-left:0!important;padding-left:8px;gap:20px}.edit details.fold{padding-top:20px}.edit details.fold>summary h2{font-size:12px;text-transform:none;letter-spacing:0;color:var(--fg)}.edit details[data-fold=skin]{border-top:0;padding-top:0}.edit .skin-row{background:var(--panel-2);border:1px solid var(--line);padding:10px;border-radius:10px}.skin-thumb{width:40px!important;height:40px!important}.note{font-size:11px;line-height:1.6}.parts{gap:5px}.parts button{font-size:11px;padding:8px 6px}.tools{gap:5px}.tools button{font-size:11px;padding:8px}.seg button{font-size:11px;padding:8px 5px}.toggle .label{font-size:12px}.toggle .label small{font-size:10px}.slider{padding:5px 0}.slider-head{font-size:12px}.export-intro{font-size:11px;color:var(--muted);margin:0 0 6px}.no-results{font-size:12px;color:var(--muted);padding:20px 0}
@media(min-width:821px){.edit{background:var(--bg)}}
@media(max-width:1100px){.app{grid-template-columns:230px minmax(0,1fr) 270px}.rail{padding-inline:12px}.stage{margin:10px 4px}.top{padding-inline:16px}}
@media(max-width:820px){.app{grid-template-columns:1fr;grid-template-rows:auto}.top{min-height:64px}.top .brand small{display:none}.top nav{gap:4px}.top nav .header-export{padding:11px 14px}.stage{margin:10px;height:52vh;min-height:310px;top:0}.rail{padding:20px}.presets{grid-template-columns:repeat(4,minmax(0,1fr))}.edit{background:var(--panel)}.categories{margin:8px 0}.hint{display:none}}

.top{background:var(--panel);color:var(--fg)}.top .brand small{color:var(--muted);border-color:var(--line)}
.rail{gap:28px}.group h2,.edit details.fold>summary h2{font-size:16px;line-height:1.35;letter-spacing:0;text-transform:none;color:var(--fg)}
button,.btn,select,input[type=text],.parts button,.tools button,.seg button,.preset .label,.toggle .label{font-size:14px;line-height:1.35}
.note,.library-intro,.export-intro,.toggle .label small,.hint{font-size:12px;line-height:1.6}.library-intro{margin-bottom:12px}.categories button{font-size:12px;min-height:36px}.library-tabs button{font-size:13px;min-height:44px}.preset .label{white-space:normal;overflow-wrap:anywhere;min-height:19px}.mine .name{white-space:normal;overflow-wrap:anywhere}
.slider-head{font-size:14px}.slider-head input{font-variant-numeric:tabular-nums}.parts{grid-template-columns:repeat(2,minmax(0,1fr))}.parts button,.tools button{min-height:40px}.tools{grid-template-columns:repeat(2,minmax(0,1fr))}.skin-meta{min-width:0}.skin-meta .name{overflow-wrap:anywhere}.row input{min-width:70px}.no-results{font-size:14px;line-height:1.6}.no-results button{margin-top:12px}.hint{bottom:20px}.top nav button{min-height:44px}.top nav .header-export{font-size:14px}button:disabled{cursor:wait}
:is(button,a,input,select,summary,.btn):focus-visible{outline:2px solid var(--accent-text);outline-offset:3px}
#exportDialog{width:min(480px,calc(100% - 32px));max-height:calc(100dvh - 40px);overflow:auto;background:var(--panel);color:var(--fg);border:1px solid var(--line);border-radius:16px;padding:24px;box-shadow:0 24px 100px #0006}
#exportDialog::backdrop{background:#0009}.export-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}.export-heading h2{font-size:20px;line-height:1.3;margin:0}.export-heading button{min-height:44px;min-width:44px}.export-description{color:var(--muted);font-size:14px;line-height:1.6;margin:12px 0 24px}#exportOptions{display:grid;gap:24px}#exportOptions details{display:block!important}#exportOptions summary{min-height:40px}#exportOptions summary h2{font-size:16px}#exportOptions .fold-body{gap:14px}#exportOptions .seg button{min-height:44px}#exportActions{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}#exportActions button{flex:1;min-height:46px}#exportStatus{font-size:13px;color:var(--accent-text);line-height:1.5;margin:16px 0 0}#exportStatus:empty{display:none}
@media(min-width:821px){.app{grid-template-columns:276px minmax(0,1fr) 312px}.rail.edit{background:var(--bg)}.stage{min-width:0}.edit .row{flex-wrap:wrap}.edit .row input{flex-basis:130px}}
@media(min-width:821px) and (max-width:1100px){.app{grid-template-columns:220px minmax(0,1fr) 270px}.top .brand small{display:none}}
@media(max-width:820px){.app{grid-template-columns:1fr}.rail.edit{border-radius:18px 18px 0 0}.stage{height:45dvh;min-height:260px}.tabs button{min-height:56px}.presets{grid-template-columns:repeat(auto-fill,minmax(110px,1fr))}#exportDialog{width:100%;max-width:none;max-height:85dvh;margin:auto 0 0;border-radius:20px 20px 0 0;border-bottom:0;padding:24px 20px calc(24px + env(safe-area-inset-bottom,0px))}.toggle,.parts button,.tools button,select,.btn{min-height:44px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}}

.app{grid-template-rows:70px minmax(0,1fr) auto;grid-template-areas:"top top top" "lib stage edit" "ads ads ads"}
@media(max-width:820px){.app{grid-template-areas:"top" "stage" "lib" "edit" "ads";grid-template-rows:auto}}
@media(min-width:821px) and (max-height:650px){.app{height:auto;min-height:100dvh;grid-template-rows:70px minmax(360px,1fr) auto}}

@media(min-width:821px) and (max-height:650px){.app{grid-template-rows:70px minmax(360px,1fr) auto}}

.note,.library-intro,.export-intro,.toggle .label small,.skin-meta .name{font-size:13px;line-height:1.6}
.hint{font-size:13px;line-height:1.6;flex-wrap:wrap;justify-content:center;padding-inline:12px}
.parts button,.tools button{padding:10px 9px;min-height:44px;white-space:normal;overflow-wrap:anywhere}
.seg button{padding:10px 8px;min-height:44px;white-space:normal}
.top .brand h1 span{color:var(--accent-text)}
#exportOptions summary h3{margin:0;font-size:16px;font-weight:600;line-height:1.35;color:var(--fg);flex:1}
.parts button{display:flex;align-items:center;gap:10px;text-align:start;min-height:62px;padding:10px}
.parts button span{min-width:0;overflow-wrap:anywhere}
.part-diagram{width:26px;height:38px;flex:none;shape-rendering:crispEdges}
.part-diagram-muted{fill:var(--muted);opacity:.4}
.part-diagram-active{fill:var(--accent-text)}
.stage canvas{position:absolute;inset:0;width:100%;height:100%}
@media(min-width:821px){.app{height:max(540px,100dvh);min-height:0;grid-template-rows:70px minmax(0,1fr) auto}.rail.edit{min-height:0}}
.graphics-recovery{position:absolute;inset:0;z-index:5;background:var(--panel);padding:24px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;text-align:center}.graphics-recovery h2{font-size:20px;margin:0}.graphics-recovery p{max-width:40ch;line-height:1.6;margin:0}.graphics-recovery button{min-height:44px}
.top nav a.editor-help{display:inline-flex;color:var(--muted);font-size:14px;padding:10px;min-height:44px;align-items:center}
.parts button[aria-pressed=true] .part-diagram-active{stroke:var(--accent-text);stroke-width:.6}


@media(max-width:820px){}

/* The ad band takes no room unless an ad is actually showing (no ads configured, declined, blocked or unfilled). */
/* No ad box at all (not configured, declined): no band. */
/* Ad requested but not filled yet (or never): keep it laid out full width so AdSense can size it,
   but out of the layout and invisible, so the editor never shrinks then jumps back. */
/* Placeholders (showPlaceholders) have no ad state: show them normally. */
@media(min-width:821px){.app{grid-template-rows:70px minmax(0,1fr) auto}}
@media(min-width:821px) and (max-height:650px){.app{grid-template-rows:70px minmax(360px,1fr) auto}}

/* The viewer runs edge to edge between the side panels: no margin, no rounded corners. */
.stage,.stage canvas{margin:0!important;border-radius:0!important}
.stage{border:0!important;border-inline:1px solid var(--line)!important}
@media(max-width:820px){.stage{border-inline:0!important;border-block:1px solid var(--line)!important}}

/* Desktop: the editor is exactly one window tall. Nothing (ad scripts included) may add scroll space below it. */
@media(min-width:821px) and (min-height:651px){
  html,body{height:100%!important;min-height:0!important;margin:0!important;padding:0!important;overflow:hidden!important}
  .app{height:100dvh}
  /* Ad scripts set inline !important styles on html/body and append elements after the app,
     which beats the lock above. Pinning the app to the window means nothing added to the page
     can push it, scroll it, or show through below the ad band. */
  .app{position:fixed!important;inset:0!important;height:auto!important;z-index:1;background:var(--bg)}
}


/* Hide the editor until redesign.js has rearranged it, so the old layout never flashes on load. */
html:not(.rd-ready) .app{visibility:hidden}