:root{--color-bg-deepest: #0a0a0f;--color-bg-body: #0f0f1a;--color-bg-elevated: #1a1a2e;--color-bg-surface: #16162b;--color-bg-input: #12121f;--color-bg-overlay: rgba(5, 5, 12, .85);--color-glass-subtle: rgba(255, 255, 255, .03);--color-glass-light: rgba(255, 255, 255, .05);--color-glass-medium: rgba(255, 255, 255, .08);--color-glass-strong: rgba(255, 255, 255, .12);--color-glass-hover: rgba(255, 255, 255, .1);--color-primary: #ff4757;--color-primary-light: #ff6b81;--color-primary-dark: #ff3333;--color-secondary: #2ed573;--color-secondary-light: #7bed9f;--color-secondary-dark: #27ae60;--gradient-primary: linear-gradient(135deg, #ff4757, #2ed573);--gradient-primary-hover: linear-gradient(135deg, #ff6b81, #7bed9f);--gradient-primary-subtle:linear-gradient(135deg, rgba(255, 71, 87, .15), rgba(46, 213, 115, .15));--gradient-primary-text: linear-gradient(90deg, #4caf4f 0%,#4caf50 10%, #ffeb3b 20%,#ffeb3b 30%, #f44336 40%, #f44336 100%);--gradient-card: linear-gradient(145deg, rgba(255, 71, 87, .05), rgba(46, 213, 115, .02));--gradient-shimmer: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, .04) 50%, transparent 100%);--gradient-glow: radial-gradient(ellipse at center, rgba(255, 71, 87, .15), transparent 70%);--color-success: #00d4aa;--color-success-light: #00e4ba;--color-success-bg: rgba(0, 212, 170, .1);--color-success-border: rgba(0, 212, 170, .3);--color-warning: #fdcb6e;--color-warning-light: #ffeaa7;--color-warning-bg: rgba(253, 203, 110, .1);--color-warning-border: rgba(253, 203, 110, .3);--color-error: #ff6b6b;--color-error-light: #ff8787;--color-error-bg: rgba(255, 107, 107, .1);--color-error-border: rgba(255, 107, 107, .3);--color-info: #74b9ff;--color-info-bg: rgba(116, 185, 255, .1);--color-info-border: rgba(116, 185, 255, .3);--color-text-primary: #e8e8ee;--color-text-secondary: #8888a0;--color-text-muted: #55556a;--color-text-inverse: #0a0a0f;--color-text-link: #ff6b81;--color-text-link-hover: #ff8e9f;--color-border: rgba(255, 255, 255, .06);--color-border-hover: rgba(255, 255, 255, .12);--color-border-focus: rgba(255, 71, 87, .5);--color-border-active: rgba(255, 71, 87, .7);--color-border-dashed: rgba(255, 255, 255, .1);--font-family-primary: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, sans-serif;--font-family-mono: "JetBrains Mono", "Fira Code", "Cascadia Code", "Consolas", monospace;--font-size-2xs: .625rem;--font-size-xs: .75rem;--font-size-sm: .8125rem;--font-size-base: .875rem;--font-size-md: 1rem;--font-size-lg: 1.125rem;--font-size-xl: 1.25rem;--font-size-2xl: 1.5rem;--font-size-3xl: 1.875rem;--font-size-4xl: 2.25rem;--font-size-5xl: 3rem;--font-weight-regular: 400;--font-weight-medium: 500;--font-weight-semibold: 600;--font-weight-bold: 700;--font-weight-extrabold: 800;--line-height-tight: 1.2;--line-height-snug: 1.35;--line-height-normal: 1.5;--line-height-relaxed: 1.65;--line-height-loose: 1.8;--letter-spacing-tight: -.02em;--letter-spacing-normal: 0;--letter-spacing-wide: .02em;--letter-spacing-wider: .04em;--letter-spacing-widest: .08em;--space-0: 0;--space-px: 1px;--space-0-5: .125rem;--space-1: .25rem;--space-1-5: .375rem;--space-2: .5rem;--space-2-5: .625rem;--space-3: .75rem;--space-4: 1rem;--space-5: 1.25rem;--space-6: 1.5rem;--space-8: 2rem;--space-10: 2.5rem;--space-12: 3rem;--space-16: 4rem;--space-20: 5rem;--space-24: 6rem;--radius-xs: 4px;--radius-sm: 6px;--radius-md: 8px;--radius-lg: 12px;--radius-xl: 16px;--radius-2xl: 20px;--radius-3xl: 24px;--radius-full: 9999px;--shadow-xs: 0 1px 2px rgba(0, 0, 0, .3);--shadow-sm: 0 2px 4px rgba(0, 0, 0, .3), 0 1px 2px rgba(0, 0, 0, .2);--shadow-md: 0 4px 12px rgba(0, 0, 0, .4), 0 2px 4px rgba(0, 0, 0, .2);--shadow-lg: 0 8px 24px rgba(0, 0, 0, .5), 0 4px 8px rgba(0, 0, 0, .3);--shadow-xl: 0 16px 48px rgba(0, 0, 0, .5), 0 8px 16px rgba(0, 0, 0, .3);--shadow-2xl: 0 24px 64px rgba(0, 0, 0, .6);--shadow-inner: inset 0 1px 3px rgba(0, 0, 0, .4);--shadow-glow-primary: 0 2px 8px rgba(255, 71, 87, .25);--shadow-glow-success: 0 2px 8px rgba(0, 212, 170, .2);--shadow-glow-error: 0 2px 8px rgba(255, 107, 107, .2);--shadow-glow-btn: 0 2px 4px rgba(0, 0, 0, .25);--shadow-glow-btn-hover: 0 4px 8px rgba(0, 0, 0, .35);--shadow-card: 0 4px 16px rgba(0, 0, 0, .3), 0 0 1px rgba(255, 255, 255, .05);--shadow-card-hover: 0 8px 32px rgba(0, 0, 0, .5), 0 0 1px rgba(255, 255, 255, .08);--backdrop-blur-sm: blur(8px);--backdrop-blur-md: blur(16px);--backdrop-blur-lg: blur(24px);--backdrop-blur-xl: blur(40px);--transition-fastest: .1s;--transition-fast: .15s;--transition-normal: .2s;--transition-moderate: .3s;--transition-slow: .4s;--transition-slower: .5s;--transition-slowest: .7s;--ease-default: cubic-bezier(.4, 0, .2, 1);--ease-in: cubic-bezier(.4, 0, 1, 1);--ease-out: cubic-bezier(0, 0, .2, 1);--ease-in-out: cubic-bezier(.4, 0, .2, 1);--ease-bounce: cubic-bezier(.34, 1.56, .64, 1);--ease-spring: cubic-bezier(.175, .885, .32, 1.275);--ease-smooth: cubic-bezier(.25, .46, .45, .94);--transition-color: color var(--transition-normal) var(--ease-default);--transition-bg: background-color var(--transition-normal) var(--ease-default);--transition-border: border-color var(--transition-normal) var(--ease-default);--transition-shadow: box-shadow var(--transition-moderate) var(--ease-default);--transition-transform: transform var(--transition-normal) var(--ease-default);--transition-opacity: opacity var(--transition-normal) var(--ease-default);--transition-all: all var(--transition-normal) var(--ease-default);--z-behind: -1;--z-base: 0;--z-raised: 10;--z-dropdown: 100;--z-sticky: 200;--z-header: 300;--z-overlay: 400;--z-modal: 500;--z-toast: 600;--z-tooltip: 700;--z-max: 9999;--container-max: 1200px;--container-padding: var(--space-5);--sidebar-width: 300px;--header-height: 64px;--main-gap: var(--space-6);--bp-xs: 480px;--bp-sm: 640px;--bp-md: 768px;--bp-lg: 1024px;--bp-xl: 1200px;--bp-2xl: 1440px;--upload-min-height: 240px;--upload-min-height-sm: 140px;--upload-border-width: 2px;--upload-border-dash: 10px;--upload-border-gap: 8px;--upload-icon-size: 64px;--slider-track-height: 6px;--slider-thumb-size: 20px;--toggle-width: 44px;--toggle-height: 24px;--toggle-thumb-size: 18px;--card-min-width: 280px;--card-thumb-aspect: 16 / 10;--progress-height: 6px;--toast-width: 360px;--toast-border-left-width: 4px;--modal-max-width: 900px;--modal-max-height: 85vh}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:100%;-moz-text-size-adjust:100%;text-size-adjust:100%;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;scroll-behavior:smooth;tab-size:4;line-height:1.15}body{font-family:var(--font-family-primary);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background-color:var(--color-bg-body);min-height:100vh;overflow-x:hidden;background-image:radial-gradient(ellipse 60% 40% at 50% 0%,rgba(108,92,231,.06) 0%,transparent 60%),radial-gradient(ellipse 50% 30% at 80% 90%,rgba(0,206,201,.04) 0%,transparent 50%);background-attachment:fixed}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit;line-height:var(--line-height-tight)}a{color:var(--color-text-link);text-decoration:none;transition:var(--transition-color)}a:hover{color:var(--color-text-link-hover)}a:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px;border-radius:var(--radius-xs)}img,svg,video,canvas{display:block;max-width:100%;height:auto}button,input,select,textarea{font:inherit;color:inherit;background:none;border:none;outline:none}button{cursor:pointer;-webkit-tap-highlight-color:transparent}ul,ol{list-style:none}table{border-collapse:collapse;border-spacing:0}fieldset{border:none}summary{cursor:pointer}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:var(--color-bg-deepest)}::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:var(--radius-full);border:2px solid var(--color-bg-deepest)}::-webkit-scrollbar-thumb:hover{background:#ffffff2e}*{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.1) var(--color-bg-deepest)}::selection{background:#6c5ce759;color:#fff}::-moz-selection{background:#6c5ce759;color:#fff}:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}:focus:not(:focus-visible){outline:none}.container{width:100%;max-width:var(--container-max);margin-inline:auto;padding-inline:var(--container-padding)}.visually-hidden{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.glass-card{background:var(--color-glass-light);backdrop-filter:var(--backdrop-blur-md);-webkit-backdrop-filter:var(--backdrop-blur-md);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-card);transition:var(--transition-shadow),var(--transition-border),var(--transition-transform)}.glass-card:hover{border-color:var(--color-border-hover);box-shadow:var(--shadow-card-hover)}.glass-card--static:hover{border-color:var(--color-border);box-shadow:var(--shadow-card)}.glass-card--subtle{background:var(--color-glass-subtle);box-shadow:var(--shadow-sm)}.gradient-text{background:var(--gradient-primary-text);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-0-5) var(--space-2);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-wide);border-radius:var(--radius-full);white-space:nowrap;background:var(--color-glass-medium);color:var(--color-text-secondary);border:1px solid var(--color-border)}.badge--success{background:var(--color-success-bg);color:var(--color-success);border-color:var(--color-success-border)}.badge--error{background:var(--color-error-bg);color:var(--color-error);border-color:var(--color-error-border)}.badge--warning{background:var(--color-warning-bg);color:var(--color-warning);border-color:var(--color-warning-border)}.badge--info{background:var(--color-info-bg);color:var(--color-info);border-color:var(--color-info-border)}.badge--primary{background:#6c5ce71f;color:var(--color-primary-light);border-color:#6c5ce74d}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-2-5) var(--space-5);font-size:var(--font-size-base);font-weight:var(--font-weight-semibold);line-height:var(--line-height-tight);letter-spacing:var(--letter-spacing-wide);border-radius:var(--radius-lg);border:1px solid transparent;cursor:pointer;user-select:none;white-space:nowrap;position:relative;overflow:hidden;transition:var(--transition-all),box-shadow var(--transition-moderate) var(--ease-default)}.btn:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.btn:disabled,.btn[disabled]{opacity:.4;cursor:not-allowed;pointer-events:none}.btn svg{width:18px;height:18px;flex-shrink:0}.btn--primary{background:var(--color-primary);color:#fff;font-weight:var(--font-weight-bold);border:none;box-shadow:var(--shadow-glow-btn);text-shadow:0 1px 2px rgba(0,0,0,.2)}.btn--primary:hover{background:var(--color-primary-dark);box-shadow:var(--shadow-glow-btn-hover);transform:translateY(-1px) scale(1.02)}.btn--primary:active{transform:translateY(0) scale(.98);box-shadow:var(--shadow-glow-primary)}.btn--secondary{background:var(--color-glass-light);color:var(--color-text-primary);border:1px solid var(--color-border);backdrop-filter:var(--backdrop-blur-sm)}.btn--secondary:hover{background:var(--color-glass-medium);border-color:var(--color-border-hover);transform:translateY(-1px)}.btn--secondary:active{transform:translateY(0);background:var(--color-glass-strong)}.btn--outline{background:transparent;color:var(--color-primary-light);border:1px solid var(--color-primary)}.btn--outline:hover{background:#6c5ce71a;border-color:var(--color-primary-light)}.btn--ghost{background:var(--color-glass-strong);color:var(--color-text-secondary);border:none;padding:var(--space-2)}.btn--ghost:hover{background:var(--color-glass-light);color:var(--color-text-primary)}.btn--icon{padding:var(--space-2);border-radius:var(--radius-md);background:var(--color-glass-subtle);color:var(--color-text-secondary);border:1px solid var(--color-border)}.btn--icon:hover{background:var(--color-glass-medium);color:var(--color-text-primary);border-color:var(--color-border-hover)}.btn--icon svg{width:18px;height:18px}.btn--sm{padding:var(--space-1-5) var(--space-3);font-size:var(--font-size-xs);border-radius:var(--radius-md)}.btn--sm svg{width:14px;height:14px}.btn--lg{padding:var(--space-3) var(--space-8);font-size:var(--font-size-md);border-radius:var(--radius-xl)}.btn--full{width:100%}.btn--danger{background:var(--color-error-bg);color:var(--color-error);border:1px solid var(--color-error-border)}.btn--danger:hover{background:#ff6b6b2e;box-shadow:var(--shadow-glow-error)}.btn--success{background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border)}.btn--success:hover{background:#00d4aa2e;box-shadow:var(--shadow-glow-success)}.input{width:100%;padding:var(--space-2) var(--space-3);font-size:var(--font-size-base);line-height:var(--line-height-normal);color:var(--color-text-primary);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);transition:var(--transition-border),var(--transition-shadow)}.input::placeholder{color:var(--color-text-muted)}.input:hover{border-color:var(--color-border-hover)}.input:focus{border-color:var(--color-border-focus);box-shadow:0 0 0 3px #6c5ce726}.input--sm{padding:var(--space-1-5) var(--space-2);font-size:var(--font-size-xs)}.text-truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.text-center{text-align:center}.text-left{text-align:left}.text-right{text-align:right}.text-primary{color:var(--color-text-primary)}.text-secondary{color:var(--color-text-secondary)}.text-muted{color:var(--color-text-muted)}.text-success{color:var(--color-success)}.text-error{color:var(--color-error)}.text-warning{color:var(--color-warning)}.font-mono{font-family:var(--font-family-mono)}@keyframes fadeInUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}@keyframes slideInRight{0%{opacity:0;transform:translate(100%)}to{opacity:1;transform:translate(0)}}@keyframes slideOutRight{0%{opacity:1;transform:translate(0)}to{opacity:0;transform:translate(100%)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes scaleOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.9)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{opacity:1;transform:scale(1.08)}70%{transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.6}}@keyframes pulseScale{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes countUp{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes dashRotate{0%{stroke-dashoffset:0}to{stroke-dashoffset:-30}}@keyframes borderGlow{0%,to{border-color:#6c5ce766;box-shadow:0 0 15px #6c5ce726,inset 0 0 15px #6c5ce70d}50%{border-color:#00cec973;box-shadow:0 0 25px #00cec933,inset 0 0 20px #00cec914}}@keyframes dashMarch{to{background-position:0 0,100% 0,0 100%,0 0,0 0,100% 0,0 100%,0 0}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-8px)}}@keyframes ripple{0%{transform:scale(0);opacity:.5}to{transform:scale(4);opacity:0}}@keyframes progressFill{0%{width:0%}}@keyframes shake{0%,to{transform:translate(0)}10%,30%,50%,70%,90%{transform:translate(-4px)}20%,40%,60%,80%{transform:translate(4px)}}.anim-fade-in-up{animation:fadeInUp var(--transition-moderate) var(--ease-out) both}.anim-fade-in{animation:fadeIn var(--transition-moderate) var(--ease-out) both}.anim-slide-in-right{animation:slideInRight var(--transition-moderate) var(--ease-out) both}.anim-scale-in{animation:scaleIn var(--transition-moderate) var(--ease-spring) both}.anim-bounce-in{animation:bounceIn var(--transition-slower) var(--ease-bounce) both}.anim-shimmer{background:var(--gradient-shimmer);background-size:200% 100%;animation:shimmer 1.5s infinite linear}.anim-pulse{animation:pulse 2s infinite var(--ease-in-out)}.anim-pulse-scale{animation:pulseScale 2s infinite var(--ease-in-out)}.anim-spin{animation:spin 1s infinite linear}.anim-count-up{animation:countUp var(--transition-moderate) var(--ease-out) both}.anim-float{animation:float 3s infinite var(--ease-in-out)}.anim-shake{animation:shake var(--transition-slow) var(--ease-default)}.anim-stagger>*{animation:fadeInUp var(--transition-moderate) var(--ease-out) both}.anim-stagger>*:nth-child(1){animation-delay:0ms}.anim-stagger>*:nth-child(2){animation-delay:60ms}.anim-stagger>*:nth-child(3){animation-delay:.12s}.anim-stagger>*:nth-child(4){animation-delay:.18s}.anim-stagger>*:nth-child(5){animation-delay:.24s}.anim-stagger>*:nth-child(6){animation-delay:.3s}.anim-stagger>*:nth-child(7){animation-delay:.36s}.anim-stagger>*:nth-child(8){animation-delay:.42s}.anim-stagger>*:nth-child(9){animation-delay:.48s}.anim-stagger>*:nth-child(10){animation-delay:.54s}.anim-delay-100{animation-delay:.1s}.anim-delay-200{animation-delay:.2s}.anim-delay-300{animation-delay:.3s}.anim-delay-400{animation-delay:.4s}.anim-delay-500{animation-delay:.5s}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}.anim-shimmer,.anim-pulse,.anim-pulse-scale,.anim-float,.anim-spin{animation:none}}#app-header{position:sticky;top:0;z-index:var(--z-header);background:var(--color-glass-light);backdrop-filter:var(--backdrop-blur-md);-webkit-backdrop-filter:var(--backdrop-blur-md);border-bottom:1px solid var(--color-border)}.header-inner{display:flex;align-items:center;gap:var(--space-4);height:var(--header-height);flex-wrap:wrap}.header-brand{display:flex;align-items:center;gap:var(--space-3)}.header-logo{flex-shrink:0;filter:drop-shadow(0 2px 8px rgba(108,92,231,.3))}.header-title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);margin:0;line-height:1}.header-tagline{color:var(--color-text-secondary);font-size:var(--font-size-sm);margin:0;display:none}@media(min-width:768px){.header-tagline{display:block}}.header-badge{display:inline-flex;align-items:center;gap:var(--space-1-5);padding:var(--space-1) var(--space-3);background:var(--color-success-bg);border:1px solid var(--color-success-border);border-radius:var(--radius-full);font-size:var(--font-size-xs);color:var(--color-success);font-weight:var(--font-weight-medium);margin-left:auto;white-space:nowrap}.header-badge__icon{font-size:var(--font-size-sm)}.upload-zone{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:var(--upload-min-height);padding:var(--space-10) var(--space-6);border:var(--upload-border-width) dashed var(--color-border-dashed);border-radius:var(--radius-xl);background:var(--color-glass-subtle);cursor:pointer;transition:all var(--transition-moderate) var(--ease-default);text-align:center;overflow:hidden}.upload-zone:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--gradient-glow);opacity:0;transition:opacity var(--transition-moderate) var(--ease-default);pointer-events:none}.upload-zone:hover{border-color:var(--color-border-hover);background:var(--color-glass-light)}.upload-zone:hover:before{opacity:.5}.upload-zone:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:2px}.upload-zone--active{border-color:var(--color-primary);background:var(--gradient-primary-subtle);transform:scale(1.01);box-shadow:var(--shadow-glow-primary)}.upload-zone--active:before{opacity:1}.upload-zone--has-files{min-height:var(--upload-min-height-sm);padding:var(--space-4) var(--space-6)}.upload-zone--has-files .upload-zone__icon{width:32px;height:32px}.upload-zone--has-files .upload-zone__title{font-size:var(--font-size-base)}.upload-zone--has-files .upload-zone__subtitle{display:none}.upload-zone__icon{color:var(--color-text-muted);margin-bottom:var(--space-4);transition:color var(--transition-normal) var(--ease-default),transform var(--transition-moderate) var(--ease-bounce)}.upload-zone:hover .upload-zone__icon,.upload-zone--active .upload-zone__icon{color:var(--color-primary-light);transform:translateY(-4px)}.upload-zone__title{font-size:var(--font-size-xl);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2)}.upload-zone__subtitle{font-size:var(--font-size-sm);color:var(--color-text-secondary);margin:0}.upload-zone__add-more{margin-top:var(--space-2)}.settings{background:var(--color-glass-light);backdrop-filter:var(--backdrop-blur-sm);-webkit-backdrop-filter:var(--backdrop-blur-sm);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}.settings__row{display:flex;flex-wrap:wrap;align-items:flex-start;gap:var(--space-6)}.settings__group{flex:1;min-width:200px;display:flex;flex-direction:column;gap:var(--space-2)}.settings__label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}.settings__value{font-size:var(--font-size-sm);color:var(--color-primary-light);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.settings__label-row{display:flex;justify-content:space-between;align-items:center}.settings__slider{-webkit-appearance:none;appearance:none;width:100%;height:var(--slider-track-height);background:transparent;outline:none;cursor:pointer}.settings__slider::-webkit-slider-runnable-track{width:100%;height:var(--slider-track-height);cursor:pointer;background:#2e2e4f;border-radius:var(--radius-full);transition:background var(--transition-fast)}.settings__slider:hover::-webkit-slider-runnable-track{background:#3f3f66}.settings__slider::-moz-range-track{width:100%;height:var(--slider-track-height);cursor:pointer;background:#2e2e4f;border-radius:var(--radius-full);transition:background var(--transition-fast)}.settings__slider:hover::-moz-range-track{background:#3f3f66}.settings__slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:50%;background:var(--color-primary);box-shadow:var(--shadow-glow-primary);cursor:pointer;transition:transform var(--transition-fast) var(--ease-bounce)}.settings__slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.settings__slider::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);border:none;border-radius:50%;background:var(--color-primary);box-shadow:var(--shadow-glow-primary);cursor:pointer}.settings__slider:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:4px}.settings__format-group{display:flex;background:var(--color-bg-input);border-radius:var(--radius-md);padding:var(--space-0-5);gap:var(--space-0-5)}.settings__format-btn{flex:1;padding:var(--space-2) var(--space-3);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:inherit;cursor:pointer;transition:all var(--transition-normal) var(--ease-default);white-space:nowrap}.settings__format-btn:not(.settings__format-btn--active):hover{color:var(--color-text-primary);background:var(--color-glass-light)}.settings__format-btn--active{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-xs)}.settings__toggle-wrapper{display:flex;align-items:center;gap:var(--space-3)}.settings__toggle{position:relative;width:var(--toggle-width);height:var(--toggle-height);background:var(--color-bg-elevated);border-radius:var(--radius-full);cursor:pointer;transition:background var(--transition-normal) var(--ease-default);flex-shrink:0;border:1px solid var(--color-border)}.settings__toggle--active{background:var(--color-primary);border-color:var(--color-primary)}.settings__toggle-thumb{position:absolute;top:50%;left:3px;transform:translateY(-50%);width:var(--toggle-thumb-size);height:var(--toggle-thumb-size);border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:left var(--transition-normal) var(--ease-bounce)}.settings__toggle--active .settings__toggle-thumb{left:calc(100% - var(--toggle-thumb-size) - 3px)}.settings__toggle-label{font-size:var(--font-size-base);color:var(--color-text-primary);font-weight:var(--font-weight-medium)}.settings__resize-options{display:flex;flex-direction:column;gap:var(--space-4);padding-top:var(--space-3);animation:fadeInUp var(--transition-moderate) var(--ease-out)}.settings__resize-tabs{display:flex;gap:var(--space-1);background:var(--color-bg-input);border-radius:var(--radius-sm);padding:var(--space-0-5)}.settings__resize-tab{flex:1;padding:var(--space-1-5) var(--space-3);border:none;border-radius:var(--radius-xs);background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);font-family:inherit;cursor:pointer;transition:all var(--transition-fast) var(--ease-default)}.settings__resize-tab--active{background:var(--color-glass-strong);color:var(--color-text-primary)}.settings__dimension-inputs{display:flex;align-items:center;gap:var(--space-2)}.settings__dimension-input{width:100px;padding:var(--space-2) var(--space-3);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-base);font-family:inherit;text-align:center;font-variant-numeric:tabular-nums;transition:border-color var(--transition-normal) var(--ease-default)}.settings__dimension-input:focus{outline:none;border-color:var(--color-border-focus)}.settings__dimension-separator{color:var(--color-text-muted);font-size:var(--font-size-lg)}.settings__aspect-lock{background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);padding:var(--space-1-5);cursor:pointer;font-size:var(--font-size-lg);transition:all var(--transition-fast) var(--ease-default);line-height:1}.settings__aspect-lock--active{color:var(--color-primary-light);border-color:var(--color-primary);background:var(--color-glass-light)}.settings__actions{padding-top:var(--space-2)}.settings__compress-btn{width:100%}.settings__compress-btn .btn__spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;margin-right:var(--space-2);vertical-align:middle}.results{display:flex;flex-direction:column;gap:var(--space-5)}.results__summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-4) var(--space-5);background:var(--color-glass-light);backdrop-filter:var(--backdrop-blur-sm);border:1px solid var(--color-border);border-radius:var(--radius-lg)}.results__summary-stats{display:flex;gap:var(--space-6);flex-wrap:wrap}.results__summary-stat{font-size:var(--font-size-sm);color:var(--color-text-secondary)}.results__summary-stat strong{color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.results__actions{display:flex;gap:var(--space-3);flex-wrap:wrap}.results__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-4)}@media(max-width:768px){.results__grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.results__grid{grid-template-columns:1fr}}.results__card{background:var(--color-glass-light);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition-normal) var(--ease-default),box-shadow var(--transition-moderate) var(--ease-default),border-color var(--transition-normal) var(--ease-default);animation:fadeInUp var(--transition-moderate) var(--ease-out) both}.results__card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--color-border-hover)}.results__card--error{border-color:var(--color-error-border)}.results__card-thumb{width:100%;aspect-ratio:var(--card-thumb-aspect);object-fit:cover;display:block;background:var(--color-bg-elevated)}.results__card-body{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-3)}.results__card-header{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--space-2)}.results__card-name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:200px}.results__card-remove{flex-shrink:0;background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:var(--font-size-lg);line-height:1;padding:0;transition:color var(--transition-fast) var(--ease-default)}.results__card-remove:hover{color:var(--color-error)}.results__card-sizes{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm)}.results__card-original{color:var(--color-text-muted);text-decoration:line-through}.results__card-arrow{color:var(--color-text-muted)}.results__card-compressed{color:var(--color-success);font-weight:var(--font-weight-semibold)}.results__card-badge{display:inline-flex;align-items:center;padding:var(--space-0-5) var(--space-2);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);background:var(--color-success-bg);color:var(--color-success);border:1px solid var(--color-success-border)}.results__card-badge--negative{background:var(--color-error-bg);color:var(--color-error);border-color:var(--color-error-border)}.results__card-status{font-size:var(--font-size-sm);color:var(--color-text-muted)}.results__card-error{font-size:var(--font-size-sm);color:var(--color-error)}.results__card-actions{display:flex;gap:var(--space-2);padding-top:var(--space-1)}.progress-bar{width:100%;height:var(--progress-height);background:var(--color-bg-elevated);border-radius:var(--radius-full);overflow:hidden}.progress-bar__fill{height:100%;background:var(--gradient-primary);border-radius:inherit;transition:width var(--transition-moderate) var(--ease-out);position:relative}.progress-bar__fill--shimmer:after{content:"";position:absolute;inset:0;background:var(--gradient-shimmer);animation:shimmer 1.5s ease-in-out infinite}.preview__overlay{position:fixed;inset:0;z-index:var(--z-modal);background:var(--color-bg-overlay);backdrop-filter:var(--backdrop-blur-md);-webkit-backdrop-filter:var(--backdrop-blur-md);display:flex;align-items:center;justify-content:center;padding:var(--space-6);animation:fadeInUp var(--transition-moderate) var(--ease-out)}.preview__modal{background:var(--color-bg-surface);border:1px solid var(--color-border);border-radius:var(--radius-xl);max-width:var(--modal-max-width);max-height:var(--modal-max-height);width:100%;overflow:hidden;box-shadow:var(--shadow-2xl);animation:scaleIn var(--transition-moderate) var(--ease-spring);display:flex;flex-direction:column}.preview__header{display:flex;justify-content:space-between;align-items:center;padding:var(--space-4) var(--space-5);border-bottom:1px solid var(--color-border)}.preview__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0}.preview__close{background:none;border:none;color:var(--color-text-muted);font-size:var(--font-size-2xl);cursor:pointer;padding:var(--space-1);line-height:1;transition:color var(--transition-fast) var(--ease-default)}.preview__close:hover{color:var(--color-text-primary)}.preview__comparison{position:relative;flex:1;overflow:hidden;min-height:300px}.preview__image{position:absolute;top:0;left:0;width:100%;height:100%;object-fit:contain;background:var(--color-bg-deepest)}.preview__image--original{z-index:1}.preview__image--compressed{z-index:2}.preview__slider-line{position:absolute;top:0;bottom:0;width:3px;background:var(--gradient-primary);z-index:3;cursor:ew-resize;box-shadow:0 0 10px #6c5ce780}.preview__slider-handle{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:40px;height:40px;border-radius:50%;background:var(--gradient-primary);border:2px solid white;box-shadow:var(--shadow-lg);display:flex;align-items:center;justify-content:center;color:#fff;font-size:var(--font-size-lg);cursor:ew-resize;z-index:4}.preview__labels{position:absolute;top:var(--space-3);left:var(--space-3);right:var(--space-3);display:flex;justify-content:space-between;z-index:5;pointer-events:none}.preview__label{padding:var(--space-1) var(--space-3);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:var(--font-weight-semibold);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);background:#0009;color:#fff;backdrop-filter:var(--backdrop-blur-sm)}.preview__info{display:flex;flex-wrap:wrap;gap:var(--space-6);padding:var(--space-4) var(--space-5);border-top:1px solid var(--color-border);background:var(--color-glass-subtle)}.preview__info-item{display:flex;flex-direction:column;gap:var(--space-1)}.preview__info-label{font-size:var(--font-size-xs);color:var(--color-text-muted);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}.preview__info-value{font-size:var(--font-size-base);color:var(--color-text-primary);font-weight:var(--font-weight-semibold)}.preview__info-value--success{color:var(--color-success)}#toast-container{position:fixed;bottom:var(--space-6);right:var(--space-6);z-index:var(--z-toast);display:flex;flex-direction:column-reverse;gap:var(--space-3);pointer-events:none;max-width:var(--toast-width)}.toast{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);background:var(--color-bg-surface);backdrop-filter:var(--backdrop-blur-md);border:1px solid var(--color-border);border-left:var(--toast-border-left-width) solid var(--color-info);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);animation:slideInRight var(--transition-moderate) var(--ease-spring);pointer-events:auto;min-width:280px}.toast--success{border-left-color:var(--color-success)}.toast--error{border-left-color:var(--color-error)}.toast--info{border-left-color:var(--color-info)}.toast--exiting{animation:slideInRight var(--transition-normal) var(--ease-in) reverse forwards}.toast__icon{flex-shrink:0;font-size:var(--font-size-lg);line-height:1}.toast--success .toast__icon{color:var(--color-success)}.toast--error .toast__icon{color:var(--color-error)}.toast--info .toast__icon{color:var(--color-info)}.toast__message{flex:1;font-size:var(--font-size-sm);color:var(--color-text-primary);line-height:var(--line-height-normal)}.toast__close{flex-shrink:0;background:none;border:none;color:var(--color-text-muted);cursor:pointer;font-size:var(--font-size-md);line-height:1;padding:0;transition:color var(--transition-fast) var(--ease-default)}.toast__close:hover{color:var(--color-text-primary)}.stats{display:flex;justify-content:center;flex-wrap:wrap;gap:var(--space-8);padding:var(--space-6) var(--space-8);background:var(--color-glass-light);backdrop-filter:var(--backdrop-blur-sm);border:1px solid var(--color-border);border-radius:var(--radius-xl);animation:fadeInUp var(--transition-moderate) var(--ease-out)}.stats__item{text-align:center;min-width:120px}.stats__value{font-size:var(--font-size-3xl);font-weight:var(--font-weight-extrabold);color:var(--color-primary);line-height:1.2;font-variant-numeric:tabular-nums}.stats__label{font-size:var(--font-size-xs);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);margin-top:var(--space-1)}.seo{max-width:var(--container-max);margin:0 auto;padding:var(--space-16) var(--container-padding)}.seo__section{margin-bottom:8rem}.seo__title{font-size:var(--font-size-2xl);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0 0 var(--space-8);text-align:center;position:relative}.seo__title:after{content:"";display:block;width:60px;height:4px;background:var(--gradient-primary);margin:var(--space-4) auto 0;border-radius:var(--radius-full)}.seo__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:var(--space-6)}.seo__step{text-align:center;padding:var(--space-8) var(--space-6);background:var(--color-glass-light);backdrop-filter:var(--backdrop-blur-md);-webkit-backdrop-filter:var(--backdrop-blur-md);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-md);transition:transform var(--transition-normal) var(--ease-default),box-shadow var(--transition-normal) var(--ease-default),border-color var(--transition-normal) var(--ease-default)}.seo__step:hover{transform:translateY(-8px);box-shadow:var(--shadow-xl);border-color:var(--color-primary-light)}.seo__step-number{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;border-radius:50%;background:var(--gradient-primary);color:#fff;font-size:var(--font-size-xl);font-weight:var(--font-weight-bold);margin-bottom:var(--space-4)}.seo__step-icon{font-size:2rem;margin-bottom:var(--space-3)}.seo__step-title{font-size:var(--font-size-lg);font-weight:var(--font-weight-semibold);color:var(--color-text-primary);margin:0 0 var(--space-2)}.seo__step-desc{font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed);margin:0}.seo__text{font-size:var(--font-size-lg);color:var(--color-text-primary);line-height:var(--line-height-loose);text-align:center;max-width:800px;margin:0 auto;padding:var(--space-8);background:var(--color-glass-light);backdrop-filter:var(--backdrop-blur-sm);border-radius:var(--radius-xl);border:1px solid var(--color-border);box-shadow:var(--shadow-lg)}.seo__table-wrapper{overflow-x:auto}.seo__table{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--font-size-base);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;box-shadow:var(--shadow-lg)}.seo__table th,.seo__table td{padding:var(--space-4) var(--space-5);text-align:left;border-bottom:1px solid var(--color-border)}.seo__table tr:last-child td{border-bottom:none}.seo__table th{color:var(--color-text-primary);font-weight:var(--font-weight-bold);background:var(--color-bg-elevated);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider);font-size:var(--font-size-sm)}.seo__table td{color:var(--color-text-secondary);background:var(--color-glass-light)}.seo__table tr:hover td{background:var(--color-glass-strong)}.seo__faq{max-width:700px;margin:0 auto;display:flex;flex-direction:column;gap:var(--space-2)}.seo__faq-item{border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;background:var(--color-glass-light);backdrop-filter:var(--backdrop-blur-sm);transition:all var(--transition-normal) var(--ease-default);box-shadow:var(--shadow-sm)}.seo__faq-item[open]{border-color:var(--color-primary);box-shadow:var(--shadow-md);background:var(--color-glass-strong)}.seo__faq-question{padding:var(--space-4) var(--space-5);font-size:var(--font-size-base);font-weight:var(--font-weight-medium);color:var(--color-text-primary);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;transition:background var(--transition-normal) var(--ease-default)}.seo__faq-question:hover{background:var(--color-glass-subtle)}.seo__faq-question::-webkit-details-marker{display:none}.seo__faq-question:after{content:"+";font-size:var(--font-size-xl);color:var(--color-text-muted);transition:transform var(--transition-normal) var(--ease-default)}.seo__faq-item[open] .seo__faq-question:after{transform:rotate(45deg)}.seo__faq-answer{padding:0 var(--space-5) var(--space-4);font-size:var(--font-size-sm);color:var(--color-text-secondary);line-height:var(--line-height-relaxed)}#app-footer{border-top:1px solid var(--color-border);padding:var(--space-8) 0;margin-top:var(--space-12)}.footer-content{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--space-4)}.footer-brand{display:flex;flex-direction:column;gap:var(--space-1)}.footer-logo{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary)}.footer-tagline{font-size:var(--font-size-xs);color:var(--color-text-muted);margin:0}.footer-links{display:flex;gap:var(--space-5)}.footer-links a{color:var(--color-text-secondary);text-decoration:none;font-size:var(--font-size-sm);transition:color var(--transition-fast) var(--ease-default)}.footer-links a:hover{color:var(--color-text-link-hover)}.footer-copyright{width:100%;text-align:center;font-size:var(--font-size-xs);color:var(--color-text-muted);margin:var(--space-4) 0 0;padding-top:var(--space-4);border-top:1px solid var(--color-border)}.ad-zone{display:flex;justify-content:center;padding:var(--space-3) 0}.ad-zone--leaderboard{max-width:728px;margin:0 auto}.ad-zone--sidebar{position:sticky;top:calc(var(--header-height) + var(--space-6))}.ad-placeholder{display:flex;align-items:center;justify-content:center;background:var(--color-glass-subtle);border:1px dashed var(--color-border);border-radius:var(--radius-md);color:var(--color-text-muted);font-size:var(--font-size-xs);text-transform:uppercase;letter-spacing:var(--letter-spacing-widest)}.ad-placeholder[data-size="728x90"]{width:728px;max-width:100%;height:90px}.ad-placeholder[data-size="300x250"]{width:300px;height:250px}.ad-placeholder[data-size="300x600"]{width:300px;height:600px}@media(max-width:767px){.ad-zone--leaderboard .ad-placeholder{width:320px;height:50px}#toast-container{right:var(--space-3);left:var(--space-3);max-width:none}}.settings-panel{padding:var(--space-6);display:flex;flex-direction:column;gap:var(--space-5)}.settings-panel__title{font-size:var(--font-size-lg);font-weight:var(--font-weight-bold);color:var(--color-text-primary);margin:0}.settings-group{display:flex;flex-direction:column;gap:var(--space-2)}.settings-group__header{display:flex;justify-content:space-between;align-items:center}.settings-label{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:var(--letter-spacing-wider)}.settings-label--sm{font-size:var(--font-size-xs);text-transform:none;letter-spacing:normal}.settings-value{font-size:var(--font-size-sm);color:var(--color-primary-light);font-weight:var(--font-weight-semibold);font-variant-numeric:tabular-nums}.range-slider{-webkit-appearance:none;appearance:none;width:100%;height:var(--slider-track-height);background:transparent;outline:none;cursor:pointer}.range-slider::-webkit-slider-runnable-track{width:100%;height:var(--slider-track-height);cursor:pointer;background:#2e2e4f;border-radius:var(--radius-full);transition:background var(--transition-fast)}.range-slider:hover::-webkit-slider-runnable-track{background:#3f3f66}.range-slider::-moz-range-track{width:100%;height:var(--slider-track-height);cursor:pointer;background:#2e2e4f;border-radius:var(--radius-full);transition:background var(--transition-fast)}.range-slider:hover::-moz-range-track{background:#3f3f66}.range-slider::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:var(--slider-thumb-size);height:var(--slider-thumb-size);border-radius:50%;background:var(--color-primary);box-shadow:var(--shadow-glow-primary);cursor:pointer;transition:transform var(--transition-fast) var(--ease-bounce);margin-top:calc((var(--slider-track-height) - var(--slider-thumb-size)) / 2)}.range-slider::-webkit-slider-thumb:hover{transform:scale(1.2)}.range-slider::-moz-range-thumb{width:var(--slider-thumb-size);height:var(--slider-thumb-size);border:none;border-radius:50%;background:var(--color-primary);box-shadow:var(--shadow-glow-primary);cursor:pointer}.range-slider:focus-visible{outline:2px solid var(--color-border-focus);outline-offset:4px}.format-selector{display:flex;background:var(--color-bg-input);border-radius:var(--radius-md);padding:var(--space-0-5);gap:var(--space-0-5)}.format-btn{flex:1;padding:var(--space-2) var(--space-3);border:none;border-radius:var(--radius-sm);background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);font-family:inherit;cursor:pointer;transition:all var(--transition-normal) var(--ease-default);white-space:nowrap}.format-btn:not(.format-btn--active):hover{color:var(--color-text-primary);background:var(--color-glass-light)}.format-btn--active{background:var(--color-primary);color:#fff;box-shadow:var(--shadow-xs)}.toggle-switch{position:relative;display:inline-block;width:var(--toggle-width);height:var(--toggle-height);cursor:pointer}.toggle-switch input{opacity:0;width:0;height:0;position:absolute}.toggle-switch__slider{position:absolute;inset:0;background:#fff3;border:1px solid var(--color-border);border-radius:var(--radius-full);transition:background var(--transition-normal) var(--ease-default),border-color var(--transition-normal) var(--ease-default)}.toggle-switch__slider:after{content:"";position:absolute;top:50%;left:3px;transform:translateY(-50%);width:var(--toggle-thumb-size);height:var(--toggle-thumb-size);border-radius:50%;background:#fff;box-shadow:var(--shadow-xs);transition:left var(--transition-normal) var(--ease-bounce)}.toggle-switch input:checked+.toggle-switch__slider{background:var(--color-primary);border-color:var(--color-primary)}.toggle-switch input:checked+.toggle-switch__slider:after{left:calc(100% - var(--toggle-thumb-size) - 3px)}.settings-resize-options{padding-top:var(--space-3);display:flex;flex-direction:column;gap:var(--space-4);animation:fadeInUp var(--transition-moderate) var(--ease-out)}.resize-mode-tabs{display:flex;gap:var(--space-1);background:var(--color-bg-input);border-radius:var(--radius-sm);padding:var(--space-0-5)}.resize-mode-tab{flex:1;padding:var(--space-1-5) var(--space-3);border:none;border-radius:var(--radius-xs);background:transparent;color:var(--color-text-secondary);font-size:var(--font-size-sm);font-family:inherit;cursor:pointer;transition:all var(--transition-fast) var(--ease-default)}.resize-mode-tab:not(.resize-mode-tab--active):hover{color:var(--color-text-primary)}.resize-mode-tab--active{background:var(--color-glass-strong);color:var(--color-text-primary)}.resize-percent-group{display:flex;flex-direction:column;gap:var(--space-2);margin-top:var(--space-4)}.resize-fixed-group{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap;margin-top:var(--space-4)}.resize-dimension{display:flex;flex-direction:column;gap:var(--space-1)}.number-input{width:100px;padding:var(--space-2) var(--space-3);background:var(--color-bg-input);border:1px solid var(--color-border);border-radius:var(--radius-md);color:var(--color-text-primary);font-size:var(--font-size-base);font-family:inherit;text-align:center;font-variant-numeric:tabular-nums;transition:border-color var(--transition-normal) var(--ease-default)}.number-input:focus{outline:none;border-color:var(--color-border-focus);box-shadow:0 0 0 3px #6c5ce726}.aspect-lock-btn{background:none;border:1px solid var(--color-border);border-radius:var(--radius-sm);color:var(--color-text-muted);padding:var(--space-1-5);cursor:pointer;font-size:var(--font-size-lg);transition:all var(--transition-fast) var(--ease-default);line-height:1;margin-top:auto}.aspect-lock-btn:not(.aspect-lock-btn--active):hover{border-color:var(--color-border-hover)}.aspect-lock-btn--active{color:var(--color-primary-light);border-color:var(--color-primary);background:var(--color-glass-light)}.btn--compress{width:100%;background:var(--color-primary);color:#fff;font-weight:var(--font-weight-bold);padding:var(--space-3) var(--space-6);border:none;border-radius:var(--radius-lg);box-shadow:var(--shadow-glow-btn);font-size:var(--font-size-md);text-shadow:0 1px 2px rgba(0,0,0,.2);transition:all var(--transition-moderate) var(--ease-default);margin-top:var(--space-4)}.btn--compress:hover:not(:disabled){background:var(--color-primary-dark);box-shadow:var(--shadow-glow-btn-hover);transform:translateY(-1px) scale(1.02)}.btn--compress:active:not(:disabled){transform:translateY(0) scale(.98)}.btn--compress:disabled{opacity:.4;cursor:not-allowed}.btn--compress .btn__spinner{display:inline-block;width:16px;height:16px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spin .6s linear infinite;margin-right:var(--space-2);vertical-align:middle}.btn--loading{pointer-events:none}.result-card{background:var(--color-glass-light);border:1px solid var(--color-border);border-radius:var(--radius-lg);overflow:hidden;transition:transform var(--transition-normal) var(--ease-default),box-shadow var(--transition-moderate) var(--ease-default),border-color var(--transition-normal) var(--ease-default);position:relative}.result-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-card-hover);border-color:var(--color-border-hover)}.result-card__thumb{width:100%;aspect-ratio:16 / 5;overflow:hidden;background:var(--color-bg-elevated);max-height:140px}.result-card__thumb img{width:100%;height:100%;object-fit:cover;display:block}.result-card__info{padding:var(--space-4);display:flex;flex-direction:column;gap:var(--space-2)}.result-card__name{font-size:var(--font-size-sm);font-weight:var(--font-weight-medium);color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin:0}.result-card__remove{position:absolute;top:var(--space-2);right:var(--space-2);background:#000000b3;backdrop-filter:var(--backdrop-blur-sm);border:1px solid rgba(255,255,255,.2);color:#fff;width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:var(--font-size-lg);line-height:1;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast) var(--ease-default);z-index:5}.result-card__remove:hover{background:#ff4757;color:#fff;border-color:#ff4757}.result-card__status{display:flex;flex-direction:column;gap:var(--space-2)}.result-card__waiting{font-size:var(--font-size-xs);color:var(--color-text-muted)}.result-card__progress-label{font-size:var(--font-size-xs);color:var(--color-primary-light);font-variant-numeric:tabular-nums}.result-card__sizes{display:flex;align-items:center;gap:var(--space-2);font-size:var(--font-size-sm)}.result-card__size-original{color:var(--color-text-muted);text-decoration:line-through}.result-card__arrow{color:var(--color-text-muted)}.result-card__size-compressed{color:var(--color-success);font-weight:var(--font-weight-semibold)}.result-card__error{font-size:var(--font-size-sm);color:var(--color-error)}.result-card__actions{display:flex;gap:var(--space-2);padding-top:var(--space-1)}.btn--xs{padding:var(--space-1) var(--space-2-5);font-size:var(--font-size-xs);border-radius:var(--radius-sm)}.btn--xs svg{width:12px;height:12px}.btn--warning{background:var(--color-warning-bg);color:var(--color-warning);border:1px solid var(--color-warning-border)}.btn--warning:hover{background:#fdcb6e2e}.fadeInUp{animation:fadeInUp var(--transition-moderate) var(--ease-out) both}.main-layout{display:grid;grid-template-columns:1fr;gap:var(--main-gap);padding-block:var(--space-6);align-items:start}.main-content{display:flex;flex-direction:column;gap:var(--space-6);min-width:0}.sidebar{display:none;flex-direction:column;gap:var(--space-5);min-width:0}@media(min-width:480px){:root{--container-padding: var(--space-6)}.results__grid{grid-template-columns:repeat(2,1fr)}.upload__dropzone{padding:var(--space-8)}.toast{max-width:var(--toast-width)}}@media(min-width:768px){body{font-size:var(--font-size-md)}.settings__row{flex-direction:row;flex-wrap:wrap}.results__grid{grid-template-columns:repeat(3,1fr)}.stats{flex-direction:row;justify-content:center}.seo__grid{grid-template-columns:repeat(2,1fr)}.footer-content{flex-direction:row;align-items:center;justify-content:space-between}.preview__modal{max-width:var(--modal-max-width);margin:var(--space-8) auto}.preview__comparison{flex-direction:row}}@media(min-width:1024px){.main-layout{grid-template-columns:1fr var(--sidebar-width)}.sidebar{display:flex;position:relative}.ad-zone--sidebar{position:sticky;top:calc(var(--header-height) + var(--space-6))}.seo__grid{grid-template-columns:repeat(3,1fr)}.upload__dropzone{min-height:var(--upload-min-height)}.preview__modal{padding:var(--space-8)}}@media(min-width:1200px){:root{--container-padding: var(--space-8)}.main-layout{grid-template-columns:1fr 320px}.seo__grid--four{grid-template-columns:repeat(4,1fr)}}@media(max-width:479px){:root{--container-padding: var(--space-4);--upload-min-height: 180px}.header__inner{flex-wrap:wrap;gap:var(--space-2)}.header__badge{display:none}.upload__dropzone{min-height:var(--upload-min-height-sm);padding:var(--space-5)}.upload__icon{width:40px;height:40px}.upload__title{font-size:var(--font-size-md)}.settings__row{flex-direction:column}.settings__group{width:100%}.results__grid{grid-template-columns:1fr}.results__summary{flex-direction:column;gap:var(--space-3)}.stats{flex-direction:column;text-align:center}.footer-content{flex-direction:column;text-align:center;gap:var(--space-4)}.footer-links{justify-content:center}.toast{width:calc(100vw - var(--space-4) * 2);max-width:none}.settings__actions .btn--primary{width:100%}}@media print{body{background:#fff;color:#000}.header,.sidebar,.ad-zone,.toast,#preview-modal,.settings__actions{display:none!important}.glass-card{background:#fff;border:1px solid #ddd;box-shadow:none;backdrop-filter:none}}