*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Arial,sans-serif;background:#ebebea;color:#1a1a1a;font-size:13px}
.app-shell{display:flex;height:100vh;width:100vw;overflow:hidden}

/* Sidebar */
.sidebar{width:72px;background:#16162a;display:flex;flex-direction:column;align-items:center;padding:14px 0 16px;flex-shrink:0}
.sb-logo{width:36px;height:36px;border-radius:9px;background:#3b82f6;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0}
.sb-logo span{color:#fff;font-size:11px;font-weight:700}
.sb-nav{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%}
.sb-item{width:62px;min-height:52px;border-radius:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 3px;text-decoration:none;cursor:pointer;transition:background .15s}
.sb-item:hover{background:rgba(255,255,255,.08)}
.sb-item.active{background:rgba(59,130,246,.22);border:1px solid rgba(59,130,246,.4)}
.sb-icon{font-size:16px;line-height:1}
.sb-label{font-size:8.5px;color:rgba(255,255,255,.4);font-weight:500;text-align:center;line-height:1.25}
.sb-item.active .sb-label{color:rgba(255,255,255,.9)}
.sb-divider{width:36px;height:1px;background:rgba(255,255,255,.08);margin:6px 0}

/* Main */
.main-area{flex:1;display:flex;flex-direction:column;min-width:0;overflow:hidden}
.topbar{height:46px;background:#fff;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,.05)}
.topbar-title{font-size:14px;font-weight:600;color:#111;white-space:nowrap}
.topbar-badge{font-size:10px;padding:2px 9px;border-radius:20px;background:#fef3c7;color:#92400e;font-weight:600;border:1px solid #fde68a}
.topbar-actions{margin-left:auto}
.tb-btn{font-size:12px;padding:5px 13px;border-radius:6px;border:1px solid #d5d5d5;background:#fff;color:#333;cursor:pointer;font-weight:500;transition:all .15s;white-space:nowrap}
.tb-btn:hover{background:#f5f5f5}
.tb-btn.primary{background:#1d4ed8;color:#fff;border-color:#1d4ed8}
.tb-btn.primary:hover{background:#1e40af}
.tb-btn:disabled{opacity:.4;cursor:not-allowed}
.content-row{display:flex;flex:1;min-height:0;overflow:hidden}

/* Controls */
.controls-panel{width:260px;background:#fff;border-right:1px solid #e5e5e5;overflow-y:auto;flex-shrink:0;scrollbar-width:thin;scrollbar-color:#ddd transparent}
.controls-panel::-webkit-scrollbar{width:4px}
.controls-panel::-webkit-scrollbar-thumb{background:#ddd;border-radius:2px}
.ctrl-section{border-bottom:1px solid #f0f0f0}
.ctrl-head{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;cursor:pointer;transition:background .12s}
.ctrl-head:hover{background:#fafafa}
.ctrl-title{font-size:10.5px;font-weight:700;color:#666;text-transform:uppercase;letter-spacing:.06em}
.ctrl-chevron{font-size:10px;color:#bbb;transition:transform .2s}
.ctrl-section.collapsed .ctrl-chevron{transform:rotate(-90deg)}
.ctrl-section.collapsed .ctrl-body{display:none}
.ctrl-body{padding:6px 10px 12px}
.section-hint{font-size:10.5px;color:#aaa;margin-bottom:8px}

/* Platform blocks */
.platform-block{margin-bottom:8px;border:1px solid #f0f0f0;border-radius:6px;overflow:hidden}
.platform-head{background:#f8f8f8;padding:6px 10px;border-bottom:1px solid #f0f0f0}
.platform-check{font-size:11.5px;font-weight:600;color:#333;display:flex;align-items:center;gap:6px;cursor:pointer}
.platform-check input{accent-color:#3b82f6;width:13px;height:13px}
.size-checks{padding:6px 10px;display:flex;flex-direction:column;gap:4px}
.size-check{font-size:11px;color:#555;display:flex;align-items:center;gap:6px;cursor:pointer;padding:2px 0}
.size-check input{accent-color:#3b82f6;width:12px;height:12px;flex-shrink:0}
.ratio-tag{font-size:9px;color:#999;background:#f0f0f0;padding:1px 5px;border-radius:8px;margin-left:auto}

/* Custom size */
.custom-input-row{display:flex;align-items:center;gap:5px;margin-bottom:6px}
.custom-dim{width:60px;height:26px;border:1px solid #ddd;border-radius:5px;padding:0 6px;font-size:11px;text-align:center;outline:none}
.custom-dim:focus{border-color:#3b82f6}
.add-custom-btn{height:26px;padding:0 8px;background:#1d4ed8;color:#fff;border:none;border-radius:5px;font-size:11px;cursor:pointer;font-weight:600;white-space:nowrap}
.add-custom-btn:hover{background:#1e40af}
.custom-item{display:flex;align-items:center;gap:5px;font-size:11px;color:#555;padding:2px 0}
.custom-item input{accent-color:#3b82f6;width:12px;height:12px;flex-shrink:0}
.custom-remove{background:none;border:none;color:#c00;cursor:pointer;font-size:11px;padding:0 2px}
.custom-remove:hover{text-decoration:underline}

/* Fit mode */
.mode-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.mode-opt{border:1px solid #e0e0e0;border-radius:7px;padding:8px 4px;text-align:center;cursor:pointer;background:#fafafa;transition:all .15s;user-select:none;display:flex;flex-direction:column;align-items:center;gap:2px}
.mode-opt input{display:none}
.mode-opt:hover{border-color:#3b82f6;background:#f0f7ff}
.mode-opt.active{border-color:#7c3aed;background:#f5f3ff}
.mode-icon{font-size:18px}
.mode-label{font-size:10px;font-weight:600;color:#444}
.mode-opt.active .mode-label{color:#5b21b6}
.mode-sub{font-size:9px;color:#999;line-height:1.3}

/* Format */
.format-row{display:flex;gap:6px}
.format-opt{flex:1;border:1px solid #e0e0e0;border-radius:7px;padding:7px;text-align:center;cursor:pointer;background:#fafafa;font-size:12px;font-weight:600;color:#555;transition:all .15s;user-select:none}
.format-opt input{display:none}
.format-opt:hover{border-color:#3b82f6;color:#1d4ed8;background:#f0f7ff}
.format-opt.active{border-color:#1d4ed8;background:#eff6ff;color:#1d4ed8}

/* Toggle */
.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:8px}
.toggle{position:relative;width:36px;height:20px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:#ddd;border-radius:10px;cursor:pointer;transition:.2s}
.toggle-slider:before{content:'';position:absolute;width:14px;height:14px;left:3px;top:3px;background:#fff;border-radius:50%;transition:.2s}
.toggle input:checked+.toggle-slider{background:#3b82f6}
.toggle input:checked+.toggle-slider:before{transform:translateX(16px)}

/* Form rows */
.cf-row{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.cf-label{font-size:11px;color:#777;min-width:60px;flex-shrink:0}
.cf-input{flex:1;height:26px;border:1px solid #e2e2e2;border-radius:5px;background:#fafafa;padding:0 8px;font-size:11.5px;color:#111;outline:none;font-family:inherit;transition:border-color .15s}
.cf-input:focus{border-color:#3b82f6;background:#fff}
.cf-range{flex:1;accent-color:#3b82f6;cursor:pointer}
.cf-val{font-size:11px;font-weight:600;color:#444;min-width:32px;text-align:right}
.swatch-input{border:1px solid #e0e0e0;border-radius:5px;padding:2px;cursor:pointer}
.upload-zone{border:1.5px dashed #d0d0d0;border-radius:6px;padding:12px;text-align:center;cursor:pointer;position:relative;transition:all .2s;background:#fafafa}
.upload-zone:hover{border-color:#3b82f6;background:#f0f7ff}
.upload-zone input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.upload-icon{font-size:22px;margin-bottom:5px}
.upload-zone p{font-size:11px;color:#999}
.remove-btn{font-size:11px;color:#c00;background:none;border:none;cursor:pointer}
.remove-btn:hover{text-decoration:underline}
.render-btn{width:100%;height:40px;background:linear-gradient(135deg,#7c3aed,#3b82f6);color:#fff;border:none;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;transition:opacity .15s}
.render-btn:hover{opacity:.9}
.render-btn:disabled{opacity:.4;cursor:not-allowed;background:#aaa}

/* Preview area */
.preview-area{flex:1;display:flex;flex-direction:column;background:#e8e8e6;min-width:0;overflow:hidden}
.preview-topbar{height:36px;background:#fff;border-bottom:1px solid #e5e5e5;display:flex;align-items:center;padding:0 16px;gap:10px;flex-shrink:0}
.preview-label{font-size:11px;color:#999;font-weight:500}
.preview-hint{font-size:11px;color:#aaa;margin-left:auto}
.canvas-grid{flex:1;overflow-y:auto;padding:14px;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px;align-content:start;scrollbar-width:thin;scrollbar-color:#ccc transparent}
.canvas-grid::-webkit-scrollbar{width:5px}
.canvas-grid::-webkit-scrollbar-thumb{background:#ccc;border-radius:3px}

/* Empty state */
.empty-state{grid-column:1/-1;display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:300px;gap:10px;color:#aaa}
.empty-icon{font-size:48px}
.empty-state p{font-size:14px;font-weight:500;color:#bbb}
.empty-state small{font-size:12px;color:#ccc}

/* Size card */
.size-card{background:#fff;border-radius:10px;border:1px solid #e5e5e5;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,.06);display:flex;flex-direction:column}
.size-card-header{display:flex;align-items:center;padding:8px 12px;border-bottom:1px solid #f0f0f0;background:#fafafa;gap:8px;flex-wrap:wrap}
.size-name{font-size:11.5px;font-weight:600;color:#111}
.size-dims{font-size:10px;color:#888;background:#f0f0f0;padding:2px 6px;border-radius:10px}
.size-platform{font-size:9.5px;color:#999;margin-left:auto}
.size-card-footer{display:flex;align-items:center;padding:8px 12px;border-top:1px solid #f0f0f0;gap:6px}
.dl-btn{font-size:11px;padding:4px 10px;border-radius:5px;border:1px solid #1d4ed8;color:#1d4ed8;background:#eff6ff;cursor:pointer;font-weight:500;transition:all .15s}
.dl-btn:hover{background:#1d4ed8;color:#fff}
.canvas-outer{position:relative;width:100%;background:#e8e8e6;overflow:hidden}
.canvas-outer canvas{display:block;width:100%;height:auto}

/* Spinner overlay */
.rendering-badge{font-size:10px;color:#7c3aed;font-weight:600;margin-left:auto}

@media(max-width:700px){
  .controls-panel{width:200px}
  .canvas-grid{grid-template-columns:1fr}
}