/* =============================================
   PassTrack — Commercial UI
   Palette: Deep Navy + Amber Gold + Clean White
   Type: Syne (display) + DM Sans (body)
   ============================================= */

:root {
  /* Brand */
  --ds-navy:        #0C1E3D;
  --ds-navy-mid:    #1A3461;
  --ds-navy-light:  #2A4A82;
  --ds-amber:       #F59E0B;
  --ds-amber-light: #FCD34D;
  --ds-amber-dark:  #D97706;

  /* Semantic aliases (keep old names for compatibility) */
  --ds-primary:       var(--ds-navy-mid);
  --ds-primary-light: var(--ds-navy-light);
  --ds-primary-dark:  var(--ds-navy);
  --ds-success:       #059669;
  --ds-success-light: #10B981;
  --ds-warning:       #D97706;
  --ds-warning-light: #F59E0B;
  --ds-danger:        #DC2626;
  --ds-danger-light:  #EF4444;

  /* Surface */
  --ds-bg:           #EEF2F9;
  --ds-surface:      #FFFFFF;
  --ds-surface-hover:#F5F8FC;
  --ds-border:       #E2EAF4;
  --ds-border-mid:   #C8D5E8;

  /* Text */
  --ds-text:        #0C1E3D;
  --ds-text-muted:  #566582;
  --ds-text-subtle: #94A3B8;

  /* Shape */
  --ds-radius:    14px;
  --ds-radius-sm: 9px;
  --ds-radius-xs: 6px;

  /* Shadow */
  --ds-shadow:    0 1px 3px rgba(12,30,61,.05), 0 4px 14px rgba(12,30,61,.07);
  --ds-shadow-md: 0 2px 8px rgba(12,30,61,.08), 0 8px 24px rgba(12,30,61,.09);
  --ds-shadow-lg: 0 8px 32px rgba(12,30,61,.15), 0 2px 8px rgba(12,30,61,.06);

  --ds-header-h: 68px;
  --ds-font-display: 'Syne', system-ui, sans-serif;
  --ds-font-body:    'DM Sans', system-ui, sans-serif;
}

/* ── DARK MODE ──────────────────────────────── */
[data-ds-theme="dark"] {
  --ds-navy:        #0C1E3D;
  --ds-navy-mid:    #2A4A82;
  --ds-navy-light:  #3B5FA0;
  --ds-bg:          #0f172a;
  --ds-surface:     #1e293b;
  --ds-surface-hover:#263347;
  --ds-border:      #2d3f5a;
  --ds-border-mid:  #3a5070;
  --ds-text:        #e2e8f0;
  --ds-text-muted:  #94a3b8;
  --ds-text-subtle: #64748b;
  --ds-shadow:      0 1px 3px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.4);
  --ds-shadow-md:   0 2px 8px rgba(0,0,0,.35), 0 8px 24px rgba(0,0,0,.4);
}
[data-ds-theme="dark"] .ds-header          { background: #0c1628; border-bottom-color: #1e3052; }
[data-ds-theme="dark"] .ds-auth-card       { background: #1e293b; border-color: #2d3f5a; }
[data-ds-theme="dark"] .ds-btn-outline      { background: transparent; border-color: var(--ds-border-mid); color: var(--ds-text); }
[data-ds-theme="dark"] .ds-btn-outline:hover{ background: var(--ds-surface-hover); }
[data-ds-theme="dark"] input, [data-ds-theme="dark"] select, [data-ds-theme="dark"] textarea {
  background: #263347; border-color: #2d3f5a; color: var(--ds-text);
}
[data-ds-theme="dark"] .ds-card            { background: var(--ds-surface); border-color: var(--ds-border); }
[data-ds-theme="dark"] .ds-timeline-content { background: var(--ds-surface); }
[data-ds-theme="dark"] .ds-timeline-header  { background: #263347; }
[data-ds-theme="dark"] .ds-skill-group-title { background: #263347; }
[data-ds-theme="dark"] .ds-pupil-hero       { background: var(--ds-surface); }
[data-ds-theme="dark"] .ds-hero-stat        { background: #263347; }
[data-ds-theme="dark"] .ds-comment-pupil    { background: var(--ds-surface); border-color: var(--ds-border); }
[data-ds-theme="dark"] .ds-comment-header   { background: #263347; }
[data-ds-theme="dark"] .ds-mock-card        { background: var(--ds-surface); border-color: var(--ds-border); }
[data-ds-theme="dark"] .ds-mock-card-header { background: #263347; }
[data-ds-theme="dark"] .ds-sidebar-nav a    { color: var(--ds-text-muted); }
[data-ds-theme="dark"] .ds-sidebar-nav a:hover, [data-ds-theme="dark"] .ds-sidebar-nav a.active { background: #263347; color: var(--ds-text); }

/* Dark mode toggle button */
.ds-dark-toggle {
  background: none; border: none; cursor: pointer;
  color: var(--ds-text-muted); padding: 6px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s;
}
.ds-dark-toggle:hover { background: rgba(255,255,255,.1); color: var(--ds-text); }
.ds-dark-toggle svg   { display: block; }

/* ── MOBILE BOTTOM NAV (pupil only) ─────────── */
.ds-pupil-bottom-nav {
  display: none;
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--ds-surface);
  border-top: 1px solid var(--ds-border);
  padding: 0; margin: 0;
  box-shadow: 0 -2px 12px rgba(12,30,61,.12);
  grid-template-columns: repeat(4, 1fr);
}
.ds-pupil-bottom-nav a {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 8px 4px 10px;
  font-size: .65rem; font-weight: 600; letter-spacing: .03em;
  color: var(--ds-text-muted); text-decoration: none;
  gap: 3px; transition: color .15s;
}
.ds-pupil-bottom-nav a svg { flex-shrink: 0; }
.ds-pupil-bottom-nav a.active,
.ds-pupil-bottom-nav a:hover { color: var(--ds-amber); }
@media (max-width: 680px) {
  .ds-pupil-bottom-nav { display: grid; }
  .ds-pupil-wrap       { padding-bottom: 68px; }
}

/* ── CANCEL LESSON ──────────────────────────── */
.ds-upcoming-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--ds-border); gap: 12px;
}
.ds-cancel-lesson-btn {
  background: none; border: 1px solid #fca5a5; color: #dc2626;
  border-radius: var(--ds-radius-xs); padding: 4px 10px;
  font-size: .78rem; font-weight: 600; cursor: pointer; flex-shrink: 0;
  transition: background .15s;
}
.ds-cancel-lesson-btn:hover { background: #fef2f2; }

/* Cancel confirm modal */
.ds-cancel-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  z-index: 500; display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.ds-cancel-modal {
  background: var(--ds-surface); border-radius: var(--ds-radius);
  padding: 24px; max-width: 420px; width: 100%;
  box-shadow: var(--ds-shadow-lg);
}
.ds-cancel-modal h3 { margin: 0 0 8px; font-size: 1.05rem; color: var(--ds-text); }
.ds-cancel-modal p  { margin: 0 0 16px; font-size: .88rem; color: var(--ds-text-muted); }
.ds-cancel-policy-notice {
  background: #fef9c3; border-left: 3px solid #fcd34d;
  padding: 8px 12px; font-size: .82rem; color: #92400e;
  border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0;
  margin-bottom: 14px;
}
.ds-cancel-modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }

/* ── READ RECEIPTS ──────────────────────────── */
.ds-msg-read-tick {
  display: inline-block; margin-left: 5px;
  font-size: .72rem; color: var(--ds-amber);
  transition: opacity .2s;
}
.ds-msg-read-tick.unread { color: var(--ds-text-subtle); }


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

.ds-wrap {
  min-height: 100vh;
  padding-bottom: 80px;
  background: var(--ds-bg);
  font-family: var(--ds-font-body);
  color: var(--ds-text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* ── HEADER ───────────────────────────────────── */
.ds-header {
  background: var(--ds-navy);
  height: var(--ds-header-h);
  position: sticky; top: 0; z-index: 200;
  box-shadow: 0 1px 0 rgba(255,255,255,.05), 0 4px 20px rgba(0,0,0,.3);
}
.ds-header-inner {
  max-width: 1400px; margin: 0 auto; height: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px; gap: 16px;
}
.ds-header-brand { display: flex; align-items: center; gap: 12px; text-decoration: none; flex-shrink: 0; }
.ds-logo-icon {
  width: 40px !important; height: 40px !important;
  min-width: 40px !important; max-width: 40px !important;
  background: linear-gradient(135deg, var(--ds-amber) 0%, var(--ds-amber-dark) 100%);
  border-radius: 10px;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: 1.15rem;
  box-shadow: 0 2px 10px rgba(245,158,11,.45);
  flex-shrink: 0;
  overflow: hidden;
}
.ds-brand-name {
  font-family: var(--ds-font-display);
  font-size: 1.05rem; font-weight: 700;
  color: #fff; letter-spacing: -.01em;
}
.ds-brand-role { font-size: .7rem; color: rgba(255,255,255,.4); font-weight: 400; margin-top: 1px; }
.ds-header-actions { display: flex; align-items: center; gap: 10px; }
.ds-user-greeting { color: rgba(255,255,255,.5); font-size: .8rem; white-space: nowrap; }

/* Avatar in header */
.ds-header-avatar-label { position: relative; cursor: pointer; flex-shrink: 0; }
.ds-header-avatar {
  width: 38px; height: 38px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.18);
  object-fit: cover; display: block; transition: border-color .2s;
}
.ds-header-avatar-label:hover .ds-header-avatar { border-color: var(--ds-amber); }
.ds-avatar-camera {
  position: absolute; bottom: -2px; right: -2px;
  width: 16px; height: 16px;
  background: var(--ds-amber); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: .55rem; color: white;
  border: 1.5px solid var(--ds-navy); pointer-events: none;
  opacity: 0; transition: opacity .2s;
}
.ds-header-avatar-label:hover .ds-avatar-camera { opacity: 1; }
.ds-header-avatar-label:hover .ds-header-avatar { border-color: var(--ds-amber); }
.ds-avatar-file-input { display: none !important; }
.ds-avatar-remove-btn {
  position: absolute;
  top: -4px; right: -4px;
  width: 16px; height: 16px;
  background: #ef4444;
  border: 1.5px solid var(--ds-navy);
  border-radius: 50%;
  color: white;
  font-size: .5rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0; z-index: 5;
  opacity: 0; transition: opacity .2s;
}
.ds-header-avatar-wrap:hover .ds-avatar-remove-btn { opacity: 1; }
.ds-avatar-status { font-size: .7rem; color: rgba(255,255,255,.6); white-space: nowrap; }

/* ── NAV TABS ─────────────────────────────────── */
.ds-nav-tabs {
  background: var(--ds-surface);
  border-bottom: 1px solid var(--ds-border);
  display: flex; padding: 0 28px;
  overflow-x: auto; scrollbar-width: none; gap: 2px;
}
.ds-nav-tabs::-webkit-scrollbar { display: none; }
.ds-tab {
  display: flex; align-items: center; gap: 7px;
  padding: 0 16px; height: 52px;
  font-size: .82rem; font-weight: 500;
  color: var(--ds-text-muted); text-decoration: none;
  border-bottom: 3px solid transparent;
  white-space: nowrap; transition: color .18s, border-color .18s;
}
.ds-tab:hover { color: var(--ds-navy-mid); }
.ds-tab.active { color: var(--ds-navy); border-bottom-color: var(--ds-amber); font-weight: 600; }
.ds-tab svg { opacity: .6; }
.ds-tab.active svg { opacity: 1; }

/* ── CARDS ────────────────────────────────────── */
.ds-card {
  background: var(--ds-surface);
  border-radius: var(--ds-radius);
  box-shadow: var(--ds-shadow);
  border: 1px solid var(--ds-border);
  overflow: visible; margin-bottom: 20px;
  transition: box-shadow .2s, transform .2s;
}
.ds-card-full { width: 100%; }
.ds-card-header {
  padding: 14px 20px;
  font-family: var(--ds-font-display);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .05em; text-transform: uppercase;
  border-bottom: 1px solid var(--ds-border);
  display: flex; align-items: center; gap: 8px;
  color: var(--ds-navy);
  background: linear-gradient(180deg, #FAFBFE 0%, var(--ds-surface) 100%);
}
.ds-card-header button, .ds-card-header .ds-btn { margin-left: auto; }
.ds-card-subtitle {
  margin-left: auto; font-size: .74rem; color: var(--ds-text-muted);
  font-weight: 400; font-family: var(--ds-font-body);
  text-transform: none; letter-spacing: 0;
}

/* ── LAYOUT ───────────────────────────────────── */
.ds-content {
  max-width: 1400px; margin: 0 auto; padding: 28px;
  display: grid; grid-template-columns: 300px 1fr;
  gap: 24px; align-items: start;
}
.ds-content-sidebar, .ds-content-main { min-width: 0; }

/* ── BUTTONS ──────────────────────────────────── */
.ds-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body);
  font-size: .84rem; font-weight: 600;
  cursor: pointer; border: none; text-decoration: none;
  transition: all .18s; line-height: 1.2;
  letter-spacing: -.01em; white-space: nowrap;
}
.ds-btn-primary {
  background: var(--ds-navy-mid); color: white;
  box-shadow: 0 2px 8px rgba(26,52,97,.28);
}
.ds-btn-primary:hover {
  background: var(--ds-navy); color: white;
  box-shadow: 0 4px 14px rgba(12,30,61,.35);
  transform: translateY(-1px);
}
.ds-btn-outline {
  background: transparent; color: var(--ds-navy-mid);
  border: 1.5px solid var(--ds-border-mid);
}
.ds-btn-outline:hover { background: var(--ds-navy-mid); color: white; border-color: var(--ds-navy-mid); }
.ds-btn-danger {
  background: var(--ds-danger-light); color: white;
  box-shadow: 0 2px 6px rgba(239,68,68,.22);
}
.ds-btn-danger:hover { background: var(--ds-danger); }
.ds-btn-sm  { padding: 5px 12px; font-size: .78rem; border-radius: var(--ds-radius-xs); }
.ds-btn-xs  { padding: 3px 9px;  font-size: .72rem; border-radius: 5px; }
.ds-btn-full { width: 100%; justify-content: center; }
.ds-btn-link { background: none; border: none; cursor: pointer; font-size: .8rem; color: var(--ds-navy-mid); padding: 0 4px; font-weight: 500; }
.ds-btn-link.ds-danger { color: var(--ds-danger); }
.ds-logout-btn {
  background: rgba(255,255,255,.08); color: rgba(255,255,255,.75);
  border: 1px solid rgba(255,255,255,.14); font-size: .79rem; padding: 7px 14px;
}
.ds-logout-btn:hover { background: rgba(255,255,255,.16); color: white; transform: none; box-shadow: none; }

/* ── FORMS ────────────────────────────────────── */
.ds-form { display: flex; flex-direction: column; gap: 16px; padding: 20px; }
.ds-form-group { display: flex; flex-direction: column; gap: 5px; }
.ds-form-group label {
  font-size: .74rem; font-weight: 700; color: var(--ds-text-muted);
  letter-spacing: .04em; text-transform: uppercase;
}
.ds-form-group input, .ds-form-group textarea, .ds-form-group select {
  padding: 10px 14px; border: 1.5px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  font-family: var(--ds-font-body); font-size: .875rem;
  color: var(--ds-text); outline: none;
  transition: border-color .18s, box-shadow .18s;
  background: var(--ds-surface); width: 100%;
}
.ds-form-group input:focus, .ds-form-group textarea:focus, .ds-form-group select:focus {
  border-color: var(--ds-navy-light);
  box-shadow: 0 0 0 3px rgba(42,74,130,.1);
}
.ds-form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; }
.ds-form-actions { display: flex; gap: 12px; padding-top: 4px; }

/* ── AUTH ─────────────────────────────────────── */
.ds-auth-wrap {
  min-height: 100vh;
  background: linear-gradient(150deg, #080F1E 0%, #0C1E3D 50%, #122040 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 20px; position: relative; overflow: hidden;
}
.ds-auth-wrap::before {
  content: ''; position: absolute;
  width: 700px; height: 700px;
  background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 65%);
  top: -150px; right: -100px; pointer-events: none;
}
.ds-auth-wrap::after {
  content: ''; position: absolute;
  width: 500px; height: 500px;
  background: radial-gradient(circle, rgba(42,74,130,.25) 0%, transparent 65%);
  bottom: -100px; left: -100px; pointer-events: none;
}
.ds-auth-card {
  background: white; border-radius: 22px;
  width: 100%; max-width: 440px;
  box-shadow: 0 24px 64px rgba(0,0,0,.4);
  overflow: hidden; position: relative; z-index: 1;
}
.ds-auth-logo {
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%);
  padding: 40px 32px 32px; text-align: center; color: white;
  position: relative; overflow: hidden;
}
.ds-auth-logo::after {
  content: ''; position: absolute;
  width: 220px; height: 220px; border-radius: 50%;
  background: rgba(245,158,11,.08); bottom: -90px; right: -70px;
}
.ds-auth-wordmark {
  font-family: 'Syne', Georgia, serif;
  font-size: 2.4rem; font-weight: 700; letter-spacing: -.02em;
  line-height: 1; margin-bottom: 10px;
  position: relative; z-index: 1;
}
.ds-auth-word-pass  { color: #ffffff; }
.ds-auth-word-track { color: #F59E0B; }
.ds-auth-logo p {
  margin: 0; font-size: .875rem; color: rgba(255,255,255,.6);
  position: relative; z-index: 1;
}
.ds-form-links { text-align: center; font-size: .85rem; }
.ds-form-links a { color: var(--ds-navy-mid); text-decoration: none; font-weight: 600; }
.ds-form-links a:hover { text-decoration: underline; }

/* ── NOTICES ──────────────────────────────────── */
.ds-notice { padding: 12px 16px; border-radius: var(--ds-radius-sm); font-size: .875rem; margin-bottom: 16px; }
.ds-notice-success { background: #F0FDF4; color: #16A34A; border: 1px solid #BBF7D0; }
.ds-notice-error   { background: #FEF2F2; color: #DC2626; border: 1px solid #FECACA; }

/* ── PUPIL LIST ───────────────────────────────── */
.ds-pupil-list { padding: 4px 0; }
.ds-pupil-item {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px; text-decoration: none; color: var(--ds-text);
  transition: background .15s; border-left: 3px solid transparent;
}
.ds-pupil-item:hover { background: var(--ds-surface-hover); }
.ds-pupil-item.active {
  background: linear-gradient(90deg, rgba(26,52,97,.07) 0%, transparent 100%);
  border-left-color: var(--ds-amber);
}
.ds-pupil-avatar {
  width: 38px; height: 38px;
  background: linear-gradient(135deg, var(--ds-navy-mid) 0%, var(--ds-navy-light) 100%);
  color: white; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-display); font-weight: 700; font-size: .85rem;
  flex-shrink: 0; overflow: hidden;
}
.ds-pupil-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ds-pupil-name { font-weight: 600; font-size: .86rem; }
.ds-pupil-meta { font-size: .72rem; color: var(--ds-text-muted); margin-top: 1px; }

/* ── TRAFFIC LIGHTS ───────────────────────────── */
.ds-traffic-light { display: inline-block; width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; }
.tl-green { background: var(--ds-success-light); box-shadow: 0 0 0 3px rgba(16,185,129,.2); }
.tl-amber { background: var(--ds-warning-light);  box-shadow: 0 0 0 3px rgba(245,158,11,.2); }
.tl-red   { background: var(--ds-danger-light);   box-shadow: 0 0 0 3px rgba(239,68,68,.2); }
.tl-grey  { background: var(--ds-text-subtle); }

/* ── PUPIL DETAIL PANEL ───────────────────────── */
.ds-pupil-detail-header {
  display: flex; align-items: center; gap: 16px; padding: 20px;
  flex-wrap: wrap;
  background: linear-gradient(180deg, #FAFBFE 0%, var(--ds-surface) 100%);
  border-bottom: 1px solid var(--ds-border);
}
.ds-pupil-detail-avatar {
  width: 56px; height: 56px;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%);
  color: white; border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ds-font-display); font-size: 1.35rem; font-weight: 700;
  flex-shrink: 0; overflow: hidden;
}
.ds-pupil-detail-avatar img { width: 100%; height: 100%; object-fit: cover; border-radius: 14px; }
.ds-pupil-detail-info { flex: 1; min-width: 180px; }
.ds-pupil-detail-info h2 {
  font-family: var(--ds-font-display); margin: 0 0 5px;
  font-size: 1.15rem; letter-spacing: -.02em;
}
.ds-pupil-detail-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: .78rem; color: var(--ds-text-muted); }
.ds-pupil-detail-badges { display: flex; gap: 6px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.ds-pupil-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

.ds-badge {
  display: inline-flex; align-items: center;
  background: var(--ds-surface-hover); color: var(--ds-text-muted);
  border: 1px solid var(--ds-border); padding: 3px 10px;
  border-radius: 20px; font-size: .7rem; font-weight: 600; letter-spacing: .02em;
}
.ds-badge-blue { background: rgba(42,74,130,.08); color: var(--ds-navy-mid); border-color: rgba(42,74,130,.2); }

/* ══════════════════════════════════════════════════════════════
   PUPIL DETAIL PANEL — unified layout
   ══════════════════════════════════════════════════════════════ */

/* ── Main 2-col grid (sidebar | lessons) ─────── */
.ds-detail-grid {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.ds-detail-left,
.ds-detail-right { min-width: 0; }

/* Sidebar cards stack with uniform gap */
.ds-detail-left { display: flex; flex-direction: column; gap: 16px; }

/* Lessons card stretches to fill right column */
.ds-detail-right .ds-card { height: 100%; }

/* ── Bottom 3-col strip (charts | notes | messages) */
.ds-detail-bottom {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
  align-items: start;
  margin-top: 16px;
}
.ds-detail-bottom > .ds-card { min-width: 0; }

/* ── Mock tests full-width card ──────────────── */
.ds-mock-card-full {
  margin-top: 16px;
}
.ds-mock-outer {
  padding: 0;
}

/* ── Pending requests banner ─────────────────── */
.ds-pending-banner {
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: var(--ds-radius);
  padding: 12px 18px;
  margin-top: 16px;
}
.ds-pending-banner-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: #92400e;
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-bottom: 10px;
}
.ds-pending-rows { display: flex; flex-direction: column; gap: 8px; }
.ds-req-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border-radius: var(--ds-radius-sm);
  border: 1px solid #fde68a;
}
.ds-req-info { font-size: .83rem; color: var(--ds-navy); flex: 1; }
.ds-req-note { display: block; color: var(--ds-text-muted); font-size: .78rem; margin-top: 2px; }
.ds-req-actions { display: flex; gap: 6px; flex-shrink: 0; }

/* ── Messages card ───────────────────────────── */
.ds-messages-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.ds-msg-header-name {
  margin-left: auto;
  font-size: .72rem;
  font-weight: 500;
  color: var(--ds-text-muted);
  font-family: var(--ds-font-body);
}
.ds-msg-thread {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px;
  background: var(--ds-bg);
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 220px;
  max-height: 320px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-msg-compose {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 14px;
  background: #fff;
  border-top: none;
}
.ds-msg-compose-input {
  flex: 1;
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  padding: 8px 14px;
  font-size: .875rem;
  font-family: var(--ds-font-body);
  resize: none;
  line-height: 1.4;
  outline: none;
  transition: border-color .15s;
  background: var(--ds-surface-hover);
}
.ds-msg-compose-input:focus { border-color: var(--ds-navy); background: #fff; }
.ds-msg-send-btn {
  width: 36px; height: 36px;
  border-radius: 50% !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── Notes card ──────────────────────────────── */
.ds-notes-card {
  display: flex;
  flex-direction: column;
  min-height: 360px;
}
.ds-notes-private-badge {
  margin-left: auto;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #92400e;
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 10px;
  padding: 1px 7px;
}
.ds-notes-log {
  flex: 1;
  overflow-y: auto;
  max-height: 260px;
  padding: 4px 0;
  border-bottom: 1px solid var(--ds-border);
}
.ds-note-entry {
  padding: 10px 16px;
  border-bottom: 1px solid var(--ds-border);
  transition: background .4s;
}
.ds-note-entry:last-child { border-bottom: none; }
.ds-note-entry.ds-note-new { background: #f0fdf4; }
.ds-note-text {
  font-size: .875rem;
  color: var(--ds-text);
  line-height: 1.5;
  white-space: pre-wrap;
}
.ds-note-ts {
  font-size: .7rem;
  color: var(--ds-text-muted);
  margin-top: 4px;
}
.ds-notes-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: .85rem;
  color: var(--ds-text-muted);
}
.ds-notes-compose {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ds-notes-input {
  width: 100%;
  border-radius: var(--ds-radius-sm);
  font-size: .875rem;
  resize: none;
  box-sizing: border-box;
}
.ds-notes-add-btn {
  align-self: flex-end;
  display: flex;
  align-items: center;
  gap: 5px;
}

/* ── Responsive breakpoints ──────────────────── */
@media (max-width: 1100px) {
  .ds-detail-bottom { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .ds-detail-grid   { grid-template-columns: 1fr; }
  .ds-detail-bottom { grid-template-columns: 1fr; }
}



/* ── LESSONS ──────────────────────────────────── */
.ds-lesson-row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--ds-border);
  transition: background .15s;
}
.ds-lesson-row:last-child { border-bottom: none; }
.ds-lesson-row:hover { background: var(--ds-surface-hover); }
.ds-lesson-date { text-align: center; min-width: 46px; }
.ds-lesson-day { font-family: var(--ds-font-display); font-size: 1.3rem; font-weight: 700; line-height: 1; color: var(--ds-navy); }
.ds-lesson-month { font-size: .65rem; color: var(--ds-text-muted); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.ds-lesson-info { flex: 1; min-width: 0; }
.ds-lesson-title { font-weight: 600; font-size: .875rem; }
.ds-lesson-preview { font-size: .75rem; color: var(--ds-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; margin-top: 2px; }
.ds-lesson-grade { font-size: .875rem; font-weight: 700; color: var(--ds-navy-mid); min-width: 40px; }
.ds-lesson-actions { display: flex; gap: 6px; }

.ds-status-badge { padding: 3px 10px; border-radius: 20px; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.status-scheduled { background: rgba(42,74,130,.1);  color: var(--ds-navy-mid); }
.status-completed  { background: rgba(5,150,105,.1);  color: var(--ds-success); }
.status-cancelled  { background: rgba(220,38,38,.08); color: var(--ds-danger); }

/* ── COACHING ─────────────────────────────────── */
.ds-coaching-card .ds-card-header { color: #6D28D9; }
.ds-suggestion { padding: 12px 16px; border-bottom: 1px solid var(--ds-border); }
.ds-suggestion:last-child { border-bottom: none; }
.ds-suggestion-skill { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ds-suggestion-skill strong { font-size: .875rem; font-weight: 600; }
.ds-suggestion p { margin: 0; font-size: .8rem; color: var(--ds-text-muted); line-height: 1.5; }
.ds-coaching-inline { background: #F5F3FF; border-radius: 8px; padding: 12px; margin-bottom: 16px; }
.ds-coaching-inline .ds-suggestion-inline { margin-bottom: 8px; font-size: .8rem; }

.ds-grade-mini { display: inline-block; padding: 2px 8px; border-radius: 12px; font-size: .72rem; font-weight: 700; }
.grade-0 { background: #F1F5F9; color: #64748B; }
.grade-1 { background: #FEF2F2; color: #DC2626; }
.grade-2 { background: #FEF9C3; color: #854D0E; }
.grade-3 { background: #FFF7ED; color: #C2410C; }
.grade-4 { background: #F0FDF4; color: #16A34A; }
.grade-5 { background: #DCFCE7; color: #15803D; }

/* ── READINESS ────────────────────────────────── */
.ds-readiness-card .ds-card-header { color: #0891B2; }
.ds-readiness-body { padding: 16px; }
.ds-readiness-ready { display: flex; align-items: flex-start; gap: 12px; }
.ds-readiness-icon { width: 40px; height: 40px; background: var(--ds-success-light); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; }
.ds-readiness-label { font-size: .7rem; text-transform: uppercase; color: var(--ds-text-muted); font-weight: 700; letter-spacing: .06em; }
.ds-readiness-dates { font-family: var(--ds-font-display); font-size: 1rem; font-weight: 700; color: var(--ds-navy); margin: 4px 0; }
.ds-readiness-weeks { font-size: .8rem; color: var(--ds-text-muted); margin-bottom: 10px; }
.ds-readiness-bar-track { background: #E5E7EB; border-radius: 20px; height: 7px; overflow: hidden; }
.ds-readiness-bar { background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-success-light)); height: 100%; border-radius: 20px; transition: width 1s ease; }
.ds-readiness-bar-hours { background: linear-gradient(90deg, var(--ds-amber), var(--ds-success-light)); }
.ds-readiness-basis { font-size: .72rem; color: var(--ds-text-muted); margin-top: 10px; font-style: italic; }
.ds-readiness-unknown { font-size: .875rem; color: var(--ds-text-muted); padding: 4px 0; }
.ds-readiness-disclaimer { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ds-border); font-size: .72rem; color: var(--ds-text-subtle); line-height: 1.5; }

/* ── SKILLS ───────────────────────────────────── */
.ds-skills-section { padding: 0 20px 16px; }
.ds-skills-section h4 { font-size: .7rem; text-transform: uppercase; letter-spacing: .1em; color: var(--ds-text-muted); margin: 0 0 12px; display: flex; align-items: center; font-weight: 700; }
.ds-skill-category { margin-bottom: 16px; }
.ds-skill-cat-header {
  font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em;
  color: var(--ds-navy-mid);
  background: linear-gradient(90deg, rgba(26,52,97,.07) 0%, transparent 100%);
  padding: 7px 8px 7px 12px; margin-bottom: 8px;
  border-left: 3px solid var(--ds-amber); border-radius: 0 4px 4px 0;
}
.ds-skill-grid { display: flex; flex-direction: column; gap: 8px; }
.ds-skill-item { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ds-skill-name { font-size: .8rem; min-width: 200px; flex: 1; }
.ds-grade-selector { display: flex; gap: 4px; flex-wrap: wrap; }
.ds-grade-opt { cursor: pointer; }
.ds-grade-opt input { display: none; }
.ds-grade-opt span {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: var(--ds-radius-xs);
  background: #F1F5F9; color: var(--ds-text-muted);
  font-size: .78rem; font-weight: 700; transition: all .15s; border: 2px solid transparent;
}
.ds-grade-opt input:checked + span { background: var(--ds-navy-mid); color: white; border-color: var(--ds-navy); box-shadow: 0 2px 6px rgba(26,52,97,.3); }
.ds-grade-opt:hover span { background: #E2E8F0; }
.ds-grade-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 20px;
  font-size: .73rem; font-weight: 700; white-space: nowrap;
  border: 1.5px solid transparent;
}
.ds-grade-badge.grade-0 { background:#f1f5f9; color:#64748b; border-color:#e2e8f0; }
.ds-grade-badge.grade-1 { background:#fef2f2; color:#991b1b; border-color:#fecaca; }
.ds-grade-badge.grade-2 { background:#fff7ed; color:#9a3412; border-color:#fed7aa; }
.ds-grade-badge.grade-3 { background:#fefce8; color:#854d0e; border-color:#fde68a; }
.ds-grade-badge.grade-4 { background:#f0fdf4; color:#166534; border-color:#bbf7d0; }
.ds-grade-badge.grade-5 { background:#ecfdf5; color:#065f46; border-color:#6ee7b7; }

/* ── SKILL MANAGEMENT ─────────────────────────── */
.ds-skills-manage { max-width: 1400px; margin: 0 auto; padding: 28px; }
.ds-skill-cat-section { padding: 0 0 16px; }
.ds-skill-cat-title {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 20px;
  background: linear-gradient(90deg, rgba(26,52,97,.06) 0%, transparent 100%);
  border-left: 3px solid var(--ds-amber);
  font-family: var(--ds-font-display); font-weight: 700; font-size: .88rem;
}
.ds-skill-row { display: flex; align-items: center; gap: 12px; padding: 11px 20px; border-bottom: 1px solid var(--ds-border); transition: background .15s; }
.ds-skill-row:hover { background: var(--ds-surface-hover); }
.ds-skill-row:last-child { border-bottom: none; }
.ds-skill-row-name { flex: 1; font-size: .875rem; font-weight: 500; }
.ds-skill-row-desc { font-size: .78rem; color: var(--ds-text-muted); }
.ds-skill-row-actions { display: flex; gap: 6px; }
.ds-meta { font-size: .78rem; color: var(--ds-text-muted); }

/* ── WELCOME CARD ─────────────────────────────── */
.ds-welcome-card { padding: 48px 40px; text-align: center; }
.ds-welcome-icon { font-size: 3rem; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.ds-welcome-icon svg { color: var(--ds-navy-mid); opacity: .7; }
.ds-welcome-card h2 { font-family: var(--ds-font-display); font-size: 1.5rem; color: var(--ds-navy); margin: 0 0 8px; letter-spacing: -.02em; }
.ds-welcome-card p { color: var(--ds-text-muted); font-size: .9rem; }
.ds-stats-row { display: flex; justify-content: center; gap: 48px; margin-top: 28px; }
.ds-stat-item { text-align: center; }
.ds-stat-num { font-family: var(--ds-font-display); font-size: 2.6rem; font-weight: 800; color: var(--ds-navy-mid); line-height: 1; }
.ds-stat-label { font-size: .75rem; color: var(--ds-text-muted); margin-top: 4px; text-transform: uppercase; letter-spacing: .05em; }

/* ── PUPIL HERO ───────────────────────────────── */

/* ── PUPIL HERO (merged identity + stats) ─────── */
.ds-pupil-hero {
  background: linear-gradient(135deg, var(--ds-navy) 0%, #183566 55%, #1E3F78 100%);
  padding: 28px 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  position: relative;
  overflow: hidden;
}
.ds-pupil-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(245,158,11,.12) 0%, transparent 70%);
  pointer-events: none;
}
.ds-hero-identity {
  display: flex;
  align-items: center;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.ds-hero-avatar-wrap {
  position: relative;
  flex-shrink: 0;
}
.ds-hero-avatar-label {
  display: block !important;
  width: 64px !important; height: 64px !important;
  border-radius: 50% !important;
  cursor: pointer;
  position: relative;
  overflow: hidden !important;
  border: 3px solid rgba(245,158,11,.55) !important;
  transition: border-color .2s;
  flex-shrink: 0 !important;
}
.ds-hero-avatar-label:hover { border-color: var(--ds-amber) !important; }
.ds-hero-avatar-img {
  width: 100% !important; height: 100% !important;
  max-width: none !important;
  object-fit: cover !important;
  display: block !important;
  border-radius: 50% !important;
}
.ds-hero-avatar-initial {
  width: 100% !important; height: 100% !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  background: var(--ds-amber) !important;
  font-family: var(--ds-font-display);
  font-size: 1.5rem !important; font-weight: 700 !important; color: white !important;
}
.ds-hero-avatar-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.45);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.ds-hero-avatar-label:hover .ds-hero-avatar-overlay { opacity: 1; }
.ds-hero-avatar-remove {
  position: absolute;
  top: -4px; right: -4px;
  width: 18px; height: 18px;
  background: #ef4444;
  border: 2px solid #0C1E3D;
  border-radius: 50%;
  color: white;
  font-size: .55rem;
  line-height: 1;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  padding: 0;
  z-index: 10;
}
.ds-hero-avatar-status {
  position: absolute;
  bottom: -18px; left: 50%;
  transform: translateX(-50%);
  font-size: .68rem;
  white-space: nowrap;
  color: rgba(255,255,255,.8);
}
.ds-hero-identity-text { position: relative; z-index: 1; }
.ds-hero-name {
  font-family: var(--ds-font-display);
  font-size: 1.45rem; font-weight: 700;
  color: white;
  letter-spacing: -.02em;
  line-height: 1.2;
}
.ds-hero-meta {
  display: flex; align-items: center; gap: 8px;
  margin-top: 5px;
  font-size: .82rem; color: rgba(255,255,255,.65);
}
.ds-hero-badge {
  background: rgba(245,158,11,.2);
  border: 1px solid rgba(245,158,11,.4);
  color: #fbbf24;
  font-size: .68rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  padding: 2px 8px; border-radius: 100px;
}
.ds-hero-meta-sep { opacity: .35; }
/* ds-hero-remove-photo removed */
.ds-hero-stats {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  position: relative; z-index: 1;
}
.ds-stat-card {
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 12px !important;
  padding: 14px 18px !important;
  text-align: center !important;
  min-width: 88px;
  box-shadow: 0 2px 10px rgba(0,0,0,.2) !important;
  transition: box-shadow .2s, transform .15s;
}
.ds-stat-card:hover {
  box-shadow: 0 4px 18px rgba(0,0,0,.25) !important;
  transform: translateY(-1px);
}
.ds-stat-value {
  font-family: var(--ds-font-display);
  font-size: 1.65rem !important; font-weight: 800 !important;
  line-height: 1 !important;
  color: #0C1E3D !important;
  opacity: 1 !important;
}
.ds-stat-label {
  font-size: .66rem !important;
  color: #566582 !important;
  margin-top: 5px !important;
  text-transform: uppercase !important;
  letter-spacing: .07em !important;
  font-weight: 700 !important;
  opacity: 1 !important;
}
.ds-stat-progress { min-width: 110px; }
.ds-stat-progress-bar-track {
  height: 4px;
  background: #E2EAF4;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.ds-stat-progress-bar {
  height: 100%;
  background: var(--ds-amber);
  border-radius: 2px;
  transition: width .6s ease;
}
@media (max-width: 768px) {
  .ds-pupil-hero { flex-direction: column; align-items: flex-start; padding: 20px; }
  .ds-hero-stats { width: 100%; }
  .ds-stat-card { flex: 1; min-width: 70px; padding: 12px 10px; }
  .ds-stat-value { font-size: 1.3rem; }
}


.ds-pupil-identity-banner { display: flex !important; align-items: center !important; }

/* Fix: theme p margin inside cards */
.ds-card p { margin: 0 !important; }
.ds-card h2, .ds-card h3, .ds-card h4 { margin: 0 !important; padding: 0 !important; }

/* Fix: delete/danger button */
.ds-wrap button[style*="color:#dc2626"],
.ds-wrap button[style*="color:var(--ds-danger)"] {
  background: none !important;
  border: none !important;
  cursor: pointer;
  font-size: .8rem !important;
  font-weight: 600 !important;
  color: var(--ds-danger) !important;
  padding: 4px 8px !important;
}
.ds-wrap button[style*="margin-left:auto"] {
  margin-left: auto !important;
}

/* Fix: the lesson status text (not using status-badge class) */
.ds-lesson-status {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ds-lesson-status.status-scheduled { background: rgba(42,74,130,.1); color: var(--ds-navy-mid); }
.ds-lesson-status.status-completed  { background: rgba(5,150,105,.1); color: var(--ds-success); }
.ds-lesson-status.status-cancelled  { background: rgba(220,38,38,.08); color: var(--ds-danger); }

/* Fix: test card purple header */
.ds-card-header-purple { color: var(--ds-navy-mid) !important; }

/* Fix: text-subtle class */
.ds-text-subtle { color: var(--ds-text-subtle) !important; font-size: .875rem !important; }

/* Responsive layout fixes with !important */
@media (max-width: 1024px) {
  .ds-content      { grid-template-columns: 260px 1fr !important; }
  .ds-detail-grid  { grid-template-columns: 1fr !important; }
  .ds-pupil-grid   { grid-template-columns: 1fr !important; }
  .ds-pupil-lower-grid { grid-template-columns: 1fr !important; }
  .ds-pupil-mock-card  { width: calc(100% - 28px); }
}
@media (max-width: 900px) {
  .ds-content      { grid-template-columns: 1fr !important; }
}
@media (max-width: 768px) {
  .ds-content      { grid-template-columns: 1fr !important; padding: 14px !important; }
  .ds-pupil-grid       { grid-template-columns: 1fr !important; padding: 14px !important; }
  .ds-pupil-lower-grid { grid-template-columns: 1fr !important; padding: 0 14px 14px !important; }
  .ds-pupil-mock-card  { width: calc(100% - 28px); }
  .ds-detail-grid  { grid-template-columns: 1fr !important; }
  .ds-pupil-hero   { flex-direction: column !important; padding: 16px !important; }
  .ds-hero-stats   { width: 100% !important; justify-content: space-between !important; }
  .ds-stat-card    { flex: 1 !important; min-width: 0 !important; padding: 12px 10px !important; }
}

/* ── FIX: WordPress themes set svg/img { max-width: 100% }
   which blows up our header icon to full width.
   Pin every SVG inside our wrap to its intrinsic size. ── */
.ds-wrap svg {
  max-width: none !important;
  flex-shrink: 0;
}
.ds-logo-icon svg {
  width: 22px !important;
  height: 22px !important;
}
.ds-header-logo-img {
  max-height: 44px !important;
  max-width: 160px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: block;
}

/* ── FIX: Break .ds-wrap out of the theme's narrow content
   column so it fills the full viewport width. ── */


/* ── CONSISTENT TAB LAYOUT ─────────────────────
   Every tab now uses ds-tab-content as its outer
   wrapper — same max-width, padding, and margin
   as ds-content and ds-calendar-wrap.
   ─────────────────────────────────────────────── */
.ds-tab-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 28px;
  box-sizing: border-box;
}
.ds-tab-content-narrow {
  max-width: 860px;
}
.ds-tab-content-pupil {
  padding: 0;          /* pupil grid has its own padding via ds-pupil-grid */
}

/* Ensure ds-content, ds-calendar-wrap, ds-pupil-grid all share the same rhythm */
.ds-content,
.ds-calendar-wrap,
.ds-skills-manage {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  box-sizing: border-box;
}
.ds-pupil-grid {
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 28px !important;
  box-sizing: border-box;
  display: grid !important;
  grid-template-columns: 1fr 340px !important;
  gap: 24px !important;
  align-items: start !important;
}

/* ── PUPIL LOWER GRID (Request + Gaps / Messages) ── */
.ds-pupil-lower-grid {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 28px 28px;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
.ds-pupil-lower-left,
.ds-pupil-lower-right { display: flex; flex-direction: column; gap: 16px; }

.ds-pupil-messages-card { display: flex; flex-direction: column; }
.ds-pupil-msg-thread   { max-height: 340px; overflow-y: auto; min-height: 80px; }
.ds-pupil-msg-compose  { padding: 12px 16px; display: flex; gap: 8px; border-top: 1px solid var(--ds-border); }

.ds-pupil-mock-card    { max-width: 1400px; margin: 0 auto 28px; width: calc(100% - 56px); }
.ds-pupil-mock-list    { padding: 4px 0; }

.ds-gap-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; border-bottom: 1px solid var(--ds-border); gap: 12px;
}
.ds-gap-datetime { font-weight: 600; font-size: .95rem; color: #111; }
.ds-gap-meta     { font-size: .84rem; color: var(--ds-text-muted); margin-top: 2px; }

.ds-mock-expand-btn { margin-left: auto; flex-shrink: 0; }
.ds-mock-detail-panel { padding: 0 16px 12px; }

.ds-input {
  width: 100%; padding: 6px 8px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  font-size: .9em; box-sizing: border-box;
}
.ds-section-label {
  font-size: .78em; font-weight: 700;
  letter-spacing: .05em; color: #9ca3af;
}


/* ── MESSAGING LAYOUT ──────────────────────────
   Replace the inline grid style.
   ─────────────────────────────────────────────── */
.ds-msg-layout {
  display: grid !important;
  grid-template-columns: 240px minmax(0, 1fr) !important;
  gap: 16px !important;
  height: 580px !important;
  align-items: stretch;
}
.ds-msg-sidebar {
  overflow-y: auto;
  min-width: 0;
  height: 100%;
}
/* Chat panel card must be flex column so inner flex:1 works */
.ds-msg-layout > .ds-card:last-child {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
}

/* ── CARD CONSISTENCY ──────────────────────────
   Cards should never stretch beyond their grid
   cell. Remove any rogue margin-tops.
   ─────────────────────────────────────────────── */
.ds-tab-content > .ds-card,
.ds-tab-content-narrow > .ds-card {
  margin-bottom: 20px;
}
.ds-tab-content > .ds-card:last-child,
.ds-tab-content-narrow > .ds-card:last-child {
  margin-bottom: 0;
}

/* Remove stray margin-top from inline style="margin-top:16px" cards */
.ds-card[style*="margin-top"] {
  margin-top: 20px !important;
}

/* ── RESPONSIVE ────────────────────────────────── */
@media (max-width: 1024px) {
  .ds-tab-content,
  .ds-content,
  .ds-calendar-wrap,
  .ds-skills-manage,
  .ds-pupil-grid      { padding: 18px !important; }
  .ds-msg-layout      { grid-template-columns: 200px minmax(0,1fr) !important; }
}
@media (max-width: 768px) {
  .ds-tab-content,
  .ds-content,
  .ds-calendar-wrap,
  .ds-skills-manage,
  .ds-pupil-grid      { padding: 14px !important; }
  .ds-msg-layout      { grid-template-columns: 1fr !important; height: auto !important; }
  .ds-msg-sidebar     { height: 200px !important; }
  .ds-pupil-grid      { grid-template-columns: 1fr !important; }
  .ds-pupil-lower-grid { grid-template-columns: 1fr !important; padding: 0 14px 14px !important; }
}

/* ── BULK SCHEDULE MODAL ───────────────────────── */
.ds-day-picker {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-top: 4px;
}
.ds-day-option {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 5px 10px;
  border: 1.5px solid var(--ds-border);
  border-radius: 6px;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all .15s;
  user-select: none;
}
.ds-day-option:has(input:checked) {
  border-color: var(--ds-navy-mid);
  background: rgba(26,52,97,.08);
  color: var(--ds-navy-mid);
}
.ds-day-option input { width: 0; height: 0; opacity: 0; position: absolute; }
.ds-bulk-preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  font-size: .9rem;
}
.ds-bulk-dates-list {
  max-height: 280px;
  overflow-y: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.ds-bulk-date-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: .84rem;
  cursor: pointer;
  transition: background .1s;
}
.ds-bulk-date-row:hover { background: var(--ds-surface-hover); }
.ds-bulk-date-row:has(input:checked) { color: var(--ds-text); }
.ds-bulk-date-row:has(input:not(:checked)) { color: var(--ds-text-subtle); text-decoration: line-through; }
.ds-bulk-date-row input[type="checkbox"] { flex-shrink: 0; accent-color: var(--ds-navy-mid); }

/* ── PROGRESS CHARTS ──────────────────────────── */
.ds-progress-chart-card {}

/* ── Chart stats strip ───────────────────────────── */
.ds-chart-stats-wrap { min-height: 0; }
.ds-chart-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 10px 12px;
  background: var(--ds-surface-hover);
  border-radius: var(--ds-radius-sm);
  margin-bottom: 4px;
}
.ds-chart-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 48px;
}
.ds-chart-stat-val {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ds-navy);
  font-family: var(--ds-font-head);
  line-height: 1.2;
}
.ds-chart-stat-lbl {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ds-text-muted);
  font-weight: 600;
  margin-top: 1px;
}
.ds-chart-stat-best { min-width: 0; }
.ds-chart-stat-badge {
  font-size: .68rem;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-badge-green { background: #d1fae5; color: #065f46; }
.ds-badge-red   { background: #fee2e2; color: #991b1b; }

.ds-chart-label {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ds-text-muted);
  margin-bottom: 8px;
}
.ds-chart-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}
.ds-chart-col {}
.ds-btn-ghost {
  background: none;
  border: none;
  color: var(--ds-text-muted);
  cursor: pointer;
  padding: 2px 6px;
  font-size: .75rem;
}
.ds-btn-ghost:hover { color: var(--ds-navy-mid); }

@media (max-width: 768px) {
  .ds-chart-row { grid-template-columns: 1fr; }
  .ds-day-picker { gap: 4px; }
}

/* ── TEST BOOKED SIDEBAR CARD ─────────────────── */
.ds-test-booked-body {
  padding: 14px 18px;
}
.ds-test-booked-date {
  font-family: var(--ds-font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ds-navy);
  line-height: 1.3;
}
.ds-test-booked-centre {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: .8rem;
  color: var(--ds-text-muted);
  margin-top: 5px;
}
.ds-test-countdown {
  margin-top: 10px;
  display: inline-block;
  background: var(--ds-surface-hover);
  border: 1px solid var(--ds-border);
  border-radius: 20px;
  padding: 4px 12px;
  font-size: .82rem;
  color: var(--ds-text);
}
.ds-test-countdown.ds-test-soon {
  background: #fef3c7;
  border-color: #fcd34d;
  color: #92400e;
}

/* ── CARD CONSISTENCY POLISH ──────────────────── */
.ds-card {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius) !important;
  box-shadow: 0 1px 4px rgba(12,30,61,.06) !important;
  margin-bottom: 20px;
}
.ds-card-header {
  padding: 13px 18px !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  color: var(--ds-navy) !important;
  border-bottom: 1px solid var(--ds-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  background: var(--ds-surface) !important;
}

/* Upcoming lessons */
.ds-upcoming-item {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-upcoming-item:last-child { border-bottom: none !important; }
.ds-upcoming-date-block {
  width: 44px !important;
  height: 44px !important;
  background: var(--ds-navy) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-upcoming-day {
  font-family: var(--ds-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: white !important;
  line-height: 1 !important;
}
.ds-upcoming-month {
  font-size: .6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
  letter-spacing: .05em !important;
}
.ds-upcoming-time {
  font-weight: 600 !important;
  font-size: .92rem !important;
  color: var(--ds-navy) !important;
}
.ds-upcoming-meta {
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px !important;
}

/* Focus areas card */
.ds-improve-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-improve-item:last-child { border-bottom: none !important; }
.ds-improve-rank {
  width: 22px !important; height: 22px !important;
  border-radius: 50% !important;
  background: var(--ds-surface-hover) !important;
  border: 1px solid var(--ds-border) !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--ds-text-muted) !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-improve-name {
  flex: 1 !important;
  font-size: .85rem !important;
  font-weight: 500 !important;
  color: var(--ds-navy) !important;
}
.ds-improve-score {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
  white-space: nowrap !important;
}

/* Lesson timeline */
/* ══════════════════════════════════════════════════════════════
   PUPIL TIMELINE — redesigned v2.1
   ══════════════════════════════════════════════════════════════ */

.ds-timeline {
  padding: 4px 0 0 !important;
  position: relative !important;
}

/* Vertical connecting line */
.ds-timeline::before {
  content: '' !important;
  position: absolute !important;
  left: 18px !important;
  top: 0 !important; bottom: 0 !important;
  width: 2px !important;
  background: linear-gradient(180deg, var(--ds-border-mid) 0%, var(--ds-border) 100%) !important;
  z-index: 0 !important;
}

.ds-timeline-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  padding: 0 18px 18px 46px !important;
  position: relative !important;
  border-bottom: none !important;
}
.ds-timeline-item:last-child { padding-bottom: 8px !important; }

/* Circle dot on the line */
.ds-timeline-dot {
  position: absolute !important;
  left: 11px !important;
  top: 14px !important;
  width: 16px !important; height: 16px !important;
  border-radius: 50% !important;
  background: white !important;
  border: 3px solid var(--ds-border-mid) !important;
  z-index: 1 !important;
  flex-shrink: 0 !important;
  box-shadow: 0 0 0 3px var(--ds-bg) !important;
}
.ds-timeline-item.status-completed .ds-timeline-dot {
  background: #22c55e !important; border-color: #16a34a !important;
}
.ds-timeline-item.status-cancelled .ds-timeline-dot {
  background: #ef4444 !important; border-color: #dc2626 !important;
}
.ds-timeline-item.status-scheduled .ds-timeline-dot {
  background: var(--ds-amber) !important; border-color: #d97706 !important;
}

/* The lesson card */
.ds-timeline-content {
  flex: 1 !important;
  background: white !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  box-shadow: 0 1px 4px rgba(12,30,61,.06) !important;
  overflow: hidden !important;
}

/* Card header row */
.ds-timeline-header {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  background: #f8fafd !important;
}

.ds-timeline-date {
  font-family: var(--ds-font-display) !important;
  font-weight: 700 !important;
  font-size: .88rem !important;
  color: var(--ds-navy) !important;
  flex: 1 !important;
  min-width: 0 !important;
}
.ds-timeline-meta {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  white-space: nowrap !important;
}

/* Status badge */
.ds-status-badge {
  font-size: .68rem !important;
  font-weight: 700 !important;
  padding: 3px 9px !important;
  border-radius: 20px !important;
  text-transform: uppercase !important;
  letter-spacing: .04em !important;
  flex-shrink: 0 !important;
}
.ds-status-badge.status-completed { background:#dcfce7; color:#166534; }
.ds-status-badge.status-cancelled { background:#fee2e2; color:#991b1b; }
.ds-status-badge.status-scheduled { background:#fef3c7; color:#92400e; }

/* Overall grade chip */
.ds-grade-overall {
  font-family: var(--ds-font-display) !important;
  font-size: .78rem !important;
  font-weight: 800 !important;
  background: var(--ds-navy) !important;
  color: white !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  flex-shrink: 0 !important;
}

/* Instructor note callout */
.ds-lesson-notes {
  display: flex !important;
  gap: 10px !important;
  margin: 12px 16px 4px !important;
  padding: 10px 14px !important;
  background: #f0f4fb !important;
  border-left: 3px solid var(--ds-navy-light, #3b5a8f) !important;
  border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0 !important;
  font-size: .83rem !important;
  color: #374151 !important;
  line-height: 1.5 !important;
}
.ds-lesson-notes::before {
  content: '📝' !important;
  flex-shrink: 0 !important;
  font-size: .9rem !important;
  margin-top: 1px !important;
}
.ds-lesson-notes strong { display:none !important; } /* hide "Lesson notes:" label, icon replaces it */

/* Instructor comments */
.ds-instr-comments { padding: 12px 16px 4px !important; }
.ds-comment { font-size: .83rem !important; line-height: 1.5 !important; }
.ds-comment-instructor {
  background: #f0f4fb !important;
  border-left: 3px solid var(--ds-navy-light, #3b5a8f) !important;
  border-radius: 0 var(--ds-radius-xs) var(--ds-radius-xs) 0 !important;
  padding: 8px 12px !important;
  margin-bottom: 6px !important;
}
.ds-comment-author {
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy-mid, #2a4a82) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  margin-bottom: 3px !important;
}

/* "Skills & Scores" expand button */
.ds-more-info-btn {
  margin: 10px 16px 12px !important;
  font-size: .78rem !important;
  font-weight: 600 !important;
}

/* ── Skills & Scores expandable panel ──────────────── */
.ds-lesson-detail {
  border-top: 1px solid var(--ds-border) !important;
  padding: 0 !important;
  background: #fafbfd !important;
  animation: ds-expand .18s ease !important;
}
@keyframes ds-expand {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Category block */
.ds-skill-group {
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-skill-group:last-child { border-bottom: none !important; }

.ds-skill-group-title {
  padding: 7px 16px !important;
  font-size: .68rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-navy-mid, #2a4a82) !important;
  background: #f0f4fb !important;
  border-bottom: 1px solid var(--ds-border) !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
}
.ds-skill-group-title::before {
  content: '' !important;
  display: inline-block !important;
  width: 3px !important; height: 14px !important;
  background: var(--ds-amber) !important;
  border-radius: 2px !important;
  flex-shrink: 0 !important;
}

/* Individual skill row */
.ds-skill-score-row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  padding: 9px 16px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  transition: background .12s !important;
}
.ds-skill-score-row:last-child { border-bottom: none !important; }
.ds-skill-score-row:hover { background: #f0f4fb !important; }

.ds-skill-score-name {
  font-size: .83rem !important;
  color: #374151 !important;
  flex: 1 !important;
  min-width: 0 !important;
  font-weight: 500 !important;
}

/* Grade pip track (5 dots) — injected via PHP helper */
.ds-skill-score-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-shrink: 0 !important;
}
.ds-grade-pips {
  display: flex !important;
  gap: 4px !important;
  align-items: center !important;
  flex-shrink: 0 !important;
}
.ds-grade-pip {
  width: 8px !important; height: 8px !important;
  border-radius: 50% !important;
  background: var(--ds-border) !important;
  flex-shrink: 0 !important;
}
.ds-grade-pip.filled-1 { background: #ef4444 !important; }
.ds-grade-pip.filled-2 { background: #f97316 !important; }
.ds-grade-pip.filled-3 { background: #f59e0b !important; }
.ds-grade-pip.filled-4 { background: #22c55e !important; }
.ds-grade-pip.filled-5 { background: #10b981 !important; }

/* No skills recorded */
.ds-lesson-detail .ds-meta { padding: 14px 16px !important; }

/* Pupil add-note area below skills */
.ds-pupil-comments { padding: 0 16px 14px !important; }

/* Pupil own notes on a lesson */
.ds-comment-pupil {
  background: white !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-sm) !important;
  overflow: hidden !important;
  margin-bottom: 8px !important;
  margin-top: 4px !important;
}
.ds-comment-header {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px !important;
  background: #f8fafd !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-comment-author {
  font-size: .7rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
  text-transform: uppercase !important;
  letter-spacing: .05em !important;
  flex: 1 !important;
}
.ds-comment-time {
  font-size: .7rem !important;
  color: var(--ds-text-muted) !important;
  white-space: nowrap !important;
}
.ds-comment-body {
  padding: 9px 12px !important;
  font-size: .84rem !important;
  color: #374151 !important;
  line-height: 1.55 !important;
}

.ds-add-comment { margin-top: 10px !important; }

.ds-comment-input {
  width: 100% !important;
  padding: 8px 12px !important;
  border: 1px solid var(--ds-border) !important;
  border-radius: var(--ds-radius-xs) !important;
  font-size: .83rem !important;
  font-family: var(--ds-font-body) !important;
  resize: vertical !important;
  min-height: 56px !important;
  box-sizing: border-box !important;
  margin-bottom: 6px !important;
}
.ds-comment-input:focus {
  outline: 2px solid var(--ds-navy-light, #3b5a8f) !important;
  border-color: var(--ds-navy-light, #3b5a8f) !important;
}



/* ── INSTRUCTOR DASHBOARD CARD POLISH ─────────── */

/* Card header gets top-radius to match parent card without overflow:hidden */
.ds-card > .ds-card-header:first-child {
  border-radius: var(--ds-radius) var(--ds-radius) 0 0;
}
/* First non-header child gets no extra top rounding needed */
.ds-card > *:last-child:not(.ds-card-header) {
  border-radius: 0 0 var(--ds-radius) var(--ds-radius);
}

/* Instructor welcome card stats */
.ds-stats-row {
  display: flex !important;
  justify-content: center !important;
  gap: 48px !important;
  margin-top: 28px !important;
}
.ds-stat-item { text-align: center !important; }
.ds-stat-num {
  font-family: var(--ds-font-display) !important;
  font-size: 2.4rem !important;
  font-weight: 800 !important;
  color: var(--ds-navy) !important;
  line-height: 1 !important;
}

/* Lesson rows in instructor panel */
.ds-lesson-row {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  transition: background .15s !important;
  cursor: pointer !important;
}
.ds-lesson-row:last-child { border-bottom: none !important; }
.ds-lesson-row:hover { background: var(--ds-surface-hover) !important; }
.ds-lesson-date {
  width: 44px !important;
  height: 44px !important;
  background: var(--ds-navy) !important;
  border-radius: 8px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-lesson-day {
  font-family: var(--ds-font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  color: white !important;
}
.ds-lesson-month {
  font-size: .6rem !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  color: rgba(255,255,255,.7) !important;
  letter-spacing: .05em !important;
}
.ds-lesson-info { flex: 1 !important; min-width: 0 !important; }
.ds-lesson-title { font-weight: 600 !important; font-size: .88rem !important; color: var(--ds-navy) !important; }
.ds-lesson-preview {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  margin-top: 2px !important;
}

/* Pupil detail header */
.ds-pupil-detail-header {
  border-radius: var(--ds-radius) var(--ds-radius) 0 0 !important;
  overflow: hidden !important;
}

/* Pupil list in sidebar */
.ds-pupil-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  text-decoration: none !important;
  color: var(--ds-text) !important;
  transition: background .15s !important;
}
.ds-pupil-item:last-child { border-bottom: none !important; }
.ds-pupil-item:hover { background: var(--ds-surface-hover) !important; }
.ds-pupil-item.active { background: rgba(12,30,61,.06) !important; }
.ds-pupil-avatar {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%) !important;
  color: white !important;
  font-family: var(--ds-font-display) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-pupil-name { font-size: .88rem !important; font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-pupil-meta { font-size: .72rem !important; color: var(--ds-text-muted) !important; margin-top: 1px !important; }

/* Instruction sidebar card - pupils list */
.ds-pupil-list { padding: 0 !important; }
.ds-content-sidebar .ds-card { margin-bottom: 0 !important; }

/* Suggestion card items */
.ds-suggestion {
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-suggestion:last-child { border-bottom: none !important; }
.ds-suggestion-skill {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  margin-bottom: 4px !important;
  font-size: .88rem !important;
}
.ds-suggestion p { font-size: .8rem !important; color: var(--ds-text-muted) !important; margin: 0 !important; }

/* Curriculum card */
.ds-curriculum-picker { padding: 14px 18px !important; }
.ds-curriculum-current {
  font-size: .85rem !important;
  margin-bottom: 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  flex-wrap: wrap !important;
}
.ds-curriculum-change {
  display: flex !important;
  gap: 8px !important;
  align-items: center !important;
}


/* ══════════════════════════════════════════════
   UPCOMING TESTS CARD (instructor dashboard)
   ══════════════════════════════════════════════ */
.ds-upcoming-test-row {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
  text-decoration: none !important;
  color: var(--ds-text) !important;
  transition: background .15s !important;
}
.ds-upcoming-test-row:last-child { border-bottom: none !important; }
.ds-upcoming-test-row:hover { background: var(--ds-surface-hover) !important; }
.ds-upcoming-test-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%) !important;
  color: white !important;
  font-family: var(--ds-font-display) !important;
  font-size: .9rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-upcoming-test-info { flex: 1 !important; min-width: 0 !important; }
.ds-upcoming-test-name {
  font-weight: 600 !important;
  font-size: .88rem !important;
  color: var(--ds-navy) !important;
}
.ds-upcoming-test-detail {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px !important;
}
.ds-upcoming-test-days {
  font-family: var(--ds-font-display) !important;
  font-size: .78rem !important;
  font-weight: 700 !important;
  padding: 3px 10px !important;
  border-radius: 20px !important;
  background: var(--ds-surface-hover) !important;
  border: 1px solid var(--ds-border) !important;
  color: var(--ds-navy) !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}
.ds-upcoming-test-days.ds-test-soon {
  background: #fef3c7 !important;
  border-color: #fcd34d !important;
  color: #92400e !important;
}

/* ══════════════════════════════════════════════
   CARD BODY PADDING — universal inner padding
   so cards don't need inline styles
   ══════════════════════════════════════════════ */
.ds-card-body {
  padding: 16px 18px;
}
/* Standardise test booking body (already defined earlier but add safety) */
.ds-test-booking-body { padding: 14px 18px !important; }

/* ══════════════════════════════════════════════
   iMESSAGE-STYLE CHAT BUBBLES
   ══════════════════════════════════════════════ */

/* Chat panel background */
#ds-chat-messages,
div[id^="msg-thread-"] {
  background: #F0F4FB !important;
  padding: 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
}

/* Bubble wrapper — controls alignment */
.ds-msg-bubble {
  display: flex !important;
  flex-direction: column !important;
  max-width: 72% !important;
}
.ds-msg-bubble.ds-msg-out {
  align-self: flex-end !important;
  align-items: flex-end !important;
}
.ds-msg-bubble.ds-msg-in {
  align-self: flex-start !important;
  align-items: flex-start !important;
}

/* The actual bubble */
.ds-msg-text {
  padding: 10px 14px !important;
  border-radius: 18px !important;
  font-size: .88rem !important;
  line-height: 1.45 !important;
  word-wrap: break-word !important;
}
.ds-msg-out .ds-msg-text {
  background: var(--ds-navy) !important;
  color: white !important;
  border-bottom-right-radius: 4px !important;
}
.ds-msg-in .ds-msg-text {
  background: white !important;
  color: var(--ds-text) !important;
  border: 1px solid var(--ds-border-mid) !important;
  border-bottom-left-radius: 4px !important;
  box-shadow: 0 1px 3px rgba(0,0,0,.07) !important;
}

/* Sender name + timestamp beneath bubble */
.ds-msg-meta {
  font-size: .68rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 3px !important;
  padding: 0 4px !important;
}

/* Empty/loading state */
.ds-msg-empty {
  text-align: center !important;
  color: var(--ds-text-muted) !important;
  font-size: .85rem !important;
  padding: 24px !important;
  align-self: center !important;
}

/* Pupil conversation list items */
.ds-conv-item {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  padding: 12px 16px !important;
  cursor: pointer !important;
  border-bottom: 1px solid var(--ds-border) !important;
  font-size: .88rem !important;
  transition: background .15s !important;
  color: var(--ds-navy) !important;
  font-weight: 500 !important;
}
.ds-conv-item:last-child { border-bottom: none !important; }
.ds-conv-item:hover { background: var(--ds-surface-hover) !important; }
.ds-conv-item.active {
  background: rgba(12,30,61,.07) !important;
  font-weight: 700 !important;
}

/* Input area */
#ds-chat-input {
  padding: 12px 16px !important;
  border-top: 1px solid var(--ds-border) !important;
  background: var(--ds-surface) !important;
}



/* ══════════════════════════════════════════════
   MISSING COMPONENT STYLES
   ══════════════════════════════════════════════ */

/* Empty states */
.ds-empty-state {
  padding: 24px 18px !important;
  text-align: center !important;
  color: var(--ds-text-muted) !important;
  font-size: .85rem !important;
}
.ds-empty-state-sm {
  padding: 12px 18px !important;
  color: var(--ds-text-muted) !important;
  font-size: .82rem !important;
}

/* Parent items */
.ds-parent-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 10px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-parent-item:last-child { border-bottom: none !important; }
.ds-parent-avatar {
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, var(--ds-navy) 0%, var(--ds-navy-mid) 100%) !important;
  color: white !important;
  font-size: .8rem !important;
  font-weight: 700 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}

/* Skill overview in pupil sidebar */
.ds-skill-overview-cat {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 9px 18px !important;
  border-bottom: 1px solid var(--ds-border) !important;
}
.ds-skill-overview-cat:last-child { border-bottom: none !important; }
.ds-skill-overview-cat-name {
  font-size: .82rem !important;
  font-weight: 500 !important;
  color: var(--ds-navy) !important;
  width: 110px !important;
  flex-shrink: 0 !important;
}
.ds-skill-overview-bar {
  flex: 1 !important;
  height: 6px !important;
  background: var(--ds-border) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.ds-skill-overview-fill {
  height: 100% !important;
  border-radius: 3px !important;
  transition: width .4s ease !important;
}
.ds-skill-overview-score {
  font-size: .75rem !important;
  font-weight: 700 !important;
  color: var(--ds-text-muted) !important;
  width: 24px !important;
  text-align: right !important;
  flex-shrink: 0 !important;
}

/* Mini bar (focus areas) */
.ds-mini-bar {
  width: 60px !important;
  height: 5px !important;
  background: var(--ds-border) !important;
  border-radius: 3px !important;
  overflow: hidden !important;
}
.ds-mini-bar-fill {
  height: 100% !important;
  background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-navy)) !important;
  border-radius: 3px !important;
}

/* Test booking body */
.ds-test-booking-body {
  padding: 14px 18px !important;
}
.ds-test-booked-date {
  font-family: var(--ds-font-display) !important;
  font-size: .95rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
}
.ds-test-booked-centre {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 4px !important;
}

/* ds-card-header with purple accent */
.ds-card-header-purple {
  color: #7C3AED !important;
  border-left: 3px solid #7C3AED !important;
}

/* Weak skills card (priority) */
.ds-card.ds-card-danger {
  border-left: 4px solid #ef4444 !important;
}

/* Meta text */
.ds-meta, .ds-text-subtle {
  font-size: .78rem !important;
  color: var(--ds-text-muted) !important;
}


/* ══════════════════════════════════════════════════════════════
   MOCK TEST — FORM
   ══════════════════════════════════════════════════════════════ */
.ds-mock-form {
  background: var(--ds-surface-hover);
  border: 1px solid #c7d2fe;
  border-radius: var(--ds-radius-sm);
  padding: 18px;
  margin-bottom: 14px;
}
.ds-mock-form-header-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 16px;
}
@media (max-width: 560px) { .ds-mock-form-header-row { grid-template-columns: 1fr; } }
.ds-form-field { display: flex; flex-direction: column; gap: 4px; }
.ds-form-label { font-size: .8rem; font-weight: 600; color: #374151; }
.ds-input {
  width: 100%; padding: 7px 10px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  font-size: .88rem;
  box-sizing: border-box;
  font-family: var(--ds-font-body);
}
.ds-input:focus { outline: 2px solid var(--ds-navy-light); border-color: var(--ds-navy-light); }
.ds-textarea { resize: vertical; min-height: 64px; }

/* Pass / fail toggle labels */
.ds-mock-result-btn {
  display: flex; align-items: center; gap: 5px; cursor: pointer;
  padding: 7px 14px;
  border: 2px solid var(--ds-border-mid);
  border-radius: 8px;
  font-weight: 600; font-size: .85rem;
  transition: border-color .15s, background .15s;
  user-select: none;
}
.ds-mock-result-btn input[type="radio"] { display: none; }
.ds-mock-result-btn.pass-active { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.ds-mock-result-btn.fail-active { border-color: #ef4444; background: #fef2f2; color: #991b1b; }

/* Fault grid label */
.ds-mock-form-fault-label {
  font-size: .8rem; font-weight: 600; color: #374151;
  margin-bottom: 8px;
}
.ds-mock-form-fault-hint {
  font-weight: 400; color: #9ca3af; font-size: .73rem; display: block; margin-top: 2px;
}

/* Scrollable fault grid */
.ds-mock-fault-grid {
  max-height: 360px;
  overflow-y: auto;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  background: white;
}

/* Category header rows inside grid */
.ds-mock-cat-header {
  padding: 6px 10px;
  background: var(--ds-navy);
  color: rgba(255,255,255,.9);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Individual fault area rows */
.ds-mock-area-row {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-bottom: 1px solid var(--ds-border);
  transition: background .12s;
}
.ds-mock-area-row:last-child { border-bottom: none; }
.ds-mock-area-name {
  flex: 1; min-width: 0;
  font-size: .8rem;
  color: #374151;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-mock-note-input {
  flex: 1.2; min-width: 80px; max-width: 160px;
  padding: 3px 6px;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  font-size: .72rem;
  color: #374151;
  font-family: var(--ds-font-body);
}
.ds-mock-note-input:focus { outline: 1px solid var(--ds-navy-light); }

/* Counter +/- buttons */
.ds-mock-counter-btn {
  width: 22px; height: 22px;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  background: var(--ds-surface-hover);
  cursor: pointer;
  font-size: .8rem;
  padding: 0; line-height: 1;
  color: var(--ds-navy);
  flex-shrink: 0;
}
.ds-mock-counter-btn:hover { background: var(--ds-border); }
.mf-count {
  font-size: .82rem; font-weight: 700;
  min-width: 18px; text-align: center;
  color: #374151;
  flex-shrink: 0;
}

/* S / D severity buttons */
.ds-mock-sev-btn {
  padding: 2px 7px;
  border: 1px solid var(--ds-border);
  border-radius: 4px;
  background: var(--ds-surface-hover);
  color: var(--ds-text-muted);
  cursor: pointer;
  font-size: .7rem;
  font-weight: 800;
  flex-shrink: 0;
  transition: background .1s, color .1s;
}
.ds-mock-sev-btn:hover { background: #fee2e2; color: #991b1b; border-color: #fca5a5; }
.ds-mock-sev-btn.active { background: #ef4444; color: white; border-color: #ef4444; }

/* Row highlight states */
.ds-area-has-minor { background: #fffbeb !important; }
.ds-area-has-minor .mf-count { color: #d97706; }
.ds-area-serious   { background: #fef2f2 !important; }
.ds-area-dangerous { background: #fdf2f8 !important; }

/* ══════════════════════════════════════════════════════════════
   MOCK TEST — RESULTS CARD (shared instructor + pupil)
   ══════════════════════════════════════════════════════════════ */
.ds-mock-card {
  border-radius: var(--ds-radius-sm);
  border: 1px solid var(--ds-border);
  margin: 0 18px 14px;
  overflow: hidden;
}
.ds-mock-card:first-child { margin-top: 14px; }
.ds-mock-card.ds-mock-pass { border-left: 4px solid #10b981; }
.ds-mock-card.ds-mock-fail { border-left: 4px solid #ef4444; }

/* Card header */
.ds-mock-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  padding: 12px 14px;
  background: var(--ds-surface-hover);
  border-bottom: 1px solid var(--ds-border);
}
.ds-mock-card-date {
  font-family: var(--ds-font-display);
  font-size: .9rem;
  font-weight: 700;
  color: var(--ds-navy);
}
.ds-mock-card-badges { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* Badges */
.ds-mock-badge {
  font-size: .72rem; font-weight: 700;
  padding: 3px 10px;
  border-radius: 20px;
}
.ds-badge-pass      { background: #d1fae5; color: #065f46; }
.ds-badge-fail      { background: #fee2e2; color: #991b1b; }
.ds-badge-minor     { background: #fef3c7; color: #92400e; }
.ds-badge-serious   { background: #fee2e2; color: #991b1b; }
.ds-badge-dangerous { background: #7f1d1d; color: #fff; }

/* Minor fault progress bar */
.ds-mock-score-bar-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-mock-score-track {
  flex: 1;
  height: 7px;
  background: var(--ds-border);
  border-radius: 4px;
  overflow: hidden;
}
.ds-mock-score-fill {
  height: 100%;
  border-radius: 4px;
  transition: width .4s ease;
}
.ds-mock-score-minor     { background: #f59e0b; }
.ds-mock-score-serious   { background: #ef4444; }
.ds-mock-score-dangerous { background: #7f1d1d; }
.ds-mock-score-clean     { background: #10b981; }
.ds-mock-score-label {
  font-size: .72rem;
  color: var(--ds-text-muted);
  white-space: nowrap;
}

/* Fault table */
.ds-mock-fault-table { padding: 0; }
.ds-mock-fault-cat {
  padding: 5px 14px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ds-navy-mid);
  background: #f8fafd;
  border-bottom: 1px solid var(--ds-border);
  border-top: 1px solid var(--ds-border);
}
.ds-mock-fault-row {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 14px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-mock-fault-row:last-child { border-bottom: none; }
.ds-mock-fault-item {
  flex: 1;
  font-size: .84rem;
  font-weight: 500;
  color: var(--ds-navy);
  min-width: 120px;
}
.ds-mock-fault-sev {
  font-size: .72rem;
  font-weight: 700;
  padding: 2px 9px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.ds-fault-minor     { background: #fef3c7; color: #92400e; }
.ds-fault-serious   { background: #fee2e2; color: #991b1b; }
.ds-fault-dangerous { background: #7f1d1d; color: #fff; }
.ds-mock-fault-note {
  font-size: .76rem;
  color: var(--ds-text-muted);
  font-style: italic;
  width: 100%;
  padding-left: 2px;
}

/* Notes */
.ds-mock-notes {
  padding: 10px 14px;
  font-size: .8rem;
  color: var(--ds-text-muted);
  border-top: 1px solid var(--ds-border);
  background: #fafbfd;
}

/* Actions row */
.ds-mock-actions {
  display: flex;
  gap: 8px;
  padding: 10px 14px;
  border-top: 1px solid var(--ds-border);
  background: var(--ds-surface-hover);
}
.ds-btn-ghost {
  background: none;
  border: none;
  color: #9ca3af;
  cursor: pointer;
  font-size: .8rem;
  padding: 5px 10px;
  border-radius: var(--ds-radius-xs);
}
.ds-btn-ghost:hover { color: #ef4444; background: #fef2f2; }

/* Empty state */
.ds-mock-empty {
  padding: 16px 18px;
  font-size: .85rem;
  color: var(--ds-text-muted);
}
.ds-mock-no-faults-note {
  padding: 10px 14px;
  font-size: .78rem;
  color: var(--ds-text-muted);
  font-style: italic;
}

/* ══════════════════════════════════════════════════════════════
   TEST RECORDS CARD
   ══════════════════════════════════════════════════════════════ */
.ds-test-records-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}
@media (max-width: 640px) {
  .ds-test-records-grid { grid-template-columns: 1fr; }
}
.ds-test-records-grid .ds-test-record-item:first-child {
  border-right: 1px solid var(--ds-border);
}
@media (max-width: 640px) {
  .ds-test-records-grid .ds-test-record-item:first-child {
    border-right: none;
    border-bottom: 1px solid var(--ds-border);
  }
}

.ds-test-record-item {
  display: flex;
  gap: 14px;
  padding: 16px 18px;
  transition: background .15s;
}

.ds-test-record-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ds-border);
  color: #9ca3af;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
.ds-test-record-done .ds-test-record-icon {
  background: #d1fae5;
  color: #059669;
}
.ds-test-record-failed .ds-test-record-icon {
  background: #fee2e2;
  color: #dc2626;
}

.ds-test-record-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ds-test-record-title {
  font-family: var(--ds-font-display);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ds-navy);
  text-transform: uppercase;
  letter-spacing: .04em;
}
.ds-test-record-status { min-height: 22px; }

.ds-test-status-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 20px;
}
.ds-test-passed  { background: #d1fae5; color: #065f46; }
.ds-test-failed  { background: #fee2e2; color: #991b1b; }
.ds-test-pending { background: var(--ds-border); color: var(--ds-text-muted); }

/* Edit controls (date input + outcome buttons) */
.ds-test-record-edit {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ds-test-date-input {
  padding: 6px 9px;
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-xs);
  font-size: .82rem;
  font-family: var(--ds-font-body);
  color: var(--ds-navy);
  width: 100%;
  box-sizing: border-box;
}
.ds-test-date-input:focus {
  outline: 2px solid var(--ds-navy-light);
  border-color: var(--ds-navy-light);
}

/* Pass / fail / not-taken toggle buttons */
.ds-test-outcome-btns {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.ds-test-outcome-btn {
  padding: 5px 12px;
  border: 1.5px solid var(--ds-border-mid);
  border-radius: 7px;
  background: var(--ds-surface);
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  color: var(--ds-text-muted);
  transition: border-color .15s, background .15s, color .15s;
  font-family: var(--ds-font-body);
}
.ds-test-outcome-btn:hover { border-color: var(--ds-border-mid); background: var(--ds-surface-hover); }
.ds-outcome-pass.active  { border-color: #10b981; background: #ecfdf5; color: #065f46; }
.ds-outcome-fail.active  { border-color: #ef4444; background: #fef2f2; color: #991b1b; }
.ds-outcome-none.active  { border-color: var(--ds-navy-light); background: #eff3ff; color: var(--ds-navy); }

/* ══════════════════════════════════════════════════════════════
   MODALS — base rules (restored)
   ══════════════════════════════════════════════════════════════ */
.ds-modal {
  position: fixed !important;
  inset: 0 !important;
  background: rgba(0,0,0,.5) !important;
  z-index: 9999 !important;
  display: none;
  align-items: center !important;
  justify-content: center !important;
  padding: 20px;
  box-sizing: border-box;
}
.ds-modal-content {
  background: #fff;
  border-radius: var(--ds-radius);
  max-width: 680px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
  position: relative;
}
.ds-modal-lg  { max-width: 800px !important; }
.ds-modal-sm  { max-width: 440px !important; }
.ds-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--ds-border);
  font-family: var(--ds-font-display);
  font-weight: 700;
  font-size: 1rem;
  color: var(--ds-navy);
  flex-shrink: 0;
}
.ds-modal-close {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--ds-text-muted);
  padding: 0 0 0 12px;
  transition: color .15s;
}
.ds-modal-close:hover { color: var(--ds-navy); }

/* ── Toast ────────────────────────────────────────────────── */
.ds-toast {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background: #1e293b;
  color: white;
  padding: 10px 18px;
  border-radius: var(--ds-radius-sm);
  font-size: .875rem;
  z-index: 10000;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  max-width: 320px;
}
.ds-toast.ds-toast-show   { opacity: 1; transform: translateY(0); }
.ds-toast.ds-toast-error  { background: #dc2626; }
.ds-toast.ds-toast-success{ background: #16a34a; }

/* ── Misc ─────────────────────────────────────────────────── */
.ds-loading {
  padding: 24px;
  text-align: center;
  color: var(--ds-text-muted);
  font-size: .9rem;
}
.ds-label {
  display: inline-block;
  font-size: .72rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  background: #e2e8f0;
  color: #475569;
}

/* ══════════════════════════════════════════════════════════════
   HOME TAB
   ══════════════════════════════════════════════════════════════ */
.ds-home-tab { padding: 0; }

/* ── Greeting ─────────────────────────────────────────────── */
.ds-home-greeting {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
  gap: 12px;
}
.ds-home-greeting-name {
  font-family: var(--ds-font-display);
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--ds-navy);
}
.ds-home-greeting-date {
  font-size: .8rem;
  color: var(--ds-text-muted);
  margin-top: 2px;
}

/* ── Stat row ─────────────────────────────────────────────── */
.ds-home-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 700px) { .ds-home-stats { grid-template-columns: repeat(2,1fr); } }
.ds-home-stat {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius-sm);
  padding: 12px 14px;
  text-align: center;
}
.ds-home-stat-alert { border-color: #fcd34d; background: #fffbeb; }
.ds-home-stat-value {
  font-family: var(--ds-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ds-navy);
  line-height: 1;
}
.ds-home-stat-label {
  font-size: .68rem;
  color: var(--ds-text-muted);
  margin-top: 3px;
  text-transform: uppercase;
  letter-spacing: .04em;
}

/* ── 2×2 Card grid ────────────────────────────────────────── */
.ds-home-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 760px) { .ds-home-grid { grid-template-columns: 1fr; } }

/* Cards: fixed height, internal scroll */
.ds-home-grid .ds-card {
  display: flex;
  flex-direction: column;
  height: 340px;
  overflow: visible;
  margin-bottom: 0;
}
.ds-home-card-body,
.ds-today-list {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
}

/* ── Card header extras ───────────────────────────────────── */
.ds-card-header-sub {
  margin-left: auto;
  font-size: .7rem;
  font-weight: 400;
  color: var(--ds-text-muted);
}
.ds-card-header-link {
  margin-left: auto;
  font-size: .74rem;
  font-weight: 600;
  color: var(--ds-navy-light, #3B5A8F);
  text-decoration: none;
  white-space: nowrap;
}
.ds-card-header-link:hover { text-decoration: underline; }

/* ── Empty states ─────────────────────────────────────────── */
.ds-home-empty {
  padding: 22px 16px;
  text-align: center;
  color: var(--ds-text-muted);
  font-size: .82rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
}
.ds-home-empty svg { opacity: .25; }

/* ── Today's schedule ─────────────────────────────────────── */
.ds-today-list { padding: 2px 0; }
.ds-today-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-today-row:last-child { border-bottom: none; }
.ds-today-done   { opacity: .5; }
.ds-today-active { background: #eff6ff; }
.ds-today-time {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 48px;
  flex-shrink: 0;
  font-size: .75rem;
  font-weight: 600;
  color: var(--ds-navy);
  padding-top: 1px;
}
.ds-today-dur { font-size: .68rem; font-weight: 400; color: var(--ds-text-muted); }
.ds-today-bar {
  width: 3px;
  align-self: stretch;
  border-radius: 3px;
  background: var(--ds-border);
  flex-shrink: 0;
  margin-top: 2px;
}
.ds-today-upcoming .ds-today-bar { background: #3b82f6; }
.ds-today-active   .ds-today-bar { background: var(--ds-amber); }
.ds-today-done     .ds-today-bar { background: #22c55e; }
.ds-today-info { flex: 1; min-width: 0; }
.ds-today-name { font-size: .84rem; font-weight: 600; color: var(--ds-navy); }
.ds-today-note { font-size: .73rem; color: var(--ds-text-muted); margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-today-live {
  font-size: .62rem; font-weight: 800;
  background: var(--ds-amber); color: white;
  padding: 2px 6px; border-radius: 10px;
  text-transform: uppercase; letter-spacing: .05em;
  flex-shrink: 0; align-self: center;
}

/* ── This week ────────────────────────────────────────────── */
.ds-week-day-header {
  padding: 5px 16px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: var(--ds-navy-mid, #2a4a82);
  background: #f8fafd;
  border-bottom: 1px solid var(--ds-border);
  border-top: 1px solid var(--ds-border);
  position: sticky;
  top: 0;
}
.ds-week-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 16px;
  border-bottom: 1px solid var(--ds-border);
  font-size: .82rem;
}
.ds-week-row:last-child { border-bottom: none; }
.ds-week-time { color: var(--ds-navy); font-weight: 600; min-width: 50px; flex-shrink: 0; font-size: .78rem; }
.ds-week-name { flex: 1; color: var(--ds-text); font-size: .82rem; }
.ds-week-dur  { color: var(--ds-text-muted); font-size: .72rem; flex-shrink: 0; }

/* ── Requests preview ─────────────────────────────────────── */
.ds-home-req-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  border-bottom: 1px solid var(--ds-border);
}
.ds-home-req-row:last-child { border-bottom: none; }
.ds-home-req-avatar {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ds-navy), var(--ds-navy-mid, #2a4a82));
  color: white;
  font-size: .78rem; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ds-home-req-info { flex: 1; min-width: 0; }
.ds-home-req-name { font-size: .82rem; font-weight: 600; color: var(--ds-navy); }
.ds-home-req-date { font-size: .72rem; color: var(--ds-text-muted); margin-top: 1px; }

/* ── Modal sizing ─────────────────────────────────────────── */
.ds-modal-md { max-width: 520px !important; }
.ds-form-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 480px) { .ds-form-row-2 { grid-template-columns: 1fr; } }

/* ══════════════════════════════════════════════════════════════
   CALENDAR ENHANCEMENTS
   ══════════════════════════════════════════════════════════════ */
/* Legend */
.ds-cal-legend {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .75rem;
  color: var(--ds-text-muted);
}
.ds-cal-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Event content */
.ds-fc-event {
  padding: 2px 5px;
  overflow: hidden;
  line-height: 1.3;
}
.ds-fc-event-name {
  font-weight: 700;
  font-size: .78rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-fc-event-time {
  font-size: .7rem;
  opacity: .85;
}

/* Calendar container */
#ds-calendar {
  padding: 0 4px 8px;
}
.fc-timegrid-slot { cursor: pointer; }
.fc-timegrid-slot:hover { background: rgba(42,74,130,.04) !important; }

/* Calendar intro + mini agenda */
.ds-calendar-intro .ds-card-header,
.ds-calendar-upcoming .ds-card-header {
  padding-bottom: 12px !important;
}
.ds-calendar-hint-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 18px 18px;
}
.ds-calendar-hint-item {
  background: linear-gradient(180deg, rgba(42,74,130,.05), rgba(42,74,130,.02));
  border: 1px solid rgba(42,74,130,.08);
  border-radius: 14px;
  padding: 12px 14px;
  font-size: .82rem;
  line-height: 1.5;
  color: var(--ds-navy);
}
.ds-calendar-mini-list {
  padding: 10px 0 14px;
}
.ds-calendar-mini-row {
  display: grid;
  grid-template-columns: 52px minmax(0,1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--ds-border);
}
.ds-calendar-mini-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--ds-surface-soft);
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 8px 0;
}
.ds-calendar-mini-day {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ds-navy);
  line-height: 1;
}
.ds-calendar-mini-month {
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ds-text-muted);
  margin-top: 2px;
}
.ds-calendar-mini-info { min-width: 0; }
.ds-calendar-mini-name {
  font-weight: 700;
  font-size: .9rem;
  color: var(--ds-navy);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.ds-calendar-mini-meta {
  font-size: .75rem;
  color: var(--ds-text-muted);
  margin-top: 2px;
}
.ds-calendar-mini-status {
  font-size: .7rem;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.ds-status-scheduled { background: #dbeafe; color: #1d4ed8; }
.ds-status-completed { background: #dcfce7; color: #15803d; }
.ds-status-cancelled { background: #fee2e2; color: #b91c1c; }
@media (max-width: 640px) {
  .ds-calendar-hint-grid {
    grid-template-columns: 1fr;
  }
  .ds-calendar-mini-row {
    grid-template-columns: 46px minmax(0,1fr);
    align-items: start;
  }
  .ds-calendar-mini-status {
    grid-column: 1 / -1;
    justify-self: start;
    margin-left: 58px;
    margin-top: -6px;
  }
}

/* Tighten FullCalendar toolbar to match plugin style */
.fc .fc-toolbar-title { font-family: var(--ds-font-display) !important; font-size: 1rem !important; }
.fc .fc-button {
  background: var(--ds-surface) !important;
  border: 1px solid var(--ds-border-mid) !important;
  color: var(--ds-navy) !important;
  font-size: .8rem !important;
  font-family: var(--ds-font-body) !important;
  box-shadow: none !important;
}
.fc .fc-button:hover { background: var(--ds-surface-hover) !important; }
.fc .fc-button-active,
.fc .fc-button-primary:not(:disabled).fc-button-active {
  background: var(--ds-navy) !important;
  border-color: var(--ds-navy) !important;
  color: white !important;
}
.fc .fc-today-button { opacity: 1 !important; }

@media (max-width: 480px) {
  .fc .fc-toolbar {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .fc .fc-toolbar-title {
    font-size: .95rem !important;
  }
  .fc .fc-button {
    padding: 5px 8px !important;
    font-size: .72rem !important;
  }
  .fc .fc-toolbar-chunk {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
}

/* ── MANAGER DASHBOARD ──────────────────────── */
.ds-manager-wrap         { max-width:1400px; margin:0 auto; padding:28px; box-sizing:border-box; }

.ds-manager-stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}
.ds-mstat-card {
  background: var(--ds-surface);
  border: 1px solid var(--ds-border);
  border-radius: var(--ds-radius);
  padding: 18px 20px;
  box-shadow: var(--ds-shadow);
}
.ds-mstat-value         { font-family:'Syne',sans-serif; font-size:1.8rem; font-weight:700; color:var(--ds-navy); }
.ds-mstat-label         { font-size:.78rem; color:var(--ds-text-muted); margin-top:2px; text-transform:uppercase; letter-spacing:.04em; }
.ds-mstat-money .ds-mstat-value { color:#059669; }
.ds-mstat-warn  .ds-mstat-value { color:#dc2626; }

[data-ds-theme="dark"] .ds-mstat-value { color: var(--ds-text); }

.ds-manager-grid {
  display: grid;
  grid-template-columns: 1fr 300px;
  gap: 24px;
  align-items: start;
}
.ds-manager-main    { display:flex; flex-direction:column; gap:16px; }
.ds-manager-sidebar { display:flex; flex-direction:column; gap:16px; }

.ds-manager-table-wrap  { overflow-x:auto; }
.ds-manager-table       { width:100%; border-collapse:collapse; font-size:.88rem; }
.ds-manager-table th    { padding:10px 12px; text-align:left; font-size:.75rem; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--ds-text-muted); border-bottom:2px solid var(--ds-border); }
.ds-manager-table td    { padding:10px 12px; border-bottom:1px solid var(--ds-border); vertical-align:middle; }
.ds-manager-table tr:hover td { background:var(--ds-surface-hover); }
.ds-manager-pupil-name  { font-weight:600; color:var(--ds-text); }
.ds-manager-pupil-email { font-size:.78rem; color:var(--ds-text-muted); }

.ds-manager-alert-card .ds-card-header { border-bottom:1px solid #fecaca; background:#fef2f2; }
.ds-manager-assign-row  { display:flex; align-items:center; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--ds-border); gap:12px; flex-wrap:wrap; }

.ds-manager-instr-row   { display:flex; align-items:center; gap:12px; padding:12px 16px; border-bottom:1px solid var(--ds-border); }
.ds-manager-instr-avatar { width:36px; height:36px; border-radius:50%; background:var(--ds-navy-mid); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:.9rem; flex-shrink:0; }
.ds-manager-instr-name  { font-weight:600; font-size:.9rem; }
.ds-manager-instr-meta  { font-size:.78rem; color:var(--ds-text-muted); margin-top:2px; }

@media (max-width:1100px) {
  .ds-manager-stats { grid-template-columns: repeat(3,1fr); }
  .ds-manager-grid  { grid-template-columns: 1fr; }
}
@media (max-width:640px) {
  .ds-manager-stats { grid-template-columns: repeat(2,1fr); }
  .ds-manager-wrap  { padding:14px; }
}

/* ── MANAGER TABS ───────────────────────────── */
.ds-manager-tabs {
  display: flex; gap: 4px; margin-bottom: 20px;
  border-bottom: 2px solid var(--ds-border); padding-bottom: 0;
}
.ds-manager-tab {
  padding: 10px 20px; font-size: .88rem; font-weight: 600;
  color: var(--ds-text-muted); text-decoration: none;
  border-bottom: 2px solid transparent; margin-bottom: -2px;
  border-radius: var(--ds-radius-xs) var(--ds-radius-xs) 0 0;
  transition: color .15s, border-color .15s;
}
.ds-manager-tab:hover { color: var(--ds-text); }
.ds-manager-tab.active { color: var(--ds-navy-mid); border-bottom-color: var(--ds-navy-mid); }
[data-ds-theme="dark"] .ds-manager-tab.active { color: var(--ds-amber); border-bottom-color: var(--ds-amber); }

/* ── MANAGER SETTINGS ───────────────────────── */
.ds-settings-grid {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 20px; margin-bottom: 16px;
}
.ds-settings-body  { padding: 16px 20px 20px; }
.ds-settings-body .ds-form-group { margin-bottom: 14px; }
.ds-settings-body .ds-form-group label { display:block; font-size:.85rem; font-weight:600; margin-bottom:5px; }
.ds-settings-toggle { display:flex; align-items:center; gap:10px; font-size:.9rem; cursor:pointer; }
.ds-settings-toggle input[type=checkbox] { width:16px; height:16px; }

.ds-manager-settings-wrap { max-width: 860px; }

@media (max-width: 700px) {
  .ds-settings-grid { grid-template-columns: 1fr; }
  .ds-manager-tabs  { overflow-x: auto; }
}

/* ── MANAGER SETTINGS PANEL ─────────────────── */
.ds-manager-settings-wrap { max-width: 900px; }
.ds-settings-grid         { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; }
.ds-settings-body         { padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.ds-field-hint            { font-size: .79rem; color: var(--ds-text-muted); display: block; margin-top: 3px; }
.ds-settings-toggle       { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: .9rem; line-height: 1.5; }
.ds-settings-toggle input[type="checkbox"] { margin-top: 3px; flex-shrink: 0; width: 16px; height: 16px; accent-color: var(--ds-navy-mid); }
@media (max-width: 700px) {
  .ds-settings-grid { grid-template-columns: 1fr; }
}

/* ── HELP TOOLTIPS ──────────────────────────── */
.ds-help-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; border-radius: 50%;
  background: rgba(255,255,255,.15); color: var(--ds-text-muted);
  font-size: .65rem; font-weight: 700; font-family: Arial, sans-serif;
  cursor: help; flex-shrink: 0; margin-left: 6px;
  border: 1px solid var(--ds-border-mid);
  transition: background .15s, color .15s;
  position: relative; vertical-align: middle;
}
.ds-help-icon:hover { background: var(--ds-amber); color: #fff; border-color: var(--ds-amber); }

/* Tooltip via JS-positioned div — not ::after, so it escapes overflow:hidden */
.ds-tooltip-bubble {
  position: fixed;
  background: #1e293b; color: #f1f5f9;
  font-size: .8rem; font-weight: 400; font-family: 'DM Sans', sans-serif;
  line-height: 1.55; max-width: 260px; min-width: 160px;
  padding: 9px 13px; border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0,0,0,.35);
  pointer-events: none; z-index: 99999;
  opacity: 0; transition: opacity .12s;
}
.ds-tooltip-bubble.visible { opacity: 1; }
.ds-tooltip-bubble::after {
  content: ''; position: absolute; top: 100%; left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: #1e293b;
}

/* Tour button */
.ds-tour-btn {
  background: none; border: 1px solid rgba(255,255,255,.25);
  border-radius: 20px; color: rgba(255,255,255,.8);
  font-size: .78rem; font-weight: 600; padding: 4px 12px;
  cursor: pointer; display: flex; align-items: center; gap: 5px;
  transition: background .15s, color .15s; white-space: nowrap;
}
.ds-tour-btn:hover { background: rgba(255,255,255,.12); color: #fff; }

/* Tour overlay + spotlight */
.ds-tour-overlay {
  position: fixed; inset: 0; z-index: 9998;
  pointer-events: none;
}
.ds-tour-overlay-dark {
  position: fixed; inset: 0; background: rgba(0,0,0,.55); z-index: 9997;
  pointer-events: all;
}
.ds-tour-spotlight {
  position: fixed; z-index: 9998; border-radius: 8px;
  box-shadow: 0 0 0 9999px rgba(0,0,0,.55);
  pointer-events: none; transition: all .25s ease;
}
.ds-tour-card {
  position: fixed; z-index: 9999;
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 32px rgba(12,30,61,.25);
  width: 320px; padding: 20px 22px;
  font-family: 'DM Sans', Arial, sans-serif;
  transition: top .25s ease, left .25s ease;
}
.ds-tour-card-title {
  font-family: 'Syne', Arial, sans-serif;
  font-size: 1rem; font-weight: 700; color: #0C1E3D;
  margin: 0 0 8px;
}
.ds-tour-card-desc  { font-size: .875rem; color: #475569; line-height: 1.55; margin: 0 0 16px; }
.ds-tour-card-foot  { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ds-tour-progress   { font-size: .75rem; color: #94A3B8; }
.ds-tour-card-btns  { display: flex; gap: 8px; }
.ds-tour-prev-btn   { padding: 6px 14px; border: 1px solid #e2e8f0; background: #fff; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer; color: #475569; }
.ds-tour-next-btn   { padding: 6px 14px; background: #0C1E3D; color: #fff; border: none; border-radius: 7px; font-size: .82rem; font-weight: 600; cursor: pointer; }
.ds-tour-close-btn  { position: absolute; top: 10px; right: 12px; background: none; border: none; font-size: 1.1rem; cursor: pointer; color: #94A3B8; line-height: 1; }
.ds-tour-prev-btn:hover { background: #f8fafc; }
.ds-tour-next-btn:hover { background: #1a3461; }
[data-ds-theme="dark"] .ds-tour-card { background: #1e293b; }
[data-ds-theme="dark"] .ds-tour-card-title { color: #e2e8f0; }
[data-ds-theme="dark"] .ds-tour-card-desc  { color: #94a3b8; }
[data-ds-theme="dark"] .ds-tour-prev-btn   { background: #263347; border-color: #2d3f5a; color: #94a3b8; }


/* ── MANAGER CURRICULUM EDITOR ─────────────────────────── */
.ds-manager-curr-editor { max-width: 760px; }
.ds-mgr-cat-card { margin-bottom: 12px; }
.ds-mgr-skill-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 0; border-bottom: 1px solid var(--ds-border);
}
.ds-mgr-skill-row:last-of-type { border-bottom: none; }
.ds-mgr-skill-name { font-size: .88rem; color: var(--ds-text); flex: 1; }
.ds-mgr-skill-actions { display: flex; gap: 6px; flex-shrink: 0; }
.ds-mgr-add-skill-row {
  display: flex; gap: 8px; align-items: center;
  padding: 10px 0 8px;
}
.ds-mgr-add-skill-row .ds-input { flex: 1; font-size: .85rem; padding: 5px 10px; }

/* ── FORCED PASSWORD CHANGE ─────────────────────────────── */
.ds-auth-force-notice {
  display: flex; align-items: flex-start; gap: 8px;
  background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: 8px; padding: 10px 14px;
  font-size: .84rem; color: #92400e; line-height: 1.5;
  margin: 0 0 16px;
}
.ds-auth-force-notice svg { flex-shrink: 0; margin-top: 1px; color: #d97706; }

/* ════════════════════════════════════════════════════════════
   PASSTRACK UI REFRESH — appended overrides
   ════════════════════════════════════════════════════════════ */

/* ── GLOBAL ─────────────────────────────────────────────────── */
.ds-wrap {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  box-sizing: border-box !important;
}
.ds-wrap { background: #F0F4FA !important; }

.ds-card {
  border: none !important;
  box-shadow: 0 1px 3px rgba(12,30,61,.04), 0 6px 20px rgba(12,30,61,.06) !important;
  border-radius: 16px !important;
  margin-bottom: 16px !important;
}
.ds-card-header {
  font-size: .72rem !important;
  letter-spacing: .08em !important;
  padding: 16px 20px 14px !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
  color: var(--ds-text-muted) !important;
  background: transparent !important;
}

/* ── HERO ────────────────────────────────────────────────────── */
.ds-pupil-hero {
  padding: 32px 32px 28px !important;
  background: linear-gradient(140deg, #0A1830 0%, #0C1E3D 45%, #172D58 100%) !important;
}
.ds-hero-name { font-size: 1.6rem !important; letter-spacing: -.03em !important; }

.ds-stat-card {
  background: rgba(255,255,255,.1) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: none !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  min-width: 76px !important;
}
.ds-stat-card:hover { background: rgba(255,255,255,.16) !important; transform: translateY(-1px); }
.ds-stat-value { color: #FFFFFF !important; font-size: 1.5rem !important; }
.ds-stat-label { color: rgba(255,255,255,.55) !important; font-size: .62rem !important; }
.ds-stat-progress-bar-track { background: rgba(255,255,255,.2) !important; }

/* ── TAB NAV ─────────────────────────────────────────────────── */
.dsp-tab-nav {
  display: flex;
  align-items: stretch;
  background: #FFFFFF;
  border-bottom: 2px solid var(--ds-border);
  overflow-x: auto;
  scrollbar-width: none; -ms-overflow-style: none;
  position: sticky; top: 0; z-index: 50;
}
.dsp-tab-nav::-webkit-scrollbar { display: none; }
.dsp-tab-link {
  display: flex; align-items: center; gap: 6px;
  padding: 14px 20px;
  font-size: .78rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ds-text-muted); text-decoration: none;
  white-space: nowrap;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s;
}
.dsp-tab-link:hover { color: var(--ds-navy); text-decoration: none; }
.dsp-tab-link.dsp-tab-active { color: var(--ds-navy); border-bottom-color: var(--ds-amber); }
.dsp-tab-link svg { flex-shrink: 0; opacity: .6; }
.dsp-tab-link.dsp-tab-active svg { opacity: 1; }

@media (max-width: 480px) {
  .dsp-tab-link { padding: 12px 14px; font-size: .7rem; gap: 4px; }
  .dsp-tab-link svg { width: 13px; height: 13px; }
}

/* ── UPCOMING LESSONS ────────────────────────────────────────── */
.ds-upcoming-item { padding: 14px 20px !important; transition: background .15s; }
.ds-upcoming-item:hover { background: var(--ds-surface-hover); }
.ds-upcoming-day {
  font-size: 1.1rem !important; font-weight: 800 !important;
  line-height: 1 !important; color: #FFFFFF !important;
  font-family: var(--ds-font-display) !important;
}
.ds-upcoming-month { font-size: .58rem !important; letter-spacing: .08em !important; color: rgba(255,255,255,.75) !important; }
.ds-upcoming-time { font-size: .95rem !important; font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-upcoming-meta { font-size: .78rem !important; color: var(--ds-text-muted) !important; margin-top: 2px !important; }
.ds-cancel-lesson-btn { font-size: .72rem !important; padding: 5px 12px !important; border-radius: 20px !important; opacity: .7; transition: opacity .15s; }
.ds-cancel-lesson-btn:hover { opacity: 1; }

/* ── LAST LESSON CARD ────────────────────────────────────────── */
.dsp-last-lesson-body { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 8px; }
.dsp-last-lesson-date { font-size: .82rem; color: var(--ds-text-muted); font-weight: 500; }
.dsp-last-lesson-grade { display: flex; align-items: baseline; gap: 4px; font-weight: 700; }
.dsp-grade-num { font-family: var(--ds-font-display); font-size: 2.4rem; line-height: 1; font-weight: 800; }
.dsp-grade-label { font-size: .9rem; color: var(--ds-text-muted); font-weight: 400; }
.dsp-last-lesson-no-grade { font-size: .85rem; color: var(--ds-text-subtle); font-style: italic; }
.dsp-last-lesson-note {
  font-size: .83rem; color: var(--ds-text-muted); line-height: 1.5;
  border-left: 3px solid var(--ds-amber); padding-left: 10px; margin-top: 4px;
}

/* ── INPUTS & BUTTONS ────────────────────────────────────────── */
.ds-input {
  border-radius: 10px !important; border: 1.5px solid var(--ds-border) !important;
  padding: 10px 14px !important; font-size: .9rem !important;
  transition: border-color .15s, box-shadow .15s !important;
}
.ds-input:focus { border-color: var(--ds-navy-mid) !important; box-shadow: 0 0 0 3px rgba(26,52,97,.1) !important; outline: none !important; }
.ds-btn-primary { border-radius: 10px !important; font-weight: 700 !important; transition: all .15s !important; }
.ds-btn-primary:hover { filter: brightness(1.1) !important; transform: translateY(-1px) !important; }
.ds-btn-outline { border-radius: 10px !important; font-weight: 600 !important; }

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .ds-pupil-grid, .ds-pupil-lower-grid { padding: 12px !important; gap: 12px !important; }
  .ds-pupil-hero { padding: 20px 16px 18px !important; }
  .ds-hero-name { font-size: 1.3rem !important; }
  .ds-stat-card { padding: 10px 12px !important; min-width: 0 !important; }
  .ds-stat-value { font-size: 1.25rem !important; }
  .ds-card { border-radius: 14px !important; }
}

/* ── MOBILE BOTTOM NAV ───────────────────────────────────────── */
.ds-pupil-bottom-nav {
  background: var(--ds-navy) !important; border-top: none !important;
  box-shadow: 0 -4px 24px rgba(12,30,61,.25) !important;
  padding: 0 !important; height: 60px !important;
}
.ds-pupil-bottom-nav a {
  color: rgba(255,255,255,.45) !important; font-size: .6rem !important;
  font-weight: 700 !important; letter-spacing: .05em !important;
  text-transform: uppercase !important; gap: 4px !important;
  padding: 8px 4px !important; transition: color .15s !important;
}
.ds-pupil-bottom-nav a:hover, .ds-pupil-bottom-nav a.active { color: var(--ds-amber) !important; }


/* ════════════════════════════════════════════════════════════
   BOTTOM NAV — ALL SCREEN SIZES (primary navigation)
   ════════════════════════════════════════════════════════════ */

/* Show on all screens — override the mobile-only rule */
.ds-pupil-bottom-nav {
  display: flex !important;
  position: fixed !important;
  bottom: 0 !important; left: 0 !important; right: 0 !important;
  background: var(--ds-navy) !important;
  border-top: none !important;
  box-shadow: 0 -4px 24px rgba(12,30,61,.3) !important;
  padding: 0 !important;
  height: 64px !important;
  z-index: 100 !important;
}
.ds-pupil-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.4) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .06em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 8px 4px !important;
  transition: color .15s !important;
  position: relative !important;
}
.ds-pupil-bottom-nav a:hover,
.ds-pupil-bottom-nav a.active {
  color: var(--ds-amber) !important;
}
/* Active indicator — amber dot above icon */
.ds-pupil-bottom-nav a.active::before {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 32px; height: 3px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}

/* Give the page body padding so content isn't hidden behind the nav */
.ds-pupil-wrap {
  padding-bottom: 80px !important;
}

/* On desktop: constrain nav width and center it */
@media (min-width: 768px) {
  .ds-pupil-bottom-nav {
    max-width: 480px !important;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    border-radius: 20px 20px 0 0 !important;
  }
}

/* Hide the old top tab nav (replaced by bottom nav) */
.dsp-tab-nav { display: none !important; }


/* ════════════════════════════════════════════════════════════
   LAYOUT FIXES — v2.5.16
   ════════════════════════════════════════════════════════════ */

/* ── BOTTOM NAV — larger, more professional ─────────────────── */
.ds-pupil-bottom-nav {
  height: 72px !important;
}
.ds-pupil-bottom-nav a {
  font-size: .62rem !important;
  gap: 5px !important;
}
.ds-pupil-bottom-nav a svg {
  width: 22px !important;
  height: 22px !important;
}
/* Desktop — wider, floating panel */
@media (min-width: 768px) {
  .ds-pupil-bottom-nav {
    max-width: 560px !important;
    height: 76px !important;
    border-radius: 24px 24px 0 0 !important;
    box-shadow: 0 -8px 40px rgba(12,30,61,.35) !important;
  }
  .ds-pupil-bottom-nav a {
    font-size: .68rem !important;
    gap: 6px !important;
    padding: 10px 8px !important;
  }
  .ds-pupil-bottom-nav a svg {
    width: 24px !important;
    height: 24px !important;
  }
  /* More padding for content so it clears the nav */
  .ds-pupil-wrap { padding-bottom: 96px !important; }
}

/* ── LESSONS TAB — request card full width ──────────────────── */
/* When only the left col is shown, make it span full width */
.ds-pupil-lower-left {
  grid-column: 1 / -1;
}
.ds-pupil-lower-grid {
  grid-template-columns: 1fr !important;
}

/* ── MESSAGES TAB — full width ──────────────────────────────── */
.ds-pupil-lower-right {
  grid-column: 1 / -1;
  display: flex;
  flex-direction: column;
}
.ds-pupil-messages-card {
  flex: 1;
  min-height: 480px;
}
.ds-pupil-msg-thread {
  min-height: 320px !important;
  max-height: 60vh !important;
}


/* ════════════════════════════════════════════════════════════
   PUPIL DASHBOARD — COMPLETE LAYOUT OVERHAUL v2.5.17
   Single source of truth. All earlier conflicting rules below
   are intentionally overridden here.
   ════════════════════════════════════════════════════════════ */

/* ── CONTENT CONTAINER ──────────────────────────────────────── */
/* Unified container for all tab content — single column, centred */
.ds-pupil-wrap .ds-pupil-grid,
.ds-pupil-wrap .ds-pupil-lower-grid {
  display: block !important;
  max-width: 680px !important;
  margin: 0 auto !important;
  padding: 20px 20px 12px !important;
  box-sizing: border-box !important;
  width: 100% !important;
}

/* Sidebar stacks as a normal block inside the grid */
.ds-pupil-wrap .ds-pupil-sidebar {
  display: block !important;
  width: 100% !important;
}

/* ── CARD UNIFORMITY ─────────────────────────────────────────── */
/* Every card: same width, same radius, same shadow, same margin */
.ds-pupil-wrap .ds-card {
  width: 100% !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
  margin-bottom: 16px !important;
  background: #FFFFFF !important;
  overflow: hidden !important;
}
.ds-pupil-wrap .ds-card-header {
  padding: 14px 18px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

/* ── MESSAGES CARD — full width, proper height ───────────────── */
.ds-pupil-wrap .ds-pupil-lower-grid {
  display: block !important;
}
.ds-pupil-wrap .ds-pupil-lower-left,
.ds-pupil-wrap .ds-pupil-lower-right {
  display: block !important;
  width: 100% !important;
}
.ds-pupil-wrap .ds-pupil-messages-card {
  display: flex !important;
  flex-direction: column !important;
  min-height: 500px !important;
}
.ds-pupil-wrap .ds-pupil-msg-thread {
  flex: 1 !important;
  min-height: 300px !important;
  max-height: 55vh !important;
  overflow-y: auto !important;
}

/* ── BOTTOM NAV — polished, app-quality ─────────────────────── */
.ds-pupil-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 680px !important;  /* matches content width */
  height: 68px !important;
  background: rgba(10, 18, 40, 0.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.2) !important;
  border-radius: 0 !important;
  z-index: 200 !important;
}
/* Rounded top corners on desktop */
@media (min-width: 480px) {
  .ds-pupil-bottom-nav {
    border-radius: 20px 20px 0 0 !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
}
.ds-pupil-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 6px 8px !important;
  transition: color .2s !important;
  position: relative !important;
}
.ds-pupil-bottom-nav a svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.75 !important;
  transition: transform .2s !important;
}
.ds-pupil-bottom-nav a:hover { color: rgba(255,255,255,.65) !important; }
.ds-pupil-bottom-nav a.active {
  color: #FFFFFF !important;
}
.ds-pupil-bottom-nav a.active svg {
  transform: translateY(-1px) !important;
}
/* Amber active dot at top of each active tab */
.ds-pupil-bottom-nav a.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: 24px; height: 2.5px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}
/* Content padding to clear nav */
.ds-pupil-wrap { padding-bottom: 84px !important; }

/* ── MOBILE FINE-TUNING ──────────────────────────────────────── */
@media (max-width: 480px) {
  .ds-pupil-wrap .ds-pupil-grid,
  .ds-pupil-wrap .ds-pupil-lower-grid {
    padding: 14px 14px 8px !important;
  }
  .ds-pupil-bottom-nav { height: 62px !important; }
  .ds-pupil-bottom-nav a { font-size: .54rem !important; gap: 3px !important; }
  .ds-pupil-bottom-nav a svg { width: 20px !important; height: 20px !important; }
}


/* ════════════════════════════════════════════════════════════
   INSTRUCTOR DASHBOARD POLISH — v2.5.19
   CSS only — no PHP changes
   ════════════════════════════════════════════════════════════ */

/* ── TOP TAB NAV ─────────────────────────────────────────────── */
.ds-instructor-wrap .ds-nav-tabs {
  background: var(--ds-navy) !important;
  border-bottom: none !important;
  padding: 0 20px !important;
  gap: 0 !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 50 !important;
}
.ds-instructor-wrap .ds-tab {
  color: rgba(255,255,255,.45) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-bottom: 3px solid transparent !important;
  transition: color .15s, border-color .15s !important;
}
.ds-instructor-wrap .ds-tab:hover {
  color: rgba(255,255,255,.8) !important;
  text-decoration: none !important;
}
.ds-instructor-wrap .ds-tab.active {
  color: #FFFFFF !important;
  border-bottom-color: var(--ds-amber) !important;
  font-weight: 700 !important;
}
.ds-instructor-wrap .ds-tab svg { opacity: .5 !important; }
.ds-instructor-wrap .ds-tab.active svg { opacity: 1 !important; }
.ds-instructor-wrap .ds-badge {
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
}

/* ── CONTENT WIDTH ───────────────────────────────────────────── */
.ds-instructor-wrap .ds-tab-content {
  max-width: 900px !important;
  padding: 24px 20px !important;
}

/* ── STAT PILLS ──────────────────────────────────────────────── */
.ds-instructor-wrap .ds-home-stats {
  display: flex !important;
  gap: 12px !important;
  flex-wrap: wrap !important;
  margin-bottom: 20px !important;
}
.ds-instructor-wrap .ds-home-stat {
  flex: 1 !important;
  min-width: 100px !important;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.07) !important;
  padding: 14px 16px !important;
  text-align: center !important;
}
.ds-instructor-wrap .ds-home-stat-alert {
  background: #fffbeb !important;
  box-shadow: 0 2px 8px rgba(245,158,11,.15) !important;
}
.ds-instructor-wrap .ds-home-stat-value {
  font-size: 1.6rem !important;
  font-weight: 800 !important;
  color: var(--ds-navy) !important;
}
.ds-instructor-wrap .ds-home-stat-alert .ds-home-stat-value {
  color: var(--ds-amber-dark) !important;
}

/* ── HOME GRID ───────────────────────────────────────────────── */
.ds-instructor-wrap .ds-home-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
  align-items: start !important;
}
@media (max-width: 640px) {
  .ds-instructor-wrap .ds-home-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── CARDS ───────────────────────────────────────────────────── */
.ds-instructor-wrap .ds-card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
  overflow: hidden !important;
  margin-bottom: 0 !important;  /* grid gap handles spacing */
}
.ds-instructor-wrap .ds-home-grid .ds-card {
  height: 100% !important;
}
.ds-instructor-wrap .ds-card-header {
  padding: 14px 18px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
}

/* ── TODAY SCHEDULE ──────────────────────────────────────────── */
.ds-today-row {
  padding: 11px 16px !important;
  gap: 12px !important;
}
.ds-today-time span:first-child {
  font-size: .88rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
}
.ds-today-dur {
  font-size: .72rem !important;
  color: var(--ds-text-muted) !important;
}
.ds-today-name {
  font-size: .88rem !important;
  font-weight: 600 !important;
  color: var(--ds-navy) !important;
}
.ds-today-live {
  background: #dcfce7 !important;
  color: #15803d !important;
  font-size: .62rem !important;
  font-weight: 700 !important;
  padding: 2px 8px !important;
  border-radius: 20px !important;
  letter-spacing: .05em !important;
}

/* ── WEEK ROWS ───────────────────────────────────────────────── */
.ds-week-day-header {
  font-size: .65rem !important;
  font-weight: 800 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-subtle) !important;
  padding: 8px 16px 4px !important;
  background: #f8fafc !important;
}
.ds-week-row { padding: 8px 16px !important; font-size: .85rem !important; }
.ds-week-name { font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-week-time { color: var(--ds-text-muted) !important; min-width: 56px !important; }
.ds-week-dur  { color: var(--ds-text-subtle) !important; font-size: .78rem !important; }

/* ── UPCOMING TESTS ──────────────────────────────────────────── */
.ds-upcoming-test-row { padding: 10px 16px !important; }
.ds-upcoming-test-avatar {
  background: var(--ds-navy) !important;
  color: #fff !important;
  font-weight: 700 !important;
  border-radius: 50% !important;
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-size: .82rem !important; flex-shrink: 0 !important;
}
.ds-upcoming-test-name  { font-size: .88rem !important; font-weight: 600 !important; }
.ds-upcoming-test-detail{ font-size: .75rem !important; color: var(--ds-text-muted) !important; }
.ds-upcoming-test-days  {
  font-size: .72rem !important; font-weight: 700 !important;
  background: #f1f5f9 !important; color: var(--ds-text-muted) !important;
  padding: 3px 10px !important; border-radius: 20px !important;
  flex-shrink: 0 !important;
}
.ds-test-soon {
  background: #fff1f2 !important; color: #dc2626 !important;
}

/* ── LESSON REQUESTS ─────────────────────────────────────────── */
.ds-home-req-row { padding: 10px 16px !important; }
.ds-home-req-avatar {
  width: 32px !important; height: 32px !important;
  border-radius: 50% !important;
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
  font-weight: 800 !important; font-size: .8rem !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  flex-shrink: 0 !important;
}
.ds-home-req-name { font-size: .88rem !important; font-weight: 600 !important; }
.ds-home-req-date { font-size: .75rem !important; color: var(--ds-text-muted) !important; margin-top: 1px !important; }

/* ── GREETING ────────────────────────────────────────────────── */
.ds-instructor-wrap .ds-home-greeting {
  background: linear-gradient(135deg, var(--ds-navy) 0%, #172d58 100%) !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  margin-bottom: 20px !important;
  color: white !important;
}
.ds-home-greeting-name {
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  color: #FFFFFF !important;
}
.ds-home-greeting-date {
  color: rgba(255,255,255,.55) !important;
  font-size: .8rem !important;
}
.ds-instructor-wrap .ds-home-greeting .ds-btn-primary {
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
  border: none !important;
}

/* ── EMPTY STATES ────────────────────────────────────────────── */
.ds-home-empty {
  padding: 24px 16px !important;
  text-align: center !important;
  color: var(--ds-text-muted) !important;
  font-size: .85rem !important;
}
.ds-home-empty svg { opacity: .3 !important; margin-bottom: 8px !important; }
.ds-home-empty p { margin: 0 0 12px !important; }

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .ds-instructor-wrap .ds-tab-content { padding: 14px !important; }
  .ds-instructor-wrap .ds-nav-tabs { padding: 0 8px !important; }
  .ds-instructor-wrap .ds-tab { padding: 0 10px !important; font-size: .65rem !important; }
}


/* ════════════════════════════════════════════════════════════
   PUPIL MOBILE FIXES — v2.5.20
   Hero overflow, timeline date squashing, request form mobile
   ════════════════════════════════════════════════════════════ */

/* ── HERO — compact and contained on all screens ────────────── */
.ds-pupil-hero {
  padding: 20px !important;
  flex-wrap: nowrap !important;   /* keep identity + stats on one row */
  align-items: center !important;
  gap: 16px !important;
  overflow: hidden !important;    /* clip anything that would bleed right */
}
.ds-hero-identity {
  flex-shrink: 0 !important;
  min-width: 0 !important;
}
.ds-hero-identity-text {
  min-width: 0 !important;
}
.ds-hero-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  max-width: 180px !important;
}
.ds-hero-stats {
  display: flex !important;
  gap: 8px !important;
  flex-wrap: nowrap !important;
  flex-shrink: 1 !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-stat-card {
  flex: 1 1 0 !important;
  min-width: 0 !important;        /* allow shrinking below content width */
  padding: 10px 8px !important;
}
.ds-stat-value {
  font-size: 1.2rem !important;
}
.ds-stat-label {
  font-size: .55rem !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
/* Hide progress bar on narrow screens to save space */
@media (max-width: 420px) {
  .ds-stat-progress-bar-track { display: none !important; }
  .ds-hero-name { max-width: 120px !important; }
}

/* ── TIMELINE HEADER — clean hierarchy, no squashing ─────────── */
.ds-timeline-header {
  display: grid !important;
  grid-template-columns: 1fr auto !important;  /* date left, badges right */
  align-items: start !important;
  gap: 6px 10px !important;
  padding: 12px 16px !important;
  flex-wrap: unset !important;   /* remove old flex-wrap */
}
.ds-timeline-date {
  font-size: .9rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  flex: unset !important;        /* remove old flex:1 */
  grid-column: 1 !important;
  grid-row: 1 !important;
}
.ds-timeline-meta {
  font-size: .75rem !important;
  color: var(--ds-text-muted) !important;
  white-space: normal !important;   /* allow wrapping on its own line */
  grid-column: 1 !important;
  grid-row: 2 !important;
}
/* Badges (status + grade) sit on the right, rows 1-2 */
.ds-timeline-header .ds-status-badge,
.ds-timeline-header .ds-grade-overall {
  grid-column: 2 !important;
  align-self: center !important;
}
.ds-timeline-header .ds-status-badge { grid-row: 1 !important; }
.ds-timeline-header .ds-grade-overall { grid-row: 2 !important; }

/* Grade pill — more readable */
.ds-grade-overall {
  font-size: .72rem !important;
  padding: 2px 8px !important;
  background: var(--ds-navy) !important;
  color: white !important;
  border-radius: 20px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

/* ── REQUEST A LESSON — stack vertically on mobile ───────────── */
/* Override the inline-style flex row */
.ds-pupil-wrap .ds-pupil-lower-left .ds-card > div[style*="padding"] > div[style*="flex"] {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
}
@media (max-width: 480px) {
  .ds-pupil-wrap .ds-pupil-lower-left .ds-card > div[style*="padding"] > div[style*="flex"] {
    grid-template-columns: 1fr !important;  /* full stack on small screens */
  }
}
/* Form inputs — full width, no overflow */
.ds-pupil-wrap .ds-form-group {
  width: 100% !important;
  box-sizing: border-box !important;
  margin-bottom: 10px !important;
}
.ds-pupil-wrap .ds-form-group .ds-input {
  width: 100% !important;
  box-sizing: border-box !important;
}
/* Submit button — full width on mobile */
@media (max-width: 480px) {
  .ds-pupil-wrap .ds-btn-primary { width: 100% !important; }
}

/* Recent requests list — prevent overflow */
.ds-pupil-wrap div[style*="display:flex"][style*="justify-content:space-between"] {
  gap: 8px !important;
  flex-wrap: wrap !important;
}


/* ════════════════════════════════════════════════════════════
   DASHBOARD UNIFORMITY — v2.5.21
   Manager + Instructor aligned to pupil dashboard style
   ════════════════════════════════════════════════════════════ */

/* ── SHARED: all dashboard wraps ───────────────────────────── */
.ds-manager-wrap,
.ds-instructor-wrap .ds-tab-content {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 24px 20px !important;
  box-sizing: border-box !important;
}

/* ── SHARED: card uniformity ────────────────────────────────── */
.ds-manager-wrap .ds-card,
.ds-instructor-wrap .ds-card {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
  overflow: hidden !important;
  background: #FFFFFF !important;
}
.ds-manager-wrap .ds-card-header,
.ds-instructor-wrap .ds-card-header {
  padding: 14px 18px !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  border-bottom: 1px solid rgba(12,30,61,.06) !important;
  background: transparent !important;
}

/* ── MANAGER: stats strip ───────────────────────────────────── */
.ds-manager-stats {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  margin-bottom: 20px !important;
  grid-template-columns: unset !important;
}
.ds-mstat-card {
  flex: 1 1 140px !important;
  background: #FFFFFF !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.07) !important;
  padding: 16px 18px !important;
}
.ds-mstat-value {
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  color: var(--ds-navy) !important;
}
.ds-mstat-label {
  font-size: .65rem !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: .06em !important;
  color: var(--ds-text-muted) !important;
  margin-top: 5px !important;
}
.ds-mstat-money .ds-mstat-value { color: #059669 !important; }
.ds-mstat-warn  .ds-mstat-value { color: #dc2626 !important; }

/* ── MANAGER: tab nav — navy matching instructor ────────────── */
.ds-manager-tabs {
  background: var(--ds-navy) !important;
  border-bottom: none !important;
  border-radius: 14px 14px 0 0 !important;
  display: flex !important;
  padding: 0 16px !important;
  gap: 0 !important;
  margin-bottom: 20px !important;
  overflow-x: auto !important;
  scrollbar-width: none !important;
}
.ds-manager-tabs::-webkit-scrollbar { display: none !important; }
.ds-manager-tab {
  color: rgba(255,255,255,.45) !important;
  font-size: .72rem !important;
  font-weight: 700 !important;
  letter-spacing: .05em !important;
  text-transform: uppercase !important;
  height: 48px !important;
  padding: 0 14px !important;
  border-bottom: 3px solid transparent !important;
  border-radius: 0 !important;
  margin-bottom: 0 !important;
  display: flex !important;
  align-items: center !important;
  transition: color .15s, border-color .15s !important;
  white-space: nowrap !important;
}
.ds-manager-tab:hover {
  color: rgba(255,255,255,.8) !important;
  text-decoration: none !important;
}
.ds-manager-tab.active {
  color: #FFFFFF !important;
  border-bottom-color: var(--ds-amber) !important;
}

/* ── MANAGER: grid layout ───────────────────────────────────── */
.ds-manager-grid {
  display: block !important;    /* single column like pupil dashboard */
}
.ds-manager-main,
.ds-manager-sidebar {
  display: block !important;
  width: 100% !important;
}
.ds-manager-main .ds-card,
.ds-manager-sidebar .ds-card {
  margin-bottom: 16px !important;
}

/* ── MANAGER: table polish ──────────────────────────────────── */
.ds-manager-table th {
  font-size: .68rem !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  color: var(--ds-text-muted) !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid rgba(12,30,61,.08) !important;
  background: #f8fafc !important;
}
.ds-manager-table td {
  padding: 11px 16px !important;
  border-bottom: 1px solid rgba(12,30,61,.05) !important;
  font-size: .88rem !important;
}
.ds-manager-table tr:last-child td { border-bottom: none !important; }
.ds-manager-table tr:hover td { background: #f8fafc !important; }
.ds-manager-pupil-name { font-weight: 600 !important; color: var(--ds-navy) !important; }
.ds-manager-pupil-email { font-size: .75rem !important; color: var(--ds-text-muted) !important; }

/* ── MANAGER: mobile ────────────────────────────────────────── */
@media (max-width: 640px) {
  .ds-manager-wrap { padding: 14px !important; }
  .ds-manager-tabs { padding: 0 8px !important; border-radius: 10px 10px 0 0 !important; }
  .ds-manager-tab  { padding: 0 10px !important; font-size: .65rem !important; }
  .ds-mstat-card   { flex: 1 1 100px !important; padding: 12px 14px !important; }
  .ds-mstat-value  { font-size: 1.4rem !important; }
}

/* ── INSTRUCTOR: verify content width consistency ───────────── */
.ds-instructor-wrap .ds-tab-content {
  padding: 24px 20px !important;
}
@media (max-width: 640px) {
  .ds-instructor-wrap .ds-tab-content { padding: 14px !important; }
}


/* ════════════════════════════════════════════════════════════
   INSTRUCTOR BOTTOM NAV + CARD SPACING + PUPIL DETAIL — v2.5.22
   ════════════════════════════════════════════════════════════ */

/* ── INSTRUCTOR BOTTOM NAV — identical to pupil ─────────────── */
.ds-instr-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 680px !important;
  height: 68px !important;
  background: rgba(10,18,40,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.2) !important;
  z-index: 200 !important;
}
@media (min-width: 480px) {
  .ds-instr-bottom-nav {
    border-radius: 20px 20px 0 0 !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
}
.ds-instr-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 6px 8px !important;
  transition: color .2s !important;
  position: relative !important;
}
.ds-instr-bottom-nav a svg {
  width: 22px !important; height: 22px !important;
  stroke-width: 1.75 !important;
  transition: transform .2s !important;
}
.ds-instr-bottom-nav a:hover { color: rgba(255,255,255,.65) !important; text-decoration: none !important; }
.ds-instr-bottom-nav a.active { color: #FFFFFF !important; }
.ds-instr-bottom-nav a.active svg { transform: translateY(-1px) !important; }
.ds-instr-bottom-nav a.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2.5px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}
.ds-instr-bottom-nav .ds-badge {
  background: var(--ds-amber) !important;
  color: var(--ds-navy) !important;
  font-size: .5rem !important;
  padding: 1px 5px !important;
  border-radius: 20px !important;
  margin-left: 2px !important;
}

/* Give instructor wrap padding to clear the nav */
.ds-instructor-wrap { padding-bottom: 84px !important; }

/* Hide old top nav styles on instructor (nav is now bottom) */
.ds-instructor-wrap .ds-nav-tabs { display: none !important; }

/* ── CARD SPACING — fix cards being too close ───────────────── */
/* Instructor tab content: consistent gap between all cards */
.ds-instructor-wrap .ds-tab-content .ds-card {
  margin-bottom: 20px !important;
}
.ds-instructor-wrap .ds-tab-content .ds-card:last-child {
  margin-bottom: 0 !important;
}
/* Home grid: gap between the two columns */
.ds-instructor-wrap .ds-home-grid {
  gap: 20px !important;
}

/* ── PUPIL DETAIL PANEL — visual organisation ───────────────── */
/* Single column, max width, consistent spacing */
.ds-pupil-detail {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 20px 20px 20px !important;
}
.ds-pupil-detail .ds-card {
  margin-bottom: 20px !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
}

/* Force single column — remove sidebar layout */
.ds-detail-grid {
  display: block !important;
}
.ds-detail-left,
.ds-detail-right {
  display: block !important;
  width: 100% !important;
}
.ds-detail-bottom {
  display: block !important;
}
.ds-detail-bottom .ds-card {
  margin-bottom: 20px !important;
}

/* Section dividers — visual breathing room between groups */
/* Group 1: test booking + curriculum (admin info) */
.ds-test-booking-card,
.ds-curriculum-card {
  border-left: 3px solid var(--ds-amber) !important;
}

/* Group 2: lessons card gets a slightly stronger header */
.ds-detail-right .ds-card > .ds-card-header,
.ds-pupil-detail [id^="lessons-header"] {
  background: #f8fafc !important;
  font-size: .72rem !important;
}

/* Section break between groups — visual space */
.ds-detail-bottom {
  padding-top: 4px !important;
}

/* Charts, notes, messages — consistent card height */
.ds-detail-bottom .ds-card {
  min-height: 200px !important;
}
.ds-notes-log {
  max-height: 280px !important;
  overflow-y: auto !important;
}
.ds-messages-card .ds-msg-thread {
  max-height: 280px !important;
  overflow-y: auto !important;
}

/* Pupil detail header card — cleaner */
.ds-pupil-detail-header {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 18px 20px !important;
  border-left: none !important;
}
.ds-pupil-detail-avatar {
  width: 48px !important; height: 48px !important;
  font-size: 1.2rem !important;
  border-radius: 50% !important;
  flex-shrink: 0 !important;
}
.ds-pupil-detail-name {
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ds-navy) !important;
}
.ds-pupil-detail-meta {
  font-size: .8rem !important;
  color: var(--ds-text-muted) !important;
  margin-top: 2px !important;
}

/* ── MOBILE ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
  .ds-instr-bottom-nav { height: 62px !important; }
  .ds-instr-bottom-nav a { font-size: .54rem !important; gap: 3px !important; }
  .ds-instr-bottom-nav a svg { width: 20px !important; height: 20px !important; }
  .ds-pupil-detail { padding: 14px !important; }
}


/* ── CALENDAR TAB: card spacing ─────────────────────────────── */
.ds-calendar-wrap {
  max-width: 900px !important;
  margin: 0 auto !important;
  padding: 24px 20px 100px !important;
  box-sizing: border-box !important;
}
.ds-calendar-wrap .ds-card {
  margin-bottom: 20px !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 2px 8px rgba(12,30,61,.06), 0 1px 2px rgba(12,30,61,.04) !important;
}
@media (max-width: 640px) {
  .ds-calendar-wrap { padding: 14px 14px 100px !important; }
  .ds-calendar-wrap > div[style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIXES — v2.5.24
   Header, lesson rows, calendar, diary gaps
   ════════════════════════════════════════════════════════════ */

/* ── HEADER — prevent right overflow on mobile ───────────────── */
.ds-header-inner {
  padding: 0 16px !important;
  gap: 8px !important;
  overflow: hidden !important;
}
/* Brand: allow shrinking, clip long school names */
.ds-header-brand {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-brand-name {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .9rem !important;
}
.ds-brand-role {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .65rem !important;
}
/* Actions: shrink but don't wrap */
.ds-header-actions {
  flex-shrink: 0 !important;
  gap: 6px !important;
}
/* Tour button: hide label on very small screens */
@media (max-width: 400px) {
  .ds-tour-btn { padding: 4px 8px !important; font-size: 0 !important; }
  .ds-tour-btn svg { display: block !important; }
}
/* Logout button: keep visible, just tighter */
.ds-header-actions .ds-btn-outline,
.ds-header-actions a[href*="logout"] {
  padding: 5px 10px !important;
  font-size: .72rem !important;
  white-space: nowrap !important;
}

/* ── INSTRUCTOR LESSON ROWS — fix date/actions overflow ──────── */
.ds-lesson-row {
  flex-wrap: wrap !important;
  gap: 8px 12px !important;
  padding: 12px 14px !important;
  align-items: flex-start !important;
}
/* Date block: fixed size, never wraps */
.ds-lesson-date {
  flex-shrink: 0 !important;
  align-self: flex-start !important;
}
/* Info: takes remaining space, clips overflow */
.ds-lesson-info {
  flex: 1 1 120px !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-lesson-title {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
.ds-lesson-preview {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  font-size: .75rem !important;
}
/* Grade + status + actions: go to second row on narrow screens */
.ds-lesson-grade,
.ds-lesson-status,
.ds-lesson-actions {
  flex-shrink: 0 !important;
}
@media (max-width: 480px) {
  /* Push grade/status/actions to their own row under info */
  .ds-lesson-grade  { order: 3 !important; }
  .ds-lesson-status { order: 4 !important; }
  .ds-lesson-actions {
    order: 5 !important;
    width: 100% !important;
    justify-content: flex-end !important;
  }
}

/* ── DIARY GAPS GRID — single column on mobile ───────────────── */
/* The inline style uses grid-template-columns:1fr 1fr — override it */
.ds-calendar-wrap > div[style*="grid-template-columns:1fr 1fr"],
.ds-calendar-wrap > div[style*="grid-template-columns: 1fr 1fr"] {
  grid-template-columns: 1fr !important;
}
@media (min-width: 640px) {
  .ds-calendar-wrap > div[style*="grid-template-columns:1fr 1fr"],
  .ds-calendar-wrap > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr 1fr !important;
  }
}
/* Inputs inside gap form: full width */
.ds-calendar-wrap .ds-input {
  width: 100% !important;
  box-sizing: border-box !important;
  max-width: 100% !important;
}
/* Submit button: full width on mobile */
@media (max-width: 480px) {
  .ds-calendar-wrap .ds-btn-primary { width: 100% !important; }
}

/* ── FULLCALENDAR — prevent dot/event bleed ──────────────────── */
/* Contain the calendar within its card */
.ds-calendar-wrap #ds-calendar {
  overflow: hidden !important;
}
/* Make event dots and titles clip instead of overflow */
.fc-event-title,
.fc-daygrid-event-dot {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
/* On very small screens reduce cell font size */
@media (max-width: 480px) {
  .fc .fc-col-header-cell-cushion,
  .fc .fc-daygrid-day-number {
    font-size: .7rem !important;
    padding: 2px 4px !important;
  }
  .fc-toolbar-title { font-size: 1rem !important; }
  .fc-toolbar-chunk .fc-button { padding: 4px 8px !important; font-size: .72rem !important; }
}


/* ════════════════════════════════════════════════════════════
   DIARY GAP + CALENDAR MOBILE FIX — v2.5.25
   ════════════════════════════════════════════════════════════ */

/* ── Outer gaps grid: two cols on desktop, one on mobile ─────── */
.ds-gaps-outer-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  align-items: start;
}
@media (max-width: 640px) {
  .ds-gaps-outer-grid {
    grid-template-columns: 1fr !important;
  }
}

/* ── Inner date/time row: two cols on desktop, one on mobile ─── */
.ds-gap-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 10px;
}
@media (max-width: 400px) {
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── FullCalendar: prevent any overflow outside card ─────────── */
.ds-card-full {
  overflow: hidden !important;
}
#ds-calendar {
  overflow: hidden !important;
  max-width: 100% !important;
}
/* Force all FC content to stay within bounds */
.fc {
  max-width: 100% !important;
  overflow: hidden !important;
}
.fc-view-harness {
  overflow: hidden !important;
}
/* Event titles: clip, don't overflow */
.fc-event {
  overflow: hidden !important;
  max-width: 100% !important;
}
.fc-event-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}
/* Dot events in month view: clip within cell */
.fc-daygrid-day-events {
  overflow: hidden !important;
  max-width: 100% !important;
}
.fc-daygrid-event-harness {
  overflow: hidden !important;
  max-width: 100% !important;
}
/* Toolbar: prevent overflow */
.fc-toolbar {
  flex-wrap: wrap !important;
  gap: 6px !important;
}
.fc-toolbar-title {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 180px !important;
}
@media (max-width: 480px) {
  .fc-toolbar { gap: 4px !important; }
  .fc-toolbar-title { font-size: .9rem !important; max-width: 130px !important; }
  .fc .fc-button { padding: 3px 7px !important; font-size: .7rem !important; }
  .fc .fc-col-header-cell-cushion,
  .fc .fc-daygrid-day-number {
    font-size: .68rem !important;
    padding: 2px 3px !important;
  }
}


/* ════════════════════════════════════════════════════════════
   TARGETED FIXES — v2.5.26
   Calendar legend, diary gap form, header logo
   ════════════════════════════════════════════════════════════ */

/* ── 1. CALENDAR CARD HEADER — legend + button ───────────────── */
/* Wrap the right side so legend drops below button on mobile */
.ds-card-header[style*="justify-content:space-between"] > div,
.ds-card-header > div[style*="display:flex"] {
  flex-wrap: wrap !important;
  gap: 8px !important;
}
.ds-cal-legend {
  flex-wrap: wrap !important;
  gap: 6px 10px !important;
  font-size: .72rem !important;
}
/* On mobile: stack legend below the Add Lesson button */
@media (max-width: 560px) {
  .ds-card-header[style*="justify-content:space-between"] {
    flex-wrap: wrap !important;
    gap: 8px !important;
    align-items: flex-start !important;
  }
  .ds-cal-legend {
    width: 100% !important;
    order: 2 !important;
  }
}

/* ── 2. DIARY GAP FORM — collapse to 1 col below 560px ──────── */
.ds-gap-form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 10px !important;
  margin-bottom: 10px !important;
}
@media (max-width: 560px) {
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
  }
}

/* ── 3. HEADER LOGO — shrink on mobile, never push actions ──── */
.ds-header-brand {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
}
.ds-header-logo-img {
  max-width: 100px !important;
  max-height: 36px !important;
}
@media (max-width: 380px) {
  .ds-header-logo-img { max-width: 70px !important; }
  .ds-brand-name { font-size: .8rem !important; }
  .ds-brand-role { display: none !important; }
}
/* Actions: always stay fully visible, never shrink */
.ds-header-actions {
  flex-shrink: 0 !important;
  flex: 0 0 auto !important;
}


/* ════════════════════════════════════════════════════════════
   CALENDAR + GAP CARD FIXES — v2.5.27
   ════════════════════════════════════════════════════════════ */

/* ── Gap card inner padding div — fix bleed ─────────────────── */
/* The div[style="padding:18px"] adds to total width without box-sizing */
.ds-gaps-outer-grid .ds-card,
.ds-gaps-outer-grid .ds-card * {
  box-sizing: border-box !important;
  max-width: 100% !important;
}
.ds-gaps-outer-grid .ds-card > div {
  padding: 16px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  overflow: hidden !important;
}

/* ── FullCalendar toolbar — compact on mobile ────────────────── */
/* Keep all 4 view buttons, just make them smaller */
@media (max-width: 560px) {
  .fc-toolbar {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 4px !important;
  }
  .fc-toolbar-chunk {
    display: flex !important;
    align-items: center !important;
    gap: 2px !important;
  }
  /* Left: prev/next/today */
  .fc-toolbar-chunk:first-child .fc-button {
    padding: 3px 6px !important;
    font-size: .65rem !important;
  }
  /* Centre: title — shrink and truncate */
  .fc-toolbar-title {
    font-size: .78rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    max-width: 100px !important;
  }
  /* Right: view buttons — icon only via font-size trick */
  .fc-dayGridMonth-button,
  .fc-timeGridWeek-button,
  .fc-timeGridDay-button,
  .fc-listWeek-button {
    padding: 3px 5px !important;
    font-size: .6rem !important;
  }
}
@media (max-width: 400px) {
  .fc-toolbar-title { max-width: 70px !important; font-size: .7rem !important; }
  .fc-dayGridMonth-button { display: none !important; } /* drop month view on very small */
}


/* ── HEADER: definitive mobile fix ──────────────────────────── */
/* Single authoritative rule block — overrides all earlier attempts */
.ds-header-inner {
  padding: 0 12px !important;
  gap: 6px !important;
  overflow: visible !important;
}
.ds-header-brand {
  flex: 0 1 auto !important;   /* shrink freely, don't grow past content */
  min-width: 0 !important;
  overflow: hidden !important;
  flex-shrink: 1 !important;
  gap: 8px !important;
}
.ds-header-logo-img {
  max-width: 80px !important;
  max-height: 32px !important;
  flex-shrink: 0 !important;
}
.ds-logo-icon { flex-shrink: 0 !important; }
.ds-header-brand > div {
  min-width: 0 !important;
  overflow: hidden !important;
}
.ds-brand-name {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .85rem !important;
}
.ds-brand-role {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  font-size: .62rem !important;
}
.ds-header-actions {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  gap: 4px !important;
  margin-left: auto !important;   /* push actions to the right always */
}
/* On mobile: hide brand text entirely to give actions full room */
@media (max-width: 460px) {
  .ds-brand-role { display: none !important; }
  .ds-brand-name { font-size: .78rem !important; }
  .ds-header-logo-img { max-width: 64px !important; }
}
@media (max-width: 360px) {
  .ds-brand-name { display: none !important; }
}


/* ── HEADER: fix brand text clip — definitive ────────────────── */
.ds-brand-name {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
.ds-brand-role {
  display: block !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  max-width: 100% !important;
}
/* The text wrapper div must constrain — flex child needs min-width:0 */
.ds-header-brand > div {
  flex: 1 1 0 !important;
  min-width: 0 !important;
  overflow: hidden !important;
  width: 0 !important;  /* force flex to actually shrink this child */
}

/* ── GAP FORM: fix date/time input overflow ──────────────────── */
/* Definitive single-column on mobile — highest specificity */
@media (max-width: 640px) {
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  /* Grid children must allow shrinking — critical for date inputs */
  .ds-gap-form-row > div {
    min-width: 0 !important;
    overflow: hidden !important;
    width: 100% !important;
  }
  /* Date/time inputs: force full width override of browser minimum */
  .ds-gap-form-row input[type="date"],
  .ds-gap-form-row input[type="time"] {
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
}


/* ── DEFINITIVE FIX v2.5.28 ─────────────────────────────────── */

/* 1. Header: clip brand text, never let it bleed into actions */
.ds-header-inner {
  overflow: hidden !important;
  padding: 0 12px !important;
  gap: 6px !important;
}
.ds-header-brand {
  overflow: hidden !important;
  min-width: 0 !important;
  flex-shrink: 1 !important;
  flex: 0 1 auto !important;
}
.ds-header-brand > div {
  overflow: hidden !important;
  min-width: 0 !important;
}
.ds-brand-name,
.ds-brand-role {
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  display: block !important;
}

/* 2. Gap form: outer grid always 1 col on mobile,
      inner date/time always 1 col on mobile.
      date/time inputs have browser-enforced min-width so
      they MUST have a full-width column to sit in. */
@media (max-width: 640px) {
  .ds-gaps-outer-grid {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  .ds-gap-form-row {
    grid-template-columns: 1fr !important;
    display: grid !important;
  }
  /* Ensure inputs don't overflow their cell */
  .ds-gap-form-row > div,
  .ds-gap-form-row input,
  .ds-gap-form-row select {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* ── GAP FORM DATE/TIME — v2.5.29 ───────────────────────────── */
.ds-gap-dt-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
  width: 100%;
  box-sizing: border-box;
}
.ds-gap-dt-field {
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
  box-sizing: border-box;
}
.ds-gap-input {
  width: 100% !important;
  min-width: 0 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}
/* On narrow screens stack vertically */
@media (max-width: 480px) {
  .ds-gap-dt-row {
    flex-direction: column !important;
  }
  .ds-gap-dt-field {
    width: 100% !important;
  }
}


/* ── GAP FORM FIX v2.5.30 — restore visible inputs ─────────── */
.ds-gap-dt-row {
  display: flex !important;
  flex-wrap: wrap !important;   /* wrap instead of overflow */
  gap: 10px !important;
  margin-bottom: 10px !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
.ds-gap-dt-field {
  flex: 1 1 140px !important;  /* grow/shrink but never below 140px */
  min-width: 140px !important;
  box-sizing: border-box !important;
  overflow: visible !important; /* never clip the input */
}
.ds-gap-input {
  width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ── GAP CARD + CALENDAR OVERFLOW FIX v2.5.33 ───────────────── */

/* Prevent instructor wrap cards from overflowing their container */
.ds-instructor-wrap .ds-card {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Calendar wrap: clip horizontal overflow on all screen sizes */
.ds-calendar-wrap {
  overflow-x: hidden !important;
}

/* The gap form card specifically: ensure all children are contained */
.ds-gaps-outer-grid .ds-card {
  overflow: hidden !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.ds-gaps-outer-grid .ds-card * {
  max-width: 100% !important;
  box-sizing: border-box !important;
}

/* Date + time inputs: must not exceed their cell */
#gap-date,
#gap-time {
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ── GAP FORM INPUT CLIP FIX v2.5.34 ────────────────────────── */
/* overflow:hidden on cards was clipping inputs on the right.
   Remove it specifically for the gap form card. */
.ds-gaps-outer-grid .ds-card {
  overflow: visible !important;
}
.ds-gaps-outer-grid .ds-card .ds-input {
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ── iOS DATE/TIME INPUT FIX v2.5.35 ────────────────────────── */
/* iOS Safari ignores width:100% on date/time inputs with default
   -webkit-appearance. Resetting it forces width to be respected. */
#gap-date,
#gap-time,
input[type="date"].ds-input,
input[type="time"].ds-input {
  -webkit-appearance: none !important;
  appearance: none !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
  display: block !important;
}


/* ════════════════════════════════════════════════════════════
   MANAGER BOTTOM NAV + CARD SPACING — v2.5.37
   ════════════════════════════════════════════════════════════ */

/* Bottom nav — identical style to instructor */
.ds-mgr-bottom-nav {
  position: fixed !important;
  bottom: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 100% !important;
  max-width: 680px !important;
  height: 68px !important;
  background: rgba(10,18,40,.97) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  display: flex !important;
  align-items: stretch !important;
  border-top: 1px solid rgba(255,255,255,.07) !important;
  box-shadow: 0 -8px 32px rgba(0,0,0,.2) !important;
  z-index: 200 !important;
}
@media (min-width: 480px) {
  .ds-mgr-bottom-nav {
    border-radius: 20px 20px 0 0 !important;
    border-left: 1px solid rgba(255,255,255,.06) !important;
    border-right: 1px solid rgba(255,255,255,.06) !important;
  }
}
.ds-mgr-bottom-nav a {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 4px !important;
  color: rgba(255,255,255,.35) !important;
  font-size: .58rem !important;
  font-weight: 700 !important;
  letter-spacing: .07em !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  padding: 10px 6px 8px !important;
  transition: color .2s !important;
  position: relative !important;
}
.ds-mgr-bottom-nav a svg {
  width: 22px !important; height: 22px !important;
  stroke-width: 1.75 !important;
  transition: transform .2s !important;
}
.ds-mgr-bottom-nav a:hover { color: rgba(255,255,255,.65) !important; text-decoration: none !important; }
.ds-mgr-bottom-nav a.active { color: #FFFFFF !important; }
.ds-mgr-bottom-nav a.active svg { transform: translateY(-1px) !important; }
.ds-mgr-bottom-nav a.active::after {
  content: '';
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
  width: 24px; height: 2.5px;
  background: var(--ds-amber);
  border-radius: 0 0 3px 3px;
}

/* Hide old top nav */
.ds-manager-wrap .ds-manager-tabs { display: none !important; }

/* Padding to clear nav */
.ds-manager-wrap { padding-bottom: 84px !important; }

/* Card spacing — consistent 20px gaps */
.ds-manager-wrap .ds-card {
  margin-bottom: 20px !important;
}
.ds-manager-main .ds-card,
.ds-manager-sidebar .ds-card {
  margin-bottom: 20px !important;
}

/* Mobile */
@media (max-width: 480px) {
  .ds-mgr-bottom-nav { height: 62px !important; }
  .ds-mgr-bottom-nav a { font-size: .54rem !important; gap: 3px !important; }
  .ds-mgr-bottom-nav a svg { width: 20px !important; height: 20px !important; }
}

/* Grade badge colour in timeline */
.ds-grade-overall {
  border-radius: 20px !important;
  padding: 2px 9px !important;
  font-size: .72rem !important;
  font-weight: 800 !important;
  color: white !important;
  white-space: nowrap !important;
}


/* ── Table scroll shadow (v2.6.5) ────────────────────────────── */
.ds-tbl-scroll {
  overflow-x: auto;
  display: block;
  -webkit-overflow-scrolling: touch;
  background:
    linear-gradient(to right, #ffffff 30%, rgba(255,255,255,0)),
    linear-gradient(to left,  #ffffff 30%, rgba(255,255,255,0)),
    radial-gradient(farthest-side at 0%   50%, rgba(12,30,61,.10), transparent),
    radial-gradient(farthest-side at 100% 50%, rgba(12,30,61,.10), transparent);
  background-repeat: no-repeat;
  background-color: #ffffff;
  background-size: 40px 100%, 40px 100%, 12px 100%, 12px 100%;
  background-position: left, right, left, right;
  background-attachment: local, local, scroll, scroll;
}



/* ── TARGETS / PROGRESS OVERVIEW ─────────────────────────── */
.ds-target-overview-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  padding: 14px 16px 0;
}
.ds-target-overview-metric {
  background: #f8fafc;
  border: 1px solid var(--ds-border);
  border-radius: 14px;
  padding: 12px;
  min-width: 0;
}
.ds-target-overview-value {
  font-family: var(--ds-font-display);
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--ds-navy);
  line-height: 1.1;
}
.ds-target-overview-label {
  margin-top: 4px;
  font-size: .76rem;
  color: var(--ds-text-muted);
  font-weight: 600;
}
.ds-target-overview-bar {
  margin: 14px 16px 0;
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ds-target-overview-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-navy));
  border-radius: inherit;
}
.ds-target-overview-meta {
  padding: 10px 16px 2px;
  font-size: .83rem;
  color: var(--ds-text-muted);
}
.ds-target-priority-list {
  padding: 8px 16px 16px;
  display: grid;
  gap: 8px;
}
.ds-target-priority-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--ds-border);
  border-radius: 12px;
  font-size: .86rem;
}
.ds-target-pill {
  display:inline-flex;
  align-items:center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
}
.ds-target-pill-met { background: rgba(34,197,94,.12); color: #166534; }
.ds-target-pill-on-track { background: rgba(14,165,233,.12); color: #075985; }
.ds-target-pill-watch { background: rgba(245,158,11,.14); color: #92400e; }
.ds-target-pill-behind { background: rgba(239,68,68,.12); color: #991b1b; }
.ds-target-pill-overdue { background: rgba(190,18,60,.14); color: #9f1239; }
.ds-target-pill-none { background: #f3f4f6; color: #6b7280; }
.ds-target-inline {
  display: grid;
  gap: 7px;
  min-width: 170px;
}
.ds-target-inline-top {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 8px;
}
.ds-target-mini-track {
  height: 7px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ds-target-mini-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #60a5fa, #1d4ed8);
}
.ds-target-mini-meta {
  font-size: .72rem;
  color: var(--ds-text-muted);
  line-height: 1.45;
}
.ds-target-card {
  padding: 14px 16px 16px;
}
.ds-target-card .ds-progress-bars {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}
.ds-target-bar-row {
  display:grid;
  gap: 4px;
}
.ds-target-bar-head {
  display:flex;
  justify-content:space-between;
  gap: 10px;
  font-size: .78rem;
  color: var(--ds-text-muted);
}
.ds-target-bar-track {
  height: 8px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
}
.ds-target-bar-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ds-navy-light), var(--ds-navy));
}
.ds-target-card-summary {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.ds-target-card-summary strong {
  font-size: 1rem;
}

/* ============================================================
   UI OVERHAUL — modernized dashboard system
   ============================================================ */

:root {
  --ds-page-max: 1420px;
  --ds-page-pad: clamp(16px, 2.4vw, 28px);
  --ds-radius-lg: 22px;
  --ds-radius-xl: 28px;
  --ds-line: rgba(255,255,255,.06);
  --ds-focus: 0 0 0 3px rgba(245,158,11,.24);
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.11), transparent 28%),
    radial-gradient(circle at top right, rgba(59,130,246,.10), transparent 24%),
    linear-gradient(180deg, #f8fbff 0%, #eef4fb 100%);
}

.ds-wrap {
  max-width: var(--ds-page-max);
  margin: 0 auto;
  padding: 0 var(--ds-page-pad) 90px;
}

.ds-header {
  background: linear-gradient(135deg, rgba(12,30,61,.97), rgba(26,52,97,.96));
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.ds-header-inner {
  max-width: var(--ds-page-max);
  padding: 0 var(--ds-page-pad);
}

.ds-header-brand,
.ds-header-actions {
  gap: 12px;
}

.ds-brand-name {
  font-size: 1.02rem;
  letter-spacing: -.02em;
}

.ds-brand-role {
  font-size: .74rem;
  opacity: .85;
}

.ds-header-avatar,
.ds-header-avatar-initial,
.ds-hero-avatar-img,
.ds-hero-avatar-initial {
  box-shadow: var(--ds-shadow-md);
}

.ds-header-avatar-label:hover .ds-header-avatar,
.ds-header-avatar-label:hover .ds-header-avatar-initial {
  border-color: rgba(245,158,11,.7);
  box-shadow: 0 8px 24px rgba(245,158,11,.18);
}

.ds-dark-toggle,
.ds-tour-btn {
  height: 38px;
  border-radius: 999px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: #fff;
  box-shadow: none;
}

.ds-tour-btn:hover,
.ds-dark-toggle:hover {
  background: rgba(255,255,255,.12);
}

.ds-card,
.ds-auth-card,
.ds-modal-content,
.ds-mock-card,
.ds-comment-pupil,
.ds-target-priority-row,
.ds-calendar-intro,
.ds-calendar-upcoming,
.ds-pupil-hero,
.ds-manager-hero,
.ds-settings-wrap .ds-card,
.ds-manager-settings-wrap .ds-card,
.ds-admin-card,
.ds-auth-box {
  border-radius: var(--ds-radius-lg);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.ds-card,
.ds-auth-card,
.ds-modal-content,
.ds-mock-card,
.ds-comment-pupil,
.ds-pupil-hero,
.ds-manager-hero,
.ds-admin-card {
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(10px);
}

.ds-card,
.ds-modal-content,
.ds-mock-card,
.ds-comment-pupil,
.ds-pupil-hero,
.ds-manager-hero,
.ds-admin-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ds-card:hover,
.ds-pupil-hero:hover,
.ds-manager-hero:hover,
.ds-admin-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--ds-shadow-md);
}

.ds-card-header,
.ds-home-greeting,
.ds-section-header,
.ds-card .ds-card-header {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ds-font-display);
  font-weight: 700;
  letter-spacing: -.01em;
}

.ds-card-header {
  padding: 16px 18px 14px;
  font-size: 1rem;
  border-bottom: 1px solid var(--ds-border);
}

.ds-card-subtitle,
.ds-card-header-sub,
.ds-home-greeting-date,
.ds-hero-meta,
.ds-target-overview-meta,
.ds-target-mini-meta,
.ds-field-hint,
.ds-text-muted {
  color: var(--ds-text-muted);
}

.ds-card-subtitle {
  margin-left: auto;
  font-size: .78rem;
  font-weight: 700;
  background: #edf4ff;
  border-radius: 999px;
  padding: 5px 10px;
}

.ds-card-header-link,
.ds-form-links a,
.ds-hero-link,
.ds-admin-link {
  color: var(--ds-primary);
  font-weight: 700;
  text-decoration: none;
}

.ds-card-header-link:hover,
.ds-form-links a:hover,
.ds-hero-link:hover,
.ds-admin-link:hover {
  text-decoration: underline;
}

.ds-btn,
button.ds-btn,
input[type=submit].ds-btn {
  border-radius: 999px;
  padding: 10px 16px;
  font-weight: 700;
  letter-spacing: .01em;
  border: 1px solid transparent;
  box-shadow: 0 1px 1px rgba(12,30,61,.02), 0 10px 22px rgba(12,30,61,.08);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}

.ds-btn:hover,
button.ds-btn:hover,
input[type=submit].ds-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 1px rgba(12,30,61,.03), 0 14px 28px rgba(12,30,61,.10);
}

.ds-btn:focus,
.ds-dark-toggle:focus,
.ds-tour-btn:focus,
input:focus,
select:focus,
textarea:focus,
button:focus {
  outline: none;
  box-shadow: var(--ds-focus);
}

.ds-btn-primary {
  background: linear-gradient(135deg, var(--ds-amber) 0%, var(--ds-amber-dark) 100%);
  color: #1e293b;
}

.ds-btn-outline {
  background: rgba(255,255,255,.8);
  color: var(--ds-text);
  border-color: var(--ds-border-mid);
}

.ds-btn-ghost {
  background: transparent;
  color: var(--ds-text);
  border-color: transparent;
  box-shadow: none;
}

.ds-btn-ghost:hover {
  background: rgba(12,30,61,.06);
  box-shadow: none;
}

.ds-btn-sm,
.ds-btn-xs {
  padding: 8px 12px;
  font-size: .82rem;
}

.ds-input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="time"],
select,
textarea {
  width: 100%;
  min-height: 44px;
  border-radius: 14px;
  border: 1px solid var(--ds-border-mid);
  background: rgba(255,255,255,.96);
  color: var(--ds-text);
  box-shadow: inset 0 1px 1px rgba(12,30,61,.02);
}

.ds-input::placeholder,
input::placeholder,
textarea::placeholder {
  color: var(--ds-text-subtle);
}

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

.ds-form-group label {
  display: block;
  margin-bottom: 7px;
  font-size: .86rem;
  font-weight: 700;
  color: var(--ds-text);
}

.ds-notice {
  border-radius: 14px;
  padding: 12px 14px;
  border: 1px solid transparent;
  box-shadow: var(--ds-shadow);
}

.ds-notice-success {
  background: rgba(16,185,129,.10);
  border-color: rgba(16,185,129,.18);
  color: #065f46;
}

.ds-notice-error {
  background: rgba(239,68,68,.10);
  border-color: rgba(239,68,68,.18);
  color: #991b1b;
}

.ds-manager-wrap,
.ds-home-tab,
.ds-pupil-grid,
.ds-home-grid,
.ds-instr-home-wrap,
.ds-manager-grid,
.ds-admin-grid,
.ds-settings-grid,
.ds-subgrid,
.ds-calendar-wrap,
.ds-auth-wrap {
  display: grid;
  gap: 18px;
}

.ds-manager-stats,
.ds-home-stats,
.ds-hero-metrics-grid,
.ds-target-overview-grid {
  display: grid;
  gap: 14px;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

.ds-mstat-card,
.ds-home-stat,
.ds-hero-metric,
.ds-target-overview-metric {
  border-radius: 18px;
  background: rgba(255,255,255,.95);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.ds-mstat-card,
.ds-home-stat {
  padding: 16px 18px;
}

.ds-mstat-value,
.ds-home-stat-value,
.ds-hero-metric strong,
.ds-target-overview-value {
  font-family: var(--ds-font-display);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ds-navy);
}

.ds-mstat-label,
.ds-home-stat-label,
.ds-hero-metric span,
.ds-target-overview-label {
  display: block;
  margin-top: 6px;
  color: var(--ds-text-muted);
  font-size: .82rem;
}

.ds-mstat-value,
.ds-home-stat-value,
.ds-hero-metric strong,
.ds-target-overview-value {
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1;
}

.ds-manager-hero,
.ds-pupil-hero {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 18px;
  padding: 22px;
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.16), transparent 28%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(246,250,255,.95));
}

.ds-manager-hero-copy h1 {
  margin: 6px 0 10px;
  font-family: var(--ds-font-display);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: var(--ds-navy);
}

.ds-manager-hero-copy p,
.ds-pupil-hero-copy p {
  margin: 0;
  color: var(--ds-text-muted);
  max-width: 70ch;
}

.ds-hero-kicker,
.ds-home-greeting-name,
.ds-pupil-hero-kicker {
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  font-weight: 800;
  color: var(--ds-amber-dark);
}

.ds-hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 16px;
}

.ds-hero-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}

.ds-hero-badge,
.ds-pill,
.ds-traffic-light,
.ds-status-chip,
.ds-hero-badge-soft {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .03em;
}

.ds-hero-badge {
  padding: 6px 10px;
  background: rgba(12,30,61,.07);
  color: var(--ds-text);
}

.ds-hero-badge-soft {
  padding: 6px 10px;
  background: rgba(245,158,11,.12);
  color: #92400e;
}

.ds-manager-hero-side {
  align-self: stretch;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,30,61,.98), rgba(26,52,97,.95));
  color: #fff;
  box-shadow: 0 18px 40px rgba(12,30,61,.18);
}

.ds-manager-hero-side .ds-hero-badge,
.ds-manager-hero-side .ds-hero-badge-soft {
  background: rgba(255,255,255,.12);
  color: #fff;
}

.ds-hero-metrics-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.ds-hero-metric {
  padding: 12px 14px;
}

.ds-manager-grid,
.ds-home-grid,
.ds-pupil-grid {
  grid-template-columns: minmax(0, 2.1fr) minmax(280px, .95fr);
  align-items: start;
}

.ds-manager-main,
.ds-pupil-main,
.ds-home-main {
  display: grid;
  gap: 18px;
}

.ds-manager-sidebar,
.ds-pupil-sidebar,
.ds-home-sidebar {
  display: grid;
  gap: 18px;
  position: sticky;
  top: calc(var(--ds-header-h) + 16px);
}

.ds-manager-table-wrap,
.ds-table-wrap,
.ds-admin-table-wrap {
  overflow: auto;
  border-radius: 18px;
  border: 1px solid var(--ds-border);
  background: rgba(255,255,255,.92);
  box-shadow: var(--ds-shadow);
}

.ds-manager-table,
.ds-table,
.ds-admin-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .90rem;
}

.ds-manager-table thead th,
.ds-table thead th,
.ds-admin-table thead th {
  position: sticky;
  top: 0;
  background: #f8fbff;
  text-align: left;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ds-text-muted);
  padding: 14px 14px;
  border-bottom: 1px solid var(--ds-border);
}

.ds-manager-table tbody td,
.ds-table tbody td,
.ds-admin-table tbody td {
  padding: 14px;
  border-bottom: 1px solid var(--ds-border);
  vertical-align: top;
}

.ds-manager-table tbody tr:hover,
.ds-table tbody tr:hover,
.ds-admin-table tbody tr:hover {
  background: #f8fbff;
}

.ds-manager-table tbody tr:last-child td,
.ds-table tbody tr:last-child td,
.ds-admin-table tbody tr:last-child td {
  border-bottom: 0;
}

.ds-manager-table td,
.ds-table td,
.ds-admin-table td {
  white-space: normal;
}

.ds-manager-pupil-name,
.ds-home-stat-value,
.ds-calendar-mini-name,
.ds-week-name {
  font-weight: 700;
  color: var(--ds-text);
}

.ds-manager-pupil-email,
.ds-calendar-mini-meta,
.ds-week-dur,
.ds-week-day-header,
.ds-home-empty,
.ds-empty-state,
.ds-empty-state-sm {
  color: var(--ds-text-muted);
}

.ds-manager-assign-row,
.ds-upcoming-item,
.ds-calendar-mini-row,
.ds-week-row,
.ds-hero-stat-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.ds-manager-assign-row {
  padding: 12px 0;
  border-bottom: 1px solid var(--ds-border);
}

.ds-manager-assign-row:last-child { border-bottom: 0; }

.ds-mini-bar,
.ds-target-overview-bar,
.ds-target-mini-track,
.ds-target-bar-track {
  background: #e8eef7;
}

.ds-mini-bar-fill,
.ds-target-overview-bar-fill,
.ds-target-mini-fill,
.ds-target-bar-fill {
  background: linear-gradient(90deg, var(--ds-amber) 0%, var(--ds-amber-dark) 100%);
}

.ds-help-icon {
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(245,158,11,.14);
  color: var(--ds-amber-dark);
  border: 1px solid rgba(245,158,11,.22);
}

.ds-tabs,
.ds-manager-tabs,
.ds-pupil-tabs,
.ds-instr-bottom-nav,
.ds-pupil-bottom-nav {
  border-radius: 999px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(8px);
  border: 1px solid var(--ds-border);
  box-shadow: var(--ds-shadow);
}

.ds-tabs a,
.ds-manager-tabs a,
.ds-pupil-tabs a,
.ds-instr-bottom-nav a,
.ds-pupil-bottom-nav a {
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.ds-tabs a.active,
.ds-manager-tabs a.active,
.ds-pupil-tabs a.active,
.ds-instr-bottom-nav a.active,
.ds-pupil-bottom-nav a.active {
  background: rgba(245,158,11,.14);
  color: var(--ds-amber-dark);
}

.ds-calendar-wrap #ds-calendar,
.ds-calendar-wrap .fc,
.ds-calendar-wrap .fc .fc-view-harness,
.ds-calendar-wrap .fc .fc-scrollgrid,
.ds-calendar-wrap .fc-theme-standard td,
.ds-calendar-wrap .fc-theme-standard th {
  border-color: var(--ds-border);
}

.ds-calendar-wrap .fc {
  --fc-border-color: var(--ds-border);
  --fc-neutral-bg-color: #fff;
  --fc-page-bg-color: transparent;
  --fc-today-bg-color: rgba(245,158,11,.08);
}

.ds-calendar-wrap .fc .fc-toolbar-title {
  font-family: var(--ds-font-display);
  font-weight: 800;
  color: var(--ds-navy);
  letter-spacing: -.03em;
}

.ds-calendar-wrap .fc .fc-button {
  border-radius: 999px;
  text-transform: none;
  font-weight: 700;
  box-shadow: none;
}

.ds-modal-overlay {
  background: rgba(9, 17, 35, .58);
  backdrop-filter: blur(4px);
}

.ds-modal-content {
  padding: 0;
  overflow: hidden;
}

.ds-modal-header {
  padding: 18px 20px;
  border-bottom: 1px solid var(--ds-border);
  background: linear-gradient(180deg, #fbfdff, #f5f8fc);
}

.ds-modal-body,
.ds-modal-footer {
  padding: 20px;
}

.ds-auth-wrap {
  min-height: calc(100vh - var(--ds-header-h));
  align-items: center;
  justify-items: center;
  padding: 28px 16px 40px;
}

.ds-auth-card {
  width: min(100%, 460px);
  padding: 26px;
  background:
    radial-gradient(circle at top right, rgba(245,158,11,.12), transparent 25%),
    rgba(255,255,255,.96);
}

.ds-auth-logo p {
  margin-top: 6px;
  color: var(--ds-text-muted);
}

.ds-auth-wordmark {
  font-family: var(--ds-font-display);
  font-size: 2rem;
  line-height: 1;
}

.ds-auth-word-pass { color: var(--ds-navy); }
.ds-auth-word-track { color: var(--ds-amber-dark); }

.ds-auth-force-notice,
.ds-cancel-policy-notice {
  border-radius: 14px;
}

.ds-empty-state,
.ds-empty-state-sm,
.ds-home-empty {
  border: 1px dashed var(--ds-border-mid);
  border-radius: 18px;
  background: rgba(255,255,255,.7);
  padding: 18px;
}

.ds-hero-actions .ds-btn,
.ds-home-greeting .ds-btn {
  min-width: 0;
}

.ds-manager-settings-wrap,
.ds-settings-wrap,
.ds-admin-wrap {
  display: grid;
  gap: 18px;
}

.ds-settings-grid,
.ds-admin-grid,
.ds-subgrid {
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
}

.ds-target-priority-row,
.ds-target-overview-metric,
.ds-target-card,
.ds-mock-card,
.ds-comment-pupil {
  background: rgba(255,255,255,.96);
}

.ds-target-overview-grid {
  margin-top: 14px;
}

.ds-target-overview-metric {
  padding: 14px 16px;
}

.ds-target-inline-top strong {
  color: var(--ds-navy);
}

.ds-pupil-hero {
  grid-template-columns: minmax(0, 1.4fr) minmax(260px, .9fr);
  align-items: stretch;
}

.ds-hero-badge {
  line-height: 1;
}

.ds-hero-badge-soft {
  border: 1px solid rgba(245,158,11,.16);
}

.ds-hero-avatar-wrap,
.ds-header-avatar-wrap {
  position: relative;
}

.ds-hero-avatar-img,
.ds-hero-avatar-initial {
  width: 96px;
  height: 96px;
  border-radius: 24px;
  object-fit: cover;
}

.ds-hero-avatar-initial,
.ds-header-avatar-initial {
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--ds-amber) 0%, var(--ds-amber-dark) 100%);
  color: #1e293b;
  font-family: var(--ds-font-display);
  font-weight: 800;
}

.ds-home-greeting {
  padding: 8px 2px 4px;
  justify-content: space-between;
}

.ds-home-greeting-name {
  font-size: 1.28rem;
  text-transform: none;
  letter-spacing: -.03em;
  color: var(--ds-navy);
}

.ds-home-greeting-date {
  margin-top: 4px;
}

.ds-instr-bottom-nav,
.ds-pupil-bottom-nav {
  padding: 6px;
  gap: 6px;
}

.ds-instr-bottom-nav a,
.ds-pupil-bottom-nav a {
  border-radius: 16px;
}

.ds-toast {
  border-radius: 999px;
  box-shadow: var(--ds-shadow-lg);
}

@media (max-width: 1100px) {
  .ds-manager-grid,
  .ds-home-grid,
  .ds-pupil-grid,
  .ds-settings-grid,
  .ds-admin-grid,
  .ds-subgrid,
  .ds-manager-hero,
  .ds-pupil-hero {
    grid-template-columns: 1fr;
  }

  .ds-manager-sidebar,
  .ds-pupil-sidebar,
  .ds-home-sidebar {
    position: static;
  }

  .ds-manager-hero-side {
    order: 2;
  }
}

@media (max-width: 820px) {
  .ds-header-inner {
    gap: 10px;
  }

  .ds-user-greeting {
    display: none;
  }

  .ds-card-header {
    padding: 14px 16px;
    flex-wrap: wrap;
  }

  .ds-btn,
  button.ds-btn,
  input[type=submit].ds-btn {
    padding: 9px 14px;
  }

  .ds-manager-table,
  .ds-table,
  .ds-admin-table {
    min-width: 720px;
  }

  .ds-manager-stats,
  .ds-home-stats,
  .ds-hero-metrics-grid,
  .ds-target-overview-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .ds-wrap {
    padding-left: 12px;
    padding-right: 12px;
  }

  .ds-header-inner {
    padding: 0 12px;
  }

  .ds-manager-stats,
  .ds-home-stats,
  .ds-hero-metrics-grid,
  .ds-target-overview-grid {
    grid-template-columns: 1fr;
  }

  .ds-auth-card,
  .ds-card,
  .ds-pupil-hero,
  .ds-manager-hero {
    border-radius: 20px;
  }

  .ds-home-greeting {
    align-items: flex-start;
    flex-direction: column;
  }

  .ds-home-greeting .ds-btn,
  .ds-hero-actions .ds-btn {
    width: 100%;
    justify-content: center;
  }

  .ds-pupil-bottom-nav,
  .ds-instr-bottom-nav {
    grid-template-columns: repeat(5, 1fr);
    overflow-x: auto;
  }

  .ds-pupil-bottom-nav a,
  .ds-instr-bottom-nav a {
    min-width: 72px;
  }
}


/* ── AUTH REDESIGN (login + signup) ─────────────────────────────── */
.ds-auth-wrap--split {
  min-height: calc(100vh - var(--ds-header-h));
  padding: 28px 20px 44px;
  background:
    radial-gradient(circle at top left, rgba(245,158,11,.10), transparent 28%),
    radial-gradient(circle at bottom right, rgba(42,74,130,.12), transparent 32%),
    linear-gradient(135deg, #f7f9fc 0%, #eef3fb 48%, #f8fafc 100%);
  position: relative;
}

.ds-auth-wrap--split::before,
.ds-auth-wrap--split::after {
  content: '';
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  filter: blur(2px);
}

.ds-auth-wrap--split::before {
  width: 280px;
  height: 280px;
  right: -80px;
  top: -60px;
  background: rgba(245,158,11,.12);
}

.ds-auth-wrap--split::after {
  width: 340px;
  height: 340px;
  left: -110px;
  bottom: -120px;
  background: rgba(12,30,61,.08);
}

.ds-auth-shell {
  width: min(1180px, 100%);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 460px);
  gap: 24px;
  align-items: stretch;
  position: relative;
  z-index: 1;
}
.ds-auth-shell--signup {
  grid-template-columns: minmax(0, .95fr) minmax(540px, 1.15fr);
}

@media (min-width: 1200px) {
  .ds-auth-shell--signup {
    grid-template-columns: minmax(0, .88fr) minmax(640px, 1.22fr);
  }
}

.ds-auth-panel {
  border-radius: 28px;
  padding: 36px;
  background: linear-gradient(160deg, #0b1730 0%, #102b56 52%, #17365f 100%);
  color: #fff;
  box-shadow: 0 30px 70px rgba(12,30,61,.18);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 100%;
  text-shadow: 0 1px 1px rgba(0,0,0,.25);
}

.ds-auth-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: fit-content;
  padding: 8px 14px;
  margin-bottom: 18px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: rgba(255,255,255,.96);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  box-shadow: 0 1px 0 rgba(255,255,255,.04) inset;
}

.ds-auth-panel h1 {
  margin: 0;
  font-family: var(--ds-font-display);
  font-size: clamp(2rem, 4vw, 3.25rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  color: #fff;
}

.ds-auth-panel p {
  margin: 16px 0 0;
  max-width: 34rem;
  font-size: 1rem;
  line-height: 1.7;
  color: rgba(255,255,255,.92);
}

.ds-auth-list {
  list-style: none;
  padding: 0;
  margin: 28px 0 0;
  display: grid;
  gap: 14px;
}

.ds-auth-list li {
  position: relative;
  padding-left: 28px;
  color: rgba(255,255,255,.95);
  line-height: 1.55;
}

.ds-auth-list li::before {
  content: '✓';
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: rgba(245,158,11,.18);
  color: #fbbf24;
  display: grid;
  place-items: center;
  font-size: .75rem;
  font-weight: 900;
}

.ds-auth-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
}

.ds-auth-badge {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  padding: 8px 12px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.10);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
}

.ds-auth-panel-footer {
  margin-top: 26px;
  display: grid;
  gap: 4px;
  color: rgba(255,255,255,.90);
  font-size: .92rem;
}

.ds-auth-card--auth,
.ds-auth-card--signup {
  width: 100%;
  max-width: none;
  padding: 0;
  overflow: hidden;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(148,163,184,.22);
  box-shadow: 0 26px 60px rgba(12,30,61,.12);
}

.ds-auth-card--signup {
  max-width: 760px;
}


.ds-auth-logo {
  padding: 28px 28px 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,250,252,.96));
  border-bottom: 1px solid rgba(148,163,184,.16);
}

.ds-auth-brand-logo {
  max-height: 64px;
  max-width: 240px;
  width: auto;
  height: auto;
  display: block;
  margin: 0 auto 10px;
}

.ds-auth-logo p {
  margin: 0;
  color: var(--ds-text-muted);
  font-size: .95rem;
  text-align: center;
}

.ds-auth-card .ds-notice,
.ds-auth-card .ds-auth-force-notice,
.ds-auth-card .ds-plan-grid,
.ds-auth-card .ds-auth-form,
.ds-auth-card .ds-auth-note,
.ds-auth-card .ds-public-cta {
  margin-left: 28px;
  margin-right: 28px;
}

.ds-auth-card .ds-notice {
  margin-top: 18px;
}

.ds-auth-card .ds-auth-force-notice {
  margin-top: 18px;
}

.ds-auth-form {
  padding: 22px 0 26px;
}

.ds-auth-form .ds-form-group:last-child {
  margin-bottom: 0;
}

.ds-required {
  color: #b91c1c;
  font-weight: 800;
}

.ds-field-hint {
  margin-top: 6px;
  font-size: .82rem;
  line-height: 1.45;
}

.ds-form-row--compact {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: -2px 0 16px;
  font-size: .9rem;
}

.ds-form-row--compact a,
.ds-form-row--compact label {
  font-weight: 700;
}

.ds-checkbox-row {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ds-text);
}

.ds-checkbox-row input {
  width: 16px;
  height: 16px;
  min-height: 16px;
  margin: 0;
}

.ds-public-cta {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid rgba(148,163,184,.18);
  text-align: center;
}

.ds-public-cta p {
  margin: 0 0 10px;
  color: var(--ds-text-muted);
  font-size: .92rem;
}

.ds-auth-note {
  margin-top: 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(245,158,11,.18);
  background: rgba(245,158,11,.08);
  color: #6b4d00;
  font-size: .92rem;
  line-height: 1.55;
}

.ds-plan-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  padding: 22px 28px 0;
  align-items: stretch;
}

@media (min-width: 980px) {
  .ds-plan-grid {
    grid-template-columns: repeat(2, minmax(280px, 1fr));
  }
}

.ds-auth-plan {
  border-radius: 20px;
  padding: 20px;
  border: 1px solid rgba(148,163,184,.18);
  background: linear-gradient(180deg, #fff, #f8fbff);
  box-shadow: 0 10px 24px rgba(12,30,61,.05);
  min-width: 0;
}

.ds-auth-plan.is-featured {
  border-color: rgba(245,158,11,.28);
  background: linear-gradient(180deg, #fff9eb, #fffdf8);
}

.ds-auth-plan-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.ds-auth-plan-top > div {
  min-width: 0;
}

.ds-auth-plan h2 {
  margin: 0;
  font-size: 1.05rem;
  line-height: 1.2;
}

.ds-auth-plan p {
  margin: 8px 0 0;
  font-size: .9rem;
  line-height: 1.5;
  color: var(--ds-text-muted);
}

.ds-auth-plan-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(245,158,11,.14);
  color: #8a5b00;
  font-size: .74rem;
  font-weight: 800;
  white-space: nowrap;
}

.ds-auth-plan-price {
  margin-top: 14px;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: nowrap;
  white-space: nowrap;
  font-family: var(--ds-font-display);
  font-size: 1.25rem;
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--ds-navy);
}

.ds-auth-plan-price span {
  font-family: var(--ds-font-body);
  font-size: .82rem;
  font-weight: 700;
  color: var(--ds-text-muted);
  white-space: nowrap;
}

.ds-auth-wrap--compact {
  min-height: calc(100vh - var(--ds-header-h));
  padding: 28px 20px 44px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #f7f9fc 0%, #eef3fb 48%, #f8fafc 100%);
}

.ds-auth-wrap--compact .ds-auth-card {
  width: min(100%, 460px);
}


.ds-form-actions--stacked {
  display: grid;
  gap: 12px;
}

.ds-form-actions--stacked .ds-btn {
  width: 100%;
  justify-content: center;
}
@media (max-width: 1100px) {
  .ds-auth-shell,
  .ds-auth-shell--signup {
    grid-template-columns: 1fr;
  }

  .ds-auth-panel {
    min-height: auto;
  }
}

@media (max-width: 720px) {
  .ds-auth-wrap--split,
  .ds-auth-wrap--compact {
    padding: 16px 12px 28px;
  }

  .ds-auth-panel {
    padding: 24px;
    border-radius: 24px;
  }

  .ds-auth-logo,
  .ds-auth-card .ds-notice,
  .ds-auth-card .ds-auth-force-notice,
  .ds-auth-card .ds-plan-grid,
  .ds-auth-card .ds-auth-form,
  .ds-auth-card .ds-auth-note,
  .ds-auth-card .ds-public-cta {
    margin-left: 16px;
    margin-right: 16px;
  }

  .ds-auth-logo {
    padding: 22px 18px 18px;
  }

  .ds-plan-grid {
    grid-template-columns: 1fr;
    padding-top: 18px;
  }

  .ds-auth-card--signup {
    max-width: none;
  }

  .ds-form-row--compact {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* ── FINAL DASHBOARD POLISH (shared across all portals) ───────────────────── */
.ds-card,
.ds-auth-card,
.ds-modal-content,
.ds-mock-card,
.ds-comment-pupil,
.ds-target-priority-row,
.ds-calendar-intro,
.ds-calendar-upcoming,
.ds-pupil-hero,
.ds-manager-hero,
.ds-admin-card {
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ds-card:hover,
.ds-mock-card:hover,
.ds-comment-pupil:hover,
.ds-target-priority-row:hover,
.ds-calendar-upcoming:hover {
  transform: translateY(-1px);
  box-shadow: var(--ds-shadow-lg);
}

.ds-card-header,
.ds-mock-card-header,
.ds-comment-header,
.ds-timeline-header,
.ds-manager-table th,
.ds-admin-table th {
  letter-spacing: .06em;
}

.ds-home-empty,
.ds-empty-state,
.ds-empty-state-sm {
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(248,251,255,.96));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.85);
}

.ds-manager-table,
.ds-admin-table,
.ds-table {
  border-collapse: separate;
  border-spacing: 0;
}

.ds-manager-table th,
.ds-admin-table th,
.ds-table th {
  background: rgba(248,251,255,.96);
  position: sticky;
  top: 0;
  z-index: 1;
}

.ds-manager-table td,
.ds-admin-table td,
.ds-table td {
  background: rgba(255,255,255,.86);
}

.ds-manager-table tr:hover td,
.ds-admin-table tr:hover td,
.ds-table tr:hover td {
  background: #f7fbff;
}

.ds-nav-tabs,
.ds-manager-tabs,
.dsp-tab-nav,
.ds-instructor-wrap .ds-nav-tabs {
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(12px);
  border-bottom-color: rgba(226,234,244,.9);
}

.ds-tab,
.ds-manager-tab,
.dsp-tab-link {
  border-radius: 14px 14px 0 0;
  padding-top: 14px;
  padding-bottom: 14px;
}

.ds-tab.active,
.ds-manager-tab.active,
.dsp-tab-link.dsp-tab-active {
  box-shadow: inset 0 -3px 0 var(--ds-amber);
}

.ds-badge,
.ds-auth-badge,
.ds-hero-badge,
.ds-manager-pill,
.ds-pill {
  border-radius: 999px;
}

.ds-btn,
button.ds-btn,
input[type=submit].ds-btn {
  box-shadow: none;
}

.ds-btn:focus,
.ds-btn-outline:focus,
.ds-btn-primary:focus,
.ds-btn-danger:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none;
  box-shadow: var(--ds-focus);
}

@media (max-width: 820px) {
  .ds-card-header,
  .ds-card-header-link,
  .ds-manager-table th,
  .ds-admin-table th {
    letter-spacing: .04em;
  }

  .ds-manager-table,
  .ds-admin-table,
  .ds-table {
    min-width: 760px;
  }
}



/* Operational status / dashboard-friendly UI */
.ds-status-pill {
    display:inline-flex;
    align-items:center;
    gap:6px;
    padding:6px 10px;
    border-radius:999px;
    font-size:.78rem;
    font-weight:700;
    line-height:1;
    background:#eff6ff;
    color:#1d4ed8;
}

.ds-status-pill--success { background:#ecfdf5; color:#047857; }
.ds-status-pill--warning { background:#fff7ed; color:#c2410c; }
.ds-status-pill--error { background:#fef2f2; color:#b91c1c; }
.ds-status-pill--info { background:#f1f5f9; color:#334155; }

.ds-card table.widefat,
.ds-card .wp-list-table {
    border:1px solid #e2e8f0;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
}

.ds-card .wp-list-table thead th {
    background:#f8fafc;
    border-bottom:1px solid #e2e8f0;
}

.ds-card .wp-list-table tbody tr:hover {
    background:#f8fafc;
}

.ds-support-empty {
    margin:0;
    padding:14px 16px;
    border:1px dashed #cbd5e1;
    border-radius:12px;
    color:#64748b;
    background:#f8fafc;
}

@media (max-width: 782px) {
    .ds-status-pill { margin-bottom:8px; }
    .ds-card table.widefat,
    .ds-card .wp-list-table { display:block; overflow-x:auto; }
}

.passtrack-auth-left{background:#0f172a;color:#fff;} .passtrack-auth-left h1,.passtrack-auth-left p{color:#fff;}

.passtrack-plan-price{white-space:nowrap;font-size:28px;}


/* Step 12d auth page polish */
.ds-auth-brand-logo {
  max-height: 84px;
  max-width: 320px;
}

.ds-auth-tagline {
  margin: 6px 0 10px;
  text-align: center;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #64748b;
}

.ds-signup-legal-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 10px;
  margin: 14px 0 16px 0;
  font-size: 14px;
  color: #475569;
}

.ds-checkbox-row-legal {
  display: inline-flex;
  align-items: flex-start;
  gap: 10px;
  margin: 0;
  flex: 1 1 320px;
}

.ds-checkbox-row-legal input {
  margin-top: 3px;
}

.ds-inline-legal-link {
  display: inline-flex;
  align-items: center;
  border: 0;
  background: none;
  padding: 0;
  color: #2563eb;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  line-height: 1.4;
}

.ds-inline-legal-link:hover {
  color: #1d4ed8;
}

.ds-terms-inline {
  margin: 0 0 18px 0;
  padding: 18px 18px 6px;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  background: #fff;
}

.ds-terms-inline__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}

.ds-terms-inline__header h3 {
  margin: 0 0 4px 0;
  font-size: 18px;
  color: #0f172a;
}

.ds-terms-inline__header p {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

@media (max-width: 640px) {
  .ds-auth-brand-logo {
    max-height: 76px;
    max-width: 280px;
  }

  .ds-auth-tagline {
    font-size: .72rem;
  }

  .ds-terms-inline__header {
    flex-direction: column;
  }
}


/* Step 12g terms presentation */
.ds-terms-inline {
  margin: 0 0 20px 0;
  padding: 22px 22px 8px;
  border: 1px solid #dbe3ee;
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfdff 100%);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.04);
}

.ds-terms-inline__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid #e5e7eb;
}

.ds-terms-inline__header h3 {
  margin: 0 0 6px 0;
  font-size: 20px;
  line-height: 1.2;
  color: #0f172a;
}

.ds-terms-inline__header p,
.ds-legal-meta {
  margin: 0;
  color: #64748b;
  font-size: 13px;
}

.ds-legal-copy {
  color: #334155;
  line-height: 1.75;
  font-size: 15px;
}

.ds-legal-copy h4 {
  margin: 24px 0 10px 0;
  font-size: 17px;
  line-height: 1.35;
  color: #0f172a;
}

.ds-legal-copy p {
  margin: 0 0 14px 0;
}

@media (max-width: 640px) {
  .ds-terms-inline {
    padding: 18px 16px 6px;
  }

  .ds-terms-inline__header {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ── MANAGER ONBOARDING WIZARD ───────────────────────────── */
.ds-onboarding-shell{display:grid;gap:24px;margin-top:18px;}
.ds-onboarding-hero{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(280px,.9fr);gap:18px;align-items:stretch;}
.ds-onboarding-hero-copy,.ds-onboarding-progress,.ds-onboarding-card,.ds-onboarding-side-card{background:#fff;border:1px solid #e5e7eb;border-radius:22px;box-shadow:0 20px 45px rgba(15,23,42,.06);}
.ds-onboarding-hero-copy{padding:28px 30px;background:linear-gradient(135deg,#0c1e3d 0%,#15315d 55%,#214a84 100%);color:#fff;}
.ds-onboarding-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:.78rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.76);margin-bottom:12px;}
.ds-onboarding-hero-copy h2{margin:0 0 10px;font-size:2rem;line-height:1.1;color:#fff;}
.ds-onboarding-hero-copy p{margin:0;max-width:56ch;color:rgba(255,255,255,.82);}
.ds-onboarding-progress{padding:22px 22px 18px;}
.ds-onboarding-progress-head{display:flex;justify-content:space-between;gap:12px;align-items:center;margin-bottom:14px;color:#0f172a;font-size:.95rem;}
.ds-onboarding-progress-bar{height:10px;border-radius:999px;background:#e5e7eb;overflow:hidden;margin-bottom:18px;}
.ds-onboarding-progress-bar span{display:block;height:100%;width:33.333%;border-radius:999px;background:linear-gradient(90deg,#2563eb 0%,#0ea5e9 100%);transition:width .25s ease;}
.ds-onboarding-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.ds-onboarding-step{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:14px 12px;min-height:112px;border-radius:16px;border:1px solid #e5e7eb;background:#f8fafc;color:#475569;font-weight:600;cursor:pointer;text-align:center;transition:.2s ease;overflow:hidden;}
.ds-onboarding-step-num{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:999px;background:#ffffff;border:1px solid #dbe3ef;color:currentColor;font-size:1.05rem;line-height:1;font-weight:800;flex:0 0 auto;}
.ds-onboarding-step-label{display:block;font-size:clamp(.9rem,1.25vw,1.02rem);line-height:1.15;white-space:normal;word-break:keep-all;overflow-wrap:normal;text-wrap:pretty;max-width:10ch;}
.ds-onboarding-step.is-active{border-color:#bfdbfe;background:#eff6ff;color:#0f172a;box-shadow:inset 0 0 0 1px #bfdbfe;}
.ds-onboarding-step.is-complete{border-color:#bbf7d0;background:#f0fdf4;color:#166534;}
.ds-onboarding-grid{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(260px,.72fr);gap:22px;align-items:start;}
.ds-onboarding-card{padding:0;overflow:hidden;}
.ds-onboarding-card-head{padding:28px 30px 12px;border-bottom:1px solid #eef2f7;}
.ds-onboarding-card-head h3{margin:0 0 6px;font-size:1.35rem;color:#0f172a;}
.ds-onboarding-card-head p{margin:0;color:#64748b;}
.ds-onboarding-step-panel{display:none;padding:26px 30px 10px;}
.ds-onboarding-step-panel.is-active{display:block;}
.ds-onboarding-fields{display:grid;gap:18px;}
.ds-onboarding-logo-card{display:grid;gap:16px;padding:18px;border:1px dashed #cbd5e1;border-radius:18px;background:#f8fafc;}
.ds-onboarding-logo-actions{display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
.ds-onboarding-choice-grid{display:grid;gap:12px;}
.ds-onboarding-choice{position:relative;display:grid;gap:5px;padding:18px 18px 18px 46px;border:1px solid #e5e7eb;border-radius:18px;background:#fff;cursor:pointer;transition:.2s ease;}
.ds-onboarding-choice input{position:absolute;left:18px;top:20px;}
.ds-onboarding-choice.is-selected{border-color:#bfdbfe;background:#eff6ff;box-shadow:inset 0 0 0 1px #bfdbfe;}
.ds-onboarding-choice-title{font-weight:700;color:#0f172a;}
.ds-onboarding-choice-copy{color:#64748b;font-size:.92rem;line-height:1.5;}
.ds-onboarding-summary{display:grid;gap:10px;margin-top:6px;}
.ds-onboarding-summary-item{padding:14px 16px;border-radius:16px;background:#f8fafc;border:1px solid #e5e7eb;display:grid;gap:4px;}
.ds-onboarding-summary-item strong{color:#0f172a;}
.ds-onboarding-summary-item span{color:#64748b;font-size:.92rem;}
.ds-onboarding-status{min-height:24px;margin:0 30px 8px;color:#64748b;font-size:.92rem;}
.ds-onboarding-status.is-pending{color:#475569;}
.ds-onboarding-status.is-success{color:#047857;}
.ds-onboarding-status.is-error{color:#dc2626;}
.ds-onboarding-actions{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:0 30px 30px;}
.ds-onboarding-actions-right{display:flex;gap:10px;align-items:center;justify-content:flex-end;}
.ds-onboarding-side{display:grid;gap:16px;}
.ds-onboarding-side-card{padding:22px;}
.ds-onboarding-side-card h4{margin:0 0 10px;color:#0f172a;font-size:1rem;}
.ds-onboarding-side-card p{margin:0;color:#64748b;line-height:1.65;}
@media (max-width: 980px){
  .ds-onboarding-hero,.ds-onboarding-grid{grid-template-columns:1fr;}
}
@media (max-width: 540px){
  .ds-onboarding-steps{grid-template-columns:1fr;}
  .ds-onboarding-step{min-height:88px;}
  .ds-onboarding-step-label{max-width:none;}
}

@media (max-width: 680px){
  .ds-onboarding-hero-copy,.ds-onboarding-progress,.ds-onboarding-card-head,.ds-onboarding-step-panel,.ds-onboarding-actions,.ds-onboarding-side-card{padding-left:18px;padding-right:18px;}
  .ds-onboarding-steps{grid-template-columns:repeat(3,minmax(0,1fr));}
  .ds-onboarding-step{justify-content:flex-start;}
  .ds-onboarding-actions{flex-direction:column;align-items:stretch;}
  .ds-onboarding-actions-right{width:100%;display:grid;grid-template-columns:1fr;}
}




/* Finance UI polish v1 */
.ds-pupil-hero,
.ds-pupil-finance-card,
.ds-buy-lessons-card{
  max-width: 1400px !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box;
}
.ds-pupil-finance-card .ds-pupil-finance-grid{
  max-width: 980px;
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap:16px;
}
@media (max-width: 980px){
  .ds-pupil-finance-card .ds-pupil-finance-grid{
    grid-template-columns: 1fr !important;
  }
}
.ds-manager-grid{
  grid-template-columns: minmax(0,1fr) 300px !important;
}
.ds-manager-main,
.ds-manager-main .ds-card,
.ds-manager-table-wrap{
  min-width: 0 !important;
}
.ds-manager-table{
  width: 100% !important;
  table-layout: auto !important;
}
.ds-manager-table th,
.ds-manager-table td{
  white-space: normal;
}
.ds-manager-table th[style*="width:120px"],
.ds-manager-table td[style*="width:120px"]{
  width:auto !important;
  white-space:nowrap;
}
.ds-instructor-payment-grid{
  display:grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap:12px;
  align-items:end;
}
@media (max-width: 980px){
  .ds-instructor-payment-grid{
    grid-template-columns:1fr 1fr !important;
  }
}
@media (max-width: 640px){
  .ds-instructor-payment-grid{
    grid-template-columns:1fr !important;
  }
}


/* Finance UI polish v3 fixes */
.ds-pupil-wrap .ds-pupil-hero,
.ds-pupil-wrap .ds-pupil-finance-card,
.ds-pupil-wrap .ds-buy-lessons-card{
  max-width: 680px !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.ds-pupil-wrap .ds-pupil-finance-card .ds-pupil-finance-grid{
  max-width: none !important;
  display: grid !important;
  grid-template-columns: 1fr !important;
  gap: 16px !important;
}
@media (min-width: 900px){
  .ds-pupil-wrap .ds-pupil-finance-card .ds-pupil-finance-grid{
    grid-template-columns: repeat(3,minmax(0,1fr)) !important;
  }
}
.ds-manager-wrap .ds-manager-grid{
  display:block !important;
  grid-template-columns: 1fr !important;
}
.ds-manager-wrap .ds-manager-main,
.ds-manager-wrap .ds-manager-sidebar{
  display:block !important;
  width:100% !important;
}
.ds-manager-wrap .ds-manager-main .ds-card,
.ds-manager-wrap .ds-manager-sidebar .ds-card,
.ds-manager-wrap .ds-manager-table-wrap{
  width:100% !important;
  max-width:none !important;
}



/* Finance UI + manual payments v4 real fixes */
.ds-pupil-wrap .ds-pupil-hero,
.ds-pupil-wrap .ds-pupil-finance-card {
  max-width: 680px !important;
  width: calc(100% - 28px) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.ds-pupil-wrap .ds-pupil-hero {
  margin-top: 16px !important;
  margin-bottom: 16px !important;
}
.ds-pupil-wrap .ds-pupil-finance-card {
  margin-top: 16px !important;
  margin-bottom: 0 !important;
}
@media (max-width: 680px) {
  .ds-pupil-wrap .ds-pupil-hero,
  .ds-pupil-wrap .ds-pupil-finance-card {
    width: calc(100% - 20px) !important;
    max-width: none !important;
  }
}

/* Force manager content back into one centered column */
.ds-manager-wrap .ds-manager-grid {
  display: grid !important;
  grid-template-columns: minmax(0,1fr) !important;
  max-width: 980px !important;
  margin: 0 auto !important;
  gap: 16px !important;
}
.ds-manager-wrap .ds-manager-main,
.ds-manager-wrap .ds-manager-sidebar {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}
.ds-manager-wrap .ds-manager-main .ds-card,
.ds-manager-wrap .ds-manager-sidebar .ds-card,
.ds-manager-wrap .ds-manager-table-wrap {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
.ds-manager-wrap .ds-manager-table {
  width: 100% !important;
  table-layout: auto !important;
}

/* Instructor manual payment card grid */
.ds-instructor-payment-grid {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr)) !important;
  gap: 12px !important;
  align-items: end !important;
}
@media (max-width: 900px) {
  .ds-instructor-payment-grid { grid-template-columns: 1fr 1fr !important; }
}
@media (max-width: 640px) {
  .ds-instructor-payment-grid { grid-template-columns: 1fr !important; }
}


/* ════════════════════════════════════════════════════════════
   PUPIL DASHBOARD LAYOUT REFINEMENT v1
   Unify pupil card widths and refine hero presentation
   ════════════════════════════════════════════════════════════ */
.ds-pupil-wrap{
  --ds-pupil-content-max: 920px;
}
.ds-pupil-wrap .ds-pupil-grid,
.ds-pupil-wrap .ds-pupil-lower-grid,
.ds-pupil-wrap .ds-pupil-hero,
.ds-pupil-wrap .ds-pupil-finance-card,
.ds-pupil-wrap .ds-buy-lessons-card{
  width: min(calc(100% - 32px), var(--ds-pupil-content-max)) !important;
  max-width: var(--ds-pupil-content-max) !important;
  margin-left: auto !important;
  margin-right: auto !important;
  box-sizing: border-box !important;
}
.ds-pupil-wrap .ds-pupil-grid,
.ds-pupil-wrap .ds-pupil-lower-grid{
  padding: 0 0 12px !important;
}
.ds-pupil-wrap .ds-card{
  max-width: 100% !important;
}
.ds-pupil-wrap .ds-pupil-hero{
  display: grid !important;
  grid-template-columns: minmax(0, 1.5fr) minmax(320px, 1fr) !important;
  align-items: center !important;
  gap: 22px !important;
  padding: 24px 26px !important;
  margin-top: 16px !important;
  margin-bottom: 18px !important;
}
.ds-pupil-wrap .ds-hero-identity{
  min-width: 0 !important;
  gap: 16px !important;
}
.ds-pupil-wrap .ds-hero-identity-text{
  min-width: 0 !important;
}
.ds-pupil-wrap .ds-hero-name{
  font-size: clamp(1.65rem, 2.7vw, 2.4rem) !important;
  line-height: 1.05 !important;
  letter-spacing: -.03em !important;
  white-space: normal !important;
  overflow-wrap: anywhere !important;
  margin-bottom: 6px !important;
}
.ds-pupil-wrap .ds-hero-meta{
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 6px 10px !important;
  font-size: .95rem !important;
  color: rgba(255,255,255,.78) !important;
}
.ds-pupil-wrap .ds-hero-badge{
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 28px !important;
  padding: 4px 12px !important;
  border-radius: 999px !important;
  background: rgba(12,30,61,.48) !important;
  border: 1px solid rgba(245,158,11,.42) !important;
  color: #f7c15a !important;
  font-size: .7rem !important;
  font-weight: 700 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}
.ds-pupil-wrap .ds-hero-meta-sep{
  color: rgba(255,255,255,.35) !important;
}
.ds-pupil-wrap .ds-hero-stats{
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0,1fr)) !important;
  gap: 10px !important;
}
.ds-pupil-wrap .ds-stat-card{
  min-width: 0 !important;
  padding: 12px 10px !important;
  border-radius: 16px !important;
  background: rgba(255,255,255,.12) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  box-shadow: none !important;
  backdrop-filter: blur(6px);
}
.ds-pupil-wrap .ds-stat-value{
  color: #ffffff !important;
  font-size: 1.45rem !important;
  line-height: 1 !important;
}
.ds-pupil-wrap .ds-stat-label{
  color: rgba(255,255,255,.74) !important;
  font-size: .72rem !important;
  line-height: 1.25 !important;
  margin-top: 8px !important;
  white-space: normal !important;
  text-overflow: initial !important;
  overflow: visible !important;
  word-break: normal !important;
  overflow-wrap: anywhere !important;
}
.ds-pupil-wrap .ds-stat-progress{
  min-width: 0 !important;
}
.ds-pupil-wrap .ds-stat-progress-bar-track{
  background: rgba(255,255,255,.22) !important;
}
.ds-pupil-wrap .ds-pupil-finance-card{
  margin-top: 0 !important;
}
@media (max-width: 900px){
  .ds-pupil-wrap{
    --ds-pupil-content-max: 760px;
  }
  .ds-pupil-wrap .ds-pupil-hero{
    grid-template-columns: 1fr !important;
  }
  .ds-pupil-wrap .ds-hero-stats{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}
@media (max-width: 640px){
  .ds-pupil-wrap{
    --ds-pupil-content-max: none;
  }
  .ds-pupil-wrap .ds-pupil-grid,
  .ds-pupil-wrap .ds-pupil-lower-grid,
  .ds-pupil-wrap .ds-pupil-hero,
  .ds-pupil-wrap .ds-pupil-finance-card,
  .ds-pupil-wrap .ds-buy-lessons-card{
    width: calc(100% - 20px) !important;
  }
  .ds-pupil-wrap .ds-pupil-hero{
    padding: 18px 18px 16px !important;
    gap: 16px !important;
  }
  .ds-pupil-wrap .ds-hero-identity{
    align-items: flex-start !important;
  }
  .ds-pupil-wrap .ds-hero-avatar-label{
    width: 56px !important;
    height: 56px !important;
  }
  .ds-pupil-wrap .ds-hero-name{
    font-size: 1.8rem !important;
  }
  .ds-pupil-wrap .ds-hero-meta{
    font-size: .86rem !important;
  }
  .ds-pupil-wrap .ds-hero-stats{
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
  }
}



/* PUPIL HERO STATS REFINEMENT v2 */
.ds-pupil-wrap .ds-pupil-hero{
  grid-template-columns: minmax(0,1.2fr) minmax(420px,0.9fr) !important;
}
.ds-pupil-wrap .ds-hero-stats{
  grid-template-columns: repeat(2, minmax(120px,1fr)) !important;
  gap: 12px !important;
  align-content: start !important;
}
.ds-pupil-wrap .ds-stat-card{
  min-height: 108px !important;
  display:flex !important;
  flex-direction:column !important;
  justify-content:center !important;
}
.ds-pupil-wrap .ds-stat-label{
  font-size: .78rem !important;
  line-height: 1.2 !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  white-space: normal !important;
  max-width: 10ch !important;
  margin-left:auto !important;
  margin-right:auto !important;
}
@media (max-width: 1100px){
  .ds-pupil-wrap .ds-pupil-hero{
    grid-template-columns: 1fr !important;
  }
  .ds-pupil-wrap .ds-hero-stats{
    grid-template-columns: repeat(2, minmax(120px,1fr)) !important;
  }
}