:root{color:#17211f;font-synthesis:none;text-rendering:optimizelegibility;background:#eef3ef;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#eef3ef;min-height:100vh;margin:0}button,input,select,textarea{font:inherit}button{cursor:pointer}.login-page,.validation-page{place-content:center;min-height:100vh;padding:24px;display:grid}.login-page h1,.validation-page h1{text-align:center;margin:14px 0 8px;font-size:28px}.login-page p{color:#5f6f6a;text-align:center;max-width:340px;margin:0 auto 20px;line-height:1.5}.login-footer{color:#6a7872;justify-content:center;align-items:center;gap:5px;margin-top:18px;font-size:12px;display:inline-flex}.login-footer svg{color:#d34b55}.brand-mark{color:#fff;background:#0b6b56;border-radius:20px;place-items:center;width:64px;height:64px;margin:0 auto;display:grid;box-shadow:0 18px 45px #0a473a38}.panel{background:#ffffffeb;border:1px solid #182f2a14;border-radius:8px;padding:16px;box-shadow:0 12px 34px #233a3414}.login-card{gap:14px;width:min(360px,100vw - 36px);display:grid}label{color:#52635f;gap:8px;font-size:13px;display:grid}input,select,textarea{color:#17211f;background:#fff;border:1px solid #cbd8d3;border-radius:8px;outline:none;width:100%;padding:12px 13px}textarea{resize:vertical;min-height:88px}input:read-only{color:#596863;background:#f4f7f5}input:focus,select:focus,textarea:focus{border-color:#0b6b56;box-shadow:0 0 0 3px #0b6b561f}.primary,.secondary,.mini,.icon-button{border:0;border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:42px;font-weight:700;display:inline-flex}.primary{color:#fff;background:#0b6b56;padding:0 16px}.secondary{color:#0c5547;background:#e7eee9;padding:0 16px;text-decoration:none}.primary:disabled,.secondary:disabled{opacity:.55;cursor:not-allowed}.small-button{min-height:34px;padding:0 12px;font-size:12px}.mini{color:#0b6b56;background:#eef4f1;min-height:34px;padding:0 10px;font-size:12px}.icon-button{color:#0b6b56;background:#edf4f1;width:42px}.icon-button.light{background:#f4f8f5;border:1px solid #d9e5df}.link-button{width:100%}.alert{color:#9d211a;background:#fff1f0;border-radius:8px;padding:10px 12px;font-size:13px}.app-shell{background:#f7faf8;max-width:720px;min-height:100vh;margin:0 auto;padding-bottom:88px}.topbar{z-index:10;padding:max(14px, env(safe-area-inset-top)) 14px 12px;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f7faf8eb;border-bottom:1px solid #11312a14;grid-template-columns:42px 1fr 42px;align-items:center;gap:12px;display:grid;position:sticky;top:0}.topbar small,.topbar strong{display:block}.topbar small{color:#66756f;font-size:12px}.topbar strong{font-size:15px}.content{gap:14px;padding:16px 14px 22px;display:grid}.bottom-nav{z-index:20;width:min(720px,100vw);padding:7px 6px max(7px, env(safe-area-inset-bottom));background:#fffffff5;border-top:1px solid #11312a1a;grid-template-columns:repeat(5,minmax(0,1fr));gap:2px;display:grid;position:fixed;bottom:0;left:50%;transform:translate(-50%);box-shadow:0 -10px 30px #162f2814}.bottom-nav button{color:#6c7b76;background:0 0;border:0;border-radius:8px;place-items:center;gap:2px;min-width:0;min-height:54px;font-size:10px;line-height:1.1;display:grid}.bottom-nav button svg{width:18px;height:18px}.bottom-nav button span{text-overflow:ellipsis;white-space:nowrap;max-width:100%;overflow:hidden}.bottom-nav button.active{color:#0b6b56;background:#e6f0eb;font-weight:800}.hero{color:#fff;background:linear-gradient(135deg,#0a604e,#1b7b66 58%,#243c3a);border-radius:8px;padding:22px 18px;box-shadow:0 18px 38px #09534333}.hero.compact{padding:18px}.hero small,.hero h2,.hero p{margin:0;display:block}.hero small{color:#ffffffb8}.hero h2{margin-top:6px;font-size:25px}.hero p{color:#ffffffdb;margin-top:8px;line-height:1.5}.page-heading h2{margin:0 0 6px;font-size:24px}.page-heading p{color:#65736e;margin:0;line-height:1.45}.stat-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.stat{background:#fff;border:1px solid #15342d14;border-radius:8px;justify-content:space-between;gap:10px;min-height:104px;padding:14px;display:flex}.stat span{color:#687771;font-size:12px;line-height:1.35;display:block}.stat strong{overflow-wrap:anywhere;margin-top:8px;font-size:17px;line-height:1.25;display:block}.stat svg{color:#0b6b56;flex:none}.stat-amber svg{color:#b66a11}.stat-blue svg{color:#2d609f}.stat-green svg{color:#168548}.stat-red svg{color:#b13a2e}.section-title{justify-content:space-between;align-items:center;gap:12px;margin-bottom:12px;display:flex}.section-title h3{margin:0;font-size:16px}.title-actions{flex-wrap:wrap;justify-content:flex-end;gap:6px;display:flex}.panel p{color:#607069;margin:0 0 14px;line-height:1.5}.attention-panel{background:linear-gradient(135deg,#fff8ea,#fff 68%);border-color:#b66a1147}.form-message.success{color:#14713f;background:#e4f6eb;border-radius:10px;padding:10px 12px;font-weight:700}.pill,.type-badge{white-space:nowrap;border-radius:999px;align-items:center;min-height:28px;padding:0 10px;font-size:12px;font-weight:800;display:inline-flex}.pill.paid,.pill.green,.pill.valid{color:#14713f;background:#e4f6eb}.pill.pending,.pill.due{color:#9b5a08;background:#fff1d9}.pill.expired,.pill.cancelled{color:#5f666a;background:#f0f1f2}.type-badge.mandatory{color:#0b6b56;background:#e3f4ee}.type-badge.voluntary{color:#995a09;background:#fff1d8}.list{gap:10px;display:grid}.member-card,.invoice-row{text-align:left;background:#fff;border:1px solid #11312a14;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;width:100%;padding:14px;display:flex}.member-card small,.member-card span,.invoice-row small,.due-row small,.saving-row small{color:#687771;margin-top:4px;font-size:12px;display:block}.member-card strong,.invoice-row strong,.due-row strong{font-size:15px;display:block}.saving-row,.due-row,.user-row,.investment-row,.loan-row,.profit-row,.activity-item,.invoice-admin-row{border-top:1px solid #eef2ef;align-items:center;gap:12px;padding:12px 0;display:grid}.saving-row,.user-row{grid-template-columns:auto 1fr}.activity-item{grid-template-columns:34px minmax(0,1fr);align-items:start}.invoice-admin-row,.investment-row,.loan-row,.profit-row{grid-template-columns:minmax(0,1fr) auto}.saving-row:first-of-type,.due-row:first-of-type,.user-row:first-of-type,.investment-row:first-of-type,.loan-row:first-of-type,.profit-row:first-of-type,.activity-item:first-of-type,.invoice-admin-row:first-of-type{border-top:0}.due-row{grid-template-columns:1fr}.user-row{grid-template-columns:auto 1fr auto;align-items:start}.user-button{width:100%;color:inherit;text-align:left;background:0 0;border-bottom:0;border-left:0;border-right:0}.user-button.selected{background:#f1f7f3;border-radius:8px;padding-left:10px;padding-right:10px}.investment-row .right-text,.loan-row .right-text,.profit-row .right-text,.right-text{text-align:right}.loan-pay-button{white-space:nowrap;margin-top:8px}.row-actions{justify-items:end;gap:6px;display:grid}.inline-actions{flex-wrap:wrap;gap:6px;margin-top:8px;display:flex}.investment-row small,.loan-row small,.profit-row small,.user-row small,.activity-item small,.invoice-admin-row small{color:#687771;margin-top:4px;font-size:12px;display:block}.loan-row>div,.investment-row>div,.profit-row>div,.activity-item>div,.invoice-admin-row>div{min-width:0}.invoice-admin-row strong,.invoice-admin-row small{overflow-wrap:anywhere}.document-row{color:inherit;text-decoration:none}.activity-item svg{color:#0b6b56;margin-top:2px}.activity-item strong,.activity-item small{overflow-wrap:anywhere}.payment-log svg{color:#2563a8}.notification-log svg{color:#a15c16}.role-badge{text-transform:uppercase;border-radius:999px;place-items:center;min-width:76px;min-height:28px;padding:0 10px;font-size:11px;font-weight:900;display:inline-grid}.role-badge.superadmin{color:#5c33a2;background:#efe8ff}.role-badge.pengurus{color:#245da0;background:#e5efff}.role-badge.anggota{color:#0b6b56;background:#e3f4ee}.qr-panel{text-align:center;justify-items:center;gap:12px;display:grid}.qr-panel img{border:1px solid #edf1ef;border-radius:8px;width:min(310px,88vw)}.big-money{font-size:28px;display:block}.timer{color:#fff;background:#102b26;border-radius:999px;place-items:center;min-width:78px;min-height:34px;font-weight:900;display:inline-grid}.form-panel{gap:12px;display:grid}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;display:grid}.check-row{color:#20332f;grid-template-columns:20px minmax(0,1fr);align-items:center}.check-row input{width:18px;height:18px}.allocation-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.allocation-grid div{background:#f8fbf9;border:1px solid #edf1ef;border-radius:8px;padding:12px}.allocation-grid span,.allocation-grid small{color:#687771;font-size:12px;display:block}.allocation-grid strong{overflow-wrap:anywhere;margin:8px 0 4px;display:block}.profit-explain{gap:12px;display:grid}.calc-lines{gap:8px;display:grid}.calc-line{background:#fbfdfb;border:1px solid #edf1ef;border-radius:8px;justify-content:space-between;align-items:center;gap:12px;padding:11px 12px;display:flex}button.calc-line{width:100%;color:inherit;text-align:left}.calc-line span{color:#607069;font-size:13px}.calc-line strong{color:#17211f;overflow-wrap:anywhere;text-align:right}.calc-line.strong{background:#f1f8f4;border-color:#d7e7df}.calc-line.highlight{background:#e8f5ee;border-color:#0b6b5642}.profit-source-row{border-top:1px solid #eef2ef;grid-template-columns:minmax(0,1fr) auto;align-items:start;gap:12px;padding:13px 0;display:grid}.profit-source-row:first-of-type{border-top:0}.profit-source-row small{color:#687771;margin-top:4px;font-size:12px;line-height:1.4;display:block}.profit-source-row>div{min-width:0}.profit-source-row .positive{color:#14713f}.profit-source-row .negative{color:#a4372d}.history-list{display:grid}.poll-card{border-top:1px solid #edf1ef;gap:10px;padding:14px 0;display:grid}.poll-card:first-of-type{border-top:0}.poll-card strong,.poll-card small{display:block}.poll-card small{color:#687771;font-size:12px;line-height:1.45}.vote-meter{background:#edf1ef;border-radius:999px;height:10px;overflow:hidden}.vote-meter span{border-radius:inherit;background:#0b6b56;height:100%;display:block}.vote-actions{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;display:grid}.quick-actions,.integration-list{gap:10px;display:grid}.quick-actions .section-title{margin-bottom:2px}.quick-actions .secondary{justify-content:flex-start;width:100%}.integration-list div{border-top:1px solid #edf1ef;grid-template-columns:34px minmax(0,1fr);align-items:start;gap:4px 10px;min-width:0;padding:12px 0;display:grid}.integration-list div:first-child{border-top:0}.integration-list svg{color:#0b6b56;grid-row:span 4;margin-top:2px}.integration-list strong,.integration-list span,.integration-list small{overflow-wrap:anywhere;min-width:0}.integration-list span{color:#65736e;font-size:13px}.integration-list small{color:#7a8782;grid-column:2/3}.integration-list .pill{grid-column:2/3;justify-self:start;margin-top:4px}.empty{color:#687771;text-align:center;background:#ffffff8c;border:1px dashed #cbd8d3;border-radius:8px;place-items:center;min-height:92px;padding:18px;display:grid}.validation-card{text-align:center;width:min(430px,100vw - 32px)}.validation-card svg{color:#14864d}.receipt-lines{text-align:left;gap:9px;margin-top:18px;display:grid}.receipt-lines span{color:#63716c;border-top:1px solid #edf1ef;justify-content:space-between;gap:14px;padding:10px 0;display:flex}.receipt-lines strong{color:#17211f;text-align:right}.receipt-lines span,.receipt-lines strong{overflow-wrap:anywhere;min-width:0}@media (width>=680px){.content{padding:22px}.stat-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.hero h2{font-size:32px}}