:root {
  /* EduMock brand (sampled from the logo) */
  --brand-forest: #2d4f4a;
  --brand-forest-deep: #213c38;
  --brand-green: #0b7551;
  --brand-green-press: #096343;
  --brand-gold: #c98d4a;
  --brand-gold-text: #9a6425; /* gold for text/filled buttons: 4.97:1 on white */
  --brand-gold-soft: #e9b476;
  --brand-brown: #6b4a3a;
  --brand-cream: #fdfcfa;
  --brand-cream-deep: #efe7d6;

  /* Fonts: native system sans for UI, serif display echoing the logo (no web-font downloads) */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino, "Source Serif 4", Georgia, "Noto Serif", serif;
  --font-mono: ui-monospace, "SF Mono", Consolas, "Liberation Mono", monospace;
  --font: var(--font-sans);

  --ink: #2a2622;
  --ink-muted: #6b5f55;
  --color-deep-charcoal: #2a2622;
  --color-muted: #6b5f55;
  --text-heading: #2d4f4a;
  --text-body: #2a2622;
  --text-muted: #6b5f55;
  --text-link: #0b7551;
  --secondary-color: #6b5f55;

  --bg-main: #f6f2ea;
  --bg-subtle: #f9f5ec;
  --bg-card: #ffffff;
  --color-surface: #f6f2ea;
  --color-card: #ffffff;
  --color-soft-lavender: #f9f5ec;

  --border-color: #e3dccf;
  --color-border: #e3dccf;

  --brand: #0b7551;
  --brand-press: #096343;
  --brand-mint: #f6efe1;
  --brand-lime: #f1d9b4;
  --brand-pear: #e7c595;
  --brand-peach: #f1d9b4;
  --accent-color: #c98d4a;
  --accent-hover: #b97a38;
  --accent-soft: #fbf1e1;
  --color-accent: #0b7551;
  --color-royal-purple: #0b7551;
  --color-royal-purple-dark: #096343;
  --color-success: #0b7551;
  --color-danger: #b42318;
  --color-warning: #b54708;
  --primary-color: #2d4f4a;
  --primary-hover: #213c38;

  --portal-chrome-bg: #fdfcfa;
  --portal-chrome-border: #e3dccf;
  --portal-chrome-title: #2d4f4a;
  --portal-chrome-text: #6b4a3a;
  --portal-chrome-muted: #6b5f55;
  --portal-chrome-surface: rgba(45, 79, 74, 0.06);
  --portal-chrome-surface-hover: rgba(45, 79, 74, 0.12);
  --topbar-bg: #fdfcfa;
  --topbar-border: #e3dccf;

  --sidebar-bg: #fdfcfa;
  --sidebar-text: #6b4a3a;
  --sidebar-text-muted: #6b5f55;
  --sidebar-hover-bg: #f1e9da;

  --focus-ring: 0 0 0 3px rgba(199, 138, 74, 0.45);
  --radius: 12px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-full: 999px;
  --shadow: 0 1px 2px rgba(38, 74, 67, 0.06), 0 4px 14px rgba(38, 74, 67, 0.06);
  --shadow-sm: 0 1px 2px rgba(38, 74, 67, 0.08);
  --shadow-md: 0 6px 22px rgba(38, 74, 67, 0.12);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

html { font-size: 15px; }
body,
body.portal-shell,
body.sa-tailadmin,
body.auth-body {
  font-family: var(--font-sans);
  color: var(--text-body);
  background: var(--bg-main);
  letter-spacing: -0.011em;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4, .page-title, .brand, .ta-brand,
.hero-banner__content h3, .setup-card__head h2,
.dash-stat-card__value, .dash-panel__head h3,
.profile-card__title, .mock-pick-card__title, .mock-card__title,
.auth-visual__brand, .auth-visual__title, .sa-page-head h1 {
  font-family: var(--font-display) !important;
  letter-spacing: -0.02em;
  font-weight: 600;
}
.page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--text-heading);
  margin: 0 0 4px;
}
.page-lead {
  color: var(--text-muted);
  font-size: 0.9375rem;
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.page-title-row {
  align-items: flex-end;
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
}

.card,
.stat,
.setup-card,
.dash-panel,
.ta-card,
.ta-stat-card,
.profile-card,
.mock-pick-card,
.mock-card,
.sheet-table-card,
.current-mock-panel,
.score-picker,
.score-pack,
.score-submit,
.temp-password-box {
  border: 1px solid var(--border-color) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: none !important;
  background: #fff;
}
.card { padding: 1.25rem 1.35rem; }
.hint { color: var(--text-muted); font-size: 0.875rem; }

.btn, button.btn, a.btn {
  border-radius: 6px !important;
  font-weight: 600;
  font-size: 0.875rem;
  letter-spacing: 0;
  min-height: 40px;
  padding: 8px 14px;
}
.btn-primary,
a.btn-primary,
button.btn-primary {
  background: var(--accent-color);
  color: #fde047 !important;
}
.btn-primary:hover,
a.btn-primary:hover,
button.btn-primary:hover {
  background: var(--accent-hover);
  color: #fef08a !important;
}
.btn-danger,
a.btn-danger,
button.btn-danger {
  color: #fde047 !important;
}
.btn-outline,
a.btn-outline,
button.btn-outline {
  background: #fff;
  border-color: #d5c9b4;
  color: var(--text-heading);
}
.btn-outline:hover,
a.btn-outline:hover {
  background: #f9f5ec;
  border-color: #a08e7d;
  color: var(--text-heading);
}

label { font-weight: 500; font-size: 0.8125rem; color: #3f3a30; }
.form-control, select, textarea,
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="date"], input[type="datetime-local"],
input[type="tel"], input[type="search"], input[type="file"] {
  border: 1px solid #d5c9b4 !important;
  border-radius: 6px !important;
  background: #fff !important;
  min-height: 40px;
  padding: 8px 12px;
  font-size: 0.9375rem;
}
textarea { border-radius: 8px !important; min-height: 112px; }
.form-control:focus, select:focus, textarea:focus,
input:focus {
  outline: 2px solid #ecd7b6;
  outline-offset: 0;
  border-color: #0b7551 !important;
}

.table-wrap {
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 8px;
  box-shadow: none;
  overflow: auto;
}
.card .table-wrap,
.ta-card .table-wrap,
.sheet-table-card .table-wrap {
  border: 0;
  border-radius: 0;
  border-top: 1px solid var(--border-color);
}
table.data {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  font-variant-numeric: tabular-nums;
}
table.data th,
table.data td {
  padding: 11px 14px;
  border-bottom: 1px solid #eef2f6;
  vertical-align: middle;
}
table.data th {
  background: #f9f5ec;
  color: #5a4d3f;
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid #e3dccf;
}
table.data tbody tr:nth-child(even) { background: #f9f5ec; }
table.data tbody tr:hover { background: #f6efe1; }
table.data tbody tr:last-child td { border-bottom: 0; }

.chip {
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.75rem;
  min-height: 22px;
  padding: 1px 8px;
}
.chip--ok { background: #f6efe1; color: #096343; }
.chip--warn { background: #fffbeb; color: #92400e; }
.chip--danger { background: #fef2f2; color: #991b1b; }
.chip--muted { background: #efe7d6; color: #5a4d3f; }
.alert {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 12px 14px;
  font-size: 0.9rem;
}
.alert-success { background: #f6efe1; color: #096343; border-color: #ecd7b6; }
.alert-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.alert-warning { background: #fffbeb; color: #92400e; border-color: #fde68a; }
.alert-info { background: #f9f5ec; color: #3f3a30; border-color: #e3dccf; }
.badge { border-radius: 4px !important; font-weight: 600; }

.app-main-shell { background: var(--bg-main); }
.main-content { padding: 1.25rem 1.35rem 2rem; }

.sidebar {
  background: #2d4f4a;
  color: #e3dccf;
  box-shadow: none;
  border-right: 1px solid #213c38;
}
.ta-brand { color: #f9f5ec; font-weight: 600; font-size: 1.05rem; }
.ta-brand__icon,
.brand-mark {
  background: #0b7551 !important;
  color: #fff !important;
  border-radius: 8px !important;
  font-weight: 600;
}
.sidebar-link {
  color: #d5c9b4;
  border-radius: 6px;
  font-weight: 500;
}
.sidebar-link:hover {
  background: #213c38;
  color: #f9f5ec;
}
.sidebar:not(.ta-sidebar) .sidebar-link.active,
body.sa-tailadmin .ta-sidebar .sidebar-link.active {
  background: rgba(15, 118, 110, 0.22);
  color: #ecd7b6;
  font-weight: 600;
  box-shadow: inset 3px 0 0 #2dd4bf;
}
.nav-group-toggle {
  color: #6b5f55;
  border-radius: 6px;
}
.nav-group-toggle:hover,
.nav-group.open > .nav-group-toggle {
  background: #213c38;
  color: #e3dccf;
  box-shadow: none;
}
.nav-group.open .nav-submenu {
  background: #111827;
  border-radius: 6px;
}
.sidebar-dismiss { color: #6b5f55; }
.sidebar-school-foot { border-top-color: #213c38; }
.sidebar-school-foot__name { color: #6b5f55; font-weight: 500; }
.ta-nav-label { color: #6b5f55 !important; font-weight: 600 !important; }

.top-navbar,
.school-brand-bar,
body.sa-tailadmin .ta-topbar {
  background: #2d4f4a !important;
  border-bottom: 1px solid #213c38;
  color: #e3dccf;
}
.portal-topbar-brand__school,
.top-navbar__title { font-weight: 600; color: #f9f5ec; }
.current-mock-switch__pill {
  min-height: 32px;
  border-radius: 6px;
  border-color: #3f3a30;
  background: #213c38;
  font-size: 0.8125rem;
  font-weight: 500;
}
.admin-topbar-user__avatar,
body.sa-tailadmin .ta-topbar__avatar {
  background: #213c38;
  color: #ecd7b6;
  font-weight: 600;
}
.portal-topbar-logout,
body.sa-tailadmin .ta-topbar__menu {
  border-radius: 6px !important;
  border-color: #3f3a30;
}
body.sa-tailadmin {
  --ta-sidebar: #fdfcfa;
  --ta-sidebar-hover: #f1e9da;
  --ta-sidebar-muted: #6b5f55;
  --ta-sidebar-text: #6b4a3a;
  --ta-accent: #0b7551;
  --ta-accent-soft: #f6efe1;
  --ta-bg: #efe7d6;
  --ta-border: #e3dccf;
  --ta-ink: #2d4f4a;
  --ta-muted: #6b5f55;
  background: #efe7d6;
  font-family: var(--font-sans);
}
body.sa-tailadmin .ta-sidebar {
  background: #2d4f4a;
  box-shadow: none;
  border-right: 1px solid #213c38;
}
body.sa-tailadmin .ta-sidebar-foot { border-top-color: #213c38; }
body.sa-tailadmin .ta-sidebar-logout { color: #6b5f55; }
body.sa-tailadmin .ta-sidebar-logout:hover { background: #213c38; color: #f9f5ec; }
body.sa-tailadmin .ta-topbar__term {
  background: #213c38;
  color: #ecd7b6;
  border-radius: 6px;
  font-weight: 500;
}
body.sa-tailadmin .sa-page-head {
  padding-bottom: 1rem;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border-color);
}
body.sa-tailadmin .sa-page-head h1 { font-size: 1.5rem; font-weight: 600; }

.hero-banner {
  background: #2d4f4a !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  border: 1px solid #213c38;
}
.hero-banner--accent { background: #2d4f4a !important; }
.hero-banner__content h3 { font-weight: 600; }
.hero-banner__content p { color: #6b5f55; }

.dash-stat-card {
  background: #fff !important;
  color: var(--text-heading) !important;
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: none;
  min-height: 128px;
}
.dash-stat-card::before { display: none; }
.dash-stat-card__label { color: var(--text-muted); }
.dash-stat-card__value { font-weight: 600; font-size: 1.75rem; font-variant-numeric: tabular-nums; }
.dash-stat-card__icon {
  border-radius: 8px;
  background: #f6efe1;
  color: #0b7551;
}
.dash-stat-card--students .dash-stat-card__icon,
.dash-stat-card--classes .dash-stat-card__icon,
.dash-stat-card--teachers .dash-stat-card__icon,
.dash-stat-card--pending .dash-stat-card__icon {
  background: #f6efe1;
  color: #0b7551;
}
.dash-stat-card__link { color: #0b7551; font-weight: 500; }
.dash-next li,
.setup-card__steps li {
  background: #f9f5ec;
  border: 1px solid var(--border-color);
  border-radius: 8px;
}
.setup-card__steps li.is-done { background: #f6efe1; }
.setup-card__kicker { color: #0b7551; }
.dash-panel__head { border-bottom: 1px solid var(--border-color); padding-bottom: 0.85rem; }

.ta-stat-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: none;
}
.ta-stat-card__icon { border-radius: 8px; }
.ta-stat-card__icon--blue,
.ta-stat-card__icon--green,
.ta-stat-card__icon--orange,
.ta-stat-card__icon--violet {
  background: #f6efe1;
  color: #0b7551;
}
.ta-stat-card__label { color: var(--text-muted); font-weight: 500; }
.ta-stat-card__value { font-weight: 600; font-variant-numeric: tabular-nums; }

.current-mock-panel {
  background: #fff;
  border-left: 3px solid #0b7551 !important;
}
.current-mock-panel__kicker { color: #0b7551; }
.current-mock-panel h2 { font-weight: 600; }

.sheet-table-card { padding: 0; overflow: hidden; }
.sheet-table-card__head {
  padding: 1rem 1.15rem 0.85rem;
  margin: 0;
  border-bottom: 1px solid var(--border-color);
}
.sheet-table-card__head h2 { font-size: 0.95rem; font-weight: 600; }
.progress-track { background: #e3dccf; height: 6px; }
.progress-track__bar--ok { background: #0b7551; }

.score-hub .card { margin: 0; }
.score-picker__title { font-size: 1rem; font-weight: 600; }

.profile-empty { padding: 2.5rem 1.25rem; }
.profile-empty__icon {
  background: #f6efe1;
  color: #0b7551;
  border-radius: 10px;
}
.mock-pick-card,
.mock-card {
  box-shadow: none !important;
}
.mock-card--ready { box-shadow: none !important; border-left: 3px solid #0b7551 !important; }
.mock-card__status--primary { background: #f6efe1; color: #096343; }

body.auth-body { background: #efe7d6; }
.auth-visual { background: #2d4f4a; }
.auth-visual__kicker { color: #e7c595; }
.auth-visual__points li { color: #d5c9b4; font-weight: 500; }
.auth-visual__points i { background: rgba(15, 118, 110, 0.25); color: #e7c595; border-radius: 6px; }
.auth-visual__foot { color: #6b5f55; }
.auth-card {
  border: 1px solid var(--border-color);
  border-radius: 12px;
  box-shadow: none;
}
.auth-kicker { color: #0b7551; font-weight: 600; }
.auth-input {
  border-radius: 6px;
  background: #fff;
  border: 1px solid #d5c9b4;
}
.auth-input > i { color: #6b5f55; }
.auth-wrap { background: #efe7d6; }

.toast { border-radius: 8px; font-size: 0.875rem; }

@media (max-width: 767px) {
  table.data:not(.se-grid-table):not(.roster-table):not(.grade-bounds) tr {
    border: 1px solid var(--border-color);
    border-radius: 8px;
    box-shadow: none;
  }
}

@media (min-width: 768px) {
  .main-content { padding: 1.75rem 2rem 2.5rem; }
  .page-title { font-size: 1.6rem; }
}

.se-grid-table th,
.se-grid-table td {
  font-family: var(--font-sans);
  font-variant-numeric: tabular-nums;
}
.se-grid-table th,
.se-grid-table thead th {
  background: #f9f5ec !important;
  font-size: 0.6875rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5a4d3f;
}
.se-grid-table tbody tr.se-row-focused td { background: #f6efe1 !important; }
.se-ws-toolbar {
  gap: 8px;
}
.roster-table th,
.grade-bounds th {
  background: #f9f5ec;
}

@media print {
  .sidebar, .school-brand-bar, .ta-topbar, .top-navbar { display: none !important; }
}

.consent-modal[hidden] { display: none !important; }
.consent-modal {
  position: fixed;
  inset: 0;
  z-index: 1400;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.consent-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}
.consent-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 32rem);
  background: #fff;
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 1.35rem 1.4rem 1.25rem;
  color: var(--text-body);
}
.consent-modal__title {
  margin: 0 0 8px;
  font-size: 1.15rem;
  color: var(--text-heading);
}
.consent-modal__lead,
.consent-modal__note {
  margin: 0 0 12px;
  color: var(--text-muted);
}
.consent-modal__list {
  margin: 0 0 16px;
  padding-left: 1.15rem;
}
.consent-modal__list li { margin: 0 0 6px; }
.consent-modal__check,
.consent-modal__field {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0 0 16px;
  font-weight: 500;
}
.consent-modal__field { flex-direction: column; gap: 6px; }
.consent-modal__field textarea {
  width: 100%;
  resize: vertical;
  min-height: 6rem;
}
.consent-modal__check input { margin-top: 3px; }
.consent-modal__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: wrap;
}
body.consent-open { overflow: hidden; }
tr.is-flagged td { background: #fff7ed; }
td .hint { display: block; margin-top: 4px; }