:root { --primary:#137a68; --primary-dark:#075f52; --ink:#17302b; --muted:#64748b; --line:#dce9e5; --bg:#f2f8f6; }
* { box-sizing:border-box; }
body { margin:0; color:var(--ink); background:var(--bg); font-family:Inter,"Noto Sans JP",sans-serif; }
button,input { font:inherit; }
.hidden { display:none!important; }
.loading { min-height:100vh; display:grid; place-items:center; color:var(--muted); }
.spinner { display:inline-block; width:22px; height:22px; margin-right:9px; vertical-align:middle; border:3px solid #cfe4de; border-top-color:var(--primary); border-radius:50%; animation:spin .7s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.app-header { background:rgba(255,255,255,.92); border-bottom:1px solid var(--line); }
.header-inner { width:min(100% - 32px,760px); min-height:72px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:12px; }
.brand { display:flex; align-items:center; gap:10px; color:var(--ink); text-decoration:none; font-size:1.1rem; font-weight:800; letter-spacing:-.03em; }
.brand-mark { width:34px; height:34px; display:grid; place-items:center; color:#fff; background:linear-gradient(145deg,#1d9a80,#0d6d5e); border-radius:11px; }
.logout-btn { padding:.55rem .85rem; color:#45605a; background:#fff; border:1px solid var(--line); border-radius:9px; cursor:pointer; }
.logout-btn:hover,.back:hover { color:var(--primary-dark); background:#f7fbfa; }
.back { color:#4a665f; text-decoration:none; font-size:.88rem; font-weight:600; }
main { width:min(100% - 32px,760px); margin:auto; padding:38px 0 54px; }
.eyebrow { margin:0 0 6px; color:var(--primary); font-size:.8rem; font-weight:700; }
h1 { margin:0; font-size:clamp(1.6rem,5vw,2.1rem); letter-spacing:-.05em; }
.lead,.welcome { margin:10px 0 26px; color:var(--muted); font-size:.92rem; }
.menu { display:grid; gap:16px; }
.menu-card { min-height:180px; padding:24px; display:flex; align-items:center; gap:18px; color:inherit; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 24px rgba(24,75,63,.045); transition:transform .15s,box-shadow .15s; }
.menu-card:hover { transform:translateY(-3px); box-shadow:0 14px 30px rgba(24,75,63,.1); }
.menu-card.primary,.budget-card,.metric.primary { color:#fff; background:linear-gradient(135deg,#0d7968,#159678); border:0; }
.menu-icon,.icon { width:50px; height:50px; display:grid; place-items:center; flex:0 0 auto; color:var(--primary); background:#e5f5f0; border-radius:15px; font-size:1.35rem; }
.primary .menu-icon,.primary .icon { color:#fff; background:rgba(255,255,255,.17); }
.menu-body { flex:1; }.menu-label,.label { display:block; margin:0 0 8px; color:#68807a; font-size:.8rem; font-weight:700; }.primary .menu-label,.primary .label { color:rgba(255,255,255,.76); }.menu-title { display:block; font-size:1.18rem; font-weight:700; letter-spacing:-.03em; }.menu-detail { display:block; margin-top:8px; color:#6d827d; font-size:.87rem; line-height:1.6; }.primary .menu-detail { color:rgba(255,255,255,.83); }.arrow { font-size:1.55rem; }.hint { margin:24px 0 0; color:#82938f; text-align:center; font-size:.8rem; }
.budget-card { position:relative; overflow:hidden; padding:25px; border-radius:18px; }.budget-card::after { content:"¥"; position:absolute; right:17px; bottom:-52px; color:rgba(255,255,255,.1); font-size:12rem; font-weight:800; }.budget-label,.note { position:relative; z-index:1; margin:0; }.budget-label { color:rgba(255,255,255,.78); font-size:.85rem; font-weight:600; }.amount { position:relative; z-index:1; margin:18px 0 7px; font-size:clamp(2.5rem,8vw,3.5rem); font-weight:800; letter-spacing:-.07em; }.note { color:rgba(255,255,255,.85); font-size:.83rem; }
.message { margin:16px 0; padding:18px 20px; background:#eef8f5; border:1px solid #c9e9dd; border-radius:14px; }.message h2,.form-card h2 { margin:0; font-size:1.05rem; }.message p { margin:7px 0 0; color:#52736b; font-size:.88rem; line-height:1.6; }
.form-card { padding:24px; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 24px rgba(24,75,63,.045); }.form-card h2 { margin-bottom:20px; }.form-grid,.metrics { display:grid; grid-template-columns:1fr 1fr; gap:14px; }.group { margin-bottom:14px; }.full { grid-column:1/-1; }label { display:block; margin-bottom:7px; color:#425b55; font-size:.82rem; font-weight:600; }input { width:100%; padding:.72rem .8rem; color:var(--ink); background:#fbfdfc; border:1px solid #cfe0db; border-radius:9px; outline:none; }input:focus { border-color:#16927a; box-shadow:0 0 0 3px rgba(22,146,122,.12); background:#fff; }.form-footer { display:flex; align-items:center; justify-content:space-between; gap:10px; }.status { margin:0; color:#16816d; font-size:.8rem; font-weight:600; }.submit { padding:.78rem 1.15rem; color:#fff; background:var(--primary); border:0; border-radius:9px; font-weight:700; cursor:pointer; }.submit:hover { background:var(--primary-dark); }
.metric { min-height:210px; padding:24px; display:flex; flex-direction:column; justify-content:space-between; background:#fff; border:1px solid var(--line); border-radius:18px; box-shadow:0 8px 24px rgba(24,75,63,.045); }.metric .label { margin-top:18px; }.value { margin:7px 0 0; font-size:clamp(2.1rem,7vw,3rem); font-weight:800; line-height:1; letter-spacing:-.07em; }.metric .note { color:#82958f; }.metric.primary .note { color:rgba(255,255,255,.83); }
.budget-setting { margin:16px 0; padding:20px; background:#fff; border:1px solid var(--line); border-radius:14px; }.budget-setting h2 { margin:0 0 5px; font-size:1rem; }.budget-setting p { margin:0 0 14px; color:var(--muted); font-size:.83rem; }.inline-form { display:flex; gap:10px; }.inline-form input { flex:1; }.error { margin:12px 0 0; color:#b42318; font-size:.84rem; font-weight:600; }.summary { margin:16px 0; display:grid; grid-template-columns:1fr 1fr; gap:12px; }.summary-item { padding:15px; background:#f7fbf9; border:1px solid #dce9e5; border-radius:12px; }.summary-item span { display:block; color:#66817a; font-size:.78rem; font-weight:600; }.summary-item strong { display:block; margin-top:5px; font-size:1.1rem; }.empty { padding:28px 18px; color:var(--muted); text-align:center; background:#fff; border:1px dashed #b9d3cc; border-radius:14px; }.expense-list { overflow:hidden; background:#fff; border:1px solid var(--line); border-radius:18px; }.expense-row { padding:17px 20px; display:flex; align-items:center; justify-content:space-between; gap:14px; border-bottom:1px solid #edf3f1; }.expense-row:last-child { border-bottom:0; }.expense-date { color:#6d827d; font-size:.8rem; }.expense-memo { margin-top:4px; font-size:.95rem; font-weight:600; }.expense-amount { color:#b54708; white-space:nowrap; font-size:1rem; font-weight:800; }
@media (max-width:500px) { .header-inner,main { width:min(100% - 24px,760px); }.menu-card { min-height:160px; padding:20px; gap:13px; }.menu-icon { width:45px; height:45px; }.form-grid,.metrics { grid-template-columns:1fr; gap:0; }.metric { min-height:175px; } }