.portal-login-page { min-height:100svh; display:flex; flex-direction:column; }
.portal-login-wrap { width:min(100% - 32px, 560px); margin:clamp(34px,8vh,82px) auto 38px; flex:1; display:grid; align-items:center; }
.portal-login-card { position:relative; overflow:hidden; padding:clamp(24px,5vw,42px); border:1px solid #dce6f2; border-radius:24px; background:linear-gradient(145deg,#fff,#f9fbff); box-shadow:0 20px 54px rgba(33,62,105,.10); }
.portal-login-card::after { position:absolute; z-index:0; content:""; width:230px; height:230px; top:-135px; right:-100px; border:1px solid #e6effb; border-radius:50%; box-shadow:0 0 0 28px #eff5fc,0 0 0 58px #f5f8fc; pointer-events:none; }
.portal-login-icon { position:relative; z-index:1; display:grid; place-items:center; width:52px; height:52px; margin-bottom:23px; border-radius:16px; background:#eaf2ff; color:#2468d5; font-size:25px; font-weight:800; }
.portal-eyebrow { margin:0 0 9px; color:#2468d5; font-size:10px; font-weight:850; letter-spacing:1.4px; }
.portal-login-card h1 { position:relative; z-index:1; max-width:440px; margin:0; color:#1d2b40; font-size:clamp(25px,5vw,34px); letter-spacing:-.8px; line-height:1.16; }
.portal-login-lead { max-width:450px; margin:12px 0 24px; color:#667891; font-size:14px; line-height:1.65; }
.portal-login-form { display:grid; gap:8px; }
.portal-login-form label { margin-top:7px; color:#30445f; font-size:12px; font-weight:800; }
.portal-login-form input { width:100%; min-height:49px; padding:12px 14px; border:1px solid #d4dfed; border-radius:12px; background:#fff; color:#1d2b40; font:inherit; }
.portal-login-form input:focus { outline:3px solid rgba(36,104,213,.15); border-color:#7da9e8; }
.portal-login-form button { display:flex; justify-content:space-between; align-items:center; min-height:51px; margin-top:13px; padding:0 17px; border:0; border-radius:12px; background:#2468d5; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.portal-login-form button:hover { background:#1955b8; }
.portal-alert { margin:0 0 16px; padding:12px 14px; border:1px solid #f1c9c5; border-radius:11px; background:#fff1ef; color:#a43e32; font-size:13px; line-height:1.5; }
.portal-login-help { display:grid; gap:4px; margin-top:19px; padding:14px; border:1px solid #e3ebf5; border-radius:12px; background:#f8fafd; font-size:12px; line-height:1.55; }
.portal-login-help b { color:#30445f; }
.portal-login-help span { color:#667891; }
.portal-login-security { display:flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; padding-top:16px; border-top:1px solid #e8edf5; color:#71829a; font-size:11px; }
.portal-login-security span { color:#168667; }
.site-footer a { color:#2468d5; text-decoration:none; font-weight:700; }

.portal-page { min-height:100vh; }
.portal-page .topbar__inner { justify-content:space-between; }
.portal-user { display:flex; align-items:center; gap:10px; }
.portal-user-name { display:grid; max-width:230px; }
.portal-user-name b { overflow:hidden; font-size:12px; text-overflow:ellipsis; white-space:nowrap; }
.portal-user-name small { color:#667891; font-size:10px; }
.portal-security-link { color:#2468d5; text-decoration:none; font-size:10px; font-weight:750; white-space:nowrap; }
.portal-security-link:hover { text-decoration:underline; }
.portal-logout { min-height:38px; padding:0 12px; border:1px solid #d4dfed; border-radius:10px; background:#fff; color:#30445f; font:inherit; font-size:11px; font-weight:750; cursor:pointer; }
.portal-logout:hover { border-color:#b8cbe2; background:#f8fbff; }
.portal-shell { width:min(1120px,calc(100% - 40px)); margin:25px auto 42px; }
.portal-welcome { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; padding:25px 27px; border:1px solid #d8e6f8; border-radius:20px; background:linear-gradient(118deg,#eaf3ff,#f7faff 62%,#eaf6f4); box-shadow:0 10px 30px rgba(33,62,105,.055); }
.portal-welcome h1 { margin:4px 0 7px; font-size:clamp(25px,4vw,34px); letter-spacing:-.8px; line-height:1.15; }
.portal-welcome p { margin:0; color:#667891; font-size:13px; line-height:1.55; }
.portal-child-filter { min-width:min(100%,260px); display:grid; gap:7px; }
.portal-child-filter label { color:#30445f; font-size:11px; font-weight:800; }
.portal-child-filter select { width:100%; min-height:43px; padding:0 12px; border:1px solid #ccd8e8; border-radius:10px; background:#fff; color:#1d2b40; font:inherit; font-size:12px; }
.portal-child-filter>div { display:flex; align-items:center; min-height:43px; padding:0 12px; border:1px solid #ccd8e8; border-radius:10px; background:#fff; color:#1d2b40; font-size:12px; font-weight:750; }
.portal-summary { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; margin:14px 0; }
.portal-summary article { min-width:0; padding:17px 18px; border:1px solid #e1e8f1; border-radius:15px; background:#fff; box-shadow:0 5px 18px rgba(33,62,105,.04); }
.portal-summary small,.portal-summary span { display:block; color:#667891; font-size:11px; line-height:1.45; }
.portal-summary b { display:block; margin:6px 0 4px; color:#1d2b40; font-size:clamp(18px,2.7vw,25px); overflow-wrap:anywhere; }
.portal-summary .is-overdue { border-left:4px solid #df4652; }
.portal-summary .is-overdue b { color:#bd3440; }
.portal-summary .is-paid { border-left:4px solid #168667; }
.portal-summary .is-paid b { color:#168667; }
.portal-actions { display:flex; align-items:center; justify-content:space-between; gap:14px; margin:15px 0; padding:13px 16px; border:1px solid #e1e8f1; border-radius:14px; background:#fff; }
.portal-actions p { margin:0; color:#667891; font-size:12px; }
.portal-pay-link { display:inline-flex; align-items:center; justify-content:center; min-height:40px; padding:0 14px; border-radius:10px; background:#2468d5; color:#fff; text-decoration:none; font-size:12px; font-weight:800; white-space:nowrap; }
.portal-pay-link:hover { background:#1955b8; }
.portal-tabs { display:flex; gap:5px; overflow:auto; margin:18px 0 12px; padding:5px; border:1px solid #dce5f2; border-radius:13px; background:#fff; scrollbar-width:thin; }
.portal-tabs a { display:inline-flex; align-items:center; justify-content:center; min-height:39px; padding:0 14px; border-radius:9px; color:#526681; text-decoration:none; font-size:12px; font-weight:750; white-space:nowrap; }
.portal-tabs a:hover { background:#f6f9fd; color:#1955b8; }
.portal-tabs a.is-active { background:#eaf2ff; color:#1955b8; }
.portal-list-panel { padding:19px; border:1px solid #dce5f2; border-radius:16px; background:#fff; box-shadow:0 7px 22px rgba(33,62,105,.045); }
.portal-list-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; margin-bottom:14px; }
.portal-list-heading h2 { margin:0; font-size:19px; letter-spacing:-.3px; }
.portal-list-heading p { margin:5px 0 0; color:#667891; font-size:12px; line-height:1.5; }
.portal-list-count { flex:0 0 auto; padding:7px 10px; border-radius:999px; background:#edf4ff; color:#3159a6; font-size:10px; font-weight:800; }
.portal-record-list { display:grid; gap:9px; }
.portal-record { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; gap:12px; padding:14px; border:1px solid #e3eaf3; border-radius:13px; background:#fff; }
.portal-record-main { min-width:0; }
.portal-record-main strong { display:block; color:#1d2b40; font-size:13px; }
.portal-record-main small { display:block; margin-top:4px; color:#667891; font-size:11px; line-height:1.5; }
.portal-record-values { display:flex; flex-wrap:wrap; gap:7px 15px; margin-top:8px; color:#526681; font-size:11px; }
.portal-record-values b { color:#30445f; }
.portal-record-side { display:grid; justify-items:end; gap:8px; }
.portal-status { display:inline-flex; align-items:center; min-height:24px; padding:0 9px; border-radius:999px; background:#fff4df; color:#956316; font-size:9px; font-weight:850; white-space:nowrap; }
.portal-status.is-paid,.portal-status.is-approved { background:#e8f7f1; color:#147255; }
.portal-status.is-pending { background:#fff4df; color:#956316; }
.portal-status.is-rejected { background:#fff0ed; color:#a43e32; }
.portal-status.is-overdue { background:#fde8e3; color:#a33b2e; }
.portal-receipt-link { display:inline-flex; align-items:center; justify-content:center; min-height:35px; padding:0 10px; border:1px solid #cfe0f7; border-radius:9px; background:#f7faff; color:#1955b8; text-decoration:none; font-size:10px; font-weight:800; white-space:nowrap; }
.portal-receipt-link:hover { background:#eaf2ff; }
.portal-empty { padding:25px 15px; border:1px dashed #d3deeb; border-radius:13px; background:#f9fbfe; color:#667891; text-align:center; font-size:12px; line-height:1.6; }
.portal-empty b { display:block; margin-bottom:5px; color:#30445f; font-size:13px; }
.portal-footnote { margin:13px 2px 0; color:#7a8799; font-size:10px; line-height:1.6; }
.portal-inline-link { color:#2468d5; font-weight:750; }
.portal-notices { margin-top:14px; }
.portal-notice-list { display:grid; gap:8px; }
.portal-notice-list article { display:flex; align-items:flex-start; gap:10px; padding:12px; border:1px solid #e3eaf3; border-radius:12px; }
.portal-notice-list article>span { flex:0 0 auto; padding:4px 7px; border-radius:999px; background:#edf4ff; color:#3159a6; font-size:8px; font-weight:850; }
.portal-notice-list b,.portal-notice-list small { display:block; }
.portal-notice-list b { font-size:12px; }
.portal-notice-list small { margin-top:3px; color:#71829a; font-size:10px; }
.portal-notice-list p { margin:6px 0 0; color:#526681; font-size:11px; line-height:1.5; }
.portal-change-wrap { width:min(100% - 32px,500px); margin:8vh auto; }
.portal-change-card { padding:clamp(22px,5vw,34px); border:1px solid #dce5f2; border-radius:20px; background:#fff; box-shadow:var(--shadow); }
.portal-change-card h1 { margin:4px 0 7px; font-size:26px; }
.portal-change-card>p { color:#667891; font-size:13px; line-height:1.6; }
.portal-change-form { display:grid; gap:9px; }
.portal-change-form label { margin-top:7px; color:#30445f; font-size:12px; font-weight:800; }
.portal-change-form input { min-height:47px; padding:11px 13px; border:1px solid #d4dfed; border-radius:10px; font:inherit; }
.portal-change-form button { min-height:47px; margin-top:10px; border:0; border-radius:10px; background:#2468d5; color:#fff; font:inherit; font-weight:800; cursor:pointer; }
.portal-receipt-page { min-height:100vh; padding:26px 14px; background:#eef3fa; }
.portal-receipt-card { width:min(100%,760px); margin:0 auto; padding:clamp(22px,5vw,50px); border:1px solid #dce5f2; border-radius:18px; background:#fff; box-shadow:0 16px 42px rgba(33,62,105,.08); }
.portal-receipt-actions { display:flex; justify-content:space-between; gap:12px; margin-bottom:24px; }
.portal-receipt-actions a,.portal-receipt-actions button { min-height:38px; padding:0 12px; border:1px solid #d4dfed; border-radius:9px; background:#fff; color:#3159a6; font:inherit; font-size:11px; font-weight:800; text-decoration:none; cursor:pointer; }
.portal-receipt-brand { display:flex; align-items:center; gap:12px; padding:18px; border-radius:13px; background:#eff5ff; }
.portal-receipt-brand img { width:48px; height:48px; border-radius:12px; object-fit:cover; }
.portal-receipt-brand b,.portal-receipt-brand small { display:block; }
.portal-receipt-brand small { margin-top:3px; color:#667891; font-size:11px; }
.portal-receipt-card h1 { margin:24px 0 4px; font-size:25px; }
.portal-receipt-number { margin:0 0 20px; color:#667891; font-size:12px; }
.portal-receipt-grid { display:grid; grid-template-columns:1fr 1fr; border-top:1px solid #e3eaf3; }
.portal-receipt-grid div { padding:12px 0; border-bottom:1px solid #e3eaf3; }
.portal-receipt-grid small,.portal-receipt-grid strong { display:block; }
.portal-receipt-grid small { color:#71829a; font-size:10px; }
.portal-receipt-grid strong { margin-top:4px; color:#1d2b40; font-size:13px; }
.portal-receipt-total { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:19px; padding:17px; border-radius:12px; background:#eaf7f2; color:#147255; }
.portal-receipt-total span { font-size:11px; font-weight:800; }
.portal-receipt-total b { font-size:22px; }
.portal-receipt-thanks { margin:21px 0 0; color:#667891; font-size:11px; line-height:1.6; text-align:center; }
.portal-not-linked { margin:15px 0 0; padding:14px; border:1px solid #f1ddb1; border-radius:12px; background:#fff9e9; color:#775313; font-size:12px; line-height:1.55; }

@media (max-width:760px) {
  .portal-shell { width:calc(100% - 28px); margin:14px auto 30px; }
  .portal-welcome { display:grid; align-items:start; gap:17px; padding:19px; border-radius:16px; }
  .portal-child-filter { min-width:0; }
  .portal-summary { grid-template-columns:1fr; gap:8px; }
  .portal-summary article { padding:13px 15px; }
  .portal-summary b { margin:4px 0 2px; font-size:20px; }
  .portal-actions { align-items:stretch; flex-direction:column; }
  .portal-pay-link { width:100%; }
  .portal-list-panel { padding:14px; }
  .portal-list-heading h2 { font-size:17px; }
  .portal-record { grid-template-columns:minmax(0,1fr); align-items:start; gap:10px; padding:12px; }
  .portal-record-side { display:flex; justify-content:space-between; align-items:center; }
}
@media (max-width:420px) {
  .portal-page .topbar__inner { width:calc(100% - 22px); gap:6px; }
  .portal-page .brand { gap:6px; }
  .portal-page .brand img { width:34px; height:34px; }
  .portal-page .brand__copy strong { font-size:11px; }
  .portal-page .brand__copy small { font-size:8px; }
  .portal-user-name { display:none; }
  .portal-security-link { display:none; }
  .portal-logout { min-height:34px; padding:0 9px; font-size:10px; }
  .portal-tabs a { padding:0 10px; font-size:11px; }
  .portal-list-count { font-size:9px; }
}
@media print {
  body.portal-receipt-page { padding:0; background:#fff; }
  .portal-receipt-card { width:100%; border:0; border-radius:0; box-shadow:none; }
  .portal-receipt-actions { display:none; }
}

.password-field{display:flex;align-items:stretch;gap:5px;width:100%;min-width:0}
.password-field>input{flex:1 1 auto;width:1%;min-width:0}
.password-field>[data-password-toggle]{flex:0 0 auto;min-height:40px;padding:0 10px;border:1px solid #cbd8e8;border-radius:8px;background:#fff;color:#1768d1;font:inherit;font-size:11px;font-weight:850;cursor:pointer}
.password-field>[data-password-toggle]:hover{background:#eef5ff;border-color:#9bbce9}
.portal-login-form .password-field{min-height:48px;border:1px solid #ccd8e8;border-radius:11px;background:#fbfcfe}
.portal-login-form .password-field:focus-within{outline:3px solid rgba(23,104,209,.15);border-color:#1768d1}
.portal-login-form .password-field>input{min-height:46px;padding:11px 14px;border:0;background:transparent;outline:0;box-shadow:none}
.portal-login-form .password-field>[data-password-toggle]{margin:5px;min-height:36px;border:0;background:transparent}
.portal-login-form .password-field>[data-password-toggle]:hover{background:#eef5ff}
.portal-reset-notice{margin:0 0 15px;padding:11px 13px;border:1px solid #c8e7da;border-radius:10px;background:#eefaf4;color:#176548;font-size:12px;line-height:1.55}
.portal-reset-request{margin-top:15px;padding:12px 14px;border:1px solid #dce5f2;border-radius:11px;background:#f8faff}
.portal-reset-request summary{color:#1768d1;font-size:12px;font-weight:850;cursor:pointer}
.portal-reset-request>p{margin:9px 0;color:#667085;font-size:11px;line-height:1.55}
.portal-reset-request form{display:grid;gap:7px}
.portal-reset-request label{margin-top:3px;color:#29364d;font-size:11px;font-weight:800}
.portal-reset-request input:not([type=hidden]){width:100%;min-height:42px;padding:10px 12px;border:1px solid #ccd8e8;border-radius:9px;background:#fff;color:#172033;font:inherit;font-size:13px}
.portal-reset-request form button{display:flex;align-items:center;justify-content:center;min-height:42px;margin-top:6px;padding:0 13px;border:1px solid #1768d1;border-radius:9px;background:#fff;color:#1768d1;font-size:12px;font-weight:850;cursor:pointer}
.portal-reset-request form button:hover{background:#eef5ff}
.portal-reset-trap{position:absolute!important;left:-10000px!important;width:1px!important;height:1px!important;overflow:hidden!important}
.portal-change-form .password-field{margin-bottom:12px}
.portal-change-form .password-field>input{width:1%;min-height:46px;padding:11px 12px;border:1px solid #ccd8e8;border-radius:9px;background:#fff;font:inherit}
.portal-change-form .password-field>[data-password-toggle]{min-height:42px}