:root {
  --ink: #18243c;
  --ink-soft: #59647a;
  --paper: #fffdf8;
  --cream: #fff7e9;
  --line: #e8e5de;
  --purple: #6657d9;
  --purple-dark: #4f3ebd;
  --mint: #00a884;
  --mint-light: #d9f6ea;
  --gold: #f3ad2e;
  --coral: #f46f5e;
  --blue: #3977d7;
  --shadow: 0 16px 46px rgba(40, 48, 77, 0.11);
  --shadow-soft: 0 8px 24px rgba(40, 48, 77, 0.08);
}

* { box-sizing: border-box; }

html { background: var(--paper); }

body {
  margin: 0;
  color: var(--ink);
  background: var(--paper);
  font-family: Inter, ui-rounded, "SF Pro Rounded", "Segoe UI", system-ui, -apple-system, sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid rgba(57, 119, 215, 0.42);
  outline-offset: 2px;
}

.eyebrow {
  margin: 0 0 7px;
  color: var(--purple);
  font-size: 0.74rem;
  font-weight: 850;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.brand-mark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 1.08rem;
  font-weight: 900;
  letter-spacing: -0.035em;
}

.brand-orbit {
  display: grid;
  width: 37px;
  height: 37px;
  place-items: center;
  border-radius: 13px;
  color: white;
  background: var(--purple);
  box-shadow: 0 5px 0 #4a3bb0;
}

.save-pill {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid #dfe3e9;
  border-radius: 999px;
  color: #657087;
  background: rgba(255,255,255,.75);
  font-size: 0.72rem;
  font-weight: 750;
}
.save-pill::before { width: 6px; height: 6px; margin-right: 6px; border-radius: 50%; background: #6fc39b; content: ""; }
.save-saving::before, .save-loading::before { background: var(--gold); }
.save-offline::before { background: var(--coral); }

/* Profile gate */
.gate-shell {
  position: relative;
  display: grid;
  min-height: 100svh;
  padding: 34px 18px;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 209, 97, .36), transparent 27%),
    radial-gradient(circle at 86% 76%, rgba(102, 87, 217, .22), transparent 30%),
    linear-gradient(145deg, #fffaf0, #f7f3ff);
}
.gate-stars { position: absolute; inset: 0; opacity: .32; background-image: radial-gradient(circle, #6c5ce7 1.5px, transparent 1.7px); background-size: 44px 44px; mask-image: linear-gradient(to bottom, black, transparent 78%); }
.gate-card { position: relative; width: min(760px, 100%); padding: clamp(26px, 5vw, 54px); border: 1px solid rgba(255,255,255,.9); border-radius: 34px; background: rgba(255,255,255,.82); box-shadow: 0 28px 90px rgba(56,43,117,.14); backdrop-filter: blur(16px); }
.gate-topline { display: flex; align-items: center; justify-content: space-between; margin-bottom: 56px; }
.gate-card h1 { margin: 0; font-size: clamp(2.2rem, 7vw, 4rem); line-height: .98; letter-spacing: -.065em; }
.gate-copy { margin: 14px 0 28px; color: var(--ink-soft); font-size: 1.03rem; }
.profile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.profile-card { position: relative; min-height: 188px; padding: 22px 18px; border: 1px solid #e6e3ed; border-radius: 24px; text-align: left; background: white; box-shadow: 0 7px 0 #e6e3ed; cursor: pointer; transition: transform .18s ease, box-shadow .18s ease; }
.profile-card:hover { transform: translateY(-4px); box-shadow: 0 11px 0 #e6e3ed; }
.profile-avatar { display: grid; width: 62px; height: 62px; margin-bottom: 22px; place-items: center; border-radius: 21px; color: white; background: var(--profile-color); font-size: 1.45rem; font-weight: 900; }
.profile-card strong, .profile-card small { display: block; }
.profile-card strong { font-size: 1.12rem; }
.profile-card small { margin-top: 3px; color: #788195; }
.profile-arrow { position: absolute; right: 17px; bottom: 17px; font-size: 1.2rem; }
.profile-parent { background: #f5f6fa; }
.demo-note { margin: 28px 0 0; color: #8a91a1; font-size: .77rem; text-align: center; }
.auth-card { width: min(820px, 100%); }
.auth-choice-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.auth-choice-grid button { min-height: 176px; padding: 24px; border: 1px solid #e2dfeb; border-radius: 22px; text-align: left; background: #fff; box-shadow: 0 6px 0 #e7e3ef; cursor: pointer; }
.auth-choice-grid button:hover { transform: translateY(-2px); }
.auth-choice-grid span, .auth-choice-grid strong, .auth-choice-grid small { display: block; }
.auth-choice-grid span { margin-bottom: 27px; color: var(--purple); font-size: 1.7rem; }
.auth-choice-grid strong { font-size: 1.05rem; }
.auth-choice-grid small { margin-top: 5px; color: var(--ink-soft); }
.auth-form { display: grid; max-width: 520px; gap: 15px; }
.auth-form h1 { margin-bottom: 10px; font-size: clamp(2.1rem, 6vw, 3.35rem); }
.auth-form label { display: grid; gap: 7px; color: #3d4659; font-size: .82rem; font-weight: 800; }
.auth-form label > span { color: var(--ink-soft); font-weight: 600; }
.auth-form input { width: 100%; min-height: 51px; padding: 0 14px; border: 1px solid #d8d6df; border-radius: 13px; background: white; font: inherit; font-weight: 600; }
.auth-form > small { color: var(--ink-soft); line-height: 1.5; }
.auth-back { justify-self: start; padding: 0; border: 0; color: var(--purple); background: transparent; font-weight: 800; cursor: pointer; }
.family-code, .invite-code { margin: 12px 0 18px; padding: 17px; border: 1px dashed #b9b1df; border-radius: 14px; color: var(--purple-dark); background: #f5f2ff; font-size: 1.35rem; font-weight: 900; letter-spacing: .08em; }
.invite-code small { display: block; margin-top: 6px; color: var(--ink-soft); font-size: .75rem; font-weight: 600; letter-spacing: 0; }
.passcode-backdrop { position: fixed; z-index: 100; inset: 0; display: grid; padding: 18px; place-items: center; background: rgba(24,36,60,.55); backdrop-filter: blur(8px); }
.passcode-card { position: relative; width: min(410px, 100%); padding: 34px; border-radius: 27px; text-align: center; background: white; box-shadow: 0 30px 90px rgba(20,25,47,.3); }
.passcode-card .profile-avatar { margin: 0 auto 22px; }
.passcode-card h2 { margin: 0; font-size: 2rem; letter-spacing: -.05em; }
.passcode-card > p:not(.eyebrow) { margin: 7px 0 18px; color: var(--ink-soft); }
.passcode-card input { width: 100%; height: 64px; padding: 0 16px; border: 2px solid #dedbe8; border-radius: 16px; text-align: center; background: #faf9fc; font-size: 1.7rem; font-weight: 900; letter-spacing: .25em; }
.passcode-submit { width: 100%; min-height: 52px; margin-top: 13px; border: 0; border-radius: 14px; color: white; background: var(--purple); box-shadow: 0 5px 0 var(--purple-dark); font-weight: 850; cursor: pointer; }
.passcode-submit:disabled { color: #9aa1ad; background: #e8eaed; box-shadow: none; cursor: not-allowed; }
.passcode-card > small { display: block; margin-top: 18px; color: #8a91a0; font-size: .72rem; }
.passcode-error { margin-top: 10px; padding: 9px 11px; border-radius: 10px; color: #9f3f33; background: #ffebe8; font-size: .8rem; font-weight: 700; }
.passcode-close { position: absolute; top: 14px; right: 14px; display: grid; width: 38px; height: 38px; padding: 0; place-items: center; border: 0; border-radius: 12px; color: #697183; background: #eff0f3; font-size: 1.4rem; cursor: pointer; }

/* Child shell */
.child-shell { min-height: 100svh; padding-bottom: 104px; background: #fffaf1; }
.child-younger { background:
  radial-gradient(circle at 8% 18%, rgba(255,200,92,.22) 0 72px, transparent 74px),
  radial-gradient(circle at 94% 34%, rgba(97,190,255,.18) 0 96px, transparent 98px),
  radial-gradient(circle at 12% 78%, rgba(255,112,103,.13) 0 84px, transparent 86px),
  linear-gradient(180deg, #fff9e9, #fff4ed 54%, #f6f1ff); }
.child-younger .child-header { background: rgba(255,249,233,.9); }
.child-header { position: sticky; z-index: 20; top: 0; display: flex; height: 76px; padding: 0 max(22px, calc((100vw - 1120px) / 2)); align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(231,219,198,.72); background: rgba(255,250,241,.88); backdrop-filter: blur(14px); }
.parent-preview-bar { position: sticky; z-index: 30; top: 0; display: flex; min-height: 44px; padding: 7px max(22px, calc((100vw - 1120px) / 2)); align-items: center; justify-content: center; gap: 18px; color: white; background: #30256f; font-size: .78rem; }
.parent-preview-bar button { min-height: 30px; padding: 0 12px; border: 1px solid rgba(255,255,255,.45); border-radius: 8px; color: white; background: rgba(255,255,255,.12); font-weight: 800; cursor: pointer; }
.parent-preview .child-header { top: 44px; }
.child-header-actions { display: flex; align-items: center; gap: 10px; }
.avatar-button { display: grid; width: 44px; height: 44px; padding: 0; place-items: center; border: 0; border-radius: 15px; color: white; background: var(--purple); font-weight: 900; cursor: pointer; }
.child-content { width: min(1120px, calc(100% - 36px)); margin: 0 auto; padding: 30px 0 64px; }
.quest-hero { position: relative; display: grid; min-height: 286px; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); overflow: hidden; border-radius: 32px; color: white; background: linear-gradient(135deg, #5c4ed0, #745fdf 60%, #5844c4); box-shadow: 0 16px 0 #4939a9, 0 28px 60px rgba(75,55,174,.22); }
.quest-hero-copy { position: relative; z-index: 2; padding: clamp(29px, 5vw, 54px); }
.quest-hero .eyebrow { color: #dcd6ff; }
.quest-hero h1 { max-width: 580px; margin: 0; font-size: clamp(2.4rem, 5vw, 4.2rem); line-height: .95; letter-spacing: -.065em; }
.quest-hero p:not(.eyebrow) { max-width: 520px; margin: 15px 0 0; color: #eeeaff; font-size: 1.04rem; line-height: 1.55; }
.quest-progress-row { display: flex; max-width: 520px; margin-top: 31px; align-items: center; gap: 13px; }
.quest-progress-track { height: 14px; flex: 1; overflow: hidden; border: 2px solid rgba(255,255,255,.2); border-radius: 999px; background: rgba(31,22,94,.28); }
.quest-progress-track span { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #ffd15c, #ffe49d); transition: width .4s ease; }
.quest-scene { position: relative; min-height: 286px; overflow: hidden; background: #f9dea4; }
.quest-scene::after { position: absolute; inset: 0 auto 0 0; width: 35%; background: linear-gradient(90deg, #745fdf, transparent); content: ""; }
.quest-scene img { width: 100%; height: 100%; object-fit: cover; object-position: 69% center; mix-blend-mode: normal; }
.star-art { display: block; width: 1em; height: 1em; object-fit: contain; }
.app-icon { display: block; width: 1em; height: 1em; flex: 0 0 auto; object-fit: contain; object-position: center; filter: drop-shadow(0 4px 5px rgba(45,34,105,.15)); }
.quest-star-friend { width: 68px; height: 68px; margin-top: 18px; filter: drop-shadow(0 10px 10px rgba(39,25,107,.28)); transform: rotate(8deg); animation: star-bob 3s ease-in-out infinite; pointer-events: none; }
.kid-stat-grid { display: grid; margin: 34px 0 48px; grid-template-columns: repeat(3, 1fr); gap: 15px; }
.kid-stat { display: flex; min-height: 98px; padding: 17px 20px; align-items: center; gap: 14px; border: 1px solid #ebe4d7; border-radius: 22px; text-align: left; background: white; box-shadow: var(--shadow-soft); }
button.kid-stat { cursor: pointer; }
.kid-stat > span:nth-child(2) { flex: 1; }
.kid-stat strong, .kid-stat small { display: block; }
.kid-stat strong { margin-bottom: 3px; font-size: 1.3rem; letter-spacing: -.03em; }
.kid-stat small { color: var(--ink-soft); }
.stat-icon { display: grid; width: 52px; height: 52px; place-items: center; border-radius: 18px; font-size: 1.2rem; }
.stat-icon .star-art { width: 46px; height: 46px; filter: drop-shadow(0 5px 4px rgba(150,101,0,.18)); }
.stat-icon .app-icon { width: 46px; height: 46px; }
.stat-stars .stat-icon { color: #755413; background: #fff0ba; }
.stat-time .stat-icon { color: #355f9e; background: #deebff; }
.stat-streak .stat-icon { color: #08745d; background: var(--mint-light); }
.badge-trail { display: flex; min-height: 150px; margin: -20px 0 52px; padding: 24px 27px; align-items: center; justify-content: space-between; gap: 24px; overflow: hidden; border: 2px solid #e6dcff; border-radius: 27px; background: linear-gradient(125deg, #fff, #f5f0ff 58%, #e9f7ff); box-shadow: 0 7px 0 #e6dcff; }
.badge-trail h2 { margin: 0; font-size: clamp(1.35rem, 3vw, 1.9rem); letter-spacing: -.04em; }
.badge-trail p:not(.eyebrow) { max-width: 520px; margin: 7px 0 0; color: var(--ink-soft); }
.badge-trail-icons { display: flex; min-width: 310px; justify-content: flex-end; }
.badge-trail-icons span { display: grid; width: 82px; height: 82px; margin-left: -11px; place-items: center; border: 4px solid white; border-radius: 50%; background: #eee9fb; box-shadow: 0 7px 18px rgba(52,42,112,.16); }
.badge-trail-icons img { width: 76px; height: 76px; object-fit: contain; }
.badge-trail-icons .locked { filter: grayscale(1); opacity: .32; }
.section-block { margin-top: 44px; }
.section-heading { display: flex; margin-bottom: 18px; align-items: flex-end; justify-content: space-between; gap: 18px; }
.section-heading h2 { margin: 0; font-size: clamp(1.5rem, 3vw, 2rem); letter-spacing: -.045em; }
.section-count, .bonus-tag { padding: 7px 11px; border-radius: 999px; color: #677187; background: #f0eee8; font-size: .74rem; font-weight: 780; }
.bonus-tag { color: #876314; background: #fff0bd; }
.chore-list { display: grid; gap: 13px; }
.chore-card { display: flex; min-height: 146px; padding: 20px; align-items: flex-start; gap: 18px; border: 2px solid #ece6db; border-radius: 25px; background: white; box-shadow: 0 6px 0 #ece6db; }
.chore-approved { border-color: #c8ebdc; box-shadow: 0 6px 0 #c8ebdc; background: #fbfffd; }
.chore-submitted { border-color: #ddd8f7; box-shadow: 0 6px 0 #ddd8f7; }
.chore-redo { border-color: #ffd0c8; box-shadow: 0 6px 0 #ffd0c8; }
.chore-icon { display: grid; width: 60px; height: 60px; flex: 0 0 auto; place-items: center; border-radius: 20px; color: #4939a9; background: #eeeaff; font-size: 1.5rem; font-style: normal; }
.chore-icon .app-icon { width: 52px; height: 52px; }
.chore-main { min-width: 0; flex: 1; }
.chore-title-line { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chore-title-line h3 { margin: 0; font-size: 1.13rem; letter-spacing: -.025em; }
.chore-value { flex: 0 0 auto; color: #8a620c; font-weight: 900; }
.chore-main > p { margin: 7px 0 14px; color: var(--ink-soft); line-height: 1.45; }
.chore-main .redo-note { padding: 9px 11px; border-radius: 10px; color: #9b3529; background: #fff0ed; font-size: .84rem; }
.chore-footer { display: flex; min-height: 43px; align-items: center; gap: 12px; }
.status-chip { color: #747d8e; font-size: .77rem; font-weight: 750; }
.status-approved { color: #08735c; }
.status-submitted { color: #5c4bc1; }
.status-redo { color: #b94738; }
.primary-kid-button, .wide-kid-button, .approved-timer-row button, .active-timer-card button {
  min-height: 44px; padding: 0 18px; border: 0; border-radius: 14px; color: white; background: var(--purple); box-shadow: 0 5px 0 var(--purple-dark); font-weight: 850; cursor: pointer;
}
.primary-kid-button { margin-left: auto; }
.approved-check { display: grid; width: 40px; height: 40px; margin-left: auto; place-items: center; border-radius: 50%; color: white; background: var(--mint); font-weight: 900; }
.approved-check .app-icon { width: 36px; height: 36px; }
.page-intro { display: flex; min-height: 220px; padding: clamp(28px, 5vw, 50px); align-items: center; justify-content: space-between; gap: 24px; border-radius: 30px; }
.kid-intro { color: white; box-shadow: 0 14px 0 rgba(24,36,60,.14); }
.rewards-intro { background: linear-gradient(135deg, #d75a55, #f28063); }
.time-intro { background: linear-gradient(135deg, #3272cf, #539ae7); }
.progress-intro { background: linear-gradient(135deg, #008c72, #22b690); }
.kid-intro .eyebrow { color: rgba(255,255,255,.76); }
.kid-intro h1 { margin: 0; font-size: clamp(2.2rem, 5vw, 3.8rem); letter-spacing: -.06em; line-height: 1; }
.kid-intro p:not(.eyebrow) { max-width: 610px; margin: 13px 0 0; color: rgba(255,255,255,.86); font-size: 1rem; }
.balance-bubble { display: grid; min-width: 142px; min-height: 142px; padding: 18px; place-items: center; align-content: center; border: 4px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.16); box-shadow: inset 0 0 0 7px rgba(255,255,255,.08); }
.balance-bubble span { font-size: 1.5rem; }
.balance-bubble .star-art { width: 54px; height: 54px; margin-bottom: -7px; filter: drop-shadow(0 6px 5px rgba(93,49,22,.18)); }
.balance-bubble strong { font-size: 2.1rem; letter-spacing: -.05em; }
.balance-bubble small { color: rgba(255,255,255,.8); }
.friendly-lock, .inline-lock { display: flex; padding: 16px 18px; border: 1px solid #f1dba1; border-radius: 18px; color: #694f18; background: #fff4d2; }
.friendly-lock { margin: 31px 0; align-items: center; gap: 14px; }
.friendly-lock > span { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 15px; background: #ffe8a5; }
.friendly-lock strong, .friendly-lock p { display: block; margin: 0; }
.friendly-lock p { margin-top: 3px; color: #836b37; font-size: .86rem; }
.reward-grid { display: grid; margin-top: 34px; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.reward-card { display: grid; min-height: 272px; padding: 22px; grid-template-columns: 106px 1fr; gap: 18px; border: 1px solid #e9e3d8; border-radius: 26px; background: white; box-shadow: 0 7px 0 #e9e3d8; }
.reward-art { display: grid; width: 106px; height: 106px; place-items: center; border-radius: 27px; color: white; background: var(--reward-accent); font-size: 2.25rem; box-shadow: inset 0 -7px 0 rgba(0,0,0,.08); }
.reward-art .app-icon { width: 94px; height: 94px; }
.reward-copy h2 { margin: 8px 0 8px; font-size: 1.3rem; letter-spacing: -.035em; }
.reward-copy p { margin: 0; color: var(--ink-soft); line-height: 1.45; }
.reward-footer { display: flex; grid-column: 1 / -1; align-items: center; justify-content: space-between; gap: 12px; }
.reward-footer strong { color: #805b0d; font-size: 1.1rem; }
.reward-footer button { min-height: 46px; padding: 0 17px; border: 0; border-radius: 14px; color: white; background: var(--reward-accent); font-weight: 850; cursor: pointer; }
.reward-footer button:disabled, .wide-kid-button:disabled, .choice-grid button:disabled { color: #9da4b1; background: #eceef1; box-shadow: none; cursor: not-allowed; }
.request-history { padding: 24px; border: 1px solid #e9e3d8; border-radius: 24px; background: white; box-shadow: var(--shadow-soft); }
.request-row, .ledger-row { display: flex; min-height: 70px; padding: 12px 0; align-items: center; gap: 13px; border-top: 1px solid #eeece6; }
.request-row:first-of-type, .ledger-row:first-of-type { border-top: 0; }
.request-icon, .ledger-icon { display: grid; width: 42px; height: 42px; flex: 0 0 auto; place-items: center; border-radius: 14px; color: #5442bd; background: #eeeaff; }
.request-icon .app-icon { width: 38px; height: 38px; }
.ledger-icon .app-icon, .ledger-icon .star-art { width: 38px; height: 38px; }
.time-bubble > .app-icon { width: 56px; height: 56px; margin-bottom: -7px; }
.request-row > div, .ledger-row > div { flex: 1; }
.request-row strong, .request-row small, .ledger-row strong, .ledger-row small { display: block; }
.request-row small, .ledger-row small { margin-top: 3px; color: #7b8495; font-size: .76rem; text-transform: capitalize; }
.request-status { padding: 6px 9px; border-radius: 999px; color: #6a7281; background: #eef0f3; font-size: .7rem; font-weight: 800; text-transform: capitalize; }
.request-approved, .request-fulfilled, .request-completed, .request-refunded { color: #08715b; background: #dff5ed; }
.request-pending { color: #74560f; background: #fff0bd; }
.request-denied, .request-cancelled { color: #9f3d31; background: #ffebe7; }
.active-timer-card { margin-bottom: 28px; padding: 36px; border-radius: 30px; color: white; text-align: center; background: #192747; box-shadow: 0 13px 0 #101a31; }
.active-timer-card .eyebrow { color: #87c8ff; }
.timer-digits { margin: 4px 0; font-variant-numeric: tabular-nums; font-size: clamp(4rem, 12vw, 7rem); font-weight: 900; letter-spacing: -.075em; line-height: 1; }
.active-timer-card p:not(.eyebrow) { color: #bfc9db; }
.active-timer-card button { margin-top: 12px; background: #4b86d8; box-shadow: 0 5px 0 #2d5c9d; }
.alert-row { display: flex; min-height: 76px; margin: 25px 0; padding: 14px 17px; align-items: center; justify-content: space-between; gap: 14px; border: 1px solid #d9e5f6; border-radius: 18px; background: #f4f8ff; }
.alert-row strong, .alert-row small { display: block; }
.alert-row small { margin-top: 3px; color: #68778c; }
.alert-row button { min-height: 43px; padding: 0 15px; border: 1px solid #b9cfea; border-radius: 12px; color: #275d9e; background: white; font-weight: 780; cursor: pointer; }
.approved-timers, .time-request-card { margin: 30px 0; padding: 24px; border: 1px solid #e5dfd5; border-radius: 26px; background: white; box-shadow: var(--shadow-soft); }
.approved-timer-row { display: flex; min-height: 74px; padding: 10px 0; align-items: center; justify-content: space-between; gap: 15px; border-top: 1px solid #ece9e2; }
.approved-timer-row:first-of-type { border-top: 0; }
.approved-timer-row strong, .approved-timer-row small { display: block; }
.approved-timer-row small { color: #768093; }
.time-request-card h3 { margin: 25px 0 12px; font-size: 1rem; }
.inline-lock { margin: 0 0 20px; font-weight: 700; }
.choice-grid { display: grid; gap: 10px; }
.activity-grid { grid-template-columns: repeat(5, 1fr); }
.duration-grid { grid-template-columns: repeat(4, 1fr); }
.choice-grid button { min-height: 54px; padding: 8px; border: 2px solid #e6e3dc; border-radius: 15px; background: white; font-weight: 780; cursor: pointer; }
.choice-grid button.selected { border-color: var(--blue); color: #1e579f; background: #eaf3ff; box-shadow: 0 4px 0 #bbd3ef; }
.kid-label { display: block; margin: 24px 0 17px; font-weight: 800; }
.kid-label span { color: #8b93a2; font-size: .76rem; font-weight: 600; }
.kid-label input { width: 100%; min-height: 55px; margin-top: 9px; padding: 0 15px; border: 2px solid #e1ded7; border-radius: 15px; background: #fbfaf7; }
.wide-kid-button { width: 100%; min-height: 56px; font-size: 1rem; }
.streak-medallion { display: grid; width: 142px; height: 142px; place-items: center; align-content: center; border: 4px solid rgba(255,255,255,.35); border-radius: 50%; background: rgba(255,255,255,.15); }
.streak-medallion strong { font-size: 2.7rem; line-height: 1; }
.streak-medallion span { font-size: .78rem; }
.badge-collection { margin: 38px 0 48px; }
.milestone-grid { display: grid; margin: 20px 0 34px; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.milestone-grid article { position: relative; display: grid; min-height: 270px; padding: 18px; place-items: center; align-content: center; text-align: center; border: 2px solid #e7e1d7; border-radius: 25px; background: white; box-shadow: 0 7px 0 #e7e1d7; }
.milestone-grid article > img { width: 150px; height: 150px; margin-bottom: 8px; object-fit: contain; filter: drop-shadow(0 9px 10px rgba(39,33,84,.14)); }
.milestone-grid strong, .milestone-grid small { display: block; }
.milestone-grid small { max-width: 220px; margin-top: 5px; color: #07836a; line-height: 1.35; }
.milestone-grid .badge-earned { border-color: #d9ccff; background: linear-gradient(145deg, #fff, #f7f2ff); box-shadow: 0 7px 0 #d9ccff; }
.milestone-grid .badge-earned small { color: #6a4ccd; font-weight: 850; }
.milestone-grid .badge-locked { background: #f6f4f0; }
.milestone-grid .badge-locked > img { filter: grayscale(1); opacity: .26; }
.milestone-grid .badge-locked small { color: #7e8490; }
.ledger-card { padding: 24px; border: 1px solid #e7e1d7; border-radius: 24px; background: white; }
.ledger-stars { color: #795815; background: #fff0bd; }
.ledger-minutes { color: #275b9f; background: #e1eeff; }
.positive { color: #08735c; }
.negative { color: #ac4134; }
.empty-note { margin: 16px 0; color: #7f8795; }
.child-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: grid; width: min(600px, calc(100% - 24px)); min-height: 76px; margin: 0 auto 12px; padding: 8px; grid-template-columns: repeat(4, 1fr); border: 1px solid rgba(224,216,203,.95); border-radius: 23px; background: rgba(255,255,255,.94); box-shadow: 0 16px 44px rgba(30,37,61,.17); backdrop-filter: blur(14px); }
.child-nav button { display: grid; min-height: 58px; padding: 5px 7px; place-items: center; gap: 2px; border: 0; border-radius: 16px; color: #717a8d; background: transparent; font-size: .71rem; font-weight: 760; cursor: pointer; }
.child-nav button .app-icon, .child-nav button .nav-star-art { width: 31px; height: 31px; }
.child-nav button.active .app-icon, .child-nav button.active .nav-star-art { filter: drop-shadow(0 3px 4px rgba(27,18,91,.28)); }
.child-nav button.active { color: white; background: var(--purple); }

@keyframes star-bob { 0%, 100% { transform: translateY(0) rotate(8deg); } 50% { transform: translateY(-9px) rotate(3deg); } }

/* Parent shell */
.parent-shell { display: grid; min-height: 100svh; grid-template-columns: 250px minmax(0, 1fr); background: #f5f6f8; }
.parent-sidebar { position: sticky; top: 0; display: flex; height: 100svh; padding: 27px 17px 19px; flex-direction: column; border-right: 1px solid #e2e4e8; background: white; }
.parent-sidebar > .brand-mark { margin: 0 12px 38px; }
.parent-sidebar nav { display: grid; gap: 4px; }
.parent-sidebar nav button, .sidebar-footer > button { display: flex; min-height: 46px; padding: 0 12px; align-items: center; gap: 11px; border: 0; border-radius: 11px; color: #596277; text-align: left; background: transparent; font-size: .84rem; font-weight: 680; cursor: pointer; }
.parent-sidebar nav button > span { width: 23px; color: #7a8291; text-align: center; }
.parent-sidebar nav button.active { color: #4939b0; background: #f0edff; }
.parent-sidebar nav button.active > span { color: #4939b0; }
.parent-sidebar nav button b { display: grid; width: 21px; height: 21px; margin-left: auto; place-items: center; border-radius: 50%; color: white; background: var(--coral); font-size: .67rem; }
.sidebar-footer { display: grid; margin-top: auto; gap: 10px; }
.sidebar-child-view { display: grid; margin-top: 20px; padding-top: 16px; gap: 5px; border-top: 1px solid #eceef1; }
.sidebar-child-view > small { padding: 0 12px 5px; color: #8a92a0; font-size: .61rem; font-weight: 850; letter-spacing: .1em; }
.sidebar-child-view button { display: flex; min-height: 40px; padding: 0 10px; align-items: center; gap: 9px; border: 0; border-radius: 10px; color: #596277; background: transparent; font-size: .78rem; font-weight: 720; cursor: pointer; }
.sidebar-child-view button:hover { color: #4939b0; background: #f4f2ff; }
.sidebar-child-view button b { margin-left: auto; }
.sidebar-footer .save-pill { width: fit-content; margin-left: 12px; }
.tiny-avatar { display: grid; width: 28px; height: 28px; place-items: center; border-radius: 9px; color: white; background: var(--ink); font-size: .72rem; font-weight: 900; }
.parent-main { width: min(1180px, 100%); margin: 0 auto; padding: 42px clamp(24px, 4vw, 56px) 80px; }
.parent-mobile-header, .parent-mobile-nav { display: none; }
.admin-page-header { display: flex; min-height: 92px; margin-bottom: 30px; align-items: flex-start; justify-content: space-between; gap: 24px; }
.admin-page-header h1 { margin: 0; font-size: clamp(2rem, 4vw, 2.8rem); line-height: 1; letter-spacing: -.055em; }
.admin-page-header > div > p:not(.eyebrow) { margin: 10px 0 0; color: #6d7688; }
.header-action { flex: 0 0 auto; }
.header-action-group { display: flex; flex: 0 0 auto; gap: 8px; }
.header-action-group > button:not(.admin-primary) { min-height: 39px; padding: 0 14px; border: 1px solid #d8dce3; border-radius: 9px; color: #596277; background: white; font-size: .78rem; font-weight: 760; cursor: pointer; }
.admin-primary { min-height: 39px; padding: 0 14px; border: 0; border-radius: 9px; color: white; background: #5141bd; font-size: .8rem; font-weight: 760; cursor: pointer; }
.admin-metric-grid { display: grid; margin-bottom: 20px; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.admin-metric-grid button { min-height: 150px; padding: 21px; border: 1px solid #e1e4e8; border-radius: 15px; text-align: left; background: white; box-shadow: 0 3px 12px rgba(30,38,60,.04); cursor: pointer; }
.admin-metric-grid span, .admin-metric-grid strong, .admin-metric-grid small { display: block; }
.admin-metric-grid span { color: #737c8d; font-size: .78rem; font-weight: 700; }
.admin-metric-grid strong { margin: 13px 0 7px; font-size: 2.3rem; line-height: 1; letter-spacing: -.055em; }
.admin-metric-grid small { color: #8a92a0; }
.admin-panel { margin-top: 18px; padding: 23px; border: 1px solid #e1e4e8; border-radius: 15px; background: white; box-shadow: 0 3px 12px rgba(30,38,60,.035); }
.panel-title { display: flex; margin-bottom: 18px; align-items: center; justify-content: space-between; }
.panel-title h2 { margin: 0; font-size: 1.2rem; letter-spacing: -.03em; }
.child-overview-table article { display: grid; min-height: 78px; padding: 12px 0; grid-template-columns: 42px minmax(150px, 1fr) minmax(110px, .7fr) minmax(115px, .6fr) 94px auto; align-items: center; gap: 8px; border-top: 1px solid #eceef0; }
.child-overview-table article:first-child { border-top: 0; }
.admin-avatar { display: grid; width: 38px; height: 38px; place-items: center; border-radius: 12px; color: white; font-size: .78rem; font-style: normal; font-weight: 850; }
.overview-name strong, .overview-name small, .overview-balance strong, .overview-balance small { display: block; }
.overview-name small, .overview-balance small { margin-top: 3px; color: #7e8797; font-size: .72rem; }
.mini-progress { height: 7px; overflow: hidden; border-radius: 999px; background: #ebedf0; }
.mini-progress span { display: block; height: 100%; border-radius: inherit; background: var(--purple); }
.admin-state { padding: 6px 9px; border-radius: 999px; color: #6e7685; text-align: center; background: #edf0f3; font-size: .7rem; font-weight: 760; }
.state-complete { color: #0b765f; background: #def4ec; }
.child-dashboard-button { min-height: 36px; padding: 0 11px; border: 1px solid #d9dde3; border-radius: 9px; color: #596277; background: white; font-size: .7rem; font-weight: 800; cursor: pointer; }
.child-dashboard-actions { display: flex; align-items: end; gap: 8px; }
.child-dashboard-actions label { color: #687184; font-size: .7rem; font-weight: 750; }
.child-dashboard-actions select { display: block; min-width: 165px; margin-top: 5px; }
.child-dashboard-summary { display: grid; margin-bottom: 18px; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.child-dashboard-summary article { min-height: 126px; padding: 18px; border: 1px solid #e1e4e8; border-radius: 14px; background: white; box-shadow: 0 3px 12px rgba(30,38,60,.035); }
.child-dashboard-summary span, .child-dashboard-summary strong, .child-dashboard-summary small { display: block; }
.child-dashboard-summary span { color: #737c8d; font-size: .72rem; font-weight: 750; }
.child-dashboard-summary strong { margin: 11px 0 5px; font-size: 1.8rem; }
.child-dashboard-summary small { color: #8a92a0; font-size: .68rem; }
.child-work-panel .panel-title > span { color: #7e8797; font-size: .72rem; }
.child-work-list article { display: grid; min-height: 70px; padding: 10px 0; grid-template-columns: 42px 1fr auto; align-items: center; gap: 12px; border-top: 1px solid #eceef0; }
.child-work-list article:first-child { border-top: 0; }
.child-work-list strong, .child-work-list small { display: block; }
.child-work-list small { margin-top: 4px; color: #7d8696; font-size: .7rem; }
.child-work-list p { margin: 6px 0 0; color: #a04d43; font-size: .7rem; }
.child-work-status { padding: 6px 9px; border-radius: 999px; color: #697182; background: #eef0f3; font-size: .67rem; font-style: normal; font-weight: 780; white-space: nowrap; }
.child-work-status.status-approved { color: #08745d; background: #def4ec; }
.child-work-status.status-submitted { color: #3f63a8; background: #e5efff; }
.child-work-status.status-redo { color: #a3493f; background: #fff0ed; }
.completion-row { display: flex; min-height: 59px; padding: 9px 0; align-items: center; gap: 11px; border-top: 1px solid #eceef0; }
.completion-row:first-of-type { border-top: 0; }
.completion-row > span { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #08745d; background: #def4ec; }
.completion-row > div { flex: 1; }
.completion-row strong, .completion-row small { display: block; }
.completion-row small { margin-top: 3px; color: #808899; font-size: .69rem; text-transform: capitalize; }
.completion-row b { color: #5141bd; font-size: .76rem; }
.admin-activity-row { display: flex; min-height: 62px; padding: 9px 0; align-items: center; gap: 12px; border-top: 1px solid #eceef0; }
.admin-activity-row:first-of-type { border-top: 0; }
.admin-activity-row > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: #5342bb; background: #efedff; }
.admin-activity-row > div { flex: 1; }
.admin-activity-row strong, .admin-activity-row small { display: block; }
.admin-activity-row small { margin-top: 2px; color: #808899; font-size: .72rem; }
.admin-activity-row b { font-size: .78rem; }
.review-panel { padding: 0 23px; }
.review-card { display: grid; padding: 24px 0; grid-template-columns: 48px 1fr auto; gap: 16px; border-top: 1px solid #e8eaed; }
.review-card:first-child { border-top: 0; }
.review-icon { display: grid; width: 46px; height: 46px; place-items: center; border-radius: 13px; color: #5544bd; background: #efedff; }
.review-body h2 { margin: 4px 0 6px; font-size: 1.05rem; }
.review-body p { margin: 0 0 8px; color: #666f80; font-size: .84rem; }
.review-body > small { color: #8a92a0; }
.child-label { color: var(--purple); font-size: .69rem; font-weight: 850; text-transform: uppercase; }
.review-actions { display: flex; align-items: flex-start; gap: 7px; }
.review-actions button:not(.admin-primary), .row-actions button:not(.admin-primary), .admin-timer-row button, .minute-actions button { min-height: 39px; padding: 0 12px; border: 1px solid #d9dde2; border-radius: 9px; color: #5e6778; background: white; font-size: .76rem; font-weight: 720; cursor: pointer; }
.redo-form { display: grid; margin-top: 14px; padding: 13px; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 10px; border-radius: 11px; background: #fff4f2; }
.redo-form label { flex: 1; color: #7d4c46; font-size: .73rem; font-weight: 750; }
.redo-form input { width: 100%; min-height: 39px; margin-top: 6px; padding: 0 10px; border: 1px solid #edc8c2; border-radius: 8px; background: white; }
.redo-form button { min-width: 140px; min-height: 45px; padding: 0 16px; border: 0; border-radius: 9px; color: white; background: var(--coral); font-size: .74rem; font-weight: 750; cursor: pointer; }
.redo-form button:disabled { opacity: .55; cursor: not-allowed; }
.admin-form-grid { display: grid; margin-bottom: 18px; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(110px, 1fr)) auto; align-items: end; gap: 12px; }
.compact-form { grid-template-columns: minmax(240px, 2fr) minmax(130px, .7fr) auto; }
.admin-form-grid label, .settings-grid label { color: #687184; font-size: .72rem; font-weight: 720; }
.admin-form-grid input, .admin-form-grid select, .settings-grid input, .settings-grid select, .profile-setting input { width: 100%; min-height: 41px; margin-top: 6px; padding: 0 10px; border: 1px solid #dce0e5; border-radius: 9px; background: white; }
.crud-editor { margin-bottom: 18px; border-color: #dcd5ff; background: #fdfcff; }
.crud-form-grid { display: grid; grid-template-columns: minmax(190px, 1.4fr) minmax(220px, 1.7fr) repeat(4, minmax(100px, .7fr)); align-items: end; gap: 12px; }
.reward-editor-grid { grid-template-columns: minmax(190px, 1fr) minmax(250px, 1.5fr) minmax(130px, .5fr); }
.crud-form-grid label { color: #687184; font-size: .72rem; font-weight: 720; }
.crud-form-grid input, .crud-form-grid select { width: 100%; min-height: 41px; margin-top: 6px; padding: 0 10px; border: 1px solid #d7d9e2; border-radius: 9px; background: white; }
.chore-template-grid { grid-template-columns: minmax(190px, 1.2fr) minmax(240px, 1.6fr) minmax(170px, 1fr) repeat(3, minmax(105px, .65fr)); }
.assignment-area-editor { margin-top: 16px; overflow: hidden; border: 1px solid #ddd9f4; border-radius: 12px; background: white; }
.assignment-area-editor > div { display: flex; min-height: 50px; padding: 9px 13px; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid #eceaf5; }
.assignment-area-editor > div strong, .assignment-area-editor > div small { display: block; }
.assignment-area-editor > div strong { color: #26324a; font-size: .8rem; }
.assignment-area-editor > div small { color: #81899a; font-size: .68rem; }
.assignment-area-editor > label { display: grid; min-height: 60px; padding: 8px 13px; grid-template-columns: 28px minmax(100px, .7fr) minmax(190px, 1.4fr) auto; align-items: center; gap: 10px; border-bottom: 1px solid #f0eef7; color: #364158; }
.assignment-area-editor > label:last-child { border-bottom: 0; }
.assignment-area-editor > label b { font-size: .76rem; }
.assignment-area-editor select { width: 100%; min-height: 42px; }
.assignment-area-editor button { min-height: 34px; padding: 0 10px; border: 1px solid #e4c8c4; border-radius: 8px; color: #9d4238; background: white; font-size: .68rem; font-weight: 760; cursor: pointer; }
.assignee-picker { min-width: 0; margin: 0; padding: 0; border: 0; }
.assignee-picker legend { margin-bottom: 6px; color: #687184; font-size: .72rem; font-weight: 720; }
.assignee-dropdown { position: relative; }
.assignee-dropdown > summary { display: flex; min-height: 48px; padding: 0 42px 0 13px; align-items: center; border: 1px solid #cfd4dc; border-radius: 10px; color: #344056; background: white; font-size: .78rem; font-weight: 720; cursor: pointer; list-style: none; }
.assignee-dropdown > summary::-webkit-details-marker { display: none; }
.assignee-dropdown > summary::after { position: absolute; right: 16px; width: 8px; height: 8px; border-right: 2px solid #667084; border-bottom: 2px solid #667084; transform: translateY(-2px) rotate(45deg); content: ""; }
.assignee-dropdown[open] > summary { border-color: #7d70dc; box-shadow: 0 0 0 3px rgba(102,87,217,.18); }
.assignee-dropdown[open] > summary::after { transform: translateY(2px) rotate(225deg); }
.assignee-menu { position: absolute; z-index: 40; top: calc(100% + 6px); left: 0; width: min(300px, 85vw); overflow: hidden; border: 1px solid #d8dbe2; border-radius: 12px; background: white; box-shadow: 0 16px 42px rgba(31,38,61,.18); }
.assignee-menu label { display: flex; min-height: 43px; padding: 0 12px; align-items: center; gap: 9px; color: #4e586c; font-size: .76rem; cursor: pointer; }
.assignee-menu label:hover { background: #f6f4ff; }
.assignee-menu input { width: 17px; height: 17px; flex: 0 0 auto; accent-color: var(--purple); }
.assignee-all { border-bottom: 1px solid #eceef2; font-weight: 800; }
.assignee-all span { flex: 1; }
.assignee-all small { color: #8a92a0; }
.assignee-list { max-height: 232px; overflow-y: auto; }
.compact-avatar { display: grid; width: 25px; height: 25px; flex: 0 0 auto; place-items: center; border-radius: 8px; color: white; font-size: .62rem; font-weight: 850; }
.assignee-menu-footer { display: flex; min-height: 38px; padding: 5px 10px; align-items: center; justify-content: space-between; border-top: 1px solid #eceef2; color: #858d9b; font-size: .66rem; }
.assignee-menu-footer button { border: 0; color: #5544bd; background: transparent; font-weight: 800; cursor: pointer; }
.schedule-help { margin: 13px 0 0; color: #788195; font-size: .72rem; line-height: 1.45; }
.area-manager { margin-bottom: 18px; }
.area-manager .panel-title > button { min-height: 34px; padding: 0 11px; border: 1px solid #d8dce3; border-radius: 8px; background: white; font-size: .7rem; font-weight: 760; cursor: pointer; }
.area-editor { display: grid; margin-bottom: 18px; grid-template-columns: minmax(180px, 1fr) auto auto auto auto; align-items: center; gap: 9px; }
.area-editor > input { min-height: 45px; padding: 0 12px; border: 1px solid #cfd4dc; border-radius: 9px; }
.area-editor > button:not(.admin-primary) { min-height: 40px; padding: 0 12px; border: 1px solid #d8dce3; border-radius: 8px; color: #596277; background: white; font-size: .7rem; font-weight: 760; cursor: pointer; }
.area-editor > .admin-primary { min-height: 40px; color: white; border-color: transparent; background: #5141bd; }
.area-icon-options, .area-color-options { display: flex; gap: 5px; }
.area-icon-options button { width: 34px; height: 34px; border: 1px solid #d8dce3; border-radius: 9px; background: white; cursor: pointer; }
.area-icon-options button.selected { color: #5141bd; border-color: #afa5eb; background: #efecff; }
.area-color-options button { width: 25px; height: 25px; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 0 1px #d2d6dd; cursor: pointer; }
.area-color-options button.selected { box-shadow: 0 0 0 3px #c8c1f2; }
.area-list article { display: grid; min-height: 58px; padding: 9px 0; grid-template-columns: 38px 1fr auto; align-items: center; gap: 11px; border-top: 1px solid #eceef2; }
.area-list article > span { display: grid; width: 36px; height: 36px; place-items: center; border-radius: 11px; color: white; }
.area-list strong, .area-list small { display: block; }
.area-list small { margin-top: 3px; color: #838b9a; font-size: .68rem; }
.area-list article > div:last-child { display: flex; gap: 5px; }
.area-list article > div:last-child button { min-height: 32px; padding: 0 9px; border: 1px solid #d9dce2; border-radius: 8px; background: white; font-size: .67rem; font-weight: 750; cursor: pointer; }
.area-list .danger-action { color: #a23e33; border-color: #efc8c2; }
.area-schedule-section { margin-top: 22px; }
.area-schedule-section > header { display: flex; margin: 0 4px 9px; align-items: center; gap: 10px; }
.area-schedule-section > header > span { display: grid; width: 39px; height: 39px; place-items: center; border-radius: 12px; color: white; font-size: 1rem; }
.area-schedule-section h2, .area-schedule-section small { display: block; }
.area-schedule-section h2 { margin: 0; font-size: 1rem; }
.area-schedule-section header small { margin-top: 2px; color: #818a99; font-size: .68rem; }
.area-schedule-section .admin-panel { margin-top: 0; }
.area-empty { padding: 20px; border: 1px dashed #d8dce3; border-radius: 12px; color: #858e9d; background: rgba(255,255,255,.55); font-size: .76rem; }
.editor-actions { display: flex; margin-top: 17px; justify-content: flex-end; gap: 8px; }
.editor-actions button:not(.admin-primary) { min-height: 41px; padding: 0 15px; border: 1px solid #d8dbe1; border-radius: 9px; background: white; font-weight: 760; cursor: pointer; }
.admin-table-panel { padding: 0; overflow: hidden; }
.admin-table-head, .admin-table-row { display: grid; grid-template-columns: minmax(180px, 2fr) repeat(4, minmax(90px, 1fr)); align-items: center; gap: 13px; }
.admin-table-head.crud-table, .admin-table-row.crud-table { grid-template-columns: minmax(180px, 1.8fr) repeat(4, minmax(80px, .75fr)) minmax(210px, 1.15fr); }
.admin-table-head.chore-schedule-table, .admin-table-row.chore-schedule-table { grid-template-columns: minmax(190px, 1.6fr) minmax(150px, 1fr) minmax(110px, .75fr) minmax(70px, .45fr) minmax(210px, 1.1fr); }
.schedule-assignees { overflow: hidden; color: #5e6778; text-overflow: ellipsis; white-space: nowrap; }
.admin-table-head.reward-crud-table, .admin-table-row.reward-crud-table { grid-template-columns: minmax(220px, 2fr) minmax(90px, .6fr) minmax(100px, .7fr) minmax(210px, 1.1fr); }
.admin-table-head { min-height: 46px; padding: 0 18px; color: #7b8494; background: #f8f9fa; font-size: .68rem; font-weight: 780; text-transform: uppercase; }
.admin-table-row { min-height: 62px; padding: 0 18px; border-top: 1px solid #eceef0; color: #5e6778; font-size: .79rem; }
.table-title { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.table-title i { display: grid; width: 34px; height: 34px; place-items: center; border-radius: 10px; color: #5342ba; background: #efedff; font-style: normal; }
.table-status { padding: 5px 8px; border-radius: 999px; color: #697182; background: #eef0f3; font-size: .67rem; font-style: normal; font-weight: 780; text-transform: capitalize; }
.chore-type-cell b, .chore-type-cell small { display: block; }
.chore-type-cell small { margin-top: 3px; color: #858d9b; font-size: .65rem; }
.status-archived { color: #706579; background: #ece8ef; }
.archived-row { background: #faf9fb; opacity: .78; }
.crud-actions { display: flex; flex-wrap: wrap; gap: 5px; }
.crud-actions button { min-height: 34px; padding: 0 9px; border: 1px solid #d9dce2; border-radius: 8px; color: #596277; background: white; font-size: .68rem; font-weight: 760; cursor: pointer; }
.crud-actions .danger-action { color: #a23e33; border-color: #efc8c2; }
.crud-actions button:disabled { color: #a5a9b0; border-color: #e5e6e9; background: #f2f3f4; cursor: not-allowed; }
.reward-head, .reward-row { grid-template-columns: minmax(220px, 2fr) 1fr 1fr; }
.admin-request-row { display: flex; min-height: 72px; padding: 12px 0; align-items: center; gap: 13px; border-top: 1px solid #eceef0; }
.admin-request-row:first-of-type { border-top: 0; }
.admin-request-row > div:nth-child(2) { flex: 1; }
.admin-request-row strong, .admin-request-row small { display: block; }
.admin-request-row small { margin-top: 3px; color: #81899a; font-size: .73rem; }
.row-actions { display: flex; gap: 7px; }
.active-admin-panel { border-color: #cfe3ff; background: #fbfdff; }
.quick-timer-panel { display: grid; grid-template-columns: minmax(190px, 1.3fr) repeat(3, minmax(110px, .7fr)) auto; align-items: end; gap: 12px; }
.quick-timer-panel h2 { margin: 0; font-size: 1.15rem; }
.quick-timer-panel > div > p:not(.eyebrow) { margin: 5px 0 0; color: #7a8393; font-size: .75rem; }
.quick-timer-panel label { color: #6c7587; font-size: .7rem; font-weight: 730; }
.quick-timer-panel select {
  width: 100%;
  min-height: 52px;
  margin-top: 7px;
  padding: 0 44px 0 15px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cfd4dc;
  border-radius: 10px;
  color: #344056;
  background-color: white;
  background-image: linear-gradient(45deg, transparent 50%, #596277 50%), linear-gradient(135deg, #596277 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(24,36,60,.04);
  font-size: .88rem;
  font-weight: 720;
  cursor: pointer;
}
.quick-timer-panel select:hover { border-color: #aeb5c1; background-color: #fcfcfe; }
.quick-timer-panel select:focus { border-color: #7d70dc; box-shadow: 0 0 0 3px rgba(102,87,217,.18); }
.quick-timer-panel > .admin-primary { min-height: 52px; padding-inline: 20px; }
.quick-timer-panel button:disabled { color: #959ca7; background: #e7e9ec; }
.admin-timer-row { display: flex; min-height: 82px; padding: 10px 0; align-items: center; gap: 14px; border-top: 1px solid #e2ebf6; }
.admin-timer-row:first-of-type { border-top: 0; }
.timer-mini-ring { display: grid; width: 66px; height: 54px; place-items: center; border-radius: 13px; color: white; background: #3977d7; font-variant-numeric: tabular-nums; font-size: .87rem; font-weight: 850; }
.admin-timer-row > div:nth-child(2) { flex: 1; }
.admin-timer-row strong, .admin-timer-row small { display: block; }
.admin-timer-row small { margin-top: 4px; color: #798395; font-size: .73rem; }
.time-bank-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.time-bank-grid article { padding: 15px; border: 1px solid #e4e7eb; border-radius: 12px; }
.time-bank-grid article > div:first-child { display: flex; align-items: center; gap: 11px; }
.time-bank-grid strong, .time-bank-grid small { display: block; }
.time-bank-grid small { color: #7b8495; }
.minute-actions { display: grid; margin-top: 14px; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.minute-actions .lock-active { color: #a43e33; border-color: #f0c2bc; background: #fff0ed; }
.settings-panel { margin-bottom: 18px; }
.audit-panel { padding: 0; overflow: hidden; }
.audit-summary { display: grid; min-height: 100px; padding: 20px 24px; grid-template-columns: auto 1fr; align-items: center; gap: 0 13px; color: white; background: linear-gradient(135deg, #24365b, #3d4f7c); }
.audit-summary strong { grid-row: 1 / 3; font-size: 2.4rem; }
.audit-summary span { align-self: end; font-weight: 800; }
.audit-summary small { align-self: start; color: #c7d1e7; }
.audit-filters { padding: 18px 24px; border-bottom: 1px solid #e7e9ed; background: #fafbfc; }
.audit-quick-ranges { display: flex; margin-bottom: 12px; flex-wrap: wrap; gap: 6px; }
.audit-quick-ranges button { min-height: 32px; padding: 0 11px; border: 1px solid #d8dce3; border-radius: 8px; color: #596277; background: white; font-size: .69rem; font-weight: 760; cursor: pointer; }
.audit-quick-ranges button:hover { color: #4f3ebd; border-color: #c9c2f1; background: #f5f3ff; }
.audit-filter-grid { display: grid; grid-template-columns: repeat(2, minmax(190px, 1fr)) minmax(155px, .7fr) auto; align-items: end; gap: 10px; }
.audit-filter-grid label { color: #687184; font-size: .69rem; font-weight: 750; }
.audit-filter-grid > label > select { display: block; width: 100%; min-height: 48px; margin-top: 6px; padding: 0 42px 0 12px; border: 1px solid #cfd4dc; border-radius: 10px; color: #344056; background-color: white; }
.audit-date-picker { position: relative; }
.audit-date-picker > span { display: block; }
.audit-date-picker > button { display: flex; width: 100%; min-height: 48px; margin-top: 6px; padding: 0 12px; align-items: center; gap: 9px; border: 1px solid #cfd4dc; border-radius: 10px; color: #8a92a1; text-align: left; background: white; font-size: .76rem; font-weight: 700; cursor: pointer; }
.audit-date-picker > button.has-value { color: #344056; }
.audit-date-picker > button > span { color: #6657d9; font-size: .9rem; }
.audit-date-picker > button > b { margin-left: auto; color: #687184; font-size: .95rem; }
.audit-date-picker > button[aria-expanded="true"] { border-color: #7d70dc; box-shadow: 0 0 0 3px rgba(102,87,217,.18); }
.audit-calendar-popover { position: absolute; z-index: 50; top: calc(100% + 7px); left: 0; width: 310px; padding: 14px; border: 1px solid #d8dbe3; border-radius: 15px; color: #344056; background: white; box-shadow: 0 20px 55px rgba(30,38,60,.22); }
.audit-calendar-head { display: grid; grid-template-columns: 34px 1fr 34px; align-items: center; }
.audit-calendar-head strong { text-align: center; font-size: .86rem; }
.audit-calendar-head button { width: 32px; height: 32px; border: 0; border-radius: 9px; color: #5544bd; background: #f3f0ff; font-size: 1.2rem; cursor: pointer; }
.audit-calendar-weekdays, .audit-calendar-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.audit-calendar-weekdays { margin: 11px 0 5px; color: #8b93a1; text-align: center; font-size: .62rem; font-weight: 800; text-transform: uppercase; }
.audit-calendar-days button, .audit-calendar-days i { aspect-ratio: 1; }
.audit-calendar-days button { border: 0; border-radius: 9px; color: #4b5568; background: transparent; font-size: .71rem; font-weight: 700; cursor: pointer; }
.audit-calendar-days button:hover { color: #4f3ebd; background: #f1efff; }
.audit-calendar-days button.active { color: white; background: #5b49c7; box-shadow: 0 3px 0 #4535a5; }
.audit-time-row { display: grid; margin-top: 12px; padding-top: 12px; grid-template-columns: 1fr 58px auto 58px 68px; align-items: center; gap: 5px; border-top: 1px solid #eceef2; }
.audit-time-row > span { color: #687184; font-size: .69rem; font-weight: 800; }
.audit-time-row select { min-height: 38px; padding: 0 25px 0 8px; border-radius: 8px; font-size: .7rem; }
.audit-time-row b { color: #7b8493; text-align: center; }
.audit-calendar-footer { display: flex; margin-top: 12px; justify-content: space-between; }
.audit-calendar-footer button { min-height: 34px; padding: 0 12px; border: 0; border-radius: 8px; color: #6556ae; background: #f2f0fa; font-size: .68rem; font-weight: 800; cursor: pointer; }
.audit-calendar-footer .calendar-done { color: white; background: #5141bd; }
.audit-clear { min-height: 48px; padding: 0 14px; border: 1px solid #d8dce3; border-radius: 10px; color: #596277; background: white; font-size: .72rem; font-weight: 780; cursor: pointer; }
.audit-clear:disabled { color: #a0a6b0; background: #f0f2f4; cursor: not-allowed; }
.audit-list { padding: 5px 24px 18px; }
.audit-row { display: grid; min-height: 84px; padding: 16px 0; grid-template-columns: 78px 1fr; align-items: start; gap: 14px; border-top: 1px solid #e7e9ed; }
.audit-row:first-child { border-top: 0; }
.audit-row > div > strong, .audit-row > div > small { display: block; }
.audit-row > div > small { margin-top: 4px; color: #7a8394; font-size: .74rem; }
.audit-action { padding: 6px 8px; border-radius: 999px; text-align: center; color: #445066; background: #e9ecf1; font-size: .66rem; font-weight: 850; text-transform: uppercase; }
.audit-create, .audit-restore { color: #08715b; background: #dff5ed; }
.audit-update { color: #4e3bb0; background: #ece8ff; }
.audit-archive { color: #75570e; background: #fff0bd; }
.audit-delete { color: #a13d32; background: #ffebe7; }
.audit-row details { margin-top: 9px; }
.audit-row summary { width: fit-content; color: #5746b7; font-size: .72rem; font-weight: 760; cursor: pointer; }
.audit-detail { display: grid; margin-top: 10px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.audit-detail > div { padding: 11px; border-radius: 10px; background: #f5f6f8; }
.audit-detail b { display: block; margin-bottom: 7px; font-size: .7rem; text-transform: uppercase; }
.audit-detail span { display: grid; padding: 3px 0; grid-template-columns: minmax(80px, .7fr) 1fr; gap: 8px; font-size: .7rem; }
.audit-detail em { color: #778092; font-style: normal; text-transform: capitalize; }
.audit-detail code { overflow-wrap: anywhere; color: #30394b; font-family: inherit; }
.profile-setting { display: grid; min-height: 61px; grid-template-columns: 42px minmax(110px, .5fr) minmax(180px, 1fr); align-items: center; gap: 12px; border-top: 1px solid #eceef0; color: #717a8c; font-size: .78rem; }
.profile-setting:first-of-type { border-top: 0; }
.profile-setting input { margin: 0; }
.settings-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.child-account-form { display: grid; gap: 18px; }
.child-account-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: start; }
.child-account-grid label { display: grid; grid-template-rows: auto 48px auto; align-content: start; }
.child-account-grid input, .child-account-grid select { height: 48px; min-height: 48px; margin-top: 6px; box-sizing: border-box; color: #4f596c; font: inherit; }
.child-account-grid select { display: block; padding-right: 28px; }
.child-account-grid label small { min-height: 16px; margin-top: 5px; color: #8a92a0; font-size: .65rem; font-weight: 600; }
.child-create-button { min-height: 45px; justify-self: start; padding: 0 20px; }
.admin-primary:disabled { color: #9299a6; background: #e7e9ec; cursor: not-allowed; }
.child-form-message { margin: -7px 0 0; font-size: .78rem; font-weight: 720; }
.child-form-message.success { color: #277a58; }
.child-form-message.error { color: #a43e33; }
.settings-help { margin: -7px 0 17px; color: #747d8e; font-size: .8rem; }
.passcode-setting-grid { display: grid; gap: 9px; }
.passcode-setting-grid article { position: relative; display: grid; min-height: 58px; grid-template-columns: 42px minmax(120px, 1fr) minmax(160px, .7fr) auto; align-items: center; gap: 11px; border-top: 1px solid #eceef0; }
.passcode-setting-grid article:first-child { border-top: 0; }
.passcode-setting-grid strong, .passcode-setting-grid small { display: block; }
.passcode-setting-grid small { color: #7d8696; font-size: .7rem; text-transform: capitalize; }
.passcode-setting-grid input { min-height: 39px; padding: 0 10px; border: 1px solid #dce0e5; border-radius: 8px; }
.passcode-setting-grid button { min-height: 39px; padding: 0 12px; border: 0; border-radius: 8px; color: white; background: #5141bd; font-size: .74rem; font-weight: 750; }
.passcode-setting-grid button:disabled { color: #9299a6; background: #e8eaed; }
.passcode-setting-grid em { position: absolute; right: 0; bottom: -4px; color: #08745d; font-size: .65rem; font-style: normal; }
.lock-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.lock-grid article { padding: 15px; border: 1px solid #e3e6ea; border-radius: 11px; }
.lock-grid article > strong { display: block; margin-bottom: 9px; }
.lock-grid label { display: flex; min-height: 39px; align-items: center; justify-content: space-between; color: #677083; font-size: .78rem; }
.lock-grid input { width: 18px; height: 18px; accent-color: var(--purple); }
.admin-empty { display: grid; min-height: 210px; place-items: center; align-content: center; color: #7d8696; text-align: center; }
.admin-empty > span { display: grid; width: 48px; height: 48px; margin-bottom: 12px; place-items: center; border-radius: 14px; color: #5848be; background: #efedff; font-size: 1.2rem; }
.admin-empty strong { color: var(--ink); }
.admin-empty p { margin: 5px 0 0; font-size: .8rem; }

/* Use one predictable picker treatment instead of each platform's compact native UI. */
select:not([multiple]) {
  min-height: 48px;
  padding: 0 44px 0 14px;
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid #cfd4dc;
  border-radius: 10px;
  color: #344056;
  background-color: white;
  background-image: linear-gradient(45deg, transparent 50%, #596277 50%), linear-gradient(135deg, #596277 50%, transparent 50%);
  background-position: calc(100% - 19px) 50%, calc(100% - 13px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: 0 1px 2px rgba(24,36,60,.04);
  font-weight: 700;
  cursor: pointer;
}
select:not([multiple]):hover { border-color: #aeb5c1; background-color: #fcfcfe; }
select:not([multiple]):focus { border-color: #7d70dc; box-shadow: 0 0 0 3px rgba(102,87,217,.18); }
.quick-timer-panel select { min-height: 52px; }

@media (max-width: 900px) {
  .badge-trail { align-items: flex-start; flex-direction: column; }
  .badge-trail-icons { width: 100%; min-width: 0; justify-content: flex-start; padding-left: 10px; }
  .child-account-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .profile-grid { grid-template-columns: 1fr; }
  .profile-card { min-height: 100px; padding: 16px; display: grid; grid-template-columns: 58px 1fr; align-items: center; column-gap: 14px; }
  .profile-avatar { width: 54px; height: 54px; margin: 0; grid-row: 1 / 3; }
  .profile-card strong, .profile-card small { grid-column: 2; }
  .profile-card strong { align-self: end; }
  .profile-card small { align-self: start; }
  .gate-topline { margin-bottom: 36px; }
  .quest-hero { grid-template-columns: 1fr; }
  .quest-hero-copy { padding-right: 38%; }
  .quest-hero-copy > p:not(.eyebrow), .quest-progress-row { max-width: 520px; }
  .quest-star-friend { width: 62px; height: 62px; }
  .quest-scene { position: absolute; inset: 0 0 0 auto; display: block; width: 42%; opacity: .78; }
  .quest-scene::after { width: 56%; background: linear-gradient(90deg, #745fdf, transparent); }
  .kid-stat-grid { grid-template-columns: 1fr 1fr; }
  .stat-streak { grid-column: 1 / -1; }
  .reward-grid { grid-template-columns: 1fr; }
  .activity-grid { grid-template-columns: repeat(3, 1fr); }
  .parent-shell { display: block; padding-bottom: 72px; }
  .parent-sidebar { display: none; }
  .parent-main { padding: 24px 18px 70px; }
  .parent-mobile-header { display: flex; height: 58px; margin-bottom: 28px; align-items: center; justify-content: space-between; }
  .parent-mobile-header .brand-mark { margin-right: 8px; }
  .parent-mobile-header > strong { margin-right: auto; }
  .parent-mobile-header > button { width: 38px; height: 38px; border: 0; border-radius: 12px; color: white; background: var(--ink); font-weight: 800; }
  .parent-mobile-nav { position: fixed; z-index: 30; right: 0; bottom: 0; left: 0; display: flex; min-height: 62px; padding: 7px; overflow-x: auto; border-top: 1px solid #dfe2e6; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); }
  .parent-mobile-nav button { min-width: 74px; flex: 1 0 74px; border: 0; border-radius: 9px; color: #737c8d; background: transparent; font-size: .68rem; font-weight: 720; text-transform: capitalize; }
  .parent-mobile-nav button.active { color: #4d3bb4; background: #efedff; }
  .admin-form-grid, .compact-form { grid-template-columns: 1fr 1fr; }
  .crud-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .area-editor { grid-template-columns: 1fr; align-items: start; }
  .quick-timer-panel { grid-template-columns: 1fr 1fr; }
  .quick-timer-panel > div { grid-column: 1 / -1; }
  .child-dashboard-summary { grid-template-columns: 1fr 1fr; }
  .admin-form-grid > button { min-height: 42px; }
  .audit-filter-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 650px) {
  .redo-form { grid-template-columns: 1fr; }
  .redo-form button { width: 100%; }
  .auth-choice-grid { grid-template-columns: 1fr; }
  .auth-choice-grid button { min-height: 118px; }
  .child-header { height: 66px; padding: 0 17px; }
  .child-header .brand-mark > span:last-child { display: none; }
  .child-content { width: min(100% - 24px, 1120px); padding-top: 18px; }
  .quest-hero { min-height: 310px; border-radius: 25px; box-shadow: 0 9px 0 #4939a9; }
  .quest-hero-copy { padding: 28px 23px; }
  .quest-hero-copy { padding-right: 23px; }
  .quest-star-friend { width: 52px; height: 52px; margin-top: 14px; opacity: .94; }
  .quest-hero h1 { font-size: 2.55rem; }
  .quest-scene { display: none; }
  .kid-stat-grid { margin: 25px 0 40px; grid-template-columns: 1fr; }
  .stat-streak { grid-column: auto; }
  .kid-stat { min-height: 86px; }
  .badge-trail { margin-top: -12px; padding: 21px 18px; }
  .badge-trail-icons span { width: 68px; height: 68px; }
  .badge-trail-icons img { width: 62px; height: 62px; }
  .section-heading { align-items: flex-start; }
  .section-count { max-width: 110px; text-align: center; }
  .chore-card { min-height: 0; padding: 16px; gap: 12px; border-radius: 21px; }
  .chore-icon { width: 48px; height: 48px; border-radius: 16px; }
  .chore-icon .app-icon { width: 42px; height: 42px; }
  .chore-title-line { align-items: flex-start; }
  .chore-title-line h3 { font-size: 1rem; }
  .chore-main > p { font-size: .84rem; }
  .chore-footer { flex-wrap: wrap; }
  .primary-kid-button { width: 100%; margin: 3px 0 0; }
  .page-intro { min-height: 270px; padding: 27px 22px; flex-direction: column; align-items: flex-start; }
  .balance-bubble, .streak-medallion { width: 102px; min-width: 102px; height: 102px; min-height: 102px; align-self: flex-end; }
  .balance-bubble strong { font-size: 1.6rem; }
  .reward-card { min-height: 245px; padding: 17px; grid-template-columns: 78px 1fr; }
  .reward-art { width: 78px; height: 78px; border-radius: 21px; font-size: 1.7rem; }
  .reward-art .app-icon { width: 70px; height: 70px; }
  .reward-footer button { max-width: 170px; }
  .activity-grid { grid-template-columns: repeat(2, 1fr); }
  .duration-grid { grid-template-columns: repeat(2, 1fr); }
  .timer-digits { font-size: 3.75rem; }
  .active-timer-card { padding: 28px 18px; border-radius: 24px; }
  .milestone-grid { grid-template-columns: 1fr; }
  .gate-card { padding: 24px 18px; border-radius: 26px; }
  .gate-card h1 { font-size: 2.45rem; }
  .gate-shell { padding: 14px; }
  .gate-topline .brand-mark > span:last-child { display: none; }
  .admin-page-header { min-height: 0; margin-bottom: 22px; flex-direction: column; }
  .header-action-group { width: 100%; }
  .header-action-group button { flex: 1; }
  .admin-page-header h1 { font-size: 2.1rem; }
  .admin-metric-grid { grid-template-columns: 1fr; }
  .admin-metric-grid button { min-height: 120px; }
  .child-overview-table article { grid-template-columns: 42px 1fr auto; }
  .mini-progress { grid-column: 2 / 4; }
  .overview-balance { grid-column: 2; }
  .admin-state { grid-column: 3; }
  .child-dashboard-button { grid-column: 2 / 4; width: 100%; }
  .child-dashboard-summary { grid-template-columns: 1fr; }
  .child-dashboard-actions { width: 100%; align-items: stretch; flex-direction: column; }
  .child-dashboard-actions select { width: 100%; }
  .child-work-list article { grid-template-columns: 42px 1fr; }
  .child-work-status { grid-column: 2; justify-self: start; }
  .review-card { grid-template-columns: 42px 1fr; }
  .review-actions { grid-column: 1 / -1; flex-wrap: wrap; }
  .review-actions button { flex: 1; }
  .admin-form-grid, .compact-form { grid-template-columns: 1fr; }
  .admin-table-head { display: none; }
  .admin-table-row { grid-template-columns: 1fr 1fr; padding: 13px 15px; gap: 9px; }
  .admin-table-row.crud-table, .admin-table-row.reward-crud-table { grid-template-columns: 1fr 1fr; }
  .admin-table-row.chore-schedule-table { grid-template-columns: 1fr 1fr; }
  .admin-table-row.chore-schedule-table .table-title, .admin-table-row.chore-schedule-table .crud-actions { grid-column: 1 / -1; }
  .admin-table-row.crud-table .crud-actions, .admin-table-row.reward-crud-table .crud-actions { grid-column: 1 / -1; }
  .table-title { grid-column: 1 / -1; }
  .reward-row { grid-template-columns: 1fr 1fr; }
  .admin-request-row { align-items: flex-start; flex-wrap: wrap; }
  .admin-request-row > div:nth-child(2) { min-width: calc(100% - 60px); }
  .row-actions { width: 100%; padding-left: 55px; }
  .row-actions button { flex: 1; }
  .time-bank-grid, .settings-grid, .lock-grid { grid-template-columns: 1fr; }
  .child-account-grid { grid-template-columns: 1fr; }
  .crud-form-grid, .reward-editor-grid { grid-template-columns: 1fr; }
  .assignment-area-editor > label { grid-template-columns: 28px 1fr auto; }
  .assignment-area-editor select { grid-column: 1 / -1; }
  .area-list article { grid-template-columns: 38px 1fr; }
  .area-list article > div:last-child { grid-column: 1 / -1; flex-wrap: wrap; }
  .audit-detail { grid-template-columns: 1fr; }
  .audit-filter-grid { grid-template-columns: 1fr; }
  .audit-calendar-popover { width: min(310px, calc(100vw - 70px)); }
  .quick-timer-panel { grid-template-columns: 1fr; }
  .quick-timer-panel > div { grid-column: auto; }
  .profile-setting { grid-template-columns: 42px 1fr; padding: 10px 0; }
  .profile-setting input { grid-column: 1 / -1; }
  .passcode-setting-grid article { padding: 10px 0; grid-template-columns: 42px 1fr auto; }
  .passcode-setting-grid input { grid-column: 1 / 3; }
  .admin-timer-row { flex-wrap: wrap; }
  .admin-timer-row button { width: 100%; }
  .request-row { align-items: flex-start; }
  .alert-row { align-items: flex-start; flex-direction: column; }
  .alert-row button { width: 100%; }
  .request-status { flex: 0 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}