:root {
  --bg: #f5f2ea;
  --surface: #fffdf8;
  --surface-2: #f0ece2;
  --ink: #1f2b29;
  --muted: #6f7b77;
  --line: #ddd8cc;
  --green: #183c37;
  --green-2: #2f665d;
  --green-soft: #dfece6;
  --gold: #f2c879;
  --red: #ba4a43;
  --red-soft: #f9e5e2;
  --orange: #b97432;
  --shadow: 0 18px 50px rgba(37, 48, 44, .09);
  --radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--ink);
  background: var(--bg);
  font-variant-numeric: tabular-nums;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; min-width: 320px; background: var(--bg); }
button, input, select, textarea { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100vh; display: grid; grid-template-columns: 248px minmax(0,1fr); }
.sidebar { position: sticky; top: 0; height: 100vh; padding: 26px 18px; background: var(--green); color: #fff; display: flex; flex-direction: column; gap: 26px; }
.brand { display: flex; align-items: center; gap: 12px; padding: 0 10px; }
.brand-mark { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: var(--gold); color: var(--green); font-size: 22px; font-weight: 800; }
.brand b, .brand small { display:block; }.brand small { opacity:.65; margin-top:2px; }
.sidebar nav { display:grid; gap:5px; }
.nav-item { border:0; background:transparent; color:inherit; min-height:48px; border-radius:15px; padding:0 13px; display:flex; align-items:center; gap:12px; cursor:pointer; text-align:left; }
.nav-item:hover { background:rgba(255,255,255,.08); }.nav-item.active { background:#fff; color:var(--green); font-weight:700; }
.nav-item svg { width:22px; height:22px; }.settings-link { margin-top:auto; width:100%; }
.content { min-width:0; padding: 28px clamp(24px,4vw,62px) 54px; }
.topbar { max-width:1180px; margin:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; }
.topbar h1 { margin:2px 0 0; font-size:clamp(28px,4vw,42px); letter-spacing:-.04em; }
.eyebrow { margin:0; color:var(--muted); font-size:12px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.top-actions { display:flex; align-items:center; gap:10px; }
.icon-button, .add-main, .button { border:0; cursor:pointer; transition:.18s ease; }
.icon-button { width:44px; height:44px; display:grid; place-items:center; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.icon-button:hover { transform:translateY(-1px); box-shadow:0 8px 20px rgba(0,0,0,.07); }.icon-button svg { width:20px; height:20px; }
.add-main { height:44px; border-radius:14px; background:var(--green); color:#fff; padding:0 17px; display:flex; align-items:center; gap:8px; font-weight:750; }
.add-main svg { width:18px; }.view { max-width:1180px; margin:28px auto 0; }
.month-row { display:flex; justify-content:space-between; align-items:center; gap:14px; margin-bottom:18px; }
.month-switch { display:flex; align-items:center; gap:8px; }
.month-switch strong { min-width:150px; text-align:center; text-transform:capitalize; }
.month-switch .icon-button { width:36px; height:36px; background:transparent; }
.muted { color:var(--muted); }.small { font-size:13px; }.strong { font-weight:800; }
.wallet-card { background:linear-gradient(145deg,#183c37,#285f56); color:#fff; border-radius:28px; padding:28px; display:grid; grid-template-columns:minmax(0,1fr) minmax(260px,.8fr); gap:30px; box-shadow:var(--shadow); overflow:hidden; position:relative; }
.wallet-card:after { content:""; position:absolute; width:260px; height:260px; border:1px solid rgba(255,255,255,.13); border-radius:50%; right:-80px; top:-130px; box-shadow:0 0 0 45px rgba(255,255,255,.025),0 0 0 90px rgba(255,255,255,.018); }
.wallet-label { opacity:.72; font-size:14px; }.wallet-value { font-size:clamp(38px,6vw,68px); letter-spacing:-.055em; line-height:1; font-weight:760; margin:10px 0 15px; }
.forecast { display:flex; gap:9px; align-items:center; color:#dce8e4; font-size:14px; }.forecast b.negative { color:#ffd1cb; }.forecast b.positive { color:#c5f2df; }
.bar-chart { align-self:end; display:grid; gap:13px; position:relative; z-index:1; }.bar-row { display:grid; grid-template-columns:90px 1fr 80px; gap:10px; align-items:center; font-size:12px; }.bar-track { height:8px; background:rgba(255,255,255,.13); border-radius:10px; overflow:hidden; }.bar-fill { height:100%; border-radius:10px; background:var(--gold); }.bar-row:nth-child(2) .bar-fill{background:#95c7b9}.bar-row:nth-child(3) .bar-fill{background:#f0a59f}.bar-row:nth-child(4) .bar-fill{background:#d67e75}.bar-row b{text-align:right;}
.metric-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:14px 0 24px; }.metric-card { background:var(--surface); border:1px solid var(--line); border-radius:20px; padding:20px; }.metric-card span{display:block;color:var(--muted);font-size:13px}.metric-card strong{display:block;margin-top:7px;font-size:24px;letter-spacing:-.03em}.metric-card.plan strong,.negative{color:var(--red)}.positive{color:var(--green-2)}
.dashboard-grid { display:grid; grid-template-columns:1fr 1fr; gap:16px; }.panel { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px; min-width:0; }.panel-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:14px; }.panel-title { display:flex; align-items:center; gap:10px; min-width:0; }.panel-title h2{font-size:18px;margin:0}.count-badge{min-width:28px;height:28px;padding:0 8px;border-radius:9px;background:var(--red-soft);color:var(--red);display:grid;place-items:center;font-weight:800;font-size:13px}.count-badge.week{background:var(--green-soft);color:var(--green)}
.event-list{display:grid;gap:8px}.event{display:grid;grid-template-columns:38px minmax(0,1fr) auto;gap:11px;align-items:center;padding:11px 0;border-bottom:1px solid #eee9df}.event:last-child{border:0}.event-icon{width:38px;height:38px;border-radius:12px;background:var(--surface-2);display:grid;place-items:center;color:var(--green)}.event-icon.red{background:var(--red-soft);color:var(--red)}.event-icon svg{width:19px}.event-main{min-width:0}.event-main strong{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:14px}.event-main small{display:block;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:4px}.event-meta{text-align:right}.event-meta b{display:block;font-size:13px}.event-meta small{color:var(--muted)}.expand-button{width:100%;padding:9px;border:0;background:transparent;color:var(--green-2);font-weight:750;cursor:pointer}.empty{padding:26px 10px;text-align:center;color:var(--muted)}
.toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:16px}.search{position:relative;flex:1;min-width:220px}.search svg{position:absolute;left:13px;top:12px;width:18px;color:var(--muted)}.search input,.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:var(--surface);border-radius:14px;padding:12px 13px;color:var(--ink);outline:none}.search input{padding-left:41px}.search input:focus,.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--green-2);box-shadow:0 0 0 3px rgba(47,102,93,.11)}.filter-button{height:44px;padding:0 14px;border:1px solid var(--line);border-radius:14px;background:var(--surface);cursor:pointer}.tabs{display:flex;gap:7px;padding:5px;background:#eae5da;border-radius:16px;margin:0 0 16px;overflow:auto}.tab{flex:1;min-width:110px;border:0;background:transparent;padding:10px 13px;border-radius:12px;cursor:pointer;color:var(--muted);font-weight:750}.tab.active{background:var(--surface);color:var(--green);box-shadow:0 3px 12px rgba(30,45,40,.07)}
.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:20px;overflow:hidden;margin-bottom:16px}.summary-cell{background:var(--surface);padding:16px}.summary-cell span{display:block;color:var(--muted);font-size:12px}.summary-cell b{display:block;margin-top:5px;font-size:18px}
.list{display:grid;gap:10px}.list-row{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:minmax(130px,1fr) minmax(100px,.6fr) minmax(100px,.55fr) auto;gap:16px;align-items:center;cursor:pointer;transition:.15s}.list-row:hover{border-color:#bdb7aa;transform:translateY(-1px)}.list-row h3{font-size:15px;margin:0 0 5px}.list-row p{font-size:13px;color:var(--muted);margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.amount{text-align:right;font-weight:800}.status{display:inline-flex;align-items:center;gap:6px;width:max-content;padding:6px 9px;border-radius:9px;font-size:12px;font-weight:800;background:var(--surface-2);color:var(--muted)}.status.red{background:var(--red-soft);color:var(--red)}.status.green{background:var(--green-soft);color:var(--green-2)}.status.orange{background:#faecd9;color:var(--orange)}
.budget-section{margin-bottom:18px}.section-head{display:flex;justify-content:space-between;align-items:end;margin:0 2px 9px}.section-head h2{margin:0;font-size:18px}.section-head small{color:var(--muted)}.budget-item{background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:16px;display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(200px,1fr) 105px 44px;gap:18px;align-items:center;margin-bottom:8px}.progress-track{height:9px;border-radius:10px;background:#ece7dd;overflow:hidden;margin:8px 0 5px}.progress-fill{height:100%;border-radius:10px;background:var(--red)}.progress-fill.done{background:var(--green-2)}.budget-values{display:flex;justify-content:space-between;color:var(--muted);font-size:12px}.pay-button{width:40px;height:40px;border:0;border-radius:50%;background:var(--green);color:#fff;display:grid;place-items:center;cursor:pointer}.pay-button svg{width:18px}.overrun{color:var(--green-2);font-weight:800}.remaining{color:var(--red);font-weight:800}
.loan-grid,.case-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.loan-card,.case-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:18px;cursor:pointer}.loan-card:hover,.case-card:hover{border-color:#bdb7aa}.card-top{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}.card-top h3{margin:0;font-size:17px}.card-sub{color:var(--muted);font-size:13px;margin:6px 0 16px}.card-stats{display:grid;grid-template-columns:1fr 1fr;gap:12px}.card-stat span{display:block;color:var(--muted);font-size:11px}.card-stat b{display:block;margin-top:4px;font-size:14px}.case-card .card-sub{min-height:34px}.case-type{width:38px;height:38px;border-radius:12px;background:var(--green-soft);color:var(--green);display:grid;place-items:center}.case-type svg{width:20px}
.modal{padding:0;border:0;background:transparent;max-width:none;width:100%;height:100%}.modal::backdrop{background:rgba(20,33,30,.48);backdrop-filter:blur(4px)}.modal-card{width:min(680px,calc(100% - 28px));max-height:calc(100dvh - 36px);overflow:hidden;margin:18px auto;background:var(--surface);border-radius:24px;box-shadow:0 35px 100px rgba(0,0,0,.24);padding:0;display:flex;flex-direction:column}.modal-card header{flex:0 0 auto;background:var(--surface);z-index:2;padding:22px 24px 16px;display:flex;justify-content:space-between;align-items:start;border-bottom:1px solid var(--line)}.modal-card h2{margin:3px 0 0;font-size:25px}.modal-body{padding:22px 24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:15px;overflow-y:auto;overscroll-behavior:contain;min-height:0;-webkit-overflow-scrolling:touch}.modal-body>*{min-width:0}.field{display:grid;gap:6px;min-width:0}.field.full{grid-column:1/-1}.field label{font-size:12px;font-weight:800;color:var(--muted)}.field input,.field select{display:block;min-width:0;max-width:100%;height:48px}.field input[type="date"],.field input[type="month"]{width:100%;min-width:0;max-width:100%;text-align:left;-webkit-appearance:none;appearance:none}.field textarea{resize:vertical;min-height:86px;max-width:100%}.modal-card footer{flex:0 0 auto;background:var(--surface);border-top:1px solid var(--line);padding:16px 24px;display:flex;justify-content:flex-end;gap:10px}.button{height:44px;padding:0 17px;border-radius:14px;font-weight:800}.button.primary{background:var(--green);color:#fff}.button.secondary{background:var(--surface-2)}.button.danger{background:var(--red-soft);color:var(--red);margin-right:auto}.button.budget-delete{margin-right:0}.detail-block{grid-column:1/-1;background:var(--surface-2);border-radius:16px;padding:15px}.detail-block h3{margin:0 0 10px;font-size:15px}.detail-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}.detail-grid span{display:block;color:var(--muted);font-size:11px}.detail-grid b{display:block;margin-top:3px;font-size:13px}.schedule-row{display:grid;grid-template-columns:1fr 1fr auto;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.settings-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}.settings-card{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:20px}.settings-card h2{margin:0 0 7px;font-size:17px}.settings-card p{color:var(--muted);font-size:13px;min-height:38px}.settings-card .button{width:100%}.history-item{font-size:13px;padding:10px 0;border-bottom:1px solid var(--line)}
.toast{position:fixed;left:50%;bottom:30px;transform:translate(-50%,120px);background:var(--green);color:#fff;padding:12px 18px;border-radius:13px;box-shadow:var(--shadow);transition:.25s;z-index:20}.toast.show{transform:translate(-50%,0)}.amount-hidden .money{filter:blur(8px);user-select:none}.mobile-nav{display:none}
@media(max-width:900px){.app-shell{grid-template-columns:1fr}.sidebar{display:none}.content{padding:20px 18px 112px}.topbar{align-items:flex-start}.wallet-card{grid-template-columns:1fr}.dashboard-grid{grid-template-columns:1fr}.loan-grid,.case-grid{grid-template-columns:1fr}.mobile-nav{position:fixed;left:0;right:0;bottom:0;z-index:10;display:flex;align-items:stretch;justify-content:space-around;padding:8px 6px max(8px,env(safe-area-inset-bottom));background:rgba(255,253,248,.94);border-top:1px solid var(--line);backdrop-filter:blur(18px)}.mobile-nav .nav-item{width:auto;flex:1;min-height:62px;padding:7px 3px;display:grid;place-items:center;gap:3px;color:var(--muted);font-size:9px}.mobile-nav .nav-item span:last-child{display:block}.mobile-nav .nav-item.active{background:var(--green-soft);color:var(--green)}.metric-grid{grid-template-columns:repeat(3,1fr)}.metric-card{padding:15px}.metric-card strong{font-size:18px}.summary-strip{grid-template-columns:1fr 1fr}.list-row{grid-template-columns:1fr auto}.list-row>*:nth-child(2),.list-row>*:nth-child(3){display:none}.budget-item{grid-template-columns:1fr 42px;gap:10px}.budget-item .progress-wrap{grid-column:1/-1;grid-row:2}.budget-item .budget-result{display:none}.settings-grid{grid-template-columns:1fr}}
@media(max-width:560px){.content{padding-left:14px;padding-right:14px}.topbar h1{font-size:30px}.add-main span:last-child{display:none}.add-main{width:44px;padding:0;justify-content:center}.wallet-card{padding:22px}.wallet-value{font-size:45px}.bar-row{grid-template-columns:72px 1fr 70px}.metric-grid{gap:8px}.metric-card{border-radius:16px;padding:13px 11px}.metric-card span{font-size:11px}.metric-card strong{font-size:16px}.panel{padding:17px}.event{grid-template-columns:36px minmax(0,1fr)}.event-meta{grid-column:2;text-align:left;display:flex;gap:8px}.modal-body{grid-template-columns:1fr;padding:18px}.field.full{grid-column:1}.modal-card header,.modal-card footer{padding-left:18px;padding-right:18px}.settings-grid{grid-template-columns:1fr}.loan-grid,.case-grid{grid-template-columns:1fr}}

/* Version 0.2: unified money signs, clearer lists and responsive controls. */
:root {
  --flow-red: #d9362e;
  --flow-green: #0a8f49;
  --flow-blue: #2864d7;
  --flow-yellow: #d89800;
}
.mobile-settings { display: none; }
.tone-expense { color: var(--flow-red) !important; }
.tone-income { color: var(--flow-green) !important; }
.tone-plan,
.tone-remaining,
.tone-expected-expense,
.tone-expected-income { color: var(--flow-blue) !important; }
.tone-overrun { color: var(--flow-yellow) !important; }
.wallet-card .tone-expense { color: #ff8d86 !important; }
.wallet-card .tone-income { color: #75efad !important; }
.wallet-card .tone-plan,
.wallet-card .tone-remaining { color: #8fb5ff !important; }
.wallet-card .tone-overrun { color: #ffd167 !important; }
.bar-chart .bar-fill.expense { background: var(--flow-red); }
.bar-chart .bar-fill.income { background: var(--flow-green); }
.bar-chart .bar-fill.remaining { background: var(--flow-blue); }
.bar-chart .bar-fill.overrun { background: var(--flow-yellow); }
.forecast { align-items: flex-start; flex-direction: column; gap: 4px; }
.forecast-note { color: rgba(255,255,255,.67); font-size: 11px; line-height: 1.35; }
.metric-link { width: 100%; color: inherit; cursor: pointer; text-align: left; }
button.metric-card { appearance: none; }
.metric-link:hover { border-color: #b8b1a3; transform: translateY(-1px); box-shadow: 0 10px 25px rgba(37,48,44,.07); }
.panel-header { align-items: center; }
.panel-title { flex: 1; }
.panel-title h2 { white-space: nowrap; }
.count-badge { width: 38px; min-width: 38px; height: 38px; padding: 0; border-radius: 12px; line-height: 38px; text-align: center; }
.expand-button { width: auto; flex: 0 0 auto; padding: 9px 4px; }
button.event { width: 100%; color: inherit; background: transparent; border-top: 0; border-left: 0; border-right: 0; text-align: left; cursor: pointer; }
button.event:hover { background: #faf7f0; }
.event-meta .amount { white-space: nowrap; }
.tabs { justify-content: flex-start; }
.tab { flex: 1 1 0; min-width: 0; text-align: center; }
.field select,
.filter-button { padding-right: 40px; }
.money-table-head,
.money-row {
  display: grid;
  grid-template-columns: minmax(145px,.75fr) minmax(240px,1.45fr) 120px 145px;
  gap: 18px;
  align-items: center;
}
.money-table-head { padding: 0 16px 8px; color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; }
.money-row { background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 16px; cursor: pointer; transition: .15s; }
.money-row:hover { border-color: #bdb7aa; transform: translateY(-1px); }
.money-section { font-weight: 800; }
.money-description { min-width: 0; }
.money-description h3 { margin: 0 0 5px; font-size: 15px; }
.money-description p { margin: 0; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.money-date { color: var(--muted); font-size: 13px; }
.money-row .amount { white-space: nowrap; }
.overdue-alert { display: flex; justify-content: space-between; gap: 18px; align-items: center; margin: 0 0 16px; padding: 14px 17px; border: 1px solid #f0b4ae; border-radius: 16px; background: var(--red-soft); color: var(--flow-red); }
.overdue-alert b { display: block; }
.overdue-alert span { color: #8e4540; font-size: 13px; }
.budget-item.budget-overdue { border-color: #efaaa4; }
.budget-due { display: block; margin-top: 4px; color: var(--muted); font-size: 11px; }
.budget-due.overdue { color: var(--flow-red); font-weight: 800; }
.income-plan-section { padding:16px; border:1px solid #b8c9ee; border-radius:20px; background:#f4f7ff; }
.income-plan-item { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 14px; border-top:1px solid #dce4f5; cursor:pointer; }
.income-plan-item:first-of-type { border-top:0; }
.income-plan-item b { display:block; font-size:14px; }
.income-plan-item p { margin:4px 0 0; color:var(--muted); font-size:12px; }
.income-plan-item strong { white-space:nowrap; }
.detail-block p { margin: 6px 0; color: var(--muted); font-size: 13px; }
.button svg { width: 17px; height: 17px; vertical-align: -3px; margin-right: 7px; }
.settings-form { display: grid; gap: 12px; }
.settings-form .field { margin: 0; }
.settings-form > *, .settings-form .field { min-width:0; max-width:100%; }
.settings-form input[type="time"] { display:block; width:100%; min-width:0; max-width:100%; height:48px; min-height:48px; padding:0 13px; text-align:left; -webkit-appearance:none; appearance:none; }
.settings-form input[type="time"]::-webkit-date-and-time-value { text-align:left; }
.setting-toggle { display:grid; grid-template-columns:auto minmax(0,1fr); gap:11px; align-items:start; padding:13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); cursor:pointer; }
.setting-toggle input { width:20px; height:20px; margin:1px 0 0; accent-color:var(--green); }
.setting-toggle b, .setting-toggle small { display:block; }
.setting-toggle small { margin-top:3px; color:var(--muted); line-height:1.35; }
.settings-note { color: var(--muted); font-size: 12px; line-height: 1.45; }
.security-state { display: inline-flex; padding: 6px 9px; border-radius: 9px; background: #faecd9; color: var(--orange); font-size: 12px; font-weight: 800; }
.loan-timeline { display: grid; grid-template-columns: repeat(6,minmax(54px,1fr)); gap: 7px; margin-top: 12px; }
.timeline-month { min-height: 50px; display: grid; place-items: center; align-content: center; gap: 2px; border: 1px solid var(--line); border-radius: 11px; background: #ece9e1; color: var(--muted); }
.timeline-month span { font-size: 11px; text-transform: capitalize; }
.timeline-month b { font-size: 10px; }
.timeline-month.paid { background: #d8f1e3; border-color: #8bc8a4; color: var(--flow-green); }
.timeline-month.late { background: var(--red-soft); border-color: #eba9a3; color: var(--flow-red); }
.timeline-month.partial { background: #faecd9; border-color: #e9c58c; color: var(--orange); }
.timeline-month.deferred { background: #e1eafb; border-color: #aac2ef; color: var(--flow-blue); }
.timeline-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; color: var(--muted); font-size: 11px; }
.timeline-legend span:before { content: ''; display: inline-block; width: 9px; height: 9px; margin-right: 5px; border-radius: 3px; background: #d9d6cf; }
.timeline-legend .paid:before { background: var(--flow-green); }
.timeline-legend .late:before { background: var(--flow-red); }
.loan-payment-summary { grid-column: 1/-1; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; padding: 14px; border: 1px solid #bad7ca; border-radius: 16px; background: var(--green-soft); }
.loan-payment-summary span { display: block; color: var(--muted); font-size: 11px; }
.loan-payment-summary b { display: block; margin-top: 4px; font-size: 13px; }
.loan-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.loan-chart-head h3 { margin: 0; }
.loan-chart-head .button { height: 36px; padding: 0 12px; font-size: 12px; }
.loan-chart-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px; }
.loan-overview { display: grid; grid-template-columns: 190px minmax(0,1fr); gap: 24px; align-items: center; }
.loan-donut { width: 154px; height: 154px; margin: 0 auto; border-radius: 50%; display: grid; place-items: center; position: relative; }
.loan-donut svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.loan-donut circle { fill: none; stroke-width: 16; }
.loan-donut .ring-base { stroke: #d9d6cf; }
.loan-donut .ring-paid { stroke: var(--flow-green); }
.loan-donut .ring-late { stroke: var(--flow-red); }
.loan-donut > div { position: relative; z-index: 1; display: grid; text-align: center; }
.loan-donut b { font-size: 28px; line-height: 1; }
.loan-donut span { margin-top: 4px; color: var(--muted); font-size: 11px; }
.donut-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px; margin-top: 12px; color: var(--muted); font-size: 10px; }
.donut-legend span:before { content: ''; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; background: #d9d6cf; }
.donut-legend .paid:before { background: var(--flow-green); }
.donut-legend .late:before { background: var(--flow-red); }
.loan-overview-info { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 13px 18px; }
.loan-overview-info span { display: block; color: var(--muted); font-size: 11px; }
.loan-overview-info b { display: block; margin-top: 3px; font-size: 13px; }
.loan-overview-info .wide { grid-column: 1/-1; }
.loan-schedule-head,.loan-schedule-row { display:grid; grid-template-columns:minmax(150px,1.35fr) minmax(115px,1fr) minmax(105px,1fr); gap:12px; align-items:center; }
.loan-schedule-head { color:var(--muted); font-size:11px; font-weight:800; padding:2px 0 9px; }
.loan-schedule-row { width:100%; min-height:58px; padding:10px 0; border:0; border-top:1px solid var(--line); background:transparent; text-align:left; }
.loan-schedule-row b { font-size:13px; }
.loan-schedule-row.payable { cursor:pointer; border-radius:12px; transition:.15s; }
.loan-schedule-row.payable:hover { background:var(--green-soft); padding-left:10px; padding-right:10px; }
.loan-schedule-row.locked { color:var(--muted); opacity:.62; cursor:default; }
.loan-schedule-row.locked .signed-money { color:var(--muted) !important; }
.schedule-state { font-size:12px; font-weight:800; color:var(--orange); }
.schedule-state.state-paid { color:var(--income); }
.schedule-state.state-overdue { color:var(--red); }
.schedule-state.state-deferred { color:var(--muted); }
.schedule-amount { text-align:right; font-weight:800; }
.case-toolbar { align-items:stretch; }
.case-toolbar .search { flex-basis:100%; }
.case-toolbar-actions { display:flex; gap:10px; width:100%; }
.case-toolbar-actions .filter-button { flex:1; }
.add-case-button { background:var(--green-soft); color:var(--green); border-color:#b8d2c7; font-weight:800; }
.case-events-head { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; gap:12px; }
.case-events-head h3 { margin:0; }
.case-event-list { grid-column:1/-1; display:grid; gap:10px; }
.case-event-row { display:grid; grid-template-columns:120px minmax(0,1fr) 100px 190px; gap:12px; align-items:center; background:var(--surface-2); border:1px solid var(--line); border-radius:16px; padding:13px; }
.case-event-row.completed { opacity:.62; }
.case-event-date span,.case-event-main small { display:block; color:var(--muted); font-size:11px; margin-top:3px; }
.case-event-main p { margin:5px 0 0; color:var(--muted); font-size:12px; }
.case-event-amount { text-align:right; font-weight:800; }
.case-event-actions { display:flex; justify-content:flex-end; gap:7px; }
.case-event-actions .button { height:36px; padding:0 11px; font-size:12px; }
.loan-card.term-expired { border-color: #e6928b; background: #fff8f6; box-shadow: inset 4px 0 0 var(--flow-red); }
.loan-term-notice { margin: -6px 0 14px; color: var(--flow-red); font-size: 12px; font-weight: 800; }
.loan-expired-alert { grid-column: 1/-1; display: grid; gap: 4px; padding: 14px 16px; border: 1px solid #e9a19b; border-radius: 16px; background: var(--red-soft); color: var(--flow-red); }
.loan-expired-alert b { font-size: 15px; }
.loan-expired-alert span { color: #8e4540; font-size: 12px; line-height: 1.45; }

@media(max-width:900px) {
  .mobile-settings { display: grid; }
  .money-table-head { display: none; }
  .money-row { grid-template-columns: minmax(0,1fr) auto; gap: 7px 12px; }
  .money-row > * { display: block !important; }
  .money-description { grid-column: 1; }
  .money-date { grid-column: 1; }
  .money-row .amount { grid-column: 2; grid-row: 1 / span 3; align-self: center; }
}
@media(max-width:560px) {
  .panel-header { gap: 8px; }
  .panel-title { gap: 8px; }
  .panel-title h2 { font-size: 16px; }
  .count-badge { width: 36px; min-width: 36px; height: 36px; line-height: 36px; }
  .expand-button { font-size: 12px; }
  button.event { grid-template-columns: 36px minmax(0,1fr); }
  .event-meta { grid-column: 2; }
  .tab { min-width: 0; padding-left: 8px; padding-right: 8px; }
  .overdue-alert { align-items: flex-start; flex-direction: column; gap: 5px; }
  .loan-timeline { grid-template-columns: repeat(4,minmax(48px,1fr)); }
  .loan-payment-summary { grid-template-columns: 1fr; }
  .loan-overview { grid-template-columns: 1fr; }
  .loan-overview-info { grid-template-columns: 1fr 1fr; }
  .loan-schedule-head { display:none; }
  .loan-schedule-row { grid-template-columns:1fr auto; gap:6px 12px; padding:14px 4px; }
  .schedule-state { grid-column:1; }
  .schedule-amount { grid-column:2; grid-row:1; }
  .case-event-row { grid-template-columns:1fr auto; }
  .case-event-main { grid-column:1/-1; grid-row:2; }
  .case-event-amount { grid-column:2; grid-row:1; }
  .case-event-actions { grid-column:1/-1; grid-row:3; }
  .case-event-actions .button { flex:1; }
  .schedule-row { grid-template-columns: 1fr auto; }
  .schedule-row .button { grid-column: 1/-1; width: 100%; }
  .loan-chart-head { align-items: flex-start; }
  .loan-chart-actions { width:100%; justify-content:flex-start; }
  .loan-chart-actions .button { flex:1; }
}

/* Version 0.5: consistent card headers, quiet actions and loan tranches. */
.modal-header-actions { display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.modal-card footer[hidden] { display:none; }
.button.soft-accent { background:#dfeae6; color:#285f56; border:1px solid #c5d9d2; }
.text-action {
  appearance:none; border:0; padding:4px 0; background:transparent;
  color:#3b6d65; font-weight:750; font-size:12px; cursor:pointer;
  text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px;
}
.text-action:hover { color:var(--green); }
.expand-button { text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:4px; }
.loan-chart-head { align-items:flex-start; }
.loan-card-actions { display:flex; flex-wrap:wrap; justify-content:flex-end; gap:8px 16px; }
.loan-disbursement-row { display:grid; grid-template-columns:120px 120px minmax(0,1fr); gap:12px; align-items:center; padding:10px 0; border-top:1px solid var(--line); }
.loan-disbursement-row:first-of-type { border-top:0; }
.loan-disbursement-row span,.loan-disbursement-row small { color:var(--muted); }
.loan-disbursement-row b { text-align:right; }
.loan-disbursement-preview { min-height:78px; }
.readonly-field { min-height:44px; display:flex; align-items:center; padding:0 13px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); color:var(--muted); font-weight:750; }
.case-view-tabs { max-width:360px; }
.case-card.archived { background:#f5f2eb; color:#606a67; }
.case-card.archived .case-type { background:#e8e5dd; color:#6f7875; }
.case-events-head .soft-accent,.case-event-actions .soft-accent { box-shadow:none; }

@media(max-width:560px) {
  .modal-card header { align-items:flex-start; }
  .modal-card h2 { font-size:23px; line-height:1.12; }
  .loan-chart-head { display:grid; grid-template-columns:1fr; }
  .loan-card-actions { justify-content:flex-start; width:100%; }
  .loan-disbursement-row { grid-template-columns:1fr auto; }
  .loan-disbursement-row small { grid-column:1/-1; }
}
/* Secure server sign-in */
.login-page { min-height: 100vh; background: #f6f3ec; color: var(--ink); }
.login-shell { min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.login-card { width: min(460px, 100%); display: grid; gap: 28px; padding: 34px; background: #fffdf8; border: 1px solid var(--line); border-radius: 28px; box-shadow: 0 24px 70px rgba(21, 58, 52, .14); }
.login-card h1 { margin: 4px 0 10px; font-size: clamp(2.2rem, 8vw, 3.4rem); }
.login-brand { color: var(--ink); }
.login-form { display: grid; gap: 18px; }
.login-form .button { width: 100%; min-height: 54px; }
.form-error { min-height: 1.3em; margin: 0; color: var(--danger); font-weight: 700; }
.login-passkey-note { margin: 0; color: var(--muted); font-size: .92rem; }
.password-input { position:relative; display:block; }
.password-input input { padding-right:52px; }
.password-input button { position:absolute; top:4px; right:5px; width:40px; height:40px; display:grid; place-items:center; border:0; border-radius:11px; background:transparent; color:var(--muted); cursor:pointer; }
.password-input button:hover { background:var(--surface-2); color:var(--green); }
.password-input svg { width:21px; height:21px; }
.confirm-button { background:var(--green); color:#fff; border-color:var(--green); }
.confirm-button:hover { background:var(--green-2); }
.settings-extra-action { margin-top:12px; }
.empty-guide { grid-column:1/-1; display:grid; justify-items:center; text-align:center; gap:8px; padding:34px 22px; border:1px dashed #cfc8ba; border-radius:22px; background:rgba(255,253,248,.65); color:var(--muted); }
.empty-guide-icon { width:44px; height:44px; display:grid; place-items:center; border-radius:14px; background:var(--green-soft); color:var(--green); }
.empty-guide-icon svg { width:21px; height:21px; }
.empty-guide h2 { margin:4px 0 0; color:var(--ink); font-size:18px; }
.empty-guide p { max-width:590px; margin:0; line-height:1.5; }
.empty-guide small { color:var(--green-2); font-weight:750; }
.settings-actions { display:flex; flex-wrap:wrap; gap:10px; }
.user-list { display:grid; gap:9px; margin:14px 0; }
.user-list > div { display:grid; gap:2px; padding:10px 12px; border:1px solid var(--line); border-radius:13px; background:var(--surface-2); }
.user-list span { color:var(--muted); font-size:12px; }
.device-list { display:grid; gap:9px; margin:14px 0; }
.device-row { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:12px; border:1px solid var(--line); border-radius:14px; background:var(--surface-2); }
.device-row > div { min-width:0; overflow-wrap:anywhere; }
.device-row span { display:block; margin-top:4px; color:var(--muted); font-size:11px; }
.device-row .button { width:auto; max-width:100%; height:36px; padding:0 12px; margin:0; font-size:12px; white-space:nowrap; }
.devices-card > .button.danger { margin:0; }
@media(max-width:560px) { .device-row { align-items:start; } .device-row .button { padding:0 10px; } }