*{box-sizing:border-box}
:root{--bg:#0b0d10;--panel:#14171c;--panel2:#191d23;--line:#2a3038;--text:#f5f7fa;--muted:#9ca6b4;--accent:#6ee7b7;--accent2:#34d399;--danger:#fb7185;--warning:#fbbf24}
html{color-scheme:dark}
body{margin:0;min-width:320px;min-height:100vh;background:radial-gradient(circle at top left,rgba(52,211,153,.08),transparent 34%),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{-webkit-tap-highlight-color:transparent}button:focus-visible,input:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.app{width:min(1180px,calc(100% - 32px));margin:0 auto;padding:42px 0 64px}.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:26px;margin-bottom:26px}.eyebrow,.section-kicker{margin:0 0 8px;color:var(--accent);font-size:12px;font-weight:850;letter-spacing:.16em}.section-kicker{font-size:11px}h1{margin:0;font-size:clamp(38px,6vw,66px);line-height:.98;letter-spacing:-.055em}h1 span{color:var(--accent)}h2{margin:0;letter-spacing:-.035em}.subtitle{max-width:720px;margin:16px 0 0;color:var(--muted);font-size:17px;line-height:1.6}.panel{border:1px solid var(--line);border-radius:22px;background:linear-gradient(180deg,var(--panel2),var(--panel))}.hidden{display:none!important}
.settings-btn,.primary-btn,.secondary-btn,.ghost-btn,.danger-btn,.primary-small-btn,.secondary-small-btn,.remove-btn{min-height:46px;border-radius:14px;cursor:pointer;font-weight:850;transition:transform .16s ease,opacity .16s ease,border-color .16s ease,background .16s ease}.settings-btn{flex:0 0 auto;padding:0 18px;border:1px solid rgba(110,231,183,.34);background:rgba(110,231,183,.08);color:var(--accent)}.settings-btn:hover,.secondary-btn:hover,.ghost-btn:hover,.secondary-small-btn:hover{border-color:var(--accent)}.settings-btn:active,.primary-btn:active,.secondary-btn:active,.ghost-btn:active,.danger-btn:active,.primary-small-btn:active,.secondary-small-btn:active,.remove-btn:active{transform:translateY(1px)}
.quality-shell,.batch-panel{padding:20px}.section-head,.batch-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:22px;margin-bottom:18px}.section-head h2,.batch-heading h2{font-size:clamp(24px,4vw,34px)}.section-head p:not(.section-kicker),.batch-heading p:not(.section-kicker){max-width:760px;margin:9px 0 0;color:var(--muted);line-height:1.55}.ghost-btn,.secondary-btn,.secondary-small-btn{padding:0 17px;border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--text)}
.upload-box{width:100%;min-height:238px;padding:34px 20px;border:1px dashed #3b4450;border-radius:18px;background:rgba(255,255,255,.015);color:var(--text);cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;text-align:center;transition:border-color .18s ease,background .18s ease,transform .18s ease}.upload-box:hover,.upload-box.dragging{border-color:var(--accent);background:rgba(52,211,153,.045)}.upload-box:active{transform:scale(.997)}.upload-icon{width:54px;height:54px;display:grid;place-items:center;margin-bottom:5px;border-radius:16px;background:var(--accent);color:#082017;font-size:29px;font-weight:950}.upload-box strong{font-size:21px}.upload-box span{color:var(--muted)}.upload-box small{max-width:700px;margin-top:4px;color:#788291;line-height:1.5}.quality-workspace{margin-top:18px}.controls-panel{padding:24px}.control-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:18px}.control-heading h2{font-size:clamp(21px,3vw,30px)}.quality-badge{min-width:76px;padding:10px 14px;border-radius:14px;background:var(--accent);color:#062319;text-align:center;font-weight:950;font-size:20px}.slider-wrap{margin-top:27px}input[type=range]{width:100%;accent-color:var(--accent2);cursor:pointer}.slider-labels{display:flex;justify-content:space-between;margin-top:8px;color:var(--muted);font-size:12px}.metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}.metric{min-width:0;padding:17px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.02)}.metric span{display:block;margin-bottom:8px;color:var(--muted);font-size:12px;font-weight:750}.metric strong{display:block;overflow-wrap:anywhere;font-size:clamp(19px,4vw,29px)}.metric.featured{border-color:rgba(52,211,153,.38);background:rgba(52,211,153,.055)}.metric.featured strong{color:var(--accent)}.processing-message,.batch-message{margin-top:16px;color:var(--muted);font-size:13px}.preview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin-top:18px}.preview-card{min-width:0;overflow:hidden}.result-card{border-color:rgba(52,211,153,.24)}.preview-header{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 18px;border-bottom:1px solid var(--line)}.preview-header div{min-width:0}.preview-header span{display:block;margin-bottom:4px;color:var(--muted);font-size:10px;font-weight:800;letter-spacing:.11em}.preview-header strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}.preview-header .dimensions{flex:0 0 auto;margin:0;letter-spacing:0;font-size:11px}.image-stage{min-height:400px;display:grid;place-items:center;padding:16px}.image-stage img{display:block;width:100%;height:100%;max-height:560px;object-fit:contain}.checkerboard{background-color:#12151a;background-image:linear-gradient(45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(-45deg,rgba(255,255,255,.025) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,rgba(255,255,255,.025) 75%),linear-gradient(-45deg,transparent 75%,rgba(255,255,255,.025) 75%);background-size:28px 28px;background-position:0 0,0 14px,14px -14px,-14px 0}.quality-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:18px;flex-wrap:wrap}.primary-btn,.primary-small-btn{padding:0 20px;border:0;background:var(--accent);color:#062319}.primary-btn:disabled,.secondary-btn:disabled,.danger-btn:disabled{cursor:not-allowed;opacity:.42}
.active-quality{flex:0 0 auto;min-width:126px;padding:12px 15px;border:1px solid rgba(110,231,183,.26);border-radius:15px;background:rgba(110,231,183,.055)}.active-quality span{display:block;margin-bottom:3px;color:var(--muted);font-size:11px;font-weight:750}.active-quality strong{color:var(--accent);font-size:21px}.upload-actions{display:flex;justify-content:center;gap:10px;margin-top:12px;flex-wrap:wrap}.primary-small-btn,.secondary-small-btn{min-height:42px;padding:0 16px}.batch-message.error{color:var(--danger)}.batch-message.success{color:var(--accent)}.list-section{margin-top:20px}.list-toolbar{display:flex;align-items:flex-end;justify-content:space-between;gap:18px;margin-bottom:13px}.list-toolbar h2{font-size:24px}.list-actions{display:flex;gap:10px;flex-wrap:wrap}.danger-btn{padding:0 18px;border:1px solid rgba(251,113,133,.3);background:rgba(251,113,133,.07);color:#fda4af}.danger-btn:hover{border-color:var(--danger)}.files-panel{overflow:hidden}.files-head,.file-row{display:grid;grid-template-columns:minmax(260px,2fr) 110px 110px minmax(115px,.8fr) 44px;gap:12px;align-items:center}.files-head{padding:12px 16px;border-bottom:1px solid var(--line);color:#737d8b;font-size:10px;font-weight:850;letter-spacing:.1em;text-transform:uppercase}.file-row{padding:12px 16px;border-bottom:1px solid rgba(42,48,56,.78)}.file-row:last-child{border-bottom:0}.file-main{min-width:0;display:flex;align-items:center;gap:12px}.file-thumb{width:48px;height:48px;flex:0 0 auto;border-radius:10px;border:1px solid var(--line);background:#0f1216;object-fit:cover}.file-info{min-width:0}.file-name{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:780}.file-sub{display:block;margin-top:3px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#707a88;font-size:11px}.file-size{color:var(--muted);font-size:12px}.file-size.result{color:var(--accent);font-weight:750}.status{font-size:12px;font-weight:750}.status.processing{color:var(--warning)}.status.ready{color:var(--accent)}.status.error{color:var(--danger)}.remove-btn{width:40px;min-height:40px;padding:0;border:1px solid var(--line);background:rgba(255,255,255,.025);color:var(--muted);font-size:18px}.remove-btn:hover{border-color:var(--danger);color:var(--danger)}.note{margin-top:20px;padding:14px 16px;border-left:3px solid var(--accent);color:var(--muted);font-size:13px;line-height:1.6}.note b,.note strong{color:var(--text)}
@media(max-width:820px){.app{width:min(100% - 20px,1180px);padding-top:25px}.topbar,.section-head,.batch-heading,.control-heading,.list-toolbar{flex-direction:column;align-items:stretch}.settings-btn,.ghost-btn{align-self:flex-start}.active-quality{align-self:flex-start}.metrics,.preview-grid{grid-template-columns:1fr}.image-stage{min-height:280px}.quality-actions,.list-actions{display:grid;grid-template-columns:1fr}.quality-actions button,.list-actions button{width:100%}.files-panel{overflow-x:auto}.files-head,.file-row{min-width:720px}}