:root{
  --bg:#f7f8fb; --bg-alt:#ffffff; --text:#1a1d23; --text-muted:#5b6472;
  --primary:#4f46e5; --primary-dark:#4338ca; --accent:#0ea5a4;
  --border:#e2e5eb; --card-shadow:0 2px 8px rgba(20,20,43,0.06);
  --radius:14px; --success:#16a34a; --danger:#dc2626; --warn:#d97706;
  --easy:#16a34a; --medium:#d97706; --hard:#dc2626;
}
[data-theme="dark"]{
  --bg:#0f1117; --bg-alt:#171a22; --text:#e7e9ee; --text-muted:#9aa3b2;
  --primary:#818cf8; --primary-dark:#6366f1; --accent:#2dd4bf;
  --border:#2a2e3a; --card-shadow:0 2px 10px rgba(0,0,0,0.4);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--bg); color:var(--text); line-height:1.6; transition:background .2s,color .2s;
}
a{color:var(--primary); text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.container{max-width:1160px; margin:0 auto; padding:0 20px}
header.site-header{
  position:sticky; top:0; z-index:50; background:var(--bg-alt); border-bottom:1px solid var(--border);
  backdrop-filter:blur(6px);
}
.nav-wrap{display:flex; align-items:center; justify-content:space-between; padding:14px 0}
.brand{font-weight:800; font-size:1.25rem; display:flex; align-items:center; gap:8px}
.brand .logo-dot{width:10px;height:10px;border-radius:50%;background:var(--primary);display:inline-block}
nav.main-nav{display:flex; gap:18px; align-items:center}
nav.main-nav a{color:var(--text); font-weight:500}
.theme-toggle, .btn-icon{
  background:var(--bg); border:1px solid var(--border); border-radius:10px; padding:8px 10px; cursor:pointer;
  color:var(--text); font-size:1rem;
}
.theme-toggle:hover{border-color:var(--primary)}
.hero{padding:64px 0 48px; text-align:center}
.hero h1{font-size:2.4rem; margin:0 0 12px; font-weight:800; letter-spacing:-0.02em}
.hero p.lead{font-size:1.15rem; color:var(--text-muted); max-width:680px; margin:0 auto 28px}
.pill-row{display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin-bottom:28px}
.pill{background:var(--bg-alt); border:1px solid var(--border); border-radius:999px; padding:8px 16px; font-size:.9rem; color:var(--text-muted)}
.search-bar{max-width:520px; margin:0 auto; display:flex; gap:8px}
.search-bar input{
  flex:1; padding:14px 16px; border-radius:12px; border:1px solid var(--border); background:var(--bg-alt);
  color:var(--text); font-size:1rem;
}
.search-bar input:focus{outline:2px solid var(--primary); outline-offset:1px}
section{padding:48px 0}
section.alt{background:var(--bg-alt); border-top:1px solid var(--border); border-bottom:1px solid var(--border)}
h2.section-title{font-size:1.7rem; margin-bottom:6px; text-align:center; font-weight:800}
p.section-sub{text-align:center; color:var(--text-muted); max-width:600px; margin:0 auto 32px}
.grid{display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.card{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:24px;
  box-shadow:var(--card-shadow); display:flex; flex-direction:column; gap:10px; transition:transform .15s,box-shadow .15s;
}
.card:hover{transform:translateY(-3px); box-shadow:0 8px 22px rgba(20,20,43,0.1)}
.card h3{margin:0; font-size:1.2rem}
.card .tagline{color:var(--text-muted); font-size:.95rem; flex-grow:1}
.badge-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
.badge{font-size:.75rem; font-weight:700; padding:4px 10px; border-radius:999px; text-transform:uppercase; letter-spacing:.02em}
.badge.easy{background:rgba(22,163,74,.12); color:var(--easy)}
.badge.medium{background:rgba(217,119,6,.12); color:var(--medium)}
.badge.hard{background:rgba(220,38,38,.12); color:var(--hard)}
.badge.score{background:rgba(79,70,229,.12); color:var(--primary)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:12px 20px; border-radius:10px;
  font-weight:700; cursor:pointer; border:none; font-size:.95rem; transition:filter .15s, transform .1s;
}
.btn:active{transform:scale(.98)}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{filter:brightness(1.08)}
.btn-secondary{background:transparent; color:var(--primary); border:1.5px solid var(--primary)}
.btn-secondary:hover{background:rgba(79,70,229,.08)}
.btn-outline{background:transparent; border:1px solid var(--border); color:var(--text)}
.btn-block{width:100%}
.btn-sm{padding:8px 14px; font-size:.85rem}
footer.site-footer{background:var(--bg-alt); border-top:1px solid var(--border); padding:40px 0 24px; margin-top:20px}
.footer-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px}
.footer-grid h4{margin:0 0 10px; font-size:.9rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted)}
.footer-grid ul{list-style:none; padding:0; margin:0}
.footer-grid li{margin-bottom:8px}
.footer-bottom{text-align:center; margin-top:30px; color:var(--text-muted); font-size:.85rem}
.faq-item{border-bottom:1px solid var(--border); padding:16px 0}
.faq-item summary{cursor:pointer; font-weight:600; font-size:1.02rem}
.faq-item p{margin:10px 0 0; color:var(--text-muted)}
.trust-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:20px}
.trust-card{text-align:center; padding:24px; background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius)}
.trust-card .icon{font-size:1.8rem}
.breadcrumb{font-size:.85rem; color:var(--text-muted); margin-bottom:18px}
.tool-hero{padding:52px 0 30px; text-align:center; border-bottom:1px solid var(--border)}
.tool-hero h1{font-size:2rem; margin-bottom:8px}
.tool-hero .promise{font-size:1.1rem; color:var(--text-muted); max-width:600px; margin:0 auto 24px}
.cta-row{display:flex; gap:12px; justify-content:center; flex-wrap:wrap}
.tool-app{
  background:var(--bg-alt); border:1px solid var(--border); border-radius:var(--radius); padding:28px;
  box-shadow:var(--card-shadow); margin:32px 0;
}
.form-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-weight:600; font-size:.9rem}
.field .hint{font-size:.8rem; color:var(--text-muted)}
.field input, .field select{
  padding:10px 12px; border-radius:8px; border:1px solid var(--border); background:var(--bg); color:var(--text); font-size:1rem;
}
.field input:focus, .field select:focus{outline:2px solid var(--primary); outline-offset:1px}
.error-msg{color:var(--danger); font-size:.85rem; min-height:1em}
.child-row{display:grid; grid-template-columns:1fr 90px 90px auto; gap:10px; align-items:end; padding:12px; border:1px solid var(--border); border-radius:10px; margin-bottom:10px; background:var(--bg)}
.chore-row{display:grid; grid-template-columns:1fr 100px auto; gap:10px; align-items:end; padding:10px; border:1px solid var(--border); border-radius:10px; margin-bottom:8px; background:var(--bg)}
.btn-remove{background:transparent; border:1px solid var(--border); color:var(--danger); border-radius:8px; padding:8px 10px; cursor:pointer}
.toolbar{display:flex; gap:10px; flex-wrap:wrap; margin:18px 0}
.output-box{
  background:var(--bg); border:1px dashed var(--border); border-radius:12px; padding:20px; margin-top:20px; min-height:80px;
}
.output-box.empty{color:var(--text-muted); text-align:center; font-style:italic}
.schedule-table{width:100%; border-collapse:collapse; margin-top:14px}
.schedule-table th, .schedule-table td{border:1px solid var(--border); padding:8px 10px; text-align:left; font-size:.9rem}
.schedule-table th{background:var(--bg-alt)}
.chore-table{width:100%; border-collapse:collapse; margin-top:14px}
.chore-table th, .chore-table td{border:1px solid var(--border); padding:8px 10px; text-align:left; font-size:.9rem}
.chore-table th{background:var(--bg-alt)}
.total-line{font-size:1.3rem; font-weight:800; margin-top:14px; color:var(--primary)}
.toast{
  position:fixed; bottom:24px; right:24px; background:var(--text); color:var(--bg); padding:12px 18px; border-radius:10px;
  box-shadow:0 4px 14px rgba(0,0,0,.2); opacity:0; transform:translateY(10px); transition:all .25s; z-index:100; font-size:.9rem;
}
.toast.show{opacity:1; transform:translateY(0)}
.two-col{display:grid; grid-template-columns:1fr 1fr; gap:32px}
@media(max-width:760px){
  .two-col{grid-template-columns:1fr}
  .hero h1{font-size:1.9rem}
  .tool-hero h1{font-size:1.6rem}
  .child-row{grid-template-columns:1fr; }
  .chore-row{grid-template-columns:1fr;}
  nav.main-nav{display:none}
}
.nav-toggle{display:none}
@media(max-width:760px){
  .nav-toggle{display:inline-flex}
}
.disclosure{font-size:.85rem; color:var(--text-muted); border-left:3px solid var(--primary); padding:8px 14px; background:var(--bg); border-radius:0 8px 8px 0; margin:14px 0}
.limitations{background:rgba(217,119,6,.08); border:1px solid rgba(217,119,6,.3); border-radius:10px; padding:14px 18px; font-size:.9rem}
.prev-next{display:flex; justify-content:space-between; gap:16px; margin:32px 0; flex-wrap:wrap}
.prev-next a{background:var(--bg-alt); border:1px solid var(--border); padding:12px 18px; border-radius:10px; flex:1; min-width:180px}
.related-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); margin-top:16px}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0)}
.skip-link{position:absolute; left:-9999px; top:0; background:var(--primary); color:#fff; padding:8px 14px; z-index:200}
.skip-link:focus{left:10px; top:10px}


@media print{
  header.site-header, footer.site-footer, .tool-hero .cta-row, .toolbar, #app .disclosure,
  #how-it-works, #faq, .related-grid, .prev-next, section.alt:not(#app), .tool-hero, .breadcrumb,
  #output-actions {
    display:none !important;
  }
  body{ background:#fff; color:#000; }
  .output-box{ border:none; padding:0; }
  .schedule-table, .chore-table{ font-size:12pt; }
  .schedule-table th, .chore-table th{ background:#eee !important; }
  main{ padding:0 !important; }
  section{ padding:0 !important; }
}