*,:before,:after{box-sizing:border-box;margin:0;padding:0}:root{--bg:#080808;--bg-2:#0d0d0d;--surface:#111;--surface-2:#181818;--surface-3:#202020;--border:#222;--border-2:#2e2e2e;--border-3:#3a3a3a;--text:#efefef;--text-2:#999;--text-3:#555;--text-4:#333;--accent:#e8dcc8;--accent-dim:#b8ac98;--accent-glow:#e8dcc814;--green:#4ade80;--green-bg:#4ade8014;--red:#f87171;--red-bg:#f8717114;--yellow:#fbbf24;--yellow-bg:#fbbf2414;--blue:#60a5fa;--blue-bg:#60a5fa14;--radius:12px;--radius-sm:7px;--radius-xs:4px;--font-display:"DM Serif Display", Georgia, "Times New Roman", serif;--font-body:"DM Sans", system-ui, -apple-system, sans-serif;--ease:cubic-bezier(.4, 0, .2, 1);--ease-spring:cubic-bezier(.34, 1.56, .64, 1);--t-fast:.1s;--t:.16s;--t-slow:.28s}html{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizelegibility;font-size:16px}body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100dvh;line-height:1.55}a{color:var(--accent-dim);transition:color var(--t) var(--ease), text-decoration-color var(--t) var(--ease);text-decoration-color:#0000}a:hover{color:var(--accent);-webkit-text-decoration-color:var(--accent-dim);text-decoration-color:var(--accent-dim)}button{font-family:var(--font-body)}.app{flex-direction:column;min-height:100dvh;display:flex}.main{flex-direction:column;flex:1;gap:2rem;width:100%;max-width:1300px;margin:0 auto;padding:2.5rem 1.5rem 5rem;display:flex}.header{z-index:50;-webkit-backdrop-filter:blur(16px)saturate(180%);backdrop-filter:blur(16px)saturate(180%);border-bottom:1px solid var(--border);background:#080808d9;position:sticky;top:0}.header__inner{justify-content:space-between;align-items:center;gap:1rem;max-width:1300px;margin:0 auto;padding:.85rem 1.5rem;display:flex}.header__brand{align-items:center;gap:.6rem;display:flex}.header__logo-icon{width:26px;height:26px;color:var(--accent);flex-shrink:0}.header__name{font-family:var(--font-display);letter-spacing:-.025em;color:var(--text);font-size:1.35rem;line-height:1}.header__badges{align-items:center;gap:.5rem;display:flex}.badge{letter-spacing:.03em;color:var(--text-3);background:var(--surface);border:1px solid var(--border);border-radius:20px;align-items:center;gap:.3rem;padding:3px 9px;font-size:.72rem;font-weight:500;display:inline-flex}.badge__dot{background:var(--green);border-radius:50%;flex-shrink:0;width:6px;height:6px;animation:2.5s ease-in-out infinite pulse}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(.85)}}.badge__icon{flex-shrink:0;width:10px;height:10px}.hero{text-align:center;padding:1rem 0 0}.hero__title{font-family:var(--font-display);letter-spacing:-.03em;color:var(--text);margin-bottom:.6rem;font-size:clamp(1.8rem,4vw,2.8rem);line-height:1.1}.hero__sub{color:var(--text-2);max-width:44ch;margin:0 auto;font-size:.95rem;line-height:1.6}.drop-zone{border:1.5px dashed var(--border-2);border-radius:var(--radius);background:var(--surface);cursor:pointer;-webkit-user-select:none;user-select:none;transition:border-color var(--t) var(--ease), background var(--t) var(--ease), transform var(--t-fast) var(--ease-spring);outline:none;padding:3rem 2rem;position:relative;overflow:hidden}.drop-zone:before{content:"";background:var(--accent-glow);opacity:0;transition:opacity var(--t) var(--ease);pointer-events:none;position:absolute;inset:0}.drop-zone:hover,.drop-zone:focus-visible{border-color:var(--border-3);background:var(--surface-2)}.drop-zone:hover:before,.drop-zone:focus-visible:before{opacity:.5}.drop-zone--dragging{border-color:var(--accent-dim);background:var(--surface-2);transform:scale(1.005)}.drop-zone--dragging:before{opacity:1}.drop-zone--disabled{opacity:.4;cursor:not-allowed;pointer-events:none}.drop-zone__inner{flex-direction:column;align-items:center;gap:.85rem;display:flex;position:relative}.drop-zone__icon{width:52px;height:52px;color:var(--text-4);transition:color var(--t) var(--ease), transform var(--t-slow) var(--ease-spring)}.drop-zone:hover .drop-zone__icon,.drop-zone--dragging .drop-zone__icon{color:var(--accent-dim);transform:translateY(-3px)}.drop-zone__text{color:var(--text-2);text-align:center;font-size:.95rem;line-height:1.5}.drop-zone__text--active{color:var(--accent);font-weight:500}.drop-zone__cta{color:var(--accent-dim);text-underline-offset:3px;transition:color var(--t) var(--ease);-webkit-text-decoration:underline dotted;text-decoration:underline dotted}.drop-zone:hover .drop-zone__cta{color:var(--accent)}.drop-zone__hint{color:var(--text-3);text-align:center;letter-spacing:.025em;font-size:.75rem}.batch-controls{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-sm);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding:.85rem 1.1rem;display:flex}.batch-controls__left{align-items:center;gap:1rem;min-width:0;display:flex}.batch-controls__count{color:var(--text-3);white-space:nowrap;font-variant-numeric:tabular-nums;font-size:.82rem}.batch-controls__progress{align-items:center;gap:.6rem;display:flex}.batch-controls__bar{background:var(--border-2);border-radius:2px;width:120px;height:3px;overflow:hidden}.batch-controls__bar-fill{background:var(--accent);height:100%;transition:width .35s var(--ease);border-radius:2px}.batch-controls__pct{color:var(--text-2);font-variant-numeric:tabular-nums;min-width:2.8ch;font-size:.72rem}.batch-controls__actions{flex-wrap:wrap;align-items:center;gap:.45rem;display:flex}.grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:.875rem;display:grid}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);transition:border-color var(--t) var(--ease), transform var(--t-fast) var(--ease);flex-direction:column;display:flex;overflow:hidden}.card:hover{border-color:var(--border-2);transform:translateY(-1px)}.card--done{border-color:#1a3327}.card--done:hover{border-color:#254d3a}.card--error{border-color:#331a1a}.card--error:hover{border-color:#4d2525}.card__preview{aspect-ratio:1;background:var(--bg-2);flex-shrink:0;position:relative;overflow:hidden}.card__img-wrap{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.card__img-wrap--checker{background-color:#111;background-image:linear-gradient(45deg,#1c1c1c 25%,#0000 25%),linear-gradient(-45deg,#1c1c1c 25%,#0000 25%),linear-gradient(45deg,#0000 75%,#1c1c1c 75%),linear-gradient(-45deg,#0000 75%,#1c1c1c 75%);background-position:0 0,0 10px,10px -10px,-10px 0;background-size:20px 20px}.card__img-wrap--empty{color:var(--text-4);font-size:.75rem}.card__img{object-fit:contain;max-width:100%;max-height:100%;display:block}.card__preview-tabs{z-index:2;gap:3px;display:flex;position:absolute;top:8px;left:8px}.card__tab{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid var(--border-2);color:var(--text-3);border-radius:var(--radius-xs);cursor:pointer;transition:all var(--t-fast) var(--ease);letter-spacing:.02em;background:#080808cc;padding:3px 8px;font-size:.68rem;font-weight:500}.card__tab:hover{color:var(--text-2);border-color:var(--border-3)}.card__tab--active{background:var(--surface-3);color:var(--text);border-color:var(--border-3)}.card__overlay{-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#080808b3;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;display:flex;position:absolute;inset:0}.card__overlay--queued{background:#08080880}.card__overlay-text{color:var(--text-2);font-variant-numeric:tabular-nums;letter-spacing:.02em;font-size:.75rem}.card__progress-bar{background:var(--border-2);border-radius:1px;width:60%;height:2px;overflow:hidden}.card__progress-fill{background:var(--accent);height:100%;transition:width .3s var(--ease);border-radius:1px}.card__spinner{border:2px solid var(--border-2);border-top-color:var(--accent);border-radius:50%;flex-shrink:0;width:22px;height:22px;animation:.75s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.card__info{border-top:1px solid var(--border);justify-content:space-between;align-items:flex-start;gap:.5rem;min-width:0;padding:.7rem .85rem;display:flex}.card__meta{flex:1;min-width:0}.card__filename{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.78rem;line-height:1.3;overflow:hidden}.card__filesize{color:var(--text-3);font-variant-numeric:tabular-nums;margin-top:2px;font-size:.7rem}.card__status{letter-spacing:.04em;text-transform:uppercase;white-space:nowrap;border-radius:20px;flex-shrink:0;padding:2px 7px;font-size:.67rem;font-weight:600;line-height:1.6}.card__status--idle{background:var(--surface-3);color:var(--text-3)}.card__status--queued{background:var(--blue-bg);color:var(--blue)}.card__status--loading,.card__status--processing{background:var(--yellow-bg);color:var(--yellow)}.card__status--done{background:var(--green-bg);color:var(--green)}.card__status--error{background:var(--red-bg);color:var(--red)}.card__error{color:var(--red);border-top:1px solid #2a1515;padding:.5rem .85rem .6rem;font-size:.71rem;line-height:1.45}.card__actions{flex-wrap:wrap;align-items:center;gap:.4rem;padding:.5rem .75rem .75rem;display:flex}.card__remove{flex-shrink:0;margin-left:auto}.btn{font-family:var(--font-body);border-radius:var(--radius-sm);cursor:pointer;transition:background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease-spring), opacity var(--t-fast) var(--ease);white-space:nowrap;border:1px solid #0000;align-items:center;gap:.4rem;padding:.5rem 1rem;font-size:.85rem;font-weight:500;line-height:1;text-decoration:none;display:inline-flex}.btn svg{flex-shrink:0;width:14px;height:14px}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.4;cursor:not-allowed}.btn--sm{padding:.35rem .7rem;font-size:.77rem}.btn--sm svg{width:12px;height:12px}.btn--primary{background:var(--accent);color:#080808;border-color:var(--accent)}.btn--primary:hover:not(:disabled){background:var(--text);border-color:var(--text)}.btn--secondary{color:var(--text-2);border-color:var(--border-2);background:0 0}.btn--secondary:hover:not(:disabled){color:var(--text);border-color:var(--border-3);background:var(--surface-2)}.btn--ghost{color:var(--text-3);background:0 0;border-color:#0000}.btn--ghost:hover:not(:disabled){color:var(--text-2);background:var(--surface-2)}.btn__spinner{border:1.5px solid #0808084d;border-top-color:#080808;border-radius:50%;flex-shrink:0;width:12px;height:12px;animation:.75s linear infinite spin}.btn__badge{min-width:18px;height:18px;color:inherit;background:#0000002e;border-radius:9px;flex-shrink:0;justify-content:center;align-items:center;padding:0 5px;font-size:.68rem;font-weight:700;line-height:1;display:inline-flex}.empty-state{padding:1rem 0 2rem}.empty-state__features{background:var(--border);border:1px solid var(--border);border-radius:var(--radius);grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px;display:grid;overflow:hidden}.empty-state__feature{background:var(--surface);flex-direction:column;gap:.35rem;padding:1.5rem 1.25rem;display:flex}.empty-state__icon{margin-bottom:.15rem;font-size:1.3rem;line-height:1}.empty-state__feature strong{color:var(--text);font-size:.85rem;font-weight:600}.empty-state__feature p{color:var(--text-3);font-size:.78rem;line-height:1.4}.footer{border-top:1px solid var(--border);text-align:center;padding:1.25rem 1.5rem}.footer p{color:var(--text-4);font-size:.73rem;line-height:1.5}@media (width<=768px){.main{gap:1.5rem;padding:1.5rem 1rem 3.5rem}.drop-zone{padding:2rem 1.25rem}.hero__title{font-size:1.6rem}.header__badges{display:none}.grid{grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:.625rem}.batch-controls{flex-direction:column;align-items:flex-start;gap:.75rem}.batch-controls__progress{width:100%}.batch-controls__bar{flex:1;width:auto}.batch-controls__actions{width:100%}.batch-controls__actions .btn{flex:1;justify-content:center}.empty-state__features{grid-template-columns:1fr 1fr}}@media (width<=480px){.grid{grid-template-columns:1fr 1fr}.hero{padding:0}.empty-state__features{grid-template-columns:1fr 1fr}}@media (width<=360px){.grid{grid-template-columns:1fr}}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:var(--bg)}::-webkit-scrollbar-thumb{background:var(--border-2);border-radius:3px}::-webkit-scrollbar-thumb:hover{background:var(--border-3)}:focus-visible{outline:2px solid var(--accent-dim);outline-offset:2px}