.student-surface .card,.student-card {
    border:0;
    box-shadow:0 .35rem 1.25rem rgba(15,23,42,.08);
    border-radius:1rem;
}

.result-hero {
    background:linear-gradient(145deg,#fff,#f5f7ff);
}

.result-icon {
    width:4rem;
    height:4rem;
    margin:auto;
    border-radius:50%;
    display:grid;
    place-items:center;
    background:#eef2ff;
    color:#4f46e5;
    font-size:2rem;
    animation:tt-pop .45s ease-out;
}

.student-card .badge {
    font-weight:600;
}

.student-assignment-shell {
    max-width:1120px;
    margin-inline:auto;
}

.student-page-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:1rem;
}

.student-assignment-card {
    transition:transform .16s ease,box-shadow .16s ease;
}

.student-assignment-card:hover {
    transform:translateY(-2px);
    box-shadow:0 .55rem 1.5rem rgba(15,23,42,.11);
}

.student-assignment-meta {
    display:flex;
    flex-wrap:wrap;
    gap:.45rem 1rem;
    color:#64748b;
    font-size:.875rem;
}

.student-assignment-meta span {
    display:inline-flex;
    align-items:center;
    gap:.35rem;
}

.student-assignment-instructions {
    line-height:1.55;
}

.student-assignment-actions {
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:.5rem;
}

.student-assignment-actions .btn {
    width:auto;
    min-height:36px;
}

.student-empty-state {
    display:flex;
    align-items:center;
    gap:.8rem;
    padding:1rem 1.1rem;
    border:1px dashed #cbd5e1;
    border-radius:1rem;
    background:#f8fafc;
}

.student-empty-state>i {
    font-size:1.5rem;
    color:#6366f1;
}

.student-result-shell {
    max-width:900px;
}

.student-result-hero {
    overflow:hidden;
}

.student-score {
    font-size:clamp(2rem,6vw,3.25rem);
    font-weight:800;
    letter-spacing:-.04em;
    color:#1e293b;
    line-height:1;
}

.student-score span {
    font-size:.48em;
    font-weight:650;
    color:#64748b;
    letter-spacing:0;
}

.student-review-card {
    overflow:hidden;
}

.student-review-list {
    display:grid;
    gap:.85rem;
}

.student-review-item {
    border:1px solid #e2e8f0;
    border-radius:.9rem;
    padding:1rem;
    background:#fff;
}

.student-review-item.is-correct {
    border-left:4px solid #198754;
}

.student-review-item.is-wrong {
    border-left:4px solid #dc3545;
}

.student-review-item.is-pending {
    border-left:4px solid #ffc107;
}

.student-review-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:.75rem;
    margin-bottom:.65rem;
}

.student-answer-state {
    background:#f8fafc!important;
    color:#334155!important;
    border:1px solid #e2e8f0;
}

.is-correct .student-answer-state {
    color:#146c43!important;
    background:#eaf7f0!important;
}

.is-wrong .student-answer-state {
    color:#b02a37!important;
    background:#fff0f1!important;
}

.student-question-content {
    line-height:1.6;
    margin:.65rem 0;
}

.student-answer-grid {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:.65rem;
    margin-top:.8rem;
}

.student-answer-grid>div {
    padding:.65rem .75rem;
    border-radius:.7rem;
    background:#f8fafc;
    display:grid;
    gap:.15rem;
}

.student-answer-label {
    font-size:.75rem;
    text-transform:uppercase;
    letter-spacing:.035em;
    color:#64748b;
    font-weight:700;
}

.student-explanation {
    margin-top:.8rem;
    padding:.75rem .85rem;
    border-radius:.75rem;
    background:#fff9e8;
    border:1px solid #f5e4a7;
    line-height:1.55;
}

.student-policy-note {
    margin-top:.75rem;
}

@keyframes tt-pop {
    from {
        transform:scale(.75);
        opacity:.3;
    }
    to {
        transform:scale(1);
        opacity:1;
    }
}

@media(max-width:576px) {
    .student-assignment-card .card-body {
        padding:1rem!important;
    }
    .student-assignment-actions {
        align-items:stretch;
    }
    .student-assignment-actions form,.student-assignment-actions .btn {
        max-width:100%;
    }
    .student-answer-grid {
        grid-template-columns:1fr;
    }
    .student-review-item {
        padding:.85rem;
    }
    .student-score {
        font-size:2.35rem;
    }
}

@media(prefers-reduced-motion:reduce) {
    .result-icon {
        animation:none!important;
    }
    .student-surface * {
        scroll-behavior:auto!important;
        transition:none!important;
    }
    .student-assignment-card:hover {
        transform:none;
    }
}

/* EXAM-8: review option list follows the exact Attempt display order when policy permits review. */

.student-review-options {
    padding-left:1.75rem;
    color:#334155;
}

.student-review-options li {
    padding-left:.2rem;
    overflow-wrap:anywhere;
}

/* Code-quality candidate: Student UI ưu tiên thao tác cảm ứng và phản hồi focus rõ,
   vẫn giữ bảng màu/design system hiện hữu và không thêm animation gây nhiễu. */
.student-surface :where(a,button,.btn,.form-control,.form-select):focus-visible,
.student-card :where(a,button,.btn):focus-visible {
    outline:3px solid rgba(79,70,229,.24);
    outline-offset:3px;
}

.student-empty-state {
    min-height:72px;
}

@media(max-width:767.98px) {
    .student-surface .btn,
    .student-assignment-actions .btn {
        min-height:44px;
    }
}