/* =========================================================
   平板端专用样式 (769px ~ 1024px)
========================================================= */

/* =========================================================
   0. HIDE DEFAULT ELEMENTS
========================================================= */
.woocommerce-MyAccount-navigation {
    display: none !important;
}

.topbar-left {
    display: none !important;
}

/* =========================================================
   1. BASE BADGE STYLE
========================================================= */
/*/*//*/


/*//*/ =========================================================
   1. ACCOUNT USER LAYOUT
========================================================= */

/* avatar + content */
.account-user.circle {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* avatar */
.account-user.circle .image {
    flex-shrink: 0;
}

/* username area */
.account-user.circle .user-name {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    margin: 0;
}

/* user id */
.account-user.circle .user-name em {
    font-size: 12px;
    opacity: 0.5;
    margin-top: 2px;
}

/* membership label */
/* =========================================================
   DEFAULT (非 iOS / Android / Desktop)
========================================================= */

.membership-inline {
    display: block !important;

    margin-left: 25px !important; /* 非 iOS 默认 */
    margin-top: 4px !important;

    font-size: 22px;
    font-weight: 600;
    white-space: nowrap;
}


/* =========================================================
   iOS ONLY (iPhone + iPad Safari)
========================================================= */
@supports (-webkit-touch-callout: none) {

    .membership-inline {
        margin-left: 39px !important; /* iOS 专用 */
    }
}
/*/*/

/* Hide My Account Panel Mobile */
@media (max-width: 768px) {
    .page-title-inner {
        display: none !important;
    }
}


/*/*/

/* WPLoyalty Top Gap Mobile*/
@media (max-width: 768px) {
    .woocommerce-notices-wrapper {
        display: none !important;
    }
}

/* WPLoyalty Page Top Mobile*/
@media only screen and (max-width: 768px) {

    /* 去掉 WooCommerce 默认提示区域空白 */
    .woocommerce-notices-wrapper {
        display: none !important;
        margin: 0 !important;
        padding: 0 !important;
        min-height: 0 !important;
    }

    /* 去掉 My points 标题区域空白 */
    .wlr-heading-container {
        margin: 0 !important;
        padding: 0 !important;
    }

    .wlr-heading {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1.2 !important;
    }

    /* 去掉用户卡顶部间距 */
    .wlr-user-details {
        margin-top: 0 !important;
        padding-top: 20px !important;
    }

    /* 整体页面容器压缩 */
    .wlr-myaccount-page {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }
}

/* WPLoyalty Page Header Mobile*/
@media (max-width: 768px) {
    h3.wlr-heading {
        display: none !important;
    }
}

/* WPLoyalty Points Mobile*/
@media (max-width: 768px) {

    /* ⭐ 只让前两个并排 */
    #wlr-points {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    /* ⭐ 卡片统一样式 */
    #wlr-available-points,
    #wlr-redeemed-points {
        width: 100% !important;
        display: flex !important;
        flex-direction: column;
        box-sizing: border-box;
        padding: 10px;
    }

    /* ⭐ Used rewards 单独一整行 */
    #wlr-used-rewards {
        grid-column: 1 / -1 !important;
        width: 100% !important;
        display: flex !important;
        flex-direction: column;
        margin-top: 10px;
        padding: 10px;
        box-sizing: border-box;
    }

    /* ⭐ icon 调整 */
    .wlr-icon {
        width: 32px !important;
        height: 32px !important;
    }

    /* ⭐ 数字优化 */
    #wlr-available-point-value,
    #wlr-redeemed-point-value,
    #wlr-used-reward-value-count {
        font-size: 18px !important;
        font-weight: 700;
    }
}
/* WPLoyalty Reward Mobile*/
.wlr-user-reward-titles {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    overflow-x: auto; /* 防止手机挤爆换行 */
    -webkit-overflow-scrolling: touch;
}

/* 每个 tab 强制同宽或自适应 */
.wlr-my-rewards-title {
    flex: 1 0 auto;
    text-align: center;
    white-space: nowrap;
}

/* icon + text 居中 */
.wlr-my-rewards-title h4 {
    margin: 0;
    font-size: 14px;
}

/**/
.wlr-user-reward-titles {
    display: flex !important;
    flex-wrap: wrap !important;
}

/* 前两个在第一行 */
.wlr-rewards-title,
.wlr-coupons-title {
    flex: 1 1 48%;
}

/* 第三个强制换行 + 占满整行 */
.wlr-coupons-expired-title {
    flex: 1 1 100%;
}
/*/*/

/* 隐藏Rewards Coupons外框*/
@media (max-width: 768px) {

    /* 隐藏外框标题 My rewards + 外层容器 */
    .wlr-your-reward > .wlr-heading-container {
        display: none !important;
    }

    /* 如果你说的“外框”是整个模块边距/背景 */
    .wlr-your-reward {
        padding: 0 !important;
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
    }
}

/**/
@media (max-width: 768px) {

    .wlr-table {
        width: 100% !important;
        min-width: 700px; /* 保证结构不崩 */
    }

    #wlr-transaction-table {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .wlr-table th,
    .wlr-table td {
        white-space: nowrap;
        font-size: 16px;
        padding: 6px 8px;
    }
}
/* Intro Card Mobile */
@media (max-width: 768px) {

    .wlr-campaign-container {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 10px;
    }

    .wlr-campaign-container .wlr-card {
        flex: 1 1 50%;
        min-width: 0;
    }

    .wlr-card-container {
        padding: 10px 8px;
    }

    .wlr-name,
    .wlr-discount-point {
        font-size: 12px;
        line-height: 1.2;
    }

    .wlr-card-container i {
        width: 32px !important;
        height: 32px !important;
    }
}

















/* =========================================================
   2. GRADIENT ENGINE (关键)
======================================================*/





/* =========================================================
   1. BASE TEXT SYSTEM
========================================================= */

.membership-inline {
    display: inline-block !important;

    background-repeat: no-repeat;
    background-size: 100% 100%;

    -webkit-background-clip: text !important;
    background-clip: text !important;

    -webkit-text-fill-color: transparent !important;
    color: transparent !important;

    font-weight: 700;
    line-height: 1;

    text-transform: uppercase;
    letter-spacing: 0.06em;

    will-change: transform, filter;
}


/* =========================================================
   2. ACTIVE（平衡版呼吸）
   ✔ 0.9 → 1.25 → 1.4（你指定标准）
========================================================= */

@keyframes membership-active {
    0%, 100% {
        filter: brightness(0.9) saturate(0.95);
    }

    50% {
        filter: brightness(1.25) saturate(1.1);
    }
}


/* =========================================================
   3. UPGRADE（平衡闪光）
   ✔ 降低极端亮度，保留“状态变化感”
========================================================= */

@keyframes membership-upgrade {
    0% {
        filter: brightness(1);
    }

    12% {
        filter: brightness(1.4) saturate(1.15);
    }

    28% {
        filter: brightness(0.95);
    }

    45% {
        filter: brightness(1.3);
    }

    65% {
        filter: brightness(1.05);
    }

    85% {
        filter: brightness(1.15);
    }

    100% {
        filter: brightness(1);
    }
}


/* =========================================================
   4. MEMBERSHIP COLORS
========================================================= */

/* Free */
.membership-free,
.membership-free-member {
    background-image: linear-gradient(
        90deg,
        #B0B7C3,
        #7C8593,
        #5B6472
    );
}

/* Explorer */
.membership-explorer {
    background-image: linear-gradient(
        90deg,
        #7C8593,
        #5B6472,
        #7C8593
    );
}

/* Scribe */
.membership-scribe {
    background-image: linear-gradient(
        90deg,
        #2563EB,
        #60A5FA,
        #2563EB
    );
}

/* Archivist */
.membership-archivist {
    background-image: linear-gradient(
        90deg,
        #047857,
        #34D399,
        #047857
    );
}

/* Curator */
.membership-curator {
    background-image: linear-gradient(
        90deg,
        #B45309,
        #FBBF24,
        #B45309
    );

    animation: membership-active 3.8s ease-in-out infinite;
}

/* Collector */
.membership-collector {
    background-image: linear-gradient(
        90deg,
        #C2410C,
        #FB923C,
        #C2410C
    );

    animation: membership-active 3.2s ease-in-out infinite;
}

/* Connoisseur */
.membership-connoisseur {
    background-image: linear-gradient(
        90deg,
        #6D28D9,
        #A78BFA,
        #6D28D9
    );

    animation: membership-active 3.5s ease-in-out infinite;
}

/* Paragon */
.membership-paragon {
    background-image: linear-gradient(
        90deg,
        #8A6A1A,
        #C89B2C,
        #8A6A1A
    );

    animation: membership-active 4.2s ease-in-out infinite;
}


/* =========================================================
   5. STATE SYSTEM（统一升级闪光）
========================================================= */

.membership-upgraded {
    animation:
        membership-upgrade 1.3s ease-in-out 2,
        membership-active 3.5s ease-in-out infinite !important;
}

/* =========================================================
   4. DASHBOARD TABS UI (MOBILE ONLY)
========================================================= */

@media (max-width: 768px) {

    .dashboard-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
        padding: 10px 8px;
        background: #f6f6f6;
        border-bottom: 5px solid #eee;
    }

    .dashboard-tabs a {
        display: block;
        text-align: center;
        padding: 10px 6px;
        background: linear-gradient(90deg, #f5f5f5, #eaeaea);
        font-size: 16px;
        text-decoration: none;
        color: #333;
    }
}

/* Desktop 直接隐藏 */
@media (min-width: 769px) {
    .dashboard-tabs {
        display: none !important;
    }
}



/* =========================================================
   5. TOPBAR LINKS CLEAN
========================================================= */



/* =========================================================
   6. GAP BELOW NOTICES
========================================================= */
.woocommerce-notices-wrapper {
    margin-bottom: 22px;
}

/*Dashboard Mobile Tab Bottom Gap*/
@media (max-width: 768px) {
    .dashboard-tabs {
        margin-bottom: 24px;
    }
}

/*Dashboard Address Format*/
@media (max-width: 768px) {

    .woocommerce-Addresses.col2-set.addresses {
        display: flex;
        gap: 12px;
        flex-wrap: nowrap;
    }

    .woocommerce-Addresses .u-column1,
    .woocommerce-Addresses .u-column2 {
        width: 50%;
        float: none !important;
        margin: 0;
    }

    .woocommerce-Address {
        background: #fff;
        border-radius: 10px;
        padding: 12px;
        box-sizing: border-box;
    }

    .woocommerce-Address-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
    }

    .woocommerce-Address address {
        font-size: 13px;
        line-height: 1.4;
    }
}

/*Membership Badge Font Title*/

@media (max-width: 768px) {

    .woocommerce table.memberships thead th,
    .woocommerce table thead th.membership-plan,
    .woocommerce table thead th.membership-start-date,
    .woocommerce table thead th.membership-end-date,
    .woocommerce table thead th.membership-status,
    .woocommerce table thead th.membership-next-bill-on,
    .woocommerce table thead th.membership-actions {

        font-size: 10px;
        font-weight: 500;
        padding: 6px 4px;
        white-space: nowrap;
    }

    .woocommerce table.memberships thead th span.nobr {
        font-size: 11px;
    }
}

/**/
@media (max-width: 768px) {

    th.membership-next-bill-on,
    td.membership-next-bill-on {
        position: relative;
        left: 16px;
    }
}

/**/
td.membership-actions.order-actions {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    white-space: nowrap !important;
}

/* 所有按钮统一大小 */
td.membership-actions a.button {
    font-size: 12px !important;
    padding: 3px 8px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}


/*Membership Badge Botton Position*/
.membership-upgrade-box {
    display: inline-flex !important;
    gap: 9px !important;
    align-items: center;
}

/* ❗ 清掉 Woo 默认按钮样式干扰 */
.membership-upgrade-box a.button,
td.membership-actions a.button {
    margin: 0 !important;
}

/* ✔ Cancel 不单独控制 margin（交给 gap） */
td.membership-actions a.cancel {
    float: none !important;
    display: inline-block !important;
    vertical-align: middle;
}

/* ✔ 整体左对齐 */
td.membership-actions.order-actions {
    text-align: left !important;
}

/**/
table.memberships,
table.woocommerce-table--memberships {
    table-layout: auto !important;
}

/* 关键：打破 table 行内压缩 */
td.membership-actions.order-actions {
    white-space: normal !important;
    text-align: left !important;
}

/* 把 actions 变成真正布局容器 */
td.membership-actions.order-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    align-items: center !important;
}

/* 所有按钮统一大小 */
td.membership-actions a.button {
    font-size: 12px !important;
    padding: 3px 8px !important;
    line-height: 1.2 !important;
    margin: 0 !important;
}

/* Cancel 特殊处理（不会再失效） */
td.membership-actions a.cancel {
    float: none !important;
    order: 99; /* 放最后 */
}
/*Up Down Botton*/
a.button.cancel {
    transform: translateY(1px); /* 往下 1px */
}

a.button.cancel,
.membership-upgrade-box a.button {
    font-size: 12px !important;     /* 字体大小 */
    padding: 3px 8px !important;    /* 控制按钮大小 */
    line-height: 1.9 !important;    /* 控制高度 */
    height: auto !important;
    min-height: unset !important;
}

/* Membership Button View */
td.membership-actions.order-actions a.view {
    font-size: 12px !important;
    padding: 3px 18px !important;
    line-height: 1.2 !important;
    transform: translateY(5px);
}

/*Scbscription Botton*/

td.membership-actions.order-actions a.view {
    font-size: 12px !important;
    padding: 3px 15px !important;
    line-height: 1.2 !important;
    transform: translateY(-2px);
}

td.membership-actions.order-actions a.view-subscription {
    font-size: 12px !important;
    padding: 3px 8px !important;
    line-height: 1.2 !important;
    transform: translateY(2px);
}

/*2 Line*/
td.membership-end-date div,
td.membership-next-bill-on div {
    line-height: 1.2;
}

.date-line-1 {
    display: block;
}

.date-line-2 {
    display: block;
    font-weight: 500;
}

/**/
td.membership-next-bill-on {
    text-indent: -5px !important;
}

/*Manage Subscription*/

td.membership-actions {
    font-size: 12px !important;
    padding: 3px 15px !important;
    line-height: 1.2 !important;
    transform: translateY(-2px);
}

.membership-upgrade-box {
    font-size: 12px !important;
    padding: 3px 8px !important;
    line-height: 1.4 !important;
    transform: translateY(-7px);
}

.membership-upgrade-box a.button {
    font-size: 14px !important;
    padding: 6px 16px !important;
    line-height: 1.6 !important;
    border-radius: 0px !important;
}

/*Dashboard Highlight*/
.dashboard-tabs a.active,
.dashboard-tabs a.active:hover,
.dashboard-tabs a.active:visited {
    background: #ffffff !important;
    background-color: #555555 !important;
    background-image: none !important;

    color: #ffffff !important;
    border-radius: 0 !important;
    padding: 10px 10px !important;
    font-weight: 900 !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.8) !important;
}

























/* =========================================================
   7. FINAL OVERRIDE FIX (SAMSUNG / ANDROID CONSISTENCY PATCH)
   不删除原代码，仅做最终强制覆盖
========================================================= */

/* ================================
   1. Dashboard Active 强制统一背景（解决冲突）
   ================================ */
.dashboard-tabs a.active,
.dashboard-tabs a.active:hover,
.dashboard-tabs a.active:visited {

    /* 强制统一背景（解决 background vs background-color 冲突） */
    background: #555555 !important;
    background-color: #555555 !important;

    /* 防止渐变或继承干扰 */
    background-image: none !important;

    color: #ffffff !important;

    border-radius: 0 !important;
    padding: 10px 10px !important;
    font-weight: 900 !important;

    box-shadow: 0 2px 6px rgba(0,0,0,0.85) !important;

    /* ⭐ 关键：避免 Android 渲染抖动 */
    -webkit-appearance: none !important;
    -webkit-tap-highlight-color: transparent;
    transform: translateZ(0);
}


/* ================================
   2. Membership Actions 统一对齐（解决 Samsung 轻微错位）
   ================================ */
td.membership-actions.order-actions,
td.membership-actions {

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: 6px !important;

    white-space: normal !important;
    text-align: left !important;

    /* Android 兼容修复 */
    -webkit-box-align: center;
}


/* ================================
   3. Cancel Button 位移统一（避免 Samsung 不对称）
   ================================ */
a.button.cancel {
    transform: translateY(1px) translateZ(0) !important;
}


/* ================================
   4. View / Subscription Button 渲染统一（修复冲突）
   ================================ */
td.membership-actions.order-actions a.view,
td.membership-actions.order-actions a.view-subscription {

    font-size: 12px !important;
    line-height: 1.2 !important;

    transform: translateY(0px) !important;

    -webkit-transform: translateY(0px) !important;
}


/* ================================
   5. Dashboard Tabs 防 Android 1px 错位
   ================================ */
.dashboard-tabs a {

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    transform: translateZ(0);
}


/* ================================
   6. 强制统一按钮 box model（避免不同浏览器计算差异）
   ================================ */
.membership-upgrade-box a.button,
td.membership-actions a.button {

    box-sizing: border-box !important;
    -webkit-box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
}





/* =========================================================
   8. ANDROID / SAMSUNG UI SIZE FIX (TOPBAR + DASHBOARD)
   不删除原代码，仅修正安卓放大问题
========================================================= */

/* ================================
   1. 强制关闭 Android 自动字体缩放
   ================================ */
html {
    -webkit-text-size-adjust: 100% !important;
    text-size-adjust: 100% !important;
}


/* ================================
   2. TOPBAR 统一缩小（Android 专用）
   ================================ */
@media screen and (max-width: 768px) {

    .topbar-right a {
        font-size: 14px !important;
        line-height: 1.2 !important;
    }

    .topbar-right a::after {
        font-size: 14px !important;
    }
}


/* ================================
   3. DASHBOARD TAB 压缩（Android 更明显）
   ================================ */
@media (max-width: 768px) {

    .dashboard-tabs {
        padding: 6px 6px !important;
        gap: 6px !important;
    }

    .dashboard-tabs a {
        font-size: 14px !important;
        padding: 8px 4px !important;
        line-height: 1.1 !important;
    }
}


/* ================================
   4. 防止 Android 自动扩大点击区域
   ================================ */
.dashboard-tabs a,
.topbar-right a {

    -webkit-tap-highlight-color: transparent;

    touch-action: manipulation;

    /* 防止系统强制放大按钮视觉 */
    min-height: unset !important;
}


/* ================================
   5. Samsung Chromium 字体微调
   ================================ */
@media screen and (-webkit-min-device-pixel-ratio:0) {

    .dashboard-tabs a,
    .topbar-right a {
        font-weight: 500;
        letter-spacing: -0.2px;
    }
}



/* =========================================================
   9. CROSS-DEVICE UI SYSTEM CORE (iOS / Android / Samsung UNIFIED)
   不删除任何原代码，只建立统一渲染基线
========================================================= */


/* ================================
   1. 全局渲染基线锁定（解决 Android 放大）
   ================================ */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;

    /* 防止 Samsung / Chrome subpixel 放大差异 */
    font-synthesis: none;
}


/* ================================
   2. UI 统一变量系统（核心设计基准）
   ================================ */
:root {

    /* 字体系统 */
    --ui-font-base: 14px;
    --ui-font-small: 12px;
    --ui-font-large: 16px;

    /* 间距系统 */
    --ui-gap-xs: 4px;
    --ui-gap-sm: 6px;
    --ui-gap-md: 10px;

    /* 按钮系统 */
    --ui-btn-padding: 6px 10px;
    --ui-btn-line: 1.2;

    /* 卡片圆角统一 */
    --ui-radius: 0px;
}


/* ================================
   3. 强制统一 Topbar（跨浏览器一致）
   ================================ */
.topbar-right a {
    font-size: var(--ui-font-base) !important;
    line-height: 1.2 !important;
    display: inline-flex;
    align-items: center;
}


/* ================================
   4. Dashboard Tab 系统化
   ================================ */
.dashboard-tabs {

    gap: var(--ui-gap-sm) !important;
    padding: var(--ui-gap-sm) !important;
}

.dashboard-tabs a {

    font-size: var(--ui-font-base) !important;
    padding: var(--ui-btn-padding) !important;
    line-height: var(--ui-btn-line) !important;

    border-radius: var(--ui-radius) !important;

    /* 防止 Android 自动变高 */
    min-height: unset !important;

    display: flex;
    align-items: center;
    justify-content: center;
}


/* ================================
   5. Button System（统一所有 Woo 按钮）
   ================================ */
a.button,
button,
.membership-upgrade-box a.button,
td.membership-actions a.button {

    font-size: var(--ui-font-small) !important;
    padding: var(--ui-btn-padding) !important;
    line-height: var(--ui-btn-line) !important;

    border-radius: var(--ui-radius) !important;

    box-sizing: border-box !important;

    display: inline-flex !important;
    align-items: center;
    justify-content: center;

    /* 防 Android 视觉抖动 */
    transform: translateZ(0);
}


/* ================================
   6. Table Actions 统一行为（Membership区修复）
   ================================ */
td.membership-actions,
td.membership-actions.order-actions {

    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap !important;

    gap: var(--ui-gap-sm) !important;

    white-space: normal !important;
}


/* ================================
   7. Android / Samsung 额外修复层
   ================================ */
@media screen and (max-width: 768px) {

    /* 防止字体被放大 */
    body {
        -webkit-text-size-adjust: 100% !important;
    }

    /* Topbar 压缩 */
    .topbar-right a {
        font-size: 13px !important;
    }

    /* Dashboard 更紧凑 */
    .dashboard-tabs {
        padding: 6px !important;
    }

    .dashboard-tabs a {
        font-size: 13px !important;
        padding: 6px 6px !important;
    }
}


/* ================================
   8. iOS vs Android 对齐修正（关键）
   ================================ */
@supports (-webkit-touch-callout: none) {

    /* iOS 专属微调 */
    .dashboard-tabs a {
        letter-spacing: 0;
    }
}

@media screen and (-webkit-min-device-pixel-ratio:0) {

    /* Android Chrome / Samsung */
    .dashboard-tabs a,
    .topbar-right a {
        letter-spacing: -0.2px;
        font-weight: 500;
    }
}


/* ================================
   9. 防止所有设备 hover/active 抖动
   ================================ */
.dashboard-tabs a:active,
.topbar-right a:active {
    transform: translateZ(0);
    -webkit-tap-highlight-color: transparent;
}





/* =========================================================
   MOBILE: HIDE CREDIT / POINTS VALUES COMPLETELY + BOLD UI
========================================================= */












/* =========================================================
   MOBILE SAAS TOPBAR: CENTER + COMPACT INSIDE ACCOUNT TOPBAR
========================================================= */

@media (max-width: 768px) {

    /* =========================
       1. Topbar 容器变成真正 flex 居中
       ========================= */
    .account-topbar {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        padding: 6px 10px !important;

        overflow: hidden;
    }

    .topbar-right {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;

        gap: 6px !important; /* ✔ 间距变小 */

        flex-wrap: nowrap !important;
    }

    /* =========================
       2. SaaS pill button 统一放大 + 居中
       ========================= */
    .topbar-right a {

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 15px !important;  /* ✔ 字体变大 */
        font-weight: 700 !important;

        padding: 6px 10px !important; /* ✔ 更紧凑 */

        line-height: 1 !important;

        border-radius: 999px;

        white-space: nowrap;

        text-align: center;

        -webkit-tap-highlight-color: transparent;
    }

    /* =========================
       3. Credit / Points 内容居中强化
       ========================= */
    .topbar-right a::after {
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* =========================
       4. 防止 Android 撑高高度
       ========================= */
    .topbar-right a,
    .account-topbar {
        line-height: 1.1 !important;
    }

    /* =========================
       5. 防止内容跑出 topbar
       ========================= */
    .account-topbar {
        max-width: 100%;
        box-sizing: border-box;
    }
}









/* =========================================================
   MOBILE SAAS TOPBAR: ULTRA COMPACT SPACING TUNING
========================================================= */

@media (max-width: 768px) {

    /* =========================
       1. 容器间距再收紧
       ========================= */
    .account-topbar {
        padding: 6px 20px !important;  /* ↓ 更紧 */
    }

    .topbar-right {
        gap: 0px !important; /* ✔ 核心：间距缩小 */
    }

    /* =========================
       2. Button 内部压缩
       ========================= */
    .topbar-right a {

        padding: 4px 6px !important; /* ↓ 从6/10 → 更紧 */

        font-size: 16px !important; /* 稍微保持可读性 */

        line-height: 1 !important;

        border-radius: 0px;
    }

    /* =========================
       3. 去掉 Android 额外视觉空白
       ========================= */
    .topbar-right a span,
    .topbar-right a::after {
        margin: 0 !important;
        padding: 0 !important;
        line-height: 1 !important;
    }

    /* =========================
       4. 强制 vertical alignment 紧凑
       ========================= */
    .topbar-right a {
        align-items: center !important;
        justify-content: center !important;
    }

    /* =========================
       5. 防止字体撑高行距（Samsung关键）
       ========================= */
    .topbar-right {
        line-height: 1 !important;
    }
}








/* =========================================================
   iOS TOPBAR ALIGN FIX (Safari / iPhone 专用)
========================================================= */

@media (max-width: 768px) {

    /* =========================
       1. 强制整体变 flex 对齐（关键）
       ========================= */
    .topbar-right {
        display: flex !important;
        align-items: center !important;  /* ✔ 垂直对齐修复 */
        flex-wrap: nowrap !important;
        white-space: nowrap;
    }

    /* =========================
       2. 所有 item 统一 baseline
       ========================= */
    .topbar-right a,
    .topbar-right .divider {
        display: inline-flex !important;
        align-items: center !important;
        vertical-align: middle !important;
        line-height: 1 !important;
    }

    /* =========================
       3. divider 修复（iPhone错位核心原因）
       ========================= */
    .topbar-right .divider {
        display: flex !important;
        align-items: center !important;

        margin: 0 4px !important;
        padding: 0 !important;

        font-size: 12px;
        line-height: 1;
        opacity: 0.4;
    }

    /* =========================
       4. 统一 link 基线（防字体不同造成错位）
       ========================= */
    .topbar-right a {
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    /* =========================
       5. iOS font rendering fix（关键细节）
       ========================= */
    .topbar-right a {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}







/* =========================================================
   TOPBAR ACTIVE HIGHLIGHT (SAAS STYLE)
========================================================= */

@media (max-width: 768px) {

    .topbar-right a.active {

        background: #111 !important;
        color: #fff !important;

        font-weight: 800 !important;

        border-radius: 0px;

        padding: 8px 10px !important;

        transform: translateY(-1px);

        box-shadow: 0 2px 8px rgba(0,0,0,0.25);

        transition: all 0.2s ease;
    }

    /* 防止 divider 影响视觉 */
    .topbar-right a.active + .divider {
        opacity: 0 !important;
    }
}











/* =========================================================
   TOPBAR: CREDIT / POINTS ACTIVE = WHITE TEXT STYLE
========================================================= */












/* =========================================================
   DASHBOARD TABS: ENLARGED SAAS NAV SYSTEM
========================================================= */

@media (max-width: 768px) {

    /* =========================
       1. 整体容器变更高级卡片感
       ========================= */
    .dashboard-tabs {
        padding: 10px 12px !important;

        background: #f7f7f7 !important;

        border-radius: 12px;

        gap: 3px !important;

        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }

    /* =========================
       2. tab 字体变大（核心）
       ========================= */
    .dashboard-tabs a {

        font-size: 14px !important;   /* ✔ 明显变大 */
        font-weight: 600 !important;

        padding: 10px 12px !important; /* ✔ 高度增加 */

        border-radius: 10px;

        line-height: 1.2 !important;

        text-align: center;

        transition: all 0.2s ease;
    }

    /* =========================
       3. active 状态强化
       ========================= */
    .dashboard-tabs a.active {

        font-size: 14px !important;   /* ✔ active 更大 */

        font-weight: 800 !important;

        background: #111 !important;
        color: #fff !important;

        transform: translateY(-1px);

        box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    }

    /* =========================
       4. hover / touch feedback
       ========================= */
    .dashboard-tabs a:active {
        transform: scale(0.98);
    }

    /* =========================
       5. Android / Samsung 防挤压优化
       ========================= */
    .dashboard-tabs {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        overflow: hidden;
    }

    .dashboard-tabs a {
        white-space: nowrap;
        min-width: 0;
    }
}










/* =========================================================
   MEMBERSHIP TABS: COMPACT SAAS SECONDARY NAV
========================================================= */

@media (max-width: 768px) {

    /* =========================
       1. 整体变紧凑
       ========================= */
    .membership-tabs {
        display: flex !important;
        flex-wrap: nowrap !important;

        gap: 6px !important;

        overflow-x: auto;
        -webkit-overflow-scrolling: touch;

        padding: 6px 0 !important;
    }

    /* =========================
       2. 字体缩小（核心）
       ========================= */
    .membership-tabs a {

        font-size: 12px !important;   /* ✔ 明显变小 */
        font-weight: 600 !important;

        padding: 6px 8px !important;

        white-space: nowrap;

        line-height: 1 !important;

        border-radius: 0px;

        flex: 0 0 auto;

        color: #333;
    }

    /* =========================
       3. active 状态保持清晰
       ========================= */
    .membership-tabs a.active {

        font-size: 12px !important;   /* 不放大，保持一致 */
        font-weight: 800 !important;

        background: #111 !important;
        color: #fff !important;

        padding: 6px 10px !important;

        border-radius: 0px;

        box-shadow: 0 2px 6px rgba(0,0,0,0.15);
    }

    /* =========================
       4. iOS / Android 滚动优化
       ========================= */
    .membership-tabs::-webkit-scrollbar {
        display: none;
    }
}
















/* =========================================================
   MEMBERSHIP ACTIONS FINAL FIX (TABLE + FLEX HYBRID FIX)
========================================================= */

@media (max-width: 768px) {

    /* =========================
       1. 强制 td 变成纯 flex container
       ========================= */
    td.membership-actions.order-actions {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;

        justify-content: flex-start !important;

        gap: 1px !important; /* ✔ 真正生效的gap */

        white-space: nowrap !important;

        width: 100% !important;

        box-sizing: border-box !important;
    }

    /* =========================
       2. button 变成 SaaS fixed pill
       ========================= */
    td.membership-actions.order-actions a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;

        padding: 0px 2px !important;

        line-height: 1 !important;

        margin: 0 !important;

        flex: 0 0 auto !important; /* ✔ 防止被压缩 */

        white-space: nowrap !important;

        transform: translateY(-1px); /* ✔ 你刚刚想要的效果 */
    }

    /* =========================
       3. 防止 Samsung / iPhone shrink
       ========================= */
    td.membership-actions.order-actions a.button {
        min-width: max-content !important;
    }

    /* =========================
       4. View Billing 特殊对齐微调
       ========================= */
    td.membership-actions.order-actions a.view-subscription {
        transform: translateY(-1px);
    }

    /* =========================
       5. 防止 table override width
       ========================= */
    table.memberships {
        table-layout: auto !important;
    }
}








/* =========================================================
   MOBILE: MEMBERSHIP UPGRADE BUTTON ENLARGE FIX
========================================================= */

@media (max-width: 768px) {

    /* =========================
       1. 容器微调（避免挤压）
       ========================= */
    .membership-upgrade-box {
        display: inline-flex !important;
        align-items: center !important;

        gap: 0px !important;

        transform: translateY(-6px);
    }

    /* =========================
       2. 按钮放大核心
       ========================= */
    .membership-upgrade-box a.button {

        font-size: 11px !important;   /* ✔ 从12 → 14 */
        font-weight: 700 !important;

        padding: 8px 14px !important;  /* ✔ 明显变大（关键） */

        line-height: 1 !important;

        border-radius: 0px !important;

        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        white-space: nowrap !important;

        min-height: 34px !important;   /* ✔ 防止 Android 被压扁 */

        transform: translateY(-1px);   /* ✔ 保持你现在视觉对齐 */
    }

    /* =========================
       3. 防止 WooCommerce button override
       ========================= */
    .membership-upgrade-box a.button {
        box-sizing: border-box !important;
        flex: 0 0 auto !important;
    }

    /* =========================
       4. Samsung / Android 修复
       ========================= */
    @supports (-webkit-touch-callout: none) {
        .membership-upgrade-box a.button {
            font-size: 14px !important;
        }
    }
}











/* =========================================================
   MEMBERSHIP ACTIONS: CANCEL + VIEW ALIGN FIX
========================================================= */

@media (max-width: 768px) {

    td.membership-actions.order-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 6px !important;
        flex-wrap: nowrap !important;
    }

    /* 所有 action button 统一 */
    td.membership-actions.order-actions a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 10px !important;
        font-weight: 600 !important;

        padding: 5px 2px !important;

        line-height: 1 !important;
        margin: 0 !important;

        transform: translateY(-1px) !important; /* 全部统一 */
        min-height: 30px !important;

        white-space: nowrap !important;
    }

    /* 取消单独干扰 */
    td.membership-actions a.cancel,
    td.membership-actions a.view {
        order: unset !important;
        float: none !important;
        transform: translateY(-1px) !important;
    }
}










/* =========================================================
   SINGLE CELL FIX: UPGRADE + CANCEL ALIGN ONLY
========================================================= */

@media (max-width: 768px) {

    /* 只影响包含 membership-upgrade-box 的 td */
    td:has(.membership-upgrade-box) {

        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        gap: 1px !important;

        white-space: nowrap !important;
    }

    /* upgrade box 统一基线 */
    .membership-upgrade-box {
        display: inline-flex !important;
        align-items: center !important;

        margin: 0 !important;
        padding: 0 !important;

        transform: none !important; /* ✔ 清掉旧偏移 */
    }

    /* downgrade button */
    .membership-upgrade-box a.button {
        font-size: 12px !important;
        font-weight: 600 !important;

        padding: 5px 10px !important;

        line-height: 1 !important;

        transform: none !important; /* ✔ 关键：取消所有抖动 */
    }

    /* cancel button */
    td a.button.cancel {
        font-size: 12px !important;
        font-weight: 600 !important;

        padding: 11px 10px !important;

        line-height: 1 !important;

        margin: 0 !important;

        transform: none !important; /* ✔ 关键对齐 */
    }
}


















/*Membership Panel Font Size*/
@media (max-width: 768px) {

    /* ===== Membership 全部表头统一 ===== */
    .membership-discount-title,
    .membership-discount-amount,
    .membership-discount-price,
    .membership-discount-excerpt,
    .membership-discount-actions,
    .membership-product-title,
    .membership-product-price,
    .membership-product-accessible,
    .membership-product-excerpt,
    .membership-product-actions,
    .membership-content-title,
    .membership-content-type,
    .membership-content-accessible,
    .membership-content-excerpt,
    .membership-content-actions {
        font-size: 9px !important;
        line-height: 1.3;
    }

    /* ===== 图标/空列也收紧 ===== */
    .membership-discount-image,
    .membership-product-image {
        font-size: 12px !important;
    }

    /* ===== 更紧凑（推荐） ===== */
    table.wc-memberships-members-area-sorting th,
    table.wc-memberships-members-area-sorting td {
        padding: 6px 8px;
    }
}




/**/







@media (max-width: 768px) {

    td.membership-discount-image,
    td.membership-product-image {
        min-width: 50px !important;
        width: 50px !important;
        padding: 0px !important;
    }

    td.membership-discount-image img,
    td.membership-product-image img {
        width: 60px !important;
        height: 60px !important;
        object-fit: cover;
        border-radius: 0px;
    }
}


.membership-upgrade-box {
    display: inline-flex;
    gap: 6px;
    align-items: center;
    vertical-align: middle;
}

/* 让 td 内整体对齐 */
td {
    vertical-align: middle;
}

/* Billing 按钮单独对齐 */
td .view-subscription {
    display: inline-block;
    margin-left: 1px;
    vertical-align: middle;
}

/* WooCommerce button 统一高度 */
td a.button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 10px;
    line-height: 1;
}























/* =========================================================
   FINAL MEMBERSHIP ACTION ALIGN FIX
   Upgrade / Downgrade / Cancel 完全对齐
========================================================= */

@media (max-width: 1024px) {

    /* 整个 td */
    td:has(.membership-upgrade-box) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;

        white-space: nowrap !important;
        vertical-align: middle !important;
    }

    /* Upgrade + Downgrade group */
    .membership-upgrade-box {
        display: inline-flex !important;
        align-items: center !important;
        gap: 11px !important;

        margin: 0 !important;
        padding: 0 !important;

        vertical-align: middle !important;
    }

    /* 所有按钮统一 */
    .membership-upgrade-box a.button,
    td:has(.membership-upgrade-box) > a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 12px !important;
        font-weight: 600 !important;

        padding: 8px 12px !important;
        min-height: 34px !important;

        line-height: 1 !important;
        margin: 0 !important;

        transform: none !important;
        box-sizing: border-box !important;

        white-space: nowrap !important;
    }

    /* Cancel 单独保持一致 */
    td:has(.membership-upgrade-box) > a.cancel {
        padding: 8px 12px !important;
    }
}


/**/
/* =========================================================
   SUBSCRIPTION ACTION BUTTONS FINAL FIX
   Cancel / Change Payment / Renew Now
========================================================= */

@media (max-width: 1024px) {

    /* Subscription action td */
    td:has(.subscription_renewal_early),
    td:has(.change_payment_method),
    td:has(.cancel) {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important;

        flex-wrap: wrap !important;
        gap: 6px !important;

        white-space: normal !important;
        vertical-align: middle !important;
    }

    /* 所有 subscription buttons */
    td:has(.subscription_renewal_early) a.button,
    td:has(.change_payment_method) a.button,
    td:has(.cancel) a.button {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;

        font-size: 12px !important;
        font-weight: 600 !important;

        padding: 8px 12px !important;
        min-height: 34px !important;

        margin: 0 !important;
        line-height: 1 !important;

        transform: none !important;
        box-sizing: border-box !important;

        white-space: nowrap !important;
    }
}














/**/
.account-link-mobile.button.circle {
    border-radius: 50% !important;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/**/
.header-button .icon.button.circle {
    border-radius: 50% !important;
    width: 38px;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}