:root {
  --bg: #fbf4ee;
  --paper: #fffaf6;
  --ink: #4b3a32;
  --ink-soft: #7a665b;
  --rose: #d9727f;
  --rose-ink: #a8434f;
  --brown-ink: #7c3b2e;
  --pink-50: #fdf0ee;
  --pink-100: #fbe3e1;
  --pink-200: #f6cfcf;
  --pink-300: #efb3b6;
  --sage-50: #f1f4ea;
  --sage-100: #e3eada;
  --sage-200: #ccd8bf;
  --sage-300: #a6b994;
  --sage-600: #6e8661;
  --sage-700: #5d7452;
  --peach-100: #fbe9dd;
  --peach-200: #f5d6c3;
  --line-pink: #e7bdbd;
  --line-sage: #b9c8a9;
  --radius: 22px;
  --shadow: 0 1px 0 rgba(75,58,50,.04), 0 6px 18px -10px rgba(122,80,60,.25);
  --f-hand: 'Patrick Hand', 'Comic Sans MS', system-ui, sans-serif;
  --f-head: 'Kalam', 'Patrick Hand', system-ui, sans-serif;
  --f-script: 'Pacifico', cursive;
  --f-round: 'Baloo 2', system-ui, sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  background-image:
    radial-gradient(circle at 12% 8%, rgba(246,207,207,.35), transparent 40%),
    radial-gradient(circle at 90% 60%, rgba(204,216,191,.3), transparent 45%);
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--f-hand);
  font-size: 18px;
  line-height: 1.35;
  overflow-x: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; -webkit-tap-highlight-color: transparent; }
svg { width: 1em; height: 1em; }
[hidden] { display: none !important; }

/* ---------- layout ---------- */
.sheet {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 40px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  grid-template-areas:
    "hero focus"
    "start summary"
    "waiting micro"
    "glow radar"
    "battery victory"
    "footer footer";
  gap: 22px 24px;
  align-items: start;
}
.area-hero { grid-area: hero; }
.area-focus { grid-area: focus; }
.area-start { grid-area: start; }
.area-summary { grid-area: summary; }
.area-waiting { grid-area: waiting; }
.area-micro { grid-area: micro; }
.area-glow { grid-area: glow; }
.area-radar { grid-area: radar; }
.area-battery { grid-area: battery; }
.area-victory { grid-area: victory; }
.footer { grid-area: footer; }

/* ---------- cards ---------- */
.card {
  position: relative;
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow);
  border: 2px solid transparent;
}
.card-plain { background: var(--paper); border-color: var(--sage-200); }
.card-sage { background: var(--sage-100); border-color: var(--sage-200); }
.card-pink { background: var(--pink-100); border-color: var(--pink-200); }
.card-peach { background: var(--peach-100); border-color: var(--peach-200); }

h1, h2, h3 { margin: 0; font-weight: 700; }
h2 { font-family: var(--f-head); }
.h-row { display: flex; align-items: center; gap: 10px; font-size: 1.3rem; }
.h-sm { font-size: 1.2rem; font-weight: 400; }
.h-big { font-size: 1.65rem; line-height: 1.15; font-weight: 700; }
.rose { color: var(--rose-ink); }
.rose-dark { color: var(--brown-ink); }
.lead { margin: 8px 0 14px; font-size: 1.08rem; }
.lead.tight { margin: 2px 0 12px 46px; }
.lead.center { text-align: center; }
.hint { margin: 10px 0 0; color: var(--ink-soft); font-size: .98rem; }
.hint.small { font-size: .88rem; }
.ico-inline { width: .95em; height: .95em; vertical-align: -.1em; color: var(--sage-600); }
.ico-inline.rose { color: var(--rose); }
.ico-inline.brown { color: var(--brown-ink); }
.ico-inline.big { width: 1.1em; height: 1.1em; margin-right: 6px; }
.spark-sm { color: #c9a27b; width: .8em; height: .8em; }
.emoji { font-size: 2.2rem; line-height: 1; user-select: none; }

.pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 6px 18px 6px 12px; border-radius: 999px;
  font-size: 1.35rem; font-weight: 400;
}
.pill-sage { background: var(--sage-600); color: #fff; }
.pill-ico { width: 1.1em; height: 1.1em; color: #fff; }
.dot { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; flex: none; }
.dot svg { width: 18px; height: 18px; color: #fff; }
.dot-sage { background: var(--sage-600); }

.bow-corner { position: absolute; top: 10px; right: 14px; width: 44px; height: 34px; }
.bow-corner.bow-lg { width: 58px; height: 44px; top: 16px; right: 18px; }
.bow-left { position: absolute; left: 14px; top: 14px; width: 54px; height: 42px; }
.bow-sm { width: 34px; height: 26px; }

/* ---------- hero ---------- */
.hero { position: relative; padding: 6px 6px 0 18px; min-height: 380px; }
.hero h1 { display: flex; flex-direction: column; line-height: 1; }
.hero .script { font-family: var(--f-script); font-weight: 400; color: #e08a94; font-size: clamp(2.4rem, 5.6vw, 3.6rem); margin-left: 24px; }
.hero .big { font-family: var(--f-round); font-weight: 800; color: var(--sage-600); font-size: clamp(4rem, 10vw, 6.4rem); letter-spacing: -1px; margin: 4px 0 0 34px; }
.hero .hand { font-family: var(--f-head); font-weight: 700; font-size: clamp(2rem, 4.6vw, 2.9rem); line-height: 1.08; transform: rotate(-3deg); margin: 4px 0 0 50px; color: var(--ink); }
.tagline { font-family: var(--f-head); font-size: 1.3rem; margin: 14px 0 0 120px; transform: rotate(-4deg); }
.hero-art { position: relative; height: 110px; margin-top: 4px; }
.hero-art .bow-art { position: absolute; left: 6px; top: -96px; width: 70px; height: 56px; transform: rotate(-12deg); }
.hero-art .emoji { position: absolute; font-size: 3.6rem; }
.e-books { left: 10px; top: 20px; }
.e-drink { left: 86px; top: -6px; font-size: 4.2rem !important; }
.e-polish { left: 170px; top: 18px; }
.deco { position: absolute; color: #e7a3aa; }
.d1 { left: 0; top: 30px; color: #c9a27b; width: 26px; height: 26px; }
.d2 { right: 30px; top: 40px; width: 30px; height: 30px; color: var(--rose); }
.d3 { left: 4px; top: 130px; width: 22px; height: 22px; color: #f2a9b0; }

/* ---------- focus ---------- */
.focus-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.date-box {
  position: relative; display: flex; flex-direction: column; justify-content: center;
  min-width: 150px; padding: 6px 30px 8px 16px; border-radius: 16px; background: var(--pink-100);
  cursor: pointer;
}
.date-box-label { font-size: .95rem; }
.date-box-value { font-size: 1.15rem; letter-spacing: 1px; border-bottom: 1.5px solid var(--ink-soft); }
.date-box-heart { position: absolute; right: 10px; top: 8px; color: var(--rose); width: 16px; height: 16px; }
.date-input-overlay { position: absolute; inset: 0; opacity: 0; width: 100%; height: 100%; cursor: pointer; border: 0; }
.date-input-overlay::-webkit-calendar-picker-indicator { position: absolute; inset: 0; width: 100%; height: 100%; cursor: pointer; }

.moods { display: grid; grid-template-columns: repeat(3, 1fr); margin: 16px 0 14px; }
.mood {
  background: none; border: 0; padding: 6px 4px 10px; border-radius: 18px;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  transition: background .2s, transform .15s;
}
.mood + .mood { border-left: 1.5px solid var(--sage-200); border-radius: 0; }
.mood:active { transform: scale(.96); }
.face { width: 108px; height: 108px; transition: transform .25s; }
.mood[aria-checked="true"] .face { transform: scale(1.08) rotate(-4deg); filter: drop-shadow(0 6px 10px rgba(217,114,127,.35)); }
.mood-label { display: flex; align-items: center; gap: 8px; font-size: 1.12rem; }
.box { width: 22px; height: 22px; border: 2px solid var(--ink); border-radius: 6px; display: inline-grid; place-items: center; background: #fff; flex: none; }
.mood[aria-checked="true"] .box, .check[aria-checked="true"] .box { background: var(--sage-600); border-color: var(--sage-600); }
.mood[aria-checked="true"] .box::after, .check[aria-checked="true"] .box::after { content: ''; width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: translateY(-1px) rotate(45deg); }

.pocket { position: relative; background: var(--pink-200); border-radius: 20px; padding: 14px 18px 16px; margin-right: 46px; }
.pocket-bow { position: absolute; left: 10px; top: 8px; width: 56px; height: 44px; }
.pocket-title { text-align: center; font-size: 1.22rem; margin: 2px 0 10px 40px; }
.pocket-title .dash { color: var(--ink-soft); margin: 0 8px; }
.pocket .hint { text-align: center; }
.corner-drink { position: absolute; right: 8px; bottom: 26px; font-size: 3rem; }

/* ---------- money fields ---------- */
.money-field {
  display: flex; align-items: center; gap: 6px;
  background: #fff; border-radius: 14px; border: 1.5px solid var(--line-pink);
  padding: 6px 12px; min-width: 0;
}
.money-field input, .money-field output {
  flex: 1; min-width: 0; width: 100%; border: 0; outline: 0; background: transparent;
  text-align: right; font-size: 1.15rem; padding: 2px 0;
}
.money-field .tl { font-size: 1rem; color: var(--ink); }
.money-field:focus-within { border-color: var(--rose); box-shadow: 0 0 0 3px rgba(217,114,127,.18); }
.money-field-lg { border-radius: 18px; padding: 10px 18px; }
.money-field-lg input { font-size: 1.7rem; }
.money-field-lg .tl { font-size: 1.6rem; }
.card-sage .money-field { border-color: var(--line-sage); }
.card-sage .money-field:focus-within { border-color: var(--sage-600); box-shadow: 0 0 0 3px rgba(110,134,97,.2); }
.money-field.is-readonly { background: var(--sage-50); border-color: var(--sage-300); }
.money-field.is-readonly output { font-weight: 700; color: var(--sage-700); }
.money-field.is-negative output { color: var(--rose-ink); }

.area-start .money-field-lg { margin-top: 14px; }

/* ---------- summary ---------- */
.summary-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.sum-cell { display: flex; flex-direction: column; gap: 6px; background: var(--pink-50); border: 1.5px solid var(--pink-200); border-radius: 12px; padding: 8px 6px 6px; text-align: center; }
.sum-label { font-size: .92rem; line-height: 1.15; min-height: 2.3em; }
.sum-cell .money-field { padding: 4px 8px; border-radius: 10px; }
.sum-cell .money-field input, .sum-cell .money-field output { font-size: 1.02rem; }
.sum-cell-total { background: var(--sage-100); border-color: var(--sage-300); }

/* ---------- tables (unbounded, grow with content) ---------- */
.tbl { border: 1.5px solid var(--line-pink); border-radius: 14px; background: #fff; overflow: visible; }
.tbl-head, .tbl-add, .tbl-row { display: grid; grid-template-columns: var(--cols); }
.tbl-head { background: var(--pink-200); border-radius: 12px 12px 0 0; font-size: .98rem; text-align: center; position: sticky; top: 0; z-index: 2; }
.tbl-head > div { padding: 8px 6px; display: flex; flex-direction: column; justify-content: center; line-height: 1.15; }
.tbl-head small { font-size: .78rem; color: var(--ink-soft); }
.tbl-head > div + div, .tbl-add > .cell + .cell, .tbl-row > .cell + .cell { border-left: 1.5px solid var(--line-pink); }
.tbl-add { background: var(--pink-50); border-bottom: 2px dashed var(--line-pink); }
.tbl-row { border-top: 1.5px solid var(--line-pink); min-height: 46px; animation: rowIn .25s ease-out; }
.tbl-add + .tbl-body .tbl-row:first-child { border-top: 0; }
@keyframes rowIn { from { opacity: 0; transform: translateY(-4px); } }
.cell { padding: 6px 8px; display: flex; align-items: center; gap: 6px; min-width: 0; }
.cell-stack { flex-direction: column; align-items: stretch; }
.cell-row { justify-content: space-between; }
.cell > input, .cell > select, .cell-stack > input, .cell-row > input {
  width: 100%; min-width: 0; border: 0; background: transparent; outline: 0; padding: 6px 4px; border-radius: 8px; font-size: 1.02rem;
}
.cell select { appearance: none; -webkit-appearance: none; background: transparent; cursor: pointer; font-size: .98rem; padding-right: 18px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: calc(100% - 9px) 55%, calc(100% - 4px) 55%; background-size: 5px 5px; background-repeat: no-repeat; }
.cell input:focus, .cell select:focus { background: var(--pink-50); box-shadow: inset 0 0 0 1.5px var(--pink-300); }
.cell .money-field { border: 0; background: transparent; padding: 0 4px; width: 100%; box-shadow: none; }
.cell .money-field:focus-within { background: var(--pink-50); box-shadow: inset 0 0 0 1.5px var(--pink-300); }
.cell input[type="date"] { font-size: .92rem; }
.tbl-add input::placeholder { color: #b9a197; }
.tbl-sentinel { height: 1px; }
.tbl-empty { margin: 0; padding: 18px; text-align: center; color: var(--ink-soft); border-top: 1.5px solid var(--line-pink); }
.tbl-loading { padding: 12px; text-align: center; color: var(--ink-soft); font-size: .95rem; }
.row-date { font-size: .78rem; color: var(--ink-soft); background: var(--pink-50); border-radius: 999px; padding: 1px 8px; white-space: nowrap; }

.tbl-waiting { --cols: minmax(0,1.5fr) minmax(0,.7fr) minmax(0,1.2fr); }
.tbl-micro { --cols: minmax(0,1.15fr) minmax(0,1.05fr) minmax(0,.8fr) minmax(0,1.15fr); }
.tbl-glow { --cols: minmax(0,1.3fr) minmax(0,.75fr) minmax(0,1.3fr); }
.tbl-peach { border-color: var(--peach-200); }
.tbl-peach .tbl-head { background: var(--peach-200); }
.tbl-peach .tbl-add { background: #fff6f0; border-bottom-color: var(--peach-200); }
.tbl-peach .tbl-head > div + div, .tbl-peach .cell + .cell, .tbl-peach .tbl-row, .tbl-peach .tbl-empty { border-color: var(--peach-200) !important; }

.del { background: none; border: 0; padding: 6px; border-radius: 8px; color: #c7a49b; display: inline-grid; place-items: center; flex: none; }
.del svg { width: 16px; height: 16px; }
.del:hover { color: var(--rose-ink); background: var(--pink-50); }

.tbl-tools { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.total-pill { background: #fff; border: 1.5px solid var(--line-pink); border-radius: 999px; padding: 4px 14px; font-size: 1rem; }

/* segmented toggles */
.seg { display: inline-flex; background: rgba(255,255,255,.7); border: 1.5px solid var(--line-pink); border-radius: 999px; padding: 2px; gap: 2px; flex-wrap: nowrap; }
.seg button { border: 0; background: transparent; border-radius: 999px; padding: 4px 9px; font-size: .9rem; white-space: nowrap; }
.seg button.on { background: var(--rose); color: #fff; }
.seg-sm button { padding: 3px 8px; font-size: .86rem; }
.seg-filter button { padding: 5px 14px; font-size: .95rem; }
.card-sage .seg { border-color: var(--line-sage); }
.card-sage .seg button.on { background: var(--sage-600); }
.seg-wrap { flex-wrap: wrap; border-radius: 18px; justify-content: center; }

.toggle { border: 1.5px solid var(--line-pink); background: var(--pink-50); border-radius: 999px; padding: 4px 10px; font-size: .9rem; white-space: nowrap; }
.toggle.is-cash { background: #fff7e3; border-color: #ecd7a6; }

/* buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 999px; padding: 8px 14px; font-size: 1rem; transition: transform .1s, filter .15s; white-space: nowrap; }
.btn:active { transform: scale(.96); }
.btn svg { width: 16px; height: 16px; }
.btn-sage { background: var(--sage-600); color: #fff; }
.btn-rose { background: var(--rose); color: #fff; }
.btn-ghost { background: transparent; border: 1.5px solid var(--line-pink); }
.btn-icon { width: 38px; height: 38px; padding: 0; flex: none; }
.btn-icon svg { width: 20px; height: 20px; }
.btn-xs { padding: 4px 10px; font-size: .9rem; }
.chip { border: 1.5px solid var(--line-pink); background: #fff; border-radius: 999px; padding: 6px 14px; font-size: .95rem; }
.chip:active { transform: scale(.97); }
.chip-sage { margin-top: 10px; border-color: var(--line-sage); background: var(--sage-50); }

/* ---------- waiting room ---------- */
.area-waiting .h-big { margin-left: 64px; }
.area-waiting .cart { position: absolute; right: 22px; top: 18px; width: 54px; height: 46px; color: var(--ink); }
.decision { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; text-align: center; }
.countdown { font-size: .92rem; color: var(--ink-soft); }
.countdown b { color: var(--rose-ink); font-weight: 400; }
.dec-btns { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; }
.dec-btns .btn { padding: 4px 12px; font-size: .92rem; }
.btn-yes { background: var(--sage-600); color: #fff; }
.btn-no { background: #fff; border: 1.5px solid var(--line-pink); }
.btn-yes:disabled { opacity: .35; cursor: not-allowed; }
.dec-badge { border: 0; border-radius: 999px; padding: 3px 12px; font-size: .95rem; }
.dec-badge.yes { background: var(--sage-200); }
.dec-badge.no { background: var(--pink-200); }
.dec-badge.added { background: var(--sage-100); color: var(--sage-700); }
.tbl-row.is-ready { background: #fffbe9; }
.tbl-row.is-no .cell-stack input { text-decoration: line-through; color: var(--ink-soft); }
.tbl-add .cell-stack .seg { flex-wrap: wrap; border-radius: 14px; align-self: flex-start; }
.cat-mini { font-size: .82rem !important; color: var(--ink-soft); padding: 0 18px 0 4px !important; width: auto !important; align-self: flex-start; }

/* ---------- glow ---------- */
.glow-top { display: grid; grid-template-columns: 1fr minmax(0, 1.15fr); gap: 14px; align-items: center; margin-bottom: 14px; }
.glow-art { display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: 2.4rem; justify-content: center; }
.glow-budget { background: #fff7f1; border: 1.5px solid var(--peach-200); border-radius: 18px; padding: 10px 14px 12px; text-align: center; }
.glow-budget p { margin: 0 0 8px; font-size: 1rem; }
.glow-budget .money-field { border-color: var(--peach-200); }
.progress { height: 10px; border-radius: 999px; background: var(--peach-200); margin-top: 10px; overflow: hidden; }
.progress span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #f0a7ae, var(--rose)); border-radius: inherit; transition: width .4s; }
.progress.over span { background: var(--rose-ink); }

/* ---------- radar ---------- */
.radar-head { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-bottom: 14px; }
.radar-ico { width: 56px; height: 56px; color: var(--ink); }
.side-note { margin: 0; font-family: var(--f-head); font-size: .95rem; transform: rotate(-12deg); text-align: center; line-height: 1.1; color: var(--ink); }
.side-note.right { position: absolute; right: 18px; bottom: 10px; transform: rotate(-10deg); font-size: .92rem; }
.radar-body { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: 14px; align-items: start; }
.checklist { background: #fff; border: 1.5px solid var(--line-sage); border-radius: 16px; padding: 6px 10px; }
.radar-list { list-style: none; margin: 0; padding: 0; }
.radar-list li { display: flex; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1.5px dashed var(--sage-200); animation: rowIn .25s ease-out; }
.check { background: none; border: 0; padding: 4px; display: grid; place-items: center; flex: none; }
.check .box { width: 26px; height: 26px; }
.radar-list input { flex: 1; min-width: 0; border: 0; background: transparent; outline: 0; font-size: 1.05rem; padding: 6px 4px; border-radius: 8px; }
.radar-list input:focus { background: var(--sage-50); }
.radar-list li.done input { text-decoration: line-through; color: var(--ink-soft); }
.radar-add { display: flex; gap: 8px; align-items: center; padding: 8px 0 4px; }
.radar-add input { flex: 1; min-width: 0; border: 1.5px dashed var(--line-sage); background: var(--sage-50); border-radius: 12px; padding: 8px 12px; outline: 0; }
.radar-add input:focus { border-style: solid; border-color: var(--sage-600); }
.notepad { background: #fffdf8; border: 2px solid var(--ink); border-radius: 6px 6px 12px 12px; padding: 22px 8px 12px; position: relative; text-align: center; transform: rotate(4deg); box-shadow: 3px 3px 0 var(--sage-300); }
.notepad::before { content: ''; position: absolute; top: 6px; left: 10px; right: 10px; height: 8px; background: repeating-linear-gradient(90deg, var(--ink) 0 3px, transparent 3px 11px); border-radius: 3px; }
.notepad .bow-sm { position: absolute; top: -22px; left: 50%; transform: translateX(-50%); }
.notepad p { margin: 0; font-family: var(--f-head); font-size: 1.1rem; line-height: 1.15; }

/* ---------- battery ---------- */
.battery-wrap { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px; align-items: center; }
.battery-box { display: flex; gap: 22px; align-items: center; background: #fff; border-radius: 18px; padding: 14px 18px; border: 1.5px solid var(--line-sage); }
.battery { position: relative; width: 70px; height: 112px; border: 4px solid var(--ink-soft); border-radius: 12px; padding: 6px; display: flex; flex-direction: column-reverse; gap: 5px; flex: none; }
.battery .cap { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: 26px; height: 8px; background: var(--ink-soft); border-radius: 4px 4px 0 0; }
.battery .seg4 { flex: 1; border-radius: 4px; background: var(--sage-50); border: 1.5px solid var(--sage-200); transition: background .3s, border-color .3s; }
.battery[data-level="4"] .seg4.on { background: var(--sage-600); border-color: var(--sage-600); }
.battery[data-level="3"] .seg4.on { background: var(--sage-300); border-color: var(--sage-300); }
.battery[data-level="2"] .seg4.on { background: var(--pink-300); border-color: var(--pink-300); }
.battery[data-level="1"] { border-color: var(--rose); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(217,114,127,.18); } }
.legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.legend li { display: flex; align-items: center; gap: 12px; font-size: 1.05rem; padding: 2px 10px 2px 4px; border-radius: 999px; transition: background .2s; }
.legend li.active { background: var(--sage-100); font-weight: 700; }
.legend i { width: 22px; height: 22px; border-radius: 50%; flex: none; }
.legend .c1 { background: var(--sage-600); }
.legend .c2 { background: var(--sage-200); }
.legend .c3 { background: var(--pink-300); }
.legend .c4 { background: #f19aa4; }
.you-can { font-family: var(--f-head); font-size: 1.35rem; text-align: center; line-height: 1.1; transform: rotate(-8deg); margin: 0; }
.you-can .bow-sm { display: block; margin: 6px auto 0; }

/* ---------- victory ---------- */
.area-victory { padding-bottom: 64px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 10px; }
.victory { width: calc(100% - 70px); min-height: 84px; resize: vertical; border: 1.5px solid var(--line-pink); border-radius: 18px; background: #fff; padding: 12px 14px; outline: 0; font-size: 1.08rem; }
.victory:focus { border-color: var(--rose); }
.area-victory .corner-drink { right: 14px; top: 20px; bottom: auto; font-size: 3.2rem; }

/* ---------- footer ---------- */
.footer { display: flex; justify-content: center; align-items: center; gap: 12px; letter-spacing: 4px; color: var(--ink-soft); font-size: .95rem; padding: 6px 0 10px; }
.swash { width: 60px; height: 1.5px; background: var(--line-pink); border-radius: 2px; }

/* ---------- topbar / fab / sheet / toast ---------- */
.topbar { display: none; }
.fab { display: none; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: var(--sage-700); color: #fff; padding: 8px 18px; border-radius: 999px; font-size: 1rem; transition: .25s; z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast.err { background: var(--rose-ink); }

.sheet-backdrop { position: fixed; inset: 0; background: rgba(75,58,50,.35); z-index: 40; animation: fade .2s; }
@keyframes fade { from { opacity: 0; } }
.bottom-sheet {
  position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: min(520px, 100%);
  background: var(--paper); border-radius: 26px 26px 0 0; padding: 10px 18px calc(18px + env(safe-area-inset-bottom));
  z-index: 41; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 -10px 30px -10px rgba(75,58,50,.35);
  animation: up .25s ease-out;
}
@keyframes up { from { transform: translate(-50%, 100%); } }
.bottom-sheet .grab { width: 44px; height: 5px; background: var(--pink-300); border-radius: 3px; margin: 0 auto 4px; }
.bottom-sheet h3 { font-family: var(--f-head); font-size: 1.4rem; text-align: center; }
.bottom-sheet .field { border: 1.5px solid var(--line-pink); border-radius: 14px; padding: 12px 14px; font-size: 1.1rem; outline: 0; background: #fff; }
.bottom-sheet .field:focus { border-color: var(--rose); }
.bottom-sheet .seg { align-self: center; }
.bottom-sheet .seg button { padding: 8px 14px; font-size: 1rem; }
.sheet-actions { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.sheet-actions .btn { padding: 12px; font-size: 1.1rem; }

.icon-btn { background: none; border: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; color: var(--ink); }
.icon-btn:active { background: var(--pink-100); }
.icon-btn svg { width: 22px; height: 22px; }

/* ---------- tablet ---------- */
@media (max-width: 980px) {
  .summary-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .face { width: 88px; height: 88px; }
}

/* ---------- mobile ---------- */
@media (max-width: 760px) {
  body { font-size: 17px; padding-bottom: 96px; }
  .sheet {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "hero" "focus" "start" "summary" "battery" "micro" "waiting" "glow" "radar" "victory" "footer";
    padding: 12px 16px 24px;
    gap: 16px;
  }
  .card { padding: 16px; border-radius: 20px; }

  .topbar {
    display: flex; align-items: center; gap: 4px; position: sticky; top: 0; z-index: 30;
    padding: calc(6px + env(safe-area-inset-top)) 10px 6px; background: rgba(251,244,238,.92);
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1.5px solid var(--pink-200);
  }
  .topbar-date { position: relative; flex: 1; text-align: center; font-family: var(--f-head); font-size: 1.15rem; font-weight: 700; padding: 6px 0; }
  .mini-battery { display: flex; align-items: center; gap: 6px; background: #fff; border: 1.5px solid var(--sage-200); border-radius: 999px; padding: 4px 10px 4px 8px; font-size: .95rem; white-space: nowrap; }
  .mini-battery-cell { width: 26px; height: 14px; border: 2px solid var(--ink-soft); border-radius: 4px; padding: 1px; position: relative; }
  .mini-battery-cell::after { content: ''; position: absolute; right: -5px; top: 3px; width: 3px; height: 5px; background: var(--ink-soft); border-radius: 0 2px 2px 0; }
  .mini-battery-cell span { display: block; height: 100%; width: 0; background: var(--sage-600); border-radius: 2px; transition: width .3s; }

  .hero { min-height: 0; padding: 4px 0 0 4px; }
  .hero .script { font-size: 2.3rem; margin-left: 10px; }
  .hero .big { font-size: 4.2rem; margin-left: 18px; }
  .hero .hand { font-size: 2rem; margin-left: 26px; }
  .tagline { margin-left: 60px; font-size: 1.15rem; }
  .hero-art { position: absolute; right: 0; top: 0; width: 124px; height: 130px; margin: 0; }
  .hero-art .bow-art { left: 64px; top: 4px; width: 54px; height: 44px; transform: rotate(10deg); }
  .hero-art .emoji { font-size: 2.5rem; }
  .e-books { left: 0; top: 74px; }
  .e-drink { left: 36px; top: 50px; font-size: 3rem !important; }
  .e-polish { left: 80px; top: 76px; }
  .d2 { right: 6px; top: 6px; }

  .focus-head .date-box { display: none; }
  .pill { font-size: 1.15rem; }
  .moods { gap: 4px; }
  .mood { padding: 8px 2px; border-radius: 16px !important; border: 0 !important; }
  .mood[aria-checked="true"] { background: var(--pink-50); }
  .face { width: 74px; height: 74px; }
  .mood-label { flex-direction: column; gap: 4px; font-size: 1rem; text-align: center; }
  .pocket { margin-right: 0; padding-top: 44px; }
  .pocket-title { margin-left: 0; font-size: 1.12rem; }
  .pocket-title .dash { display: none; }
  .corner-drink { display: none; }
  .area-focus > .corner-drink { display: none; }

  .summary-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sum-cell-total { grid-column: 1 / -1; flex-direction: row; align-items: center; padding: 8px 12px; text-align: left; }
  .sum-cell-total .sum-label { min-height: 0; flex: 1; }
  .sum-cell-total .sum-label br { display: none; }
  .sum-cell-total .money-field { flex: 1.2; }
  .sum-cell-total .money-field output { font-size: 1.3rem; }
  .bow-corner { width: 36px; height: 28px; }

  .h-big { font-size: 1.4rem; }
  .area-waiting .h-big { margin-left: 52px; margin-right: 48px; }
  .bow-left { width: 44px; height: 34px; }
  .area-waiting .cart { width: 42px; height: 36px; right: 14px; }
  .bow-corner.bow-lg { width: 44px; height: 34px; top: 12px; right: 12px; }

  /* tables → stacked cards */
  .tbl { border: 0; background: transparent; }
  .tbl-head { display: none; }
  .tbl-add, .tbl-row { background: #fff; border: 1.5px solid var(--line-pink) !important; border-radius: 16px; margin-bottom: 10px; }
  .tbl-add { background: var(--pink-50); border-style: dashed !important; }
  .tbl-add > .cell, .tbl-row > .cell { border-left: 0 !important; }
  .tbl-empty { border: 0; }
  .cell { padding: 4px 8px; }

  .tbl-micro .tbl-row, .tbl-micro .tbl-add { grid-template-columns: minmax(0, 1fr) minmax(0, 7.2em); grid-template-areas: "item amt" "cat method"; padding: 6px 2px; }
  .tbl-micro .cell:nth-child(1) { grid-area: item; }
  .tbl-micro .cell:nth-child(2) { grid-area: cat; }
  .tbl-micro .cell:nth-child(3) { grid-area: amt; }
  .tbl-micro .cell:nth-child(4) { grid-area: method; justify-content: flex-end; }
  .tbl-micro .tbl-add .cell:nth-child(4) { grid-column: 1 / -1; grid-row: 3; }
  .tbl-micro .tbl-add .cell:nth-child(2) { grid-column: 1 / -1; }
  .tbl-micro .cell:nth-child(3) .money-field input { font-size: 1.15rem; font-weight: 700; }
  .tbl-micro .cell:nth-child(1) input { font-size: 1.1rem; }

  .tbl-waiting .tbl-row, .tbl-waiting .tbl-add { grid-template-columns: minmax(0, 1fr) minmax(0, 7em); grid-template-areas: "prod price" "dec dec"; padding: 6px 2px; }
  .tbl-waiting .cell:nth-child(1) { grid-area: prod; }
  .tbl-waiting .cell:nth-child(2) { grid-area: price; }
  .tbl-waiting .cell:nth-child(3) { grid-area: dec; }
  .tbl-waiting .tbl-add .cell:nth-child(3) .btn { width: 100%; padding: 10px; }
  .decision { flex-direction: row; justify-content: space-between; flex-wrap: wrap; background: var(--sage-50); border-radius: 12px; padding: 6px 8px; }

  .tbl-glow .tbl-row, .tbl-glow .tbl-add { grid-template-columns: minmax(0, 1fr) minmax(0, 7em); grid-template-areas: "item amt" "date date"; padding: 6px 2px; border-color: var(--peach-200) !important; }
  .tbl-glow .cell:nth-child(1) { grid-area: item; }
  .tbl-glow .cell:nth-child(2) { grid-area: amt; }
  .tbl-glow .cell:nth-child(3) { grid-area: date; }
  .tbl-peach .tbl-add { background: #fff6f0; }

  .cell > input, .cell select, .radar-list input { font-size: 16px; padding: 8px 4px; } /* 16px stops iOS zoom */
  .seg button { padding: 6px 12px; font-size: .95rem; }
  .btn-icon { width: 42px; height: 42px; }
  .del { padding: 10px; }

  .glow-top { grid-template-columns: 1fr; }
  .glow-art { font-size: 2rem; }

  .radar-head { grid-template-columns: auto 1fr; }
  .radar-head .side-note { display: none; }
  .radar-ico { width: 44px; height: 44px; }
  .radar-body { grid-template-columns: 1fr; }
  .notepad { display: none; }

  .battery-wrap { grid-template-columns: 1fr; }
  .battery-box { justify-content: center; }
  .you-can { display: none; }
  .lead.tight { margin-left: 0; }

  .victory { width: 100%; }
  .area-victory { padding-bottom: 54px; }
  .area-victory .corner-drink { display: none; }

  .footer { letter-spacing: 2px; font-size: .8rem; gap: 8px; }
  .swash { width: 24px; }

  .fab {
    display: inline-flex; align-items: center; gap: 8px; position: fixed; z-index: 35;
    right: 16px; bottom: calc(18px + env(safe-area-inset-bottom));
    background: var(--rose); color: #fff; border: 0; border-radius: 999px; padding: 14px 20px 14px 16px;
    font-size: 1.1rem; box-shadow: 0 10px 24px -8px rgba(168,67,79,.6);
  }
  .fab svg { width: 22px; height: 22px; }
  .fab:active { transform: scale(.95); }
  .toast { bottom: calc(90px + env(safe-area-inset-bottom)); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
.tbl-add .btn-icon { width: 32px; height: 32px; }
.tbl-add .btn-icon svg { width: 17px; height: 17px; }
@media (max-width: 760px) { .tbl-add .btn-icon { width: 42px; height: 42px; } }