:root{--bg:#0b0d10;--panel:#11151a;--panel2:#151a20;--line:#262d35;--line2:#35404b;--text:#f3f5f7;--muted:#9099a4;--soft:#68717c;--accent:#f2f4f6;--max:1080px}
*{box-sizing:border-box}[hidden]{display:none!important}html{background:var(--bg);color-scheme:dark}body{margin:0;min-height:100vh;background:radial-gradient(circle at 50% -12%,rgba(255,255,255,.065),transparent 32rem),var(--bg);color:var(--text);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
button,input,select{font:inherit}button,input,select{-webkit-tap-highlight-color:transparent}.page-shell{width:min(calc(100% - 32px),var(--max));margin:auto}main{padding:58px 0 42px}.hero{max-width:760px;margin-bottom:30px}.eyebrow{color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;margin-bottom:11px}h1{margin:0;font-size:clamp(42px,6vw,68px);line-height:1;letter-spacing:-.055em}.hero p{max-width:680px;margin:16px 0 0;color:var(--muted);font-size:15px;line-height:1.65}.quality-pill{display:inline-flex;align-items:center;gap:8px;margin-top:16px;padding:7px 10px;border:1px solid var(--line);border-radius:999px;color:#c7cdd4;background:rgba(255,255,255,.025);font-size:11px;font-weight:720}.quality-pill span{font-size:12px}
.workspace{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(300px,.75fr);gap:16px;align-items:start}.main-column{display:grid;gap:16px}.panel{border:1px solid var(--line);border-radius:22px;background:rgba(17,21,26,.94);box-shadow:0 24px 80px rgba(0,0,0,.16)}.upload-panel{padding:16px}.drop-zone{min-height:238px;display:grid;place-items:center;align-content:center;gap:7px;border:1px dashed var(--line2);border-radius:16px;background:#0d1115;text-align:center;cursor:pointer;transition:border-color .16s ease,background .16s ease}.drop-zone:hover,.drop-zone.dragover{border-color:#5a6673;background:#10151a}.drop-zone:focus-visible,.button:focus-visible,.segment:focus-visible,.text-btn:focus-visible,.item-btn:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid rgba(255,255,255,.72);outline-offset:2px}.upload-icon{width:42px;height:42px;display:grid;place-items:center;margin-bottom:4px;border:1px solid var(--line2);border-radius:12px;color:#d9dde2;background:#14191f;font-size:24px;font-weight:300}.drop-zone strong{font-size:15px}.drop-zone span{color:var(--muted);font-size:13px}.drop-zone small{margin-top:5px;color:var(--soft);font-size:11px}
.image-panel,.preview-panel,.controls-panel{padding:18px}.panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;margin-bottom:15px}.panel-head h2{margin:0;font-size:15px;letter-spacing:-.015em}.panel-head p{margin:4px 0 0;color:var(--soft);font-size:11px}.text-btn{border:0;background:transparent;color:#b7bec6;padding:4px 0;font-size:12px;font-weight:700}.text-btn:hover{color:#fff}
.image-list{display:grid;gap:8px}.image-item{display:grid;grid-template-columns:58px minmax(0,1fr) auto;gap:11px;align-items:center;padding:9px;border:1px solid var(--line);border-radius:13px;background:#0d1115}.thumb-wrap{width:58px;height:58px;display:grid;place-items:center;overflow:hidden;border-radius:9px;background:#090b0d}.thumb{max-width:100%;max-height:100%;display:block}.item-copy{min-width:0}.item-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12px;font-weight:700}.item-meta{display:block;margin-top:4px;color:var(--soft);font-size:10px}.item-actions{display:flex;align-items:center;gap:2px}.item-btn{width:30px;height:30px;display:grid;place-items:center;border:0;border-radius:8px;background:transparent;color:var(--muted);font-size:13px}.item-btn:hover{background:#181e24;color:#fff}.item-btn:disabled{opacity:.25;cursor:not-allowed}.crop-box{grid-column:1/-1;display:none;padding:10px;border-top:1px solid var(--line);grid-template-columns:repeat(4,1fr);gap:8px}.image-item.crop-open .crop-box{display:grid}.crop-field{display:grid;gap:5px}.crop-field span{color:var(--soft);font-size:9px}.crop-field input{width:100%;height:34px;border:1px solid var(--line);border-radius:8px;background:#11161b;color:var(--text);padding:0 8px;font-size:11px}
.preview-stage{min-height:250px;max-height:620px;display:grid;place-items:center;overflow:auto;border:1px solid var(--line);border-radius:15px;background:repeating-conic-gradient(#11161b 0 25%,#0d1115 0 50%) 50%/18px 18px}.preview-stage canvas{display:block;max-width:none}.size-badge{flex:0 0 auto;padding:6px 8px;border:1px solid var(--line);border-radius:999px;color:#aeb6bf;font-size:10px}.preview-foot{margin-top:10px;color:var(--soft);font-size:10.5px;line-height:1.55}
.controls-panel{position:sticky;top:16px}.control-section{padding:0 0 18px;margin-bottom:18px;border-bottom:1px solid var(--line)}.control-section:last-child{padding-bottom:0;margin-bottom:0;border:0}.section-title{margin-bottom:10px;color:#c6ccd3;font-size:11px;font-weight:780;letter-spacing:.02em}.segmented{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;padding:4px;border:1px solid var(--line);border-radius:12px;background:#0d1115}.segmented.three{grid-template-columns:repeat(3,1fr)}.segment{min-height:38px;border:1px solid transparent;border-radius:8px;background:transparent;color:var(--muted);font-size:11px;font-weight:740;cursor:pointer}.segment.active{border-color:rgba(255,255,255,.1);background:#20262d;color:#fff}.field{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:11px;color:#b8bfc7;font-size:11px}.field select{min-width:130px;height:38px;border:1px solid var(--line);border-radius:10px;background:#0d1115;color:var(--text);padding:0 10px}.field-inline{display:flex;align-items:center;gap:6px}.field-inline input{width:74px;height:38px;border:1px solid var(--line);border-radius:10px;background:#0d1115;color:var(--text);padding:0 9px;text-align:right}.field-inline em{color:var(--soft);font-size:10px;font-style:normal}.hint{margin:4px 0 0;color:var(--soft);font-size:10.5px;line-height:1.55}.output-info{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:11px}.output-info div{padding:10px;border:1px solid var(--line);border-radius:11px;background:#0d1115}.output-info span{display:block;color:var(--soft);font-size:9px}.output-info strong{display:block;margin-top:4px;font-size:12px}.warning{margin-bottom:10px;padding:9px 10px;border:1px solid #534629;border-radius:10px;background:#1c1810;color:#c9b989;font-size:10px;line-height:1.5}.button{width:100%;min-height:44px;border:1px solid var(--line2);border-radius:11px;font-size:12px;font-weight:760;cursor:pointer}.button.primary{background:var(--accent);border-color:var(--accent);color:#0b0d10}.button.secondary{margin-top:7px;background:#14191f;color:#b9c0c8}.button:hover:not(:disabled){filter:brightness(1.06)}.button:disabled{opacity:.38;cursor:not-allowed}.status{min-height:16px;margin-top:9px;color:var(--muted);font-size:10.5px;line-height:1.45}.status.error{color:#e0a2a2}.status.ok{color:#a9cbb2}
.privacy-note{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px;padding:14px 16px;border:1px solid var(--line);border-radius:15px;color:var(--soft);font-size:11px;line-height:1.55}.privacy-note strong{color:#c8ced5}
@media(max-width:840px){.workspace{grid-template-columns:1fr}.controls-panel{position:static;order:-1}.control-section.output-section{margin-top:0}.preview-stage{max-height:520px}}
@media(max-width:560px){.page-shell{width:min(calc(100% - 24px),var(--max))}main{padding:46px 0 28px}.hero{margin-bottom:24px}.hero p{font-size:14px}.panel{border-radius:18px}.upload-panel,.image-panel,.preview-panel,.controls-panel{padding:14px}.drop-zone{min-height:190px}.image-item{grid-template-columns:50px minmax(0,1fr);gap:9px}.thumb-wrap{width:50px;height:50px}.item-actions{grid-column:1/-1;justify-content:flex-end;border-top:1px solid var(--line);padding-top:7px}.crop-box{grid-template-columns:repeat(2,1fr)}.panel-head{margin-bottom:12px}.output-info{grid-template-columns:1fr}.privacy-note{margin-top:12px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.list-toggle{display:none;width:100%;min-height:42px;margin-top:10px;border:1px solid var(--line);border-radius:11px;background:#0d1115;color:#b9c0c8;font-size:11px;font-weight:740;cursor:pointer}
.image-item.dragging{opacity:.48;border-color:#5c6875}.drag-handle{cursor:grab;touch-action:none}.drag-handle:active{cursor:grabbing}
.mobile-export{display:none}
@media(max-width:840px){
    html.has-images body{padding-bottom:82px}
  html.has-images .hero{margin-bottom:14px}
  html.has-images .hero p{display:none}
  html.has-images .quality-pill{margin-top:11px}
    .main-column .preview-panel{order:1}
  .main-column .image-panel{order:2}
  .main-column .upload-panel{order:0}
  .preview-stage{max-height:58vh;min-height:300px;align-items:start;justify-items:center;padding:10px 0}
  .preview-stage canvas{max-width:none}
  .list-toggle{display:block}
  html.has-images:not(.list-expanded) .image-item:nth-child(n+4){display:none}
  .mobile-export{position:fixed;z-index:60;left:0;right:0;bottom:0;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(12px,calc((100vw - min(calc(100vw - 24px),1080px))/2));padding-bottom:max(10px,env(safe-area-inset-bottom));border-top:1px solid rgba(255,255,255,.12);background:rgba(11,13,16,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 -12px 34px rgba(0,0,0,.3)}
  .mobile-export[hidden]{display:none}
  .mobile-export-copy{min-width:0;display:grid;gap:2px}.mobile-export-copy span{color:var(--soft);font-size:9px;font-weight:720;letter-spacing:.04em}.mobile-export-copy strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px}
  .mobile-export button{flex:0 0 auto;min-height:42px;padding:0 16px;border:0;border-radius:11px;background:var(--accent);color:#0b0d10;font-size:11px;font-weight:800}
  .mobile-export button:disabled{opacity:.45}
}
@media(max-width:560px){
  html.has-images main{padding-top:30px}
  html.has-images .hero h1{font-size:38px}
  .controls-panel{padding:12px}
  .control-section{padding-bottom:13px;margin-bottom:13px}
  .output-info{grid-template-columns:repeat(2,1fr)}
  .image-panel{padding:12px}
  .image-item{grid-template-columns:46px minmax(0,1fr) auto;gap:8px;padding:8px}
  .thumb-wrap{width:46px;height:46px}
  .item-actions{grid-column:auto;border-top:0;padding-top:0;gap:0}
  .item-btn{width:32px;height:32px}
  .item-actions [data-act="up"],.item-actions [data-act="down"]{display:none}
  .preview-panel{padding:12px}
  .preview-stage{min-height:320px;max-height:62vh}
  .preview-foot{font-size:10px}
}