.imgcomp{display:flex;flex-direction:column;gap:20px}.imgcomp__dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:48px 24px;border:2px dashed var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-soft, rgba(0, 0, 0, .03));cursor:pointer;transition:border-color var(--transition-fast, .15s),background var(--transition-fast, .15s);text-align:center}.imgcomp__dropzone:hover,.imgcomp__dropzone--active{border-color:var(--color-primary, #2b6cff);background:var(--color-primary-soft, rgba(43, 108, 255, .06))}.imgcomp__dropzone-icon{font-size:48px;line-height:1}.imgcomp__dropzone-text{font-size:16px;font-weight:600;color:var(--color-text)}.imgcomp__dropzone-hint{font-size:13px;color:var(--color-text-soft)}.imgcomp__panel{display:flex;flex-direction:column;gap:18px;padding:18px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-soft, rgba(0, 0, 0, .03))}.imgcomp__field-group{display:flex;flex-direction:column;gap:10px}.imgcomp__field-group--row{flex-direction:row;flex-wrap:wrap;gap:20px}.imgcomp__field-inline{display:flex;align-items:center;gap:8px}.imgcomp__field-label{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600;color:var(--color-text);white-space:nowrap}.imgcomp__field-value{font-size:13px;font-weight:400;color:var(--color-primary, #2b6cff);font-family:var(--font-mono)}.imgcomp__field-hint{font-size:12px;font-weight:400;color:var(--color-text-soft)}.imgcomp__field-unit{font-size:13px;color:var(--color-text-soft)}.imgcomp__format-options{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.imgcomp__format-item{display:flex;flex-direction:column;gap:4px;padding:12px 14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);cursor:pointer;transition:border-color var(--transition-fast, .15s),background var(--transition-fast, .15s)}.imgcomp__format-item--active{border-color:var(--color-primary, #2b6cff);background:var(--color-primary-soft, rgba(43, 108, 255, .06))}.imgcomp__format-item input{position:absolute;opacity:0;pointer-events:none}.imgcomp__format-label{font-size:15px;font-weight:700;color:var(--color-text)}.imgcomp__format-desc{font-size:12px;color:var(--color-text-soft)}.imgcomp__slider{width:100%;height:6px;border-radius:3px;background:var(--color-border);appearance:none;-webkit-appearance:none;cursor:pointer}.imgcomp__slider:disabled{opacity:.5;cursor:not-allowed}.imgcomp__slider::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:var(--color-primary, #2b6cff);cursor:pointer;border:2px solid var(--color-bg);box-shadow:0 1px 3px #0003}.imgcomp__slider::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--color-primary, #2b6cff);cursor:pointer;border:2px solid var(--color-bg);box-shadow:0 1px 3px #0003}.imgcomp__number-input{width:100px;padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-family:var(--font-mono);font-size:14px;transition:border-color var(--transition-fast, .15s)}.imgcomp__number-input:focus{outline:none;border-color:var(--color-primary, #2b6cff);box-shadow:var(--focus-ring, 0 0 0 3px rgba(43, 108, 255, .15))}.imgcomp__preview-area{display:grid;grid-template-columns:1fr 1fr;gap:16px}.imgcomp__preview-card{display:flex;flex-direction:column;gap:10px;padding:14px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg)}.imgcomp__preview-header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px}.imgcomp__preview-title{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:700;color:var(--color-text)}.imgcomp__preview-meta{font-size:12px;color:var(--color-text-soft);font-family:var(--font-mono)}.imgcomp__badge{padding:2px 8px;border-radius:10px;background:var(--color-primary-soft, rgba(43, 108, 255, .1));color:var(--color-primary, #2b6cff);font-size:11px;font-weight:600}.imgcomp__preview-img-wrap{display:flex;align-items:center;justify-content:center;min-height:200px;max-height:400px;overflow:hidden;border-radius:var(--radius-sm);background:linear-gradient(45deg,var(--color-border) 25%,transparent 25%),linear-gradient(-45deg,var(--color-border) 25%,transparent 25%),linear-gradient(45deg,transparent 75%,var(--color-border) 75%),linear-gradient(-45deg,transparent 75%,var(--color-border) 75%);background-size:16px 16px;background-position:0 0,0 8px,8px -8px,-8px 0;background-color:var(--color-bg-soft, #f8f8f8)}.imgcomp__preview-img-wrap img{max-width:100%;max-height:400px;object-fit:contain}.imgcomp__preview-placeholder{color:var(--color-text-soft);font-size:14px;font-style:italic}.imgcomp__stats-bar{display:flex;flex-wrap:wrap;align-items:center;gap:16px;padding:14px 18px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg-soft, rgba(0, 0, 0, .03))}.imgcomp__stat{display:flex;flex-direction:column;gap:2px}.imgcomp__stat-label{font-size:12px;color:var(--color-text-soft)}.imgcomp__stat-value{font-size:16px;font-weight:700;color:var(--color-text);font-family:var(--font-mono)}.imgcomp__stat-value--good{color:var(--color-success, #1aaa55)}.imgcomp__stat-value--bad{color:var(--color-warning, #d97706)}.imgcomp__actions{display:flex;gap:10px;flex-wrap:wrap}.imgcomp__btn{padding:10px 18px;border:1px solid var(--color-border);border-radius:var(--radius-md);background:var(--color-bg);color:var(--color-text);font-size:14px;font-weight:600;cursor:pointer;transition:border-color var(--transition-fast, .15s),background var(--transition-fast, .15s)}.imgcomp__btn:hover{border-color:var(--color-primary, #2b6cff);background:var(--color-primary-soft, rgba(43, 108, 255, .06))}.imgcomp__btn--primary{background:var(--color-primary, #2b6cff);color:#fff;border-color:var(--color-primary, #2b6cff);margin-left:auto}.imgcomp__btn--primary:hover{background:var(--color-primary-dark, #1e54d9);border-color:var(--color-primary-dark, #1e54d9)}.imgcomp__btn--ghost{background:transparent;border-color:transparent;color:var(--color-text-soft)}.imgcomp__btn--ghost:hover{background:var(--color-bg-soft, rgba(0, 0, 0, .04));border-color:var(--color-border)}.imgcomp__error{padding:12px 16px;border-radius:var(--radius-md);background:var(--color-danger-soft, rgba(220, 53, 69, .08));border:1px solid var(--color-danger-border, rgba(220, 53, 69, .2));color:var(--color-danger, #dc3545);font-size:14px}.imgcomp__notice{padding:10px 14px;border-radius:var(--radius-sm);background:var(--color-warning-soft, rgba(217, 119, 6, .08));color:var(--color-warning, #d97706);font-size:13px}@media(prefers-color-scheme:dark){.imgcomp__dropzone,.imgcomp__panel,.imgcomp__preview-card,.imgcomp__stats-bar,.imgcomp__format-item{background:#ffffff0a}.imgcomp__preview-img-wrap{background-color:#ffffff05}}@media(max-width:768px){.imgcomp__preview-area,.imgcomp__format-options{grid-template-columns:1fr}.imgcomp__stats-bar{flex-direction:column;align-items:stretch}.imgcomp__btn--primary{margin-left:0;width:100%}}@media(max-width:414px){.imgcomp__field-group--row{flex-direction:column;gap:12px}.imgcomp__field-inline{width:100%}.imgcomp__number-input{flex:1}}