/* Family and administration workspaces. Loaded after their component styles.
   Keep navigation state, native form controls and educational artwork intact. */
body[data-panel-layout], .child-shell-body {
  --ink: #292340;
  --ink-soft: #6d657f;
  --canvas: #fffbf5;
  --canvas-2: #f8f3eb;
  --white: #fff;
  --card-bg: #fff;
  --line: #e9e1d5;
  --sun: #f6b540;
  --sun-deep: #94600b;
  --sun-100: #fff0cf;
  --grape: #7454b8;
  --grape-100: #f0e9fc;
  --family-purple: var(--grape);
  --family-purple-soft: var(--grape-100);
  --family-border: var(--line);
  --family-shadow: 0 4px 20px rgb(41 35 64 / 4%);
  --parent-primary: var(--sun);
  --parent-primary-dark: var(--sun-deep);
  --kids-primary: var(--grape);
  --kids-primary-dark: #5c3e98;
  --kids-primary-light: var(--grape-100);
  --kids-secondary: var(--grape);
  --kids-text: var(--ink);
  --kids-text-muted: var(--ink-soft);
  --kids-bg: var(--canvas);
  --kids-surface: var(--white);
  --kids-border: var(--line);
  color: var(--ink);
}
html[data-theme="dark"] body[data-panel-layout],
html[data-theme="dark"] .child-shell-body {
  color-scheme: dark;
  --ink: #f6f1ff;
  --ink-soft: #c0b5d0;
  --canvas: #1d1929;
  --canvas-2: #231e31;
  --white: #292338;
  --card-bg: #292338;
  --line: #433a52;
  --sun-deep: #f7ca73;
  --sun-100: #42351e;
  --grape: #bea6ed;
  --grape-100: #3c2f54;
  --family-border: var(--line);
}
body.panel-theme-body[data-panel-layout] { background: var(--canvas) !important; }
body[data-panel-layout] .a-content { line-height: 1.85; }
body[data-panel-layout] .a-topbar { background: var(--canvas); padding-inline: 0; }
body[data-panel-layout] .a-topbar-inner { width: 100%; padding-inline: 24px; }
body[data-panel-layout] .a-brand { gap: 10px; }
body[data-panel-layout] .a-brand-sub { background: var(--grape-100); color: var(--grape); }
body[data-panel-layout] .a-nav .nav-link { color: var(--ink-soft); }
body[data-panel-layout] .a-nav .nav-link.active {
  background: var(--sun-100) !important;
  color: var(--ink) !important;
}
body[data-panel-layout] .a-nav .nav-link.active .nav-link-icon { color: var(--sun-deep) !important; }
body[data-panel-layout] .a-admin-mini { background: var(--canvas-2); }
body[data-panel-layout] .a-content :is(.card, .table-card, .admin-card) {
  border-color: var(--line);
  border-radius: 20px;
  box-shadow: var(--family-shadow);
}
body[data-panel-layout] .a-content :is(.card, .admin-card) :is(.card, .admin-card) { box-shadow: none; }
body[data-panel-layout] .a-content :is(.card-solid-header, .card-gradient-header, .dashboard-hero) {
  background: var(--grape-100) !important;
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 22px !important;
  box-shadow: none !important;
  padding: clamp(24px, 3vw, 36px);
}
body[data-panel-layout] :is(.card-solid-header, .card-gradient-header, .dashboard-hero) :is(h1, h2, p) {
  color: var(--ink) !important;
}
body[data-panel-layout] :is(.card-solid-header, .card-gradient-header, .dashboard-hero) h1 {
  font-size: clamp(25px, 2.8vw, 34px);
  line-height: 1.6;
}
body[data-panel-layout] :is(.card-solid-header, .card-gradient-header, .dashboard-hero) p { line-height: 1.9; }
body[data-panel-layout] .admin-shell :is(.btn-primary, .btn.btn-primary, .admin-btn-primary, .btn-accent) {
  background: var(--sun) !important;
  color: #292340 !important;
  border: 1px solid #e0a130 !important;
  box-shadow: none !important;
}
body[data-panel-layout] .admin-shell :is(.btn-primary, .btn.btn-primary, .admin-btn-primary, .btn-accent):hover {
  background: #ffc85d !important;
}
body[data-panel-layout] .admin-shell :is(.kids-btn-primary, .family-button--primary),
.child-shell-body .family-button--primary {
  color: #fff;
  background: #7454b8;
  border-color: #7454b8;
  box-shadow: none;
}
body[data-panel-layout] .admin-shell .kids-btn-secondary {
  color: var(--grape);
  background: var(--white);
  border-color: var(--line);
  box-shadow: none;
}
body[data-panel-layout] .a-content :is(.btn, .kids-btn, .admin-btn, .family-button) {
  min-height: 44px;
  border-radius: 12px;
  white-space: normal;
  text-align: center;
  line-height: 1.7;
}
body[data-panel-layout] .a-page-head { flex-wrap: wrap; }
body[data-panel-layout] .a-page-head-actions { flex-wrap: wrap; }
body[data-panel-layout] :is(.btn-icon, .a-topbar-avatar) { border-radius: 13px; }
body[data-panel-layout] .btn-icon:hover { color: var(--grape); border-color: var(--grape); }
body[data-panel-layout] .a-content :is(input, select, textarea) { max-width: 100%; }
body[data-panel-layout] .a-content :is(input:not([type]), input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], input[type="tel"], input[type="url"], select) { min-height: 44px; }
body[data-panel-layout] :is(a, button, input, select, textarea, [tabindex]):focus-visible,
.child-shell-body :is(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--grape) !important;
  outline-offset: 3px;
}
body[data-panel-layout] .a-content :is(.table-wrap, .table-responsive, .overflow-x-auto) { scrollbar-width: thin; scrollbar-color: var(--line) transparent; }
body[data-panel-layout] .a-content table :is(th, td) { vertical-align: middle; }
body[data-panel-layout] .a-content table thead th { color: var(--ink-soft) !important; background: var(--canvas-2) !important; }
body[data-panel-layout] .a-content table tbody tr:hover { background: var(--canvas-2) !important; }
body[data-panel-layout] .header-action-btn:hover { color: var(--grape) !important; background: var(--grape-100) !important; border-color: var(--line) !important; box-shadow: none !important; }
body[data-panel-layout] .a-content :is(.kpi-num, .card-stat-value) { font-variant-numeric: tabular-nums; }
body[data-panel-layout] .a-content :is(.tone-sun, .kpi-ic.tone-sun) { color: var(--sun-deep); background: var(--sun-100); }
body[data-panel-layout] .a-content :is(.tone-grape, .kpi-ic.tone-grape) { color: var(--grape); background: var(--grape-100); }
body[data-panel-layout] .a-content :is(.bg-blue-50, .bg-blue-100, .bg-indigo-50, .bg-indigo-100) { background-color: var(--grape-100) !important; }
body[data-panel-layout] .a-content :is(.text-blue-600, .text-blue-700, .text-indigo-600, .text-indigo-700) { color: var(--grape) !important; }
body[data-panel-layout] .a-content :is(.border-blue-200, .border-indigo-200) { border-color: var(--line) !important; }
body[data-panel-layout] .a-content #dashKpiRow1 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
body[data-panel-layout] .a-content .kpi-grid.compact { grid-template-columns: repeat(4, minmax(0, 1fr)); }
body[data-panel-layout] .dash-kpi-card::before { background: var(--grape-100); }
body[data-panel-layout] .panel-bottom-nav { box-shadow: 0 -4px 18px rgb(41 35 64 / 5%); }
body[data-panel-layout] .bn-fab :is(a, button) { background: var(--sun); color: #292340; box-shadow: 0 3px 0 #dba037; }
body[data-panel-layout] .parent-more-link { min-height: 46px; }
body[data-panel-layout] .parent-more-link.active { color: var(--ink); background: var(--sun-100); }

.family-welcome { background: var(--grape-100); border-color: var(--line); }
.family-welcome h1 { color: var(--ink); }
.family-welcome__description { color: var(--ink-soft); }
.family-eyebrow { color: var(--grape); }
.family-button--primary { color: #fff; background: #7454b8; }
.family-button--primary:hover { color: #fff; background: #5c3e98; }
.family-button--secondary { color: var(--grape); background: var(--white); border-color: var(--line); }
.family-welcome__art-note { color: var(--grape); background: var(--white); border-color: var(--line); }
.family-welcome__orbit--two { color: var(--grape); background: var(--white); }
.family-shortcuts > a { min-width: 0; }
.family-shortcuts strong { line-height: 1.8; }
.family-shortcuts small { font-size: 11px; }
body[data-panel-layout] #onboarding-checklist > div { padding: 0; }
body[data-panel-layout] #onboarding-checklist [role="progressbar"] { background: var(--canvas-2); }
body[data-panel-layout] #onboarding-checklist [role="progressbar"] > div { background: #7454b8; }
body[data-panel-layout] #onboarding-checklist .text-primary { color: var(--grape); }

/* Child pages keep large learning targets while using the same chrome. */
/* Readable secondary text and actions on the shared light/dark panel surfaces. */
body[data-panel-layout] .a-content :is(.text-ink-muted, .card-empty-description,
  .text-slate-400, .text-slate-500) { color: var(--ink-soft) !important; }
body[data-panel-layout] :is(.card-solid-header, .card-gradient-header) .btn-action-white {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 16px;
  color: var(--grape-deep, #5c3e99); background: var(--white);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: none;
}
body[data-panel-layout] :is(.card-solid-header, .card-gradient-header) .btn-action-white:hover {
  color: var(--ink); background: var(--canvas-2); border-color: var(--grape);
}
body[data-panel-layout] .a-content :is(.status-pill.on, .kpi-delta.up) { color: #176548; background: #e4f3e8; }
body[data-panel-layout] .a-content .advanced-filter-badge { color: #292340; background: #f6b540; }
body[data-panel-layout] .a-content .text-red-500 { color: #bd3655; }
body[data-panel-layout] .a-content .profile-tab-label { color: var(--ink-soft); }
body[data-panel-layout] .a-content .profile-tab[aria-selected="true"] .profile-tab-label { color: var(--ink); }
body[data-panel-layout] .a-content :is(.profile-callout-title, .profile-identity-label) { color: var(--grape-deep); }
body[data-panel-layout] .a-content .profile-callout-desc { color: var(--ink-soft); }
body[data-panel-layout] .profile-count { color: var(--grape-deep); background: var(--grape-100); }
body[data-panel-layout] .scs-ad__fallback-cta { color: #fff; background: #5c3e99; }
.child-shell-body .child-zone-path__num { color: #292340; background: #f6b540; }
.child-shell-body .text-primary { color: var(--grape-deep) !important; }

.child-shell { background: var(--canvas); }
.child-shell__header { background: var(--white); border-color: var(--line); }
.child-shell__exit { background: var(--white); border-color: var(--line); border-radius: 12px; }
.child-shell__pill--xp { color: var(--grape); background: var(--grape-100); border-color: var(--line); }
.child-shell__pill--coins { color: var(--sun-deep); background: var(--sun-100); border-color: var(--line); }
.child-zone-hero { background: var(--grape-100); color: var(--ink); border-color: var(--line); }
.child-zone-hero__title { color: var(--ink); }
.child-zone-hero__sub { color: var(--ink-soft); }
.child-zone-hero__actions .btn-light,
.child-shell-main .btn.btn-primary,
.child-shell-main .btn-primary,
.child-pin-modal__confirm { background: #7454b8 !important; border-color: #7454b8 !important; color: #fff !important; }
.child-zone-hero__actions .btn-ghost-zone { background: var(--white); border-color: var(--line); color: var(--grape); }
.child-zone-panel, .child-zone-stat, .child-zone-tile, .child-pin-modal__panel,
.vocabulary-review { background: var(--white); border-color: var(--line); color: var(--ink); }
.child-zone-panel :is(h2, h3), .vocabulary-review h1 { color: var(--ink); }
.child-learning-breadcrumb a, .child-pin-modal__close { background: var(--white); color: var(--grape); border-color: var(--line); }
.child-learning-breadcrumb span, .child-pin-modal__hint, .vocabulary-review__hint { color: var(--ink-soft); }
.vocabulary-review__flashcard { background: var(--grape-100); border-color: var(--line); }
.vocabulary-review__word { color: var(--ink); }
.vocabulary-review__translation { color: var(--ink-soft); }
.vocabulary-review__reveal { background: var(--white); border-color: var(--line); color: var(--grape); }
.vocabulary-review__back { color: var(--grape); }
.child-shell-main .card { border: 1px solid var(--line); box-shadow: var(--family-shadow); }
.child-shell-body .placement-page {
  --pl-surface: var(--white);
  --pl-ink: var(--ink);
  --pl-muted: var(--ink-soft);
  --pl-border: var(--line);
  --pl-primary: #7454b8;
  --pl-primary-dark: #5c3e98;
  --pl-primary-soft: var(--grape-100);
  --pl-shadow: var(--family-shadow);
  --quiz-surface: var(--white);
  --quiz-elevated: var(--canvas-2);
  --quiz-ink: var(--ink);
  --quiz-muted: var(--ink-soft);
  --quiz-border: var(--line);
}
.child-shell-body .placement-btn--primary { color: #fff; background: #7454b8; box-shadow: none; border-radius: 12px; }
.child-shell-body .placement-btn--primary:hover { background: #5c3e98; box-shadow: none; }
.child-shell-body .placement-intro__step-num { color: var(--ink); background: var(--sun-100); }
.child-shell-body .placement-intro__steps li { background: var(--canvas); border-color: var(--line); }
.child-shell-body .placement-intro__meta li { background: var(--canvas-2); border-color: var(--line); color: var(--ink-soft); }
.child-shell-body .placement-topbar { background: var(--white); }
.child-shell-body .placement-topbar__fill { background: #7454b8; }

html[data-theme="dark"] body[data-panel-layout] .family-welcome,
html[data-theme="dark"] .child-zone-hero { background: var(--grape-100); border-color: var(--line); }
html[data-theme="dark"] body[data-panel-layout] .family-welcome h1 { color: var(--ink); }
html[data-theme="dark"] body[data-panel-layout] .family-welcome__description { color: var(--ink-soft) !important; }
html[data-theme="dark"] body[data-panel-layout] .family-eyebrow { color: var(--grape); }
html[data-theme="dark"] body[data-panel-layout] .a-content :is(.text-slate-400, .text-slate-500, .text-slate-600, .text-ink-muted, .kpi-label) { color: var(--ink-soft) !important; }
html[data-theme="dark"] body[data-panel-layout] .a-content > .panel { background: transparent !important; }
html[data-theme="dark"] body[data-panel-layout] .a-topbar { background: var(--canvas); }
html[data-theme="dark"] body[data-panel-layout] .a-brand-sub { color: var(--grape); }
html[data-theme="dark"] body[data-panel-layout] .a-nav .nav-link.active { background: var(--sun-100) !important; color: var(--ink) !important; }
html[data-theme="dark"] body[data-panel-layout] .profile-avatar-initial { color: #292340; }
.child-shell-body .child-zone-hero__sub { color: var(--ink-soft); opacity: 1; }

/* Reader chrome: retain page-flip stage textures and full viewport behavior. */
.library-reader-body {
  --lr-ink: #292340;
  --lr-ink-soft: #6d657f;
  --lr-canvas: #fffbf5;
  --lr-canvas-2: #f8f3eb;
  --lr-sun: #f6b540;
  --lr-sun-deep: #94600b;
  --lr-sun-100: #fff0cf;
  --lr-line: #e9e1d5;
}
.library-reader-body .library-reader-toolbar { background: var(--lr-canvas); }
.library-reader-body .library-reader-btn { min-height: 44px; min-width: 44px; border-radius: 12px; }
.library-reader-body .library-reader-btn--primary { background: var(--lr-sun); color: #292340; box-shadow: none; border-color: #e0a130; }
.library-reader-body .library-reader-btn--primary:hover { background: #ffc85d; box-shadow: none; }
.library-reader-body .library-reader-page-indicator { color: var(--lr-ink); }
.library-reader-body :is(a, button):focus-visible { outline: 3px solid #7454b8; outline-offset: 3px; }
.library-reader-body .library-reader-toolbar__inner { max-width: 1440px; margin-inline: auto; padding-inline: 20px; }

@media (max-width: 767px) {
  body[data-panel-layout] .a-content :is(#dashKpiRow1, .kpi-grid.compact) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  body[data-panel-layout] .a-topbar-inner { padding-inline: 14px; }
  body[data-panel-layout] .a-page-head-actions { width: 100%; }
  body[data-panel-layout] .a-page-head-actions > :is(a, button) { flex: 1 1 auto; }
  body[data-panel-layout] .a-content :is(.card-solid-header, .card-gradient-header, .dashboard-hero) { padding: 24px 20px; }
  body[data-panel-layout] .a-content :is(.table-card, .table-wrap) { border-radius: 16px; }
  body[data-panel-layout] .a-content table :is(th, td) { padding: 12px; }
  .family-welcome__actions .family-button { min-height: 48px; }
  .child-shell__identity { flex: 1 1 100%; }
  .child-shell__stats { width: 100%; justify-content: flex-start; }
  .child-shell__exit { margin-inline-start: auto; }
  .child-zone-hero__actions .btn { min-height: 48px; }
  .library-reader-body .library-reader-toolbar__inner { padding-inline: 12px; }
}
@media (max-width: 389px) {
  .family-shortcuts { grid-template-columns: 1fr; }
  .family-shortcuts > a { padding: 12px 14px; }
  body[data-panel-layout] .a-breadcrumb { font-size: 10px; }
  body[data-panel-layout] .a-topbar-actions { gap: 5px; }
}