/* Reference: user-supplied blue/white personal center, scoped to /profile. */
body.is-profile{background:#f4f9ff;color:#0c245b}
body.is-profile .app{background:linear-gradient(135deg,#e1efff 0%,#f8fbff 48%,#f4f9ff 100%);padding-bottom:calc(76px + env(safe-area-inset-bottom))}
body.is-profile .app:before{top:-20px;right:10px;opacity:.22}
.profile-page{padding:13px 15px 17px;position:relative}
.profile-heading{display:grid;grid-template-columns:32px minmax(0,1fr) 32px;align-items:center;gap:8px;min-height:43px}
.profile-heading h1{margin:0;font-size:18px;font-weight:800;line-height:1.5;text-align:center;color:#082454}
.profile-line-icon{width:21px;height:21px;object-fit:contain;flex:none}
.profile-heading>a,.profile-heading>button{display:grid;place-items:center;width:32px;height:32px;padding:4px;border:0;border-radius:8px;background:none;cursor:pointer}
.profile-heading .profile-line-icon{width:22px;height:22px;filter:brightness(.65) sepia(.8) saturate(4) hue-rotate(174deg)}
.profile-back-icon{transform:rotate(180deg)}
.profile-detail-heading{margin-bottom:12px}
.extra-page .profile-detail-heading h1{margin:0;font-size:18px}
.security-logout{display:block;width:100%;min-height:44px;margin-top:16px;padding:10px 16px;border:1px solid #d7e6fb;border-radius:12px;background:#fff;color:#3278c8;font-size:14px;cursor:pointer}
.profile-page .profile-card{display:flex;align-items:center;gap:12px;min-height:76px;margin:19px 0 15px;padding:0 2px;border:0;background:none;box-shadow:none;position:relative}
.profile-page .profile-mascot{flex:none;width:74px;height:74px;padding:0;display:grid;place-items:center;border:0;border-radius:50%;background:#e1efff;overflow:hidden;position:relative}
.profile-page .profile-mascot img{width:64px;height:74px;max-width:100%;object-fit:contain;position:static;top:auto}
.profile-page .profile-mascot.has-custom img{width:74px;height:74px;object-fit:cover}
.profile-page .avatar-edit{position:absolute;bottom:0;left:0;right:0;padding:3px 0;background:#123e6bba;color:#fff;font-size:8px;opacity:0}
.profile-page .profile-mascot:focus-visible .avatar-edit,.profile-page .profile-mascot:hover .avatar-edit{opacity:1}
.profile-page .profile-details{flex:1;min-width:0;padding-right:6px}
.profile-member-row{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.profile-member-row>strong{font-size:18px;line-height:1.4;font-weight:800;color:#0d285c}
.profile-member-row>span{padding:2px 6px;border-radius:20px;font-size:10px;line-height:1.4;font-weight:700;color:#71819e;background:#e6edf6;white-space:nowrap}
.profile-member-row>span.is-active{color:#08a743;background:#b9f0cd}
.profile-page .profile-details p{margin:5px 0 0;color:#7088b3;font-size:12px;line-height:1.5}
.profile-page .profile-account{max-width:calc(100% - 37px);overflow-wrap:anywhere}
.profile-page .profile-details #profileEmail{font-size:12px;color:#7088b3;font-weight:500}
.profile-page .profile-id{display:flex;align-items:center;gap:4px}
.profile-page #copyUid{display:grid;place-items:center;width:27px;height:24px;padding:3px;border:0;background:transparent}
.profile-page #copyUid img{width:14px;height:14px;opacity:.5}
.profile-wordmark{position:absolute;width:75px;height:38px;object-fit:contain;right:2px;top:0;pointer-events:none}
.profile-account-link{position:absolute;bottom:14px;right:-2px;padding:4px;opacity:.45}
.profile-account-link img{width:16px;height:16px}
.profile-page .profile-membership-banner{margin:0;min-height:74px;border-radius:12px;background:#258bff url('/mobile/assets/profile-membership.webp') center/100% 100% no-repeat;display:flex;align-items:center;padding:13px 18px 13px 62px;gap:10px;color:white;box-shadow:0 8px 18px #2b8ff414;overflow:hidden}
.profile-page .recharge-copy{min-width:0;flex:1}
.profile-page .recharge-copy strong{display:block;font-size:18px;font-weight:800;line-height:1.4;letter-spacing:0;color:white}
.profile-page .recharge-copy small{display:block;margin-top:2px;font-size:10px;line-height:1.5;color:#e7f6ff;white-space:normal}
.profile-benefits{display:flex;align-items:center;justify-content:center;gap:2px;flex:none;border-radius:22px;background:#eef7ffeb;color:#247eff;padding:9px 10px;font-size:12px;font-weight:750;white-space:nowrap}
.profile-benefits img{width:13px;height:13px;filter:invert(.47) sepia(1) saturate(5) hue-rotate(177deg)}
.profile-page .quick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:11px 0 0;padding:11px 0 17px;border:1px solid #e2edff;border-radius:15px;background:#ffffffde;box-shadow:0 8px 22px #3576ca06;min-height:98px}
.profile-page .quick-grid a{display:flex;align-items:center;justify-content:flex-start;gap:0;padding:0 3px;min-height:0;min-width:0;border:0;border-radius:0;background:none;box-shadow:none}
.profile-page .quick-grid a:hover{transform:none;background:#f7fbff}
.profile-page .quick-grid a>img{width:40px;height:40px;object-fit:contain}
.profile-page .quick-grid strong{font-size:12px;font-weight:500;line-height:1.4;margin-top:7px;color:#142153;white-space:nowrap}
.profile-usage{margin-top:11px;padding:13px;border:1px solid #e2edff;border-radius:15px;background:#ffffffde;box-shadow:0 8px 22px #3576ca06}
.profile-section-heading{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:15px}
.profile-section-heading h2{display:flex;align-items:center;gap:6px;margin:0;font-size:16px;font-weight:800;line-height:1.5}
.profile-section-heading h2 img{width:19px;height:19px;filter:invert(.45) sepia(1) saturate(5) hue-rotate(177deg)}
.profile-section-heading>span{display:flex;align-items:center;gap:7px;color:#7e93b7;font-size:12px}
.profile-section-heading>span img{width:16px;height:16px;opacity:.4}
.profile-usage-metrics{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.75fr) minmax(0,1.05fr) minmax(0,1.5fr);border-radius:10px;background:#f4f9ff;overflow:hidden}
.profile-usage-metrics>div{min-width:0;padding:12px 10px 17px;border-right:1px solid #dfebff}
.profile-usage-metrics>div:last-child{border-right:0}
.profile-usage-metrics span{display:block;color:#7389b4;font-size:11px;line-height:1.4;white-space:nowrap}
.profile-usage-metrics strong{display:block;margin-top:7px;color:#0e285e;font-size:14px;font-weight:800;line-height:1.45;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.profile-usage-status{margin:7px 0 0;color:#7489ac;font-size:10px;line-height:1.5}
.profile-usage-status:empty{display:none}
.profile-menu{margin-top:11px;padding:4px 13px;border:1px solid #e2edff;border-radius:15px;background:#ffffffde;box-shadow:0 8px 22px #3576ca06}
.profile-menu>a,.profile-menu>button,.profile-help>summary{display:flex;align-items:center;gap:18px;min-height:40px;width:100%;padding:8px 2px;border:0;border-bottom:1px solid #e3edff;background:none;color:#122154;text-align:left;font-size:14px;font-weight:500;cursor:pointer}
.profile-menu>button{border-bottom:0}
.profile-menu .profile-line-icon{width:22px;height:22px;opacity:.62;filter:invert(.24) sepia(.4) saturate(2) hue-rotate(173deg)}
.profile-menu .is-blue{opacity:1;filter:invert(.4) sepia(1) saturate(5) hue-rotate(177deg)}
.profile-menu .profile-chevron{width:17px;height:17px;margin-left:auto;opacity:.37}
.profile-menu small{margin-left:auto;color:#8094b7;font-size:12px;white-space:nowrap}
.profile-menu small+.profile-chevron{margin-left:-10px}
.profile-help>summary{list-style:none}
.profile-help>summary::-webkit-details-marker{display:none}
.profile-help[open] .profile-chevron{transform:rotate(90deg)}
.profile-help>div{display:flex;gap:18px;padding:10px 0 12px 42px;border-bottom:1px solid #e3edff;font-size:12px;color:#2878ce}
.profile-utilities{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:13px 5px 0;color:#8295b4;font-size:10px}
.profile-utilities button{padding:4px 7px;border:1px solid #d4e3f9;border-radius:12px;background:#fff8;color:#7c90b0;font-size:10px}
.profile-page a:focus-visible,.profile-page button:focus-visible,.profile-page summary:focus-visible{outline:2px solid #2785ff;outline-offset:3px}
.profile-about-dialog{width:min(340px,calc(100vw - 30px));padding:24px;border:1px solid #d7e8ff;border-radius:18px;background:#f7fbff;color:#152956;text-align:center}
.profile-about-dialog::backdrop{background:#12346270}
.profile-about-dialog>button{position:absolute;right:10px;top:10px;border:0;background:none;font-size:22px;color:#6b80a1}
.profile-about-dialog>img{width:145px;height:72px;object-fit:contain;margin:0 auto 12px}
.profile-about-dialog h2{font-size:19px}.profile-about-dialog p{font-size:13px;color:#7489ad}.profile-about-dialog a{display:inline-block;margin-top:10px;color:#237ffa}
body.is-profile .bottom-nav{min-height:73px;padding:5px 8px calc(6px + env(safe-area-inset-bottom));border-top:1px solid #e0eafa;background:#fffffff5}
body.is-profile .bottom-nav a{margin:0 3px;border-radius:12px;color:#8a9bb8;gap:3px;font-size:12px}
body.is-profile .bottom-nav a.is-active{color:#247eff;background:#eaf2ff;font-weight:800}
body.is-profile .bottom-nav svg{width:22px;height:22px}
body.is-profile .bottom-nav a.is-active svg{fill:#2687ff;stroke:#2687ff}
@media(max-width:370px){.profile-page{padding-left:12px;padding-right:12px}.profile-member-row{gap:4px}.profile-member-row>strong{font-size:16px}.profile-page .profile-card{gap:9px}.profile-page .profile-mascot{width:60px;height:65px}.profile-page .profile-mascot img{width:58px;height:64px}.profile-wordmark{width:59px;height:30px}.profile-page .profile-details p{font-size:11px}.profile-page .profile-membership-banner{padding-left:48px;padding-right:12px;gap:6px}.profile-page .recharge-copy strong{font-size:16px}.profile-page .recharge-copy small{font-size:9px}.profile-benefits{font-size:11px;padding:8px}.profile-page .quick-grid strong{font-size:11px}.profile-usage{padding:11px}.profile-usage-metrics>div{padding-left:7px;padding-right:6px}.profile-usage-metrics span{font-size:10px}.profile-usage-metrics strong{font-size:12px}.profile-menu small{font-size:11px}}