.page{max-width:1000px;margin:0 auto;padding:80px 20px 40px}.webp-header{text-align:center;padding:8px 0 16px}.webp-header .webp-icon-wrapper{display:inline-flex;align-items:center;justify-content:center;width:56px;height:56px;border-radius:16px;background:var(--border);margin-bottom:12px}.webp-header .webp-icon-wrapper svg{width:28px;height:28px;color:var(--text)}.webp-header .webp-subtitle{font-size:.9rem;color:var(--text-muted)}.webp-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px}.webp-card{background:var(--card-bg);border-radius:16px;padding:20px 24px;border:1px solid var(--border)}.webp-card-header{font-size:.85rem;font-weight:600;text-transform:uppercase;letter-spacing:.04em;color:var(--text-muted);margin-bottom:14px;display:flex;align-items:center;gap:8px}.webp-card-header .webp-dot{width:8px;height:8px;border-radius:50%;background:var(--text);flex-shrink:0}.webp-upload-zone{border:2px dashed var(--border);border-radius:12px;padding:36px 24px;text-align:center;cursor:pointer;position:relative;min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s cubic-bezier(.4,0,.2,1)}.webp-upload-zone:hover,.webp-upload-zone.drag-over{border-color:var(--text);background:var(--border)}.webp-upload-zone.drag-over{border-style:solid}.webp-upload-zone .webp-upload-icon{width:48px;height:48px;margin-bottom:12px;color:var(--text-muted);transition:all .2s ease}.webp-upload-zone:hover .webp-upload-icon,.webp-upload-zone.drag-over .webp-upload-icon{color:var(--text)}.webp-upload-zone .webp-upload-text{font-weight:500;color:var(--text-secondary);font-size:.95rem}.webp-upload-zone .webp-upload-hint{font-size:.8rem;color:var(--text-muted);margin-top:4px}.webp-upload-zone input[type=file]{position:absolute;top:0;right:0;bottom:0;left:0;opacity:0;cursor:pointer}.webp-preview-container{position:relative;border-radius:12px;overflow:hidden;min-height:200px;display:flex;align-items:center;justify-content:center;border:1px solid var(--border);margin-top:12px;background:var(--bg)}.webp-preview-container img{max-width:100%;max-height:380px;object-fit:contain;display:block}.webp-preview-container .webp-placeholder{color:var(--text-muted);font-size:.9rem;text-align:center;padding:40px 20px}.webp-preview-container .webp-placeholder svg{width:40px;height:40px;margin-bottom:8px;opacity:.5}.webp-info-bar{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;font-size:.8rem;color:var(--text-muted)}.webp-info-bar span{background:var(--border);padding:4px 10px;border-radius:20px;white-space:nowrap}.webp-comparison-badge{display:inline-flex;align-items:center;gap:4px;font-weight:600;font-size:.85rem;padding:4px 10px;border-radius:14px}.webp-comparison-badge.saved{background:#22c55e1f;color:#16a34a}.webp-comparison-badge.larger{background:#f59e0b1f;color:#d97706}.webp-form-group{margin-bottom:16px}.webp-form-label{display:flex;align-items:center;justify-content:space-between;font-size:.85rem;font-weight:500;color:var(--text-secondary);margin-bottom:6px}.webp-form-label .webp-current-value{font-weight:600;color:var(--text);font-size:.8rem;background:var(--border);padding:2px 8px;border-radius:10px}.webp-resolution-row{display:flex;align-items:center;gap:8px}.webp-resolution-input{flex:1;text-align:center;min-width:0}.webp-resolution-sep{font-weight:600;color:var(--text-muted);flex-shrink:0}.webp-lock-btn{width:40px;height:40px;border-radius:8px;border:1px solid var(--border);background:transparent;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--text-muted);transition:all .2s ease}.webp-lock-btn:hover{background:var(--border)}.webp-lock-btn.locked{background:var(--border);border-color:var(--text);color:var(--text)}.webp-lock-btn svg{width:16px;height:16px}.webp-preset-btns{display:flex;gap:6px;flex-wrap:wrap;margin-top:6px}.webp-preset-btn{font-size:.75rem;padding:5px 10px;border-radius:16px;border:1px solid var(--border);background:transparent;cursor:pointer;transition:all .2s ease;white-space:nowrap;color:var(--text-secondary);font-family:inherit}.webp-preset-btn:hover{background:var(--border);border-color:var(--text-muted)}.webp-preset-btn:active{background:var(--text);border-color:var(--text);color:var(--bg)}.webp-btn-group{display:flex;gap:10px;flex-wrap:wrap;margin-top:8px}.webp-btn-group .tool-btn{flex:1}.webp-btn-group .tool-btn svg{width:16px;height:16px}.webp-spinner{display:inline-block;width:18px;height:18px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:webp-spin .7s linear infinite}@keyframes webp-spin{to{transform:rotate(360deg)}}.webp-toast{position:fixed;bottom:20%;left:50%;transform:translate(-50%) translateY(60px);opacity:0;background:var(--text);color:var(--bg);padding:12px 20px;border-radius:25px;font-size:.85rem;font-weight:500;z-index:1000;transition:transform .35s cubic-bezier(.4,0,.2,1),opacity .35s cubic-bezier(.4,0,.2,1);pointer-events:none;box-shadow:0 8px 24px #00000040}.webp-toast.show{transform:translate(-50%) translateY(0);opacity:1}.webp-toast.success{background:#22c55e;color:#fff}.webp-toast.error{background:#ef4444;color:#fff}@media(max-width:768px){.page{padding:70px 16px 32px}.webp-grid{grid-template-columns:1fr}}