:root {
  color-scheme: light;
  --ink: #18212f;
  --muted: #667085;
  --line: #d9dee7;
  --surface: #ffffff;
  --canvas: #f5f7fa;
  --nav: #202a36;
  --nav-soft: #2c3846;
  --blue: #2563eb;
  --blue-soft: #eaf1ff;
  --green: #18864b;
  --green-soft: #e9f7ef;
  --amber: #b86508;
  --amber-soft: #fff4dc;
  --red: #c73434;
  --red-soft: #ffeded;
  --radius: 8px;
  font-family: Inter, "PingFang SC", "Microsoft YaHei", Arial, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; background: var(--canvas); color: var(--ink); }
button, input, select, textarea { font: inherit; }
button, select, input, textarea { border-radius: 6px; }

.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0, 1fr); }
.sidebar {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--nav);
  color: #fff;
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 0 6px; }
.brand-mark {
  width: 38px; height: 38px; display: grid; place-items: center;
  background: #fff; color: var(--nav); font-weight: 800; border-radius: 7px;
}
.brand strong, .brand span { display: block; }
.brand span { color: #aeb8c5; font-size: 12px; margin-top: 2px; }
.role-panel { padding: 14px; background: var(--nav-soft); border-radius: var(--radius); }
.role-panel label { display: block; color: #cbd3dd; font-size: 12px; margin-bottom: 7px; }
.role-panel select {
  width: 100%; border: 1px solid #4b5968; background: #202a36; color: white; padding: 9px 10px;
}
.role-panel p { margin: 9px 0 0; color: #b9c3cf; font-size: 12px; line-height: 1.55; }
.role-panel strong { display: block; font-size: 14px; }
.sidebar-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.sidebar-button { width: 100%; padding: 8px; border: 1px solid #536171; background: transparent; color: #dbe2ea; cursor: pointer; }
.dialog-backdrop { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; padding: 20px; background: rgba(24,33,47,.48); }
.dialog-backdrop.hidden { display: none; }
.dialog-box { width: min(440px, 100%); background: #fff; border-radius: 8px; box-shadow: 0 20px 55px rgba(24,33,47,.22); overflow: hidden; }
.icon-button { width: 34px; height: 34px; border: 1px solid var(--line); background: #fff; color: var(--muted); cursor: pointer; font-size: 22px; line-height: 1; }
.dialog-box .form-footer { gap: 8px; }
.save-status { color: var(--green); font-size: 12px; font-weight: 700; padding: 9px 0; }
.login-screen { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 20px; background: #eef2f6; }
.login-screen.hidden { display: none; }
.login-box { width: min(430px, 100%); background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 28px; box-shadow: 0 18px 45px rgba(24,33,47,.12); display: grid; gap: 18px; }
.login-brand { color: var(--ink); padding: 0; }
.login-brand .brand-mark { background: var(--nav); color: #fff; }
.login-brand span { color: var(--muted); }
.login-box h2 { margin: 0; font-size: 22px; }
.auth-form { display: grid; gap: 15px; }
.auth-form.hidden { display: none; }
.auth-form > div > p { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.login-tabs { width: 100%; }
.login-tabs button { flex: 1; }
.login-button { min-height: 42px; }
.login-error { min-height: 20px; margin: 0; color: var(--red); font-size: 12px; }
.login-lan-hint { padding: 10px 12px; border-radius: 8px; background: #f4f8ff; border: 1px solid #d7e5ff; color: #174ea6; font-size: 13px; }
.login-lan-hint a, .lan-badge a { color: inherit; font-weight: 700; text-decoration: none; }
.lan-entry-row, .lan-badge { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.shortcut-button { border: 1px solid #a9c5f7; border-radius: 6px; background: #fff; color: #174ea6; padding: 5px 9px; font: inherit; font-weight: 700; cursor: pointer; }
.shortcut-button:hover { background: #eaf2ff; border-color: #6f9ce8; }
.hidden { display: none !important; }
.navigation { display: grid; gap: 5px; }
.nav-button {
  width: 100%; padding: 10px 12px; border: 0; background: transparent;
  color: #c6d0db; text-align: left; cursor: pointer;
}
.nav-button:hover, .nav-button.active { background: #364454; color: #fff; }
.principle { margin-top: auto; border-top: 1px solid #3a4653; padding: 16px 6px 0; }
.principle span { font-size: 11px; color: #93a1b0; }
.principle p { font-size: 12px; line-height: 1.6; color: #c7d0db; margin-bottom: 0; }

.main { min-width: 0; }
.topbar {
  min-height: 92px; padding: 20px 28px; background: #fff; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.eyebrow { margin: 0 0 4px; color: var(--blue); font-size: 12px; font-weight: 700; }
h1 { margin: 0; font-size: 24px; letter-spacing: 0; }
.top-actions { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; }
.top-actions.admin-top-actions label { display: none; }
.top-actions label { display: grid; gap: 5px; color: var(--muted); font-size: 11px; }
.top-actions select { min-width: 126px; padding: 8px 10px; border: 1px solid var(--line); background: #fff; }
.day-select-hint { max-width: 150px; color: var(--muted); font-size: 11px; line-height: 1.35; }
.beijing-clock {
  display: flex;
  align-items: center;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid #bfd1f5;
  border-radius: 10px;
  background: var(--blue-soft);
  color: #274b83;
  font-size: 12px;
  font-weight: 700;
}
.quiet-button { padding: 9px 12px; background: #fff; border: 1px solid var(--line); cursor: pointer; color: var(--ink); }
.quiet-button:hover { background: #f8fafc; }
.notice {
  position: fixed; right: 24px; top: 104px; z-index: 20; padding: 10px 14px;
  background: var(--ink); color: #fff; border-radius: 6px; opacity: 0; transform: translateY(-8px);
  pointer-events: none; transition: .2s ease;
}
.notice.show { opacity: 1; transform: translateY(0); }
.content { padding: 24px 28px 48px; max-width: 1500px; margin: 0 auto; }

.summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.metric {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px; min-height: 102px;
}
.metric-label { color: var(--muted); font-size: 12px; }
.metric-value { margin-top: 12px; font-size: 25px; font-weight: 750; }
.metric-note { color: var(--muted); font-size: 12px; margin-top: 6px; }

.panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: 16px; overflow: hidden;
}
.panel-header {
  min-height: 54px; padding: 13px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.panel-header h2 { margin: 0; font-size: 16px; }
.panel-header p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.lan-badge { margin: 8px 0 0; color: #174ea6; font-size: 13px; }
.lan-sub { color: var(--muted); font-size: 12px; }
.panel-body { padding: 16px; }
.panel-actions { display: flex; align-items: center; gap: 8px; }
.segmented { display: inline-flex; padding: 3px; border: 1px solid var(--line); border-radius: 7px; background: #f5f7fa; }
.segmented button { border: 0; background: transparent; color: var(--muted); padding: 6px 10px; cursor: pointer; }
.segmented button.active { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(16,24,40,.08); }
.primary-button {
  background: var(--blue); color: white; border: 1px solid var(--blue); padding: 9px 14px; cursor: pointer;
}
.primary-button:hover { background: #1d4ed8; }
.score-guide {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-bottom: 14px; padding: 12px 14px; border: 1px solid #bfd1f5;
  border-radius: 7px; background: var(--blue-soft); color: #274b83; font-size: 12px;
}
.score-guide strong { color: #183b73; }
.danger-button { background: #fff; color: var(--red); border: 1px solid #efb7b7; padding: 8px 12px; cursor: pointer; }

.daily-task-panel { border-color: #bfd1f5; box-shadow: 0 14px 30px rgba(37,99,235,.07); }
.daily-task-panel .panel-header { background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%); }
.daily-task-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.daily-task-card { position: relative; display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: start; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.daily-task-card.done { border-color: #b9e4ca; background: linear-gradient(180deg, #ffffff 0%, #f4fbf7 100%); }
.daily-task-card .task-number { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.daily-task-card.done .task-number { background: var(--green-soft); color: var(--green); }
.daily-task-card h3 { margin: 0; font-size: 15px; }
.daily-task-card p { margin: 7px 0; color: #344054; font-size: 13px; line-height: 1.55; }
.daily-task-card span { color: var(--muted); font-size: 12px; }
.daily-task-card strong { white-space: nowrap; color: var(--amber); font-size: 12px; }
.daily-task-card.done strong { color: var(--green); }
.quiz-panel { border-color: #d8c7ff; }
.quiz-panel .panel-header { background: linear-gradient(135deg, #fff 0%, #f7f2ff 100%); }
.quiz-section { display: grid; gap: 12px; margin-bottom: 18px; }
.quiz-section:last-child { margin-bottom: 0; }
.quiz-section h3 { margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--line); font-size: 16px; }
.quiz-section-note { margin: -2px 0 2px; padding: 9px 11px; border: 1px solid #bfd1f5; border-radius: 8px; background: #f4f8ff; color: #274b83; font-size: 12px; font-weight: 700; }
.quiz-question textarea { min-height: 96px; }
.quiz-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quiz-option {
  position: relative;
  display: grid;
  grid-template-columns: 28px 1fr;
  align-items: center;
  gap: 10px;
  min-height: 46px;
  padding: 11px 12px;
  border: 1px solid #d7deea;
  border-radius: 12px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcff 100%);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  cursor: pointer;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease, transform .15s ease;
}
.quiz-option:hover { border-color: #9db8ee; box-shadow: 0 8px 20px rgba(37,99,235,.08); transform: translateY(-1px); }
.quiz-option.selected, .quiz-option:has(input:checked) { border-color: #76a0f4; background: linear-gradient(180deg, #ffffff 0%, #eef5ff 100%); box-shadow: 0 10px 24px rgba(37,99,235,.11); }
.quiz-option input { position: absolute; opacity: 0; pointer-events: none; }
.quiz-option-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #eef2f7;
  color: #475467;
  font-weight: 800;
  font-size: 12px;
}
.quiz-option.selected .quiz-option-mark, .quiz-option:has(input:checked) .quiz-option-mark { background: var(--blue); color: #fff; }
.quiz-live-progress { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(180px, .7fr); gap: 18px; align-items: center; margin: 14px 0 20px; padding: 14px 16px; border: 1px solid #c9d8f3; border-radius: 12px; background: #f7faff; }
.quiz-live-progress strong, .quiz-live-progress span { display: block; }
.quiz-live-progress span { margin-top: 4px; color: var(--muted); font-size: 12px; }
.quiz-start-gate { max-width: 680px; margin: 28px auto; padding: 38px; text-align: center; border: 1px solid #cbd9ef; border-radius: 22px; background: linear-gradient(145deg, #f4f8ff, #fff); box-shadow: 0 18px 48px rgba(28, 65, 118, .1); }
.quiz-start-gate h3 { margin: 10px 0 8px; font-size: 28px; }
.quiz-start-gate p { color: var(--muted); line-height: 1.7; }
.quiz-start-rules { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; margin: 20px 0 24px; }
.quiz-start-rules span { padding: 7px 11px; border-radius: 999px; color: #31527d; background: #e8f0fc; font-size: 12px; font-weight: 700; }
.quiz-flow-bar { position: sticky; top: 10px; z-index: 8; display: flex; justify-content: space-between; align-items: center; gap: 20px; margin: 10px 0 18px; padding: 13px 16px; border: 1px solid #c6d6ed; border-radius: 14px; background: rgba(248, 251, 255, .96); box-shadow: 0 9px 24px rgba(35, 68, 112, .09); backdrop-filter: blur(10px); }
.quiz-flow-bar strong, .quiz-flow-bar span { display: block; }
.quiz-flow-bar span, .quiz-countdown span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.quiz-countdown { text-align: right; }
.quiz-flow-actions { display: flex; align-items: center; gap: 14px; }
.quiz-countdown strong { color: #174ea6; font-size: 23px; font-variant-numeric: tabular-nums; }
.quiz-countdown strong.urgent { color: #c83232; }
.quiz-navigator { margin: 0 0 18px; padding: 14px 16px; border: 1px solid #d8e1ee; border-radius: 14px; background: #fff; }
.quiz-navigator-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.quiz-navigator-head strong, .quiz-navigator-head span { display: block; }
.quiz-navigator-head span { margin-top: 3px; color: var(--muted); font-size: 12px; }
.quiz-number-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(38px, 1fr)); gap: 7px; }
.quiz-number { min-height: 38px; border: 1px solid #d6deea; border-radius: 9px; color: #56657a; background: #f7f9fc; font-weight: 800; cursor: pointer; }
.quiz-number.answered { border-color: #a9d4bd; color: #17633b; background: #eaf7ef; }
.quiz-number.unanswered { border-color: #efc58e; color: #9a5500; background: #fff6e7; }
.quiz-number.current { border-color: #1f63b5; color: #fff; background: #1f63b5; box-shadow: 0 5px 14px rgba(31, 99, 181, .22); }
.training-entry-gate { max-width: 720px; margin: 7vh auto 0; padding: 52px 44px; text-align: center; border: 1px solid #c7d8ea; border-radius: 28px; background: radial-gradient(circle at 50% 0, #eaf6ff 0, #fff 52%); box-shadow: 0 24px 70px rgba(31, 72, 118, .14); }
.training-entry-icon { display: grid; place-items: center; width: 72px; height: 72px; margin: 0 auto 18px; border-radius: 22px; color: #fff; background: linear-gradient(145deg, #145a92, #1d7b68); font-size: 30px; font-weight: 900; box-shadow: 0 12px 28px rgba(20, 90, 146, .24); }
.training-entry-gate h2 { margin: 10px 0; font-size: clamp(27px, 4vw, 40px); }
.training-entry-gate > p { max-width: 570px; margin: 0 auto; color: var(--muted); line-height: 1.75; }
.training-entry-target { display: grid; gap: 4px; max-width: 390px; margin: 26px auto; padding: 18px 22px; border: 1px solid #d7e2ec; border-radius: 16px; background: #f8fbfd; }
.training-entry-target span, .training-entry-target small { color: var(--muted); }
.training-entry-target strong { color: #174f76; font-size: 25px; }
.training-entry-backfill { display: grid; gap: 4px; max-width: 500px; margin: -12px auto 24px; padding: 12px 16px; border: 1px solid #f0cd98; border-radius: 12px; color: #8b5208; background: #fff8ea; text-align: left; }
.training-entry-backfill span { color: #7f6a4e; font-size: 12px; line-height: 1.55; }
.training-entry-button { min-width: 220px; min-height: 50px; font-size: 16px; }
.training-entry-gate.rest-day { background: radial-gradient(circle at 50% 0, #fff5da 0, #fff 55%); }
.training-entry-gate.rest-day .training-entry-icon { background: linear-gradient(145deg, #bf7a16, #d6a531); }
.settings-section { border-bottom: 1px solid #e2e8ef; background: #f8fbfd; }
.quiz-review-score { max-width: 680px; margin: 22px auto 0; padding: 22px 24px; text-align: center; border: 1px solid #aad9bd; border-radius: 18px; background: linear-gradient(145deg, #effbf4, #fff); }
.quiz-review-score > span, .quiz-review-score > strong { display: block; }
.quiz-review-score > span { color: #397052; font-size: 13px; font-weight: 700; }
.quiz-review-score > strong { margin: 5px 0; color: #12633a; font-size: 38px; }
.quiz-review-score p { margin: 5px 0; color: #385848; line-height: 1.6; }
.quiz-review-score small { color: var(--muted); }
.live-training-shell { display: grid; gap: 18px; }
.live-session-hero { overflow: hidden; border-color: #b9d2df; background: linear-gradient(120deg, #eef8f7 0%, #fff 58%, #f4ead9 100%); }
.live-session-hero .panel-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.live-session-hero h2 { margin: 6px 0; font-size: 27px; }
.live-session-hero p { margin: 0; color: var(--muted); }
.live-session-status { min-width: 150px; padding: 16px 20px; text-align: center; border: 1px solid #bcd8d2; border-radius: 16px; background: rgba(255,255,255,.82); }
.live-session-status span, .live-session-status small { display: block; color: var(--muted); font-size: 12px; }
.live-session-status strong { display: block; margin: 4px 0; color: #176957; font-size: 28px; }
.live-training-grid { display: grid; grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; align-items: start; }
.live-stage-track { display: flex; gap: 9px; margin-bottom: 18px; padding: 2px 2px 8px; overflow-x: auto; scroll-snap-type: x proximity; }
.live-stage { display: grid; flex: 0 0 158px; grid-template-columns: 30px 1fr; gap: 2px 9px; align-items: center; padding: 11px; border: 1px solid var(--line); border-radius: 12px; background: #fafbfc; scroll-snap-align: center; }
.live-stage > span { grid-row: 1 / 3; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #e7edf2; font-weight: 800; }
.live-stage strong { font-size: 12px; }
.live-stage small { color: var(--muted); font-size: 11px; }
.live-stage.active { border-color: #4b9c89; background: #eff9f6; }
.live-stage.active > span, .live-stage.done > span { color: #fff; background: #26816c; }
.live-stage.locked { opacity: .55; }
.live-control-main { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 14px; }
.live-video-placeholder { min-height: 220px; display: flex; flex-direction: column; justify-content: flex-end; padding: 24px; color: #fff; border-radius: 18px; background: radial-gradient(circle at 75% 20%, rgba(217,165,94,.45), transparent 30%), linear-gradient(145deg, #173932, #285d52 58%, #1e433c); }
.live-video-placeholder > span { color: #b9d9d0; font-size: 12px; font-weight: 800; }
.live-video-placeholder strong { margin: 8px 0; font-size: 24px; }
.live-video-placeholder p { margin: 0 0 18px; color: #d6e7e2; }
.video-progress { height: 6px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.2); }
.video-progress i { display: block; height: 100%; border-radius: inherit; background: #e6b96f; }
.live-join-card { display: grid; place-items: center; align-content: center; gap: 12px; padding: 18px; text-align: center; border: 1px solid #d7dee5; border-radius: 18px; background: #fff; }
.live-join-card span, .live-join-card strong { display: block; }
.live-join-card strong { margin-top: 4px; font-size: 20px; }
.live-join-card p { margin: 5px 0 0; color: var(--muted); font-size: 12px; line-height: 1.5; }
.live-join-url { display: block; max-width: 250px; margin-top: 8px; color: #176957; font-size: 11px; line-height: 1.45; overflow-wrap: anywhere; }
.demo-qr { display: grid; grid-template-columns: repeat(9, 7px); gap: 2px; padding: 8px; border: 1px solid #d9d9d9; background: #fff; }
.demo-qr i { width: 7px; height: 7px; background: #fff; }
.demo-qr i.dark { background: #162621; }
.live-qr-image { width: 150px; height: 150px; object-fit: contain; border: 1px solid #d9d9d9; background: #fff; }
.live-control-actions { display: flex; gap: 9px; flex-wrap: wrap; margin: 16px 0; }
.live-progress-summary { display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: center; padding: 12px 15px; border-radius: 12px; background: #f5f8fa; }
.live-progress-summary strong, .live-progress-summary span { display: block; }
.live-progress-summary strong { color: #176957; font-size: 23px; }
.live-progress-summary span { color: var(--muted); font-size: 11px; }
.live-attendee-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 9px; margin-top: 14px; }
.live-attendee { display: grid; grid-template-columns: 34px 1fr auto; gap: 9px; align-items: center; padding: 10px; border: 1px solid #e1e6eb; border-radius: 12px; }
.live-attendee > span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: #466158; background: #e8f1ee; font-weight: 800; }
.live-attendee strong, .live-attendee small { display: block; }
.live-attendee small { color: var(--muted); font-size: 10px; }
.live-attendee em { color: #a26a1f; font-size: 11px; font-style: normal; }
.live-attendee.done { border-color: #b7dcca; background: #f2fbf7; }
.live-attendee.done em { color: #167052; }
.live-question-guide { margin-top: 20px; overflow: hidden; }
.live-question-guide > summary { display: flex; justify-content: space-between; gap: 24px; align-items: center; padding: 20px 22px; cursor: pointer; list-style: none; background: linear-gradient(135deg, #f4f9f7, #fff8ed); }
.live-question-guide > summary::-webkit-details-marker { display: none; }
.live-question-guide > summary h2 { margin: 4px 0 5px; }
.live-question-guide > summary p { max-width: 820px; margin: 0; color: var(--muted); }
.live-question-guide > summary > strong { flex: 0 0 auto; color: #176957; font-size: 12px; }
.live-guide-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; border-top: 1px solid var(--line); }
.live-guide-card { padding: 16px; border: 1px solid #e0e6e3; border-radius: 15px; background: #fff; }
.live-guide-card.current { border-color: #62a994; box-shadow: 0 0 0 3px rgba(38,129,108,.08); }
.live-guide-card header { display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; gap: 10px; align-items: center; }
.live-guide-card header > span { display: grid; place-items: center; width: 34px; height: 34px; color: #fff; border-radius: 50%; background: #244f45; font-weight: 800; }
.live-guide-card header small, .live-guide-card header strong { display: block; }
.live-guide-card header small { color: #29806b; font-size: 10px; font-weight: 800; }
.live-guide-card header strong { margin-top: 2px; }
.live-guide-card header em { color: var(--muted); font-size: 10px; font-style: normal; }
.live-guide-card > p { min-height: 44px; margin: 14px 0 10px; font-weight: 750; line-height: 1.55; }
.live-guide-options { display: grid; gap: 7px; }
.live-guide-options > div { display: grid; grid-template-columns: 25px 1fr auto; gap: 8px; align-items: center; padding: 8px 10px; color: #59635f; border-radius: 9px; background: #f6f7f7; font-size: 12px; }
.live-guide-options b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 7px; background: #e3e8e6; }
.live-guide-options .correct { color: #176957; background: #eaf7f1; box-shadow: inset 0 0 0 1px #b8ddce; }
.live-guide-options .correct b { color: #fff; background: #26816c; }
.live-guide-options i { color: #176957; font-size: 10px; font-style: normal; font-weight: 800; }
.phone-preview { position: sticky; top: 16px; }
.phone-frame { padding: 10px; border: 7px solid #202522; border-radius: 34px; background: #202522; box-shadow: 0 24px 55px rgba(19,36,30,.22); }
.phone-top { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; padding: 5px 10px 11px; color: #dce6e1; font-size: 10px; }
.phone-top strong { text-align: center; font-size: 11px; }
.phone-top i { justify-self: end; width: 18px; height: 7px; border: 1px solid #dce6e1; border-radius: 2px; }
.phone-screen { min-height: 530px; padding: 20px 16px; border-radius: 23px; background: linear-gradient(180deg, #f1f7f4, #fff 40%); }
.phone-screen h3 { margin: 7px 0 22px; font-size: 19px; }
.phone-question { display: grid; gap: 10px; }
.phone-question > span { color: #29806b; font-size: 11px; font-weight: 800; }
.phone-question > strong { margin-bottom: 5px; line-height: 1.55; }
.phone-question > div { display: flex; gap: 10px; align-items: center; padding: 11px; border: 1px solid #dce4e0; border-radius: 10px; font-size: 12px; background: #fff; }
.phone-question b { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; color: #276856; background: #e4f2ed; }
.phone-question button { margin-top: 8px; padding: 12px; color: #fff; border: 0; border-radius: 10px; background: #277a66; font-weight: 800; }
.phone-wait { display: grid; place-items: center; padding: 55px 15px; text-align: center; }
.phone-wait > span { display: grid; place-items: center; width: 60px; height: 60px; margin-bottom: 18px; border-radius: 50%; color: #277a66; background: #dff0ea; font-size: 26px; }
.phone-wait p { color: var(--muted); font-size: 12px; line-height: 1.65; }
.phone-caption { color: var(--muted); text-align: center; font-size: 11px; }
.classroom-join-panel, .classroom-wait-panel, .classroom-result-panel { max-width: 660px; margin: 20px auto; text-align: center; }
.classroom-join-panel h2, .classroom-wait-panel h2, .classroom-result-panel h2 { margin: 9px 0; }
.classroom-join-panel p, .classroom-wait-panel p, .classroom-result-panel p { color: var(--muted); line-height: 1.7; }
.classroom-code-form { display: flex; gap: 10px; max-width: 390px; margin: 24px auto 0; }
.classroom-code-form input { flex: 1; min-width: 0; padding: 15px; text-align: center; border: 1px solid #b9ccc5; border-radius: 12px; font-size: 24px; font-weight: 800; letter-spacing: 8px; }
.classroom-pulse, .classroom-result-icon { display: grid; place-items: center; width: 70px; height: 70px; margin: 5px auto 18px; border-radius: 50%; color: #176957; background: #dff1eb; font-size: 30px; font-weight: 900; }
.classroom-question { display: grid; gap: 16px; max-width: 720px; margin: 0 auto; }
.classroom-question > strong { font-size: 20px; line-height: 1.65; }
.classroom-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.classroom-options label { display: flex; align-items: center; gap: 11px; padding: 15px; border: 1px solid #d9e3df; border-radius: 13px; background: #fff; cursor: pointer; }
.classroom-options label:has(input:checked) { border-color: #31836f; background: #eef8f5; box-shadow: inset 0 0 0 1px #31836f; }
.classroom-options input { position: absolute; opacity: 0; }
.classroom-options b { display: grid; place-items: center; flex: 0 0 30px; width: 30px; height: 30px; border-radius: 50%; color: #216b58; background: #e2f0eb; }
.quiz-question.locked { border-color: #ccd6e5; background: #fbfcfe; }
.quiz-question.locked .quiz-option { cursor: default; transform: none; box-shadow: none; }
.quiz-confirm-row, .case-check-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.quiz-confirm-row span, .case-check-row span { color: var(--muted); font-size: 12px; }
.quiz-live-result { display: flex; align-items: center; gap: 10px; margin-top: 12px; padding: 11px 13px; border-radius: 10px; }
.quiz-live-result.correct { color: #146b3a; border: 1px solid #a8dabd; background: #eefaf3; }
.quiz-live-result.wrong { color: #9d2626; border: 1px solid #efb7b7; background: #fff1f1; }
.quiz-live-result span { font-size: 12px; }
.quiz-locked-answer { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 12px; padding: 11px 13px; border: 1px solid #bfd0ee; border-radius: 10px; background: #f4f8ff; color: #174ea6; }
.quiz-locked-answer span { color: #5d6b82; font-size: 12px; }
.trainer-case-check { grid-column: 1 / -1; display: flex; justify-content: space-between; gap: 12px; padding: 9px 11px; border-radius: 8px; background: #f3f7fc; color: #475467; font-size: 12px; }
.trainer-alert-center { overflow: hidden; border-color: #d9e1ec; background: #fff; }
.trainer-alert-center.calm { border-color: #bcdcc8; background: #f7fcf9; }
.trainer-alert-head { background: linear-gradient(100deg, #fff8f5 0%, #fff 58%); }
.trainer-alert-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.trainer-alert-overview > div { display: flex; align-items: baseline; gap: 5px; padding: 11px 13px; border: 1px solid #e5eaf0; border-radius: 10px; background: #f8fafc; }
.trainer-alert-overview span { margin-right: auto; color: #596579; font-size: 12px; font-weight: 700; }
.trainer-alert-overview strong { font-size: 22px; line-height: 1; }
.trainer-alert-overview small { color: var(--muted); }
.trainer-alert-groups { display: grid; gap: 8px; }
.trainer-alert-group { display: grid; grid-template-columns: minmax(170px, .65fr) minmax(260px, 1.4fr) auto; gap: 14px; align-items: center; min-height: 66px; padding: 10px 12px; border: 1px solid #e5eaf0; border-left: 3px solid #f79009; border-radius: 10px; background: #fff; }
.trainer-alert-group.high { border-left-color: #d92d20; }
.trainer-alert-group:hover { background: #fbfcfe; }
.trainer-alert-person { display: flex; align-items: center; gap: 10px; min-width: 0; }
.trainer-alert-person > span { display: grid; place-items: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 10px; background: #eef3fa; color: #31517e; font-weight: 800; }
.trainer-alert-person strong, .trainer-alert-person small { display: block; }
.trainer-alert-person small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.trainer-alert-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.trainer-alert-tags span { padding: 5px 8px; border-radius: 999px; background: #fff6e6; color: #895608; font-size: 11px; font-weight: 700; white-space: nowrap; }
.trainer-alert-tags span.high { background: #fff0ed; color: #b42318; }
.trainer-alert-action { min-width: 88px; white-space: nowrap; }

.two-column { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(300px, .8fr); gap: 16px; }
.three-column { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.field { display: grid; gap: 6px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: 12px; color: #475467; font-weight: 650; }
.field input, .field select, .field textarea {
  width: 100%; border: 1px solid var(--line); background: #fff; padding: 10px 11px; color: var(--ink);
}
.field textarea { min-height: 86px; resize: vertical; line-height: 1.55; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid #c6d9ff; border-color: var(--blue); }
.form-footer { display: flex; justify-content: flex-end; margin-top: 16px; }

.timeline { display: grid; grid-template-columns: repeat(7, 1fr); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.timeline-day { text-align: center; padding: 12px 6px; border-right: 1px solid var(--line); background: #fff; border-top: 0; border-left: 0; border-bottom: 0; cursor: pointer; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.timeline-day:last-child { border-right: 0; }
.timeline-day strong { display: block; font-size: 12px; }
.timeline-day span { display: block; margin-top: 8px; font-size: 18px; color: #9aa4b2; }
.timeline-day:hover { background: #f8fbff; }
.timeline-day.done { background: var(--green-soft); }
.timeline-day.done span { color: var(--green); }
.timeline-day.current { box-shadow: inset 0 -3px var(--blue); }
.timeline-day:focus-visible { outline: 2px solid #2563eb; outline-offset: -2px; position: relative; z-index: 1; }
.trainer-day-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.trainer-day-card { border: 1px solid #dbe4f0; border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); padding: 16px; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.trainer-day-card h3 { margin: 0 0 12px; font-size: 16px; line-height: 1.4; }
.trainer-day-card-wide { grid-column: 1 / -1; }
.workspace-section { display: grid; gap: 16px; }
.trainer-quiz-header { align-items: center; gap: 14px; }
.trainer-quiz-set-tabs { flex-shrink: 0; }
.trainer-quiz-review { display: grid; gap: 16px; }
.trainer-quiz-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.trainer-quiz-stats > div { padding: 14px 16px; border: 1px solid #dbe4f0; border-radius: 12px; background: linear-gradient(145deg, #f8fbff, #fff); }
.trainer-quiz-stats span { display: block; color: var(--muted); font-size: 12px; margin-bottom: 5px; }
.trainer-quiz-stats strong { font-size: 22px; color: var(--ink); }
.trainer-quiz-toolbar { width: fit-content; }
.trainer-quiz-section { border: 1px solid #dbe4f0; border-radius: 14px; overflow: hidden; background: #fff; }
.trainer-quiz-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; background: #f5f8fc; border-bottom: 1px solid #e5ebf3; }
.trainer-quiz-section-head h3 { margin: 0; font-size: 15px; }
.trainer-quiz-section-head span { color: var(--muted); font-size: 12px; }
.trainer-quiz-rows { display: grid; }
.trainer-quiz-row { display: grid; grid-template-columns: minmax(220px, 1.4fr) minmax(180px, 1fr) 72px; gap: 14px; align-items: start; padding: 13px 14px; border-bottom: 1px solid #edf1f6; }
.trainer-quiz-row:last-child { border-bottom: 0; }
.trainer-quiz-row.wrong { background: #fffaf5; }
.trainer-quiz-row.correct { background: #fbfefc; }
.trainer-quiz-question { display: flex; gap: 9px; line-height: 1.55; }
.trainer-quiz-question > span { display: grid; place-items: center; flex: 0 0 23px; width: 23px; height: 23px; border-radius: 50%; background: #e9eff7; color: #506178; font-size: 12px; }
.trainer-quiz-question strong { font-size: 14px; }
.trainer-quiz-answer small { color: var(--muted); }
.trainer-quiz-answer p { margin: 4px 0 0; line-height: 1.55; white-space: pre-wrap; }
.trainer-quiz-result { justify-self: end; padding: 4px 8px; border-radius: 999px; font-size: 12px; white-space: nowrap; }
.trainer-quiz-result.correct { color: #087a52; background: #e9f9f2; }
.trainer-quiz-result.wrong { color: #b54708; background: #fff0df; }
.trainer-quiz-result.neutral { color: #53657b; background: #eef2f7; }
.trainer-quiz-correction { grid-column: 2 / -1; color: #087a52; font-size: 13px; padding-top: 2px; }
.trainer-quiz-history { display: grid; gap: 10px; }
.trainer-quiz-history-item { display: grid; grid-template-columns: 1fr auto; gap: 4px 14px; padding: 13px 15px; border: 1px solid #dbe4f0; border-radius: 12px; }
.trainer-quiz-history-item span { color: var(--muted); font-size: 12px; }
.trainer-quiz-history-item p { grid-column: 1 / -1; margin: 3px 0 0; color: var(--muted); }
.mentor-inspection-box { padding: 16px; border: 1px solid #f3c98b; border-radius: 14px; background: #fffaf1; }
.mentor-inspection-box.completed { border-color: #a9dfc6; background: #f3fcf7; }
.mentor-inspection-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.mentor-inspection-head span { color: #a15c07; font-size: 12px; font-weight: 700; }
.mentor-inspection-head h3 { margin: 4px 0; }
.mentor-inspection-head p { margin: 0; color: var(--muted); }
.mentor-alert-panel { border-color: #f4b4aa; background: #fff8f7; }
.mentor-alert-list { display: grid; gap: 8px; }
.mentor-alert-item { display: grid; grid-template-columns: minmax(220px, 1fr) minmax(160px, .7fr) auto; gap: 12px; align-items: center; padding: 11px 13px; border: 1px solid #f2c8c1; border-radius: 10px; background: #fff; }
.mentor-alert-item span { color: var(--muted); }
.mentor-alert-item b { color: #b42318; }
.inspection-schedule { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.inspection-schedule-card { display: grid; gap: 12px; padding: 15px; border: 1px solid #dbe4f0; border-radius: 14px; background: #fff; }
.inspection-schedule-card.done { border-color: #a9dfc6; background: #f7fcf9; }
.inspection-schedule-card.overdue { border-color: #f4b4aa; background: #fff8f7; }
.inspection-schedule-card span { color: var(--muted); font-size: 12px; }
.inspection-schedule-card h3 { margin: 5px 0; }
.inspection-schedule-card p { margin: 0; color: var(--muted); line-height: 1.55; }
.inspection-schedule-result { justify-self: start; }
.inspection-schedule-detail { padding-top: 10px; border-top: 1px solid #e5ebf3; }
.inspection-schedule-detail p { margin: 5px 0; color: var(--ink); }
.quiz-week-overview { display: grid; grid-template-columns: repeat(7, minmax(110px, 1fr)); gap: 8px; }
.quiz-week-day { display: grid; gap: 5px; min-height: 72px; padding: 10px; text-align: left; border: 1px solid #dbe4f0; border-radius: 11px; background: #fff; color: var(--ink); cursor: pointer; }
.quiz-week-day span { color: var(--muted); font-size: 12px; }
.quiz-week-day strong { font-size: 13px; line-height: 1.4; }
.quiz-week-day.active { border-color: #2d6cdf; background: #f0f6ff; box-shadow: inset 0 0 0 1px #2d6cdf; }
.course-shell { display: grid; gap: 16px; }
.course-hero .panel-body { display: flex; align-items: center; justify-content: space-between; gap: 24px; background: linear-gradient(120deg, #fff 0%, #f4f8ff 55%, #fff5ee 100%); }
.course-hero h2 { margin: 5px 0; font-size: 28px; }
.course-hero p { margin: 0; color: var(--muted); }
.course-progress-block { min-width: 190px; text-align: right; }
.course-progress-block strong { display: block; font-size: 30px; }
.course-progress-block span { color: var(--muted); font-size: 12px; }
.course-progress-track { height: 7px; margin-top: 9px; overflow: hidden; border-radius: 999px; background: #dfe7f2; }
.course-progress-track i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #e34f32, #f29c38); }
.course-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 16px; align-items: start; }
.course-sidebar { position: sticky; top: 14px; max-height: calc(100vh - 28px); overflow: auto; }
.course-chapter + .course-chapter { margin-top: 18px; padding-top: 18px; border-top: 1px solid #e5ebf3; }
.course-chapter-head { display: flex; justify-content: space-between; gap: 10px; }
.course-chapter-head div { display: grid; gap: 3px; }
.course-chapter-head span { color: #d54c32; font-size: 11px; font-weight: 700; }
.course-chapter-head strong { font-size: 14px; }
.course-chapter-head em { color: var(--muted); font-size: 12px; font-style: normal; }
.course-chapter > p { margin: 6px 0 10px; color: var(--muted); font-size: 12px; line-height: 1.5; }
.course-slide-list { display: grid; gap: 5px; }
.course-slide-link { display: flex; align-items: center; gap: 8px; width: 100%; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: #415168; text-align: left; cursor: pointer; }
.course-slide-link span { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: #edf1f6; color: #65758a; }
.course-slide-link:hover { background: #f5f7fa; }
.course-slide-link.active { background: #fff0eb; color: #9f301d; font-weight: 700; }
.course-slide-link.done span { background: #e4f7ee; color: #087a52; }
.course-slide-frame { overflow: hidden; border: 1px solid #d9e1ec; border-radius: 14px; background: #eef2f7; box-shadow: 0 18px 38px rgba(15,23,42,.12); }
.course-slide-frame img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: contain; background: #fff; }
.course-slide-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 10px; color: var(--muted); font-size: 12px; }
.course-slide-tools .quiet-button { text-decoration: none; }
.course-content-copy { margin-top: 14px; padding: 18px 20px; border: 1px solid #d6e0ec; border-radius: 14px; background: #fbfdff; }
.course-content-copy-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-bottom: 11px; border-bottom: 1px solid #e3eaf3; }
.course-content-copy-head span { font-size: 17px; font-weight: 800; color: var(--ink); }
.course-content-copy-head strong { color: var(--muted); font-size: 12px; }
.course-content-copy ol { display: grid; gap: 9px; margin: 14px 0 0; padding-left: 24px; }
.course-content-copy li { padding-left: 5px; color: #2f4055; line-height: 1.7; }
.course-content-primary { margin-top: 0; padding: 24px 26px; background: linear-gradient(145deg, #ffffff, #f6faff); }
.course-content-primary li { font-size: 16px; line-height: 1.85; }
.course-original-reference { margin-top: 14px; border: 1px dashed #cbd6e4; border-radius: 12px; background: #f8fafc; }
.course-original-reference summary { padding: 12px 14px; color: var(--muted); cursor: pointer; }
.course-original-reference .course-slide-frame { margin: 0 14px 12px; box-shadow: none; }
.course-original-reference > .quiet-button { display: inline-block; margin: 0 14px 14px; text-decoration: none; }
.course-unit-summary { display: grid; gap: 14px; margin-top: 16px; }
.course-unit-title { padding: 22px 24px; border-radius: 15px; background: linear-gradient(135deg, #fff5f0, #fff 70%); border: 1px solid #f0c8ba; }
.course-unit-title span { color: #bd442b; font-size: 12px; font-weight: 800; }
.course-unit-title h3 { margin: 6px 0 8px; font-size: 22px; }
.course-unit-title p { margin: 0; color: #3e4d60; font-size: 15px; line-height: 1.8; }
.course-unit-rules { padding: 18px 20px; border: 1px solid #dbe4f0; border-radius: 14px; background: #fbfdff; }
.course-unit-rules > strong { font-size: 16px; }
.course-unit-rules ul { display: grid; gap: 8px; margin: 12px 0 0; padding-left: 22px; }
.course-unit-rules li { line-height: 1.7; color: #34465c; }
.course-unit-application { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.course-unit-application > div { padding: 17px 19px; border: 1px solid #dbe4f0; border-radius: 13px; }
.course-unit-application > div:last-child { border-color: #f0c1b8; background: #fff8f6; }
.course-unit-application span { color: var(--muted); font-size: 12px; font-weight: 800; }
.course-unit-application p { margin: 7px 0 0; line-height: 1.7; }
.course-reading-notes { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
.course-reading-notes > div { padding: 14px 16px; border: 1px solid #dbe4f0; border-radius: 12px; }
.course-reading-notes span { color: var(--muted); font-size: 12px; font-weight: 700; }
.course-reading-notes p { margin: 6px 0 0; line-height: 1.65; }
.course-reading-notes .course-key-point { border-color: #f2c8b9; background: #fff7f3; }
.course-reader-actions { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; margin-top: 16px; }
.course-reader-actions .primary-button { justify-self: center; min-width: 170px; }
.trainer-followup-panel { border-color: #bfd1f5; box-shadow: 0 12px 26px rgba(37,99,235,.06); }
.trainer-followup-panel .panel-header { background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%); }
.trainer-followup-form { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.trainer-followup-form textarea { min-height: 70px; }
.trainer-followup-form select { min-height: 70px; font-weight: 750; color: var(--blue); }
.mentor-review-panel { border-color: #b9e4ca; }
.mentor-review-panel .panel-header { background: linear-gradient(135deg, #ffffff 0%, #f3fbf6 100%); }
.mentor-review-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
.mentor-review-grid .detail-card { min-height: 118px; }
.mentor-observation-panel { border-color: #bfd1f5; box-shadow: 0 12px 26px rgba(37,99,235,.06); }
.mentor-observation-panel .panel-header { background: linear-gradient(135deg, #f8fbff 0%, #eef5ff 100%); }
.mentor-observation-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mentor-observation-form textarea { min-height: 92px; }
.mentor-observation-form select { min-height: 92px; font-weight: 750; color: var(--blue); }

.ability-list { display: grid; gap: 13px; }
.ability-row { display: grid; grid-template-columns: 120px 1fr 84px; gap: 14px; align-items: center; }
.ability-name { font-size: 13px; font-weight: 650; }
.ability-track { height: 8px; background: #e8ebf0; border-radius: 5px; overflow: hidden; }
.ability-fill { height: 100%; background: var(--blue); border-radius: inherit; }
.stars { color: var(--amber); white-space: nowrap; letter-spacing: 0; font-size: 14px; }
.score-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.score-control { border: 1px solid var(--line); padding: 12px; border-radius: 7px; }
.score-control label { display: block; font-size: 12px; font-weight: 650; margin-bottom: 10px; }
.star-buttons { display: flex; gap: 2px; }
.star-button { border: 0; background: transparent; padding: 0; font-size: 20px; color: #cbd1d9; cursor: pointer; }
.star-button.selected { color: var(--amber); }
.score-note { width: 100%; min-height: 66px; margin-top: 10px; padding: 8px; resize: vertical; border: 1px solid var(--line); background: #fff; font-size: 12px; line-height: 1.45; }

.risk-list { display: grid; gap: 9px; }
.risk {
  padding: 11px 12px; border-radius: 6px; font-size: 13px; line-height: 1.5;
  background: var(--amber-soft); color: #7a4808; border: 1px solid #f0d69e;
}
.risk.ok { background: var(--green-soft); color: #17633a; border-color: #b7dfc7; }
.status {
  display: inline-flex; align-items: center; min-height: 24px; padding: 3px 8px;
  border-radius: 999px; font-size: 11px; font-weight: 700;
}
.status.green { color: #146b3a; background: var(--green-soft); }
.status.amber { color: #8a5007; background: var(--amber-soft); }
.status.red { color: #9d2626; background: var(--red-soft); }
.status.blue { color: #174ea6; background: var(--blue-soft); }
.consensus-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.consensus-alert {
  margin: 12px 0;
  padding: 12px 14px;
  border-radius: 8px;
  border: 1px solid #f0d69e;
  background: #fff8ea;
  color: #7a4808;
  font-size: 13px;
}
.consensus-alert.danger {
  border-color: #efb7b7;
  background: #fff1f1;
  color: #9d2626;
}
.final-readonly { display: grid; gap: 2px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.data-table th {
  text-align: left; color: #475467; background: #f8fafc; font-weight: 700;
  padding: 10px; border-bottom: 1px solid var(--line);
}
.data-table td { padding: 11px 10px; border-bottom: 1px solid #edf0f4; vertical-align: top; }
.data-table tr:last-child td { border-bottom: 0; }
.empty { padding: 32px; text-align: center; color: var(--muted); font-size: 13px; }
.evidence { color: var(--blue); font-weight: 650; }
.history-list,
.evidence-ledger { display: grid; gap: 14px; }
.history-card,
.evidence-ledger-card {
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%);
  padding: 16px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.04);
}
.evidence-ledger-card.score {
  border-color: #c6d8fb;
  background: linear-gradient(180deg, #f8fbff 0%, #f3f8ff 100%);
}
.history-card-top,
.evidence-ledger-top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.history-head,
.evidence-ledger-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.history-day,
.ledger-kind {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  background: #eef4ff;
  color: #1d4ed8;
  font-size: 12px;
  font-weight: 700;
}
.history-date {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}
.history-grid,
.ledger-meta-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}
.history-grid strong,
.ledger-meta-grid strong {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}
.history-reason,
.history-evidence,
.ledger-fact {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #edf0f4;
}
.history-reason p,
.ledger-fact p {
  margin: 8px 0 0;
  color: #475467;
  line-height: 1.7;
  white-space: pre-wrap;
}
.history-evidence-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.history-empty {
  color: var(--muted);
  font-size: 12px;
}
.evidence-ledger-card h3 {
  margin: 0 0 8px;
  font-size: 16px;
}

.people-list { display: grid; gap: 10px; }
.account-list { display: grid; gap: 10px; }
.admin-layout { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, .78fr); gap: 16px; align-items: start; }
.admin-main, .admin-side { display: grid; gap: 16px; }
.admin-hero { border-color: #cbd9f5; background: linear-gradient(135deg, #f8fbff 0%, #ffffff 55%, #eef5ff 100%); }
.admin-dashboard { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.admin-toolbar { display: grid; grid-template-columns: minmax(220px, 1.3fr) minmax(150px, .75fr) minmax(150px, .75fr) 120px; gap: 12px; align-items: end; margin-bottom: 14px; }
.admin-search input { background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); }
.admin-toolbar-note { min-height: 44px; border: 1px solid var(--line); border-radius: 8px; background: #f8fafc; display: grid; place-items: center; padding: 8px 10px; }
.admin-toolbar-note strong { font-size: 22px; line-height: 1; }
.admin-toolbar-note span { color: var(--muted); font-size: 11px; margin-top: 4px; }
.admin-bulk-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 12px 14px; margin-bottom: 12px; border: 1px solid var(--line); border-radius: 10px; background: #f8fafc; }
.admin-bulk-summary { color: var(--muted); font-size: 12px; }
.admin-bulk-summary strong { color: var(--ink); font-size: 18px; margin: 0 4px; }
.admin-check { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); font-size: 12px; font-weight: 650; }
.admin-check input { width: 16px; height: 16px; }
.admin-list-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: var(--muted); font-size: 12px; margin-bottom: 12px; }
.admin-account-list { gap: 12px; }
.admin-account-card { border: 1px solid var(--line); border-radius: 12px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); padding: 14px; display: grid; gap: 14px; }
.admin-account-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; }
.admin-username { color: var(--muted); font-size: 12px; }
.admin-account-tags { display: flex; flex-wrap: wrap; justify-content: end; gap: 8px; }
.admin-account-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.admin-account-actions { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.admin-create-form { grid-template-columns: 1fr; }
.admin-create-hint { margin-top: 12px; padding: 11px 12px; border-radius: 8px; border: 1px solid #d7e5ff; background: #f6f9ff; color: #285099; font-size: 12px; line-height: 1.55; }
.admin-position-muted input { background: #f8fafc; color: var(--muted); }
.admin-side .detail-card strong { font-size: 14px; }
.admin-account { display: grid; grid-template-columns: 150px minmax(160px, 1fr) minmax(180px, 1fr) auto auto; align-items: end; gap: 10px; padding: 12px; border: 1px solid var(--line); border-radius: 7px; }
.account-identity { display: grid; justify-items: start; gap: 7px; }
.admin-account .danger-button, .admin-account .quiet-button { min-height: 39px; }
@media (max-width: 900px) { .admin-account { grid-template-columns: 1fr; align-items: stretch; } }
@media (max-width: 900px) {
  .history-grid,
  .ledger-meta-grid { grid-template-columns: 1fr; }
}
.mentor-account { display: grid; grid-template-columns: minmax(140px,.7fr) minmax(180px,1fr) minmax(180px,1fr) auto; gap: 12px; align-items: end; padding: 14px; border: 1px solid var(--line); border-radius: 7px; }
.mentor-account strong, .mentor-account span { display: block; }
.mentor-account strong { margin-top: 7px; }
.person-row {
  display: grid; grid-template-columns: minmax(180px, 1.2fr) 110px 100px 1fr 110px;
  align-items: center; gap: 14px; padding: 14px; border: 1px solid var(--line); border-radius: 7px; cursor: pointer;
}
.person-row:hover { border-color: #aebdd2; background: #fbfcfe; }
.archive-toggle-button { background: #f8fafc; border-style: dashed; }
.archive-panel { border-color: #cfd6e2; background: #fbfcff; }
.archive-panel .panel-header { background: #f6f8fb; }
.archive-counts { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.archive-counts span { padding: 5px 8px; border: 1px solid var(--line); border-radius: 999px; background: #fff; }
.archive-list { opacity: .92; }
.archived-person-row { background: #fafafa; border-style: dashed; }
.archived-person-row .avatar { background: #eef1f5; color: #64748b; }
.boss-person-row { grid-template-columns: minmax(180px, 1.2fr) 110px 100px 1fr 110px 54px; }
.boss-person-pie { display: grid; place-items: center; }
.person-main { display: flex; align-items: center; gap: 11px; }
.avatar { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--blue-soft); color: var(--blue); font-weight: 800; }
.mini-pie { width: 38px; height: 38px; border-radius: 50%; background: conic-gradient(var(--blue) 0 var(--percent), #e7edf7 var(--percent) 100%); display: grid; place-items: center; }
.mini-pie.strong { background: conic-gradient(#18864b 0 var(--percent), #e5f5eb var(--percent) 100%); }
.mini-pie.steady { background: conic-gradient(#2563eb 0 var(--percent), #e7edf7 var(--percent) 100%); }
.mini-pie.weak { background: conic-gradient(#d97706 0 var(--percent), #fff3df var(--percent) 100%); }
.mini-pie.empty { background: conic-gradient(#cbd5e1 0 var(--percent), #eef2f6 var(--percent) 100%); }
.mini-pie span { width: 24px; height: 24px; border-radius: 50%; background: #fff; display: grid; place-items: center; font-size: 10px; color: var(--ink); font-weight: 700; }
.person-main strong, .person-main span { display: block; }
.person-main span { color: var(--muted); font-size: 11px; margin-top: 3px; }
.progress { height: 7px; background: #e8ebf0; border-radius: 4px; overflow: hidden; }
.progress div { height: 100%; background: var(--green); }

.locked-note { padding: 12px; border: 1px dashed #b9c2ce; color: var(--muted); background: #fafbfc; border-radius: 6px; font-size: 12px; }
.exit-panel { border-color: #efb7b7; }
.exit-record { border-color: #d6c3a0; }
.exit-record .three-column strong, .exit-record .three-column span { display: block; }
.exit-record .three-column strong { margin-top: 7px; }
.exit-reason { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--line); }
.exit-reason p { margin: 7px 0 0; line-height: 1.6; }
.question-block { border-bottom: 1px solid #edf0f4; padding: 0 0 14px; margin-bottom: 14px; }
.question-block:last-child { border: 0; margin-bottom: 0; }
.question-block h3 { margin: 0 0 8px; font-size: 13px; }
.question-block p { margin: 0; color: #475467; line-height: 1.6; white-space: pre-wrap; }
.activity-summary { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 8px; margin: 16px 0; }
.activity-summary span { padding: 10px; background: #f5f7fa; border: 1px solid var(--line); border-radius: 6px; color: var(--muted); font-size: 12px; }
.activity-summary strong { display: block; margin-top: 5px; color: var(--ink); font-size: 18px; }
.field-help { color: var(--muted); font-size: 11px; }
.download-link { color: var(--blue); text-decoration: none; }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 16px; }
.mini-stat { border: 1px solid var(--line); border-radius: 7px; background: #f8fafc; padding: 12px; display: grid; gap: 6px; }
.mini-stat span, .mini-stat em { color: var(--muted); font-size: 12px; font-style: normal; }
.mini-stat strong { font-size: 22px; }
.dashboard-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.dashboard-block { border: 1px solid var(--line); border-radius: 7px; padding: 12px; background: #fff; }
.dashboard-block h3 { margin: 0 0 10px; font-size: 13px; }
.dashboard-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid #edf0f4; font-size: 12px; }
.dashboard-row:last-child { border-bottom: 0; padding-bottom: 0; }
.dashboard-row strong { white-space: nowrap; }
.evidence-chip { display: inline-flex; align-items: center; padding: 4px 7px; border-radius: 999px; background: var(--blue-soft); color: var(--blue); font-size: 11px; font-weight: 700; margin: 0 6px 6px 0; }
.empty.compact { padding: 8px 0; text-align: left; font-size: 12px; }
.final-layout { align-items: start; }
.pie-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.pie-card { border: 1px solid var(--line); background: #fff; border-radius: 12px; padding: 10px; cursor: pointer; display: grid; gap: 8px; text-align: center; }
.pie-card:hover, .pie-card.selected { border-color: #8bb2ff; box-shadow: 0 10px 24px rgba(37,99,235,.10); background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%); }
.pie-ring { width: 94px; height: 94px; margin: 0 auto; border-radius: 50%; background: conic-gradient(var(--blue) 0 var(--percent), #e7edf7 var(--percent) 100%); display: grid; place-items: center; }
.pie-card.strong .pie-ring { background: conic-gradient(#18864b 0 var(--percent), #e5f5eb var(--percent) 100%); }
.pie-card.steady .pie-ring { background: conic-gradient(#2563eb 0 var(--percent), #e7edf7 var(--percent) 100%); }
.pie-card.weak .pie-ring { background: conic-gradient(#d97706 0 var(--percent), #fff3df var(--percent) 100%); }
.pie-card.empty .pie-ring { background: conic-gradient(#cbd5e1 0 var(--percent), #eef2f6 var(--percent) 100%); }
.pie-center { width: 62px; height: 62px; border-radius: 50%; background: #fff; display: grid; place-items: center; padding: 8px; }
.pie-center strong { font-size: 18px; line-height: 1; }
.pie-center span { font-size: 11px; color: var(--muted); text-align: center; }
.pie-meta { font-size: 11px; color: var(--muted); }
.pie-card.activity .pie-ring { background: conic-gradient(#18864b 0 var(--percent), #e8f1eb var(--percent) 100%); }
.detail-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.detail-title { margin: 0 0 10px; font-size: 14px; }
.detail-list { display: grid; gap: 10px; }
.detail-card { border: 1px solid var(--line); border-radius: 8px; background: #fbfcfe; padding: 12px; }
.detail-card strong, .detail-card span { display: block; }
.detail-card span { margin-top: 6px; color: var(--muted); font-size: 12px; }
.detail-card p { margin: 8px 0 0; color: var(--ink); line-height: 1.55; font-size: 13px; }
.metric-pie-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.metric-inline-note { margin-top: 10px; color: var(--muted); font-size: 12px; }
.behavior-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.behavior-card { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #fafcff 100%); padding: 14px; }
.behavior-card.score { border-color: #c8d7fb; }
.behavior-card-top { display: flex; align-items: start; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.behavior-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.behavior-day { color: var(--muted); font-size: 12px; font-weight: 700; }
.behavior-card h3 { margin: 0 0 8px; font-size: 15px; }
.behavior-meta { color: var(--muted); font-size: 12px; }
.behavior-card p { margin: 10px 0 0; line-height: 1.6; color: var(--ink); font-size: 13px; }
.compact-table { border-top: 1px solid #edf0f4; padding-top: 12px; }
.trend-panel { margin-top: 16px; border: 1px solid var(--line); border-radius: 10px; background: #fbfcfe; padding: 14px; }
.trend-chart { width: 100%; height: 120px; display: block; }
.trend-line { fill: none; stroke: #18864b; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.trend-area { fill: rgba(24, 134, 75, 0.12); stroke: none; }
.trend-chart circle { fill: #18864b; }
.trend-labels { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; margin-top: 10px; }
.trend-labels span { color: var(--muted); font-size: 11px; text-align: center; }
.trend-labels strong { display: block; margin-top: 4px; color: var(--ink); font-size: 13px; }
.behavior-timeline { position: relative; display: grid; gap: 14px; margin-bottom: 16px; }
.behavior-timeline::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 2px; background: linear-gradient(180deg, #d7e4fb 0%, #e9eff8 100%); }
.timeline-evidence { position: relative; padding-left: 40px; }
.timeline-evidence.score .timeline-content { border-color: #bfd2fb; background: linear-gradient(180deg, #f8fbff 0%, #f2f7ff 100%); box-shadow: 0 12px 24px rgba(37,99,235,.08); }
.timeline-marker { position: absolute; left: 0; top: 18px; width: 22px; height: 22px; border-radius: 50%; background: #2563eb; border: 5px solid #eef4ff; box-shadow: 0 4px 10px rgba(37,99,235,.18); }
.timeline-content { border: 1px solid #dbe4f0; border-radius: 14px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); padding: 16px; box-shadow: 0 10px 24px rgba(15,23,42,.05); }
.timeline-content h3 { margin: 0; font-size: 16px; line-height: 1.35; }
.behavior-meta-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.behavior-meta-pill { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 10px; border-radius: 999px; background: #eef4ff; color: #2956a8; font-size: 12px; font-weight: 700; }
.behavior-meta-date { color: var(--muted); font-size: 12px; }
.timeline-content p { margin: 14px 0 0; line-height: 1.75; color: #233042; font-size: 13px; }
.compact-panel { margin-bottom: 0; }
.compact-stack { display: grid; gap: 12px; }
.compact-panel-body { padding-top: 12px; }
.final-tabs button { min-width: 84px; }
.summary-hero .panel-body { padding: 14px 16px; }
.hero-grid { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.hero-title { display: block; margin-top: 6px; font-size: 20px; }
.hero-note { margin: 6px 0 0; color: var(--muted); font-size: 13px; }
.hero-inline { display: grid; justify-items: end; gap: 8px; color: var(--muted); font-size: 12px; }
.compact-action { padding: 8px 12px; font-size: 12px; }
.boss-profile-hero { border-color: #d8d0bf; background: linear-gradient(135deg, #fffdf8 0%, #ffffff 50%, #f6f1e6 100%); }
.boss-profile-metrics .metric { min-height: 116px; }
.boss-profile-layout { align-items: start; }
.boss-profile-focus,
.boss-profile-decision { display: grid; gap: 12px; }
.boss-focus-card { border: 1px solid var(--line); border-radius: 10px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); padding: 14px; }
.boss-focus-card strong { display: block; margin-top: 8px; font-size: 20px; }
.boss-focus-card p { margin: 8px 0 0; color: var(--muted); font-size: 12px; line-height: 1.6; }
.boss-brief-row { display: grid; gap: 4px; padding: 10px 0; border-bottom: 1px solid #edf0f4; }
.boss-brief-row:last-child { border-bottom: 0; padding-bottom: 0; }
.boss-brief-row strong { font-size: 12px; color: var(--blue); }
.boss-brief-row span { color: var(--ink); font-size: 13px; line-height: 1.6; }
.boss-report-panel .table-wrap { max-height: 520px; overflow: auto; }
.boss-report-table { min-width: 980px; }
.boss-report-table th { position: sticky; top: 0; z-index: 1; }
.boss-report-table td strong { font-size: 14px; }
.boss-report-table td span { color: var(--muted); font-size: 12px; }
.boss-evaluation-placeholder { display: inline-block; min-width: 120px; border-bottom: 1px dashed #94a3b8; color: #64748b !important; padding-bottom: 3px; }
.activity-range-tabs { justify-content: flex-start; flex-wrap: wrap; margin-bottom: 14px; }
.activity-range-tabs button { white-space: nowrap; }
.boss-daily-feedback { display: grid; gap: 14px; }
.boss-feedback-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.boss-feedback-head h2 { margin: 0; }
.boss-feedback-head p { margin: 6px 0 0; color: var(--muted); }
.boss-feedback-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.boss-feedback-card { border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, #ffffff 0%, #fbfcfe 100%); padding: 14px; box-shadow: 0 10px 22px rgba(15, 23, 42, .05); }
.boss-feedback-card.empty-day { background: #fafafa; border-style: dashed; }
.boss-feedback-day { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.boss-feedback-day strong { font-size: 16px; }
.boss-feedback-item { display: grid; gap: 4px; padding: 8px 0; border-top: 1px solid #edf0f4; }
.boss-feedback-item span { color: var(--blue); font-size: 12px; font-weight: 800; }
.boss-feedback-item p { margin: 0; color: var(--ink); font-size: 13px; line-height: 1.6; }
.quiz-set-tabs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.quiz-set-tab { border: 1px solid var(--line); border-radius: 16px; background: #fff; padding: 14px 16px; text-align: left; color: var(--ink); font-weight: 800; cursor: pointer; box-shadow: 0 10px 24px rgba(15, 23, 42, .06); }
.quiz-set-tab span { display: block; margin-top: 5px; color: var(--muted); font-size: 12px; font-weight: 600; }
.quiz-set-tab.active { border-color: var(--blue); background: linear-gradient(135deg, #eef6ff 0%, #ffffff 100%); color: var(--blue); }
.quiz-result { border-radius: 14px; padding: 14px 16px; margin: 14px 0; line-height: 1.6; }
.quiz-result strong { display: block; margin-bottom: 4px; }
.quiz-result p { margin: 0; color: var(--muted); }
.quiz-result.success { background: #edfdf5; border: 1px solid #b7efd3; }
.quiz-result.warn { background: #fff7ed; border: 1px solid #fed7aa; }
.quiz-correction-panel { display: grid; gap: 12px; margin-top: 18px; }
.quiz-correction-card { border: 1px solid #f1d7b8; background: #fffaf4; border-radius: 14px; padding: 14px; }
.quiz-correction-card.accepted { border-color: #b7efd3; background: #f0fdf7; }
.quiz-correction-card strong { display: block; margin-bottom: 8px; }
.quiz-correction-card p { color: var(--muted); margin: 6px 0; line-height: 1.6; }
.wrong-page { color: #b45309 !important; font-weight: 700; }
.answer-reveal { margin-top: 10px; padding: 12px; border-radius: 12px; background: rgba(255, 255, 255, .72); line-height: 1.7; }

@media (max-width: 1050px) {
  .summary-grid { grid-template-columns: repeat(2, 1fr); }
  .two-column { grid-template-columns: 1fr; }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-dashboard { grid-template-columns: 1fr; }
  .admin-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .score-grid { grid-template-columns: repeat(2, 1fr); }
  .dashboard-list { grid-template-columns: 1fr; }
  .pie-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .metric-pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .daily-task-grid { grid-template-columns: 1fr; }
  .detail-split { grid-template-columns: 1fr; }
  .behavior-card-grid { grid-template-columns: 1fr; }
  .trainer-day-grid { grid-template-columns: 1fr; }
  .trainer-quiz-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trainer-quiz-row { grid-template-columns: 1fr auto; }
  .trainer-quiz-answer { grid-column: 1 / -1; }
  .trainer-quiz-correction { grid-column: 1 / -1; }
  .inspection-schedule { grid-template-columns: 1fr; }
  .mentor-alert-item { grid-template-columns: 1fr; }
  .quiz-week-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .course-hero .panel-body { align-items: flex-start; flex-direction: column; }
  .course-progress-block { width: 100%; text-align: left; }
  .course-layout { grid-template-columns: 1fr; }
  .course-sidebar { position: static; max-height: none; }
  .course-reading-notes { grid-template-columns: 1fr; }
  .course-slide-tools, .course-content-copy-head { align-items: flex-start; flex-direction: column; }
  .course-unit-application { grid-template-columns: 1fr; }
  .person-row { grid-template-columns: 1fr 90px 90px; }
  .person-row .person-progress, .person-row .person-risk { display: none; }
  .boss-person-row { grid-template-columns: 1fr 90px 90px 52px; }
  .boss-person-row .person-progress, .boss-person-row .person-risk { display: none; }
  .hero-grid { align-items: flex-start; flex-direction: column; }
  .hero-inline { justify-items: start; }
  .live-training-grid { grid-template-columns: 1fr; }
  .phone-preview { position: static; max-width: 340px; margin: 0 auto; }
}

@media (max-width: 760px) {
  .app-shell { display: block; }
  .sidebar { position: static; width: 100%; height: auto; padding: 14px; gap: 14px; }
  .navigation { display: flex; overflow-x: auto; }
  .nav-button { white-space: nowrap; width: auto; }
  .principle { display: none; }
  .topbar { padding: 16px; align-items: flex-start; flex-direction: column; }
  .top-actions { width: 100%; }
  .top-actions label { flex: 1; }
  .top-actions select { width: 100%; min-width: 0; }
  .beijing-clock { width: 100%; justify-content: center; }
  .content { padding: 16px; }
  .summary-grid, .form-grid, .three-column { grid-template-columns: 1fr; }
  .mini-grid { grid-template-columns: 1fr; }
  .pie-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .metric-pie-grid { grid-template-columns: 1fr 1fr; }
  .daily-task-card { grid-template-columns: 30px 1fr; }
  .daily-task-card strong { grid-column: 2; }
  .quiz-options { grid-template-columns: 1fr; }
  .quiz-live-progress { grid-template-columns: 1fr; }
  .trainer-alert-overview { grid-template-columns: 1fr 1fr 1fr; }
  .trainer-alert-overview > div { display: grid; text-align: center; }
  .trainer-alert-overview span { margin: 0; }
  .trainer-alert-group { grid-template-columns: 1fr auto; gap: 10px; }
  .trainer-alert-tags { grid-column: 1 / -1; grid-row: 2; }
  .trainer-alert-action { grid-column: 2; grid-row: 1; }
  .quiz-set-tabs { grid-template-columns: 1fr; }
  .pie-ring { width: 82px; height: 82px; }
  .pie-center { width: 54px; height: 54px; }
  .trend-labels { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .timeline { grid-template-columns: repeat(7, minmax(62px, 1fr)); overflow-x: auto; }
  .ability-row { grid-template-columns: 96px 1fr; }
  .ability-row .stars { grid-column: 2; }
  .score-grid { grid-template-columns: 1fr; }
  .mentor-review-grid, .mentor-observation-form, .trainer-followup-form { grid-template-columns: 1fr; }
  .data-table { min-width: 720px; }
  .panel-body.table-wrap { overflow-x: auto; }
  .person-row { grid-template-columns: 1fr 82px; }
  .person-row .person-day { display: none; }
  .boss-person-row { grid-template-columns: 1fr 82px 48px; }
  .boss-person-row .person-day { display: none; }
  .score-guide { align-items: flex-start; flex-direction: column; gap: 7px; }
  .panel-header { align-items: flex-start; }
  .panel-actions { align-items: stretch; flex-direction: column; }
  .mentor-account { grid-template-columns: 1fr; }
  .activity-summary { grid-template-columns: repeat(2, 1fr); }
  .admin-toolbar { grid-template-columns: 1fr; }
  .admin-bulk-bar, .admin-bulk-bar .panel-actions { align-items: stretch; flex-direction: column; }
  .admin-list-header, .admin-account-top, .admin-account-actions { align-items: stretch; flex-direction: column; }
  .admin-account-grid { grid-template-columns: 1fr; }
  .admin-account-tags { justify-content: start; }
  .live-session-hero .panel-body { align-items: flex-start; flex-direction: column; }
  .live-session-status { width: 100%; }
  .live-stage { flex-basis: 150px; }
  .live-guide-grid { grid-template-columns: 1fr; }
  .live-question-guide > summary { align-items: flex-start; }
  .live-question-guide > summary > strong { display: none; }
  .live-guide-card header { grid-template-columns: 34px 1fr; }
  .live-guide-card header em { grid-column: 2; }
  .live-control-main { grid-template-columns: 1fr; }
  .live-attendee-list { grid-template-columns: 1fr 1fr; }
  .live-progress-summary { grid-template-columns: 90px 1fr; }
  .classroom-options { grid-template-columns: 1fr; }
  .classroom-code-form { flex-direction: column; }
}