:root {
  color-scheme: light;
  --ink: #1a2130;
  --muted: #64707e;
  --line: #dde2ea;
  --soft: #f5f7fb;
  --panel: #ffffff;
  --panel-rgb: 255, 255, 255;
  --bg: #eef1f6;
  /* Hero Tech Academy brand palette: deep navy + gold, matching the
     logo/marketing artwork (see src/assets/logo-*.png and
     pwa-icon-*.png, recolored to the same hues). */
  --brand: #0a316a;
  --brand-dark: #071d40;
  --brand-light: #e6ecf6;
  --gold: #bf8a12;
  --coral: #c9573f;
  --blue: #315f9f;
  --green: #2f7a4f;
  --cream: #fbf3e7;
  --success: #1f7a4f;
  --success-bg: #ddf2e6;
  --danger: #a2372a;
  --danger-bg: #fbe1dd;
  --warning: #86601a;
  --warning-bg: #fdf0d2;
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 18px;
  --shadow-sm: 0 2px 8px rgba(24, 33, 51, 0.06);
  --shadow: 0 18px 40px rgba(20, 32, 46, 0.1);
}

/* Dark mode: a parallel token set, switched by a `data-theme="dark"`
   attribute on <html> (see toggleTheme()/initTheme() in app.js). Nearly
   every color used across the app is one of these variables, so this
   block alone re-themes the whole site — marketing page, every login
   screen, and the dashboard — with no per-component dark-mode CSS
   needed elsewhere. */
[data-theme="dark"] {
  color-scheme: dark;
  --ink: #eef2f6;
  --muted: #99a7b6;
  --line: #2b3646;
  --soft: #1a2330;
  --panel: #202b3a;
  --panel-rgb: 32, 43, 58;
  --bg: #10161f;
  /* Same navy + gold brand. --brand is deliberately a mid-tone blue, not
     a light one: it's used BOTH as text/borders/icons against the dark
     page (wants to be light) AND as a solid button fill with white text
     on top (wants to be dark enough for that white text to read). This
     value is the compromise that keeps both legible; --brand-dark stays
     reserved for hover/pressed states, where it can afford to go darker. */
  --brand: #4878b8;
  --brand-dark: #3d6fa8;
  --brand-light: #1b2a42;
  --gold: #e8ba3d;
  --coral: #e0836d;
  --blue: #6d9bdd;
  --green: #57b483;
  --cream: #2c2515;
  --success: #4cc290;
  --success-bg: #163627;
  --danger: #e2685a;
  --danger-bg: #3a1f1c;
  --warning: #e0b04a;
  --warning-bg: #382c14;
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.5);
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: 0;
  transition: background 0.2s ease, color 0.2s ease;
}

button,
input,
select {
  font: inherit;
}

button {
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  border-radius: var(--radius-sm);
  min-height: 38px;
  padding: 0 14px;
  cursor: pointer;
  font-weight: 600;
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

button:not(:disabled):hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

button:disabled {
  cursor: not-allowed;
  opacity: 0.6;
  transform: none !important;
}

button:hover,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid rgba(10, 49, 106, 0.18);
  border-color: var(--brand);
}

#app {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 280px 1fr;
}

.sidebar {
  background: var(--panel);
  color: var(--ink);
  border-inline-end: 1px solid var(--line);
  padding: 22px 16px;
  display: flex;
  flex-direction: column;
  gap: 22px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.brand {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-inline-start: 6px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  object-fit: contain;
  flex-shrink: 0;
}

.avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff;
  font-weight: 800;
}

.brand span,
.security-note span,
.eyebrow,
small,
td span,
dd,
.class-tile p {
  color: var(--muted);
}

.sidebar .brand span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

nav {
  display: grid;
  gap: 4px;
}

.nav-item {
  width: 100%;
  justify-content: flex-start;
  display: flex;
  align-items: center;
  gap: 12px;
  background: transparent;
  color: var(--muted);
  border: 1px solid transparent;
  border-radius: 10px;
  font-weight: 700;
  position: relative;
  padding-inline-start: 14px;
}

.nav-item span {
  width: 22px;
  text-align: center;
  color: var(--muted);
}

.nav-item:hover {
  background: var(--soft);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

.nav-item.active {
  background: var(--brand-light);
  /* var(--brand), not var(--brand-dark) — see the comment on --brand in
     the dark-mode token block: --brand-dark is unreadable here once the
     page is dark. */
  color: var(--brand);
}

.nav-item.active span {
  color: var(--brand);
}

/* The accent bar that marks the active tab — bleeds slightly past the
   sidebar's own padding on the "start" edge (left in LTR, right in RTL)
   and gets its outer corners rounded away from that edge, so it reads
   like a tab notch rather than a plain border. */
.nav-item.active::before {
  content: "";
  position: absolute;
  inset-inline-start: -16px;
  top: 50%;
  transform: translateY(-50%);
  width: 4px;
  height: 60%;
  background: var(--brand);
  border-radius: 0 4px 4px 0;
}

[dir="rtl"] .nav-item.active::before {
  border-radius: 4px 0 0 4px;
}

.security-note {
  margin-top: auto;
  border: 1px solid var(--line);
  background: var(--soft);
  padding: 14px;
  border-radius: 12px;
  display: grid;
  gap: 5px;
}

.main {
  min-width: 0;
}

.topbar {
  min-height: 86px;
  background: rgba(var(--panel-rgb), 0.88);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: minmax(230px, 1fr) minmax(280px, 440px) auto auto;
  gap: 16px;
  align-items: center;
  padding: 16px 24px;
  position: sticky;
  top: 0;
  z-index: 2;
  backdrop-filter: blur(10px);
}

/* Every direct child gets min-width:0 so it can actually shrink to its
   grid track's width instead of forcing the track — and the whole
   .topbar, and the page — wider than the viewport. Grid items default to
   min-width:auto (their content's min-content size), which is exactly
   the failure mode .account-chip's own comment above describes. */
.topbar > * {
  min-width: 0;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-size: 26px;
}

h2 {
  font-size: 18px;
}

.eyebrow {
  text-transform: uppercase;
  font-size: 12px;
  font-weight: 800;
}

.search,
.role-switcher,
.settings-grid label {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.search input,
.role-switcher select,
.settings-grid input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 40px;
  padding: 0 12px;
  color: var(--ink);
  background: var(--panel);
}

.content {
  padding: 24px;
  display: grid;
  gap: 20px;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 14px;
}

.metric,
.panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
}

.metric {
  padding: 16px;
  display: grid;
  gap: 9px;
  min-height: 118px;
  border-top: 3px solid var(--brand);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
  align-content: start;
}

.metric-icon {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: var(--brand-light);
  color: var(--brand);
  font-size: 16px;
}

.metric-grid .metric:nth-child(2) .metric-icon {
  background: color-mix(in srgb, var(--coral) 18%, transparent);
  color: var(--coral);
}

.metric-grid .metric:nth-child(3) .metric-icon {
  background: color-mix(in srgb, var(--gold) 18%, transparent);
  color: var(--gold);
}

.metric-grid .metric:nth-child(4) .metric-icon {
  background: color-mix(in srgb, var(--blue) 18%, transparent);
  color: var(--blue);
}

.metric-grid .metric:nth-child(5) .metric-icon {
  background: color-mix(in srgb, var(--green) 18%, transparent);
  color: var(--green);
}

.metric:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.metric-grid .metric:nth-child(2) {
  border-top-color: var(--coral);
}

.metric-grid .metric:nth-child(3) {
  border-top-color: var(--gold);
}

.metric-grid .metric:nth-child(4) {
  border-top-color: var(--blue);
}

.metric-grid .metric:nth-child(5) {
  border-top-color: var(--green);
}

.metric-grid .metric:nth-child(6) {
  border-top-color: var(--brand);
}

.metric span,
dt {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.metric strong {
  font-size: 28px;
}

.two-col,
.split {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, 0.8fr);
  gap: 20px;
}

.panel {
  padding: 18px;
  min-width: 0;
}

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.action,
.student-card,
.class-row,
.results article {
  display: flex;
  gap: 12px;
  align-items: center;
  border-top: 1px solid var(--line);
  padding: 13px 0;
}

.action:first-of-type,
.student-card:first-of-type,
.class-row:first-of-type {
  border-top: 0;
}

.priority {
  color: #fff;
  background: var(--gold);
  border-radius: 8px;
  padding: 4px 8px;
  min-width: 56px;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
}

.student-main,
.action div,
.class-row {
  min-width: 0;
  flex: 1;
  display: grid;
  gap: 5px;
}

.meter {
  height: 8px;
  background: var(--line);
  border-radius: 99px;
  overflow: hidden;
}

.meter span {
  display: block;
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--gold));
}

.chart-row,
.report-row {
  display: grid;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--line);
}

.chart-row div,
.report-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

/* A small CSS-only donut, built from a conic-gradient rather than a chart
   library — set --donut-value (0-100) and --donut-color inline. Used on
   the manager dashboard for at-a-glance completion/attendance figures. */
.donut {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--donut-color, var(--brand)) calc(var(--donut-value, 0) * 1%), var(--soft) 0);
  justify-self: center;
}

.donut::after {
  content: attr(data-label);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: var(--panel);
  display: grid;
  place-items: center;
  font-size: 16px;
  font-weight: 800;
  color: var(--ink);
}

.donut-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 8px 0 4px;
}

.donut-legend {
  display: grid;
  gap: 6px;
  font-size: 13px;
}

.donut-legend span {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--muted);
}

.donut-legend span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--dot-color, var(--brand));
}

/* Toggle switch for boolean settings (see settingsView() in app.js) —
   replaces a plain checkbox with a pill/thumb control, RTL-aware via
   inset-inline-start so the thumb slides the correct physical direction
   automatically. */
.switch {
  --switch-w: 42px;
  --switch-h: 24px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  color: var(--ink);
  font-weight: 600;
  font-size: 13px;
}

.switch input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}

.switch-track {
  position: relative;
  width: var(--switch-w);
  height: var(--switch-h);
  border-radius: 999px;
  background: var(--line);
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.switch-track::before {
  content: "";
  position: absolute;
  inset-inline-start: 3px;
  top: 3px;
  width: calc(var(--switch-h) - 6px);
  height: calc(var(--switch-h) - 6px);
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
  transition: inset-inline-start 0.15s ease;
}

.switch input:checked + .switch-track {
  background: var(--brand);
}

.switch input:checked + .switch-track::before {
  inset-inline-start: calc(var(--switch-w) - var(--switch-h) + 3px);
}

.switch input:focus-visible + .switch-track {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.toolbar button:first-child,
.panel-head button:first-of-type {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 4px 12px rgba(10, 49, 106, 0.25);
}

.toolbar button:first-child:hover,
.panel-head button:first-of-type:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
  box-shadow: 0 6px 16px rgba(7, 29, 64, 0.32);
}

.table-panel {
  overflow-x: auto;
  border-radius: var(--radius);
}

table {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
}

th,
td {
  padding: 13px 10px;
  text-align: start;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}

tbody tr {
  transition: background 0.12s ease;
}

tbody tr:hover {
  background: var(--soft);
}

th {
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--soft);
}

td strong,
td span {
  display: block;
}

.badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 28px;
  border-radius: 999px;
  padding: 0 10px;
  font-size: 12px;
  font-weight: 800;
  /* var(--brand), not var(--brand-dark): in dark mode --brand-dark is a
     deep navy that's nearly unreadable against the --brand-light wash
     right below it. --brand is the one token in this pair that's always
     lightened enough for the opposite mode's background. */
  color: var(--brand);
  background: var(--brand-light);
  white-space: nowrap;
}

.paused,
.draft,
.monitor,
.invited {
  color: var(--warning);
  background: var(--warning-bg);
}

.notify,
.failed-retrying {
  color: var(--danger);
  background: var(--danger-bg);
}

.published,
.active,
.delivered,
.opened {
  color: var(--success);
  background: var(--success-bg);
}

.profile-hero {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 18px;
  box-shadow: var(--shadow);
}

.profile-hero.compact {
  box-shadow: none;
  border: 0;
  padding: 0 0 16px;
}

dl {
  display: grid;
  gap: 14px;
  margin: 0;
}

dt,
dd {
  margin: 0;
}

.report-grid,
.settings-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

/* Card-grid for groups/assignment-style tiles — auto-fills as many
   columns as fit rather than a fixed 2-up layout, matching techheroes'
   responsive card grids. */
.class-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 18px;
}

.class-tile {
  display: grid;
  gap: 12px;
  border-top: 3px solid var(--brand);
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.class-tile:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}

.class-tile > button:last-child {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
  margin-top: 4px;
}

.class-tile > button:last-child:hover {
  background: var(--brand-dark);
  border-color: var(--brand-dark);
}

.results article {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 6px 16px;
  padding: 14px 0;
  border-top: 1px solid var(--line);
}

.results article:first-child {
  border-top: 0;
}

.results small {
  grid-column: 2;
}

.settings-grid .panel {
  display: grid;
  gap: 14px;
  align-content: start;
}

.checkline {
  grid-template-columns: 20px 1fr;
  align-items: center;
  color: var(--ink);
}

.checkline input {
  width: auto;
}

code {
  background: var(--soft);
  color: var(--ink);
  border-radius: 6px;
  padding: 3px 6px;
}

.empty {
  color: var(--muted);
}

@media (max-width: 1100px) {
  #app {
    grid-template-columns: 1fr;
  }

  .sidebar {
    position: static;
  }

  nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .topbar,
  .metric-grid,
  .two-col,
  .split,
  .class-grid,
  .report-grid,
  .settings-grid {
    grid-template-columns: 1fr;
  }

  .metric-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .content,
  .topbar,
  .sidebar {
    padding: 16px;
  }

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

  nav {
    grid-template-columns: 1fr;
  }

  .results article {
    grid-template-columns: 1fr;
  }

  .results small {
    grid-column: auto;
  }
}

.auth-screen {
  grid-column: 1 / -1;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #0a1626, var(--brand-dark));
  padding: 24px;
}

.auth-card {
  width: min(380px, 100%);
  background: var(--panel);
  border-radius: 12px;
  box-shadow: var(--shadow);
  padding: 32px;
  display: grid;
  gap: 14px;
  justify-items: center;
  text-align: center;
}

.auth-card label {
  width: 100%;
  text-align: left;
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.auth-card input {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  min-height: 42px;
  padding: 0 12px;
  color: var(--ink);
}

.auth-card button {
  width: 100%;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  min-height: 42px;
  font-weight: 700;
}

.auth-card small {
  color: var(--muted);
}

.auth-error {
  width: 100%;
  background: var(--danger-bg);
  color: var(--danger);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 0;
}

/* flex-wrap here is load-bearing on mobile: the topbar's grid column that
   holds this chip is "auto" sized (see .topbar below), so a grid item's
   default min-width:auto makes it respect its content's min-content size
   — for a non-wrapping flex row that's the SUM of every child's own width
   (lang switcher + install/theme buttons + name/role + sign-out button),
   which is wider than a phone screen. Wrapping onto a second line instead
   of forcing that width is what actually stops the whole page from
   overflowing sideways and needing a pinch-zoom-out to see the rest. */
.account-chip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  justify-self: end;
  min-width: 0;
}

.account-chip div {
  display: grid;
  text-align: end;
  line-height: 1.3;
}

.account-chip span {
  font-size: 12px;
  color: var(--muted);
}

.credential-reveal dl {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  display: grid;
  gap: 14px;
}

.credential-reveal.error {
  border-color: var(--coral);
}

.credential-reveal code {
  font-size: 15px;
}

.muted-pill {
  color: var(--muted);
  font-size: 12px;
}

/* An inline "View" next to a badge/label — not a standalone action, so it
   shouldn't look like a full button (see gradeRosterRows() in app.js). */
.link-button {
  background: none;
  border: none;
  padding: 0;
  color: var(--brand);
  font-size: 12px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  width: auto;
}

.link-button:hover {
  opacity: 0.8;
}

.hint {
  color: var(--muted);
  font-size: 13px;
}

.hint button {
  min-height: auto;
  padding: 2px 8px;
  font-size: 12px;
}

/* Specificity note: `.auth-card button` (below, in the auth-card block)
   is a class+type selector, which beats a lone `.auth-back` class
   selector regardless of source order — so this has to be written as
   `.auth-card .auth-back` (class+class) to actually win and keep the
   back link looking like a quiet text link instead of a full-width
   filled button. */
.auth-back,
.auth-card .auth-back,
.auth-chooser-card .auth-back {
  justify-self: start;
  width: auto;
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  font-size: 13px;
  padding: 0;
  min-height: auto;
  font-weight: 600;
}

/* Theme toggle: one small round button, reused in the sidebar/topbar,
   the marketing nav, and every auth screen. */
.theme-toggle {
  width: 38px;
  min-height: 38px;
  padding: 0;
  border-radius: 999px;
  font-size: 16px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--soft);
  border-color: var(--line);
  color: var(--ink);
  flex: 0 0 auto;
}

.auth-theme-toggle {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  color: #fff;
}

.auth-screen {
  position: relative;
}

.auth-audience-tag {
  background: var(--brand-light);
  color: var(--brand);
  border-radius: 999px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Login chooser: the two audience tiles a visitor picks between before
   they ever see an email/password field (see loginChooserScreen() in
   app.js). */
.auth-chooser-card {
  width: min(560px, 100%);
  background: var(--panel);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 36px;
  display: grid;
  gap: 16px;
  justify-items: center;
  text-align: center;
}

.auth-chooser-grid {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 8px;
}

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

.auth-chooser-tile {
  display: grid;
  gap: 8px;
  justify-items: center;
  text-align: center;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 16px;
  min-height: auto;
  color: var(--ink);
}

.auth-chooser-tile strong {
  font-size: 16px;
}

.auth-chooser-tile span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 400;
}

.auth-chooser-icon {
  font-size: 32px;
}

.auth-chooser-tile:hover {
  border-color: var(--brand);
  background: var(--brand-light);
  box-shadow: var(--shadow-sm);
}

.auth-chooser-staff:hover {
  border-color: var(--gold);
  background: var(--cream);
}

/* ---------- Marketing / homepage ---------- */

.marketing {
  grid-column: 1 / -1;
  background:
    radial-gradient(circle at 12% 8%, rgba(10, 49, 106, 0.09), transparent 45%),
    radial-gradient(circle at 88% 4%, rgba(201, 95, 79, 0.09), transparent 42%),
    radial-gradient(circle at 55% 34%, rgba(191, 138, 18, 0.07), transparent 40%),
    var(--bg);
  color: var(--ink);
  min-height: 100vh;
}

/* flex-wrap is a safety net here, same reasoning as .account-chip further
   down: .m-nav-links already hides below 900px (see that breakpoint), but
   the remaining items (brand, lang switcher, social icons, sign-in
   button) are still a non-wrapping row with no shrink room on a narrow
   phone — wrapping onto a second line beats forcing the page wider than
   the viewport. */
.m-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
  padding: 16px 32px;
  border-bottom: 1px solid var(--line);
  position: sticky;
  top: 0;
  background: rgba(var(--panel-rgb), 0.92);
  backdrop-filter: blur(10px);
  z-index: 3;
  transition: box-shadow 0.25s ease;
}

.m-nav.scrolled {
  box-shadow: 0 6px 20px rgba(30, 40, 60, 0.08);
}

.m-nav .brand {
  gap: 10px;
}

.m-nav-links {
  display: flex;
  gap: 24px;
  font-weight: 700;
  font-size: 14px;
}

.m-nav-links a {
  color: var(--ink);
  text-decoration: none;
}

.m-nav-links a:hover {
  color: var(--brand);
}

.m-login-button {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
  padding: 0 20px;
}

.m-nav-social {
  display: flex;
  align-items: center;
  gap: 10px;
}

.m-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.m-social-link svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.m-social-link span {
  display: none;
}

.m-social-link:hover {
  color: var(--brand);
}

.m-contact-social,
.m-footer-social {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.m-contact-social .m-social-link,
.m-footer-social .m-social-link {
  font-size: 14px;
}

.m-contact-social .m-social-link span,
.m-footer-social .m-social-link span {
  display: inline;
}

.m-hero {
  text-align: center;
  max-width: 760px;
  margin: 0 auto;
  padding: 72px 24px 56px;
  display: grid;
  gap: 18px;
  justify-items: center;
  position: relative;
  animation: hero-rise 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.m-hero h1 {
  font-size: 42px;
  line-height: 1.15;
  margin: 0;
}

.m-hero .eyebrow {
  color: var(--coral);
  letter-spacing: 0.08em;
}

.m-sub {
  color: var(--muted);
  font-size: 16px;
  max-width: 640px;
}

.m-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 8px;
}

.m-cta-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* The brand's gold, not coral — this is the single most prominent
     button on the page, so it should read as "Hero Tech Academy" rather
     than an unrelated accent color. Dark navy text (not white) on gold:
     navy-on-gold contrast is roughly 4x better than white-on-gold would
     be here (gold is an inherently light hue). */
  background: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 8px;
  color: var(--brand-dark);
  font-weight: 700;
  padding: 0 22px;
  min-height: 46px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(191, 138, 18, 0.28);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}

.m-cta-primary:hover {
  filter: brightness(0.94);
  transform: translateY(-2px);
  box-shadow: 0 10px 22px rgba(191, 138, 18, 0.34);
}

.m-cta-secondary {
  transition: transform 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.m-cta-secondary:hover {
  transform: translateY(-2px);
}

.m-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 28px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  width: 100%;
}

.m-stat {
  display: grid;
  gap: 2px;
  text-align: center;
  min-width: 120px;
}

.m-stat strong {
  font-size: 22px;
  color: var(--brand);
}

.m-stat:nth-child(2) strong {
  color: var(--coral);
}

.m-stat:nth-child(3) strong {
  color: var(--gold);
}

.m-stat span {
  font-size: 12px;
  color: var(--muted);
  font-weight: 600;
}

.m-age {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  background: var(--soft);
  border-radius: 999px;
  padding: 2px 10px;
  margin-left: 6px;
  vertical-align: middle;
}

.m-cta-secondary {
  display: inline-flex;
  align-items: center;
  /* var(--line) is meant for subtle dividers, not a button outline — in
     dark mode it's nearly invisible against --bg (both are dark navy).
     var(--muted) gives this button an outline you can actually see in
     both themes. */
  border: 1px solid var(--muted);
  border-radius: 8px;
  padding: 0 22px;
  min-height: 46px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
}

.m-cta-secondary:hover {
  border-color: var(--brand);
  color: var(--brand);
}

.m-section {
  max-width: 1080px;
  margin: 0 auto;
  padding: 56px 24px;
  border-top: 1px solid var(--line);
  display: grid;
  gap: 20px;
}

.m-section h2 {
  font-size: 28px;
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
}

.m-section h2::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 46px;
  height: 4px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--brand), var(--coral));
}

.m-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.m-review-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--panel);
  border: 1.5px solid var(--gold);
  color: var(--gold);
  font-weight: 700;
  border-radius: 999px;
  padding: 0 20px;
  min-height: 44px;
  white-space: nowrap;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.m-review-cta span {
  color: var(--gold);
  font-size: 16px;
}

.m-review-cta:hover {
  background: var(--gold);
  color: var(--brand-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(191, 138, 18, 0.3);
}

.m-review-cta:hover span {
  color: var(--brand-dark);
}

.m-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.m-card {
  background: var(--soft);
  border: 1px solid var(--line);
  border-top: 4px solid var(--brand);
  border-radius: 12px;
  padding: 22px;
  display: grid;
  gap: 10px;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.m-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

#features .m-cards .m-card:nth-child(2) {
  border-top-color: var(--coral);
}

#features .m-cards .m-card:nth-child(3) {
  border-top-color: var(--gold);
}

.m-review {
  border-top-color: var(--line);
}

.m-card h3 {
  margin: 0;
  font-size: 18px;
}

.m-card p {
  color: var(--muted);
  margin: 0;
}

.m-review p {
  color: var(--ink);
  font-style: italic;
}

.m-review-role {
  color: var(--muted);
  font-size: 13px;
}

.m-review-stars {
  color: var(--gold);
  font-size: 14px;
  letter-spacing: 1px;
}

.sample-tag {
  display: inline-flex;
  align-items: center;
  background: var(--warning-bg);
  color: var(--warning);
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 12px;
  font-weight: 800;
  margin-right: 6px;
  width: fit-content;
}

.m-review-form {
  display: grid;
  gap: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
  max-width: 640px;
}

.m-review-form h3 {
  margin: 0;
  font-size: 18px;
}

.m-review-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.m-review-form input,
.m-review-form select,
.m-review-form textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  width: 100%;
}

.m-review-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.m-review-form button {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
  min-height: 44px;
  justify-self: start;
  padding: 0 22px;
}

.m-review-form small {
  color: var(--muted);
}

.m-compare-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.m-compare-card {
  position: relative;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 26px 22px 22px;
  box-shadow: 0 4px 14px rgba(30, 40, 60, 0.05);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}

.m-compare-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
}

.m-compare-card h3 {
  margin: 0 0 16px;
  font-size: 17px;
}

.m-compare-highlight {
  background: linear-gradient(165deg, var(--brand-dark), var(--brand));
  border-color: var(--brand-dark);
  color: #fff;
  transform: scale(1.03);
  box-shadow: 0 16px 34px rgba(7, 29, 64, 0.28);
}

.m-compare-highlight:hover {
  transform: scale(1.03) translateY(-4px);
}

.m-compare-highlight h3 {
  color: #fff;
}

.m-compare-badge {
  position: absolute;
  top: -12px;
  right: 20px;
  background: var(--gold);
  color: var(--brand-dark);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 999px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.18);
}

.m-compare-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px;
}

.m-compare-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  line-height: 1.4;
}

.m-compare-highlight .m-compare-row {
  color: rgba(255, 255, 255, 0.92);
}

.m-compare-row .cmp-icon {
  flex-shrink: 0;
  margin-top: 1px;
}

@media (max-width: 760px) {
  .m-compare-grid {
    grid-template-columns: 1fr;
  }

  .m-compare-highlight {
    transform: none;
  }

  .m-compare-highlight:hover {
    transform: translateY(-4px);
  }
}

.cmp-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-weight: 800;
}

.cmp-yes {
  background: var(--success-bg);
  color: var(--success);
}

.cmp-no {
  background: var(--danger-bg);
  color: var(--danger);
}

.cmp-partial {
  background: var(--warning-bg);
  color: var(--warning);
}

.m-contact-grid {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 32px;
  align-items: start;
}

.m-contact-form {
  display: grid;
  gap: 14px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 24px;
}

.m-contact-form label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.m-contact-form input,
.m-contact-form textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  width: 100%;
}

.m-contact-form .checkline {
  grid-template-columns: 18px 1fr;
  align-items: center;
  color: var(--ink);
  font-weight: 400;
}

.m-contact-form .checkline input {
  width: auto;
}

.m-contact-form button {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
  min-height: 44px;
}

.m-success {
  background: var(--success-bg);
  color: var(--success);
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 13px;
  margin: 0;
}

.notice-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.notice-dismiss {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  min-height: 22px;
  border-radius: 999px;
  border: none;
  background: rgba(0, 0, 0, 0.08);
  color: inherit;
  font-size: 15px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}

.m-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 28px 32px 40px;
  color: var(--muted);
  font-size: 13px;
}

.m-footer-social {
  margin-top: 0;
}

.promo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 28, 38, 0.6);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 50;
  animation: promo-fade-in 0.2s ease-out;
}

@keyframes promo-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.promo-modal {
  position: relative;
  background: var(--cream);
  border-radius: 20px;
  box-shadow: var(--shadow);
  width: min(420px, 100%);
  max-height: 90vh;
  overflow: hidden auto;
  display: grid;
  animation: promo-pop-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes promo-pop-in {
  from {
    opacity: 0;
    transform: scale(0.94) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.promo-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 34px;
  height: 34px;
  min-height: 34px;
  border-radius: 999px;
  border: none;
  background: rgba(255, 255, 255, 0.85);
  color: var(--ink);
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}

.promo-modal img {
  width: 100%;
  display: block;
}

.review-modal {
  position: relative;
  background: var(--panel);
  border-radius: 20px;
  box-shadow: var(--shadow);
  width: min(560px, 100%);
  max-height: 90vh;
  overflow: hidden auto;
  animation: promo-pop-in 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
  padding: 8px;
}

.review-modal .m-review-form {
  max-width: none;
  background: transparent;
  border: none;
  padding: 28px 26px 22px;
}

.promo-modal-body {
  padding: 18px 22px 22px;
  display: grid;
  gap: 12px;
  text-align: center;
}

.promo-modal-body p {
  margin: 0;
  color: var(--ink);
  font-weight: 600;
}

.promo-cta {
  background: var(--gold);
  border: 1px solid var(--gold);
  color: var(--brand-dark);
  font-weight: 700;
  min-height: 46px;
  border-radius: 8px;
}

.promo-cta:hover {
  filter: brightness(0.94);
}

/* ---------- Scroll-reveal (marketing page sections fade/slide in) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

.reveal.in-view {
  opacity: 1;
  transform: none;
}

.m-cards .reveal:nth-child(1) {
  transition-delay: 0s;
}

.m-cards .reveal:nth-child(2) {
  transition-delay: 0.08s;
}

.m-cards .reveal:nth-child(3) {
  transition-delay: 0.16s;
}

@media (prefers-reduced-motion: reduce) {
  .m-hero,
  .reveal,
  .promo-modal,
  .promo-overlay {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .m-cta-primary:hover,
  .m-cta-secondary:hover,
  .m-card:hover {
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .m-nav-links {
    display: none;
  }

  .m-nav-social .m-social-link span {
    display: none;
  }

  .m-cards {
    grid-template-columns: 1fr;
  }

  .m-contact-grid {
    grid-template-columns: 1fr;
  }

  .m-review-form-grid {
    grid-template-columns: 1fr;
  }

  .m-hero h1 {
    font-size: 32px;
  }
}

/* ---------- Dashboard modals (Add Class / Instructor / Student / Manager / Group / Material / Assignment) ---------- */

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(23, 28, 38, 0.55);
  display: grid;
  place-items: center;
  padding: 24px;
  z-index: 60;
  animation: promo-fade-in 0.2s ease-out;
}

.modal-box {
  position: relative;
  background: var(--panel);
  border-radius: 16px;
  box-shadow: var(--shadow);
  width: min(480px, 100%);
  max-height: 90vh;
  overflow: auto;
  padding: 24px;
  display: grid;
  gap: 14px;
  animation: promo-pop-in 0.24s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.modal-box h2 {
  margin: 0;
  padding-inline-end: 24px;
}

.modal-box form {
  display: grid;
  gap: 12px;
}

.modal-box label {
  display: grid;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}

.modal-box label.checkline {
  grid-template-columns: 18px 1fr;
  align-items: center;
  color: var(--ink);
  font-weight: 400;
}

.modal-box label.checkline input {
  width: auto;
}

.modal-box input,
.modal-box select,
.modal-box textarea {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 12px;
  color: var(--ink);
  background: var(--panel);
  font: inherit;
  width: 100%;
}

.modal-close {
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 32px;
  height: 32px;
  min-height: 32px;
  border-radius: 999px;
  border: none;
  background: var(--soft);
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
  display: grid;
  place-items: center;
  padding: 0;
}

.modal-actions {
  display: flex;
  justify-content: flex-end;
}

.modal-actions button {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  font-weight: 700;
  min-height: 42px;
  padding: 0 18px;
}

.modal-checklist {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  display: grid;
  gap: 8px;
  max-height: 220px;
  overflow-y: auto;
}

.modal-checklist legend {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  padding: 0 4px;
}

.modal-existing-list {
  display: grid;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
}

.modal-existing-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
}

.modal-existing-row > div {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.modal-existing-row span {
  color: var(--muted);
}

@media (prefers-reduced-motion: reduce) {
  .modal-box,
  .modal-overlay {
    animation: none !important;
  }
}

/* ---------- "How It Works" steps + program skill tags ---------- */

.m-step {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 999px;
  background: var(--brand);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  margin-bottom: 8px;
}

.m-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
}

.m-skill-tag {
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 600;
  color: var(--brand);
}

/* ---------- Students tab: clickable rows + attendance-taking modal ---------- */

.table-panel tbody tr[onclick] {
  cursor: pointer;
}

.table-panel tbody tr.selected-row {
  background: var(--soft);
}

.attendance-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 4px 0;
}

.attendance-row span {
  font-size: 13px;
  font-weight: 600;
}

.attendance-row select,
.attendance-row input {
  width: auto;
  min-width: 120px;
  flex-shrink: 0;
}

/* Group chat (see chatView() in app.js). When a viewer can see more than
   one group's chat (a Manager, or an Instructor with several groups),
   .chat-layout puts a thread list of groups beside the active
   conversation — a two-pane layout instead of a <select> dropdown. A
   single-group viewer just gets .chat-panel at full width. */
.chat-layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.chat-threadlist {
  display: grid;
  gap: 4px;
  max-height: 560px;
  overflow-y: auto;
  align-content: start;
}

.chat-thread-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 10px;
  background: transparent;
  border: 1px solid transparent;
  text-align: start;
  width: 100%;
}

.chat-thread-item .avatar {
  width: 34px;
  height: 34px;
  font-size: 13px;
  flex-shrink: 0;
}

.chat-thread-item-label {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.chat-thread-item-label small {
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.chat-thread-item:hover {
  background: var(--soft);
  transform: none;
  box-shadow: none;
}

.chat-thread-item.active {
  background: var(--brand-light);
  border-color: var(--brand);
}

@media (max-width: 900px) {
  .chat-layout {
    grid-template-columns: 1fr;
  }

  .chat-threadlist {
    max-height: 220px;
    grid-auto-flow: column;
    grid-auto-columns: minmax(160px, 1fr);
    overflow-x: auto;
  }
}

.chat-panel {
  display: grid;
  gap: 14px;
}

.chat-panel .panel-head select {
  width: auto;
  min-width: 160px;
}

.chat-thread {
  display: grid;
  gap: 10px;
  max-height: 480px;
  overflow-y: auto;
  padding: 4px 2px;
}

.chat-message {
  position: relative;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  border-start-start-radius: 4px;
  padding: 10px 14px;
  max-width: 80%;
  justify-self: start;
}

.chat-message-own {
  background: var(--brand-light);
  border-color: var(--brand);
  justify-self: end;
  border-start-start-radius: var(--radius);
  border-end-end-radius: 4px;
}

.chat-message-meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.chat-message-meta strong {
  font-size: 13px;
}

.chat-message-meta span {
  font-size: 11px;
  color: var(--muted);
}

.chat-message p {
  margin: 0;
  font-size: 14px;
  word-wrap: break-word;
}

.chat-delete {
  position: absolute;
  top: 4px;
  inset-inline-end: 6px;
  background: transparent;
  border: none;
  color: var(--muted);
  min-height: auto;
  padding: 0 4px;
  font-size: 14px;
}

.chat-delete:hover {
  color: var(--danger);
  box-shadow: none;
  transform: none;
}

.chat-composer {
  display: flex;
  gap: 10px;
}

.chat-composer input {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  min-height: 42px;
  padding: 0 14px;
  color: var(--ink);
  background: var(--panel);
}

.chat-composer button {
  flex: 0 0 auto;
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* ---------- Code tab (in-browser Python via Pyodide) — colorful & playful on purpose ---------- */

.code-panel {
  display: flex;
  flex-direction: column;
  gap: 14px;
  /* Python's own brand blue/yellow, used as a subtle theme accent
     throughout this tab (header strip, editor gutter, focus glow, Run
     button) so it reads as "this is the Python tab" at a glance. */
  --py-blue: #4b8bbe;
  --py-yellow: #ffd43b;
}

.code-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 18px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, var(--py-blue), #6aa6d8 55%, var(--py-yellow));
  box-shadow: var(--shadow-sm);
}

.code-panel-head h2 {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  margin: 0;
}

.code-panel-badge {
  display: inline-flex;
  font-size: 20px;
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

/* Selectors below are deliberately chained (".code-panel-head .toolbar
   .code-run-btn" etc, not just ".code-run-btn") to out-specificity the
   generic ".toolbar button:first-child" rule earlier in this file, which
   would otherwise win and flatten these back to the plain brand-color
   button style. */
.code-panel-head .toolbar .code-run-btn,
.code-panel-head .toolbar .code-clear-btn {
  border-radius: 999px;
  font-weight: 700;
  border: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.code-panel-head .toolbar .code-run-btn {
  background: linear-gradient(120deg, #3ecf6a, #2fae91);
  color: #fff;
  box-shadow: 0 3px 0 #1f8a72;
}

.code-panel-head .toolbar .code-run-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 #1f8a72;
}

.code-panel-head .toolbar .code-run-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 0 #1f8a72;
}

.code-panel-head .toolbar .code-run-btn.is-running {
  background: linear-gradient(120deg, #f2a93c, #f2764a);
  box-shadow: 0 3px 0 #c9622f;
  animation: code-run-pulse 1.1s ease-in-out infinite;
}

.code-panel-head .toolbar .code-clear-btn {
  background: #fff;
  color: var(--py-blue);
  box-shadow: 0 3px 0 var(--line);
}

.code-panel-head .toolbar .code-clear-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 0 var(--line);
}

.code-panel-head .toolbar .code-clear-btn:active {
  transform: translateY(0);
  box-shadow: 0 1px 0 var(--line);
}

@keyframes code-run-pulse {
  0%,
  100% {
    opacity: 1;
  }
  50% {
    opacity: 0.75;
  }
}

.code-editor {
  width: 100%;
  min-height: 240px;
  resize: vertical;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  tab-size: 4;
  color: var(--ink);
  background: var(--soft);
  border: 1px solid var(--line);
  border-inline-start: 5px solid var(--py-blue);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  white-space: pre;
  overflow: auto;
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.code-editor:focus {
  outline: none;
  border-inline-start-color: var(--py-yellow);
  box-shadow: 0 0 0 3px rgba(75, 139, 190, 0.25);
}

.code-output-wrap {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.code-output-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
  font-weight: 600;
  color: #d7dde5;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 8px 14px;
  background: #20242c;
}

.code-output-dots {
  display: inline-flex;
  gap: 5px;
}

.code-output-dots span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  display: inline-block;
}

.code-output-dots span:nth-child(1) {
  background: #ff5f57;
}

.code-output-dots span:nth-child(2) {
  background: #febc2e;
}

.code-output-dots span:nth-child(3) {
  background: #28c840;
}

.code-output {
  margin: 0;
  min-height: 80px;
  max-height: 360px;
  overflow: auto;
  padding: 12px 14px;
  font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-wrap: break-word;
  /* Deliberately a fixed dark "terminal" look regardless of light/dark
     theme — it's a nod to a real console, and keeps output text readable
     against a background that isn't fighting the app's own theme colors. */
  background: #15181e;
  color: #e6f7ec;
}

.code-output .hint {
  color: #8993a4;
}

/* ---------- Scratch tab (self-hosted Scratch 3.0 editor, iframed) ---------- */

.scratch-panel {
  /* Near edge-to-edge on purpose: the Scratch editor inside the iframe
     already has its own full chrome (menu bar, palette, stage) — an extra
     ring of padding here would just shrink that further, and it wants all
     the room it can get. */
  padding: 6px;
}

.scratch-frame {
  display: block;
  width: 100%;
  /* Scratch's own UI assumes a fairly generous canvas (it's built for a
     desktop-ish window, same as the real editor) — tall enough that the
     block palette and stage aren't cramped, but still capped so it never
     forces the dashboard page itself to grow past a normal viewport. */
  height: 80vh;
  min-height: 560px;
  max-height: 900px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: #fff;
}

/* ---------- Language switcher (ar / it / en) ---------- */

.lang-switcher {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: var(--soft);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px;
  flex: 0 0 auto;
}

.lang-option {
  min-height: 28px;
  padding: 0 10px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.lang-option:hover {
  background: rgba(10, 49, 106, 0.1);
  color: var(--ink);
  transform: none;
  box-shadow: none;
}

.lang-option.active {
  background: var(--brand);
  color: #fff;
}

/* On the auth screens the switcher floats in the same fixed corner as the
   theme toggle (see .auth-theme-toggle), just further from the edge so the
   two never overlap. */
.auth-lang-switcher {
  position: absolute;
  top: 20px;
  right: 66px;
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}

.auth-lang-switcher .lang-option {
  color: rgba(255, 255, 255, 0.75);
}

.auth-lang-switcher .lang-option.active {
  background: #fff;
  color: var(--brand-dark);
}

@media (max-width: 520px) {
  .auth-lang-switcher {
    top: 12px;
    right: 12px;
  }

  .auth-theme-toggle {
    top: 12px;
    right: 58px;
  }
}

/* ---------- Gallery (previous-experience photos/videos) ---------- */

.m-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.m-gallery-item {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--soft);
  aspect-ratio: 4 / 3;
}

.m-gallery-item img,
.m-gallery-item video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.m-gallery-empty {
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  padding: 40px 24px;
  text-align: center;
  background: var(--soft);
}

.m-gallery-empty .empty {
  color: var(--muted);
  font-weight: 600;
}

/* Manager dashboard's own Gallery tab: reuses .m-gallery-grid/-item above
   for the thumbnail itself, and adds a caption + remove-button footer that
   the public marketing section doesn't need. */
.gallery-manage-item {
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--soft);
  display: flex;
  flex-direction: column;
}

.gallery-manage-item img,
.gallery-manage-item video {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}

.gallery-manage-item-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 12px;
}

.gallery-manage-item-footer span {
  color: var(--muted);
  font-size: 0.9em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ---------- Promo modal title (offer headline above the body copy) ---------- */

.promo-modal-body h3 {
  margin: 0;
  font-size: 20px;
  color: var(--ink);
}

/* ---------------------------------------------------------------------
   RTL (Arabic). Grid and flex layouts already mirror automatically once
   <html dir="rtl"> is set (see applyLang() in app.js) — CSS Grid/Flexbox
   track order and `justify-self: start/end` are direction-aware by spec.
   What doesn't flip on its own is anything written with a *physical*
   left/right property, so those are overridden here rather than rewriting
   the whole stylesheet in logical properties.
   --------------------------------------------------------------------- */

[dir="rtl"] .auth-card label {
  text-align: right;
}

[dir="rtl"] .m-age {
  margin-left: 0;
  margin-right: 6px;
}

[dir="rtl"] .m-section h2::after {
  left: auto;
  right: 0;
}

[dir="rtl"] .m-compare-badge {
  right: auto;
  left: 20px;
}

[dir="rtl"] .auth-theme-toggle {
  right: auto;
  left: 20px;
}

[dir="rtl"] .auth-lang-switcher {
  right: auto;
  left: 66px;
}

@media (max-width: 520px) {
  [dir="rtl"] .auth-lang-switcher {
    right: auto;
    left: 12px;
  }

  [dir="rtl"] .auth-theme-toggle {
    right: auto;
    left: 58px;
  }
}

[dir="rtl"] .promo-close {
  right: auto;
  left: 10px;
}

[dir="rtl"] .sample-tag {
  margin-right: 0;
  margin-left: 6px;
}