:root {
    --bg: #f7f8f9;
    --surface: #ffffff;
    --surface-2: #f1f3f5;
    --border: #e3e6e9;
    --border-soft: rgba(0, 0, 0, .06);
    --text: #16191d;
    --text-muted: #666e78;
    --accent: #3f8fac;
    --accent-solid: #67b4d1;
    --accent-contrast: #ffffff;
    --prompt-bg: #eef6f9;
    --prompt-border: #67b4d1;
    --neg-bg: #f4f5f6;
    --neg-border: #9aa3ad;
    --param-border: #67b4d1;
    --code-bg: #16191d;
    --code-text: #e6e8ea;
    --ok: #2f7d5e;
    --warn: #8a6a1f;
    --error: #b4453f;
    --radius: 10px;
    --radius-sm: 7px;
    --shadow: 0 1px 2px rgba(16, 20, 24, .04), 0 1px 3px rgba(16, 20, 24, .06);
    --scrollbar-track: #eceef0;
    --scrollbar-thumb: #c2c7cc;
    --scrollbar-thumb-hover: #a8afb6;
}

/*
 * Dark palette. Defined once and applied from two places — the OS preference
 * and the manual [data-theme="dark"] override — so the two can never drift
 * apart. Previously --shadow and the accent borders were set only in the media
 * query, so choosing light mode on a dark OS left dark shadows behind.
 */
@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) {
    --bg: #0d0f11;
    --surface: #15181b;
    --surface-2: #1c2023;
    --border: #282d31;
    --border-soft: rgba(255, 255, 255, .07);
    --text: #e9ebed;
    --text-muted: #949ca4;
    --accent: #67b4d1;
    --accent-solid: #67b4d1;
    --accent-contrast: #0d0f11;
    --prompt-bg: #14232a;
    --prompt-border: #67b4d1;
    --neg-bg: #1d2124;
    --neg-border: #737d86;
    --param-border: #67b4d1;
    --code-bg: #0a0c0e;
    --code-text: #dfe3e6;
    --ok: #5cc08e;
    --warn: #d6a54a;
    --error: #e0736c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5);
    --scrollbar-track: #131619;
    --scrollbar-thumb: #333a40;
    --scrollbar-thumb-hover: #454e55;
    }
}

:root[data-theme="dark"] {
    --bg: #0d0f11;
    --surface: #15181b;
    --surface-2: #1c2023;
    --border: #282d31;
    --border-soft: rgba(255, 255, 255, .07);
    --text: #e9ebed;
    --text-muted: #949ca4;
    --accent: #67b4d1;
    --accent-solid: #67b4d1;
    --accent-contrast: #0d0f11;
    --prompt-bg: #14232a;
    --prompt-border: #67b4d1;
    --neg-bg: #1d2124;
    --neg-border: #737d86;
    --param-border: #67b4d1;
    --code-bg: #0a0c0e;
    --code-text: #dfe3e6;
    --ok: #5cc08e;
    --warn: #d6a54a;
    --error: #e0736c;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 1px 3px rgba(0, 0, 0, .5);
    --scrollbar-track: #131619;
    --scrollbar-thumb: #333a40;
    --scrollbar-thumb-hover: #454e55;
}

* {
    box-sizing: border-box;
}

/*
 * Thin scrollbars that follow the theme. --scrollbar-* are defined per palette
 * so the dark theme gets dark troughs instead of the light default the browser
 * would otherwise paint on scrollable panes (code views, the sidebar, tables).
 */
html {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
}

*::-webkit-scrollbar {
    width: 9px;
    height: 9px;
}

*::-webkit-scrollbar-track {
    background: var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb {
    background: var(--scrollbar-thumb);
    border-radius: 999px;
    border: 2px solid var(--scrollbar-track);
}

*::-webkit-scrollbar-thumb:hover {
    background: var(--scrollbar-thumb-hover);
}

*::-webkit-scrollbar-corner {
    background: var(--scrollbar-track);
}

/*
 * `hidden` is only `display: none` in the UA stylesheet, so any class that sets
 * an explicit display (.pill, .card, .tab ...) silently overrides it and the
 * element stays on screen with stale content. Make the attribute authoritative.
 */
[hidden] {
    display: none !important;
}

body {
    margin: 0;
    padding: 0 1.5rem 3rem;
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

.wrap {
    max-width: 1280px;
    margin: 0 auto;
    width: 100%;
}

a {
    color: var(--accent);
}

code,
kbd {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;
    font-size: .92em;
}

:not(pre)>code {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: .1em .35em;
}

/* ---------------------------------------------------------- header */

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: .9rem 1.5rem .9rem 0;
    border-bottom: 1px solid var(--border-soft);
}

.brand {
    display: flex;
    align-items: center;
    gap: .6rem;
    font-weight: 650;
    letter-spacing: -.01em;
}

.brand-mark {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: var(--accent-solid);
    display: grid;
    place-items: center;
    color: #fff;
    /* The magnifying-glass emoji renders in its own colour, so it needs to sit
       on the accent tile at a size that reads as an icon rather than filling it.
       line-height:1 keeps it optically centred across platforms. */
    font-size: 16px;
    line-height: 1;
}

.hero {
    padding: 1.75rem 1.5rem 1.75rem 0;
    border-bottom: 1px solid var(--border-soft);
    transition: padding .25s ease;
}

.hero h1,
.hero .hero-lede {
    max-width: 68ch;
}

.hero-formats {
    justify-content: flex-start;
}

/*
 * Once results exist the marketing copy steps back: the H1 stays (it is the
 * page's primary heading for SEO) but the supporting paragraph and format
 * pills collapse so the extracted metadata is what fills the viewport.
 */
.hero.compact {
    padding: .75rem 0 1rem;
}

.hero.compact h1 {
    font-size: 1.35rem;
}

.hero.compact .hero-lede,
.hero.compact .hero-formats {
    display: none;
}

.hero h1 {
    font-size: clamp(1.7rem, 4vw, 2.5rem);
    line-height: 1.15;
    letter-spacing: -.02em;
    margin: 0 0 .75rem;
}

.hero p {
    color: var(--text-muted);
    margin: 0;
    font-size: 1rem;
}

.hero-formats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .4rem;
    margin-top: 1.25rem;
}

/* ---------------------------------------------------------- pills */

.pill {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    font-size: .78rem;
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
}

/* A recognised generator: the one place a positive result is colour-coded. */
.pill-accent {
    background: color-mix(in srgb, var(--accent-solid) 18%, transparent);
    border-color: color-mix(in srgb, var(--accent-solid) 55%, transparent);
    color: var(--accent);
    font-weight: 600;
}

.pill-sm {
    font-size: .72rem;
    padding: .1rem .45rem;
}

/* "no metadata" / "reading…" recede so found results stand out beside them. */
.pill-muted {
    background: transparent;
    border-color: var(--border);
    color: var(--text-muted);
    opacity: .8;
    font-weight: 400;
}

.pill-error {
    color: var(--error);
    border-color: color-mix(in srgb, var(--error) 40%, transparent);
}

.pill-high {
    color: var(--ok);
    border-color: color-mix(in srgb, var(--ok) 40%, transparent);
}

.pill-medium {
    color: var(--warn);
    border-color: color-mix(in srgb, var(--warn) 40%, transparent);
}

.pill-low {
    color: var(--text-muted);
}

/* ---------------------------------------------------------- buttons */

.btn {
    font: inherit;
    font-weight: 550;
    font-size: .9rem;
    padding: .5rem .9rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .06s;
}

.btn:hover:not(:disabled) {
    border-color: var(--accent);
}

.btn:active:not(:disabled) {
    transform: translateY(1px);
}

.btn:disabled {
    opacity: .55;
    cursor: default;
}

/*
 * Outlined rather than a solid fill: at full sidebar width a saturated slab
 * dominates the page, so the accent is carried by the border and text.
 */
.btn-primary {
    background: transparent;
    border-color: var(--accent-solid);
    color: var(--accent);
    font-weight: 600;
}

.btn-primary:hover:not(:disabled) {
    background: color-mix(in srgb, var(--accent-solid) 12%, transparent);
    border-color: var(--accent-solid);
}

.btn-ghost {
    background: transparent;
}

.btn-sm {
    font-size: .8rem;
    padding: .3rem .6rem;
}

.icon-btn {
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    padding: .4rem .6rem;
    font-size: .95rem;
}

.icon-btn:hover {
    color: var(--text);
    border-color: var(--accent);
}

/* ---------------------------------------------------------- dropzone */

/* ------------------------------------------------- two-column layout */

/*
 * The rail divider is painted on the grid itself as a fixed-position gradient
 * stop, so it spans the full page height regardless of how tall either column
 * happens to be, and does not scroll with the sidebar's own overflow.
 */
.layout {
    display: grid;
    grid-template-columns: 300px minmax(0, 1fr);
    gap: 1.75rem;
    align-items: start;
    background-image: linear-gradient(var(--border-soft), var(--border-soft));
    background-size: 1px 100%;
    background-position: 300px 0;
    background-repeat: no-repeat;
}

/*
 * The rail is a real column, not a floating card: a hairline separator on the
 * inside edge and its own scroll region so history can grow without pushing
 * the results around.
 */
.sidebar {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
    padding: 1.25rem 1.5rem 1.5rem 0;
    max-height: 100vh;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}


.main-col {
    min-width: 0;
    padding: 1.25rem 1.5rem 1.5rem 0;
}

/* ------------------------------------------------- dropzone + preview */

.dropzone {
    background: var(--surface);
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    text-align: center;
    transition: border-color .2s, background .2s;
}

.dropzone.dragover {
    border-color: var(--accent);
    background: color-mix(in srgb, var(--accent) 6%, var(--surface));
}

.dropzone h2 {
    margin: 0 0 .35rem;
    font-size: 1.05rem;
}

.dropzone p {
    margin: 0 0 1rem;
    color: var(--text-muted);
    font-size: .86rem;
    line-height: 1.5;
}

.dropzone-icon {
    display: block;
    font-size: 1.75rem;
    line-height: 1;
    margin-bottom: .5rem;
    color: var(--text-muted);
}

/*
 * Matches the square preview's footprint so the very first upload swaps one
 * for the other without the sidebar changing height.
 */
.dropzone-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    aspect-ratio: 1 / 1;
    margin-bottom: .9rem;
    padding: 1rem .25rem;
}

.dropzone-empty p {
    margin: 0;
}

/*
 * The preview replaces the empty state once a file is loaded.
 *
 * A fixed square reserves its space before the image decodes, so swapping
 * between portrait and landscape files does not shift the sidebar (and the
 * results column with it). `contain` letterboxes rather than crops, so the
 * whole image stays visible whatever its aspect ratio.
 */
.dropzone-preview {
    position: relative;
    margin-bottom: .9rem;
    border-radius: var(--radius-sm);
    overflow: hidden;
    cursor: pointer;
    background: var(--surface-2);
    border: 1px solid var(--border);
    aspect-ratio: 1 / 1;
}

.dropzone-preview img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    background: var(--surface-2);
}

.dropzone-preview-overlay {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    background: rgba(10, 12, 20, .6);
    color: #fff;
    font-size: .85rem;
    font-weight: 550;
    opacity: 0;
    transition: opacity .15s;
}

.dropzone-preview:hover .dropzone-preview-overlay,
.dropzone-preview:focus-visible .dropzone-preview-overlay {
    opacity: 1;
}

.dropzone-actions {
    display: flex;
    gap: .6rem;
    justify-content: center;
    flex-wrap: wrap;
}

.btn-block {
    width: 100%;
}

#file-input {
    display: none;
}

/* Full-window drop target overlay */

.drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 100;
    display: grid;
    place-items: center;
    background: color-mix(in srgb, var(--accent) 12%, rgba(10, 12, 20, .72));
    backdrop-filter: blur(3px);
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.drop-overlay.visible {
    opacity: 1;
}

.drop-overlay-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: .5rem;
    padding: 2.5rem 3.5rem;
    border: 2px dashed rgba(255, 255, 255, .75);
    border-radius: var(--radius);
    background: rgba(0, 0, 0, .35);
    color: #fff;
    text-align: center;
    font-size: 1.15rem;
}

.drop-overlay-icon {
    font-size: 2.4rem;
    line-height: 1;
}

.drop-overlay-sub {
    font-size: .85rem;
    opacity: .8;
    letter-spacing: .04em;
}

.status {
    margin: 1rem 0 0;
    text-align: center;
    font-size: .9rem;
    font-weight: 500;
}

.status-ok {
    color: var(--ok);
}

.status-warn {
    color: var(--warn);
}

.status-error {
    color: var(--error);
}

.status-busy {
    color: var(--text-muted);
}

/* ---------------------------------------------------------- file list */

.file-list-section {
    margin-top: 1.5rem;
}

.section-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: .6rem;
}

.section-head h2 {
    font-size: .95rem;
    margin: 0;
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.file-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    /*
     * minmax(0, 1fr) rather than the implicit `auto`: grid items default to
     * min-width:auto, which sizes them to their longest unbreakable content —
     * a long filename would otherwise stretch each row past the rail.
     */
    grid-template-columns: minmax(0, 1fr);
    gap: .4rem;
    min-width: 0;
}

/*
 * Stacked rather than columnar: in a 320px sidebar a 3-column row crushes the
 * filename to a few characters. Name on its own line, metadata beneath.
 */
.file-item {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    padding: .55rem .7rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: border-color .15s;
}

.file-item-sub {
    display: flex;
    align-items: center;
    gap: .4rem;
    flex-wrap: wrap;
}

.file-item:hover {
    border-color: var(--text-muted);
}

/* Selection reads as a left edge rather than a coloured ring. */
.file-item.active {
    border-color: var(--border);
    background: var(--surface-2);
    box-shadow: inset 3px 0 0 var(--accent-solid);
}

/*
 * min-width:0 is required for the ellipsis to engage — without it a long
 * filename sets the flex item's minimum size and forces the sidebar to scroll
 * horizontally instead of truncating.
 */
.file-item-name {
    font-weight: 500;
    font-size: .88rem;
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.file-item-meta {
    font-size: .78rem;
    color: var(--text-muted);
    white-space: nowrap;
}

/* ---------------------------------------------------------- results */

.results {
    margin-top: 1.75rem;
}

.empty-state {
    display: grid;
    place-items: center;
    min-height: 220px;
    margin: 0;
    padding: 2rem;
    text-align: center;
    border: 1px dashed var(--border);
    border-radius: var(--radius);
    color: var(--text-muted);
    font-size: .95rem;
}

.card-spaced {
    margin-top: 1.5rem;
}

.result-head {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.1rem;
    box-shadow: var(--shadow);
}

.result-head-body {
    min-width: 0;
}

.result-head h3 {
    margin: 0 0 .2rem;
    font-size: 1.05rem;
    overflow-wrap: anywhere;
}

.result-meta {
    color: var(--text-muted);
    font-size: .85rem;
    margin: 0 0 .7rem;
}

.badges {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .8rem;
}

.result-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.notices {
    display: grid;
    gap: .5rem;
    margin-top: 1rem;
}

.notice {
    padding: .7rem .9rem;
    border-radius: var(--radius-sm);
    font-size: .88rem;
    border: 1px solid var(--border);
    background: var(--surface);
}

.notice-warn {
    border-left: 3px solid var(--warn);
}

.notice-error {
    border-left: 3px solid var(--error);
}

.notice-info {
    border-left: 3px solid var(--accent);
}

/* ---------------------------------------------------------- tabs */

.tabs {
    display: flex;
    gap: .25rem;
    margin: 1.5rem 0 0;
    border-bottom: 1px solid var(--border);
    overflow-x: auto;
}

.tab {
    font: inherit;
    font-size: .9rem;
    font-weight: 550;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    color: var(--text-muted);
    padding: .6rem .9rem;
    cursor: pointer;
    white-space: nowrap;
}

.tab:hover {
    color: var(--text);
}

.tab.active {
    color: var(--accent);
    border-bottom-color: var(--accent);
}

.panel {
    padding-top: 1.25rem;
}

/* ---------------------------------------------------------- cards */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.15rem;
    margin-bottom: 1rem;
    box-shadow: var(--shadow);
}

.card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .6rem;
}

.card h3 {
    margin: 0;
    font-size: .82rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--text-muted);
}

.prompt-body {
    background: var(--prompt-bg);
    border-left: 3px solid var(--prompt-border);
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .95rem;
}

.neg-body {
    background: var(--neg-bg);
    border-left: 3px solid var(--neg-border);
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .95rem;
}

.params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: .6rem;
    margin: 0;
}

.param {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-left: 3px solid var(--param-border);
    border-radius: var(--radius-sm);
    padding: .5rem .7rem;
    min-width: 0;
}

.param dt {
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
    font-weight: 600;
}

.param dd {
    margin: .15rem 0 0;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .85rem;
    overflow-wrap: anywhere;
}

/* ---------------------------------------------------------- chunks */

.chunk {
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    margin-bottom: .75rem;
    overflow: hidden;
}

.chunk-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .8rem;
    background: var(--surface-2);
    border-bottom: 1px solid var(--border);
}

.chunk-head h4 {
    margin: 0;
    font-size: .88rem;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.chunk-meta {
    font-size: .75rem;
    color: var(--text-muted);
    margin-right: auto;
}

.chunk-body {
    margin: 0;
    padding: .8rem;
    max-height: 340px;
    overflow: auto;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .82rem;
}

/* ---------------------------------------------------------- code views */

.code-view {
    background: var(--code-bg);
    color: var(--code-text);
    border-radius: var(--radius-sm);
    padding: .9rem;
    margin: 0;
    max-height: 620px;
    overflow: auto;
    font-size: .78rem;
    line-height: 1.5;
    white-space: pre;
}

.code-view.wrap-text {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.panel-note {
    color: var(--text-muted);
    font-size: .83rem;
    margin: 0 0 .6rem;
}

.deep-scan-result {
    margin-top: .8rem;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .8rem;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
    font-size: .82rem;
    max-height: 420px;
    overflow: auto;
}

.muted {
    color: var(--text-muted);
}

/* ---------------------------------------------------------- content */

/*
 * The reference content sits below the app but stays aligned with the main
 * column, so it never runs under the sidebar rail. Prose keeps a readable
 * measure even though the shell is full-bleed.
 */
.content {
    margin-top: 3rem;
    margin-left: calc(300px + 1.75rem);
    max-width: 88ch;
    padding-right: 1.5rem;
}

@media (max-width: 900px) {
    .content {
        margin-left: 0;
        padding-right: 1rem;
    }
}

/* Collapsed reference content: still in the DOM, just out of the way. */
.content.collapsed {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.content-toggle {
    text-align: center;
    margin-bottom: 1rem;
}

.content-toggle-btn,
#content-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
}

.content-toggle-caret {
    transition: transform .2s;
    font-size: .8em;
}

#content-toggle-btn[aria-expanded="true"] .content-toggle-caret {
    transform: rotate(180deg);
}

.content section {
    margin-bottom: 2.5rem;
}

.content h2 {
    font-size: 1.35rem;
    letter-spacing: -.01em;
    margin: 0 0 .75rem;
}

.content h3 {
    font-size: 1rem;
    margin: 1.25rem 0 .4rem;
}

.content p,
.content li {
    color: var(--text-muted);
}

.format-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
}

table {
    border-collapse: collapse;
    width: 100%;
    min-width: 620px;
    font-size: .88rem;
}

th,
td {
    text-align: left;
    padding: .6rem .8rem;
    border-bottom: 1px solid var(--border);
    vertical-align: top;
}

th {
    background: var(--surface-2);
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}

tbody tr:last-child td {
    border-bottom: none;
}

details {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .75rem 1rem;
    margin-bottom: .6rem;
}

summary {
    cursor: pointer;
    font-weight: 550;
    color: var(--text);
}

details p {
    margin: .6rem 0 0;
}

.privacy-note {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 3px solid var(--ok);
    border-radius: var(--radius-sm);
    padding: .9rem 1.1rem;
    font-size: .9rem;
}

footer {
    margin-top: 3rem;
    margin-left: calc(300px + 1.75rem);
    padding: 1.5rem 1.5rem 0 0;
    border-top: 1px solid var(--border-soft);
    color: var(--text-muted);
    font-size: .85rem;
}

@media (max-width: 900px) {
    footer {
        margin-left: 0;
        text-align: left;
    }
}

/* ---------------------------------------------------------- responsive */

/* Below the two-column threshold the sidebar stacks on top of the results. */
@media (max-width: 900px) {
    .layout {
        grid-template-columns: 1fr;
        gap: 1rem;
        background-image: none;
    }

    .sidebar {
        position: static;
        max-height: none;
        overflow: visible;
        border-right: none;
        border-bottom: 1px solid var(--border-soft);
        padding: 1rem 1.5rem 1rem 0;
    }

    .dropzone-preview img {
        max-height: 200px;
    }

    body {
        padding-left: 1rem;
    }

    .hero {
        padding-right: 1rem;
    }
}

@media (max-width: 640px) {
    .file-item {
        grid-template-columns: 1fr auto;
    }

    .file-item-meta {
        grid-column: 1 / -1;
    }

    .hero p {
        font-size: .98rem;
    }

    .result-actions .btn {
        flex: 1 1 auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ------------------------------------------------------- forensics tab */
.forensic-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}

.forensic-table {
    min-width: 560px;
    font-size: .84rem;
}

.forensic-table code {
    font-size: .82rem;
    white-space: nowrap;
}

.forensic-num,
.forensic-type {
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
    white-space: nowrap;
}

/* A critical PNG chunk the decoder does not recognise is worth flagging: it is
   unusual and can indicate a hand-edited or tampered file. */
.forensic-unknown {
    color: var(--warn, #d98a1a);
    font-weight: 600;
}

.forensic-warn {
    display: block;
    color: var(--warn, #d98a1a);
    font-size: .8rem;
    margin-top: .2rem;
}