/* Account page presentation; spacing remains compatible with older iOS. */
body.web-user-loggedin .user-page { padding-top:10px; padding-bottom:120px; }
body.web-user-loggedin .user-page .user-card {
    position:relative; overflow:hidden; margin:0 14px; padding:0; width:calc(100% - 28px); max-width:452px;
    border:1px solid #c291ff; border-radius:16px;
    background:linear-gradient(125deg,#ae62fa 0%,#7038dc 52%,#a05aef 100%);
    box-shadow:0 4px 12px rgba(112,56,220,.18),inset 0 1px 0 rgba(255,255,255,.28);
}
body.web-user-loggedin .user-page .user-card:before,
body.web-user-loggedin .user-page .user-card:after { content:""; position:absolute; pointer-events:none; border:1px solid rgba(255,255,255,.20); background:rgba(218,188,255,.14); border-radius:50%; }
body.web-user-loggedin .user-page .user-card:before { width:290px; height:160px; right:-106px; bottom:-90px; -webkit-transform:rotate(-27deg); transform:rotate(-27deg); }
body.web-user-loggedin .user-page .user-card:after { width:160px; height:260px; right:-115px; top:25px; -webkit-transform:rotate(32deg); transform:rotate(32deg); }
body.web-user-loggedin .user-page .user-loggedin { position:relative; z-index:1; padding:23px 21px 17px; }
body.web-user-loggedin .user-page .user-loggedin-header { padding:0; margin-bottom:17px; -webkit-box-align:center; -webkit-align-items:center; align-items:center; }
body.web-user-loggedin .user-page .user-loggedin-avatar { width:76px; height:76px; -webkit-flex:0 0 76px; flex:0 0 76px; margin-right:13px; border:3px solid #fff; background:#f0e6ff; box-shadow:0 2px 7px rgba(59,18,119,.15); }
body.web-user-loggedin .user-page .user-loggedin-info { padding-top:0; }
body.web-user-loggedin .user-page .user-loggedin-nickname-row { -webkit-flex-wrap:wrap; flex-wrap:wrap; margin-bottom:6px; }
body.web-user-loggedin .user-page .user-loggedin-nickname { font-size:16px; font-weight:700; max-width:100%; margin:2px 8px 2px 0; line-height:1.45; }
body.web-user-loggedin .user-page .user-loggedin-joined-wrap { max-width:100%; margin:3px 0; padding:3px 9px; background:rgba(255,255,255,.13); border:1px solid rgba(255,255,255,.23); }
body.web-user-loggedin .user-page .user-loggedin-joined-text { font-size:11px; }
body.web-user-loggedin .user-page .user-loggedin-uid { font-size:12px; line-height:1.6; }
body.web-user-loggedin .user-page .user-loggedin-balance { position:relative; margin:0; padding:13px 0 0; border-top:1px solid rgba(255,255,255,.23); -webkit-box-align:center; -webkit-align-items:center; align-items:center; }
body.web-user-loggedin .user-page .user-loggedin-balance-label { font-size:12px; -webkit-flex-shrink:0; flex-shrink:0; }
body.web-user-loggedin .user-page .user-loggedin-balance-value { font-size:28px; font-weight:700; margin-left:12px; line-height:1.2; letter-spacing:-.7px; min-width:0; overflow-wrap:break-word; word-break:break-all; }
body.web-user-loggedin .user-page #ubRefreshBtn { -webkit-flex-shrink:0; flex-shrink:0; margin-left:9px; }
body.web-user-loggedin .user-page #ubRefreshIcon { width:21px; height:21px; }
body.web-user-loggedin .user-page .user-invite-card {
    position:relative; overflow:hidden; margin:14px 14px 0; padding:19px 17px; width:calc(100% - 28px); max-width:452px; min-height:90px;
    border:1px solid #fff; border-radius:16px; background:#eee3fc;
    background:linear-gradient(110deg,#f4edff 0%,#ece0fc 55%,#dec6fa 100%);
    box-shadow:0 3px 12px rgba(132,78,181,.07); color:#542297;
}
body.web-user-loggedin .user-page .user-invite-card:before { content:""; position:absolute; width:116px; height:102px; right:31px; bottom:-7px; background:url('../images/user-invite-gift.svg') center / contain no-repeat; pointer-events:none; }
body.web-user-loggedin .user-page .user-invite-text { position:relative; z-index:1; padding-right:69px; }
body.web-user-loggedin .user-page .user-invite-title { font-size:16px; font-weight:700; line-height:1.4; margin-bottom:4px; color:#542297; }
body.web-user-loggedin .user-page .user-invite-sub { font-size:11px; line-height:1.6; color:#9365bb; }
body.web-user-loggedin .user-page .user-invite-site { color:inherit; margin-left:0; }
body.web-user-loggedin .user-page .user-invite-arrow { position:relative; z-index:1; width:32px; height:32px; margin-left:5px; color:#6829ad; background:rgba(255,255,255,.7); font-size:14px; }
body.web-user-loggedin .user-page .user-funcs-card { width:calc(100% - 28px); max-width:452px; margin:13px 14px 0; padding:9px 12px; border:0; border-radius:16px; background:#fff; }
body.web-user-loggedin .user-page .user-func-item { position:relative; -webkit-flex:0 0 calc(50% - 5px); flex:0 0 calc(50% - 5px); width:calc(50% - 5px); margin:6px 0; padding:12px 10px; min-height:72px; border:1px solid #e7d5fb; border-radius:12px; background:#fcf9ff; -webkit-box-pack:start; -webkit-justify-content:flex-start; justify-content:flex-start; }
body.web-user-loggedin .user-page .user-func-item:nth-child(even) { margin-left:10px; }
body.web-user-loggedin .user-page .user-func-icon { width:43px; height:43px; -webkit-flex:0 0 43px; flex:0 0 43px; margin-right:10px; border-radius:50%; background:#f0e5fe; color:#8025d0; font-size:20px; }
body.web-user-loggedin .user-page .user-func-label { font-size:14px; font-weight:600; color:#58218c; line-height:1.4; }
body.web-user-loggedin .user-page .lottery-entry-hint { display:block; margin:2px 0 0; font-size:10px; line-height:1.3; }
body.web-user-loggedin .user-page .user-func-item:after { content:""; width:6px; height:6px; margin-left:auto; border-top:1.5px solid #a588bf; border-right:1.5px solid #a588bf; -webkit-transform:rotate(45deg); transform:rotate(45deg); -webkit-flex-shrink:0; flex-shrink:0; }
body.web-user-loggedin .user-page .user-logout-btn { width:calc(100% - 28px); max-width:452px; margin:17px 14px 14px; height:46px; line-height:44px; border:1px solid #c68bfa; border-radius:12px; background:rgba(255,255,255,.85); color:#913de3; font-size:14px; font-weight:400; }
@media(min-width:481px) {
    body.web-user-loggedin .user-page .user-card,
    body.web-user-loggedin .user-page .user-invite-card,
    body.web-user-loggedin .user-page .user-funcs-card,
    body.web-user-loggedin .user-page .user-logout-btn { margin-left:auto; margin-right:auto; }
}
@media(max-width:374px) {
    body.web-user-loggedin .user-page .user-loggedin { padding:19px 15px 15px; }
    body.web-user-loggedin .user-page .user-loggedin-avatar { width:62px; height:62px; -webkit-flex-basis:62px; flex-basis:62px; margin-right:10px; }
    body.web-user-loggedin .user-page .user-loggedin-nickname { font-size:15px; }
    body.web-user-loggedin .user-page .user-funcs-card { padding:8px; }
    body.web-user-loggedin .user-page .user-func-item { padding:11px 7px; }
    body.web-user-loggedin .user-page .user-func-icon { width:34px; height:34px; -webkit-flex-basis:34px; flex-basis:34px; margin-right:6px; font-size:17px; }
    body.web-user-loggedin .user-page .user-func-label { font-size:12px; }
    body.web-user-loggedin .user-page .user-invite-title { font-size:15px; }
    body.web-user-loggedin .user-page .user-invite-sub { font-size:11px; }
}

/* Shared typography and action panel. */
body.web-user-loggedin .user-page .user-loggedin-nickname-row { display:block; margin-bottom:0; }
body.web-user-loggedin .user-page .user-loggedin-nickname { display:block; margin-bottom:4px; }
body.web-user-loggedin .user-page .user-loggedin-joined-wrap { display:inline-block; margin:3px 0; }
body.web-user-loggedin .user-page .user-loggedin-nickname { font-size:14px; }
body.web-user-loggedin .user-page .user-loggedin-balance-value { font-size:27px; }
body.web-user-loggedin .user-page .user-funcs-card { padding:6px 12px; }
body.web-user-loggedin .user-page .user-func-item { width:50%; -webkit-flex:0 0 50%; flex:0 0 50%; min-height:60px; margin:0; padding:10px 9px; background:transparent; border:0; border-radius:0; }
body.web-user-loggedin .user-page .user-func-item:nth-child(even) { margin-left:0; border-left:0; }
body.web-user-loggedin .user-page .user-func-item:nth-child(n+3) { border-top:0; }
body.web-user-loggedin .user-page .user-func-item:before { content:""; position:absolute; pointer-events:none; top:10px; right:0; bottom:10px; left:0; background-image:linear-gradient(#eee9f7,#eee9f7),linear-gradient(#eee9f7,#eee9f7); background-repeat:no-repeat; background-size:0 0,0 0; }
body.web-user-loggedin .user-page .user-func-item:nth-child(odd):before { background-size:1px 100%,0 0; background-position:right top,left top; }
body.web-user-loggedin .user-page .user-func-item:nth-child(n+3):before { top:0; background-size:0 0,calc(100% - 22px) 1px; background-position:right 10px,center top; }
body.web-user-loggedin .user-page .user-func-item:nth-child(odd):nth-child(n+3):before { background-size:1px calc(100% - 10px),calc(100% - 22px) 1px; }
body.web-user-loggedin .user-page .user-func-item:hover { background:transparent; }
body.web-user-loggedin .user-page .user-func-item:active { background:#faf7ff; }
body.web-user-loggedin .user-page .user-func-icon { width:26px; height:26px; -webkit-flex:0 0 26px; flex:0 0 26px; margin-right:9px; background:transparent; color:#a855f7; font-size:19px; }
body.web-user-loggedin .user-page .user-func-label { font-size:13px; font-weight:500; color:#302644; }
body.web-user-loggedin .user-page .user-logout-btn { color:#fff; border:0; background:#a855f7; background:linear-gradient(110deg,#a855f7,#9346e8,#bd70f7); }
body.web-user-loggedin .user-page .user-logout-btn:active { background:#9346e8; }
body.web-user-loggedin .user-page .user-logout-btn i { margin-right:9px; font-size:17px; vertical-align:-1px; }
@media(max-width:374px) { body.web-user-loggedin .user-page .user-func-item { padding:9px 5px; } body.web-user-loggedin .user-page .user-func-icon { width:22px; height:22px; -webkit-flex-basis:22px; flex-basis:22px; margin-right:6px; font-size:16px; } body.web-user-loggedin .user-page .user-func-label { font-size:12px; } }