:root {
  --purple-900: #3b3065;
  --purple-700: #6652c7;
  --purple-500: #8977e8;
  --blue: #3478c9;
  --teal: #18a999;
  --mint: #dff7ef;
  --coral: #f86f68;
  --peach: #fff0df;
  --sun: #ffc857;
  --sun-soft: #fff5c9;
  --sky: #dff2ff;
  --ink: #34334a;
  --muted: #6d6a82;
  --line: #e7e2f0;
  --paper: #fff;
  --wash: #fffaf3;
  --danger: #b73535;
  --success: #168267;
  --radius: 22px;
  --shadow: 0 12px 32px rgba(75, 59, 122, .10);
  --soft-shadow: 0 6px 18px rgba(75, 59, 122, .08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  font: 15px/1.55 "Avenir Next", "Trebuchet MS", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at 5% 8%, rgba(255,200,87,.18) 0 54px, transparent 55px),
    radial-gradient(circle at 96% 28%, rgba(24,169,153,.10) 0 82px, transparent 83px),
    var(--wash);
}
a { color: #5361bd; text-underline-offset: 3px; }
h1, h2, h3 { color: var(--purple-900); line-height: 1.15; letter-spacing: -.35px; }
h1 { font-weight: 850; }
.public-header, .admin-header { color: #fff; background: linear-gradient(115deg, var(--purple-900), var(--purple-700) 62%, #6c74d9); position: relative; }
.public-header::after, .admin-header::after { content: ""; position: absolute; inset: auto 0 -1px; height: 7px; background: linear-gradient(90deg, var(--sun) 0 20%, var(--coral) 20% 40%, var(--teal) 40% 60%, #5fb5ee 60% 80%, var(--purple-500) 80%); }
.public-header .inner, .admin-header .inner { max-width: 1220px; margin: auto; padding: 18px 24px 22px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.brand { display: inline-flex; align-items: center; gap: 11px; color: #fff; text-decoration: none; font-size: 22px; font-weight: 850; letter-spacing: .1px; }
.brand-mark { display: grid; place-items: center; width: 44px; height: 44px; color: var(--purple-900); background: var(--sun); border: 3px solid rgba(255,255,255,.85); border-radius: 16px 16px 16px 5px; font-weight: 900; box-shadow: 4px 5px 0 rgba(37,29,72,.25); transform: rotate(-2deg); }
.brand-logo { width: 58px; height: 44px; object-fit: contain; padding: 3px; background: #fff; border-radius: 12px; box-shadow: 3px 4px 0 rgba(37,29,72,.20); }
.nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.nav a, .nav-button { color: #f5f2ff; text-decoration: none; padding: 8px 10px; border-radius: 12px; font-weight: 700; font-size: 14px; }
.nav a:hover, .nav a.active, .nav-button:hover { background: rgba(255,255,255,.15); color: #fff; }
.nav a.active { box-shadow: inset 0 -2px 0 var(--sun); }
.nav .public-view-link { color: var(--purple-900); background: var(--sun); box-shadow: 0 3px 0 #dba634; }.nav .public-view-link:hover { color: var(--purple-900); background: #ffd46f; }
.nav-button { appearance: none; border: 0; background: transparent; cursor: pointer; font: inherit; }
.page { max-width: 1220px; margin: auto; padding: 34px 24px 70px; }
.hero { min-height: 480px; padding: 60px 0 44px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 44px; align-items: center; }
.hero h1 { max-width: 720px; margin: 8px 0 19px; font-size: clamp(42px, 6.4vw, 70px); line-height: .98; letter-spacing: -2.6px; }
.hero p { max-width: 650px; color: var(--muted); font-size: 19px; }
.hero-card { position: relative; min-height: 330px; display: grid; place-items: center; overflow: hidden; background: linear-gradient(145deg, var(--sky), #ecfbf5 55%, var(--sun-soft)); border: 6px solid #fff; border-radius: 46% 54% 44% 56% / 54% 42% 58% 46%; box-shadow: 0 20px 50px rgba(83,71,142,.16); }
.hero-card::before { content: ""; position: absolute; width: 140px; height: 140px; left: -35px; bottom: -35px; background: var(--sun); border-radius: 50%; opacity: .85; }
.hero-card::after { content: ""; position: absolute; width: 74px; height: 74px; right: 24px; top: 22px; background: var(--coral); border-radius: 42% 58% 61% 39%; opacity: .22; }
.kid-scene { position: relative; z-index: 1; text-align: center; }
.kid-scene-main { display: block; font-size: 104px; filter: drop-shadow(0 10px 6px rgba(70,64,116,.12)); transform: rotate(-3deg); }
.kid-scene-stars { display: flex; justify-content: center; gap: 25px; margin-top: -6px; font-size: 30px; }
.page-title { display: flex; justify-content: space-between; align-items: center; gap: 18px; margin-bottom: 22px; flex-wrap: wrap; }
.page-title h1 { margin: 0; font-size: 31px; }
.page-title p { margin: 6px 0 0; }
.grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; }
.span-12 { grid-column: span 12; }.span-8 { grid-column: span 8; }.span-7 { grid-column: span 7; }.span-6 { grid-column: span 6; }.span-5 { grid-column: span 5; }.span-4 { grid-column: span 4; }.span-3 { grid-column: span 3; }
.card { background: rgba(255,255,255,.96); border: 1px solid var(--line); border-radius: var(--radius); padding: 22px; box-shadow: var(--shadow); }
.card h2, .card h3 { margin-top: 0; }
.class-card { position: relative; display: flex; flex-direction: column; overflow: hidden; border: 0; border-top: 7px solid var(--teal); transition: transform .2s ease, box-shadow .2s ease; }
.class-card:nth-child(3n+2) { border-color: var(--coral); }.class-card:nth-child(3n+3) { border-color: var(--sun); }
.class-card::after { content: "✦"; position: absolute; right: 17px; top: 11px; color: var(--sun); font-size: 25px; opacity: .72; }
.class-card:hover { transform: translateY(-5px) rotate(.25deg); box-shadow: 0 18px 35px rgba(75,59,122,.15); }
.class-card .actions { margin-top: auto; padding-top: 8px; }
.class-logo-wrap { aspect-ratio: 2 / 1; margin: -22px -22px 18px; overflow: hidden; background: #f2effb; border-bottom: 1px solid var(--line); }
.class-logo-wrap img { width: 100%; height: 100%; display: block; object-fit: cover; }
.eyebrow { display: inline-block; color: var(--teal); text-transform: uppercase; letter-spacing: 1.25px; font-size: 12px; font-weight: 900; }
.metric { font-size: 32px; color: var(--purple-900); font-weight: 900; }
.muted { color: var(--muted); }
.btn { appearance: none; border: 0; border-radius: 14px; background: linear-gradient(135deg, var(--purple-700), #7569db); color: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-weight: 800; padding: 11px 17px; text-decoration: none; box-shadow: 0 5px 0 #493a94; transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: 0 7px 0 #493a94; }
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 #493a94; }
.btn-secondary { color: var(--purple-900); background: #eeeafd; box-shadow: 0 4px 0 #d4cdef; }.btn-secondary:hover { color: var(--purple-900); box-shadow: 0 6px 0 #d4cdef; }
.btn-sun { color: var(--purple-900); background: var(--sun); box-shadow: 0 5px 0 #e0a82f; }.btn-sun:hover { color: var(--purple-900); box-shadow: 0 7px 0 #e0a82f; }
.btn-danger { background: var(--danger); box-shadow: 0 5px 0 #872626; }.btn-small { padding: 7px 11px; border-radius: 10px; font-size: 13px; box-shadow: none; }.btn-small:hover { box-shadow: none; }
.button-row { display: flex; gap: 10px; flex-wrap: wrap; }
form.inline { display: inline; }
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; }
.field { grid-column: span 6; }.field.full { grid-column: span 12; }.field.third { grid-column: span 4; }.field.quarter { grid-column: span 3; }
label { display: block; margin-bottom: 6px; color: var(--purple-900); font-weight: 800; }
input, select, textarea { width: 100%; padding: 11px 12px; border: 2px solid #dcd5ea; border-radius: 13px; background: #fff; color: var(--ink); font: inherit; transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--purple-500); box-shadow: 0 0 0 4px rgba(137,119,232,.15); }
.checkbox { display: flex; gap: 8px; align-items: center; }.checkbox input { width: auto; accent-color: var(--purple-700); }.checkbox label { margin: 0; }
.help { color: var(--muted); font-size: 13px; margin-top: 5px; }
.friendly-form { border-top: 8px solid var(--sun); }
.form-section-heading { display: flex; align-items: center; gap: 13px; margin-bottom: 19px; }
.form-section-heading > span { width: 48px; height: 48px; display: grid; place-items: center; flex: 0 0 auto; background: var(--sun-soft); border-radius: 16px; font-size: 25px; }
.form-section-heading h2, .form-section-heading p { margin: 0; }.form-section-heading p { color: var(--muted); font-size: 13px; }
.form-actions { padding-top: 8px; }
.current-logo { margin-bottom: 16px; padding: 12px; background: #f8f5ff; border: 1px solid var(--line); border-radius: 16px; }
.current-logo > span { display: block; margin-bottom: 8px; color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .6px; }
.current-logo img { width: 100%; max-height: 180px; display: block; object-fit: contain; background: #fff; border-radius: 12px; }
.class-current-logo { max-width: 430px; }.class-current-logo img { aspect-ratio: 2 / 1; object-fit: cover; }
.logo-cropper { padding: 14px; background: #fcfbff; border: 2px dashed #cec4e5; border-radius: 17px; }
.logo-cropper > input[type="file"] { padding: 9px; background: #fff; }
.crop-editor { margin-top: 14px; padding: 13px; background: #fff; border: 1px solid var(--line); border-radius: 15px; }
.crop-editor-heading { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.crop-editor-heading strong { color: var(--purple-900); }.crop-editor-heading span { color: var(--muted); font-size: 12px; text-align: right; }
.crop-stage { position: relative; aspect-ratio: 2 / 1; display: grid; place-items: center; overflow: hidden; color: var(--muted); background: repeating-conic-gradient(#f1eef6 0 25%,#fff 0 50%) 50% / 22px 22px; border: 2px solid #ded7eb; border-radius: 13px; }
.crop-stage::before, .crop-stage::after { content: ""; position: absolute; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; }
.crop-stage::before { inset: 0; background: linear-gradient(90deg,transparent 33.1%,rgba(255,255,255,.72) 33.3% 33.7%,transparent 33.9% 66.1%,rgba(255,255,255,.72) 66.3% 66.7%,transparent 66.9%),linear-gradient(transparent 49.6%,rgba(255,255,255,.72) 49.8% 50.2%,transparent 50.4%); }
.crop-stage::after { inset: 9px; border: 2px solid rgba(255,255,255,.9); border-radius: 7px; box-shadow: 0 0 0 999px rgba(28,21,48,.08); }
.crop-stage canvas { width: 100%; height: 100%; display: none; object-fit: contain; cursor: grab; touch-action: none; }.crop-stage canvas:active { cursor: grabbing; }.crop-stage canvas:focus { outline: 4px solid rgba(137,119,232,.28); outline-offset: -4px; }
.logo-cropper.is-ready .crop-stage canvas { display: block; }.logo-cropper.is-ready .crop-stage p { display: none; }.logo-cropper.is-ready .crop-stage::before,.logo-cropper.is-ready .crop-stage::after { opacity: 1; }
.crop-controls { margin-top: 11px; display: flex; align-items: center; gap: 8px; opacity: .55; }.logo-cropper.is-ready .crop-controls { opacity: 1; }
.crop-zoom { margin: 0; display: flex; align-items: center; gap: 8px; flex: 1; }.crop-zoom span { font-size: 13px; }.crop-zoom input { padding: 0; accent-color: var(--purple-700); }
.crop-icon-button { width: 35px; height: 35px; padding: 0; flex: 0 0 auto; color: var(--purple-900); background: #eeeafd; border: 0; border-radius: 10px; cursor: pointer; font-size: 23px; font-weight: 800; line-height: 1; }.crop-icon-button:hover:not(:disabled) { background: #ded7f7; }.crop-icon-button:disabled,.crop-controls .btn:disabled { cursor: not-allowed; opacity: .45; }
.crop-apply { width: 100%; margin-top: 11px; display: none; }.logo-cropper.is-ready .crop-apply { display: inline-flex; }.logo-cropper.is-confirmed { border-color: var(--success); background: #f1fbf8; }.logo-cropper.is-confirmed .crop-apply { background: var(--success); box-shadow: 0 5px 0 #0f5f4b; }
.class-logo-field .logo-cropper { max-width: 820px; }
.settings-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(360px,1fr); gap: 20px; }
.settings-main { grid-column: 1; }.settings-logo { grid-column: 2; grid-row: 1; align-self: start; border-top: 8px solid var(--sun); }.settings-save { grid-column: 1 / -1; }
.settings-brand-color { margin-bottom: 17px; }
.color-field { display: grid; grid-template-columns: 58px 1fr; gap: 9px; }.color-field input[type="color"] { height: 47px; padding: 3px; cursor: pointer; }
.class-table-title { display: flex; align-items: center; gap: 10px; }.class-table-title img { width: 70px; height: 40px; object-fit: cover; border-radius: 9px; }.class-table-title strong,.class-table-title small { display: block; }.class-table-title small { color: var(--muted); }
.enroll-title-content { display: flex; align-items: center; gap: 16px; }.enroll-class-logo { width: 130px; aspect-ratio: 2 / 1; object-fit: cover; border: 4px solid #fff; border-radius: 17px; box-shadow: var(--soft-shadow); }
.table-wrap { overflow: auto; border-radius: 18px; border: 1px solid var(--line); background: #fff; box-shadow: var(--soft-shadow); }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 12px 14px; text-align: left; border-bottom: 1px solid #eeeaf4; vertical-align: middle; white-space: nowrap; }
tbody tr:hover { background: #fcfaff; }
th { color: var(--purple-900); background: #f1edfb; font-size: 11px; text-transform: uppercase; letter-spacing: .65px; }
td.wrap { white-space: normal; }.text-right { text-align: right; }
.badge { display: inline-block; padding: 5px 9px; border-radius: 99px; background: #ece9f8; color: var(--purple-900); font-size: 12px; font-weight: 850; text-transform: capitalize; }
.badge.active, .badge.succeeded, .badge.paid, .badge.present, .badge.sent { color: #07634d; background: var(--mint); }
.badge.pending, .badge.partial, .badge.late { color: #815600; background: var(--sun-soft); }
.badge.failed, .badge.cancelled, .badge.absent, .badge.overdue { color: #9a2b2b; background: #ffe1de; }
.alert { border-radius: 15px; margin: 0 0 18px; padding: 13px 16px; border: 1px solid; border-left-width: 6px; background: #fff; box-shadow: var(--soft-shadow); }
.alert.success { border-color: var(--success); }.alert.error { border-color: var(--danger); }.alert.info { border-color: var(--purple-500); background: #f8f6ff; }
.filters { display: flex; gap: 11px; align-items: end; flex-wrap: wrap; margin-bottom: 18px; }
.filters > div { min-width: 150px; flex: 1; }.filters .actions { flex: 0; display: flex; gap: 8px; }
.search-card { padding: 16px; box-shadow: var(--soft-shadow); }
.login-shell { max-width: 450px; margin: 70px auto; }.login-shell .card { border-top: 8px solid var(--sun); }
.empty { text-align: center; padding: 42px; color: var(--muted); white-space: normal; }
.empty-icon { margin-bottom: 5px; font-size: 35px; }
.footer { color: var(--muted); text-align: center; padding: 28px; font-size: 13px; }
.progress { height: 10px; border-radius: 99px; background: #e8e3f2; overflow: hidden; }.progress span { display: block; height: 100%; background: linear-gradient(90deg,var(--teal),#50c8a8); border-radius: inherit; }
.section-title { margin-top: 32px; padding-bottom: 9px; border-bottom: 3px dashed #dfd8eb; }
.skip-link { position: absolute; left: -9999px; }.skip-link:focus { left: 10px; top: 10px; z-index: 10; background: white; padding: 8px; }

/* People */
.people-heading { align-items: end; }
.people-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 18px; }
.people-tab { display: flex; align-items: center; gap: 13px; padding: 16px 18px; color: var(--purple-900); background: #fff; border: 2px solid var(--line); border-radius: 18px; text-decoration: none; box-shadow: var(--soft-shadow); }
.people-tab:hover, .people-tab.active { border-color: var(--purple-500); background: #f8f5ff; transform: translateY(-1px); }
.people-tab.active { box-shadow: inset 0 -4px 0 var(--sun), var(--soft-shadow); }
.people-tab-icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--sky); border-radius: 15px; font-size: 23px; }
.people-tab:nth-child(2) .people-tab-icon { background: var(--peach); }
.people-tab strong, .people-tab small { display: block; }.people-tab small { color: var(--muted); }
.person-name { display: flex; align-items: center; gap: 10px; color: var(--purple-900); text-decoration: none; }
.person-name small { display: block; color: var(--muted); font-size: 12px; font-weight: 500; }
.avatar { width: 40px; height: 40px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 14px; color: var(--purple-900); background: var(--sun-soft); font-weight: 900; letter-spacing: .3px; }
.avatar-student { background: var(--sky); }.avatar-parent { background: var(--peach); }
.avatar-large { width: 66px; height: 66px; border-radius: 22px; font-size: 21px; box-shadow: 4px 5px 0 rgba(70,55,126,.11); }
.person-title { display: flex; align-items: center; gap: 15px; }
.person-title h1 { margin-top: 3px; }
.card-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.card-heading h2 { margin: 2px 0 0; }
.family-grid { display: grid; gap: 10px; }
.family-card { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; padding: 13px; color: var(--purple-900); background: #fbfaff; border: 1px solid var(--line); border-radius: 16px; text-decoration: none; }
.family-card:hover { background: #f4f0ff; border-color: var(--purple-500); }
.family-card strong, .family-card small { display: block; }.family-card small { color: var(--muted); }
.profile-card { border-top: 7px solid var(--teal); }.profile-card:nth-child(2) { border-top-color: var(--coral); }.profile-highlight { background: linear-gradient(145deg,#fff9dd,#fff); border-top-color: var(--sun); }
.person-link { display: flex; flex-direction: column; gap: 3px; text-decoration: none; }.person-link span { color: var(--muted); font-size: 13px; }

@media (max-width: 940px) {
  .admin-header .inner { align-items: flex-start; flex-direction: column; }
  .admin-header .nav { gap: 2px; }
  .admin-header .nav a, .admin-header .nav-button { padding: 7px 8px; font-size: 13px; }
}
@media (max-width: 840px) {
  .hero { min-height: auto; grid-template-columns: 1fr; padding-top: 42px; }.hero-card { min-height: 230px; }.kid-scene-main { font-size: 80px; }
  .span-8, .span-7, .span-6, .span-5, .span-4, .span-3 { grid-column: span 12; }
  .field, .field.third, .field.quarter { grid-column: span 12; }
  .people-tabs { grid-template-columns: 1fr; }
  .settings-grid { grid-template-columns: 1fr; }.settings-main,.settings-logo,.settings-save { grid-column: 1; grid-row: auto; }
}
@media (max-width: 560px) {
  .public-header .inner { align-items: flex-start; flex-direction: column; }
  .page { padding-inline: 16px; }.hero h1 { font-size: 43px; }.hero-card { min-height: 190px; }
  .button-row { width: 100%; }.button-row .btn { flex: 1; }
  .people-table td, .people-table th { padding-inline: 10px; }
}
@media print { .admin-header, .public-header, .btn, .filters, .footer, .people-tabs { display: none !important; }.page { max-width: none; padding: 0; }.card, .table-wrap { box-shadow: none; } }