:root {
    --clr-bg: #050629;
    --clr-surface: #ffe7fa;
    --clr-surface-border: burlywood;
    --clr-fieldset: chocolate;
    --clr-primary: #018354;
    --clr-primary-dark: #016043;
    --clr-primary-border: #015837;
    --clr-text: #d6d7de;
    --clr-heading: indigo;
    --clr-hint: #5a005a;
    --clr-footer: #0f133e;
    --radius: 0.6rem;
    --shadow: 0 1.25rem 2rem rgba(0, 0, 0, 0.36);
    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background:
        radial-gradient(circle at top, rgba(44, 63, 152, 0.55), transparent 42%),
        linear-gradient(180deg, #070830 0%, var(--clr-bg) 100%);
    color: var(--clr-text);
    font-family: var(--font-sans);
}

.page-shell {
    flex: 1;
    display: grid;
    place-items: start center;
    padding: clamp(1rem, 3vw, 2rem) 1rem 1.25rem;
}

.form-card {
    width: min(100%, 34rem);
    margin-top: clamp(0.4rem, 1.5vw, 1.25rem);
    padding: clamp(0.6rem, 1vw, 0.95rem);
    display: grid;
    gap: 0.7rem;
    background: var(--clr-surface);
    border: 2px solid var(--clr-surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

fieldset {
    margin: 0;
    padding: 0.45rem 0.9rem 0.75rem;
    display: grid;
    gap: 0.15rem;
    border: 2px solid var(--clr-fieldset);
    border-radius: var(--radius);
}

legend {
    margin: 0 auto;
    padding: 0 0.45rem;
    color: var(--clr-heading);
    font-size: 1rem;
    font-weight: 700;
}

.legend-info {
    color: #c00000;
    font-size: 1.08rem;
}

label {
    margin: 0.15rem 0 0 0.2rem;
    color: var(--clr-heading);
    font-size: 1.02rem;
    font-weight: 700;
}

.hint {
    margin: 0.2rem 0 0.35rem;
    color: var(--clr-hint);
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.45;
    text-align: center;
}

.hint code {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.9em;
}

.checkbox-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    margin: 0.5rem 0 0.15rem;
    color: var(--clr-heading);
    font-size: 1rem;
    font-weight: 700;
    text-align: center;
    cursor: pointer;
}

.checkbox-row input[type="checkbox"] {
    width: 1.1rem;
    height: 1.1rem;
    margin: 0;
    flex: 0 0 auto;
    accent-color: var(--clr-primary);
    cursor: pointer;
}

input[type="file"],
input[type="text"] {
    width: 100%;
    border: 1px solid #222;
    border-radius: var(--radius);
    background: #16222f;
    color: #ffd99b;
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
}

input[type="file"] {
    padding: 0.75rem 0.95rem;
    margin-bottom: 0.45rem;
}

input[type="text"] {
    padding: 0.82rem 0.92rem;
    margin-bottom: 0.45rem;
}

input[type="file"]::file-selector-button {
    margin-right: 0.9rem;
    padding: 0.38rem 0.9rem;
    border: 0;
    border-radius: var(--radius);
    background: #444;
    color: #fff2ff;
    cursor: pointer;
    transition: background 0.2s ease;
}

input[type="file"]::file-selector-button:hover {
    background: #666;
}

input:focus-visible,
.btn:focus-visible {
    outline: 2px solid #7fd8ff;
    outline-offset: 2px;
}

.actions {
    display: flex;
    justify-content: center;
    margin-top: -1.55rem;
    margin-bottom: 0.05rem;
}

.btn {
    min-width: 8.6rem;
    padding: 0.68rem 1rem;
    border: 2px solid var(--clr-primary-border);
    border-radius: var(--radius);
    background: var(--clr-primary);
    color: #fff;
    font-family: inherit;
    font-size: 1.03rem;
    font-weight: 700;
    cursor: pointer;
    transition: background 0.2s ease;
}

.btn:hover {
    background: var(--clr-primary-dark);
}

.btn:disabled {
    background: #666;
    color: darkgray;
    border-color: darkslategray;
    cursor: not-allowed;
}

.info p {
    margin: 0.18rem 0;
    color: #5a005a;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.45;
}

.info a {
    color: mediumblue;
}

.error-hint {
    min-height: 0.85rem;
    color: #d40000;
}

/* ---- Full-page processing view (streamed jpws output) ---- */
/* A display rule on the overlay would otherwise override the `hidden`
   attribute (which is only display:none at UA priority), so keep it hidden. */
.progress-overlay[hidden] {
    display: none;
}

.progress-overlay {
    position: fixed;
    inset: 0;
    z-index: 50;
    display: grid;
    /* Align the box to the same vertical start as the form (.page-shell). */
    place-items: start center;
    padding: clamp(1rem, 3vw, 2rem) 1rem 1.25rem;
    overflow: auto;
    background:
        radial-gradient(circle at top, rgba(44, 63, 152, 0.55), transparent 42%),
        linear-gradient(180deg, #070830 0%, var(--clr-bg) 100%);
}

.progress-box {
    width: min(100%, 62rem);
    margin-top: clamp(0.4rem, 1.5vw, 1.25rem);
    padding: clamp(0.9rem, 1.8vw, 1.4rem);
    display: grid;
    gap: 0.75rem;
    background: var(--clr-surface);
    border: 2px solid var(--clr-surface-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    text-align: center;
}

.progress-title {
    margin: 0;
    color: var(--clr-heading);
    font-size: clamp(1.2rem, 3vw, 1.5rem);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.progress-title--error {
    color: #c00000;
}

.progress-status {
    margin: 0;
    min-height: 1.2em;
    color: var(--clr-primary);
    font-size: 1.08rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.progress-status:empty {
    display: none;
}

.progress-log {
    margin: 0;
    max-height: 15rem;
    overflow: auto;
    padding: 0.8rem 0.95rem;
    background: #0c1526;
    color: #9fe0bb;
    border: 1px solid #013;
    border-radius: var(--radius);
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
    font-size: 0.95rem;
    line-height: 1.5;
    text-align: left;
    /* Keep each tool line on one row; the box is wide enough for the longest
       message, and narrow viewports scroll horizontally rather than wrap. */
    white-space: pre;
    overflow-x: auto;
}

.result-area {
    display: grid;
    gap: 0.6rem;
    justify-items: center;
}

.result-caption {
    margin: 0;
    color: var(--clr-heading);
    font-size: 1.15rem;
    font-weight: 700;
}

.result-caption-name {
    color: chocolate;
    font-style: italic;
    word-break: break-all;
}

.result-hint {
    margin: 0;
    color: var(--clr-hint);
    font-size: 1.1rem;
    font-weight: 700;
}

.result-image-link {
    display: inline-block;
    padding: 6px;
    border: 2px solid var(--clr-surface-border);
    border-radius: var(--radius);
    background: #16222f;
    transition: border-color 0.18s ease, transform 0.18s ease;
}

.result-image-link:hover {
    border-color: var(--clr-primary);
    transform: translateY(-2px);
}

.result-preview {
    display: block;
    width: min(18rem, 70vw);
    max-width: 100%;
    height: auto;
    border-radius: 0.3rem;
}

.result-error {
    margin: 0;
    color: #d40000;
    font-size: 1rem;
    font-weight: 700;
}

.result-again {
    color: mediumblue;
    font-size: 1rem;
    font-weight: 700;
    text-decoration: underline;
}

.ftr-ln {
    width: 100%;
    height: 1px;
    margin: 0;
    background-color: purple;
}

footer {
    width: 100%;
    margin-top: auto;
    background: linear-gradient(to left, #162226 0%, var(--clr-footer) 100%);
}

.ftr-content {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.72rem 0;
}

footer a {
    color: lightsteelblue;
    font-size: clamp(0.9rem, 1.7vw, 1rem);
    font-weight: 700;
    text-decoration: none;
}

footer a:hover {
    color: mistyrose;
}

@media (max-width: 640px) {
    .page-shell {
        padding-inline: 0.7rem;
    }

    .form-card {
        width: min(100%, 30rem);
        padding: 0.58rem 0.72rem;
        gap: 0.55rem;
    }

    fieldset {
        padding: 0.35rem 0.72rem 0.62rem;
    }

    label {
        font-size: 0.9rem;
    }

    .hint,
    .info p {
        font-size: 0.84rem;
    }

    input[type="file"],
    input[type="text"] {
        font-size: 0.86rem;
    }

    .btn {
        min-width: 7rem;
        font-size: 0.92rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
}