:root {
    --ivory: #fffaf5;
    --paper: #fffefd;
    --ink: #17181c;
    --muted: #66656d;
    --line: #e9e3dc;
    --coral: #ff5b52;
    --coral-dark: #e63e35;
    --coral-soft: #fff0ec;
    --lavender: #7449bd;
    --lavender-soft: #f2ecfb;
    --green: #2eaa55;
    --green-soft: #eaf7ed;
    --blue: #2876d2;
    --blue-soft: #eaf3fc;
    --orange: #e98919;
    --orange-soft: #fff4e4;
    --radius-sm: 14px;
    --radius: 20px;
    --radius-lg: 28px;
    --shadow: 0 14px 42px rgba(81, 62, 44, .07);
}

* { box-sizing: border-box; }
html { min-height: 100%; background: var(--ivory); color-scheme: light; scrollbar-width: none; }
::-webkit-scrollbar { width: 0; height: 0; }
body { min-height: 100%; margin: 0; color: var(--ink); background: var(--ivory); font-family: "Nunito Sans", "Segoe UI", sans-serif; font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; }
button, input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, a, input, select, textarea { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: 3px solid rgba(40, 118, 210, .38); outline-offset: 3px; }
.hidden { display: none !important; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

.guest-body { display: grid; place-items: center; padding: 24px; }
.guest-shell { width: min(100%, 520px); }
.auth-card { border: 1px solid var(--line); border-radius: 32px; padding: 34px; background: rgba(255, 254, 253, .96); box-shadow: var(--shadow); }
.brand-lockup { display: flex; align-items: center; gap: 12px; color: var(--coral-dark); font-size: 1.05rem; font-weight: 800; letter-spacing: .02em; }
.brand-mark { display: grid; width: 44px; height: 44px; place-items: center; border-radius: 15px; color: white; background: var(--coral); font-size: 24px; }
.auth-card h1 { margin: 26px 0 8px; font-size: clamp(2rem, 7vw, 3rem); line-height: 1.05; letter-spacing: -.04em; }
.auth-lead { margin: 0 0 24px; color: var(--muted); font-size: 1.05rem; }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 22px 0; padding: 4px; border: 1px solid var(--line); border-radius: 15px; background: #f8f4ef; }
.auth-tab { min-height: 44px; border: 0; border-radius: 11px; color: var(--muted); background: transparent; cursor: pointer; }
.auth-tab.active { color: var(--lavender); background: white; box-shadow: 0 2px 10px rgba(64, 42, 86, .08); font-weight: 800; }
.auth-footer, .form-note { color: var(--muted); font-size: .88rem; }
.auth-footer { margin: 22px 0 0; text-align: center; }
.auth-footer a, .section-heading a { color: var(--lavender); font-weight: 800; }

.app-body { padding: 0; }
.app-shell { min-height: 100dvh; margin: 0 auto; background: var(--paper); }
.app-shell--child { width: min(100%, 720px); }
.app-shell--parent { width: min(100%, 1120px); }
.app-content { min-height: 100dvh; padding: 24px 26px 112px; }
.app-toolbar { position: sticky; z-index: 12; top: 0; display: flex; align-items: center; justify-content: flex-end; gap: 10px; min-height: 56px; padding: 8px 26px; border-bottom: 1px solid var(--line); background: rgba(255,254,253,.96); backdrop-filter: blur(10px); }
.flash { position: sticky; z-index: 30; top: 12px; display: flex; align-items: center; gap: 10px; width: min(calc(100% - 32px), 720px); margin: 12px auto 0; padding: 13px 16px; border-radius: 15px; font-weight: 700; box-shadow: var(--shadow); }
.flash--success { color: #176c34; border: 1px solid #bee6c8; background: #effaf2; }
.flash--error { color: #a42f29; border: 1px solid #f2c5c0; background: #fff2ef; }

.hero { position: relative; display: flex; align-items: center; justify-content: space-between; min-height: 124px; margin: -24px -26px 24px; padding: 30px 32px 24px; overflow: hidden; border-radius: 0 0 38px 38px; }
.hero--parent { background: #f5effc; }
.hero--child { background: #fff0ea; }
.hero-profile { display: flex; align-items: center; gap: 18px; }
.family-avatar { width: 76px; height: 76px; border: 4px solid rgba(255,255,255,.8); border-radius: 50%; object-fit: cover; }
.hero h1 { margin: 0; font-size: clamp(2rem, 5vw, 2.8rem); line-height: 1.05; letter-spacing: -.035em; }
.hero p { margin: 6px 0 0; color: var(--muted); }
.eyebrow { margin: 0 0 4px !important; color: var(--lavender) !important; font-size: .78rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.hero-decoration { color: rgba(116, 73, 189, .8); font-size: 76px; }
.sun-mark { color: var(--coral); font-size: 58px; }

.bottom-nav { position: fixed; z-index: 20; right: 0; bottom: 0; left: 0; display: grid; grid-template-columns: repeat(5, 1fr); width: min(100%, 720px); min-height: 80px; margin: 0 auto; padding: 8px max(10px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left)); border-top: 1px solid var(--line); border-radius: 22px 22px 0 0; background: rgba(255, 254, 253, .97); box-shadow: 0 -10px 30px rgba(60, 43, 28, .05); }
.bottom-nav--parent { grid-template-columns: repeat(6, 1fr); }
.bottom-nav--parent { width: min(100%, 1120px); }
.bottom-nav a { position: relative; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; min-width: 0; color: #5f6065; font-size: .78rem; }
.bottom-nav i { font-size: 27px; }
.bottom-nav a:nth-child(1) i { color: var(--coral); }
.bottom-nav a:nth-child(2) i { color: var(--blue); }
.bottom-nav a:nth-child(3) i { color: var(--green); }
.bottom-nav a:nth-child(4) i { color: var(--lavender); }
.bottom-nav a:nth-child(5) i { color: var(--orange); }
.bottom-nav--parent a:nth-child(3) i { color: var(--lavender); }
.bottom-nav--parent a:nth-child(4) i { color: var(--green); }
.bottom-nav--parent a:nth-child(5) i { color: var(--orange); }
.bottom-nav--parent a:nth-child(6) i { color: var(--coral); }
.bottom-nav a.active { color: var(--ink); font-weight: 800; }
.bottom-nav a.active i { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--ivory); }

.global-member-filter { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.global-member-filter label { color: var(--muted); font-size: .82rem; font-weight: 800; }
.global-member-filter i { color: var(--lavender); font-size: 20px; }
.global-member-filter select { min-width: 150px; min-height: 38px; padding: 6px 34px 6px 11px; border: 1px solid var(--line); border-radius: 12px; background: white; }
.notification-bell { position: relative; display: grid; width: 40px; height: 40px; flex: 0 0 auto; place-items: center; border-radius: 50%; color: var(--coral-dark); background: var(--coral-soft); font-size: 22px; }
.notification-bell span { position: absolute; top: -4px; right: -4px; display: grid; min-width: 19px; height: 19px; padding: 0 4px; place-items: center; border: 2px solid white; border-radius: 999px; color: white; background: var(--coral); font-size: .64rem; font-weight: 800; }

.review-banner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 0 0 24px; padding: 18px 20px; border: 1px solid #d9caef; border-radius: var(--radius); background: #fbf8ff; }
.review-banner h2 { margin: 0; font-size: 1.25rem; }
.review-banner p { margin: 3px 0 0; color: var(--muted); }
.section-block { margin: 24px 0; }
.section-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 10px; }
.section-heading h2, .section-block > h2 { margin: 0; font-size: 1.35rem; }
.child-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.child-progress-card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.child-progress-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.child-progress-card h3 { margin: 0; font-size: 1.15rem; }
.child-progress-card strong { color: var(--lavender); font-size: 1.3rem; }
.child-avatar { position: relative; display: block; width: 54px; height: 54px; overflow: hidden; border-radius: 50%; background: var(--lavender-soft); }
.child-avatar img { position: absolute; top: 0; width: 170px; max-width: none; height: 100%; object-fit: cover; }
.child-avatar--bia img { left: -8px; }
.child-avatar--leo img { right: -8px; }
.child-avatar--large { width: 104px; height: 104px; }
.child-avatar--large img { width: 310px; }
.progress-track { height: 9px; margin-top: 14px; overflow: hidden; border-radius: 999px; background: #e7dff3; }
.progress-track span { display: block; height: 100%; border-radius: inherit; background: var(--lavender); }

.task-list-card, .panel { border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.panel { padding: 22px; }
.task-row { display: grid; grid-template-columns: auto minmax(0, 1.7fr) minmax(75px, .7fr) auto; align-items: center; gap: 14px; min-height: 72px; padding: 10px 14px; border-bottom: 1px solid var(--line); }
.task-row:last-child { border-bottom: 0; }
.task-main { display: flex; min-width: 0; flex-direction: column; }
.task-main strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.task-main small, .member-row small, .ledger-row small { color: var(--muted); }
.task-time { color: var(--muted); }
.icon-circle { display: inline-grid; flex: 0 0 auto; width: 46px; height: 46px; place-items: center; border-radius: 50%; font-size: 25px; }
.icon-circle--xl { width: 86px; height: 86px; font-size: 48px; }
.icon-circle--coral { color: var(--coral-dark); background: var(--coral-soft); }
.icon-circle--lavender { color: var(--lavender); background: var(--lavender-soft); }
.icon-circle--green { color: var(--green); background: var(--green-soft); }
.icon-circle--blue { color: var(--blue); background: var(--blue-soft); }
.icon-circle--orange { color: var(--orange); background: var(--orange-soft); }
.status { display: inline-flex; align-items: center; justify-content: center; min-height: 30px; padding: 4px 12px; border-radius: 999px; color: var(--blue); background: var(--blue-soft); font-size: .78rem; font-weight: 800; white-space: nowrap; }
.status--approved, .status--waived, .status--paid { color: #19823c; background: var(--green-soft); }
.status--submitted, .status--review, .status--open { color: #b76b09; background: var(--orange-soft); }
.status--correction_requested, .status--not_completed { color: var(--coral-dark); background: var(--coral-soft); }
.status--pending { color: var(--blue); background: var(--blue-soft); }
.status--expired, .status--closed { color: #6c6d73; background: #efeff1; }
.allowance-strip { display: flex; align-items: center; gap: 14px; padding: 12px 18px; border: 1px solid #bee0c6; border-radius: var(--radius); color: #2e5740; background: #f2faf4; }
.allowance-strip strong { color: var(--green); font-size: 1.15rem; }

.button { display: inline-flex; min-height: 48px; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border: 1px solid transparent; border-radius: 15px; cursor: pointer; font-weight: 800; }
.button--primary { color: white; background: var(--coral); }
.button--primary:hover { background: var(--coral-dark); }
.button--lavender { color: white; background: var(--lavender); }
.button--ghost { color: var(--ink); border-color: var(--line); background: white; }
.button--full { width: 100%; min-height: 58px; font-size: 1.05rem; }
.icon-button { display: inline-grid; width: 44px; height: 44px; flex: 0 0 auto; place-items: center; border-radius: 50%; font-size: 24px; }
.icon-button { color: var(--lavender); border: 0; background: var(--lavender-soft); cursor: pointer; }
.icon-button--green { color: var(--green); background: var(--green-soft); }
.icon-button--danger { color: var(--coral-dark); background: var(--coral-soft); }
.back-link { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); font-weight: 700; }

.page-header { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin: 4px 0 24px; }
.page-header h1 { margin: 0; font-size: clamp(2rem, 6vw, 3rem); line-height: 1.1; letter-spacing: -.035em; }
.page-header p { margin: 6px 0 0; color: var(--muted); }
.page-header--focused { justify-content: flex-start; }
.page-header--focused > h1 { flex: 1; text-align: center; font-size: 1.75rem; }
.two-column, .review-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.panel h2 { margin-top: 0; }
.stack { display: grid; gap: 16px; }
.field { display: grid; gap: 7px; min-width: 0; }
.field > span, .field legend { color: #35353a; font-weight: 800; }
.field small { color: var(--muted); font-weight: 500; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 11px 13px; border: 1px solid #d8d4cf; border-radius: 13px; color: var(--ink); background: #fffefd; }
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--blue); outline: 3px solid rgba(40,118,210,.13); }
.member-list, .task-library, .ledger-list { display: grid; gap: 4px; }
.member-row, .library-row, .ledger-row { display: flex; align-items: center; gap: 13px; min-height: 68px; padding: 10px; border-bottom: 1px solid var(--line); }
.member-row:last-child, .library-row:last-child, .ledger-row:last-child { border-bottom: 0; }
.member-row > div, .library-row > div, .ledger-row > div { display: grid; flex: 1; }
.member-row--actions > div.row-actions { display: flex; flex: 0 0 auto; gap: 6px; }
.row-actions form { margin: 0; }
.member-photo { width: 48px; height: 48px; flex: 0 0 auto; border-radius: 50%; object-fit: cover; }
.inline-form { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 12px; }
.narrow-panel { max-width: 620px; margin: 0 auto; }
.profile-photo-editor { display: flex; align-items: center; gap: 16px; }
.profile-photo-editor img { width: 86px; height: 86px; border-radius: 50%; object-fit: cover; }
.profile-photo-editor div { display: grid; }
.profile-photo-editor strong { font-size: 1.25rem; }
.profile-photo-editor small { color: var(--muted); }
.filter-panel { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; align-items: end; gap: 12px; margin-bottom: 18px; }
.ranking-list { display: grid; gap: 6px; }
.ranking-row { display: grid; grid-template-columns: 42px auto minmax(0,1fr) auto; align-items: center; gap: 14px; padding: 14px 8px; border-bottom: 1px solid var(--line); }
.ranking-row:last-child { border-bottom: 0; }
.ranking-row h2, .ranking-row p { margin: 0; }
.ranking-position { color: var(--lavender); font-size: 1.2rem; text-align: center; }
.game-points { display: flex; align-items: center; gap: 5px; color: var(--orange); font-size: 1.2rem; font-weight: 800; }
.game-score { display: flex; align-items: center; justify-content: center; gap: 18px; color: #8a570e; background: var(--orange-soft); }
.game-score > i { color: var(--orange); font-size: 54px; }
.game-score div { display: grid; }
.game-score strong { font-size: 2.5rem; line-height: 1; }
.badge-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 16px; }
.badge-card { opacity: .55; text-align: center; }
.badge-card--unlocked { opacity: 1; border-color: #f0d3a8; background: #fffaf0; }
.badge-card h2 { margin: 12px 0 4px; font-size: 1rem; }
.badge-card p { margin: 0; color: var(--muted); font-size: .85rem; }
.notification-device-card { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 12px; }
.notification-device-card h2, .notification-device-card p { margin: 0; }
.notification-device-card .form-note { grid-column: 1 / -1; }
.privacy-banner { display:flex; gap:14px; align-items:flex-start; padding:16px 18px; border:1px solid #cfe9df; border-radius:20px; background:#f1fbf7; color:#285b49; }
.privacy-banner>i { font-size:26px; }
.privacy-banner p,.privacy-banner strong { margin:0; }
.control-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.step-badge { display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--coral-soft); color:var(--coral); font-weight:800; }
.step-badge--green { background:var(--green-soft); color:#31886b; }
.pairing-code { display:grid; gap:4px; place-items:center; margin:12px 0 18px; padding:16px; border:2px dashed var(--coral); border-radius:18px; background:var(--coral-soft); }
.pairing-code strong { font-size:2.25rem; letter-spacing:.18em; color:var(--coral); }
.compact-filter { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:end; }
.compact-filter .button { grid-column:1/-1; }
.device-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:14px; }
.device-card__head { display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; }
.device-card h3,.device-card p { margin:0; }
.device-card>small { display:block; margin-top:12px; color:var(--muted); }
.permission-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:16px; }
.permission-grid span { padding:9px; border-radius:12px; font-size:.82rem; font-weight:700; }
.is-ok { color:#28745b; background:var(--green-soft); }.is-warning { color:#9b6421; background:#fff5de; }
.policy-error { display:block; margin-top:5px; color:var(--coral-dark); font-weight:700; }
.usage-list { display:grid; gap:4px; }.usage-row { display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center; padding:10px 0; border-bottom:1px solid var(--line); }.usage-row:last-child{border-bottom:0}.usage-row small{display:block;color:var(--muted)}.usage-row b{white-space:nowrap}.app-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--blue-soft);color:var(--blue);font-size:20px}
.device-app-picker { margin-top:12px; border:1px solid var(--line); border-radius:16px; overflow:hidden; }.device-app-picker summary{display:flex;justify-content:space-between;align-items:center;padding:14px;cursor:pointer;font-weight:800;background:var(--ivory)}.device-app-picker form{padding:14px}.app-check-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;max-height:260px;overflow:auto}.app-check-list label{display:flex;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:12px}.app-check-list span{display:flex;gap:6px;align-items:center;min-width:0}.app-check-list input{accent-color:var(--coral)}
.policy-list{display:grid;gap:10px}.policy-row{display:grid;grid-template-columns:auto 1fr auto auto;gap:12px;align-items:center}.policy-row h3,.policy-row p{margin:0}.policy-row small{color:var(--muted)}
.feature-link{display:grid;grid-template-columns:auto 1fr auto;gap:13px;align-items:center;padding:16px 18px;border:1px solid var(--line);border-radius:20px;background:#fff;color:var(--ink)}.feature-link small{display:block;color:var(--muted)}.feature-link>i{font-size:22px;color:var(--blue)}
.notification-list { display: grid; }
.notification-row { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; gap: 12px; padding: 13px 7px; border-bottom: 1px solid var(--line); }
.notification-row--unread { border-radius: 13px; background: #fffaf2; }
.notification-row div { min-width: 0; }
.notification-row p, .notification-row small { margin: 2px 0; color: var(--muted); }
.button-link { padding: 4px; border: 0; color: var(--lavender); background: transparent; cursor: pointer; font-weight: 800; }
.preference-list { display: grid; gap: 5px; }
.preference-heading, .preference-row { display: grid; grid-template-columns: minmax(0,1fr) 56px 56px; align-items: center; gap: 7px; min-height: 44px; padding: 5px 7px; border-bottom: 1px solid var(--line); }
.preference-heading { color: var(--muted); font-size: .75rem; font-weight: 800; text-transform: uppercase; }
.preference-row input { width: 20px; height: 20px; justify-self: center; accent-color: var(--lavender); }
.library-row h3, .library-row p { margin: 0; }
.library-row p { color: var(--muted); }
.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.field--wide, .form-actions { grid-column: 1 / -1; }
fieldset.field { margin: 0; padding: 0; border: 0; }
.weekday-picker { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.weekday-picker input { position: absolute; opacity: 0; pointer-events: none; }
.weekday-picker span { display: grid; min-height: 44px; place-items: center; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; }
.weekday-picker input:checked + span { color: white; border-color: var(--lavender); background: var(--lavender); }
.form-actions { display: flex; justify-content: flex-end; gap: 10px; }
.header-actions { display: flex; gap: 8px; }
.financial-rule-card { display: grid; grid-template-columns: auto minmax(170px,1fr) minmax(180px,.8fr) minmax(160px,.6fr); align-items: end; gap: 14px; padding: 18px; border: 1px solid #f0c8c3; border-radius: var(--radius); background: #fff9f7; scroll-margin-top: 76px; }
.financial-rule-copy h2, .financial-rule-copy p { margin: 0; }
.financial-rule-copy h2 { font-size: 1.12rem; }
.financial-rule-copy p { color: var(--muted); font-size: .86rem; }
.financial-rule-label { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-weight: 800; }
.financial-rule-label--deduction { color: var(--coral-dark) !important; }
.financial-rule-label--bonus { color: var(--green) !important; }

.approval-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.approval-card { display: grid; grid-template-columns: 112px 1fr auto; align-items: center; gap: 16px; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: white; }
.approval-card img, .approval-placeholder { width: 112px; height: 112px; object-fit: cover; }
.approval-placeholder { display: grid; place-items: center; color: var(--green); background: var(--green-soft); font-size: 38px; }
.approval-copy h2, .approval-copy p { margin: 2px 0; }
.approval-copy h2 { font-size: 1.1rem; }
.approval-copy span, .approval-copy p { color: var(--muted); font-size: .85rem; }
.approval-card > i { margin-right: 16px; }
.proof-review img, .proof-review video { width: 100%; aspect-ratio: 16 / 10; border-radius: 16px; object-fit: cover; }
.proof-review p { margin-bottom: 0; }
.cycle-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.cycle-card { position: relative; }
.cycle-card h2 { margin: 4px 0; font-size: 2rem; }
.cycle-card dl { display: grid; gap: 6px; }
.cycle-card dl div { display: flex; justify-content: space-between; }
.cycle-card dt { color: var(--muted); }
.cycle-card .status { position: absolute; top: 18px; right: 18px; }
.payment-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }
.payment-form input { min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 13px; }
.payment-hint { display: flex; align-items: center; gap: 7px; margin: 14px 0 0; color: var(--muted); font-size: .84rem; }

.kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.kpi { display: flex; align-items: center; gap: 13px; min-height: 102px; padding: 14px; border: 1px solid var(--line); border-radius: var(--radius); }
.kpi--coral { background: #fff8f5; }
.kpi--green { background: #f5fbf6; }
.kpi div { display: grid; }
.kpi div { min-width: 0; }
.kpi strong { font-size: 1.55rem; }
.kpi--coral strong { color: var(--coral-dark); }
.kpi--green strong { color: var(--green); }
.progress-hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin: 14px 0; padding: 20px; border-radius: var(--radius); background: var(--coral-soft); }
.progress-ring { display: grid; width: 84px; height: 84px; place-content: center; border: 10px solid #ffb9b1; border-top-color: var(--coral); border-right-color: var(--coral); border-radius: 50%; text-align: center; }
.progress-ring strong { font-size: 1.9rem; line-height: 1; }
.progress-ring span { font-size: .78rem; }
.progress-hero h2, .progress-hero p { margin: 0; }
.progress-hero h2 { color: var(--coral-dark); font-size: 1.45rem; }
.progress-hero > i { color: #f2b8ad; font-size: 52px; }
.timeline { position: relative; display: grid; margin: 8px 0 18px; }
.timeline::before { position: absolute; top: 30px; bottom: 30px; left: 15px; width: 2px; background: #d8d9db; content: ""; }
.timeline-row { position: relative; display: grid; grid-template-columns: 32px auto minmax(0, 1fr) auto; align-items: center; gap: 13px; min-height: 80px; padding: 7px 8px 7px 0; border-bottom: 1px solid var(--line); }
.timeline-dot { z-index: 1; display: grid; width: 31px; height: 31px; place-items: center; border: 2px solid #c7c9cc; border-radius: 50%; color: #9a9ca0; background: var(--paper); }
.timeline-dot--approved, .timeline-dot--waived { color: white; border-color: var(--green); background: var(--green); }
.timeline-dot--submitted { color: var(--orange); border-color: var(--orange); }

.task-focus { display: grid; gap: 18px; }
.task-title-row { display: flex; align-items: center; gap: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.task-title-row h2 { margin: 0 0 10px; font-size: 1.8rem; }
.task-meta { display: flex; align-items: center; gap: 14px; color: var(--blue); }
.detail-list { display: grid; }
.detail-list > div { display: grid; grid-template-columns: auto 1fr; align-items: start; gap: 15px; padding: 16px 0; border-bottom: 1px solid var(--line); }
.detail-list strong { font-size: 1.05rem; }
.detail-list p { margin: 5px 0 0; color: #4d4d54; }
.info-banner { display: flex; align-items: center; gap: 13px; padding: 15px 17px; border: 1px solid #d9caef; border-radius: 14px; color: #574875; background: #f7f2fd; }
.info-banner i { font-size: 26px; }
.info-banner--waiting { color: #965907; border-color: #f0d3a8; background: var(--orange-soft); }

.proof-form { display: grid; gap: 15px; }
.proof-task { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }
.proof-task > span:last-child { color: var(--blue); }
.proof-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 1px solid var(--line); border-radius: 13px; overflow: hidden; text-align: center; }
.proof-tabs span { padding: 10px; color: var(--muted); }
.proof-tabs .active { color: var(--lavender); background: var(--lavender-soft); font-weight: 800; }
.upload-preview { position: relative; display: block; overflow: hidden; border-radius: var(--radius); cursor: pointer; }
.upload-preview img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.upload-overlay { display: none; }
.capture-options { display: grid; grid-template-columns: repeat(3, 1fr); }
.capture-options label { display: flex; align-items: center; flex-direction: column; gap: 5px; padding: 8px; color: var(--blue); border-right: 1px solid var(--line); cursor: pointer; }
.capture-options label:nth-child(2) { color: var(--lavender); }
.capture-options label:nth-child(3) { color: var(--green); border-right: 0; }
.capture-options i { font-size: 32px; }
.upload-status { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--green); }
.centered { text-align: center; }
.allowance-summary { padding: 26px; border-radius: var(--radius-lg); color: #245437; background: var(--green-soft); text-align: center; }
.allowance-summary h2 { margin: 4px 0; color: var(--green); font-size: 3rem; }
.summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 22px; }
.summary-grid div { display: grid; padding: 12px; border-radius: 13px; background: rgba(255,255,255,.65); }
.profile-card { display: grid; justify-items: center; gap: 8px; text-align: center; }
.positive { color: var(--green); font-weight: 800; }
.negative { color: var(--coral-dark); font-weight: 800; }
.empty-state { display: grid; justify-items: center; align-content: center; min-height: 220px; padding: 28px; color: var(--muted); text-align: center; }
.empty-state.compact { min-height: 110px; }
.empty-state > i { color: var(--lavender); font-size: 52px; }
.empty-state h1, .empty-state h2, .empty-state h3 { margin: 8px 0 2px; color: var(--ink); }

@media (min-width: 900px) {
    .app-body { padding: 24px; }
    .app-shell { min-height: calc(100dvh - 48px); overflow: hidden; border: 1px solid var(--line); border-radius: 30px; box-shadow: var(--shadow); }
    .app-shell--child { max-width: 620px; }
    .bottom-nav { bottom: 24px; border-radius: 22px 22px 30px 30px; }
}

@media (max-width: 680px) {
    .guest-body { display: block; padding: 0; }
    .guest-shell { width: 100%; }
    .auth-card { min-height: 100dvh; border: 0; border-radius: 0; padding: 26px 20px; box-shadow: none; }
    .app-content { padding: 18px 16px 112px; }
    .app-toolbar { padding-inline: 16px; }
    .hero { min-height: 116px; margin: -18px -16px 18px; padding: 26px 18px 20px; border-radius: 0 0 28px 28px; }
    .hero h1 { font-size: 2rem; }
    .hero--parent .eyebrow { display: none; }
    .hero-decoration { font-size: 48px; }
    .family-avatar { width: 62px; height: 62px; }
    .review-banner { grid-template-columns: auto 1fr; gap: 12px; padding: 14px; }
    .review-banner .button { grid-column: 1 / -1; width: 100%; }
    .child-grid, .two-column, .review-layout, .approval-grid, .cycle-grid, .control-grid { grid-template-columns: 1fr; }
    .task-row { grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; }
    .task-time { display: none; }
    .form-grid { grid-template-columns: 1fr; }
    .header-actions { width: 100%; flex-direction: column-reverse; }
    .header-actions .button { width: 100%; }
    .financial-rule-card { grid-template-columns: 1fr; align-items: stretch; }
    .filter-panel { grid-template-columns: 1fr 1fr; }
    .filter-panel .button { grid-column: 1 / -1; }
    .inline-form { grid-template-columns: 1fr; }
    .field--wide, .form-actions { grid-column: auto; }
    .weekday-picker { grid-template-columns: repeat(4, 1fr); }
    .page-header { align-items: flex-start; }
    .page-header--tasks { flex-direction: column; }
    .page-header .button { padding-inline: 14px; }
    .page-header--focused { align-items: center; }
    .page-header--focused > h1 { font-size: 1.45rem; }
    .kpi { min-height: 94px; padding: 12px; }
    .kpi { gap: 8px; }
    .kpi .icon-circle { width: 38px; height: 38px; font-size: 21px; }
    .kpi div > span { font-size: .77rem; }
    .kpi strong { font-size: 1.04rem; white-space: nowrap; }
    .progress-hero { grid-template-columns: auto 1fr; gap: 12px; padding: 15px; }
    .progress-ring { width: 72px; height: 72px; border-width: 8px; }
    .progress-hero h2 { font-size: 1.18rem; }
    .progress-hero > i { display: none; }
    .timeline-row { grid-template-columns: 30px 44px minmax(0, 1fr); gap: 9px; }
    .timeline-row .status { grid-column: 3; justify-self: start; margin-top: -14px; }
    .task-title-row { align-items: flex-start; gap: 14px; }
    .icon-circle--xl { width: 72px; height: 72px; font-size: 38px; }
    .task-title-row h2 { font-size: 1.5rem; }
    .task-meta { align-items: flex-start; flex-direction: column; gap: 6px; }
    .proof-task { grid-template-columns: auto 1fr; }
    .proof-task > span:last-child { grid-column: 2; }
    .summary-grid { grid-template-columns: 1fr; }
    .payment-form { grid-template-columns: 1fr; }
    .bottom-nav a { font-size: .7rem; }
    .bottom-nav--parent span { display: inline; font-size: .62rem; }
    .bottom-nav--parent i { font-size: 24px; }
    .bottom-nav a { gap: 1px; }
    .bottom-nav a.active i { width: 34px; height: 34px; }
    .member-row--actions { align-items: flex-start; flex-wrap: wrap; }
    .member-row--actions > div.row-actions { width: 100%; justify-content: flex-end; }
    .ranking-row { grid-template-columns: 34px auto minmax(0,1fr); }
    .game-points { grid-column: 3; }
    .badge-grid { grid-template-columns: 1fr; }
    .notification-device-card { grid-template-columns: 1fr; }
    .notification-device-card .form-note { grid-column: auto; }
    .app-check-list { grid-template-columns:1fr; }
    .policy-row { grid-template-columns:auto 1fr; }
    .policy-row .status,.policy-row form { grid-column:2; justify-self:start; }
}

@media (prefers-reduced-motion: no-preference) {
    .button, .task-row, .approval-card, .timeline-row { transition: transform .16s ease, background-color .16s ease; }
    .button:active, .task-row:active, .approval-card:active, .timeline-row:active { transform: scale(.985); }
}