/* Image tools extend the shared tool shell without changing older pages. */
.image-tools-page #inner-headline .breadcrumb { margin: 0; padding: 14px 0; background: transparent; line-height: 1.7; }
.image-tools-page #inner-headline .breadcrumb > li { display: inline; color: #d1dbe8; }
.image-tools-page #inner-headline .breadcrumb a { color: #fff; }
.image-tools-page #inner-headline .breadcrumb a:hover,
.image-tools-page #inner-headline .breadcrumb a:focus { text-decoration: underline; }
.image-tools-page .tool-shell > .privacy-note:first-child { margin: 0 0 18px; }
.image-tools-page .image-drop {
    margin-bottom: 18px;
    padding: 18px;
    border: 2px dashed #b8c7dc;
    border-radius: 10px;
    background: #f8fbff;
    transition: background 0.15s ease, border-color 0.15s ease;
}
.image-tools-page .image-drop.is-dragover,
.image-tools-page .image-drop.is-dragging {
    border-color: #0052cc;
    background: #eaf3ff;
}
.image-tools-page .image-drop p { margin: 0 0 10px; }
.image-tools-page .image-drop input[type="file"] { background: #fff; }
.image-tools-page .image-drop .field-help { display: block; margin-top: 8px; }
.image-tools-page .image-preview-frame {
    display: flex;
    min-height: 240px;
    align-items: center;
    justify-content: center;
    padding: 12px;
    overflow: hidden;
    border: 1px solid #c8d4e3;
    border-radius: 8px;
    background-color: #fff;
    background-image: linear-gradient(45deg, #e9edf3 25%, transparent 25%), linear-gradient(-45deg, #e9edf3 25%, transparent 25%), linear-gradient(45deg, transparent 75%, #e9edf3 75%), linear-gradient(-45deg, transparent 75%, #e9edf3 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0;
}
.image-tools-page .image-preview-frame img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    max-height: 320px;
    object-fit: contain;
}
.image-tools-page .image-empty {
    max-width: 100%;
    margin: 0;
    padding: 10px 14px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.92);
    color: #526176;
    text-align: center;
    overflow-wrap: anywhere;
}
.image-tools-page .image-info {
    min-width: 0;
    margin-top: 10px;
    color: #526176;
    font-size: 13px;
    line-height: 1.65;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.image-tools-page .image-info:empty { display: none; }
.image-tools-page .image-options { align-items: center; margin-top: 18px; }
.image-tools-page .image-options .option-field { flex: 1 1 160px; min-width: 0; max-width: 280px; }
.image-tools-page .image-options .quality-field { flex-basis: 250px; }
.image-tools-page .image-options .field-help { display: block; margin-top: 6px; }
.image-tools-page .quality-control { display: flex; align-items: center; gap: 12px; min-height: 42px; }
.image-tools-page input[type="range"] { display: block; flex: 1 1 auto; min-width: 0; width: 100%; max-width: 100%; accent-color: #0052cc; }
.image-tools-page #quality-value { flex: 0 0 44px; margin: 0; padding: 0; color: #172b4d; font-size: 14px; text-align: right; }
.image-tools-page input[type="color"] { width: 100%; max-width: 150px; height: 42px; padding: 4px; border: 1px solid #c8d4e3; border-radius: 8px; background: #fff; cursor: pointer; }
.image-tools-page .image-options .check-option { display: flex; align-items: center; margin: 0; }
.image-tools-page .image-options .check-option input { flex: 0 0 auto; }
.image-tools-page .image-svg-source { margin: 0 0 18px; padding: 12px 14px; border: 1px solid #dbe4f0; border-radius: 8px; }
.image-tools-page .image-svg-source summary { color: #17335d; font-weight: 700; cursor: pointer; }
.image-tools-page .image-svg-source[open] summary { margin-bottom: 12px; }
.image-tools-page .image-svg-source textarea { min-height: 160px; }
.image-tools-page textarea { max-width: 100%; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-all; }
.image-tools-page #tool-output { min-height: 240px; }
.image-tools-page .image-limits { display: block; margin-top: 12px; color: #526176; font-size: 12px; line-height: 1.65; }
.image-tools-page .tool-button:disabled { cursor: not-allowed; }
@media (max-width: 768px) {
    .image-tools-page header .navbar-toggle { display: none !important; }
    .image-tools-page .image-options { align-items: stretch; }
    .image-tools-page .image-options .option-field { flex: 1 1 100%; max-width: none; }
    .image-tools-page .image-drop { padding: 14px 12px; }
    .image-tools-page .image-preview-frame { min-height: 190px; }
    .image-tools-page .image-preview-frame img { max-height: 280px; }
}