/* SakuMaju customer experience system — shared across every public/client surface. */
:root {
  --cx-navy:#08263d; --cx-navy-2:#123b55; --cx-teal:#079786; --cx-teal-dark:#05766b;
  --cx-mint:#e7f7f3; --cx-page:#f5f8f7; --cx-card:#fff; --cx-text:#102d45;
  --cx-muted:#607788; --cx-border:#d5e2e1; --cx-danger:#b7332c; --cx-warning:#a96208;
  --cx-success:#147a50; --cx-focus:#71d8ca; --cx-radius:18px; --cx-shadow:0 20px 55px rgba(8,38,61,.12);
}
*,*::before,*::after{box-sizing:border-box}
html{font-size:16px;scroll-behavior:smooth}
body{color:var(--cx-text);text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased}
:where(a,button,input,select,textarea):focus-visible{outline:3px solid var(--cx-focus)!important;outline-offset:3px!important}
:where(button,a,input,select){min-height:44px}
.hidden,[hidden]{display:none!important}

/* Calm, consistent public header */
.topbar,.public-header,.site-header{border-bottom:1px solid var(--cx-border)!important;background:rgba(255,255,255,.97)!important;backdrop-filter:blur(12px);z-index:50}
.brand,.portal-brand,.brand-word{letter-spacing:-1px;text-decoration:none}.header-actions{align-items:center}
.language select,.language-control select,.language-button{border:1px solid var(--cx-border)!important;border-radius:11px!important;background:#fff!important;color:var(--cx-text)!important}

/* Authentication: explicit 3-stage journey and friendly validation */
.auth-card{overflow:hidden}.auth-progress{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 24px;padding:0;list-style:none}
.auth-progress li{display:grid;grid-template-columns:30px 1fr;align-items:center;gap:8px;color:var(--cx-muted);font-size:.76rem;font-weight:750;line-height:1.2}
.auth-progress b{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;background:#eef3f3;color:var(--cx-muted)}
.auth-progress li.active{color:var(--cx-teal-dark)}.auth-progress li.active b{background:var(--cx-teal);color:#fff;box-shadow:0 0 0 5px var(--cx-mint)}
.auth-progress li.complete b{background:var(--cx-mint);color:var(--cx-success)}
.stage-note{border:1px solid #bfe1dc;background:var(--cx-mint);border-radius:13px;padding:13px 15px;color:#315c64}
.auth-stage-heading{display:flex;justify-content:space-between;gap:12px;align-items:start;margin-bottom:16px}.auth-stage-heading small{color:var(--cx-muted)}
.form-error:not(:empty){display:block!important;border:1px solid #efb7b3;background:#fff2f1;color:var(--cx-danger);padding:12px 14px;margin-top:14px}
.field-error{color:var(--cx-danger)!important;font-size:.82rem;margin-top:6px}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--cx-danger)!important;background:#fffafa!important}
button[aria-busy="true"]{cursor:wait;opacity:.78}
.captcha-visual{min-height:76px;display:grid;place-items:center;overflow:hidden}.captcha-visual img{max-height:70px}.captcha-visual span{color:var(--cx-muted);font-size:.85rem}

/* Portal clarity: urgent action first, stable navigation, readable records */
.portal-topbar{position:sticky!important;top:0!important;z-index:70!important}.portal-content{min-width:0}.page-heading{align-items:end!important}
.action-card,.active-loan-hero{scroll-margin-top:90px}.repayment-cta{box-shadow:0 8px 24px rgba(7,151,134,.2);animation:cx-pay-pulse 3s ease-in-out infinite}
@keyframes cx-pay-pulse{0%,100%{box-shadow:0 8px 24px rgba(7,151,134,.16)}50%{box-shadow:0 8px 30px rgba(7,151,134,.32)}}
.responsive-table-wrap{border:1px solid var(--cx-border);border-radius:15px;overflow:auto}.responsive-table{min-width:820px}.responsive-table th{position:sticky;top:0;background:#f4f8f7;z-index:1}
.activity-row,.loan-focus-card,.surface{transition:border-color .18s ease,box-shadow .18s ease}.activity-row:hover,.loan-focus-card:hover{border-color:#9dcfc8;box-shadow:0 8px 24px rgba(8,38,61,.08)}
.detail-dialog::backdrop,.application-modal::backdrop{background:rgba(5,25,40,.7);backdrop-filter:blur(4px)}
.portal-toast{position:fixed;z-index:120;right:24px;top:92px;max-width:min(420px,calc(100vw - 32px));padding:14px 18px;border-radius:13px;background:var(--cx-navy);color:#fff;box-shadow:var(--cx-shadow);font-weight:750}
.modal-open,.navigation-open{overflow:hidden}
.application-frame-loading{display:flex!important;align-items:center;justify-content:center;gap:10px;color:var(--cx-muted)}
.application-frame-loading::before{content:"";width:22px;height:22px;border:3px solid #cfe5e1;border-top-color:var(--cx-teal);border-radius:50%;animation:cx-spin .8s linear infinite}
.application-modal.frame-ready .application-frame-loading{display:none!important}@keyframes cx-spin{to{transform:rotate(360deg)}}

/* Guided application: one visual rhythm and clear capture states */
.application-toolbar{position:sticky;top:0;z-index:10;background:rgba(245,248,247,.94);backdrop-filter:blur(8px)}
.form-step{padding-bottom:40px}.form-step>h2{max-width:720px}.form-step>p{max-width:680px;color:var(--cx-muted)}
.field>span{font-weight:780;color:var(--cx-text)}.field small{color:var(--cx-muted)}
.field input,.field select,.field textarea{transition:border-color .15s,box-shadow .15s}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--cx-teal)!important;box-shadow:0 0 0 4px rgba(7,151,134,.11)}
.form-message.error-message:not(:empty){border:1px solid #efb7b3;background:#fff2f1;border-radius:12px;padding:12px 14px;color:var(--cx-danger)}
.capture-panel[aria-busy="true"],.identity-stage[aria-busy="true"]{position:relative;pointer-events:none}
.capture-panel[aria-busy="true"]::after,.identity-stage[aria-busy="true"]::after{content:"Memproses rakaman dengan selamat…";position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:24px;background:rgba(255,255,255,.9);color:var(--cx-navy);font-weight:800;border-radius:inherit}
.identity-result{border-width:2px!important}.identity-result .retry-button,.capture-panel button{min-height:48px}
.mobile-progress{background:#fff!important;border-bottom:1px solid var(--cx-border);padding:12px 16px!important}

/* Repayment: dedicated, prominent states */
.repay-card{max-width:760px!important}.repay-language{display:flex;justify-content:flex-end;margin:0 0 18px}.repay-language select{border:1px solid var(--cx-border);border-radius:10px;background:#fff;padding:8px 32px 8px 10px}
.payment-state{border-radius:15px;padding:14px 16px;margin:14px 0}.payment-state.error{background:#fff1f0;border:1px solid #efb7b3;color:var(--cx-danger)}.payment-state.pending{background:#fff8e8;border:1px solid #ead09a;color:#79520c}
.payment-complete{text-align:center}.payment-complete .receipt-button{display:inline-flex;align-items:center;justify-content:center;min-width:190px}

@media(max-width:900px){
  .desktop-nav,.primary-nav{display:none!important}.auth-layout{grid-template-columns:1fr!important}.auth-intro{display:none!important}
  .portal-topbar{min-height:66px}.account-copy{display:none}.portal-content{padding:28px 20px!important}
}
@media(max-width:767px){
  html{font-size:16px}.topbar,.public-header{padding:10px 14px!important;gap:10px}.topbar .header-actions,.public-header .header-actions{gap:7px}.topbar .btn,.public-header .outline-link{padding-inline:11px!important;font-size:.82rem}
  .auth-layout{width:min(100% - 24px,590px)!important;padding:16px 0 30px!important}.auth-card{padding:22px 18px!important;border-radius:18px!important}.auth-card-heading h2{font-size:1.65rem!important}.auth-progress{gap:4px}.auth-progress li{display:flex;flex-direction:column;text-align:center;font-size:.68rem}.auth-progress b{width:28px;height:28px}
  .portal-content{padding:22px 14px!important}.portal-sidebar{top:66px!important;bottom:0!important}.page-heading{gap:18px}.page-heading .button{width:100%;justify-content:center}.summary-grid{grid-template-columns:1fr 1fr!important}.active-loan-hero:not(.hidden):not([hidden]){display:grid!important}.repayment-cta{width:100%;justify-content:center;text-align:center}
  .portal-toast{top:78px;right:16px;left:16px;max-width:none}
  .responsive-table-wrap{border:0;overflow:visible}.responsive-table{min-width:0}.responsive-table thead{display:none}.responsive-table tbody{display:grid;gap:12px}.responsive-table tr{display:grid!important;border:1px solid var(--cx-border);border-radius:15px;padding:14px;background:#fff}.responsive-table td{display:grid!important;grid-template-columns:minmax(110px,42%) 1fr;gap:10px;padding:8px 0!important;border:0!important}.responsive-table td::before{content:attr(data-label);font-size:.72rem;font-weight:800;color:var(--cx-muted);text-transform:uppercase}.responsive-table .action-cell{display:flex!important}.responsive-table .action-cell::before{display:none}.responsive-table .row-button{width:100%}
  .application-modal>header{padding:12px 16px!important}.application-modal>header h2{font-size:1.12rem}.application-modal iframe{height:calc(100dvh - 68px)!important}.application-sidebar{display:none!important}.form-workspace{width:100%!important}.form-step{padding-inline:16px!important}.fields-grid{grid-template-columns:1fr!important}.full-span{grid-column:auto!important}
  .repay-shell{padding:10px!important}.repay-card{padding:22px 16px!important}.repay-card header{align-items:center}.repay-card dl>div{grid-template-columns:1fr!important;gap:4px}.repay-card dd{text-align:left!important}.amount{display:grid!important}.amount strong{font-size:2rem!important}
}
@media(max-width:390px){.summary-grid{grid-template-columns:1fr!important}.header-actions .btn.primary{display:none}.auth-progress li span{max-width:86px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.repayment-cta,.application-frame-loading::before{animation:none!important}}