.budget-field{grid-template-columns:minmax(0,1fr) 104px 78px 58px}
.budget-percent-input{display:flex;align-items:center;gap:3px;color:var(--muted);font-size:.76rem}
.budget-percent-input input{width:58px;padding:9px 5px;text-align:right}
.category-default-fields{display:grid;grid-template-columns:110px minmax(100px,1fr);gap:8px;align-items:center}
.category-default-fields select,.category-default-fields input,.rollover-target{padding:9px}
.category-row-options{align-items:center}
@media(max-width:420px){.budget-field{grid-template-columns:minmax(0,1fr) 88px 68px 48px;gap:4px}.budget-percent-input input{width:50px;padding:8px 3px}.category-default-fields{grid-template-columns:1fr 1fr}}
.record-tags{color:var(--accent);font-weight:650}
.tag-trend-card{overflow-x:auto;margin-top:12px}
.tag-trend-card h3{margin:0 0 12px;font-size:1rem}
.tag-months,.tag-trend-row{display:grid;grid-template-columns:minmax(86px,1.2fr) repeat(6,minmax(62px,1fr));gap:6px;align-items:center;min-width:520px}
.tag-months{color:var(--muted);text-align:right;margin-bottom:6px}
.tag-trend-row{padding:8px 0;border-top:1px solid var(--line);font-size:.78rem;text-align:right}
.tag-trend-row strong{text-align:left;color:var(--accent)}
.tag-suggestions{display:flex;flex-wrap:wrap;gap:7px;margin-top:-6px}
.tag-suggestions[hidden]{display:none}
.tag-suggestions button{border:1px solid color-mix(in srgb,var(--accent) 35%,var(--line));background:color-mix(in srgb,var(--accent) 8%,var(--surface));color:var(--accent);border-radius:999px;padding:6px 10px;font-size:.78rem;font-weight:650;cursor:pointer}
.tag-manager-list{display:grid;gap:10px;margin-top:14px}
.tag-manager-row{display:grid;grid-template-columns:minmax(150px,1fr) minmax(280px,1.5fr);gap:12px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.tag-manager-row.archived{opacity:.58}
.tag-manager-main{display:grid;gap:5px}.tag-manager-main small{color:var(--muted)}
.tag-manager-actions{display:grid;grid-template-columns:minmax(110px,1fr) auto auto;gap:7px;align-items:center}
.tag-manager-actions select,.tag-manager-main input{padding:9px}
#manageTags{margin-left:7px}
@media(max-width:560px){.tag-manager-row{grid-template-columns:1fr}.tag-manager-actions{grid-template-columns:1fr 1fr}.tag-manager-actions select{grid-column:1/-1}#manageTags{margin:8px 0 0}}
.settlement-open{width:100%;margin-top:12px}
.settled-note{margin:8px 2px 0;color:var(--muted);font-size:.78rem;text-align:center}
.settlement-list{display:grid;gap:8px;margin:14px 0}
.settlement-row{display:grid;grid-template-columns:minmax(145px,1fr) minmax(150px,1fr) auto;align-items:center;gap:14px;padding:11px 12px;border:1px solid var(--line);border-radius:12px;background:var(--surface)}
.settlement-row.disabled{opacity:.58}.settlement-row small{display:block;color:var(--muted);margin-top:4px}
.settlement-toggle{display:flex;align-items:center;gap:9px}.settlement-toggle input{width:auto}.settlement-toggle span{white-space:normal}
.settlement-target{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:7px;color:var(--muted);font-size:.8rem}.settlement-target select{padding:8px;min-width:0}
.settlement-amount{font-weight:750;white-space:nowrap}.settlement-row .positive{color:var(--accent)}.settlement-row .negative{color:var(--danger)}
.settlement-warning{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted);font-size:.8rem;line-height:1.5}
.allocation-plus{display:inline-block;margin:0 4px;color:var(--accent);font-weight:800}
.month-status-wrap{display:grid;justify-items:center}.month-status-wrap .month-button{padding-bottom:2px}
.settlement-status{font-size:.68rem;font-weight:750;padding:3px 8px;border-radius:999px;background:var(--brand-soft);color:var(--brand)}
.settlement-status.unsettled{background:color-mix(in srgb,var(--warn) 16%,transparent);color:var(--warn)}
.settlement-status.stale{background:color-mix(in srgb,var(--danger) 14%,transparent);color:var(--danger)}
.previous-settlement-alert{width:100%;margin:0 0 12px;border:1px solid color-mix(in srgb,var(--warn) 45%,var(--line));border-radius:13px;padding:12px 14px;background:color-mix(in srgb,var(--warn) 12%,var(--surface));color:var(--ink);font-weight:750;text-align:left;cursor:pointer}
.previous-settlement-alert::after{content:"›";float:right;color:var(--warn);font-size:1.2rem;line-height:.8}
.apply-current-defaults{width:100%;margin:-4px 0 10px;padding:9px 12px;font-size:.82rem}
@media(max-width:560px){.settlement-row{grid-template-columns:1fr auto}.settlement-target{grid-column:1/-1;grid-row:2}.settlement-amount{grid-column:2;grid-row:1}}

/* Soft blue illustrated-led visual system. Character artwork can be added later. */
:root{
  color-scheme:light;
  --bg:#9fb9d5;
  --surface:rgba(255,255,255,.78);
  --ink:#4a2c1d;
  --muted:#6c7f96;
  --line:rgba(102,137,177,.28);
  --brand:#587fae;
  --brand-soft:#e8f0f9;
  --accent:#587fae;
  --warn:#a86d35;
  --danger:#ba5d55;
  --shadow:0 12px 30px rgba(69,101,139,.16);
  font-family:"Segoe UI","Noto Sans TC",sans-serif;
}
.sync-actions{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:12px}.sync-status{margin:10px 0 0!important}.sync-status.error{color:var(--danger)}.sync-meta{margin:4px 0 0!important;color:var(--muted);font-size:.86rem;line-height:1.45}.sync-actions button:disabled{opacity:.5;cursor:not-allowed}@media(max-width:380px){.sync-actions{grid-template-columns:1fr}}
body{
  min-height:100vh;
  background:linear-gradient(155deg,#91acd0 0%,#a9c2dc 52%,#9bb7d5 100%);
  background-attachment:fixed;
}
.app-shell{background:transparent;padding-bottom:108px}
.hero{
  margin:0 12px;
  padding:18px 18px 22px;
  background:transparent;
  border-radius:0;
}
.topline{position:relative;gap:20px;margin-bottom:14px}
.month-button{font-size:1.18rem;font-weight:650;letter-spacing:.08em;color:var(--ink)}
.icon-button{color:var(--ink);font-size:2rem;font-weight:300}
.settlement-status{background:rgba(255,255,255,.45);color:var(--ink);font-weight:500;padding:4px 12px}
.settlement-status.unsettled,.settlement-status.stale{background:rgba(255,255,255,.45);color:var(--ink)}
.hero>.eyebrow,.hero>h1,.hero>.hero-note,.hero>.hero-message{position:relative;z-index:1}
.hero::after{
  content:"";
  display:block;
  position:absolute;
}
.hero .eyebrow{margin:0;color:#617d9e;font-size:.96rem;letter-spacing:.08em}
.hero h1{font-size:3rem;color:var(--ink);margin-top:8px;letter-spacing:-.035em}
.hero h1.over-budget{color:var(--danger)}
.hero-note{font-size:.9rem;color:var(--ink);margin-top:8px}
.hero-message{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:18px;padding:9px 13px;
  border:1px solid rgba(88,127,174,.28);border-radius:14px;
  background:rgba(239,246,252,.62);color:var(--ink);font-size:.82rem
}
.hero-message span{color:#607f70;font-size:1.15rem}
.hero-animation{position:absolute;z-index:1;right:12px;bottom:10px;width:172px;height:172px;pointer-events:none}
.hero-animation[hidden]{display:none}
.hero-animation img{display:block;width:100%;height:100%;object-fit:contain}
.hero-animation-static{display:none!important}
@media(prefers-reduced-motion:reduce){.hero-animation-motion{display:none!important}.hero-animation-static{display:block!important}}
.hero{position:relative}
.hero::before{
  content:"";position:absolute;left:0;right:0;top:74px;bottom:0;
  border:1px solid rgba(255,255,255,.75);border-radius:26px;
  background:rgba(255,255,255,.8);
  box-shadow:0 12px 30px rgba(53,82,118,.2);backdrop-filter:blur(18px) saturate(112%)
}
.hero .eyebrow{margin-top:38px}
main{padding:14px 14px 22px}
.section-heading{margin:8px 7px 13px}
.section-heading h2{font-size:1.12rem;color:var(--ink);letter-spacing:.04em}
.text-button{color:#416b98;font-size:.94rem}
.category-list,.record-list{gap:8px}
.category-card,.record-row,.summary-card,.settings-panel{
  border:1px solid rgba(255,255,255,.88);
  background:rgba(255,255,255,.78);
  box-shadow:0 8px 22px rgba(53,82,118,.16);
  backdrop-filter:blur(16px) saturate(112%)
}
.category-card{position:relative;display:grid;grid-template-columns:82px minmax(0,1fr);gap:13px;align-items:center;padding:14px 42px 14px 12px;border-radius:22px;overflow:hidden}
.category-card::after{content:"›";position:absolute;right:16px;top:50%;transform:translateY(-50%);color:#8995a0;font-size:2rem;font-weight:300}
.category-icon-wrap{display:flex;width:82px;height:82px;align-items:center;justify-content:center;overflow:hidden}
.category-icon{display:block;width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}
.category-card-content{display:block;min-width:0}
.category-name{font-size:1.02rem;color:var(--ink);letter-spacing:.04em}
.available{font-size:1.22rem;color:var(--ink)}
.category-meta{margin-top:7px;color:var(--ink);font-size:.78rem}
.allocation-plus{color:var(--ink);font-weight:500}
.progress-row{display:grid;grid-template-columns:minmax(0,1fr) 48px;align-items:center;gap:10px;margin-top:10px}
.progress{margin:0;height:7px;background:#e1e9f3}
.progress span{background:linear-gradient(90deg,#8eacd0,#5d83ae)}
.progress span.low{background:linear-gradient(90deg,#d8ad72,#c48648)}
.progress span.over{background:#ba5d55}
.category-percent{text-align:right;color:#587fae;font-size:.92rem}
.category-card.low .category-percent{color:#a86d35}.category-card.over .category-percent{color:var(--danger)}
.category-spent{margin-top:8px;color:var(--ink);font-size:.78rem}
.previous-settlement-alert{background:rgba(255,247,236,.86);border-color:rgba(168,109,53,.3)}
.fab{
  right:max(20px,calc((100vw - 500px)/2 + 20px));bottom:88px;
  width:76px;height:76px;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;text-align:center;
  background:linear-gradient(145deg,#7fa5d0,#557fac);border:1px solid rgba(255,255,255,.8);
  box-shadow:0 12px 24px rgba(54,90,130,.28);font-size:.86rem
}
.bottom-nav{
  bottom:8px;width:min(492px,calc(100% - 20px));border:1px solid rgba(98,132,171,.24);
  border-radius:24px;padding:8px 8px calc(8px + env(safe-area-inset-bottom));
  background:rgba(232,241,250,.66);box-shadow:0 8px 28px rgba(54,83,118,.2);backdrop-filter:blur(20px) saturate(115%)
}
.bottom-nav button{display:grid;gap:2px;justify-items:center;color:#45678c;padding:5px 4px;font-size:.8rem}
.bottom-nav button::before{font-size:1.25rem;line-height:1;font-weight:400}
.bottom-nav button:nth-child(1)::before{content:"⌂"}.bottom-nav button:nth-child(2)::before{content:"▤"}.bottom-nav button:nth-child(3)::before{content:"◔"}.bottom-nav button:nth-child(4)::before{content:"⚙"}
.bottom-nav button.active{color:#315d8e}
dialog{background:#f5f8fc;border:1px solid rgba(255,255,255,.8)}
dialog::backdrop{background:rgba(57,76,99,.38);backdrop-filter:blur(3px)}
input,select{background:#fff;border-color:#c9d7e6}
.income-panel,.detail-heading,.allocation-status{background:#e8f0f9}
.primary-button{background:#587fae;border-color:#587fae}.secondary-button{background:rgba(255,255,255,.84)}
@media(prefers-color-scheme:dark){
  :root{color-scheme:light;--bg:#9fb9d5;--surface:rgba(255,255,255,.78);--ink:#4a2c1d;--muted:#6c7f96;--line:rgba(102,137,177,.28);--brand:#587fae;--brand-soft:#e8f0f9;--warn:#a86d35;--danger:#ba5d55;--shadow:0 12px 30px rgba(69,101,139,.16)}
  .hero{background:transparent}.progress{background:#e1e9f3}.progress span{background:linear-gradient(90deg,#8eacd0,#5d83ae)}.bottom-nav{background:rgba(232,241,250,.66)}input,select{background:#fff;border-color:#c9d7e6}
}
@media(max-width:420px){
  .hero{margin:0 8px;padding-left:12px;padding-right:12px}.hero h1{font-size:2.55rem}.hero::before{border-radius:22px}
  .hero-animation{right:5px;bottom:12px;width:145px;height:145px}.hero-message{max-width:175px}
  main{padding-left:10px;padding-right:10px}.category-card{grid-template-columns:68px minmax(0,1fr);gap:10px;padding-left:10px}.category-icon-wrap{width:68px;height:68px}.category-meta{font-size:.7rem}.fab{width:66px;height:66px;bottom:86px}
}

/* Category manager: roomy, readable controls on narrow phone screens. */
.category-manager-row{grid-template-columns:42px minmax(180px,1fr) minmax(230px,1.15fr);gap:10px;padding:14px}
.category-default-fields{grid-template-columns:minmax(118px,1fr) minmax(110px,1fr)}
.category-row-options{grid-column:2/-1;display:grid;grid-template-columns:minmax(210px,1fr);justify-items:stretch}
.category-row-options label{min-height:42px}
.category-row-options .rollover-target{width:100%}
.archive-category{justify-self:start;padding:8px 0}
@media(max-width:560px){
  #categoryDialog{width:calc(100% - 16px);max-height:calc(100dvh - 16px)}
  #categoryDialog form{padding:18px 14px}
  .category-manager-list{max-height:62dvh;padding-right:0}
  .category-manager-row{grid-template-columns:38px minmax(0,1fr);gap:10px 12px;padding:14px 12px}
  .category-order{grid-column:1;grid-row:1 / span 2}
  .category-name-input{grid-column:2;min-width:0}
  .category-default-fields{grid-column:2;grid-template-columns:minmax(0,1.15fr) minmax(92px,.85fr)}
  .category-row-options{grid-column:2;grid-template-columns:1fr;gap:8px}
  .category-row-options label{font-size:.82rem}
  .add-category-button{position:sticky;bottom:0;z-index:1;background:#fff}
}