:root {
  color-scheme: dark;
  --night: #0a0d1f; --ink: #eae8f4; --dim: #8e8ba8;
  --dawn: #ffb26b; --pale: #ffe7b8; --dusk: #8b7bf7; --dusk-pale: #b3a7ff;
  --rounded: ui-rounded, 'SF Pro Rounded', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  color: var(--ink); background: var(--night); font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; }
button, input, select { font: inherit; }
button { color: inherit; cursor: pointer; border: 0; background: none; touch-action: manipulation; }
button:disabled { cursor: default; }
button, a, input, select { outline-offset: 5px; }
:focus-visible { outline: 2px solid var(--pale); }
button { transition: transform .18s, background .18s, opacity .18s; }
button:active:not(:disabled) { transform: scale(.96); }
input { min-width: 0; }
svg { width: 20px; height: 20px; flex: 0 0 auto; vertical-align: middle; }
h1, h2, h3, p { margin: 0; }
.rounded, h1, h2, h3, strong { font-family: var(--rounded); }
.mono { font-family: var(--mono); }
.dim { color: var(--dim); }
.glass { background: #ffffff0e; border: 1px solid #ffffff1a; border-radius: 20px; }
.boot { min-height: 100dvh; display: grid; place-items: center; color: var(--pale); }
.login {
  position: relative; min-height: 100svh; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: center;
  padding: max(70px, calc(env(safe-area-inset-top) + 28px)) 24px max(40px, env(safe-area-inset-bottom));
}
.sky { position: absolute; inset: 0; z-index: -2; overflow: hidden; background: #1b1440; }
.sky::before {
  content: ''; position: absolute; inset: -70% 0;
  background: linear-gradient(#1b1440, #33235e 25%, #7a3e6b 50%, #c96a57 75%, #f0955c);
  transform: translateY(14%); animation: sky-drift 12s ease-in-out infinite alternate;
}
.star { position: absolute; background: white; border-radius: 50%; animation: twinkle 12s ease-in-out infinite alternate; }
.sun {
  position: absolute; width: 140px; height: 140px; left: calc(50% - 70px); top: calc(40% - 70px);
  background: radial-gradient(circle at 50% 42%, #ffe7b8 3%, #ffb26b 34%, #ffb26b00 70%);
  filter: blur(3px); animation: sun-breathe 12s ease-in-out infinite alternate;
}
.login-brand { text-align: center; flex: 0 0 auto; }
.login-brand h1 { font: 900 52px/1.12 var(--rounded); color: #fff6ec; letter-spacing: -.8px; text-shadow: 0 2px 24px #ffb26b80; }
.login-brand p { font: 500 11px/1.6 var(--mono); letter-spacing: 2.5px; color: #ffe7b8cc; margin-top: 6px; }
.login-panel { width: 100%; max-width: 390px; margin-top: auto; padding-top: 90px; }
.family-intro { text-align: center; margin-bottom: 22px; }
.family-intro h2 { font-size: 22px; font-weight: 900; color: white; }
.family-intro p { font: 500 10px/1.7 var(--mono); letter-spacing: 1.6px; color: #ffffffa6; margin-top: 3px; }
.family-list { display: grid; gap: 12px; }
.family-button {
  width: 100%; display: flex; align-items: center; gap: 14px; text-align: left;
  padding: 14px 18px; border: 1px solid #ffffff29; border-radius: 22px;
  background: #0a0a1c6b; animation: rise .55s both; animation-delay: calc(var(--i) * 65ms);
}
.family-button .initial { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: var(--night); background: var(--family); font: 900 20px var(--rounded); }
.family-button strong { display: block; font-size: 19px; color: white; }
.family-button small { display: block; font-size: 12px; margin-top: 1px; color: #ffffff99; }
.family-button > svg { margin-left: auto; color: #ffffff73; }
.pin-panel { animation: slide-in .35s both; }
.pin-heading { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.pin-heading h2 { font-size: 24px; font-weight: 900; color: white; }
.circle-button { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 50%; background: #ffffff12; }
.pin-heading .circle-button { width: 34px; height: 34px; }
.family-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; background: var(--family); flex-shrink: 0; }
.pin-heading .family-dot { width: 10px; height: 10px; }
.pin-dots { display: flex; justify-content: center; gap: 16px; margin: 0 0 26px; }
.pin-dot { width: 15px; height: 15px; border: 1.5px solid #ffe7b899; border-radius: 50%; transition: .15s; }
.pin-dot.filled { background: var(--pale); box-shadow: 0 0 8px #ffb26bb3; }
.keypad { display: grid; grid-template-columns: repeat(3, 76px); gap: 12px; justify-content: center; }
.key { height: 58px; font: 600 24px var(--rounded); color: white; border: 1px solid #ffffff24; border-radius: 18px; background: #0a0a1c6b; }
.key:disabled { opacity: .5; }
.pin-status { text-align: center; min-height: 28px; margin-top: 14px; font-size: 13px; color: var(--pale); }
.pin-panel.shake { animation: shake .35s; }
.install-link { font-size: 12px; color: #ffffffb3; margin: 18px auto -18px; display: block; padding: 8px; }
.app-shell {
  max-width: 540px; margin: 0 auto; height: 100dvh; min-height: 460px; display: flex; flex-direction: column;
  background: radial-gradient(ellipse 700px 700px at 50% -8%, #3a2c68, #1a1636 50%, #0c0f22 100%);
  padding-top: max(6px, env(safe-area-inset-top));
}
.titlebar { display: flex; align-items: center; gap: 10px; padding: 0 20px; min-height: 44px; flex-shrink: 0; }
.titlebar h1 { font-size: 26px; font-weight: 900; color: white; }
.carpool-picker { display: flex; align-items: center; gap: 5px; padding: 7px 11px; min-height: 34px; border-radius: 100px; border: 1px solid #ffb26b59; background: #ffffff12; white-space: nowrap; font: 700 13px var(--rounded); color: white; }
.carpool-picker .school-icon { width: 14px; height: 14px; color: var(--dawn); }
.carpool-picker .chevrons { width: 10px; height: 12px; color: var(--dim); }
.account-button { display: flex; align-items: center; justify-content: flex-end; gap: 7px; margin-left: auto; padding: 4px 0 4px 4px; min-height: 44px; color: var(--dim); font: 700 13px var(--rounded); }
.account-button svg { width: 19px; height: 19px; }
.view { flex: 1; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.week-header { display: flex; align-items: center; gap: 5px; padding: 8px 12px 12px; flex-shrink: 0; }
.week-header h1 { font-size: 26px; font-weight: 900; color: white; white-space: nowrap; letter-spacing: -.7px; }
.week-header h1.distant-week { font-size: 18px; letter-spacing: -.5px; }
.week-header .range { font: 500 11px var(--mono); color: var(--dim); margin-left: auto; white-space: nowrap; }
.week-header > button { width: 30px; min-height: 38px; padding: 3px; color: var(--dim); flex-shrink: 0; }
.week-header button svg { width: 17px; height: 17px; }
.banner { display: flex; align-items: center; gap: 7px; min-height: 44px; padding: 12px 15px; margin: 0 16px 12px; border-radius: 18px; font-size: 13px; font-weight: 600; line-height: 1.3; color: #2a1608; background: linear-gradient(90deg, #ffe7b8, #ffb26b 58%, #ff9d7e); box-shadow: 0 6px 14px #ffb26b55; }
.banner svg { width: 17px; height: 17px; }
.banner.covered { color: #9be8c5; background: #ffffff0e; border: 1px solid #ffffff1a; box-shadow: none; }
.scroll-area { min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; scrollbar-width: thin; padding: 0 16px 12px; flex: 1; }
.days { display: grid; gap: 9px; }
.day-card { display: flex; gap: 10px; align-items: center; border-radius: 18px; padding: 8px 11px; animation: rise .35s both; animation-delay: calc(var(--i) * 40ms); }
.day-date { width: 46px; flex: 0 0 46px; }
.day-date strong { display: block; font-size: 14px; color: white; }
.day-date.today strong { color: var(--dawn); }
.day-date small { display: block; font: 500 9px var(--mono); color: var(--dim); margin-top: 1px; }
.slot { position: relative; flex: 1; min-width: 0; border: 1px dashed #ffffff38; border-radius: 12px; padding: 6px 9px; min-height: 46px; text-align: left; background: none; }
.slot .kind { display: block; font: 500 8px var(--mono); letter-spacing: 1.2px; color: var(--dawn); }
.slot.pickup .kind { color: var(--dusk-pale); }
.slot .owner { display: block; font: 700 13.5px var(--rounded); color: #ffffff80; margin-top: 1px; white-space: nowrap; }
.slot.claimed { background: linear-gradient(115deg, var(--family-dark), color-mix(in srgb, var(--family) 18%, transparent) 180%); border: 1px solid color-mix(in srgb, var(--family) 40%, transparent); }
.slot.mine { border-color: color-mix(in srgb, var(--family) 80%, transparent); }
.slot.claimed .owner { color: white; }
.slot .badge { position: absolute; top: 5px; right: 5px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 5px; background: var(--family); color: var(--night); font: 900 9px var(--rounded); }
.slot:disabled { opacity: .6; }
.slot.pulse { animation: pulse .55s ease-out; }
.holiday { padding: 13px 15px; border: 1px solid #8b7bf766; border-radius: 18px; background: linear-gradient(135deg, #8b7bf729, #ffb26b1a); display: flex; align-items: center; gap: 10px; }
.holiday svg { color: var(--dusk-pale); width: 18px; }
.holiday strong { font-size: 14px; color: #cfc6ff; }
.holiday small { margin-left: auto; padding: 3px 8px; border: 1px solid #8b7bf766; border-radius: 30px; font: 500 9px var(--mono); color: var(--dusk-pale); white-space: nowrap; }
.refresh { display: flex; gap: 6px; align-items: center; justify-content: center; font-size: 11px; color: var(--dim); margin: 12px auto 0; padding: 8px 14px; }
.refresh svg { width: 13px; height: 13px; }
.tabbar { display: flex; padding: 6px; margin: 0 16px max(4px, env(safe-area-inset-bottom)); border-radius: 22px; border: 1px solid #ffffff14; background: #0a0a1c99; flex-shrink: 0; }
.tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 9px 4px; color: var(--dim); border-radius: 14px; min-height: 52px; }
.tab svg { width: 19px; height: 19px; }
.tab span { font: 500 9px var(--mono); letter-spacing: 1.2px; }
.tab.active { background: #ffb26b1f; color: var(--dawn); }
.stats { padding: 10px 18px 12px; }
.stats-stack { display: grid; gap: 14px; }
.runs { font: 900 64px/1.1 var(--rounded); color: white; font-variant-numeric: tabular-nums; }
.runs-caption { font: 500 11px var(--mono); letter-spacing: 2px; color: var(--dim); margin-top: 2px; }
.share-card { padding: 16px; border-radius: 22px; display: flex; align-items: center; gap: 18px; }
.ring { width: 96px; height: 96px; flex: 0 0 96px; position: relative; }
.ring svg { width: 96px; height: 96px; transform: rotate(-90deg); }
.ring span { position: absolute; inset: 0; display: grid; place-items: center; font: 900 17px var(--rounded); color: white; }
.legend { flex: 1; display: grid; gap: 8px; }
.legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--dim); }
.legend-dot { width: 11px; height: 11px; border-radius: 4px; background: var(--family); }
.legend-row strong { margin-left: auto; color: white; font-size: 14px; }
.bars { display: grid; gap: 13px; padding: 18px 16px; border-radius: 22px; }
.bar-label { display: flex; gap: 8px; justify-content: space-between; margin-bottom: 5px; }
.bar-label strong { font-size: 13px; color: white; }
.bar-label span { font: 500 11px var(--mono); color: var(--dim); }
.bar-track { height: 10px; background: #ffffff12; border-radius: 20px; overflow: hidden; }
.bar-fill { width: var(--width); height: 100%; background: linear-gradient(90deg, var(--family-dark), var(--family)); border-radius: inherit; transform-origin: left; animation: grow 1s both; }
.mini-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.mini-tile { padding: 13px 14px; border-radius: 18px; }
.mini-tile strong { display: block; font-size: 24px; font-weight: 900; color: var(--tile-color); }
.mini-tile small { display: block; font: 500 9px var(--mono); letter-spacing: 1.4px; color: var(--dim); margin-top: 2px; }
.season { font: 500 10px var(--mono); color: #8e8ba8b3; text-align: center; padding-top: 2px; }
.admin { padding-top: 8px; }
.admin-description { font-size: 12px; color: var(--dim); line-height: 1.5; padding: 0 6px 14px; }
.admin-list { display: grid; gap: 10px; }
.admin-row { display: flex; align-items: center; gap: 12px; padding: 12px 15px; border-radius: 18px; }
.admin-row > svg { color: var(--dim); width: 24px; }
.admin-row.is-holiday > svg { color: var(--dusk-pale); }
.admin-row strong { display: block; font-size: 15px; color: white; }
.admin-row small { display: block; font: 500 10px var(--mono); color: var(--dim); margin-top: 2px; }
.admin-row.is-holiday small { color: var(--dusk-pale); }
.toggle { margin-left: auto; width: 51px; height: 31px; padding: 2px; border-radius: 50px; background: #ffffff26; flex: 0 0 51px; }
.toggle::after { content: ''; display: block; width: 27px; height: 27px; border-radius: 50%; background: white; box-shadow: 0 2px 3px #0003; transition: transform .2s; }
.toggle[aria-checked=true] { background: #5d4fd6; }
.toggle[aria-checked=true]::after { transform: translateX(20px); }
.error-state, .loading { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px; text-align: center; padding: 48px 32px; flex: 1; color: var(--dim); font-size: 14px; }
.error-state > svg { width: 30px; height: 30px; }
.text-action { color: var(--dawn); font: 700 15px var(--rounded); padding: 10px; }
.spinner { width: 24px; height: 24px; border: 2px solid #ffb26b33; border-top-color: var(--dawn); border-radius: 50%; animation: spin .8s linear infinite; }
dialog { width: min(420px, calc(100vw - 32px)); max-height: 85dvh; padding: 24px; color: var(--ink); background: #201c38; border: 1px solid #ffffff29; border-radius: 26px; box-shadow: 0 24px 80px #0008; }
dialog::backdrop { background: #050611a6; backdrop-filter: blur(6px); }
dialog h2 { font: 900 24px var(--rounded); color: white; padding-right: 30px; margin-bottom: 12px; }
dialog p { font-size: 14px; color: #b6b2ca; line-height: 1.6; margin: 8px 0 18px; }
.close-sheet { position: absolute; top: 15px; right: 15px; width: 34px; height: 34px; border-radius: 50%; color: var(--dim); background: #ffffff0d; }
.sheet-option { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 16px 12px; border-radius: 14px; font: 700 16px var(--rounded); }
.sheet-option.selected { background: #ffb26b14; color: var(--dawn); }
.sheet-option .check { margin-left: auto; }
.sheet-option + .sheet-option { margin-top: 5px; }
.sheet-option small { display: block; color: var(--dim); font: 400 12px/1.4 -apple-system, sans-serif; margin-top: 3px; }
.sheet-rule { border: 0; border-top: 1px solid #ffffff14; margin: 12px 0; }
.danger { color: #ff98a9; }
.primary, .secondary { width: 100%; padding: 13px 18px; border-radius: 14px; font: 700 15px var(--rounded); }
.primary { color: #2a1608; background: linear-gradient(110deg, var(--pale), var(--dawn)); }
.secondary { background: #ffffff0e; margin-top: 10px; }
.primary:disabled { opacity: .5; }
.field { display: block; font-size: 12px; color: var(--dim); margin: 16px 0; }
.field input { width: 100%; margin-top: 7px; padding: 13px; font-size: 16px; background: #0a0d1f; color: white; border: 1px solid #ffffff29; border-radius: 12px; }
.sheet-error { color: #ffb3bf; font-size: 13px; margin: 12px 0; }
.install-steps { padding-left: 22px; font-size: 14px; line-height: 1.7; color: #d2cfe0; }
.install-steps li { padding: 4px 0 8px 4px; }
.install-steps svg { width: 17px; height: 17px; color: var(--dawn); }
#toast { position: fixed; z-index: 20; left: 50%; bottom: calc(90px + env(safe-area-inset-bottom)); transform: translate(-50%, 12px); max-width: min(420px, calc(100% - 32px)); width: max-content; background: #302942; color: white; border: 1px solid #ffffff26; border-radius: 15px; padding: 12px 18px; box-shadow: 0 8px 30px #0005; font-size: 13px; line-height: 1.5; text-align: center; opacity: 0; pointer-events: none; transition: .2s; }
#toast.visible { transform: translate(-50%, 0); opacity: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
@keyframes sky-drift { from { transform: translateY(14%); } to { transform: translateY(-14%); } }
@keyframes twinkle { from { opacity: .25; } to { opacity: .75; } }
@keyframes sun-breathe { from { opacity: .55; transform: translateY(50px) scale(.85); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@keyframes slide-in { from { opacity: 0; transform: translateX(25px); } to { opacity: 1; transform: translateX(0); } }
@keyframes shake { 20%, 60% { transform: translateX(-7px); } 40%, 80% { transform: translateX(7px); } }
@keyframes pulse { 30% { filter: brightness(1.4); transform: scale(1.04); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (max-width: 370px) {
  .login { padding-inline: 18px; }
  .login-brand p { font-size: 9px; letter-spacing: 1.8px; }
  .family-intro p { font-size: 9px; letter-spacing: 1px; }
  .titlebar { padding-inline: 16px; gap: 6px; }
  .carpool-picker { padding-inline: 8px; font-size: 11px; }
  .account-button { font-size: 11px; }
  .week-header h1 { font-size: 23px; }
  .week-header .range { font-size: 9px; }
  .week-header h1.distant-week { font-size: 15px; }
  .day-card { gap: 7px; padding-inline: 8px; }
  .day-date { width: 39px; flex-basis: 39px; }
  .slot { padding-inline: 7px; }
  .slot .owner { font-size: 12px; }
  .slot .badge { width: 13px; height: 13px; font-size: 8px; }
  .holiday { gap: 6px; padding-inline: 11px; }
  .holiday small { font-size: 8px; padding-inline: 5px; }
}
@media (min-width: 600px) {
  body { background: radial-gradient(ellipse at 50% 0%, #251e40, #090c1b 80%); }
  .app-shell { border-inline: 1px solid #ffffff09; }
  .login-panel { padding-top: 120px; }
  .login-brand h1 { font-size: 60px; }
  .day-card { padding-block: 12px; }
  .slot { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}