/* Existing portal forms and payment instructions. */
.fg{margin-bottom:12px}
.fg label{display:block;font-size:12px;font-weight:600;color:var(--text2);margin-bottom:6px}
.fg input,.fg select,.fg textarea{width:100%;padding:11px 12px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg2);color:var(--text);font:inherit}
.fg textarea{min-height:90px;resize:vertical}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:11px 16px;border-radius:var(--r-sm);border:none;font:inherit;font-weight:600;cursor:pointer;transition:opacity .15s}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-p{background:var(--accent);color:#fff;width:100%}
.btn-g{background:var(--bg3);color:var(--text2);border:1px solid var(--border)}
.btn-s{padding:8px 12px;font-size:12px}
.tabs{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap}
.tab{flex:1;min-width:90px;padding:9px 8px;border-radius:var(--r-sm);border:1px solid var(--border);background:var(--bg2);color:var(--text2);font-size:11px;font-weight:600;text-align:center;cursor:pointer}
.tab.on{background:var(--abg);border-color:var(--accent);color:var(--accent2)}
.badge{display:inline-flex;align-items:center;gap:5px;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.bg{background:var(--gbg);color:var(--green)}
.br{background:var(--rbg);color:var(--red)}
.by{background:var(--ybg);color:var(--yellow)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-bottom:1px solid var(--border);font-size:13px}
.kv:last-child{border:none}
.kv span:first-child{color:var(--text3)}
.kv span:last-child{text-align:right;font-weight:500}
.nav{position:sticky;bottom:0;background:var(--surface);border-top:1px solid var(--border);display:flex;padding:8px 6px calc(8px + env(safe-area-inset-bottom))}
.nav button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:8px 4px;border:none;background:none;color:var(--text3);font-size:10px;font-weight:600;cursor:pointer}
.nav button i{font-size:20px}
.nav button.on{color:var(--accent2)}
.toast{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);padding:10px 16px;border-radius:var(--r-sm);font-size:13px;font-weight:500;z-index:99;max-width:90%;text-align:center;display:none}
.toast.ok{background:#166534;color:#fff}
.toast.err{background:#991b1b;color:#fff}
.inv{padding:12px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:8px}
.inv-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:6px}
.inv-amt{font-size:16px;font-weight:700}
.empty{text-align:center;padding:30px 10px;color:var(--text3);font-size:13px}
.qr-wrap{text-align:center;padding:12px}
.qr-wrap img{max-width:220px;border-radius:8px}
#login-screen,#app-screen{display:none}
#login-screen.active,#app-screen.active{display:block}
.user-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.user-bar .name{font-weight:600;font-size:14px}
.otp-hint{font-size:12px;color:var(--text3);margin-top:8px;text-align:center}
.step2{display:none}
.step2.show{display:block}
.site-footer{text-align:center;padding:14px 16px calc(14px + env(safe-area-inset-bottom));font-size:11px;color:var(--text3);line-height:1.55;border-top:1px solid var(--border);margin-top:auto;flex-shrink:0;background:var(--bg)}
.site-footer a{color:var(--accent2);text-decoration:none}
.site-footer strong{color:var(--text2);font-weight:600}
.pkg-opt{padding:12px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:8px;cursor:pointer;transition:border-color .15s}
.pkg-opt.on{border-color:var(--accent);background:var(--abg)}
.pay-ch{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--border);border-radius:var(--r-sm);margin-bottom:8px;cursor:pointer;transition:border-color .15s,background .15s}
.pay-ch.on{border-color:var(--accent);background:var(--abg)}
.pay-ch-icon{width:38px;height:38px;border-radius:8px;background:var(--bg3);display:flex;align-items:center;justify-content:center;color:var(--accent2);flex-shrink:0;font-size:18px}
.pay-ch-meta{flex:1;min-width:0}
.pay-ch-name{font-size:13px;font-weight:600}
.pay-ch-code{font-size:11px;color:var(--text3)}
.step-hint{font-size:12px;color:var(--text3);margin-bottom:10px;line-height:1.5}
.pay-guide{display:grid;gap:12px}
.pay-guide-hero{display:flex;gap:12px;align-items:flex-start;padding:12px;border:1px solid var(--border);border-radius:var(--r-sm);background:linear-gradient(135deg,var(--abg),rgba(34,197,94,.08))}
.pay-guide-hero i{width:38px;height:38px;border-radius:12px;background:var(--accent);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0}
.pay-guide-hero b{display:block;font-size:14px;margin-bottom:3px}
.pay-guide-hero span{display:block;font-size:12px;color:var(--text2);line-height:1.55}
.pay-guide-steps{display:grid;gap:9px}
.pay-guide-step{display:flex;gap:10px;align-items:flex-start;padding:11px;border:1px solid var(--border);border-radius:var(--r-sm);background:var(--bg2)}
.pay-guide-num{width:28px;height:28px;border-radius:999px;background:var(--abg);color:var(--accent2);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;flex-shrink:0}
.pay-guide-step b{display:block;font-size:13px;margin-bottom:2px}
.pay-guide-step span{display:block;font-size:12px;color:var(--text3);line-height:1.5}
.pay-guide-help{display:flex;gap:10px;align-items:flex-start;padding:11px;border:1px dashed rgba(245,158,11,.35);border-radius:var(--r-sm);background:var(--ybg);color:var(--text2);font-size:12px;line-height:1.5}
.pay-guide-help i{color:var(--yellow);font-size:18px;margin-top:1px}
.pay-result-guide{margin-top:12px}
.info-box{padding:12px;border-radius:var(--r-sm);background:var(--bg2);border:1px solid var(--border);font-size:12px;color:var(--text2);line-height:1.55}
.signal-ok{color:var(--green)}
.signal-warn{color:var(--yellow)}
.signal-bad{color:var(--red)}
.pkg-opt .pkg-name{font-weight:600;font-size:14px}
.pkg-opt .pkg-meta{font-size:11px;color:var(--text3);margin-top:4px}
.bank-box{padding:10px 12px;border:1px dashed var(--border);border-radius:var(--r-sm);margin-bottom:8px;font-size:13px}
.bank-box b{display:block;color:var(--accent2);margin-bottom:4px}
.pay-tabs .tab{min-width:120px}
.step-hint{font-size:12px;color:var(--text3);margin-bottom:12px}

/* Live portal widgets using the approved store palette. */
:root {
  --bg: #fffdf8;
  --bg2: #f7f4ee;
  --bg3: #f0ebe2;
  --surface: #fffefb;
  --border: #e6e1d8;
  --text: #263b50;
  --text2: #536278;
  --text3: #5f6d83;
  --accent: #7350f5;
  --accent2: #6040cf;
  --abg: #efe8ff;
  --green: #00795d;
  --gbg: #dcf5ed;
  --red: #bb3547;
  --rbg: #ffe9ed;
  --yellow: #965811;
  --ybg: #fff0d2;
  --r: 26px;
  --r-sm: 12px;
}
.ti,.ti:before {
  font-family: tabler-icons !important;
  font-style: normal;
  font-weight: 400;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  display: inline-block;
  vertical-align: middle;
  -webkit-font-smoothing: antialiased;
}
.wrap { min-height: 100dvh; display: flex; flex-direction: column; }
#login-screen,#app-screen { display: none; }
#login-screen.active,#app-screen.active { display: block; flex: 1; }
#login-screen { isolation: isolate; }
.portal-main { isolation: isolate; }
button,a { touch-action: manipulation; }
a { color: var(--accent2); }
.company-logo {
  width: 80px;
  height: 60px;
  flex: 0 0 80px;
  border-radius: 13px;
  background: #15192e;
  padding: 7px;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
}
.company-logo-img { display: block; width: 100%; height: 100%; object-fit: contain; }
.company-logo-fallback { color: #fff; display: flex; align-items: center; gap: 6px; }
.brand-lockup { display: flex; align-items: center; gap: 13px; }
.company-brand-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.company-brand-text strong { font-size: 16px; font-weight: 600; }
.brand-sub { font-size: 8px; letter-spacing: .6px; line-height: 1.7; white-space: normal; max-width: 170px; }
.header-inner { gap: 30px; }
.brand { white-space: normal; flex-shrink: 0; }
.account-button { min-width: 0; }
.account-name { max-width: 170px; text-overflow: ellipsis; overflow: hidden; }
.card { padding: 26px; border: 1px solid var(--border); border-radius: var(--r); background: var(--surface); margin-bottom: 20px; min-width: 0; }
.card h2 { font-size: 18px; font-weight: 600; margin: 0 0 18px; color: var(--ink); letter-spacing: -.035em; }
.card .empty { padding: 24px 5px; }
.btn { border-radius: 999px; min-height: 44px; font-size: 12px; transition: background .18s, box-shadow .18s; }
.btn-p { background: var(--ink); color: #fff; }
.btn-p:hover { background: #292d45; }
.btn-g { background: #fffdfae6; color: var(--ink); border: 1px solid #d8d2c7; }
.btn-g:hover { background: #fff; border-color: #b9a6e3; }
.btn-s { font-size: 11px; }
.badge { font-size: 10px; padding: 4px 9px; border-radius: 7px; white-space: nowrap; }
.kv { padding: 12px 0; font-size: 12px; align-items: flex-start; }
.kv>span { min-width: 0; overflow-wrap: anywhere; }
.kv>span:last-child { max-width: 65%; }
.fg label { font-size: 11px; font-weight: 500; }
.fg input,.fg select,.fg textarea { background: #fffdf9; border-color: #e2ddd3; padding: 13px; min-height: 46px; font-size: 12px; }
.fg textarea { min-height: 128px; }
.fg input[type=file] { max-width: 100%; }
.tabs { gap: 8px; }
.tab { min-height: 44px; font-size: 11px; background: #f5f1e9; border-color: transparent; color: var(--text2); }
.tab.on { color: var(--accent2); background: var(--abg); border-color: #dacaf8; }
.empty { color: var(--muted); font-size: 12px; line-height: 1.8; }
.toast { padding: 12px 18px; border-radius: 16px; font-size: 12px; max-width: min(560px,calc(100% - 32px)); z-index: 99; }
.toast.ok { background: #15192e; }
.toast.err { background: #9e2f41; }
.summary-card h2 { overflow-wrap: anywhere; white-space: normal; }
.summary-card h2.expiry-title { font-size: 29px; }
.summary-card h2.amount-title { font-size: 31px; }
.summary-card .card-sub { overflow-wrap: anywhere; }
.summary-card .card-bottom { gap: 6px; }
.summary-card .status { white-space: normal; max-width: 65%; }
.summary-card .card-bottom .text-button { white-space: nowrap; font-size: 9px; }
.expiry-note strong { line-height: 1.6; }
.expiry-note span { line-height: 1.8; }
.due-caption { line-height: 1.7; }
.attention-dot { background: #c57600; box-shadow: 0 0 0 3px #c5760013; }
.customer-pill { max-width: 400px; flex-shrink: 0; }
.customer-pill>div { min-width: 0; }
.customer-pill strong,.customer-pill span { overflow-wrap: anywhere; }
.eyebrow { overflow-wrap: anywhere; }
.quick-card>span:last-child:not(.sr-only) { overflow-wrap: anywhere; }
.quick-card #d-home-wifi-current { font-size: 11px; line-height: 1.8; color: var(--muted); overflow-wrap: anywhere; }
.activity-body { min-width: 0; }
.activity-body strong,.activity-body>span { overflow-wrap: anywhere; line-height: 1.8; }
.activity-row:first-child { border-top: 0; }
.help-card { min-height: 250px; }
.help-card>svg { color: #b87a23; }
.service-tools { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 25px; }
.service-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.service-grid .card { margin: 0; }
#acct-wifi-card { grid-column: 2; grid-row: 1 / span 2; background: #dcf5ed; border-color: transparent; }
#acct-wifi-card .info-box { background: #fffdf9b3; }
#inv-list-view { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: start; }
.inv { padding: 17px; border-radius: 17px; margin-bottom: 12px; background: #fffdf9; }
.inv-top>div { min-width: 0; overflow-wrap: anywhere; }
.inv-amt { white-space: nowrap; font-size: 16px; }
#inv-checkout-view { max-width: 800px; margin-inline: auto; }
.pay-ch { border-radius: 16px; padding: 14px; background: #fffdf9; }
button.pay-ch { width: 100%; text-align: left; color: var(--text); }
.pay-ch-icon { background: #eee8ff; color: #7350f5; border-radius: 12px; }
.pay-guide-hero { background: #efe8ff; padding: 16px; border: 0; }
.pay-guide-hero i { background: var(--ink); }
.pay-guide-step { padding: 14px; background: #f7f4ee; border-color: transparent; }
.pay-guide-num { background: #eee8ff; }
.pay-guide-help { padding: 14px; }
.qr-wrap img,.qr-wrap svg { max-width: 100%; }
.bank-box { overflow-wrap: anywhere; }
.support-banner { display: flex; justify-content: space-between; gap: 20px; align-items: center; border-radius: 23px; padding: 23px 26px; margin-bottom: 25px; }
.support-banner strong { font-size: 16px; font-weight: 500; }
.support-banner p { font-size: 11px; color: #7b6b54; margin-top: 6px; }
#tk-tabs { max-width: 560px; }
#tk-panel-new { max-width: 750px; }
#upg-step-select,#upg-step-pay,#upg-step-confirm,#upg-step-gateway,#upg-step-done { max-width: 850px; margin-inline: auto; }
#upg-packages { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; margin-top: 23px; }
#upg-packages>.empty { grid-column: 1 / -1; }
.pkg-opt { min-height: 110px; padding: 20px; border-radius: 18px; margin: 0; background: #fffdf8; }
.pkg-opt .pkg-name { font-size: 16px; }
.pkg-opt .pkg-meta { line-height: 1.9; font-size: 11px; }
#page-account { max-width: 850px; margin-inline: auto; }
.m-card { background: var(--surface); padding: 26px; border: 1px solid var(--border); border-radius: var(--r); margin-bottom: 20px; }
.m-acct-head { display: flex; align-items: center; gap: 16px; margin-bottom: 18px; }
.m-acct-avatar { height: 54px; width: 54px; flex-shrink: 0; border-radius: 17px; background: #eee8ff; color: #7350f5; display: flex; align-items: center; justify-content: center; font-size: 27px; }
.m-acct-head h2 { font-size: 23px; overflow-wrap: anywhere; }
.m-acct-head p { color: var(--muted); font-size: 12px; margin-top: 5px; }
#page-speedtest { max-width: 850px; margin-inline: auto; }
.site-footer { padding: 0; margin-top: auto; font-size: 11px; text-align: left; border-top: 1px solid var(--line); background: var(--paper); }
.site-footer a { text-decoration: none; }
.wrap:has(#login-screen.active) .site-footer { padding-bottom: 0; }
.login-card-wrap { width: 100%; max-width: 500px; justify-self: end; }
.login-card { max-width: none; }
.login-card-head h2 { margin-top: 0; }
.login-card-head-sub { color: var(--muted); font-size: 11px; line-height: 1.9; }
.login-card .login-methods { flex-wrap: nowrap; border: 0; gap: 3px; }
.login-methods button { min-height: 39px; min-width: 0; font-size: 10px; }
.login-methods button.on { background: #fff; color: #6040cf; border: 0; box-shadow: 0 2px 6px #20223b09; }
.input-wrap { display: flex; align-items: center; border: 1px solid #e2ddd3; background: #fffdf9; border-radius: 12px; padding-left: 13px; }
.input-wrap:focus-within { outline: 3px solid #7350f5; outline-offset: 3px; }
.input-wrap input { border: 0; background: none; min-width: 0; flex: 1; width: 100%; }
.input-wrap input:focus-visible { outline: none; }
.input-icon { color: #738099; font-size: 17px; }
.input-toggle { border: 0; background: none; color: var(--muted); padding: 12px; min-width: 44px; min-height: 44px; }
.btn-login-main,.btn-login-wa { width: 100%; border-radius: 999px; padding: 13px 18px; border: 0; background: var(--ink); color: #fff; font-size: 12px; font-weight: 600; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 47px; }
.btn-login-main:hover { background: #292d45; }
.btn-login-wa { background: #fff; border: 1px solid #d8d2c7; color: var(--ink); font-size: 11px; }
.btn-login-wa i { color: #00795d; }
.login-row-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 14px 0 19px; font-size: 10px; }
.login-check { display: flex; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
.login-check input { accent-color: #7350f5; width: 15px; height: 15px; }
.login-link { color: #6040cf; text-decoration: none; }
.login-or { display: flex; align-items: center; gap: 12px; font-size: 9px; color: var(--muted); margin: 18px 0; }
.login-or:before,.login-or:after { content: ''; height: 1px; flex: 1; background: var(--line); }
.login-foot-note { font-size: 10px; color: var(--muted); text-align: center; margin-top: 18px; line-height: 1.8; }
.login-help .ti { color: #8970c8; font-size: 20px; }
.login-err-card { border: 1px solid #f2c7cf; background: #ffe9ed; color: #9e2f41; border-radius: 17px; padding: 18px; font-size: 12px; }
#wa-otp { text-align: center; font-size: 24px; letter-spacing: 7px; }
.otp-hint { color: var(--muted); font-size: 10px; line-height: 1.8; }
@media (max-width: 1100px) {
  .header-inner { gap: 20px; }
  .account-name { display: none; }
  .greeting-row { gap: 18px; }
  .customer-pill { max-width: 275px; padding: 16px; }
  .summary-card h2.expiry-title { font-size: 23px; }
  .summary-card h2.amount-title { font-size: 28px; }
  .company-brand-text strong { font-size: 14px; }
  .desktop-nav { gap: 22px; }
}
@media (max-width: 999px) {
  .desktop-nav { display: none; }
  .mobile-nav { position: fixed; z-index: 8; bottom: 0; left: 0; right: 0; background: #fffdf8f5; border-top: 1px solid var(--line); display: flex; padding: 8px 9px calc(9px + env(safe-area-inset-bottom)); backdrop-filter: blur(18px); }
  .mobile-nav button { flex: 1; min-width: 0; border: 0; background: transparent; padding: 7px 3px 3px; display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 9px; color: var(--muted); position: relative; }
  .mobile-nav .icon { width: 20px; height: 20px; }
  .mobile-nav button[aria-current=page] { color: #6040cf; }
  .mobile-nav button[aria-current=page]:before { content: ''; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: linear-gradient(90deg,#2f6fff,#b44bca); border-radius: 4px; }
  .site-footer { padding-bottom: 82px; }
  .toast { bottom: 98px; }
}
@media (max-width: 700px) {
  .header-inner { gap: 12px; height: 80px; }
  .company-logo { width: 70px; flex-basis: 70px; height: 54px; padding: 6px; border-radius: 11px; }
  .brand-lockup { gap: 10px; }
  .company-brand-text strong { font-size: 13px; }
  .brand-sub { font-size: 7px; max-width: 140px; margin-top: 4px; }
  .login-header-label { font-size: 8px; }
  .card,.m-card { padding: 21px; border-radius: 23px; }
  .card h2 { font-size: 17px; }
  .kv { font-size: 11px; gap: 12px; }
  .summary-card h2.expiry-title { font-size: 23px; }
  .summary-card h2.amount-title { font-size: 31px; }
  .summary-card .card-bottom { align-items: flex-start; }
  .summary-card .status { max-width: 100%; }
  .summary-card .card-bottom .text-button { font-size: 8px; }
  .summary-card.violet-card { min-height: 235px; }
  .customer-pill { display: none; }
  .quick-card #d-home-wifi-current { font-size: 10px; }
  .quick-card>strong { max-width: 100%; overflow-wrap: anywhere; }
  .help-card { min-height: 225px; }
  .service-grid,#inv-list-view { grid-template-columns: 1fr; gap: 19px; }
  #acct-wifi-card { grid-column: auto; grid-row: auto; }
  .inv-top { flex-wrap: wrap; }
  .inv-amt { font-size: 16px; }
  .inv { padding: 15px; }
  .support-banner { flex-direction: column; align-items: stretch; padding: 22px; }
  .support-banner strong { font-size: 14px; }
  .support-banner .button { font-size: 11px; }
  #upg-packages { grid-template-columns: 1fr; }
  .pkg-opt { min-height: 100px; }
  .m-acct-head h2 { font-size: 19px; }
  .m-acct-head p { font-size: 11px; }
  .login-card-wrap { max-width: none; }
  .login-methods button { font-size: 9px; }
  .login-layout { padding-top: 27px; gap: 25px; }
  body:has(#login-screen.active) .toast { bottom: 25px; }
  .site-footer { font-size: 9px; }
}
@media (max-width: 360px) {
  .company-brand-text strong { font-size: 11px; }
  .brand-sub { font-size: 6px; }
  .summary-card h2.expiry-title { font-size: 20px; }
  .quick-card #d-home-wifi-current { font-size: 9px; }
  .summary-card .card-bottom .text-button { font-size: 7px; }
  .login-methods button { font-size: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  *,*::before,*::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}