/* Teacher workspace skin, built on design-system.css tokens. Everything is scoped to body.tw-teacher (set by
   teacher-workspace.js only for a signed-in teacher), so the student, admin and public pages are not affected.
   Older layers style the same elements with !important in places; those few overrides are marked "older layer". */

/* ---------- Base ---------- */
body.tw-teacher { background: var(--ds-bg); color: var(--ds-text); font-family: var(--ds-font-ar); font-size: var(--ds-text-base); line-height: var(--ds-leading); -webkit-font-smoothing: antialiased; }
html[lang="en"] body.tw-teacher { font-family: var(--ds-font-en); }
body.tw-teacher #app { min-height: 100vh; }
body.tw-teacher .tw-icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; flex: 0 0 auto; }
body.tw-teacher :focus-visible { outline: 3px solid var(--ds-primary-400); outline-offset: 2px; }
body.tw-teacher #app .main:focus { outline: none; }
.tw-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tw-skip { position: fixed; z-index: 1000; inset-inline-start: 12px; top: -60px; padding: 10px 16px; border-radius: var(--ds-radius-md); background: var(--ds-primary-700); color: #fff; font-weight: 700; text-decoration: none; transition: top .15s; }
.tw-skip:focus { top: 12px; }
body:not(.tw-teacher) .tw-skip, body:not(.tw-teacher) .tw-scrim { display: none; }
body.tw-teacher bdi.tw-code, body.tw-teacher .tw-code { font-family: var(--ds-font-mono); font-size: var(--ds-text-sm); color: var(--ds-text-muted); }

/* ---------- Sidebar ---------- */
body.tw-teacher #app > aside.tw-sidebar {
  position: fixed; inset-block: 0; inset-inline-start: 0; z-index: 40; display: flex; flex-direction: column; gap: 0;
  width: 272px; height: 100vh; height: 100dvh; padding: 0; overflow: hidden; border: 0; border-inline-end: 1px solid var(--ds-border);
  background: var(--ds-surface); box-shadow: none;
}
body.tw-teacher .tw-sidebar-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 20px 18px 14px; }
body.tw-teacher .tw-brand { display: flex; align-items: center; gap: 10px; min-width: 0; color: var(--ds-ink); text-decoration: none; direction: ltr; border-radius: var(--ds-radius-md); }
body.tw-teacher .tw-brand img { width: 40px; height: 40px; object-fit: contain; }
body.tw-teacher .tw-brand > span { display: grid; line-height: 1.15; }
body.tw-teacher .tw-brand b { font-family: var(--ds-font-en); font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
body.tw-teacher .tw-brand b span { color: var(--ds-primary-600); }
body.tw-teacher .tw-brand small { margin-top: 3px; color: var(--ds-text-muted); font-family: var(--ds-font-ar); font-size: var(--ds-text-xs); font-weight: 600; }
html[lang="en"] body.tw-teacher .tw-brand small { font-family: var(--ds-font-en); }
body.tw-teacher #app .tw-sidebar .tw-nav-close { display: none; }

body.tw-teacher #app > aside.tw-sidebar .nav.tw-nav { display: block; flex: 1 1 auto; min-height: 0; margin: 0; padding: 4px 12px 16px; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
body.tw-teacher .tw-nav-section + .tw-nav-section { margin-top: 14px; }
body.tw-teacher .tw-nav-heading { margin: 0 0 4px; padding: 0 12px; color: var(--ds-text-subtle); font-size: var(--ds-text-xs); font-weight: 700; letter-spacing: .02em; }
html[lang="en"] body.tw-teacher .tw-nav-heading { text-transform: uppercase; letter-spacing: .06em; font-size: 11px; }
/* older layer: body[data-workspace] .nav button(.active) uses !important */
body.tw-teacher #app > aside.tw-sidebar .nav button.tw-nav-link {
  position: relative; display: flex !important; align-items: center; gap: 12px; width: 100%; min-height: 42px; margin: 2px 0; padding: 8px 12px !important;
  border: 0 !important; border-radius: var(--ds-radius-md) !important; background: transparent !important; color: var(--ds-text) !important;
  font-size: var(--ds-text-md) !important; font-weight: 500 !important; line-height: 1.35; text-align: start; white-space: normal !important; box-shadow: none !important;
  transition: background var(--ds-duration) var(--ds-ease), color var(--ds-duration) var(--ds-ease);
}
body.tw-teacher #app > aside.tw-sidebar .nav button.tw-nav-link .tw-icon { color: var(--ds-text-subtle); }
body.tw-teacher #app > aside.tw-sidebar .nav button.tw-nav-link:hover { background: var(--ds-surface-muted) !important; color: var(--ds-ink) !important; }
body.tw-teacher #app > aside.tw-sidebar .nav button.tw-nav-link.active { background: var(--ds-primary-50) !important; color: var(--ds-primary-700) !important; font-weight: 700 !important; }
body.tw-teacher #app > aside.tw-sidebar .nav button.tw-nav-link.active .tw-icon { color: var(--ds-primary-600); }
body.tw-teacher #app > aside.tw-sidebar .nav button.tw-nav-link.active::before { content: ""; position: absolute; inset-block: 9px; inset-inline-start: -12px; width: 4px; border-radius: 0 4px 4px 0; background: var(--ds-primary-600); }
[dir="rtl"] body.tw-teacher #app > aside.tw-sidebar .nav button.tw-nav-link.active::before { border-radius: 4px 0 0 4px; }
body.tw-teacher #app > aside.tw-sidebar .nav button.tw-nav-link:focus-visible { outline: 3px solid var(--ds-primary-400) !important; outline-offset: -1px; }
body.tw-teacher #app > aside.tw-sidebar .nav button .tw-nav-label { display: block; flex: 1 1 auto; width: auto; min-width: 0; margin: 0; font-size: inherit; line-height: 1.35; }
body.tw-teacher #app > aside.tw-sidebar .nav button .navcounter { position: static !important; display: inline-grid; place-items: center; min-width: 22px; height: 22px; margin: 0 !important; padding: 0 7px; border-radius: var(--ds-radius-full); background: var(--ds-primary-600) !important; color: #fff !important; font-size: 11px; font-weight: 700; line-height: 1; box-shadow: none !important; }

body.tw-teacher .tw-sidebar-footer { display: grid; gap: 2px; padding: 12px; border-top: 1px solid var(--ds-border); background: var(--ds-surface); }
body.tw-teacher .tw-sidebar-user { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 8px 10px; }
body.tw-teacher .tw-sidebar-user > span:last-child { display: grid; min-width: 0; line-height: 1.3; }
body.tw-teacher .tw-sidebar-user b { overflow: hidden; color: var(--ds-ink); font-size: var(--ds-text-md); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher .tw-sidebar-user small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher .tw-side-action { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 40px; padding: 8px 12px; border: 0; border-radius: var(--ds-radius-md); background: transparent; color: var(--ds-text); font: inherit; font-size: var(--ds-text-md); text-align: start; cursor: pointer; }
body.tw-teacher .tw-side-action .tw-icon { color: var(--ds-text-subtle); width: 19px; height: 19px; }
body.tw-teacher .tw-side-action:hover { background: var(--ds-surface-muted); }
body.tw-teacher .tw-side-logout, body.tw-teacher .tw-side-logout .tw-icon { color: var(--ds-danger); }
/* older layer: action-colors.js paints sign-out buttons with !important */
body.tw-teacher #app .tw-sidebar .tw-side-logout { border: 0 !important; background: transparent !important; color: var(--ds-danger) !important; }
body.tw-teacher #app .tw-sidebar .tw-side-logout:hover { background: var(--ds-danger-bg) !important; }

body.tw-teacher .tw-avatar { display: inline-grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%; background: linear-gradient(135deg, var(--ds-primary-400), var(--ds-primary-600)); color: #fff; font-weight: 700; font-size: 15px; }
body.tw-teacher .tw-avatar--sm { flex-basis: 34px; width: 34px; height: 34px; font-size: 14px; background: var(--ds-primary-100); color: var(--ds-primary-700); }

/* ---------- Main + top bar ---------- */
body.tw-teacher #app > .main { min-width: 0; margin-inline-start: 272px; background: transparent; }
body.tw-teacher #app > .main > header.tw-topbar {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; min-height: 64px; padding: 0 32px; border: 0; border-bottom: 1px solid var(--ds-border); background: rgba(255, 255, 255, .88);
  -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); box-shadow: none;
}
body.tw-teacher .tw-topbar-start { display: flex; align-items: center; gap: 10px; min-width: 0; }
body.tw-teacher .tw-breadcrumb { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); white-space: nowrap; overflow: hidden; }
body.tw-teacher .tw-breadcrumb b { overflow: hidden; color: var(--ds-ink); font-weight: 600; text-overflow: ellipsis; }
body.tw-teacher .tw-breadcrumb span[aria-hidden] { color: var(--ds-border-strong); }
body.tw-teacher .tw-icon-button { display: inline-grid; place-items: center; width: 40px; height: 40px; flex: 0 0 40px; padding: 0; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-text); cursor: pointer; }
body.tw-teacher .tw-icon-button:hover { background: var(--ds-primary-50); color: var(--ds-primary-700); }
body.tw-teacher #app .tw-menu-toggle { display: none; }
body.tw-teacher #app header.tw-topbar .controls { display: flex; align-items: center; gap: 10px; flex: 0 0 auto; }
body.tw-teacher #app header.tw-topbar .notificationbell { position: relative; display: inline-grid; place-items: center; width: 40px; height: 40px; padding: 0; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-text); }
body.tw-teacher #app header.tw-topbar .notificationbell:hover { background: var(--ds-primary-50); color: var(--ds-primary-700); }
body.tw-teacher #app header.tw-topbar .notificationbell .bellcount { position: absolute; top: -6px; left: auto; right: auto; inset-inline-end: -6px; display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px; border: 2px solid #fff; border-radius: var(--ds-radius-full); background: var(--ds-red-500); color: #fff; font-size: 10px; font-weight: 700; line-height: 1; }
body.tw-teacher #app header.tw-topbar .at-account-menu .avatar { width: 40px; height: 40px; border: 2px solid var(--ds-primary-100); border-radius: 50%; background: linear-gradient(135deg, var(--ds-primary-400), var(--ds-primary-600)); color: #fff; font-weight: 700; cursor: pointer; overflow: hidden; }
body.tw-teacher #app header.tw-topbar .at-account-menu .avatar:focus-visible { outline: 3px solid var(--ds-primary-400); outline-offset: 2px; }
body.tw-teacher #app header.tw-topbar .at-account-dropdown { min-width: 220px; padding: 6px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); box-shadow: var(--ds-shadow-md); }
body.tw-teacher #app header.tw-topbar .at-account-dropdown button { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 40px; padding: 8px 12px; border-radius: var(--ds-radius-sm); font-size: var(--ds-text-md); }

body.tw-teacher #app > .main > .content { max-width: 1320px; margin: 0 auto; padding: 28px 32px 48px; }
/* The live panel is the page: no extra card around it. */
body.tw-teacher #app .content > section.card:has(> #at-live-role-panel) { padding: 0; border: 0; background: transparent; box-shadow: none; }
body.tw-teacher #app .content > .workspacehelp { display: none; }
body.tw-teacher #app .content > .notice { margin: 32px 0 0; padding: 0; border: 0; background: none; color: var(--ds-text-subtle); font-size: var(--ds-text-xs); text-align: center; }

/* Skeletons */
body.tw-teacher .tw-skeleton-home, body.tw-teacher .tw-skeleton-list { display: grid; gap: 16px; }
body.tw-teacher .tw-skeleton-hero { min-height: 120px; }
body.tw-teacher .tw-skeleton-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
body.tw-teacher .tw-skeleton-row--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Home ---------- */
body.tw-teacher .tw-home { display: grid; gap: 20px; }
body.tw-teacher .tw-welcome {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 26px 28px; overflow: hidden;
  border-radius: var(--ds-radius-xl); background: linear-gradient(120deg, var(--ds-primary-800) 0%, var(--ds-primary-600) 60%, #7650e0 100%); color: #fff; box-shadow: 0 16px 40px rgba(87, 49, 187, .22);
}
body.tw-teacher .tw-welcome::after { content: "</>"; position: absolute; inset-inline-end: 24%; bottom: -26px; color: rgba(255, 255, 255, .09); font: 800 120px/1 var(--ds-font-mono); pointer-events: none; }
body.tw-teacher .tw-welcome > div:first-child { position: relative; z-index: 1; min-width: 0; }
body.tw-teacher .tw-eyebrow { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 6px; color: #e6dcff; font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher .tw-eyebrow .tw-icon { width: 16px; height: 16px; }
body.tw-teacher .tw-welcome h2 { margin: 0; color: #fff; font-size: var(--ds-text-2xl); line-height: 1.3; }
body.tw-teacher .tw-welcome p { margin: 6px 0 0; color: #f6f2ff; font-size: var(--ds-text-base); }
body.tw-teacher .tw-welcome-actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 10px; }
body.tw-teacher .tw-welcome .ds-btn--primary { background: #fff; color: var(--ds-primary-700); box-shadow: 0 6px 16px rgba(29, 24, 48, .18); }
body.tw-teacher .tw-welcome .ds-btn--primary:hover { background: var(--ds-primary-50); }
body.tw-teacher .tw-welcome .ds-btn--secondary { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; }
body.tw-teacher .tw-welcome .ds-btn--secondary:hover { background: rgba(255, 255, 255, .24); }
body.tw-teacher .tw-welcome .ds-count { background: #fff; color: var(--ds-primary-700); }

body.tw-teacher .tw-home-top { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 20px; align-items: stretch; }
body.tw-teacher .tw-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
body.tw-teacher .tw-next { display: flex; flex-direction: column; gap: 14px; padding: 22px; border: 1px solid var(--ds-primary-200); border-radius: var(--ds-radius-lg); background: linear-gradient(180deg, var(--ds-primary-50), var(--ds-surface) 70%); box-shadow: var(--ds-shadow-sm); }
body.tw-teacher .tw-next.is-live { border-color: #a9dcc8; background: linear-gradient(180deg, var(--ds-mint-50), var(--ds-surface) 70%); }
body.tw-teacher .tw-next-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
body.tw-teacher .tw-next-when { color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher .tw-next h2 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-xl); line-height: 1.35; }
body.tw-teacher .tw-next-meta { display: grid; grid-template-columns: repeat(3, minmax(0, auto)); justify-content: start; gap: 8px 28px; margin: 0; }
body.tw-teacher .tw-next-meta dt { color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 600; }
body.tw-teacher .tw-next-meta dd { margin: 2px 0 0; color: var(--ds-ink); font-size: var(--ds-text-md); font-weight: 600; }
body.tw-teacher .tw-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: auto; }
body.tw-teacher .tw-muted-note { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher .tw-muted-note .tw-icon { width: 17px; height: 17px; }
body.tw-teacher .tw-next--empty { align-items: center; justify-content: center; text-align: center; border-style: dashed; background: var(--ds-surface); }
body.tw-teacher .tw-next--empty p { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher .tw-empty-icon { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; background: var(--ds-primary-50); color: var(--ds-primary-500); }
body.tw-teacher .tw-live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ds-mint-500); box-shadow: 0 0 0 0 rgba(23, 162, 122, .5); animation: tw-pulse 1.8s infinite; }
@keyframes tw-pulse { 70% { box-shadow: 0 0 0 8px rgba(23, 162, 122, 0); } 100% { box-shadow: 0 0 0 0 rgba(23, 162, 122, 0); } }

body.tw-teacher .tw-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
body.tw-teacher .tw-panel { display: flex; flex-direction: column; container-type: inline-size; }
/* Narrow cards: status and join button move under the class name. */
@container (max-width: 480px) {
  body.tw-teacher .tw-timeline-item { grid-template-columns: 56px 12px minmax(0, 1fr) auto; row-gap: 8px; }
  body.tw-teacher .tw-timeline-item > .ds-badge { grid-column: 4; grid-row: 1; }
  body.tw-teacher .tw-timeline-item > .ds-btn { grid-column: 3 / 5; grid-row: 2; justify-self: start; }
}
body.tw-teacher .tw-timeline, body.tw-teacher .tw-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.tw-teacher .tw-timeline-item { position: relative; display: grid; grid-template-columns: 64px 14px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--ds-border); }
body.tw-teacher .tw-timeline-item:last-child { border-bottom: 0; }
body.tw-teacher .tw-timeline-time { display: grid; line-height: 1.25; }
body.tw-teacher .tw-timeline-time b { color: var(--ds-ink); font-size: var(--ds-text-md); font-variant-numeric: tabular-nums; }
body.tw-teacher .tw-timeline-time small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher .tw-timeline-dot { width: 12px; height: 12px; border: 3px solid var(--ds-primary-300); border-radius: 50%; background: var(--ds-surface); }
body.tw-teacher .tw-timeline-item.is-current .tw-timeline-dot { border-color: var(--ds-mint-500); background: var(--ds-mint-500); }
body.tw-teacher .tw-timeline-item.is-past { opacity: .72; }
body.tw-teacher .tw-timeline-item.is-past .tw-timeline-dot { border-color: var(--ds-border-strong); }
body.tw-teacher .tw-timeline-body, body.tw-teacher .tw-list-item > div { display: grid; min-width: 0; line-height: 1.4; }
body.tw-teacher .tw-timeline-body b, body.tw-teacher .tw-list-item b { overflow: hidden; color: var(--ds-ink); font-size: var(--ds-text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher .tw-timeline-body small, body.tw-teacher .tw-list-item small { overflow: hidden; color: var(--ds-text-muted); font-size: var(--ds-text-sm); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher .tw-list-item { display: flex; align-items: center; gap: 12px; min-height: 58px; padding: 9px 0; border-bottom: 1px solid var(--ds-border); }
body.tw-teacher .tw-list-item:last-child { border-bottom: 0; }
body.tw-teacher .tw-list-item > div { flex: 1; }
body.tw-teacher .tw-list-item time { color: var(--ds-text-subtle); font-size: var(--ds-text-xs); white-space: nowrap; }
body.tw-teacher .tw-row-actions { display: flex; gap: 2px; }
body.tw-teacher .tw-group-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 12px; background: var(--ds-sky-50); color: var(--ds-sky-700); font-weight: 700; }
body.tw-teacher .tw-more-link { align-self: flex-start; margin-top: 10px; padding: 4px 0; border: 0; background: none; color: var(--ds-primary-700); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; cursor: pointer; }
body.tw-teacher .tw-more-link:hover { text-decoration: underline; }
body.tw-teacher .tw-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
body.tw-teacher .tw-action { display: flex; align-items: center; gap: 12px; min-width: 0; min-height: 64px; padding: 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-ink); font: inherit; text-align: start; cursor: pointer; transition: border-color var(--ds-duration), background var(--ds-duration), transform var(--ds-duration); }
body.tw-teacher .tw-action:hover { border-color: var(--ds-primary-200); background: var(--ds-surface-muted); transform: translateY(-1px); }
body.tw-teacher .tw-action > span:last-child { display: grid; min-width: 0; line-height: 1.35; }
body.tw-teacher .tw-action b { font-size: var(--ds-text-md); font-weight: 600; }
body.tw-teacher .tw-action small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher .tw-action-icon { display: grid; place-items: center; flex: 0 0 40px; width: 40px; height: 40px; border-radius: 12px; background: var(--ds-primary-50); color: var(--ds-primary-600); }
body.tw-teacher .tw-action--sky .tw-action-icon { background: var(--ds-sky-50); color: var(--ds-sky-500); }
body.tw-teacher .tw-action--mint .tw-action-icon { background: var(--ds-mint-50); color: var(--ds-mint-500); }
body.tw-teacher .tw-action--sun .tw-action-icon { background: var(--ds-sun-50); color: #c98a06; }
body.tw-teacher .tw-action--pink .tw-action-icon { background: var(--ds-pink-50); color: var(--ds-pink-500); }

/* ---------- Students & groups ---------- */
body.tw-teacher .tw-roster { display: grid; gap: 24px; }
body.tw-teacher .tw-section-head { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; }
body.tw-teacher .tw-section-head h2 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-lg); }
body.tw-teacher .tw-group-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
body.tw-teacher .tw-group-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: var(--ds-shadow-xs); }
body.tw-teacher .tw-group-card h3 { margin: 0; overflow: hidden; color: var(--ds-ink); font-size: var(--ds-text-md); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher .tw-group-card p { margin: 2px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher .tw-group-card-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px; margin: 4px -6px -6px; padding-top: 8px; border-top: 1px solid var(--ds-border); }
body.tw-teacher .tw-person { display: inline-flex; align-items: center; gap: 10px; }
body.tw-teacher .tw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
body.tw-teacher .tw-cell-actions { white-space: nowrap; text-align: end !important; }
body.tw-teacher .tw-cell-actions .ds-btn + .ds-btn { margin-inline-start: 4px; }

/* ---------- Drawer and responsive ---------- */
.tw-scrim { position: fixed; inset: 0; z-index: 35; background: var(--ds-overlay); opacity: 0; pointer-events: none; transition: opacity .2s; }
@media (max-width: 1024px) {
  body.tw-teacher #app > aside.tw-sidebar { width: min(300px, 86vw); transform: translateX(-100%); transition: transform .24s var(--ds-ease), visibility .24s; visibility: hidden; box-shadow: var(--ds-shadow-lg); }
  [dir="rtl"] body.tw-teacher #app > aside.tw-sidebar { transform: translateX(100%); }
  body.tw-teacher.tw-nav-open #app > aside.tw-sidebar { transform: none; visibility: visible; }
  body.tw-teacher.tw-nav-open .tw-scrim { opacity: 1; pointer-events: auto; }
  body.tw-teacher.tw-nav-open { overflow: hidden; }
  body.tw-teacher #app .tw-sidebar .tw-nav-close, body.tw-teacher #app .tw-menu-toggle { display: inline-grid; }
  body.tw-teacher #app > .main { margin-inline-start: 0; }
  body.tw-teacher #app > .main > header.tw-topbar { padding: 0 20px; }
  body.tw-teacher #app > .main > .content { padding: 22px 20px 40px; }
  body.tw-teacher .tw-home-top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.tw-teacher .tw-breadcrumb > span { display: none; }
  body.tw-teacher .tw-home-grid { grid-template-columns: 1fr; }
  body.tw-teacher .tw-welcome { flex-direction: column; align-items: flex-start; padding: 22px; }
  body.tw-teacher .tw-welcome h2 { font-size: var(--ds-text-xl); }
  body.tw-teacher .tw-skeleton-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tw-teacher .tw-skeleton-row--2 { grid-template-columns: 1fr; }
  /* Tables become stacked cards */
  body.tw-teacher .ds-table-wrap { overflow: visible; border: 0; }
  body.tw-teacher .tw-roster-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  body.tw-teacher .tw-roster-table, body.tw-teacher .tw-roster-table tbody, body.tw-teacher .tw-roster-table tr, body.tw-teacher .tw-roster-table th, body.tw-teacher .tw-roster-table td { display: block; width: 100%; }
  body.tw-teacher .tw-roster-table tr { margin-bottom: 10px; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); }
  body.tw-teacher .tw-roster-table th, body.tw-teacher .tw-roster-table td { padding: 6px 0; border: 0; }
  body.tw-teacher .tw-roster-table td[data-label] { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
  body.tw-teacher .tw-roster-table td[data-label]::before { content: attr(data-label); color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 600; }
  body.tw-teacher .tw-roster-table .tw-cell-actions { display: flex; gap: 8px; padding-top: 10px; text-align: start !important; }
  body.tw-teacher .tw-roster-table .tw-cell-actions .ds-btn { flex: 1; }
  body.tw-teacher .tw-roster-table tbody tr:hover { background: var(--ds-surface); }
}
@media (max-width: 480px) {
  body.tw-teacher #app > .main > header.tw-topbar { padding: 0 12px; gap: 8px; }
  body.tw-teacher #app header.tw-topbar .controls { gap: 6px; }
  body.tw-teacher #app > .main > .content { padding: 18px 14px 36px; }
  body.tw-teacher .tw-stats { gap: 10px; }
  body.tw-teacher .ds-stat { flex-direction: column; align-items: flex-start; gap: 10px; padding: 14px; }
  body.tw-teacher .ds-stat-go { display: none; }
  body.tw-teacher .tw-actions { grid-template-columns: 1fr; }
  body.tw-teacher .tw-next-meta { grid-template-columns: 1fr 1fr; }
  body.tw-teacher .ds-card { padding: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  body.tw-teacher #app > aside.tw-sidebar, .tw-scrim, body.tw-teacher .tw-action { transition: none; }
  body.tw-teacher .tw-live-dot { animation: none; }
  body.tw-teacher .tw-action:hover { transform: none; }
}

/* ---------- Page header actions and hidden intros ---------- */
body.tw-teacher #app .tw-intro-hidden { display: none !important; }

/* ---------- Legacy components, mapped onto the design system ---------- */
/* Buttons */
body.tw-teacher #app .content .primary, body.tw-teacher #modal .primary, body.tw-teacher #modal .actions .pill:not(.at-action-delete) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; padding: 0 16px; border: 1px solid transparent;
  border-radius: var(--ds-radius-md); font: inherit; font-size: var(--ds-text-md); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
  transition: background var(--ds-duration) var(--ds-ease), border-color var(--ds-duration) var(--ds-ease), box-shadow var(--ds-duration) var(--ds-ease);
}
body.tw-teacher #app .content .primary, body.tw-teacher #modal .primary { background: var(--ds-primary-600); color: #fff; box-shadow: 0 4px 12px rgba(106, 64, 216, .2); }
body.tw-teacher #app .content .primary:hover:not(:disabled), body.tw-teacher #modal .primary:hover:not(:disabled) { background: var(--ds-primary-700); }
body.tw-teacher #app .content .pill, body.tw-teacher #modal .pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ds-border-strong);
  border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer;
}
body.tw-teacher #app .content .pill:hover:not(:disabled), body.tw-teacher #modal .pill:hover:not(:disabled) { border-color: var(--ds-primary-300); background: var(--ds-primary-50); color: var(--ds-primary-700); }
body.tw-teacher #app .content :is(.primary, .pill):disabled, body.tw-teacher #modal :is(.primary, .pill):disabled { opacity: .55; cursor: not-allowed; }
body.tw-teacher #app .content :is(.primary, .pill, .ds-btn):focus-visible, body.tw-teacher #modal :is(.primary, .pill, button):focus-visible { outline: none; box-shadow: var(--ds-focus); }

/* Cards, titles, rows, badges, notes */
body.tw-teacher #app .content .card { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: var(--ds-shadow-xs); }
body.tw-teacher #app .content .sectiontitle { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.tw-teacher #app .content .sectiontitle h2, body.tw-teacher #app .content .sectiontitle h3 { color: var(--ds-ink); font-size: var(--ds-text-lg); line-height: 1.4; }
body.tw-teacher #app .content .muted { color: var(--ds-text-muted); }
body.tw-teacher #app .content .row { border-color: var(--ds-border); }
body.tw-teacher #app .content .badge, body.tw-teacher #app .content .tag { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--ds-radius-full); background: var(--ds-primary-50); color: var(--ds-primary-700); font-size: var(--ds-text-xs); font-weight: 700; }
body.tw-teacher #app .content .emptyteacher, body.tw-teacher #app .content .at-teacher-schedule-empty, body.tw-teacher #app .content .at-teacher-empty {
  display: grid; justify-items: center; gap: 6px; padding: 40px 20px; border: 1px dashed var(--ds-border-strong); border-radius: var(--ds-radius-lg); background: var(--ds-surface); color: var(--ds-text-muted); text-align: center;
}
body.tw-teacher #app .content .emptyteacher h3 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-base); }
body.tw-teacher #app .content .emptyteacher p { margin: 0; font-size: var(--ds-text-sm); }
body.tw-teacher #app .content .at-live-note { border: 1px solid var(--ds-primary-100); border-radius: var(--ds-radius-md); background: var(--ds-primary-50); color: var(--ds-text); }
body.tw-teacher #app .content .at-auth-message:not(:empty), body.tw-teacher #modal .at-auth-message:not(:empty) { color: var(--ds-danger); font-weight: 600; }

/* Forms */
body.tw-teacher #app .content :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea),
body.tw-teacher #modal :is(input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]), select, textarea) {
  box-sizing: border-box; min-height: var(--ds-control-h); border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-md);
}
body.tw-teacher #app .content textarea, body.tw-teacher #modal textarea { min-height: 110px; padding: 10px 12px; line-height: var(--ds-leading); }
body.tw-teacher #app .content :is(input, select, textarea):focus, body.tw-teacher #modal :is(input, select, textarea):focus { outline: none; border-color: var(--ds-primary-400); box-shadow: var(--ds-focus); }
body.tw-teacher #app .content :is(input, textarea)::placeholder, body.tw-teacher #modal :is(input, textarea)::placeholder { color: var(--ds-text-subtle); }
body.tw-teacher #app .content input[type="checkbox"], body.tw-teacher #app .content input[type="radio"], body.tw-teacher #modal input[type="checkbox"], body.tw-teacher #modal input[type="radio"] { accent-color: var(--ds-primary-600); }
body.tw-teacher #app .content label, body.tw-teacher #modal label { color: var(--ds-text); }

/* Dialog */
body.tw-teacher #modal { width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 24px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-xl); background: var(--ds-surface); color: var(--ds-text); box-shadow: var(--ds-shadow-lg); }
body.tw-teacher #modal::backdrop { background: var(--ds-overlay); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
body.tw-teacher #modal h2 { margin: 0 0 6px; color: var(--ds-ink); font-size: var(--ds-text-xl); line-height: 1.35; }
body.tw-teacher #modal > p, body.tw-teacher #modal .muted { color: var(--ds-text-muted); font-size: var(--ds-text-md); }
body.tw-teacher #modal .actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 10px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--ds-border); }
body.tw-teacher #modal .at-account-form { gap: 16px; }
body.tw-teacher #modal .at-account-form label { gap: 6px; font-size: var(--ds-text-md); font-weight: 600; }

/* Toast: one calm style with an icon; success and error words are in the message itself. */
body.tw-teacher #toast {
  position: fixed; z-index: 1000; top: auto; bottom: 24px; left: auto; right: auto; inset-inline-end: 24px; transform: none;
  display: none; align-items: center; gap: 10px; max-width: min(420px, calc(100vw - 32px)); padding: 12px 16px 12px 14px; border: 0; border-radius: var(--ds-radius-md);
  background: var(--ds-ink); color: #fff; font-size: var(--ds-text-md); font-weight: 500; line-height: 1.5; box-shadow: var(--ds-shadow-lg);
}
body.tw-teacher #toast::before { content: ""; flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--ds-primary-300); }
body.tw-teacher #toast[style*="block"] { display: flex !important; animation: tw-toast-in .2s var(--ds-ease); }
@keyframes tw-toast-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* Segmented tabs used by several pages */
body.tw-teacher #app .content :is(.assignment-filters, .at-quiz-tabs) {
  display: inline-flex; flex-wrap: wrap; gap: 4px; width: auto; padding: 4px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); box-shadow: none;
}
body.tw-teacher #app .content :is(.assignment-filters, .at-quiz-tabs) button {
  display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-text-muted);
  font: inherit; font-size: var(--ds-text-sm); font-weight: 600; box-shadow: none; cursor: pointer;
}
body.tw-teacher #app .content :is(.assignment-filters, .at-quiz-tabs) button:hover { color: var(--ds-ink); background: rgba(255, 255, 255, .7); }
body.tw-teacher #app .content :is(.assignment-filters, .at-quiz-tabs) button:is([aria-selected="true"], .selected) { background: var(--ds-surface); color: var(--ds-primary-700); box-shadow: var(--ds-shadow-xs), 0 0 0 1px var(--ds-border); }
body.tw-teacher #app .content :is(.assignment-filters, .at-quiz-tabs) button b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ds-radius-full); background: var(--ds-primary-100); color: var(--ds-primary-700); font-size: 11px; }

/* ---------- Schedule ---------- */
body.tw-teacher #app .at-teacher-schedule { display: grid; gap: 16px; }
body.tw-teacher #app .at-teacher-schedule-nav .at-teacher-nav-icon { font-size: 11px; }
body.tw-teacher #app .at-teacher-schedule-nav button.current .at-teacher-nav-icon { color: var(--ds-mint-500); }
body.tw-teacher #app .at-teacher-schedule-panel { padding: 20px; }
body.tw-teacher #app .at-teacher-schedule-section > header { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; padding: 0; border: 0; background: none; height: auto; }
body.tw-teacher #app .at-teacher-schedule-section > header h3 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-lg); }
body.tw-teacher #app .at-teacher-schedule-section > header p { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher #app .at-teacher-schedule-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--ds-primary-50); color: var(--ds-primary-600); }
body.tw-teacher #app .at-teacher-class-list { display: grid; gap: 12px; }
body.tw-teacher #app .at-teacher-class-card { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 16px; padding: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: none; }
body.tw-teacher #app .at-teacher-class-card:hover { border-color: var(--ds-primary-200); box-shadow: var(--ds-shadow-sm); }
body.tw-teacher #app .at-teacher-class-card.is-current { border-color: #a9dcc8; background: linear-gradient(180deg, var(--ds-mint-50), var(--ds-surface)); }
body.tw-teacher #app .at-teacher-class-card.is-past { background: var(--ds-surface-muted); }
body.tw-teacher #app .at-teacher-class-date { display: grid; place-content: center; height: 64px; border-radius: var(--ds-radius-md); background: var(--ds-primary-50); color: var(--ds-primary-700); text-align: center; line-height: 1.1; }
body.tw-teacher #app .at-teacher-class-date b { font-size: var(--ds-text-xl); }
body.tw-teacher #app .at-teacher-class-date small { font-size: var(--ds-text-xs); font-weight: 600; }
body.tw-teacher #app .at-teacher-class-card.is-current .at-teacher-class-date { background: var(--ds-mint-50); color: var(--ds-mint-700); }
body.tw-teacher #app .at-teacher-class-card.is-past .at-teacher-class-date { background: #f1eff6; color: var(--ds-text-muted); }
body.tw-teacher #app .at-teacher-class-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
body.tw-teacher #app .at-teacher-class-title h3 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-base); }
body.tw-teacher #app .at-teacher-class-status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: var(--ds-radius-full); background: var(--ds-primary-50); color: var(--ds-primary-700); font-size: var(--ds-text-xs); font-weight: 700; white-space: nowrap; }
body.tw-teacher #app .is-current .at-teacher-class-status { background: var(--ds-mint-50); color: var(--ds-mint-700); }
body.tw-teacher #app .is-current .at-teacher-class-status i { width: 7px; height: 7px; border-radius: 50%; background: var(--ds-mint-500); }
body.tw-teacher #app .is-past .at-teacher-class-status { background: #f1eff6; color: var(--ds-text-muted); }
body.tw-teacher #app .at-teacher-class-copy p { margin: 4px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher #app .at-teacher-class-copy p b { color: var(--ds-text); }
body.tw-teacher #app .at-teacher-class-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 12px; }
body.tw-teacher #app .at-teacher-agenda-label { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }

/* ---------- Assignments & grading ---------- */



/* ---------- Group messages ---------- */
body.tw-teacher #app .admin-chat-layout { border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); box-shadow: var(--ds-shadow-xs); overflow: hidden; }
body.tw-teacher #app .admin-chat-list { border-inline-end: 1px solid var(--ds-border); background: var(--ds-surface-muted); }
body.tw-teacher #app .admin-chat-group { border: 1px solid transparent; border-radius: var(--ds-radius-md); background: transparent; color: var(--ds-text); }
body.tw-teacher #app .admin-chat-group:hover { background: var(--ds-surface); }
body.tw-teacher #app .admin-chat-group.active, body.tw-teacher #app .admin-chat-group[aria-pressed="true"], body.tw-teacher #app .admin-chat-group.selected { border-color: var(--ds-primary-200); background: var(--ds-primary-50); color: var(--ds-primary-800); }
body.tw-teacher #app .admin-chat-window-head { border-bottom: 1px solid var(--ds-border); background: var(--ds-surface); }
body.tw-teacher #app .admin-chat-history { background: var(--ds-bg); }
body.tw-teacher #app .admin-chat-composer { border-top: 1px solid var(--ds-border); background: var(--ds-surface); }



/* older layer: body[data-workspace] button:not(.primary) paints every button white; restore the design-system variants. */
body.tw-teacher :is(#app, #modal) .ds-btn--primary { border-color: transparent; background: var(--ds-primary-600); color: #fff; }
body.tw-teacher :is(#app, #modal) .ds-btn--primary:hover:not(:disabled) { background: var(--ds-primary-700); color: #fff; }
body.tw-teacher :is(#app, #modal) .ds-btn--secondary { border-color: var(--ds-border-strong); background: var(--ds-surface); color: var(--ds-primary-700); }
body.tw-teacher :is(#app, #modal) .ds-btn--secondary:hover:not(:disabled) { border-color: var(--ds-primary-300); background: var(--ds-primary-50); }
body.tw-teacher :is(#app, #modal) .ds-btn--ghost { border-color: transparent; background: transparent; color: var(--ds-primary-700); }
body.tw-teacher :is(#app, #modal) .ds-btn--ghost:hover:not(:disabled) { background: var(--ds-primary-50); }
body.tw-teacher #app .tw-welcome .ds-btn--primary { background: #fff; color: var(--ds-primary-700); }
body.tw-teacher #app .tw-welcome .ds-btn--primary:hover { background: var(--ds-primary-50); color: var(--ds-primary-800); }
body.tw-teacher #app .tw-welcome .ds-btn--secondary { border-color: rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .14); color: #fff; }
body.tw-teacher #app .tw-welcome .ds-btn--secondary:hover { background: rgba(255, 255, 255, .26); color: #fff; }
body.tw-teacher #app :is(.tw-more-link, .tw-side-action:not(.tw-side-logout)) { border: 0; background: transparent; }
body.tw-teacher #app .tw-side-action:not(.tw-side-logout):hover { background: var(--ds-surface-muted); }
body.tw-teacher #app :is(.tw-action, .ds-stat, .tw-icon-button) { border: 1px solid var(--ds-border); background: var(--ds-surface); color: var(--ds-ink); }
body.tw-teacher #app :is(.tw-action, .tw-icon-button):hover { border-color: var(--ds-primary-200); background: var(--ds-surface-muted); }
body.tw-teacher #app button.ds-stat:hover { border-color: var(--ds-primary-200); background: var(--ds-surface); }
body.tw-teacher #app .admin-chat-count:empty, body.tw-teacher #app .chatreplypreview:empty { display: none; }
body.tw-teacher #app .admin-chat-count { background: var(--ds-primary-600); color: #fff; }
/* older layer: body[data-workspace] header sets a fixed 85px height on every <header>, including card headers. */
body.tw-teacher #app .content header:not(.tw-topbar) { height: auto; min-height: 0; background: transparent; }
body.tw-teacher #app .content header.ds-card-header { display: flex; flex-wrap: nowrap; margin: 0 0 16px; padding: 0; border: 0; }

/* ---------- Page families on small screens ---------- */
@media (max-width: 760px) {
  body.tw-teacher #app .ds-toolbar { flex-direction: column; align-items: stretch; }
  body.tw-teacher #app .ds-toolbar > :is(.ds-search, .ds-select) { flex: none; width: 100%; margin: 0; }
  body.tw-teacher #app .content :is(.assignment-filters, .at-quiz-tabs) { display: flex; flex-wrap: nowrap; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  body.tw-teacher #app .content :is(.assignment-filters, .at-quiz-tabs) button { flex: 0 0 auto; white-space: nowrap; }
  body.tw-teacher #app .at-teacher-class-card { grid-template-columns: 52px minmax(0, 1fr); gap: 12px; padding: 14px; }
  body.tw-teacher #app .at-teacher-class-date { height: 56px; }
  body.tw-teacher #modal { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); padding: 18px; border-radius: var(--ds-radius-lg); }
  body.tw-teacher #toast { inset-inline: 12px; bottom: 12px; max-width: none; }
}

/* ---------- Class schedule (student "My classes" layout + group filter, group colours and day agenda) ---------- */
body.tw-teacher { --tw-tone: var(--ds-primary-500); }
body.tw-teacher .tw-tone-violet { --tw-tone: var(--ds-primary-500); }
body.tw-teacher .tw-tone-sky { --tw-tone: var(--ds-sky-500); }
body.tw-teacher .tw-tone-mint { --tw-tone: var(--ds-mint-500); }
body.tw-teacher .tw-tone-sun { --tw-tone: #d99200; }
body.tw-teacher .tw-tone-pink { --tw-tone: var(--ds-pink-500); }
body.tw-teacher #app .tw-classroom { display: grid; gap: 16px; }
body.tw-teacher #app .tw-classroom .at-classroom-toolbar { margin: 0; }
body.tw-teacher #app .tw-group-filter { display: flex; flex-wrap: wrap; gap: 8px; }
body.tw-teacher #app .tw-group-filter button { display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-full); background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; cursor: pointer; box-shadow: var(--ds-shadow-xs); }
body.tw-teacher #app .tw-group-filter button i { width: 10px; height: 10px; border-radius: 50%; background: var(--tw-tone); }
body.tw-teacher #app .tw-group-filter button b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ds-radius-full); background: var(--ds-primary-50); color: var(--ds-primary-700); font-size: 11px; }
body.tw-teacher #app .tw-group-filter button:hover { border-color: var(--ds-primary-300); background: var(--ds-primary-50); }
body.tw-teacher #app .tw-group-filter button[aria-pressed="true"] { border-color: var(--ds-primary-600); background: var(--ds-primary-600); color: #fff; }
body.tw-teacher #app .tw-group-filter button[aria-pressed="true"] b { background: rgba(255, 255, 255, .2); color: #fff; }
body.tw-teacher #app .tw-group-filter button[aria-pressed="true"] i { box-shadow: 0 0 0 2px #fff; }
body.tw-teacher #app .tw-group-tag { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: inherit; }
body.tw-teacher #app .tw-group-tag i { flex: 0 0 9px; width: 9px; height: 9px; border-radius: 50%; background: var(--tw-tone); }
body.tw-teacher #app .tw-class-feature .at-class-course { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; }
body.tw-teacher #app .tw-class-feature .at-class-course > span:not(.tw-group-tag) { color: var(--ds-text-muted); font-weight: 600; }
body.tw-teacher #app .at-class-days button .tw-day-dots { position: absolute; bottom: 3px; left: 50%; display: flex; gap: 2px; transform: translateX(-50%); }
body.tw-teacher #app .at-class-days button .tw-day-dots i { position: static; width: 5px; height: 5px; border-radius: 50%; background: var(--tw-tone); }
body.tw-teacher #app .at-class-days button.selected .tw-day-dots i { box-shadow: 0 0 0 1px #fff; }
body.tw-teacher #app .tw-calendar-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: 12px; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher #app .tw-calendar-legend button { margin-inline-start: auto; padding: 4px 8px; border: 0; border-radius: var(--ds-radius-sm); background: var(--ds-primary-50); color: var(--ds-primary-700); font: inherit; font-weight: 700; cursor: pointer; }
body.tw-teacher #app .tw-day-agenda { padding: 18px; }
body.tw-teacher #app .tw-day-agenda h3 { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; color: var(--ds-ink); font-size: var(--ds-text-md); }
body.tw-teacher #app .tw-day-agenda h3 .tw-icon { width: 18px; height: 18px; color: var(--ds-primary-500); }
body.tw-teacher #app .tw-day-agenda ul { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-day-agenda li button { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; width: 100%; padding: 10px 12px; border: 1px solid var(--ds-border); border-inline-start: 4px solid var(--ds-border-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-text); font: inherit; text-align: start; cursor: pointer; }
body.tw-teacher #app .tw-day-agenda li button:hover { background: var(--ds-surface-muted); }
body.tw-teacher #app .tw-day-agenda li button.is-selected { border-color: var(--ds-primary-300); background: var(--ds-primary-50); }
body.tw-teacher #app .tw-day-agenda li button.is-current { border-inline-start-color: var(--ds-mint-500); }
body.tw-teacher #app .tw-day-agenda li button.is-upcoming { border-inline-start-color: var(--ds-primary-400); }
body.tw-teacher #app .tw-day-agenda li button.is-past { opacity: .75; }
body.tw-teacher #app .tw-day-agenda li b { color: var(--ds-ink); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.tw-teacher #app .tw-day-agenda li span { display: grid; min-width: 0; gap: 2px; }
body.tw-teacher #app .tw-day-agenda li strong { overflow: hidden; color: var(--ds-ink); font-size: var(--ds-text-sm); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher #app .tw-day-agenda li .tw-group-tag { font-size: var(--ds-text-xs); font-weight: 600; color: var(--ds-text-muted); }
body.tw-teacher #app .tw-day-agenda li small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 700; }
body.tw-teacher #app .tw-day-agenda p { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
@media (max-width: 760px) {
  body.tw-teacher #app .tw-group-filter { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  body.tw-teacher #app .tw-group-filter button { flex: 0 0 auto; white-space: nowrap; }
}


/* ---------- Page banner (every page except home, which has its own welcome) ---------- */
body.tw-teacher #app .content > .heading.tw-page-header { display: block; margin: 0 0 20px; }
body.tw-teacher #app .content > .heading.tw-page-header--home { display: none; }
body.tw-teacher #app .tw-banner { position: relative; display: grid; gap: 18px; padding: 22px 24px; overflow: hidden; border-radius: var(--ds-radius-xl); background: linear-gradient(120deg, var(--ds-primary-800) 0%, var(--ds-primary-600) 62%, #7650e0 100%); color: #fff; box-shadow: 0 14px 34px rgba(87, 49, 187, .2); }
body.tw-teacher #app .tw-banner::after { content: "</>"; position: absolute; inset-inline-end: 26%; bottom: -34px; color: rgba(255, 255, 255, .07); font: 800 128px/1 var(--ds-font-mono); pointer-events: none; }
body.tw-teacher #app .tw-banner-main { position: relative; z-index: 1; display: flex; align-items: center; gap: 16px; }
body.tw-teacher #app .tw-banner-icon { display: grid; place-items: center; flex: 0 0 52px; width: 52px; height: 52px; border: 1px solid rgba(255, 255, 255, .25); border-radius: 16px; background: rgba(255, 255, 255, .14); }
body.tw-teacher #app .tw-banner-icon .tw-icon { width: 26px; height: 26px; color: #fff; }
body.tw-teacher #app .tw-banner-copy { flex: 1 1 auto; min-width: 0; }
body.tw-teacher #app .tw-banner-eyebrow { margin: 0 0 2px; color: #e6dcff; font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #app .tw-banner h1 { margin: 0; color: #fff; font-size: var(--ds-text-2xl); font-weight: 700; line-height: 1.25; }
body.tw-teacher #app .tw-banner-copy > p:last-child { margin: 4px 0 0; color: #f6f2ff; font-size: var(--ds-text-md); }
body.tw-teacher #app .tw-banner-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.tw-teacher #app .tw-banner-actions:empty { display: none; }
body.tw-teacher #app .tw-banner-actions .ds-btn--primary { background: #fff; color: var(--ds-primary-700); box-shadow: 0 6px 16px rgba(29, 24, 48, .18); }
body.tw-teacher #app .tw-banner-actions .ds-btn--primary:hover:not(:disabled) { background: var(--ds-primary-50); color: var(--ds-primary-800); }
body.tw-teacher #app .tw-banner-stats { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 0; }
body.tw-teacher #app .tw-banner-stats[hidden] { display: none; }
body.tw-teacher #app .tw-banner-stats > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, .2); border-radius: var(--ds-radius-md); background: rgba(255, 255, 255, .12); }
body.tw-teacher #app .tw-banner-stats dt { display: flex; align-items: center; gap: 8px; min-width: 0; color: #ece5ff; font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #app .tw-banner-stats dt .tw-icon { width: 17px; height: 17px; flex: 0 0 auto; }
body.tw-teacher #app .tw-banner-stats dd { margin: 0; color: #fff; font-size: var(--ds-text-xl); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (max-width: 760px) {
  body.tw-teacher #app .tw-banner { padding: 18px; gap: 14px; }
  body.tw-teacher #app .tw-banner-main { flex-wrap: wrap; }
  body.tw-teacher #app .tw-banner-icon { flex-basis: 44px; width: 44px; height: 44px; }
  body.tw-teacher #app .tw-banner h1 { font-size: var(--ds-text-xl); }
  body.tw-teacher #app .tw-banner-actions, body.tw-teacher #app .tw-banner-actions .ds-btn { width: 100%; }
  body.tw-teacher #app .tw-banner-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.tw-teacher #app .tw-banner-stats > div { flex-direction: column-reverse; align-items: flex-start; gap: 2px; padding: 10px; }
  body.tw-teacher #app .tw-banner-stats dt { font-size: var(--ds-text-xs); }
  body.tw-teacher #app .tw-banner-stats dt .tw-icon { display: none; }
}

/* ---------- Teaching materials ---------- */
body.tw-teacher #app .tw-materials { display: grid; gap: 16px; }
body.tw-teacher #app .tw-materials-bar { display: grid; grid-template-columns: minmax(220px, 340px) minmax(0, 1fr); align-items: end; gap: 20px; }
body.tw-teacher #app .tw-field { display: grid; gap: 6px; margin: 0; }
body.tw-teacher #app .tw-field > span { color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #app .tw-field select { width: 100%; padding: 0 12px; font-weight: 600; }
body.tw-teacher #app .tw-progress { display: grid; gap: 8px; }
body.tw-teacher #app .tw-progress-text { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; color: var(--ds-ink); font-size: var(--ds-text-md); }
body.tw-teacher #app .tw-progress-text span { color: var(--ds-primary-700); font-weight: 700; font-variant-numeric: tabular-nums; }
body.tw-teacher #app .tw-progress-bar { height: 10px; overflow: hidden; border-radius: var(--ds-radius-full); background: var(--ds-primary-50); }
body.tw-teacher #app .tw-progress-bar i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--ds-primary-500), var(--ds-mint-500)); }
[dir="rtl"] body.tw-teacher #app .tw-progress-bar i { background: linear-gradient(270deg, var(--ds-primary-500), var(--ds-mint-500)); }
body.tw-teacher #app .tw-next-lesson { display: grid; gap: 16px; padding: 22px; border: 1px solid var(--ds-primary-200); border-radius: var(--ds-radius-lg); background: linear-gradient(180deg, var(--ds-primary-50), var(--ds-surface) 75%); box-shadow: var(--ds-shadow-sm); }
body.tw-teacher #app .tw-next-lesson-head { display: flex; align-items: center; gap: 14px; }
body.tw-teacher #app .tw-next-lesson-number { display: grid; place-items: center; flex: 0 0 56px; width: 56px; height: 56px; border-radius: 16px; background: var(--ds-primary-600); color: #fff; font-size: var(--ds-text-xl); font-weight: 700; }
body.tw-teacher #app .tw-next-lesson-head p { margin: 0; color: var(--ds-primary-700); font-size: var(--ds-text-sm); font-weight: 700; }
body.tw-teacher #app .tw-next-lesson h2 { margin: 2px 0; color: var(--ds-ink); font-size: var(--ds-text-xl); line-height: 1.35; }
body.tw-teacher #app .tw-next-lesson-head small { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher #app .tw-resource-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
body.tw-teacher #app .tw-next-lesson--done { justify-items: center; text-align: center; border-color: #a9dcc8; background: linear-gradient(180deg, var(--ds-mint-50), var(--ds-surface)); }
body.tw-teacher #app .tw-next-lesson--done .ds-empty-icon { background: var(--ds-mint-50); color: var(--ds-mint-700); }
body.tw-teacher #app .tw-next-lesson--done p { margin: 0; color: var(--ds-text-muted); }
body.tw-teacher #app .tw-resource { display: inline-flex; align-items: center; gap: 8px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-primary-700); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
body.tw-teacher #app .tw-resource .tw-icon { width: 17px; height: 17px; }
body.tw-teacher #app .tw-resource:hover { border-color: var(--ds-primary-300); background: var(--ds-primary-50); }
body.tw-teacher #app .tw-resource--large { justify-content: flex-start; min-height: 52px; padding: 0 16px; border-radius: var(--ds-radius-md); font-size: var(--ds-text-md); box-shadow: var(--ds-shadow-xs); }
body.tw-teacher #app .tw-resource--large .tw-icon { width: 22px; height: 22px; }
body.tw-teacher #app .tw-taught { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; padding: 0 12px; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-full); background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; cursor: pointer; white-space: nowrap; }
body.tw-teacher #app .tw-taught .tw-icon { width: 16px; height: 16px; }
body.tw-teacher #app .tw-taught:hover:not(:disabled) { border-color: var(--ds-mint-500); color: var(--ds-mint-700); }
body.tw-teacher #app .tw-taught.is-done { border-color: #a9dcc8; background: var(--ds-mint-50); color: var(--ds-mint-700); }
body.tw-teacher #app .tw-taught--large { min-height: 46px; padding: 0 20px; border: 0; background: var(--ds-mint-700); color: #fff; font-size: var(--ds-text-md); }
body.tw-teacher #app .tw-taught--large:hover:not(:disabled) { background: #0a5a43; color: #fff; }
body.tw-teacher #app .tw-taught:disabled { opacity: .55; cursor: not-allowed; }
body.tw-teacher #app .tw-next-lesson-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.tw-teacher #app .tw-chip-filter { display: flex; flex-wrap: wrap; gap: 6px; }
body.tw-teacher #app .tw-chip-filter button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-full); background: var(--ds-surface); color: var(--ds-text); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; cursor: pointer; }
body.tw-teacher #app .tw-chip-filter button b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ds-radius-full); background: var(--ds-primary-50); color: var(--ds-primary-700); font-size: 11px; }
body.tw-teacher #app .tw-chip-filter button[aria-pressed="true"] { border-color: var(--ds-primary-600); background: var(--ds-primary-600); color: #fff; }
body.tw-teacher #app .tw-chip-filter button[aria-pressed="true"] b { background: rgba(255, 255, 255, .2); color: #fff; }
body.tw-teacher #app .tw-lesson-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-lesson { display: grid; grid-template-columns: auto minmax(160px, 1fr) minmax(0, 2fr) auto; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--ds-border); }
body.tw-teacher #app .tw-lesson:last-child { border-bottom: 0; }
body.tw-teacher #app .tw-lesson.is-next { margin: 0 -8px; padding-inline: 12px; border-radius: var(--ds-radius-md); background: var(--ds-primary-50); }
body.tw-teacher #app .tw-lesson-number { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: #f1eff6; color: var(--ds-text); font-weight: 700; }
body.tw-teacher #app .tw-lesson.is-done .tw-lesson-number { background: var(--ds-mint-50); color: var(--ds-mint-700); }
body.tw-teacher #app .tw-lesson.is-next .tw-lesson-number { background: var(--ds-primary-600); color: #fff; }
body.tw-teacher #app .tw-lesson-number .tw-icon { width: 18px; height: 18px; }
body.tw-teacher #app .tw-lesson-main { display: grid; min-width: 0; line-height: 1.4; }
body.tw-teacher #app .tw-lesson-main b { color: var(--ds-ink); font-size: var(--ds-text-md); }
body.tw-teacher #app .tw-lesson-main small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher #app .tw-lesson-main small strong { color: var(--ds-primary-700); }
body.tw-teacher #app .tw-lesson-files { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
@media (max-width: 1100px) {
  body.tw-teacher #app .tw-lesson { grid-template-columns: auto minmax(0, 1fr) auto; }
  body.tw-teacher #app .tw-lesson-files { grid-column: 2 / -1; grid-row: 2; }
}
@media (max-width: 760px) {
  body.tw-teacher #app .tw-materials-bar { grid-template-columns: 1fr; gap: 14px; }
  body.tw-teacher #app .tw-resource-row { grid-template-columns: 1fr 1fr; }
  body.tw-teacher #app .tw-next-lesson { padding: 16px; }
  body.tw-teacher #app .tw-taught--large { width: 100%; }
  body.tw-teacher #app .tw-lesson { grid-template-columns: auto minmax(0, 1fr); }
  body.tw-teacher #app .tw-lesson-files, body.tw-teacher #app .tw-lesson > .tw-taught { grid-column: 1 / -1; }
  body.tw-teacher #app .tw-lesson > .tw-taught { justify-self: start; }
  body.tw-teacher #app .tw-chip-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.tw-teacher #app .tw-chip-filter button { flex: 0 0 auto; }
}


/* ---------- Assignments & grading: list on one side, the chosen assignment and its students on the other ---------- */
body.tw-teacher #app .tw-assign { display: grid; gap: 16px; }
body.tw-teacher #app .tw-assign-filters { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; }
body.tw-teacher #app .tw-assign-filter-fields { display: flex; flex-wrap: wrap; gap: 10px; flex: 1 1 360px; justify-content: flex-end; }
body.tw-teacher #app .tw-assign-filter-fields .ds-search { flex: 1 1 220px; max-width: 360px; }
body.tw-teacher #app .tw-assign-layout { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 16px; align-items: start; }
body.tw-teacher #app .tw-assign-list { position: sticky; top: 80px; max-height: calc(100vh - 100px); padding: 8px; overflow-y: auto; }
body.tw-teacher #app .tw-assign-list ul { display: grid; gap: 4px; margin: 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-assign-item { display: grid; gap: 6px; width: 100%; padding: 12px; border: 1px solid transparent; border-radius: var(--ds-radius-md); background: transparent; color: var(--ds-text); font: inherit; text-align: start; cursor: pointer; }
body.tw-teacher #app .tw-assign-item:hover { background: var(--ds-surface-muted); }
body.tw-teacher #app .tw-assign-item.is-selected { border-color: var(--ds-primary-200); background: var(--ds-primary-50); }
body.tw-teacher #app .tw-assign-item-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
body.tw-teacher #app .tw-assign-item-top b { color: var(--ds-ink); font-size: var(--ds-text-md); line-height: 1.35; }
body.tw-teacher #app .tw-assign-item-meta, body.tw-teacher #app .tw-assign-item-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 10px; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher #app .tw-assign-progress { height: 6px; overflow: hidden; border-radius: var(--ds-radius-full); background: #ece8f4; }
body.tw-teacher #app .tw-assign-progress i { display: block; height: 100%; border-radius: inherit; background: var(--ds-primary-500); }
body.tw-teacher #app .tw-status { padding: 2px 8px; border-radius: var(--ds-radius-full); font-weight: 700; }
body.tw-teacher #app .tw-status--review { background: var(--ds-sun-50); color: var(--ds-sun-700); }
body.tw-teacher #app .tw-status--waiting { background: var(--ds-sky-50); color: var(--ds-sky-700); }
body.tw-teacher #app .tw-status--done { background: var(--ds-mint-50); color: var(--ds-mint-700); }
body.tw-teacher #app .tw-due { display: inline-flex; align-items: center; gap: 6px; }
body.tw-teacher #app .tw-due .tw-icon { width: 15px; height: 15px; }
body.tw-teacher #app .tw-due.soon { color: var(--ds-sun-700); font-weight: 700; }
body.tw-teacher #app .tw-due.late { color: var(--ds-danger); font-weight: 700; }
body.tw-teacher #app .tw-assign-detail { display: grid; gap: 16px; min-height: 320px; }
body.tw-teacher #app .tw-assign-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
body.tw-teacher #app .tw-assign-kicker { margin: 0; color: var(--ds-primary-700); font-size: var(--ds-text-sm); font-weight: 700; }
body.tw-teacher #app .tw-assign-head h2 { margin: 2px 0 4px; color: var(--ds-ink); font-size: var(--ds-text-xl); line-height: 1.35; }
body.tw-teacher #app .tw-assign-head .tw-due { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher #app .tw-assign-tools { display: flex; flex-wrap: wrap; gap: 6px; }
body.tw-teacher #app .tw-danger-text { color: var(--ds-danger) !important; }
body.tw-teacher #app .tw-danger-text:hover { background: var(--ds-danger-bg) !important; }
body.tw-teacher #app .tw-instructions { padding: 10px 14px; border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); }
body.tw-teacher #app .tw-instructions summary { color: var(--ds-text); font-size: var(--ds-text-sm); font-weight: 600; cursor: pointer; }
body.tw-teacher #app .tw-instructions p { margin: 8px 0 0; color: var(--ds-text); font-size: var(--ds-text-md); line-height: var(--ds-leading); white-space: pre-line; }
body.tw-teacher #app .tw-assign-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
body.tw-teacher #app .tw-assign-summary > div { display: grid; gap: 2px; padding: 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); text-align: center; }
body.tw-teacher #app .tw-assign-summary b { color: var(--ds-ink); font-size: var(--ds-text-xl); font-variant-numeric: tabular-nums; }
body.tw-teacher #app .tw-assign-summary small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher #app .tw-tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); }
body.tw-teacher #app .tw-tabs button { display: inline-flex; flex: 1; align-items: center; justify-content: center; gap: 6px; min-height: 38px; padding: 0 10px; border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: var(--ds-text-muted); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; cursor: pointer; box-shadow: none; }
body.tw-teacher #app .tw-tabs button b { display: inline-grid; place-items: center; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--ds-radius-full); background: var(--ds-primary-100); color: var(--ds-primary-700); font-size: 11px; }
body.tw-teacher #app .tw-tabs button[aria-selected="true"] { background: var(--ds-surface); color: var(--ds-primary-700); box-shadow: var(--ds-shadow-xs), 0 0 0 1px var(--ds-border); }
body.tw-teacher #app .tw-assign-body { display: grid; gap: 12px; }
body.tw-teacher #app .tw-panel-note { display: flex; align-items: center; gap: 8px; margin: 0; padding: 16px; border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); color: var(--ds-text-muted); }
body.tw-teacher #app .tw-panel-note .tw-icon { color: var(--ds-mint-500); }
body.tw-teacher #app .tw-grade { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-lg); background: var(--ds-surface); }
body.tw-teacher #app .tw-grade:not(.is-graded) { border-color: #f1d9a6; box-shadow: inset 4px 0 0 #f0c25c; }
[dir="rtl"] body.tw-teacher #app .tw-grade:not(.is-graded) { box-shadow: inset -4px 0 0 #f0c25c; }
body.tw-teacher #app .tw-grade-head { display: flex; align-items: center; gap: 10px; }
body.tw-teacher #app .tw-grade-head > div { display: grid; flex: 1; min-width: 0; }
body.tw-teacher #app .tw-grade-head b { color: var(--ds-ink); }
body.tw-teacher #app .tw-grade-head small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher #app .tw-score { margin: 0; padding: 0; border: 0; }
body.tw-teacher #app .tw-score legend { display: flex; gap: 8px; margin-bottom: 6px; padding: 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #app .tw-score legend b { color: var(--ds-ink); }
body.tw-teacher #app .tw-score [role="radiogroup"] { display: flex; flex-wrap: wrap; gap: 6px; }
body.tw-teacher #app .tw-score label { position: relative; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: #c9c2d8; font-size: 20px; cursor: pointer; }
body.tw-teacher #app .tw-score label:first-child { color: var(--ds-text-muted); font-size: var(--ds-text-md); font-weight: 700; }
body.tw-teacher #app .tw-score label.is-on { border-color: #f0c25c; background: var(--ds-sun-50); color: #e8a317; }
body.tw-teacher #app .tw-score label:has(input:checked) { box-shadow: 0 0 0 2px var(--ds-primary-400); }
body.tw-teacher #app .tw-score label:has(input:focus-visible) { outline: 3px solid var(--ds-primary-400); outline-offset: 2px; }
body.tw-teacher #app .tw-score input { position: absolute; opacity: 0; pointer-events: none; }
body.tw-teacher #app .tw-grade textarea { min-height: 64px; }
body.tw-teacher #app .tw-grade-actions { display: flex; align-items: center; gap: 12px; }
body.tw-teacher #app .tw-graded-note { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-mint-700); font-size: var(--ds-text-sm); font-weight: 700; }
body.tw-teacher #app .tw-graded-note .tw-icon { width: 16px; height: 16px; }
body.tw-teacher #app .tw-missing { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-missing li { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
body.tw-teacher #app .tw-missing li b { flex: 1; min-width: 0; color: var(--ds-ink); font-size: var(--ds-text-sm); }
@media (max-width: 900px) {
  body.tw-teacher #app .tw-assign-layout { grid-template-columns: 1fr; }
  body.tw-teacher #app .tw-assign-list { position: static; max-height: 340px; }
  body.tw-teacher #app .tw-assign-filter-fields { justify-content: stretch; }
  body.tw-teacher #app .tw-assign-filter-fields .ds-search { max-width: none; }
}
@media (max-width: 760px) {
  body.tw-teacher #app .tw-assign-filters .tw-chip-filter { width: 100%; }
  body.tw-teacher #app .tw-assign-filter-fields > * { flex: 1 1 100%; }
  body.tw-teacher #app .tw-assign-summary { gap: 6px; }
  body.tw-teacher #app .tw-score label { width: 40px; height: 40px; }
  body.tw-teacher #app .tw-grade-head { flex-wrap: wrap; }
  body.tw-teacher #app .tw-grade-head .ds-btn { width: 100%; }
  body.tw-teacher #app .tw-grade-actions .ds-btn { flex: 1; }
}
body.tw-teacher #app .tw-assign-filter-fields > label { margin: 0; }


/* ---------- Quizzes (shares the assignments list/detail layout) ---------- */
body.tw-teacher #app .tw-quiz-description { margin: 0; padding: 10px 14px; border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); color: var(--ds-text); line-height: var(--ds-leading); white-space: pre-line; }
body.tw-teacher #app .tw-publish { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid #f1d9a6; border-radius: var(--ds-radius-md); background: var(--ds-sun-50); }
body.tw-teacher #app .tw-publish.is-on { border-color: #a9dcc8; background: var(--ds-mint-50); }
body.tw-teacher #app .tw-publish > div { display: grid; gap: 2px; }
body.tw-teacher #app .tw-publish b { color: var(--ds-ink); }
body.tw-teacher #app .tw-publish small { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher #app .tw-results { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-results li { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(160px, 240px); align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ds-border); }
body.tw-teacher #app .tw-results li:last-child { border-bottom: 0; }
body.tw-teacher #app .tw-result-main { display: grid; min-width: 0; }
body.tw-teacher #app .tw-result-main b { color: var(--ds-ink); font-size: var(--ds-text-md); }
body.tw-teacher #app .tw-result-main small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher #app .tw-result-score { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 8px; }
body.tw-teacher #app .tw-result-score b { color: var(--ds-ink); font-size: var(--ds-text-sm); font-variant-numeric: tabular-nums; white-space: nowrap; }
body.tw-teacher #app .tw-result-score small { min-width: 38px; color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 700; text-align: end; }
body.tw-teacher #app .tw-result-bar { height: 8px; overflow: hidden; border-radius: var(--ds-radius-full); background: #ece8f4; }
body.tw-teacher #app .tw-result-bar i { display: block; height: 100%; border-radius: inherit; }
body.tw-teacher #app .tw-result--high .tw-result-bar i { background: var(--ds-mint-500); }
body.tw-teacher #app .tw-result--mid .tw-result-bar i { background: #e8a317; }
body.tw-teacher #app .tw-result--low .tw-result-bar i { background: var(--ds-red-500); }
@media (max-width: 760px) {
  body.tw-teacher #app .tw-results li { grid-template-columns: auto minmax(0, 1fr); }
  body.tw-teacher #app .tw-result-score { grid-column: 1 / -1; }
  body.tw-teacher #app .tw-publish .ds-btn { width: 100%; }
}
body.tw-teacher #app .tw-assign-item-top .tw-status { flex: 0 0 auto; font-size: var(--ds-text-xs); }

/* Main buttons stay purple even when action-colors.js tags them as "save"/"send" (it uses !important). */
body.tw-teacher :is(#app, #modal) :is(.ds-btn--primary, .primary):is(.at-action-save, .at-action-send) { border-color: transparent !important; background: var(--ds-primary-600) !important; color: #fff !important; }
body.tw-teacher :is(#app, #modal) :is(.ds-btn--primary, .primary):is(.at-action-save, .at-action-send):hover:not(:disabled) { background: var(--ds-primary-700) !important; }
body.tw-teacher #app .tw-banner-actions .ds-btn--primary:is(.at-action-save, .at-action-send) { background: #fff !important; color: var(--ds-primary-700) !important; }

/* Create-quiz dialog */
body.tw-teacher #modal.at-quiz-create-modal { width: min(760px, calc(100vw - 32px)); }
body.tw-teacher #modal .at-quiz-create-head .tag { display: inline-flex; padding: 4px 10px; border-radius: var(--ds-radius-full); background: var(--ds-primary-50); color: var(--ds-primary-700); font-size: var(--ds-text-xs); font-weight: 700; }
body.tw-teacher #modal .at-quiz-publish-toggle { display: flex !important; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--ds-primary-100); border-radius: var(--ds-radius-md); background: var(--ds-primary-50); cursor: pointer; }
body.tw-teacher #modal .at-quiz-publish-toggle input { flex: 0 0 auto; width: 20px; height: 20px; margin: 2px 0 0; }
body.tw-teacher #modal .at-quiz-publish-toggle > span { display: grid; gap: 2px; }
body.tw-teacher #modal .at-quiz-publish-toggle b { color: var(--ds-ink); font-size: var(--ds-text-md); }
body.tw-teacher #modal .at-quiz-publish-toggle small { color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 400; }
body.tw-teacher #modal .at-quiz-question-editor { padding: 16px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); }
body.tw-teacher #modal .at-quiz-question-editor legend { padding: 0 6px; color: var(--ds-primary-700); font-weight: 700; }
body.tw-teacher #modal .at-quiz-create-actions { display: flex; flex-wrap: wrap; gap: 10px; }


/* ---------- Send announcement: who / message / review ---------- */
body.tw-teacher #app .tw-broadcast { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: 16px; align-items: start; }
body.tw-teacher #app .tw-broadcast-main { display: grid; gap: 16px; min-width: 0; }
body.tw-teacher #app .tw-broadcast-side { position: sticky; top: 80px; }
body.tw-teacher #app .tw-step { display: grid; gap: 14px; }
body.tw-teacher #app .tw-step-head { display: flex; align-items: flex-start; justify-content: flex-start; gap: 12px; }
body.tw-teacher #app .tw-step-number { display: grid; place-items: center; flex: 0 0 32px; width: 32px; height: 32px; border-radius: 50%; background: var(--ds-primary-600); color: #fff; font-weight: 700; }
body.tw-teacher #app .tw-step-head h2 { margin: 0; color: var(--ds-ink); font-size: var(--ds-text-lg); line-height: 1.35; }
body.tw-teacher #app .tw-step-head p { margin: 2px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher #app .tw-step .tw-tabs button .tw-icon { width: 17px; height: 17px; }
body.tw-teacher #app .tw-step-body { display: grid; gap: 12px; }
body.tw-teacher #app .tw-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
body.tw-teacher #app .tw-pick { display: flex; align-items: center; gap: 12px; min-height: 64px; padding: 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-text); font: inherit; text-align: start; cursor: pointer; }
body.tw-teacher #app .tw-pick:hover { border-color: var(--ds-primary-300); }
body.tw-teacher #app .tw-pick.is-on { border-color: var(--ds-primary-600); background: var(--ds-primary-50); box-shadow: 0 0 0 1px var(--ds-primary-600); }
body.tw-teacher #app .tw-pick-check { display: grid; place-items: center; flex: 0 0 22px; width: 22px; height: 22px; border: 2px solid var(--ds-border-strong); border-radius: 6px; background: var(--ds-surface); color: #fff; }
body.tw-teacher #app .tw-pick.is-on .tw-pick-check, body.tw-teacher #app .tw-student-pick.is-on .tw-pick-check { border-color: var(--ds-primary-600); background: var(--ds-primary-600); }
body.tw-teacher #app .tw-pick-check .tw-icon { width: 14px; height: 14px; stroke-width: 3; }
body.tw-teacher #app .tw-pick-copy { display: grid; min-width: 0; line-height: 1.35; }
body.tw-teacher #app .tw-pick-copy b { overflow: hidden; color: var(--ds-ink); font-size: var(--ds-text-md); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher #app .tw-pick-copy small { overflow: hidden; color: var(--ds-text-muted); font-size: var(--ds-text-xs); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher #app .tw-step .ds-toolbar { margin: 0; }
body.tw-teacher #app .tw-step .ds-toolbar > label { margin: 0; }
body.tw-teacher #app .tw-pick-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #app .tw-pick-tools > span { margin-inline-end: auto; }
body.tw-teacher #app .tw-student-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; max-height: 340px; margin: 0; padding: 2px; overflow-y: auto; list-style: none; }
body.tw-teacher #app .tw-student-pick { display: flex; align-items: center; gap: 10px; margin: 0; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); cursor: pointer; }
body.tw-teacher #app .tw-student-pick:hover { border-color: var(--ds-primary-300); }
body.tw-teacher #app .tw-student-pick.is-on { border-color: var(--ds-primary-600); background: var(--ds-primary-50); }
body.tw-teacher #app .tw-student-pick input { flex: 0 0 auto; width: 18px; height: 18px; margin: 0; }
body.tw-teacher #app .tw-templates { display: flex; flex-wrap: wrap; gap: 8px; }
body.tw-teacher #app .tw-templates button { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1px dashed var(--ds-primary-300); border-radius: var(--ds-radius-full); background: var(--ds-primary-50); color: var(--ds-primary-700); font: inherit; font-size: var(--ds-text-sm); font-weight: 600; cursor: pointer; }
body.tw-teacher #app .tw-templates button:hover { border-style: solid; background: var(--ds-primary-100); }
body.tw-teacher #app .tw-templates .tw-icon { width: 16px; height: 16px; }
body.tw-teacher #app .tw-category { margin: 0; padding: 0; border: 0; }
body.tw-teacher #app .tw-category legend { margin-bottom: 6px; padding: 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #app .tw-broadcast-fields .tw-field > span { display: flex; justify-content: space-between; }
body.tw-teacher #app .tw-broadcast-fields .tw-field small { color: var(--ds-text-subtle); font-weight: 400; font-variant-numeric: tabular-nums; }
body.tw-teacher #app .tw-broadcast-fields input:not([type="checkbox"]) { width: 100%; padding: 0 12px; }
body.tw-teacher #app .tw-broadcast-fields textarea { width: 100%; }
body.tw-teacher #app .tw-switch { display: flex; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); cursor: pointer; }
body.tw-teacher #app .tw-switch input { position: absolute; opacity: 0; pointer-events: none; }
body.tw-teacher #app .tw-switch-track { position: relative; flex: 0 0 42px; width: 42px; height: 24px; margin-top: 2px; border-radius: var(--ds-radius-full); background: var(--ds-border-strong); transition: background .15s; }
body.tw-teacher #app .tw-switch-track i { position: absolute; top: 3px; inset-inline-start: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: var(--ds-shadow-xs); transition: inset-inline-start .15s; }
body.tw-teacher #app .tw-switch input:checked + .tw-switch-track { background: var(--ds-red-500); }
body.tw-teacher #app .tw-switch input:checked + .tw-switch-track i { inset-inline-start: 21px; }
body.tw-teacher #app .tw-switch input:focus-visible + .tw-switch-track { outline: 3px solid var(--ds-primary-400); outline-offset: 2px; }
body.tw-teacher #app .tw-switch > span:last-child { display: grid; gap: 2px; }
body.tw-teacher #app .tw-switch b { color: var(--ds-ink); }
body.tw-teacher #app .tw-switch small { color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher #app .tw-notice-preview { display: grid; gap: 6px; padding: 14px 16px; border: 1px solid var(--ds-border); border-inline-start: 4px solid var(--ds-primary-500); border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); }
body.tw-teacher #app .tw-notice-preview.is-urgent { border-inline-start-color: var(--ds-red-500); background: var(--ds-red-50); }
body.tw-teacher #app .tw-notice-meta { display: flex; gap: 6px; }
body.tw-teacher #app .tw-notice-cat, body.tw-teacher #app .tw-notice-urgent { padding: 2px 8px; border-radius: var(--ds-radius-full); background: var(--ds-primary-100); color: var(--ds-primary-700); font-size: var(--ds-text-xs); font-weight: 700; }
body.tw-teacher #app .tw-notice-urgent { background: var(--ds-red-500); color: #fff; }
body.tw-teacher #app .tw-notice-preview b { color: var(--ds-ink); font-size: var(--ds-text-md); overflow-wrap: anywhere; }
body.tw-teacher #app .tw-notice-preview p { margin: 0; color: var(--ds-text); font-size: var(--ds-text-sm); line-height: var(--ds-leading); white-space: pre-line; overflow-wrap: anywhere; }
body.tw-teacher #app .tw-notice-preview small { color: var(--ds-text-subtle); font-size: var(--ds-text-xs); }
body.tw-teacher #app .tw-reach { margin: 0; color: var(--ds-ink); font-weight: 700; }
body.tw-teacher #app .tw-hint { margin: -8px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); }
body.tw-teacher #app .tw-hint:empty, body.tw-teacher #app .tw-broadcast-send .ds-alert[hidden] { display: none; }
body.tw-teacher #app .tw-send { width: 100%; min-height: 48px; }
@media (max-width: 1100px) {
  body.tw-teacher #app .tw-broadcast { grid-template-columns: 1fr; }
  body.tw-teacher #app .tw-broadcast-side { position: static; }
}
@media (max-width: 760px) {
  body.tw-teacher #app .tw-pick-grid, body.tw-teacher #app .tw-student-list { grid-template-columns: 1fr; }
  body.tw-teacher #app .tw-templates { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  body.tw-teacher #app .tw-templates button { flex: 0 0 auto; }
  body.tw-teacher #app .tw-category .tw-chip-filter { flex-wrap: wrap; overflow: visible; }
}


/* ---------- Progress reports ---------- */
html[dir="ltr"] body.tw-teacher .tw-flip-back { transform: scaleX(-1); }
body.tw-teacher #app .tw-reports { display: grid; gap: 16px; }
body.tw-teacher #app .tw-report-bar { display: grid; grid-template-columns: minmax(200px, 280px) minmax(0, 1fr); align-items: end; gap: 20px; }
body.tw-teacher #app .tw-week-picker { display: grid; gap: 6px; min-width: 0; }
body.tw-teacher #app .tw-week-label { color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #app .tw-week-nav { display: flex; align-items: center; gap: 8px; min-width: 0; }
body.tw-teacher #app .tw-week-nav .tw-icon-button:disabled { opacity: .4; cursor: not-allowed; }
body.tw-teacher #app .tw-week-strip { display: flex; flex: 1; gap: 6px; min-width: 0; overflow-x: auto; padding: 2px; scrollbar-width: none; }
body.tw-teacher #app .tw-week { display: grid; flex: 1 0 52px; place-items: center; gap: 0; min-height: 52px; padding: 4px 6px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-text); font: inherit; cursor: pointer; line-height: 1.2; }
body.tw-teacher #app .tw-week b { font-size: var(--ds-text-md); }
body.tw-teacher #app .tw-week small { color: var(--ds-text-muted); font-size: 11px; font-variant-numeric: tabular-nums; }
body.tw-teacher #app .tw-week--part { border-color: #f1d9a6; background: var(--ds-sun-50); }
body.tw-teacher #app .tw-week--full { border-color: #a9dcc8; background: var(--ds-mint-50); }
body.tw-teacher #app .tw-week.is-on { border-color: var(--ds-primary-600); background: var(--ds-primary-600); color: #fff; box-shadow: 0 4px 12px rgba(106, 64, 216, .25); }
body.tw-teacher #app .tw-week.is-on small { color: #ece5ff; }
body.tw-teacher #app .tw-report-focus { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; padding: 16px 20px; border: 1px solid var(--ds-primary-200); border-radius: var(--ds-radius-lg); background: linear-gradient(180deg, var(--ds-primary-50), var(--ds-surface)); }
body.tw-teacher #app .tw-report-focus.is-complete { border-color: #a9dcc8; background: linear-gradient(180deg, var(--ds-mint-50), var(--ds-surface)); }
body.tw-teacher #app .tw-report-focus .tw-progress { flex: 1 1 320px; }
body.tw-teacher #app .tw-report-list .ds-toolbar > label { margin: 0; }
body.tw-teacher #app .tw-report-rows { display: grid; margin: 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-report-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--ds-border); }
body.tw-teacher #app .tw-report-row:last-child { border-bottom: 0; }
body.tw-teacher #app .tw-report-who { display: grid; min-width: 0; line-height: 1.35; }
body.tw-teacher #app .tw-report-who b { overflow: hidden; color: var(--ds-ink); font-size: var(--ds-text-md); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher #app .tw-report-who small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher #app .tw-report-row .tw-status { font-size: var(--ds-text-xs); white-space: nowrap; }
body.tw-teacher #app .tw-report-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
body.tw-teacher #app .tw-report-privacy { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
body.tw-teacher #app .tw-report-privacy .tw-icon { width: 15px; height: 15px; color: var(--ds-primary-500); }
/* Report editor dialog: one compact row per criterion */
body.tw-teacher #modal #at-live-report-editor { gap: 10px; }
body.tw-teacher #modal .tw-rate-all { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 10px 12px; border-radius: var(--ds-radius-md); background: var(--ds-primary-50); color: var(--ds-text); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #modal .tw-rate-all small { color: var(--ds-text-muted); font-weight: 400; }
body.tw-teacher #modal .tw-rated-count { margin-inline-start: auto; padding: 4px 10px; border-radius: var(--ds-radius-full); background: var(--ds-surface); color: var(--ds-primary-700); font-variant-numeric: tabular-nums; }
body.tw-teacher #modal .tw-rated-count.is-done { background: var(--ds-mint-50); color: var(--ds-mint-700); }
/* Plain block layout (no grid or floats on fieldset/legend): Safari lays those out differently. */
body.tw-teacher #modal #at-live-report-editor > fieldset:not(.aa-teacher-milestones) { display: block; min-width: 0; margin: 0; padding: 12px 14px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); }
body.tw-teacher #modal #at-live-report-editor > fieldset:not(.aa-teacher-milestones):has(input:checked) { border-color: var(--ds-primary-100); background: var(--ds-surface-muted); }
body.tw-teacher #modal #at-live-report-editor > fieldset:not(.aa-teacher-milestones) legend { display: block; float: inline-start; width: 100%; margin: 0; padding: 0; color: var(--ds-ink); font-size: var(--ds-text-sm); font-weight: 700; }
/* Floating the legend keeps it inside the card in every browser instead of on the border. */
body.tw-teacher #modal #at-live-report-editor > fieldset:not(.aa-teacher-milestones) legend + .report-levels { clear: both; }
body.tw-teacher #modal #at-live-report-editor .report-levels { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
body.tw-teacher #modal #at-live-report-editor .report-levels label { position: relative; display: block; min-width: 0; margin: 0; }
body.tw-teacher #modal #at-live-report-editor .report-levels input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
body.tw-teacher #modal #at-live-report-editor .report-levels span { display: flex; align-items: center; justify-content: center; min-height: 40px; padding: 4px 6px; border: 1px solid var(--ds-border-strong); border-radius: var(--ds-radius-sm); background: var(--ds-surface); color: var(--ds-text); font-size: var(--ds-text-sm); font-weight: 600; line-height: 1.2; text-align: center; white-space: nowrap; cursor: pointer; }
body.tw-teacher #modal #at-live-report-editor .report-levels label:hover span { border-color: var(--ds-primary-300); }
body.tw-teacher #modal #at-live-report-editor .report-levels label:nth-child(1) input:checked + span { border-color: var(--ds-mint-500); background: var(--ds-mint-500); color: #fff; }
body.tw-teacher #modal #at-live-report-editor .report-levels label:nth-child(2) input:checked + span { border-color: var(--ds-sky-500); background: var(--ds-sky-500); color: #fff; }
body.tw-teacher #modal #at-live-report-editor .report-levels label:nth-child(3) input:checked + span { border-color: #d99200; background: #e8a317; color: #fff; }
body.tw-teacher #modal #at-live-report-editor .report-levels label:nth-child(4) input:checked + span { border-color: var(--ds-red-500); background: var(--ds-red-500); color: #fff; }
body.tw-teacher #modal #at-live-report-editor .report-levels input:focus-visible + span { outline: 3px solid var(--ds-primary-400); outline-offset: 2px; }
@media (max-width: 900px) {
  body.tw-teacher #app .tw-report-bar { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.tw-teacher #app .tw-report-row { grid-template-columns: auto minmax(0, 1fr) auto; }
  body.tw-teacher #app .tw-report-actions { grid-column: 1 / -1; justify-content: flex-start; }
  body.tw-teacher #app .tw-report-focus .ds-btn { width: 100%; }
  body.tw-teacher #modal #at-live-report-editor .report-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.tw-teacher #modal .tw-rated-count { margin-inline-start: 0; }
}
body.tw-teacher #app .tw-week { position: relative; }
body.tw-teacher #app .tw-week.is-current:not(.is-on) { border-color: var(--ds-primary-400); box-shadow: inset 0 0 0 1px var(--ds-primary-400); }
body.tw-teacher #app .tw-week i { position: absolute; top: -9px; left: 50%; padding: 1px 6px; border-radius: var(--ds-radius-full); background: var(--ds-primary-700); color: #fff; font-size: 10px; font-style: normal; font-weight: 700; line-height: 1.5; white-space: nowrap; transform: translateX(-50%); }
body.tw-teacher #app .tw-week-strip { padding-top: 10px; }
body.tw-teacher #app .tw-week-label small { color: var(--ds-text-subtle); font-weight: 400; }
body.tw-teacher #app .tw-link { padding: 0; border: 0; background: none; color: var(--ds-primary-700); font: inherit; font-size: var(--ds-text-sm); font-weight: 700; text-decoration: underline; cursor: pointer; }


/* ---------- Account settings: the student settings design (student-settings.css); the banner carries the title. ---------- */
body.tw-teacher #app .ss-page .ss-title { display: none; }

/* ---------- Home: clickable rows (same look, now each opens its class or assignment) ---------- */
body.tw-teacher #app .tw-row-link { display: grid; min-width: 0; padding: 4px 6px; margin: -4px -6px; border: 0; border-radius: var(--ds-radius-sm); background: transparent; color: inherit; font: inherit; text-align: start; line-height: 1.4; cursor: pointer; }
body.tw-teacher #app .tw-row-link:hover { background: var(--ds-primary-50); }
body.tw-teacher #app .tw-row-link:hover b { color: var(--ds-primary-700); }
body.tw-teacher #app .tw-row-link b { overflow: hidden; color: var(--ds-ink); font-size: var(--ds-text-md); font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher #app .tw-row-link small { overflow: hidden; color: var(--ds-text-muted); font-size: var(--ds-text-sm); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher #app .tw-list > li > .tw-review-link { width: 100%; margin: 0; padding: 9px 8px; border: 0; border-bottom: 1px solid var(--ds-border); border-radius: 0; background: transparent; color: inherit; font: inherit; text-align: start; cursor: pointer; }
body.tw-teacher #app .tw-list > li:last-child > .tw-review-link { border-bottom: 0; }
body.tw-teacher #app .tw-list > li > .tw-review-link:hover { border-radius: var(--ds-radius-md); background: var(--ds-surface-muted); }
body.tw-teacher #app .tw-review-go { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: var(--ds-radius-full); background: var(--ds-primary-50); color: var(--ds-primary-700); font-size: var(--ds-text-xs); font-weight: 700; white-space: nowrap; }
body.tw-teacher #app .tw-review-go .tw-icon { width: 14px; height: 14px; }
body.tw-teacher #app .tw-review-link:hover .tw-review-go { background: var(--ds-primary-600); color: #fff; }
body.tw-teacher #app .tw-later { display: grid; gap: 8px; margin: 10px 0 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-later .tw-row-link { width: 100%; margin: 0; padding: 10px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
body.tw-teacher #app .tw-later .tw-row-link:hover { border-color: var(--ds-primary-300); }
@media (max-width: 480px) { body.tw-teacher #app .tw-review-link time { display: none; } }

/* ---------- Home v2: quick-action strip, coloured KPI row, big next-class card, tidy rows ---------- */
body.tw-teacher #app .tw-home { gap: 18px; }
/* Quick actions under the banner */
body.tw-teacher #app .tw-qa-strip { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
body.tw-teacher #app .tw-qa { display: flex; align-items: center; gap: 10px; min-height: 56px; padding: 8px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); background: var(--ds-surface); color: var(--ds-ink); font: inherit; font-size: var(--ds-text-sm); font-weight: 700; text-align: start; cursor: pointer; box-shadow: var(--ds-shadow-xs); transition: transform var(--ds-duration), border-color var(--ds-duration), box-shadow var(--ds-duration); }
body.tw-teacher #app .tw-qa:hover { border-color: var(--ds-primary-300); box-shadow: var(--ds-shadow-sm); transform: translateY(-1px); }
body.tw-teacher #app .tw-qa-icon { display: grid; place-items: center; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 11px; color: #fff; }
body.tw-teacher #app .tw-qa-icon .tw-icon { width: 19px; height: 19px; }
body.tw-teacher #app .tw-qa--violet .tw-qa-icon { background: linear-gradient(135deg, #8b5cf6, #6a40d8); }
body.tw-teacher #app .tw-qa--sky .tw-qa-icon { background: linear-gradient(135deg, #3d9bf0, #2563c9); }
body.tw-teacher #app .tw-qa--mint .tw-qa-icon { background: linear-gradient(135deg, #1fbf8f, #0e8a66); }
body.tw-teacher #app .tw-qa--sun .tw-qa-icon { background: linear-gradient(135deg, #f5a524, #e07b0c); }
body.tw-teacher #app .tw-qa--pink .tw-qa-icon { background: linear-gradient(135deg, #ec5aa3, #c43a82); }
body.tw-teacher #app .tw-qa.at-action-send { border-color: var(--ds-border) !important; background: var(--ds-surface) !important; color: var(--ds-ink) !important; }
/* Coloured KPI row */
body.tw-teacher #app .tw-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
body.tw-teacher #app .tw-kpi { display: flex; align-items: center; gap: 12px; min-height: 76px; padding: 12px 16px; border: 1px solid transparent; border-radius: var(--ds-radius-lg); font: inherit; text-align: start; cursor: pointer; transition: transform var(--ds-duration), box-shadow var(--ds-duration); }
body.tw-teacher #app .tw-kpi:hover { transform: translateY(-1px); box-shadow: var(--ds-shadow-sm); }
body.tw-teacher #app .tw-kpi-icon { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: rgba(255, 255, 255, .75); }
body.tw-teacher #app .tw-kpi-icon .tw-icon { width: 21px; height: 21px; }
body.tw-teacher #app .tw-kpi-body { display: grid; min-width: 0; line-height: 1.2; }
body.tw-teacher #app .tw-kpi-body b { font-size: var(--ds-text-2xl); font-weight: 800; font-variant-numeric: tabular-nums; }
body.tw-teacher #app .tw-kpi-body small { margin-top: 3px; font-size: var(--ds-text-sm); font-weight: 600; opacity: .85; }
body.tw-teacher #app .tw-kpi--violet { background: #efe9ff; border-color: #ddd1ff; color: #4b2aa8; }
body.tw-teacher #app .tw-kpi--sky { background: #e6f2ff; border-color: #cfe4fb; color: #1b5aa0; }
body.tw-teacher #app .tw-kpi--mint { background: #e3f7ef; border-color: #c4ecdc; color: #0c6e52; }
body.tw-teacher #app .tw-kpi--sun { background: #fff3dc; border-color: #f7e0ad; color: #8a5a00; }
/* Next class + today */
body.tw-teacher #app .tw-home-pair { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 18px; align-items: start; }
body.tw-teacher #app .tw-home-pair--even { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.tw-teacher #app .tw-next2 { display: grid; gap: 18px; padding: 24px; border-radius: var(--ds-radius-xl); background: linear-gradient(135deg, var(--ds-primary-50), #fff 70%); border: 1px solid var(--ds-primary-200); box-shadow: var(--ds-shadow-sm); }
body.tw-teacher #app .tw-next2.is-live { background: linear-gradient(135deg, var(--ds-mint-50), #fff 70%); border-color: #a9dcc8; }
body.tw-teacher #app .tw-next2-main { display: grid; gap: 12px; }
body.tw-teacher #app .tw-next2-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 5px 12px; border-radius: var(--ds-radius-full); background: var(--ds-primary-600); color: #fff; font-size: var(--ds-text-sm); font-weight: 700; }
body.tw-teacher #app .tw-next2.is-live .tw-next2-badge { background: var(--ds-mint-700); }
body.tw-teacher #app .tw-next2-badge .tw-icon { width: 15px; height: 15px; }
body.tw-teacher #app .tw-next2-badge .tw-live-dot { background: #fff; }
body.tw-teacher #app .tw-next2 h2 { margin: 0; color: var(--ds-ink); font-size: clamp(1.4rem, 2.2vw, 1.9rem); font-weight: 800; line-height: 1.25; }
body.tw-teacher #app .tw-next2-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-next2-facts li { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-full); background: #fff; color: var(--ds-text); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #app .tw-next2-facts .tw-icon { width: 16px; height: 16px; color: var(--ds-primary-500); }
body.tw-teacher #app .tw-next2-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
body.tw-teacher #app .tw-next2-join { display: inline-flex; align-items: center; gap: 8px; min-height: 48px; padding: 0 22px; border-radius: var(--ds-radius-md); background: var(--ds-primary-600); color: #fff; font-size: var(--ds-text-base); font-weight: 700; text-decoration: none; box-shadow: 0 8px 18px rgba(106, 64, 216, .28); }
body.tw-teacher #app .tw-next2.is-live .tw-next2-join { background: var(--ds-mint-700); box-shadow: 0 8px 18px rgba(12, 110, 82, .28); }
body.tw-teacher #app .tw-next2-join:hover { filter: brightness(1.08); }
body.tw-teacher #app .tw-next2-join .tw-icon { width: 20px; height: 20px; }
body.tw-teacher #app .tw-next2-btn { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px; border: 1px solid var(--ds-border-strong) !important; border-radius: var(--ds-radius-md); background: #fff !important; color: var(--ds-primary-700) !important; font: inherit; font-size: var(--ds-text-sm); font-weight: 700; cursor: pointer; }
body.tw-teacher #app .tw-next2-btn:hover { background: var(--ds-primary-50) !important; }
body.tw-teacher #app .tw-next2-nolink { display: inline-flex; align-items: center; gap: 6px; color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #app .tw-next2-timer { display: grid; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--ds-primary-200); }
body.tw-teacher #app .tw-next2-timer p { margin: 0; color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 700; }
body.tw-teacher #app .tw-countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; direction: ltr; }
[dir="rtl"] body.tw-teacher #app .tw-countdown { direction: rtl; }
body.tw-teacher #app .tw-countdown > div { display: grid; justify-items: center; padding: 10px 4px; border-radius: var(--ds-radius-md); background: #fff; border: 1px solid var(--ds-border); }
body.tw-teacher #app .tw-countdown b { color: var(--ds-primary-700); font-size: var(--ds-text-2xl); font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.1; }
body.tw-teacher #app .tw-next2.is-live .tw-countdown b { color: var(--ds-mint-700); }
body.tw-teacher #app .tw-countdown small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); font-weight: 600; }
body.tw-teacher #app .tw-next2--empty { display: flex; align-items: center; gap: 14px; }
body.tw-teacher #app .tw-next2--empty h2 { font-size: var(--ds-text-lg); }
body.tw-teacher #app .tw-next2--empty p { margin: 4px 0 0; color: var(--ds-text-muted); }
/* Tidy rows for today's classes and the review queue */
body.tw-teacher #app .tw-crows { display: grid; margin: 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-crow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--ds-border); }
body.tw-teacher #app .tw-crow:last-child { border-bottom: 0; }
body.tw-teacher #app .tw-crow-time { flex: 0 0 auto; min-width: 70px; padding: 6px 8px; border-radius: var(--ds-radius-sm); background: var(--ds-primary-50); color: var(--ds-primary-800); font-size: var(--ds-text-sm); font-weight: 800; text-align: center; font-variant-numeric: tabular-nums; }
body.tw-teacher #app .tw-crow.is-current .tw-crow-time { background: var(--ds-mint-700); color: #fff; }
body.tw-teacher #app .tw-crow.is-past { opacity: .6; }
body.tw-teacher #app .tw-crow-main { display: grid; flex: 1 1 auto; min-width: 0; padding: 2px 6px; margin: -2px -6px; border: 0 !important; border-radius: var(--ds-radius-sm); background: transparent !important; color: inherit !important; font: inherit; text-align: start; line-height: 1.4; cursor: pointer; }
body.tw-teacher #app .tw-crow-main:hover { background: var(--ds-primary-50) !important; }
body.tw-teacher #app .tw-crow-main b { overflow: hidden; color: var(--ds-ink); font-size: var(--ds-text-md); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher #app .tw-crow-main small { overflow: hidden; color: var(--ds-text-muted); font-size: var(--ds-text-xs); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher #app .tw-pill { flex: 0 0 auto; padding: 3px 10px; border-radius: var(--ds-radius-full); font-size: var(--ds-text-xs); font-weight: 700; }
body.tw-teacher #app .tw-pill--current { background: var(--ds-mint-50); color: var(--ds-mint-700); }
body.tw-teacher #app .tw-pill--upcoming { background: var(--ds-primary-50); color: var(--ds-primary-700); }
body.tw-teacher #app .tw-pill--past { background: #f1eff6; color: var(--ds-text-muted); }
body.tw-teacher #app .tw-row-btn { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border: 1px solid var(--ds-border-strong) !important; border-radius: var(--ds-radius-sm); background: #fff !important; color: var(--ds-primary-700) !important; font: inherit; font-size: var(--ds-text-sm); font-weight: 700; text-decoration: none; cursor: pointer; }
body.tw-teacher #app .tw-row-btn .tw-icon { width: 16px; height: 16px; }
body.tw-teacher #app .tw-row-btn.is-primary { border-color: transparent !important; background: var(--ds-primary-600) !important; color: #fff !important; }
body.tw-teacher #app .tw-crow.is-current .tw-row-btn.is-primary { background: var(--ds-mint-700) !important; }
body.tw-teacher #app .tw-row-btn:hover { filter: brightness(1.05); }
/* Groups as compact cards */
body.tw-teacher #app .tw-gchips { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
body.tw-teacher #app .tw-gchip { display: flex; align-items: center; gap: 10px; padding: 10px; border: 1px solid var(--ds-border); border-radius: var(--ds-radius-md); }
body.tw-teacher #app .tw-gchip > div { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
body.tw-teacher #app .tw-gchip b { overflow: hidden; color: var(--ds-ink); font-size: var(--ds-text-sm); text-overflow: ellipsis; white-space: nowrap; }
body.tw-teacher #app .tw-gchip small { color: var(--ds-text-muted); font-size: var(--ds-text-xs); }
@media (max-width: 1200px) { body.tw-teacher #app .tw-qa-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1100px) {
  body.tw-teacher #app .tw-home-pair, body.tw-teacher #app .tw-home-pair--even { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  body.tw-teacher #app .tw-qa-strip { display: flex; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
  body.tw-teacher #app .tw-qa { flex: 0 0 auto; min-height: 48px; }
  body.tw-teacher #app .tw-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.tw-teacher #app .tw-kpi { min-height: 64px; padding: 10px 12px; }
  body.tw-teacher #app .tw-kpi-icon { flex-basis: 36px; width: 36px; height: 36px; }
  body.tw-teacher #app .tw-kpi-body b { font-size: var(--ds-text-xl); }
  body.tw-teacher #app .tw-kpi-body small { font-size: var(--ds-text-xs); }
  body.tw-teacher #app .tw-next2 { padding: 18px; }
  body.tw-teacher #app .tw-next2-join { flex: 1 1 100%; justify-content: center; }
  body.tw-teacher #app .tw-next2-btn { flex: 1 1 auto; justify-content: center; }
  body.tw-teacher #app .tw-countdown b { font-size: var(--ds-text-xl); }
  body.tw-teacher #app .tw-crow { flex-wrap: wrap; }
  body.tw-teacher #app .tw-crow-main { flex-basis: calc(100% - 90px); }
  body.tw-teacher #app .tw-gchips { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { body.tw-teacher #app .tw-qa:hover, body.tw-teacher #app .tw-kpi:hover { transform: none; } }
body.tw-teacher #app .tw-gchip b { white-space: normal; overflow-wrap: anywhere; }

/* ---------- One-tap reminder dialog ---------- */
body.tw-teacher #modal .tw-reminder { display: grid; gap: 12px; }
body.tw-teacher #modal .tw-reminder-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 14px; background: var(--ds-sun-50); color: #d98a00; }
body.tw-teacher #modal .tw-reminder-icon .tw-icon { width: 24px; height: 24px; }
body.tw-teacher #modal .tw-reminder h2 { margin: 0; }
body.tw-teacher #modal .tw-reminder-to { margin: 0; color: var(--ds-text); font-weight: 600; }
body.tw-teacher #modal .tw-reminder-names { display: flex; flex-wrap: wrap; gap: 6px; max-height: 120px; margin: 0; padding: 0; overflow-y: auto; list-style: none; }
body.tw-teacher #modal .tw-reminder-names li { padding: 4px 10px; border-radius: var(--ds-radius-full); background: var(--ds-primary-50); color: var(--ds-primary-800); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #modal .tw-reminder .tw-field { display: grid; gap: 6px; margin: 0; }
body.tw-teacher #modal .tw-reminder .tw-field > span { color: var(--ds-text-muted); font-size: var(--ds-text-sm); font-weight: 600; }
body.tw-teacher #modal .tw-reminder input { width: 100%; padding: 0 12px; }
body.tw-teacher #modal .tw-reminder textarea { width: 100%; min-height: 84px; }
body.tw-teacher #modal .tw-reminder .ds-alert[hidden] { display: none; }
body.tw-teacher #modal .tw-reminder-send { justify-self: start; min-height: 46px; padding: 0 22px; }