*,*:before,*:after{box-sizing:border-box}body.imagecompress-body{margin:0;font-family:Segoe UI,Helvetica Neue,Arial,Noto Sans,sans-serif;color:#1f2a37;background-color:#f7f9fc;background-image:url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23dfe5ee' fill-opacity='0.7'%3E%3Ccircle cx='2' cy='2' r='1'/%3E%3Ccircle cx='14' cy='10' r='1'/%3E%3Ccircle cx='20' cy='20' r='1'/%3E%3C/g%3E%3C/svg%3E");background-size:24px 24px}.topbar{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:24px;padding:24px 32px 12px}.home-chip{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;border-radius:999px;border:1px solid #ffb457;background:#fff4e6;color:#b45309;text-decoration:none;font-weight:600;transition:transform .2s ease,box-shadow .2s ease;box-shadow:0 6px 16px #ffb45759}.home-chip:hover{transform:translateY(-1px);box-shadow:0 10px 20px #ffb45773}.home-text{font-size:.95rem}.title-block{display:flex;flex-direction:column;gap:6px}.eyebrow{font-size:.85rem;letter-spacing:.12em;text-transform:uppercase;color:#1fa27d;margin:0}.title{margin:0;font-size:2rem;color:#0f172a}.subtitle{margin:0;color:#475569;max-width:720px;font-size:.95rem}.lang-switch{display:flex;align-items:center;gap:10px;justify-self:end}.lang-label{font-size:.85rem;color:#64748b}.lang-select{border-radius:12px;border:1px solid #cbd5f5;padding:6px 10px;font-weight:500;background:#fff;color:#1e293b}.layout{display:grid;grid-template-columns:minmax(280px,1.1fr) minmax(280px,1fr) minmax(320px,1.2fr);gap:20px;padding:12px 32px 40px}.mobile-steps{display:none}.panel{background:#fff;border-radius:18px;border:1px solid #e2e8f0;box-shadow:0 12px 30px #0f172a14;padding:18px 20px 20px;display:flex;flex-direction:column;gap:16px;min-height:320px}.panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel h2{margin:0;font-size:1.25rem}.panel-badge{font-size:.75rem;padding:4px 10px;border-radius:999px;background:#e2f8f1;color:#0f766e;font-weight:600}.panel-badge.alt{background:#fff5d6;color:#b45309}.panel-badge.highlight{background:#e0f2fe;color:#0369a1}.upload-box{border:2px dashed #94a3b8;border-radius:16px;padding:22px;text-align:center;background:#f8fafc}.file-input{display:none}.file-label{display:inline-block;padding:10px 16px;background:#1fa27d;color:#fff;border-radius:12px;font-weight:600;cursor:pointer}.upload-note{margin:12px 0 0;font-size:.85rem;color:#64748b}.upload-status{min-height:1.25rem;margin:8px 0 0;font-size:.85rem;color:#0f766e}.upload-status.is-error{color:#b91c1c}.info-block h3{margin:0 0 8px;font-size:1rem;color:#0f172a}.info-list{display:grid;gap:8px;margin:0}.info-list div{display:flex;justify-content:space-between;gap:12px;font-size:.9rem}.info-list dt{color:#475569;font-weight:500}.info-list dd{margin:0;color:#0f172a}.exif-list{margin:0;padding-left:18px;color:#334155;font-size:.9rem}.form-grid{display:grid;gap:16px}.field label:not(.toggle){font-weight:500;display:block;margin-bottom:6px}.field select,.field input[type=number]{width:100%;border-radius:12px;border:1px solid #cbd5e1;padding:8px 10px;font-size:.95rem}.hint{margin:6px 0 0;color:#64748b;font-size:.85rem}.target-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.target-caption{font-size:.78rem;color:#64748b;display:block;margin-bottom:6px}.target-input{display:flex;align-items:center;gap:6px}.target-input span{color:#475569;font-weight:600}.crop-options{display:flex;flex-direction:column;gap:12px;padding:10px 12px;border-radius:14px;border:1px solid #e2e8f0;background:#f8fafc}.crop-panel{display:flex;flex-direction:column;gap:8px}.crop-caption{font-size:.8rem;color:#64748b}.crop-size-inputs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}.crop-size-inputs input{width:100px;border-radius:10px;border:1px solid #cbd5e1;padding:6px 8px;font-size:.9rem}.crop-size-inputs input:disabled{background:#f1f5f9;color:#94a3b8}.crop-presets{display:flex;flex-wrap:wrap;gap:6px}.chip{border:1px solid #d6e0ee;border-radius:999px;padding:4px 10px;background:#fff;color:#475569;font-size:.8rem;cursor:pointer}.chip:hover{border-color:#1fa27d;color:#1f2a37}.crop-lock{margin-top:4px}.crop-stage{display:flex;flex-direction:column;gap:6px}.crop-frame{position:relative;display:inline-block;max-width:100%;padding:6px;border-radius:14px;border:1px dashed #cbd5e1;background:#f8fafc;overflow:hidden}.crop-frame img{display:block;max-width:100%;max-height:240px;border-radius:10px}.crop-overlay{position:absolute;inset:6px;pointer-events:none}.crop-rect{position:absolute;border:2px solid #1fa27d;border-radius:8px;background:#ffffff0d;box-shadow:0 0 0 999px #0f172a59;cursor:move;pointer-events:auto;touch-action:none}.crop-rect.is-fixed{cursor:grab}.crop-rect.is-fixed .crop-handle{display:none}.crop-handle{position:absolute;width:12px;height:12px;border-radius:50%;border:2px solid #1fa27d;background:#fff}.crop-handle.handle-nw{top:-7px;left:-7px;cursor:nwse-resize}.crop-handle.handle-ne{top:-7px;right:-7px;cursor:nesw-resize}.crop-handle.handle-sw{bottom:-7px;left:-7px;cursor:nesw-resize}.crop-handle.handle-se{bottom:-7px;right:-7px;cursor:nwse-resize}.crop-placeholder{position:absolute;inset:6px;border-radius:10px;display:flex;align-items:center;justify-content:center;color:#94a3b8;font-size:.9rem;background:#ffffffb3;pointer-events:none}.is-hidden{display:none}.is-disabled{opacity:.5;pointer-events:none}.toggle{position:relative;display:inline-flex;align-items:center;gap:12px;min-height:24px;font-weight:500;cursor:pointer;line-height:1.4}.toggle input{position:absolute;opacity:0;pointer-events:none;width:1px;height:1px;margin:0;padding:0;border:0;appearance:none;-webkit-appearance:none}.toggle-core{width:42px;height:22px;border-radius:999px;background:#cbd5e1;position:relative;transition:background .2s ease;flex-shrink:0}.toggle-core:after{content:"";position:absolute;width:18px;height:18px;border-radius:50%;top:2px;left:2px;background:#fff;transition:transform .2s ease}.toggle input:focus-visible+.toggle-core{outline:2px solid #22c55e;outline-offset:2px}.toggle input:checked+.toggle-core{background:#1fa27d}.toggle input:checked+.toggle-core:after{transform:translate(20px)}.preview-box{position:relative;border-radius:16px;background:#f8fafc;border:1px solid #e2e8f0;padding:14px;min-height:220px;display:flex;align-items:center;justify-content:center}.preview-placeholder{color:#94a3b8;font-weight:500}#previewImage{max-width:100%;max-height:320px;display:none;border-radius:12px;box-shadow:0 12px 24px #0f172a1f}.primary-btn{border:none;border-radius:14px;padding:12px 16px;background:#ff8a00;color:#fff;font-weight:600;cursor:pointer;transition:transform .2s ease,box-shadow .2s ease}.primary-btn:disabled{cursor:not-allowed;opacity:.6;box-shadow:none}.primary-btn:not(:disabled):hover{transform:translateY(-1px);box-shadow:0 12px 20px #ff8a004d}@media(max-width:1100px){.layout{grid-template-columns:1fr}.mobile-steps{display:flex;gap:10px;justify-content:space-between;background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:10px 12px;font-weight:600;color:#0f172a}.upload-panel{order:1}.preview-panel{order:2}.settings-panel{order:3}.topbar{grid-template-columns:1fr;text-align:left}.lang-switch{justify-self:start}#previewImage{max-height:240px}.crop-frame img{max-height:220px}}.lang-link{border-radius:12px;border:1px solid #cbd5f5;padding:6px 10px;font-weight:500;font-size:.9rem;line-height:1.2;background:#fff;color:#1e293b;text-decoration:none;transition:border-color .2s ease,color .2s ease,background-color .2s ease}.lang-link:hover{border-color:#94a3b8}.lang-link--active{border-color:#ffb457;background:#fff7ed;color:#b45309;font-weight:600}