:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  color: #3d3929;
  background: #faf9f5;
  font-synthesis: none;
  --teal: #007a9e;
  --teal-dark: #006b8b;
  --teal-soft: #e6f4f8;
  --ink: #3d3929;
  --muted: #6b6857;
  --faint: #9b9992;
  --line: #e3e1d9;
  --surface: #ffffff;
  --surface-soft: #f5f4ee;
  --green: #218359;
  --green-soft: #e9f5ef;
  --amber: #a76917;
  --amber-soft: #fff6df;
  --red: #b3473c;
  --red-soft: #fbefed;
  --font-page-title: 20px;
  --font-modal-title: 18px;
  --font-section-title: 16px;
  --font-item-title: 14px;
  --font-body: 14px;
  --font-meta: 12px;
  --font-micro: 10px;
  --font-compact-metric: 14px;
  --font-summary-metric: 16px;
  --font-card-metric: 18px;
  --font-metric: 19px;
}

* { box-sizing: border-box; }
html, body, #app { margin: 0; min-height: 100%; max-width: 100%; }
body { min-width: 320px; background: #faf9f5; }
button, input, textarea, select { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: .5; }
button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { outline: 3px solid rgba(0,122,158,.16); outline-offset: 1px; }

.loading-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); font-size: 14px; }
.spin { animation: spin .8s linear infinite; color: var(--teal); }
@keyframes spin { to { transform: rotate(360deg); } }

.login-page { min-height: 100vh; display: grid; grid-template-columns: minmax(400px, 44%) 1fr; background: #fff; }
.login-brand-panel { position: relative; overflow: hidden; min-height: 100vh; display: flex; flex-direction: column; align-items: flex-start; padding: 58px 66px; color: #fff; background: #007a9e; }
.login-brand-copy { position: relative; z-index: 2; max-width: 620px; margin: auto 0 14vh; }
.login-brand-copy p { display: flex; flex-direction: column; gap: 10px; margin: 0; color: #fff; }
.login-brand-copy p > span { font-size: 30px; font-weight: 500; line-height: 1.25; }
.login-brand-copy p > strong { display: flex; flex-direction: column; max-width: 560px; font-size: 47px; font-weight: 700; line-height: 1.32; text-shadow: 0 7px 22px rgba(0,66,85,.22); }
.login-brand-copy p > strong span { white-space: nowrap; }
.login-pattern { position: absolute; inset: auto -12% -12% auto; width: 520px; aspect-ratio: 1; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.login-pattern span { position: absolute; inset: 13%; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.login-pattern span:nth-child(2) { inset: 28%; }
.login-pattern span:nth-child(3) { inset: 43%; background: rgba(255,255,255,.07); }
.login-form-panel { position: relative; display: grid; place-items: center; padding: 50px; background: #faf9f5; }
.login-form { width: min(390px, 100%); }
.login-title { margin-bottom: 42px; }
.login-title h2 { margin: 0 0 8px; font-size: 30px; letter-spacing: 0; }
.login-title p { margin: 0; color: var(--muted); font-size: 14px; }
.login-product-brand { display: flex; align-items: center; gap: 12px; }
.login-product-brand img { width: 54px; height: 54px; object-fit: contain; filter: drop-shadow(0 5px 10px rgba(23,70,81,.2)); }
.login-product-brand strong { color: #3d3929; font-size: 24px; font-weight: 650; }
.login-form > label, .form-grid > label { display: flex; flex-direction: column; gap: 8px; color: #55554e; font-size: 14px; font-weight: 500; }
.login-form > label { margin-bottom: 20px; }
input, textarea, select { width: 100%; min-height: 42px; padding: 10px 12px; color: var(--ink); background: #fff; border: 1px solid #d9d7cf; border-radius: 8px; letter-spacing: 0; }
.password-field { position: relative; width: 100%; }
.password-field input { padding-right: 42px; }
.password-toggle { position: absolute; top: 50%; right: 4px; width: 34px; height: 34px; display: grid; place-items: center; padding: 0; color: #85837b; background: transparent; border: 0; border-radius: 6px; transform: translateY(-50%); }
.password-toggle:hover { color: var(--teal); background: #f0f7f8; }
.password-toggle:focus-visible { outline: 0; box-shadow: 0 0 0 3px rgba(0,122,158,.12); }
textarea { resize: vertical; line-height: 1.7; }
select[multiple] { min-height: 112px; }
input:hover, textarea:hover, select:hover { border-color: #aaa89f; }
input:focus, textarea:focus, select:focus { border-color: var(--teal); }
.primary-button, .outline-button, .text-button { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 8px 15px; border-radius: 8px; border: 1px solid transparent; font-size: 14px; font-weight: 600; white-space: nowrap; }
.primary-button { color: #fff; background: var(--teal); box-shadow: 0 4px 12px rgba(0,122,158,.2); }
.primary-button:hover { background: var(--teal-dark); }
.outline-button { color: #55554e; background: #fff; border-color: #d9d7cf; box-shadow: none; }
.outline-button:hover { color: var(--teal); border-color: #73b6c8; background: #f8fcfd; }
.outline-button.small { min-height: 32px; padding: 6px 11px; font-size: 13px; }
.primary-button.small { min-height: 32px; padding: 6px 11px; font-size: 13px; }
.text-button { min-height: auto; padding: 4px; color: var(--teal); background: transparent; }
.text-button:hover { color: var(--teal-dark); }
.login-button { width: 100%; min-height: 44px; margin-top: 7px; }
.test-accounts { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 26px; color: var(--faint); font-size: 12px; }
.test-accounts button { padding: 5px 9px; color: var(--muted); border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; }
.form-error { display: flex; align-items: center; gap: 6px; margin: -7px 0 14px; color: var(--red); font-size: 13px; }

.app-shell { min-height: 100vh; background: #faf9f5; }
.sidebar { position: fixed; z-index: 30; inset: 8px auto 8px 8px; width: 224px; display: flex; flex-direction: column; background: #f5f4ee; border: 1px solid #eceae2; border-radius: 16px; transition: transform .2s ease; }
.sidebar-brand { height: 62px; display: flex; align-items: center; gap: 10px; padding: 10px 14px; }
.sidebar-brand img { width: 34px; height: 34px; object-fit: contain; border-radius: 8px; }
.sidebar-brand strong { font-size: 14px; letter-spacing: 0; }
.sidebar-brand .mobile-only { margin-left: auto; }
.sidebar nav { flex: 1; overflow-y: auto; padding: 0 8px; }
.nav-group + .nav-group { margin-top: 8px; padding-top: 8px; border-top: 1px solid #e3e1d9; }
.nav-label { display: block; padding: 12px 11px 7px; color: #9b9992; font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.nav-item { width: 100%; min-height: 39px; display: flex; align-items: center; gap: 10px; margin: 2px 0; padding: 9px 11px; color: #57574f; background: transparent; border: 0; border-radius: 8px; font-size: 14px; text-align: left; }
.nav-item:hover { color: var(--ink); background: rgba(53,53,47,.05); }
.nav-item.active { color: #fff; background: var(--teal); box-shadow: 0 4px 10px rgba(0,122,158,.16); }
.sidebar-account { position: relative; flex: none; padding: 0 8px 8px; }
.sidebar-user { width: 100%; min-height: 54px; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 9px; padding: 7px 8px; color: var(--ink); background: transparent; border: 0; border-top: 1px solid #e3e1d9; border-radius: 8px; text-align: left; }
.sidebar-user:hover { background: rgba(53,53,47,.05); }
.sidebar-user strong, .sidebar-user span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sidebar-user strong { font-size: 13px; }
.sidebar-user span { margin-top: 2px; color: var(--muted); font-size: 11px; }
.sidebar-avatar-button { display: grid; place-items: center; padding: 0; background: transparent; border: 0; border-radius: 50%; }
.sidebar-avatar-button:hover .avatar,
.sidebar-avatar-button[aria-expanded="true"] .avatar { box-shadow: 0 0 0 3px rgba(0,122,158,.14); }
.sidebar-user-copy { min-width: 0; }
.sidebar-logout-button { width: 28px; height: 28px; display: grid; place-items: center; padding: 0; color: var(--faint); background: transparent; border: 0; border-radius: 6px; opacity: 0; transition: color .15s ease, background .15s ease, opacity .15s ease; }
.sidebar-user:hover .sidebar-logout-button,
.sidebar-logout-button:focus-visible { opacity: 1; }
.sidebar-logout-button:hover { color: var(--red); background: var(--red-soft); }
.sidebar-account-menu { position: absolute; right: 8px; bottom: calc(100% + 5px); left: 8px; z-index: 5; padding: 6px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 42px rgba(53,53,47,.16); }
.sidebar-account-menu button { width: 100%; min-height: 36px; display: flex; align-items: center; gap: 9px; padding: 8px 10px; color: #55554e; background: transparent; border: 0; border-radius: 7px; font-size: 12px; text-align: left; }
.sidebar-account-menu button:hover { color: var(--teal-dark); background: var(--teal-soft); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: none; color: #006d8c; background: #dff1f6; border-radius: 50%; font-size: 14px; font-weight: 700; }
.avatar.small { width: 30px; height: 30px; font-size: 13px; }
.main-area { width: calc(100% - 240px); min-height: 100vh; margin-left: 240px; }
.topbar { position: sticky; z-index: 20; top: 0; height: 48px; display: flex; align-items: center; gap: 16px; padding: 0 30px; background: rgba(250,249,245,.9); backdrop-filter: blur(12px); }
.topbar::after { content: ''; position: absolute; right: 25px; bottom: 0; left: 25px; height: 1px; background: linear-gradient(90deg, transparent, rgba(205,203,195,.85) 16%, #d3d1c9 50%, rgba(205,203,195,.85) 84%, transparent); box-shadow: 0 5px 14px rgba(53,53,47,.07); }
.topbar-title { display: flex; align-items: center; gap: 7px; color: var(--faint); font-size: 12px; }
.topbar-title strong { color: #57574f; font-weight: 600; }
.profile-wrap { position: relative; margin-left: auto; }
.top-profile { display: flex; align-items: center; gap: 8px; min-height: 36px; padding: 3px 6px; color: #55554e; background: transparent; border: 0; border-radius: 8px; font-size: 13px; }
.top-profile:hover { background: rgba(53,53,47,.05); }
.profile-menu { position: absolute; top: 42px; right: 0; width: 210px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 18px 50px rgba(53,53,47,.16); }
.profile-menu > div { padding: 9px 10px 12px; border-bottom: 1px solid var(--line); }
.profile-menu strong, .profile-menu span { display: block; }
.profile-menu strong { font-size: 14px; }
.profile-menu span { margin-top: 4px; color: var(--muted); font-size: 11px; line-height: 1.5; }
.profile-menu button { width: 100%; display: flex; align-items: center; gap: 8px; margin-top: 5px; padding: 9px 10px; color: var(--red); background: transparent; border: 0; border-radius: 7px; font-size: 13px; }
.profile-menu button:hover { background: var(--red-soft); }
.mobile-only { display: none !important; }
.mobile-nav-trigger { position: fixed; z-index: 18; top: 12px; left: 12px; background: rgba(255,255,255,.92); border: 1px solid var(--line); box-shadow: 0 5px 18px rgba(53,53,47,.1); }
.icon-button { width: 34px; height: 34px; display: inline-grid; place-items: center; flex: none; padding: 0; color: #74746c; background: transparent; border: 0; border-radius: 8px; }
.icon-button:hover { color: var(--teal); background: var(--teal-soft); }
.danger-icon:hover { color: var(--red); background: var(--red-soft); }

.page-content { width: min(1440px, 100%); margin: 0 auto; padding: 40px 34px 56px; }
.page-heading { min-height: 77px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 23px; }
.page-heading h1 { margin: 4px 0 6px; color: #35352f; font-size: 27px; line-height: 1.25; font-weight: 650; letter-spacing: 0; }
.page-heading p { margin: 0; color: var(--muted); font-size: 13px; }
.page-heading > .outline-button { margin-left: auto; }
.eyebrow { color: var(--teal); font-size: 11px; font-weight: 700; letter-spacing: .14em; }
.row-heading { align-items: center; }
.compact-heading { min-height: 62px; }
.search-box { width: min(320px, 36vw); min-height: 39px; display: flex; align-items: center; gap: 8px; padding: 0 11px; background: #fff; border: 1px solid #dcdad2; border-radius: 8px; color: var(--faint); }
.search-box input { min-height: 0; padding: 0; border: 0; background: transparent; font-size: 13px; }
.search-box input:focus { outline: 0; }

.overview-band { display: grid; grid-template-columns: minmax(340px, 1.8fr) repeat(3, minmax(130px, .65fr)); min-height: 150px; margin-bottom: 20px; background: #e7f4f7; border: 1px solid #cce5eb; border-radius: 8px; }
.overview-main { display: flex; align-items: center; gap: 22px; padding: 25px 28px; border-right: 1px solid #cce5eb; }
.progress-ring { --progress: 0deg; width: 88px; height: 88px; display: grid; place-items: center; flex: none; border-radius: 50%; background: conic-gradient(var(--teal) var(--progress), #cce4e9 0); position: relative; }
.progress-ring::before { content: ''; position: absolute; inset: 8px; background: #e7f4f7; border-radius: 50%; }
.progress-ring span { position: relative; color: var(--teal-dark); font-size: 25px; font-weight: 700; }
.progress-ring small { font-size: 13px; }
.overview-main > div:last-child > span { color: #59767b; font-size: 12px; }
.overview-main strong { display: block; margin-top: 5px; font-size: 17px; }
.overview-main p { margin: 7px 0 0; color: #6f8b8f; font-size: 12px; }
.overview-stat { display: flex; flex-direction: column; justify-content: center; padding: 22px; border-right: 1px solid #cce5eb; }
.overview-stat:last-child { border: 0; }
.overview-stat svg { color: var(--teal); margin-bottom: 13px; }
.overview-stat strong { font-size: 25px; }
.overview-stat span { margin-top: 3px; color: #668186; font-size: 12px; }
.content-grid { display: grid; grid-template-columns: minmax(0, 1.8fr) minmax(260px, .7fr); gap: 20px; }
.panel { min-width: 0; background: #fff; border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 2px 10px rgba(53,53,47,.035); }
.panel-heading { min-height: 65px; display: flex; align-items: center; justify-content: space-between; gap: 15px; padding: 15px 19px; border-bottom: 1px solid #eeece5; }
.panel-heading h2 { margin: 0; font-size: 14px; letter-spacing: 0; }
.panel-heading p { margin: 3px 0 0; color: var(--faint); font-size: 11px; }
.task-list { padding: 4px 10px 9px; }
.task-row { width: 100%; min-height: 66px; display: grid; grid-template-columns: 9px minmax(170px, 1.6fr) minmax(90px, 1fr) 40px 80px 18px; align-items: center; gap: 11px; padding: 9px 8px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid #f0eee8; text-align: left; }
.task-row:hover { background: #f8f7f3; }
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: #aaa; }
.status-dot.learning { background: var(--teal); }
.status-dot.completed { background: var(--green); }
.status-dot.overdue { background: var(--red); }
.task-copy strong, .task-copy span { display: block; }
.task-copy strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 13px; }
.task-copy span { margin-top: 4px; color: var(--faint); font-size: 11px; }
.mini-progress, .progress-line { overflow: hidden; height: 5px; background: #e5e4dd; border-radius: 10px; }
.mini-progress span, .progress-line span { display: block; height: 100%; background: var(--teal); border-radius: inherit; }
.task-percent { color: var(--teal); font-size: 12px; }
.due-text { color: var(--muted); font-size: 11px; }
.danger { color: var(--red) !important; }
.continue-panel { padding-bottom: 18px; }
.continue-cover { height: 126px; display: grid; place-items: center; margin: 17px 17px 13px; color: #fff; background: #007a9e; border-radius: 6px; }
.continue-panel > h3, .continue-panel > p, .continue-panel > span, .continue-panel > .progress-line, .continue-panel > button { margin-left: 17px; margin-right: 17px; }
.continue-panel h3 { margin-top: 5px; margin-bottom: 6px; font-size: 14px; }
.continue-panel p { min-height: 34px; margin-top: 0; margin-bottom: 13px; color: var(--muted); font-size: 12px; line-height: 1.7; }
.continue-panel .progress-line { margin-bottom: 15px; }
.continue-panel > button { width: calc(100% - 34px); }
.course-kicker { color: var(--teal); font-size: 11px; font-weight: 600; }
.empty-state { min-height: 210px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--faint); text-align: center; }
.empty-state svg { color: #78b8c8; }
.empty-state strong { color: #62625a; font-size: 14px; }
.empty-state span { font-size: 12px; }

.plan-list { display: grid; gap: 11px; }
.plan-detail { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.plan-detail-header { min-height: 88px; display: grid; grid-template-columns: 44px minmax(0,1fr) 80px; align-items: center; gap: 14px; padding: 16px 20px; border-bottom: 1px solid var(--line); }
.plan-detail-header p { display: flex; align-items: center; gap: 5px; margin: 7px 0 0; color: var(--muted); font-size: 11px; }
.plan-total-progress { text-align: right; }
.plan-total-progress strong, .plan-total-progress span { display: block; }
.plan-total-progress strong { color: var(--teal); font-size: 20px; }
.plan-total-progress span { margin-top: 3px; color: var(--faint); font-size: 10px; }
.plan-course-head, .plan-course-row { display: grid; grid-template-columns: minmax(210px,1.4fr) minmax(160px,1fr) minmax(130px,.8fr) 90px 190px; align-items: center; gap: 14px; padding: 0 20px; }
.plan-course-head { min-height: 38px; color: var(--faint); background: #f5f4ee; font-size: 10px; font-weight: 600; }
.plan-course-row { min-height: 54px; border-top: 1px solid #efede7; font-size: 11px; }
.plan-course-row:first-of-type { border-top: 0; }
.plan-course-name { min-width: 0; display: flex; align-items: center; gap: 10px; }
.plan-course-name strong, .plan-course-name span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-course-name strong { font-size: 13px; }
.plan-course-name span { margin-top: 3px; color: var(--faint); font-size: 10px; }
.course-progress-cell { display: grid; grid-template-columns: 1fr 31px; align-items: center; gap: 7px; }
.course-progress-cell strong { color: var(--teal); font-size: 11px; }
.plan-course-actions { display: flex; justify-content: flex-end; gap: 7px; }
.plan-action-link { min-height: 28px; padding: 3px 6px; color: var(--teal-dark); background: transparent; border: 0; font-size: 12px; font-weight: 600; }
.plan-action-link:hover { color: var(--teal); text-decoration: underline; text-underline-offset: 3px; }
.plan-action-link:disabled { color: var(--faint); text-decoration: none; }
.plan-row-large { min-height: 124px; display: grid; grid-template-columns: 44px minmax(0,1fr) 190px; gap: 16px; align-items: center; padding: 20px 22px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.plan-state-icon { width: 42px; height: 42px; display: grid; place-items: center; color: var(--teal); background: var(--teal-soft); border-radius: 8px; }
.plan-state-icon.completed { color: var(--green); background: var(--green-soft); }
.plan-state-icon.overdue { color: var(--red); background: var(--red-soft); }
.plan-title-line { display: flex; align-items: center; gap: 10px; }
.plan-title-line h3 { margin: 0; font-size: 14px; }
.plan-main > p { margin: 6px 0 12px; color: var(--faint); font-size: 11px; }
.plan-resources { display: flex; flex-wrap: wrap; gap: 6px; }
.plan-resources button { display: flex; align-items: center; gap: 5px; padding: 5px 8px; color: #66665e; background: var(--surface-soft); border: 0; border-radius: 5px; font-size: 11px; }
.plan-resources button:hover { color: var(--teal); background: var(--teal-soft); }
.plan-progress-block { display: grid; grid-template-columns: 45px 1fr; align-items: center; gap: 6px 10px; }
.plan-progress-block > strong { color: var(--teal); font-size: 14px; }
.plan-progress-block > span { grid-column: 1/-1; color: var(--muted); font-size: 11px; text-align: right; }

.course-grid { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 12px 14px; }
.course-card { overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; cursor: pointer; transition: transform .16s ease, box-shadow .16s ease; }
.course-card:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(53,53,47,.09); }
.course-cover { position: relative; width: 100%; aspect-ratio: 1200 / 630; display: grid; place-items: center; overflow: hidden; color: #fff; background: #007a9e; }
.cover-1 { background: #657477; }
.cover-2 { background: #3c7b68; }
.cover-3 { background: #785f4b; }
.elective-mark { position: absolute; top: 10px; left: 10px; padding: 4px 7px; color: #474740; background: rgba(255,255,255,.9); border-radius: 4px; font-size: 11px; }
.course-card-body { padding: 8px 10px 7px; }
.course-card-body .course-kicker { font-size: 10px; }
.course-card h3 { margin: 3px 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.course-card p { height: 15px; display: block; margin: 0 0 7px; overflow: hidden; color: var(--muted); font-size: 11px; line-height: 1.6; text-overflow: ellipsis; white-space: nowrap; }
.course-card-footer { display: grid; grid-template-columns: 1fr 30px; align-items: center; gap: 8px; }
.course-card-footer .progress-line { height: 4px; }
.course-card-footer strong { color: var(--teal); font-size: 11px; text-align: right; }
.course-cover-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.course-elective-button { position: absolute; top: 9px; right: 9px; width: 32px; height: 32px; display: grid; place-items: center; color: #fff; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.34); border-radius: 7px; }
.course-elective-button.labeled { width: auto; height: 28px; display: flex; align-items: center; gap: 4px; padding: 0 8px; font-size: 11px; }
.course-elective-button:hover, .course-elective-button.selected { color: var(--teal-dark); background: rgba(255,255,255,.94); border-color: rgba(255,255,255,.8); }
.elective-mark.selected { color: #fff; background: rgba(0,84,106,.78); }
.course-toolbar { display: flex; align-items: center; justify-content: flex-end; gap: 9px; }
.course-toolbar .search-box { width: min(270px, 28vw); }
.filter-control { min-height: 39px; display: flex; align-items: center; gap: 7px; padding: 0 8px 0 10px; color: var(--faint); background: #fff; border: 1px solid #dcdad2; border-radius: 8px; font-size: 11px; white-space: nowrap; }
.filter-control select { width: 105px; min-height: 35px; padding: 5px 22px 5px 4px; background: transparent; border: 0; font-size: 12px; }
.filter-control select:focus { outline: 0; }
.electives-empty { min-height: 360px; }

.home-heading { min-height: 50px; margin-bottom: 14px; }
.home-section { padding: 24px 0 28px; border-bottom: 1px solid var(--line); }
.home-section:last-child { border-bottom: 0; }
.home-section-heading { min-height: 35px; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.home-section-heading > div { display: flex; align-items: center; gap: 10px; }
.home-section-heading h2 { margin: 0; font-size: 17px; }
.section-number { color: var(--teal); font-size: 11px; font-weight: 700; }
.learning-stat-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.learning-stat-grid > div { min-height: 112px; display: grid; grid-template-columns: 28px 1fr; grid-template-rows: auto auto; align-content: center; column-gap: 9px; padding: 20px 22px; border-right: 1px solid var(--line); }
.learning-stat-grid > div:last-child { border-right: 0; }
.learning-stat-grid svg { grid-row: 1 / 3; align-self: center; color: var(--teal); }
.learning-stat-grid span { color: var(--muted); font-size: 11px; }
.learning-stat-grid strong { margin-top: 5px; font-size: 20px; line-height: 1.2; }
.learning-stat-grid small { color: var(--muted); font-size: 11px; font-weight: 500; }
.home-summary-band { min-height: 104px; display: grid; grid-template-columns: minmax(260px,1.7fr) repeat(3,minmax(110px,.55fr)); align-items: stretch; overflow: hidden; border: 1px solid #cde3e8; border-radius: 8px; background: #edf7f8; }
.home-summary-band > div { display: flex; flex-direction: column; justify-content: center; padding: 18px 22px; border-right: 1px solid #cde3e8; }
.home-summary-band > div:last-child { border-right: 0; }
.home-summary-band > div > span { color: #687f82; font-size: 11px; }
.home-summary-band > div > strong { margin-top: 4px; font-size: 22px; }
.summary-progress { flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 15px; }
.summary-progress > div:last-child { display: flex; flex-direction: column; }
.summary-progress > div:last-child strong { font-size: 13px; }
.summary-progress > div:last-child span { margin-top: 5px; color: #687f82; font-size: 11px; }
.progress-ring.compact { width: 66px; height: 66px; }
.progress-ring.compact::before { inset: 6px; background: #edf7f8; }
.progress-ring.compact span { font-size: 18px; }
.summary-lead { flex-direction: row !important; align-items: center; justify-content: flex-start !important; gap: 12px; }
.summary-lead > svg { color: var(--teal); }
.summary-lead > div { display: flex; flex-direction: column; }
.summary-lead strong { font-size: 13px; }
.summary-lead span { margin-top: 5px; color: #687f82; font-size: 11px; }
.elective-summary-band { background: #f7f7f2; border-color: #deddd5; }
.elective-summary-band > div { border-color: #deddd5; }
.continue-heading { display: flex; align-items: baseline; gap: 9px; margin: 19px 0 9px; }
.continue-heading strong { font-size: 13px; }
.continue-heading span { color: var(--faint); font-size: 10px; }
.home-course-strip { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px 12px; }
.home-course-item { min-width: 0; min-height: 70px; display: grid; grid-template-columns: 64px minmax(0,1fr) 34px 16px; align-items: center; gap: 10px; padding: 9px 11px; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.home-course-item:hover { border-color: #b7dce4; background: #fbfefe; }
.compact-course-thumbnail { width: 64px; height: 40px; display: grid; place-items: center; overflow: hidden; color: #789198; background: #e9f3f5; border: 1px solid #d3e3e6; border-radius: 6px; }
.compact-course-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.home-course-item > div:nth-child(2) { min-width: 0; }
.home-course-item > div:nth-child(2) > span, .home-course-item > div:nth-child(2) > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-course-item > div:nth-child(2) > span { color: var(--faint); font-size: 10px; }
.home-course-item > div:nth-child(2) > strong { margin: 3px 0 8px; font-size: 12px; }
.home-course-item > b { color: var(--teal); font-size: 11px; text-align: right; }
.home-course-item > svg { color: var(--faint); }
.home-empty { min-height: 70px; display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--faint); background: #fff; border: 1px dashed #d9d7cf; border-radius: 8px; font-size: 11px; }
.help-modal { width: min(620px, calc(100vw - 36px)); }
.help-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.help-grid > div { min-height: 112px; display: grid; grid-template-columns: 30px 1fr; grid-template-rows: auto auto; align-content: center; padding: 16px; background: #faf9f5; border: 1px solid var(--line); border-radius: 8px; }
.help-grid svg { grid-row: 1 / 3; color: var(--teal); }
.help-grid strong { font-size: 13px; }
.help-grid span { margin-top: 5px; color: var(--muted); font-size: 11px; line-height: 1.6; }

.data-panel { overflow: hidden; }
.data-head, .data-row { display: grid; align-items: center; gap: 14px; padding: 0 18px; }
.data-head { min-height: 41px; color: var(--faint); background: #f5f4ee; border-bottom: 1px solid var(--line); font-size: 11px; font-weight: 600; }
.data-row { min-height: 66px; border-bottom: 1px solid #eeece5; font-size: 12px; }
.data-row:last-child { border-bottom: 0; }
.data-row:hover { background: #fbfaf7; }
.data-row > strong { font-size: 13px; }
.data-row > div > strong { font-size: 13px; }
.exam-cols { grid-template-columns: minmax(240px, 1.5fr) .55fr .75fr .55fr 100px; }
.exam-card-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.exam-card { min-width: 0; display: flex; flex-direction: column; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 1px 2px rgba(61,57,41,.05); }
.exam-card > header { min-height: 68px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 14px 16px; border-bottom: 1px solid #eeece5; }
.exam-card > header > div { min-width: 0; }
.exam-card h2 { margin: 0; overflow: hidden; color: var(--ink); font-size: var(--font-item-title); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.exam-card > header > div > span { display: block; margin-top: 5px; overflow: hidden; color: var(--faint); font-size: var(--font-meta); text-overflow: ellipsis; white-space: nowrap; }
.exam-ready-mark { flex: none; padding: 3px 7px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 5px; font-size: var(--font-meta); font-weight: 600; }
.exam-card-body { flex: 1; padding: 13px 16px 0; }
.exam-card-label { display: block; margin-bottom: 6px; color: var(--muted); font-size: var(--font-meta); }
.exam-question-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); column-gap: 18px; }
.exam-question-grid > div { min-width: 0; min-height: 38px; display: flex; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #eeece5; }
.exam-question-grid > div > span { color: var(--ink); font-size: var(--font-body); }
.exam-question-grid > div > strong { flex: none; color: var(--ink); font-size: var(--font-body); font-weight: 600; }
.exam-question-grid > div > strong small { margin-left: 6px; color: var(--faint); font-size: var(--font-meta); font-weight: 400; }
.exam-card-facts { display: grid; grid-template-columns: 1fr 1fr; margin-top: 8px; border-top: 1px solid var(--line); }
.exam-card-facts > div { min-width: 0; min-height: 62px; display: flex; flex-direction: column; justify-content: center; }
.exam-card-facts > div + div { padding-left: 16px; border-left: 1px solid #eeece5; }
.exam-card-facts > div > span { color: var(--muted); font-size: var(--font-meta); }
.exam-card-facts > div > strong { min-height: 22px; display: flex; align-items: baseline; gap: 4px; margin-top: 5px; color: var(--ink); font-size: var(--font-item-title); }
.exam-grade b { font-size: var(--font-card-metric); line-height: 1; }
.exam-grade small { margin-right: 2px; font-size: var(--font-meta); font-weight: 400; }
.exam-card-facts > div > .exam-grade.pending { color: var(--faint); }
.exam-card-facts > div > .exam-grade.excellent { color: var(--teal-dark); }
.exam-card-facts > div > .exam-grade.good { color: var(--green); }
.exam-card-facts > div > .exam-grade.passed { color: var(--amber); }
.exam-card-facts > div > .exam-grade.failed { color: var(--red); }
.exam-card > footer { min-height: 48px; display: flex; align-items: center; justify-content: flex-end; padding: 8px 16px; background: #faf9f5; border-top: 1px solid #eeece5; }
.exam-empty-panel { overflow: hidden; }
.course-admin-cols { grid-template-columns: minmax(190px,1.3fr) minmax(110px,.8fr) minmax(90px,.65fr) 64px 84px 58px; gap: 10px; padding-right: 14px; padding-left: 14px; }
.plan-admin-cols { grid-template-columns: minmax(180px,1.2fr) .8fr .8fr .5fr .5fr .55fr 62px; }
.monitor-cols { grid-template-columns: minmax(130px,.8fr) minmax(170px,1.1fr) .7fr .7fr .8fr .55fr; }
.employee-cols { grid-template-columns: minmax(130px,.8fr) .65fr .75fr 1.2fr .5fr 38px; }
.user-admin-cols { grid-template-columns: minmax(180px,1.5fr) minmax(110px,.8fr) minmax(110px,.75fr) 82px 72px; }
.resource-name, .employee-cell { min-width: 0; display: flex; align-items: center; gap: 10px; }
.heading-actions { display: flex; align-items: center; gap: 9px; }
.admin-course-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.admin-course-filters { min-width: 0; display: flex; align-items: center; gap: 9px; }
.admin-course-filters .search-box { width: min(300px,28vw); }
.admin-course-filters .filter-control select { width: 120px; }
.course-category-cell { overflow: hidden; color: #4a4843; text-overflow: ellipsis; white-space: nowrap; }

.course-admin-workspace { display: grid; grid-template-columns: 208px minmax(0,1fr); align-items: start; gap: 12px; }
.course-category-nav { min-width: 0; overflow: hidden; background: #f5f4ee; border: 1px solid #eceae2; border-radius: 16px; }
.course-category-nav > header { height: 48px; display: flex; align-items: center; padding: 0 16px; border-bottom: 1px solid #e8e6de; }
.course-category-nav > header strong,
.course-category-nav > header span { display: block; }
.course-category-nav > header strong { color: #3d3929; font-size: 12px; font-weight: 600; }
.course-category-nav > header span { margin-top: 1px; color: #9b9992; font-size: 10px; }
.category-create-wrap { padding: 8px 12px; }
.category-create-button { width: 100%; height: 34px; display: flex; align-items: center; gap: 8px; padding: 0 12px; color: #4a4843; background: transparent; border: 0; border-radius: 8px; font-size: 13px; text-align: left; transition: background .15s ease; }
.category-create-button:hover { background: rgba(61,57,41,.05); }
.course-category-nav > nav { max-height: 430px; overflow-y: auto; padding: 0 8px 8px; }
.category-nav-label { margin: 2px 8px 5px; color: #9b9992; font-size: 10px; font-weight: 600; letter-spacing: 1px; }
.category-menu-row { position: relative; display: flex; align-items: center; margin-top: 2px; border-radius: 8px; transition: background .15s ease; }
.category-menu-row:hover { background: rgba(61,57,41,.05); }
.category-menu-row.active { color: #fff; background: #007a9e; }
.category-menu-item { width: 100%; min-width: 0; min-height: 38px; display: grid; grid-template-columns: 17px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; color: #4a4843; background: transparent; border: 0; border-radius: 8px; text-align: left; transition: background .15s ease, color .15s ease; }
.category-menu-item:hover { background: rgba(61,57,41,.05); }
.category-menu-item span { overflow: hidden; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.category-menu-item small { width: 28px; min-width: 28px; color: #9b9992; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.category-menu-item.all-courses { margin-bottom: 2px; padding-right: 54px; }
.category-menu-item.all-courses.active { color: #fff; background: #007a9e; }
.category-menu-item.active small,
.category-menu-row.active .category-menu-item,
.category-menu-row.active .category-menu-item small { color: #fff; }
.category-menu-row.active .category-menu-item:hover { background: transparent; }
.category-menu-row .category-menu-item { padding-right: 54px; }
.category-menu-actions { position: absolute; right: 6px; display: flex; opacity: 0; }
.category-menu-row:hover .category-menu-actions,
.category-menu-row.active .category-menu-actions { opacity: 1; }
.category-menu-actions button { width: 21px; height: 26px; display: grid; place-items: center; padding: 0; color: #9b9992; background: transparent; border: 0; border-radius: 5px; }
.category-menu-actions button:hover { color: #4a4843; background: rgba(255,255,255,.65); }
.category-menu-row.active .category-menu-actions button { color: rgba(255,255,255,.78); }
.category-menu-row.active .category-menu-actions button:hover { color: #fff; background: rgba(255,255,255,.14); }
.category-menu-actions .danger-icon:hover { color: var(--red); }
.category-menu-row.active .category-menu-actions .danger-icon:hover { color: #fff; }
.category-inline-editor { margin: 0 8px 8px; padding: 12px; background: rgba(255,255,255,.65); border: 1px solid #e8e6de; border-radius: 8px; }
.category-inline-editor > strong { display: block; margin-bottom: 10px; font-size: 13px; }
.category-inline-editor label { display: flex; flex-direction: column; gap: 5px; margin-top: 9px; color: #6b6857; font-size: 11px; }
.category-inline-editor input,
.category-inline-editor textarea { min-height: 34px; padding: 7px 9px; background: #fff; font-size: 12px; }
.category-inline-editor > div { display: flex; justify-content: flex-end; gap: 5px; margin-top: 10px; }
.course-admin-main { min-width: 0; }
.course-admin-list-header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.course-admin-list-header h2 { margin: 0; font-size: 15px; font-weight: 600; }
.course-admin-list-header > div:first-child > span { display: block; margin-top: 3px; color: #9b9992; font-size: 10px; }
.course-admin-list-header > div:last-child { display: flex; align-items: center; gap: 9px; }
.course-admin-list-header .search-box { width: min(270px,26vw); }
.course-admin-main .data-panel { overflow-x: auto; }
.course-row-thumb { width: 48px; height: 32px; display: grid; place-items: center; flex: none; overflow: hidden; color: var(--teal); background: var(--teal-soft); border-radius: 5px; }
.course-row-thumb img { width: 100%; height: 100%; object-fit: contain; }
.resource-name strong, .resource-name span, .employee-cell strong, .employee-cell span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.resource-name span, .employee-cell span { margin-top: 3px; color: var(--faint); font-size: 11px; }
.resource-icon { width: 34px; height: 34px; display: grid; place-items: center; flex: none; color: var(--teal); background: var(--teal-soft); border-radius: 7px; }
.plan-course-thumbnail { width: 56px; height: 35px; display: grid; place-items: center; flex: none; overflow: hidden; color: #789198; background: #e9f3f5; border: 1px solid #d3e3e6; border-radius: 6px; }
.plan-course-thumbnail img { width: 100%; height: 100%; object-fit: contain; }
.subline { display: block; max-width: 300px; margin-top: 4px; overflow: hidden; color: var(--faint); font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.status-pill { width: fit-content; display: inline-flex; align-items: center; padding: 4px 8px; color: #62625b; background: #eeece7; border-radius: 12px; font-size: 11px; font-weight: 600; }
.status-pill.published, .status-pill.completed { color: var(--green); background: var(--green-soft); }
.status-pill.learning { color: var(--teal); background: var(--teal-soft); }
.status-pill.overdue { color: var(--red); background: var(--red-soft); }
.status-pill.draft, .status-pill.not_started { color: var(--amber); background: var(--amber-soft); }
.row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.success { color: var(--green); }
.inline-progress { position: relative; height: 6px; margin-right: 35px; background: #e5e4dd; border-radius: 5px; }
.inline-progress > span { display: block; height: 100%; background: var(--teal); border-radius: 5px; }
.inline-progress strong { position: absolute; top: -5px; left: calc(100% + 6px); color: var(--teal); font-size: 11px; }
.monitor-summary { display: grid; grid-template-columns: repeat(5,1fr); margin-bottom: 16px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.monitor-summary > div { min-height: 94px; display: flex; flex-direction: column; justify-content: center; padding: 17px 20px; border-right: 1px solid var(--line); }
.monitor-summary > div:last-child { border: 0; }
.monitor-summary span { color: var(--muted); font-size: 11px; }
.monitor-summary strong { margin-top: 7px; font-size: 22px; }
.monitor-summary .danger-stat strong { color: var(--red); }
.employee-stat-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 14px; }
.employee-stat-card { min-width: 0; min-height: 236px; padding: 0; overflow: hidden; color: #3d3929; background: #fff; border: 1px solid #e3e1d9; border-radius: 8px; box-shadow: 0 1px 2px rgba(61,57,41,.05); font: inherit; text-align: left; cursor: pointer; transition: transform .16s ease, border-color .16s ease, box-shadow .16s ease; }
.employee-stat-card:hover { transform: translateY(-1px); border-color: #cbdfe3; box-shadow: 0 8px 20px rgba(61,57,41,.09); }
.employee-stat-card:focus-visible { outline: 3px solid rgba(0,122,158,.16); outline-offset: 2px; }
.employee-stat-card.inactive { opacity: .62; }
.employee-stat-card > header { height: 62px; display: grid; grid-template-columns: 36px minmax(0,1fr) 18px; align-items: center; gap: 10px; padding: 10px 14px; border-bottom: 1px solid #eeece5; }
.employee-stat-card > header > div:nth-child(2) { min-width: 0; }
.employee-stat-card > header strong,
.employee-stat-card > header span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-stat-card > header strong { font-size: 14px; font-weight: 600; }
.employee-stat-card > header span { margin-top: 3px; color: #8e8b80; font-size: 11px; }
.employee-stat-card > header > svg { color: #aaa79d; }
.employee-stat-avatar { width: 36px; height: 36px; font-size: 13px; }
.employee-stat-metrics { display: grid; grid-template-columns: 1.25fr 1fr 1fr; border-bottom: 1px solid #eeece5; }
.employee-stat-metrics > div { min-width: 0; padding: 13px 12px; border-right: 1px solid #eeece5; }
.employee-stat-metrics > div:last-child { border-right: 0; }
.employee-stat-metrics span,
.employee-stat-metrics strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-stat-metrics span { color: #8e8b80; font-size: 10px; }
.employee-stat-metrics strong { margin-top: 6px; color: #3d3929; font-size: 14px; font-weight: 600; }
.employee-stat-metrics small { color: #8e8b80; font-size: 10px; font-weight: 400; }
.employee-current-plans { min-height: 100px; padding: 11px 14px 12px; }
.employee-current-plans-heading,
.employee-plan-line > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.employee-current-plans-heading { margin-bottom: 9px; }
.employee-current-plans-heading span { color: #6b6857; font-size: 11px; font-weight: 500; }
.employee-current-plans-heading strong { color: #8e8b80; font-size: 10px; font-weight: 500; }
.employee-plan-line + .employee-plan-line { margin-top: 8px; }
.employee-plan-line > div:first-child span { min-width: 0; overflow: hidden; color: #56534a; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.employee-plan-line > div:first-child strong { flex: none; color: var(--teal); font-size: 10px; }
.employee-plan-line .progress-line { height: 4px; margin-top: 5px; }
.employee-no-plan,
.employee-more-plan { display: block; color: #aaa79d; font-size: 10px; }
.employee-no-plan { padding-top: 13px; text-align: center; }
.employee-more-plan { margin-top: 8px; }

.statistics-drawer-backdrop { position: fixed; z-index: 120; inset: 0; display: flex; justify-content: flex-end; background: rgba(61,57,41,.32); backdrop-filter: blur(1px); }
.statistics-drawer { width: min(640px,calc(100vw - 48px)); height: 100vh; display: flex; flex-direction: column; overflow: hidden; background: #faf9f5; border-left: 1px solid #e3e1d9; box-shadow: -20px 0 55px rgba(61,57,41,.18); animation: statistics-drawer-in .2s ease-out; }
@keyframes statistics-drawer-in { from { transform: translateX(28px); opacity: .6; } to { transform: translateX(0); opacity: 1; } }
.statistics-drawer > header { min-height: 74px; display: grid; grid-template-columns: 40px minmax(0,1fr) 34px; align-items: center; gap: 11px; padding: 13px 20px; background: #fff; border-bottom: 1px solid #e8e6de; }
.statistics-drawer > header > div:nth-child(2) { min-width: 0; }
.statistics-drawer > header h2 { margin: 0; overflow: hidden; color: #3d3929; font-size: 18px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.statistics-drawer > header span { display: block; margin-top: 4px; overflow: hidden; color: #8e8b80; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.employee-detail-avatar { width: 40px; height: 40px; font-size: 14px; }
.statistics-drawer-body { min-height: 0; overflow-y: auto; }
.employee-detail-summary { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); background: #fff; border-bottom: 1px solid #e8e6de; }
.employee-detail-summary > div { min-width: 0; padding: 18px 20px; border-right: 1px solid #eeece5; }
.employee-detail-summary > div:last-child { border-right: 0; }
.employee-detail-summary span,
.employee-detail-summary strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-detail-summary span { color: #8e8b80; font-size: 10px; }
.employee-detail-summary strong { margin-top: 7px; color: #3d3929; font-size: 16px; font-weight: 600; }
.employee-detail-summary small { color: #8e8b80; font-size: 10px; font-weight: 400; }
.employee-detail-section { padding: 0 20px; background: #fff; border-bottom: 1px solid #e8e6de; }
.employee-detail-section > header { min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 15px; }
.employee-detail-section > header h3 { margin: 0; color: #3d3929; font-size: 14px; font-weight: 600; }
.employee-detail-section > header > span { color: #8e8b80; font-size: 10px; }
.employee-detail-list { border-top: 1px solid #f0efe9; }
.employee-detail-list article { padding: 13px 0; border-bottom: 1px solid #f0efe9; }
.employee-detail-list article:last-child { border-bottom: 0; }
.employee-detail-row-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.employee-detail-row-heading > div { min-width: 0; }
.employee-detail-row-heading strong,
.employee-detail-row-heading span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-detail-row-heading strong { font-size: 12px; font-weight: 600; }
.employee-detail-row-heading > div > span { margin-top: 4px; color: #8e8b80; font-size: 10px; }
.employee-detail-progress { display: grid; grid-template-columns: minmax(0,1fr) 34px; align-items: center; gap: 9px; margin-top: 10px; }
.employee-detail-progress .progress-line { height: 5px; }
.employee-detail-progress > strong { color: var(--teal); font-size: 10px; text-align: right; }
.course-detail-list article { display: grid; grid-template-columns: 54px minmax(0,1fr) 62px; align-items: center; gap: 11px; }
.employee-detail-course-thumb { width: 54px; height: 34px; display: grid; place-items: center; overflow: hidden; color: var(--teal); background: var(--teal-soft); border-radius: 5px; }
.employee-detail-course-thumb img { width: 100%; height: 100%; object-fit: contain; }
.course-detail-list article > div:nth-child(2),
.course-detail-list article > div:last-child { min-width: 0; }
.course-detail-list article strong,
.course-detail-list article span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.course-detail-list article strong { color: #4a4843; font-size: 12px; font-weight: 600; }
.course-detail-list article span { margin-top: 4px; color: #8e8b80; font-size: 10px; }
.course-detail-list article > div:last-child { text-align: right; }
.course-detail-list article > div:last-child strong { color: var(--teal); }
.employee-detail-empty { padding: 26px 0; color: #aaa79d; font-size: 11px; text-align: center; }
.group-strip { min-height: 55px; display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; padding: 10px 17px; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.group-strip > span { margin-right: 7px; color: var(--faint); font-size: 11px; }
.group-strip strong, .tag-row span { padding: 5px 8px; color: #68685f; background: var(--surface-soft); border-radius: 5px; font-size: 11px; font-weight: 500; }
.tag-row { display: flex; flex-wrap: wrap; gap: 5px; }
.tag-row em { color: var(--faint); font-size: 11px; font-style: normal; }
.employee-group-manager { margin-bottom: 14px; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.employee-group-manager > header { min-height: 54px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 9px 13px; border-bottom: 1px solid var(--line); }
.employee-group-manager > header strong, .employee-group-manager > header span { display: block; }
.employee-group-manager > header strong { font-size: 13px; }
.employee-group-manager > header span { margin-top: 2px; color: var(--faint); font-size: 10px; }
.employee-group-manager > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); }
.employee-group-manager article { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.employee-group-manager article:nth-child(3n) { border-right: 0; }
.employee-group-manager article > div:first-child { min-width: 0; }
.employee-group-manager article > div:last-child { display: flex; gap: 2px; }
.employee-group-manager article strong, .employee-group-manager article span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.employee-group-manager article strong { font-size: 12px; }
.employee-group-manager article span { margin-top: 4px; color: var(--faint); font-size: 10px; }
.employee-group-manager .danger-icon:hover { color: var(--red); }
.employee-group-checks { display: flex; flex-direction: column; gap: 8px; }
.employee-group-checks > strong { color: #55554e; font-size: 14px; font-weight: 500; }
.employee-group-checks > div { display: flex; flex-wrap: wrap; gap: 7px 16px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px; }

.user-management-workspace { display: grid; grid-template-columns: 220px minmax(0,1fr); align-items: start; gap: 14px; }
.user-directory-nav { min-width: 0; overflow: hidden; background: #f5f4ee; border: 1px solid #eceae2; border-radius: 16px; }
.user-directory-nav > header { height: 50px; display: flex; align-items: center; padding: 0 15px; border-bottom: 1px solid #e8e6de; }
.user-directory-nav > header strong,
.user-directory-nav > header span { display: block; }
.user-directory-nav > header strong { color: #3d3929; font-size: 12px; font-weight: 600; }
.user-directory-nav > header span { margin-top: 2px; color: #9b9992; font-size: 10px; }
.user-directory-nav > nav { max-height: calc(100vh - 160px); overflow-y: auto; padding: 9px 8px 11px; }
.directory-section { margin-top: 12px; padding-top: 9px; border-top: 1px solid #e5e3db; }
.directory-section > header { height: 28px; display: flex; align-items: center; justify-content: space-between; padding: 0 7px 0 9px; }
.directory-section > header > span { color: #8e8b80; font-size: 10px; font-weight: 600; }
.directory-section > header > button { width: 25px; height: 25px; display: grid; place-items: center; padding: 0; color: #77746b; background: transparent; border: 0; border-radius: 6px; }
.directory-section > header > button:hover { color: var(--teal); background: rgba(0,122,158,.08); }
.directory-menu-row { position: relative; display: flex; align-items: center; margin-top: 2px; border-radius: 8px; transition: background .15s ease; }
.directory-menu-row:hover { background: rgba(61,57,41,.05); }
.directory-menu-row.active { background: var(--teal); }
.directory-menu-item { width: 100%; min-width: 0; min-height: 38px; display: grid; grid-template-columns: 17px minmax(0,1fr) auto; align-items: center; gap: 8px; padding: 7px 10px; color: #4a4843; background: transparent; border: 0; border-radius: 8px; font-size: 12px; text-align: left; }
.directory-menu-item:hover { background: rgba(61,57,41,.05); }
.directory-menu-item span { overflow: hidden; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.directory-menu-item small { width: 28px; min-width: 28px; color: #9b9992; font-size: 10px; font-variant-numeric: tabular-nums; text-align: right; }
.directory-menu-item.all-users { margin-bottom: 2px; padding-right: 54px; }
.directory-menu-item.all-users.active { color: #fff; background: var(--teal); }
.directory-menu-item.all-users.active small,
.directory-menu-row.active .directory-menu-item,
.directory-menu-row.active .directory-menu-item small { color: #fff; }
.directory-menu-row .directory-menu-item { padding-right: 54px; }
.directory-menu-actions { position: absolute; right: 6px; display: flex; opacity: 0; }
.directory-menu-row:hover .directory-menu-actions,
.directory-menu-row.active .directory-menu-actions { opacity: 1; }
.directory-menu-actions button { width: 21px; height: 26px; display: grid; place-items: center; padding: 0; color: #9b9992; background: transparent; border: 0; border-radius: 5px; }
.directory-menu-actions button:hover { color: #4a4843; background: rgba(255,255,255,.7); }
.directory-menu-row.active .directory-menu-actions button { color: rgba(255,255,255,.8); }
.directory-menu-row.active .directory-menu-actions button:hover { color: #fff; background: rgba(255,255,255,.15); }
.directory-menu-actions .danger-icon:hover { color: var(--red); }
.directory-empty { padding: 12px; color: #aaa79d; font-size: 10px; text-align: center; }
.user-management-main { min-width: 0; }
.user-list-header { min-height: 50px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.user-list-header h2 { margin: 0; color: #3d3929; font-size: 15px; font-weight: 600; }
.user-list-header > div > span { display: block; margin-top: 3px; color: #9b9992; font-size: 10px; }
.user-data-panel { overflow-x: auto; }
.user-data-panel .data-head,
.user-data-panel .data-row { min-width: 650px; }
.departed-user-row { color: #9b9992; background: #faf9f5; }
.departed-user-row .avatar { background: #aaa79d; }
.departed-user-row .employee-cell strong { color: #77746b; }
.user-data-panel .row-actions { align-items: center; }
.user-data-panel .danger-icon:hover { color: var(--red); }
.user-editor-modal { width: min(620px,calc(100vw - 36px)); }
.group-editor-modal { width: min(660px,calc(100vw - 36px)); }
.group-member-field { display: flex; flex-direction: column; gap: 8px; }
.group-member-field > div:first-child { display: flex; align-items: center; justify-content: space-between; }
.group-member-field > div:first-child strong { color: #6b6857; font-size: 13px; font-weight: 500; }
.group-member-field > div:first-child span { color: #9b9992; font-size: 10px; }
.group-member-picker { max-height: 260px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); overflow-y: auto; border: 1px solid #e3e1d9; border-radius: 8px; }
.group-member-row { min-width: 0; min-height: 54px; display: grid; grid-template-columns: 16px 28px minmax(0,1fr); align-items: center; gap: 9px; padding: 8px 11px; border-right: 1px solid #f0efe9; border-bottom: 1px solid #f0efe9; cursor: pointer; }
.group-member-row:nth-child(2n) { border-right: 0; }
.group-member-row:hover { background: #f8f8f4; }
.group-member-row > span { min-width: 0; }
.group-member-row strong,
.group-member-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.group-member-row strong { color: #4a4843; font-size: 12px; font-weight: 500; }
.group-member-row small { margin-top: 3px; color: #9b9992; font-size: 10px; }

.modal-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; place-items: center; padding: 18px; background: rgba(46,46,41,.43); backdrop-filter: blur(2px); }
.modal { width: min(760px, calc(100vw - 36px)); max-height: calc(100vh - 36px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid #e3e1d9; border-radius: 14px; box-shadow: 0 24px 70px rgba(46,46,41,.22); }
.modal > header { min-height: 68px; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 15px 20px; border-bottom: 1px solid var(--line); }
.modal > header h2 { margin: 3px 0 0; font-size: 17px; }
.modal > header p { margin: 5px 0 0; color: var(--muted); font-size: 11px; }
.modal > footer { min-height: 64px; display: flex; align-items: center; justify-content: flex-end; gap: 9px; padding: 12px 20px; background: #faf9f5; border-top: 1px solid var(--line); }
.modal-body { overflow-y: auto; padding: 20px; }
.wide-modal { width: min(980px, calc(100vw - 36px)); }
.plan-modal, .exam-editor-modal { width: min(900px, calc(100vw - 36px)); }
.small-modal { width: min(520px, calc(100vw - 36px)); }
.form-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.form-grid.three { grid-template-columns: repeat(3,minmax(0,1fr)); }
.form-grid .span-2 { grid-column: span 2; }
.form-grid .span-3 { grid-column: span 3; }
.form-grid small { color: var(--faint); font-size: 11px; font-weight: 400; }
.course-basic-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 15px; }
.segmented { width: fit-content; display: flex; padding: 3px; margin-bottom: 18px; background: #f0efe9; border-radius: 8px; }
.segmented button { min-height: 32px; padding: 6px 13px; color: #77776f; background: transparent; border: 0; border-radius: 6px; font-size: 12px; }
.segmented button.active { color: var(--teal-dark); background: #fff; box-shadow: 0 1px 5px rgba(53,53,47,.12); font-weight: 600; }
.segmented.compact { margin-bottom: 14px; }
.folder-upload { min-height: 150px; display: grid; place-content: center; justify-items: center; gap: 7px; margin-top: 18px; color: var(--teal); background: #f8fcfd; border: 1px dashed #88c4d2; border-radius: 8px; cursor: pointer; }
.folder-upload strong { color: #4d6063; font-size: 14px; }
.folder-upload span { color: var(--faint); font-size: 11px; }
.course-file-picker { min-height: 126px; display: grid; place-content: center; justify-items: center; gap: 7px; color: var(--teal); background: #f8fcfd; border: 1px dashed #88c4d2; border-radius: 8px; cursor: pointer; }
.course-file-picker:hover { background: #f1f9fa; border-color: var(--teal); }
.course-file-picker.dragging { color: var(--teal-dark); background: #e6f4f8; border-color: var(--teal); box-shadow: inset 0 0 0 1px var(--teal); }
.course-file-picker.busy { cursor: wait; opacity: .72; }
.course-file-picker strong { color: #4d6063; font-size: 14px; }
.course-file-picker span { max-width: 620px; color: var(--faint); font-size: 11px; text-align: center; }
.selected-file-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.selected-file-list span, .selected-file-list em { min-width: 0; display: inline-flex; align-items: center; gap: 5px; max-width: 240px; padding: 5px 8px; overflow: hidden; color: #5d5d56; background: #f2f1eb; border-radius: 5px; font-size: 10px; font-style: normal; text-overflow: ellipsis; white-space: nowrap; }
.selected-file-list em { color: var(--teal-dark); background: var(--teal-soft); }
.course-upload-layout { display: grid; grid-template-columns: minmax(0,2fr) minmax(220px,1fr); gap: 16px; align-items: start; }
.course-upload-picker-column { min-width: 0; padding-top: 30px; }
.course-thumbnail-field { min-width: 0; }
.course-thumbnail-heading { min-height: 30px; display: flex; align-items: center; justify-content: space-between; color: #55554e; font-size: 13px; font-weight: 600; }
.course-thumbnail-heading .icon-button { width: 28px; height: 28px; }
.course-thumbnail-field .course-thumbnail-preview { width: 100%; height: 126px; min-height: 126px; aspect-ratio: auto; }
.course-description-field { position: relative; display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.course-description-field > div { display: flex; align-items: center; justify-content: space-between; color: #55554e; font-size: 14px; font-weight: 500; }
.course-description-field textarea { min-height: 86px; padding-bottom: 23px; }
.course-description-field > small { position: absolute; right: 9px; bottom: 8px; color: var(--faint); font-size: 10px; }
.text-action { display: inline-flex; align-items: center; gap: 5px; padding: 3px 0; color: var(--teal); background: transparent; border: 0; font-size: 11px; }
.text-action:disabled { color: var(--faint); cursor: not-allowed; }
.new-course-description { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; color: #55554e; font-size: 14px; font-weight: 500; }
.course-ai-layout { display: grid; grid-template-columns: minmax(280px,.85fr) minmax(0,1.3fr); gap: 18px; align-items: stretch; }
.course-thumbnail-preview { min-height: 185px; aspect-ratio: 1200 / 630; display: grid; place-items: center; overflow: hidden; color: #6b8d94; background: #e9f3f5; border: 1px solid #cfe3e8; border-radius: 8px; }
.course-thumbnail-preview img { width: 100%; height: 100%; object-fit: cover; }
.course-thumbnail-preview > div { display: grid; justify-items: center; gap: 8px; font-size: 11px; }
.course-ai-copy { min-width: 0; display: flex; flex-direction: column; }
.course-ai-copy label { display: flex; flex: 1; flex-direction: column; gap: 8px; color: #55554e; font-size: 14px; font-weight: 500; }
.course-ai-copy textarea { flex: 1; min-height: 118px; }
.course-ai-actions { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 10px; }
.exam-mode-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; margin-bottom: 12px; }
.exam-mode-choice > button { min-height: 66px; display: grid; grid-template-columns: 24px 1fr; align-items: center; gap: 10px; padding: 11px 13px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.exam-mode-choice > button.active { color: var(--teal); background: var(--teal-soft); border-color: #abd6df; box-shadow: inset 3px 0 var(--teal); }
.exam-mode-choice strong, .exam-mode-choice small { display: block; }
.exam-mode-choice strong { color: var(--ink); font-size: 12px; }
.exam-mode-choice small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.section-divider { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 20px 0 12px; border-bottom: 1px solid var(--line); }
.section-divider span { color: #53534c; font-size: 14px; font-weight: 600; }
.section-divider strong, .section-divider small { color: var(--faint); font-size: 11px; font-weight: 500; }
.admin-chapter-list { border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.admin-chapter-list > div { min-height: 58px; display: grid; grid-template-columns: 25px minmax(0,1fr) auto; align-items: center; gap: 10px; padding: 8px 11px; border-bottom: 1px solid var(--line); }
.admin-chapter-list > div:last-child { border-bottom: 0; }
.admin-chapter-list > div > span { width: 23px; height: 23px; display: grid; place-items: center; color: var(--muted); background: var(--surface-soft); border-radius: 50%; font-size: 11px; }
.admin-chapter-list strong, .admin-chapter-list small { display: block; }
.admin-chapter-list strong { font-size: 12px; }
.admin-chapter-list small { margin-top: 3px; color: var(--faint); font-size: 10px; }
.chapter-name-editor input { width: 100%; min-height: 29px; padding: 4px 7px; font-size: 12px; }
.chapter-name-editor small { padding-left: 2px; }
.chapter-order-actions { display: flex; align-items: center; gap: 2px; }
.chapter-order-actions .icon-button { width: 28px; height: 28px; }
.chapter-editor { margin-top: 14px; padding: 15px; background: #faf9f5; border: 1px solid var(--line); border-radius: 8px; }
.chapter-editor > .outline-button { margin-top: 13px; }
.course-exam-editor { padding: 16px; background: #f8fcfd; border: 1px solid #cfe5ea; border-radius: 8px; }
.exam-goal-field { display: flex; flex-direction: column; gap: 8px; color: #55554e; font-size: 14px; font-weight: 500; }
.exam-goal-field small { color: var(--faint); font-size: 11px; font-weight: 400; }
.exam-blueprint-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 18px 0 10px; }
.exam-blueprint-heading strong, .exam-blueprint-heading small { display: block; }
.exam-blueprint-heading strong { color: #53534c; font-size: 13px; }
.exam-blueprint-heading small { margin-top: 4px; color: var(--faint); font-size: 10px; }
.exam-blueprint-heading > span { flex: none; padding: 5px 8px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 6px; font-size: 11px; font-weight: 600; }
.course-exam-config { display: grid; grid-template-columns: minmax(0,1fr) auto auto; align-items: center; gap: 16px; padding: 14px; background: #f8fcfd; border: 1px solid #d3e8ed; border-radius: 8px; }
.course-exam-config > div:first-child { min-width: 0; display: flex; align-items: center; gap: 10px; color: var(--teal); }
.course-exam-config strong, .course-exam-config span { display: block; }
.course-exam-config strong { color: var(--ink); font-size: 13px; }
.course-exam-config span { margin-top: 4px; overflow: hidden; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.exam-config-meta { display: flex; align-items: center; gap: 8px; }
.exam-config-meta > span:not(.status-pill) { padding: 5px 7px; background: #fff; border-radius: 5px; }
.plan-course-picker { display: grid; grid-template-columns: minmax(0,1.45fr) minmax(230px,.55fr); overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.plan-course-library { min-width: 0; border-right: 1px solid var(--line); }
.plan-course-toolbar { min-height: 54px; display: grid; grid-template-columns: minmax(0,1fr) 150px; align-items: center; gap: 8px; padding: 8px; background: #faf9f5; border-bottom: 1px solid var(--line); }
.plan-course-toolbar .search-box, .plan-course-toolbar .filter-control { width: 100%; }
.plan-course-results { height: 260px; overflow-y: auto; padding: 5px 8px; }
.plan-course-option { min-height: 52px; display: grid; grid-template-columns: 16px 48px minmax(0,1fr); align-items: center; gap: 9px; padding: 7px 5px; border-bottom: 1px solid #efede7; cursor: pointer; }
.plan-course-option:last-child { border-bottom: 0; }
.plan-course-option:hover { background: #faf9f5; }
.plan-course-option > span { min-width: 0; }
.plan-course-option strong, .plan-course-option small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-course-option strong { color: var(--ink); font-size: 12px; }
.plan-course-option small { margin-top: 3px; color: var(--faint); font-size: 10px; }
.selected-plan-courses { min-width: 0; background: #faf9f5; }
.selected-plan-courses > header { height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 0 12px; border-bottom: 1px solid var(--line); }
.selected-plan-courses > header strong { font-size: 12px; }
.selected-plan-courses > header span { min-width: 22px; padding: 3px 6px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 10px; font-size: 10px; text-align: center; }
.selected-plan-courses > div { height: 260px; overflow-y: auto; padding: 5px 8px; }
.selected-plan-courses article { min-height: 49px; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 6px 4px 6px 7px; border-bottom: 1px solid #e9e7df; }
.selected-plan-courses article > div { min-width: 0; }
.selected-plan-courses article strong, .selected-plan-courses article small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selected-plan-courses article strong { font-size: 11px; }
.selected-plan-courses article small { margin-top: 3px; color: var(--faint); font-size: 10px; }
.plan-picker-empty { min-height: 90px; display: grid; place-items: center; color: var(--faint); font-size: 11px; }
.audience-mode-choice { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.audience-mode-choice > button { min-height: 68px; display: grid; grid-template-columns: 22px minmax(0,1fr); align-items: center; gap: 10px; padding: 11px 13px; color: var(--muted); background: #fff; border: 1px solid var(--line); border-radius: 8px; text-align: left; }
.audience-mode-choice > button.active { color: var(--teal); background: var(--teal-soft); border-color: #abd6df; }
.audience-mode-choice strong, .audience-mode-choice small { display: block; }
.audience-mode-choice strong { color: var(--ink); font-size: 12px; }
.audience-mode-choice small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.plan-audience-rows { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.plan-audience-rows > div { min-height: 58px; display: grid; grid-template-columns: 94px minmax(0,1fr); align-items: center; gap: 12px; padding: 10px 13px; border-bottom: 1px solid var(--line); }
.plan-audience-rows > div:last-child { border-bottom: 0; }
.plan-audience-rows > div > strong { color: #55554e; font-size: 12px; }
.plan-audience-rows > div > div { display: flex; align-items: center; flex-wrap: wrap; gap: 7px 16px; }
.audience-empty { color: var(--faint); font-size: 11px; }
.selector-columns { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.selector-columns > div { min-height: 110px; padding: 13px; border: 1px solid var(--line); border-radius: 8px; }
.selector-columns > div > strong { display: block; margin-bottom: 9px; color: #55554e; font-size: 12px; }
.check-row { min-height: 31px; display: flex; align-items: center; gap: 8px; color: #67675f; font-size: 12px; }
input[type='checkbox'], input[type='radio'] { width: 15px; height: 15px; min-height: 0; padding: 0; accent-color: var(--teal); }
.rule-list { display: grid; gap: 10px; }
.rule-block { padding: 13px; background: #faf9f5; border: 1px solid var(--line); border-radius: 8px; }
.rule-block > header { min-height: 30px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 9px; }
.rule-block > header strong { font-size: 12px; }
.publish-choice { display: flex !important; flex-direction: row !important; align-items: center; gap: 9px !important; margin-top: 18px; padding: 12px; background: #f8fcfd; border: 1px solid #d5e9ee; border-radius: 8px; }
.publish-choice span strong, .publish-choice span small { display: block; }
.publish-choice span strong { font-size: 12px; }
.publish-choice span small { margin-top: 3px; color: var(--faint); font-size: 10px; }
.question-editor-list { display: grid; gap: 12px; }
.exam-blueprint { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.exam-blueprint label { display: grid; grid-template-columns: minmax(64px,1fr) 56px 16px 56px 16px; align-items: center; gap: 6px; min-height: 54px; padding: 9px 11px; background: #faf9f5; border: 1px solid var(--line); border-radius: 8px; font-size: 12px; }
.exam-blueprint input { min-height: 34px; padding: 6px 8px; text-align: center; }
.exam-blueprint small { color: var(--faint); font-size: 10px; }
.exam-score-grid { margin-top: 15px; }
.exam-total-field { min-height: 62px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 5px; padding: 10px 12px; background: var(--teal-soft); border: 1px solid #cce4ea; border-radius: 8px; }
.exam-total-field span { color: #55554e; font-size: 13px; font-weight: 500; }
.exam-total-field strong { color: var(--teal-dark); font-size: 22px; }
.exam-total-field small { color: var(--teal-dark); font-size: 11px; }
.exam-duration-row { display: grid; grid-template-columns: minmax(220px,1fr) 2fr; gap: 15px; margin-top: 15px; }
.exam-duration-row label { display: flex; flex-direction: column; gap: 8px; color: #55554e; font-size: 14px; font-weight: 500; }
.exam-duration-row small { color: var(--faint); font-size: 10px; font-weight: 400; }
.ai-bank-status { min-height: 62px; display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-top: 18px; padding: 12px 14px; background: var(--teal-soft); border: 1px solid #cce4ea; border-radius: 8px; }
.ai-bank-status > div { display: flex; align-items: center; gap: 10px; color: var(--teal); }
.ai-bank-status strong, .ai-bank-status small { display: block; }
.ai-bank-status strong { color: var(--ink); font-size: 12px; }
.ai-bank-status small { margin-top: 4px; color: var(--muted); font-size: 10px; }
.ai-bank-actions { display: flex; align-items: center; gap: 8px; }
.category-modal { width: min(800px, calc(100vw - 36px)); }
.category-layout { display: grid; grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); gap: 18px; }
.category-list { overflow: hidden; border: 1px solid var(--line); border-radius: 8px; }
.category-list > div { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.category-list > div:last-child { border-bottom: 0; }
.category-list > div > div:last-child { display: flex; gap: 3px; }
.category-list strong, .category-list span { display: block; }
.category-list strong { font-size: 12px; }
.category-list span { margin-top: 4px; color: var(--faint); font-size: 10px; }
.category-editor { align-self: start; padding: 15px; background: #f8f7f3; border: 1px solid var(--line); border-radius: 8px; }
.category-editor h3 { margin: 0 0 14px; font-size: 14px; }
.category-editor label { display: flex; flex-direction: column; gap: 7px; margin-bottom: 12px; color: #55554e; font-size: 12px; }
.category-editor > div { display: flex; justify-content: flex-end; gap: 8px; }
.question-bank-modal { width: min(900px, calc(100vw - 36px)); }
.question-bank-list { display: grid; gap: 10px; }
.question-bank-list article { padding: 15px; background: #faf9f5; border: 1px solid var(--line); border-radius: 8px; }
.question-bank-heading { display: grid; grid-template-columns: 26px minmax(0,1fr) auto; align-items: start; gap: 10px; }
.question-bank-heading > span { width: 24px; height: 24px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 5px; font-size: 11px; }
.question-bank-heading small, .question-bank-heading strong { display: block; }
.question-bank-heading small { color: var(--teal); font-size: 10px; }
.question-bank-heading strong { margin-top: 4px; font-size: 13px; line-height: 1.55; }
.question-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; margin: 12px 0 0 36px; }
.question-options span { padding: 7px 9px; color: #64645d; background: #fff; border: 1px solid #e6e4dd; border-radius: 6px; font-size: 11px; }
.question-options span.correct { color: var(--green); background: var(--green-soft); border-color: #bfe0cf; }
.question-answer { display: grid; grid-template-columns: 62px 1fr; gap: 8px; margin: 10px 0 0 36px; padding: 9px 10px; color: #527064; background: var(--green-soft); border-radius: 6px; font-size: 11px; line-height: 1.6; }
.status-pill.disabled { color: #77776e; background: #efeee8; }
.question-editor { padding: 14px; background: #faf9f5; border: 1px solid var(--line); border-radius: 8px; }
.question-editor > header { display: grid; grid-template-columns: 1fr 110px 90px 34px; align-items: center; gap: 9px; margin-bottom: 10px; }
.question-editor > header strong { font-size: 12px; }
.question-editor > header select, .question-editor > header input { min-height: 34px; padding: 6px 8px; font-size: 11px; }
.question-editor > header label { display: grid; grid-template-columns: 28px 1fr; align-items: center; color: var(--muted); font-size: 10px; }
.option-editor { display: grid; gap: 7px; margin-top: 10px; }
.option-editor label { display: grid; grid-template-columns: 17px 1fr; align-items: center; gap: 7px; }
.option-editor label > input:last-child { min-height: 35px; padding: 7px 9px; font-size: 11px; }

.player-modal { width: min(1080px, calc(100vw - 36px)); }
.player-layout { min-height: 520px; display: grid; grid-template-columns: minmax(0,1fr) 300px; overflow: hidden; }
.player-stage { min-width: 0; display: grid; place-items: center; background: #091b21; }
.player-stage video { width: 100%; height: 100%; max-height: 560px; display: block; object-fit: contain; }
.audio-stage { width: 100%; height: 100%; display: grid; place-content: center; justify-items: center; gap: 13px; color: #fff; background: #0b2a33; }
.audio-stage h3 { margin: 0; font-size: 17px; }
.audio-stage audio { width: min(440px,80%); margin-top: 12px; }
.text-stage { align-self: stretch; width: 100%; overflow-y: auto; padding: 55px 60px; color: #3f3f39; background: #fff; }
.text-stage > span { color: var(--teal); font-size: 11px; font-weight: 700; }
.text-stage h2 { margin: 9px 0 22px; font-size: 22px; }
.text-stage p { white-space: pre-line; color: #65655e; font-size: 14px; line-height: 2; }
.text-stage .primary-button { margin-top: 20px; }
.chapter-sidebar { overflow-y: auto; background: #fbfaf7; border-left: 1px solid var(--line); }
.course-progress-line { padding: 17px 15px; border-bottom: 1px solid var(--line); }
.course-progress-line > span, .course-progress-line > strong { display: inline-block; margin-bottom: 8px; font-size: 11px; }
.course-progress-line > strong { float: right; color: var(--teal); }
.chapter-item { width: 100%; min-height: 61px; display: grid; grid-template-columns: 26px 1fr 15px; align-items: start; gap: 9px; padding: 9px 12px; color: inherit; background: transparent; border: 0; border-bottom: 1px solid #efede7; text-align: left; }
.chapter-item:hover, .chapter-item.active { background: var(--teal-soft); }
.chapter-index { width: 24px; height: 24px; display: grid; place-items: center; color: var(--muted); background: #ecebe5; border-radius: 50%; font-size: 11px; line-height: 1; }
.chapter-index.done { color: var(--green); background: var(--green-soft); }
.chapter-item strong, .chapter-item span { display: block; }
.chapter-item .chapter-index { display: grid; }
.chapter-item > div { min-width: 0; padding-top: 2px; }
.chapter-item > svg { margin-top: 5px; }
.chapter-item strong { font-size: 11px; }
.chapter-item div span { margin-top: 4px; color: var(--faint); font-size: 10px; }
.player-exam-card { min-height: 66px; display: grid; grid-template-columns: 25px 1fr auto; align-items: center; gap: 9px; margin: 10px; padding: 11px; color: var(--faint); background: #f0efe9; border-radius: 8px; }
.player-exam-card.ready { color: var(--teal); background: var(--teal-soft); }
.player-exam-card strong, .player-exam-card span { display: block; }
.player-exam-card strong { color: var(--ink); font-size: 11px; }
.player-exam-card span { margin-top: 3px; font-size: 10px; }
.player-exam-card > svg:last-child { color: var(--green); }
.player-modal > footer { justify-content: space-between; }
.player-modal > footer > span { color: var(--muted); font-size: 12px; }
.course-player-page { min-width: 0; }
.course-player-heading { min-height: 58px; display: grid; grid-template-columns: auto minmax(0,1fr) 190px; align-items: center; gap: 18px; margin-bottom: 14px; }
.course-player-heading h1 { margin: 2px 0 0; overflow: hidden; color: #3d3929; font-size: 20px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.player-back-button { align-self: center; padding: 6px 4px; white-space: nowrap; }
.player-heading-progress { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 6px 10px; }
.player-heading-progress > span { color: var(--muted); font-size: 12px; }
.player-heading-progress > strong { color: var(--teal); font-size: 14px; text-align: right; }
.player-heading-progress .progress-line { grid-column: 1 / -1; height: 5px; }
.course-player-grid { display: grid; grid-template-columns: minmax(0,1fr) 304px; align-items: start; gap: 14px; }
.course-player-main { min-width: 0; }
.course-player-stage { width: 100%; max-width: 100%; height: clamp(360px, calc(100vh - 300px), 560px); min-width: 0; min-height: 360px; overflow: hidden; border-radius: 8px; }
.course-player-stage video { min-width: 0; max-width: 100%; }
.video-player-shell { position: relative; width: 100%; height: 100%; min-width: 0; display: grid; grid-template-rows: minmax(0,1fr) 48px; overflow: hidden; background: #091b21; }
.video-player-shell video { width: 100%; height: 100%; display: block; object-fit: contain; }
.video-control-bar { min-width: 0; display: flex; align-items: center; gap: 10px; padding: 7px 11px; color: #fff; background: #10252b; border-top: 1px solid rgba(255,255,255,.1); }
.video-icon-control { width: 32px; height: 32px; flex: none; display: grid; place-items: center; padding: 0; color: #fff; background: transparent; border: 0; border-radius: 6px; }
.video-icon-control:hover { background: rgba(255,255,255,.1); }
.video-time { flex: none; color: rgba(255,255,255,.78); font-size: 12px; font-variant-numeric: tabular-nums; }
.video-readonly-progress { height: 5px; min-width: 50px; flex: 1; overflow: hidden; background: rgba(255,255,255,.2); border-radius: 3px; pointer-events: none; }
.video-readonly-progress span { width: 0; height: 100%; display: block; background: #2ca7c7; }
.video-rate-control { flex: none; }
.video-rate-control select { width: 64px; min-height: 32px; padding: 4px 24px 4px 8px; color: #fff; background-color: #17353d; border: 1px solid rgba(255,255,255,.18); border-radius: 6px; font-size: 12px; }
.video-player-shell:fullscreen,
.video-player-shell:-webkit-full-screen,
.video-player-shell.fullscreen-active { width: 100vw; height: 100vh; max-width: none; max-height: none; grid-template-rows: minmax(0,1fr) 56px; border-radius: 0; }
.video-player-shell:fullscreen video,
.video-player-shell:-webkit-full-screen video,
.video-player-shell.fullscreen-active video { width: 100%; height: 100%; max-width: none; max-height: none; }
.video-player-shell:fullscreen .video-control-bar,
.video-player-shell:-webkit-full-screen .video-control-bar,
.video-player-shell.fullscreen-active .video-control-bar { padding: 10px 16px; }
.course-player-stage .text-stage { height: 100%; padding: 42px 48px; }
.inline-material-stage { width: 100%; height: 100%; min-width: 0; min-height: 0; display: grid; grid-template-rows: minmax(0,1fr) 48px; color: #45443e; background: #f7f7f3; }
.inline-material-viewport { min-width: 0; min-height: 0; overflow: auto; display: flex; align-items: flex-start; justify-content: center; padding: 12px; }
.inline-material-page { display: block; max-width: 100%; height: auto; background: #fff; border: 1px solid #e5e3dc; }
.inline-material-state { display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.inline-material-state.error { color: var(--danger); }
.inline-material-footer { min-width: 0; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 12px; padding: 6px 10px 6px 14px; background: #fff; border-top: 1px solid var(--line); }
.inline-material-footer > span { min-width: 0; overflow: hidden; color: var(--muted); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.inline-material-pagination { display: flex; align-items: center; gap: 8px; }
.inline-material-pagination strong { min-width: 52px; color: var(--muted); font-size: 12px; font-weight: 500; text-align: center; font-variant-numeric: tabular-nums; }
.inline-material-pagination .icon-button { width: 30px; height: 30px; }
.player-empty { display: grid; place-items: center; gap: 10px; color: rgba(255,255,255,.65); font-size: 13px; }
.course-player-info { margin-top: 18px; padding: 16px 2px 0; border-top: 1px solid var(--line); }
.course-player-info > header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.course-player-info h2 { margin: 2px 0 0; color: #3d3929; font-size: 16px; font-weight: 600; }
.course-player-info > p { max-width: 920px; margin: 14px 0 0; color: var(--muted); font-size: 14px; line-height: 1.8; }
.course-info-meta { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 16px; }
.course-info-meta span { color: #56554f; font-size: 14px; }
.course-info-meta strong { margin-right: 7px; color: var(--faint); font-size: 12px; font-weight: 500; }
.course-player-chapters { position: sticky; top: 18px; max-height: calc(100vh - 48px); display: flex; flex-direction: column; overflow: hidden; background: #fff; border: 1px solid var(--line); border-radius: 8px; }
.course-player-chapters > header { min-height: 52px; display: flex; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.course-player-chapters > header strong,
.course-player-chapters > header span { display: block; }
.course-player-chapters > header strong { color: #3d3929; font-size: 14px; font-weight: 600; }
.course-player-chapters > header span { margin-top: 3px; color: var(--faint); font-size: 12px; }
.course-player-chapters .course-progress-line { flex: none; }
.chapter-list { min-height: 0; overflow-y: auto; }
.course-player-chapters .player-exam-card { flex: none; }
.material-preview-modal { width: min(980px, calc(100vw - 36px)); height: min(780px, calc(100vh - 36px)); }
.material-preview-body { min-height: 0; display: grid; place-items: stretch; padding: 0; background: #f7f7f3; }
.material-preview-loading { display: grid; place-content: center; justify-items: center; gap: 10px; color: var(--muted); font-size: 13px; }
.material-preview-image { max-width: 100%; max-height: 100%; align-self: center; justify-self: center; object-fit: contain; }
.material-preview-page { max-width: 100%; max-height: 100%; align-self: center; justify-self: center; object-fit: contain; background: #fff; border: 1px solid #e5e3dc; }
.material-preview-text { min-height: 100%; margin: 0; padding: 26px 30px 42px; overflow: auto; color: #45443e; background: #fff; font-family: inherit; font-size: 14px; line-height: 1.85; white-space: pre-wrap; word-break: break-word; }
.material-preview-modal > .material-preview-footer { justify-content: space-between; }
.material-preview-pagination { display: flex; align-items: center; gap: 9px; }
.material-preview-pagination span { min-width: 54px; color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.exam-modal { width: min(780px, calc(100vw - 36px)); }
.exam-header-actions { display: flex; align-items: center; gap: 10px; }
.exam-timer { min-width: 78px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 10px; color: var(--teal-dark); background: var(--teal-soft); border-radius: 7px; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.exam-paper { display: grid; gap: 18px; }
.exam-paper > article { padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.question-title { display: grid; grid-template-columns: 27px 1fr; gap: 10px; margin-bottom: 11px; }
.question-title > span { width: 25px; height: 25px; display: grid; place-items: center; color: #fff; background: var(--teal); border-radius: 6px; font-size: 12px; }
.question-title strong, .question-title small { display: block; }
.question-title strong { font-size: 13px; line-height: 1.6; }
.question-title small { margin-top: 4px; color: var(--faint); font-size: 10px; }
.answer-row { min-height: 39px; display: flex; align-items: center; gap: 9px; margin: 6px 0 0 37px; padding: 8px 10px; color: #65655e; background: #faf9f5; border: 1px solid transparent; border-radius: 7px; font-size: 12px; }
.answer-row.selected { color: var(--teal-dark); background: var(--teal-soft); border-color: #c2e1e8; }
.short-answer-input { width: calc(100% - 37px); min-height: 130px; margin: 10px 0 0 37px; resize: vertical; }
.exam-result { min-height: 420px; display: grid; place-content: center; justify-items: center; text-align: center; }
.result-ring { width: 112px; height: 112px; display: grid; place-content: center; color: var(--red); background: var(--red-soft); border: 6px solid #f1d4d0; border-radius: 50%; }
.exam-result.passed .result-ring { color: var(--green); background: var(--green-soft); border-color: #c9e5d7; }
.result-ring strong { font-size: 34px; line-height: 1; }
.result-ring span { margin-top: 4px; font-size: 12px; }
.exam-result h2 { margin: 18px 0 7px; font-size: 19px; }
.exam-result p { margin: 0; color: var(--muted); font-size: 12px; }
.exam-result > small { display: block; margin-top: 10px; color: var(--teal-dark); font-size: 11px; }

.toast, .error-toast { position: fixed; z-index: 200; right: 24px; bottom: 24px; display: flex; align-items: center; gap: 8px; max-width: 430px; padding: 11px 14px; border-radius: 8px; box-shadow: 0 12px 35px rgba(53,53,47,.17); font-size: 13px; }
.toast { color: var(--green); background: var(--green-soft); border: 1px solid #b9ddca; }
.error-toast { color: var(--red); background: #fff; border: 1px solid #e8c5c0; }
.error-toast button { display: grid; place-items: center; padding: 0; color: var(--red); background: transparent; border: 0; }

@media (max-width: 1180px) {
  .overview-band { grid-template-columns: 1.7fr repeat(3,.6fr); }
  .overview-stat { padding: 16px; }
  .course-grid { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .exam-card-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .data-panel { overflow-x: auto; }
  .data-head, .data-row { min-width: 980px; }
  .employee-cols { min-width: 860px; }
  .plan-detail { overflow-x: auto; }
  .plan-course-head, .plan-course-row { min-width: 840px; }
  .course-center-heading { align-items: flex-start; flex-direction: column; }
  .course-toolbar { width: 100%; justify-content: flex-start; }
  .course-toolbar .search-box { flex: 1; width: auto; }
}

@media (max-width: 850px) {
  .course-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .exam-card-grid { grid-template-columns: 1fr; }
  .login-page { grid-template-columns: 1fr; }
  .login-brand-panel { min-height: 215px; padding: 30px; }
  .login-brand-copy { margin: auto 0 0; }
  .login-brand-copy p { gap: 4px; }
  .login-brand-copy p > span { font-size: 18px; }
  .login-brand-copy p > strong { font-size: 30px; }
  .login-form-panel { min-height: calc(100vh - 215px); padding: 82px 24px 35px; }
  .sidebar { transform: translateX(calc(-100% - 20px)); box-shadow: 15px 0 40px rgba(53,53,47,.2); }
  .sidebar.open { transform: translateX(0); }
  .main-area { width: 100%; margin-left: 0; }
  .mobile-only { display: inline-grid !important; }
  .page-content { padding: 58px 19px 50px; }
  .overview-band { grid-template-columns: repeat(3,1fr); }
  .overview-main { grid-column: 1/-1; border-right: 0; border-bottom: 1px solid #cce5eb; }
  .content-grid { grid-template-columns: 1fr; }
  .continue-panel { display: none; }
  .player-layout { min-height: 0; grid-template-columns: 1fr; overflow-y: auto; }
  .player-stage { min-height: 360px; }
  .chapter-sidebar { max-height: 280px; border-top: 1px solid var(--line); border-left: 0; }
  .course-player-heading { grid-template-columns: auto minmax(0,1fr); }
  .player-heading-progress { grid-column: 1 / -1; }
  .course-player-grid { grid-template-columns: minmax(0,1fr); }
  .course-player-stage { height: auto; min-height: 0; aspect-ratio: 16 / 9; }
  .video-control-bar { gap: 7px; padding: 6px 8px; }
  .video-time { display: none; }
  .inline-material-footer { grid-template-columns: 1fr; }
  .inline-material-footer > span { display: none; }
  .inline-material-pagination { grid-column: 1; justify-self: center; }
  .course-player-chapters { position: static; max-height: 440px; }
  .plan-row-large { grid-template-columns: 42px 1fr; }
  .plan-progress-block { grid-column: 2; }
  .learning-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .learning-stat-grid > div:nth-child(2) { border-right: 0; }
  .learning-stat-grid > div:nth-child(-n+2) { border-bottom: 1px solid var(--line); }
  .home-summary-band { grid-template-columns: repeat(3,1fr); }
  .home-summary-band > div:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #cde3e8; }
  .elective-summary-band > div:first-child { border-color: #deddd5; }
  .home-course-strip { grid-template-columns: 1fr; }
  .course-ai-layout { grid-template-columns: 1fr; }
  .admin-course-toolbar { align-items: stretch; flex-direction: column; }
  .admin-course-filters { width: 100%; }
  .admin-course-filters .search-box { flex: 1; width: auto; }
  .course-admin-workspace { grid-template-columns: 1fr; }
  .course-category-nav > nav { max-height: 240px; }
  .course-admin-list-header .search-box { flex: 1; width: auto; }
  .course-basic-grid { grid-template-columns: 2fr 1fr; }
  .course-basic-grid > label:first-child { grid-column: 1 / -1; }
  .course-upload-layout { grid-template-columns: 1fr; }
  .course-upload-picker-column { padding-top: 0; }
  .course-thumbnail-preview { width: min(100%, 520px); }
}

@media (max-width: 560px) {
  .course-basic-grid { grid-template-columns: 1fr; }
  .course-basic-grid > label:first-child { grid-column: auto; }
  .login-brand-panel { min-height: 190px; padding: 23px; }
  .login-brand-copy p { display: flex; }
  .login-brand-copy p > span { font-size: 16px; }
  .login-brand-copy p > strong { font-size: 25px; }
  .login-form-panel { min-height: calc(100vh - 190px); align-items: start; padding-top: 78px; }
  .login-title { margin-bottom: 30px; }
  .page-heading, .row-heading { min-height: 0; flex-direction: column; align-items: stretch; gap: 15px; }
  .page-heading h1 { font-size: 23px; }
  .search-box { width: 100%; }
  .course-toolbar { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); }
  .course-toolbar .search-box { grid-column: 1 / -1; }
  .admin-course-filters { display: grid; grid-template-columns: 1fr; }
  .admin-course-filters .search-box { width: 100%; }
  .admin-course-filters .filter-control { width: 100%; }
  .course-admin-list-header { align-items: stretch; flex-direction: column; }
  .course-admin-list-header > div:last-child { width: 100%; }
  .course-admin-list-header .search-box { min-width: 0; }
  .category-menu-actions { opacity: 1; }
  .filter-control { min-width: 0; }
  .filter-control select { width: 100%; min-width: 0; }
  .heading-actions { width: 100%; }
  .heading-actions > button { flex: 1; }
  .overview-band { grid-template-columns: repeat(3,1fr); }
  .overview-main { padding: 20px; gap: 15px; }
  .progress-ring { width: 74px; height: 74px; }
  .progress-ring span { font-size: 21px; }
  .overview-main strong { font-size: 14px; }
  .overview-main p { display: none; }
  .overview-stat { padding: 14px 11px; }
  .overview-stat strong { font-size: 20px; }
  .task-row { grid-template-columns: 8px 1fr 36px 15px; }
  .task-row .mini-progress, .task-row .due-text { display: none; }
  .course-grid { grid-template-columns: 1fr; }
  .plan-row-large { grid-template-columns: 36px 1fr; padding: 16px; }
  .plan-state-icon { width: 36px; height: 36px; }
  .plan-title-line { align-items: flex-start; flex-direction: column; gap: 6px; }
  .plan-progress-block { grid-column: 1/-1; }
  .plan-detail { overflow: hidden; }
  .plan-detail-header { grid-template-columns: 36px 1fr 55px; padding: 14px; }
  .plan-course-head { display: none; }
  .plan-course-row { min-width: 0; grid-template-columns: 1fr 88px; gap: 10px; padding: 14px; }
  .plan-course-row > span:nth-child(2) { grid-column: 1/-1; color: var(--muted); }
  .course-progress-cell { grid-column: 1; }
  .plan-course-row > .status-pill { grid-column: 2; grid-row: 3; justify-self: end; }
  .plan-course-actions { grid-column: 1/-1; justify-content: flex-start; }
  .plan-course-actions button { flex: none; }
  .course-exam-config { grid-template-columns: 1fr; }
  .exam-config-meta { flex-wrap: wrap; }
  .exam-blueprint { grid-template-columns: 1fr; }
  .exam-duration-row { grid-template-columns: 1fr; }
  .monitor-summary { grid-template-columns: repeat(2,1fr); }
  .monitor-summary > div { min-height: 76px; border-bottom: 1px solid var(--line); }
  .monitor-summary > div:nth-child(2n) { border-right: 0; }
  .monitor-summary > div:last-child { grid-column: 1/-1; }
  .modal-backdrop { padding: 0; align-items: end; }
  .modal { width: 100%; max-height: 95vh; border-radius: 14px 14px 0 0; }
  .modal > header { padding: 14px 16px; }
  .modal-body { padding: 16px; }
  .modal > footer { padding: 10px 16px; }
  .form-grid, .form-grid.three, .selector-columns { grid-template-columns: 1fr; }
  .form-grid .span-2, .form-grid .span-3 { grid-column: auto; }
  .plan-course-picker { grid-template-columns: 1fr; }
  .plan-course-library { border-right: 0; border-bottom: 1px solid var(--line); }
  .selected-plan-courses > div { height: 180px; }
  .audience-mode-choice { grid-template-columns: 1fr; }
  .plan-audience-rows > div { grid-template-columns: 1fr; gap: 8px; }
  .employee-group-manager > div { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .employee-group-manager article:nth-child(3n) { border-right: 1px solid var(--line); }
  .employee-group-manager article:nth-child(2n) { border-right: 0; }
  .player-stage { min-height: 230px; }
  .text-stage { padding: 30px 24px; }
  .question-editor > header { grid-template-columns: 1fr 95px; }
  .question-editor > header label, .question-editor > header button { grid-row: 2; }
  .answer-row { margin-left: 0; }
  .short-answer-input { width: 100%; margin-left: 0; }
  .learning-stat-grid > div { min-height: 92px; padding: 14px; }
  .learning-stat-grid strong { font-size: 16px; }
  .home-summary-band { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-summary-band > div { padding: 14px 10px; }
  .home-summary-band > div > strong { font-size: 18px; }
  .summary-progress, .summary-lead { padding: 14px 16px !important; }
  .home-course-item { grid-template-columns: 56px minmax(0,1fr) 31px 14px; gap: 8px; }
  .compact-course-thumbnail { width: 56px; height: 35px; }
  .help-grid { grid-template-columns: 1fr; }
  .exam-mode-choice { grid-template-columns: 1fr; }
  .course-ai-actions { justify-content: flex-start; flex-wrap: wrap; }
  .ai-bank-status { align-items: flex-start; flex-direction: column; }
  .ai-bank-actions { width: 100%; }
  .ai-bank-actions button { flex: 1; }
  .category-layout { grid-template-columns: 1fr; }
  .question-bank-heading { grid-template-columns: 26px minmax(0,1fr); }
  .question-bank-heading > button { grid-column: 2; justify-self: start; }
  .question-options { grid-template-columns: 1fr; margin-left: 0; }
  .question-answer { grid-template-columns: 1fr; margin-left: 0; }
  .toast, .error-toast { right: 12px; bottom: 12px; left: 12px; max-width: none; }
}

/* i深溪统一设计语言：颜色、字号、圆角与阴影均以主系统为基准。 */
body {
  color: var(--ink);
  font-size: 14px;
  line-height: 1.5;
  background: #faf9f5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
  outline: 0;
  box-shadow: 0 0 0 3px rgba(0, 122, 158, .10);
}

input,
textarea,
select {
  min-height: 38px;
  padding: 8px 11px;
  color: #4a4843;
  border-color: #d9d8d2;
  border-radius: 8px;
  font-size: 14px;
}

input::placeholder,
textarea::placeholder { color: #aaa89f; }
input:hover,
textarea:hover,
select:hover { border-color: #b8b6ae; }
input:focus,
textarea:focus,
select:focus { border-color: #007a9e; }

.primary-button,
.outline-button,
.text-button {
  min-height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
}
.primary-button { box-shadow: 0 1px 2px rgba(61, 57, 41, .10); }
.outline-button { border-color: #d9d8d2; box-shadow: 0 1px 2px rgba(61, 57, 41, .05); }
.outline-button.small,
.primary-button.small { min-height: 32px; padding: 0 12px; font-size: 12px; }
.text-button { padding: 0 5px; box-shadow: none; }
.icon-button { width: 32px; height: 32px; border-radius: 7px; }

.sidebar {
  width: 224px;
  color: #3d3929;
  background: #f5f4ee;
  border-color: #eceae2;
  border-radius: 16px;
  box-shadow: none;
}
.sidebar-brand { height: 56px; gap: 10px; padding: 8px 16px; }
.sidebar-brand img { width: 32px; height: 32px; border-radius: 8px; filter: none; }
.sidebar-brand strong { color: #3d3929; font-size: 17px; font-weight: 600; }
.sidebar nav { padding: 0 8px; }
.nav-group + .nav-group { border-color: #d9d8d2; }
.nav-label { padding: 12px 10px 6px; color: #9b9992; font-size: 10px; letter-spacing: .12em; }
.nav-item {
  min-height: 40px;
  gap: 10px;
  margin: 1px 0;
  padding: 9px 11px;
  color: #4a4843;
  border-radius: 8px;
  font-size: 13px;
}
.nav-item.active { background: #007a9e; box-shadow: none; font-weight: 500; }
.sidebar-account { padding: 0 8px 8px; }
.sidebar-user {
  min-height: 48px;
  grid-template-columns: 28px 1fr auto;
  padding: 7px 8px;
  border-color: #d9d8d2;
  border-radius: 8px;
}
.sidebar-user strong { font-size: 12px; font-weight: 500; }
.sidebar-user span { font-size: 10px; }
.avatar { width: 28px; height: 28px; color: #fff; background: #007a9e; font-size: 11px; }
.sidebar-account-menu {
  padding: 5px;
  border-color: #e3e1d9;
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(61, 57, 41, .14);
}
.sidebar-account-menu button { min-height: 38px; padding: 8px 10px; border-radius: 7px; font-size: 13px; }

.main-area { width: calc(100% - 240px); margin-left: 240px; }
.page-content { width: min(1440px, 100%); padding: 24px 28px 40px; }
.page-heading { min-height: 50px; align-items: flex-end; margin-bottom: 14px; }
.page-heading h1 { margin: 0; color: #3d3929; font-size: 20px; line-height: 1.3; font-weight: 600; }
.page-heading p { margin-top: 5px; color: #6b6857; font-size: 12px; }
.compact-heading,
.home-heading { min-height: 50px; }
.learning-page-heading { margin-bottom: 20px; }
.eyebrow { display: none; }

.search-box {
  min-height: 36px;
  padding: 0 10px;
  border-color: #d9d8d2;
  border-radius: 8px;
}
.search-box:focus-within { border-color: #79bfd1; box-shadow: 0 0 0 3px rgba(0, 122, 158, .09); }
.search-box input { font-size: 13px; box-shadow: none; }
.filter-control { min-height: 36px; padding: 0 8px 0 10px; border-color: #d9d8d2; font-size: 12px; }
.filter-control select { min-height: 34px; font-size: 13px; }

.panel,
.course-card {
  border-color: #e3e1d9;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(61, 57, 41, .05);
}
.panel-heading { min-height: 58px; padding: 12px 16px; border-color: #e8e6de; }
.panel-heading h2 { font-size: 16px; font-weight: 600; }
.panel-heading p { font-size: 11px; }
.course-card:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(61, 57, 41, .09); }
.course-card h3 { font-size: 13px; font-weight: 600; }
.course-card p { height: 18px; font-size: 11px; line-height: 1.6; }
.course-card-body .course-kicker { font-size: 10px; }
.course-card-footer strong { font-size: 11px; }
.course-elective-button { border-radius: 7px; box-shadow: 0 1px 3px rgba(61, 57, 41, .12); }
.course-kicker { font-size: 11px; }
.empty-state strong { font-size: 14px; }
.empty-state span { font-size: 12px; }

.overview-band,
.learning-stat-grid,
.home-summary-band,
.plan-detail,
.plan-row-large,
.home-course-item { border-radius: 8px; box-shadow: none; }
.home-section-heading h2 { font-size: 17px; font-weight: 600; }
.section-number { font-size: 11px; }
.learning-stat-grid span,
.learning-stat-grid small,
.home-summary-band > div > span,
.summary-progress > div:last-child span,
.summary-lead span { font-size: 11px; }
.summary-progress > div:last-child strong,
.summary-lead strong,
.continue-heading strong { font-size: 13px; }
.continue-heading span { font-size: 10px; }
.home-course-item > div:nth-child(2) > span { font-size: 10px; }
.home-course-item > div:nth-child(2) > strong { font-size: 12px; }
.home-course-item > b,
.home-empty { font-size: 11px; }

.task-copy strong,
.plan-course-name strong { font-size: 13px; }
.task-copy span,
.due-text,
.plan-detail-header p,
.plan-course-name span { font-size: 11px; }
.task-percent,
.course-progress-cell strong,
.plan-action-link { font-size: 12px; }
.plan-course-head { min-height: 38px; font-size: 11px; }
.plan-course-row { min-height: 54px; font-size: 12px; }
.plan-total-progress span { font-size: 10px; }
.plan-title-line h3 { font-size: 15px; }
.plan-main > p,
.plan-resources button,
.plan-progress-block > span { font-size: 11px; }

.data-head { min-height: 40px; color: #6b6857; background: #f8f8f4; font-size: 11px; }
.data-row { min-height: 56px; border-color: #f0efe9; font-size: 12px; }
.data-row > strong,
.data-row > div > strong { font-size: 13px; }
.resource-name span,
.employee-cell span { font-size: 11px; }
.status-pill { padding: 4px 8px; border-radius: 999px; font-size: 11px; }

/* Management pages follow iShenxi's Task Settings workspace. */
.management-page-heading {
  min-height: 36px;
  align-items: center;
  margin-bottom: 16px;
}
.management-page-heading .eyebrow { display: none; }
.management-page-heading h1 { font-size: 20px; }
.management-page-heading .primary-button { min-height: 34px; padding: 6px 13px; box-shadow: none; }
.management-workspace {
  height: calc(100vh - 120px);
  min-height: 520px;
  display: grid;
  grid-template-columns: minmax(200px,20%) minmax(0,1fr);
  align-items: stretch;
  gap: 16px;
}
.management-subnav,
.management-list-panel {
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: #fff;
  border: 1px solid #e8e6de;
  border-radius: 8px;
  box-shadow: none;
}
.management-subnav > header,
.management-list-toolbar {
  min-height: 44px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 8px 16px;
  border-bottom: 1px solid #eeede7;
}
.management-subnav > header strong {
  color: #8e8b80;
  font-size: 11px;
  font-weight: 650;
}
.management-subnav > header span { margin-top: 2px; color: #9b9992; font-size: 10px; }
.subnav-create-action {
  flex: none;
  padding: 4px 6px;
  color: #007a9e;
  background: transparent;
  border: 0;
  border-radius: 5px;
  font-size: 11px;
  font-weight: 500;
}
.subnav-create-action:hover { color: #006b8b; background: #f3f3ef; }
.management-subnav > nav {
  flex: 1;
  min-height: 0;
  max-height: none;
  overflow-y: auto;
  padding: 8px;
}
.management-list-toolbar h2 { margin: 0; color: #3d3929; font-size: 14px; font-weight: 600; }
.management-list-toolbar > div > span { display: block; margin-top: 2px; color: #9b9992; font-size: 10px; }
.management-list-toolbar .search-box { width: min(280px,32%); min-height: 32px; }
.management-list-toolbar .search-box input { min-height: 30px; padding-top: 5px; padding-bottom: 5px; font-size: 12px; }
.management-list-panel > .data-panel {
  flex: 1;
  min-height: 0;
  overflow: auto;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}
.management-list-panel .data-head {
  position: sticky;
  z-index: 2;
  top: 0;
  min-height: 40px;
  color: #6b6857;
  background: #f8f8f4;
  border-bottom-color: #eeede7;
  font-size: 11px;
}
.management-list-panel .data-row { min-height: 56px; padding-top: 6px; padding-bottom: 6px; border-bottom-color: #f0efe9; }
.management-list-panel .data-row:hover { background: #fafaf7; }
.management-row-actions { align-items: center; justify-content: flex-end; gap: 12px; white-space: nowrap; }
.management-row-action {
  min-width: 0;
  padding: 3px 0;
  color: #007a9e;
  background: transparent;
  border: 0;
  border-radius: 0;
  font-size: 11px;
  font-weight: 500;
}
.management-row-action:hover { color: #00617d; }
.management-row-action.success { color: var(--green); }
.management-row-action.success:hover { color: #176a46; }
.management-row-action.danger { color: #c15f3c; }
.management-row-action.danger:hover { color: #a4422c; }
.management-row-action:disabled { color: #c2c0ba; }

.course-category-nav,
.user-directory-nav { background: #fff; border-color: #e8e6de; border-radius: 8px; }
.course-category-nav > header,
.user-directory-nav > header { height: auto; padding: 8px 16px; border-bottom-color: #eeede7; }
.course-category-nav > nav,
.user-directory-nav > nav { max-height: none; }
.category-menu-row,
.directory-menu-row { border-radius: 7px; }
.category-menu-row:hover,
.directory-menu-row:hover { background: #f6f6f2; }
.category-menu-row.active,
.directory-menu-row.active { color: #007a9e; background: #e6f3f7; }
.category-menu-item,
.directory-menu-item { min-height: 36px; border-radius: 7px; font-size: 12px; }
.category-menu-item:hover,
.directory-menu-item:hover { background: #f6f6f2; }
.category-menu-item.all-courses.active,
.directory-menu-item.all-users.active { color: #007a9e; background: #e6f3f7; }
.category-menu-item.all-courses.active small,
.directory-menu-item.all-users.active small,
.category-menu-row.active .category-menu-item,
.category-menu-row.active .category-menu-item small,
.directory-menu-row.active .directory-menu-item,
.directory-menu-row.active .directory-menu-item small { color: #007a9e; }
.category-menu-row.active .category-menu-item:hover,
.directory-menu-row.active .directory-menu-item:hover { background: transparent; }
.category-menu-actions button,
.directory-menu-actions button { color: #9b9992; }
.category-menu-row.active .category-menu-actions button,
.directory-menu-row.active .directory-menu-actions button { color: #688b94; }
.category-menu-actions button:hover,
.directory-menu-actions button:hover,
.category-menu-row.active .category-menu-actions button:hover,
.directory-menu-row.active .directory-menu-actions button:hover { color: #3d3929; background: rgba(255,255,255,.72); }
.category-menu-actions .danger-icon:hover,
.category-menu-row.active .category-menu-actions .danger-icon:hover,
.directory-menu-actions .danger-icon:hover,
.directory-menu-row.active .directory-menu-actions .danger-icon:hover { color: #c15f3c; }
.directory-section { border-top-color: #eeede7; }
.directory-section > header > span { color: #8e8b80; }
.category-inline-editor { flex: none; background: #fafaf7; border-color: #eeede7; }
.course-admin-main,
.user-management-main { min-width: 0; }
.course-admin-list-header,
.user-list-header { min-height: 44px; margin-bottom: 0; }
.course-admin-main .data-panel,
.user-data-panel { overflow: auto; }

.form-grid > label,
.login-form > label,
.exam-goal-field,
.exam-duration-row label,
.course-ai-copy label { color: #6b6857; font-size: 13px; }
.form-grid label small,
.exam-goal-field small,
.exam-duration-row small { color: #9b9992; font-size: 11px; }
.section-divider { min-height: 42px; margin: 18px 0 12px; border-color: #e8e6de; }
.section-divider span { color: #4a4843; font-size: 13px; }
.section-divider strong,
.section-divider small { font-size: 11px; }
.segmented { background: #f0efe9; border-radius: 8px; }
.segmented button { min-height: 32px; border-radius: 6px; font-size: 12px; }
.segmented button.active { box-shadow: 0 1px 3px rgba(61, 57, 41, .10); }

.modal-backdrop { background: rgba(61, 57, 41, .40); backdrop-filter: blur(2px); }
.modal {
  border-color: #eceae2;
  border-radius: 16px;
  box-shadow: 0 22px 70px rgba(61, 57, 41, .20);
}
.modal > header { min-height: 70px; padding: 14px 20px; border-color: #e8e6de; }
.modal > header h2 { margin: 0; color: #3d3929; font-size: 18px; font-weight: 600; }
.modal > header p { margin-top: 4px; font-size: 11px; }
.modal-body { padding: 20px; }
.modal > footer { min-height: 62px; padding: 12px 20px; background: #faf9f5; border-color: #e8e6de; }

.course-file-picker { border-radius: 8px; }
.course-file-picker strong { font-size: 13px; }
.course-file-picker span { font-size: 11px; }
.course-thumbnail-heading { color: #6b6857; font-size: 13px; }
.course-description-field > div { color: #6b6857; font-size: 13px; }
.course-description-field > small { font-size: 10px; }
.course-thumbnail-preview,
.course-exam-editor,
.admin-chapter-list,
.plan-course-picker,
.category-list,
.category-editor,
.question-bank-list article,
.question-editor,
.rule-block,
.exam-blueprint label { border-radius: 8px; }
.admin-chapter-list > div > span,
.admin-chapter-list small { font-size: 10px; }
.admin-chapter-list strong,
.chapter-name-editor input { font-size: 12px; }
.exam-mode-choice strong { font-size: 12px; }
.exam-mode-choice small { font-size: 10px; }
.exam-blueprint-heading strong { font-size: 13px; }
.exam-blueprint-heading small,
.course-exam-config span { font-size: 10px; }
.exam-blueprint-heading > span,
.exam-blueprint small { font-size: 11px; }
.exam-blueprint label { font-size: 12px; }
.course-exam-config strong { font-size: 13px; }
.plan-course-option strong,
.selector-columns > div > strong,
.rule-block > header strong,
.publish-choice span strong,
.ai-bank-status strong,
.category-list strong,
.category-editor h3 { font-size: 12px; }
.plan-course-option small,
.publish-choice span small,
.ai-bank-status small,
.category-list span { font-size: 10px; }
.check-row,
.category-editor label { font-size: 12px; }
.question-bank-heading small { font-size: 10px; }
.question-bank-heading strong { font-size: 13px; }
.question-options span,
.question-answer { font-size: 11px; }

.chapter-item strong,
.player-exam-card strong { font-size: 12px; }
.chapter-item div span,
.player-exam-card span { font-size: 10px; }
.course-progress-line > span,
.course-progress-line > strong { font-size: 11px; }
.player-modal > footer > span { font-size: 12px; }
.question-title strong { font-size: 13px; }
.question-title small { font-size: 10px; }
.answer-row { font-size: 12px; }
.exam-result p { font-size: 12px; }
.exam-result > small { font-size: 11px; }
.toast,
.error-toast { border-radius: 8px; font-size: 13px; box-shadow: 0 16px 36px rgba(26, 49, 52, .18); }

.login-form-panel { background: #faf9f5; }
.login-title h2 { color: #3d3929; font-size: 24px; font-weight: 700; }
.login-title p { color: #6b6857; font-size: 14px; }
.login-form > label { font-size: 14px; }
.login-button { min-height: 40px; }
.test-accounts,
.test-accounts button { font-size: 11px; }

/* Learning home: compact ranked metrics and two-column work cards. */
.learning-overview-section { padding: 0 0 20px; border-bottom: 0; }
.learning-stat-grid { overflow: hidden; background: #edf7f8; border-color: #cde3e8; }
.learning-stat-grid > div {
  min-width: 0;
  min-height: 76px;
  display: grid;
  grid-template-columns: 22px minmax(0,1fr) auto;
  grid-template-rows: 1fr;
  align-items: center;
  align-content: stretch;
  gap: 10px;
  padding: 11px 15px;
  border-color: #cde3e8;
}
.learning-stat-grid svg { grid-row: auto; align-self: center; color: #007a9e; }
.learning-stat-value { min-width: 0; }
.learning-stat-value > span,
.learning-stat-value > strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.learning-stat-value > span { color: #4f7077; font-size: 13px; font-weight: 500; }
.learning-stat-value > strong { margin-top: 5px; color: #31545b; font-size: 19px; line-height: 1.15; }
.learning-stat-value > strong small { color: #59777d; font-size: 13px; }
.learning-duration-value { display: flex !important; align-items: baseline; gap: 3px; }
.learning-duration-value b { font-size: 19px; font-weight: 700; }
.learning-duration-value small + b { margin-left: 3px; }
.learning-duration-value small { font-size: 11px !important; font-weight: 500; }
.learning-stat-rank { min-width: 52px; padding-left: 11px; border-left: 1px solid #cde3e8; text-align: right; }
.learning-stat-rank > span,
.learning-stat-rank > strong { display: block; white-space: nowrap; }
.learning-stat-rank > span { color: #4f7077; font-size: 13px; font-weight: 500; }
.learning-stat-rank > strong { margin-top: 5px; color: #007a9e; font-size: 19px; line-height: 1.15; font-weight: 700; }
.learning-stat-rank > strong small { margin-left: 2px; color: #59777d; font-size: 13px; font-weight: 500; }

.home-learning-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-items: stretch; gap: 16px; }
.home-learning-card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #fff;
  border: 1px solid #e3e1d9 !important;
  border-radius: 8px;
}
.home-learning-card .home-section-heading { min-height: 30px; margin-bottom: 12px; }
.home-learning-card .home-section-heading h2 { font-size: 16px; }
.home-learning-card .home-section-heading .text-button { font-size: 12px; }
.home-learning-card .home-summary-band {
  min-height: 90px;
  grid-template-columns: minmax(180px,1.2fr) repeat(3,minmax(78px,.6fr));
}
.home-learning-card .home-summary-band > div { min-width: 0; padding: 12px 10px; }
.home-learning-card .home-summary-band > div > span { overflow: hidden; color: #6b6857; font-size: 12px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.home-learning-card .home-summary-band > div > strong { font-size: 18px; }
.home-learning-card .plan-summary-band { background: #f7f7f2; border-color: #deddd5; }
.home-learning-card .plan-summary-band > div { border-color: #deddd5; }
.home-learning-card .summary-progress { gap: 10px; padding-left: 12px !important; }
.home-learning-card .summary-progress > div:last-child { min-width: 0; }
.home-learning-card .summary-progress > div:last-child strong,
.home-learning-card .summary-progress > div:last-child span,
.home-learning-card .summary-lead strong,
.home-learning-card .summary-lead span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-learning-card .progress-ring.compact { width: 52px; height: 52px; }
.home-learning-card .progress-ring.compact::before { inset: 5px; }
.home-learning-card .progress-ring.compact span { font-size: 15px; }
.home-learning-card .summary-lead { gap: 9px; padding-left: 12px !important; }
.home-learning-card .summary-lead > div { min-width: 0; }
.home-learning-card .continue-heading { margin: 16px 0 9px; }
.home-learning-card .continue-heading strong { font-size: 13px; }
.home-learning-card .continue-heading span { font-size: 11px; }
.home-learning-card .home-course-strip { grid-template-columns: 1fr; }
.home-learning-card .home-course-item { min-height: 68px; }
.home-learning-card .home-course-item > div:nth-child(2) > span { font-size: 11px; }
.home-learning-card .home-course-item > div:nth-child(2) > strong { font-size: 13px; }
.home-learning-card .home-course-item > b { font-size: 12px; }
.home-learning-card .home-empty { font-size: 12px; }
.home-learning-card .home-empty { flex: 1; }

@media (max-width: 1200px) {
  .home-learning-grid { grid-template-columns: 1fr; }
}

@media (max-width: 850px) {
  .sidebar { box-shadow: 15px 0 40px rgba(61, 57, 41, .16); }
  .main-area { width: 100%; margin-left: 0; }
  .page-content { padding: 58px 20px 40px; }
  .page-heading { align-items: flex-start; }
  .learning-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .learning-stat-grid > div:nth-child(2) { border-right: 0; }
  .learning-stat-grid > div:nth-child(-n+2) { border-bottom: 1px solid #cde3e8; }
  .employee-stat-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .management-workspace { height: auto; min-height: 0; grid-template-columns: 1fr; }
  .management-subnav > nav { max-height: 330px; }
  .management-list-panel { min-height: 500px; }
}

@media (max-width: 560px) {
  .employee-group-manager > div { grid-template-columns: 1fr; }
  .employee-group-manager article { border-right: 0 !important; }
  .plan-course-toolbar { grid-template-columns: 1fr; }
  .learning-page-heading { margin-bottom: 18px; }
  .page-heading h1 { font-size: 20px; }
  .learning-stat-grid { grid-template-columns: 1fr; }
  .learning-stat-grid > div { min-height: 70px; border-right: 0; border-bottom: 1px solid #cde3e8; }
  .learning-stat-grid > div:last-child { border-bottom: 0; }
  .home-learning-card { padding: 13px; }
  .home-learning-card .home-summary-band { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .home-learning-card .home-summary-band > div:first-child { grid-column: 1 / -1; border-right: 0; border-bottom: 1px solid #cde3e8; }
  .home-learning-card .elective-summary-band > div:first-child { border-bottom-color: #deddd5; }
  .modal { border-radius: 16px 16px 0 0; }
  .course-card h3 { font-size: 14px; }
  .course-card p { font-size: 12px; }
  .employee-stat-grid { grid-template-columns: 1fr; }
  .statistics-drawer { width: 100%; }
  .statistics-drawer > header { padding: 12px 15px; }
  .employee-detail-summary > div { padding: 15px 11px; }
  .employee-detail-section { padding: 0 15px; }
  .management-page-heading { flex-direction: row; align-items: center; gap: 12px; }
  .management-page-heading .primary-button { flex: none; }
  .management-list-toolbar { align-items: stretch; flex-direction: column; padding-top: 11px; padding-bottom: 11px; }
  .management-list-toolbar .search-box { width: 100%; }
  .management-list-panel { min-height: 460px; }
  .user-list-header { align-items: stretch; flex-direction: column; }
  .user-list-header .primary-button { align-self: flex-start; }
  .group-member-picker { grid-template-columns: 1fr; }
  .group-member-row { border-right: 0; }
}

/* Unified typography: keep the same hierarchy across every workspace and viewport. */
body { font-size: var(--font-body); }

.loading-screen,
.nav-item,
.primary-button,
.outline-button,
.text-button,
input,
textarea,
select,
.search-box input,
.filter-control select,
.sidebar-account-menu button,
.top-profile,
.profile-menu button { font-size: var(--font-item-title); }

.primary-button.small,
.outline-button.small,
.segmented button,
.plan-action-link,
.management-row-action,
.text-action { font-size: var(--font-body); }

.page-heading h1,
.management-page-heading h1 { font-size: var(--font-page-title); }

.modal > header h2,
.statistics-drawer > header h2 { font-size: var(--font-modal-title); }

.panel-heading h2,
.home-section-heading h2,
.home-learning-card .home-section-heading h2,
.management-list-toolbar h2,
.course-admin-list-header h2,
.user-list-header h2,
.employee-detail-section > header h3 { font-size: var(--font-section-title); }

.plan-title-line h3 { font-size: var(--font-section-title); }

.course-card h3,
.task-copy strong,
.plan-course-name strong,
.continue-panel h3,
.continue-heading strong,
.home-course-item > div:nth-child(2) > strong,
.home-learning-card .home-course-item > div:nth-child(2) > strong,
.data-row > strong,
.data-row > div > strong,
.employee-stat-card > header strong,
.employee-detail-row-heading strong,
.course-detail-list article strong,
.employee-group-manager > header strong,
.employee-group-manager article strong,
.group-member-row strong,
.folder-upload strong,
.course-file-picker strong,
.admin-chapter-list strong,
.chapter-item strong,
.player-exam-card strong,
.plan-course-option strong,
.selected-plan-courses article strong,
.course-exam-config strong,
.question-bank-heading strong,
.question-title strong { font-size: var(--font-item-title); }

.resource-name strong,
.employee-cell strong,
.exam-mode-choice strong,
.audience-mode-choice strong,
.selected-plan-courses > header strong,
.publish-choice span strong,
.ai-bank-status strong,
.category-list strong,
.category-editor h3 { font-size: var(--font-item-title); }

.data-head,
.management-list-panel .data-head,
.plan-course-head { font-size: var(--font-body); }

.data-row,
.management-list-panel .data-row,
.plan-course-row,
.answer-row,
.check-row,
.category-editor label,
.question-options span,
.question-answer { font-size: var(--font-body); }

.form-grid > label,
.login-form > label,
.exam-goal-field,
.exam-duration-row label,
.course-ai-copy label,
.course-description-field > div,
.new-course-description,
.course-thumbnail-heading,
.group-member-field > div:first-child strong,
.employee-group-checks > strong { font-size: var(--font-item-title); }

.page-heading p,
.modal > header p,
.panel-heading p,
.task-copy span,
.due-text,
.course-card p,
.plan-detail-header p,
.plan-course-name span,
.plan-main > p,
.plan-resources button,
.plan-progress-block > span,
.resource-name span,
.employee-cell span,
.subline,
.home-course-item > div:nth-child(2) > span,
.home-learning-card .home-course-item > div:nth-child(2) > span,
.home-learning-card .continue-heading span,
.home-empty,
.home-learning-card .home-empty,
.management-subnav > header span,
.management-list-toolbar > div > span,
.course-admin-list-header > div:first-child > span,
.user-list-header > div > span,
.employee-stat-card > header span,
.employee-stat-metrics span,
.employee-stat-metrics small,
.employee-current-plans-heading span,
.employee-current-plans-heading strong,
.employee-plan-line > div:first-child span,
.employee-plan-line > div:first-child strong,
.employee-no-plan,
.employee-more-plan,
.statistics-drawer > header span,
.employee-detail-summary span,
.employee-detail-summary small,
.employee-detail-section > header > span,
.employee-detail-row-heading > div > span,
.employee-detail-progress > strong,
.course-detail-list article span,
.employee-detail-empty,
.employee-group-manager > header span,
.employee-group-manager article span,
.group-member-field > div:first-child span,
.group-member-row small,
.folder-upload span,
.course-file-picker span,
.course-thumbnail-preview > div,
.exam-mode-choice small,
.admin-chapter-list small,
.exam-blueprint-heading small,
.course-exam-config span,
.plan-course-option small,
.selected-plan-courses article small,
.audience-mode-choice small,
.publish-choice span small,
.exam-blueprint small,
.exam-duration-row small,
.ai-bank-status small,
.category-list span,
.question-bank-heading small,
.chapter-item div span,
.player-exam-card span,
.question-title small,
.exam-result > small { font-size: var(--font-meta); }

.learning-stat-value > strong,
.learning-duration-value b,
.learning-stat-rank > strong { font-size: var(--font-metric); }

.learning-stat-value > span,
.learning-stat-value > strong small,
.learning-stat-rank > span,
.learning-stat-rank > strong small { font-size: var(--font-item-title); }

.learning-duration-value small { font-size: var(--font-meta) !important; }

.page-heading p { font-size: var(--font-body); }
.plan-total-progress strong { font-size: var(--font-metric); }
.plan-total-progress span { font-size: var(--font-meta); }
.employee-stat-metrics strong { font-size: var(--font-compact-metric); }
.employee-detail-summary strong { font-size: var(--font-summary-metric); }
.home-learning-card .home-summary-band > div > strong { font-size: var(--font-card-metric); }

input,
textarea,
select,
.management-list-toolbar .search-box input { font-size: var(--font-item-title) !important; }

.home-learning-card .home-section-heading .text-button,
.home-learning-card .continue-heading strong,
.summary-progress > div:last-child strong,
.summary-lead strong,
.management-subnav > header strong,
.subnav-create-action,
.category-create-button,
.category-menu-item,
.category-menu-item span,
.directory-menu-item,
.segmented button,
.plan-resources button,
.plan-action-link,
.management-row-action,
.text-action { font-size: var(--font-item-title); }

.management-subnav > header span,
.category-menu-item small,
.directory-menu-item small,
.directory-section > header > span,
.status-pill,
.course-card-body .course-kicker,
.course-card-footer strong,
.course-progress-cell strong { font-size: var(--font-meta); }

.course-card { display: flex; flex-direction: column; }
.course-card .course-card-body { min-height: 148px; display: flex; flex: 1; flex-direction: column; padding: 10px 12px 9px; }
.course-card .course-card-body > p {
  height: auto;
  min-height: 46px;
  margin: 4px 0 8px;
  overflow: visible;
  line-height: 1.65;
  overflow-wrap: anywhere;
  text-overflow: clip;
  white-space: normal;
}
.course-card .course-card-footer { margin-top: auto; padding-top: 4px; }

@media (max-width: 560px) {
  .page-heading h1,
  .management-page-heading h1 { font-size: var(--font-page-title); }

  .course-card h3 { font-size: var(--font-item-title); }
  .course-card p { font-size: var(--font-meta); }
}