:root{--green:#126b4b;--green2:#1d8a61;--mint:#eaf7f1;--ink:#17241e;--muted:#66736c;--line:#dce6e0;--cream:#f8faf8;--white:#fff;--yellow:#f4b740;--danger:#b42336;--shadow:0 18px 50px rgba(21,69,49,.10);font-size:16px}*{box-sizing:border-box}html{scroll-behavior:smooth}html[data-text-size=large]{font-size:19px}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;line-height:1.55}a{color:inherit}.skip-link{position:fixed;left:16px;top:-80px;z-index:99;background:#fff;padding:12px 18px;border-radius:10px}.skip-link:focus{top:16px}.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font-size:1rem}.brand-mark{display:grid;place-items:center;width:42px;height:42px;border-radius:14px;background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;font-size:1.25rem;font-weight:900}.brand.light{color:#fff}.brand.light .brand-mark{background:rgba(255,255,255,.17);border:1px solid rgba(255,255,255,.3)}.public-nav{height:84px;display:flex;align-items:center;justify-content:space-between;max-width:1180px;margin:auto;padding:0 28px}.public-nav nav{display:flex;align-items:center;gap:30px}.public-nav nav>a{text-decoration:none;font-weight:650}.button{min-height:48px;display:inline-flex;align-items:center;justify-content:center;padding:0 20px;border:1px solid var(--line);border-radius:14px;background:#fff;text-decoration:none;font-weight:750;cursor:pointer}.button.small{min-height:40px;padding:0 16px}.button.primary{background:linear-gradient(135deg,var(--green),var(--green2));color:#fff;border-color:transparent;box-shadow:0 10px 24px rgba(18,107,75,.22)}.button.ghost{background:transparent}.button.full{width:100%}.hero{max-width:1180px;min-height:650px;margin:auto;padding:70px 28px 90px;display:grid;grid-template-columns:1.08fr .92fr;align-items:center;gap:70px}.eyebrow{display:inline-block;color:var(--green);font-size:.76rem;font-weight:850;letter-spacing:.12em;text-transform:uppercase}.eyebrow.light{color:#c9f4df}.hero h1{font-size:clamp(2.8rem,5.5vw,5.3rem);line-height:.98;letter-spacing:-.06em;margin:20px 0 24px}.hero-copy>p{max-width:650px;color:var(--muted);font-size:1.15rem}.hero-actions{display:flex;gap:12px;margin:30px 0}.trust-row{display:flex;flex-wrap:wrap;gap:18px;color:#416052;font-size:.88rem}.hero-visual{min-height:470px;position:relative;display:grid;place-items:center;border-radius:42% 58% 58% 42%/45% 40% 60% 55%;background:linear-gradient(145deg,#d8f3e7,#9bd9bb)}.impact-card,.mini-card{background:rgba(255,255,255,.94);border:1px solid rgba(255,255,255,.8);box-shadow:var(--shadow);border-radius:24px}.impact-card{width:270px;padding:28px;transform:rotate(-3deg)}.impact-card>*{display:block}.impact-icon{font-size:3.7rem;color:var(--green)}.impact-card strong{font-size:1.2rem}.impact-card p{color:var(--muted)}.mini-card{position:absolute;right:-20px;bottom:55px;padding:18px 22px;display:grid}.mini-card span,.mini-card small{color:var(--muted)}.section{padding:100px max(28px,calc((100vw - 1124px)/2))}.section.soft{background:var(--mint)}.section-heading{max-width:680px;margin-bottom:42px}.section h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.08;letter-spacing:-.045em;margin:14px 0}.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.feature{padding:30px;border:1px solid var(--line);border-radius:22px;background:#fff}.feature-icon{display:grid;place-items:center;width:50px;height:50px;border-radius:16px;background:var(--mint);color:var(--green);font-size:1.5rem}.feature h3{margin:22px 0 8px}.feature p{color:var(--muted)}.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.steps li{display:flex;gap:18px;padding:25px;background:#fff;border-radius:20px}.steps b{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:50%;background:var(--green);color:#fff}.steps h3,.steps p{margin:0}.steps p{color:var(--muted);margin-top:6px}.footer{padding:30px max(28px,calc((100vw - 1124px)/2));display:flex;justify-content:space-between;background:#10261d;color:#dcebe4}.auth-page{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}.auth-intro{padding:55px max(40px,8vw);display:flex;flex-direction:column;justify-content:space-between;color:#fff;background:linear-gradient(145deg,#0e5b3e,#16825a)}.auth-intro h1{font-size:clamp(2.6rem,5vw,5rem);line-height:1;letter-spacing:-.06em;max-width:650px}.auth-intro p{font-size:1.1rem;color:#d4f2e3;max-width:560px}.auth-intro blockquote{margin:0;color:#c5ead8}.auth-panel{display:grid;place-items:center;padding:40px}.auth-card{width:min(480px,100%)}.back-link{text-decoration:none;color:var(--green);font-weight:700}.auth-card h2{font-size:2.2rem;margin:45px 0 5px}.auth-card>p{color:var(--muted)}.form-stack{display:grid;gap:20px;margin-top:28px}.form-stack label{display:grid;gap:8px;font-weight:750}.form-stack input{width:100%;min-height:52px;border:1px solid #bfcfc6;border-radius:13px;padding:0 15px;font:inherit;background:#fff}.form-stack input:focus{outline:3px solid rgba(18,107,75,.15);border-color:var(--green)}.password-field{position:relative}.password-field button{position:absolute;right:8px;top:7px;min-height:38px;border:0;background:var(--mint);color:var(--green);border-radius:9px;font-weight:750}.alert{padding:14px 16px;border-radius:12px;margin:18px 0}.alert.error{color:#8b1d2c;background:#ffe9ed}.alert.success{color:#165d43;background:#e2f7ed}.help-box{display:grid;margin-top:25px;padding:16px;border-radius:14px;background:var(--mint)}.help-box span{color:var(--muted)}.app-shell{min-height:100vh;display:grid;grid-template-columns:270px 1fr}.sidebar{position:sticky;top:0;height:100vh;padding:28px 20px;display:flex;flex-direction:column;color:#dcebe4;background:#123b2c}.sidebar nav{display:grid;gap:7px;margin-top:42px}.sidebar nav a{display:flex;align-items:center;gap:14px;min-height:50px;padding:0 15px;border-radius:13px;text-decoration:none;font-weight:650}.sidebar nav a span{font-size:1.2rem}.sidebar nav a.active,.sidebar nav a:hover{color:#fff;background:rgba(255,255,255,.12)}.sidebar-help{display:grid;gap:5px;margin-top:auto;padding:16px;border-radius:14px;background:rgba(255,255,255,.08);font-size:.85rem}.sidebar-help span{color:#b8d2c5}.app-main{min-width:0}.topbar{height:80px;padding:0 32px;display:flex;align-items:center;gap:12px;background:#fff;border-bottom:1px solid var(--line)}.topbar>div:nth-child(2){display:grid}.topbar small{color:var(--muted)}.top-actions{margin-left:auto;display:flex;align-items:center;gap:12px}.text-control,.menu-toggle{min-width:44px;min-height:44px;border:1px solid var(--line);border-radius:12px;background:#fff;font-weight:850}.menu-toggle{display:none}.dashboard-content{padding:32px;max-width:1400px;margin:auto}.welcome-card{min-height:220px;display:flex;align-items:center;justify-content:space-between;padding:38px;border-radius:28px;color:#fff;background:linear-gradient(125deg,#126b4b,#299a6e);overflow:hidden}.welcome-card h1{font-size:clamp(2rem,4vw,3.4rem);line-height:1.06;margin:12px 0}.welcome-card p{color:#d8f3e7}.leaf-art{font-size:8rem;opacity:.28;transform:rotate(-12deg)}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:22px 0}.metric-grid article,.panel{background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:0 8px 30px rgba(21,69,49,.04)}.metric-grid article{padding:22px;display:grid}.metric-grid span,.metric-grid small{color:var(--muted)}.metric-grid strong{font-size:2.2rem}.content-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:20px}.panel{padding:25px}.panel-head{display:flex;justify-content:space-between}.panel h2{margin:8px 0 20px}.price-list{display:grid}.price-list article{display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:15px 0;border-top:1px solid var(--line)}.price-list article>div,.price-list article>b{display:grid}.price-list small{color:var(--muted);font-weight:500}.waste-symbol{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:var(--mint);color:var(--green)}.next-action>a{display:flex;align-items:center;gap:13px;padding:13px;margin-top:10px;border-radius:14px;background:var(--cream);text-decoration:none}.next-action>a>span{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--mint);color:var(--green);font-size:1.25rem}.next-action>a div{display:grid}.next-action small{color:var(--muted)}
@media(max-width:900px){.hero{grid-template-columns:1fr;padding-top:50px}.hero-visual{min-height:380px}.feature-grid,.steps{grid-template-columns:1fr}.auth-page{grid-template-columns:1fr}.auth-intro{min-height:380px;padding:35px}.auth-panel{padding:35px 22px}.app-shell{display:block}.sidebar{position:fixed;z-index:20;left:-290px;width:270px;transition:left .2s}.sidebar.open{left:0}.menu-toggle{display:block}.content-grid{grid-template-columns:1fr}}@media(max-width:620px){.public-nav nav>a:not(.button){display:none}.hero{padding:40px 20px 70px}.hero h1{font-size:2.8rem}.hero-actions{align-items:stretch;flex-direction:column}.hero-visual{min-height:330px}.mini-card{right:5px}.section{padding:70px 20px}.footer{gap:12px;flex-direction:column}.dashboard-content{padding:18px}.topbar{padding:0 16px}.metric-grid{grid-template-columns:1fr}.welcome-card{padding:27px}.leaf-art{display:none}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}
.master-page{max-width:1300px;margin:auto;padding:40px 28px 90px}.master-header{display:flex;align-items:flex-end;justify-content:space-between;padding:35px;border-radius:26px;background:linear-gradient(125deg,#e1f5eb,#f8faf8)}.master-header a{display:block;margin-bottom:25px;color:var(--green);font-weight:750;text-decoration:none}.master-header h1{font-size:clamp(2.5rem,5vw,4.6rem);line-height:1;margin:10px 0}.master-header p{color:var(--muted)}.header-badge{padding:10px 14px;border-radius:999px;background:#fff;color:var(--green);font-weight:800}.tab-nav{position:sticky;top:0;z-index:10;display:flex;gap:8px;overflow:auto;margin:25px 0;padding:10px;border:1px solid var(--line);border-radius:16px;background:rgba(255,255,255,.95)}.tab-nav a{white-space:nowrap;padding:10px 15px;border-radius:10px;text-decoration:none;font-weight:700}.tab-nav a:hover{background:var(--mint);color:var(--green)}.master-section{scroll-margin-top:90px;margin-top:24px;padding:28px;border:1px solid var(--line);border-radius:22px;background:#fff}.section-title{display:flex;align-items:end;justify-content:space-between;gap:20px}.section-title h2{margin:7px 0 20px;font-size:2rem}.search-form{display:flex;gap:8px}.search-form input,.master-form input,.master-form select,.master-form textarea{min-height:46px;border:1px solid #bdcdc4;border-radius:11px;padding:10px 12px;font:inherit}.form-disclosure{margin-bottom:20px;border:1px solid var(--line);border-radius:15px;background:var(--cream)}.form-disclosure summary{cursor:pointer;padding:16px;color:var(--green);font-weight:800}.master-form{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;padding:18px}.master-form.compact{grid-template-columns:repeat(5,1fr);padding:0 0 25px}.master-form label{display:grid;gap:6px;font-weight:700}.master-form .wide{grid-column:span 2}.master-form textarea{min-height:80px}.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:14px}table{width:100%;border-collapse:collapse}th,td{padding:14px 16px;text-align:left;border-bottom:1px solid var(--line)}th{background:var(--cream);color:#506058;font-size:.8rem;text-transform:uppercase;letter-spacing:.06em}td small{display:block;color:var(--muted)}.status{display:inline-flex;padding:5px 9px;border-radius:999px;background:#edf1ef;color:#56645d;font-size:.75rem;font-weight:800}.status.active{background:#e0f5ea;color:#126b4b}.chip-list{display:flex;flex-wrap:wrap;gap:9px}.chip-list span{padding:10px 13px;border-radius:12px;background:var(--mint)}.card-table{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.card-table article{display:flex;justify-content:space-between;gap:15px;padding:18px;border:1px solid var(--line);border-radius:15px}.card-table h3{margin:10px 0 0}.card-table>article>strong{white-space:nowrap;color:var(--green)}.card-table small{color:var(--muted)}@media(max-width:900px){.master-form,.master-form.compact{grid-template-columns:1fr 1fr}.card-table{grid-template-columns:1fr 1fr}}@media(max-width:620px){.master-page{padding:18px 12px 60px}.master-header{align-items:flex-start;flex-direction:column}.master-section{padding:18px 12px}.section-title{align-items:stretch;flex-direction:column}.search-form{margin-bottom:15px}.master-form,.master-form.compact,.card-table{grid-template-columns:1fr}.master-form .wide{grid-column:auto}}
.brand-mark{overflow:hidden;padding:0;background:#eaf7f1!important;border:1px solid rgba(18,107,75,.12)!important}.brand-mark img{display:block;width:100%;height:100%;object-fit:cover}.import-tools{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:18px 0;padding:16px;border-radius:14px;background:var(--mint)}.import-tools>div{display:grid;margin-right:auto}.import-tools small{color:var(--muted)}.import-tools form{display:flex;align-items:center;gap:8px}.import-preview{margin:18px 0;padding:18px;border:1px solid var(--line);border-radius:16px;background:#fbfdfc}@media(max-width:620px){.import-tools,.import-tools form{align-items:stretch;flex-direction:column}.import-tools>*{width:100%}}
/* Tahap 4: transaksi setoran */
.page-heading{display:flex;justify-content:space-between;align-items:end;margin-bottom:1.25rem}.page-heading h1{margin:.25rem 0}.transaction-grid{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(280px,.8fr);gap:1.25rem}.deposit-items{display:grid;gap:.75rem;margin-bottom:1.25rem}.deposit-row{display:grid;grid-template-columns:minmax(220px,1fr) minmax(140px,.42fr) 44px;gap:.75rem;align-items:end;padding:1rem;border:1px solid #d8e5df;border-radius:16px;background:#f8fbf9}.deposit-row .field{margin:0}.remove-item{width:44px;height:44px;border:1px solid #dfc8c8;border-radius:12px;background:#fff;color:#9b2c2c;font-size:1.5rem;cursor:pointer}.unit-hint{display:block;margin-top:.35rem;color:#60736b}.transaction-summary{display:grid;gap:.2rem;padding:1rem 1.2rem;margin:1rem 0;border-radius:16px;background:#e8f6ef}.transaction-summary strong{font-size:1.75rem;color:#126b4b}.recent-transactions{display:grid;gap:.6rem;margin-top:1rem}.recent-transactions a{display:flex;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid #dce7e2;border-radius:14px;color:inherit;text-decoration:none}.recent-transactions small,.receipt-brand small,.receipt-meta small,.receipt-items small{display:block;color:#61726b;margin-top:.2rem}.empty-state{padding:1rem;background:#f6f8f7;border-radius:12px}.receipt-wrap{min-height:100vh;padding:2rem;display:grid;place-items:center;background:#edf5f1}.receipt-card{width:min(720px,100%);padding:2rem;border-radius:24px;background:#fff;box-shadow:0 20px 60px rgba(14,58,43,.12)}.receipt-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem}.receipt-brand img{width:48px;height:48px}.receipt-meta{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;padding:1rem 0;border-block:1px solid #dde8e3}.receipt-meta dt{font-size:.8rem;color:#60736b}.receipt-meta dd{margin:.3rem 0 0;font-weight:700}.receipt-items{margin:1rem 0}.receipt-items>div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px dashed #d8e2de}.receipt-total{display:grid;gap:.2rem;padding:1.2rem;border-radius:16px;background:#126b4b;color:#fff}.receipt-total strong{font-size:2rem}.receipt-actions{display:flex;gap:.75rem;margin-top:1.25rem}.wide{width:100%}@media(max-width:850px){.transaction-grid{grid-template-columns:1fr}.deposit-row{grid-template-columns:1fr 1fr 44px}.receipt-meta{grid-template-columns:1fr}}@media(max-width:560px){.deposit-row{grid-template-columns:1fr 44px}.deposit-row .field:first-child{grid-column:1/-1}.receipt-wrap{padding:.75rem}.receipt-card{padding:1.2rem}.receipt-actions{flex-direction:column}}@media print{.receipt-wrap{padding:0;background:#fff}.receipt-card{box-shadow:none}.receipt-actions{display:none}}
/* Tahap 4C: riwayat dan pembatalan auditabel */
.history-filter{display:grid;grid-template-columns:1fr 220px auto;gap:1rem;align-items:end}.history-filter .field{margin:0}.history-list{display:grid;gap:.65rem;margin-top:1.25rem}.history-list>a{display:flex;justify-content:space-between;gap:1rem;padding:1rem;border:1px solid #dce7e2;border-radius:14px;color:inherit;text-decoration:none}.history-list a>div:first-child{display:grid;gap:.2rem}.history-list small,.history-list span{color:#61726b}.history-value{display:grid;justify-items:end;gap:.4rem;white-space:nowrap}.status-badge{display:inline-flex;width:max-content;padding:.28rem .65rem;border-radius:999px;font-size:.78rem;font-weight:800;background:#dff3e8;color:#126b4b}.status-badge.cancelled{background:#f8dddd;color:#982f2f}.receipt-title{display:flex;align-items:center;justify-content:space-between;gap:1rem}.cancellation-note{margin-top:1rem;padding:1rem;border-radius:14px;background:#fff0f0;color:#762626}.cancellation-note p{margin:.4rem 0}.cancel-form{margin-top:1.5rem;padding-top:1.25rem;border-top:1px solid #dde8e3}.cancel-form>div{display:flex;gap:.75rem;margin:.5rem 0}.cancel-form input{flex:1}.button.danger{background:#a83232;color:#fff}@media(max-width:700px){.history-filter{grid-template-columns:1fr}.history-list>a{flex-direction:column}.history-value{justify-items:start}.cancel-form>div{flex-direction:column}}
/* Kontrol formulir konsisten untuk desktop dan WebView Android */
.field{display:grid;gap:7px;margin-bottom:1rem}.field label,.form-stack label{font-weight:750}.field input,.field select,.field textarea,.form-stack input,.form-stack select,.form-stack textarea,.cancel-form input{width:100%;min-height:48px;padding:10px 13px;border:1px solid #b9cbc1;border-radius:12px;background:#fff;color:var(--ink);font:inherit}.field textarea,.form-stack textarea{min-height:110px;resize:vertical}.field input:focus,.field select:focus,.field textarea:focus,.form-stack input:focus,.form-stack select:focus,.form-stack textarea:focus{outline:3px solid rgba(18,107,75,.14);border-color:var(--green)}.module-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}.module-cards article{padding:1.5rem;border:1px solid var(--line);border-radius:20px;background:#fff}.module-icon{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--green);color:#fff;font-weight:900}.dialog-list{display:grid;gap:.75rem}.dialog-list article{display:grid;gap:.35rem;padding:1rem;border:1px solid var(--line);border-radius:14px}.dialog-list p{margin:.25rem 0;color:var(--muted)}.balance-hero{display:grid;gap:.3rem;margin-bottom:1.25rem;padding:2rem;border-radius:24px;background:linear-gradient(125deg,#126b4b,#299a6e);color:#fff}.balance-hero strong{font-size:clamp(2.4rem,6vw,4rem)}.account-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.9rem 0;border-bottom:1px solid var(--line)}.account-row span:first-child{display:grid}.account-row small{color:var(--muted)}.account-row b{color:var(--green)}.account-row b.negative{color:var(--danger)}@media(max-width:850px){.module-cards{grid-template-columns:1fr}}@media(max-width:620px){.account-row{align-items:flex-start;flex-direction:column}}
/* Pengelolaan jadwal */
.schedule-editor{margin-bottom:1.25rem;border:1px solid var(--line);border-radius:18px;background:#fff}.schedule-editor>summary{padding:1rem 1.25rem;cursor:pointer;color:var(--green);font-weight:850}.schedule-form{display:grid;grid-template-columns:1.2fr .8fr 1fr;gap:1rem;padding:0 1.25rem 1.25rem}.schedule-form .wide{grid-column:span 2}.schedule-form>.button{align-self:end}.schedule-list{display:grid;gap:1rem}.schedule-card{display:grid;grid-template-columns:110px 1fr auto;gap:1.25rem;padding:1.25rem;border:1px solid var(--line);border-radius:20px;background:#fff}.schedule-card.cancelled{opacity:.72}.schedule-date{display:grid;align-content:center;justify-items:center;padding:1rem;border-radius:16px;background:var(--mint);color:var(--green)}.schedule-date strong{font-size:2.2rem;line-height:1}.schedule-copy h2{margin:.5rem 0}.schedule-copy p{margin:.3rem 0;color:var(--muted)}.schedule-edit{width:280px}.schedule-edit>summary{cursor:pointer;color:var(--green);font-weight:800}.schedule-edit form{margin-top:.7rem}.status-badge.draft{background:#f5edcf;color:#775c00}.status-badge.published{background:#dff3e8;color:#126b4b}@media(max-width:850px){.schedule-form{grid-template-columns:1fr 1fr}.schedule-form .wide{grid-column:1/-1}.schedule-card{grid-template-columns:90px 1fr}.schedule-edit{grid-column:1/-1;width:100%}}@media(max-width:560px){.schedule-form,.schedule-card{grid-template-columns:1fr}.schedule-form .wide{grid-column:auto}.schedule-date{justify-items:start}.schedule-edit{grid-column:auto}}
/* Tahap 4D: penarikan tabungan */
.withdrawal-steps{display:grid;gap:1rem;padding-left:1.4rem}.withdrawal-list{margin-top:1.25rem}.withdrawal-list>article{display:grid;grid-template-columns:1fr auto;gap:1rem;padding:1.1rem 0;border-bottom:1px solid var(--line)}.withdrawal-list article>div:first-child{display:grid;gap:.3rem}.withdrawal-list h3{margin:.2rem 0}.withdrawal-list small{color:var(--muted)}.withdrawal-amount{font-size:1.25rem;color:var(--green)}.withdrawal-actions{grid-column:1/-1;display:flex;gap:.6rem;flex-wrap:wrap}.review-form{display:flex;gap:.5rem;flex-wrap:wrap}.review-form input{min-width:260px;min-height:40px;padding:8px 11px;border:1px solid #b9cbc1;border-radius:10px}.status-badge.requested{background:#e8eef8;color:#31578b}.status-badge.approved{background:#dff3e8;color:#126b4b}.status-badge.rejected,.status-badge.cancelled{background:#f8dddd;color:#982f2f}.status-badge.paid{background:#e7e0fa;color:#55379a}@media(max-width:620px){.withdrawal-list>article{grid-template-columns:1fr}.withdrawal-actions{grid-column:auto}.review-form,.review-form input{width:100%}}
/* Tahap 5: percakapan DIALOG */
.dialog-full{display:block}.dialog-ticket{display:grid!important;gap:.35rem!important;padding:1rem!important;border:1px solid var(--line);border-radius:14px;background:#fff;color:inherit;text-decoration:none}.dialog-ticket>div{display:flex;gap:.4rem}.priority{display:inline-flex;width:max-content;padding:.25rem .6rem;border-radius:999px;background:#eef1ef;color:#56645d;font-size:.75rem;font-weight:800;text-transform:capitalize}.priority.high{background:#fff0d7;color:#855500}.priority.urgent{background:#f8dddd;color:#982f2f}.dialog-detail{max-width:900px}.ticket-summary h1{margin:.7rem 0}.conversation{display:grid;gap:.8rem;margin:1rem 0}.message-bubble{width:min(78%,650px);padding:1rem 1.1rem;border-radius:18px;background:#fff;border:1px solid var(--line)}.message-bubble.staff{margin-left:auto;background:var(--mint);border-color:#c6e4d5}.message-bubble strong,.message-bubble strong small{display:flex;gap:.5rem}.message-bubble p{margin:.5rem 0}.message-bubble time{color:var(--muted);font-size:.78rem}.ticket-control form{display:grid;grid-template-columns:1fr 1fr auto;gap:1rem;align-items:end}.ticket-control .field{margin:0}.status-badge.waiting_staff,.status-badge.waiting_resident{background:#fff0d7;color:#855500}.status-badge.resolved,.status-badge.closed{background:#e7e0fa;color:#55379a}@media(max-width:620px){.message-bubble{width:92%}.ticket-control form{grid-template-columns:1fr}}

/* DIALOG chat: tata letak percakapan ramah desktop dan ponsel */
.sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}.dialog-app-main{height:100vh;display:flex;min-width:0;flex-direction:column;overflow:hidden}.chat-topbar{flex:0 0 80px;box-shadow:0 2px 12px rgba(23,36,30,.06);z-index:2}.chat-contact{display:flex!important;align-items:center;gap:.75rem;min-width:0}.chat-contact>div{display:grid;min-width:0}.chat-contact strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chat-contact small{text-transform:capitalize}.chat-avatar{display:grid;place-items:center;flex:0 0 42px;height:42px;border-radius:50%;background:var(--green);color:#fff;font-weight:900}.chat-back{margin-left:auto}.dialog-detail{width:100%;max-width:1200px;min-height:0;display:flex;flex:1;flex-direction:column;padding:18px 28px 24px}.dialog-detail>.alert{flex:0 0 auto;margin:0 0 10px}
.chat-ticket-info{flex:0 0 auto;margin-bottom:12px;border:1px solid var(--line);border-radius:14px;background:#fff;box-shadow:0 5px 18px rgba(21,69,49,.05)}.chat-ticket-info summary{display:flex;align-items:center;gap:.5rem;padding:.75rem 1rem;cursor:pointer;font-weight:800;list-style:none}.chat-ticket-info summary::-webkit-details-marker{display:none}.chat-ticket-info summary>span:first-child{margin-right:auto}.chat-ticket-copy{display:grid;gap:.25rem;padding:0 1rem .8rem}.chat-ticket-copy small{color:var(--muted)}.chat-ticket-control{display:grid;grid-template-columns:1fr 1fr auto;gap:.75rem;align-items:end;padding:.8rem 1rem 1rem;border-top:1px solid var(--line)}.chat-ticket-control label{display:grid;gap:.35rem;font-weight:700}.chat-ticket-control select{min-height:42px;padding:7px 10px;border:1px solid #b9cbc1;border-radius:10px;background:#fff;font:inherit}
.chat-window{min-height:0;display:flex;flex:1;flex-direction:column;overflow:hidden;border:1px solid #d8d2c8;border-radius:18px;background:#efeae2;box-shadow:var(--shadow)}.chat-scroll{min-height:300px;flex:1;overflow-y:auto;padding:24px clamp(14px,4vw,54px);background-color:#efeae2;background-image:radial-gradient(circle at 18px 18px,rgba(142,119,85,.075) 2px,transparent 2.5px),radial-gradient(circle at 45px 45px,rgba(142,119,85,.055) 1.5px,transparent 2px),linear-gradient(45deg,transparent 48%,rgba(142,119,85,.028) 49%,rgba(142,119,85,.028) 51%,transparent 52%);background-size:64px 64px,76px 76px,96px 96px;scroll-behavior:smooth}.chat-day{display:flex;justify-content:center;margin:4px 0 18px}.chat-day span{padding:6px 12px;border-radius:8px;background:rgba(255,255,255,.9);box-shadow:0 1px 2px rgba(0,0,0,.08);color:#53615a;font-size:.76rem;font-weight:700}.chat-row{display:flex;margin:3px 0}.chat-row.outgoing{justify-content:flex-end}.chat-row.incoming{justify-content:flex-start}
.chat-bubble{position:relative;width:max-content;max-width:min(72%,680px);padding:8px 11px 6px;border-radius:9px;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.14)}.chat-row.outgoing .chat-bubble{background:#d9fdd3}.chat-row.incoming .chat-bubble{border-top-left-radius:2px}.chat-row.outgoing .chat-bubble{border-top-right-radius:2px}.chat-bubble:before{content:"";position:absolute;top:0;width:0;height:0;border:7px solid transparent}.chat-row.incoming .chat-bubble:before{left:-8px;border-top-color:#fff;border-right-color:#fff}.chat-row.outgoing .chat-bubble:before{right:-8px;border-top-color:#d9fdd3;border-left-color:#d9fdd3}.chat-sender{display:block;margin-bottom:2px;color:var(--green);font-size:.77rem}.chat-bubble p{display:inline;margin:0;white-space:normal;overflow-wrap:anywhere}.chat-bubble time{float:right;margin:7px 0 -1px 12px;color:#66756d;font-size:.68rem;line-height:1}
.chat-composer{display:flex;align-items:flex-end;gap:10px;padding:10px 12px;background:#f0f2f5;border-top:1px solid rgba(0,0,0,.07)}.chat-composer textarea{min-height:46px;max-height:140px;flex:1;resize:none;overflow-y:auto;padding:12px 16px;border:1px solid transparent;border-radius:22px;background:#fff;font:inherit}.chat-composer textarea:focus{outline:3px solid rgba(18,107,75,.14);border-color:var(--green)}.chat-composer button{display:grid;place-items:center;flex:0 0 46px;height:46px;padding:0 0 0 3px;border:0;border-radius:50%;background:var(--green);color:#fff;font-size:1.2rem;cursor:pointer}.chat-composer button:hover{background:var(--green2)}.chat-closed{padding:14px;text-align:center;background:#f0f2f5;color:var(--muted);font-weight:700}
@media(max-width:900px){.dialog-app-main{height:100dvh}.dialog-detail{padding:10px}.chat-topbar{flex-basis:68px;height:68px}.chat-ticket-info{margin-bottom:8px}.chat-scroll{padding:18px}.chat-bubble{max-width:82%}}@media(max-width:620px){.chat-avatar{display:none}.chat-contact{min-width:0;flex:1}.chat-back{min-height:38px;padding:0 11px}.chat-ticket-info summary{flex-wrap:wrap}.chat-ticket-control{grid-template-columns:1fr}.chat-scroll{padding:16px 12px}.chat-bubble{max-width:88%}.chat-sender{font-size:.72rem}.chat-composer{padding:8px}.chat-composer textarea{min-height:44px}}

/* Tahap 6: pusat edukasi */
.education-page{max-width:1200px}.education-hero{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:clamp(28px,5vw,55px);border-radius:28px;background:linear-gradient(125deg,#126b4b,#28966b);color:#fff}.education-hero h1{max-width:760px;margin:.5rem 0;font-size:clamp(2.2rem,5vw,4.5rem);line-height:1}.education-hero p{max-width:720px;margin:0;color:#d8f3e7;font-size:1.05rem}.education-hero>span{font-size:8rem;opacity:.25}.education-filter{display:grid;grid-template-columns:1fr 240px auto;gap:.75rem;margin:1.2rem 0}.education-filter input,.education-filter select,.education-form input,.education-form select,.education-form textarea{width:100%;min-height:48px;padding:10px 13px;border:1px solid #b9cbc1;border-radius:12px;background:#fff;font:inherit}.education-editor{margin:1.2rem 0;border:1px solid var(--line);border-radius:18px;background:#fff}.education-editor summary{padding:1rem 1.2rem;cursor:pointer;color:var(--green);font-weight:850}.education-form{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:0 1.2rem 1.2rem}.education-form label{display:grid;gap:.4rem;font-weight:700}.education-form .wide{grid-column:1/-1}.education-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1rem}.education-card{display:grid;grid-template-columns:58px 1fr auto;gap:1rem;align-items:start;padding:1.3rem;border:1px solid var(--line);border-radius:20px;background:#fff;color:inherit;text-decoration:none;box-shadow:0 8px 30px rgba(21,69,49,.04)}.education-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}.education-card-icon{display:grid;place-items:center;width:56px;height:56px;border-radius:17px;background:var(--mint);color:var(--green);font-size:1.6rem;font-weight:900}.education-card h2{margin:.45rem 0 .25rem}.education-card p{margin:.25rem 0;color:var(--muted)}.education-card small{color:var(--green);font-weight:700}.education-card>strong{font-size:2rem;color:var(--green)}.education-category{display:inline-flex;margin-right:.4rem;color:var(--green);font-size:.75rem;font-weight:850;letter-spacing:.06em;text-transform:uppercase}
.education-reader{width:min(900px,100%);margin:auto;padding:45px 28px 90px}.education-reader>article,.quiz-panel{padding:clamp(24px,5vw,55px);border:1px solid var(--line);border-radius:25px;background:#fff}.education-reader h1{margin:.75rem 0;font-size:clamp(2.4rem,6vw,4.8rem);line-height:1.02;letter-spacing:-.045em}.education-lead{color:var(--muted);font-size:1.2rem}.reader-meta{display:flex;gap:1.2rem;padding:1rem 0;border-bottom:1px solid var(--line);color:var(--muted);font-size:.9rem}.reader-content{font-size:1.08rem;line-height:1.8}.reader-content p{margin:1.5rem 0}.video-link{display:inline-flex;padding:12px 16px;border-radius:12px;background:var(--mint);color:var(--green);font-weight:800;text-decoration:none}.quiz-panel{margin-top:1.2rem}.quiz-panel fieldset{display:grid;gap:.6rem;margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:15px}.quiz-panel legend{padding:0 .5rem;font-weight:800}.quiz-panel fieldset label{display:flex;align-items:center;gap:.7rem;padding:.7rem;border-radius:10px;background:var(--cream);cursor:pointer}.quiz-panel input{width:20px;height:20px}.quiz-last{padding:1rem;border-radius:12px;background:var(--mint)}
@media(max-width:760px){.education-filter,.education-form,.education-grid{grid-template-columns:1fr}.education-form .wide{grid-column:auto}.education-hero>span{display:none}.education-card{grid-template-columns:48px 1fr}.education-card-icon{width:46px;height:46px}.education-card>strong{display:none}.education-reader{padding:20px 12px 60px}}

/* Tahap 7: dashboard partisipasi */
.participation-page{max-width:1250px}.participation-hero{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:clamp(28px,5vw,52px);border-radius:28px;background:linear-gradient(125deg,#0f6043,#299a6e);color:#fff}.participation-hero h1{margin:.5rem 0;font-size:clamp(2.2rem,5vw,4.3rem);line-height:1}.participation-hero p{margin:0;color:#d8f3e7}.participation-rate{display:grid;place-items:center;flex:0 0 170px;aspect-ratio:1;border-radius:50%;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.25)}.participation-rate strong{font-size:2.5rem}.participation-rate span{font-size:.85rem}.baseline-notice{display:flex;gap:.7rem;margin:1rem 0;padding:1rem;border-radius:13px;background:#fff4d6;color:#735600}.impact-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:.85rem;margin:1rem 0}.impact-grid article{display:grid;gap:.3rem;padding:1.2rem;border:1px solid var(--line);border-radius:18px;background:#fff}.impact-grid article>span{min-height:2.8rem;color:var(--muted)}.impact-grid article>strong{font-size:2.2rem}.impact-compare{display:grid;padding-top:.5rem;border-top:1px solid var(--line)}.impact-compare b{font-size:.8rem}.positive{color:var(--green)}.negative{color:var(--danger)}.participation-layout{display:grid;grid-template-columns:1.2fr .8fr;gap:1rem}.trend-chart{height:290px;display:grid;grid-template-columns:repeat(6,1fr);gap:.75rem;align-items:end;padding-top:1rem}.trend-column{height:100%;display:grid;grid-template-rows:auto 1fr auto auto;justify-items:center;gap:.35rem}.trend-track{width:min(50px,80%);height:100%;display:flex;align-items:end;border-radius:12px;background:var(--cream);overflow:hidden}.trend-track i{display:block;width:100%;min-height:4px;border-radius:12px 12px 0 0;background:linear-gradient(#32aa79,#126b4b)}.trend-column small{font-weight:750}.trend-column em{color:var(--muted);font-size:.72rem;font-style:normal}.baseline-panel details{margin-top:1rem}.baseline-panel summary{cursor:pointer;color:var(--green);font-weight:800}.baseline-form{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:1rem}.baseline-form label{display:grid;gap:.3rem;font-size:.85rem;font-weight:700}.baseline-form input,.baseline-form textarea{width:100%;min-height:44px;padding:8px 10px;border:1px solid #b9cbc1;border-radius:10px;font:inherit}.baseline-form .wide{grid-column:1/-1}.resident-impact{grid-template-columns:repeat(4,1fr)}.participation-callout{margin-top:1rem}.participation-callout .module-cards a{padding:1rem;border-radius:14px;background:var(--mint);color:var(--green);font-weight:800;text-decoration:none}
@media(max-width:1000px){.impact-grid{grid-template-columns:repeat(3,1fr)}.participation-layout{grid-template-columns:1fr}}@media(max-width:650px){.participation-hero{align-items:flex-start;flex-direction:column}.participation-rate{aspect-ratio:auto;width:100%;padding:1rem}.impact-grid,.resident-impact{grid-template-columns:1fr 1fr}.trend-chart{gap:.3rem}.trend-track{width:28px}.baseline-form{grid-template-columns:1fr}.baseline-form .wide{grid-column:auto}}@media(max-width:420px){.impact-grid,.resident-impact{grid-template-columns:1fr}}

/* Tahap 8: laporan periode */
.reports-page{max-width:1300px}.reports-hero{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:clamp(28px,5vw,52px);border-radius:28px;background:linear-gradient(125deg,#173f32,#207b59);color:#fff}.reports-hero h1{margin:.5rem 0;font-size:clamp(2.2rem,5vw,4rem);line-height:1}.reports-hero p{margin:0;color:#d8f3e7}.reports-hero>span{font-size:7rem;opacity:.2}.report-filter{display:flex;align-items:end;gap:1rem;margin:1rem 0;padding:1rem;border:1px solid var(--line);border-radius:16px;background:#fff}.report-filter label{display:grid;gap:.35rem;font-weight:700}.report-filter input{min-height:46px;padding:8px 12px;border:1px solid #b9cbc1;border-radius:10px;font:inherit}.report-actions{display:flex;align-items:center;gap:.75rem;margin:1rem 0}.report-actions small{color:var(--muted)}.report-metrics{display:grid;grid-template-columns:repeat(3,1fr);gap:.85rem;margin:1rem 0}.report-metrics article{display:grid;padding:1.2rem;border:1px solid var(--line);border-radius:17px;background:#fff}.report-metrics span,.report-metrics small{color:var(--muted)}.report-metrics strong{font-size:1.7rem;color:var(--green)}.report-baseline{display:grid;gap:.2rem;margin:1rem 0;padding:1rem;border-radius:14px;background:var(--mint)}@media(max-width:700px){.report-filter,.report-actions{align-items:stretch;flex-direction:column}.report-filter>*{width:100%}.report-metrics{grid-template-columns:1fr 1fr}.reports-hero>span{display:none}}@media(max-width:430px){.report-metrics{grid-template-columns:1fr}}

/* Tahap 9: pusat notifikasi */
.notification-nav-dot{width:9px;height:9px;margin-left:auto;border-radius:50%;background:#f4b740}.notifications-page{max-width:1150px}.notification-heading{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1rem}.notification-heading h1{margin:.3rem 0;font-size:clamp(2.2rem,5vw,4rem)}.notification-heading p{margin:0;color:var(--muted)}.notification-layout{display:grid;grid-template-columns:1fr 340px;gap:1rem}.notification-list{display:grid;align-content:start;gap:.65rem}.notification-item{display:grid;grid-template-columns:48px 1fr auto;gap:.8rem;align-items:start;padding:1rem;border:1px solid var(--line);border-radius:17px;background:#fff}.notification-item.unread{border-left:5px solid var(--green);background:#fbfffd}.notification-icon{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;background:var(--mint);color:var(--green);font-weight:900}.notification-item>a{color:inherit;text-decoration:none}.notification-item p{margin:.25rem 0;color:var(--muted)}.notification-item small{color:var(--muted)}.notification-item form button{width:38px;height:38px;border:0;border-radius:50%;background:var(--mint);color:var(--green);cursor:pointer}.notification-settings form{display:grid;gap:.75rem}.notification-settings label{display:flex;align-items:center;gap:.7rem;padding:.8rem;border-radius:12px;background:var(--cream);font-weight:700}.notification-settings input{width:20px;height:20px}.setting-help{color:var(--muted);font-size:.82rem}@media(max-width:800px){.notification-layout{grid-template-columns:1fr}.notification-settings{order:-1}.notification-heading{align-items:stretch;flex-direction:column}}@media(max-width:500px){.notification-item{grid-template-columns:40px 1fr}.notification-icon{width:38px;height:38px}.notification-item form{grid-column:2}}

/* Tahap 10: uji pengguna */
.uat-page{max-width:1250px}.uat-hero{display:flex;align-items:center;justify-content:space-between;gap:2rem;padding:clamp(28px,5vw,52px);border-radius:28px;background:linear-gradient(125deg,#174535,#278b65);color:#fff}.uat-hero h1{margin:.5rem 0;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1}.uat-hero p{margin:0;color:#d8f3e7}.uat-hero>span{font-size:7rem;opacity:.25}.uat-link{display:grid;gap:.35rem;margin-bottom:1rem;padding:1rem;border:2px solid #f4b740;border-radius:15px;background:#fff9e8}.uat-link input{padding:10px;border:1px solid #d8c681;border-radius:8px;font:inherit}.uat-admin-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0}.uat-admin-grid summary{cursor:pointer;color:var(--green);font-size:1.1rem;font-weight:850}.uat-form{display:grid;grid-template-columns:1fr 1fr;gap:.8rem;margin-top:1rem}.uat-form label{display:grid;gap:.3rem;font-weight:700}.uat-form input,.uat-form select,.uat-form textarea{width:100%;min-height:44px;padding:8px 10px;border:1px solid #b9cbc1;border-radius:10px;font:inherit}.uat-form .wide{grid-column:1/-1}.uat-campaigns{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin:1rem 0}.uat-campaigns article{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;padding:1.2rem;border:1px solid var(--line);border-radius:18px;background:#fff}.uat-campaigns h2,.uat-campaigns p,.uat-campaigns>.status-badge{grid-column:1/-1;margin:.2rem 0}.uat-campaigns article>div{display:grid}.uat-campaigns article>div strong{font-size:1.5rem;color:var(--green)}.survey-body{background:#eaf7f1}.survey-page{width:min(850px,100%);margin:auto;padding:28px 18px 80px}.survey-page>header{display:flex;align-items:center;gap:1rem;margin-bottom:1rem}.survey-page h1{margin:.2rem 0}.survey-card{margin:1rem 0;padding:clamp(22px,5vw,42px);border:1px solid var(--line);border-radius:24px;background:#fff;box-shadow:0 10px 35px rgba(21,69,49,.06)}.survey-card h2{font-size:1.8rem}.survey-card fieldset{margin:1.2rem 0;padding:1rem;border:1px solid var(--line);border-radius:14px}.survey-card legend{padding:0 .4rem;font-weight:800}.task-options{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}.task-options label,.sus-question label{display:flex;align-items:center;gap:.5rem;padding:.7rem;border-radius:10px;background:var(--cream);cursor:pointer}.task-options input,.sus-question input{width:20px;height:20px}.sus-question>div{display:grid;grid-template-columns:repeat(5,1fr);gap:.4rem}.sus-question label{justify-content:center}.sus-question small{display:flex;justify-content:space-between;color:var(--muted)}.survey-card>label{display:grid;gap:.4rem;margin:1rem 0;font-weight:700}.survey-card textarea{min-height:100px;padding:10px;border:1px solid #b9cbc1;border-radius:10px;font:inherit}.survey-privacy{text-align:center;color:var(--muted);font-size:.85rem}.survey-thanks{text-align:center;padding-block:70px}.survey-thanks .brand-mark{margin:auto}@media(max-width:850px){.uat-admin-grid,.uat-campaigns{grid-template-columns:1fr}}@media(max-width:560px){.uat-form,.task-options{grid-template-columns:1fr}.uat-form .wide{grid-column:auto}.sus-question>div{gap:.2rem}.sus-question label{padding:.5rem}.uat-hero>span{display:none}}