:root {
    color-scheme: light;
    --bg: #f3f5f8;
    --bg-soft: #e9edf3;
    --panel: #ffffff;
    --panel-subtle: #f8fafc;
    --ink: #172033;
    --heading: #0f172a;
    --muted: #64748b;
    --line: #d8dee8;
    --line-strong: #c4ccd9;
    --brand: #0f766e;
    --brand-dark: #115e59;
    --brand-soft: #d9f5f1;
    --accent: #4f46e5;
    --accent-soft: #e7e7ff;
    --danger: #b42318;
    --danger-dark: #912018;
    --danger-soft: #fef3f2;
    --warning: #b54708;
    --warning-soft: #fffaeb;
    --success: #027a48;
    --success-soft: #ecfdf3;
    --shadow: 0 18px 44px rgba(17, 24, 39, 0.08);
    --shadow-soft: 0 8px 24px rgba(17, 24, 39, 0.06);
    --focus: 0 0 0 4px rgba(15, 118, 110, 0.16);
    --radius: 8px;
    --sidebar-bg: #15191f;
    --sidebar-line: rgba(255, 255, 255, 0.1);
    --sidebar-ink: #eef2f7;
    --sidebar-muted: #9aa4b2;
    --sidebar-active: rgba(15, 118, 110, 0.22);
}

[data-theme="dark"] {
    color-scheme: dark;
    --bg: #111315;
    --bg-soft: #171a1f;
    --panel: #1a1e24;
    --panel-subtle: #20252c;
    --ink: #e5e7eb;
    --heading: #f8fafc;
    --muted: #a3adbc;
    --line: #333a45;
    --line-strong: #46505e;
    --brand: #2dd4bf;
    --brand-dark: #5eead4;
    --brand-soft: rgba(45, 212, 191, 0.12);
    --accent: #a5b4fc;
    --accent-soft: rgba(165, 180, 252, 0.14);
    --danger: #f87171;
    --danger-dark: #fca5a5;
    --danger-soft: rgba(248, 113, 113, 0.12);
    --warning: #fbbf24;
    --warning-soft: rgba(251, 191, 36, 0.12);
    --success: #34d399;
    --success-soft: rgba(52, 211, 153, 0.12);
    --shadow: 0 18px 44px rgba(0, 0, 0, 0.32);
    --shadow-soft: 0 8px 24px rgba(0, 0, 0, 0.22);
    --focus: 0 0 0 4px rgba(45, 212, 191, 0.18);
    --sidebar-bg: #0c0f12;
    --sidebar-line: rgba(255, 255, 255, 0.08);
    --sidebar-active: rgba(45, 212, 191, 0.16);
}

* {
    box-sizing: border-box;
}

html {
    min-height: 100%;
}

body {
    margin: 0;
    background:
        radial-gradient(circle at top left, rgba(15, 118, 110, 0.08), transparent 34rem),
        linear-gradient(180deg, var(--bg), var(--bg-soft));
    color: var(--ink);
    font-family: Inter, "Segoe UI", Roboto, Arial, Helvetica, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    min-height: 100vh;
}

a {
    color: var(--brand);
    font-weight: 700;
    text-decoration: none;
}

a:hover {
    color: var(--brand-dark);
}

button,
input[type="file"]::file-selector-button {
    align-items: center;
    background: linear-gradient(180deg, var(--brand), var(--brand-dark));
    border: 1px solid transparent;
    border-radius: var(--radius);
    box-shadow: 0 8px 18px rgba(15, 118, 110, 0.18);
    color: #fff;
    cursor: pointer;
    display: inline-flex;
    font: inherit;
    font-weight: 800;
    justify-content: center;
    min-height: 40px;
    padding: 9px 14px;
    transition: border-color 150ms ease, box-shadow 150ms ease, transform 150ms ease, background 150ms ease;
    white-space: nowrap;
}

button:hover,
input[type="file"]::file-selector-button:hover {
    box-shadow: 0 10px 22px rgba(15, 118, 110, 0.24);
    transform: translateY(-1px);
}

button:disabled,
input:disabled,
select:disabled {
    cursor: not-allowed;
    opacity: 0.58;
}

button:disabled:hover {
    box-shadow: none;
    transform: none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    box-shadow: var(--focus);
    outline: 0;
}

.danger-button {
    background: linear-gradient(180deg, var(--danger), var(--danger-dark));
    box-shadow: 0 8px 18px rgba(180, 35, 24, 0.16);
}

.danger-button:hover {
    box-shadow: 0 10px 22px rgba(180, 35, 24, 0.24);
}

input,
select,
textarea {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    color: var(--ink);
    font: inherit;
    padding: 10px 12px;
    transition: border-color 150ms ease, box-shadow 150ms ease, background 150ms ease;
    width: 100%;
}

input:hover,
select:hover,
textarea:hover {
    border-color: var(--line-strong);
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand);
    outline: 0;
}

textarea {
    min-height: 78px;
    resize: vertical;
}

input[type="checkbox"] {
    accent-color: var(--brand);
}

input[type="file"] {
    background: var(--panel-subtle);
    border: 1px dashed var(--line-strong);
    cursor: pointer;
}

label {
    color: var(--muted);
    display: grid;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
}

small {
    color: var(--muted);
}

.app-shell {
    display: grid;
    grid-template-columns: 260px minmax(0, 1fr);
    min-height: 100vh;
}

.sidebar {
    background: var(--sidebar-bg);
    border-right: 1px solid var(--sidebar-line);
    color: var(--sidebar-ink);
    display: flex;
    flex-direction: column;
    padding: 22px 16px;
    position: sticky;
    top: 0;
    height: 100vh;
}

.brand {
    border-bottom: 1px solid var(--sidebar-line);
    display: grid;
    gap: 3px;
    margin-bottom: 18px;
    padding: 4px 8px 18px;
}

.brand strong {
    color: #fff;
    font-size: 25px;
    letter-spacing: 0;
    line-height: 1;
}

.brand span {
    color: var(--sidebar-muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.sidebar-nav {
    display: grid;
    gap: 6px;
}

.sidebar-about {
    border-top: 1px solid var(--sidebar-line);
    display: grid;
    gap: 4px;
    margin-top: auto;
    padding: 16px 8px 2px;
}

.sidebar-about a {
    color: var(--sidebar-muted);
    font-size: 13px;
    font-weight: 800;
}

.sidebar-about a:hover,
.sidebar-about a.active {
    color: #fff;
}

.sidebar-about span {
    color: color-mix(in srgb, var(--sidebar-muted) 72%, transparent);
    font-size: 10px;
    line-height: 1.3;
}

.sidebar-nav a {
    align-items: center;
    border: 1px solid transparent;
    border-radius: var(--radius);
    color: var(--sidebar-muted);
    display: flex;
    font-weight: 800;
    min-height: 42px;
    padding: 10px 12px;
}

.sidebar-nav a:hover,
.sidebar-nav a.active {
    background: var(--sidebar-active);
    border-color: var(--sidebar-line);
    color: #fff;
}

.main {
    min-width: 0;
    padding: 24px;
}

.topbar {
    align-items: center;
    background: color-mix(in srgb, var(--panel) 92%, transparent);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
    display: flex;
    justify-content: space-between;
    margin-bottom: 22px;
    padding: 14px 16px;
}

.topbar-title {
    display: grid;
    gap: 2px;
}

.topbar-title strong {
    color: var(--heading);
    font-size: 16px;
}

.topbar-title span {
    color: var(--muted);
    font-size: 13px;
}

.topbar-actions,
.topbar form {
    align-items: center;
    display: flex;
    gap: 10px;
}

.user-chip {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--ink);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    min-height: 34px;
    padding: 7px 11px;
}

.theme-toggle {
    background: var(--panel-subtle);
    border-color: var(--line);
    box-shadow: none;
    color: var(--ink);
    height: 38px;
    min-height: 38px;
    padding: 0;
    position: relative;
    width: 38px;
}

.theme-toggle:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    box-shadow: none;
}

.theme-icon {
    border: 2px solid currentColor;
    border-radius: 999px;
    display: block;
    height: 16px;
    position: relative;
    width: 16px;
}

.theme-icon::before {
    background: currentColor;
    border-radius: 999px;
    content: "";
    height: 3px;
    left: 50%;
    position: absolute;
    top: -7px;
    transform: translateX(-50%);
    width: 3px;
    box-shadow:
        0 25px 0 currentColor,
        12px 12px 0 currentColor,
        -12px 12px 0 currentColor,
        8px 3px 0 currentColor,
        -8px 3px 0 currentColor,
        8px 21px 0 currentColor,
        -8px 21px 0 currentColor;
}

[data-theme="dark"] .theme-icon {
    background: currentColor;
    border-color: currentColor;
    box-shadow: inset -6px -2px 0 0 var(--panel-subtle);
}

[data-theme="dark"] .theme-icon::before {
    display: none;
}

.page-heading {
    margin: 4px 0 20px;
}

.page-heading h1 {
    color: var(--heading);
    font-size: 30px;
    line-height: 1.15;
    margin: 0 0 6px;
}

.page-heading p {
    color: var(--muted);
    margin: 0;
}

.database-monitor-panel {
    background: var(--panel);
    border: 1px solid #a7c7e7;
    border-radius: 12px;
    box-shadow: none;
    margin-bottom: 18px;
    padding: 22px;
}

.database-monitor-header {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 18px;
}

.database-monitor-header .eyebrow {
    color: #1d4ed8;
    display: block;
    margin-bottom: 4px;
}

.database-monitor-header h2 {
    color: var(--heading);
    font-size: 25px;
    margin: 0 0 5px;
}

.database-monitor-header p {
    color: var(--muted);
    margin: 0;
}

.database-engine-chip {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 8px;
    display: grid;
    flex: 0 0 auto;
    gap: 2px;
    padding: 9px 12px;
    text-align: right;
}

.database-engine-chip span {
    color: #1e40af;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.database-engine-chip strong {
    color: #172033;
    font-size: 13px;
}

.database-kpi-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.database-kpi-card {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    min-width: 0;
    padding: 15px;
}

.database-kpi-card > span,
.database-capacity-heading span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.database-kpi-card > strong {
    color: var(--heading);
    font-size: 23px;
    line-height: 1.15;
}

.database-kpi-card small,
.database-capacity-card small {
    color: var(--muted);
    font-size: 12px;
}

.database-kpi-card.is-size {
    background: #eff6ff;
    border-color: #bfdbfe;
}

.database-capacity-grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 12px;
}

.database-capacity-card {
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 14px;
}

.database-capacity-heading {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.database-capacity-heading > div {
    display: grid;
    gap: 3px;
}

.database-capacity-heading strong,
.database-capacity-heading b {
    color: var(--heading);
}

.database-capacity-heading b {
    font-size: 18px;
}

.database-capacity-track {
    background: var(--bg-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    height: 10px;
    margin: 11px 0 8px;
    overflow: hidden;
}

.database-capacity-track i {
    background: #2563eb;
    display: block;
    height: 100%;
}

.database-capacity-track.is-buffer i {
    background: #0f766e;
}

.database-capacity-track.is-temporary i {
    background: #b54708;
}

[data-theme="dark"] .database-monitor-panel {
    border-color: #315f92;
}

[data-theme="dark"] .database-engine-chip,
[data-theme="dark"] .database-kpi-card.is-size {
    background: #17263a;
    border-color: #315f92;
}

[data-theme="dark"] .database-engine-chip span,
[data-theme="dark"] .database-monitor-header .eyebrow {
    color: #93c5fd;
}

[data-theme="dark"] .database-engine-chip strong {
    color: #f8fafc;
}

.evaluated-students-card {
    align-items: center;
    background: var(--panel);
    border: 1px solid #93c5fd;
    border-radius: 12px;
    box-shadow: none;
    display: grid;
    gap: 26px;
    grid-template-columns: 154px minmax(0, 1fr);
    margin-bottom: 18px;
    overflow: hidden;
    padding: 22px 26px;
    position: relative;
}

.evaluated-students-card::after {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    content: "";
    height: 180px;
    position: absolute;
    right: -84px;
    top: -105px;
    width: 180px;
}

.evaluated-students-visual {
    align-items: center;
    aspect-ratio: 1;
    background: #eff6ff;
    border: 2px solid #60a5fa;
    border-radius: 50%;
    color: #172033;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    width: 154px;
}

.evaluated-students-visual::before,
.evaluated-students-visual::after {
    border: 1px solid #bfdbfe;
    border-radius: 50%;
    content: "";
    inset: 8px;
    pointer-events: none;
    position: absolute;
}

.evaluated-students-visual::after {
    border-color: #dbeafe;
    inset: 15px;
}

.evaluated-students-visual svg {
    fill: none;
    height: 44px;
    margin-bottom: 3px;
    stroke: #1d4ed8;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 3;
    width: 44px;
}

.evaluated-students-visual strong {
    color: #0f172a;
    font-size: 36px;
    line-height: 1;
}

.evaluated-students-copy {
    min-width: 0;
    position: relative;
    z-index: 1;
}

.evaluated-students-copy .eyebrow {
    color: #1d4ed8;
    display: block;
    margin-bottom: 5px;
}

.evaluated-students-copy h2 {
    color: var(--heading);
    font-size: clamp(21px, 2vw, 28px);
    line-height: 1.2;
    margin: 0 0 8px;
}

.evaluated-students-copy p {
    color: var(--muted);
    margin: 0;
    max-width: 780px;
}

.evaluated-students-context {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 14px;
}

.evaluated-students-context span {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #172033;
    font-size: 12px;
    font-weight: 800;
    padding: 6px 10px;
}

[data-theme="dark"] .evaluated-students-card {
    border-color: #315f92;
}

[data-theme="dark"] .evaluated-students-card::after,
[data-theme="dark"] .evaluated-students-visual,
[data-theme="dark"] .evaluated-students-context span {
    background: #17263a;
    border-color: #315f92;
}

[data-theme="dark"] .evaluated-students-visual svg,
[data-theme="dark"] .evaluated-students-copy .eyebrow {
    stroke: #93c5fd;
    color: #93c5fd;
}

[data-theme="dark"] .evaluated-students-visual strong,
[data-theme="dark"] .evaluated-students-context span {
    color: #f8fafc;
}

.stats-grid,
.import-grid,
.catalog-grid {
    display: grid;
    gap: 16px;
}

.stats-grid {
    grid-template-columns: repeat(6, minmax(120px, 1fr));
    margin-bottom: 18px;
}

.import-grid {
    grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.activity-reference,
.catalog-tools,
.panel + .panel,
.panel + .stats-grid,
.stats-grid + .analytics-grid,
.analytics-grid + .panel {
    margin-top: 16px;
}

.catalog-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
}

.catalog-sections {
    display: grid;
    gap: 16px;
    margin-top: 16px;
}

.catalog-section,
.scroll-panel {
    min-width: 0;
}

.horizontal-scroll,
.table-wrap {
    overflow: auto;
}

.horizontal-scroll {
    max-height: 380px;
}

.horizontal-scroll table {
    min-width: 980px;
}

.inline-form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(150px, 1fr)) auto;
}

.assign-panel p,
.help-text {
    color: var(--muted);
    margin: 4px 0 0;
}

.tool-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(3, minmax(220px, 1fr));
}

.tool-form {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 10px;
    padding: 14px;
}

.tool-form h3 {
    color: var(--heading);
    margin: 0;
}

.tool-form p {
    color: var(--muted);
    margin: 0;
}

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

.row-actions form {
    margin: 0;
}

.users-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(280px, 380px) minmax(0, 1fr);
}

.report-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(2, minmax(320px, 1fr));
    margin-top: 18px;
}

.analytics-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(340px, 0.8fr) minmax(420px, 1.2fr);
    margin-top: 18px;
}

.chart-panel {
    min-height: 360px;
}

.chart-panel canvas {
    display: block;
    max-width: 100%;
    width: 100%;
}

.bar-charts {
    display: grid;
    gap: 16px;
    max-height: 300px;
    overflow: auto;
    padding-right: 6px;
}

.bar-group {
    display: grid;
    gap: 8px;
}

.bar-group h3 {
    color: var(--muted);
    font-size: 12px;
    letter-spacing: 0.04em;
    margin: 0;
    text-transform: uppercase;
}

.bar-item {
    display: grid;
    gap: 6px;
}

.bar-meta {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
}

.bar-meta span {
    color: var(--ink);
    font-weight: 800;
}

.bar-meta strong {
    color: var(--heading);
}

.bar-track {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}

.bar-fill {
    border-radius: 999px;
    height: 100%;
}

.performance-report {
    margin-top: 18px;
    overflow: hidden;
}

.performance-report-header {
    align-items: flex-start;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.performance-report-header h2 {
    font-size: 22px;
    margin: 3px 0 4px;
}

.performance-report-header p {
    margin: 0;
}

.performance-report-header p strong {
    color: var(--heading);
}

.eyebrow {
    color: var(--brand);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.performance-standard-summary {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    min-width: 132px;
    padding: 10px 14px;
    text-align: right;
}

.performance-standard-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}

.performance-standard-summary strong {
    color: var(--heading);
    font-size: 24px;
}

.performance-tabs {
    border-bottom: 1px solid var(--line);
    display: flex;
    gap: 4px;
    margin: 18px -18px 0;
    overflow-x: auto;
    padding: 0 18px;
}

button.performance-tab {
    background: transparent;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    box-shadow: none;
    color: var(--muted);
    min-height: 44px;
    padding: 9px 16px;
}

button.performance-tab:hover,
button.performance-tab.is-active {
    background: var(--brand-soft);
    border-bottom-color: var(--brand);
    box-shadow: none;
    color: var(--brand);
    transform: none;
}

.performance-level-explanation {
    align-items: flex-start;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    display: flex;
    gap: 11px;
    margin-top: 14px;
    padding: 12px 14px;
}

.performance-level-explanation-icon {
    align-items: center;
    background: var(--brand-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--brand);
    display: inline-flex;
    flex: 0 0 24px;
    font-size: 13px;
    font-weight: 900;
    height: 24px;
    justify-content: center;
}

.performance-level-explanation strong {
    color: var(--heading);
    display: block;
    font-size: 13px;
    margin-bottom: 3px;
}

.performance-level-explanation p {
    color: var(--muted);
    font-size: 12px;
    line-height: 1.55;
    margin: 0;
}

.performance-distribution {
    padding-top: 16px;
}

.performance-legend {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 18px;
    margin-bottom: 18px;
}

.performance-legend-item {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 7px;
}

.performance-legend-swatch {
    border: 1px solid rgba(15, 23, 42, 0.12);
    border-radius: 3px;
    display: inline-block;
    height: 12px;
    width: 12px;
}

.performance-standard-swatch {
    background: #7f1d1d;
    display: inline-block;
    height: 3px;
    width: 22px;
}

.performance-chart-viewport {
    overflow-x: auto;
    overflow-y: hidden;
    padding: 4px 0 10px;
}

.performance-chart {
    display: grid;
    gap: 10px;
    grid-template-columns: 52px minmax(calc(var(--outcome-count) * 155px), 1fr);
    min-width: max(100%, calc(var(--outcome-count) * 155px + 62px));
    padding: 10px 8px 0 0;
}

.performance-y-axis,
.performance-plot {
    height: 360px;
    position: relative;
}

.performance-y-axis {
    border-right: 1px solid var(--line-strong);
}

.performance-y-axis span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 800;
    position: absolute;
    right: 8px;
    transform: translateY(50%);
}

.performance-plot {
    border-bottom: 1px solid var(--line-strong);
    margin-bottom: 128px;
}

.performance-grid-line {
    border-top: 1px dashed var(--line);
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 0;
}

.performance-standard-line {
    border-top: 3px solid #7f1d1d;
    left: 0;
    pointer-events: none;
    position: absolute;
    right: 0;
    z-index: 4;
}

.performance-standard-line span {
    background: #7f1d1d;
    border-radius: 4px 4px 0 0;
    bottom: 3px;
    color: #fff;
    font-size: 10px;
    font-weight: 900;
    padding: 3px 6px;
    position: absolute;
    right: 0;
    text-transform: uppercase;
}

.performance-columns {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(var(--outcome-count), minmax(125px, 1fr));
    height: 100%;
    inset: 0;
    padding: 0 12px;
    position: absolute;
    z-index: 2;
}

.performance-column {
    align-items: flex-end;
    display: flex;
    height: 100%;
    justify-content: center;
    min-width: 0;
    position: relative;
}

.performance-stacked-bar {
    background: var(--panel-subtle);
    border: 1px solid var(--line-strong);
    border-radius: 5px 5px 0 0;
    box-shadow: 0 7px 18px rgba(15, 23, 42, 0.08);
    display: flex;
    flex-direction: column-reverse;
    height: 100%;
    overflow: hidden;
    width: min(76px, 72%);
}

.performance-segment {
    align-items: center;
    display: flex;
    flex: 0 0 auto;
    justify-content: center;
    min-height: 1px;
    overflow: hidden;
    transition: filter 150ms ease;
}

.performance-segment:hover {
    filter: brightness(1.08);
}

.performance-segment strong {
    font-size: 12px;
    line-height: 1;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.performance-column-label {
    display: grid;
    gap: 3px;
    left: 50%;
    padding-top: 10px;
    position: absolute;
    text-align: center;
    top: 100%;
    transform: translateX(-50%);
    width: 138px;
}

.performance-column-label strong {
    color: var(--heading);
    font-size: 12px;
}

.performance-column-label span {
    color: var(--ink);
    display: -webkit-box;
    font-size: 10px;
    line-height: 1.25;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

.performance-column-label small {
    font-size: 9px;
    font-weight: 800;
}

.performance-axis-title {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    margin: 0;
    text-align: center;
    text-transform: uppercase;
}

.performance-empty {
    align-items: center;
    background: var(--panel-subtle);
    border: 1px dashed var(--line-strong);
    border-radius: var(--radius);
    color: var(--muted);
    display: grid;
    gap: 5px;
    justify-items: center;
    min-height: 220px;
    padding: 24px;
    text-align: center;
}

.performance-empty strong {
    color: var(--heading);
}

.target-management {
    align-items: end;
    display: grid;
    gap: 20px;
    grid-template-columns: minmax(260px, 1fr) minmax(480px, 1.25fr);
    margin-top: 16px;
}

.target-management h2 {
    margin: 3px 0 6px;
}

.target-management p {
    margin: 0;
}

.target-form {
    align-items: end;
    display: grid;
    gap: 12px;
    grid-template-columns: minmax(220px, 1fr) minmax(145px, 0.45fr) auto;
}

.radar-toolbar {
    align-items: center;
    display: flex;
    gap: 18px;
    justify-content: space-between;
    margin-bottom: 8px;
}

.radar-intro {
    display: grid;
    gap: 3px;
}

.radar-intro strong {
    color: var(--heading);
    font-size: 16px;
}

.radar-intro span {
    color: var(--muted);
    font-size: 12px;
}

.radar-group-selector {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: inline-flex;
    gap: 3px;
    padding: 4px;
}

button.radar-group-button {
    background: transparent;
    border: 0;
    box-shadow: none;
    color: var(--muted);
    min-height: 34px;
    padding: 6px 10px;
}

button.radar-group-button:hover,
button.radar-group-button.is-active {
    background: var(--panel);
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
    color: var(--brand);
    transform: none;
}

.radar-stage {
    background:
        radial-gradient(circle at center, var(--brand-soft), transparent 47%),
        var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    justify-content: center;
    margin-top: 14px;
    overflow: auto hidden;
    padding: 12px;
}

.performance-radar-canvas {
    display: block;
    height: auto;
    max-width: 100%;
    min-width: 680px;
    width: 900px;
}

.radar-legend {
    align-items: center;
    display: flex;
    gap: 20px;
    justify-content: center;
    margin-top: 14px;
}

.radar-legend-item {
    align-items: center;
    color: var(--muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 8px;
}

.radar-real-swatch,
.radar-target-swatch {
    display: inline-block;
    height: 4px;
    width: 28px;
}

.radar-real-swatch {
    background: var(--brand);
}

.radar-target-swatch {
    background: repeating-linear-gradient(90deg, #991b1b 0 7px, transparent 7px 11px);
}

.radar-outcome-list {
    display: grid;
    gap: 8px;
    grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
    margin-top: 14px;
}

.radar-outcome-item {
    align-items: center;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 6px;
    display: flex;
    gap: 8px;
    justify-content: space-between;
    padding: 7px 9px;
}

.radar-outcome-item strong {
    color: var(--heading);
    font-size: 11px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.radar-outcome-item span {
    color: var(--success);
    font-size: 11px;
    font-weight: 900;
}

.radar-outcome-item span.is-below-target {
    color: var(--danger);
}

[hidden] {
    display: none !important;
}

.compact-reports {
    align-items: start;
}

.vertical-scroll {
    max-height: 360px;
    overflow: auto;
}

.detail-lanes {
    display: grid;
    gap: 16px;
    margin-top: 18px;
}

.horizontal-card-scroll {
    display: grid;
    gap: 14px;
    grid-auto-columns: minmax(320px, 420px);
    grid-auto-flow: column;
    overflow-x: auto;
    padding: 4px 4px 12px;
    scroll-snap-type: x proximity;
}

.outcome-card {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 10px;
    min-height: 180px;
    padding: 14px;
    scroll-snap-align: start;
}

.outcome-card-head {
    align-items: center;
    display: flex;
    gap: 12px;
    justify-content: space-between;
}

.outcome-card p {
    color: var(--ink);
    line-height: 1.45;
    margin: 0;
}

.outcome-card footer {
    align-self: end;
    color: var(--muted);
    font-weight: 800;
}

.selected-assessment {
    align-items: center;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-top: 16px;
    padding: 14px;
}

.selected-assessment div {
    display: grid;
    gap: 4px;
}

.selected-assessment span {
    color: var(--muted);
}

.assignment-summary {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.assignment-summary div,
.totals-strip div {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 6px;
    padding: 12px;
}

.assignment-summary span,
.totals-strip span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.locked-pill {
    background: var(--accent-soft);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--accent);
    font-weight: 800;
    padding: 7px 10px;
}

.stat-card,
.panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.stat-card {
    display: grid;
    gap: 8px;
    padding: 18px;
}

.stat-card span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}

.stat-card strong {
    color: var(--heading);
    font-size: 30px;
    line-height: 1;
}

.panel {
    padding: 18px;
}

.edit-panel {
    max-width: 980px;
}

.panel h2 {
    color: var(--heading);
    font-size: 18px;
    line-height: 1.25;
    margin: 0 0 12px;
}

.panel p {
    color: var(--muted);
}

.panel-header {
    align-items: center;
    display: flex;
    gap: 14px;
    justify-content: space-between;
    margin-bottom: 12px;
}

.form-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
}

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

.secondary-button,
.table-action {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: none;
    color: var(--ink);
    display: inline-flex;
    font-weight: 800;
    justify-content: center;
    min-height: 34px;
    padding: 7px 11px;
}

.table-action {
    min-height: 30px;
    padding: 5px 9px;
}

.secondary-button:hover,
.table-action:hover {
    background: var(--brand-soft);
    border-color: var(--brand);
    box-shadow: none;
    color: var(--brand);
}

.checkbox-label {
    align-items: center;
    color: var(--ink);
    display: flex;
    flex-direction: row;
    gap: 10px;
}

.checkbox-label input {
    width: auto;
}

table {
    border-collapse: separate;
    border-spacing: 0;
    width: 100%;
}

th,
td {
    border-bottom: 1px solid var(--line);
    padding: 11px 10px;
    text-align: left;
    vertical-align: top;
}

th {
    background: var(--panel-subtle);
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    position: sticky;
    text-transform: uppercase;
    top: 0;
    z-index: 1;
}

tbody tr:hover {
    background: var(--panel-subtle);
}

td strong {
    color: var(--heading);
}

.alert {
    border: 1px solid currentColor;
    border-radius: var(--radius);
    font-weight: 800;
    margin-bottom: 16px;
    padding: 12px 14px;
}

.alert.success {
    background: var(--success-soft);
    color: var(--success);
}

.alert.warning {
    background: var(--warning-soft);
    color: var(--warning);
}

.alert.error {
    background: var(--danger-soft);
    color: var(--danger);
}

.score-pill {
    background: var(--success-soft);
    border: 1px solid color-mix(in srgb, var(--success) 34%, transparent);
    border-radius: 999px;
    color: var(--success);
    display: inline-block;
    font-weight: 900;
    min-width: 68px;
    padding: 4px 8px;
    text-align: center;
}

.auth-page {
    align-items: center;
    background:
        linear-gradient(135deg, rgba(15, 118, 110, 0.22), transparent 34rem),
        linear-gradient(160deg, var(--sidebar-bg), var(--bg) 64%);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    padding: 24px;
}

.auth-theme-toggle {
    position: fixed;
    right: 20px;
    top: 20px;
    z-index: 2;
}

.login-panel {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    display: grid;
    gap: 18px;
    max-width: 430px;
    padding: 30px;
    width: 100%;
}

.login-panel h1 {
    color: var(--heading);
    margin: 0 0 6px;
}

.login-branding {
    align-items: center;
    display: grid;
    gap: 14px;
    grid-template-columns: 86px minmax(0, 1fr);
}

.login-branding img {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 16px;
    display: block;
    height: 86px;
    object-fit: contain;
    padding: 4px;
    width: 86px;
}

.login-branding h1 {
    font-size: 24px;
}

.splash-page {
    align-items: center;
    background:
        radial-gradient(circle at 18% 18%, rgba(201, 162, 39, 0.22), transparent 28rem),
        radial-gradient(circle at 88% 78%, rgba(15, 118, 110, 0.25), transparent 34rem),
        linear-gradient(145deg, #041b2d, #062f4f 54%, #071521);
    display: flex;
    justify-content: center;
    min-height: 100vh;
    overflow: hidden;
    padding: 28px;
    position: relative;
}

.splash-page::before,
.splash-page::after {
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 50%;
    content: "";
    height: 34rem;
    position: fixed;
    width: 34rem;
}

.splash-page::before {
    left: -20rem;
    top: -18rem;
}

.splash-page::after {
    bottom: -22rem;
    right: -18rem;
}

.splash-card {
    align-items: center;
    animation: splash-enter 600ms cubic-bezier(.2, .8, .2, 1) both;
    background: rgba(255, 255, 255, 0.97);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 24px;
    box-shadow: 0 30px 90px rgba(0, 0, 0, 0.34);
    display: grid;
    gap: 18px 32px;
    grid-template-columns: minmax(220px, 300px) minmax(300px, 1fr);
    max-width: 850px;
    overflow: hidden;
    padding: 34px;
    position: relative;
    width: 100%;
    z-index: 1;
}

.splash-logo-frame {
    align-items: center;
    align-self: stretch;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 18px;
    display: flex;
    grid-row: 1 / span 3;
    justify-content: center;
    min-height: 340px;
    overflow: hidden;
}

.splash-logo-frame img {
    display: block;
    height: auto;
    width: 100%;
}

.splash-copy {
    align-self: end;
}

.splash-kicker {
    color: #b38718;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.splash-copy h1 {
    color: #062f4f;
    font-size: clamp(30px, 5vw, 45px);
    letter-spacing: -0.04em;
    line-height: 1;
    margin: 7px 0 10px;
}

.splash-purpose {
    color: #526277;
    font-size: 15px;
    margin: 0;
}

.splash-credits {
    border-left: 3px solid #c7a33b;
    color: #334155;
    display: grid;
    gap: 3px;
    padding: 3px 0 3px 14px;
}

.splash-credits p {
    margin: 0;
}

.splash-credits a {
    color: #0f766e;
    font-size: 13px;
    margin-bottom: 8px;
}

.splash-credits span {
    color: #64748b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.splash-credits strong {
    color: #062f4f;
}

.splash-progress {
    background: #e2e8f0;
    border-radius: 999px;
    height: 4px;
    overflow: hidden;
}

.splash-progress span {
    animation: splash-progress var(--splash-duration) linear forwards;
    background: linear-gradient(90deg, #0f766e, #c7a33b);
    display: block;
    height: 100%;
    transform-origin: left;
    width: 100%;
}

.splash-continue {
    color: #64748b;
    font-size: 12px;
    justify-self: end;
}

@keyframes splash-enter {
    from { opacity: 0; transform: translateY(16px) scale(.985); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes splash-progress {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

.about-heading .eyebrow {
    display: inline-block;
    margin-bottom: 5px;
}

.about-panel {
    align-items: center;
    display: grid;
    gap: 34px;
    grid-template-columns: minmax(260px, 380px) minmax(0, 1fr);
    overflow: hidden;
}

.about-logo-frame {
    align-items: center;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 18px;
    display: flex;
    justify-content: center;
    min-height: 400px;
    overflow: hidden;
}

.about-logo-frame img {
    display: block;
    height: auto;
    width: 100%;
}

.about-content h2 {
    font-size: 26px;
    margin: 5px 0 12px;
}

.about-content > p {
    font-size: 15px;
    max-width: 720px;
}

.about-facts {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(2, minmax(220px, 1fr));
    margin-top: 22px;
}

.about-facts article {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 4px;
    padding: 16px;
}

.about-facts article > span {
    color: var(--muted);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.about-facts article > strong {
    color: var(--heading);
    font-size: 16px;
}

.about-facts article p {
    margin: 0;
}

.about-license-note {
    align-items: center;
    background: linear-gradient(135deg, var(--brand-soft), var(--panel-subtle));
    border: 1px solid var(--line);
    border-left: 4px solid #c7a33b;
    border-radius: var(--radius);
    display: grid;
    gap: 3px;
    margin-top: 14px;
    padding: 15px 16px;
}

.about-license-note strong {
    color: var(--heading);
}

.about-license-note span {
    color: var(--muted);
    font-size: 13px;
}

.login-panel p,
.login-panel small {
    color: var(--muted);
    margin: 0;
}

.login-panel form,
.import-card,
.user-form,
.assessment-form {
    display: grid;
    gap: 14px;
}

.import-workflow {
    display: grid;
    gap: 16px;
}

.import-workflow .panel-header p,
.activity-reference .panel-header p {
    margin: 3px 0 0;
}

.import-context-grid {
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(4, minmax(180px, 1fr));
}

.import-file-row {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: minmax(280px, 1fr) auto;
}

.import-submit-actions {
    align-items: stretch;
    display: grid;
    gap: 8px;
    min-width: 220px;
}

.reported-activities-panel {
    margin-top: 18px;
}

.reported-activity-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
}

.reported-activity-actions a {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 6px;
    color: #1e3a5f;
    font-size: 12px;
    padding: 5px 8px;
}

.assessment-scores-heading {
    align-items: flex-end;
    display: flex;
    gap: 20px;
    justify-content: space-between;
}

.assessment-score-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 18px;
}

.assessment-score-summary > div {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 3px;
    padding: 13px;
}

.assessment-score-summary span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.assessment-score-summary strong {
    color: var(--heading);
}

.assessment-score-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.assessment-score-table-wrap {
    max-height: 66vh;
}

.assessment-score-table {
    min-width: max-content;
}

.assessment-score-table th {
    background: var(--panel-subtle);
    position: sticky;
    top: 0;
    z-index: 2;
}

.assessment-score-table th small {
    display: block;
    font-size: 10px;
    margin-top: 3px;
}

.assessment-score-table td:nth-child(1),
.assessment-score-table td:nth-child(2),
.assessment-score-table td:nth-child(3) {
    min-width: 150px;
}

.assessment-score-table .score-cell {
    min-width: 76px;
    text-align: right;
}

.assessment-score-table .score-total,
.assessment-score-table .score-percentage {
    background: #eff6ff;
    color: #172033;
    font-weight: 800;
    text-align: right;
    white-space: nowrap;
}

[data-theme="dark"] .reported-activity-actions a,
[data-theme="dark"] .assessment-score-table .score-total,
[data-theme="dark"] .assessment-score-table .score-percentage {
    background: #17263a;
    border-color: #315f92;
    color: #f8fafc;
}

.selected-import-context,
.configuration-alert,
.configuration-note {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: var(--radius);
    color: var(--muted);
    margin: 0;
    padding: 12px 14px;
}

.configuration-alert {
    border-left-color: var(--warning);
    color: var(--warning);
    font-weight: 700;
}

.configuration-note {
    font-size: 13px;
}

.question-header {
    margin-top: 10px;
}

.totals-strip {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(2, minmax(160px, 1fr));
}

.totals-strip strong {
    color: var(--heading);
    font-size: 24px;
}

.total-warning {
    color: var(--warning);
}

.percentage-field {
    align-items: center;
    display: grid;
    grid-template-columns: minmax(100px, 1fr) auto;
}

.percentage-field input {
    border-radius: var(--radius) 0 0 var(--radius);
}

.percentage-field span {
    align-items: center;
    align-self: stretch;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-left: 0;
    border-radius: 0 var(--radius) var(--radius) 0;
    color: var(--muted);
    display: flex;
    font-weight: 900;
    padding: 0 12px;
}

.readiness-pill {
    border: 1px solid currentColor;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    padding: 4px 8px;
    white-space: nowrap;
}

.readiness-ready {
    background: var(--success-soft);
    color: var(--success);
}

.readiness-blocked {
    background: var(--warning-soft);
    color: var(--warning);
}

.readiness-reasons {
    color: var(--muted);
    font-size: 12px;
    margin: 8px 0 0;
    max-width: 420px;
    padding-left: 18px;
}

.readiness-reasons li + li {
    margin-top: 4px;
}

.activity-status-actions {
    align-items: flex-start;
    display: flex;
    flex-direction: column;
    gap: 7px;
    min-width: 170px;
}

.activity-status-actions form {
    margin: 0;
}

.activity-status-actions small {
    color: var(--muted);
}

.question-table input,
.question-table select {
    min-width: 120px;
}

.question-table select {
    min-width: 520px;
}

.filter-form {
    align-items: end;
    display: grid;
    gap: 14px;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.filter-form button {
    min-height: 42px;
}

.report-actions {
    align-items: stretch;
    display: grid;
    gap: 8px;
    grid-template-columns: minmax(0, 1fr);
    width: 100%;
}

.report-actions button {
    justify-content: center;
    min-width: 0;
    width: 100%;
}

.print-results-button {
    min-height: 42px;
}

@supports not (color: color-mix(in srgb, #000, #fff)) {
    .topbar {
        background: var(--panel);
    }

    .score-pill {
        border-color: var(--line);
    }
}

@media (max-width: 1180px) {
    .stats-grid {
        grid-template-columns: repeat(3, minmax(140px, 1fr));
    }

    .tool-grid,
    .import-grid,
    .target-management {
        grid-template-columns: 1fr;
    }

    .import-context-grid {
        grid-template-columns: repeat(2, minmax(200px, 1fr));
    }

    .target-form {
        grid-template-columns: repeat(2, minmax(180px, 1fr)) auto;
    }
}

@media (max-width: 980px) {
    .app-shell {
        grid-template-columns: 1fr;
    }

    .sidebar {
        height: auto;
        position: static;
    }

    .sidebar-about {
        margin-top: 14px;
    }

    .sidebar-nav {
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    }

    .main {
        padding: 18px;
    }

    .stats-grid,
    .catalog-grid,
    .report-grid,
    .users-grid,
    .analytics-grid {
        grid-template-columns: 1fr;
    }

    .topbar {
        align-items: flex-start;
        gap: 12px;
        flex-direction: column;
    }

    .topbar-actions,
    .topbar form {
        align-items: stretch;
        flex-wrap: wrap;
        width: 100%;
    }

    .form-grid,
    .filter-form,
    .inline-form,
    .assignment-summary,
    .import-context-grid,
    .import-file-row {
        grid-template-columns: 1fr;
    }

    .assessment-scores-heading {
        align-items: stretch;
        flex-direction: column;
    }

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

    .import-submit-actions {
        min-width: 0;
    }


    .selected-assessment,
    .panel-header,
    .performance-report-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .performance-standard-summary {
        text-align: left;
    }

    .target-form {
        grid-template-columns: 1fr;
        width: 100%;
    }

    .radar-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .about-panel {
        grid-template-columns: 1fr;
    }

    .about-logo-frame {
        justify-self: center;
        max-width: 380px;
        min-height: 0;
        width: 100%;
    }
}

@media (max-width: 560px) {
    body {
        font-size: 14px;
    }

    .main {
        padding: 14px;
    }

    .panel,
    .stat-card,
    .login-panel {
        padding: 14px;
    }

    .page-heading h1 {
        font-size: 25px;
    }

    .stats-grid,
    .totals-strip {
        grid-template-columns: 1fr;
    }

    .horizontal-card-scroll {
        grid-auto-columns: minmax(260px, 88vw);
    }


    .performance-tabs {
        margin-left: -14px;
        margin-right: -14px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .performance-y-axis,
    .performance-plot {
        height: 300px;
    }

    .performance-radar-canvas {
        min-width: 620px;
    }

    .radar-legend {
        align-items: flex-start;
        flex-direction: column;
        gap: 8px;
    }

    .auth-theme-toggle {
        right: 12px;
        top: 12px;
    }

    .login-branding {
        grid-template-columns: 68px minmax(0, 1fr);
    }

    .login-branding img {
        height: 68px;
        width: 68px;
    }

    .splash-page {
        align-items: flex-start;
        overflow: auto;
        padding: 16px;
    }

    .splash-card {
        gap: 16px;
        grid-template-columns: 1fr;
        padding: 20px;
    }

    .splash-logo-frame {
        grid-row: auto;
        min-height: 0;
    }

    .splash-copy {
        align-self: auto;
    }

    .splash-continue {
        justify-self: start;
    }

    .about-facts {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .splash-card,
    .splash-progress span {
        animation: none;
    }
}

/* Curriculum TreeView */
.curriculum-tree-panel {
    overflow: clip;
}

.curriculum-tree-header {
    align-items: flex-end;
    gap: 24px;
    margin-bottom: 20px;
}

.curriculum-tree-header > div:first-child {
    max-width: 760px;
}

.section-kicker {
    color: var(--brand);
    display: block;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.11em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.tree-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
}

.tree-actions button {
    min-height: 36px;
    padding: 8px 12px;
}

.curriculum-tree-layout {
    display: grid;
    gap: 22px;
    grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);
}

.curriculum-tree {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    max-height: 68vh;
    min-height: 420px;
    overflow: auto;
    padding: 12px;
}

.tree-root,
.tree-children {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tree-children {
    border-left: 1px solid var(--line-strong);
    margin-left: 15px;
    padding-left: 18px;
}

.tree-children[hidden] {
    display: none !important;
}

.tree-item {
    min-width: 0;
}

.tree-row {
    align-items: stretch;
    display: flex;
    gap: 5px;
    margin: 3px 0;
    min-width: 0;
}

.tree-toggle,
.tree-toggle-spacer {
    flex: 0 0 30px;
    width: 30px;
}

.tree-toggle {
    align-items: center;
    align-self: center;
    background: transparent;
    border: 0;
    border-radius: 50%;
    box-shadow: none;
    color: var(--muted);
    display: inline-flex;
    height: 30px;
    justify-content: center;
    min-height: 30px;
    padding: 0;
}

.tree-toggle:hover,
.tree-toggle:focus-visible {
    background: var(--brand-soft);
    color: var(--brand-dark);
    transform: none;
}

.tree-toggle span {
    border-bottom: 2px solid currentColor;
    border-right: 2px solid currentColor;
    display: block;
    height: 8px;
    transform: rotate(-45deg);
    transition: transform 160ms ease;
    width: 8px;
}

.tree-toggle[aria-expanded="true"] span {
    transform: rotate(45deg);
}

.tree-node {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 7px;
    box-shadow: none;
    color: var(--ink);
    display: flex;
    flex: 1 1 auto;
    gap: 10px;
    justify-content: flex-start;
    min-height: 48px;
    min-width: 0;
    padding: 7px 9px;
    text-align: left;
}

.tree-node:hover {
    background: color-mix(in srgb, var(--brand-soft) 62%, var(--panel));
    border-color: color-mix(in srgb, var(--brand) 28%, var(--line));
    color: var(--ink);
    transform: none;
}

.tree-node:focus-visible {
    box-shadow: var(--focus);
    outline: none;
}

.tree-node.is-selected {
    background: var(--brand-soft);
    border-color: color-mix(in srgb, var(--brand) 55%, var(--line));
    color: var(--ink);
}

.tree-node-kind {
    align-items: center;
    border-radius: 6px;
    display: inline-flex;
    flex: 0 0 30px;
    font-size: 0.72rem;
    font-weight: 900;
    height: 30px;
    justify-content: center;
    letter-spacing: 0.02em;
}

.tree-node-kind-program {
    background: var(--heading);
    color: var(--panel);
}

.tree-node-kind-competency {
    background: var(--accent-soft);
    color: var(--accent);
}

.tree-node-kind-glo {
    background: var(--brand-soft);
    color: var(--brand-dark);
}

.tree-node-kind-clo {
    background: var(--warning-soft);
    color: var(--warning);
}

.tree-node-label {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.tree-node-label strong,
.tree-node-label small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.tree-node-label strong {
    color: var(--heading);
    font-size: 0.9rem;
}

.tree-node-label small {
    color: var(--muted);
    font-size: 0.75rem;
    font-weight: 500;
}

.tree-count {
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 999px;
    color: var(--muted);
    font-size: 0.72rem;
    font-weight: 800;
    margin-left: auto;
    min-width: 26px;
    padding: 3px 7px;
    text-align: center;
}

.tree-empty {
    color: var(--muted);
    font-size: 0.8rem;
    padding: 10px 12px;
}

.curriculum-detail {
    align-self: start;
    background:
        linear-gradient(140deg, color-mix(in srgb, var(--brand-soft) 45%, transparent), transparent 48%),
        var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    min-height: 420px;
    padding: clamp(24px, 4vw, 42px);
    position: sticky;
    top: 18px;
}

.curriculum-detail-placeholder {
    align-content: center;
    color: var(--muted);
    display: grid;
    min-height: 330px;
    text-align: center;
}

.curriculum-detail-placeholder h3 {
    color: var(--heading);
    margin: 14px 0 6px;
}

.curriculum-detail-placeholder p {
    margin: 0 auto;
    max-width: 390px;
}

.detail-placeholder-icon {
    align-items: center;
    background: var(--brand-soft);
    border-radius: 50%;
    color: var(--brand-dark);
    display: inline-flex;
    font-size: 1.4rem;
    height: 54px;
    justify-content: center;
    justify-self: center;
    width: 54px;
}

.curriculum-detail-content {
    max-width: 720px;
}

.curriculum-detail-content[hidden] {
    display: none !important;
}

.detail-type {
    background: var(--brand-soft);
    border-radius: 999px;
    color: var(--brand-dark);
    display: inline-flex;
    font-size: 0.72rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 6px 10px;
    text-transform: uppercase;
}

.detail-code {
    color: var(--brand);
    font-size: 0.82rem;
    font-weight: 800;
    letter-spacing: 0.04em;
    margin: 24px 0 7px;
}

.curriculum-detail-content h3 {
    color: var(--heading);
    font-size: clamp(1.35rem, 2.5vw, 2rem);
    line-height: 1.2;
    margin: 0 0 18px;
}

.detail-description {
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.75;
    margin: 0;
    white-space: pre-line;
}

.detail-meta {
    border-top: 1px solid var(--line);
    color: var(--muted);
    font-size: 0.82rem;
    font-weight: 650;
    margin-top: 28px;
    padding-top: 16px;
}

.curriculum-admin {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 0 16px;
}

.curriculum-admin > summary {
    color: var(--heading);
    cursor: pointer;
    font-weight: 800;
    padding: 16px 2px;
}

.curriculum-admin[open] > summary {
    border-bottom: 1px solid var(--line);
}

.curriculum-admin-tables {
    display: grid;
    gap: 18px;
    padding: 16px 0;
}

@media (max-width: 980px) {
    .curriculum-tree-layout {
        grid-template-columns: 1fr;
    }

    .curriculum-tree,
    .curriculum-detail {
        min-height: 340px;
    }

    .curriculum-detail {
        position: static;
    }
}

@media (max-width: 640px) {
    .curriculum-tree-header {
        align-items: stretch;
    }

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

    .tree-actions button {
        flex: 1 1 140px;
    }

    .curriculum-tree {
        margin-left: -4px;
        margin-right: -4px;
        max-height: 62vh;
        padding: 8px;
    }

    .tree-children {
        margin-left: 11px;
        padding-left: 10px;
    }

    .tree-toggle,
    .tree-toggle-spacer {
        flex-basis: 26px;
        width: 26px;
    }

    .tree-node {
        gap: 7px;
        padding-left: 6px;
        padding-right: 6px;
    }

    .tree-node-kind {
        flex-basis: 27px;
        height: 27px;
    }

    .tree-count {
        display: none;
    }

    .curriculum-detail {
        padding: 24px 20px;
    }
}

/* TreeView visual refinement: flat, readable and permanently side-by-side */
:root {
    --tree-node-bg: #edf7ff;
    --tree-node-hover: #e1f1ff;
    --tree-node-selected: #d5ebff;
    --tree-node-border: #8fb4d3;
    --tree-node-text: #111827;
    --tree-detail-bg: #f4f9fe;
}

[data-theme="dark"] {
    --tree-node-bg: #dceeff;
    --tree-node-hover: #cfe7fb;
    --tree-node-selected: #bdddf7;
    --tree-node-border: #6e9fc5;
    --tree-node-text: #0b1728;
    --tree-detail-bg: #eaf5ff;
}

.curriculum-tree-layout {
    align-items: start;
    grid-template-columns: minmax(310px, 0.9fr) minmax(340px, 1.1fr);
    overflow-x: auto;
    padding-bottom: 3px;
}

.curriculum-tree {
    background: #f8fbfe;
    border: 1px solid var(--tree-node-border);
    box-shadow: none;
    height: min(68vh, 680px);
    max-height: none;
    min-height: 460px;
    overflow: auto;
    scrollbar-color: var(--tree-node-border) #e8f1f8;
    scrollbar-width: thin;
}

.tree-root,
.tree-children,
.tree-item {
    list-style: none !important;
}

.curriculum-tree .tree-row {
    gap: 9px;
    margin: 7px 0;
}

.curriculum-tree .tree-toggle {
    background: #ffffff;
    border: 1px solid var(--tree-node-border);
    border-radius: 5px;
    box-shadow: none !important;
    color: #315b7a;
    flex-basis: 28px;
    height: 28px;
    min-height: 28px;
    width: 28px;
}

.curriculum-tree .tree-toggle:hover,
.curriculum-tree .tree-toggle:focus-visible {
    background: var(--tree-node-hover);
    border-color: #527fa3;
    box-shadow: none !important;
    color: #173d5a;
    transform: none !important;
}

.curriculum-tree .tree-toggle-spacer {
    flex-basis: 28px;
    width: 28px;
}

.curriculum-tree .tree-node,
.curriculum-tree .tree-node:hover,
.curriculum-tree .tree-node:active {
    background: var(--tree-node-bg);
    border: 1px solid var(--tree-node-border);
    border-radius: 6px;
    box-shadow: none !important;
    color: var(--tree-node-text);
    gap: 13px;
    min-height: 55px;
    padding: 10px 14px;
    transform: none !important;
}

.curriculum-tree .tree-node:hover {
    background: var(--tree-node-hover);
    border-color: #527fa3;
}

.curriculum-tree .tree-node.is-selected {
    background: var(--tree-node-selected);
    border-color: #315f84;
    box-shadow: inset 3px 0 0 #315f84 !important;
}

.curriculum-tree .tree-node-kind {
    background: #ffffff;
    border: 1px solid var(--tree-node-border);
    border-radius: 5px;
    color: #214d6d;
    flex-basis: 32px;
    height: 32px;
    margin-right: 1px;
}

.curriculum-tree .tree-node-label {
    flex: 1 1 auto;
    gap: 5px;
    line-height: 1.25;
    padding-right: 6px;
}

.curriculum-tree .tree-node-label strong,
.curriculum-tree .tree-node-label small {
    color: var(--tree-node-text);
    display: block;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
}

.curriculum-tree .tree-node-label strong {
    font-size: 0.92rem;
    letter-spacing: 0.01em;
}

.curriculum-tree .tree-node-label small {
    font-size: 0.79rem;
    font-weight: 500;
    opacity: 0.78;
}

.curriculum-tree .tree-children {
    border-left: 1px solid #a9c4da;
    margin-left: 14px;
    padding-left: 17px;
}

.curriculum-detail {
    background: var(--tree-detail-bg);
    border: 1px solid var(--tree-node-border);
    box-shadow: none;
    color: #111827;
    height: min(68vh, 680px);
    max-height: none;
    min-height: 460px;
    overflow: auto;
    position: sticky;
    scrollbar-color: var(--tree-node-border) #e8f1f8;
    scrollbar-width: thin;
    top: 18px;
}

.curriculum-detail-placeholder,
.curriculum-detail-placeholder p,
.detail-description,
.detail-meta {
    color: #263548;
}

.curriculum-detail-content h3,
.curriculum-detail-placeholder h3 {
    color: #111827;
}

.tree-actions .secondary-button {
    background: #e6f3ff;
    border: 1px solid #7da9ca;
    box-shadow: none;
    color: #163f5d;
    transform: none;
}

.tree-actions .secondary-button:hover {
    background: #d9edff;
    border-color: #527fa3;
    box-shadow: none;
    color: #102f47;
    transform: none;
}

@media (max-width: 980px) {
    .curriculum-tree-layout {
        grid-template-columns: minmax(290px, 0.9fr) minmax(330px, 1.1fr);
    }

    .curriculum-tree,
    .curriculum-detail {
        min-height: 420px;
    }

    .curriculum-detail {
        position: sticky;
    }
}

@media (max-width: 640px) {
    .curriculum-tree-layout {
        grid-template-columns: minmax(270px, 44vw) minmax(320px, 1fr);
    }

    .curriculum-tree .tree-node {
        gap: 9px;
        padding: 9px 10px;
    }
}

.database-backup-panel {
    align-items: center;
    background: #f4f9fe;
    border: 1px solid #9bbbd3;
    box-shadow: none;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 22px;
}

.database-backup-panel h2 {
    color: #111827;
    margin-bottom: 8px;
}

.database-backup-panel p {
    color: #334155;
    line-height: 1.6;
    margin: 0;
    max-width: 820px;
}

.backup-scope-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-top: 14px;
}

.backup-scope-list span {
    background: #e2f1fd;
    border: 1px solid #9bbbd3;
    border-radius: 999px;
    color: #214d6d;
    font-size: 0.74rem;
    font-weight: 750;
    padding: 5px 9px;
}

.database-backup-panel form {
    margin: 0;
}

.database-backup-panel .backup-download-button {
    background: #dceeff;
    border: 1px solid #5f8fb3;
    border-radius: 6px;
    box-shadow: none;
    color: #102f47;
    min-width: 210px;
    transform: none;
}

.database-backup-panel .backup-download-button:hover {
    background: #cce6fb;
    border-color: #315f84;
    box-shadow: none;
    color: #0b2235;
    transform: none;
}

.performance-settings-panel,
.performance-settings-form {
    display: grid;
    gap: 1.25rem;
}

.performance-benchmark-field {
    max-width: 34rem;
}

.performance-benchmark-field small {
    color: var(--muted);
    display: block;
    line-height: 1.45;
    margin-top: .4rem;
}

.performance-range-editor {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.performance-range-card {
    border: 1px solid var(--line);
    border-top: 5px solid var(--range-color);
    border-radius: 12px;
    display: grid;
    gap: .85rem;
    padding: 1rem;
}

.performance-range-card header {
    align-items: center;
    display: flex;
    gap: .55rem;
}

.performance-range-card header i {
    background: var(--range-color);
    border-radius: 999px;
    height: .8rem;
    width: .8rem;
}

.performance-range-limits {
    display: grid;
    gap: .75rem;
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.outcome-card-metrics {
    color: var(--muted);
    display: grid;
    font-size: .8rem;
    gap: .2rem;
    margin-top: .65rem;
}

@media (max-width: 900px) {
    .performance-range-editor {
        grid-template-columns: 1fr;
    }
}

.professor-bulk-import {
    align-items: center;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1.45fr) minmax(280px, 0.55fr);
    margin-bottom: 22px;
}

.professor-bulk-import h2 {
    margin-bottom: 8px;
}

.professor-bulk-import p {
    color: var(--muted);
    margin: 0;
    max-width: 800px;
}

.professor-bulk-import form {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 14px;
    padding: 16px;
}

.bulk-column-list {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin: 14px 0;
}

.bulk-column-list span {
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: 999px;
    color: #1e3a5f;
    font-size: 12px;
    font-weight: 800;
    padding: 5px 9px;
}

.bulk-template-link {
    box-shadow: none;
    display: inline-flex;
}

[data-theme="dark"] .bulk-column-list span {
    background: #17263a;
    border-color: #315f92;
    color: #dbeafe;
}

@media (max-width: 760px) {
    .database-backup-panel,
    .professor-bulk-import {
        align-items: stretch;
        grid-template-columns: 1fr;
    }

    .database-backup-panel .backup-download-button {
        width: 100%;
    }
}
/* Distribution of applied assessment types for directors and deans */
.activity-type-panel {
    margin-top: 18px;
    overflow: hidden;
}

.activity-type-header {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.activity-type-header h2 {
    color: var(--heading);
    font-size: 22px;
    margin: 4px 0 6px;
}

.activity-type-header p {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
}

.activity-type-context {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 4px;
    max-width: 420px;
    min-width: 220px;
    padding: 11px 14px;
    text-align: right;
}

.activity-type-context span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.activity-type-context strong {
    color: var(--brand);
    font-size: 13px;
}

.activity-type-chart {
    margin-top: 22px;
}

.activity-type-body {
    align-items: center;
    display: grid;
    gap: clamp(28px, 5vw, 68px);
    grid-template-columns: minmax(260px, 0.78fr) minmax(330px, 1.22fr);
    margin: 0 auto;
    max-width: 980px;
}

.activity-type-visual {
    align-items: center;
    display: flex;
    justify-content: center;
}

.activity-type-donut {
    align-items: center;
    aspect-ratio: 1;
    border: 1px solid var(--line-strong);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    max-width: 310px;
    position: relative;
    width: min(100%, 310px);
}

.activity-type-center {
    align-items: center;
    aspect-ratio: 1;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 58%;
}

.activity-type-center strong {
    color: var(--heading);
    font-size: clamp(34px, 5vw, 52px);
    line-height: 1;
}

.activity-type-center span {
    color: var(--muted);
    font-size: 12px;
    font-weight: 850;
    letter-spacing: 0.06em;
    margin-top: 7px;
    text-transform: uppercase;
}

.activity-type-legend {
    display: grid;
    gap: 9px;
}

.activity-type-legend-item {
    align-items: center;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 8px;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(0, 1fr) auto;
    min-height: 58px;
    padding: 9px 12px;
}

.activity-type-identity {
    align-items: center;
    color: var(--ink);
    display: flex;
    font-weight: 800;
    gap: 11px;
    min-width: 0;
}

.activity-type-identity span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.activity-type-swatch {
    border: 1px solid rgba(15, 23, 42, 0.15);
    border-radius: 4px;
    flex: 0 0 16px;
    height: 16px;
    width: 16px;
}

.activity-type-values {
    display: grid;
    min-width: 92px;
    text-align: right;
}

.activity-type-values strong {
    color: var(--heading);
    font-size: 18px;
}

.activity-type-values small {
    color: var(--muted);
    font-size: 11px;
}

.activity-type-empty {
    min-height: 210px;
}

@media (max-width: 760px) {
    .activity-type-header {
        align-items: stretch;
        flex-direction: column;
    }

    .activity-type-context {
        max-width: none;
        text-align: left;
    }

    .activity-type-body {
        grid-template-columns: 1fr;
    }

    .activity-type-donut {
        width: min(78vw, 290px);
    }
}
/* Clear GLO/CLO selection and description in activity configuration */
.clo-selection-field {
    display: grid;
    gap: 9px;
    min-width: 620px;
}

.question-outcome-preview {
    background: #f4f9fe;
    border: 1px solid #a9c4da;
    border-radius: 7px;
    color: #1f2937;
    display: grid;
    gap: 9px;
    max-height: 230px;
    overflow: auto;
    padding: 10px 12px;
}

[data-theme="dark"] .question-outcome-preview {
    background: #eaf5ff;
    border-color: #6e9fc5;
    color: #0b1728;
}

.question-outcome-preview > span {
    color: #64748b;
    font-size: 12px;
    font-weight: 700;
}

.outcome-preview-codes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.outcome-preview-codes span {
    background: #dceeff;
    border: 1px solid #8fb4d3;
    border-radius: 5px;
    color: #173d5a;
    font-size: 11px;
    font-weight: 850;
    padding: 4px 7px;
}

.outcome-preview-item {
    border-top: 1px solid #c8d9e7;
    display: grid;
    gap: 3px;
    padding-top: 8px;
}

.outcome-preview-item strong {
    color: #173d5a;
    font-size: 11px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.outcome-preview-item p {
    color: #1f2937;
    font-size: 12px;
    line-height: 1.5;
    margin: 0;
}

@media (max-width: 760px) {
    .clo-selection-field {
        min-width: 520px;
    }
}

/* Program director report completion status */
.report-status-panel {
    margin-top: 18px;
    overflow: hidden;
}

.report-status-header {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.report-status-header h2 {
    color: var(--heading);
    font-size: 22px;
    margin: 4px 0 6px;
}

.report-status-header p {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
    max-width: 720px;
}

.report-status-context {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: grid;
    gap: 4px;
    max-width: 420px;
    min-width: 220px;
    padding: 11px 14px;
    text-align: right;
}

.report-status-context span {
    color: var(--ink);
    font-size: 12px;
    font-weight: 800;
}

.report-status-context strong {
    color: var(--brand);
    font-size: 13px;
}

.report-status-summary {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(3, minmax(150px, 1fr));
    margin-top: 20px;
}

.report-status-stat {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    display: grid;
    gap: 5px;
    padding: 13px 15px;
}

.report-status-stat span {
    color: var(--muted);
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.report-status-stat strong {
    color: var(--heading);
    font-size: 27px;
    line-height: 1;
}

.report-status-stat.is-reported {
    border-left-color: var(--success);
}

.report-status-stat.is-reported strong {
    color: var(--success);
}

.report-status-stat.is-pending {
    border-left-color: var(--danger);
}

.report-status-stat.is-pending strong {
    color: var(--danger);
}

.report-status-table-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 16px;
    max-height: 430px;
}

.report-status-table {
    margin: 0;
    min-width: 790px;
}

.report-status-table thead th {
    background: var(--panel-subtle);
    position: sticky;
    top: 0;
    z-index: 1;
}

.report-status-table td strong,
.report-status-table td span:not(.report-status-pill) {
    display: block;
}

.report-status-table td strong {
    color: var(--heading);
}

.report-status-table td span:not(.report-status-pill) {
    color: var(--muted);
    font-size: 12px;
    margin-top: 3px;
}

.report-status-pill {
    align-items: center;
    border: 1px solid;
    border-radius: 999px;
    display: inline-flex;
    font-size: 12px;
    font-weight: 900;
    justify-content: center;
    min-width: 108px;
    padding: 6px 10px;
    white-space: nowrap;
}

.report-status-pill.is-reported {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

.report-status-pill.is-pending {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.report-status-empty {
    margin-top: 16px;
    min-height: 120px;
}

@media (max-width: 760px) {
    .database-monitor-header {
        align-items: stretch;
        flex-direction: column;
    }

    .database-engine-chip {
        text-align: left;
    }

    .database-kpi-grid,
    .database-capacity-grid {
        grid-template-columns: 1fr;
    }

    .evaluated-students-card {
        grid-template-columns: 1fr;
        justify-items: center;
        padding: 22px 18px;
        text-align: center;
    }

    .evaluated-students-context {
        justify-content: center;
    }

    .report-status-header {
        align-items: stretch;
        flex-direction: column;
    }

    .report-status-context {
        max-width: none;
        text-align: left;
    }

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

/* Historical analysis: independent reporting for administrators and deans */
.historical-page-heading {
    align-items: flex-end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.historical-page-heading .eyebrow {
    color: var(--brand);
    display: block;
    font-size: 11px;
    font-weight: 850;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
    text-transform: uppercase;
}

.historical-print-button {
    min-width: 190px;
}

.historical-filter-panel {
    margin-top: 18px;
}

.historical-filter-form {
    align-items: end;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}

.historical-result-filter,
.historical-student-filter {
    grid-column: span 2;
}

.historical-analysis-notice,
.historical-result-description {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-left: 4px solid var(--brand);
    border-radius: 8px;
    margin-bottom: 16px;
    padding: 14px 16px;
}

.historical-analysis-notice {
    color: var(--muted);
    font-weight: 700;
}

.historical-result-description strong {
    color: var(--ink);
    display: block;
    margin-bottom: 5px;
}

.historical-result-description p {
    color: var(--muted);
    margin: 0;
}

.historical-context {
    align-items: center;
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    display: flex;
    gap: 16px;
    justify-content: space-between;
    margin: 16px 0;
    padding: 11px 15px;
}

.historical-context span {
    color: var(--heading);
    font-weight: 800;
}

.historical-context strong {
    color: var(--brand);
}

.historical-stats {
    grid-template-columns: repeat(5, minmax(130px, 1fr));
}

.historical-stats .stat-card strong {
    font-size: clamp(22px, 2.2vw, 32px);
}

.historical-stats .historical-positive strong {
    color: var(--success);
}

.historical-stats .historical-negative strong {
    color: var(--danger);
}

.historical-trend-panel {
    margin-top: 18px;
}

.historical-section-header {
    align-items: flex-start;
    display: flex;
    gap: 24px;
    justify-content: space-between;
}

.historical-section-header h2 {
    color: var(--heading);
    margin: 4px 0 6px;
}

.historical-section-header p {
    color: var(--muted);
    line-height: 1.55;
    margin: 0;
    max-width: 780px;
}

.historical-legend {
    color: var(--muted);
    font-size: 12px;
    font-weight: 750;
    white-space: nowrap;
}

.historical-legend i {
    background: var(--brand);
    border-radius: 999px;
    display: inline-block;
    height: 10px;
    margin-right: 6px;
    width: 10px;
}

.historical-trend-chart {
    background: var(--panel-subtle);
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 18px;
    min-height: 390px;
    overflow-x: auto;
    padding: 8px;
}

.historical-trend-chart svg {
    display: block;
    height: 390px;
    min-width: 720px;
    width: 100%;
}

.historical-grid-line {
    stroke: var(--line);
    stroke-width: 1;
}

.historical-axis-label,
.historical-period-label {
    fill: var(--muted);
    font-size: 12px;
    font-weight: 700;
}

.historical-line {
    fill: none;
    stroke: var(--brand);
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 4;
}

.historical-point {
    fill: var(--panel);
    stroke: var(--brand);
    stroke-width: 4;
}

.historical-value-label {
    fill: var(--heading);
    font-size: 12px;
    font-weight: 900;
}

.historical-missing-label {
    fill: var(--muted);
    font-size: 11px;
    font-style: italic;
}

.historical-table-wrap {
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-top: 16px;
}

.historical-data-pill {
    border: 1px solid;
    border-radius: 999px;
    display: inline-flex;
    font-size: 11px;
    font-weight: 850;
    justify-content: center;
    min-width: 86px;
    padding: 5px 9px;
}

.historical-data-pill.has-data {
    background: var(--success-soft);
    border-color: var(--success);
    color: var(--success);
}

.historical-data-pill.no-data {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}

.historical-activity-list {
    display: grid;
    gap: 12px;
    margin-top: 16px;
}

.historical-activity-list article {
    align-items: center;
    display: grid;
    gap: 16px;
    grid-template-columns: minmax(160px, 0.7fr) minmax(240px, 2fr) 72px;
}

.historical-activity-list article > div:first-child {
    display: grid;
    gap: 3px;
}

.historical-activity-list article > div:first-child span {
    color: var(--muted);
    font-size: 12px;
}

.historical-activity-meter {
    background: var(--line);
    border-radius: 999px;
    height: 12px;
    overflow: hidden;
}

.historical-activity-meter span {
    background: var(--brand);
    border-radius: inherit;
    display: block;
    height: 100%;
}

.historical-empty {
    margin-top: 18px;
}

@media (max-width: 1100px) {
    .historical-filter-form {
        grid-template-columns: repeat(2, minmax(180px, 1fr));
    }

    .historical-stats {
        grid-template-columns: repeat(3, minmax(150px, 1fr));
    }
}

@media (max-width: 700px) {
    .historical-page-heading,
    .historical-section-header,
    .historical-context {
        align-items: stretch;
        flex-direction: column;
    }

    .historical-filter-form,
    .historical-stats {
        grid-template-columns: 1fr;
    }

    .historical-result-filter,
    .historical-student-filter {
        grid-column: auto;
    }

    .historical-activity-list article {
        grid-template-columns: 1fr;
    }
}

@media print {
    .historical-print-button,
    .historical-filter-panel,
    .sidebar,
    .topbar {
        display: none !important;
    }

    .app-shell,
    .main {
        display: block;
        margin: 0;
        padding: 0;
        width: 100%;
    }

    .panel,
    .stat-card {
        break-inside: avoid;
        box-shadow: none;
    }

    .historical-trend-chart {
        overflow: visible;
    }
}