:root {
  --ink: #3B2A22; --brown: #7A3E1D; --paper: #FEF6F1; --muted: #6E5446;
  --yellow: #FFE9A8; --red: #E0574D; --neg: #B5372A; --pos: #1F6A3E;
  --navy: #2B2F55; --amber: #E9A23B; --green: #8FCB9B;
  --sky: #D7ECF7; --peach: #FFE7DC; --mint: #DDF1E3; --lav: #EEE8FB; --cream: #FFF8EA; --lemon: #FFF1C9;
  --hand: "Patrick Hand", "Comic Sans MS", cursive;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--paper); color: var(--ink); }
body { font: 600 15px/1.35 Nunito, system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
#app { max-width: 480px; margin: 0 auto; padding: 0 0 120px; min-height: 100vh; }
button { font: inherit; color: inherit; }
a { color: inherit; }
.hand { font-family: var(--hand); font-weight: 400; }
.muted { color: var(--muted); }
.small { font-size: 12.5px; }
.pos { color: var(--pos); } .neg { color: var(--neg); }

/* header */
.hdr { display: flex; align-items: center; gap: 12px; padding: 18px 13px 12px; }
.hdr .avatar, .hdr .back { width: 52px; height: 52px; border-radius: 50%; border: 2.5px solid var(--ink); background: #fff; overflow: hidden; flex: none; display: grid; place-items: center; cursor: pointer; padding: 0; }
.hdr .avatar img { width: 100%; height: 100%; object-fit: cover; }
.hdr .back { font-size: 24px; font-weight: 800; }
.hdr .ttl { flex: 1; min-width: 0; }
.hdr .ttl small { display: block; color: var(--muted); font-size: 13px; }
.hdr h1 { margin: 0; font: 400 32px/1.05 var(--hand); color: var(--brown); }
.seg { display: flex; border: 2.5px solid var(--ink); border-radius: 999px; padding: 3px; background: #fff; flex: none; }
.seg button { border: 0; background: none; border-radius: 999px; padding: 7px 14px; font-weight: 800; cursor: pointer; }
.seg button.on { background: var(--ink); color: #fff; }

/* cards */
.card { position: relative; margin: 0 13px 14px; border: 3px solid var(--ink); border-radius: 4px; background: var(--cream); padding-top: 34px; overflow: hidden; }
.cap { position: absolute; top: 0; left: 0; background: var(--yellow); border-right: 2.5px solid var(--ink); border-bottom: 2.5px solid var(--ink); padding: 3px 10px; font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; z-index: 2; }
.card .pad { padding: 4px 14px 14px; }
.sky { background: var(--sky); } .peach { background: var(--peach); } .mint { background: var(--mint); }
.lav { background: var(--lav); } .lemon { background: var(--lemon); } .white { background: #fff; }
.row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 9px 14px; border-top: 2px solid var(--ink); }
.row.link { cursor: pointer; }
.row .main { flex: 1; min-width: 0; }
.row .name { font-weight: 800; font-size: 15px; }
.row .sub { font-size: 12px; color: var(--muted); }
.row .val { text-align: right; font-weight: 800; white-space: nowrap; }
.row .val.wrap { white-space: normal; max-width: 68%; overflow-wrap: anywhere; }
.chev { font-weight: 800; font-size: 18px; color: var(--ink); }
.row .rowbar { margin-top: 6px; }
.empty { padding: 14px; color: var(--muted); display: flex; gap: 12px; align-items: center; }
.empty img { width: 70px; }

/* figures, bars, tags */
.tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.tile { background: #fff; border: 2.5px solid var(--ink); border-radius: 4px; padding: 8px; text-align: center; }
.tile b { display: block; font: 400 26px/1.1 var(--hand); }
.tile span { font-size: 12px; font-weight: 800; }
.bar { position: relative; height: 16px; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; }
.bar i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px; background: var(--navy); }
.bar i.warn { background: var(--amber); } .bar i.ok { background: var(--green); } .bar i.bad { background: var(--neg); }
.bar .mark { position: absolute; top: -6px; bottom: -6px; width: 4px; margin-left: -2px; background: var(--red); border-radius: 2px; }
.bar .mark.ink { background: var(--ink); }
.tag { display: inline-block; border-radius: 999px; padding: 2px 10px; font-size: 12px; font-weight: 800; border: 1.5px solid currentColor; white-space: nowrap; }
.tag.ok { color: #1F6A3E; background: #DDF1E3; } .tag.warn { color: #8A4B06; background: #FCEBCB; } .tag.bad { color: #B5372A; background: #FBE1DD; }
.src { display: inline-block; background: var(--yellow); border: 1.5px solid var(--ink); border-radius: 999px; font-size: 10.5px; padding: 0 6px; font-weight: 800; vertical-align: 1px; }
.chip { display: inline-block; background: var(--yellow); border: 2px solid var(--ink); border-radius: 8px; font-size: 11px; font-weight: 800; padding: 3px 6px; }
.big { font: 400 38px/1.05 var(--hand); }
.paceBox { background: #fff; border: 2.5px solid var(--ink); border-radius: 4px; padding: 9px 11px; }
.paceBox .top { display: flex; justify-content: space-between; font-size: 13px; font-weight: 800; margin-bottom: 7px; }

/* home comic page */
.comic { margin: 0 13px 14px; border: 3px solid var(--ink); border-radius: 4px; overflow: hidden; }
.comic > section { position: relative; border-top: 3px solid var(--ink); }
.comic > section:first-child { border-top: 0; }
.scene { padding: 40px 14px 0; background: linear-gradient(#7FCDF5, #CDEFFC); min-height: 520px; cursor: pointer; }
.scene.bad { background: linear-gradient(#93A9BE, #CBD6DF); }
.scene .sticker { position: absolute; pointer-events: none; }
.scene .watch { background: #fff; border: 2.5px solid var(--ink); border-radius: 4px; margin-top: 10px; position: relative; z-index: 1; }
.scene .watch .row:first-child { border-top: 0; }
.dot { width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--ink); background: var(--amber); flex: none; }
.scene .ground { position: relative; height: 270px; margin: 10px -14px 0; }
.scene .ground .hills { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 90px; object-fit: cover; object-position: top; }
.scene .ground .couple { position: absolute; left: 0; bottom: 0; width: 52%; max-width: 240px; }
.bubble { position: absolute; right: 12px; bottom: 16px; width: 54%; background: #fff; border: 2.5px solid var(--ink); border-radius: 16px; padding: 10px 12px; z-index: 1; }
.bubble h2 { margin: 0; font: 400 30px/1 var(--hand); }
.bubble .ln { display: flex; justify-content: space-between; align-items: baseline; border-top: 2px dashed var(--ink); padding: 4px 0; font-size: 13px; }
.bubble .ln b { font: 400 21px/1.1 var(--hand); }
.bubble .lead { font-size: 13px; font-weight: 800; margin: 4px 0 6px; }
.habitsP { background: var(--peach); padding-top: 34px; }
.habitsP .row { border-top: 2px dashed var(--ink); flex-wrap: wrap; }
.habitsP .row:first-of-type { border-top: 0; }
.hicon { width: 40px; height: 40px; border-radius: 50%; border: 2.5px solid var(--ink); display: grid; place-items: center; background: #fff; font-size: 18px; flex: none; }
.fig { font: 400 24px/1 var(--hand); white-space: nowrap; } .fig small { font: 600 12px Nunito, sans-serif; color: var(--muted); }
.split { display: grid; grid-template-columns: 1fr 1fr; }
.split > div { padding: 40px 14px 14px; position: relative; min-height: 130px; }
.split .slept { background: var(--navy); color: #fff; }
.split .screen { background: var(--lav); border-left: 3px solid var(--ink); }
.split .k { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; font-weight: 800; }
.split .v { font: 400 30px/1.1 var(--hand); }
.split img { position: absolute; right: 8px; top: 34px; width: 54px; }
.todo { background: #FFF8EA; padding: 34px 0 10px; background-image: linear-gradient(90deg, transparent 52px, #F3A9B3 52px, #F3A9B3 54px, transparent 54px); }
.todo .line { display: flex; gap: 12px; align-items: center; padding: 12px 120px 8px 14px; border-bottom: 2px solid #BFD9EE; }
.todo .box { width: 22px; height: 22px; border: 2.5px solid var(--ink); border-radius: 4px; flex: none; background: #fff; }
.todo .box.done { background: var(--green); }
.todo .line .txt { flex: 1; padding-left: 14px; }
.todo .stk { position: absolute; right: 10px; width: 80px; }
.dash { padding: 4px 13px 10px; }
.dash h3 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin: 6px 0 10px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { border: 2.5px solid var(--ink); border-radius: 999px; padding: 6px 16px; background: #fff; font: 400 21px var(--hand); color: var(--brown); cursor: pointer; }

/* habits page chart */
.chart { display: flex; align-items: flex-end; gap: 6px; height: 120px; background: #fff; border: 2.5px solid var(--ink); border-radius: 4px; padding: 8px 8px 4px; margin-top: 12px; }
.chart .col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; font-size: 11px; font-weight: 800; }
.chart .b { width: 100%; border: 2px solid var(--ink); border-radius: 4px; background: var(--navy); min-height: 4px; margin: 2px 0; }
.chart .b.future { border-style: dashed; background: transparent; }

/* forms, tab bar */
.signin { padding: 40px 13px; }
.signin .hero { padding: 0; height: 240px; display: flex; justify-content: center; align-items: flex-end; }
.signin .hero img { height: 230px; }
.signin .brand { text-align: center; padding: 14px; }
.signin .brand b { font: 400 54px/1 var(--hand); color: var(--brown); display: block; }
label { display: block; font-weight: 800; margin: 12px 0 6px; }
input[type=email], input[type=password], input[type=search] { width: 100%; border: 2.5px solid var(--ink); border-radius: 999px; padding: 12px 18px; font: 600 16px Nunito, sans-serif; background: #fff; color: var(--ink); }
.btn { width: 100%; margin-top: 18px; border: 2.5px solid var(--ink); border-radius: 999px; background: var(--navy); color: #fff; padding: 13px; font-weight: 800; font-size: 17px; cursor: pointer; }
.btn.light { background: #fff; color: var(--ink); }
.err { color: var(--neg); font-weight: 800; margin-top: 10px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 13px 14px; }
.chips button { border: 2px solid var(--ink); border-radius: 999px; padding: 5px 12px; background: #fff; font-weight: 800; cursor: pointer; }
.chips button.on { background: var(--peach); }
.search { margin: 0 13px; }
.tabbar { position: fixed; left: 50%; bottom: 14px; transform: translateX(-50%); width: min(454px, calc(100% - 26px)); display: flex; background: #fff; border: 2.5px solid var(--ink); border-radius: 999px; padding: 6px; z-index: 10; }
.tabbar[hidden] { display: none; }
.tabbar button { flex: 1; border: 0; background: none; border-radius: 999px; padding: 8px 0; font-weight: 700; font-size: 13px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 2px; }
.tabbar button.on { background: var(--peach); border: 2.5px solid var(--ink); font-weight: 800; }
.tabbar svg { width: 22px; height: 22px; }
.ro { text-align: center; font-size: 12px; color: var(--muted); margin: 6px 13px 14px; }
.loading { display: grid; place-items: center; padding: 60px 20px; text-align: center; color: var(--muted); }
.loading img { width: 140px; }
.amountCard { display: flex; align-items: center; padding: 6px 14px 14px; }
.amountCard img { width: 110px; }
.kv { display: flex; justify-content: space-between; gap: 12px; }
.chat { display: flex; gap: 10px; padding: 4px 14px 14px; }
.chat img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid var(--ink); background: #fff; }
.chat blockquote { margin: 0; background: #fff; border: 2px solid var(--ink); border-radius: 12px; padding: 8px 12px; flex: 1; }
.goal { background: #fff; border: 2.5px solid var(--ink); border-radius: 4px; padding: 12px; margin: 10px 14px; }
.goal .t { display: flex; justify-content: space-between; font-weight: 800; }
.goal .t b { font: 400 24px var(--hand); }
@media (max-width: 380px) { .bubble { width: 60%; } .hdr h1 { font-size: 28px; } .seg button { padding: 6px 10px; } }
.cicon { flex: none; vertical-align: middle; }
.row .kv > .main { flex: 1; }