*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--color-bg: #0f1117;--color-surface: #1a1d27;--color-surface-2: #22263a;--color-border: #2e3347;--color-border-hover: #4a5072;--color-text: #e8eaf0;--color-text-muted: #8891b0;--color-accent: #6c8cff;--color-accent-hover: #8ba3ff;--color-success: #4ade80;--color-warning: #facc15;--color-danger: #f87171;--radius: 10px;--radius-sm: 6px;--shadow: 0 4px 20px rgba(0, 0, 0, .4);--font: "Segoe UI", system-ui, -apple-system, sans-serif}html{background:var(--color-bg);color:var(--color-text);font-family:var(--font);font-size:16px;line-height:1.6;min-height:100%}body{min-height:100vh;display:flex;flex-direction:column}.app{display:flex;flex-direction:column;min-height:100vh;max-width:860px;margin:0 auto;padding:0 1rem}.main{flex:1;display:flex;flex-direction:column;gap:1.5rem;padding:1.5rem 0 2rem}.header{padding:2rem 0 1rem;text-align:center}.header__title{font-size:2.2rem;font-weight:700;letter-spacing:-.03em;background:linear-gradient(135deg,#6c8cff,#a78bfa);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.header__subtitle{margin-top:.4rem;color:var(--color-text-muted);font-size:.95rem}.section{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius);padding:1.5rem}.section__title{font-size:1rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.06em;margin-bottom:1.2rem}.drop-zone{border:2px dashed var(--color-border);border-radius:var(--radius);padding:3rem 2rem;text-align:center;cursor:pointer;transition:border-color .2s,background .2s;position:relative}.drop-zone:hover,.drop-zone:focus-visible{border-color:var(--color-accent);background:#6c8cff0d;outline:none}.drop-zone.is-dragging{border-color:var(--color-accent);background:#6c8cff1a}.drop-zone__icon{font-size:3rem;margin-bottom:.8rem;display:block}.drop-zone__text{font-size:1.1rem;font-weight:500;color:var(--color-text);margin-bottom:.3rem}.drop-zone__hint{color:var(--color-text-muted);font-size:.9rem}.drop-zone__link{color:var(--color-accent);text-decoration:underline}.drop-zone__formats{margin-top:1rem;font-size:.8rem;color:var(--color-text-muted)}.drop-zone__input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}.loading-msg{text-align:center;padding:.8rem;color:var(--color-text-muted);font-size:.9rem}.settings-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;align-items:end}.field{display:flex;flex-direction:column;gap:.5rem}.field--checkbox{justify-content:flex-end;padding-bottom:.2rem}.field--action{justify-content:flex-end}.field__label{font-size:.85rem;color:var(--color-text-muted);font-weight:500}.field__label strong{color:var(--color-text)}.field__select,.field__number{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text);font-size:.95rem;padding:.5rem .75rem;width:100%;transition:border-color .2s}.field__select:focus,.field__number:focus{border-color:var(--color-accent);outline:none}.field__select option{background:var(--color-surface-2)}.field__range{-webkit-appearance:none;appearance:none;width:100%;height:6px;background:var(--color-surface-2);border-radius:3px;outline:none;cursor:pointer}.field__range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;background:var(--color-accent);border-radius:50%;cursor:pointer;transition:background .2s}.field__range::-webkit-slider-thumb:hover{background:var(--color-accent-hover)}.field__checkbox-label{display:flex;align-items:center;gap:.5rem;cursor:pointer;font-size:.9rem;color:var(--color-text)}.field__checkbox-label input[type=checkbox]{width:16px;height:16px;accent-color:var(--color-accent);cursor:pointer}.btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;padding:.6rem 1.4rem;border-radius:var(--radius-sm);font-size:.95rem;font-weight:600;cursor:pointer;border:none;text-decoration:none;transition:opacity .2s,transform .1s}.btn:active{transform:scale(.97)}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.btn--primary{background:var(--color-accent);color:#fff;width:100%}.btn--primary:hover:not(:disabled){background:var(--color-accent-hover)}.btn--download{background:var(--color-success);color:#000;font-weight:700}.btn--download:hover{opacity:.85}.btn--secondary{background:var(--color-surface-2);color:var(--color-text);border:1px solid var(--color-border)}.btn--secondary:hover{border-color:var(--color-border-hover)}.preview-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem}@media (max-width: 560px){.preview-grid{grid-template-columns:1fr}}.preview-card{background:var(--color-surface-2);border:1px solid var(--color-border);border-radius:var(--radius-sm);padding:1rem;display:flex;flex-direction:column;gap:.75rem}.preview-card__title{font-size:.85rem;font-weight:600;color:var(--color-text-muted);text-transform:uppercase;letter-spacing:.05em}.preview-card__image-wrap{background:repeating-conic-gradient(#333 0% 25%,#222 0% 50%) 0 0 / 16px 16px;border-radius:var(--radius-sm);overflow:hidden;aspect-ratio:4 / 3;display:flex;align-items:center;justify-content:center}.preview-card__image{max-width:100%;max-height:100%;object-fit:contain;display:block}.preview-card__meta{font-size:.85rem;color:var(--color-text-muted);text-align:center}.stats{margin-top:1rem;padding:.75rem 1rem;background:var(--color-surface-2);border-radius:var(--radius-sm);font-size:.95rem;text-align:center}.stats .saved{color:var(--color-success);font-weight:700}.stats .increased{color:var(--color-warning);font-weight:700}.actions{display:flex;gap:.75rem;margin-top:1.2rem;flex-wrap:wrap}.footer{padding:1.5rem 0;text-align:center;color:var(--color-text-muted);font-size:.8rem;border-top:1px solid var(--color-border)}