/* Student, reader, and family shell surfaces extracted from app.py. */

/* Student role theme. */
.app-body.role-student {
  --student-bg:#f5fbff;
  --student-bg-alt:#fff8ed;
  --student-bg-soft:#f7fff8;
  --student-sidebar-start:#256f8c;
  --student-sidebar-mid:#27837f;
  --student-sidebar-end:#5d5fa4;
  --student-accent:#0d8aa6;
  --student-accent-strong:#075f73;
  --student-accent-soft:#e9f8fb;
  --student-accent-soft-2:#d7f0f5;
  --student-border:rgba(13,138,166,0.16);
  --student-border-strong:rgba(13,138,166,0.30);
  --student-shadow:rgba(31,95,119,0.10);
  --student-shadow-strong:rgba(31,95,119,0.18);
  --student-ink:#172b35;
  --student-copy:#526977;
  --student-hero-start:#c7efff;
  --student-hero-mid:#d7f6e6;
  --student-hero-end:#fff0c7;
  --student-hero-text:#16313c;
  --student-reading-bg:#dff4ff;
  --student-reading-text:#12627c;
  --student-writing-bg:#ffedd5;
  --student-writing-text:#9a5b16;
  --student-audio-bg:#dcfce7;
  --student-audio-text:#246b45;
  --student-quiz-bg:#ece7ff;
  --student-quiz-text:#6750a4;
  --student-success-bg:#e7f7df;
  --student-success-text:#3b6d26;
  --student-review-bg:#eaf2ff;
  --student-review-text:#3860a8;
  --student-done-bg:#eef7ef;
  --student-done-text:#486b4c;
  --student-warn-bg:#ffe4df;
  --student-warn-text:#a44432;
  background:linear-gradient(180deg,var(--student-bg) 0%,var(--student-bg-alt) 44%,var(--student-bg-soft) 100%);
}
.app-body.role-student .main { padding:24px 24px 38px; }
.app-body.role-student .page-container { max-width:1180px; }
.app-body.role-student .page-title { display:none; }
.app-body.role-student .sidebar { background:linear-gradient(180deg,var(--student-sidebar-start) 0%,var(--student-sidebar-mid) 38%,var(--student-sidebar-end) 100%); border-right:none; box-shadow:20px 0 48px rgba(78,102,113,0.16); }
.app-body.role-student .brand { margin-bottom:18px; }
.app-body.role-student .brand-mark { font-size:28px; line-height:1.04; letter-spacing:-0.04em; }
.app-body.role-student .brand-subtitle { display:block; color:#dff7ff; letter-spacing:0.08em; }
.app-body.role-student .nav-link,
.app-body.role-student .nav-link:visited { gap:12px; margin-bottom:10px; padding:13px 14px; border-radius:20px; color:rgba(255,255,255,0.82); font-size:15px; font-weight:800; }
.app-body.role-student .nav-link-icon { display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:14px; background:rgba(255,255,255,0.16); color:#fff; font-size:14px; font-weight:900; flex-shrink:0; }
.app-body.role-student .nav-link-label { min-width:0; overflow-wrap:anywhere; }
.app-body.role-student .nav-link:hover { background:rgba(255,255,255,0.15); color:#fff; transform:none; }
.app-body.role-student .nav-link:hover .nav-link-icon { background:rgba(255,255,255,0.24); }
.app-body.role-student .nav-link.active { background:rgba(255,255,255,0.22); color:#fff; box-shadow:0 14px 24px rgba(66,84,92,0.14); }
.app-body.role-student .nav-link.active .nav-link-icon { background:#fff; color:var(--student-accent-strong); }
.app-body.role-student .topbar { background:rgba(255,255,255,0.86); border-color:var(--student-border); box-shadow:0 16px 34px var(--student-shadow); }
.app-body.role-student .topbar-primary { gap:14px; }
.app-body.role-student .topbar-kicker { color:var(--student-accent); }
.app-body.role-student .topbar-identity { font-size:22px; line-height:1.08; }
.app-body.role-student .topbar-mini-field { background:var(--student-accent-soft); border-color:var(--student-border); }
.app-body.role-student .topbar-mini-label { color:var(--student-accent); }
.app-body.role-student .topbar-status-chip { background:var(--student-accent-soft); border-color:var(--student-border); color:var(--student-accent-strong); }
.app-body.role-student .mobile-nav-toggle { background:var(--student-accent-soft); color:var(--student-accent-strong); border-color:var(--student-border); }
.app-body.role-student .card { background:rgba(255,255,255,0.9); border:1px solid var(--student-border); border-radius:28px; box-shadow:0 16px 36px var(--student-shadow); }
.app-body.role-student .card h3,
.app-body.role-student .card h4 { font-size:22px; letter-spacing:-0.04em; color:var(--student-ink); }
.app-body.role-student .hero-panel { display:block !important; position:relative; overflow:hidden; padding:26px 28px; border:none; border-radius:32px; background:linear-gradient(135deg,var(--student-hero-start) 0%,var(--student-hero-mid) 48%,var(--student-hero-end) 100%); color:var(--student-hero-text); box-shadow:0 22px 48px var(--student-shadow-strong); }
.app-body.role-student .hero-panel::before,
.app-body.role-student .hero-panel::after { display:none; }
.app-body.role-student .hero-panel > * { position:relative; z-index:1; }
.app-body.role-student .hero-title { position:relative; margin:0 0 10px; font-size:42px; font-weight:900; line-height:1.03; letter-spacing:-0.05em; color:var(--student-hero-text); }
.app-body.role-student .hero-copy { position:relative; max-width:38rem; color:rgba(36,52,59,0.82); font-size:15px; line-height:1.7; }
.app-body.role-student .hero-chip-row { position:relative; }
.app-body.role-student .hero-chip { background:rgba(255,255,255,0.34); border:1px solid rgba(255,255,255,0.26); color:var(--student-accent-strong); }
.app-body.role-student .section-kicker { display:inline-flex !important; background:var(--student-accent-soft); color:var(--student-accent-strong); }
.app-body.role-student .hero-panel .section-kicker { position:relative; background:rgba(255,255,255,0.34); color:var(--student-accent-strong); }
.app-body.role-student .section-copy,
.app-body.role-student .section-note { display:block !important; color:var(--student-copy); }
.app-body.role-student .hero-panel .section-copy,
.app-body.role-student .hero-panel .section-note { position:relative; color:rgba(36,52,59,0.78); }
.app-body.role-student .stat-grid,
.app-body.role-student .ops-stats-grid { display:grid !important; }
.app-body.role-student .stat-card,
.app-body.role-student .ops-stat { background:linear-gradient(180deg,#ffffff 0%,#f7f8f3 100%); border:1px solid var(--student-border); border-radius:22px; box-shadow:0 12px 24px rgba(78,102,113,0.06); }
.app-body.role-student .stat-label,
.app-body.role-student .ops-stat-label { color:var(--student-accent); }
.app-body.role-student .stat-note,
.app-body.role-student .ops-stat-copy,
.app-body.role-student .muted { color:var(--student-copy); }
.app-body.role-student .quick-action { border-radius:22px; border-color:var(--student-border); box-shadow:0 12px 24px rgba(78,102,113,0.06); }
.app-body.role-student .quick-action:hover { border-color:var(--student-border-strong); }
.app-body.role-student input,
.app-body.role-student select,
.app-body.role-student textarea { border-color:var(--student-border); border-radius:18px; background:rgba(255,255,255,0.96); }
.app-body.role-student input:focus,
.app-body.role-student select:focus,
.app-body.role-student textarea:focus { border-color:var(--student-accent); box-shadow:0 0 0 4px rgba(97,121,133,0.16); }
.app-body.role-student button,
.app-body.role-student .btn { border-radius:16px; font-weight:900; background:linear-gradient(135deg,#0d8aa6 0%,#287c85 100%); color:#fff; box-shadow:0 12px 24px rgba(13,138,166,0.16); }
.app-body.role-student .btn.secondary { background:linear-gradient(135deg,#6b73b7,#417f97); box-shadow:0 10px 20px rgba(65,127,151,0.14); }
.app-body.role-student .table-wrap { border-radius:22px; border:1px solid var(--student-border); box-shadow:0 12px 24px rgba(78,102,113,0.06); }
.app-body.role-student th { background:var(--student-accent-soft); color:var(--student-accent-strong); font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.app-body.role-student td { border-color:var(--student-accent-soft-2); }
.app-body.role-student .empty-msg { color:#64748b; }
.app-body.role-student .mini-link,
.app-body.role-student .picker-link { display:inline-flex; align-items:center; justify-content:center; min-height:34px; padding:7px 12px; border-radius:12px; background:var(--student-accent-soft); color:var(--student-accent-strong); font-weight:800; text-decoration:none; }
.app-body.role-student .mini-link:hover,
.app-body.role-student .picker-link:hover { background:var(--student-accent-soft-2); }
@media (max-width: 900px) {
  .app-body.role-student .main { padding:12px; }
  .app-body.role-student .sidebar { width:min(84vw,320px); padding:20px 14px; }
  .app-body.role-student .nav-link,
  .app-body.role-student .nav-link:visited { margin-bottom:8px; padding:12px; border-radius:18px; }
  .app-body.role-student .nav-link-icon { width:34px; height:34px; border-radius:12px; }
  .app-body.role-student .hero-panel { padding:20px 22px; border-radius:26px; }
  .app-body.role-student .hero-title { font-size:32px; }
  .app-body.role-student .card { border-radius:24px; }
  .app-body.role-student .student-task-inbox { padding:18px; border-radius:24px; }
  .app-body.role-student .student-task-detail { padding:18px; border-radius:24px; }
}
@media (max-width: 768px) {
  .app-body.role-student .topbar { padding:12px; border-radius:20px; }
  .app-body.role-student .topbar-primary { align-items:flex-start; }
  .app-body.role-student .topbar-identity { font-size:18px; }
  .app-body.role-student .topbar-action-group { width:100%; }
  .app-body.role-student .topbar-mini-field { width:100%; justify-content:space-between; }
  .app-body.role-student .topbar-tools-group { justify-content:flex-end; }
  .app-body.role-student .mobile-nav-toggle { min-height:40px; border-radius:14px; }
  .app-body.role-student .hero-title { font-size:28px; }
  .app-body.role-student .hero-copy { font-size:14px; line-height:1.6; }
  .app-body.role-student .table-wrap { border-radius:18px; }
}

/* Student reading/library surfaces. */
/* Student reading and library surfaces. */
.student-library-shell,
.student-reader-shell { display:grid; gap:18px; }
.student-library-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:12px; }
.student-book-card,
.student-reader-panel,
.student-chapter-card { display:grid; gap:12px; min-width:0; padding:20px; border-radius:28px; border:1px solid var(--student-border); background:rgba(255,255,255,0.92); box-shadow:0 16px 34px var(--student-shadow); }
.student-book-card { grid-template-columns:72px minmax(0,1fr); align-items:center; gap:12px; padding:12px; border-radius:22px; }
.student-book-preview { position:relative; display:block; width:72px; text-decoration:none; }
.student-book-page { position:relative; overflow:hidden; aspect-ratio:4 / 5.45; border-radius:18px; background:linear-gradient(180deg,#f8f7f2 0%,#e7ede9 100%); box-shadow:8px 12px 18px rgba(78,102,113,0.08), inset 0 0 0 1px rgba(255,255,255,0.5); }
.student-book-page::before { content:''; position:absolute; inset:0 auto 0 0; width:8px; background:linear-gradient(180deg,rgba(255,255,255,0.9) 0%,rgba(230,236,233,0.92) 100%); box-shadow:3px 0 8px rgba(15,23,42,0.05); z-index:2; }
.student-book-page::after { content:''; position:absolute; inset:10px 10px auto auto; width:52px; height:52px; border-radius:999px; background:rgba(255,255,255,0.18); z-index:2; }
.student-book-page img { position:relative; z-index:1; display:block; width:100%; height:100%; object-fit:cover; }
.student-book-page-fallback { display:grid; place-items:center; width:100%; height:100%; background:linear-gradient(135deg,#97ada6 0%,#aac1b9 48%,#c7d9d4 100%); color:var(--student-hero-text); font-size:24px; font-weight:900; letter-spacing:-0.03em; }
.student-book-page-fallback span { padding:0 20px; text-align:center; }
.student-book-preview-badge { display:none; }
.student-book-body,
.student-reader-copy { display:grid; gap:10px; min-width:0; }
.student-book-kicker { display:inline-flex; width:fit-content; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; background:var(--student-accent-soft); color:var(--student-accent-strong); font-size:11px; font-weight:900; letter-spacing:0.08em; text-transform:uppercase; }
.student-book-title,
.student-reader-copy h3 { margin:0; font-size:28px; line-height:1.05; letter-spacing:-0.05em; color:#111827; }
.student-book-meta,
.student-reader-copy p { color:#64748b; font-size:14px; line-height:1.6; }
.student-book-card .student-book-title { font-size:18px; line-height:1.12; }
.student-book-card .student-book-meta { font-size:12px; line-height:1.45; }
.student-book-pill-row { display:flex; flex-wrap:wrap; gap:8px; }
.student-book-pill { display:inline-flex; align-items:center; min-height:28px; padding:0 12px; border-radius:999px; background:#f7f8f3; border:1px solid var(--student-border); color:var(--student-accent-strong); font-size:12px; font-weight:800; }
.student-book-note { color:#64748b; font-size:13px; line-height:1.55; }
.student-book-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:4px; }
.student-book-actions .btn { flex:0 0 auto; min-height:40px; padding:0 14px; }
.student-book-card .student-book-pill-row,
.student-book-card .student-book-note,
.student-book-card .btn.secondary { display:none; }
.student-book-card .student-book-actions { margin-top:0; }
.student-reading-product { display:grid; gap:18px; }
.student-reading-hero { display:grid; grid-template-columns:minmax(0,1fr) minmax(112px,160px); gap:18px; align-items:center; padding:22px; border-radius:28px; background:linear-gradient(135deg,#dff4ff 0%,#e7f7df 54%,#fff3d8 100%); border:1px solid var(--student-border); box-shadow:0 18px 38px var(--student-shadow); overflow:hidden; }
.student-reading-hero-copy { display:grid; gap:10px; min-width:0; }
.student-reading-kicker { display:inline-flex; width:fit-content; align-items:center; min-height:26px; padding:0 10px; border-radius:999px; background:rgba(255,255,255,0.52); color:var(--student-accent-strong); font-size:11px; font-weight:900; letter-spacing:0.1em; text-transform:uppercase; }
.student-reading-hero-title { margin:0; max-width:14ch; font-size:38px; line-height:1.02; letter-spacing:-0.04em; color:var(--student-ink); overflow-wrap:anywhere; }
.student-reading-hero p { margin:0; color:var(--student-copy); font-size:14px; line-height:1.55; }
.student-reading-hero-preview { justify-self:end; width:min(100%,154px); text-decoration:none; }
.student-reading-hero .student-book-page { border-radius:20px; box-shadow:12px 16px 26px rgba(31,95,119,0.14), inset 0 0 0 1px rgba(255,255,255,0.55); }
.student-reading-empty { min-height:180px; grid-template-columns:1fr; }
.student-reading-shelf { display:grid; gap:14px; }
.student-reading-stats { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; }
.student-reading-stat { min-height:72px; padding:12px 14px; border:1px solid var(--student-border); border-radius:18px; background:rgba(255,255,255,0.86); }
.student-reading-stat span { display:block; color:var(--student-accent-strong); font-size:11px; font-weight:900; letter-spacing:0.08em; text-transform:uppercase; }
.student-reading-stat strong { display:block; margin-top:6px; color:var(--student-ink); font-size:28px; line-height:1; letter-spacing:-0.03em; }
.student-reading-grid { grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:14px; }
.student-reading-product .student-reading-book-card { grid-template-columns:86px minmax(0,1fr); align-items:start; padding:14px; border-radius:22px; }
.student-reading-product .student-reading-book-card .student-book-preview { width:86px; }
.student-reading-product .student-reading-book-card .student-book-pill-row { display:flex; }
.student-reading-product .student-reading-book-card .student-book-note { display:block; margin:0; }
.student-reading-product .student-reading-book-card .btn.secondary { display:inline-flex; }
.student-reading-product .student-reading-book-card .student-book-actions { margin-top:2px; }
.student-reading-product .student-book-actions .btn { min-height:38px; }
.student-reader-hero { display:grid; grid-template-columns:minmax(0,1fr) 136px; gap:14px; align-items:center; padding:18px 20px; border-radius:28px; background:linear-gradient(180deg,rgba(255,255,255,0.94) 0%,rgba(242,245,241,0.96) 100%); border:1px solid var(--student-border); box-shadow:0 16px 34px var(--student-shadow); }
.student-reader-preview { justify-self:end; width:min(100%,136px); }
.student-reader-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.student-reader-panel h4,
.student-chapter-card h4 { margin:0; font-size:24px; line-height:1.08; letter-spacing:-0.04em; color:#111827; }
.student-reader-chapter-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:16px; }
.student-chapter-card { align-content:start; }
.student-chapter-card audio { width:100%; border-radius:14px; }
@media (max-width: 760px) {
  .student-reading-hero { grid-template-columns:minmax(0,1fr); padding:18px; border-radius:24px; }
  .student-reading-hero-title { max-width:none; font-size:30px; }
  .student-reading-hero-preview { justify-self:start; width:118px; }
  .student-reading-stats { grid-template-columns:1fr; }
  .student-reading-grid { grid-template-columns:1fr; }
  .student-reading-product .student-reading-book-card { grid-template-columns:74px minmax(0,1fr); }
  .student-reading-product .student-reading-book-card .student-book-preview { width:74px; }
  .student-reading-product .student-book-actions { display:grid; grid-template-columns:1fr; }
  .student-reading-product .student-book-actions .btn { width:100%; }
}

/* Parent/family surfaces. */
.app-body.role-parent {
  --family-bg:#f7fbff;
  --family-bg-alt:#fff7ed;
  --family-bg-soft:#fbfff7;
  --family-sidebar-start:#2d6f8b;
  --family-sidebar-mid:#3d7b85;
  --family-sidebar-end:#5c6f9f;
  --family-accent:#23758e;
  --family-accent-strong:#14586e;
  --family-accent-soft:#eaf7fb;
  --family-accent-soft-2:#d9eef5;
  --family-border:rgba(35,117,142,0.16);
  --family-border-strong:rgba(35,117,142,0.28);
  --family-shadow:rgba(31,95,119,0.08);
  --family-shadow-strong:rgba(31,95,119,0.13);
  --family-ink:#1f3340;
  --family-copy:#586c77;
  background:linear-gradient(180deg,var(--family-bg) 0%,var(--family-bg-alt) 44%,var(--family-bg-soft) 100%);
}
.app-body.role-parent .main { padding:24px 24px 38px; }
.app-body.role-parent .sidebar { background:linear-gradient(180deg,var(--family-sidebar-start) 0%,var(--family-sidebar-mid) 42%,var(--family-sidebar-end) 100%); border-right:none; box-shadow:20px 0 44px rgba(78,102,113,0.14); }
.app-body.role-parent .nav-link,
.app-body.role-parent .nav-link:visited { color:rgba(255,255,255,0.84); font-weight:800; border-radius:18px; }
.app-body.role-parent .nav-link:hover { background:rgba(255,255,255,0.14); color:#fff; transform:none; }
.app-body.role-parent .nav-link.active { background:rgba(255,255,255,0.2); color:#fff; box-shadow:0 12px 22px rgba(66,84,92,0.14); }
.app-body.role-parent .topbar { background:rgba(255,255,255,0.88); border-color:var(--family-border); box-shadow:0 14px 30px var(--family-shadow); }
.app-body.role-parent .topbar-kicker { color:var(--family-accent); }
.app-body.role-parent .topbar-mini-field { background:var(--family-accent-soft); border-color:var(--family-border); }
.app-body.role-parent .topbar-mini-label { color:var(--family-accent); }
.app-body.role-parent .topbar-status-chip { background:var(--family-accent-soft); border-color:var(--family-border); color:var(--family-accent-strong); }
.app-body.role-parent .mobile-nav-toggle { background:var(--family-accent-soft); color:var(--family-accent-strong); border-color:var(--family-border); }
.app-body.role-parent .btn { border-radius:16px; font-weight:900; background:linear-gradient(135deg,#23758e 0%,#396fa0 100%); color:#fff; box-shadow:0 10px 20px rgba(35,117,142,0.14); }
.app-body.role-parent .btn.secondary { background:linear-gradient(135deg,#6b73b7,#417f97); box-shadow:0 8px 16px rgba(65,127,151,0.12); }
.family-shell { display:grid; gap:18px; }
.family-hero-compact { padding:20px 22px; }
.family-hero { position:relative; overflow:hidden; padding:24px; border-radius:28px; background:linear-gradient(135deg,#0f2f63 0%,#1d4ed8 48%,#e0f2fe 100%); color:#eff6ff; box-shadow:0 22px 48px rgba(15,23,42,0.16); }
.family-hero::after { display:none; }
.family-hero-grid { position:relative; display:grid; grid-template-columns:minmax(0,1.5fr) minmax(280px,0.9fr); gap:18px; align-items:stretch; }
.family-subpage-hero { background:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%); color:#0f172a; box-shadow:0 10px 24px rgba(15,23,42,0.06); }
.family-subpage-hero::after { display:none; }
.family-subpage-hero .family-kicker,
.family-subpage-hero .family-title,
.family-subpage-hero .family-spotlight-title { color:#0f172a; }
.family-subpage-hero .family-pill { background:#ffffff; color:#334155; border:1px solid rgba(148,163,184,0.22); }
.family-subpage-hero .family-spotlight { background:#ffffff; border:1px solid rgba(148,163,184,0.18); }
.family-subpage-hero .family-spotlight-label { color:#2563eb; }
.family-subpage-hero .family-spotlight-copy,
.family-subpage-hero .family-spotlight-meta div { color:#475569; }
.family-kicker { font-size:12px; font-weight:800; letter-spacing:0.14em; text-transform:uppercase; color:rgba(224,242,254,0.84); }
.family-title { margin:8px 0 10px; font-size:34px; line-height:1.04; letter-spacing:-0.04em; color:#fff; }
.family-copy { max-width:54ch; font-size:15px; line-height:1.65; color:rgba(239,246,255,0.86); }
.family-meta-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.family-pill { display:inline-flex; align-items:center; gap:8px; min-height:36px; padding:8px 14px; border-radius:999px; background:rgba(15,23,42,0.22); color:#fff; font-size:13px; font-weight:700; backdrop-filter:blur(10px); }
.family-pill strong { font-size:14px; }
.family-switcher { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.family-switcher .btn { min-height:38px; padding:8px 14px; border-radius:999px; box-shadow:none; border:1px solid rgba(255,255,255,0.24); background:rgba(255,255,255,0.14); color:#fff; }
.family-switcher .btn.secondary { background:rgba(15,23,42,0.2); color:#dbeafe; }
.family-hero-side { display:grid; gap:12px; }
.family-spotlight { padding:18px 18px 16px; border-radius:22px; background:rgba(255,255,255,0.16); border:1px solid rgba(255,255,255,0.18); backdrop-filter:blur(16px); }
.family-spotlight-label { font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:rgba(224,242,254,0.82); }
.family-spotlight-title { margin:10px 0 8px; font-size:24px; line-height:1.12; font-weight:900; letter-spacing:-0.03em; color:#fff; }
.family-spotlight-copy { color:rgba(239,246,255,0.84); font-size:14px; line-height:1.55; }
.family-spotlight-meta { display:grid; gap:8px; margin-top:14px; }
.family-spotlight-meta div { display:flex; justify-content:space-between; gap:12px; font-size:13px; color:#eff6ff; }
.family-grid { display:grid; gap:16px; grid-template-columns:minmax(0,1.25fr) minmax(320px,0.95fr); }
.family-card { background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); border:1px solid rgba(148,163,184,0.18); border-radius:24px; padding:20px; box-shadow:0 12px 28px rgba(15,23,42,0.05); }
.family-card.soft { background:linear-gradient(180deg,#f8fbff 0%,#eef4ff 100%); }
.family-card-header { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; margin-bottom:14px; }
.family-card-header h3, .family-card-header h4 { margin:4px 0 0; font-size:24px; line-height:1.18; }
.family-card-kicker { font-size:11px; font-weight:800; letter-spacing:0.12em; text-transform:uppercase; color:#2563eb; }
.family-card-copy { max-width:38ch; color:#64748b; font-size:13px; line-height:1.6; }
.family-stat-row { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.family-stat { padding:14px 16px; border-radius:18px; background:#fff; border:1px solid rgba(148,163,184,0.14); }
.family-stat-label { font-size:11px; font-weight:800; letter-spacing:0.1em; text-transform:uppercase; color:#64748b; }
.family-stat-value { margin-top:6px; font-size:28px; line-height:1; font-weight:900; letter-spacing:-0.04em; color:#0f172a; }
.family-stat-copy { margin-top:6px; font-size:12px; color:#64748b; line-height:1.5; }
.family-app-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); }
.family-app-card { display:grid; gap:12px; align-content:space-between; min-height:164px; padding:18px; border-radius:22px; border:1px solid rgba(148,163,184,0.16); background:#fff; color:#0f172a; text-decoration:none; box-shadow:0 10px 24px rgba(15,23,42,0.05); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.family-app-card:hover { transform:translateY(-2px); box-shadow:0 16px 28px rgba(15,23,42,0.09); border-color:rgba(59,130,246,0.32); }
.family-app-icon { display:inline-flex; align-items:center; justify-content:center; width:56px; height:56px; border-radius:18px; background:#eff6ff; color:#1d4ed8; font-size:24px; font-weight:900; }
.family-app-card strong { font-size:22px; line-height:1.08; letter-spacing:-0.03em; color:#0f172a; }
.family-app-badge { display:inline-flex; align-items:center; justify-content:center; min-height:32px; width:fit-content; padding:0 12px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.family-app-badge.good { background:#dcfce7; color:#166534; }
.family-homework-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); }
.family-homework-card { display:grid; gap:10px; min-height:170px; padding:18px; border-radius:22px; background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%); border:1px solid rgba(148,163,184,0.16); color:#0f172a; text-decoration:none; box-shadow:0 10px 24px rgba(15,23,42,0.05); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.family-homework-card:hover { transform:translateY(-2px); box-shadow:0 16px 28px rgba(15,23,42,0.09); border-color:rgba(59,130,246,0.32); }
.family-homework-card.is-selected { background:linear-gradient(180deg,#eff6ff 0%,#dbeafe 100%); border-color:rgba(37,99,235,0.3); }
.family-homework-card.is-complete { background:linear-gradient(180deg,#f8fafc 0%,#f1f5f9 100%); }
.family-homework-top { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.family-homework-title { font-size:22px; line-height:1.15; font-weight:900; letter-spacing:-0.03em; }
.family-homework-status { display:inline-flex; align-items:center; min-height:28px; padding:4px 10px; border-radius:999px; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; background:#dbeafe; color:#1d4ed8; }
.family-homework-status.complete { background:#dcfce7; color:#166534; }
.family-homework-meta { display:grid; gap:6px; color:#475569; font-size:13px; line-height:1.55; }
.family-homework-note { margin-top:auto; font-size:13px; color:#1e293b; }
.family-detail-stack { display:grid; gap:14px; }
.family-detail-panel { padding:18px; border-radius:20px; background:#fff; border:1px solid rgba(148,163,184,0.14); }
.family-detail-meta { display:grid; gap:8px; margin-top:12px; }
.family-detail-meta div { display:flex; justify-content:space-between; gap:12px; font-size:13px; color:#334155; }
.family-list { display:grid; gap:10px; }
.family-list-item { display:grid; gap:4px; padding:14px 16px; border-radius:18px; background:#fff; border:1px solid rgba(148,163,184,0.14); }
.family-list-head { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.family-list-title { font-size:16px; font-weight:800; color:#0f172a; }
.family-list-meta { color:#64748b; font-size:13px; line-height:1.55; }
.family-pocket-grid { display:grid; gap:12px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); }
.family-pocket-card { display:grid; grid-template-columns:auto minmax(0,1fr); gap:12px; align-items:center; min-height:96px; padding:16px 18px; border-radius:20px; background:#fff; border:1px solid rgba(148,163,184,0.16); color:#0f172a; text-decoration:none; box-shadow:0 10px 24px rgba(15,23,42,0.04); transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.family-pocket-card:hover { transform:translateY(-1px); box-shadow:0 14px 28px rgba(15,23,42,0.08); border-color:rgba(59,130,246,0.24); }
.family-pocket-icon { display:inline-flex; align-items:center; justify-content:center; width:52px; height:52px; border-radius:18px; background:#eff6ff; color:#1d4ed8; font-size:22px; font-weight:900; }
.family-pocket-copy { min-width:0; display:grid; gap:4px; }
.family-pocket-copy strong { font-size:17px; line-height:1.2; letter-spacing:-0.02em; color:#0f172a; overflow-wrap:anywhere; }
.family-pocket-copy span { color:#64748b; font-size:13px; line-height:1.45; }
.family-empty { display:grid; place-items:center; min-height:120px; padding:18px; text-align:center; border-radius:20px; background:#f8fafc; border:1px dashed rgba(148,163,184,0.34); color:#64748b; }
.family-mini-table { display:grid; gap:10px; }
.family-mini-row { display:grid; grid-template-columns:96px 1fr auto; gap:12px; align-items:center; padding:12px 14px; border-radius:16px; background:#fff; border:1px solid rgba(148,163,184,0.14); }
.family-mini-label { font-size:12px; font-weight:800; color:#2563eb; }
.family-mini-main { color:#0f172a; font-size:14px; font-weight:700; }
.family-mini-sub { color:#64748b; font-size:12px; line-height:1.45; }
.family-dense-grid { display:grid; gap:14px; grid-template-columns:minmax(0,1.2fr) minmax(320px,0.88fr); }
.family-dashboard-header { display:grid; gap:14px; grid-template-columns:minmax(0,1.3fr) minmax(300px,0.9fr); align-items:stretch; }
.family-schedule-stack { display:grid; gap:10px; }
.family-schedule-item { display:grid; gap:6px; padding:14px 16px; border-radius:18px; border:1px solid rgba(148,163,184,0.16); background:#fff; }
.family-schedule-topline { display:flex; justify-content:space-between; gap:12px; align-items:center; }
.family-schedule-title { font-size:16px; font-weight:800; color:#0f172a; }
.family-schedule-meta { display:flex; flex-wrap:wrap; gap:8px 14px; color:#64748b; font-size:13px; }
.family-summary-grid { display:grid; gap:10px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.family-summary-cell { padding:14px 16px; border-radius:18px; background:#fff; border:1px solid rgba(148,163,184,0.16); }
.family-summary-label { font-size:12px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; color:#64748b; }
.family-summary-value { margin-top:8px; font-size:28px; font-weight:900; line-height:1; color:#0f172a; }
.family-summary-copy { margin-top:6px; font-size:13px; color:#64748b; }
.family-compact-actions { display:grid; gap:10px; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); }
.family-compact-action { display:grid; gap:6px; padding:14px 16px; border-radius:18px; border:1px solid rgba(148,163,184,0.18); background:#fff; color:#0f172a; text-decoration:none; transition:transform .18s ease, box-shadow .18s ease; }
.family-compact-action:hover { transform:translateY(-1px); box-shadow:0 10px 24px rgba(15,23,42,0.08); }
.family-compact-action strong { font-size:15px; }
.family-compact-action span { font-size:13px; color:#64748b; }
.family-compact-action em { font-style:normal; font-size:12px; font-weight:800; color:#2563eb; }
.family-badge-link { display:inline-flex; align-items:center; min-height:28px; padding:0 10px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:12px; font-weight:800; text-decoration:none; }
.family-badge-link.good { background:#dcfce7; color:#166534; }
.family-badge-link.warn { background:#fef3c7; color:#92400e; }
.family-card.compact { padding:16px 18px; border-radius:20px; }
.family-card.compact .family-card-header { margin-bottom:10px; }
.family-card.compact .family-card-header h3,
.family-card.compact .family-card-header h4 { font-size:20px; }
.family-inline-note { font-size:12px; color:#64748b; }
.family-badge { display:inline-flex; align-items:center; padding:4px 10px; border-radius:999px; background:#eff6ff; color:#1d4ed8; font-size:11px; font-weight:800; letter-spacing:0.08em; text-transform:uppercase; }
.family-badge.good { background:#dcfce7; color:#166534; }
.family-badge.warn { background:#fef3c7; color:#92400e; }
.app-body.role-parent .family-hero { background:linear-gradient(135deg,#dff4ff 0%,#e7f8e8 52%,#fff0d6 100%); color:var(--family-ink); box-shadow:0 18px 38px var(--family-shadow-strong); }
.app-body.role-parent .family-hero::after { display:none; }
.app-body.role-parent .family-subpage-hero { background:linear-gradient(180deg,#f7fbff 0%,#fff7ed 100%); color:var(--family-ink); box-shadow:0 10px 22px var(--family-shadow); }
.app-body.role-parent .family-kicker,
.app-body.role-parent .family-card-kicker,
.app-body.role-parent .family-spotlight-label,
.app-body.role-parent .family-mini-label { color:var(--family-accent); }
.app-body.role-parent .family-title,
.app-body.role-parent .family-card-header h3,
.app-body.role-parent .family-card-header h4,
.app-body.role-parent .family-spotlight-title,
.app-body.role-parent .family-list-title,
.app-body.role-parent .family-homework-title,
.app-body.role-parent .family-app-card strong,
.app-body.role-parent .family-pocket-copy strong,
.app-body.role-parent .family-mini-main { color:var(--family-ink); }
.app-body.role-parent .family-copy,
.app-body.role-parent .family-card-copy,
.app-body.role-parent .family-spotlight-copy,
.app-body.role-parent .family-spotlight-meta div,
.app-body.role-parent .family-list-meta,
.app-body.role-parent .family-homework-meta,
.app-body.role-parent .family-homework-note,
.app-body.role-parent .family-pocket-copy span,
.app-body.role-parent .family-mini-sub,
.app-body.role-parent .family-inline-note { color:var(--family-copy); }
.app-body.role-parent .family-pill { background:#fff; color:var(--family-accent-strong); border:1px solid var(--family-border); }
.app-body.role-parent .family-switcher .btn { border:1px solid var(--family-border); background:#fff; color:var(--family-accent-strong); box-shadow:none; }
.app-body.role-parent .family-switcher .btn.secondary { background:var(--family-accent-soft); color:var(--family-accent-strong); }
.app-body.role-parent .family-card { background:rgba(255,255,255,0.9); border:1px solid var(--family-border); box-shadow:0 12px 26px var(--family-shadow); }
.app-body.role-parent .family-card.soft { background:linear-gradient(180deg,#f8faf8 0%,#eef3f1 100%); }
.app-body.role-parent .family-app-card,
.app-body.role-parent .family-pocket-card,
.app-body.role-parent .family-homework-card,
.app-body.role-parent .family-detail-panel,
.app-body.role-parent .family-list-item,
.app-body.role-parent .family-mini-row,
.app-body.role-parent .family-summary-cell,
.app-body.role-parent .family-stat,
.app-body.role-parent .family-spotlight { border:1px solid var(--family-border); box-shadow:0 8px 18px var(--family-shadow); background:#fff; }
.app-body.role-parent .family-app-card:hover,
.app-body.role-parent .family-pocket-card:hover,
.app-body.role-parent .family-homework-card:hover,
.app-body.role-parent .family-compact-action:hover { border-color:var(--family-border-strong); box-shadow:0 12px 24px rgba(78,102,113,0.10); }
.app-body.role-parent .family-app-icon,
.app-body.role-parent .family-pocket-icon { background:var(--family-accent-soft); color:var(--family-accent-strong); }
.app-body.role-parent .family-app-badge,
.app-body.role-parent .family-badge,
.app-body.role-parent .family-badge-link { background:var(--family-accent-soft); color:var(--family-accent-strong); }
.app-body.role-parent .family-app-badge.good,
.app-body.role-parent .family-badge.good,
.app-body.role-parent .family-badge-link.good { background:#eceff1; color:#5f6b74; }
.app-body.role-parent .family-badge.warn,
.app-body.role-parent .family-badge-link.warn { background:#f7eed8; color:#96691f; }
.app-body.role-parent .family-homework-card.is-selected { background:linear-gradient(180deg,#f7faf9 0%,#edf2ef 100%); border-color:var(--family-border-strong); }
.app-body.role-parent .family-homework-card.is-complete { background:linear-gradient(180deg,#f5f6f7 0%,#eceff1 100%); border-color:rgba(132,146,155,0.22); }
.app-body.role-parent .family-homework-status { background:var(--family-accent-soft); color:var(--family-accent-strong); }
.app-body.role-parent .family-homework-status.complete { background:#eceff1; color:#5f6b74; }
.app-body.role-parent .family-empty { background:linear-gradient(180deg,#ffffff 0%,#f6f8f7 100%); border-color:var(--family-border-strong); color:var(--family-copy); }