html,body,#root{margin:0;padding:0}:root{--bg:#fff8ef;--bg-soft:#fff2dd;--panel:#fffdf9;--text:#2f1e1b;--muted:#6f5b56;--line:#e4d0c4;--accent:#ff5b2e;--accent-2:#ffd84a;--shadow:0 10px 30px #55170321;--radius:14px}:root[data-theme=dark]{--bg:#0e0a10;--bg-soft:#1a1120;--panel:#17101a;--text:#f6e7dc;--muted:#c5b2a6;--line:#3a2b40;--accent:#ff7a3d;--accent-2:#ffd84a;--shadow:0 10px 30px #00000073}*{box-sizing:border-box}body{background:radial-gradient(circle at top right, var(--bg-soft), var(--bg));color:var(--text);margin:0;font-family:Avenir Next,Trebuchet MS,sans-serif}#root{min-height:100vh}.app-shell{width:min(1200px,100% - 1.5rem);margin:1rem auto 2rem}.hero{border:1px solid var(--line);background:linear-gradient(125deg, var(--panel), var(--bg-soft));border-radius:var(--radius);box-shadow:var(--shadow);justify-content:space-between;align-items:flex-start;gap:1rem;padding:1rem;display:flex}.eyebrow{text-transform:uppercase;letter-spacing:.12em;color:var(--muted);margin:0;font-size:.78rem}h1{margin:.3rem 0;font-size:clamp(1.4rem,3vw,2rem)}.sub{color:var(--muted);margin:0}.sync-error{color:#b42318;margin:.5rem 0 0;font-weight:600}.toolbar{gap:.5rem;display:flex}.toolbar .active{background:linear-gradient(90deg, var(--accent), #ff9f3f);color:#1b0e00;border-color:#0000;font-weight:700}.tabs{flex-wrap:wrap;gap:.5rem;margin:1rem 0;display:flex}.tabs button,button{border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer;border-radius:999px;padding:.48rem .8rem}.tabs button.active{background:linear-gradient(90deg, var(--accent), #ff9f3f);color:#1b0e00;border-color:#0000;font-weight:700}.grid-2{grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem;display:grid}.card{border:1px solid var(--line);border-radius:var(--radius);background:var(--panel);box-shadow:var(--shadow);padding:.9rem}.full{grid-column:1/-1}h3,h4{margin:0 0 .6rem}p{margin:.4rem 0}ul{margin:.5rem 0 0;padding-left:1rem}li{margin:.25rem 0}form{gap:.5rem;display:grid}input,select{border:1px solid var(--line);background:var(--bg);width:100%;color:var(--text);border-radius:10px;padding:.5rem .6rem}.assign-row{grid-template-columns:repeat(7,minmax(0,1fr));gap:.45rem;margin-top:.6rem;display:grid}.settings-row{grid-template-columns:minmax(220px,1fr) minmax(220px,1fr) auto;align-items:center;gap:.45rem;margin-top:.6rem;display:grid}label{color:var(--muted);font-size:.9rem}.month{border-top:1px dashed var(--line);margin-top:.55rem;padding-top:.55rem}.login{max-width:420px;margin:1rem auto}.row-head{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.delete-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.family-list{gap:.45rem;margin:.5rem 0 0;padding:0;list-style:none;display:grid}.family-row{border:1px solid var(--line);border-radius:10px;justify-content:space-between;align-items:center;gap:.6rem;padding:.45rem .6rem;display:flex}.icon-actions{gap:.35rem;display:flex}.icon-actions button{border-radius:10px;min-width:2rem;padding:.32rem .5rem}.card-header-toggle{cursor:pointer;text-align:left;background:0 0;border:0;justify-content:space-between;align-items:center;width:100%;padding:0;display:flex}.card-header-toggle h3{margin:0}.toggle-row{border:1px solid var(--line);background:var(--bg);cursor:pointer;border-radius:12px;justify-content:space-between;align-items:center;gap:.75rem;padding:.55rem .7rem;display:flex}.toggle-row span{color:var(--text);font-weight:600}.toggle-control{align-items:center;width:52px;height:30px;display:inline-flex;position:relative}.toggle-control input{opacity:0;cursor:pointer;width:100%;height:100%;margin:0;position:absolute}.toggle-slider{border:1px solid var(--line);background:#c8b7ac;border-radius:999px;width:52px;height:30px;transition:background .2s;position:relative}.toggle-slider:after{content:"";background:#fff;border-radius:50%;width:22px;height:22px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #00000040}.toggle-control input:checked+.toggle-slider{background:var(--accent)}.toggle-control input:checked+.toggle-slider:after{transform:translate(22px)}@media (width<=950px){.grid-2{grid-template-columns:1fr}.hero{flex-direction:column}.assign-row{grid-template-columns:repeat(2,minmax(0,1fr))}.settings-row,.delete-grid{grid-template-columns:1fr}}