:root{--bg:#f3f6fb;--c:#fff;--t:#1f2937;--m:#6b7280;--a:#4f46e5;--g:#16a34a;--b:#d1d5db}
@media(prefers-color-scheme:dark){:root{--bg:#0f172a;--c:#1e293b;--t:#f1f5f9;--m:#94a3b8;--b:#475569}}
*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--t);font:16px system-ui,sans-serif}
#app{max-width:900px;margin:auto;padding:16px}header{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}
h1{margin:0;font-size:1.5rem}h2,h3{margin:.6em 0}.card{background:var(--c);border-radius:12px;padding:14px;margin:10px 0;box-shadow:0 1px 3px #0002}
button{font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--b);background:var(--c);color:var(--t);cursor:pointer}
button.p,.tab.on,.day.on{background:var(--a);color:#fff;border-color:var(--a)}button.x{color:#dc2626}
input,select{font:inherit;padding:6px;border-radius:6px;border:1px solid var(--b);background:var(--c);color:var(--t);max-width:100%}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}.big{font-size:1.5rem;padding:28px}
.row{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0}.day{flex:1;min-width:60px}.day.today{border-color:var(--g);border-width:2px}
.chore{display:flex;align-items:center;gap:14px;font-size:1.25rem;padding:14px;background:var(--c);border-radius:12px;margin:8px 0;cursor:pointer;border:2px solid transparent}
.chore.done{opacity:.55;text-decoration:line-through;border-color:var(--g)}.chore input{width:28px;height:28px}
.bar{height:12px;background:var(--b);border-radius:6px;overflow:hidden}.bar i{display:block;height:100%;background:var(--g)}
.m{color:var(--m);font-size:.9rem}table{width:100%;border-collapse:collapse}td,th{padding:4px;text-align:left}td input[type=text],td input:not([type]){width:100%}
td input[type=number]{width:75px}.lbl{display:inline-flex;gap:3px;margin-right:10px;align-items:center}
@media print{header,.tabs,.noprint{display:none}}

/* ===== fun kid theme (only when a kid is logged in) ===== */
body.kidmode{background:linear-gradient(160deg,#ffe29f,#ffa99f 55%,#ff9de2) fixed;font-family:"Chalkboard SE","Comic Sans MS","Trebuchet MS",system-ui,sans-serif;color:#2b2140}
@media(prefers-color-scheme:dark){body.kidmode{background:linear-gradient(160deg,#2b1055,#5b247a 60%,#1b4b8f) fixed;color:#fff}}
.kid h1{font-size:1.9rem;text-shadow:2px 2px 0 #fff8}.kid .card{border-radius:22px;border:3px solid #fff;background:#fffffff0;color:#2b2140}
.kid button{border-radius:14px;border:3px solid #fff;background:#fffffff0;color:#2b2140;font-weight:bold}
.hello{display:flex;align-items:center;gap:12px}.hello h2{flex:1;margin:0;font-size:1.7rem}.avatar{font-size:3.2rem;animation:bob 2s ease-in-out infinite}.stars{font-size:1.4rem;font-weight:bold;background:#fffffff0;color:#2b2140;border-radius:20px;padding:6px 14px}
.kid .day{border-radius:18px}.kid .day.on{background:#7c3aed;color:#fff;transform:scale(1.08)}.kid .day.today{border-color:#16a34a}
.kid .chore{border-radius:24px;border:4px solid #fff;background:#fffffff0;color:#2b2140;box-shadow:0 6px 0 #0002;transition:transform .15s}
.kid .chore:active{transform:scale(.97)}.kid .chore input{width:36px;height:36px;accent-color:#16a34a}.kid .m{color:#6b5b8a}
.kid .chore.done{opacity:1;text-decoration:none;background:#d9f99d;border-color:#65a30d;color:#14532d}.kid .chore.done .m{color:#365314}.kid .chore.done .emoji{animation:pop .5s}
.emoji{font-size:2.3rem}.track{position:relative;height:22px;background:#e9d5ff;border-radius:12px;margin:30px 0 8px}
.track i{display:block;height:100%;background:linear-gradient(90deg,#34d399,#facc15);border-radius:12px;transition:width .5s}.rocket{position:absolute;top:-26px;font-size:1.9rem;transform:translateX(-50%);transition:left .5s}
.confetti{position:fixed;top:-20px;width:10px;height:14px;z-index:9;pointer-events:none;animation:fall 1.7s ease-in forwards}
@keyframes bob{50%{transform:translateY(-6px) rotate(6deg)}}@keyframes pop{40%{transform:scale(1.6) rotate(-12deg)}}@keyframes fall{to{transform:translateY(105vh) rotate(540deg)}}
@media(prefers-reduced-motion:reduce){.avatar,.kid .chore.done .emoji,.confetti{animation:none!important}}

/* ===== unsaved-changes bar ===== */
#app{padding-bottom:90px}
#savebar{position:fixed;left:0;right:0;bottom:0;z-index:20;display:flex;gap:12px;align-items:center;justify-content:space-between;flex-wrap:wrap;padding:12px 16px;background:#fff7e0;color:#5c3d00;border-top:3px solid #f59e0b;box-shadow:0 -4px 12px #0003;font-weight:bold}
@media(prefers-color-scheme:dark){#savebar{background:#3b2f0a;color:#ffe9a8}}
@media print{#savebar{display:none}}

/* ===== responsive layout: fill the page, reflow on small screens ===== */
#app{max-width:1280px;padding-left:clamp(10px,3vw,32px);padding-right:clamp(10px,3vw,32px)}
#app.kid{max-width:820px}
input,select{min-width:0}
header{flex-wrap:wrap;gap:8px}
.row>input,.row>select{flex:1 1 180px}
.row>label{display:flex;flex-direction:column;gap:4px;flex:1 1 150px;font-size:.85rem;font-weight:600;color:var(--m)}
.row>label input,.row>label select{width:100%}
.row>label.lbl{flex:0 0 auto;flex-direction:row;align-items:center;font-weight:normal;color:inherit;font-size:1rem}
.row>label.lbl input{width:auto}
@media(max-width:600px){.row>label.lbl{flex:0 1 auto;max-width:100%;white-space:normal}}
.row>button{flex:0 0 auto}
table.st td:first-child{min-width:190px}
table.st td input[type=number]{width:84px}
table.st td .lbl{margin:2px 10px 2px 0;white-space:nowrap}
.tabs{gap:8px}
.tabs .tab{flex:1 1 auto}
form.card>input{margin:4px 4px 4px 0;max-width:100%}
@media(max-width:1280px){
 table.st,table.st tbody,table.st tr,table.st td{display:block;width:100%}
 table.st tr.hd{display:none}
 table.st tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 12px;border:1px solid var(--b);border-radius:12px;padding:10px;margin:10px 0}
 table.st td{display:flex;flex-direction:column;gap:3px;padding:0;min-width:0}
 table.st td::before{content:attr(data-label);font-size:.78rem;font-weight:600;color:var(--m)}
 table.st td[data-label=""]::before{display:none}
 table.st td:first-child,table.st td:nth-last-child(2){grid-column:1 / -1;min-width:0}
 table.st td input[type=number]{width:100%}
 table.st td input:not([type]){width:100%}
}
@media(max-width:600px){
 .row>input,.row>select,.row>label{flex:1 1 100%}
 .row>label.lbl{flex:0 0 auto}
 form.card input,form.card button{width:100%;margin:4px 0}
 form.card button[type=button]{width:100%}
 .chore{font-size:1.1rem;padding:12px}
 h1{font-size:1.25rem}
}
/* fine-tuning after visual check */
.row>label input,.row>label select{font-weight:normal;color:var(--t)}
table.st td input[type=number]{width:96px}
@media(max-width:1280px){
 table.st td:nth-last-child(2){flex-direction:row;flex-wrap:wrap;align-items:center}
 table.st td:nth-last-child(2)::before{flex:0 0 100%}
 table.st td:last-child button{width:auto;align-self:flex-end;padding:6px 18px}
 table.st td input[type=number]{width:100%}
}

/* Chores tab: wider page, roomy name field */
#app{max-width:1600px}
#app.kid{max-width:820px}
table.st{width:100%}
table.st td:first-child{min-width:300px;width:42%}
table.st td:first-child input{width:100%;min-width:260px;font-size:1.05rem}
@media(min-width:601px) and (max-width:1280px){
 table.st tr{grid-template-columns:repeat(4,minmax(0,1fr))}
 table.st td:first-child{min-width:0;width:100%}
 table.st td:first-child input{min-width:0}
}
@media(max-width:600px){table.st td:first-child input{min-width:0}}

/* ===== custom title + logo ===== */
header h1{display:flex;align-items:center;gap:10px}
.logo{height:44px;width:auto;max-width:180px;object-fit:contain;border-radius:8px;vertical-align:middle}
.kid .logo{height:52px}

/* Chores tab on wide screens: the chore name gets its own full-width line, other fields sit underneath */
@media(min-width:1281px){
 table.ch,table.ch tbody{display:block;width:100%}
 table.ch tr.hd{display:none}
 table.ch tr{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) minmax(0,2fr) auto;gap:8px 16px;align-items:end;border-bottom:1px solid var(--b);padding:14px 4px}
 table.ch td{display:flex;flex-direction:column;gap:3px;padding:0;min-width:0;width:auto}
 table.ch td::before{content:attr(data-label);font-size:.78rem;font-weight:600;color:var(--m)}
 table.ch td[data-label=""]::before{display:none}
 table.ch td:first-child{grid-column:1 / -1;min-width:0;width:auto}
 table.ch td:first-child input{width:100%;min-width:0;font-size:1.15rem}
 table.ch td input[type=number]{width:100%;max-width:150px}
 table.ch td:nth-last-child(2){flex-direction:row;flex-wrap:wrap;align-items:center}
 table.ch td:nth-last-child(2)::before{flex:0 0 100%}
 table.ch td:last-child{align-items:flex-end}
}

:root{--ver:'30'}

.pick{font-size:1.5rem;line-height:1;padding:6px 10px;border-radius:12px}
.pick.on{outline:3px solid #7c3aed;background:#ede9fe}
.pick[data-e=""]{font-size:1rem;padding:10px 12px}

/* money */
.neg{color:#c0392b}
.mfilters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;margin:10px 0}
.mfilters label{display:flex;flex-direction:column;gap:3px;font-size:.8rem;font-weight:600;color:var(--m)}
table.mt{width:100%;border-collapse:collapse}
table.mt th,table.mt td{padding:6px 8px;border-bottom:1px solid var(--b);text-align:left;vertical-align:middle}
table.mt td.amt,table.mt th.amt{text-align:right;white-space:nowrap}
td.amt.earn,b.earn{color:#1e8449}
td.amt.penalty,b.penalty{color:#c0392b}
table.mt tr.dim{opacity:.55}
@media(max-width:900px){
 table.mt,table.mt tbody{display:block;width:100%}
 table.mt tr.hd,table.mt thead{display:none}
 table.mt tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 12px;border-bottom:1px solid var(--b);padding:10px 2px}
 table.mt td{display:flex;flex-direction:column;border:0;padding:0;min-width:0}
 table.mt td[data-label]::before{content:attr(data-label);font-size:.72rem;font-weight:600;color:var(--m)}
 table.mt td.amt{text-align:left}
}
.money{margin-top:14px}
.money .bigmoney{font-size:2rem;font-weight:800;line-height:1.1}
table.mm{width:100%;border-collapse:collapse;margin-top:8px}
table.mm th,table.mm td{padding:5px 6px;border-bottom:1px solid var(--b);text-align:right}
table.mm th:first-child,table.mm td:first-child{text-align:left}
ul.recent{list-style:none;margin:8px 0 0;padding:0;font-size:.9rem}
ul.recent li{display:flex;justify-content:space-between;gap:8px;padding:3px 0}

.khist{margin-top:14px;border-top:1px dashed var(--b);padding-top:10px}
.khist h4{margin:0 0 8px}
ul.recent.hist li{align-items:flex-start;border-bottom:1px solid var(--b);padding:6px 0}
ul.recent.hist b.dim{opacity:.5;text-decoration:line-through}
.khist .mfilters{margin:8px 0}

.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:4px}
.chip{display:inline-block;padding:3px 10px;border-radius:999px;font-weight:700;font-size:.85rem}
.chip small{font-weight:600}
.chip.earn{background:#dcfce7;color:#166534}
.chip.pen{background:#fee2e2;color:#991b1b}
.bchip{margin-left:8px;border-radius:999px;font-weight:800}
.bchip.neg,.bigmoney.neg{color:#b91c1c}
.bigmoney small{display:block;font-size:.9rem;font-weight:600;color:var(--m)}
table.mm tr.sub td{font-size:.85rem;color:var(--m);padding-left:18px}
ul.recent li b.pay{color:#1d4ed8}
td.amt.pay{color:#1d4ed8}
.payrow{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.payrow input{width:130px}
.rpform{background:var(--b);border-radius:10px;padding:8px;margin:4px 0 8px}
/* WP edition (v30): links styled as buttons (log in, sign up, account) */
a.btn{display:inline-block;font:inherit;padding:8px 14px;border-radius:8px;border:1px solid var(--b);background:var(--c);color:var(--t);text-decoration:none;margin:4px 4px 4px 0}
a.btn.p{background:var(--a);color:#fff;border-color:var(--a)}
.kid a.btn{border-radius:14px;border:3px solid #fff;font-weight:bold}