:root {
  --ink: #152238;
  --muted: #5f7084;
  --soft: #f6f8fb;
  --paper: #ffffff;
  --line: #dbe6ee;
  --line-strong: #cbd9e3;
  --green: #118567;
  --green-dark: #0b6c58;
  --blue: #2f6f9f;
  --amber: #d9902f;
  --rose: #b85b5b;
  --canvas: #f2f6f7;
  --panel-border: rgba(194, 210, 221, .86);
  --shadow: 0 18px 54px rgba(31, 52, 74, .09);
  --shadow-soft: 0 12px 30px rgba(35, 59, 82, .055);
  --shadow-card: 0 18px 44px rgba(31, 52, 74, .075);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

* { box-sizing: border-box; }

/* 固定顶部功能导航：每个页面顺序一致，避免老师切换时找不到模块 */
.top-module-nav { position: sticky; top: 0; z-index: 1000; background: rgba(250,252,252,.9); backdrop-filter: blur(24px) saturate(155%); border-bottom: 1px solid rgba(190, 207, 219, .62); box-shadow: 0 14px 36px rgba(27, 48, 70, .05); }
.top-nav-inner { width: min(1580px, calc(100% - 32px)); margin: 0 auto; min-height: 76px; display: grid; grid-template-columns: auto minmax(520px, 1fr) auto; gap: 18px; align-items: center; }
.top-nav-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); font-weight: 950; text-decoration: none; white-space: nowrap; letter-spacing: 0; font-size: 18px; }
.top-nav-brand::before { content: ""; width: 34px; height: 34px; border-radius: 13px; background: linear-gradient(135deg, #0f8b65, #2b729f 58%, #d5a54a); box-shadow: inset 0 1px 0 rgba(255,255,255,.5), 0 12px 24px rgba(17,133,103,.18); }
.top-nav-brand::after { content: "教师工作台"; color: #748497; font-size: 12px; font-weight: 900; padding-left: 2px; }
.top-nav-links { display: flex; gap: 8px; flex-wrap: nowrap; align-items: center; justify-content: center; min-width: 0; overflow-x: auto; padding: 4px 0; scrollbar-width: none; }
.top-nav-links::-webkit-scrollbar { display: none; }
.top-nav-links a { text-decoration: none; color: #42566c; background: rgba(255,255,255,.82); border: 1px solid rgba(199,214,224,.8); border-radius: 999px; padding: 9px 13px 9px 11px; font-weight: 900; font-size: 13px; white-space: nowrap; box-shadow: 0 7px 18px rgba(31,52,74,.035); transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease, background .16s ease; display: inline-flex; align-items: center; gap: 7px; }
.top-nav-links a:hover { transform: translateY(-1px); border-color: rgba(47,111,159,.28); box-shadow: 0 10px 22px rgba(31,52,74,.065); }
.top-nav-links a.active { background: linear-gradient(135deg, #102238, #17364b); border-color: rgba(16,34,56,.9); color: #fff; box-shadow: 0 13px 26px rgba(21,34,56,.18); }
.top-right-tools { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.nav-icon {
  --nav-icon: none;
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  display: inline-block;
  background: currentColor;
  opacity: .92;
  -webkit-mask: var(--nav-icon) center / contain no-repeat;
  mask: var(--nav-icon) center / contain no-repeat;
}
.nav-home { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 11.2 12 4l8 7.2V20a1 1 0 0 1-1 1h-5v-6h-4v6H5a1 1 0 0 1-1-1z'/%3E%3C/svg%3E"); }
.nav-records { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 3h14a1 1 0 0 1 1 1v16a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V4a1 1 0 0 1 1-1m3 5h8v2H8zm0 4h8v2H8zm0 4h5v2H8z'/%3E%3C/svg%3E"); }
.nav-upload { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 20h14v-8h2v9a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1v-9h2zm8-12.2V17h-2V7.8L7.4 11.4 6 10l6-6 6 6-1.4 1.4z'/%3E%3C/svg%3E"); }
.nav-image { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 5a2 2 0 0 1 2-2h12a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2zm3 12h10l-3.2-4-2.3 3-1.7-2.1zm9-8.5A1.5 1.5 0 1 0 16 5a1.5 1.5 0 0 0 0 3.5'/%3E%3C/svg%3E"); }
.nav-ai { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2h2v3h3v2h-3v2h-2V7H9V5h3zM5 8h14a2 2 0 0 1 2 2v7a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-7a2 2 0 0 1 2-2m4 4a2 2 0 1 0 0 4 2 2 0 0 0 0-4m6 0a2 2 0 1 0 0 4 2 2 0 0 0 0-4'/%3E%3C/svg%3E"); }
.nav-shield { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 2 20 5v6c0 5-3.4 9.2-8 11-4.6-1.8-8-6-8-11V5zm-1 14.2 6-6-1.4-1.4L11 13.4l-2.6-2.6L7 12.2z'/%3E%3C/svg%3E"); }
.nav-guide { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 4.5A2.5 2.5 0 0 1 7.5 2H20v17H7.5A2.5 2.5 0 0 0 5 21.5zm3 3.5h8V6H8zm0 4h8v-2H8z'/%3E%3C/svg%3E"); }
.nav-power { --nav-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M11 2h2v11h-2zM7.1 5.6l1.4 1.5A6 6 0 1 0 15.5 7l1.4-1.5A8 8 0 1 1 7.1 5.6'/%3E%3C/svg%3E"); }
.top-health { width: 156px; max-width: 18vw; min-width: 116px; padding: 8px 12px; border-radius: 999px; font-size: 12px; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-health span { display: none; }
.top-shutdown-btn {
  border: 1px solid #e9caca;
  border-radius: 999px;
  background: #fffafa;
  color: #9a3b3b;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 900;
  white-space: nowrap;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.top-shutdown-btn:hover { background: #fff0f0; border-color: #dfa8a8; }
.top-shutdown-btn:disabled { opacity: .65; cursor: wait; }
.shutdown-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: linear-gradient(135deg, #f6fbf9, #edf4fb);
}
.shutdown-card {
  width: min(560px, 100%);
  background: #fff;
  border: 1px solid #dbe8ee;
  border-radius: 22px;
  padding: 30px;
  box-shadow: 0 20px 50px rgba(37, 61, 86, .12);
  color: #243042;
}
.shutdown-card h1 { margin-top: 0; font-size: 28px; }
.shutdown-card p { color: #536678; line-height: 1.8; font-weight: 700; }
.page-actions { align-items: flex-start; }
@media (max-width: 980px) {
  .top-module-nav { position: static; }
  .top-nav-inner { grid-template-columns: auto minmax(0, 1fr); padding: 9px 0; gap: 9px 12px; }
  .top-nav-links { grid-column: 1 / -1; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .top-right-tools { grid-column: 2; grid-row: 1; width: 100%; justify-content: flex-end; align-items: center; min-width: 0; }
  .top-health { width: min(330px, 100%); max-width: none; min-width: 0; }
  .top-shutdown-btn { min-width: 86px; }
}
@media (max-width: 640px) {
  .top-nav-inner { grid-template-columns: 1fr; }
  .top-right-tools { grid-column: auto; grid-row: auto; justify-content: flex-start; flex-wrap: wrap; }
  .top-health { width: 100%; }
}

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'PingFang SC', 'Microsoft YaHei', sans-serif;
  background:
    radial-gradient(circle at 8% -2%, rgba(255,255,255,.98) 0, rgba(255,255,255,.64) 24%, transparent 42%),
    radial-gradient(circle at 84% 0%, rgba(218,233,227,.58) 0, transparent 30%),
    linear-gradient(180deg, #edf4f5 0, #f7fafb 360px, #f2f6f7 100%);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}
.page { width: min(1520px, calc(100% - 48px)); margin: 30px auto 64px; }
.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  min-height: 254px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.985) 0%, rgba(255,255,255,.95) 36%, rgba(255,255,255,.67) 55%, rgba(255,255,255,.1) 100%),
    url('/static/assets/ui/teacher-hero-v2.png') center right / cover no-repeat;
  border: 1px solid rgba(205, 221, 229, .92);
  border-radius: 32px;
  padding: 42px 44px;
  box-shadow: var(--shadow);
}
.hero::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 7px;
  background: linear-gradient(180deg, var(--green), var(--blue) 55%, var(--amber));
}
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 24% 20%, rgba(255,255,255,.52), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,.18));
  pointer-events: none;
}
.hero > * { position: relative; z-index: 1; }
.brand { color: var(--green); font-weight: 950; letter-spacing: 3px; font-size: 12px; text-transform: uppercase; }
h1 { margin: 10px 0 12px; font-size: clamp(38px, 3.5vw, 58px); color: var(--ink); letter-spacing: 0; line-height: 1.08; }
p { line-height: 1.7; }
.hero p { margin: 0; color: #5d6f82; font-weight: 760; max-width: 760px; font-size: 17px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-content: center; }
.page-actions { align-items: flex-start; }
.page-actions .mini-badge { border-radius: 999px; padding: 7px 10px; font-size: 12px; background: rgba(255,255,255,.86); border: 1px solid var(--line); box-shadow: 0 6px 18px rgba(31,52,74,.04); }
.page-actions .mini-badge.ok { color: var(--green-dark); background: #effaf5; border-color: #ccebdd; }
.health { min-width: 220px; padding: 16px 18px; border-radius: var(--radius-md); background: rgba(255,255,255,.9); border: 1px solid #e6edf2; color: #526273; line-height: 1.7; box-shadow: var(--shadow-soft); }
.health span { font-size: 13px; color: #8492a0; }
.top-health.health { min-width: 0; padding: 7px 10px; border-radius: 999px; line-height: 1.25; }
.top-health.health span { font-size: 11px; }
.layout { display: grid; grid-template-columns: minmax(340px, 400px) minmax(0, 1fr); gap: 24px; margin-top: 24px; align-items: start; }
.panel { background: rgba(255,255,255,.94); border: 1px solid var(--panel-border); border-radius: 26px; padding: 24px; box-shadow: var(--shadow-soft); backdrop-filter: blur(10px); }
.setup-panel, .result-panel, .report-panel { grid-column: 1; }
.test-panel { grid-column: 2; grid-row: 1 / span 3; }
.setup-panel,
.test-panel {
  position: relative;
  overflow: hidden;
}
.setup-panel::after {
  content: "";
  position: absolute;
  right: -54px;
  top: -54px;
  width: 150px;
  height: 150px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(17,133,103,.11), transparent 68%);
  pointer-events: none;
}
h2 { margin: 0 0 16px; font-size: 22px; color: #1b2a3b; letter-spacing: 0; }
.panel > h2 {
  display: flex;
  align-items: center;
  gap: 10px;
}
.panel > h2::before {
  content: "";
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 12px;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.88), transparent 32%),
    linear-gradient(135deg, rgba(17,133,103,.95), rgba(47,111,159,.9));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.58), 0 10px 20px rgba(17,133,103,.13);
}
label { display: block; font-size: 13px; color: #5d6b7a; margin: 14px 0 8px; font-weight: 820; }
input, select { width: 100%; height: 46px; border: 1px solid #c7d6df; background: linear-gradient(180deg, #ffffff, #f9fcfd); border-radius: 15px; padding: 0 14px; font-size: 15px; outline: none; box-shadow: inset 0 1px 0 rgba(255,255,255,.8); }
select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  background-image:
    url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2354667a' d='M4 6h8l-4 4z'/%3E%3C/svg%3E"),
    linear-gradient(180deg, #ffffff, #f9fcfd);
  background-repeat: no-repeat, no-repeat;
  background-position: right 14px center, 0 0;
  background-size: 13px 13px, 100% 100%;
}
input:focus, select:focus { border-color: #15915f; box-shadow: 0 0 0 4px rgba(21,145,95,.11); }
.two-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.button-row { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.button-row.center { justify-content: center; }
button, .download { border: 0; border-radius: 15px; padding: 11px 17px; background: linear-gradient(135deg, #108564, #0d745f); color: white; font-weight: 900; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; box-shadow: 0 12px 24px rgba(17,133,103,.14); transition: transform .16s ease, box-shadow .16s ease, background .16s ease, border-color .16s ease; }
button:hover:not(:disabled), .download:hover { transform: translateY(-1px); }
button.secondary, .download { background: linear-gradient(180deg, #f4f8fb, #e9f1f6); color: #285171; border: 1px solid #d8e5ed; box-shadow: 0 8px 18px rgba(31,52,74,.035); }
button.ai-action { background: linear-gradient(135deg, #195f8c, #12966f); color: #fff; box-shadow: 0 10px 22px rgba(25,95,140,.15); }
button.danger { background: linear-gradient(135deg, #d94848, #b72d3a); color: #fff; box-shadow: 0 12px 24px rgba(183,45,58,.18); }
button.record { background: linear-gradient(135deg, #169b72, #0f7f78); font-size: 17px; padding: 14px 28px; box-shadow: 0 14px 28px rgba(15,127,120,.24); }
button:disabled { opacity: .45; cursor: not-allowed; }
#startBtn::before,
#classReportBtn::before,
#refreshReportBtn::before,
#refreshReportsBtn::before,
#replayQuestionBtn::before,
#showQuestionTextBtn::before,
#downloadFilteredBtn::before,
#searchBtn::before,
#resetBtn::before {
  content: "";
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  background: currentColor;
  opacity: .9;
  -webkit-mask: var(--button-icon) center / contain no-repeat;
  mask: var(--button-icon) center / contain no-repeat;
}
#startBtn { min-height: 48px; padding-inline: 20px; }
#startBtn::before { --button-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M8 5v14l11-7z'/%3E%3C/svg%3E"); }
#classReportBtn::before,
#refreshReportBtn::before,
#refreshReportsBtn::before { --button-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 4h14v16H5zm3 12h2v-5H8zm3 0h2V8h-2zm3 0h2v-3h-2z'/%3E%3C/svg%3E"); }
#replayQuestionBtn::before { --button-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M4 9v6h4l5 4V5L8 9zm12.5 3a4.5 4.5 0 0 0-2-3.7v7.4a4.5 4.5 0 0 0 2-3.7M14.5 3.5v2.1a7 7 0 0 1 0 12.8v2.1a9 9 0 0 0 0-17'/%3E%3C/svg%3E"); }
#showQuestionTextBtn::before { --button-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M5 4h14v2H5zm0 4h14v2H5zm0 4h10v2H5zm0 4h14v2H5z'/%3E%3C/svg%3E"); }
#downloadFilteredBtn::before { --button-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M11 3h2v10l3.5-3.5 1.4 1.4-5.9 5.9-5.9-5.9 1.4-1.4L11 13zM5 19h14v2H5z'/%3E%3C/svg%3E"); }
#searchBtn::before { --button-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M10 4a6 6 0 0 1 4.7 9.7l4.3 4.3-1.4 1.4-4.3-4.3A6 6 0 1 1 10 4m0 2a4 4 0 1 0 0 8 4 4 0 0 0 0-8'/%3E%3C/svg%3E"); }
#resetBtn::before { --button-icon: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='black' d='M12 5a7 7 0 1 1-6.3 4H3l4-4 4 4H7.9A5 5 0 1 0 12 7z'/%3E%3C/svg%3E"); }
#prevBtn::before { content: "‹"; font-size: 24px; line-height: 0; margin-top: -2px; }
#nextBtn::after { content: "›"; font-size: 24px; line-height: 0; margin-top: -2px; }
.question-card {
  position: relative;
  overflow: hidden;
  border: 1px solid #d6e5ec;
  border-radius: 26px;
  padding: 26px 30px 28px;
  background:
    radial-gradient(circle at 96% 0%, rgba(21,145,95,.13), transparent 34%),
    radial-gradient(circle at 88% 95%, rgba(47,111,159,.08), transparent 30%),
    linear-gradient(180deg, #ffffff 0%, #f8fbfd 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.question-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
  width: 5px;
  border-radius: 0 999px 999px 0;
  background: linear-gradient(180deg, #15915f, #2776b8);
}
.question-card-head { display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.question-label { margin-top: 16px; color: #7892a8; font-weight: 900; font-size: 13px; }
.question-top { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: 999px; background: #ecf7f2; color: #15915f; font-size: 13px; font-weight: 800; }
#qTitle { margin: 6px 0 0; font-size: clamp(28px, 2.2vw, 40px); line-height: 1.32; color: #142335; }
.question-text-reveal { margin-top: 10px; border: 1px solid #dfe8ee; background: #f8fbfd; color: #415267; border-radius: 12px; padding: 10px 12px; line-height: 1.65; font-weight: 700; }
.question-voice-panel {
  margin-top: 16px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  border: 1px solid #c8e3d8;
  background: linear-gradient(135deg, #f1fbf7, #f7fbff);
  color: #24553d;
  border-radius: 16px;
  padding: 16px 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9);
}
.question-voice-panel::before {
  content: "";
  width: 42px;
  height: 42px;
  flex: 0 0 auto;
  border-radius: 14px;
  background:
    linear-gradient(90deg, transparent 6px, #15915f 6px 10px, transparent 10px 15px, #67b894 15px 20px, transparent 20px 25px, #15915f 25px 30px, transparent 30px),
    #e4f5ee;
  opacity: .9;
}
.question-voice-panel strong { display: block; color: #137f55; font-size: 16px; margin-bottom: 2px; }
.question-voice-panel span { color: #557163; font-size: 13px; line-height: 1.5; }
.question-voice-panel .button-row { margin-top: 0; }
.progress { color: #7d8b9a; font-weight: 800; background: #f2f6f9; border-radius: 14px; padding: 10px 14px; white-space: nowrap; }
.image-wrap { margin-top: 18px; border-radius: 18px; overflow: hidden; border: 1px solid #dbe6ee; background: #f7fafc; text-align: center; }
.image-wrap img { max-width: 100%; max-height: 420px; display: block; margin: auto; }
.hidden { display: none !important; }
.rubric-card { margin-top: 18px; background: #fff8e7; border: 1px solid #f1dca3; color: #5e4c24; border-radius: 14px; padding: 14px 16px; line-height: 1.7; }
.recorder { margin-top: 22px; background: radial-gradient(circle at 50% 0%, rgba(47,111,159,.08), transparent 36%), linear-gradient(180deg, #ffffff, #f3f8fb); border: 1px solid #d5e4ec; border-radius: 28px; padding: 28px; text-align: center; box-shadow: inset 0 1px 0 rgba(255,255,255,.85), 0 12px 30px rgba(31,52,74,.045); }
#timer { font-size: 48px; font-weight: 900; letter-spacing: 2px; color: #16263a; font-variant-numeric: tabular-nums; }
#status { margin-top: 8px; color: #5d6f82; font-weight: 800; }
.record-hint { max-width: 640px; margin: 8px auto 0; line-height: 1.6; color: #667789; }
.record-hint.warn { border: 1px solid #f4dfad; background: #fff8e7; color: #765613; border-radius: 12px; padding: 10px 12px; font-weight: 700; }
.record-actions {
  display: grid;
  grid-template-columns: minmax(104px, 128px) minmax(188px, 240px) minmax(104px, 128px);
  gap: 14px;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
.record-actions button { min-height: 58px; border-radius: 18px; }
.record-actions .nav-step {
  color: #285171;
  background: linear-gradient(180deg, #f2f8fb, #e6f1f7);
  border: 1px solid #d5e5ee;
}
.primary-record {
  position: relative;
  gap: 10px;
  min-width: 210px;
  overflow: hidden;
}
.primary-record .record-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 5px rgba(255,255,255,.18);
}
.primary-record .record-icon::before {
  content: "";
  width: 10px;
  height: 16px;
  border-radius: 8px;
  background: #15915f;
  box-shadow: inset 0 -4px 0 rgba(0,0,0,.08);
}
.primary-record[data-mode="recording"] {
  background: linear-gradient(135deg, #ef5f54, #d93863);
  box-shadow: 0 16px 34px rgba(217,56,99,.27);
}
.primary-record[data-mode="recording"] .record-icon::before {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: #d93863;
}
.primary-record[data-mode="saving"] {
  background: linear-gradient(135deg, #6b7f92, #52677d);
  box-shadow: 0 12px 24px rgba(82,103,125,.18);
}
.primary-record[data-mode="saving"] .record-icon::before {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 3px solid #52677d;
  border-top-color: transparent;
  background: transparent;
  animation: spin .8s linear infinite;
}
.primary-record[data-mode="saved"] {
  background: linear-gradient(135deg, #2776b8, #245e96);
  box-shadow: 0 14px 28px rgba(39,118,184,.22);
}
.primary-record[data-mode="saved"] .record-icon::before {
  width: 15px;
  height: 9px;
  border-radius: 0;
  border-left: 4px solid #2776b8;
  border-bottom: 4px solid #2776b8;
  background: transparent;
  transform: rotate(-45deg) translate(1px, -1px);
}
@keyframes spin { to { transform: rotate(360deg); } }
.encouragement-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 1200;
  width: min(520px, calc(100% - 32px));
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 14px;
  align-items: center;
  border: 1px solid rgba(203, 217, 227, .95);
  border-radius: 18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(246,251,248,.98)),
    repeating-linear-gradient(135deg, rgba(47,111,159,.05) 0 1px, transparent 1px 13px);
  box-shadow: 0 18px 54px rgba(21, 34, 56, .16);
  padding: 14px 16px;
  color: var(--ink);
  transform: translate(-50%, 18px) scale(.98);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.encouragement-toast.show {
  opacity: 1;
  transform: translate(-50%, 0) scale(1);
}
.encouragement-toast strong { display: block; font-size: 18px; margin-bottom: 3px; }
.encouragement-toast p { margin: 0; color: var(--muted); font-weight: 750; line-height: 1.55; }
.encouragement-mark {
  position: relative;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, #e8f8f0, #edf5ff);
  border: 1px solid #d5e8ee;
  overflow: hidden;
}
.encouragement-mark::before {
  content: "";
  position: absolute;
  left: 16px;
  top: 15px;
  width: 23px;
  height: 14px;
  border-left: 5px solid var(--green);
  border-bottom: 5px solid var(--green);
  transform: rotate(-45deg);
  border-radius: 2px;
}
.encouragement-mark span {
  position: absolute;
  width: 8px;
  height: 8px;
  border-radius: 3px;
  background: var(--amber);
  animation: floatMark 1.35s ease-in-out infinite;
}
.encouragement-mark span:nth-child(1) { left: 8px; top: 9px; animation-delay: 0s; }
.encouragement-mark span:nth-child(2) { right: 9px; top: 11px; background: var(--blue); animation-delay: .16s; }
.encouragement-mark span:nth-child(3) { right: 13px; bottom: 9px; background: var(--green); animation-delay: .32s; }
@keyframes floatMark {
  0%, 100% { transform: translateY(0) rotate(0deg); opacity: .72; }
  50% { transform: translateY(-5px) rotate(12deg); opacity: 1; }
}
.completion-overlay {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 30% 18%, rgba(255,255,255,.46), transparent 28%),
    linear-gradient(135deg, rgba(15, 28, 44, .44), rgba(33, 71, 91, .32));
  backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.completion-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.completion-card {
  position: relative;
  overflow: hidden;
  width: min(760px, 100%);
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(220px, .78fr) minmax(0, 1fr);
  gap: 26px;
  align-items: center;
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 30px;
  padding: 34px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,252,249,.96) 58%, rgba(242,248,255,.97)),
    repeating-linear-gradient(135deg, rgba(47,111,159,.055) 0 1px, transparent 1px 18px);
  box-shadow: 0 34px 110px rgba(14, 29, 47, .32);
  transform: translateY(18px) scale(.985);
  transition: transform .34s cubic-bezier(.2,.85,.25,1);
}
.completion-overlay.show .completion-card { transform: translateY(0) scale(1); }
.completion-card::before {
  content: "";
  position: absolute;
  inset: 18px;
  border-radius: 24px;
  border: 1px solid rgba(207,229,220,.68);
  pointer-events: none;
}
.completion-stage {
  position: relative;
  min-height: 280px;
  display: grid;
  place-items: center;
}
.completion-art {
  position: relative;
  z-index: 3;
  width: min(260px, 100%);
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 34px;
  border: 1px solid rgba(255,255,255,.92);
  box-shadow: 0 24px 58px rgba(31, 52, 74, .18);
}
.completion-rings {
  position: absolute;
  width: 230px;
  height: 230px;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255,255,255,.9) 0 38%, transparent 39%),
    conic-gradient(from 20deg, #15915f, #2f6f9f, #f0b84b, #15915f);
  filter: drop-shadow(0 18px 32px rgba(31,52,74,.16));
  animation: completionSpin 10s linear infinite;
}
.completion-rings span {
  position: absolute;
  inset: -16px;
  border-radius: 50%;
  border: 1px solid rgba(21,145,95,.26);
  animation: completionPulse 2.6s ease-in-out infinite;
}
.completion-rings span:nth-child(2) { inset: -34px; border-color: rgba(47,111,159,.22); animation-delay: .35s; }
.completion-rings span:nth-child(3) { inset: -52px; border-color: rgba(240,184,75,.22); animation-delay: .7s; }
.completion-medal {
  position: relative;
  z-index: 2;
  width: 148px;
  height: 148px;
  display: grid;
  place-items: center;
  border-radius: 42px;
  background:
    linear-gradient(135deg, #ffffff, #f2fbf6),
    radial-gradient(circle at 35% 22%, rgba(255,255,255,.75), transparent 35%);
  border: 1px solid #d1e7df;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 24px 48px rgba(31,52,74,.16);
  animation: medalPop .72s cubic-bezier(.2,.88,.26,1.24) both;
}
.completion-art ~ .completion-rings,
.completion-art ~ .completion-medal { display: none; }
.completion-medal::before,
.completion-medal::after {
  content: "";
  position: absolute;
  width: 42px;
  height: 78px;
  top: -45px;
  border-radius: 12px;
  background: linear-gradient(180deg, #2f6f9f, #15915f);
  transform-origin: bottom center;
  z-index: -1;
}
.completion-medal::before { left: 40px; transform: rotate(-18deg); }
.completion-medal::after { right: 40px; transform: rotate(18deg); background: linear-gradient(180deg, #f0b84b, #15915f); }
.completion-check {
  width: 66px;
  height: 38px;
  border-left: 12px solid #15915f;
  border-bottom: 12px solid #15915f;
  border-radius: 6px;
  transform: rotate(-45deg) translate(4px, -4px);
  animation: checkDraw .58s ease .2s both;
}
.completion-copy { position: relative; z-index: 2; }
.completion-copy h2 {
  margin: 12px 0 10px;
  font-size: clamp(30px, 4.2vw, 48px);
  line-height: 1.12;
  color: #142335;
}
.completion-copy p {
  margin: 0;
  color: #52677d;
  font-weight: 750;
  line-height: 1.8;
  font-size: 17px;
}
.completion-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin: 22px 0;
}
.completion-stats div {
  min-height: 82px;
  border: 1px solid #dbe8ee;
  border-radius: 18px;
  background: rgba(255,255,255,.82);
  padding: 12px;
  box-shadow: 0 10px 28px rgba(31,52,74,.06);
}
.completion-stats b {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #15915f;
  font-size: 22px;
  line-height: 1.25;
}
.completion-stats span {
  display: block;
  margin-top: 5px;
  color: #6b7d8f;
  font-weight: 850;
  font-size: 12px;
}
.completion-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.completion-actions button,
.completion-actions .download {
  min-height: 48px;
  border-radius: 16px;
}
.completion-confetti {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.completion-confetti span {
  position: absolute;
  left: var(--x);
  top: -20px;
  width: var(--size);
  height: calc(var(--size) * 1.5);
  border-radius: 4px;
  background: var(--color);
  opacity: .9;
  transform: rotate(var(--rot));
  animation: confettiDrop var(--dur) cubic-bezier(.2,.72,.36,1) var(--delay) both;
}
body.celebrating .student-mode .test-panel {
  box-shadow: 0 22px 60px rgba(21,145,95,.18);
}
@keyframes completionSpin { to { transform: rotate(360deg); } }
@keyframes completionPulse {
  0%, 100% { transform: scale(.96); opacity: .32; }
  50% { transform: scale(1.04); opacity: .72; }
}
@keyframes medalPop {
  from { transform: scale(.62) translateY(24px); opacity: 0; }
  to { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes checkDraw {
  from { clip-path: inset(100% 0 0 0); opacity: 0; }
  to { clip-path: inset(0 0 0 0); opacity: 1; }
}
@keyframes confettiDrop {
  0% { transform: translateY(-24px) rotate(var(--rot)); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translateY(620px) rotate(calc(var(--rot) + 460deg)); opacity: 0; }
}
@media (max-width: 760px) {
  .completion-overlay { padding: 16px; align-items: start; overflow: auto; }
  .completion-card { grid-template-columns: 1fr; min-height: 0; padding: 24px; gap: 10px; }
  .completion-stage { min-height: 210px; }
  .completion-rings { width: 170px; height: 170px; }
  .completion-medal { width: 118px; height: 118px; border-radius: 34px; }
  .completion-check { width: 52px; height: 30px; border-left-width: 10px; border-bottom-width: 10px; }
  .completion-stats { grid-template-columns: 1fr; }
  .completion-actions > * { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .completion-rings,
  .completion-rings span,
  .completion-medal,
  .completion-check,
  .completion-confetti span {
    animation: none !important;
  }
}
audio { width: 100%; max-width: 760px; margin-top: 16px; }
.empty { color: #7b8998; background: #f7fafc; border-radius: 14px; padding: 16px; line-height: 1.8; }
.result, .report { background: #fbfdff; border: 1px solid #e1ebf2; border-radius: 14px; padding: 16px; }
.result.error { border-color: #ffc4c4; background: #fff7f7; color: #8b1f1f; }
.score-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; background: #edf7f3; color: #15915f; border-radius: 12px; margin-bottom: 12px; }
.score-line strong { font-size: 28px; }
.score-line span { color: #315f4d; font-weight: 800; }
@media (max-width: 1100px) {
  .hero, .layout, .two-cols { grid-template-columns: 1fr; display: block; }
  .test-panel, .setup-panel, .result-panel, .report-panel { grid-column: auto; grid-row: auto; margin-top: 18px; }
  .hero { display: block; }
  .health { margin-top: 18px; min-width: 0; }
  .question-voice-panel { display: block; }
  .question-voice-panel::before { display: none; }
  .question-voice-panel .button-row { margin-top: 12px; }
  .record-actions { grid-template-columns: 1fr; }
  .record-actions .nav-step, .primary-record { width: 100%; min-width: 0; }
}
.pending { border-color: #f4dfad; background: #fffdf5; }
.pending-line { background: #fff5d6; color: #8a6200; }
.pending-line span { color: #8a6200; }
.error-line { background: #ffecec; color: #9a2b2b; }
.error-line span { color: #9a2b2b; }

.student-mode {
  width: min(1240px, calc(100% - 34px));
  max-width: 1240px;
  margin-top: 22px;
  position: relative;
}
.student-mode::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(circle at 82% 8%, rgba(255,255,255,.94), transparent 24%),
    radial-gradient(circle at 12% 10%, rgba(255,231,172,.32), transparent 28%),
    radial-gradient(circle at 90% 86%, rgba(174,219,241,.28), transparent 32%),
    linear-gradient(180deg, rgba(242,250,249,.98), rgba(249,251,247,.98));
}
.student-mode .hero {
  min-height: 270px;
  align-items: center;
  border-radius: 34px;
  padding: 40px 44px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.93) 40%, rgba(255,255,255,.62) 62%, rgba(255,255,255,.08) 100%),
    url('/static/assets/ui/student-hero-v2.png') center right / cover no-repeat;
  border-color: #cfe4e5;
  box-shadow: 0 28px 72px rgba(34, 83, 96, .14);
}
.student-mode .hero::after {
  content: none;
}
.student-mode .hero h1 { font-size: clamp(38px, 5vw, 62px); letter-spacing: 0; }
.student-mode .hero p { font-size: 17px; color: #536678; }
.student-mode .layout { grid-template-columns: 310px minmax(0, 1fr); gap: 22px; align-items: start; }
.student-mode .setup-panel {
  position: sticky;
  top: 22px;
  border-color: #d4e5e5;
  border-radius: 26px;
  padding: 20px;
  background: rgba(255,255,255,.94);
}
.student-mode .setup-panel h2 { font-size: 22px; }
.student-mode .two-cols,
.student-mode .three-cols { grid-template-columns: 1fr; gap: 8px; }
.student-mode .manual-student-details {
  margin-top: 12px;
  border: 1px solid #dbe9f0;
  border-radius: 16px;
  background: #f8fbfd;
  overflow: hidden;
}
.student-mode .manual-student-details summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  color: #52677d;
  font-weight: 900;
}
.student-mode .manual-student-details summary::-webkit-details-marker { display: none; }
.student-mode .manual-student-details summary::after {
  content: "展开";
  float: right;
  color: #8b98a6;
  font-size: 12px;
}
.student-mode .manual-student-details[open] summary::after { content: "收起"; }
.student-mode .manual-identity-fields { padding: 0 14px 14px; }
.student-mode .student-roster-note {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-radius: 14px;
  background: #f5faf7;
  border: 1px solid #d9eadf;
  color: #587065;
  font-size: 13px;
  line-height: 1.6;
}
.student-mode label { color: #607083; margin: 11px 0 7px; }
.student-mode input,
.student-mode select { height: 44px; border-radius: 14px; background: #ffffff; }
.student-mode .test-panel {
  border-color: #cfe5dc;
  border-radius: 30px;
  padding: 28px;
  background: rgba(255,255,255,.97);
  box-shadow: 0 20px 52px rgba(28,70,83,.10);
}
.student-mode .question-card {
  border-radius: 30px;
  padding: 32px 34px;
  background:
    radial-gradient(circle at 88% 12%, rgba(255,205,93,.14), transparent 26%),
    linear-gradient(135deg, #ffffff 0%, #f6fcf9 50%, #f3f8ff 100%);
  border-color: #cfe5dc;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.9), 0 16px 34px rgba(34, 73, 92, .06);
}
.student-mode .question-card::before { top: 24px; bottom: 24px; width: 6px; }
.student-mode .question-label { margin-top: 18px; color: #6e8193; }
.student-mode #qTitle { font-size: clamp(30px, 3.1vw, 44px); line-height: 1.28; letter-spacing: 0; }
.student-mode .progress {
  background: #eef6fb;
  color: #547087;
  border: 1px solid #dbe9f0;
  border-radius: 999px;
}
.student-mode .badge {
  min-height: 32px;
  padding: 5px 14px;
  background: #e6f8ef;
  color: #118567;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8);
}
.student-mode .question-voice-panel {
  border-radius: 22px;
  border-color: #c8e3d8;
  background: linear-gradient(135deg, #f2fbf6, #f5f9ff);
}
.student-mode .rubric-card {
  background: #f7fbef;
  border-color: #dbe8bf;
  color: #50602d;
  border-radius: 18px;
}
.student-mode .recorder {
  padding: 30px;
  border-radius: 34px;
  background:
    radial-gradient(circle at 50% -20%, rgba(21,145,95,.13), transparent 38%),
    radial-gradient(circle at 16% 100%, rgba(255,205,93,.12), transparent 32%),
    linear-gradient(180deg, #ffffff, #f5fbfc);
  border-color: #d2e5ec;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.88), 0 18px 44px rgba(31, 76, 92, .08);
}
.student-mode #timer {
  width: fit-content;
  margin: 0 auto;
  padding: 6px 22px;
  border-radius: 999px;
  background: #f1f6fa;
  border: 1px solid #dbe9f0;
  font-size: clamp(48px, 5.8vw, 72px);
  letter-spacing: 1px;
}
.student-mode #status { font-size: 17px; color: #52677d; }
.student-mode .record-actions {
  grid-template-columns: minmax(112px, 136px) minmax(220px, 300px) minmax(112px, 136px);
  gap: 16px;
}
.student-mode .record-actions button {
  min-height: 64px;
  border-radius: 22px;
  font-size: 16px;
}
.student-mode button.record {
  min-width: 240px;
  font-size: 19px;
  background: linear-gradient(135deg, #13966f, #2378a7);
}
.student-mode .image-wrap {
  border-radius: 24px;
  background: #fff;
}
.student-mode .image-wrap img { max-height: 500px; }

@media (max-width: 900px) {
  .student-mode .layout { display: block; }
  .student-mode .hero {
    min-height: 250px;
    padding: 26px 24px;
    background:
      linear-gradient(180deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.86) 54%, rgba(255,255,255,.18) 100%),
      url('/static/assets/ui/student-hero-v2.png') center bottom / cover no-repeat;
  }
  .student-mode #qTitle { font-size: 26px; }
  .student-mode #timer { font-size: 46px; }
  .student-mode .setup-panel { position: static; }
  .student-mode .hero::after { display: none; }
  .student-mode .record-actions { grid-template-columns: 1fr; }
}

/* Dashboard */
.dashboard-hero { align-items: center; }
.paper-upload-page .dashboard-hero {
  min-height: 240px;
  padding: 34px 38px;
  border-radius: 24px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98) 0%, rgba(255,255,255,.95) 43%, rgba(255,255,255,.72) 62%, rgba(255,255,255,.12) 100%),
    url('/static/assets/ui/upload-center.png') center right / cover no-repeat;
  box-shadow: 0 24px 70px rgba(34, 66, 89, .11);
}
.paper-upload-page .dashboard-hero h1 { font-size: clamp(38px, 4vw, 56px); }
.paper-upload-page .dashboard-hero p { font-size: 17px; max-width: 560px; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; align-content: center; }
.filters-panel { margin-top: 20px; }
.filter-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.filter-grid label { margin: 0; }
.filter-grid .wide { grid-column: span 2; }
.primary-filter-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.advanced-details, .danger-details {
  margin-top: 14px;
  border: 1px solid rgba(216, 229, 238, .92);
  border-radius: 16px;
  background: rgba(250, 253, 255, .74);
  overflow: hidden;
}
.advanced-details > summary, .danger-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 14px;
  color: #415a77;
  font-weight: 900;
  display: flex;
  justify-content: space-between;
  gap: 12px;
}
.advanced-details > summary::-webkit-details-marker, .danger-details > summary::-webkit-details-marker { display: none; }
.advanced-details > summary::after, .danger-details > summary::after { content: "展开"; color: #8793a0; font-size: 12px; }
.advanced-details[open] > summary::after, .danger-details[open] > summary::after { content: "收起"; }
.advanced-details .filter-grid { padding: 0 14px 14px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
.danger-details { border-color: #f0d0d0; background: linear-gradient(180deg, rgba(255,253,253,.96), rgba(255,255,255,.92)); }
.danger-details > summary { color: #873030; }
.panel.danger-details > summary { padding: 0; }
.danger-details-body { margin-top: 14px; }
.summary-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 12px; margin: 18px 0; }
.metric-card { position: relative; overflow: hidden; background: rgba(255,255,255,.96); border: 1px solid rgba(218, 230, 238, .92); border-radius: 20px; padding: 17px; box-shadow: var(--shadow-soft); }
.metric-card::after { content: ""; position: absolute; right: -18px; top: -20px; width: 74px; height: 74px; border-radius: 999px; background: radial-gradient(circle, rgba(17,133,103,.11), transparent 68%); pointer-events: none; }
.metric-card div { color: #607083; font-weight: 800; font-size: 13px; }
.metric-card strong { display: block; font-size: 28px; color: #1b2a3b; margin: 8px 0 4px; }
.metric-card span { color: #8b98a6; font-size: 12px; }
.dashboard-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 18px; }
.chart-panel { min-height: 260px; background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(249,252,253,.92)); }
.bar-chart, .pill-chart { display: flex; flex-direction: column; gap: 12px; }
.bar-row { display: grid; gap: 6px; }
.bar-title { display: flex; justify-content: space-between; gap: 12px; color: #445366; font-size: 13px; }
.bar-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-title b { white-space: nowrap; }
.bar-track, .pill-track { width: 100%; height: 11px; background: #eef4f8; border-radius: 999px; overflow: hidden; }
.bar-fill, .pill-track > div { height: 100%; background: #15915f; border-radius: 999px; }
.pill-row { display: grid; grid-template-columns: auto 40px 1fr; align-items: center; gap: 10px; }
.mini-badge { display: inline-flex; padding: 5px 10px; border-radius: 999px; font-size: 12px; font-weight: 850; background: #edf3f7; color: #536375; }
.mini-badge.ok { background: #e9f8f1; color: #15915f; }
.mini-badge.warn { background: #fff3d3; color: #8a6200; }
.mini-badge.bad { background: #ffe8e8; color: #9a2b2b; }
.records-panel { margin-top: 18px; }
.report-center { margin-top: 18px; }
.report-center h2 { margin-bottom: 4px; }
.report-filter-grid { grid-template-columns: 220px 200px minmax(260px, 1fr); margin: 14px 0 10px; }
.report-filter-grid label { margin: 0; }
.report-table { width: 100%; table-layout: fixed; min-width: 0; }
.report-table th:nth-child(1) { width: 26%; }
.report-table th:nth-child(2) { width: 8%; }
.report-table th:nth-child(3) { width: 24%; }
.report-table th:nth-child(4) { width: 14%; }
.report-table th:nth-child(5) { width: 8%; }
.report-table th:nth-child(6) { width: 20%; }
.report-table .paper-badges { gap: 4px; }
.report-table .small-text { font-size: 12px; }
.compact-actions { gap: 6px; flex-wrap: wrap; }
.compact-actions button { white-space: nowrap; }
.records-header { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
#recordsHint { color: #738293; font-size: 13px; }
.dashboard-action-status { min-height: 20px; margin-top: 10px; font-weight: 700; }
.dashboard-action-status.ok { color: #15915f; }
.dashboard-action-status.warn { color: #8a6200; }
.table-wrap { overflow: auto; border: 1px solid rgba(218, 230, 238, .95); border-radius: 18px; background: #fff; box-shadow: inset 0 1px 0 rgba(255,255,255,.85); }
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; background: #fff; }
th, td { text-align: left; padding: 13px 12px; border-bottom: 1px solid #edf2f6; vertical-align: top; }
th { background: linear-gradient(180deg, #f8fbfd, #f2f6f9); color: #526273; position: sticky; top: 0; z-index: 1; font-weight: 900; }
tr:hover td { background: #fbfdff; }
.small-text { color: #8793a0; font-size: 12px; margin-top: 4px; }
.danger-text { color: #9a2b2b; }
.clip-text { max-width: 260px; max-height: 42px; overflow: hidden; line-height: 1.6; }
.audio-cell audio { width: 180px; margin: 0; }
button.tiny { padding: 7px 10px; min-height: 0; border-radius: 8px; font-size: 12px; }
.empty-cell { text-align: center; color: #8793a0; padding: 28px !important; }
.detail-panel { margin-top: 18px; }
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.detail-content h3 { margin: 8px 0 10px; color: #1b2a3b; }
.detail-content p { margin: 8px 0; }
.detail-img { width: 100%; max-height: 360px; object-fit: contain; background: #f7fafc; border: 1px solid #e1ebf2; border-radius: 16px; }
.review-box { margin-top: 14px; background: #f7fafc; border: 1px solid #e1ebf2; border-radius: 16px; padding: 14px; }
.paper-table th:nth-child(1) { min-width: 90px; }
.paper-table th:nth-child(2) { min-width: 180px; }
.paper-table th:nth-child(3) { min-width: 120px; }
.paper-table th:nth-child(4) { min-width: 140px; }
.paper-table th:nth-child(8) { min-width: 240px; }
.paper-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.paper-detail-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.paper-detail-head h3 { margin: 0 0 8px; color: #1b2a3b; }
.paper-detail-head p { margin: 0; color: #526273; line-height: 1.7; }
.paper-detail-meta { flex: 0 0 auto; border-radius: 12px; background: #f7fafc; border: 1px solid #e1ebf2; padding: 10px 12px; color: #415a77; font-weight: 800; }
.paper-question-wrap { margin-top: 10px; }
.question-detail-table th:nth-child(2) { min-width: 300px; }
.question-detail-table th:nth-child(5) { min-width: 240px; }
.question-text-wide { max-width: 420px; max-height: 58px; }
textarea { width: 100%; min-height: 86px; resize: vertical; border: 1px solid #ccd8e2; background: #fbfdff; border-radius: 12px; padding: 10px 12px; font-size: 14px; font-family: inherit; outline: none; }
textarea:focus { border-color: #15915f; box-shadow: 0 0 0 3px rgba(21,145,95,.12); }
@media (max-width: 1200px) {
  .summary-grid { grid-template-columns: repeat(3, 1fr); }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .filter-grid, .primary-filter-grid, .advanced-details .filter-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1400px) {
  .report-table { min-width: 0; }
  .report-table thead { display: none; }
  .report-table tr {
    display: block;
    padding: 14px;
    border-bottom: 1px solid #e7eef4;
  }
  .report-table td {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    gap: 10px;
    align-items: start;
    border: 0;
    padding: 7px 0;
  }
  .report-table td::before {
    color: #77879a;
    font-size: 12px;
    font-weight: 900;
  }
  .report-table td:nth-child(1)::before { content: "范围"; }
  .report-table td:nth-child(2)::before { content: "状态"; }
  .report-table td:nth-child(3)::before { content: "成绩"; }
  .report-table td:nth-child(4)::before { content: "生成"; }
  .report-table td:nth-child(5)::before { content: "文件"; }
  .report-table td:nth-child(6)::before { content: "操作"; }
  .report-table .compact-actions { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  .summary-grid, .dashboard-grid, .filter-grid, .primary-filter-grid, .advanced-details .filter-grid, .detail-grid { grid-template-columns: 1fr; }
  .filter-grid .wide { grid-column: auto; }
  .hero-actions { justify-content: flex-start; margin-top: 14px; }
  .paper-detail-head { flex-direction: column; }
}

/* Question image manager */
.manager-filters { grid-template-columns: 220px minmax(260px, 1fr); }
.manager-summary { grid-template-columns: repeat(5, 1fr); }
.manager-help { margin-top: 18px; }
.manager-okbox { background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534; border-radius: 14px; padding: 14px; line-height: 1.8; }
.manager-okbox code { background: rgba(255,255,255,.7); padding: 2px 6px; border-radius: 6px; color: #115a7a; }
.manager-table th:nth-child(1) { min-width: 150px; }
.manager-table th:nth-child(2) { min-width: 260px; }
.manager-table th:nth-child(3) { min-width: 220px; }
.manager-table th:nth-child(4) { min-width: 220px; }
.manager-table th:nth-child(5) { min-width: 240px; }
.manager-question-text { max-width: 360px; max-height: 66px; }
.manager-thumb { width: 180px; max-height: 120px; object-fit: contain; border: 1px solid #e1ebf2; border-radius: 12px; background: #f7fafc; display: block; margin-bottom: 8px; }
.button-row.compact { margin-top: 8px; }
.manager-table input[type="file"] { height: auto; padding: 9px; margin-bottom: 8px; }
.manager-table select { min-width: 200px; margin-bottom: 8px; }
.danger-panel { border-color: #efd1d1; background: linear-gradient(180deg, rgba(255,253,253,.96), rgba(255,255,255,.92)); }
.danger-panel h2 { color: #873030; }
.delete-test-box { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: end; margin-top: 14px; }
.paper-delete-select-box { grid-template-columns: minmax(150px, .5fr) minmax(240px, .8fr) minmax(260px, 1fr) auto; }
.delete-test-box label { margin: 0; }
.delete-test-box input, .delete-test-box select { border-color: #e6b8b8; background: #fffdfd; }
.delete-test-box input:focus, .delete-test-box select:focus { border-color: #c43c3c; box-shadow: 0 0 0 3px rgba(196,60,60,.12); }
.student-roster-manager { margin-top: 20px; padding-top: 20px; border-top: 1px solid #e4edf2; }
.student-management-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 16px; align-items: start; }
.student-management-card {
  border: 1px solid rgba(220,232,239,.96);
  border-radius: 22px;
  padding: 18px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(249,252,253,.96));
  box-shadow: var(--shadow-soft);
}
.student-management-card h3 { margin: 8px 0 6px; font-size: 22px; color: #1b2d3f; }
.student-management-card p { margin: 0 0 14px; color: #657587; line-height: 1.7; }
.student-management-card .small-text { margin-top: 12px; }
.student-management-card.danger-card { border-color: #efd5d5; background: linear-gradient(180deg, #fffefe, #fffafa); }
.danger-label { background: #fce7e7; color: #8b2323; }
.student-add-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; margin-top: 12px; }
.student-add-form label,
.student-delete-form label { margin: 0; }
.student-add-form button { grid-column: 1 / -1; }
.student-delete-form { display: grid; grid-template-columns: 1fr; gap: 12px; align-items: end; margin-top: 12px; }
.student-delete-form select { border-color: #e8c4c4; background: #fffdfd; }
.student-delete-form select:focus { border-color: #c43c3c; box-shadow: 0 0 0 3px rgba(196,60,60,.12); }
.compact-btn { padding: 8px 12px; min-height: 36px; }
.delete-records-box { display: grid; grid-template-columns: minmax(260px, 1fr) auto; gap: 12px; align-items: end; margin-top: 14px; }
.delete-records-box label { margin: 0; }
.delete-records-box select { border-color: #e6b8b8; background: #fffdfd; }
.delete-records-box select:focus { border-color: #c43c3c; box-shadow: 0 0 0 3px rgba(196,60,60,.12); }
.image-library { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.image-card { border: 1px solid #e1ebf2; border-radius: 18px; padding: 12px; background: linear-gradient(180deg, #fff, #fbfdff); line-height: 1.6; box-shadow: 0 10px 24px rgba(31,52,74,.035); }
.image-card img { width: 100%; height: 120px; object-fit: contain; border: 1px solid #eef2f6; border-radius: 12px; background: white; margin-bottom: 10px; }
.image-card b { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 900px) {
  .manager-summary { grid-template-columns: repeat(2, 1fr); }
  .manager-filters { grid-template-columns: 1fr; }
  .delete-test-box { grid-template-columns: 1fr; }
  .student-management-grid,
  .student-add-form,
  .student-delete-form { grid-template-columns: 1fr; }
  .student-add-form button { grid-column: auto; }
  .delete-records-box { grid-template-columns: 1fr; }
}

/* Import center */
.import-summary { grid-template-columns: repeat(6, 1fr); }
.import-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 18px; align-items: start; }
.import-card { min-height: 420px; }
.import-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 14px; }
.import-card-head h2 { margin-bottom: 6px; }
.import-card-head p { margin: 0; color: #607083; }
.step-dot { width: 38px; height: 38px; border-radius: 14px; background: #15915f; color: white; display: inline-flex; justify-content: center; align-items: center; font-weight: 900; flex: 0 0 auto; }
.import-result { margin-top: 16px; }
.import-result.warn { border-color: #f4dfad; background: #fff8e7; color: #725300; }
.import-wide { grid-column: 1 / -1; min-height: 0; }
.import-flow { grid-template-columns: repeat(6, minmax(0, 1fr)); margin-top: 8px; }
.primary-link { background: #15915f !important; color: white !important; }
.import-help { margin-top: 18px; }
.import-help .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.guide-table { width: 100%; border-collapse: collapse; }
.guide-table th, .guide-table td { border-bottom: 1px solid #eef1f6; text-align: left; padding: 10px; vertical-align: top; }
.guide-table th { color: #415a77; background: #f8fafc; width: 120px; }
@media (max-width: 1000px) {
  .import-summary { grid-template-columns: repeat(2, 1fr); }
  .import-grid, .import-help .two-col { grid-template-columns: 1fr; }
  .import-flow { grid-template-columns: 1fr 1fr; }
}
.three-cols { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }
.notice-box { background: #f8fbfd; border: 1px solid #e1ebf2; border-radius: 16px; padding: 14px; margin: 14px 0 18px; }
.notice-box > b { display: block; color: #1b2a3b; margin-bottom: 6px; }
.notice-box p { margin: 0 0 12px; color: #607083; font-size: 13px; }
.notice-box .guide-table { font-size: 12px; }
@media (max-width: 900px) { .three-cols { grid-template-columns: 1fr; } }

.compact-selects label { margin-top: 10px; }

/* API Key 自动提醒 */
.health.ok { border-color: #bdebd2; background: #f0fdf4; color: #166534; }
.health.warn { border-color: #f4dfad; background: #fff8e7; color: #8a6200; }
.health.bad { border-color: #ffc4c4; background: #fff4f4; color: #9a2b2b; }
.health.ok span { color: #27764c; }
.health.warn span { color: #8a6200; }
.health.bad span { color: #9a2b2b; }
.api-modal-backdrop { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(12, 22, 34, .45); backdrop-filter: blur(3px); }
.api-modal { width: min(620px, 100%); background: #fff; border-radius: 22px; padding: 26px; box-shadow: 0 30px 90px rgba(14, 29, 47, .28); border: 1px solid #e4edf3; }
.api-modal-badge { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 12px; border-radius: 999px; background: #fff3d3; color: #8a6200; font-size: 13px; font-weight: 800; margin-bottom: 12px; }
.api-modal h2 { margin: 0 0 10px; font-size: 24px; color: #1b2a3b; }
.api-modal p { margin: 0 0 16px; color: #526273; line-height: 1.8; }
.api-modal-steps { background: #f7fafc; border: 1px solid #e1ebf2; border-radius: 16px; padding: 16px; line-height: 1.8; color: #2f3f52; }
.api-modal-steps ol { margin: 8px 0 0 22px; padding: 0; }
.api-modal-note { margin-top: 14px; padding: 12px 14px; border-radius: 14px; background: #fff8e7; border: 1px solid #f4dfad; color: #6b4b00; line-height: 1.7; }
.api-modal-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; margin-top: 18px; }
@media (max-width: 640px) {
  .api-modal-backdrop { align-items: flex-start; padding: 16px; overflow: auto; }
  .api-modal { padding: 20px; }
  .api-modal-actions { justify-content: stretch; }
  .api-modal-actions > * { width: 100%; }
}

/* AI接口设置页 */
.ai-settings-page .dashboard-hero { align-items: flex-start; }
.section-title-row { display:flex; justify-content:space-between; gap:16px; align-items:flex-start; }
.section-title-row p { margin: 4px 0 0; color:#607083; }
.ai-status-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:12px; margin-top:14px; }
.ai-provider-card { position: relative; overflow: hidden; border-radius:14px; border:1px solid #e1ebf2; background:#fbfdff; padding:14px; line-height:1.55; }
.ai-provider-card::before { content: ""; position: absolute; inset: 0 0 auto; height: 4px; background: #91a3b4; }
.ai-provider-card h3 { margin:4px 0 5px; color:#1b2a3b; }
.ai-provider-card p { margin:6px 0; color:#526273; }
.ai-provider-card.ok { background:#f6fcf8; border-color:#caead9; }
.ai-provider-card.ok::before { background: var(--green); }
.ai-provider-card.warn { background:#fffaf0; border-color:#efd69c; }
.ai-provider-card.warn::before { background: var(--amber); }
.ai-provider-card.bad { background:#fff7f7; border-color:#efc8c8; }
.ai-provider-card.bad::before { background: var(--rose); }
.ai-settings-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; margin-top:16px; align-items:start; }
.ai-setting-card { min-height:0; }
.recommended-card { grid-column:1 / -1; }
.recommended-card {
  background:
    linear-gradient(135deg, #ffffff 0%, #f6fbf8 54%, #f3f8fb 100%);
}
.ai-role-strip {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
.ai-role-strip > div {
  position: relative;
  overflow: hidden;
  min-height: 102px;
  border: 1px solid #dbe7ee;
  border-radius: 14px;
  background: rgba(255,255,255,.86);
  padding: 12px;
  box-shadow: 0 8px 24px rgba(31,52,74,.05);
}
.ai-role-strip > div::after {
  content: "";
  position: absolute;
  right: -18px;
  bottom: -18px;
  width: 66px;
  height: 66px;
  border-radius: 50%;
  border: 14px solid rgba(17,133,103,.08);
}
.ai-role-strip span { color: var(--green); font-weight: 950; font-size: 11px; letter-spacing: .6px; }
.ai-role-strip b { display: block; margin: 6px 0 4px; color:#1b2a3b; font-size: 15px; }
.ai-role-strip p { margin: 0; color:#607083; font-size:12px; line-height: 1.5; }
.provider-status { margin:12px 0; }
.provider-status-box { border-radius:12px; padding:12px 14px; line-height:1.7; border:1px solid #e1ebf2; }
.provider-status-box.ok { background:#f6fcf8; border-color:#caead9; color:#166534; }
.provider-status-box.warn { background:#fffaf0; border-color:#efd69c; color:#8a6200; }
.provider-status-box.bad { background:#fff7f7; border-color:#efc8c8; color:#9a2b2b; }
.checkbox-line { display:flex; gap:8px; align-items:center; font-size:13px; color:#526273; margin-top:10px; }
.checkbox-line input { width:auto; height:auto; margin:0; }
.notice-box.compact { margin-top:16px; }
.ai-save-panel { margin-top:18px; }
.function-choice-grid { display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap:14px; margin:12px 0 16px; }
.function-choice-grid > div { background:#fbfdff; border:1px solid #e1ebf2; border-radius:14px; padding:12px; }
.compact-checkbox { min-height:42px; background:#f7fafc; border:1px solid #e1ebf2; border-radius:12px; padding:0 12px; }
@media (max-width: 1000px) {
  .ai-status-grid, .ai-settings-grid, .function-choice-grid { grid-template-columns:1fr; }
  .recommended-card { grid-column:auto; }
  .ai-role-strip { grid-template-columns:1fr; }
}
/* 图片管理页：按测评进度筛选，并默认只看图片题 */
.manager-filters { grid-template-columns: 240px minmax(280px, 1fr) 180px 180px 190px; align-items: end; }
.checkbox-filter { display: flex; align-items: center; gap: 8px; min-height: 42px; margin: 0; padding: 0 10px; border: 1px solid #e1ebf2; border-radius: 12px; background: #fbfdff; color: #415a77; }
.checkbox-filter input { width: auto; height: auto; margin: 0; }
#progressHint { margin-top: 10px; }
@media (max-width: 1100px) { .manager-filters { grid-template-columns: 1fr 1fr; } .manager-filters .wide { grid-column: auto; } }
@media (max-width: 720px) { .manager-filters { grid-template-columns: 1fr; } }
/* 导入中心：非标准Excel自动分析结果 */
.analysis-box { margin-top: 10px; padding: 12px 14px; border-radius: 14px; background: #f8fbff; border: 1px solid #dbeaf5; line-height: 1.65; color: #2f3f52; }
.analysis-box p { margin: 6px 0; }
.analysis-box ol, .analysis-box ul { margin: 6px 0 6px 22px; padding: 0; }
.analysis-box li { margin: 2px 0; }

.image-analysis-box {
  border: 1px solid #c7d9ef;
  background: #f7fbff;
  border-radius: 14px;
  padding: 12px 14px;
  margin: 12px 0;
}
.image-analysis-box p { margin: 6px 0; }
.image-analysis-box .guide-table { margin-top: 8px; }
.import-confirm-panel {
  margin: 16px 0;
  border: 1px solid #cfe0ec;
  background: #fbfdff;
  border-radius: 16px;
  padding: 16px;
}
.import-confirm-panel.warn {
  background: #fffaf0;
  border-color: #f4dfad;
}
.confirm-title-row {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 12px;
}
.confirm-title-row h3 { margin: 0 0 4px; color: #1b2a3b; }
.confirm-title-row p { margin: 0; color: #607083; line-height: 1.6; }
.confirm-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.confirm-metrics .metric-card { min-height: 86px; }
.confirm-block {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid #edf2f7;
}
.confirm-block > b {
  display: block;
  margin-bottom: 8px;
  color: #1b2a3b;
}
.confirm-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.compact-preview { margin-top: 8px; overflow-x: auto; }
.import-preview-table { min-width: 680px; font-size: 12px; }
.import-preview-table td { max-width: 280px; }
.import-image-thumb {
  width: 108px;
  height: 72px;
  object-fit: contain;
  display: block;
  background: #f7fafc;
  border: 1px solid #dce8f0;
  border-radius: 8px;
}
.import-preview-empty {
  border: 1px dashed #d8e4ee;
  border-radius: 12px;
  padding: 12px;
  background: #f8fafc;
  color: #607083;
}
.import-confirm-line {
  margin-top: 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}
button:disabled {
  opacity: .55;
  cursor: not-allowed;
}
@media (max-width: 900px) {
  .confirm-title-row { flex-direction: column; }
  .confirm-metrics { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* 上传中心：试卷中心与学员中心分区 */
.upload-center-selector {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin-top: 16px;
}
.upload-center-tab {
  --center-accent: var(--green);
  position: relative;
  overflow: hidden;
  min-height: 132px;
  display: grid;
  align-content: start;
  gap: 8px;
  width: 100%;
  padding: 20px 22px 18px;
  border: 1px solid rgba(207, 224, 235, .95);
  border-radius: 24px;
  background:
    radial-gradient(circle at 96% 12%, rgba(17,133,103,.13), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(247,252,252,.96));
  color: var(--ink);
  text-align: left;
  box-shadow: 0 14px 34px rgba(31, 65, 88, .06);
  cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.upload-center-tab::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: linear-gradient(180deg, var(--center-accent), var(--blue));
  opacity: .58;
}
.upload-center-tab::after {
  content: "";
  position: absolute;
  right: 22px;
  top: 22px;
  width: 42px;
  height: 42px;
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(17,133,103,.16), rgba(47,111,159,.12));
}
.upload-center-tab[data-upload-center="student"] { --center-accent: var(--blue); }
.upload-center-tab:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 42px rgba(31,52,74,.105);
}
.upload-center-tab.active {
  border-color: rgba(17,133,103,.46);
  box-shadow: 0 22px 52px rgba(17, 133, 103, .12);
  background:
    radial-gradient(circle at 96% 12%, rgba(17,133,103,.18), transparent 34%),
    linear-gradient(135deg, #fff, #f4fbf8);
}
.upload-center-tab > * { position: relative; z-index: 1; }
.upload-center-tab strong { display: block; font-size: 24px; line-height: 1.15; letter-spacing: 0; }
.upload-center-tab span:not(.module-eyebrow) { max-width: 560px; color: var(--muted); font-weight: 760; line-height: 1.55; font-size: 14px; }
.upload-center-tab em { font-style: normal; color: #517086; font-size: 12px; font-weight: 900; }
.upload-center-pane[hidden] { display: none !important; }
.module-eyebrow {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 8px;
  padding: 4px 9px;
  border-radius: 999px;
  background: #eef5f8;
  color: #496278;
  font-size: 12px;
  font-weight: 900;
}
.module-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }
.module-tags span {
  border: 1px solid #dbe7ee;
  background: rgba(255,255,255,.88);
  color: #40566d;
  border-radius: 999px;
  padding: 5px 9px;
  font-size: 12px;
  font-weight: 850;
}
.upload-module-panel {
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  box-shadow: 0 20px 54px rgba(31, 65, 88, .075);
}
.upload-module-panel::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--green), var(--blue), var(--amber));
}
.paper-workbench { margin-top: 18px; }
.student-import-panel { margin-top: 18px; }
.paper-step-head { display: flex; justify-content: space-between; gap: 18px; align-items: flex-start; }
.paper-step-head.compact { margin-bottom: 12px; }
.paper-step-head h2 { margin-bottom: 5px; }
.paper-step-head p { margin: 0; color: #607083; line-height: 1.6; }
.paper-save-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.paper-upload-form {
  display: grid;
  grid-template-columns: repeat(4, minmax(210px, 1fr));
  gap: 14px;
  align-items: start;
  margin-top: 16px;
}
.paper-upload-form label { margin: 0 0 4px; }
.paper-upload-form > div { min-width: 0; }
.paper-upload-form .small-text { line-height: 1.45; }
.paper-upload-form .button-row { grid-column: 1 / -1; margin-top: 4px; }
.paper-scope-box { grid-column: 1 / -1; border: 1px solid #dbe9ef; border-radius: 18px; background: linear-gradient(180deg, #fbfeff, #f5faf8); padding: 14px; }
.paper-scope-list { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
.paper-scope-option { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; border: 1px solid #d6e6ee; border-radius: 999px; background: #fff; padding: 8px 12px; color: #203448; font-weight: 850; box-shadow: 0 8px 20px rgba(31,52,74,.04); }
.paper-scope-option input { width: auto; height: auto; margin: 0; accent-color: #15915f; }
.paper-scope-option em { font-style: normal; color: #5f7083; font-weight: 760; }
.paper-scope-option span { color: #118567; background: #e7f7ef; border-radius: 999px; padding: 3px 7px; font-size: 12px; }
.paper-section-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.student-upload-form { grid-template-columns: minmax(260px, 1.2fr) 220px 260px 220px; }
.paper-draft-grid {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: 18px;
  margin-top: 18px;
  align-items: start;
}
.image-tray-panel { position: sticky; top: 84px; }
.paper-image-tray { display: grid; gap: 10px; max-height: calc(100vh - 220px); overflow: auto; padding-right: 4px; }
.paper-image-card {
  border: 1px solid #dce8f0;
  background: linear-gradient(180deg, #ffffff, #fbfdff);
  border-radius: 14px;
  padding: 8px;
  cursor: grab;
  box-shadow: 0 8px 18px rgba(31,52,74,.035);
}
.paper-image-card.selected { border-color: #15915f; box-shadow: 0 0 0 3px rgba(21,145,95,.14); }
.paper-image-card img { width: 100%; height: 120px; object-fit: contain; background: #f7fafc; border: 1px solid #edf2f7; border-radius: 8px; display: block; }
.paper-image-meta { display: flex; justify-content: space-between; gap: 8px; align-items: center; margin-top: 6px; font-size: 12px; color: #607083; }
.paper-image-meta b { color: #1b2a3b; }
.paper-section-summary { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.paper-question-wrap { max-height: calc(100vh - 220px); }
.paper-question-table { min-width: 980px; }
.paper-question-table th:nth-child(1) { width: 92px; }
.paper-question-table th:nth-child(3) { width: 150px; }
.paper-question-table th:nth-child(4) { width: 330px; }
.paper-question-table textarea { width: 100%; min-height: 70px; border: 1px solid #ccd8e2; background: #fbfdff; border-radius: 12px; padding: 9px 10px; font: inherit; resize: vertical; }
.paper-question-table select, .paper-question-table input { height: 38px; border-radius: 12px; margin-bottom: 8px; font-size: 13px; }
.paper-question-table label { margin: 0 0 6px; }
.paper-question-table details { margin-top: 8px; border: 1px solid #e1ebf2; border-radius: 14px; padding: 8px; background: #f8fafc; }
.paper-question-table summary { cursor: pointer; font-weight: 800; color: #415a77; }
.paper-order-cell input { width: 72px; display: block; }
.paper-drop-zone {
  min-height: 126px;
  border: 1px dashed #b7cad8;
  border-radius: 14px;
  background: #f8fbfd;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  justify-content: center;
  color: #607083;
  text-align: center;
  padding: 8px;
}
.paper-drop-zone small { color: #8b98a6; }
.paper-drop-zone.has-image { border-style: solid; background: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.7); }
.paper-drop-zone img { width: 100%; height: 92px; object-fit: contain; display: block; }
.paper-drop-zone .tiny { margin-top: 6px; }
.tiny-empty { padding: 16px 8px; font-size: 12px; }
@media (max-width: 1100px) {
  .paper-upload-form, .paper-draft-grid { grid-template-columns: 1fr; }
  .upload-center-selector { grid-template-columns: 1fr; }
  .image-tray-panel { position: static; }
  .paper-image-tray { grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: none; }
}
@media (max-width: 720px) {
  .paper-step-head { flex-direction: column; }
  .paper-image-tray { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .confirm-metrics { grid-template-columns: 1fr; }
}

.login-page {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 28px;
  background:
    radial-gradient(circle at 18% 12%, rgba(21,145,95,.12), transparent 32%),
    radial-gradient(circle at 80% 18%, rgba(47,111,159,.12), transparent 34%),
    linear-gradient(135deg, #f5fbfa, #f7fafc 54%, #eef7f3);
}
.login-card {
  width: min(460px, 100%);
  border: 1px solid #d8e7ef;
  border-radius: 28px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 22px 70px rgba(31,52,74,.12);
  padding: 34px;
}
.login-card h1 { margin: 12px 0 10px; font-size: 34px; color: #132338; letter-spacing: 0; }
.login-card p { margin: 0 0 22px; color: #607083; line-height: 1.7; }
.login-card form { display: grid; gap: 12px; }
.login-card label { margin: 0; color: #42566d; font-weight: 850; }
.login-card input { width: 100%; height: 52px; border-radius: 16px; }
.login-card button { margin-top: 6px; }
.login-error {
  border: 1px solid #f1b8b8;
  background: #fff4f4;
  color: #a52828;
  border-radius: 14px;
  padding: 10px 12px;
  margin-bottom: 16px;
  font-weight: 800;
}