/* Pinch HQ parent dashboard. Calm and grown-up, the kid site's palette, a small Pinch. */
:root{
  --paper:#F7FAFC; --grid:#E6EDF4; --ink:#1C2B4A; --pencil:#5B6B85; --line:#C9D5E3; --card:#ffffff;
  --blue:#2F5BEA; --blue-ink:#ffffff; --teal:#1E9A86; --teal-soft:#D5F1EB; --highlight:#FFE14D;
  --error:#B8322A; --error-soft:#FBE4E1; --warn:#8A5A00; --warn-soft:#FFF2C2; --ok:#1B7F3B; --ok-soft:#DDF3E4;
  --shadow:0 1px 2px rgba(28,43,74,.08), 0 6px 20px rgba(28,43,74,.06);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#111a2e; --grid:#172339; --ink:#E8EEF8; --pencil:#9AAAC4; --line:#2c3a58; --card:#16213a;
    --blue:#6C8DFF; --blue-ink:#0d1526; --teal:#3BC2AB; --teal-soft:#173b3a; --highlight:#E8C53A;
    --error:#FF7B70; --error-soft:#3a1f1c; --warn:#F3C664; --warn-soft:#3a2f10; --ok:#6FD48E; --ok-soft:#163a24;
    --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
  }
}
:root[data-theme="dark"]{
  --paper:#111a2e; --grid:#172339; --ink:#E8EEF8; --pencil:#9AAAC4; --line:#2c3a58; --card:#16213a;
  --blue:#6C8DFF; --blue-ink:#0d1526; --teal:#3BC2AB; --teal-soft:#173b3a; --highlight:#E8C53A;
  --error:#FF7B70; --error-soft:#3a1f1c; --warn:#F3C664; --warn-soft:#3a2f10; --ok:#6FD48E; --ok-soft:#163a24;
  --shadow:0 1px 2px rgba(0,0,0,.3), 0 6px 20px rgba(0,0,0,.25);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--paper); color:var(--ink); font:16px/1.5 "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", sans-serif;
  background-image:linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px); background-size:32px 32px}
h1,h2,h3{font-family:"Lexend","Atkinson Hyperlegible",system-ui,sans-serif; font-weight:700; letter-spacing:-0.01em; margin:0; line-height:1.2}
h1{font-size:26px} h2{font-size:20px} h3{font-size:17px}
p{margin:0 0 10px}
a{color:var(--blue)}
.muted{color:var(--pencil)} .small{font-size:14px}
button{font:inherit}
.wrap{max-width:680px; margin:0 auto; padding:0 16px 48px}
header.top{position:sticky; top:0; z-index:5; background:color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line)}
header.top .in{max-width:680px; margin:0 auto; padding:10px 16px; display:flex; align-items:center; gap:12px; min-height:56px}
header.top .brand{display:flex; align-items:center; gap:10px; font-family:"Lexend",sans-serif; font-weight:700; text-decoration:none; color:var(--ink)}
header.top .brand .crab{width:34px; height:24px}
header.top nav{margin-left:auto; display:flex; gap:4px; flex-wrap:wrap; justify-content:flex-end}
header.top nav a{color:var(--pencil); text-decoration:none; padding:8px 10px; border-radius:8px; font-size:14px; min-height:40px; display:inline-flex; align-items:center}
header.top nav a.on, header.top nav a:hover{color:var(--ink); background:var(--card)}
.badge{display:inline-block; min-width:20px; padding:0 6px; border-radius:10px; background:var(--error); color:#fff; font-size:12px; font-weight:700; text-align:center; line-height:20px; margin-left:4px}
.card{background:var(--card); border:1px solid var(--line); border-radius:14px; padding:16px; margin:14px 0; box-shadow:var(--shadow)}
.card h2, .card h3{margin-bottom:6px}
.row{display:flex; gap:10px; align-items:center; flex-wrap:wrap}
.row.between{justify-content:space-between}
.stack{display:grid; gap:10px}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:6px; min-height:44px; padding:8px 16px; border-radius:10px; border:1px solid var(--line);
  background:var(--card); color:var(--ink); cursor:pointer; text-decoration:none; font-weight:700; font-family:"Lexend",sans-serif; font-size:15px}
.btn:hover{border-color:var(--ink)}
.btn.primary{background:var(--blue); color:var(--blue-ink); border-color:var(--blue)}
.btn.danger{color:var(--error); border-color:color-mix(in srgb, var(--error) 50%, var(--line))}
.btn.quiet{border-color:transparent; background:transparent; color:var(--blue); padding-left:6px; padding-right:6px}
.btn.small{min-height:36px; padding:4px 12px; font-size:14px}
.btn[disabled]{opacity:.55; cursor:default}
.btn.full{width:100%}
label{display:block; font-weight:700; font-size:14px; margin:0 0 4px}
input, textarea, select{width:100%; font:inherit; color:var(--ink); background:var(--card); border:1px solid var(--line); border-radius:10px; padding:10px 12px; min-height:44px}
input:focus, textarea:focus, select:focus{outline:2px solid var(--blue); outline-offset:1px; border-color:var(--blue)}
textarea{min-height:80px; resize:vertical}
.field{margin:0 0 12px}
.hint{font-size:13px; color:var(--pencil); margin-top:4px}
.err{color:var(--error); font-weight:700; margin:8px 0 0; min-height:1em}
.ok-text{color:var(--ok); font-weight:700}
.pill{display:inline-block; padding:2px 10px; border-radius:999px; font-size:13px; font-weight:700; background:var(--grid); color:var(--pencil)}
.pill.ok{background:var(--ok-soft); color:var(--ok)} .pill.warn{background:var(--warn-soft); color:var(--warn)} .pill.err{background:var(--error-soft); color:var(--error)}
.pill.teal{background:var(--teal-soft); color:var(--teal)}
.bar{height:10px; border-radius:5px; background:var(--grid); overflow:hidden; border:1px solid var(--line)}
.bar > i{display:block; height:100%; background:var(--teal); border-radius:5px}
.kid{display:block; text-decoration:none; color:inherit}
.kid:hover{border-color:var(--ink)}
.kid .name{font-family:"Lexend",sans-serif; font-weight:700; font-size:18px}
.kid .meta{font-size:14px; color:var(--pencil)}
.kid .stats{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; margin-top:10px}
.kid .stat{background:var(--paper); border-radius:10px; padding:8px 10px}
.kid .stat b{display:block; font-family:"Lexend",sans-serif; font-size:17px}
.kid .stat span{font-size:12px; color:var(--pencil)}
.code{font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:26px; letter-spacing:.14em; font-weight:700; padding:10px 14px; background:var(--paper); border:2px dashed var(--teal); border-radius:10px; text-align:center; user-select:all}
.toast{position:fixed; left:50%; bottom:20px; transform:translateX(-50%); background:var(--ink); color:var(--paper); padding:10px 16px; border-radius:10px; box-shadow:var(--shadow); max-width:calc(100% - 32px); z-index:20; font-weight:700}
.toast.err{background:var(--error); color:#fff}
.list{list-style:none; margin:0; padding:0}
.list li{padding:10px 0; border-top:1px solid var(--line); display:flex; gap:10px; align-items:flex-start}
.list li:first-child{border-top:0}
.list .when{color:var(--pencil); font-size:13px; white-space:nowrap; min-width:88px}
.amount{font-family:"Lexend",sans-serif; font-weight:700; min-width:48px; text-align:right}
.amount.pos{color:var(--ok)} .amount.neg{color:var(--error)}
.answer{background:var(--paper); border-left:3px solid var(--teal); padding:8px 12px; border-radius:0 8px 8px 0; white-space:pre-wrap; word-break:break-word}
.q{font-weight:700; font-size:14px; color:var(--pencil); margin:12px 0 4px}
.tabs{display:flex; gap:6px; flex-wrap:wrap; margin:8px 0 4px}
.tabs button{min-height:36px; padding:4px 12px; border-radius:999px; border:1px solid var(--line); background:var(--card); color:var(--pencil); font-weight:700; cursor:pointer}
.tabs button.on{background:var(--ink); color:var(--paper); border-color:var(--ink)}
table{width:100%; border-collapse:collapse; font-size:14px}
th, td{text-align:left; padding:8px 6px; border-top:1px solid var(--line); vertical-align:top}
th{color:var(--pencil); font-weight:700; border-top:0}
.pinch-hello{display:flex; gap:12px; align-items:center; margin:18px 0 6px}
.pinch-hello .crab{width:64px; height:46px; flex:none}
.pinch-hello .say{background:var(--card); border:2px solid var(--ink); padding:8px 12px; border-radius:12px; position:relative; font-size:15px}
.pinch-hello .say::before{content:""; position:absolute; left:-9px; top:14px; border:7px solid transparent; border-right-color:var(--ink)}
.crab{display:block; overflow:visible; --o:#1C2B4A;--t:#17B096;--l:#7EE6D2;--d:#0E8571;--y:#FFD43B;--w:#FFFFFF;--p:#1C2B4A;--c:#FF8FA6;--h:transparent;--sh:rgba(28,43,74,.20);--s:transparent;--z:transparent;--g:transparent}
.crab .o{fill:var(--o)} .crab .t{fill:var(--t)} .crab .l{fill:var(--l)} .crab .d{fill:var(--d)} .crab .y{fill:var(--y)}
.crab .w{fill:var(--w)} .crab .p{fill:var(--p)} .crab .c{fill:var(--c)} .crab .h{fill:var(--h)} .crab .s{fill:var(--s)} .crab .z{fill:var(--z)} .crab .g{fill:var(--g)}
.crab .shadow{fill:var(--sh)}
.crab .eyes-closed, .crab .claw-shut, .crab .legs-b, .crab .crown, .crab .zzz, .crab .sparkle, .crab .halo, .crab .glow{display:none}
.center{text-align:center}
.sheet{position:fixed; inset:0; background:rgba(10,16,30,.55); display:flex; align-items:flex-end; justify-content:center; z-index:15; padding:0}
.sheet .box{background:var(--card); width:100%; max-width:680px; border-radius:18px 18px 0 0; padding:18px 16px 28px; max-height:88vh; overflow:auto}
@media (min-width:700px){ .sheet{align-items:center; padding:16px} .sheet .box{border-radius:18px} }
.actions{display:grid; grid-template-columns:repeat(auto-fill, minmax(150px, 1fr)); gap:8px}
.notice{border-left:4px solid var(--warn); background:var(--warn-soft); padding:10px 12px; border-radius:0 10px 10px 0; margin:10px 0}
.notice.ok{border-color:var(--ok); background:var(--ok-soft)}
.notice.err{border-color:var(--error); background:var(--error-soft)}
details summary{cursor:pointer; font-weight:700; color:var(--pencil); min-height:40px; display:flex; align-items:center}
.sr{position:absolute; left:-9999px}
.brand-sub{font-weight:400}
input[type="checkbox"]{width:22px; height:22px; min-height:0; flex:none; margin:0}
.field.row{align-items:center}