:root {
  --ink: #172033;
  --muted: #6b7280;
  --surface: #ffffff;
  --canvas: #f4f6f9;
  --sidebar: #172033;
  --accent: #3f67e8;
}

body {
  margin: 0;
  color: var(--ink);
  background: var(--canvas);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
.fw-semibold { font-weight: 600; }
.text-secondary { color: var(--muted); }
.ms-2 { margin-left: .5rem; }
.mt-4 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-3 { margin-bottom: 1rem; }
.mb-4 { margin-bottom: 1.5rem; }
.py-2 { padding-top: .5rem; padding-bottom: .5rem; }
.w-100 { width: 100%; }
.nav { display: flex; }
.flex-column { flex-direction: column; }
.btn { display: inline-block; border: 1px solid transparent; border-radius: 7px; padding: .55rem .85rem; font: inherit; line-height: 1.25; cursor: pointer; }
.btn-sm { padding: .35rem .65rem; font-size: .875rem; }
.btn-primary { color: #fff; background: var(--accent); border-color: var(--accent); }
.btn-outline-secondary { color: #586174; background: #fff; border-color: #b8c0cf; }
.form-label { display: inline-block; margin-bottom: .45rem; font-weight: 600; }
.form-control { display: block; width: 100%; padding: .65rem .75rem; border: 1px solid #bdc5d4; border-radius: 7px; font: inherit; background: #fff; }
.form-control:focus { border-color: var(--accent); outline: 3px solid rgba(63,103,232,.14); }
.alert { border: 1px solid transparent; border-radius: 7px; padding-left: .85rem; padding-right: .85rem; margin-bottom: 1rem; }
.alert-danger { color: #8c2633; background: #fff0f2; border-color: #f2c3c9; }
.badge { display: inline-block; padding: .3em .55em; border-radius: 6px; font-size: .75em; font-weight: 700; }
.text-bg-success { color: #fff; background: #268453; }
.row { display: grid; grid-template-columns: minmax(110px, 1fr) 3fr; row-gap: 12px; }
.row dt, .row dd { margin: 0; }

.app-shell { min-height: 100vh; display: flex; }
.sidebar { width: 230px; background: var(--sidebar); color: #fff; padding: 28px 20px; }
.brand { color: #fff; font-size: 1.2rem; font-weight: 700; text-decoration: none; }
.role-label { color: #9eabc5; font-size: .875rem; margin-top: 8px; }
.sidebar .nav-link { color: #c9d1e4; border-radius: 8px; padding: 10px 12px; }
.sidebar .nav-link.active, .sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.1); }
.main-area { flex: 1; min-width: 0; }
.topbar { min-height: 68px; background: var(--surface); border-bottom: 1px solid #e6e9ef; padding: 16px 32px; display: flex; align-items: center; justify-content: space-between; }
.content-area { width: 100%; max-width: 1440px; padding: 44px 40px 64px; }
.page-heading { margin-bottom: 28px; }
.page-heading h1 { font-size: 1.8rem; font-weight: 700; }
.page-heading p:last-child { color: var(--muted); }
.eyebrow { color: var(--accent); font-weight: 700; font-size: .8rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.info-card { background: var(--surface); border: 1px solid #e6e9ef; border-radius: 12px; padding: 24px; box-shadow: 0 8px 24px rgba(23,32,51,.04); }
.info-card h2 { font-size: 1.1rem; margin-bottom: 20px; }

.login-page { min-height: 100vh; display: grid; place-items: center; padding: 24px; background: linear-gradient(135deg, #edf1ff, #f8f9fc 55%); }
.login-card { width: min(420px, 100%); background: #fff; border: 1px solid #e3e7f0; border-radius: 16px; padding: 34px; box-shadow: 0 18px 50px rgba(34,49,92,.12); }
.login-heading { display: flex; gap: 14px; align-items: center; margin-bottom: 28px; }
.login-heading h1 { font-size: 1.35rem; margin: 0 0 3px; }
.login-heading p { color: var(--muted); font-size: .875rem; margin: 0; }
.login-mark { width: 48px; height: 48px; display: grid; place-items: center; border-radius: 12px; color: #fff; background: var(--accent); font-weight: 800; }

/* Student paper center: original blue-violet workspace theme. */
.student-workspace {
  --student-accent: #6558e8;
  --student-accent-dark: #4c43bd;
  --student-blue: #4d7ce8;
  --student-teal: #1b9d93;
  display: grid;
  gap: 24px;
}
.student-hero {
  position: relative;
  overflow: hidden;
  min-height: 190px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 38px 42px;
  color: #fff;
  border-radius: 22px;
  background: linear-gradient(125deg, #5146c9 0%, #6c5ceb 52%, #4e7ee8 100%);
  box-shadow: 0 18px 44px rgba(74, 65, 178, .2);
}
.student-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 0%, rgba(255,255,255,.2), transparent 32%);
  pointer-events: none;
}
.student-hero > div:first-child { position: relative; z-index: 1; max-width: 680px; }
.student-hero h1 { margin: 5px 0 12px; font-size: clamp(1.55rem, 2.8vw, 2.25rem); line-height: 1.35; }
.student-hero p { margin: 0; color: rgba(255,255,255,.78); }
.student-hero .student-kicker { color: rgba(255,255,255,.78); }
.student-kicker { margin: 0 0 5px; color: var(--student-accent); font-size: .75rem; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; }
.hero-orbit { position: relative; width: 148px; height: 110px; flex: 0 0 148px; }
.hero-orbit::before, .hero-orbit::after { content: ""; position: absolute; border: 1px solid rgba(255,255,255,.34); border-radius: 50%; transform: rotate(-18deg); }
.hero-orbit::before { inset: 4px 0 20px; }
.hero-orbit::after { inset: 24px 14px 0; transform: rotate(27deg); }
.hero-orbit span { position: absolute; width: 13px; height: 13px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 6px rgba(255,255,255,.13); }
.hero-orbit span:nth-child(1) { left: 7px; top: 40px; }
.hero-orbit span:nth-child(2) { right: 15px; top: 15px; width: 20px; height: 20px; background: #bde8ff; }
.hero-orbit span:nth-child(3) { right: 46px; bottom: 0; background: #d9d3ff; }

.student-stat-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.student-stat-card { display: flex; align-items: center; gap: 17px; min-height: 112px; padding: 23px; border: 1px solid #e9eaf1; border-radius: 16px; background: #fff; box-shadow: 0 8px 24px rgba(31,39,77,.05); }
.student-stat-card > div { display: grid; gap: 3px; min-width: 0; }
.student-stat-card strong { font-size: 1.65rem; line-height: 1.1; }
.student-stat-card strong small { color: #9096a7; font-size: .9rem; }
.student-stat-card .stat-text-value { font-size: 1rem; }
.student-stat-card > div > span { color: var(--muted); font-size: .88rem; }
.stat-mark { width: 48px; height: 48px; flex: 0 0 48px; display: grid; place-items: center; border-radius: 14px; font-size: .8rem; font-weight: 800; }
.stat-mark-purple { color: #5a4ed1; background: #efedff; }
.stat-mark-blue { color: #3f6bc9; background: #eaf1ff; }
.stat-mark-teal { color: #16867d; background: #e5f7f4; }
.stat-mark-wrong { color: #a63c50; background: #ffedf0; }
.stat-card-link { color: #554bc4; font-size: .7rem; font-weight: 700; text-decoration: none; }
.stat-card-link:hover { text-decoration: underline; }

.student-section { padding: 28px; border: 1px solid #e9eaf1; border-radius: 18px; background: #fff; box-shadow: 0 8px 26px rgba(31,39,77,.045); }
.student-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-bottom: 22px; }
.student-section-heading h2 { margin: 0; font-size: 1.3rem; }
.result-count { color: var(--muted); font-size: .85rem; }
.paper-filter-card { margin-bottom: 30px; padding: 17px 18px; border: 1px solid #eaebf2; border-radius: 14px; background: #fafbfe; }
.subject-filter { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 15px; border-bottom: 1px solid #e8eaf1; }
.filter-chip { position: relative; display: inline-flex; align-items: center; min-height: 34px; padding: 6px 14px; border: 1px solid transparent; border-radius: 999px; color: #626a7e; background: transparent; font: inherit; font-size: .85rem; cursor: pointer; }
.filter-chip:hover, .filter-chip:focus-visible { color: var(--student-accent-dark); background: #f0eeff; }
.filter-chip.is-active { color: #fff; background: var(--student-accent); box-shadow: 0 5px 14px rgba(101,88,232,.22); }
.filter-fields { display: grid; grid-template-columns: repeat(4, minmax(110px, 1fr)) auto auto; align-items: end; gap: 12px; padding-top: 15px; }
.filter-fields label { display: grid; gap: 6px; }
.filter-fields label > span { color: #737a8d; font-size: .78rem; font-weight: 700; }
.filter-fields select { min-height: 38px; width: 100%; padding: 6px 28px 6px 10px; border: 1px solid #d9dce6; border-radius: 9px; color: #3b4357; background: #fff; font: inherit; font-size: .84rem; }
.filter-fields select:focus { border-color: var(--student-accent); outline: 3px solid rgba(101,88,232,.1); }
.filter-reset { align-self: center; color: #777f91; font-size: .84rem; text-decoration: none; }
.filter-reset:hover { color: var(--student-accent-dark); }
.student-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 39px; padding: 8px 15px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: .86rem; font-weight: 700; line-height: 1.2; text-decoration: none; cursor: pointer; }
.student-btn-primary { color: #fff; border-color: var(--student-accent); background: var(--student-accent); box-shadow: 0 6px 15px rgba(101,88,232,.19); }
.student-btn-primary:hover { border-color: var(--student-accent-dark); background: var(--student-accent-dark); }
.student-btn-secondary { color: #5148ba; border-color: #d7d2fb; background: #f3f1ff; }
.student-btn-secondary:hover { background: #e9e5ff; }
.student-btn:disabled { opacity: .55; cursor: not-allowed; }

.paper-group + .paper-group { margin-top: 34px; }
.paper-group-title { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; }
.paper-group-title h3 { margin: 0; font-size: 1rem; }
.paper-group-title > span:last-child { color: #8a91a2; font-size: .78rem; }
.subject-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--student-accent); }
.subject-dot-scratch { background: #ed7a3d; }
.subject-dot-python { background: #4c80df; }
.paper-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.paper-card { position: relative; display: flex; flex-direction: column; min-width: 0; padding: 21px; border: 1px solid #e5e7ef; border-radius: 15px; background: #fff; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.paper-card::before { content: ""; position: absolute; left: 20px; right: 20px; top: 0; height: 3px; border-radius: 0 0 5px 5px; background: #5b83df; opacity: .55; }
.paper-card-scratch::before { background: #eb8149; }
.paper-card:hover { transform: translateY(-2px); border-color: #d9d6f5; box-shadow: 0 13px 27px rgba(47,46,100,.09); }
.paper-card-topline { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.paper-tag, .type-badge { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 6px; color: #4c57a2; background: #eff0ff; font-size: .73rem; font-weight: 700; }
.paper-tag-soft { margin-left: 3px; color: #737b8c; background: #f2f4f7; }
.type-badge { flex: 0 0 auto; color: #596173; background: #f1f3f7; }
.paper-card h4 { margin: 18px 0 8px; font-size: 1.05rem; line-height: 1.5; }
.paper-description { min-height: 42px; margin: 0 0 13px; color: #747c8e; font-size: .83rem; line-height: 1.65; }
.programming-note { margin: -3px 0 14px; padding: 8px 10px; border-radius: 7px; color: #766020; background: #fff9e7; font-size: .78rem; }
.paper-metrics { display: grid; grid-template-columns: repeat(4, 1fr); margin: auto 0 17px; padding: 15px 0; border-top: 1px solid #eff0f4; border-bottom: 1px solid #eff0f4; }
.paper-metrics div { padding: 0 8px; border-right: 1px solid #eff0f4; }
.paper-metrics div:first-child { padding-left: 0; }
.paper-metrics div:last-child { padding-right: 0; border-right: 0; }
.paper-metrics dt { color: #9298a8; font-size: .7rem; }
.paper-metrics dd { margin: 5px 0 0; color: #384055; font-size: .79rem; font-weight: 700; }
.paper-card-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.status-pill { display: inline-flex; align-items: center; width: fit-content; padding: 5px 9px; border-radius: 999px; color: #5b50cb; background: #eeecff; font-size: .72rem; font-weight: 700; }
.status-pill-muted { color: #737b8c; background: #f1f3f6; }
.status-pill-success { color: #147b56; background: #e5f6ef; }
.student-empty-state { padding: 44px 20px; border: 1px dashed #d9dce6; border-radius: 13px; color: #636b7e; text-align: center; background: #fafbfc; }
.student-empty-state p { margin: 7px 0 0; color: #8a91a2; font-size: .85rem; }
.student-empty-state.compact { padding: 28px 20px; }

/* Student paper center: compact filters and a scan-friendly single-column list. */
.student-paper-center { display: grid; gap: 20px; scroll-margin-top: 18px; }
.student-paper-center > .student-section-heading { margin-bottom: 0; padding: 0 2px; }
.student-paper-filter { padding: 7px 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.student-filter-row { display: grid; grid-template-columns: 76px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 61px; border-bottom: 1px solid #e9edf3; }
.student-filter-row:last-child { border-bottom: 0; }
.student-filter-label { color: #425069; font-size: .82rem; font-weight: 800; }
.student-filter-options { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.student-filter-chip { min-height: 33px; padding: 6px 13px; border: 1px solid transparent; border-radius: 999px; color: #526078; background: #f3f5f8; font: inherit; font-size: .8rem; cursor: pointer; }
.student-filter-chip:hover, .student-filter-chip:focus-visible { color: var(--primary-dark); border-color: #bdc9eb; background: var(--primary-soft); }
.student-filter-chip.is-active { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 5px 13px rgba(57,88,198,.16); }
.student-filter-reset { color: var(--primary-dark); font-size: .79rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.student-paper-list-panel { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.student-paper-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 25px; border-bottom: 1px solid var(--border); }
.student-paper-list-heading > div { display: flex; align-items: center; gap: 10px; }
.student-paper-list-heading h3 { margin: 0; color: var(--text); font-size: 1.08rem; }
.student-paper-list-heading > span { color: var(--muted); font-size: .78rem; }
.student-list-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--primary-dark); background: var(--primary-soft); font-size: .78rem; font-weight: 800; }
.student-paper-list { padding: 0 25px; }
.student-paper-row { display: grid; grid-template-columns: 58px minmax(0, 1fr) 112px 112px; align-items: center; gap: 19px; min-height: 126px; padding: 18px 0; border-bottom: 1px dashed #dfe5ee; }
.student-paper-row:last-child { border-bottom: 0; }
.student-paper-document { position: relative; width: 39px; height: 48px; margin-left: 4px; border: 3px solid #aebbd0; border-radius: 4px; }
.student-paper-document::before { content: ""; position: absolute; top: -3px; right: -3px; width: 14px; height: 14px; border-bottom: 3px solid #aebbd0; border-left: 3px solid #aebbd0; background: #fff; }
.student-paper-document span, .student-paper-document span::before, .student-paper-document span::after { position: absolute; left: 7px; width: 18px; height: 2px; border-radius: 2px; background: #cbd4e1; content: ""; }
.student-paper-document span { top: 21px; }
.student-paper-document span::before { top: 7px; left: 0; }
.student-paper-document span::after { top: 14px; left: 0; width: 13px; }
.student-paper-row-scratch .student-paper-document { border-color: #66aaa8; }
.student-paper-row-scratch .student-paper-document::before { border-color: #66aaa8; }
.student-paper-main { min-width: 0; }
.student-paper-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.student-paper-title-line h4 { min-width: min(100%, 320px); margin: 0 7px 0 0; color: var(--text); font-size: 1rem; line-height: 1.55; }
.student-paper-main p { margin: 9px 0 0; color: #7d899d; font-size: .8rem; line-height: 1.6; }
.student-paper-main small { display: block; margin-top: 5px; color: #87641c; font-size: .73rem; }
.student-paper-progress { display: grid; justify-items: start; gap: 5px; }
.student-paper-progress > span:not(.status-pill) { margin-top: 3px; color: var(--muted); font-size: .7rem; }
.student-paper-progress strong { color: var(--text); font-size: .9rem; font-variant-numeric: tabular-nums; }
.student-paper-action { display: flex; justify-content: flex-end; }
.student-paper-action .student-btn { min-width: 96px; }

.recent-list { display: grid; }
.recent-row { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 70px; align-items: center; gap: 13px; padding: 15px 4px; border-top: 1px solid #edf0f4; }
.recent-row:first-child { border-top: 0; }
.recent-subject { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; color: #fff; background: linear-gradient(135deg, #6558e8, #4e80e8); font-weight: 800; }
.recent-main { display: grid; gap: 4px; min-width: 0; }
.recent-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .88rem; }
.recent-main span { color: #9298a8; font-size: .75rem; }
.recent-score { color: #434b60; font-weight: 800; text-align: right; }

.student-breadcrumb { display: flex; gap: 9px; color: #8a91a2; font-size: .82rem; }
.student-breadcrumb a { color: var(--student-accent-dark); text-decoration: none; }
.confirm-workspace { max-width: 1050px; }
.confirm-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 34px 36px; border: 1px solid #e5e5f1; border-radius: 19px; background: linear-gradient(135deg, #fff, #f3f1ff); box-shadow: 0 10px 28px rgba(46,43,95,.06); }
.confirm-hero h1 { margin: 16px 0 8px; font-size: 1.65rem; line-height: 1.45; }
.confirm-hero p { margin: 0; color: #767e90; line-height: 1.65; }
.confirm-score { width: 114px; height: 114px; flex: 0 0 114px; display: grid; place-content: center; text-align: center; color: #fff; border-radius: 30px; background: linear-gradient(145deg, #6558e8, #497de3); box-shadow: 0 13px 25px rgba(78,66,190,.22); transform: rotate(3deg); }
.confirm-score strong { font-size: 2rem; line-height: 1; }
.confirm-score span { margin-top: 6px; font-size: .72rem; opacity: .8; }
.confirm-facts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.confirm-facts article { display: grid; gap: 7px; padding: 18px 20px; border: 1px solid #e8e9f0; border-radius: 13px; background: #fff; }
.confirm-facts span { color: #8b92a2; font-size: .76rem; }
.confirm-facts strong { font-size: 1rem; }
.start-confirm-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 22px; padding: 31px; border: 1px solid #e7e8ef; border-radius: 17px; background: #fff; box-shadow: 0 9px 25px rgba(33,40,78,.045); }
.confirm-icon { width: 54px; height: 54px; display: grid; place-items: center; color: #fff; border-radius: 17px; background: linear-gradient(135deg, #6558e8, #4f7ee3); font-size: 1.35rem; font-weight: 800; }
.start-confirm-card h2 { margin: 3px 0 12px; font-size: 1.25rem; }
.start-confirm-card ul { margin: 0; padding-left: 20px; color: #71798a; font-size: .87rem; line-height: 1.9; }
.confirm-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.programming-preview { box-shadow: none; }
.programming-question-card { margin-bottom: 16px; padding: 23px; border: 1px solid #e5e7ef; border-radius: 13px; background: #fcfcfe; }
.question-number { margin-bottom: 14px; color: var(--student-accent-dark); font-size: .8rem; font-weight: 800; }
.question-stem { color: #343b4e; line-height: 1.8; }
.question-stem { white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.question-stem p { margin: 0 0 10px; }
.programming-question-card pre { overflow-x: auto; margin: 14px 0; padding: 17px; color: #e8ebf7; border-radius: 10px; background: #202638; font-family: Consolas, "Courier New", monospace; line-height: 1.55; }
.programming-question-card img { display: block; max-width: min(100%, 760px); height: auto; margin: 16px 0; border: 1px solid #e0e3ea; border-radius: 10px; }

/* Focused exam workspace. */
.exam-body { min-width: 320px; background: #f2f4f8; }
.exam-shell { --exam-accent: #5a50dc; --exam-blue: #4778df; min-height: 100vh; color: #20283a; }
.exam-topbar { position: sticky; z-index: 20; top: 0; min-height: 86px; display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 15px 32px; border-bottom: 1px solid #e1e4ec; background: rgba(255,255,255,.96); box-shadow: 0 5px 22px rgba(29,36,66,.055); backdrop-filter: blur(12px); }
.exam-title-block { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 15px; min-width: 0; }
.exam-title-block h1 { grid-column: 2; grid-row: 1; overflow: hidden; margin: 0; font-size: 1.05rem; text-overflow: ellipsis; white-space: nowrap; }
.exam-title-block > span { grid-column: 2; grid-row: 2; margin-top: 5px; color: #858c9e; font-size: .76rem; }
.exam-back-link { grid-row: 1 / 3; padding: 9px 12px; color: #544ac7; border: 1px solid #dcd8fa; border-radius: 9px; background: #f6f4ff; font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.exam-live-status { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.exam-progress-summary, .exam-timer { min-height: 52px; display: flex; align-items: baseline; gap: 4px; padding: 10px 15px; border: 1px solid #e4e6ee; border-radius: 12px; background: #fafbfe; }
.exam-progress-summary span, .exam-timer span { color: #858c9e; font-size: .72rem; }
.exam-progress-summary strong { color: var(--exam-accent); font-size: 1.25rem; }
.exam-timer { display: grid; gap: 2px; }
.exam-timer strong { font: 800 .92rem/1.2 Consolas, monospace; letter-spacing: .04em; }
.save-state { min-width: 116px; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 7px; padding: 7px 10px; color: #687084; border-radius: 999px; background: #f0f2f6; font-size: .74rem; font-weight: 700; }
.save-dot { width: 7px; height: 7px; border-radius: 50%; background: #98a0af; }
.save-state[data-state="saving"] { color: #4f63a8; background: #edf2ff; }
.save-state[data-state="saving"] .save-dot { background: #5277df; animation: save-pulse 1s infinite; }
.save-state[data-state="saved"] { color: #18775b; background: #e8f7f1; }
.save-state[data-state="saved"] .save-dot { background: #27a77f; }
.save-state[data-state="failed"] { color: #a23b4b; background: #ffedf0; }
.save-state[data-state="failed"] .save-dot { background: #df6175; }
.save-state button { padding: 0; color: inherit; border: 0; border-bottom: 1px solid currentColor; background: transparent; font: inherit; cursor: pointer; }
@keyframes save-pulse { 50% { transform: scale(1.7); opacity: .45; } }

.exam-layout { width: min(1450px, calc(100% - 48px)); display: grid; grid-template-columns: minmax(0, 1fr) 300px; align-items: start; gap: 22px; margin: 26px auto 50px; }
.exam-question-area { min-width: 0; display: grid; gap: 18px; }
.exam-question-panel { min-height: 0; padding: 33px 36px; scroll-margin-top: 112px; border: 1px solid #e3e5ed; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(32,40,76,.055); }
.question-meta-row { display: flex; align-items: center; gap: 8px; padding-bottom: 21px; border-bottom: 1px solid #edf0f4; }
.question-position { margin-right: 5px; color: #252e42; font-size: 1rem; font-weight: 800; }
.question-type-chip, .question-score-chip { padding: 5px 9px; color: #554ac8; border-radius: 6px; background: #efedff; font-size: .72rem; font-weight: 700; }
.question-score-chip { color: #657084; background: #f0f2f5; }
.exam-question-stem { margin: 26px 0 20px; color: #252c3d; font-size: 1.02rem; line-height: 1.9; }
.exam-question-stem { white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.exam-question-stem p { margin: 0 0 10px; }
.exam-code { overflow-x: auto; margin: 18px 0 24px; padding: 21px 23px; color: #e8ecf7; border-radius: 12px; background: #202638; box-shadow: inset 0 0 0 1px rgba(255,255,255,.04); font: .9rem/1.7 Consolas, "Courier New", monospace; tab-size: 4; white-space: pre; }
.exam-stem-image { display: block; max-width: min(100%, 820px); max-height: 470px; object-fit: contain; margin: 20px auto 6px; border: 1px solid #e0e3eb; border-radius: 12px; background: #fafbfc; cursor: zoom-in; }
.image-hint { margin: 0 0 22px; color: #9299a9; font-size: .74rem; text-align: center; }
.answer-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 13px; margin: 27px 0 0; padding: 0; border: 0; }
.answer-options legend { grid-column: 1 / -1; margin-bottom: 3px; color: #858c9c; font-size: .77rem; font-weight: 700; }
.option-choice { position: relative; min-width: 0; cursor: pointer; }
.option-choice > input { position: absolute; opacity: 0; pointer-events: none; }
.option-surface { min-height: 61px; height: 100%; display: flex; align-items: flex-start; gap: 13px; padding: 14px 16px; border: 1px solid #dfe2ea; border-radius: 12px; background: #fff; transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; }
.option-choice:hover .option-surface { border-color: #bdb7ed; background: #fbfaff; }
.option-choice > input:focus-visible + .option-surface { outline: 3px solid rgba(90,80,220,.16); }
.option-choice > input:checked + .option-surface { border-color: var(--exam-accent); background: #f3f1ff; box-shadow: 0 7px 19px rgba(84,73,199,.1); }
.option-key { width: 30px; height: 30px; flex: 0 0 30px; display: grid; place-items: center; color: #555e72; border-radius: 8px; background: #eef0f4; font-size: .8rem; font-weight: 800; }
.option-choice > input:checked + .option-surface .option-key { color: #fff; background: var(--exam-accent); }
.option-content { min-width: 0; display: grid; gap: 10px; align-items: start; line-height: 1.65; }
.option-text { white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.option-content img { max-width: 100%; max-height: 230px; object-fit: contain; border: 1px solid #e2e4eb; border-radius: 9px; background: #fff; cursor: zoom-in; }
.true-false-options { grid-template-columns: minmax(0, 1fr); }
.programming-display-note { margin-top: 25px; padding: 14px 16px; color: #78621d; border: 1px solid #f1e2ad; border-radius: 10px; background: #fff9e8; font-size: .84rem; }
.answer-sheet { position: sticky; top: 112px; overflow: hidden; border: 1px solid #e2e5ed; border-radius: 16px; background: #fff; box-shadow: 0 10px 27px rgba(32,40,76,.05); }
.answer-sheet-heading { padding: 21px; border-bottom: 1px solid #edf0f4; }
.answer-sheet-heading > div:first-child { display: flex; justify-content: space-between; gap: 10px; }
.answer-sheet-heading > div:first-child span { font-weight: 800; }
.answer-sheet-heading > div:first-child strong { color: #858c9d; font-size: .76rem; }
.sheet-legend { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 13px; color: #8b92a2; font-size: .68rem; }
.sheet-legend span { display: flex; align-items: center; gap: 4px; }
.sheet-legend i { width: 8px; height: 8px; border: 1px solid #d8dce6; border-radius: 3px; background: #fff; }
.sheet-legend .legend-current { border-color: var(--exam-accent); background: var(--exam-accent); }
.sheet-legend .legend-answered { border-color: #c9c4fa; background: #ebe8ff; }
.answer-sheet-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 9px; padding: 20px; }
.answer-sheet-number { aspect-ratio: 1; min-width: 0; color: #666e81; border: 1px solid #dfe2ea; border-radius: 8px; background: #fff; font: 700 .78rem/1 system-ui, sans-serif; cursor: pointer; }
.answer-sheet-number:hover { border-color: #aaa3e8; }
.answer-sheet-number.is-answered { color: #554ac7; border-color: #d2cdf7; background: #eeecff; }
.answer-sheet-number.is-current { color: #fff; border-color: var(--exam-accent); background: var(--exam-accent); box-shadow: 0 5px 11px rgba(90,80,220,.2); }
.answer-sheet-number.is-display-only:not(.is-current) { color: #8a6f20; border-style: dashed; background: #fff9e9; }
.answer-sheet-footer { padding: 17px 20px 20px; border-top: 1px solid #edf0f4; }
.answer-sheet-footer p { margin: 0 0 13px; color: #8c93a3; font-size: .73rem; line-height: 1.55; }
.exam-submit-button { width: 100%; min-height: 43px; color: #fff; border: 1px solid var(--exam-accent); border-radius: 10px; background: var(--exam-accent); box-shadow: 0 7px 16px rgba(90,80,220,.18); font: inherit; font-size: .8rem; font-weight: 700; cursor: pointer; }
.exam-submit-button:hover { background: #4940c0; }
.exam-empty { padding: 60px 25px; color: #7d8494; border: 1px dashed #d7dbe5; border-radius: 14px; background: #fff; text-align: center; }
.image-lightbox { width: min(94vw, 1100px); max-height: 92vh; padding: 46px 20px 20px; border: 0; border-radius: 16px; background: #fff; box-shadow: 0 25px 70px rgba(9,14,29,.35); }
.image-lightbox::backdrop { background: rgba(13,18,31,.72); backdrop-filter: blur(3px); }
.image-lightbox img { display: block; max-width: 100%; max-height: calc(92vh - 70px); object-fit: contain; margin: auto; }
.lightbox-close { position: absolute; top: 10px; right: 12px; width: 34px; height: 34px; color: #5d6577; border: 0; border-radius: 50%; background: #eff1f5; font-size: 1.3rem; cursor: pointer; }
.submit-confirm-dialog { width: min(92vw, 510px); padding: 31px; color: #252d40; border: 0; border-radius: 18px; background: #fff; box-shadow: 0 25px 70px rgba(9,14,29,.3); text-align: center; }
.submit-confirm-dialog::backdrop { background: rgba(13,18,31,.64); backdrop-filter: blur(3px); }
.submit-dialog-mark { width: 52px; height: 52px; display: grid; place-items: center; margin: 0 auto 15px; color: #fff; border-radius: 16px; background: linear-gradient(135deg, #6558e8, #4e7fe6); font-size: 1.3rem; font-weight: 800; }
.submit-confirm-dialog h2 { margin: 0 0 7px; font-size: 1.25rem; }
.submit-confirm-dialog > form > p { margin: 0; color: #82899a; font-size: .84rem; }
.submit-count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 22px 0 15px; }
.submit-count-grid div { display: grid; gap: 5px; padding: 14px 8px; border: 1px solid #e5e7ee; border-radius: 11px; background: #fafbfc; }
.submit-count-grid span { color: #8b92a2; font-size: .72rem; }
.submit-count-grid strong { font-size: 1.25rem; }
.submit-unanswered-warning { margin: 0 0 17px; padding: 11px 13px; color: #8a631d; border: 1px solid #f0dda2; border-radius: 9px; background: #fff8e4; font-size: .78rem; line-height: 1.6; text-align: left; }
.submit-dialog-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 20px; }
.exam-dialog-secondary, .exam-dialog-primary { min-height: 42px; border: 1px solid transparent; border-radius: 9px; font: inherit; font-size: .84rem; font-weight: 700; cursor: pointer; }
.exam-dialog-secondary { color: #596174; border-color: #d7dae3; background: #fff; }
.exam-dialog-primary { color: #fff; background: #5a50dc; }
.exam-dialog-primary:disabled { opacity: .6; cursor: wait; }

/* Submission result and history. */
.result-workspace, .history-workspace { max-width: 1100px; }
.result-hero { display: flex; align-items: center; justify-content: space-between; gap: 28px; padding: 34px 38px; color: #fff; border-radius: 21px; background: linear-gradient(125deg, #4740ba, #6558e8 54%, #4385df); box-shadow: 0 17px 38px rgba(64,54,164,.2); }
.result-hero .student-kicker { color: rgba(255,255,255,.7); }
.result-hero h1 { margin: 8px 0; font-size: 1.55rem; }
.result-hero p { margin: 0; color: rgba(255,255,255,.75); }
.result-attempt-label { display: inline-flex; padding: 5px 9px; border-radius: 7px; background: rgba(255,255,255,.14); font-size: .75rem; font-weight: 700; }
.result-score-ring { width: 125px; height: 125px; flex: 0 0 125px; display: grid; place-content: center; text-align: center; border: 1px solid rgba(255,255,255,.25); border-radius: 50%; background: rgba(255,255,255,.12); box-shadow: inset 0 0 0 8px rgba(255,255,255,.06); }
.result-score-ring strong { font-size: 2.35rem; line-height: 1; }
.result-score-ring span { margin-top: 7px; font-size: .73rem; opacity: .8; }
.result-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 13px; }
.result-stat-grid article { display: grid; gap: 8px; padding: 19px 22px; border: 1px solid #e5e7ee; border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(33,40,78,.045); }
.result-stat-grid span, .result-time-card span, .history-row > div > span { color: #8a91a2; font-size: .74rem; }
.result-stat-grid strong { font-size: 1.35rem; }
.result-success { color: #17815e; }
.result-danger { color: #c64a5e; }
.result-warning { color: #b37b21; }
.result-time-card { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; overflow: hidden; border: 1px solid #e5e7ee; border-radius: 14px; background: #e5e7ee; }
.result-time-card div { display: grid; gap: 7px; padding: 17px 19px; background: #fff; }
.result-time-card strong { font-size: .82rem; }
.result-analysis { box-shadow: none; }
.result-question-list { display: grid; gap: 12px; }
.result-question { overflow: hidden; border: 1px solid #e1e4eb; border-left: 4px solid #d2d6df; border-radius: 12px; background: #fff; }
.result-question.is-correct { border-left-color: #38a982; }
.result-question.is-wrong { border-left-color: #df6678; }
.result-question.is-programming { border-left-color: #d4a337; }
.result-question summary { display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: 10px; padding: 17px 18px; cursor: pointer; list-style: none; }
.result-question summary::-webkit-details-marker { display: none; }
.result-question summary > span:first-child { font-weight: 800; }
.result-question-type { padding: 4px 7px; color: #626b7e; border-radius: 5px; background: #f0f2f5; font-size: .68rem; }
.result-question summary > strong { color: #697184; font-size: .78rem; }
.result-question.is-correct summary > strong { color: #1d825f; }
.result-question.is-wrong summary > strong { color: #bd4357; }
.result-earned-score { color: #596174; font-size: .76rem; font-weight: 700; }
.result-question-body { padding: 3px 20px 22px; border-top: 1px solid #edf0f4; }
.result-stem { margin: 20px 0 14px; line-height: 1.8; }
.result-stem { white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 4; }
.result-stem p { margin: 0 0 8px; }
.result-stem-image { display: block; max-width: min(100%, 760px); max-height: 420px; object-fit: contain; margin: 15px 0; border: 1px solid #e0e3ea; border-radius: 10px; }
.result-answer-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin: 17px 0; }
.result-answer-grid div { display: grid; gap: 6px; padding: 13px 15px; border-radius: 9px; background: #f5f6f9; }
.result-answer-grid span, .result-explanation > span { color: #858c9c; font-size: .72rem; }
.result-answer-grid strong { font-size: .86rem; }
.result-options { display: grid; grid-template-columns: 1fr; gap: 9px; margin: 15px 0; }
.result-option { display: flex; align-items: flex-start; gap: 9px; padding: 11px; border: 1px solid #e2e4eb; border-radius: 9px; }
.result-option > span { width: 26px; height: 26px; flex: 0 0 26px; display: grid; place-items: center; border-radius: 7px; background: #eef0f4; font-size: .74rem; font-weight: 800; }
.result-option.is-selected { border-color: #e2a4ad; background: #fff5f6; }
.result-option.is-answer { border-color: #8fd1ba; background: #f0fbf7; }
.result-option.is-answer > span { color: #fff; background: #299b76; }
.result-option img { max-width: 100%; max-height: 210px; object-fit: contain; margin-top: 7px; border-radius: 7px; }
.result-explanation { display: grid; gap: 7px; margin-top: 14px; padding: 14px 16px; border-radius: 9px; background: #f5f6fa; line-height: 1.7; }
.result-explanation p { margin: 0 0 7px; }
.reference-answer-code { box-sizing: border-box; width: 100%; max-width: 100%; overflow-x: auto; margin: 4px 0 0; padding: 15px 17px; color: #23314a; border: 1px solid #dce3ee; border-radius: 9px; background: #eef3f8; font: .88rem/1.75 Consolas, "Courier New", monospace; tab-size: 4; white-space: pre; }
.reference-answer-image { display: block; width: auto; max-width: min(100%, 760px); max-height: 520px; object-fit: contain; margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; }
.teacher-answer-review .reference-answer-image { cursor: zoom-in; }
.reference-answer-link { display: inline-block; width: fit-content; max-width: 100%; }
.reference-image-hint { display: block; margin-top: 6px; color: var(--muted); font-size: .72rem; }
.result-actions { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.result-actions form { margin: 0; }
.history-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; padding: 28px 31px; border: 1px solid #e4e6ee; border-radius: 17px; background: linear-gradient(135deg, #fff, #f2f0ff); }
.history-hero h1 { margin: 5px 0 7px; font-size: 1.4rem; }
.history-hero p { margin: 0; color: #818899; }
.history-hero > strong { display: grid; color: #574dc8; font-size: 2rem; text-align: center; }
.history-hero > strong span { color: #858c9c; font-size: .7rem; }
.history-list { display: grid; }
.history-row { display: grid; grid-template-columns: 42px minmax(180px, 1fr) 100px 100px auto; align-items: center; gap: 16px; padding: 16px 4px; border-top: 1px solid #eceef3; }
.history-row:first-child { border-top: 0; }
.history-number { width: 38px; height: 38px; display: grid; place-items: center; color: #fff; border-radius: 10px; background: linear-gradient(135deg, #6558e8, #4e7fe3); font-weight: 800; }
.history-main, .history-row > div:not(.history-number) { display: grid; gap: 5px; }
.history-main span { color: #8a91a2; font-size: .74rem; }
.trend-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 13px; }
.trend-summary-grid article { display: grid; gap: 6px; padding: 19px 22px; border: 1px solid #e5e7ee; border-radius: 14px; background: #fff; box-shadow: 0 7px 20px rgba(33,40,78,.045); }
.trend-summary-grid span { color: #8a91a2; font-size: .76rem; }
.trend-summary-grid strong { font-size: 1.35rem; }
.trend-summary-grid small { color: #5d52cb; font-weight: 800; }

/* Student-wide history and snapshot-based mistake review. */
.student-records-workspace, .wrong-workspace { max-width: 1220px; }
.records-hero { display: flex; align-items: center; justify-content: space-between; gap: 25px; padding: 30px 34px; color: #fff; border-radius: 20px; background: linear-gradient(125deg, #273d79, #5f55d8 58%, #3b81d8); box-shadow: 0 16px 38px rgba(43,56,128,.18); }
.records-hero .student-kicker { color: rgba(255,255,255,.7); }
.records-hero h1 { margin: 5px 0 8px; font-size: 1.65rem; }
.records-hero p { margin: 0; color: rgba(255,255,255,.78); }
.records-hero-stats { display: grid; grid-template-columns: auto auto; align-items: baseline; gap: 4px 10px; min-width: 130px; }
.records-hero-stats strong { font-size: 1.7rem; text-align: right; }
.records-hero-stats span { color: rgba(255,255,255,.72); font-size: .75rem; }
.records-table { overflow: hidden; border: 1px solid #e6e8ef; border-radius: 13px; }
.records-table-head, .records-row { display: grid; grid-template-columns: minmax(220px, 2fr) 92px 82px 75px 65px 145px 105px; align-items: center; gap: 12px; }
.records-table-head { padding: 12px 17px; color: #7c8496; background: #f4f6fa; font-size: .72rem; font-weight: 700; }
.records-row { padding: 16px 17px; border-top: 1px solid #eceef3; background: #fff; }
.records-row:first-of-type { border-top: 0; }
.records-row > div:not(.records-paper):not(.records-actions) { display: grid; gap: 3px; font-size: .8rem; }
.records-paper { display: grid; gap: 5px; min-width: 0; }
.records-paper strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .86rem; }
.records-paper span, .records-row > div > span { color: #858d9f; font-size: .72rem; }
.records-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
.records-actions a, .wrong-detail-link { color: #554bc4; font-size: .76rem; font-weight: 700; text-decoration: none; }
.records-actions a:hover, .wrong-detail-link:hover { text-decoration: underline; }

.wrong-hero { background: linear-gradient(125deg, #4a3c82, #7550c9 56%, #b05f8b); }
.wrong-total { display: grid; min-width: 120px; text-align: center; }
.wrong-total strong { font-size: 2rem; }
.wrong-total span { color: rgba(255,255,255,.75); font-size: .75rem; }
.wrong-filter { display: grid; grid-template-columns: minmax(120px, .65fr) minmax(120px, .65fr) minmax(200px, 1.5fr) auto auto; align-items: end; gap: 12px; }
.wrong-filter label { display: grid; gap: 6px; }
.wrong-filter label > span { color: #737a8d; font-size: .76rem; font-weight: 700; }
.wrong-filter select { min-height: 39px; width: 100%; padding: 7px 30px 7px 10px; color: #3b4357; border: 1px solid #d9dce6; border-radius: 9px; background: #fff; font: inherit; font-size: .82rem; }
.wrong-list { display: grid; gap: 16px; }
.wrong-card { padding: 24px 27px; border: 1px solid #e4e6ed; border-left: 4px solid #df6678; border-radius: 15px; background: #fff; box-shadow: 0 8px 25px rgba(33,40,78,.045); }
.wrong-card-header { display: flex; justify-content: space-between; gap: 20px; padding-bottom: 15px; border-bottom: 1px solid #edf0f4; }
.wrong-card-header > div:first-child { display: grid; gap: 6px; }
.wrong-card-header > div:first-child span { color: #858d9f; font-size: .74rem; }
.wrong-card-header > div:first-child strong { font-size: .95rem; }
.wrong-badges { display: flex; align-items: center; gap: 8px; }
.wrong-badges span, .wrong-badges strong { display: inline-flex; padding: 5px 8px; border-radius: 999px; font-size: .7rem; }
.wrong-badges span { color: #a74858; background: #ffedf0; }
.wrong-badges .still-wrong { color: #b84155; background: #ffe7eb; }
.wrong-badges .now-correct { color: #177859; background: #e6f7f0; }
.wrong-meta { margin: 13px 0 4px; color: #8b92a2; font-size: .73rem; }
.wrong-card .result-stem { font-size: .94rem; }
.wrong-detail-link { display: inline-flex; margin-top: 16px; }

@media (max-width: 1050px) {
  .filter-fields { grid-template-columns: repeat(2, minmax(120px, 1fr)); }
  .paper-card-grid { grid-template-columns: 1fr; }
  .exam-topbar { align-items: flex-start; flex-direction: column; gap: 12px; }
  .exam-live-status { width: 100%; justify-content: space-between; }
  .exam-layout { grid-template-columns: 1fr; }
  .answer-sheet { position: static; grid-row: 1; }
  .answer-sheet-grid { grid-template-columns: repeat(10, minmax(34px, 1fr)); }
  .answer-sheet-footer { display: grid; grid-template-columns: 1fr 270px; align-items: center; gap: 15px; }
  .answer-sheet-footer p { margin: 0; }
  .result-time-card { grid-template-columns: 1fr 1fr; }
  .history-row { grid-template-columns: 42px minmax(160px, 1fr) 90px 90px; }
  .history-row .student-btn { grid-column: 2 / -1; width: fit-content; }
  .records-table-head { display: none; }
  .records-row { grid-template-columns: minmax(210px, 1.7fr) repeat(3, 80px) 110px; }
  .records-row > div:nth-child(5), .records-row > div:nth-child(6) { display: none; }
  .wrong-filter { grid-template-columns: repeat(2, minmax(130px, 1fr)); }
  .wrong-filter label:nth-child(3) { grid-column: 1 / -1; }
}

@media (max-width: 720px) {
  .app-shell { display: block; }
  .sidebar { width: 100%; padding: 18px 20px; }
  .sidebar .nav { margin-top: 14px !important; }
  .topbar { padding: 14px 20px; }
  .content-area { padding: 30px 20px; }
  .student-hero { min-height: 0; padding: 29px 25px; }
  .hero-orbit { display: none; }
  .student-stat-grid { grid-template-columns: 1fr; gap: 10px; }
  .student-stat-card { min-height: 88px; padding: 18px; }
  .student-section { padding: 21px 17px; }
  .filter-fields { grid-template-columns: 1fr 1fr; }
  .filter-fields .student-btn { grid-column: 1 / -1; }
  .paper-card { padding: 18px; }
  .paper-metrics { grid-template-columns: 1fr 1fr; row-gap: 13px; }
  .paper-metrics div:nth-child(2) { border-right: 0; }
  .paper-metrics div:nth-child(3) { padding-left: 0; }
  .recent-row { grid-template-columns: 38px minmax(0, 1fr) auto; }
  .recent-row .status-pill { display: none; }
  .recent-score { grid-column: 3; grid-row: 1; }
  .confirm-hero { padding: 27px 23px; }
  .confirm-score { display: none; }
  .confirm-facts { grid-template-columns: 1fr 1fr; }
  .start-confirm-card { grid-template-columns: 1fr; padding: 24px 21px; }
  .exam-topbar { position: static; padding: 15px; }
  .exam-title-block { width: 100%; grid-template-columns: auto minmax(0, 1fr); }
  .exam-back-link { padding: 8px; }
  .exam-live-status { display: grid; grid-template-columns: 1fr 1fr; }
  .save-state { grid-column: 1 / -1; }
  .exam-progress-summary, .exam-timer { justify-content: center; }
  .exam-layout { width: calc(100% - 24px); margin-top: 12px; gap: 12px; }
  .answer-sheet-heading { padding: 17px; }
  .answer-sheet-grid { grid-template-columns: repeat(6, 1fr); padding: 16px; }
  .answer-sheet-footer { display: block; padding: 15px 17px 17px; }
  .answer-sheet-footer p { margin-bottom: 11px; }
  .exam-question-panel { padding: 23px 18px; scroll-margin-top: 12px; }
  .question-meta-row { flex-wrap: wrap; }
  .exam-question-stem { margin-top: 20px; font-size: .95rem; }
  .answer-options, .true-false-options { grid-template-columns: 1fr; }
  .submit-confirm-dialog { padding: 25px 19px; }
  .result-hero { padding: 27px 23px; }
  .result-score-ring { width: 92px; height: 92px; flex-basis: 92px; }
  .result-score-ring strong { font-size: 1.75rem; }
  .result-stat-grid, .result-time-card { grid-template-columns: 1fr 1fr; }
  .result-question summary { grid-template-columns: auto 1fr auto; }
  .result-question summary > strong { grid-column: 2; grid-row: 2; }
  .result-question-type { width: fit-content; }
  .result-earned-score { grid-column: 3; grid-row: 1 / 3; }
  .result-answer-grid, .result-options { grid-template-columns: 1fr; }
  .history-hero { padding: 23px 20px; }
  .history-row { grid-template-columns: 38px 1fr 75px; gap: 11px; }
  .history-row > div:nth-child(4) { display: none; }
  .history-row .student-btn { grid-column: 2 / -1; }
  .trend-summary-grid { grid-template-columns: 1fr; }
  .records-hero { align-items: flex-start; flex-direction: column; padding: 25px 22px; }
  .records-hero-stats { grid-template-columns: auto auto auto auto; min-width: 0; }
  .records-table { overflow: visible; border: 0; }
  .records-row { grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; padding: 17px; border: 1px solid #e5e7ee; border-radius: 12px; }
  .records-paper { grid-column: 1 / -1; padding-bottom: 11px; border-bottom: 1px solid #eceef3; }
  .records-row > div:nth-child(5), .records-row > div:nth-child(6) { display: grid; }
  .records-row > div[data-label]::before { content: attr(data-label); color: #8b92a2; font-size: .68rem; }
  .records-actions { grid-column: 1 / -1; flex-direction: row; gap: 18px; }
  .wrong-filter { grid-template-columns: 1fr; }
  .wrong-filter label:nth-child(3), .wrong-filter .student-btn { grid-column: 1; }
  .wrong-card { padding: 20px 17px; }
  .wrong-card-header { align-items: flex-start; flex-direction: column; }
  .wrong-badges { flex-wrap: wrap; }
}

/* Teacher reporting workspace. */
.teacher-workspace { max-width: 1380px; display: grid; gap: 20px; }
.teacher-hero { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 32px 36px; color: #fff; border-radius: 20px; background: linear-gradient(125deg, #253466, #5147b6 58%, #426fc1); box-shadow: 0 16px 38px rgba(37,52,102,.18); }
.teacher-hero h1, .teacher-page-heading h1 { margin: 5px 0 8px; font-size: 1.55rem; }
.teacher-hero p { margin: 0; color: rgba(255,255,255,.76); }
.teacher-hero .eyebrow { color: rgba(255,255,255,.68); }
.teacher-hero .btn { color: #3f3a9d; border-color: rgba(255,255,255,.8); background: #fff; text-decoration: none; }
.teacher-stat-grid, .analysis-stat-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.teacher-stat-grid article, .analysis-stat-grid article { display: grid; gap: 7px; padding: 21px 23px; border: 1px solid #e3e6ef; border-radius: 14px; background: #fff; box-shadow: 0 8px 24px rgba(33,40,78,.045); }
.teacher-stat-grid span, .analysis-stat-grid span { color: #737c90; font-size: .78rem; }
.teacher-stat-grid strong, .analysis-stat-grid strong { color: #293248; font-size: 1.65rem; }
.teacher-stat-grid small, .analysis-stat-grid small { color: #959bab; font-size: .7rem; }
.teacher-panel { padding: 23px 25px; border: 1px solid #e3e6ee; border-radius: 15px; background: #fff; box-shadow: 0 8px 26px rgba(33,40,78,.04); }
.teacher-panel-flush { padding: 0; overflow: hidden; }
.compact-panel { padding: 16px 20px; }
.teacher-panel-heading, .teacher-page-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.teacher-panel-heading { margin-bottom: 18px; }
.teacher-panel-heading h2 { margin: 3px 0 0; font-size: 1.08rem; }
.teacher-panel-heading a { color: #5148bd; font-size: .78rem; font-weight: 700; text-decoration: none; }
.teacher-page-heading p { margin: 0; color: #7f8799; }
.teacher-table { width: 100%; overflow-x: auto; }
.teacher-table-head, .teacher-table-row { display: grid; align-items: center; gap: 14px; min-width: 930px; }
.teacher-dashboard-table .teacher-table-head, .teacher-dashboard-table .teacher-table-row { grid-template-columns: 1.1fr 1.8fr 78px 120px 80px 105px 50px; }
.teacher-score-table .teacher-table-head, .teacher-score-table .teacher-table-row { grid-template-columns: 1.1fr 1.8fr 70px 115px 70px 85px 50px 125px 118px; min-width: 1185px; }
.teacher-table-head { padding: 11px 13px; color: #778094; border-radius: 8px; background: #f3f5f9; font-size: .71rem; font-weight: 700; }
.teacher-table-row { padding: 14px 13px; color: #4b5365; border-top: 1px solid #eceef3; font-size: .78rem; }
.teacher-table-row:first-of-type { border-top: 0; }
.teacher-table-row > div { min-width: 0; display: grid; gap: 4px; }
.teacher-table-row strong { color: #2d3549; }
.teacher-table-row small { overflow: hidden; color: #8b92a2; font-size: .69rem; text-overflow: ellipsis; white-space: nowrap; }
.teacher-table-row > a, .teacher-row-actions a { color: #5148bd; font-weight: 700; text-decoration: none; }
.teacher-row-actions { display: flex !important; flex-direction: row; gap: 9px !important; }
.teacher-empty { padding: 40px 20px; color: #858c9d; text-align: center; }
.report-filter { display: grid; grid-template-columns: repeat(4, minmax(145px, 1fr)); align-items: end; gap: 13px; }
.report-filter label, .inline-report-filter label { display: grid; gap: 6px; }
.report-filter label > span, .inline-report-filter label > span { color: #727a8d; font-size: .72rem; font-weight: 700; }
.report-filter select, .report-filter input, .inline-report-filter select { width: 100%; min-height: 39px; padding: 7px 10px; color: #3f475a; border: 1px solid #d8dce5; border-radius: 8px; background: #fff; font: inherit; font-size: .78rem; }
.report-filter-actions, .inline-report-filter { display: flex; align-items: flex-end; gap: 9px; }
.inline-report-filter label { min-width: min(430px, 65vw); }
.export-strip { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 16px 20px; color: #454d60; border: 1px solid #dcdff0; border-radius: 12px; background: #f6f5ff; }
.export-strip > div:first-child { display: grid; gap: 3px; }
.export-strip span { color: #7f8799; font-size: .7rem; }
.export-strip > div:last-child { display: flex; flex-wrap: wrap; gap: 8px; }
.export-strip a { padding: 7px 10px; color: #5148b8; border: 1px solid #d8d4f5; border-radius: 7px; background: #fff; font-size: .72rem; font-weight: 700; text-decoration: none; }
.attempt-trend-list { display: grid; }
.attempt-trend-list > div { display: grid; grid-template-columns: 90px 1fr 90px 100px 140px; gap: 12px; padding: 13px 4px; border-top: 1px solid #eceef3; font-size: .78rem; }
.attempt-trend-list > div:first-child { border-top: 0; }
.attempt-trend-list span, .attempt-trend-list time { color: #747d90; }
.repeat-wrong-list { display: grid; gap: 11px; }
.repeat-wrong-list article { padding: 15px 17px; border: 1px solid #e4e6ed; border-left: 3px solid #d95f72; border-radius: 10px; }
.repeat-wrong-list article > div { display: flex; justify-content: space-between; gap: 15px; }
.repeat-wrong-list span, .repeat-wrong-list small { color: #7f8799; font-size: .72rem; }
.repeat-wrong-list p { margin: 10px 0; color: #343c50; line-height: 1.65; }
.paper-analysis-list { display: grid; gap: 14px; }
.question-analysis-heading { display: flex; justify-content: space-between; gap: 25px; padding-bottom: 16px; border-bottom: 1px solid #eceef3; }
.question-analysis-heading > div:first-child { display: grid; gap: 7px; }
.question-analysis-heading span { color: #747d90; font-size: .73rem; }
.question-analysis-heading p { margin: 0; color: #30384b; line-height: 1.55; }
.question-analysis-heading > div:last-child { min-width: 100px; display: grid; align-content: center; color: #bd4357; text-align: right; }
.question-analysis-heading > div:last-child strong { font-size: 1.45rem; }
.question-metric-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin: 16px 0; }
.question-metric-grid div { display: grid; gap: 5px; padding: 11px 13px; border-radius: 8px; background: #f5f6f9; }
.question-metric-grid span { color: #858c9d; font-size: .68rem; }
.option-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.option-counts span { padding: 6px 9px; color: #697185; border-radius: 7px; background: #eeeff5; font-size: .7rem; }
.option-counts b { color: #343c50; margin-left: 4px; }
.analysis-question-options { margin: 16px 0; }
.analysis-question-options .result-option { background: #fff; }
.analysis-question-options .teacher-empty { padding: 12px; }
.analysis-answer-details { margin-top: 16px; padding: 13px 15px; border: 1px solid #dfe7e5; border-radius: 9px; background: #f6faf9; }
.analysis-answer-details summary { color: #45576a; cursor: pointer; font-size: .76rem; font-weight: 700; }
.analysis-answer-content { display: grid; grid-template-columns: minmax(150px, .28fr) 1fr; gap: 14px; margin-top: 13px; }
.analysis-correct-answer, .analysis-explanation { display: grid; align-content: start; gap: 6px; padding: 12px 13px; border-radius: 8px; background: #fff; }
.analysis-correct-answer { border: 1px solid #9bd5c3; }
.analysis-correct-answer span, .analysis-explanation > span { color: #7b8797; font-size: .68rem; font-weight: 700; }
.analysis-correct-answer strong { color: #16886a; }
.analysis-explanation { border: 1px solid #e1e7f0; }
.analysis-explanation p { margin: 0 0 7px; line-height: 1.7; }
.analysis-explanation p:last-child { margin-bottom: 0; }
.wrong-student-details { margin-top: 16px; padding-top: 14px; border-top: 1px solid #eceef3; }
.wrong-student-details summary { color: #5e6678; cursor: pointer; font-size: .76rem; font-weight: 700; }
.wrong-student-details > div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.wrong-student-details a { padding: 5px 8px; color: #554bc4; border-radius: 6px; background: #f0effc; font-size: .7rem; text-decoration: none; }

@media (max-width: 1000px) {
  .teacher-stat-grid, .analysis-stat-grid { grid-template-columns: 1fr 1fr; }
  .report-filter { grid-template-columns: repeat(2, minmax(145px, 1fr)); }
  .export-strip { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 720px) {
  .teacher-hero, .teacher-page-heading { align-items: flex-start; flex-direction: column; padding: 24px 21px; }
  .teacher-page-heading { padding: 0; }
  .teacher-stat-grid, .analysis-stat-grid { grid-template-columns: 1fr 1fr; gap: 9px; }
  .teacher-stat-grid article, .analysis-stat-grid article { padding: 17px; }
  .teacher-panel { padding: 18px 15px; }
  .teacher-panel-flush { padding: 0; }
  .report-filter { grid-template-columns: 1fr; }
  .report-filter-actions { grid-column: 1; }
  .inline-report-filter { align-items: stretch; flex-direction: column; }
  .inline-report-filter label { min-width: 0; }
  .attempt-trend-list > div { grid-template-columns: 1fr 1fr; }
  .attempt-trend-list time { grid-column: 1 / -1; }
  .question-analysis-heading { align-items: flex-start; flex-direction: column; }
  .question-analysis-heading > div:last-child { text-align: left; }
  .question-metric-grid { grid-template-columns: repeat(2, 1fr); }
  .analysis-answer-content { grid-template-columns: 1fr; }
}

/* ===========================================================================
   Unified UI system: “青岚学习台”
   This final layer intentionally normalizes the student and teacher surfaces.
   ========================================================================== */
:root {
  --primary: #3559c7;
  --primary-dark: #2949a8;
  --primary-soft: #e8eeff;
  --secondary: #0f8b8d;
  --secondary-soft: #e3f5f3;
  --success: #16886a;
  --success-soft: #e5f6ef;
  --danger: #c94f65;
  --danger-soft: #fdecef;
  --warning: #c9791e;
  --warning-soft: #fff3de;
  --canvas: #f5f7fb;
  --exam-canvas: #f2f5f9;
  --surface: #fff;
  --sidebar-bg: #152238;
  --text: #1f2a3d;
  --muted: #667085;
  --weak: #8a94a6;
  --border: #dde3ec;
  --focus: #8da8f2;
  --radius-control: 9px;
  --radius-card: 14px;
  --radius-feature: 16px;
  --shadow-card: 0 8px 24px rgba(26, 39, 68, .06);
  --shadow-float: 0 24px 60px rgba(20, 31, 55, .22);
  --code-font: "Cascadia Code", Consolas, "Courier New", monospace;
}

html { color-scheme: light; scroll-behavior: smooth; }
body {
  color: var(--text);
  background: var(--canvas);
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
a, button, input, select, textarea, [tabindex] { outline: none; }
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Common application shell. */
.app-shell { min-height: 100vh; background: var(--canvas); }
.sidebar {
  width: 220px;
  min-height: 100vh;
  padding: 25px 16px 22px;
  background: var(--sidebar-bg);
}
.brand, .login-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  color: #fff;
  text-decoration: none;
}
.brand { padding: 0 8px; }
.brand-mark {
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.32);
  border-radius: 11px;
  background: var(--secondary);
  font-family: var(--code-font);
  font-size: 1rem;
  font-weight: 800;
  letter-spacing: -2px;
}
.brand-copy, .login-brand > span:last-child { display: grid; gap: 2px; }
.brand-copy strong, .login-brand strong { color: #fff; font-size: .93rem; }
.brand-copy small, .login-brand small { color: rgba(255,255,255,.58); font-size: .66rem; letter-spacing: .04em; }
.role-label {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 17px 8px 28px;
  color: rgba(255,255,255,.68);
  font-size: .72rem;
}
.role-label > span { width: 7px; height: 7px; border-radius: 50%; background: #4ac3b6; box-shadow: 0 0 0 4px rgba(74,195,182,.12); }
.nav-caption { margin: 0 10px 9px; color: rgba(255,255,255,.36); font-size: .65rem; letter-spacing: .08em; }
.sidebar .nav { display: grid; gap: 5px; margin: 0 !important; }
.sidebar .nav-link {
  min-height: 43px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  color: rgba(255,255,255,.72);
  border: 1px solid transparent;
  border-radius: 9px;
  font-size: .83rem;
  font-weight: 600;
  text-decoration: none;
}
.sidebar .nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.sidebar .nav-link.active { color: #fff; border-color: rgba(97,221,208,.14); background: rgba(15,139,141,.22); }
.nav-symbol {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  display: grid;
  place-items: center;
  color: rgba(255,255,255,.7);
  border-radius: 7px;
  background: rgba(255,255,255,.07);
  font-size: .67rem;
  font-weight: 800;
}
.nav-link.active .nav-symbol { color: #fff; background: var(--secondary); }
.main-area { min-width: 0; background: var(--canvas); }
.topbar {
  min-height: 68px;
  padding: 13px 32px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.96);
}
.topbar-user { display: flex; align-items: center; gap: 10px; }
.user-avatar {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  color: var(--primary-dark);
  border-radius: 10px;
  background: var(--primary-soft);
  font-size: .82rem;
  font-weight: 800;
}
.user-copy { display: grid; gap: 2px; }
.user-copy strong { font-size: .8rem; }
.user-copy small { color: var(--muted); font-size: .68rem; }
.content-area { width: 100%; max-width: 1504px; margin: 0 auto; padding: 31px 32px 40px; }

/* Controls and reusable surfaces. */
.btn, .student-btn {
  min-height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 8px 15px;
  border-radius: var(--radius-control);
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}
.btn-sm { min-height: 35px; padding: 6px 12px; }
.btn-primary, .student-btn-primary { color: #fff; border: 1px solid var(--primary); background: var(--primary); }
.btn-primary:hover, .student-btn-primary:hover { color: #fff; border-color: var(--primary-dark); background: var(--primary-dark); }
.btn-outline-secondary, .student-btn-secondary { color: var(--primary-dark); border: 1px solid #b9c6e9; background: #fff; }
.btn-outline-secondary:hover, .student-btn-secondary:hover { color: var(--primary-dark); border-color: var(--primary); background: var(--primary-soft); }
.btn:disabled, .student-btn:disabled { opacity: .55; cursor: not-allowed; }
.alert { border-radius: var(--radius-control); }
.alert-danger { color: #9f3549; border-color: #efb9c2; background: var(--danger-soft); }
.student-workspace, .teacher-workspace { min-width: 0; max-width: 1380px; gap: 22px; }
.student-section, .teacher-panel, .start-confirm-card, .paper-card,
.student-stat-card, .teacher-stat-grid article, .analysis-stat-grid article,
.trend-summary-grid article, .wrong-card, .programming-question-card {
  border-color: var(--border);
  border-radius: var(--radius-card);
  background: var(--surface);
  box-shadow: var(--shadow-card);
}
.student-section, .teacher-panel { padding: 24px 26px; }
.student-section, .teacher-panel, .teacher-table { min-width: 0; max-width: 100%; }
.student-section-heading h2, .teacher-panel-heading h2 { color: var(--text); }
.student-kicker, .eyebrow {
  color: var(--secondary);
  font-size: .71rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: none;
}
.result-count { color: var(--muted); background: #f0f3f8; }
.paper-filter-card, .wrong-filter, .report-filter { border-color: var(--border); background: #f7f9fc; }
.filter-chip { color: #526078; border-color: var(--border); background: #fff; }
.filter-chip:hover { color: var(--primary-dark); border-color: #aebce4; }
.filter-chip.is-active { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: none; }
.filter-fields select, .wrong-filter select, .report-filter select, .report-filter input,
.inline-report-filter select, .login-card input {
  color: var(--text);
  border-color: #cfd7e5;
  border-radius: var(--radius-control);
  background: #fff;
}
.filter-fields select:focus, .wrong-filter select:focus, .report-filter select:focus,
.report-filter input:focus, .inline-report-filter select:focus, .login-card input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(53,89,199,.12);
}

/* Login: original two-column learning space. */
.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px;
  background: #eef2f8;
}
.login-shell {
  width: min(980px, 100%);
  min-height: 600px;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(360px, .85fr);
  overflow: hidden;
  border: 1px solid #d6deea;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(24,40,69,.16);
}
.login-intro {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 42px 46px;
  color: #fff;
  background: var(--sidebar-bg);
}
.login-intro-copy { margin: 58px 0 48px; }
.login-kicker { margin: 0 0 12px; color: #69cfc5; font-size: .75rem; font-weight: 800; letter-spacing: .08em; }
.login-intro h1 { margin: 0; font-size: clamp(2rem, 4vw, 3rem); line-height: 1.28; letter-spacing: -.03em; }
.login-intro-copy > p:last-child { max-width: 390px; margin: 20px 0 0; color: rgba(255,255,255,.67); font-size: .88rem; line-height: 1.8; }
.login-feature-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.login-feature-list li { display: flex; align-items: center; gap: 13px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,.11); }
.login-feature-list li > span { color: #69cfc5; font-family: var(--code-font); font-size: .71rem; font-weight: 800; }
.login-feature-list div { display: grid; gap: 3px; }
.login-feature-list strong { font-size: .78rem; }
.login-feature-list small { color: rgba(255,255,255,.55); font-size: .68rem; }
.login-card {
  width: auto;
  max-width: none;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 55px 48px;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.login-heading { display: block; margin-bottom: 32px; }
.login-heading p { margin: 0 0 7px; color: var(--secondary); font-size: .72rem; font-weight: 800; }
.login-heading h2 { margin: 0; font-size: 1.55rem; }
.login-heading > span { display: block; margin-top: 9px; color: var(--muted); font-size: .76rem; }
.login-card .form-label { display: block; margin-bottom: 7px; color: #46536a; font-size: .74rem; font-weight: 700; }
.login-card input { width: 100%; min-height: 45px; padding: 10px 12px; }
.login-card .btn { min-height: 45px; width: 100%; }
.login-help { margin: 18px 0 0; color: var(--weak); font-size: .69rem; text-align: center; }

/* Student workspace. */
.student-hero, .teacher-hero, .records-hero {
  position: relative;
  overflow: hidden;
  color: var(--text);
  border: 1px solid #d9e1f2;
  border-radius: var(--radius-feature);
  background: linear-gradient(120deg, #fff 0%, #f1f5ff 72%, #e8f6f4 100%);
  box-shadow: var(--shadow-card);
}
.student-hero { min-height: 156px; padding: 31px 34px 31px 39px; }
.student-hero::before, .teacher-hero::before, .records-hero::before {
  content: "";
  position: absolute;
  inset: 24px auto 24px 0;
  width: 5px;
  border-radius: 0 4px 4px 0;
  background: var(--secondary);
}
.student-hero h1 { max-width: 760px; margin: 7px 0 9px; color: var(--text); font-size: clamp(1.42rem, 2.6vw, 1.85rem); }
.student-hero p:last-child { color: var(--muted); }
.student-stat-grid { gap: 14px; }
.student-stat-card { min-height: 102px; padding: 20px 22px; }
.student-stat-card strong { color: var(--text); font-variant-numeric: tabular-nums; }
.student-stat-card > div > span { color: var(--muted); }
.stat-mark { border-radius: 11px; }
.stat-mark-purple, .stat-mark-blue { color: var(--primary-dark); background: var(--primary-soft); }
.stat-mark-teal { color: #087579; background: var(--secondary-soft); }
.paper-card { position: relative; overflow: hidden; padding: 23px; transition: border-color .15s ease, box-shadow .15s ease; }
.paper-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: var(--primary); }
.paper-card-scratch::before { background: var(--secondary); }
.paper-card:hover { transform: none; border-color: #bcc8e1; box-shadow: 0 12px 28px rgba(26,39,68,.09); }
.paper-tag { color: var(--primary-dark); background: var(--primary-soft); }
.paper-card-scratch .paper-tag:first-child { color: #086f71; background: var(--secondary-soft); }
.paper-tag-soft { color: #5f6a7d; background: #f0f3f8; }
.type-badge { color: #68501c; background: var(--warning-soft); }
.paper-description, .programming-note { color: var(--muted); }
.paper-metrics { border-color: var(--border); background: #f8fafc; }
.status-pill { color: #8b591b; background: var(--warning-soft); }
.status-pill-muted { color: #687386; background: #eef1f5; }
.status-pill-success { color: #11684f; background: var(--success-soft); }
.recent-subject, .history-number { color: #fff; background: var(--primary); }
.recent-row { border-color: #e9edf3; }
.filter-reset, .records-actions a, .wrong-detail-link, .teacher-panel-heading a,
.teacher-table-row > a, .teacher-row-actions a { color: var(--primary-dark); }
.student-empty-state { border-color: #cbd5e3; background: #fafbfd; }

/* Start confirmation and programming preview. */
.student-breadcrumb { color: var(--muted); }
.student-breadcrumb a { color: var(--primary-dark); }
.confirm-hero { color: var(--text); border: 1px solid #d9e1f2; border-radius: var(--radius-feature); background: linear-gradient(120deg, #fff, #eff4ff); box-shadow: var(--shadow-card); }
.confirm-hero h1 { color: var(--text); }
.confirm-hero p { color: var(--muted); }
.confirm-score { transform: none; color: #fff; border: 0; border-radius: var(--radius-card); background: var(--primary); box-shadow: none; }
.confirm-facts article { border-color: var(--border); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
.confirm-facts span { color: var(--muted); }
.confirm-icon { color: #087579; border-radius: 12px; background: var(--secondary-soft); }
.start-confirm-card ul { color: #536078; }
.programming-question-card pre { color: #23324d; border-left: 4px solid var(--primary); background: #f1f4f8; font-family: var(--code-font); }

/* Exam: all questions scroll in the left column; answer sheet stays on the right. */
.exam-body { color: var(--text); background: var(--exam-canvas); }
.exam-shell { --exam-accent: var(--primary); min-height: 100vh; background: var(--exam-canvas); }
.exam-topbar {
  min-height: 82px;
  padding: 13px 26px;
  border-bottom: 1px solid var(--border);
  background: rgba(255,255,255,.97);
  box-shadow: 0 5px 18px rgba(26,39,68,.05);
}
.exam-title-block h1 { color: var(--text); font-size: 1rem; }
.exam-title-block > span, .exam-back-link { color: var(--muted); }
.exam-back-link:hover { color: var(--primary-dark); }
.exam-progress-summary, .exam-timer, .save-state { border-color: var(--border); border-radius: 9px; background: #f8fafc; }
.exam-progress-summary span, .exam-timer span { color: #526078; }
.exam-progress-summary strong, .exam-timer strong { color: var(--primary-dark); font-variant-numeric: tabular-nums; }
.save-state[data-state="saved"], .save-state[data-state="idle"] { color: #11684f; background: var(--success-soft); }
.save-state[data-state="saving"] { color: var(--warning); background: var(--warning-soft); }
.save-state[data-state="error"] { color: var(--danger); background: var(--danger-soft); }
.exam-layout {
  width: min(1460px, calc(100% - 42px));
  grid-template-columns: minmax(0, 1fr) 290px;
  grid-template-rows: auto;
  align-items: start;
  gap: 20px;
  margin: 22px auto 44px;
}
.exam-question-area { grid-column: 1; grid-row: 1; gap: 18px; }
.answer-sheet { grid-column: 2; grid-row: 1; top: 103px; border-color: var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.answer-sheet-heading, .answer-sheet-footer { border-color: var(--border); }
.answer-sheet-heading > div:first-child span { color: var(--text); }
.answer-sheet-heading > div:first-child strong, .answer-sheet-footer p { color: #526078; }
.sheet-legend { color: var(--muted); }
.answer-sheet-number {
  color: #526078;
  border: 1px solid #cbd4e1;
  border-radius: 8px;
  background: #fff;
}
.answer-sheet-number.is-answered { color: var(--primary-dark); border-color: #9aaef4; background: var(--primary-soft); }
.answer-sheet-number.is-current { color: #fff; border-color: var(--primary); background: var(--primary); box-shadow: 0 0 0 3px rgba(53,89,199,.18); }
.answer-sheet-number.is-display-only { color: #8a5818; border-color: #e4b36f; border-style: dashed; background: var(--warning-soft); }
.legend-current, .legend-answered { background: var(--primary); }
.exam-question-panel {
  padding: 24px 26px 27px;
  border-color: var(--border);
  border-radius: var(--radius-card);
  background: #fff;
  box-shadow: var(--shadow-card);
  scroll-margin-top: 102px;
}
.question-meta-row { padding-bottom: 16px; }
.question-position { color: var(--text); }
.question-type-chip { color: #087579; background: var(--secondary-soft); }
.question-score-chip { color: #596579; background: #f0f3f8; }
.exam-question-stem { color: var(--text); font-size: 1rem; line-height: 1.7; }
.question-content-blocks { display: grid; gap: 12px; margin: 18px 0 16px; }
.question-content-text {
  color: var(--text);
  font-size: 1rem;
  line-height: 1.7;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  tab-size: 4;
}
.question-content-image { width: fit-content; max-width: min(100%, 380px); margin: 0; }
.question-content-image .exam-stem-image {
  max-width: min(100%, 380px);
  max-height: 280px;
  margin: 0 0 6px;
}
.question-content-image .image-hint { margin: 0; text-align: center; }
.question-content-missing {
  padding: 12px 14px;
  color: #934052;
  border: 1px solid #efc2ca;
  border-radius: 9px;
  background: var(--danger-soft);
}
.exam-code {
  padding: 18px 20px;
  color: #23324d;
  border: 1px solid #dbe2ec;
  border-left: 4px solid var(--primary);
  border-radius: 10px;
  background: #f1f4f8;
  font-family: var(--code-font);
  font-size: .9rem;
  line-height: 1.72;
  white-space: pre;
  overflow-x: auto;
}
.exam-stem-image {
  width: auto;
  max-width: 100%;
  max-height: 520px;
  display: block;
  object-fit: contain;
  border-color: var(--border);
  border-radius: 10px;
  background: #fff;
}
.image-hint { color: var(--muted); }
.answer-options { gap: 9px; margin-top: 20px; }
.answer-options legend { color: var(--muted); }
.option-surface { min-height: 48px; gap: 10px; padding: 9px 12px; border-color: #d6dde8; border-radius: 9px; background: #fff; }
.option-choice:hover .option-surface { border-color: #aebce4; background: #fafbff; }
.option-choice input:checked + .option-surface { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 2px rgba(53,89,199,.1); }
.option-key { width: 26px; height: 26px; flex-basis: 26px; color: #526078; border-color: #cbd4e1; border-radius: 7px; background: #f4f6f9; font-size: .76rem; }
.option-choice input:checked + .option-surface .option-key { color: #fff; border-color: var(--primary); background: var(--primary); }
.option-content { gap: 7px; line-height: 1.55; }
.option-content img { width: auto; max-width: min(100%, 180px); max-height: 110px; object-fit: contain; border-color: var(--border); background: #fff; }
.programming-display-note { color: #8a5818; border-color: #e4b36f; background: var(--warning-soft); }
.exam-submit-button, .exam-dialog-primary { color: #fff; border-color: var(--primary); border-radius: var(--radius-control); background: var(--primary); }
.exam-submit-button:hover, .exam-dialog-primary:hover { background: var(--primary-dark); }
.exam-dialog-secondary { color: var(--primary-dark); border-color: #b9c6e9; border-radius: var(--radius-control); background: #fff; }
.image-lightbox, .submit-confirm-dialog { border-radius: var(--radius-feature); box-shadow: var(--shadow-float); }
.image-lightbox img { max-width: min(92vw, 1500px); max-height: 88vh; object-fit: contain; }
.submit-dialog-mark { color: var(--primary-dark); background: var(--primary-soft); }
.submit-unanswered-warning { color: #8a5818; border-color: #e4b36f; background: var(--warning-soft); }

/* Results, history and mistake review. */
.result-hero {
  color: #fff;
  border-radius: var(--radius-feature);
  background: var(--primary);
  box-shadow: var(--shadow-card);
}
.result-hero .student-kicker, .records-hero .student-kicker, .teacher-hero .eyebrow { color: var(--secondary); }
.result-score-ring { border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.13); }
.result-stat-grid article, .result-time-card { border-color: var(--border); box-shadow: var(--shadow-card); }
.result-question { border-color: var(--border); border-radius: 11px; }
.result-question.is-correct { border-left-color: var(--success); }
.result-question.is-wrong { border-left-color: var(--danger); }
.result-question.is-unanswered { border-left-color: var(--warning); }
.result-option.is-selected { border-color: #e6a0ad; background: var(--danger-soft); }
.result-option.is-answer { border-color: #77c6ad; background: var(--success-soft); }
.result-option.is-answer > span { background: var(--success); }
.result-answer-grid .wrong-answer-value.is-incorrect { border: 1px solid #e6a0ad; background: var(--danger-soft); }
.result-answer-grid .wrong-answer-value.is-incorrect strong { color: var(--danger); }
.result-answer-grid .wrong-answer-value.is-correct { border: 1px solid #77c6ad; background: var(--success-soft); }
.result-answer-grid .wrong-answer-value.is-correct strong { color: var(--success); }
.result-explanation { background: #f1f4f8; }
.history-hero { border-color: #d9e1f2; border-radius: var(--radius-feature); background: linear-gradient(120deg, #fff, #eff4ff); box-shadow: var(--shadow-card); }
.history-hero > strong { color: var(--primary); }
.trend-summary-grid small { color: var(--primary-dark); }
.records-hero { padding: 30px 34px 30px 39px; }
.records-hero h1, .records-hero p, .records-hero-stats strong, .wrong-total strong { color: var(--text); }
.records-hero p, .records-hero-stats span, .wrong-total span { color: var(--muted); }
.wrong-hero { background: linear-gradient(120deg, #fff 0%, #f8f1f4 100%); }
.wrong-hero::before { background: var(--danger); }
.records-table { border-color: var(--border); border-radius: 11px; }
.records-table-head, .teacher-table-head { color: #596579; background: #f0f3f8; }
.records-row, .teacher-table-row { border-color: #e7ebf1; }
.wrong-card { border-left-color: var(--danger); }
.wrong-badges span, .wrong-badges .still-wrong { color: #a63c50; background: var(--danger-soft); }
.wrong-badges .now-correct { color: #11684f; background: var(--success-soft); }

.wrong-practice-hero { background: linear-gradient(120deg, #fff 0%, #eef8f5 100%); }
.wrong-practice-hero::before { background: var(--secondary); }
.wrong-book-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wrong-book-tabs a { display: grid; gap: 4px; padding: 16px 18px; color: var(--text); border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-soft); text-decoration: none; }
.wrong-book-tabs a:hover { border-color: #b7c5e6; transform: translateY(-1px); }
.wrong-book-tabs a.is-active { border-color: var(--primary); box-shadow: 0 0 0 2px var(--primary-soft); }
.wrong-book-tabs strong { font-size: .9rem; }
.wrong-book-tabs span { color: var(--muted); font-size: .72rem; }
.wrong-practice-messages { display: grid; gap: 8px; }
.practice-message { padding: 12px 15px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-size: .8rem; }
.practice-message-success { color: #11684f; border-color: #bce3d5; background: var(--success-soft); }
.practice-message-warning, .practice-message-error { color: #934052; border-color: #efc2ca; background: var(--danger-soft); }
.wrong-practice-card { border-left-color: var(--secondary); scroll-margin-top: 90px; }
.wrong-badges .practice-count { color: #176e69; background: var(--secondary-soft); }
.wrong-practice-form { display: grid; justify-items: start; gap: 16px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.wrong-practice-form fieldset { width: 100%; min-width: 0; margin: 0; padding: 0; border: 0; }
.wrong-practice-form legend { margin-bottom: 10px; color: var(--muted); font-size: .75rem; font-weight: 700; }
.practice-options { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
.practice-option { position: relative; display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; min-height: 58px; padding: 11px 13px; border: 1px solid var(--border); border-radius: 11px; background: #fff; cursor: pointer; }
.practice-option:hover { border-color: #aebee6; background: #f8faff; }
.practice-option:has(input:checked) { border-color: var(--primary); background: var(--primary-soft); box-shadow: 0 0 0 1px var(--primary); }
.practice-option:has(input:focus-visible) { outline: 3px solid rgba(54, 88, 214, .22); outline-offset: 2px; }
.practice-option input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.practice-option-key { display: grid; place-items: center; width: 30px; height: 30px; color: var(--primary-dark); border-radius: 8px; background: var(--primary-soft); font-family: var(--code-font); font-size: .75rem; font-weight: 800; }
.practice-option-content { min-width: 0; color: var(--text); font-size: .82rem; line-height: 1.65; }
.practice-option-content img { display: block; max-width: min(100%, 360px); max-height: 240px; margin-top: 7px; border: 1px solid var(--border); border-radius: 8px; object-fit: contain; background: #fff; cursor: zoom-in; }
.practice-lightbox-image { cursor: zoom-in; }
.mastery-empty .student-btn { margin-top: 12px; }

@media (max-width: 720px) {
  .wrong-book-tabs, .practice-options { grid-template-columns: 1fr; }
  .wrong-book-tabs a { padding: 14px 15px; }
  .wrong-practice-form { justify-items: stretch; }
  .wrong-practice-form > .student-btn { width: 100%; }
}

/* Teacher workspace follows the same visual language. */
.teacher-hero { padding: 30px 34px 30px 39px; }
.teacher-hero h1 { color: var(--text); }
.teacher-hero p { color: var(--muted); }
.teacher-hero .btn { color: var(--primary-dark); border-color: #b9c6e9; background: #fff; }
.teacher-stat-grid article, .analysis-stat-grid article { border-color: var(--border); box-shadow: var(--shadow-card); }
.teacher-stat-grid span, .analysis-stat-grid span, .teacher-page-heading p { color: var(--muted); }
.teacher-stat-grid strong, .analysis-stat-grid strong { color: var(--text); font-variant-numeric: tabular-nums; }
.teacher-panel { border-color: var(--border); box-shadow: var(--shadow-card); }
.teacher-table-row { color: #465267; }
.teacher-table-row strong { color: var(--text); }
.export-strip { color: var(--text); border-color: #cfd9f0; background: var(--primary-soft); }
.export-strip a { color: var(--primary-dark); border-color: #bdc9eb; }
.repeat-wrong-list article { border-color: var(--border); border-left-color: var(--danger); }
.question-analysis-heading > div:last-child { color: var(--danger); }
.question-metric-grid div { background: #f1f4f8; }
.option-counts span { background: #edf1f6; }
.wrong-student-details a { color: var(--primary-dark); background: var(--primary-soft); }

@media (max-width: 1050px) {
  .exam-layout { grid-template-columns: 1fr; grid-template-rows: auto auto; }
  .answer-sheet { grid-column: 1; grid-row: 1; position: static; }
  .exam-question-area { grid-column: 1; grid-row: 2; }
  .answer-sheet-grid { grid-template-columns: repeat(10, minmax(34px, 1fr)); }
}

@media (max-width: 720px) {
  html { scroll-behavior: auto; }
  .login-page { padding: 16px; }
  .login-shell { min-height: 0; grid-template-columns: 1fr; }
  .login-intro { padding: 26px 24px; }
  .login-intro-copy { margin: 36px 0 28px; }
  .login-intro h1 { font-size: 2rem; }
  .login-feature-list { display: none; }
  .login-card { padding: 34px 24px 30px; }
  .app-shell { display: block; }
  .sidebar { width: 100%; min-height: 0; padding: 16px; }
  .brand { padding: 0; }
  .role-label { margin: 10px 2px 14px; }
  .nav-caption { display: none; }
  .sidebar .nav { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sidebar .nav-link { min-height: 40px; }
  .topbar { min-height: 61px; padding: 11px 16px; }
  .user-copy small { display: none; }
  .content-area { padding: 22px 16px 32px; }
  .student-section, .teacher-panel { padding: 20px 17px; }
  .student-hero, .teacher-hero, .records-hero { padding: 25px 22px 25px 27px; }
  .student-stat-grid { grid-template-columns: 1fr; }
  .student-section-heading { align-items: flex-start; }
  .paper-card-grid { grid-template-columns: 1fr; }
  .student-paper-filter { padding: 5px 16px; }
  .student-filter-row { grid-template-columns: 1fr; gap: 8px; padding: 14px 0; }
  .student-filter-options { gap: 6px; }
  .student-filter-chip { min-height: 31px; padding: 5px 10px; }
  .student-filter-reset { padding-bottom: 3px; }
  .student-paper-list-heading { align-items: flex-start; flex-direction: column; padding: 18px; }
  .student-paper-list { padding: 0 18px; }
  .student-paper-row { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 20px 0; }
  .student-paper-document { width: 29px; height: 37px; margin: 1px 0 0; }
  .student-paper-document::before { width: 11px; height: 11px; }
  .student-paper-document span, .student-paper-document span::before, .student-paper-document span::after { left: 5px; width: 14px; }
  .student-paper-document span { top: 16px; }
  .student-paper-document span::before { top: 6px; left: 0; }
  .student-paper-document span::after { top: 12px; left: 0; width: 10px; }
  .student-paper-progress, .student-paper-action { grid-column: 2; }
  .student-paper-progress { grid-template-columns: auto auto auto; align-items: center; justify-content: start; column-gap: 8px; }
  .student-paper-progress > span:not(.status-pill) { margin-top: 0; }
  .student-paper-action { justify-content: flex-start; }
  .confirm-score { display: none; }
  .exam-topbar { padding: 14px 15px; }
  .exam-layout { width: calc(100% - 24px); margin-top: 12px; }
  .exam-question-panel { padding: 19px 16px 22px; scroll-margin-top: 12px; }
  .exam-question-stem, .question-content-text { font-size: .95rem; line-height: 1.68; }
  .question-content-image .exam-stem-image { max-width: 100%; max-height: 260px; }
  .exam-code { padding: 15px; font-size: .82rem; }
  .answer-sheet-grid { grid-template-columns: repeat(6, 1fr); }
  .answer-sheet-footer { display: block; }
  .teacher-hero, .teacher-page-heading { padding: 24px 21px; }
}

@media (max-width: 430px) {
  .sidebar .nav { grid-template-columns: 1fr; }
  .student-stat-card { min-height: 88px; }
  .filter-fields { grid-template-columns: 1fr; }
  .confirm-facts, .result-stat-grid, .result-time-card, .teacher-stat-grid, .analysis-stat-grid { grid-template-columns: 1fr; }
  .exam-live-status { grid-template-columns: 1fr 1fr; }
  .answer-sheet-grid { grid-template-columns: repeat(5, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Teacher paper acceptance: isolated from student attempts and reports. */
.teacher-hero-actions, .teacher-preview-mode-actions, .teacher-paper-actions, .teacher-preview-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 9px; }
.teacher-paper-heading { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 3px 2px 1px; }
.teacher-paper-heading h1 { margin: 4px 0 5px; color: var(--text); font-size: clamp(1.45rem, 2.5vw, 1.9rem); }
.teacher-paper-heading p:last-child { margin: 0; color: var(--muted); line-height: 1.6; }
.teacher-paper-filter { padding: 8px 24px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.teacher-filter-row { display: grid; grid-template-columns: 68px minmax(0, 1fr) auto; align-items: center; gap: 14px; min-height: 66px; border-bottom: 1px solid #e9edf3; }
.teacher-filter-row:last-child { border-bottom: 0; }
.teacher-filter-label { color: #425069; font-size: .84rem; font-weight: 800; }
.teacher-filter-options { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.teacher-filter-chip { min-height: 35px; padding: 7px 14px; border: 1px solid transparent; border-radius: 999px; color: #42516a; background: #f4f6f9; font: inherit; font-size: .82rem; cursor: pointer; }
.teacher-filter-chip:hover, .teacher-filter-chip:focus-visible { color: var(--primary-dark); border-color: #bdc9eb; background: var(--primary-soft); }
.teacher-filter-chip.is-active { color: #fff; border-color: var(--primary); background: var(--primary); }
.teacher-filter-reset { color: var(--primary-dark); font-size: .8rem; font-weight: 700; text-decoration: none; white-space: nowrap; }
.teacher-paper-list-panel { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.teacher-paper-list-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 22px 26px; border-bottom: 1px solid var(--border); }
.teacher-list-title { display: flex; align-items: center; gap: 10px; }
.teacher-list-title h2 { margin: 0; color: var(--text); font-size: 1.15rem; }
.teacher-list-mark { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; color: var(--primary-dark); background: var(--primary-soft); font-size: .78rem; font-weight: 800; }
.teacher-paper-list-heading > span { color: var(--muted); font-size: .8rem; }
.teacher-paper-list { padding: 0 26px; }
.teacher-paper-row { display: grid; grid-template-columns: 72px minmax(0, 1fr) auto auto; align-items: center; gap: 22px; min-height: 138px; padding: 19px 0; border-bottom: 1px dashed #dfe5ee; }
.teacher-paper-row:last-child { border-bottom: 0; }
.teacher-paper-document { position: relative; width: 45px; height: 54px; margin-left: 7px; border: 4px solid #bdc9d8; border-radius: 4px; }
.teacher-paper-document::before { content: ""; position: absolute; top: -4px; right: -4px; width: 16px; height: 16px; border-bottom: 4px solid #bdc9d8; border-left: 4px solid #bdc9d8; background: #fff; }
.teacher-paper-document span, .teacher-paper-document span::before, .teacher-paper-document span::after { position: absolute; left: 8px; width: 20px; height: 3px; border-radius: 2px; background: #d7dee8; content: ""; }
.teacher-paper-document span { top: 23px; }
.teacher-paper-document span::before { top: 8px; left: 0; }
.teacher-paper-document span::after { top: 16px; left: 0; width: 14px; }
.teacher-paper-main { min-width: 0; }
.teacher-paper-title-line { display: flex; align-items: center; flex-wrap: wrap; gap: 7px; }
.teacher-paper-title-line h3 { min-width: min(100%, 340px); margin: 0 8px 0 0; color: var(--text); font-size: 1.03rem; line-height: 1.55; }
.teacher-paper-main p { margin: 11px 0 0; color: #8793a6; font-size: .82rem; line-height: 1.6; }
.teacher-paper-row-state { align-self: start; padding-top: 7px; }
.teacher-paper-actions { justify-content: flex-end; flex-wrap: nowrap; }
.teacher-paper-empty { margin: 24px 0; }
.paper-publish-state { display: inline-flex; align-items: center; min-height: 27px; padding: 4px 9px; border-radius: 999px; font-size: .74rem; font-weight: 800; white-space: nowrap; }
.paper-publish-state.is-published { color: #11684f; background: var(--success-soft); }
.paper-publish-state.is-draft { color: #596579; background: #edf1f6; }
.teacher-preview-workspace { max-width: 1500px; }
.teacher-preview-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 26px 29px; border: 1px solid var(--border); border-radius: var(--radius-feature); background: linear-gradient(120deg, #fff, #eff4ff); box-shadow: var(--shadow-card); }
.teacher-preview-hero h1 { margin: 12px 0 6px; color: var(--text); font-size: clamp(1.55rem, 3vw, 2.2rem); }
.teacher-preview-hero p { max-width: 820px; margin: 0; color: var(--muted); line-height: 1.7; }
.teacher-preview-result { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.teacher-preview-result > div { padding: 17px 18px; border: 1px solid var(--border); border-radius: 11px; background: #fff; box-shadow: var(--shadow-card); }
.teacher-preview-result span { display: block; margin-bottom: 6px; color: var(--muted); font-size: .78rem; }
.teacher-preview-result strong { color: var(--text); font-size: 1.25rem; }
.teacher-preview-layout { display: grid; grid-template-columns: minmax(0, 1fr) 285px; align-items: start; gap: 20px; }
.teacher-preview-questions { display: grid; gap: 18px; min-width: 0; }
.teacher-preview-question { min-width: 0; scroll-margin-top: 20px; }
.teacher-preview-question.is-preview-correct { border-left: 4px solid var(--success); }
.teacher-preview-question.is-preview-wrong { border-left: 4px solid var(--danger); }
.teacher-preview-question.is-preview-unanswered { border-left: 4px solid var(--warning); }
.teacher-preview-sheet { position: sticky; top: 20px; }
.teacher-preview-sheet .answer-sheet-grid { grid-template-columns: repeat(5, 42px); gap: 8px; justify-content: start; }
.teacher-preview-sheet .answer-sheet-number { width: 42px; height: 42px; aspect-ratio: auto; }
.teacher-preview-sheet a.answer-sheet-number { display: grid; place-items: center; text-decoration: none; }
.teacher-preview-sheet .exam-submit-button { display: flex; width: 100%; align-items: center; justify-content: center; box-sizing: border-box; text-decoration: none; }
.answer-options:disabled { opacity: 1; }
.teacher-preview-option.is-preview-answer .option-surface { border-color: #77c6ad; background: var(--success-soft); }
.teacher-preview-option.is-preview-answer .option-key { color: #fff; border-color: var(--success); background: var(--success); }
.teacher-preview-option.is-preview-selected:not(.is-preview-answer) .option-surface { border-color: #e6a0ad; background: var(--danger-soft); }
.teacher-answer-review { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 17px; }
.teacher-answer-review > div, .teacher-answer-review > section { padding: 13px 14px; border: 1px solid var(--border); border-radius: 9px; background: #f8fafc; }
.teacher-answer-review, .teacher-answer-review > section, .teacher-answer-review section div { min-width: 0; }
.teacher-answer-review > section { grid-column: 1 / -1; }
.teacher-answer-review span { display: block; margin-bottom: 5px; color: var(--muted); font-size: .76rem; font-weight: 700; }
.teacher-answer-review strong, .teacher-answer-review section div { color: var(--text); line-height: 1.7; }

@media (max-width: 1050px) {
  .teacher-preview-layout { grid-template-columns: minmax(0, 1fr); }
  .teacher-preview-sheet { position: static; grid-column: 1; grid-row: 1; }
  .teacher-paper-row { grid-template-columns: 58px minmax(0, 1fr) auto; gap: 16px; }
  .teacher-paper-row-state { align-self: center; }
  .teacher-paper-actions { grid-column: 2 / -1; justify-content: flex-start; }
}

@media (max-width: 720px) {
  .teacher-paper-heading { align-items: flex-start; flex-direction: column; }
  .teacher-paper-filter { padding: 5px 16px; }
  .teacher-filter-row { grid-template-columns: 1fr; gap: 8px; padding: 15px 0; }
  .teacher-filter-options { gap: 6px; }
  .teacher-filter-chip { min-height: 32px; padding: 6px 11px; }
  .teacher-filter-reset { padding-bottom: 4px; }
  .teacher-paper-list-heading { align-items: flex-start; flex-direction: column; padding: 18px; }
  .teacher-paper-list { padding: 0 18px; }
  .teacher-paper-row { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; padding: 21px 0; }
  .teacher-paper-document { width: 30px; height: 38px; margin: 0; border-width: 3px; }
  .teacher-paper-document::before { top: -3px; right: -3px; width: 12px; height: 12px; border-width: 0 0 3px 3px; }
  .teacher-paper-document span, .teacher-paper-document span::before, .teacher-paper-document span::after { left: 5px; width: 15px; height: 2px; }
  .teacher-paper-document span { top: 16px; }
  .teacher-paper-document span::before { top: 6px; left: 0; }
  .teacher-paper-document span::after { top: 12px; left: 0; width: 10px; }
  .teacher-paper-row-state, .teacher-paper-actions { grid-column: 2; }
  .teacher-paper-row-state { justify-self: start; padding-top: 0; }
  .teacher-paper-actions { justify-content: flex-start; flex-wrap: wrap; }
  .teacher-preview-result { grid-template-columns: 1fr; }
  .teacher-preview-hero { align-items: flex-start; flex-direction: column; padding: 22px 19px; }
  .teacher-answer-review { grid-template-columns: 1fr; }
  .teacher-answer-review > section { grid-column: auto; }
}

/* Teaching resource library */
.resource-workspace, .resource-form-workspace { max-width: 1380px; }
.resource-messages { display: grid; gap: 8px; }
.resource-message { padding: 12px 16px; color: #176b54; border: 1px solid #a9ddca; border-radius: 10px; background: #eefaf5; font-size: .84rem; font-weight: 700; }
.resource-hero { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 30px 34px 30px 39px; border: 1px solid var(--border); border-radius: var(--radius-feature); background: linear-gradient(120deg, #fff, #eef5ff); box-shadow: var(--shadow-card); }
.resource-hero h1 { margin: 7px 0 8px; color: var(--text); font-size: clamp(1.55rem, 3vw, 2.1rem); }
.resource-hero p:last-child { max-width: 760px; margin: 0; color: var(--muted); line-height: 1.7; }
.resource-filter { display: grid; grid-template-columns: minmax(190px, 1.4fr) repeat(4, minmax(130px, .8fr)) auto; align-items: end; gap: 13px; padding: 20px 22px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.resource-filter label { display: grid; gap: 7px; color: #526078; font-size: .76rem; font-weight: 700; }
.resource-filter input, .resource-filter select, .resource-form-field input, .resource-form-field select, .resource-form-field textarea { width: 100%; min-height: 41px; box-sizing: border-box; padding: 9px 11px; color: var(--text); border: 1px solid #ccd5e3; border-radius: 8px; background: #fff; font: inherit; }
.resource-form-field textarea { min-height: 125px; resize: vertical; }
.resource-filter input:focus, .resource-filter select:focus, .resource-form-field input:focus, .resource-form-field select:focus, .resource-form-field textarea:focus { outline: 3px solid rgba(82,103,232,.13); border-color: var(--primary); }
.resource-filter-actions, .resource-form-actions { display: flex; align-items: center; gap: 8px; }
.resource-panel { overflow: hidden; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.resource-panel-heading { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 21px 25px; border-bottom: 1px solid var(--border); }
.resource-panel-heading > div { display: flex; align-items: center; gap: 10px; }
.resource-panel-heading h2 { margin: 0; color: var(--text); font-size: 1.15rem; }
.resource-panel-heading > span { color: var(--muted); font-size: .8rem; }
.resource-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 0 25px; }
.resource-card { display: grid; grid-template-columns: 58px minmax(0, 1fr); grid-template-rows: 1fr auto; gap: 13px 17px; padding: 23px 0; border-bottom: 1px dashed #dfe5ee; }
.resource-card:nth-child(odd) { padding-right: 24px; border-right: 1px dashed #dfe5ee; }
.resource-card:nth-child(even) { padding-left: 24px; }
.resource-card:only-child { grid-column: 1 / -1; padding-right: 0; border-right: 0; }
.resource-file-mark { width: 54px; height: 62px; display: grid; place-items: end center; box-sizing: border-box; padding: 7px 4px; color: #4355aa; border: 2px solid #b7c3e8; border-radius: 7px; background: #f1f4ff; font-size: .65rem; font-weight: 900; letter-spacing: .03em; }
.resource-card-main { min-width: 0; }
.resource-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.resource-tags span { padding: 4px 8px; color: #53627a; border-radius: 999px; background: #f0f3f8; font-size: .68rem; font-weight: 700; }
.resource-card h3 { margin: 10px 0 6px; color: var(--text); font-size: 1rem; line-height: 1.5; }
.resource-card-main > p { min-height: 42px; margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.7; }
.resource-meta { display: flex; flex-wrap: wrap; gap: 6px 13px; margin-top: 10px; color: #8994a7; font-size: .69rem; }
.resource-meta span:first-child { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-card-actions { grid-column: 2; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.resource-card-actions form { margin: 0; }
.resource-delete-button { min-height: 36px; padding: 7px 12px; color: var(--danger); border: 1px solid #e8b3bd; border-radius: 8px; background: #fff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
.resource-delete-button:hover { background: var(--danger-soft); }
.resource-empty { grid-column: 1 / -1; }
.resource-form-card { max-width: 820px; padding: 27px 30px; border: 1px solid var(--border); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-card); }
.resource-form-card form { display: grid; gap: 18px; }
.resource-form-field { display: grid; gap: 7px; }
.resource-form-field > label { color: #435069; font-size: .82rem; font-weight: 800; }
.resource-form-field > label span { color: var(--danger); }
.resource-form-field small { color: var(--muted); font-size: .72rem; line-height: 1.6; }
.resource-form-field.has-error input, .resource-form-field.has-error select, .resource-form-field.has-error textarea { border-color: var(--danger); }
.resource-field-error, .resource-form-errors { color: #a83e50; font-size: .75rem; font-weight: 700; }
.resource-current-file { display: flex; justify-content: space-between; gap: 20px; padding: 13px 15px; border-radius: 8px; background: #f3f6fa; color: var(--muted); font-size: .78rem; }
.resource-current-file strong { color: var(--text); }

@media (max-width: 1100px) {
  .resource-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resource-filter-actions { grid-column: 1 / -1; }
}
@media (max-width: 760px) {
  .resource-hero { align-items: flex-start; flex-direction: column; padding: 24px 21px; }
  .resource-filter { grid-template-columns: 1fr; padding: 17px; }
  .resource-filter-actions { grid-column: auto; }
  .resource-panel-heading { align-items: flex-start; flex-direction: column; padding: 18px; }
  .resource-grid { grid-template-columns: 1fr; padding: 0 18px; }
  .resource-card:nth-child(odd), .resource-card:nth-child(even) { padding: 21px 0; border-right: 0; }
  .resource-form-card { padding: 21px 17px; }
  .resource-current-file { flex-direction: column; gap: 4px; }
}