.results-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-6);
}
.results-head h1 { margin: 0; }

.results-filter-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}
.results-filter-banner[hidden] { display: none; }

.results-form-card { margin-bottom: var(--space-6); }
.results-form-card[hidden] { display: none; }

.results-form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--space-4);
}

.results-list-container[hidden] { display: none; }

.results-table { width: 100%; border-collapse: collapse; background: var(--card); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.results-table th, .results-table td { padding: var(--space-3) var(--space-4); text-align: start; border-bottom: 1px solid var(--outline-variant); }
.results-table thead { background: var(--surface-container); }
.results-table tbody tr:last-child td { border-bottom: none; }

.results-student-name { font-weight: var(--font-weight-semibold); font-size: var(--text-sm); }
.results-student-id { font-size: 11px; color: var(--text-light); font-family: var(--font-en); margin-top: 2px; }
.results-student-id--only { font-weight: var(--font-weight-medium); font-family: var(--font-en); }

.results-cell-marks { font-weight: var(--font-weight-bold); color: var(--primary); }
.results-cell-remarks { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Mobile-responsive card layout — same fix already applied to the
   PWA's css/results.css. Below 600px the table header is hidden and
   each row becomes a stacked label/value card via data-label +
   ::before, instead of horizontally-scrolling a wide table. */
@media (max-width: 600px) {
    .results-table thead { display: none; }
    .results-table, .results-table tbody, .results-table tr, .results-table td { display: block; width: 100%; }
    .results-table tr {
        margin-bottom: var(--space-4);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-xs);
        overflow: hidden;
    }
    .results-table td {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: var(--space-3);
        border-bottom: 1px solid var(--outline-variant);
    }
    .results-table td::before {
        content: attr(data-label);
        font-weight: var(--font-weight-semibold);
        color: var(--text-light);
        font-size: var(--text-xs);
        flex-shrink: 0;
    }
    .results-cell-remarks { max-width: none; overflow: visible; text-overflow: clip; white-space: normal; text-align: end; }
}