/* ============================================================
   PassTrack — Instructor Dashboard (SaaS Rebuild)
   ============================================================ */

/* ── Tokens ── */
:root {
  --pt-navy:      #0C1E3D;
  --pt-navy-2:    #142847;
  --pt-teal:      #0EA5E9;
  --pt-teal-dark: #0284C7;
  --pt-green:     #10B981;
  --pt-amber:     #F59E0B;
  --pt-red:       #EF4444;
  --pt-bg:        #F1F5F9;
  --pt-card:      #FFFFFF;
  --pt-border:    #E2E8F0;
  --pt-border-2:  #CBD5E1;
  --pt-text:      #0F172A;
  --pt-text-2:    #334155;
  --pt-muted:     #64748B;
  --pt-muted-2:   #94A3B8;
  --pt-radius:    16px;
  --pt-radius-sm: 10px;
  --pt-radius-xs: 6px;
  --pt-shadow:    0 1px 3px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04);
  --pt-shadow-md: 0 4px 16px rgba(15,23,42,.10);
  --pt-shadow-lg: 0 8px 32px rgba(15,23,42,.16);
}

/* ── Dashboard shell ── */
/* ══════════════════════════════════════════════════════════════
   UNIFIED TAB SHELL (Session 1)
   Goal: every instructor tab has consistent width + consistent
   top header. Previously .pt-dashboard was full-width while
   .ds-tab-content clamped to 900px → inconsistency.
   ══════════════════════════════════════════════════════════════ */

.pt-shell {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px 20px 120px;
    box-sizing: border-box;
    min-height: 100vh;
    font-family: 'DM Sans', system-ui, sans-serif;
}
@media (max-width: 560px) {
    .pt-shell {
        padding: 16px 14px 110px;
    }
}

/* Unified tab header — appears at the top of every tab.
   When used directly inside .pt-shell it inherits the shell's width.
   When used inline (above .ds-tab-content etc.) it provides its own
   max-width + horizontal padding so it doesn't go full-viewport. */
.pt-tab-header {
    max-width: 900px;
    margin: 0 auto;
    padding: 28px 20px 16px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--pt-border, #E2E8F0);
    flex-wrap: wrap;
    box-sizing: border-box;
}

/* When .pt-tab-header is the direct child of .pt-shell (Home),
   the shell already supplies padding — drop ours to avoid doubling. */
.pt-shell > .pt-tab-header {
    padding: 0 0 16px;
    max-width: none;
    margin: 0 0 22px;
}

/* ── PUPILS TAB — self-contained shell ───────────────────────────
   Header and body share ONE wrapper with ONE width system. Previous
   approaches sized header (.pt-tab-header at 900px) and body
   (.ds-content at 1400px) independently, which always misaligned.
   The shell wraps both so they have the same parent and the same
   layout context. */
.pt-pupils-shell {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
}

.pt-pupils-shell-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 24px 0 14px;
    flex-wrap: wrap;
}

.pt-pupils-shell-titlewrap {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.pt-pupils-shell-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.65rem;
    font-weight: 800;
    color: var(--pt-text, #0F172A);
    letter-spacing: -0.02em;
    line-height: 1.1;
    margin: 0;
}

.pt-pupils-shell-sub {
    font-size: .88rem;
    color: var(--pt-muted, #64748B);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}

.pt-pupils-shell-action {
    flex-shrink: 0;
}

.pt-pupils-shell-filterrow {
    padding: 0 0 14px;
    border-bottom: 1px solid var(--pt-border, #E2E8F0);
    margin-bottom: 18px;
}

.pt-pupils-shell-filterrow .pt-pupils-filter {
    margin: 0;
    padding: 0;
    background: transparent;
    border-bottom: none;
}

/* When there's no filter row (no waiting pupils), still need an underline
   between the header and body. */
.pt-pupils-shell-header:last-of-type {
    border-bottom: 1px solid var(--pt-border, #E2E8F0);
    margin-bottom: 18px;
}

/* The body inside the shell — two-pane sidebar + main detail. */
.pt-pupils-shell-body {
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 24px;
    align-items: start;
}

/* On narrow viewports, stack the two panes. */
@media (max-width: 720px) {
    .pt-pupils-shell {
        padding: 0 14px;
    }
    .pt-pupils-shell-body {
        grid-template-columns: 1fr;
    }
    .pt-pupils-shell-body.is-detail .ds-content-sidebar {
        display: none;
    }
    .pt-pupils-shell-body.is-list .ds-content-main {
        display: none;
    }
}
.pt-tab-header-main {
    min-width: 0;
    flex: 1 1 auto;
}
.pt-tab-header-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.5rem;
    font-weight: 800;
    color: var(--pt-text, #0F172A);
    letter-spacing: -0.02em;
    line-height: 1.15;
    margin: 0 0 4px;
}
.pt-tab-header-sub {
    font-size: .85rem;
    color: var(--pt-muted, #64748B);
    font-weight: 500;
    margin: 0;
    line-height: 1.4;
}
.pt-tab-header-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
@media (max-width: 560px) {
    .pt-tab-header {
        padding: 20px 14px 14px;
        margin-bottom: 4px;
    }
    .pt-shell > .pt-tab-header {
        padding: 0 0 14px;
        margin-bottom: 18px;
    }
    .pt-tab-header-title {
        font-size: 1.3rem;
    }
    .pt-tab-header-sub {
        font-size: .8rem;
    }
    .pt-tab-header-actions {
        width: 100%;
    }
}

/* ── Dashboard header ── */
.pt-head {
  margin-bottom: 24px;
}
.pt-head-title {
  font-family: 'Syne', sans-serif;
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--pt-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin: 0 0 6px;
}
.pt-head-sub {
  font-size: .88rem;
  color: var(--pt-muted);
  margin: 0;
  font-weight: 500;
}

/* ── Hero metrics — 2 big at-a-glance numbers ── */
.pt-hero {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 24px;
}
.pt-hero-metric {
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  padding: 20px 22px;
  box-shadow: var(--pt-shadow);
  transition: box-shadow .15s ease, transform .15s ease;
}
.pt-hero-metric:hover {
  box-shadow: var(--pt-shadow-md);
}
.pt-hero-metric-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--pt-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 10px;
  line-height: 1.2;
}
.pt-hero-metric-value {
  font-family: 'Syne', sans-serif;
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--pt-text);
  letter-spacing: -0.02em;
  line-height: 1;
  margin-bottom: 8px;
}
.pt-hero-metric-meta {
  font-size: .8rem;
  color: var(--pt-muted);
  font-weight: 500;
  line-height: 1.3;
}

/* ── Main grid ── */
.pt-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
.pt-col { display: flex; flex-direction: column; gap: 20px; }

/* ── Card ── */
.pt-card {
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  overflow: hidden;
}
.pt-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pt-border);
  background: #FAFBFC;
  flex-wrap: wrap;
}
.pt-card-head-title {
  font-weight: 700;
  font-size: .92rem;
  color: var(--pt-text);
  flex: 1;
  min-width: 0;
}
.pt-card-head-sub {
  font-size: .78rem;
  color: var(--pt-muted);
  background: var(--pt-bg);
  padding: 3px 10px;
  border-radius: 20px;
  white-space: nowrap;
}
.pt-card-head-link {
  font-size: .78rem;
  color: var(--pt-teal-dark);
  text-decoration: none;
  font-weight: 600;
  /* v3.8.9.38 — merged from a second declaration further down the file.
     Card-head link sits in a flex container; without these the label can
     wrap or get squeezed by sibling content. */
  white-space: nowrap;
  flex-shrink: 0;
}
.pt-card-head-link:hover { text-decoration: underline; }
.pt-card-body { padding: 20px; }
.pt-card-icon {
  width: 18px; height: 18px;
  color: var(--pt-muted);
  flex-shrink: 0;
}

/* ── Today's Lessons ── */
.pt-lesson-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.pt-lesson-row {
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid var(--pt-border);
  transition: background .15s;
}
.pt-lesson-row:last-child { border-bottom: none; }
.pt-lesson-row:hover { background: #FAFBFC; }

/* Avatar (first-initial circle) */
.pt-lesson-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #F1F5F9, #E2E8F0);
  color: #475569;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .95rem;
  font-family: 'Syne', sans-serif;
  flex-shrink: 0;
}

/* Body spans the two rows */
.pt-lesson-body {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Row 1: pupil name + status pill */
.pt-lesson-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
}
.pt-lesson-pupil {
  font-weight: 700;
  font-size: .95rem;
  color: var(--pt-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Row 2: times + action */
.pt-lesson-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.pt-lesson-times {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .82rem;
  color: var(--pt-muted);
  min-width: 0;
  flex-wrap: wrap;
}
.pt-lesson-time-range {
  color: var(--pt-text-2);
  font-weight: 600;
  white-space: nowrap;
}
.pt-lesson-dur {
  color: var(--pt-muted);
  font-size: .78rem;
  white-space: nowrap;
}
.pt-lesson-dur::before {
  content: '·';
  margin-right: 6px;
  color: var(--pt-muted-2);
}

.pt-lesson-action-btn {
  flex-shrink: 0;
}

/* Status badges */
.pt-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .03em;
  text-transform: uppercase;
  white-space: nowrap;
}
.pt-badge--upcoming  { background: #F1F5F9; color: #475569; }
.pt-badge--in-progress {
  background: #ECFDF5; color: #065F46;
  animation: pt-pulse-badge 2s ease-in-out infinite;
}
.pt-badge--completed { background: #EFF6FF; color: #1D4ED8; }
.pt-badge--dot::before {
  content: '';
  display: block;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}

@keyframes pt-pulse-badge {
  0%, 100% { opacity: 1; }
  50% { opacity: .7; }
}

/* Action buttons */
.pt-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border-radius: var(--pt-radius-sm);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all .15s;
  white-space: nowrap;
  line-height: 1;
}
.pt-btn:disabled { opacity: .5; cursor: not-allowed; }

.pt-btn--primary {
  background: var(--pt-navy);
  color: #fff;
}
.pt-btn--primary:hover { background: var(--pt-navy-2); transform: translateY(-1px); box-shadow: var(--pt-shadow-md); }

.pt-btn--teal {
  background: var(--pt-teal);
  color: #fff;
}
.pt-btn--teal:hover { background: var(--pt-teal-dark); transform: translateY(-1px); }

.pt-btn--green {
  background: var(--pt-green);
  color: #fff;
}
.pt-btn--green:hover { filter: brightness(1.1); }

.pt-btn--outline {
  background: transparent;
  color: var(--pt-navy);
  border: 1.5px solid var(--pt-border-2);
}
.pt-btn--outline:hover { background: var(--pt-bg); border-color: var(--pt-navy); }

.pt-btn--ghost {
  background: transparent;
  color: var(--pt-muted);
  border: 1px solid transparent;
}
.pt-btn--ghost:hover { background: var(--pt-bg); color: var(--pt-text); }

.pt-btn--danger { background: #FEF2F2; color: var(--pt-red); border: 1px solid #FECACA; }
.pt-btn--danger:hover { background: var(--pt-red); color: #fff; }

.pt-btn--sm { padding: 6px 12px; font-size: .78rem; }
.pt-btn--lg { padding: 12px 24px; font-size: .95rem; }
.pt-btn--full { width: 100%; justify-content: center; }

/* ── Empty state ── */
.pt-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  text-align: center;
  color: var(--pt-muted);
  gap: 12px;
}
.pt-empty svg { color: var(--pt-muted-2); }
.pt-empty p { margin: 0; font-size: .9rem; }

/* ── Upcoming lessons list ── */
.pt-upcoming-day { padding: 8px 20px 4px; }
.pt-upcoming-day-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--pt-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pt-upcoming-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px;
  border-bottom: 1px solid var(--pt-border);
}
.pt-upcoming-row:last-child { border-bottom: none; }
.pt-upcoming-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pt-teal);
  flex-shrink: 0;
}
.pt-upcoming-time { font-size: .82rem; color: var(--pt-muted); min-width: 48px; font-weight: 500; }
.pt-upcoming-name { font-weight: 600; font-size: .88rem; color: var(--pt-text); flex: 1; }
.pt-upcoming-dur  { font-size: .78rem; color: var(--pt-muted-2); }

/* ── Quick Actions ── */
.pt-quick-actions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
}
.pt-quick-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: var(--pt-radius-sm);
  border: 1.5px solid var(--pt-border);
  background: #fff;
  cursor: pointer;
  transition: all .15s;
  text-align: left;
  font-size: .88rem;
  font-weight: 600;
  color: var(--pt-text);
}
.pt-quick-btn:hover {
  border-color: var(--pt-navy);
  background: #F8FAFC;
  transform: translateX(3px);
}
.pt-quick-btn-icon {
  width: 36px; height: 36px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.pt-quick-btn-icon--blue  { background: #EFF6FF; color: #2563EB; }
.pt-quick-btn-icon--green { background: #F0FDF4; color: #16A34A; }
.pt-quick-btn-icon--amber { background: #FFFBEB; color: #D97706; }
.pt-quick-btn-text { flex: 1; }
.pt-quick-btn-label { font-weight: 700; margin-bottom: 1px; }
.pt-quick-btn-desc  { font-size: .72rem; color: var(--pt-muted); font-weight: 400; }
.pt-quick-btn-arrow { color: var(--pt-muted-2); }

/* ── Financial snapshot (Pass 3) ── */
.pt-fin {
  padding: 20px;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pt-fin-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--pt-border);
  margin-bottom: 18px;
}
.pt-fin-item {
  min-width: 0;
}
.pt-fin-item--full {
  padding-top: 0;
}
.pt-fin-label {
  font-size: .7rem;
  color: var(--pt-muted);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-fin-value {
  font-family: 'Syne', sans-serif;
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--pt-text);
  line-height: 1.05;
  letter-spacing: -0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-fin-meta {
  font-size: .75rem;
  color: var(--pt-muted);
  margin-top: 6px;
  font-weight: 500;
}
.pt-fin-item--warn .pt-fin-value {
  color: #B45309;
}
.pt-fin-item--zero .pt-fin-value {
  color: #16A34A;
}

/* ── Test performance placeholder ── */
.pt-test-perf {
  padding: 20px;
  text-align: center;
}
.pt-test-perf-metric {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--pt-border);
}
.pt-test-perf-metric:last-child { border-bottom: none; }
.pt-test-perf-key { font-size: .85rem; color: var(--pt-muted); }
.pt-test-perf-val { font-weight: 700; color: var(--pt-text); }
.pt-test-perf-note { font-size: .78rem; color: var(--pt-muted-2); margin-top: 12px; font-style: italic; }

/* ── Lesson Panel (slide-in) ── */
.pt-panel-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,30,61,.55);
  backdrop-filter: blur(4px);
  z-index: 9990;
  opacity: 0;
  visibility: hidden;
  transition: opacity .25s, visibility .25s;
}
.pt-panel-overlay.is-open {
  opacity: 1;
  visibility: visible;
}

.pt-panel {
  position: fixed;
  top: 0; right: 0; bottom: 0;
  width: min(560px, 100vw);
  background: var(--pt-card);
  box-shadow: -8px 0 40px rgba(12,30,61,.18);
  z-index: 9991;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.pt-panel.is-open { transform: translateX(0); }

.pt-panel-header {
  background: var(--pt-navy);
  color: #fff;
  padding: 20px 24px 18px;
  flex-shrink: 0;
}
.pt-panel-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.pt-panel-pupil { font-size: 1.15rem; font-weight: 800; font-family: 'Syne', sans-serif; }
.pt-panel-time  { font-size: .85rem; color: rgba(255,255,255,.7); margin-top: 3px; }
.pt-panel-close {
  background: rgba(255,255,255,.12);
  border: none;
  color: #fff;
  width: 34px; height: 34px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .15s;
}
.pt-panel-close:hover { background: rgba(255,255,255,.22); }

.pt-timer {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,.12);
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 1.25rem;
  font-weight: 800;
  font-family: 'Syne', monospace;
  letter-spacing: .06em;
}
.pt-timer-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #4ADE80;
  animation: pt-blink 1s ease-in-out infinite;
}
@keyframes pt-blink { 0%,100%{opacity:1}50%{opacity:.3} }

.pt-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.pt-panel-section {}
.pt-panel-section-label {
  font-size: .72rem;
  font-weight: 700;
  color: var(--pt-muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.pt-panel-section-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.pt-notes-input {
  width: 100%;
  min-height: 100px;
  border: 1.5px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 12px 14px;
  font-size: .9rem;
  font-family: 'DM Sans', sans-serif;
  resize: vertical;
  box-sizing: border-box;
  color: var(--pt-text);
  transition: border-color .15s;
}
.pt-notes-input:focus { outline: none; border-color: var(--pt-teal); }

/* Skills checklist */
.pt-skills-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 220px;
  overflow-y: auto;
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 4px 0;
}
.pt-skill-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  transition: background .1s;
}
.pt-skill-item:hover { background: var(--pt-bg); }
.pt-skill-check {
  width: 18px; height: 18px;
  border: 2px solid var(--pt-border-2);
  border-radius: 4px;
  flex-shrink: 0;
  cursor: pointer;
  accent-color: var(--pt-teal);
}
.pt-skill-name { font-size: .85rem; color: var(--pt-text-2); flex: 1; }
.pt-skill-cat {
  font-size: .7rem;
  color: var(--pt-muted-2);
  background: var(--pt-bg);
  padding: 2px 7px;
  border-radius: 10px;
}
.pt-skills-empty { padding: 16px; text-align: center; color: var(--pt-muted); font-size: .85rem; }

/* Payment section */
.pt-payment-toggle {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.pt-toggle-btn {
  flex: 1;
  padding: 10px;
  border-radius: var(--pt-radius-sm);
  border: 1.5px solid var(--pt-border);
  background: #fff;
  cursor: pointer;
  font-size: .82rem;
  font-weight: 600;
  color: var(--pt-muted);
  text-align: center;
  transition: all .15s;
}
.pt-toggle-btn.active--yes  { border-color: var(--pt-green); background: #ECFDF5; color: #065F46; }
.pt-toggle-btn.active--no   { border-color: var(--pt-border-2); background: var(--pt-bg); color: var(--pt-text); }

.pt-payment-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.pt-field { display: flex; flex-direction: column; gap: 5px; }
.pt-field-label { font-size: .78rem; font-weight: 600; color: var(--pt-text-2); }
.pt-field-input {
  border: 1.5px solid var(--pt-border);
  border-radius: var(--pt-radius-sm);
  padding: 9px 12px;
  font-size: .88rem;
  font-family: 'DM Sans', sans-serif;
  color: var(--pt-text);
  background: #fff;
  box-sizing: border-box;
  width: 100%;
  transition: border-color .15s;
}
.pt-field-input:focus { outline: none; border-color: var(--pt-teal); }
.pt-field-input--full { grid-column: 1 / -1; }

.pt-panel-footer {
  padding: 16px 24px;
  border-top: 1px solid var(--pt-border);
  background: #FAFBFC;
  flex-shrink: 0;
  display: flex;
  gap: 12px;
  align-items: center;
}
.pt-panel-footer-status { font-size: .82rem; color: var(--pt-muted); flex: 1; }

/* ── Add Lesson / Add Pupil modals ── */
.pt-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(12,30,61,.5);
  z-index: 9980;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity .2s, visibility .2s;
}
.pt-modal-overlay.is-open {
  opacity: 1;
  visibility: visible;
}
.pt-modal {
  background: var(--pt-card);
  border-radius: var(--pt-radius);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--pt-shadow-lg);
  overflow: hidden;
  transform: scale(.96);
  transition: transform .2s;
}
.pt-modal-overlay.is-open .pt-modal { transform: scale(1); }
.pt-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--pt-border);
}
.pt-modal-title { font-weight: 700; font-size: 1rem; color: var(--pt-text); }
.pt-modal-close {
  background: none;
  border: none;
  color: var(--pt-muted);
  cursor: pointer;
  font-size: 1.3rem;
  line-height: 1;
  padding: 4px;
  border-radius: 6px;
  transition: background .15s;
}
.pt-modal-close:hover { background: var(--pt-bg); color: var(--pt-text); }
.pt-modal-body { padding: 22px; display: flex; flex-direction: column; gap: 14px; }
.pt-modal-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pt-modal-actions {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding-top: 4px;
}

/* Toast */
.pt-toast-container {
  position: fixed;
  bottom: 90px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.pt-toast {
  background: var(--pt-navy);
  color: #fff;
  padding: 12px 20px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 600;
  box-shadow: 0 4px 16px rgba(12,30,61,.3);
  animation: pt-toast-in .25s ease;
  pointer-events: auto;
}
.pt-toast--success { background: #065F46; }
.pt-toast--error   { background: #991B1B; }
@keyframes pt-toast-in {
  from { opacity:0; transform:translateY(8px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .pt-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pt-dashboard { padding: 16px 12px 110px; }

  /* Lesson row — tighter padding on phone */
  .pt-lesson-row {
    padding: 14px 16px;
    gap: 12px;
    grid-template-columns: 36px 1fr;
  }
  .pt-lesson-avatar {
    width: 36px;
    height: 36px;
    font-size: .88rem;
  }
  .pt-lesson-pupil {
    font-size: .9rem;
  }
  .pt-lesson-bottom {
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .pt-panel { width: 100vw; }
}


/* ══════════════════════════════════════════════════════════
   PASS 5 — HOME REBUILD
   ══════════════════════════════════════════════════════════ */

/* ── Needs your attention strip ──────────────────────────── */
.pt-attention {
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 18px;
}
.pt-attention-head {
    display: flex; align-items: center; gap: 6px;
    font-size: .72rem; font-weight: 700;
    text-transform: uppercase; letter-spacing: .06em;
    color: #475569;
    margin-bottom: 10px;
}
.pt-attention-list {
    display: flex; flex-direction: column; gap: 6px;
}
.pt-attention-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: #F8FAFC;
    font-size: .88rem; color: #334155;
    transition: background .12s ease;
}
.pt-attention-row:hover { background: #F1F5F9; }
.pt-attention-row--warn { background: #FFFBEB; }
.pt-attention-row--warn:hover { background: #FEF3C7; }
.pt-attention-row--bad { background: #FEF2F2; }
.pt-attention-row--bad:hover { background: #FEE2E2; }
.pt-attention-icon {
    flex-shrink: 0;
    display: flex; align-items: center; justify-content: center;
    width: 28px; height: 28px;
    border-radius: 8px;
    background: rgba(15, 23, 42, .06);
    color: #475569;
}
.pt-attention-row--warn .pt-attention-icon { background: rgba(245, 158, 11, .15); color: #92400E; }
.pt-attention-row--bad  .pt-attention-icon { background: rgba(239, 68, 68, .15); color: #B91C1C; }
.pt-attention-text {
    flex: 1; min-width: 0;
    line-height: 1.4;
}
.pt-attention-action {
    flex-shrink: 0;
    font-size: .82rem; font-weight: 600;
    color: #0F172A; text-decoration: none;
    padding: 4px 10px; border-radius: 6px;
    background: #FFFFFF;
    border: 1px solid #E2E8F0;
    transition: background .12s, border-color .12s;
}
.pt-attention-action:hover { background: #0F172A; color: #FFFFFF; border-color: #0F172A; }

.pt-attention--clear {
    background: #F0FDF4;
    border-color: #BBF7D0;
    color: #166534;
    display: flex; align-items: center; gap: 8px;
    font-size: .88rem; font-weight: 500;
    padding: 12px 16px;
}

/* ── Pupils-of-interest list ─────────────────────────────── */
.pt-poi-list {
    display: flex; flex-direction: column;
    gap: 0;
    padding: 4px 0;
}
.pt-poi-row {
    display: flex; align-items: center; gap: 12px;
    padding: 10px 16px;
    border-bottom: 1px solid #F1F5F9;
    text-decoration: none; color: inherit;
    transition: background .12s ease;
}
.pt-poi-row:last-child { border-bottom: none; }
.pt-poi-row:hover { background: #F8FAFC; }
.pt-poi-avatar {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
    color: #FFFFFF;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Syne', sans-serif;
    font-weight: 700; font-size: 14px;
}
.pt-poi-body { flex: 1; min-width: 0; }
.pt-poi-name {
    font-weight: 600; color: #0F172A;
    font-size: .92rem; line-height: 1.3;
}
.pt-poi-meta {
    display: flex; align-items: center; gap: 5px;
    font-size: .78rem; color: #64748B;
    margin-top: 2px;
}
.pt-poi-icon { display: flex; align-items: center; }
.pt-poi-row--test     .pt-poi-icon  { color: #F59E0B; }
.pt-poi-row--owes     .pt-poi-icon  { color: #B91C1C; }
.pt-poi-row--strug    .pt-poi-icon  { color: #DC2626; }
.pt-poi-row--new      .pt-poi-icon  { color: #16A34A; }
.pt-poi-row--dormant  .pt-poi-icon  { color: #7C3AED; }
.pt-poi-arrow {
    flex-shrink: 0;
    color: #CBD5E1;
    transition: transform .12s, color .12s;
}
.pt-poi-row:hover .pt-poi-arrow { color: #0F172A; transform: translateX(2px); }

/* ── Week sparkline ──────────────────────────────────────── */
.pt-spark {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px;
    padding: 18px 16px 14px;
}
.pt-spark-day {
    display: flex; flex-direction: column; align-items: center;
    gap: 4px;
    padding: 8px 4px;
    border-radius: 8px;
    cursor: default;
    transition: background .12s ease;
}
.pt-spark-day:hover { background: #F8FAFC; }
.pt-spark-day--today { background: #FEF3C7; }
.pt-spark-day--today:hover { background: #FDE68A; }

.pt-spark-bar-wrap {
    display: flex; flex-direction: column-reverse; align-items: center;
    height: 64px; width: 100%;
    position: relative;
}
.pt-spark-bar {
    width: 18px;
    border-radius: 4px 4px 2px 2px;
    background: linear-gradient(180deg, #1E293B 0%, #0F172A 100%);
    transition: opacity .15s ease;
}
.pt-spark-bar--busy {
    background: linear-gradient(180deg, #F59E0B 0%, #D97706 100%);
}
.pt-spark-bar--zero {
    background: #E2E8F0;
}
.pt-spark-count {
    position: absolute;
    top: -2px;
    font-family: 'Syne', sans-serif;
    font-size: .7rem; font-weight: 700;
    color: #0F172A;
}
.pt-spark-day--today .pt-spark-count { color: #92400E; }
.pt-spark-label {
    font-size: .68rem; font-weight: 700;
    color: #64748B;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-top: 4px;
}
.pt-spark-day--today .pt-spark-label { color: #92400E; }
.pt-spark-day-n {
    font-size: .82rem; font-weight: 700;
    color: #0F172A;
    font-family: 'Syne', sans-serif;
    line-height: 1;
}

/* ── Card head: button-style action link ─────────────────── */
.pt-card-head-link--btn {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    padding: 4px 8px;
    border-radius: 6px;
}
.pt-card-head-link--btn:hover { background: rgba(15, 23, 42, .06); }

/* ── ADI footnote (replaces old .pt-adi-actions) ─────────── */
.pt-adi-footnote {
    display: flex; align-items: center; gap: 6px;
    margin-top: 12px;
    padding: 8px 12px;
    font-size: .8rem;
    color: #475569;
    background: #F8FAFC;
    border-radius: 8px;
}

/* ── Compact empty state ─────────────────────────────────── */
.pt-empty--compact {
    padding: 18px 16px;
    text-align: center;
}
.pt-empty--compact p { margin: 0; color: #64748B; font-size: .88rem; }

/* ── Mobile: tighter spacing ─────────────────────────────── */
@media (max-width: 640px) {
    .pt-attention { padding: 12px; margin-bottom: 14px; }
    .pt-attention-row { padding: 9px 10px; gap: 10px; font-size: .85rem; }
    .pt-attention-action { padding: 3px 8px; font-size: .78rem; }
    .pt-spark { padding: 14px 8px 10px; gap: 3px; }
    .pt-spark-bar-wrap { height: 56px; }
    .pt-spark-bar { width: 14px; }
    .pt-spark-label { font-size: .62rem; }
    .pt-poi-row { padding: 10px 14px; gap: 10px; }
    .pt-poi-avatar { width: 32px; height: 32px; font-size: 13px; }
}

/* ══════════════════════════════════════════════════════════════
   PUPIL HOME TAB
   ══════════════════════════════════════════════════════════════ */

/* ── Greeting ── */
.pt-pupil-greeting {
  padding: 20px 20px 4px;
}
.pt-pupil-greeting-name {
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.45rem;
  font-weight: 800;
  color: #0F172A;
  margin: 0 0 2px;
  line-height: 1.2;
}
.pt-pupil-greeting-date {
  font-size: .82rem;
  color: var(--pt-muted);
  margin: 0;
}

/* ── Next lesson card ── */
.pt-pupil-next-lesson-card {
  margin-bottom: 0;
  border-left: 4px solid var(--ds-amber, #F59E0B) !important;
}
.pt-pupil-next-lesson-card--empty {
  border-left-color: var(--pt-border, #E2E8F0) !important;
  opacity: .85;
}
.pt-pupil-next-lesson-eyebrow {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--pt-muted);
  padding: 16px 20px 0;
}
.pt-pupil-next-pill {
  margin-left: auto;
  background: #FEF3C7;
  color: #92400E;
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: none;
  letter-spacing: 0;
}
.pt-pupil-next-lesson-main {
  padding: 10px 20px 14px;
}
.pt-pupil-next-lesson-date {
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.3rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}
.pt-pupil-next-lesson-time {
  font-size: .92rem;
  font-weight: 600;
  color: #334155;
  margin-top: 3px;
}
.pt-pupil-next-lesson-instr {
  font-size: .82rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-next-lesson-actions {
  display: flex;
  gap: 8px;
  padding: 0 20px 16px;
}

/* ── Journey snapshot ── */
.pt-pupil-journey-body {
  padding: 12px 20px 16px;
}
.pt-pupil-journey-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.pt-pupil-journey-bar-track {
  flex: 1;
  height: 8px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
}
.pt-pupil-journey-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ds-amber, #F59E0B), #F97316);
  border-radius: 999px;
  transition: width .6s ease;
  min-width: 4px;
}
.pt-pupil-journey-pct {
  font-size: .82rem;
  font-weight: 700;
  color: #0F172A;
  min-width: 34px;
  text-align: right;
}
.pt-pupil-journey-caption {
  font-size: .82rem;
  color: var(--pt-muted);
  margin: 0 0 8px;
}
.pt-pupil-journey-nudge {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: .82rem;
  color: #334155;
  background: #F8FAFC;
  border-radius: 8px;
  padding: 8px 10px;
  margin-top: 8px;
}
.pt-pupil-journey-nudge--good {
  background: #F0FDF4;
  color: #166534;
}
.pt-pupil-journey-nudge svg { flex-shrink: 0; margin-top: 1px; }

/* ── Messages nudge banner ── */
.pt-pupil-msg-nudge {
  display: flex;
  align-items: center;
  gap: 12px;
  background: #FFFBEB;
  border: 1px solid #FCD34D;
  border-radius: 14px;
  padding: 12px 14px;
  text-decoration: none !important;
  color: #92400E !important;
  font-size: .88rem;
  font-weight: 600;
  transition: background .15s;
}
.pt-pupil-msg-nudge:hover { background: #FEF3C7; }
.pt-pupil-msg-nudge-icon {
  position: relative;
  flex-shrink: 0;
  width: 34px; height: 34px;
  background: #FEF3C7;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pt-pupil-msg-nudge-badge {
  position: absolute;
  top: -3px; right: -3px;
  background: #DC2626;
  color: #fff;
  font-size: .58rem;
  font-weight: 700;
  width: 16px; height: 16px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff;
}
.pt-pupil-msg-nudge-text { flex: 1; line-height: 1.4; }
.pt-pupil-msg-nudge-arrow { flex-shrink: 0; color: #B45309; }

/* ── Last lesson recap ── */
.pt-pupil-last-lesson-body {
  padding: 12px 20px 16px;
}
.pt-pupil-last-lesson-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 10px;
}
.pt-pupil-last-lesson-grade {
  display: flex;
  align-items: baseline;
  gap: 2px;
  font-weight: 800;
}
.pt-pupil-grade-num  { font-size: 2rem; line-height: 1; }
.pt-pupil-grade-denom { font-size: .9rem; color: var(--pt-muted); font-weight: 600; }
.pt-pupil-last-lesson-no-grade {
  font-size: .88rem;
  color: var(--pt-muted);
  font-style: italic;
}
.pt-pupil-last-lesson-meta {
  font-size: .8rem;
  color: var(--pt-muted);
}
.pt-pupil-last-lesson-notes {
  font-size: .88rem;
  color: #334155;
  line-height: 1.55;
  background: #F8FAFC;
  border-radius: 8px;
  padding: 10px 12px;
}
.pt-pupil-last-lesson-expand {
  display: inline-block;
  margin-top: 6px;
  font-size: .8rem;
  font-weight: 600;
  color: var(--pt-teal-dark, #0284C7);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: underline;
}

/* ── Account grid ── */
.pt-pupil-account-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--pt-border);
  border-radius: 0 0 14px 14px;
  overflow: hidden;
}
/* When balance tile is hidden (school setting off AND balance ≥ 0):
   single column with lesson price stacked over status. */
.pt-pupil-account-grid--nobalance {
  grid-template-columns: 1fr;
}
.pt-pupil-account-grid--nobalance .pt-pupil-account-tile--status {
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-account-tile {
  background: #FFFFFF;
  padding: 14px 16px;
}
.pt-pupil-account-tile--status {
  grid-column: 1 / -1;
  border-top: 1px solid var(--pt-border);
}
/* Negative-balance highlight — shown even when "show balance" is OFF, so the
   styling needs to make it obvious that money is owed without being alarming. */
.pt-pupil-account-tile--negative {
  background: #FEF2F2;
}
.pt-pupil-account-tile-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pt-muted);
  margin-bottom: 4px;
}
.pt-pupil-account-tile-value {
  font-size: 1rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}
.pt-pupil-account-tile-hint {
  font-size: .75rem;
  color: var(--pt-muted);
  margin-top: 3px;
}

/* ── Buy credit ── */
.pt-pupil-buy-body {
  padding: 4px 20px 18px;
}
.pt-pupil-buy-row {
  display: flex;
  align-items: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* ── Resources strip ── */
.pt-pupil-resources-list {
  display: flex;
  flex-direction: column;
}
.pt-pupil-resource-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 20px;
  border-top: 1px solid var(--pt-border);
  text-decoration: none !important;
  color: #0F172A;
  transition: background .12s;
}
.pt-pupil-resource-row:hover { background: #F8FAFC; }
.pt-pupil-resource-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  background: #F1F5F9;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--pt-muted);
}
.pt-pupil-resource-text {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pt-pupil-resource-title {
  font-size: .9rem;
  font-weight: 600;
  color: #0F172A;
}
.pt-pupil-resource-desc {
  font-size: .78rem;
  color: var(--pt-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pt-pupil-resource-arrow {
  flex-shrink: 0;
  color: var(--pt-muted);
}

/* ── Home tab cards — gap between cards (no wrapper needed; ds-pupil-main handles width) ── */
.pt-pupil-greeting { padding: 4px 0 0; }
/* Consistent greeting offset below the hero on every tab. The greeting is the
   first element in its tab container, but those containers differ (ds-pupil-main
   on Home/Lessons, ds-pupil-lower-grid on Progress/Messages) and each carried
   different top spacing — making the title creep lower tab to tab. Pin them all
   to the same offset here. */
.ds-pupil-wrap .ds-pupil-lower-grid { margin-top: 0 !important; }
.ds-pupil-main > .pt-pupil-greeting:first-child,
.ds-pupil-lower-grid .pt-pupil-greeting:first-child,
.ds-pupil-lower-left > .pt-pupil-greeting:first-child,
.ds-pupil-lower-right > .pt-pupil-greeting:first-child {
  padding-top: 4px !important;
  margin-top: 0 !important;
}
/* On Progress and Messages tabs the upper grid (ds-pupil-grid > ds-pupil-main)
   renders EMPTY — all content lives in the lower grid below. That empty wrapper
   still carries bottom padding, pushing the greeting lower than on Home/Lessons
   where the greeting lives in the upper grid. Collapse the empty wrapper to zero
   on those two tabs so the greeting sits at the identical offset on all tabs. */
.ds-pupil-wrap[data-ptab="progress"] .ds-pupil-grid,
.ds-pupil-wrap[data-ptab="messages"] .ds-pupil-grid {
  padding: 0 !important;
  margin: 0 !important;
  min-height: 0 !important;
}
.ds-pupil-wrap[data-ptab="progress"] .ds-pupil-grid > .ds-pupil-main,
.ds-pupil-wrap[data-ptab="messages"] .ds-pupil-grid > .ds-pupil-main {
  display: none !important;
}
/* Empty scroll-anchor divs (#section-upcoming, #section-messages, etc.) are
   grid items, so each one consumed a full 18px gap slot — pushing the greeting
   down by one gap on Lessons and Messages (which have an anchor before their
   greeting) while Home/Progress sat tight. They're dead anchors (nothing
   scrolls to them), so remove them from layout entirely. This is the actual
   cause of the tab-to-tab title drift. */
#section-upcoming,
#section-messages,
#section-progress,
#section-mocks {
  display: none !important;
}
.pt-pupil-next-lesson-card,
.pt-pupil-journey-card,
.pt-pupil-last-lesson-card,
.pt-pupil-account-card,
.pt-pupil-buy-card,
.pt-pupil-resources-card,
.pt-pupil-waiting-info-card,
.pt-pupil-msg-nudge {
  margin-bottom: 0;
}

/* ── Waiting list info card ── */
.pt-pupil-waiting-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.pt-pupil-waiting-step {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 14px 20px;
  border-top: 1px solid var(--pt-border);
  font-size: .88rem;
  line-height: 1.5;
  color: #334155;
}
.pt-pupil-waiting-step strong { display: block; font-size: .9rem; color: #0F172A; margin-bottom: 2px; }
.pt-pupil-waiting-step p { margin: 0; }
.pt-pupil-waiting-step a { color: var(--pt-teal-dark); text-decoration: underline; }
.pt-pupil-waiting-step-num {
  flex-shrink: 0;
  width: 26px; height: 26px;
  background: var(--ds-navy, #0C1E3D);
  color: #fff;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  margin-top: 1px;
}

/* ══════════════════════════════════════════════════════════════
   PUPIL LESSONS TAB
   ══════════════════════════════════════════════════════════════ */

/* ── Upcoming list ── */
.pt-pupil-upcoming-list {
  display: flex;
  flex-direction: column;
}
.pt-pupil-upcoming-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-upcoming-row:first-child { border-top: none; }
.pt-pupil-upcoming-date {
  flex-shrink: 0;
  width: 46px;
  text-align: center;
  background: var(--ds-navy, #0C1E3D);
  color: #fff;
  border-radius: 10px;
  padding: 8px 0;
  line-height: 1;
}
.pt-pupil-upcoming-day {
  display: block;
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.15rem;
  font-weight: 800;
}
.pt-pupil-upcoming-month {
  display: block;
  font-size: .58rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.65);
  margin-top: 2px;
}
.pt-pupil-upcoming-details { flex: 1; min-width: 0; }
.pt-pupil-upcoming-time {
  font-size: .95rem;
  font-weight: 700;
  color: #0F172A;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.pt-pupil-upcoming-pill {
  background: #FEF3C7;
  color: #92400E;
  font-size: .65rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.pt-pupil-upcoming-meta {
  font-size: .8rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-upcoming-cancel {
  flex-shrink: 0;
  background: transparent;
  color: #B91C1C;
  border: 1px solid #FCA5A5;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .12s;
}
.pt-pupil-upcoming-cancel:hover { background: #FEE2E2; }

/* ── Request form ── */
.pt-pupil-request-body { padding: 8px 20px 18px; }
.pt-pupil-request-hint {
  font-size: .85rem;
  color: var(--pt-muted);
  margin: 0 0 14px;
}
.pt-pupil-request-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
@media (max-width: 540px) {
  .pt-pupil-request-row { grid-template-columns: 1fr 1fr; }
  .pt-pupil-request-row > :nth-child(3) { grid-column: 1 / -1; }
}
.pt-pupil-request-field {
  display: flex;
  flex-direction: column;
}
.pt-pupil-request-field--full { margin-bottom: 14px; }
.pt-pupil-request-field label {
  font-size: .8rem;
  font-weight: 600;
  color: #334155;
  margin-bottom: 6px;
}
.pt-pupil-request-policy {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 12px 0 0;
  font-size: .78rem;
  color: var(--pt-muted);
  padding-top: 12px;
  border-top: 1px dashed var(--pt-border);
}
.pt-pupil-request-policy svg { flex-shrink: 0; color: #94A3B8; }

/* ── Available slots ── */
.pt-pupil-slots-list { display: flex; flex-direction: column; }
.pt-pupil-slot-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 20px;
  border-top: 1px solid var(--pt-border);
  background: #F0FDF4;
}
.pt-pupil-slot-row:first-child { border-top: none; }
.pt-pupil-slot-info { flex: 1; min-width: 0; }
.pt-pupil-slot-when {
  font-size: .92rem;
  font-weight: 700;
  color: #0F172A;
}
.pt-pupil-slot-meta {
  font-size: .78rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-slot-btn { flex-shrink: 0; }

/* ── Recent requests log ── */
.pt-pupil-reqlog-list { display: flex; flex-direction: column; }
.pt-pupil-reqlog-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--pt-border);
  font-size: .88rem;
}
.pt-pupil-reqlog-row:first-child { border-top: none; }
.pt-pupil-reqlog-when {
  color: #334155;
  font-weight: 500;
}
.pt-pupil-reqlog-status {
  flex-shrink: 0;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: 3px 10px;
  border-radius: 999px;
}
.pt-pupil-reqlog-status--pending  { background: #FEF3C7; color: #92400E; }
.pt-pupil-reqlog-status--approved { background: #DCFCE7; color: #166534; }
.pt-pupil-reqlog-status--declined { background: #FEE2E2; color: #991B1B; }

/* ── Timeline ── */
.pt-pupil-timeline {
  position: relative;
  padding: 4px 0 4px;
}
.pt-pupil-timeline::before {
  content: '';
  position: absolute;
  left: 30px;
  top: 18px;
  bottom: 18px;
  width: 2px;
  background: var(--pt-border);
}
.pt-pupil-timeline-item {
  position: relative;
  padding: 12px 20px 12px 50px;
}
.pt-pupil-timeline-dot {
  position: absolute;
  left: 24px;
  top: 22px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #94A3B8;
  border: 3px solid #FFFFFF;
  z-index: 1;
}
.pt-pupil-timeline-item.status-scheduled .pt-pupil-timeline-dot { background: var(--ds-amber, #F59E0B); }
.pt-pupil-timeline-item.status-completed .pt-pupil-timeline-dot { background: #16A34A; }
.pt-pupil-timeline-item.status-cancelled .pt-pupil-timeline-dot { background: #DC2626; }
.pt-pupil-timeline-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 8px;
}
.pt-pupil-timeline-header-main { flex: 1; min-width: 0; }
.pt-pupil-timeline-date {
  font-weight: 700;
  font-size: .92rem;
  color: #0F172A;
}
.pt-pupil-timeline-meta {
  font-size: .78rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-timeline-header-side {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.pt-pupil-timeline-status {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 8px;
  border-radius: 999px;
  background: #F1F5F9;
  color: #475569;
}
.pt-pupil-timeline-status.status-scheduled { background: #FEF3C7; color: #92400E; }
.pt-pupil-timeline-status.status-completed { background: #DCFCE7; color: #166534; }
.pt-pupil-timeline-status.status-cancelled { background: #FEE2E2; color: #991B1B; }
.pt-pupil-timeline-grade {
  font-size: .72rem;
  font-weight: 700;
  color: #FFFFFF;
  padding: 3px 8px;
  border-radius: 999px;
}
.pt-pupil-timeline-notes {
  background: #F8FAFC;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: .85rem;
  color: #334155;
  margin-bottom: 10px;
  line-height: 1.5;
}
.pt-pupil-timeline-notes strong { color: #0F172A; }
.pt-pupil-timeline-actions {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.pt-pupil-timeline-action-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: none;
  padding: 0;
  font-size: .82rem;
  font-weight: 600;
  color: var(--pt-teal-dark, #0284C7);
  cursor: pointer;
}
.pt-pupil-timeline-action-link:hover { text-decoration: underline; }
.pt-pupil-timeline-detail {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--pt-border);
}
.pt-pupil-timeline-pupil-notes { margin-top: 10px; }

/* ══════════════════════════════════════════════════════════════
   PUPIL PROGRESS TAB
   ══════════════════════════════════════════════════════════════ */

/* ── Empty state ── */
.pt-pupil-progress-empty .pt-empty {
  text-align: center;
}
.pt-pupil-progress-empty p {
  margin: 10px 0 0;
  color: #475569;
  line-height: 1.55;
}
.pt-pupil-progress-empty p strong {
  display: block;
  color: #0F172A;
  font-size: 1rem;
  margin-bottom: 4px;
}

/* ── Test booked card ── */
.pt-pupil-testbooked-card {
  border-left: 4px solid var(--ds-amber, #F59E0B) !important;
}
.pt-pupil-testbooked-body {
  padding: 6px 20px 16px;
}
.pt-pupil-testbooked-date {
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
  line-height: 1.2;
}
.pt-pupil-testbooked-centre {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .85rem;
  color: var(--pt-muted);
  margin-top: 6px;
}
.pt-pupil-testbooked-pill {
  background: #FEF3C7;
  color: #92400E;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
.pt-pupil-testbooked-pill--soon {
  background: #FEE2E2;
  color: #991B1B;
}

/* ── Overview (strongest / needs work) ── */
.pt-pupil-overview-body {
  padding: 6px 20px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pt-pupil-overview-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 10px;
}
.pt-pupil-overview-row--strong { background: #F0FDF4; }
.pt-pupil-overview-row--weak   { background: #FEF2F2; }
.pt-pupil-overview-icon {
  flex-shrink: 0;
  width: 32px; height: 32px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.pt-pupil-overview-row--strong .pt-pupil-overview-icon { background: #DCFCE7; color: #16A34A; }
.pt-pupil-overview-row--weak   .pt-pupil-overview-icon { background: #FEE2E2; color: #DC2626; }
.pt-pupil-overview-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pt-muted);
  margin-bottom: 2px;
}
.pt-pupil-overview-value {
  font-size: .95rem;
  font-weight: 700;
  color: #0F172A;
}

/* ── Skill levels by category ── */
.pt-pupil-skillcat-list {
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}
.pt-pupil-skillcat-row {
  padding: 12px 20px;
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-skillcat-row:first-child { border-top: none; }
.pt-pupil-skillcat-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.pt-pupil-skillcat-name {
  font-size: .9rem;
  font-weight: 600;
  color: #0F172A;
}
.pt-pupil-skillcat-grade {
  font-size: .82rem;
  font-weight: 700;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.pt-pupil-skillcat-bar-track {
  height: 8px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
}
.pt-pupil-skillcat-bar-fill {
  height: 100%;
  border-radius: 999px;
  transition: width .6s ease;
  min-width: 4px;
}
.pt-pupil-skillcat-state {
  margin-top: 5px;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
}

/* ── Focus areas (5 weakest) ── */
.pt-pupil-focus-list { display: flex; flex-direction: column; }
.pt-pupil-focus-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-focus-row:first-child { border-top: none; }
.pt-pupil-focus-rank {
  flex-shrink: 0;
  width: 24px; height: 24px;
  background: var(--ds-navy, #0C1E3D);
  color: #fff;
  border-radius: 50%;
  font-size: .78rem;
  font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.pt-pupil-focus-name {
  flex: 1;
  min-width: 0;
  font-size: .9rem;
  font-weight: 600;
  color: #0F172A;
}
.pt-pupil-focus-score {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.pt-pupil-focus-bar-track {
  width: 70px;
  height: 6px;
  background: #F1F5F9;
  border-radius: 999px;
  overflow: hidden;
}
.pt-pupil-focus-bar-fill {
  height: 100%;
  border-radius: 999px;
  min-width: 3px;
}
.pt-pupil-focus-grade {
  font-size: .82rem;
  font-weight: 700;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
  min-width: 32px;
  text-align: right;
}

/* ── Readiness card wrap — overrides ds-card to look like pt-card ── */
.pt-pupil-readiness-wrap .ds-readiness-card,
.pt-pupil-readiness-wrap .ds-card {
  background: var(--pt-card);
  border: 1px solid var(--pt-border);
  border-radius: var(--pt-radius);
  box-shadow: var(--pt-shadow);
  margin: 0 !important;
  overflow: hidden;
}
.pt-pupil-readiness-wrap .ds-card-header {
  font-size: .95rem !important;
  font-weight: 700 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  color: #0F172A !important;
  padding: 16px 20px !important;
  background: transparent !important;
  border-bottom: 1px solid var(--pt-border);
}
.pt-pupil-readiness-wrap .ds-card-header svg { display: none; }
.pt-pupil-readiness-wrap .ds-readiness-body { padding: 16px 20px; }
.pt-pupil-readiness-wrap .ds-readiness-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--pt-muted);
  margin-bottom: 4px;
}
.pt-pupil-readiness-wrap .ds-readiness-dates {
  font-family: var(--ds-font-display, 'Syne', sans-serif);
  font-size: 1.2rem;
  font-weight: 800;
  color: #0F172A;
}
.pt-pupil-readiness-wrap .ds-readiness-weeks {
  font-size: .82rem;
  color: var(--pt-muted);
  margin-top: 4px;
}
.pt-pupil-readiness-wrap .ds-readiness-basis {
  margin-top: 14px;
  font-size: .8rem;
  color: var(--pt-muted);
  font-style: italic;
}
.pt-pupil-readiness-wrap .ds-readiness-disclaimer {
  margin-top: 12px;
  padding: 10px 12px;
  background: #F8FAFC;
  border-radius: 8px;
  font-size: .75rem;
  color: var(--pt-muted);
  line-height: 1.5;
}

/* ── Grade trend chart ── */
.pt-pupil-trend-body { padding: 6px 20px 18px; }
.pt-pupil-trend-loading {
  padding: 24px;
  text-align: center;
  color: var(--pt-muted);
  font-size: .88rem;
}
.pt-pupil-trend-canvas-wrap {
  position: relative;
  height: 200px;
  margin-top: 6px;
}

/* ── Your Tests card (consolidated theory + practical) ── */
.pt-pupil-tests-card--practical-booked {
  border-left: 4px solid var(--ds-amber, #F59E0B) !important;
}
.pt-pupil-tests-body {
  padding: 4px 0;
  display: flex;
  flex-direction: column;
}
.pt-pupil-tests-row {
  padding: 14px 20px;
  border-top: 1px solid var(--pt-border);
}
.pt-pupil-tests-row:first-child { border-top: none; }
.pt-pupil-tests-row-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-bottom: 4px;
}
.pt-pupil-tests-row-name {
  font-size: .92rem;
  font-weight: 700;
  color: #0F172A;
}
.pt-pupil-tests-row-detail {
  font-size: .82rem;
  color: var(--pt-muted);
  margin-top: 2px;
}
.pt-pupil-tests-row-centre {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  color: var(--pt-muted);
  margin-top: 4px;
}
/* Status pills */
.pt-pupil-tests-status {
  flex-shrink: 0;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
}
.pt-pupil-tests-status--pass    { background: #DCFCE7; color: #166534; }
.pt-pupil-tests-status--fail    { background: #FEE2E2; color: #991B1B; }
.pt-pupil-tests-status--booked  { background: #FEF3C7; color: #92400E; }
.pt-pupil-tests-status--pending { background: #E0F2FE; color: #075985; }
.pt-pupil-tests-status--none    { background: #F1F5F9; color: #64748B; }

/* ══════════════════════════════════════════════════════════════
   PUPIL MESSAGES TAB
   ══════════════════════════════════════════════════════════════ */

.pt-pupil-msg-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-height: 500px;
}

/* Instructor header strip at top of card */
.pt-pupil-msg-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: #F8FAFC;
  border-bottom: 1px solid var(--pt-border);
}
.pt-pupil-msg-header-avatar {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--ds-navy, #0C1E3D);
  color: #fff;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-pupil-msg-header-text { flex: 1; min-width: 0; }
.pt-pupil-msg-header-name {
  font-weight: 700;
  font-size: .95rem;
  color: #0F172A;
  line-height: 1.2;
}
.pt-pupil-msg-header-sub {
  font-size: .76rem;
  color: var(--pt-muted);
  margin-top: 2px;
}

/* Thread fills the rest of the card */
.pt-pupil-msg-thread {
  flex: 1 1 auto !important;
  min-height: 320px;
  max-height: 60vh;
  overflow-y: auto;
  padding: 16px 20px;
  background: #FAFBFC;
  scroll-behavior: smooth;
}

/* Gap-notification CTA injected by JS into a message bubble */
.pt-pupil-msg-gap-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 6px 12px;
  background: var(--ds-amber, #F59E0B);
  color: #ffffff !important;
  border-radius: 8px;
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none !important;
  transition: background .12s;
}
.pt-pupil-msg-gap-cta:hover { background: #D97706; }

/* Pupil composer reuses the instructor .pt-composer markup/classes for an
   identical compact, professional look (38px circular buttons, pill input).
   Only override the send button colour to the pupil-dashboard amber accent
   instead of the instructor blue, so each dashboard stays on-brand. */
.pt-pupil-composer-send {
  background: var(--ds-amber, #F59E0B) !important;
  color: #fff !important;
}
.pt-pupil-composer-send:hover:not(:disabled) {
  background: #D97706 !important;
}
.pt-pupil-composer .pt-composer-input:focus {
  border-color: var(--ds-amber, #F59E0B) !important;
  box-shadow: 0 0 0 3px rgba(245,158,11,.15) !important;
}

/* Empty state inside the thread — server-rendered .pt-msg-empty-state styling pass */
.pt-pupil-msg-thread .pt-msg-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  color: var(--pt-muted);
}
.pt-pupil-msg-thread .pt-msg-empty-icon {
  font-size: 2rem;
  margin-bottom: 10px;
  opacity: .6;
}
.pt-pupil-msg-thread .pt-msg-empty-title {
  font-size: 1rem;
  font-weight: 700;
  color: #0F172A;
  margin-bottom: 4px;
}
.pt-pupil-msg-thread .pt-msg-empty-desc {
  font-size: .88rem;
  color: var(--pt-muted);
}

/* ══════════════════════════════════════════════════════════════
   INSTRUCTOR MESSAGES — BROADCAST FEATURE
   ══════════════════════════════════════════════════════════════ */

/* Broadcast button sits in the tab header */
.pt-tab-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.pt-msg-broadcast-btn {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
}

/* Broadcast modal — built on existing .pt-modal foundation but shown via
   inline display:flex (not the .is-open class) so override opacity/visibility */
.pt-msg-broadcast-overlay {
  opacity: 1 !important;
  visibility: visible !important;
}
.pt-msg-broadcast-overlay .pt-modal { transform: scale(1) !important; }
.pt-msg-broadcast-card {
  max-width: 560px !important;
}
.pt-msg-broadcast-hint {
  margin: 0 0 12px;
  font-size: .88rem;
  color: var(--pt-muted);
  line-height: 1.5;
}
.pt-msg-broadcast-field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-msg-broadcast-label {
  font-size: .82rem;
  font-weight: 700;
  color: var(--pt-text);
  text-transform: uppercase;
  letter-spacing: .03em;
}

/* Audience radio rows */
.pt-msg-broadcast-audiences {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pt-msg-broadcast-aud {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--pt-border);
  border-radius: 10px;
  cursor: pointer;
  transition: background .12s, border-color .12s;
}
.pt-msg-broadcast-aud:hover { background: #F8FAFC; }
.pt-msg-broadcast-aud input[type="radio"] {
  margin-top: 3px;
  flex-shrink: 0;
  accent-color: var(--ds-amber, #F59E0B);
}
.pt-msg-broadcast-aud input[type="radio"]:checked + .pt-msg-broadcast-aud-text strong {
  color: var(--ds-navy, #0C1E3D);
}
.pt-msg-broadcast-aud:has(input:checked) {
  background: #FFFBEB;
  border-color: #FCD34D;
}
.pt-msg-broadcast-aud-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: .9rem;
}
.pt-msg-broadcast-aud-text strong { color: var(--pt-text); font-weight: 700; }
.pt-msg-broadcast-aud-text em {
  font-style: normal;
  font-size: .8rem;
  color: var(--pt-muted);
}

/* Message body textarea */
.pt-msg-broadcast-textarea {
  width: 100%;
  border: 1px solid var(--pt-border);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: inherit;
  font-size: .95rem;
  resize: vertical;
  min-height: 100px;
  box-sizing: border-box;
}
.pt-msg-broadcast-textarea:focus {
  outline: none;
  border-color: var(--ds-amber, #F59E0B);
  box-shadow: 0 0 0 3px rgba(245,158,11,.15);
}

/* Confirmation strip shown after Review */
.pt-msg-broadcast-confirm {
  display: flex !important;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: #FEF3C7;
  border: 1px solid #FCD34D;
  border-radius: 10px;
  font-size: .88rem;
  color: #78350F;
}
.pt-msg-broadcast-confirm svg { color: #B45309; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   PUPIL "PAYMENT NEEDED" CARD (Pass C3)
   ══════════════════════════════════════════════════════════════ */
.pt-pupil-paynow-card {
  border: 1px solid #FCD34D !important;
  background: #FFFBEB !important;
  overflow: hidden;
}
.pt-pupil-paynow-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px 12px;
}
.pt-pupil-paynow-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: #FEF3C7;
  color: #B45309;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pt-pupil-paynow-headtext { flex: 1; min-width: 0; }
.pt-pupil-paynow-title {
  font-weight: 800;
  font-size: 1rem;
  color: #92400E;
  line-height: 1.2;
}
.pt-pupil-paynow-sub {
  font-size: .85rem;
  color: #78350F;
  margin-top: 4px;
  line-height: 1.5;
}
.pt-pupil-paynow-cashflag {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 18px 8px;
  padding: 8px 12px;
  background: #DCFCE7;
  border-radius: 8px;
  font-size: .82rem;
  color: #166534;
}
.pt-pupil-paynow-cashflag svg { flex-shrink: 0; color: #16A34A; }

/* Method buttons */
.pt-pupil-paynow-methods {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 8px;
  padding: 4px 18px 16px;
}
.pt-pupil-paynow-method {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: 10px;
  cursor: pointer;
  text-align: left;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.pt-pupil-paynow-method:hover {
  border-color: var(--ds-amber, #F59E0B);
  box-shadow: 0 2px 8px rgba(245,158,11,.12);
}
.pt-pupil-paynow-method-icon {
  color: var(--ds-navy, #0C1E3D);
  margin-bottom: 4px;
}
.pt-pupil-paynow-method--card  .pt-pupil-paynow-method-icon { color: #6366F1; }
.pt-pupil-paynow-method--bank  .pt-pupil-paynow-method-icon { color: #0EA5E9; }
.pt-pupil-paynow-method--cash  .pt-pupil-paynow-method-icon { color: #16A34A; }
.pt-pupil-paynow-method-label {
  font-weight: 700;
  font-size: .88rem;
  color: #0F172A;
}
.pt-pupil-paynow-method-meta {
  font-size: .72rem;
  color: var(--pt-muted);
}
.pt-pupil-paynow-method.is-active {
  background: #F0FDF4;
  border-color: #16A34A;
}
.pt-pupil-paynow-method.is-active .pt-pupil-paynow-method-label { color: #166534; }

/* Bank details panel */
.pt-pupil-paynow-bankdetails {
  margin: 0 18px 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid var(--pt-border);
  border-radius: 10px;
}
.pt-pupil-paynow-bankdetails-title {
  font-weight: 700;
  font-size: .85rem;
  color: #0F172A;
  margin-bottom: 10px;
}
.pt-pupil-paynow-bankgrid {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}
.pt-pupil-paynow-bankgrid dt {
  font-size: .8rem;
  color: var(--pt-muted);
  font-weight: 600;
}
.pt-pupil-paynow-bankgrid dd {
  margin: 0;
  font-size: .88rem;
  font-weight: 700;
  color: #0F172A;
  font-variant-numeric: tabular-nums;
}
.pt-pupil-paynow-banknote {
  margin: 12px 0 0;
  font-size: .76rem;
  color: var(--pt-muted);
  font-style: italic;
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   LAYOUT DEBUG OVERLAY — append ?ptdebug=1 to the URL to enable.
   Outlines every pupil-dashboard wrapper + labels it, so spacing
   issues can be diagnosed visually without guessing. Off by default.
   ══════════════════════════════════════════════════════════════ */
body.pt-debug-layout .ds-pupil-grid        { outline: 2px solid #ef4444 !important; }
body.pt-debug-layout .ds-pupil-main        { outline: 2px solid #3b82f6 !important; }
body.pt-debug-layout .ds-pupil-lower-grid  { outline: 2px solid #16a34a !important; }
body.pt-debug-layout .ds-pupil-lower-left,
body.pt-debug-layout .ds-pupil-lower-right { outline: 2px dashed #a855f7 !important; }
body.pt-debug-layout .pt-pupil-greeting    { outline: 2px solid #f59e0b !important; background: rgba(245,158,11,.08) !important; }
body.pt-debug-layout .pt-card              { outline: 1px solid rgba(0,0,0,.25) !important; }
body.pt-debug-layout [id^="section-"]      { outline: 2px solid #ec4899 !important; min-height: 6px !important; background: rgba(236,72,153,.15) !important; }
body.pt-debug-layout .ds-pupil-grid::before {
  content: 'ds-pupil-grid'; position: absolute; font-size: 9px; color: #ef4444; background: #fff; padding: 0 3px; font-weight: 700;
}
body.pt-debug-layout .ds-pupil-lower-grid::before {
  content: 'lower-grid'; position: absolute; font-size: 9px; color: #16a34a; background: #fff; padding: 0 3px; font-weight: 700;
}