*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui;background:#0a0d14;color:#edf1ff;min-height:100vh}body.light{background:#f2f5fb;color:#182033}.app{max-width:1440px;margin:auto;padding:22px 28px}.topbar{display:flex;justify-content:space-between;align-items:center}.brand{display:flex;gap:12px;align-items:center}.brand-icon{display:grid;place-items:center;width:43px;height:43px;border-radius:14px;background:linear-gradient(135deg,#7c5cff,#18c8ff);box-shadow:0 0 28px #6955ff44}.brand b{display:block;font-size:18px}.brand small{color:#8e99b6;font-size:10px;letter-spacing:2px}.top-actions{display:flex;gap:12px;align-items:center}.pill,.status{font-size:11px;padding:9px 12px;border:1px solid #293149;border-radius:99px;color:#a9b5d2}.icon-btn,.mini-btn{background:#141a29;border:1px solid #2b354f;color:#c8d2ed;border-radius:10px;padding:9px 12px;cursor:pointer}.hero{display:flex;justify-content:space-between;align-items:center;padding:64px 0 38px}.eyebrow{color:#8b78ff;font-weight:800;font-size:11px;letter-spacing:2px}.hero h1{font-size:clamp(30px,4vw,58px);line-height:1.12;margin:13px 0}.hero h1 span{background:linear-gradient(90deg,#a48bff,#54d9ff);-webkit-background-clip:text;color:transparent}.hero p{color:#98a4c0;max-width:560px;line-height:1.7}.hero-art{font-size:130px;color:#293453;position:relative}.hero-art i:last-child{font-size:45px;color:#8b78ff;position:absolute;right:0;top:0}.dropzone{border:1px dashed #465477;background:radial-gradient(circle at 50% 0,#1b2140,#101522 65%);border-radius:22px;padding:40px;text-align:center;cursor:pointer;transition:.2s}.dropzone.drag{border-color:#8b78ff;transform:scale(1.01)}.upload-symbol{margin:auto;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:#29204e;color:#ad9bff;font-size:25px}.dropzone h2{margin:17px 0 8px}.dropzone p{color:#a7b2cb}.text-btn{background:none;border:0;color:#8e7bff;font-weight:700;cursor:pointer}.dropzone small{color:#687694}.workspace{display:grid;grid-template-columns:280px 1fr;gap:18px;margin-top:22px}.panel{background:#101522;border:1px solid #222d45;border-radius:20px;overflow:hidden}.panel-title{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid #222d45}.panel-title h3{font-size:14px;margin:0}.panel-title i{color:#9a86ff;margin-right:8px}.queue-empty{padding:45px 15px;text-align:center;color:#65728f;font-size:12px}.queue-empty i{font-size:38px;margin-bottom:12px}.queue-item{display:flex;gap:10px;align-items:center;padding:12px;border-bottom:1px solid #222d45;cursor:pointer}.queue-item.active{background:#211d3b}.queue-item img{width:48px;height:48px;object-fit:cover;border-radius:9px}.queue-item b{display:block;font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:175px}.queue-item small{color:#71809d;font-size:10px}.editor-panel{min-width:0}.empty-editor{text-align:center;padding:100px 20px;color:#71809d}.empty-editor i{font-size:50px;color:#394565}.preview-wrap{margin:20px;background:#0a0d14;border:1px solid #26314a;border-radius:16px;min-height:280px;display:grid;place-items:center;position:relative;padding:20px;background-image:linear-gradient(45deg,#121a2a 25%,transparent 25%),linear-gradient(-45deg,#121a2a 25%,transparent 25%),linear-gradient(45deg,transparent 75%,#121a2a 75%),linear-gradient(-45deg,transparent 75%,#121a2a 75%);background-size:24px 24px;background-position:0 0,0 12px,12px -12px,-12px 0}.preview-wrap canvas{max-width:100%;max-height:480px;object-fit:contain;box-shadow:0 12px 40px #0007}.preview-meta{position:absolute;bottom:10px;right:12px;background:#080b12cc;border-radius:8px;padding:6px 9px;font-size:10px;color:#b9c5e2}.controls{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;padding:0 20px}.control-card{background:#151c2c;border:1px solid #27334c;border-radius:15px;padding:16px}.control-card h4{font-size:12px;margin:0 0 15px}.control-card h4 i{color:#9a86ff;margin-right:7px}.ratio-row,.format-row{display:flex;flex-wrap:wrap;gap:6px}.ratio-row button,.format-row button{background:#0e1421;border:1px solid #303c58;color:#aebbd5;padding:8px 10px;border-radius:8px;font-size:11px;cursor:pointer}.ratio-row button.active,.format-row button.active{background:#6550d7;border-color:#8876ff;color:#fff}.crop-grid,.size-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:12px 0}.control-card label{font-size:10px;color:#8e9ab6;display:block}.control-card input[type=number]{width:100%;margin-top:6px;background:#0d1320;border:1px solid #303c58;border-radius:8px;color:#fff;padding:9px;min-width:0}.secondary,.primary{border:1px solid #394763;background:#1b2436;color:#dce5ff;padding:11px 14px;border-radius:10px;font-weight:700;font-size:11px;cursor:pointer}.primary{background:linear-gradient(100deg,#6952e6,#3a9de8);border:0;box-shadow:0 6px 22px #5c48df44}.full{width:100%}.check{display:flex!important;gap:8px;align-items:flex-start;margin-top:14px;line-height:1.5}.check input{accent-color:#8876ff}.check em{display:block;color:#6f7e9c;font-style:normal;font-size:9px}.hint{margin-top:12px;color:#7887a5;font-size:9px;line-height:1.5}.hint i{color:#8e7bff}.quality-label{margin-top:18px!important}.quality-label b{float:right;color:#c4baff}.quality-label input{width:100%;accent-color:#8b78ff}.export-bar{display:flex;gap:10px;align-items:center;justify-content:flex-end;padding:22px 20px}.export-bar>div{margin-right:auto}.export-bar b,.export-bar small{display:block}.export-bar small{font-size:10px;color:#71809d;margin-top:5px}.hash-box{margin:0 20px 20px;padding:14px;background:#0b111d;border:1px solid #27334c;border-radius:12px}.hash-box>div{display:flex;justify-content:space-between;font-size:11px}.hash-box b{color:#b6c2df}.hash-box code{display:block;color:#7fe2bb;font-size:10px;word-break:break-all;margin-top:12px;line-height:1.7}footer{text-align:center;color:#53617d;font-size:10px;padding:30px}.light .panel,.light .control-card{background:#fff;border-color:#dbe2ef}.light .panel-title{border-color:#e3e8f2}.light .control-card input[type=number],.light .ratio-row button,.light .format-row button{background:#f2f5fb;color:#27334c}.light .dropzone{background:#fff}.light .pill,.light .status{border-color:#d5ddea;color:#596784}.light .icon-btn,.light .mini-btn{background:#fff;color:#27334c}@media(max-width:1000px){.workspace{grid-template-columns:1fr}.queue-panel{order:2}.controls{grid-template-columns:1fr}.hero-art{display:none}}@media(max-width:600px){.app{padding:16px}.hero{padding:40px 0 25px}.dropzone{padding:28px 15px}.top-actions .pill{display:none}.export-bar{flex-wrap:wrap;justify-content:stretch}.export-bar>div{width:100%;margin-bottom:5px}.export-bar button{flex:1}.preview-wrap{margin:12px}.controls{padding:0 12px}.panel-title{padding:15px}}
.queue-item{position:relative}.single-download{margin-left:auto;padding:6px 8px;font-size:10px}.modal{position:fixed;inset:0;background:#050812cc;backdrop-filter:blur(12px);display:grid;place-items:center;padding:18px;z-index:20}.modal[hidden]{display:none}.modal-card{width:min(960px,100%);background:#111827;border:1px solid #45517a;border-radius:22px;padding:20px;box-shadow:0 25px 100px #0009}.modal-head{display:flex;justify-content:space-between;align-items:center}.modal-head h3{margin:0}.modal-note{color:#8e9ab6;font-size:12px}.crop-stage{background:#080c15;border:1px solid #303d5c;border-radius:15px;overflow:auto;text-align:center;padding:12px;max-height:65vh}.crop-stage canvas{max-width:100%;cursor:crosshair;touch-action:none}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:15px}@media(max-width:600px){.modal-card{padding:14px}.modal-actions button{flex:1}}

.url-modal{position:fixed;inset:0;background:#050810bb;backdrop-filter:blur(12px);display:grid;place-items:center;padding:20px;z-index:20}.url-dialog{position:relative;width:min(480px,100%);background:#121a2a;border:1px solid #465477;border-radius:20px;padding:26px;box-shadow:0 20px 80px #0009}.url-dialog h3{margin-top:0}.url-dialog p{font-size:12px;color:#93a1bf;line-height:1.6}.url-dialog input{width:100%;padding:13px;border-radius:10px;border:1px solid #35435f;background:#0b111d;color:#fff;margin:12px 0 15px}.close-url{position:absolute;right:15px;top:15px;font-size:18px}.light .url-dialog{background:#fff}.light .url-dialog input{background:#f4f6fb;color:#182033}