/* PAYAO DOCU-PORTAL UI refresh — visual layer only; no application logic. */
:root{--ui-forest:#123f35;--ui-pine:#1d624e;--ui-mint:#e5f2e9;--ui-paper:#fffefa;--ui-bg:#f4f6f2;--ui-ink:#19352d;--ui-muted:#687970;--ui-line:#e1e8e2;--ui-radius:16px}
html{scroll-padding-top:88px} body{accent-color:var(--ui-pine)}
body.app-body{background:var(--ui-bg);color:var(--ui-ink)}
body.app-body .main{min-width:0;background:linear-gradient(135deg,rgba(229,242,233,.35),transparent 42%),var(--ui-bg)}
body.app-body .sidebar{width:var(--sidebar-w,272px)}
body.app-body .topbar{min-height:72px;gap:14px;padding:12px clamp(16px,2.4vw,34px);backdrop-filter:blur(14px);background:rgba(255,254,250,.94);border-bottom:1px solid var(--ui-line)}
body.app-body .topbar-title{font-size:clamp(1.05rem,1.5vw,1.4rem);line-height:1.25}
body.app-body .topbar-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
body.app-body .content{width:100%;max-width:1600px;margin:0 auto;padding:clamp(18px,2.5vw,36px) clamp(14px,2.6vw,38px) 64px}
body.app-body .panel,body.app-body .plain-card,body.app-body .stat,body.app-body .profile,body.app-body .cta-panel{border:1px solid var(--ui-line);border-radius:var(--ui-radius);box-shadow:0 8px 26px -22px rgba(18,63,53,.45)}
body.app-body .panel,body.app-body .plain-card{background:var(--ui-paper)}
body.app-body .panel h2,body.app-body .panel h3{line-height:1.3}
body.app-body .page-intro{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
body.app-body .page-intro p{color:var(--ui-muted);max-width:760px}
body.app-body .dl-btn,body.app-body button,body.app-body .form-control,body.app-body .form-select{min-height:42px}
body.app-body .dl-btn{border-radius:11px;font-weight:700}
body.app-body .form-control,body.app-body .form-select,body.app-body input:not([type=checkbox]):not([type=radio]):not([type=file]),body.app-body textarea,body.app-body select{border-radius:11px;max-width:100%}
body.app-body textarea{min-height:110px}
body.app-body .dl-table-wrap,body.app-body .table-responsive{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:13px}
body.app-body .dl-table{width:100%;min-width:620px;border-collapse:separate;border-spacing:0}
body.app-body .dl-table thead th{position:sticky;top:0;z-index:1;background:#edf4ee;color:#34594b;font-size:.76rem;letter-spacing:.035em;text-transform:uppercase;white-space:nowrap}
body.app-body .dl-table th,body.app-body .dl-table td{padding:13px 15px;vertical-align:middle;border-bottom:1px solid #e9eee9}
body.app-body .dl-table tbody tr:hover{background:#f7faf7}
body.app-body .pill{white-space:nowrap}
body.app-body .dl-alert{border:1px solid transparent;border-radius:13px}
body.app-body .chip{white-space:nowrap}
body.app-body img{max-width:100%;height:auto}
body.app-body .content :focus-visible{outline-color:rgba(29,98,78,.5)}
@media(max-width:991.98px){body.app-body .topbar{min-height:64px;padding:10px 14px}body.app-body .content{padding:18px 14px 48px}body.app-body .topbar-right .chip{font-size:.76rem;padding:6px 9px}body.app-body .panel,body.app-body .plain-card{padding:18px}}
@media(max-width:575.98px){body.app-body .topbar-title{font-size:1rem;max-width:48vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}body.app-body .topbar-right{gap:5px}body.app-body .topbar-right .chip:not(.chip-role){display:none}body.app-body .content{padding:14px 11px 38px}body.app-body .stats{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}body.app-body .stat{min-width:0;padding:14px 12px}body.app-body .stat-value{font-size:1.45rem}body.app-body .stat-label{font-size:.76rem}body.app-body .panel,body.app-body .plain-card{padding:15px 13px;border-radius:14px}body.app-body .dl-btn{min-height:44px;padding:10px 13px}body.app-body .page-intro{margin-bottom:16px}body.app-body .page-intro h2{font-size:1.25rem}}
@media(hover:none){body.app-body .nav-item:hover,body.app-body .stat:hover{transform:none}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}
/* Public registration and forced-password pages */
body.plain-body{min-height:100vh;background:radial-gradient(700px 400px at 100% 0%,rgba(143,217,182,.18),transparent 65%),#f4f6f2;color:#19352d}
body.plain-body .plain-wrap{width:min(100% - 28px,860px);margin:0 auto;padding:clamp(24px,6vh,64px) 0}
body.plain-body .plain-card{background:#fffefa;border:1px solid #e1e8e2;border-radius:20px;box-shadow:0 24px 70px -42px rgba(18,63,53,.42);padding:clamp(20px,4vw,38px)}
body.plain-body .plain-head{display:flex;align-items:center;gap:16px;margin-bottom:24px}
body.plain-body .plain-head h1{font-size:clamp(1.45rem,3vw,2rem);color:#123f35}
body.plain-body .plain-text{color:#687970;line-height:1.6}
body.plain-body .dl-fieldrow{margin-bottom:15px}
body.plain-body .form-control{min-height:46px;border:1px solid #dce6de;border-radius:11px;padding:10px 13px}
body.plain-body .form-control:focus{border-color:#1d624e;box-shadow:0 0 0 4px rgba(29,98,78,.12)}
body.plain-body .dl-btn{min-height:46px;border-radius:11px}
@media(max-width:575.98px){body.plain-body .plain-wrap{width:min(100% - 20px,860px);padding:18px 0}body.plain-body .plain-card{padding:20px 15px;border-radius:16px}body.plain-body .plain-head{align-items:flex-start;gap:10px}}