/* MCode learning workspace. Loaded after legacy component styles. */
/* Resource names belong in the visible card header, not below a decorative cover. */
.bank-card-top:has(.bank-exam-title) { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px; }
.bank-card-top .bank-exam-title { display: block; margin: 0; color: #20364f; font-size: 16px; line-height: 1.65; overflow-wrap: anywhere; }
:root{--bg:#f6f8fb;--text:#202c40;--muted:#748094;--line:#e6eaf0;--primary:#167d83;--primary-dark:#10656b;--surface-muted:#edf7f6;--radius:12px;--shadow:0 3px 14px #24324b05;--shadow-soft:0 2px 8px #24324b04}
body{background:var(--bg);padding-left:232px;font-family:Inter,"Segoe UI","Microsoft JhengHei",sans-serif;font-size:14px;line-height:1.65}
.topbar{width:232px;padding:30px 18px 18px;gap:24px;box-shadow:none;background:#fff;backdrop-filter:none}
.brand{padding:0 10px 28px;gap:10px}.brand strong{font-size:23px;letter-spacing:-.7px}.brand small{font-size:10px;letter-spacing:1.5px;margin-top:8px}.brand-mark{width:37px;height:37px;flex-basis:37px;border-radius:11px;box-shadow:none}
.nav-actions{gap:6px;align-items:stretch}.nav-section-label{font-size:10px;letter-spacing:1.5px;color:#929aab;padding:0 14px 12px}.nav-link,.nav-group summary{min-height:45px;border:0;border-radius:8px;background:transparent;color:#6d788a;font-size:13px;font-weight:500;box-shadow:none}.nav-link:hover,.nav-group summary:hover{background:#f4f7fa;transform:none}.nav-link.is-active,.nav-group.is-active>summary{background:#eaf5f3;color:#126e72;box-shadow:none;border:0}.nav-label{gap:13px}.nav-group{background:none;border:0;box-shadow:none}.nav-submenu{border:0;padding-left:26px}.nav-sub-link{font-size:12px}.nav-sub-link.is-active{background:#edf7f6;color:var(--primary)}
.sidebar-account{display:flex;align-items:center;gap:10px;margin-top:auto;padding:24px 8px 8px;border-top:1px solid var(--line)}.sidebar-account strong,.sidebar-account small{display:block}.sidebar-account strong{font-size:12px}.sidebar-account small{font-size:10px;color:var(--muted)}.avatar{display:inline-grid;place-items:center;flex-shrink:0;width:36px;height:36px;border-radius:50%;background:#e9eef8;color:#536990;font-weight:700}.nav-link-logout{margin-top:0;color:#8992a3;font-size:12px}
.workspace-bar{height:70px;display:flex;align-items:center;justify-content:space-between;padding:0 38px;background:#ffffffd9;border-bottom:1px solid var(--line);font-size:12px;color:#6e7b8d}.breadcrumb-separator{color:#bcc3cd;margin:0 14px}.workspace-badge{font-size:11px;border:1px solid var(--line);padding:4px 11px;border-radius:6px}
.page{width:100%;max-width:1480px;margin:0 auto;padding:32px 38px 48px;min-height:calc(100vh - 125px)}.page-heading{margin-bottom:27px;padding:0;background:none;border:0;box-shadow:none;align-items:center}.page-heading:before{display:none}.page-heading h1{font-size:28px;line-height:1.4;letter-spacing:-.7px;margin:2px 0 8px}.page-heading p{color:var(--muted);font-size:13px;line-height:1.7}.eyebrow{font-size:10px!important;letter-spacing:2px;text-transform:uppercase;color:var(--primary)!important;font-weight:700;margin-bottom:6px!important}
.panel,.question-card,.stat-card,.action-item{border:1px solid var(--line);box-shadow:none;background:#fff;border-radius:12px}.panel::before,.stat-card::before,.action-item::before,.question-card::before{display:none}.panel{padding:24px}.panel h2{font-size:16px;margin:0 0 16px}.panel p{line-height:1.8}.stat-grid{gap:16px;margin-bottom:26px;grid-template-columns:repeat(auto-fit,minmax(140px,1fr))}.stat-card{padding:20px 22px;min-height:105px}.stat-card strong{font-size:29px;color:var(--text);margin-top:9px;font-weight:650}.stat-card span{font-size:12px;color:var(--muted)}
.button{min-height:40px;padding:9px 17px;font-size:12px;font-weight:600;border-radius:7px;box-shadow:none;gap:8px}.button:hover{transform:none;box-shadow:0 3px 8px #20334b0d}.button-primary{background:var(--primary);border-color:var(--primary)}.button-primary:hover{background:var(--primary-dark)}.button-light{background:#fff;border:1px solid var(--line);color:#576477}.button-dark{background:#243650;border-color:#243650}.button .app-icon{width:17px;height:17px}.pill{font-size:10px;font-weight:500;background:#edf6f5;color:#16777a;border:0;padding:4px 9px;border-radius:5px}.footer{font-size:10px;border-top:1px solid var(--line);padding:16px 38px;margin:0;color:#929baa}.app-icon{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.learning-hero{display:flex;justify-content:space-between;gap:25px;align-items:center;background:#20364f;color:#fff;border-radius:14px;padding:30px 34px;margin-bottom:25px;overflow:hidden;position:relative}.learning-hero .eyebrow{color:#81c7c0!important}.learning-hero h2{font-size:25px;line-height:1.5;margin:6px 0 9px;font-weight:600}.learning-hero p{font-size:12px;color:#b9c9d9;margin:0 0 22px;max-width:430px}.learning-hero .button-primary{background:#b7e5d6;color:#204c46;border-color:#b7e5d6}.hero-art{width:215px;height:155px;position:relative;flex-shrink:0;display:grid;place-items:center}.hero-orbit{position:absolute;width:158px;height:158px;border:1px solid #ffffff18;border-radius:50%}.hero-orbit:after{content:'';position:absolute;inset:-24px;border:1px solid #ffffff0b;border-radius:50%}.code-tile{transform:rotate(-8deg);border:1px solid #ffffff25;background:#ffffff0c;border-radius:16px;padding:20px 25px;color:#b7e5d6;font:600 42px Consolas,monospace;box-shadow:12px 16px 0 #0d223633}.hero-tag{position:absolute;right:0;bottom:11px;background:#f8fbff;color:#47708c;font-size:11px;border-radius:7px;padding:7px 12px;transform:rotate(5deg)}
.dashboard-columns{display:grid;grid-template-columns:minmax(0,1fr) 292px;gap:24px;align-items:start}.section-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:0 0 17px}.section-heading h2{font-size:16px;margin:0}.section-heading a,.text-link{color:var(--primary);font-size:12px;font-weight:600}.section-caption{font-size:12px;color:var(--muted);margin:-8px 0 20px}.dashboard-main>.panel{margin-bottom:24px}.count-badge{background:#f1f4f8;color:#7d8a9b;font-size:10px;padding:3px 7px;border-radius:5px;margin-left:7px;vertical-align:middle}
.assignment-row{display:flex;gap:16px;align-items:center;padding:19px 0;border-top:1px solid #eef1f5}.assignment-icon{width:40px;height:44px;display:grid;place-items:center;border-radius:9px;background:#eef3fc;color:#5d79a5;flex-shrink:0}.assignment-copy{flex:1;min-width:0}.assignment-copy h3{font-size:13px;margin:0 0 5px;overflow-wrap:anywhere}.assignment-copy p{font-size:11px;color:var(--muted);margin:0}.assignment-copy .due{color:#b78245}.assignment-row .button{min-height:34px;padding:6px 12px;font-size:11px;white-space:nowrap}.empty-learning{text-align:center;padding:30px 18px;background:#fafbfd;border:1px dashed #e4e9f0;border-radius:9px}.empty-learning .app-icon{width:32px;height:32px;color:#9bafc1;margin-bottom:10px}.empty-learning h3{font-size:14px;margin:0 0 6px}.empty-learning p{font-size:12px;color:var(--muted);margin:0 0 14px}
.practice-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:15px}.practice-shortcut{display:block;padding:20px;border:1px solid var(--line);border-radius:10px;transition:border-color .15s,transform .15s}.practice-shortcut:hover{border-color:#8ebfb8;transform:translateY(-2px)}.practice-shortcut .shortcut-symbol{width:37px;height:37px;border-radius:10px;display:grid;place-items:center;background:#e9f5ef;color:#539379;margin-bottom:18px;font:600 14px Consolas,monospace}.practice-shortcut:nth-child(2) .shortcut-symbol{background:#eef0fc;color:#7c7cb4}.practice-shortcut h3{font-size:14px;margin:0 0 5px}.practice-shortcut p{font-size:11px;color:var(--muted);margin:0 0 18px}.practice-shortcut .text-link{font-size:11px}
.dashboard-aside{display:grid;gap:20px}.dashboard-aside .panel{padding:22px;margin:0}.review-count{display:flex;align-items:baseline;gap:8px;margin:18px 0 10px}.review-count strong{font-size:38px;line-height:1.2}.review-count span{font-size:12px;color:var(--muted)}.aside-note{font-size:12px;color:var(--muted);line-height:1.9}.full-width{width:100%}.result-line{display:flex;gap:12px;align-items:center;border-top:1px solid var(--line);padding:15px 0}.result-line:last-child{padding-bottom:0}.result-line div{flex:1;min-width:0}.result-line h3{font-size:12px;font-weight:500;margin:0 0 3px;overflow-wrap:anywhere}.result-line small{font-size:10px;color:var(--muted)}.result-line strong{font-size:16px;color:#357f79;white-space:nowrap}.level-dot{width:7px;height:7px;background:#78b5a6;border-radius:50%;flex-shrink:0}
.filter-panel{display:flex;gap:12px;align-items:end;flex-wrap:wrap;margin-bottom:25px;background:white;border:1px solid var(--line);padding:19px 22px;border-radius:10px}.filter-panel label{display:grid;gap:6px;font-size:11px;color:var(--muted)}.filter-panel .search-field{flex:1;min-width:180px}.filter-panel input,.filter-panel select{min-height:42px;border:1px solid var(--line);background:#fafbfd;border-radius:7px;padding:8px 12px;min-width:125px;font:inherit;color:var(--text)}
.bank-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:19px}.bank-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden}.bank-card-top{padding:23px 23px 17px;background:#f0f6f5;display:flex;align-items:center;justify-content:space-between;color:#579289}.bank-card:nth-child(even) .bank-card-top{background:#f1f3fa;color:#7c89af}.bank-card-top .code-mark{font:600 24px Consolas,monospace}.bank-card-content{padding:23px;display:flex;flex-direction:column;flex:1}.bank-card h2{font-size:15px;line-height:1.7;margin:0 0 13px}.bank-meta{display:flex;gap:12px;font-size:11px;color:var(--muted);margin-bottom:22px}.bank-card form{margin-top:auto;display:flex;gap:8px}.bank-card select{width:85px;border:1px solid var(--line);border-radius:7px;font-size:11px;padding:7px}.bank-card .button{flex:1}.resume-strip{display:flex;align-items:center;justify-content:space-between;gap:16px;background:#eaf5f2;border:1px solid #d9ebe5;border-radius:9px;padding:15px 20px;margin-bottom:22px;font-size:12px}
.exam-shell{grid-template-columns:minmax(0,1fr) 232px;gap:24px}.exam-progress-panel{grid-column:2;grid-row:1;top:24px;padding:20px;gap:15px;box-shadow:none}.exam-form{grid-column:1;grid-row:1;min-width:0}.exam-progress-panel h2{font-size:14px}.exam-progress-summary{background:#f0f7f6;border:0;padding:12px}.exam-progress-muted{background:#f7f8fa}.exam-progress-summary strong{color:var(--primary)}.question-progress-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.question-progress-item{padding:8px 0;min-height:35px;border-radius:6px;background:#f7f9fc;border:1px solid #e5eaf0;box-shadow:none;text-align:center}.question-progress-item strong{font-size:12px}.question-progress-item span{display:none}.question-progress-item.is-active{border-color:var(--primary);background:#fff;color:var(--primary)}.question-progress-item.is-answered{background:#dff0e9;color:#28796a;border-color:#dff0e9}.question-progress-item.is-unanswered{background:#f7f9fc;color:#8190a2;border-color:#e5eaf0}.question-card{padding:32px;margin:0}.question-card h2{font-size:18px;line-height:1.95;font-weight:550;white-space:normal;overflow-wrap:anywhere;margin:22px 0 27px}.question-meta{gap:8px}.question-meta span{background:#f2f5f9;border:0;border-radius:5px;font-size:10px;font-weight:500;color:#72839a}.option-list{gap:12px}.option-item{padding:16px 18px;border:1px solid var(--line);border-radius:8px;min-height:57px;background:white;font-size:14px;cursor:pointer;transition:background .15s,border-color .15s}.option-item:hover{background:#f8fbfb;border-color:#a7c7c1}.option-item:has(input:checked){background:#eef8f5;border-color:#569b8e;box-shadow:0 0 0 1px #569b8e}.option-item input{accent-color:var(--primary)}.option-content{line-height:1.8}.exam-step-actions{justify-content:flex-end;margin-top:17px;border:0;box-shadow:none;padding:15px 0;background:transparent;flex-wrap:wrap}.timer{background:#fff;border:1px solid var(--line);box-shadow:none;padding:12px 20px;min-width:140px;border-radius:10px}.timer strong{font:600 24px Consolas,monospace;color:var(--text)}.timer span{font-size:10px;color:var(--muted)}.timer-danger strong{color:#be5959}.exam-unanswered-list{font-size:11px;color:var(--muted);line-height:1.8}
.practice-feedback{margin-top:25px;padding:20px;border:1px solid #cce4d9;border-radius:9px;background:#f1faf5}.practice-feedback.wrong{background:#fff8f2;border-color:#f1dfc8}.practice-feedback h3{font-size:14px;margin:0 0 9px}.practice-feedback p{font-size:13px;line-height:1.9;white-space:pre-wrap;margin:9px 0}.practice-feedback small{color:var(--muted)}.progress-track{width:100%;height:5px;border:0;background:#edf1f5;border-radius:5px;overflow:hidden}.progress-track::-webkit-progress-bar{background:#edf1f5}.progress-track::-webkit-progress-value{background:#459b89}.practice-complete{text-align:center;padding:48px 30px}.practice-complete .score-large{font-size:60px;letter-spacing:-3px;color:var(--primary);font-weight:650;line-height:1.3}.practice-complete h2{font-size:24px}.practice-complete .heading-actions{justify-content:center;margin-top:25px}.history-table td,.history-table th{font-size:12px}.history-table td{padding:18px 14px}table th{background:#f7f9fc;font-size:11px;color:#8791a1}table td{font-size:12px;border-color:#edf0f4}.action-grid{gap:18px}.action-item{padding:24px}.action-item:hover{transform:translateY(-2px);box-shadow:none}.action-item h3{font-size:16px}.action-item p{font-size:12px;color:var(--muted)}.action-kicker{color:var(--primary);font-size:10px}
:focus-visible{outline:3px solid #72bbae;outline-offset:3px}.login-body{padding-left:0}.login-body .page{min-height:100vh}.login-body .footer{display:none}
@media(min-width:1600px){.page{padding-top:42px}.learning-hero{padding:36px 40px}}
@media(max-width:1200px){.dashboard-columns{grid-template-columns:minmax(0,1fr) 250px}.page{padding:28px}.bank-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-art{width:155px}.workspace-bar{padding:0 28px}}
@media(max-width:1050px){.dashboard-columns{grid-template-columns:1fr}.dashboard-aside{grid-template-columns:1fr 1fr}.hero-art{width:175px}.exam-shell{grid-template-columns:minmax(0,1fr) 185px}.exam-progress-panel{padding:15px}.question-card{padding:24px}}
@media(max-width:880px){body{padding-left:0}.topbar{width:100%;height:66px;padding:10px 18px;gap:12px}.brand{padding:0;border:0}.brand strong{font-size:20px}.brand small{font-size:9px;margin-top:4px}.brand-mark{width:35px;height:35px;flex-basis:35px}.workspace-bar{height:47px;padding:0 20px;font-size:11px}.workspace-badge{font-size:10px}.page{padding:25px 20px 35px}.nav-actions{box-shadow:none;border:0}.sidebar-account{margin-top:20px}.page-heading h1{font-size:24px}.exam-shell{grid-template-columns:1fr}.exam-progress-panel{grid-column:1;grid-row:2;position:static}.exam-form{grid-column:1;grid-row:1}.question-progress-grid{grid-template-columns:repeat(8,minmax(0,1fr))}.learning-hero{padding:27px}.footer{padding:15px 20px}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.page{padding:21px 16px 30px}.page-heading{align-items:flex-start;gap:14px}.page-heading h1{font-size:23px}.page-heading p{font-size:12px}.hero-art{display:none}.learning-hero{padding:25px}.learning-hero h2{font-size:22px}.dashboard-aside,.bank-grid{grid-template-columns:1fr}.practice-shortcuts{gap:10px}.practice-shortcut{padding:16px}.panel{padding:19px}.dashboard-columns{gap:18px}.stat-card{padding:16px;min-height:95px}.stat-card strong{font-size:25px}.assignment-row{gap:10px;flex-wrap:wrap}.assignment-copy{min-width:160px}.assignment-row .button{margin-left:50px}.filter-panel{padding:16px;gap:10px}.filter-panel .search-field{flex-basis:100%}.filter-panel label:not(.search-field){flex:1}.filter-panel select{width:100%;min-width:100px}.bank-card-content{padding:20px}.question-card{padding:21px}.question-card h2{font-size:16px}.option-item{padding:13px}.question-progress-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.resume-strip{flex-wrap:wrap}.exam-step-actions{justify-content:flex-start}.heading-actions{flex-wrap:wrap}.practice-complete{padding:35px 20px}.workspace-badge{display:none}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}

.pagination{display:flex;gap:8px;align-items:center;margin:28px 0;flex-wrap:wrap}.option-content{display:flex;flex-wrap:wrap;gap:10px;align-items:baseline}.option-content>span{flex:1;min-width:120px}.option-content>.option-image{flex-basis:100%;max-width:100%}.question-progress-item.is-active{outline:2px solid #559f91;outline-offset:1px}.stat-card:nth-child(n) strong{color:#285e64}.stat-card:nth-child(3) strong{color:#586783}

.classroom-banner{background:#254858;padding:26px;color:#fff;min-height:155px}.classroom-banner .eyebrow{color:#94c9bc!important}.classroom-banner h2{font-size:23px;color:#fff;margin:10px 0}.classroom-banner>span:last-child{font-size:11px;color:#c6dbdf}.classroom-card:nth-child(even) .classroom-banner{background:#4d527a}.classroom-metrics{display:flex;gap:35px;margin-bottom:16px}.classroom-metrics strong,.classroom-metrics span{display:block}.classroom-metrics strong{font-size:24px}.classroom-metrics span{font-size:11px;color:var(--muted)}#exam-list+#assigned-exams{margin-top:30px}

/* Focused practice: compact chrome and spacing without clipping long questions. */
.practice-focus .workspace-bar, .practice-focus .footer { display: none; }
.practice-focus .page { padding: 16px 24px; min-height: 100vh; }
.practice-focus .page-heading { margin-bottom: 14px; gap: 12px; }
.practice-focus .page-heading .eyebrow { display: none; }
.practice-focus .page-heading h1 { font-size: 20px; margin: 0 0 3px; }
.practice-focus .page-heading p { margin: 0; font-size: 12px; line-height: 1.5; }
.practice-focus .exam-shell { gap: 18px; grid-template-columns: minmax(0, 1fr) 214px; }
.practice-focus .question-card { padding: 20px 24px; }
.practice-focus .question-card h2 { font-size: 17px; line-height: 1.6; margin: 12px 0 16px; }
.practice-focus .option-list { gap: 8px; }
.practice-focus .option-item { min-height: 43px; padding: 10px 14px; }
.practice-focus .option-content { line-height: 1.5; }
.practice-focus .question-image { max-height: 210px; max-width: 100%; width: auto; object-fit: contain; margin: 8px 0 12px; }
.practice-focus .option-image { max-height: 125px; width: auto; object-fit: contain; }
.practice-controls { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.practice-controls .button:first-child:not(:last-child) { margin-right: auto; }
.practice-focus .exam-progress-panel { top: 16px; padding: 16px; gap: 10px; }
.practice-focus .question-progress-grid { grid-template-columns: repeat(5,minmax(0,1fr)); gap: 6px; max-height: min(340px, 52vh); }
.practice-focus .question-progress-item { min-height: 30px; padding: 5px 0; }
.practice-focus .exam-progress-panel .aside-note { margin: 0; font-size: 11px; line-height: 1.6; }
@media (max-width: 880px) {
    .practice-focus .page { padding: 12px 16px 20px; min-height: calc(100vh - 66px); }
    .practice-focus .exam-shell { grid-template-columns: 1fr; }
    .practice-focus .question-card { padding: 16px; }
    .practice-focus .page-heading { flex-direction: row; align-items: center; }
    .practice-focus .page-heading>div { min-width: 0; }
    .practice-focus .page-heading h1 { font-size: 18px; }
    .practice-focus .page-heading .button { flex-shrink: 0; padding: 7px 10px; }
    .practice-focus .question-card h2 { font-size: 16px; margin: 10px 0 12px; }
    .practice-focus .exam-progress-panel { position: static; }
    .practice-focus .question-progress-grid { grid-template-columns: repeat(8,minmax(0,1fr)); }
}
.practice-map { min-width: 0; }
.practice-map summary { cursor: pointer; font-size: 13px; font-weight: 600; }
.practice-map-content { display: grid; gap: 10px; margin-top: 12px; }
@media (max-width: 880px) {
    .practice-focus .exam-progress-panel { grid-row: 1; padding: 10px 14px; }
    .practice-focus .exam-form { grid-row: 2; }
    .practice-focus .exam-shell { gap: 10px; }
}