.image-compression-page .ic-webp-suggestion{background:var(--color-bg);border:1px solid var(--color-border);border-left:3px solid var(--color-primary);border-radius:var(--radius-xl);color:var(--color-text);padding:var(--space-5)}.image-compression-page .ic-webp-suggestion[hidden]{display:none}.image-compression-page .ic-webp-suggestion p{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:var(--space-2) 0 var(--space-4)}.image-compression-page .ic-webp-suggestion .btn{text-align:center;white-space:normal}.image-compression-page .ic-webp-suggestion small{color:var(--color-text-secondary);display:block;margin-top:var(--space-2)}.ic-landing-links{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.ic-landing-links a{background:var(--color-bg);border:1px solid var(--color-border);border-radius:10px;color:var(--color-primary);font-size:.875rem;padding:7px 12px}.ic-landing-links a[aria-current=page]{border-color:var(--color-primary);color:var(--color-primary)}.image-compression-page .ic-landing-details .tool-seo-card h3{color:var(--color-text);font-size:1.0625rem;font-weight:var(--font-bold);letter-spacing:-.015em;line-height:1.4;margin:0 0 var(--space-2)}.image-compression-page .ic-landing-details .tool-seo-card p+p{margin-top:var(--space-3)}.image-compression-page [data-guidance-indicator]{width:calc(33.33333% - 6.66667px)}.image-compression-page .ic-upload__error{background:color-mix(in srgb,var(--color-error) 7%,var(--color-bg));border:1px solid var(--color-error);border-radius:var(--radius-md);color:var(--color-text);font-size:var(--text-sm);margin:0 0 var(--space-3);padding:var(--space-3) var(--space-4)}.ic-result{animation:fadeInUp .3s ease-out;display:flex;flex-direction:column;gap:var(--space-6)}.ic-result.drag-over{border-radius:var(--radius-xl);outline:2px dashed var(--color-primary);outline-offset:8px}@keyframes fadeInUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.ic-batch-toolbar{align-items:center;background:linear-gradient(135deg,color-mix(in srgb,var(--color-primary) 8%,var(--color-bg)) 0,var(--color-bg) 72%);border:1px solid color-mix(in srgb,var(--color-primary) 22%,var(--color-border));border-radius:var(--radius-xl);display:flex;gap:var(--space-4);justify-content:space-between;padding:var(--space-4)}.ic-batch-toolbar__heading,.ic-batch-toolbar__summary{align-items:center;display:flex;gap:var(--space-3);min-width:0}.ic-batch-toolbar__icon{background:linear-gradient(135deg,var(--color-primary),#7c3aed);border-radius:13px;box-shadow:0 8px 18px rgba(79,70,229,.24);color:#fff;display:grid;flex-shrink:0;height:42px;place-items:center;width:42px}.ic-batch-toolbar__summary>div{display:flex;flex-direction:column;min-width:0}.ic-batch-toolbar__summary strong{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-bold)}.ic-batch-toolbar__summary span:last-child{color:var(--color-text-muted);font-size:var(--text-xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ic-add-btn{align-items:center;background:var(--color-bg);border:1px solid color-mix(in srgb,var(--color-primary) 30%,var(--color-border));border-radius:11px;color:var(--color-primary);cursor:pointer;display:inline-flex;flex-shrink:0;font:inherit;font-size:var(--text-sm);font-weight:var(--font-semibold);gap:7px;justify-content:center;min-height:38px;padding:0 var(--space-4);transition:transform var(--transition-fast),border-color var(--transition-fast),box-shadow var(--transition-fast)}.ic-add-btn:hover{border-color:var(--color-primary);box-shadow:0 5px 14px rgba(79,70,229,.12);transform:translateY(-1px)}.ic-file-list{display:grid;gap:var(--space-3);grid-template-columns:repeat(2,minmax(0,1fr));max-height:245px;overflow-y:auto;padding:2px;scrollbar-color:var(--color-border-strong) transparent;scrollbar-width:thin}.ic-file-item{align-items:center;background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:14px;color:inherit;cursor:pointer;display:grid;gap:10px;grid-template-columns:48px minmax(0,1fr) 24px 28px;min-width:0;padding:8px;text-align:left;transition:border-color var(--transition-fast),background var(--transition-fast),box-shadow var(--transition-fast);width:100%}.ic-file-item:hover{border-color:color-mix(in srgb,var(--color-primary) 45%,var(--color-border))}.ic-file-item:focus-visible{outline:3px solid color-mix(in srgb,var(--color-primary) 25%,transparent);outline-offset:2px}.ic-file-item.active{background:color-mix(in srgb,var(--color-primary) 6%,var(--color-bg));border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 11%,transparent)}.ic-file-item__thumb{background:var(--color-bg-tertiary);border-radius:10px;height:48px;object-fit:cover;width:48px}.ic-file-item__info{display:flex;flex-direction:column;min-width:0}.ic-file-item__info small,.ic-file-item__info strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.ic-file-item__info strong{color:var(--color-text);font-size:var(--text-xs);font-weight:var(--font-semibold)}.ic-file-item__info small{color:var(--color-text-muted);font-size:11px;margin-top:2px}.ic-file-item__status{color:var(--color-text-muted);display:grid;height:22px;place-items:center;width:22px}.ic-file-item__status svg{fill:none;height:20px;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round;stroke-width:2.5;width:20px}.ic-file-item__status--done{color:var(--color-success)}.ic-file-item__status--processing:after{animation:icSpin .7s linear infinite;border:2px solid var(--color-border);border-radius:50%;border-top-color:var(--color-primary);content:"";height:15px;width:15px}.ic-file-item__status--processing>*{display:none}.ic-file-item__status--error{color:var(--color-error,#dc2626)}.ic-file-item__index{font-size:10px;font-weight:var(--font-bold)}@keyframes icSpin{to{transform:rotate(1turn)}}.ic-file-item__remove{border-radius:8px;color:var(--color-text-muted);display:grid;height:28px;place-items:center;transition:color var(--transition-fast),background var(--transition-fast);width:28px}.ic-file-item__remove:hover{background:color-mix(in srgb,var(--color-error,#dc2626) 9%,transparent);color:var(--color-error,#dc2626)}.ic-file-item__remove svg{fill:none;height:16px;stroke:currentColor;stroke-linecap:round;stroke-width:2;width:16px}@media (max-width:720px){.ic-file-list{grid-template-columns:1fr}}@media (max-width:480px){.ic-batch-toolbar{align-items:stretch;flex-direction:column}.ic-add-btn{width:100%}}.ic-preview{display:grid;gap:var(--space-3);grid-template-columns:1fr}@media (min-width:640px){.ic-preview{gap:var(--space-4);grid-template-columns:1fr 1fr}}.ic-preview__panel{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-direction:column;overflow:hidden;transition:box-shadow var(--transition-fast)}.ic-preview__panel:hover{box-shadow:var(--shadow-card)}.ic-preview__label{align-items:center;display:flex;font-size:var(--text-xs);font-weight:var(--font-semibold);justify-content:space-between;letter-spacing:.5px;padding:var(--space-3) var(--space-4)}.ic-preview__label--before{color:var(--color-text-secondary)}.ic-preview__label--after{color:var(--color-success)}.ic-preview__img-wrap{align-items:center;background:var(--color-bg-tertiary);display:flex;justify-content:center;min-height:140px;overflow:hidden;position:relative}.ic-preview__img-wrap img{display:block;height:220px;object-fit:contain;width:100%}.ic-preview__meta{align-items:center;display:flex;gap:var(--space-2);justify-content:space-between;padding:var(--space-2) var(--space-4)}.ic-preview__size{color:var(--color-text-secondary);font-size:var(--text-xs);font-weight:var(--font-semibold)}.ic-preview__badge{border-radius:999px;font-size:10px;font-weight:var(--font-bold);letter-spacing:.5px;padding:2px 8px}.badge--original{background:var(--color-bg-tertiary);color:var(--color-text-muted)}.badge--compressed{background:color-mix(in srgb,var(--color-success) 12%,var(--color-bg));color:var(--color-success)}.ic-stats{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:grid;gap:var(--space-3);grid-template-columns:repeat(3,1fr);padding:var(--space-4)}.ic-stat{align-items:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-lg);display:flex;flex-direction:column;gap:var(--space-1);padding:var(--space-3);text-align:center}.ic-stat__icon{align-items:center;background:var(--color-primary-light);border:1px solid color-mix(in srgb,var(--color-primary) 16%,transparent);border-radius:10px;color:var(--color-primary);display:inline-flex;height:32px;justify-content:center;width:32px}.ic-stat__icon svg{height:18px;width:18px}.ic-stat__num{color:var(--color-text);font-family:var(--font-mono);font-size:var(--text-lg);font-weight:var(--font-bold);line-height:1}.ic-stat__num--success{color:var(--color-success)}.ic-stat__lbl{color:var(--color-text-muted);font-size:10px;font-weight:var(--font-semibold);letter-spacing:1px;text-transform:uppercase}@media (min-width:640px){.ic-stats{gap:var(--space-4);padding:var(--space-5)}.ic-stat__num{font-size:var(--text-xl)}}.ic-settings{background:radial-gradient(circle at 96% 0,color-mix(in srgb,var(--color-primary) 11%,transparent),transparent 38%),var(--color-bg-secondary);border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-border));border-radius:var(--radius-xl);box-shadow:0 12px 30px rgba(15,23,42,.05);display:flex;flex-direction:column;gap:var(--space-5);padding:clamp(18px,3vw,26px)}.ic-settings__header,.ic-settings__heading{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.ic-settings__heading{justify-content:flex-start}.ic-settings__icon{background:color-mix(in srgb,var(--color-primary) 9%,var(--color-bg));border:1px solid color-mix(in srgb,var(--color-primary) 18%,var(--color-border));border-radius:13px;color:var(--color-primary);display:grid;flex-shrink:0;height:42px;place-items:center;width:42px}.ic-settings__heading>div{display:flex;flex-direction:column}.ic-settings__heading strong{color:var(--color-text);font-size:var(--text-base);font-weight:var(--font-bold)}.ic-settings__heading span{color:var(--color-text-muted);font-size:var(--text-xs)}.format-wrap{display:flex;flex-direction:column;gap:10px}.format-wrap,.ic-mode{background:color-mix(in srgb,var(--color-bg) 84%,transparent);border:1px solid var(--color-border);border-radius:15px;padding:var(--space-4)}.ic-mode{margin:0;min-width:0}.ic-mode legend{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-semibold);padding:0 5px}.ic-mode__options{display:grid;gap:var(--space-2);grid-template-columns:repeat(2,minmax(0,1fr));margin-bottom:10px}.ic-mode__option{align-items:center;background:var(--color-bg);border:1px solid var(--color-border);border-radius:12px;cursor:pointer;display:flex;min-height:58px;min-width:0;padding:10px 12px;position:relative;transition:border-color .2s ease,background .2s ease,box-shadow .2s ease}.ic-mode__option:has(input:checked){background:color-mix(in srgb,var(--color-primary) 7%,var(--color-bg));border-color:var(--color-primary);box-shadow:0 0 0 2px color-mix(in srgb,var(--color-primary) 10%,transparent)}.ic-mode__option:has(input:focus-visible){outline:3px solid color-mix(in srgb,var(--color-primary) 22%,transparent);outline-offset:2px}.ic-mode__option input{accent-color:var(--color-primary);flex:0 0 auto;height:17px;margin:0 10px 0 0;width:17px}.ic-mode__option span{display:flex;flex-direction:column;min-width:0}.ic-mode__option strong{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-semibold)}.ic-mode__option small{color:var(--color-text-muted);font-size:11px;line-height:1.35;margin-top:2px}.ic-target{background:color-mix(in srgb,var(--color-bg) 84%,transparent);border:1px solid var(--color-border);border-radius:15px;display:flex;flex-direction:column;gap:11px;padding:var(--space-4)}.ic-target[hidden]{display:none}.ic-target__input-row{display:grid;gap:var(--space-2);grid-template-columns:minmax(0,1fr) 88px}.ic-target__input,.ic-target__unit{background:var(--color-bg);border:1px solid var(--color-border);border-radius:12px;color:var(--color-text);font:inherit;font-size:var(--text-sm);font-weight:var(--font-semibold);min-height:44px;outline:none;padding:9px 12px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.ic-target__input:focus,.ic-target__input:hover,.ic-target__unit:focus,.ic-target__unit:hover{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent)}.ic-target__input[aria-invalid=true]{border-color:var(--color-error,#dc2626);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-error,#dc2626) 10%,transparent)}.ic-target__error{color:var(--color-error,#dc2626);font-size:var(--text-xs);line-height:1.45;margin:0;min-height:0}.ic-target__error:empty{display:none}.format-header{align-items:center;display:flex;gap:var(--space-3);justify-content:space-between}.format-label{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-semibold)}.format-badge{background:color-mix(in srgb,var(--color-primary) 10%,transparent);border-radius:999px;color:var(--color-primary);font-size:10px;font-weight:var(--font-bold);letter-spacing:.35px;padding:3px 9px;text-transform:uppercase}.format-select-wrap{align-items:center;display:flex;position:relative}.format-select-wrap>svg:first-child{color:var(--color-primary);height:18px;left:13px;pointer-events:none;position:absolute;width:18px;z-index:1}.format-select{appearance:none;background:var(--color-bg);border:1px solid var(--color-border);border-radius:12px;color:var(--color-text);cursor:pointer;font:inherit;font-size:var(--text-sm);font-weight:var(--font-semibold);min-height:44px;outline:none;padding:10px 42px;transition:border-color .2s ease,box-shadow .2s ease;width:100%}.format-select:focus,.format-select:hover{border-color:var(--color-primary);box-shadow:0 0 0 3px color-mix(in srgb,var(--color-primary) 12%,transparent)}.format-select__chevron{color:var(--color-text-muted);height:17px;pointer-events:none;position:absolute;right:13px;width:17px}.format-hint{color:var(--color-text-muted);font-size:var(--text-xs);line-height:1.55;margin:0}.slider-wrap{background:color-mix(in srgb,var(--color-bg) 84%,transparent);border:1px solid var(--color-border);border-radius:15px;display:flex;flex-direction:column;gap:11px;padding:var(--space-4)}#gifControls[hidden],#outputNotice:empty,#qualityControls[hidden]{display:none}.slider-header{align-items:center;display:flex;justify-content:space-between}.slider-label{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-semibold)}.slider-hint{background:color-mix(in srgb,var(--color-primary) 10%,transparent);border-radius:999px;color:var(--color-primary);font-size:10px;letter-spacing:.35px;padding:3px 9px;text-transform:uppercase}.slider-hint,.slider-value{font-weight:var(--font-bold)}.slider-value{background:linear-gradient(135deg,var(--color-primary),#7c3aed);border-radius:12px;box-shadow:0 7px 16px rgba(79,70,229,.22);color:#fff;font-family:var(--font-mono);font-size:var(--text-xl);line-height:1;min-width:72px;padding:8px 11px;text-align:center}.slider-control{align-items:center;display:flex;height:24px;position:relative}.slider-control .slider{background:transparent;box-shadow:none;height:24px;inset:0;margin:0;position:absolute;width:100%;z-index:2}.slider-control .slider::-webkit-slider-runnable-track{background:transparent;height:8px}.slider-control .slider::-webkit-slider-thumb{border:4px solid var(--color-bg);box-shadow:0 0 0 2px var(--color-primary),0 4px 10px rgba(79,70,229,.3);height:22px;margin-top:-7px;width:22px}.slider-control .slider::-moz-range-track{background:transparent}.slider-control .slider::-moz-range-thumb{border:4px solid var(--color-bg);box-shadow:0 0 0 2px var(--color-primary),0 4px 10px rgba(79,70,229,.3);height:14px;width:14px}.slider-track{background:var(--color-bg-tertiary);border-radius:999px;height:8px;left:0;overflow:hidden;position:absolute;right:0;width:100%;z-index:1}.slider-fill{background:linear-gradient(90deg,#818cf8,var(--color-primary),#7c3aed);border-radius:999px;height:100%;transition:width .08s linear}.slider-scale{align-items:center;color:var(--color-text-muted);display:flex;font-size:var(--text-xs);justify-content:space-between}.slider-scale span{align-items:center;display:inline-flex;gap:7px}.slider-scale__dot{background:currentColor;border-radius:50%;height:5px;width:5px}@media (max-width:480px){.ic-settings__heading span{display:none}.slider-value{font-size:var(--text-lg);min-width:64px}.slider-wrap{padding:var(--space-3)}.ic-mode__options{grid-template-columns:1fr}}.ic-actions{display:flex;flex-wrap:wrap;gap:var(--space-3)}.ic-actions .btn{flex:1;min-width:140px}@media (max-width:480px){.ic-actions{flex-direction:column}.ic-actions .btn{min-width:100%}}.hidden{display:none!important}.benefits h2,.faq h2,.how-to-use h2,.related-tools h2{color:var(--color-text);font-size:var(--text-2xl);font-weight:var(--font-bold);letter-spacing:var(--tracking-snug);line-height:1.25;margin:0 0 var(--space-6)}.steps{flex-direction:column}.step,.steps{display:flex;gap:var(--space-4)}.step{align-items:flex-start;background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-4);transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.step:hover{box-shadow:var(--shadow-card);transform:translateY(-1px)}.step-num{align-items:center;background:var(--color-primary);border-radius:50%;box-shadow:0 2px 8px rgba(79,70,229,.35);color:#fff;display:flex;flex-shrink:0;font-size:var(--text-sm);font-weight:var(--font-bold);height:36px;justify-content:center;width:36px}.step-body{flex:1;min-width:0}.step-title{color:var(--color-text);font-size:var(--text-base);font-weight:var(--font-semibold);letter-spacing:var(--tracking-snug);margin:0 0 var(--space-2)}.step-desc{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:0}@media (max-width:480px){.step{flex-direction:column;gap:var(--space-3)}.step-num{font-size:var(--text-xs);height:30px;width:30px}}.benefits-grid{display:grid;gap:var(--space-3);grid-template-columns:1fr}@media (min-width:640px){.benefits-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width:1024px){.benefits-grid{grid-template-columns:repeat(3,1fr)}}.benefit-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);padding:var(--space-5);transition:box-shadow var(--transition-fast),transform var(--transition-fast)}.benefit-card:hover{box-shadow:var(--shadow-card);transform:translateY(-2px)}.benefit-icon{font-size:1.5rem;line-height:1;margin-bottom:var(--space-3)}.benefit-card h3{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-semibold);letter-spacing:var(--tracking-snug);margin:0 0 var(--space-2)}.benefit-card p{color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:0}.faq-list{display:flex;flex-direction:column;gap:var(--space-3)}.faq-item{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);overflow:hidden;transition:box-shadow var(--transition-fast)}.faq-item:hover,.faq-item[open]{box-shadow:var(--shadow-card)}.faq-question{align-items:center;color:var(--color-text);cursor:pointer;display:flex;font-size:var(--text-sm);font-weight:var(--font-semibold);gap:var(--space-4);justify-content:space-between;letter-spacing:var(--tracking-snug);list-style:none;padding:var(--space-4) var(--space-5);transition:background var(--transition-fast)}.faq-question::-webkit-details-marker{display:none}.faq-question:after{color:var(--color-primary);content:"+";flex-shrink:0;font-size:var(--text-lg);font-weight:400;line-height:1;transition:transform var(--transition-fast)}.faq-item[open] .faq-question:after{content:"−";transform:rotate(0deg)}.faq-question:hover{background:var(--color-bg-secondary)}.faq-answer{border-top:1px solid var(--color-border);color:var(--color-text-secondary);font-size:var(--text-sm);line-height:var(--leading-relaxed);margin:0;padding:0 var(--space-5) var(--space-4);padding-top:var(--space-4)}.tools-grid{display:grid;gap:var(--space-3)}.tools-grid,.tools-grid-3{grid-template-columns:1fr}@media (min-width:480px){.tools-grid-3{grid-template-columns:repeat(3,1fr)}}.tool-card{background:var(--color-bg);border:1px solid var(--color-border);border-radius:var(--radius-xl);display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-4);text-decoration:none;transition:box-shadow var(--transition-fast),transform var(--transition-fast),border-color var(--transition-fast)}.tool-card:hover{border-color:var(--color-primary);box-shadow:var(--shadow-card);transform:translateY(-2px)}.tool-card__icon{font-size:1.5rem;line-height:1}.tool-card__name{color:var(--color-text);font-size:var(--text-sm);font-weight:var(--font-semibold);letter-spacing:var(--tracking-snug);margin:0}.tool-card__desc{color:var(--color-text-muted);font-size:var(--text-xs);line-height:var(--leading-relaxed);margin:0}@media (max-width:1023px){body .tool-page.image-compression-page .main-column .tool-intro.ic-primary-intro.is-collapsible:not(.is-expanded) .ic-landing-links{visibility:hidden}}