:root{--primary:#1476d4;--primary-dark:#0d5fab;--ink:#252a2f;--muted:#747b82;--line:#dfe3e7;--panel:#fff;--canvas:#eef0f2;--soft:#f6f7f8;--success:#16835f}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Arial,"Helvetica Neue",sans-serif;color:var(--ink);background:var(--soft)}
button,input{font:inherit}
button{cursor:pointer}
.editor-shell{height:min(820px,calc(100vh - 2px));min-height:610px;display:grid;grid-template-columns:minmax(0,1fr) 374px;border:1px solid var(--line);background:var(--panel);overflow:hidden}
.workspace{min-width:0;display:flex;flex-direction:column;background:var(--canvas);border-right:1px solid var(--line)}
.stage{position:relative;flex:1;min-height:0;display:grid;place-items:center;overflow:hidden}
.checkerboard{background-color:#eef0f2;background-image:linear-gradient(45deg,#e2e5e8 25%,transparent 25%),linear-gradient(-45deg,#e2e5e8 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#e2e5e8 75%),linear-gradient(-45deg,transparent 75%,#e2e5e8 75%);background-size:32px 32px;background-position:0 0,0 16px,16px -16px,-16px 0}
.stage.has-color{background-image:none!important}
.stage-bg,.stage-fg{position:absolute;inset:0;width:100%;height:100%}
.stage-bg{object-fit:cover;z-index:1}
.stage-fg{object-fit:contain;z-index:2;filter:drop-shadow(0 10px 18px rgba(0,0,0,.12))}
.empty-state{text-align:center;padding:28px;color:var(--muted)}
.empty-state h1{margin:13px 0 6px;color:var(--ink);font-size:1.45rem;letter-spacing:0}
.empty-state p{margin:0 0 20px}
.empty-state>span{display:block;font-size:.76rem;margin-top:12px}
.empty-icon{width:88px;height:88px;margin:auto;border:8px solid #9aa2a8;display:grid;place-items:center;font-size:3rem;color:#9aa2a8;transform:rotate(45deg)}
.empty-icon::first-letter{transform:rotate(-45deg)}
.processing{position:absolute;z-index:5;display:flex;flex-direction:column;align-items:center;gap:8px;padding:24px 30px;background:rgba(255,255,255,.94);border:1px solid var(--line);border-radius:6px;box-shadow:0 15px 40px rgba(0,0,0,.12);text-align:center}
.processing[hidden]{display:none}
.processing span:last-child{font-size:.78rem;color:var(--muted)}
.spinner{width:34px;height:34px;border:4px solid #dce8f5;border-top-color:var(--primary);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
.thumb-strip{height:92px;flex:0 0 92px;padding:10px 14px;background:#fff;border-top:1px solid var(--line);display:flex;gap:10px;overflow-x:auto}
.thumb-strip[hidden]{display:none}
.thumb{width:74px;height:70px;flex:0 0 74px;border:2px solid transparent;background:#eef0f2;padding:3px;border-radius:4px;overflow:hidden}
.thumb.active{border-color:var(--primary)}
.thumb img{width:100%;height:100%;object-fit:contain}
.control-panel{overflow-y:auto;background:#fff}
.panel-section{padding:20px 16px;border-bottom:1px solid var(--line)}
.section-title{display:flex;align-items:center;gap:5px;margin-bottom:12px;font-size:.95rem}
.info{width:15px;height:15px;border-radius:50%;display:inline-grid;place-items:center;background:#9ba1a6;color:#fff;font:700 10px Arial}
.upload-row{width:100%;border:0;background:transparent;padding:0;display:flex;align-items:center;gap:13px;text-align:left}
.upload-icon{width:58px;height:50px;display:grid;place-items:center;border:1px dashed #b8c0c7;background:var(--soft);color:var(--primary);font-size:1.65rem}
.upload-row b{display:inline-flex;background:var(--primary);color:#fff;border-radius:24px;padding:10px 22px;font-size:.88rem}
.upload-row small{display:block;color:var(--muted);margin-top:5px}
.progress-track{height:4px;margin-top:14px;background:#e8edf2;overflow:hidden;border-radius:9px}
.progress-track span{display:block;height:100%;width:0;background:var(--primary);transition:width .2s}
.tabs{display:flex;gap:20px;border-bottom:1px solid var(--line);margin-bottom:15px}
.tab{border:0;background:transparent;padding:0 0 9px;color:#555;font-weight:700;border-bottom:2px solid transparent}
.tab.active{color:var(--ink);border-color:var(--primary)}
.image-presets{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.preset{position:relative;height:80px;border:2px solid transparent;border-radius:4px;padding:0;background:#eef1f3;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--primary)}
.preset.active{border-color:var(--primary)}
.preset small{font-size:.65rem;font-weight:700;margin-top:2px}
.upload-preset{border:1px solid var(--primary);cursor:pointer;background:#fff}
.upload-preset span{font-size:1.7rem;line-height:1}
.transparent-preset span{width:100%;height:100%;position:absolute;background-image:linear-gradient(45deg,#ddd 25%,transparent 25%),linear-gradient(-45deg,#ddd 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#ddd 75%),linear-gradient(-45deg,transparent 75%,#ddd 75%);background-size:14px 14px;background-position:0 0,0 7px,7px -7px,-7px 0}
.transparent-preset small{position:relative;background:rgba(255,255,255,.85);padding:2px 5px;color:#555}
.scene-preset{background-size:cover;background-position:center}
.scene-sky{background:linear-gradient(180deg,#9dcfff 0 56%,#e9f4ff 57%)}
.scene-studio{background:linear-gradient(135deg,#f4d9e8,#70647b 52%,#24242d)}
.scene-city{background:linear-gradient(160deg,#a8c4d5 0 35%,#596d79 36% 50%,#d7dde0 51% 70%,#82949e 71%)}
.fit-control{margin-top:14px;display:flex;align-items:center;justify-content:space-between;font-size:.8rem;font-weight:700}
.fit-control[hidden]{display:none}
.segment{display:flex;border:1px solid var(--line);border-radius:4px;overflow:hidden}
.segment button{border:0;background:#fff;padding:6px 14px;font-size:.74rem}
.segment button.active{background:var(--primary);color:#fff}
.color-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.color-swatch,.custom-color{height:52px;border:2px solid var(--line);border-radius:4px;background:transparent}
.color-swatch.active,.custom-color.active{outline:2px solid var(--primary);outline-offset:2px}
.sw-white{background:#fff}.sw-gray{background:#e5e7eb}.sw-black{background:#111827}.sw-blue{background:#2563eb}.sw-green{background:#16a34a}.sw-red{background:#ef4444}
.custom-color{position:relative;overflow:hidden;display:grid;place-items:center;cursor:pointer}
.custom-color input{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;opacity:.75}
.custom-color span{position:relative;background:rgba(255,255,255,.82);font-size:.65rem;padding:2px 4px;border-radius:2px;pointer-events:none}
.actions{display:grid;gap:9px}
.actions[hidden]{display:none}
.primary-btn,.secondary-btn{border-radius:4px;padding:12px 18px;font-weight:700;border:1px solid var(--primary)}
.primary-btn{background:var(--primary);color:#fff}.primary-btn:hover{background:var(--primary-dark)}
.secondary-btn{background:#fff;color:var(--primary)}
.actions p,.privacy-note{margin:0;color:var(--muted);font-size:.72rem;text-align:center}
.privacy-note{padding:16px}
@media(max-width:760px){
  .editor-shell{height:auto;min-height:0;display:flex;flex-direction:column}
  .workspace{height:58vh;min-height:400px;border-right:0;border-bottom:1px solid var(--line)}
  .control-panel{overflow:visible}
  .image-presets{grid-template-columns:repeat(4,minmax(62px,1fr))}
}