:root {
  --navy: #121c32;
  --navy-2: #1d2c4d;
  --blue: #00a8e8;
  --blue-soft: #eaf8fd;
  --coral: #f2765b;
  --green: #5b9b78;
  --paper: #ffffff;
  --bg: #f4f6fa;
  --ink: #202a3d;
  --muted: #7c8596;
  --line: #e3e7ee;
  --shadow: 0 24px 70px rgba(32, 48, 78, .11);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background:
    radial-gradient(circle at 85% 0%, rgba(0, 168, 232, .1), transparent 26rem),
    radial-gradient(circle at 0% 45%, rgba(242, 118, 91, .07), transparent 28rem),
    var(--bg);
  font-family: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
}

button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
.brand-button { padding: 0; border: 0; color: inherit; background: none; text-align: left; }

.loading-screen, .fatal-card {
  min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 12px;
  color: var(--muted); background: var(--bg);
}
.fatal-card { min-height: auto; width: min(620px,calc(100% - 40px)); margin: 15vh auto; padding: 40px; display: block; border: 1px solid var(--line); border-radius: 24px; background: #fff; }
.fatal-card h1 { color: var(--ink); }

.auth-wrap {
  min-height: 100vh; display: grid; grid-template-columns: 1.05fr .95fr;
  background: radial-gradient(circle at 85% 10%,rgba(0,168,232,.12),transparent 25rem),var(--bg);
}
.auth-intro { padding: 12vh 8vw; display: flex; flex-direction: column; justify-content: center; color: #fff; background: linear-gradient(145deg,#101a30,#22365d); }
.auth-intro h1 { margin: 20px 0; font-size: clamp(44px,5vw,72px); line-height: 1.12; letter-spacing: -.06em; }
.auth-intro h1 em { color: var(--coral); font-style: normal; }
.auth-intro p { color: rgba(255,255,255,.6); font-size: 14px; line-height: 1.9; }
.auth-features { margin-top: 40px; display: flex; flex-wrap: wrap; gap: 9px; }
.auth-features span { padding: 8px 12px; border: 1px solid rgba(255,255,255,.12); border-radius: 99px; color: #9bddf7; font-size: 10px; }
.auth-panel { width: min(430px,calc(100% - 40px)); margin: auto; padding: 35px; border: 1px solid var(--line); border-radius: 27px; background: rgba(255,255,255,.94); box-shadow: var(--shadow); }
.auth-role-tabs { padding: 5px; display: grid; grid-template-columns: 1fr 1fr; border-radius: 13px; background: #f0f3f7; }
.auth-role-tabs button { padding: 10px; border: 0; border-radius: 9px; color: var(--muted); background: transparent; cursor: pointer; font-size: 12px; }
.auth-role-tabs button.active { color: #fff; background: var(--navy); box-shadow: 0 7px 15px rgba(18,28,50,.15); }
.auth-title h2 { margin: 27px 0 5px; font-size: 25px; }
.auth-title p { margin: 0 0 23px; color: var(--muted); font-size: 11px; }
#authForm label,#resetPasswordForm label { display: block; margin: 13px 0; color: #5e687a; font-size: 11px; font-weight: 700; }
#authForm input,#resetPasswordForm input { width: 100%; margin-top: 7px; padding: 12px 13px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: #fafbfc; font: inherit; font-size: 12px; }
#authForm input:focus,#resetPasswordForm input:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(0,168,232,.08); }
.auth-submit { width: 100%; margin-top: 20px; padding: 13px; border: 0; border-radius: 11px; color: #fff; background: var(--navy); cursor: pointer; font-size: 12px; font-weight: 800; }
.auth-switch { width: 100%; margin-top: 14px; border: 0; color: var(--blue); background: transparent; cursor: pointer; font-size: 11px; }
.auth-switch.subtle { margin-top: 6px; color: var(--muted); }
.setup-link { display: block; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--line); color: var(--coral); text-align: center; text-decoration: none; font-size: 10px; }

.personal-hero { min-height: 210px; padding: 50px 5px 35px; display: flex; align-items: center; justify-content: space-between; }
.personal-hero h1 { margin: 14px 0 8px; font-size: clamp(34px,4vw,49px); letter-spacing: -.05em; }
.personal-hero p { margin: 0; color: var(--muted); font-size: 12px; }
.overall-rate { width: 110px; height: 110px; margin-right: 35px; display: grid; place-content: center; text-align: center; border: 9px solid #e8f7fc; border-top-color: var(--blue); border-radius: 50%; }
.overall-rate strong,.overall-rate span { display: block; }
.overall-rate strong { font-size: 25px; }.overall-rate span { margin-top: 3px; color: var(--muted); font-size: 9px; }
.progress-panel { margin-bottom: 20px; padding: 25px 28px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: 0 12px 35px rgba(30,45,75,.06); }
.progress-head { display: flex; justify-content: space-between; align-items: flex-end; }
.progress-head span,.progress-head strong { display: block; }.progress-head span { color: var(--muted); font-size: 10px; }.progress-head strong { margin-top: 4px; font-size: 19px; }.progress-head b { color: var(--blue); font-size: 11px; }
.progress-head-actions { display: flex; align-items: center; gap: 12px; }
.progress-head-actions button { padding: 9px 14px; border: 1px solid #ed9a79; border-radius: 99px; color: #b94f27; background: #fff4ee; box-shadow: 0 5px 14px rgba(185,79,39,.10); cursor: pointer; font-size: 11px; font-weight: 800; }
.progress-head-actions button:hover { border-color: #dc7149; background: #ffe9df; }
.progress-track { height: 9px; margin: 17px 0 22px; overflow: hidden; border-radius: 99px; background: #edf0f4; }
.progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg,var(--blue),#61ccec); }
.accuracy-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
.accuracy-card { padding: 12px 15px; display: grid; grid-template-columns: 1fr auto; align-items: center; border-radius: 12px; background: #f6f8fb; }
.accuracy-card span { font-size: 11px; font-weight: 700; }.accuracy-card strong { color: var(--green); font-size: 15px; }.accuracy-card small { margin-top: 4px; color: var(--muted); font-size: 9px; }
.reset-progress-overlay { position: fixed; inset: 0; z-index: 2000; padding: 22px; display: grid; place-items: center; background: rgba(13,23,42,.58); backdrop-filter: blur(7px); }
.reset-progress-dialog { width: min(560px,100%); padding: 28px; border: 1px solid rgba(255,255,255,.7); border-radius: 24px; background: #fff; box-shadow: 0 30px 90px rgba(8,18,35,.3); }
.reset-dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; }
.reset-dialog-head h2 { margin: 8px 0 0; font-size: 26px; letter-spacing: -.035em; }
.reset-dialog-head > button { width: 34px; height: 34px; border: 0; border-radius: 50%; color: #687386; background: #f1f3f6; cursor: pointer; font-size: 22px; }
.reset-progress-dialog > p { margin: 14px 0 18px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.reset-type-list { display: grid; gap: 10px; }
.reset-type-choice { padding: 14px 15px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fafbfc; cursor: pointer; }
.reset-type-choice:has(input:checked) { border-color: #73c9e8; background: #effaff; box-shadow: inset 0 0 0 1px #b9e7f7; }
.reset-type-choice input { width: 17px; height: 17px; accent-color: var(--blue); }
.reset-type-choice b,.reset-type-choice small { display: block; }
.reset-type-choice b { font-size: 13px; }.reset-type-choice small { margin-top: 3px; color: var(--muted); font-size: 10px; }
.reset-type-choice i { color: #157da5; font-size: 10px; font-style: normal; }
.reset-preserve-note { margin-top: 14px; padding: 12px 14px; border-radius: 12px; color: #567061; background: #edf8f1; font-size: 11px; line-height: 1.6; }
.reset-dialog-actions { margin-top: 20px; display: flex; justify-content: flex-end; gap: 10px; }
.button.danger-reset { color: #fff; border-color: #c54e4e; background: #c54e4e; }
.dashboard-modes { padding-bottom: 45px; }.dashboard-modes .mode-card { min-height: 235px; }

.question-tools { display: flex; align-items: center; gap: 14px; }
.mark-button { padding: 6px 10px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: #fff; cursor: pointer; font-size: 10px; }
.mark-button.active { color: #a66c10; border-color: #efd79f; background: #fff9ea; }
.auto-hint { align-self: center; color: #9aa2b0; font-size: 10px; }
.practice-nav { justify-content: space-between; }
.practice-complete { margin-top: 50px; }.practice-complete .button { margin-top: 20px; }
.collection-tabs { display: flex; gap: 8px; margin-bottom: 18px; }
.collection-tabs button { padding: 10px 18px; border: 1px solid var(--line); border-radius: 99px; color: var(--muted); background: #fff; cursor: pointer; font-size: 11px; }
.collection-tabs button.active { color: #fff; border-color: var(--navy); background: var(--navy); }

.admin-kpis { display: grid; grid-template-columns: repeat(4,1fr); gap: 13px; margin-bottom: 18px; }
.admin-kpis > div { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; }
.admin-kpis strong,.admin-kpis span { display: block; }.admin-kpis strong { font-size: 27px; }.admin-kpis span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.admin-head { gap: 18px; }
.head-actions { display: flex; gap: 9px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.card-title-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; margin-bottom: 18px; }
.card-title-row h2 { margin-bottom: 6px; }
.admin-form { display: grid; grid-template-columns: repeat(3,1fr); gap: 13px; align-items: end; }
.admin-form label { color: #5e687a; font-size: 11px; font-weight: 700; }
.admin-form input,.admin-form select { width: 100%; margin-top: 7px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 11px; outline: none; color: var(--ink); background: #fafbfc; font: inherit; font-size: 12px; }
.admin-form input:focus,.admin-form select:focus { border-color: var(--blue); background: #fff; box-shadow: 0 0 0 3px rgba(0,168,232,.08); }
.reset-highlight { margin-bottom: 18px; padding: 18px 20px; display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid #bfe8f6; border-radius: 18px; background: linear-gradient(135deg,#edfbff,#fff); box-shadow: 0 14px 35px rgba(0,168,232,.08); }
.reset-highlight span,.reset-highlight p { color: var(--muted); font-size: 11px; }
.reset-highlight strong { display: block; margin: 6px 0 3px; color: #087eaa; font-size: 28px; letter-spacing: .06em; }
.reset-highlight p { margin: 0; }
.role-pill,.status-pill { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.role-pill.user { color: #087eaa; background: var(--blue-soft); }
.role-pill.institution { color: #8a5a13; background: #fff4d9; }
.role-pill.admin { color: #fff; background: var(--navy); }
.status-pill.active { color: #3e7f5c; background: #eaf6ef; }
.status-pill.used { color: #697385; background: #eef1f5; }
.status-pill.expired { color: #b15943; background: #fff0ec; }
.row-actions { display: flex; gap: 7px; align-items: center; }
.tiny-button.danger { color: #fff; border-color: var(--coral); background: var(--coral); }
.tiny-button:disabled { opacity: .45; cursor: not-allowed; }
.management-card { margin-bottom: 18px; padding: 25px; border: 1px solid var(--line); border-radius: 20px; background: #fff; }
.management-card h2 { margin: 0 0 18px; font-size: 16px; }.muted { color: var(--muted); font-size: 11px; }
.card-title-row h2 { margin: 0 0 6px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 11px; }
th,td { padding: 12px 10px; border-bottom: 1px solid #edf0f4; text-align: left; white-space: nowrap; }
th { color: var(--muted); font-weight: 600; } td code,.invite-item code { color: #087eaa; font-weight: 800; }
.invite-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 9px; }
.invite-item { padding: 13px; display: flex; justify-content: space-between; border-radius: 10px; background: #f5f7fa; font-size: 10px; }
.invite-item span { color: var(--muted); }

.shell { min-height: 100vh; display: flex; flex-direction: column; }
.site-header {
  width: min(1180px, calc(100% - 40px));
  height: 78px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.brand { display: flex; align-items: center; gap: 12px; cursor: pointer; }
.brand-mark {
  width: 42px; height: 42px; display: grid; place-items: center;
  color: #fff; background: var(--navy); border-radius: 13px 13px 13px 5px;
  font-weight: 900; box-shadow: 0 9px 20px rgba(18, 28, 50, .2);
}
.brand-name, .brand-sub { display: block; }
.brand-name { font-size: 16px; font-weight: 900; }
.brand-sub { margin-top: 2px; color: var(--blue); font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.header-right { display: flex; align-items: center; gap: 10px; }
.up-tag, .mistake-pill {
  padding: 9px 14px; border: 1px solid var(--line); border-radius: 99px;
  background: rgba(255,255,255,.75); font-size: 12px;
}
.up-tag strong { color: var(--blue); }
.mistake-pill { cursor: pointer; }
.mistake-pill b { color: var(--coral); }

.main { width: min(1180px, calc(100% - 40px)); margin: 0 auto; flex: 1; }
.home-hero {
  min-height: 330px; padding: 60px 8px 45px;
  display: flex; align-items: center; justify-content: space-between;
}
.eyebrow { color: var(--blue); font-size: 11px; font-weight: 800; letter-spacing: .24em; }
.home-hero h1 {
  margin: 17px 0 18px; font-size: clamp(40px, 5.4vw, 67px);
  line-height: 1.11; letter-spacing: -.055em; font-weight: 950;
}
.home-hero h1 em { color: var(--coral); font-style: normal; }
.home-hero p { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.hero-seal {
  width: 150px; height: 150px; margin-right: 55px;
  display: grid; place-items: center; position: relative;
  color: #fff; background: var(--navy); border-radius: 48px 48px 48px 17px;
  transform: rotate(4deg); box-shadow: 0 28px 55px rgba(18,28,50,.2);
}
.hero-seal::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 38px 38px 38px 12px; }
.hero-seal strong { font-size: 54px; font-weight: 950; }
.hero-seal span { position: absolute; bottom: 25px; color: #8edfff; font-size: 10px; font-weight: 700; letter-spacing: .16em; }

.mode-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 19px; padding-bottom: 60px; }
.mode-grid.dashboard-modes { grid-template-columns: repeat(4, 1fr); }
.mode-card {
  min-height: 278px; padding: 28px; position: relative; overflow: hidden;
  border: 1px solid var(--line); border-radius: 25px; background: rgba(255,255,255,.88);
  box-shadow: 0 14px 40px rgba(37,51,78,.07); cursor: pointer; transition: .25s ease; color: var(--ink); text-align: left;
}
.mode-card:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.mode-card.featured { color: #fff; border-color: var(--navy); background: linear-gradient(145deg, var(--navy), var(--navy-2)); }
.mode-icon {
  width: 52px; height: 52px; display: grid; place-items: center;
  border-radius: 16px; color: var(--blue); background: var(--blue-soft);
  font-size: 21px; font-weight: 900;
}
.featured .mode-icon { color: #fff; background: rgba(255,255,255,.12); }
.mistake-mode .mode-icon { color: var(--coral); background: #fff0ec; }
.practical-mode .mode-icon { color: #2f6fe9; background: #edf4ff; }
.mode-card h2 { margin: 26px 0 9px; font-size: 24px; letter-spacing: -.04em; }
.mode-card p { min-height: 45px; margin: 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.featured p { color: rgba(255,255,255,.62); }
.mode-meta { margin-top: 25px; display: flex; align-items: center; justify-content: space-between; }
.mode-meta span { color: var(--muted); font-size: 11px; }
.featured .mode-meta span { color: #8fdfff; }
.mode-arrow {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: 50%; color: #fff; background: var(--navy); font-size: 17px;
}
.featured .mode-arrow { color: var(--navy); background: #fff; }
.mistake-mode .mode-arrow { background: var(--coral); }
.practical-mode .mode-arrow { background: #2f6fe9; }
.card-number { position: absolute; top: 18px; right: 23px; color: rgba(123,134,153,.12); font-size: 60px; font-weight: 900; }
.featured .card-number { color: rgba(255,255,255,.07); }

.view-head { padding: 45px 0 28px; display: flex; align-items: flex-start; justify-content: space-between; }
.back-button { border: 0; padding: 0; color: var(--muted); background: none; cursor: pointer; font-size: 12px; }
.view-head h1 { margin: 15px 0 7px; font-size: clamp(30px, 4vw, 44px); letter-spacing: -.045em; }
.view-head p { margin: 0; color: var(--muted); font-size: 13px; }
.head-count { padding: 11px 17px; border-radius: 99px; color: #5e687b; background: #fff; border: 1px solid var(--line); font-size: 12px; }
button.head-count { cursor: pointer; }

.practice-types { display: grid; grid-template-columns: repeat(4, 1fr); gap: 15px; padding: 15px 0 70px; }
.type-card {
  min-height: 220px; padding: 25px; border: 1px solid var(--line); border-radius: 22px;
  background: #fff; cursor: pointer; transition: .22s; text-align: left;
}
.type-card:hover { transform: translateY(-4px); border-color: #acdcef; box-shadow: 0 18px 40px rgba(31,50,80,.09); }
.type-symbol {
  width: 45px; height: 45px; display: grid; place-items: center;
  border-radius: 14px; color: var(--blue); background: var(--blue-soft); font-weight: 900;
}
.type-card:nth-child(2) .type-symbol { color: var(--green); background: #eaf4ee; }
.type-card:nth-child(3) .type-symbol { color: #8a67a1; background: #f2ecf6; }
.type-card:nth-child(4) .type-symbol { color: var(--coral); background: #fff0ec; }
.type-card h2 { margin: 28px 0 8px; font-size: 19px; }
.type-card p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.type-card small { display: block; margin-top: 22px; color: #a2a9b5; }

.quiz-layout { display: grid; grid-template-columns: 220px 1fr; gap: 22px; padding: 25px 0 60px; align-items: start; }
.quiz-side {
  padding: 22px; border: 1px solid var(--line); border-radius: 20px; background: rgba(255,255,255,.75);
}
.quiz-side h3 { margin: 0 0 18px; font-size: 13px; }
.side-stat { margin: 11px 0; display: flex; justify-content: space-between; color: var(--muted); font-size: 12px; }
.side-stat b { color: var(--ink); }
.side-stat .good { color: var(--green); }
.side-stat .bad { color: var(--coral); }
.side-divider { height: 1px; margin: 18px 0; background: var(--line); }
.side-action { width: 100%; padding: 10px; border: 1px solid var(--line); border-radius: 11px; color: var(--muted); background: #fff; cursor: pointer; font-size: 11px; }

.question-card {
  min-height: 550px; padding: 34px 40px 28px; display: flex; flex-direction: column;
  border: 1px solid var(--line); border-radius: 25px; background: #fff; box-shadow: var(--shadow);
}
.question-top { display: flex; justify-content: space-between; align-items: center; }
.type-badge { padding: 6px 12px; border-radius: 99px; color: #087eaa; background: var(--blue-soft); font-size: 10px; font-weight: 800; }
.type-badge.boolean { color: #4e7e64; background: #e9f3ed; }
.type-badge.multiple { color: #785a90; background: #f1eaf5; }
.question-index { color: #a3aab7; font-size: 10px; font-weight: 700; letter-spacing: .1em; }
.question-title { margin: 31px 0 8px; font-size: clamp(19px, 2.2vw, 26px); line-height: 1.55; letter-spacing: -.025em; }
.question-tip { margin: 0 0 22px; color: #9aa2b0; font-size: 11px; }
.options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.option {
  min-height: 62px; padding: 12px 15px; display: flex; align-items: center;
  border: 1px solid var(--line); border-radius: 14px; color: var(--ink); background: #fff;
  cursor: pointer; text-align: left; transition: .16s ease;
}
.option:hover:not(:disabled) { transform: translateY(-1px); border-color: #91d0e8; }
.option-letter {
  flex: 0 0 auto; width: 32px; height: 32px; margin-right: 12px; display: grid; place-items: center;
  border-radius: 9px; color: #747d8d; background: #f1f3f7; font-size: 11px; font-weight: 800;
}
.option span:last-child { font-size: 13px; line-height: 1.45; }
.option.selected { border-color: var(--blue); background: #f2fbfe; }
.option.selected .option-letter { color: #fff; background: var(--blue); }
.option.correct { border-color: #79ad90; background: #f0f8f3; }
.option.correct .option-letter { color: #fff; background: var(--green); }
.option.wrong { border-color: #ed8b73; background: #fff3ef; }
.option.wrong .option-letter { color: #fff; background: var(--coral); }
.answer-result {
  margin-top: 18px; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center;
  border-radius: 13px; color: #47725c; background: #eef7f2; font-size: 12px;
}
.answer-result.bad { color: #a4513d; background: #fff1ec; }
.analysis-toggle { border: 0; padding: 7px 12px; border-radius: 8px; color: #fff; background: var(--navy); cursor: pointer; font-size: 10px; font-weight: 700; }
.analysis {
  margin-top: 10px; padding: 15px 17px; border-left: 3px solid var(--blue); border-radius: 9px;
  color: #496575; background: #edf8fc; font-size: 11px; line-height: 1.7; animation: reveal .22s ease;
}
.analysis b { display: block; margin-bottom: 3px; color: #237695; }
.question-actions { margin-top: auto; padding-top: 23px; border-top: 1px solid #edf0f4; display: flex; justify-content: flex-end; gap: 9px; }
.button {
  padding: 11px 18px; border: 1px solid var(--line); border-radius: 11px;
  color: var(--muted); background: #fff; cursor: pointer; font-size: 12px; font-weight: 700;
}
.button.primary { min-width: 140px; color: #fff; border-color: var(--navy); background: var(--navy); }
.button.primary:hover { background: #263755; }

.exam-intro {
  max-width: 820px; margin: 35px auto 70px; padding: 42px;
  border: 1px solid var(--line); border-radius: 27px; background: #fff; box-shadow: var(--shadow);
}
.exam-intro-top { display: flex; gap: 28px; align-items: center; }
.clock-graphic {
  flex: 0 0 auto; width: 116px; height: 116px; display: grid; place-items: center;
  border-radius: 36px; color: #fff; background: var(--navy); font-size: 27px; font-weight: 900;
}
.exam-intro h2 { margin: 0 0 8px; font-size: 27px; }
.exam-intro p { margin: 0; color: var(--muted); font-size: 12px; line-height: 1.7; }
.exam-rules { margin: 32px 0; display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.rule { padding: 17px 12px; border-radius: 14px; background: #f6f8fb; text-align: center; }
.rule strong, .rule span { display: block; }
.rule strong { font-size: 22px; }
.rule span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.start-exam { width: 100%; padding: 14px; border: 0; border-radius: 13px; color: #fff; background: var(--navy); cursor: pointer; font-weight: 800; }

.exam-bar {
  position: sticky; top: 0; z-index: 5; margin: 0 -20px; padding: 13px 20px;
  display: flex; align-items: center; justify-content: space-between;
  background: rgba(244,246,250,.94); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line);
}
.exam-title { font-size: 13px; font-weight: 800; }
.exam-progress { color: var(--muted); font-size: 11px; }
.timer { padding: 9px 15px; border-radius: 99px; color: #fff; background: var(--navy); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.timer.urgent { background: var(--coral); animation: pulse 1s infinite; }
.exam-layout { display: grid; grid-template-columns: 1fr 255px; gap: 20px; padding: 25px 0 55px; align-items: start; }
.exam-card .options { margin-bottom: 25px; }
.exam-nav { position: sticky; top: 78px; padding: 19px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.exam-nav h3 { margin: 0 0 13px; font-size: 12px; }
.number-grid { max-height: 330px; overflow: auto; display: grid; grid-template-columns: repeat(6,1fr); gap: 6px; }
.number-button {
  aspect-ratio: 1; border: 1px solid var(--line); border-radius: 7px; color: var(--muted); background: #fff; cursor: pointer; font-size: 9px;
}
.number-button.answered { color: #fff; border-color: var(--blue); background: var(--blue); }
.number-button.current { outline: 2px solid var(--coral); outline-offset: 1px; }
.submit-exam { width: 100%; margin-top: 15px; padding: 11px; border: 0; border-radius: 10px; color: #fff; background: var(--coral); cursor: pointer; font-size: 11px; font-weight: 800; }

.result-card { max-width: 850px; margin: 40px auto 70px; padding: 42px; border: 1px solid var(--line); border-radius: 27px; background: #fff; box-shadow: var(--shadow); text-align: center; }
.score-ring {
  width: 160px; height: 160px; margin: 5px auto 25px; display: grid; place-items: center; position: relative;
  background: conic-gradient(var(--blue) var(--score), #e9f7fc 0); border-radius: 50%;
}
.score-ring::before { content: ""; position: absolute; inset: 11px; border-radius: 50%; background: #fff; }
.score-ring > div { position: relative; }
.score-ring strong, .score-ring span { display: block; }
.score-ring strong { font-size: 39px; }
.score-ring span { color: var(--muted); font-size: 10px; }
.result-card h2 { margin: 0 0 8px; font-size: 27px; }
.result-card > p { color: var(--muted); font-size: 12px; }
.result-stats { margin: 30px 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.result-stat { padding: 18px 10px; border-radius: 14px; background: #f5f7fa; }
.result-stat b, .result-stat span { display: block; }
.result-stat b { font-size: 20px; }
.result-stat span { margin-top: 5px; color: var(--muted); font-size: 10px; }
.result-actions { display: flex; justify-content: center; gap: 10px; }

.mistake-list { display: grid; gap: 12px; padding: 10px 0 60px; }
.empty {
  min-height: 340px; display: grid; place-items: center; text-align: center;
  border: 1px dashed #ccd3df; border-radius: 23px; background: rgba(255,255,255,.5);
}
.empty-icon { font-size: 38px; }
.empty h2 { margin: 12px 0 7px; font-size: 20px; }
.empty p { margin: 0; color: var(--muted); font-size: 12px; }
.mistake-card { padding: 21px 24px; display: grid; grid-template-columns: 1fr auto; gap: 16px; border: 1px solid var(--line); border-radius: 17px; background: #fff; }
.mistake-card small { color: var(--coral); font-size: 9px; font-weight: 800; }
.mistake-card h3 { margin: 8px 0; font-size: 14px; line-height: 1.5; }
.mistake-card p { margin: 0; color: var(--muted); font-size: 11px; }
.mistake-actions { display: flex; gap: 7px; align-items: center; }
.tiny-button { padding: 8px 10px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); background: #fff; cursor: pointer; font-size: 10px; }
.tiny-button.review { color: #fff; border-color: var(--navy); background: var(--navy); }

.simulation-landing {
  min-height: 100vh; position: relative; overflow: hidden; display: grid; place-items: center;
  background: linear-gradient(135deg,#4162d6,#55a2ff);
}
.simulation-landing::after {
  content: ""; position: absolute; left: -5%; right: -5%; bottom: -75px; height: 150px;
  background: rgba(36,64,184,.35); border-radius: 50% 50% 0 0;
}
.simulation-illustration { position: absolute; left: 8%; bottom: 14%; width: 320px; height: 210px; color: #fff; opacity: .95; }
.monitor-play {
  width: 260px; height: 90px; position: relative; display: grid; place-items: center;
  background: #202633; clip-path: polygon(0 0,100% 0,86% 82%,14% 82%); border: 6px solid rgba(255,255,255,.9);
  font-size: 32px;
}
.keyboard-shape { width: 190px; height: 50px; margin: 20px 0 0 35px; border-radius: 6px; background: rgba(255,255,255,.92); transform: skewX(-4deg); }
.simulation-card {
  width: min(520px,calc(100% - 36px)); z-index: 1; padding: 38px 54px;
  border-radius: 8px; background: #fff; text-align: center; box-shadow: 0 24px 80px rgba(20,43,120,.22);
}
.simulation-card h1 { margin: 0 0 26px; color: #398ef1; font-size: 28px; letter-spacing: .02em; }
.simulation-card p { margin: 24px 0; color: #647087; font-size: 13px; line-height: 1.8; }
.simulation-rules { display: flex; flex-wrap: wrap; justify-content: center; gap: 7px; margin: -8px 0 18px; }
.simulation-rules span { padding: 6px 9px; border-radius: 99px; color: #3f87dd; background: #eef6ff; font-size: 11px; }
.simulation-tabs { display: inline-grid; grid-template-columns: 1fr 1fr; overflow: hidden; border: 1px solid #d6dde8; border-radius: 4px; }
.simulation-tabs button { padding: 12px 24px; border: 0; background: #fff; color: #5c6678; cursor: pointer; font-weight: 700; }
.simulation-tabs button.active { color: #fff; background: #4f98ec; }
.simulation-login { width: 100%; padding: 14px; border: 1px solid #9ec4ef; border-radius: 4px; color: #3f87dd; background: #edf5ff; cursor: pointer; font-weight: 800; }
.simulation-actions { display: grid; gap: 10px; margin-top: 14px; }
.simulation-login.secondary { color: #fff; border-color: #3f87dd; background: linear-gradient(135deg,#3f87dd,#6fb2ff); }
.ecnu-landing { background: radial-gradient(circle at 18% 20%,rgba(255,255,255,.13),transparent 24rem),linear-gradient(135deg,#4f1731,#8f234a 58%,#3a1226); }
.ecnu-landing::after { background: rgba(50,8,28,.34); }
.ecnu-illustration { bottom: 23%; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ecnu-illustration strong { margin-top: 18px; font-family: STKaiti,"KaiTi",serif; font-size: 30px; letter-spacing: .2em; }
.ecnu-illustration span { margin-top: 10px; color: rgba(255,255,255,.72); font-size: 12px; letter-spacing: .14em; }
.ecnu-seal,.mini-ecnu-seal { display: grid; place-items: center; border: 3px solid currentColor; border-radius: 50%; font-family: STKaiti,"KaiTi",serif; font-weight: 900; }
.ecnu-seal { width: 118px; height: 118px; box-shadow: inset 0 0 0 5px rgba(255,255,255,.16); font-size: 58px; }
.ecnu-edition { margin: -12px 0 17px; color: #84274c; font-size: 10px; font-weight: 900; letter-spacing: .16em; }
.ecnu-landing .simulation-card { box-shadow: 0 30px 90px rgba(57,6,15,.35); }
.ecnu-landing .simulation-card h1 { color: #782043; font-family: STKaiti,"KaiTi",serif; line-height: 1.28; }
.ecnu-landing .simulation-tabs button.active { background: #7f2449; }
.ecnu-landing .simulation-rules span { color: #7f2449; background: #fff1f7; }
.ecnu-landing .simulation-login { color: #7f2449; border-color: #dcb1c5; background: #fff5f9; }
.ecnu-landing .simulation-login.secondary { color: #fff; border-color: #6d193c; background: linear-gradient(135deg,#64183a,#972d57); }

.practical-bank-page { display: grid; gap: 22px; padding-bottom: 70px; }
.bank-summary { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; }
.bank-summary div { padding: 20px 22px; border: 1px solid var(--line); border-radius: 18px; background: #fff; box-shadow: var(--shadow); }
.bank-summary strong,.bank-summary span { display: block; }
.bank-summary strong { color: var(--navy); font-size: 28px; }
.bank-summary span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.bank-group { padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: rgba(255,255,255,.76); box-shadow: var(--soft-shadow); }
.bank-group-title { margin-bottom: 16px; display: flex; justify-content: space-between; gap: 12px; align-items: end; }
.bank-group-title h2 { margin: 0; font-size: 20px; }
.bank-group-title span { color: var(--muted); font-size: 12px; }
.practical-bank-grid { display: grid; grid-template-columns: repeat(5,1fr); gap: 12px; }
.practical-bank-card { min-height: 190px; padding: 18px; display: flex; flex-direction: column; border: 1px solid #e4e9f1; border-radius: 17px; background: #fff; }
.bank-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: center; }
.bank-card-top strong { color: #2f8deb; font-size: 18px; }
.bank-card-top span { padding: 4px 8px; border-radius: 99px; color: #6f7f93; background: #f2f6fb; font-size: 10px; }
.practical-bank-card h3 { margin: 16px 0 8px; min-height: 42px; font-size: 14px; line-height: 1.5; }
.practical-bank-card p { margin: 0; color: var(--muted); font-size: 11px; }
.bank-card-meta { margin: auto 0 14px; display: flex; flex-wrap: wrap; gap: 6px; }
.bank-card-meta span { padding: 5px 7px; border-radius: 8px; color: #5d6a7d; background: #f6f8fb; font-size: 10px; }
.bank-card-actions { display: flex; gap: 7px; align-items: center; }
.material-download { color: #8d2031; border-color: #e4bbc1; background: #fff5f6; text-decoration: none; }

.practical-system { min-height: 100vh; padding: 0 23px 24px; background: #f1f2f4; color: #111827; font-family: "Microsoft YaHei", system-ui, sans-serif; }
.practical-topline { min-height: 38px; margin: 0 -23px; padding: 0 28px; display: flex; justify-content: space-between; align-items: center; color: #fff; background: linear-gradient(90deg,#751423,#9d2638,#751423); font-size: 13px; font-weight: 800; letter-spacing: .04em; }
.practical-topline small { padding: 4px 9px; border: 1px solid rgba(255,255,255,.35); border-radius: 99px; color: rgba(255,255,255,.86); font-size: 10px; }
.practical-header {
  min-height: 98px; padding: 18px 22px; display: grid; grid-template-columns: 1fr auto auto; gap: 22px; align-items: center;
  border: 1px solid #d8dadd; border-top: 0; border-radius: 0 0 6px 6px; background: #fff;
}
.practical-header h1 { margin: 0; font-size: 23px; letter-spacing: .02em; }
.practical-brand { display: flex; align-items: center; gap: 14px; }
.practical-brand p { margin: 5px 0 0; color: #8d2031; font-size: 13px; font-weight: 800; letter-spacing: .12em; }
.mini-ecnu-seal { width: 56px; height: 56px; flex: 0 0 auto; color: #8f2031; box-shadow: inset 0 0 0 3px #fff,inset 0 0 0 4px currentColor; font-size: 27px; }
.candidate-card { display: flex; align-items: center; gap: 12px; color: #1d2939; font-size: 12px; }
.candidate-card p { margin: 3px 0; }
.avatar { width: 48px; height: 60px; display: grid; place-items: center; color: #fff; background: linear-gradient(145deg,#741523,#a83244); border-radius: 4px; font-weight: 900; }
.practical-timer { white-space: nowrap; font-size: 16px; font-weight: 800; }
.practical-timer strong { color: #991f31; font-size: 28px; letter-spacing: .04em; font-variant-numeric: tabular-nums; }
.practical-timer strong.practice-status { color: #8d2031; font-size: 24px; }
.practical-timer strong.urgent { animation: pulse 1s infinite; }
.practical-main { margin-top: 13px; display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.practical-left,.practical-right { height: calc(100vh - 165px); overflow: auto; border: 1px solid #d8dadd; border-radius: 6px; background: #fff; }
.practical-left { padding: 25px 26px; }
.practical-right { padding: 24px 26px; }
.practical-left-head { display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.practical-left-head h2,.practical-answer-head h2 { margin: 0; font-size: 16px; }
.practical-left-head h2 span,.practical-answer-head h2 span { color: #606b7c; font-size: 13px; font-weight: 600; }
.material-button { margin-left: 8px; padding: 11px 15px; border: 1px solid #dfd4d6; border-radius: 4px; color: #6f6264; background: #fbf8f8; cursor: pointer; font-weight: 700; }
.material-button:first-child { color: #922338; border-color: #e0b8bf; background: #fff3f5; }
.material-button.flag.active { color: #b17200; border-color: #f0cd84; background: #fff7df; }
.task-tabs { display: flex; flex-wrap: wrap; gap: 16px; margin: 16px 0 18px; }
.task-tabs button { min-width: 48px; padding: 11px 9px; border: 1px solid #d2dae5; border-radius: 5px; background: #fff; cursor: pointer; font-size: 15px; }
.task-tabs button.active { color: #922338; border-color: #b5495a; background: #fff5f6; }
.task-tabs button.saved { box-shadow: inset 0 -3px 0 #68bc8a; }
.warm-tip { margin: 0 0 18px; color: #e06d77; text-align: center; font-size: 12px; }
.material-paper { width: min(760px,100%); margin: 0 auto; padding: 24px 26px 32px; border: 1px solid #e8e1e2; color: #111; background: #fff; line-height: 1.85; box-shadow: 0 10px 30px rgba(52,35,38,.05); }
.paper-heading { padding-bottom: 16px; display: flex; justify-content: space-between; gap: 16px; align-items: center; border-bottom: 3px solid #8f2031; }
.paper-heading span { font-family: STKaiti,"KaiTi",serif; font-size: 20px; font-weight: 900; letter-spacing: .06em; }
.paper-heading b { padding: 6px 10px; color: #fff; background: #8f2031; border-radius: 3px; font-size: 14px; }
.paper-meta { display: grid; grid-template-columns: 1fr auto auto; gap: 1px; margin: 16px 0; border: 1px solid #e5dfe0; background: #e5dfe0; }
.paper-meta div { min-height: 58px; padding: 10px 13px; background: #fff; }
.paper-meta small,.paper-meta strong { display: block; text-align: left; }
.paper-meta small { color: #817477; font-size: 10px; }
.paper-meta strong { margin-top: 4px; font-size: 13px; }
.material-paper h3 { margin: 25px 0 10px; padding-left: 9px; border-left: 3px solid #8f2031; color: #64131f; font-size: 15px; }
.material-paper p,.material-paper li { font-size: 13px; }
.source-toolbar { margin: 0 0 14px; padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-radius: 8px; background: #f6f8fb; }
.source-toolbar span { color: #6b7280; font-size: 11px; }
.source-toolbar > div { display: flex; gap: 7px; }
.source-toolbar .tiny-button { text-decoration: none; white-space: nowrap; }
.practical-preview { min-height: 300px; margin: 0; padding: 5px 2px 10px; color: #1f2937; background: #fff; font-family: "Microsoft YaHei", system-ui, sans-serif; font-size: 13px; line-height: 1.85; }
.practical-preview p { margin: 7px 0; }
.practical-preview .task-step { margin: 10px 0; padding: 10px 12px; border-left: 2px solid #c8969e; background: #fdf8f9; }
.material-manifest { margin-top: 18px; padding: 13px 15px; border-radius: 6px; color: #665a5c; background: #f7f5f5; font-size: 12px; }
.material-manifest summary { cursor: pointer; font-weight: 800; }
.material-manifest ul { margin-bottom: 0; }
.practical-answer-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 16px; }
.practical-answer-head p { margin: 0; color: #e06d77; font-size: 12px; line-height: 1.7; }
.practical-task-title { padding: 10px 0 16px; display: flex; gap: 12px; align-items: center; border-bottom: 1px solid #edf1f5; }
.practical-task-title strong { color: #922338; font-size: 18px; }
.practical-task-title span { font-weight: 800; }
.submission-table-wrap { margin-top: 18px; overflow-x: auto; border: 1px solid #e2e4e8; border-radius: 5px; }
.submission-table { width: 100%; min-width: 660px; border-collapse: collapse; table-layout: fixed; font-size: 12px; }
.submission-table th { padding: 12px 10px; color: #5d5254; background: #f2eeee; text-align: left; white-space: normal; }
.submission-table th:nth-child(1) { width: 58px; text-align: center; }
.submission-table th:nth-child(2) { width: auto; }
.submission-table th:nth-child(3) { width: 112px; }
.submission-table th:nth-child(4),.submission-table th:nth-child(5) { width: 90px; text-align: center; }
.submission-table td { padding: 15px 10px; vertical-align: middle; border-top: 1px solid #ececef; white-space: normal; overflow-wrap: anywhere; }
.submission-table td:first-child,.submission-table td:nth-child(4),.submission-table td:nth-child(5) { text-align: center; }
.submission-table tr:nth-child(even) td { background: #fcfbfb; }
.submission-table tr.uploaded td { background: #f7fcf8; }
.submission-table td > strong { display: block; color: #2a2223; font-size: 13px; }
.submission-table td > p { margin: 5px 0 0; display: -webkit-box; overflow: hidden; color: #7a7173; line-height: 1.6; font-size: 11px; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.submission-table td > small { display: block; max-width: 105px; margin-top: 6px; overflow: hidden; color: #7d8581; text-overflow: ellipsis; white-space: nowrap; }
.upload-index { width: 28px; height: 28px; display: inline-grid; place-items: center; color: #8f2031; border-radius: 50%; background: #f8e9ec; font-weight: 900; }
.upload-status { display: inline-block; padding: 5px 8px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.upload-status.pending { color: #8b6e2a; background: #fff6dc; }
.upload-status.done { color: #27754b; background: #e6f7ed; }
.upload-control { position: relative; overflow: hidden; display: inline-block; padding: 7px 9px; color: #fff; border-radius: 4px; background: #8f2031; cursor: pointer; font-size: 11px; font-weight: 800; }
.upload-control input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.table-link { padding: 0; border: 0; color: #8f2031; background: transparent; cursor: pointer; text-decoration: underline; font-size: 11px; }
.table-empty { color: #aaa; }
.ecnu-practical-system .button.primary,.ecnu-practical-system .submit-exam { border-color: #8f2031; background: #8f2031; }
.ecnu-practical-system .button.primary:hover { background: #721523; }
.practical-actions { position: sticky; bottom: -24px; margin: 18px -26px -24px; padding: 13px 26px; display: flex; justify-content: flex-end; gap: 10px; background: rgba(255,255,255,.95); border-top: 1px solid #edf1f5; }
.practical-submit { width: auto; margin: 0; padding: 11px 18px; }
.practical-progress { margin-top: 16px; color: #758197; text-align: right; font-size: 12px; }
.practical-ring { background: conic-gradient(#2f8deb 260deg, #eaf3ff 0); }
.practical-result { margin-top: 60px; }

.ai-grading-panel { margin: 24px 0 8px; padding: 20px; border: 1px solid #cfd9f8; border-radius: 17px; background: linear-gradient(145deg,#f7f9ff,#f0f4ff); text-align: left; }
.ai-grading-panel.loading { border-color: #93a7e9; box-shadow: 0 0 0 4px rgba(75,104,200,.08); }
.ai-grading-head { display: flex; justify-content: space-between; gap: 20px; align-items: center; }
.ai-grading-head > div { display: flex; gap: 13px; align-items: center; }
.openai-mark { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 13px; color: #fff; background: linear-gradient(145deg,#111827,#10a37f); font-size: 12px; font-weight: 900; letter-spacing: .08em; }
.ai-grading-head h3 { margin: 0 0 5px; color: #1f347e; font-size: 16px; }
.ai-grading-head p { margin: 0; color: #657199; font-size: 11px; line-height: 1.65; }
.ai-grading-panel > small { display: block; margin-top: 13px; color: #7781a1; line-height: 1.65; }
.ai-capabilities { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; }
.ai-grading-panel .ai-capabilities { margin-top: 16px; }
.ai-cap { padding: 5px 9px; border-radius: 99px; font-size: 10px; font-weight: 800; }
.ai-cap.ok { color: #216c46; background: #def4e7; }
.ai-cap.warn { color: #89641c; background: #fff1c8; }
.ai-cap.bad { color: #a33b4a; background: #ffe4e8; }
.grading-spinner { width: 28px; height: 28px; border: 3px solid #cad4f3; border-top-color: #4c68cb; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.grading-result-page { min-height: 100vh; padding: 42px max(28px,calc((100vw - 1120px)/2)) 60px; background: #f2f5fb; }
.grading-result-hero { padding: 28px 34px; display: grid; grid-template-columns: auto 1fr; gap: 28px; align-items: center; border-radius: 24px; color: #fff; background: linear-gradient(135deg,#172346,#2f4d9c); box-shadow: 0 22px 55px rgba(22,35,70,.2); }
.grading-result-hero h1 { margin: 7px 0 8px; font-size: 30px; }
.grading-result-hero p { max-width: 760px; margin: 0; color: rgba(255,255,255,.8); line-height: 1.75; }
.grading-result-hero .eyebrow { color: #aec2ff; }
.ai-score-ring { width: 150px; height: 150px; margin: 0; background: conic-gradient(#8fb0ff var(--score),rgba(255,255,255,.16) 0); }
.ai-score-ring::before { background: #20366f; }
.ai-score-ring strong { color: #fff; }
.ai-score-ring span { color: #b9c8f5; }
.ai-disclaimer { margin-top: 12px; color: #aebce8; font-size: 10px; }
.grading-task-list { margin: 22px 0; display: grid; gap: 12px; }
.grading-task { overflow: hidden; border: 1px solid #dce2ed; border-radius: 16px; background: #fff; }
.grading-task summary { padding: 18px 21px; display: flex; justify-content: space-between; gap: 18px; align-items: center; cursor: pointer; list-style: none; }
.grading-task summary::-webkit-details-marker { display: none; }
.grading-task summary span { display: flex; gap: 11px; align-items: center; font-size: 13px; font-weight: 800; }
.grading-task summary span b { padding: 5px 8px; border-radius: 7px; color: #27458f; background: #eaf0ff; }
.grading-task summary > strong { color: #25458f; white-space: nowrap; }
.grading-task[open] summary { border-bottom: 1px solid #e7ebf1; background: #fbfcff; }
.grading-task-body { padding: 20px 21px 24px; }
.grading-verdict { margin: 0 0 16px; color: #4a566a; line-height: 1.75; }
.grading-errors { display: grid; gap: 8px; }
.grading-errors > div { padding: 12px 14px; border-left: 3px solid #d05a6b; border-radius: 7px; background: #fff5f6; }
.grading-errors b { color: #913443; font-size: 12px; }
.grading-errors p { margin: 5px 0; color: #4d3b3e; font-size: 12px; line-height: 1.65; }
.grading-errors span { color: #8d656b; font-size: 10px; }
.grading-pass { padding: 11px 13px; color: #256947; border-radius: 8px; background: #eef9f2; }
.manual-review { margin-top: 11px; padding: 12px 14px; display: grid; gap: 6px; border-radius: 8px; color: #765b18; background: #fff8df; font-size: 11px; }
.rubric-table-wrap { margin-top: 17px; overflow-x: auto; }
.rubric-table { width: 100%; min-width: 760px; border-collapse: collapse; font-size: 11px; }
.rubric-table th,.rubric-table td { padding: 10px 11px; border: 1px solid #e4e8ef; text-align: left; line-height: 1.55; }
.rubric-table th { color: #5b6577; background: #f5f7fa; }
.rubric-table th:nth-child(1) { width: 55px; }
.rubric-table th:nth-child(3) { width: 90px; }
.rubric-pass td:nth-child(3) { color: #24734a; font-weight: 900; }
.rubric-loss td:nth-child(3) { color: #b14352; font-weight: 900; }

.history-card { margin-top: 22px; padding: 22px; border: 1px solid var(--line); border-radius: 22px; background: #fff; box-shadow: var(--soft-shadow); }
.history-card h2 { margin: 0; font-size: 18px; }
.history-list { margin-top: 14px; display: grid; gap: 8px; }
.history-item { padding: 13px 15px; display: flex; justify-content: space-between; gap: 12px; align-items: center; border: 1px solid #e5e9f0; border-radius: 12px; background: #fbfcfe; cursor: pointer; text-align: left; }
.history-item span b,.history-item span small { display: block; }
.history-item span b { color: #253047; font-size: 12px; }
.history-item span small { margin-top: 3px; color: #9099aa; font-size: 9px; }
.history-item > strong { color: #7d8798; font-size: 11px; }
.history-item > strong.graded { color: #2a744d; }
.ai-admin-card { border-color: #d5ddf6; background: linear-gradient(145deg,#fff,#f8f9ff); }
.ai-settings-form { grid-template-columns: 1.4fr 1fr 1.2fr auto; }
.customer-admin-card { border-color: #cde9df; background: linear-gradient(145deg,#fff,#f5fbf8); }
.customer-settings-form { grid-template-columns: 1.3fr .7fr .7fr 1.8fr auto; }

.customer-service { position: fixed; right: 24px; bottom: 22px; z-index: 1900; display: grid; justify-items: end; gap: 12px; pointer-events: none; }
.customer-launcher { min-width: 112px; height: 50px; padding: 6px 15px 6px 7px; display: flex; align-items: center; gap: 9px; position: relative; border: 0; border-radius: 99px; color: #fff; background: linear-gradient(135deg,#12203b,#1c3f66); box-shadow: 0 14px 35px rgba(15,31,57,.28); cursor: pointer; pointer-events: auto; }
.customer-launcher span { width: 37px; height: 37px; display: grid; place-items: center; border-radius: 50%; color: #10324d; background: linear-gradient(145deg,#9be7ff,#fff); font-size: 15px; font-weight: 950; }
.customer-launcher b { font-size: 12px; letter-spacing: .03em; }
.customer-launcher > i { width: 8px; height: 8px; position: absolute; top: 5px; left: 38px; border: 2px solid #19304e; border-radius: 50%; background: #42d692; }
.customer-service.open .customer-launcher { min-width: 50px; width: 50px; padding: 6px; }
.customer-service.open .customer-launcher b { display: none; }
.customer-panel { width: min(390px,calc(100vw - 28px)); height: min(610px,calc(100vh - 105px)); overflow: hidden; display: grid; grid-template-rows: auto 1fr auto auto auto; border: 1px solid rgba(255,255,255,.8); border-radius: 24px; background: rgba(255,255,255,.98); box-shadow: 0 28px 85px rgba(18,34,60,.26); pointer-events: auto; animation: customerReveal .2s ease-out; }
.customer-panel-head { min-height: 74px; padding: 14px 15px; display: flex; align-items: center; justify-content: space-between; color: #fff; background: linear-gradient(135deg,#111d35,#214b73); }
.customer-panel-head > div { display: flex; align-items: center; gap: 10px; }
.customer-head-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px 14px 14px 5px; color: #14314b; background: linear-gradient(145deg,#88dcf8,#fff); font-size: 16px; font-weight: 950; }
.customer-panel-head b,.customer-panel-head small { display: block; }
.customer-panel-head b { font-size: 14px; }.customer-panel-head small { margin-top: 4px; color: #b9d9ec; font-size: 9px; }
.customer-panel-head small i { width: 6px; height: 6px; display: inline-block; margin-right: 3px; border-radius: 50%; background: #44d495; }
.customer-panel-head button { width: 32px; height: 32px; border: 0; border-radius: 50%; color: #d4e5f1; background: rgba(255,255,255,.08); cursor: pointer; font-size: 18px; }
.customer-messages { padding: 18px 14px; overflow-y: auto; display: flex; flex-direction: column; gap: 13px; background: linear-gradient(#f4f8fb,#f8fafc); scroll-behavior: smooth; }
.customer-message { display: flex; align-items: flex-end; gap: 8px; }
.customer-message.user { flex-direction: row-reverse; }
.customer-avatar { width: 28px; height: 28px; flex: 0 0 28px; display: grid; place-items: center; border-radius: 9px 9px 9px 3px; color: #fff; background: #173454; font-size: 10px; font-weight: 900; }
.customer-message.user .customer-avatar { border-radius: 9px 9px 3px 9px; background: #4aa9ca; }
.customer-bubble { max-width: 78%; padding: 10px 12px; border: 1px solid #e3e9ef; border-radius: 15px 15px 15px 4px; color: #354156; background: #fff; box-shadow: 0 5px 14px rgba(35,51,76,.05); font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.customer-message.user .customer-bubble { color: #fff; border-color: #1d78a1; border-radius: 15px 15px 4px 15px; background: linear-gradient(135deg,#1b8bb7,#2676a2); }
.customer-typing { min-width: 53px; display: flex; justify-content: center; gap: 4px; }
.customer-typing i { width: 5px; height: 5px; border-radius: 50%; background: #86a0b5; animation: customerTyping 1s infinite; }
.customer-typing i:nth-child(2) { animation-delay: .15s; }.customer-typing i:nth-child(3) { animation-delay: .3s; }
.customer-quick { padding: 9px 13px 2px; display: flex; flex-wrap: wrap; gap: 6px; background: #fff; }
.customer-quick button { padding: 7px 9px; border: 1px solid #dce9ef; border-radius: 99px; color: #39708c; background: #f5fbfe; cursor: pointer; font-size: 9px; }
.customer-input { margin: 10px 12px 7px; padding: 4px 4px 4px 12px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 7px; border: 1px solid #dfe6ed; border-radius: 16px; background: #f8fafc; }
.customer-input:focus-within { border-color: #71bed9; box-shadow: 0 0 0 3px rgba(0,168,232,.08); }
.customer-input input { min-width: 0; padding: 9px 0; border: 0; outline: 0; color: #253047; background: transparent; font: inherit; font-size: 11px; }
.customer-input button { width: 36px; height: 36px; border: 0; border-radius: 12px; color: #fff; background: #173957; cursor: pointer; }
.customer-input button:disabled { opacity: .45; cursor: wait; }
.customer-panel > footer { padding: 0 14px 10px; color: #9aa4b2; text-align: center; font-size: 8px; }
@keyframes customerReveal { from { opacity: 0; transform: translateY(12px) scale(.97); } }
@keyframes customerTyping { 0%,70%,100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-3px); opacity: 1; } }

.footer {
  width: min(1180px, calc(100% - 40px)); margin: auto; padding: 24px 0 30px;
  display: flex; justify-content: space-between; color: #a0a8b5; font-size: 10px;
}
.toast {
  position: fixed; left: 50%; bottom: 25px; z-index: 20; transform: translate(-50%,30px);
  padding: 10px 16px; border-radius: 99px; color: #fff; background: var(--navy);
  opacity: 0; pointer-events: none; transition: .22s; font-size: 12px;
}
.toast.show { opacity: 1; transform: translate(-50%,0); }
@keyframes reveal { from { opacity: 0; transform: translateY(-6px); } }
@keyframes pulse { 50% { opacity: .7; } }

@media (max-width: 850px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-intro { min-height: 38vh; padding: 60px 7vw; }
  .auth-intro h1 { font-size: 45px; }
  .auth-panel { margin: 35px auto; }
  .mode-grid { grid-template-columns: 1fr; }
  .mode-grid.dashboard-modes { grid-template-columns: 1fr 1fr; }
  .mode-card { min-height: 220px; }
  .practice-types { grid-template-columns: 1fr 1fr; }
  .quiz-layout { grid-template-columns: 1fr; }
  .quiz-side { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; }
  .quiz-side h3, .quiz-side .side-divider { display: none; }
  .exam-layout { grid-template-columns: 1fr; }
  .exam-nav { position: static; }
  .number-grid { max-height: 180px; grid-template-columns: repeat(10,1fr); }
  .hero-seal { margin-right: 10px; transform: scale(.85) rotate(4deg); }
  .admin-form { grid-template-columns: 1fr 1fr; }
  .admin-kpis { grid-template-columns: 1fr 1fr; }
  .invite-grid { grid-template-columns: 1fr 1fr; }
  .simulation-illustration { display: none; }
  .bank-summary { grid-template-columns: 1fr 1fr; }
  .practical-bank-grid { grid-template-columns: 1fr 1fr; }
  .practical-header { grid-template-columns: 1fr; }
  .practical-main { grid-template-columns: 1fr; }
  .practical-left,.practical-right { height: auto; max-height: none; }
  .ai-grading-head { align-items: flex-start; flex-direction: column; }
  .grading-result-page { padding: 20px 12px 40px; }
  .grading-result-hero { grid-template-columns: 1fr; text-align: center; }
  .ai-score-ring { margin: auto; }
  .grading-task summary { align-items: flex-start; flex-direction: column; }
  .ai-settings-form { grid-template-columns: 1fr; }
  .customer-settings-form { grid-template-columns: 1fr 1fr; }
  .customer-welcome-field { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .site-header { width: calc(100% - 28px); height: 70px; }
  .main { width: calc(100% - 28px); }
  .up-tag { display: none; }
  .home-hero { min-height: 300px; padding: 43px 3px 36px; }
  .mode-grid.dashboard-modes { grid-template-columns: 1fr; }
  .auth-intro { min-height: auto; padding: 45px 25px; }
  .auth-intro h1 { font-size: 38px; }
  .auth-panel { width: calc(100% - 28px); padding: 25px 20px; }
  .personal-hero { min-height: 175px; }
  .overall-rate { width: 83px; height: 83px; margin-right: 0; border-width: 7px; }
  .overall-rate strong { font-size: 19px; }
  .progress-panel { padding: 20px 17px; }
  .progress-head { align-items: flex-start; gap: 14px; }
  .progress-head-actions { align-items: flex-end; flex-direction: column; gap: 7px; }
  .progress-head-actions button { padding: 7px 9px; }
  .accuracy-grid { grid-template-columns: 1fr; }
  .reset-progress-overlay { padding: 12px; }
  .reset-progress-dialog { padding: 22px 17px; }
  .reset-type-choice { grid-template-columns: auto 1fr; }
  .reset-type-choice i { display: none; }
  .reset-dialog-actions { display: grid; grid-template-columns: 1fr; }
  .admin-head { display: block; }
  .head-actions { justify-content: flex-start; margin-top: 16px; }
  .card-title-row { display: block; }
  .admin-form { grid-template-columns: 1fr; }
  .reset-highlight { display: block; }
  .reset-highlight .tiny-button { margin-top: 12px; }
  .admin-kpis { grid-template-columns: 1fr 1fr; }
  .management-card { padding: 18px 14px; }
  .invite-grid { grid-template-columns: 1fr; }
  .home-hero h1 { font-size: 42px; }
  .hero-seal { display: none; }
  .mode-card { min-height: 210px; }
  .practice-types { grid-template-columns: 1fr; }
  .type-card { min-height: 170px; }
  .view-head { padding-top: 32px; }
  .options { grid-template-columns: 1fr; }
  .question-card { min-height: 590px; padding: 25px 19px 20px; }
  .quiz-side { grid-template-columns: repeat(3,1fr); padding: 15px; }
  .side-action { display: none; }
  .exam-intro { padding: 27px 20px; }
  .exam-intro-top { align-items: flex-start; }
  .clock-graphic { width: 83px; height: 83px; border-radius: 25px; font-size: 20px; }
  .exam-rules { grid-template-columns: 1fr 1fr; }
  .exam-layout { padding-top: 15px; }
  .exam-bar { margin: 0 -14px; }
  .number-grid { grid-template-columns: repeat(8,1fr); }
  .result-card { padding: 30px 18px; }
  .result-stats { grid-template-columns: 1fr 1fr; }
  .mistake-card { grid-template-columns: 1fr; }
  .footer { width: calc(100% - 28px); }
  .customer-service { right: 10px; bottom: 10px; }
  .customer-panel { width: calc(100vw - 20px); height: min(620px,calc(100vh - 78px)); border-radius: 20px; }
  .customer-launcher { min-width: 104px; height: 47px; }
  .customer-settings-form { grid-template-columns: 1fr; }
  .customer-welcome-field { grid-column: auto; }
  .simulation-card { padding: 30px 22px; }
  .simulation-card h1 { font-size: 22px; }
  .bank-summary { grid-template-columns: 1fr; }
  .bank-group { padding: 16px; }
  .bank-group-title { display: block; }
  .bank-group-title span { display: block; margin-top: 6px; }
  .practical-bank-grid { grid-template-columns: 1fr; }
  .practical-system { padding: 10px; }
  .practical-topline { margin: -10px -10px 0; padding: 9px 12px; gap: 8px; font-size: 10px; line-height: 1.45; }
  .practical-topline small { flex: 0 0 auto; }
  .practical-header h1 { font-size: 18px; }
  .practical-left,.practical-right { padding: 18px 15px; }
  .practical-left-head,.practical-answer-head { display: block; }
  .practical-left-head > div { margin-top: 12px; }
  .material-button { margin: 4px 5px 4px 0; }
  .task-tabs { gap: 8px; }
  .source-toolbar { display: block; }
  .source-toolbar .tiny-button { margin-top: 8px; }
  .paper-heading span { font-size: 17px; }
  .paper-meta { grid-template-columns: 1fr 1fr; }
  .paper-meta div:first-child { grid-column: 1 / -1; }
  .upload-line { grid-template-columns: 1fr; }
  .practical-actions { position: static; margin: 18px 0 0; padding: 12px 0 0; flex-wrap: wrap; }
}