.toolroll-app.toolroll-image-compressor { width: 100%; padding: 20px; border: 1px solid #d8dee8; border-radius: 10px; background: #fff; box-sizing: border-box; color: #273142; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__field { min-width: 0; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__quality { margin-top: 18px; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__field > label { display: block; margin-bottom: 7px; font-weight: 700; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__field input[type="file"],
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__field input[type="number"],
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__field select { display: block; width: 100%; max-width: 100%; padding: 10px 12px; border: 1px solid #aeb8c7; border-radius: 7px; box-sizing: border-box; font: inherit; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__field input[type="file"] { padding: 0; border: 0; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__hint { margin: 7px 0 0; color: #58677b; font-size: .9rem; line-height: 1.6; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__color { display: flex; align-items: center; gap: 12px; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__color input { width: 52px; height: 42px; padding: 2px; border: 1px solid #aeb8c7; border-radius: 7px; background: #fff; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__color output { font-family: monospace; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__button { padding: 10px 18px; border: 1px solid #68778b; border-radius: 7px; background: #fff; color: #273142; font: inherit; font-weight: 700; cursor: pointer; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__button--primary { border-color: #1769aa; background: #1769aa; color: #fff; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__button:disabled { opacity: .55; cursor: not-allowed; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__button:focus-visible,
.toolroll-app.toolroll-image-compressor input:focus-visible,
.toolroll-app.toolroll-image-compressor select:focus-visible { outline: 3px solid #79b8f3; outline-offset: 2px; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; margin: 18px 0 0; padding: 14px; background: #f6f8fb; border-radius: 8px; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__info div { min-width: 0; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__info dt { color: #58677b; font-size: .86rem; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__info dd { margin: 3px 0 0; overflow-wrap: anywhere; font-weight: 700; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__result { margin-top: 22px; padding-top: 20px; border-top: 1px solid #d8dee8; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__preview { display: flex; justify-content: center; padding: 12px; border: 1px solid #c7d0dc; border-radius: 8px; background-color: #f7f8fa; background-image: linear-gradient(45deg, #e5e7eb 25%, transparent 25%), linear-gradient(-45deg, #e5e7eb 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e5e7eb 75%), linear-gradient(-45deg, transparent 75%, #e5e7eb 75%); background-size: 20px 20px; background-position: 0 0, 0 10px, 10px -10px, -10px 0; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__preview img { display: block; max-width: 100%; max-height: 520px; width: auto; height: auto; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__result > .toolroll-image-compressor__button { margin-top: 14px; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__status { margin: 16px 0 0; padding: 10px 12px; color: #3b4658; background: #eef1f5; border-radius: 7px; font-size: .9rem; line-height: 1.6; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__status[data-state="error"] { color: #7a271a; background: #fde8e4; border-left: 4px solid #c43d2b; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__status[data-state="success"] { color: #0b5135; background: #e2f4eb; border-left: 4px solid #137a52; }
.toolroll-app.toolroll-image-compressor .toolroll-image-compressor__status[data-state="warning"] { color: #6b4e00; background: #fff4cc; border-left: 4px solid #b88700; }
@media (max-width: 640px) {
  .toolroll-app.toolroll-image-compressor .toolroll-image-compressor__info { grid-template-columns: 1fr; }
  .toolroll-app.toolroll-image-compressor .toolroll-image-compressor__button { width: 100%; }
}