:root{
  --red:#ff3b30; --blue:#0a63ff; --yellow:#ffd400; --green:#12b886;
  --ink:#000; --paper:#fff; --line:#000;
  --shadow:6px 6px 0 var(--ink);
  --font:'Comic Neue','Comic Sans MS','Chalkboard SE',cursive;
}
*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family:var(--font); background:
    repeating-linear-gradient(45deg,#fff 0 22px,#fafaff 22px 44px);
  color:var(--ink); min-height:100vh; font-size:16px;
}
.hidden{display:none !important}
.screen{max-width:760px;margin:0 auto;padding:18px 16px 60px}

/* ---------- buttons ---------- */
.chunk{font-family:var(--font);font-weight:700;border:3px solid var(--ink);
  border-radius:14px;box-shadow:var(--shadow);background:var(--yellow);color:var(--ink);
  padding:14px 18px;font-size:18px;cursor:pointer;transition:transform .05s,box-shadow .05s}
.chunk:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.chunk:disabled{opacity:.45;cursor:not-allowed;box-shadow:var(--shadow)}
.link{background:none;border:0;color:var(--blue);font-family:var(--font);font-weight:700;
  cursor:pointer;text-decoration:underline;font-size:15px}

/* ---------- login ---------- */
#login{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh}
.loginbox{background:var(--paper);border:4px solid var(--ink);border-radius:22px;
  box-shadow:10px 10px 0 var(--ink);padding:26px;width:100%;max-width:440px;text-align:center;
  transform:rotate(-1deg)}
.logo{font-size:40px;line-height:1;margin:.2em 0;letter-spacing:1px}
.logo .nerd{display:inline-block;transform:rotate(8deg)}
.tag{margin:.2em 0 20px;color:#444;font-style:italic}
.pick{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.who{font-family:var(--font);border:3px solid var(--ink);border-radius:16px;background:#fff;
  box-shadow:var(--shadow);padding:16px 8px;cursor:pointer;display:flex;flex-direction:column;
  align-items:center;gap:4px;transition:transform .05s}
.who .face{font-size:40px}
.who b{font-size:20px;letter-spacing:1px}
.who small{color:#555}
.who.admin{background:#fff0ef}.who.sub{background:#eef4ff}
.who:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.pwform{display:flex;flex-direction:column;gap:12px;text-align:left}
.whoami{font-size:22px;display:flex;align-items:center;gap:8px}
.whoami b{letter-spacing:1px}
.hint{margin:0;color:#333}
.remember{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer;user-select:none}
.remember input{width:20px;height:20px;accent-color:var(--blue);cursor:pointer}
#pw{font-family:var(--font);font-size:18px;padding:12px;border:3px solid var(--ink);
  border-radius:12px;box-shadow:var(--shadow) ;width:100%}
.go{background:var(--green);color:#fff}
.err{color:var(--red);font-weight:700;min-height:1.2em;margin:0}
.footjoke{margin-top:22px;color:#888;font-size:13px}

/* ---------- topbar ---------- */
.topbar{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:16px;
  box-shadow:var(--shadow);padding:10px 14px;margin-bottom:14px;flex-wrap:wrap}
.brand{font-weight:700;font-size:20px;letter-spacing:1px}
.right{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.chip{background:#fff;color:var(--ink);border:2px solid var(--ink);border-radius:20px;
  padding:3px 10px;font-size:13px;font-weight:700}
.chip.ok{background:var(--green);color:#fff}.chip.bad{background:var(--red);color:#fff}
.badge{background:var(--yellow);color:var(--ink);border:2px solid var(--ink);border-radius:8px;
  padding:3px 10px;font-weight:700;letter-spacing:1px;transform:rotate(-3deg);display:inline-block}
.right .link{color:#fff}

/* ---------- motd ---------- */
.motd{background:var(--yellow);border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);
  padding:12px 14px;margin-bottom:14px;transform:rotate(-.6deg);font-size:17px}
.motdlabel{font-weight:700;margin-right:6px}

/* ---------- tabs ---------- */
.tabs{display:flex;gap:8px;margin-bottom:14px;flex-wrap:wrap}
.tab{font-family:var(--font);font-weight:700;border:3px solid var(--ink);border-radius:12px 12px 0 0;
  background:#fff;box-shadow:var(--shadow);padding:9px 16px;cursor:pointer;font-size:16px}
.tab.active{background:var(--red);color:#fff;transform:translateY(-2px)}

/* ---------- cards / views ---------- */
.card{background:#fff;border:3px solid var(--ink);border-radius:16px;box-shadow:var(--shadow);
  padding:18px;margin-bottom:16px}
.card h2{margin:0 0 12px;font-size:22px}
.muted{color:#666}

/* control */
.val{font-size:54px;font-weight:700;text-align:center;margin:2px 0}
input[type=range]{width:100%;height:30px;accent-color:var(--blue)}
.ticks{display:flex;justify-content:space-between;color:#666;font-size:12px}
.presets{display:flex;gap:8px;margin:12px 0}
.presets button{flex:1}
.bigrow{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.big{font-family:var(--font);border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);
  padding:20px 6px;font-size:18px;font-weight:700;color:#fff;cursor:pointer;display:flex;
  flex-direction:column;align-items:center;gap:4px}
.big:active{transform:translate(3px,3px);box-shadow:3px 3px 0 var(--ink)}
.big .ic{font-size:26px}
.big.vibe{background:var(--blue)}.big.beep{background:var(--green)}.big.zap{background:var(--red)}
.log{background:#0b0e12;color:#d7e0ea;border:3px solid var(--ink);border-radius:12px;padding:10px 12px;
  font-family:ui-monospace,Consolas,monospace;font-size:12.5px;height:170px;overflow:auto;margin-top:14px}
.log .ok{color:#5bd68a}.log .err{color:#ff7b72}.log .t{color:#7d8a99}

/* rules */
.rulelist{list-style:none;padding:0;margin:0;counter-reset:r}
.rulelist li{border:3px solid var(--ink);border-radius:12px;padding:12px 12px 12px 46px;
  margin-bottom:10px;position:relative;background:#fffdf5;box-shadow:var(--shadow)}
.rulelist li:not(.head){counter-increment:r}
.rulelist li::before{content:counter(r);position:absolute;left:-3px;top:-3px;background:var(--red);color:#fff;
  border:3px solid var(--ink);border-radius:10px;width:34px;height:34px;display:flex;align-items:center;
  justify-content:center;font-weight:700}
.rulelist li.head{background:var(--blue);color:#fff;font-size:19px;padding-left:14px}
.rulelist li.head::before{display:none}
/* assignments: category subdivisions */
.catbox{border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);margin-bottom:14px;overflow:hidden;background:#fff}
.cattitle{background:var(--yellow);border-bottom:3px solid var(--ink);padding:8px 14px;font-size:18px;font-weight:700;letter-spacing:.5px}
.asglist{list-style:none;margin:0;padding:8px}
.asglist li{border:2px solid var(--ink);border-radius:10px;padding:6px 10px;margin:6px;background:#eef4ff;
  display:flex;align-items:center;gap:10px}
.asglist li.done{background:#eafaf0}
.asglist li.done .asgtext{text-decoration:line-through;color:#6a8a99}
.asgtext{flex:1}
textarea{width:100%;font-family:var(--font);font-size:16px;padding:12px;border:3px solid var(--ink);
  border-radius:12px;box-shadow:var(--shadow);min-height:180px;resize:vertical}
.row{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:12px}
.field{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.field label{font-weight:700}
.field input{font-family:var(--font);font-size:16px;padding:10px;border:3px solid var(--ink);
  border-radius:10px;box-shadow:var(--shadow)}
.ok-msg{color:var(--green);font-weight:700}

/* ===== journal / consequences / goals ===== */
.del{border:2px solid var(--ink);background:#fff;color:var(--red);font-weight:700;border-radius:8px;
  width:26px;height:26px;line-height:1;cursor:pointer;flex:0 0 auto}
.del:hover{background:var(--red);color:#fff}
.miniform{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin:12px 0}
.miniform input{font-family:var(--font);font-size:15px;padding:8px 10px;border:3px solid var(--ink);
  border-radius:10px;box-shadow:3px 3px 0 var(--ink);flex:1 1 120px;min-width:110px}
.miniform.sub{margin:8px 0 4px}
.chunk.sm{padding:8px 12px;font-size:14px;box-shadow:3px 3px 0 var(--ink)}

/* journal */
.jentry{border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);margin-bottom:12px;
  background:#fffdf5;overflow:hidden}
.jhead{display:flex;align-items:center;gap:10px;padding:8px 12px;background:#eef4ff;border-bottom:3px solid var(--ink)}
.jauthor{border:2px solid var(--ink);border-radius:8px;padding:2px 8px;font-weight:700;font-size:13px}
.jauthor.aAdmin{background:var(--red);color:#fff}
.jauthor.aSub{background:var(--yellow)}
.jts{color:#555;font-size:13px}
.jhead .del{margin-left:auto}
.jbody{margin:0;padding:12px;white-space:pre-wrap}

/* consequences table */
.ctable{border:3px solid var(--ink);border-radius:12px;overflow:hidden;box-shadow:var(--shadow);margin-top:8px}
.crow{display:grid;grid-template-columns:34px 92px 1fr 1fr 92px 32px;gap:8px;align-items:center;
  padding:9px 10px;border-bottom:2px solid var(--ink)}
.crow:last-child{border-bottom:0}
.crow.chead{background:var(--blue);color:#fff;font-weight:700}
.crow.done{background:#eafaf0;color:#679}
.crow.done span:nth-child(3),.crow.done span:nth-child(4){text-decoration:line-through}
.cbw input{width:20px;height:20px;accent-color:var(--green)}
.crow span{overflow-wrap:anywhere}
@media(max-width:560px){.crow{grid-template-columns:28px 1fr 1fr 30px;}
  .crow span:nth-child(2){display:none}.crow.chead span:nth-child(5){display:none}}

/* goals */
.visioncard{border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);margin-bottom:16px;
  background:#fff;overflow:hidden}
.visionhead{display:flex;align-items:center;gap:10px;background:var(--blue);color:#fff;padding:10px 14px}
.visionhead .del{margin-left:auto}
.vtitle{font-size:20px;font-weight:700}
.prio{background:var(--yellow);color:#000;border:2px solid #000;border-radius:8px;padding:1px 8px;font-size:13px;font-weight:700}
.vtext{margin:10px 14px;font-style:italic}
.objcard{border:3px solid var(--ink);border-radius:12px;margin:10px 14px;background:#f6f9ff}
.objhead{display:flex;align-items:center;gap:10px;padding:8px 12px;border-bottom:2px dashed var(--ink);font-weight:700}
.objhead .del{margin-left:auto}
.goalrow{display:flex;align-items:center;gap:8px;padding:8px 12px;border-bottom:1px solid #cdd7e5}
.goalrow b{font-weight:700}
.goalrow .meas{color:#0a7}.goalrow .due{color:var(--red);font-weight:700;margin-left:auto}
.goalrow .del{margin-left:6px}
/* the big happy embarrassing check (assignments) */
.bigcheck{flex:0 0 auto;width:42px;height:42px;border:3px solid var(--ink);border-radius:11px;background:#fff;
  box-shadow:3px 3px 0 var(--ink);cursor:pointer;font-size:28px;font-weight:900;line-height:1;color:#fff;
  display:flex;align-items:center;justify-content:center;transition:transform .08s,background .1s}
.bigcheck.sm{width:36px;height:36px;font-size:23px;border-radius:9px;box-shadow:2px 2px 0 var(--ink)}
.bigcheck:hover{background:#f0fff6}
.bigcheck:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.bigcheck.on{background:var(--green);color:#fff;transform:rotate(-8deg) scale(1.06);box-shadow:3px 3px 0 var(--ink)}
.bigcheck.on:hover{background:var(--green)}
.donestamp{display:inline-block;background:var(--yellow);border:2px solid var(--ink);border-radius:6px;
  padding:1px 7px;font-weight:700;font-size:12px;transform:rotate(-4deg);white-space:nowrap}
.objcard .miniform.sub{padding:0 12px 10px}
.visioncard > .miniform.sub{padding:0 14px 12px}

/* ===== logsheet ===== */
.logline{border:2px solid var(--ink);border-radius:10px;background:#f6f9ff;padding:8px 10px;margin:6px 0;
  display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.logtext{font-weight:700;flex:1 1 160px}
.widgets{display:flex;flex-wrap:wrap;gap:12px;align-items:center}
.widget{display:flex;align-items:center;gap:6px;background:#fff;border:2px solid var(--ink);border-radius:9px;
  padding:5px 9px;box-shadow:2px 2px 0 var(--ink)}
.wlabel{font-weight:700;font-size:14px}
.widget input[type=checkbox]{width:22px;height:22px;accent-color:var(--green)}
.wnum{width:72px;font-family:var(--font);font-size:15px;padding:4px 6px;border:2px solid var(--ink);border-radius:7px}
.wslider{width:120px;accent-color:var(--blue)}
.wsliderval{font-weight:700;background:var(--yellow);border:2px solid var(--ink);border-radius:6px;
  min-width:22px;text-align:center;padding:0 4px}
.pctrow{display:flex;align-items:center;gap:8px;margin:8px 6px 4px;padding-top:8px;border-top:2px dashed var(--ink)}
.pctlabel{font-weight:700;color:var(--red)}
.pctinput{width:74px;font-family:var(--font);font-size:16px;padding:5px 7px;border:3px solid var(--ink);
  border-radius:8px;box-shadow:2px 2px 0 var(--ink)}
.pctsign{font-weight:700}
.cumbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px;
  background:var(--blue);color:#fff;border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);
  padding:12px 16px}
.cumlabel{font-weight:700;font-size:18px}
.cumval{font-weight:900;font-size:30px;background:var(--yellow);color:#000;border:3px solid var(--ink);
  border-radius:10px;padding:2px 12px;transform:rotate(-3deg)}
.cumval.sm{font-size:16px;padding:1px 8px;transform:none}

/* ===== consequences records ===== */
.crec{border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);background:#fff;
  margin-bottom:14px;overflow:hidden}
.crec.done{background:#eafaf0}
.crechead{display:flex;flex-wrap:wrap;align-items:center;gap:10px;padding:10px 12px;
  background:#f6f9ff;border-bottom:3px solid var(--ink)}
.crec.done .crechead{background:#d8f5e6}
.cmeta{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.clabel{background:var(--yellow);border:2px solid var(--ink);border-radius:6px;padding:0 7px;
  font-weight:700;font-size:12px}
.cval{font-weight:700}
.cval.due{color:var(--red)}
.crecactions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-left:auto}
.ccheck{display:flex;align-items:center;gap:5px;font-weight:700;font-size:14px;cursor:pointer}
.ccheck input{width:20px;height:20px;accent-color:var(--green)}
.cfield{padding:8px 12px}
.cfield .clabel{margin-right:6px}
.cpar{margin:6px 0 0;white-space:pre-wrap}
.crec.done .cpar{color:#5a7}

/* ===== "new items" tab pulse (sub) ===== */
@keyframes pvpulse{
  0%,100%{ box-shadow:6px 6px 0 var(--ink); }
  50%{ box-shadow:0 0 0 4px var(--yellow), 6px 6px 0 var(--ink); background:#fffdf0; }
}
.tab.pulse{ animation:pvpulse 1.8s ease-in-out infinite; }
.tab.pulse::after{ content:'●'; color:var(--red); font-size:11px; margin-left:6px; vertical-align:middle;
  animation:pvpulse 1.8s ease-in-out infinite; }
.tab.active.pulse::after{ color:#fff; }

/* ===== goals: filter bar + status ===== */
.filterbar{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 12px}
.fbtn{font-family:var(--font);font-weight:700;border:3px solid var(--ink);border-radius:20px;background:#fff;
  box-shadow:3px 3px 0 var(--ink);padding:6px 14px;cursor:pointer;font-size:14px}
.fbtn.on{background:var(--blue);color:#fff}
.fbtn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.statusbtns{display:flex;gap:5px;flex:0 0 auto}
.sbtn{width:32px;height:32px;border:2px solid var(--ink);border-radius:8px;background:#fff;cursor:pointer;
  font-weight:900;font-size:15px;line-height:1;box-shadow:2px 2px 0 var(--ink)}
.sbtn:active{transform:translate(1px,1px);box-shadow:1px 1px 0 var(--ink)}
.sbtn.on.s-in-progress{background:var(--blue);color:#fff}
.sbtn.on.s-waiting{background:var(--yellow);color:#000}
.sbtn.on.s-complete{background:var(--green);color:#fff}
.goalrow.gstat-waiting{background:#fffdf0}
.goalrow.gstat-complete{background:#eafaf0}
.goalrow.gstat-complete .goalbody b{text-decoration:line-through;color:#6a8a99}

/* ===== v0.75 multi-user ===== */
#uname{font-family:var(--font);font-size:18px;padding:12px;border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);width:100%}
.loginbox input{margin:0}
.userselect{font-family:var(--font);font-weight:700;font-size:14px;padding:5px 8px;border:2px solid var(--ink);border-radius:8px;background:#fff;cursor:pointer}
.seltag{color:#fff;font-size:12px;font-weight:700}
.uhrow{grid-template-columns:1.4fr 70px 1.3fr auto !important}
.uacts{display:flex;gap:8px;align-items:center;justify-content:flex-end}
/* report */
.report{background:#fff;border:3px solid var(--ink);border-radius:14px;box-shadow:var(--shadow);padding:16px}
.reportdoc{padding:6px 4px}
.rtitle{font-size:26px;margin:6px 0 2px}
.rsub{color:#555;margin-bottom:14px}
.rvision{border-left:5px solid var(--blue);padding:4px 0 4px 12px;margin:8px 0}
.rvtitle{font-weight:700;font-size:18px}
.rvtext{font-style:italic;color:#555;margin:2px 0}
.robj{font-weight:700;margin:6px 0 2px 8px}
.rgoal{margin:2px 0 2px 22px}
.rlist{margin:4px 0 10px 18px}
.report h2{font-size:19px;margin:14px 0 6px}
@media print{
  body{background:#fff}
  .topbar,.tabs,.motd,.footjoke,#login,.report .row{display:none !important}
  #app,.screen{max-width:100%;padding:0;margin:0}
  .report{border:0;box-shadow:none;padding:0}
}

/* ===== password show/hide eye ===== */
.pwwrap{position:relative;display:block;width:100%}
.pwwrap > input{width:100%;padding-right:46px}
.eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);background:none;border:0;
  cursor:pointer;font-size:20px;line-height:1;padding:4px;border-radius:8px}
.eye:hover{background:#00000010}

/* ===== clothing ===== */
.clgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;padding:8px}
.clcard{border:3px solid var(--ink);border-radius:12px;box-shadow:var(--shadow);background:#fff;overflow:hidden;display:flex;flex-direction:column}
.clcard.laundry{background:#fff6f6}
.clphoto{position:relative;height:130px;background:#eef4ff;display:flex;align-items:center;justify-content:center;border-bottom:3px solid var(--ink)}
.clphoto img{width:100%;height:100%;object-fit:cover}
.clnoimg{font-size:44px}
.clupload{position:absolute;bottom:4px;right:4px;font-family:var(--font);font-weight:700;font-size:11px;border:2px solid var(--ink);border-radius:7px;background:#fff;cursor:pointer;padding:2px 6px}
.clbody{padding:8px;display:flex;flex-direction:column;gap:6px;flex:1}
.clname{font-weight:700}
.clmeta{display:flex;flex-wrap:wrap;gap:4px;align-items:center;font-size:12px}
.cltype{background:var(--yellow);border:2px solid var(--ink);border-radius:6px;padding:0 6px;font-weight:700}
.clworn{color:#666}
.clday{background:var(--blue);color:#fff;border:2px solid var(--ink);border-radius:6px;padding:0 5px;font-weight:700;text-transform:capitalize}
.clrow{display:flex;gap:6px;align-items:center;margin-top:auto}
.clcard .chunk.sm{flex:1}
.clcard .chunk.sm.go{background:var(--green);color:#fff}
.clcard .chunk.sm:not(.go){background:#ffe3e3}
.clmini{border:2px solid var(--ink);border-radius:10px;overflow:hidden;background:#fff;display:flex;flex-direction:column;align-items:center;position:relative}
.clmini.laundry{opacity:.5}
.clmini img{width:100%;height:90px;object-fit:cover}
.clminiName{font-size:12px;font-weight:700;padding:4px;text-align:center}
.clmini .del{position:absolute;top:2px;right:2px;width:22px;height:22px;font-size:12px}
.aitext{background:#f6f9ff;border:2px solid var(--ink);border-radius:10px;padding:12px;margin-top:10px;white-space:normal;line-height:1.5}

/* laundry-day task */
.catbox.laundryday{border-color:var(--blue)}
.catbox.laundryday .cattitle{background:var(--blue);color:#fff}
.ldtask{display:flex;align-items:center;gap:10px;background:#eef4ff;border:3px solid var(--ink);
  border-radius:12px;box-shadow:var(--shadow);padding:10px 12px;margin-bottom:10px;font-weight:700;cursor:pointer}
.ldtask.done{background:#eafaf0}
.ldtask input{width:26px;height:26px;accent-color:var(--green);cursor:pointer;flex:0 0 auto}
.ldtext{font-size:16px}

/* logsheet text widget (short paragraph) */
.widget.textw{flex:1 1 100%;flex-direction:column;align-items:stretch;gap:5px}
.widget.textw textarea{width:100%;min-height:52px;font-family:var(--font);font-size:15px;padding:8px;
  border:2px solid var(--ink);border-radius:8px;resize:vertical}