:root{--bg:#f4f7fd;--surface:#fff;--text:#192237;--muted:#6a778e;--blue:#2862ef;--soft:#eff4ff;--line:#e1e8f3}*{box-sizing:border-box}body{margin:0;background:radial-gradient(ellipse at top left,#dfe8ff,transparent 65%),var(--bg);color:var(--text);font:15px/1.5 Arial,sans-serif;min-height:100vh}body.dark{--bg:#111a2a;--surface:#1c2940;--text:#f0f5ff;--muted:#a9b8cf;--soft:#253754;--line:#34445d;background:var(--bg)}button,input,select{font:inherit}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{opacity:.5;cursor:wait}button,.button{border:1px solid var(--line);background:var(--surface);color:var(--text);padding:12px 18px;border-radius:14px;text-decoration:none}input,select{width:100%;min-width:0;padding:13px;border:1px solid var(--line);border-radius:12px;background:var(--surface);color:var(--text)}label{display:grid;gap:7px;color:var(--muted);font-size:13px}h1,h2,p{margin-top:0}h2{font-size:21px;font-weight:600}.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:20px max(20px,calc((100% - 1000px)/2));background:var(--surface)}.brand{display:flex;align-items:center;gap:12px;min-width:0}.brand-mark,.avatar{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:50%;background:var(--soft);color:var(--blue);font-weight:700}.brand-name{font-size:17px;font-weight:600;overflow-wrap:anywhere}.top-actions{display:flex;gap:8px;align-items:center}.icon-button{padding:10px;border:0;background:transparent}.icon-button svg,svg.icon{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}main{max-width:1000px;margin:auto;padding:32px 20px 128px}.card{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:26px;margin-bottom:18px;box-shadow:0 14px 40px #18356a06}.login{max-width:420px;margin:40px auto}.login label{margin:18px 0}.primary{background:var(--blue);border-color:var(--blue);color:white;font-weight:600}.login .primary,.hero .primary{width:100%;border-radius:18px;min-height:50px}.muted,p{color:var(--muted)}.muted{font-size:12px}.error{color:#c04452}.error:empty{display:none}.welcome{margin:8px 0 26px}.welcome h1{font-size:30px;font-weight:400;line-height:1.25;margin-bottom:9px}.welcome h1 span{color:var(--blue);font-weight:600}.welcome p{font-size:18px;margin-bottom:0}.hero{padding:30px}.hero-label{font-size:17px;color:var(--muted)}.hero strong{display:block;font-size:48px;letter-spacing:-2px;margin:8px 0 6px;line-height:1.2}.hero .primary{margin-top:16px}.summaries{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.summary{display:flex;align-items:center;gap:15px;padding:23px 18px;border-radius:24px;min-width:0}.summary span{display:block;color:var(--muted);font-size:13px}.summary strong{display:block;font-size:17px;font-weight:600;overflow-wrap:anywhere}.tile-icon{display:grid;place-items:center;width:52px;height:52px;border-radius:18px;flex:none;background:var(--soft);color:var(--blue)}.purple{background:#f3eaff;color:#9748d9}.metrics{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.metric{background:var(--soft);border-radius:16px;padding:17px}.metric span{display:block;font-size:12px;color:var(--muted)}.metric strong{font-size:23px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:13px}th,td{padding:12px 8px;border-bottom:1px solid var(--line);text-align:left}th{color:var(--muted);font-weight:500}.money{text-align:right;white-space:nowrap}.bottom-nav{position:fixed;bottom:14px;left:50%;transform:translateX(-50%);width:min(960px,calc(100% - 24px));display:grid;grid-template-columns:repeat(4,1fr);gap:5px;background:var(--surface);padding:9px;border:1px solid var(--line);border-radius:25px;box-shadow:0 8px 40px #18356a12;padding-bottom:max(9px,env(safe-area-inset-bottom));z-index:10}.bottom-nav button{border:0;display:grid;justify-items:center;gap:5px;padding:9px 5px;font-size:12px;font-weight:600;border-radius:19px}.bottom-nav button[aria-current=page]{background:var(--soft);color:var(--blue)}dl{display:grid;grid-template-columns:100px 1fr;gap:18px}dt{color:var(--muted)}dd{margin:0;overflow-wrap:anywhere}[hidden]{display:none!important}:focus-visible{outline:1px solid #6799ff;outline-offset:1px}@media(max-width:640px){.topbar{padding:16px}.brand-name{font-size:15px}main{padding:26px 16px 125px}.welcome h1{font-size:26px}.welcome p{font-size:16px}.hero{padding:25px}.hero strong{font-size:40px}.summaries{grid-template-columns:1fr;gap:0}.summary{padding:19px 21px;margin-bottom:12px}.summary strong{font-size:19px}.summary span{font-size:14px}.card{border-radius:24px}.tile-icon{width:56px;height:56px}.metric{padding:12px}.metric strong{font-size:19px}th,td{font-size:12px;padding:10px 6px}}
.login{max-width:440px;margin:28px auto 0;padding:32px;border-radius:28px;box-shadow:0 24px 70px #2347830a}.login-emblem{width:60px;height:60px;margin:0 auto 20px;display:grid;place-items:center;background:var(--soft);color:var(--blue);border-radius:20px}.login-emblem svg{width:28px;height:28px}.login-heading{text-align:center;margin-bottom:27px}.login-eyebrow{font-size:10px;letter-spacing:1.5px;color:var(--blue);font-weight:600}.login-heading h2{font-size:28px;letter-spacing:-.6px;margin:9px 0 8px;font-weight:600}.login-heading p{font-size:13px;margin:0}.login label{margin:18px 0 8px;font-size:13px;color:var(--text)}.login input{height:49px;font-size:16px;background:var(--bg)}.login input::placeholder{font-size:13px;color:var(--muted)}.field-hint{font-size:11px;margin:7px 0 0;color:var(--muted)}.password-field{position:relative}.password-field input{padding-right:66px}.password-field button{position:absolute;right:4px;top:4px;padding:0 11px;min-height:41px;border:0;background:transparent;color:var(--blue);font-size:12px}.login .primary{margin-top:25px;border-radius:99px;min-height:49px}.login .error{font-size:13px;margin:12px 0 0}.login-help{text-align:center;font-size:12px;margin:24px 0 18px;line-height:1.7;color:var(--text)}.login-help span{color:var(--muted);font-size:11px}.login-back{display:block;text-align:center;color:var(--blue);font-size:12px;text-decoration:none}.login-back:hover{text-decoration:underline}@media(max-width:480px){.login{margin:8px auto 0;padding:26px 22px}.login-heading h2{font-size:26px}.login-emblem{margin-bottom:16px}}
.hero{position:relative;overflow:hidden}.hero strong,.hero .hero-label{position:relative;z-index:1}.hero .bill-watermark{position:absolute;right:35px;top:40px;width:70px;height:70px;stroke:var(--line);stroke-width:1.5;pointer-events:none}.hero .billing-link{display:block;margin:14px auto 0;padding:5px;border:0;background:transparent;color:var(--blue);font-size:12px}.hero .primary{font-size:17px;min-height:57px;border-radius:19px}dialog{width:min(520px,calc(100% - 28px));max-height:calc(100dvh - 40px);overflow:auto;border:1px solid var(--line);border-radius:25px;padding:26px;background:var(--surface);color:var(--text)}dialog::backdrop{background:#101b32a6;backdrop-filter:none;-webkit-backdrop-filter:none}.payment-head{display:flex;justify-content:space-between;gap:16px;align-items:start}.payment-head h2{margin:0 0 5px}.payment-head button{border:0;padding:0 10px;font-size:25px}.payment-note{font-size:13px;line-height:1.7}.payment-account{border:1px solid var(--line);border-radius:18px;padding:18px;margin:16px 0;background:var(--soft)}.payment-account h3{font-size:16px;margin:0 0 15px}.payment-account dl{font-size:13px;grid-template-columns:100px 1fr;gap:12px}.payment-account img{display:block;max-width:220px;width:100%;height:auto;margin:20px auto 0;border-radius:10px}@media(max-width:480px){dialog{padding:20px}.hero .bill-watermark{width:52px;height:52px;right:22px;top:35px}.hero .primary{min-height:52px}}
#paymentDialog{padding:12px;overflow:hidden;max-height:calc(var(--payment-viewport-height,100dvh) - 24px)}
#paymentDialog .payment-scroll{max-height:calc(var(--payment-viewport-height,100dvh) - 66px);overflow-y:auto;overflow-x:hidden;padding:14px;border-radius:14px;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:var(--muted) transparent}
#paymentDialog .payment-scroll::-webkit-scrollbar{width:6px}
#paymentDialog .payment-scroll::-webkit-scrollbar-track{background:transparent}
#paymentDialog .payment-scroll::-webkit-scrollbar-thumb{background:var(--muted);border-radius:999px}
/* All portal fields, including login, must remain readable on mobile focus. */
/* Start dialog focus on its title, not the close button. Keep keyboard button outlines. */
#paymentTitle:focus{outline:none}
#closePayment{appearance:none;-webkit-appearance:none;background:transparent;border:0;box-shadow:none}
#closePayment:focus:not(:focus-visible){outline:none}
body input,body select,body textarea{font-size:16px;line-height:1.4;max-width:100%}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html:not(.portal-keyboard-focus) :focus{outline:none}
html.portal-keyboard-focus :focus-visible{outline:1px solid #8793a5;outline-offset:1px}
/* Keep mobile form text readable without triggering focus zoom. Preserve pinch zoom. */
#paymentDialog input,#paymentDialog select,#paymentDialog textarea{font-size:16px;line-height:1.4;max-width:100%}
@media(max-width:480px){#paymentDialog{padding:10px}#paymentDialog .payment-scroll{padding:10px;max-height:calc(var(--payment-viewport-height,100dvh) - 62px)}}