:root{
  --bar:#0f1f3d; --ink:#0f1f3d; --ink2:#41506e; --muted:#6b7895; --paper:#f3f5f8; --card:#ffffff; --line:#e2e6ee;
  --primary:#0f1f3d; --on-primary:#ffffff; --accent:#0e7c66; --accent-soft:#e3f2ee; --gold:#c99a2e;
  --red:#b83a32; --red-soft:#f8e7e5; --nav-h:64px;
  box-sizing:border-box;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ink:#e7ecf6; --ink2:#b9c3d8; --muted:#8d99b5; --paper:#0b1426; --card:#121d33; --line:#22304d;
    --primary:#3cc4a4; --on-primary:#0b1426; --accent:#3cc4a4; --accent-soft:#123a35; --red:#e8746b; --red-soft:#3a1d1c;
  }
}
:root[data-theme="dark"]{
  --ink:#e7ecf6; --ink2:#b9c3d8; --muted:#8d99b5; --paper:#0b1426; --card:#121d33; --line:#22304d;
  --primary:#3cc4a4; --on-primary:#0b1426; --accent:#3cc4a4; --accent-soft:#123a35; --red:#e8746b; --red-soft:#3a1d1c;
}
*,*::before,*::after{box-sizing:inherit}
html{height:100%}
body{margin:0; height:100%; overflow:hidden; background:var(--paper); color:var(--ink); -webkit-text-size-adjust:100%; text-size-adjust:100%; overscroll-behavior-y:none;
  font-family:"Instrument Sans", "Segoe UI", system-ui, -apple-system, sans-serif; font-size:16px; line-height:1.5;
  font-variant-numeric:tabular-nums; -webkit-tap-highlight-color:transparent}
button,input,select,textarea{font:inherit; color:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent); outline-offset:2px}

/* header */
#app{height:100%; height:100dvh; display:flex; flex-direction:column; overflow:hidden}
.topwrap{flex:none; position:relative; z-index:20; background:var(--bar); color:#fff; padding-top:env(safe-area-inset-top,0px)}
.top{display:flex; align-items:center; justify-content:space-between; padding:10px 16px; max-width:680px; margin:0 auto; min-height:58px}
.logo{display:inline-block; font-size:28px; font-weight:700; letter-spacing:-.025em; line-height:1; color:inherit; white-space:nowrap}
.ly{display:inline-block; height:1em; width:.62em; vertical-align:-.22em; overflow:visible}
.right{display:flex; gap:8px; align-items:center; position:relative}
.iconbtn{width:42px; height:42px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:transparent; display:grid; place-items:center; color:#fff}
.avatar{width:42px; height:42px; border-radius:50%; border:0; background:#fff; color:var(--bar); font-weight:700; font-size:17px}
.menu{color:var(--ink)}
.menu{position:absolute; right:0; top:48px; background:var(--card); border:1px solid var(--line); border-radius:12px; padding:14px; min-width:210px; box-shadow:0 12px 32px -12px rgba(15,31,61,.35); display:grid; gap:4px}
.menu small{color:var(--muted)}
.menu button{margin-top:8px}

main{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain}
main > .inner{max-width:680px; margin:0 auto; padding:4px 16px 32px}
h1{font-size:28px; line-height:1.15; letter-spacing:-.02em; margin:8px 0 4px; font-weight:700}
h2{font-size:17px; margin:28px 0 10px; font-weight:600}
.sub{color:var(--muted); margin:0 0 18px}
.fine{color:var(--muted); font-size:13px}

/* bottom nav */
.bnav{flex:none; position:relative; z-index:30; background:var(--bar);
  padding-bottom:env(safe-area-inset-bottom,0px); user-select:none; -webkit-user-select:none}
.bnav div{max-width:680px; margin:0 auto; display:grid; grid-auto-flow:column; grid-auto-columns:1fr; height:var(--nav-h)}
.bnav button{border:0; background:none; color:rgba(255,255,255,.5); min-height:44px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; font-size:12px; font-weight:600; position:relative}
.bnav button[aria-current="page"]{color:#fff}
.bnav button[aria-current="page"]::before{content:""; position:absolute; top:0; left:28%; right:28%; height:3px; border-radius:0 0 3px 3px; background:#fff}
.badge{position:absolute; top:8px; left:calc(50% + 6px); background:var(--red); color:#fff; border-radius:999px; font-size:11px; min-width:18px; height:18px; padding:0 5px; display:grid; place-items:center}

/* cards & payslip */
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin-bottom:12px}
.slip{background:var(--card); border:1px solid var(--line); border-radius:14px; overflow:hidden}
.slip-top{display:grid; grid-template-columns:repeat(4,1fr); gap:12px; padding:16px; background:var(--primary); color:var(--on-primary)}
.slip-top span{display:block; font-size:12px; opacity:.7}
.slip-top b{font-weight:600}
.tablewrap{overflow-x:auto}
table{width:100%; border-collapse:collapse}
.items th{font-size:12px; color:var(--muted); font-weight:500; text-align:left; padding:10px 8px; border-bottom:1px solid var(--line)}
.items td{padding:12px 8px; border-bottom:1px solid var(--line); vertical-align:top}
.items th:first-child,.items td:first-child{padding-left:16px}
.items th:last-child,.items td:last-child{padding-right:16px}
.items .n{text-align:right; white-space:nowrap}
.items .code{color:var(--muted); font-size:13px; width:44px}
.items small{display:block; color:var(--muted)}
.items tr.no td{color:var(--muted)} .items tr.no .desc,.items tr.no .amt{text-decoration:line-through}
.sum{display:flex; justify-content:space-between; align-items:baseline; padding:16px}
.sum span{color:var(--muted)}
.big{font-size:34px; font-weight:700; letter-spacing:-.02em}
.status{margin:0 16px 16px; padding:12px 14px; border-radius:10px; background:var(--paper); font-size:15px}
.status.ok{background:var(--accent-soft)}
.status.back{background:var(--red-soft)}
.sigimg{display:block; height:56px; max-width:200px; object-fit:contain; background:#fff; border-radius:6px; margin-top:8px}

/* forms */
label{font-weight:500; font-size:14px; display:grid; gap:5px; flex:1; min-width:120px; color:var(--ink2)}
input,select,textarea{border:1px solid var(--line); background:var(--card); border-radius:10px; padding:11px 12px; width:100%; color:var(--ink)}
textarea{min-height:90px; resize:vertical}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:flex-end}
.stack{display:grid; gap:12px}
.btn{border:0; border-radius:10px; padding:12px 18px; font-weight:600; background:var(--primary); color:var(--on-primary)}
.btn.sec{background:transparent; color:var(--ink); border:1px solid var(--line)}
.btn.acc{background:var(--accent); color:#fff}
.btn.red{background:transparent; color:var(--red); border:1px solid var(--red)}
.btn.sm{padding:7px 12px; font-size:14px}
.btn.wide{width:100%; padding:15px; font-size:17px}
.btn:disabled{opacity:.45; cursor:not-allowed}
.linkbtn{border:0; background:none; padding:0; color:var(--accent); font-weight:600; text-decoration:underline}

/* tasks */
.jobs{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:8px}
.job{border:1px solid var(--line); background:var(--card); border-radius:12px; padding:12px; text-align:left; display:grid; gap:2px}
.job:hover{border-color:var(--accent)}
.job small{color:var(--muted)}
.job b{font-weight:600}
.job .p{color:var(--accent); font-weight:700}
.sheet{border:1.5px solid var(--accent); border-radius:12px; padding:16px; margin-top:10px; background:var(--card); display:grid; gap:12px}
.list{list-style:none; margin:0; padding:0}
.list li{display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line)}
.list li:last-child{border-bottom:0}
.list .grow{flex:1; min-width:0}
.list small{display:block; color:var(--muted)}
.list .amt{font-weight:600; white-space:nowrap}
.x{border:0; background:transparent; color:var(--muted); width:34px; height:34px; border-radius:8px; font-size:16px}
.x:hover{background:var(--paper)}
.empty{color:var(--muted); text-align:center; padding:24px 12px}
.items tr.pen td{color:var(--red)}
.items tr.bon td{color:var(--accent)}
.cond{margin:0 16px 16px; border:1px solid var(--line); border-radius:10px; padding:12px 14px; display:grid; gap:6px; font-size:15px}
.cond .goalhead span{color:var(--muted)}
.cond .goalhead span.bad{color:var(--red); font-weight:600}
.cond .goalhead span.good{color:var(--accent); font-weight:600}
.checks{list-style:none; margin:0; padding:0}
.checks li{border-bottom:1px solid var(--line)} .checks li:last-child{border-bottom:0}
.checks label{display:flex; flex-direction:row; align-items:center; gap:12px; padding:12px 0; font-size:16px; color:var(--ink); font-weight:500; cursor:pointer}
.checks input{width:22px; height:22px; accent-color:var(--accent); flex:none}
.slipbar{display:flex; justify-content:flex-end; gap:8px; margin:-6px 0 10px}

/* goal */
.bar{height:10px; background:var(--line); border-radius:999px; overflow:hidden; margin:12px 0 8px}
.bar i{display:block; height:100%; background:var(--accent); border-radius:999px}
.goalhead{display:flex; justify-content:space-between; align-items:baseline; gap:12px}
.chip{display:inline-block; font-size:12px; font-weight:600; padding:2px 8px; border-radius:999px; background:var(--accent-soft); color:var(--accent)}
.wish{display:grid; grid-template-columns:1fr auto; gap:6px 12px; padding:14px 0; border-bottom:1px solid var(--line)}
.wish:last-child{border-bottom:0}
.wish .acts{grid-column:1/-1; display:flex; gap:6px; flex-wrap:wrap}
.wish.bought .nm{text-decoration:line-through; color:var(--muted)}

/* stats */
.seg{display:flex; gap:6px; flex-wrap:wrap; margin-bottom:14px}
.seg button{border:1px solid var(--line); background:var(--card); border-radius:999px; padding:6px 14px; font-weight:600; font-size:14px; color:var(--ink2)}
.seg button[aria-pressed="true"]{background:var(--primary); border-color:var(--primary); color:var(--on-primary)}
.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:12px}
.kpi{background:var(--card); border:1px solid var(--line); border-radius:12px; padding:12px}
.kpi b{display:block; font-size:20px; font-weight:700}
.kpi small{color:var(--muted)}
.legend{display:flex; gap:14px; font-size:13px; color:var(--muted); margin-top:6px}
.legend span::before{content:""; display:inline-block; width:10px; height:10px; border-radius:2px; margin-right:6px; background:var(--c)}
.data th{text-align:left; font-size:12px; color:var(--muted); font-weight:500; padding:8px 6px; border-bottom:1px solid var(--line)}
.data td{padding:10px 6px; border-bottom:1px solid var(--line); font-size:15px}
.data .n{text-align:right}
.pill{display:inline-block; padding:2px 9px; border-radius:999px; font-size:12px; font-weight:600; background:var(--line); color:var(--ink2)}
.pill.paid{background:var(--accent-soft); color:var(--accent)}
.pill.approved{background:#f6edd6; color:#7a5a12}
.pill.sent{background:var(--primary); color:var(--on-primary)}

/* approvals */
.toggle{display:inline-flex; gap:4px}
.toggle button{border:1px solid var(--line); background:transparent; width:32px; height:32px; border-radius:8px; font-weight:700}
.toggle .on.ok{background:var(--accent); border-color:var(--accent); color:#fff}
.toggle .on.no{background:var(--red); border-color:var(--red); color:#fff}
.amtin{width:84px; padding:6px 8px; text-align:right}
canvas.sig{width:100%; height:120px; background:#fff; border:1px dashed var(--muted); border-radius:10px; touch-action:none; display:block}
.quote{background:var(--paper); border-radius:10px; padding:10px 12px; margin:8px 0 12px; font-style:italic}

/* settings */
.set{display:grid; grid-template-columns:64px 1fr 96px 36px; gap:8px; align-items:center; margin-bottom:8px}
.back{display:inline-flex; align-items:center; gap:6px; border:0; background:none; color:var(--muted); font-weight:600; padding:0; margin-top:4px}

/* login */
.auth{flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; background:var(--bar)}
.hero{color:#fff; padding:calc(26px + env(safe-area-inset-top,0px)) 24px 52px; flex:none; max-width:520px; width:100%; margin-left:auto; margin-right:auto}
.hero .logo{font-size:38px}
.hero h1{font-size:26px; margin:16px 0 4px; color:#fff}
.hero p{margin:0; color:rgba(255,255,255,.72); max-width:30ch}
.mini{max-width:270px !important; margin-top:18px; font-size:13px; background:#fff; color:#0f1f3d; border-radius:14px; padding:14px 16px; max-width:300px; transform:rotate(-2.5deg); box-shadow:0 22px 40px -18px rgba(0,0,0,.6); position:relative}
.mini .r{display:flex; justify-content:space-between; font-size:13px; padding:4px 0; border-bottom:1px solid #e2e6ee}
.mini .r:last-of-type{border:0}
.mini .t{display:flex; justify-content:space-between; align-items:baseline; margin-top:6px}
.mini .t b{font-size:21px}
.mini .ok{display:inline-block; font-size:12px; font-weight:600; color:#0e7c66; background:#e3f2ee; padding:2px 8px; border-radius:999px}
.mini svg.medal{position:absolute; right:-18px; top:-22px; transform:rotate(12deg)}
.sheet2{flex:1 0 auto; background:var(--paper); border-radius:24px 24px 0 0; margin-top:-28px; padding:28px 20px calc(28px + env(safe-area-inset-bottom,0px))}
.sheet2 > div{max-width:420px; margin:0 auto}
.pin{font-size:28px; letter-spacing:.6em; text-align:center; padding:12px}
.switch{margin-top:18px; text-align:center}
@media (max-height:740px){ .hero p{display:none} .mini{display:none} .hero{padding-bottom:44px} }

/* modal */
.scrim{position:fixed; inset:0; background:rgba(11,20,38,.55); z-index:50; display:grid; place-items:end center}
.modal{background:var(--card); width:100%; max-width:560px; max-height:85%; overflow:auto; border-radius:18px 18px 0 0; padding:22px 20px calc(24px + env(safe-area-inset-bottom,0px))}
.modal h3{margin:16px 0 4px; font-size:15px}
.modal p{margin:0; color:var(--ink2)}

.tabs2{margin-top:10px}
.badges{display:grid; grid-template-columns:repeat(auto-fill,minmax(108px,1fr)); gap:8px}
.bdg{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:12px 6px; text-align:center; display:grid; justify-items:center; gap:3px; align-content:start}
.bdg b{font-size:14px; margin-top:6px} .bdg small{color:var(--muted); font-size:11.5px; line-height:1.35}
.bdg:not(.on) b{color:var(--muted)}
.medal.off{filter:grayscale(1); opacity:.35}
.bdg .got{font-size:12px; font-weight:600; color:var(--accent); margin-top:4px}
.skill .goalhead svg{flex:none}
.prog{display:block; width:80%; height:5px; background:var(--line); border-radius:999px; overflow:hidden; margin-top:6px}
.prog i{display:block; height:100%; background:var(--muted)}
.weeks{display:grid; gap:8px}
.wk{background:var(--card); border:1px solid var(--line); border-radius:12px}
.wk summary{display:flex; align-items:center; gap:12px; padding:12px 14px; cursor:pointer; list-style:none}
.wk summary::-webkit-details-marker{display:none}
.wk summary::after{content:"›"; color:var(--muted); font-size:20px; transition:transform .15s}
.wk[open] summary::after{transform:rotate(90deg)}
.wk summary small{display:block; color:var(--muted)} .wk .grow{flex:1; min-width:0}
.wkbody{padding:0 14px 12px; border-top:1px solid var(--line); padding-top:10px; display:grid; gap:4px}
.scrim.center{place-items:center; padding:20px}
.modal.unlock{border-radius:20px; text-align:center; max-width:360px}
.burst{display:inline-block; animation:unlock .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes unlock{0%{transform:scale(.3) rotate(-25deg); opacity:0}100%{transform:none; opacity:1}}
@media (prefers-reduced-motion: reduce){.burst{animation:none}}
.modal.decl{border-radius:20px; max-width:440px}
.rulesbox{background:var(--paper); border-radius:12px; padding:12px 14px}
.rulesbox ul{margin:6px 0 0; padding-left:20px; color:var(--ink2)}
.declare{display:flex; flex-direction:row; gap:12px; align-items:flex-start; margin-top:14px; font-size:16px; font-weight:600; color:var(--ink); cursor:pointer; border:1.5px solid var(--accent); border-radius:12px; padding:14px}
.declare input{width:24px; height:24px; flex:none; accent-color:var(--accent); margin:0}
.addform{border:1.5px solid var(--accent)}
.loading{display:grid; place-items:center; min-height:60vh; color:var(--muted)}
@media (max-width:380px){ main > .inner{padding-left:12px; padding-right:12px} h1{font-size:25px} .logo{font-size:25px} .bnav button{font-size:11px} }
.ro .pact, .ro .toggle, .ro canvas.sig, .ro [data-act=clearsig]{display:none !important}
.robanner{background:var(--accent-soft); border-radius:10px; padding:10px 12px; margin:0 0 14px; font-size:14px}
#motto{position:fixed; left:50%; bottom:calc(var(--nav-h) + 14px + env(safe-area-inset-bottom,0px)); transform:translate(-50%,24px); width:min(92%,440px);
  background:var(--bar); color:#fff; border-radius:16px; padding:14px 18px 12px; box-shadow:0 18px 40px -16px rgba(0,0,0,.55); z-index:65;
  opacity:0; pointer-events:none; transition:opacity .25s, transform .35s cubic-bezier(.2,1.2,.4,1); cursor:pointer}
#motto.show{opacity:1; transform:translate(-50%,0); pointer-events:auto}
#motto small{display:block; color:#e0b44a; font-weight:600; font-size:13px}
#motto p{margin:6px 0 6px; font-size:17px; line-height:1.35; font-weight:600}
#motto span{font-size:12px; color:rgba(255,255,255,.6)}
@media (prefers-reduced-motion: reduce){ #motto{transition:opacity .2s; transform:translate(-50%,0)} }
/* Settings: one family list (parents, observers, children) */
.fam .frow{flex-wrap:wrap; gap:8px}
.fam .fhead{flex:1 1 220px; min-width:0; display:flex; align-items:center; gap:8px; border:0; background:none; padding:0; text-align:left; color:inherit; font:inherit}
.fam .fhead:not([disabled]){cursor:pointer}
.fam .fhead[disabled]{opacity:1}
.fam .chev{color:var(--muted); font-size:14px}
.fam .chip.observer{background:var(--paper); color:var(--ink2)}
.fam .chip.child{background:color-mix(in srgb, var(--gold) 18%, transparent); color:var(--ink)}
.fam .fpanel{padding:4px 0 16px 12px; border-left:3px solid var(--accent-soft)}
.toast{position:fixed; left:50%; bottom:calc(var(--nav-h) + 16px + env(safe-area-inset-bottom,0px)); transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:11px 16px; border-radius:10px; font-weight:500; opacity:0; pointer-events:none; transition:opacity .2s; z-index:60; max-width:90%}
.toast.show{opacity:1}
@media (max-width:520px){
  .slip-top{grid-template-columns:1fr 1fr} .rate{display:none} .kpis{grid-template-columns:1fr 1fr} .big{font-size:30px}
  .set{grid-template-columns:56px 1fr 80px 32px}
}
@media (prefers-reduced-motion: reduce){ .toast{transition:none} }