:root{
  --bg:#f4f5f7; --surface:#fff; --ink:#1a1c1e; --muted:#6b7280; --line:#e5e7eb;
  --accent:#0f6e56; --accent-weak:#e1f5ee; --up:#0f6e56; --down:#b3261e;
  --chip-thu:#e1f5ee; --chip-chi:#fbeceb; --chip-chuyen:#eef0f2;
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--ink);line-height:1.45}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}

.topbar{display:flex;align-items:center;justify-content:space-between;gap:16px;
  background:var(--surface);border-bottom:1px solid var(--line);padding:12px 24px;position:sticky;top:0;z-index:5}
.brand{font-weight:700;font-size:18px}
.topbar nav{display:flex;gap:18px;align-items:center}
.btn-add{background:var(--accent);color:#fff;padding:7px 14px;border-radius:8px;font-weight:600}
.btn-add:hover{text-decoration:none;opacity:.92}

main{max-width:1040px;margin:24px auto;padding:0 24px}
.foot{max-width:1040px;margin:32px auto;padding:0 24px;color:var(--muted);font-size:13px}

.page-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.page-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.breadcrumb{display:flex;align-items:center;gap:6px;margin:0 0 7px;color:var(--muted);font-size:13px;line-height:1.3;flex-wrap:wrap}
.breadcrumb a{color:var(--muted);font-weight:600}
.breadcrumb span[aria-current=page]{color:var(--ink);font-weight:600}
.breadcrumb-sep{color:#9ca3af;font-weight:500}
h1{font-size:24px;margin:0}
h2{font-size:16px;margin:0 0 12px}
h3{font-size:14px;margin:16px 0 8px;color:var(--muted)}
.sub{margin:4px 0 0;color:var(--muted)}
.muted{color:var(--muted)}
.r{text-align:right}
.up{color:var(--up)}
.down{color:var(--down)}

.badge{font-size:12px;padding:2px 8px;border-radius:20px;margin-left:6px}
.badge-open{background:var(--accent-weak);color:var(--accent)}
.badge-lock{background:#eef0f2;color:var(--muted)}

.period-switch{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.period-switch form{margin:0}
select,input[type=date],input[type=number],input[type=text],textarea{
  font:inherit;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:#fff}
.btn{border:1px solid var(--accent);color:var(--accent);background:#fff;padding:7px 12px;border-radius:8px;font:inherit;font-weight:600;cursor:pointer}
.btn:hover{text-decoration:none;background:var(--accent-weak)}
.btn-small{display:inline-block;padding:5px 9px;font-size:13px;white-space:nowrap}

.alert{background:#fbeceb;border:1px solid #f3c9c6;color:#8a2018;padding:12px 14px;border-radius:8px;margin-bottom:16px}
.hint{background:var(--accent-weak);border:1px solid #bfe6d8;color:#0c5443;padding:10px 14px;border-radius:8px;margin:14px 0;font-size:14px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:14px;margin-bottom:20px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.card.big{border-left:3px solid var(--accent)}
.card .k{color:var(--muted);font-size:13px}
.card .v{font-size:26px;font-weight:700;margin:4px 0}
.card .d{font-size:13px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media(max-width:760px){.grid2{grid-template-columns:1fr}}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}

.tbl{width:100%;border-collapse:collapse;font-size:14px}
.tbl th{text-align:left;color:var(--muted);font-weight:600;padding:8px 6px;border-bottom:1px solid var(--line)}
.tbl td{padding:8px 6px;border-bottom:1px solid var(--line)}
.tbl.striped tbody tr:nth-child(even){background:#fafbfc}

.bars{width:100%;border-collapse:collapse}
.bars td{padding:5px 4px;font-size:13px;vertical-align:middle}
.bars .lbl{width:34%}
.bars .bar{width:44%}
.bars .bar span{display:block;height:10px;background:var(--accent);border-radius:6px}
.bars .amt{text-align:right;white-space:nowrap;color:var(--muted)}

.chip{font-size:12px;padding:2px 8px;border-radius:20px}
.chip-thu{background:var(--chip-thu);color:var(--accent)}
.chip-chi{background:var(--chip-chi);color:#8a2018}
.chip-chuyen{background:var(--chip-chuyen);color:var(--muted)}

.goal{margin-bottom:12px}
.goal-head{display:flex;justify-content:space-between;font-size:14px;font-weight:600}
.goal-total-cell strong{display:block;white-space:nowrap}
.goal-total-cell span{display:block;font-size:12px;white-space:nowrap}
.progress{height:8px;background:#eef0f2;border-radius:6px;margin:4px 0;overflow:hidden}
.progress span{display:block;height:100%;background:var(--accent)}
.goal-period-table{margin-bottom:10px}
.renew{margin:6px 0 0;padding-left:18px;font-size:14px}
.renew li{margin:3px 0}

/* Form */
.form{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;max-width:560px}
.form label{display:block;margin-bottom:14px;font-size:14px;font-weight:600}
.form input,.form select,.form textarea{width:100%;margin-top:5px;font-weight:400}
.form textarea{resize:vertical;min-height:96px}
.transaction-form{max-width:680px}
.transaction-form label{margin-bottom:12px}
.transaction-form .form-period{margin:0 0 12px}
.transaction-form textarea{min-height:72px}
.transaction-form .tag-picker-list{max-height:96px}
.transaction-form .tag-picker-field{margin-bottom:12px}
.form label.is-disabled{color:var(--muted)}
.form label.is-disabled input,.form label.is-disabled select{background:#f3f5f7;color:var(--muted)}
.form .check-row{display:grid;grid-template-columns:auto 1fr;gap:6px 8px;align-items:start}
.form .check-row input{width:auto;margin:3px 0 0}
.form .check-row .field-hint{grid-column:2}
.form-label{font-size:14px;font-weight:600}
.tag-picker-field{margin-bottom:14px}
.tag-picker{margin-top:5px;border:1px solid var(--line);border-radius:8px;background:#fff;padding:6px}
.tag-picker:focus-within{border-color:#b7c8c2;box-shadow:0 0 0 3px rgba(15,110,86,.08)}
.tag-picker-list{display:flex;flex-wrap:wrap;gap:6px;max-height:134px;overflow:auto}
.tag-picker-option{display:inline-flex!important;gap:6px;align-items:center;width:auto;margin:0!important;padding:5px 9px;border:1px solid #eef0f2;border-radius:20px;background:#fafbfc;font-weight:500!important;line-height:1.2;cursor:pointer}
.tag-picker-option:hover{background:#f6f8f9}
.tag-picker-option.is-selected{border-color:#bfe6d8;background:var(--accent-weak);color:#0c5443}
.tag-picker-option input{width:auto!important;margin:0!important}
.field-hint{display:block;margin-top:5px;color:var(--muted);font-size:12px;font-weight:400}
.form.compact{padding:0;border:0;background:transparent;max-width:none}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:560px){.row2{grid-template-columns:1fr}}
.btn-primary{background:var(--accent);color:#fff;border:0;padding:11px 18px;border-radius:9px;font:inherit;font-weight:700;cursor:pointer;margin-top:6px}
.btn-primary:hover{opacity:.92}

/* Quản lý */
.subnav{display:flex;gap:6px;margin:-6px 0 20px;flex-wrap:wrap}
.subnav a{padding:7px 14px;border-radius:8px;color:var(--muted);font-weight:600;font-size:14px}
.subnav a.on{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.subnav a:hover{text-decoration:none;background:var(--surface)}

.grid-manage{display:grid;grid-template-columns:320px 1fr;gap:18px;align-items:start}
@media(max-width:760px){.grid-manage{grid-template-columns:1fr}}
.grid-manage .form{max-width:none}
.grid-manage .panel{overflow-x:auto}
.panel-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.panel-head h2{margin:0}
.close-policy{display:inline-flex;align-items:center;white-space:nowrap;border-radius:20px;padding:2px 8px;font-size:12px;font-weight:600}
.policy-adjust{background:var(--accent-weak);color:var(--accent)}
.policy-ledger{background:#eef0f2;color:#4b5563}
.policy-muted{background:#f3f4f6;color:var(--muted)}
.manage-compact-form label,
.plan-form label,
.goal-form label{margin-bottom:12px}
.manage-compact-form h2,
.plan-form h2,
.goal-form h2{margin-bottom:14px}
.plans-table{table-layout:fixed}
.plans-table th:nth-child(1),.plans-table td:nth-child(1){width:18%}
.plans-table th:nth-child(2),.plans-table td:nth-child(2){width:21%}
.plans-table th:nth-child(3),.plans-table td:nth-child(3){width:17%}
.plans-table th:nth-child(4),.plans-table td:nth-child(4){width:9%}
.plans-table th:nth-child(5),.plans-table td:nth-child(5){width:16%}
.plans-table th:nth-child(6),.plans-table td:nth-child(6){width:19%}
.plans-table td{vertical-align:middle}
.plans-table td:nth-child(3){white-space:nowrap}
.plans-table td:nth-child(1),
.plans-table td:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goals-table{table-layout:fixed}
.goals-table th:nth-child(1),.goals-table td:nth-child(1){width:20%}
.goals-table th:nth-child(2),.goals-table td:nth-child(2){width:17%}
.goals-table th:nth-child(3),.goals-table td:nth-child(3){width:14%}
.goals-table th:nth-child(4),.goals-table td:nth-child(4){width:18%}
.goals-table th:nth-child(5),.goals-table td:nth-child(5){width:17%}
.goals-table th:nth-child(6),.goals-table td:nth-child(6){width:14%}
.goals-table td{vertical-align:middle}
.goals-table td:nth-child(1),
.goals-table td:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goals-table td:nth-child(4),.goals-table td:nth-child(5){white-space:nowrap}
.goals-table td:nth-child(6){text-align:right}
.goals-table td:nth-child(6) a{margin-right:0}
.wallets-table,.wallet-types-table,.categories-table,.tags-table{table-layout:fixed}
.wallets-table th:nth-child(1),.wallets-table td:nth-child(1){width:24%}
.wallets-table th:nth-child(2),.wallets-table td:nth-child(2){width:25%}
.wallets-table th:nth-child(3),.wallets-table td:nth-child(3){width:16%}
.wallets-table th:nth-child(4),.wallets-table td:nth-child(4){width:23%}
.wallets-table th:nth-child(5),.wallets-table td:nth-child(5){width:12%}
.wallet-types-table th:nth-child(1),.wallet-types-table td:nth-child(1){width:28%}
.wallet-types-table th:nth-child(2),.wallet-types-table td:nth-child(2){width:25%}
.wallet-types-table th:nth-child(3),.wallet-types-table td:nth-child(3){width:17%}
.wallet-types-table th:nth-child(4),.wallet-types-table td:nth-child(4){width:14%}
.wallet-types-table th:nth-child(5),.wallet-types-table td:nth-child(5){width:16%}
.categories-table th:nth-child(1),.categories-table td:nth-child(1){width:34%}
.categories-table th:nth-child(2),.categories-table td:nth-child(2){width:18%}
.categories-table th:nth-child(3),.categories-table td:nth-child(3){width:34%}
.categories-table th:nth-child(4),.categories-table td:nth-child(4){width:14%}
.tags-table th:nth-child(1),.tags-table td:nth-child(1){width:34%}
.tags-table th:nth-child(2),.tags-table td:nth-child(2){width:34%}
.tags-table th:nth-child(3),.tags-table td:nth-child(3){width:17%}
.tags-table th:nth-child(4),.tags-table td:nth-child(4){width:15%}
.wallets-table td,.wallet-types-table td,.categories-table td,.tags-table td{vertical-align:middle}
.wallets-table td:nth-child(1),.wallets-table td:nth-child(2),.wallets-table td:nth-child(4),
.wallet-types-table td:nth-child(1),.wallet-types-table td:nth-child(2),
.categories-table td:nth-child(1),.categories-table td:nth-child(3),
.tags-table td:nth-child(1),.tags-table td:nth-child(2){white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wallets-table td:last-child a,.wallet-types-table td:last-child a,
.categories-table td:last-child a,.tags-table td:last-child a{margin-right:0}
.grid-manage .tbl td.nowrap{font-size:0}
.grid-manage .tbl td.nowrap > a,
.grid-manage .tbl td.nowrap > form{display:inline-block;vertical-align:middle;margin-left:10px;font-size:14px}
.grid-manage .tbl td.nowrap > :first-child{margin-left:0}
.grid-manage .tbl td.nowrap > a{margin-right:0}
.mini-chip{display:inline-flex;align-items:center;border-radius:6px;background:#eef0f2;color:#4b5563;padding:1px 6px;margin-right:6px;font-size:11px;font-weight:700}

.cancel{margin-left:12px;color:var(--muted);font-size:14px}
.nowrap{white-space:nowrap}
.nowrap a{margin-right:10px}
.small{font-size:12px}
tr.dim td{opacity:.5}

/* Biểu đồ xu hướng */
.chart{display:block;max-width:100%}
.chart .grid{stroke:var(--line);stroke-width:1}
.chart .area{fill:var(--accent-weak);opacity:.7}
.chart .line{fill:none;stroke:var(--accent);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart .dot{fill:#fff;stroke:var(--accent);stroke-width:2.5}
.chart .yl{fill:var(--muted);font-size:11px;text-anchor:end;font-family:system-ui,sans-serif}
.chart .xl{fill:var(--muted);font-size:12px;font-family:system-ui,sans-serif}
.chart .pl{fill:var(--ink);font-size:12px;font-weight:600;font-family:system-ui,sans-serif}

.filterbar{display:flex;gap:8px;flex-wrap:wrap;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:10px;padding:12px;margin-bottom:16px}
.filterbar input[type=search]{min-width:180px;flex:1}

.inline{display:inline}
button.link{background:none;border:0;padding:0;margin:0;font:inherit;color:var(--accent);cursor:pointer}
button.link:hover{text-decoration:underline}
button.link.danger{color:var(--down)}

.transactions-stack{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;align-items:start}
.transactions-stack.is-single{grid-template-columns:1fr}
@media(max-width:860px){.transactions-stack{grid-template-columns:1fr}}
.transactions-stack .panel{overflow:hidden}
.transactions-stack .tbl{table-layout:fixed}
.transactions-stack .tbl th,
.transactions-stack .tbl td{white-space:nowrap;vertical-align:middle}
.transactions-stack .tbl th:nth-child(1),
.transactions-stack .tbl td:nth-child(1){width:34px}
.transactions-stack .tbl th:nth-child(2),
.transactions-stack .tbl td:nth-child(2){width:58px}
.transactions-stack .tbl th:nth-child(3),
.transactions-stack .tbl td:nth-child(3){width:112px}
.transactions-stack .tbl th:nth-child(5),
.transactions-stack .tbl td:nth-child(5){width:98px}
.transactions-stack .transaction-table.no-tags th:nth-child(6),
.transactions-stack .transaction-table.no-tags td:nth-child(6){width:46px}
.transactions-stack .transaction-table.has-tags th:nth-child(6),
.transactions-stack .transaction-table.has-tags td:nth-child(6){width:82px}
.transactions-stack .transaction-table.has-tags th:nth-child(7),
.transactions-stack .transaction-table.has-tags td:nth-child(7){width:46px}
.transactions-stack .tbl td:nth-child(4),
.transactions-stack .tbl td:nth-child(5){overflow:hidden;text-overflow:ellipsis;max-width:0}
.transactions-stack .transaction-table.has-tags td:nth-child(6){overflow:hidden;text-overflow:ellipsis;max-width:0}
.transactions-stack .transaction-table.no-tags td:nth-child(6),
.transactions-stack .transaction-table.has-tags td:nth-child(7){text-align:center}
.transactions-stack .nowrap a{margin-right:0}
.transactions-stack.is-single .tbl th:nth-child(3),
.transactions-stack.is-single .tbl td:nth-child(3){width:128px}
.transactions-stack.is-single .tbl th:nth-child(4),
.transactions-stack.is-single .tbl td:nth-child(4){width:auto}
.transactions-stack.is-single .tbl th:nth-child(5),
.transactions-stack.is-single .tbl td:nth-child(5){width:170px}
.transactions-stack.is-single .tbl th:nth-child(6),
.transactions-stack.is-single .tbl td:nth-child(6){width:140px}
.transactions-stack.is-single .tbl th:nth-child(7),
.transactions-stack.is-single .tbl td:nth-child(7){width:46px}
.period-finalize-panel{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.period-finalize-panel h2{margin-bottom:4px}
.period-finalize-panel .btn{white-space:nowrap}
@media(max-width:640px){.period-finalize-panel{align-items:flex-start;flex-direction:column}.period-finalize-panel .btn{width:100%;text-align:center}}
.icon-head,.type-cell{width:36px;text-align:center}
.type-icon{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:50%;font-size:14px;font-weight:800;line-height:1}
.type-icon.type-chi{background:var(--chip-chi);color:#8a2018}
.type-icon.type-chuyen{background:var(--chip-chuyen);color:#4b5563}
.type-icon.type-thu{background:var(--chip-thu);color:var(--accent)}
.icon-link{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1px solid var(--line);border-radius:8px;color:var(--muted);font-size:22px;font-weight:700;line-height:1}
.icon-link:hover{background:var(--accent-weak);border-color:#bfe6d8;color:var(--accent);text-decoration:none}
.dashboard-summary-plans{margin-bottom:16px}
.plan-summary-box{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px}
.plan-summary-row{display:grid;grid-template-columns:92px 112px minmax(120px,1fr);gap:12px;align-items:center;margin-top:8px}
.plan-summary-label{color:var(--muted);font-size:13px;font-weight:700}
.plan-summary-amount{text-align:right;white-space:nowrap;color:#34495e;font-size:13px;font-weight:600}
.plan-summary-bar{display:block;height:8px;background:#eef0f2;border-radius:6px;overflow:hidden}
.plan-summary-bar span{display:block;height:100%;border-radius:6px}
.plan-summary-bar .planned{background:#aeb8c2}
.plan-summary-bar .actual{background:var(--accent)}
@media(max-width:560px){.plan-summary-row{grid-template-columns:78px 1fr}.plan-summary-bar{grid-column:1 / -1}}
.dashboard-plans{align-items:start;margin-top:16px}
.dashboard-lower{margin-top:16px}
.report-stack{display:grid;gap:16px}
.report-card,.goal-report-card,.debt-panel{margin:0}
.report-head,.goal-report-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:14px}
.report-summary,.goal-report-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin-bottom:12px}
.report-summary div,.goal-report-summary div{border:1px solid var(--line);border-radius:8px;padding:10px;background:#fafbfc;display:grid;gap:3px}
.report-summary span,.goal-report-summary span{display:block;color:var(--muted);font-size:12px;margin-bottom:3px}
.report-summary strong,.goal-report-summary strong{text-align:right;font-size:15px;font-variant-numeric:tabular-nums}
.goal-report-progress{margin:0 0 6px}
.report-table,.goal-report-table{overflow-x:auto}
.report-table .tbl,.goal-report-table .tbl{min-width:760px;border:1px solid var(--line);border-radius:8px;border-collapse:separate;border-spacing:0;overflow:hidden;font-variant-numeric:tabular-nums}
.goal-report-table .ledger-table{min-width:880px}
.report-table .tbl th,.report-table .tbl td,
.goal-report-table .tbl th,.goal-report-table .tbl td{border-right:1px solid var(--line);padding:9px 8px}
.report-table .tbl th.r,.report-table .tbl td.r,
.goal-report-table .tbl th.r,.goal-report-table .tbl td.r{text-align:right}
.report-table .tbl th:last-child,.report-table .tbl td:last-child,
.goal-report-table .tbl th:last-child,.goal-report-table .tbl td:last-child{border-right:0}
.report-table .tbl thead th,.goal-report-table .tbl thead th{background:#f8fafb}
.report-table .tbl tfoot th,.goal-report-table .tbl tfoot th{padding:9px 8px;border-top:1px solid var(--line);background:#f8fafb}
.debt-split{display:grid;gap:16px}
.debt-ledger-table .tbl{min-width:760px;table-layout:fixed}
.debt-ledger-table .tbl th:first-child,.debt-ledger-table .tbl td:first-child{width:180px}
.debt-ledger-table .tbl th:not(:first-child):not(:last-child),
.debt-ledger-table .tbl td:not(:first-child):not(:last-child){width:128px}
.debt-ledger-table .tbl th:last-child,.debt-ledger-table .tbl td:last-child{width:90px}
.debt-year-table .tbl{min-width:920px}
.debt-year-table .tbl th:first-child,.debt-year-table .tbl td:first-child{width:130px}
.debt-year-table .tbl th:nth-child(2),.debt-year-table .tbl td:nth-child(2){width:180px}
.debt-year-table .tbl th:nth-child(3),.debt-year-table .tbl td:nth-child(3),
.debt-year-table .tbl th:nth-child(4),.debt-year-table .tbl td:nth-child(4),
.debt-year-table .tbl th:nth-child(5),.debt-year-table .tbl td:nth-child(5),
.debt-year-table .tbl th:nth-child(6),.debt-year-table .tbl td:nth-child(6){width:126px}
.truncate{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.detail-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,.8fr);gap:16px;align-items:start}
.detail-grid.is-single{grid-template-columns:minmax(0,720px)}
@media(max-width:760px){.detail-grid{grid-template-columns:1fr}}
.detail-list{display:grid;grid-template-columns:120px 1fr;gap:8px 14px;margin:0}
.detail-list dt{color:var(--muted);font-size:13px}
.detail-list dd{margin:0;font-weight:600}
.detail-list .note-value{font-weight:400;white-space:normal}
.actions{display:flex;gap:14px;align-items:center;margin-top:18px;flex-wrap:wrap}
.close-card{display:grid;gap:14px}
.close-summary{margin-bottom:0}
.close-note{margin:0}
.close-table .tbl{min-width:820px}
.close-table .tbl th:nth-child(1),.close-table .tbl td:nth-child(1){width:170px}
.close-table .tbl th:nth-child(2),.close-table .tbl td:nth-child(2){width:140px}
.close-table .tbl th:nth-child(3),.close-table .tbl td:nth-child(3),
.close-table .tbl th:nth-child(4),.close-table .tbl td:nth-child(4){width:170px}
.close-table .tbl td{vertical-align:middle}
.close-market-input{width:190px;text-align:right;margin-left:auto}
.close-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;border-top:1px solid var(--line);padding-top:14px;flex-wrap:wrap}
.close-actions .btn-primary{margin-top:0}