* {
    box-sizing: border-box;
}

html,
body,
#app {
    margin: 0;
    min-height: 100%;
    font-family: Inter, "Segoe UI", Roboto, Arial, sans-serif;
    background: #eef2f6;
    color: #182433;
    font-size: 14px;
    line-height: 1.45;
}

body {
    overflow-x: hidden;
}

html:has(.viewer-workbench),
body:has(.viewer-workbench),
#app:has(.viewer-workbench) {
    overflow: hidden;
}

.app-shell:has(.viewer-workbench) {
    min-height: 100dvh;
    padding: 0;
}

button,
input {
    font: inherit;
}

button {
    min-height: 36px;
    border: 1px solid #1b4f7d;
    border-radius: 4px;
    background: #1f5d8f;
    color: #fff;
    padding: 0 13px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 650;
    transition: background-color 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}

button.secondary {
    border-color: #b9c5d1;
    background: #fff;
    color: #26384b;
}

button.danger {
    background: #9d2f2f;
}

button.warning,
.icon-button.warning {
    background: #b45309;
}

button:disabled {
    border-color: #cbd3dc;
    background: #dfe4ea;
    color: #748190;
    cursor: not-allowed;
}

button:not(:disabled):hover {
    border-color: #17466f;
    background: #174f7b;
}

button.secondary:not(:disabled):hover {
    border-color: #8fa1b3;
    background: #f3f6f9;
}

button.danger:not(:disabled):hover {
    border-color: #7f1d1d;
    background: #842727;
}

button.warning:not(:disabled):hover,
.icon-button.warning:not(:disabled):hover {
    border-color: #92400e;
    background: #9a4707;
}

button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid #2f80bd;
    outline-offset: 2px;
}

a {
    color: #205493;
    font-weight: 700;
}

h1,
h2,
p {
    margin-top: 0;
}

h1 {
    margin-bottom: 4px;
    font-size: 28px;
}

h2 {
    margin-bottom: 16px;
    font-size: 18px;
}

h3 {
    margin: 0 0 12px;
    font-size: 16px;
}

.app-shell {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 16px;
}

.login-page {
    position: relative;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    padding: 28px;
    background: #07111f;
}

.login-shell {
    width: min(1120px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(360px, 420px);
    gap: 32px;
    align-items: center;
}

.login-brand-panel {
    min-height: min(680px, calc(100dvh - 64px));
    display: grid;
    grid-template-rows: auto auto minmax(220px, 1fr) auto;
    gap: 22px;
    overflow: hidden;
    border: 1px solid #20334b;
    border-radius: 5px;
    background: #0a1728;
    color: #f5f9ff;
    padding: 28px;
}

.login-brand-header,
.login-brand-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.bix-wordmark {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    color: #fff;
    text-decoration: none;
}

.bix-wordmark strong {
    font-size: 26px;
    font-weight: 900;
}

.bix-wordmark span,
.login-secure-state,
.login-brand-footer {
    color: #91a8c0;
    font-size: 12px;
    font-weight: 700;
}

.login-secure-state {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.login-secure-state i {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #55c39a;
    box-shadow: 0 0 0 4px rgb(85 195 154 / 12%);
}

.login-copy {
    max-width: 600px;
}

.login-product-label {
    display: block;
    margin-bottom: 10px;
    color: #55c6e8;
    font-size: 13px;
    font-weight: 800;
    text-transform: uppercase;
}

.login-copy h1 {
    margin-bottom: 14px;
    color: #fff;
    font-size: 38px;
    font-weight: 800;
    line-height: 1.12;
}

.login-copy p {
    margin-bottom: 8px;
    color: #c6d4e3;
    font-size: 16px;
    line-height: 1.5;
}

.login-copy span,
.login-eyebrow {
    color: #91a8c0;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.login-product-visual {
    position: relative;
    min-height: 0;
    margin: 0;
    overflow: hidden;
    border: 1px solid #20334b;
    border-radius: 4px;
    background: #030914;
}

.login-product-visual img {
    display: block;
    width: 100%;
    height: 100%;
    min-height: 220px;
    object-fit: cover;
    aspect-ratio: 16 / 9;
}

.login-brand-footer {
    padding-top: 2px;
}

.login-brand-footer a {
    color: #a7c7e8;
    font-size: 12px;
    text-decoration: none;
}

.login-card {
    display: grid;
    gap: 16px;
    width: 100%;
    border: 1px solid #263a52;
    border-radius: 5px;
    background: #0c1827;
    color: #f5f9ff;
    box-shadow: 0 18px 48px rgb(0 0 0 / 24%);
    padding: 28px;
}

.login-card-header h2 {
    margin: 6px 0 8px;
    color: #fff;
    font-size: 22px;
}

.login-card-header p {
    margin: 0;
    color: #9fb2c7;
    font-size: 13px;
    line-height: 1.5;
}

.login-field,
.signup-form {
    display: grid;
    gap: 7px;
}

.login-field label,
.signup-form label {
    color: #c6d4e3;
    font-size: 12px;
    font-weight: 700;
}

.login-field input,
.signup-form input,
.signup-form select,
.signup-form textarea {
    width: 100%;
    min-height: 42px;
    border: 1px solid #31475f;
    border-radius: 4px;
    background: #08111e;
    color: #f5f9ff;
    padding: 0 12px;
}

.signup-form textarea {
    min-height: 76px;
    padding-top: 10px;
    resize: vertical;
}

.login-field input:focus,
.signup-form input:focus,
.signup-form select:focus,
.signup-form textarea:focus {
    border-color: #55a8d9;
    outline: 2px solid rgb(85 168 217 / 20%);
    outline-offset: 1px;
}

.check-row {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 0;
    color: #c6d4e3;
    font-size: 13px;
    font-weight: 700;
}

.check-row input {
    width: 17px;
    height: 17px;
    margin: 0;
}

.login-shared-device-note {
    margin: -10px 0 0 26px;
    color: #7f95aa;
    font-size: 11px;
}

.login-actions {
    justify-content: stretch;
}

.login-actions button {
    flex: 1 1 0;
}

.login-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid #20334b;
    padding-top: 15px;
}

.login-card-footer p {
    margin: 0;
}

.login-card-footer > span {
    color: #70879d;
    font-size: 10px;
    text-transform: uppercase;
}

.topbar {
    display: flex;
    justify-content: space-between;
    gap: 16px;
    align-items: center;
    margin-bottom: 16px;
}

.topbar p,
.job-meta,
.empty,
.label,
.status,
.viewer-placeholder span {
    color: #5c6777;
    font-size: 13px;
}

.actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-items: center;
    justify-content: flex-end;
}

.actions.left {
    justify-content: flex-start;
}

.admin-excel-controls {
    gap: 8px;
    border-bottom: 1px solid #e2e7ec;
    padding-bottom: 12px;
}

.admin-excel-controls input[type=file] {
    width: min(100%, 300px);
    margin-bottom: 0;
    padding: 8px;
}

.tabs {
    display: flex;
    gap: 2px;
    border-bottom: 1px solid #cbd4de;
    margin-bottom: 16px;
}

.tabs button {
    min-width: 86px;
    border-color: transparent;
    border-bottom-color: transparent;
    border-radius: 3px 3px 0 0;
    background: transparent;
    color: #526274;
}

.tabs button.active {
    border-color: #cbd4de;
    border-bottom-color: #fff;
    background: #fff;
    color: #173f63;
}

.workspace {
    display: grid;
    grid-template-columns: minmax(280px, 0.88fr) minmax(480px, 1.55fr);
    gap: 16px;
    align-items: start;
}

.detail-stack {
    display: grid;
    gap: 14px;
}

.panel {
    background: #fff;
    border: 1px solid #d1d9e2;
    border-radius: 5px;
    box-shadow: 0 1px 2px rgb(20 35 50 / 5%);
    padding: 18px 20px;
}

.panel-head,
.job-row {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    align-items: center;
}

.panel-head {
    min-height: 36px;
    border-bottom: 1px solid #e2e7ec;
    margin: -2px 0 14px;
    padding-bottom: 11px;
}

.panel-head h2,
.panel-head h3,
.panel-head h4 {
    color: #172a3d;
    letter-spacing: 0;
}

.panel-head h2 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
}

.panel-head h3 {
    margin: 0;
    font-size: 15px;
}

.result-head-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.icon-button {
    width: 36px;
    min-width: 36px;
    padding: 0;
}

.icon-button.active {
    background: #1f7a53;
}

.trash-button {
    font-size: 17px;
    line-height: 1;
}

.job-list {
    display: grid;
    gap: 4px;
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 680px;
    overflow: auto;
}

.job-list li {
    border: 1px solid #dde3ea;
    border-radius: 3px;
    background: #fff;
    padding: 10px 11px;
    cursor: pointer;
}

.job-list li.active {
    border-color: #6e9bc0;
    border-left: 3px solid #256797;
    background: #f1f6fa;
}

.job-title {
    min-width: 0;
    color: #1c2f42;
    font-weight: 700;
    overflow-wrap: anywhere;
}

.badge {
    display: inline-flex;
    align-items: center;
    min-height: 22px;
    border: 1px solid #d3dbe4;
    border-radius: 3px;
    padding: 0 7px;
    background: #f3f5f8;
    color: #243447;
    font-size: 12px;
    font-size: 11px;
    font-weight: 700;
    white-space: nowrap;
}

.badge.good {
    background: #dbeee5;
    color: #155b36;
}

.badge.bad {
    background: #f4dddd;
    color: #7c2020;
}

label {
    display: block;
    margin-bottom: 8px;
    color: #34485b;
    font-size: 12px;
    font-weight: 650;
}

input[type=file] {
    display: block;
    width: 100%;
    margin-bottom: 12px;
    border: 1px solid #c8ced8;
    border-radius: 4px;
    padding: 8px;
    background: #f8fafc;
}

.status {
    min-height: 20px;
    margin: 12px 0 0;
}

.links {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

.links button {
    border: 1px solid #b9c6d8;
    border-radius: 6px;
    background: #f7faff;
    color: #17324d;
    cursor: pointer;
    font: inherit;
    padding: 8px 10px;
}

.links button:hover {
    background: #edf5ff;
}

.result-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(120px, 1fr));
    gap: 8px;
    margin-bottom: 14px;
}

.result-grid > div {
    border: 1px solid #dde3ea;
    border-radius: 3px;
    padding: 9px 10px;
    background: #f8fafc;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ops-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(130px, 1fr));
    gap: 8px;
}

.ops-summary-grid > div,
.upload-preflight {
    border: 1px solid #d7dfe7;
    border-radius: 4px;
    background: #f8fafc;
    padding: 11px;
    min-width: 0;
}

.ops-summary-grid strong {
    display: block;
    color: #0f172a;
    font-size: 18px;
    line-height: 1.2;
}

.ops-summary-grid span {
    display: block;
    margin-top: 3px;
    color: #526173;
    font-size: 12px;
}

.ops-status-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.ops-status-item {
    display: grid;
    grid-template-columns: 150px minmax(0, 1fr);
    gap: 4px 12px;
    border: 1px solid #d8dde6;
    border-left-width: 4px;
    border-radius: 3px;
    background: #fff;
    padding: 10px;
}

.ops-status-item strong {
    color: #0f172a;
}

.ops-status-item span,
.ops-status-item small {
    color: #475569;
}

.ops-status-item small {
    grid-column: 2;
}

.ops-status-item.warning,
.ops-status-item.attention,
.ops-status-item.busy {
    border-left-color: #d97706;
}

.ops-status-item.blocker,
.ops-status-item.error {
    border-left-color: #dc2626;
}

.ops-status-item.info,
.ops-status-item.ok,
.ops-status-item.idle {
    border-left-color: #0f766e;
}

.ops-log-panel {
    display: grid;
    gap: 8px;
    margin-top: 12px;
    border: 1px solid #d7e1ec;
    border-radius: 4px;
    background: #f8fafc;
    padding: 12px;
}

.panel-head.compact h4 {
    margin: 0;
    color: #0f172a;
    font-size: 14px;
}

.ops-log-panel pre {
    max-height: 260px;
    margin: 0;
    overflow: auto;
    border: 1px solid #d8dde6;
    border-radius: 6px;
    background: #111827;
    color: #dbeafe;
    padding: 10px;
    font-size: 11px;
    line-height: 1.45;
    white-space: pre-wrap;
}

.upload-preflight {
    display: grid;
    gap: 6px;
    margin: 12px 0;
}

.upload-preflight > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.upload-preflight strong {
    color: #0f172a;
}

.upload-preflight span {
    font-weight: 800;
}

.upload-preflight p {
    margin: 0;
    color: #475569;
    font-size: 12px;
}

.upload-preflight.ok {
    border-left: 4px solid #0f766e;
}

.upload-preflight.warn {
    border-left: 4px solid #d97706;
}

.upload-preflight.error {
    border-left: 4px solid #dc2626;
}

.job-detail {
    margin: 12px 0;
    border: 1px solid #d6a31e;
    border-radius: 4px;
    background: #fff8e1;
    color: #3d2b00;
    padding: 12px;
}

.job-detail.error {
    border-color: #dc2626;
    background: #fff1f2;
    color: #4c0519;
}

.job-detail strong {
    display: block;
    margin-bottom: 8px;
}

.job-detail pre {
    min-height: 0;
    max-height: 240px;
    margin: 0;
    border: 1px solid rgb(0 0 0 / 10%);
    background: rgb(255 255 255 / 72%);
    color: inherit;
    padding: 10px;
    font-size: 12px;
}

.admin-confirm {
    display: grid;
    gap: 10px;
    margin: 14px 0;
    border: 1px solid #f0b4b4;
    border-radius: 4px;
    background: #fff7f7;
    padding: 12px;
}

.account-panel {
    display: grid;
    gap: 12px;
    margin-bottom: 14px;
    border: 0;
    border-top: 1px solid #dce3ea;
    border-radius: 0;
    background: transparent;
    padding: 16px 0 0;
}

.panel.account-panel {
    border: 1px solid #d1d9e2;
    border-radius: 5px;
    background: #fff;
    padding: 18px 20px;
}

.account-form {
    display: grid;
    grid-template-columns: minmax(150px, 200px) minmax(280px, 560px);
    gap: 9px 18px;
    align-items: center;
    justify-content: start;
}

.account-form label {
    margin-bottom: 0;
}

.account-form input {
    width: 100%;
    min-height: 40px;
    border: 1px solid #c8ced8;
    border-radius: 4px;
    background: #fff;
    color: #111827;
    padding: 0 10px;
}

.account-form select,
.account-form textarea,
.signup-form input,
.signup-form select,
.signup-form textarea {
    width: 100%;
    min-height: 40px;
    border: 1px solid #c8ced8;
    border-radius: 4px;
    background: #fff;
    color: #111827;
    padding: 0 10px;
}

.account-form textarea,
.signup-form textarea {
    min-height: 74px;
    padding: 10px;
    resize: vertical;
}

.account-form input:focus,
.account-form select:focus,
.account-form textarea:focus {
    border-color: #4c83ae;
    box-shadow: 0 0 0 2px rgb(47 128 189 / 10%);
}

.signup-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 12px;
    margin-top: 12px;
    border-top: 1px solid rgb(255 255 255 / 10%);
    padding-top: 12px;
}

.signup-form label {
    margin-bottom: -4px;
    color: #aeb8c6;
    font-size: 12px;
    font-weight: 700;
}

.signup-form textarea,
.signup-form .actions {
    grid-column: 1 / -1;
}

.signup-group-empty {
    grid-column: 1 / -1;
    margin: 0;
    color: #f0b56a;
    font-size: 12px;
}

.admin-list {
    display: grid;
    gap: 3px;
    max-height: 320px;
    margin: 0;
    overflow: auto;
    padding: 0;
    list-style: none;
}

.admin-list li {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 8px;
    align-items: stretch;
    border: 1px solid #d8dde6;
    border-radius: 3px;
    background: #fff;
    padding: 5px 6px;
}

.admin-list li.active {
    border-color: #6e9bc0;
    border-left: 3px solid #256797;
    background: #f1f6fa;
    box-shadow: none;
}

.admin-list li > button:first-child {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 3px 12px;
    border: 0;
    background: transparent;
    color: #111827;
    min-height: 34px;
    padding: 4px 6px;
    text-align: left;
}

.admin-list strong,
.admin-list small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-list span {
    color: #475569;
    font-size: 12px;
    font-weight: 650;
}

.admin-list small {
    grid-column: 1 / -1;
    color: #64748b;
}

.check-row.compact {
    align-self: end;
    min-height: 40px;
}

.account-form > .check-row.compact {
    grid-column: 1 / -1;
}

.admin-confirm label {
    display: flex;
    gap: 9px;
    align-items: center;
    margin: 0;
    color: #5f1717;
}

.admin-confirm input {
    width: 17px;
    height: 17px;
    margin: 0;
}

.message-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: grid;
    place-items: center;
    background: rgb(3 7 18 / 58%);
    padding: 18px;
}

.message-box {
    width: min(620px, 100%);
    border: 1px solid #ef4444;
    border-radius: 5px;
    background: #fff;
    color: #111827;
    box-shadow: 0 24px 80px rgb(0 0 0 / 40%);
    padding: 14px;
}

.message-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
}

.message-head strong {
    font-size: 16px;
}

.message-text {
    max-height: min(56vh, 420px);
    margin: 0 0 12px;
    overflow: auto;
    color: #1f2937;
    white-space: pre-line;
    line-height: 1.5;
}

.confirm-box {
    border-color: #d97706;
}

.confirm-target {
    margin: 0 0 12px;
    border-color: #fed7aa;
    background: #fff7ed;
    color: #431407;
    padding: 10px 12px;
    font-weight: 700;
}

.progress-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1090;
    display: grid;
    place-items: center;
    background: rgb(3 7 18 / 42%);
    padding: 18px;
}

.progress-box {
    width: min(780px, 100%);
    max-height: min(82vh, 760px);
    overflow: auto;
    border: 1px solid #94a3b8;
    border-radius: 5px;
    background: #fff;
    color: #111827;
    box-shadow: 0 24px 80px rgb(0 0 0 / 32%);
    padding: 16px;
}

.progress-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 3px;
    background: #e5e7eb;
    margin-bottom: 14px;
}

.progress-meter > div {
    height: 100%;
    background: #1f7a53;
    transition: width 0.2s ease;
}

.progress-meter.indeterminate > div {
    width: 36% !important;
    background: #2877a8;
    animation: progress-scan 1.35s ease-in-out infinite;
}

.progress-live {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 4px 12px;
    margin-bottom: 14px;
    border: 1px solid #9bbfe6;
    border-radius: 4px;
    background: #f1f7fb;
    color: #14314f;
    padding: 10px;
}

.upload-live {
    display: grid;
    gap: 8px;
    margin-bottom: 14px;
    border: 1px solid #9dd6c4;
    border-radius: 4px;
    background: #f1f8f5;
    color: #123d30;
    padding: 10px;
}

.upload-live > div:first-child {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.upload-live strong,
.upload-live span {
    font-size: 13px;
}

.upload-live span {
    font-weight: 900;
}

.upload-live p {
    margin: 0;
    color: #315c4e;
    font-size: 12px;
}

.upload-byte-meter {
    height: 8px;
    overflow: hidden;
    border-radius: 3px;
    background: #d1fae5;
}

.upload-byte-meter span {
    display: block;
    height: 100%;
    background: #0f766e;
    transition: width 0.15s ease;
}

.progress-live strong,
.progress-live span {
    font-size: 13px;
}

.progress-live span {
    font-weight: 900;
}

.progress-live p {
    grid-column: 1 / -1;
    margin: 0;
    color: #365574;
    font-size: 12px;
}

@keyframes progress-scan {
    0% {
        transform: translateX(-120%);
    }

    50% {
        transform: translateX(75%);
    }

    100% {
        transform: translateX(260%);
    }
}

.progress-steps {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

.progress-step {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr) auto;
    gap: 10px;
    align-items: start;
    border: 1px solid #d8dde6;
    border-radius: 3px;
    background: #f8fafc;
    padding: 10px;
}

.progress-step.running {
    border-color: #205493;
    background: #eef6ff;
}

.progress-step.done {
    border-color: #88c2a3;
    background: #f1fbf5;
}

.progress-step.failed {
    border-color: #ef4444;
    background: #fff1f2;
}

.step-index,
.step-state {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 24px;
    border-radius: 4px;
    background: #e9eef5;
    color: #243447;
    font-size: 12px;
    font-weight: 800;
}

.step-state {
    padding: 0 7px;
}

.progress-step p {
    margin: 3px 0 0;
    color: #4b5563;
    font-size: 12px;
}

.label {
    margin-bottom: 3px;
    font-weight: 800;
}

pre {
    min-height: 210px;
    max-height: 460px;
    overflow: auto;
    margin: 0;
    border-radius: 6px;
    background: #111827;
    color: #e5e7eb;
    padding: 16px;
    white-space: pre-wrap;
}

.viewer-placeholder {
    display: grid;
    place-items: center;
    min-height: 170px;
    border: 1px dashed #a9b4c0;
    border-radius: 7px;
    background: #f7f9fb;
    text-align: center;
    font-weight: 800;
}

.viewer-placeholder span {
    display: block;
    margin-top: 6px;
    font-weight: 600;
}

.viewer-empty-state {
    align-content: center;
    gap: 22px;
    background: #07111f;
}

.viewer-empty-logo {
    display: block;
    width: min(500px, 72vw);
    height: auto;
    filter: invert(1) hue-rotate(180deg) brightness(1.08);
    mix-blend-mode: screen;
    object-fit: contain;
}

.viewer-empty-state .viewer-empty-copy {
    margin-top: 2px;
    color: #e7edf4;
    font-size: 30px;
    font-weight: 750;
    line-height: 1.25;
}

.viewer-empty-action {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
}

.viewer-empty-upload {
    min-width: 176px;
    min-height: 46px;
    border-radius: 2px;
}

.viewer-panel {
    min-width: 0;
}

.viewer-workbench {
    position: fixed;
    inset: 0;
    z-index: 900;
    display: grid;
    width: 100vw;
    height: 100dvh;
    overflow: hidden;
    background: #07111f;
}

.viewer-workbench .viewer-panel.fullscreen {
    position: absolute;
    inset: 0;
    border: 0;
    border-radius: 0;
    background: #07111f;
    padding: 0;
}

.viewer-workbench.has-rail .viewer-panel.fullscreen {
    inset: 0 0 0 82px;
}

.viewer-loading-shell {
    min-width: 0;
    min-height: 100dvh;
    display: grid;
    place-items: center;
    background: #07111f;
}

.viewer-left-rail {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    z-index: 970;
    width: 82px;
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 0;
    border-right: 1px solid #243448;
    background: #0a1421;
    color: #e7edf4;
    padding: 12px 8px;
    box-shadow: 4px 0 16px rgb(0 0 0 / 18%);
}

.rail-nav {
    display: flex;
    flex-direction: column;
    gap: 5px;
    height: 100%;
    min-height: 0;
}

.rail-nav button {
    display: grid;
    place-items: center;
    gap: 4px;
    min-height: 58px;
    width: 100%;
    border: 1px solid transparent;
    border-radius: 4px;
    background: transparent;
    color: #e7edf4;
    padding: 5px 4px;
}

.rail-nav button span {
    display: grid;
    place-items: center;
    width: 24px;
    height: 24px;
    border-radius: 3px;
    background: #16263a;
    font-size: 14px;
    font-weight: 750;
}

.rail-nav button small {
    max-width: 100%;
    overflow: hidden;
    color: #b9c6d3;
    font-size: 10.5px;
    font-weight: 650;
    line-height: 1.15;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rail-nav button.active {
    border-color: #3b709a;
    background: #12304a;
    box-shadow: inset 3px 0 #5ca7dc;
}

.rail-nav button:hover,
.rail-nav button:focus-visible {
    border-color: #35516e;
    background: #101c2a;
}

.rail-nav button:focus-visible {
    outline: 2px solid #63b3ff;
    outline-offset: -2px;
}

.rail-nav button.settings {
    margin-top: auto;
}

.rail-nav button.logout {
    border-color: transparent;
    background: transparent;
    color: #c9d5e2;
}

.rail-nav button.logout:hover,
.rail-nav button.logout:focus-visible {
    border-color: #684551;
    background: #261820;
}

.study-queue-drawer {
    position: fixed;
    top: 56px;
    bottom: 12px;
    z-index: 950;
    overflow: hidden;
    border: 1px solid #263241;
    border-radius: 8px;
    background: rgb(12 18 26 / 96%);
    box-shadow: 0 18px 60px rgb(0 0 0 / 42%);
    left: 10px;
    width: min(430px, calc(100vw - 20px));
}

.study-queue-drawer .panel {
    height: 100%;
    overflow: auto;
    border: 0;
    border-radius: 8px;
}

.workflow-page {
    position: fixed;
    inset: 0 0 0 82px;
    z-index: 910;
    overflow: auto;
    background: #07111f;
    padding: 36px 28px 28px;
}

.workspace-brand-bar,
.workflow-page .detail-stack {
    width: min(1240px, 100%);
    margin: 0 auto;
}

.workspace-brand-bar {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 18px;
    border-bottom: 1px solid #26384b;
    padding: 0 0 16px;
    color: #e7edf4;
}

.workspace-brand-bar img {
    width: 104px;
    height: auto;
    filter: invert(1) hue-rotate(180deg) brightness(1.08);
    mix-blend-mode: screen;
    object-fit: contain;
}

.workspace-brand-bar div {
    display: grid;
    gap: 1px;
}

.workspace-brand-bar strong {
    font-size: 16px;
    font-weight: 750;
}

.workspace-brand-bar span {
    color: #91a7bc;
    font-size: 12px;
    font-weight: 650;
}

.job-list.compact {
    max-height: min(42vh, 420px);
}

.viewer-workbench .viewer-frame {
    width: 100%;
    height: 100%;
    min-height: 100dvh;
    border: 0;
    border-radius: 0;
}

.viewer-workbench .viewer-compare {
    width: 100vw;
    height: 100dvh;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0;
    background: #07111f;
}

.viewer-workbench .viewer-compare > div {
    min-width: 0;
    height: 100dvh;
}

.viewer-workbench .viewer-frame-title {
    position: absolute;
    z-index: 1;
    margin: 8px;
    border-radius: 4px;
    background: rgb(0 0 0 / 64%);
    color: #e7edf4;
    padding: 4px 7px;
}

.viewer-workbench .viewer-placeholder {
    width: 100vw;
    height: 100dvh;
    border: 0;
    border-radius: 0;
    background: #07111f;
    color: #e7edf4;
}

.viewer-links {
    margin-bottom: 12px;
}

.viewer-frame {
    display: block;
    width: 100%;
    min-height: 760px;
    border: 1px solid #c6d0dc;
    border-radius: 7px;
    background: #0f1720;
}

.viewer-compare {
    display: grid;
    grid-template-columns: repeat(2, minmax(360px, 1fr));
    gap: 12px;
    min-width: 0;
}

.viewer-frame-title {
    margin-bottom: 7px;
    color: #344255;
    font-size: 13px;
    font-weight: 800;
}

.boot {
    display: grid;
    place-items: center;
    gap: 14px;
    min-height: 100vh;
    color: #344255;
    font-weight: 800;
}

.boot-mark {
    width: 44px;
    height: 44px;
    border: 5px solid #c9d5e1;
    border-top-color: #205493;
    border-radius: 999px;
    animation: spin 0.9s linear infinite;
}

#blazor-error-ui {
    display: none;
    position: fixed;
    right: 18px;
    bottom: 18px;
    border-radius: 6px;
    background: #fff4cc;
    color: #1f2f3d;
    padding: 12px 42px 12px 14px;
    box-shadow: 0 8px 24px rgb(0 0 0 / 18%);
}

#blazor-error-ui .dismiss {
    position: absolute;
    right: 12px;
    top: 10px;
    cursor: pointer;
}

/* Rectilinear clinical UI: crisp edges and strong state separation. */
button,
input,
select,
textarea,
.panel,
.panel.account-panel,
.login-brand-panel,
.login-card,
.login-product-visual,
.job-list li,
.admin-list li,
.result-grid > div,
.message-box,
.message-text,
.progress-window,
.workflow-step,
.study-queue-drawer,
.study-queue-drawer .panel,
.viewer-placeholder,
.viewer-frame,
.links button,
.badge,
.rail-nav button,
.rail-nav button span {
    border-radius: 2px;
}

button {
    border-color: #174f79;
    background: #0f6193;
}

button:not(:disabled):hover {
    border-color: #0a3f63;
    background: #0a507b;
}

.panel,
.panel.account-panel {
    border-color: #bfc9d4;
    box-shadow: 0 1px 0 rgb(18 35 52 / 7%);
}

.settings-overview {
    padding-bottom: 0;
}

.settings-tabs {
    display: flex;
    align-items: end;
    gap: 0;
    min-height: 42px;
    border-top: 1px solid #d5dde5;
    margin: 2px -20px 0;
    padding: 0 20px;
}

.settings-tabs button {
    min-height: 42px;
    border: 0;
    border-right: 1px solid #d5dde5;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: transparent;
    color: #45586c;
    padding: 0 18px;
    font-weight: 700;
}

.settings-tabs button:first-child {
    border-left: 1px solid #d5dde5;
}

.settings-tabs button:hover,
.settings-tabs button:focus-visible {
    background: #edf3f8;
    color: #123f61;
}

.settings-tabs button.active {
    border-bottom-color: #008bb8;
    background: #e8f3f8;
    color: #063f5f;
}

.settings-tabs button span {
    display: inline-grid;
    min-width: 20px;
    margin-left: 6px;
    border: 1px solid #aebdca;
    border-radius: 2px;
    background: #fff;
    color: #34495d;
    padding: 1px 5px;
    font-size: 11px;
    line-height: 1.3;
}

.settings-filter-bar {
    display: grid;
    grid-template-columns: auto minmax(220px, 1fr) minmax(140px, auto) auto;
    align-items: center;
    gap: 8px;
    border-top: 1px solid #d8e0e8;
    border-bottom: 1px solid #d8e0e8;
    background: #f2f6f9;
    padding: 9px 10px;
}

.settings-filter-bar label {
    margin: 0;
    color: #283b4e;
}

.settings-filter-bar input,
.settings-filter-bar select {
    min-height: 36px;
    margin: 0;
    border: 1px solid #aebdca;
    background: #fff;
    color: #16283a;
    padding: 0 9px;
}

.settings-filter-bar span,
.settings-summary {
    color: #526579;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
}

/* Dark clinical workspace surfaces for Upload, Settings, and administration. */
.workflow-page .panel,
.workflow-page .panel.account-panel {
    border-color: #293b4e;
    background: #0d1824;
    color: #dce6ef;
    box-shadow: 0 1px 0 rgb(255 255 255 / 4%);
}

.workflow-page .panel h2,
.workflow-page .panel h3,
.workflow-page .panel h4,
.workflow-page .panel-head h2,
.workflow-page .panel-head h3,
.workflow-page .panel-head h4,
.workflow-page .job-title,
.workflow-page .label {
    color: #e8eff6;
}

.workflow-page .panel p,
.workflow-page .panel .empty,
.workflow-page .job-meta,
.workflow-page .settings-summary {
    color: #9fb1c2;
}

.workflow-page label,
.workflow-page .settings-filter-bar label {
    color: #bac9d7;
}

.workflow-page input,
.workflow-page select,
.workflow-page textarea,
.workflow-page .settings-filter-bar input,
.workflow-page .settings-filter-bar select {
    border-color: #3a5065;
    background: #101f2e;
    color: #e6eef6;
}

.workflow-page input[type=file]::file-selector-button {
    border: 0;
    border-right: 1px solid #3a5065;
    background: #173149;
    color: #e6eef6;
}

.workflow-page .result-grid > div,
.workflow-page .job-list li,
.workflow-page .admin-list li,
.workflow-page .settings-filter-bar {
    border-color: #2d4155;
    background: #111f2d;
    color: #dce6ef;
}

.workflow-page .job-list li.active {
    border-color: #3e8fbd;
    border-left-color: #27add0;
    background: #142a3c;
}

.workflow-page .settings-tabs {
    border-color: #2d4155;
}

.workflow-page .settings-tabs button,
.workflow-page .settings-tabs button:first-child {
    border-color: #2d4155;
    color: #aebfd0;
}

.workflow-page .settings-tabs button:hover,
.workflow-page .settings-tabs button:focus-visible {
    background: #14283a;
    color: #e6eef6;
}

.workflow-page .settings-tabs button.active {
    border-bottom-color: #20b4d3;
    background: #173149;
    color: #f0f7fb;
}

.workflow-page .settings-tabs button span,
.workflow-page .badge {
    border-color: #40566b;
    background: #17283a;
    color: #c8d6e3;
}

.workflow-page .badge.good {
    border-color: #29684c;
    background: #123629;
    color: #8de0b3;
}

.workflow-page .badge.bad {
    border-color: #7c3947;
    background: #3b1b22;
    color: #ffb2be;
}

.workflow-page pre {
    border-color: #293d50;
    background: #08121c;
    color: #cbd8e4;
}

.rail-nav button.active {
    border-color: #3c91bd;
    background: #0b3855;
    box-shadow: inset 3px 0 #18b7d6;
}

@media (max-width: 760px) {
    .settings-tabs {
        overflow-x: auto;
    }

    .settings-filter-bar {
        grid-template-columns: 1fr;
    }
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 900px) {
    .login-page {
        place-items: start center;
        overflow-y: auto;
        padding: 20px;
    }

    .login-shell {
        width: min(580px, 100%);
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .login-brand-panel {
        min-height: auto;
        grid-template-rows: auto auto auto auto;
        gap: 20px;
        padding: 24px;
    }

    .login-copy h1 {
        font-size: 34px;
    }

    .login-copy p {
        font-size: 16px;
    }

    .login-product-visual img {
        min-height: 220px;
    }

    .login-card {
        max-width: none;
    }

    .topbar,
    .workspace {
        display: grid;
        grid-template-columns: 1fr;
    }

    .actions {
        justify-content: flex-start;
    }

    .tabs {
        overflow-x: auto;
    }

    .result-grid {
        grid-template-columns: 1fr 1fr;
    }

    .account-form {
        grid-template-columns: 1fr;
    }

    .viewer-compare {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 560px) {
    .login-page {
        padding: 12px;
    }

    .login-brand-panel,
    .login-card {
        padding: 20px;
    }

    .login-brand-header,
    .login-brand-footer,
    .login-card-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .login-copy h1 {
        font-size: 30px;
    }

    .login-product-visual img {
        min-height: 170px;
    }

    .login-actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
    }

    .result-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 760px) {
    .viewer-left-rail {
        top: 0;
        right: 0;
        bottom: auto;
        width: 100%;
        height: 64px;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 1fr;
        gap: 6px;
        border-right: 0;
        border-bottom: 1px solid #243448;
        padding: 6px 8px;
        box-shadow: 0 3px 12px rgb(0 0 0 / 18%);
    }

    .rail-nav {
        display: grid;
        grid-auto-flow: column;
        grid-auto-columns: minmax(60px, 1fr);
        gap: 4px;
        overflow-x: auto;
    }

    .rail-nav button,
    .rail-nav button.settings {
        min-height: 50px;
        margin-top: 0;
    }

    .rail-nav button span {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }

    .viewer-workbench.has-rail .viewer-panel.fullscreen {
        inset: 64px 0 0;
    }

    .workflow-page {
        inset: 64px 0 0;
        padding: 18px 12px;
    }

    .workspace-brand-bar {
        gap: 10px;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }

    .workspace-brand-bar img {
        width: 86px;
    }

    .viewer-empty-state .viewer-empty-copy {
        font-size: 23px;
    }

    .viewer-empty-action {
        gap: 10px;
    }

    .panel,
    .panel.account-panel {
        padding: 15px;
    }

    .ops-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .ops-status-item {
        grid-template-columns: 1fr;
    }

    .ops-status-item small {
        grid-column: 1;
    }

    .admin-excel-controls input[type=file] {
        width: 100%;
    }
}

@media (max-width: 430px) {
    .actions,
    .actions.left,
    .actions.right {
        display: grid;
        grid-template-columns: 1fr;
        width: 100%;
    }

    .actions button:not(.icon-button) {
        width: 100%;
    }

    .ops-summary-grid {
        grid-template-columns: 1fr;
    }
}