:root{--bg:#eaf2f4;--card:#fff;--ink:#22323a;--sub:#6b7f88;--ok:#2f9a86;--warn:#e0707f;--line:#d6e3e7;--bub:#fff6d9;
box-sizing:border-box;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#15201f;--card:#1f2e2d;--ink:#e6f0ee;--sub:#92aaa5;--ok:#58c2ab;--warn:#f08a98;--line:#2e4341;--bub:#3a3720}}
:root[data-theme="dark"]{--bg:#15201f;--card:#1f2e2d;--ink:#e6f0ee;--sub:#92aaa5;--ok:#58c2ab;--warn:#f08a98;--line:#2e4341;--bub:#3a3720}
*{box-sizing:border-box}
[hidden]{display:none!important} /* display を指定した要素でも hidden で隠れるように */
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font-family:"Zen Maru Gothic","Hiragino Maru Gothic ProN","Hiragino Sans",sans-serif;line-height:1.6}
main{max-width:480px;margin:0 auto;padding:16px 16px 40px}
h1{font-size:18px;margin:4px 0 12px;font-weight:700}
.card{background:var(--card);border-radius:20px;padding:18px;margin-bottom:14px}
.row{display:flex;justify-content:space-between;align-items:baseline;gap:8px}
.sub{color:var(--sub);font-size:13px}
.big{font-size:44px;font-weight:700;line-height:1.1;letter-spacing:-.02em;margin:2px 0 8px}
.big.ok{color:var(--ok)}.big.over{color:var(--warn)}
.bar{height:12px;border-radius:6px;background:var(--line);overflow:hidden;position:relative}
.bar i{display:block;height:100%;background:var(--ok);border-radius:6px;transition:width .4s}
.bar i.over{background:var(--warn)}
.bar b{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ink);opacity:.45}
.bubble{background:var(--bub);border-radius:18px;padding:12px 14px;margin-top:14px;font-size:15px;position:relative}
.bubble:before{content:"";position:absolute;top:-8px;left:24px;border:8px solid transparent;border-top:0;border-bottom-color:var(--bub)}
button,input,textarea{font:inherit;color:inherit}
.inp{display:flex;gap:8px}
/* 入力欄は前の2倍の高さ（54px→116px）。2行で折り返して、打った文字が全部見える */
.inp textarea{flex:1;min-width:0;height:116px;resize:none;border:2px solid var(--line);background:var(--bg);border-radius:14px;padding:12px 14px;font-size:20px;line-height:1.5}
.inp textarea:focus{outline:none;border-color:var(--ok)}
.inpbtns{display:grid;grid-template-rows:1fr 1fr;gap:8px;width:68px}
.inpbtns .btn{padding:0}
.btn{border:0;border-radius:14px;background:var(--ok);color:#fff;font-weight:700;padding:0 16px;min-height:48px;cursor:pointer}
.mic{background:var(--bg);color:var(--ink);border:2px solid var(--line);font-size:20px}
.mic.on{background:var(--warn);color:#fff;border-color:var(--warn)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chips button{border:1px solid var(--line);background:transparent;border-radius:99px;padding:4px 10px;font-size:13px;color:var(--sub);cursor:pointer}
.item{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);cursor:pointer}
.item:last-child{border:0}
.item .t{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 記録一覧: タップで全文。開いたら文を次の行に全幅で出す */
.item .t:focus-visible{outline:2px solid var(--ok);outline-offset:2px;border-radius:4px}
.item.open{flex-wrap:wrap;row-gap:6px}
.item.open .tag{margin-left:auto}
.item.open .t{order:9;flex:0 0 100%;white-space:normal;overflow:visible;overflow-wrap:anywhere;background:var(--bg);border-radius:10px;padding:8px 12px}
.tag{font-size:12px;background:var(--bg);border-radius:99px;padding:2px 8px;color:var(--sub);white-space:nowrap}
.x{border:0;background:none;color:var(--sub);font-size:18px;cursor:pointer;padding:4px 8px}
.goal{border:0;background:none;font-weight:700;font-size:inherit;text-decoration:underline dotted;cursor:pointer;padding:0}
.goalin{width:7.5em;border:2px solid var(--ok);background:var(--bg);border-radius:8px;padding:0 6px;font-size:16px;font-weight:700;color:var(--ink)}
.goalin:focus{outline:none}
.empty{color:var(--sub);text-align:center;padding:14px 0;font-size:14px}
body{padding-bottom:76px}
nav{position:fixed;left:0;right:0;bottom:0;display:flex;background:var(--card);border-top:1px solid var(--line);padding-bottom:env(safe-area-inset-bottom,0px)}
nav button{flex:1;border:0;background:none;padding:12px 0;font-size:14px;color:var(--sub);cursor:pointer}
nav button.on{color:var(--ok);font-weight:700}
.rc{width:100%;margin-top:12px;background:var(--bg);color:var(--ink);border:2px dashed var(--line)}
.rcbox{margin-top:12px;border-radius:14px;background:var(--bub);padding:12px 14px}
.rcbox .acts{display:flex;gap:8px;margin-top:10px}
.rcbox .btn{min-height:40px;flex:1}.rcbox .no{background:var(--bg);color:var(--ink)}
.crow{display:grid;grid-template-columns:64px 1fr auto;gap:8px;align-items:center;margin:8px 0;font-size:14px;cursor:pointer}
/* カテゴリ別: タップで内訳。▸ が開くと ▾ に */
.crow b::after{content:"▸";margin-left:6px;font-size:11px;color:var(--sub);font-weight:400}
.crow.open b::after{content:"▾"}
.crow:focus-visible{outline:2px solid var(--ok);outline-offset:2px;border-radius:6px}
.cdet{background:var(--bg);border-radius:12px;padding:2px 12px;margin:0 0 10px}
.citem{display:flex;align-items:baseline;gap:10px;padding:7px 0;border-bottom:1px solid var(--line);font-size:14px}
.citem:last-child{border:0}
.citem .t{flex:1;min-width:0;overflow-wrap:anywhere}
.citem b{white-space:nowrap}
.crow .bar{height:10px}
.days{display:flex;align-items:flex-end;gap:2px;height:80px;margin-top:8px}
.days i{flex:1;background:var(--ok);border-radius:2px 2px 0 0;min-height:2px;opacity:.85}
.days i.z{background:var(--line)}
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin-top:8px}
.cal div{aspect-ratio:1/1.15;border-radius:10px;background:var(--bg);padding:3px 2px;font-size:11px;display:flex;flex-direction:column;justify-content:space-between;align-items:center;cursor:pointer;min-width:0;overflow:hidden;line-height:1.2}
.cal .h{aspect-ratio:auto;background:none;color:var(--sub);cursor:default;padding:0}
.cal .e{background:none;cursor:default}
.cal .today{outline:2px solid var(--ok)}
.cal .sel{background:var(--ok)!important;color:#fff}
.cal small{font-size:10px;font-weight:700}
.rcrow{display:flex;gap:8px;margin:8px 0 4px}
.rcrow input{flex:1;min-width:0;width:auto}
.rcrow input:last-child{flex:0 0 7.5em}
.bkdue{background:var(--bub)}
.bkdue .acts{display:flex;gap:8px;margin-top:10px}
.bkdue .btn{flex:1;min-height:40px}.bkdue .no{background:var(--bg);color:var(--ink)}
.shmsg{font-size:14px;margin-top:6px}
.shlink{width:100%;margin-top:10px;border:2px solid var(--line);background:var(--bg);border-radius:10px;padding:8px 10px;font-size:16px;color:var(--sub)}
/* 入ったお金: 記録一覧の金額を緑で「+¥」、合計の行も緑 */
.item.inc b{color:var(--ok)}
.inrow{margin-top:2px}.inrow span:first-child{color:var(--ok);font-weight:700}