:root {
  --primary: #b83b2f;
  --primary-dark: #8d2b23;
  --primary-soft: #fff0dd;
  --green: #21b889;
  --orange: #e3aa33;
  --pink: #e76d5c;
  --red: #c9483c;
  --ink: #293342;
  --muted: #6d7480;
  --line: #ece4d6;
  --surface: #ffffff;
  --background: #fffaf2;
  --shadow: 0 14px 36px rgba(111, 76, 39, 0.09);
  --radius-lg: 26px;
  --radius-md: 18px;
  --sidebar-width: 260px;
}

/* Account activity, academic activities, parent profile editing, and staff habit reports */
.menu-section-title { color:var(--muted); display:block; font-size:9px; font-weight:900; letter-spacing:1.5px; margin:14px 12px 3px; }
.admin-login-overview { margin-bottom:22px; }
.admin-login-overview > .section-heading { align-items:flex-end; }
.admin-login-overview > .section-heading > small { color:var(--muted); }
.login-stat-grid { display:grid; gap:14px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px; }
.login-stat-grid article { align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--shadow); display:flex; gap:13px; padding:18px; }
.login-stat-grid article > span { align-items:center; background:#eef4ff; border-radius:12px; color:#5078ba; display:flex; font-size:18px; font-weight:900; height:42px; justify-content:center; width:42px; }
.login-stat-grid article.success > span { background:#e9f8f0; color:#278b65; }
.login-stat-grid article.warning > span { background:#fff5da; color:#ae7d18; }
.login-stat-grid article.online > span { background:#e7f8f3; color:#18a879; }
.login-stat-grid small,.login-stat-grid strong { display:block; }
.login-stat-grid small { color:var(--muted); font-size:10px; font-weight:800; }
.login-stat-grid strong { font-size:26px; margin-top:2px; }
.recent-login-grid { display:grid; gap:16px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.recent-login-list { display:grid; gap:3px; }
.recent-login-list > div { align-items:center; border-top:1px solid var(--line); display:grid; gap:10px; grid-template-columns:auto 1fr auto; padding:11px 0; }
.recent-login-list > div:first-child { border-top:0; }
.recent-login-list strong,.recent-login-list small { display:block; }
.recent-login-list small { color:var(--muted); font-size:10px; margin-top:2px; }
.recent-login-list i { background:#e8f8f1; border-radius:999px; color:#278b65; font-size:8px; font-style:normal; font-weight:900; padding:5px 8px; text-transform:uppercase; }
.parent-profile-editor { margin-top:18px; }
.parent-photo-picker { align-items:center; background:var(--background); border:1px solid var(--line); border-radius:18px; display:flex; gap:18px; margin-bottom:20px; padding:17px; }
.large-child-photo.compact { flex:0 0 auto; height:84px; width:84px; }
.parent-photo-picker label { display:grid; gap:6px; }
.parent-photo-picker input { color:var(--muted); font-size:11px; }
.parent-photo-picker small { color:var(--muted); font-size:10px; }
.parent-photo-picker em { color:#2b8d69; font-size:10px; font-style:normal; font-weight:800; }
.calendar-activity-editor { border-top:1px solid var(--line); margin-top:20px; padding-top:20px; }
.calendar-activity-row { align-items:end; background:var(--background); border:1px solid var(--line); border-radius:15px; display:grid; gap:10px; grid-template-columns:150px 1fr 180px 1fr auto; margin-top:10px; padding:12px; }
.calendar-activity-row label > span { color:var(--muted); display:block; font-size:9px; font-weight:800; margin-bottom:5px; }
.calendar-activity-row .input,.calendar-activity-row .select { min-height:40px; }
.academic-activity-list { margin-bottom:20px; }
.staff-habits-page { --staff-green:#238b65; --staff-green-dark:#176c4d; --staff-soft:#edf8f3; }
.staff-habits-hero { align-items:center; background:linear-gradient(135deg,#137051,#25966f 58%,#4fb98e); color:#fff; display:flex; justify-content:space-between; }
.staff-habits-hero .eyebrow,.staff-habits-hero p { color:rgba(255,255,255,.8); }
.staff-habit-date { background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.25); border-radius:16px; min-width:245px; padding:15px 18px; text-align:right; }
.staff-habit-date small,.staff-habit-date strong { display:block; }
.staff-habit-date small { font-size:9px; font-weight:800; letter-spacing:1.2px; text-transform:uppercase; }
.staff-habit-date strong { font-size:14px; margin-top:4px; }
.habit-workspace-tabs { align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:16px; box-shadow:var(--shadow); display:flex; gap:4px; margin:18px 0 12px; overflow-x:auto; padding:5px; }
.habit-workspace-tabs a { border-radius:11px; color:var(--muted); flex:1 0 auto; font-size:10px; font-weight:900; padding:11px 15px; text-align:center; text-decoration:none; }
.habit-workspace-tabs a.active { background:var(--staff-soft); color:var(--staff-green-dark); }
.habit-status-guide { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:18px; }
.habit-status-guide > div { align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:12px; display:grid; gap:1px 7px; grid-template-columns:auto auto; padding:9px 12px; }
.habit-status-guide small { color:var(--muted); font-size:8px; grid-column:2; }
.habit-status-guide strong { font-size:9px; }
.status-dot { border-radius:50%; grid-row:1 / 3; height:9px; width:9px; }
.status-dot.complete { background:#2da875; }.status-dot.partial { background:#e7b12e; }.status-dot.not-submitted { background:#e05261; }
.habit-monitor-toolbar,.habit-report-toolbar { align-items:end; display:grid; gap:12px; grid-template-columns:170px 1fr 1fr minmax(180px,1.2fr) auto; margin-bottom:16px; padding:15px; }
.habit-report-toolbar { grid-template-columns:220px 1fr auto; }
.habit-monitor-toolbar label > span,.habit-report-toolbar label > span { color:var(--muted); display:block; font-size:9px; font-weight:800; margin-bottom:5px; }
.habit-daily-summary { display:grid; gap:12px; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:16px; }
.habit-daily-summary article { background:var(--surface); border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow); padding:18px; }
.habit-daily-summary article.highlight { background:linear-gradient(135deg,#eaf8f1,#f8fcfa); border-color:#cfe9dd; }
.habit-daily-summary small,.habit-daily-summary strong { display:block; }
.habit-daily-summary small { color:var(--muted); font-size:10px; font-weight:800; }
.habit-daily-summary strong { font-size:27px; margin-top:3px; }
.staff-daily-table-panel { padding:0; overflow:hidden; }
.staff-daily-table-panel > .panel-heading { padding:20px; }
.habit-monitor-table { min-width:1050px; }
.habit-monitor-table th:nth-child(n+4):nth-child(-n+10) { text-align:center; width:42px; }
.habit-student-cell { align-items:center; display:flex; gap:9px; }
.habit-student-cell strong,.habit-student-cell small { display:block; }
.habit-student-cell small { color:var(--muted); font-size:8px; }
.class-chip { background:#eef2f8; border-radius:999px; color:#58697f; display:inline-block; font-size:9px; font-weight:800; padding:5px 8px; }
.habit-mark { font-size:14px; font-weight:900; text-align:center; }
.habit-mark.independent { background:#effaf5; color:#1e9166; }.habit-mark.guided { background:#fff8e5; color:#b58113; }.habit-mark.not_yet { background:#f5f6f8; color:#87909d; }
.submission-badge { align-items:center; border-radius:999px; display:inline-flex; font-size:8px; font-weight:900; gap:5px; padding:6px 8px; white-space:nowrap; }
.submission-badge i { background:currentColor; border-radius:50%; height:6px; width:6px; }
.submission-badge.complete { background:#e9f8f1; color:#238b65; }.submission-badge.partial { background:#fff5d9; color:#a97812; }.submission-badge.not_submitted { background:#feecee; color:#c74956; }
.habit-report-heading { align-items:center; background:linear-gradient(135deg,var(--surface),var(--staff-soft)); display:flex; justify-content:space-between; margin-bottom:16px; }
.habit-report-heading h3 { font-size:24px; margin:3px 0; }
.habit-report-heading p { color:var(--muted); font-size:10px; margin:0; }
.overall-achievement { border-left:1px solid #cfe7dc; min-width:220px; padding-left:24px; text-align:right; }
.overall-achievement small,.overall-achievement strong,.overall-achievement span { display:block; }
.overall-achievement small { color:var(--staff-green); font-size:9px; font-weight:900; text-transform:uppercase; }
.overall-achievement strong { color:var(--staff-green-dark); font-size:35px; line-height:1.1; }
.overall-achievement span { color:var(--muted); font-size:9px; }
.habit-report-layout { display:grid; gap:16px; grid-template-columns:minmax(0,1.5fr) minmax(320px,.8fr); margin-bottom:16px; }
.habit-achievement-list { display:grid; gap:15px; }
.habit-achievement-list > div { align-items:center; display:grid; gap:12px; grid-template-columns:185px 1fr 46px; }
.habit-report-name { align-items:center; display:flex; gap:8px; font-size:11px; }
.habit-report-name b { font-size:18px; }
.habit-report-bar { background:#e4ece8; border-radius:999px; height:10px; overflow:hidden; }
.habit-report-bar i { background:linear-gradient(90deg,#2d9c73,#66c79e); border-radius:inherit; display:block; height:100%; min-width:2px; }
.habit-achievement-list > div > strong { color:var(--staff-green-dark); font-size:11px; text-align:right; }
.habit-insight-grid { display:grid; gap:10px; grid-template-columns:repeat(2,minmax(0,1fr)); }
.habit-insight { background:var(--surface); border:1px solid var(--line); border-radius:17px; box-shadow:var(--shadow); padding:14px; }
.habit-insight > span { display:block; font-size:21px; margin-bottom:7px; }
.habit-insight small,.habit-insight strong { display:block; }
.habit-insight small { color:var(--muted); font-size:8px; font-weight:900; text-transform:uppercase; }
.habit-insight strong { font-size:13px; margin-top:4px; }
.habit-insight p { color:var(--muted); font-size:9px; margin:3px 0 0; }
.habit-comparison-panel,.habit-attention-panel,.daily-rate-panel { margin-bottom:16px; }
.class-comparison-list { display:grid; gap:12px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.class-comparison-list article { background:var(--background); border:1px solid var(--line); border-radius:14px; padding:13px; }
.class-comparison-list header,.class-comparison-list article > div { align-items:center; display:flex; justify-content:space-between; }
.class-comparison-list header { margin-bottom:10px; }.class-comparison-list header span,.class-comparison-list article > div span { color:var(--muted); font-size:8px; }
.class-comparison-list article > div b { font-size:10px; }
.comparison-track { background:#e2ebe7; border-radius:999px; height:7px; margin:5px 0 9px; overflow:hidden; }
.comparison-track i { background:var(--staff-green); border-radius:inherit; display:block; height:100%; }
.trend-pill { background:#eef1f5; border-radius:999px; color:#657184; font-size:9px; font-weight:900; padding:5px 7px; }.trend-pill.up { background:#e8f7ef;color:#25835f; }.trend-pill.down { background:#fdecef;color:#bf4d5a; }
.daily-rate-chart { align-items:end; display:flex; gap:10px; min-height:210px; overflow-x:auto; padding-top:10px; }
.daily-rate-chart > div { align-items:center; display:flex; flex:1 0 52px; flex-direction:column; gap:4px; min-width:52px; }
.daily-rate-bar { align-items:end; background:var(--background); border-radius:9px; display:flex; height:145px; overflow:hidden; width:30px; }
.daily-rate-bar i { background:linear-gradient(180deg,#55bf95,#218861); border-radius:9px; display:block; min-height:2px; width:100%; }
.daily-rate-chart strong { font-size:9px; }.daily-rate-chart small { color:var(--muted); font-size:8px; white-space:nowrap; }
.dark-mode .login-stat-grid article.highlight,.dark-mode .habit-daily-summary article.highlight,.dark-mode .habit-report-heading { background:#20352f; }
.dark-mode .habit-workspace-tabs a.active { background:#244139; color:#a5dfc9; }
.dark-mode .habit-mark.independent { background:#203a32; }.dark-mode .habit-mark.guided { background:#3c3521; }.dark-mode .habit-mark.not_yet { background:#2b3240; }
.dark-mode .class-chip { background:#30394c; color:#bcc7d7; }
.dark-mode .habit-report-bar,.dark-mode .comparison-track { background:#34433f; }

@media (max-width:1050px) {
  .login-stat-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .habit-monitor-toolbar { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .habit-monitor-toolbar .habit-student-search { grid-column:1 / -1; }
  .habit-report-layout { grid-template-columns:1fr; }
  .calendar-activity-row { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .calendar-activity-row .danger-button { justify-self:start; }
}
@media (max-width:700px) {
  .recent-login-grid,.login-stat-grid,.habit-daily-summary,.class-comparison-list { grid-template-columns:1fr; }
  .staff-habits-hero,.habit-report-heading { align-items:flex-start; flex-direction:column; gap:16px; }
  .staff-habit-date { min-width:0; text-align:left; width:100%; }
  .habit-monitor-toolbar,.habit-report-toolbar,.calendar-activity-row { grid-template-columns:1fr; }
  .habit-monitor-toolbar .habit-student-search { grid-column:auto; }
  .habit-insight-grid { grid-template-columns:1fr; }
  .overall-achievement { border-left:0; border-top:1px solid #cfe7dc; padding-left:0; padding-top:15px; text-align:left; width:100%; }
  .habit-achievement-list > div { grid-template-columns:135px 1fr 40px; }
  .parent-photo-picker { align-items:flex-start; flex-direction:column; }
}

* { box-sizing: border-box; }

html { min-height: 100%; }

body {
  margin: 0;
  min-width: 320px;
  min-height: 100vh;
  background: var(--background);
  color: var(--ink);
  font-family: "Nunito", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  transition: background-color 0.2s ease, color 0.2s ease;
}

[ng-cloak] { display: none !important; }
button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; }

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(184, 59, 47, 0.24);
  outline-offset: 2px;
}

.app-shell { min-height: 100vh; }

.sidebar {
  background: var(--surface);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  height: 100vh;
  left: 0;
  padding: 28px 20px 20px;
  position: fixed;
  top: 0;
  transition: background-color 0.2s ease, transform 0.25s ease;
  width: var(--sidebar-width);
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.brand {
  align-items: center;
  display: flex;
  gap: 13px;
  margin: 0 7px 28px;
  text-decoration: none;
}

.brand-mark {
  align-items: center;
  background: linear-gradient(145deg, #6d83ff, #3f58e3);
  border-radius: 17px;
  box-shadow: 0 10px 22px rgba(82, 109, 245, 0.3);
  color: white;
  display: flex;
  font-size: 27px;
  font-weight: 800;
  height: 52px;
  justify-content: center;
  transform: rotate(-3deg);
  width: 52px;
}

.brand strong { display: block; font-size: 23px; letter-spacing: -0.5px; }
.brand small { color: var(--muted); display: block; font-size: 11px; margin-top: 2px; }
.menu-label { color: #a1a8b8; font-size: 11px; font-weight: 800; letter-spacing: 1.5px; margin: 0 12px 12px; text-transform: uppercase; }
.menu { display: grid; flex: 0 0 auto; gap: 7px; }

.menu a {
  align-items: center;
  border-radius: 15px;
  color: #667087;
  display: flex;
  font-weight: 700;
  gap: 13px;
  padding: 13px 15px;
  text-decoration: none;
  transition: 0.18s ease;
}

.menu a:hover { background: var(--primary-soft); color: var(--primary); transform: translateX(3px); }
.menu a.active { background: var(--primary); box-shadow: 0 10px 24px rgba(82, 109, 245, 0.25); color: white; }
.menu-icon { align-items: center; display: flex; font-size: 22px; height: 25px; justify-content: center; width: 25px; }
.menu-badge { align-items: center; background: #e5394f; border: 2px solid white; border-radius: 999px; box-shadow: 0 4px 10px rgba(196, 44, 65, 0.3); color: white; display: inline-flex; font-size: 10px; font-weight: 900; height: 22px; justify-content: center; margin-left: auto; min-width: 22px; padding: 0 5px; }
.menu a.active .menu-badge { border-color: #6a72ed; }

.sidebar-note {
  background: linear-gradient(145deg, #f0f2ff, #f8f9ff);
  border: 1px solid #e3e7ff;
  border-radius: 20px;
  color: var(--primary);
  display: flex;
  flex-direction: column;
  margin-top: auto;
  padding: 18px;
  flex: 0 0 auto;
}

.sidebar-note .note-icon { font-size: 24px; margin-bottom: 9px; }
.sidebar-note strong { font-size: 12px; text-transform: uppercase; }
.sidebar-note span:last-child { color: var(--ink); font-size: 19px; font-weight: 800; margin-top: 4px; }
.sidebar-footer { color: var(--muted); font-size: 11px; margin: 17px 4px 0; text-align: center; }
.main-area { margin-left: var(--sidebar-width); min-height: 100vh; }

.topbar {
  align-items: center;
  backdrop-filter: blur(16px);
  background: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid var(--line);
  display: flex;
  height: 84px;
  justify-content: space-between;
  padding: 0 34px;
  position: sticky;
  top: 0;
  transition: background-color 0.2s ease;
  z-index: 25;
}

.topbar-title { align-items: center; display: flex; gap: 12px; }
.topbar-title h1 { font-size: 25px; letter-spacing: -0.4px; margin: 0; }
.topbar-title p { color: var(--muted); font-size: 12px; margin: 3px 0 0; }
.topbar-actions, .profile { align-items: center; display: flex; }
.topbar-actions { gap: 16px; }
.profile { gap: 10px; }
.profile-copy strong, .profile-copy small { display: block; }
.profile-copy strong { font-size: 14px; }
.profile-copy small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.avatar { align-items: center; background: linear-gradient(145deg, #6d83ff, #526df5); border-radius: 50%; color: white; display: flex; font-size: 17px; font-weight: 800; height: 42px; justify-content: center; width: 42px; }
.icon-button, .mobile-menu, .language-button { background: var(--primary-soft); border: 0; color: var(--primary); cursor: pointer; }
.icon-button { border-radius: 50%; font-size: 20px; height: 42px; width: 42px; }
.language-button { border-radius: 12px; font-size: 12px; font-weight: 800; height: 38px; min-width: 44px; }
.mobile-menu { border-radius: 10px; display: none; font-size: 20px; height: 40px; width: 40px; }
.page-content { display: block; padding: 30px 34px 48px; }
.page { margin: 0 auto; max-width: 1440px; }

.hero {
  align-items: center;
  background: linear-gradient(120deg, #526df5, #7457d8);
  border-radius: var(--radius-lg);
  box-shadow: 0 18px 45px rgba(75, 85, 190, 0.25);
  color: white;
  display: flex;
  justify-content: space-between;
  min-height: 178px;
  overflow: hidden;
  padding: 33px 38px;
  position: relative;
}

.hero::before, .hero::after { border: 28px solid rgba(255, 255, 255, 0.08); border-radius: 50%; content: ""; position: absolute; }
.hero::before { height: 140px; right: 110px; top: -80px; width: 140px; }
.hero::after { bottom: -105px; height: 190px; right: -40px; width: 190px; }
.hero-copy, .hero-year { position: relative; z-index: 1; }
.hero h2 { font-size: clamp(25px, 3vw, 37px); letter-spacing: -1px; margin: 0; }
.hero p { margin: 10px 0 0; opacity: 0.82; }
.hero-year { background: rgba(255, 255, 255, 0.14); border: 1px solid rgba(255, 255, 255, 0.16); border-radius: 20px; padding: 16px 22px; text-align: right; }
.hero-year small, .hero-year strong { display: block; }
.hero-year small { font-size: 12px; opacity: 0.8; text-transform: uppercase; }
.hero-year strong { font-size: 24px; margin-top: 4px; }
.year-select { background: transparent; border: 0; color: white; cursor: pointer; font-size: 21px; font-weight: 800; margin-top: 4px; outline: 0; }
.year-select option { color: #24304a; }

.stat-grid { display: grid; gap: 18px; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 22px; }
.stat-card { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); display: flex; gap: 16px; padding: 21px; }
.stat-icon { align-items: center; border-radius: 17px; display: flex; font-size: 27px; height: 56px; justify-content: center; min-width: 56px; }
.stat-icon.blue { background: #eaf0ff; color: #526df5; }
.stat-icon.green { background: #e5f8f1; color: var(--green); }
.stat-icon.orange { background: #fff2df; color: var(--orange); }
.stat-icon.pink { background: #fdeaf1; color: var(--pink); }
.stat-copy small { color: var(--muted); display: block; font-size: 12px; font-weight: 700; }
.stat-copy strong { display: block; font-size: 29px; letter-spacing: -1px; margin-top: 3px; }

.dashboard-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, 1.5fr) minmax(280px, 0.7fr); margin-top: 22px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); padding: 25px; }
.panel-heading { align-items: center; display: flex; justify-content: space-between; margin-bottom: 23px; }
.panel-heading h3 { font-size: 18px; margin: 0; }
.panel-heading span { color: var(--muted); font-size: 12px; }
.bar-list { display: grid; gap: 18px; }
.bar-label { display: flex; font-size: 13px; font-weight: 700; justify-content: space-between; margin-bottom: 7px; }
.bar-track { background: var(--primary-soft); border-radius: 999px; height: 11px; overflow: hidden; }
.bar-fill { background: linear-gradient(90deg, #526df5, #8a69eb); border-radius: inherit; height: 100%; min-width: 6px; transition: width 0.4s ease; }

.birthday-list { display: grid; gap: 13px; }
.birthday-item { align-items: center; background: var(--background); border-radius: 16px; display: flex; gap: 12px; padding: 11px; }
.mini-avatar { align-items: center; background: var(--primary-soft); border-radius: 50%; color: var(--primary); display: flex; font-weight: 800; height: 42px; justify-content: center; object-fit: cover; width: 42px; }
.birthday-item strong, .birthday-item small { display: block; }
.birthday-item small { color: var(--muted); font-size: 11px; margin-top: 2px; }
.empty-mini { color: var(--muted); font-size: 13px; line-height: 1.6; padding: 22px 5px; text-align: center; }

.page-heading { align-items: flex-end; display: flex; justify-content: space-between; margin-bottom: 24px; }
.page-heading h2 { font-size: 28px; letter-spacing: -0.6px; margin: 0; }
.page-heading p { color: var(--muted); font-size: 13px; margin: 5px 0 0; }
.primary-button, .secondary-button, .danger-button, .ghost-button {
  align-items: center;
  border: 0;
  border-radius: 13px;
  cursor: pointer;
  display: inline-flex;
  font-weight: 800;
  gap: 7px;
  justify-content: center;
  min-height: 43px;
  padding: 0 18px;
  text-decoration: none;
  transition: 0.17s ease;
}
.primary-button { background: var(--primary); box-shadow: 0 9px 20px rgba(82, 109, 245, 0.22); color: white; }
.primary-button:hover { background: var(--primary-dark); transform: translateY(-1px); }
.secondary-button { background: #f3c24e; color: #513d0b; }
.danger-button { background: #ffedf0; color: var(--red); }
.ghost-button { background: var(--background); color: var(--ink); }
.excel-button { align-items: center; background: #e5f8f1; border: 0; border-radius: 13px; color: #137b5b; cursor: pointer; display: inline-flex; font-weight: 800; gap: 7px; min-height: 43px; padding: 0 18px; }
.excel-button:hover { background: #d4f2e7; transform: translateY(-1px); }
.button-sm { min-height: 36px; padding: 0 13px; }
.button-row { display: flex; flex-wrap: wrap; gap: 10px; }
button[disabled] { cursor: not-allowed; opacity: 0.6; transform: none !important; }

.toolbar { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); display: flex; gap: 13px; margin-bottom: 22px; padding: 14px; }
.search-control { flex: 1; position: relative; }
.search-control span { color: var(--muted); left: 14px; position: absolute; top: 11px; }
.search-control input { padding-left: 42px; }
.toolbar .select { min-width: 150px; width: auto; }
.toolbar .year-filter { max-width: 145px; }
.input, .select, .textarea { background: var(--surface); border: 1px solid #dfe3ee; border-radius: 12px; color: var(--ink); min-height: 43px; padding: 9px 12px; transition: border-color 0.15s, box-shadow 0.15s; width: 100%; }
.textarea { min-height: 100px; resize: vertical; }
.input:focus, .select:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(82, 109, 245, 0.1); outline: 0; }

.card-grid { display: grid; gap: 19px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.person-card { background: var(--surface); border: 1px solid var(--line); border-radius: 23px; box-shadow: var(--shadow); overflow: hidden; transition: transform 0.18s ease, box-shadow 0.18s ease; }
.person-card:hover { box-shadow: 0 20px 48px rgba(45, 57, 98, 0.14); transform: translateY(-3px); }
.card-cover { background: linear-gradient(115deg, #526df5, #8c65df); height: 83px; }
.teacher-card .card-cover { background: linear-gradient(115deg, #23b58b, #48b8c7); }
.card-body { padding: 0 20px 20px; }
.person-photo, .photo-placeholder { border: 5px solid var(--surface); border-radius: 50%; height: 90px; margin-top: -44px; object-fit: cover; width: 90px; }
.photo-placeholder { align-items: center; background: var(--primary-soft); color: var(--primary); display: flex; font-size: 33px; font-weight: 800; justify-content: center; }
.person-card h3 { font-size: 19px; margin: 13px 0 4px; }
.person-subtitle { color: var(--muted); font-size: 13px; margin: 0; }
.badge { background: #e6f8f2; border-radius: 999px; color: #13855f; display: inline-flex; font-size: 11px; font-weight: 800; margin-top: 10px; padding: 5px 10px; }
.badge.inactive { background: #fff0e0; color: #ae6a19; }
.person-meta { border-top: 1px solid var(--line); display: grid; gap: 7px; margin-top: 17px; padding-top: 15px; }
.person-meta p { color: var(--muted); font-size: 12px; margin: 0; }
.person-meta strong { color: var(--ink); }
.card-actions { display: flex; gap: 8px; margin-top: 17px; }
.card-actions a, .card-actions button { flex: 1; }

.empty-state, .loading-state { background: var(--surface); border: 1px dashed #d9deea; border-radius: var(--radius-lg); color: var(--muted); grid-column: 1 / -1; padding: 55px 20px; text-align: center; }
.empty-state span { display: block; font-size: 46px; margin-bottom: 10px; }
.empty-state h3 { color: var(--ink); margin: 0 0 7px; }
.empty-state p { margin: 0 auto 20px; max-width: 390px; }
.spinner { animation: spin 0.8s linear infinite; border: 3px solid var(--line); border-radius: 50%; border-top-color: var(--primary); display: inline-block; height: 30px; width: 30px; }
@keyframes spin { to { transform: rotate(360deg); } }

.form-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin: 0 auto; max-width: 1050px; overflow: hidden; }
.form-header { background: linear-gradient(120deg, #526df5, #7559dc); color: white; padding: 27px 31px; }
.form-header h2 { font-size: 24px; margin: 0; }
.form-header p { font-size: 13px; margin: 6px 0 0; opacity: 0.8; }
.form-body { padding: 30px; }
.form-section + .form-section { border-top: 1px solid var(--line); margin-top: 28px; padding-top: 26px; }
.form-section h3 { font-size: 15px; margin: 0 0 18px; }
.form-grid { display: grid; gap: 19px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.form-group { display: flex; flex-direction: column; gap: 7px; }
.form-group.full { grid-column: 1 / -1; }
.form-group label { font-size: 12px; font-weight: 800; }
.required::after { color: var(--red); content: " *"; }
.field-error { color: var(--red); font-size: 11px; margin-top: -2px; }
.photo-picker { align-items: center; background: var(--background); border: 1px dashed #cfd5e5; border-radius: 17px; display: flex; gap: 16px; padding: 15px; }
.photo-preview { align-items: center; background: var(--primary-soft); border-radius: 50%; color: var(--primary); display: flex; font-size: 29px; height: 70px; justify-content: center; object-fit: cover; width: 70px; }
.photo-picker small { color: var(--muted); display: block; font-size: 11px; margin-top: 5px; }
.form-actions { border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 11px; margin-top: 30px; padding-top: 23px; }
.alert { border-radius: 13px; font-size: 13px; margin-bottom: 20px; padding: 13px 15px; }
.alert.error { background: #fff0f2; border: 1px solid #ffd5db; color: #ae3543; }
.alert.warning { background: #fff8e8; border: 1px solid #f4d99a; color: #8f6414; }

.detail-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin: 0 auto; max-width: 980px; overflow: hidden; }
.detail-cover { background: linear-gradient(115deg, #526df5, #8a64e2); height: 145px; }
.detail-card.teacher .detail-cover { background: linear-gradient(115deg, #1fb184, #4ab4c6); }
.detail-body { padding: 0 34px 34px; }
.detail-identity { align-items: flex-end; display: flex; gap: 21px; margin-top: -65px; }
.detail-photo, .detail-placeholder { border: 7px solid var(--surface); border-radius: 50%; height: 135px; min-width: 135px; object-fit: cover; width: 135px; }
.detail-placeholder { align-items: center; background: var(--primary-soft); color: var(--primary); display: flex; font-size: 48px; justify-content: center; }
.detail-name { padding-bottom: 7px; }
.detail-name h2 { font-size: 28px; margin: 0 0 3px; }
.detail-name p { color: var(--muted); margin: 0; }
.detail-actions { display: flex; gap: 9px; margin-left: auto; padding-bottom: 9px; }
.detail-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 31px; }
.info-panel { background: var(--background); border-radius: 19px; padding: 21px; }
.info-panel.full { grid-column: 1 / -1; }
.info-panel h3 { font-size: 14px; margin: 0 0 15px; }
.info-list { display: grid; gap: 11px; margin: 0; }
.info-row { display: grid; font-size: 13px; gap: 12px; grid-template-columns: 130px 1fr; }
.info-row dt { color: var(--muted); }
.info-row dd { font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.back-row { margin-top: 22px; }

.toast-stack { bottom: 24px; display: grid; gap: 10px; max-width: min(390px, calc(100% - 32px)); position: fixed; right: 24px; z-index: 100; }
.toast { align-items: center; background: #26324b; border-radius: 13px; box-shadow: 0 15px 40px rgba(25, 32, 52, 0.26); color: white; display: flex; font-size: 13px; gap: 16px; justify-content: space-between; padding: 14px 16px; }
.toast.success { background: #16835f; }
.toast.error { background: #b73f4d; }
.toast button { background: transparent; border: 0; color: inherit; cursor: pointer; font-size: 20px; opacity: 0.8; }
.nav-scrim { display: none; }

.auth-loading { align-items: center; display: flex; justify-content: center; min-height: 100vh; }
.login-page {
  align-items: center;
  background:
    radial-gradient(circle at 12% 18%, rgba(170, 190, 255, .48), transparent 27rem),
    radial-gradient(circle at 88% 82%, rgba(255, 205, 222, .42), transparent 25rem),
    linear-gradient(135deg, #f8f9ff 0%, #f6fbf9 52%, #fff9f3 100%);
  display: flex;
  isolation: isolate;
  justify-content: center;
  min-height: 100vh;
  min-height: 100svh;
  overflow-x: hidden;
  overflow-y: auto;
  padding: 76px 32px 32px;
  position: relative;
}
.login-page::before,
.login-page::after { border-radius: 50%; content: ""; pointer-events: none; position: absolute; z-index: -1; }
.login-page::before { background: rgba(255,255,255,.5); height: 280px; left: -85px; top: -90px; width: 280px; }
.login-page::after { border: 28px solid rgba(255,255,255,.42); bottom: -120px; height: 310px; right: -105px; width: 310px; }

.login-controls { align-items: center; display: flex; gap: 10px; position: absolute; right: 24px; top: 22px; z-index: 5; }
.login-theme-switch { background: rgba(255,255,255,.76); border: 1px solid rgba(255,255,255,.9); border-radius: 15px; box-shadow: 0 8px 24px rgba(65,57,105,.09); display: flex; padding: 4px; }
.login-theme-switch button { align-items: center; background: transparent; border: 0; border-radius: 11px; color: #747b91; cursor: pointer; display: flex; font-size: 11px; font-weight: 800; gap: 5px; min-height: 34px; padding: 0 10px; transition: background .18s ease, color .18s ease, transform .18s ease; }
.login-theme-switch button:hover { color: var(--primary); transform: translateY(-1px); }
.login-theme-switch button.active { background: white; box-shadow: 0 4px 12px rgba(67,58,114,.12); color: #5149ba; }
.login-language { background: rgba(255,255,255,.82); border: 1px solid rgba(255,255,255,.9); box-shadow: 0 8px 24px rgba(65,57,105,.09); position: static; }

.login-playground { inset: 0; overflow: hidden; pointer-events: none; position: absolute; z-index: 1; }
.login-toy { animation: login-toy-drop 1.15s cubic-bezier(.2,.78,.28,1.18) both; cursor: default; filter: drop-shadow(0 8px 8px rgba(54,48,89,.15)); font-size: clamp(28px,3.4vw,52px); line-height: 1; pointer-events: auto; position: absolute; transform-origin: 50% 80%; user-select: none; }
.login-toy:hover { animation: login-toy-wave .62s ease-in-out infinite; filter: drop-shadow(0 12px 10px rgba(72,61,130,.24)); }
.toy-pencil { animation-delay: .05s; left: 4%; top: 13%; }
.toy-crayon { animation-delay: .2s; bottom: 13%; left: 7%; }
.toy-books { animation-delay: .12s; left: 17%; top: 5%; }
.toy-star { animation-delay: .35s; right: 5%; top: 17%; }
.toy-cloud { animation-delay: .08s; left: 2%; top: 47%; }
.toy-rainbow { animation-delay: .28s; bottom: 8%; right: 2%; }
.toy-balloon { animation-delay: .18s; right: 6%; top: 48%; }
.toy-flower { animation-delay: .42s; bottom: 4%; left: 24%; }
.toy-butterfly { animation-delay: .31s; right: 24%; top: 5%; }
.toy-sun { animation-delay: .14s; left: 47%; top: 2%; }
.toy-puzzle { animation-delay: .38s; bottom: 6%; left: 2%; }
.toy-palette { animation-delay: .24s; right: 3%; top: 74%; }

.login-shell { animation: login-card-in .55s .18s ease-out both; background: var(--surface); border: 1px solid rgba(255,255,255,.9); border-radius: 34px; box-shadow: 0 32px 85px rgba(57,54,96,.17); display: grid; grid-template-columns: minmax(330px,.9fr) minmax(430px,1.08fr); max-width: 980px; min-height: 650px; overflow: hidden; position: relative; width: 100%; z-index: 2; }
.login-illustration { background: linear-gradient(155deg,#dfe9ff 0%,#e9e4ff 48%,#fff1d4 100%); min-width: 0; overflow: hidden; padding: 48px 36px 40px; position: relative; }
.login-illustration::before { background: rgba(255,255,255,.36); border-radius: 50%; content: ""; height: 270px; left: -110px; position: absolute; top: -120px; width: 270px; }
.login-illustration::after { background: linear-gradient(180deg,#97dcae,#6bc791); border-radius: 50% 50% 0 0; bottom: -120px; content: ""; height: 240px; left: -18%; position: absolute; width: 138%; }
.login-scene-sun { animation: login-gentle-spin 13s linear infinite; font-size: 59px; position: absolute; right: 29px; top: 31px; }
.login-scene-cloud { color: white; filter: drop-shadow(0 6px 8px rgba(91,91,135,.08)); font-size: 57px; position: absolute; }
.cloud-one { animation: login-cloud-drift 6s ease-in-out infinite; left: 30px; top: 115px; }
.cloud-two { animation: login-cloud-drift 7s .7s ease-in-out infinite reverse; font-size: 40px; right: 54px; top: 160px; }
.login-schoolhouse { filter: drop-shadow(0 13px 13px rgba(70,55,91,.15)); font-size: 118px; left: 50%; position: absolute; top: 222px; transform: translateX(-50%); z-index: 2; }
.login-scene-friends { align-items: end; bottom: 112px; display: flex; font-size: 61px; gap: 0; justify-content: center; left: 50%; position: absolute; transform: translateX(-50%); white-space: nowrap; z-index: 3; }
.login-scene-friends span { animation: login-friend-bob 3s ease-in-out infinite; filter: drop-shadow(0 8px 7px rgba(50,55,73,.13)); }
.login-scene-friends span:nth-child(2) { animation-delay: .35s; font-size: 67px; }
.login-scene-friends span:nth-child(3) { animation-delay: .7s; }
.login-scene-copy { bottom: 36px; color: #35405d; left: 30px; position: absolute; right: 30px; text-align: center; z-index: 4; }
.login-scene-copy strong,
.login-scene-copy small { display: block; }
.login-scene-copy strong { font-size: 20px; letter-spacing: .4px; }
.login-scene-copy small { color: #667089; font-size: 11px; margin-top: 4px; }
.login-scene-ground { bottom: 80px; display: flex; font-size: 24px; justify-content: space-between; left: 12px; position: absolute; right: 12px; z-index: 3; }

.login-card { align-self: stretch; background: transparent; border: 0; border-radius: 0; box-shadow: none; max-width: none; padding: 48px 50px 34px; width: 100%; }
.login-brand { align-items: center; display: flex; gap: 14px; margin-bottom: 25px; }
.login-brand strong, .login-brand small { display: block; }
.login-brand strong { font-size: 24px; }
.login-brand small { color: var(--muted); font-size: 12px; }
.brand-sparkle { animation: login-sparkle 2.2s ease-in-out infinite; color: #f4ba42; font-size: 23px; margin-left: auto; }
.login-welcome-chip { align-items: center; background: #f1efff; border-radius: 999px; color: #645bc7; display: inline-flex; font-size: 10px; font-weight: 900; gap: 6px; letter-spacing: .5px; margin-bottom: 13px; padding: 7px 11px; text-transform: uppercase; }
.login-card h1 { font-size: clamp(30px,4vw,38px); letter-spacing: -.8px; margin: 0 0 7px; }
.login-card > p { color: var(--muted); line-height: 1.55; margin: 0 0 23px; }
.login-card form { display: grid; gap: 16px; }
.login-card .form-group { gap: 7px; }
.login-card .form-group > span:first-child { color: var(--ink); font-size: 13px; font-weight: 800; }
.login-card .input { min-height: 50px; padding-inline: 15px; }
.login-password-field { display: block; position: relative; }
.login-password-field .input { padding-right: 54px; }
.login-password-field button { align-items: center; background: var(--primary-soft); border: 0; border-radius: 10px; cursor: pointer; display: flex; height: 36px; justify-content: center; position: absolute; right: 7px; top: 7px; transition: transform .18s ease, background .18s ease; width: 38px; }
.login-password-field button:hover { background: #e1ddff; transform: rotate(-8deg) scale(1.07); }
.login-submit { font-size: 15px; gap: 9px; margin-top: 3px; min-height: 52px; width: 100%; }
.login-submit:hover .login-button-icon { animation: login-key-wiggle .55s ease; }
.login-security-note { align-items: center; background: #edf9f4; border: 1px solid #d8f1e6; border-radius: 15px; color: #246f59; display: flex; gap: 11px; margin-top: 19px; padding: 11px 13px; }
.login-security-note > span:last-child { min-width: 0; }
.login-security-note strong,
.login-security-note small { display: block; }
.login-security-note strong { font-size: 11px; }
.login-security-note small { color: #538374; font-size: 9px; line-height: 1.4; margin-top: 2px; }
.login-lock { align-items: center; background: white; border-radius: 10px; display: flex; flex: 0 0 auto; height: 34px; justify-content: center; width: 34px; }
.login-help { font-size: 11px; margin: 16px 0 0 !important; text-align: center; }

@keyframes login-toy-drop { 0%{opacity:0;transform:translateY(-110vh) rotate(-190deg) scale(.55)}72%{opacity:1;transform:translateY(10px) rotate(9deg) scale(1.05)}88%{transform:translateY(-5px) rotate(-4deg) scale(.98)}100%{opacity:1;transform:translateY(0) rotate(0) scale(1)} }
@keyframes login-toy-wave { 0%,100%{transform:rotate(-7deg) translateY(0) scale(1)}50%{transform:rotate(10deg) translateY(-8px) scale(1.12)} }
@keyframes login-card-in { from{opacity:0;transform:translateY(18px) scale(.985)}to{opacity:1;transform:none} }
@keyframes login-cloud-drift { 0%,100%{transform:translateX(0)}50%{transform:translateX(16px)} }
@keyframes login-gentle-spin { to{transform:rotate(360deg)} }
@keyframes login-friend-bob { 0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-7px) rotate(2deg)} }
@keyframes login-sparkle { 0%,100%{opacity:.45;transform:rotate(0) scale(.8)}50%{opacity:1;transform:rotate(90deg) scale(1.14)} }
@keyframes login-key-wiggle { 0%,100%{transform:rotate(0)}30%{transform:rotate(-15deg)}70%{transform:rotate(12deg)} }
.logout-button { background: transparent; border: 1px solid var(--line); border-radius: 10px; color: var(--muted); cursor: pointer; font-size: 12px; font-weight: 800; min-height: 36px; padding: 0 12px; }

.attachment-form { align-items: end; display: grid; gap: 12px; grid-template-columns: 1fr 1.2fr auto; margin-bottom: 18px; }
.file-input { padding: 8px; }
.table-card { background: var(--surface); border: 1px solid var(--line); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; }
.table-wrap { overflow-x: auto; }
.data-table { border-collapse: collapse; min-width: 760px; width: 100%; }
.data-table th { background: var(--background); color: var(--muted); font-size: 11px; letter-spacing: .5px; padding: 13px 15px; text-align: left; text-transform: uppercase; }
.data-table td { border-top: 1px solid var(--line); font-size: 13px; line-height: 1.5; padding: 14px 15px; vertical-align: top; }
.file-link { color: var(--primary); font-weight: 800; overflow-wrap: anywhere; }
.empty-inline { color: var(--muted); padding: 25px; text-align: center; }
.table-subtitle { color: var(--muted); display: block; margin-top: 3px; }
.comment-cell { max-width: 390px; min-width: 230px; white-space: pre-wrap; }
.evaluation-form-panel { margin-bottom: 22px; }
.evaluation-form-panel > h3 { margin: 0 0 20px; }
.whatsapp-button { background: #e2f8eb; border: 0; border-radius: 13px; color: #137a45; cursor: pointer; font-weight: 800; min-height: 36px; padding: 0 13px; }
.approval-state-button { border: 0; border-radius: 13px; font-weight: 800; min-height: 36px; padding: 0 13px; }
.approval-state-pending { background: #fff0e0; color: #ae6a19; }
.approval-state-approved { background: #e6f8f2; color: #13855f; }
.approval-state-rejected { background: #fdebed; color: #c44052; }
.pdf-button { align-items: center; background: #fff0f2; border: 0; border-radius: 13px; color: #bd3345; cursor: pointer; display: inline-flex; font-weight: 800; justify-content: center; min-height: 43px; padding: 0 16px; }
.pdf-button.button-sm { min-height: 36px; padding-inline: 12px; }
.calendar-editor { margin-bottom: 22px; }
.calendar-editor > h3 { margin: 0 0 20px; }
.class-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 22px; }
.class-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 22px; }
.class-card header { align-items: center; display: flex; justify-content: space-between; }
.class-card h3 { font-size: 22px; margin: 0; }
.class-card header small, .class-card p { color: var(--muted); }
.class-count { color: var(--primary); font-size: 27px; font-weight: 800; text-align: center; }
.class-count small { display: block; font-size: 9px; text-transform: uppercase; }
.class-students { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 15px; }
.class-students span { background: var(--primary-soft); border-radius: 999px; color: var(--primary); font-size: 11px; font-weight: 700; padding: 5px 9px; }
.student-check-grid { border: 1px solid var(--line); border-radius: 15px; display: grid; gap: 8px; grid-template-columns: repeat(2, minmax(0, 1fr)); max-height: 265px; overflow: auto; padding: 10px; }
.student-check { align-items: center; background: var(--background); border-radius: 11px; cursor: pointer; display: flex; gap: 10px; padding: 10px; }
.student-check.unavailable { cursor: not-allowed; opacity: 0.55; }
.student-check input { accent-color: var(--primary); height: 18px; width: 18px; }
.student-check strong, .student-check small { display: block; }
.student-check small { color: var(--muted); font-size: 10px; margin-top: 2px; }
.student-check small em { color: #ae6a19; font-style: normal; font-weight: 700; }
.attendance-summary { display: grid; gap: 12px; grid-template-columns: repeat(4, 1fr); margin-bottom: 20px; }
.attendance-summary span { border-radius: 15px; font-size: 12px; font-weight: 700; padding: 14px; }
.attendance-summary strong { display: block; font-size: 24px; margin-top: 3px; }
.summary-present { background: #e5f8f1; color: #137b5b; }
.summary-absent { background: #ffedf0; color: #b43c4c; }
.summary-late { background: #fff2df; color: #a66517; }
.summary-excused { background: #edf0ff; color: #435bd0; }
.attendance-table tr.attendance-absent td { background: #fffafb; }
.attendance-table tr.attendance-late td { background: #fffdf8; }
.table-footer { border-top: 1px solid var(--line); display: flex; justify-content: flex-end; padding: 16px; }
.report-actions { min-width: 260px; }
.payment-layout { display: grid; gap: 22px; grid-template-columns: 1fr; margin-bottom: 22px; }
.payment-layout .panel > h3 { margin: 0 0 20px; }
.message-composer { background: linear-gradient(135deg, #edfff4, #f7fffa); border: 2px solid #bdebd0; border-radius: 22px; box-shadow: 0 18px 45px rgba(23, 122, 69, .10); margin-bottom: 22px; padding: 22px; }
.composer-heading { align-items: flex-start; display: flex; justify-content: space-between; margin-bottom: 16px; }
.composer-heading h3 { color: #137a45; font-size: 20px; margin: 0; }
.composer-heading p { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
.payment-message { min-height: 180px; white-space: pre-wrap; }
.composer-actions { align-items: center; display: flex; justify-content: space-between; margin-top: 14px; }
.composer-actions small { color: var(--muted); }
.modal-backdrop { align-items: flex-start; background: rgba(22, 30, 54, .58); display: flex; inset: 0; justify-content: center; overflow-y: auto; padding: 5vh 18px; position: fixed; z-index: 120; }
.modal-card { background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: 0 28px 80px rgba(18, 27, 58, .28); max-width: 760px; padding: 25px; width: 100%; }
.message-modal { max-width: 720px; }
.modal-heading { align-items: flex-start; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 20px; padding-bottom: 17px; }
.modal-heading h3 { font-size: 21px; margin: 0; }
.modal-heading p { color: var(--muted); font-size: 12px; margin: 5px 0 0; }
.approval-status { background: var(--background); border-radius: 12px; margin-top: 16px; padding: 12px 14px; }
.approval-attachment { background: var(--background); border-radius: 12px; margin-top: 16px; padding: 12px 14px; }
.approval-attachment small { color: var(--muted); display: block; margin-top: 6px; }
.parent-contact-panel { margin-top: 22px; }
.contact-compose-panel { margin-bottom: 22px; }
.contact-history { margin-top: 20px; }
.dashboard-requests { margin-top: 22px; }
.whatsapp-button:not(.button-sm) { min-height: 43px; padding: 0 18px; }
.payment-actions { display: flex; flex-wrap: wrap; gap: 7px; min-width: 340px; }
.payment-table td { vertical-align: middle; }
.year-pill { background: var(--primary-soft); border-radius: 13px; color: var(--primary); font-weight: 800; padding: 10px 16px; }
.calendar-grid { display: grid; gap: 20px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.calendar-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); padding: 23px; }
.calendar-card header { align-items: center; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; margin-bottom: 17px; padding-bottom: 16px; }
.calendar-card h3 { font-size: 23px; margin: 2px 0 0; }
.calendar-card header small { color: var(--muted); }
.calendar-card ul { display: grid; gap: 10px; margin: 0; padding-left: 22px; }
.calendar-card li { line-height: 1.5; }
.effective-days { color: var(--primary); font-size: 28px; font-weight: 800; text-align: center; }
.effective-days small { display: block; font-size: 9px; font-weight: 700; text-transform: uppercase; }
.admin-grid { display: grid; gap: 22px; grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr); }
.admin-grid > * { min-width: 0; }
.single-column { grid-template-columns: 1fr; }
.user-list { display: grid; gap: 11px; }
.user-row { align-items: center; background: var(--background); border-radius: 16px; display: grid; gap: 12px; grid-template-columns: auto minmax(130px, 1fr) auto auto; padding: 12px; }
.user-row small { color: var(--muted); display: block; font-size: 11px; margin-top: 3px; }

.dark-mode {
  --ink: #edf0f8;
  --muted: #a4acc0;
  --line: #303951;
  --surface: #20283a;
  --background: #171d2b;
  --primary-soft: #2b3655;
  --shadow: 0 16px 45px rgba(0, 0, 0, 0.22);
}
.dark-mode .topbar { background: rgba(32, 40, 58, 0.9); }
.dark-mode .sidebar-note { background: #252f48; border-color: #35405c; }
.dark-mode .input, .dark-mode .select, .dark-mode .textarea { border-color: #3b455d; }

@media (max-width: 1120px) {
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .admin-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 820px) {
  .sidebar { transform: translateX(-100%); }
  .nav-open .sidebar { box-shadow: 15px 0 50px rgba(20, 27, 48, 0.22); transform: translateX(0); }
  .nav-scrim { background: rgba(18, 24, 39, 0.46); border: 0; display: block; inset: 0; opacity: 0; pointer-events: none; position: fixed; transition: opacity 0.2s; z-index: 35; }
  .nav-open .nav-scrim { opacity: 1; pointer-events: auto; }
  .main-area { margin-left: 0; }
  .mobile-menu { display: inline-block; }
  .page-content { padding: 24px 20px 40px; }
  .topbar { padding: 0 20px; }
  .dashboard-grid { grid-template-columns: 1fr; }
  .hero { align-items: flex-start; flex-direction: column; gap: 20px; }
  .hero-year { text-align: left; }
  .detail-identity { align-items: center; flex-direction: column; text-align: center; }
  .detail-actions { margin: 0; }
  .admin-grid, .calendar-grid, .class-grid, .payment-layout { grid-template-columns: 1fr; }
  .attachment-form { grid-template-columns: 1fr; }
  .user-row { grid-template-columns: auto 1fr auto; }
  .user-row .button-row { grid-column: 1 / -1; }
}

@media (max-width: 600px) {
  .profile-copy { display: none; }
  .topbar-title h1 { font-size: 20px; }
  .page-content { padding-inline: 14px; }
  .topbar { padding-inline: 14px; }
  .hero { padding: 27px 24px; }
  .hero-year { display: none; }
  .stat-grid, .card-grid, .form-grid, .detail-grid { grid-template-columns: 1fr; }
  .stat-card { padding: 17px; }
  .page-heading { align-items: flex-start; flex-direction: column; gap: 16px; }
  .page-heading .primary-button { width: 100%; }
  .toolbar { align-items: stretch; flex-direction: column; }
  .toolbar .select { width: 100%; }
  .toolbar .year-filter { max-width: none; }
  .form-body, .detail-body { padding-inline: 19px; }
  .form-header { padding-inline: 20px; }
  .info-panel.full, .form-group.full { grid-column: auto; }
  .info-row { grid-template-columns: 1fr; gap: 2px; }
  .form-actions { flex-direction: column-reverse; }
  .form-actions a, .form-actions button { width: 100%; }
  .detail-actions { flex-wrap: wrap; width: 100%; }
  .detail-actions a, .detail-actions button { flex: 1; }
  .toast-stack { bottom: 16px; right: 16px; }
  .login-card { padding: 28px 22px; }
  .logout-button { padding-inline: 8px; }
  .student-check-grid, .attendance-summary { grid-template-columns: 1fr; }
  .composer-actions { align-items: stretch; flex-direction: column; gap: 12px; }
  .composer-actions .whatsapp-button { width: 100%; }
}

/* Modern Kids School Dashboard */
body {
  background:
    radial-gradient(circle at 88% 8%, rgba(255, 220, 151, .24), transparent 24rem),
    radial-gradient(circle at 24% 95%, rgba(190, 231, 219, .24), transparent 28rem),
    var(--background);
}

.sidebar::-webkit-scrollbar { width: 7px; }
.sidebar::-webkit-scrollbar-track { background: transparent; }
.sidebar::-webkit-scrollbar-thumb { background: #d9d4ef; border-radius: 99px; }
.sidebar { scrollbar-color: #d9d4ef transparent; scrollbar-width: thin; }
.sidebar::after { content: "✦"; color: #f1b854; font-size: 12px; position: absolute; right: 22px; top: 96px; }
.menu a { font-size: 14px; padding-block: 11px; }
.menu a.active { background: linear-gradient(135deg, #7369df, #5e55c9); }
.menu-icon { font-size: 19px; }
.sidebar-note { background: linear-gradient(145deg, #fff8da, #fffdf4); border-color: #f6e8ad; }
.topbar { background: rgba(255, 255, 255, .82); }
.panel, .table-card, .form-card { box-shadow: var(--shadow); }
.panel { border-color: rgba(221, 217, 236, .75); }
.primary-button { background: linear-gradient(135deg, #7369df, #5e55c9); box-shadow: 0 8px 18px rgba(103, 94, 214, .18); }
.primary-button:hover { transform: translateY(-2px); box-shadow: 0 12px 24px rgba(103, 94, 214, .23); }
.secondary-button:hover, .ghost-button:hover { transform: translateY(-1px); }

.playful-page { animation: page-in .32s ease-out both; }
.module-hero, .parent-hero {
  align-items: center;
  background: #eae6ff;
  border: 1px solid rgba(255,255,255,.75);
  border-radius: 30px;
  display: flex;
  justify-content: space-between;
  margin-bottom: 24px;
  min-height: 174px;
  overflow: hidden;
  padding: 34px 40px;
  position: relative;
}
.module-hero::before, .parent-hero::before { background: rgba(255,255,255,.24); border-radius: 50%; content: ""; height: 180px; position: absolute; right: 95px; top: -95px; width: 180px; }
.module-hero::after, .parent-hero::after { border: 9px solid rgba(255,255,255,.24); border-radius: 50%; bottom: -45px; content: ""; height: 100px; position: absolute; right: 15px; width: 100px; }
.module-hero.coral { background: linear-gradient(135deg, #ffe4df, #fff3e7); }
.module-hero.mint { background: linear-gradient(135deg, #dff7ef, #effbf2); }
.module-hero.lavender { background: linear-gradient(135deg, #e7e3ff, #f3edff); }
.module-hero.yellow { background: linear-gradient(135deg, #fff0bd, #fff8dd); }
.module-hero.blue { background: linear-gradient(135deg, #dfeeff, #eef6ff); }
.module-hero h2, .parent-hero h2 { font-size: clamp(27px, 4vw, 40px); letter-spacing: -1.2px; margin: 5px 0 8px; }
.module-hero p, .parent-hero p { color: #665f75; margin: 0; max-width: 650px; }
.eyebrow { color: #655bc5; font-size: 11px; font-weight: 900; letter-spacing: 1.6px; }
.hero-doodle { animation: float 4.5s ease-in-out infinite; font-size: clamp(38px, 7vw, 72px); letter-spacing: 12px; position: relative; z-index: 1; }
.section-heading { align-items: center; display: flex; justify-content: space-between; margin: 4px 0 22px; }
.section-heading h2 { font-size: 29px; margin: 5px 0 0; }
.section-heading p { color: var(--muted); margin: 6px 0 0; }
.editor-panel { margin-bottom: 22px; }
.three-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-two { grid-column: span 2; }
.compact-toolbar { margin: 20px 0; }
.compact-toolbar .select, .compact-toolbar .input { max-width: 310px; }
.textarea.tall { min-height: 170px; }
.preline { white-space: pre-line; }
.meta-row { align-items: center; color: var(--muted); display: flex; flex-wrap: wrap; font-size: 12px; gap: 9px; }
.category-pill { background: #eeeaff; border-radius: 999px; color: #6258c5; display: inline-flex; font-size: 10px; font-weight: 900; letter-spacing: .5px; padding: 6px 9px; text-transform: uppercase; }
.category-pill.event { background: #ffe6dc; color: #b65f43; }
.category-pill.daily_activity { background: #dff6ee; color: #258164; }
.category-pill.ready { background: #dff6ee; color: #258164; }

.video-grid, .plan-grid { display: grid; gap: 22px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.video-card, .plan-card, .announcement-card, .health-history-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px; box-shadow: var(--shadow); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease;
}
.video-card:hover, .plan-card:hover, .announcement-card:hover, .summary-card:hover { box-shadow: 0 18px 40px rgba(62, 56, 108, .13); transform: translateY(-4px); }
.video-thumb { align-items: center; background: linear-gradient(145deg, #dfeeff, #eee7ff); background-position: center; background-size: cover; display: flex; font-size: 50px; height: 190px; justify-content: center; position: relative; }
.video-thumb::after { background: linear-gradient(transparent, rgba(32,31,53,.22)); content: ""; inset: 45% 0 0; position: absolute; }
.play-bubble { align-items: center; background: rgba(255,255,255,.92); border-radius: 50%; box-shadow: 0 8px 24px rgba(42,37,77,.2); color: #665bd0; display: flex; font-size: 17px; height: 48px; justify-content: center; padding-left: 3px; position: absolute; width: 48px; z-index: 1; }
.video-body { padding: 20px; }
.video-body h3 { font-size: 20px; margin: 12px 0 7px; }
.video-body p { color: var(--muted); line-height: 1.55; margin: 0 0 14px; min-height: 48px; }
.video-body .card-actions { align-items: center; margin-top: 18px; }

.health-badge { background: #e9edf4; border-radius: 999px; display: inline-block; font-size: 11px; font-weight: 800; padding: 6px 10px; text-transform: capitalize; }
.health-badge.healthy { background: #ddf7ec; color: #21785e; }
.health-badge.monitoring { background: #fff1c9; color: #9a6c12; }
.health-badge.follow_up { background: #ffe0e0; color: #a8444b; }
.media-builder { background: #faf9ff; border: 1px dashed #d9d3f4; border-radius: 20px; margin-top: 22px; padding: 20px; }
.media-chip-list { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.media-attach-help { color: var(--muted); font-size: 12px; margin: 10px 0 0; }
.media-builder .input-error { border-color: var(--red); box-shadow: 0 0 0 3px rgba(232, 45, 71, .09); }

.app-pagination { align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; padding: 11px 13px; }
.app-pagination-summary { color: var(--muted); display: grid; line-height: 1.2; margin-right: auto; text-align: left; }
.app-pagination-summary strong { color: var(--ink); font-size: 13px; }
.app-pagination-summary small { font-size: 11px; margin-top: 3px; }
.app-pagination-size { align-items: center; color: var(--muted); display: flex; font-size: 11px; gap: 7px; }
.app-pagination .pagination-size-select { appearance: auto; background-image: none; display: block; min-height: 34px; min-width: 70px; padding: 6px 8px; position: static; width: auto; }
.app-pagination-pages { display: flex; gap: 5px; }
.app-pagination-pages button { align-items: center; background: transparent; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); cursor: pointer; display: inline-flex; font: inherit; height: 32px; justify-content: center; min-width: 32px; padding: 0 7px; }
.app-pagination-pages button:hover { background: var(--primary-soft); border-color: var(--primary); }
.app-pagination-pages button.active { background: var(--primary); border-color: var(--primary); color: white; font-weight: 800; }
.app-pagination button[disabled] { cursor: not-allowed; opacity: .45; }
.account-confirm-dialog { max-width: 500px; text-align: center; }
.account-confirm-icon { align-items: center; background: var(--primary-soft); border-radius: 18px; display: inline-flex; font-size: 28px; height: 64px; justify-content: center; margin: 0 auto 10px; width: 64px; }
.account-confirm-dialog h3 { font-size: 22px; margin: 4px 0 8px; }
.account-confirm-dialog > p { color: var(--muted); line-height: 1.6; margin: 0 auto 18px; max-width: 420px; }
.account-confirm-user { align-items: center; background: var(--background); border: 1px solid var(--line); border-radius: 14px; display: flex; gap: 11px; padding: 12px; text-align: left; }
.account-confirm-user strong,.account-confirm-user small { display: block; }
.account-confirm-user small { color: var(--muted); font-size: 11px; margin-top: 2px; text-transform: capitalize; }

@media (max-width: 650px) {
  .app-pagination { align-items: center; flex-wrap: wrap; justify-content: space-between; }
  .app-pagination-summary { flex: 1 0 100%; order: -2; }
  .app-pagination-size { order: -1; }
  .app-pagination-pages { flex: 1 0 100%; justify-content: center; order: 3; }
}
.media-chip { background: white; border: 1px solid var(--line); border-radius: 999px; font-size: 12px; padding: 8px 10px; }
.media-chip button { background: none; border: 0; color: #d45b66; cursor: pointer; font-weight: 900; }
.plan-card { padding: 23px; }
.plan-card > header { align-items: flex-start; display: flex; justify-content: space-between; }
.plan-card h3 { font-size: 21px; margin: 10px 0 2px; }
.plan-card header p { color: var(--muted); margin: 0; }
.week-badge { background: #f0edff; border-radius: 15px; color: #6258c5; min-width: 80px; padding: 10px; text-align: center; }
.week-badge small, .week-badge strong { display: block; }
.week-badge small { font-size: 8px; font-weight: 900; letter-spacing: 1px; }
.plan-meta { display: flex; flex-wrap: wrap; gap: 8px 15px; margin: 20px 0; color: var(--muted); font-size: 12px; }
.plan-card details { border-block: 1px solid var(--line); padding: 14px 0; }
.plan-card summary { color: var(--primary); cursor: pointer; font-weight: 800; }
.plan-detail { padding: 8px 3px; }
.plan-detail h4 { margin: 15px 0 5px; }
.plan-detail p { color: var(--muted); line-height: 1.55; margin: 0; }
.documentation-grid { display: grid; gap: 10px; grid-template-columns: repeat(2,minmax(0,1fr)); margin-top: 16px; }
.documentation-link { align-items: center; background: #f8f7fd; border-radius: 14px; display: flex; gap: 10px; padding: 12px; text-decoration: none; }
.documentation-link strong, .documentation-link small { display: block; }
.documentation-link small { color: var(--muted); font-size: 10px; margin-top: 3px; }

.announcement-grid { display: grid; gap: 16px; }
.announcement-card { display: grid; gap: 17px; grid-template-columns: auto 1fr; padding: 22px; }
.announcement-card.pinned { border-color: #f3d476; background: linear-gradient(120deg, var(--surface), #fffdf1); }
.announcement-icon { align-items: center; background: #fff3cd; border-radius: 17px; display: flex; font-size: 27px; height: 54px; justify-content: center; width: 54px; }
.announcement-card h3 { margin: 10px 0 6px; }
.announcement-card p { color: var(--muted); line-height: 1.6; margin: 0; }
.check-row { align-items: center; display: flex; gap: 9px; }
.check-row input { height: 19px; width: 19px; }
.empty-state { align-items: center; color: var(--muted); display: flex; flex-direction: column; grid-column: 1 / -1; justify-content: center; min-height: 230px; padding: 30px; text-align: center; }
.empty-state > span { font-size: 46px; }
.empty-state h3 { color: var(--ink); margin: 12px 0 3px; }
.empty-state p { margin: 0; }

.password-backdrop { z-index: 100; }
.password-card { max-width: 470px; padding: 34px; text-align: left; }
.password-card h2 { margin: 5px 0 7px; text-align: center; }
.password-card > p { color: var(--muted); line-height: 1.55; margin: 0 0 22px; text-align: center; }
.security-illustration { font-size: 52px; text-align: center; }
.password-card .login-submit { margin-top: 10px; width: 100%; }

.parent-hero { background: linear-gradient(135deg, #dfefff, #f5eaff 70%, #fff0c8); gap: 22px; justify-content: flex-start; }
.parent-avatar { align-items: center; background: white; border: 5px solid rgba(255,255,255,.7); border-radius: 25px; display: flex; flex: 0 0 auto; font-size: 38px; font-weight: 900; height: 92px; justify-content: center; overflow: hidden; width: 92px; }
.parent-avatar img, .large-child-photo img { height: 100%; object-fit: cover; width: 100%; }
.parent-hero .hero-doodle { margin-left: auto; }
.parent-summary-grid { display: grid; gap: 16px; grid-template-columns: repeat(4,minmax(0,1fr)); margin-bottom: 24px; }
.summary-card { background: var(--surface); border: 1px solid var(--line); border-radius: 22px; box-shadow: var(--shadow); display: grid; grid-template-columns: auto 1fr; padding: 20px; text-decoration: none; transition: .2s ease; }
.summary-card > span { font-size: 32px; grid-row: span 2; margin-right: 14px; }
.summary-card strong { font-size: 25px; }
.summary-card small { color: var(--muted); }
.summary-card.peach { background: #fff5ec; }.summary-card.mint { background: #edfaf5; }.summary-card.blue { background: #eef6ff; }.summary-card.lavender { background: #f3f0ff; }
.mini-feed > div { align-items: center; border-bottom: 1px solid var(--line); display: flex; gap: 11px; padding: 12px 0; }
.mini-feed > div:last-child { border: 0; }
.mini-feed > div > span { font-size: 22px; }
.mini-feed strong, .mini-feed small { display: block; }
.mini-feed small { color: var(--muted); }
.latest-growth { display: grid; gap: 10px; grid-template-columns: repeat(3,1fr); text-align: center; }
.latest-growth div { background: #f7f6fc; border-radius: 17px; padding: 18px 8px; }
.latest-growth strong, .latest-growth small { display: block; }
.latest-growth strong { color: var(--primary); font-size: 25px; }
.latest-growth small { color: var(--muted); font-size: 10px; }
.report-download { align-items: center; background: linear-gradient(135deg,#675ed6,#8075e6); border: 0; border-radius: 22px; box-shadow: 0 14px 30px rgba(103,94,214,.22); color: white; cursor: pointer; display: flex; gap: 15px; margin-top: 24px; padding: 20px 24px; text-align: left; width: 100%; }
.report-download > span:first-child { font-size: 32px; }.report-download > span:nth-child(2) { flex: 1; }.report-download strong,.report-download small { display:block }.report-download small{opacity:.75;margin-top:3px}.report-download b{font-size:24px}
.profile-layout { display: grid; gap: 22px; grid-template-columns: minmax(230px,.45fr) 1fr; }
.child-profile-card { text-align: center; }
.large-child-photo { align-items: center; background: #f0edff; border-radius: 24px; display: flex; font-size: 60px; height: 190px; justify-content: center; margin-bottom: 16px; overflow: hidden; width: 100%; }
.child-profile-card h3 { font-size: 24px; margin: 0; }.child-profile-card p { color:var(--muted);margin:5px 0 0; }
.profile-layout .detail-grid { align-content: start; display: grid; gap: 20px; grid-template-columns: repeat(2,1fr); }
.profile-layout .detail-grid div { background: #f9f8fd; border-radius: 15px; padding: 15px; }
.profile-layout .detail-grid small,.profile-layout .detail-grid strong{display:block}.profile-layout .detail-grid small{color:var(--muted);font-size:10px;text-transform:uppercase}.profile-layout .detail-grid strong{margin-top:5px}.profile-layout .detail-grid .full{grid-column:1/-1}
.timeline { position:relative }.timeline::before{background:#ddd7f4;content:"";left:21px;position:absolute;top:10px;bottom:10px;width:2px}.timeline>article{display:grid;gap:14px;grid-template-columns:44px 1fr;margin-bottom:18px;position:relative}.timeline-dot{align-items:center;background:#fff4c9;border-radius:50%;display:flex;height:44px;justify-content:center;z-index:1}.timeline .panel{padding:21px}
.growth-panel { overflow-x:auto; }
.growth-legend { display:flex;gap:18px;justify-content:flex-end;font-size:12px;color:var(--muted) }.growth-legend i{border-radius:3px;display:inline-block;height:10px;margin-right:5px;width:10px}.growth-legend .height{background:#8f85e8}.growth-legend .weight{background:#f3a579}
.growth-chart { align-items:end;display:flex;gap:18px;height:310px;min-width:540px;padding:35px 10px 0 }.growth-column{align-items:center;display:flex;flex:1;flex-direction:column;height:100%;justify-content:end}.growth-bars{align-items:end;display:flex;gap:5px;height:245px}.growth-bar{border-radius:7px 7px 3px 3px;min-height:5px;position:relative;width:22px}.growth-bar.height{background:linear-gradient(#a89fea,#756add)}.growth-bar.weight{background:linear-gradient(#ffc39f,#ef976d)}.growth-bar span{font-size:9px;left:50%;position:absolute;top:-16px;transform:translateX(-50%)}.growth-column>small{font-size:9px;margin-top:8px;white-space:nowrap}
.health-history-grid{display:grid;gap:16px;grid-template-columns:repeat(3,minmax(0,1fr));margin-top:20px}.health-history-card{padding:20px}.health-history-card header{align-items:center;display:flex;justify-content:space-between}.health-history-card>div{display:grid;gap:8px;grid-template-columns:repeat(4,1fr);margin:17px 0;text-align:center}.health-history-card>div span{background:#f8f7fc;border-radius:11px;padding:9px 4px}.health-history-card small{color:var(--muted);font-size:9px}.health-history-card p{color:var(--muted);font-size:12px;line-height:1.5;margin:0}
.message-list { display:grid;gap:15px }.message-list .panel{align-items:flex-start;display:grid;gap:13px;grid-template-columns:auto 1fr}.message-avatar{align-items:center;background:#ebe8ff;border-radius:50%;color:#6157c3;display:flex;font-weight:900;height:44px;justify-content:center;width:44px}.message-list p{line-height:1.6;margin:10px 0}

@keyframes float { 0%,100%{transform:translateY(0) rotate(-2deg)}50%{transform:translateY(-8px) rotate(2deg)} }
@keyframes page-in { from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none} }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important } }

@media (max-width: 1120px) {
  .video-grid,.plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .parent-summary-grid,.health-history-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .three-columns { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width: 760px) {
  .module-hero,.parent-hero{align-items:flex-start;flex-direction:column;padding:27px 24px}.hero-doodle{align-self:flex-end;font-size:40px}.parent-hero .hero-doodle{display:none}.module-hero h2,.parent-hero h2{font-size:29px}.parent-avatar{height:72px;width:72px}
  .video-grid,.plan-grid,.parent-summary-grid,.health-history-grid,.profile-layout{grid-template-columns:1fr}.three-columns{grid-template-columns:1fr}.span-two{grid-column:auto}.section-heading{align-items:flex-start;flex-direction:column;gap:12px}.section-heading .primary-button{width:100%}.documentation-grid{grid-template-columns:1fr}.announcement-card{grid-template-columns:1fr}.parent-summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width: 480px) { .parent-summary-grid{grid-template-columns:1fr}.topbar-actions{gap:7px}.language-button,.icon-button{display:none}.module-hero,.parent-hero{border-radius:22px}.video-thumb{height:170px} }

.modern-dashboard-hero { background: linear-gradient(125deg,#6960d8,#8578e4 58%,#a48ee9); }
.eyebrow.light { color:#f5f1ff; }
.dashboard-illustration { animation: float 4s ease-in-out infinite; font-size: 62px; margin-left:auto; position:relative; z-index:1 }.dashboard-illustration span{font-size:35px;position:absolute;right:-6px;top:-13px}.dashboard-illustration b{bottom:-15px;font-size:37px;left:-18px;position:absolute;transform:rotate(-18deg)}
.quick-launch{display:grid;gap:14px;grid-template-columns:repeat(5,minmax(0,1fr));margin:22px 0}.quick-launch a{align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:20px;box-shadow:var(--shadow);display:flex;gap:12px;padding:16px;text-decoration:none;transition:.2s ease}.quick-launch a:hover{transform:translateY(-3px)}.quick-launch a>span{align-items:center;background:#f1efff;border-radius:14px;display:flex;font-size:25px;height:48px;justify-content:center;width:48px}.quick-launch strong,.quick-launch small{display:block}.quick-launch small{color:var(--muted);font-size:10px;margin-top:3px}
.dashboard-announcements{margin-bottom:22px}.announcement-preview{display:grid;gap:12px;grid-template-columns:repeat(4,minmax(0,1fr))}.announcement-preview article{align-items:center;background:#faf9fd;border-radius:16px;display:flex;gap:10px;padding:13px}.announcement-preview article>span{font-size:23px}.announcement-preview strong,.announcement-preview small{display:block}.announcement-preview strong{font-size:13px}.announcement-preview small{color:var(--muted);font-size:10px;margin-top:3px}
@media(max-width:1120px){.quick-launch,.announcement-preview{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:650px){.quick-launch,.announcement-preview{grid-template-columns:1fr}.dashboard-illustration{display:none}}

.read-only-module .page-heading-actions,
.read-only-module .payment-layout,
.read-only-module .payment-actions,
.read-only-module .table-card .button-row { display:none!important; }
.school-settings-panel { grid-column:1/-1; }
.backup-panel { align-items:center; background:linear-gradient(135deg,#f0edff,#fff); display:grid; gap:18px; grid-column:1/-1; grid-template-columns:auto 1fr auto; }
.backup-icon { align-items:center; background:white; border-radius:18px; display:flex; font-size:32px; height:64px; justify-content:center; width:64px; }
.backup-panel h3 { margin:0 0 5px; }.backup-panel p{color:var(--muted);line-height:1.5;margin:0;max-width:760px}
@media(max-width:700px){.backup-panel{grid-template-columns:1fr}.backup-panel .secondary-button{width:100%}}

.archive-year-panel { align-items:center; background:linear-gradient(135deg,#e9f7f1,#fff); display:grid; gap:18px; grid-column:1/-1; grid-template-columns:auto 1fr auto; }
.archive-year-panel h3 { margin:0 0 5px; }.archive-year-panel p{color:var(--muted);line-height:1.5;margin:0;max-width:760px}
.archive-year-actions { align-items:stretch; display:flex; flex-direction:column; gap:9px; min-width:225px; }
.student-select-search { margin:7px 0 9px; position:relative; width:100%; }
.student-select-search > span { color:var(--muted); font-size:22px; left:14px; line-height:1; pointer-events:none; position:absolute; top:12px; }
.student-select-search input { background:var(--surface); border:1px solid #dfe3ed; border-radius:12px; color:var(--ink); min-height:46px; padding:10px 92px 10px 42px; width:100%; }
.student-select-search input:focus { border-color:var(--primary); box-shadow:0 0 0 3px rgba(103,94,214,.12); outline:0; }
.student-select-search small { color:var(--muted); font-size:10px; position:absolute; right:12px; top:15px; }
.student-grid-search { margin-top:9px; }

/* Light pastel surfaces keep readable dark text when the app shell is in dark mode. */
.dark-mode .module-hero,
.dark-mode .parent-hero,
.dark-mode .module-hero h2,
.dark-mode .parent-hero h2 { color:#2c2940; }
.dark-mode .module-hero p,
.dark-mode .parent-hero p { color:#625b70; }
.dark-mode .module-hero .eyebrow,
.dark-mode .parent-hero .eyebrow { color:#5d53c2; }
.dark-mode .sidebar-note,
.dark-mode .sidebar-note span:last-child,
.dark-mode .summary-card,
.dark-mode .summary-card strong { color:#2c2940; }
.dark-mode .summary-card small { color:#655e72; }
.dark-mode .media-builder,
.dark-mode .documentation-link,
.dark-mode .latest-growth div,
.dark-mode .profile-layout .detail-grid div,
.dark-mode .health-history-card > div span,
.dark-mode .announcement-preview article { background:#252f48; color:var(--ink); }
.dark-mode .media-chip { background:#20283a; }
.dark-mode .announcement-card.pinned { background:var(--surface); }
.dark-mode .backup-panel,
.dark-mode .archive-year-panel { background:#252f48; }
.dark-mode .student-select-search input { background:#20283a; border-color:#3b455d; color:#edf0f8; }
@media(max-width:700px){.archive-year-panel{grid-template-columns:1fr}.archive-year-actions{min-width:0;width:100%}}

/* Consistent illustrated banner for every classic module screen. */
.page-heading {
  align-items: center;
  background: linear-gradient(135deg, #ffe4df, #fff3e7);
  border: 1px solid rgba(255,255,255,.78);
  border-radius: 30px;
  box-shadow: 0 14px 34px rgba(68,57,100,.08);
  color: #2c2940;
  min-height: 174px;
  overflow: hidden;
  padding: 34px 40px;
  position: relative;
}
.page-heading::before {
  background: rgba(255,255,255,.3);
  border-radius: 50%;
  content: "";
  height: 180px;
  position: absolute;
  right: 95px;
  top: -95px;
  width: 180px;
}
.page-heading::after {
  animation: float 4.5s ease-in-out infinite;
  content: attr(data-doodle);
  font-size: clamp(36px,6vw,66px);
  letter-spacing: 9px;
  pointer-events: none;
  position: absolute;
  right: 40px;
  top: 50%;
  transform: translateY(-50%);
}
.page-heading > * { position: relative; z-index: 2; }
.page-heading > div:first-child { max-width: min(680px,65%); }
.page-heading h2 { font-size: clamp(27px,4vw,40px); letter-spacing: -1.2px; }
.page-heading p { color: #665f75; font-size: 15px; line-height: 1.55; margin-top: 8px; }
.page-heading-actions {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-end;
  margin: -8px 0 24px;
  padding: 0 4px;
}
.page-heading-actions .year-filter { max-width: 220px; }

/* WhatsApp broadcast recipient queue. */
.broadcast-modal { max-width: 820px; }
.broadcast-toolbar { align-items: center; display: flex; gap: 18px; justify-content: space-between; margin: 18px 0 12px; }
.broadcast-search { min-width: 310px; position: relative; }
.broadcast-search > span { color: var(--muted); font-size: 21px; left: 13px; position: absolute; top: 10px; }
.broadcast-search .input { padding-left: 40px; width: 100%; }
.broadcast-recipient-list { border: 1px solid var(--line); border-radius: 18px; display: grid; max-height: 310px; overflow-y: auto; }
.broadcast-recipient { align-items: center; border-bottom: 1px solid var(--line); cursor: pointer; display: grid; gap: 12px; grid-template-columns: auto minmax(0,1fr) auto; padding: 13px 16px; }
.broadcast-recipient:last-child { border-bottom: 0; }
.broadcast-recipient:hover { background: var(--primary-soft); }
.broadcast-recipient input { height: 18px; width: 18px; }
.broadcast-recipient strong,
.broadcast-recipient small { display: block; }
.broadcast-recipient small { color: var(--muted); font-size: 11px; margin-top: 3px; }
.broadcast-recipient b { color: var(--green); font-size: 11px; }
.broadcast-recipient.opened { background: #edf9f4; }
.broadcast-recipient.missing { cursor: not-allowed; opacity: .58; }
.broadcast-summary { color: var(--muted); display: flex; font-size: 12px; font-weight: 800; justify-content: space-between; padding: 10px 2px 0; }
.announcement-actions { display: grid; gap: 10px; grid-template-columns: 1.35fr 1fr 1fr; margin-top: 22px; }
.announcement-actions button { min-height: 48px; width: 100%; }

/* Complete sidebar contrast in dark mode, including note, inactive, hover and active states. */
.dark-mode .sidebar { background: #1d2536; border-color: #303951; }
.dark-mode .brand strong { color: #f4f6fb; }
.dark-mode .brand small,
.dark-mode .menu-label,
.dark-mode .sidebar-footer { color: #aeb7cb; }
.dark-mode .menu a { color: #d2d8e6; }
.dark-mode .menu a:hover { background: #303b58; color: #ffffff; }
.dark-mode .menu a.active { background: linear-gradient(135deg,#8379ec,#675dd2); color: #ffffff; }
.dark-mode .menu a.active .menu-badge { border-color: #746add; }
.dark-mode .sidebar-note { background: linear-gradient(145deg,#28334d,#242e45); border-color: #3b4865; color: #dce3f3; }
.dark-mode .sidebar-note strong { color: #c8d0e3; }
.dark-mode .sidebar-note span:last-child { color: #ffffff; }
.dark-mode .sidebar::-webkit-scrollbar-thumb { background: #4a5570; }
.dark-mode .page-heading,
.dark-mode .page-heading h2 { color: #2c2940; }
.dark-mode .page-heading p { color: #625b70; }
.dark-mode .broadcast-recipient.opened { background: #263d3a; }

@media (max-width: 900px) {
  .page-heading > div:first-child { max-width: 58%; }
  .page-heading::after { right: 22px; }
}
@media (max-width: 760px) {
  .page-heading { align-items: flex-start; flex-direction: column; min-height: 210px; padding: 27px 24px; }
  .page-heading > div:first-child { max-width: 78%; }
  .page-heading::after { bottom: 18px; font-size: 39px; right: 20px; top: auto; transform: none; }
  .page-heading-actions { align-items: stretch; flex-direction: column; margin-top: -6px; padding: 0; }
  .page-heading-actions .year-filter,
  .page-heading-actions button,
  .page-heading-actions a { max-width: none; width: 100%; }
  .broadcast-toolbar { align-items: stretch; flex-direction: column; }
  .broadcast-search { min-width: 0; width: 100%; }
  .announcement-actions { grid-template-columns: 1fr; }
}

/* Search lives inside every select dropdown. */
.searchable-native-select {
  height: 1px !important;
  left: -9999px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: absolute !important;
  width: 1px !important;
}
.searchable-select { min-width: 0; position: relative; width: 100%; }
.searchable-select-trigger {
  align-items: center;
  background: var(--surface);
  border: 1px solid #dfe3ed;
  border-radius: 12px;
  color: var(--ink);
  cursor: pointer;
  display: flex;
  gap: 12px;
  justify-content: space-between;
  min-height: 46px;
  padding: 10px 13px;
  text-align: left;
  width: 100%;
}
.searchable-select-trigger > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.searchable-select-trigger > b { color: var(--muted); font-size: 18px; transition: transform .18s ease; }
.searchable-select.open .searchable-select-trigger { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(103,94,214,.12); }
.searchable-select.open .searchable-select-trigger > b { transform: rotate(180deg); }
.searchable-select.invalid .searchable-select-trigger { border-color: #e45d68; }
.searchable-select-menu {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(37,31,70,.2);
  display: none;
  left: 0;
  min-width: 100%;
  overflow: hidden;
  padding: 9px;
  position: absolute;
  right: 0;
  top: calc(100% + 7px);
  z-index: 150;
}
.searchable-select.open .searchable-select-menu { display: block; }
.searchable-select.open-up .searchable-select-menu { bottom: calc(100% + 7px); top: auto; }
.searchable-select-search { display: block; position: relative; }
.searchable-select-search > span { color: var(--muted); font-size: 20px; left: 12px; pointer-events: none; position: absolute; top: 9px; }
.searchable-select-search input {
  background: var(--background);
  border: 1px solid var(--line);
  border-radius: 11px;
  color: var(--ink);
  min-height: 42px;
  outline: 0;
  padding: 8px 75px 8px 38px;
  width: 100%;
}
.searchable-select-search input:focus { border-color: var(--primary); }
.searchable-select-search small { color: var(--muted); font-size: 9px; pointer-events: none; position: absolute; right: 10px; top: 14px; }
.searchable-select-options { display: grid; gap: 3px; max-height: 260px; overflow-y: auto; padding-top: 7px; }
.searchable-select-option {
  background: transparent;
  border: 0;
  border-radius: 10px;
  color: var(--ink);
  cursor: pointer;
  padding: 10px 11px;
  text-align: left;
  width: 100%;
}
.searchable-select-option:hover,
.searchable-select-option:focus { background: var(--primary-soft); color: var(--primary); outline: 0; }
.searchable-select-option.selected { background: #eeeaff; color: #5d53c2; font-weight: 800; }
.searchable-select-option.disabled { cursor: not-allowed; opacity: .48; }
.searchable-select-empty { color: var(--muted); padding: 18px 10px; text-align: center; }
.form-group > .searchable-select { width: 100%; }
.toolbar > .searchable-select { flex: 0 1 240px; min-width: 175px; }
.compact-toolbar .searchable-select { max-width: 310px; }
.data-table .searchable-select { min-width: 150px; }
.year-select-searchable { min-width: 150px; }
.hero-year .searchable-select-trigger { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.22); color: white; font-size: 18px; font-weight: 800; }
.hero-year .searchable-select-trigger > b { color: rgba(255,255,255,.8); }
.hero-year .searchable-select-menu { color: var(--ink); text-align: left; }
.dark-mode .searchable-select-trigger,
.dark-mode .searchable-select-menu { background: #20283a; border-color: #3b455d; }
.dark-mode .searchable-select-search input { background: #171d2b; border-color: #3b455d; }
.dark-mode .searchable-select-option.selected { background: #35345e; color: #ddd9ff; }

@media (max-width: 600px) {
  .toolbar > .searchable-select,
  .compact-toolbar .searchable-select { max-width: none; min-width: 0; width: 100%; }
}

/* Login-specific dark theme keeps the school scene playful without losing contrast. */
.dark-mode .login-page {
  background:
    radial-gradient(circle at 12% 18%, rgba(91,82,173,.33), transparent 28rem),
    radial-gradient(circle at 88% 82%, rgba(131,66,110,.27), transparent 25rem),
    linear-gradient(135deg,#111725 0%,#171d2b 50%,#1c1c2d 100%);
}
.dark-mode .login-page::before { background: rgba(114,103,205,.08); }
.dark-mode .login-page::after { border-color: rgba(118,107,211,.08); }
.dark-mode .login-shell { background: #1f2739; border-color: #323c55; box-shadow: 0 34px 90px rgba(0,0,0,.38); }
.dark-mode .login-illustration { background: linear-gradient(155deg,#283a5a 0%,#3b315b 52%,#5c4935 100%); }
.dark-mode .login-illustration::before { background: rgba(255,255,255,.055); }
.dark-mode .login-illustration::after { background: linear-gradient(180deg,#386c5a,#2d574b); }
.dark-mode .login-scene-copy { color: #f1f3fb; }
.dark-mode .login-scene-copy small { color: #c4cbe0; }
.dark-mode .login-theme-switch { background: rgba(28,35,52,.88); border-color: #343e57; }
.dark-mode .login-theme-switch button { color: #aeb6ca; }
.dark-mode .login-theme-switch button:hover { color: #e2dfff; }
.dark-mode .login-theme-switch button.active { background: #3a4260; color: #f2f0ff; }
.dark-mode .login-language { background: rgba(32,40,58,.9); border-color: #3a455f; color: #dcd8ff; }
.dark-mode .login-welcome-chip { background: #37345b; color: #ddd9ff; }
.dark-mode .login-password-field button { background: #303b58; }
.dark-mode .login-password-field button:hover { background: #3d4869; }
.dark-mode .login-card input:-webkit-autofill,
.dark-mode .login-card input:-webkit-autofill:hover,
.dark-mode .login-card input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #20283a inset !important;
  -webkit-text-fill-color: #edf0f8 !important;
  caret-color: #edf0f8;
}
.dark-mode .login-security-note { background: #203a36; border-color: #2d514a; color: #a8e4d3; }
.dark-mode .login-security-note small { color: #8fc2b4; }
.dark-mode .login-lock { background: #2c4a45; }

@media (max-width: 1080px) {
  .toy-pencil,.toy-crayon,.toy-star,.toy-balloon { font-size: 33px; }
  .toy-books,.toy-flower,.toy-butterfly,.toy-palette { display: none; }
}

@media (max-width: 850px) {
  .login-page { padding: 86px 22px 32px; }
  .login-shell { grid-template-columns: 1fr; max-width: 540px; min-height: 0; }
  .login-illustration { display: none; }
  .login-card { padding: 42px 44px 32px; }
  .toy-cloud { left: 2%; top: 28%; }
  .toy-balloon { right: 3%; top: 59%; }
  .toy-rainbow { bottom: 4%; right: 5%; }
}

@media (max-width: 540px) {
  .login-page { align-items: flex-start; padding: 78px 14px 22px; }
  .login-controls { left: 14px; right: 14px; top: 13px; }
  .login-theme-switch { flex: 1; }
  .login-theme-switch button { flex: 1; justify-content: center; }
  .login-language { display: block; flex: 0 0 44px; }
  .login-shell { border-radius: 25px; }
  .login-card { padding: 31px 22px 25px; }
  .login-brand { margin-bottom: 21px; }
  .login-brand .brand-mark { border-radius: 14px; font-size: 23px; height: 46px; width: 46px; }
  .login-card h1 { font-size: 30px; }
  .login-card > p { font-size: 14px; }
  .login-security-note { align-items: flex-start; }
  .toy-pencil { left: 2%; top: 10%; }
  .toy-star { right: 2%; top: 23%; }
  .toy-cloud,.toy-crayon,.toy-balloon,.toy-puzzle,.toy-sun { display: none; }
  .toy-rainbow { bottom: 1%; font-size: 28px; right: 1%; }
}

@media (max-height: 760px) and (min-width: 851px) {
  .login-page { padding-bottom: 18px; padding-top: 68px; }
  .login-shell { min-height: 570px; }
  .login-card { padding-block: 30px 22px; }
  .login-brand { margin-bottom: 15px; }
  .login-card > p { margin-bottom: 16px; }
  .login-card form { gap: 12px; }
  .login-security-note { margin-top: 13px; }
  .login-help { margin-top: 10px !important; }
  .login-schoolhouse { font-size: 104px; top: 190px; }
  .login-scene-friends { bottom: 95px; font-size: 53px; }
  .login-scene-copy { bottom: 26px; }
}

/* Original Joy Kids identity mark. */
.brand-logo-frame {
  align-items: center;
  background: linear-gradient(145deg,#f0efff,#fff7e8);
  border: 1px solid rgba(255,255,255,.86);
  border-radius: 17px;
  box-shadow: 0 10px 24px rgba(78,68,151,.18);
  display: inline-flex;
  flex: 0 0 auto;
  height: 54px;
  justify-content: center;
  overflow: hidden;
  width: 54px;
}
.brand-logo { height: 72px; object-fit: contain; width: 72px; }
.login-brand .brand-logo-frame { height: 58px; width: 58px; }
.login-brand .brand-logo { height: 77px; width: 77px; }
.dark-mode .brand-logo-frame { background: linear-gradient(145deg,#323b59,#2b324a); border-color:#414b67; }

/* Public password-recovery page within the authentication shell. */
.login-form-view,
.login-recovery-view { animation: login-view-in .28s ease-out both; }
.login-form-view > p,
.login-recovery-view > p { color: var(--muted); line-height: 1.55; margin: 0 0 23px; }
.login-password-label { align-items: center; display: flex !important; justify-content: space-between; width: 100%; }
.login-password-label > label { color: var(--ink); font-size: 13px; font-weight: 800; }
.login-password-label button { background: transparent; border: 0; color: var(--primary); cursor: pointer; font-size: 11px; font-weight: 900; padding: 3px 0; }
.login-password-label button:hover { text-decoration: underline; }
.recovery-back { align-items: center; background: transparent; border: 0; color: var(--muted); cursor: pointer; display: inline-flex; font-size: 11px; font-weight: 800; gap: 6px; margin: 0 0 19px; padding: 0; }
.recovery-back span { font-size: 18px; transition: transform .18s ease; }
.recovery-back:hover { color: var(--primary); }
.recovery-back:hover span { transform: translateX(-4px); }
.recovery-icon { align-items: center; animation: recovery-key-float 3s ease-in-out infinite; background: linear-gradient(145deg,#fff0bd,#fff7dc); border-radius: 19px; box-shadow: 0 10px 24px rgba(170,125,40,.12); display: flex; font-size: 30px; height: 62px; justify-content: center; margin-bottom: 17px; width: 62px; }
.login-recovery-view h1 { margin-bottom: 7px; }
.recovery-success { align-items: flex-start; background: #edf9f4; border: 1px solid #d8f1e6; border-radius: 17px; color: #246f59; display: flex; gap: 12px; padding: 15px; }
.recovery-success > span { font-size: 25px; }
.recovery-success strong,
.recovery-success small { display: block; }
.recovery-success strong { font-size: 13px; }
.recovery-success small { color: #538374; font-size: 10px; line-height: 1.5; margin-top: 3px; }
.recovery-steps { border-top: 1px solid var(--line); display: grid; gap: 11px 10px; grid-template-columns: 27px 1fr; margin-top: 20px; padding-top: 18px; }
.recovery-steps > span { align-items: center; background: var(--primary-soft); border-radius: 50%; color: var(--primary); display: flex; font-size: 10px; font-weight: 900; height: 27px; justify-content: center; width: 27px; }
.recovery-steps p { margin: 0; }
.recovery-steps strong,
.recovery-steps small { display: block; }
.recovery-steps strong { font-size: 11px; }
.recovery-steps small { color: var(--muted); font-size: 9px; line-height: 1.4; margin-top: 2px; }
.dark-mode .recovery-icon { background: linear-gradient(145deg,#4c4329,#373527); }
.dark-mode .recovery-success { background:#203a36; border-color:#2d514a; color:#a8e4d3; }
.dark-mode .recovery-success small { color:#8fc2b4; }
@keyframes login-view-in { from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none} }
@keyframes recovery-key-float { 0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-6px) rotate(5deg)} }

/* Administrator-assisted password reset queue. */
.password-reset-admin-panel { grid-column: 1 / -1; }
.reset-request-list { display: grid; gap: 11px; }
.reset-request-row { align-items: center; background: var(--background); border: 1px solid var(--line); border-radius: 17px; display: grid; gap: 13px; grid-template-columns: auto minmax(180px,1fr) minmax(250px,.9fr) auto; padding: 13px; }
.reset-request-avatar { align-items:center; background:linear-gradient(145deg,#e7e3ff,#dfeeff); border-radius:14px; color:#6258c5; display:flex; font-size:18px; font-weight:900; height:46px; justify-content:center; width:46px; }
.reset-request-account strong,
.reset-request-account small,
.reset-request-account time { display: block; }
.reset-request-account small { color:var(--muted); font-size:11px; margin-top:2px; }
.reset-request-account time { color:var(--muted); font-size:9px; margin-top:4px; }
.reset-password-control { align-items:center; display:grid; gap:7px; grid-template-columns:1fr auto; }
.reset-request-actions { display:flex; gap:7px; }
.reset-empty { border:1px dashed var(--line); border-radius:15px; padding:24px; }
.dark-mode .reset-request-avatar { background:#35345e; color:#ddd9ff; }
@media (max-width: 980px) {
  .reset-request-row { grid-template-columns:auto 1fr; }
  .reset-password-control,
  .reset-request-actions { grid-column:2; }
}
@media (max-width: 600px) {
  .login-brand .brand-logo-frame { height:50px; width:50px; }
  .login-brand .brand-logo { height:67px; width:67px; }
  .reset-request-row { grid-template-columns:1fr; }
  .reset-request-avatar { grid-row:auto; }
  .reset-password-control,
  .reset-request-actions { grid-column:auto; }
  .reset-password-control { grid-template-columns:1fr; }
  .reset-request-actions { flex-direction:column; }
  .reset-request-actions button { width:100%; }
}

/* 7 Kebiasaan Anak Indonesia Hebat */
.habits-page { --habit-green:#2b9b70; --habit-green-soft:#e9f7f0; --habit-yellow:#f2b84b; --habit-gray:#9aa3b1; }
.habits-hero {
  align-items:center;
  background:
    radial-gradient(circle at 85% 15%,rgba(255,255,255,.3) 0 5px,transparent 6px),
    radial-gradient(circle at 75% 70%,rgba(255,255,255,.2) 0 8px,transparent 9px),
    linear-gradient(135deg,#259a72,#5dc596);
  display:flex;
  justify-content:space-between;
  overflow:hidden;
}
.habits-hero h2 { color:#fff; font-size:clamp(28px,4vw,43px); max-width:740px; }
.habits-hero p { color:rgba(255,255,255,.88); max-width:690px; }
.habits-hero .eyebrow { color:#eafff5; }
.habits-hero-mark { align-items:center; background:rgba(255,255,255,.18); border:1px solid rgba(255,255,255,.28); border-radius:32px; color:#fff; display:flex; flex:0 0 auto; gap:13px; margin-left:30px; padding:18px 24px; transform:rotate(2deg); }
.habits-hero-mark > span { font-size:56px; font-weight:900; line-height:.9; }
.habits-hero-mark small { font-size:12px; font-weight:900; letter-spacing:.6px; line-height:1.15; text-transform:uppercase; }
.habit-child-card { align-items:center; background:linear-gradient(135deg,#fff,#f7fbf9); border:1px solid #e1eee8; border-radius:22px; box-shadow:var(--shadow); display:grid; gap:15px; grid-template-columns:auto minmax(170px,1fr) auto; margin-bottom:18px; padding:17px 20px; }
.habit-child-avatar { align-items:center; background:linear-gradient(145deg,#d9f5e8,#c5ebdd); border-radius:16px; color:#258767; display:flex; font-size:21px; font-weight:900; height:52px; justify-content:center; width:52px; }
.habit-child-card small,.habit-child-card strong,.habit-child-card span { display:block; }
.habit-child-card small { color:var(--habit-green); font-size:9px; font-weight:900; letter-spacing:1.3px; }
.habit-child-card strong { font-size:18px; margin-top:2px; }
.habit-child-card > div:nth-child(2) > span { color:var(--muted); font-size:11px; margin-top:2px; }
.habit-child-message { align-items:center; background:#fff8e4; border-radius:14px; color:#79612a; display:flex; font-size:11px; font-weight:700; gap:8px; max-width:300px; padding:10px 13px; }
.habit-child-message span { font-size:18px; }
.habit-entry-panel { padding:0; overflow:hidden; }
.habit-entry-heading { align-items:center; background:linear-gradient(135deg,#f8fcfa,#f0faf5); border-bottom:1px solid #e3eee8; display:flex; justify-content:space-between; padding:24px 26px; }
.habit-entry-heading h3,.habit-weekly-heading h3 { font-size:24px; margin:3px 0 2px; }
.habit-entry-heading p,.habit-weekly-heading p { color:var(--muted); font-size:12px; margin:0; }
.habit-entry-heading .eyebrow,.habit-weekly-heading .eyebrow { color:var(--habit-green); }
.habit-date-control { min-width:205px; }
.habit-date-control > span { color:var(--muted); display:block; font-size:10px; font-weight:800; margin-bottom:5px; }
.habit-criteria-note { align-items:flex-start; background:#fff9e9; border:1px solid #f5e8bd; border-radius:16px; display:flex; gap:12px; margin:19px 24px 0; padding:13px 15px; }
.habit-criteria-icon { align-items:center; background:#fff0b5; border-radius:11px; display:flex; flex:0 0 auto; font-size:18px; height:36px; justify-content:center; width:36px; }
.habit-criteria-note p { color:#78653a; font-size:11px; line-height:1.55; margin:1px 0 0; }
.habit-criteria-note strong { color:#5e4b22; }
.habit-list { display:grid; gap:12px; padding:20px 24px; }
.habit-card { align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:18px; display:grid; gap:14px; grid-template-columns:29px minmax(240px,1fr) minmax(480px,1.45fr); padding:14px; transition:border-color .18s ease,box-shadow .18s ease; }
.habit-card:hover { border-color:#cfe8dd; box-shadow:0 8px 22px rgba(52,112,87,.07); }
.habit-card.needs-answer { border-color:#ef9c9c; box-shadow:0 0 0 3px rgba(232,91,103,.08); }
.habit-number { align-items:center; background:#f1f6f3; border-radius:50%; color:#738179; display:flex; font-size:10px; font-weight:900; height:27px; justify-content:center; width:27px; }
.habit-copy { align-items:flex-start; display:flex; gap:11px; }
.habit-icon { align-items:center; background:var(--habit-green-soft); border-radius:13px; display:flex; flex:0 0 auto; font-size:25px; height:46px; justify-content:center; width:46px; }
.habit-copy h4 { font-size:14px; margin:2px 0 3px; }
.habit-copy p { color:var(--muted); font-size:10px; line-height:1.45; margin:0; }
.habit-options { display:grid; gap:7px; grid-template-columns:repeat(3,minmax(0,1fr)); }
.habit-option { align-items:center; background:#fbfcfd; border:1px solid var(--line); border-radius:13px; cursor:pointer; display:flex; gap:8px; min-height:56px; padding:8px 9px; transition:.16s ease; }
.habit-option:hover { border-color:#cbd4df; transform:translateY(-1px); }
.habit-option input { height:1px; opacity:0; position:absolute; width:1px; }
.habit-option-dot { font-size:17px; }
.habit-option strong,.habit-option small { display:block; }
.habit-option strong { font-size:10px; line-height:1.15; }
.habit-option small { color:var(--muted); font-size:8px; line-height:1.25; margin-top:2px; }
.habit-option.selected.independent { background:#eaf8f1; border-color:#73c9a7; box-shadow:0 0 0 2px rgba(43,155,112,.09); }
.habit-option.selected.guided { background:#fff8e5; border-color:#eccb75; box-shadow:0 0 0 2px rgba(242,184,75,.1); }
.habit-option.selected.not_yet { background:#f3f5f7; border-color:#b8c0ca; box-shadow:0 0 0 2px rgba(154,163,177,.1); }
.habit-note-and-progress { border-top:1px solid var(--line); display:grid; gap:18px; grid-template-columns:1fr minmax(290px,.55fr); padding:22px 24px; }
.habit-parent-note { margin:0; }
.habit-parent-note > span small { color:var(--muted); font-weight:600; }
.habit-parent-note textarea { min-height:96px; }
.habit-progress-card { align-items:center; background:linear-gradient(135deg,#f0faf5,#f8fcfa); border:1px solid #d9eee4; border-radius:19px; display:flex; gap:15px; padding:16px; }
.habit-progress-ring { align-items:center; background:conic-gradient(var(--habit-green) var(--progress),#dcece4 0); border-radius:50%; display:flex; flex:0 0 auto; height:78px; justify-content:center; position:relative; width:78px; }
.habit-progress-ring::after { background:var(--surface); border-radius:50%; content:""; height:58px; position:absolute; width:58px; }
.habit-progress-ring > span { color:var(--habit-green); font-size:22px; font-weight:900; position:relative; z-index:1; }
.habit-progress-ring small { font-size:11px; }
.habit-progress-card > div:last-child > small { color:var(--habit-green); display:block; font-size:8px; font-weight:900; letter-spacing:1.2px; }
.habit-progress-card strong { display:block; font-size:14px; margin-top:3px; }
.habit-progress-card p { color:var(--muted); font-size:10px; margin:3px 0 0; }
.habit-save-row { align-items:center; background:#fbfcfd; border-top:1px solid var(--line); display:flex; justify-content:space-between; padding:17px 24px; }
.habit-save-row p { color:var(--muted); font-size:9px; margin:0; }
.habit-save-button { align-items:center; display:flex; gap:8px; justify-content:center; min-width:245px; }
.habit-save-button > span { font-size:17px; }
.habit-view-note { align-items:flex-start; display:flex; gap:14px; margin-bottom:18px; padding:18px 20px; }
.habit-view-note > span { font-size:28px; }
.habit-view-note strong { display:block; }
.habit-view-note p { color:var(--muted); font-size:11px; margin:3px 0 0; }
.habit-weekly-panel { margin-top:18px; padding:0; overflow:hidden; }
.habit-weekly-heading { align-items:center; display:flex; justify-content:space-between; padding:23px 24px 17px; }
.habit-week-nav { align-items:center; background:var(--background); border:1px solid var(--line); border-radius:14px; display:flex; gap:10px; padding:4px; }
.habit-week-nav button { align-items:center; background:var(--surface); border:1px solid var(--line); border-radius:10px; color:var(--ink); cursor:pointer; display:flex; font-size:20px; height:32px; justify-content:center; width:32px; }
.habit-week-nav span { font-size:11px; font-weight:900; min-width:150px; text-align:center; }
.habit-week-filter { background:var(--background); border-block:1px solid var(--line); padding:12px 24px; }
.habit-week-filter label { align-items:center; display:flex; gap:10px; max-width:450px; }
.habit-week-filter label > span { color:var(--muted); flex:0 0 auto; font-size:10px; font-weight:800; }
.habit-week-filter .select { min-height:39px; }
.habit-legend { align-items:center; display:flex; flex-wrap:wrap; gap:17px; padding:13px 24px; }
.habit-legend > span { align-items:center; color:var(--muted); display:flex; font-size:9px; gap:5px; }
.habit-legend b { font-size:13px; }
.habit-week-table-wrap { border-top:1px solid var(--line); overflow-x:auto; }
.habit-week-table { border-collapse:collapse; min-width:900px; width:100%; }
.habit-week-table th,.habit-week-table td { border-bottom:1px solid var(--line); border-right:1px solid var(--line); padding:10px 7px; text-align:center; }
.habit-week-table th:last-child,.habit-week-table td:last-child { border-right:0; }
.habit-week-table thead th { background:#f7faf8; color:#66766f; font-size:10px; }
.habit-week-table thead th:first-child { min-width:175px; text-align:left; }
.habit-week-table thead small { color:var(--muted); display:block; font-size:8px; margin-top:2px; }
.habit-week-table tbody > tr > th { align-items:center; display:flex; font-size:10px; gap:8px; padding-left:18px; text-align:left; }
.habit-week-table tbody > tr > th span { font-size:20px; }
.habit-status-cell { background:transparent; border:0; border-radius:10px; color:var(--ink); cursor:pointer; min-height:43px; padding:4px; width:100%; }
.habit-status-cell:not(:disabled):hover { background:var(--background); }
.habit-status-cell:disabled { cursor:default; opacity:1; }
.habit-status-cell span,.habit-status-cell small { display:block; }
.habit-status-cell span { font-size:18px; }
.habit-status-cell small { color:var(--muted); font-size:7px; margin-top:2px; }
.habit-status-cell.independent { background:#f3fbf7; }
.habit-status-cell.guided { background:#fffbef; }
.habit-status-cell.not_yet { background:#f6f7f9; }
.habit-week-table tfoot th,.habit-week-table tfoot td { background:#f8faf9; border-bottom:0; color:var(--habit-green); font-size:10px; }
.habit-week-table tfoot th { padding-left:18px; text-align:left; }
.habit-table-help { color:var(--muted); font-size:9px; margin:0; padding:11px 24px 15px; text-align:right; }
.loading-state.compact { min-height:100px; }
.dark-mode .habit-child-card,.dark-mode .habit-entry-heading,.dark-mode .habit-progress-card { background:#202d2d; border-color:#354a47; }
.dark-mode .habit-child-avatar,.dark-mode .habit-icon { background:#29483f; color:#9edbc4; }
.dark-mode .habit-child-message,.dark-mode .habit-criteria-note { background:#3b3522; border-color:#554b2c; color:#e7d69b; }
.dark-mode .habit-criteria-note strong { color:#f0dfa5; }
.dark-mode .habit-option { background:#20283a; border-color:#3b455d; }
.dark-mode .habit-option.selected.independent { background:#203d35; border-color:#39775f; }
.dark-mode .habit-option.selected.guided { background:#403821; border-color:#756338; }
.dark-mode .habit-option.selected.not_yet { background:#303746; border-color:#5a6475; }
.dark-mode .habit-progress-ring::after { background:#202d2d; }
.dark-mode .habit-save-row,.dark-mode .habit-week-table thead th,.dark-mode .habit-week-table tfoot th,.dark-mode .habit-week-table tfoot td { background:#20283a; }
.dark-mode .habit-status-cell.independent { background:#20372f; }
.dark-mode .habit-status-cell.guided { background:#3c3521; }
.dark-mode .habit-status-cell.not_yet { background:#2b3240; }

@media (max-width: 1100px) {
  .habit-card { grid-template-columns:29px 1fr; }
  .habit-options { grid-column:2; }
}
@media (max-width: 760px) {
  .habits-hero-mark { display:none; }
  .habit-child-card { grid-template-columns:auto 1fr; }
  .habit-child-message { grid-column:1 / -1; max-width:none; }
  .habit-entry-heading,.habit-weekly-heading { align-items:stretch; flex-direction:column; gap:14px; }
  .habit-date-control { min-width:0; }
  .habit-note-and-progress { grid-template-columns:1fr; }
  .habit-save-row { align-items:stretch; flex-direction:column; gap:12px; }
  .habit-save-row p { text-align:center; }
  .habit-week-nav { justify-content:space-between; }
}
@media (max-width: 560px) {
  .habit-entry-heading,.habit-weekly-heading { padding:20px 17px; }
  .habit-criteria-note { margin:15px 14px 0; }
  .habit-list { padding:15px 14px; }
  .habit-card { gap:10px; grid-template-columns:1fr; padding:12px; }
  .habit-number { display:none; }
  .habit-options { grid-column:1; grid-template-columns:1fr; }
  .habit-option { min-height:50px; }
  .habit-note-and-progress,.habit-save-row { padding:17px 14px; }
  .habit-progress-card { min-width:0; }
  .habit-legend { gap:10px; padding-inline:16px; }
  .habit-week-filter { padding-inline:16px; }
  .habit-week-filter label { align-items:stretch; flex-direction:column; gap:5px; }
}

/* Joy Kids public website */
.public-site-shell {
  --public-red:#b83b2f;
  --public-red-dark:#8d2b23;
  --public-yellow:#fff0a8;
  --public-cream:#fffaf0;
  --public-ink:#293342;
  --public-muted:#687180;
  background:#fffdf8;
  color:var(--public-ink);
  min-height:100vh;
}
.public-wrap { margin-inline:auto; max-width:1180px; width:calc(100% - 48px); }
.public-header { background:rgba(255,253,248,.96); border-bottom:1px solid #eee7d9; position:sticky; top:0; z-index:60; }
.public-header-inner { align-items:center; display:flex; gap:24px; min-height:78px; }
.public-brand { align-items:center; display:flex; gap:11px; margin-right:auto; min-width:158px; text-decoration:none; }
.public-brand img { background:white; border:1px solid #eee0bd; border-radius:13px; height:48px; object-fit:contain; padding:2px; width:48px; }
.public-brand strong,.public-brand small { display:block; }
.public-brand strong { color:var(--public-red); font-size:20px; letter-spacing:-.5px; line-height:1; }
.public-brand small { color:#9a7443; font-size:10px; font-weight:800; letter-spacing:1.5px; margin-top:4px; text-transform:uppercase; }
.public-nav { align-items:center; display:flex; gap:5px; }
.public-nav a { border-radius:999px; color:#555d68; font-size:12px; font-weight:800; padding:9px 11px; text-decoration:none; transition:.18s ease; white-space:nowrap; }
.public-nav a:hover,.public-nav a.active { background:#fff0dd; color:var(--public-red); }
.public-login-link { align-items:center; background:var(--public-red); border-radius:999px; color:white; display:flex; font-size:12px; font-weight:900; gap:7px; min-height:40px; padding:0 17px; text-decoration:none; }
.public-login-link:hover { background:var(--public-red-dark); transform:translateY(-1px); }
.public-language-button { background:#fff0dd; border:1px solid #ead9c4; border-radius:12px; color:var(--public-red); cursor:pointer; flex:0 0 auto; font-size:11px; font-weight:900; height:40px; min-width:42px; }
.public-language-button:hover { background:#ffe5c5; transform:translateY(-1px); }
.public-menu-button { background:transparent; border:0; cursor:pointer; display:none; height:42px; padding:10px; width:42px; }
.public-menu-button span { background:var(--public-ink); border-radius:2px; display:block; height:2px; margin:5px 0; width:22px; }
.public-content { min-height:70vh; }
.public-page h1,.public-page h2,.public-page h3,.public-footer strong { color:var(--public-ink); letter-spacing:-.035em; }
.public-page p { color:var(--public-muted); line-height:1.72; }
.public-kicker { color:var(--public-red); display:block; font-size:11px; font-weight:900; letter-spacing:2px; margin-bottom:14px; text-transform:uppercase; }
.public-button { align-items:center; border:0; border-radius:999px; cursor:pointer; display:inline-flex; font-size:13px; font-weight:900; justify-content:center; min-height:50px; padding:0 23px; text-decoration:none; transition:.18s ease; }
.public-button.primary { background:var(--public-red); box-shadow:0 12px 26px rgba(162,54,44,.2); color:white; }
.public-button.primary:hover { background:var(--public-red-dark); transform:translateY(-2px); }
.public-button.quiet { background:white; border:1px solid #e8dfcf; color:var(--public-ink); }
.public-button.light { background:white; color:var(--public-red); }
.public-hero { align-items:center; display:grid; gap:58px; grid-template-columns:1.02fr .98fr; min-height:630px; padding-block:74px; }
.public-hero-copy h1 { font-size:clamp(48px,6.4vw,82px); line-height:.97; margin:0; max-width:680px; }
.public-hero-copy h1 em { color:var(--public-red); font-style:normal; }
.public-hero-copy > p { font-size:17px; margin:26px 0 28px; max-width:590px; }
.public-hero-actions { display:flex; flex-wrap:wrap; gap:12px; }
.public-trust-row { border-top:1px solid #ece4d6; display:grid; gap:20px; grid-template-columns:repeat(3,1fr); margin-top:43px; padding-top:23px; }
.public-trust-row b,.public-trust-row small { display:block; }
.public-trust-row b { font-size:13px; }
.public-trust-row small { color:var(--public-muted); font-size:10px; margin-top:3px; }
.public-hero-art { background:#ffe1bb; border-radius:48% 48% 42% 44% / 44% 46% 46% 50%; box-shadow:inset 0 0 0 1px rgba(162,93,40,.08); min-height:490px; overflow:hidden; position:relative; transform:rotate(1deg); }
.public-hero-art::after { background:#b8e3a8; border-radius:50% 50% 0 0; bottom:-28px; content:""; height:135px; left:-8%; position:absolute; right:-8%; transform:rotate(-3deg); }
.public-sun { color:#f2bd2a; font-size:68px; position:absolute; right:42px; top:29px; }
.public-cloud { background:white; border-radius:999px; height:24px; opacity:.8; position:absolute; width:78px; }
.public-cloud::before,.public-cloud::after { background:inherit; border-radius:50%; content:""; position:absolute; }
.public-cloud::before { height:36px; left:14px; top:-16px; width:36px; }.public-cloud::after { height:28px; right:11px; top:-10px; width:28px; }
.cloud-a { left:42px; top:76px; }.cloud-b { right:91px; top:130px; transform:scale(.72); }
.public-art-card { align-items:center; background:white; border-radius:32px; bottom:58px; box-shadow:0 22px 50px rgba(102,74,42,.16); display:flex; flex-direction:column; left:50%; padding:28px 28px 25px; position:absolute; text-align:center; transform:translateX(-50%) rotate(-1deg); width:76%; z-index:2; }
.public-art-children { display:flex; font-size:65px; gap:3px; line-height:1.1; margin-bottom:14px; }.public-art-children span:nth-child(2){transform:translateY(-10px)}
.art-star { color:#f3b928; font-size:30px; position:absolute; right:24px; top:17px; }.public-art-card strong{font-size:22px}.public-art-card small{color:var(--public-muted);font-size:11px;margin-top:5px}
.public-art-note { background:white; border-radius:14px; box-shadow:0 12px 25px rgba(97,72,46,.12); color:var(--public-red); font-size:17px; font-weight:900; padding:11px 15px; position:absolute; z-index:3; }.note-one{left:7px;top:190px;transform:rotate(-8deg)}.note-two{right:1px;top:225px;transform:rotate(8deg)}
.public-ribbon { background:var(--public-red); color:white; overflow:hidden; }.public-ribbon .public-wrap{align-items:center;display:flex;gap:24px;justify-content:space-between;min-height:55px}.public-ribbon span{font-size:11px;font-weight:900;letter-spacing:1px;text-transform:uppercase}.public-ribbon i{color:#f6c966;font-size:8px}
.public-section { padding-block:82px; }.public-section + .public-section{padding-top:25px}
.public-intro { align-items:start; display:grid; gap:70px; grid-template-columns:1fr 1fr; }.public-intro h2,.public-section-heading h2,.public-cta h2,.public-story-grid h2{font-size:clamp(32px,4vw,48px);line-height:1.08;margin:0}.public-intro>p{font-size:17px;margin:27px 0 0}
.public-section-heading { display:grid; grid-template-columns:1fr auto; margin-bottom:34px; }.public-section-heading .public-kicker{grid-column:1/-1}.public-section-heading h2{font-size:38px}.public-section-heading>a{align-self:end;color:var(--public-red);font-size:12px;font-weight:900;text-decoration:none}
.public-program-grid { display:grid; gap:18px; grid-template-columns:repeat(3,1fr); }.public-program-card{border:1px solid rgba(90,65,36,.08);border-radius:26px;min-height:360px;padding:28px;position:relative}.public-program-card.coral{background:#ffe8df}.public-program-card.yellow{background:#fff3c2}.public-program-card.blue{background:#e4f1ff}.program-icon{display:block;font-size:44px;margin-bottom:42px}.public-program-card small,.public-program-detail-list small{color:var(--public-red);font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.public-program-card h3{font-size:28px;margin:7px 0 11px}.public-program-card p{font-size:13px}.public-program-card>a{bottom:27px;color:var(--public-red);font-size:12px;font-weight:900;position:absolute;text-decoration:none}
.public-quote-card { align-items:center; background:var(--public-red); border-radius:34px; color:white; display:grid; gap:24px; grid-template-columns:auto 1fr auto; overflow:hidden; padding:43px 48px; }.public-quote-card>span{color:#ffd67d;font-family:Georgia,serif;font-size:100px;line-height:.6}.public-quote-card h2{color:white;font-size:30px;margin:0}.public-quote-card p{color:rgba(255,255,255,.75);margin:7px 0 0}
.public-news-grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}.public-news-card{background:white;border:1px solid #eee6d8;border-radius:22px;padding:25px}.public-news-card>span,.public-news-list article>div>span{background:#fff0dd;border-radius:999px;color:var(--public-red);display:inline-block;font-size:9px;font-weight:900;letter-spacing:1px;padding:6px 9px;text-transform:uppercase}.public-news-card time{color:#9299a2;float:right;font-size:10px}.public-news-card h3{font-size:20px;margin:19px 0 7px}.public-news-card p{display:-webkit-box;font-size:12px;-webkit-box-orient:vertical;-webkit-line-clamp:3;overflow:hidden}
.public-cta { align-items:center; background:#fff0be; border-radius:32px; display:flex; gap:40px; justify-content:space-between; padding:48px 54px; }.public-cta h2{margin:0}.public-cta p{margin:10px 0 0;max-width:650px}
.public-inner-hero { background:#fff1d4; border-radius:0 0 44px 44px; max-width:1320px; padding:93px max(48px,calc((100% - 1084px)/2)) 88px; text-align:center; width:calc(100% - 32px); }.public-inner-hero h1{font-size:clamp(44px,6vw,72px);line-height:1;margin:0 auto;max-width:880px}.public-inner-hero p{font-size:17px;margin:24px auto 0;max-width:720px}
.public-story-grid { align-items:center; display:grid; gap:75px; grid-template-columns:.85fr 1.15fr; }.public-story-art{align-items:center;background:#cbe7bf;border-radius:36% 50% 37% 49%;display:flex;justify-content:center;min-height:430px;transform:rotate(-2deg)}.public-story-art>div{background:white;border-radius:28px;box-shadow:0 20px 45px rgba(48,78,53,.12);padding:30px;text-align:center;transform:rotate(2deg)}.public-story-art img{display:block;height:180px;object-fit:contain;width:220px}.public-story-art span{color:var(--public-red);display:block;font-size:11px;font-weight:900;letter-spacing:1.5px;margin-top:13px;text-transform:uppercase}.public-story-grid p{font-size:16px}
.public-soft-section{background:#f6f4ed;margin-top:35px}.public-purpose-grid{display:grid;gap:70px;grid-template-columns:1fr 1fr}.public-purpose-grid article{background:white;border-radius:27px;padding:38px}.public-purpose-grid small{color:var(--public-red);font-size:10px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.public-purpose-grid h2{font-size:33px;margin:12px 0}.public-purpose-grid ul{color:var(--public-muted);line-height:2;margin:17px 0 0;padding-left:20px}
.public-values-grid{display:grid;gap:16px;grid-template-columns:repeat(4,1fr)}.public-values-grid article{border:1px solid #ece4d6;border-radius:23px;padding:25px}.public-values-grid span{align-items:center;background:#fff0dd;border-radius:14px;color:var(--public-red);display:flex;font-size:22px;height:48px;justify-content:center;width:48px}.public-values-grid h3{font-size:20px;margin:24px 0 8px}.public-values-grid p{font-size:12px;margin:0}
.public-program-detail-list{display:grid;gap:20px}.public-program-detail-list article{align-items:start;border:1px solid #ece4d6;border-radius:28px;display:grid;gap:30px;grid-template-columns:auto 1fr auto;padding:38px}.program-number{align-items:center;border-radius:50%;display:flex;font-size:13px;font-weight:900;height:56px;justify-content:center;width:56px}.program-number.coral{background:#ffe4da;color:#a84135}.program-number.yellow{background:#ffefb1;color:#8b6918}.program-number.blue{background:#e1efff;color:#3f6e9a}.public-program-detail-list h2{font-size:34px;margin:6px 0 8px}.public-program-detail-list p{margin:0;max-width:720px}.public-program-detail-list ul{color:var(--public-muted);font-size:13px;line-height:2;margin:16px 0 0;padding-left:18px}.program-big-icon{font-size:55px}
.public-gallery-grid{display:grid;gap:19px;grid-template-columns:repeat(3,1fr)}.public-gallery-card,.public-gallery-grid.sample article{background:white;border:1px solid #ece4d6;border-radius:23px;overflow:hidden;padding-bottom:20px;text-decoration:none}.gallery-visual{align-items:center;background:#ffe7d7 center/cover no-repeat;display:flex;font-size:68px;height:230px;justify-content:center;position:relative}.gallery-visual.mint{background:#dcefd9}.gallery-visual.blue{background:#dcecff}.gallery-visual.yellow{background:#fff0b5}.gallery-visual i{align-items:center;background:white;border-radius:50%;bottom:15px;color:var(--public-red);display:flex;font-size:13px;font-style:normal;height:42px;justify-content:center;position:absolute;right:15px;width:42px}.public-gallery-card small{color:var(--public-red);display:block;font-size:10px;font-weight:900;margin:19px 21px 0}.public-gallery-card h3,.public-gallery-grid.sample h3{font-size:20px;margin:7px 21px}.public-gallery-card p,.public-gallery-grid.sample p{font-size:12px;margin:0 21px}
.public-news-list{display:grid;gap:16px}.public-news-list article{align-items:start;background:white;border:1px solid #ece4d6;border-radius:24px;display:grid;gap:25px;grid-template-columns:90px 1fr;padding:27px}.public-news-list article.featured{border-color:#e6c463;box-shadow:inset 4px 0 #e6b934}.news-date{border-right:1px solid #ece4d6;text-align:center}.news-date b,.news-date small{display:block}.news-date b{color:var(--public-red);font-size:33px}.news-date small{color:var(--public-muted);font-size:10px;text-transform:uppercase}.public-news-list h2{font-size:25px;margin:12px 0 7px}.public-news-list p{font-size:13px;margin:0;white-space:pre-line}.public-empty{border:1px dashed #ddd3c4;border-radius:28px;padding:65px;text-align:center}.public-empty>span{color:var(--public-red);font-size:45px}.public-empty h2{font-size:30px;margin:15px 0 5px}
.public-admission-layout{align-items:start;display:grid;gap:55px;grid-template-columns:.72fr 1.28fr}.public-admission-layout aside{position:sticky;top:110px}.public-admission-layout aside h2{font-size:40px;margin:0}.public-admission-layout ol{display:grid;gap:20px;list-style:none;margin:34px 0;padding:0}.public-admission-layout li{align-items:center;display:flex;gap:13px}.public-admission-layout li>b{align-items:center;background:#fff0dd;border-radius:50%;color:var(--public-red);display:flex;height:42px;justify-content:center;width:42px}.public-admission-layout li strong,.public-admission-layout li small{display:block}.public-admission-layout li strong{font-size:13px}.public-admission-layout li small{color:var(--public-muted);font-size:10px;margin-top:3px}.admission-note{background:#f5f2ea;border-radius:16px;color:var(--public-muted);font-size:11px;line-height:1.6;padding:16px}
.public-form{background:white;border:1px solid #ece4d6;border-radius:30px;box-shadow:0 20px 60px rgba(93,72,43,.08);padding:38px}.public-form-heading small{color:var(--public-red);font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.public-form-heading h2{font-size:26px;margin:5px 0 23px}.public-form-heading.second{border-top:1px solid #eee7dc;margin-top:32px;padding-top:30px}.public-form .input,.public-form .select,.public-form .textarea{background:#fffcf7;border-color:#e8dfd2}.public-form .submit{margin-top:25px;width:100%}.form-privacy{font-size:10px!important;margin:12px 0 0;text-align:center}.public-honeypot{height:0;left:-9999px;overflow:hidden;position:absolute;width:0}.public-success{align-items:center;background:#eef8e9;border:1px solid #d7ebd0;border-radius:18px;display:flex;gap:14px;margin-bottom:25px;padding:18px}.public-success>span{align-items:center;background:#5ea45a;border-radius:50%;color:white;display:flex;font-weight:900;height:38px;justify-content:center;width:38px}.public-success h2{font-size:17px;margin:0}.public-success p{font-size:11px;margin:3px 0 0}
.public-contact-grid{display:grid;gap:18px;grid-template-columns:repeat(3,1fr)}.public-contact-grid article{background:white;border:1px solid #ece4d6;border-radius:25px;padding:30px}.public-contact-grid article>span{align-items:center;background:#fff0dd;border-radius:15px;color:var(--public-red);display:flex;font-size:22px;height:50px;justify-content:center;margin-bottom:27px;width:50px}.public-contact-grid small{color:var(--public-red);font-size:9px;font-weight:900;letter-spacing:1.5px;text-transform:uppercase}.public-contact-grid h2{font-size:22px;margin:8px 0}.public-contact-grid p{font-size:12px}.public-contact-grid a{color:var(--public-red);font-size:12px;font-weight:900;text-decoration:none}
.public-footer{background:#2d332f;color:white;margin-top:70px;padding:55px 0 20px}.public-footer-grid{display:grid;gap:40px;grid-template-columns:1.7fr .65fr .65fr .8fr}.public-footer-brand{align-items:flex-start;display:flex;gap:14px}.public-footer-brand img{background:white;border-radius:12px;height:58px;object-fit:contain;padding:2px;width:58px}.public-footer strong{color:white;display:block;font-size:18px}.public-footer p{color:#aeb6af;font-size:11px;line-height:1.6;margin:6px 0 0;max-width:270px}.public-footer-grid>div>small{color:#f4ce72;display:block;font-size:9px;font-weight:900;letter-spacing:1.5px;margin-bottom:15px;text-transform:uppercase}.public-footer-grid>div>a{color:#d8ddd9;display:block;font-size:11px;margin:10px 0;text-decoration:none}.public-footer-note span{color:#e6b762;font-size:30px}.public-footer-bottom{border-top:1px solid #454b47;color:#8f9891;display:flex;font-size:9px;justify-content:space-between;margin-top:40px;padding-top:18px}
.public-loading{left:50%;position:fixed;top:50%;transform:translate(-50%,-50%);z-index:70}

/* Expanded student health, vaccination, and admissions records */
.textarea.compact{min-height:74px}.form-section-heading{align-items:center;display:flex;gap:20px;justify-content:space-between;margin-bottom:18px}.form-section-heading h3{margin-bottom:4px}.form-section-heading p{color:var(--muted);font-size:11px;margin:0}.vaccination-form-list{display:grid;gap:14px}.vaccination-form-row{background:var(--background);border:1px solid var(--line);border-radius:18px;padding:18px}.vaccination-form-row header{align-items:center;display:flex;justify-content:space-between;margin-bottom:15px}.vaccination-form-row header strong{font-size:12px}.vaccination-form-row header button{background:#ffedf0;border:0;border-radius:50%;color:var(--red);cursor:pointer;font-size:21px;height:31px;line-height:1;width:31px}.vaccination-empty{align-items:center;background:var(--background);border:1px dashed #d6dbe7;border-radius:17px;display:flex;gap:13px;justify-content:center;padding:20px;text-align:center}.vaccination-empty>span{font-size:25px}.vaccination-empty p{color:var(--muted);font-size:12px;margin:0}.health-link-section{align-items:center;background:#edf8f2;border:1px solid #d8ebdf!important;border-radius:18px;display:flex;justify-content:space-between;margin-top:28px!important;padding:19px!important}.health-link-section>div{align-items:center;display:flex;gap:13px}.health-link-section>div>span{font-size:30px}.health-link-section h3{margin:0 0 3px}.health-link-section p{color:var(--muted);font-size:11px;margin:0}.student-detail-card{max-width:1120px}.student-health-panel,.student-vaccination-panel{background:#fbfcff;border:1px solid var(--line)}.health-metric-grid{display:grid;gap:12px;grid-template-columns:repeat(4,1fr)}.health-metric-grid article{background:white;border:1px solid var(--line);border-radius:16px;padding:17px;text-align:center}.health-metric-grid span{color:var(--muted);display:block;font-size:10px}.health-metric-grid strong{color:var(--primary);display:inline-block;font-size:27px;margin-top:8px}.health-metric-grid small{color:var(--muted);font-size:10px;margin-left:3px}.health-metric-grid .metric-date{font-size:18px}.compact-history{margin-top:18px;max-height:280px}.parent-vaccination-panel{margin-top:20px}
.admission-admin-grid{display:grid;gap:18px;grid-template-columns:repeat(2,minmax(0,1fr))}.admission-request-card{background:var(--surface);border:1px solid var(--line);border-radius:22px;box-shadow:var(--shadow);padding:23px}.admission-request-card header{align-items:flex-start;display:flex;gap:15px;justify-content:space-between}.admission-request-card header time{color:var(--muted);display:block;font-size:9px;margin-top:7px}.admission-request-card header .select{min-width:130px;width:auto}.admission-request-card h3{font-size:22px;margin:20px 0 4px}.admission-birth{color:var(--muted);font-size:11px}.admission-request-card dl{display:grid;gap:9px;margin:20px 0}.admission-request-card dl div{display:grid;font-size:12px;grid-template-columns:120px 1fr}.admission-request-card dt{color:var(--muted)}.admission-request-card dd{font-weight:800;margin:0;overflow-wrap:anywhere}.admission-message{background:var(--background);border-radius:14px;color:var(--ink);font-size:12px;line-height:1.6;padding:14px}.admission-request-card footer{display:flex;justify-content:flex-end;margin-top:15px}
.login-back-site{color:var(--primary);display:inline-block;font-size:10px;font-weight:900;margin-bottom:16px;text-decoration:none}.login-role-row{display:flex;flex-wrap:wrap;gap:6px;margin:-12px 0 17px}.login-role-row span{background:var(--primary-soft);border-radius:999px;color:var(--primary);font-size:9px;font-weight:900;padding:5px 8px}.brand-logo-frame{background:white}.brand-logo{height:52px;object-fit:contain;width:52px}.login-brand .brand-logo{height:55px;width:55px}

@media (max-width:1050px){.public-header-inner{gap:10px}.public-nav a{padding-inline:7px}.public-hero{gap:35px}.public-footer-grid{grid-template-columns:1.5fr 1fr 1fr}.public-footer-note{display:none}}
@media (max-width:900px){.public-menu-button{display:block}.public-nav{background:#fffdf8;border:1px solid #ece4d6;border-radius:20px;box-shadow:0 18px 45px rgba(70,54,34,.13);display:none;left:24px;padding:12px;position:absolute;right:24px;top:68px}.public-nav.open{display:grid}.public-nav a{padding:12px 14px}.public-login-link{margin-left:0}.public-hero{grid-template-columns:1fr;padding-top:55px}.public-hero-copy{text-align:center}.public-hero-copy>p{margin-inline:auto}.public-hero-actions{justify-content:center}.public-hero-art{margin-inline:auto;max-width:570px;width:100%}.public-intro,.public-story-grid,.public-purpose-grid,.public-admission-layout{gap:40px;grid-template-columns:1fr}.public-admission-layout aside{position:static}.public-program-grid,.public-gallery-grid{grid-template-columns:repeat(2,1fr)}.public-values-grid{grid-template-columns:repeat(2,1fr)}.public-program-detail-list article{grid-template-columns:auto 1fr}.program-big-icon{display:none}.public-contact-grid{grid-template-columns:1fr}.public-footer-grid{grid-template-columns:1.5fr 1fr 1fr}.public-admission-layout aside{display:grid;grid-template-columns:1fr 1fr}.public-admission-layout aside .public-kicker,.public-admission-layout aside h2,.public-admission-layout aside ol{grid-column:1}.admission-note{align-self:end;grid-column:2;grid-row:1/4}.admission-admin-grid{grid-template-columns:1fr}}
@media (max-width:650px){.public-wrap{width:calc(100% - 28px)}.public-header-inner{min-height:68px}.public-brand img{height:42px;width:42px}.public-brand span{display:none}.public-login-link{min-height:38px;padding-inline:13px}.public-hero{min-height:0;padding-block:48px}.public-hero-copy h1{font-size:48px}.public-hero-copy>p{font-size:14px}.public-trust-row{grid-template-columns:1fr;gap:12px}.public-hero-art{min-height:380px}.public-art-card{bottom:42px;width:82%}.public-art-children{font-size:49px}.public-sun{font-size:53px}.public-ribbon .public-wrap{gap:12px;justify-content:center}.public-ribbon span:nth-of-type(even),.public-ribbon i:nth-of-type(even){display:none}.public-section{padding-block:58px}.public-section+.public-section{padding-top:12px}.public-intro{gap:15px}.public-intro>p{font-size:14px;margin-top:0}.public-section-heading{display:block}.public-section-heading h2{font-size:31px}.public-section-heading>a{display:inline-block;margin-top:13px}.public-program-grid,.public-gallery-grid,.public-news-grid,.public-values-grid{grid-template-columns:1fr}.public-program-card{min-height:330px}.public-quote-card{grid-template-columns:1fr;padding:33px}.public-quote-card>span{display:none}.public-quote-card h2{font-size:25px}.public-cta{align-items:flex-start;flex-direction:column;padding:34px 28px}.public-inner-hero{border-radius:0 0 30px 30px;padding:65px 22px 60px}.public-inner-hero h1{font-size:43px}.public-inner-hero p{font-size:14px}.public-story-art{min-height:330px}.public-story-art img{height:140px;width:180px}.public-purpose-grid article{padding:27px}.public-program-detail-list article{gap:17px;grid-template-columns:1fr;padding:25px}.program-number{height:46px;width:46px}.public-news-list article{gap:14px;grid-template-columns:60px 1fr;padding:20px}.news-date b{font-size:26px}.public-news-list h2{font-size:20px}.public-empty{padding:40px 20px}.public-admission-layout aside{display:block}.admission-note{margin-top:25px}.public-form{padding:25px 19px}.public-footer-grid{grid-template-columns:1fr 1fr}.public-footer-brand{grid-column:1/-1}.public-footer-bottom{gap:14px}.form-section-heading,.health-link-section{align-items:flex-start;flex-direction:column}.health-metric-grid{grid-template-columns:repeat(2,1fr)}.detail-actions{flex-wrap:wrap}.admission-request-card header{align-items:stretch;flex-direction:column}.admission-request-card header .select{width:100%}}

/* Unified Joy Kids identity across the protected school system. */
body:not(.dark-mode) .app-shell .sidebar { background:#fffdf8; border-color:#ece4d6; }
body:not(.dark-mode) .app-shell .topbar { background:rgba(255,253,248,.92); border-color:#ece4d6; }
body:not(.dark-mode) .app-shell .menu a { color:#656a70; }
body:not(.dark-mode) .app-shell .menu a:hover { background:#fff0dd; color:#b83b2f; }
body:not(.dark-mode) .app-shell .menu a.active { background:linear-gradient(135deg,#b83b2f,#d76548); box-shadow:0 10px 24px rgba(184,59,47,.23); color:white; }
body:not(.dark-mode) .app-shell .menu a.active .menu-badge { border-color:#b83b2f; }
body:not(.dark-mode) .app-shell .sidebar-note { background:linear-gradient(145deg,#fff0be,#fff9df); border-color:#f0d68c; color:#9a392e; }
body:not(.dark-mode) .app-shell .hero,
body:not(.dark-mode) .app-shell .form-header,
body:not(.dark-mode) .app-shell .detail-cover { background:linear-gradient(120deg,#b83b2f,#d86b47); box-shadow:0 18px 45px rgba(150,54,39,.21); }
body:not(.dark-mode) .app-shell .detail-card.teacher .detail-cover { background:linear-gradient(120deg,#c8653e,#e4a33a); }
body:not(.dark-mode) .app-shell .primary-button { background:linear-gradient(135deg,#b83b2f,#d05a42); box-shadow:0 8px 18px rgba(184,59,47,.2); }
body:not(.dark-mode) .app-shell .primary-button:hover { background:linear-gradient(135deg,#9e3026,#be4937); box-shadow:0 12px 24px rgba(184,59,47,.26); }
body:not(.dark-mode) .app-shell .avatar { background:linear-gradient(145deg,#d76548,#b83b2f); }
body:not(.dark-mode) .app-shell .stat-icon.blue { background:#fff0dd; color:#b83b2f; }
body:not(.dark-mode) .app-shell .bar-fill { background:linear-gradient(90deg,#b83b2f,#e3aa33); }
body:not(.dark-mode) .app-shell .card-cover { background:linear-gradient(115deg,#b83b2f,#dc764d); }
body:not(.dark-mode) .app-shell .report-download { background:linear-gradient(135deg,#b83b2f,#d96e48); box-shadow:0 14px 30px rgba(184,59,47,.21); }
body:not(.dark-mode) .app-shell .quick-launch a>span { background:#fff0dd; }
body:not(.dark-mode) .app-shell .brand-logo-frame,
body:not(.dark-mode) .login-brand .brand-logo-frame { background:#fff8d9; border-color:#eed58d; box-shadow:0 9px 22px rgba(133,82,35,.15); }
body:not(.dark-mode) .app-shell .module-hero.coral { background:linear-gradient(135deg,#ffe4d8,#fff2d9); }
body:not(.dark-mode) .app-shell .module-hero.mint { background:linear-gradient(135deg,#e0f3dc,#fff6d9); }
body:not(.dark-mode) .app-shell .module-hero.lavender { background:linear-gradient(135deg,#ffe6d9,#fff0be); }
body:not(.dark-mode) .app-shell .module-hero.yellow { background:linear-gradient(135deg,#ffefb2,#fff8dc); }
body:not(.dark-mode) .app-shell .module-hero.blue { background:linear-gradient(135deg,#e8f1df,#fff2d2); }
body:not(.dark-mode) .app-shell .parent-hero { background:linear-gradient(135deg,#ffe4d8,#fff1be 70%,#e6f2dc); }
body:not(.dark-mode) .app-shell .module-hero .eyebrow,
body:not(.dark-mode) .app-shell .parent-hero .eyebrow { color:#a83a2e; }
body:not(.dark-mode) .login-page { background:radial-gradient(circle at 12% 18%,rgba(255,224,171,.7),transparent 27rem),radial-gradient(circle at 88% 82%,rgba(229,117,85,.18),transparent 25rem),linear-gradient(135deg,#fffaf0 0%,#fffdf8 52%,#fff4dc 100%); }
body:not(.dark-mode) .login-illustration { background:linear-gradient(155deg,#fff0bd 0%,#ffe5ce 48%,#e5f2dd 100%); }
body:not(.dark-mode) .login-welcome-chip { background:#fff0dd; color:#a8382d; }
body:not(.dark-mode) .login-theme-switch button.active { color:#a8382d; }
body:not(.dark-mode) .login-password-field button:hover { background:#ffe3c5; }

/* Guided linked-record account creation. */
.account-builder { min-width:0; overflow:visible; }
.account-builder form { display:grid; gap:16px; min-width:0; }
.account-step { align-items:center; border-top:1px solid var(--line); display:flex; gap:12px; margin-top:7px; padding-top:18px; }
.account-step:first-of-type { border-top:0; margin-top:0; padding-top:0; }
.account-step-number { align-items:center; background:var(--primary); border-radius:50%; color:white; display:flex; flex:0 0 auto; font-size:12px; font-weight:900; height:34px; justify-content:center; width:34px; }
.account-step>div,.linked-account-preview>div,.account-fields,.account-builder .form-group { min-width:0; }
.account-step strong,.account-step small { display:block; }
.account-step strong { font-size:13px; }
.account-step small { color:var(--muted); font-size:10px; line-height:1.45; margin-top:2px; }
.linked-account-preview { align-items:center; background:#fff7dc; border:1px solid #edd99a; border-radius:17px; display:flex; gap:13px; padding:15px; }
.linked-account-preview.neutral { background:var(--background); border-color:var(--line); }
.linked-account-preview>span { font-size:29px; }
.linked-account-preview small,.linked-account-preview strong { display:block; }
.linked-account-preview small { color:var(--primary); font-size:9px; font-weight:900; letter-spacing:.8px; text-transform:uppercase; }
.linked-account-preview strong { font-size:13px; margin-top:3px; overflow-wrap:anywhere; }
.linked-account-preview p { color:var(--muted); font-size:10px; margin:3px 0 0; overflow-wrap:anywhere; }
.account-fields { gap:13px; }
.account-password-row { align-items:stretch; display:grid; gap:7px; grid-template-columns:minmax(0,1fr) auto auto; }
.account-password-row button { min-height:46px; }
.account-builder .native-select { width:100%; }
.account-builder .input,.account-builder .select,.account-builder .searchable-select,.account-builder .searchable-select-trigger { max-width:100%; min-width:0; }
.account-builder .searchable-select-trigger>span { flex:1; min-width:0; }
.account-record-searchable .searchable-select-menu { max-width:100%; }
.account-record-searchable .searchable-select-option { line-height:1.4; overflow-wrap:anywhere; }
.account-list-toolbar { align-items:center; display:flex; gap:14px; justify-content:space-between; margin:0 0 16px; }
.account-search { flex:1; max-width:560px; position:relative; }
.account-search>span { color:var(--muted); font-size:23px; left:14px; line-height:1; pointer-events:none; position:absolute; top:50%; transform:translateY(-50%); }
.account-search .input { padding-left:43px; width:100%; }
.account-list-toolbar>small { color:var(--muted); font-size:10px; font-weight:800; white-space:nowrap; }
.user-row>div>small { overflow-wrap:anywhere; }
.dark-mode .linked-account-preview { background:#353247; border-color:#554d6f; }
.dark-mode .linked-account-preview.neutral { background:var(--background); border-color:var(--line); }
@media (max-width:650px){.account-builder{border-radius:22px;padding:20px}.account-builder .panel-heading{align-items:flex-start;margin-bottom:20px}.account-builder .panel-heading span{line-height:1.5}.account-step{align-items:flex-start;gap:11px;margin-top:4px;padding-top:20px}.account-step-number{height:38px;width:38px}.account-step strong{font-size:14px}.account-step small{font-size:10px}.linked-account-preview{align-items:flex-start;border-radius:18px;padding:15px}.linked-account-preview>span{align-items:center;background:rgba(255,255,255,.5);border-radius:13px;display:flex;flex:0 0 45px;font-size:23px;height:45px;justify-content:center}.dark-mode .linked-account-preview>span{background:rgba(255,255,255,.07)}.account-builder .searchable-select-trigger{min-height:50px;padding:11px 13px}.account-password-row{grid-template-columns:1fr 1fr}.account-password-row .input{grid-column:1/-1}.account-password-row button{width:100%}.account-list-toolbar{align-items:stretch;flex-direction:column}.account-list-toolbar>small{align-self:flex-end}.account-search{max-width:none}}
@media (max-width:420px){.account-builder{padding:16px}.account-step-number{height:34px;width:34px}.linked-account-preview{gap:10px;padding:13px}.linked-account-preview>span{flex-basis:40px;height:40px}.account-builder .searchable-select-trigger{font-size:13px}.account-password-row{grid-template-columns:1fr}}