/* ============================================================
   Aneesa Frontend — Mobile-First, Child-Friendly Design
   ============================================================ */

:root {
  --radius: 18px;
  --radius-sm: 10px;
  --shadow: 0 2px 12px rgba(0,0,0,0.08);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --transition: 0.3s ease;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1);
}

/* ================================================================
   Salsabil Design System — CSS Custom Properties
   Mobile-first, gender-neutral, professional-warm
   ================================================================ */

:root {
  /* ── Primaries ── */
  --s-primary-deep:     #0F2A3F;
  --s-primary-accent:   #2C7A7B;
  --s-secondary:        #E8C87A;

  /* ── Surfaces ── */
  --s-surface-light:    #F0F4F8;
  --s-surface-dark:     #121A24;

  /* ── Typography ── */
  --s-text-primary:     #1E293B;
  --s-text-on-dark:     #CBD5E1;

  /* ── Borders & Muted ── */
  --s-border-muted:     #CBD5E1;

  /* ── Semantic ── */
  --s-success:          #34D399;
  --s-alert:            #F59E0B;

  /* ── Typography Scale ── */
  --s-font:             'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --s-font-mono:        'JetBrains Mono', 'SF Mono', 'Fira Code', monospace;

  --s-text-xs:          0.65rem;   /* 10.4px @ 16px base */
  --s-text-sm:          0.75rem;   /* 12px */
  --s-text-base:        0.875rem;  /* 14px — body text */
  --s-text-md:          1rem;      /* 16px — lead / buttons */
  --s-text-lg:          1.125rem;  /* 18px — subheadings */
  --s-text-xl:          1.35rem;   /* 21.6px — headings */
  --s-text-2xl:         1.6rem;    /* 25.6px — hero title */
  --s-text-3xl:         2rem;      /* 32px — large hero */

  /* ── Line Heights ── */
  --s-leading-tight:    1.2;
  --s-leading-normal:   1.5;
  --s-leading-relaxed:  1.65;

  /* ── Font Weights ── */
  --s-weight-normal:    400;
  --s-weight-medium:    500;
  --s-weight-semibold:  600;
  --s-weight-bold:      700;

  /* ── Spacing Scale (4px base) ── */
  --s-space-1:          4px;
  --s-space-2:          8px;
  --s-space-3:          12px;
  --s-space-4:          16px;
  --s-space-5:          20px;
  --s-space-6:          24px;
  --s-space-8:          32px;
  --s-space-10:         40px;
  --s-space-12:         48px;
  --s-space-16:         64px;

  /* ── Border Radii ── */
  --s-radius-sm:        6px;
  --s-radius-md:        10px;
  --s-radius-lg:        14px;
  --s-radius-xl:        20px;
  --s-radius-full:      9999px;

  /* ── Shadows ── */
  --s-shadow-xs:        0 1px 2px rgba(15, 42, 63, 0.04);
  --s-shadow-sm:        0 1px 3px rgba(15, 42, 63, 0.06), 0 1px 2px rgba(15, 42, 63, 0.04);
  --s-shadow-md:        0 4px 6px rgba(15, 42, 63, 0.06), 0 2px 4px rgba(15, 42, 63, 0.04);
  --s-shadow-lg:        0 10px 15px rgba(15, 42, 63, 0.08), 0 4px 6px rgba(15, 42, 63, 0.04);
  --s-shadow-xl:        0 20px 25px rgba(15, 42, 63, 0.10), 0 10px 10px rgba(15, 42, 63, 0.04);

  /* ── Transitions ── */
  --s-transition-fast:  150ms ease;
  --s-transition-base:  250ms ease;
  --s-transition-slow:  350ms ease;
}

/* ----- Default (pre-login) — Salsabil neutral ----- */
:root, body:not(.theme-girl):not(.theme-boy):not(.theme-parent):not(.theme-parent-dark) {
  --primary: var(--s-primary-accent);
  --primary-light: #E5F0F0;
  --primary-dark: var(--s-primary-deep);
  --accent: #5B8A8C;
  --bg: var(--s-surface-light);
  --card: #FFFFFF;
  --text: var(--s-text-primary);
  --text-muted: #64748B;
  --bubble-ai: #E8F0F0;
  --bubble-child: var(--s-primary-accent);
  --bubble-child-text: #fff;
  --header-bg: var(--s-primary-deep);
  --header-text: #fff;
  --btn-primary-bg: var(--s-primary-accent);
  --btn-primary-text: #fff;
  --input-border: #CBD5E1;
  --input-focus: var(--s-primary-accent);
}

/* ----- Child Theme — Girl (Salsabil: navy + warm rose) ----- */
.theme-girl {
  --primary: var(--s-primary-accent);
  --primary-light: #F3E8E4;
  --primary-dark: var(--s-primary-deep);
  --accent: #C2707E;
  --bg: #FDF9F6;
  --card: #FFFFFF;
  --text: var(--s-text-primary);
  --text-muted: #8A6B6B;
  --bubble-ai: #F6ECE7;
  --bubble-child: var(--s-primary-accent);
  --bubble-child-text: #fff;
  --header-bg: var(--s-primary-deep);
  --header-text: #fff;
  --btn-primary-bg: var(--s-primary-accent);
  --btn-primary-text: #fff;
  --input-border: #D9C7C3;
  --input-focus: var(--s-primary-accent);
}

/* ----- Child Theme — Boy (Salsabil: navy + teal) ----- */
.theme-boy {
  --primary: var(--s-primary-accent);
  --primary-light: #E5F0F0;
  --primary-dark: var(--s-primary-deep);
  --accent: #5B8A8C;
  --bg: #F5F8F8;
  --card: #FFFFFF;
  --text: var(--s-text-primary);
  --text-muted: #5F7A7A;
  --bubble-ai: #E8F0F0;
  --bubble-child: var(--s-primary-accent);
  --bubble-child-text: #fff;
  --header-bg: var(--s-primary-deep);
  --header-text: #fff;
  --btn-primary-bg: var(--s-primary-accent);
  --btn-primary-text: #fff;
  --input-border: #C9D6D6;
  --input-focus: var(--s-primary-accent);
}

/* ----- Base ----- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 18px; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  min-height: 100dvh;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}
body.theme-girl, body.theme-boy { --font: 'Nunito Sans', 'Inter', sans-serif; }

/* ----- Screens ----- */
#app { height: 100dvh; display: flex; flex-direction: column; }
.screen { display: none; flex-direction: column; height: 100dvh; }
.screen.active, .screen.hidden { display: flex; }
.screen.hidden { display: none; }

/* ================================================================
   LOGIN SCREEN
   ================================================================ */
#login-screen {
  justify-content: center;
  align-items: center;
  padding: 24px;
  background: linear-gradient(135deg, var(--bg) 0%, var(--primary-light) 100%);
}
.login-card {
  background: var(--card);
  border-radius: 24px;
  padding: 32px 24px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--shadow);
  text-align: center;
}
.login-brand { width: min(100%, 220px); height: 78px; margin: 0 auto 18px; overflow: hidden; border-radius: 18px; background: #fff; }
.login-brand img { width: 100%; height: 100%; object-fit: contain; }
#login-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--primary);
}
.login-subtitle {
  font-size: 0.9rem;
  color: var(--text-muted);
  margin-bottom: 24px;
}
.field {
  margin-bottom: 16px;
  text-align: left;
}
.field label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  margin-bottom: 4px;
  color: var(--text);
}
.field input {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--input-border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
  transition: border var(--transition);
}
.field input:focus {
  border-color: var(--input-focus);
}
.error {
  color: #D32F2F;
  font-size: 0.8rem;
  margin: 8px 0;
}
.hidden { display: none; }

.btn-primary {
  width: 100%;
  padding: 16px;
  border: none;
  border-radius: var(--radius);
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform var(--transition), box-shadow var(--transition);
  margin-top: 8px;
}
.btn-primary:active { transform: scale(0.97); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }

/* ================================================================
   CHAT HEADER
   ================================================================ */
header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--header-bg);
  color: var(--header-text);
  flex-shrink: 0;
}
.header-left { display: flex; align-items: center; gap: 10px; }
.header-logo { display: block; width: 142px; height: 42px; overflow: hidden; border-radius: 10px; background: #fff; }
.header-logo img { width: 100%; height: 100%; object-fit: contain; }
.companion-avatar { font-size: 36px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }
header h2 { font-size: 1.1rem; font-weight: 700; }
.status {
  font-size: 0.65rem;
  opacity: 0.8;
}
.status.online::before {
  content: '';
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--s-success, #69F0AE);
  border-radius: 50%;
  margin-right: 4px;
  vertical-align: middle;
}
.header-right { display: flex; gap: 6px; }
.child-learning-nav { position: relative; }
.child-learning-nav-badge, .child-mobile-learning-badge { display: inline-grid; min-width: 17px; height: 17px; place-items: center; padding: 0 4px; border-radius: 999px; background: #d95f72; color: #fff; font-size: .68rem; font-weight: 800; line-height: 1; }
.child-learning-nav-badge { position: absolute; top: -5px; right: -6px; }
.child-mobile-learning-badge { margin-left: auto; }
.child-mobile-menu-toggle, .child-mobile-menu, .child-mobile-menu-overlay { display: none; }
.icon-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 50%;
  width: 40px; height: 40px;
  font-size: 1.3rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 160ms var(--ease-out), transform 140ms var(--ease-out);
}
.icon-btn:active { background: rgba(255,255,255,0.3); transform: scale(0.97); }
.icon-btn-alert {
  color: #EF4444;
  font-size: 1.1rem;
}
.icon-btn svg, .btn-send svg, .history-session-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }
.companion-avatar { display: grid; width: 40px; height: 40px; place-items: center; border: 2px solid rgba(232, 200, 122, .75); border-radius: 14px; background: var(--primary-accent, #2C7A7B); color: #fff; font-size: 19px; font-weight: 800; }



/* ================================================================
   CHAT MESSAGES
   ================================================================ */
.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  scroll-behavior: smooth;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary-light) 42%, var(--bg)), var(--bg) 46%);
}
.child-learning-discovery { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 12px 16px 0; padding: 16px; border: 1px solid color-mix(in srgb, var(--primary) 30%, var(--input-border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--primary-light) 74%, var(--card)), var(--card)); box-shadow: 0 4px 14px rgba(15, 42, 63, .08); }
.child-learning-discovery[hidden] { display: none; }
.child-learning-discovery-kicker { display: block; margin-bottom: 5px; color: var(--primary); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.child-learning-discovery h3, .child-learning-discovery p { margin: 0; }
.child-learning-discovery h3 { font-size: 1rem; color: var(--text); }
.child-learning-discovery p { margin-top: 3px; color: var(--text-muted); font-size: .9rem; }
.child-learning-discovery strong { display: block; margin-top: 8px; color: var(--text); font-size: .85rem; }
.child-learning-discovery .btn-primary { flex: 0 0 auto; }
.child-academic-progress-list { display: grid; gap: 7px; margin: 12px 0 0; padding: 0; list-style: none; }
.child-academic-progress-list li { display: grid; gap: 2px; padding: 9px 10px; border-radius: 10px; background: rgba(255,255,255,.72); color: var(--text); font-size: .84rem; }
.child-academic-progress-list span { color: var(--text-muted); }
.academic-progress-history { display: grid; gap: 9px; margin: 12px 0 0; padding: 0; list-style: none; }
.academic-progress-history li { display: grid; gap: 3px; padding: 10px; border-left: 3px solid var(--primary); background: var(--primary-light); color: var(--text); font-size: .9rem; }
.academic-progress-history p { margin: 0; }
.academic-progress-history time, .academic-progress-history span { color: var(--text-muted); font-size: .8rem; }
.message {
  max-width: 80%;
  padding: 12px 16px;
  border-radius: 18px;
  box-shadow: 0 2px 6px rgba(15, 42, 63, .06);
  font-size: 0.95rem;
  line-height: 1.5;
  animation: msgIn 0.25s ease-out;
  word-wrap: break-word;
}
@keyframes msgIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.message.ai {
  align-self: flex-start;
  background: var(--bubble-ai);
  color: var(--text);
  border-bottom-left-radius: 4px;
}
.message.child {
  align-self: flex-end;
  background: var(--bubble-child);
  color: var(--bubble-child-text);
  border-bottom-right-radius: 4px;
}
.message-time {
  font-size: 0.6rem;
  opacity: 0.6;
  margin-top: 4px;
  text-align: right;
}
.message.child .message-time { color: rgba(255,255,255,0.7); }

/* ================================================================
   RICH MARKDOWN (AI messages)
   ================================================================ */
.message.rich { padding: 6px 8px 8px 8px; }
.md-body { overflow-wrap: break-word; }
.md-body > :first-child { margin-top: 0; }
.md-body > :last-child { margin-bottom: 0; }
.md-body p { margin: 0.25em 0 0.6em; }
.md-body h1, .md-body h2, .md-body h3, .md-body h4 {
  margin: 0.7em 0 0.35em;
  font-weight: 700;
  line-height: 1.3;
  color: var(--text);
}
.md-body h1 { font-size: 1.2rem; }
.md-body h2 { font-size: 1.1rem; }
.md-body h3 { font-size: 1.02rem; }
.md-body ul, .md-body ol { margin: 0.3em 0 0.6em; padding-left: 1.4em; }
.md-body li { margin: 0.15em 0; }
.md-body a { color: var(--accent); text-decoration: underline; }
.md-body blockquote {
  margin: 0.5em 0;
  padding: 0.3em 0.8em;
  border-left: 3px solid var(--accent);
  color: inherit;
  opacity: 0.9;
}
.md-body table { border-collapse: collapse; margin: 0.5em 0; width: 100%; }
.md-body th, .md-body td { border: 1px solid var(--border, rgba(127,127,127,0.3)); padding: 5px 8px; text-align: left; }
.md-body th { background: rgba(127,127,127,0.1); }
.md-body hr { border: none; border-top: 1px solid var(--border, rgba(127,127,127,0.3)); margin: 0.6em 0; }
/* inline code in prose */
.md-body :not(pre) > code {
  background: rgba(127,127,127,0.18);
  border-radius: 4px;
  padding: 1px 5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.88em;
  color: #c7404a;
}
/* code block wrapper */
.code-block-wrap { margin: 0.5em 0; }
.code-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 0.5em;
  background: var(--card, #ffffff);
  border: 1px solid var(--border, rgba(127,127,127,0.3));
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 4px 8px;
  font-size: 0.72rem;
  line-height: 1;
}
.code-lang { font-weight: 700; letter-spacing: 0.5px; opacity: 0.75; text-transform: uppercase; }
.code-copy, .code-run {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border, rgba(127,127,127,0.3));
  border-radius: 5px;
  padding: 3px 9px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
}
.code-copy { margin-left: auto; }
.code-run { margin-left: 0; }
.code-copy:hover, .code-run:hover { background: rgba(127,127,127,0.12); }
/* code block body (marked emits <pre><code>) */
.message.rich pre {
  margin: 0 0 0.5em;
  border-radius: 0 0 8px 8px;
  overflow-x: auto;
  max-width: 100%;
}
.message.rich pre code.hljs {
  background: var(--card, #ffffff);
  border: 1px solid var(--border, rgba(127,127,127,0.3));
  border-top: none;
  border-radius: 0 0 8px 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.8rem;
}
.message.rich pre:not(:has(code.hljs)) code { display: block; white-space: pre-wrap; }
/* HTML live preview */
.html-preview {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--border, rgba(127,127,127,0.3));
  border-radius: 0 0 8px 8px;
  margin: 0 0 0.5em;
  background: #fff;
  display: block;
}

/* ================================================================
   CHAT INPUT
   ================================================================ */
.chat-input-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--card);
  border-top: 1px solid var(--input-border);
  flex-shrink: 0;
}
.chat-input-bar input {
  flex: 1;
  padding: 14px 16px;
  border: 2px solid var(--input-border);
  border-radius: 24px;
  font-size: 0.95rem;
  outline: none;
  background: var(--bg);
  color: var(--text);
}
.chat-input-bar input:focus { border-color: var(--input-focus); }
.btn-send {
  width: 50px; height: 50px;
  border: none;
  border-radius: 50%;
  background: var(--btn-primary-bg);
  color: var(--btn-primary-text);
  font-size: 1.4rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 140ms var(--ease-out), opacity 140ms ease;
  flex-shrink: 0;
}
.btn-send:active { transform: scale(0.96); }
.btn-send:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-send svg { width: 22px; height: 22px; }

/* ================================================================
   PROFILE SCREEN
   ================================================================ */
.screen-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: var(--header-bg);
  color: var(--header-text);
  flex-shrink: 0;
}
.profile-content {
  flex: 1;
  overflow-y: auto;
  padding: 24px 16px;
}
.profile-card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
  margin-bottom: 16px;
}
.profile-card h3 {
  font-size: 1rem;
  color: var(--primary);
  margin-bottom: 12px;
}
.profile-field {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--bg);
  font-size: 0.85rem;
}
.profile-field:last-child { border: none; }
.profile-field .label { color: var(--text-muted); }
.profile-field .value { font-weight: 600; }

/* ================================================================
   MODAL (Add Child Form)
   ================================================================ */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.modal.hidden { display: none; }
.modal.closing .modal-overlay {
  animation: salsabilFadeOut 160ms ease-out forwards;
}
.modal.closing .modal-content {
  animation: salsabilSlideDown 160ms ease-out forwards;
}
@keyframes salsabilFadeOut {
  from { opacity: 1; }
  to { opacity: 0; }
}
@keyframes salsabilSlideDown {
  from { transform: translateY(0); opacity: 1; }
  to { transform: translateY(12px); opacity: 0; }
}
.modal-overlay {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: var(--s-overlay, rgba(0,0,0,0.4));
}
.modal-content {
  position: relative;
  background: var(--s-card, var(--card));
  border-radius: var(--s-radius-xl, 24px) var(--s-radius-xl, 24px) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  padding: 0;
  animation: salsabilSlideUp 300ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes salsabilSlideUp {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-space-5, 20px) var(--s-space-5, 20px) 0;
  position: sticky;
  top: 0;
  background: var(--s-card, var(--card));
  z-index: 2;
}
.modal-header h2 {
  font-size: var(--s-text-lg, 1.125rem);
  font-weight: var(--s-weight-semibold, 600);
  color: var(--s-text, var(--text));
}
.modal-body { padding: var(--s-space-4, 16px) var(--s-space-5, 20px) var(--s-space-6, 24px); }
.form-row {
  display: flex;
  gap: 12px;
}
.form-row .field { margin-bottom: 12px; }
.modal-body .field { margin-bottom: 12px; }
.field-grow-1 { flex: 1; }
.field-grow-2 { flex: 2; }
.field-hint {
  color: var(--s-text-muted, var(--text-muted));
  font-size: var(--s-text-xs);
  font-weight: var(--s-weight-normal);
}
.modal-body input:disabled {
  background: var(--s-bg, var(--bg));
  color: var(--s-text-muted, var(--text-muted));
  cursor: not-allowed;
  opacity: 1;
}
.quran-progress-group {
  border: 1px solid var(--s-border, #E5E7EB);
  border-radius: var(--s-radius-md, 8px);
  padding: var(--s-space-4);
}
.quran-progress-group h4 {
  color: var(--s-text, inherit);
  font-size: var(--s-text-sm);
  margin-bottom: var(--s-space-3);
}
.quran-progress-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-2);
}
.quran-progress-fields label {
  color: var(--s-text-muted);
  font-size: var(--s-text-xs);
}
.quran-progress-fields textarea,
.quran-progress-fields select {
  width: 100%;
}
.form-success {
  background: var(--s-mood-positive-bg, #D1FAE5);
  border-radius: var(--s-radius-sm, 6px);
  color: #047857;
  font-size: var(--s-text-sm);
  font-weight: var(--s-weight-medium);
  margin: var(--s-space-2) 0;
  padding: var(--s-space-2) var(--s-space-3);
}
.modal-content-compact { max-width: 400px; }
.modal-content-compact .modal-header h3 { margin: 0; }
.modal-content-compact form { padding: var(--s-space-4) var(--s-space-5) var(--s-space-6); }
.report-intro {
  color: var(--s-text-muted);
  font-size: var(--s-text-sm);
  margin-bottom: var(--s-space-3);
}
#report-reason { width: 100%; }
.report-cancel { margin-left: var(--s-space-2); }
.modal-body select {
  width: 100%;
  padding: 14px 16px;
  border: 2px solid var(--input-border);
  border-radius: var(--radius);
  font-size: 1rem;
  background: var(--bg);
  color: var(--text);
  outline: none;
  appearance: auto;
}
.modal-body select:focus {
  border-color: var(--input-focus);
}

/* Checkbox group for interests/hobbies — Salsabil version */
.checkbox-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 6px;
}
.checkbox-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--s-text-sm, 0.75rem);
  font-weight: var(--s-weight-medium, 500);
  padding: 8px 14px;
  border: 2px solid var(--s-border, var(--input-border));
  border-radius: var(--s-radius-full, 9999px);
  cursor: pointer;
  transition: border-color var(--s-transition-fast, 150ms ease), background-color var(--s-transition-fast, 150ms ease), color var(--s-transition-fast, 150ms ease);
  background: var(--s-input-bg, var(--bg));
  color: var(--s-text, var(--text));
  user-select: none;
}
.checkbox-item:hover {
  border-color: var(--s-accent, var(--accent));
  background: var(--s-accent-light, var(--primary-light));
}
.checkbox-item:has(input:checked) {
  border-color: var(--s-accent, var(--accent));
  background: var(--s-accent-light, var(--primary-light));
  color: var(--s-accent, var(--accent));
  font-weight: var(--s-weight-semibold, 600);
}
.checkbox-item input { display: none; }

/* ================================================================
   PARENT DASHBOARD — Salsabil Design System
   ================================================================ */

/* ── Theme: Light ── */
.theme-parent {
  --s-bg:                var(--s-surface-light);
  --s-card:              #FFFFFF;
  --s-card-hover:        #F8FAFC;
  /* Legacy parent components use these aliases. Keep them opaque. */
  --s-surface:           var(--s-card);
  --s-surface-soft:      #F8FAFC;
  --s-primary:           var(--s-brand);
  --s-primary-accent:    var(--s-accent);

  --s-text:              var(--s-text-primary);
  --s-text-muted:        #64748B;
  --s-text-placeholder:  #94A3B8;

  --s-brand:             var(--s-primary-deep);
  --s-brand-hover:       #1A3F5C;
  --s-brand-light:       #E8EDF2;

  --s-accent:            var(--s-primary-accent);
  --s-accent-hover:      #236464;
  --s-accent-light:      #E5F0F0;

  --s-gold:              var(--s-secondary);
  --s-gold-hover:        #DDBB5E;
  --s-gold-light:        #FDF5E0;

  --s-border:            #E2E8F0;
  --s-border-focus:      var(--s-primary-deep);

  --s-btn-primary-bg:    var(--s-primary-deep);
  --s-btn-primary-text:  #FFFFFF;
  --s-btn-primary-hover: #1A3F5C;

  --s-btn-outline-bg:    transparent;
  --s-btn-outline-text:  var(--s-primary-deep);
  --s-btn-outline-border: var(--s-primary-deep);
  --s-btn-outline-hover: var(--s-brand-light);

  --s-btn-accent-bg:     var(--s-primary-accent);
  --s-btn-accent-text:   #FFFFFF;
  --s-btn-accent-hover:  #236464;

  --s-input-bg:          #FFFFFF;
  --s-input-border:      #CBD5E1;
  --s-input-focus:       var(--s-primary-deep);
  --s-input-text:        var(--s-text-primary);
  --s-input-placeholder: #94A3B8;

  --s-header-bg:         var(--s-primary-deep);
  --s-header-text:       #FFFFFF;

  --s-overlay:           rgba(15, 42, 63, 0.5);

  --s-mood-positive:     var(--s-success);
  --s-mood-positive-bg:  #D1FAE5;
  --s-mood-neutral:      var(--s-alert);
  --s-mood-neutral-bg:   #FEF3C7;
  --s-mood-negative:     #EF4444;
  --s-mood-negative-bg:  #FEE2E2;

  --s-card-shadow:       var(--s-shadow-sm);
  --s-card-shadow-hover: var(--s-shadow-lg);

  /* Backward compat for child chat */
  --primary: #1B2A4A;
  --primary-light: #E8ECF1;
  --primary-dark: #0F1A30;
  --accent: #2C5F7C;
  --bg: var(--s-bg);
  --card: var(--s-card);
  --text: var(--s-text);
  --text-muted: var(--s-text-muted);
  --header-bg: var(--s-header-bg);
  --header-text: var(--s-header-text);
  --btn-primary-bg: var(--s-btn-primary-bg);
  --btn-primary-text: var(--s-btn-primary-text);
  --input-border: var(--s-input-border);
  --input-focus: var(--s-input-focus);
  --shadow: var(--s-shadow-sm);
  --radius: var(--s-radius-lg);
  --radius-sm: var(--s-radius-sm);
}

/* ── Theme: Dark ── */
.theme-parent-dark {
  --s-bg:                var(--s-surface-dark);
  --s-card:              #1A2330;
  --s-card-hover:        #1E293B;
  /* Legacy parent components use these aliases. Keep them opaque. */
  --s-surface:           var(--s-card);
  --s-surface-soft:      #1E293B;
  --s-primary:           var(--s-brand);
  --s-primary-accent:    var(--s-accent);

  --s-text:              #E2E8F0;
  --s-text-muted:        #94A3B8;
  --s-text-placeholder:  #64748B;

  --s-brand:             #3B82F6;
  --s-brand-hover:       #60A5FA;
  --s-brand-light:       #1E293B;

  --s-accent:            #38BDF8;
  --s-accent-hover:      #7DD3FC;
  --s-accent-light:      #0F2A3F;

  --s-gold:              var(--s-secondary);
  --s-gold-hover:        #E8C87A;
  --s-gold-light:        #2A2420;

  --s-border:            #2D3748;
  --s-border-focus:      #3B82F6;

  --s-btn-primary-bg:    #3B82F6;
  --s-btn-primary-text:  #FFFFFF;
  --s-btn-primary-hover: #60A5FA;

  --s-btn-outline-bg:    transparent;
  --s-btn-outline-text:  #3B82F6;
  --s-btn-outline-border: #3B82F6;
  --s-btn-outline-hover: rgba(59, 130, 246, 0.1);

  --s-btn-accent-bg:     #38BDF8;
  --s-btn-accent-text:   #0F172A;
  --s-btn-accent-hover:  #7DD3FC;

  --s-input-bg:          #1A2330;
  --s-input-border:      #2D3748;
  --s-input-focus:       #3B82F6;
  --s-input-text:        #E2E8F0;
  --s-input-placeholder: #64748B;

  --s-header-bg:         #0F172A;
  --s-header-text:       #E2E8F0;

  --s-overlay:           rgba(0, 0, 0, 0.6);

  --s-mood-positive:     #34D399;
  --s-mood-positive-bg:  #064E3B;
  --s-mood-neutral:      #FBBF24;
  --s-mood-neutral-bg:   #78350F;
  --s-mood-negative:     #F87171;
  --s-mood-negative-bg:  #7F1D1D;

  --s-card-shadow:       0 1px 3px rgba(0,0,0,0.3);
  --s-card-shadow-hover: 0 10px 15px rgba(0,0,0,0.4);

  /* Backward compat for child chat */
  --primary: #3B82F6;
  --primary-light: #1E293B;
  --primary-dark: #60A5FA;
  --accent: #38BDF8;
  --bg: var(--s-bg);
  --card: var(--s-card);
  --text: var(--s-text);
  --text-muted: var(--s-text-muted);
  --header-bg: var(--s-header-bg);
  --header-text: var(--s-header-text);
  --btn-primary-bg: var(--s-btn-primary-bg);
  --btn-primary-text: var(--s-btn-primary-text);
  --input-border: var(--s-input-border);
  --input-focus: var(--s-input-focus);
  --shadow: var(--s-card-shadow);
  --radius: var(--s-radius-lg);
  --radius-sm: var(--s-radius-sm);
}

/* ── Landing Page ── */
.parent-landing {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--s-bg);
  font-family: var(--s-font);
}

.parent-hero {
  background: var(--s-header-bg);
  color: var(--s-header-text);
  padding: var(--s-space-10) var(--s-space-6) var(--s-space-8);
  text-align: center;
  background-image: linear-gradient(180deg, #0F2A3F 0%, #1A3F5C 100%);
}
.theme-parent-dark .parent-hero {
  background-image: none;
}
.parent-hero h1 {
  font-size: var(--s-text-2xl);
  font-weight: var(--s-weight-bold);
  margin-bottom: 8px;
  color: var(--s-header-text);
}
.parent-hero p {
  font-size: 0.9rem;
  opacity: 0.85;
  max-width: 340px;
  margin: 8px auto 0;
}
@media (min-width: 900px) {
  .parent-hero {
    padding: var(--s-space-12) var(--s-space-6) var(--s-space-10);
  }
  .parent-hero h1 {
    font-size: var(--s-text-3xl);
  }
  .parent-hero p {
    font-size: 1rem;
  }
}

/* ── Tabs ── */
.parent-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--s-border);
  background: var(--s-card);
  position: sticky;
  top: 0;
  z-index: 10;
}
.parent-tab {
  flex: 1;
  padding: 14px 16px;
  text-align: center;
  font-size: var(--s-text-md);
  font-weight: var(--s-weight-semibold);
  cursor: pointer;
  border: none;
  background: transparent;
  color: var(--s-text-muted);
  border-bottom: 3px solid transparent;
  transition: color var(--s-transition-fast), background-color var(--s-transition-fast), border-color var(--s-transition-fast);
}
.parent-tab.active {
  color: var(--s-brand);
  border-bottom-color: var(--s-brand);
}
.parent-tab:hover {
  color: var(--s-text);
  background: var(--s-card-hover);
}

/* ── Form Section ── */
.parent-form-section {
  padding: var(--s-space-6) var(--s-space-4);
  flex: 1;
}

/* ── Form Card ── */
.parent-form-card {
  background: var(--s-card);
  border-radius: var(--s-radius-lg);
  padding: var(--s-space-6);
  box-shadow: var(--s-shadow-md);
  max-width: 420px;
  margin: 0 auto;
}
.parent-form-card h2 {
  font-size: var(--s-text-lg);
  font-weight: var(--s-weight-semibold);
  color: var(--s-text);
  margin-bottom: 4px;
}
.parent-form-card p.sub {
  font-size: var(--s-text-sm);
  color: var(--s-text-muted);
  margin-bottom: var(--s-space-5);
}

.parent-form-card .field {
  margin-bottom: var(--s-space-4);
}
.parent-form-card .field label {
  display: block;
  font-size: var(--s-text-sm);
  font-weight: var(--s-weight-medium);
  color: var(--s-text);
  margin-bottom: 6px;
}
.parent-form-card input[type="text"],
.parent-form-card input[type="email"],
.parent-form-card input[type="password"] {
  width: 100%;
  padding: 12px 14px;
  border: 2px solid var(--s-input-border);
  border-radius: var(--s-radius-sm);
  font-size: var(--s-text-base);
  background: var(--s-input-bg);
  color: var(--s-input-text);
  outline: none;
  transition: border-color var(--s-transition-fast);
}
.parent-form-card input:focus {
  border-color: var(--s-input-focus);
  box-shadow: 0 0 0 3px rgba(15, 42, 63, 0.12);
}
.theme-parent-dark .parent-form-card input:focus {
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

.password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--s-text-muted);
}

/* ── Form Switch Link ── */
.form-switch-link {
  text-align: center;
  margin-top: var(--s-space-4);
  font-size: var(--s-text-sm);
  color: var(--s-text-muted);
}
.form-switch-link a {
  color: var(--s-brand);
  font-weight: var(--s-weight-semibold);
  text-decoration: none;
  cursor: pointer;
}
.form-switch-link a:hover {
  text-decoration: underline;
}

/* ── Form Error ── */
.form-error {
  color: #DC2626;
  font-size: var(--s-text-sm);
  font-weight: var(--s-weight-medium);
  padding: 8px 12px;
  background: #FEF2F2;
  border-radius: var(--s-radius-sm);
  margin: 8px 0;
}

/* ── Parent Dashboard Header ── */
.parent-dash-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background: var(--s-card);
  box-shadow: var(--s-card-shadow);
  position: sticky;
  top: 0;
  z-index: 10;
  border-radius: 0;
}
.parent-dash-header h2 {
  font-size: var(--s-text-md);
  font-weight: var(--s-weight-bold);
  color: var(--s-text);
  margin: 0;
}
.parent-dash-header .p-email {
  font-size: var(--s-text-xs);
  color: var(--s-text-muted);
}

/* ── Outline Button ── */
.parent-btn-outline {
  padding: 8px 16px;
  border: 2px solid var(--s-btn-outline-border);
  border-radius: var(--s-radius-sm);
  background: var(--s-btn-outline-bg);
  color: var(--s-btn-outline-text);
  font-size: 0.85rem;
  font-weight: var(--s-weight-semibold);
  cursor: pointer;
  transition: color var(--s-transition-fast), background-color var(--s-transition-fast), border-color var(--s-transition-fast);
}

.parent-error-state {
  padding: var(--s-space-6);
  border: 1px solid #FECACA;
  border-radius: var(--s-radius-md);
  background: #FEF2F2;
  color: #B91C1C;
  font-size: var(--s-text-sm);
  text-align: center;
}

.parent-detail-toolbar {
  display: flex;
  gap: var(--s-space-2);
  margin-bottom: var(--s-space-4);
}

.parent-detail-edit { margin-left: auto; }

.detail-title {
  margin: 0;
  color: var(--s-text);
  font-size: var(--s-text-lg);
  font-weight: var(--s-weight-semibold);
}

.detail-section-title {
  margin: 0 0 var(--s-space-3);
  color: var(--s-text);
  font-size: var(--s-text-md);
  font-weight: var(--s-weight-semibold);
}

.detail-field-wide { grid-column: 1 / -1; }

.detail-empty {
  color: var(--s-text-muted);
  font-size: var(--s-text-sm);
  line-height: var(--s-leading-normal);
}

.detail-empty-centered { text-align: center; }
.conv-back-btn { margin-bottom: var(--s-space-3); }
.parent-btn-outline:hover {
  background: var(--s-btn-outline-hover);
}

/* ── Child Cards ── */
.children-grid {
  display: flex;
  flex-direction: column;
  gap: var(--s-space-3);
}
@media (min-width: 900px) {
  .children-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--s-space-4);
  }
  .btn-add-child {
    grid-column: 1 / -1;
  }
}

/* Layout base for child cards (visual treatment lives with the Salsabil block below) */
.child-card {
  background: var(--s-card);
  border-radius: var(--s-radius-md);
  padding: var(--s-space-4);
  box-shadow: var(--s-card-shadow);
  display: flex;
  align-items: flex-start;
  gap: var(--s-space-4);
  cursor: pointer;
  transition: box-shadow var(--s-transition-base), transform var(--s-transition-base);
  position: relative;
  overflow: hidden;
}

/* Avatar circle */
.child-avatar {
  width: 48px;
  height: 48px;
  border-radius: var(--s-radius-full);
  background: var(--s-brand);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: var(--s-weight-bold);
  flex-shrink: 0;
}
.child-card:nth-child(6n+1) .child-avatar { background: #0F2A3F; }
.child-card:nth-child(6n+2) .child-avatar { background: #2C7A7B; }
.child-card:nth-child(6n+3) .child-avatar { background: #5B6ABF; }
.child-card:nth-child(6n+4) .child-avatar { background: #8B5CF6; }
.child-card:nth-child(6n+5) .child-avatar { background: #BE6A4D; }
.child-card:nth-child(6n+6) .child-avatar { background: #2C7A7B; }

.child-card-info {
  flex: 1;
  min-width: 0;
}
.child-card-info h3 {
  font-size: var(--s-text-base);
  font-weight: var(--s-weight-semibold);
  color: var(--s-text);
  margin: 0 0 2px 0;
}
.child-card-meta {
  font-size: var(--s-text-xs);
  color: var(--s-text-muted);
  line-height: 1.5;
}
.child-card-mood {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--s-text-xs);
  font-weight: var(--s-weight-medium);
  margin-top: 4px;
  padding: 2px 8px;
  border-radius: var(--s-radius-full);
}
.child-card-mood.positive {
  background: var(--s-mood-positive-bg);
  color: #059669;
}
.child-card-mood.neutral {
  background: var(--s-mood-neutral-bg);
  color: #D97706;
}
.child-card-mood.negative {
  background: var(--s-mood-negative-bg);
  color: #DC2626;
}

/* ── Empty state ── */
.children-empty-state {
  text-align: center;
  padding: var(--s-space-10) var(--s-space-6);
  color: var(--s-text-muted);
}
.children-empty-state .icon {
  font-size: 3rem;
  margin-bottom: var(--s-space-3);
}
.children-empty-state p {
  font-size: var(--s-text-base);
  max-width: 260px;
  margin: 0 auto;
  line-height: 1.5;
}
.parent-empty-state {
  text-align: center;
  padding: 40px 24px;
  color: var(--s-text-muted);
}
.parent-empty-state .icon { font-size: 3rem; margin-bottom: 12px; }
.parent-empty-state p { font-size: 0.9rem; }

/* ── Add Child Button ── */
.btn-add-child {
  width: 100%;
  padding: 14px;
  border: 2px dashed var(--s-accent);
  border-radius: var(--s-radius-md);
  background: transparent;
  color: var(--s-accent);
  font-size: var(--s-text-md);
  font-weight: var(--s-weight-semibold);
  cursor: pointer;
  transition: border-color var(--s-transition-fast), background-color var(--s-transition-fast), transform var(--s-transition-fast);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-bottom: var(--s-space-3);
}
.btn-add-child:hover {
  background: var(--s-accent-light);
  border-style: solid;
}
.btn-add-child:active {
  transform: scale(0.98);
}

/* ── Theme Toggle ── */
.theme-toggle-form {
  text-align: center;
  padding: 24px;
}
.theme-toggle-form h3 { font-size: 1.1rem; margin-bottom: 16px; }
.theme-options {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-bottom: 16px;
}
.theme-opt {
  padding: 16px 24px;
  border: 2px solid var(--s-border);
  border-radius: var(--s-radius-md);
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: var(--s-weight-semibold);
  transition: border-color var(--s-transition-fast), background-color var(--s-transition-fast), color var(--s-transition-fast), box-shadow var(--s-transition-fast);
  background: var(--s-card);
  color: var(--s-text);
  min-width: 120px;
}
.theme-opt:hover {
  border-color: var(--s-accent);
}
.theme-opt.selected {
  border-color: var(--s-brand);
  background: var(--s-brand-light);
  color: var(--s-brand);
}

/* ================================================================
   CHILD DETAIL VIEW — Salsabil
   ================================================================ */

/* ── Detail Card ── */
.detail-card {
  background: var(--s-card);
  border-radius: var(--s-radius-lg);
  padding: var(--s-space-5);
  box-shadow: var(--s-card-shadow);
  margin-bottom: var(--s-space-4);
}
.detail-card-header {
  display: flex;
  align-items: center;
  gap: var(--s-space-4);
  margin-bottom: var(--s-space-4);
}
.detail-card-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-space-2) var(--s-space-4);
}
@media (max-width: 374px) {
  .detail-card-body {
    grid-template-columns: 1fr;
  }
}

.detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.detail-field .label {
  font-size: var(--s-text-xs);
  color: var(--s-text-muted);
  font-weight: var(--s-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.detail-field .value {
  font-size: var(--s-text-base);
  color: var(--s-text);
  font-weight: var(--s-weight-medium);
}

/* ── Mood Pill ── */
.mood-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 14px;
  border-radius: var(--s-radius-full);
  font-size: var(--s-text-xs);
  font-weight: var(--s-weight-semibold);
}
.mood-pill.positive {
  background: var(--s-mood-positive-bg);
  color: #059669;
}
.mood-pill.positive::before {
  content: '😊';
}
.mood-pill.neutral {
  background: var(--s-mood-neutral-bg);
  color: #D97706;
}
.mood-pill.neutral::before {
  content: '😐';
}
.mood-pill.negative {
  background: var(--s-mood-negative-bg);
  color: #DC2626;
}
.mood-pill.negative::before {
  content: '😔';
}

/* ── Quran Progress ── */
.quran-progress {
  margin-top: var(--s-space-3);
}
.quran-progress-bar {
  height: 8px;
  background: var(--s-border);
  border-radius: var(--s-radius-full);
  overflow: hidden;
  margin-top: 6px;
}
.quran-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--s-accent), var(--s-brand));
  border-radius: var(--s-radius-full);
  transition: width var(--s-transition-base);
}

/* ── Conversation Items ── */
.conv-item {
  background: var(--s-card);
  border-radius: var(--s-radius-md);
  padding: var(--s-space-3) var(--s-space-4);
  margin-bottom: var(--s-space-2);
  border: 1px solid var(--s-border);
  transition: border-color var(--s-transition-fast);
}
.conv-item:hover {
  border-color: var(--s-accent);
}
.conv-item .conv-date {
  font-size: var(--s-text-xs);
  color: var(--s-text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
}
.conv-item .conv-summary {
  font-size: var(--s-text-sm);
  color: var(--s-text);
  margin-top: 4px;
  line-height: 1.5;
}

/* Override old conv-item styles */
.conv-item .date {
  font-size: var(--s-text-xs);
  color: var(--s-text-muted);
}
.conv-item .summary {
  font-size: var(--s-text-sm);
  color: var(--s-text);
  margin-top: 4px;
  line-height: 1.5;
}

/* ── Salsabil Overlay animation ── */
.salsabil-overlay {
  position: fixed;
  inset: 0;
  background: var(--s-overlay);
  z-index: 1000;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: salsabilFadeIn 200ms ease;
}
@keyframes salsabilFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* ── Bottom Sheet ── */
.salsabil-bottom-sheet {
  background: var(--s-card);
  border-radius: var(--s-radius-xl) var(--s-radius-xl) 0 0;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  animation: salsabilSlideUp 300ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* ── Sheet Header ── */
.salsabil-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--s-space-5) var(--s-space-5) 0;
  position: sticky;
  top: 0;
  background: var(--s-card);
  z-index: 2;
}
.salsabil-sheet-header h2 {
  font-size: var(--s-text-lg);
  font-weight: var(--s-weight-semibold);
  color: var(--s-text);
}

/* ── Sheet Body ── */
.salsabil-sheet-body {
  padding: var(--s-space-4) var(--s-space-5) var(--s-space-6);
}

/* ── Close Button ── */
.salsabil-close-btn {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: var(--s-radius-full);
  background: var(--s-bg);
  color: var(--s-text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background var(--s-transition-fast);
}
.salsabil-close-btn:hover {
  background: var(--s-border);
}

/* ── Sentiment Tags (old compatibility) ── */
.sentiment-tag {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.65rem;
  margin-top: 4px;
  font-weight: 600;
}
.sentiment-tag.positive { background: var(--s-mood-positive-bg, #E8F5E9); color: var(--s-success, #2E7D32); }
.sentiment-tag.neutral  { background: #FFF3E0; color: #E65100; }
.sentiment-tag.negative { background: #FFEBEE; color: #C62828; }

/* ── Badge ── */
.badge {
  display: inline-block;
  padding: 2px 10px;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
}
.badge.girl { background: var(--s-gold-light, #FDF5E0); color: var(--s-primary-deep, #C2185B); }
.badge.boy { background: var(--s-accent-light, #E5F0F0); color: var(--s-primary-deep, #1B5E20); }

/* ================================================================
   LOADING
   ================================================================ */
.loading {
  text-align: center;
  padding: 24px;
  color: var(--s-text-muted);
}
.spinner {
  display: inline-block;
  width: 28px; height: 28px;
  border: 3px solid var(--s-brand-light);
  border-top-color: var(--s-brand);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (min-width: 600px) {
  #chat-screen { max-width: 480px; margin: 0 auto; border-left: 1px solid var(--input-border); border-right: 1px solid var(--input-border); }
  .message { max-width: 70%; }
  .parent-form-card { max-width: 420px; }
}
@media (max-width: 400px) {
  html { font-size: 16px; }
  .login-card { padding: 24px 16px; }
}
@media (max-width: 599px) {
  .child-chat-header { min-height: 64px; padding: 10px 12px; }
  .child-chat-header .header-logo { width: 112px; height: 38px; }
  .child-chat-header .header-right { display: none; }
  .child-mobile-menu-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; padding: 0 11px; border: 1px solid rgba(255,255,255,.28); border-radius: 12px; background: rgba(255,255,255,.12); color: inherit; font: inherit; font-size: .82rem; font-weight: 800; cursor: pointer; }
  .child-mobile-menu-toggle span { font-size: 1.1rem; line-height: 1; }
  .child-mobile-menu-overlay { display: block; position: fixed; z-index: 40; inset: 64px 0 0; width: 100%; border: 0; background: rgba(9, 29, 39, .36); backdrop-filter: blur(2px); }
  .child-mobile-menu-overlay[hidden], .child-mobile-menu[hidden] { display: none !important; pointer-events: none; }
  .child-mobile-menu { display: grid; position: fixed; z-index: 41; top: 72px; right: 12px; left: 12px; gap: 5px; padding: 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 18px; background: var(--card); box-shadow: 0 18px 42px rgba(8, 34, 47, .24); }
  .child-mobile-menu-heading { display: flex; align-items: center; justify-content: space-between; padding: 2px 5px 8px; color: var(--text); font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
  .child-mobile-menu-heading button { width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--bg); color: var(--text); font-size: 1.35rem; cursor: pointer; }
  .child-mobile-menu > button { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 0 12px; border: 0; border-radius: 12px; background: transparent; color: var(--text); font: inherit; font-weight: 700; text-align: left; cursor: pointer; }
  .child-mobile-menu > button:active { background: var(--primary-light); }
  .child-mobile-menu > button > span { display: grid; width: 25px; height: 25px; place-items: center; border-radius: 8px; background: var(--primary-light); color: var(--primary); font-weight: 800; }
  .child-mobile-menu > .child-mobile-menu-signout { margin-top: 4px; border-top: 1px solid var(--input-border); border-radius: 0 0 12px 12px; color: #b53a45; }
  .child-mobile-menu > .child-mobile-menu-signout > span { background: #fff0f1; color: #b53a45; }
  .child-learning-discovery { align-items: stretch; flex-direction: column; margin: 10px 12px 0; padding: 14px; }
  .child-learning-discovery .btn-primary { width: 100%; }
}
@media (max-width: 374px) {
  :root {
    --s-space-6: 20px;
  }
  .parent-hero { padding: 28px 20px 24px; }
  .child-card { padding: 12px; }
}
@media (min-width: 900px) {
  .parent-container {
    max-width: 720px;
    margin: 0 auto;
  }
}

/* ---- Conversation Messages ---- */
.conv-messages-list {
  max-height: 60vh;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.conv-msg {
  display: flex;
  max-width: 80%;
}

.conv-msg-child {
  align-self: flex-end;
}

.conv-msg-anees {
  align-self: flex-start;
}

.conv-msg-bubble {
  padding: 10px 14px;
  border-radius: 16px;
  font-size: 14px;
  line-height: 1.5;
}

.conv-msg-child .conv-msg-bubble {
  background: var(--s-brand-light, #e3f2fd);
  border-bottom-right-radius: 4px;
  color: var(--s-text, #1a1a2e);
}

.conv-msg-anees .conv-msg-bubble {
  background: var(--s-surface, #f5f5f5);
  border-bottom-left-radius: 4px;
  color: var(--s-text, #1a1a2e);
}

.conv-msg-sender {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
  color: var(--s-text-muted, #666);
}

.conv-msg-content {
  word-wrap: break-word;
  white-space: pre-wrap;
}

.conv-msg-time {
  font-size: 10px;
  color: var(--s-text-muted, #999);
  margin-top: 4px;
  text-align: right;
}

/* ================================================================
   ENG-52 — Salsabil Parent Portal
   ================================================================ */

body.theme-parent,
body.theme-parent-dark {
  overflow: auto;
  background: var(--s-bg);
  color: var(--s-text);
  font-family: var(--s-font);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.parent-auth-page {
  min-height: 100dvh;
  padding: var(--s-space-4);
  justify-content: center;
  background:
    radial-gradient(circle at 12% 16%, rgba(44, 122, 123, 0.12), transparent 28rem),
    var(--s-bg);
}

.theme-parent-dark .parent-auth-page {
  background:
    radial-gradient(circle at 12% 16%, rgba(56, 189, 248, 0.08), transparent 28rem),
    var(--s-bg);
}

.parent-auth-shell {
  width: min(100%, 1080px);
  height: min(720px, calc(100dvh - 32px));
  min-height: min(720px, calc(100dvh - 32px));
  margin: auto;
  display: grid;
  grid-template-columns: minmax(320px, 0.9fr) minmax(420px, 1.1fr);
  overflow: hidden;
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-xl);
  background: var(--s-card);
  box-shadow: var(--s-shadow-xl);
}

.parent-brand-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(32px, 5vw, 64px);
  overflow: hidden;
  background: var(--s-primary-deep);
  color: #FFFFFF;
}

.parent-brand-panel::after {
  content: '';
  position: absolute;
  right: -120px;
  bottom: -180px;
  width: 420px;
  height: 420px;
  border: 1px solid rgba(232, 200, 122, 0.22);
  border-radius: 50%;
  box-shadow: 0 0 0 44px rgba(232, 200, 122, 0.04), 0 0 0 88px rgba(232, 200, 122, 0.03);
  pointer-events: none;
}

.parent-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-3);
  width: fit-content;
  color: var(--s-text);
  font-size: var(--s-text-lg);
  font-weight: var(--s-weight-bold);
  letter-spacing: -0.02em;
  text-decoration: none;
}

.parent-wordmark-on-dark { color: #FFFFFF; }

.parent-wordmark-mark,
.parent-empty-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: var(--s-radius-md);
  background: var(--s-secondary);
  color: var(--s-primary-deep);
  font-size: var(--s-text-md);
  font-weight: var(--s-weight-bold);
}

.parent-brand-copy {
  position: relative;
  z-index: 1;
  margin: auto 0 var(--s-space-10);
}

.parent-eyebrow {
  display: block;
  margin-bottom: var(--s-space-2);
  color: var(--s-accent);
  font-size: var(--s-text-xs);
  font-weight: var(--s-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.parent-brand-panel .parent-eyebrow { color: var(--s-secondary); }

.parent-brand-copy h1 {
  max-width: 470px;
  margin: 0;
  color: #FFFFFF;
  font-size: clamp(2.2rem, 5vw, 3.75rem);
  font-weight: var(--s-weight-semibold);
  line-height: 1.02;
  letter-spacing: -0.055em;
}

.parent-brand-copy p {
  max-width: 430px;
  margin-top: var(--s-space-5);
  color: #D7E1E8;
  font-size: var(--s-text-md);
  line-height: var(--s-leading-relaxed);
}

.parent-trust-list {
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--s-space-3);
  margin: 0 0 var(--s-space-8);
  padding: 0;
  color: #E7EEF3;
  font-size: var(--s-text-sm);
  list-style: none;
}

.parent-trust-list li {
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
}

.parent-trust-list li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: var(--s-radius-full);
  background: rgba(44, 122, 123, 0.34);
  color: #BCE1DC;
  font-weight: var(--s-weight-bold);
}

.parent-brand-footnote {
  position: relative;
  z-index: 1;
  margin-top: auto;
  color: #9EB0BD;
  font-size: var(--s-text-xs);
}

.parent-auth-page .parent-form-section {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
  padding: clamp(32px, 7vw, 84px);
  background: var(--s-card);
}

.parent-auth-heading { margin-bottom: var(--s-space-6); }

.parent-auth-heading h2 {
  margin: 0 0 var(--s-space-2);
  color: var(--s-text);
  font-size: var(--s-text-2xl);
  line-height: var(--s-leading-tight);
  letter-spacing: -0.035em;
}

.parent-auth-heading p {
  color: var(--s-text-muted);
  font-size: var(--s-text-sm);
  line-height: var(--s-leading-normal);
}

.parent-auth-page .parent-tabs {
  position: static;
  z-index: auto;
  gap: var(--s-space-1);
  margin-bottom: var(--s-space-6);
  padding: var(--s-space-1);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-md);
  background: var(--s-bg);
}

.parent-auth-page .parent-tab {
  min-height: 42px;
  padding: var(--s-space-2) var(--s-space-3);
  border: 0;
  border-radius: calc(var(--s-radius-md) - 3px);
  color: var(--s-text-muted);
  font-size: var(--s-text-sm);
  transition: background-color var(--s-transition-fast), color var(--s-transition-fast), box-shadow var(--s-transition-fast);
}

.parent-auth-page .parent-tab.active {
  border: 0;
  background: var(--s-card);
  color: var(--s-brand);
  box-shadow: var(--s-shadow-sm);
}

.parent-auth-page .parent-tab:hover { background: var(--s-card-hover); }

.parent-auth-page .parent-form-card {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.parent-auth-page .parent-form-card[hidden] { display: none; }

.parent-form-card .field { position: relative; }

.parent-form-card .field label,
.field-label-row a {
  font-size: var(--s-text-sm);
  font-weight: var(--s-weight-semibold);
}

.field-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-space-4);
  margin-bottom: 6px;
}

.field-label-row label { margin-bottom: 0 !important; }

.field-label-row a,
.parent-form-card a {
  color: var(--s-accent);
  text-decoration: none;
}

.field-label-row a:hover,
.parent-form-card a:hover { text-decoration: underline; }

.parent-form-card input[type="text"],
.parent-form-card input[type="email"],
.parent-form-card input[type="password"] {
  min-height: 48px;
  padding: 12px 14px;
  border-width: 1px;
  border-radius: var(--s-radius-md);
  font-size: 16px;
  transition: border-color var(--s-transition-fast), box-shadow var(--s-transition-fast), background-color var(--s-transition-fast);
}

.password-field input { padding-right: 66px !important; }

.password-toggle {
  right: 10px;
  top: auto;
  bottom: 8px;
  min-width: 48px;
  min-height: 32px;
  padding: 0 var(--s-space-2);
  border-radius: var(--s-radius-sm);
  color: var(--s-accent);
  font-size: var(--s-text-xs);
  font-weight: var(--s-weight-bold);
  transform: none;
}

.password-toggle:hover { background: var(--s-accent-light); }

.parent-consent-field label {
  display: flex !important;
  align-items: flex-start;
  gap: var(--s-space-3);
  cursor: pointer;
  line-height: var(--s-leading-relaxed);
}

.parent-consent-field input {
  width: 18px;
  height: 18px;
  margin-top: 2px;
  flex: 0 0 auto;
  accent-color: var(--s-accent);
}

.salsabil-primary-btn,
.parent-landing .btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-space-2);
  width: 100%;
  min-height: 48px;
  margin: var(--s-space-1) 0 0;
  padding: 12px 20px;
  border: 1px solid var(--s-btn-primary-bg);
  border-radius: var(--s-radius-md);
  background: var(--s-btn-primary-bg);
  color: var(--s-btn-primary-text);
  font: inherit;
  font-size: var(--s-text-sm);
  font-weight: var(--s-weight-bold);
  cursor: pointer;
  box-shadow: var(--s-shadow-xs);
  transition: background-color var(--s-transition-fast), border-color var(--s-transition-fast), transform var(--s-transition-fast), box-shadow var(--s-transition-fast);
}

.salsabil-primary-btn:hover,
.parent-landing .btn-primary:hover {
  border-color: var(--s-btn-primary-hover);
  background: var(--s-btn-primary-hover);
  box-shadow: var(--s-shadow-md);
}
@media (hover: hover) and (pointer: fine) {
  .salsabil-primary-btn:hover,
  .parent-landing .btn-primary:hover {
    transform: translateY(-1px);
  }
}

.salsabil-primary-btn:active,
.parent-landing .btn-primary:active { transform: translateY(0); }

.salsabil-primary-btn:disabled,
.parent-landing .btn-primary:disabled {
  cursor: wait;
  opacity: 0.64;
  transform: none;
}

.salsabil-primary-btn-compact {
  width: auto;
  min-height: 42px;
  margin: 0;
  padding-inline: var(--s-space-4);
}

.form-error,
.parent-form-card .error {
  margin: var(--s-space-3) 0;
  padding: var(--s-space-3);
  border: 1px solid #FECACA;
  border-radius: var(--s-radius-md);
  background: #FEF2F2;
  color: #B91C1C;
  font-size: var(--s-text-sm);
  line-height: var(--s-leading-normal);
}

.theme-parent-dark .form-error,
.theme-parent-dark .parent-form-card .error {
  border-color: #7F1D1D;
  background: rgba(127, 29, 29, 0.28);
  color: #FCA5A5;
}

.form-switch-link { margin-top: var(--s-space-5); }

.form-success {
  margin: var(--s-space-3) 0;
  padding: var(--s-space-3);
  border: 1px solid #A7F3D0;
  border-radius: var(--s-radius-md);
  background: #ECFDF5;
  color: #047857;
  font-size: var(--s-text-sm);
  line-height: var(--s-leading-normal);
}

.theme-parent-dark .form-success {
  border-color: #065F46;
  background: rgba(6, 78, 59, 0.4);
  color: #6EE7B7;
}

.parent-utility-shell {
  width: min(100%, 540px);
  margin: auto;
}

.parent-utility-shell > .parent-wordmark { margin: 0 auto var(--s-space-6); }

.parent-utility-card {
  padding: clamp(28px, 7vw, 48px);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-xl);
  background: var(--s-card);
  box-shadow: var(--s-shadow-lg);
}

.parent-utility-card h1 {
  margin: 0 0 var(--s-space-3);
  color: var(--s-text);
  font-size: var(--s-text-2xl);
  line-height: var(--s-leading-tight);
  letter-spacing: -0.035em;
}

.parent-utility-description {
  margin-bottom: var(--s-space-6);
  color: var(--s-text-muted);
  font-size: var(--s-text-sm);
  line-height: var(--s-leading-relaxed);
}

.parent-utility-footnote {
  margin-top: var(--s-space-5);
  color: var(--s-text-muted);
  font-size: var(--s-text-xs);
  text-align: center;
}

.parent-utility-card .parent-form-card {
  max-width: none;
  padding: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.parent-otp-input {
  font-family: var(--s-font-mono) !important;
  font-size: 1.5rem !important;
  letter-spacing: 0.45em;
  text-align: center;
}

.parent-utility-card .theme-toggle-form { padding: 0; text-align: left; }

.parent-utility-card .theme-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-space-3);
  margin-bottom: var(--s-space-5);
}

.parent-utility-card .theme-opt {
  min-width: 0;
  min-height: 96px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  padding: var(--s-space-4);
  text-align: left;
  transition: border-color var(--s-transition-fast), background-color var(--s-transition-fast), box-shadow var(--s-transition-fast);
}

.parent-utility-card .theme-opt span { font-size: var(--s-text-xl); }

.parent-utility-card .theme-opt.selected {
  border-color: var(--s-accent);
  background: var(--s-accent-light);
  color: var(--s-text);
  box-shadow: 0 0 0 1px var(--s-accent);
}

/* Dashboard shell */
.parent-dashboard-page {
  min-height: 100dvh;
  height: 100dvh;
  display: block;
  overflow: hidden;
  background: var(--s-bg);
}

.parent-sidebar {
  position: fixed;
  z-index: 30;
  left: 0;
  width: 248px;
  top: 0;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  padding: var(--s-space-6);
  background: var(--s-primary-deep);
  color: #FFFFFF;
  box-shadow: 8px 0 24px rgba(15, 42, 63, 0.08);
}

.parent-nav { margin-top: var(--s-space-10); }
.parent-mobile-menu-toggle, .parent-mobile-menu-overlay { display: none; }

.parent-nav-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--s-space-3);
  padding: var(--s-space-3);
  border: 0;
  border-radius: var(--s-radius-md);
  background: transparent;
  color: #B8C6D0;
  font: inherit;
  font-size: var(--s-text-sm);
  font-weight: var(--s-weight-semibold);
  text-align: left;
  cursor: pointer;
  transition: background-color var(--s-transition-fast), color var(--s-transition-fast), transform var(--s-transition-fast);
}

.parent-nav-item.active {
  background: rgba(255, 255, 255, 0.09);
  color: #FFFFFF;
  box-shadow: inset 3px 0 0 var(--s-secondary);
}

.parent-nav-item:disabled { cursor: default; }
.parent-nav-item:not(:disabled):hover {
  background: rgba(255, 255, 255, 0.14);
  color: #FFFFFF;
}
.parent-nav-item:not(:disabled):active { transform: scale(0.985); }
.parent-nav-item-muted { color: #8295A3; }
.parent-nav-item-muted .parent-nav-icon { color: #8295A3; }
.parent-nav-count { min-width: 20px; margin-left: auto; padding: 2px 6px; border-radius: 999px; background: var(--s-secondary); color: var(--s-primary-deep); font-size: 11px; font-weight: 700; text-align: center; }
.parent-nav-soon { margin-left: auto; color: #718492; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }

.parent-nav-icon { color: var(--s-secondary); font-size: var(--s-text-lg); }

.parent-sidebar-footer {
  margin-top: auto;
  padding-top: var(--s-space-5);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.parent-sidebar-footer p {
  margin-bottom: 2px;
  color: #91A4B2;
  font-size: var(--s-text-xs);
}

.parent-sidebar-footer strong {
  display: block;
  overflow: hidden;
  color: #FFFFFF;
  font-size: var(--s-text-sm);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.parent-sidebar-action {
  margin-top: var(--s-space-4);
  padding: 0;
  border: 0;
  background: transparent;
  color: #C9D5DC;
  font: inherit;
  font-size: var(--s-text-xs);
  font-weight: var(--s-weight-semibold);
  cursor: pointer;
}

.parent-sidebar-action:hover { color: #FFFFFF; text-decoration: underline; }

.parent-main {
  min-width: 0;
  height: 100dvh;
  margin-left: 248px;
  overflow-y: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--s-accent-light) 34%, var(--s-bg)) 0, var(--s-bg) 280px);
}

.parent-dash-header {
  position: sticky;
  z-index: 10;
  top: 0;
  min-height: 96px;
  padding: var(--s-space-5) clamp(24px, 4vw, 56px);
  border-bottom: 1px solid var(--s-border);
  background: color-mix(in srgb, var(--s-card) 94%, transparent);
  box-shadow: none;
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(15, 42, 63, 0.02);
}

.parent-dash-title h1 {
  margin: 0;
  color: var(--s-text);
  font-size: var(--s-text-xl);
  line-height: var(--s-leading-tight);
  letter-spacing: -0.025em;
}

.parent-mobile-wordmark { display: none; }

.parent-theme-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s-space-2);
  min-height: 40px;
  padding: var(--s-space-2) var(--s-space-3);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-md);
  background: var(--s-card);
  color: var(--s-text);
  font: inherit;
  font-size: var(--s-text-xs);
  font-weight: var(--s-weight-semibold);
  cursor: pointer;
  transition: background-color var(--s-transition-fast), border-color var(--s-transition-fast);
}

.parent-theme-btn:hover { border-color: var(--s-accent); background: var(--s-accent-light); }

.parent-dash-content {
  width: min(100%, 1080px);
  margin: 0 auto;
  padding: clamp(28px, 4vw, 56px);
}

/* Parent Quran teacher directory */
.teacher-directory-toolbar {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: var(--s-space-4);
  margin: 0 0 var(--s-space-5);
  padding: var(--s-space-4);
  border: 1px solid color-mix(in srgb, var(--s-primary) 16%, var(--s-border));
  border-radius: var(--s-radius-lg);
  background: linear-gradient(135deg, color-mix(in srgb, var(--s-accent-light) 54%, var(--s-card)), var(--s-card));
}
.teacher-directory-toolbar > p { max-width: 310px; margin: 0; color: var(--s-text-muted); font-size: var(--s-text-xs); line-height: var(--s-leading-relaxed); }
.teacher-directory-search, .teacher-directory-toolbar > label:not(.teacher-directory-search) { display: grid; min-width: 136px; gap: 6px; color: var(--s-text); font-size: var(--s-text-xs); font-weight: var(--s-weight-semibold); }
.teacher-directory-search { min-width: min(100%, 260px); }
.teacher-directory-search input, .teacher-directory-toolbar select, .teacher-connect-form select, .teacher-connect-form textarea {
  width: 100%; border: 1px solid var(--s-input-border); border-radius: var(--s-radius-md); background: var(--s-input-bg); color: var(--s-input-text); font: inherit; outline: none; transition: border-color var(--s-transition-fast), box-shadow var(--s-transition-fast);
}
.teacher-directory-search input, .teacher-directory-toolbar select, .teacher-connect-form select { min-height: 44px; padding: 10px 12px; }
.teacher-connect-form textarea { min-height: 68px; padding: 10px 12px; resize: vertical; line-height: var(--s-leading-normal); }
.teacher-directory-search input:focus, .teacher-directory-toolbar select:focus, .teacher-connect-form select:focus, .teacher-connect-form textarea:focus { border-color: var(--s-input-focus); box-shadow: 0 0 0 3px color-mix(in srgb, var(--s-primary-deep) 14%, transparent); }
.teacher-directory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-space-5); }
.teacher-directory-card { display: flex; flex-direction: column; min-width: 0; padding: var(--s-space-5); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); background: var(--s-card); box-shadow: var(--s-shadow-xs); }
.teacher-directory-card-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: start; gap: var(--s-space-3); }
.teacher-directory-avatar { display: grid; width: 42px; height: 42px; place-items: center; border-radius: 50%; background: var(--s-primary-deep); color: #fff; font-weight: var(--s-weight-bold); }
.teacher-directory-card h3 { margin: 0 0 3px; color: var(--s-text); font-size: var(--s-text-md); line-height: var(--s-leading-tight); }
.teacher-directory-card-head p, .teacher-directory-bio { margin: 0; color: var(--s-text-muted); font-size: var(--s-text-sm); line-height: var(--s-leading-normal); }
.teacher-approved-badge { display: inline-flex; min-height: 24px; align-items: center; padding: 3px 7px; border: 1px solid #A7F3D0; border-radius: var(--s-radius-full); background: #ECFDF5; color: #047857; font-size: 10px; font-weight: var(--s-weight-bold); letter-spacing: .04em; text-transform: uppercase; }
.teacher-directory-bio { margin: var(--s-space-4) 0; }
.teacher-directory-meta { display: grid; gap: var(--s-space-3); margin: 0; padding: var(--s-space-4) 0; border-top: 1px solid var(--s-border); border-bottom: 1px solid var(--s-border); }
.teacher-directory-meta div { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--s-space-3); }
.teacher-directory-meta dt { color: var(--s-text-muted); font-size: var(--s-text-xs); font-weight: var(--s-weight-semibold); }
.teacher-directory-meta dd { margin: 0; color: var(--s-text); font-size: var(--s-text-sm); line-height: var(--s-leading-normal); }
.teacher-directory-connection { margin: var(--s-space-4) 0 0; padding: 10px 12px; border-left: 3px solid var(--s-accent); border-radius: 0 var(--s-radius-sm) var(--s-radius-sm) 0; background: var(--s-accent-light); color: var(--s-text); font-size: var(--s-text-xs); line-height: var(--s-leading-normal); }
.teacher-connect-form { display: grid; gap: var(--s-space-3); margin-top: var(--s-space-4); }
.teacher-connect-form label { display: grid; gap: 6px; color: var(--s-text); font-size: var(--s-text-xs); font-weight: var(--s-weight-semibold); }
.teacher-connect-form .salsabil-primary-btn { width: 100%; }
.teacher-connect-form .form-status { min-height: 18px; color: var(--s-text-muted); font-size: var(--s-text-xs); line-height: var(--s-leading-normal); }
.teacher-directory-verification { margin: var(--s-space-3) 0 0; padding: 8px 10px; border-radius: var(--s-radius-sm); background: #ECFDF5; color: #047857; font-size: var(--s-text-xs); font-weight: var(--s-weight-semibold); line-height: var(--s-leading-normal); }
.academic-tutor-profile-dialog { max-width: 680px; }
.academic-tutor-profile-dialog h2 { color: var(--s-primary); font-size: clamp(1.5rem, 4vw, 2rem); }
.academic-tutor-profile-dialog h3 { margin: 18px 0 6px; color: var(--s-primary); font-size: 1rem; }
.academic-tutor-profile-dialog p { color: var(--s-text-muted); line-height: 1.58; }
.academic-tutor-profile-headline { margin-top: -8px; color: var(--s-primary) !important; font-weight: 800; }
.academic-tutor-profile-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 8px 0; }
.academic-tutor-profile-facts div { padding: 10px; border: 1px solid var(--s-border); border-radius: 10px; background: var(--s-surface-soft, #f5f8f7); }
.academic-tutor-profile-facts dt { color: var(--s-text-muted); font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.academic-tutor-profile-facts dd { margin: 4px 0 0; color: var(--s-text); font-size: .86rem; line-height: 1.4; }
.academic-tutor-message-list { display: grid; gap: 10px; max-height: 320px; overflow-y: auto; margin: 14px 0; padding: 4px; }
.academic-tutor-message { max-width: min(88%, 560px); padding: 11px 13px; border-radius: 14px; background: #edf6f3; color: var(--s-text); }
.academic-tutor-message strong { display: block; margin-bottom: 4px; color: var(--s-primary); font-size: .74rem; }
.academic-tutor-message p { margin: 0; color: inherit; white-space: pre-wrap; }
.academic-tutor-message-parent { justify-self: end; background: var(--s-primary); color: #fff; }
.academic-tutor-message-parent strong { color: #d9f0ea; }
.academic-tutor-message-form { display: grid; gap: 9px; }
.academic-tutor-message-form label { display: grid; gap: 6px; color: var(--s-text); font-size: .84rem; font-weight: 800; }
.academic-tutor-message-form textarea { width: 100%; padding: 10px; border: 1px solid var(--s-border); border-radius: 10px; color: var(--s-text); font: inherit; resize: vertical; }
@media (max-width: 600px) { .academic-tutor-profile-facts { grid-template-columns: 1fr; } .academic-tutor-message { max-width: 96%; } }

.parent-overview-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--s-space-4);
  margin-bottom: var(--s-space-8);
}

/* Dashboard pages are switched with the native hidden attribute. This explicit
   rule prevents a layout class such as .parent-overview-stats from overriding it. */
.parent-page[hidden] { display: none !important; }

.parent-stat-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: var(--s-space-5);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-lg);
  background: var(--s-card);
  box-shadow: var(--s-shadow-xs);
  border-top: 3px solid color-mix(in srgb, var(--s-accent) 65%, var(--s-secondary));
  transition: border-color var(--s-transition-fast), box-shadow var(--s-transition-fast), transform var(--s-transition-fast);
}

@media (hover: hover) and (pointer: fine) {
  .parent-stat-card:hover,
  .progress-card:hover,
  .parent-alert:hover {
    border-color: color-mix(in srgb, var(--s-accent) 44%, var(--s-border));
    box-shadow: var(--s-shadow-md);
    transform: translateY(-1px);
  }
}

.parent-stat-card strong { color: var(--s-text); font-size: var(--s-text-2xl); line-height: 1; }
.parent-stat-card > span:last-child { color: var(--s-text-muted); font-size: var(--s-text-xs); }
.parent-stat-label { color: var(--s-text-muted); font-size: var(--s-text-xs); font-weight: var(--s-weight-semibold); text-transform: uppercase; letter-spacing: .08em; }
.parent-stat-card.has-alerts { border-color: color-mix(in srgb, var(--s-accent) 48%, var(--s-border)); background: var(--s-accent-light); }

.parent-alerts-section { margin-bottom: var(--s-space-10); }
.parent-alert-count { padding: 6px 10px; border-radius: 999px; background: var(--s-accent-light); color: var(--s-accent); font-size: var(--s-text-xs); font-weight: var(--s-weight-semibold); white-space: nowrap; }
.parent-alert-list { display: grid; gap: var(--s-space-3); }
.parent-alert { display: flex; align-items: flex-start; gap: var(--s-space-3); padding: var(--s-space-4); border: 1px solid var(--s-border); border-radius: var(--s-radius-md); background: var(--s-card); transition: border-color var(--s-transition-fast), box-shadow var(--s-transition-fast), transform var(--s-transition-fast); }
.parent-alert.is-unread { border-color: color-mix(in srgb, var(--s-accent) 40%, var(--s-border)); }
.parent-alert-icon { color: var(--s-accent); font-size: var(--s-text-sm); line-height: 1.5; }
.parent-alert-body { flex: 1; min-width: 0; }
.parent-alert-heading { display: flex; justify-content: space-between; gap: var(--s-space-3); color: var(--s-text); font-size: var(--s-text-sm); }
.parent-alert-heading span { color: var(--s-text-muted); font-size: var(--s-text-xs); }
.parent-alert-body p { margin: 5px 0 0; color: var(--s-text-muted); font-size: var(--s-text-sm); line-height: var(--s-leading-relaxed); }
.parent-alert-read, .parent-alert-status { align-self: center; color: var(--s-accent); font-size: var(--s-text-xs); font-weight: var(--s-weight-semibold); white-space: nowrap; }
.parent-alert-read { border: 0; background: transparent; cursor: pointer; }
.parent-alert-read:hover { text-decoration: underline; }
.parent-alert-status { color: var(--s-text-muted); }

.progress-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-space-4); }
.progress-card { padding: var(--s-space-5); border: 1px solid var(--s-border); border-radius: var(--s-radius-lg); background: var(--s-card); box-shadow: var(--s-shadow-xs); transition: border-color var(--s-transition-fast), box-shadow var(--s-transition-fast), transform var(--s-transition-fast); }
.progress-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-space-3); margin-bottom: var(--s-space-5); }
.progress-card h3 { margin: 3px 0 0; color: var(--s-text); font-size: var(--s-text-lg); }
.progress-card-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 50%; background: var(--s-accent-light); color: var(--s-accent); font-weight: var(--s-weight-bold); }
.progress-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-space-2); padding-bottom: var(--s-space-4); border-bottom: 1px solid var(--s-border); }
.progress-metrics div { display: flex; flex-direction: column; gap: 3px; }
.progress-metrics strong { color: var(--s-text); font-size: var(--s-text-lg); }
.progress-metrics span, .progress-card-row span { color: var(--s-text-muted); font-size: var(--s-text-xs); }
.progress-card-row { display: flex; justify-content: space-between; gap: var(--s-space-3); padding-top: var(--s-space-3); color: var(--s-text); font-size: var(--s-text-sm); }
.progress-card-row strong { max-width: 68%; color: var(--s-text); font-size: var(--s-text-sm); text-align: right; }

.parent-content-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-space-6);
  margin-bottom: var(--s-space-6);
}

.parent-content-header h2 {
  margin: 0;
  color: var(--s-text);
  font-size: var(--s-text-2xl);
  letter-spacing: -0.035em;
}

.parent-content-header p {
  margin-top: var(--s-space-2);
  color: var(--s-text-muted);
  font-size: var(--s-text-sm);
}

.children-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--s-space-4);
}

.child-card {
  width: 100%;
  min-height: 144px;
  padding: var(--s-space-5);
  border: 1px solid var(--s-border);
  border-radius: var(--s-radius-lg);
  background: var(--s-card);
  color: var(--s-text);
  font: inherit;
  text-align: left;
  box-shadow: var(--s-shadow-xs);
  transition: border-color var(--s-transition-fast), box-shadow var(--s-transition-fast), transform var(--s-transition-fast);
}

/* Single canonical hover/press for child cards — fine-pointer gated so touch
   devices don't fire a false hover on tap; press snaps back to baseline */
@media (hover: hover) and (pointer: fine) {
  .child-card:hover {
    border-color: color-mix(in srgb, var(--s-accent) 55%, var(--s-border));
    box-shadow: var(--s-shadow-md);
    transform: translateY(-2px);
  }
  .child-card:hover .child-card-arrow { transform: translateX(3px); }
}
.child-card:active {
  transform: translateY(0);
}

.child-avatar {
  width: 52px;
  height: 52px;
  border-radius: var(--s-radius-md);
  background: var(--s-brand) !important;
}

.child-card-info h3 { font-size: var(--s-text-md); }
.child-card-meta { margin-top: 2px; font-size: var(--s-text-sm); }

.child-card-arrow {
  align-self: center;
  color: var(--s-accent);
  font-size: var(--s-text-lg);
  transition: transform var(--s-transition-fast);
}

.parent-empty-state {
  padding: clamp(40px, 8vw, 80px) var(--s-space-6);
  border: 1px dashed var(--s-border);
  border-radius: var(--s-radius-lg);
  background: var(--s-card);
}

.parent-empty-mark { margin: 0 auto var(--s-space-4); }

.parent-empty-state h3 {
  margin-bottom: var(--s-space-2);
  color: var(--s-text);
  font-size: var(--s-text-lg);
}

.parent-empty-state p {
  max-width: 440px;
  margin: 0 auto var(--s-space-5);
  font-size: var(--s-text-sm);
  line-height: var(--s-leading-relaxed);
}

.parent-empty-state .parent-btn-outline { width: auto; }

.parent-btn-outline {
  min-height: 40px;
  border-width: 1px;
  border-radius: var(--s-radius-md);
  transition: background-color var(--s-transition-fast), border-color var(--s-transition-fast), color var(--s-transition-fast);
}

/* Accessible interaction states */
.parent-auth-page :focus-visible,
.parent-dashboard-page :focus-visible,
.salsabil-bottom-sheet :focus-visible {
  outline: 3px solid color-mix(in srgb, var(--s-accent) 48%, transparent);
  outline-offset: 3px;
}

/* Child chat history drawer */
.history-drawer { position: fixed; z-index: 80; inset: 0; pointer-events: none; }
.history-drawer.active { display: block; pointer-events: auto; }
.history-overlay { position: absolute; inset: 0; width: 100%; border: 0; background: rgba(15, 42, 63, .42); opacity: 0; transition: opacity 180ms ease-out; cursor: pointer; }
.history-drawer.active .history-overlay { opacity: 1; }
.history-drawer-panel { position: absolute; inset: 0 auto 0 0; width: min(86vw, 340px); display: flex; flex-direction: column; padding: max(18px, env(safe-area-inset-top)) 14px max(18px, env(safe-area-inset-bottom)); background: var(--card); box-shadow: 10px 0 30px rgba(15, 42, 63, .16); transform: translateX(-100%); transition: transform 240ms var(--ease-drawer); will-change: transform; }
.history-drawer.active .history-drawer-panel { transform: translateX(0); }
.history-drawer-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 6px 14px; border-bottom: 1px solid var(--input-border); }
.history-drawer-header h2 { margin: 0; color: var(--text); font-size: 18px; }
.history-brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.history-brand img { width: 112px; height: 34px; object-fit: contain; }
.history-new-btn { width: 100%; margin: 14px 0 4px; padding: 11px 12px; border: 1px solid var(--primary); border-radius: 10px; background: var(--primary); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; }
.history-new-btn { transition: transform 140ms var(--ease-out), filter 140ms ease; }
.history-new-btn:active { transform: scale(.97); }
.history-content { min-height: 0; overflow-y: auto; padding: 12px 0; }
.history-session { width: 100%; display: flex; align-items: center; gap: 12px; margin-bottom: 10px; padding: 14px; border: 1px solid var(--input-border); border-radius: 14px; background: var(--card); color: var(--text); text-align: left; cursor: pointer; touch-action: manipulation; transition: border-color 160ms ease, box-shadow 160ms ease, transform 140ms var(--ease-out); }
.history-session.is-current { border-color: var(--primary); box-shadow: var(--shadow); }
.history-session:active { transform: scale(.98); }
.history-session-icon { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 10px; background: var(--primary-light); }
.history-session-copy { display: grid; min-width: 0; gap: 4px; flex: 1; }
.history-session-copy strong { font-size: 13px; }
.history-session-copy span { overflow: hidden; color: var(--text-muted); font-size: 13px; text-overflow: ellipsis; white-space: nowrap; }
.history-session-arrow { color: var(--primary); font-size: 22px; }
.history-empty { padding: 48px 20px; color: var(--text-muted); text-align: center; }
.history-drawer .icon-btn { flex: 0 0 auto; }

@media (hover: hover) and (pointer: fine) {
  .history-session:hover { border-color: var(--primary); box-shadow: var(--shadow); transform: translateX(2px); }
  .history-new-btn:hover { filter: brightness(1.06); }
}

@media (prefers-reduced-motion: reduce) {
  .history-overlay, .history-drawer-panel, .history-session, .icon-btn, .btn-send { transition: none; }
  .history-drawer-panel { transform: none; }
}

@media (max-width: 899px) {
  .parent-auth-page { padding: 0; }

  .parent-auth-shell {
    height: auto;
    min-height: 100dvh;
    grid-template-columns: 1fr;
    border: 0;
    border-radius: 0;
    box-shadow: none;
  }

  .parent-brand-panel {
    min-height: 260px;
    padding: var(--s-space-6);
  }

  .parent-brand-copy { margin: var(--s-space-10) 0 0; }
  .parent-brand-copy h1 { max-width: 520px; font-size: clamp(2rem, 9vw, 3rem); }
  .parent-brand-copy p { margin-top: var(--s-space-4); }
  .parent-trust-list, .parent-brand-footnote { display: none; }

  .parent-auth-page .parent-form-section {
    overflow: visible;
    padding: var(--s-space-8) var(--s-space-5);
  }

  .parent-dashboard-page { display: block; height: auto; min-height: 100dvh; overflow: visible; }

  .parent-sidebar {
    position: sticky;
    left: auto;
    top: 0;
    width: auto;
    z-index: 20;
    height: 64px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    padding: 0 var(--s-space-4);
  }

  .parent-sidebar .parent-wordmark-mark { width: 34px; height: 34px; }
  .parent-sidebar-footer p, .parent-sidebar-footer strong { display: none; }

  .parent-sidebar-footer {
    margin: 0;
    padding: 0;
    border: 0;
  }

  .parent-main { min-height: auto; margin-left: 0; overflow: visible; }

  .parent-sidebar-action {
    min-height: 38px;
    margin: 0;
    padding: 0 var(--s-space-3);
    border: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: var(--s-radius-md);
  }

  .parent-mobile-menu-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 38px; margin-left: auto; margin-right: 8px; padding: 0 11px; border: 1px solid rgba(255,255,255,.24); border-radius: var(--s-radius-md); background: rgba(255,255,255,.08); color: #fff; font: inherit; font-size: .78rem; font-weight: 700; cursor: pointer; }
  .parent-mobile-menu-toggle span:first-child { font-size: 1.05rem; line-height: 1; }
  .parent-mobile-menu-overlay { display: block; position: fixed; z-index: 19; inset: 64px 0 0; width: 100%; border: 0; background: rgba(8, 28, 40, .42); backdrop-filter: blur(2px); opacity: 0; visibility: hidden; pointer-events: none; }
  /* Closed by default: it must never dim or intercept the page until Menu opens. */
  .parent-mobile-menu-overlay[hidden] { display: none !important; }
  .parent-mobile-menu-overlay.is-visible { opacity: 1; visibility: visible; pointer-events: auto; }
  .parent-nav { position: fixed; z-index: 30; top: 64px; left: 0; width: min(86vw, 320px); height: calc(100dvh - 64px); margin: 0; padding: 18px 14px max(24px, env(safe-area-inset-bottom)); overflow-y: auto; background: var(--s-primary-deep); box-shadow: 14px 16px 32px rgba(12, 37, 52, .24); transform: translateX(-105%); transition: transform 180ms ease-out; }
  .parent-sidebar.is-mobile-menu-open .parent-nav { transform: translateX(0); }
  .parent-nav-item { min-height: 48px; font-size: .92rem; }

  .parent-dash-header {
    position: static;
    min-height: 88px;
    padding: var(--s-space-4) var(--s-space-5);
  }

  .parent-dash-content { padding: var(--s-space-6) var(--s-space-5); }
}

@media (max-width: 640px) {
  .parent-content-header { align-items: flex-start; flex-direction: column; }
  .parent-dash-title { display: none; }
  .parent-overview-stats { grid-template-columns: 1fr; }
  .progress-grid { grid-template-columns: 1fr; }
  .parent-alert-heading { flex-direction: column; gap: 2px; }
  .parent-alert { flex-wrap: wrap; }
  .parent-alert-read, .parent-alert-status { margin-left: 24px; }
  .salsabil-primary-btn-compact { width: 100%; }
  .children-grid { grid-template-columns: 1fr; }
  .teacher-directory-toolbar { align-items: stretch; flex-direction: column; }
  .teacher-directory-toolbar > p { max-width: none; }
  .teacher-directory-search { min-width: 0; }
  .teacher-directory-grid { grid-template-columns: 1fr; }
  .child-card { min-height: 124px; padding: var(--s-space-4); }
}

@media (max-width: 374px) {
  .parent-brand-panel,
  .parent-auth-page .parent-form-section,
  .parent-dash-content { padding-inline: var(--s-space-4); }

  .parent-theme-btn span:last-child { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}
.child-controls-card { border: 1px solid rgba(44, 122, 123, 0.2); }
.notification-preferences-form { display: grid; gap: 0.7rem; max-width: 620px; }
.notification-preferences-form label { display: flex; align-items: center; gap: 0.6rem; min-height: 42px; font-weight: 600; }
.notification-preferences-form input { width: 18px; height: 18px; accent-color: var(--s-primary-accent); }
.notification-history-heading { margin-top: 1.5rem; }
.parent-notification-history { display: grid; gap: 0.65rem; max-width: 720px; }
.parent-notification-item { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.85rem 1rem; border: 1px solid var(--s-border, #dbe7e6); border-radius: 12px; background: var(--s-surface, #fff); }
.parent-notification-item strong, .parent-notification-item span { display: block; }
.parent-notification-item strong { color: var(--s-primary, #0f2a3f); }
.parent-notification-item div span { margin-top: 0.25rem; color: var(--s-muted, #64748b); font-size: 0.85rem; }
.notification-status { flex: 0 0 auto; padding: 0.25rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 700; text-transform: capitalize; background: #eef2f2; color: #526568; }
.parent-notification-item.sent .notification-status { background: #e1f4eb; color: #19704d; }
.parent-notification-item.failed .notification-status { background: #fde8e8; color: #a63a3a; }
.control-history-list { display: grid; gap: 0.55rem; }
.control-history-item { display: grid; grid-template-columns: minmax(120px, 0.8fr) 1fr auto; gap: 0.75rem; align-items: center; padding: 0.7rem 0; border-bottom: 1px solid var(--s-border); font-size: var(--s-text-sm); }
.control-history-item span { color: var(--s-text-muted); }
.control-history-item time { color: var(--s-text-muted); white-space: nowrap; }
.detail-card-heading-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.detail-muted, .form-status { color: var(--s-text-muted); font-size: var(--s-text-sm); }
.child-settings-form { display: grid; gap: 0.85rem; margin-top: 0.75rem; }
.child-settings-form select, .child-settings-form input[type="time"], .child-settings-form input[type="number"] { min-height: 42px; border: 1px solid var(--s-border); border-radius: 10px; padding: 0.55rem 0.7rem; background: var(--s-surface); color: var(--s-text); }
.settings-check { display: flex; align-items: center; gap: 0.55rem; font-weight: 600; }
.settings-check input { width: 18px; height: 18px; accent-color: var(--s-primary-accent); }
.settings-time-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 0.55rem; }
.child-settings-form .parent-btn-primary { justify-self: start; }
@media (max-width: 560px) { .detail-card-heading-row { align-items: flex-start; flex-direction: column; gap: 0.25rem; } .settings-time-row { grid-template-columns: 1fr 1fr; } .settings-time-row .label, .settings-time-row span { grid-column: 1 / -1; } }
@media (max-width: 640px) { .control-history-item { grid-template-columns: 1fr; gap: 0.15rem; } .control-history-item time { white-space: normal; } }

/* ================================================================
   Parent-gated Quran reader
   ================================================================ */
.quran-screen { background: #f7f6f0; color: #173b35; }
.quran-reader-header { min-height: 72px; display: grid; grid-template-columns: 46px 1fr auto; align-items: center; gap: 12px; padding: 10px max(16px, env(safe-area-inset-left)); color: #fff; background: #173b35; box-shadow: 0 2px 12px rgba(20, 48, 44, 0.18); }
.quran-reader-header h2 { font-size: 1.1rem; line-height: 1.2; }
.quran-reader-kicker { display: block; color: #bdd6ce; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.quran-source-badge { padding: 6px 10px; border: 1px solid rgba(255,255,255,.3); border-radius: 999px; color: #e9f5ef; font-size: .72rem; font-weight: 700; }
.quran-reader-main { flex: 1; min-height: 0; overflow: hidden; }
.quran-library, .quran-reading-view { height: 100%; overflow-y: auto; padding: 24px max(16px, calc((100vw - 880px) / 2)); overscroll-behavior: contain; }
.quran-library-intro h3 { font-size: 1.35rem; color: #173b35; }
.quran-library-intro p { margin-top: 4px; color: #63766f; font-size: .88rem; }
.quran-search { display: block; margin: 18px 0; }
.quran-search input { width: 100%; min-height: 48px; padding: 0 16px; border: 1px solid #cedbd5; border-radius: 14px; background: #fff; color: #173b35; font: inherit; outline: none; }
.quran-search input:focus { border-color: #2c7a67; box-shadow: 0 0 0 3px rgba(44,122,103,.14); }
.quran-chapter-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.quran-chapter-card { width: 100%; min-height: 76px; display: grid; grid-template-columns: 42px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px; padding: 12px; border: 1px solid #dfe7e2; border-radius: 14px; background: #fff; color: #173b35; text-align: left; cursor: pointer; box-shadow: 0 2px 7px rgba(23,59,53,.04); }
.quran-chapter-card:hover, .quran-chapter-card:focus-visible { border-color: #79aa98; box-shadow: 0 5px 18px rgba(23,59,53,.10); outline: none; }
.quran-chapter-number { width: 38px; height: 38px; display: grid; place-items: center; background: #edf6f1; border-radius: 11px; color: #246b58; font-size: .8rem; font-weight: 800; }
.quran-chapter-copy strong, .quran-chapter-copy span { display: block; }
.quran-chapter-copy strong { font-size: .92rem; }
.quran-chapter-copy span { margin-top: 3px; color: #74847e; font-size: .72rem; }
.quran-chapter-arabic { font-family: "Noto Naskh Arabic", "Amiri", serif; font-size: 1.2rem; white-space: nowrap; }
.quran-card-arrow { color: #8aa099; font-size: 1.4rem; }
.quran-surah-heading { margin-bottom: 18px; padding: 24px 18px; border-radius: 18px; color: #fff; text-align: center; background: linear-gradient(145deg, #173b35, #2a6959); }
.quran-surah-heading h3 { margin-top: 6px; font-size: 1.25rem; }
.quran-surah-heading p, .quran-surah-heading span:last-child { color: #d7ebe3; font-size: .78rem; }
.quran-surah-arabic { display: block; font-family: "Noto Naskh Arabic", "Amiri", serif; font-size: 2rem; line-height: 1.5; }
.quran-ayah-list { display: grid; gap: 12px; }
.quran-ayah-card { padding: 16px; border: 1px solid #dfe7e2; border-radius: 16px; background: #fff; box-shadow: 0 2px 8px rgba(23,59,53,.04); }
.quran-ayah-meta { display: flex; align-items: center; justify-content: space-between; gap: 12px; color: #55746a; font-size: .76rem; font-weight: 800; }
.quran-ayah-actions { display: inline-flex; align-items: center; gap: 8px; }
.quran-ayah-play { display: grid; width: 36px; height: 36px; place-items: center; padding: 0; border: 1px solid #9bc0b2; border-radius: 50%; color: #245f50; background: #f0f7f4; font: inherit; font-weight: 800; cursor: pointer; }
.quran-ayah-card.is-current { border-color: #c69a43; box-shadow: 0 0 0 3px rgba(198,154,67,.14), 0 4px 16px rgba(23,59,53,.08); }
.quran-reader-player { margin: 0 0 14px; }
.quran-ayah-arabic { margin: 15px 0 12px; color: #142e2a; font-family: "Noto Naskh Arabic", "Amiri", serif; font-size: clamp(1.65rem, 5vw, 2.15rem); line-height: 2.05; text-align: right; }
.quran-ayah-translation { padding-top: 12px; border-top: 1px solid #edf1ef; color: #3f514b; font-family: Georgia, serif; font-size: .92rem; line-height: 1.65; }
.quran-tafsir-btn { min-height: 36px; padding: 6px 12px; border: 1px solid #9bc0b2; border-radius: 999px; color: #245f50; background: #f0f7f4; font: inherit; font-size: .72rem; font-weight: 800; cursor: pointer; }
.quran-tafsir-panel { margin-top: 14px; padding: 14px; border-left: 4px solid #c69a43; border-radius: 0 12px 12px 0; background: #fbf6e9; color: #4f493b; font-size: .83rem; line-height: 1.6; }
.quran-tafsir-panel strong, .quran-tafsir-panel span { display: block; }
.quran-tafsir-panel p { margin: 7px 0; }
.quran-tafsir-panel span { color: #7e755f; font-size: .72rem; }
.quran-loading, .quran-error, .quran-empty { grid-column: 1 / -1; padding: 40px 18px; color: #63766f; text-align: center; }
.quran-error button { margin-top: 12px; }
.quran-data-credit { padding: 18px 4px 4px; color: #74847e; font-size: .7rem; text-align: center; }
.parent-quran-assignment-modal[hidden] { display: none !important; }
.parent-quran-assignment-modal { position: fixed; z-index: 50; inset: 0; display: grid; place-items: center; padding: 18px; }
.parent-quran-assignment-backdrop { position: absolute; inset: 0; border: 0; background: rgba(13, 34, 30, .54); backdrop-filter: blur(2px); }
.parent-quran-assignment-dialog { position: relative; z-index: 1; display: grid; gap: 16px; width: min(100%, 640px); max-height: calc(100dvh - 36px); overflow-y: auto; padding: 28px; border: 1px solid var(--s-border); border-radius: 20px; background-color: var(--s-card, #fff); opacity: 1; box-shadow: 0 26px 70px rgba(0,0,0,.28); }
.quran-assignment-dialog-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.quran-assignment-dialog-header h2 { margin-top: 5px; color: var(--s-primary); font-size: clamp(1.55rem, 3vw, 2.1rem); line-height: 1.12; }
.quran-assignment-dialog-header p { max-width: 54ch; margin-top: 7px; color: var(--s-text-muted); line-height: 1.48; }
.quran-assignment-close-button { display: grid; flex: 0 0 auto; place-items: center; width: 42px; height: 42px; padding: 0; border: 0; border-radius: 50%; color: var(--s-primary); background: color-mix(in srgb, var(--s-primary) 8%, var(--s-card, #fff)); font: inherit; font-size: 2rem; font-weight: 400; line-height: 1; cursor: pointer; }
.quran-assignment-close-button:hover { background: color-mix(in srgb, var(--s-primary) 14%, var(--s-card, #fff)); }
.quran-assignment-close-button:focus-visible { outline: 3px solid color-mix(in srgb, var(--s-primary-accent) 35%, transparent); outline-offset: 2px; }
.parent-quran-assignment-dialog label { display: grid; gap: 6px; color: var(--s-primary); font-size: .84rem; font-weight: 800; }
.parent-quran-assignment-dialog select, .parent-quran-assignment-dialog input, .parent-quran-assignment-dialog textarea { width: 100%; min-height: 44px; padding: .62rem .72rem; border: 1px solid var(--s-border); border-radius: 10px; background-color: var(--s-input-bg, #fff); color: var(--s-text); font: inherit; }
.parent-quran-assignment-dialog textarea { min-height: 82px; resize: vertical; }
.quran-assignment-range { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.quran-assignment-actions { display: flex; justify-content: flex-end; gap: 12px; padding-top: 4px; }
.quran-assignment-actions button { min-width: 155px; }
.quran-assignment-parent-card { display: grid; gap: 12px; }
.parent-learning-pathway-list { display: grid; gap: 10px; margin-top: 8px; }
.parent-learning-pathway { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 14px; border: 1px solid color-mix(in srgb, var(--s-primary-accent) 20%, var(--s-border)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--s-primary-accent) 6%, var(--s-surface)), var(--s-surface)); }
.parent-learning-pathway h4 { margin-top: 3px; color: var(--s-primary); font-size: 1rem; }.parent-learning-pathway p, .parent-learning-pathway small { color: var(--s-text-muted); font-size: .84rem; line-height: 1.5; }.parent-learning-pathway small { display: block; margin-top: 5px; }
@media (max-width: 560px) { .parent-learning-pathway { grid-template-columns: 1fr; }.parent-learning-pathway button { width: 100%; } }
.quran-assignment-list { display: grid; gap: 10px; margin-top: 8px; }
.parent-quran-assignment { display: grid; gap: 8px; padding: 14px; border: 1px solid color-mix(in srgb, var(--s-primary-accent) 20%, var(--s-border)); border-radius: 14px; background: linear-gradient(135deg, color-mix(in srgb, var(--s-primary-accent) 6%, var(--s-surface)), var(--s-surface)); }
.parent-quran-assignment h4 { margin-top: 3px; color: var(--s-primary); font-size: 1rem; }.parent-quran-assignment p { color: var(--s-text-muted); font-size: .84rem; line-height: 1.5; }.quran-assignment-label { color: var(--s-primary); font-size: .7rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }.quran-assignment-progress { display: grid; gap: 3px; padding: 9px 10px; border-left: 3px solid var(--s-primary-accent); border-radius: 0 9px 9px 0; background: rgba(30,158,214,.06); }.quran-assignment-progress strong { color: var(--s-primary); font-size: .82rem; }.quran-assignment-progress span { color: var(--s-text-muted); font-size: .76rem; line-height: 1.45; }.quran-assignment-target, .quran-assignment-note { margin: 0; }.quran-completed-list { margin-top: 5px; color: var(--s-primary); font-size: .85rem; font-weight: 700; }.quran-completed-list[open] summary { margin-bottom: 8px; }
.quran-journey-continue { display: grid; gap: 8px; margin-bottom: 20px; padding: 20px; border: 1px solid rgba(198,154,67,.38); border-radius: 18px; background: linear-gradient(135deg, #fffaf0, #f2f8f3); }.quran-journey-continue > span, .quran-journey header > span, .quran-journey-complete > span { color: #87621b; font-size: .72rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.quran-journey-continue h3, .quran-journey h3, .quran-journey-complete h3 { color: #173b35; font-size: 1.35rem; }.quran-journey-continue p, .quran-journey-continue strong { color: #466257; font-size: .9rem; }.quran-journey-continue .btn-primary { justify-self: start; }
.quran-journey { display: grid; gap: 18px; max-width: 760px; margin: 0 auto; }.quran-journey header { padding: 20px; border-radius: 18px; color: #fff; background: linear-gradient(145deg, #173b35, #2a6959); }.quran-journey header h3 { margin-top: 5px; color: #fff; }.quran-journey header p { margin-top: 5px; color: #d7ebe3; font-size: .86rem; }.quran-journey-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 0; padding: 0; list-style: none; }.quran-journey-steps li { min-width: 0; padding: 8px 5px; border-radius: 9px; background: #edf1ef; color: #6a7c75; font-size: .72rem; font-weight: 800; text-align: center; }.quran-journey-steps .is-complete { background: #e2f4e9; color: #19704d; }.quran-journey-steps .is-current { background: #fff1cf; color: #815e19; box-shadow: inset 0 0 0 1px rgba(198,154,67,.45); }
.quran-journey-stage { display: grid; gap: 14px; padding: clamp(18px, 5vw, 34px); border: 1px solid #dfe7e2; border-radius: 20px; background: #fff; box-shadow: 0 8px 24px rgba(23,59,53,.06); }.quran-journey-stage > span { color: #2a6959; font-size: .75rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.quran-journey-stage h4 { color: #173b35; font-size: clamp(1.35rem, 4vw, 1.8rem); }.quran-journey-stage > p { color: #526861; line-height: 1.6; }.quran-journey-ayah { padding: 16px; border-radius: 14px; background: #f7faf8; }.quran-journey-ayah small { color: #55746a; font-weight: 800; }.quran-ayah-word { display: inline; padding: 0 2px; border: 0; border-radius: 5px; background: transparent; color: inherit; font: inherit; cursor: pointer; }.quran-ayah-word:hover, .quran-ayah-word:focus-visible, .quran-ayah-word.is-playing-word { outline: none; background: #fff1cf; box-shadow: 0 0 0 2px rgba(198,154,67,.38); }.quran-ayah-end { display: inline-block; padding-inline: 2px; color: #87621b; }.quran-word-help { margin: 0; color: #55746a; font-size: .78rem; }.quran-journey-audio-status { min-height: 1.2em; margin: 7px 0 0; color: #63766f; font-size: .76rem; }.quran-journey-finish { justify-self: start; }.quran-journey-complete { display: grid; gap: 12px; max-width: 620px; margin: 26px auto; padding: 30px; border: 1px solid rgba(44,122,103,.25); border-radius: 20px; background: linear-gradient(135deg, #f6fbf8, #fffaf0); text-align: center; }.quran-journey-complete ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: #19704d; font-weight: 700; }.quran-journey-complete .btn-primary { justify-self: center; }
/* The text is allowed to be long. This quiet, sticky player is the stable
   piece of the journey: it keeps recitation controls in reach while the child
   reads naturally through the ayah. */
.quran-persistent-player { position: sticky; z-index: 5; bottom: 16px; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px 12px; padding: 12px 14px; border: 1px solid rgba(198,154,67,.42); border-radius: 16px; background: rgba(255,253,247,.98); box-shadow: 0 14px 34px rgba(23,59,53,.16); backdrop-filter: blur(12px); }.quran-player-expand { display: none; }.quran-player-context { display: grid; gap: 2px; min-width: 0; }.quran-player-context strong { overflow: hidden; color: #173b35; font-size: .82rem; text-overflow: ellipsis; white-space: nowrap; }.quran-player-context span { color: #55746a; font-size: .72rem; }.quran-player-progress { display: grid; grid-template-columns: 42px minmax(0,1fr) 42px; grid-column: 1 / -1; align-items: center; gap: 8px; color: #55746a; font-size: .68rem; font-variant-numeric: tabular-nums; }.quran-player-progress input { width: 100%; accent-color: #c69a43; }.quran-player-progress span:last-child { text-align: right; }.quran-player-controls { display: flex; grid-column: 3; grid-row: 1; gap: 6px; justify-content: end; }.quran-player-controls button { display: grid; width: 40px; min-width: 40px; min-height: 40px; padding: 0; place-items: center; border-radius: 50%; font-size: .9rem; }.quran-player-controls .quran-audio-toggle { width: 48px; min-width: 48px; min-height: 48px; }.quran-player-expanded { display: none; grid-column: 1 / -1; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(23,59,53,.1); }.quran-persistent-player.is-expanded .quran-player-expanded { display: grid; }.quran-repeat-options, .quran-player-expanded-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 7px; }.quran-repeat-option { min-height: 34px; padding: 6px 10px; border: 1px solid #b8d0c5; border-radius: 999px; background: #fff; color: #245f50; font: inherit; font-size: .75rem; font-weight: 750; cursor: pointer; }.quran-repeat-option.is-selected { border-color: #c69a43; background: #fff3d5; color: #815e19; }.quran-autonext { display: flex; align-items: center; gap: 8px; color: #466257; font-size: .8rem; font-weight: 700; }.quran-autonext input { width: 18px; height: 18px; accent-color: #2a6959; }.quran-display-options { display: flex; flex-wrap: wrap; align-items: center; gap: 7px; margin-bottom: 14px; }.quran-display-options > span { margin-right: 3px; color: #55746a; font-size: .72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; }.quran-display-options button { min-height: 32px; padding: 5px 9px; border: 1px solid #c8ddd4; border-radius: 999px; background: #fff; color: #245f50; font: inherit; font-size: .72rem; font-weight: 750; cursor: pointer; }.quran-display-options button.is-selected { border-color: #2a6959; background: #e9f4ef; }.quran-ayah-transliteration { display: grid; gap: 5px; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid #dfe7e2; color: #466257; font-family: Georgia, serif; font-size: .95rem; font-style: italic; line-height: 1.65; }.quran-ayah-transliteration span, .quran-ayah-translation span { color: #55746a; font-family: inherit; font-size: .68rem; font-style: normal; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.quran-ayah-translation { display: grid; gap: 5px; }
.child-privacy-message { margin: 0; padding: 8px 14px; border-bottom: 1px solid var(--border); background: rgba(30, 158, 214, .07); color: var(--text-muted); font-size: .75rem; line-height: 1.4; text-align: center; }

.child-feature-controls { display: grid; gap: 9px; padding: 14px; border: 1px solid var(--s-border); border-radius: 12px; }
.child-feature-controls legend { padding: 0 6px; color: var(--s-primary); font-weight: 800; }
.child-feature-controls > p { margin-bottom: 2px; color: var(--s-text-muted); font-size: var(--s-text-sm); }
.feature-switch { min-height: 58px; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 12px; border: 1px solid var(--s-border); border-radius: 10px; background: var(--s-surface); }
.feature-switch span, .feature-switch strong, .feature-switch small { display: block; }
.feature-switch small { margin-top: 2px; color: var(--s-text-muted); font-weight: 400; }
.feature-switch input { width: 21px; height: 21px; flex: 0 0 auto; accent-color: var(--s-primary-accent); }
.feature-switch-locked { background: rgba(112, 128, 119, 0.06); border-style: dashed; }
.feature-switch-locked strong { color: var(--s-text-muted); }
.feature-switch input:disabled { cursor: not-allowed; opacity: .55; }
.child-profile-features { margin-top: 4px; }
.plan-card-features { display: block; margin-top: 8px; color: var(--s-primary); font-size: .75rem; font-weight: 700; line-height: 1.35; }
.child-card-focus { display: grid; gap: 2px; margin-top: 8px; padding: 8px 10px; border-left: 3px solid var(--s-primary-accent); background: rgba(30, 158, 214, .06); border-radius: 0 9px 9px 0; }
.child-card-focus span, .child-card-support { color: var(--s-text-muted); font-size: .74rem; line-height: 1.35; }
.child-card-focus strong { color: var(--s-primary); font-size: .82rem; }
.child-card-support { margin-top: 8px; color: #476b61; font-weight: 600; }
.parent-coming-soon { padding: .35rem .6rem; border: 1px solid rgba(44, 122, 103, .22); border-radius: 999px; color: var(--s-primary); background: #f0f8f5; font-size: .75rem; font-weight: 800; }
.parent-guide-card { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(250px, .8fr); gap: 20px; padding: 22px; border: 1px solid rgba(44, 122, 103, .22); border-radius: 18px; background: linear-gradient(135deg, #f8fcfa, #eff8f5); }
.parent-guide-card h3 { color: var(--s-primary); font-size: 1.2rem; }.parent-guide-card p { margin-top: 7px; color: var(--s-text-muted); line-height: 1.6; }
.parent-guide-intro { align-self: start; }.parent-guide-boundary { padding: 10px 12px; border-left: 3px solid var(--s-primary-accent); background: rgba(30, 158, 214, .07); border-radius: 0 10px 10px 0; font-size: .84rem; font-weight: 700; }
.parent-guide-form { display: grid; gap: 9px; }.parent-guide-form > label { color: var(--s-primary); font-size: .82rem; font-weight: 800; }.parent-guide-form select, .parent-guide-form textarea { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--s-border); border-radius: 10px; background: #fff; color: var(--s-text); font: inherit; }.parent-guide-form textarea { resize: vertical; }.parent-guide-form select:focus, .parent-guide-form textarea:focus { border-color: var(--s-primary-accent); outline: 3px solid color-mix(in srgb, var(--s-primary-accent) 18%, transparent); }
.parent-prompt-list { display: grid; gap: 8px; }.parent-prompt-list button { width: 100%; padding: 10px 12px; border: 0; border-radius: 11px; background: #fff; color: var(--s-primary); font: inherit; font-size: .85rem; font-weight: 700; text-align: left; cursor: pointer; box-shadow: 0 1px 4px rgba(18, 70, 61, .06); }.parent-prompt-list button:hover, .parent-prompt-list button:focus-visible { background: #e5f4ef; outline: 2px solid var(--s-primary-accent); outline-offset: 2px; }
.parent-guide-response { display: grid; gap: 12px; margin-top: 14px; }.guide-answer, .guide-weekly-card { display: grid; gap: 7px; padding: 16px; border: 1px solid var(--s-border); border-radius: 14px; background: var(--s-surface); }.guide-answer > span, .guide-weekly-card > div > span { color: var(--s-primary); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.guide-answer p, .guide-weekly-card p { margin: 0; color: var(--s-text); line-height: 1.55; white-space: pre-wrap; }.guide-weekly-list { display: grid; gap: 10px; }.guide-weekly-card h3 { color: var(--s-primary); font-size: .95rem; }.guide-weekly-card > div { display: grid; gap: 2px; padding-top: 8px; border-top: 1px solid var(--s-border); }
.guide-answer-markdown { color: var(--s-text); line-height: 1.62; }.guide-answer-markdown p { margin: 0 0 .8rem; white-space: normal; }.guide-answer-markdown p:last-child { margin-bottom: 0; }.guide-answer-markdown h1, .guide-answer-markdown h2, .guide-answer-markdown h3, .guide-answer-markdown h4 { margin: 1.1rem 0 .5rem; color: var(--s-primary); font-weight: 800; line-height: 1.25; }.guide-answer-markdown h1 { font-size: 1.25rem; }.guide-answer-markdown h2 { font-size: 1.12rem; }.guide-answer-markdown h3, .guide-answer-markdown h4 { font-size: 1rem; }.guide-answer-markdown h1:first-child, .guide-answer-markdown h2:first-child, .guide-answer-markdown h3:first-child, .guide-answer-markdown h4:first-child { margin-top: 0; }.guide-answer-markdown ul, .guide-answer-markdown ol { display: grid; gap: .38rem; margin: 0 0 .85rem; padding-left: 1.35rem; }.guide-answer-markdown li > ul, .guide-answer-markdown li > ol { margin: .38rem 0 0; }.guide-answer-markdown blockquote { margin: .9rem 0; padding: .7rem .85rem; border-left: 3px solid var(--s-primary-accent); border-radius: 0 10px 10px 0; background: rgba(30, 158, 214, .07); color: var(--s-text-muted); }.guide-answer-markdown blockquote p { margin: 0; }.guide-answer-markdown hr { height: 1px; margin: 1rem 0; border: 0; background: var(--s-border); }.guide-answer-markdown strong { font-weight: 800; }.guide-answer-markdown em { font-style: italic; }.guide-answer-markdown code { padding: .08rem .28rem; border-radius: 4px; background: rgba(30, 158, 214, .1); font-size: .9em; }.guide-answer-markdown pre { overflow-x: auto; padding: .75rem; border-radius: 10px; background: #18342e; color: #f4fbf8; }.guide-answer-markdown pre code { padding: 0; background: none; color: inherit; }
.parent-rewards-empty { display: grid; gap: 6px; padding: 24px; border: 1px dashed rgba(44, 122, 103, .35); border-radius: 16px; background: #fbfdfc; }.parent-rewards-empty strong { color: var(--s-primary); }.parent-rewards-empty span { color: var(--s-text-muted); }
.child-profile-tabs { display: flex; gap: 8px; overflow-x: auto; margin: 0 0 14px; padding-bottom: 4px; }.child-profile-tabs span { flex: 0 0 auto; padding: 7px 10px; border-radius: 999px; background: #eef6f3; color: var(--s-primary); font-size: .74rem; font-weight: 800; }
.child-growth-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }.child-growth-card { display: grid; gap: 5px; padding: 13px; border: 1px solid var(--s-border); border-radius: 13px; background: var(--s-surface); }.child-growth-card span { color: var(--s-text-muted); font-size: .73rem; font-weight: 700; }.child-growth-card strong { color: var(--s-primary); font-size: .85rem; line-height: 1.35; }
.subscription-package-layout { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(260px, .85fr); gap: 16px; align-items: start; }
.plan-selector { display: grid; gap: 14px; margin: 0; padding: 16px; border: 1px solid var(--s-border); border-radius: 16px; background: linear-gradient(180deg, rgba(30, 158, 214, 0.06), rgba(255, 255, 255, 0.98)); }
.plan-selector-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.plan-selector-copy { margin-top: 4px; color: var(--s-text-muted); font-size: var(--s-text-sm); line-height: 1.5; }
.plan-selector-offer { min-width: 210px; display: grid; gap: 4px; padding: 12px 14px; border: 1px solid rgba(30, 158, 214, 0.18); border-radius: 14px; background: rgba(255, 255, 255, 0.92); text-align: right; }
.plan-selector-offer strong { color: var(--s-primary); font-size: .86rem; letter-spacing: .01em; }
.plan-selector-offer span { color: var(--s-text-muted); font-size: .76rem; line-height: 1.45; }
.subscription-capacity-card { display: grid; gap: 10px; padding: 18px; border: 1px solid rgba(30, 158, 214, 0.18); border-radius: 16px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(30, 158, 214, 0.06)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.8); }
.subscription-capacity-value { color: var(--s-primary); font-size: clamp(1.4rem, 2vw, 1.8rem); line-height: 1.15; letter-spacing: -0.03em; }
.subscription-capacity-card p { color: var(--s-text-muted); font-size: .82rem; line-height: 1.55; }
.plan-card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.plan-card { position: relative; display: grid; align-content: start; gap: 10px; min-height: 220px; padding: 18px; border: 1px solid color-mix(in srgb, var(--s-border) 88%, white); border-radius: 18px; background: #fff; cursor: pointer; transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease, background .18s ease; }
.plan-card:hover { transform: translateY(-2px); border-color: rgba(30, 158, 214, 0.35); box-shadow: 0 16px 36px rgba(15, 72, 104, 0.08); }
.plan-card input { position: absolute; inset: 14px 14px auto auto; width: 20px; height: 20px; margin: 0; accent-color: var(--s-primary-accent); }
.plan-card-topline { color: var(--s-primary); font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.plan-card-price { color: var(--s-text); font-size: clamp(1.85rem, 3vw, 2.3rem); line-height: 1; letter-spacing: -0.04em; }
.plan-card-price span { margin-left: 4px; color: var(--s-text-muted); font-size: .9rem; font-weight: 600; letter-spacing: 0; }
.plan-card-summary { color: var(--s-text); font-size: .94rem; line-height: 1.6; }
.plan-card-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid rgba(30, 158, 214, 0.1); color: var(--s-primary); font-size: .82rem; font-weight: 700; }
.plan-card.is-selected,
.plan-card:has(input:checked) { border-color: var(--s-primary-accent); background: linear-gradient(180deg, rgba(30, 158, 214, 0.12), rgba(255, 255, 255, 1)); box-shadow: 0 20px 40px rgba(30, 158, 214, 0.14); transform: translateY(-3px); }
.plan-card:has(input:focus-visible) { outline: 3px solid color-mix(in srgb, var(--s-primary-accent) 22%, transparent); outline-offset: 2px; }
.subscription-panel { grid-column: 1 / -1; gap: 20px; overflow: hidden; }
.subscription-current-card { display: grid; gap: 18px; padding: 22px; border: 1px solid color-mix(in srgb, var(--s-primary-accent) 38%, var(--s-border)); border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--s-primary-accent) 13%, var(--s-surface)), var(--s-surface) 66%); box-shadow: inset 4px 0 0 var(--s-primary-accent); }
.subscription-current-heading { display: flex; align-items: start; justify-content: space-between; gap: 16px; }.subscription-current-heading h3 { margin-top: 4px; color: var(--s-primary); font-size: 1.2rem; }.subscription-current-heading button:disabled { opacity: .72; cursor: default; }
.subscription-current-price, .package-card-price { color: var(--s-text); font-size: clamp(2rem, 4vw, 2.65rem); line-height: 1; letter-spacing: -.05em; }.subscription-current-price span, .package-card-price span, .subscription-confirmation-dialog > strong span { margin-left: 5px; color: var(--s-text-muted); font-size: .88rem; font-weight: 600; letter-spacing: 0; }
.subscription-current-facts { display: flex; flex-wrap: wrap; gap: 8px; }.subscription-current-facts span { padding: 7px 10px; border: 1px solid color-mix(in srgb, var(--s-primary-accent) 20%, var(--s-border)); border-radius: 999px; background: var(--s-surface); color: var(--s-text-muted); font-size: .8rem; }.subscription-current-facts strong { color: var(--s-primary); }
.package-feature-list { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; color: var(--s-text-muted); font-size: .84rem; line-height: 1.45; }.package-feature-list li { display: flex; gap: 8px; align-items: baseline; }.package-feature-list li::before { content: '✓'; color: var(--s-primary-accent); font-weight: 900; }.package-feature-list-current { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 8px; }
.subscription-alternatives { display: grid; gap: 14px; }.subscription-alternatives-heading { display: flex; justify-content: space-between; gap: 18px; align-items: end; }.subscription-alternatives-heading p { max-width: 48ch; margin: 0; color: var(--s-text-muted); font-size: .84rem; line-height: 1.5; }.subscription-plan-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.package-card { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 19px; border: 1px solid var(--s-border); border-radius: 16px; background: var(--s-surface); }.package-card h3 { color: var(--s-primary); font-size: 1.08rem; }.package-card-label { color: var(--s-text-muted); font-size: .7rem; font-weight: 800; letter-spacing: .075em; text-transform: uppercase; }.package-card-capacity { padding-top: 10px; border-top: 1px solid var(--s-border); color: var(--s-primary); font-size: .84rem; font-weight: 750; }.package-card .btn-primary, .package-card .parent-btn-outline { width: 100%; margin-top: auto; }.subscription-blocked-note { padding: 10px; border-left: 3px solid #c67a22; border-radius: 0 8px 8px 0; background: color-mix(in srgb, #f7b955 13%, var(--s-surface)); color: var(--s-text); font-size: .8rem; line-height: 1.48; }.package-card button:disabled { opacity: .56; cursor: not-allowed; }
.subscription-confirmation[hidden] { display: none; }.subscription-confirmation { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 18px; }.subscription-confirmation-backdrop { position: absolute; inset: 0; background: rgba(13, 34, 30, .48); backdrop-filter: blur(2px); }.subscription-confirmation-dialog { position: relative; z-index: 1; display: grid; gap: 13px; width: min(100%, 470px); max-height: calc(100vh - 36px); overflow-y: auto; padding: 24px; border: 1px solid var(--s-border); border-radius: 18px; background: var(--s-surface); box-shadow: 0 26px 70px rgba(0, 0, 0, .25); }.subscription-confirmation-dialog h3 { color: var(--s-primary); font-size: 1.3rem; }.subscription-confirmation-dialog > strong { color: var(--s-text); font-size: 1.65rem; }.subscription-confirmation-dialog p { margin: 0; color: var(--s-text-muted); line-height: 1.52; }.subscription-confirmation-dialog ul { display: grid; gap: 5px; margin: 0; padding-left: 1.2rem; color: var(--s-text); line-height: 1.45; }.subscription-confirmation-note { padding: 9px 10px; border-radius: 9px; background: color-mix(in srgb, #f7b955 14%, var(--s-surface)); color: var(--s-text) !important; font-size: .82rem; }.subscription-confirmation-actions { display: flex; justify-content: end; flex-wrap: wrap; gap: 10px; margin-top: 4px; }

.quran-persistent-player > .quran-player-expand { display: flex; align-items: center; gap: 6px; padding: 0; border: 0; background: transparent; color: #55746a; font: inherit; font-size: .72rem; font-weight: 800; text-align: left; cursor: pointer; }.quran-player-expand span { transition: transform .16s ease; }.quran-persistent-player.is-expanded .quran-player-expand span { transform: rotate(180deg); }
.quran-player-retry { justify-self: start; min-height: 34px; padding: 6px 10px; border: 1px solid #c69a43; border-radius: 999px; background: #fff3d5; color: #815e19; font: inherit; font-size: .75rem; font-weight: 800; cursor: pointer; }

@media (max-width: 680px) {
  .quran-source-badge { display: none; }
  .quran-reader-header { grid-template-columns: 44px 1fr; }
  .quran-library, .quran-reading-view { padding: 18px 12px 28px; }
  .quran-chapter-list { grid-template-columns: 1fr; }
  .quran-chapter-card { min-height: 72px; }
  .quran-ayah-card { padding: 14px; }
  .quran-reader-player { bottom: max(10px, env(safe-area-inset-bottom)); }
  .parent-quran-assignment-modal { align-items: end; padding: 10px; }
  .parent-quran-assignment-dialog { width: 100%; max-height: calc(100dvh - 20px); padding: 20px; border-radius: 18px; }
  .quran-assignment-dialog-header { gap: 12px; }
  .quran-assignment-dialog-header h2 { font-size: 1.55rem; }
  .quran-assignment-close-button { width: 40px; height: 40px; font-size: 1.85rem; }
  .quran-assignment-range { grid-template-columns: 1fr; }
  .quran-assignment-actions { display: grid; grid-template-columns: 1fr; gap: 10px; }.quran-assignment-actions button { width: 100%; }
  /* The Quran journey is a single task on a small screen, not a dashboard.
     Keep its progress visible without making the child scroll past five large rows. */
  .quran-journey { gap: 12px; }
  .quran-journey header { padding: 16px; border-radius: 15px; }
  .quran-journey header h3 { font-size: 1.2rem; }
  .quran-journey-steps { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .quran-journey-steps li { padding: 8px 2px; font-size: .62rem; line-height: 1.15; text-align: center; overflow-wrap: anywhere; }
  .quran-journey-stage { gap: 12px; padding: 18px 16px; border-radius: 16px; }
  .quran-journey-stage > p { line-height: 1.45; }
  .quran-journey-ayah { padding: 13px 13px calc(176px + env(safe-area-inset-bottom)); }
  .quran-ayah-arabic { margin: 10px 0 8px; font-size: clamp(1.55rem, 8vw, 2rem); line-height: 1.85; }
  /* The persistent Learning header already provides the way back on mobile. */
  .quran-journey + * { min-width: 0; }
  .learning-content > .learning-back:has(+ .quran-journey) { display: none; }
  .quran-persistent-player { bottom: max(10px, env(safe-area-inset-bottom)); grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; border-radius: 15px; }.quran-player-expand { display: flex; justify-content: space-between; width: 100%; padding: 0; border: 0; background: transparent; color: #55746a; font: inherit; font-size: .72rem; font-weight: 800; text-align: left; cursor: pointer; }.quran-player-context { grid-column: 1; }.quran-player-controls { grid-column: 1; grid-row: auto; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; }.quran-player-controls button { justify-self: center; width: 44px; min-width: 44px; min-height: 44px; }.quran-player-controls .quran-audio-toggle { width: 52px; min-width: 52px; min-height: 52px; }.quran-player-progress { grid-column: 1; grid-template-columns: 36px minmax(0, 1fr) 36px; }.quran-persistent-player.is-expanded { padding-bottom: calc(12px + env(safe-area-inset-bottom)); }.quran-player-expanded-actions { display: grid; grid-template-columns: 1fr 1fr; }.quran-player-expanded-actions button { min-height: 42px; padding-inline: 6px; font-size: .75rem; }.quran-journey-finish { width: 100%; }
  .subscription-package-layout { grid-template-columns: 1fr; }
  .plan-selector-head { grid-template-columns: 1fr; display: grid; }
  .plan-selector-offer { min-width: 0; text-align: left; }
  .plan-card-grid { grid-template-columns: 1fr; }
  .subscription-current-heading, .subscription-alternatives-heading { display: grid; }.package-feature-list-current, .subscription-plan-grid { grid-template-columns: 1fr; }.subscription-confirmation-actions { display: grid; }.subscription-confirmation-actions button { width: 100%; }
  .parent-guide-card { grid-template-columns: 1fr; padding: 17px; }
  .child-growth-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ================================================================
   Parent profile and account settings
   ================================================================ */
.account-verification-badge { align-self: flex-start; padding: .45rem .7rem; border-radius: 999px; background: #e1f4eb; color: #19704d; font-size: .76rem; font-weight: 800; white-space: nowrap; }
.account-verification-badge.is-unverified { background: #fff1d8; color: #8a5a08; }
.account-settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.account-settings-card { display: grid; align-content: start; gap: .85rem; padding: 1rem; border: 1px solid var(--s-border); border-radius: 14px; background: var(--s-surface); }
.account-settings-card h3 { color: var(--s-primary); font-size: 1rem; }
.account-settings-card > div > p { margin-top: .25rem; color: var(--s-text-muted); font-size: var(--s-text-sm); line-height: 1.5; }
.account-settings-card label { display: grid; gap: .35rem; color: var(--s-text); font-size: var(--s-text-sm); font-weight: 700; }
.account-settings-card input[type="text"],
.account-settings-card input[type="email"],
.account-settings-card input[type="password"],
.account-settings-card input[type="number"],
.account-settings-card input[type="time"],
.account-settings-card select,
.account-settings-card textarea { width: 100%; min-height: 44px; padding: .65rem .75rem; border: 1px solid var(--s-border); border-radius: 10px; background: var(--s-surface); color: var(--s-text); font: inherit; }
.account-settings-card input[readonly] { background: var(--s-surface-soft, #f3f7f6); color: var(--s-text-muted); cursor: not-allowed; }
.account-settings-card input[type="text"]:focus,
.account-settings-card input[type="email"]:focus,
.account-settings-card input[type="password"]:focus,
.account-settings-card input[type="number"]:focus,
.account-settings-card input[type="time"]:focus,
.account-settings-card select:focus,
.account-settings-card textarea:focus { border-color: var(--s-primary-accent); outline: 3px solid color-mix(in srgb, var(--s-primary-accent) 18%, transparent); }
.account-settings-card button { justify-self: start; }
.account-security-card { border-color: color-mix(in srgb, var(--s-primary-accent) 35%, var(--s-border)); }
.account-email-confirm { display: grid; gap: .75rem; margin-top: .15rem; padding-top: .85rem; border-top: 1px solid var(--s-border); }
.account-email-confirm[hidden] { display: none; }
.parent-mobile-nav { display: none; }
.settings-landing { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.settings-category-card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 112px; padding: 18px; border: 1px solid var(--s-border); border-radius: 16px; background: var(--s-surface); color: var(--s-text); text-align: left; cursor: pointer; transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease; }.settings-category-card:hover { transform: translateY(-2px); border-color: color-mix(in srgb, var(--s-primary-accent) 45%, var(--s-border)); box-shadow: 0 12px 26px rgba(15, 72, 104, .08); }.settings-category-card:focus-visible { outline: 3px solid color-mix(in srgb, var(--s-primary-accent) 28%, transparent); outline-offset: 3px; }.settings-category-card span:nth-child(2) { display: grid; gap: 5px; }.settings-category-card strong { color: var(--s-primary); font-size: 1rem; }.settings-category-card small { color: var(--s-text-muted); font-size: .82rem; line-height: 1.4; }.settings-category-card b { color: var(--s-primary-accent); font-size: 1.4rem; font-weight: 500; }.settings-category-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: color-mix(in srgb, var(--s-primary-accent) 12%, var(--s-surface)); color: var(--s-primary-accent); font-size: 1.2rem; }
.settings-panel-header { display: grid; gap: 10px; }.settings-back { justify-self: start; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: transparent; color: var(--s-primary); font: inherit; font-size: .84rem; font-weight: 800; cursor: pointer; }.settings-back:hover { color: var(--s-primary-accent); }.settings-back:focus-visible { outline: 3px solid color-mix(in srgb, var(--s-primary-accent) 25%, transparent); outline-offset: 3px; }.settings-theme-options { display: flex; flex-wrap: wrap; gap: 10px; }

/* Phase 3A learning foundation */
.learning-screen { min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; background: var(--bg, #f7fbfa); }.learning-content { width: min(100%, 940px); margin: 0 auto; padding: 26px 22px 48px; }.learning-intro { display: grid; gap: 8px; margin-bottom: 20px; }.learning-intro > span, .learning-subject { color: var(--s-primary-accent); font-size: .74rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }.learning-intro h3, .learning-lesson-view h3 { color: var(--s-primary); font-size: clamp(1.35rem, 3vw, 1.9rem); }.learning-intro p, .learning-objective { margin: 0; color: var(--s-text-muted); line-height: 1.55; }.learning-pathway-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }.learning-pathway-card, .learning-module, .learning-lesson-view { display: grid; align-content: start; gap: 12px; min-width: 0; padding: 20px; border: 1px solid var(--s-border); border-radius: 17px; background: var(--s-surface); }.learning-pathway-card h3, .learning-module h3, .learning-activity h4 { color: var(--s-primary); }.learning-pathway-card p, .learning-module p, .learning-activity p { margin: 0; color: var(--s-text-muted); font-size: .9rem; line-height: 1.55; }.learning-pathway-card .btn-primary { margin-top: auto; }.learning-meta { display: flex; flex-wrap: wrap; gap: 8px; }.learning-meta span { padding: 5px 8px; border-radius: 999px; background: color-mix(in srgb, var(--s-primary-accent) 10%, var(--s-surface)); color: var(--s-primary); font-size: .78rem; font-weight: 700; }.learning-module-list, .learning-lesson-list, .learning-activity-list { display: grid; gap: 13px; }.learning-lesson-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%; padding: 13px; border: 1px solid var(--s-border); border-radius: 12px; background: var(--s-surface-soft, #f5f8f7); color: var(--s-text); text-align: left; cursor: pointer; }.learning-lesson-row span { display: grid; gap: 4px; min-width: 0; }.learning-lesson-row strong { color: var(--s-primary); }.learning-lesson-row small { color: var(--s-text-muted); line-height: 1.4; }.learning-lesson-row em { flex: 0 0 auto; color: var(--s-primary-accent); font-size: .8rem; font-style: normal; font-weight: 800; }.learning-lesson-row:hover { border-color: var(--s-primary-accent); }.learning-activity { display: grid; gap: 9px; padding: 15px; border-left: 3px solid var(--s-primary-accent); border-radius: 0 12px 12px 0; background: var(--s-surface-soft, #f5f8f7); }.learning-activity > span { color: var(--s-primary-accent); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }.learning-activity button { justify-self: start; }.learning-back { justify-self: start; margin-bottom: 16px; padding: 0; border: 0; background: transparent; color: var(--s-primary); font: inherit; font-weight: 800; cursor: pointer; }.learning-state { padding: 30px 20px; border: 1px dashed var(--s-border); border-radius: 16px; background: var(--s-surface); color: var(--s-text-muted); text-align: center; }.learning-state h3 { color: var(--s-primary); }

@media (max-width: 760px) {
  .account-settings-grid { grid-template-columns: 1fr; }
  .account-verification-badge { white-space: normal; }
  .account-settings-card { padding: .9rem; }
  .settings-landing { grid-template-columns: 1fr; }
  .learning-content { padding: 20px 13px 34px; }
  .learning-pathway-grid { grid-template-columns: 1fr; }
  .learning-pathway-card, .learning-module, .learning-lesson-view { padding: 16px; }
}