.mockup-studio{width:min(1500px,calc(100% - 40px));margin:28px auto 60px;color:#d8d0c6}.mockup-hero{display:flex;justify-content:space-between;gap:24px;align-items:flex-start;margin-bottom:20px;padding:24px 28px;border:1px solid rgba(214,149,37,.35);border-radius:18px;background:linear-gradient(145deg,rgba(18,17,15,.98),rgba(7,7,7,.98));box-shadow:0 24px 70px rgba(0,0,0,.32)}.mockup-hero h1,.mockup-results h2,.mockup-panel h2{font-family:Cinzel,serif;color:#efad36}.mockup-hero h1{margin:4px 0 8px;font-size:34px}.mockup-hero p,.mockup-panel p{margin:0;color:#978f86;line-height:1.55}.mockup-hero-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}.mockup-back,.mockup-btn,.mockup-result-actions button{border:1px solid rgba(225,151,34,.4);background:#15120e;color:#e8b456;border-radius:9px;padding:9px 12px;text-decoration:none;cursor:pointer;font:inherit;font-size:12px}.mockup-btn.primary{background:linear-gradient(90deg,#d74d16,#ef6a1e);color:#fff1dd;border-color:#f27632}.mockup-engine-state{font-size:11px;border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:7px 10px;color:#c9a26d}.mockup-engine-state[data-state=ready]{color:#7ddba0;border-color:rgba(65,190,113,.35)}.mockup-engine-state[data-state=error]{color:#e07b6c;border-color:rgba(224,123,108,.35)}.mockup-workspace{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:18px;align-items:start}.mockup-main{display:grid;gap:18px}.mockup-panel{border:1px solid rgba(255,255,255,.09);background:linear-gradient(145deg,rgba(16,15,13,.97),rgba(7,7,7,.96));border-radius:16px;padding:20px}.mockup-panel-head{display:flex;justify-content:space-between;align-items:flex-start;gap:18px;margin-bottom:16px}.mockup-panel h2{margin:3px 0 7px;font-size:21px}.mockup-step{display:inline-grid;place-items:center;min-width:28px;height:22px;padding:0 7px;border:1px solid rgba(225,151,34,.35);border-radius:999px;color:#d39b43;font-size:10px;letter-spacing:.1em}.mockup-drop{border:1px dashed rgba(225,151,34,.35);border-radius:12px;padding:18px;display:grid;gap:5px;text-align:center;background:rgba(225,151,34,.025);transition:.18s}.mockup-drop strong{color:#d9b06a}.mockup-drop span{font-size:11px;color:#756f68}.mockup-drop.is-dragging{border-color:#ef6a1e;background:rgba(239,106,30,.08)}.mockup-status{min-height:18px;margin-top:9px;font-size:11px;color:#867f76}.mockup-status[data-state=error]{color:#e07b6c}.mockup-status[data-state=success]{color:#7ddba0}.mockup-status[data-state=working]{color:#d7a653}.mockup-template-list{display:grid;gap:9px;margin-top:8px}.mockup-template-empty,.mockup-art-empty{padding:16px;border-radius:10px;background:rgba(255,255,255,.025);color:#756f68;font-size:12px}.mockup-template-row{display:grid;grid-template-columns:30px minmax(0,1fr) 32px;gap:10px;align-items:start;padding:13px;border:1px solid rgba(255,255,255,.08);border-radius:11px;background:rgba(255,255,255,.02)}.mockup-check input{position:absolute;opacity:0}.mockup-check span{display:block;width:18px;height:18px;border:1px solid rgba(225,151,34,.45);border-radius:5px;margin-top:2px}.mockup-check input:checked+span{background:linear-gradient(135deg,#d74d16,#ef8a24);box-shadow:inset 0 0 0 3px #100e0b}.mockup-template-info{display:grid;gap:5px;min-width:0}.mockup-template-info strong{color:#ddd2c5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-template-info>span{font-size:10px;color:#776f67}.mockup-template-info label{display:grid;grid-template-columns:145px minmax(0,1fr);align-items:center;gap:8px;font-size:10px;color:#9d9388;margin-top:4px}.mockup-template-info select,.mockup-form-grid select,.mockup-form-grid input,.mockup-form-grid textarea{width:100%;background:#080808;color:#ddd3c6;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:9px;font:inherit;font-size:12px}.mockup-delete{border:0;background:transparent;color:#8c7064;font-size:22px;cursor:pointer;line-height:1}.mockup-delete:hover{color:#e07b6c}.mockup-art-card{display:grid;grid-template-columns:120px 1fr;gap:14px;align-items:center}.mockup-art-card img{width:120px;max-width:100%;height:120px;object-fit:contain;background:#060606;border-radius:9px;border:1px solid rgba(255,255,255,.09)}.mockup-art-card>div{display:grid;gap:6px}.mockup-art-card span{font-size:11px;color:#837b73}.mockup-text-btn{justify-self:start;border:0;background:transparent;padding:0;color:#d7a653;cursor:pointer}.mockup-form-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.mockup-form-grid label{display:grid;gap:6px}.mockup-form-grid label>span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#857c72}.mockup-form-grid .wide{grid-column:1/-1}.mockup-form-grid textarea{resize:vertical}.mockup-note{font-size:10px!important;margin-top:10px!important}.mockup-sticky{position:sticky;top:18px}.mockup-summary{display:flex;justify-content:space-between;gap:12px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.07);font-size:12px}.mockup-summary span{color:#817970}.mockup-summary strong{color:#d5b16f}.mockup-summary strong[data-state=ready]{color:#7ddba0}.mockup-summary strong[data-state=missing]{color:#bc7b68}.mockup-generate{width:100%;margin-top:16px;border:1px solid #f27632;border-radius:10px;padding:13px;background:linear-gradient(90deg,#d74d16,#ef6a1e);color:#fff5e7;font-weight:700;cursor:pointer}.mockup-generate:disabled{opacity:.35;cursor:not-allowed;filter:saturate(.35)}.mockup-progress{margin-top:14px}.mockup-progress>div{height:5px;border-radius:999px;background:#211a13;overflow:hidden}.mockup-progress span{display:block;height:100%;width:0;background:linear-gradient(90deg,#d74d16,#efb34b);transition:width .2s}.mockup-progress p{font-size:10px!important;margin-top:7px!important}.mockup-results{margin-top:22px;border:1px solid rgba(214,149,37,.28);background:rgba(9,9,9,.96);border-radius:16px;padding:20px}.mockup-results-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:15px}.mockup-results h2{margin:4px 0 0;font-size:23px}.mockup-results-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}.mockup-result{overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:12px;background:#0e0d0c}.mockup-result>img{display:block;width:100%;aspect-ratio:2/3;object-fit:cover;background:#050505}.mockup-result-body{display:grid;gap:5px;padding:12px}.mockup-result-body strong{color:#dcb269;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-result-body>span{font-size:9px;color:#6f6963;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-result-actions{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-top:6px}.mockup-result-actions button{padding:8px}.mockup-result-actions .pinterest{border-color:rgba(189,8,28,.6);color:#f0a7b0}.mockup-photopea-engine{position:fixed!important;left:-10000px!important;top:-10000px!important;width:2px!important;height:2px!important;border:0!important;opacity:.01!important;pointer-events:none!important}.sites-head .mockup-dashboard-btn{background:linear-gradient(90deg,#5c3514,#8c521b);color:#f0c880;border-color:rgba(225,151,34,.55)}@media(max-width:980px){.mockup-workspace{grid-template-columns:1fr}.mockup-sticky{position:static}.mockup-hero{flex-direction:column}.mockup-hero-actions{justify-content:flex-start}}@media(max-width:640px){.mockup-studio{width:min(100% - 20px,1500px);margin-top:12px}.mockup-hero,.mockup-panel,.mockup-results{padding:15px}.mockup-panel-head{flex-direction:column}.mockup-form-grid{grid-template-columns:1fr}.mockup-form-grid .wide{grid-column:auto}.mockup-template-info label{grid-template-columns:1fr}.mockup-results-grid{grid-template-columns:1fr}.mockup-result-actions{grid-template-columns:1fr}}

.mockup-saved-note{font-size:11px;color:#817970}.mockup-result-actions:has([data-save]){grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:640px){.mockup-art-card{grid-template-columns:1fr}.mockup-art-card img{width:100%;height:180px}.mockup-result-actions:has([data-save]){grid-template-columns:1fr}}

.mockup-template-row{grid-template-columns:30px 96px minmax(0,1fr) 32px}.mockup-template-preview{width:96px;max-height:144px;display:grid;place-items:center;align-self:start;overflow:hidden;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#060606}.mockup-template-preview img{display:block;width:100%;height:100%;object-fit:contain}.mockup-template-preview.empty{min-height:72px;color:#6f6963;font-size:11px;letter-spacing:.08em}.mockup-template-preview.empty span{opacity:.75}@media(max-width:640px){.mockup-template-row{grid-template-columns:30px minmax(0,1fr) 32px}.mockup-template-preview{grid-column:2;width:100%;max-width:180px;max-height:240px}.mockup-template-info{grid-column:2}.mockup-delete{grid-column:3;grid-row:1}}


/* V3: image-first template cards and compact controls */
.mockup-template-row{grid-template-columns:30px 240px minmax(0,1fr) 28px;gap:12px;padding:10px}.mockup-template-preview{width:240px;max-height:360px;border-radius:10px;background:#050505}.mockup-template-preview img{object-fit:contain}.mockup-template-preview.empty{min-height:160px;font-size:11px}.mockup-template-info{gap:5px;align-content:start}.mockup-template-titleline{display:grid;gap:2px}.mockup-template-info strong{font-size:14px;line-height:1.15}.mockup-template-meta{font-size:8px;color:#706a63;line-height:1.25}.mockup-template-info>span{display:none}.mockup-template-info label{grid-template-columns:78px minmax(0,1fr);gap:6px;font-size:8px;margin-top:1px}.mockup-template-info label>span{white-space:nowrap}.mockup-template-info select{padding:6px 8px;font-size:10px}.mockup-delete{font-size:18px}.mockup-art-card{grid-template-columns:180px 1fr}.mockup-art-card img{width:180px;height:180px}.mockup-results-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px}.mockup-result-body{padding:10px}.mockup-result-actions button{font-size:10px;padding:8px 6px}.mockup-result-actions .pinterest{font-weight:600}@media(max-width:1050px){.mockup-template-row{grid-template-columns:30px 190px minmax(0,1fr) 28px}.mockup-template-preview{width:190px;max-height:285px}}@media(max-width:640px){.mockup-template-row{grid-template-columns:30px minmax(0,1fr) 28px}.mockup-template-preview{grid-column:2;width:100%;max-width:300px;max-height:420px}.mockup-template-info{grid-column:2}.mockup-template-info label{grid-template-columns:1fr}.mockup-delete{grid-column:3;grid-row:1}.mockup-art-card{grid-template-columns:1fr}.mockup-art-card img{width:100%;height:220px}}


/* V4: compact 3-up template cards + no stretched previews */
.mockup-template-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.mockup-template-row{grid-template-columns:30px minmax(0,1fr) 24px;grid-template-areas:'check . delete' 'preview preview preview' 'info info info';gap:10px;align-content:start;min-height:100%;padding:10px}.mockup-check{grid-area:check;align-self:start}.mockup-check span{margin-top:0}.mockup-template-preview{grid-area:preview;width:100%;max-width:none;max-height:none;min-height:220px;display:grid;place-items:center;padding:8px;background:#090909}.mockup-template-preview img{width:100%;height:100%;max-height:320px;object-fit:contain;object-position:center}.mockup-template-info{grid-area:info;gap:4px}.mockup-delete{grid-area:delete;align-self:start;justify-self:end}.mockup-template-titleline{gap:3px}.mockup-template-info strong{font-size:13px}.mockup-template-meta{font-size:8px;line-height:1.2}.mockup-template-info label{grid-template-columns:72px minmax(0,1fr);font-size:8px}.mockup-template-info select{padding:6px 8px;font-size:10px}.mockup-results-grid,.mockup-saved-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.mockup-result>img{aspect-ratio:auto;height:260px;object-fit:contain;background:#050505}@media(max-width:1180px){.mockup-template-list{grid-template-columns:repeat(2,minmax(0,1fr))}.mockup-results-grid,.mockup-saved-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:700px){.mockup-template-list{grid-template-columns:1fr}.mockup-template-preview{min-height:180px}.mockup-results-grid,.mockup-saved-grid{grid-template-columns:1fr}}


/* V5: native-ratio previews + compact three-column desktop cards */
.mockup-template-list{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.mockup-template-row{align-self:start}.mockup-template-preview{min-height:0;padding:0;background:#070707;overflow:hidden}.mockup-template-preview img{display:block;width:100%;height:auto;max-height:none;object-fit:initial}.mockup-template-info strong{font-size:12px}.mockup-template-meta{font-size:7.5px}.mockup-template-info label{grid-template-columns:64px minmax(0,1fr);font-size:7.5px}.mockup-result>img{display:block;width:100%;height:auto;max-height:none;object-fit:initial}.mockup-results-grid{grid-template-columns:repeat(3,minmax(0,1fr))}@media(max-width:900px){.mockup-template-list,.mockup-results-grid{grid-template-columns:1fr}}

/* V10: sticky generation bar, side input rail, temporary results */
.mockup-hero{margin-bottom:12px;padding:18px 22px}.mockup-hero h1{font-size:30px}.mockup-commandbar{position:sticky;top:8px;z-index:30;display:grid;grid-template-columns:auto auto minmax(220px,1fr) auto;gap:16px;align-items:center;margin-bottom:14px;padding:12px 14px;border:1px solid rgba(214,149,37,.36);border-radius:14px;background:rgba(10,9,8,.96);box-shadow:0 14px 42px rgba(0,0,0,.34);backdrop-filter:blur(12px)}.mockup-command-summary{display:flex;align-items:center;gap:14px;flex-wrap:wrap;font-size:11px;color:#817970}.mockup-command-summary span{display:flex;align-items:center;gap:5px}.mockup-command-summary strong{color:#d7b36e}.mockup-command-summary strong[data-state=ready]{color:#7ddba0}.mockup-command-summary strong[data-state=missing]{color:#bc7b68}.mockup-power-control{display:grid;grid-template-columns:auto 112px auto;align-items:center;gap:7px;min-width:230px;padding:6px 9px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:rgba(255,255,255,.025);font-size:10px;color:#817970}.mockup-power-control>span{white-space:nowrap}.mockup-power-control input{width:112px;cursor:pointer}.mockup-power-control input:disabled{opacity:.45;cursor:not-allowed}.mockup-power-control strong{min-width:54px;color:#d7b36e;white-space:nowrap}.mockup-command-progress{min-width:0}.mockup-commandbar .mockup-progress{margin:0}.mockup-commandbar .mockup-progress p{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-bottom:0!important}.mockup-commandbar .mockup-status{min-height:0;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-commandbar .mockup-generate{width:auto;min-width:210px;margin:0;padding:12px 20px}.mockup-workspace{grid-template-columns:minmax(0,1fr) 360px;gap:14px}.mockup-template-panel{min-width:0}.mockup-input-rail{position:sticky;top:92px;display:grid;gap:12px;align-self:start}.mockup-compact-panel{padding:16px}.mockup-compact-panel .mockup-panel-head{margin-bottom:12px;gap:10px}.mockup-compact-panel .mockup-panel-head p{font-size:11px}.mockup-compact-panel .mockup-btn{padding:8px 10px;white-space:nowrap}.mockup-input-rail .mockup-form-grid{grid-template-columns:1fr;gap:9px}.mockup-input-rail .mockup-form-grid .wide{grid-column:auto}.mockup-input-rail .mockup-form-grid textarea{min-height:92px}.mockup-input-rail .mockup-art-card{grid-template-columns:92px minmax(0,1fr);gap:10px}.mockup-input-rail .mockup-art-card img{width:92px;height:92px}.mockup-input-rail .mockup-art-card strong{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-input-rail .mockup-art-card span{font-size:9px;line-height:1.35}.mockup-input-rail .mockup-note{line-height:1.45}.mockup-results{margin-top:14px}.mockup-result-actions{grid-template-columns:1fr 1.25fr .65fr}.mockup-result-actions .danger{border-color:rgba(224,123,108,.35);color:#d88b7e}.mockup-result-actions .danger:hover{border-color:rgba(224,123,108,.7);color:#ff9d8d}.mockup-results-head .mockup-btn{white-space:nowrap}
@media(max-width:1100px){.mockup-commandbar{top:6px;grid-template-columns:1fr auto}.mockup-command-progress{grid-column:1/-1;grid-row:2}.mockup-workspace{grid-template-columns:1fr}.mockup-input-rail{position:static;grid-template-columns:1fr 1fr}.mockup-input-rail .mockup-art-card{grid-template-columns:110px minmax(0,1fr)}.mockup-input-rail .mockup-art-card img{width:110px;height:110px}}
@media(max-width:700px){.mockup-commandbar{position:static;grid-template-columns:1fr}.mockup-power-control{grid-template-columns:auto minmax(90px,1fr) auto;min-width:0}.mockup-power-control input{width:100%}.mockup-commandbar .mockup-generate{width:100%;min-width:0}.mockup-command-progress{grid-column:auto;grid-row:auto}.mockup-input-rail{grid-template-columns:1fr}.mockup-input-rail .mockup-art-card{grid-template-columns:1fr}.mockup-input-rail .mockup-art-card img{width:100%;height:200px}.mockup-result-actions{grid-template-columns:1fr}}


/* V16: six-engine power control + black/gold range */
.mockup-power-control input[type=range]{--power-pct:20%;appearance:none;-webkit-appearance:none;height:7px;border-radius:999px;outline:none;background:linear-gradient(90deg,#c78b2b 0%,#efbd62 var(--power-pct),#17130e var(--power-pct),#17130e 100%);border:1px solid rgba(225,151,34,.32);box-shadow:inset 0 0 0 1px rgba(0,0,0,.42)}
.mockup-power-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;border-radius:50%;background:linear-gradient(145deg,#f2ca79,#b87319);border:2px solid #090806;box-shadow:0 0 0 1px rgba(225,151,34,.65);cursor:pointer}
.mockup-power-control input[type=range]::-moz-range-track{height:7px;border:0;border-radius:999px;background:#17130e}
.mockup-power-control input[type=range]::-moz-range-progress{height:7px;border-radius:999px;background:linear-gradient(90deg,#c78b2b,#efbd62)}
.mockup-power-control input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:linear-gradient(145deg,#f2ca79,#b87319);border:2px solid #090806;box-shadow:0 0 0 1px rgba(225,151,34,.65);cursor:pointer}

/* V20: three-level PSD library, automatic engines, collapsible workspace */
.mockup-commandbar.mockup-commandbar-auto{grid-template-columns:auto minmax(260px,1fr) auto}
.mockup-panel-actions{display:flex;align-items:center;justify-content:flex-end;gap:8px;flex-wrap:wrap}
.mockup-collapse{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(225,151,34,.32);border-radius:9px;background:#0d0b09;color:#ddb15d;cursor:pointer;font-size:17px;line-height:1}
.mockup-collapse:hover{border-color:rgba(225,151,34,.65);background:#17110b}
.mockup-upload-tools{display:flex;justify-content:flex-end;margin:0 0 10px}.mockup-upload-tools label{display:flex;align-items:center;gap:8px;font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#857c72}.mockup-upload-tools select{min-width:190px;background:#080808;color:#ddd3c6;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:8px 10px;font:inherit;font-size:11px}
.mockup-performance-tip{display:grid;grid-template-columns:auto 1fr;gap:10px;align-items:start;margin-top:10px;padding:10px 12px;border:1px solid rgba(225,151,34,.22);border-radius:10px;background:rgba(225,151,34,.045);font-size:10px;line-height:1.45}.mockup-performance-tip strong{color:#e0ad4f;white-space:nowrap}.mockup-performance-tip span{color:#91877c}
.mockup-folder-nav{display:flex;align-items:center;gap:8px;overflow-x:auto;padding:2px 0 10px;scrollbar-width:thin}.mockup-folder-wrap{display:flex;align-items:center;flex:0 0 auto;border:1px solid rgba(255,255,255,.08);border-radius:999px;background:#101010}.mockup-folder-wrap.dragging{opacity:.45}.mockup-folder-chip,.mockup-folder-new{display:flex;align-items:center;gap:7px;flex:0 0 auto;border:1px solid rgba(255,255,255,.09);border-radius:999px;padding:8px 12px;background:#101014;color:#938b83;cursor:pointer;font:inherit;font-size:10px;white-space:nowrap}.mockup-folder-wrap .mockup-folder-chip{border:0;background:transparent;border-radius:999px 0 0 999px}.mockup-folder-chip em{font-style:normal;font-size:9px;color:#67615b}.mockup-folder-chip.active{border-color:rgba(225,151,34,.48);background:rgba(91,46,15,.34);color:#f0b746}.mockup-folder-wrap:has(.mockup-folder-chip.active){border-color:rgba(225,151,34,.48);background:rgba(91,46,15,.22)}.mockup-folder-new{border-style:dashed;color:#c69442}.mockup-folder-delete{width:26px;height:30px;border:0;border-left:1px solid rgba(255,255,255,.07);background:transparent;color:#765f57;cursor:pointer;border-radius:0 999px 999px 0}.mockup-folder-delete:hover{color:#ef8d7d}
.mockup-template-folders{font-size:8px;color:#9c7945;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-template-folder-actions{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:6px;margin-top:4px}.mockup-template-folder-actions select{min-width:0;background:#080808;color:#bfb4a7;border:1px solid rgba(255,255,255,.09);border-radius:7px;padding:6px 7px;font:inherit;font-size:9px}.mockup-template-folder-actions button{border:1px solid rgba(225,151,34,.25);border-radius:7px;padding:6px 8px;background:#12100d;color:#c79c55;cursor:pointer;font:inherit;font-size:9px}.mockup-template-folder-actions button:hover{border-color:rgba(225,151,34,.55)}
.mockup-selected-panel{padding-bottom:16px}.mockup-selected-counter{display:inline-flex;align-items:center;height:32px;padding:0 10px;border:1px solid rgba(225,151,34,.25);border-radius:999px;color:#d7a653;font-size:10px;white-space:nowrap}.mockup-selected-strip{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:9px}.mockup-selected-card{position:relative;display:grid;grid-template-rows:auto auto;gap:6px;min-width:0;padding:7px;border:1px solid rgba(255,255,255,.08);border-radius:10px;background:rgba(255,255,255,.02)}.mockup-selected-card img,.mockup-selected-placeholder{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:7px;background:#060606}.mockup-selected-placeholder{display:grid;place-items:center;color:#746c63;font-size:10px}.mockup-selected-card strong{font-size:9px;color:#cfc4b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-selected-card button{position:absolute;top:4px;right:4px;width:24px;height:24px;border:1px solid rgba(0,0,0,.7);border-radius:50%;background:rgba(7,7,7,.86);color:#cf8d79;cursor:pointer}.mockup-selected-index{position:absolute;top:5px;left:5px;z-index:2;display:grid;place-items:center;width:21px;height:21px;border-radius:50%;background:rgba(6,6,6,.86);border:1px solid rgba(225,151,34,.4);color:#e5b156;font-size:8px}
.mockup-section>[data-collapse-body][hidden]{display:none!important}.mockup-section:has(>[data-collapse-body][hidden]){padding-bottom:13px}.mockup-section:has(>[data-collapse-body][hidden]) .mockup-panel-head{margin-bottom:0}
@media(max-width:1100px){.mockup-commandbar.mockup-commandbar-auto{grid-template-columns:1fr auto}.mockup-commandbar.mockup-commandbar-auto .mockup-command-progress{grid-column:1/-1}.mockup-selected-strip{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:700px){.mockup-commandbar.mockup-commandbar-auto{grid-template-columns:1fr}.mockup-upload-tools{justify-content:stretch}.mockup-upload-tools label{width:100%;display:grid}.mockup-upload-tools select{width:100%;min-width:0}.mockup-performance-tip{grid-template-columns:1fr}.mockup-selected-strip{grid-template-columns:repeat(2,minmax(0,1fr))}.mockup-template-folder-actions{grid-template-columns:1fr 1fr}.mockup-template-folder-actions select{grid-column:1/-1}}

/* V21: compact render bar, stronger library controls, verified PSD deletion */
.mockup-panel h2{margin-top:0}
.mockup-collapse{font-size:15px;font-weight:700;color:#e0ad4f;background:linear-gradient(180deg,#100d09,#080706)}
.mockup-collapse:hover{color:#ffd27a}

/* Keep native selects visually inside the black / gold Gatril Studio system. */
.mockup-studio select{-webkit-appearance:none;appearance:none;background-color:#080706!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%23d8a54a' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 10px center!important;background-size:10px 7px!important;padding-right:30px!important;border-color:rgba(225,151,34,.24)!important;box-shadow:inset 0 0 0 1px rgba(0,0,0,.3);color:#d8d0c6!important}
.mockup-studio select:hover{border-color:rgba(225,151,34,.48)!important}
.mockup-studio select:focus{outline:none;border-color:rgba(239,173,54,.78)!important;box-shadow:0 0 0 2px rgba(225,151,34,.11),inset 0 0 0 1px rgba(0,0,0,.35)}
.mockup-studio select option{background:#090806;color:#d8d0c6}

/* PSD metadata must remain readable at normal desktop zoom. */
.mockup-template-info strong{font-size:13px!important}
.mockup-template-meta{font-size:10px!important;line-height:1.35!important;color:#9a9288!important}
.mockup-template-folders{font-size:9.5px!important;line-height:1.3;color:#b48745}
.mockup-template-info label{font-size:9.5px!important;color:#a49a8e}
.mockup-template-info select{font-size:11px!important;padding-top:7px!important;padding-bottom:7px!important}
.mockup-template-folder-actions select,.mockup-template-folder-actions button{font-size:10px!important}
.mockup-delete{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(224,123,108,.16);border-radius:50%;background:rgba(8,7,6,.82);color:#a67465;font-size:18px;line-height:1;z-index:2}
.mockup-delete:hover{border-color:rgba(224,123,108,.55);background:#1a0e0b;color:#f09a87}
.mockup-delete:disabled{opacity:.35;cursor:wait}

/* Selected PSDs live in the sticky render bar instead of taking a full panel. */
.mockup-commandbar.mockup-commandbar-auto{grid-template-columns:auto minmax(430px,1.25fr) minmax(220px,.8fr) auto;gap:12px;align-items:center}
.mockup-command-summary{gap:11px;align-content:center}
.mockup-command-selected{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:9px;padding:5px 8px;border:1px solid rgba(255,255,255,.06);border-radius:10px;background:rgba(255,255,255,.018)}
.mockup-command-selected-head{display:grid;gap:2px;min-width:76px;font-size:9px;color:#827970;text-transform:uppercase;letter-spacing:.05em;line-height:1.15}
.mockup-command-selected-head strong{font-size:10px;color:#d9a64d;letter-spacing:0;text-transform:none}
.mockup-commandbar .mockup-selected-strip{display:flex;align-items:center;gap:5px;min-width:0;overflow-x:auto;padding:1px 0;scrollbar-width:thin}
.mockup-commandbar .mockup-selected-card{flex:0 0 68px;width:68px;display:grid;grid-template-rows:38px auto;gap:3px;padding:3px;border-radius:7px}
.mockup-commandbar .mockup-selected-card img,.mockup-commandbar .mockup-selected-placeholder{width:100%;height:38px;aspect-ratio:auto;object-fit:cover;border-radius:5px}
.mockup-commandbar .mockup-selected-card strong{font-size:7.5px;line-height:1.1}
.mockup-commandbar .mockup-selected-card button{top:2px;right:2px;width:18px;height:18px;font-size:11px}
.mockup-commandbar .mockup-selected-index{top:2px;left:2px;width:17px;height:17px;font-size:7px}
.mockup-commandbar .mockup-template-empty{padding:7px 9px;font-size:9px;white-space:nowrap}
.mockup-command-progress{align-self:center}
.mockup-commandbar .mockup-status[data-state=success]{font-size:11px;font-weight:600}

@media(max-width:1250px){
  .mockup-commandbar.mockup-commandbar-auto{grid-template-columns:auto minmax(360px,1fr) auto}
  .mockup-command-progress{grid-column:1/-1;grid-row:2}
}
@media(max-width:850px){
  .mockup-commandbar.mockup-commandbar-auto{grid-template-columns:1fr auto}
  .mockup-command-selected{grid-column:1/-1;grid-row:2}
  .mockup-command-progress{grid-column:1/-1;grid-row:3}
}
@media(max-width:700px){
  .mockup-commandbar.mockup-commandbar-auto{grid-template-columns:1fr}
  .mockup-command-selected{grid-column:auto;grid-row:auto;grid-template-columns:1fr}
  .mockup-command-progress{grid-column:auto;grid-row:auto}
  .mockup-commandbar .mockup-generate{width:100%}
}


/* V22: in-theme folder dialog + persistent drag ordering */
.mockup-folder-modal[hidden]{display:none!important}
.mockup-folder-modal{position:fixed;inset:0;z-index:12000;display:grid;place-items:center;padding:24px;background:rgba(0,0,0,.76);backdrop-filter:blur(5px)}
.mockup-folder-dialog{width:min(460px,calc(100vw - 32px));display:grid;gap:18px;padding:22px;border:1px solid rgba(225,151,34,.42);border-radius:16px;background:linear-gradient(180deg,#12100d,#080706);box-shadow:0 24px 80px rgba(0,0,0,.6),inset 0 1px rgba(255,255,255,.025);color:#d8d0c6}
.mockup-folder-dialog-head{display:grid;grid-template-columns:1fr auto;gap:16px;align-items:start}.mockup-folder-dialog-head h2{margin:3px 0 5px;color:#efb23e;font-family:Georgia,'Times New Roman',serif;font-size:25px;text-transform:uppercase}.mockup-folder-dialog-head p{margin:0;color:#8f867b;font-size:12px;line-height:1.45}
.mockup-folder-dialog-close{width:34px;height:34px;display:grid;place-items:center;border:1px solid rgba(225,151,34,.25);border-radius:9px;background:#0a0907;color:#b98b45;cursor:pointer;font:inherit;font-size:19px}.mockup-folder-dialog-close:hover{border-color:rgba(225,151,34,.55);color:#ffd078}
.mockup-folder-dialog-field{display:grid;gap:7px}.mockup-folder-dialog-field span{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:#9d8f7e}.mockup-folder-dialog-field input{width:100%;box-sizing:border-box;border:1px solid rgba(225,151,34,.28);border-radius:10px;background:#070706;color:#f0e8dc;padding:11px 12px;font:inherit;font-size:13px;outline:none}.mockup-folder-dialog-field input:focus{border-color:rgba(239,173,54,.78);box-shadow:0 0 0 3px rgba(225,151,34,.1)}
.mockup-folder-dialog-error{min-height:16px;color:#ef8f7d;font-size:11px}.mockup-folder-dialog-actions{display:flex;justify-content:flex-end;gap:9px}.mockup-modal-open{overflow:hidden}
.mockup-folder-nav{gap:8px}.mockup-folder-wrap{position:relative;transition:border-color .12s ease,box-shadow .12s ease,opacity .12s ease}.mockup-folder-wrap.drop-before{box-shadow:-4px 0 0 #d9a43f}.mockup-folder-wrap.drop-after{box-shadow:4px 0 0 #d9a43f}.mockup-folder-wrap.dragging{opacity:.38}
.mockup-folder-drag-handle{width:19px;height:19px;display:grid;place-items:center;flex:0 0 auto;margin-left:-3px;color:#8f7040;cursor:grab}.mockup-folder-drag-handle:active{cursor:grabbing}.mockup-folder-drag-handle svg{display:block;width:15px;height:13px;pointer-events:none}.mockup-folder-chip:hover .mockup-folder-drag-handle,.mockup-folder-chip.active .mockup-folder-drag-handle{color:#e0aa4c}
.mockup-folder-new{border-color:rgba(225,151,34,.18);background:#0b0a08}.mockup-folder-new:hover{border-color:rgba(225,151,34,.46);background:#151009;color:#efb64e}


/* V23: integrated selected strip, single selection count, adaptive large thumbnails */
.mockup-commandbar.mockup-commandbar-auto{grid-template-columns:auto minmax(520px,1.5fr) minmax(180px,.65fr) auto;gap:14px}
.mockup-command-summary{min-width:max-content}
.mockup-command-selected{min-width:0;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:10px;padding:0;border:0;border-radius:0;background:transparent}
.mockup-command-selected-head{display:flex;align-items:baseline;gap:7px;min-width:max-content;font-size:9px;color:#827970;text-transform:uppercase;letter-spacing:.05em;line-height:1.1}
.mockup-command-selected-head strong{font-size:11px;color:#d9a64d;letter-spacing:0;text-transform:none}
.mockup-commandbar .mockup-selected-strip{display:grid;grid-template-columns:repeat(var(--selected-count,1),minmax(0,1fr));align-items:start;gap:7px;min-width:0;overflow:hidden;padding:0;scrollbar-width:none}
.mockup-commandbar .mockup-selected-strip::-webkit-scrollbar{display:none}
.mockup-commandbar .mockup-selected-card{justify-self:start;width:min(100%,160px);min-width:0;display:grid;grid-template-rows:64px 13px;gap:4px;padding:0;border:0;border-radius:0;background:transparent}
.mockup-commandbar .mockup-selected-card img,.mockup-commandbar .mockup-selected-placeholder{display:block;width:100%;height:64px;aspect-ratio:auto;object-fit:contain;border:1px solid rgba(225,151,34,.18);border-radius:6px;background:#050505}
.mockup-commandbar .mockup-selected-placeholder{display:grid;place-items:center;color:#746c63;font-size:10px}
.mockup-commandbar .mockup-selected-card strong{font-size:8.5px;line-height:1.1;color:#cfc4b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-commandbar .mockup-selected-card button{top:2px;right:2px;width:19px;height:19px;font-size:11px}
.mockup-commandbar .mockup-selected-index{top:2px;left:2px;width:18px;height:18px;font-size:7.5px}
.mockup-commandbar .mockup-template-empty{padding:5px 0;font-size:9px;white-space:nowrap}
@media(max-width:1250px){
  .mockup-commandbar.mockup-commandbar-auto{grid-template-columns:auto minmax(420px,1fr) auto}
  .mockup-command-progress{grid-column:1/-1;grid-row:2}
  .mockup-commandbar .mockup-selected-card{grid-template-rows:58px 13px}
  .mockup-commandbar .mockup-selected-card img,.mockup-commandbar .mockup-selected-placeholder{height:58px}
}
@media(max-width:850px){
  .mockup-commandbar.mockup-commandbar-auto{grid-template-columns:1fr auto}
  .mockup-command-selected{grid-column:1/-1;grid-row:2}
  .mockup-command-progress{grid-column:1/-1;grid-row:3}
}
@media(max-width:700px){
  .mockup-commandbar.mockup-commandbar-auto{grid-template-columns:1fr}
  .mockup-command-selected{grid-column:auto;grid-row:auto;grid-template-columns:1fr}
  .mockup-command-selected-head{justify-content:space-between}
  .mockup-command-progress{grid-column:auto;grid-row:auto}
  .mockup-commandbar .mockup-generate{width:100%}
  .mockup-commandbar .mockup-selected-card{grid-template-rows:50px 12px}
  .mockup-commandbar .mockup-selected-card img,.mockup-commandbar .mockup-selected-placeholder{height:50px}
}


/* V24: centered selected names + click-to-inspect large PSD preview */
.mockup-commandbar .mockup-selected-card strong{text-align:center;width:100%;font-size:8.5px;line-height:1.1;color:#cfc4b8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-commandbar .mockup-selected-card .mockup-selected-preview{position:static;display:block;width:100%;height:64px;padding:0;border:0;border-radius:6px;background:#050505;color:inherit;cursor:zoom-in;overflow:hidden}
.mockup-commandbar .mockup-selected-card .mockup-selected-preview img{width:100%;height:100%;object-fit:contain;border:1px solid rgba(225,151,34,.18);border-radius:6px;background:#050505}
.mockup-commandbar .mockup-selected-card .mockup-selected-preview:hover img{border-color:rgba(225,151,34,.5)}
.mockup-commandbar .mockup-selected-card .mockup-selected-preview:focus-visible{outline:2px solid #d99b2b;outline-offset:2px}
.mockup-commandbar .mockup-selected-card .mockup-selected-remove{position:absolute;top:2px;right:2px;width:19px;height:19px;padding:0;border:1px solid rgba(0,0,0,.7);border-radius:50%;background:rgba(7,7,7,.88);color:#cf8d79;cursor:pointer;z-index:3}
.mockup-selected-preview-modal[hidden]{display:none!important}
.mockup-selected-preview-modal{position:fixed;inset:0;z-index:10050;display:grid;place-items:center;padding:28px;background:rgba(0,0,0,.86);backdrop-filter:blur(5px)}
.mockup-selected-preview-dialog{position:relative;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:10px;width:min(1180px,92vw);max-height:90vh;padding:14px;border:1px solid rgba(225,151,34,.34);border-radius:16px;background:#090908;box-shadow:0 22px 70px rgba(0,0,0,.62)}
.mockup-selected-preview-stage{display:grid;place-items:center;min-height:260px;max-height:78vh;overflow:hidden;border:1px solid rgba(255,255,255,.07);border-radius:11px;background:#030303}
.mockup-selected-preview-stage img{display:block;max-width:100%;max-height:78vh;width:auto;height:auto;object-fit:contain}
.mockup-selected-preview-dialog>strong{display:block;min-width:0;padding:0 44px 2px;text-align:center;color:#e4d8ca;font-size:13px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-selected-preview-close{position:absolute;top:9px;right:9px;z-index:2;width:34px;height:34px;padding:0;border:1px solid rgba(225,151,34,.3);border-radius:50%;background:rgba(8,8,7,.92);color:#e9b24d;font-size:20px;line-height:1;cursor:pointer}
.mockup-selected-preview-close:hover{border-color:rgba(225,151,34,.7);background:#161109}
@media(max-width:1250px){.mockup-commandbar .mockup-selected-card .mockup-selected-preview{height:58px}}
@media(max-width:700px){.mockup-commandbar .mockup-selected-card .mockup-selected-preview{height:50px}.mockup-selected-preview-modal{padding:12px}.mockup-selected-preview-dialog{width:96vw;padding:10px}.mockup-selected-preview-stage{min-height:180px;max-height:72vh}.mockup-selected-preview-stage img{max-height:72vh}}

/* V25: PSD Smart Object ratio + persistent collapsible template notes */
.mockup-template-notes{margin-top:5px;border:1px solid rgba(225,151,34,.16);border-radius:8px;background:#0a0908;overflow:hidden}
.mockup-template-notes summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:30px;padding:6px 9px;color:#c79c55;font-size:10px;cursor:pointer;user-select:none}
.mockup-template-notes summary::-webkit-details-marker{display:none}
.mockup-template-notes summary::after{content:'▾';margin-left:auto;color:#d5a64d;font-size:10px;transition:transform .15s ease}
.mockup-template-notes[open] summary::after{transform:rotate(180deg)}
.mockup-template-notes summary em{order:2;color:#766f67;font-size:9px;font-style:normal;font-variant-numeric:tabular-nums}
.mockup-template-note-body{padding:0 8px 8px}
.mockup-template-note-body textarea{display:block;width:100%;min-height:76px;max-height:150px;resize:vertical;box-sizing:border-box;border:1px solid rgba(255,255,255,.09);border-radius:7px;background:#060606;color:#d8d0c7;padding:8px 9px;font:inherit;font-size:10px;line-height:1.45;outline:none}
.mockup-template-note-body textarea:focus{border-color:rgba(225,151,34,.55);box-shadow:0 0 0 2px rgba(225,151,34,.08)}
.mockup-template-note-body textarea::placeholder{color:#5f5953}


/* V26: cleaner PSD card control grouping */
.mockup-template-row{align-items:start}
.mockup-template-info{gap:8px!important}
.mockup-template-titleline{display:grid;gap:4px!important}
.mockup-template-meta{font-size:10px!important;line-height:1.4!important;color:#a39a90!important}
.mockup-template-folder-chip{display:inline-flex;align-items:center;justify-self:start;gap:6px;max-width:100%;min-height:24px;padding:0 10px;border:1px solid rgba(225,151,34,.18);border-radius:999px;background:rgba(225,151,34,.06);color:#d1a45b;font-size:10px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-template-folder-chip::before{content:'Folder';display:inline-block;color:#8d7f6d;letter-spacing:.04em;text-transform:uppercase;font-size:9px}
.mockup-template-stack{display:grid;gap:8px;min-width:0}
.mockup-template-block{display:grid!important;grid-template-columns:1fr!important;gap:6px!important;min-width:0;margin:0!important}
.mockup-template-field-label{display:block;color:#8f8477;font-size:10px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.mockup-template-block select,.mockup-template-folder-actions select,.mockup-template-folder-actions button{min-height:36px}
.mockup-template-block select{width:100%;background:#080808;color:#ddd3c6;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:9px 10px;font:inherit;font-size:12px}
.mockup-template-notes{margin-top:0!important}
.mockup-template-divider{height:1px;background:linear-gradient(90deg,rgba(225,151,34,.18),rgba(255,255,255,.04));border-radius:999px;margin:2px 0 1px}
.mockup-template-folder-actions{display:grid!important;grid-template-columns:minmax(0,1fr) auto auto;gap:8px!important;align-items:center;margin-top:0!important}
.mockup-template-folder-actions select{min-width:0;background:#080808;color:#ddd3c6;border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:9px 10px;font:inherit;font-size:12px}
.mockup-template-folder-actions button{border:1px solid rgba(225,151,34,.28);border-radius:8px;padding:0 12px;background:#12100d;color:#d2a75a;cursor:pointer;font:inherit;font-size:11px;white-space:nowrap}
.mockup-template-folder-actions button:hover{border-color:rgba(225,151,34,.55)}
.mockup-template-notes summary{min-height:34px;padding:7px 10px;font-size:11px}
.mockup-template-notes summary em{font-size:10px}
.mockup-template-note-body{padding:0 10px 10px}
.mockup-template-note-body textarea{min-height:88px;padding:10px 11px;font-size:11px;line-height:1.5}
@media(max-width:860px){
  .mockup-template-folder-actions{grid-template-columns:1fr 1fr!important}
  .mockup-template-folder-actions select{grid-column:1/-1}
}


/* V27: MWH-style checkbox folder assignment for PSD cards */
.mockup-template-folder-picker{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:38px;padding:8px 10px;border:1px solid rgba(225,151,34,.26);border-radius:8px;background:#0b0a08;color:#d8cbbd;cursor:pointer;font:inherit;text-align:left}
.mockup-template-folder-picker:hover{border-color:rgba(225,151,34,.55);background:#110e0a}
.mockup-template-folder-picker span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:11px}
.mockup-template-folder-picker em{font-style:normal;color:#d6a44e;font-size:10px;white-space:nowrap}
.mockup-template-folder-popover[hidden]{display:none!important}
.mockup-template-folder-popover{position:fixed;z-index:12020;min-width:300px;max-width:min(390px,calc(100vw - 24px))}
.mockup-template-folder-menu{display:grid;gap:12px;padding:14px;border:1px solid rgba(225,151,34,.38);border-radius:12px;background:linear-gradient(180deg,#121116,#0b0a0f);box-shadow:0 18px 55px rgba(0,0,0,.72);color:#d8d0c6}
.mockup-template-folder-dialog-head{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:start;padding-bottom:10px;border-bottom:1px solid rgba(255,255,255,.07)}
.mockup-template-folder-dialog-head h2{margin:2px 0 4px;color:#e7ddd0;font-size:16px;font-family:inherit;text-transform:uppercase;letter-spacing:.04em}
.mockup-template-folder-dialog-head p{margin:0;max-width:310px;color:#766f69;font-size:10px;line-height:1.35;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-template-folder-dialog-close{width:30px;height:30px;display:grid;place-items:center;border:1px solid rgba(225,151,34,.24);border-radius:8px;background:#0a0908;color:#b98b45;cursor:pointer;font:inherit;font-size:17px}
.mockup-template-folder-list{display:grid;gap:3px;max-height:min(360px,48vh);overflow-y:auto;overflow-x:hidden;padding:2px;scrollbar-width:none}.mockup-template-folder-list::-webkit-scrollbar{display:none}
.mockup-template-folder-choice{position:relative;display:grid;grid-template-columns:20px 24px minmax(0,1fr);align-items:center;gap:10px;min-height:46px;padding:7px 8px;border-radius:8px;color:#cfc6bc;cursor:pointer;transition:background .12s ease}
.mockup-template-folder-choice:hover{background:rgba(255,255,255,.035)}
.mockup-template-folder-choice.fixed{color:#958b81;cursor:default;background:rgba(255,255,255,.015)}
.mockup-template-folder-choice input{position:absolute;opacity:0;pointer-events:none}
.mockup-template-folder-check{width:16px;height:16px;border:1px solid #4b4954;border-radius:4px;background:#111116;box-sizing:border-box}
.mockup-template-folder-choice input:checked+.mockup-template-folder-check{border-color:#d59d38;background:linear-gradient(135deg,#a86516,#e1a33b);box-shadow:inset 0 0 0 3px #111015}
.mockup-template-folder-choice.fixed input:checked+.mockup-template-folder-check{opacity:.65}
.mockup-template-folder-icon{width:22px;height:18px;border:1px solid #34333c;border-radius:4px;background:#17171d;position:relative;box-sizing:border-box}
.mockup-template-folder-icon::before{content:'';position:absolute;left:3px;top:-4px;width:9px;height:5px;border:1px solid #34333c;border-bottom:0;border-radius:3px 3px 0 0;background:#17171d}
.mockup-template-folder-choice-text{display:grid;gap:2px;min-width:0}
.mockup-template-folder-choice-text strong{font-size:12px;color:inherit;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-template-folder-choice-text small{font-size:9px;color:#6d665f}
.mockup-template-folder-empty{padding:14px 10px;color:#756e66;font-size:10px;text-align:center}
.mockup-template-folder-dialog-actions{display:flex;justify-content:flex-end;gap:8px;padding-top:10px;border-top:1px solid rgba(255,255,255,.07)}

@media(max-width:640px){.mockup-template-folder-popover{min-width:min(300px,calc(100vw - 24px));max-width:calc(100vw - 24px)}}


/* V29: public Mockup Tools branding card */
.mockup-brand-card{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:11px;min-width:210px;padding:8px 10px;border:1px solid rgba(225,151,34,.38);border-radius:12px;background:linear-gradient(145deg,rgba(19,17,13,.96),rgba(8,8,7,.96));color:#d8d0c6;text-decoration:none;box-shadow:0 10px 28px rgba(0,0,0,.22);transition:border-color .16s ease,transform .16s ease,background .16s ease}
.mockup-brand-card:hover{border-color:rgba(225,151,34,.7);background:linear-gradient(145deg,rgba(25,21,14,.98),rgba(10,9,7,.98));transform:translateY(-1px)}
.mockup-brand-logo{width:54px;height:54px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(225,151,34,.2);border-radius:10px;background:#080807}
.mockup-brand-logo img{display:block;width:100%;height:100%;object-fit:contain;padding:4px;box-sizing:border-box}
.mockup-brand-fallback{font-family:Cinzel,serif;color:#e5aa37;font-size:17px;font-weight:700;letter-spacing:.03em}
.mockup-brand-copy{display:grid;gap:2px;min-width:0}
.mockup-brand-copy small{color:#7f776d;font-size:9px;line-height:1;text-transform:uppercase;letter-spacing:.09em}
.mockup-brand-copy strong{color:#e2d7c8;font-size:13px;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-brand-arrow{color:#d5a249;font-size:15px}
@media(max-width:640px){.mockup-brand-card{min-width:0;width:100%;grid-template-columns:46px minmax(0,1fr) auto}.mockup-brand-logo{width:46px;height:46px}}


/* V30: selected-result Share Mockups panel + centered Gatril Studio hero link */
.mockup-brand-side{display:grid;justify-items:center;align-content:center;gap:4px;min-width:230px;text-align:center}
.mockup-brand-side>strong{color:#d9aa57;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.mockup-brand-side>span{color:#80776d;font-size:10px;line-height:1.35}
.mockup-brand-side .mockup-brand-card{margin-top:5px;min-width:205px}
.mockup-brand-side .mockup-brand-copy strong{font-size:12px}
.mockup-share-selection{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px;padding:8px 10px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.02)}
.mockup-share-selection strong{color:#dbad5b;font-size:11px}.mockup-share-selection span{color:#746d65;font-size:9px;text-align:right}
.mockup-share-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;margin-bottom:12px;padding:4px;border:1px solid rgba(255,255,255,.07);border-radius:10px;background:#080807}
.mockup-share-tabs button{min-height:32px;border:1px solid transparent;border-radius:7px;background:transparent;color:#837a70;cursor:pointer;font:inherit;font-size:10px}
.mockup-share-tabs button:hover{color:#d2b47e}.mockup-share-tabs button.active{border-color:rgba(225,151,34,.34);background:rgba(225,151,34,.09);color:#e1b55f}
.mockup-share-pane[hidden]{display:none!important}.mockup-share-pane{display:grid;gap:11px}
.mockup-connect-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;padding:9px 10px;border:1px solid rgba(225,151,34,.14);border-radius:9px;background:#0a0908}
.mockup-connect-row>div{display:grid;gap:2px;min-width:0}.mockup-connect-row>div strong{font-size:11px;color:#d6c9bb}.mockup-connect-row>div span{font-size:9px;color:#786f66;line-height:1.35}.mockup-connect-row .mockup-btn{grid-column:2;grid-row:1;align-self:center}.mockup-connect-row .mockup-btn[hidden]{display:none!important}
.mockup-share-form{grid-template-columns:1fr!important;gap:9px!important}.mockup-share-form .wide{grid-column:auto!important}
.mockup-share-primary{width:100%;min-height:38px;border:1px solid #f27632;border-radius:9px;background:linear-gradient(90deg,#d74d16,#ef6a1e);color:#fff3df;font:inherit;font-size:11px;font-weight:700;cursor:pointer}.mockup-share-primary:disabled{opacity:.36;cursor:not-allowed;filter:saturate(.4)}
.mockup-share-drive-copy{display:grid;gap:5px;padding:11px;border:1px solid rgba(255,255,255,.07);border-radius:9px;background:rgba(255,255,255,.02)}.mockup-share-drive-copy strong{color:#dbcdbd;font-size:11px}.mockup-share-drive-copy span{color:#7e756c;font-size:9px;line-height:1.5}
.mockup-result{position:relative;transition:border-color .15s ease,box-shadow .15s ease}.mockup-result.selected{border-color:rgba(225,151,34,.42);box-shadow:0 0 0 1px rgba(225,151,34,.08)}
.mockup-result-check{position:absolute;z-index:3;top:9px;left:9px;display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(225,151,34,.34);border-radius:8px;background:rgba(7,7,7,.9);cursor:pointer;box-shadow:0 4px 14px rgba(0,0,0,.35)}
.mockup-result-check input{position:absolute;opacity:0}.mockup-result-check span{width:16px;height:16px;border:1px solid rgba(225,151,34,.48);border-radius:4px;background:#0c0b09}.mockup-result-check input:checked+span{background:linear-gradient(135deg,#d36b16,#e5aa33);box-shadow:inset 0 0 0 3px #0b0a08}
.mockup-result-actions{grid-template-columns:1fr auto!important}.mockup-result-actions .danger{min-width:72px}
@media(max-width:640px){.mockup-brand-side{width:100%;min-width:0}.mockup-brand-side .mockup-brand-card{width:100%}.mockup-share-selection{align-items:flex-start;flex-direction:column}.mockup-share-selection span{text-align:left}}


/* V31: in-card Gatril copy + per-mockup share actions */
.mockup-brand-side{min-width:255px}
.mockup-brand-side>strong,.mockup-brand-side>span{display:none}
.mockup-brand-side .mockup-brand-card{margin-top:0;min-width:245px;grid-template-columns:54px minmax(0,1fr) auto;padding:10px 12px;text-align:left}
.mockup-brand-copy{display:grid;gap:2px;min-width:0}
.mockup-brand-kicker{color:#d9aa57;font-size:8.5px;letter-spacing:.1em;text-transform:uppercase}
.mockup-brand-copy strong{font-size:12px!important;color:#eee2d4}
.mockup-brand-copy small{color:#80776d;font-size:9px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-share-status{min-height:0;margin:-4px 0 8px;padding:0 2px;white-space:normal;line-height:1.35}
.mockup-result-actions{grid-template-columns:minmax(0,1fr) auto auto!important;align-items:center}
.mockup-result-share-icons{display:flex;align-items:center;gap:5px}
.mockup-result-share-icon{display:grid;place-items:center;width:31px;height:31px;padding:0!important;border:1px solid rgba(225,151,34,.3)!important;border-radius:8px!important;background:#11100d!important;color:#d8b064!important;cursor:pointer}
.mockup-result-share-icon:hover{border-color:rgba(225,151,34,.65)!important;background:#18140e!important;color:#efc06b!important}
.mockup-result-share-icon.pinterest{border-color:rgba(194,54,67,.42)!important;color:#e68a94!important}
.mockup-result-share-icon.pinterest:hover{border-color:rgba(214,69,84,.75)!important;color:#ff9eaa!important}
.mockup-result-share-icon svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.mockup-share-icon-letter{display:grid;place-items:center;width:17px;height:17px;border:1px solid currentColor;border-radius:50%;font-size:10px;font-weight:800;line-height:1}
.mockup-result-share-icon.working{opacity:.55;animation:mockupSharePulse .8s ease-in-out infinite alternate}
@keyframes mockupSharePulse{to{opacity:1}}
@media(max-width:640px){.mockup-brand-side{min-width:0}.mockup-brand-side .mockup-brand-card{min-width:0}.mockup-result-actions{grid-template-columns:1fr!important}.mockup-result-share-icons{justify-content:center}.mockup-result-share-icon{width:36px;height:36px}}


/* V32: Pinterest + Download only; builder-style per-mockup Pinterest action */
.mockup-result-actions.mockup-result-actions-simple{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center}
.mockup-builder-action{min-height:31px;padding:7px 12px!important;border:1px solid rgba(225,151,34,.42)!important;border-radius:8px!important;background:#15120e!important;color:#e8b456!important;font:inherit!important;font-size:10px!important;font-weight:600!important;white-space:nowrap;cursor:pointer}
.mockup-builder-action:hover{border-color:rgba(225,151,34,.72)!important;background:#1c160e!important;color:#f3c36b!important}
.mockup-builder-action:disabled{opacity:.5;cursor:wait}
.mockup-builder-action.pinterest{border-color:rgba(225,151,34,.42)!important;color:#e8b456!important}
@media(max-width:640px){.mockup-result-actions.mockup-result-actions-simple{grid-template-columns:1fr 1fr}.mockup-result-actions.mockup-result-actions-simple [data-download]{grid-column:1/-1}}


/* V33: builder Pinterest icon + uncluttered Pinterest batch copy */
.mockup-share-selection[data-pinterest-batch]{display:block;margin-bottom:10px;padding:8px 10px}
.mockup-share-selection[data-pinterest-batch][hidden],.mockup-share-primary[data-pinterest-batch][hidden]{display:none!important}
.mockup-share-selection[data-pinterest-batch] strong{display:block;line-height:1.35}
.mockup-result-actions.mockup-result-actions-simple{grid-template-columns:minmax(0,1fr) 36px auto}
.mockup-pinterest-icon-button{display:grid!important;place-items:center!important;width:36px!important;height:32px!important;min-height:32px!important;padding:0!important;border:1px solid rgba(225,151,34,.42)!important;border-radius:8px!important;background:#15120e!important;color:#e8b456!important;cursor:pointer}
.mockup-pinterest-icon-button:hover{border-color:rgba(225,151,34,.72)!important;background:#1c160e!important}
.mockup-social-glyph{display:grid;place-items:center;width:20px;height:20px;line-height:0}
.mockup-social-glyph .social-brand-img,.mockup-social-glyph img{display:block;width:20px;height:20px;object-fit:contain}
@media(max-width:640px){.mockup-result-actions.mockup-result-actions-simple{grid-template-columns:minmax(0,1fr) 36px auto!important}.mockup-result-actions.mockup-result-actions-simple [data-download]{grid-column:auto!important}}


/* V34: Pinterest quick-share stability + connection card spacing */
.mockup-connect-row{margin-bottom:14px!important;align-items:start!important;position:relative!important;overflow:visible!important}
.mockup-connect-row>div{padding-right:4px;align-self:start}
.mockup-connect-row>div strong{display:block;line-height:1.35}
.mockup-connect-row>div span{display:block;line-height:1.45!important;margin-top:2px}
.mockup-connect-row .mockup-btn{grid-column:2!important;grid-row:1!important;align-self:center!important;position:static!important}
.mockup-share-form{margin-top:0!important;position:relative!important;z-index:0!important}
.mockup-share-form label:first-child{margin-top:0!important}
.mockup-share-status:empty{display:none!important}
.mockup-share-status{margin:0 0 10px!important}
.mockup-pinterest-icon-button.working{opacity:.58;animation:mockupSharePulse .8s ease-in-out infinite alternate}
@media(max-width:360px){.mockup-connect-row{grid-template-columns:1fr!important}.mockup-connect-row .mockup-btn{grid-column:1!important;grid-row:auto!important;justify-self:start}}


/* V35: portable PSD library packs */
.mockup-folder-wrap.mockup-folder-all .mockup-folder-chip{border-radius:999px 0 0 999px}
.mockup-folder-export{width:30px;height:30px;display:grid;place-items:center;flex:0 0 auto;border:0;border-left:1px solid rgba(255,255,255,.07);background:transparent;color:#9f7940;cursor:pointer}
.mockup-folder-export svg{width:15px;height:15px;display:block;pointer-events:none}
.mockup-folder-export:hover{color:#f0b746;background:rgba(225,151,34,.05)}
.mockup-folder-all .mockup-folder-export{border-radius:0 999px 999px 0}
.mockup-folder-import{color:#d0a054;border-color:rgba(225,151,34,.24)}
.mockup-folder-import:hover{color:#f0b746}


/* V36: bounded folder names + scalable folder strip */
.mockup-folder-nav{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;max-width:100%;min-width:0;overflow:hidden!important;padding:2px 0 10px!important}
.mockup-folder-tools{display:flex;align-items:center;gap:8px;min-width:max-content}
.mockup-folder-scroll-shell{display:grid;grid-template-columns:28px minmax(0,1fr) 28px;align-items:center;gap:4px;min-width:0;max-width:100%;overflow:hidden}
.mockup-folder-scroll{display:flex;align-items:center;gap:8px;min-width:0;max-width:100%;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-inline:contain;padding:1px 0}
.mockup-folder-scroll::-webkit-scrollbar{display:none;width:0;height:0}
.mockup-folder-scroll-btn{width:28px;height:30px;display:none;place-items:center;border:1px solid rgba(225,151,34,.18);border-radius:8px;background:#0b0a08;color:#b8893c;cursor:pointer;font:inherit;font-size:18px;line-height:1;transition:border-color .12s ease,color .12s ease,background .12s ease}
.mockup-folder-scroll-shell.has-overflow .mockup-folder-scroll-btn{display:grid}
.mockup-folder-scroll-btn:hover{border-color:rgba(225,151,34,.5);color:#f0b746;background:#151009}
.mockup-folder-scroll .mockup-folder-wrap{max-width:238px;min-width:0}
.mockup-folder-scroll .mockup-folder-chip{min-width:0;max-width:181px}
.mockup-folder-name{display:block;min-width:0;max-width:128px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:900px){
  .mockup-folder-nav{grid-template-columns:1fr!important;align-items:stretch}
  .mockup-folder-tools{min-width:0;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .mockup-folder-tools::-webkit-scrollbar{display:none}
}


/* V37: library controls in header, folder collection gets its own full row */
.mockup-library-head{align-items:center!important;gap:18px!important}
.mockup-library-copy{min-width:0}
.mockup-library-head-actions{display:flex!important;align-items:center!important;justify-content:flex-end;gap:10px!important;margin-left:auto;min-width:0}
.mockup-library-tools{display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0}
.mockup-library-tools .mockup-folder-wrap,.mockup-library-tools .mockup-folder-new{flex:0 0 auto}
.mockup-folder-all-featured{border-color:rgba(235,166,48,.72)!important;background:linear-gradient(180deg,rgba(132,75,15,.78),rgba(72,39,10,.78))!important;box-shadow:0 0 0 1px rgba(235,166,48,.08),0 7px 20px rgba(0,0,0,.22)}
.mockup-folder-all-featured .mockup-folder-chip{color:#ffd16e!important;font-weight:700}
.mockup-folder-all-featured .mockup-folder-chip em{color:#dcae55!important}
.mockup-folder-all-featured:has(.mockup-folder-chip.active){border-color:#e8ad3f!important;background:linear-gradient(180deg,rgba(170,92,17,.92),rgba(92,47,10,.9))!important}
.mockup-folder-new-prominent,.mockup-folder-import-prominent{min-height:32px;padding:8px 13px!important;border:1px solid rgba(225,151,34,.42)!important;border-style:solid!important;background:linear-gradient(180deg,#171108,#0d0a06)!important;color:#e6b14e!important;font-weight:650;box-shadow:inset 0 0 0 1px rgba(255,255,255,.018)}
.mockup-folder-new-prominent:hover,.mockup-folder-import-prominent:hover{border-color:rgba(239,177,66,.78)!important;color:#ffd477!important;background:linear-gradient(180deg,#21170a,#120d07)!important}
.mockup-folder-import-prominent{background:linear-gradient(180deg,rgba(78,48,13,.52),rgba(28,19,8,.82))!important}
.mockup-folder-nav-only{display:block!important;max-width:100%;min-width:0;overflow:hidden!important;padding:8px 0 10px!important}
.mockup-folder-nav-only .mockup-folder-scroll-shell{width:100%;max-width:none;grid-template-columns:32px minmax(0,1fr) 32px;gap:6px}
.mockup-folder-nav-only .mockup-folder-scroll{width:100%}
.mockup-folder-nav-only .mockup-folder-scroll .mockup-folder-wrap{max-width:248px}
.mockup-folder-nav-only .mockup-folder-scroll .mockup-folder-chip{max-width:190px}
@media(max-width:1100px){
  .mockup-library-head{align-items:flex-start!important}
  .mockup-library-head-actions{flex-wrap:wrap}
  .mockup-library-tools{flex-wrap:wrap;justify-content:flex-end}
}
@media(max-width:760px){
  .mockup-library-head{grid-template-columns:1fr!important;align-items:stretch!important}
  .mockup-library-head-actions{width:100%;justify-content:space-between;margin-left:0}
  .mockup-library-tools{justify-content:flex-start;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}
  .mockup-library-tools::-webkit-scrollbar{display:none}
}


/* V38: site-native folder delete confirmation + matching upload icon */
.mockup-folder-import-prominent svg{width:15px;height:15px;display:block;flex:0 0 auto}
.mockup-folder-import-prominent span{display:block}
.mockup-folder-delete-dialog{gap:16px}
.mockup-folder-delete-dialog #mockupFolderDeleteName{max-width:360px;color:#d5c5b1;font-size:12px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-folder-delete-message{display:grid;gap:5px;padding:13px 14px;border:1px solid rgba(225,151,34,.18);border-radius:11px;background:rgba(225,151,34,.045)}
.mockup-folder-delete-message strong{color:#e7c681;font-size:12px}
.mockup-folder-delete-message span{color:#92877b;font-size:11px;line-height:1.45}
.mockup-btn-danger{border-color:rgba(218,92,72,.5)!important;background:linear-gradient(180deg,#3a1712,#24100d)!important;color:#f0a093!important}
.mockup-btn-danger:hover{border-color:rgba(239,117,95,.8)!important;background:linear-gradient(180deg,#4a1c16,#2c120f)!important;color:#ffc1b6!important}
.mockup-btn-danger:disabled{opacity:.55;cursor:wait}


/* V39: PSD batch selection hit target is strictly the visible checkbox only */
.mockup-check{
  display:inline-grid!important;
  place-items:center;
  width:20px!important;
  height:20px!important;
  min-width:20px!important;
  min-height:20px!important;
  justify-self:start!important;
  align-self:start!important;
  position:relative;
  overflow:hidden;
  cursor:pointer;
}
.mockup-check input{
  position:absolute!important;
  inset:0!important;
  width:20px!important;
  height:20px!important;
  margin:0!important;
  padding:0!important;
  opacity:0;
  cursor:pointer;
}
.mockup-check span{
  width:18px!important;
  height:18px!important;
  margin:0!important;
  pointer-events:none;
}

/* V40: MWH-inspired metallic copper primary actions */
.mockup-btn.primary,
.mockup-generate,
.mockup-share-primary{
  border-color:rgba(214,126,72,.82)!important;
  background:
    linear-gradient(180deg,rgba(255,224,194,.24) 0%,rgba(255,255,255,.045) 24%,rgba(0,0,0,.10) 72%,rgba(0,0,0,.24) 100%),
    linear-gradient(100deg,#71331f 0%,#9b4728 20%,#c86436 47%,#df8050 64%,#a64d2d 84%,#6b3020 100%)!important;
  color:#120b07!important;
  box-shadow:
    inset 0 1px 0 rgba(255,232,208,.34),
    inset 0 -1px 0 rgba(70,24,13,.68),
    0 5px 14px rgba(0,0,0,.24)!important;
  text-shadow:0 1px 0 rgba(255,224,196,.22);
  transition:border-color .15s ease,filter .15s ease,box-shadow .15s ease,transform .15s ease;
}
.mockup-btn.primary:hover,
.mockup-generate:hover:not(:disabled),
.mockup-share-primary:hover:not(:disabled){
  border-color:rgba(237,157,103,.96)!important;
  filter:brightness(1.08) saturate(1.03);
  box-shadow:
    inset 0 1px 0 rgba(255,240,220,.42),
    inset 0 -1px 0 rgba(70,24,13,.64),
    0 7px 18px rgba(0,0,0,.30)!important;
}
.mockup-btn.primary:active,
.mockup-generate:active:not(:disabled),
.mockup-share-primary:active:not(:disabled){
  filter:brightness(.94);
  transform:translateY(1px);
}
.mockup-generate:disabled,
.mockup-share-primary:disabled{
  opacity:.35;
  cursor:not-allowed;
  filter:saturate(.35);
  transform:none;
}


/* V42: editable PSD template names */
.mockup-template-name-row{display:flex;align-items:center;gap:6px;min-width:0}
.mockup-template-name-row>strong{min-width:0;max-width:100%;flex:0 1 auto}
.mockup-template-rename{flex:0 0 auto;width:24px;height:24px;display:grid;place-items:center;padding:0;border:1px solid rgba(225,151,34,.18);border-radius:7px;background:#0b0a08;color:#a77a37;cursor:pointer}
.mockup-template-rename svg{width:13px;height:13px}
.mockup-template-rename:hover{border-color:rgba(225,151,34,.55);color:#e1aa4b;background:#151008}
.mockup-template-name-input{min-width:0;width:min(100%,320px);height:28px;box-sizing:border-box;border:1px solid rgba(225,151,34,.5);border-radius:7px;background:#070706;color:#ddd2c5;padding:4px 8px;font:inherit;font-size:12px;outline:none}
.mockup-template-name-input:focus{border-color:rgba(235,171,57,.9);box-shadow:0 0 0 2px rgba(225,151,34,.08)}


/* V43: editable folder names */
.mockup-folder-rename{width:28px;height:30px;display:grid;place-items:center;flex:0 0 auto;border:0;border-left:1px solid rgba(255,255,255,.07);background:transparent;color:#806a4b;cursor:pointer}
.mockup-folder-rename svg{width:13px;height:13px;display:block;pointer-events:none}
.mockup-folder-rename:hover{color:#e1aa4b;background:rgba(225,151,34,.05)}


/* V45: sticky commandbar stays off the Artwork rail; folder tiles + live MyWallHub side showcases */
.mockup-commandbar{box-sizing:border-box}
.mockup-commandbar-sentinel{height:0;pointer-events:none}
@media(min-width:1101px){
  .mockup-commandbar.is-stuck{
    width:calc(100% - 374px);
    margin-right:374px;
  }
}

/* Custom folders are true folder-shaped tiles: name on top, actions below. */
.mockup-folder-scroll{align-items:flex-end!important;gap:10px!important;padding-top:10px!important}
.mockup-folder-scroll .mockup-folder-tile{
  position:relative;
  display:grid!important;
  grid-template-rows:minmax(38px,auto) 27px;
  flex:0 0 158px!important;
  width:158px!important;
  max-width:158px!important;
  min-width:158px!important;
  overflow:visible!important;
  border:1px solid rgba(225,151,34,.22)!important;
  border-radius:8px 11px 10px 10px!important;
  background:linear-gradient(180deg,#15120d 0%,#0d0c09 100%)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.mockup-folder-scroll .mockup-folder-tile::before{
  content:"";
  position:absolute;
  z-index:0;
  top:-8px;
  left:11px;
  width:54px;
  height:9px;
  border:1px solid rgba(225,151,34,.22);
  border-bottom:0;
  border-radius:7px 7px 0 0;
  background:#15120d;
}
.mockup-folder-scroll .mockup-folder-tile:has(.mockup-folder-tile-main.active){
  border-color:rgba(230,163,50,.62)!important;
  background:linear-gradient(180deg,rgba(70,43,13,.96),#171007 100%)!important;
}
.mockup-folder-scroll .mockup-folder-tile:has(.mockup-folder-tile-main.active)::before{
  border-color:rgba(230,163,50,.62);
  background:#462b0d;
}
.mockup-folder-tile .mockup-folder-tile-main{
  position:relative;
  z-index:1;
  width:100%;
  max-width:none!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:18px minmax(0,1fr) auto;
  align-items:center;
  gap:7px;
  padding:10px 9px 7px!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  color:#cbbca8;
  text-align:left;
}
.mockup-folder-tile .mockup-folder-drag-handle{display:grid;place-items:center;width:18px;height:18px;color:#bb8735}
.mockup-folder-tile .mockup-folder-drag-handle svg{width:17px;height:14px}
.mockup-folder-tile .mockup-folder-name{max-width:none!important;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-weight:650;color:inherit}
.mockup-folder-tile .mockup-folder-chip em{font-size:9px;color:#806f5c}
.mockup-folder-tile .mockup-folder-tile-main.active .mockup-folder-name{color:#f0b746}
.mockup-folder-tile-actions{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,.06);
  min-height:27px;
}
.mockup-folder-tile-actions .mockup-folder-rename,
.mockup-folder-tile-actions .mockup-folder-export,
.mockup-folder-tile-actions .mockup-folder-delete{
  width:auto!important;
  height:27px!important;
  min-width:0;
  display:grid;
  place-items:center;
  padding:0;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.055)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#8b704c;
}
.mockup-folder-tile-actions>*:first-child{border-left:0!important}
.mockup-folder-tile-actions .mockup-folder-rename:hover,
.mockup-folder-tile-actions .mockup-folder-export:hover{color:#e5ad4e;background:rgba(225,151,34,.055)!important}
.mockup-folder-tile-actions .mockup-folder-delete:hover{color:#ef8d7d;background:rgba(224,123,108,.05)!important}
.mockup-folder-tile-actions .mockup-folder-export svg,
.mockup-folder-tile-actions .mockup-folder-rename svg{width:13px;height:13px}

/* The live MyWallHub showcases never consume Mockup Tools workspace width.
   JS only reveals them when real free space exists beside the 1500px tool. */
.mockup-mwh-showcase{
  position:fixed;
  z-index:14;
  top:96px;
  display:grid;
  gap:9px;
  box-sizing:border-box;
  max-height:calc(100vh - 116px);
  padding:14px;
  border:1px solid rgba(214,149,37,.26);
  border-radius:15px;
  background:
    radial-gradient(circle at 50% -10%,rgba(225,151,34,.055),transparent 42%),
    linear-gradient(160deg,rgba(14,13,11,.98),rgba(5,5,5,.98));
  box-shadow:0 18px 48px rgba(0,0,0,.3);
}
.mockup-mwh-showcase[hidden],
.mockup-mwh-showcase.is-layout-hidden{display:none!important}
.mockup-mwh-brand{display:flex;align-items:center;gap:7px;min-width:0}
.mockup-mwh-brand img{display:block;width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.mockup-mwh-brand strong{min-width:0;color:#e9dfd2;font-size:11px;letter-spacing:.055em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-mwh-showcase h2{margin:1px 0 0;font-family:Cinzel,serif;color:#efad36;font-size:17px;line-height:1.15}
.mockup-mwh-showcase p{margin:0;color:#91877c;font-size:10px;line-height:1.42}
.mockup-mwh-label{margin-top:2px;color:#d7a653;font-size:8.5px;font-weight:750;letter-spacing:.13em}
.mockup-mwh-grid{display:grid;gap:6px}
.mockup-mwh-showcase.is-pc .mockup-mwh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.mockup-mwh-showcase.is-phone .mockup-mwh-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
.mockup-mwh-grid a{
  display:block;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.075);
  border-radius:8px;
  background:#050505;
}
.mockup-mwh-showcase.is-pc .mockup-mwh-grid a{aspect-ratio:16/9}
.mockup-mwh-showcase.is-phone .mockup-mwh-grid a{aspect-ratio:9/16}
.mockup-mwh-grid img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .16s ease,filter .16s ease}
.mockup-mwh-grid a:hover img{transform:scale(1.035);filter:brightness(1.07)}
.mockup-mwh-cta{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:7px 8px;
  border:1px solid rgba(225,151,34,.38);
  border-radius:9px;
  background:linear-gradient(180deg,#171108,#0d0a06);
  color:#e7b252;
  font-size:9.5px;
  font-weight:700;
  text-align:center;
  text-decoration:none;
}
.mockup-mwh-cta:hover{border-color:rgba(239,177,66,.75);color:#ffd477;background:linear-gradient(180deg,#21170a,#120d07)}
@media(max-height:760px){
  .mockup-mwh-showcase{top:72px;gap:7px;padding:11px;max-height:calc(100vh - 84px)}
  .mockup-mwh-showcase p{font-size:9px;line-height:1.32}
  .mockup-mwh-showcase h2{font-size:15px}
  .mockup-mwh-brand img{width:24px;height:24px}
  .mockup-mwh-grid{gap:4px}
  .mockup-mwh-cta{min-height:30px;padding:5px 6px}
}


/* V46: stable desktop commandbar, refined MWH feeds, draggable folder tabs */
@media(min-width:1101px){
  /* Reserve the Artwork/Pinterest rail at all times. The sticky bar no longer changes
     width at the sticky threshold, so it cannot jump, squeeze or distort while scrolling. */
  .mockup-commandbar,
  .mockup-commandbar.is-stuck{
    width:calc(100% - 374px)!important;
    margin-right:374px!important;
  }
}

/* The supplied MWH logo is the brand lockup. Only use the text fallback when no logo exists. */
.mockup-mwh-brand{min-height:25px}
.mockup-mwh-brand img{width:auto!important;height:25px!important;max-width:100%;object-fit:contain;object-position:left center}
.mockup-mwh-brand strong{font-size:11px}

/* PC is a vertical six-item showcase; Phone remains compact at two items per row. */
.mockup-mwh-showcase.is-pc .mockup-mwh-grid{grid-template-columns:1fr!important;gap:5px}
.mockup-mwh-showcase.is-phone .mockup-mwh-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:6px}
.mockup-mwh-showcase.is-pc .mockup-mwh-grid a{aspect-ratio:16/9}
.mockup-mwh-showcase.is-phone .mockup-mwh-grid a{aspect-ratio:9/16}

/* Folder body contains only the name/count. The raised tab itself is the drag handle. */
.mockup-folder-scroll .mockup-folder-tile::before{display:none!important}
.mockup-folder-scroll .mockup-folder-tile{margin-top:7px;cursor:default}
.mockup-folder-tab-drag{
  position:absolute;
  z-index:4;
  top:-11px;
  left:11px;
  width:58px;
  height:13px;
  display:grid;
  place-items:center;
  box-sizing:border-box;
  border:1px solid rgba(225,151,34,.28);
  border-bottom:0;
  border-radius:7px 7px 0 0;
  background:#15120d;
  color:#9c7334;
  cursor:grab;
  user-select:none;
}
.mockup-folder-tab-drag:active{cursor:grabbing}
.mockup-folder-tile:has(.mockup-folder-tile-main.active) .mockup-folder-tab-drag{border-color:rgba(230,163,50,.62);background:#462b0d;color:#efb249}
.mockup-folder-tab-grip{display:flex;align-items:center;gap:3px;pointer-events:none}
.mockup-folder-tab-grip i{display:block;width:3px;height:3px;border-radius:50%;background:currentColor;box-shadow:0 4px 0 currentColor}
.mockup-folder-tile .mockup-folder-tile-main{
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:8px!important;
  padding-left:10px!important;
}
.mockup-folder-tile .mockup-folder-drag-handle{display:none!important}

/* Restore the old clear insertion feedback for folder reordering, adapted to folder tiles. */
.mockup-folder-scroll .mockup-folder-tile.drop-before{
  border-color:rgba(244,183,68,.72)!important;
  box-shadow:-5px 0 0 #efb23e,-12px 0 22px rgba(239,178,62,.38),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.mockup-folder-scroll .mockup-folder-tile.drop-after{
  border-color:rgba(244,183,68,.72)!important;
  box-shadow:5px 0 0 #efb23e,12px 0 22px rgba(239,178,62,.38),inset 0 1px 0 rgba(255,255,255,.025)!important;
}
.mockup-folder-scroll .mockup-folder-tile.drop-before .mockup-folder-tab-drag,
.mockup-folder-scroll .mockup-folder-tile.drop-after .mockup-folder-tab-drag{
  border-color:#efb23e;
  color:#ffd170;
}


/* V47: fixed-geometry render bar + top-aligned, undistorted MyWallHub branding */
@media(min-width:1101px){
  /* Desktop uses one explicit fixed state instead of switching into CSS sticky sizing.
     The placeholder keeps the document geometry unchanged, so the bar cannot jump. */
  .mockup-commandbar{
    position:relative!important;
    top:auto!important;
    width:calc(100% - 374px)!important;
    margin-right:374px!important;
  }
  .mockup-commandbar.is-stuck{
    position:fixed!important;
    top:8px!important;
    right:auto!important;
    margin:0!important;
    z-index:30;
  }
}

/* Keep both live MWH showcases aligned with the top of the Mockup Tools canvas.
   Their existing feed length/layout is intentionally unchanged. */
.mockup-mwh-showcase{
  top:28px!important;
  max-height:calc(100vh - 40px)!important;
}

/* The API asset is a complete MyWallHub lockup. Size it by width only so its
   original aspect ratio (including the wordmark) can never be distorted. */
.mockup-mwh-brand{
  min-height:34px!important;
  display:flex!important;
  align-items:flex-start!important;
  overflow:visible!important;
}
.mockup-mwh-brand img{
  display:block!important;
  width:min(150px,100%)!important;
  height:auto!important;
  max-width:100%!important;
  max-height:none!important;
  object-fit:contain!important;
  object-position:left top!important;
  flex:0 0 auto!important;
}
.mockup-mwh-brand strong{
  align-self:center;
}

@media(max-height:760px){
  .mockup-mwh-showcase{
    top:18px!important;
    max-height:calc(100vh - 30px)!important;
  }
  .mockup-mwh-brand{
    min-height:30px!important;
  }
  .mockup-mwh-brand img{
    width:min(138px,100%)!important;
    height:auto!important;
  }
}


/* V48: native sticky command bar; page wheel never scrolls the folder strip */
@media(min-width:1101px){
  .mockup-commandbar,
  .mockup-commandbar.is-stuck{
    position:sticky!important;
    top:8px!important;
    left:auto!important;
    right:auto!important;
    width:calc(100% - 374px)!important;
    margin-right:374px!important;
    margin-left:0!important;
    z-index:30!important;
  }
  #mockupCommandbarSentinel{
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
}

/* Folder navigation remains horizontally scrollable only by deliberate horizontal
   navigation. Vertical page scrolling must never make folders appear to vanish. */
.mockup-folder-scroll{
  overscroll-behavior-x:contain!important;
  overscroll-behavior-y:auto!important;
}


/* V49: Generate row stays exactly in its original document position.
   No sticky/fixed behavior, no alternate width and no horizontal jump. */
@media(min-width:1101px){
  .mockup-commandbar,
  .mockup-commandbar.is-stuck{
    position:relative!important;
    top:auto!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    z-index:auto!important;
  }
  #mockupCommandbarSentinel{
    display:none!important;
    height:0!important;
  }
}


/* V50: full-width native sticky Generate row.
   Keep exactly the normal document geometry while it follows the viewport. */
@media(min-width:1101px){
  .mockup-commandbar,
  .mockup-commandbar.is-stuck{
    position:sticky!important;
    top:8px!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    z-index:30!important;
  }
  #mockupCommandbarSentinel{
    display:none!important;
    height:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
  }
}


/* V51: optional per-folder accent colors with Automatic reset */
.mockup-folder-tile-actions{grid-template-columns:repeat(4,1fr)!important}
.mockup-folder-tile-actions .mockup-folder-color{
  width:auto!important;
  height:27px!important;
  min-width:0;
  display:grid;
  place-items:center;
  padding:0;
  border:0!important;
  border-left:1px solid rgba(255,255,255,.055)!important;
  border-radius:0!important;
  background:transparent!important;
  color:#8b704c;
  cursor:pointer;
}
.mockup-folder-tile-actions .mockup-folder-color:hover{color:#e5ad4e;background:rgba(225,151,34,.055)!important}
.mockup-folder-tile-actions .mockup-folder-color svg{width:14px;height:14px;display:block;pointer-events:none}

/* Only accent the folder chrome; keep card surfaces dark and readable. */
.mockup-folder-tile[data-folder-color]{
  border-color:color-mix(in srgb,var(--folder-accent) 50%,#17130d)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--folder-accent) 10%,#15120d),#0d0c09 78%)!important;
}
.mockup-folder-tile[data-folder-color] .mockup-folder-tab-drag{
  border-color:color-mix(in srgb,var(--folder-accent) 62%,#17130d)!important;
  background:color-mix(in srgb,var(--folder-accent) 13%,#15120d)!important;
  color:color-mix(in srgb,var(--folder-accent) 88%,white)!important;
}
.mockup-folder-tile[data-folder-color] .mockup-folder-name{
  color:color-mix(in srgb,var(--folder-accent) 64%,#ddd2c3)!important;
}
.mockup-folder-tile[data-folder-color]:has(.mockup-folder-tile-main.active){
  border-color:color-mix(in srgb,var(--folder-accent) 82%,white)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--folder-accent) 24%,#17120b),#100e0a 88%)!important;
}
.mockup-folder-tile[data-folder-color]:has(.mockup-folder-tile-main.active) .mockup-folder-tab-drag{
  border-color:color-mix(in srgb,var(--folder-accent) 88%,white)!important;
  background:color-mix(in srgb,var(--folder-accent) 28%,#15120d)!important;
}
.mockup-folder-tile[data-folder-color] .mockup-folder-color{color:var(--folder-accent)!important}

/* Custom Gatril-style color popover; no browser-native color dialog. */
.mockup-folder-color-popover[hidden]{display:none!important}
.mockup-folder-color-popover{position:fixed;z-index:12030;max-width:calc(100vw - 24px)}
.mockup-folder-color-menu{display:grid;gap:12px;padding:14px;border:1px solid rgba(225,151,34,.38);border-radius:12px;background:linear-gradient(180deg,#12110e,#090908);box-shadow:0 18px 55px rgba(0,0,0,.72);color:#d8d0c6}
.mockup-folder-color-head{display:flex;align-items:start;justify-content:space-between;gap:12px}
.mockup-folder-color-head h2{margin:2px 0 0;font-family:Cinzel,serif;color:#e8ad48;font-size:16px}
.mockup-folder-color-head p{margin:3px 0 0;max-width:210px;color:#81786f;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-folder-color-close{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(225,151,34,.24);border-radius:8px;background:#0c0a07;color:#b68841;cursor:pointer;font-size:16px}
.mockup-folder-color-close:hover{border-color:rgba(225,151,34,.55);color:#efb34f}
.mockup-folder-color-choices{display:grid;gap:10px}
.mockup-folder-color-auto{display:grid;grid-template-columns:28px minmax(0,1fr) auto;align-items:center;gap:9px;width:100%;padding:8px 9px;border:1px solid rgba(255,255,255,.08);border-radius:9px;background:#0c0b09;color:#bdb2a5;text-align:left;cursor:pointer}
.mockup-folder-color-auto:hover,.mockup-folder-color-auto.selected{border-color:rgba(225,151,34,.46);background:#151008}
.mockup-folder-color-auto-swatch{width:24px;height:24px;border:1px solid rgba(225,151,34,.48);border-radius:7px;background:linear-gradient(135deg,#17120b,#34210c,#0b0a08)}
.mockup-folder-color-auto span:nth-child(2){display:grid;gap:1px;min-width:0}
.mockup-folder-color-auto strong{font-size:10px;color:#e4c47f}
.mockup-folder-color-auto small{font-size:8px;color:#776f67}
.mockup-folder-color-auto b{color:#efb34f;font-size:12px}
.mockup-folder-color-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}
.mockup-folder-color-choice{position:relative;display:grid;justify-items:center;gap:4px;padding:7px 4px 6px;border:1px solid rgba(255,255,255,.07);border-radius:8px;background:#0b0a08;color:#8d8378;cursor:pointer}
.mockup-folder-color-choice:hover,.mockup-folder-color-choice.selected{border-color:color-mix(in srgb,var(--swatch,#d5a33b) 66%,#5a4a34);background:#12100c;color:#d7cec3}
.mockup-folder-color-choice>span{width:30px;height:22px;border-radius:7px;background:linear-gradient(180deg,color-mix(in srgb,var(--swatch) 78%,white),var(--swatch));box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 1px rgba(0,0,0,.4)}
.mockup-folder-color-choice small{font-size:8px;line-height:1;white-space:nowrap}
.mockup-folder-color-choice b{position:absolute;top:4px;right:5px;color:#fff;font-size:10px;text-shadow:0 1px 2px #000}
@media(max-width:360px){.mockup-folder-color-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}


/* V52: frontend-only MWH brand lockup + collision-free sticky command row */

/* The API logo is treated as the small emblem only. The wordmark is rendered
   next to it in the Mockup Tools frontend, matching the MWH header proportions. */
.mockup-mwh-brand{
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  min-height:30px!important;
  max-height:34px!important;
  overflow:hidden!important;
  white-space:nowrap!important;
}
.mockup-mwh-brand img{
  display:block!important;
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  max-width:30px!important;
  max-height:30px!important;
  object-fit:contain!important;
  object-position:center!important;
  flex:0 0 30px!important;
}
.mockup-mwh-brand strong{
  display:block!important;
  min-width:0!important;
  color:#f5f2ed!important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif!important;
  font-size:14px!important;
  line-height:1!important;
  font-weight:750!important;
  letter-spacing:0!important;
  text-transform:none!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}

/* Keep the full-width Generate row sticky exactly in its normal geometry.
   The Artwork/Pinterest rail receives a live top offset equal to the row's
   actual rendered height, including selected PSD previews and progress/status. */
@media(min-width:1101px){
  .mockup-commandbar,
  .mockup-commandbar.is-stuck{
    position:sticky!important;
    top:8px!important;
    left:auto!important;
    right:auto!important;
    width:100%!important;
    max-width:none!important;
    margin-left:0!important;
    margin-right:0!important;
    box-sizing:border-box!important;
    z-index:30!important;
  }
  .mockup-input-rail{
    position:sticky!important;
    top:var(--mockup-commandbar-clearance,96px)!important;
    z-index:20!important;
  }

  /* Balance the contents around the visual center instead of leaving the
     selected PSD group bunched toward the left with unused space to the right. */
  .mockup-commandbar.mockup-commandbar-auto{
    grid-template-columns:minmax(145px,.6fr) minmax(500px,1.9fr) minmax(150px,.6fr) minmax(200px,.7fr)!important;
    column-gap:18px!important;
    justify-content:center!important;
  }
  .mockup-command-summary{justify-self:start!important}
  .mockup-command-selected{
    width:100%!important;
    justify-self:center!important;
  }
  .mockup-commandbar .mockup-selected-strip{
    width:100%!important;
    max-width:690px!important;
    justify-self:center!important;
    justify-content:center!important;
  }
  .mockup-commandbar .mockup-selected-card{
    justify-self:center!important;
    width:min(100%,150px)!important;
  }
  .mockup-command-progress{
    width:100%!important;
    max-width:300px!important;
    justify-self:center!important;
  }
  .mockup-commandbar .mockup-generate{
    justify-self:end!important;
    min-width:210px!important;
  }
}
@media(min-width:1101px) and (max-width:1350px){
  .mockup-commandbar.mockup-commandbar-auto{
    grid-template-columns:minmax(125px,.5fr) minmax(420px,1.6fr) minmax(130px,.5fr) minmax(190px,.65fr)!important;
    column-gap:12px!important;
  }
  .mockup-commandbar .mockup-selected-strip{max-width:590px!important}
}


/* V53: portable folder instructions, richer folder colors, PSD extraction */

/* Folder main row: name, compact rename pencil, then PSD count. */
.mockup-folder-tile .mockup-folder-tile-main{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 24px auto!important;
  align-items:center!important;
  gap:5px!important;
  padding:8px 8px 6px 10px!important;
}
.mockup-folder-name-button{
  min-width:0;
  width:100%;
  display:block;
  padding:0;
  border:0;
  background:transparent;
  color:inherit;
  text-align:left;
  cursor:pointer;
}
.mockup-folder-name-button .mockup-folder-name{max-width:none!important}
.mockup-folder-rename-compact{
  width:22px;
  height:22px;
  display:grid;
  place-items:center;
  padding:0;
  border:0;
  border-radius:6px;
  background:transparent;
  color:#8b704c;
  cursor:pointer;
}
.mockup-folder-rename-compact:hover{color:#e8b34f;background:rgba(225,151,34,.07)}
.mockup-folder-rename-compact svg{width:12px;height:12px;display:block}
.mockup-folder-tile .mockup-folder-tile-main>em{min-width:17px;text-align:right;font-size:9px;color:#806f5c}
.mockup-folder-tile .mockup-folder-tile-main.active .mockup-folder-rename-compact{color:#d9aa55}

/* Bottom row: instructions, colors, pack export, delete. */
.mockup-folder-tile-actions{grid-template-columns:repeat(4,1fr)!important}
.mockup-folder-tile-actions .mockup-folder-note{
  width:auto!important;height:27px!important;min-width:0;display:grid;place-items:center;padding:0;
  border:0!important;border-left:0!important;border-radius:0!important;background:transparent!important;color:#8b704c;cursor:pointer;
}
.mockup-folder-tile-actions .mockup-folder-note svg{width:14px;height:14px;display:block;pointer-events:none}
.mockup-folder-tile-actions .mockup-folder-note:hover{color:#e5ad4e;background:rgba(225,151,34,.055)!important}
.mockup-folder-tile[data-has-note="1"] .mockup-folder-note,
.mockup-folder-tile-actions .mockup-folder-note.has-note{
  color:#ffd05f!important;
  background:radial-gradient(circle at 50% 55%,rgba(255,190,53,.18),transparent 68%)!important;
  text-shadow:0 0 9px rgba(255,184,42,.7);
  box-shadow:inset 0 0 12px rgba(255,180,42,.08);
}
.mockup-folder-tile[data-has-note="1"] .mockup-folder-note svg{filter:drop-shadow(0 0 4px rgba(255,183,46,.55))}

/* Two-color accents are intentionally vivid only on chrome, not the folder body. */
.mockup-folder-tile[data-folder-color]{
  border-color:color-mix(in srgb,var(--folder-accent) 64%,#15110c)!important;
  background:linear-gradient(180deg,color-mix(in srgb,var(--folder-accent-2) 10%,#15120d),#0d0c09 80%)!important;
  box-shadow:inset 0 1px 0 color-mix(in srgb,var(--folder-accent-2) 18%,transparent)!important;
}
.mockup-folder-tile[data-folder-color] .mockup-folder-tab-drag{
  border-color:color-mix(in srgb,var(--folder-accent) 78%,#17130d)!important;
  background:linear-gradient(90deg,color-mix(in srgb,var(--folder-accent) 20%,#15120d),color-mix(in srgb,var(--folder-accent-2) 22%,#15120d))!important;
  color:color-mix(in srgb,var(--folder-accent-2) 88%,white)!important;
}
.mockup-folder-tile[data-folder-color] .mockup-folder-name{
  color:color-mix(in srgb,var(--folder-accent) 72%,#f0e6d9)!important;
}
.mockup-folder-tile[data-folder-color]:has(.mockup-folder-tile-main.active){
  border-color:color-mix(in srgb,var(--folder-accent) 88%,white)!important;
  background:linear-gradient(145deg,color-mix(in srgb,var(--folder-accent) 19%,#15120d),color-mix(in srgb,var(--folder-accent-2) 15%,#0d0c09) 64%,#0d0c09)!important;
  box-shadow:0 0 0 1px color-mix(in srgb,var(--folder-accent-2) 24%,transparent),inset 0 1px 0 rgba(255,255,255,.035)!important;
}
.mockup-folder-tile[data-folder-color] .mockup-folder-color{color:var(--folder-accent-2)!important}

/* Richer two-color palette. */
.mockup-folder-color-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important;max-height:210px;overflow-y:auto;padding-right:2px}
.mockup-folder-color-choice{min-height:58px}
.mockup-folder-color-pair{display:grid!important;grid-template-columns:1fr 1fr!important;width:38px!important;height:24px!important;overflow:hidden;border-radius:7px;box-shadow:0 0 0 1px rgba(255,255,255,.11),0 0 0 2px rgba(0,0,0,.34)}
.mockup-folder-color-pair i{display:block;width:100%;height:100%;background:linear-gradient(180deg,color-mix(in srgb,var(--swatch) 74%,white),var(--swatch))}
.mockup-folder-color-custom-choice{border-style:dashed!important}
.mockup-folder-custom-colors[hidden]{display:none!important}
.mockup-folder-custom-colors{display:grid;gap:9px;padding:10px;border:1px solid rgba(225,151,34,.2);border-radius:9px;background:#0b0a08}
.mockup-folder-custom-title{display:grid;gap:2px}.mockup-folder-custom-title strong{font-size:10px;color:#e4c47f}.mockup-folder-custom-title span{font-size:8px;color:#776f67}
.mockup-folder-custom-inputs{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
.mockup-folder-custom-inputs label{display:grid;gap:4px;font-size:8px;color:#8f8376;text-transform:uppercase;letter-spacing:.06em}
.mockup-folder-custom-inputs input[type="color"]{width:100%;min-width:54px;height:32px;padding:2px;border:1px solid rgba(225,151,34,.26);border-radius:7px;background:#080706;cursor:pointer}
.mockup-folder-custom-inputs .mockup-btn{height:32px;padding:0 11px!important;font-size:9px}

/* Compact anchored folder-instructions popover. */
.mockup-folder-note-popover[hidden]{display:none!important}
.mockup-folder-note-popover{position:fixed;z-index:12035;max-width:calc(100vw - 24px)}
.mockup-folder-note-menu{display:grid;gap:11px;padding:14px;border:1px solid rgba(225,151,34,.38);border-radius:12px;background:linear-gradient(180deg,#12110e,#090908);box-shadow:0 18px 55px rgba(0,0,0,.72);color:#d8d0c6}
.mockup-folder-note-head{display:flex;align-items:start;justify-content:space-between;gap:12px}
.mockup-folder-note-head h2{margin:2px 0 0;font-family:Cinzel,serif;color:#e8ad48;font-size:16px}.mockup-folder-note-head p{margin:3px 0 0;max-width:270px;color:#81786f;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mockup-folder-note-close{width:28px;height:28px;display:grid;place-items:center;border:1px solid rgba(225,151,34,.24);border-radius:8px;background:#0c0a07;color:#b68841;cursor:pointer;font-size:16px}.mockup-folder-note-close:hover{border-color:rgba(225,151,34,.55);color:#efb34f}
.mockup-folder-note-menu textarea{width:100%;min-height:116px;box-sizing:border-box;resize:vertical;padding:10px 11px;border:1px solid rgba(225,151,34,.24);border-radius:9px;background:#070706;color:#e7ded2;font:inherit;font-size:11px;line-height:1.45;outline:none}.mockup-folder-note-menu textarea:focus{border-color:rgba(239,173,54,.72);box-shadow:0 0 0 2px rgba(225,151,34,.09)}
.mockup-folder-note-footer{display:flex;align-items:center;justify-content:space-between;gap:10px}.mockup-folder-note-footer>span{font-size:9px;color:#81776d}.mockup-folder-note-footer>div{display:flex;gap:7px}.mockup-folder-note-footer .mockup-btn{padding:7px 10px!important;font-size:9px}

/* PSD cards can extract the original stored PSD byte-for-byte. */
.mockup-template-name-row{display:flex!important;align-items:center!important;gap:5px!important;min-width:0}
.mockup-template-name-row [data-template-name]{min-width:0}
.mockup-template-download-psd{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;padding:0;border:1px solid rgba(225,151,34,.14);border-radius:7px;background:#0a0907;color:#95713d;cursor:pointer}
.mockup-template-download-psd:hover{border-color:rgba(225,151,34,.5);color:#efb44f;background:#151009}
.mockup-template-download-psd svg{width:13px;height:13px;display:block;pointer-events:none}

@media(max-width:420px){.mockup-folder-color-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.mockup-folder-custom-inputs{grid-template-columns:1fr 1fr}.mockup-folder-custom-inputs .mockup-btn{grid-column:1/-1}}


/* V55: keep the original V53 custom color inputs; only theme the Folder Color panel scrollbar. */
.mockup-folder-color-popover,
.mockup-folder-color-menu,
.mockup-folder-color-choices{
  scrollbar-width:thin;
  scrollbar-color:#a96f20 #0a0806;
}
.mockup-folder-color-popover::-webkit-scrollbar,
.mockup-folder-color-menu::-webkit-scrollbar,
.mockup-folder-color-choices::-webkit-scrollbar{
  width:9px;
  height:9px;
}
.mockup-folder-color-popover::-webkit-scrollbar-track,
.mockup-folder-color-menu::-webkit-scrollbar-track,
.mockup-folder-color-choices::-webkit-scrollbar-track{
  background:#080706;
  border-left:1px solid rgba(225,151,34,.12);
  border-radius:999px;
}
.mockup-folder-color-popover::-webkit-scrollbar-thumb,
.mockup-folder-color-menu::-webkit-scrollbar-thumb,
.mockup-folder-color-choices::-webkit-scrollbar-thumb{
  min-height:36px;
  border:2px solid #080706;
  border-radius:999px;
  background:linear-gradient(180deg,#d9a13c,#8d5718);
  box-shadow:inset 0 1px 0 rgba(255,226,164,.28);
}
.mockup-folder-color-popover::-webkit-scrollbar-thumb:hover,
.mockup-folder-color-menu::-webkit-scrollbar-thumb:hover,
.mockup-folder-color-choices::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#efb84e,#a9691d);
}

/* V56: theme the main page scrollbar to match the Mockup Tools black / copper-gold UI. */
html,
body{
  scrollbar-color:#a96f20 #080706;
  scrollbar-width:auto;
}
html::-webkit-scrollbar,
body::-webkit-scrollbar{
  width:12px;
  height:12px;
}
html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track{
  background:#080706;
  border-left:1px solid rgba(225,151,34,.10);
}
html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb{
  min-height:48px;
  border:3px solid #080706;
  border-radius:999px;
  background:linear-gradient(180deg,#d9a13c,#8d5718);
  box-shadow:inset 0 1px 0 rgba(255,226,164,.28),0 0 0 1px rgba(0,0,0,.28);
}
html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg,#efb84e,#a9691d);
}
html::-webkit-scrollbar-thumb:active,
body::-webkit-scrollbar-thumb:active{
  background:linear-gradient(180deg,#c98a2d,#7b4712);
}
html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner{
  background:#080706;
}


/* V57: user-collapsible MyWallHub showcase sidebars.
   Default remains open; each side remembers its own choice in localStorage. */
.mockup-mwh-showcase{
  transition:width .18s ease,left .18s ease,padding .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.mockup-mwh-collapse{
  position:absolute;
  z-index:3;
  top:8px;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  padding:0;
  border:1px solid rgba(225,151,34,.28);
  border-radius:7px;
  background:linear-gradient(180deg,#151008,#090705);
  color:#d9a344;
  font:700 16px/1 system-ui,sans-serif;
  cursor:pointer;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.025);
}
.mockup-mwh-showcase-left .mockup-mwh-collapse{right:8px}
.mockup-mwh-showcase-right .mockup-mwh-collapse{left:8px}
.mockup-mwh-collapse:hover{
  border-color:rgba(239,177,66,.72);
  color:#ffd06a;
  background:linear-gradient(180deg,#211609,#0d0905);
}
.mockup-mwh-showcase:not(.is-user-collapsed) .mockup-mwh-brand{
  padding-right:26px;
}
.mockup-mwh-showcase-right:not(.is-user-collapsed) .mockup-mwh-brand{
  padding-right:0;
  padding-left:26px;
}

/* Collapsed mode keeps a narrow branded tab rather than removing the promotion. */
.mockup-mwh-showcase.is-user-collapsed{
  width:48px!important;
  min-width:48px!important;
  max-width:48px!important;
  min-height:92px;
  max-height:132px!important;
  padding:8px 7px!important;
  gap:8px!important;
  align-content:start;
  justify-items:center;
  overflow:hidden!important;
  border-color:rgba(225,151,34,.34);
  box-shadow:0 12px 34px rgba(0,0,0,.34);
}
.mockup-mwh-showcase.is-user-collapsed>h2,
.mockup-mwh-showcase.is-user-collapsed>p,
.mockup-mwh-showcase.is-user-collapsed>.mockup-mwh-label,
.mockup-mwh-showcase.is-user-collapsed>.mockup-mwh-grid,
.mockup-mwh-showcase.is-user-collapsed>.mockup-mwh-cta{
  display:none!important;
}
.mockup-mwh-showcase.is-user-collapsed .mockup-mwh-brand{
  order:1;
  width:32px!important;
  min-width:32px!important;
  height:32px!important;
  min-height:32px!important;
  max-height:32px!important;
  padding:0!important;
  gap:0!important;
  justify-content:center!important;
  overflow:visible!important;
}
.mockup-mwh-showcase.is-user-collapsed .mockup-mwh-brand img{
  width:30px!important;
  height:30px!important;
  min-width:30px!important;
  min-height:30px!important;
  max-width:30px!important;
  max-height:30px!important;
  flex:0 0 30px!important;
}
.mockup-mwh-showcase.is-user-collapsed .mockup-mwh-brand strong{
  display:none!important;
}
.mockup-mwh-showcase.is-user-collapsed .mockup-mwh-collapse{
  position:static!important;
  order:2;
  width:30px;
  height:28px;
  margin:2px 0 0;
  font-size:18px;
}


/* V58: right/Phone MWH brand mirrors the lockup so the collapse arrow never collides.
   Left/PC stays emblem -> wordmark. Right/Phone becomes wordmark -> emblem. */
.mockup-mwh-showcase-right:not(.is-user-collapsed) .mockup-mwh-brand{
  flex-direction:row-reverse!important;
  justify-content:flex-end!important;
  padding-left:26px!important;
  padding-right:0!important;
}
.mockup-mwh-showcase-right:not(.is-user-collapsed) .mockup-mwh-brand strong{
  text-align:left!important;
}


/* V59: align the mirrored Phone MyWallHub brand lockup to the right edge. */
.mockup-mwh-showcase-right:not(.is-user-collapsed) .mockup-mwh-brand{
  justify-content:flex-start!important;
}
.mockup-mwh-showcase-right:not(.is-user-collapsed) .mockup-mwh-brand strong{
  text-align:right!important;
}


/* V60: Global Artwork Queue + Multi-Smart-Object Mapping */
.mockup-art-queue-toolbar{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;margin:0 0 9px;color:#7f766c;font-size:8px;letter-spacing:.065em}.mockup-art-queue-toolbar strong{color:#c79a50;font-size:8px}.mockup-art-queue-toolbar #mockupArtworkCount{font-weight:700;color:#d8aa58}.mockup-art-queue-toolbar .mockup-text-btn{font-size:8px}
.mockup-art-queue{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:430px;overflow-y:auto;padding:1px 4px 2px 1px;scrollbar-width:thin;scrollbar-color:#9c651d #080706}.mockup-art-queue::-webkit-scrollbar{width:8px}.mockup-art-queue::-webkit-scrollbar-track{background:#080706;border-radius:999px}.mockup-art-queue::-webkit-scrollbar-thumb{border:2px solid #080706;border-radius:999px;background:linear-gradient(180deg,#d9a13c,#895316)}
.mockup-art-queue-card{position:relative;aspect-ratio:1/1;min-width:0;border:1px solid rgba(225,151,34,.18);border-radius:9px;background:#080706;overflow:hidden;cursor:grab;transition:border-color .14s ease,box-shadow .14s ease,transform .14s ease}.mockup-art-queue-card:active{cursor:grabbing}.mockup-art-queue-card:hover{border-color:rgba(225,151,34,.52);box-shadow:0 8px 24px rgba(0,0,0,.28)}.mockup-art-queue-card.is-dragging{opacity:.48}.mockup-art-queue-card.drop-before{box-shadow:inset 0 4px 0 #efb443,0 0 18px rgba(225,151,34,.22)}.mockup-art-queue-card.drop-after{box-shadow:inset 0 -4px 0 #efb443,0 0 18px rgba(225,151,34,.22)}
.mockup-art-preview-button{display:block;width:100%;height:100%;padding:0;border:0;background:#050505;cursor:zoom-in}.mockup-art-preview-button img{display:block;width:100%;height:100%;object-fit:cover}.mockup-art-order{position:absolute;z-index:3;top:5px;left:5px;width:21px;height:21px;display:grid;place-items:center;border:1px solid rgba(225,151,34,.65);border-radius:50%;background:rgba(5,5,5,.88);color:#efb443;font-size:9px;font-weight:800;pointer-events:none}.mockup-art-remove{position:absolute;z-index:4;top:5px;right:5px;width:21px;height:21px;display:grid;place-items:center;padding:0;border:1px solid rgba(203,112,91,.34);border-radius:50%;background:rgba(7,7,7,.88);color:#d58b78;cursor:pointer}.mockup-art-remove:hover{border-color:#dc866e;color:#ffad99}
.mockup-art-hover-meta{position:absolute;z-index:2;left:0;right:0;bottom:0;display:grid;gap:2px;padding:20px 7px 7px;background:linear-gradient(transparent,rgba(3,3,3,.97) 48%);transform:translateY(100%);transition:transform .14s ease;pointer-events:none}.mockup-art-queue-card:hover .mockup-art-hover-meta,.mockup-art-queue-card:focus-within .mockup-art-hover-meta{transform:translateY(0)}.mockup-art-hover-meta strong{font-size:8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#eee5d9}.mockup-art-hover-meta span{font-size:7px;line-height:1.3;color:#94897d}
.mockup-artwork-preview-modal[hidden],.mockup-mapping-modal[hidden]{display:none!important}.mockup-artwork-preview-modal,.mockup-mapping-modal{position:fixed;inset:0;z-index:12100;background:rgba(0,0,0,.82);backdrop-filter:blur(6px);padding:24px}.mockup-artwork-preview-modal{display:grid;place-items:center}.mockup-artwork-preview-dialog{position:relative;width:min(850px,calc(100vw - 40px));max-height:calc(100vh - 40px);display:grid;gap:8px;padding:14px;border:1px solid rgba(225,151,34,.42);border-radius:14px;background:#090806;box-shadow:0 26px 90px rgba(0,0,0,.75)}.mockup-artwork-preview-stage{display:grid;place-items:center;min-height:260px;max-height:72vh;overflow:hidden;border:1px solid rgba(225,151,34,.12);border-radius:10px;background:#050505}.mockup-artwork-preview-stage img{max-width:100%;max-height:72vh;object-fit:contain}.mockup-artwork-preview-dialog>strong{color:#e5d9ca;font-size:12px}.mockup-artwork-preview-dialog>span{color:#887e73;font-size:9px}
.mockup-template-single-smart{min-height:36px;display:flex;align-items:center;padding:0 10px;border:1px solid rgba(225,151,34,.24);border-radius:8px;background:#080706}.mockup-template-single-smart strong{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#ddd2c5;font-size:10px}.mockup-template-mapping-summary{display:grid;grid-template-columns:minmax(0,1fr) 38px;gap:8px;align-items:center;min-height:42px;padding:5px 5px 5px 10px;border:1px solid rgba(225,151,34,.26);border-radius:8px;background:#080706}.mockup-template-mapping-summary>span{display:grid;gap:2px;min-width:0}.mockup-template-mapping-summary strong{font-size:9px;color:#ddd2c5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-template-mapping-summary small{font-size:7.5px;color:#8d8378;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-template-map-button{width:34px;height:32px;display:grid;place-items:center;padding:0;border:1px solid rgba(225,151,34,.27);border-radius:7px;background:linear-gradient(180deg,#171109,#0b0805);color:#d9a344;cursor:pointer}.mockup-template-map-button svg{width:19px;height:19px}.mockup-template-map-button:hover{border-color:rgba(239,177,66,.72);color:#ffd06a}.mockup-template-map-button.needs-attention{border-color:rgba(220,112,78,.62);color:#e99973;box-shadow:0 0 0 2px rgba(220,112,78,.08)}
.mockup-mapping-modal{display:grid;place-items:center}.mockup-mapping-dialog{width:min(1180px,calc(100vw - 42px));height:min(820px,calc(100vh - 42px));display:grid;grid-template-rows:auto auto minmax(0,1fr) auto;gap:14px;padding:18px;border:1px solid rgba(225,151,34,.42);border-radius:16px;background:linear-gradient(180deg,#11100d,#070706);box-shadow:0 30px 110px rgba(0,0,0,.78);color:#d9d0c5}.mockup-mapping-head{display:grid;grid-template-columns:1fr auto;gap:18px;align-items:start}.mockup-mapping-head h2{margin:3px 0 3px;color:#efb23e;font:700 25px/1.1 Georgia,'Times New Roman',serif;text-transform:uppercase}.mockup-mapping-head p{margin:0;color:#897f74;font-size:10px}
.mockup-mapping-global{display:grid;gap:8px;padding:10px;border:1px solid rgba(225,151,34,.16);border-radius:11px;background:#090806}.mockup-mapping-section-head{display:flex;align-items:end;justify-content:space-between;gap:15px}.mockup-mapping-section-head>div:first-child{display:grid;gap:2px}.mockup-mapping-section-head strong{font-size:9px;letter-spacing:.07em;color:#d7aa58}.mockup-mapping-section-head span{font-size:8px;color:#7d746a}.mockup-mapping-state{padding:5px 8px;border:1px solid rgba(225,151,34,.23);border-radius:999px;color:#c79a50;font-size:8px}.mockup-mapping-state[data-mode="custom"]{border-color:rgba(85,199,255,.38);color:#72cdea;background:rgba(40,140,180,.06)}
.mockup-mapping-global-queue{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 5px;scrollbar-width:thin;scrollbar-color:#9c651d #080706}.mockup-mapping-global-queue::-webkit-scrollbar{height:7px}.mockup-mapping-global-queue::-webkit-scrollbar-track{background:#080706;border-radius:999px}.mockup-mapping-global-queue::-webkit-scrollbar-thumb{border-radius:999px;background:linear-gradient(90deg,#8d5718,#d9a13c)}.mockup-mapping-global-art{position:relative;flex:0 0 88px;display:grid;grid-template-rows:66px 14px;gap:3px;padding:4px;border:1px solid rgba(225,151,34,.16);border-radius:8px;background:#060606;color:#bfb4a7;cursor:grab}.mockup-mapping-global-art:hover,.mockup-mapping-global-art.is-picked{border-color:#e0a53d;box-shadow:0 0 0 2px rgba(225,151,34,.1)}.mockup-mapping-global-art>span{position:absolute;top:6px;left:6px;z-index:2;width:18px;height:18px;display:grid;place-items:center;border-radius:50%;background:rgba(5,5,5,.86);border:1px solid rgba(225,151,34,.62);color:#efb443;font-size:8px;font-weight:800}.mockup-mapping-global-art img{width:100%;height:66px;object-fit:cover;border-radius:5px}.mockup-mapping-global-art strong{font-size:7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-align:center}.mockup-mapping-empty{padding:15px;color:#756d65;font-size:9px}
.mockup-mapping-table{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);border:1px solid rgba(225,151,34,.15);border-radius:11px;overflow:hidden}.mockup-mapping-table-head,.mockup-mapping-row{display:grid;grid-template-columns:52px minmax(230px,.95fr) 42px minmax(320px,1.3fr);align-items:center}.mockup-mapping-table-head{padding:8px 12px;border-bottom:1px solid rgba(225,151,34,.14);background:#0d0b08;color:#7e7469;font-size:8px;letter-spacing:.07em}.mockup-mapping-rows{min-height:0;overflow-y:auto;scrollbar-width:thin;scrollbar-color:#9c651d #080706}.mockup-mapping-rows::-webkit-scrollbar{width:8px}.mockup-mapping-rows::-webkit-scrollbar-track{background:#080706}.mockup-mapping-rows::-webkit-scrollbar-thumb{border:2px solid #080706;border-radius:999px;background:linear-gradient(180deg,#d9a13c,#895316)}.mockup-mapping-row{min-height:70px;padding:8px 12px;border-bottom:1px solid rgba(255,255,255,.045);transition:background .13s ease}.mockup-mapping-row:last-child{border-bottom:0}.mockup-mapping-row:hover{background:rgba(225,151,34,.025)}.mockup-mapping-row.is-disabled{opacity:.58}.mockup-mapping-row.needs-artwork{background:rgba(190,73,50,.045)}
.mockup-mapping-use{display:grid;place-items:center;cursor:pointer}.mockup-mapping-use input{position:absolute;opacity:0;pointer-events:none}.mockup-mapping-use span{width:20px;height:20px;border:1px solid rgba(225,151,34,.42);border-radius:6px;background:#080706;box-shadow:inset 0 0 0 3px #080706}.mockup-mapping-use input:checked+span{background:linear-gradient(145deg,#efb74d,#9b5f1b);box-shadow:inset 0 0 0 4px #080706,0 0 0 1px rgba(239,183,77,.15)}.mockup-mapping-smart{display:grid;gap:3px;min-width:0}.mockup-mapping-smart strong{font-size:10px;color:#ded4c8;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-mapping-smart small{font-size:8px;color:#7d746b}.mockup-mapping-arrow{text-align:center;color:#a87930;font-size:18px}
.mockup-mapping-assignment{min-width:0;min-height:52px;display:grid;grid-template-columns:30px 54px minmax(0,1fr);align-items:center;gap:8px;padding:5px 8px;border:1px solid rgba(225,151,34,.2);border-radius:8px;background:#080706;color:#cfc5b9;text-align:left;cursor:pointer}.mockup-mapping-assignment.has-art{cursor:grab}.mockup-mapping-assignment:hover:not(:disabled),.mockup-mapping-assignment.is-drop-target{border-color:rgba(239,177,66,.72);box-shadow:0 0 0 2px rgba(225,151,34,.08)}.mockup-mapping-assignment:disabled{cursor:default}.mockup-mapping-art-number{width:24px;height:24px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(225,151,34,.48);color:#efb443;font-size:9px;font-weight:800}.mockup-mapping-assignment img{width:54px;height:42px;object-fit:cover;border-radius:5px}.mockup-mapping-art-copy{display:grid;gap:2px;min-width:0}.mockup-mapping-art-copy strong{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-mapping-art-copy small{font-size:7.5px;color:#82786e}.mockup-mapping-missing,.mockup-mapping-kept{grid-column:1/-1;color:#c87a65;font-size:9px}.mockup-mapping-kept{color:#81786f}
.mockup-mapping-actions{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px}.mockup-mapping-actions>span{color:#766e66;font-size:8px}.mockup-mapping-actions>div{display:flex;gap:8px}.mockup-mapping-actions .mockup-btn{min-width:105px}
@media(max-width:900px){.mockup-mapping-dialog{width:calc(100vw - 20px);height:calc(100vh - 20px);padding:12px}.mockup-mapping-table-head,.mockup-mapping-row{grid-template-columns:44px minmax(150px,.8fr) 30px minmax(220px,1.2fr)}.mockup-mapping-actions{grid-template-columns:1fr}.mockup-mapping-actions>span{display:none}.mockup-mapping-actions>div{justify-content:end}}
@media(max-width:700px){.mockup-art-queue{grid-template-columns:repeat(2,minmax(0,1fr))}.mockup-mapping-modal{padding:6px}.mockup-mapping-table-head{display:none}.mockup-mapping-row{grid-template-columns:38px minmax(0,1fr);gap:5px}.mockup-mapping-arrow{display:none}.mockup-mapping-assignment{grid-column:2}.mockup-mapping-global-art{flex-basis:74px}}


/* V61: artwork preview/metadata reliability + mapping drag feedback */
.mockup-art-preview-button,
.mockup-art-preview-button img{
  -webkit-user-drag:none;
  user-select:none;
}
.mockup-art-hover-meta{
  transform:none!important;
  opacity:0;
  visibility:hidden;
  transition:opacity .14s ease,visibility .14s ease!important;
}
.mockup-art-queue-card:hover .mockup-art-hover-meta,
.mockup-art-queue-card:focus-within .mockup-art-hover-meta,
.mockup-art-queue-card:focus .mockup-art-hover-meta{
  opacity:1;
  visibility:visible;
}
.mockup-mapping-assignment.is-drop-target{
  border-color:#efb443!important;
  box-shadow:0 0 0 2px rgba(225,151,34,.18),0 0 24px rgba(225,151,34,.16)!important;
}


/* V62: zero-hosting Pinterest Quick Share + artwork/mapping readability polish */
.mockup-artwork-drop{
  min-height:58px;
  display:grid;
  place-items:center;
  gap:3px;
  margin:0 0 10px;
  padding:10px 12px;
  border:1px dashed rgba(225,151,34,.36);
  border-radius:10px;
  background:rgba(225,151,34,.025);
  text-align:center;
  transition:border-color .16s ease,background .16s ease,box-shadow .16s ease;
}
.mockup-artwork-drop strong{font-size:11px;color:#dcb36a}
.mockup-artwork-drop span{font-size:10px;color:#8f857b;line-height:1.35}
.mockup-artwork-drop.is-dragging{border-color:#efb443;background:rgba(225,151,34,.075);box-shadow:0 0 0 2px rgba(225,151,34,.08),0 0 24px rgba(225,151,34,.12)}

/* Keep the compact interface, but never let operational metadata fall into 7–8px territory. */
.mockup-template-meta{font-size:11px!important;line-height:1.45!important;color:#aaa097!important}
.mockup-template-field-label{font-size:10.5px!important;color:#9f9386!important}
.mockup-template-single-smart strong{font-size:11px!important}
.mockup-template-mapping-summary strong{font-size:11px!important;line-height:1.25}
.mockup-template-mapping-summary small{font-size:10px!important;line-height:1.3;color:#a09589!important}
.mockup-template-map-button.is-custom:not(.needs-attention){border-color:rgba(85,199,255,.62)!important;color:#68d7f4!important;background:linear-gradient(180deg,rgba(25,88,112,.28),#090b0c)!important;box-shadow:0 0 0 1px rgba(85,199,255,.08),0 0 18px rgba(70,180,225,.1)}
.mockup-template-map-button.is-custom:not(.needs-attention):hover{border-color:#70dcf8!important;color:#b8f3ff!important}

.mockup-art-queue-toolbar,.mockup-art-queue-toolbar strong,.mockup-art-queue-toolbar .mockup-text-btn{font-size:10px!important}
.mockup-art-order{font-size:10px!important}
.mockup-art-remove{top:6px!important;right:6px!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:0 0 1px!important;font:700 15px/1 Arial,sans-serif!important;text-align:center!important}
.mockup-art-hover-meta{gap:3px!important;padding:24px 8px 8px!important}
.mockup-art-hover-meta strong{font-size:10px!important;line-height:1.25}
.mockup-art-hover-meta span{font-size:9.5px!important;line-height:1.4!important;color:#b0a59a!important}
.mockup-artwork-preview-dialog>strong{font-size:13px!important}
.mockup-artwork-preview-dialog>span{font-size:11px!important;line-height:1.4;color:#a2988e!important}

.mockup-mapping-head p{font-size:12px!important;line-height:1.4;color:#a0968b!important}
.mockup-mapping-section-head strong{font-size:10.5px!important}
.mockup-mapping-section-head span{font-size:10px!important;line-height:1.35;color:#998f84!important}
.mockup-mapping-state{font-size:10px!important;padding:6px 9px!important}
.mockup-mapping-global-art{grid-template-rows:66px 18px!important}
.mockup-mapping-global-art strong{font-size:9px!important;line-height:1.25}
.mockup-mapping-global-art img,.mockup-mapping-assignment img{-webkit-user-drag:none;user-select:none}
.mockup-mapping-table-head{font-size:9.5px!important;color:#94897e!important}
.mockup-mapping-smart strong{font-size:11px!important}
.mockup-mapping-smart small{font-size:10px!important;line-height:1.3;color:#9a9085!important}
.mockup-mapping-art-number{font-size:10px!important}
.mockup-mapping-art-copy strong{font-size:10.5px!important;line-height:1.3}
.mockup-mapping-art-copy small{font-size:9.5px!important;line-height:1.35;color:#a0968b!important}
.mockup-mapping-missing,.mockup-mapping-kept{font-size:10.5px!important}
.mockup-mapping-actions>span{font-size:10px!important;line-height:1.35;color:#91877d!important}

@media(max-width:700px){
  .mockup-artwork-drop{min-height:52px}
  .mockup-mapping-head p,.mockup-mapping-section-head span,.mockup-mapping-actions>span{font-size:10px!important}
}

/* Mapping UX combined fix: list controls + explicit slot unassignment */
.mockup-mapping-table{grid-template-rows:auto auto minmax(0,1fr)}
.mockup-mapping-list-tools{display:flex;align-items:end;justify-content:flex-end;gap:10px;padding:8px 10px;border-bottom:1px solid rgba(225,151,34,.12);background:#0a0907}
.mockup-mapping-list-tools label{display:grid;gap:4px;min-width:170px}
.mockup-mapping-list-tools label>span{font-size:9.5px;letter-spacing:.07em;color:#9a8f82;font-weight:700}
.mockup-mapping-list-tools select{width:100%;min-height:34px;padding:6px 30px 6px 9px;border:1px solid rgba(225,151,34,.25);border-radius:7px;background:#0d0b08;color:#d7cec3;font-family:inherit;font-size:10.5px;font-weight:600;line-height:1.2;outline:none}
.mockup-mapping-list-tools select:focus{border-color:rgba(239,177,66,.7);box-shadow:0 0 0 2px rgba(225,151,34,.08)}
.mockup-mapping-assignment-wrap{position:relative;min-width:0}
.mockup-mapping-assignment{width:100%}
.mockup-mapping-assignment.has-art{padding-right:42px}
.mockup-mapping-unassign{position:absolute;right:8px;top:50%;z-index:3;width:25px;height:25px;display:grid;place-items:center;transform:translateY(-50%);padding:0;border:1px solid rgba(225,151,34,.3);border-radius:6px;background:#130f0a;color:#d8aa5b;font:700 17px/1 Arial,sans-serif;cursor:pointer}
.mockup-mapping-unassign:hover{border-color:rgba(239,177,66,.75);background:#21160b;color:#ffd06a}
.mockup-mapping-list-empty{padding:24px 16px;color:#91877d;font-size:10.5px;text-align:center}
@media(max-width:700px){.mockup-mapping-list-tools{align-items:stretch;flex-direction:column}.mockup-mapping-list-tools label{min-width:0}.mockup-mapping-assignment-wrap{grid-column:2}}


/* Image fit controls: per single-slot template and per mapped Smart Object */
.mockup-template-fit{display:grid;grid-template-columns:auto minmax(96px,132px);align-items:center;justify-content:space-between;gap:8px;margin-top:6px;color:#94897e;font-size:9px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.mockup-template-fit select,.mockup-mapping-fit select{min-height:30px;padding:5px 28px 5px 8px;border:1px solid rgba(225,151,34,.25);border-radius:7px;background:#0d0b08;color:#d7cec3;font-family:inherit;font-size:10px;font-weight:600;line-height:1.2;outline:none;text-transform:none}
.mockup-template-fit select:focus,.mockup-mapping-fit select:focus{border-color:rgba(239,177,66,.7);box-shadow:0 0 0 2px rgba(225,151,34,.08)}
.mockup-mapping-assignment-wrap{display:grid;gap:6px}
.mockup-mapping-assignment-main{position:relative;min-width:0}
.mockup-mapping-fit{display:grid;grid-template-columns:auto minmax(170px,220px);align-items:center;justify-content:end;gap:8px;color:#94897e;font-size:9px;font-weight:700;letter-spacing:.05em}
.mockup-mapping-fit select{width:100%}
@media(max-width:700px){.mockup-mapping-fit{grid-template-columns:1fr}.mockup-template-fit{grid-template-columns:auto minmax(92px,120px)}}


/* Direct Pinterest publish: disconnected result-card action is visibly unavailable.
   The wrapper keeps the hover explanation readable even though the button itself is disabled. */
.mockup-pinterest-action{display:grid;min-width:0}
.mockup-pinterest-action .mockup-pinterest-icon-button:disabled{opacity:.34!important;filter:grayscale(1) saturate(.15)!important;cursor:not-allowed!important;border-color:rgba(255,255,255,.13)!important;background:#0b0b0b!important;color:#6f6a64!important;pointer-events:none}
.mockup-pinterest-action:has(.mockup-pinterest-icon-button:disabled){cursor:help}


/* Mockup Tools footer: public legal link */
.mockup-tool-footer{display:flex;justify-content:center;align-items:center;padding:22px 12px 8px;text-align:center}
.mockup-tool-footer a{color:#9d948a;font-size:11px;font-weight:600;line-height:1.4;text-decoration:none;letter-spacing:.02em}
.mockup-tool-footer a:hover,.mockup-tool-footer a:focus-visible{color:#efb142;text-decoration:underline;text-underline-offset:3px}

/* PSD Library: per-view sorting/filtering, custom drag order, and in-place PSD replacement. */
.mockup-template-toolbar{display:grid;grid-template-columns:minmax(180px,1fr) auto;gap:9px 14px;align-items:end;margin:2px 0 10px;padding:10px 12px;border:1px solid rgba(225,151,34,.13);border-radius:10px;background:rgba(225,151,34,.025)}
.mockup-template-toolbar-scope{display:grid;gap:2px;min-width:0}.mockup-template-toolbar-scope strong{color:#d9ad61;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mockup-template-toolbar-scope span{color:#756d64;font-size:8.5px}
.mockup-template-toolbar-controls{display:flex;align-items:end;justify-content:flex-end;gap:8px;flex-wrap:wrap}.mockup-template-toolbar-controls label{display:grid;gap:4px;min-width:118px}.mockup-template-toolbar-controls label>span{font-size:7.5px;letter-spacing:.08em;color:#8d8174}.mockup-template-toolbar-controls select{min-height:30px;padding:6px 28px 6px 8px;border:1px solid rgba(225,151,34,.2);border-radius:7px;background:#080706;color:#d9cdbf;font:inherit;font-size:9px;cursor:pointer}.mockup-template-toolbar-controls select:focus{outline:none;border-color:rgba(239,177,66,.65);box-shadow:0 0 0 2px rgba(225,151,34,.07)}
.mockup-template-toolbar-hint{grid-column:1/-1;color:#6f675e;font-size:8px;line-height:1.35}
.mockup-template-row{position:relative;grid-template-columns:24px 20px minmax(0,1fr) 24px!important;grid-template-areas:'check drag . delete' 'preview preview preview preview' 'info info info info'!important;transition:border-color .12s ease,box-shadow .12s ease,opacity .12s ease,transform .12s ease}
.mockup-template-drag-handle{grid-area:drag;display:grid;grid-template-columns:repeat(3,2px);gap:2px;align-items:center;justify-content:center;width:18px;height:20px;border:1px solid rgba(225,151,34,.13);border-radius:6px;background:#090806;cursor:grab;color:#916c35;user-select:none}.mockup-template-drag-handle:active{cursor:grabbing}.mockup-template-drag-handle:hover{border-color:rgba(225,151,34,.45);background:#141008}.mockup-template-drag-handle i{display:block;width:2px;height:10px;border-radius:999px;background:currentColor;opacity:.75}
.mockup-template-row.is-dragging{opacity:.42}.mockup-template-row.drop-before{box-shadow:inset 0 4px 0 #efb443,0 0 18px rgba(225,151,34,.2)}.mockup-template-row.drop-after{box-shadow:inset 0 -4px 0 #efb443,0 0 18px rgba(225,151,34,.2)}
.mockup-template-replace-psd{width:25px;height:25px;display:grid;place-items:center;flex:0 0 auto;padding:0;border:1px solid rgba(225,151,34,.14);border-radius:7px;background:#0a0907;color:#95713d;cursor:pointer}.mockup-template-replace-psd:hover{border-color:rgba(225,151,34,.5);color:#efb44f;background:#151009}.mockup-template-replace-psd svg{width:13px;height:13px;display:block;pointer-events:none}
@media(max-width:760px){.mockup-template-toolbar{grid-template-columns:1fr;align-items:stretch}.mockup-template-toolbar-controls{justify-content:flex-start}.mockup-template-toolbar-hint{grid-column:auto}}
@media(max-width:420px){.mockup-template-toolbar-controls{display:grid;grid-template-columns:1fr 1fr}.mockup-template-toolbar-controls label{min-width:0}.mockup-template-toolbar-controls select{width:100%}}


/* FIX-12: readable PSD library controls + safe single/bulk deletion */
.mockup-template-toolbar-scope{gap:4px}
.mockup-template-toolbar-scope strong{font-size:13px!important;line-height:1.3}
.mockup-template-toolbar-scope span{font-size:11.5px!important;line-height:1.35;color:#92887d!important}
.mockup-template-toolbar-controls label>span{font-size:10px!important;line-height:1.2;font-weight:700}
.mockup-template-toolbar-controls select{font-size:11.5px!important;min-height:34px;padding-top:7px;padding-bottom:7px}
.mockup-template-toolbar-hint{font-size:11px!important;line-height:1.45;color:#8d8378!important}
.mockup-template-bulk-toggle,.mockup-template-bulk-actions button{min-height:34px;padding:7px 10px;border:1px solid rgba(225,151,34,.22);border-radius:7px;background:#0a0806;color:#caa05d;font:inherit;font-size:11px;font-weight:700;cursor:pointer}
.mockup-template-bulk-toggle:hover,.mockup-template-bulk-toggle.active,.mockup-template-bulk-actions button:hover{border-color:rgba(239,177,66,.62);color:#ffd06a;background:#151008}
.mockup-template-bulk-toggle.active{border-color:rgba(224,123,108,.48);color:#efa18f}
.mockup-template-bulk-bar{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 11px;border:1px solid rgba(224,123,108,.22);border-radius:9px;background:rgba(117,40,27,.08)}
.mockup-template-bulk-bar>div:first-child{display:grid;gap:2px;min-width:0}.mockup-template-bulk-bar strong{font-size:12px;color:#e1c2aa}.mockup-template-bulk-bar span{font-size:10.5px;color:#9c887b}
.mockup-template-bulk-actions{display:flex;align-items:center;justify-content:flex-end;gap:7px;flex-wrap:wrap}.mockup-template-bulk-actions button:disabled{opacity:.35;cursor:not-allowed}.mockup-template-bulk-actions .danger,.mockup-template-delete-confirm .danger{border-color:rgba(224,123,108,.5);background:#2a100c;color:#f2a18f}.mockup-template-bulk-actions .danger:hover,.mockup-template-delete-confirm .danger:hover{border-color:rgba(239,117,95,.8);background:#3a1510;color:#ffc0b4}
.mockup-template-delete-select{grid-area:delete;align-self:start;justify-self:end;display:grid;place-items:center;width:26px;height:26px;cursor:pointer}.mockup-template-delete-select input{position:absolute;opacity:0;pointer-events:none}.mockup-template-delete-select span{width:18px;height:18px;box-sizing:border-box;border:1px solid rgba(224,123,108,.55);border-radius:5px;background:#0b0807;box-shadow:inset 0 0 0 3px #0b0807}.mockup-template-delete-select input:checked+span{background:#d85f48;border-color:#f08c78;box-shadow:inset 0 0 0 3px #160a08}.mockup-template-row.is-delete-selected{border-color:rgba(224,123,108,.42);box-shadow:inset 0 0 0 1px rgba(224,123,108,.08)}
.mockup-template-row.is-bulk-delete .mockup-template-drag-handle{opacity:.4;pointer-events:none}.mockup-template-row.is-bulk-delete .mockup-delete{display:none}
.mockup-template-delete-confirm{position:static;grid-column:3/5;grid-row:1;align-self:start;justify-self:end;z-index:2;display:flex;align-items:center;gap:6px;max-width:100%;padding:5px 6px 5px 9px;border:1px solid rgba(224,123,108,.46);border-radius:9px;background:rgba(24,10,7,.97);box-shadow:0 4px 14px rgba(0,0,0,.28)}
.mockup-template-delete-confirm span{font-size:11.5px;font-weight:700;color:#efb2a5;white-space:nowrap}.mockup-template-delete-confirm button{min-height:26px;padding:4px 7px;border:1px solid rgba(255,255,255,.12);border-radius:6px;background:#0d0b0a;color:#b9aea4;font:inherit;font-size:10.5px;cursor:pointer}
.mockup-template-delete-confirm button:hover{border-color:rgba(225,151,34,.38);color:#eee0d2}
@media(max-width:760px){.mockup-template-bulk-bar{align-items:flex-start;flex-direction:column}.mockup-template-bulk-actions{justify-content:flex-start}.mockup-template-delete-confirm{grid-column:3/5}}