/* Tokyo Companion (Meiji) · "sakura techō" — handcrafted pink travel-journal theme.
   Light washi-paper base, sakura-pink accents, matcha + vermilion (朱) state colors.
   Mobile-first. Re-skins app.js's fixed class contract; no markup/logic changes. */

:root {
  /* paper & ink */
  --paper:      #fff6f9;
  --paper-2:    #ffe9f1;
  --card:       #fffdfe;
  --card-soft:  #fff4f8;
  --ink:        #43303a;   /* plum-ink headings */
  --ink-2:      #806775;   /* secondary */
  --ink-3:      #b29caa;   /* muted */
  --line:       #ffd9e6;   /* hairlines / borders */

  /* sakura */
  --sakura:      #e75a8b;
  --sakura-deep: #d6336c;
  --sakura-50:   #fff0f5;
  --sakura-100:  #ffe1ec;
  --sakura-200:  #ffc6db;

  /* accents */
  --matcha:      #7cb342;  /* uguisu / ok / default route */
  --matcha-deep: #4e7a22;
  --matcha-50:   #f1f8e9;
  --shu:         #e23b30;  /* vermilion · live-check / important */
  --shu-deep:    #b3271c;
  --shu-text:    #8e221a;  /* warning body text */
  --shu-50:      #fdecea;
  --gold:        #c98317;  /* fare / amber */
  --gold-50:     #fdf3e2;
  --fuji:        #9b6dc4;  /* wisteria · sightsee */
  --mizu:        #2f93c0;  /* water-blue · shop / branch A */

  --radius:    16px;
  --radius-sm: 11px;
  --shadow:    0 6px 18px rgba(214, 51, 108, 0.10);
  --shadow-sm: 0 2px 8px rgba(214, 51, 108, 0.07);

  --font-display: 'Mali', 'Noto Sans JP', 'Noto Sans Thai', sans-serif;
  --font-body: 'IBM Plex Sans Thai', 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Noto Sans Thai', sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; padding: 0;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px; line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  /* layered washi: soft blush wash + faint sakura-petal dots */
  background-image:
    radial-gradient(circle at 18% 8%, rgba(255, 198, 219, 0.55), transparent 42%),
    radial-gradient(circle at 88% 4%, rgba(255, 224, 180, 0.40), transparent 38%),
    radial-gradient(rgba(231, 90, 139, 0.05) 1.1px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 22px 22px;
  background-attachment: fixed;
  background-position: 0 0, 0 0, 0 0;
}
a { color: var(--sakura-deep); text-decoration: none; }

/* ---------- header ---------- */
.top {
  position: sticky; top: 0; z-index: 20;
  background: linear-gradient(180deg, rgba(255,246,249,0.96) 78%, rgba(255,246,249,0.78));
  backdrop-filter: saturate(1.4) blur(8px);
  -webkit-backdrop-filter: saturate(1.4) blur(8px);
  padding: calc(env(safe-area-inset-top) + 12px) 14px 10px;
  border-bottom: 1.5px solid var(--line);
}
.trip-title { display: flex; align-items: center; gap: 9px; }
.trip-title h1 {
  font-family: var(--font-display);
  font-size: 23px; margin: 0; font-weight: 600; letter-spacing: 0.01em;
  color: var(--sakura-deep);
  display: flex; align-items: center; gap: 7px;
}
.trip-title h1::before { content: "🌸"; font-size: 19px; }
.ver-pill {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 600; color: var(--sakura-deep);
  background: var(--sakura-100); padding: 2px 8px; border-radius: 20px;
  letter-spacing: 0; line-height: 1.6;
}
.subtitle { font-size: 12px; color: var(--ink-2); flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ess-btn {
  border: 1.5px solid var(--sakura-200); background: var(--card); color: var(--sakura);
  font-size: 17px; width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: transform .12s ease, background .12s ease;
}
.ess-btn:active { transform: scale(0.92); background: var(--sakura-50); }

.day-tabs {
  display: flex; gap: 7px; overflow-x: auto; margin-top: 12px; padding-bottom: 2px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.day-tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; border: 1.5px solid var(--line); cursor: pointer;
  background: var(--card); color: var(--ink-2);
  padding: 7px 13px; border-radius: 13px;
  font-family: var(--font-body);
  font-size: 13px; font-weight: 600; line-height: 1.2;
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  box-shadow: var(--shadow-sm); transition: transform .12s ease;
}
.tab:active { transform: scale(0.95); }
.tab-date { font-size: 10px; font-weight: 500; color: var(--ink-3); }
.tab.active {
  background: linear-gradient(160deg, var(--sakura), var(--sakura-deep));
  color: #fff; border-color: transparent;
  box-shadow: 0 5px 14px rgba(214, 51, 108, 0.34);
}
.tab.active .tab-date { color: rgba(255, 255, 255, 0.85); }

/* ---------- main ---------- */
main { padding: 14px 14px 64px; max-width: 640px; margin: 0 auto; }
.empty { text-align: center; color: var(--ink-2); padding: 48px 0; }

/* ---------- day head ---------- */
.day-head { margin-bottom: 14px; }
.day-chips { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 8px; }
.chip {
  font-size: 12px; background: var(--card); color: var(--ink-2);
  padding: 4px 11px; border-radius: 20px; border: 1.5px solid var(--line);
}
.day-title {
  font-family: var(--font-display);
  font-size: 24px; margin: 4px 0 3px; font-weight: 600; color: var(--ink);
  line-height: 1.25;
}
.day-sub { font-size: 13px; color: var(--ink-2); margin: 0; }

.section-label {
  display: inline-block;
  font-family: var(--font-display);
  font-size: 12.5px; font-weight: 600; color: var(--sakura-deep);
  letter-spacing: 0.01em;
  margin: 20px 0 9px;
  padding: 2px 12px 3px;
  background: var(--sakura-100);
  border-radius: 8px;
  transform: rotate(-0.6deg);   /* washi-tape tilt */
}

/* ---------- live check ---------- */
.livecheck {
  background: var(--shu-50);
  border: 1.5px solid rgba(226, 59, 48, 0.40);
  border-left: 4px solid var(--shu);
  border-radius: var(--radius-sm); padding: 11px 13px; margin: 11px 0;
}
.lc-tag {
  display: inline-block; font-size: 11px; font-weight: 700; color: var(--shu-deep);
  letter-spacing: 0.02em; margin-bottom: 4px;
}
.lc-body { display: block; font-size: 13px; color: var(--shu-text); }

/* ---------- route ---------- */
.route {
  background: var(--card); border-radius: var(--radius); padding: 13px; margin: 9px 0;
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--mizu);
  box-shadow: var(--shadow-sm);
}
.route-default { border-left-color: var(--matcha); }
.route-alt { border-left-color: var(--ink-3); background: var(--card-soft); }
.route-head {
  font-family: var(--font-display);
  font-size: 14px; font-weight: 600; margin-bottom: 9px; color: var(--ink);
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
.def-pill {
  font-family: var(--font-body);
  font-size: 10px; font-weight: 700; color: #fff; background: var(--matcha);
  padding: 2px 8px; border-radius: 20px;
}
.route-foot { font-size: 12px; color: var(--ink-2); margin-top: 8px; padding-left: 16px; }
.legs { display: flex; flex-direction: column; gap: 2px; position: relative; }
.leg { display: flex; gap: 11px; padding: 5px 0; }
.leg-dot {
  flex: 0 0 auto; width: 10px; height: 10px; border-radius: 50%;
  background: var(--mizu); margin-top: 6px;
  box-shadow: 0 0 0 4px rgba(47, 147, 192, 0.16);
}
.route-default .leg-dot { background: var(--matcha); box-shadow: 0 0 0 4px rgba(124, 179, 66, 0.18); }
.leg-body { flex: 1; min-width: 0; }
.leg-ride { font-size: 13.5px; color: var(--ink); font-weight: 500; }
.leg-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 3px; align-items: center; }
.leg-line { font-size: 11px; color: var(--mizu); font-weight: 600; }
.leg-time { font-size: 11px; color: var(--ink-2); }
.leg-note { font-size: 12px; color: var(--ink-2); margin-top: 3px; }
.fare {
  font-size: 11px; font-weight: 700; color: var(--gold);
  background: var(--gold-50); padding: 2px 8px; border-radius: 7px;
  border: 1px solid rgba(201, 131, 23, 0.22);
}

/* ---------- scenarios / luggage ---------- */
.scenario {
  background: var(--card); border-radius: var(--radius-sm); padding: 11px 13px; margin: 9px 0;
  border: 1.5px solid var(--line); border-left: 4px solid var(--fuji); box-shadow: var(--shadow-sm);
}
.sc-label { font-size: 13px; font-weight: 700; color: var(--fuji); margin-bottom: 3px; }
.sc-desc { font-size: 13px; color: var(--ink); }
.luggage {
  font-size: 12px; color: var(--ink); background: var(--card-soft);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 13px; margin: 9px 0;
}
.lug-tag { font-weight: 700; color: var(--ink); }

/* ---------- stop cards ---------- */
.card {
  background: var(--card); border-radius: var(--radius); padding: 13px;
  margin: 9px 0; display: flex; gap: 12px;
  border: 1.5px solid var(--line);
  border-left: 4px solid var(--ink-3);
  box-shadow: var(--shadow-sm);
}
.card.mode-meal     { border-left-color: #e8943a; }
.card.mode-sightsee { border-left-color: var(--fuji); }
.card.mode-temple   { border-left-color: var(--sakura); }
.card.mode-shop     { border-left-color: var(--mizu); }
.card.mode-transit  { border-left-color: var(--ink-3); }
.card.mode-flight   { border-left-color: var(--shu); }
.card.mode-info     { border-left-color: var(--matcha); }
.time {
  flex: 0 0 auto; font-size: 12px; font-weight: 700; color: var(--sakura-deep);
  width: 54px; padding-top: 2px;
}
.body { flex: 1; min-width: 0; }
.title-line { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.notes { font-size: 13px; color: var(--ink); margin-top: 4px; }
.sub-note { font-size: 12px; color: var(--ink-2); margin-top: 5px; }
.card-meta { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 9px; align-items: center; }
.gmap {
  font-size: 12px; font-weight: 600; color: var(--sakura-deep);
  background: var(--sakura-50); padding: 5px 11px; border-radius: 9px;
  border: 1.5px solid var(--sakura-200);
}

/* ---------- reminders ---------- */
.reminders {
  background: var(--gold-50); border-radius: var(--radius); padding: 13px 15px; margin: 18px 0 9px;
  border: 1.5px solid rgba(201, 131, 23, 0.25); border-left: 4px solid var(--gold);
}
.reminders h3 { font-family: var(--font-display); font-size: 14px; margin: 0 0 7px; color: var(--gold); font-weight: 600; }
.reminders ul { margin: 0; padding-left: 19px; }
.reminders li { font-size: 13px; color: var(--ink); margin: 4px 0; }

/* ---------- essentials view ---------- */
.banner {
  border-radius: var(--radius); padding: 15px; margin: 6px 0 15px;
  background: var(--shu-50); border: 1.5px solid rgba(226, 59, 48, 0.42); border-left: 4px solid var(--shu);
}
.banner-title { font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--shu-deep); margin-bottom: 6px; }
.banner-body { font-size: 13px; color: var(--shu-text); }
.banner.disney { background: var(--sakura-50); border-color: var(--sakura-200); border-left-color: var(--sakura); }
.banner.disney .banner-title { color: var(--sakura-deep); }
.banner.disney .banner-body { color: var(--ink); }
.ess-card {
  background: var(--card); border-radius: var(--radius); padding: 13px 15px; margin: 9px 0;
  border: 1.5px solid var(--line); box-shadow: var(--shadow-sm);
}
.ess-card.flights { border-left: 4px solid var(--shu); }
.ess-card h3 { font-family: var(--font-display); font-size: 14.5px; margin: 0 0 7px; color: var(--ink); font-weight: 600; }
.ess-card p { font-size: 13px; color: var(--ink); margin: 4px 0; }

/* ---------- Day 0 departure ---------- */
.departure {
  background: var(--card); border-radius: var(--radius); padding: 13px 15px; margin: 9px 0;
  border: 1.5px solid var(--line); border-left: 4px solid var(--shu); box-shadow: var(--shadow-sm);
}
.dep-row { display: flex; gap: 10px; padding: 7px 0; border-bottom: 1.5px solid var(--sakura-50); }
.dep-row:last-child { border-bottom: 0; }
.dep-k { flex: 0 0 100px; font-size: 12px; color: var(--ink-2); font-weight: 600; }
.dep-v { flex: 1; font-size: 13px; color: var(--ink); }

/* ---------- checklist ---------- */
.checklist { display: flex; flex-direction: column; gap: 3px; }
.ck-item {
  display: flex; align-items: flex-start; gap: 11px; background: var(--card);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  padding: 11px 13px; margin: 3px 0; cursor: pointer; transition: background .12s ease;
}
.ck-item:active { background: var(--sakura-50); }
.ck-item input { margin-top: 1px; width: 19px; height: 19px; accent-color: var(--sakura); flex: 0 0 auto; }
.ck-item span { font-size: 13px; color: var(--ink); }
.ck-item.done { background: var(--matcha-50); border-color: rgba(124, 179, 66, 0.3); }
.ck-item.done span { color: var(--ink-3); text-decoration: line-through; }

/* ---------- important / ic / airport ---------- */
.important {
  background: var(--shu-50); border: 1.5px solid rgba(226, 59, 48, 0.42); border-left: 4px solid var(--shu);
  border-radius: var(--radius-sm); padding: 11px 13px; margin: 11px 0;
}
.imp-tag { display: inline-block; font-size: 11px; font-weight: 700; color: var(--shu-deep); letter-spacing: 0.02em; margin-bottom: 4px; }
.imp-body { display: block; font-size: 13px; color: var(--shu-text); }
.icnote {
  font-size: 12.5px; color: var(--ink); background: var(--card-soft);
  border: 1.5px solid var(--line); border-left: 4px solid var(--mizu);
  border-radius: var(--radius-sm); padding: 9px 13px; margin: 9px 0;
}
.airport {
  font-size: 13px; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 10px 13px; margin: 9px 0;
}

/* ---------- route branches (Day 1 A/B) ---------- */
.route.branch-A { border-left-color: var(--mizu); }
.route.branch-B { border-left-color: var(--matcha); }
.route.branch-A .leg-dot { background: var(--mizu); box-shadow: 0 0 0 4px rgba(47, 147, 192, 0.16); }
.route.branch-B .leg-dot { background: var(--matcha); box-shadow: 0 0 0 4px rgba(124, 179, 66, 0.18); }
.br-intro { font-size: 12px; color: var(--ink-2); margin: -3px 0 9px; }
.br-note {
  font-size: 12.5px; color: var(--ink); background: var(--card-soft);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 11px; margin-top: 8px;
}
.br-note.ok { background: var(--matcha-50); color: var(--matcha-deep); border-color: rgba(124, 179, 66, 0.3); }
.br-k { font-weight: 700; color: var(--ink); }
.busalt {
  margin-top: 9px; background: var(--card-soft);
  border: 1.5px dashed var(--sakura-200); border-radius: 12px; padding: 11px;
}
.busalt-head { font-family: var(--font-display); font-size: 12.5px; font-weight: 600; color: var(--gold); margin-bottom: 6px; }
.busalt .legs { margin-top: 2px; }
.busalt-foot { font-size: 12px; color: var(--gold); margin-top: 7px; }

/* ---------- route asides / dpa ---------- */
.route-aside {
  font-size: 12.5px; color: var(--ink); background: var(--card);
  border: 1.5px solid var(--line); border-radius: 10px; padding: 9px 13px; margin: 7px 0;
  border-left: 4px solid var(--ink-3);
}
.route-aside.ok { background: var(--matcha-50); color: var(--matcha-deep); border-left-color: var(--matcha); border-color: rgba(124, 179, 66, 0.3); }
.dpa {
  font-size: 12.5px; color: var(--gold); background: var(--gold-50);
  border: 1.5px solid rgba(201, 131, 23, 0.3); border-radius: 10px; padding: 9px 13px; margin: 9px 0;
}

/* ---------- DPA how-to (Day 2) ---------- */
.dpahow {
  background: var(--sakura-50); border: 1.5px solid var(--sakura-200);
  border-left: 4px solid var(--sakura); border-radius: var(--radius);
  padding: 13px 15px; margin: 12px 0; box-shadow: var(--shadow-sm);
}
.dpahow h3 { font-family: var(--font-display); font-size: 14.5px; margin: 0 0 8px; color: var(--sakura-deep); font-weight: 600; }
.dpa-sub { font-size: 12px; font-weight: 700; color: var(--sakura-deep); margin: 11px 0 4px; }
.dpa-list { margin: 0 0 4px; padding-left: 19px; }
.dpa-list li { font-size: 13px; color: var(--ink); margin: 4px 0; }
.dpa-rule { font-size: 12.5px; color: var(--ink); background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 8px 11px; margin: 6px 0; }
.dpa-rule.warn { background: var(--shu-50); border-color: rgba(226, 59, 48, 0.3); color: var(--shu-text); }
.dpa-cost { font-size: 13px; font-weight: 700; color: var(--gold); background: var(--gold-50); border: 1px solid rgba(201, 131, 23, 0.3); border-radius: 9px; padding: 8px 12px; margin-top: 9px; }

/* ---------- banner cash variant ---------- */
.banner.cash { background: var(--shu-50); border-color: rgba(226, 59, 48, 0.42); border-left-color: var(--shu); }
.banner.cash .banner-title { color: var(--shu-deep); }
.banner.cash .banner-body { color: var(--shu-text); }

/* ---------- budget card ---------- */
.ess-card.budget { border-left: 4px solid var(--matcha); }
.bud-bar { height: 9px; background: var(--sakura-50); border: 1px solid var(--line); border-radius: 6px; overflow: hidden; margin: 6px 0 11px; }
.bud-fill { height: 100%; background: linear-gradient(90deg, var(--matcha), #a3d977); border-radius: 6px; }
.bud-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink); padding: 4px 0; }
.bud-row.head { color: var(--matcha-deep); font-size: 15px; font-weight: 700; border-top: 1.5px solid var(--sakura-50); margin-top: 4px; padding-top: 8px; }
.bud-note { font-size: 12px; color: var(--ink-2); margin: 9px 0 0; }

/* ---------- DisneySea QR slot ---------- */
.qrslot .qr-hint { font-size: 12px; color: var(--ink-2); margin: 4px 0 9px; }
.qr-input {
  width: 100%; background: var(--card-soft); color: var(--ink);
  border: 1.5px solid var(--sakura-200); border-radius: 11px; padding: 11px;
  font-size: 13px; font-family: inherit; resize: vertical;
}
.qr-input:focus { outline: none; border-color: var(--sakura); }
.qr-save {
  margin-top: 9px; border: 0;
  background: linear-gradient(160deg, var(--sakura), var(--sakura-deep)); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  padding: 9px 18px; border-radius: 11px; cursor: pointer;
  box-shadow: 0 4px 12px rgba(214, 51, 108, 0.3);
}
.qr-save:active { transform: scale(0.96); }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: linear-gradient(160deg, var(--sakura), var(--sakura-deep)); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 13.5px;
  padding: 11px 20px; border-radius: 24px; z-index: 50;
  box-shadow: 0 10px 26px rgba(214, 51, 108, 0.4);
}

/* ---------- dark "sakura-night" variant (html.night) ---------- */
html.night {
  --paper:      #1a1016;
  --paper-2:    #241019;
  --card:       #261a21;
  --card-soft:  #2f1f28;
  --ink:        #fbe8ef;
  --ink-2:      #cba9b9;
  --ink-3:      #8c6c7b;
  --line:       #402833;

  --sakura:      #f78fb3;
  --sakura-deep: #f06595;
  --sakura-50:   #2c1822;
  --sakura-100:  #3a2030;
  --sakura-200:  #51293b;

  --matcha:      #9ccc65;
  --matcha-deep: #c5e1a5;
  --matcha-50:   #20271a;
  --shu:         #ff6f62;
  --shu-deep:    #ffb3ac;
  --shu-text:    #ffc2bb;
  --shu-50:      #2e1714;
  --gold:        #f0b840;
  --gold-50:     #2a2113;
  --fuji:        #c4a0e8;
  --mizu:        #6cc5e8;

  --shadow:    0 6px 20px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.35);
}
html.night body {
  background-color: var(--paper);
  background-image:
    radial-gradient(circle at 18% 6%, rgba(240, 101, 149, 0.18), transparent 44%),
    radial-gradient(circle at 88% 2%, rgba(155, 109, 196, 0.16), transparent 40%),
    radial-gradient(rgba(247, 143, 179, 0.06) 1.1px, transparent 1.2px);
  background-size: 100% 100%, 100% 100%, 22px 22px;
}
html.night .top {
  background: linear-gradient(180deg, rgba(26,16,22,0.96) 78%, rgba(26,16,22,0.78));
}
html.night .def-pill { color: #14210a; }
html.night .tab.active, html.night .qr-save, html.night .toast { color: #1a1016; }
html.night .tab.active .tab-date { color: rgba(26, 16, 22, 0.78); }

/* theme toggle button (shares ess-btn sizing) */
.theme-btn {
  border: 1.5px solid var(--sakura-200); background: var(--card); color: var(--sakura);
  font-size: 16px; width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: transform .12s ease, background .12s ease;
}
.theme-btn:active { transform: scale(0.92); background: var(--sakura-50); }

/* ---------- draft / WIP notices ---------- */
.draft-banner {
  background: repeating-linear-gradient(135deg, var(--gold-50), var(--gold-50) 10px, #fdeccb 10px, #fdeccb 20px);
  border: 1.5px solid rgba(201, 131, 23, 0.4); border-left: 4px solid var(--gold);
  border-radius: var(--radius-sm); padding: 10px 13px; margin: 0 0 12px;
  font-size: 12.5px; font-weight: 600; color: #8a5a09; line-height: 1.5;
}
.verify-note {
  background: var(--gold-50); border: 1.5px dashed rgba(201, 131, 23, 0.5);
  border-radius: var(--radius-sm); padding: 9px 12px; margin: 0 0 10px;
  font-size: 12.5px; color: #8a5a09;
}
html.night .draft-banner {
  background: repeating-linear-gradient(135deg, var(--gold-50), var(--gold-50) 10px, #332611 10px, #332611 20px);
  color: var(--gold);
}
html.night .verify-note { color: var(--gold); }

/* ---------- budget view ---------- */
.budget-btn {
  border: 1.5px solid var(--sakura-200); background: var(--card); color: var(--sakura);
  font-size: 16px; width: 38px; height: 38px; border-radius: 12px; cursor: pointer;
  box-shadow: var(--shadow-sm); transition: transform .12s ease, background .12s ease;
}
.budget-btn:active { transform: scale(0.92); background: var(--sakura-50); }

.bud-hero {
  background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius);
  padding: 16px; margin: 6px 0 8px; box-shadow: var(--shadow);
  border-top: 4px solid var(--sakura);
}
.bh-cap { font-size: 14px; color: var(--ink-2); }
.bh-cap b { font-family: var(--font-display); font-size: 20px; color: var(--sakura-deep); }
.bh-meter {
  position: relative; height: 14px; border-radius: 8px; margin: 12px 0 9px;
  background: var(--sakura-50); border: 1px solid var(--line); overflow: hidden;
}
.bh-plan { position: absolute; inset: 0 auto 0 0; height: 100%; background: rgba(124, 179, 66, 0.35); }
.bh-spent { position: absolute; inset: 0 auto 0 0; height: 100%; background: linear-gradient(90deg, var(--sakura), var(--sakura-deep)); border-radius: 8px; transition: width .35s ease; }
.bh-spent.over { background: linear-gradient(90deg, var(--shu), var(--shu-deep)); }
.bh-legend { display: flex; gap: 16px; font-size: 12px; color: var(--ink-2); }
.bh-legend .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.bh-legend .dot.plan { background: rgba(124, 179, 66, 0.7); }
.bh-legend .dot.spent { background: var(--sakura); }
.bh-left { margin-top: 10px; font-family: var(--font-display); font-size: 18px; font-weight: 600; color: var(--matcha-deep); }
.bh-left.over { color: var(--shu-deep); }
.bh-fx { font-size: 11px; color: var(--ink-3); margin: 8px 0 0; }

/* spend logger */
.spend-form { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px; box-shadow: var(--shadow-sm); }
.sf-row { display: flex; gap: 8px; }
.sf-amt { flex: 1 1 auto; min-width: 0; background: var(--card-soft); color: var(--ink); border: 1.5px solid var(--sakura-200); border-radius: 11px; padding: 10px 12px; font-size: 15px; font-family: inherit; }
.sf-cat { flex: 0 0 auto; background: var(--card-soft); color: var(--ink); border: 1.5px solid var(--sakura-200); border-radius: 11px; padding: 10px 8px; font-size: 13px; font-family: inherit; }
.sf-amt:focus, .sf-cat:focus, .sf-memo:focus { outline: none; border-color: var(--sakura); }
.sf-add {
  flex: 0 0 auto; border: 0; cursor: pointer;
  background: linear-gradient(160deg, var(--sakura), var(--sakura-deep)); color: #fff;
  font-family: var(--font-display); font-weight: 600; font-size: 14px; padding: 0 16px; border-radius: 11px;
  box-shadow: 0 4px 12px rgba(214, 51, 108, 0.3);
}
.sf-add:active { transform: scale(0.95); }
.sf-memo { width: 100%; margin-top: 8px; background: var(--card-soft); color: var(--ink); border: 1.5px solid var(--line); border-radius: 11px; padding: 9px 12px; font-size: 13px; font-family: inherit; }

.spend-list { margin: 8px 0 4px; }
.spend-empty { text-align: center; color: var(--ink-3); font-size: 12.5px; padding: 14px 0; }
.spend-item { display: flex; align-items: center; gap: 9px; background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius-sm); padding: 9px 12px; margin: 6px 0; }
.si-cat { flex: 0 0 auto; font-size: 11px; font-weight: 700; color: var(--sakura-deep); background: var(--sakura-50); border: 1px solid var(--sakura-200); padding: 2px 8px; border-radius: 20px; }
.si-memo { flex: 1 1 auto; min-width: 0; font-size: 13px; color: var(--ink-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.si-amt { flex: 0 0 auto; font-size: 14px; font-weight: 700; color: var(--ink); }
.si-del { flex: 0 0 auto; border: 0; background: transparent; color: var(--ink-3); font-size: 15px; cursor: pointer; padding: 2px 4px; }
.si-del:active { color: var(--shu); }

/* planned breakdown */
.bud-cat { background: var(--card); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 11px 14px; margin: 8px 0; box-shadow: var(--shadow-sm); }
.bc-head { display: flex; justify-content: space-between; align-items: center; font-weight: 700; color: var(--ink); padding-bottom: 7px; margin-bottom: 5px; border-bottom: 1.5px solid var(--sakura-50); }
.bc-head b { font-family: var(--font-display); color: var(--sakura-deep); }
.bi-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--ink); padding: 4px 0; }
.bi-label { flex: 1 1 auto; min-width: 0; }
.bi-soft { color: var(--gold); font-weight: 700; }
.bi-fill { font-size: 10px; font-weight: 700; color: var(--sakura-deep); background: var(--sakura-50); padding: 1px 6px; border-radius: 12px; }
.bi-amt { flex: 0 0 auto; color: var(--ink-2); font-weight: 600; }
.bi-note { font-size: 11.5px; color: var(--ink-3); padding: 0 0 4px 8px; }

/* totals */
.bud-totals { background: var(--card-soft); border: 1.5px solid var(--line); border-radius: var(--radius); padding: 12px 14px; margin: 10px 0 6px; }
.bt-row { display: flex; justify-content: space-between; font-size: 13px; color: var(--ink-2); padding: 4px 0; }
.bt-row b { color: var(--ink); }
.bt-row.total { border-top: 1.5px solid var(--line); margin-top: 4px; padding-top: 8px; font-size: 14px; color: var(--ink); }
.bt-row.total b { font-family: var(--font-display); color: var(--sakura-deep); }
.bt-row.head { color: var(--matcha-deep); font-weight: 700; }
.bt-row.head b { color: var(--matcha-deep); }
.bud-foot { font-size: 12px; color: var(--ink-2); margin: 10px 2px 0; line-height: 1.6; }

/* ---------- entrance motion (staggered journal reveal on each day switch) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  .day-view > *, .ess-view > *, .budget-view > * { animation: rise .42s cubic-bezier(.22,.61,.36,1) both; }
  .day-view > *:nth-child(1), .ess-view > *:nth-child(1), .budget-view > *:nth-child(1) { animation-delay: .02s; }
  .day-view > *:nth-child(2), .ess-view > *:nth-child(2), .budget-view > *:nth-child(2) { animation-delay: .06s; }
  .day-view > *:nth-child(3), .ess-view > *:nth-child(3), .budget-view > *:nth-child(3) { animation-delay: .10s; }
  .day-view > *:nth-child(4), .ess-view > *:nth-child(4), .budget-view > *:nth-child(4) { animation-delay: .14s; }
  .day-view > *:nth-child(5), .ess-view > *:nth-child(5), .budget-view > *:nth-child(5) { animation-delay: .18s; }
  .day-view > *:nth-child(6), .ess-view > *:nth-child(6), .budget-view > *:nth-child(6) { animation-delay: .22s; }
  .day-view > *:nth-child(7), .ess-view > *:nth-child(7), .budget-view > *:nth-child(7) { animation-delay: .26s; }
  .day-view > *:nth-child(n+8), .ess-view > *:nth-child(n+8), .budget-view > *:nth-child(n+8) { animation-delay: .30s; }
}