/* theme-custom.css
 * 用于存放 riniba_03 主题下的自定义样式，便于维护和升级
 */

/* 主题主色切换为 #0e1f73，整体风格更贴合品牌 */
:root {
    --theme-primary: #0e1f73;
    --theme-primary-light: #3a4db3;
    --theme-primary-dark: #09124a;
    --theme-primary-gradient: linear-gradient(90deg, #0e1f73 0%, #3a4db3 100%);
}

/* 全站主背景美化：淡雅渐变/柔和灰蓝色，突出卡片漂浮感 */
body,
.content-wrapper {
    background: linear-gradient(135deg, #f5f7fd 0%, #e6eafd 100%) !important;
    /* min-height: 100vh; */
    /* 兼容性与主题协调性考虑 */
}

@media (max-width: 576px) {
    body,
    .content-wrapper {
        background: linear-gradient(
            135deg,
            #f8fafd 0%,
            #eaf0fa 100%
        ) !important;
    }
}

/* riniba_03 主题全站卡片美化：现代漂浮阴影卡片风格 */
.card,
.plan-card,
.qa-list-card {
    background: linear-gradient(135deg, #fff 80%, #f5f7fd 100%);
    border: none;
    border-radius: 18px !important;
    box-shadow: 0 2px 12px 0 rgba(40, 60, 90, 0.1),
        0 6px 24px 0 rgba(40, 60, 90, 0.08);
    transition: box-shadow 0.25s cubic-bezier(0.4, 2, 0.6, 1),
        transform 0.18s cubic-bezier(0.4, 2, 0.6, 1), background 0.3s;
    overflow: hidden;
}

/* 取消卡片悬浮时的浮动和阴影增强效果 */
.card:hover,
.card:focus-within {
    box-shadow: 0 2px 12px 0 rgba(40, 60, 90, 0.1),
        0 6px 24px 0 rgba(40, 60, 90, 0.08);
    transform: none;
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.98) 80%,
        rgba(245, 248, 255, 0.95) 100%
    );
}

.card .card-header,
.card .card-body,
.card .card-footer {
    background: transparent !important;
    border: none !important;
}

.card .card-header {
    border-bottom: 1px solid rgba(180, 200, 230, 0.13) !important;
    font-weight: 600;
    font-size: 1.08rem;
    letter-spacing: 0.01em;
}

.card .card-body {
    padding: 1.25rem 1.5rem;
}

.card .card-footer {
    border-top: 1px solid rgba(180, 200, 230, 0.13) !important;
    background: transparent !important;
}

/* 移动端优化 */
@media (max-width: 576px) {
    .card {
        border-radius: 12px !important;
        box-shadow: 0 2px 8px 0 rgba(40, 60, 90, 0.1),
            0 4px 16px 0 rgba(40, 60, 90, 0.08);
        padding: 0.5rem 0.2rem;
    }
    .card .card-body {
        padding: 0.9rem 0.7rem;
    }
}

/* 卡片内图片圆角、阴影适配 */
.card img,
.card .avatar-sm {
    border-radius: 10px;
    box-shadow: 0 2px 8px 0 rgba(40, 60, 90, 0.07);
}

/* 卡片内按钮、标签等细节优化 */
.card .btn,
.card .badge,
.card .badge-info {
    border-radius: 8px !important;
    box-shadow: 0 1px 4px 0 rgba(40, 60, 90, 0.08);
}

/* 卡片内折叠区、列表等背景适配 */
.card .accordion-item,
.card .list-group-item {
    background: rgba(255, 255, 255, 0.92) !important;
    border-radius: 10px;
    margin-bottom: 0.5rem;
    border: none !important;
}

.article-tutorial-collapse {
    border-radius: 16px;
    box-shadow: 0 4px 24px 0 rgba(0, 0, 0, 0.1),
        0 1.5px 4px 0 rgba(0, 0, 0, 0.08);
    background: linear-gradient(135deg, #f8fafc 0%, #e9f1fb 100%);
    margin-bottom: 2rem;
    transition: box-shadow 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.article-tutorial-collapse:hover {
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.16), 0 3px 8px 0 rgba(0, 0, 0, 0.1);
}
.article-tutorial-header {
    display: flex;
    align-items: center;
    padding: 1.2rem 1.5rem 1rem 1.5rem;
    font-size: 1.25rem;
    font-weight: 600;
    color: #1a233a;
    background: linear-gradient(90deg, #e3eafc 0%, #f8fafc 100%);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    border-bottom: 1px solid #e0e7ef;
}
.article-tutorial-header .icon {
    margin-right: 0.75rem;
    font-size: 1.5rem;
    color: #3b82f6;
}
.article-tutorial-content {
    background: #fafdff;
    padding: 1.5rem 1.5rem 1.2rem 1.5rem;
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
    color: #334155;
    font-size: 1.08rem;
    line-height: 1.8;
}
@media (max-width: 768px) {
    .article-tutorial-header,
    .article-tutorial-content {
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* 问答模式文章教程区块美化 */
.qa-list-card {
    margin-bottom: 2rem;
    box-shadow: 0 4px 24px 0 rgba(40, 60, 90, 0.1),
        0 1.5px 6px 0 rgba(40, 60, 90, 0.08);
    border-radius: 20px !important;
    overflow: hidden;
}
.qa-list-title {
    background: linear-gradient(90deg, #6ea8fe 0%, #a7bfff 100%);
    border-radius: 20px 20px 0 0 !important;
    padding: 1rem 1.5rem;
}
.qa-list-title .btn {
    font-size: 1.1rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    background: rgba(255, 255, 255, 0.18);
    color: #2b3a55;
    border: none;
}
.qa-list-body {
    padding: 0.5rem 0.5rem 1.2rem 0.5rem;
    background: transparent;
}
.qa-accordion .qa-item {
    margin-bottom: 1rem;
    border-radius: 14px;
    box-shadow: 0 2px 10px 0 rgba(40, 60, 90, 0.07);
    background: #fff;
    border: none;
    overflow: hidden;
    transition: box-shadow 0.2s;
}
.qa-accordion .qa-item:last-child {
    margin-bottom: 0;
}
.qa-accordion .qa-item .qa-question-btn {
    background: none;
    border: none;
    box-shadow: none;
    font-size: 1.08rem;
    font-weight: 500;
    color: #2b3a55;
    padding: 1.1rem 1.2rem 1.1rem 1.1rem;
    border-radius: 14px;
    transition: background 0.18s;
}
.qa-accordion .qa-item .qa-question-btn:hover,
.qa-accordion .qa-item .qa-question-btn:focus {
    background: linear-gradient(90deg, #eaf0fa 0%, #f5f8ff 100%);
}
.qa-accordion .qa-icon {
    font-size: 1.25rem;
    color: #6ea8fe;
    flex-shrink: 0;
    display: inline-block;
    margin-right: 0.5rem;
}
.qa-accordion .qa-title {
    font-weight: 500;
    color: #2b3a55;
}
.qa-accordion .qa-answer {
    background: linear-gradient(90deg, #f8fafd 0%, #eaf0fa 100%);
    border-radius: 0 0 14px 14px;
    margin: 0 0.5rem 0.7rem 0.5rem;
    padding: 1.1rem 1.2rem 1.1rem 2.2rem;
    color: #3a466e;
    font-size: 1.01rem;
    box-shadow: 0 1px 4px 0 rgba(40, 60, 90, 0.04);
    animation: qa-fadein 0.4s;
}
@keyframes qa-fadein {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}
@media (max-width: 576px) {
    .qa-list-card,
    .qa-accordion .qa-item {
        border-radius: 12px !important;
    }
    .qa-list-title {
        padding: 0.7rem 0.7rem;
        border-radius: 12px 12px 0 0 !important;
    }
    .qa-accordion .qa-item .qa-question-btn {
        font-size: 1rem;
        padding: 0.8rem 0.7rem 0.8rem 0.7rem;
        border-radius: 12px;
    }
    .qa-accordion .qa-answer {
        padding: 0.8rem 0.7rem 0.8rem 1.5rem;
        border-radius: 0 0 12px 12px;
        margin: 0 0.2rem 0.5rem 0.2rem;
    }
}

/* VPN套餐卡片美化 */
.plan-list {
    margin-bottom: 2.5rem;
}
.plan-card {
    background: linear-gradient(135deg, #fff 80%, #f5f8ff 100%);
    border-radius: 20px;
    box-shadow: 0 4px 24px 0 rgba(40, 60, 90, 0.1),
        0 1.5px 6px 0 rgba(40, 60, 90, 0.08);
    padding: 2.2rem 1.5rem 1.7rem 1.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    transition: box-shadow 0.18s, transform 0.18s, border-color 0.18s;
    border: none;
}
.plan-card:hover,
.plan-card:focus-within {
    box-shadow: 0 8px 32px 0 rgba(40, 60, 90, 0.16),
        0 2px 8px 0 rgba(40, 60, 90, 0.13);
    transform: translateY(-6px) scale(1.03);
    border-color: #6ea8fe;
    z-index: 3;
}
.plan-card-featured {
    border: 2.5px solid var(--theme-primary);
    box-shadow: 0 8px 32px 0 rgba(40, 60, 90, 0.16),
        0 2px 8px 0 rgba(40, 60, 90, 0.1);
    z-index: 2;
    transform: scale(1.04);
}
.plan-card-featured:hover,
.plan-card-featured:focus-within {
    box-shadow: 0 12px 40px 0 rgba(40, 60, 90, 0.2),
        0 4px 16px 0 rgba(40, 60, 90, 0.15);
    transform: translateY(-8px) scale(1.05);
}
.plan-card-header {
    width: 100%;
    text-align: center;
    margin-bottom: 1.2rem;
    position: relative;
}
.plan-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #2b3a55;
    letter-spacing: 0.01em;
}
.plan-badge {
    position: absolute;
    top: -1.2rem;
    right: 1.2rem;
    background: var(--theme-primary-gradient);
    color: #fff;
    font-size: 0.98rem;
    font-weight: 600;
    border-radius: 12px;
    padding: 0.25rem 0.9rem;
    box-shadow: 0 2px 8px 0 rgba(40, 60, 90, 0.1);
}
.plan-price {
    font-size: 2.1rem;
    font-weight: 800;
    color: #3a466e;
    margin-bottom: 0.7rem;
    line-height: 1.1;
}
.plan-price .period {
    font-size: 1.1rem;
    color: #6ea8fe;
    font-weight: 500;
    margin-left: 0.2rem;
}
.plan-features {
    list-style: none;
    padding: 0;
    margin: 0 0 1.2rem 0;
    width: 100%;
}
.plan-features li {
    font-size: 1.08rem;
    color: #4a5a7a;
    margin-bottom: 0.5rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}
.plan-features i {
    color: #6ea8fe;
    font-size: 1.2rem;
}
.plan-buy-btn {
    width: 100%;
    font-size: 1.13rem;
    font-weight: 700;
    border-radius: 12px;
    padding: 0.85rem 0;
    margin-top: auto;
    background: var(--theme-primary-gradient);
    border: none;
    color: #fff !important;
    box-shadow: 0 2px 8px 0 rgba(40, 60, 90, 0.1);
    transition: background 0.18s, box-shadow 0.18s;
}
.plan-buy-btn:hover,
.plan-buy-btn:focus {
    background: linear-gradient(90deg, #0e1f73 0%, #233a8c 100%) !important;
    box-shadow: 0 4px 16px 0 rgba(40, 60, 90, 0.13);
}
@media (max-width: 768px) {
    .plan-card {
        padding: 1.3rem 0.7rem 1.1rem 0.7rem;
        border-radius: 14px;
    }
    .plan-card-header {
        margin-bottom: 0.7rem;
    }
    .plan-title {
        font-size: 1.08rem;
    }
    .plan-price {
        font-size: 1.4rem;
    }
    .plan-buy-btn {
        font-size: 1rem;
        border-radius: 10px;
        padding: 0.7rem 0;
    }
}

/* 登录按钮美化 */
.btn.btn-primary.rounded-pill {
    background: var(--theme-primary-gradient) !important;
    border: none;
    color: #fff;
    font-size: 1.08rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    box-shadow: 0 2px 8px 0 rgba(40, 60, 90, 0.1);
    transition: background 0.18s, box-shadow 0.18s, transform 0.15s;
}
.btn.btn-primary.rounded-pill:hover,
.btn.btn-primary.rounded-pill:focus {
    background: linear-gradient(90deg, #5a9bfa 0%, #7faaff 100%);
    color: #fff;
    box-shadow: 0 4px 16px 0 rgba(40, 60, 90, 0.13);
    transform: translateY(-2px) scale(1.04);
}
@media (max-width: 576px) {
    .btn.btn-primary.rounded-pill {
        font-size: 0.98rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

/* 登录界面美化，风格与 riniba_03 主题统一 */
.login-page-title {
    text-align: center;
    font-size: 2rem;
    font-weight: 800;
    color: #2b3a55;
    margin-bottom: 2rem;
    letter-spacing: 0.01em;
}
.card.card-body.sticky {
    border-radius: 22px;
    box-shadow: 0 6px 32px 0 rgba(40, 60, 90, 0.13),
        0 2px 8px 0 rgba(40, 60, 90, 0.09);
    background: linear-gradient(135deg, #fff 80%, #f5f8ff 100%);
    border: none;
    padding: 2.2rem 2rem 2rem 2rem;
}
.form-group {
    margin-bottom: 1.3rem;
}
.buy-title {
    font-size: 1.08rem;
    font-weight: 600;
    color: #3a466e;
    margin-bottom: 0.5rem;
}
.form-control {
    border-radius: 12px;
    border: 1.5px solid #eaf0fa;
    background: #f8fafd;
    font-size: 1.08rem;
    padding: 0.85rem 1.1rem;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.form-control:focus {
    border-color: var(--theme-primary);
    box-shadow: 0 0 0 2px rgba(14, 31, 115, 0.13);
    background: #fff;
}
.btn.btn-primary#submit {
    width: 100%;
    font-size: 1.13rem;
    font-weight: 700;
    border-radius: 14px;
    padding: 0.95rem 0;
    background: var(--theme-primary-gradient);
    border: none;
    box-shadow: 0 2px 8px 0 rgba(40, 60, 90, 0.1);
    transition: background 0.18s, box-shadow 0.18s;
}
.btn.btn-primary#submit:hover,
.btn.btn-primary#submit:focus {
    background: linear-gradient(90deg, #5a9bfa 0%, #7faaff 100%);
    box-shadow: 0 4px 16px 0 rgba(40, 60, 90, 0.13);
}
.btn.btn-secondary#refresh {
    border-radius: 10px;
    font-size: 1rem;
    padding: 0.5rem 1.2rem;
}
.mt-3.text-center a {
    color: #6ea8fe;
    font-weight: 600;
    text-decoration: underline;
    margin-left: 0.3rem;
}
@media (max-width: 576px) {
    .card.card-body.sticky {
        padding: 1.2rem 0.7rem 1.2rem 0.7rem;
        border-radius: 14px;
    }
    .login-page-title {
        font-size: 1.3rem;
        margin-bottom: 1.2rem;
    }
    .btn.btn-primary,
    .btn.btn-primary.rounded-pill,
    .plan-buy-btn {
        font-size: 0.98rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

/* 用户中心页面整体美化，风格与主题统一 */
.user-center-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 2rem 1.5rem;
    margin-bottom: 2.5rem;
    align-items: stretch;
}
.user-center-col {
    min-width: 0;
    display: flex;
}
.stats-card {
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 1.5rem 1.2rem;
    border-radius: 18px;
    box-shadow: 0 4px 24px 0 rgba(14, 31, 115, 0.1),
        0 1.5px 6px 0 rgba(14, 31, 115, 0.08);
    background: linear-gradient(135deg, #fff 80%, #f5f7fd 100%);
    border: none;
    position: relative;
    min-height: 110px;
}
.stats-icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background: var(
        --theme-primary-gradient,
        linear-gradient(90deg, #0e1f73 0%, #3a4db3 100%)
    );
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-right: 1.2rem;
    box-shadow: 0 2px 8px 0 rgba(14, 31, 115, 0.1);
    flex-shrink: 0;
}
.stats-detail {
    flex: 1 1 auto;
    min-width: 0;
}
.stats-detail > span {
    font-size: 1.08rem;
    font-weight: 600;
    color: #0e1f73;
    margin-bottom: 0.3rem;
    display: block;
}
.stats-member h6 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #2b3a55;
    margin-bottom: 0.2rem;
    word-break: break-all;
}
.btn.btn-pill,
.btn.btn-primary,
.btn.btn-warning,
.btn.btn-outline-orange {
    border-radius: 12px !important;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.5rem 1.2rem;
    margin-top: 0.5rem;
}
@media (max-width: 768px) {
    .user-center-row {
        grid-template-columns: 1fr;
        gap: 1.2rem 0.5rem;
    }
    .stats-card {
        flex-direction: row;
        padding: 1.1rem 0.7rem;
        min-height: 90px;
    }
    .stats-icon {
        width: 2.3rem;
        height: 2.3rem;
        font-size: 1.2rem;
        margin-right: 0.7rem;
    }
}

/* 用户中心整体居中与最大宽度限制 */
.user-center-container {
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    background: none;
}
@media (max-width: 1100px) {
    .user-center-container {
        max-width: 100%;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }
}

/* 移动端订单卡片美化 */
.order-list-mobile {
    margin-top: 1rem;
}
.order-card-mobile {
    border-radius: 1rem;
    box-shadow: 0 4px 16px 0 rgba(14, 31, 115, 0.08),
        0 1.5px 4px 0 rgba(14, 31, 115, 0.06);
    background: #fff;
    padding: 1.2rem 1rem 1rem 1rem;
    border: none;
}
.order-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.order-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 0.1rem;
}
.order-label {
    color: #7a869a;
    font-size: 0.98rem;
}
.order-value {
    color: #222;
    font-weight: 500;
    word-break: break-all;
}
.order-card-actions .btn {
    border-radius: 2rem;
    font-size: 1rem;
    font-weight: 500;
    box-shadow: none;
    margin-bottom: 0.2rem;
}
.order-card-actions .btn-primary {
    background: linear-gradient(90deg, #0e1f73 0%, #3a5be0 100%);
    border: none;
    color: #fff;
}
.order-card-actions .btn-warning {
    background: linear-gradient(90deg, #ffb300 0%, #ff6f00 100%);
    border: none;
    color: #fff;
}
.order-card-mobile .badge {
    font-size: 0.92rem;
    border-radius: 1rem;
    padding: 0.2em 0.8em;
}
@media (max-width: 768px) {
    .order-table {
        display: none !important;
    }
    .order-list-mobile {
        display: block !important;
    }
    .order-card-mobile {
        margin-bottom: 1.2rem;
    }
}
@media (min-width: 769px) {
    .order-list-mobile {
        display: none !important;
    }
}

/* 充值卡片、弹窗美化 */
#rechargeModal .modal-content,
#changePasswordModal .modal-content {
    border-radius: 16px;
    box-shadow: 0 4px 24px 0 rgba(14, 31, 115, 0.13);
}
#rechargeModal .modal-title,
#changePasswordModal .modal-title {
    color: #0e1f73;
    font-weight: 700;
}

/* 订单列表卡片 */
.vip-center.card {
    border-radius: 18px;
    box-shadow: 0 4px 24px 0 rgba(14, 31, 115, 0.1);
    background: #fff;
    margin-top: 2.5rem;
}
.vip-center .card-header {
    background: transparent;
    border-bottom: 1.5px solid #eaf0fa;
    font-size: 1.18rem;
    font-weight: 700;
    color: #0e1f73;
}
.order-table .table {
    border-radius: 12px;
    overflow: hidden;
    background: #f8fafd;
}
.order-table th,
.order-table td {
    vertical-align: middle;
    font-size: 1.01rem;
}
.order-table .badge {
    border-radius: 8px;
    font-size: 0.98rem;
    padding: 0.4em 0.9em;
}
.order-table .badge-primary {
    background: var(--theme-primary-gradient, #0e1f73);
    color: #fff;
}
.order-table .badge-warning {
    background: #ff9800;
    color: #fff;
}
.order-table .badge-success {
    background: #4caf50;
    color: #fff;
}
.order-table .badge-danger {
    background: #f44336;
    color: #fff;
}
.order-table .badge-secondary {
    background: #b0b8d1;
    color: #fff;
}
.order-table .badge-dark {
    background: #222b45;
    color: #fff;
}
.btn-link {
    color: #0e1f73;
    font-weight: 600;
    text-decoration: underline;
}
.btn-link:hover {
    color: #3a4db3;
}
/* 响应式布局优化 */
@media (max-width: 992px) {
    .user-center-row {
        flex-direction: column;
        gap: 1.2rem;
    }
    .user-center-col {
        max-width: 100%;
        min-width: 0;
    }
}

/* =====================
 * 支付方式选中极致美化
 * ===================== */
.payments {
    border: none;
    border-radius: 16px;
    background: #f7f9fd;
    transition: box-shadow 0.22s, background 0.22s, color 0.22s;
    box-shadow: 0 1px 6px 0 rgba(40, 60, 90, 0.07);
    position: relative;
    padding: 0.7rem 1.3rem 0.7rem 0.9rem;
    cursor: pointer;
    min-width: 130px;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    font-size: 1.08rem;
    color: #1a233a;
    font-weight: 500;
    outline: none;
    box-sizing: border-box;
}
.payments .btn {
    border: none;
    background: none;
    box-shadow: none;
    color: inherit;
    font-size: 1.25rem;
    padding: 0;
    margin-right: 0.4rem;
    display: flex;
    align-items: center;
    transition: color 0.22s, filter 0.22s;
}
.payments .paymentsvg {
    font-size: 2.1rem;
    width: 2.1rem;
    height: 2.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: filter 0.22s, box-shadow 0.22s;
}
.payments.active,
.vpnx-payments.active {
    border: 2.5px solid var(--theme-primary) !important;
    background: #fff !important;
    color: var(--theme-primary) !important;
    box-shadow: 0 0 0 2px rgba(14, 31, 115, 0.08),
        0 2px 8px 0 rgba(14, 31, 115, 0.1);
    outline: none !important;
    z-index: 2;
    transition: border-color 0.22s, box-shadow 0.22s, color 0.22s;
}
.payments.active .btn,
.payments.active .paymentsvg {
    color: var(--theme-primary) !important;
}
@media (max-width: 576px) {
    #paymentGroup {
        gap: 0.5rem !important;
    }
    .payments {
        min-width: 90px;
        font-size: 1rem;
        padding: 0.6rem 0.7rem 0.6rem 0.7rem;
        border-radius: 12px;
    }
    .payments .btn,
    .payments .paymentsvg {
        font-size: 1.3rem;
        width: 1.7rem;
        height: 1.7rem;
    }
    .content .container > main.content-wrapper > section.container > .row {
        flex-direction: column;
        gap: 0;
    }
    .content
        .container
        > main.content-wrapper
        > section.container
        > .row
        > .col-md-6 {
        width: 100%;
        max-width: 100%;
        padding-left: 0 !important;
        padding-right: 0 !important;
        margin-bottom: 1.2rem !important;
    }
    .content .card.h-100 {
        border-radius: 12px !important;
        padding: 1.1rem 0.7rem !important;
        box-shadow: 0 2px 10px 0 rgba(14, 31, 115, 0.07);
    }
    .ps-md-4,
    .ps-xl-5 {
        padding-left: 0 !important;
    }
    .needs-validation {
        padding: 0.5rem 0.2rem 0.2rem 0.2rem;
        background: #fff;
        border-radius: 10px;
        box-shadow: 0 1px 6px 0 rgba(40, 60, 90, 0.06);
    }
    .needs-validation .form-group,
    .needs-validation .mb-3,
    .needs-validation .mb-4 {
        margin-bottom: 0.9rem !important;
    }
    .needs-validation label.form-label,
    .needs-validation .buy-title {
        font-size: 1rem;
        margin-bottom: 0.3rem;
        font-weight: 500;
    }
    .needs-validation input,
    .needs-validation select,
    .needs-validation .form-control {
        font-size: 1rem;
        border-radius: 7px;
        padding: 0.5rem 0.7rem;
    }
    .needs-validation button.btn {
        font-size: 1.08rem;
        padding: 0.7rem 0.5rem;
        border-radius: 8px;
    }
    .count-input {
        width: 100% !important;
        gap: 0.5rem;
    }
    .count-input input[type="number"] {
        width: 60px !important;
        min-width: 60px;
        text-align: center;
    }
    .sticky-product-banner-inner {
        padding-top: 0.5rem !important;
    }
}

/* 增强移动端下用户信息按钮（邮箱）样式，缩小字体、减小padding、限制最大宽度、超出省略，彻底防止溢出错乱 */
@media (max-width: 576px) {
    .navbar .btn-outline-primary.rounded-pill {
        font-size: 0.82rem !important;
        max-width: 120px !important;
        padding-left: 0.7rem !important;
        padding-right: 0.7rem !important;
        min-height: 2.2rem !important;
        text-overflow: ellipsis !important;
        overflow: hidden !important;
        white-space: nowrap !important;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }
}

/* 用户信息按钮移动端极窄屏适配 */
@media (max-width: 480px) {
    .btn-outline-primary.dropdown-toggle {
        font-size: 0.85rem !important;
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
        max-width: 140px !important;
        min-width: 0 !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        overflow: hidden !important;
        display: inline-flex;
        align-items: center;
        gap: 0.25rem;
    }
    .btn-outline-primary.dropdown-toggle .ci-user {
        margin-right: 0.25rem !important;
        font-size: 1rem !important;
    }
}
@media (max-width: 360px) {
    .btn-outline-primary.dropdown-toggle {
        font-size: 0.78rem !important;
        max-width: 100px !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}
/* 保证暗色模式下按钮文字可见 */
body[data-bs-theme="dark"] .btn-outline-primary.dropdown-toggle {
    color: #fff !important;
    border-color: var(--bs-primary) !important;
}

/* 导航栏用户邮箱超长省略样式 */
.user-email-ellipsis {
    display: inline-block;
    max-width: 120px;
    vertical-align: bottom;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
@media (max-width: 576px) {
    .user-email-ellipsis {
        max-width: 80px;
        font-size: 0.82rem;
    }
}
#submit-main {
    min-width: 0;
    width: 100%;
}