@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;500;600&family=Roboto+Mono:wght@400&display=swap');

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

:root {
    --bg:        #f5f5f5;
    --surface:   #ffffff;
    --border:    #e0e0e0;
    --text:      #212121;
    --muted:     #757575;
    --link:      #1565c0;
    --accent:    #1976d2;
    --accent-h:  #1565c0;
    --btn-bg:    #eeeeee;
    --btn-hover: #e0e0e0;
    --row-hover: #fafafa;
    --input-bg:  #ffffff;
    --code-bg:   #f5f5f5;
    --success:   #2e7d32;
}

[data-theme=dark] {
    --bg:        #121212;
    --surface:   #1e1e1e;
    --border:    #333;
    --text:      #e0e0e0;
    --muted:     #9e9e9e;
    --link:      #64b5f6;
    --accent:    #1976d2;
    --accent-h:  #1565c0;
    --btn-bg:    #2c2c2c;
    --btn-hover: #383838;
    --row-hover: #252525;
    --input-bg:  #2c2c2c;
    --code-bg:   #2c2c2c;
    --success:   #81c784;
}

/* ── Role Theme Accents ─────────────────────────────────────────────────── */
body[data-role="admin"] {
    --role-accent: #334155;
    --role-accent-h: #1e293b;
    --role-accent-subtle: #f1f5f9;
    --accent: #334155;
    --accent-h: #1e293b;
}
body[data-role="instructor"] {
    --role-accent: #7c3aed;
    --role-accent-h: #6d28d9;
    --role-accent-subtle: #f3e8ff;
    --accent: #7c3aed;
    --accent-h: #6d28d9;
}
body[data-role="ta"] {
    --role-accent: #16a34a;
    --role-accent-h: #15803d;
    --role-accent-subtle: #dcfce7;
    --accent: #16a34a;
    --accent-h: #15803d;
}
body[data-role="student"] {
    --role-accent: #1976d2;
    --role-accent-h: #1565c0;
    --role-accent-subtle: #e0f2fe;
    --accent: #1976d2;
    --accent-h: #1565c0;
}

[data-theme=dark] body[data-role="admin"] {
    --role-accent: #94a3b8;
    --role-accent-h: #cbd5e1;
    --role-accent-subtle: #1e293b;
    --accent: #475569;
    --accent-h: #64748b;
}
[data-theme=dark] body[data-role="instructor"] {
    --role-accent: #8b5cf6;
    --role-accent-h: #7c3aed;
    --role-accent-subtle: #3b0764;
    --accent: #8b5cf6;
    --accent-h: #7c3aed;
}
[data-theme=dark] body[data-role="ta"] {
    --role-accent: #22c55e;
    --role-accent-h: #16a34a;
    --role-accent-subtle: #052e16;
    --accent: #22c55e;
    --accent-h: #16a34a;
}
[data-theme=dark] body[data-role="student"] {
    --role-accent: #38bdf8;
    --role-accent-h: #0284c7;
    --role-accent-subtle: #082f49;
    --accent: #38bdf8;
    --accent-h: #0284c7;
}

body {
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: var(--text);
    background: var(--bg);
    margin: 0;
    transition: background .2s, color .2s;
}

a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Layout ─────────────────────────────────────────────────────────────── */
nav {
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    padding: 8px 24px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 16px;
    font-size: 13px;
    position: sticky;
    top: 0;
    z-index: 100;
}
nav .brand { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; font-size: 15px; color: var(--text); }
nav .brand img { display: block; width: 28px; height: 28px; }
nav .brand:hover { text-decoration: none; }
nav .brand .brand-title { font-weight: 600; color: var(--heading); }
nav .brand .brand-qualifier { font-size: 13px; font-weight: 400; color: var(--muted); display: inline-flex; align-items: center; }
nav .brand .brand-divider { opacity: 0.45; margin: 0 5px 0 2px; }
nav .brand .brand-qualifier-short { display: none; }
@media (max-width: 1200px) {
    nav .brand .brand-qualifier-full { display: none; }
    nav .brand .brand-qualifier-short { display: inline; }
}
@media (max-width: 680px) {
    nav .brand .brand-qualifier { display: none; }
}
nav ul { list-style: none; min-width: 0; max-width: 100%; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px 16px; align-items: center; }
nav ul li { max-width: 100%; margin: 0; }
nav ul li a {
    color: var(--text);
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 6px;
    font-weight: 500;
    transition: color .15s, background .15s;
}
nav ul li a:hover {
    color: var(--accent);
    background: var(--btn-hover);
    text-decoration: none;
}
nav a[href="/git"]::after {
    content: " \2197";
    display: inline-block;
    font-size: 0.85em;
    opacity: 0.75;
}
nav a[href="/git"]:hover::after {
    opacity: 1;
}
nav .nav-user-item {
    margin-left: 6px;
    padding-left: 12px;
    border-left: 1px solid var(--border);
}
nav form button { max-width: 100%; overflow: hidden; text-overflow: ellipsis; padding: 4px 12px; font-size: 12px; background: var(--surface); color: var(--muted); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; transition: all .15s ease; }
nav form button:hover { background: var(--btn-hover); color: var(--text); border-color: var(--muted); }

/* dark mode toggle button */
#theme-toggle {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 3px 8px;
    cursor: pointer;
    font-size: 13px;
    color: var(--muted);
    line-height: 20px;
    font-family: inherit;
    transition: all .15s ease;
}
#theme-toggle:hover { border-color: var(--muted); background: var(--btn-hover); color: var(--text); }

main { max-width: 1100px; margin: 24px auto; padding: 0 24px; }
main.wide-content { width: min(100%, calc(100vw - 2rem)); max-width: none; }
footer { border-top: 1px solid var(--border); padding: 14px 24px; font-size: 12px; color: var(--muted); margin-top: 40px; }
.footer-content { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }

h1 { font-size: 20px; font-weight: 600; margin: 0 0 16px; color: var(--text); }
h1 .title-scope { font-weight: 400; color: var(--muted); }
h1 .title-scope a { color: inherit; text-decoration: none; }
h1 .title-scope a:hover { color: var(--link); text-decoration: underline; }
h1 .title-sep { opacity: 0.45; margin: 0 4px; }
h2 { font-size: 16px; font-weight: 600; margin: 20px 0 10px; }
h1 + h2 { margin-top: 0; }
h3 { font-size: 14px; font-weight: 600; margin: 14px 0 8px; }
p  { margin: 0 0 12px; }
hr { border: none; border-top: 1px solid var(--border); margin: 20px 0; }
code {
    font-family: 'Roboto Mono', ui-monospace, monospace;
    font-size: 12px;
    background: var(--code-bg);
    padding: 1px 5px;
    border-radius: 3px;
    border: 1px solid var(--border);
    color: var(--text);
    overflow-wrap: anywhere;
}

/* ── Breadcrumb ─────────────────────────────────────────────────────────── */
.breadcrumb,
nav.breadcrumb,
nav[aria-label="breadcrumb"],
nav[aria-label="Breadcrumb"] {
    position: static;
    display: block;
    padding: 0;
    background: transparent;
    border: 0;
    font-size: 12px;
    line-height: 1.4;
    color: var(--muted);
    margin: 0 0 8px 0;
}
.breadcrumb ul,
nav.breadcrumb ul,
nav[aria-label="breadcrumb"] ul,
nav[aria-label="Breadcrumb"] ul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.breadcrumb li,
nav.breadcrumb li,
nav[aria-label="breadcrumb"] li,
nav[aria-label="Breadcrumb"] li {
    display: inline-flex;
    align-items: center;
    margin: 0;
    color: var(--muted);
}
.breadcrumb li + li::before,
nav.breadcrumb li + li::before,
nav[aria-label="breadcrumb"] li + li::before,
nav[aria-label="Breadcrumb"] li + li::before {
    content: "›";
    color: var(--muted);
    opacity: 0.55;
    margin: 0 6px;
    font-size: 13px;
    font-weight: 600;
}
.breadcrumb a,
nav.breadcrumb a,
nav[aria-label="breadcrumb"] a,
nav[aria-label="Breadcrumb"] a {
    color: var(--muted);
    text-decoration: none;
    transition: color .15s ease;
}
.breadcrumb a:hover,
nav.breadcrumb a:hover,
nav[aria-label="breadcrumb"] a:hover,
nav[aria-label="Breadcrumb"] a:hover {
    color: var(--text);
    text-decoration: underline;
}
.breadcrumb li:last-child,
nav.breadcrumb li:last-child,
nav[aria-label="breadcrumb"] li:last-child,
nav[aria-label="Breadcrumb"] li:last-child,
.breadcrumb li[aria-current="page"],
nav.breadcrumb li[aria-current="page"] {
    color: var(--text);
    font-weight: 500;
}
.breadcrumb span::before {
    content: " › ";
    color: var(--muted);
    opacity: 0.55;
    margin: 0 4px;
    font-size: 13px;
    font-weight: 600;
}

.page-subtitle {
    font-size: 13px;
    color: var(--muted);
    margin: -10px 0 16px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn, a[role=button], button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    border-radius: 6px;
    border: 1px solid var(--border);
    background: var(--btn-bg);
    color: var(--text);
    cursor: pointer;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    font-family: inherit;
    vertical-align: middle;
    box-sizing: border-box;
    transition: background .15s;
}
.btn:hover, a[role=button]:hover, button:hover { background: var(--btn-hover); text-decoration: none; }
button[type=submit], .btn-primary { background: var(--accent); color: #fff; border-color: transparent; }
button[type=submit]:hover, .btn-primary:hover { background: var(--accent-h); color: #fff; }
button:disabled, button:disabled:hover { opacity: .45; cursor: not-allowed; }
.secondary { background: var(--surface) !important; color: var(--text) !important; border-color: var(--border) !important; }
.secondary:hover { background: var(--btn-hover) !important; }
.btn-sm { height: 24px; padding: 0 8px; font-size: 12px; line-height: 22px; }
.btn-danger { background: var(--btn-bg) !important; color: #c0392b !important; border-color: #c0392b !important; }

/* ── Flash / alerts ─────────────────────────────────────────────────────── */
article, .flash {
    padding: 8px 14px;
    border-radius: 6px;
    margin-bottom: 14px;
    font-size: 13px;
    border: 1px solid var(--border);
    background: var(--surface);
}

/* ── Forms ──────────────────────────────────────────────────────────────── */
label { display: block; font-size: 13px; font-weight: 500; margin-bottom: 4px; color: var(--text); }
input:not([type]), input[type=text], input[type=email], input[type=password], input[type=number], input[type=search], input[type=url], select {
    width: 100%;
    height: 32px;
    line-height: 30px;
    padding: 0 10px;
    font-size: 13px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text);
    outline: none;
    font-family: inherit;
    vertical-align: middle;
    box-sizing: border-box;
    margin-bottom: 12px;
    transition: border-color .15s;
}
select {
    padding-right: 28px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23757575' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    cursor: pointer;
}
input:focus, select:focus, textarea:focus {
    border-color: var(--accent);
    box-shadow: 0 0 0 3px rgba(25,118,210,.15);
}
textarea {
    width: 100%;
    padding: 8px 12px;
    font-size: 12px;
    font-family: 'Roboto Mono', ui-monospace, monospace;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--input-bg);
    color: var(--text);
    outline: none;
    box-sizing: border-box;
    margin-bottom: 12px;
    transition: border-color .15s;
}
.grid { display: flex; flex-wrap: wrap; gap: 12px; }
.grid > * { flex: 1 1 220px; min-width: 0; }
small { font-size: 12px; color: var(--muted); display: block; margin-top: -8px; margin-bottom: 12px; }

/* ── Inline Form Layout ─────────────────────────────────────────────────── */
.form-inline {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.form-inline label {
    display: inline-flex;
    align-items: center;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
}
.form-inline input,
.form-inline select {
    width: auto;
    margin-bottom: 0;
}
.form-inline button {
    margin: 0;
    flex-shrink: 0;
}

/* ── Tables ─────────────────────────────────────────────────────────────── */
table { width: 100%; border-collapse: collapse; font-size: 13px; margin-bottom: 16px; background: var(--surface); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
thead th {
    padding: 7px 12px;
    text-align: left;
    border-bottom: 1px solid var(--border);
    font-weight: 600;
    white-space: nowrap;
    color: var(--muted);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .05em;
    background: var(--btn-bg);
}
tbody td { padding: 7px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
tbody tr:hover { background: var(--row-hover); }

.table-scroll { width: 100%; overflow-x: auto; margin-bottom: 16px; }
.table-tools { display: flex; align-items: end; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; }
.table-tools label { display: grid; grid-template-columns: auto minmax(120px, 220px); align-items: center; gap: 7px; margin: 0; color: var(--muted); }
.table-tools input[type=search] { min-width: min(240px, 70vw); margin: 0; }
.table-tools-count { margin-left: auto; color: var(--muted); font-size: 12px; }
.table-filter-empty td { padding: 18px; text-align: center; color: var(--muted); }
[data-table-tools] thead th { position: relative; overflow: visible; }
.table-column-title { vertical-align: middle; }
.table-sort { width: 28px; height: 28px; margin-left: 5px; padding: 0; border-color: transparent; background: transparent; color: var(--muted); line-height: 1; vertical-align: middle; }
.table-sort::before { content: "\25B2\A\25BC"; display: block; white-space: pre; font-size: 8px; line-height: .72; }
.table-sort[data-direction="ascending"]::before { content: "\25B2"; font-size: 15px; line-height: 1; color: var(--accent); }
.table-sort[data-direction="descending"]::before { content: "\25BC"; font-size: 15px; line-height: 1; color: var(--accent); }
.table-sort:hover, .table-sort:focus-visible { background: var(--btn-hover); color: var(--text); border-color: var(--border); }
.table-column-resizer { position: absolute; z-index: 2; top: 0; right: -4px; width: 9px; height: 100%; cursor: col-resize; touch-action: none; }
.table-column-resizer::after { content: ""; position: absolute; top: 20%; bottom: 20%; left: 4px; width: 1px; background: var(--border); }
.table-column-resizer:hover::after, .table-column-resizer:focus::after { width: 2px; background: var(--accent); }
.is-resizing-table { cursor: col-resize; user-select: none; }
.student-table-scroll { border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.student-table-scroll .students-table { min-width: max-content; margin-bottom: 0; border: 0; border-radius: 0; }
.students-table th, .students-table td { padding: 11px 14px; }
.students-table .student-name { min-width: 10rem; max-width: 16rem; white-space: normal; overflow-wrap: anywhere; }
.students-table .student-email { min-width: 13rem; max-width: 20rem; white-space: normal; overflow-wrap: anywhere; }
.students-table .grade-column, .students-table .grade-cell { min-width: 112px; text-align: center; }
.students-table .grade-lab, .students-table .grade-exercise { display: block; }
.students-table .grade-exercise { margin-top: 3px; color: var(--text); font-size: 12px; text-transform: none; letter-spacing: 0; }
.students-table .grade-score { display: block; font-size: 14px; font-weight: 600; line-height: 1.25; }
.students-table .grade-description { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.25; white-space: normal; }

/* ── Details / collapsible ──────────────────────────────────────────────── */
details { border: 1px solid var(--border); border-radius: 6px; margin-bottom: 12px; background: var(--surface); }
summary {
    padding: 7px 14px;
    font-weight: 500;
    font-size: 13px;
    cursor: pointer;
    background: var(--btn-bg);
    border-radius: 6px;
    list-style: none;
    user-select: none;
    color: var(--text);
}
summary::-webkit-details-marker { display: none; }
details[open] summary { border-bottom: 1px solid var(--border); border-radius: 6px 6px 0 0; }
details > form, details > div { padding: 14px; }
details > p, details > ol, details > ul, details > pre { margin: 0; padding: 10px 14px 14px; }
details > p + p, details > ol + p, details > p + ol { padding-top: 0; }
.release-operation-status { padding: 10px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.release-operation-status a { display: inline-block; margin-top: 4px; }

/* ── Action bar ─────────────────────────────────────────────────────────── */
.actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.inline-form { display: inline; }
.dashboard-action-groups { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 12px; margin-bottom: 20px; }
.dashboard-action-group { padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.dashboard-action-group h2 { margin: 0 0 10px; font-size: 13px; }
.dashboard-action-group .actions { margin-bottom: 0; }
.course-control-section { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--border); }
.course-control-section > h2 { margin: 0 0 12px; }
.course-control-section details { max-width: 760px; }
.batch-regrade-panel { max-width: 760px; margin: 0 0 16px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.batch-regrade-panel .batch-regrade-form { display: flex; align-items: end; gap: 12px; margin-bottom: 8px; }
.batch-regrade-labs { min-width: 0; margin: 0; padding: 0; border: 0; flex: 1 1 auto; }
.batch-regrade-labs legend { margin-bottom: 5px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.batch-regrade-options { display: flex; flex-wrap: wrap; gap: 6px; }
.batch-regrade-options label { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; margin: 0; padding: 0 10px; border: 1px solid var(--border); border-radius: 6px; background: var(--input-bg); font-weight: 400; cursor: pointer; }
.batch-regrade-options input { margin: 0; accent-color: var(--accent); }
.batch-regrade-panel .batch-regrade-form button { flex: 0 0 auto; }
.batch-regrade-panel p { margin: 0; color: var(--muted); font-size: 12px; }

@media (max-width: 520px) {
    .batch-regrade-panel .batch-regrade-form { display: grid; grid-template-columns: 1fr; align-items: stretch; }
    .batch-regrade-panel .batch-regrade-form button { width: 100%; }
    .table-tools { display: grid; grid-template-columns: 1fr; align-items: stretch; }
    .table-tools label { grid-template-columns: 42px 1fr; }
    .table-tools input[type=search] { width: 100%; min-width: 0; }
    .table-tools-count { margin-left: 0; }
}

.module-danger { padding: 16px; border: 1px solid #c0392b; border-radius: 6px; background: var(--surface); }
.module-danger h2 { margin-top: 0; color: #c0392b; }
.module-danger .danger-warning { color: #c0392b; font-weight: 500; }
.module-danger-options { margin: 14px 0; }
.module-danger-options label { margin-bottom: 9px; font-weight: 400; }
.module-danger-options input { margin-right: 6px; }
.module-impact { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.module-impact li { padding: 8px; border: 1px solid var(--border); border-radius: 6px; background: var(--code-bg); }
.module-delete-progress { margin-top: 14px; }
.module-otp-help { display: block; margin: -4px 0 7px; color: var(--muted); }
.module-administration { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--border); }
.module-administration > h2 { margin-bottom: 12px; }
.module-administration .module-archive-manager, .module-archive-manager .module-archive-group { padding: 16px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.module-administration .module-archive-manager > h3, .module-archive-manager .module-archive-group > h2 { margin-top: 0; }
.module-administration-danger { margin-top: 16px; padding: 16px; border: 1px solid #c0392b; border-radius: 6px; background: var(--surface); }
.module-administration-danger h3 { margin-top: 0; color: #c0392b; }
.module-archive-manager .module-archive-group + .module-archive-group { margin-top: 16px; }
.module-archive-manager .module-archive-category + .module-archive-category { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); }
.module-archive-manager .module-archive-group h3 { margin-top: 0; }
.module-archive-table { min-width: 760px; }
.module-archive-table code { overflow-wrap: anywhere; white-space: normal; }
.module-archive-actions { white-space: nowrap; }
.module-archive-actions form { display: inline; margin-left: 5px; }
.module-administration .stage-progress-steps { grid-template-columns: 1fr; }

.enrollment-import-progress { margin: 18px 0; padding: 14px; border: 1px solid var(--accent); border-radius: 6px; background: var(--code-bg); }
.enrollment-import-progress[hidden] { display: none; }
.enrollment-import-progress-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.enrollment-import-progress-heading span, .enrollment-import-progress td:last-child, .enrollment-import-progress-guidance { color: var(--muted); }
.enrollment-import-progress table { margin-bottom: 10px; }
.enrollment-import-progress th:first-child { width: 6rem; }
.enrollment-import-progress tr.is-success td:first-child { color: #2e7d32; font-weight: 600; }
.enrollment-import-progress tr.is-error td:first-child, .enrollment-import-progress.is-error #enrollment-import-progress-detail { color: #c0392b; font-weight: 600; }
.enrollment-import-progress tr.is-substep td:nth-child(2) { padding-left: 24px; }
.enrollment-import-progress tr.is-summary td:nth-child(2) { font-weight: 700; }
.enrollment-import-progress.is-success { border-color: #2e7d32; }
.enrollment-import-progress.is-error { border-color: #c0392b; }
.enrollment-import-progress-guidance { font-size: 12px; }

/* Source provenance */
.provenance-group { padding: 2px 0 12px; }
.provenance-group + .provenance-group { border-top: 1px solid var(--border); padding-top: 8px; }
.provenance-entry { min-width: 0; }
.provenance-entry + .provenance-entry { margin-top: 10px; }
.provenance-primary { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; min-width: 0; }
.provenance-primary code { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.provenance-url { display: block; }
.provenance-meta { margin: 5px 0 0; color: var(--muted); overflow-wrap: anywhere; }
.provenance-meta span { margin: 0 4px; }
.provenance-fetched { margin-top: 8px; }
.repo-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.repo-links .provenance-label { margin: 0 4px 0 0; }
.repo-links a { display: inline-block; padding: 5px 9px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); font-size: 12px; }
.provenance-refs { margin-top: 9px; }
.provenance-label { display: block; margin-bottom: 5px; color: var(--muted); font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; }
.provenance-ref-list { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; min-width: 0; }
.provenance-ref-list code { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.provenance-more, .provenance-empty { color: var(--muted); }
.provenance-empty { margin-bottom: 2px; }

.enrollment-substep td { background: var(--row-hover); }
.enrollment-substep td:nth-child(2) { padding-left: 24px; }
.substep-marker { color: var(--muted); margin-right: 3px; }

.role-change-form { display: flex; align-items: flex-end; gap: 10px; max-width: 420px; margin-bottom: 6px; }
.role-change-form label { flex: 1; margin: 0; }
.role-change-form select { margin: 4px 0 0; }
.role-change-form button { flex: 0 0 auto; margin: 0; }
.role-change-help { max-width: 620px; margin: 0 0 12px; color: var(--muted); font-size: 12px; }
#module-create-form .module-field-help { margin: 0 0 7px; line-height: 1.4; }
#module-create-form input,
#module-create-form select { min-height: 36px; height: 36px; line-height: 34px; }
#module-create-form button { height: 36px; }

.release-activity { position: relative; margin: 14px 0 18px; padding: 14px 18px; border: 1px solid var(--accent); border-radius: 8px; background: var(--code-bg); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.release-activity dl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 8px 0 10px; }
.release-activity dl > div { display: flex; align-items: center; gap: 6px; }
.release-activity dt { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.release-activity dd { margin: 0; font-size: 13px; font-weight: 500; }
.release-activity .progress-detail { margin: 6px 0 8px; font-size: 13px; line-height: 1.4; }
.release-table-scroll .release-table { min-width: 720px; margin-bottom: 0; }
.release-table .lab-actions { min-width: 150px; }
.release-table .source-commit { margin: 5px 0 0; line-height: 1.3; }
.release-table tr.row-highlight > * { background: color-mix(in srgb, var(--accent) 12%, transparent); }
.lab-actions { display: table-cell; }
.lab-actions form + form { margin-top: 6px; }
.muted { color: var(--muted); }
.release-section > p { max-width: 780px; }
.release-section { padding: 18px; }
.release-section > h2 { margin-top: 0; }
.release-operations > summary { font-size: 1.35rem; font-weight: 600; }
.release-operations[open] > summary { margin-bottom: 14px; }
.release-section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.release-section-heading h2 { margin-top: 0; }
.release-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.release-header-actions .inline-form { display: inline; margin: 0; }
.compact-details { max-width: 680px; }
.compact-details > div { padding: 10px 14px; }
.compact-details > div p:last-child { margin-bottom: 0; }
.release-labs-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 8px; }
.release-labs-heading h3, .release-labs-heading .candidate-status { margin: 0; }
.form-helper { margin: -2px 0 10px; color: var(--muted); font-size: 12px; }
.release-action-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; align-items: end; }
.release-action-grid form { padding: 14px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); }
.release-action-grid form label { margin-top: 0; }
.release-action-grid form button { width: 100%; }
.candidate-summary { padding: 14px; margin: 14px 0; border: 1px solid var(--accent); border-radius: 6px; background: var(--surface); }
.candidate-status { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.candidate-summary dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0 0 14px; }
.candidate-summary dl > div { min-width: 0; padding: 8px; background: var(--code-bg); border-radius: 4px; }
.candidate-summary dt { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.candidate-summary dd { margin: 4px 0 0; overflow-wrap: anywhere; }
.candidate-primary-action { margin: 0; }
.release-action-danger { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); }
.release-action-danger button { color: #c0392b; border-color: #c0392b; background: var(--surface); }
.deploy-action { position: relative; }
.deploy-warning { position: absolute; z-index: 20; bottom: calc(100% + 8px); left: 0; width: max-content; max-width: 210px; padding: 6px 9px; border: 1px solid #d6a93f; border-radius: 5px; color: #fff4ce; background: #4a3508; box-shadow: 0 4px 12px rgba(0,0,0,.24); font-size: 11px; font-weight: 600; line-height: 1.35; }
.deploy-warning::after { content: ''; position: absolute; top: 100%; left: 14px; border: 6px solid transparent; border-top-color: #4a3508; }
/* ── Testing section in Lab Releases ─────────────────────────────────────── */
.release-testing {
    padding: 24px;
    margin-bottom: 24px;
}
.release-testing > h2 {
    margin: 0 0 10px;
}
.release-testing > p {
    margin: 0 0 14px;
    color: var(--muted);
}
.release-testing .compact-details {
    margin: 0 0 22px;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--code-bg);
}
.release-testing .compact-details summary {
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
}
.release-testing .compact-details > div {
    padding: 10px 14px;
    border-top: 1px solid var(--border);
}

.staff-branch-test-form {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 18px 22px;
    max-width: 780px;
}
.staff-branch-test-form label {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0;
    font-size: 13px;
    font-weight: 500;
}
.staff-branch-test-form input,
.staff-branch-test-form select {
    margin-bottom: 0;
}
.staff-branch-test-form .form-helper {
    font-size: 11px;
    color: var(--muted);
    margin: 2px 0 0;
    font-weight: normal;
    line-height: 1.35;
}
.staff-branch-test-form .lab-number-label {
    max-width: 180px;
}
.staff-branch-test-form .staff-branch-test-actions {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 6px;
    padding-top: 4px;
}
.staff-branch-test-form .staff-branch-test-actions button,
.staff-branch-test-form > button {
    width: auto;
    padding: 6px 20px;
    font-size: 13px;
    font-weight: 500;
}
.staff-branch-test-form .staff-branch-test-status {
    margin: 0;
    font-size: 12px;
    color: var(--muted);
}

@media (max-width: 640px) {
    .staff-branch-test-form {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .staff-branch-test-form .lab-number-label {
        max-width: 100%;
    }
}
.student-colab-setup { margin-top: 24px; }
.workflow-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.workflow-card { margin: 0; padding: 16px; }
.workflow-header { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 8px; }
.workflow-header h3 { margin: 0; font-size: 1.15rem; }
.workflow-card p:last-of-type { min-height: 3em; }
.workflow-kicker { margin: 0; padding: 2px 7px; border-radius: 12px; background: var(--btn-bg); border: 1px solid var(--border); color: var(--accent); font-size: 10px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; white-space: nowrap; }
.workflow-card-primary { border-color: var(--accent); }
.configuration-cell { overflow: hidden; margin-bottom: 12px; border: 1px solid var(--border); border-radius: 6px; }
.configuration-details { margin-bottom: 12px; }
.configuration-details > summary { color: var(--accent); }
.configuration-details[open] > summary { margin-bottom: 8px; }
.configuration-cell-heading { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); background: var(--btn-bg); font-size: 12px; font-weight: 500; }
.configuration-cell-heading button { padding: 2px 10px; font-size: 11px; }
.configuration-cell pre, .private-key-box { overflow-x: auto; margin: 0; padding: 10px; background: var(--code-bg); font-size: 11px; line-height: 1.6; }
.private-key-help { margin-top: 14px; padding: 0 10px; color: var(--muted); font-size: 13px; }
.init-instructions-section { margin-top: 20px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.init-instructions-section[hidden] { display: none; }
.init-instructions-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.init-instructions-title { margin: 0; font-size: 1.2rem; font-weight: 600; color: var(--text); }
.init-instructions-close { background: none; border: none; font-size: 22px; line-height: 1; color: var(--muted); cursor: pointer; padding: 0 4px; }
.init-instructions-close:hover { color: var(--text); }
.init-instructions-intro { margin: 0 0 14px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.init-instructions-content { padding-top: 2px; }
.private-key-discrete { margin: 10px 0 12px; color: var(--muted); font-size: 13px; }
.private-key-discrete a { color: var(--accent); text-decoration: underline; cursor: pointer; }
.colab-next-steps { margin-left: .5rem; padding-left: 2rem; }
.forgejo-resources { margin-top: 28px; }
.forgejo-resources-help { margin: 4px 0 12px; color: var(--muted); font-size: 13px; }
.external-icon { display: inline-block; margin-left: 4px; font-size: 0.85em; line-height: 1; opacity: 0.75; vertical-align: baseline; }
a:hover .external-icon, button:hover .external-icon { opacity: 1; }
.release-actions-cell { min-width: 390px; }
.release-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.release-action-form { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.release-confirmation { width: 150px !important; margin: 0 !important; padding-block: 3px !important; }
.release-tests-attestation { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; white-space: nowrap; }
.release-tests-attestation input { width: auto; margin: 0; }
.release-tests-details { width: fit-content; max-width: 100%; margin: 0; }
.release-tests-details[open] { flex-basis: 100%; width: min(320px, 100%); margin-top: 6px; }
.release-tests-details summary { padding: 3px 7px; font-size: 12px; }
.release-tests-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; width: min(320px, 100%); padding: 8px; }
.release-tests-form .release-confirmation { width: 100% !important; }
.release-tests-form .release-tests-attestation { grid-column: 1 / -1; margin-top: 5px; }
.stage-progress { margin: 14px 0; padding: 14px 18px; border: 1px solid var(--accent); border-radius: 8px; background: var(--code-bg); box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.stage-progress[hidden] { display: none; }
.stage-progress-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; }
.stage-progress-heading strong { font-size: 14px; font-weight: 600; }
.stage-progress-heading span { color: var(--muted); font-size: 12px; white-space: nowrap; }
.stage-progress dl { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; margin: 8px 0 10px; }
.stage-progress dl > div { display: flex; align-items: center; gap: 6px; }
.stage-progress dt { color: var(--muted); font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.stage-progress dd { margin: 0; font-size: 13px; font-weight: 500; }
.stage-progress > p { margin-bottom: 8px; }
.stage-progress .progress-detail { margin: 6px 0 8px; font-size: 13px; line-height: 1.4; }
.stage-progress .progress-dismiss { cursor: pointer; opacity: 0.7; transition: opacity .15s; background: transparent; border: none; padding: 4px; font-size: 14px; color: var(--muted); line-height: 1; }
.stage-progress .progress-dismiss:hover { opacity: 1; color: var(--text); }
.stage-progress-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 12px; margin: 0 0 10px; padding: 0; list-style: none; }
.stage-progress-steps li { position: relative; padding-left: 19px; color: var(--muted); font-size: 12px; }
.stage-progress-steps li::before { content: ''; position: absolute; top: 4px; left: 1px; width: 10px; height: 10px; border: 2px solid var(--border); border-radius: 50%; }
.stage-progress-steps li.is-active { color: var(--text); font-weight: 500; }
.stage-progress-steps li.is-active::before { border-color: var(--accent); border-top-color: transparent; animation: stage-spin .8s linear infinite; }
.stage-progress-steps li.is-complete::before { border-color: var(--accent); background: var(--accent); }
.release-operation-steps li.is-complete { color: var(--success); }
.release-operation-steps li.is-complete::before { content: '\2713'; top: 0; width: 14px; height: 14px; border: 0; color: var(--success); background: transparent; font-size: 13px; font-weight: 700; }
.release-operation-steps li.is-error { color: #c0392b; font-weight: 500; }
.release-operation-steps li.is-error::before { content: '!'; top: 0; border-color: #c0392b; color: #c0392b; text-align: center; line-height: 10px; }
.module-administration .stage-progress-steps li.is-complete::before { content: '✓'; top: 0; width: 14px; height: 14px; border: 0; color: var(--accent); background: transparent; font-size: 13px; font-weight: 700; }
.module-administration .stage-progress-steps li.is-error { color: #c0392b; font-weight: 500; }
.module-administration .stage-progress-steps li.is-error::before { content: '!'; top: 0; border-color: #c0392b; color: #c0392b; text-align: center; line-height: 10px; }
.stage-progress-warning { margin: 0 !important; color: var(--muted); font-size: 11px; }
.stage-progress .progress-links { display: flex; gap: 14px; margin-top: 8px; }
.stage-progress .progress-links a { font-size: 12px; font-weight: 500; }
.stage-progress.is-success { border-color: #10b981; background: rgba(16, 185, 129, 0.05); }
.stage-progress.is-error { border-color: #ef4444; background: rgba(239, 68, 68, 0.05); }
.stage-progress.is-error .progress-detail { color: #ef4444; font-weight: 500; }
@keyframes stage-spin { to { transform: rotate(360deg); } }

@media (max-width: 520px) {
    nav { padding: 8px 12px; align-items: flex-start; }
    nav ul { flex: 1 1 100%; justify-content: flex-start; gap: 8px 12px; }
    .role-change-form { align-items: stretch; flex-direction: column; }
    .role-change-form button { width: 100%; }
    .release-publish-form { align-items: stretch; flex-direction: column; width: 100%; }
    .release-confirmation { width: 100% !important; }
    .release-tests-attestation { white-space: normal; }
    .release-tests-form { grid-template-columns: 1fr; }
    .release-tests-form .release-tests-attestation { grid-column: auto; }
    .stage-progress-steps { grid-template-columns: 1fr; }
    .stage-progress-heading { align-items: flex-start; flex-direction: column; gap: 2px; }
    .module-impact { grid-template-columns: 1fr; }
    .release-action-grid, .candidate-summary dl, .workflow-cards, .staff-branch-test-form { grid-template-columns: 1fr; }
    .workflow-card p:last-of-type { min-height: 0; }
    .inline-form { display: block; margin-top: 8px; }
    .release-section-heading { flex-direction: column; gap: 10px; }
    .release-header-actions { justify-content: flex-start; }
    .release-labs-heading { align-items: flex-start; flex-direction: column; }
}

/* ── Badges ─────────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 1px 7px; border-radius: 20px; font-size: 11px; font-weight: 500; border: 1px solid transparent; }
.badge-green { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
.badge-red   { background: #ffebee; color: #c62828; border-color: #ef9a9a; }
.badge-gray  { background: var(--btn-bg); color: var(--muted); border-color: var(--border); }
.badge-blue  { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }

[data-theme=dark] .badge-green { background: #1b3a1f; color: #81c784; border-color: #388e3c; }
[data-theme=dark] .badge-red   { background: #3e1a1a; color: #ef9a9a; border-color: #c62828; }
[data-theme=dark] .badge-blue  { background: #0d2a4a; color: #64b5f6; border-color: #1565c0; }

/* Role badges for enrollment table */
.badge-instructor { background: #e3f2fd; color: #1565c0; border-color: #90caf9; }
.badge-ta         { background: #f3e5f5; color: #7b1fa2; border-color: #ce93d8; }
.badge-student    { background: #e8f5e9; color: #2e7d32; border-color: #a5d6a7; }
[data-theme=dark] .badge-instructor { background: #0d2a4a; color: #64b5f6; border-color: #1565c0; }
[data-theme=dark] .badge-ta         { background: #2a0d3a; color: #ce93d8; border-color: #7b1fa2; }
[data-theme=dark] .badge-student    { background: #1b3a1f; color: #81c784; border-color: #388e3c; }

.job-output { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
.job-actions { margin: 18px 0 24px; }

/* ── TA / Staff Dashboard Workspace & Separation ────────────────────────── */
.ta-workspace-panel {
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--accent);
    border-radius: 8px;
    padding: 18px 20px;
    margin: 16px 0 28px;
}
.ta-panel-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}
.ta-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 4px;
    background: var(--accent);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}
.ta-panel-subtitle {
    font-size: 13px;
    color: var(--muted);
    font-weight: 500;
}
.ta-panel-content .dashboard-action-groups {
    margin-bottom: 16px;
}
.ta-panel-content .dashboard-action-group {
    background: var(--bg);
}
.ta-source-branch-card {
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 16px;
}
.ta-source-branch-card h2 {
    margin: 0 0 10px;
    font-size: 14px;
}
.staff-source-details {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 14px;
    margin: 10px 0;
    font-size: 12px;
}
.staff-source-details dt {
    color: var(--muted);
    font-weight: 500;
}
.staff-source-details dd {
    margin: 0;
    overflow-wrap: anywhere;
}
.ta-student-separator {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 32px 0 24px;
    gap: 16px;
}
.ta-student-separator::before,
.ta-student-separator::after {
    content: "";
    flex: 1;
    border-bottom: 2px dashed var(--border);
}
.ta-student-separator-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 14px;
    border-radius: 20px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}

/* ── Role badges in top navigation ──────────────────────────────────────── */
.nav-role-badge {
    display: inline-block;
    padding: 2px 7px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    margin-right: 6px;
    vertical-align: middle;
}
.nav-role-badge--admin {
    background: #fee2e2;
    color: #b91c1c;
    border: 1px solid #fca5a5;
}
.nav-role-badge--instructor {
    background: #f3e8ff;
    color: #6b21a8;
    border: 1px solid #d8b4fe;
}
.nav-role-badge--ta {
    background: #dcfce7;
    color: #15803d;
    border: 1px solid #86efac;
}
.nav-role-badge--student {
    background: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
}
[data-theme=dark] .nav-role-badge--admin {
    background: #450a0a;
    color: #fca5a5;
    border-color: #991b1b;
}
[data-theme=dark] .nav-role-badge--instructor {
    background: #3b0764;
    color: #d8b4fe;
    border-color: #7e22ce;
}
[data-theme=dark] .nav-role-badge--ta {
    background: #052e16;
    color: #86efac;
    border-color: #166534;
}
[data-theme=dark] .nav-role-badge--student {
    background: #082f49;
    color: #7dd3fc;
    border-color: #075985;
}

/* ── Role logout buttons ────────────────────────────────────────────────── */
button.nav-logout-btn {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 4px 12px;
    font-size: 12px;
    background: var(--surface);
    color: var(--muted);
    border: 1px solid var(--border);
    border-radius: 6px;
    cursor: pointer;
    transition: all .15s ease;
    vertical-align: middle;
}
button.nav-logout-btn--admin {
    border-color: #cbd5e1;
    color: #334155;
}
button.nav-logout-btn--admin:hover {
    background: #f1f5f9;
    border-color: #475569;
    color: #0f172a;
}
button.nav-logout-btn--instructor {
    border-color: #d8b4fe;
    color: #7c3aed;
}
button.nav-logout-btn--instructor:hover {
    background: #f3e8ff;
    border-color: #7c3aed;
    color: #581c87;
}
button.nav-logout-btn--ta {
    border-color: #86efac;
    color: #15803d;
}
button.nav-logout-btn--ta:hover {
    background: #dcfce7;
    border-color: #16a34a;
    color: #14532d;
}
button.nav-logout-btn--student:hover {
    background: var(--btn-hover);
    color: var(--accent);
    border-color: var(--accent);
}
[data-theme=dark] button.nav-logout-btn--admin {
    border-color: #475569;
    color: #cbd5e1;
}
[data-theme=dark] button.nav-logout-btn--admin:hover {
    background: #1e293b;
    border-color: #94a3b8;
    color: #f8fafc;
}
[data-theme=dark] button.nav-logout-btn--instructor {
    border-color: #581c87;
    color: #d8b4fe;
}
[data-theme=dark] button.nav-logout-btn--instructor:hover {
    background: #3b0764;
    border-color: #a855f7;
}
[data-theme=dark] button.nav-logout-btn--ta {
    border-color: #14532d;
    color: #86efac;
}
[data-theme=dark] button.nav-logout-btn--ta:hover {
    background: #052e16;
    border-color: #22c55e;
}

/* ── Active navigation links ────────────────────────────────────────────── */
nav ul li a.active,
nav ul li a[aria-current="page"] {
    font-weight: 600;
    background: var(--btn-hover);
    border-bottom: 2px solid var(--accent);
    border-radius: 4px 4px 0 0;
}
ul.nav-role--admin li a.active,
ul.nav-role--admin li a[aria-current="page"] {
    color: #0f172a;
    border-bottom-color: #334155;
}
ul.nav-role--instructor li a.active,
ul.nav-role--instructor li a[aria-current="page"] {
    color: #7c3aed;
    border-bottom-color: #7c3aed;
}
ul.nav-role--ta li a.active,
ul.nav-role--ta li a[aria-current="page"] {
    color: #15803d;
    border-bottom-color: #16a34a;
}
ul.nav-role--student li a.active,
ul.nav-role--student li a[aria-current="page"] {
    color: var(--accent);
    border-bottom-color: var(--accent);
}
[data-theme=dark] ul.nav-role--admin li a.active,
[data-theme=dark] ul.nav-role--admin li a[aria-current="page"] {
    color: #f8fafc;
    border-bottom-color: #94a3b8;
}
[data-theme=dark] ul.nav-role--instructor li a.active,
[data-theme=dark] ul.nav-role--instructor li a[aria-current="page"] {
    color: #d8b4fe;
    border-bottom-color: #a855f7;
}
[data-theme=dark] ul.nav-role--ta li a.active,
[data-theme=dark] ul.nav-role--ta li a[aria-current="page"] {
    color: #86efac;
    border-bottom-color: #22c55e;
}
[data-theme=dark] ul.nav-role--student li a.active,
[data-theme=dark] ul.nav-role--student li a[aria-current="page"] {
    color: #60a5fa;
    border-bottom-color: #3b82f6;
}

/* ── Dashboard Tools role accent modifiers ──────────────────────────────── */
.ta-workspace-panel--admin {
    border-left-color: #334155;
}
.ta-workspace-panel--instructor {
    border-left-color: #7c3aed;
}
.ta-workspace-panel--ta {
    border-left-color: #16a34a;
}
.ta-badge--admin {
    background: #334155;
}
.ta-badge--instructor {
    background: #7c3aed;
}
.ta-badge--ta {
    background: #16a34a;
}

[data-theme=dark] .ta-workspace-panel--admin { border-left-color: #94a3b8; }
[data-theme=dark] .ta-workspace-panel--instructor { border-left-color: #8b5cf6; }
[data-theme=dark] .ta-workspace-panel--ta { border-left-color: #22c55e; }
[data-theme=dark] .ta-badge--admin { background: #475569; }
[data-theme=dark] .ta-badge--instructor { background: #8b5cf6; }
[data-theme=dark] .ta-badge--ta { background: #22c55e; }

.ta-workspace-panel .actions a[role=button],
.ta-workspace-panel .actions button {
    border-color: var(--role-accent, var(--accent));
    color: var(--role-accent, var(--accent));
    background: var(--surface);
    transition: all .15s ease;
}
.ta-workspace-panel .actions a[role=button]:hover,
.ta-workspace-panel .actions button:hover {
    background: var(--role-accent, var(--accent));
    color: #fff;
    border-color: var(--role-accent, var(--accent));
}