/* Markaz Educational Portal — full-width responsive layout */

/* ─── Theme tokens (light + dark) ──────────────────── */
:root {
  --bg: var(--color-gray-50, #f8f9fa);
  --surface: #ffffff;
  --surface-2: #f1f5f9; /* subtle raised/zebra/hover surface */
  --text: var(--color-text-primary, #1a1a1a);
  --text-muted: var(--color-text-secondary, #6b7280);
  --muted: #64748b; /* used by newer feature blocks */
  --border: var(--color-border, #e5e7eb);
  --grp: #2563eb; /* default group accent (usually overridden inline) */
  --gray-50: #f8f9fa;
  --gray-100: #f1f5f9;
  --surface-subtle: var(--surface-2);
  --color-bg-subtle: var(--surface-2);
}

:root[data-theme='dark'] {
  --bg: #0f1419;
  --surface: #1a1f26;
  --surface-2: #232b35;
  --text: #f1f5f9;
  --text-muted: #94a3b8;
  --muted: #94a3b8;
  --border: #2a323d;
  --grp: #60a5fa;
  --gray-50: #1a1f26;
  --gray-100: #2a323d;
  --color-text-primary: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-border: #2a323d;
  --color-gray-50: #1a1f26;
  --color-gray-100: #2a323d;
  --color-white: #1a1f26;
  --color-surface: #1a1f26;
  --color-bg-subtle: #232b35;
}

:root[data-theme='dark'] body {
  background: var(--bg) !important;
  color: var(--text);
}

:root[data-theme='dark'] .portal-app,
:root[data-theme='dark'] .portal-login {
  background: var(--bg) !important;
}

:root[data-theme='dark'] .overview-section,
:root[data-theme='dark'] .subjects-section,
:root[data-theme='dark'] .course-card,
:root[data-theme='dark'] .course-hero,
:root[data-theme='dark'] .tab-strip,
:root[data-theme='dark'] .portal-header,
:root[data-theme='dark'] .login-card,
:root[data-theme='dark'] .portal-modal,
:root[data-theme='dark'] .module-content-item,
:root[data-theme='dark'] .module-item summary,
:root[data-theme='dark'] .notif-dropdown {
  background: var(--surface) !important;
  color: var(--text);
}

:root[data-theme='dark'] .module-item,
:root[data-theme='dark'] .stat-card,
:root[data-theme='dark'] .subject-card,
:root[data-theme='dark'] .assignment-card,
:root[data-theme='dark'] .grade-category,
:root[data-theme='dark'] .upcoming-row,
:root[data-theme='dark'] .my-day-item {
  background: var(--gray-50) !important;
  color: var(--text);
}

:root[data-theme='dark'] input,
:root[data-theme='dark'] textarea,
:root[data-theme='dark'] select {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
}

body {
  font-family:
    'Cairo',
    system-ui,
    -apple-system,
    sans-serif;
  background: var(--color-gray-50, #f8f9fa);
  color: var(--color-text-primary, #1a1a1a);
  min-height: 100vh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

[hidden] {
  display: none !important;
}

/* ════════════════════════════════════════════════════════
   LOGIN VIEW
   ════════════════════════════════════════════════════════ */
.portal-login {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background:
    radial-gradient(circle at 20% 20%, rgba(var(--accent-rgb), 0.12), transparent 60%),
    radial-gradient(circle at 80% 80%, rgba(var(--brand-rgb), 0.1), transparent 60%), var(--color-gray-50, #f8f9fa);
}

.login-card {
  width: 100%;
  max-width: 460px;
  background: var(--panel-bg);
  border-radius: 12px;
  padding: 40px 32px 28px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);
}

.login-header {
  text-align: center;
  margin-bottom: 28px;
}

.login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 12px;
}

.login-logo img {
  height: 56px;
  width: auto;
  display: block;
}

.login-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  margin: 0 0 6px;
  color: var(--color-secondary, #004b3c);
}

.login-header p {
  margin: 0;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.95rem;
}

.login-error {
  background: rgba(220, 53, 69, 0.08);
  color: #b71c1c;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.9rem;
  margin-bottom: 16px;
  text-align: center;
  border: 1px solid rgba(220, 53, 69, 0.18);
}

.login-form .form-group {
  margin-bottom: 16px;
}

.login-form label {
  display: block;
  font-weight: 600;
  font-size: 0.9rem;
  margin-bottom: 6px;
  color: var(--color-text-primary, #1a1a1a);
}

/* «تذكرني» — the label wraps the checkbox, so the whole row is a tap target.
   Overrides the block/bold `.login-form label` rule above. */
.login-form .login-remember {
  display: flex;
  align-items: center;
  gap: 9px;
  /* Vertical padding lifts the whole row to a ~44px touch target — the checkbox
     alone is 20px, which is uncomfortably small on a phone, and this is a mobile-
     first audience. The negative inline margin keeps the text visually aligned with
     the fields above despite the padding. */
  padding: 11px 8px;
  margin: 0 -8px 12px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
  user-select: none;
  color: var(--color-text-secondary, #6b7280);
  -webkit-tap-highlight-color: transparent;
}

.login-form .login-remember:active {
  background: var(--panel-2, rgba(0, 0, 0, 0.04));
}

.login-form .login-remember input[type='checkbox'] {
  /* 20px so it clears the 24px minimum tap target once the label is included. */
  width: 20px;
  height: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: var(--accent, #16a34a);
  cursor: pointer;
}

.login-form input[type='text'],
.login-form input[type='password'] {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font-family: inherit;
  font-size: 1rem;
  background: var(--panel-bg);
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.login-form input:focus {
  outline: none;
  border-color: var(--color-primary, #8bc53f);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.password-wrap {
  position: relative;
}

.password-wrap input {
  padding-inline-end: 44px;
}

.toggle-password {
  position: absolute;
  inset-inline-end: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  padding: 6px;
  color: var(--color-text-secondary, #6b7280);
}

.btn-primary {
  width: 100%;
  padding: 13px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary, #8bc53f);
  color: #fff;
  font-family: inherit;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    transform 0.05s;
}

.btn-primary:hover:not(:disabled) {
  background: var(--color-primary-dark, #6fa030);
}

.btn-primary:active:not(:disabled) {
  transform: translateY(1px);
}

.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary .spinner {
  display: inline-block;
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255, 255, 255, 0.4);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  margin-inline-start: 8px;
  vertical-align: middle;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.login-footer {
  text-align: center;
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.88rem;
}

.login-footer a {
  color: var(--color-primary, #8bc53f);
  font-weight: 600;
  text-decoration: none;
}

.login-footer a:hover {
  text-decoration: underline;
}

/* ════════════════════════════════════════════════════════
   APP SHELL
   ════════════════════════════════════════════════════════ */
.portal-app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-gray-50, #f8f9fa);
}

/* Sticky header anchored hard to the top — no gap. */
.portal-header {
  background: var(--panel-bg);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.portal-header-inner {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 12px 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  color: var(--color-secondary, #004b3c);
  font-size: 1.05rem;
}

.brand img {
  height: 36px;
  width: auto;
}

.header-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header-name {
  font-weight: 600;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.92rem;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-ghost {
  background: transparent;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 7px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--color-text-primary, #1a1a1a);
  transition: background 0.15s;
}

.btn-ghost:hover {
  background: var(--color-gray-50, #f8f9fa);
}

/* Main content uses the full viewport width with comfortable side padding. */
.portal-main {
  flex: 1;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ════════════════════════════════════════════════════════
   OVERVIEW SECTION (full-width hero + stats)
   ════════════════════════════════════════════════════════ */
.overview-section {
  background: var(--panel-bg);
  border-radius: 16px;
  padding: 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  position: relative;
  overflow: hidden;
}

.overview-section::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary, #8bc53f), var(--color-secondary, #004b3c));
}

.overview-hero {
  display: flex;
  align-items: center;
  gap: 24px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  margin-bottom: 24px;
}

.overview-avatar {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #8bc53f), var(--color-secondary, #004b3c));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  font-weight: 700;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

.overview-identity {
  flex: 1;
  min-width: 0;
}

.overview-eyebrow {
  font-size: 0.82rem;
  color: var(--color-text-secondary, #6b7280);
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 4px;
}

.overview-identity h1 {
  margin: 0 0 10px;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--color-secondary, #004b3c);
  line-height: 1.2;
  word-break: break-word;
}

.overview-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.role-chip {
  display: inline-block;
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--color-primary-dark, #4a7022);
  padding: 5px 14px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 700;
}

.profile-id {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.85rem;
  font-family: monospace;
}

/* Stats grid — fills the rest of the overview card. */
.stats-grid {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.stat-card {
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 16px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  transition:
    border-color 0.15s,
    transform 0.05s;
}

.stat-card:hover {
  border-color: var(--color-primary, #8bc53f);
}

.stat-icon {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--panel-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.stat-content {
  min-width: 0;
}

.stat-label {
  font-size: 0.78rem;
  color: var(--color-text-secondary, #6b7280);
  font-weight: 600;
  margin-bottom: 2px;
}

.stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-text-primary, #1a1a1a);
  word-break: break-word;
  line-height: 1.3;
}

/* Collapsible "more info" panel */
.overview-details {
  margin-top: 22px;
  padding-top: 18px;
  border-top: 1px dashed var(--color-border, #e5e7eb);
}

.overview-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.9rem;
  color: var(--color-text-secondary, #6b7280);
  padding: 6px 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.overview-details summary::-webkit-details-marker {
  display: none;
}

.overview-details summary::before {
  content: '▸';
  display: inline-block;
  transition: transform 0.15s;
  color: var(--color-primary, #8bc53f);
  font-size: 0.7rem;
}

.overview-details[open] summary::before {
  transform: rotate(90deg);
}

.profile-fields {
  margin: 14px 0 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px 24px;
}

.profile-fields > div {
  min-width: 0;
}

.profile-fields dt {
  font-size: 0.76rem;
  color: var(--color-text-secondary, #6b7280);
  font-weight: 600;
  margin-bottom: 2px;
}

.profile-fields dd {
  margin: 0;
  font-size: 0.92rem;
  color: var(--color-text-primary, #1a1a1a);
  word-break: break-word;
}

/* ════════════════════════════════════════════════════════
   SUBJECTS SECTION
   ════════════════════════════════════════════════════════ */
.subjects-section {
  background: var(--panel-bg);
  border-radius: 16px;
  padding: 24px 28px 28px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.section-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.section-header h2 {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--color-secondary, #004b3c);
}

.section-count {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.88rem;
  font-weight: 600;
}

.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
}

.subjects-loading,
.subjects-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 48px 16px;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.95rem;
}

.subject-card {
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 18px;
  border-inline-start: 4px solid var(--color-primary, #8bc53f);
  transition:
    box-shadow 0.15s,
    transform 0.05s,
    border-color 0.15s;
  cursor: pointer;
}

.subject-card:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  transform: translateY(-1px);
}

.subject-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 12px;
}

.subject-name {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--color-text-primary, #1a1a1a);
  line-height: 1.3;
}

.subject-code {
  font-family: monospace;
  font-size: 0.74rem;
  color: var(--color-text-secondary, #6b7280);
  margin-top: 4px;
}

.subject-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
}

.subject-chip {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--color-primary-dark, #4a7022);
  padding: 3px 10px;
  border-radius: 999px;
  font-weight: 600;
  white-space: nowrap;
}

.subject-chip--role-teacher {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.subject-chip--role-supervisor {
  background: rgba(245, 158, 11, 0.13);
  color: #b45309;
}

.subject-chip--role-student {
  background: rgba(16, 185, 129, 0.12);
  color: #047857;
}

.subject-chip--neutral {
  background: rgba(0, 0, 0, 0.05);
  color: var(--color-text-secondary, #6b7280);
}

/* ════════════════════════════════════════════════════════
   PAGES (router)
   ════════════════════════════════════════════════════════ */
.page {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ════════════════════════════════════════════════════════
   COURSE PAGE
   ════════════════════════════════════════════════════════ */
.back-button {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--color-text-primary, #1a1a1a);
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.back-button:hover {
  background: var(--color-gray-50, #f8f9fa);
  border-color: var(--color-primary, #8bc53f);
}

.back-button > span:first-child {
  font-size: 1.1rem;
  color: var(--color-primary, #8bc53f);
}

/* The hero is a vertical stack: an optional banner strip, then the icon+title row.
   All the padding and the icon/title layout live on `.course-hero-row`, so adding
   or removing the banner never has to override the hero's own box. */
.course-hero {
  background: var(--panel-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}

/* Must stay HERE, above the responsive blocks: the 768px and 480px breakpoints
   below override this padding, and a later top-level copy would silently win over
   both of them at every viewport width. */
.course-hero-row {
  display: flex;
  align-items: center;
  gap: 22px;
  padding: 28px;
  min-width: 0;
}

.course-hero::before {
  content: '';
  position: absolute;
  top: 0;
  inset-inline-start: 0;
  inset-inline-end: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--color-primary, #8bc53f), var(--color-secondary, #004b3c));
}

.course-hero-icon {
  flex-shrink: 0;
  width: 72px;
  height: 72px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--color-primary, #8bc53f), var(--color-secondary, #004b3c));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  box-shadow: 0 4px 12px rgba(var(--accent-rgb), 0.3);
}

.course-hero-content {
  flex: 1;
  min-width: 0;
}

.course-hero-eyebrow {
  font-size: 0.82rem;
  color: var(--color-text-secondary, #6b7280);
  font-weight: 600;
  margin-bottom: 4px;
}

.course-hero-content h1 {
  margin: 0 0 10px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-secondary, #004b3c);
  line-height: 1.2;
  word-break: break-word;
}

.course-hero-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.8rem;
}

.course-loading,
.course-error {
  padding: 40px 20px;
  text-align: center;
  color: var(--color-text-secondary, #6b7280);
  background: var(--panel-bg);
  border-radius: 16px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
}

.course-error {
  color: #b91c1c;
  background: rgba(220, 53, 69, 0.04);
  border: 1px solid rgba(220, 53, 69, 0.18);
}

.course-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* ─── Tab strip ─────────────────────────────────────── */
.tab-strip {
  background: var(--panel-bg);
  border-radius: 14px;
  padding: 6px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
  display: flex;
  gap: 4px;
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}

.tab-strip::-webkit-scrollbar {
  height: 4px;
}

.tab-strip::-webkit-scrollbar-thumb {
  background: var(--color-border, #e5e7eb);
  border-radius: 2px;
}

.tab-button {
  flex: 1;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  border: none;
  background: transparent;
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-secondary, #6b7280);
  cursor: pointer;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}

.tab-button:hover {
  background: var(--color-gray-50, #f8f9fa);
  color: var(--color-text-primary, #1a1a1a);
}

.tab-button.is-active {
  background: linear-gradient(135deg, var(--color-primary, #8bc53f), var(--color-secondary, #004b3c));
  color: #fff;
  box-shadow: 0 2px 8px rgba(var(--brand-rgb), 0.2);
}

.tab-button.is-active:hover {
  background: linear-gradient(135deg, var(--color-primary, #8bc53f), var(--color-secondary, #004b3c));
  color: #fff;
}

.tab-icon {
  font-size: 1.05rem;
  line-height: 1;
}

.tab-panels {
  display: contents;
}

.tab-panel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tab-panel[hidden] {
  display: none;
}

/* Inline link-style button (e.g., "view all" in card headers) */
.link-button {
  background: transparent;
  border: none;
  color: var(--color-primary-dark, #4a7022);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: background 0.15s;
}

.link-button:hover {
  background: rgba(var(--accent-rgb), 0.1);
}

/* Placeholder body inside cards — reused by all "coming soon" sections */
.course-card .placeholder-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 10px;
  border: 1px dashed var(--color-border, #e5e7eb);
}

.course-card .placeholder-body p {
  margin: 0;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.92rem;
  line-height: 1.5;
}

.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.upcoming-row {
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  transition:
    border-color 0.15s,
    transform 0.05s;
}

.upcoming-row:hover {
  border-color: var(--color-primary, #8bc53f);
  transform: translateY(-1px);
}

.upcoming-row-main {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.upcoming-row-meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ═════════════════════════════════════════════════════
   MODAL SYSTEM
   ═════════════════════════════════════════════════════ */
.portal-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
}

.portal-modal {
  width: 100%;
  background: var(--panel-bg);
  border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.portal-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.portal-modal-header h3 {
  margin: 0;
  font-size: 1.05rem;
  color: var(--color-secondary, #004b3c);
}

.portal-modal-close {
  background: transparent;
  border: none;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text-secondary, #6b7280);
  padding: 4px 8px;
  border-radius: 6px;
}

.portal-modal-close:hover {
  background: var(--color-gray-50, #f8f9fa);
}

.portal-modal-body {
  padding: 18px 20px;
  overflow-y: auto;
  flex: 1;
}

.portal-modal-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--color-border, #e5e7eb);
  display: flex;
  gap: 10px;
  justify-content: flex-end;
}

.modal-btn {
  border: none;
  border-radius: 8px;
  padding: 9px 18px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

.modal-btn--ghost {
  background: transparent;
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-primary, #1a1a1a);
}

.modal-btn--ghost:hover {
  background: var(--color-gray-50, #f8f9fa);
}

.modal-btn--primary {
  background: var(--color-primary, #8bc53f);
  color: #fff;
}

.modal-btn--primary:hover {
  background: var(--color-primary-dark, #6fa030);
}

.modal-btn--primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.modal-btn--danger {
  background: #dc2626;
  color: #fff;
}

.modal-btn--danger:hover {
  background: #b91c1c;
}

/* Form rows inside modals */
.form-row {
  margin-bottom: 14px;
}

.form-row label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-text-primary, #1a1a1a);
  margin-bottom: 6px;
}

.form-row input[type='text'],
.form-row input[type='url'],
.form-row input[type='number'],
.form-row input[type='datetime-local'],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--panel-bg);
}

.form-row textarea {
  resize: vertical;
  min-height: 80px;
}

.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  outline: none;
  border-color: var(--color-primary, #8bc53f);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.form-row input:disabled,
.form-row select:disabled {
  background: var(--color-gray-50, #f8f9fa);
  cursor: not-allowed;
}

.form-row .hint {
  font-size: 0.78rem;
  color: var(--color-text-secondary, #6b7280);
  margin-top: 4px;
}

.form-row--inline {
  display: flex;
  align-items: center;
  gap: 8px;
}

.form-row--inline label {
  margin: 0;
  font-weight: 500;
  font-size: 0.9rem;
  cursor: pointer;
}

/* ═════════════════════════════════════════════════════
   TOAST
   ═════════════════════════════════════════════════════ */
.portal-toast {
  position: fixed;
  bottom: 24px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: max-content;
  max-width: calc(100% - 32px);
  background: var(--color-secondary, #004b3c);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
  z-index: 2000;
  font-weight: 600;
  font-size: 0.92rem;
  opacity: 0;
  transition:
    opacity 0.3s,
    transform 0.3s;
  pointer-events: none;
  text-align: center;
}

.portal-toast.is-visible {
  opacity: 1;
}

.portal-toast--error {
  background: #b91c1c;
}

/* ═════════════════════════════════════════════════════
   MODULES
   ═════════════════════════════════════════════════════ */
.modules-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.module-item {
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  overflow: hidden;
}

.module-item summary {
  list-style: none;
  cursor: pointer;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: var(--panel-bg);
}

.module-item summary::-webkit-details-marker {
  display: none;
}

.module-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.96rem;
  flex: 1;
  min-width: 0;
}

.module-toggle {
  font-size: 0.8rem;
  color: var(--color-text-secondary, #6b7280);
  transition: transform 0.15s;
}

.module-item:not([open]) .module-toggle {
  transform: rotate(-90deg);
}

.module-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.icon-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 0.95rem;
  padding: 4px 8px;
  border-radius: 6px;
  transition: background 0.15s;
}

.icon-btn:hover {
  background: var(--color-gray-100, #f1f5f9);
}

.drag-handle {
  cursor: grab;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.95rem;
  padding: 4px 6px;
  user-select: none;
}

.drag-handle:active {
  cursor: grabbing;
}

.module-desc {
  margin: 0;
  padding: 0 16px 12px;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.9rem;
}

.module-items {
  padding: 6px 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.module-items-empty {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.88rem;
  font-style: italic;
  padding: 6px 0;
}

.module-content-item {
  background: var(--panel-bg);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px 14px;
  border-inline-start: 3px solid transparent;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}

.module-content-item.type-text {
  border-inline-start-color: #6b7280;
}

.module-content-item.type-file {
  border-inline-start-color: #2563eb;
}

.module-content-item.type-link {
  border-inline-start-color: #16a34a;
}

.module-content-item.type-assignment {
  border-inline-start-color: #f59e0b;
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.04), #fff 30%);
  cursor: pointer;
}

.module-content-item.type-assignment:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

.module-content-item.is-locked {
  opacity: 0.6;
  cursor: not-allowed;
}

.module-content-item.is-locked .item-title {
  color: var(--color-text-secondary, #6b7280);
}

.item-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 6px;
}

.type-icon {
  flex-shrink: 0;
  font-size: 1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
}

.item-title {
  /* basis auto (not 0) so the title claims its own width and the badge row wraps
     below instead of squeezing it away; the floor guarantees a readable column. */
  flex: 1 1 auto;
  min-width: 10ch;
  overflow-wrap: anywhere;
  word-break: break-word;
}

.assignment-in-module-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
  margin-top: 6px;
}

.item-locked {
  background: rgba(0, 0, 0, 0.04);
  color: var(--color-text-secondary, #6b7280);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 0.85rem;
  margin-top: 6px;
}

.item-video {
  margin-top: 8px;
  position: relative;
  padding-top: 56.25%; /* 16:9 */
  border-radius: 10px;
  overflow: hidden;
  background: #000;
}

.item-video iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.item-text h3,
.item-text h4,
.item-text h5 {
  margin: 14px 0 6px;
  color: var(--color-secondary, #004b3c);
}

.item-text p {
  margin: 0 0 10px;
  line-height: 1.7;
}

.item-text ul {
  margin: 0 0 10px;
  padding-inline-start: 22px;
}

.item-text code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.item-text a {
  color: var(--color-primary-dark, #4a7022);
  text-decoration: underline;
  word-break: break-all;
}

.item-footer {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
}

.complete-btn {
  background: transparent;
  border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-text-primary, #1a1a1a);
  border-radius: 8px;
  padding: 6px 14px;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}

.complete-btn:hover {
  border-color: var(--color-primary, #8bc53f);
  background: rgba(var(--accent-rgb), 0.08);
}

.complete-btn.is-completed {
  background: rgba(16, 185, 129, 0.13);
  color: #047857;
  border-color: rgba(16, 185, 129, 0.3);
}

.module-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px 14px;
}

.module-progress-bar {
  flex: 1;
  height: 8px;
  background: var(--color-gray-100, #f1f5f9);
  border-radius: 999px;
  overflow: hidden;
}

.module-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary, #8bc53f), var(--color-secondary, #004b3c));
  transition: width 0.3s;
}

.module-progress-label {
  font-size: 0.78rem;
  color: var(--color-text-secondary, #6b7280);
  font-weight: 600;
  white-space: nowrap;
}

.module-add-item {
  padding: 0 16px 14px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

.item-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  /* Never absorb the title’s space: wrap to the next line instead. */
  flex-shrink: 0;
  margin-inline-start: auto;
}

.item-text {
  color: var(--color-text-primary, #1a1a1a);
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.item-empty {
  color: var(--color-text-secondary, #6b7280);
  font-style: italic;
  font-size: 0.88rem;
}

.item-file,
.item-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--color-primary-dark, #4a7022);
  text-decoration: none;
  font-size: 0.9rem;
  padding: 6px 10px;
  background: rgba(var(--accent-rgb), 0.1);
  border-radius: 8px;
  word-break: break-all;
}

.item-file:hover,
.item-link:hover {
  background: rgba(var(--accent-rgb), 0.18);
}

.item-file small {
  color: var(--color-text-secondary, #6b7280);
}

.chip {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 600;
}

.chip--muted {
  background: rgba(0, 0, 0, 0.06);
  color: var(--color-text-secondary, #6b7280);
}

.chip--required {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.chip--info {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}

.chip--success {
  background: rgba(16, 185, 129, 0.13);
  color: #047857;
}

.chip--warn {
  background: rgba(245, 158, 11, 0.13);
  color: #b45309;
}

.chip--late {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

.chip--due {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  font-weight: 700;
}

/* ═════════════════════════════════════════════════════
   ASSIGNMENTS
   ═════════════════════════════════════════════════════ */
.assignments-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.assignment-card {
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition:
    box-shadow 0.15s,
    transform 0.05s,
    border-color 0.15s;
}

.assignment-card:hover {
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
  border-color: var(--color-primary, #8bc53f);
  transform: translateY(-1px);
}

.assignment-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 8px;
}

.assignment-card-title strong {
  font-size: 0.98rem;
  color: var(--color-text-primary, #1a1a1a);
  display: block;
  word-break: break-word;
}

.assignment-card-title small {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.78rem;
}

.assignment-actions {
  display: flex;
  gap: 4px;
}

.assignment-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-size: 0.78rem;
}

/* Form 2-column grid for assignment editor */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}

@media (max-width: 540px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Assignment detail modal */
.assignment-meta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px 18px;
  margin-bottom: 14px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.assignment-meta-grid dt {
  font-size: 0.72rem;
  color: var(--color-text-secondary, #6b7280);
  font-weight: 600;
}

.assignment-meta-grid dd {
  margin: 2px 0 0;
  font-size: 0.92rem;
  color: var(--color-text-primary, #1a1a1a);
  font-weight: 600;
}

.instructions {
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 14px;
  color: var(--color-text-primary, #1a1a1a);
  font-size: 0.92rem;
  line-height: 1.6;
  white-space: pre-wrap;
}

.late-warning {
  background: rgba(245, 158, 11, 0.1);
  color: #b45309;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 0.88rem;
  font-weight: 600;
  margin-bottom: 14px;
  border: 1px solid rgba(245, 158, 11, 0.25);
}

.grade-banner {
  background: linear-gradient(135deg, rgba(16, 185, 129, 0.12), rgba(var(--accent-rgb), 0.12));
  border: 1px solid rgba(16, 185, 129, 0.25);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 14px;
  text-align: center;
}

/* ── Quiz teacher grading ── */
.attempt-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.attempt-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  font: inherit;
  text-align: start;
  transition:
    border-color 0.15s,
    background 0.15s;
}
.attempt-row:hover {
  border-color: var(--color-primary, #8bc53f);
  background: rgba(var(--accent-rgb), 0.05);
}
.attempt-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  flex: 1;
}
.attempt-score {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-secondary, #6b7280);
}
.attempt-badge {
  font-size: 0.72rem;
  padding: 3px 9px;
  border-radius: 999px;
  font-weight: 600;
}
.attempt-badge.pending {
  background: #fef3c7;
  color: #b45309;
}
.attempt-badge.done {
  background: #d1fae5;
  color: #047857;
}
.attempt-badge.auto {
  background: #e5e7eb;
  color: #6b7280;
}

.qz-grade-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: rgba(var(--accent-rgb), 0.08);
  border-radius: 10px;
  margin-bottom: 12px;
  position: sticky;
  top: 0;
}
.qz-grade-who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.qz-grade-total {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #047857;
}
.qz-grade-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.qg-item {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 12px;
}
.qg-q {
  font-weight: 600;
  margin-bottom: 6px;
}
.qg-qmax {
  font-weight: 400;
  font-size: 0.8rem;
  color: var(--color-text-secondary, #6b7280);
}
.qg-a {
  font-size: 0.9rem;
  margin-bottom: 4px;
}
.qg-correct {
  font-size: 0.85rem;
  color: #047857;
  margin-bottom: 6px;
}
.qg-grade-row {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  margin: 8px 0;
}
.qg-quick {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--color-border, #e5e7eb);
  background: var(--panel-bg);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
}
.qg-quick:hover {
  background: #f3f4f6;
}
.qg-quick.is-active {
  background: var(--color-primary, #8bc53f);
  color: #fff;
  border-color: var(--color-primary, #8bc53f);
}
.qg-pts {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.85rem;
  color: var(--color-text-secondary, #6b7280);
}
.qg-pts-input {
  width: 60px;
  padding: 5px 8px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font: inherit;
  text-align: center;
}
.qg-fb {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
}
.qg-note-label {
  display: block;
  font-weight: 600;
  margin: 14px 0 6px;
  font-size: 0.9rem;
}
.qg-note {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font: inherit;
  resize: vertical;
}

/* ── Student review of graded quiz ── */
.qz-teacher-note {
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 14px;
  font-size: 0.92rem;
}
.qz-teacher-note-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  color: #b45309;
  margin-bottom: 5px;
}
.qz-review-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qz-rev-item {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  padding: 10px 12px;
}
.qz-rev-q {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  margin-bottom: 5px;
}
.qz-rev-q > span:nth-child(2) {
  flex: 1;
}
.qz-rev-mark {
  display: inline-flex;
  width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  flex-shrink: 0;
}
.qz-rev-mark.ok {
  background: #d1fae5;
  color: #047857;
}
.qz-rev-mark.bad {
  background: #fee2e2;
  color: #b91c1c;
}
.qz-rev-pts {
  font-variant-numeric: tabular-nums;
  font-size: 0.85rem;
  color: var(--color-text-secondary, #6b7280);
}
.qz-rev-a {
  font-size: 0.88rem;
  margin-bottom: 3px;
}
.qz-rev-correct {
  color: #047857;
}
.qz-rev-fb {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.85rem;
  background: #fffbeb;
  border-radius: 8px;
  padding: 6px 9px;
  margin-top: 6px;
  color: #92400e;
}

.grade-banner-score {
  font-size: 1.8rem;
  font-weight: 700;
  color: #047857;
}

.grade-banner-label {
  font-size: 0.82rem;
  color: var(--color-text-secondary, #6b7280);
  margin-bottom: 8px;
}

.grade-banner-feedback {
  text-align: start;
  font-size: 0.9rem;
  background: var(--panel-bg);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  border: 1px solid rgba(16, 185, 129, 0.18);
}

/* Submissions table */
.submissions-wrap {
  overflow-x: auto;
}

.submissions-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.submissions-table th {
  text-align: start;
  background: var(--color-gray-50, #f8f9fa);
  padding: 10px 12px;
  font-size: 0.78rem;
  color: var(--color-text-secondary, #6b7280);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.submissions-table td {
  padding: 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  vertical-align: top;
}

.submissions-table .muted {
  font-family: monospace;
  font-size: 0.74rem;
  color: var(--color-text-secondary, #6b7280);
  margin-top: 2px;
}

.muted {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.85rem;
}

/* ═════════════════════════════════════════════════════
   GRADES — student view
   ═════════════════════════════════════════════════════ */
.grade-category {
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.grade-category-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.grade-category-header strong {
  font-size: 0.98rem;
}

.grade-items-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.grade-items-list li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font-size: 0.9rem;
}

.grade-item-title {
  flex: 1;
  min-width: 0;
  word-break: break-word;
}

.grade-item-score {
  font-weight: 700;
  color: var(--color-secondary, #004b3c);
}

/* ═════════════════════════════════════════════════════
   GRADEBOOK — teacher / supervisor view
   ═════════════════════════════════════════════════════ */
.gradebook-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  gap: 12px;
  flex-wrap: wrap;
}

.gb-total-weight {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--color-text-primary, #1a1a1a);
}

.gb-total-weight--off {
  color: #b91c1c;
}

.gb-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.gradebook-wrap {
  overflow-x: auto;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
}

.gradebook-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.gradebook-table th,
.gradebook-table td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  text-align: center;
  white-space: nowrap;
}

.gradebook-table th:first-child,
.gradebook-table td:first-child {
  text-align: start;
  position: sticky;
  inset-inline-start: 0;
  background: var(--panel-bg);
  z-index: 1;
}

.gradebook-table thead th {
  background: var(--color-gray-50, #f8f9fa);
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--color-text-secondary, #6b7280);
}

.gradebook-table thead th small {
  font-weight: 500;
  color: var(--color-text-secondary, #6b7280);
}

.gradebook-table tbody tr:hover {
  background: rgba(var(--accent-rgb), 0.04);
}

/* Categories manager rows */
.cats-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.cat-row {
  display: grid;
  grid-template-columns: 1fr 110px auto auto;
  gap: 8px;
  align-items: center;
}

.cat-row input {
  padding: 8px 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.9rem;
}

.cats-total {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed var(--color-border, #e5e7eb);
  font-size: 0.92rem;
  font-weight: 600;
  text-align: end;
}

/* Students checklist (manual grade modal) */
.students-checklist {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  max-height: 200px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.students-checklist label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: normal;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}

.students-checklist label:hover {
  background: var(--color-gray-50, #f8f9fa);
}

@media (max-width: 540px) {
  .cat-row {
    grid-template-columns: 1fr 80px auto auto;
  }

  .cat-row input {
    padding: 7px 8px;
    font-size: 0.85rem;
  }
}

.course-card {
  background: var(--panel-bg);
  border-radius: 16px;
  padding: 22px 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
  border: 1px solid rgba(0, 0, 0, 0.04);
}

.course-card h2 {
  margin: 0 0 14px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-secondary, #004b3c);
}

.course-card .card-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.course-card .card-header h2 {
  margin: 0;
}

.course-placeholder .placeholder-body {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px;
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 10px;
  border: 1px dashed var(--color-border, #e5e7eb);
}

.placeholder-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: var(--panel-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}

.course-placeholder p {
  margin: 0;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.92rem;
  line-height: 1.5;
}

/* Staff list */
.staff-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.staff-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
}

.staff-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--color-primary, #8bc53f), var(--color-secondary, #004b3c));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.95rem;
}

.staff-text {
  min-width: 0;
}

.staff-name {
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--color-text-primary, #1a1a1a);
  word-break: break-word;
}

.staff-role {
  font-size: 0.75rem;
  margin-top: 2px;
}

.staff-role--teacher {
  color: #1d4ed8;
}

.staff-role--supervisor {
  color: #b45309;
}

.staff-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 12px;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.9rem;
}

/* Students list */
.students-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}

.student-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
}

.student-avatar {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(16, 185, 129, 0.15);
  color: #047857;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 0.85rem;
}

.student-text {
  min-width: 0;
}

.student-name {
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--color-text-primary, #1a1a1a);
  word-break: break-word;
}

.student-code {
  font-family: monospace;
  font-size: 0.72rem;
  color: var(--color-text-secondary, #6b7280);
  margin-top: 1px;
}

.students-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 24px 12px;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.9rem;
}

/* ════════════════════════════════════════════════════════
   RESPONSIVE
   ════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .portal-header-inner {
    padding: 10px 16px;
  }

  .brand span {
    display: none;
  }

  .header-name {
    max-width: 120px;
  }

  .portal-main {
    padding: 16px;
    gap: 16px;
  }

  .overview-section {
    padding: 22px 18px;
  }

  .overview-hero {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    gap: 16px;
    padding-bottom: 20px;
    margin-bottom: 20px;
  }

  .overview-avatar {
    width: 64px;
    height: 64px;
    font-size: 1.7rem;
  }

  .overview-identity h1 {
    font-size: 1.35rem;
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
  }

  .stat-card {
    padding: 14px;
    gap: 10px;
  }

  .stat-icon {
    width: 38px;
    height: 38px;
    font-size: 1.2rem;
  }

  .stat-value {
    font-size: 0.98rem;
  }

  .subjects-section {
    padding: 20px 18px;
  }

  .subjects-grid {
    grid-template-columns: 1fr;
  }

  .course-hero-row {
    padding: 22px 18px;
    gap: 14px;
  }

  .course-hero-icon {
    width: 56px;
    height: 56px;
    font-size: 1.6rem;
  }

  .course-hero-content h1 {
    font-size: 1.25rem;
  }

  .course-card {
    padding: 18px;
  }

  .staff-list,
  .students-list {
    grid-template-columns: 1fr 1fr;
  }

  .tab-button {
    padding: 10px 14px;
    font-size: 0.88rem;
  }
}

@media (max-width: 480px) {
  .portal-header-inner {
    padding: 10px 12px;
  }

  .btn-ghost {
    padding: 6px 10px;
    font-size: 0.85rem;
  }

  .header-name {
    display: none;
  }

  .portal-main {
    padding: 12px;
    gap: 12px;
  }

  .overview-section {
    padding: 18px 16px;
    border-radius: 12px;
  }

  .stats-grid {
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .stat-card {
    padding: 12px 10px;
    gap: 8px;
  }

  .stat-label {
    font-size: 0.72rem;
  }

  .stat-value {
    font-size: 0.9rem;
  }

  .subjects-section {
    padding: 18px 14px;
    border-radius: 12px;
  }

  .course-hero-row {
    flex-direction: column;
    align-items: flex-start;
    text-align: start;
    padding: 18px 16px;
  }

  .course-card {
    padding: 16px 14px;
    border-radius: 12px;
  }

  .course-card h2 {
    font-size: 0.98rem;
  }

  .staff-list,
  .students-list {
    grid-template-columns: 1fr;
  }

  .course-card .placeholder-body {
    flex-direction: column;
    text-align: center;
    gap: 10px;
  }

  .tab-button {
    padding: 9px 12px;
    font-size: 0.84rem;
    gap: 6px;
  }

  .tab-icon {
    font-size: 1rem;
  }

  .tab-strip {
    padding: 4px;
    border-radius: 12px;
  }

  .login-card {
    padding: 28px 20px 22px;
  }
}

/* ═════════════════════════════════════════════════════
   HEADER ICONS, NOTIFICATIONS, MY DAY, ANNOUNCEMENTS,
   SEARCH, COURSE HERO ACTIONS
   ═════════════════════════════════════════════════════ */

.header-icon {
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1.1rem;
  position: relative;
  color: var(--color-text-primary, #1a1a1a);
}

.header-icon:hover {
  background: var(--color-gray-100, #f1f5f9);
}

.notif-wrap {
  position: relative;
}

.notif-badge {
  position: absolute;
  top: 4px;
  inset-inline-end: 4px;
  background: #dc2626;
  color: #fff;
  font-size: 0.65rem;
  font-weight: 700;
  border-radius: 999px;
  padding: 1px 5px;
  min-width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

.notif-dropdown {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  background: var(--panel-bg);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
  width: 360px;
  max-width: calc(100vw - 24px);
  max-height: 70vh;
  overflow-y: auto;
  z-index: 1000;
}

.notif-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}

.notif-list {
  display: flex;
  flex-direction: column;
}

.notif-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  text-decoration: none;
  color: var(--color-text-primary, #1a1a1a);
  font-size: 0.9rem;
}

.notif-item:hover {
  background: var(--color-gray-50, #f8f9fa);
}

.notif-item.is-unread {
  background: rgba(var(--accent-rgb), 0.06);
}

.notif-item small {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.78rem;
}

.notif-body {
  font-size: 0.85rem;
  color: var(--color-text-secondary, #6b7280);
  line-height: 1.4;
}

.notif-empty {
  padding: 24px;
  text-align: center;
  color: var(--color-text-secondary, #6b7280);
}

/* My Day */
.my-day-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
}

.my-day-col h3 {
  margin: 0 0 10px;
  font-size: 0.92rem;
  color: var(--color-text-secondary, #6b7280);
  font-weight: 600;
}

.my-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.my-day-item {
  display: block;
  padding: 10px 12px;
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  text-decoration: none;
  color: var(--color-text-primary, #1a1a1a);
  font-size: 0.88rem;
  transition: border-color 0.15s;
}

.my-day-item:hover {
  border-color: var(--color-primary, #8bc53f);
}

.my-day-item small {
  display: block;
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.76rem;
  margin: 2px 0;
}

.my-day-item .my-day-body {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.82rem;
  margin-top: 4px;
}

/* Announcements */
.announcement-card {
  background: rgba(245, 158, 11, 0.06);
  border: 1px solid rgba(245, 158, 11, 0.2);
  border-radius: 10px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.announcement-card strong {
  display: block;
  color: var(--color-text-primary, #1a1a1a);
  margin-bottom: 4px;
}

.announcement-card p {
  margin: 0 0 6px;
  font-size: 0.92rem;
  line-height: 1.6;
}

.announcement-card small {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.78rem;
}

/* Course hero actions + search */
.course-hero {
  position: relative;
}

.course-hero-actions {
  position: absolute;
  top: 18px;
  inset-inline-end: 18px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.course-hero-actions .modal-btn {
  font-size: 0.85rem;
  padding: 7px 14px;
}

/* ── Course banner ──────────────────────────────────────────────── */
.course-hero-banner {
  /* A 3:1 strip, capped so a very wide viewport does not turn the hero into a
     billboard and push the course title below the fold. */
  aspect-ratio: 3 / 1;
  max-height: 190px;
  width: 100%;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: var(--panel-2, rgba(0, 0, 0, 0.04));
}

/* The actions live inside `.course-hero-row` (see index.html), so they stay on the
   hero's own gradient and need no scrim of their own — the banner sits above them,
   never behind them. The hero's ::before accent bar is already display:none from the
   theme block further down, so the banner never has a line cutting across it. */

/* Same breakpoint the hero's own padding uses, so the strip and the row shrink together. */
@media (max-width: 768px) {
  .course-hero-banner {
    max-height: 120px;
  }
}

/* Banner control inside the course-settings modal (teachers only). */
.cs-banner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

.cs-banner-img {
  width: 100%;
  aspect-ratio: 3 / 1;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line);
  display: block;
}

.cs-banner-empty {
  width: 100%;
  aspect-ratio: 3 / 1;
  border-radius: 10px;
  border: 1px dashed var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
  font-size: 0.85rem;
  background: var(--panel-2, rgba(0, 0, 0, 0.03));
}

.course-search-wrap {
  position: relative;
}

.course-search-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  background: var(--panel-bg);
}

.course-search-input:focus {
  outline: none;
  border-color: var(--color-primary, #8bc53f);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}

.course-search-results {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  inset-inline-end: 0;
  background: var(--panel-bg);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
  max-height: 360px;
  overflow-y: auto;
  z-index: 100;
}

.search-result {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  text-decoration: none;
  color: var(--color-text-primary, #1a1a1a);
  border-bottom: 1px solid var(--color-border, #e5e7eb);
  font-size: 0.9rem;
}

.search-result:hover {
  background: var(--color-gray-50, #f8f9fa);
}

.search-result:last-child {
  border-bottom: none;
}

.search-result strong {
  flex: 1;
  min-width: 0;
}

@media (max-width: 600px) {
  .course-hero-actions {
    position: static;
    margin-top: 12px;
  }

  .notif-dropdown {
    width: calc(100vw - 24px);
    inset-inline-end: -50px;
  }
}

/* Drafts indicator */
.draft-indicator {
  font-size: 0.75rem;
  color: var(--color-text-secondary, #6b7280);
  margin-top: 4px;
  text-align: end;
  min-height: 16px;
}

/* Comments thread */
.comments-section {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border, #e5e7eb);
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 280px;
  overflow-y: auto;
  margin-bottom: 12px;
}

.comment-bubble {
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 10px;
  padding: 8px 12px;
  max-width: 80%;
  font-size: 0.88rem;
}

.comment-bubble.is-staff {
  background: rgba(37, 99, 235, 0.08);
  align-self: flex-start;
}

.comment-bubble.is-student {
  background: rgba(16, 185, 129, 0.08);
  align-self: flex-end;
}

.comment-bubble strong {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 2px;
  color: var(--color-text-primary, #1a1a1a);
}

.comment-bubble p {
  margin: 0 0 4px;
  white-space: pre-wrap;
  line-height: 1.5;
}

.comment-bubble small {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.72rem;
}

.comment-compose {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.comment-compose textarea {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.88rem;
  resize: vertical;
}

/* Bulk grading bar + histogram */
.bulk-bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  margin-bottom: 10px;
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 10px;
  flex-wrap: wrap;
  font-size: 0.88rem;
}

.bulk-bar label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.88rem;
  cursor: pointer;
}

.bulk-bar .modal-btn {
  padding: 6px 14px;
  font-size: 0.85rem;
}

.bulk-bar .modal-btn:disabled {
  opacity: 0.5;
}

.histogram {
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 12px;
}

.histogram-stats {
  display: flex;
  gap: 18px;
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.histogram-stats strong {
  color: var(--color-secondary, #004b3c);
}

.histogram-bars {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  gap: 4px;
  height: 80px;
  align-items: end;
}

.hist-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  height: 100%;
  justify-content: flex-end;
}

.hist-bar {
  width: 100%;
  background: linear-gradient(180deg, var(--color-primary, #8bc53f), var(--color-secondary, #004b3c));
  border-radius: 4px 4px 0 0;
  min-height: 2px;
}

.hist-col small {
  font-size: 0.62rem;
  color: var(--color-text-secondary, #6b7280);
}

/* Badges */
.badges-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}

.badge-card {
  background: linear-gradient(180deg, rgba(245, 158, 11, 0.08), #fff 60%);
  border: 1px solid rgba(245, 158, 11, 0.25);
  border-radius: 12px;
  padding: 14px 10px;
  text-align: center;
  cursor: help;
}

.badge-icon {
  font-size: 2rem;
  margin-bottom: 6px;
}

.badge-name {
  font-weight: 700;
  font-size: 0.88rem;
  margin-bottom: 4px;
}

.badge-card small {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.74rem;
}

/* Activity dashboard */
.activity-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
}

.activity-grid h3 {
  margin: 0 0 8px;
  font-size: 0.92rem;
  color: var(--color-text-secondary, #6b7280);
}

.activity-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.activity-list li {
  background: var(--color-gray-50, #f8f9fa);
  padding: 8px 10px;
  border-radius: 8px;
  font-size: 0.85rem;
  line-height: 1.5;
}

.activity-list li small {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.74rem;
  display: block;
  margin-top: 2px;
}

/* Leaderboard "is-me" highlight */
.submissions-table tr.is-me {
  background: rgba(var(--accent-rgb), 0.1) !important;
  font-weight: 700;
}

/* Quiz */
.module-content-item.type-quiz {
  border-inline-start-color: #a855f7;
  background: linear-gradient(180deg, rgba(168, 85, 247, 0.05), #fff 30%);
  cursor: pointer;
}

.qz-q {
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 8px;
  padding: 10px 12px;
  margin-bottom: 8px;
}

.qz-q-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.qz-question {
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}

.qz-question strong {
  display: block;
  margin-bottom: 10px;
}

.qz-options {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.qz-options label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
}

.qz-options label:hover {
  background: rgba(var(--accent-rgb), 0.06);
}

.aq-opt {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.aq-opt input[type='text'] {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  font-size: 0.88rem;
}

/* Calendar */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

.cal-headers {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  margin-bottom: 4px;
}

.cal-head {
  text-align: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--color-text-secondary, #6b7280);
  padding: 4px;
}

.cal-cells {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}

.cal-cell {
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 8px;
  padding: 6px;
  min-height: 80px;
  font-size: 0.78rem;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cal-cell--empty {
  background: transparent;
}

.cal-day {
  font-weight: 700;
  color: var(--color-text-primary, #1a1a1a);
  font-size: 0.85rem;
  margin-bottom: 2px;
}

.cal-event {
  background: rgba(var(--accent-rgb), 0.15);
  color: var(--color-primary-dark, #4a7022);
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 0.72rem;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cal-event:hover {
  background: rgba(var(--accent-rgb), 0.25);
}

.cal-more {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.7rem;
  text-align: center;
}

@media (max-width: 600px) {
  .cal-cell {
    min-height: 56px;
    padding: 4px;
  }

  .cal-event {
    font-size: 0.65rem;
    padding: 1px 4px;
  }
}

/* Office hours */
.bookings-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.bookings-list li {
  background: var(--color-gray-50, #f8f9fa);
  padding: 8px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
}

.oh-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--color-gray-50, #f8f9fa);
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 0.88rem;
}

/* ═════════════════════════════════════════════════════
   ITEM ROWS (compact, clickable) + ITEM VIEW MODAL
   ═════════════════════════════════════════════════════ */

.module-content-item--row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s,
    transform 0.05s;
}

.module-content-item--row:hover {
  background: var(--color-gray-100, #f1f5f9);
  border-color: var(--color-primary, #8bc53f);
}

.module-content-item--row:active {
  transform: translateY(1px);
}

.module-content-item--row.is-locked {
  cursor: not-allowed;
}

.module-content-item--row.is-locked:hover {
  background: var(--color-gray-50, #f8f9fa);
}

.item-row-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.item-row-text .item-title {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.item-subtitle {
  color: var(--color-text-secondary, #6b7280);
  font-size: 0.78rem;
}

.item-tick {
  background: rgba(16, 185, 129, 0.18);
  color: #047857;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
}

/* Item view modal body */
.item-view-body {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--color-text-primary, #1a1a1a);
}

.item-view-body .item-text {
  padding: 4px 0;
}

.item-view-body p {
  margin: 0 0 12px;
}

.item-view-body h2,
.item-view-body h3,
.item-view-body h4,
.item-view-body h5 {
  margin: 18px 0 8px;
  color: var(--color-secondary, #004b3c);
}

.item-view-body ul {
  margin: 0 0 12px;
  padding-inline-start: 24px;
}

.item-view-body code {
  background: rgba(0, 0, 0, 0.05);
  padding: 1px 6px;
  border-radius: 4px;
  font-family: Menlo, Consolas, monospace;
  font-size: 0.88em;
}

.item-view-body a {
  color: var(--color-primary-dark, #4a7022);
  text-decoration: underline;
  word-break: break-all;
}

/* Inline media (markdown + file body) */
.md-img {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin: 12px 0;
  display: block;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.md-video,
.md-audio {
  width: 100%;
  display: block;
  margin: 12px 0;
  border-radius: 10px;
  background: #000;
}

.md-audio {
  background: var(--color-gray-50, #f8f9fa);
}

.md-pdf {
  position: relative;
  margin: 12px 0;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
}

.md-pdf-iframe {
  width: 100%;
  height: 70vh;
  min-height: 480px;
  border: 0;
  display: block;
}

.md-pdf-dl {
  display: inline-block;
  margin: 8px 0 0;
  padding: 6px 12px;
  background: var(--color-primary, #8bc53f);
  color: #fff !important;
  border-radius: 8px;
  text-decoration: none !important;
  font-size: 0.88rem;
  font-weight: 600;
}

.md-pdf-dl:hover {
  background: var(--color-primary-dark, #6fa030);
}

.file-meta {
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--color-gray-50, #f8f9fa);
  border-radius: 8px;
  font-size: 0.88rem;
  color: var(--color-text-secondary, #6b7280);
}

.file-meta a {
  color: var(--color-primary-dark, #4a7022);
  font-weight: 600;
}

/* ═════════════════════════════════════════════════════
   RICH-TEXT TOOLBAR (item editor)
   ═════════════════════════════════════════════════════ */

.rt-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 6px;
  background: var(--color-gray-50, #f8f9fa);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px 8px 0 0;
  border-bottom: none;
  align-items: center;
}

.rt-btn {
  background: var(--panel-bg);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--color-text-primary, #1a1a1a);
  transition:
    background 0.12s,
    border-color 0.12s;
}

.rt-btn:hover {
  background: var(--color-gray-100, #f1f5f9);
  border-color: var(--color-primary, #8bc53f);
}

.rt-sep {
  width: 1px;
  height: 18px;
  background: var(--color-border, #e5e7eb);
  margin: 0 4px;
}

.form-row .rt-toolbar + textarea {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  margin-top: 0;
}

@media (max-width: 600px) {
  .md-pdf-iframe {
    height: 50vh;
    min-height: 320px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   Interactive Video Player (.ivp-*)
   ═══════════════════════════════════════════════════════════════ */
.ivp-shell {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  background: var(--color-surface, #fff);
  border-radius: 10px;
  overflow: hidden;
}
.ivp-shell.ivp-with-chapters,
.ivp-shell.ivp-with-sidebar {
  grid-template-columns: 1fr 240px;
}
[dir='rtl'] .ivp-shell.ivp-with-chapters,
[dir='rtl'] .ivp-shell.ivp-with-sidebar {
  grid-template-columns: 240px 1fr;
}
@media (max-width: 720px) {
  .ivp-shell.ivp-with-chapters,
  .ivp-shell.ivp-with-sidebar,
  [dir='rtl'] .ivp-shell.ivp-with-chapters,
  [dir='rtl'] .ivp-shell.ivp-with-sidebar {
    grid-template-columns: 1fr;
  }
}

.ivp-main {
  min-width: 0;
}

.ivp-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
  border-radius: 8px;
  overflow: hidden;
}

.ivp-iframe-wrap,
.ivp-iframe-wrap iframe,
.ivp-iframe-wrap video {
  width: 100%;
  height: 100%;
  display: block;
}
.ivp-iframe-wrap {
  position: absolute;
  inset: 0;
}
.ivp-iframe-wrap iframe {
  border: 0;
}
.ivp-iframe-wrap video {
  object-fit: contain;
  background: #000;
}

.ivp-hotspots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ivp-hotspot {
  position: absolute;
  pointer-events: auto;
  background: rgba(var(--accent-rgb), 0.18);
  border: 2px dashed rgba(var(--accent-rgb), 0.9);
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 4px 6px;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7);
  transition: background 0.15s;
}
.ivp-hotspot:hover {
  background: rgba(var(--accent-rgb), 0.4);
}

.ivp-question-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  z-index: 5;
}
.ivp-q-card {
  background: var(--color-surface, #fff);
  border-radius: 12px;
  padding: 22px 26px;
  max-width: 520px;
  width: 100%;
  color: var(--color-text, #111);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
}
.ivp-q-time {
  font-size: 13px;
  color: var(--color-text-muted, #64748b);
  margin-bottom: 8px;
}
.ivp-q-card h3 {
  margin: 0 0 14px;
  font-size: 18px;
}
.ivp-q-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ivp-q-opt {
  background: var(--color-gray-100, #f1f5f9);
  border: 2px solid transparent;
  border-radius: 8px;
  padding: 10px 14px;
  text-align: start;
  cursor: pointer;
  font-size: 15px;
  color: var(--color-text, #111);
}
.ivp-q-opt:hover:not(:disabled) {
  border-color: var(--color-primary, #8bc53f);
}
.ivp-q-opt:disabled {
  cursor: default;
  opacity: 0.85;
}
.ivp-q-opt--correct {
  background: #dcfce7;
  border-color: #22c55e;
  color: #14532d;
}
.ivp-q-opt--wrong {
  background: #fee2e2;
  border-color: #ef4444;
  color: #7f1d1d;
}
.ivp-q-feedback {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 14px;
}
.ivp-q-feedback--ok {
  background: #dcfce7;
  color: #14532d;
}
.ivp-q-feedback--bad {
  background: #fee2e2;
  color: #7f1d1d;
}

.ivp-blur-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
  justify-content: center;
  z-index: 6;
  padding: 20px;
  text-align: center;
}

.ivp-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--color-gray-50, #f8fafc);
  border-radius: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.ivp-btn {
  background: var(--color-surface, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  min-width: 36px;
}
.ivp-btn:hover {
  background: var(--color-gray-100, #f1f5f9);
}
.ivp-time {
  font-variant-numeric: tabular-nums;
  font-size: 13px;
  color: var(--color-text-muted, #64748b);
  min-width: 90px;
}
.ivp-bar-wrap {
  position: relative;
  flex: 1;
  height: 18px;
  cursor: pointer;
  min-width: 120px;
}
.ivp-bar-bg,
.ivp-bar-watched,
.ivp-bar-progress {
  position: absolute;
  inset-block: 6px;
  border-radius: 3px;
}
.ivp-bar-bg {
  inset-inline: 0;
  background: var(--color-gray-200, #e2e8f0);
}
.ivp-bar-watched {
  inset-inline-start: 0;
  width: 0;
  background: var(--color-gray-300, #cbd5e1);
}
.ivp-bar-progress {
  inset-inline-start: 0;
  width: 0;
  background: var(--color-primary, #8bc53f);
}
.ivp-bar-markers {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.ivp-q-marker {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  color: #f59e0b;
  font-size: 14px;
  line-height: 18px;
  pointer-events: auto;
}
[dir='rtl'] .ivp-q-marker {
  transform: translateX(50%);
}

.ivp-meta {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.ivp-tag {
  font-size: 12px;
  padding: 3px 8px;
  border-radius: 12px;
  background: var(--color-gray-100, #f1f5f9);
  color: var(--color-text-muted, #64748b);
}
.ivp-tag--lock {
  background: #fef3c7;
  color: #92400e;
}
.ivp-tag--required {
  background: #dbeafe;
  color: #1e40af;
}

.ivp-chapters {
  border-inline-start: 1px solid var(--color-border, #e5e7eb);
  padding-inline-start: 12px;
}
.ivp-chapters h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-text-muted, #64748b);
}
.ivp-chapters ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ivp-chapter {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  text-align: start;
}
.ivp-chapter:hover {
  background: var(--color-gray-50, #f8fafc);
  border-color: var(--color-border, #e5e7eb);
}
.ivp-chapter-time {
  font-size: 12px;
  color: var(--color-text-muted, #64748b);
  font-variant-numeric: tabular-nums;
}
.ivp-chapter-title {
  font-size: 14px;
  color: var(--color-text, #111);
}

.ivp-notes-strip {
  margin-top: 6px;
  font-size: 13px;
}

/* ── Video Builder (.vb-*) ─────────────────────────── */
.vb-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 16px;
  align-items: flex-start;
}
[dir='rtl'] .vb-grid {
  grid-template-columns: 360px 1fr;
}
@media (max-width: 900px) {
  .vb-grid,
  [dir='rtl'] .vb-grid {
    grid-template-columns: 1fr;
  }
}
.vb-preview h4,
.vb-controls h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-text-muted, #64748b);
}
.vb-preview-mount {
  min-height: 280px;
}
.vb-current-time {
  margin-top: 8px;
  font-size: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.vb-controls input[type='text'],
.vb-controls input[type='number'],
.vb-controls input[type='url'],
.vb-controls textarea,
.vb-controls select {
  font-size: 14px;
}
.vb-section {
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 10px;
  background: var(--color-gray-50, #f8fafc);
}
.vb-section summary {
  cursor: pointer;
  font-weight: 600;
  padding: 4px 0;
}
.vb-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vb-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px;
  background: var(--color-surface, #fff);
  border-radius: 6px;
  border: 1px solid var(--color-border, #e5e7eb);
}
.vb-row strong {
  font-variant-numeric: tabular-nums;
  color: var(--color-primary, #8bc53f);
  min-width: 60px;
}
.vb-row span {
  flex: 1;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Dark mode tweaks */
[data-theme='dark'] .ivp-controls {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .ivp-btn {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .ivp-q-card {
  background: #1e293b;
  color: #f1f5f9;
}
[data-theme='dark'] .ivp-q-opt {
  background: rgba(255, 255, 255, 0.06);
  color: #f1f5f9;
}
[data-theme='dark'] .vb-section {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .vb-row {
  background: rgba(255, 255, 255, 0.04);
}

/* ── Mobile touch-friendly tweaks ──────────────────── */
@media (max-width: 600px) {
  .ivp-bar-wrap {
    height: 28px;
    flex-basis: 100%;
    order: 99;
  }
  .ivp-bar-bg,
  .ivp-bar-watched,
  .ivp-bar-progress {
    inset-block: 10px;
  }
  .ivp-time {
    font-size: 12px;
    min-width: 70px;
  }
  .ivp-btn {
    padding: 8px 12px;
    font-size: 15px;
    min-width: 44px;
    min-height: 44px;
  }
  .ivp-controls {
    gap: 6px;
    padding: 6px;
  }
  .ivp-q-card {
    padding: 14px 16px;
    max-width: 100%;
  }
  .ivp-q-card h3 {
    font-size: 16px;
  }
  .ivp-q-opt {
    padding: 12px 14px;
    font-size: 14px;
    min-height: 44px;
  }
  .ivp-meta {
    margin-top: 6px;
  }
  .ivp-tag {
    font-size: 11px;
    padding: 2px 6px;
  }
  .ivp-hotspot {
    min-width: 32px;
    min-height: 32px;
  }
}

/* ── Sidebar (chapters + transcript) ──────────────── */
.ivp-sidebar {
  border-inline-start: 1px solid var(--color-border, #e5e7eb);
  padding-inline-start: 12px;
  max-height: 480px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (max-width: 720px) {
  .ivp-sidebar {
    border-inline-start: none;
    border-top: 1px solid var(--color-border, #e5e7eb);
    padding-inline-start: 0;
    padding-top: 10px;
    max-height: 360px;
  }
}

.ivp-transcript h4 {
  margin: 0 0 8px;
  font-size: 14px;
  color: var(--color-text-muted, #64748b);
}
.ivp-transcript-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ivp-transcript-line {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 5px 8px;
  cursor: pointer;
  text-align: start;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-text, #111);
}
.ivp-transcript-line:hover {
  background: var(--color-gray-50, #f8fafc);
  border-color: var(--color-border, #e5e7eb);
}
.ivp-transcript-line.is-active {
  background: rgba(var(--accent-rgb), 0.15);
  border-color: var(--color-primary, #8bc53f);
}
.ivp-transcript-time {
  font-variant-numeric: tabular-nums;
  color: var(--color-text-muted, #64748b);
  font-size: 11px;
  min-width: 40px;
}

/* ── Notes panel ──────────────────────────────────── */
.ivp-notes-block {
  margin-top: 10px;
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 8px;
  padding: 8px 10px;
  background: var(--color-gray-50, #f8fafc);
}
.ivp-notes-block summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
}
.ivp-notes-list {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ivp-notes-list li {
  display: flex;
  gap: 8px;
  align-items: center;
  font-size: 13px;
}
.ivp-note-time {
  background: var(--color-primary, #8bc53f);
  color: #fff;
  border: 0;
  border-radius: 4px;
  padding: 3px 7px;
  font-size: 12px;
  cursor: pointer;
  font-variant-numeric: tabular-nums;
}
.ivp-note-text {
  flex: 1;
}

/* ── Builder analytics table ──────────────────────── */
.vb-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  margin-top: 6px;
}
.vb-table th,
.vb-table td {
  text-align: start;
  padding: 5px 8px;
  border-bottom: 1px solid var(--color-border, #e5e7eb);
}
.vb-table th {
  background: var(--color-gray-100, #f1f5f9);
  font-weight: 600;
  color: var(--color-text-muted, #64748b);
}
.vb-bar {
  display: inline-block;
  width: 80px;
  height: 6px;
  background: var(--color-gray-200, #e2e8f0);
  border-radius: 3px;
  margin-inline-end: 6px;
  vertical-align: middle;
  overflow: hidden;
}
.vb-bar span {
  display: block;
  height: 100%;
  background: var(--color-primary, #8bc53f);
}
[data-theme='dark'] .vb-table th {
  background: rgba(255, 255, 255, 0.06);
}
[data-theme='dark'] .ivp-notes-block {
  background: rgba(255, 255, 255, 0.04);
}
[data-theme='dark'] .ivp-transcript-line {
  color: #f1f5f9;
}
[data-theme='dark'] .ivp-transcript-line:hover {
  background: rgba(255, 255, 255, 0.06);
}

/* ═══════════════════════════════════════════════════════════════
   PORTAL UI OVERHAUL — warm & branded shell + dashboard (P1)
   Defined last so it overrides the legacy home/header styles.
   ═══════════════════════════════════════════════════════════════ */

/* ── Warm Academic palette (portal-scoped; never edit variables.css,
   which is shared with the admin dashboard) ───────────────────────── */
:root {
  --nav-h: 60px;
  --brand: #0d4f45;
  --brand-2: #12655a;
  --brand-deep: #083a33;
  --accent: #c8912f;
  --accent-2: #d9a441;
  --accent-soft: #f3e6c9;
  --accent-rgb: 200, 145, 47;
  --brand-rgb: 13, 79, 69;
  --sage: #5f9e6a;
  --ink: #1c2a24;
  --ink-soft: #5f6f66;
  --line: #e7e0d2;
  --line-strong: #dbd2be;
  --panel-bg: #fffdf8;
  --page-bg: #f6f2ea;
  --radius: 16px;
  /* category hues for course tiles */
  --c-1: #1f8a86;
  --c-2: #7a5bd0;
  --c-3: #c2496b;
  --c-4: #4f5bd5;
  --c-5: #c8912f;
  --c-6: #2f8f5b;
  /* elevation */
  --sh-sm: 0 1px 2px rgba(30, 40, 32, 0.06);
  --sh-md: 0 6px 20px -8px rgba(30, 45, 36, 0.18), 0 2px 6px rgba(30, 45, 36, 0.06);
  --sh-lg: 0 24px 50px -18px rgba(12, 45, 36, 0.3), 0 8px 20px -10px rgba(12, 45, 36, 0.16);
  /* Islamic 8-point-star lattice (white stroke, for pine hero moments) */
  --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.10' stroke-width='1.2'%3E%3Crect x='16' y='16' width='32' height='32'/%3E%3Crect x='16' y='16' width='32' height='32' transform='rotate(45 32 32)'/%3E%3Ccircle cx='32' cy='32' r='4'/%3E%3C/g%3E%3C/svg%3E");

  /* remap legacy --color-* tokens so older portal components (login,
     modals, modules, grades) inherit the warm palette without touching
     variables.css */
  --color-primary: #0d7a63;
  --color-primary-dark: #0a3f34;
  --color-primary-light: #10917a;
  --color-secondary: #0d4f45;
  --color-secondary-light: #12655a;
  --color-gray-50: #f6f2ea;
  --color-gray-100: #efe8db;
  --color-gray-200: #e7e0d2;
  --color-border: #e7e0d2;
  --color-text-primary: #1c2a24;
  --color-text-secondary: #5f6f66;
  --color-surface: #fffdf8;
  --surface: #fffdf8;
  --surface-2: #f0eadd;
}
:root[data-theme='dark'] {
  --brand: #0e6153;
  --brand-2: #0a4b40;
  --brand-deep: #062c26;
  --accent: #e0b45a;
  --accent-2: #ecc472;
  --accent-soft: #3a3320;
  --accent-rgb: 224, 180, 90;
  --brand-rgb: 14, 97, 83;
  --sage: #6bb077;
  --ink: #eef0ea;
  --ink-soft: #9aa8a0;
  --line: #26332d;
  --line-strong: #334037;
  --panel-bg: #16211d;
  --page-bg: #0e1613;
  --sh-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-md: 0 6px 20px -8px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
  --sh-lg: 0 24px 50px -18px rgba(0, 0, 0, 0.6), 0 8px 20px -10px rgba(0, 0, 0, 0.4);

  --color-primary: #1aa588;
  --color-primary-dark: #0e6153;
  --color-primary-light: #22c4a2;
  --color-secondary: #0e6153;
  --color-secondary-light: #12806a;
  --color-gray-50: #16211d;
  --color-gray-100: #1c2a24;
  --color-gray-200: #26332d;
  --color-border: #26332d;
  --color-text-primary: #eef0ea;
  --color-text-secondary: #9aa8a0;
  --color-surface: #16211d;
  --surface: #16211d;
  --surface-2: #1c2a24;
}
/* OS dark preference when the user hasn't explicitly chosen light */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --brand: #0e6153;
    --brand-2: #0a4b40;
    --brand-deep: #062c26;
    --accent: #e0b45a;
    --accent-2: #ecc472;
    --accent-soft: #3a3320;
    --accent-rgb: 224, 180, 90;
    --brand-rgb: 14, 97, 83;
    --sage: #6bb077;
    --ink: #eef0ea;
    --ink-soft: #9aa8a0;
    --line: #26332d;
    --line-strong: #334037;
    --panel-bg: #16211d;
    --page-bg: #0e1613;
    --color-primary: #1aa588;
    --color-primary-dark: #0e6153;
    --color-secondary: #0e6153;
    --color-gray-50: #16211d;
    --color-gray-100: #1c2a24;
    --color-gray-200: #26332d;
    --color-border: #26332d;
    --color-text-primary: #eef0ea;
    --color-text-secondary: #9aa8a0;
    --color-surface: #16211d;
    --surface: #16211d;
    --surface-2: #1c2a24;
  }
}

.portal-app {
  background: var(--page-bg);
  min-height: 100vh;
}
body {
  background: var(--page-bg);
}

/* SVG icon baseline */
.ic {
  display: inline-block;
  vertical-align: -0.18em;
  flex-shrink: 0;
}

/* ── Top nav bar ─────────────────────────────────────── */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--brand);
  color: #fff;
  box-shadow:
    0 1px 0 rgba(0, 0, 0, 0.08),
    0 2px 10px rgba(0, 0, 0, 0.06);
}
.nav-inner {
  max-width: 1320px;
  margin: 0 auto;
  height: var(--nav-h);
  padding: 0 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}
.nav-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: #fff;
  font-weight: 800;
  font-size: 1rem;
  flex-shrink: 0;
}
.nav-brand img {
  height: 30px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.96;
}
.nav-brand-text {
  white-space: nowrap;
}

.nav-primary {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-inline-start: 8px;
}
.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 9px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.92rem;
  font-weight: 600;
  transition:
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.nav-link.is-active {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.nav-link.is-active .nav-link-ic {
  color: var(--accent);
}
.nav-link-ic {
  display: inline-flex;
}

.nav-actions {
  margin-inline-start: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-icon-btn {
  position: relative;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.nav-icon-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}

.notif-wrap {
  position: relative;
}
.notif-badge {
  position: absolute;
  top: 5px;
  inset-inline-end: 5px;
  min-width: 8px;
  height: 8px;
  background: #ff5a4d;
  border-radius: 999px;
  border: 2px solid var(--brand);
}

/* ── Avatar menu ─────────────────────────────────────── */
.avatar-wrap {
  position: relative;
}
.avatar-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px 4px 4px;
  border: none;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s;
}
.avatar-btn:hover {
  background: rgba(255, 255, 255, 0.18);
}
.avatar-initials {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--accent);
  color: #08251c;
  font-weight: 800;
  font-size: 0.82rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.avatar-chev {
  display: inline-flex;
  opacity: 0.85;
}
.avatar-menu {
  position: absolute;
  top: calc(100% + 8px);
  inset-inline-end: 0;
  min-width: 230px;
  background: var(--panel-bg);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
  padding: 8px;
  z-index: 60;
}
.amenu-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
.amenu-name {
  font-weight: 700;
  font-size: 0.95rem;
}
.amenu-role {
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.amenu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 10px;
  border: none;
  background: transparent;
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  text-align: start;
  transition: background 0.12s;
}
.amenu-item:hover {
  background: var(--page-bg);
}
.amenu-ic {
  display: inline-flex;
  color: var(--ink-soft);
}
.amenu-item--danger {
  color: #d6453a;
}
.amenu-item--danger .amenu-ic {
  color: #d6453a;
}

/* ── Main / layout ───────────────────────────────────── */
.portal-main {
  max-width: 1320px;
  margin: 0 auto;
  padding: 24px 20px 48px;
}

.dash {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 22px;
  align-items: start;
}
.dash-main {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}
.dash-rail {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: calc(var(--nav-h) + 18px);
}

/* ── Identity strip (hello) ──────────────────────────── */
.hello {
  display: flex;
  align-items: center;
  gap: 16px;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: #fff;
  border-radius: var(--radius);
  padding: 22px 24px;
  position: relative;
  overflow: hidden;
}
.hello::after {
  content: '';
  position: absolute;
  inset-block: -40%;
  inset-inline-end: -10%;
  width: 260px;
  background: radial-gradient(circle at center, rgba(var(--accent-rgb), 0.28), transparent 70%);
  pointer-events: none;
}
.hello-avatar {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 800;
  flex-shrink: 0;
  backdrop-filter: blur(4px);
}
.hello-text {
  min-width: 0;
  position: relative;
  z-index: 1;
}
.hello-eyebrow {
  font-size: 0.82rem;
  opacity: 0.82;
  font-weight: 600;
  margin-bottom: 2px;
}
.hello-text h1 {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1.2;
  word-break: break-word;
}
.hello-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.hello .role-chip {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 700;
}
.hello .profile-id {
  color: rgba(255, 255, 255, 0.8);
  font-size: 0.82rem;
  font-family: ui-monospace, monospace;
}

/* ── Stat chips row ──────────────────────────────────── */
.stats-row {
  margin: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}
.stat-card {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 13px 15px;
  display: flex;
  align-items: center;
  gap: 12px;
  transition:
    border-color 0.15s,
    box-shadow 0.15s;
}
.stat-card:hover {
  border-color: color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.05);
}
.stat-icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 9%, transparent);
  color: var(--brand);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
:root[data-theme='dark'] .stat-icon {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}
.stat-content {
  min-width: 0;
}
.stat-label {
  font-size: 0.74rem;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 2px;
}
.stat-value {
  font-size: 1rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.3;
  word-break: break-word;
}

.overview-details {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-bg);
  padding: 4px 16px;
}
.overview-details summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 12px 0;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.overview-details summary::-webkit-details-marker {
  display: none;
}
.overview-details summary::before {
  content: '▸';
  color: var(--accent);
  font-size: 0.7rem;
  transition: transform 0.15s;
}
.overview-details[open] summary::before {
  transform: rotate(90deg);
}
.profile-fields {
  margin: 0 0 14px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 10px 22px;
}
.profile-fields dt {
  font-size: 0.74rem;
  color: var(--ink-soft);
  font-weight: 600;
  margin-bottom: 2px;
}
.profile-fields dd {
  margin: 0;
  font-size: 0.9rem;
  color: var(--ink);
  word-break: break-word;
}

/* ── Panels ──────────────────────────────────────────── */
.panel {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px 20px;
}
.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}
.panel-head h2 {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.panel-head h2 .ic {
  color: var(--brand);
}
:root[data-theme='dark'] .panel-head h2 .ic {
  color: var(--accent);
}
.section-count {
  color: var(--ink-soft);
  font-size: 0.84rem;
  font-weight: 600;
}

/* ── Subjects: course tiles ──────────────────────────── */
.subjects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}
.subjects-loading,
.subjects-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 40px 16px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.subject-card {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 0;
  overflow: hidden;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  border-inline-start: none;
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    border-color 0.15s;
}
.subject-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.1);
  border-color: color-mix(in srgb, var(--course-accent, var(--accent)) 40%, var(--line));
}
.subject-banner {
  height: 74px;
  background: var(--course-banner, linear-gradient(135deg, var(--brand), var(--brand-2)));
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 16px;
}
.subject-banner-glyph {
  color: rgba(255, 255, 255, 0.4);
}
/* A teacher-set banner image, layered OVER the generated gradient so the gradient
   is what shows while the image loads (and if it ever fails). */
.subject-banner--img {
  background-image:
    var(--course-banner-img), var(--course-banner, linear-gradient(135deg, var(--brand), var(--brand-2)));
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat, no-repeat;
}
/* The glyph is a placeholder watermark; a real image replaces it. */
.subject-banner--img .subject-banner-glyph {
  display: none;
}
.subject-initial {
  position: absolute;
  inset-inline-end: 14px;
  bottom: -18px;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  background: var(--panel-bg);
  color: var(--course-accent, var(--brand));
  border: 2px solid var(--panel-bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.subject-body {
  padding: 14px 16px 12px;
  flex: 1;
}
.subject-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--ink);
  line-height: 1.3;
}
.subject-code {
  font-family: ui-monospace, monospace;
  font-size: 0.72rem;
  color: var(--ink-soft);
  margin-top: 3px;
}
.subject-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}
.subject-chip {
  font-size: 0.74rem;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--course-accent, var(--accent)) 12%, transparent);
  color: var(--course-accent, var(--brand));
  white-space: nowrap;
}
.subject-chip--role-teacher {
  background: rgba(37, 99, 235, 0.1);
  color: #1d4ed8;
}
.subject-chip--role-supervisor {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.subject-chip--role-student {
  background: rgba(16, 185, 129, 0.13);
  color: #047857;
}
.subject-chip--neutral {
  background: color-mix(in srgb, var(--ink) 7%, transparent);
  color: var(--ink-soft);
}
.subject-foot {
  border-top: 1px solid var(--line);
  padding: 10px 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.subject-foot-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--ink-soft);
}
.subject-foot-item .ic {
  color: var(--ink-soft);
}

/* ── My Day / This week ──────────────────────────────── */
.my-day-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.my-day-col h3 {
  margin: 0 0 10px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ink-soft);
}

/* ── Course page: hybrid layout (rail + content) ─────── */
.course-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 22px;
  align-items: start;
}
.course-rail {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: sticky;
  top: calc(var(--nav-h) + 18px);
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 8px;
}
.course-rail .tab-button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 14px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  text-align: start;
  transition:
    background 0.13s,
    color 0.13s;
}
.course-rail .tab-button:hover {
  background: var(--page-bg);
  color: var(--ink);
}
.course-rail .tab-button.is-active {
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
:root[data-theme='dark'] .course-rail .tab-button.is-active {
  background: rgba(var(--accent-rgb), 0.14);
  color: var(--accent);
}
.course-rail .tab-button .tab-icon {
  display: inline-flex;
}
.tab-panels {
  min-width: 0;
}

/* ── Dark mode panel/card backgrounds for new classes ── */
:root[data-theme='dark'] .panel,
:root[data-theme='dark'] .stat-card,
:root[data-theme='dark'] .overview-details,
:root[data-theme='dark'] .subject-card,
:root[data-theme='dark'] .course-rail,
:root[data-theme='dark'] .avatar-menu {
  background: var(--panel-bg) !important;
  border-color: var(--line);
  color: var(--ink);
}

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 1000px) {
  .dash {
    grid-template-columns: 1fr;
  }
  .dash-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
  }
  .dash-rail .panel {
    flex: 1;
    min-width: 260px;
  }
  .course-layout {
    grid-template-columns: 1fr;
  }
  .course-rail {
    position: static;
    flex-direction: row;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .course-rail .tab-button {
    white-space: nowrap;
  }
}
@media (max-width: 640px) {
  .nav-inner {
    padding: 0 14px;
    gap: 8px;
  }
  .nav-brand-text {
    display: none;
  }
  .nav-primary {
    gap: 0;
    margin-inline-start: 0;
  }
  .nav-link span:not(.nav-link-ic) {
    display: none;
  }
  .nav-link {
    padding: 8px 10px;
  }
  .portal-main {
    padding: 16px 14px 40px;
  }
  .my-day-grid {
    grid-template-columns: 1fr;
  }
  .hello {
    padding: 18px;
    gap: 12px;
  }
  .hello-avatar {
    width: 52px;
    height: 52px;
    font-size: 1.2rem;
  }
  .hello-text h1 {
    font-size: 1.25rem;
  }
  .stats-row {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ═══════════════════════════════════════════════════════════════
   P2–P4 — course content, components, icon contexts, polish
   ═══════════════════════════════════════════════════════════════ */

/* Generic icon-in-text alignment inside buttons/links */
.modal-btn .ic,
.link-button .ic,
.rt-btn .ic,
.btn-primary .ic {
  vertical-align: -0.2em;
}

/* ── Course hero (warm-branded, cleaner) ─────────────── */
.course-hero {
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: #fff;
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 6px 20px rgba(var(--brand-rgb), 0.16);
}
.course-hero::before {
  display: none;
}
.course-hero-icon {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.25);
  box-shadow: none;
}
.course-hero-eyebrow {
  color: rgba(255, 255, 255, 0.82);
}
.course-hero-content h1 {
  color: #fff;
}
.course-hero-meta {
  color: rgba(255, 255, 255, 0.9);
}
.course-hero-meta .chip,
.course-hero-meta .subject-chip {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.course-hero .icon-btn {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
  border: none;
}
.course-hero .modal-btn--primary {
  background: #fff;
  color: var(--brand);
}
.course-hero .modal-btn--primary:hover {
  background: rgba(255, 255, 255, 0.9);
}
.back-button {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  color: var(--ink);
}
.back-button:hover {
  border-color: color-mix(in srgb, var(--accent) 50%, var(--line));
  background: var(--panel-bg);
}
.back-button .back-ic {
  display: inline-flex;
  color: var(--brand);
}
:root[data-theme='dark'] .back-button .back-ic {
  color: var(--accent);
}

/* ── Course search ───────────────────────────────────── */
.course-search-wrap {
  position: relative;
}
.course-search-ic {
  position: absolute;
  inset-inline-start: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--ink-soft);
  pointer-events: none;
  display: inline-flex;
}
.course-search-input {
  padding-inline-start: 42px !important;
}
.search-result-ic {
  display: inline-flex;
  color: var(--brand);
}
:root[data-theme='dark'] .search-result-ic {
  color: var(--accent);
}

/* ── Course cards → match panel system ───────────────── */
.course-card {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: none;
  padding: 18px 20px;
}
.course-card h2 {
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.course-card h2 .ic {
  color: var(--brand);
}
:root[data-theme='dark'] .course-card h2 .ic {
  color: var(--accent);
}

/* ── Placeholder empty states ────────────────────────── */
.placeholder-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 32px 18px;
  color: var(--ink-soft);
}
.placeholder-icon {
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
}
:root[data-theme='dark'] .placeholder-icon {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.placeholder-icon .ic {
  width: 30px;
  height: 30px;
}
.placeholder-body p {
  margin: 0;
  font-size: 0.92rem;
  line-height: 1.6;
  max-width: 420px;
}

/* ── Module item type icons ──────────────────────────── */
.type-icon {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: color-mix(in srgb, var(--brand) 8%, transparent);
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
:root[data-theme='dark'] .type-icon {
  background: rgba(var(--accent-rgb), 0.12);
  color: var(--accent);
}
.module-content-item.type-assignment .type-icon {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.module-content-item.type-quiz .type-icon {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}
.module-content-item.type-link .type-icon {
  background: rgba(225, 29, 72, 0.1);
  color: #e11d48;
}
.item-locked {
  display: flex;
  align-items: center;
  gap: 8px;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  color: var(--ink-soft);
}
.item-locked .ic {
  color: var(--ink-soft);
}
.item-tick {
  color: var(--color-success, #10b981);
  font-weight: 800;
}

/* ── Buttons → brand ─────────────────────────────────── */
.btn-primary,
.modal-btn--primary {
  background: var(--brand);
}
.btn-primary:hover:not(:disabled),
.modal-btn--primary:hover {
  background: var(--brand-2);
}
.modal-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.link-button {
  color: var(--brand);
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
:root[data-theme='dark'] .link-button {
  color: var(--accent);
}

/* ── Modals → tokens ─────────────────────────────────── */
.portal-modal {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.portal-modal-header {
  border-bottom: 1px solid var(--line);
}
.portal-modal-header h3 {
  color: var(--ink);
}
.portal-modal-footer {
  border-top: 1px solid var(--line);
}

/* ── File meta / pdf download / rt toolbar ───────────── */
.file-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--ink-soft);
}
.file-meta .ic {
  color: var(--brand);
}
.md-pdf-dl {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.rt-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ── Staff / students rows ───────────────────────────── */
.staff-list,
.students-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* ── My-day / week lists ─────────────────────────────── */
.my-day-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.my-day-item,
.my-day-list > * {
  border-radius: 10px;
}

/* ── Notifications dropdown → tokens ─────────────────── */
.notif-dropdown {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.16);
}

/* ── Login refresh ───────────────────────────────────── */
.login-card {
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 18px 50px rgba(var(--brand-rgb), 0.12);
}
.login-header h1 {
  color: var(--brand);
}
.login-sub {
  margin: 4px 0 0;
  text-align: center;
  color: var(--ink-soft);
  font-size: 0.9rem;
  font-weight: 600;
}
.toggle-password {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--ink-soft);
}
.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

/* ── Skeleton loaders (P4) ───────────────────────────── */
.skeleton-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 16px;
}
.skeleton-card {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--panel-bg);
}
.skeleton-banner {
  height: 74px;
}
.skeleton-line {
  height: 12px;
  margin: 14px 16px;
  border-radius: 6px;
}
.skeleton-line.short {
  width: 50%;
}
.sk {
  position: relative;
  background: color-mix(in srgb, var(--ink) 8%, var(--panel-bg));
  overflow: hidden;
}
.sk::after {
  content: '';
  position: absolute;
  inset: 0;
  transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--ink) 6%, transparent), transparent);
  animation: skshine 1.3s infinite;
}
[dir='rtl'] .sk::after {
  animation-name: skshine-rtl;
}
@keyframes skshine {
  100% {
    transform: translateX(100%);
  }
}
@keyframes skshine-rtl {
  100% {
    transform: translateX(100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .sk::after {
    animation: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
   UNIT SYSTEM overhaul — sections, overview, drip locks, status
   ═══════════════════════════════════════════════════════════════ */

/* Two-column form helper (used in module editor) */
.form-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 14px;
}
@media (max-width: 520px) {
  .form-grid-2 {
    grid-template-columns: 1fr;
  }
}

/* Module overview / objectives */
.module-overview {
  margin: 4px 0 12px;
  padding: 14px 16px;
  background: color-mix(in srgb, var(--brand) 5%, transparent);
  border: 1px solid var(--line);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
:root[data-theme='dark'] .module-overview {
  background: rgba(255, 255, 255, 0.03);
}
.module-overview-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--ink);
}
.module-objectives strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  color: var(--ink);
}
.module-objectives strong .ic {
  color: var(--brand);
}
:root[data-theme='dark'] .module-objectives strong .ic {
  color: var(--accent);
}
.module-objectives ul {
  margin: 8px 0 0;
  padding-inline-start: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.module-objectives li {
  font-size: 0.88rem;
  color: var(--ink-soft);
  line-height: 1.5;
}

/* Section divider inside a module */
.module-section-divider {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 4px;
  padding: 0;
}
.module-section-divider::before {
  content: '';
  flex: 0 0 3px;
  align-self: stretch;
  min-height: 16px;
  background: var(--brand);
  border-radius: 3px;
}
:root[data-theme='dark'] .module-section-divider::before {
  background: var(--accent);
}
.module-section-label {
  font-size: 0.82rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-transform: none;
  /* Content-sized, never squeezed to nothing by the actions beside it. */
  flex: 0 1 auto;
  min-width: 8ch;
  overflow-wrap: anywhere;
}
.module-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--line);
}
.module-section-actions {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

/* Locked module (drip / prerequisite) */
.module-item.module-locked {
  opacity: 0.92;
}
.module-item.module-locked > summary {
  cursor: default;
}
.module-lock-ic {
  display: inline-flex;
  color: var(--ink-soft);
}
.module-locked-note {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 0.9rem;
  background: color-mix(in srgb, var(--ink) 4%, transparent);
  border-radius: 10px;
}
.module-locked-note .ic {
  color: var(--ink-soft);
}

/* Per-item in-progress indicator */
.item-inprogress {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  margin-inline-start: 8px;
  background: var(--color-warning, #f59e0b);
  vertical-align: middle;
}

/* Continue where you left off */
.continue-cta {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  padding: 14px 18px;
  border: none;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: #fff;
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease;
}
.continue-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(var(--brand-rgb), 0.22);
}
.continue-ic {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.continue-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.continue-text small {
  font-size: 0.76rem;
  opacity: 0.85;
}
.continue-text strong {
  font-size: 1rem;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.continue-go {
  display: inline-flex;
  opacity: 0.9;
}
[dir='rtl'] .continue-go .ic {
  transform: scaleX(-1);
}

/* chip--info reuse for scheduling badges */
.chip--info {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════
   UNIT P2–P4 — toolbar, library, templates, bulk, discussion, live
   ═══════════════════════════════════════════════════════════════ */
.modules-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.modal-btn.is-on {
  background: color-mix(in srgb, var(--brand) 14%, transparent);
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}
:root[data-theme='dark'] .modal-btn.is-on {
  color: var(--accent);
}

.module-tools {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  padding-top: 6px;
  margin-top: 2px;
  border-top: 1px dashed var(--line);
}

/* Library + template picker lists */
.lib-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lib-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-bg);
}
.lib-title {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.lib-title small {
  color: var(--ink-soft);
  font-size: 0.8rem;
}
.lib-actions {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Bulk select */
.module-item.bulk-active .module-content-item {
  padding-inline-start: 6px;
}
.bulk-check {
  width: 18px;
  height: 18px;
  margin-inline-end: 6px;
  accent-color: var(--brand);
  flex-shrink: 0;
}
.bulk-bar {
  position: sticky;
  bottom: 8px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
}
.bulk-count {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--ink-soft);
  margin-inline-end: auto;
}
.bulk-move-target {
  font-size: 0.85rem;
  padding: 6px 8px;
  border-radius: 8px;
  border: 1px solid var(--input-border, var(--line));
  background: var(--input-bg, var(--panel-bg));
  color: var(--ink);
}

/* Type-specific icon colors for new item kinds */
.module-content-item.type-discussion .type-icon {
  background: rgba(8, 145, 178, 0.12);
  color: #0891b2;
}
.module-content-item.type-live .type-icon {
  background: rgba(216, 27, 96, 0.12);
  color: #d81b60;
}

/* Discussion thread */
.discussion-prompt {
  margin-bottom: 14px;
  padding: 12px 14px;
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  border-radius: 10px;
}
:root[data-theme='dark'] .discussion-prompt {
  background: rgba(255, 255, 255, 0.04);
}
.discussion-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 14px;
  max-height: 50vh;
  overflow-y: auto;
}
.disc-post {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-bg);
}
.disc-post--staff {
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}
.disc-post-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 5px;
}
.disc-post-head strong {
  font-size: 0.9rem;
}
.disc-post-head .disc-del {
  margin-inline-start: auto;
}
.disc-post-body {
  font-size: 0.92rem;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.discussion-compose {
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.discussion-compose textarea {
  flex: 1;
  resize: vertical;
}

/* Live session card */
.live-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px;
  border-radius: 14px;
  background: linear-gradient(120deg, var(--brand), var(--brand-2));
  color: #fff;
}
.live-ic {
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.16);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.live-info {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.live-when {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.95rem;
  opacity: 0.92;
}
.live-card .modal-btn--primary {
  background: #fff;
  color: var(--brand);
  align-self: flex-start;
}

/* ═══════════════════════════════════════════════════════════════
   ADD-TO-UNIT overhaul — type picker, segmented, switches, chips
   ═══════════════════════════════════════════════════════════════ */

/* Single "+ add" entry button per unit */
.add-entry-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1.5px dashed color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  color: var(--brand);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.add-entry-btn:hover {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-color: var(--brand);
}
:root[data-theme='dark'] .add-entry-btn {
  color: var(--accent);
  border-color: rgba(var(--accent-rgb), 0.4);
  background: rgba(var(--accent-rgb), 0.08);
}

/* Type picker grid */
.add-picker-hint {
  margin: 0 0 14px;
  color: var(--ink-soft);
  font-size: 0.92rem;
}
.type-picker {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
}
.type-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-bg);
  cursor: pointer;
  text-align: start;
  font-family: inherit;
  transition:
    transform 0.12s ease,
    box-shadow 0.15s ease,
    border-color 0.15s;
}
.type-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  border-color: color-mix(in srgb, var(--brand) 40%, var(--line));
}
.type-card-text {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.type-card-text strong {
  font-size: 0.95rem;
  color: var(--ink);
}
.type-card-text small {
  font-size: 0.76rem;
  color: var(--ink-soft);
  line-height: 1.4;
}

/* Type-colored icon tile (shared by picker cards + editor chips) */
.type-card-ic {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: color-mix(in srgb, var(--brand) 10%, transparent);
  color: var(--brand);
}
.tc-text {
  background: rgba(var(--accent-rgb), 0.14);
  color: #5b8a1f;
}
.tc-link,
.tc-live {
  background: rgba(216, 27, 96, 0.12);
  color: #d81b60;
}
.tc-file {
  background: rgba(37, 99, 235, 0.1);
  color: #2563eb;
}
.tc-assignment {
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
}
.tc-quiz {
  background: rgba(124, 58, 237, 0.12);
  color: #7c3aed;
}
.tc-discussion {
  background: rgba(8, 145, 178, 0.12);
  color: #0891b2;
}
.tc-section {
  background: rgba(100, 116, 139, 0.14);
  color: #475569;
}
.tc-library {
  background: rgba(16, 185, 129, 0.13);
  color: #047857;
}
[data-theme='dark'] .tc-text {
  color: #a3d65f;
}

/* Editor type chip (top of focused editors) */
.editor-typebar {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  font-weight: 700;
  color: var(--ink);
}
.editor-typebar .type-card-ic {
  width: 34px;
  height: 34px;
  border-radius: 9px;
}

/* Segmented control (replaces small dropdowns) */
.segmented {
  display: inline-flex;
  width: 100%;
  gap: 4px;
  padding: 4px;
  background: var(--page-bg);
  border: 1px solid var(--line);
  border-radius: 11px;
}
.seg-btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border: none;
  background: transparent;
  border-radius: 8px;
  color: var(--ink-soft);
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.13s,
    color 0.13s,
    box-shadow 0.13s;
}
.seg-btn .ic {
  opacity: 0.8;
}
.seg-btn:hover {
  color: var(--ink);
}
.seg-btn.is-active {
  background: var(--panel-bg);
  color: var(--brand);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
:root[data-theme='dark'] .seg-btn.is-active {
  color: var(--accent);
}

/* ── Submissions Hub (Phase 1) ── */
.subhub-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.subhub-badge {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.25);
  font-size: 0.74rem;
  font-weight: 700;
}
.subhub-filters {
  margin-bottom: 12px;
}
.seg-count {
  display: inline-flex;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 0.68rem;
  font-weight: 700;
}
.seg-btn.is-active .seg-count {
  background: var(--accent);
  color: #fff;
}
.subhub-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.subhub-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-bg);
}
.subhub-name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  flex: 1;
  min-width: 0;
}
.subhub-attach {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8rem;
  color: var(--ink-soft);
  white-space: nowrap;
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.subhub-mini {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border: 1px solid var(--line);
  background: var(--panel-bg);
  color: var(--ink);
  border-radius: 8px;
  padding: 5px 11px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  white-space: nowrap;
}
.subhub-mini:hover {
  background: var(--page-bg);
}
.subhub-mini.primary {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.subhub-mini.primary:hover {
  filter: brightness(1.08);
}
.subhub-mini:disabled {
  opacity: 0.5;
  cursor: default;
}
.chip--danger {
  background: rgba(220, 38, 38, 0.1);
  color: #b91c1c;
}

/* ── Grading Mode (Phase 1) ── */
.gm-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.gm-progress {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--brand);
}
:root[data-theme='dark'] .gm-progress {
  color: var(--accent);
}
.gm-bar-tools {
  display: flex;
  align-items: center;
  gap: 12px;
}
.gm-anon {
  font-size: 0.85rem;
}
.gm-progressbar {
  height: 5px;
  background: var(--line);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 14px;
}
.gm-progressbar-fill {
  height: 100%;
  background: var(--accent);
  border-radius: 999px;
  transition: width 0.25s ease;
}
.gm-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.gm-who {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 1.02rem;
}
.gm-preview {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
  background: var(--page-bg);
}
.gm-preview img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  background: #fff;
}
.gm-preview iframe {
  display: block;
  width: 100%;
  height: 420px;
  border: 0;
}
.gm-preview--text {
  padding: 14px;
  white-space: pre-wrap;
  line-height: 1.7;
  max-height: 360px;
  overflow: auto;
}
.gm-preview--file {
  padding: 18px;
  text-align: center;
}
.gm-preview--file a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
}
.gm-preview--empty {
  padding: 30px;
  text-align: center;
  color: var(--ink-soft);
}
.gm-preview--empty p {
  margin: 8px 0 0;
}
.gm-grade-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}
.gm-grade-row label {
  font-weight: 600;
  font-size: 0.9rem;
}
.gm-score {
  width: 90px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  text-align: center;
  background: var(--panel-bg);
  color: var(--ink);
}
.gm-feedback {
  width: 100%;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  resize: vertical;
  background: var(--panel-bg);
  color: var(--ink);
}

/* ── Annotation (Phase 2) ── */
.annot-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  padding: 8px 10px;
  background: var(--page-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 10px;
  position: sticky;
  top: 0;
  z-index: 3;
}
.annot-tools,
.annot-colors,
.annot-actions {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.annot-tool {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 32px;
  border: 1px solid var(--line);
  background: var(--panel-bg);
  color: var(--ink);
  border-radius: 8px;
  cursor: pointer;
}
.annot-tool:hover {
  background: var(--page-bg);
}
.annot-tool.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.annot-color {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
}
.annot-color.is-active {
  border-color: var(--ink);
  box-shadow: 0 0 0 2px var(--panel-bg) inset;
}
.annot-pages {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.annot-page {
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
}
.annot-stage {
  position: relative;
  display: block;
  line-height: 0;
}
.annot-media {
  display: block;
  width: 100%;
  height: auto;
}
.annot-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.annot--edit .annot-svg {
  cursor: crosshair;
  touch-action: none;
}
.annot-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 0 12px;
  margin: 0;
}
.annot-notes:not(:empty) {
  padding: 10px 12px;
  background: var(--page-bg);
  border-top: 1px solid var(--line);
}
.annot-note-item {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 0.88rem;
  line-height: 1.5;
  color: var(--ink);
}
.annot-note-num {
  display: inline-flex;
  flex-shrink: 0;
  min-width: 20px;
  height: 20px;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
}
.gm-preview-host {
  margin-bottom: 12px;
}

/* ── Comment bank (Phase 3) ── */
.cb-wrap {
  position: relative;
  margin-top: 6px;
}
.cb-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px dashed var(--line);
  background: var(--panel-bg);
  color: var(--ink-soft);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
}
.cb-btn:hover {
  color: var(--brand);
  border-color: var(--brand);
}
.cb-pop {
  position: absolute;
  z-index: 20;
  top: calc(100% + 4px);
  inset-inline-start: 0;
  width: min(340px, 90vw);
  max-height: 260px;
  overflow: auto;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  padding: 6px;
}
.cb-save {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  border: none;
  background: var(--page-bg);
  color: var(--brand);
  border-radius: 7px;
  padding: 7px 9px;
  cursor: pointer;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  margin-bottom: 5px;
}
.cb-save:hover {
  background: var(--line);
}
.cb-item {
  display: flex;
  align-items: center;
  gap: 6px;
  border-radius: 7px;
  padding: 2px 2px 2px 6px;
}
.cb-item:hover {
  background: var(--page-bg);
}
.cb-text {
  flex: 1;
  padding: 6px 4px;
  cursor: pointer;
  font-size: 0.86rem;
  line-height: 1.5;
}
.cb-del {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1.1rem;
  line-height: 1;
  padding: 2px 6px;
  border-radius: 6px;
}
.cb-del:hover {
  background: rgba(220, 38, 38, 0.12);
  color: #b91c1c;
}
.cb-empty {
  padding: 10px;
  font-size: 0.82rem;
  text-align: center;
}

/* ── Grading queue card (Phase 4) ── */
.gq-card {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--accent);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 18px;
}
.gq-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.gq-head-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--brand);
}
:root[data-theme='dark'] .gq-head-title {
  color: var(--accent);
}
.gq-head-title h2 {
  margin: 0;
  font-size: 1.05rem;
}
.gq-total {
  display: inline-flex;
  min-width: 26px;
  height: 26px;
  padding: 0 8px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-weight: 700;
  font-size: 0.9rem;
}
.gq-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 8px;
}
.gq-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  background: var(--page-bg);
  transition:
    border-color 0.15s,
    transform 0.1s;
}
.gq-item:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}
.gq-item-icon {
  display: inline-flex;
  flex-shrink: 0;
  color: var(--ink-soft);
}
.gq-item-title {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.gq-item-title strong {
  font-size: 0.9rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gq-item-title small {
  color: var(--ink-soft);
  font-size: 0.76rem;
}
.gq-item-count {
  display: inline-flex;
  flex-shrink: 0;
  min-width: 24px;
  height: 24px;
  padding: 0 7px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: #fef3c7;
  color: #b45309;
  font-weight: 700;
  font-size: 0.82rem;
}

/* ── Groups / Teams manager ── */
.assignments-toolbar {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.gset-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
  padding-bottom: 10px;
}
.gset-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  background: var(--panel-bg);
  color: var(--ink);
  border-radius: 999px;
  padding: 6px 14px;
  cursor: pointer;
  font: inherit;
  font-size: 0.86rem;
  font-weight: 600;
}
.gset-tab.is-active {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
}
.gset-tab--add {
  border-style: dashed;
  color: var(--ink-soft);
  font-weight: 500;
}
.gset-count {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--line);
  color: var(--ink-soft);
  font-size: 0.7rem;
  font-weight: 700;
}
.gset-tab.is-active .gset-count {
  background: rgba(255, 255, 255, 0.25);
  color: #fff;
}
.gset-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.gset-spacer {
  flex: 1;
}
.grp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
.grp-card {
  border: 1px solid var(--line);
  border-top: 3px solid var(--grp, #2563eb);
  border-radius: 12px;
  padding: 12px;
  background: var(--panel-bg);
}
.grp-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.grp-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--grp, #2563eb);
  flex-shrink: 0;
}
.grp-name {
  flex: 1;
  cursor: pointer;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.grp-name:hover {
  text-decoration: underline dotted;
}
.grp-count {
  display: inline-flex;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: var(--page-bg);
  color: var(--ink-soft);
  font-size: 0.72rem;
  font-weight: 700;
}
.grp-members {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 10px;
}
.grp-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: var(--page-bg);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 4px 3px 9px;
  font-size: 0.8rem;
}
.grp-chip.is-leader {
  background: rgba(245, 158, 11, 0.13);
  border-color: rgba(245, 158, 11, 0.4);
  color: #b45309;
}
.grp-chip-name {
  cursor: pointer;
}
.grp-chip-x {
  border: none;
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 3px;
  border-radius: 5px;
}
.grp-chip-x:hover {
  background: rgba(220, 38, 38, 0.13);
  color: #b91c1c;
}
.grp-add-sel {
  width: 100%;
  padding: 6px 8px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.82rem;
  background: var(--panel-bg);
  color: var(--ink-soft);
}

/* ── Groups manager v2 (drag-drop, pool, inline edit) ── */
.gset-titlebar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.gset-name-input {
  font-size: 1.05rem;
  font-weight: 700;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 5px 9px;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  min-width: 140px;
}
.gset-name-input:hover {
  border-color: var(--line);
}
.gset-name-input:focus {
  border-color: var(--brand);
  background: var(--panel-bg);
  outline: none;
}
.gset-target {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
}
.gset-target input {
  width: 56px;
  padding: 5px 7px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  text-align: center;
  background: var(--panel-bg);
  color: var(--ink);
}
.gset-multi {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.82rem;
  color: var(--ink-soft);
  cursor: pointer;
  user-select: none;
}
.plan-quick {
  display: inline-flex;
  gap: 4px;
}
.sup-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.sup-stat {
  flex: 1;
  min-inline-size: 86px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 9px;
  padding: 0.5rem 0.6rem;
  text-align: center;
}
.sup-stat-val {
  font-size: 1.25rem;
  font-weight: 800;
}
.sup-stat-lbl {
  font-size: 0.74rem;
  color: var(--ink-soft, #64748b);
  margin-block-start: 2px;
}
.sup-history {
  max-block-size: 46vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sup-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.5rem;
  border: 1px solid var(--border, #eef2f7);
  border-radius: 7px;
  font-size: 0.85rem;
}
.sup-row-out {
  inline-size: 20px;
  block-size: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  flex: 0 0 auto;
}
.sup-row-out.ok {
  background: #dcfce7;
  color: #16a34a;
}
.sup-row-out.bad {
  background: #fee2e2;
  color: #dc2626;
}
.sup-row-out.skip {
  background: #fef3c7;
  color: #d97706;
}
.sup-row-stu {
  font-weight: 600;
}
.sup-row-rng {
  flex: 1;
}
.sup-row-date {
  white-space: nowrap;
}
.gset-multi input {
  accent-color: var(--brand);
  cursor: pointer;
}
.gm-2pane {
  display: grid;
  grid-template-columns: 230px 1fr;
  gap: 14px;
  align-items: start;
}
.gm-pool {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  background: var(--page-bg);
  position: sticky;
  top: 0;
  transition:
    background 0.15s,
    border-color 0.15s;
}
.gm-pool.drop-target {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--page-bg));
}
.gm-pool-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.gm-pool-search {
  width: 100%;
  padding: 6px 9px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
  font-size: 0.84rem;
  margin-bottom: 8px;
  background: var(--panel-bg);
  color: var(--ink);
}
.gm-pool-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 420px;
  overflow: auto;
}
.pool-chip {
  display: block;
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-bg);
  font-size: 0.84rem;
  cursor: grab;
}
.pool-chip:hover {
  border-color: var(--brand);
}
.pool-chip.dragging,
.grp-chip.dragging {
  opacity: 0.4;
}
.gm-groups {
  min-width: 0;
}
.grp-card.drop-target {
  border-color: var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent);
}
.grp-handle {
  cursor: grab;
  color: var(--ink-soft);
  display: inline-flex;
}
.grp-color {
  width: 22px;
  height: 22px;
  border: none;
  background: none;
  padding: 0;
  cursor: pointer;
}
.grp-name-input {
  flex: 1;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 3px 6px;
  font: inherit;
  font-weight: 600;
  background: transparent;
  color: var(--ink);
}
.grp-name-input:hover {
  border-color: var(--line);
}
.grp-name-input:focus {
  border-color: var(--brand);
  background: var(--panel-bg);
  outline: none;
}
.grp-count.over {
  background: #fef3c7;
  color: #b45309;
}
.grp-count.ok {
  background: #d1fae5;
  color: #047857;
}
.grp-chip[draggable='true'] {
  cursor: grab;
}
.grp-members {
  min-height: 38px;
}
.grp-drop-hint {
  font-size: 0.8rem;
  display: block;
  padding: 8px;
  text-align: center;
  border: 1px dashed var(--line);
  border-radius: 8px;
}
.seg-col {
  flex-direction: column;
}
.seg-col .seg-btn {
  justify-content: flex-start;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}
.seg-col .seg-btn small {
  font-weight: 400;
  font-size: 0.72rem;
  opacity: 0.75;
}
@media (max-width: 640px) {
  .gm-2pane {
    grid-template-columns: 1fr;
  }
  .gm-pool {
    position: static;
  }
}

/* ── Per-member override + peer eval (Phase 3) ── */
.gmembers-section {
  margin-top: 12px;
}
.gmember-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--line);
}
.gmember-name {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.88rem;
}
.gmember-score {
  width: 70px;
  padding: 5px 8px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  text-align: center;
  background: var(--panel-bg);
  color: var(--ink);
}
.peer-chip {
  font-size: 0.76rem;
  background: rgba(245, 158, 11, 0.14);
  color: #b45309;
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 600;
}
.peer-eval-section {
  border-top: 1px solid var(--line);
  margin-top: 14px;
  padding-top: 10px;
}
.peer-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.peer-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.peer-name {
  min-width: 110px;
  font-size: 0.88rem;
  font-weight: 600;
}
.peer-stars {
  display: inline-flex;
}
.peer-star {
  border: none;
  background: none;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;
  color: var(--line);
  padding: 0 1px;
}
.peer-star.on {
  color: #f59e0b;
}
.peer-comment {
  flex: 1;
  min-width: 120px;
  padding: 5px 9px;
  border: 1px solid var(--line);
  border-radius: 7px;
  font: inherit;
  font-size: 0.84rem;
  background: var(--panel-bg);
  color: var(--ink);
}
.subhub-ungrouped {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Visibility overview (Phase 5) ── */
.vis-group {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--grp, #2563eb);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
}
.vis-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.vis-group-head .grp-count {
  margin-inline-start: auto;
}
.vis-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vis-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--page-bg);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 4px 10px;
  font-size: 0.83rem;
}
.gb-group-filter {
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  font: inherit;
  font-size: 0.85rem;
  background: var(--panel-bg);
  color: var(--ink);
}
.gcmp-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.gcmp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gcmp-name {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  font-size: 0.86rem;
  font-weight: 600;
}
.gcmp-bar {
  flex: 1;
  height: 16px;
  background: var(--page-bg);
  border-radius: 999px;
  overflow: hidden;
}
.gcmp-fill {
  height: 100%;
  border-radius: 999px;
  transition: width 0.3s ease;
  min-width: 2px;
}
.gcmp-val {
  min-width: 48px;
  text-align: end;
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 0.86rem;
}

/* Group entries in the submissions hub + grading mode */
.subhub-name[style] .grp-dot {
  background: var(--grp, #2563eb);
}
.subhub-name-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.subhub-members {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 260px;
  font-size: 0.74rem;
}
.gm-members {
  display: block;
  font-size: 0.82rem;
  margin: -4px 0 10px;
}

/* Student group banner */
.stu-group-banner {
  background: rgba(37, 99, 235, 0.06);
  border: 1px solid rgba(37, 99, 235, 0.2);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
}
.stu-group-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.stu-group-members {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 8px;
}
.stu-group-note {
  font-size: 0.84rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Group-audience picker ── */
.aud-block .aud-picker {
  display: flex;
  flex-direction: column;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px;
  background: var(--page-bg);
}
.aud-set-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.aud-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.aud-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 11px 4px 8px;
  cursor: pointer;
  font-size: 0.82rem;
  background: var(--panel-bg);
  user-select: none;
}
.aud-chip input {
  display: none;
}
.aud-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--grp, #2563eb);
  flex-shrink: 0;
}
.aud-chip:has(input:checked) {
  border-color: var(--grp, #2563eb);
  background: color-mix(in srgb, var(--grp, #2563eb) 14%, transparent);
  font-weight: 600;
}

/* ── Student "my groups" card ── */
.mygroups-card .card-header h2 {
  display: flex;
  align-items: center;
  gap: 7px;
}
.mygroups-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mygroup {
  border: 1px solid var(--line);
  border-inline-start: 3px solid var(--grp, #2563eb);
  border-radius: 10px;
  padding: 10px 12px;
}
.mygroup-head {
  display: flex;
  align-items: center;
  gap: 7px;
  margin-bottom: 8px;
}
.mygroup-set {
  font-size: 0.76rem;
  margin-inline-start: auto;
}
.mygroup-members {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
}
.mg-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--grp, #2563eb) 18%, var(--panel-bg));
  color: var(--ink);
  font-size: 0.74rem;
  font-weight: 700;
  border: 2px solid var(--panel-bg);
  margin-inline-start: -8px;
}
.mg-avatar:first-child {
  margin-inline-start: 0;
}
.mg-avatar.is-me {
  background: var(--grp, #2563eb);
  color: #fff;
}
.mg-avatar.is-leader {
  box-shadow: 0 0 0 2px #f59e0b;
}
.mygroup-names {
  font-size: 0.82rem;
  margin-inline-start: 8px;
}

/* Toggle switch (replaces checkboxes for booleans) */
.switch {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  padding: 4px 0;
}
.switch input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.switch-track {
  position: relative;
  flex-shrink: 0;
  width: 42px;
  height: 24px;
  border-radius: 999px;
  background: var(--color-gray-300, #cbd5e1);
  transition: background 0.18s;
}
.switch-track::after {
  content: '';
  position: absolute;
  top: 3px;
  inset-inline-start: 3px;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
  transition: transform 0.18s;
}
.switch input:checked + .switch-track {
  background: var(--brand);
}
.switch input:checked + .switch-track::after {
  transform: translateX(18px);
}
[dir='rtl'] .switch input:checked + .switch-track::after {
  transform: translateX(-18px);
}
.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.switch-label {
  display: flex;
  flex-direction: column;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.3;
}
.switch-label small {
  font-weight: 500;
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.switch--standalone {
  margin-top: 12px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Advanced-options expander inside editors */
.editor-adv {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 4px 14px;
  margin-top: 12px;
}
.editor-adv > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--ink-soft);
  padding: 10px 0;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 6px;
}
.editor-adv > summary::-webkit-details-marker {
  display: none;
}
.editor-adv > summary::before {
  content: '▸';
  color: var(--brand);
  font-size: 0.7rem;
  transition: transform 0.15s;
}
.editor-adv[open] > summary::before {
  transform: rotate(90deg);
}
.editor-adv[open] {
  padding-bottom: 12px;
}

@media (max-width: 520px) {
  .type-picker {
    grid-template-columns: 1fr;
  }
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 1 — Lesson editor (live preview, blocks, callouts, tables)
   ═══════════════════════════════════════════════════════════════ */
.lesson-editor {
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: visible;
  background: var(--panel-bg);
}
.lesson-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
  background: var(--page-bg);
  border-radius: 12px 12px 0 0;
}
.lt-group {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.lt-group + .lt-group {
  padding-inline-start: 6px;
  border-inline-start: 1px solid var(--line);
}
.lesson-toolbar .rt-btn,
.lt-menu-btn,
.lt-view-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 9px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 7px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s;
}
.lesson-toolbar .rt-btn:hover,
.lt-menu-btn:hover,
.lt-view-btn:hover {
  background: var(--panel-bg);
  border-color: var(--line);
}
.lt-view {
  margin-inline-start: auto;
}
.lt-view-btn.is-active {
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 35%, var(--line));
}
:root[data-theme='dark'] .lt-view-btn.is-active {
  color: var(--accent);
}

/* Pop menus */
.lt-pop {
  position: relative;
}
.lt-menu {
  position: absolute;
  top: calc(100% + 6px);
  inset-inline-start: 0;
  z-index: 30;
  min-width: 200px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.16);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.lt-menu button {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 9px 10px;
  border: none;
  background: transparent;
  border-radius: 7px;
  color: var(--ink);
  font-family: inherit;
  font-size: 0.86rem;
  font-weight: 600;
  text-align: start;
  cursor: pointer;
}
.lt-menu button:hover {
  background: var(--page-bg);
}
.lt-menu .ic {
  color: var(--ink-soft);
}

/* Panes: editor + live preview */
.lesson-panes {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  min-height: 320px;
}
.lesson-editor[data-view='edit'] .lesson-panes {
  grid-template-columns: 1fr;
}
.lesson-editor[data-view='edit'] .lesson-preview {
  display: none;
}
.lesson-editor[data-view='preview'] .lesson-panes {
  grid-template-columns: 1fr;
}
.lesson-editor[data-view='preview'] .lesson-input {
  display: none;
}
.lesson-input {
  border: none !important;
  border-radius: 0 !important;
  resize: vertical;
  min-height: 320px;
  padding: 14px 16px;
  font-family: 'Cairo', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.7;
  background: var(--panel-bg);
  color: var(--ink);
}
.lesson-input:focus {
  outline: none;
}
.lesson-editor[data-view='split'] .lesson-input {
  border-inline-end: 1px solid var(--line) !important;
}
.lesson-preview {
  padding: 14px 18px;
  overflow-y: auto;
  max-height: 60vh;
  background: var(--panel-bg);
}
.md-preview-empty {
  color: var(--ink-soft);
  font-size: 0.88rem;
  padding: 8px 0;
}
.lesson-editor.is-dragover {
  outline: 2px dashed var(--brand);
  outline-offset: -4px;
}
.lesson-editor.is-dragover .lesson-input {
  background: color-mix(in srgb, var(--brand) 6%, var(--panel-bg));
}
@media (max-width: 720px) {
  .lesson-panes {
    grid-template-columns: 1fr;
  }
  .lesson-editor[data-view='split'] .lesson-preview {
    border-top: 1px solid var(--line);
  }
  .lt-view {
    width: 100%;
    margin-inline-start: 0;
    justify-content: flex-end;
  }
}

/* Rendered markdown extras: callouts, tables, hr, blockquote */
.md-callout {
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--brand);
  border-radius: 10px;
  padding: 12px 14px;
  margin: 12px 0;
  background: color-mix(in srgb, var(--brand) 6%, transparent);
  font-size: 0.92rem;
  line-height: 1.6;
}
.md-callout--info {
  border-inline-start-color: #2563eb;
  background: rgba(37, 99, 235, 0.07);
}
.md-callout--tip {
  border-inline-start-color: #059669;
  background: rgba(16, 185, 129, 0.08);
}
.md-callout--warn {
  border-inline-start-color: #d97706;
  background: rgba(245, 158, 11, 0.1);
}
.md-callout--note {
  border-inline-start-color: var(--ink-soft);
  background: color-mix(in srgb, var(--ink) 5%, transparent);
}
.md-table-wrap {
  overflow-x: auto;
  margin: 12px 0;
}
.md-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}
.md-table th,
.md-table td {
  border: 1px solid var(--line);
  padding: 8px 11px;
  text-align: start;
}
.md-table th {
  background: var(--page-bg);
  font-weight: 700;
}
.item-text hr,
.md-preview hr {
  border: none;
  border-top: 1px solid var(--line);
  margin: 16px 0;
}
.item-text blockquote,
.md-preview blockquote {
  margin: 12px 0;
  padding: 8px 14px;
  border-inline-start: 3px solid var(--line);
  color: var(--ink-soft);
}
.md-preview h3,
.md-preview h4,
.md-preview h5 {
  margin: 14px 0 6px;
}
.md-preview p {
  margin: 8px 0;
  line-height: 1.7;
}
.md-preview ul,
.md-preview ol {
  margin: 8px 0;
  padding-inline-start: 22px;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 2 — Video studio + visual trimmer
   ═══════════════════════════════════════════════════════════════ */
.vs-preview {
  margin: 12px 0;
  border-radius: 12px;
  overflow: hidden;
}
.vs-trim {
  margin: 12px 0;
}
.vs-trim-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: 10px;
}
.vs-opts {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 10px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
}

/* Trimmer */
.vt {
  padding: 18px 10px 4px;
}
.vt-host {
  margin: 6px 0 12px;
}
.vt-bar {
  position: relative;
  height: 10px;
  border-radius: 6px;
  background: var(--color-gray-200, #e2e8f0);
  cursor: pointer;
  touch-action: none;
}
:root[data-theme='dark'] .vt-bar {
  background: rgba(255, 255, 255, 0.1);
}
.vt-range {
  position: absolute;
  top: 0;
  height: 100%;
  background: color-mix(in srgb, var(--brand) 55%, transparent);
  border-radius: 6px;
}
.vt-handle {
  position: absolute;
  top: 50%;
  width: 16px;
  height: 22px;
  margin-inline-start: -8px;
  transform: translateY(-50%);
  background: var(--brand);
  border: 2px solid #fff;
  border-radius: 5px;
  cursor: ew-resize;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  touch-action: none;
}
.vt-tip {
  position: absolute;
  bottom: calc(100% + 6px);
  inset-inline-start: 50%;
  transform: translateX(-50%);
  background: var(--ink);
  color: var(--panel-bg);
  font-size: 0.7rem;
  font-variant-numeric: tabular-nums;
  padding: 2px 6px;
  border-radius: 5px;
  white-space: nowrap;
  pointer-events: none;
}
[dir='rtl'] .vt-tip {
  transform: translateX(50%);
}
.vt-readout {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 12px;
  font-size: 0.78rem;
  color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.vt-r-dur {
  font-weight: 700;
  color: var(--brand);
}
:root[data-theme='dark'] .vt-r-dur {
  color: var(--accent);
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 3 — Quiz builder canvas
   ═══════════════════════════════════════════════════════════════ */
.qz-canvas {
  margin-top: 16px;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.qz-locked {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px;
  background: var(--page-bg);
  border-radius: 10px;
  font-size: 0.9rem;
}
.qz-canvas-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 10px;
}
.qz-canvas-head h3 {
  margin: 0;
  font-size: 1rem;
  display: flex;
  align-items: center;
  gap: 10px;
}
.qz-total {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
}
.qz-qlist {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 14px;
}
.qz-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-bg);
}
.qz-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
}
.qz-num {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
:root[data-theme='dark'] .qz-num {
  color: var(--accent);
}
.qz-card-text {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qz-card-edit {
  padding: 4px 12px 14px;
  border-top: 1px dashed var(--line);
}
.qz-edit-actions {
  display: flex;
  gap: 8px;
  margin-top: 10px;
}
.qz-add {
  border: 1px dashed var(--line);
  border-radius: 12px;
  padding: 14px;
  background: var(--page-bg);
}
.qz-add-form {
  margin-bottom: 10px;
}
.qf-row2 {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: flex-end;
}
.qf-typed {
  margin-top: 10px;
}
.qf-opts {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 6px 0;
}
.aq-opt {
  display: flex;
  align-items: center;
  gap: 8px;
}
.aq-opt input[type='text'] {
  flex: 1;
}
.aq-opt input[type='radio'] {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
  flex-shrink: 0;
}

/* Quiz question-bank selection panel */
.qz-select {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 14px;
  background: var(--page-bg);
}
.qz-select-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}
.qz-select-head strong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.92rem;
}
.qz-select-head .segmented {
  width: auto;
}
.qz-sel-body {
  margin-top: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.qz-sel-note {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  color: var(--ink-soft);
}
.qz-sel-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 0;
  border-top: 1px dashed var(--line);
}
.qz-sel-label {
  font-weight: 600;
  font-size: 0.9rem;
}
.qz-sel-pick {
  font-size: 0.86rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.qz-sel-input {
  width: 64px;
  margin: 0 4px;
}
.qz-sel-count {
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 0.9rem;
}
.qz-sel-count strong {
  color: var(--brand);
}
:root[data-theme='dark'] .qz-sel-count strong {
  color: var(--accent);
}
.qz-select-summary {
  margin-top: 10px;
  font-size: 0.86rem;
  color: var(--ink-soft);
}
.qz-select-summary strong {
  color: var(--brand);
}
:root[data-theme='dark'] .qz-select-summary strong {
  color: var(--accent);
}
.qz-canvas-tools {
  display: inline-flex;
  gap: 12px;
}

/* Group sections in the builder */
.qz-group {
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
}
.qz-group-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 12px;
  background: var(--page-bg);
  border-bottom: 1px solid var(--line);
}
.qz-group-name {
  font-size: 0.95rem;
}
.qz-group-count {
  font-size: 0.78rem;
  color: var(--ink-soft);
}
.qz-group-pick {
  font-size: 0.82rem;
  color: var(--ink-soft);
  white-space: nowrap;
}
.qz-gpick {
  width: 58px;
  margin: 0 4px;
}
.qz-add-here {
  margin-inline-start: auto;
}
.qz-group-questions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
}
.qz-group-questions .qz-card {
  border-color: var(--line);
}
.qz-card-group {
  font-size: 0.78rem;
  padding: 4px 6px;
  border-radius: 7px;
  border: 1px solid var(--input-border, var(--line));
  background: var(--input-bg, var(--panel-bg));
  color: var(--ink);
  max-width: 130px;
}

/* Student: one-by-one stepper + progress + review */
.qz-step {
  min-height: 120px;
}
.qz-nav {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}
.qz-progress {
  margin: 0 auto;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--ink-soft);
}
.qz-review {
  margin-top: 16px;
}
.qz-review h4 {
  margin: 0 0 8px;
  font-size: 0.9rem;
}
.qz-review-item {
  padding: 9px 12px;
  border-radius: 9px;
  margin-bottom: 7px;
  border: 1px solid var(--line);
  border-inline-start: 4px solid var(--line);
}
.qz-review-item.is-correct {
  border-inline-start-color: var(--color-success, #10b981);
  background: rgba(16, 185, 129, 0.06);
}
.qz-review-item.is-wrong {
  border-inline-start-color: var(--color-error, #ef4444);
  background: rgba(239, 68, 68, 0.06);
}
.qz-review-q {
  display: flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: 0.9rem;
}
.qz-review-q .ic {
  margin-inline-start: auto;
}
.qz-review-item.is-correct .qz-review-q .ic {
  color: var(--color-success, #10b981);
}
.qz-review-item.is-wrong .qz-review-q .ic {
  color: var(--color-error, #ef4444);
}
.qz-review-a {
  font-size: 0.84rem;
  margin-top: 4px;
}
.grade-banner--done .grade-banner-score {
  color: var(--color-success, #10b981);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ═══════════════════════════════════════════════════════════════
   GRADES overhaul — category picker, settings, letters
   ═══════════════════════════════════════════════════════════════ */
.cat-pick {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cat-pick select {
  flex: 1;
}
.gb-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.gb-actions {
  display: inline-flex;
  gap: 8px;
  flex-wrap: wrap;
}
.gb-letter {
  display: inline-block;
  margin-inline-start: 4px;
  padding: 1px 6px;
  border-radius: 6px;
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  color: var(--brand);
  font-weight: 800;
  font-size: 0.74rem;
}
:root[data-theme='dark'] .gb-letter {
  color: var(--accent);
  background: rgba(var(--accent-rgb), 0.16);
}
.gb-hidden-cat {
  opacity: 0.6;
}
.cat-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.cat-row [data-field='name'] {
  flex: 1;
}
.cat-row [data-field='weight'] {
  width: 80px;
}
.cat-vis.is-hidden {
  color: var(--color-warning, #f59e0b);
}
.scheme-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 8px 0;
}
.scheme-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.scheme-row .sc-label {
  flex: 1;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 4 — Assignment: due presets, resources
   ═══════════════════════════════════════════════════════════════ */
.due-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.due-preset {
  border: 1px solid var(--line);
  background: var(--panel-bg);
  border-radius: 999px;
  padding: 5px 12px;
  font-family: inherit;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  transition:
    background 0.13s,
    color 0.13s,
    border-color 0.13s;
}
.due-preset:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  color: var(--brand);
  background: color-mix(in srgb, var(--brand) 7%, transparent);
}
.res-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.res-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-bg);
}
.res-ic {
  color: var(--brand);
  display: inline-flex;
}
:root[data-theme='dark'] .res-ic {
  color: var(--accent);
}
.res-name {
  flex: 1;
  min-width: 0;
  font-size: 0.86rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.res-add {
  display: flex;
  gap: 14px;
  margin-top: 8px;
}
.res-view {
  margin: 14px 0;
}
.res-view h4 {
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.res-view-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  margin-bottom: 6px;
  border: 1px solid var(--line);
  border-radius: 9px;
  text-decoration: none;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 600;
}
.res-view-item:hover {
  border-color: color-mix(in srgb, var(--brand) 45%, var(--line));
  background: color-mix(in srgb, var(--brand) 5%, transparent);
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 5 — File studio (drop zone + queue)
   ═══════════════════════════════════════════════════════════════ */
.fs-drop {
  border: 2px dashed var(--line);
  border-radius: 14px;
  padding: 28px 18px;
  text-align: center;
  background: var(--page-bg);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.fs-drop.is-over {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--page-bg));
}
.fs-drop p {
  margin: 10px 0 4px;
  font-size: 0.92rem;
}
.fs-drop-ic {
  color: var(--brand);
  display: inline-flex;
}
:root[data-theme='dark'] .fs-drop-ic {
  color: var(--accent);
}
.fs-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.fs-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-bg);
}
.fs-thumb {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--page-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
  color: var(--ink-soft);
}
.fs-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.fs-name {
  flex: 1;
  min-width: 0;
}
.fs-size {
  font-size: 0.74rem;
  color: var(--ink-soft);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 6 — Discussion: threading, gate
   ═══════════════════════════════════════════════════════════════ */
.disc-post-foot {
  margin-top: 6px;
}
.disc-replies {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.disc-reply {
  margin-inline-start: 22px;
  border-inline-start: 2px solid var(--line);
  background: var(--page-bg);
}
.disc-reply-box {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  align-items: flex-end;
}
.disc-reply-box textarea {
  flex: 1;
  resize: vertical;
}
.disc-gate {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px;
  background: var(--page-bg);
  border: 1px dashed var(--line);
  border-radius: 10px;
  color: var(--ink-soft);
  font-size: 0.9rem;
}
.disc-gate .ic {
  color: var(--ink-soft);
}

/* ═══════════════════════════════════════════════════════════════
   PHASE 7 — Live session (badges, actions, recording)
   ═══════════════════════════════════════════════════════════════ */
.live-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
  width: fit-content;
}
.live-badge--now {
  background: #ff5a4d;
  animation: livepulse 1.6s ease-in-out infinite;
}
.live-badge--ended {
  background: rgba(255, 255, 255, 0.14);
}
.live-badge--rec {
  background: rgba(255, 255, 255, 0.22);
}
@keyframes livepulse {
  50% {
    opacity: 0.6;
  }
}
.live-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.live-card .modal-btn.is-disabled {
  opacity: 0.55;
  pointer-events: none;
}
.live-card .modal-btn--ghost {
  background: rgba(255, 255, 255, 0.16);
  color: #fff;
}
.live-recording {
  margin-top: 14px;
}

/* ── Assignment rubric ─────────────────────────────── */
.rubric-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rubric-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.rubric-row .rubric-name {
  flex: 1;
}
.rubric-row .rubric-pts {
  width: 90px;
}
.rubric-actions {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.rubric-sum {
  margin-inline-start: auto;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--brand);
}
:root[data-theme='dark'] .rubric-sum {
  color: var(--accent);
}
.rubric-view {
  margin: 14px 0;
}
.rubric-view h4 {
  margin: 0 0 8px;
  font-size: 0.86rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.rubric-grade {
  margin: 12px 0;
}
.rubric-grade-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}
.rubric-grade-row span {
  flex: 1;
  font-size: 0.9rem;
}
.rubric-grade-row .rg-pts {
  width: 80px;
}

/* Live in calendar + this-week */
.cal-event--live {
  background: rgba(216, 27, 96, 0.14) !important;
  color: #d81b60 !important;
}
.my-day-item--live {
  border-inline-start: 3px solid #d81b60;
}
.my-day-item--live strong {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

/* ══ Memorization (standalone page) ══ */
.mem-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}
.mem-page-head h1 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 1.5rem;
  margin: 0;
}
.mem-overall {
  font-weight: 700;
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
:root[data-theme='dark'] .mem-overall {
  color: var(--accent);
}
.mem-works {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 14px;
}
.mem-work-card {
  text-align: start;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
  background: var(--panel-bg);
  cursor: pointer;
  font: inherit;
  color: var(--ink);
  transition:
    border-color 0.15s,
    transform 0.1s,
    box-shadow 0.15s;
}
.mem-work-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}
.mem-work-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
}
.mem-work-head strong {
  font-size: 1.05rem;
}
.mem-work-ic {
  display: inline-flex;
  color: var(--brand);
}
:root[data-theme='dark'] .mem-work-ic {
  color: var(--accent);
}
.mem-progress {
  height: 8px;
  background: var(--page-bg);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.mem-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--accent));
  border-radius: 999px;
  transition: width 0.4s ease;
}
.mem-work-stats {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}
.mem-work-stats strong {
  color: var(--brand);
  font-variant-numeric: tabular-nums;
}
:root[data-theme='dark'] .mem-work-stats strong {
  color: var(--accent);
}
.mem-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  padding: 10px 12px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  margin-bottom: 16px;
}
.mem-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
}
.mem-dot {
  width: 12px;
  height: 12px;
  border-radius: 4px;
  flex-shrink: 0;
}
.mem-grid-wrap {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.mem-juz-head {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--ink-soft);
  margin-bottom: 6px;
}
.mem-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mem-grid--list {
  gap: 6px;
}
.mem-cell {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-size: 0.64rem;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.1s;
}
.mem-cell:hover {
  transform: scale(1.18);
  z-index: 1;
}
.mem-cell.is-empty {
  background: var(--page-bg);
  color: var(--ink-soft);
  text-shadow: none;
  border: 1px solid var(--line);
}
.mem-grid--list .mem-cell {
  width: auto;
  min-width: 30px;
  padding: 0 10px;
  height: 32px;
}
.mem-unit-detail {
  font-size: 0.95rem;
}
.mem-unit-state {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
}

/* ══ Memorization tab (course) ══ */
.mem-task-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}
.mem-task-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-bg);
}
.mem-task-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.mem-task-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}
.mem-verify-wrap {
  overflow: auto;
  max-height: 60vh;
  margin-top: 10px;
}
.mem-verify-table {
  border-collapse: collapse;
  font-size: 0.8rem;
}
.mem-verify-table th,
.mem-verify-table td {
  border: 1px solid var(--line);
  padding: 0;
  text-align: center;
}
.mem-verify-table th {
  padding: 5px 6px;
  background: var(--page-bg);
  position: sticky;
  top: 0;
  font-weight: 700;
}
.mem-verify-name {
  padding: 6px 10px !important;
  text-align: start !important;
  white-space: nowrap;
  position: sticky;
  inset-inline-start: 0;
  background: var(--panel-bg);
  font-weight: 600;
}
.mem-vcell {
  width: 30px;
  height: 30px;
  border: none;
  background: var(--page-bg);
  cursor: pointer;
  font-weight: 700;
  color: #fff;
  font-size: 0.8rem;
}
.mem-vcell:hover {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
}
.mem-vcell.done {
  color: #fff;
}

.mem-review-badge {
  margin-top: 8px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 600;
  color: #2563eb;
  background: rgba(37, 99, 235, 0.1);
  padding: 3px 9px;
  border-radius: 999px;
}

/* ══ Memorization bulk builder ══ */
.mb-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.mb-total {
  font-size: 0.84rem;
  margin: -4px 0 10px;
  font-weight: 600;
}
.mb-states {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.mb-state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.84rem;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
}
.mb-state:has(input:checked) {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, transparent);
}
.mb-state input {
  display: none;
}
.mb-preview {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--page-bg);
  display: flex;
  flex-direction: column;
  max-height: 560px;
}
.mb-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
}
#mbPreviewBody {
  overflow: auto;
  padding: 6px;
}
.mb-stu {
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.mb-stu.empty {
  opacity: 0.7;
}
.mb-stu-name {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 600;
  font-size: 0.88rem;
  margin-bottom: 5px;
}
.mb-stu-tasks {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.mb-task-chip {
  font-size: 0.74rem;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 7px;
  font-variant-numeric: tabular-nums;
}
.mb-task-chip.short {
  border-color: #f59e0b;
  color: #b45309;
}
@media (max-width: 720px) {
  .mb-grid {
    grid-template-columns: 1fr;
  }
}

/* ══ Memorization jagged verification grid (per-student units) ══ */
.mem-jagged {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 60vh;
  overflow: auto;
  margin-top: 8px;
}
.mem-jrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}
.mem-jname {
  min-width: 130px;
  font-weight: 600;
  font-size: 0.86rem;
}
.mem-jcells {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}

/* ══ Memorization builder tabs ══ */
.mb-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.mb-tab {
  border: none;
  background: none;
  padding: 8px 14px;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.mb-tab.is-active {
  color: var(--brand);
  border-bottom-color: var(--brand);
}
:root[data-theme='dark'] .mb-tab.is-active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* ── Memorization batch: per-student override (special cases) ── */
.mb-cust-btn {
  margin-inline-start: auto;
  font-size: 0.72rem;
  padding: 0.12rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: var(--surface-2, #f3f4f6);
  color: var(--text-muted, #555);
  cursor: pointer;
  white-space: nowrap;
}
.mb-cust-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.mb-stu .mb-stu-name {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.mb-stu.mb-custom {
  border-inline-start: 3px solid var(--accent);
}
.mb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mb-chip-lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  cursor: pointer;
}

/* ── Memorization full plan: builder levels + plan cards ── */
.pl-levels-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.8rem;
  margin-bottom: 0.4rem;
}
.pl-levels {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pl-level {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--surface-2, #f6f7f9);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.5rem;
}
.pl-num {
  flex: 0 0 1.4rem;
  height: 1.4rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}
.pl-level .pl-title {
  flex: 1 1 auto;
  min-width: 0;
}
.pl-mini {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.75rem;
  color: var(--text-muted, #666);
  white-space: nowrap;
}
.pl-mini input {
  width: 3.2rem;
}
.pl-level select {
  flex: 0 0 auto;
  max-width: 9rem;
}
.pl-del {
  flex: 0 0 auto;
}
.pl-summary {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-bottom: 0.6rem;
}
.pl-sum-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
}
.pl-sum-num {
  flex: 0 0 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.72rem;
  font-weight: 700;
}
.pl-sum-title {
  flex: 1 1 auto;
}
.mem-plans {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.mem-plan-card {
  border: 1px solid var(--border);
  border-inline-start: 3px solid var(--accent);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  background: var(--surface, #fff);
}
.mem-plan-head {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin-bottom: 0.5rem;
}
.mem-plan-levels {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.mem-plan-lvl {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--surface-2, #f3f4f6);
  border-radius: 6px;
  padding: 0.2rem 0.45rem;
  font-size: 0.78rem;
}
.mem-plan-lvl .chip {
  color: #1a1a1a;
  font-size: 0.68rem;
  padding: 0.05rem 0.35rem;
}
.mem-plan-arrow {
  color: var(--text-muted, #999);
  font-weight: 700;
}
.mem-plan-dist {
  margin-top: 0.4rem;
  font-size: 0.76rem;
}

/* Memorization plan card actions */
.mem-plan-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
}
.mem-plan-acts {
  display: flex;
  gap: 0.2rem;
  flex: 0 0 auto;
}
.mem-plan-acts .icon-btn {
  padding: 0.2rem;
  opacity: 0.6;
}
.mem-plan-acts .icon-btn:hover {
  opacity: 1;
}

/* Memorization self-report + overdue */
.mem-self-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.mem-self-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mem-self-row.is-done {
  opacity: 0.7;
  background: var(--surface-2, #f6f7f9);
}
.mem-overdue {
  color: #dc2626;
  font-weight: 600;
}
.mem-vrow {
  white-space: nowrap;
}

/* Memorization review surfacing */
.mem-review-banner {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.8rem;
  font-size: 0.85rem;
}
.modal-btn--warn {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}
.modal-btn--warn:hover {
  background: #1d4ed8;
}

/* Memorization tracker + journey drawer */
.mem-trk-wrap {
  overflow-x: auto;
}
.mem-trk-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.85rem;
}
.mem-trk-table th,
.mem-trk-table td {
  padding: 0.4rem 0.55rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.mem-trk-table th {
  font-weight: 600;
  color: var(--text-muted, #666);
}
.mem-trk-name {
  text-align: start !important;
  font-weight: 600;
}
.mem-trk-row {
  cursor: pointer;
}
.mem-trk-row:hover {
  background: var(--surface-2, #f6f7f9);
}
.mem-trk-bar {
  width: 70px;
  height: 7px;
  border-radius: 4px;
  background: #e5e7eb;
  overflow: hidden;
  display: inline-block;
  vertical-align: middle;
}
.mem-trk-bar span {
  display: block;
  height: 100%;
  background: #16a34a;
}
.mem-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}
.mem-leg {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
}
.mem-j-sec {
  font-weight: 700;
  font-size: 0.82rem;
  border-inline-start: 3px solid;
  padding-inline-start: 0.4rem;
  margin: 0.6rem 0 0.3rem;
}
.mem-j-cells {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  margin-bottom: 0.3rem;
}
.mem-j-cell {
  width: 30px;
  height: 26px;
  border: none;
  border-radius: 5px;
  font-size: 0.7rem;
  cursor: pointer;
  color: #1a1a1a;
}
.mem-j-cell:hover {
  outline: 2px solid var(--accent);
}
.mem-j-tasks {
  margin-top: 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.mem-j-task {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 7px;
  font-size: 0.82rem;
}

/* Student plan ribbon + actionable home */
.mem-ribbons {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.mem-ribbon {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
  background: var(--surface, #fff);
}
.mem-ribbon.is-done {
  border-color: #16a34a;
  background: #f0fdf4;
}
.mem-rib-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.5rem;
  font-size: 0.9rem;
}
.mem-rib-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 0.5rem;
}
.mem-rib-dot {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  background: #e5e7eb;
  color: #6b7280;
}
.mem-rib-dot.current {
  background: var(--accent, #2563eb);
  color: #fff;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}
.mem-rib-dot.done {
  background: #16a34a;
  color: #fff;
}
.mem-rib-line {
  flex: 1 1 auto;
  height: 2px;
  background: #e5e7eb;
  min-width: 0.5rem;
}
.mem-rib-bar {
  height: 6px;
  border-radius: 4px;
  background: #e5e7eb;
  overflow: hidden;
}
.mem-rib-bar span {
  display: block;
  height: 100%;
  background: var(--accent, #2563eb);
}
.mem-ribbon.is-done .mem-rib-bar span {
  background: #16a34a;
}
.mem-todo {
  margin-bottom: 1.2rem;
}
.mem-todo h3,
.mem-works-title {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.95rem;
  margin: 0.4rem 0;
}
.mem-todo-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.35rem;
}

/* Verify cell popover + grid polish */
.mem-cellmenu {
  position: absolute;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  background: var(--surface, #fff);
  border: 1px solid var(--border);
  border-radius: 9px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
  overflow: hidden;
  min-width: 110px;
}
.mem-cellmenu button {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.7rem;
  background: none;
  border: none;
  cursor: pointer;
  font: inherit;
  text-align: start;
  color: inherit;
}
.mem-cellmenu button:hover {
  background: var(--surface-2, #f3f4f6);
}
.mem-verify-search {
  width: 100%;
  max-width: 280px;
  margin-bottom: 0.5rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
}
.mem-verify-table .mem-verify-name {
  position: sticky;
  inset-inline-start: 0;
  background: var(--surface, #fff);
  z-index: 1;
}
.mem-dot.is-empty {
  background: transparent;
  border: 1px dashed #cbd5e1;
}

/* Memorization unit text (poem verse / hadith body) */
.mem-unit-text {
  margin-top: 0.6rem;
  padding: 0.6rem 0.7rem;
  background: var(--surface-2, #f6f7f9);
  border-radius: 8px;
  line-height: 2;
  white-space: pre-wrap;
  font-size: 0.95rem;
}

/* Memorization "graded assignment" block in builders */
.mem-grade-block {
  margin-top: 0.7rem;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}
.mem-grade-block .mb-chip-lbl {
  font-weight: 600;
}

/* Assigned-unit indicator on the student memorization grid */
.mem-cell {
  position: relative;
}
.mem-cell.is-assigned {
  box-shadow: 0 0 0 2px var(--accent, #2563eb);
}
.mem-cell-flag {
  position: absolute;
  top: -3px;
  inset-inline-end: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent, #2563eb);
  border: 1px solid #fff;
}
.mem-unit-assign {
  margin-top: 0.6rem;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  color: #1e40af;
  font-size: 0.85rem;
  line-height: 1.7;
}

/* Recitation session + inbox + streak + home logging */
.mem-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.mem-streak {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff7ed;
  border: 1px solid #fed7aa;
  border-radius: 10px;
  padding: 0.5rem 0.8rem;
  margin-bottom: 1rem;
  font-size: 0.88rem;
}
.mem-streak-fire {
  font-size: 1.3rem;
  font-weight: 800;
  color: #ea580c;
}
.mem-inbox-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  margin-bottom: 0.4rem;
  cursor: pointer;
}
.mem-inbox-row:hover {
  border-color: var(--accent);
  background: var(--surface-2, #f6f7f9);
}
.mem-sess-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}
.mem-sess-page {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1rem;
  text-align: center;
  background: var(--surface, #fff);
  margin-bottom: 0.7rem;
}
.mem-sess-num {
  font-size: 0.95rem;
  color: var(--text-muted, #666);
  margin-bottom: 0.5rem;
}
.mem-sess-text {
  font-size: 1.35rem;
  line-height: 2.4;
  white-space: pre-wrap;
  margin: 0.4rem 0;
}
.mem-sess-state {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  margin-top: 0.4rem;
}
.mem-sess-quality {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
.mem-q-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.85rem;
}
.mem-q-dots {
  display: inline-flex;
  gap: 0.25rem;
}
.mem-q-dot {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: var(--surface, #fff);
  cursor: pointer;
  font-size: 0.75rem;
  color: var(--text-muted, #888);
}
.mem-q-dot.on {
  background: #f59e0b;
  color: #fff;
  border-color: #f59e0b;
}
.mem-sess-note {
  width: 100%;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-bottom: 0.7rem;
  font: inherit;
}
.mem-sess-btns {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.5rem;
}
.mem-sess-b {
  padding: 0.8rem 0.5rem;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
  font-size: 0.95rem;
  color: #fff;
}
.mem-sess-b.ok {
  background: #16a34a;
}
.mem-sess-b.warn {
  background: #f59e0b;
}
.mem-sess-b.bad {
  background: #dc2626;
}
.mem-sess-b:disabled {
  opacity: 0.5;
}
.mem-sess-summary {
  text-align: center;
  padding: 1.5rem 0.5rem;
}

/* Test session — per-page score selector */
.mem-score-lbl {
  font-size: 0.82rem;
  margin: 0.7rem 0 0.35rem;
  text-align: center;
}
.mem-score-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}
.mem-score-btn {
  min-width: 3.2rem;
  padding: 0.7rem 0.6rem;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--surface, #fff);
  color: inherit;
  cursor: pointer;
  font: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  transition:
    transform 0.06s ease,
    background 0.12s ease,
    border-color 0.12s ease;
}
.mem-score-btn:hover {
  border-color: #6366f1;
  background: rgba(99, 102, 241, 0.08);
  transform: translateY(-1px);
}
.mem-score-btn:active {
  transform: translateY(0);
  background: #6366f1;
  color: #fff;
}
.mem-score-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
.mem-test-list {
  margin-top: 1rem;
  text-align: start;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.mem-test-li {
  display: flex;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.9rem;
}
.mem-test-li b.ok {
  color: #16a34a;
}
.mem-test-li b.bad {
  color: #dc2626;
}

/* Supervisor recitation portal */
.rec-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: linear-gradient(135deg, #eff6ff, #fff);
  margin-bottom: 1rem;
  text-decoration: none;
  color: inherit;
}
.rec-card:hover {
  border-color: var(--accent);
}
.rec-card-ic {
  font-size: 1.6rem;
}
.rec-card-txt {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.rec-card-txt strong {
  font-size: 1rem;
}
.rec-card-txt small {
  color: var(--text-muted, #666);
  font-size: 0.8rem;
}
.rec-card-badge {
  background: #2563eb;
  color: #fff;
  font-weight: 700;
  min-width: 1.7rem;
  height: 1.7rem;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
}
.rec-card-arrow {
  color: var(--accent);
  font-size: 1.2rem;
}
.rec-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.3rem;
}
.rec-head h1 {
  font-size: 1.4rem;
  margin: 0;
  flex: 1;
}
.rec-filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.8rem 0;
}
.rec-filters select,
.rec-filters input {
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  font: inherit;
}
.rec-filters input {
  flex: 1;
  min-width: 140px;
}
/* Per-student task tabs (one per work the student is memorizing) */
.rec-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.8rem 0 0.4rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}
.rec-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.45rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--text, #1e293b);
  font: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
}
.rec-tab.is-on {
  background: var(--k, #0f766e);
  border-color: var(--k, #0f766e);
  color: #fff;
}
/* Plans: a collapsible filter under the type chips, scoped to the active work tab. */
.rec-plans {
  margin-top: 0.4rem;
}
.rec-plans > summary {
  cursor: pointer;
  font-size: 0.84rem;
  font-weight: 700;
  color: #4338ca;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.25rem 0;
}
.rec-plan-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.rec-plan-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.35rem 0.75rem;
  border: 1px solid #c7d2fe;
  border-radius: 999px;
  background: #eef2ff;
  color: #4338ca;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.rec-plan-chip.is-on {
  background: #4f46e5;
  border-color: #4f46e5;
  color: #fff;
}
.rec-plan-chip.is-on .rec-kf-n {
  background: rgba(255, 255, 255, 0.3);
}
.rec-tab-n {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 0 0.4rem;
  font-size: 0.78rem;
  font-weight: 700;
}
.rec-tab.is-on .rec-tab-n {
  background: rgba(255, 255, 255, 0.3);
}
/* Recitation TYPE tag (حفظ/مراجعة/ربط) on each task */
.rec-step-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  color: #fff;
  background: var(--c, #16a34a);
  padding: 0.08rem 0.45rem;
  border-radius: 6px;
  vertical-align: middle;
}
/* Recitation-type filter chips */
.rec-kindfilter {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.5rem 0;
}
.rec-kf {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.8rem;
  border: 1px solid var(--c, var(--border));
  border-radius: 999px;
  background: var(--surface, #fff);
  color: var(--c, var(--text, #1e293b));
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
}
.rec-kf.is-on {
  background: var(--c, #0f766e);
  color: #fff;
  border-color: var(--c, #0f766e);
}
.rec-kf-n {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 999px;
  padding: 0 0.35rem;
  font-size: 0.76rem;
}
.rec-kf.is-on .rec-kf-n {
  background: rgba(255, 255, 255, 0.3);
}
.rec-stu {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 11px;
  margin-bottom: 0.45rem;
  cursor: pointer;
}
.rec-stu:hover {
  border-color: var(--accent);
  background: var(--surface-2, #f6f7f9);
}
.rec-badges {
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.rec-tasks {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.rec-task {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 11px;
}
.rec-task.is-done {
  opacity: 0.65;
}
.rec-task-main {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rec-task-acts {
  display: flex;
  gap: 0.4rem;
  flex: 0 0 auto;
}
.rec-done {
  margin-top: 0.8rem;
}
.rec-done summary {
  cursor: pointer;
  font-weight: 600;
  padding: 0.4rem 0;
  color: var(--text-muted, #666);
}

/* Recitation portal — completion checklist (color-coded by type) */
.rec-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rec-chk {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.7rem;
  padding: 0.8rem 1rem;
  border: 1px solid var(--border);
  border-inline-start: 5px solid var(--k, #6b7280);
  border-radius: 12px;
  background: var(--surface, #fff);
}
.rec-chk.is-checked {
  opacity: 0.6;
  background: #f0fdf4;
}
.rec-chk--locked {
  opacity: 0.55;
  background: repeating-linear-gradient(45deg, #f8fafc, #f8fafc 10px, #f1f5f9 10px, #f1f5f9 20px);
  border-style: dashed;
}
.rec-chk--locked .rec-chk-lock {
  flex: 0 0 auto;
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  padding: 0.4rem 0.7rem;
  border-radius: 10px;
  white-space: nowrap;
}
.rec-chk-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.rec-chk-line1 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.rec-kind-badge {
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.1rem 0.5rem;
  border-radius: 6px;
}
.rec-chk-btn {
  flex: 0 0 auto;
  padding: 0.65rem 1.1rem;
  border: none;
  border-radius: 10px;
  background: var(--k, #16a34a);
  color: #fff;
  font-weight: 700;
  cursor: pointer;
  font: inherit;
  font-size: 0.9rem;
}
.rec-chk-btn:disabled {
  opacity: 0.5;
}
.rec-chk-done {
  flex: 0 0 auto;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background: #16a34a;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
}
.rec-chk-actions {
  flex: 0 0 auto;
  display: flex;
  gap: 0.4rem;
}
.rec-chk-btn--fail {
  background: var(--panel-bg);
  color: #dc2626;
  border: 1px solid #fecaca;
}
.rec-chk-btn--skip {
  background: var(--panel-bg);
  color: #d97706;
  border: 1px solid #fde68a;
}
.rec-chk-btn--test {
  background: #6366f1;
  color: #fff;
  border: 1px solid #6366f1;
  font-weight: 800;
}
.rec-chk--test {
  border-color: rgba(99, 102, 241, 0.45);
}
.rec-chk-revert {
  flex: 0 0 auto;
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--line, #e2e8f0);
  border-radius: 9px;
  background: var(--panel-bg);
  color: #475569;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.rec-chk-revert:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}
.rec-chk-revert:disabled {
  opacity: 0.5;
}
.rec-chk-btn--failed-flash {
  background: #fee2e2;
}
/* Per-student recitation history (attempt log) */
.rec-history {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rec-report {
  margin-top: 0.5rem;
}
.rec-att {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  border-inline-start: 4px solid #94a3b8;
}
.rec-att--pass {
  border-inline-start-color: #16a34a;
}
.rec-att--fail {
  border-inline-start-color: #dc2626;
  background: #fef2f2;
}
.rec-att-ic {
  flex: 0 0 auto;
  width: 1.7rem;
  height: 1.7rem;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  color: #fff;
}
.rec-att--pass .rec-att-ic {
  background: #16a34a;
}
.rec-att--fail .rec-att-ic {
  background: #dc2626;
}
.rec-att-body {
  min-width: 0;
}
/* Behavior report */
.beh-head-row {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted, #64748b);
  font-weight: 700;
  padding: 0.3rem 0.8rem;
}
.beh-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 0.4rem;
  cursor: pointer;
}
.beh-row:hover {
  background: var(--surface-2, #f8fafc);
}
.beh-counts {
  flex: 0 0 auto;
  display: flex;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 0.9rem;
}
.beh-pass {
  color: #16a34a;
}
.beh-fail {
  color: #dc2626;
}
/* Attendance sheet */
.att-summary {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--muted, #64748b);
  margin-bottom: 0.5rem;
}
.att-sheet {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.att-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
}
.att-name {
  min-width: 0;
  font-size: 0.9rem;
}
.att-seg {
  flex: 0 0 auto;
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.att-opt {
  border: none;
  background: var(--surface, #fff);
  padding: 0.4rem 0.85rem;
  font: inherit;
  font-size: 0.84rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--muted, #64748b);
}
.att-opt + .att-opt {
  border-inline-start: 1px solid var(--border);
}
.att-opt--p.is-on {
  background: #16a34a;
  color: #fff;
}
.att-opt--a.is-on {
  background: #dc2626;
  color: #fff;
}
.att-hist-title {
  margin: 1.2rem 0 0.5rem;
  font-size: 0.95rem;
}
.att-hist {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.att-hist-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  cursor: pointer;
}
.att-hist-row:hover {
  background: var(--surface-2, #f8fafc);
}
.att-hist-counts {
  flex: 0 0 auto;
  display: flex;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 700;
}

/* Plan progress report */
.rpt-summary {
  display: flex;
  gap: 0.5rem;
  margin: 0.6rem 0;
}
.rpt-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.rpt-stu {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.2rem 0.2rem;
}
.rpt-stu > summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 0.7rem;
  cursor: pointer;
  list-style: none;
}
.rpt-stu > summary strong {
  flex: 1;
}
.rpt-overdue {
  padding: 0.4rem 0.8rem 0.6rem;
  font-size: 0.84rem;
  line-height: 1.9;
  color: #b91c1c;
}
.rpt-overdue strong {
  color: inherit;
}
.rpt-num {
  font-size: 0.8rem;
  white-space: nowrap;
}
.rpt-stu-target {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
  padding: 0.35rem 0.8rem 0.5rem;
  font-size: 0.84rem;
}
.rpt-stu-target label {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  color: var(--ink-soft, #475569);
}
.rpt-stu-target input {
  inline-size: 64px;
  padding: 3px 6px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 6px;
  font: inherit;
  text-align: center;
}

/* Reports hub */
.rep-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}
.rep-tab {
  padding: 0.5rem 0.9rem;
  border: none;
  background: none;
  cursor: pointer;
  font: inherit;
  font-weight: 600;
  color: var(--text-muted, #777);
  border-bottom: 2px solid transparent;
}
.rep-tab.is-active {
  color: var(--accent, #2563eb);
  border-bottom-color: var(--accent, #2563eb);
}
.rep-table-wrap {
  overflow-x: auto;
}
.rep-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.rep-table th,
.rep-table td {
  padding: 0.5rem 0.6rem;
  text-align: center;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}
.rep-table th {
  color: var(--text-muted, #666);
  font-weight: 600;
}
.rep-sort {
  cursor: pointer;
  user-select: none;
}
.rep-sort:hover {
  color: var(--accent);
}
.rep-name {
  text-align: start !important;
  font-weight: 600;
  position: sticky;
  inset-inline-start: 0;
  background: var(--surface, #fff);
}
.rep-row {
  cursor: pointer;
}
.rep-row:hover td {
  background: var(--surface-2, #f6f7f9);
}
.rep-overall {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.9rem;
}
.rep-ov {
  flex: 1;
  min-width: 90px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.6rem;
  text-align: center;
}
.rep-ov span {
  display: block;
  font-size: 0.78rem;
  margin-bottom: 0.2rem;
}
.rep-subj {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  margin-bottom: 0.5rem;
}
.rep-subj-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.rep-subj-body {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-size: 0.85rem;
}
/* Per-plan cards inside the student report (recitation portal + Reports Hub) */
.rep-plans {
  margin-bottom: 0.9rem;
}
.rep-plans-head {
  font-weight: 700;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
}
.rep-plans-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.rep-plan-card {
  flex: 1 1 auto;
  min-width: 96px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  text-align: center;
}
.rep-plan-label {
  font-size: 0.74rem;
  color: var(--text-muted, #64748b);
  margin-bottom: 0.25rem;
}
.rep-plan-pct {
  font-size: 1.15rem;
  font-weight: 700;
}
/* ── In-place plan manager ── */
.pm-steps {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pm-step {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  padding: 0.5rem 0.7rem;
}
.pm-step-ord {
  flex: 0 0 auto;
  min-width: 34px;
  font-weight: 800;
  text-align: center;
  color: #475569;
}
.pm-step-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pm-step-acts {
  display: flex;
  gap: 0.2rem;
  flex: 0 0 auto;
}
.pm-step-acts .icon-btn[disabled] {
  opacity: 0.3;
  cursor: default;
}
.pm-addstep {
  margin-top: 0.6rem;
  border: 1px dashed var(--border);
  border-radius: 9px;
  padding: 0.4rem 0.7rem;
}
.pm-addstep > summary {
  cursor: pointer;
  font-weight: 700;
  font-size: 0.85rem;
}
.btn-sm {
  padding: 0.3rem 0.7rem;
  font-size: 0.82rem;
}
.pm-grades {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.pm-grade-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  border-bottom: 1px solid var(--surface-2, #f1f5f9);
  padding: 0.35rem 0;
}
.pm-grade-name {
  min-width: 0;
}
.pm-grade-in {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 0 0 auto;
}
.pm-grade-in input {
  width: 72px;
  text-align: center;
}
.pm-grade-max {
  color: var(--text-muted, #64748b);
  font-size: 0.85rem;
}

/* ── Group supervisors (group manager) ── */
.grp-sup {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.3rem;
  padding: 0.4rem 0.55rem;
  border-top: 1px dashed var(--border, #e2e8f0);
  margin-top: 0.35rem;
}
.grp-sup-label {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.grp-sup-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  background: color-mix(in srgb, var(--grp, #2563eb) 14%, transparent);
  color: var(--grp, #2563eb);
  border: 1px solid color-mix(in srgb, var(--grp, #2563eb) 35%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
  font-size: 0.78rem;
  font-weight: 600;
}
.grp-sup-x {
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  opacity: 0.7;
}
.grp-sup-x:hover {
  opacity: 1;
}
.grp-sup-add {
  width: 22px;
  height: 22px;
  border-radius: 999px;
  border: 1px dashed var(--border, #cbd5e1);
  background: var(--surface, #fff);
  color: var(--muted, #64748b);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.grp-sup-add:hover {
  border-color: var(--accent, #2563eb);
  color: var(--accent, #2563eb);
}

/* ── Supervisor floating picker ── */
.sup-picker {
  position: absolute;
  z-index: 4000;
  width: 240px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
  padding: 0.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.sup-picker-search {
  width: 100%;
  padding: 0.4rem 0.55rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-size: 0.85rem;
  font-family: inherit;
}
.sup-picker-list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.sup-picker-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.1rem;
  text-align: start;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0.4rem 0.5rem;
  border-radius: 7px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text, #1e293b);
}
.sup-picker-item:hover {
  background: var(--surface-2, #f1f5f9);
}
.sup-picker-item small {
  color: var(--muted, #94a3b8);
  font-size: 0.72rem;
}

/* ── Reports: group / audience controls ── */
.rep-group-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.5rem 0;
}
.rep-chip-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  border: 1px solid var(--border, #e2e8f0);
  background: var(--surface, #fff);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-size: 0.82rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--text, #334155);
}
.rep-chip-toggle.is-active {
  background: var(--accent, #2563eb);
  border-color: var(--accent, #2563eb);
  color: #fff;
}

/* ── Unit (module) report dialog + charts ── */
.rep-aud {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.6rem;
}
.ur-sel {
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.85rem;
  background: var(--surface, #fff);
  color: var(--text, #1e293b);
}
.ur-students {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.8rem;
  max-height: 160px;
  overflow-y: auto;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  padding: 0.5rem 0.7rem;
  margin-bottom: 0.6rem;
}
.ur-stu-chk {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  cursor: pointer;
}
.ur-exports {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.2rem 0 0.7rem;
}
.rep-charts {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  align-items: center;
  margin: 0.4rem 0 1rem;
}
.rep-chart-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.ur-matrix-wrap {
  overflow-x: auto;
}
.ur-matrix {
  font-size: 0.8rem;
}
.ur-matrix th,
.ur-matrix td {
  white-space: nowrap;
  padding: 0.3rem 0.45rem;
  text-align: center;
}
.ur-matrix td.nm,
.ur-matrix .nm {
  text-align: start;
  font-weight: 600;
}
.ur-matrix .g,
td.g {
  background: #d1fae5;
}
.ur-matrix .y,
td.y {
  background: #fef3c7;
}
.ur-matrix .r,
td.r {
  background: #fee2e2;
}
.ur-stick {
  position: sticky;
  inline-size: auto;
  inset-inline-start: 0;
  background: #1e3a8a;
}

/* ── Memorization pace bar (reached vs should-be, with lateness gap) ── */
.rpt-stu-top {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-content: space-between;
}
.rpt-pace {
  margin-top: 0.4rem;
}
.pace {
  font-size: 0.76rem;
}
.pace-track {
  position: relative;
  block-size: 14px;
  border-radius: 7px;
  background: var(--surface-2, #eef2f7);
  border: 1px solid var(--border, #e2e8f0);
  overflow: hidden;
}
.pace-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: 7px;
  transition: inline-size 0.3s;
}
.pace-gap {
  position: absolute;
  inset-block: 0;
  background: repeating-linear-gradient(45deg, #fecaca, #fecaca 4px, #fca5a5 4px, #fca5a5 8px);
}
.pace-target {
  position: absolute;
  inset-block: -2px;
  inline-size: 2px;
  background: #0f172a;
  transform: translateX(-1px);
  z-index: 2;
}
.pace-target::after {
  content: '▾';
  position: absolute;
  inset-block-start: -11px;
  inset-inline-start: -4px;
  font-size: 10px;
  color: #0f172a;
}
.pace-meta {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  margin-top: 0.2rem;
  flex-wrap: wrap;
}
.pace-reached {
  font-weight: 700;
}
.pace-late {
  color: #dc2626;
  font-weight: 700;
}
.pace-ok {
  color: #16a34a;
}

/* ── Report layout system: toolbar, polish, on-screen layouts ── */
.rep-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.rep-tb-spacer {
  flex: 1;
}
.rep-pol-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem 0.9rem;
  margin: 0.2rem 0 0.6rem;
  font-size: 0.78rem;
  color: var(--muted, #64748b);
}
.rep-pol {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
}
.rep-layout-out {
  overflow-x: auto;
}
#repLayout,
#repLayout option {
  font-family: inherit;
}

/* Whole-subject report bar, above the unit list. */
.rep-classbar {
  display: flex;
  justify-content: flex-end;
  margin: 0 0 0.6rem;
}

/* Day/unit grouping inside a report card. */
.rp-sec {
  border-top: 1px dashed var(--border, #e2e8f0);
  padding-top: 0.35rem;
  margin-top: 0.35rem;
}
.rp-sec:first-of-type {
  border-top: 0;
  margin-top: 0;
}
.rp-sec-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted, #64748b);
}
.rp-sec-task {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.83rem;
  padding: 0.22rem 0;
  border-top: 1px solid var(--surface-2, #f1f5f9);
}
.rp-sec-task:first-of-type {
  border-top: 0;
}
.rp-sec-task .muted {
  font-size: 0.75rem;
  white-space: nowrap;
}
.rp-sec-head .g,
.rp-sec-task .g {
  background: #d1fae5;
}
.rp-sec-head .y,
.rp-sec-task .y {
  background: #fef3c7;
}
.rp-sec-head .r,
.rp-sec-task .r {
  background: #fee2e2;
}

/* on-screen report cards */
.rep-layout-out .rp-card,
.ur-matrix-wrap .rp-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  margin: 0.5rem 0;
  background: var(--surface, #fff);
}
.rp-card h3 {
  margin: 0 0 0.4rem;
  font-size: 0.95rem;
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
}
.rp-card ul {
  margin: 0.3rem 0;
  padding-inline-start: 1.1rem;
}
.rp-card li {
  margin: 0.15rem 0;
  font-size: 0.84rem;
}
.rp-card .g {
  background: #d1fae5;
}
.rp-card .y {
  background: #fef3c7;
}
.rp-card .r {
  background: #fee2e2;
}

/* on-screen leaderboard */
.lb-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.6rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin: 0.25rem 0;
}
.lb-rank {
  font-weight: 800;
  inline-size: 34px;
  text-align: center;
  font-size: 1rem;
}
.lb-bar {
  flex: 1;
  block-size: 14px;
  border-radius: 7px;
  background: var(--surface-2, #eef2f7);
  position: relative;
  overflow: hidden;
}
.lb-fill {
  position: absolute;
  inset-block: 0;
  inset-inline-start: 0;
  border-radius: 7px;
}

/* on-screen histogram */
.hist-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0.9rem;
  block-size: 170px;
  padding: 0.6rem 0;
  border-bottom: 2px solid var(--border, #cbd5e1);
}
.hist-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  block-size: 100%;
}
.hist-bar {
  inline-size: 70%;
  border-radius: 6px 6px 0 0;
  min-block-size: 2px;
  transition: block-size 0.3s;
}
.hist-n {
  font-weight: 700;
  font-size: 0.82rem;
}
.hist-lbl {
  font-size: 0.7rem;
  color: var(--muted, #64748b);
  margin-top: 0.25rem;
}

/* checklist box */
.ck-box {
  display: inline-block;
  inline-size: 15px;
  block-size: 15px;
  border: 1.5px solid var(--muted, #475569);
  border-radius: 3px;
}

/* Locked (future-level) memorization task row — shown but not actionable */
.mem-task-row.is-locked {
  opacity: 0.62;
  background: var(--surface-2, #f8fafc);
  border-style: dashed;
}
.mem-task-row.is-locked strong {
  color: var(--muted, #64748b);
}
.mem-task-lock {
  font-size: 0.8rem;
  font-weight: 700;
  color: #64748b;
  background: #e2e8f0;
  padding: 0.35rem 0.65rem;
  border-radius: 9px;
  white-space: nowrap;
}

/* Import memorization task into a unit */
.import-mt-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 380px;
  overflow-y: auto;
}
.import-mt-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 9px;
  background: var(--surface, #fff);
  cursor: pointer;
  font-family: inherit;
  text-align: start;
}
.import-mt-row:hover {
  border-color: var(--accent, #2563eb);
  background: var(--surface-2, #f1f5f9);
}
.import-mt-row[disabled] {
  opacity: 0.5;
  cursor: default;
}
.import-mt-main {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.import-mt-main strong {
  font-size: 0.9rem;
}
.module-content-item.type-memtask .type-icon {
  color: #7c3aed;
}

/* Multi-step plan rows: window (from/to) + together toggle */
.pl-level {
  flex-wrap: wrap;
}
.pl-level .pl-from,
.pl-level .pl-to {
  width: 46px;
}
.pl-level .pl-chunk {
  width: 46px;
}
.pl-level .pl-chunk:disabled {
  opacity: 0.4;
}
.pl-tog-lbl {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.74rem;
  white-space: nowrap;
}
.pl-tog-lbl input {
  margin: 0;
}

/* ── Quick tasks tab ── */
.task-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.task-card {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 12px;
  padding: 0.75rem 0.9rem;
  background: var(--surface, #fff);
}
.task-card.is-done {
  opacity: 0.7;
  background: var(--surface-2, #f8fafc);
}
.task-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.task-card-head strong {
  font-size: 0.95rem;
}
.task-card.is-done .task-card-head strong {
  text-decoration: line-through;
  color: var(--muted, #64748b);
}
.task-acts {
  display: inline-flex;
  gap: 0.15rem;
  flex-shrink: 0;
}
.task-desc {
  margin: 0.4rem 0 0.3rem;
  font-size: 0.85rem;
  color: var(--text, #475569);
  white-space: pre-wrap;
}
.task-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.3rem;
}
.task-prog {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.55rem;
}
.task-prog-bar {
  flex: 1;
  block-size: 8px;
  border-radius: 5px;
  background: var(--surface-2, #eef2f7);
  overflow: hidden;
}
.task-prog-fill {
  block-size: 100%;
  background: #16a34a;
  border-radius: 5px;
  transition: inline-size 0.3s;
}
.task-prog .muted {
  font-size: 0.78rem;
  white-space: nowrap;
}
.task-done-btn {
  flex-shrink: 0;
  border: 1.5px solid var(--accent, #2563eb);
  background: var(--surface, #fff);
  color: var(--accent, #2563eb);
  border-radius: 999px;
  padding: 0.35rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.task-done-btn:hover {
  background: var(--accent, #2563eb);
  color: #fff;
}
.task-done-btn.is-done {
  background: #16a34a;
  border-color: #16a34a;
  color: #fff;
}
.task-done-btn[disabled] {
  opacity: 0.5;
  cursor: default;
}
.task-done-wrap {
  margin-top: 0.8rem;
}
.task-done-wrap > summary {
  cursor: pointer;
  font-size: 0.84rem;
  color: var(--muted, #64748b);
  padding: 0.3rem 0;
}
.task-roster {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  max-height: 360px;
  overflow-y: auto;
  margin-top: 0.5rem;
}
.task-roster-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.5rem;
  border-radius: 7px;
}
.task-roster-row.is-done {
  background: #f0fdf4;
}
.task-roster-name {
  flex: 1;
  font-size: 0.86rem;
}

.module-content-item.type-task .type-icon {
  color: #0891b2;
}
.module-content-item.type-task .task-done-btn {
  padding: 0.2rem 0.6rem;
  font-size: 0.76rem;
}

/* ── Unified "مهامي" portal list ── */
.mt-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.6rem;
}
.mt-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.8rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 11px;
  background: var(--surface, #fff);
}
.mt-row.recitation {
  cursor: pointer;
}
.mt-row.recitation:hover {
  border-color: var(--accent, #2563eb);
}
.mt-row.is-done {
  opacity: 0.62;
}
.mt-row.is-done .mt-main strong {
  text-decoration: line-through;
}
.mt-ic {
  flex-shrink: 0;
  color: var(--muted, #64748b);
  display: inline-flex;
}
.mt-row.recitation .mt-ic {
  color: #7c3aed;
}
.mt-row.task .mt-ic {
  color: #0891b2;
}
.mt-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.mt-main strong {
  font-size: 0.9rem;
}
.mt-main small {
  font-size: 0.78rem;
}
.mt-side {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-shrink: 0;
}

/* ── Tracker plans (مهامي) ── */
.mt-plans {
  margin: 0.4rem 0 0.8rem;
}
.mt-plans-h {
  font-size: 0.92rem;
  margin: 0 0 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.mt-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.5rem;
}
.mt-plan-card {
  text-align: start;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 11px;
  padding: 0.6rem 0.75rem;
  background: var(--surface, #fff);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  font-family: inherit;
}
.mt-plan-card:hover {
  border-color: var(--accent, #2563eb);
}
.mt-plan-card strong {
  font-size: 0.88rem;
}
.mt-plan-bar {
  block-size: 7px;
  border-radius: 5px;
  background: var(--surface-2, #eef2f7);
  overflow: hidden;
  margin: 0.25rem 0;
}
.mt-plan-fill {
  block-size: 100%;
  background: #16a34a;
  border-radius: 5px;
  transition: inline-size 0.3s;
}
.trk-head {
  margin-bottom: 0.7rem;
}
.trk-head strong {
  font-size: 1rem;
}
.trk-body {
  max-height: 60vh;
  overflow-y: auto;
}
.trk-sec {
  margin-bottom: 0.8rem;
}
.trk-sec h4 {
  margin: 0 0 0.35rem;
  font-size: 0.9rem;
  color: var(--accent, #2563eb);
}
.trk-item,
.trk-day {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  padding: 0.45rem 0.55rem;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin-bottom: 0.3rem;
  cursor: pointer;
  font-size: 0.85rem;
}
.trk-item input,
.trk-day input {
  margin-top: 0.15rem;
  flex-shrink: 0;
}
.trk-item.is-done,
.trk-day.is-done {
  background: #f0fdf4;
  opacity: 0.75;
}
.trk-item.is-done span {
  text-decoration: line-through;
}
.trk-days {
  display: flex;
  flex-direction: column;
}

/* ════════════════ POLISH PASS — a11y, dark-mode, consistency ════════════════ */

/* Keyboard focus for every custom interactive control (was missing app-wide). */
:where(
  button,
  a,
  [role='button'],
  summary,
  .tab-button,
  .nav-link,
  .icon-btn,
  .subhub-mini,
  .modal-btn,
  .task-done-btn,
  .rep-tab,
  .mt-row,
  .subject-card,
  .upcoming-row,
  .mt-plan-card
):focus-visible {
  outline: 2px solid var(--accent, #2563eb);
  outline-offset: 2px;
  border-radius: 6px;
}

/* Animated loading + themed loading/error boxes (were white-only). */
.course-loading {
  background: var(--surface);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.course-loading::before {
  content: '';
  width: 18px;
  height: 18px;
  border: 2.5px solid var(--border);
  border-top-color: var(--accent, #2563eb);
  border-radius: 50%;
  animation: cl-spin 0.7s linear infinite;
}
@keyframes cl-spin {
  to {
    transform: rotate(360deg);
  }
}
.course-error {
  background: var(--surface);
  color: #dc2626;
  border: 1px solid color-mix(in srgb, #dc2626 30%, transparent);
  border-radius: 10px;
  padding: 1rem;
  text-align: center;
}

/* Larger tap targets for tiny icon buttons. */
.icon-btn,
.grp-sup-add,
.grp-sup-x {
  min-width: 32px;
  min-height: 32px;
}
.mem-q-dot {
  min-width: 30px;
  min-height: 30px;
}

/* RTL-correct toast container. */
.portal-toast {
  inset-inline: 0;
}

/* Floating staff picker must not overflow small screens. */
.sup-picker {
  max-width: calc(100vw - 24px);
}

/* ── Dark-mode repairs for the newer feature blocks (hardcoded pastels/whites) ── */
:root[data-theme='dark'] .course-loading,
:root[data-theme='dark'] .course-error {
  background: var(--surface);
}
:root[data-theme='dark'] .rec-card {
  background: linear-gradient(135deg, #1e2733, var(--surface));
  border-color: var(--border);
}
:root[data-theme='dark'] .mem-review-banner {
  background: color-mix(in srgb, #2563eb 18%, var(--surface));
}
:root[data-theme='dark'] td.g,
:root[data-theme='dark'] .ur-matrix .g,
:root[data-theme='dark'] .rp-card .g,
:root[data-theme='dark'] .lb-fill {
  background: color-mix(in srgb, #16a34a 28%, var(--surface));
}
:root[data-theme='dark'] td.y,
:root[data-theme='dark'] .ur-matrix .y,
:root[data-theme='dark'] .rp-card .y {
  background: color-mix(in srgb, #f59e0b 26%, var(--surface));
}
:root[data-theme='dark'] td.r,
:root[data-theme='dark'] .ur-matrix .r,
:root[data-theme='dark'] .rp-card .r {
  background: color-mix(in srgb, #dc2626 26%, var(--surface));
}
:root[data-theme='dark'] .trk-item.is-done,
:root[data-theme='dark'] .trk-day.is-done,
:root[data-theme='dark'] .task-roster-row.is-done {
  background: color-mix(in srgb, #16a34a 18%, var(--surface));
}
:root[data-theme='dark'] .gradebook-table td:first-child {
  background: var(--surface);
}
:root[data-theme='dark'] .rep-name,
:root[data-theme='dark'] .ur-stick {
  background: var(--surface);
}

/* ── Visual memorization-baseline editor (openMemBaseline) ── */
.mbg-top {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.mbg-top select {
  flex: 1 1 200px;
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
}
.mbg-summary {
  font-size: 0.9rem;
  color: var(--muted, #64748b);
  margin: 0.2rem 0 0.6rem;
}
.mbg-summary strong {
  color: var(--text);
  font-size: 1.05rem;
}
.mbg-palette {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.55rem 0.6rem;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border);
  border-radius: 12px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.mbg-pal-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted, #64748b);
  margin-inline-end: 0.2rem;
}
.mbg-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.32rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--c) 55%, var(--border));
  background: color-mix(in srgb, var(--c) 18%, var(--surface));
  color: var(--text);
  border-radius: 999px;
  font: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  transition:
    transform 0.08s ease,
    box-shadow 0.12s ease;
}
.mbg-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.mbg-chip:active {
  transform: translateY(0);
}
.mbg-dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--c);
  border: 1px solid rgba(0, 0, 0, 0.12);
  flex: none;
}
.mbg-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0.4rem;
}
.mbg-grid {
  max-height: 50vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-inline-end: 0.2rem;
}
.mbg-sec {
  /* flex:none so a tall work (e.g. 604 Qur'an pages) keeps each section at natural
     height and the grid scrolls — without it, the flex column shrinks every section
     into a thin strip once content exceeds max-height. */
  flex: 0 0 auto;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface);
}
.mbg-sec-head {
  display: block;
  width: 100%;
  text-align: start;
  padding: 0.45rem 0.7rem;
  background: var(--surface-2, #f1f5f9);
  border: none;
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
}
.mbg-sec-head small {
  color: var(--muted, #64748b);
  font-weight: 500;
}
.mbg-sec-head:hover {
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--surface-2, #f1f5f9));
}
.mbg-cells {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(42px, 1fr));
  gap: 0.35rem;
  padding: 0.6rem;
}
.mbg-cell {
  aspect-ratio: 1;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid color-mix(in srgb, var(--c) 60%, var(--border));
  border-radius: 8px;
  background: color-mix(in srgb, var(--c) 40%, var(--surface));
  color: var(--text);
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform 0.06s ease,
    box-shadow 0.1s ease;
}
.mbg-cell:hover {
  transform: scale(1.06);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15);
}
.mbg-cell.is-sel {
  outline: 3px solid var(--accent, #2563eb);
  outline-offset: -1px;
  box-shadow: 0 0 0 2px var(--surface) inset;
}

/* ── Multi-pattern plan wizard (openMemPlanWizard) ── */
.wz-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 0.45rem;
}
.wz-card {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  text-align: start;
  padding: 0.5rem 0.6rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition:
    border-color 0.12s,
    background 0.12s,
    transform 0.08s;
}
.wz-card:hover {
  transform: translateY(-1px);
}
.wz-card strong {
  font-size: 0.9rem;
}
.wz-card small {
  font-size: 0.72rem;
  color: var(--muted, #64748b);
  line-height: 1.3;
}
.wz-card.is-on {
  border-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--surface));
}
.wz-params {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
  padding: 0.55rem 0.6rem;
  background: var(--surface-2, #f1f5f9);
  border-radius: 10px;
}
.wz-segs {
  flex-direction: column;
  align-items: stretch;
}
.wz-seg {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.wz-steps {
  max-height: 38vh;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.wz-step {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.3rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  flex-wrap: wrap;
}
.wz-kind {
  flex: none;
  font-size: 0.72rem;
  font-weight: 700;
  color: #fff;
  background: var(--c);
  border-radius: 999px;
  padding: 0.1rem 0.5rem;
}
.wz-step .wz-title {
  flex: 1 1 90px;
  min-width: 80px;
}
.wz-step select,
.wz-step input {
  font-size: 0.78rem;
}
.wz-steps-actions {
  margin-top: 0.4rem;
}
.wz-warn-bad {
  color: #dc2626;
  font-weight: 700;
}

/* Wizard preview column: keep the step list from being crushed when the student
   list fills (flex-column + max-height would otherwise shrink #wzSteps to zero). */
.wz-grid .mb-preview-head,
.wz-steps-actions {
  flex: 0 0 auto;
}
.wz-grid .wz-steps {
  flex: 1 1 auto;
  min-height: 120px;
}
.wz-grid #wzStu {
  flex: 0 1 auto;
  max-height: 26vh;
  overflow: auto;
}
.wz-tpl-bar {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-bottom: 0.5rem;
}
.wz-tpl-bar select {
  flex: 1;
}

/* Grouped memorization-task import picker (plan steps / batches) */
.import-mt-group {
  margin-bottom: 0.6rem;
}
.import-mt-grouphead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  padding: 0.3rem 0.2rem;
  font-size: 0.82rem;
  color: var(--muted, #64748b);
  border-bottom: 1px solid var(--border);
  margin-bottom: 0.3rem;
  position: sticky;
  top: 0;
  background: var(--surface);
  z-index: 1;
}
.import-mt-grouphead strong {
  color: var(--text);
}

/* Unit-report section filter */
.ur-sections {
  margin: 0.5rem 0;
}
.ur-sec-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 0.6rem;
  background: var(--surface-2, #f1f5f9);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ur-sec-lbl {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--muted, #64748b);
}
.ur-sec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.82rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.22rem 0.6rem;
  cursor: pointer;
  background: var(--surface);
}
.ur-sec-chip.is-on {
  border-color: var(--accent, #2563eb);
  background: color-mix(in srgb, var(--accent, #2563eb) 12%, var(--surface));
}
.ur-sec-chip input {
  display: none;
}

/* ── Parent report-card builder (teacher) + preview ── */
.rc-builder {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 16px;
  align-items: start;
}
.rc-config {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.rc-settings {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rc-block-row {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  margin-bottom: 0.5rem;
  background: var(--surface);
}
.rc-block-row.is-off {
  opacity: 0.55;
}
.rc-block-head {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.rc-block-head strong {
  font-size: 0.9rem;
}
.rc-title-in {
  flex: 1 1 120px;
  min-width: 90px;
  font-size: 0.82rem;
  padding: 0.25rem 0.4rem;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.rc-block-opts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.5rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--border);
}
.rc-mini,
.rc-chk {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
}
.rc-mini select,
.rc-mini input {
  font-size: 0.8rem;
}
.rc-note-in {
  width: 100%;
  font-size: 0.82rem;
  padding: 0.35rem 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  resize: vertical;
}
.rc-up,
.rc-down {
  min-width: 26px;
  padding: 0;
  font-size: 0.7rem;
}
.rc-band-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.rc-band-row input[type='text'],
.rc-band-row input:not([type]) {
  flex: 1;
  font-size: 0.84rem;
  padding: 0.3rem 0.45rem;
  border: 1px solid var(--border);
  border-radius: 7px;
}
.rc-band-row input[type='color'] {
  width: 38px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 6px;
}
.rc-save-bar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.rc-preview {
  position: sticky;
  top: 12px;
}
.rc-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
/* Preview card (mirrors the parent view) */
.rc-preview-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.rc-card-head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 10px;
  margin-bottom: 12px;
}
.rc-card-head strong {
  font-size: 1.15rem;
}
.rc-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(90px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.rc-tile {
  background: color-mix(in srgb, var(--c) 12%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--border));
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}
.rc-tile-v {
  display: block;
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--c);
}
.rc-tile-l {
  display: block;
  font-size: 0.72rem;
  color: var(--muted, #64748b);
  margin-top: 2px;
}
.rc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.rc-b-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted, #64748b);
}
.rc-val {
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.rc-pill {
  font-size: 0.78rem;
  font-weight: 700;
  color: #fff;
  background: var(--c);
  border-radius: 999px;
  padding: 0.12rem 0.6rem;
}
.rc-subrows {
  padding: 4px 0 8px;
}
.rc-subrow {
  display: flex;
  justify-content: space-between;
  font-size: 0.8rem;
  color: var(--muted, #64748b);
  padding: 2px 0;
}
.rc-block {
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}
.rc-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: 4px;
}
.rc-li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  font-size: 0.84rem;
}
.rc-empty {
  font-size: 0.8rem;
  padding: 4px 0;
}
.rc-callout {
  background: color-mix(in srgb, var(--accent, #2563eb) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--accent, #2563eb) 30%, var(--border));
  border-radius: 12px;
  padding: 10px 12px;
  margin: 8px 0;
}
.rc-callout-v {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--accent, #2563eb);
}
.rc-note {
  background: var(--surface-2, #f1f5f9);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 0.9rem;
  margin-top: 8px;
  white-space: pre-wrap;
}
@media (max-width: 860px) {
  .rc-builder {
    grid-template-columns: 1fr;
  }
  .rc-preview {
    position: static;
  }
}

/* Profile avatar image (admin-uploaded) + change-password form
   ------------------------------------------------------------
   A photo fills its slot edge to edge and takes the slot's OWN shape via
   border-radius: inherit — so it is a circle in the round slots and a rounded
   square in .hello-avatar, and the container's tinted backdrop can never peek
   out from behind it. */
.avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
/* Slots that carry their own fill, ring or blur must drop all of it once a photo
   is in them, otherwise that decoration frames the photo as a visible backdrop.
   The initials placeholder keeps its styling untouched — this only ever applies
   to a slot that actually holds an image. */
.hello-avatar:has(> .avatar-img),
.avatar-initials:has(> .avatar-img),
.staff-avatar:has(> .avatar-img),
.student-avatar:has(> .avatar-img),
.mg-avatar:has(> .avatar-img),
.overview-avatar:has(> .avatar-img) {
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  padding: 0;
  overflow: hidden;
}
/* Belt and braces for engines without :has() — the image still covers the slot
   completely, so at worst a hairline of the old border shows rather than a
   full backdrop. */
.hello-avatar > .avatar-img,
.avatar-initials > .avatar-img,
.staff-avatar > .avatar-img,
.student-avatar > .avatar-img,
.mg-avatar > .avatar-img,
.overview-avatar > .avatar-img {
  position: relative;
  z-index: 1;
}
/* .mg-avatar overlaps its neighbours with a panel-coloured ring; keep that ring
   on photos too, since it is what separates the stacked chips. */
.mg-avatar:has(> .avatar-img) {
  border: 2px solid var(--panel-bg);
}
/* Inline person circle used across the list surfaces (attendance, rosters,
   group chips, peer review). Holds a photo when there is one and the initials
   otherwise, so a list reads the same either way. */
.p-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  overflow: hidden;
  background: color-mix(in srgb, var(--accent, #8bc53f) 22%, var(--panel-bg, #fff));
  color: var(--ink, #0f172a);
  font-size: 0.66rem;
  font-weight: 700;
  line-height: 1;
  vertical-align: middle;
  margin-inline-end: 7px;
}
.p-avatar:has(> .avatar-img) {
  background: none;
}
/* The attendance sheet is the one place worth a larger face — it is used to
   identify students in the room. */
.att-name .p-avatar {
  width: 34px;
  height: 34px;
  font-size: 0.78rem;
}
.avatar-img[data-photo-full] {
  cursor: zoom-in;
}
.avatar-btn .avatar-img[data-photo-full] {
  cursor: pointer;
}

/* Anything that opens a student card. Only rendered for staff, so a student
   never sees a pointer on a classmate. */
[data-profile] {
  cursor: pointer;
}
.student-item[data-profile]:hover {
  background: color-mix(in srgb, var(--accent, #8bc53f) 10%, transparent);
}
.student-item[data-profile]:focus-visible {
  outline: 2px solid var(--accent, #8bc53f);
  outline-offset: 2px;
}

/* Student card (teacher / supervisor view) */
.sp-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-block-end: 14px;
  border-block-end: 1px solid var(--line, #e2e8f0);
}
.sp-photo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--accent, #8bc53f) 22%, var(--panel-bg, #fff));
  font-weight: 800;
  font-size: 1.5rem;
}
.sp-photo:has(> .avatar-img) {
  background: none;
}
.sp-ident h4 {
  margin: 0 0 3px;
  font-size: 1.05rem;
}
.sp-code {
  font-size: 0.82rem;
  color: var(--muted, #64748b);
  font-weight: 600;
}
.sp-rows {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-block: 12px;
}
.sp-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding-block: 5px;
  font-size: 0.9rem;
}
.sp-label {
  color: var(--muted, #64748b);
  font-size: 0.82rem;
  font-weight: 600;
}
.sp-value {
  font-weight: 600;
  text-align: end;
}
.sp-subjects {
  padding-block-start: 10px;
  border-block-start: 1px solid var(--line, #e2e8f0);
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.sp-subjects > div {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* Enlarged profile photo */
.photo-viewer {
  position: fixed;
  inset: 0;
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: rgba(15, 23, 42, 0.82);
  backdrop-filter: blur(3px);
}
.photo-viewer__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 100%;
}
.photo-viewer__figure img {
  max-width: min(560px, 88vw);
  max-height: 76vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 14px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.45);
  background: #fff;
}
.photo-viewer__figure figcaption {
  color: #f8fafc;
  font-size: 0.95rem;
  font-weight: 600;
  text-align: center;
}
.photo-viewer__close {
  position: absolute;
  top: 14px;
  inset-inline-end: 16px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.7rem;
  line-height: 1;
  color: #f8fafc;
  background: rgba(255, 255, 255, 0.14);
  font-family: inherit;
}
.photo-viewer__close:hover {
  background: rgba(255, 255, 255, 0.26);
}
.cp-form {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.cp-field {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  font-size: 0.85rem;
  font-weight: 600;
}
.cp-field input {
  padding: 0.5rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 9px;
  background: var(--surface);
  color: var(--text);
  font: inherit;
  font-weight: 400;
}
.cp-meter {
  height: 5px;
  border-radius: 999px;
  background: var(--surface-2, #e5e7eb);
  overflow: hidden;
}
.cp-meter-fill {
  height: 100%;
  width: 0;
  border-radius: 999px;
  transition:
    width 0.2s,
    background 0.2s;
}
.cp-hint {
  font-size: 0.76rem;
}
.cp-msg {
  font-size: 0.82rem;
  min-height: 1em;
}
.cp-msg.cp-err {
  color: #dc2626;
  font-weight: 600;
}

/* Forced change: says plainly why the student is being stopped. */
.cp-notice {
  padding: 0.6rem 0.7rem;
  border-radius: 9px;
  background: #fef3c7;
  border: 1px solid #fde68a;
  color: #92400e;
  font-size: 0.8rem;
  line-height: 1.6;
}

/* Live requirement checklist. Carries the guidance the meter cannot. */
.cp-rules {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.cp-rule {
  font-size: 0.76rem;
  color: var(--muted, #6b7280);
}
.cp-rule.is-ok {
  color: #16a34a;
  font-weight: 600;
}

/* Show/hide toggle sitting inside the field. Students mistype what they cannot
   see, and a wrong current-password guess costs a rate-limited attempt. */
.cp-field {
  position: relative;
}
.cp-field input {
  padding-inline-end: 2.3rem;
}
.cp-reveal {
  position: absolute;
  inset-inline-end: 0.4rem;
  bottom: 0.32rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--muted, #6b7280);
  cursor: pointer;
}
.cp-reveal:hover {
  background: var(--surface-2, #e5e7eb);
  color: var(--text);
}
.cp-reveal .ic {
  width: 17px;
  height: 17px;
}

/* Gradebook columns manager */
.gbc-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.6rem;
}
.gbc-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 10px;
  flex-wrap: wrap;
}
.gbc-main {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex: 1 1 240px;
  min-width: 0;
}
.gbc-badge {
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  white-space: nowrap;
}
.gbc-cat {
  flex: 0 0 auto;
  max-width: 170px;
}
.gbc-acts {
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.gbc-add {
  border: 1px dashed var(--border, #cbd5e1);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
}
.gbc-add > summary {
  cursor: pointer;
  font-weight: 700;
}
.gbc-scores {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 55vh;
  overflow-y: auto;
}
.gbc-score-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.gbc-score-row input {
  width: 90px;
}

.gbc-row--hidden {
  opacity: 0.62;
  background: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 8px,
    rgba(148, 163, 184, 0.08) 8px,
    rgba(148, 163, 184, 0.08) 16px
  );
}

/* ── Multi-rule memorization plan editor (openMemPlanRules) ── */
.mpr-mode {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-block-end: 12px;
  padding-block-end: 10px;
  border-block-end: 1px solid var(--border, #e2e8f0);
}
.mpr-rules {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.mpr-rule {
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 10px;
  padding: 12px;
  background: rgba(148, 163, 184, 0.05);
}
.mpr-rule-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-block-end: 8px;
}
.mpr-label {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  font: inherit;
}
.mpr-row {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-end;
  margin-block-end: 8px;
}
.mpr-targets {
  border-block-start: 1px dashed var(--border, #e2e8f0);
  padding-block-start: 8px;
}
.mpr-tsub {
  margin-block-start: 6px;
}
.mpr-stu-wrap {
  margin-block-start: 6px;
}
.mpr-stu-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 2px 12px;
  max-block-size: 200px;
  overflow-y: auto;
  padding: 8px;
  border: 1px solid var(--border, #e2e8f0);
  border-radius: 8px;
  margin-block-start: 4px;
}
.mpr-stu {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
}
.mpr-warn {
  margin-block: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  background: rgba(37, 99, 235, 0.08);
  font-size: 0.9rem;
}
.mpr-warn--err {
  color: #b91c1c;
  background: rgba(220, 38, 38, 0.08);
}

/* ═══════════════════════════════════════════════════════════════
   P5 — WARM ACADEMIC: hero moments, tiles, buttons + mobile pass
   Appended last so it wins specificity ties. Fonts unchanged (Cairo).
   ═══════════════════════════════════════════════════════════════ */

/* ── Login: split-hero ─────────────────────────────────── */
.portal-login {
  background:
    radial-gradient(120% 80% at 15% 15%, rgba(var(--accent-rgb), 0.1), transparent 55%),
    radial-gradient(110% 90% at 85% 85%, rgba(var(--brand-rgb), 0.08), transparent 55%), var(--page-bg);
}
.login-card {
  max-width: 900px;
  padding: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  background: var(--panel-bg);
  box-shadow: var(--sh-lg);
  border: 1px solid var(--line);
}
.login-brand {
  position: relative;
  overflow: hidden;
  color: #fff;
  padding: 46px 42px;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 90% at 85% 12%, rgba(var(--accent-rgb), 0.24), transparent 55%),
    linear-gradient(150deg, var(--brand-2), var(--brand-deep));
}
.login-brand::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--pattern);
  background-size: 58px 58px;
  -webkit-mask-image: radial-gradient(120% 100% at 80% 20%, #000 30%, transparent 78%);
  mask-image: radial-gradient(120% 100% at 80% 20%, #000 30%, transparent 78%);
}
.login-brand > * {
  position: relative;
}
.login-brand-logo img {
  height: 46px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.95;
}
.login-brand-spacer {
  flex: 1;
  min-height: 40px;
}
.login-brand-title {
  font-size: 2.1rem;
  font-weight: 800;
  line-height: 1.3;
  letter-spacing: -0.01em;
  margin: 0 0 12px;
  text-wrap: balance;
}
.login-brand-title span {
  color: var(--accent-2);
}
.login-brand-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.8;
  opacity: 0.82;
  max-width: 34ch;
}
.login-body {
  padding: 44px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.login-header {
  text-align: center;
  margin-bottom: 22px;
}
.login-logo {
  justify-content: center;
  margin-bottom: 10px;
}
.login-logo img {
  height: 44px;
}
.login-header h1 {
  font-size: 1.5rem;
}
.login-form input[type='text'],
.login-form input[type='password'] {
  background: var(--page-bg);
  border-width: 1.5px;
}
.login-form input:focus {
  background: var(--panel-bg);
}
.btn-primary {
  background: linear-gradient(135deg, var(--color-secondary-light), var(--color-secondary));
  box-shadow: 0 10px 22px -10px rgba(var(--brand-rgb), 0.7);
  transition:
    transform 0.12s var(--anim-ease-out, ease),
    box-shadow 0.2s ease,
    filter 0.2s ease;
}
.btn-primary:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-secondary-light), var(--color-secondary));
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 14px 28px -10px rgba(var(--brand-rgb), 0.8);
}

/* ── Geometric pattern on pine hero moments ────────────── */
.nav-inner {
  position: relative;
  z-index: 1;
}
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--pattern);
  background-size: 52px 52px;
  opacity: 0.5;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000, transparent 62%);
  mask-image: linear-gradient(90deg, #000, transparent 62%);
}
.hello {
  box-shadow: var(--sh-lg);
}
.hello > * {
  position: relative;
  z-index: 1;
}
.hello::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--pattern);
  background-size: 60px 60px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(130% 120% at 85% 10%, #000 20%, transparent 72%);
  mask-image: radial-gradient(130% 120% at 85% 10%, #000 20%, transparent 72%);
}
.hello-text h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
}
.course-hero {
  box-shadow: var(--sh-lg);
}
.course-hero > * {
  position: relative;
  z-index: 1;
}
.course-hero::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: var(--pattern);
  background-size: 58px 58px;
  pointer-events: none;
  -webkit-mask-image: radial-gradient(120% 120% at 85% 10%, #000 20%, transparent 70%);
  mask-image: radial-gradient(120% 120% at 85% 10%, #000 20%, transparent 70%);
}
.course-hero-content h1 {
  font-weight: 800;
  letter-spacing: -0.01em;
}

/* ── Panels & cards: warm surface + softer depth ───────── */
.panel,
.overview-section,
.subjects-section,
.course-card,
.stat-card {
  box-shadow: var(--sh-sm);
}
.stat-card:hover {
  box-shadow: var(--sh-md);
  transform: translateY(-2px);
}
.stat-value {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.stat-icon {
  background: var(--accent-soft);
  color: var(--accent);
}

/* Subject tiles are already color-coded per course via JS
   (--course-banner / --course-accent, see courseColor()); just
   deepen the resting elevation to match the new card system. */
.subject-card {
  box-shadow: var(--sh-sm);
}
.subject-card:hover {
  box-shadow: var(--sh-md);
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE — thorough responsive pass
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 860px) {
  .login-card {
    grid-template-columns: 1fr;
    max-width: 460px;
  }
  .login-brand {
    padding: 26px 28px;
    min-height: 150px;
  }
  .login-brand-spacer {
    min-height: 14px;
  }
  .login-brand-title {
    font-size: 1.55rem;
    margin-bottom: 6px;
  }
  .login-brand-sub {
    display: none;
  }
  .login-body {
    padding: 30px 26px 26px;
  }
}

@media (max-width: 768px) {
  .portal-main {
    padding: 16px 14px 40px;
  }
  .hello {
    padding: 20px;
  }
  .hello-text h1 {
    font-size: 1.35rem;
  }
  /* Padding belongs to the row, not the hero — the hero's box is what the banner
     strip bleeds to, so padding here would inset the image on every phone. */
  .course-hero-row {
    padding: 20px;
    gap: 14px;
  }
  .course-hero-icon {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
  }
  .course-hero-content h1 {
    font-size: 1.3rem;
  }
  .overview-section,
  .subjects-section,
  .course-card,
  .panel {
    padding: 18px 16px;
    border-radius: 14px;
  }
  .stats-row,
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }
  .subjects-grid {
    grid-template-columns: 1fr;
  }
  .nav-icon-btn,
  .avatar-btn,
  .icon-btn,
  .tab-button,
  .complete-btn,
  .modal-btn,
  .btn-ghost {
    min-height: 44px;
  }
  .tab-strip,
  .course-rail {
    position: sticky;
    top: var(--nav-h);
    z-index: 20;
  }
}

@media (max-width: 600px) {
  .portal-modal-overlay {
    align-items: flex-end;
    padding: 0;
  }
  .portal-modal {
    max-width: 100%;
    border-radius: 20px 20px 0 0;
    max-height: 92vh;
    animation: portal-sheet-up 0.28s var(--anim-ease-out, cubic-bezier(0.23, 1, 0.32, 1));
  }
  .portal-modal-header {
    position: sticky;
    top: 0;
    background: var(--panel-bg);
    z-index: 1;
  }
  .portal-modal-footer {
    position: sticky;
    bottom: 0;
    background: var(--panel-bg);
  }
  .portal-toast {
    bottom: 16px;
    max-width: calc(100% - 24px);
  }
  .stat-value {
    font-size: 1.2rem;
  }
}

@media (max-width: 460px) {
  .hello {
    flex-wrap: wrap;
  }
  .login-brand {
    display: none;
  }
  .login-card {
    border-radius: 18px;
  }
  .portal-modal-body {
    padding: 16px;
  }
}

@keyframes portal-sheet-up {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .portal-modal {
    animation: none;
  }
}

/* Guard: never let wide content scroll the whole page sideways */
.portal-app,
.portal-login {
  overflow-x: clip;
}

/* ═══════════════════════════════════════════════════════════════
   P6 — polish pass: numeric legibility + dark-mode surface fixes
   ═══════════════════════════════════════════════════════════════ */

/* Keep "score / max" fractions in reading order regardless of digit
   system (Arabic-Indic numerals otherwise reverse around the slash). */
.grade-item-score,
.grade-banner-score,
.attempt-score,
.qz-grade-total,
.qz-rev-pts,
.qg-pts,
.my-day-item .chip--success,
.module-progress-label {
  direction: ltr;
  unicode-bidi: isolate-override;
}

/* Grade rows + sticky gradebook column were pinned to #fff and inverted
   badly in dark; ride the surface token so both themes stay clean. */
.grade-items-list li,
.gradebook-table th:first-child,
.gradebook-table td:first-child {
  background: var(--panel-bg);
}

/* ═══════════════════════════════════════════════════════════════
   P7 — simplified navigation: tab pages + mobile bottom bar
   ═══════════════════════════════════════════════════════════════ */

/* Home is now a focused single-column dashboard (greeting + this-week). */
.home-empty {
  text-align: center;
  padding: 52px 20px;
  color: var(--ink-soft);
}
.home-empty-ic {
  width: 58px;
  height: 58px;
  margin: 0 auto 14px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--sage) 16%, transparent);
  color: var(--sage);
}
.home-empty-ic svg {
  width: 28px;
  height: 28px;
}
.home-empty p {
  margin: 0;
  font-size: 0.95rem;
}

/* This-week: one prioritized feed instead of three columns. */
.my-day-feed {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.feed-group-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
  margin-top: 8px;
}
.feed-group-label:first-child {
  margin-top: 0;
}
.my-day-feed .my-day-item {
  width: 100%;
}

/* Profile fields shown in a modal (moved off the home page). */
.profile-fields--modal {
  grid-template-columns: 1fr 1fr;
  margin: 0;
  gap: 12px 20px;
}

/* ── Mobile bottom tab bar ─────────────────────────────── */
.mobile-tabbar {
  display: none;
}
.more-tabs-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.more-tab {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 12px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--ink);
  font-weight: 600;
}
.more-tab:hover {
  background: var(--page-bg);
}
.more-tab-ic {
  display: inline-flex;
  color: var(--brand);
}
:root[data-theme='dark'] .more-tab-ic {
  color: var(--accent);
}
.more-tab-ic svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  /* Top primary nav is replaced by the fixed bottom bar on mobile. */
  .nav-primary {
    display: none;
  }
  .mobile-tabbar {
    display: flex;
    position: fixed;
    inset-inline: 0;
    bottom: 0;
    z-index: 60;
    background: var(--panel-bg);
    border-top: 1px solid var(--line);
    box-shadow: 0 -4px 16px rgba(12, 45, 36, 0.08);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }
  .mtab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 8px 2px 6px;
    min-height: 54px;
    text-decoration: none;
    color: var(--ink-soft);
    background: none;
    border: none;
    font-family: inherit;
    cursor: pointer;
    transition: color 0.15s;
  }
  .mtab-ic {
    display: inline-flex;
  }
  .mtab-ic svg {
    width: 22px;
    height: 22px;
  }
  .mtab-lbl {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
  }
  .mtab.is-active {
    color: var(--brand);
  }
  :root[data-theme='dark'] .mtab.is-active {
    color: var(--accent);
  }

  /* Keep page content clear of the fixed bottom bar. */
  .portal-main {
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }
  .portal-toast {
    bottom: calc(74px + env(safe-area-inset-bottom, 0px));
  }
}

/* ═══════════════════════════════════════════════════════════════
   P8 — student course overview: lead with "what's due", compact staff
   (staff/supervisors keep the fuller management-oriented order)
   ═══════════════════════════════════════════════════════════════ */
.overview--student #courseAnnouncementsSection {
  order: -2;
}
.overview--student #overviewUpcomingCard {
  order: -1;
}

/* Compact the staff list into a wrapping row of pills for students. */
.overview--student #overviewStaffCard h2 {
  font-size: 0.98rem;
}
.overview--student #overviewStaffCard .staff-list {
  flex-direction: row;
  flex-wrap: wrap;
}
.overview--student #overviewStaffCard .staff-item {
  padding: 6px 12px 6px 8px;
  border-radius: 999px;
  gap: 8px;
}
.overview--student #overviewStaffCard .staff-avatar {
  width: 28px;
  height: 28px;
  font-size: 0.78rem;
}
.overview--student #overviewStaffCard .staff-role {
  font-size: 0.7rem;
  margin-top: 1px;
}

/* ═══════════════════════════════════════════════════════════════
   P9 — specialized student to-do (مهامي page + home feed).
   Type conveyed by color stripe + icon + small word; one row shared.
   ═══════════════════════════════════════════════════════════════ */
.tk-summary {
  color: var(--ink-soft);
  font-size: 0.9rem;
  margin: 0.2rem 0 0.7rem;
}
.tk-summary b {
  color: var(--ink);
  font-weight: 800;
}
.tk-summary .od {
  color: #dc2626;
  font-weight: 800;
}
:root[data-theme='dark'] .tk-summary .od {
  color: #f87171;
}

.tk-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 14px;
}
.tk-lg {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 3px 10px 3px 8px;
  border-radius: 999px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  color: var(--ink-soft);
}
.tk-lg i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}

.tk-filters {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.tk-filters select {
  padding: 9px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--panel-bg);
  color: var(--ink);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
}

.tk-subj {
  margin-bottom: 18px;
}
.tk-subj-head {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 9px;
  padding-inline-start: 4px;
}
.tk-subj-dot {
  width: 11px;
  height: 11px;
  border-radius: 4px;
  background: var(--sc);
  flex-shrink: 0;
}
.tk-subj-head h2 {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 0;
  color: var(--ink);
}

.tk-plan {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-sm);
  overflow: hidden;
  margin-bottom: 11px;
}
.tk-plan-head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 15px;
  border-bottom: 1px solid var(--line);
}
.tk-plan-ic {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--sc) 15%, transparent);
  color: var(--sc);
  display: flex;
  align-items: center;
  justify-content: center;
}
.tk-plan-t {
  font-weight: 800;
  font-size: 0.94rem;
  color: var(--ink);
}
.tk-plan-m {
  color: var(--ink-soft);
  font-size: 0.78rem;
  margin-inline-start: auto;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
}
.tk-pbar {
  width: 56px;
  height: 6px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
}
.tk-pbar i {
  display: block;
  height: 100%;
  background: var(--sc);
  border-radius: 999px;
}
.tk-chain {
  padding: 6px 12px 10px;
}
.tk-loose {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-sm);
  padding: 4px 12px;
  margin-bottom: 11px;
}

.tk-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 12px;
  border-radius: 12px;
  transition: background 0.15s;
}
.tk-row:hover {
  background: var(--page-bg);
}
.tk-row.is-locked,
.tk-row.is-opt {
  opacity: 0.7;
}
.tk-row::before {
  content: '';
  position: absolute;
  inset-block: 10px;
  inset-inline-start: 0;
  width: 4px;
  border-radius: 4px;
  background: var(--tc);
}
.tk-chain .tk-row.tk-step {
  margin-inline-start: 16px;
}
.tk-chain .tk-row.tk-step::after {
  content: '';
  position: absolute;
  inset-inline-start: -8px;
  top: -11px;
  height: 22px;
  width: 2px;
  background: var(--line-strong);
}
.tk-chain .tk-row.tk-step.is-first::after {
  display: none;
}
.tk-loose .tk-row + .tk-row,
.tk-body .tk-row + .tk-row {
  border-top: 1px solid var(--line);
}
.tk-ic {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tc) 13%, transparent);
  color: var(--tc);
  margin-inline-start: 6px;
}
.tk-main {
  flex: 1;
  min-width: 0;
}
.tk-title {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.tk-title strong {
  font-weight: 700;
  font-size: 0.96rem;
  color: var(--ink);
}
.tk-mand {
  font-size: 0.7rem;
  font-weight: 800;
  color: #dc2626;
}
:root[data-theme='dark'] .tk-mand {
  color: #f87171;
}
.tk-meta {
  color: var(--ink-soft);
  font-size: 0.81rem;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.tk-type {
  color: var(--tc);
  font-weight: 800;
}
.tk-rng {
  font-weight: 700;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate-override;
}
.tk-dep {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--ink-soft);
  opacity: 0.85;
}
.tk-sep {
  color: var(--line-strong);
}
.tk-side {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.tk-due {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #d9871f;
  white-space: nowrap;
}
.tk-due.od {
  color: #dc2626;
}
:root[data-theme='dark'] .tk-due.od {
  color: #f87171;
}
.tk-act {
  border: none;
  border-radius: 9px;
  padding: 8px 15px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.82rem;
  cursor: pointer;
  white-space: nowrap;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
}
.tk-act.ghost {
  background: transparent;
  border: 1.5px solid var(--line-strong);
  color: var(--ink);
}
.tk-act.staff {
  background: color-mix(in srgb, #7c3aed 12%, transparent);
  color: #7c3aed;
}
:root[data-theme='dark'] .tk-act.staff {
  color: #b794f6;
}
.tk-done-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: color-mix(in srgb, #16a34a 16%, transparent);
  color: #16a34a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tk-lock-mark {
  width: 28px;
  height: 28px;
  color: var(--ink-soft);
  opacity: 0.7;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tk-empty {
  text-align: center;
  padding: 2rem;
  color: var(--ink-soft);
}
.tk-body {
  display: flex;
  flex-direction: column;
}

@media (max-width: 560px) {
  .tk-side {
    flex-direction: column;
    align-items: flex-end;
    gap: 5px;
  }
  .tk-ic {
    width: 32px;
    height: 32px;
  }
}

/* ═══════════════════════════════════════════════════════════════
   P10 — تقدّمي (student progress) multi-tab page + home «ابدأ» CTA.
   Stats live here so the "do" pages stay action-only.
   ═══════════════════════════════════════════════════════════════ */
.pr-tabs {
  display: flex;
  gap: 5px;
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 6px;
  box-shadow: var(--sh-sm);
  overflow-x: auto;
  margin-bottom: 16px;
}
.pr-tab {
  flex: 1;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 9px 15px;
  border-radius: 10px;
  border: none;
  background: transparent;
  color: var(--ink-soft);
  font-family: inherit;
  font-weight: 700;
  font-size: 0.88rem;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}
.pr-tab:hover {
  background: var(--page-bg);
  color: var(--ink);
}
.pr-tab.is-on {
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
}
.pr-tab.is-on .ic {
  color: var(--accent-2);
}
.pr-panel {
  display: none;
}
.pr-panel.is-on {
  display: block;
}

.pr-streak {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius);
  padding: 22px;
  color: #fff;
  background:
    radial-gradient(110% 130% at 88% 8%, rgba(var(--accent-rgb), 0.28), transparent 52%),
    linear-gradient(120deg, var(--brand-2), var(--brand-deep));
  box-shadow: var(--sh-lg);
  margin-bottom: 14px;
}
.pr-streak::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--pattern);
  background-size: 60px;
  -webkit-mask-image: radial-gradient(130% 120% at 85% 10%, #000 20%, transparent 72%);
  mask-image: radial-gradient(130% 120% at 85% 10%, #000 20%, transparent 72%);
}
.pr-streak > * {
  position: relative;
}
.pr-streak-top {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pr-fire {
  font-size: 2.4rem;
}
.pr-big {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.pr-lbl {
  opacity: 0.85;
  font-size: 0.9rem;
  margin-top: 2px;
}
.pr-week {
  display: flex;
  gap: 6px;
  margin-top: 16px;
}
.pr-day {
  flex: 1;
  text-align: center;
  font-size: 0.66rem;
  opacity: 0.85;
}
.pr-dot {
  width: 100%;
  height: 26px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.14);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.pr-dot.a {
  background: var(--accent);
  color: var(--brand-deep);
}
.pr-dot svg {
  width: 14px;
  height: 14px;
}
.pr-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 11px;
  margin-bottom: 14px;
}
.pr-tile {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px 10px;
  box-shadow: var(--sh-sm);
  text-align: center;
}
.pr-ti {
  width: 38px;
  height: 38px;
  border-radius: 11px;
  margin: 0 auto 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--surface-2);
}
.pr-v {
  font-size: 1.5rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  direction: ltr;
  unicode-bidi: isolate-override;
}
.pr-tl {
  color: var(--ink-soft);
  font-size: 0.76rem;
  font-weight: 700;
}
.pr-sec {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--sh-sm);
  padding: 16px 18px;
  margin-bottom: 14px;
}
.pr-sec h4 {
  margin: 0 0 12px;
  font-size: 0.98rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
}
.pr-sec h4 .ic {
  color: var(--accent);
}
.pr-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
}
.pr-row:last-child {
  border-bottom: none;
}
.pr-n {
  flex: 1;
  font-weight: 700;
  font-size: 0.92rem;
}
.pr-bar {
  width: 120px;
  height: 8px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  flex-shrink: 0;
}
.pr-bar i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--sc);
}
.pr-bar--lg {
  width: 100%;
  height: 12px;
}
.pr-gv {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  width: 46px;
  text-align: end;
  color: var(--sc);
  direction: ltr;
  unicode-bidi: isolate-override;
}
.pr-mem-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
}
.pr-mem-top strong {
  font-size: 1.5rem;
}
.pr-badges {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 11px;
}
.pr-badge {
  background: var(--panel-bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--sh-sm);
  padding: 16px 10px;
  text-align: center;
}
.pr-bi {
  font-size: 1.9rem;
}
.pr-bi svg {
  width: 34px;
  height: 34px;
}
.pr-bn {
  font-weight: 800;
  font-size: 0.86rem;
  margin-top: 6px;
}
.pr-badge small {
  color: var(--ink-soft);
  font-size: 0.72rem;
}

/* Home «ابدأ بالأهم» CTA + calm empty state */
.home-start-cta {
  width: 100%;
  padding: 15px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.02rem;
  cursor: pointer;
  background: linear-gradient(135deg, var(--brand-2), var(--brand));
  color: #fff;
  box-shadow: 0 10px 22px -10px rgba(var(--brand-rgb), 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.home-start-cta:hover {
  filter: brightness(1.05);
}
.home-start-cta .ic {
  color: var(--accent-2);
}
.home-empty-moon {
  font-size: 2.4rem;
}

/* ═══════════════════════════════════════════════════════════════
   P11 — one-tap completion: undo toast + completion celebration
   ═══════════════════════════════════════════════════════════════ */
.portal-toast--undo {
  display: flex;
  align-items: center;
  gap: 16px;
}
.toast-undo {
  background: transparent;
  border: none;
  color: var(--accent-2, #e0b45a);
  font-family: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px;
  white-space: nowrap;
}
.toast-undo .ic {
  vertical-align: -0.15em;
}
.tk-empty-emoji {
  font-size: 2.4rem;
  margin-bottom: 6px;
}

/* ═══════════════════════════════════════════════════════════════
   P12 — task/type colors as CSS variables. Task rows set these inline
   via --tc, but the تقدّمي page (and any var(--t-*) reference) needs
   them defined globally — otherwise bar fills render with no colour.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --t-hifz: #16a34a;
  --t-review: #d9871f;
  --t-link: #2563eb;
  --t-quiz: #7c3aed;
  --t-read: #0e9aa7;
  --t-assign: #4f5bd5;
  --t-task: #64748b;
}

/* ═══════════════════════════════════════════════════════════════
   P13 — Competitions / Events. Festive gold-first card at the top of
   home + a full competition page (entries, points breakdown, board).
   Self-contained palette; theme-aware via --surface/--text tokens.
   ═══════════════════════════════════════════════════════════════ */
.comp-card,
.event-hero {
  --cc1: #8a5a12;
  --cc2: #6a3d0a;
  --cc-glow: rgba(224, 180, 90, 0.5);
}
.comp-card--gold,
.event-hero--gold {
  --cc1: #8a5a12;
  --cc2: #6a3d0a;
  --cc-glow: rgba(224, 180, 90, 0.5);
}
.comp-card--crimson,
.event-hero--crimson {
  --cc1: #9a1f3a;
  --cc2: #6d1026;
  --cc-glow: rgba(240, 120, 150, 0.45);
}
.comp-card--teal,
.event-hero--teal {
  --cc1: #0d6a5f;
  --cc2: #083a33;
  --cc-glow: rgba(90, 210, 190, 0.45);
}
.comp-card--violet,
.event-hero--violet {
  --cc1: #5b2a9a;
  --cc2: #3a1a6a;
  --cc-glow: rgba(180, 140, 240, 0.45);
}
.comp-card--indigo,
.event-hero--indigo {
  --cc1: #2a3a9a;
  --cc2: #1a256a;
  --cc-glow: rgba(120, 150, 240, 0.45);
}

.comp-card {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 20px;
  padding: 18px 20px;
  color: #fff;
  text-decoration: none;
  margin-bottom: 14px;
  background:
    radial-gradient(120% 120% at 90% 0%, var(--cc-glow), transparent 55%),
    linear-gradient(125deg, var(--cc1), var(--cc2));
  box-shadow: 0 18px 40px -16px rgba(0, 0, 0, 0.5);
  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease;
}
.comp-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='0.12' stroke-width='1.1'%3E%3Cpath d='M30 6l6 12 13 2-9 9 2 13-12-6-12 6 2-13-9-9 13-2z'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 64px;
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(120% 120% at 85% 10%, #000 20%, transparent 72%);
  mask-image: radial-gradient(120% 120% at 85% 10%, #000 20%, transparent 72%);
  pointer-events: none;
}
.comp-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 24px 50px -18px rgba(0, 0, 0, 0.55);
}
.comp-card > * {
  position: relative;
}
.comp-top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.comp-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.35);
  padding: 4px 11px;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 800;
}
.comp-count {
  margin-inline-start: auto;
  font-size: 0.78rem;
  font-weight: 700;
  opacity: 0.92;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.comp-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin: 2px 0 3px;
}
.comp-sub {
  opacity: 0.85;
  font-size: 0.85rem;
}
.comp-stats {
  display: flex;
  gap: 10px;
  margin: 14px 0;
}
.comp-stat {
  flex: 1;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 12px;
  padding: 9px 10px;
  text-align: center;
}
.comp-stat .v {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1;
}
.comp-stat .l {
  font-size: 0.68rem;
  opacity: 0.85;
  margin-top: 3px;
}
.comp-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 0.98rem;
  background: #fff;
  color: var(--cc2);
  box-shadow: 0 8px 18px -8px rgba(0, 0, 0, 0.4);
}

/* Competition page */
.comp-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.comp-back:hover {
  color: var(--text);
}
.event-hero {
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  margin-bottom: 14px;
  background:
    radial-gradient(120% 120% at 90% 0%, var(--cc-glow), transparent 55%),
    linear-gradient(125deg, var(--cc1), var(--cc2));
  box-shadow: 0 20px 44px -18px rgba(0, 0, 0, 0.5);
}
.event-hero h1 {
  font-size: 1.5rem;
  font-weight: 800;
  margin: 8px 0 4px;
}
.rank-big {
  display: flex;
  gap: 10px;
  margin-top: 16px;
}
.rank-chip {
  flex: 1;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.24);
  border-radius: 14px;
  padding: 10px 14px;
  text-align: center;
}
.rank-chip .v {
  font-size: 1.5rem;
  font-weight: 800;
  line-height: 1;
}
.rank-chip .l {
  font-size: 0.7rem;
  opacity: 0.85;
  margin-top: 3px;
}
.comp-desc {
  color: var(--text-muted);
  font-size: 0.9rem;
  line-height: 1.7;
  margin-bottom: 14px;
}
.comp-sec {
  background: var(--panel-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 14px 16px;
  margin-bottom: 14px;
}
.comp-sec h3 {
  margin: 0 0 12px;
  font-size: 1rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text);
}
.comp-entry {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  color: var(--text);
}
.comp-entry:last-child {
  border-bottom: none;
}
.comp-entry-ic {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: color-mix(in srgb, var(--tc) 13%, transparent);
  color: var(--tc);
}
.comp-entry-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.comp-entry-main strong {
  font-weight: 700;
  font-size: 0.92rem;
}
.comp-entry-main small {
  color: var(--tc);
  font-weight: 800;
  font-size: 0.75rem;
}
.comp-entry-done {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--t-hifz) 16%, transparent);
  color: var(--t-hifz);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.comp-entry-go {
  color: var(--text-muted);
  flex-shrink: 0;
}

/* points breakdown pills */
.pts-break {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}
.pb {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.76rem;
  font-weight: 700;
  padding: 5px 11px;
  border-radius: 999px;
  background: var(--surface-2);
  color: var(--text-muted);
}
.pb b {
  color: var(--text);
}
.pb i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c);
}
.pb-auto {
  --c: var(--t-hifz);
}
.pb-speed {
  --c: #c8912f;
}
.pb-early {
  --c: #d9871f;
}
.pb-bonus {
  --c: var(--t-quiz);
}

/* leaderboard rows (shared by student page + teacher manager) */
.lb-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 0;
  border-bottom: 1px solid var(--border);
}
.lb-row:last-child {
  border-bottom: none;
}
.lb-row.me {
  background: color-mix(in srgb, #c8912f 12%, transparent);
  margin: 0 -16px;
  padding: 9px 16px;
  border-radius: 8px;
}
.lb-rank {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--surface-2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.85rem;
  flex-shrink: 0;
  color: var(--text);
}
.lb-rank.g1 {
  background: linear-gradient(135deg, #f5d67a, #c8912f);
  color: #4a2f06;
}
.lb-rank.g2 {
  background: linear-gradient(135deg, #e2e2e2, #a8a8a8);
  color: #3a3a3a;
}
.lb-rank.g3 {
  background: linear-gradient(135deg, #e0a878, #b06a35);
  color: #3a1f06;
}
.lb-name {
  flex: 1;
  font-weight: 700;
  font-size: 0.92rem;
  color: var(--text);
}
.lb-pts {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: #8a5a12;
}
:root[data-theme='dark'] .lb-pts {
  color: #e0b45a;
}

/* teacher competition manager */
.comp-mgr-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  color: var(--text-muted);
}
.comp-award-btn {
  border: 1px solid var(--border);
  background: var(--surface-2);
  color: var(--text);
  border-radius: 8px;
  padding: 5px 10px;
  font-family: inherit;
  font-weight: 700;
  font-size: 0.76rem;
  cursor: pointer;
  white-space: nowrap;
}
.comp-award-btn:hover {
  border-color: #c8912f;
  color: #8a5a12;
}

/* ═══════════════════════════════════════════════════════════════
   P14 — Interactive quiz player (Duolingo-style). One question at a
   time, instant feedback, combo, hearts, sequence/match/cloze inputs.
   ═══════════════════════════════════════════════════════════════ */
.iq {
  --iq-ok: #16a34a;
  --iq-ok-bg: #e7f6ec;
  --iq-bad: #dc2626;
  --iq-bad-bg: #fceceb;
  --iq-gold: #c8912f;
  --iq-gold-deep: #8a5a12;
  display: flex;
  flex-direction: column;
  min-height: 60vh;
}
:root[data-theme='dark'] .iq {
  --iq-ok-bg: #14312150;
  --iq-bad-bg: #3a181850;
}
.iq-modal {
  padding: 0 !important;
}
.iq-top {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 4px 2px 14px;
}
.iq-x {
  border: none;
  background: none;
  color: var(--text-muted);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  padding: 2px 6px;
}
.iq-bar {
  flex: 1;
  height: 12px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
}
.iq-bar > i {
  display: block;
  height: 100%;
  width: 0;
  background: linear-gradient(90deg, var(--brand, #12655a), var(--brand-2, #0d4f45));
  border-radius: 999px;
  transition: width 0.35s ease;
}
.iq-hearts {
  font-size: 1rem;
  letter-spacing: 1px;
  min-width: 54px;
  text-align: end;
}
.iq-step {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.iq-prompt {
  font-size: 1.25rem;
  font-weight: 800;
  margin: 4px 0 6px;
  line-height: 1.6;
  color: var(--text);
}
.iq-sub {
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 14px;
}

/* option cards */
.iq-opts {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 6px;
}
.iq-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border: 2px solid var(--border);
  border-bottom-width: 4px;
  border-radius: 14px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  text-align: start;
  font-family: inherit;
  transition:
    border-color 0.12s,
    background 0.12s;
}
.iq-opt .iq-k {
  width: 26px;
  height: 26px;
  border-radius: 8px;
  border: 2px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: var(--text-muted);
  flex-shrink: 0;
}
.iq-opt.sel {
  border-color: var(--brand, #12655a);
  background: color-mix(in srgb, var(--brand, #12655a) 8%, transparent);
}
.iq-opt.sel .iq-k {
  border-color: var(--brand, #12655a);
  background: var(--brand, #12655a);
  color: #fff;
}
.iq-opt.correct {
  border-color: var(--iq-ok);
  background: var(--iq-ok-bg);
}
.iq-opt.correct .iq-k {
  border-color: var(--iq-ok);
  background: var(--iq-ok);
  color: #fff;
}
.iq-opt.wrong {
  border-color: var(--iq-bad);
  background: var(--iq-bad-bg);
}
.iq-opt.wrong .iq-k {
  border-color: var(--iq-bad);
  background: var(--iq-bad);
  color: #fff;
}
.iq-opt:disabled {
  cursor: default;
}

.iq-input {
  width: 100%;
  padding: 13px 15px;
  border: 2px solid var(--border);
  border-radius: 12px;
  font-family: inherit;
  font-size: 1.05rem;
  background: var(--surface);
  color: var(--text);
}
.iq-input:focus {
  outline: none;
  border-color: var(--brand, #12655a);
}

/* iraab */
.iq-iraab {
  font-size: 1.5rem;
  font-weight: 800;
  text-align: center;
  color: var(--brand, #0d4f45);
  line-height: 2;
  margin-bottom: 16px;
}
.iq-target {
  background: var(--iq-gold);
  color: #fff;
  border-radius: 8px;
  padding: 1px 12px;
}

/* cloze */
.iq-cloze {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 2.1;
  text-align: center;
  margin-bottom: 20px;
  color: var(--text);
}
.iq-gap {
  display: inline-block;
  min-width: 90px;
  border-bottom: 3px solid var(--iq-gold);
  color: var(--iq-gold-deep);
  padding: 0 10px;
  vertical-align: middle;
}
:root[data-theme='dark'] .iq-gap {
  color: #e0b45a;
}
.iq-gap.filled {
  border-bottom-style: solid;
}

/* token bank / sequence */
.iq-line {
  min-height: 54px;
  border-bottom: 2px dashed var(--border);
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 6px 0 14px;
  margin-bottom: 16px;
  align-content: flex-start;
}
.iq-bank {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.iq-tok {
  padding: 10px 16px;
  border: 2px solid var(--border);
  border-bottom-width: 4px;
  border-radius: 12px;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-weight: 800;
  font-size: 1.02rem;
  cursor: pointer;
}
.iq-tok.placed {
  background: var(--surface-2);
  color: transparent;
  border-color: var(--surface-2);
  border-bottom-color: var(--border);
  pointer-events: none;
}
.iq-tok.chosen {
  background: color-mix(in srgb, var(--brand, #12655a) 8%, transparent);
  border-color: var(--brand, #12655a);
}

/* match */
.iq-match {
  display: flex;
  gap: 12px;
}
.iq-mcol {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.iq-mitem {
  padding: 14px 12px;
  border: 2px solid var(--border);
  border-bottom-width: 4px;
  border-radius: 12px;
  text-align: center;
  font-weight: 700;
  cursor: pointer;
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 0.95rem;
}
.iq-mitem.p1 {
  border-color: var(--iq-gold);
  background: color-mix(in srgb, var(--iq-gold) 12%, transparent);
}
.iq-mitem.done {
  border-color: var(--iq-ok);
  background: var(--iq-ok-bg);
  color: var(--iq-ok);
  opacity: 0.7;
  pointer-events: none;
}

/* feedback bar */
.iq-fb {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  border: 2px solid;
  display: flex;
  flex-direction: column;
  gap: 4px;
  animation: iq-rise 0.18s ease;
}
@keyframes iq-rise {
  from {
    transform: translateY(8px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}
.iq-fb--ok {
  background: var(--iq-ok-bg);
  border-color: color-mix(in srgb, var(--iq-ok) 40%, transparent);
}
.iq-fb--bad {
  background: var(--iq-bad-bg);
  border-color: color-mix(in srgb, var(--iq-bad) 35%, transparent);
}
.iq-fb-h {
  font-weight: 900;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 8px;
}
.iq-fb--ok .iq-fb-h {
  color: var(--iq-ok);
}
.iq-fb--bad .iq-fb-h {
  color: var(--iq-bad);
}
.iq-fb-x {
  font-size: 0.86rem;
  color: var(--text-muted);
  line-height: 1.6;
}
.iq-fb-x b {
  color: var(--text);
}
.iq-combo {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: color-mix(in srgb, var(--iq-gold) 18%, transparent);
  color: var(--iq-gold-deep);
  font-weight: 800;
  font-size: 0.78rem;
  padding: 2px 9px;
  border-radius: 999px;
}
:root[data-theme='dark'] .iq-combo {
  color: #e0b45a;
}

/* footer / check button */
.iq-foot {
  padding-top: 16px;
}
.iq-check {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  font-family: inherit;
  font-weight: 800;
  font-size: 1.05rem;
  cursor: pointer;
  background: var(--brand, #0d4f45);
  color: #fff;
  box-shadow: 0 6px 14px -6px rgba(0, 0, 0, 0.35);
}
.iq-check:disabled {
  background: var(--surface-2);
  color: var(--text-muted);
  box-shadow: none;
  cursor: default;
}
.iq-check--ok {
  background: var(--iq-ok);
}
.iq-check--bad {
  background: var(--iq-bad);
}

/* end screen */
.iq-end {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 4px;
  padding: 24px 0;
}
.iq-end-emoji {
  font-size: 3.4rem;
}
.iq-end h2 {
  font-size: 1.5rem;
  font-weight: 900;
  margin: 6px 0 0;
  color: var(--text);
}
.iq-end-stats {
  display: flex;
  gap: 12px;
  width: 100%;
  margin-top: 18px;
}
.iq-stat {
  flex: 1;
  background: var(--surface-2);
  border-radius: 14px;
  padding: 12px 8px;
}
.iq-stat .v {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--brand, #0d4f45);
}
.iq-stat .l {
  font-size: 0.72rem;
  color: var(--text-muted);
  margin-top: 2px;
}
.iq-stat--xp {
  background: linear-gradient(125deg, #8a5a12, #6a3d0a);
}
.iq-stat--xp .v,
.iq-stat--xp .l {
  color: #fff;
}

/* P14b — quiz question media (listen-and-answer / image) */
.iq-media {
  margin-bottom: 14px;
  text-align: center;
}
.iq-media-img {
  max-width: 100%;
  max-height: 240px;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.iq-media audio {
  width: 100%;
}
.iq-media-load {
  color: var(--text-muted);
  font-size: 1.4rem;
}

/* ═══════════════════════════════════════════════════════════════
   P15 — Quiz per-question analytics (teacher). Difficulty bars.
   ═══════════════════════════════════════════════════════════════ */
.qza-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  color: var(--text-muted);
  font-size: 0.85rem;
  margin-bottom: 12px;
}
.qza-flag {
  color: #b91c1c;
  font-weight: 700;
}
:root[data-theme='dark'] .qza-flag {
  color: #f87171;
}
.qza-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.qza-row {
  border: 1px solid var(--border);
  border-inline-start: 4px solid var(--band, var(--border));
  border-radius: 12px;
  padding: 11px 13px;
  background: var(--surface);
}
.qza-easy {
  --band: #16a34a;
}
.qza-mid {
  --band: #d9871f;
}
.qza-hard {
  --band: #dc2626;
}
.qza-na {
  --band: var(--border);
}
.qza-head {
  display: flex;
  align-items: center;
  gap: 9px;
}
.qza-type {
  flex-shrink: 0;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--tc);
  background: color-mix(in srgb, var(--tc) 12%, transparent);
  padding: 2px 8px;
  border-radius: 6px;
}
.qza-q {
  flex: 1;
  min-width: 0;
  font-weight: 700;
  font-size: 0.9rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.qza-pct {
  flex-shrink: 0;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--band);
}
.qza-bar {
  height: 8px;
  background: var(--surface-2);
  border-radius: 999px;
  overflow: hidden;
  margin: 8px 0 6px;
}
.qza-bar > i {
  display: block;
  height: 100%;
  background: var(--band);
  border-radius: 999px;
}
.qza-meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.78rem;
  color: var(--text-muted);
}
.qza-wrong b {
  color: var(--text);
}
.qza-analytics-empty {
  text-align: center;
  color: var(--text-muted);
  padding: 20px 10px;
}
.qza-analytics-empty p {
  margin-top: 8px;
}

/* ═══════════════════════════════════════════════════════════════
   P16 — Memorization reader (text + audio + highlight-follow).
   ═══════════════════════════════════════════════════════════════ */
.mrd-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.mrd-tool {
  border: 1px solid var(--line-strong, var(--border));
  background: var(--surface-2);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 12px;
  font:
    700 0.8rem 'Cairo',
    sans-serif;
  cursor: pointer;
}
.mrd-tool.on {
  background: var(--brand, #0d4f45);
  color: #fff;
  border-color: var(--brand, #0d4f45);
}
.mrd-author {
  margin-inline-start: auto;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.mrd-verses {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.mrd-verse {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 12px;
  transition: background 0.2s;
}
.mrd-verse.now {
  background: color-mix(in srgb, #c8912f 14%, transparent);
}
.mrd-num {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--surface-2);
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.78rem;
  margin-top: 3px;
}
.mrd-text {
  flex: 1;
  min-width: 0;
}
.mrd-line {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 2;
  color: var(--text);
  text-align: center;
}
.mrd-tr {
  margin-top: 6px;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-align: center;
  font-weight: 500;
}
.mrd-note-x {
  margin-top: 8px;
  background: var(--surface-2);
  border-radius: 10px;
  padding: 9px 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.8;
}
.mrd-uplay {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: none;
  background: var(--brand, #0d4f45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.mrd-player {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  margin-top: 14px;
  background: var(--surface-2);
  border-radius: 14px;
}
.mrd-play {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: var(--brand, #0d4f45);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.mrd-scrub {
  flex: 1;
  height: 8px;
  background: var(--line-strong, var(--border));
  border-radius: 999px;
  position: relative;
  cursor: pointer;
}
.mrd-scrub > i {
  position: absolute;
  inset-inline-start: 0;
  top: 0;
  height: 100%;
  width: 0;
  background: var(--brand, #0d4f45);
  border-radius: 999px;
}
.mrd-time {
  font-size: 0.76rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
  min-width: 74px;
  text-align: center;
}

/* P16b — reader word highlight + practice */
.mrd-w {
  cursor: default;
  border-radius: 5px;
  padding: 0 2px;
  transition: background 0.12s;
}
.mrd-w[data-s] {
  cursor: pointer;
}
.mrd-w[data-s]:hover {
  background: color-mix(in srgb, var(--brand, #0d4f45) 12%, transparent);
}
.mrd-w.now-w {
  background: #c8912f;
  color: #fff;
}
.mrd-hide .mrd-text {
  filter: blur(6px);
  opacity: 0.5;
  user-select: none;
}
.mrd-practice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 12px;
  background: var(--surface-2);
  border-radius: 12px;
  font-size: 0.85rem;
  color: var(--text-muted);
}
.mrd-reveal {
  border: none;
  background: var(--brand, #0d4f45);
  color: #fff;
  border-radius: 10px;
  padding: 8px 16px;
  font:
    800 0.85rem 'Cairo',
    sans-serif;
  cursor: pointer;
}

/* P16c — reader teaching controls (ladder, speed, A–B loop) */
.mrd-ladder {
  display: flex;
  gap: 6px;
  margin-bottom: 12px;
}
.mrd-lstep {
  flex: 1;
  border: 1px solid var(--line-strong, var(--border));
  background: var(--surface);
  color: var(--text-muted);
  border-radius: 9px;
  padding: 6px 4px;
  font:
    700 0.74rem 'Cairo',
    sans-serif;
  cursor: pointer;
}
.mrd-lstep.on {
  background: #c8912f;
  color: #fff;
  border-color: #c8912f;
}
.mrd-ab {
  position: absolute;
  top: -3px;
  height: 14px;
  width: 3px;
  background: #7c3aed;
  border-radius: 2px;
}
.mrd-pctrl {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 8px;
}
.mrd-sp {
  display: inline-flex;
  gap: 4px;
  margin-inline-start: auto;
}
.mrd-chip {
  border: 1px solid var(--line-strong, var(--border));
  background: var(--surface);
  color: var(--text);
  border-radius: 999px;
  padding: 5px 11px;
  font:
    700 0.76rem 'Cairo',
    sans-serif;
  cursor: pointer;
}
.mrd-chip.on {
  background: var(--brand, #0d4f45);
  color: #fff;
  border-color: var(--brand, #0d4f45);
}
.mrd-ab-btn {
  border-color: #7c3aed;
  color: #7c3aed;
}
.mrd-ab-btn.on {
  background: #7c3aed;
  color: #fff;
  border-color: #7c3aed;
}

/* P16d — memorization task-row quick actions (read / practice) */
.mem-todo-acts {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.mem-mini {
  border: 1px solid var(--line-strong, var(--border));
  background: var(--surface);
  border-radius: 8px;
  padding: 4px 9px;
  font-size: 0.95rem;
  cursor: pointer;
  line-height: 1;
}
.mem-mini--p {
  background: color-mix(in srgb, var(--brand, #0d4f45) 10%, transparent);
  border-color: var(--brand, #0d4f45);
}
.mem-mini:hover {
  border-color: var(--brand, #0d4f45);
}

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE HARDENING

   The failure this addresses: a flex row of "title + button group" where the
   title carries `flex: 1` (basis 0) and the buttons cannot shrink. On a narrow
   screen the buttons take the whole line and the title collapses to 0px wide,
   rendering Arabic one character per line. Every rule below either gives a text
   element a width floor, or lets the row wrap instead of crushing it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Unit heading: same fault as the task row — a basis-0 title beside an
   un-shrinkable action group. */
.module-title {
  flex: 1 1 auto;
  min-width: 8ch;
  overflow-wrap: anywhere;
}
.module-actions {
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}

@media (max-width: 640px) {
  /* Touch targets. Pointer-sized icon buttons are unusable with a thumb; 40px
     is the practical floor without inflating the layout. */
  .icon-btn {
    min-width: 40px;
    min-height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
  }
  .link-button,
  .subhub-mini {
    min-height: 40px;
    padding-block: 8px;
  }
  .task-done-btn {
    min-height: 40px;
    padding-inline: 14px;
  }

  /* A unit heading on a phone: title on its own line, actions beneath it, so
     neither has to fight the other for room. */
  .module-item summary {
    flex-wrap: wrap;
    gap: 8px;
  }
  .module-title {
    flex: 1 1 100%;
    min-width: 0;
  }
  .module-actions {
    width: 100%;
    justify-content: flex-start;
  }

  /* Task/content rows: title first, badges wrapped under it. */
  .item-head {
    gap: 8px;
  }
  .item-title {
    flex: 1 1 100%;
    min-width: 0;
  }
  .item-badges {
    margin-inline-start: 0;
    width: 100%;
  }

  /* Day dividers: label and its report button on one line, decorative rule
     dropped rather than allowed to squeeze the label. */
  .module-section-divider::after {
    display: none;
  }
  .module-section-label {
    flex: 1 1 auto;
  }

  /* Report modal: the matrix is genuinely wide, so let it scroll on its own
     axis rather than pushing the page sideways. */
  .ur-matrix-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .rep-toolbar {
    flex-wrap: wrap;
    gap: 6px;
  }
  .rep-toolbar .ur-sel,
  .rep-toolbar .subhub-mini {
    flex: 1 1 auto;
  }
  .rep-tb-spacer {
    display: none;
  }

  /* Modals should not be taller than the screen with the content trapped. */
  .portal-modal {
    max-height: 88vh;
  }
  .portal-modal-body {
    overflow-y: auto;
  }
}

/* Long unbroken strings (a pasted URL, a long code) must never widen the page. */
.item-title,
.module-title,
.module-section-label,
.rp-card li,
.rp-sec-task {
  overflow-wrap: anywhere;
}

/* Grid and flex items default to min-width:auto, so they refuse to shrink below
   their content’s minimum width. On a phone the course tab panel measured 478px
   inside a 347px track and pushed its contents off the edge. Releasing the floor
   along the course chain lets the track govern and the text wrap instead. */
.course-layout,
.course-body,
.page,
.tab-panel,
.course-card,
.modules-list,
.module-item,
.module-items,
.module-content-item {
  min-width: 0;
}

/* ═══════════ Records (رصد) — staff-entered results ═══════════
   Tones: positive / partial / negative / excused. Each has a soft chip colour and a
   solid "selected" colour, redefined for dark mode below. */
:root {
  --rt-positive: #15803d;
  --rt-positive-bg: #dcfce7;
  --rt-partial: #a16207;
  --rt-partial-bg: #fef9c3;
  --rt-negative: #b91c1c;
  --rt-negative-bg: #fee2e2;
  --rt-excused: #475569;
  --rt-excused-bg: #e2e8f0;
}
:root[data-theme='dark'] {
  --rt-positive: #4ade80;
  --rt-positive-bg: rgba(74, 222, 128, 0.14);
  --rt-partial: #facc15;
  --rt-partial-bg: rgba(250, 204, 21, 0.14);
  --rt-negative: #f87171;
  --rt-negative-bg: rgba(248, 113, 113, 0.14);
  --rt-excused: #cbd5e1;
  --rt-excused-bg: rgba(203, 213, 225, 0.12);
}
.tone-positive {
  --rt: var(--rt-positive);
  --rt-bg: var(--rt-positive-bg);
}
.tone-partial {
  --rt: var(--rt-partial);
  --rt-bg: var(--rt-partial-bg);
}
.tone-negative {
  --rt: var(--rt-negative);
  --rt-bg: var(--rt-negative-bg);
}
.tone-excused {
  --rt: var(--rt-excused);
  --rt-bg: var(--rt-excused-bg);
}

/* Unit row */
.module-content-item.type-record {
  cursor: pointer;
}
.module-content-item.type-record .type-icon {
  color: #0f766e;
}
.module-content-item.type-record.is-complete {
  border-inline-start: 3px solid var(--rt-positive);
}
.module-content-item.type-record:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.module-content-item.type-record .rec-go {
  padding: 0.2rem 0.7rem;
  font-size: 0.78rem;
}
.rec-results {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 6px;
}
.rec-res {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--rt-bg, var(--surface-2));
  color: var(--rt, var(--ink-soft));
  font-size: 0.8rem;
}
.rec-res small {
  color: var(--ink-soft);
  font-weight: 500;
}
.rec-res b {
  font-weight: 700;
}
.rec-res.is-empty {
  background: var(--surface-2);
  color: var(--ink-soft);
}

/* Student result modal */
.rec-view {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rec-view-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
}
.rec-view-lbl {
  flex: 1;
  min-width: 120px;
  font-weight: 600;
}
.rec-view-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 0;
  color: var(--ink-soft);
  font-size: 0.8rem;
}

/* Entry sheet */
.rs-desc {
  margin: 0 0 10px;
}
.rs-note {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  margin-bottom: 10px;
  border-radius: 10px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.85rem;
}
.rs-search {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}
.rs-search .ic {
  position: absolute;
  inset-inline-start: 11px;
  color: var(--ink-soft);
  pointer-events: none;
}
.rs-search-input {
  inline-size: 100%;
  min-height: 40px;
  padding-block: 6px;
  padding-inline: 34px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 10px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 1rem; /* under 16px, iOS zooms the sheet on focus */
}
.rs-search-input:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
}
.rs-bulk-hidden {
  color: var(--ink-soft);
}
.rs-progress {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--ink-soft);
}
.rs-progress b {
  color: var(--ink);
}
.rs-bar {
  flex: 1;
  block-size: 8px;
  border-radius: 999px;
  background: var(--surface-2);
  overflow: hidden;
}
.rs-bar i {
  display: block;
  block-size: 100%;
  background: var(--rt-positive);
  border-radius: 999px;
  transition: inline-size 0.25s ease;
}
.rs-groups {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}
.rs-gchip {
  min-height: 36px;
  padding: 4px 12px;
  border: 1px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  cursor: pointer;
}
.rs-gchip small {
  color: var(--ink-soft);
  margin-inline-start: 2px;
}
.rs-gchip.is-on {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}
.rs-gchip.is-on small {
  color: rgba(255, 255, 255, 0.8);
}
.rs-gchip.is-static {
  cursor: default;
}
.rs-bulk {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 10px;
  margin-bottom: 12px;
  border: 1px dashed var(--line-strong);
  border-radius: 10px;
}
.rs-bulk-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}
.rs-bulk-lbl {
  font-size: 0.8rem;
  color: var(--ink-soft);
  margin-inline-end: 4px;
}
.rs-bulk-opt {
  min-height: 32px;
  padding: 2px 10px;
  border: 1px solid var(--rt);
  border-radius: 999px;
  background: transparent;
  color: var(--rt);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.rs-bulk-opt:hover {
  background: var(--rt-bg);
}
/* Picked, not yet applied */
.rs-bulk-opt.is-on {
  background: var(--rt);
  color: #fff;
}
:root[data-theme='dark'] .rs-bulk-opt.is-on {
  color: #0e1613;
}
.rs-bulk.is-armed {
  border-style: solid;
  border-color: var(--brand);
}
.rs-bulk-confirm {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 12px;
  padding: 8px 10px;
  margin-top: 2px;
  border-radius: 8px;
  background: var(--accent-soft);
  color: var(--ink);
  font-size: 0.85rem;
}
.rs-bulk-confirm > span:first-child {
  flex: 1;
  min-width: 180px;
}
.rs-bulk-confirm.is-overwrite {
  background: var(--rt-negative-bg);
}
.rs-bulk-actions {
  display: flex;
  gap: 6px;
}
.rs-bulk-actions .modal-btn {
  min-height: 34px;
  padding-block: 4px;
}
/* Rows an armed bulk fill would touch */
.rs-row.is-bulk-target {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}
.rs-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.rs-band + .rs-band {
  margin-top: 8px;
}
.rs-band-head {
  position: sticky;
  top: -1px;
  z-index: 1;
  padding: 6px 4px;
  background: var(--panel-bg);
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--brand);
  border-bottom: 1px solid var(--line);
  margin-bottom: 6px;
}
:root[data-theme='dark'] .rs-band-head {
  color: var(--accent);
}
.rs-row {
  display: flex;
  align-items: flex-start;
  gap: 10px 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  transition:
    border-color 0.15s,
    background 0.15s;
}
.rs-row + .rs-row {
  margin-top: 6px;
}
.rs-row.is-done {
  border-color: color-mix(in srgb, var(--rt-positive) 35%, var(--line));
}
.rs-name {
  flex: 0 0 210px;
  display: flex;
  align-items: center;
  gap: 6px;
  padding-top: 6px;
  font-weight: 600;
  font-size: 0.9rem;
  line-height: 1.35;
}
.rs-tick {
  display: inline-flex;
  color: var(--rt-positive);
  opacity: 0;
  transition: opacity 0.15s;
}
.rs-row.is-done .rs-tick {
  opacity: 1;
}
.rs-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}
.rs-flabel {
  display: block;
  font-size: 0.74rem;
  color: var(--ink-soft);
  margin-bottom: 3px;
}
.rs-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.rs-opt {
  min-height: 38px;
  padding: 4px 12px;
  border: 1.5px solid var(--line-strong);
  border-radius: 999px;
  background: var(--surface);
  color: var(--ink);
  font: inherit;
  font-size: 0.84rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background 0.12s,
    border-color 0.12s,
    color 0.12s,
    transform 0.08s;
  -webkit-tap-highlight-color: transparent;
}
.rs-opt:hover:not([disabled]) {
  border-color: var(--rt);
  background: var(--rt-bg);
}
.rs-opt:active:not([disabled]) {
  transform: scale(0.96);
}
.rs-opt.is-on {
  background: var(--rt);
  border-color: var(--rt);
  color: #fff;
}
:root[data-theme='dark'] .rs-opt.is-on {
  color: #0e1613;
}
.rs-opt[disabled] {
  opacity: 0.55;
  cursor: default;
}
.rs-opt:focus-visible,
.rs-gchip:focus-visible,
.rs-bulk-opt:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.rs-foot-status {
  margin-inline-end: auto;
  font-size: 0.82rem;
}
@media (max-width: 640px) {
  .rs-row {
    flex-direction: column;
    gap: 6px;
  }
  .rs-name {
    flex-basis: auto;
    padding-top: 0;
  }
  .rs-opt {
    min-height: 44px;
    flex: 1 1 auto;
  }
  .rs-bulk-opt,
  .rs-gchip {
    min-height: 40px;
  }
}

/* Editor */
.re-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.re-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface-2);
}
.re-field + .re-field {
  margin-top: 8px;
}
.re-field-head {
  display: flex;
  align-items: center;
  gap: 6px;
}
.re-field-head .re-flabel {
  flex: 1;
  font-weight: 600;
}
.re-opt {
  display: flex;
  align-items: center;
  gap: 6px;
}
/* Out-specifies `.form-row input[type='text']` (width: 100%), which the editor sits inside. */
.re-field .re-opt .re-emoji {
  inline-size: 3.2rem;
  flex: 0 0 3.2rem;
  text-align: center;
  padding-inline: 4px;
}
.re-opt .re-olabel {
  flex: 1;
  min-width: 0;
}
.re-opt .re-tone {
  inline-size: auto;
  max-inline-size: 11rem;
}
.re-field .link-button {
  align-self: flex-start;
}
@media (max-width: 520px) {
  .re-opt {
    flex-wrap: wrap;
  }
  .re-opt .re-tone {
    flex: 1 1 100%;
    max-inline-size: none;
  }
}

/* Home card — rows are buttons (they open a sheet, not a page) */
button.prc-item {
  inline-size: 100%;
  font: inherit;
  text-align: start;
  cursor: pointer;
}
.prc-more {
  display: block;
  margin-top: 8px;
}