/* =======================================================
   RESULTS PAGES CSS
   Specific styles for results.html, results-details.html, 
   and results-participant.html
   ======================================================= */

/* --- Page Header & Toolbar --- */
.results-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 24px;
}
.results-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--text, #111827);
    margin-bottom: 4px;
}
.results-subtitle {
    color: var(--muted, #6B7280);
    font-size: 0.9rem;
}
.btn-export {
    background-color: #fff;
    border: 1px solid #D1D5DB;
    color: #374151;
    font-weight: 600;
    padding: 8px 16px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.875rem;
    transition: all 0.2s;
}
.btn-export:hover {
    background-color: #F9FAFC;
    border-color: #9CA3AF;
}

/* --- Main Stat Cards (results.html) --- */
.stat-cards-main {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.stat-card-main {
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.stat-card-main .stat-title {
    font-size: 0.9rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 16px;
}
.stat-card-main .stat-value {
    font-size: 1.8rem;
    font-weight: 700;
}
.stat-card-main .stat-subinfo {
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 8px;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Colors for Main Stat Cards */
.sc-purple { background-color: #F5F3FF; border: 1px solid #E2E8F0; }
.sc-purple .stat-title, .sc-purple .stat-value { color: #5B21B6; }

.sc-green { background-color: #A7F3D0; border: 1px solid #6EE7B7; }
.sc-green .stat-title { color: #065F46; }
.sc-green .stat-value { color: #047857; }
.sc-green .stat-subinfo { color: #065F46; }

.sc-red { background-color: #FECDD3; border: 1px solid #FDA4AF; }
.sc-red .stat-title { color: #9F1239; }
.sc-red .stat-value { color: #BE123C; }
.sc-red .stat-subinfo { color: #9F1239; }

.sc-blue { background-color: #DBEAFE; border: 1px solid #BFDBFE; }
.sc-blue .stat-title, .sc-blue .stat-value { color: #1E40AF; }

.sc-amber { background-color: #FEF3C7; border: 1px solid #FDE68A; }
.sc-amber .stat-title, .sc-amber .stat-value { color: #B45309; }

/* Mini inline progress bar for stat cards */
.mini-progress-wrap {
    width: 60px;
    height: 6px;
    background: rgba(0,0,0,0.1);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}
.mini-progress-fill {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.mini-progress-fill.green { background-color: #059669; }
.mini-progress-fill.red { background-color: #E11D48; }

/* --- Detail Stat Cards (results-details.html) --- */
.stat-cards-detail {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 32px;
}
.stat-card-detail {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 14px;
    display: flex;
    gap:1rem;
/*    flex-direction: column;
*/    align-items: center;
    text-align: left;
}
.stat-card-detail .scd-icon {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    background-color: #F3F4F6;
    color: #6B7280;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    margin-bottom: 12px;
}
.stat-card-detail.scd-purple .scd-icon { background-color: #F5F3FF; color: #7C3AED; }
.stat-card-detail.scd-blue .scd-icon { background-color: #EFF6FF; color: #3B82F6; }
.stat-card-detail.scd-orange .scd-icon { background-color: #FFF7ED; color: #F97316; }
.stat-card-detail.scd-green .scd-icon { background-color: #F0FDF4; color: #10B981; }
.stat-card-detail.scd-red .scd-icon { background-color: #FEF2F2; color: #EF4444; }

.stat-card-detail .scd-title {
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    margin-bottom: 4px;
}
.stat-card-detail .scd-value {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
}
.stat-card-detail .scd-sub {
    font-size: 0.7rem;
    color: #9CA3AF;
    margin-top: 4px;
}

/* --- Search & Filter Toolbar --- */
.results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}
.toolbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-grow: 1;
}
.search-input-wrap {
    position: relative;
    max-width: 400px;
    width: 100%;
}
.search-input-wrap i {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: #9CA3AF;
}
.search-input-wrap input {
    width: 100%;
    padding: 9px 16px 9px 40px;
    border: 1px solid #D1D5DB;
    border-radius: 8px;
    font-size: 0.875rem;
}
.search-input-wrap input:focus {
    outline: none;
    border-color: #7C3AED;
    box-shadow: 0 0 0 3px rgba(124,58,237,0.1);
}
.toolbar-btn {
    background: #fff;
    border: 1px solid #D1D5DB;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: 0.85rem;
    color: #374151;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
}
.toolbar-btn:hover { background: #F9FAFC; }
.toolbar-right {
    font-size: 0.85rem;
    color: #6B7280;
}

/* --- Results Data Table --- */
.results-table-wrap {
    background: #fff;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
}
.results-table {
    width: 100%;
    border-collapse: collapse;
}
.results-table th {
    background: #F9FAFC;
    padding: 14px 20px;
    font-size: 0.75rem;
    font-weight: 600;
    color: #6B7280;
    text-transform: capitalize;
    text-align: left;
    border-bottom: 1px solid #E5E7EB;
}
.results-table td {
    padding: 16px 20px;
    font-size: 0.875rem;
    color: #111827;
    border-bottom: 1px solid #E5E7EB;
    vertical-align: middle;
}
.results-table tr:last-child td {
    border-bottom: none;
}
.exam-title-cell {
    font-weight: 700;
    color: #111827;
}
.exam-meta-cell {
    font-size: 0.75rem;
    color: #9CA3AF;
    font-weight: 500;
    margin-top: 4px;
}
.participant-name { font-weight: 700; color: #111827; }
.participant-meta { font-size: 0.75rem; color: #9CA3AF; margin-top: 2px; }

/* Status Badges */
.res-badge {
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: inline-block;
}
.rb-upcoming { background: #D1FAE5; color: #065F46; }
.rb-active { background: #E0E7FF; color: #3730A3; }
.rb-end { background: #F3F4F6; color: #4B5563; }
.rb-passed { background: #D1FAE5; color: #065F46; }
.rb-failed { background: #FEE2E2; color: #991B1B; }

/* Small indicators */
.sm-badge {
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.65rem;
    font-weight: 600;
    margin-left: 6px;
}
.sm-latest { background: #E0E7FF; color: #4F46E5; }
.sm-best { background: #FEF3C7; color: #D97706; }
.sm-attempts { background: #E0E7FF; color: #4F46E5; }

/* Table inline progress bar */
.table-prog-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
}
.table-prog-bar {
    width: 60px;
    height: 4px;
    background: #F3F4F6;
    border-radius: 2px;
    overflow: hidden;
    position: relative;
}
.table-prog-fill {
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
}
.table-prog-fill.green { background: #10B981; }
.table-prog-fill.red { background: #EF4444; }
.table-prog-fill.gray { background: #D1D5DB; }
.table-prog-text {
    font-weight: 700;
    font-size: 0.85rem;
}
.table-prog-text.green { color: #10B981; }
.table-prog-text.red { color: #EF4444; }
.table-prog-text.gray { color: #9CA3AF; }

.table-score-sub { font-size: 0.7rem; color: #9CA3AF; margin-left: 4px;}
.table-score-delta { font-size: 0.7rem; font-weight: 600; margin-left: 6px; }
.table-score-delta.up { color: #10B981; }
.table-score-delta.down { color: #EF4444; }

/* Actions */
.btn-dots {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: #8B5CF6;
    color: #fff;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-dots:hover { background: #7C3AED; }

.btn-view-action {
    background: #EDE9FE;
    color: #7C3AED;
    border: none;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    transition: background 0.2s;
}
.btn-view-action:hover { background: #DDD6FE; }


/* --- Participant Profile & Score Journey --- */
.participant-profile-card {
    background: #F9FAFC;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 24px;
    flex-wrap: wrap;
    gap: 16px;
}
.ppc-left {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ppc-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.ppc-name {
    font-size: 1.25rem;
    font-weight: 800;
    color: #111827;
}
.ppc-meta {
    font-size: 0.85rem;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 12px;
}

.ppc-right {
    display: flex;
    align-items: center;
    gap: 32px;
}
.ppc-stat {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
.ppc-stat-label {
    font-size: 0.75rem;
    color: #6B7280;
    font-weight: 600;
    margin-bottom: 4px;
}
.ppc-stat-val {
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
}
.ppc-stat-val.green { color: #10B981; }

.score-journey-section {
    margin-bottom: 32px;
}
.sjs-title {
    font-size: 0.9rem;
    font-weight: 700;
    color: #111827;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}
.sjs-title span {
    font-weight: 500;
    color: #6B7280;
    font-size: 0.8rem;
}
.score-journey-graph {
    display: flex;
    align-items: center;
    gap: 20px;
    flex-wrap: wrap;
}
.sj-box {
    background: #fff;
    border: 1.5px solid #E5E7EB;
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 140px;
    position: relative;
}
.sj-box.failed { border-color: #FDA4AF; background: #FFF1F2; }
.sj-box.passed { border-color: #6EE7B7; background: #F0FDF4; }

.sj-circle {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    color: #fff;
    margin-bottom: 12px;
}
.sj-circle.red { background: #EF4444; }
.sj-circle.green { background: #10B981; }

.sj-score { font-size: 1.25rem; font-weight: 800; margin-bottom: 4px; }
.sj-score.red { color: #EF4444; }
.sj-score.green { color: #10B981; }

.sj-status { font-size: 0.8rem; font-weight: 600; margin-bottom: 12px; }
.sj-status.red { color: #EF4444; }
.sj-status.green { color: #10B981; }

.sj-date { font-size: 0.7rem; color: #9CA3AF; }

.sj-arrow { color: #9CA3AF; font-size: 1.2rem; }

.sj-badges {
    position: absolute;
    bottom: -10px;
    display: flex;
    gap: 4px;
}
.sj-badges .sm-badge { margin: 0; box-shadow: 0 2px 4px rgba(0,0,0,0.05); }

.sj-passing-line {
    margin-left: auto;
    border-left: 2px solid #D1D5DB;
    padding-left: 16px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.sj-passing-line .pl-title { font-size: 0.75rem; color: #6B7280; font-weight: 600; margin-bottom: 4px;}
.sj-passing-line .pl-val { font-size: 1rem; font-weight: 800; color: #111827; }
.sj-passing-line .pl-sub { font-size: 0.7rem; color: #9CA3AF; }

/* Attempt Circle in Table */
.attempt-circle {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
}
.attempt-circle.purple { background: #7C3AED; }
.attempt-circle.gray { background: #E5E7EB; color: #6B7280; }
.attempt-col-flex {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

/* Pagination */
.pagination-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 20px;
    border-top: 1px solid #E5E7EB;
    background: #fff;
    border-radius: 0 0 12px 12px;
}
.page-info { font-size: 0.85rem; color: #6B7280; }
.page-controls { display: flex; align-items: center; gap: 8px; }
.page-btn {
    width: 28px; height: 28px;
    border-radius: 6px;
    border: none;
    background: transparent;
    color: #6B7280;
    font-size: 0.85rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
}
.page-btn:hover { background: #F3F4F6; }
.page-btn.active { background: #7C3AED; color: #fff; }
.page-btn.disabled { opacity: 0.5; cursor: not-allowed; }
.page-rows-select {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: #6B7280;
}
.page-rows-select select {
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    padding: 2px 6px;
    font-size: 0.85rem;
}

/* Exam Overview Card (results-details.html) */
.exam-overview-card {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}
.eoc-icon {
    font-size: 2rem;
    color: #7C3AED;
}
.eoc-title-row {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 6px;
}
.eoc-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111827;
}
.eoc-meta {
    font-size: 0.85rem;
    color: #6B7280;
}

/* =======================================================
   Attempt Review Pages
   ======================================================= */

.attempt-review-page .page-content {
    padding: 20px 20px 24px;
    background: #fff;
}

.attempt-review-shell {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.attempt-review-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: 100%;
    min-width: 0;
}

.attempt-review-breadcrumb {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
    flex-wrap: wrap;
    font-size: 0.92rem;
    color: #7A7EA8;
    font-weight: 500;
}

.attempt-review-breadcrumb a {
    color: inherit;
    text-decoration: none;
}

.attempt-review-breadcrumb .current {
    color: #3E3D8F;
    font-weight: 700;
}

.attempt-review-tools {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-left: auto;
    min-width: 0;
}

.attempt-search {
    width: 272px;
    position: relative;
    flex-shrink: 0;
}

.attempt-search input {
    width: 100%;
    height: 32px;
    border: 1px solid #F0EFF7;
    border-radius: 14px;
    background: #F7F7FC;
    padding: 0 36px 0 34px;
    color: #41475E;
    font-size: 0.88rem;
    font-family: var(--font, 'Plus Jakarta Sans', sans-serif);
    outline: none;
}

.attempt-search input::placeholder {
    color: #C8CAD8;
}

.attempt-search .search-icon,
.attempt-search .shortcut {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #D0D3E0;
    font-size: 0.85rem;
    pointer-events: none;
}

.attempt-search .search-icon { left: 12px; }
.attempt-search .shortcut {
    right: 10px;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    border: 1px solid #ECECF4;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.72rem;
    color: #CDCFDB;
    background: #FBFBFD;
}

.attempt-icon-btn {
    border: none;
    background: transparent;
    color: #5856A6;
    font-size: 1rem;
    width: 28px;
    height: 28px;
    padding: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.attempt-user {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #1F2452;
    font-size: 0.92rem;
    font-weight: 500;
}

.attempt-user .avatar {
    width: 28px;
    height: 28px;
    border-width: 0;
}

.attempt-review-grid {
    display: grid;
    grid-template-columns: 286px minmax(0, 1fr);
    gap: 12px;
    align-items: start;
}

.attempt-review-left {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.attempt-profile-card {
    background: linear-gradient(180deg, #EEF3F9 0%, #EDF2F8 100%);
    border: 1px solid #E1E6EE;
    border-radius: 16px;
    padding: 18px 18px 16px;
    box-shadow: 0 2px 7px rgba(22, 29, 52, 0.06);
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
}

.attempt-profile-left {
    min-width: 0;
}

.attempt-profile-title {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.attempt-profile-title h2 {
    margin: 0;
    font-size: 1.16rem;
    line-height: 1.2;
    font-weight: 800;
    color: #1F2337;
}

.attempt-badge {
    padding: 3px 10px;
    border-radius: 999px;
    background: #D7F5E6;
    color: #1FA86C;
    font-size: 0.72rem;
    font-weight: 700;
}

.attempt-profile-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    color: #7E8597;
    font-size: 0.82rem;
}

.attempt-profile-meta .dot {
    color: #C7CAD6;
}

.attempt-profile-right {
    display: grid;
    grid-template-columns: repeat(3, minmax(68px, 1fr));
    gap: 18px;
    min-width: 286px;
}

.attempt-stat {
    text-align: center;
}

.attempt-stat .label {
    display: block;
    margin-bottom: 10px;
    color: #757B8D;
    font-size: 0.78rem;
    font-weight: 700;
}

.attempt-stat .value {
    display: block;
    color: #243046;
    font-size: 0.92rem;
    line-height: 1.2;
    font-weight: 800;
}

.attempt-stat .value.green {
    color: #04B26A;
    font-size: 1.02rem;
}

.attempt-summary-card,
.attempt-list-card {
    background: #fff;
    border: 1px solid #E5E7EE;
    border-radius: 18px;
    box-shadow: 0 2px 8px rgba(16, 24, 40, 0.05);
}

.attempt-summary-card {
    padding: 14px 16px 16px;
}

.attempt-list-card {
    padding: 14px 16px 16px;
    background: linear-gradient(180deg, #FBF8FF 0%, #FAF8FC 100%);
    border-color: #DDD3DE;
    min-height: 532px;
}

.attempt-card-label {
    color: #A0A7B8;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.attempt-score-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
}

.attempt-score {
    color: #17B26A;
    font-size: 1.98rem;
    line-height: 1;
    font-weight: 800;
    letter-spacing: -0.03em;
}

.attempt-score-sub {
    margin-top: 4px;
    color: #8B92A4;
    font-size: 0.82rem;
}

.attempt-pass {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 4px;
    min-width: 72px;
}

.attempt-pass .pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #10A66A;
    font-size: 0.84rem;
    font-weight: 700;
}

.attempt-pass .pass-sub {
    color: #A6ABBA;
    font-size: 0.76rem;
}

.attempt-progress {
    height: 8px;
    border-radius: 999px;
    background: #E8F7EF;
    overflow: hidden;
    margin: 12px 0 14px;
}

.attempt-progress .fill {
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(90deg, #18C88A 0%, #1FD39B 100%);
    width: 90%;
}

.attempt-meta-list {
    display: grid;
    gap: 8px;
}

.attempt-meta-item {
    display: flex;
    align-items: center;
    gap: 10px;
    color: #22304A;
    font-size: 0.82rem;
}

.attempt-meta-item .meta-label {
    color: #ABB1C0;
    width: 62px;
    flex-shrink: 0;
}

.attempt-meta-item .meta-value {
    color: #1F2537;
    font-weight: 500;
}

.attempt-question-list-head {
    margin-bottom: 12px;
}

.attempt-question-list-title {
    margin: 0 0 6px;
    color: #19186F;
    font-size: 1.36rem;
    line-height: 1.2;
    font-weight: 800;
}

.attempt-question-list-sub {
    color: #8C91A1;
    font-size: 0.78rem;
    font-weight: 700;
}

.attempt-question-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 10px;
}

.attempt-question-chip {
    width: 50px;
    height: 50px;
    border-radius: 10px;
    border: 1.5px solid #D6D3DD;
    background: #fff;
    color: #383640;
    font-size: 1.18rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.02);
}

.attempt-question-chip.correct {
    border-color: #18D28E;
    color: #0F8B60;
}

.attempt-question-chip.incorrect {
    border-color: #FF6767;
    background: #FFD6D6;
    color: #E5354C;
}

.attempt-question-chip.current {
    border-color: #0D63C2;
    color: #0D63C2;
}

.attempt-question-chip.dim {
    color: #8F9197;
}

.attempt-list-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 12px;
    flex-wrap: wrap;
    color: #565B73;
    font-size: 0.76rem;
}

.attempt-list-legend .legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.attempt-list-legend .legend-swatch {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.attempt-list-legend .legend-swatch.current { border: 1.5px solid #0D63C2; background: #fff; }
.attempt-list-legend .legend-swatch.correct { background: #18D28E; }
.attempt-list-legend .legend-swatch.incorrect { background: #F04444; }

.attempt-main {
    min-width: 0;
}

.attempt-main-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-top: 2px;
    margin-bottom: 8px;
}

.attempt-main-title {
    margin: 0 0 14px;
    color: #19186F;
    font-size: 1.34rem;
    font-weight: 800;
}

.attempt-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #7A7F8D;
    font-size: 0.78rem;
    font-weight: 500;
    flex-shrink: 0;
}

.attempt-legend .legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

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

.attempt-summary-line .question-label {
    color: #0C5FB6;
    font-size: 1rem;
    font-weight: 800;
}

.attempt-summary-line .question-meta {
    color: #7E8394;
    font-size: 0.86rem;
    font-weight: 500;
    text-align: right;
}

.attempt-question-panel {
    min-height: 702px;
    border: 1px solid #D2D3D7;
    border-radius: 22px;
    background: #fff;
    padding: 36px 36px 22px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 1px 2px rgba(15, 23, 42, 0.02);
}

.attempt-question-title {
    margin: 0 0 24px;
    color: #16156E;
    font-size: 1.96rem;
    line-height: 1.28;
    font-weight: 800;
    letter-spacing: -0.02em;
    max-width: 1000px;
}

.attempt-option-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 14px;
}

.attempt-option {
    min-height: 54px;
    border: 1.5px solid #D7D2DE;
    border-radius: 12px;
    background: #FBFAFD;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 18px 12px 24px;
    color: #161616;
    font-size: 1.16rem;
    font-weight: 500;
}

.attempt-option-left {
    display: flex;
    align-items: center;
    gap: 14px;
    min-width: 0;
}

.attempt-radio {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    border: 1.5px solid #8EAFE0;
    background: #fff;
    box-shadow: inset 0 0 0 3px #fff;
    flex-shrink: 0;
}

.attempt-option.selected {
    border-color: #1D64C2;
    background: #F8FBFF;
}

.attempt-option.correct {
    border-color: #20D694;
    background: #F5FFFA;
}

.attempt-option .option-state {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: #0F8B60;
    font-size: 0.94rem;
    font-weight: 700;
    white-space: nowrap;
}

.attempt-option .option-state i {
    font-size: 1rem;
}

.attempt-option .option-state.error {
    color: #FF5A5A;
}

.attempt-fill-content {
    padding-top: 6px;
}

.attempt-fill-prompt {
    font-size: 1.94rem;
    font-weight: 800;
    line-height: 1.38;
    color: #16156E;
    margin: 0 0 24px;
}

.attempt-fill-sentence {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #19186F;
    font-size: 1.92rem;
    line-height: 1.4;
    font-weight: 800;
}

.attempt-slot {
    min-width: 176px;
    min-height: 100px;
    padding: 16px 22px 14px;
    border-radius: 8px;
    border: 1.5px solid #FF7878;
    background: #FFCCCC;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #0C5FB6;
    font-size: 1.72rem;
    font-weight: 500;
}

.attempt-slot .slot-state {
    margin-top: 8px;
    color: #FF4747;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.attempt-choice-rail {
    display: flex;
    justify-content: center;
    gap: 34px;
    margin-top: 66px;
    margin-bottom: 6px;
}

.attempt-choice-pill {
    min-width: 173px;
    height: 62px;
    border-radius: 8px;
    border: 1.5px solid #D8D5E0;
    background: #FAF9FC;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #363338;
    font-size: 1.5rem;
    font-weight: 500;
}

.attempt-reorder-list {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 4px;
}

.attempt-reorder-item {
    min-height: 76px;
    border-radius: 12px;
    border: 1.5px solid #2AD69B;
    background: #F6FFF9;
    display: flex;
    align-items: center;
    gap: 18px;
    padding: 14px 22px;
    color: #111111;
    font-size: 1.18rem;
    font-weight: 500;
}

.attempt-grip {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    color: #595959;
}

.attempt-explanation {
    margin-top: 28px;
}

.attempt-explanation-btn {
    width: 100%;
    min-height: 60px;
    border: 1.5px solid #D9DFFF;
    border-radius: 12px;
    background: #fff;
    color: #2A335B;
    font-size: 0.98rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 0 20px 0 24px;
}

.attempt-explanation-btn .left {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.attempt-explanation-btn .left i {
    color: #0E60B5;
    font-size: 1.08rem;
}

.attempt-nav {
    margin-top: auto;
    padding-top: 22px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.attempt-nav .attempt-btn {
    height: 48px;
    min-width: 162px;
    border-radius: 12px;
    padding: 0 22px;
    font-size: 1rem;
    font-weight: 700;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
}

.attempt-nav .attempt-btn.prev {
    background: #fff;
    border-color: #D6D6DC;
    color: #74809A;
}

.attempt-nav .attempt-btn.prev.active {
    border-color: #4D8BE0;
    color: #0C5FB6;
}

.attempt-nav .attempt-btn.next {
    background: #0E60B5;
    color: #fff;
}

.attempt-nav .attempt-btn.next:hover {
    background: #0B56A2;
    color: #fff;
}

.attempt-nav .attempt-btn:disabled {
    opacity: 1;
}

@media (max-width: 1280px) {
    .attempt-search {
        width: 232px;
    }

    .attempt-review-grid {
        grid-template-columns: 270px minmax(0, 1fr);
    }

    .attempt-question-panel {
        min-height: 664px;
    }
}

@media (max-width: 1100px) {
    .attempt-review-grid {
        grid-template-columns: 1fr;
    }

    .attempt-review-left {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .attempt-list-card {
        min-height: 0;
    }

    .attempt-review-profile {
        flex-direction: column;
    }

    .attempt-profile-right {
        width: 100%;
        min-width: 0;
    }
}

@media (max-width: 991px) {
    .attempt-review-tools {
        gap: 10px;
    }

    .attempt-search {
        width: 200px;
    }

    .attempt-question-panel {
        min-height: 620px;
        padding: 30px 26px 20px;
    }

    .attempt-question-title,
    .attempt-fill-prompt {
        font-size: 1.65rem;
    }

    .attempt-fill-sentence {
        font-size: 1.58rem;
    }
}

@media (max-width: 767px) {
    .attempt-review-page .page-content {
        padding: 16px 14px 18px;
    }

    .attempt-review-topbar {
        flex-direction: column;
        flex-wrap: wrap;
        align-items: flex-start;
    }

    .attempt-review-breadcrumb {
        width: 100%;
        order: 2;
        font-size: 0.84rem;
        line-height: 1.35;
    }

    .attempt-review-tools {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
        order: 3;
    }

    .attempt-search {
        display: none;
    }

    .attempt-user {
        margin-left: auto;
    }

    .attempt-user span {
        display: none;
    }

    .attempt-profile-card {
        flex-direction: column;
        padding: 16px 14px 14px;
    }

    .attempt-profile-right {
        width: 100%;
        grid-template-columns: 1fr;
        gap: 10px;
    }

    .attempt-review-left {
        grid-template-columns: 1fr;
    }

    .attempt-stat .label {
        font-size: 0.7rem;
        margin-bottom: 4px;
    }

    .attempt-stat .value {
        font-size: 0.84rem;
    }

    .attempt-summary-line {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .attempt-summary-line .question-meta {
        text-align: left;
    }

    .attempt-question-panel {
        min-height: 0;
        padding: 22px 14px 16px;
    }

    .attempt-option {
        padding-left: 18px;
        padding-right: 16px;
        font-size: 1rem;
    }

    .attempt-question-title,
    .attempt-fill-prompt {
        font-size: 1.34rem;
    }

    .attempt-fill-sentence {
        font-size: 1.26rem;
        gap: 8px;
    }

    .attempt-choice-rail {
        gap: 10px;
        flex-wrap: wrap;
        margin-top: 26px;
    }

    .attempt-choice-pill {
        min-width: 0;
        flex: 1 1 calc(50% - 5px);
        font-size: 1.1rem;
    }

    .attempt-nav {
        flex-direction: column;
        align-items: stretch;
    }

    .attempt-nav .attempt-btn {
        width: 100%;
    }
}