:root { color-scheme: light; --ink: #26312c; --green: #46765f; --pale: #eff5ef; --accent: #d88761; }
* { box-sizing: border-box; }
body { min-height: 100vh; margin: 0; padding: 32px 18px; display: grid; place-items: center; background: linear-gradient(145deg, #f2f7f0, #fff8ed); color: var(--ink); font-family: "Segoe UI", Arial, sans-serif; }
.card { width: min(100%, 470px); padding: 38px; background: #fff; border: 1px solid #e7ece6; border-radius: 22px; box-shadow: 0 18px 55px #344f3b18; }
.eyebrow { color: var(--green); font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; }
h1 { margin: 5px 0 22px; font-size: clamp(2rem, 8vw, 2.7rem); letter-spacing: -.04em; }
h2 { margin: 14px 0 8px; font-size: 1.5rem; }
.intro { margin: 0 0 24px; color: #536057; }
form { display: grid; gap: 11px; }
label { margin-top: 9px; font-size: .93rem; font-weight: 650; }
input, select { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #ced8cf; border-radius: 10px; background: #fff; color: var(--ink); font: inherit; }
input:focus, select:focus { outline: 3px solid #46765f2a; border-color: var(--green); }
button { min-height: 48px; margin-top: 10px; border: 0; border-radius: 10px; background: var(--green); color: white; font: inherit; font-weight: 700; cursor: pointer; }
button:hover { background: #355d49; }
button.secondary { width: 100%; background: #edf3ed; color: var(--green); }
.hint { margin: 18px 0 0; color: #68746b; font-size: .9rem; }
.error { padding: 12px; border-radius: 9px; background: #fff0eb; color: #873f2a; }
.badge { display: inline-block; margin: 0; padding: 7px 11px; border-radius: 99px; background: var(--pale); color: var(--green); font-size: .86rem; font-weight: 700; }
.placeholder { margin: 22px 0; padding: 18px; border: 1px dashed #bacbbd; border-radius: 12px; background: #fafcf9; line-height: 1.55; }
.placeholder h3 { margin-top: 0; }
textarea { width: 100%; padding: 11px 13px; border: 1px solid #ced8cf; border-radius: 10px; color: var(--ink); font: inherit; resize: vertical; }
.profile-list { display: grid; gap: 12px; margin: 14px 0 24px; padding: 0; list-style: none; }
.profile-list li, .profile-card { padding: 16px; border: 1px solid #e2eae2; border-radius: 12px; background: #fbfdfb; }
.actions { display: flex; align-items: center; gap: 16px; margin-top: 12px; }
.actions form { display: inline; }
.actions a, .cancel, .profile-card a { color: var(--green); font-weight: 650; }
.text-button { min-height: auto; margin: 0; padding: 0; background: transparent; color: #9b4d38; font-size: .95rem; }
.text-button:hover { background: transparent; text-decoration: underline; }
.profiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 220px)); justify-content: start; gap: 17px; margin: 22px 0; }
.profile-tile { display: block; padding: 18px; border: 1px solid #e3ebe3; border-radius: 18px; background: linear-gradient(160deg, #fff, #f9fcf8); color: var(--ink); text-decoration: none; box-shadow: 0 8px 22px #344f3b0b; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.profile-tile:hover, .profile-tile:focus-visible { transform: translateY(-3px); border-color: #aec9b4; box-shadow: 0 14px 30px #344f3b18; outline: none; }
.profile-photo { display: block; width: 100%; aspect-ratio: 4 / 3; margin-bottom: 15px; border-radius: 13px; object-fit: cover; background: var(--pale); }
.profile-photo-placeholder { display: grid; place-items: center; color: var(--green); font-size: 2rem; font-weight: 700; letter-spacing: .04em; }
.profile-tile h3 { margin: 0 0 8px; font-size: 1.15rem; }
.profile-tile p { margin: 4px 0; color: #56645a; font-size: .93rem; }
.back-link { display: inline-block; margin: 0 0 22px; color: var(--green); font-weight: 650; text-decoration: none; }
.back-link:hover { text-decoration: underline; }
.person-detail { padding: 22px; border: 1px solid #e3ebe3; border-radius: 18px; background: linear-gradient(160deg, #fff, #f9fcf8); }
.detail-photo { display: block; width: min(100%, 330px); aspect-ratio: 4 / 3; margin: 0 auto 20px; border-radius: 14px; object-fit: cover; background: var(--pale); }
.person-detail h2 { margin: 12px 0 20px; }
.detail-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; margin: 18px 0; }
.detail-facts p { display: grid; gap: 5px; margin: 0; padding: 12px; border-radius: 11px; background: #f1f6f0; }
.detail-facts p span { color: #68746b; font-size: .82rem; }
.detail-facts p strong { overflow-wrap: anywhere; }
.about-person { margin-top: 20px; padding-top: 17px; border-top: 1px solid #e3ebe3; line-height: 1.65; }
.about-person h3 { margin: 0 0 8px; }
@media (max-width: 480px) { .profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .profile-tile { padding: 12px; } .profile-tile p { font-size: .85rem; } .person-detail { padding: 16px; } }

/* Bright, playful kindergarten theme */
:root { --ink: #283b35; --green: #39735c; --pale: #eaf5e9; --accent: #e88b68; }
body { position: relative; isolation: isolate; background: #f6faf4; background-image: radial-gradient(ellipse at 8% 8%, #ffe6b9 0, #ffe6b900 27%), radial-gradient(ellipse at 93% 12%, #cceee4 0, #cceee400 25%), radial-gradient(ellipse at 88% 92%, #f7d8e5 0, #f7d8e500 24%), linear-gradient(145deg, #f5faf4, #fff9ef); }
body::before { position: fixed; inset: 0; z-index: -1; pointer-events: none; content: ""; opacity: .28; background-image: radial-gradient(#6a9b7d 1px, transparent 1px); background-size: 25px 25px; mask-image: linear-gradient(135deg, #000 0%, transparent 38%, transparent 68%, #000 100%); }
.card { position: relative; overflow: hidden; width: min(100%, 980px); padding: 42px; border: 1px solid #e7eee3; border-radius: 28px; background: rgb(255 255 255 / 94%); box-shadow: 0 24px 70px #35574417, 0 3px 12px #35574408; }
.card::before { position: absolute; inset: 0 0 auto; height: 8px; content: ""; background: linear-gradient(90deg, #f2bd5a 0 20%, #e98468 20% 40%, #a986d4 40% 60%, #5eb8a2 60% 80%, #8cbd6e 80%); }
.card::after { position: absolute; top: 22px; right: 28px; width: 25px; height: 25px; content: ""; background: #f2bd5a; clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 94%, 50% 72%, 21% 94%, 32% 57%, 2% 35%, 39% 35%); }
.card-login { max-width: 490px; }
.eyebrow { display: inline-flex; padding: 6px 10px; border-radius: 999px; background: #eff7e9; color: #39735c; letter-spacing: .12em; }
h1 { margin-top: 13px; color: #2e5948; }
h1::after { display: block; width: 74px; height: 5px; margin-top: 10px; border-radius: 9px; content: ""; background: linear-gradient(90deg, #f2bd5a, #e98468, #a986d4); }
h2 { color: #315744; }
.intro { color: #52695e; }
input, select, textarea { border-color: #d7e3d7; border-radius: 12px; background-color: #fcfefb; }
input:focus, select:focus, textarea:focus { outline-color: #5a9b7930; border-color: #5a9b79; }
button { border-radius: 12px; background: linear-gradient(135deg, #438266, #347259); box-shadow: 0 5px 12px #3472592b; transition: transform .16s ease, box-shadow .16s ease, filter .16s ease; }
button:hover { transform: translateY(-1px); background: linear-gradient(135deg, #39775d, #2e684f); box-shadow: 0 8px 17px #34725932; }
.secondary { box-shadow: none; }
.secondary:hover { color: #111; }
.notice { padding: 12px 14px; border-radius: 12px; line-height: 1.45; }
.notice-error { border: 1px solid #f1d0c7; background: #fff1ed; color: #883e2e; }
.notice-success { border: 1px solid #cce4d0; background: #eff9ed; color: #2e684b; }
.password-section { margin-top: 28px; }
.locked-info { border-style: solid; border-color: #e7d8a7; background: linear-gradient(120deg, #fff9e8, #f2f8ef); }
.locked-values { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.locked-values p { display: grid; gap: 4px; min-width: 140px; margin: 0; padding: 10px 13px; border-radius: 11px; background: #fff; }
.locked-values span { color: #68746b; font-size: .82rem; }
.current-photo { width: 140px; aspect-ratio: 1; margin-top: 10px; }
.schedule-admin { margin-top: 28px; }
.admin-schedule-list { display: grid; gap: 10px; margin-top: 16px; }
.admin-schedule-item { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 330px); align-items: center; gap: 18px; padding: 14px; border: 1px solid #e0e9dd; border-radius: 14px; background: #fff; }
.admin-schedule-item > div:first-child > * { display: block; }
.admin-schedule-item small { margin-top: 4px; color: #68746b; }
.admin-schedule-item form { gap: 7px; }
.date-edit-row { display: flex; align-items: center; gap: 8px; }
.date-edit-row input { min-width: 0; }
.date-edit-row button { flex: 0 0 auto; min-height: 42px; margin: 0; padding: 8px 12px; }
@media (max-width: 620px) { .admin-schedule-item { grid-template-columns: 1fr; } }
.board-dashboard { display: grid; grid-template-columns: repeat(auto-fit, minmax(225px, 1fr)); gap: 15px; margin: 24px 0 28px; }
.board-action { display: flex; align-items: center; gap: 12px; min-height: 116px; padding: 17px; border: 1px solid #e2ebe1; border-radius: 18px; background: #fff; color: var(--ink); text-decoration: none; box-shadow: 0 8px 22px #294d390b; transition: transform .16s ease, box-shadow .16s ease; }
.board-action[href]:hover, .board-action[href]:focus-visible { transform: translateY(-3px); box-shadow: 0 15px 28px #294d3919; outline: 2px solid #8abd93; outline-offset: 2px; }
.board-action[aria-disabled="true"] { cursor: default; opacity: .8; }
.board-action strong, .board-action small { display: block; }
.board-action small { margin-top: 5px; color: #68746b; line-height: 1.4; }
.board-action-icon { display: grid; flex: 0 0 42px; width: 42px; height: 42px; place-items: center; border-radius: 14px; background: #eff6e8; color: #39735c; font-size: 1.25rem; }
.board-mail .board-action-icon { background: #fff2d6; color: #9b642c; }
.board-info .board-action-icon { background: #fff0e7; color: #b5644e; }
.board-profile .board-action-icon { background: #f1eafa; color: #77599e; }
.board-action-arrow { margin-left: auto; color: #597361; font-size: 1.25rem; }
.infopoint-announcement { display: flex; align-items: flex-start; gap: 16px; margin: 20px 0 28px; padding: 19px 22px; border: 1px solid #eadba7; border-radius: 20px; background: linear-gradient(110deg, #fff5d8, #fff0e7 56%, #f4eff9); box-shadow: 0 9px 23px #79623c10; }
.infopoint-sun { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; border-radius: 15px; background: #f4d778; color: #85652b; font-size: 1.5rem; }
.infopoint-kicker { margin: 0 0 5px; color: #8e6830; font-size: .86rem; font-weight: 750; letter-spacing: .04em; text-transform: uppercase; }
.infopoint-announcement h3 { margin: 0; color: #315744; }
.infopoint-announcement p:last-child { margin: 7px 0 0; color: #5d6a60; }
.infopoint-list { display: grid; gap: 15px; margin: 22px 0; }
.infopoint-card { display: grid; grid-template-columns: minmax(160px, 205px) 1fr; gap: 20px; padding: 18px; border: 1px solid #e4ece1; border-radius: 20px; background: linear-gradient(145deg, #fff, #fbfdf9); box-shadow: 0 8px 22px #294d390c; }
.infopoint-date { display: flex; flex-direction: column; justify-content: center; gap: 5px; padding: 16px; border-radius: 15px; background: linear-gradient(145deg, #fff1d0, #f7eaf2); color: #4a594d; }
.infopoint-date span { color: #916a36; font-size: .85rem; font-weight: 700; }
.infopoint-date strong { color: #315744; font-size: 1.45rem; }
.infopoint-date small { color: #627064; }
.infopoint-detail p { line-height: 1.45; }
.slot-status { display: inline-block; padding: 7px 10px; border-radius: 999px; font-size: .9rem; font-weight: 700; }
.slot-status.complete { background: #e6f3e6; color: #2f704d; }
.slot-status.pending { background: #fff0d8; color: #8a6329; }
.availability-actions { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 14px; }
.availability-button { min-height: 42px; margin-top: 0; padding: 9px 13px; font-size: .9rem; }
.unavailable-button { background: #f3e9e6; color: #7b4a3e; box-shadow: none; }
.unavailable-button:hover { background: #edddd8; color: #60382e; box-shadow: none; }
@media (max-width: 620px) { .infopoint-card { grid-template-columns: 1fr; gap: 12px; padding: 13px; } .infopoint-date { padding: 12px 14px; } }
.site-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.site-title-row h1 { flex: 1 1 auto; min-width: 0; }
.header-contact { display: inline-flex; flex: 0 0 auto; align-items: center; gap: 8px; margin: -4px 38px 0 0; padding: 11px 15px; border: 1px solid #e8d89e; border-radius: 999px; background: linear-gradient(110deg, #fff2c9, #ffe8dc); color: #395b49; font-weight: 700; text-decoration: none; box-shadow: 0 5px 14px #664b2510; transition: transform .16s ease, box-shadow .16s ease; }
.header-contact:hover, .header-contact:focus-visible { transform: translateY(-2px); box-shadow: 0 9px 20px #664b2519; outline: 2px solid #dfa85d; outline-offset: 2px; }
@media (max-width: 560px) { .site-title-row { align-items: flex-start; flex-wrap: wrap; gap: 0 10px; } .site-title-row h1 { flex-basis: 100%; } .header-contact { margin: -3px 0 14px; } }
.badge { background: #fff0dc; color: #9b5e2c; }
.profile-tile { position: relative; overflow: hidden; border: 1px solid #e4ece2; border-radius: 20px; background: linear-gradient(155deg, #fff 20%, #fbfdf9); box-shadow: 0 10px 25px #294d3910; }
.profile-tile::before { position: absolute; inset: 0 0 auto; height: 5px; content: ""; background: var(--tile-color, #73b99b); }
.profile-tile:nth-child(4n + 1) { --tile-color: #72b99a; }
.profile-tile:nth-child(4n + 2) { --tile-color: #f0ad59; }
.profile-tile:nth-child(4n + 3) { --tile-color: #e88778; }
.profile-tile:nth-child(4n) { --tile-color: #9a83cf; }
.profile-tile:hover, .profile-tile:focus-visible { border-color: var(--tile-color); box-shadow: 0 17px 32px #294d3920; }
.profile-photo { border-radius: 14px; background: linear-gradient(135deg, #e2f2e4, #fff1d7 55%, #f9e0e9); }
.profile-photo-placeholder { color: #39735c; }
.person-detail { border-color: #e5eee3; border-radius: 22px; background: linear-gradient(155deg, #fff, #fbfdf9); box-shadow: 0 10px 28px #294d390d; }
.detail-facts p { border: 1px solid #e6eee4; background: #f7faf4; }
.detail-facts p:nth-child(3n + 1) { background: #f1f8ee; }
.detail-facts p:nth-child(3n + 2) { background: #fff7e9; }
.detail-facts p:nth-child(3n) { background: #fff2f0; }
.placeholder { border-color: #d7e7d6; background: linear-gradient(135deg, #f6fbf3, #fff9ef); }
footer { color: #718277; }
@media (max-width: 640px) { .card { padding: 32px 22px; border-radius: 22px; } .card::after { top: 17px; right: 19px; width: 20px; height: 20px; } }
footer { margin-top: 30px; color: #79837c; font-size: .82rem; text-align: center; }
@media (max-width: 480px) { .card { padding: 27px 22px; } }
.mailbox-list { display: grid; gap: 18px; margin: 22px 0; }
.mail-card { padding: 20px; border: 1px solid #e2ebe1; border-radius: 20px; background: linear-gradient(145deg, #fff, #fbfdf9); box-shadow: 0 9px 24px #294d390d; }
.mail-card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.mail-card-header h3 { margin: 4px 0 0; color: #315744; overflow-wrap: anywhere; }
.mail-card-header time { flex: 0 0 auto; color: #718077; font-size: .85rem; }
.mail-kicker { margin: 0; color: #8e6830; font-size: .82rem; font-weight: 750; }
.mail-sender { margin: 8px 0 15px; color: #69786e; font-size: .9rem; overflow-wrap: anywhere; }
.mail-body { padding: 16px; border-radius: 14px; background: #f7faf4; color: #34443a; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere; }
.mail-reply { margin-top: 16px; padding-top: 13px; border-top: 1px solid #e6eee4; }
.mail-reply summary { color: #347259; font-weight: 750; cursor: pointer; }
.mail-reply form { margin-top: 14px; }
.mail-reply button { max-width: 240px; }
.mailbox-empty { display: grid; gap: 6px; }
@media (max-width: 560px) { .mail-card { padding: 15px; } .mail-card-header { flex-direction: column; gap: 6px; } }
.mail-delete { margin-top: 12px; padding-top: 12px; border-top: 1px solid #f0e3df; }
.mail-delete summary { color: #9b4d38; font-size: .9rem; font-weight: 700; cursor: pointer; }
.mail-delete form { margin-top: 10px; }
.mail-delete form p { margin: 0; color: #6f716d; font-size: .9rem; }
.mail-delete-button { width: fit-content; min-height: 42px; padding: 9px 13px; background: #9d5142; box-shadow: none; }
.mail-delete-button:hover { background: #823c31; }