:root {
  --ink: #16213d;
  --muted: #67708a;
  --line: #dfe5f2;
  --surface: #ffffff;
  --surface-soft: #f6f8fd;
  --primary: #3157d5;
  --primary-dark: #1f3eaa;
  --primary-soft: #e9eeff;
  --violet: #7754d8;
  --green: #18865a;
  --green-soft: #e3f6ed;
  --amber: #a86405;
  --amber-soft: #fff2d8;
  --red: #bc3640;
  --red-soft: #ffe6e8;
  --shadow: 0 18px 48px rgba(37, 52, 98, 0.12);
  --radius: 18px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(circle at top left, rgba(84, 118, 235, .18), transparent 34rem),
    linear-gradient(180deg, #f7f9ff 0%, #eef3ff 100%);
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
a { color: inherit; }

.shell { min-height: 100vh; }
.topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 24px;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(214, 222, 239, .9);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: block;
  object-fit: contain;
  background: transparent;
}
.brand-copy strong { display: block; font-size: 1rem; }
.brand-copy span { display: block; font-size: .79rem; color: var(--muted); }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.user-chip { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--line); }
.avatar { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary-dark); font-weight: 800; }

.layout { display: grid; grid-template-columns: 235px minmax(0, 1fr); min-height: calc(100vh - 71px); }
.sidebar { padding: 22px 14px; border-right: 1px solid rgba(214,222,239,.95); background: rgba(249,251,255,.78); }
.nav-label { margin: 18px 11px 8px; font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 800; }
.nav-btn {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  border: 0;
  background: transparent;
  color: #44506d;
  padding: 11px 12px;
  border-radius: 12px;
  text-align: left;
  font-weight: 700;
}
.nav-btn:hover { background: #eef2fd; }
.nav-btn.active { color: var(--primary-dark); background: var(--primary-soft); }
.nav-icon { width: 24px; text-align: center; }
.sidebar-card { margin-top: 24px; padding: 14px; border-radius: 15px; background: linear-gradient(145deg, #263b83, #5d45bd); color: white; }
.sidebar-card p { margin: 8px 0 0; font-size: .83rem; line-height: 1.45; opacity: .9; }

.main { padding: 28px; min-width: 0; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; margin-bottom: 22px; }
.page-head h1 { margin: 0 0 6px; font-size: clamp(1.75rem, 2.6vw, 2.45rem); letter-spacing: -.035em; }
.page-head p { margin: 0; color: var(--muted); max-width: 760px; line-height: 1.55; }
.page-actions { display: flex; gap: 9px; flex-wrap: wrap; justify-content: flex-end; }

.hero {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.35fr .65fr;
  gap: 28px;
  padding: 30px;
  margin-bottom: 22px;
  border-radius: 24px;
  color: white;
  background: linear-gradient(130deg, #2748bd 0%, #526de0 48%, #7b55d5 100%);
  box-shadow: var(--shadow);
}
.hero::after { content: ""; position: absolute; width: 270px; height: 270px; right: -70px; top: -120px; border-radius: 50%; border: 48px solid rgba(255,255,255,.1); }
.hero h2 { margin: 0 0 10px; font-size: clamp(1.55rem, 3vw, 2.35rem); }
.hero p { margin: 0; line-height: 1.6; opacity: .92; max-width: 720px; }
.hero-stat { position: relative; z-index: 1; align-self: center; padding: 18px; border: 1px solid rgba(255,255,255,.25); border-radius: 18px; background: rgba(255,255,255,.12); backdrop-filter: blur(8px); }
.hero-stat strong { display: block; font-size: 2.6rem; }
.hero-stat span { opacity: .86; }

.grid { display: grid; gap: 18px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0,1fr)); }
.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }

.card { background: var(--surface); border: 1px solid rgba(216,224,241,.95); border-radius: var(--radius); box-shadow: 0 9px 28px rgba(39,53,98,.07); min-width: 0; }
.card-pad { padding: 20px; }
.card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 18px 20px 12px; }
.card-head h3 { margin: 0; font-size: 1.05rem; }
.card-head p { margin: 5px 0 0; color: var(--muted); font-size: .86rem; }
.card-body { padding: 0 20px 20px; }
.kpi { padding: 18px; }
.kpi-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kpi-icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--primary-soft); color: var(--primary); font-size: 1.15rem; }
.kpi strong { display: block; margin-top: 16px; font-size: 1.9rem; letter-spacing: -.03em; }
.kpi span { color: var(--muted); font-size: .86rem; }
.kpi small { display: block; margin-top: 8px; color: var(--green); font-weight: 700; }

.btn { border: 0; border-radius: 11px; padding: 10px 14px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s ease, box-shadow .15s ease, background .15s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { color: white; background: var(--primary); box-shadow: 0 8px 20px rgba(49,87,213,.2); }
.btn-primary:hover { background: var(--primary-dark); }
.btn-secondary { color: var(--primary-dark); background: var(--primary-soft); }
.btn-ghost { color: #4b5874; background: transparent; border: 1px solid var(--line); }
.btn-danger { color: var(--red); background: var(--red-soft); }
.btn-sm { padding: 7px 10px; border-radius: 9px; font-size: .82rem; }
.icon-btn { width: 38px; height: 38px; border: 1px solid var(--line); background: white; border-radius: 11px; display: grid; place-items: center; }

.badge { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 9px; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.badge-blue { background: var(--primary-soft); color: var(--primary-dark); }
.badge-green { background: var(--green-soft); color: var(--green); }
.badge-amber { background: var(--amber-soft); color: var(--amber); }
.badge-red { background: var(--red-soft); color: var(--red); }
.badge-grey { background: #edf0f6; color: #59637c; }

.table-wrap { overflow-x: auto; border-top: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: .88rem; }
th, td { text-align: left; padding: 12px 14px; border-bottom: 1px solid #edf0f6; vertical-align: top; }
th { color: #657089; font-size: .75rem; text-transform: uppercase; letter-spacing: .035em; background: #fafbfe; }
tbody tr:hover { background: #fafbff; }
.table-link { color: var(--primary-dark); font-weight: 800; border: 0; background: transparent; padding: 0; text-align: left; }
.empty { padding: 28px; text-align: center; color: var(--muted); }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: grid; gap: 6px; }
.field label { font-size: .79rem; color: #57627c; font-weight: 800; }
.field input, .field select, .field textarea {
  width: 100%;
  border: 1px solid #d9e0ef;
  border-radius: 11px;
  padding: 10px 11px;
  color: var(--ink);
  background: white;
  outline: none;
}
.field input:focus, .field select:focus, .field textarea:focus { border-color: #7893eb; box-shadow: 0 0 0 3px rgba(49,87,213,.11); }
.field textarea { min-height: 92px; resize: vertical; }
.field-help { color: var(--muted); font-size: .75rem; line-height: 1.35; }
.form-actions { display: flex; justify-content: flex-end; gap: 9px; margin-top: 16px; }

.progress-row { display: grid; grid-template-columns: 150px minmax(0,1fr) 46px; gap: 12px; align-items: center; margin: 12px 0; }
.progress-track { height: 10px; background: #edf0f7; border-radius: 999px; overflow: hidden; }
.progress-bar { height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--violet)); }

.timeline { display: grid; gap: 13px; }
.timeline-item { display: grid; grid-template-columns: 14px minmax(0,1fr); gap: 12px; }
.timeline-dot { width: 12px; height: 12px; margin-top: 5px; border-radius: 50%; background: var(--primary); box-shadow: 0 0 0 5px var(--primary-soft); }
.timeline-content { padding: 0 0 16px; border-bottom: 1px solid var(--line); }
.timeline-content h4 { margin: 0 0 5px; }
.timeline-content p { margin: 4px 0; color: #4f5b75; line-height: 1.48; }
.timeline-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

.feedback-card { padding: 18px; border-left: 5px solid var(--primary); }
.feedback-card.red { border-left-color: var(--red); }
.feedback-card.amber { border-left-color: #d08b1f; }
.feedback-card.green { border-left-color: var(--green); }
.feedback-card h4 { margin: 0; }
.feedback-section { margin-top: 13px; }
.feedback-section strong { display: block; font-size: .78rem; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); margin-bottom: 4px; }
.feedback-section p { margin: 0; line-height: 1.5; }

.chart-wrap { min-height: 295px; overflow-x: auto; }
.grade-chart { width: 100%; min-width: 560px; height: 290px; display: block; }
.chart-label { font-size: 11px; fill: #667088; }
.chart-title { font-size: 12px; fill: #35415f; font-weight: 700; }

.alert { padding: 13px 15px; border-radius: 12px; display: flex; gap: 10px; align-items: flex-start; line-height: 1.45; }
.alert-info { color: #29408d; background: #eaf0ff; border: 1px solid #cfdbff; }
.alert-warning { color: #7c4b06; background: #fff4dd; border: 1px solid #f4ddae; }
.alert-danger { color: #8c2630; background: #ffeaec; border: 1px solid #f7c7cc; }
.alert-success { color: #11633f; background: #e6f7ef; border: 1px solid #bce8d3; }

.pill-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 18px; }
.pill-tab { border: 1px solid var(--line); background: white; color: #53607c; border-radius: 999px; padding: 8px 13px; font-weight: 800; }
.pill-tab.active { color: white; border-color: var(--primary); background: var(--primary); }

.auth-shell { min-height: 100vh; display: grid; grid-template-columns: minmax(0,1.05fr) minmax(420px,.95fr); }
.auth-art { position: relative; overflow: hidden; padding: clamp(36px, 7vw, 90px); color: white; background: linear-gradient(145deg, #1f3ba2 0%, #4a62d3 55%, #7c51cf 100%); display: flex; flex-direction: column; justify-content: center; }
.auth-art::before, .auth-art::after { content: ""; position: absolute; border-radius: 50%; border: 55px solid rgba(255,255,255,.08); }
.auth-art::before { width: 320px; height: 320px; right: -180px; top: -130px; }
.auth-art::after { width: 220px; height: 220px; left: -120px; bottom: -120px; }
.auth-art h1 { position: relative; margin: 16px 0 12px; font-size: clamp(2.6rem, 6vw, 5.6rem); letter-spacing: -.06em; line-height: .95; }
.auth-art p { position: relative; max-width: 650px; font-size: 1.08rem; line-height: 1.65; opacity: .92; }
.auth-points { position: relative; display: grid; gap: 12px; margin-top: 30px; max-width: 570px; }
.auth-point { display: flex; gap: 12px; padding: 13px 15px; border-radius: 14px; background: rgba(255,255,255,.11); border: 1px solid rgba(255,255,255,.18); }
.auth-panel { padding: clamp(28px, 6vw, 72px); display: flex; align-items: center; justify-content: center; background: rgba(250,252,255,.96); }
.auth-card { width: min(470px, 100%); }
.auth-card h2 { margin: 0 0 8px; font-size: 2rem; letter-spacing: -.035em; }
.auth-card > p { color: var(--muted); margin: 0 0 22px; line-height: 1.5; }
.auth-tabs { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; padding: 5px; background: #e9edf7; border-radius: 13px; margin-bottom: 18px; }
.auth-tab { border: 0; border-radius: 9px; padding: 10px; background: transparent; color: #5d6881; font-weight: 800; }
.auth-tab.active { background: white; color: var(--primary-dark); box-shadow: 0 5px 16px rgba(35,50,92,.1); }
.auth-card form { display: grid; gap: 13px; }
.auth-card .btn { width: 100%; margin-top: 4px; }
.auth-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: .82rem; }
.link-btn { border: 0; padding: 0; background: transparent; color: var(--primary-dark); font-weight: 800; }
.demo-box { margin-top: 18px; padding: 14px; border-radius: 13px; background: #f0f3fc; border: 1px solid var(--line); }
.demo-roles { display: grid; grid-template-columns: repeat(2,1fr); gap: 8px; margin-top: 10px; }

.modal-backdrop { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; padding: 20px; background: rgba(20,29,57,.55); backdrop-filter: blur(4px); }
.modal { width: min(760px, 100%); max-height: min(90vh, 900px); overflow-y: auto; background: white; border-radius: 20px; box-shadow: 0 30px 90px rgba(12,22,52,.35); }
.modal-head { position: sticky; top: 0; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px 20px; background: white; border-bottom: 1px solid var(--line); }
.modal-head h3 { margin: 0; }
.modal-body { padding: 20px; }

.toast-stack { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: grid; gap: 10px; width: min(390px, calc(100vw - 36px)); }
.toast { padding: 13px 15px; border-radius: 12px; background: #1f2d50; color: white; box-shadow: 0 14px 35px rgba(14,26,58,.25); animation: toast-in .2s ease; }
.toast.error { background: #8e2d36; }
.toast.success { background: #12613f; }
@keyframes toast-in { from { transform: translateY(10px); opacity: 0; } }

.loading { min-height: 100vh; display: grid; place-items: center; color: var(--muted); }
.spinner { width: 38px; height: 38px; border: 4px solid #dce3f6; border-top-color: var(--primary); border-radius: 50%; animation: spin .8s linear infinite; margin: 0 auto 12px; }
@keyframes spin { to { transform: rotate(360deg); } }

.demo-banner { padding: 9px 18px; text-align: center; color: #6e4304; background: #fff0cd; border-bottom: 1px solid #eddaa8; font-size: .84rem; font-weight: 700; }
.muted { color: var(--muted); }
.small { font-size: .82rem; }
.nowrap { white-space: nowrap; }
.right { text-align: right; }
.hidden { display: none !important; }

@media (max-width: 1120px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0,1fr)); }
  .span-3 { grid-column: span 2; }
}
@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-art { min-height: 360px; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: sticky; top: 71px; z-index: 15; padding: 8px 12px; border-right: 0; border-bottom: 1px solid var(--line); display: flex; gap: 7px; overflow-x: auto; }
  .nav-label, .sidebar-card { display: none; }
  .nav-btn { width: auto; white-space: nowrap; }
  .main { padding: 20px 16px; }
  .hero { grid-template-columns: 1fr; }
}
@media (max-width: 650px) {
  .topbar { padding: 11px 13px; }
  .brand-copy span, .user-chip .user-details { display: none; }
  .page-head { flex-direction: column; }
  .page-actions { justify-content: flex-start; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .span-2, .span-3 { grid-column: span 1; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .full { grid-column: auto; }
  .hero { padding: 22px; }
  .auth-panel { padding: 28px 18px; }
  .auth-art { padding: 38px 24px; }
  .progress-row { grid-template-columns: 110px minmax(0,1fr) 40px; }
}

@media print {
  body { background: white; }
  .topbar, .sidebar, .page-actions, .btn, .demo-banner { display: none !important; }
  .layout { display: block; }
  .main { padding: 0; }
  .card, .hero { box-shadow: none; break-inside: avoid; }
}

/* Pupil-owned feedback editor */
.rich-editor-field { gap: 8px; }
.rich-editor-shell { border: 1px solid #d9e0ef; border-radius: 13px; overflow: hidden; background: white; }
.rich-editor-shell:focus-within { border-color: #7893eb; box-shadow: 0 0 0 3px rgba(49,87,213,.11); }
.rich-toolbar { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; padding: 8px 10px; background: #f7f9fd; border-bottom: 1px solid #e3e8f3; }
.toolbar-label { color: #667088; font-size: .75rem; font-weight: 800; margin-left: 4px; }
.format-button, .highlight-button { border: 1px solid #d7deec; background: white; border-radius: 7px; min-width: 32px; height: 30px; padding: 0 9px; color: #35415f; font-size: .78rem; font-weight: 800; }
.format-button:hover, .highlight-button:hover { border-color: #7893eb; transform: translateY(-1px); }
.clear-format { min-width: auto; }
.highlight-button { width: 30px; min-width: 30px; padding: 0; }
.highlight-yellow { background: #fff3a3; }
.highlight-green { background: #d3f5d5; }
.highlight-pink { background: #ffd6e8; }
.highlight-blue { background: #cfe5ff; }
.rich-editor { min-height: 145px; padding: 14px; outline: none; line-height: 1.65; white-space: pre-wrap; }
.rich-editor:empty::before { content: attr(data-placeholder); color: #8b94a9; pointer-events: none; }
.rich-editor p, .rich-output p { margin: 0 0 8px; }
.rich-editor p:last-child, .rich-output p:last-child { margin-bottom: 0; }
.rich-output { line-height: 1.58; color: #3f4b66; overflow-wrap: anywhere; }
.rich-output span[style] { border-radius: 3px; padding: 0 2px; }
.table-rich { max-width: 340px; max-height: 88px; overflow: hidden; line-height: 1.4; }

.autosave-status { display: flex; align-items: center; gap: 11px; padding: 12px 14px; border-radius: 12px; background: #f2f5fb; border: 1px solid #dfe5f1; }
.autosave-status div { display: grid; gap: 2px; }
.autosave-status strong { font-size: .88rem; }
.autosave-status small { color: var(--muted); }
.autosave-dot { width: 11px; height: 11px; border-radius: 50%; background: #8b94a9; flex: 0 0 auto; }
.autosave-status[data-state="unsaved"] { background: #fff8e9; border-color: #f0dca8; }
.autosave-status[data-state="unsaved"] .autosave-dot { background: #d08b1f; }
.autosave-status[data-state="saving"] { background: #edf2ff; border-color: #cfdcff; }
.autosave-status[data-state="saving"] .autosave-dot { background: var(--primary); animation: pulse-save .9s infinite alternate; }
.autosave-status[data-state="saved"] { background: #eaf8f1; border-color: #bce8d3; }
.autosave-status[data-state="saved"] .autosave-dot { background: var(--green); }
.autosave-status[data-state="error"] { background: #ffeaec; border-color: #f7c7cc; }
.autosave-status[data-state="error"] .autosave-dot { background: var(--red); }
@keyframes pulse-save { from { opacity: .35; transform: scale(.8); } to { opacity: 1; transform: scale(1.2); } }

.result-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 14px; }
.grade-preview { margin-top: 10px; padding: 12px 14px; border-radius: 11px; background: #eaf0ff; color: #29408d; border: 1px solid #cfdbff; }
.grade-preview strong { font-size: 1rem; }
.result-summary { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 13px; padding: 11px 13px; border-radius: 11px; background: #f1f4fb; }
.result-summary strong { font-size: 1.1rem; }
.result-summary span { color: var(--primary-dark); font-weight: 800; }
.feedback-editor-actions { position: sticky; bottom: -20px; margin: 8px -20px -20px; padding: 14px 20px; background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(8px); }

.draft-grid { display: grid; gap: 10px; }
.draft-card { display: flex; justify-content: space-between; align-items: center; gap: 15px; padding: 13px 14px; border: 1px solid #dfe5f1; border-radius: 12px; background: #fbfcff; }
.draft-card h4, .draft-card p { margin: 3px 0; }
.draft-card small { color: var(--muted); }

.live-monitor { border: 1px solid #cfdcff; }
.live-indicator { display: inline-flex; align-items: center; gap: 7px; color: #11633f; font-size: .8rem; font-weight: 900; }
.live-indicator span { width: 9px; height: 9px; border-radius: 50%; background: #1da36a; box-shadow: 0 0 0 5px rgba(29,163,106,.12); animation: live-pulse 1.4s infinite; }
@keyframes live-pulse { 0%,100% { opacity: 1; } 50% { opacity: .45; } }
.live-draft-list { display: grid; gap: 10px; }
.live-draft { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px; border: 1px solid #e0e6f2; border-radius: 12px; background: #fafcff; }
.live-draft h4, .live-draft p { margin: 3px 0; }
.live-draft-side { display: grid; justify-items: end; gap: 9px; color: var(--muted); white-space: nowrap; }

@media (max-width: 650px) {
  .result-grid { grid-template-columns: 1fr; }
  .draft-card, .live-draft { align-items: flex-start; flex-direction: column; }
  .live-draft-side { justify-items: start; white-space: normal; }
  .feedback-editor-actions { justify-content: stretch; }
  .feedback-editor-actions .btn { flex: 1; }
}

.code-display {
  margin: 18px 0;
  padding: 18px;
  border: 1px dashed var(--border, #cfd6ee);
  border-radius: 14px;
  background: #f7f8ff;
  overflow-wrap: anywhere;
  font-size: 1.05rem;
}

/* Pupil dashboard: average gauge and feedback RAG chart */
.pupil-insight-grid { align-items: stretch; }
.insight-card { overflow: hidden; }
.insight-card .card-body { min-height: 290px; display: grid; align-items: center; }
.average-gauge-wrap { display: grid; justify-items: center; gap: 4px; }
.average-gauge { width: min(100%, 430px); height: auto; overflow: visible; }
.gauge-track, .gauge-zone { fill: none; stroke-linecap: butt; }
.gauge-track { stroke: #edf0f6; stroke-width: 30; }
.gauge-zone { stroke-width: 22; }
.gauge-zone-red { stroke: #d9403a; }
.gauge-zone-amber { stroke: #f2bd00; }
.gauge-zone-green { stroke: #52aa4d; }
.gauge-end-tick, .gauge-target-tick { stroke: #17203b; stroke-width: 4; stroke-linecap: round; }
.gauge-target-tick { stroke-width: 5; }
.gauge-needle { stroke: #e27947; stroke-width: 7; stroke-linecap: round; filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.gauge-hub { fill: #2d7a70; stroke: #17203b; stroke-width: 3; }
.gauge-hub-empty { fill: #cbd3e2; }
.gauge-scale-label { fill: #68728a; font-size: 15px; font-weight: 700; }
.gauge-value { fill: var(--ink); font-size: 30px; font-weight: 900; }
.gauge-grade { fill: var(--primary-dark); font-size: 16px; font-weight: 900; }
.gauge-summary { color: var(--muted); font-size: .82rem; text-align: center; }
.gauge-summary strong { color: var(--ink); }

.rag-chart-layout { display: grid; grid-template-columns: minmax(180px, .9fr) minmax(190px, 1.1fr); align-items: center; gap: 16px; }
.rag-donut { width: min(100%, 270px); justify-self: center; }
.rag-ring, .rag-segment { fill: none; stroke-width: 38; }
.rag-ring { stroke: #edf0f6; }
.rag-segment { transform: rotate(-90deg); transform-origin: 110px 110px; stroke-linecap: butt; }
.rag-segment.rag-green { stroke: #52aa4d; }
.rag-segment.rag-amber { stroke: #f2bd00; }
.rag-segment.rag-red { stroke: #d9403a; }
.rag-segment.rag-empty { stroke: #dfe5f0; }
.rag-total { fill: var(--ink); font-size: 34px; font-weight: 900; }
.rag-total-label { fill: var(--muted); font-size: 11px; font-weight: 700; }
.rag-legend { display: grid; gap: 11px; }
.rag-legend-row { display: grid; grid-template-columns: 14px 1fr auto 42px; align-items: center; gap: 9px; padding: 9px 10px; border: 1px solid var(--line); border-radius: 11px; background: #fafbfe; }
.rag-legend-row strong { font-size: 1.05rem; }
.rag-legend-row small { color: var(--muted); text-align: right; }
.rag-key { width: 12px; height: 12px; border-radius: 50%; }
.rag-key.rag-green { background: #52aa4d; }
.rag-key.rag-amber { background: #f2bd00; }
.rag-key.rag-red { background: #d9403a; }

@media (max-width: 760px) {
  .rag-chart-layout { grid-template-columns: 1fr; }
  .rag-donut { max-width: 230px; }
  .insight-card .card-body { min-height: auto; }
}

/* V5 account and workspace controls */
.auth-tabs-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.auth-tabs-three .auth-tab { padding-inline: 7px; font-size: .82rem; }
.auth-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: .78rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.workspace-switcher { max-width: 250px; }
@media (max-width: 620px) {
  .auth-tabs-three { grid-template-columns: 1fr; }
  .workspace-switcher { max-width: 170px; }
}

/* V6 shared-class controls */
.check-card-list {
  display: grid;
  gap: 10px;
  margin-top: 8px;
}

.check-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--border, #dfe4ee);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
}

.check-card:hover {
  border-color: #7c5cff;
}

.check-card input {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
}

.check-card span {
  display: grid;
  gap: 2px;
}

.check-card small {
  color: var(--muted, #687086);
}

/* V6.2 multi-role, activation and workspace-status controls */
.auth-tabs-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.auth-tabs-four .auth-tab { padding-inline: 7px; font-size: .79rem; }
.area-switcher {
  display: flex;
  gap: 7px;
  padding: 5px;
  margin: 0 18px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  overflow-x: auto;
}
.area-switch {
  flex: 1 0 max-content;
  border: 0;
  border-radius: 10px;
  padding: 9px 13px;
  background: transparent;
  color: #59647d;
  font-weight: 800;
}
.area-switch:hover { background: #eef2ff; color: var(--primary-dark); }
.area-switch.active { background: var(--primary); color: white; box-shadow: 0 5px 14px rgba(49,87,213,.2); }
.workspace-banner {
  padding: 9px 18px;
  text-align: center;
  color: #29408d;
  background: #eaf0ff;
  border-bottom: 1px solid #cfdbff;
  font-size: .84rem;
}
.workspace-banner-paused { color: #7c4b06; background: #fff4dd; border-bottom-color: #f4ddae; }

@media (max-width: 860px) {
  .auth-tabs-four { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-switcher { margin: 0 10px 10px; }
}

@media (max-width: 520px) {
  .auth-tabs-four { grid-template-columns: 1fr; }
}

/* V6.3 — Feedback to Action */
.list-format{min-width:64px;font-size:.78rem}
.rich-output ul,.rich-output ol,.table-rich ul,.table-rich ol{margin:.45rem 0;padding-left:1.45rem}
.rich-output li,.table-rich li{margin:.2rem 0}
.session-grid{display:grid;gap:12px}
.session-card,.teacher-session-card{display:flex;gap:18px;align-items:center;justify-content:space-between;border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--surface)}
.session-card h4,.teacher-session-card h4{margin:5px 0}
.session-card p,.teacher-session-card p{margin:3px 0;color:var(--muted)}
.teacher-session-list{display:grid;gap:14px}
.teacher-session-card{align-items:stretch}
.session-main{flex:1;min-width:220px}
.session-stat-grid{display:grid;grid-template-columns:repeat(5,minmax(72px,1fr));gap:8px;align-self:center}
.session-stat-grid div{background:var(--surface-soft);border-radius:10px;padding:9px;text-align:center}
.session-stat-grid strong{display:block;font-size:1.15rem}
.session-stat-grid span{display:block;font-size:.72rem;color:var(--muted);margin-top:2px}
.session-actions{display:flex;flex-wrap:wrap;gap:7px;align-content:center;justify-content:flex-end;max-width:250px}
.improvement-filters .filter-row{display:flex;gap:14px;align-items:end;flex-wrap:wrap}
.improvement-filters .field{margin:0;min-width:180px}
.improvement-filters .field.grow{flex:1;min-width:260px}
.improvement-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.improvement-card{padding:18px;position:relative}
.improvement-card.pinned{box-shadow:0 0 0 2px rgba(240,177,0,.35);background:linear-gradient(180deg,#fffdf5 0%,var(--surface) 35%)}
.pin-button{border:1px solid var(--line);background:var(--surface);width:36px;height:36px;border-radius:50%;font-size:1.1rem;color:#9aa2b6;cursor:pointer}
.pin-button.active{color:#e0a800;background:#fff8d8;border-color:#e8cb62}
.compact-improvement-list{display:grid;gap:10px}
.compact-improvement-list>div{border:1px solid var(--line);border-radius:10px;padding:10px}
.compact-improvement-list span{float:right}
.compact-improvement-list p{margin:5px 0 0;color:var(--muted)}
.risk-explanation{margin-top:6px}
.risk-score-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:8px}
.risk-explanation ul{list-style:none;padding:0;margin:0;display:grid;gap:6px}
.risk-explanation li{display:flex;justify-content:space-between;gap:12px;padding:7px 9px;background:rgba(255,255,255,.55);border-radius:8px}
.risk-explanation li span{display:flex;flex-direction:column}
.risk-explanation li small{font-weight:normal;color:var(--muted);margin-top:2px}
.risk-override-note{margin-top:10px;padding:9px 11px;border-left:4px solid var(--primary);background:var(--surface-soft);border-radius:6px}
.risk-override-note p{margin:4px 0}
.risk-reason-list{margin:0;padding-left:18px;display:grid;gap:3px}
.table-actions{display:flex;flex-wrap:wrap;gap:6px}

@media (max-width:1000px){
  .teacher-session-card{flex-direction:column}
  .session-stat-grid{width:100%}
  .session-actions{max-width:none;justify-content:flex-start}
}
@media (max-width:760px){
  .session-card{align-items:flex-start;flex-direction:column}
  .session-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .improvement-grid{grid-template-columns:1fr}
  .improvement-filters .field,.improvement-filters .field.grow{min-width:100%;width:100%}
}