:root{
  color-scheme:dark;
  --bg:#0d0f12;
  --surface:#15181d;
  --surface-2:#1a1e24;
  --surface-3:#101216;
  --line:#2b3038;
  --line-strong:#3b424d;
  --text:#f2f3f5;
  --muted:#9ba2ad;
  --accent:#a9c8ff;
  --accent-bg:#1b2940;
  --danger:#ffb4b4;
}
*{box-sizing:border-box}
html{min-width:320px}
body{
  margin:0;
  min-height:100vh;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}
button,input{font:inherit}
button{color:inherit}
button:focus-visible,input:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.app-shell{width:min(1540px,calc(100% - 28px));margin:0 auto;padding:22px 0 32px}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;padding-bottom:17px;border-bottom:1px solid var(--line)}
.brand{display:block;color:inherit;text-decoration:none;min-width:0}.brand:hover h1{color:#fff}.brand h1{margin:0;font-size:24px;line-height:1.15;letter-spacing:-.02em;transition:color .14s}.brand h1 span{font-size:14px;font-weight:600;color:var(--muted);letter-spacing:0}.brand p{margin:5px 0 0;color:var(--muted);font-size:13px}.header-actions{display:flex;align-items:center;gap:12px}.header-button{border:1px solid var(--line-strong);background:var(--surface);border-radius:6px;padding:7px 10px;color:#d7dde7;font-size:11px;font-weight:800;cursor:pointer}.header-button:hover{background:var(--surface-2);border-color:#4b5562}.header-button:active{transform:translateY(1px)}
.file-area{display:grid;grid-template-columns:minmax(260px,360px) 1fr;gap:12px;padding:14px 0;border-bottom:1px solid var(--line)}
.add-files{min-height:64px;border:1px solid var(--line-strong);background:var(--surface);border-radius:7px;display:flex;align-items:center;gap:11px;padding:10px 12px;text-align:left;cursor:pointer;transition:background .14s,border-color .14s,transform .14s}.add-files:hover,.add-files.drag{background:var(--surface-2);border-color:#566171}.add-files:active{transform:translateY(1px)}
.add-icon{width:32px;height:32px;border:1px solid var(--line-strong);border-radius:5px;display:grid;place-items:center;font-size:20px;color:var(--accent);flex:0 0 auto}.add-files span:last-child{display:grid;gap:2px;min-width:0}.add-files strong{font-size:13px}.add-files small{font-size:11px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.queue-wrap{min-width:0;background:var(--surface-3);border:1px solid var(--line);border-radius:7px;padding:8px}.queue-head{display:flex;align-items:center;justify-content:space-between;gap:10px;font-size:11px;color:var(--muted);padding:0 2px 7px}.plain-button{border:0;background:transparent;padding:2px 3px;color:#b7c2d2;font-size:11px;font-weight:700;cursor:pointer}.plain-button:hover{color:#fff;text-decoration:underline}.danger-link{color:#d6a7a7}.danger-link:hover{color:#ffd0d0}
.image-queue{display:flex;gap:7px;overflow:auto;padding:1px 1px 3px;scrollbar-width:thin}.queue-item{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 28px;align-items:stretch;min-width:190px;max-width:230px;height:54px;border:1px solid var(--line);background:var(--surface);border-radius:6px;overflow:hidden;transition:border-color .14s,background .14s}.queue-item:hover{background:var(--surface-2);border-color:#444c58}.queue-item.active{border-color:#7391bf;background:#172131}.queue-main{min-width:0;border:0;background:transparent;color:inherit;display:grid;grid-template-columns:42px minmax(0,1fr);align-items:center;gap:8px;padding:5px;text-align:left;cursor:pointer}.queue-main:active{transform:translateY(1px)}.queue-thumb{width:42px;height:42px;object-fit:cover;border-radius:4px;background:#090a0c}.queue-label{min-width:0}.queue-label strong,.queue-label small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.queue-label strong{font-size:11px}.queue-label small{font-size:10px;color:var(--muted);margin-top:2px}.queue-remove{width:28px;border:0;border-left:1px solid transparent;background:transparent;color:#9ba2ad;cursor:pointer;font-size:17px;line-height:1;display:grid;place-items:center;transition:background .12s,color .12s,border-color .12s}.queue-remove:hover,.queue-remove:focus-visible{background:#2b1b1e;color:#ffc3c3;border-left-color:#553036;outline:none}.queue-remove:active{background:#351d21}
.workspace{display:none;padding-top:13px}.workspace.visible{display:block;animation:workspace-in .18s ease-out}@keyframes workspace-in{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
.workspace-toolbar{min-height:42px;display:flex;align-items:center;justify-content:space-between;gap:12px}.selection-tools,.toolbar-actions{display:flex;align-items:center;gap:9px;flex-wrap:wrap}.check-label{display:flex;align-items:center;gap:6px;color:#c4c9d1;font-size:11px;font-weight:700;cursor:pointer}.check-label input{accent-color:#9dbfff}.selection-count{font-size:10px;color:var(--muted);padding-right:7px;border-right:1px solid var(--line)}.quality-toggle{color:#b9c6da}
.btn{border-radius:6px;padding:8px 10px;border:1px solid var(--line-strong);font-size:11px;font-weight:800;cursor:pointer;transition:background .14s,border-color .14s,transform .12s}.btn:active{transform:translateY(1px)}.btn.ghost{background:transparent}.btn.ghost:hover{background:var(--surface)}.btn.secondary{background:var(--surface-2)}.btn.secondary:hover{background:#252b33}.btn.primary{background:#e8edf6;color:#11151a;border-color:#e8edf6}.btn.primary:hover{background:#fff}.btn:disabled{opacity:.42;cursor:not-allowed;transform:none}
.active-file-line{display:flex;align-items:center;gap:8px;margin:5px 0 11px;padding:7px 9px;background:var(--surface-3);border:1px solid var(--line);border-radius:6px;font-size:11px;min-width:0}.active-file-line>span{color:var(--muted)}.active-file-line strong{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.active-file-actions{margin-left:auto;display:flex;align-items:center;gap:8px}.active-file-actions .plain-button{margin-left:0}
.editor-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(255px,.72fr) minmax(280px,1fr);gap:10px;align-items:stretch}.format-card{min-width:0;border:1px solid var(--line);background:var(--surface);border-radius:7px;overflow:hidden;transition:border-color .14s,opacity .14s}.format-card:not(.selected){opacity:.64}.format-card.selected{border-color:#39424f}.card-head{height:46px;display:grid;grid-template-columns:22px 1fr 28px;align-items:center;gap:7px;padding:0 10px;border-bottom:1px solid var(--line)}.format-select{width:18px;height:18px;display:grid;place-items:center;cursor:pointer}.format-select input{position:absolute;opacity:0}.format-select span{width:15px;height:15px;border:1px solid #58606b;border-radius:3px;background:#0f1114}.format-select input:checked+span{background:#c8dbff;border-color:#c8dbff;box-shadow:inset 0 0 0 3px #182437}.format-title{min-width:0}.format-title strong,.format-title small{display:block}.format-title strong{font-size:12px}.format-title small{font-size:10px;color:var(--muted);margin-top:1px}.icon-button{width:28px;height:28px;border:0;border-radius:5px;background:transparent;color:#aeb7c5;font-size:16px;cursor:pointer}.icon-button:hover{background:#252a31;color:#fff}
.source-row{min-height:36px;display:flex;align-items:center;gap:8px;padding:6px 9px;border-bottom:1px solid var(--line);background:var(--surface-3)}.source-name{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#b8c0cc;font-size:10px}.source-actions{display:flex;align-items:center;gap:7px;flex:0 0 auto}.source-actions .plain-button{font-size:10px}.stage{position:relative;width:100%;background:#050607;overflow:hidden;touch-action:none;user-select:none}.stage-landscape{aspect-ratio:16/9}.stage-portrait{aspect-ratio:9/16;max-height:52vh}.stage-square{aspect-ratio:1/1}.stage canvas{display:block;width:100%;height:100%;cursor:grab}.stage canvas.dragging{cursor:grabbing}.drag-hint{position:absolute;left:8px;bottom:8px;padding:4px 6px;border-radius:4px;background:rgba(5,6,7,.68);border:1px solid rgba(255,255,255,.12);font-size:9px;color:#d5d9df;pointer-events:none;opacity:.8;transition:opacity .14s}.stage:hover .drag-hint{opacity:1}
.crop-controls{height:43px;display:grid;grid-template-columns:27px 1fr 27px 45px;align-items:center;gap:7px;padding:0 9px;border-top:1px solid var(--line)}.zoom-button{width:27px;height:27px;border:1px solid var(--line);border-radius:5px;background:var(--surface-3);cursor:pointer}.zoom-button:hover{background:#252a31}.zoom-slider{width:100%;accent-color:#a6c5fb}.zoom-value{font-size:10px;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums}.download-one{width:100%;height:36px;border:0;border-top:1px solid var(--line);background:var(--surface-3);color:#d4dae4;font-size:10px;font-weight:800;cursor:pointer}.download-one:hover{background:#20252c;color:#fff}.download-one:disabled{opacity:.5;cursor:wait}
.tipbar{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-top:10px;color:var(--muted);font-size:10px}.local-note{white-space:nowrap}
.empty-help{padding:14px 0;color:var(--muted);font-size:12px;line-height:1.5}.empty-help p{margin:0 0 4px}.empty-help strong{color:#d8dde5}
.toast{position:fixed;left:50%;bottom:20px;transform:translate(-50%,10px);background:#eef2f8;color:#11151a;border-radius:6px;padding:9px 11px;font-size:11px;font-weight:750;opacity:0;pointer-events:none;transition:opacity .16s,transform .16s;box-shadow:0 10px 35px rgba(0,0,0,.35);z-index:20}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(max-width:980px){.file-area{grid-template-columns:1fr}.editor-grid{grid-template-columns:1fr 1fr}.format-card[data-id="landscape"]{grid-column:1/-1}.stage-portrait{max-height:none}.workspace-toolbar{align-items:flex-start;flex-direction:column}.toolbar-actions{width:100%}.btn{flex:1}.selection-tools{width:100%}}
@media(max-width:660px){.app-shell{width:min(100% - 18px,1540px);padding-top:14px}.topbar{align-items:center}.header-actions{gap:8px}.header-button{padding:6px 8px}.brand h1{font-size:21px}.brand h1 span{display:block;margin-top:3px}.brand p{display:none}.file-area{padding:10px 0}.editor-grid{grid-template-columns:1fr}.format-card[data-id="landscape"]{grid-column:auto}.stage-portrait{max-height:68vh}.selection-tools{gap:7px}.toolbar-actions{display:grid;grid-template-columns:1fr 1fr}.btn.ghost{grid-column:1/-1}.source-row{align-items:flex-start;flex-direction:column}.source-actions{width:100%;justify-content:space-between}.active-file-line{align-items:flex-start;flex-wrap:wrap}.active-file-actions{width:100%;margin-left:0;justify-content:flex-end}.tipbar{align-items:flex-start;flex-direction:column}.local-note{white-space:normal}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation:none!important;transition:none!important}}

.confirm-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.62);display:grid;place-items:center;padding:18px;z-index:50;backdrop-filter:blur(3px)}.confirm-backdrop[hidden]{display:none}.confirm-dialog{width:min(100%,410px);background:#171a1f;border:1px solid #343a44;border-radius:9px;padding:18px;box-shadow:0 24px 70px rgba(0,0,0,.5);animation:dialog-in .14s ease-out}.confirm-dialog h2{margin:0 0 7px;font-size:16px;letter-spacing:-.01em}.confirm-dialog p{margin:0;color:var(--muted);font-size:12px;line-height:1.55}.confirm-pref{display:flex;align-items:center;gap:7px;margin-top:14px;color:#c3c9d2;font-size:11px;cursor:pointer}.confirm-pref input{accent-color:#a9c8ff}.confirm-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:18px}.confirm-actions .btn{min-width:92px}@keyframes dialog-in{from{opacity:0;transform:translateY(4px) scale(.99)}to{opacity:1;transform:none}}