:root {
  --color-brand-50: #f0f8f4;
  --color-brand-100: #dff3e8;
  --color-brand-200: #b7dfc9;
  --color-brand-600: #177252;
  --color-brand-700: #125f44;
  --color-brand-800: #0d4d37;
  --color-success-100: #e3f4e9;
  --color-success-700: #176542;
  --color-warning-100: #fbf1d8;
  --color-warning-700: #7b4b0e;
  --color-danger-50: #fff0f0;
  --color-danger-100: #faeaea;
  --color-danger-700: #923b3b;
  --color-danger-800: #7f2929;
  --color-info-100: #e7f1f8;
  --color-info-700: #2f668f;
  --color-neutral-0: #ffffff;
  --color-neutral-50: #f3f7f4;
  --color-neutral-100: #edf3ef;
  --color-neutral-200: #dce5df;
  --color-neutral-300: #cbd8d0;
  --color-neutral-500: #849188;
  --color-neutral-600: #637068;
  --color-neutral-700: #35463d;
  --color-neutral-900: #17231d;
  --color-neutral-950: #10291f;
  --font-sans: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 18px;
  --shadow-raised: 0 8px 24px rgba(25, 57, 42, .05);
  --shadow-elevated: 0 14px 40px rgba(25, 57, 42, .08);
  --focus-ring: 0 0 0 3px rgba(23, 114, 82, .24);
  font-family: var(--font-sans);
  color: var(--color-neutral-900);
  background: var(--color-neutral-50);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--color-neutral-50); }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 86% 0, rgba(183, 223, 114, .12), transparent 30%); }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid var(--color-brand-600); outline-offset: 2px; box-shadow: var(--focus-ring); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.skip-link { position: fixed; top: var(--space-3); left: var(--space-3); z-index: 20; padding: var(--space-3) var(--space-4); color: var(--color-neutral-0); background: var(--color-brand-800); border-radius: var(--radius-sm); transform: translateY(-160%); }
.skip-link:focus { transform: translateY(0); }
.app-shell { min-height: 100vh; }

.sidebar { position: fixed; inset: 0 auto 0 0; width: 252px; padding: 28px 20px 22px; color: #dbe9e1; background: linear-gradient(165deg, #143529 0%, var(--color-neutral-950) 56%, #0b2118 100%); display: flex; flex-direction: column; z-index: 5; overflow: hidden; }
.sidebar::after { content: ""; position: absolute; right: -80px; bottom: 90px; width: 210px; height: 210px; border: 1px solid rgba(183, 223, 114, .12); border-radius: 50%; box-shadow: 0 0 0 34px rgba(183, 223, 114, .035), 0 0 0 72px rgba(183, 223, 114, .02); pointer-events: none; }
.brand { position: relative; z-index: 1; display: flex; align-items: center; gap: 12px; padding: 0 8px 34px; flex: none; }
.brand-mark { width: 40px; height: 40px; display: inline-grid; place-items: center; flex: none; color: var(--color-neutral-950); background: linear-gradient(135deg, #d8f1a8, #72c89b); border-radius: 11px; box-shadow: 0 8px 24px rgba(112, 200, 154, .18); font-size: 12px; font-weight: 900; letter-spacing: -.03em; }
.brand strong { display: block; color: #fff; font-size: 16px; letter-spacing: .03em; }
.brand small { display: block; margin-top: 4px; color: #8fa99a; font-size: 11px; }
.nav-groups, .nav-list { position: relative; z-index: 1; display: grid; gap: 5px; }
.nav-list a { position: relative; padding: 11px 14px 11px 38px; border: 1px solid transparent; border-radius: 9px; color: #a9bdb1; font-size: 14px; transition: .18s ease; }
.nav-list a::before { content: ""; position: absolute; left: 16px; top: 50%; width: 7px; height: 7px; border: 1px solid currentColor; border-radius: 2px; transform: translateY(-50%) rotate(45deg); opacity: .65; }
.nav-list a:hover { color: #fff; background: rgba(255,255,255,.055); transform: translateX(2px); }
.nav-list a.active { color: #fff; border-color: rgba(167, 223, 188, .12); background: rgba(117, 197, 153, .13); }
.nav-list a.active::before { border-color: var(--color-brand-200); background: var(--color-brand-200); box-shadow: 0 0 0 4px rgba(183, 223, 114, .1); }
.nav-section { margin: 24px 14px 8px; color: #668677; font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
.sidebar-footer { position: relative; z-index: 1; margin-top: auto; padding: 18px 6px 0; border-top: 1px solid rgba(221, 239, 228, .1); display: grid; grid-template-columns: 34px minmax(0, 1fr) auto; align-items: center; gap: 9px; }
.user-avatar { width: 34px; height: 34px; display: grid; place-items: center; color: #173c2d; background: #9bd7b4; border-radius: 50%; font-size: 13px; font-weight: 800; }
.user-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #f3faf6; font-size: 12px; }
.user-name small { display: block; margin-top: 3px; color: #769383; font-size: 10px; }
.text-button, .text-link { padding: 0; color: var(--color-brand-600); background: none; border: 0; cursor: pointer; font-weight: 650; }
.sidebar .text-button { color: #8fcdaa; font-size: 11px; }

.main-content { position: relative; min-height: 100vh; margin-left: 252px; padding: 48px clamp(30px, 5vw, 76px) 80px; }
.main-content > * { width: min(1240px, 100%); margin-right: auto; margin-left: auto; }
.page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin-bottom: 30px; }
.page-header h1, .course-header h1 { margin: 7px 0 8px; font-size: clamp(28px, 3.2vw, 42px); font-weight: 750; line-height: 1.14; letter-spacing: -.035em; }
.page-header p, .course-header p { margin: 0; color: var(--color-neutral-600); line-height: 1.65; }
.dashboard-hero { position: relative; min-height: 190px; padding: 34px 36px; align-items: center; overflow: hidden; color: #fff; border-radius: 18px; background: linear-gradient(125deg, #123f2e 0%, #176b4d 60%, #277f58 100%); box-shadow: 0 22px 50px rgba(17, 73, 51, .16); }
.dashboard-hero::after { content: ""; position: absolute; right: -45px; top: -110px; width: 330px; height: 330px; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; box-shadow: 0 0 0 45px rgba(255,255,255,.035), 0 0 0 90px rgba(255,255,255,.02); }
.dashboard-hero > * { position: relative; z-index: 1; }
.dashboard-hero .eyebrow { color: #bde6a1; }
.dashboard-hero p { color: #c8ddd1; }
.dashboard-hero .secondary-button { color: #173b2c; border-color: #d7efc0; background: #eaf7dd; }
.header-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.eyebrow { color: var(--color-brand-600); font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.primary-button, .secondary-button, .danger-button { min-height: 44px; padding: 10px 18px; border: 1px solid var(--color-brand-600); border-radius: var(--radius-md); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-weight: 650; transition: .18s ease; }
.primary-button { color: var(--color-neutral-0); background: var(--color-brand-600); box-shadow: 0 8px 20px rgba(23, 114, 82, .15); }
.primary-button:hover { background: var(--color-brand-800); transform: translateY(-1px); }
.secondary-button { color: var(--color-brand-600); background: rgba(255,255,255,.85); }
.secondary-button:hover { border-color: var(--color-brand-800); background: var(--color-neutral-0); transform: translateY(-1px); }
.danger-button { color: var(--color-neutral-0); border-color: var(--color-danger-700); background: var(--color-danger-700); }
.primary-button:disabled, .secondary-button:disabled, .danger-button:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.metric-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); overflow: hidden; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: rgba(255,255,255,.86); box-shadow: var(--shadow-raised); }
.metric-strip > div { position: relative; padding: 22px 24px; border-right: 1px solid var(--color-neutral-200); }
.metric-strip > div::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; opacity: 0; background: var(--color-brand-600); transition: opacity .2s; }
.metric-strip > div:hover::before { opacity: 1; }
.metric-strip > div:last-child { border-right: 0; }
.metric-strip span { display: block; color: var(--color-neutral-600); font-size: 12px; }
.metric-strip strong { display: block; margin-top: 7px; font-size: 30px; line-height: 1; font-variant-numeric: tabular-nums; }
.metric-strip small { display: block; margin-top: 8px; color: var(--color-neutral-600); font-size: 12px; }
.metric-strip.compact { margin-bottom: 24px; }
.section-block { margin-top: 42px; }
.section-heading { min-height: 46px; display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 16px; }
.section-heading h2 { margin: 4px 0 0; font-size: 21px; letter-spacing: -.02em; }
.section-heading > a { color: var(--color-brand-600); font-size: 13px; font-weight: 650; }
.section-heading > a::after, .card-action::after { content: "  →"; }
.course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.course-card { min-height: 178px; padding: 20px; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: rgba(255,255,255,.9); display: flex; flex-direction: column; box-shadow: var(--shadow-raised); transition: .2s ease; }
.course-card:hover { border-color: #95bea7; box-shadow: var(--shadow-elevated); transform: translateY(-3px); }
.card-topline { display: flex; align-items: center; justify-content: space-between; }
.unit-number { color: #c2ccc6; font-size: 20px; font-variant-numeric: tabular-nums; }
.tag { width: fit-content; padding: 4px 9px; border-radius: 999px; color: var(--color-brand-800); background: var(--color-brand-100); font-size: 10px; font-weight: 750; }
.course-card h3 { margin: 18px 0 7px; font-size: 17px; line-height: 1.4; }
.course-card p { margin: 0; color: var(--color-neutral-600); font-size: 13px; }
.card-action { margin-top: auto; min-height: 44px; display: inline-flex; align-items: center; color: var(--color-brand-600); font-size: 12px; font-weight: 700; }
.split-section { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr); gap: 38px; }
.compact-list, .rank-list, .unit-list { border-top: 1px solid var(--color-neutral-200); }
.compact-list a, .compact-list > div:not(.empty-state) { display: flex; justify-content: space-between; gap: 20px; padding: 14px 5px; border-bottom: 1px solid var(--color-neutral-200); font-size: 14px; transition: padding .16s, color .16s; }
.compact-list a:hover { padding-left: 10px; color: var(--color-brand-600); }
.compact-list small { flex: none; color: var(--color-neutral-600); }
.rank-list { margin: 0; padding: 0; list-style: none; }
.rank-list li { display: grid; grid-template-columns: 28px 1fr auto; gap: 9px; align-items: center; padding: 13px 3px; border-bottom: 1px solid var(--color-neutral-200); font-size: 13px; }
.rank-list li > span { width: 23px; height: 23px; display: grid; place-items: center; color: var(--color-brand-800); background: #e6f1ea; border-radius: 7px; font-size: 10px; font-weight: 800; }
.rank-list small { color: var(--color-neutral-600); }
.rank-list .empty-state { display: block; padding: 38px; }

.search-bar { max-width: 720px; display: flex; margin-bottom: 26px; padding: 5px; border: 1px solid var(--color-neutral-200); border-radius: 11px; background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.search-bar input { width: 100%; padding: 10px 12px; border: 0; outline: none; background: transparent; }
.search-bar input:focus { box-shadow: inset 0 -2px var(--color-brand-600); }
.search-bar button { padding: 0 20px; color: var(--color-neutral-0); border: 0; border-radius: 8px; background: var(--color-brand-600); cursor: pointer; }
.news-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.news-card { min-height: 226px; display: grid; grid-template-columns: 158px 1fr; overflow: hidden; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: rgba(255,255,255,.9); box-shadow: var(--shadow-raised); transition: .2s ease; }
.news-card:hover { border-color: #a6c6b4; box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
.news-card:not(:has(img)) { grid-template-columns: 1fr; }
.news-card img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.news-card:hover img { transform: scale(1.035); }
.news-card > div { position: relative; z-index: 1; padding: 20px; display: flex; flex-direction: column; min-width: 0; background: var(--color-neutral-0); }
.news-card h2 { margin: 14px 0 8px; font-size: 18px; line-height: 1.42; }
.news-card h2 a:hover { color: var(--color-brand-600); }
.news-card p { margin: 0; color: var(--color-neutral-600); font-size: 13px; line-height: 1.65; }
.news-card footer { margin-top: auto; padding-top: 16px; display: flex; justify-content: space-between; color: var(--color-neutral-600); font-size: 11px; }

.article-page { max-width: 860px; padding: 4px 0 60px; }
.breadcrumb { margin-bottom: 30px; display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; color: var(--color-neutral-600); font-size: 13px; }
.breadcrumb > * + *::before { content: "/"; margin-right: var(--space-2); color: var(--color-neutral-500); }
.breadcrumb span[aria-current="page"] { min-width: 0; overflow-wrap: anywhere; }
.back-link { display: inline-flex; align-items: center; gap: 7px; color: var(--color-brand-600); font-weight: 650; }
.article-page h1 { margin: 16px 0 14px; font-size: clamp(30px, 4vw, 48px); line-height: 1.22; letter-spacing: -.025em; }
.article-meta { display: flex; gap: 18px; color: var(--color-neutral-600); font-size: 13px; }
.article-lead { margin: 34px 0; padding: 22px 24px; border-left: 4px solid var(--color-brand-600); border-radius: 0 10px 10px 0; background: #eaf3ed; font-size: 17px; line-height: 1.8; }
.article-body { font-size: 16px; line-height: 1.95; }
.article-body p { margin: 1.25em 0; }
.link-notice { margin: 32px 0; padding: 20px; color: var(--color-neutral-600); border: 1px dashed #aebbb2; border-radius: 10px; background: rgba(255,255,255,.55); }
.article-actions { position: sticky; bottom: 18px; margin-top: 40px; padding: 14px; border: 1px solid var(--color-neutral-200); border-radius: 12px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-elevated); backdrop-filter: blur(12px); display: flex; gap: 10px; flex-wrap: wrap; }

.table-scroll { overflow-x: auto; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.data-table { width: 100%; min-width: 680px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.data-table th, .data-table td { padding: 15px 18px; border-bottom: 1px solid var(--color-neutral-200); text-align: left; vertical-align: middle; }
.data-table thead th { color: var(--color-neutral-600); background: var(--color-neutral-100); font-size: 10px; font-weight: 750; letter-spacing: .05em; text-transform: uppercase; }
.data-table tbody tr:last-child > * { border-bottom: 0; }
.data-table tbody tr:hover { background: var(--color-brand-50); }
.data-table tbody th { font-weight: 650; }
.data-table tbody th small { display: block; margin-top: 5px; color: var(--color-neutral-600); font-weight: 400; }
.data-table tbody th a { color: var(--color-neutral-900); }
.data-table tbody th a:hover { color: var(--color-brand-600); }
.leaderboard-table td:not(:first-child), .leaderboard-table thead th:not(:nth-child(2)) { text-align: center; }
.rank-value, .score-value { color: var(--color-brand-600); font-size: 18px; text-align: center !important; }
.ops-table { min-width: 860px; }
.error-row:hover { background: transparent !important; }
.error-row td { padding-top: 0; }

.course-plan-batches, .course-table { display: grid; gap: 30px; }
.course-plan-batch { min-width: 0; }
.batch-plan-header { margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--color-neutral-200); display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.batch-plan-header h2 { margin: 5px 0 0; font-size: 24px; }
.batch-plan-header p { margin: 0; color: var(--color-neutral-600); font-size: 12px; font-variant-numeric: tabular-nums; }
.stage-group { display: grid; grid-template-columns: 250px 1fr; gap: 40px; padding: 28px; border: 1px solid var(--color-neutral-200); border-radius: 15px; background: rgba(255,255,255,.72); }
.stage-route-only { grid-template-columns: minmax(0, 680px); }
.stage-title { position: relative; padding: 7px 0 0 68px; }
.stage-index { position: absolute; left: 0; top: 0; width: 52px; height: 52px; display: grid; place-items: center; color: #fff !important; border-radius: 14px; background: linear-gradient(145deg, #176b4d, #23916a); font-size: 18px !important; font-variant-numeric: tabular-nums; box-shadow: 0 9px 20px rgba(23,107,77,.17); }
.stage-title > span { color: var(--color-brand-600); font-size: 10px; font-weight: 750; letter-spacing: .08em; }
.stage-title h2, .stage-title h3 { margin: 7px 0; font-size: 20px; }
.stage-title p { margin: 0; color: var(--color-neutral-600); font-size: 13px; line-height: 1.65; }
.stage-title .stage-introduction, .stage-title .stage-plan-date, .stage-title .stage-availability { margin-top: var(--space-3); overflow-wrap: anywhere; }
.stage-title .stage-objective { overflow-wrap: anywhere; }
.stage-entry-link { min-height: 44px; margin-top: var(--space-3); display: inline-flex; align-items: center; color: var(--color-brand-600); font-size: 12px; font-weight: 700; }
.stage-entry-link::after { content: "  →"; }
.unit-list a { display: grid; grid-template-columns: 45px 1fr auto; gap: 14px; align-items: center; min-height: 70px; padding: 10px 6px; border-bottom: 1px solid var(--color-neutral-200); transition: padding .16s, background .16s; }
.unit-list a:hover { padding-right: 12px; padding-left: 12px; background: #f5faf7; }
.unit-order { color: #9aa79f; font-variant-numeric: tabular-nums; }
.unit-list strong, .unit-list small { display: block; }
.unit-list small { margin-top: 5px; color: var(--color-neutral-600); font-size: 11px; }
.unit-list b { color: var(--color-brand-600); font-size: 12px; }

.course-page { max-width: 1120px; }
.course-header { margin-bottom: 24px; }
.course-header h1, .activity-header h1 { overflow-wrap: anywhere; }
.course-header .tag { margin-bottom: 13px; }
.video-stage { width: 100%; aspect-ratio: 16/9; overflow: hidden; border-radius: 14px 14px 0 0; background: #08140f; box-shadow: 0 18px 45px rgba(12,34,24,.16); }
.video-stage iframe { width: 100%; height: 100%; }
.course-toolbar { padding: 19px 22px; display: flex; justify-content: space-between; align-items: center; gap: 20px; border: 1px solid var(--color-neutral-200); border-top: 0; border-radius: 0 0 14px 14px; background: var(--color-neutral-0); }
.course-toolbar strong, .course-toolbar span { display: block; }
.course-toolbar span { margin-top: 5px; color: var(--color-neutral-600); font-size: 12px; }

.learner-stage-page { max-width: 1080px; }
.learner-stage-header { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .55fr); gap: var(--space-8); align-items: end; margin-bottom: var(--space-5); }
.learner-stage-header h1 { min-width: 0; margin: var(--space-2) 0 var(--space-3); overflow-wrap: anywhere; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.035em; }
.learner-stage-header p { min-width: 0; margin: 0; overflow-wrap: anywhere; color: var(--color-neutral-600); line-height: 1.7; }
.stage-plan-summary { margin: 0; padding: var(--space-5); display: grid; gap: var(--space-4); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.stage-plan-summary div { display: grid; gap: var(--space-1); }
.stage-plan-summary dt { color: var(--color-neutral-600); font-size: 11px; }
.stage-plan-summary dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.stage-progress-note { margin-bottom: var(--space-8); color: var(--color-info-700); border-color: #c8ddea; background: var(--color-info-100); }
.stage-introduction-page .learner-stage-header { align-items: start; }
.stage-introduction-page .stage-objective { margin-bottom: var(--space-3); color: var(--color-neutral-800); }
.stage-introduction-status { margin-bottom: var(--space-5); }
.stage-learning-section, .stage-practice-section { margin-top: var(--space-8); }
.section-help { margin: var(--space-1) 0 0; color: var(--color-neutral-600); font-size: 12px; line-height: 1.7; }
.learner-unit-list, .learner-practice-list { margin: 0; padding: 0; display: grid; gap: var(--space-3); list-style: none; }
.learner-unit-list li, .learner-practice-list li { min-width: 0; padding: var(--space-5); display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: var(--space-4); align-items: center; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.learner-practice-list li { grid-template-columns: minmax(0, 1fr) auto; }
.learner-unit-list li.next-learning-item, .learner-practice-list li.next-learning-item { border-color: #95bea7; background: var(--color-brand-50); box-shadow: 0 10px 28px rgba(23, 114, 82, .09); }
.learner-item-order { width: 42px; height: 42px; display: grid; place-items: center; color: var(--color-brand-700); border-radius: var(--radius-md); background: var(--color-brand-100); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; }
.learner-item-content { min-width: 0; }
.learner-item-topline { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.learner-item-content h3 { margin: 0; overflow-wrap: anywhere; font-size: 17px; }
.learner-item-content p { margin: var(--space-2) 0 0; color: var(--color-neutral-600); font-size: 12px; }
.learner-item-content small { display: block; margin-top: var(--space-2); color: var(--color-info-700); font-size: 11px; }
.next-label { padding: 3px 8px; color: var(--color-brand-800); border-radius: 999px; background: var(--color-brand-100); font-size: 10px; font-weight: 800; }
.learner-item-action { min-width: 118px; display: grid; justify-items: end; gap: var(--space-2); }
.learner-status { color: var(--color-neutral-700); font-size: 12px; font-weight: 700; }

.status-badge { width: fit-content; display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; color: var(--color-neutral-700); border-radius: 999px; background: var(--color-neutral-100); font-size: 12px; font-weight: 700; white-space: nowrap; }
.status-dot { width: 8px; height: 8px; display: inline-block; border-radius: 50%; background: var(--color-neutral-500); box-shadow: 0 0 0 3px rgba(132,145,136,.12); }
.status-running, .status-validating { color: var(--color-info-700); background: var(--color-info-100); }
.status-running .status-dot, .status-validating .status-dot { background: var(--color-info-700); }
.status-succeeded { color: var(--color-success-700); background: var(--color-success-100); }
.status-succeeded .status-dot { background: var(--color-success-700); }
.status-failed { color: var(--color-danger-700); background: var(--color-danger-100); }
.status-failed .status-dot { background: var(--color-danger-700); }
.status-review { color: var(--color-warning-700); background: var(--color-warning-100); }
.status-review .status-dot { background: var(--color-warning-700); }
.inline-alert, .alert { padding: 11px 13px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: 13px; line-height: 1.5; }
.message-list { margin-bottom: var(--space-5); display: grid; gap: var(--space-2); }
.alert-success { color: var(--color-success-700); border-color: #c6e3d0; background: var(--color-success-100); }
.alert-danger { color: var(--color-danger-800); border-color: #efcaca; background: var(--color-danger-50); }
.empty-state { padding: 38px; color: var(--color-neutral-600); border: 1px dashed #b5c3ba; border-radius: var(--radius-lg); background: rgba(255,255,255,.55); text-align: center; }

.configuration-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); }
.configuration-card, .configuration-stage { padding: var(--space-6); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: rgba(255,255,255,.9); box-shadow: var(--shadow-raised); }
.configuration-card { min-height: 280px; display: flex; flex-direction: column; }
.configuration-card h2 { margin: var(--space-5) 0 var(--space-2); font-size: 22px; }
.configuration-card h2 a:hover { color: var(--color-brand-600); }
.configuration-card > p { margin: 0; color: var(--color-neutral-600); }
.configuration-stage-introductions { margin: var(--space-4) 0 0; padding: 0; display: grid; gap: var(--space-2); list-style: none; }
.configuration-stage-introductions li { min-width: 0; font-size: 12px; }
.configuration-stage-introductions strong, .configuration-stage-introductions span { display: block; }
.configuration-stage-introductions span { margin-top: var(--space-1); color: var(--color-neutral-600); }
.configuration-summary { display: grid; gap: var(--space-3); margin: var(--space-5) 0; }
.configuration-summary div { display: grid; grid-template-columns: 90px 1fr; gap: var(--space-3); }
.configuration-summary dt { color: var(--color-neutral-600); font-size: 12px; }
.configuration-summary dd { margin: 0; font-size: 13px; font-variant-numeric: tabular-nums; }
.configuration-card .card-action { margin-top: auto; }
.configuration-stage-list { display: grid; gap: var(--space-5); }
.configuration-stage { scroll-margin-top: var(--space-5); }
.configuration-stage > header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-6); }
.configuration-stage h2 { margin: var(--space-2) 0; font-size: 22px; }
.configuration-stage header p { margin: 0; color: var(--color-neutral-600); font-size: 13px; }
.stage-heading { min-width: 0; }
.stage-heading-row, .stage-availability-status { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.stage-heading-row h2 { min-width: 0; overflow-wrap: anywhere; }
.stage-availability-copy { display: block; margin-top: var(--space-2); color: var(--color-neutral-600); font-size: 12px; line-height: 1.6; }
.stage-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.disabled-action { color: var(--color-neutral-500); border-color: var(--color-neutral-300); background: var(--color-neutral-100); cursor: not-allowed; }
.stage-stat-row { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--space-2); margin-top: var(--space-5); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-neutral-100); }
.stage-stat-row span { color: var(--color-neutral-600); font-size: 12px; }
.stage-stat-row strong { display: block; margin-bottom: var(--space-1); color: var(--color-neutral-900); font-size: 14px; font-variant-numeric: tabular-nums; }
.configuration-issues { margin-top: var(--space-4); padding: var(--space-4); color: var(--color-warning-700); border: 1px solid #ead8ad; border-radius: var(--radius-md); background: var(--color-warning-100); }
.configuration-issues h3 { margin: 0 0 var(--space-2); font-size: 13px; }
.configuration-issues ul { margin: 0; padding-left: var(--space-5); font-size: 12px; line-height: 1.7; }
.configuration-ready { margin-top: var(--space-4); color: var(--color-success-700); border-color: #c6e3d0; background: var(--color-success-100); }
.stage-information-panel { min-width: 0; margin-bottom: var(--space-5); }
.stage-information-form { max-width: 780px; }
.stage-information-panel textarea { width: 100%; max-width: 100%; padding: 11px; resize: vertical; color: var(--color-neutral-900); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); background: var(--color-neutral-0); line-height: 1.65; }
.stage-information-panel textarea:focus { border-color: var(--color-brand-600); box-shadow: var(--focus-ring); }
.stage-information-readonly { margin: 0; display: grid; gap: var(--space-4); }
.stage-information-readonly div { min-width: 0; }
.stage-information-readonly dt { color: var(--color-neutral-600); font-size: 12px; }
.stage-information-readonly dd { margin: var(--space-1) 0 0; line-height: 1.7; }
.stage-information-copy { overflow-wrap: anywhere; white-space: pre-wrap; }
.stage-availability-panel { margin-bottom: var(--space-5); }

.roster-page { max-width: 1120px; }
.roster-header { align-items: start; }
.roster-organization-panel { margin-bottom: var(--space-8); }
.roster-inline-form, .roster-assignment-form { min-width: 0; display: grid; gap: var(--space-3); }
.roster-inline-form { grid-template-columns: minmax(120px, .35fr) minmax(200px, 1fr) auto; align-items: end; }
.roster-inline-form label, .roster-assignment-form label { display: block; margin-bottom: var(--space-1); color: var(--color-neutral-600); font-size: 11px; }
.roster-inline-form input, .roster-assignment-form input, .roster-assignment-form select, .roster-assignment-form textarea, .end-assignment-form input { width: 100%; max-width: 100%; padding: 10px; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); background: var(--color-neutral-0); }
.roster-list { display: grid; gap: var(--space-5); }
.roster-card { min-width: 0; padding: var(--space-6); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.roster-card > header { display: flex; align-items: start; justify-content: space-between; gap: var(--space-4); }
.roster-card h3 { margin: 0; overflow-wrap: anywhere; font-size: 21px; }
.roster-card header small { color: var(--color-neutral-600); }
.roster-current-grid, .roster-actions, .history-columns { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
.roster-current-grid { margin-top: var(--space-5); }
.roster-current-grid section { min-width: 0; padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-neutral-100); }
.roster-current-grid strong, .roster-current-grid small { display: block; margin-top: var(--space-2); overflow-wrap: anywhere; }
.roster-current-grid small { color: var(--color-neutral-600); }
.roster-actions { margin-top: var(--space-5); }
.roster-assignment-form { padding: var(--space-4); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); }
.roster-assignment-form h4 { margin: 0; }
.roster-history { margin-top: var(--space-5); border-top: 1px solid var(--color-neutral-200); }
.roster-history summary { min-height: 44px; padding-top: var(--space-4); color: var(--color-brand-600); cursor: pointer; font-weight: 700; }
.history-columns ol { margin: 0; padding: 0; display: grid; gap: var(--space-3); list-style: none; }
.history-columns li { min-width: 0; padding: var(--space-3); border-left: 3px solid var(--color-brand-200); background: var(--color-brand-50); overflow-wrap: anywhere; }
.history-columns li strong, .history-columns li span, .history-columns li small { display: block; }
.history-columns li span, .history-columns li small { margin-top: var(--space-1); color: var(--color-neutral-600); font-size: 11px; }
.end-assignment-form { margin-top: var(--space-3); display: flex; gap: var(--space-2); align-items: end; }
.assignment-page { max-width: 1120px; }
.assignment-panel, .assignment-result, .assignment-history { min-width: 0; margin-bottom: var(--space-7); padding: var(--space-6); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.assignment-form { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-5); }
.assignment-form fieldset { min-width: 0; margin: 0; padding: var(--space-4); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); }
.assignment-form legend { padding: 0 var(--space-2); font-weight: 800; }
.assignment-form ul { margin: var(--space-3) 0 0; padding: 0; display: grid; gap: var(--space-2); list-style: none; }
.assignment-form label { min-height: 44px; display: flex; align-items: center; gap: var(--space-2); overflow-wrap: anywhere; }
.assignment-form > .primary-button { grid-column: 1 / -1; width: fit-content; }
.assignment-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius-lg); background: linear-gradient(125deg, #123f2e, #176b4d); }
.assignment-summary div { padding: var(--space-5); color: #fff; border-right: 1px solid rgba(255,255,255,.14); }
.assignment-summary div:last-child { border-right: 0; }
.assignment-summary span, .assignment-summary strong { display: block; }
.assignment-summary span { color: #bfdbcc; font-size: 11px; }
.assignment-summary strong { margin-top: var(--space-2); font-size: 28px; }
.assignment-reasons { padding-left: var(--space-5); overflow-wrap: anywhere; }
.assignment-confirm-form { margin-top: var(--space-5); }
.assignment-history-list { display: grid; gap: var(--space-4); }
.assignment-history-card { min-width: 0; padding: var(--space-5); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); overflow-wrap: anywhere; }
.assignment-history-card header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-4); }
.assignment-history-card h3 { margin: 0; }
.assignment-history-card small { margin-top: var(--space-2); display: block; color: var(--color-neutral-600); }
.assignment-revoke-form { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.assignment-revoke-form textarea { width: 100%; max-width: 100%; padding: 10px; resize: vertical; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); }
.assignment-revoke-form button { width: fit-content; }
.ledger-page { max-width: 1240px; }
.alert-page .card { margin-bottom: var(--space-5); }
.alert-form { max-width: 560px; }
.alert-form p { display: grid; gap: var(--space-2); }
.alert-form small { color: var(--color-neutral-600); line-height: 1.5; }
.alert-form input[type="number"], .alert-form input[type="datetime-local"] { width: min(360px, 100%); min-height: 44px; padding: 9px 11px; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); }
.alert-form button { min-height: 44px; }
.alert-queue-table { min-width: 1040px; }
.ledger-filters { margin-bottom: var(--space-5); padding: var(--space-4); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-neutral-0); }
.ledger-filters summary { cursor: pointer; font-weight: 700; }
.ledger-filters form { margin-top: var(--space-4); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); align-items: end; }
.ledger-filters label { min-width: 0; display: grid; gap: var(--space-1); color: var(--color-neutral-700); font-size: 12px; font-weight: 700; }
.ledger-filters input, .ledger-filters select { width: 100%; min-height: 44px; padding: 8px 10px; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); background: var(--color-neutral-0); }
.ledger-filter-summary { margin: var(--space-4) 0 0; color: var(--color-neutral-600); font-size: 12px; overflow-wrap: anywhere; }
.ledger-table-scroll { overflow: auto; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.ledger-matrix-scroll { max-height: 70vh; }
.ledger-detail-scroll { max-height: none; }
.ledger-table { width: 100%; min-width: 940px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.ledger-table caption { padding: var(--space-4); color: var(--color-neutral-600); text-align: left; }
.ledger-table th, .ledger-table td { padding: var(--space-3); border-bottom: 1px solid var(--color-neutral-200); text-align: left; vertical-align: top; }
.ledger-table thead th { position: sticky; top: 0; z-index: 2; color: var(--color-neutral-700); background: var(--color-neutral-100); font-size: 11px; }
.ledger-table thead th:first-child, .ledger-table tbody th { position: sticky; left: 0; z-index: 1; background: var(--color-neutral-0); }
.ledger-table thead th:first-child { z-index: 3; background: var(--color-neutral-100); }
.ledger-table tbody th { min-width: 170px; }
.ledger-table tbody th small, .ledger-cell-link span, .ledger-cell-link small { display: block; margin-top: var(--space-1); color: var(--color-neutral-600); font-size: 11px; font-weight: 400; }
.ledger-cell-link { min-width: 150px; min-height: 88px; padding: var(--space-3); display: block; border-radius: var(--radius-sm); background: var(--color-brand-50); }
.ledger-cell-link:hover { background: var(--color-brand-100); }
.ledger-cell-link:focus-visible, .ledger-cards a:focus-visible { outline: 3px solid var(--color-brand-600); outline-offset: 2px; }
.ledger-cell-link strong { color: var(--color-brand-800); font-size: 18px; }
.ledger-empty, .ledger-no-rows { color: var(--color-neutral-600); }
.ledger-summary { margin-bottom: var(--space-6); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius-lg); color: #fff; background: linear-gradient(125deg, #123f2e, #176b4d); }
.ledger-summary div { padding: var(--space-5); border-right: 1px solid rgba(255,255,255,.14); }
.ledger-summary span, .ledger-summary strong { display: block; }
.ledger-summary span { color: #bfdbcc; font-size: 11px; }
.ledger-summary strong { margin-top: var(--space-2); font-size: 25px; }
.ledger-cards { display: none; }
.ledger-export-actions { display: flex; gap: var(--space-3); align-items: center; }
.stage-availability-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .6fr); gap: var(--space-6); align-items: start; }
.stage-availability-status h2 { margin-right: var(--space-1); }
.stage-availability-meta { margin: 0; display: grid; gap: var(--space-3); }
.stage-availability-meta div { display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: var(--space-3); }
.stage-availability-meta dt { color: var(--color-neutral-600); font-size: 12px; }
.stage-availability-meta dd { margin: 0; overflow-wrap: anywhere; font-size: 13px; }
.stage-availability-form { margin-top: var(--space-5); padding-top: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); border-top: 1px solid var(--color-neutral-200); }
.stage-availability-form p { margin: 0; color: var(--color-neutral-600); font-size: 12px; line-height: 1.65; }
.stage-availability-form button { min-height: 44px; flex: none; }

.stage-video-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--space-6); align-items: start; }
.stage-video-main, .stage-video-form { padding: var(--space-6); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: rgba(255,255,255,.9); box-shadow: var(--shadow-raised); }
.stage-video-form { position: sticky; top: var(--space-6); }
.stage-video-form h2 { margin: var(--space-2) 0; font-size: 22px; }
.stage-video-form > p { margin: 0 0 var(--space-5); color: var(--color-neutral-600); font-size: 13px; line-height: 1.65; }
.stage-video-table { min-width: 850px; }
.stage-video-table td:last-child { width: 190px; }
.table-note { display: block; margin-top: var(--space-1); color: var(--color-neutral-600); font-size: 11px; overflow-wrap: anywhere; }
.table-actions, .form-actions { display: flex; gap: var(--space-2); align-items: center; flex-wrap: wrap; }
.table-actions form { margin: 0; }
.table-actions .text-button { font-size: 12px; }
.table-actions .text-button:disabled { color: var(--color-neutral-500); cursor: not-allowed; }
.form-field { display: grid; gap: var(--space-2); margin-bottom: var(--space-4); }
.form-field label { font-size: 13px; font-weight: 700; }
.form-field input, .form-field select { width: 100%; min-height: 42px; padding: 9px 11px; color: var(--color-neutral-900); border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); background: var(--color-neutral-0); }
.form-field small { color: var(--color-neutral-600); font-size: 11px; line-height: 1.5; }
.field-error { color: var(--color-danger-700); font-size: 12px; }
.external-video-entry { padding: var(--space-8); display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); border: 1px solid var(--color-neutral-200); border-radius: 14px 14px 0 0; background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.external-video-entry h2 { margin: var(--space-2) 0; }
.external-video-entry p { margin: 0; color: var(--color-neutral-600); line-height: 1.65; }
.history-notice { margin-bottom: var(--space-4); color: var(--color-info-700); border-color: #c8ddea; background: var(--color-info-100); }
.stage-form-summary { margin-bottom: var(--space-4); }

.manifest-header { align-items: center; }
.manifest-alert { margin-bottom: var(--space-5); }
.manifest-alert p { margin: var(--space-2) 0 0; }
.manifest-summary { margin-bottom: var(--space-5); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; color: #fff; border-radius: var(--radius-lg); background: linear-gradient(125deg, #123f2e, #176b4d); box-shadow: var(--shadow-elevated); }
.manifest-summary div { padding: var(--space-5); border-right: 1px solid rgba(255,255,255,.14); }
.manifest-summary div:last-child { border-right: 0; }
.manifest-summary span { display: block; color: #bfdbcc; font-size: 11px; }
.manifest-summary strong { display: block; margin-top: var(--space-2); font-size: 28px; font-variant-numeric: tabular-nums; }
.manifest-panel, .manifest-guardrails { padding: var(--space-6); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: rgba(255,255,255,.92); box-shadow: var(--shadow-raised); }
.manifest-upload-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr); gap: var(--space-6); align-items: start; }
.manifest-upload-form > div:first-child { margin-bottom: var(--space-6); }
.manifest-upload-form h2, .manifest-guardrails h2 { margin: var(--space-2) 0; font-size: 23px; }
.manifest-upload-form p { margin: 0; color: var(--color-neutral-600); line-height: 1.65; }
.manifest-guardrails { color: #dceae2; border: 0; background: linear-gradient(150deg, #143529, #0d281d); }
.manifest-guardrails .eyebrow { color: #bde6a1; }
.manifest-guardrails h2 { color: #fff; }
.manifest-guardrails ul { margin: var(--space-5) 0 0; padding-left: var(--space-5); display: grid; gap: var(--space-4); color: #b9cec2; font-size: 13px; line-height: 1.65; }
.manifest-table { min-width: 980px; }
.manifest-table thead th { position: sticky; top: 0; z-index: 1; background: var(--color-neutral-50); box-shadow: 0 1px 0 var(--color-neutral-200); }
.manifest-table .field-error { display: block; }
.manifest-confirm-bar { position: sticky; bottom: var(--space-3); z-index: 2; margin-top: var(--space-5); padding: var(--space-4); display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); border: 1px solid #c6e3d0; border-radius: var(--radius-md); background: var(--color-success-100); box-shadow: var(--shadow-elevated); }
.manifest-confirm-bar p { margin: 0; color: var(--color-success-700); font-size: 13px; }

.activity-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.activity-card { min-height: 250px; padding: 22px; display: flex; flex-direction: column; border: 1px solid var(--color-neutral-200); border-radius: 14px; background: rgba(255,255,255,.9); box-shadow: var(--shadow-raised); transition: .2s ease; }
.activity-card:hover { border-color: #93bea6; box-shadow: var(--shadow-elevated); transform: translateY(-3px); }
.tag-evaluation { color: var(--color-warning-700); background: var(--color-warning-100); }
.activity-status { color: var(--color-brand-600); font-size: 12px; font-weight: 700; }
.activity-stage { margin-top: 24px; color: var(--color-neutral-600); font-size: 12px; }
.activity-card h2 { margin: 7px 0 9px; font-size: 19px; line-height: 1.4; text-wrap: balance; }
.activity-card p { margin: 0; color: var(--color-neutral-600); font-size: 13px; line-height: 1.65; }
.activity-card footer { margin-top: auto; padding-top: 20px; display: flex; justify-content: space-between; color: var(--color-neutral-600); border-top: 1px solid var(--color-neutral-200); font-size: 12px; }
.activity-times { display: grid; gap: 4px; text-align: right; }
.dashboard-activity-grid .activity-card { min-height: 220px; }
.activity-page { max-width: 1180px; }
.activity-header { margin-bottom: 28px; }
.activity-header h1 { margin: 13px 0 8px; font-size: clamp(30px, 4vw, 46px); letter-spacing: -.03em; }
.activity-header p { margin: 0; color: var(--color-neutral-600); }
.submission-notice { margin: -8px 0 20px; padding: 11px 14px; color: var(--color-brand-800); border: 1px solid #cce4d6; border-radius: 9px; background: #eaf6ef; font-size: 12px; }
.activity-badges { display: flex; align-items: center; gap: 10px; color: var(--color-neutral-600); font-size: 11px; }
.activity-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: 24px; align-items: start; }
.activity-layout > main { display: grid; gap: 18px; }
.activity-panel, .attempt-sidebar { padding: 25px; border: 1px solid var(--color-neutral-200); border-radius: 14px; background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.activity-instructions { font-size: 16px; line-height: 1.85; }
.activity-instructions p { margin: 13px 0 0; }
.panel-label { color: var(--color-brand-600); font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 19px; }
.panel-heading h2 { margin: 5px 0 0; font-size: 19px; }
.panel-heading small { color: var(--color-neutral-600); font-size: 10px; }
.answer-form { display: grid; gap: 10px; }
.answer-form label { color: var(--color-neutral-700); font-size: 12px; font-weight: 700; }
.answer-form textarea { width: 100%; padding: 14px; resize: vertical; border: 1px solid var(--color-neutral-300); border-radius: 10px; outline: none; background: #fbfdfb; line-height: 1.7; transition: border .16s, box-shadow .16s; }
.answer-form textarea:focus { border-color: var(--color-brand-600); box-shadow: var(--focus-ring); }
.answer-form .primary-button { width: fit-content; margin-top: 5px; }
.answer-question { min-width: 0; margin: 0; padding: 18px; border: 1px solid var(--color-neutral-200); border-radius: 10px; }
.answer-question legend { max-width: 100%; padding: 0 6px; color: var(--color-neutral-800); font-weight: 700; line-height: 1.55; overflow-wrap: anywhere; }
.answer-question legend span { margin-right: 8px; color: var(--color-brand-600); font-size: 11px; }
.answer-question ul { margin: 10px 0 0; padding: 0; display: grid; gap: 9px; list-style: none; }
.answer-question li label { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.attempt-question + .attempt-question { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-neutral-200); }
.attempt-question h3 { margin: 12px 0 0; font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
.admin-question-preview { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 14px; }
.admin-question-preview li { overflow-wrap: anywhere; }
.admin-question-preview p { margin: 5px 0 0; }
.form-error { color: var(--color-danger-700); font-size: 12px; }
.form-help { color: var(--color-neutral-600); font-size: 11px; font-weight: 400; }
.form-summary { margin-bottom: var(--space-2); }
.form-summary strong { display: block; }
.form-summary ul { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.form-summary a { text-decoration: underline; }
.activity-note { margin: 18px 0 0; padding-top: 15px; color: var(--color-neutral-600); border-top: 1px solid var(--color-neutral-200); font-size: 11px; }
.history-notice { padding: 16px; overflow-wrap: anywhere; color: var(--color-neutral-600); border: 1px solid var(--color-neutral-200); border-radius: 9px; background: #f3f6f4; font-size: 12px; }
.history-notice strong { color: var(--color-neutral-700); }
.history-notice p { margin: 6px 0 0; line-height: 1.6; }
.narrow-page { max-width: 820px; }
.ops-form { display: grid; gap: 18px; }
.ops-form label { display: grid; gap: 7px; color: var(--color-neutral-700); font-size: 12px; font-weight: 700; }
.ops-form input, .ops-form select { width: 100%; padding: 12px; border: 1px solid var(--color-neutral-300); border-radius: 8px; background: #fbfdfb; }
.ops-form .primary-button { width: fit-content; }
.job-detail dl { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 0; }
.job-detail dt { color: var(--color-neutral-600); font-size: 11px; }
.job-detail dd { margin: 6px 0 0; overflow-wrap: anywhere; font-size: 13px; }
.attempt-sidebar { position: sticky; top: 28px; }
.attempt-list { display: grid; gap: 13px; }
.attempt-card { padding: 17px; border: 1px solid var(--color-neutral-200); border-radius: 11px; background: #fbfdfb; }
.attempt-card header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.attempt-card header strong { font-size: 13px; }
.attempt-card time { color: var(--color-neutral-600); font-size: 10px; }
.attempt-flags { margin-top: 9px; display: flex; gap: 6px; flex-wrap: wrap; }
.flag { padding: 3px 7px; color: var(--color-brand-800); border-radius: 999px; background: var(--color-brand-100); font-size: 9px; font-weight: 700; }
.flag-late { color: var(--color-warning-700); background: var(--color-warning-100); }
.flag-neutral { color: var(--color-neutral-700); background: var(--color-neutral-100); }
.attempt-answer { margin: 13px 0 0; padding: 11px; border-radius: 7px; background: #f0f4f1; font-size: 13px; line-height: 1.6; white-space: pre-wrap; }
.feedback { margin-top: 11px; padding: 8px 10px; border-radius: 7px; font-size: 12px; font-weight: 750; }
.feedback-correct { color: var(--color-success-700); background: var(--color-success-100); }
.feedback-wrong { color: var(--color-danger-700); background: var(--color-danger-100); }
.feedback-detail { margin-top: 11px; font-size: 12px; line-height: 1.6; }
.feedback-detail strong { color: var(--color-neutral-700); }
.feedback-detail p { margin: 4px 0 0; color: var(--color-neutral-600); }
.feedback-detail.direction { padding: 11px; border-left: 3px solid var(--color-warning-700); background: #fbf6e8; }
.compact-empty { padding: 22px; font-size: 12px; }
.question-page-header p { max-width: 760px; }
.question-management-layout { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(320px, .65fr); gap: var(--space-6); align-items: start; }
.question-list-panel { min-width: 0; }
.question-management-list { margin: 0; padding: 0; display: grid; gap: var(--space-4); list-style: none; }
.question-list-panel .section-heading > span { white-space: nowrap; }
.question-management-list > li { min-width: 0; padding: var(--space-5); display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: var(--space-4); align-items: start; border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
.question-order { color: var(--color-brand-600); font-weight: 800; font-variant-numeric: tabular-nums; }
.question-copy { min-width: 0; }
.question-copy h3 { margin: 0; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.question-copy p, .question-copy small { margin: 7px 0 0; color: var(--color-neutral-600); line-height: 1.55; overflow-wrap: anywhere; }
.question-copy small { display: block; }
.question-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
.question-actions form { margin: 0; }
.question-actions button:disabled { opacity: .45; color: var(--color-neutral-500); cursor: not-allowed; }
.danger-text { color: var(--color-danger-700); }
.question-form-panel textarea, .question-form-panel input, .question-form-panel select { width: 100%; }

.auth-main { margin-left: 0; padding: 0; display: grid; place-items: center; overflow: hidden; background: linear-gradient(135deg, #0c241a, #164631 60%, #1c6244); }
.auth-main::before, .auth-main::after { content: ""; position: absolute; border: 1px solid rgba(211,239,191,.12); border-radius: 50%; pointer-events: none; }
.auth-main::before { width: 520px; height: 520px; left: -190px; bottom: -220px; box-shadow: 0 0 0 70px rgba(211,239,191,.025), 0 0 0 140px rgba(211,239,191,.018); }
.auth-main::after { width: 330px; height: 330px; right: -120px; top: -130px; box-shadow: 0 0 0 50px rgba(211,239,191,.025); }
.login-shell { position: relative; z-index: 1; width: min(980px, calc(100vw - 40px)); min-height: 570px; display: grid; grid-template-columns: 1.15fr .85fr; overflow: hidden; border: 1px solid rgba(255,255,255,.12); border-radius: 22px; background: rgba(10,35,25,.32); box-shadow: 0 30px 100px rgba(0,0,0,.28); backdrop-filter: blur(10px); }
.login-intro { padding: 66px 62px; color: #fff; display: flex; flex-direction: column; }
.login-intro .login-brand { margin-bottom: auto; }
.login-intro .eyebrow { margin-top: 60px; color: #b8dc9b; }
.login-intro h1 { margin: 15px 0 18px; font-size: clamp(36px, 4vw, 52px); line-height: 1.18; letter-spacing: -.04em; }
.login-intro > p { max-width: 480px; margin: 0; color: #b8cfc2; font-size: 15px; line-height: 1.8; }
.login-points { margin-top: auto; padding-top: 48px; display: flex; gap: 20px; flex-wrap: wrap; color: #a9c1b4; font-size: 11px; }
.login-points span::before { content: ""; width: 6px; height: 6px; margin-right: 7px; display: inline-block; border-radius: 50%; background: var(--color-brand-200); }
.login-panel { align-self: stretch; padding: 70px 52px; background: var(--color-neutral-0); display: flex; flex-direction: column; justify-content: center; }
.login-brand { display: flex; align-items: center; gap: 11px; }
.login-brand strong { font-size: 16px; letter-spacing: .03em; }
.login-panel h2 { margin: 12px 0 8px; font-size: 30px; letter-spacing: -.03em; }
.login-panel > p { margin: 0 0 30px; color: var(--color-neutral-600); font-size: 13px; }
.stack-form { display: grid; gap: 19px; }
.stack-form label { color: var(--color-neutral-700); font-size: 12px; font-weight: 650; }
.stack-form input { width: 100%; margin-top: 8px; padding: 13px 14px; border: 1px solid var(--color-neutral-300); border-radius: 9px; outline: none; background: #fbfdfb; transition: border .16s, box-shadow .16s; }
.stack-form input:focus { border-color: var(--color-brand-600); box-shadow: var(--focus-ring); }
.stack-form .primary-button { margin-top: 5px; min-height: 47px; }
.login-panel > .alert { margin-bottom: 18px; }

.heatmap-notice { border-left: 4px solid var(--color-warning-700); padding-left: .75rem; }
.heatmap-metric-switch { display: flex; gap: .5rem; margin: 1rem 0; }
.heatmap-metric-switch a { align-items: center; border: 1px solid var(--color-neutral-300); border-radius: var(--radius-sm); display: inline-flex; min-height: 44px; padding: 0 .8rem; }
.heatmap-metric-switch a.active { background: var(--color-brand-700); color: #fff; }
.heatmap-legend { color: var(--color-neutral-600); }
.heatmap-table-scroll { overflow-x: auto; }
.heatmap-detail-scroll { overflow-x: auto; max-width: 100%; }
.heatmap-detail-scroll:focus-visible { outline: 3px solid var(--color-focus-ring); outline-offset: 3px; }
.heatmap-level-0 { background: #eef5f2; }
.heatmap-level-1 { background: #dcece4; }
.heatmap-level-2 { background: #b8d9ca; }
.heatmap-level-3 { background: #81b99e; }
.heatmap-cell-muted { background: var(--color-neutral-100); }
.heatmap-cards { display: none; }
.heatmap-cards article, .heatmap-cards h2, .heatmap-cards a, .heatmap-cards strong, .heatmap-cards span { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.heatmap-detail-page .page-header > div, .heatmap-detail-page .page-header h1 { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }

@media (max-width: 1040px) {
  .sidebar { position: sticky; inset: 0 0 auto; width: 100%; min-height: auto; padding: 13px 18px; flex-direction: row; align-items: center; overflow-x: auto; }
  .sidebar::after { display: none; }
  .brand { padding: 0; }
  .brand small, .nav-section, .user-avatar, .user-name { display: none; }
  .nav-groups { display: flex; margin-left: auto; flex: none; }
  .nav-list { display: flex; }
  .nav-list a { padding: 9px 12px; white-space: nowrap; }
  .nav-list a::before { display: none; }
  .sidebar-footer { margin: 0 0 0 var(--space-2); padding: 0 0 0 var(--space-3); border-top: 0; border-left: 1px solid rgba(221, 239, 228, .1); display: block; flex: none; }
  .main-content { margin-left: 0; padding: 34px 24px 64px; }
  .course-grid, .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .split-section { grid-template-columns: 1fr; gap: 0; }
  .stage-group { grid-template-columns: 1fr; gap: 18px; }
  .login-shell { grid-template-columns: 1fr 420px; }
  .login-intro { padding: 52px 40px; }
  .activity-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .activity-layout { grid-template-columns: 1fr; }
  .attempt-sidebar { position: static; }
  .stage-stat-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .stage-video-layout { grid-template-columns: 1fr; }
  .stage-video-form { position: static; }
  .manifest-upload-layout { grid-template-columns: 1fr; }
  .question-management-layout { grid-template-columns: 1fr; }
  .manifest-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .sidebar { align-items: center; }
  .brand span:last-child { display: none; }
  .brand-mark { width: 36px; height: 36px; }
  .nav-list { padding-right: 4px; }
  .main-content { padding: 26px 17px 54px; }
  .page-header { align-items: flex-start; flex-direction: column; }
  .batch-plan-header { align-items: flex-start; flex-direction: column; }
  .dashboard-hero { min-height: 220px; padding: 27px 24px; align-items: flex-start; }
  .dashboard-hero .secondary-button { margin-top: 8px; }
  .metric-strip { grid-template-columns: repeat(2, 1fr); }
  .metric-strip > div:nth-child(2) { border-right: 0; }
  .metric-strip > div:nth-child(-n+2) { border-bottom: 1px solid var(--color-neutral-200); }
  .metric-strip > div { padding: 18px; }
  .course-grid, .news-grid { grid-template-columns: 1fr; }
  .heatmap-table-scroll { display: none; }
  .heatmap-cards { display: grid; gap: var(--space-4); }
  .heatmap-cards article { border: 1px solid var(--color-neutral-200); border-radius: var(--radius-md); padding: var(--space-4); }
  .heatmap-cards a { display: grid; gap: .3rem; min-height: 44px; padding: .6rem 0; }
  .activity-grid { grid-template-columns: 1fr; }
  .configuration-grid { grid-template-columns: 1fr; }
  .configuration-stage > header { flex-direction: column; }
  .manifest-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .manifest-confirm-bar { align-items: stretch; flex-direction: column; }
  .manifest-confirm-bar .primary-button { width: 100%; }
  .stage-stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .news-card { grid-template-columns: 118px 1fr; }
  .article-page h1 { font-size: 29px; }
  .article-actions { position: static; }
  .course-toolbar { align-items: stretch; flex-direction: column; }
  .external-video-entry { align-items: stretch; flex-direction: column; }
  .learner-stage-header { grid-template-columns: 1fr; gap: var(--space-5); }
  .learner-unit-list li, .learner-practice-list li { grid-template-columns: 42px minmax(0, 1fr); }
  .learner-practice-list li .learner-item-content { grid-column: 1 / -1; }
  .learner-item-action { min-width: 0; grid-column: 2; justify-items: stretch; }
  .learner-practice-list li .learner-item-action { grid-column: 1 / -1; }
  .learner-item-action .primary-button, .learner-item-action .secondary-button { width: 100%; }
  .learner-status { text-align: left; }
  .question-management-list > li { grid-template-columns: 34px minmax(0, 1fr); }
  .question-actions { grid-column: 1 / -1; justify-content: flex-start; flex-wrap: wrap; }
  .question-actions a, .question-actions button { min-height: 44px; min-width: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .answer-question li label { min-height: 44px; align-items: center; }
  .answer-form .primary-button { width: 100%; }
  .roster-inline-form, .roster-current-grid, .roster-actions, .history-columns { grid-template-columns: 1fr; }
  .assignment-form, .assignment-summary { grid-template-columns: 1fr; }
  .ledger-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ledger-filters form { grid-template-columns: 1fr; }
  .alert-form .form-actions { align-items: stretch; flex-direction: column; }
  .alert-form .form-actions > * { min-height: 44px; width: 100%; }
  .ledger-summary div:nth-child(2) { border-right: 0; }
  .assignment-summary div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .assignment-form > .primary-button, .assignment-confirm-form .primary-button { width: 100%; min-height: 44px; }
  .end-assignment-form { align-items: stretch; flex-direction: column; }
  .end-assignment-form button { min-height: 44px; }
  .stage-group { padding: 22px 18px; }
  .login-shell { width: min(430px, calc(100vw - 28px)); min-height: auto; grid-template-columns: 1fr; }
  .login-intro { display: none; }
  .login-panel { padding: 48px 32px; }
}

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

@media (max-width: 460px) {
  .sidebar { padding: 10px 12px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; overflow-x: visible; }
  .nav-groups { width: 100%; margin-left: 0; grid-column: 1 / -1; grid-row: 2; display: grid; gap: 4px; }
  .nav-list { padding: 0; flex-wrap: wrap; gap: 4px; }
  .nav-list a { padding: 8px 10px; font-size: 12px; white-space: normal; }
  .management-nav { padding-top: 4px; border-top: 1px solid rgba(221, 239, 228, .1); }
  .sidebar-footer { margin: 0; padding: 0; border-left: 0; grid-column: 3; grid-row: 1; }
  .page-header h1, .course-header h1 { font-size: 28px; }
  .news-card { min-height: 0; grid-template-columns: 1fr; }
  .news-card img { height: 180px; }
  .unit-list a { grid-template-columns: 36px 1fr; }
  .unit-list b { grid-column: 2; }
  .stage-actions, .stage-actions > * { width: 100%; }
  .stage-availability-panel .stage-availability-layout { grid-template-columns: 1fr; }
  .stage-availability-form { align-items: stretch; flex-direction: column; }
  .stage-availability-form, .stage-availability-form button { width: 100%; }
  .stage-information-form .primary-button { width: 100%; min-height: 44px; }
  .roster-card { padding: var(--space-4); }
  .assignment-panel, .assignment-result, .assignment-history { padding: var(--space-4); }
  .assignment-history-card header { flex-direction: column; }
  .assignment-revoke-form button { width: 100%; min-height: 44px; }
  .ledger-matrix-scroll { display: none; }
  .ledger-export-actions { display: grid; gap: var(--space-3); }
  .ledger-export-actions .primary-button, .ledger-export-actions .secondary-button { min-height: 44px; width: 100%; display: inline-flex; align-items: center; justify-content: center; }
  .ledger-cards { display: grid; gap: var(--space-4); }
  .ledger-cards article { padding: var(--space-4); border: 1px solid var(--color-neutral-200); border-radius: var(--radius-lg); background: var(--color-neutral-0); box-shadow: var(--shadow-raised); }
  .ledger-cards h2 { margin: 0 0 var(--space-3); font-size: 18px; }
  .ledger-cards p { margin: 0 0 var(--space-3); color: var(--color-neutral-600); font-size: 12px; line-height: 1.6; }
  .ledger-cards a { min-height: 44px; padding: var(--space-3) 0; display: grid; gap: var(--space-1); border-top: 1px solid var(--color-neutral-200); }
  .ledger-cards a strong { overflow-wrap: anywhere; }
  .ledger-cards a span { color: var(--color-neutral-600); font-size: 12px; }
  .ledger-cards a small { color: var(--color-neutral-600); font-size: 11px; }
  .ledger-summary { grid-template-columns: 1fr; }
  .ledger-summary div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .roster-card > header { align-items: flex-start; flex-direction: column; }
  .roster-assignment-form .secondary-button, .roster-inline-form .primary-button { width: 100%; min-height: 44px; }
  .stage-stat-row { grid-template-columns: 1fr; }
  .manifest-summary { grid-template-columns: 1fr; }
  .manifest-summary div { border-right: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
}