/* Suara Theme —— 支付页主题
   参考 ../h5/css/style.css 首页视觉语言：紫(#8c56ac)→橙(#ff7a59) 渐变、
   大圆角卡片、柔和投影、系统字体。单位沿用本项目 rem（1rem = 100 设计像素）。
   须在各页面内联 <style> 之后引入，才能覆盖原样式。 */

:root {
    --suara-primary: #8c56ac;
    --suara-secondary: #ff7a59;
    --suara-dark: #171321;
    --suara-light: #f8f4ff;
    --suara-muted: #71687c;
    --suara-placeholder: #9a92a6;
    --suara-gradient: linear-gradient(135deg, #8c56ac 0%, #ff7a59 100%);
    --suara-border: rgba(140, 86, 172, .14);
    --suara-shadow: 0 .3rem .8rem rgba(40, 20, 70, .08);
    --suara-shadow-sm: 0 .16rem .4rem rgba(40, 20, 70, .08);
    --suara-glow: 0 .3rem .7rem rgba(140, 86, 172, .28);
}

/* ---------- 基础 ---------- */
/* body 被各页内联样式限制在 max-width:750px，若把渐变画在 body 上，
   宽屏时只有中间那一条有背景、两侧是纯色，会出现两条竖直接缝。
   因此整屏背景交给 html，用 fixed 伪元素铺满视口，body 保持透明。 */
html {
    min-height: 100%;
    background-color: #fbf7ff;
}

html::before {
    content: "";
    position: fixed;
    top: 0; right: 0; bottom: 0; left: 0;
    z-index: -1;
    pointer-events: none;
    background-image:
        radial-gradient(circle at top left, rgba(255, 122, 89, .16), transparent 34%),
        radial-gradient(circle at 82% 4%, rgba(140, 86, 172, .2), transparent 30%);
    background-repeat: no-repeat;
}

body {
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif;
    color: var(--suara-dark);
    background: transparent;
}

input::placeholder, textarea::placeholder { color: var(--suara-placeholder); }
::selection { background: rgba(140, 86, 172, .2); }

/* 品牌头部（对应首页 navbar / brand-logo） */
.suara-header { display: flex; align-items: center; gap: .16rem; padding: .36rem .32rem .12rem; }

.suara-header-logo {
    width: .76rem; height: .76rem; flex: none; text-align: center;
    border-radius: .24rem; background: var(--suara-gradient);
    color: #fff; font-weight: 800; font-size: .38rem; line-height: .76rem;
    box-shadow: 0 .16rem .4rem rgba(140, 86, 172, .28);
}

.suara-header h1 { font-size: .36rem; font-weight: 800; line-height: .76rem; color: var(--suara-dark); }

.suara-gradient-text {
    background: var(--suara-gradient);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

/* ==========================================================================
   H5Login.html
   ========================================================================== */
#Login .logo { padding-top: 1.4rem; }
#Login .logo img { filter: drop-shadow(0 .12rem .3rem rgba(140, 86, 172, .22)); }

#Login .logo .suara-brand-name {
    margin-top: .3rem; font-size: .48rem; font-weight: 900;
    line-height: 1.2; letter-spacing: -.02rem;
    background: var(--suara-gradient);
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}

#Login .logo .suara-brand-sub {
    margin-top: .08rem; font-size: .26rem; font-weight: 600;
    line-height: .4rem; color: var(--suara-muted);
}

#Login .login-con {
    margin: 1rem .6rem 0; padding: .52rem .4rem .44rem;
    background: #fff; border: .02rem solid rgba(140, 86, 172, .1);
    border-radius: .48rem; box-shadow: var(--suara-shadow);
}

#Login .phonenum,
#Login .phonecode {
    background: var(--suara-light);
    border: .02rem solid var(--suara-border);
    border-radius: .28rem;
    transition: border-color .2s ease, box-shadow .2s ease;
}

#Login .phonenum:focus-within,
#Login .phonecode:focus-within {
    border-color: var(--suara-primary);
    box-shadow: 0 0 0 .06rem rgba(140, 86, 172, .14);
}

#Login .el-input__inner { color: var(--suara-dark); background: transparent; }
#Login .el-input__inner::placeholder { color: var(--suara-placeholder); }

#Login .phonecode span {
    width: 2.1rem; height: .58rem; line-height: .58rem;
    font-size: .26rem; font-weight: 700; color: var(--suara-primary);
    background: rgba(140, 86, 172, .1); border-radius: 999px;
}

#Login .loginbtn {
    background: var(--suara-gradient); color: #fff; font-weight: 700;
    border-radius: 999px; box-shadow: var(--suara-glow);
    transition: transform .15s ease, box-shadow .15s ease;
}

#Login .loginbtn:active { transform: translateY(.02rem); box-shadow: 0 .16rem .4rem rgba(140, 86, 172, .24); }
#Login .loginbtnchange { color: var(--suara-primary); font-weight: 700; }
#Login .icon-row { margin-top: .56rem; }

#Login .icon-row img {
    width: .92rem; height: .92rem; padding: .14rem; box-sizing: border-box;
    object-fit: contain; background: #fff;
    border: .02rem solid rgba(140, 86, 172, .1);
    border-radius: 50%; box-shadow: var(--suara-shadow-sm);
    transition: transform .15s ease;
}

#Login .icon-row img:active { transform: scale(.94); }

/* ==========================================================================
   H5Pay.html
   ========================================================================== */

/* 顶部公告条：改为柔和警示色 */
.van-notice-bar {
    color: #c2410c;
    background-color: rgba(255, 122, 89, .12);
    border-radius: 0 0 .24rem .24rem;
}

/* 用户信息卡 */
.box > .top {
    margin: .28rem .26rem 0; padding: .28rem;
    background: #fff;
    border: .02rem solid rgba(140, 86, 172, .1);
    border-radius: .48rem; box-shadow: var(--suara-shadow);
}

.info-pic { box-shadow: 0 0 0 .04rem rgba(140, 86, 172, .22), var(--suara-shadow-sm); }

/* 卡片收窄后，原 .editspan 固定 3.5rem 会把“退出登录”挤到换行，改为按内容自适应 */
.box > .top .personal-info b {
    flex: 1 1 auto; min-width: 0; max-width: 2.4rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    color: var(--suara-dark); font-weight: 800;
}

.box > .top .personal-info div:nth-of-type(1) p { display: flex; align-items: center; }
.box > .top .editspan { width: auto; flex: none; }
.box > .top .edit-con { flex: none; }
.box > .top .signout { flex: none; white-space: nowrap; }

.personal-info div:nth-of-type(1) p span { color: var(--suara-muted); }
.editspan input { color: var(--suara-dark); font-weight: 600; }
.edit-con span { color: var(--suara-muted); }
.signout { color: var(--suara-primary); font-weight: 700; }

/* 区块标题 */
.ullist h3 { color: var(--suara-dark); font-weight: 800; justify-content: flex-start; gap: .16rem; }
.ullist h3 b { color: var(--suara-dark); font-weight: 800; }

/* “充值问题”胶囊按钮 */
.ullist h3 .iconspan1 {
    height: .48rem;
    background: rgba(140, 86, 172, .1);
    border: .02rem solid rgba(140, 86, 172, .18);
    border-radius: 999px;
    color: var(--suara-primary) !important;
    font-weight: 700;
}

.banner { border-radius: .32rem; overflow: hidden; box-shadow: var(--suara-shadow-sm); }

/* 充值档位 */
.ullist ul li {
    background: #fff;
    border: .02rem solid var(--suara-border);
    border-radius: .32rem;
    box-shadow: var(--suara-shadow-sm);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.ullist ul li:active { transform: translateY(.02rem); }

.ullist ul li.on {
    border-color: transparent;
    background: var(--suara-gradient);
    box-shadow: var(--suara-glow);
}

.ullist ul li span b { color: var(--suara-dark); font-weight: 800; }
.ullist ul li span, .ullist ul li em { color: var(--suara-muted); }
.ullist ul li.on span b, .ullist ul li.on span, .ullist ul li.on em { color: #fff; }

/* 主按钮：替换原 btn-bg.png 图片按钮 */
.box .btn button {
    background: var(--suara-gradient);
    background-image: var(--suara-gradient);
    color: #fff; font-weight: 700;
    border-radius: 999px; box-shadow: var(--suara-glow);
    transition: transform .15s ease, box-shadow .15s ease;
}

.box .btn button:active { transform: translateY(.02rem); box-shadow: 0 .16rem .4rem rgba(140, 86, 172, .24); }

/* 修改用户ID弹窗 */
.editPop { border-radius: .48rem; box-shadow: 0 .3rem .8rem rgba(40, 20, 70, .18); }
.editPop h4 { color: var(--suara-dark); font-weight: 800; }

.editPop .editPop-input {
    background: var(--suara-light);
    border: .02rem solid var(--suara-border);
    color: var(--suara-dark);
    transition: border-color .2s ease, box-shadow .2s ease;
}

.editPop .editPop-input:focus { border-color: var(--suara-primary); box-shadow: 0 0 0 .06rem rgba(140, 86, 172, .14); }
.editPop .editPop-btn button.cancel { background: var(--suara-light); color: var(--suara-muted); }
.editPop .editPop-btn button.confirm { background: var(--suara-gradient); color: #fff; }

/* ==========================================================================
   RechargeProblem.html
   ========================================================================== */
.box > .con {
    margin: .24rem .28rem .6rem;
    padding: .44rem .36rem;
    background: #fff;
    border: .02rem solid rgba(140, 86, 172, .1);
    border-radius: .48rem;
    box-shadow: var(--suara-shadow);
}

.con h3 {
    height: auto; line-height: 1.5; padding-left: .2rem;
    font-size: .32rem; font-weight: 800; color: var(--suara-dark);
    border-left: .08rem solid var(--suara-primary);
    border-radius: .04rem;
}

.con h4 { height: auto; line-height: 1.5; padding: .28rem 0 .12rem; font-weight: 700; color: var(--suara-primary); }
.con h5 { height: auto; line-height: 1.6; padding: 0 0 .06rem; color: var(--suara-muted); }

.con p {
    padding: .16rem 0;
    font-size: .28rem; line-height: 1.8; color: var(--suara-muted);
}

.con > h3:first-child { padding-top: 0; }