:root {
    --ink: #201936;
    --ink-soft: #665d7a;
    --paper: #ffffff;
    --cream: #fff9ea;
    --cream-deep: #f7e9c5;
    --purple: #5c184a;
    --purple-dark: #3b082f;
    --pink: #a31373;
    --coral: #f04f62;
    --yellow: #ffcc45;
    --mint: #9ee4c7;
    --blue: #73c9ed;
    --line: 3px solid var(--ink);
    --shadow-sm: 4px 4px 0 var(--ink);
    --shadow-md: 7px 7px 0 var(--ink);
    --page-max: 1440px;
}

*, *::before, *::after { box-sizing: border-box; border-radius: 0 !important; }
html { min-width: 320px; background: var(--cream); scroll-behavior: smooth; }
body { min-height: 100vh; margin: 0; overflow-x: hidden; background: var(--cream); color: var(--ink); font-family: Inter, ui-rounded, "Arial Rounded MT Bold", system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button, label, [role="button"] { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
:where(a, button, input, select, textarea, [tabindex]):focus-visible { outline: 3px solid var(--purple) !important; outline-offset: 3px; }
h1:focus { outline: none; }

.skip-link { position: fixed; z-index: 2000; top: .75rem; left: .75rem; padding: .7rem 1rem; border: var(--line); background: var(--yellow); color: var(--ink); font-weight: 900; box-shadow: var(--shadow-sm); transform: translateY(-180%); transition: transform 140ms ease; }
.skip-link:focus { transform: translateY(0); }
.valid.modified:not([type=checkbox]) { outline: 3px solid #168a66; }
.invalid { outline: 3px solid #c7354a; }
.validation-message { color: #a71f35; font-weight: 800; }
.blazor-error-boundary { border: var(--line); background: #c7354a; padding: 1rem; color: white; font-weight: 800; }
.blazor-error-boundary::after { content: "Something went wrong. Try refreshing the page."; }

.app-shell { min-height: 100vh; background-color: var(--cream); background-image: linear-gradient(rgba(92, 24, 74, .055) 2px, transparent 2px), linear-gradient(90deg, rgba(92, 24, 74, .055) 2px, transparent 2px); background-size: 34px 34px; }
.app-shell .mud-container-maxwidth-false { width: min(100%, var(--page-max)); margin-inline: auto; }

/* Shared square, cartoon-like Material treatment. */
.mud-paper { border: 2px solid var(--ink); box-shadow: var(--shadow-sm); }
.mud-button-root { min-height: 42px; border: 2px solid var(--ink) !important; font-weight: 900 !important; letter-spacing: .01em; box-shadow: 3px 3px 0 var(--ink); transition: transform 120ms ease, box-shadow 120ms ease; }
.mud-button-root:hover:not(:disabled) { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--ink); }
.mud-button-root:active:not(:disabled) { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.mud-input-outlined-border { border-width: 2px !important; border-color: #827795 !important; }
.mud-input-control:focus-within .mud-input-outlined-border { border-color: var(--purple) !important; }
.mud-tabs-tabbar { border-bottom: 3px solid var(--ink); }
.mud-tab { min-height: 50px; font-weight: 900 !important; text-transform: none !important; }
.mud-tab.mud-tab-active { background: var(--yellow); color: var(--ink) !important; }
.mud-tabs-indicator { height: 4px !important; background: var(--ink) !important; }
.mud-alert { border: 2px solid currentColor; font-weight: 700; }

.hero { border: var(--line); border-top: 0; background: linear-gradient(120deg, var(--purple-dark), var(--purple) 54%, var(--pink)); color: white; box-shadow: 0 6px 0 var(--ink); }
.brand-hero { display: flex; align-items: center; gap: 1.5rem; }
.kid-hero { display: flex; align-items: center; gap: 1.25rem; }
.hero-copy { flex: 1; min-width: 0; }
.hero-logo-plate { flex: 0 0 auto; width: 190px; padding: .45rem; border: var(--line); background: #fff; box-shadow: var(--shadow-sm); }
.kid-roster { display: flex; gap: .75rem; flex-wrap: wrap; }
.kid-chip { display: grid; gap: .35rem; padding: .65rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); cursor: pointer; font-weight: 900; text-align: left; box-shadow: 3px 3px 0 #b7aac4; }
.kid-chip.selected { background: var(--yellow); box-shadow: var(--shadow-sm); }
.avatar, .chore-icon, .icon-placeholder, .generated-avatar-preview { display: inline-grid; place-items: center; width: 128px; height: 128px; min-width: 128px; border: 2px solid var(--ink); object-fit: cover; background: var(--cream-deep); font-size: 3rem; vertical-align: middle; }
.kid-chore-icon { display:inline-grid; flex:0 0 3.4rem; width:3.4rem; height:3.4rem; min-width:3.4rem; max-width:3.4rem; max-height:3.4rem; place-items:center; overflow:hidden; border:2px solid var(--ink); object-fit:cover; background:var(--cream-deep); font-size:1.75rem; vertical-align:middle; }
.image-state--generating::before { width:2.25rem; height:2.25rem; border:.32rem solid rgba(92,24,74,.24); border-top-color:var(--purple); border-radius:50% !important; content:""; animation:icon-spinner-turn .8s linear infinite; }
@keyframes icon-spinner-turn { to { transform:rotate(360deg); } }
.hero-avatar { margin: 0; }
.section-card { height: 100%; }
.money { color: var(--purple); font-size: clamp(2rem, 5vw, 3rem); font-weight: 950; letter-spacing: -.04em; }
.ledger { margin: 0; padding: 0; list-style: none; }
.ledger li { display: flex; justify-content: space-between; gap: 1rem; padding: .65rem 0; border-bottom: 2px dashed #cbbfd4; }
.ledger-label, .activity-row-label { display:flex; align-items:center; gap:.6rem; min-width:0; }
.adjustment-photo-field { display:grid; gap:.45rem; padding:.8rem; border:2px solid #827795; background:var(--paper); }
.adjustment-photo-field > label { font-size:.8rem; font-weight:850; }
.adjustment-photo-field input[type="file"] { width:100%; padding:.65rem; border:2px solid var(--ink); background:white; color:var(--ink); }
.adjustment-photo-field small { color:var(--ink-soft); }
.selected-photo { display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.45rem .6rem; background:var(--mint); font-weight:800; }
.selected-photo button { border:0; background:transparent; color:var(--plum); font-weight:900; text-decoration:underline; cursor:pointer; }
.activity-row-label > span:last-child { display:grid; }
.mini-chore-icon { display:inline-grid; flex:0 0 2rem; width:2rem; height:2rem; place-items:center; overflow:hidden; border:2px solid var(--ink); background:var(--cream-deep); color:var(--plum); font-weight:900; }
.mini-chore-icon img { width:100%; height:100%; object-fit:cover; }
.ledger-preview-trigger { display:inline-grid; flex:none; margin:0; padding:0; border:0; background:transparent; color:inherit; cursor:zoom-in; line-height:0; }
.ledger-preview-trigger:hover .mini-chore-icon, .ledger-preview-trigger:hover .kid-ledger-icon { box-shadow:3px 3px 0 var(--pink); transform:translate(-1px,-1px); }
.status { display: inline-block; padding: .2rem .6rem; border: 2px solid var(--ink); background: #e8e2ec; font-size: .78rem; font-weight: 900; }
.status.Submitted { background: var(--yellow); }
.status.Approved { background: var(--mint); }
.status.Rejected { background: #ffc0c8; }

/* Public login */
.login-screen, .onboarding-screen { position: relative; display: grid; min-height: 100vh; place-items: center; overflow-x: hidden; padding: clamp(1rem, 4vw, 3rem); background: radial-gradient(circle at 10% 10%, rgba(255, 204, 69, .78) 0 8rem, transparent 8.1rem), radial-gradient(circle at 92% 88%, rgba(115, 201, 237, .55) 0 11rem, transparent 11.1rem), var(--cream); }
.login-stage, .onboarding-stage { position: relative; z-index: 1; display: grid; width: min(100%, 1120px); grid-template-columns: minmax(0, .86fr) minmax(460px, 1.14fr); border: var(--line); background: var(--paper); box-shadow: 10px 10px 0 var(--ink); }
.login-brand-panel, .onboarding-intro { display: flex; min-width: 0; flex-direction: column; justify-content: center; padding: clamp(2rem, 5vw, 4rem); border-right: var(--line); background: linear-gradient(150deg, #fff0ae, var(--yellow)); }
.brand-sticker, .section-kicker { align-self: flex-start; padding: .35rem .65rem; border: 2px solid var(--ink); background: var(--coral); color: white; font-size: .76rem; font-weight: 950; letter-spacing: .08em; text-transform: uppercase; box-shadow: 3px 3px 0 var(--ink); }
.login-heading, .onboarding-intro h1 { max-width: 12ch; margin: 1.5rem 0 .5rem; font-size: clamp(2.2rem, 5vw, 4.25rem); font-weight: 950; letter-spacing: -.055em; line-height: .96; }
.login-tagline, .onboarding-intro p { max-width: 35rem; color: var(--ink); font-size: 1.1rem; line-height: 1.55; text-align: left; }
.login-perks { display: flex; flex-wrap: wrap; gap: .55rem; margin-top: 1rem; }
.login-perks span { padding: .35rem .55rem; border: 2px solid var(--ink); background: white; font-size: .8rem; font-weight: 900; }
.login-paper, .onboarding-form { width: 100%; border: 0; box-shadow: none; }
.auth-heading { display: grid; gap: .8rem; margin-bottom: 1rem; }
.auth-heading .section-kicker { background: var(--purple); }
.login-help { color: var(--ink-soft); font-weight: 650; }
.auth-mode-tabs { position:relative; display:grid; grid-template-columns:1fr 1fr; width:100%; }
.auth-mode-control { position:absolute; width:1px; height:1px; opacity:0; }
.auth-mode-tab { display:grid; min-height:50px; place-items:center; border-bottom:3px solid var(--ink); background:white; color:var(--ink); cursor:pointer; font-weight:900; }
.auth-mode-tab + .auth-mode-control + .auth-mode-tab { border-left:2px solid var(--ink); }
.auth-mode-control:focus-visible + .auth-mode-tab { outline:3px solid var(--purple); outline-offset:-3px; }
.auth-mode-control:checked + .auth-mode-tab { background:var(--yellow); }
.auth-mode-panel { display:none; grid-column:1 / -1; padding-top:1rem; }
#child-login-mode:checked ~ .child-login-panel, #parent-login-mode:checked ~ .parent-login-panel { display:block; }
.login-form { display: grid; gap: 1rem; width: 100%; max-width: 28rem; margin-inline: auto; padding-block: 1rem; }
.app-logo { display: block; width: 100%; height: auto; object-fit: contain; }
.app-logo--login { max-width: 420px; margin: 1.5rem auto 0; filter: drop-shadow(3px 3px 0 rgba(32, 25, 54, .22)); }
.app-logo--welcome { max-width: 330px; margin: 1.5rem 0 .5rem; }
.avatar-roster { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 1rem; }
.avatar-login-card { display: grid; min-width: 0; justify-items: center; gap: .75rem; padding: 1rem; border: 2px solid var(--ink); background: #fffdf7; text-align: center; box-shadow: 3px 3px 0 #c6b8d2; }
.avatar-login-card:nth-child(3n + 2) { background: #f1ebff; }
.avatar-login-card:nth-child(3n + 3) { background: #e7f8f2; }
.avatar-login-card .pin-field { min-width: 0; }
.avatar-login-card .pin-entry { display:grid; width:100%; grid-template-columns:repeat(4,minmax(0,2.55rem)); justify-content:center; gap:clamp(.25rem,1vw,.55rem); }
.avatar-login-card .pin-digit-input { width:100%; min-width:0; max-width:2.55rem; height:auto; aspect-ratio:1; }
.login-submit-button { width:100%; min-height:46px; padding:.65rem .9rem; border:2px solid var(--ink); appearance:none; -webkit-appearance:none; background:var(--purple); color:white; cursor:pointer; font-weight:900; letter-spacing:.01em; text-transform:uppercase; box-shadow:3px 3px 0 var(--ink); }
.login-submit-button--child { background:var(--pink); }
.login-submit-button:active { transform:translate(1px,1px); box-shadow:1px 1px 0 var(--ink); }
.plain-input-label { display: grid; width: 100%; gap: .4rem; color: var(--ink); font-weight: 850; text-align: left; }
.plain-input { width: 100%; min-height: 46px; padding: .7rem .8rem; border: 2px solid var(--ink); background: white; color: var(--ink); }
.plain-input:focus { border-color: var(--purple); }
.confetti { position: absolute; width: 52px; height: 52px; border: var(--line); background: var(--coral); transform: rotate(13deg); }
.confetti-one { top: 7%; right: 5%; }
.confetti-two { bottom: 8%; left: 4%; width: 38px; height: 76px; background: var(--mint); transform: rotate(-17deg); }

/* First-child onboarding */
.onboarding-stage { grid-template-columns: minmax(320px, .8fr) minmax(500px, 1.2fr); }
.onboarding-intro { background: linear-gradient(150deg, #dff7ed, var(--mint)); }
.setup-checklist { display: grid; gap: .75rem; margin: 1.25rem 0 0; padding: 0; list-style: none; counter-reset: setup; }
.setup-checklist li { display: grid; grid-template-columns: 2rem 1fr; align-items: center; gap: .65rem; font-weight: 850; counter-increment: setup; }
.setup-checklist li::before { content: counter(setup); display: grid; width: 2rem; height: 2rem; place-items: center; border: 2px solid var(--ink); background: white; box-shadow: 2px 2px 0 var(--ink); }
.onboarding-form { align-self: center; }
.onboarding-money-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.invalid-login { display: grid; gap: 1rem; }
.utility-page { display: grid; min-height: 100vh; place-items: center; padding: 2rem; }
.utility-card { width: min(100%, 680px); padding: 2rem; border: var(--line); background: #fff; box-shadow: var(--shadow-md); }
.utility-link { display: inline-block; margin-top: 1rem; padding: .7rem 1rem; border: 2px solid var(--ink); background: var(--purple); color: #fff; font-weight: 900; text-decoration: none; box-shadow: var(--shadow-sm); }

/* Existing authenticated components */
.avatar-generator { display: grid; grid-template-columns: 128px 1fr; align-items: center; gap: 1rem; margin: .75rem 0; }
.avatar-generator-actions { display: flex; align-items: flex-start; flex-direction: column; gap: .5rem; }
.avatar-generation-progress { display: flex; align-items: center; gap: .6rem; margin-top: .5rem; }
.avatar-empty { border: 2px dashed var(--purple); color: var(--purple); }
.split-row { display: grid; grid-template-columns: minmax(7rem, 1fr) 3fr 3rem; align-items: center; gap: .5rem; }
.template-row { display: flex; align-items: center; gap: .75rem; padding: .75rem 0; border-bottom: 2px dashed #cbbfd4; }
.template-row > span { flex: 1; }
.template-row > .icon-placeholder { flex: 0 0 128px; }
.chore-tile { min-height: 15rem; }
.claim-card { display: flex; min-height: 14rem; flex-direction: column; }
.claim-button-row { display: flex; justify-content: flex-end; margin-top: auto; padding-top: 1rem; }
.claim-button { min-width: 7rem; }
.sticky-roster { position: sticky; top: 1rem; }
.activity-row { display: flex; justify-content: space-between; align-items: center; gap: .5rem; padding: .5rem 0; border-bottom: 2px dashed #ded5e5; }
.activity-open-button { appearance:none; -webkit-appearance:none; cursor:pointer; box-shadow:2px 2px 0 var(--ink); }
.activity-open-button:hover { background:var(--yellow); }
.quest-toggle .mud-switch-span {
    position: relative;
    width: 46px;
    height: 26px;
    padding: 0;
    overflow: hidden;
    border: 2px solid var(--ink);
    background: #f3e7f0 !important;
}
.quest-toggle .mud-switch-span > .mud-switch-track {
    position: absolute;
    z-index: 0;
    inset: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0;
    opacity: 1 !important;
    background: #f3e7f0 !important;
    transition: background-color 140ms ease-out;
}
.quest-toggle .mud-switch-base.mud-switch-base-medium {
    position: absolute;
    z-index: 1;
    top: 9px !important;
    left: 3px !important;
    width: 16px !important;
    height: 16px !important;
    min-height: 0;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none;
    transform: translate3d(0, 0, 0);
    transition: transform 140ms cubic-bezier(.2, .8, .2, 1);
    will-change: transform;
}
.quest-toggle .mud-switch-base.mud-checked {
    transform: translate3d(32px, 0, 0);
}
.quest-toggle .mud-switch-base.mud-checked + .mud-switch-track {
    opacity: 1 !important;
    background: #e8a8cf !important;
}
.quest-toggle .mud-switch-button .mud-switch-thumb-medium {
    width: 16px;
    height: 16px;
    border: 2px solid var(--ink);
    border-radius: 0;
    background: var(--purple) !important;
    box-shadow: none;
}
.quest-toggle .mud-switch-base.mud-checked .mud-switch-thumb-medium {
    background: var(--pink) !important;
}
.quest-toggle .mud-switch-base:focus-within,
.quest-toggle .mud-switch-input:focus,
.quest-toggle .mud-switch-input:focus-visible {
    outline: none !important;
}
.quest-toggle.mud-disabled .mud-switch-span {
    opacity: .55;
}
.create-quest-modal {
    width: min(calc(100vw - 40px), 486px);
}
.logout-form { display: flex; width: min(100%, var(--page-max)); justify-content: flex-end; margin: 0 auto; padding: 0 2rem 2rem; }
.logout-button { padding: .7rem 1rem; border: 2px solid var(--ink); background: var(--ink); color: white; cursor: pointer; font-weight: 900; box-shadow: 4px 4px 0 var(--coral); }
.logout-button:hover { background: var(--purple-dark); }
.page-action-progress { position: fixed; z-index: 1300; top: .75rem; left: 50%; width: min(32rem, calc(100vw - 2rem)); border: var(--line); background: #fff; color: var(--ink); box-shadow: var(--shadow-sm); transform: translateX(-50%); }
.page-action-progress > span { display: block; padding: .35rem .65rem; font-size: .78rem; font-weight: 900; text-align: center; }
.pin-field { display: grid; width: 100%; gap: .4rem; margin: .65rem 0; }
.pin-label { color: var(--ink); font-weight: 850; }
.pin-entry { position: relative; display: flex; width: max-content; max-width: 100%; gap: .55rem; }
.pin-digit-input { width:2.55rem; height:2.55rem; min-width:0; padding:0; border:2px solid var(--ink); appearance:none; -webkit-appearance:none; background:#fff; color:var(--purple-dark); caret-color:var(--purple-dark); font-family:Arial, sans-serif; font-size:1rem; font-weight:900; line-height:2.35rem; text-align:center; box-shadow:2px 2px 0 #c6b8d2; }
.pin-digit-input:focus { border-color:var(--purple); outline:3px solid var(--purple); outline-offset:1px; background:#f8eef6; }

@media (max-width: 860px) {
    .login-stage, .onboarding-stage { max-width: 680px; grid-template-columns: 1fr; }
    .login-brand-panel, .onboarding-intro { padding: 2rem; border-right: 0; border-bottom: var(--line); }
    .login-heading, .onboarding-intro h1 { max-width: none; }
    .app-logo--login { max-width: 340px; margin-inline: 0; }
    .onboarding-money-grid { grid-template-columns: 1fr; gap: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .quest-toggle .mud-switch-base,
    .quest-toggle .mud-switch-track {
        transition: none;
    }
}

@media (max-width: 700px) {
    .login-screen, .onboarding-screen { display: block; min-height: 100vh; padding: .75rem; }
    .login-stage, .onboarding-stage { box-shadow: 5px 5px 0 var(--ink); }
    .login-brand-panel, .onboarding-intro, .login-paper, .onboarding-form { padding: 1.25rem !important; }
    .login-heading { font-size: 2.4rem; }
    .app-logo--login { max-width: 260px; margin-top: 1rem; }
    .login-perks { display: none; }
    .avatar-roster { grid-template-columns: 1fr; }
    .avatar-login-card { grid-template-columns: auto 1fr; justify-items: start; text-align: left; }
    .avatar-login-card .avatar { grid-row: 1 / 4; width: 92px; height: 92px; min-width: 92px; }
    .avatar-login-card .pin-field, .avatar-login-card .login-submit-button { grid-column: 2; }
    .split-row { grid-template-columns: 1fr 3rem; }
    .split-row input { grid-column: 1 / -1; grid-row: 2; }
    .sticky-roster { position: static; }
    .avatar-generator { grid-template-columns: 1fr; }
    .brand-hero, .kid-hero { align-items: flex-start; flex-direction: column; }
    .hero-logo-plate { order: -1; width: 150px; }
    .logout-form { padding: 0 1rem 1.5rem; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
    .image-state--generating::before { animation:icon-spinner-turn 1.6s steps(8) infinite !important; }
}

@media (hover:none), (pointer:coarse) {
    .mud-button-root:hover:not(:disabled), .mud-button-root:active:not(:disabled), .login-submit-button:active { transform:none; box-shadow:3px 3px 0 var(--ink); }
}