:root{--ink:#202923;--muted:#7d8980;--line:#e9ede8;--paper:#fff;--canvas:#f7f8f5;--green:#32745a;--green-dark:#225741;--mint:#e9f4ec;--red:#bd645a;--yellow:#ddad4b;--shadow:0 8px 28px rgba(32,48,37,.045)}*{box-sizing:border-box}body{margin:0;background:var(--canvas);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;font-size:14px}.app-shell{min-height:100vh}.sidebar{width:248px;background:#fff;border-right:1px solid var(--line);position:fixed;inset:0 auto 0 0;padding:27px 17px;display:flex;flex-direction:column;z-index:2}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-size:19px;font-weight:750;letter-spacing:-.7px;padding:0 8px}.brand small{display:block;color:#9aa39c;font-size:10px;font-weight:500;letter-spacing:.3px;margin-top:1px}.brand-mark{width:36px;height:36px;object-fit:contain;flex:none}.brand img.brand-mark{width:36px;height:36px}.mobile-brand img.brand-mark{width:30px;height:30px}.household{display:flex;align-items:center;gap:10px;background:#f7f8f5;border:1px solid #edf0eb;border-radius:12px;padding:12px;margin:36px 0 23px}.house-icon{height:34px;width:34px;border-radius:10px;background:#e4efe5;color:var(--green);display:grid;place-items:center;font-size:20px}.household small,.household b{display:block}.household small{font-size:9px;color:#8b968e;letter-spacing:.6px;margin-bottom:3px}.household b{font-size:12px}.chevron{margin-left:auto;color:#96a098}.sidebar nav{display:grid;gap:5px}.nav-item{text-decoration:none;color:#758078;padding:12px;border-radius:9px;font-size:13px}.nav-item span{display:inline-block;width:26px;color:#849189;font-size:16px}.nav-item.active{background:#eef5ef;color:#2c664c;font-weight:650}.nav-item.active span{color:#2c664c}.sidebar-bottom{margin-top:auto}.sync-note{display:flex;gap:9px;align-items:center;background:#f7f9f6;padding:12px;border-radius:10px;margin-bottom:17px}.sync-note b,.sync-note small{display:block}.sync-note b{font-size:11px}.sync-note small{color:#98a19a;font-size:10px;margin-top:3px}.live-dot{width:7px;height:7px;background:#73ad7e;border-radius:50%;box-shadow:0 0 0 4px #e6f2e7}.profile{display:flex;align-items:center;gap:9px;padding:3px}.avatar{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#e2efe7;color:#31664d;font-size:10px;font-weight:700;flex-shrink:0}.profile b,.profile small{display:block}.profile b{font-size:11px}.profile small{font-size:10px;color:#919b93;margin-top:3px}.icon-button{border:0;background:transparent;color:#929c94;font-size:20px;cursor:pointer;margin-left:auto}.main-content{margin-left:248px;max-width:1600px;padding:0 45px 28px}.topbar{height:77px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:flex-end}.top-actions{display:flex;align-items:center;gap:11px}.period-label{font-size:11px;color:#8c968e}.topbar select{border:1px solid var(--line);border-radius:8px;background:white;padding:9px 28px 9px 11px;font:inherit;color:#536058;font-size:11px}.button{border:0;border-radius:8px;padding:10px 15px;font:inherit;font-size:12px;font-weight:650;cursor:pointer;transition:.15s}.button.primary{background:var(--green);color:white;box-shadow:0 3px 7px #32745a20}.button.primary:hover{background:var(--green-dark)}.button.primary span{font-size:16px;vertical-align:-1px;margin-right:4px}.button.secondary{background:#f2f4f1;color:#5f6b63}.welcome{display:flex;justify-content:space-between;align-items:flex-end;padding:32px 0 23px}.eyebrow{margin:0 0 8px;color:#8f9a91;letter-spacing:1px;font-size:9px;font-weight:700}.welcome h1{font-size:25px;letter-spacing:-.8px;margin:0;font-weight:680}.subtext,.panel-heading p,.members-section p{font-size:12px;color:#929b94;margin:7px 0 0}.member-stack{display:flex;align-items:center;padding-bottom:3px}.member{width:29px;height:29px;border-radius:50%;border:2px solid var(--canvas);display:grid;place-items:center;font-size:8px;font-weight:700;margin-left:-6px;color:#315f49;background:#dcece0}.m2{background:#f4e4d6;color:#a46c51}.m3{background:#e9e3f2;color:#75628f}.member-count{font-size:9px;color:#69766d;background:#ebeFEb;border-radius:50%;width:27px;height:27px;display:grid;place-items:center;margin-left:-6px;border:2px solid var(--canvas)}.invite-link,.text-button{border:0;background:none;color:#367556;font-size:11px;font-weight:650;cursor:pointer;margin-left:9px}.summary-grid{display:grid;grid-template-columns:1.25fr 1fr 1fr;gap:15px}.summary-card{background:#fff;border:1px solid var(--line);border-radius:12px;padding:19px 20px;min-height:128px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.summary-card.balance{background:#34785c;color:white;border-color:#34785c}.card-label{font-size:11px;color:#7f8a82;display:flex;align-items:center;justify-content:space-between}.balance .card-label{color:#d5e8dc}.info{border:1px solid #b9d8c5;width:15px;height:15px;border-radius:50%;display:grid;place-items:center;font-size:9px}.amount{font-weight:700;letter-spacing:-.5px;font-size:22px;margin-top:18px}.balance .amount{font-size:26px;position:relative;z-index:1}.balance-foot{margin-top:10px;color:#d1e5d8;font-size:10px;position:relative;z-index:1}.zakat-summary{display:flex;align-items:center;gap:12px;margin-top:13px;position:relative;z-index:1}.zakat-summary div{display:flex;align-items:center;gap:9px}.zakat-summary span{font-size:10px;color:#d5e8dc}.zakat-summary b{font-size:14px}.zakat-summary button{border:1px solid #ffffff70;color:#fff;background:#ffffff12;border-radius:6px;padding:6px 8px;font:inherit;font-size:9px;cursor:pointer}.nisab-note{position:relative;z-index:1;font-size:9px;color:#d1e5d8;margin-top:5px}.gold-help{font-size:10px;line-height:1.5;color:#88948b;margin:12px 0 7px}.gold-source{font-size:10px;color:#347656;text-decoration:none;font-weight:650}.gold-source:hover{text-decoration:underline}.balance-icon{background:#ffffff25;border-radius:50%;display:inline-grid;width:17px;height:17px;place-items:center;margin-right:4px}.balance-decoration{position:absolute;width:135px;height:135px;border:1px solid #ffffff20;border-radius:50%;right:-34px;bottom:-75px}.balance-decoration:after{content:"";position:absolute;width:95px;height:95px;border:1px solid #ffffff17;border-radius:50%;left:20px;top:17px}.metric-icon{height:23px;width:23px;border-radius:7px;display:grid;place-items:center;font-size:13px}.metric-icon.income{background:#ecf5ed;color:#52865e}.metric-icon.expense{background:#fbefed;color:#bf6b60}.card-caption{color:#a0a9a1;font-size:10px;margin-top:7px}.content-grid{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(270px,.9fr);gap:15px;margin-top:17px}.right-column{display:grid;gap:15px;align-content:start}.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:19px;box-shadow:var(--shadow)}.panel-heading{display:flex;justify-content:space-between;align-items:flex-start}.panel-heading h2,.members-section h2{font-size:13px;margin:0;font-weight:700;letter-spacing:-.1px}.panel-heading p{font-size:10px;margin-top:5px}.text-button{margin:0;font-size:10px}.text-button span,.history-button span{font-size:15px;margin-left:4px}.transaction-list{margin-top:15px}.transaction-row{display:grid;grid-template-columns:37px minmax(0,1fr) auto auto 25px;align-items:center;gap:10px;padding:11px 0;border-bottom:1px solid #f0f2ef}.transaction-row:last-child{border:0}.transaction-symbol{height:35px;width:35px;border-radius:10px;display:grid;place-items:center;font-size:15px;background:#f1f5ef;color:#638665}.transaction-symbol.expense{background:#fbf0ed;color:#bd7964}.transaction-symbol.income{background:#edf5ef;color:#44815b}.transaction-info{min-width:0}.transaction-info b,.transaction-info small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.transaction-info b{font-size:11px;font-weight:650}.transaction-info small{color:#9aa39c;font-size:9px;margin-top:4px}.transaction-amount{font-size:11px;font-weight:700;white-space:nowrap}.transaction-amount.negative{color:#aa645a}.transaction-edit{border:0;background:transparent;color:#99a39b;cursor:pointer;font-size:15px}.category-chart{display:flex;align-items:center;justify-content:center;gap:24px;padding:18px 0 8px}.donut{width:126px;height:126px;border-radius:50%;background:conic-gradient(#3d8060 0 39%,#78a77b 39% 64%,#e5bc66 64% 80%,#d98e77 80% 91%,#dce6dd 91% 100%);display:grid;place-items:center;position:relative}.donut:before{content:"";position:absolute;width:82px;height:82px;border-radius:50%;background:white}.donut>div{z-index:1;text-align:center}.donut b,.donut small{display:block}.donut b{font-size:11px}.donut small{font-size:9px;color:#98a198;margin-top:4px}.legend{display:grid;gap:10px;min-width:95px}.legend-row{display:flex;align-items:center;gap:7px;color:#7e8981;font-size:9px;white-space:nowrap}.legend-dot{height:7px;width:7px;border-radius:2px}.activity-panel{padding-bottom:14px}.history-mark{color:#6e9b78}.activity-list{margin:13px 0 8px}.activity-item{display:flex;gap:9px;padding:9px 0}.activity-avatar{height:25px;width:25px;border-radius:50%;display:grid;place-items:center;background:#f1e9dc;color:#9b7548;font-size:8px;font-weight:700;flex-shrink:0}.activity-copy{font-size:9px;color:#77827a;line-height:1.45}.activity-copy b{color:#3d4941;font-weight:650}.activity-copy small{display:block;font-size:8px;color:#a2aaa3;margin-top:3px}.history-button{width:100%;border:0;border-top:1px solid #eff1ee;padding:12px 0 0;background:none;color:#387556;text-align:left;font-size:10px;font-weight:650;cursor:pointer}.members-section{margin-top:19px;padding:18px 20px;background:#fff;border:1px solid var(--line);border-radius:12px;display:flex;justify-content:space-between;align-items:center;gap:20px}.members-section p{font-size:10px}.member-cards{display:flex;gap:9px}.member-card{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1px solid #edf0ec;border-radius:9px;min-width:150px}.member-card b,.member-card small{display:block}.member-card b{font-size:9px}.member-card small{font-size:8px;color:#9aa39c;margin-top:3px}.avatar.peach{background:#f6e9df;color:#9d6f52}.avatar.lilac{background:#ede8f3;color:#796891}.you-tag{font-size:8px;color:#45805d;background:#edf5ee;padding:4px 6px;border-radius:5px;margin-left:auto}footer{color:#abb2ac;font-size:9px;text-align:center;padding:21px 0 0}footer span{padding:0 5px}.mobile-brand{display:none}.modal-backdrop{position:fixed;inset:0;background:#17231db5;display:grid;place-items:center;padding:18px;z-index:9}.modal{background:white;border-radius:15px;width:min(100%,480px);max-height:95vh;overflow-y:auto;padding:24px;box-shadow:0 20px 70px #17231d40}.modal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:20px}.modal-header h2{font-size:20px;margin:0;letter-spacing:-.5px}.close-button{font-size:23px;margin:-8px -5px 0 0}form label{display:block;color:#5d6a61;font-size:10px;font-weight:650;margin:13px 0 7px}.type-toggle{display:grid;grid-template-columns:1fr 1fr;gap:7px;background:#f4f6f3;padding:4px;border-radius:9px}.type-choice{border:0;background:transparent;padding:9px;border-radius:7px;font:inherit;color:#7a857d;font-size:11px;cursor:pointer}.type-choice.selected{background:white;color:#347656;font-weight:700;box-shadow:0 1px 4px #293a2d12}form input,form select{width:100%;border:1px solid #e6ebe6;background:white;border-radius:8px;padding:10px 11px;color:#39453c;font:inherit;font-size:11px;outline:none}form input:focus,form select:focus{border-color:#79a88a;box-shadow:0 0 0 3px #eaf3ec}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:11px}.money-input{display:flex;border:1px solid #e6ebe6;border-radius:8px;align-items:center;padding-left:10px;color:#849087;font-size:10px}.money-input input{border:0}.reason-wrap{border:1px solid #f2e4c8;background:#fffaf0;border-radius:9px;padding:4px 12px 12px;margin-top:16px}.required{color:#c2574e}.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:22px}.toast{position:fixed;bottom:24px;right:24px;background:#22382c;color:#fff;padding:12px 16px;border-radius:8px;z-index:10;font-size:11px;box-shadow:var(--shadow)}.empty-state{padding:40px 10px;display:grid;justify-items:center;gap:8px;color:#89958b}.empty-state b{font-size:12px;color:#48564c}.empty-state span{font-size:10px}.empty-icon{height:35px;width:35px;border-radius:50%;background:#edf5ef;display:grid;place-items:center;color:#427959;font-size:18px}.hidden{display:none!important}
@media(max-width:1100px){.main-content{padding-left:26px;padding-right:26px}.sidebar{width:220px}.main-content{margin-left:220px}.content-grid{grid-template-columns:minmax(0,1.45fr) minmax(250px,.9fr)}.members-section{align-items:flex-start;flex-direction:column}.member-cards{width:100%;flex-wrap:wrap}}@media(max-width:780px){.sidebar{display:none}.main-content{margin:0;padding:0 17px 25px}.topbar{height:62px;justify-content:space-between}.mobile-brand{display:flex;align-items:center;gap:8px;border:0;background:none;font-weight:750;color:var(--ink);font-size:15px}.mobile-brand .brand-mark{height:30px;width:30px}.period-label{display:none}.top-actions{gap:7px}.topbar select{font-size:10px;padding:8px 20px 8px 8px;max-width:130px}.topbar .button{padding:9px 10px;font-size:10px}.welcome{padding-top:24px}.welcome h1{font-size:22px}.subtext{font-size:10px}.member-stack .member:nth-child(3),.member-stack .member-count{display:none}.invite-link{font-size:10px}.summary-grid{grid-template-columns:1fr 1fr;gap:9px}.summary-card{padding:15px;min-height:112px}.summary-card.balance{grid-column:1/-1;min-height:157px}.amount{font-size:17px;margin-top:17px}.balance .amount{font-size:25px}.card-label{font-size:10px}.content-grid{grid-template-columns:1fr;gap:11px;margin-top:11px}.right-column{grid-template-columns:1fr 1fr;gap:9px}.panel{padding:15px}.category-chart{display:grid;justify-items:center;gap:12px}.donut{width:110px;height:110px}.donut:before{width:72px;height:72px}.legend{grid-template-columns:1fr 1fr;gap:8px}.legend-row{font-size:8px}.activity-panel{min-width:0}.activity-copy{font-size:8px}.members-section{padding:16px}.member-cards{display:grid;grid-template-columns:1fr 1fr}.member-card{min-width:0;padding:7px}.transaction-row{gap:8px;grid-template-columns:34px minmax(0,1fr) auto 20px}.transaction-amount{font-size:10px}.transaction-row .transaction-info small{font-size:8px}.history-button{font-size:9px}}@media(max-width:430px){.right-column{grid-template-columns:1fr}.category-panel .category-chart{display:flex}.member-stack{gap:0}.invite-link{margin-left:4px}.welcome{align-items:center}.welcome .eyebrow{font-size:8px}.summary-card:not(.balance) .amount{font-size:15px}.transaction-row{grid-template-columns:32px minmax(0,1fr) auto 17px}.transaction-symbol{height:31px;width:31px}.transaction-edit{font-size:12px}.period-label{display:none}.top-actions select{max-width:104px}.topbar .button{font-size:9px;padding:8px 8px}.topbar .button span{margin-right:1px}.member-card{gap:6px}}



/* Brand typography follows the serif and script lettering in the AmarsyaH logo. */
.brand>span{font-family:Georgia,'Times New Roman',serif;font-size:20px;font-weight:700;letter-spacing:0;color:#173e30}.brand small{font-family:'Segoe Script','Brush Script MT',cursive;font-size:13px;font-style:italic;font-weight:400;letter-spacing:0;color:#756552;margin-top:2px}.mobile-brand>span{display:block;text-align:left;font-family:Georgia,'Times New Roman',serif;font-size:15px;line-height:1.05;font-weight:700;color:#173e30}.mobile-brand small{display:block;margin-top:2px;font-family:'Segoe Script','Brush Script MT',cursive;font-size:10px;line-height:1.1;font-style:italic;font-weight:400;color:#756552}

.brand small,.mobile-brand small{font-weight:700;color:#173e30}

/* Transaksi dengan tombol edit dan arsip */
.transaction-row{grid-template-columns:37px minmax(0,1fr) auto auto}.transaction-actions{display:flex;align-items:center;gap:2px}.transaction-edit,.transaction-delete{width:23px;height:27px;padding:0;border:0;background:transparent;cursor:pointer;font-size:15px;color:#829087}.transaction-delete{color:#b76a61}.transaction-edit:hover{color:var(--green)}.transaction-delete:hover{color:#9f4038}.button.danger{background:#b85f55;color:#fff}.button.danger:hover{background:#994a42}.recorded-by{margin:12px 0 0;padding:9px 11px;border-radius:8px;background:#f6f8f5}.recorded-by label{margin:0;color:#849087;font-size:10px}.recorded-by p{margin:4px 0 0;font-size:11px;color:#45534a}.member-card>span:nth-child(2){min-width:0}.member-card small{overflow-wrap:anywhere}.member-card .you-tag{font-size:9px;color:#367556;white-space:nowrap}.transaction-row .transaction-info small{max-width:100%}@media(max-width:780px){.transaction-row{grid-template-columns:34px minmax(0,1fr) auto auto}}@media(max-width:430px){.transaction-row{grid-template-columns:32px minmax(0,1fr) auto auto}.transaction-actions{gap:0}.transaction-edit,.transaction-delete{width:19px;font-size:12px}}

/* Analisis kategori, subkategori, dan tren bulanan */
.analytics-controls{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin:14px 0 15px}.analytics-controls label{display:grid;gap:5px;color:#7e8981;font-size:9px;font-weight:650}.analytics-controls select{width:100%;min-width:0;border:1px solid #e7ece7;border-radius:7px;background:#fff;padding:8px 22px 8px 9px;color:#536058;font:inherit;font-size:10px}.analytics-visualization{min-height:175px}.analytics-pie-wrap{display:grid;justify-items:center;gap:13px}.analytics-pie{width:142px;height:142px;border-radius:50%;display:grid;place-items:center;position:relative}.analytics-pie:before{content:"";position:absolute;inset:28px;border-radius:50%;background:#fff}.analytics-pie>div{z-index:1;text-align:center;max-width:94px;overflow:hidden}.analytics-pie b,.analytics-pie small{display:block}.analytics-pie b{font-size:12px}.analytics-pie small{font-size:9px;color:#929b94;margin-top:4px}.analytics-legend{display:grid;grid-template-columns:1fr;gap:7px;width:100%;max-height:155px;overflow:auto}.analytics-legend-row{display:grid;grid-template-columns:8px minmax(0,1fr) auto;align-items:center;gap:7px;color:#7e8981;font-size:9px}.analytics-legend-row>span:nth-child(2){overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-legend-row b{color:#4b574e;font-size:9px}.analytics-bars{display:grid;gap:11px;padding:4px 0}.analytics-bar-heading{display:flex;justify-content:space-between;align-items:center;gap:9px;margin-bottom:5px;color:#77827a;font-size:9px}.analytics-bar-heading span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-bar-heading b{color:#4b574e;white-space:nowrap;font-size:9px}.analytics-bar-track{height:8px;border-radius:9px;background:#eff3ef;overflow:hidden}.analytics-bar-track span{display:block;height:100%;border-radius:9px;min-width:2px}.analytics-line-wrap{overflow-x:auto}.analytics-line{display:block;width:100%;min-width:350px;height:185px;overflow:visible}.analytics-line-labels{display:grid;grid-template-columns:repeat(12,minmax(28px,1fr));gap:2px;color:#829087;font-size:7px;text-align:center}.analytics-line-labels span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.analytics-line-total{margin-top:10px;color:#849087;font-size:9px}.analytics-line-total b{color:#46534a}.analytics-empty{min-height:160px;display:grid;place-items:center;color:#96a098;font-size:10px;text-align:center}
@media(max-width:780px){.analytics-controls{gap:7px}.analytics-controls select{font-size:9px;padding:8px 17px 8px 7px}.analytics-pie{width:132px;height:132px}}

/* Persetujuan pendaftaran dan administrasi akun */
.approval-section{margin-top:18px}.approval-section .panel{padding:19px 20px}.registration-list,.admin-account-list{display:grid;gap:9px;margin-top:14px}.registration-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px;border:1px solid #edf0ec;border-radius:9px}.registration-row>div:first-child{min-width:0}.registration-row b,.registration-row small{display:block}.registration-row b{font-size:11px}.registration-row small{margin-top:4px;color:#87928a;font-size:9px;overflow-wrap:anywhere}.registration-actions{display:flex;gap:6px;flex:none}.registration-row .button{padding:8px 10px;font-size:10px}.registration-row .button:disabled{opacity:.55;cursor:default}.auth-card h2{font-size:17px;margin:14px 0 5px}.auth-card form>button{margin-top:10px}.auth-card input[readonly]{background:#f6f8f5;color:#6f7c72}
@media(max-width:600px){.registration-row{align-items:flex-start;flex-direction:column}.registration-actions{width:100%}.registration-actions .button{flex:1}.approval-section .panel{padding:15px}}