@charset "UTF-8";
/* 账号与权益面板：登录、支付宝解锁、我的账号 */

.acct-panel{display:grid;gap:10px;margin:6px 0 2px;text-align:left}

.acct-panel input[type=text],
.acct-panel input[type=password]{width:100%;min-height:46px;padding:0 14px;border-radius:13px;border:1px solid rgba(255,255,255,.16);background:rgba(22,14,23,.72);color:#fff3ed;font-size:16px;line-height:1.2}

.acct-panel input[type=text]::placeholder,
.acct-panel input[type=password]::placeholder{color:#a58f9c;font-size:13px}

.acct-panel input[type=text]:focus,
.acct-panel input[type=password]:focus{outline:none;border-color:#e5a0ae;box-shadow:0 0 0 3px rgba(229,160,174,.16)}

.acct-line{display:flex;gap:9px;flex-wrap:wrap}

.acct-line>.primary{flex:1 1 auto;min-height:46px}

.acct-check{display:flex;gap:9px;align-items:flex-start;font-size:12px;line-height:1.55;color:#d5bcc6}

.acct-check input[type=checkbox]{width:17px;height:17px;margin:1px 0 0;flex:0 0 auto;accent-color:#e5a0ae}

.acct-price{display:flex;align-items:baseline;justify-content:center;gap:10px;padding:8px 0}

.acct-price span{font-size:12px;color:#bda4b1}

.acct-price strong{font-size:26px;font-weight:520;color:#fff0e8}

.acct-hint{font-size:11px;line-height:1.6;color:#a58f9c;margin:0;text-align:center}

.acct-error{font-size:12px;line-height:1.5;color:#ffb0b8;margin:0;text-align:center}

.acct-error:empty{display:none}

.acct-ok{font-size:12px;line-height:1.6;color:#a8e6c8;text-align:center;margin:0}

.acct-link{display:block;margin:0 auto;font-size:12px}

.account-dialog{width:430px!important;max-width:calc(100vw - 28px)}

/* 顶部账号入口：登录后显示账号信息，点击展开退出菜单 */
.account-entry{position:relative;display:flex;align-items:center}

.account-entry .text-button span{margin-left:0}

#account-button.is-user{display:inline-flex;align-items:center;gap:8px;padding:4px 0;color:#efe7ea;font-size:12px;line-height:1.2;max-width:190px}

.account-avatar{width:24px;height:24px;flex:0 0 auto;display:grid;place-items:center;border-radius:50%;background:linear-gradient(140deg,#e5a0ae,#9a86d8);color:#231620;font-size:12px;font-weight:600;letter-spacing:0}

.account-avatar-lg{width:34px;height:34px;font-size:14px}

.account-name{max-width:112px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.account-caret{width:0;height:0;flex:0 0 auto;border-left:4px solid transparent;border-right:4px solid transparent;border-top:5px solid #a58f9c;transition:transform .18s ease}

#account-button[aria-expanded=true] .account-caret{transform:rotate(180deg)}

.account-menu{position:absolute;top:calc(100% + 14px);right:0;z-index:80;width:236px;padding:13px;border-radius:17px;border:1px solid rgba(255,255,255,.14);background:rgba(28,18,29,.97);box-shadow:0 20px 48px rgba(0,0,0,.5);display:grid;gap:7px;text-align:left}

.account-menu[hidden]{display:none}

.account-menu-head{display:flex;align-items:center;gap:10px}

.account-menu-who{display:grid;gap:3px;min-width:0}

.account-menu-who strong{font-size:13px;font-weight:520;color:#fff0e8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.account-menu-who small{font-size:11px;color:#a58f9c;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.account-menu-state{margin:2px 0 4px;font-size:11px;line-height:1.5;color:#c9a9b6}

.account-menu-state.is-ok{color:#a8e6c8}

.account-menu-item{width:100%;min-height:38px;padding:0 12px;border-radius:11px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#f1e6ea;font-size:12px;text-align:center;transition:background .16s ease,border-color .16s ease}

.account-menu-item:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.24)}

.account-menu-item.is-danger{color:#ffb0b8}

.account-menu-item:disabled{opacity:.6}

@media(max-width:400px){
  #account-button.is-user{max-width:150px}
  .account-name{max-width:84px}
  .account-menu{width:214px}
}

/* 支付弹窗内已由外层说明权益，这里压缩高度以适配 375×667 等小屏 */
.payment-dialog .acct-hint{display:none}
.payment-dialog .acct-panel{gap:8px}
.payment-dialog .acct-price{padding:2px 0}
.account-dialog .payment-heading p{margin:8px 0 0}

@media(max-width:400px){
  .acct-price strong{font-size:23px}
  .account-dialog{padding-left:16px;padding-right:16px}
}
