@import url("ui_back.css");

/* ========== 顶栏统一 ========== */
body.home-premium header.top_header,
body.sytemNotice header.top_header,
body.mine-premium header.top_header,
body.gray_bg header.top_header,
header.top_header {
    background: rgba(255,255,255,.88) !important;
    background-color: rgba(255,255,255,.88) !important;
    background-image: none !important;
    backdrop-filter: blur(28px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(28px) saturate(180%) !important;
    border-bottom: 0.5px solid rgba(255,255,255,.9) !important;
    box-shadow: 0 8px 24px rgba(31,36,48,.05) !important;
    color: #1f2430 !important;
    height: 48px !important;
}
header.top_header .title {
    color: #1f2430 !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    line-height: 48px !important;
    text-indent: 0 !important;
}
header.top_header .right a {
    color: #5b6472 !important;
    line-height: 48px !important;
    font-size: 14px;
}

/* ========== 消息页 ========== */
body.sytemNotice,
body.gray_bg.sytemNotice,
body.gray_bg { background: #f3f4f8 !important; }
.sytemNotice #body {
    background: transparent !important;
    padding: 0 0 130px !important;
}
.sytemNotice .notice-head-space {
    height: 56px;
}
.sytemNotice .team_tab,
.sytemNotice .notice-tabs {
    margin: 8px 16px 6px !important;
    padding: 5px !important;
    background: rgba(255,255,255,.96) !important;
    border-radius: 18px !important;
    box-shadow: 0 10px 28px rgba(31,36,48,.07) !important;
    overflow: hidden !important;
    border: 0.5px solid rgba(255,255,255,.9) !important;
    position: relative !important;
    z-index: 5 !important;
}
.sytemNotice .team_tab ul,
.sytemNotice .notice-tabs ul {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    background: #eef1f6 !important;
    border-radius: 14px !important;
    position: relative !important;
    gap: 0 !important;
}
.sytemNotice .team_tab ul::before,
.sytemNotice .notice-tabs ul::before {
    content: "";
    position: absolute;
    top: 3px;
    bottom: 3px;
    left: 3px;
    width: calc((100% - 6px) / 3);
    border-radius: 11px;
    background: #ffffff;
    box-shadow: 0 6px 16px rgba(31,36,48,.10), 0 1px 0 rgba(255,255,255,.9) inset;
    transition: transform .32s cubic-bezier(.22,.82,.24,1);
    z-index: 0;
    pointer-events: none;
}
.sytemNotice .team_tab ul.is-t2::before,
.sytemNotice .notice-tabs ul.is-t2::before { transform: translateX(100%); }
.sytemNotice .team_tab ul.is-t3::before,
.sytemNotice .notice-tabs ul.is-t3::before { transform: translateX(200%); }

.sytemNotice .team_tab li,
.sytemNotice .notice-tabs li {
    flex: 1 !important;
    width: auto !important;
    text-align: center !important;
    background: transparent !important;
    float: none !important;
    margin: 0 !important;
    position: relative;
    z-index: 1;
}
.sytemNotice .team_tab li a,
.sytemNotice .notice-tabs li a {
    display: block !important;
    padding: 12px 4px !important;
    color: #7a8294 !important;
    font-size: 13px !important;
    font-weight: 650 !important;
    border-bottom: none !important;
    background: transparent !important;
    border-radius: 11px !important;
    transition: color .22s ease;
}
.sytemNotice .team_tab li.current a,
.sytemNotice .team_tab li.current,
.sytemNotice .notice-tabs li.current a,
.sytemNotice .notice-tabs li.current {
    color: #1f2430 !important;
    background: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
    font-weight: 800 !important;
}
.sytemNotice .notice .item {
    margin: 10px 16px 0 !important;
    border-radius: 16px !important;
    background: #fff !important;
    box-shadow: 0 8px 22px rgba(31,36,48,.05) !important;
    padding: 4px 0 !important;
    border: none !important;
}
.sytemNotice .notice .item img.avatar,
.sytemNotice .notice .item .avatar.notice-ico {
    width: 44px !important;
    height: 44px !important;
    border-radius: 12px !important;
    object-fit: cover;
    margin: 12px !important;
    background: #eef1f8;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    float: left;
}
.sytemNotice .notice .item .avatar.notice-ico svg {
    width: 24px !important;
    height: 24px !important;
    display: block;
}
.sytemNotice .notice .item .info {
    width: calc(100% - 80px) !important;
    height: auto !important;
    margin: 12px 8px 12px 0 !important;
}
.sytemNotice .notice .item .info .title {
    font-size: 14px !important;
    font-weight: 650 !important;
    color: #1f2430 !important;
    line-height: 1.4;
}
.sytemNotice .notice .item .info .time {
    font-size: 12px !important;
    color: #9aa1b2 !important;
    margin-top: 4px;
}
.sytemNotice .none {
    margin: 40px 16px;
    text-align: center;
    color: #9aa1b2;
}

/* ========== 我的页：整卡头像余额（无半截背景） ========== */
body.gray_bg.mine-premium,
body.mine-premium,
body.mine-premium.gray_bg,
body:has(.mine-page) {
    background: #f3f4f8 !important;
    overflow-x: hidden !important;
}
.mine-premium .mine-page,
.mine-page {
    padding: 12px 16px !important;
    padding-bottom: calc(168px + env(safe-area-inset-bottom, 0px)) !important;
    box-sizing: border-box !important;
    width: 100% !important;
    max-width: 480px !important;
    margin: 0 auto !important;
    overflow-x: hidden !important;
}
.mine-premium .mine-profile,
.mine-page .mine-profile {
    border-radius: 22px;
    overflow: hidden;
    background: linear-gradient(180deg, #2a3140 0%, #151a24 42%, #fff 42%, #fff 100%);
    box-shadow: 0 14px 34px rgba(31,36,48,.1);
    margin-bottom: 12px;
}
.mine-premium .mine-profile-top,
.mine-page .mine-profile-top {
    position: relative;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 16px 18px;
    background: transparent;
}
.mine-premium .mine-avatar,
.mine-page .mine-avatar {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.35);
    object-fit: cover !important;
    background: #fff;
    flex: 0 0 auto !important;
    display: block !important;
}
.mine-premium .mine-profile-info { flex: 1; min-width: 0; }
.mine-premium .mine-name {
    color: #fff;
    font-size: 18px;
    font-weight: 800;
    line-height: 1.3;
}
.mine-premium .mine-meta {
    margin-top: 4px;
    color: rgba(255,255,255,.7);
    font-size: 12px;
}
.mine-premium .mine-meta span {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,.18);
}
.mine-premium .mine-set {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,.12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2'%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3Cpath d='M12 2v3M12 19v3M2 12h3M19 12h3M4.9 4.9l2.1 2.1M17 17l2.1 2.1M4.9 19.1 7 17M17 7l2.1-2.1'/%3E%3C/svg%3E") center/18px no-repeat;
    flex: 0 0 auto;
}
.mine-premium .mine-balance,
.mine-page .mine-balance {
    display: flex !important;
    align-items: center;
    gap: 8px;
    padding: 16px 14px;
    background: #fff;
}
.mine-premium .mine-bal-item,
.mine-page .mine-bal-item { flex: 1; text-align: center; }
.mine-premium .mine-bal-item .v,
.mine-page .mine-bal-item .v {
    font-size: 20px;
    font-weight: 800;
    color: #1f2430;
}
.mine-premium .mine-bal-item .k,
.mine-page .mine-bal-item .k {
    margin-top: 4px;
    font-size: 12px;
    color: #8b92a1;
    font-weight: 600;
}
.mine-premium .mine-bal-actions,
.mine-page .mine-bal-actions {
    display: flex !important;
    flex-direction: column;
    gap: 8px;
    flex: 0 0 auto;
}
.mine-premium .mine-bal-actions a,
.mine-page .mine-bal-actions a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 64px;
    height: 30px;
    padding: 0 14px;
    border-radius: 999px;
    background: linear-gradient(145deg, #2a3140, #11151d);
    color: #fff !important;
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    box-shadow: 0 6px 14px rgba(17,21,29,.2);
}
.mine-premium .mine-promo,
.mine-page .mine-promo {
    display: flex !important;
    gap: 10px;
    margin-bottom: 12px;
}
.mine-premium .mine-promo-card,
.mine-page .mine-promo-card {
    flex: 1;
    min-height: 88px;
    border-radius: 18px;
    padding: 16px 14px;
    text-decoration: none;
    box-shadow: 0 10px 24px rgba(31,36,48,.08);
    position: relative;
    overflow: hidden;
}
.mine-premium .mine-promo-card .t {
    font-size: 16px;
    font-weight: 800;
    color: #1f2430;
}
.mine-premium .mine-promo-card .s {
    margin-top: 6px;
    font-size: 12px;
    font-weight: 600;
    opacity: .75;
}
.mine-premium .mine-promo-card.vip {
    background: linear-gradient(135deg, #fff6e4, #ffe3ad);
}
.mine-premium .mine-promo-card.vip .s { color: #b8863b; }
.mine-premium .mine-promo-card.invite {
    background: linear-gradient(135deg, #e8f0ff, #c9dbff);
}
.mine-premium .mine-promo-card.invite .s { color: #4a6cf0; }
.mine-premium .mine-promo-ico {
    position: absolute;
    right: 10px;
    bottom: 8px;
    width: 42px;
    height: 42px;
    opacity: .9;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    pointer-events: none;
}
.mine-premium .mine-promo-ico.vip-ico {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Cpath fill='%23F5C542' d='M8 22l12 8 12-18 12 18 12-8-4 28H12z'/%3E%3Ccircle cx='32' cy='14' r='5' fill='%23FFD978'/%3E%3C/svg%3E");
}
.mine-premium .mine-promo-ico.invite-ico {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'%3E%3Ccircle cx='24' cy='22' r='10' fill='%235B7CFF'/%3E%3Ccircle cx='42' cy='24' r='8' fill='%237B96FF'/%3E%3Cpath fill='%235B7CFF' d='M6 50c2-10 10-15 18-15s16 5 18 15'/%3E%3Cpath fill='%237B96FF' d='M30 50c1-8 8-12 14-12s11 4 13 12'/%3E%3C/svg%3E");
}
.mine-premium .user_index_top {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    background: transparent !important;
    background-image: none !important;
    margin: 0 0 12px !important;
    padding: 0 !important;
    overflow: visible !important;
    float: none !important;
}
.mine-premium .user_index_top_t {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 120px !important;
    margin: 0 !important;
    padding: 22px 18px 72px !important;
    border-radius: 22px !important;
    background: linear-gradient(145deg, #2a3140 0%, #11151d 100%) !important;
    background-image: linear-gradient(145deg, #2a3140 0%, #11151d 100%) !important;
    box-shadow: 0 16px 36px rgba(17,21,29,.28) !important;
    overflow: hidden !important;
    float: none !important;
    box-sizing: border-box !important;
}
.mine-premium .user_index_top_t::before,
.mine-premium .user_index_top_t::after {
    content: "" !important;
    position: absolute !important;
    border-radius: 50% !important;
    pointer-events: none !important;
    background: radial-gradient(circle, rgba(255,255,255,.14), transparent 70%) !important;
}
.mine-premium .user_index_top_t::after {
    right: -28px !important;
    top: -36px !important;
    width: 140px !important;
    height: 140px !important;
}
.mine-premium .user_index_top_t::before {
    left: -40px !important;
    bottom: -50px !important;
    width: 120px !important;
    height: 120px !important;
    opacity: .5;
}
.mine-premium .user_index_top_t > img {
    width: 58px !important;
    height: 58px !important;
    border-radius: 50% !important;
    border: 2px solid rgba(255,255,255,.35) !important;
    object-fit: cover;
    background: #fff;
    float: left !important;
    margin: 0 14px 0 0 !important;
}
.mine-premium .user_index_top_s {
    color: #fff !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    margin-top: 6px !important;
    width: auto !important;
    float: none !important;
    height: auto !important;
    line-height: 1.3 !important;
}
.mine-premium .user_index_top_x {
    color: rgba(255,255,255,.72) !important;
    font-size: 12px !important;
    width: auto !important;
    float: none !important;
    height: auto !important;
    line-height: 1.4 !important;
}
.mine-premium .user_index_top_x span { background: rgba(255,255,255,.18) !important; }
.mine-premium #set {
    filter: brightness(0) invert(1);
    opacity: .9;
    top: 16px !important;
    right: 16px !important;
    width: 22px !important;
    height: 22px !important;
}
.mine-premium .usermes {
    width: 100% !important;
    max-width: 100% !important;
    margin: -48px 0 0 !important;
    padding: 16px 12px !important;
    border-radius: 18px !important;
    background: #fff !important;
    box-shadow: 0 12px 30px rgba(31,36,48,.1) !important;
    border: 0.5px solid rgba(255,255,255,.9);
    position: relative;
    z-index: 2;
    box-sizing: border-box !important;
    top: 0 !important;
    float: none !important;
}
.mine-premium .usermes .text {
    font-size: 20px !important;
    font-weight: 800;
    color: #1f2430;
}
.mine-premium .usermes .num {
    color: #8b92a1 !important;
    font-size: 12px !important;
}
.mine-premium .usermes .mesBox a {
    background: linear-gradient(145deg, #2a3140, #11151d) !important;
    border: none !important;
    border-radius: 999px !important;
    padding: 0 14px !important;
    height: 32px;
    line-height: 32px !important;
    font-size: 13px;
    font-weight: 700;
    color: #fff !important;
}
.mine-premium .mytool {
    display: flex !important;
    gap: 12px !important;
    margin: 14px 0 0 !important;
    padding: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    float: none !important;
}
.mine-premium .mytool .openvip,
.mine-premium .mytool .sharefriend {
    flex: 1 1 0 !important;
    width: auto !important;
    margin: 0 !important;
    border-radius: 18px !important;
    min-height: 84px;
    box-shadow: 0 10px 24px rgba(31,36,48,.08);
    box-sizing: border-box !important;
    float: none !important;
}
.mine-premium .mytool .text {
    font-weight: 750;
    font-size: 15px;
}

/* 核心：整块白卡片，禁止碎裂条纹 */
.mine-premium .mine-card,
.mine-page .mine-card {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 12px 0 0 !important;
    padding: 16px 10px !important;
    background: #fff !important;
    background-color: #fff !important;
    background-image: none !important;
    border-radius: 18px !important;
    box-shadow: 0 8px 22px rgba(31,36,48,.05) !important;
    box-sizing: border-box !important;
    float: none !important;
    clear: both !important;
    overflow: hidden !important;
    position: relative !important;
    left: 0 !important;
    right: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    border: none !important;
    /* 防止被旧 float 布局切成横条 */
    contain: layout paint !important;
}
.mine-premium .mine-card::before,
.mine-premium .mine-card::after,
.mine-premium .user_index_shz::before,
.mine-premium .user_index_shza::before,
.mine-premium .user_index_shz::after,
.mine-premium .user_index_shza::after {
    display: none !important;
    content: none !important;
}
.mine-premium .user_index_shz,
.mine-premium .user_index_shza,
.mine-premium .dengji {
    /* 全部走 .mine-card，覆盖 share.css 的 float/height */
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    float: none !important;
    padding-top: 16px !important;
}
.mine-premium .user_index_shz li,
.mine-premium .user_index_shza li {
    float: none !important;
    height: auto !important;
    width: auto !important;
}
.mine-premium .mine-grid,
.mine-page .mine-grid {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    list-style: none !important;
}
.mine-premium .mine-grid a,
.mine-page .mine-grid a {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    text-align: center !important;
    box-sizing: border-box !important;
    padding: 12px 4px !important;
    float: none !important;
    height: auto !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
}
.mine-premium .mine-grid-5 a,
.mine-page .mine-grid-5 a { width: 20% !important; flex: 0 0 20% !important; }
.mine-premium .mine-grid-4 a,
.mine-page .mine-grid-4 a { width: 25% !important; flex: 0 0 25% !important; }
.mine-premium .mine-grid img {
    width: 28px !important;
    height: 28px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto 6px !important;
    float: none !important;
    background: transparent !important;
}
.mine-premium .mine-grid span,
.mine-premium .mine-grid p {
    color: #5b6472 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    float: none !important;
    background: transparent !important;
}
.mine-premium .mine-credit {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    text-decoration: none !important;
    gap: 8px;
    background: transparent !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
}
.mine-premium .credit-bar {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    padding: 4px 2px 0 !important;
}
.mine-premium .credit-track {
    position: relative;
    height: 8px;
    border-radius: 999px;
    background: #eef1f6;
    margin: 10px 6px 8px;
}
.mine-premium .credit-fill {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #35c2a0, #22a877);
}
.mine-premium .credit-knob {
    position: absolute;
    top: 50%;
    left: 0;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: #fff;
    border: 3px solid #22a877;
    box-shadow: 0 4px 10px rgba(34,168,119,.3);
}
.mine-premium .credit-dot {
    position: absolute;
    top: 50%;
    width: 6px;
    height: 6px;
    margin-top: -3px;
    margin-left: -3px;
    border-radius: 50%;
    background: #c4c9d4;
    z-index: 1;
}
.mine-premium .credit-dot:nth-child(1) { left: 0%; }
.mine-premium .credit-dot:nth-child(2) { left: 50%; }
.mine-premium .credit-dot:nth-child(3) { left: 100%; }
.mine-premium .credit-labels {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #8b92a1;
    font-weight: 600;
    padding: 0 2px;
}
.mine-premium .mine-ico,
.mine-page .mine-ico {
    width: 40px;
    height: 40px;
    border-radius: 14px;
    display: flex !important;
    align-items: center;
    justify-content: center;
    margin: 0 auto 6px !important;
    background: #eef1f8;
}
.mine-premium .mine-ico svg,
.mine-page .mine-ico svg { width: 22px !important; height: 22px !important; display: block; }
.mine-premium .mine-ico.c1, .mine-page .mine-ico.c1 { background: #e8f1ff; }
.mine-premium .mine-ico.c2, .mine-page .mine-ico.c2 { background: #fff0e4; }
.mine-premium .mine-ico.c3, .mine-page .mine-ico.c3 { background: #e7f8f2; }
.mine-premium .mine-ico.c4, .mine-page .mine-ico.c4 { background: #eee9ff; }
.mine-premium .mine-ico.c5, .mine-page .mine-ico.c5 { background: #ffe8dc; }
.mine-premium .mine-ico.c6, .mine-page .mine-ico.c6 { background: #eef3ff; }
.mine-premium .mine-ico.c7, .mine-page .mine-ico.c7 { background: #fff6e4; }
.mine-premium .mine-ico.c8, .mine-page .mine-ico.c8 { background: #ffe4ec; }
.mine-premium .mine-ico.c9, .mine-page .mine-ico.c9 { background: #fff1d6; }
.mine-premium .mine-ico.c10, .mine-page .mine-ico.c10 { background: #eceff3; }
.mine-premium .mine-credit .feng,
.mine-premium .mine-credit .zhi {
    flex: 0 0 auto;
    text-align: center;
    margin: 0 !important;
    float: none !important;
    background: transparent !important;
}
.mine-premium .mine-credit .tiao {
    flex: 1 1 auto !important;
    margin: 0 !important;
    min-width: 0 !important;
    width: auto !important;
    float: none !important;
    background: transparent !important;
    overflow: hidden !important;
}
/* 消灭 ystep 固定 360px 导致的右侧溢出碎裂 */
.mine-premium .ystep-container,
.mine-premium .ystep-sm,
.mine-premium .ystep1,
.mine-premium #myVue {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    float: none !important;
    height: auto !important;
    min-height: 42px !important;
}
.mine-premium .ystep-sm li {
    width: 33.33% !important;
    float: left !important;
    box-sizing: border-box !important;
}
.mine-premium .feng,
.mine-premium .zhi,
.mine-premium .tiao,
.mine-premium .dengji .feng,
.mine-premium .dengji .zhi,
.mine-premium .dengji .tiao {
    float: none !important;
    width: auto !important;
}
.mine-premium .mine-card + .mine-card {
    margin-top: 12px !important;
}
.mine-premium .mine-page > div {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}
.mine-premium .mine-credit img {
    width: 28px;
    height: 28px;
    display: block;
    margin: 0 auto 4px;
}
.mine-premium .mine-credit p {
    margin: 0;
    font-size: 11px;
    color: #5b6472;
    font-weight: 600;
}
.mine-premium > p[style*="background"],
.mine-premium p[style*="background: #ededed"],
.mine-premium p[style*="background:#ededed"] {
    display: none !important;
}