/* Palet dan dasar halaman */
:root { --background:#faf7f8; --surface:#fffdfd; --pink:#bd8596; --blush:#f5e8ed; --mauve:#684c60; --muted:#877580; --border:#eadfe4; --gold:#bc9484; --green:#567b6b; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { margin:0; background:var(--background); color:var(--mauve); font-family:"Segoe UI",Arial,sans-serif; font-size:14px; line-height:1.5; }
button,select { font:inherit; }
button,a,select,.summary-card { transition:background .2s ease,box-shadow .2s ease,transform .2s ease; }
button:focus-visible,a:focus-visible,select:focus-visible { outline:3px solid var(--pink); outline-offset:4px; }
p,h1,h2 { margin:0; }
.page-shell { max-width:1180px; margin:auto; padding:32px 40px 120px; }
.header { display:flex; align-items:center; justify-content:space-between; gap:24px; padding:34px 0 29px; }
.greeting { font-size:14px; margin-bottom:6px; color:#96687d; }
h1 { font-family:Georgia,"Times New Roman",serif; font-weight:400; font-size:37px; line-height:1.2; letter-spacing:-1px; }
.period-picker { padding:0; margin:0; border:0; display:flex; gap:8px; flex-shrink:0; }
.period-picker legend { font-size:10px; margin-bottom:7px; color:var(--muted); }
select { padding:10px 25px 10px 12px; background:var(--surface); color:var(--mauve); border:1px solid var(--border); border-radius:9px; cursor:pointer; }
select:hover { border-color:var(--pink); }
.overview-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:13px; }
.overview-heading h2 { font-size:13px; font-weight:600; }
.overview-heading>span { font-size:11px; color:var(--muted); }
/* Kartu total gabungan */
.summary { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; margin-bottom:24px; }
.summary-card { border:1px solid #ecdee4; border-radius:15px; background:var(--blush); padding:22px 19px; min-width:0; }
.summary-card:hover { transform:translateY(-3px); box-shadow:0 8px 20px #684c600b; }
.summary-card p { font-size:12px; margin:18px 0 6px; }
.summary-card h2 { font-size:26px; letter-spacing:-.8px; font-weight:600; font-variant-numeric:tabular-nums; }
.summary-card>span:last-child { display:block; font-size:10px; margin-top:8px; color:#796573; }
.card-icon { display:grid; place-items:center; width:29px; height:29px; border-radius:9px; background:#fff8; font-size:20px; }
.expense { background:#f7efec; }
.balance { background:#795b6e; color:white; border-color:#795b6e; }
.balance>span:last-child { color:#f1e1eb; }
.balance .card-icon { background:#ffffff18; }
.saving { background:#efedf3; }
/* Dana darurat dan anggaran */
.detail-grid { display:grid; grid-template-columns:.9fr 1.1fr; gap:24px; margin-bottom:24px; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:25px; min-width:0; }
.panel-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.panel h2 { font-size:18px; font-weight:600; letter-spacing:-.3px; }
.section-label { font-size:9px; letter-spacing:1.7px; color:#967784; margin-bottom:6px; }
.panel-description { color:var(--muted); font-size:12px; margin-top:10px; }
.subtle-tag { font-size:10px; background:#f6f0f3; padding:5px 9px; border-radius:6px; white-space:nowrap; }
.flower { font-size:37px; line-height:1; color:var(--gold); }
.fund-total { margin:27px 0 21px; }
.fund-total strong { display:block; font-size:30px; letter-spacing:-.8px; font-weight:600; }
.fund-total>span { font-size:12px; color:var(--muted); }
.progress-caption { display:flex; justify-content:space-between; font-size:11px; margin-bottom:9px; }
.progress-caption strong { color:#a76e84; }
progress { display:block; appearance:none; border:0; background:#f0e8ec; width:100%; height:7px; border-radius:10px; overflow:hidden; color:var(--pink); }
progress::-webkit-progress-bar { background:#f0e8ec; border-radius:10px; }
progress::-webkit-progress-value { background:var(--pink); border-radius:10px; }
progress::-moz-progress-bar { background:var(--pink); border-radius:10px; }
.fund-note { font-size:10px; color:var(--muted); margin-top:9px; }
.small-note { font-size:10px; color:var(--muted); margin-top:16px; }
.budget-list { margin-top:22px; display:grid; gap:20px; }
.budget-heading { display:flex; justify-content:space-between; gap:10px; align-items:center; margin-bottom:6px; font-size:12px; }
.budget-heading strong { font-size:10px; font-weight:500; white-space:nowrap; }
.budget-amount { font-size:10px; color:var(--muted); margin-bottom:8px; }
.budget-amount strong { font-weight:600; color:var(--mauve); }
.budget-item progress { height:5px; }
/* Transaksi dan navigasi */
.transaction-list { list-style:none; padding:0; margin:17px 0 0; }
.transaction-item { display:flex; align-items:center; gap:13px; padding:15px 0; border-top:1px solid #f0e8ed; }
.transaction-icon { display:grid; place-items:center; flex:0 0 35px; height:35px; border-radius:10px; background:#f6edf1; color:#a07889; font-size:17px; }
.transaction-detail { flex:1; min-width:0; overflow-wrap:anywhere; }
.transaction-detail strong { font-size:12px; font-weight:500; }
.transaction-detail p { font-size:10px; color:var(--muted); margin-top:3px; }
.transaction-amount { font-size:13px; font-weight:600; font-variant-numeric:tabular-nums; white-space:nowrap; }
.transaction-income { color:var(--green); }
.transaction-item:last-child { padding-bottom:0; }
.bottom-navigation { position:fixed; bottom:18px; left:50%; transform:translateX(-50%); display:flex; align-items:center; justify-content:space-around; gap:16px; width:min(530px,calc(100% - 32px)); height:72px; padding:8px 16px; background:#fffdfdf5; border:1px solid var(--border); border-radius:20px; box-shadow:0 6px 30px #684c6012; backdrop-filter:blur(12px); z-index:10; }
.bottom-navigation a,.bottom-navigation button { display:flex; flex-direction:column; align-items:center; gap:2px; text-decoration:none; color:var(--muted); font-size:10px; background:none; border:0; padding:4px 10px; border-radius:9px; min-width:0; }
.bottom-navigation span { font-size:22px; line-height:1.2; }
.bottom-navigation .active { color:var(--mauve); background:#f5e8ed; }
.bottom-navigation a:hover { background:#eedbe3; }
.bottom-navigation .add-button { display:grid; place-items:center; background:var(--mauve); color:white; font-size:29px; flex:0 0 45px; height:45px; border-radius:15px; padding:0; }
.bottom-navigation button:disabled { opacity:1; cursor:default; }
.sr-only,.skip-link:not(:focus) { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.skip-link:focus { position:fixed; top:10px; left:10px; background:white; padding:12px; z-index:20; }
/* Layout HP: dua kartu per baris dan panel satu kolom. */
@media(max-width:900px) {
    .page-shell { padding:24px 24px 120px; }
    .summary { gap:12px; }
    .summary-card { padding:17px 14px; }
    .summary-card h2 { font-size:22px; }
    .detail-grid { gap:16px; }
    .panel { padding:21px; }
    h1 { font-size:32px; }
}
@media(max-width:650px) {
    .page-shell { padding:20px 18px 125px; }
    .header { align-items:flex-start; flex-direction:column; gap:20px; padding:25px 0; }
    .greeting { font-size:13px; }
    h1 { font-size:31px; }
    .period-picker { width:100%; min-width:0; }
    .period-picker select:first-of-type { flex:1; min-width:0; }
    .period-picker select:last-of-type { width:100px; }
    .overview-heading { align-items:flex-start; flex-direction:column; gap:3px; }
    .summary { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:16px; }
    .summary-card { padding:16px 13px; }
    .summary-card h2 { font-size:clamp(18px,5vw,25px); }
    .summary-card p { font-size:11px; margin-top:14px; }
    .summary-card>span:last-child { font-size:9px; }
    .detail-grid { grid-template-columns:minmax(0,1fr); margin-bottom:16px; }
    .panel { padding:21px 18px; }
    .panel h2 { font-size:17px; }
    .transaction-item { gap:9px; }
    .transaction-amount { font-size:11px; }
    .transaction-detail strong { font-size:11px; }
    .transaction-detail p { font-size:9px; }
    .transaction-icon { flex-basis:30px; height:32px; }
    .bottom-navigation { bottom:calc(10px + env(safe-area-inset-bottom)); gap:3px; padding:8px; width:calc(100% - 24px); max-width:420px; }
    .bottom-navigation a,.bottom-navigation button { padding:5px 7px; font-size:9px; }
    .bottom-navigation .add-button { flex-basis:42px; height:42px; }
}
@media(prefers-reduced-motion:reduce) {
    html { scroll-behavior:auto; }
    *,*::before,*::after { transition:none!important; }
    .summary-card:hover { transform:none; }
}

/* Pencatatan transaksi: mengikuti palet dan komponen beranda. */
[hidden] { display:none!important; }
input,textarea { font:inherit; color:var(--mauve); }
input,textarea,.field select { width:100%; min-width:0; border:1px solid var(--border); background:var(--surface); border-radius:9px; padding:11px 12px; }
input:focus-visible,textarea:focus-visible { outline:3px solid var(--pink); outline-offset:2px; }
textarea { resize:vertical; }
button:not(:disabled) { cursor:pointer; }
.primary-button,.secondary-button,.danger-button,.text-button,.close-button { border:1px solid var(--border); border-radius:9px; padding:10px 15px; min-height:44px; font:inherit; }
.primary-button { background:var(--mauve); color:white; border-color:var(--mauve); }
.primary-button:hover { background:#805e74; }
.secondary-button,.text-button,.close-button { background:var(--surface); color:var(--mauve); }
.secondary-button:hover,.text-button:hover,.close-button:hover { background:var(--blush); }
.danger-button { background:#94485b; border-color:#94485b; color:white; }
.danger-button:hover { background:#7e3c4d; }
.danger-text { color:#94485b; }
button:disabled { cursor:default; }
.primary-button:disabled { opacity:.6; }
.bottom-navigation button:not(:disabled):hover { background:var(--blush); color:var(--mauve); }
.app-message { background:var(--blush); border:1px solid var(--border); border-radius:10px; padding:12px 15px; margin-bottom:18px; overflow-wrap:anywhere; }
.filter-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; align-items:end; margin:24px 0 18px; }
.search-field { grid-column:span 2; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field label { font-size:12px; font-weight:600; }
.field select { padding-right:26px; }
.empty-state { padding:20px 0; color:var(--muted); font-size:13px; }
.ledger-list .transaction-item { display:grid; grid-template-columns:35px minmax(0,1fr) auto auto; }
.row-actions { display:flex; gap:8px; }
.row-actions button { padding:8px 12px; font-size:12px; }
.transaction-dialog { width:min(580px,calc(100% - 32px)); max-height:calc(100dvh - 32px); overflow-y:auto; padding:25px; border:1px solid var(--border); border-radius:16px; background:var(--surface); color:var(--mauve); box-shadow:0 20px 80px #684c6033; }
.transaction-dialog::backdrop { background:#38263366; backdrop-filter:blur(3px); }
body:has(dialog[open]) { overflow:hidden; }
.transaction-dialog h2 { font-size:21px; }
.close-button { font-size:24px; padding:0; width:44px; flex-shrink:0; }
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:15px; margin-top:22px; }
.full-field { grid-column:1 / -1; }
.optional { color:var(--muted); font-weight:400; }
.form-actions { display:flex; justify-content:flex-end; gap:10px; margin-top:22px; }
.error-message { background:#faedf0; color:#923c52; border-radius:8px; padding:12px; margin-top:16px; font-size:13px; }
.field-error { color:#923c52; font-size:12px; }
.field-error:empty { display:none; }
[aria-invalid="true"] { border-color:#923c52; }
.confirm-dialog { max-width:440px; }
.summary-card h2 { overflow-wrap:anywhere; }
#page-title:focus { outline:none; }
@media(max-width:750px) {
    .filter-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .ledger-list .transaction-item { grid-template-columns:30px minmax(0,1fr) auto; }
    .row-actions { grid-column:2 / -1; justify-content:flex-end; }
}
@media(max-width:650px) {
    .transaction-dialog { padding:20px 16px; width:calc(100% - 20px); max-height:calc(100dvh - 20px); }
    .form-grid { grid-template-columns:minmax(0,1fr); gap:13px; }
    .ledger-heading { align-items:stretch; flex-direction:column; }
    .field input,.field select,.field textarea { font-size:16px; }
    .filter-grid { gap:12px; }
    .filter-grid .field { grid-column:1 / -1; }
    .form-actions>button { flex:1; padding:10px; }
    .ledger-list .transaction-item { grid-template-columns:30px minmax(0,1fr); align-items:start; }
    .ledger-list .transaction-amount { grid-column:2; max-width:none; white-space:normal; overflow-wrap:anywhere; }
    .ledger-list .row-actions { grid-column:2; }
    .ledger-list .transaction-detail strong { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; overflow:hidden; }
    .transaction-amount { white-space:normal; overflow-wrap:anywhere; max-width:45%; }
    .filter-grid .field:nth-child(2),.filter-grid .field:nth-child(3) { grid-column:auto; }
    .bottom-navigation a,.bottom-navigation button { min-height:44px; }
}

/* Anggaran bulanan */
.budget-toolbar { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:22px; }
.budget-toolbar h2 { font-size:19px; font-weight:600; }
.budget-toolbar-actions { display:flex; flex-wrap:wrap; gap:10px; }
.budget-summary { grid-template-columns:repeat(3,minmax(0,1fr)); }
.budget-summary .summary-card p { margin-top:0; }
.budget-notice { padding:13px 16px; margin-bottom:20px; background:var(--blush); border:1px solid var(--border); border-radius:10px; font-size:12px; }
.budget-categories { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
.budget-card-heading { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:9px; }
.budget-card-heading h3 { margin:0; font-size:14px; font-weight:600; overflow-wrap:anywhere; }
.budget-values { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:22px 0; }
.budget-values dt { font-size:10px; color:var(--muted); margin-bottom:5px; }
.budget-values dd { margin:0; font-size:13px; font-weight:600; overflow-wrap:anywhere; }
.budget-status { display:inline-block; font-size:10px; border-radius:6px; padding:4px 8px; }
.budget-item>.budget-status { margin-top:7px; }
.status-safe { --indicator:#83ad99; background:#eaf4ee; color:#3f715b; }
.status-near { --indicator:#d9ad78; background:#fbf0df; color:#82602e; }
.status-over { --indicator:#cc8a98; background:#fae9ed; color:#983f56; }
.status-unassigned { --indicator:#b69aaa; background:#f2ebef; color:#796070; }
.budget-progress::-webkit-progress-value { background:var(--indicator); }
.budget-progress::-moz-progress-bar { background:var(--indicator); }
.budget-edit { margin-top:17px; }
.copy-consent { display:flex; align-items:flex-start; gap:9px; margin-top:16px; font-size:13px; }
.copy-consent input { width:19px; height:19px; margin:2px 0 0; flex-shrink:0; accent-color:var(--mauve); }
#copy-conflict-list { font-size:12px; padding-left:20px; overflow-wrap:anywhere; }
#copy-conflict-list li { margin:7px 0; }
#view-budgets { white-space:nowrap; font-size:11px; padding:8px 10px; }
#budget-storage-error { margin-bottom:20px; }
@media(max-width:900px) {
    .budget-toolbar { align-items:flex-start; flex-direction:column; }
    .budget-values { grid-template-columns:minmax(0,1fr); gap:9px; }
    .budget-values>div { display:flex; justify-content:space-between; gap:12px; }
    .budget-values dd { text-align:right; max-width:68%; }
}
@media(max-width:650px) {
    .budget-summary { grid-template-columns:minmax(0,1fr); }
    .budget-summary .summary-card { padding:18px; }
    .budget-summary .summary-card h2 { font-size:25px; }
    .budget-categories { grid-template-columns:minmax(0,1fr); gap:14px; }
    .budget-toolbar-actions { width:100%; }
    .budget-toolbar-actions button { width:100%; }
    .budget-summary .summary-card p { margin-bottom:6px; }
    #budget-title { font-size:15px; }
}

/* Tabungan: kartu dan formulir mengikuti komponen dashboard. */
.savings-explanation { margin:0 0 22px; }
.savings-history { margin-top:24px; }
.savings-card { overflow-wrap:anywhere; }
.savings-card .fund-total { margin:20px 0; }
.savings-card .fund-total strong { font-size:27px; }
.saving-values { display:grid; gap:10px; margin:20px 0; }
.saving-values>div { display:flex; justify-content:space-between; align-items:baseline; gap:14px; }
.saving-values dt { font-size:11px; color:var(--muted); }
.saving-values dd { margin:0; font-size:12px; font-weight:500; text-align:right; max-width:62%; overflow-wrap:anywhere; }
.saving-actions { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; margin-top:20px; }
.saving-actions button { font-size:12px; padding:10px 8px; }
.saving-note { white-space:pre-wrap; }
#savings-history .transaction-item { grid-template-columns:minmax(0,1fr) auto; }
#savings-history .transaction-amount { max-width:none; }
#savings-cards>.empty-state { grid-column:1 / -1; padding:22px; }
#savings-storage-error { margin-bottom:20px; }
@media(max-width:650px) {
    .savings-card .fund-total strong { font-size:25px; }
    #savings-history .transaction-item { grid-template-columns:minmax(0,1fr); }
    #savings-history .transaction-amount { text-align:left; }
    #add-saving { width:100%; }
}