/* KAKELIRA shared design system: local system fonts, no external assets. */
:root {
  color-scheme: light;
  --canvas:#f7f8f3; --paper:#fff; --ink:#223c32; --muted:#586b60;
  --brand:#245c45; --brand-hover:#194b36; --tint:#edf4eb;
  --border:#dce4d9; --input-border:#728775;
  --danger:#9c352c; --danger-tint:#fff2ef; --focus:#245ab5;
  --radius:18px; --radius-small:10px;
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  font-size:16px; font-synthesis:none; line-height:1.75;
  color:var(--ink); background:var(--canvas);
}
* { box-sizing:border-box; }
body { margin:0; }
button,input,select,textarea { font:inherit; color:inherit; }
button,a { touch-action:manipulation; -webkit-tap-highlight-color:transparent; }
button { cursor:pointer; }
button:disabled { cursor:default; opacity:.55; }
a { color:var(--brand); text-underline-offset:5px; text-decoration-thickness:1px; }
a:hover { text-decoration-thickness:2px; }
:focus-visible { outline:3px solid var(--focus); outline-offset:4px; }
[hidden] { display:none !important; }
.icon { width:22px; height:22px; flex-shrink:0; vertical-align:middle; }
.skip-link { position:fixed; left:20px; top:-100px; z-index:100; padding:12px 20px; background:var(--paper); border:2px solid var(--brand); border-radius:8px; }
.skip-link:focus { top:12px; }
.header { max-width:1120px; min-height:106px; padding:24px 32px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:24px; border-bottom:1px solid var(--border); }
.brand { display:inline-flex; align-items:center; gap:12px; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:42px; height:46px; border-radius:13px; background:var(--brand); color:#fff; }
.brand-mark .icon { width:26px; height:26px; }
.brand-text { display:flex; flex-direction:column; line-height:1.45; }
.brand-text>span { font-size:23px; font-weight:750; letter-spacing:.13em; }
.brand small { font-size:11px; letter-spacing:.22em; color:var(--muted); }
.main-nav { display:flex; align-items:center; gap:6px; }
.nav-link { min-height:48px; min-width:92px; display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 16px; border-radius:12px; color:var(--muted); text-decoration:none; font-size:14px; font-weight:650; }
.nav-link[aria-current=page] { color:var(--brand); background:#e7eee3; }
.nav-link:hover { background:var(--tint); }
main { max-width:1040px; margin:auto; padding:40px 32px 64px; min-height:68vh; scroll-margin-top:20px; }
main:focus { outline:none; }
h1 { font-size:clamp(27px,3.4vw,36px); line-height:1.5; letter-spacing:.025em; margin:0 0 20px; font-weight:750; overflow-wrap:anywhere; }
h2 { font-size:18px; line-height:1.6; margin:0; font-weight:700; }
h3 { font-size:17px; margin:0 0 8px; }
p { margin:0 0 14px; overflow-wrap:anywhere; }
small,.muted { color:var(--muted); font-size:13px; line-height:1.8; }
.muted { max-width:72ch; }
.today-label { font-size:12px; letter-spacing:.08em; color:var(--muted); margin-bottom:14px; }
.home-hero { padding:10px 0 12px; }
.home-hero h1 { margin-bottom:10px; font-size:clamp(28px,3.4vw,38px); }
.eyebrow { color:var(--muted); font-size:14px; margin-bottom:24px; }
.actions { display:flex; align-items:stretch; gap:12px; margin:24px 0; }
.button { display:inline-flex; justify-content:center; align-items:center; gap:8px; min-height:52px; padding:13px 24px; border:1px solid transparent; border-radius:var(--radius-small); font-weight:700; text-decoration:none; text-align:center; line-height:1.6; overflow-wrap:anywhere; }
.button:hover { text-decoration:none; }
.primary { background:var(--brand); color:#fff; }
.primary:not(:disabled):hover { background:var(--brand-hover); }
.secondary { background:var(--paper); color:var(--brand); border-color:var(--input-border); }
.secondary:not(:disabled):hover { background:var(--tint); }
.destructive { background:var(--danger); color:#fff; }
.destructive:not(:disabled):hover { background:#7e271f; }
.home-hero .primary { min-width:280px; min-height:60px; font-size:17px; box-shadow:0 3px 0 #163e2c; }
.home-hero .secondary { min-width:180px; }
.summary { display:grid; grid-template-columns:1.15fr 1fr; gap:20px; margin:24px 0; }
.summary-card { background:var(--paper); padding:28px 30px; border:1px solid var(--border); border-radius:var(--radius); }
.summary-card.expense { border-top:3px solid var(--brand); }
.card-caption { display:flex; align-items:center; gap:10px; }
.card-caption>.icon { color:var(--brand); width:19px; height:19px; }
.summary-card h2 { font-size:14px; font-weight:600; color:var(--muted); }
.total { font-variant-numeric:tabular-nums; letter-spacing:-.035em; font-size:clamp(32px,4vw,48px); font-weight:750; line-height:1.35; margin:14px 0 8px; overflow-wrap:anywhere; }
.expense .total { color:var(--brand); }
.income .total { font-size:clamp(30px,3.5vw,42px); }
.summary-card small { font-size:12px; }
.panel { background:var(--paper); border:1px solid var(--border); padding:28px; border-radius:var(--radius); min-width:0; }
.panel+.panel { margin-top:24px; }
.home-details { display:grid; grid-template-columns:minmax(0,1.65fr) minmax(0,1fr); gap:24px; align-items:start; }
.home-budget { margin:0; background:var(--tint); }
.home-budget h2 { margin-bottom:18px; }
.home-budget>p { font-size:14px; }
.home-budget a { display:inline-block; font-size:13px; min-height:44px; padding:10px 0; }
.home-budget .budget-remaining { font-size:24px; }
.section-heading { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; padding-bottom:12px; }
.section-heading a { font-size:13px; padding:10px 0; min-height:44px; }
.records { list-style:none; padding:0; margin:0; }
.record { display:flex; flex-wrap:wrap; align-items:start; gap:12px; padding:22px 0; border-bottom:1px solid var(--border); }
.record:last-child { border-bottom:0; }
.record-details { flex:1; min-width:0; overflow-wrap:anywhere; }
.record-details>strong { font-size:15px; }
.record-details small { display:block; margin-top:4px; font-size:12px; }
.memo { color:var(--muted); font-size:13px; margin:6px 0 0; white-space:pre-wrap; overflow-wrap:anywhere; }
.amount { font-variant-numeric:tabular-nums; font-size:18px; white-space:nowrap; line-height:1.6; }
.amount.income { color:var(--brand); }
.record-controls { display:flex; justify-content:flex-end; gap:12px; flex-basis:100%; }
.text-button { display:inline-flex; justify-content:center; align-items:center; min-width:54px; min-height:44px; padding:8px 12px; border:1px solid var(--border); border-radius:8px; background:var(--paper); font-size:13px; color:var(--brand); text-decoration:none; }
.text-button:hover { background:var(--tint); }
.danger { color:var(--danger); }
.empty { padding:38px 12px; text-align:center; color:var(--muted); }
.empty p { font-weight:650; color:var(--ink); margin-bottom:8px; }
.filters { display:flex; padding:5px; border:1px solid var(--border); border-radius:12px; background:#edf1e9; gap:5px; margin:24px 0; max-width:440px; }
.filters button { flex:1; min-height:44px; border:0; border-radius:8px; background:transparent; color:var(--muted); font-size:14px; font-weight:650; }
.filters button[aria-pressed=true] { background:var(--paper); color:var(--brand); box-shadow:0 1px 3px #243e321a; }
#history-list { padding:4px 28px; border:1px solid var(--border); border-radius:var(--radius); background:var(--paper); }
.field { display:flex; flex-direction:column; gap:8px; margin-bottom:24px; min-width:0; }
.field>label { font-size:14px; font-weight:650; }
input,select,textarea { width:100%; min-width:0; padding:13px 15px; min-height:52px; border:1px solid var(--input-border); border-radius:var(--radius-small); background:var(--paper); line-height:1.6; scroll-margin-block:32px 120px; }
input:hover,select:hover,textarea:hover { border-color:var(--brand); }
input[aria-invalid=true],select[aria-invalid=true],textarea[aria-invalid=true] { border:2px solid var(--danger); background:#fff9f7; }
textarea { resize:vertical; min-height:100px; }
input::placeholder,textarea::placeholder { color:var(--muted); opacity:1; }
input[type=checkbox] { accent-color:var(--brand); min-height:22px; }
.record-form { width:100%; max-width:620px; }
.record-form>h2 { margin-bottom:24px; }
.record-form>.button[type=submit] { width:100%; min-height:56px; }
body[data-page=record] main { max-width:720px; }
.amount-input { display:flex; align-items:center; border:1px solid var(--input-border); background:#f5f8f1; border-radius:12px; padding:8px 18px; }
.amount-input:focus-within { outline:3px solid var(--focus); outline-offset:3px; }
.yen-prefix { font-size:28px; color:var(--muted); font-weight:500; }
#amount { font-size:clamp(30px,6vw,46px); font-weight:650; font-variant-numeric:tabular-nums; border:0; background:transparent; padding:6px 12px; outline:none; min-height:64px; }
#amount[aria-invalid=true] { color:var(--danger); }
.amount-input:has([aria-invalid=true]) { border:2px solid var(--danger); }
.field-error { font-size:13px; font-weight:600; color:var(--danger); margin:0; }
.back-link { display:inline-flex; align-items:center; min-height:44px; font-size:13px; margin-bottom:12px; padding:6px 0; }
.error { padding:13px 16px; background:var(--danger-tint); border:1px solid #e7bbb4; border-radius:10px; color:var(--danger); font-size:14px; overflow-wrap:anywhere; }
.error:empty { display:none; }
.status { margin:0; }
.status:not(:empty) { padding:14px 18px; border:1px solid #a9c5a8; border-radius:10px; background:var(--tint); color:var(--brand); margin-bottom:24px; font-size:14px; font-weight:600; }
.notice { margin-bottom:24px; }
.tools { display:flex; flex-wrap:wrap; gap:10px 20px; margin:18px 0 24px; }
.tools>a { display:inline-flex; align-items:center; min-height:44px; font-size:13px; gap:8px; }
.stack>*+* { margin-top:18px; }
.month-chooser { display:flex; align-items:end; gap:12px; margin:24px 0; }
.month-chooser .field { max-width:260px; width:100%; margin:0; }
.month-chooser .button { min-height:52px; }
.fixed-item,.category-item { padding:24px 0; border-bottom:1px solid var(--border); overflow-wrap:anywhere; }
.fixed-item:last-child,.category-item:last-child { border-bottom:0; }
.fixed-item .back-link { display:flex; margin:12px 0 0; }
.category-item .back-link { margin:0 0 0 16px; }
.chart-row { margin:22px 0; overflow-wrap:anywhere; }
.chart-row p { margin-bottom:8px; font-size:14px; }
.bar { height:12px; min-width:0; border-radius:4px; background:#41775a; }
.check-label { display:flex; align-items:flex-start; gap:12px; margin:20px 0; padding-block:8px; min-height:44px; font-size:14px; }
.check-label input { width:22px; height:22px; flex:0 0 22px; margin-top:3px; }
.backup-summary { overflow-wrap:anywhere; }
input[type=file] { font-size:13px; padding:12px; }
input::file-selector-button { border:1px solid var(--input-border); border-radius:7px; padding:9px 12px; color:var(--brand); background:var(--tint); font:inherit; margin-right:12px; min-height:44px; cursor:pointer; }
.budget-remaining,.daily-budget { font-size:28px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.6; overflow-wrap:anywhere; }
.report-total,.fixed-unpaid { font-size:23px; font-weight:700; font-variant-numeric:tabular-nums; }
dialog { max-width:480px; width:calc(100% - 32px); max-height:calc(100dvh - 32px); overflow:auto; overscroll-behavior:contain; padding:30px; border:1px solid var(--border); border-radius:20px; color:var(--ink); box-shadow:0 18px 60px #12312129; }
dialog::backdrop { background:#17352670; }
dialog h2 { margin-bottom:14px; font-size:21px; }
dialog .actions { margin-bottom:0; }
dialog .actions>* { flex:1; }
footer { max-width:1040px; margin:auto; padding:24px 32px 40px; color:var(--muted); font-size:12px; border-top:1px solid var(--border); }
footer>p { display:flex; align-items:center; justify-content:center; gap:8px; font-size:12px; }
footer>p .icon { width:16px; height:16px; }
footer .tools { justify-content:center; margin:10px 0 0; gap:24px; }
.loading { padding:32px; }
.page-description { font-size:14px; color:var(--muted); margin-top:-8px; margin-bottom:28px; max-width:64ch; }
.budget-summary { margin-bottom:24px; }
.budget-metrics { display:grid; grid-template-columns:1fr 1fr 1.35fr; gap:20px; margin:24px 0; }
.metric { min-width:0; }
.metric-label { display:block; font-size:13px; font-weight:500; color:var(--muted); margin-bottom:8px; }
.metric-value { display:block; font-size:30px; line-height:1.45; font-variant-numeric:tabular-nums; overflow-wrap:anywhere; letter-spacing:-.025em; }
.budget-remaining .metric-value { color:var(--brand); font-size:36px; }
.is-over .metric-value { color:var(--danger); }
.daily-allowance { padding:20px 24px; border-radius:12px; background:var(--tint); }
.daily-allowance h2 { font-size:13px; font-weight:600; }
.daily-budget { margin:8px 0 0; color:var(--brand); }
#budget-form { max-width:none; }
#budget-total { max-width:400px; font-size:24px; font-variant-numeric:tabular-nums; }
.category-budget-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 28px; }
.category-budget-grid .muted { font-size:12px; }
.item-heading { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.item-heading h3 { min-width:0; overflow-wrap:anywhere; }
.badge { display:inline-flex; align-items:center; min-height:28px; padding:3px 10px; border:1px solid var(--border); border-radius:6px; font-size:11px; font-weight:650; flex-shrink:0; }
.badge.unpaid { color:#795313; background:#fff5df; border-color:#e4d3a8; }
.badge.paid { color:var(--brand); background:var(--tint); border-color:#b7cfb7; }
.badge.inactive { color:var(--muted); background:#f3f5f0; }
.fixed-amount { font-size:27px; font-weight:700; font-variant-numeric:tabular-nums; line-height:1.5; margin:8px 0 10px; }
.fixed-unpaid { border-left:3px solid var(--brand); padding:8px 18px; margin:24px 0 20px; }
.fixed-list .fixed-item>.button { margin-top:10px; }
.data-backup { border-top:3px solid var(--brand); }
.data-backup h2 { display:flex; align-items:center; gap:10px; }
.data-backup h2>.icon { color:var(--brand); }
.data-restore { border-color:#d8b6b0; }
.data-restore>h2 { color:var(--danger); }
.storage-details { border-top:1px solid var(--border); border-bottom:1px solid var(--border); padding:10px 0; }
.storage-details summary { min-height:44px; cursor:pointer; font-size:13px; font-weight:600; padding:10px 0; }
.storage-details .muted { margin:10px 0; }
.backup-summary:not(:empty) { padding:18px; border:1px solid var(--border); border-radius:10px; background:var(--canvas); }
.backup-summary .muted:last-child { margin-bottom:0; }
.category-item { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.category-details { min-width:0; }
.category-details>.muted { margin:6px 0 0; font-size:12px; }
.category-controls { display:flex; align-items:center; gap:16px; flex-shrink:0; }
.category-controls .back-link { margin:0; }
.report-panels { display:grid; grid-template-columns:1.15fr 1fr; gap:24px; align-items:start; }
.report-panels>.panel { margin:0; }
.report-total { padding:24px 28px; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); margin:28px 0 14px; color:var(--brand); }
.settings-menu { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:32px 0; }
.setting-link { display:flex; align-items:center; gap:18px; padding:26px; background:var(--paper); border:1px solid var(--border); border-radius:var(--radius); text-decoration:none; min-height:130px; }
.setting-link:hover { background:var(--tint); text-decoration:none; border-color:var(--input-border); }
.setting-link>div { min-width:0; flex:1; }
.setting-link>div strong { display:block; font-size:16px; overflow-wrap:anywhere; }
.setting-link small { display:block; margin-top:6px; font-size:12px; }
.setting-link>.icon { width:26px; height:26px; }
.setting-arrow { font-size:25px; color:var(--muted); }
@media(max-width:767px) {
  .header { padding:18px 22px; min-height:86px; }
  .brand-text>span { font-size:21px; }
  .brand-mark { width:36px; height:40px; }
  .main-nav { position:fixed; z-index:20; bottom:0; left:0; right:0; padding:8px 12px calc(8px + env(safe-area-inset-bottom,0px)); justify-content:space-around; background:var(--paper); border-top:1px solid var(--border); box-shadow:0 -2px 12px #223c3206; }
  .nav-link { width:30%; min-width:0; min-height:56px; padding:5px 10px; font-size:11px; gap:3px; flex-direction:column; border-radius:10px; }
  .nav-link .icon { width:21px; height:21px; }
  main { padding:28px 22px 40px; }
  .home-details { grid-template-columns:1fr; gap:18px; }
  .summary { gap:14px; }
  .summary-card { padding:24px; }
  .home-hero .primary { min-width:0; flex:1.3; }
  .home-hero .secondary { min-width:0; flex:1; }
  footer { margin-bottom:calc(80px + env(safe-area-inset-bottom,0px)); padding:24px 22px 30px; }
  .panel { padding:24px; }
  .record-form { max-width:none; }
  body { scroll-padding-bottom:100px; }
  html { scroll-padding-bottom:calc(100px + env(safe-area-inset-bottom,0px)); }
  .budget-metrics { grid-template-columns:1fr 1fr; gap:20px; }
  .budget-metrics .budget-remaining { grid-column:1 / -1; padding-top:18px; border-top:1px solid var(--border); }
  .report-panels { grid-template-columns:1fr; }
  .category-item { align-items:flex-start; flex-direction:column; gap:12px; }
  .settings-menu { grid-template-columns:1fr; }
  .setting-link { min-height:108px; padding:22px; }
}
@media(max-width:480px) {
  main { padding-inline:18px; }
  .home-hero { padding-top:2px; }
  .home-hero h1 { font-size:26px; letter-spacing:0; }
  .home-hero .actions { flex-direction:column; gap:12px; margin-bottom:8px; }
  .home-hero .primary { min-height:58px; }
  .home-hero .secondary { min-height:48px; }
  .summary { grid-template-columns:1fr; gap:12px; }
  .summary-card { padding:22px 24px; }
  .summary-card.income { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.25fr); align-items:center; gap:6px 14px; }
  .income .total { font-size:30px; margin:0; max-width:100%; grid-column:2; grid-row:1 / span 2; }
  .income .card-caption { grid-column:1; }
  .total { font-size:44px; }
  .panel { padding:22px; border-radius:15px; }
  .section-heading { gap:4px; }
  .section-heading h2 { font-size:16px; }
  .section-heading a { font-size:12px; }
  .record { gap:8px; }
  .amount { font-size:16px; }
  #history-list { padding:0 20px; }
  .actions { gap:10px; }
  .actions>.button { flex:1; padding-inline:12px; font-size:14px; }
  .button { padding-inline:18px; }
  .month-chooser .field { flex:1; min-width:0; }
  .month-chooser .button { padding-inline:20px; }
  .category-item .back-link { display:block; margin:8px 0 0; }
  .budget-remaining,.daily-budget { font-size:23px; }
  dialog { padding:24px; }
  dialog .actions { flex-direction:column-reverse; }
  dialog .button { width:100%; }
  footer>p { align-items:flex-start; font-size:11px; }
  footer .tools { gap:10px 20px; }
  footer .tools a { font-size:12px; }
  .category-budget-grid { grid-template-columns:1fr; }
  .metric-value { font-size:25px; }
  .budget-remaining .metric-value { font-size:34px; }
  .daily-allowance { padding:18px; }
  .fixed-unpaid { font-size:19px; }
  .fixed-item>.button { width:100%; }
  .data-backup>.button,.data-csv>.button,.data-restore>.button { width:100%; }
  .category-controls { gap:14px; flex-wrap:wrap; }
  .category-controls .back-link { margin:0; }
  .report-total { font-size:20px; padding:22px; }
}
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; animation:none !important; transition:none !important; } }
@media(forced-colors:active) { .button,.nav-link,.bar,.brand-mark { border:1px solid ButtonText; } }