/* ============================================================
   [YR] 用户中心 UI 重做 —— 云栈 / YuanRes 蓝青风
   作用域：仅 .uc-center 容器内。不改动线上主样式。
   配色：#1E63E9 → #19C2E6 渐变，圆角卡片，柔和阴影。
   ============================================================ */

.uc-center {
    --yz-primary: #1E63E9;
    --yz-cyan: #19C2E6;
    --yz-grad: linear-gradient(135deg, #1E63E9 0%, #19C2E6 100%);
    --yz-grad-soft: linear-gradient(135deg, rgba(30, 99, 233, .10), rgba(25, 194, 230, .10));
    --yz-card: #FFFFFF;
    --yz-border: #E8EDF6;
    --yz-text: #1F2733;
    --yz-muted: #8A94A6;
    --yz-shadow: 0 8px 30px rgba(30, 99, 233, .10);
    --yz-radius: 18px;
}

/* 容器与两栏 */
.uc-center .row {
    align-items: flex-start;
}

/* 侧栏白色包裹层默认透明化，避免与内部卡片形成双层边框 */
.uc-center .bg-white {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    overflow: visible !important;
}
/* 仅菜单块（带 mt-4 mb-4）作为卡片呈现 */
.uc-center .bg-white.mt-4 {
    background: var(--yz-card) !important;
    border: 1px solid var(--yz-border) !important;
    border-radius: var(--yz-radius) !important;
    box-shadow: var(--yz-shadow) !important;
    overflow: hidden !important;
}

/* ---------- 左侧资料卡 ---------- */
.uc-center .card.text-center {
    position: relative;
    overflow: hidden;
    border: none;
    border-radius: var(--yz-radius);
    box-shadow: var(--yz-shadow);
    padding: 26px 16px 18px;
}
.uc-center .card.text-center::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 86px;
    background: var(--yz-grad);
}
.uc-center .card.text-center > * {
    position: relative;
    z-index: 1;
}
.uc-center .card.text-center .avatar-img {
    border: 3px solid #fff !important;
    box-shadow: 0 6px 16px rgba(30, 99, 233, .35);
}
.uc-center .card.text-center h5 {
    color: var(--yz-text);
    font-weight: 700;
}
.uc-center .card.text-center p {
    color: var(--yz-muted);
    font-size: 13px;
}
.uc-center .card.text-center sub {
    color: var(--yz-muted);
    font-size: 12px;
}

/* 下载额度块（原为绿色，改为蓝青） */
.uc-center .bg-success.bg-opacity-10 {
    background: var(--yz-grad-soft) !important;
    color: var(--yz-primary) !important;
    border: 1px solid rgba(30, 99, 233, .18);
    border-radius: 14px;
    padding: 14px 12px;
}
.uc-center .bg-success.bg-opacity-10 .text-success {
    color: var(--yz-primary) !important;
}
.uc-center .bg-success.bg-opacity-10 .badge.bg-primary.bg-opacity-10 {
    background: rgba(30, 99, 233, .14) !important;
    color: var(--yz-primary) !important;
    border: 1px solid rgba(30, 99, 233, .20);
}

/* ---------- 左侧菜单 ---------- */
.uc-center .uc-menu-warp {
    list-style: none;
    margin: 0;
    padding: 8px;
}
.uc-center .uc-menu-warp .menu-item {
    margin: 2px 0;
}
.uc-center .uc-menu-warp .menu-item a {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border-radius: 12px;
    color: var(--yz-text);
    font-weight: 500;
    text-decoration: none;
    transition: background .2s, color .2s;
}
.uc-center .uc-menu-warp .menu-item a i {
    width: 20px;
    text-align: center;
    font-size: 15px;
}
.uc-center .uc-menu-warp .menu-item a:hover {
    background: var(--yz-grad-soft);
    color: var(--yz-primary);
}
.uc-center .uc-menu-warp .menu-item.current-menu-item a {
    background: var(--yz-grad);
    color: #fff;
    box-shadow: 0 6px 16px rgba(30, 99, 233, .35);
}

/* ---------- 右侧内容卡片 ---------- */
.uc-center .card {
    background: var(--yz-card);
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-radius);
    box-shadow: var(--yz-shadow);
    overflow: hidden;
    margin-bottom: 1.5rem;
}
.uc-center .card-header {
    background: transparent;
    border-bottom: 1px solid var(--yz-border);
    padding: 18px 22px;
}
.uc-center .card-header h5,
.uc-center .card-header caption {
    color: var(--yz-text);
    position: relative;
    padding-left: 14px;
}
.uc-center .card-header h5::before,
.uc-center .card-header caption::before {
    content: "";
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 5px; height: 18px;
    border-radius: 3px;
    background: var(--yz-grad);
}
.uc-center .card-body {
    padding: 22px;
}

/* ---------- 表单 ---------- */
.uc-center .form-control {
    border-radius: 12px;
    border-color: var(--yz-border);
    padding: 10px 14px;
}
.uc-center .form-control:focus {
    border-color: var(--yz-primary);
    box-shadow: 0 0 0 .2rem rgba(30, 99, 233, .15);
}

/* ---------- 按钮 ---------- */
.uc-center .btn {
    border-radius: 12px;
    font-weight: 600;
}
.uc-center .btn-warning,
.uc-center .js-pay-action {
    background: var(--yz-grad) !important;
    border: none !important;
    color: #fff !important;
}
.uc-center .btn-warning:hover,
.uc-center .js-pay-action:hover {
    filter: brightness(1.05);
    box-shadow: 0 8px 20px rgba(30, 99, 233, .30);
}
.uc-center .js-pay-action:disabled {
    background: #C7D2E8 !important;
    color: #fff !important;
    box-shadow: none;
}
.uc-center .btn-danger {
    background: linear-gradient(135deg, #FF6A6A, #F7415B) !important;
    border: none !important;
    color: #fff !important;
}

/* ---------- 充值余额横幅 ---------- */
.uc-center .coin-balance-body {
    background: var(--yz-grad) !important;
    border: none !important;
    color: #fff;
    border-radius: var(--yz-radius);
    box-shadow: 0 10px 30px rgba(30, 99, 233, .35);
}
.uc-center .coin-balance-body .balance-info .fs-5 {
    color: rgba(255, 255, 255, .85);
}
.uc-center .coin-balance-body .fs-2 {
    color: #fff;
}
.uc-center .coin-balance-body hr {
    border-color: rgba(255, 255, 255, .25);
}

/* ---------- 充值卡片 ---------- */
.uc-center .coin-pay-card {
    background: var(--yz-card);
    border: 1.5px solid var(--yz-border);
    border-radius: 16px;
    padding: 22px 12px;
    cursor: pointer;
    transition: transform .2s, border-color .2s, box-shadow .2s;
    position: relative;
}
.uc-center .coin-pay-card:hover {
    border-color: var(--yz-primary);
    transform: translateY(-3px);
    box-shadow: var(--yz-shadow);
}
.uc-center .coin-pay-card h5 {
    color: var(--yz-primary);
    font-weight: 700;
}
.uc-center .coin-pay-card p {
    color: var(--yz-muted);
    font-size: 13px;
}
.uc-center .coin-pay-card.active {
    border-color: var(--yz-primary);
    background: var(--yz-grad-soft);
    box-shadow: 0 8px 22px rgba(30, 99, 233, .18);
}
.uc-center .coin-pay-card.active::after {
    content: "\2713";
    position: absolute;
    top: 10px; right: 12px;
    width: 22px; height: 22px;
    border-radius: 50%;
    background: var(--yz-grad);
    color: #fff;
    font-size: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ---------- 会员价格卡 ---------- */
.uc-center .price-card {
    border: 1px solid var(--yz-border);
    border-radius: var(--yz-radius);
    overflow: hidden;
    background: var(--yz-card);
    box-shadow: var(--yz-shadow);
    transition: transform .2s;
}
.uc-center .price-card:hover {
    transform: translateY(-4px);
}
.uc-center .price-header {
    background: var(--yz-grad) !important;
    color: #fff;
    padding: 22px 16px;
    border: none;
}
.uc-center .price-header .price-plan {
    font-weight: 700;
    font-size: 17px;
}
.uc-center .price-ammount {
    color: var(--yz-primary);
}
.uc-center .price-footer .btn {
    background: var(--yz-grad);
    border: none;
    color: #fff;
}

/* ---------- 列表/记录 ---------- */
.uc-center .list-group-item {
    border-color: var(--yz-border);
    border-radius: 10px !important;
    margin-bottom: 8px;
    color: var(--yz-text);
}
.uc-center .list-group-item-action:hover {
    background: var(--yz-grad-soft);
}
.uc-center .list-group-item .text-muted {
    color: var(--yz-muted) !important;
}

/* ---------- 徽章 ---------- */
.uc-center .badge.bg-primary {
    background: var(--yz-primary) !important;
}

/* ============================================================
   暗色模式
   ============================================================ */
:is([data-bs-theme="dark"], [data-theme="dark"]) .uc-center {
    --yz-card: #16203A;
    --yz-border: #26314F;
    --yz-text: #E6EDF7;
    --yz-muted: #9AA7C2;
    --yz-shadow: 0 8px 30px rgba(0, 0, 0, .35);
    --yz-grad-soft: linear-gradient(135deg, rgba(30, 99, 233, .18), rgba(25, 194, 230, .18));
}
:is([data-bs-theme="dark"], [data-theme="dark"]) .uc-center .form-control {
    background: #0F182C;
    color: var(--yz-text);
}
:is([data-bs-theme="dark"], [data-theme="dark"]) .uc-center .coin-pay-card {
    background: #16203A;
}
:is([data-bs-theme="dark"], [data-theme="dark"]) .uc-center .price-card {
    background: #16203A;
}