:root {
  --pine: #0A4F34;
  --pine-2: #148A56;
  --pine-deep: #06331F;
  --bg: #F2F4F0;
  --card: #FFFFFF;
  --ink: #1C2420;
  --mut: #6B7A72;
  --line: #E1E7E1;
  --pos: #128A52;
  --neg: #BE3B2C;
  --gold: #F2C14E;
  --r: 14px;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html, body {
  margin: 0;
  padding: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: system-ui, Roboto, "Segoe UI", sans-serif;
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
}

body {
  padding-bottom: 96px;
  user-select: none;
  -webkit-user-select: none;
}

input, textarea, select { user-select: text; -webkit-user-select: text; }

button {
  font: inherit;
  border: 0;
  background: none;
  color: inherit;
  padding: 0;
  cursor: pointer;
}
button:active { opacity: .7; }

.hidden { display: none !important; }

/* ---------- header ---------- */
header {
  background: linear-gradient(160deg, var(--pine-deep), var(--pine) 55%, var(--pine-2));
  color: #fff;
  padding: calc(10px + env(safe-area-inset-top)) 14px 10px;
}
.bar { display: flex; align-items: center; justify-content: space-between; }
.brand { font-weight: 800; letter-spacing: .3px; font-size: 19px; }
.brand::after {
  content: "";
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--gold);
  margin-left: 6px;
  vertical-align: 2px;
}
.hbtns { display: flex; gap: 4px; }
.icobtn {
  width: 40px; height: 40px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 12px;
  font-size: 20px;
  color: inherit;
}
.icobtn:active { background: rgba(255,255,255,.14); opacity: 1; }

.monthrow { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; }
.mtitle { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; }
.pill {
  background: var(--gold);
  color: var(--pine-deep);
  font-weight: 700;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 999px;
}

.eom-unused {
  display: flex; align-items: baseline; gap: 8px;
  font-size: 13px;
  opacity: .95;
  margin-top: 2px;
}
.eom b { font-size: 15px; font-variant-numeric: tabular-nums; }
.eom-label { opacity: .8; }
.syncdot {
  margin-left: auto;
  font-size: 11px;
  background: rgba(0,0,0,.25);
  color: var(--gold);
  padding: 2px 8px;
  border-radius: 999px;
}

.chips {
  display: flex; gap: 8px;
  margin-top: 10px;
  overflow-x: auto;
  padding-bottom: 2px;
  scrollbar-width: none;
}
.chips::-webkit-scrollbar { display: none; }
.chipbtn {
  flex: 0 0 auto;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.14);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}
.chipbtn.active { background: #fff; color: var(--pine-deep); }

/* ---------- calendar ---------- */
#cal-wrap { padding: 6px 10px 0; touch-action: pan-y; }
.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  font-size: 10px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .4px;
  text-align: center;
  padding: 3px 0 2px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}
.grid.slide-l { animation: slideL .22s ease; }
.grid.slide-r { animation: slideR .22s ease; }
@keyframes slideL { from { transform: translateX(26px); opacity: .4; } to { transform: none; opacity: 1; } }
@keyframes slideR { from { transform: translateX(-26px); opacity: .4; } to { transform: none; opacity: 1; } }

.cell {
  background: var(--card);
  border-radius: 9px;
  min-height: 42px;
  padding: 3px 2px 2px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  border: 1px solid var(--line);
  position: relative;
}
.cell:active { transform: scale(.96); }
.cell .d { font-size: 12px; font-weight: 700; }
.cell .n { font-size: 9.5px; font-variant-numeric: tabular-nums; color: var(--mut); }
.cell .n.pos { color: var(--pos); }
.cell .n.neg { color: var(--neg); }
.cell.blank { background: transparent; border: 0; }
.cell.today { box-shadow: inset 0 0 0 2px var(--gold); }
.cell.sel { background: var(--pine); border-color: var(--pine); color: #fff; }
.cell.sel .n { color: #DCEFE4; }
.cell.sel .n.pos { color: #9FE8C4; }
.cell.sel .n.neg { color: #FFB4A6; }
.taskdot {
  position: absolute;
  top: 4px; right: 5px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--gold);
}

/* ---------- day card ---------- */
.daycard {
  margin: 12px 10px 0;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 12px;
}
.dayhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
#day-title { font-weight: 800; font-size: 15px; }
.chip {
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--bg);
  color: var(--ink);
}
.chip.neg { background: #FBEAE6; color: var(--neg); }
.chip.pos { background: #E6F5EC; color: var(--pos); }

.entry {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid var(--line);
}
.entry:first-child { border-top: 0; }
.entry .t { flex: 1; min-width: 0; }
.entry .t b { font-size: 14px; font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entry .t small { color: var(--mut); font-size: 11px; }
.accttag {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  color: var(--pine);
  background: #E6F1EB;
  border-radius: 6px;
  padding: 1px 6px;
  margin-right: 5px;
  vertical-align: 1px;
}
.entry .a { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; }
.entry .a small { display: block; font-weight: 500; font-size: 11px; color: var(--mut); }
.a.pos { color: var(--pos); }
.a.neg { color: var(--neg); }
.empty { color: var(--mut); font-size: 13px; padding: 12px 2px; }

.linkbtn {
  color: var(--pine-2);
  font-weight: 700;
  font-size: 13px;
  padding: 8px 2px 2px;
}

/* ---------- module rows ---------- */
.modrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid var(--line);
}
.modrow .ic { width: 22px; text-align: center; font-size: 15px; }
.modrow .ml { flex: 1; font-size: 14px; font-weight: 600; }
.modrow .mv { font-size: 13px; color: var(--mut); font-variant-numeric: tabular-nums; }
.modrow .chev { color: var(--mut); font-size: 16px; padding: 0 2px; }
.glasses { display: flex; gap: 3px; }
.glasses i {
  width: 8px; height: 12px;
  border-radius: 2px 2px 4px 4px;
  border: 1px solid var(--pine-2);
  display: inline-block;
}
.glasses i.full { background: var(--pine-2); }
.glasses.big { justify-content: center; margin: 10px 0 4px; }
.glasses.big i { width: 14px; height: 22px; }
.roundbtn {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
}
.modrow .roundbtn { width: 34px; height: 34px; font-size: 17px; }

/* ---------- fab & scrim ---------- */
.fab {
  position: fixed;
  right: 18px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(10,30,70,.25);
  z-index: 30;
  position: fixed;
}
.fab::before, .fab::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 24px; height: 3.5px;
  border-radius: 2px;
  background: #fff;
  transform: translate(-50%, -50%);
}
.fab::after { transform: translate(-50%, -50%) rotate(90deg); }
.fab:active { transform: scale(.94); opacity: 1; }

#scrim {
  position: fixed;
  inset: 0;
  background: rgba(12,20,16,.45);
  z-index: 40;
}

/* ---------- sheets ---------- */
.sheet {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  background: var(--card);
  border-radius: 18px 18px 0 0;
  padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  z-index: 50;
  transform: translateY(130%);
  transition: transform .24s ease;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: none;
}
.sheet.open { transform: none; box-shadow: 0 -10px 28px rgba(0,0,0,.16); }
.sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.sheet-head b { font-size: 16px; }
.sheet-head .icobtn { color: var(--mut); }

.lbl {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--mut);
  text-transform: uppercase;
  letter-spacing: .4px;
  margin: 12px 0 5px;
}
input[type=text], input[type=number], input[type=date], input[type=password], input[type=time], input[type=email], select, textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--bg);
  padding: 11px 12px;
  font: inherit;
  color: var(--ink);
}
textarea { min-height: 120px; resize: vertical; font-size: 12px; }

.seg { display: flex; background: var(--bg); border-radius: 10px; padding: 3px; gap: 3px; margin-top: 4px; }
.seg-btn {
  flex: 1;
  padding: 9px 4px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  color: var(--mut);
  white-space: nowrap;
}
.seg-btn.active { background: var(--pine); color: #fff; }

.btn {
  display: block;
  width: 100%;
  padding: 13px;
  border-radius: 12px;
  background: var(--bg);
  color: var(--ink);
  font-weight: 700;
  font-size: 14px;
  margin-top: 10px;
  text-align: center;
}
.btn.primary { background: var(--pine); color: #fff; }
.btn.danger { background: #FBEAE6; color: var(--neg); }
.btnrow { display: flex; gap: 8px; }
.btnrow .btn { flex: 1; }
.minibtn {
  flex: 0 0 auto;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 700;
  color: var(--pine);
}
.hint { color: var(--mut); font-size: 13px; margin: 6px 0; line-height: 1.45; }
.about { color: var(--mut); font-size: 11px; text-align: center; margin-top: 16px; }

.addrow { display: flex; gap: 8px; margin-top: 6px; }
.addrow input { flex: 1; }

/* ---------- toggles ---------- */
.togglelist { border: 1px solid var(--line); border-radius: 12px; overflow: hidden; margin-top: 4px; }
.togglerow {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px;
  border-top: 1px solid var(--line);
  font-size: 14px;
  font-weight: 600;
}
.togglerow:first-child { border-top: 0; }
.togglerow.indent { padding-left: 26px; font-weight: 500; color: var(--mut); }
.switch {
  appearance: none;
  -webkit-appearance: none;
  width: 44px; height: 26px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  transition: background .15s;
  flex: 0 0 auto;
}
.switch::after {
  content: "";
  position: absolute;
  top: 3px; left: 3px;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.25);
  transition: transform .15s;
}
.switch:checked { background: var(--pine-2); }
.switch:checked::after { transform: translateX(18px); }

/* ---------- lists (tasks / grocery) ---------- */
.checkitem {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px;
  border-top: 1px solid var(--line);
  font-size: 14px;
}
.checkitem:first-child { border-top: 0; }
.cbox {
  width: 22px; height: 22px;
  border-radius: 7px;
  border: 2px solid var(--pine-2);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 13px;
  flex: 0 0 auto;
}
.checkitem.done .cbox { background: var(--pine-2); }
.checkitem .ct { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.checkitem.done .ct { text-decoration: line-through; color: var(--mut); }
.delx { color: var(--mut); font-size: 15px; padding: 4px 6px; }

/* ---------- weight ---------- */
.water-big { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 10px; }
.water-count { text-align: center; }
.water-count b { font-size: 34px; font-variant-numeric: tabular-nums; }
.water-count span { display: block; font-size: 12px; color: var(--mut); }
#w-chart { margin-top: 12px; }
#w-chart svg { width: 100%; height: auto; display: block; }
.histrow {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 13px;
  padding: 8px 2px;
  border-top: 1px solid var(--line);
  font-variant-numeric: tabular-nums;
}

/* ---------- report ---------- */
.stats { display: flex; gap: 8px; margin: 8px 0 4px; }
.stat {
  flex: 1;
  background: var(--bg);
  border-radius: 12px;
  padding: 10px;
  text-align: center;
}
.stat span { display: block; font-size: 11px; color: var(--mut); font-weight: 700; text-transform: uppercase; letter-spacing: .4px; }
.stat b { font-size: 14px; font-variant-numeric: tabular-nums; }
.pos { color: var(--pos); }
.neg { color: var(--neg); }
.r-h { font-size: 12px; font-weight: 800; color: var(--mut); text-transform: uppercase; letter-spacing: .4px; margin: 14px 0 2px; }

/* ---------- toast ---------- */
#toast {
  position: fixed;
  left: 50%;
  bottom: calc(92px + env(safe-area-inset-bottom));
  transform: translateX(-50%);
  background: var(--pine-deep);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 10px 16px;
  border-radius: 999px;
  z-index: 90;
  max-width: 86vw;
  text-align: center;
  box-shadow: 0 6px 18px rgba(0,0,0,.28);
}

@media (prefers-reduced-motion: reduce) {
  .sheet { transition: none; }
  .grid.slide-l, .grid.slide-r { animation: none; }
  .switch, .switch::after { transition: none; }
}

/* ================= v3 additions ================= */

.fab2 {
  position: fixed;
  right: 158px;
  bottom: calc(18px + env(safe-area-inset-bottom));
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--card);
  color: var(--pine);
  font-size: 24px;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(10,30,70,.18);
  border: 1px solid var(--line);
  z-index: 30;
}
.fab2:active { transform: scale(.94); opacity: 1; }

.chips.dark { margin: 4px 0 8px; }
.chips.dark .chipbtn { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
.chips.dark .chipbtn.active { background: var(--pine); color: #fff; border-color: var(--pine); }

.evline {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px;
  padding: 7px 2px;
  border-top: 1px solid var(--line);
  color: var(--ink);
}
.evline:first-child { border-top: 0; }
.evline .sub { color: var(--mut); font-size: 12px; margin-left: auto; text-align: right; }

.hubsec { font-size: 12px; font-weight: 800; color: var(--mut); text-transform: uppercase; letter-spacing: .4px; margin: 14px 0 2px; }
.hubsec:first-child { margin-top: 4px; }
.hubsec .cnt { color: var(--pine-2); }
.hub-date { color: var(--mut); font-size: 11px; margin-left: auto; white-space: nowrap; }

.armed { background: var(--neg) !important; color: #fff !important; border-radius: 8px; }

.bar-wrap { background: var(--bg); border-radius: 999px; height: 10px; overflow: hidden; margin-top: 6px; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--pine-2), var(--pine)); border-radius: 999px; }
.goalrow { padding: 10px 2px; border-top: 1px solid var(--line); }
.goalrow:first-child { border-top: 0; }
.goalrow .gr-top { display: flex; align-items: center; gap: 8px; }
.goalrow .gr-top b { flex: 1; font-size: 14px; }
.goalrow .gr-top span { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; }

.streak { font-size: 12px; color: var(--mut); font-variant-numeric: tabular-nums; white-space: nowrap; }
.streak b { color: var(--pine-2); }

.kidbal {
  text-align: center;
  font-size: 26px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--pine);
  padding: 6px 0 2px;
}

.medrow { padding: 9px 2px; border-top: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.medrow:first-child { border-top: 0; }
.medrow .mi { width: 20px; text-align: center; }
.medrow .mt { flex: 1; min-width: 0; }
.medrow .mt b { display: block; font-size: 14px; font-weight: 600; }
.medrow .mt small { color: var(--mut); font-size: 11px; }
.medrow .slotchip {
  font-size: 10px; font-weight: 700;
  background: #E6F1EB; color: var(--pine);
  border-radius: 6px; padding: 1px 6px;
}
.medrow.donemed .mt b { text-decoration: line-through; color: var(--mut); }

.times-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.times-row span { font-size: 12px; color: var(--mut); font-weight: 700; width: 62px; }
.times-row input { flex: 1; }

.planbox { border: 1px solid var(--line); border-radius: 12px; padding: 10px 12px; margin-top: 8px; }
.planbox b { font-size: 14px; color: var(--pine); }
.planbox p { margin: 4px 0 0; font-size: 12px; color: var(--mut); line-height: 1.5; }

.lock { color: var(--mut); font-size: 12px; margin-left: 6px; }
.togglerow.boxed { border: 1px solid var(--line); border-radius: 12px; margin-top: 6px; }

.ghist-date { font-size: 12px; font-weight: 800; color: var(--mut); margin: 12px 0 2px; }

.duebadge {
  position: absolute;
  top: -2px; right: -2px;
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #C0392B;
  border: 2px solid var(--bg);
}
.modrow-done { opacity: .55; }
.modrow-done .ml { color: var(--mut); }
.formerr { color: var(--neg); font-size: 12px; font-weight: 700; margin: 6px 0 0; }

/* ================= 4.0 additions ================= */

.setnav { text-align: left; position: relative; }
.setnav:after { content: "\203A"; position: absolute; right: 14px; color: var(--mut); }

.chipbtn.plus { font-weight: 800; padding: 5px 10px; color: var(--pine); background: #E6F1EB; }

.login {
  position: fixed; inset: 0; z-index: 200;
  background: linear-gradient(160deg, var(--pine-deep) 0%, var(--pine-2) 100%);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.login-card {
  background: var(--card); border-radius: 18px;
  padding: 22px 18px; width: 100%; max-width: 340px;
  box-shadow: 0 18px 50px rgba(0,0,0,.35);
  text-align: center;
}
.login-card h2 { margin: 6px 0 14px; color: var(--pine); }
.login-card input { width: 100%; margin-top: 8px; text-align: left; }
.login-card .btn { margin-top: 12px; }
.login-logo {
  width: 54px; height: 54px; margin: 0 auto;
  border-radius: 14px;
  background: var(--pine-deep);
  color: #fff; font-size: 30px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

.kidbar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px 2px;
}
.kidbar span { font-weight: 800; font-size: 15px; }
.kidbar b { margin-left: auto; font-size: 17px; font-variant-numeric: tabular-nums; color: var(--gold); }

.kidmode .hbtns, .kidmode .chips, .kidmode .fab, .kidmode .fab2,
.kidmode .daycard .linkbtn, .kidmode #day-balance, .kidmode #day-events { display: none !important; }
.cell .kdot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--gold); margin-top: 1px;
}

body { overflow-x: hidden; }
.brand .syncdot { font-size: 9px; vertical-align: middle; }
.tinysel { width: 92px; flex: none; }
.rtag { color: var(--mut); font-size: 10px; font-weight: 700; }

.qa-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qa {
  display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--line);
  border-radius: 12px; padding: 12px 10px;
  font-size: 13px; font-weight: 700; color: var(--ink);
  text-align: left;
}
.qa:active { transform: scale(.97); }
.qa .qi { font-size: 18px; }
.locked-row { opacity: .5; }

.chipbtn.locked { opacity: .55; }

.qa-upsell {
  margin: 10px 2px 0;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  color: #D98880;
}

.trow { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.tswatch {
  width: 44px; height: 44px; border-radius: 50%;
  border: 3px solid var(--line);
  position: relative;
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
}
.tswatch.on { border-color: var(--gold); }
.tswatch .tlock { position: absolute; font-size: 13px; }

.jumpbtn {
  position: relative;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold);
  border: none;
  padding: 0;
}
.jumpbtn::after {
  content: "\21BB";
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -52%);
  color: #1C1400;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
}
.jumpbtn:active { transform: scale(.94); }

/* ================= 4.5 ================= */
.cell .wx { font-size: 9px; line-height: 1; margin-top: 1px; }
.daywx { font-size: 12px; color: var(--mut); margin-left: 8px; }

.sheet::before {
  content: "";
  display: block;
  width: 36px; height: 4px;
  border-radius: 999px;
  background: var(--line);
  margin: 0 auto 10px;
}

.qa .qi {
  width: 34px; height: 34px;
  border-radius: 10px;
  background: rgba(47,123,229,.12);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 17px;
}
.planbox:nth-of-type(2) { border: 1.5px solid var(--gold); }

#loc-viewport {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: 12px;
  border: 1px solid var(--line);
  background: var(--bg);
}
#loc-map { position: absolute; left: 0; top: 0; width: 768px; height: 768px; transform-origin: 0 0; }
.loctile { position: absolute; width: 256px; height: 256px; }
.locpin {
  position: absolute;
  transform: translate(-50%, -100%);
  background: var(--pine);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  width: 34px; height: 34px;
  border-radius: 50% 50% 50% 4px;
  display: flex; align-items: center; justify-content: center;
  border: 2.5px solid #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.locpin.main { background: var(--gold); color: #4A3305; }
.loczoom {
  position: absolute;
  right: 8px; top: 8px;
  display: flex; flex-direction: column; gap: 6px;
  z-index: 5;
}
.loczoom .minibtn { width: 34px; height: 34px; font-size: 17px; padding: 0; }
.osm { font-size: 9px; text-align: right; margin-top: 4px; }

.roundbtn {
  font-size: 20px; font-weight: 700; line-height: 1; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ================= 4.6 hubs + notices ================= */
.fab2 { font-size: 26px; font-weight: 800; }
.fab2.due { border: 2.5px solid var(--pine); }
.fab2.due .svgi { fill: var(--pine); }

.bellwrap { position: relative; }
.bellbadge {
  position: absolute;
  top: 0; right: 0;
  min-width: 15px; height: 15px;
  border-radius: 999px;
  background: var(--gold);
  color: #1C1400;
  font-size: 9px; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  padding: 0 3px;
}

.appgrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.apptile {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 6px 10px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: 11.5px; font-weight: 700; color: var(--ink);
}
.apptile .ai { font-size: 24px; }
.apptile:active { transform: scale(.96); }

.famgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 12px; }
.famcard {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
}
.famcard b { font-size: 14px; }
.famcard small { color: var(--mut); font-size: 10.5px; }
.favatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 3px;
}

.notice {
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 11px;
  margin-top: 8px;
}
.notice b { font-size: 12.5px; }
.notice .sub { float: right; }
.notice p { margin: 3px 0 0; font-size: 13.5px; }

/* nicer task hub rows */
.checkitem {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 9px 10px;
  margin-top: 7px;
}
.checkitem.done { opacity: .55; }
.hubsec {
  margin-top: 14px;
  font-size: 11px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mut);
}
.hubsec .cnt {
  background: var(--bg);
  border-radius: 999px;
  padding: 1px 7px;
  font-size: 10px;
}

/* ================= 5.0 ================= */
.svgi { width: 1.1em; height: 1.1em; fill: currentColor; vertical-align: -0.18em; }
.icobtn .svgi { width: 20px; height: 20px; }
.apptile .ai .svgi, .apptile .svgi { width: 26px; height: 26px; color: var(--pine); }
.qa .qi .svgi { width: 19px; height: 19px; color: var(--pine); }
.fab2 .svgi { width: 26px; height: 26px; }
.jumpbtn .svgi { width: 15px; height: 15px; fill: #1C1400; }
.jumpbtn::after { content: none; }
.mrow-ic .svgi, .mi .svgi { color: var(--pine); }

.vmic {
  width: 84px; height: 84px;
  border-radius: 50%;
  background: var(--pine);
  color: #fff;
  font-size: 34px;
  display: flex; align-items: center; justify-content: center;
  margin: 14px auto 6px;
  box-shadow: 0 0 0 8px rgba(20,138,86,.15);
}
.vmic:active { transform: scale(.95); }
.center { text-align: center; }
.vtext { text-align: center; font-size: 15px; font-weight: 700; min-height: 22px; }

.proofimg { width: 100%; border-radius: 12px; border: 1px solid var(--line); }

/* ================= 5.1.1 ================= */
html, body { overscroll-behavior: none; }

.fabmic { right: 88px; }
.fabmic .svgi { width: 24px; height: 24px; }
.kidmode .fabmic { display: none !important; }

#sheet-water, #sheet-weight, #sheet-tasks, #sheet-taskhub, #sheet-grocery,
#sheet-meals, #sheet-health, #sheet-bills, #sheet-goals, #sheet-habits,
#sheet-journal, #sheet-golf, #sheet-kids, #sheet-workout, #sheet-locator,
#sheet-apps, #sheet-family, #sheet-bell, #sheet-settings { min-height: 62vh; }

/* ================= 5.2 ================= */
.checkitem.late { border-color: var(--neg); border-width: 1.5px; }
.checkitem.late .ct { color: var(--neg); font-weight: 700; }
.sheet-head .icobtn { margin-left: 6px; }

/* ================= 5.6 plans ================= */
.planbox.tappable { cursor: pointer; }
.planbox.sel { border: 2px solid var(--pine); }
.plansell { font-weight: 700; color: var(--pine); margin: 6px 0 8px; }
.planfeat { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.planfeat .svgi { color: var(--pine); flex: none; }

/* ================= 5.7 ================= */
.billseg { margin-bottom: 10px; }
.planbox.sel { background: var(--pine); border-color: var(--pine); color: #fff; }
.planbox.sel b { color: #fff; }
.planbox.sel p { color: #DFF0E6; }
.planbox.sel .hint, .planbox.sel .plansell { color: #E8F3EC; }
.planbox.sel .planfeat { color: #fff; }
.planbox.sel .planfeat .svgi { color: var(--gold); }
.curchip {
  display: inline-block;
  margin-left: 8px;
  background: #fff;
  color: var(--pine);
  border: 1px solid var(--pine);
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  vertical-align: middle;
}
.planbox.sel .curchip { background: #fff; color: var(--pine); }
.tswatch { margin: 3px; }

/* ================= 5.7.2 promo ================= */
.offchip {
  display: inline-block;
  margin-left: 8px;
  background: var(--gold);
  color: #1C1400;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
  vertical-align: middle;
}
.was { display: block; margin-top: 2px; font-size: 11px; color: var(--pos); font-weight: 700; }
.planbox.sel .was { color: #CDE7D8; }

/* ================= 5.8 feature list ================= */
.modcap {
  margin: 14px 0 2px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--mut);
}
.togglerow.locked-row { opacity: .55; }
.togglerow.locked-row .switch { pointer-events: auto; }

/* ================= 5.8.3 ================= */
.strike { text-decoration: line-through; color: var(--mut); font-weight: 600; margin: 0 3px; font-size: 13px; }
.planbox.sel .strike { color: #CDE7D8; }

/* ================= 5.8.4 ================= */
.uprow { text-align: right; margin-top: 10px; }
.upbtn {
  background: var(--gold);
  color: #1C1400;
  border: none;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  padding: 9px 16px;
}
.upbtn:active { transform: scale(.97); }
.cancelsub {
  text-align: center;
  font-style: italic;
  color: var(--mut);
  font-size: 11px;
  margin-top: 16px;
}

/* ================= 6.0 ================= */
.hamb { margin-right: 4px; }
.fabmic { border: 2.5px solid var(--pine); }

.weekgrid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  margin: 10px 0;
}
.wgcol {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 8px 4px;
  text-align: center;
  min-height: 96px;
}
.wgcol.today { border-color: var(--gold); border-width: 2px; }
.wgcol.sel { background: var(--bg); }
.wgd { font-size: 10px; color: var(--mut); font-weight: 700; }
.wgn { font-size: 16px; font-weight: 800; }
.wgm { font-size: 9px; font-weight: 700; margin-top: 3px; }
.wgm.pos { color: var(--pos); }
.wgm.neg { color: var(--neg); }
.wgt { font-size: 10px; color: var(--mut); margin-top: 2px; }
.wgt .svgi { width: 10px; height: 10px; }

.wsrow {
  display: flex; align-items: center; gap: 10px;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 11px 12px;
  margin-top: 8px;
}
.wsrow.active { border-color: var(--pine); border-width: 2px; }
.wsrow .svgi { width: 22px; height: 22px; color: var(--pine); flex: none; }
.wsrow b { font-size: 14px; display: block; }
.wsrow small { color: var(--mut); font-size: 11px; }
.wschip {
  margin-left: auto;
  background: var(--pine);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 8px;
}
.densrow { text-align: right; margin-bottom: 4px; }
#hub-list.compact .checkitem { padding: 5px 8px; margin-top: 4px; }
#hub-list.compact .checkitem .ct { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ================= 6.0.2 ================= */
.cell.dim { opacity: .38; }
.checkitem.slimline { padding: 6px 10px; margin-top: 5px; display: flex; align-items: center; gap: 8px; }
.checkitem.slimline .ct { font-size: 13px; }

/* ================= 6.2/6.4 sticky band, original colors intact ================= */
header { position: sticky; top: 0; z-index: 60; }
.bar { justify-content: flex-start; gap: 8px; }
.brand { margin-right: auto; }
#grid-clip { overflow: hidden; }
#grid-clip.gliding { transition: height .26s ease; }
#grid.gliding { transition: transform .26s ease; }

/* ================= 6.4 business preview ================= */
.wsbanner {
  display: inline-block;
  background: var(--pine);
  color: #fff;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 800;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: middle;
}
.bizboard { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 8px; }
.bizcol { min-width: 150px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 8px; }
.bizcolh { font-size: 11px; font-weight: 800; color: var(--mut); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.bizcard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 9px; font-size: 12px; margin-top: 6px; display: flex; justify-content: space-between; gap: 6px; }
.bizcard .bizmove { color: var(--pine); font-weight: 800; }

/* ================= 6.5 sticky week row ================= */
#grid { display: block; }
.grow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 5px; }
/* month scrolls freely; the fixed week bar takes over */

/* ================= 6.6 ================= */
.bizadd { display: flex; gap: 8px; margin: 10px 0; }
.bizadd input { flex: 1; }
.bizacts { display: flex; gap: 10px; color: var(--pine); font-weight: 800; flex: none; }
.bizcard { align-items: center; }
#biz-board textarea { width: 100%; box-sizing: border-box; margin-top: 8px; }
#biz-board .bizboard { margin-top: 8px; }

/* ================= 6.7 drawer + notionish tasks ================= */
#drawer {
  position: fixed;
  top: 0; bottom: 0; left: 0;
  width: 80%;
  max-width: 320px;
  background: var(--card);
  z-index: 70;
  transform: translateX(-103%);
  transition: transform .26s ease;
  box-shadow: 8px 0 24px rgba(0, 0, 0, .18);
  overflow-y: auto;
  padding: calc(10px + env(safe-area-inset-top)) 14px 20px;
  box-sizing: border-box;
}
#drawer.open { transform: translateX(0); }
.dwhead { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.dwactive {
  display: flex; align-items: center; gap: 10px;
  background: var(--pine-deep);
  color: #fff;
  border-radius: 14px;
  padding: 13px 12px;
  margin-bottom: 10px;
}
.dwactive .svgi { width: 24px; height: 24px; color: #fff; flex: none; }
.dwactive small { color: #CBE6D6; display: block; font-size: 11px; }
.dwitem {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 8px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}
.dwitem .svgi { width: 18px; height: 18px; color: var(--pine); flex: none; }
.dwitem.on { background: var(--bg); }
.dwitem:active { background: var(--bg); }
.stchip {
  flex: none;
  background: var(--pine-deep);
  color: #fff;
  border-radius: 7px;
  font-size: 10px;
  font-weight: 800;
  padding: 3px 7px;
}
.whochip {
  flex: none;
  margin-left: auto;
  width: 24px; height: 24px;
  border-radius: 999px;
  background: var(--pine);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}
.whochip.empty { background: var(--bg); color: var(--mut); border: 1px dashed var(--line); }
.prib { color: var(--neg); }
.bizcard.hot { border-color: var(--neg); }

/* ================= 6.9 business full page ================= */
body.bizmode .monthrow,
body.bizmode #chips,
body.bizmode #cal-wrap,
body.bizmode #daycard,
body.bizmode .fabwrap,
body.bizmode #fab,
body.bizmode #fab2,
body.bizmode #fab-voice { display: none !important; }
#bizpage {
  padding: 10px 14px calc(30px + env(safe-area-inset-bottom));
  min-height: 70vh;
}
#bizpage.hidden { display: none; }
.bizhead {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 6px;
}
.bizhead b { font-size: 17px; }
.chips-row { display: flex; flex-wrap: wrap; gap: 7px; margin: 6px 0 2px; }
#bizpage input, #bizpage textarea {
  width: 100%; box-sizing: border-box;
  margin-top: 6px;
}
#bizpage .bizadd input { margin-top: 0; }
#bizpage .btn, #bizpage .btn2 { margin-top: 12px; }
.btn2.danger { color: var(--neg); border-color: var(--neg); }
#bizpage .checkitem { background: var(--card); }

/* ================= 7.2 full-page feature sheets ================= */
body.sheetfull .monthrow,
body.sheetfull #chips,
body.sheetfull #cal-wrap,
body.sheetfull #daycard,
body.sheetfull #fab,
body.sheetfull #fab2,
body.sheetfull #fab-voice,
body.sheetfull .fabwrap { display: none !important; }
.sheet.fullpage {
  top: calc(58px + env(safe-area-inset-top));
  bottom: 0;
  max-height: none;
  height: auto;
  border-radius: 14px 14px 0 0;
}

/* ================= 7.2.1 voice polish ================= */
.micwrap { display: flex; justify-content: center; margin: 18px 0 6px; }
.vmic {
  width: 92px; height: 92px;
  border-radius: 999px;
  border: none;
  background: var(--pine-deep);
  color: #fff;
  font-size: 38px;
}
.micwrap.pulse .vmic { animation: micpulse 1.2s ease-out infinite; background: var(--neg); }
@keyframes micpulse {
  0% { box-shadow: 0 0 0 0 rgba(206, 48, 48, .5); }
  70% { box-shadow: 0 0 0 26px rgba(206, 48, 48, 0); }
  100% { box-shadow: 0 0 0 0 rgba(206, 48, 48, 0); }
}
.vstatus {
  text-align: center;
  color: var(--ink);
  font-size: 14px;
  margin: 14px 0 4px;
}
.vtry { margin: 14px 0 4px; }
.vtry .vline {
  color: var(--ink);
  font-size: 13px;
  margin: 7px 0;
}

/* ================= 7.3 modern surface language ================= */
.sheet { border-radius: 24px 24px 0 0; padding: 16px 18px calc(22px + env(safe-area-inset-bottom)); }
.sheet-head { margin-bottom: 12px; }
.sheet-head b { font-size: 18px; font-weight: 800; letter-spacing: -.01em; }
.sheet input[type="text"], .sheet input[type="number"], .sheet input[type="date"],
.sheet input[type="time"], .sheet input[type="password"], .sheet input[type="email"],
.sheet input:not([type]), .sheet textarea, .sheet select {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 15px;
  background: var(--card);
  color: var(--ink);
}
.sheet input:focus, .sheet textarea:focus, .sheet select:focus {
  outline: none;
  border-color: var(--pine);
  box-shadow: 0 0 0 3px rgba(0, 96, 44, .14);
}
.sheet textarea { min-height: 130px; line-height: 1.5; }
.btn { border-radius: 16px; font-weight: 800; padding: 15px; font-size: 15px; }
.btn2 { border-radius: 16px; font-weight: 700; padding: 13px; }
.minibtn { border-radius: 999px; padding: 10px 16px; font-weight: 700; }
.seg { background: var(--bg); border-radius: 999px; padding: 4px; gap: 4px; }
.seg-btn { border-radius: 999px; padding: 10px 8px; font-weight: 700; font-size: 13px; }
.seg.slim .seg-btn { padding: 8px 6px; font-size: 12px; }
.chipbtn { border-radius: 999px; padding: 9px 15px; font-weight: 700; }
.checkitem, .medrow, .entry, .histrow {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 13px 14px;
  margin: 9px 0;
  background: var(--card);
}
.checkitem.slimline { padding: 10px 12px; margin: 7px 0; }
.lbl { font-size: 12px; font-weight: 700; color: var(--mut); letter-spacing: .04em; text-transform: uppercase; margin: 16px 0 7px; }
.modcap { font-size: 11px; letter-spacing: .1em; }
.empty {
  border: 1.5px dashed var(--line);
  border-radius: 16px;
  padding: 26px 14px;
  text-align: center;
  color: var(--mut);
  margin: 12px 0;
}
.addcard {
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 12px;
  background: var(--bg);
  margin-bottom: 12px;
}
.addcard input#t-new { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.addcard .seg { background: var(--card); margin-bottom: 10px; }
.addcard .addrow { display: flex; gap: 8px; align-items: center; }
.addcard .addrow select { flex: 1; }
.addcard #t-date { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.jcard {
  border: 1px solid var(--line);
  border-left: 4px solid var(--pine);
  border-radius: 14px;
  padding: 13px 14px;
  margin: 10px 0;
  background: var(--card);
}
.jdate { font-size: 12px; font-weight: 800; color: var(--pine); margin-bottom: 5px; }
.jbody { font-size: 14px; line-height: 1.55; color: var(--ink); white-space: pre-wrap; }

/* ================= 7.4 voice compact ================= */
.micwrap { margin: 10px 0 2px; }
.vmic { width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; }
.vmic svg { width: 34px; height: 34px; fill: #fff; }
.vstatus { margin: 12px 0 2px; }
.chatrow { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.chatrow input { flex: 1; min-width: 0; }
.chatrow .icobtn.dark { color: var(--ink); font-size: 20px; flex: none; }
.chatrow .roundbtn { flex: none; width: 46px; height: 46px; font-size: 19px; }

/* ================= 7.5 features list + drawer polish ================= */
.togglelist { border: none; }
.togglelist .togglerow, .togglerow.boxed {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px;
  margin: 8px 0;
  background: var(--card);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.togglelist .modcap {
  display: inline-block;
  background: var(--bg);
  color: var(--pine);
  border-radius: 999px;
  padding: 6px 13px;
  font-weight: 800;
  letter-spacing: .08em;
  margin: 16px 0 4px;
}

/* ================= 7.5.2 drawer profile ================= */
.dwavatar {
  width: 40px; height: 40px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  display: flex; align-items: center; justify-content: center;
  flex: none;
}

/* ================= 7.6 compact money + tasks ================= */
.entry { padding: 11px 12px; margin: 7px 0; }
.entry.oneline .t { display: flex; align-items: center; gap: 7px; min-width: 0; }
.entry.oneline .t b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.entry .accttag { font-size: 10px; padding: 2px 7px; border-radius: 999px; background: var(--bg); color: var(--mut); flex: none; }
.repic { width: 13px; height: 13px; fill: var(--pine); flex: none; }
.entry .a { font-size: 14px; white-space: nowrap; }
.exline { display: block; color: var(--mut); font-size: 11px; margin-top: 2px; }
.checkitem.done { opacity: .62; }
.checkitem.done .ct { text-decoration: line-through; }
.addcard { padding: 10px; }
.addcard input#t-new { margin-bottom: 8px; padding: 11px 12px; }
.addcard .seg { margin-bottom: 8px; }
.addcard .addrow select { padding: 10px 12px; }
#t-tabs { margin: 10px 0 4px; }
#hub-list.compact .checkitem, #t-list .checkitem { padding: 10px 12px; margin: 6px 0; }

/* ================= 7.11 ================= */
.seg-btn.exp.active { background: var(--neg); color: #fff; }
#f-amt.neg-amt { color: var(--neg); font-weight: 700; }
.bellbadge {
  background: #FF6B6B;
  color: #fff;
  min-width: 16px; height: 16px;
  font-size: 10px; font-weight: 800;
  box-shadow: 0 1px 4px rgba(200, 40, 40, .35);
}
img.dwavatar { object-fit: cover; border: none; }
#own-photo { flex: 1; min-width: 0; }

/* ================= 7.18 task add card v2 ================= */
.addcard.v2 {
  border: none;
  background: var(--card);
  box-shadow: 0 6px 22px rgba(3, 40, 20, .10), 0 1px 3px rgba(3, 40, 20, .08);
  border-radius: 20px;
  padding: 14px;
}
.addcard.v2 .addtop { display: flex; gap: 10px; align-items: center; margin-bottom: 10px; }
.addcard.v2 .addtop input {
  flex: 1; min-width: 0;
  background: var(--bg);
  border: none;
  border-radius: 14px;
  padding: 15px 14px;
  font-size: 15px;
}
.addcard.v2 .addtop input:focus { box-shadow: 0 0 0 3px rgba(0, 96, 44, .16); }
.roundbtn.big { width: 52px; height: 52px; font-size: 24px; flex: none; }
.addcard.v2 .seg { background: var(--bg); margin-bottom: 10px; }
.addgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.microlbl { display: block; font-size: 10px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--mut); margin: 0 0 5px 3px; }
.addgrid select { width: 100%; box-sizing: border-box; background: var(--bg); border: none; border-radius: 12px; padding: 12px; font-size: 14px; }
.addcard.v2 #t-days { width: 100%; box-sizing: border-box; margin-top: 10px; background: var(--bg); border: none; border-radius: 12px; padding: 12px; }
.addcard.v2 #t-date { width: 100%; box-sizing: border-box; margin-bottom: 10px; background: var(--bg); border: none; border-radius: 12px; padding: 12px; }

/* ================= 7.19 notifications + dropdown ================= */
.notice { position: relative; padding-right: 26px; }
.notice .ndot {
  position: absolute; right: 12px; top: 14px;
  width: 10px; height: 10px; border-radius: 999px;
  background: var(--pine);
}
.notice.read { opacity: .55; }
.notice.read b, .notice.read p { color: var(--mut); }
.clearwrap { display: flex; justify-content: center; margin: 12px 0 4px; }
.clearwrap .btn2 { min-width: 140px; }
.ddwrap { position: relative; }
.ddbtn {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between;
  background: var(--bg); border: none; border-radius: 12px;
  padding: 12px; font-size: 14px; color: var(--ink);
}
.ddbtn .chev { color: var(--mut); font-size: 12px; }
.ddmenu {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px);
  background: var(--card); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: 0 10px 28px rgba(3, 40, 20, .16);
  padding: 6px; z-index: 40;
}
.ddopt {
  display: block; width: 100%; text-align: left;
  background: none; border: none; border-radius: 10px;
  padding: 11px 12px; font-size: 14px; color: var(--ink);
}
.ddopt.on { background: var(--bg); font-weight: 700; color: var(--pine); }

/* ================= 7.21.1 fab dock shield ================= */
.fabdock {
  position: fixed;
  right: 8px;
  bottom: calc(8px + env(safe-area-inset-bottom));
  width: 232px;
  height: 82px;
  z-index: 29;
}
.fabdock .fab { position: absolute; right: 10px; bottom: 10px; }
.fabdock .fab2 { position: absolute; right: 150px; bottom: 10px; }
.fabdock .fabmic { position: absolute; right: 80px; bottom: 10px; }
.kidmode .fabdock { display: none; }
body.sheetfull .fabdock { display: none; }

/* ================= 7.23 boot splash ================= */
#boot {
  position: fixed; inset: 0; z-index: 999;
  background: linear-gradient(180deg, #0B8F47 0%, #01361A 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px;
  transition: opacity .3s ease;
}
#boot.fade { opacity: 0; pointer-events: none; }
.bootlogo { width: 110px; height: auto; animation: bootpulse 1.4s ease-in-out infinite; }
@keyframes bootpulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.bootdots { display: flex; gap: 8px; }
.bootdots i {
  width: 9px; height: 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .85);
  animation: bootdot 1.2s ease-in-out infinite;
}
.bootdots i:nth-child(2) { animation-delay: .18s; }
.bootdots i:nth-child(3) { animation-delay: .36s; }
@keyframes bootdot {
  0%, 100% { opacity: .35; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(-5px); }
}

.bootver { color: rgba(255, 255, 255, .95); font-size: 22px; font-weight: 800; letter-spacing: .04em; }

.wdel {
  margin-left: 8px;
  border: none; background: var(--bg); color: var(--mut);
  width: 24px; height: 24px; border-radius: 999px;
  font-size: 11px; vertical-align: middle;
}
.wdel.armed { width: auto; padding: 0 10px; background: var(--neg); color: #fff; font-weight: 700; }

/* ================= 7.36 day grid picker ================= */
.ddmenu.daygrid {
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px;
  padding: 10px;
}
.dgc {
  border: none; background: var(--bg); color: var(--ink);
  border-radius: 10px; padding: 9px 0; font-size: 13px; font-weight: 600;
}
.dgc.on { background: var(--pine); color: #fff; }
/* deadline dots */
.taskdot.red { background: #E5484D; }
.taskdot.red.pulse { animation: dotpulse 1.2s ease-in-out infinite; }
@keyframes dotpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 72, 77, .55); }
  50% { box-shadow: 0 0 0 5px rgba(229, 72, 77, 0); }
}

/* ================= 7.37 desktop shell ================= */
.dwapps { display: none; }
@media (min-width: 1000px) {
  #deskwrap {
    display: grid;
    grid-template-columns: 430px minmax(0, 1fr);
    gap: 22px;
    max-width: 1180px;
    margin: 0 16px 0 300px;
    padding: 0 18px;
    align-items: start;
    transition: margin-left .22s ease;
  }
  body.sbhide #deskwrap { margin-left: auto; margin-right: auto; }
  #cal-wrap { position: sticky; top: calc(74px + env(safe-area-inset-top, 0px)); }

  #drawer {
    transform: none;
    top: calc(58px + env(safe-area-inset-top, 0px));
    bottom: 0; left: 0;
    width: 280px;
    border-right: 1px solid var(--line);
    box-shadow: none;
    border-radius: 0;
    padding-top: 10px;
    transition: transform .22s ease;
    z-index: 40;
  }
  body.sbhide #drawer { transform: translateX(-102%); }
  #drawer .dwhead .icobtn { display: none; }
  .scrim { display: none !important; }
  .dwapps { display: block; padding: 10px 6px 20px; border-top: 1px solid var(--line); margin-top: 10px; }
  .dwapps .dwsecttl { font-size: 11px; letter-spacing: .08em; color: var(--mut); margin: 4px 8px 8px; }
  .dwapps .appgrid { grid-template-columns: 1fr 1fr; gap: 8px; }

  .sheet.open {
    left: 50%; right: auto; bottom: 40px;
    transform: translate(-50%, 0);
    width: 640px; max-width: 92vw;
    border-radius: 18px;
  }
  .sheet.fullpage.open { top: 80px; bottom: 40px; }
}

/* ================= 7.38 desktop refinement ================= */
.vsumrow { display: flex; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--line); font-size: 14px; align-items: flex-start; }
.vsumrow:last-child { border-bottom: none; }
.vsumok { color: var(--pine); font-weight: 800; }
.vconfrow { cursor: pointer; align-items: center; }
.vcheck { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 7px; border: 2px solid var(--pine); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: transparent; }
.vcheck.on { background: var(--pine); color: #fff; }
.vcheck.no { border-color: var(--line); color: #98a29c; }
.vsumrow.vcoff { opacity: .55; }
.clearwrap { gap: 10px; }
#desk-tasks { margin-top: 14px; background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; }
#desk-tasks .dtttl { font-weight: 700; font-size: 13px; color: var(--mut); margin-bottom: 6px; letter-spacing: .03em; }
@media (min-width: 1000px) {
  header .monthrow, header .chips, header #kidbar { display: none; }
  header { padding-bottom: 4px; }
  .monthrow.incol { background: transparent; padding: 2px 0 6px; }
  .monthrow.incol .mtitle, .monthrow.incol #m-name { color: var(--ink); }
  .monthrow.incol .icobtn { color: var(--ink); background: var(--bg); border-radius: 10px; }
  .chips.incol { background: transparent; padding: 0 0 10px; }
  .chips.incol .chip { background: var(--bg); color: var(--ink); border: 1px solid var(--line); }
  .chips.incol .chip.on { background: var(--pine); color: #fff; border-color: var(--pine); }
  #deskwrap { grid-template-columns: 470px minmax(0, 1fr); }
}

/* ===== 7.45 mic states: pastel red idle, bright green live (theme-proof) ===== */
.vmic { background: #F2B3B3; box-shadow: 0 0 0 8px rgba(242, 179, 179, .25); }
.vmic svg { fill: #7E2626; }
.micwrap.pulse .vmic { background: #1FD068; }
.micwrap.pulse .vmic svg { fill: #fff; }
@keyframes micpulse {
  0% { box-shadow: 0 0 0 0 rgba(31, 208, 104, .55); }
  70% { box-shadow: 0 0 0 26px rgba(31, 208, 104, 0); }
  100% { box-shadow: 0 0 0 0 rgba(31, 208, 104, 0); }
}

/* ===== 7.47 web welcome gate ===== */
.webwelcome {
  position: fixed; inset: 0; z-index: 400;
  background: linear-gradient(165deg, #06331F, #0A4F34 55%, #148A56);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.webwelcome.hidden { display: none; }
.ww-card {
  background: #fff; border-radius: 22px; padding: 26px 22px;
  width: min(380px, 100%); display: flex; flex-direction: column; gap: 10px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .35); text-align: center;
}
.ww-logo { width: 56px; border-radius: 14px; margin: 0 auto 2px; }
.ww-card h2 { color: #06331F; font-size: 21px; }
.ww-card input { border: 1px solid #DCE7DE; border-radius: 12px; padding: 12px 14px; font-size: 15px; }
.ww-gbtn { background: #fff; border: 1.5px solid #DCE7DE; color: #0C1F16; }
.ww-card a { color: #0F8F47; font-weight: 700; cursor: pointer; }
.ww-card .ww-skip { color: #5B6E62; font-weight: 600; }