:root {
    color-scheme: light dark;
    --navy: #0F2A3F; --blue: #0071CE;
    --page: #F4F6F8; --surface: #FFFFFF; --ink: #1D2733; --muted: #5E6B7A; --rule: #DCE1E7;
    --drop: #EEF4FC; --drop-edge: #9CBFE6; --bad: #B42318; --bad-bg: #FEF3F2;
}
@media (prefers-color-scheme: dark) {
    :root {
        --page: #16191D; --surface: #1F2328; --ink: #E6EAF0; --muted: #9DA8B5; --rule: #363D46;
        --drop: #162A44; --drop-edge: #3C679A; --bad: #F97066; --bad-bg: #3B1F1D;
    }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--page); color: var(--ink); font: 15px/1.5 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, sans-serif; }

.band { background: var(--navy); display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 24px; }
.band img { height: 36px; max-width: 60vw; }
.band-title { color: #fff; font-weight: 600; text-align: right; }
.band-title span { display: block; color: #C9D6E2; font-weight: 400; font-size: 13px; }

main { max-width: 1180px; margin: 0 auto; padding: 24px 16px 32px; }

.drop { position: relative; border: 2px dashed var(--drop-edge); background: var(--drop); border-radius: 8px; padding: 28px 20px; text-align: center; transition: border-color .15s, background .15s; }
.drop.over { border-color: var(--blue); border-style: solid; }
.drop.busy { opacity: .7; }
.drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.drop-text { pointer-events: none; display: grid; gap: 4px; }
.drop-text strong { font-size: 18px; }
.drop-text span { color: var(--muted); }
.drop-text .private { font-size: 13px; }

.chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0 0; }
.chip { display: inline-flex; align-items: center; gap: 6px; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; padding: 3px 4px 3px 12px; max-width: 100%; overflow-wrap: anywhere; }
.chip em { font-style: normal; color: var(--muted); font-size: 13px; }
.chip button { border: 0; background: transparent; color: var(--muted); font-size: 18px; line-height: 1; cursor: pointer; padding: 0 6px; border-radius: 10px; }
.chip button:hover { color: var(--ink); background: var(--rule); }
.hint { color: var(--muted); font-size: 13px; }

.error { background: var(--bad-bg); color: var(--bad); border-left: 5px solid var(--bad); padding: 10px 14px; border-radius: 4px; margin: 14px 0 0; }

.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 20px 0 10px; }
.actions button { font: inherit; font-size: 14px; color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 5px; padding: 6px 12px; cursor: pointer; }
.actions button:hover { border-color: var(--blue); }
.tabs { margin-left: auto; display: inline-flex; gap: 2px; }
.tabs button { border-radius: 5px 5px 0 0; border-bottom: 2px solid transparent; }
.tabs button.on { border-bottom-color: var(--blue); font-weight: 600; }

iframe.report { display: block; width: 100%; min-height: 600px; border: 1px solid var(--rule); border-radius: 6px; background: var(--page); }
.text-report { background: var(--surface); border: 1px solid var(--rule); border-radius: 6px; padding: 14px; overflow-x: auto; font: 13px/1.45 Consolas, "Cascadia Mono", monospace; margin: 0; }

footer { max-width: 1180px; margin: 0 auto; padding: 0 16px 28px; color: var(--muted); font-size: 13px; }

.boot { display: grid; place-items: center; gap: 12px; padding: 18vh 16px; color: var(--muted); }
.boot img { height: 40px; background: var(--navy); padding: 8px 12px; border-radius: 6px; }

#blazor-error-ui { display: none; position: fixed; bottom: 0; left: 0; right: 0; background: #FFF8E6; color: #1D2733; padding: 10px 20px; box-shadow: 0 -1px 4px rgba(0,0,0,.2); z-index: 10; }
#blazor-error-ui .dismiss { cursor: pointer; float: right; }
.band-right { display: flex; align-items: center; gap: 16px; }
.help-button { font: inherit; font-size: 14px; color: #fff; background: transparent; border: 1px solid #5D7C96; border-radius: 5px; padding: 5px 14px; cursor: pointer; }
.help-button:hover { border-color: #fff; }
.help-link { margin: 8px 0 0; color: var(--muted); font-size: 13px; text-align: right; }
.linklike { font: inherit; color: var(--blue); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
@media (prefers-color-scheme: dark) { .linklike { color: #6CA6F0; } }

dialog.help { width: min(860px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 1px solid var(--rule); border-radius: 8px; background: var(--surface); color: var(--ink); box-shadow: 0 12px 40px rgba(0,0,0,.35); }
dialog.help[open] { display: flex; flex-direction: column; }
dialog.help::backdrop { background: rgba(15, 42, 63, .55); }
.help-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--rule); margin: 0; }
.help-head h2 { margin: 0; font-size: 19px; }
.help-close { font-size: 24px; line-height: 1; border: 0; background: none; color: var(--muted); cursor: pointer; padding: 2px 8px; border-radius: 5px; }
.help-close:hover { color: var(--ink); background: var(--rule); }
.help-body { overflow-y: auto; padding: 6px 20px 20px; font-size: 14.5px; }
.help-body h3 { font-size: 16px; margin: 20px 0 6px; padding-bottom: 3px; border-bottom: 2px solid var(--blue); }
.help-body p { margin: 8px 0; }
.help-body ul { margin: 6px 0; padding-left: 20px; } .help-body li { margin: 4px 0; }
.help-body table { border-collapse: collapse; width: 100%; margin: 6px 0; font-size: 14px; }
.help-body th, .help-body td { text-align: left; vertical-align: top; padding: 6px 8px; border-bottom: 1px solid var(--rule); }
.help-body th { color: var(--muted); font-weight: 600; }
.help-body table.labels td:first-child { width: 1%; white-space: nowrap; }
.help-body code { font-family: Consolas, "Cascadia Mono", monospace; font-size: 13px; background: var(--page); padding: 0 3px; border-radius: 3px; }
.help-body .note { background: var(--drop); border-left: 4px solid var(--blue); padding: 8px 12px; border-radius: 3px; }
.help-body .pdf { margin-top: 18px; color: var(--muted); }
.help-body .pdf a { color: var(--blue); font-weight: 600; }
.tag { display: inline-block; font-size: 12.5px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.t-err { background: #FEF3F2; color: #B42318; } .t-warn { background: #FFF8E6; color: #A15C07; }
.t-chk { background: #F2F4F7; color: #475467; } .t-info { background: #EEF4FC; color: #1E5AA8; }
@media (prefers-color-scheme: dark) {
    .t-err { background: #3B1F1D; color: #F97066; } .t-warn { background: #35290F; color: #F5B03D; }
    .t-chk { background: #262B31; color: #98A2B3; } .t-info { background: #162A44; color: #6CA6F0; }
    .help-body .pdf a { color: #6CA6F0; }
}

@media (max-width: 640px) { .tabs { margin-left: 0; } .band { padding: 12px 16px; } .band-title { display: none; } }