:root {
  --ink: #20252a;
  --muted: #777a78;
  --paper: #f7f5ef;
  --card: #fffefa;
  --purple: #7559e8;
  --purple-dark: #5138bd;
  --mint: #a9dbcc;
  --line: rgba(32, 37, 42, .09);
  --shadow: 0 14px 34px rgba(48, 45, 38, .09);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html { background: var(--paper); }
body { margin: 0; min-height: 100vh; background: var(--paper); color: var(--ink); font-family: "Be Vietnam Pro", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
button, input, select { font: inherit; }
button { color: inherit; }
.is-hidden { display: none !important; }

.loading-screen { min-height: 100vh; display: grid; place-content: center; justify-items: center; gap: 14px; color: var(--muted); font-size: 13px; }
.brand-mark { width: 58px; height: 58px; border-radius: 20px; display: grid; place-items: center; background: var(--ink); color: white; font-size: 28px; font-weight: 800; box-shadow: var(--shadow); transform: rotate(-4deg); }
.app-shell { width: min(100%, 680px); margin: 0 auto; padding: 20px 18px calc(108px + var(--safe-bottom)); }

.topbar { display: flex; align-items: center; justify-content: space-between; margin: 2px 2px 22px; }
.eyebrow { margin: 0 0 5px; color: var(--muted); font-size: 10px; line-height: 1; letter-spacing: .16em; font-weight: 800; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: 27px; letter-spacing: -.045em; }
h2 { margin-bottom: 0; font-size: 21px; letter-spacing: -.035em; }
.avatar { width: 43px; height: 43px; border: 0; border-radius: 15px; background: #e8e1cd; color: #6a5f47; font-size: 12px; font-weight: 800; cursor: pointer; }

.hero-card { position: relative; min-height: 184px; overflow: hidden; display: flex; align-items: flex-end; padding: 24px; border-radius: 30px; background: var(--ink); color: white; box-shadow: 0 18px 44px rgba(32, 37, 42, .18); }
.hero-copy { position: relative; z-index: 2; max-width: 75%; }
.hero-kicker { display: block; margin-bottom: 24px; color: rgba(255,255,255,.55); font-size: 9px; letter-spacing: .18em; font-weight: 800; }
.next-name { margin: 0 0 6px; font-size: 25px; line-height: 1.18; letter-spacing: -.04em; }
.next-meta { margin: 0; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.6; }
.next-empty { margin: 0; font-size: 22px; line-height: 1.35; letter-spacing: -.03em; }
.orbit { position: absolute; right: -28px; top: -23px; width: 156px; height: 156px; border: 1px solid rgba(255,255,255,.16); border-radius: 50%; }
.orbit:before, .orbit:after { content: ""; position: absolute; inset: 19px; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; }
.orbit:after { inset: 48px; background: var(--purple); border: 0; box-shadow: 0 0 50px rgba(117, 89, 232, .62); }
.orbit span { position: absolute; z-index: 2; left: 8px; bottom: 17px; width: 14px; height: 14px; border-radius: 50%; background: var(--mint); }
.orbit i { position: absolute; z-index: 2; top: 58px; right: 59px; font-style: normal; color: white; }

.family-strip { display: flex; align-items: center; gap: 8px; margin: 20px 0 30px; overflow-x: auto; scrollbar-width: none; }
.family-strip::-webkit-scrollbar { display: none; }
.chip-list { display: contents; }
.child-chip, .add-child-chip { flex: 0 0 auto; min-height: 38px; border: 1px solid var(--line); border-radius: 14px; background: var(--card); padding: 0 13px; font-size: 11px; font-weight: 700; cursor: pointer; }
.child-chip { display: flex; align-items: center; gap: 7px; }
.child-chip.active { background: var(--ink); border-color: var(--ink); color: white; }
.chip-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--chip-color); }
.all-dot { background: var(--mint); }
.add-child-chip { width: 38px; padding: 0; font-size: 18px; color: var(--muted); }

.section-heading { display: flex; align-items: end; justify-content: space-between; margin: 0 2px 16px; }
.text-button { border: 0; padding: 6px 0; background: transparent; color: var(--purple-dark); font-size: 10px; font-weight: 800; cursor: pointer; }
.schedule-list { display: grid; gap: 11px; }
.day-group { display: grid; gap: 8px; }
.day-label { display: flex; align-items: center; gap: 9px; margin: 13px 2px 2px; color: var(--muted); font-size: 10px; font-weight: 700; }
.day-label.today { color: var(--purple-dark); }
.day-label:after { content: ""; height: 1px; flex: 1; background: var(--line); }
.lesson-card { position: relative; display: grid; grid-template-columns: 57px 4px 1fr auto; gap: 12px; align-items: center; min-height: 86px; padding: 14px 12px 14px 14px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); box-shadow: 0 6px 18px rgba(48, 45, 38, .035); }
.lesson-time strong { display: block; font-size: 14px; letter-spacing: -.02em; }
.lesson-time span { display: block; margin-top: 4px; color: var(--muted); font-size: 9px; }
.lesson-bar { width: 4px; height: 42px; border-radius: 3px; background: var(--lesson-color); }
.lesson-info { min-width: 0; }
.lesson-info h3 { overflow: hidden; margin: 0 0 6px; font-size: 14px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-info p { overflow: hidden; margin: 0; color: var(--muted); font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.lesson-child { display: inline-flex; margin-top: 7px; padding: 3px 7px; border-radius: 7px; background: color-mix(in srgb, var(--child-color) 14%, white); color: var(--ink); font-size: 8px; font-weight: 800; }
.lesson-more { width: 32px; height: 40px; border: 0; border-radius: 12px; background: transparent; color: var(--muted); font-size: 20px; cursor: pointer; }
.lesson-card.cancelled { opacity: .58; }
.lesson-card.cancelled .lesson-info h3, .lesson-card.cancelled .lesson-time strong { text-decoration: line-through; }
.status-tag { display: inline-block; margin-left: 5px; color: #bd4e44; font-size: 8px; text-decoration: none; }

.empty-state { padding: 35px 20px; text-align: center; color: var(--muted); }
.empty-state h3 { margin-bottom: 8px; color: var(--ink); font-size: 17px; }
.empty-state p { max-width: 310px; margin: 0 auto 18px; font-size: 11px; line-height: 1.7; }
.empty-illustration { width: 66px; height: 66px; display: grid; place-items: center; margin: 0 auto 18px; border-radius: 25px; background: #e8e1cd; color: var(--purple); font-size: 21px; transform: rotate(5deg); }

.panel { min-height: 400px; }
.children-cards { display: grid; gap: 11px; }
.child-card { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--line); border-radius: 22px; background: var(--card); }
.child-avatar { width: 46px; height: 46px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 17px; background: var(--child-color); color: white; font-size: 15px; font-weight: 800; }
.child-card h3 { margin: 0 0 5px; font-size: 14px; }
.child-card p { margin: 0; color: var(--muted); font-size: 10px; }
.settings-card { padding: 20px; border: 1px solid var(--line); border-radius: 24px; background: var(--card); }
.settings-card label { font-size: 12px; }
.settings-card select { margin: 10px 0; }
.settings-card p { margin: 0; color: var(--muted); font-size: 10px; line-height: 1.6; }

.fab { position: fixed; z-index: 8; right: max(22px, calc((100vw - 640px) / 2)); bottom: calc(80px + var(--safe-bottom)); width: 54px; height: 54px; border: 0; border-radius: 19px; background: var(--purple); color: white; box-shadow: 0 13px 28px rgba(117, 89, 232, .34); font-size: 26px; cursor: pointer; }
.bottom-nav { position: fixed; z-index: 7; left: 50%; bottom: 0; width: min(100%, 680px); height: calc(69px + var(--safe-bottom)); display: grid; grid-template-columns: repeat(3, 1fr); padding: 8px 18px var(--safe-bottom); transform: translateX(-50%); border-top: 1px solid var(--line); background: rgba(247,245,239,.94); backdrop-filter: blur(18px); }
.nav-item { border: 0; background: transparent; color: #9a9a96; cursor: pointer; }
.nav-item span { display: block; margin-bottom: 3px; font-size: 19px; line-height: 1; }
.nav-item b { font-size: 9px; }
.nav-item.active { color: var(--purple-dark); }

.sheet-dialog { width: min(100%, 680px); max-width: none; max-height: 90vh; margin: auto auto 0; padding: 0; overflow: hidden; border: 0; border-radius: 30px 30px 0 0; background: var(--paper); color: var(--ink); }
.sheet-dialog::backdrop { background: rgba(20, 22, 22, .5); backdrop-filter: blur(3px); }
.sheet { max-height: 90vh; overflow-y: auto; padding: 10px 22px calc(25px + var(--safe-bottom)); }
.sheet-handle { width: 38px; height: 4px; margin: 0 auto 20px; border-radius: 4px; background: #d8d5cc; }
.sheet-title { display: flex; justify-content: space-between; align-items: start; margin-bottom: 20px; }
.close-button { width: 34px; height: 34px; border: 0; border-radius: 12px; background: #e9e6dc; color: var(--muted); font-size: 22px; cursor: pointer; }
.sheet label, .settings-card label { display: block; color: #555a5b; font-size: 10px; font-weight: 700; }
input, select { width: 100%; height: 46px; margin: 7px 0 14px; padding: 0 13px; border: 1px solid var(--line); outline: 0; border-radius: 13px; background: var(--card); color: var(--ink); font-size: 12px; }
input:focus, select:focus { border-color: var(--purple); box-shadow: 0 0 0 3px rgba(117, 89, 232, .1); }
input[type="color"] { padding: 7px; }
.form-grid { display: grid; gap: 11px; }
.form-grid.two { grid-template-columns: 1fr 1fr; }
.form-grid.fee-color { grid-template-columns: 1fr 92px; }
.primary-button { min-height: 44px; border: 0; border-radius: 14px; padding: 0 17px; background: var(--ink); color: white; font-size: 11px; font-weight: 800; cursor: pointer; }
.primary-button.full { width: 100%; min-height: 50px; margin-top: 4px; background: var(--purple); }
.primary-button:disabled { opacity: .55; }
.segmented { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; margin-bottom: 15px; padding: 5px; border-radius: 15px; background: #ebe8df; }
.segmented label { position: relative; }
.segmented input { position: absolute; opacity: 0; }
.segmented span { display: grid; min-height: 39px; place-items: center; border-radius: 11px; font-size: 10px; cursor: pointer; }
.segmented input:checked + span { background: white; color: var(--purple-dark); box-shadow: 0 3px 10px rgba(48,45,38,.08); }
.toast { position: fixed; z-index: 30; left: 50%; bottom: calc(90px + var(--safe-bottom)); max-width: calc(100% - 40px); padding: 11px 16px; transform: translate(-50%, 20px); border-radius: 13px; background: var(--ink); color: white; font-size: 10px; opacity: 0; pointer-events: none; transition: .22s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (min-width: 681px) {
  body { background: #dedbd2; }
  .app-shell { min-height: 100vh; background: var(--paper); box-shadow: 0 0 80px rgba(32,37,42,.08); }
  .bottom-nav { box-shadow: 0 -10px 35px rgba(32,37,42,.06); }
}

@media (max-width: 370px) {
  .app-shell { padding-left: 14px; padding-right: 14px; }
  .hero-card { min-height: 170px; padding: 20px; }
  .next-name { font-size: 22px; }
  .lesson-card { grid-template-columns: 50px 4px 1fr 28px; gap: 9px; }
}