/* Individual tools share the directory's surfaces without changing tool behavior. */
.tool-page, .tool-page :is(button, input, select, textarea, output, a), .rot-select-menu { font-variant-numeric: tabular-nums; }
.eyy-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.tool-page .eyy-icon { display: inline-block; flex: none; width: 16px; height: 16px; vertical-align: -.2em; background: currentColor; mask: var(--eyy-icon) center / contain no-repeat; -webkit-mask: var(--eyy-icon) center / contain no-repeat; pointer-events: none; }
.tool-page .eyy-icon--download { --eyy-icon: url('/dist/img/icons/download.svg'); margin-right: 5px; }
.tool-page .eyy-icon--crop { --eyy-icon: url('/dist/img/icons/crop.svg'); }
.tool-page .eyy-icon--chevron-up, .tool-page .eyy-icon--chevron-down { --eyy-icon: url('/dist/img/icons/chevron-up.svg'); }
.tool-page .eyy-icon--chevron-down { transform: rotate(180deg); }
.tool-page .eyy-icon--close { --eyy-icon: url('/dist/img/icons/x.svg'); }
@media (forced-colors: active) { .tool-page .eyy-icon { forced-color-adjust: none; } }
/* Full-width media strips meet the edges of the viewer. */
.eyy-media-strip { box-sizing: border-box; border-block: 2px solid #242428; }
.eyy-timeline-seek { --eyy-seek-accent: #829eff; position: relative; width: 100%; height: 20px; cursor: pointer; touch-action: none; user-select: none; }
.eyy-timeline-seek::before, .eyy-seek-fill { position: absolute; top: 9px; left: 0; height: 2px; }
.eyy-timeline-seek::before { content: ''; right: 0; background: #29292d; }
.eyy-seek-fill { width: var(--eyy-seek-position, 0%); background: var(--eyy-seek-accent); }
.eyy-seek-head { position: absolute; top: 3px; bottom: 3px; left: clamp(0px, var(--eyy-seek-position, 0%), calc(100% - 2px)); width: 2px; background: var(--eyy-seek-accent); box-shadow: 0 0 6px var(--eyy-seek-accent); }
.eyy-timeline-seek[aria-disabled="true"] { opacity: .4; cursor: default; }
.eyy-timeline-seek:focus-visible .eyy-seek-head { box-shadow: 0 0 9px var(--eyy-seek-accent); }
.eyy-operation-status { position: absolute; z-index: 5; top: 50%; left: 50%; display: flex; align-items: center; gap: 10px; max-width: calc(100% - 24px); padding: 8px 10px; border: 2px solid #303038; border-radius: 6px; background: #000; color: #eee; transform: translate(-50%, -50%); pointer-events: none; }
.eyy-operation-status[hidden] { display: none; }
.eyy-operation-spinner { box-sizing: border-box; flex: none; width: 14px; height: 14px; border: 2px solid #3b3b43; border-top-color: #8ba1ff; border-radius: 50%; animation: eyy-operation-spin .8s linear infinite; }
.eyy-operation-message { font-variant-numeric: tabular-nums; }
.tool-page .eyy-operation-status button:not(.default) { min-height: 28px; padding: 3px 8px; font-size: .8rem; pointer-events: auto; }
@keyframes eyy-operation-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .eyy-operation-spinner { animation: none; } }
.eyy-timeline-mark { position: absolute; z-index: 3; top: 0; bottom: 0; left: clamp(1px, var(--eyy-mark-position), calc(100% - 1px)); width: 2px; background: #51e6cf; pointer-events: none; }
.eyy-timeline-mark--end { background: #f185b7; }
.eyy-timeline-mark::after { content: attr(data-label); position: absolute; top: 3px; left: 5px; padding: 3px 5px; background: #000e; color: #d5fff8; font-size: .7rem; line-height: 1.2; white-space: nowrap; }
.eyy-timeline-mark--end::after { top: 25px; color: #ffd3e8; }
.eyy-timeline-mark.is-right::after { left: auto; right: 5px; }
body > .tool-page:not(.tool-page--datamosher):not(.tool-page--fullscreen) {
    width: min(1200px, calc(100% - 64px));
    max-width: none;
    margin: 0 auto;
    padding: 32px 0 48px;
}
.tool-page:not(.tool-page--datamosher) > h1 {
    margin: 0 0 9px;
    font-size: 1.5rem;
    letter-spacing: -.025em;
}
.tool-page:not(.tool-page--datamosher) > .description {
    color: #c4c2cb;
    font-size: .85rem;
    line-height: 1.5;
    margin-bottom: 22px;
}
.tool-page:not(.tool-page--datamosher) file-drop { display: block; }
.tool-page:not(.tool-page--datamosher) file-drop #selection {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 116px;
    margin: 0;
    padding: 20px;
    background: #000;
    border: 2px dashed #424351;
    border-radius: 8px;
    color: #e5e3ed;
    font-size: .95rem;
}
.tool-page:not(.tool-page--datamosher) file-drop #selection:hover,
.tool-page:not(.tool-page--datamosher) file-drop.drop-valid #selection {
    border-color: #8297ff;
    background: #151521;
}
.tool-page:not(.tool-page--datamosher) file-drop .icon { color: #98aaff; font-size: 1.2rem; }
.tool-page:not(.tool-page--datamosher) button:not(.default) {
    color: #f4f2f8;
    padding: 8px 13px;
    font-size: .9rem;
}
.tool-page :is(#sort, #compress, #apply, #imgCompress):not(.default) {
    background: #24263a;
    border-color: #59699e;
}
.tool-page :is(#sort, #compress, #apply, #imgCompress):not(.default):hover {
    background: #343952;
    border-color: #91a2eb;
}
.tool-page .notice, .tool-page .description { color: #c4c2cb; line-height: 1.5; }
.tool-page .tool-label { display: block; margin: 14px 0 7px; font-size: .9rem; font-weight: 600; color: #e6e4ed; }
.tool-page .tool-hint { margin: 0 0 10px; color: #c4c2cb; font-size: .9rem; line-height: 1.5; }

/* Text tools: keep options alongside the larger editor on wide screens. */
.sorter-workspace { display: grid; grid-template-columns: minmax(0, 1fr) 285px; gap: 20px; align-items: start; }
.sorter-editor { min-width: 0; }
.tool-page--list-sorter #list, .tool-page--js-compressor #code { width: 100%; min-height: 300px; }
.tool-page .CodeMirror {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    height: 430px;
    border: 2px solid var(--eyy-button-border) !important;
    border-radius: 6px;
    font-size: .95rem;
}
.tool-page .cm-s-dracula.CodeMirror, .tool-page .cm-s-dracula .CodeMirror-gutters { background: var(--eyy-button-background) !important; }
.tool-page .cm-s-dracula .CodeMirror-gutters { border-right: 2px solid var(--eyy-button-border); }
.tool-page .CodeMirror-focused { border-color: #7588d5 !important; }
.sorter-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.sorter-action-primary { margin-left: auto; }
.sorter-options { padding: 16px; border: 2px solid #303039; border-radius: 8px; background: #000; }
.sorter-options h2 { margin: 0 0 12px; font-size: 1rem; }
.sorter-options .filterCategory { display: flex; flex-direction: column; text-align: left; }
.sorter-options .filterCategory + .filterCategory { margin-top: 13px; padding-top: 13px; border-top: 2px solid var(--eyy-border, #101010); }
.tool-page--list-sorter .upperInfo { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; }
.tool-page--list-sorter .upperInfo > div { position: static !important; }
.tool-page--js-compressor #options { font-size: .95rem; line-height: 1.8; }
.tool-page--js-compressor #options > div[style*="color"] { color: #c4c2cb !important; }
.tool-page--js-compressor #compress { width: auto; min-width: 200px; }

/* Image editors use the available viewport, with controls separate from the viewer. */
body > .tool-page.tool-page--image-editor {
    width: 100%; max-width: none; margin: 0; padding: 0;
}
.tool-page--image-editor .image-workspace,
body > .tool-page--image-editor .image-workspace#results {
    position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, 350px);
    grid-template-areas: "preview controls"; height: 100% !important; min-height: 0;
    margin: 0; opacity: 1 !important; text-align: left; transition: none;
}
.tool-page--image-editor .image-controls {
    grid-area: controls; display: flex; flex-direction: column; min-width: 0; min-height: 0;
    padding: 12px 6px; border-left: 2px solid var(--eyy-border, #101010); background: transparent;
}
.tool-page--image-editor .image-controls h1 { margin: 0; font-size: 1rem; letter-spacing: -.025em; }
.tool-page--image-editor .image-controls > .description { margin: 7px 0 0; padding-bottom: 12px; border-bottom: 2px solid var(--eyy-border, #101010); color: #bdbbc8; font-size: .8rem; }
.tool-page--image-editor .image-controls-body { flex: 1 1 0; min-width: 0; min-height: 0; overflow-x: hidden; overflow-y: auto; overflow-wrap: anywhere; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #45454f transparent; }
.tool-page--image-editor .image-controls file-drop,
.tool-page--image-editor .image-workspace--simple file-drop { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.tool-page--image-editor .image-controls-hint { margin: 10px 0 0; color: #bdbbc8; font-size: .8rem; line-height: 1.5; }
.tool-page--image-editor .image-controls .tool-label { margin: 14px 0 6px; font-size: .8rem; font-weight: 500; }
.tool-page--image-editor .image-controls :is(input, label),
.tool-page--image-editor .image-workspace button:not(.default) { font-size: .8rem; font-weight: 500; }
.tool-page--image-editor .image-controls input[type="text"] { width: 100%; }
.tool-page--image-editor .image-controls-body select { min-width: 0; max-width: 100%; margin-right: 0; }
.tool-page--image-editor .image-controls-body input[type="range"] { display: block; width: 100%; min-width: 0; margin: 0; }
.tool-page--image-editor .image-url-row { display: flex; gap: 8px; }
.tool-page--image-editor .image-url-row input { flex: 1 1 0; width: 0; min-width: 0; padding: 6px; }
.tool-page--image-editor .image-url-row + .eyy-range-field { margin-top: 14px; }
.tool-page--image-editor .image-controls input[type="number"] { min-width: 0; min-height: 38px; width: 100%; text-align: center; }
.tool-page--image-editor .image-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tool-page--image-editor .image-fields > * { min-width: 0; }
.tool-page--image-editor .image-sliders { display: grid; gap: 12px; margin-top: 16px; }
.tool-page--image-editor .image-sliders .tool-label { margin: 0 0 6px; }
.tool-page--image-editor .image-checkboxes { margin: 16px 0; }
.tool-page--image-editor .image-control-actions { flex: none; padding-top: 10px; border-top: 2px solid var(--eyy-border, #101010); }
.tool-page--image-editor .image-primary { width: 100%; }
.tool-page--image-editor .image-secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.tool-page--image-editor .image-secondary-actions button { width: 100%; }
.tool-page--image-minifier .image-controls .imageInfo { min-height: 82px; margin: 16px 0 0; padding: 10px 0; text-align: left; border: 0; border-top: 2px solid var(--eyy-border, #101010); border-radius: 0; background: transparent; }
.tool-page--image-editor .image-preview,
body > .tool-page--image-editor #result.image-preview { grid-area: preview; position: relative; display: flex !important; min-width: 0; min-height: 0; margin: 0; overflow: hidden; background: transparent; }
.tool-page--image-editor .image-preview-stage { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; min-width: 0; min-height: 0; overflow: hidden; }
/* Match the ImageRot viewer and reveal transparent pixels without altering the image. */
.tool-page--image-editor .image-preview-stage,
.tool-page .rot-preview-stage { background: repeating-conic-gradient(#0b0b0b 0 25%, #000 0 50%) 50% / 20px 20px; }
.tool-page--image-editor .image-workspace:not([data-ready]) .image-preview-stage::after { content: 'Choose an image or drop one anywhere on this page.'; position: absolute; top: calc(50% - 62px); padding: 0 16px; color: #bdbbc8; text-align: center; pointer-events: none; }
.tool-page--image-editor .image-workspace:not([data-ready]) .image-preview-stage[aria-busy="true"]::after,
.tool-page--image-editor .image-workspace:not([data-ready]):has(.image-preview-stage[aria-busy="true"]) .image-preview-bar { visibility: hidden; }
body > .tool-page--image-editor .image-preview-stage :is(img#output, img[data-workspace-image]),
body > .tool-page--image-editor #result .image-preview-stage #pixelated { display: block; width: 100%; height: 100%; min-width: 0; max-width: 100%; max-height: 100%; margin: 0; border: 0; border-radius: 0; object-fit: contain; }
body > .tool-page--image-editor #result .image-preview-stage #pixelated { image-rendering: pixelated; }
.tool-page--image-editor .image-workspace:not([data-ready]) .image-preview-stage :is(img, canvas) { visibility: hidden; }
.tool-page--image-editor .image-preview-bar { position: absolute; z-index: 2; top: 0; right: 0; left: 0; padding: 8px; pointer-events: none; }
.tool-page--image-editor .image-actions { display: flex; align-items: center; justify-content: flex-end; gap: 6px; pointer-events: auto; }
.tool-page--image-editor .image-choose-icon { display: block; width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tool-page--image-editor .image-choose > span { display: none; }
.tool-page--image-editor .image-workspace[data-ready] .image-actions .image-choose { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; }
.tool-page--image-editor .image-workspace:not([data-ready]) .image-preview-bar { top: 50%; padding: 0; background: transparent; transform: translateY(-50%); }
.tool-page--image-editor .image-workspace:not([data-ready]) .image-actions { justify-content: center; }
.tool-page--image-editor .image-workspace:not([data-ready]) .image-actions > :not(.image-choose) { display: none; }
.tool-page--image-editor .image-workspace:not([data-ready]) .image-actions .image-choose { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin: 0; padding: 7px 12px; }
.tool-page--image-editor .image-workspace:not([data-ready]) .image-choose > span { display: inline; }
.tool-page--image-editor .image-workspace:not(.image-workspace--simple) .image-choose { margin-right: auto; }
.tool-page--image-editor .image-actions.doneOptions { position: static; opacity: 1 !important; transition: none; }
.tool-page--image-editor .image-action { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 2px solid var(--eyy-button-border); border-radius: 6px; background: var(--eyy-button-background); color: #f4f2f8; font-size: 0; text-decoration: none; }
.tool-page--image-editor .image-action::before { content: ''; width: 16px; height: 16px; background: currentColor; mask: url('/dist/img/icons/open.svg') center / contain no-repeat; -webkit-mask: url('/dist/img/icons/open.svg') center / contain no-repeat; }
.tool-page--image-editor .image-action:hover { background: var(--eyy-button-hover); }
.tool-page--image-editor .image-actions :is(button:disabled, a[aria-disabled="true"]) { opacity: .46; cursor: default; pointer-events: none; }
.tool-page--image-editor .image-actions button:not(.default) { min-height: 36px; padding: 6px 10px; }
.tool-page--image-editor .image-drop-overlay { position: fixed; inset: 52px 10px 10px; z-index: 990; display: flex; align-items: center; justify-content: center; border: 2px dashed #8b9eff; border-radius: 10px; background: #111321ed; color: #f0f0ff; font-size: 1rem; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 140ms ease, visibility 140ms; }
.tool-page--image-editor .image-workspace.is-dragging .image-drop-overlay { opacity: 1; visibility: visible; }
body > .tool-page--image-editor .image-workspace--simple#results { display: block; }
.tool-page--image-editor .image-workspace--simple .image-preview { width: 100%; height: 100%; }
.tool-page--image-editor .image-workspace--simple .image-controls { position: absolute; z-index: 3; top: 0; left: 0; width: min(45%, 440px); height: auto; padding: 10px 12px; border: 0; pointer-events: none; }
.tool-page--image-editor .image-workspace--simple .image-controls > .description { margin: 4px 0 0; padding: 0; border: 0; }
.tool-page--image-editor .image-workspace--simple .image-controls-hint { display: none; }
@media (prefers-reduced-motion: reduce) { .tool-page--image-editor .image-drop-overlay { transition: none; } }
@media (max-width: 760px) {
    /* Fullscreen tools scroll internally, so the document does not need its gutter. */
    html[data-eyy-scrollbar] body:has(> .tool-page--fullscreen) { padding-right: 0; }
    html[data-eyy-scrollbar] body:has(> .tool-page--fullscreen) > .top { width: 100%; }
    .sorter-workspace { display: block; }
    .sorter-options { margin-top: 18px; }
    .tool-page--image-editor .image-workspace, body > .tool-page--image-editor .image-workspace#results { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 40%) minmax(0, 1fr); grid-template-areas: "preview" "controls"; }
    .tool-page--image-editor .image-controls { padding: 8px 16px 8px 6px; border: 0; border-top: 2px solid var(--eyy-border, #101010); }
    .tool-page :is(.rot-controls, .trim-controls, .vt-controls, .audio-controls) { padding-right: 18px; }
    /* Let the overlay thumb sit beyond the aligned controls without covering them. */
    .tool-page :is(.image-controls-body, .rot-controls-scroll, .trim-controls-body, .vt-controls-body, .audio-controls-body) { margin-right: -10px; padding-right: 10px; }
    .tool-page--image-editor .image-workspace--simple .image-controls { width: 100%; }
    .tool-page--image-editor .image-workspace--simple .image-preview-bar { padding-top: 54px; }
}
@media (max-width: 600px) {
    body > .tool-page:not(.tool-page--datamosher):not(.tool-page--image-editor):not(.tool-page--fullscreen) { width: calc(100% - 36px); padding-top: 26px; }
    .tool-page .CodeMirror { width: 100% !important; max-width: 100% !important; height: 300px; }
    .tool-page--list-sorter .upperInfo > div { margin-top: 0; }
}

/* Preserve the image and controls while a replacement is being processed. */
.eyy-image-loading { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: rgb(0 0 0 / 38%); color: #b2fff0; pointer-events: none; animation: eyy-image-loading-in .16s ease-out; }
.eyy-image-loading[hidden] { display: none; }
.eyy-image-loading svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; animation: eyy-image-loading-spin .9s linear infinite; }
.eyy-image-loading circle { opacity: .24; }
.eyy-image-loading-message { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.tool-page .rot-preview-overlay { z-index: 2; }
@keyframes eyy-image-loading-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes eyy-image-loading-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .eyy-image-loading, .eyy-image-loading svg { animation: none; } }

/* Short image feedback stays within the viewer and never blocks its controls. */
.eyy-image-status { position: absolute; z-index: 4; right: 8px; bottom: 8px; max-width: calc(100% - 16px); padding: 6px 9px; border: 2px solid #303038; border-radius: 5px; background: #0a0a0a; color: #eee; font-size: .8rem; line-height: 1.35; overflow-wrap: anywhere; opacity: 0; transform: translateY(4px); transition: opacity .16s ease, transform .16s ease; pointer-events: none; }
.eyy-image-status.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) { .eyy-image-status { transition: none; } }

/* Hold and drag on an image to inspect a magnified area without moving the source. */
.tool-page :is(.image-preview-stage, .rot-preview-stage) :is(img, #pixelated) { user-select: none; -webkit-user-drag: none; }
.tool-page :is(.image-preview-stage, .rot-preview-stage):not(.crop-stage):not(.color-picker-stage) { touch-action: none; }
.tool-page :is(.image-workspace[data-ready], .rot-workspace.has-image) :is(.image-preview-stage, .rot-preview-stage):not(.crop-stage):not(.color-picker-stage) { cursor: zoom-in; }
.tool-page :is(.image-preview-stage, .rot-preview-stage).is-zooming:not(.crop-stage) { cursor: zoom-out; }
.tool-page .eyy-image-zoom { position: absolute; z-index: 7; top: 8px; right: 8px; box-sizing: border-box; width: min(330px, calc(100% - 16px)); max-height: calc(100% - 16px); aspect-ratio: 1; border: 2px solid #34343d; border-radius: 4px; background: repeating-conic-gradient(#171717 0 25%, #080808 0 50%) 50% / 20px 20px; box-shadow: 0 0 5px #000b; pointer-events: none; }
.tool-page .eyy-image-zoom[hidden] { display: none; }