.webp-compressor-workspace [hidden]{display:none!important}
.webp-compressor-workspace{overflow:hidden;border:1px solid rgba(37,99,235,.12);border-radius:18px;background:#f8fbff}
.webpc-grid{display:grid;grid-template-columns:minmax(320px,.9fr) minmax(420px,1.1fr);gap:18px;padding:18px}
.webpc-panel{min-width:0;overflow:hidden;border:1px solid rgba(15,23,42,.09);border-radius:16px;background:#fff;box-shadow:0 12px 28px rgba(15,23,42,.05)}
.webpc-panel-header{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-bottom:1px solid rgba(15,23,42,.08);background:linear-gradient(180deg,#fff,#f8fbff)}
.webpc-panel-header>span{display:flex;align-items:center;gap:9px;color:#0f2744;font-size:14px;font-weight:950}
.webpc-panel-header button,.webpc-panel-header a{min-height:34px;padding:7px 10px;border:1px solid rgba(37,99,235,.14);border-radius:9px;background:#eef6ff;color:#1765d8;font-size:12px;font-weight:900;text-decoration:none;cursor:pointer}
.webpc-preview-actions{display:flex;align-items:center;gap:7px;flex-wrap:wrap;justify-content:flex-end}
.webpc-preview-actions button.is-active{background:#1765d8;color:#fff}
.webpc-drop{display:block;margin:16px;padding:18px;border:1.5px dashed rgba(37,99,235,.28);border-radius:14px;background:linear-gradient(135deg,#f8fbff,#eef6ff);cursor:pointer;transition:.2s}
.webpc-drop:hover,.webpc-drop.is-dragging{border-color:#2563eb;background:#eaf3ff;transform:translateY(-1px)}
.webpc-drop input{position:absolute;inline-size:1px;block-size:1px;opacity:0;pointer-events:none}
.webpc-drop [data-webpc-empty]{display:grid;justify-items:center;gap:7px;text-align:center;color:#526b86}
.webpc-drop [data-webpc-empty] i{display:grid;place-items:center;width:52px;height:52px;border-radius:14px;background:#fff;color:#2563eb;font-size:22px;box-shadow:0 8px 18px rgba(37,99,235,.12)}
.webpc-drop [data-webpc-empty] strong{color:#102a43;font-size:15px}
.webpc-drop [data-webpc-empty] span{font-size:12px;font-weight:700}
.webpc-file{display:grid;grid-template-columns:72px minmax(0,1fr);align-items:center;gap:12px}
.webpc-file img{width:72px;height:72px;object-fit:contain;border:1px solid rgba(15,23,42,.08);border-radius:11px;background:repeating-conic-gradient(#e9eef5 0 25%,#fff 0 50%) 50%/14px 14px}
.webpc-file strong,.webpc-file span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.webpc-file strong{color:#102a43;font-size:14px}.webpc-file span{margin-top:5px;color:#60768e;font-size:12px;font-weight:700}
.webpc-mode-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;padding:0 16px 14px}
.webpc-mode-tabs button{display:grid;gap:3px;min-height:66px;padding:10px;border:1px solid rgba(15,23,42,.1);border-radius:11px;background:#fff;color:#526b86;text-align:left;cursor:pointer}
.webpc-mode-tabs button b{color:#17324d;font-size:12px}.webpc-mode-tabs button span{font-size:10px;line-height:1.35;font-weight:700}
.webpc-mode-tabs button.is-active{border-color:#2563eb;background:#eef6ff;box-shadow:0 0 0 2px rgba(37,99,235,.08)}
.webpc-settings{display:grid;gap:11px;padding:0 16px 16px}
.webpc-quality-card,.webpc-setting,.webpc-switch{border:1px solid rgba(15,23,42,.09);border-radius:12px;background:#fbfdff}
.webpc-quality-card{padding:13px}.webpc-setting{display:grid;gap:8px;padding:12px}.webpc-setting>span,.webpc-setting-head span{color:#17324d;font-size:12px;font-weight:900}
.webpc-setting-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.webpc-setting-head b{color:#1765d8;font-size:13px}
.webpc-quality-card input[type="range"]{width:100%;margin:12px 0 8px;accent-color:#2563eb}
.webpc-presets{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.webpc-presets button{min-height:34px;padding:6px;border:1px solid rgba(37,99,235,.13);border-radius:8px;background:#fff;color:#526b86;font-size:10px;font-weight:900;cursor:pointer}
.webpc-presets button.is-active{background:#1765d8;color:#fff}
.webpc-setting select,.webpc-setting input[type="number"]{width:100%;min-height:40px;padding:8px 10px;border:1px solid rgba(15,23,42,.14);border-radius:8px;background:#fff;color:#102a43;font:inherit}
.webpc-setting small,.webpc-switch small{color:#70849a;font-size:10px;font-weight:700;line-height:1.4}
.webpc-number-unit{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:8px}.webpc-number-unit b{color:#526b86;font-size:12px}
.webpc-switch{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 12px}.webpc-switch span{display:grid;gap:3px}.webpc-switch b{color:#17324d;font-size:12px}.webpc-switch input{width:19px;height:19px;accent-color:#2563eb}
.webpc-preview{min-height:420px;padding:16px;background:linear-gradient(135deg,#f8fbff,#eef4fb)}
.webpc-preview-empty{min-height:388px;display:grid;place-content:center;justify-items:center;gap:9px;text-align:center;color:#60768e}
.webpc-preview-empty i{font-size:38px;color:#82a7d5}.webpc-preview-empty strong{color:#17324d;font-size:16px}.webpc-preview-empty span{max-width:380px;font-size:12px;font-weight:700;line-height:1.55}
.webpc-preview-media{position:relative;min-height:388px;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(15,23,42,.08);border-radius:13px;background:repeating-conic-gradient(#e8edf4 0 25%,#fff 0 50%) 50%/18px 18px}
.webpc-preview-media img{display:block;max-width:100%;max-height:520px;object-fit:contain}
.webpc-preview-badge{position:absolute;top:10px;left:10px;padding:6px 9px;border-radius:999px;background:rgba(15,23,42,.78);color:#fff;font-size:10px;font-weight:900;backdrop-filter:blur(6px)}
.webpc-preview-loading{position:absolute;inset:0;display:grid;place-content:center;justify-items:center;gap:9px;background:rgba(248,251,255,.82);color:#1765d8;font-size:12px;font-weight:900;backdrop-filter:blur(3px)}
.webpc-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;padding:14px 16px;border-top:1px solid rgba(15,23,42,.08)}
.webpc-stats div{min-width:0;padding:10px;border:1px solid rgba(15,23,42,.08);border-radius:10px;background:#fbfdff;text-align:center}
.webpc-stats b,.webpc-stats span{display:block;overflow:hidden;text-overflow:ellipsis}.webpc-stats b{color:#102a43;font-size:13px}.webpc-stats span{margin-top:4px;color:#70849a;font-size:9px;font-weight:850;text-transform:uppercase;letter-spacing:.04em}
.webpc-warnings{display:grid;gap:7px;padding:0 16px 14px}.webpc-warnings div{display:flex;align-items:flex-start;gap:8px;padding:9px 10px;border:1px solid rgba(245,158,11,.25);border-radius:9px;background:#fff8e7;color:#8a5a05;font-size:11px;font-weight:750;line-height:1.4}
.webpc-next{margin:0 16px 16px;padding:13px;border:1px solid rgba(37,99,235,.14);border-radius:12px;background:#f2f8ff}
.webpc-next>div:first-child{display:grid;gap:3px}.webpc-next strong{color:#17324d;font-size:13px}.webpc-next span{color:#60768e;font-size:10px;font-weight:700}
.webpc-next>div:last-child{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.webpc-next a{padding:7px 9px;border:1px solid rgba(37,99,235,.14);border-radius:8px;background:#fff;color:#1765d8;font-size:10px;font-weight:900;text-decoration:none}.webpc-next a.is-loading{opacity:.55;pointer-events:none}
.webpc-footer{border-top:1px solid rgba(15,23,42,.08);background:#fff}.webpc-compress{min-height:42px;padding:9px 16px;border:0;border-radius:10px;background:#1765d8;color:#fff;font-weight:950;cursor:pointer;box-shadow:0 8px 18px rgba(37,99,235,.2)}
.webpc-compress:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.webpc-compress.is-loading{pointer-events:none}
body.theme-dark .webp-compressor-workspace{border-color:rgba(96,165,250,.2);background:#0b1220}
body.theme-dark .webpc-panel,body.theme-dark .webpc-panel-header,body.theme-dark .webpc-footer{border-color:rgba(148,163,184,.16);background:#111b2d}
body.theme-dark .webpc-panel-header{background:linear-gradient(180deg,#132033,#101a2b)}
body.theme-dark .webpc-panel-header>span,body.theme-dark .webpc-file strong,body.theme-dark .webpc-mode-tabs button b,body.theme-dark .webpc-setting>span,body.theme-dark .webpc-setting-head span,body.theme-dark .webpc-switch b,body.theme-dark .webpc-preview-empty strong,body.theme-dark .webpc-stats b,body.theme-dark .webpc-next strong{color:#f8fafc}
body.theme-dark .webpc-drop,body.theme-dark .webpc-quality-card,body.theme-dark .webpc-setting,body.theme-dark .webpc-switch,body.theme-dark .webpc-mode-tabs button,body.theme-dark .webpc-stats div,body.theme-dark .webpc-next{border-color:rgba(148,163,184,.16);background:#132033}
body.theme-dark .webpc-mode-tabs button.is-active,body.theme-dark .webpc-next{background:#142746}
body.theme-dark .webpc-setting select,body.theme-dark .webpc-setting input[type="number"],body.theme-dark .webpc-presets button{border-color:rgba(148,163,184,.2);background:#0f1a2b;color:#e2e8f0}
body.theme-dark .webpc-preview{background:#0c1422}body.theme-dark .webpc-preview-media{border-color:rgba(148,163,184,.16)}
body.theme-dark .webpc-preview-loading{background:rgba(11,18,32,.82);color:#93c5fd}
body.theme-dark .webpc-file span,body.theme-dark .webpc-setting small,body.theme-dark .webpc-switch small,body.theme-dark .webpc-preview-empty span,body.theme-dark .webpc-stats span,body.theme-dark .webpc-next span{color:#a8b6c8}
@media(max-width:980px){.webpc-grid{grid-template-columns:1fr}.webpc-preview{min-height:360px}.webpc-preview-empty,.webpc-preview-media{min-height:328px}}
@media(max-width:640px){.webp-compressor-workspace{border-radius:12px}.webpc-grid{gap:12px;padding:10px}.webpc-panel{border-radius:12px}.webpc-panel-header{align-items:flex-start;padding:12px}.webpc-preview-actions{width:100%}.webpc-panel-header:has(.webpc-preview-actions){flex-direction:column}.webpc-mode-tabs{grid-template-columns:1fr;padding:0 12px 12px}.webpc-mode-tabs button{min-height:auto}.webpc-settings{padding:0 12px 12px}.webpc-drop{margin:12px}.webpc-presets{grid-template-columns:1fr}.webpc-stats{grid-template-columns:repeat(2,1fr);padding:12px}.webpc-preview{min-height:300px;padding:10px}.webpc-preview-empty,.webpc-preview-media{min-height:278px}.webpc-next{margin:0 12px 12px}.webpc-next>div:last-child{display:grid;grid-template-columns:1fr 1fr}.webpc-next a{text-align:center}}