/**
 * YS Enhance Hosting - 前端樣式
 * 設計系統：莫蘭迪色 (Morandi Palette)
 * v3.3.0
 */

/* ============================================
   CSS Variables - 莫蘭迪色設計系統
   ============================================ */
:root {
    /* 主色調 */
    --ys-primary: #8fa8b8;
    --ys-primary-dark: #6b8a9a;
    --ys-primary-light: #b3c7d3;
    --ys-primary-bg: #e8eff5;

    /* 背景 */
    --ys-bg: #f0f4f7;
    --ys-bg-section: #f5f8fa;
    --ys-bg-card: #ffffff;
    --ys-bg-hover: #e8eff5;

    /* 邊框 */
    --ys-border: #c5d1d8;
    --ys-border-light: #dde5ea;

    /* 文字 */
    --ys-text: #3a4a54;
    --ys-text-muted: #7a8b95;
    --ys-text-light: #a0aeb6;

    /* 語意色 */
    --ys-success: #7dab8e;
    --ys-success-bg: #e8f3ec;
    --ys-warning: #c4a67a;
    --ys-warning-bg: #faf2e5;
    --ys-danger: #c08080;
    --ys-danger-bg: #f8e8e8;
    --ys-info: #8fa8b8;
    --ys-info-bg: #e8eff5;

    /* 圓角 */
    --ys-radius: 10px;
    --ys-radius-sm: 6px;
    --ys-radius-lg: 14px;

    /* 陰影 */
    --ys-shadow: 0 2px 12px rgba(107, 138, 154, 0.1);
    --ys-shadow-hover: 0 6px 24px rgba(107, 138, 154, 0.15);

    /* 動畫 */
    --ys-transition: 0.2s ease;
}

/* ============================================
   Reset
   ============================================ */
.ys-hosting-products *,
.ys-mini-cart *,
.ys-checkout *,
.ys-dashboard *,
.ys-login-wrap *,
.ys-register-wrap * {
    box-sizing: border-box;
}

/* ============================================
   通用按鈕
   ============================================ */
.ys-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 20px;
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    cursor: pointer;
    border: none;
    transition: all var(--ys-transition);
    line-height: 1.4;
}

.ys-btn-primary {
    background: var(--ys-primary);
    color: #fff;
}

.ys-btn-primary:hover {
    background: var(--ys-primary-dark);
    color: #fff;
}

.ys-btn-primary:disabled {
    background: var(--ys-primary-light);
    cursor: not-allowed;
    opacity: 0.7;
}

.ys-btn-outline {
    background: transparent;
    color: var(--ys-primary-dark);
    border: 1.5px solid var(--ys-border);
}

.ys-btn-outline:hover {
    background: var(--ys-primary-bg);
    border-color: var(--ys-primary);
    color: var(--ys-primary-dark);
}

.ys-btn-success {
    background: var(--ys-success);
    color: #fff;
}

.ys-btn-success:hover {
    background: #5a8a6a;
    color: #fff;
}

.ys-btn-warning {
    background: var(--ys-warning);
    color: #fff;
}

.ys-btn-warning:hover {
    background: #a08a5a;
    color: #fff;
}

.ys-btn-danger {
    background: var(--ys-danger);
    color: #fff;
}

.ys-btn-danger:hover {
    background: #a66b6b;
    color: #fff;
}

.ys-btn-sm {
    padding: 6px 14px;
    font-size: 13px;
}

.ys-btn-lg {
    padding: 14px 40px;
    font-size: 16px;
}

.ys-btn-block {
    display: block;
    width: 100%;
}

.ys-btn .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

/* 已加入購物車 */
.ys-add-to-cart.ys-in-cart {
    background: var(--ys-success);
    cursor: default;
}

.ys-add-to-cart.ys-in-cart:hover {
    background: var(--ys-success);
}

/* ============================================
   Badge
   ============================================ */
.ys-badge-sm {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}

.ys-badge-success {
    background: var(--ys-success-bg);
    color: #4a7a5a;
}

.ys-badge-warning {
    background: var(--ys-warning-bg);
    color: #8a6a3a;
}

.ys-badge-danger {
    background: var(--ys-danger-bg);
    color: #8a4a4a;
}

.ys-badge-info {
    background: var(--ys-info-bg);
    color: #4a6a7a;
}

.ys-badge-muted {
    background: #eef1f4;
    color: var(--ys-text-muted);
}

/* ============================================
   週期切換
   ============================================ */
.ys-hosting-cycle-toggle {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 32px;
    background: var(--ys-bg);
    border-radius: var(--ys-radius);
    padding: 4px;
    width: fit-content;
    margin-left: auto;
    margin-right: auto;
}

.ys-cycle-btn {
    padding: 10px 28px;
    border: none;
    background: transparent;
    border-radius: var(--ys-radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text-muted);
    transition: all var(--ys-transition);
    position: relative;
}

.ys-cycle-btn:hover {
    color: var(--ys-primary-dark);
}

.ys-cycle-btn.active {
    background: var(--ys-bg-card);
    color: var(--ys-primary-dark);
    box-shadow: var(--ys-shadow);
}

.ys-badge {
    display: inline-block;
    background: var(--ys-warning);
    color: #fff;
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 4px;
    margin-left: 4px;
    vertical-align: middle;
}

/* ============================================
   商品列表 Grid
   ============================================ */
.ys-hosting-grid {
    display: grid;
    grid-template-columns: repeat(var(--ys-columns, 3), 1fr);
    gap: 20px;
}

@media (max-width: 900px) {
    .ys-hosting-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 600px) {
    .ys-hosting-grid { grid-template-columns: 1fr; }
}

/* 商品卡片 */
.ys-hosting-card {
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-lg);
    padding: 28px 24px;
    display: flex;
    flex-direction: column;
    transition: box-shadow var(--ys-transition), transform var(--ys-transition);
}

.ys-hosting-card:hover {
    box-shadow: var(--ys-shadow-hover);
    transform: translateY(-2px);
}

.ys-card-header { margin-bottom: 16px; }

.ys-card-title {
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 6px;
    color: var(--ys-text);
}

.ys-card-desc {
    font-size: 13px;
    color: var(--ys-text-muted);
    margin: 0;
    line-height: 1.5;
}

.ys-card-price {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--ys-border-light);
}

.ys-price-amount {
    display: flex;
    align-items: baseline;
    gap: 2px;
}

.ys-currency {
    font-size: 15px;
    font-weight: 600;
    color: var(--ys-text-muted);
}

.ys-amount {
    font-size: 34px;
    font-weight: 800;
    color: var(--ys-primary-dark);
    line-height: 1;
}

.ys-period {
    font-size: 13px;
    color: var(--ys-text-light);
    margin-left: 4px;
}

.ys-card-specs {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 16px;
}

.ys-spec-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ys-text);
}

.ys-spec-item .dashicons {
    font-size: 15px;
    width: 15px;
    height: 15px;
    color: var(--ys-primary);
}

.ys-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    flex: 1;
}

.ys-card-features li {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: 13px;
    color: var(--ys-text);
}

.ys-card-features .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
    color: var(--ys-success);
}

.ys-card-action { margin-top: auto; }

.ys-card-action .ys-btn { width: 100%; }

/* 卡片隱藏（不支援當前週期） */
.ys-hosting-card.ys-card-hidden {
    display: none;
}

/* 方案價格 badge（如：省更多） */
.ys-plan-badge {
    display: inline-block;
    background: var(--ys-warning);
    color: #fff;
    font-size: 10px;
    padding: 1px 5px;
    border-radius: 3px;
    margin-left: 6px;
    vertical-align: middle;
}

/* ============================================
   垂直列表短代碼 [ys_hosting_list] / [ys_website_list]
   ============================================ */
.ys-product-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ys-product-list *,
.ys-website-list * {
    box-sizing: border-box;
}

.ys-pl-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius);
    transition: box-shadow var(--ys-transition);
}

.ys-pl-item:hover {
    box-shadow: var(--ys-shadow-hover);
}

.ys-pl-info {
    flex: 1;
    min-width: 0;
}

.ys-pl-title-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 4px;
    line-height: 1;
}

.ys-pl-title {
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    color: var(--ys-text);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ys-pl-title a {
    color: var(--ys-text);
    text-decoration: none;
}

.ys-pl-title a:hover {
    color: var(--ys-primary-dark);
}

.ys-pl-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    font-weight: 600;
    white-space: nowrap;
}

.ys-pl-badge.ys-badge-muted {
    background: var(--ys-bg);
    color: var(--ys-text-muted);
}

.ys-pl-badge.ys-badge-info {
    background: var(--ys-info-bg);
    color: var(--ys-info);
}

.ys-pl-badge.ys-badge-warning {
    background: var(--ys-warning-bg);
    color: var(--ys-warning);
}

/* 多年繳優惠 — 亮色高亮標籤 */
.ys-pl-badge.ys-badge-highlight {
    background: #e8c66a;
    color: #5a4a1a;
    font-size: 11px;
    padding: 2px 10px;
    border-radius: 4px;
    font-weight: 600;
    vertical-align: middle;
}

/* 支援繳費週期標籤列 */
.ys-pl-cycle-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
}

.ys-pl-cycle-tag {
    display: inline-block;
    font-size: 11px;
    padding: 1px 8px;
    border-radius: 3px;
    background: #f0f2f4;
    color: #5a6a7a;
    font-weight: 500;
    border: 1px solid #e2e8ed;
}

/* 網站商品週期標籤（標題前方） */
.ys-cycle-tag {
    background: var(--ys-warning, #c4a67a) !important;
    color: #fff !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: none !important;
}

/* Demo 連結 */
.ys-pl-demo-row {
    margin-top: 8px;
}

.ys-pl-demo-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 13px;
    color: var(--ys-primary, #8fa8b8);
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s;
}

.ys-pl-demo-link:hover {
    color: var(--ys-primary-dark, #6a8ca0);
    text-decoration: underline;
}

.ys-pl-demo-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.ys-pl-specs {
    font-size: 13px;
    color: var(--ys-text-muted);
    margin-bottom: 6px;
}

.ys-pl-features {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.ys-pl-feature-tag {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 12px;
    color: var(--ys-success);
    background: var(--ys-success-bg);
    padding: 2px 8px;
    border-radius: 4px;
}

.ys-pl-feature-tag::before {
    content: '\2713';
    font-weight: 700;
}

.ys-pl-pricing {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-shrink: 0;
}

/* 各欄位固定寬度容器 */
.ys-pl-cycle-wrap {
    width: 160px;
    flex-shrink: 0;
}
.ys-pl-price-wrap {
    width: 160px;
    flex-shrink: 0;
    text-align: right;
}
.ys-pl-action-wrap {
    width: 130px;
    flex-shrink: 0;
    text-align: center;
}

.ys-pl-add-btn {
    width: 100%;
    min-width: 120px;
    min-height: 44px;
    height: 44px;
    padding: 10px 16px !important;
    font-size: 14px !important;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.ys-pl-cycle-select {
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    border: 1px solid var(--ys-border, #e2e8ed);
    border-radius: 8px;
    background: #fff;
    appearance: auto;
    color: var(--ys-text);
    cursor: pointer;
}

.ys-pl-cycle-label {
    font-size: 13px;
    color: var(--ys-text-muted);
    font-weight: 600;
    display: block;
    padding: 10px 0;
}

.ys-pl-price {
    font-size: 14px;
    color: var(--ys-text);
    white-space: nowrap;
}

.ys-pl-price strong {
    font-size: 24px;
    font-weight: 800;
    color: var(--ys-primary-dark);
}

.ys-pl-price small {
    font-size: 12px;
    color: var(--ys-text-light);
    margin-left: 2px;
}

.ys-pl-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ys-pl-actions .ys-btn {
    width: 100%;
    white-space: nowrap;
    padding: 10px 20px;
    font-size: 14px;
}

/* 列表 — 網站商品縮圖 */
.ys-pl-thumb {
    width: 80px;
    height: 60px;
    flex-shrink: 0;
    margin-right: 16px;
    border-radius: var(--ys-radius-sm);
    overflow: hidden;
}

.ys-pl-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 列表 RWD */
@media (max-width: 768px) {
    .ys-pl-item {
        flex-direction: column;
        gap: 16px;
        align-items: stretch;
    }

    .ys-pl-pricing {
        width: 100%;
        justify-content: space-between;
        flex-wrap: wrap;
        gap: 10px;
    }

    .ys-pl-price {
        text-align: left;
        min-width: auto;
    }

    .ys-pl-thumb {
        width: 100%;
        height: 120px;
        margin-right: 0;
        margin-bottom: 8px;
    }

    .ys-pl-actions {
        width: 100%;
    }

    .ys-pl-actions .ys-btn {
        flex: 1;
    }
}

/* ============================================
   Mini Cart
   ============================================ */
.ys-mini-cart {
    position: fixed !important;
    bottom: 24px !important;
    right: 24px !important;
    left: auto !important;
    top: auto !important;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s;
}

.ys-mini-cart.ys-has-items {
    opacity: 1;
    pointer-events: auto;
}

#ys-mini-cart-toggle {
    width: 52px;
    height: 52px;
    border-radius: var(--ys-radius);
    background: var(--ys-primary);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(107, 138, 154, 0.3);
    position: relative;
    transition: transform var(--ys-transition), background var(--ys-transition);
    border: none;
}

#ys-mini-cart-toggle:hover {
    transform: scale(1.05);
    background: var(--ys-primary-dark);
}

#ys-mini-cart-toggle .dashicons {
    font-size: 22px;
    width: 22px;
    height: 22px;
}

.ys-cart-count {
    position: absolute;
    top: -6px;
    right: -6px;
    background: var(--ys-warning);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0 4px;
}

#ys-mini-cart-dropdown {
    position: absolute;
    bottom: 60px;
    right: 0;
    width: 340px;
    background: var(--ys-bg-card);
    border-radius: var(--ys-radius-lg);
    box-shadow: 0 8px 30px rgba(107, 138, 154, 0.2);
    overflow: hidden;
    display: none;
    border: 1px solid var(--ys-border-light);
}

#ys-mini-cart-dropdown.ys-open {
    display: block !important;
    animation: ysSlideUp 0.2s ease;
}

@keyframes ysSlideUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ys-mini-cart-items {
    max-height: 300px;
    overflow-y: auto;
    padding: 16px;
}

.ys-cart-empty {
    text-align: center;
    color: var(--ys-text-light);
    margin: 16px 0;
    font-size: 14px;
}

.ys-cart-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 0;
    border-bottom: 1px solid var(--ys-border-light);
}

.ys-cart-item:last-child { border-bottom: none; }

.ys-cart-item-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ys-cart-item-title {
    font-weight: 600;
    font-size: 14px;
    color: var(--ys-text);
}

.ys-cart-item-meta {
    font-size: 12px;
    color: var(--ys-text-muted);
}

.ys-cart-remove {
    background: none;
    border: none;
    color: var(--ys-danger);
    font-size: 18px;
    cursor: pointer;
    padding: 4px;
    line-height: 1;
    transition: color var(--ys-transition);
}

.ys-cart-remove:hover { color: #a66b6b; }

.ys-mini-cart-footer {
    padding: 16px;
    border-top: 1px solid var(--ys-border-light);
    background: var(--ys-bg-section);
}

.ys-cart-total {
    display: flex;
    justify-content: space-between;
    margin-bottom: 12px;
    font-size: 15px;
    color: var(--ys-text);
}

.ys-mini-cart-footer .ys-btn { width: 100%; }

/* ============================================
   Dashboard - 6 Tab 架構（v3.1）
   ============================================ */
.ys-dashboard {
    max-width: 900px;
    margin: 0 auto;
}

/* 全域 dashicons 字體修正 — 防止主題覆蓋 font-family 導致圖示不顯示 */
.ys-dashboard .dashicons,
.ys-dashboard .dashicons::before {
    font-family: dashicons !important;
    display: inline-block;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-style: normal;
    font-weight: 400;
    speak: never;
}

.ys-dashboard-title {
    font-size: 26px;
    font-weight: 700;
    color: var(--ys-text);
    margin: 0 0 24px;
}

/* Tab 導航 */
.ys-dashboard-nav {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--ys-border-light);
    margin-bottom: 28px;
    flex-wrap: wrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.ys-dashboard-nav::-webkit-scrollbar { display: none; }

.ys-dashboard-tab {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 12px 20px;
    border: none;
    background: none;
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color var(--ys-transition), border-color var(--ys-transition);
    white-space: nowrap;
}

.ys-dashboard-tab .dashicons {
    font-family: dashicons !important;
    font-size: 18px;
    width: 18px;
    height: 18px;
    line-height: 1;
    display: inline-block;
    vertical-align: middle;
    margin-right: 4px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.ys-dashboard-tab:hover { color: var(--ys-primary-dark); }

.ys-dashboard-tab.active {
    color: var(--ys-primary-dark);
    border-bottom-color: var(--ys-primary);
}

/* Tab 內容區 */
.ys-dashboard-panel { display: none; }

.ys-dashboard-panel.active { display: block; }

/* Section 卡片 */
.ys-dash-section {
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.ys-dash-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ys-text);
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ys-border-light);
}

/* ============================================
   Tab 1: 訂閱管理
   ============================================ */
.ys-sub-card {
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-lg);
    overflow: hidden;
    margin-bottom: 16px;
    transition: box-shadow var(--ys-transition);
}

.ys-sub-card:hover { box-shadow: var(--ys-shadow); }

.ys-sub-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: var(--ys-bg-section);
    border-bottom: 1px solid var(--ys-border-light);
    gap: 12px;
    flex-wrap: wrap;
}

.ys-sub-header-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ys-sub-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--ys-text);
    margin: 0;
}

.ys-sub-domain {
    font-size: 13px;
    color: var(--ys-text-muted);
    margin: 2px 0 0;
}

.ys-sub-body { padding: 20px 22px; }

.ys-sub-meta {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 16px;
}

@media (max-width: 600px) {
    .ys-sub-meta { grid-template-columns: 1fr 1fr; }
}

.ys-sub-meta-item {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ys-sub-meta-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ys-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ys-sub-meta-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text);
}

/* 訂閱帳密 Accordion */
.ys-sub-accordion-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 12px 16px;
    background: var(--ys-bg);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-sm);
    cursor: pointer;
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-text-muted);
    transition: background var(--ys-transition);
    margin-bottom: 12px;
}

.ys-sub-accordion-toggle:hover { background: var(--ys-primary-bg); }

.ys-sub-accordion-toggle .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

.ys-sub-accordion-icon {
    margin-left: auto;
    transition: transform var(--ys-transition);
}

.ys-sub-accordion-toggle.open .ys-sub-accordion-icon {
    transform: rotate(180deg);
}

.ys-sub-credential {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 16px;
    background: var(--ys-bg-section);
    border-radius: var(--ys-radius-sm);
    margin-bottom: 6px;
}

.ys-sub-credential-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ys-text-light);
    min-width: 60px;
}

.ys-sub-credential-value {
    font-size: 13px;
    color: var(--ys-text);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* 訂閱操作按鈕 */
.ys-sub-actions {
    display: flex;
    gap: 8px;
    padding: 14px 22px;
    border-top: 1px solid var(--ys-border-light);
    background: var(--ys-bg-section);
    flex-wrap: wrap;
}

.ys-sub-pending-notice,
.ys-sub-cancelling-notice {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    padding: 6px 12px;
    border-radius: var(--ys-radius-sm);
}

.ys-sub-pending-notice {
    color: #8a6a3a;
    background: var(--ys-warning-bg);
}

.ys-sub-cancelling-notice {
    color: #8a4a4a;
    background: var(--ys-danger-bg);
}

/* 信用卡行 */
.ys-sub-card-payment {
    padding: 12px 22px;
    border-top: 1px solid var(--ys-border-light);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.ys-sub-card-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--ys-text);
}

.ys-sub-card-info .dashicons {
    color: var(--ys-text-muted);
    font-size: 18px;
    width: 18px;
    height: 18px;
}

/* 待付款訂單 */
.ys-sub-orders {
    margin-top: 12px;
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-sm);
    overflow: hidden;
}

.ys-sub-orders-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-text-muted);
    padding: 10px 14px;
    background: var(--ys-bg);
    border-bottom: 1px solid var(--ys-border-light);
    margin: 0;
}

.ys-sub-order-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    border-bottom: 1px solid var(--ys-border-light);
    font-size: 13px;
    gap: 8px;
}

.ys-sub-order-row:last-child { border-bottom: none; }

.ys-sub-order-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ys-sub-order-num {
    font-weight: 600;
    color: var(--ys-text);
}

.ys-sub-order-meta {
    font-size: 12px;
    color: var(--ys-text-muted);
}

/* ============================================
   Tab 2: 卡片管理
   ============================================ */
.ys-cards-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ys-card-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius);
    transition: box-shadow var(--ys-transition);
    gap: 12px;
}

.ys-card-row:hover { box-shadow: var(--ys-shadow); }

.ys-card-row.ys-card-default {
    border-color: var(--ys-primary);
    background: var(--ys-primary-bg);
}

.ys-card-row-left {
    display: flex;
    align-items: center;
    gap: 14px;
    flex: 1;
    min-width: 0;
}

.ys-card-icon {
    width: 42px;
    height: 42px;
    border-radius: var(--ys-radius-sm);
    background: var(--ys-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ys-card-icon .dashicons {
    font-size: 20px;
    width: 20px;
    height: 20px;
    color: var(--ys-primary);
}

.ys-card-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ys-card-number {
    font-size: 15px;
    font-weight: 700;
    color: var(--ys-text);
    font-family: 'Courier New', monospace;
    letter-spacing: 1px;
}

.ys-card-expire {
    font-size: 12px;
    color: var(--ys-text-muted);
}

.ys-card-row-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.ys-card-default-badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--ys-primary-dark);
    background: var(--ys-bg-card);
    padding: 3px 10px;
    border-radius: 20px;
    border: 1px solid var(--ys-primary-light);
}

.ys-card-btn-delete {
    background: none;
    border: none;
    color: var(--ys-text-light);
    cursor: pointer;
    padding: 6px;
    border-radius: var(--ys-radius-sm);
    transition: all var(--ys-transition);
}

.ys-card-btn-delete:hover {
    color: var(--ys-danger);
    background: var(--ys-danger-bg);
}

.ys-cards-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--ys-text-light);
}

.ys-cards-empty .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--ys-border);
    display: block;
    margin: 0 auto 12px;
}

/* ============================================
   Tab 3: 分潤
   ============================================ */
.ys-affiliate-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-bottom: 24px;
}

@media (max-width: 700px) {
    .ys-affiliate-stats { grid-template-columns: repeat(2, 1fr); }
}

.ys-affiliate-stat-card {
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius);
    padding: 18px 14px;
    text-align: center;
}

.ys-stat-label {
    font-size: 12px;
    color: var(--ys-text-muted);
    margin-bottom: 6px;
    font-weight: 600;
}

.ys-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--ys-primary-dark);
    line-height: 1.2;
}

/* 推薦連結 */
.ys-affiliate-ref-link {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ys-affiliate-ref-link input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    font-size: 13px;
    background: var(--ys-bg-section);
    color: var(--ys-text);
}

.ys-affiliate-ref-code {
    font-size: 12px;
    color: var(--ys-text-light);
    margin-top: 8px;
}

/* 佣金表格 */
.ys-affiliate-table {
    width: 100%;
    border-collapse: collapse;
}

.ys-affiliate-table th,
.ys-affiliate-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ys-border-light);
    font-size: 13px;
}

.ys-affiliate-table thead th {
    font-size: 12px;
    color: var(--ys-text-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ys-affiliate-table tbody tr:last-child td { border-bottom: none; }

/* 分潤申請 */
.ys-affiliate-apply {
    display: flex;
    justify-content: center;
    padding: 40px 0;
}

.ys-affiliate-apply-box {
    text-align: center;
    padding: 40px 32px;
    background: var(--ys-bg-section);
    border-radius: var(--ys-radius-lg);
    max-width: 440px;
    border: 1px solid var(--ys-border-light);
}

.ys-affiliate-apply-box h3 {
    margin: 16px 0 8px;
    font-size: 20px;
    color: var(--ys-text);
}

.ys-affiliate-apply-box p {
    color: var(--ys-text-muted);
    margin-bottom: 24px;
    line-height: 1.6;
    font-size: 14px;
}

.ys-affiliate-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
}

.ys-affiliate-badge-success { background: var(--ys-success-bg); color: #4a7a5a; }
.ys-affiliate-badge-warning { background: var(--ys-warning-bg); color: #8a6a3a; }
.ys-affiliate-badge-info { background: var(--ys-info-bg); color: #4a6a7a; }
.ys-affiliate-badge-muted { background: #eef1f4; color: var(--ys-text-muted); }

.ys-affiliate-empty {
    text-align: center;
    padding: 30px 16px;
    color: var(--ys-text-light);
    font-size: 14px;
}

.ys-affiliate-msg {
    padding: 10px 14px;
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
}

.ys-msg-success { background: var(--ys-success-bg); color: #4a7a5a; }
.ys-msg-error { background: var(--ys-danger-bg); color: #8a4a4a; }

/* ============================================
   Tab 4: 帳號管理
   ============================================ */
.ys-account-form {
    max-width: 100%;
}

.ys-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

@media (max-width: 600px) {
    .ys-form-grid { grid-template-columns: 1fr; }
}

.ys-form-field-full { grid-column: 1 / -1; }

.ys-form-field { margin-bottom: 16px; }

.ys-form-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-text-muted);
    margin-bottom: 6px;
}

.ys-form-field .required { color: var(--ys-danger); }

.ys-form-field input,
.ys-form-field select {
    width: 100%;
    padding: 10px 14px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
    transition: border-color var(--ys-transition), box-shadow var(--ys-transition);
    color: var(--ys-text);
    background: var(--ys-bg-card);
}

.ys-form-field input:focus,
.ys-form-field select:focus {
    border-color: var(--ys-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 168, 184, 0.15);
}

.ys-form-field input:disabled {
    background: var(--ys-bg);
    color: var(--ys-text-muted);
}

.ys-form-hint {
    font-size: 12px;
    color: var(--ys-text-light);
    margin: 4px 0 0;
}

.ys-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 20px;
}

.ys-form-message {
    padding: 10px 14px;
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

/* ============================================
   結帳頁
   ============================================ */
.ys-checkout {
    max-width: 700px;
    margin: 0 auto;
}

.ys-checkout h2 {
    font-size: 26px;
    margin-bottom: 24px;
    color: var(--ys-text);
}

.ys-checkout-section {
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-lg);
    padding: 24px;
    margin-bottom: 20px;
}

.ys-checkout-section h3 {
    font-size: 17px;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ys-border-light);
    color: var(--ys-text);
}

.ys-checkout-summary { width: 100%; border-collapse: collapse; }

.ys-checkout-summary th,
.ys-checkout-summary td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--ys-border-light);
    font-size: 14px;
}

.ys-checkout-summary thead th {
    font-size: 12px;
    color: var(--ys-text-muted);
    font-weight: 600;
    text-transform: uppercase;
}

.ys-checkout-summary tfoot td {
    border-top: 2px solid var(--ys-border);
    border-bottom: none;
    font-size: 16px;
}

/* 帳號類型切換 */
.ys-customer-type-toggle { margin-bottom: 20px; }

.ys-customer-type-toggle > label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-text-muted);
    margin-bottom: 10px;
}

.ys-radio-group { display: flex; gap: 12px; }

.ys-radio-label {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    border: 1.5px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--ys-transition);
    min-width: 90px;
    justify-content: center;
    color: var(--ys-text);
}

.ys-radio-label:hover {
    border-color: var(--ys-primary);
    background: var(--ys-primary-bg);
}

.ys-radio-label input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: var(--ys-primary);
}

.ys-radio-label:has(input:checked) {
    border-color: var(--ys-primary);
    background: var(--ys-primary-bg);
    color: var(--ys-primary-dark);
}

/* 結帳表單輸入框 */
.ys-checkout-section label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-text-muted);
    margin-bottom: 6px;
}

.ys-checkout-section input[type="text"],
.ys-checkout-section input[type="email"],
.ys-checkout-section input[type="tel"],
.ys-checkout-section select,
.ys-checkout-section textarea {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
    color: var(--ys-text);
    background: var(--ys-bg-card);
    transition: border-color var(--ys-transition), box-shadow var(--ys-transition);
    box-sizing: border-box;
    margin-bottom: 14px;
}

.ys-checkout-section input:focus,
.ys-checkout-section select:focus,
.ys-checkout-section textarea:focus {
    border-color: var(--ys-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 168, 184, 0.15);
}

.ys-checkout-section input::placeholder { color: var(--ys-text-light); }

/* 結帳按鈕 */
.ys-checkout-action {
    text-align: center;
    margin-top: 8px;
}

.ys-checkout-note {
    font-size: 13px;
    color: var(--ys-text-light);
    margin-top: 8px;
}

.ys-checkout-empty {
    text-align: center;
    padding: 48px;
    color: var(--ys-text-muted);
}

/* 優惠碼 */
.ys-coupon-section { background: var(--ys-bg-section); }

.ys-coupon-input-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ys-coupon-input-row input[type="text"] {
    flex: 1;
    padding: 10px 14px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
    text-transform: uppercase;
    transition: border-color var(--ys-transition);
}

.ys-coupon-input-row input[type="text"]:focus {
    border-color: var(--ys-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 168, 184, 0.15);
}

.ys-coupon-input-row input[type="text"]:disabled {
    background: var(--ys-bg);
    color: var(--ys-text-muted);
}

.ys-coupon-input-row .ys-btn {
    white-space: nowrap;
    min-width: 80px;
}

.ys-coupon-input-row .ys-coupon-applied {
    background: var(--ys-success);
    color: #fff;
    border-color: var(--ys-success);
    cursor: default;
}

#ys-coupon-result { margin-top: 8px; }
#ys-coupon-result p {
    margin: 0;
    padding: 8px 12px;
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
}

.ys-coupon-success {
    background: var(--ys-success-bg);
    color: #4a7a5a;
    border: 1px solid #b8d8c4;
}

.ys-coupon-error {
    background: var(--ys-danger-bg);
    color: #8a4a4a;
    border: 1px solid #d4b0b0;
}

.ys-discount-row td {
    border-bottom: none !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

/* ============================================
   登入/註冊提示
   ============================================ */
.ys-checkout-auth-required {
    text-align: center;
    padding: 48px 24px;
    max-width: 420px;
    margin: 0 auto;
}

.ys-checkout-auth-icon .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--ys-primary);
}

.ys-checkout-auth-required h2 {
    margin: 16px 0 8px;
    color: var(--ys-text);
}

.ys-checkout-auth-required p {
    color: var(--ys-text-muted);
    margin-bottom: 24px;
}

.ys-checkout-auth-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
}

/* 登入/註冊頁面 */
.ys-login-wrap,
.ys-register-wrap {
    max-width: 480px;
    margin: 0 auto;
    padding: 32px;
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-lg);
}

.ys-login-title,
.ys-register-title {
    font-size: 24px;
    font-weight: 700;
    color: var(--ys-text);
    margin: 0 0 24px;
    text-align: center;
}

.ys-login-message,
.ys-register-message {
    padding: 10px 14px;
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

.ys-login-message-success,
.ys-register-message-success { background: var(--ys-success-bg); color: #4a7a5a; }

.ys-login-message-error,
.ys-register-message-error { background: var(--ys-danger-bg); color: #8a4a4a; }

.ys-login-action,
.ys-register-action {
    margin-top: 20px;
    text-align: center;
}

.ys-login-links {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
}

.ys-login-links a { color: var(--ys-primary-dark); text-decoration: none; }
.ys-login-links a:hover { text-decoration: underline; }
.ys-login-separator { color: var(--ys-border); margin: 0 8px; }

.ys-register-login-link {
    font-size: 13px;
    color: var(--ys-text-muted);
    margin-top: 12px;
}

.ys-register-login-link a { color: var(--ys-primary-dark); text-decoration: none; }
.ys-register-login-link a:hover { text-decoration: underline; }

.ys-register-type-toggle { margin-bottom: 16px; }

.ys-register-type-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-text-muted);
    margin-bottom: 8px;
}

.ys-register-type-options {
    display: flex;
    gap: 12px;
}

.ys-register-radio {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--ys-text);
}

.ys-register-radio-label {
    padding: 8px 18px;
    border: 1.5px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    transition: all var(--ys-transition);
    font-weight: 500;
}

.ys-register-radio input:checked + .ys-register-radio-label {
    border-color: var(--ys-primary);
    background: var(--ys-primary-bg);
    color: var(--ys-primary-dark);
}

/* 空狀態 */
.ys-dashboard-empty {
    text-align: center;
    padding: 48px 20px;
}

.ys-dashboard-empty h3 {
    color: var(--ys-text);
    margin: 16px 0 8px;
}

.ys-dashboard-empty p {
    color: var(--ys-text-muted);
    font-size: 14px;
}

/* ============================================
   升級面板
   ============================================ */
.ys-upgrade-panel {
    margin-top: 16px;
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius);
    background: var(--ys-bg-section);
    overflow: hidden;
}

.ys-upgrade-panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--ys-bg);
    border-bottom: 1px solid var(--ys-border-light);
}

.ys-upgrade-panel-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text);
    display: flex;
    align-items: center;
    gap: 6px;
}

.ys-upgrade-panel-title .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--ys-primary);
}

.ys-upgrade-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    color: var(--ys-text-light);
    transition: color var(--ys-transition);
    line-height: 1;
}

.ys-upgrade-close:hover { color: var(--ys-danger); }

.ys-upgrade-panel-body { padding: 16px; }

.ys-upgrade-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 24px;
    color: var(--ys-text-muted);
    font-size: 13px;
}

.ys-spinner {
    display: inline-block;
    width: 18px;
    height: 18px;
    border: 2px solid var(--ys-border-light);
    border-top-color: var(--ys-primary);
    border-radius: 50%;
    animation: ys-spin 0.7s linear infinite;
}

@keyframes ys-spin { to { transform: rotate(360deg); } }

.ys-upgrade-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ys-upgrade-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border: 1.5px solid var(--ys-border-light);
    border-radius: var(--ys-radius);
    background: var(--ys-bg-card);
    cursor: pointer;
    transition: border-color var(--ys-transition), box-shadow var(--ys-transition);
}

.ys-upgrade-option:hover {
    border-color: var(--ys-primary);
    box-shadow: 0 0 0 3px rgba(143, 168, 184, 0.1);
}

.ys-upgrade-option-info { flex: 1; }

.ys-upgrade-option-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text);
    margin: 0 0 2px;
}

.ys-upgrade-option-specs {
    font-size: 12px;
    color: var(--ys-text-muted);
}

.ys-upgrade-option-pricing {
    text-align: right;
    flex-shrink: 0;
    margin-left: 16px;
}

.ys-upgrade-option-new-price {
    font-size: 15px;
    font-weight: 700;
    color: var(--ys-text);
}

.ys-upgrade-option-diff {
    font-size: 12px;
    color: var(--ys-warning);
    font-weight: 600;
}

.ys-upgrade-empty,
.ys-upgrade-error {
    text-align: center;
    padding: 16px;
    font-size: 13px;
}

.ys-upgrade-empty p { margin: 0; color: var(--ys-text-light); }
.ys-upgrade-error-msg { color: var(--ys-danger); margin: 0; }

.ys-upgrade-confirm {
    border-top: 1px solid var(--ys-border-light);
    padding: 16px;
    background: var(--ys-warning-bg);
}

.ys-upgrade-confirm-info { margin-bottom: 14px; }

.ys-upgrade-confirm-desc {
    font-size: 13px;
    color: var(--ys-text);
    margin: 0 0 10px;
}

.ys-upgrade-confirm-price {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 14px;
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-warning);
    border-radius: var(--ys-radius-sm);
}

.ys-upgrade-confirm-label {
    font-size: 13px;
    color: #8a6a3a;
    font-weight: 600;
}

.ys-upgrade-confirm-amount {
    font-size: 18px;
    font-weight: 700;
    color: var(--ys-warning);
}

.ys-upgrade-confirm-actions {
    display: flex;
    gap: 8px;
    justify-content: flex-end;
}

.ys-upgrade-confirm-submit:disabled {
    opacity: 0.6;
    cursor: not-allowed;
}

.ys-dashboard-upgrade-btn.ys-active {
    background: var(--ys-primary);
    color: #fff;
    border-color: var(--ys-primary);
}

/* ============================================
   RWD
   ============================================ */
@media (max-width: 768px) {
    .ys-dashboard-nav {
        gap: 0;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .ys-dashboard-nav::-webkit-scrollbar { display: none; }

    .ys-dashboard-tab {
        padding: 10px 14px;
        font-size: 13px;
    }

    .ys-sub-header { flex-direction: column; align-items: flex-start; }

    .ys-sub-actions { flex-direction: column; }
    .ys-sub-actions .ys-btn { width: 100%; }

    .ys-card-row { flex-direction: column; align-items: stretch; text-align: center; }
    .ys-card-row-left { justify-content: center; }
    .ys-card-row-right { justify-content: center; }
}

/* ============================================
   Inline 登入/註冊表單（非 Modal）
   ============================================ */
.ys-auth-inline {
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-lg);
    box-shadow: var(--ys-shadow);
    padding: 32px;
    max-width: 520px;
    margin: 0 auto;
}

.ys-auth-inline .ys-auth-tabs {
    display: flex;
    border-bottom: 2px solid var(--ys-border-light);
    margin-bottom: 24px;
    gap: 0;
}

.ys-auth-inline .ys-auth-tab {
    flex: 1;
    padding: 12px 0;
    border: none;
    background: none;
    font-size: 15px;
    font-weight: 600;
    color: var(--ys-text-muted);
    cursor: pointer;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    transition: all 0.25s;
    border-radius: 6px 6px 0 0;
}

.ys-auth-inline .ys-auth-tab:hover {
    color: var(--ys-primary-dark);
    background: rgba(143, 168, 184, 0.08);
}

.ys-auth-inline .ys-auth-tab.ys-auth-tab-active {
    color: #fff;
    background: var(--ys-primary, #8fa8b8);
    border-bottom-color: var(--ys-primary-dark, #6a8ca0);
}

.ys-auth-inline .ys-auth-tab-content {
    display: none;
}

.ys-auth-inline .ys-auth-tab-content.ys-auth-tab-content-active {
    display: block;
}

.ys-auth-inline .ys-auth-field {
    margin-bottom: 16px;
}

.ys-auth-inline .ys-auth-field label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text);
    margin-bottom: 6px;
}

.ys-auth-inline .ys-auth-field input[type="email"],
.ys-auth-inline .ys-auth-field input[type="password"],
.ys-auth-inline .ys-auth-field input[type="text"],
.ys-auth-inline .ys-auth-field input[type="tel"] {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    font-size: 15px;
    transition: border-color var(--ys-transition);
    box-sizing: border-box;
}

.ys-auth-inline .ys-auth-field input:focus {
    border-color: var(--ys-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 168, 184, 0.15);
}

.ys-auth-inline .ys-auth-row {
    display: flex;
    gap: 12px;
    margin-bottom: 0;
}

.ys-auth-inline .ys-auth-half {
    flex: 1;
    min-width: 0;
}

.ys-auth-inline .ys-auth-hint {
    font-size: 12px;
    color: var(--ys-text-light);
    margin: 4px 0 0;
}

.ys-auth-inline .ys-required { color: var(--ys-danger); }

/* 帳號類型切換按鈕（inline 版） */
.ys-auth-inline .ys-auth-type-toggle {
    display: flex;
    border: 1.5px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    margin-bottom: 0;
    overflow: hidden;
    background: var(--ys-bg-section);
}

.ys-auth-inline .ys-auth-type-label {
    flex: 1;
    padding: 10px 16px;
    text-align: center;
    margin-bottom: 0;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text-muted);
    transition: all var(--ys-transition);
    border-right: 1px solid var(--ys-border);
}

.ys-auth-inline .ys-auth-type-label:last-child { border-right: none; }

.ys-auth-inline .ys-auth-type-label input[type="radio"] {
    display: none;
}

.ys-auth-inline .ys-auth-type-label.active {
    background: var(--ys-primary);
    color: #fff;
}

.ys-auth-inline .ys-auth-type-label:not(.active):hover {
    background: var(--ys-bg-hover);
}

/* 身份類別下拉（inline 版） */
.ys-auth-inline .ys-auth-input {
    width: 100%;
    line-height: normal;
    height: auto;
    min-height: 42px;
    padding: 10px 12px;
    border: 1px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
    color: var(--ys-text);
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236a8ca0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.ys-auth-inline .ys-auth-input:focus {
    border-color: var(--ys-primary);
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 168, 184, 0.15);
}

.ys-auth-inline .ys-auth-turnstile {
    margin-bottom: 16px;
}

.ys-auth-inline .ys-auth-message {
    padding: 10px 14px;
    border-radius: var(--ys-radius-sm);
    font-size: 14px;
    margin-bottom: 16px;
}

.ys-auth-inline .ys-auth-message.ys-msg-error {
    background: var(--ys-danger-bg);
    color: var(--ys-danger);
}

.ys-auth-inline .ys-auth-message.ys-msg-success {
    background: var(--ys-success-bg);
    color: var(--ys-success);
}

.ys-auth-inline .ys-btn-block {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 16px;
}

.ys-auth-inline .ys-auth-links {
    text-align: center;
    margin-top: 12px;
    font-size: 13px;
}

.ys-auth-inline .ys-auth-links a {
    color: var(--ys-primary-dark);
    text-decoration: none;
}

.ys-auth-inline .ys-auth-links a:hover {
    text-decoration: underline;
}

@media (max-width: 540px) {
    .ys-auth-inline {
        padding: 20px;
        border-radius: var(--ys-radius);
    }

    .ys-auth-inline .ys-auth-row {
        flex-direction: column;
        gap: 0;
    }

    .ys-auth-inline .ys-auth-half {
        flex: none;
        width: 100%;
    }
}

/* ============================================
   用戶登入圖示 & 下拉選單
   ============================================ */
.ys-user-icon {
    display: inline-flex;
    align-items: center;
    position: relative;
}

/* 只套用到 .ys-user-icon 的「直接子 dashicons」（未登入的 trigger icon），
   避免干擾 dropdown 內嵌的 dashicons 顏色 */
.ys-user-icon > .dashicons {
    font-size: 24px;
    width: 24px;
    height: 24px;
    color: var(--ys-icon-color, var(--ys-text-muted));
    border: 2px solid var(--ys-icon-border, transparent);
    background: var(--ys-icon-bg, transparent);
    border-radius: 50%;
    padding: 4px;
    box-sizing: content-box;
    transition: all var(--ys-transition);
}

.ys-user-icon:hover > .dashicons {
    color: var(--ys-icon-hover-color, var(--ys-primary-dark));
    border-color: var(--ys-icon-hover-border, transparent);
    background: var(--ys-icon-hover-bg, transparent);
}

/* 未登入：觸發登入的 icon */
.ys-trigger-login {
    cursor: pointer;
}

/* 已登入：頭像觸發器 */
.ys-user-icon-trigger {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    border-radius: 50%;
    overflow: hidden;
    border: 2px solid var(--ys-icon-border, transparent);
    background: var(--ys-icon-bg, transparent);
    padding: 2px;
    transition: all var(--ys-transition);
}

.ys-user-icon-trigger:hover {
    border-color: var(--ys-icon-hover-border, var(--ys-primary-light));
    background: var(--ys-icon-hover-bg, transparent);
}

.ys-user-icon-trigger img {
    display: block;
    border-radius: 50%;
    width: 32px;
    height: 32px;
}

.ys-user-icon-trigger .ys-user-icon-svg {
    display: block;
    width: 28px;
    height: 28px;
    color: var(--ys-icon-color, var(--ys-text, #3a4a54));
    padding: 2px;
    transition: color var(--ys-transition);
}

.ys-user-icon-trigger:hover .ys-user-icon-svg {
    color: var(--ys-icon-hover-color, var(--ys-primary-dark));
}

/* 下拉選單 — 重設 icon 顏色變數，完全隔絕後台 icon_color 設定對 dropdown 內 icon 的影響 */
.ys-user-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius);
    box-shadow: var(--ys-shadow-hover);
    min-width: 220px;
    z-index: 9999;
    overflow: hidden;
    animation: ysDropdownIn 0.15s ease;
    /* 隔絕父層 icon 顏色變數 */
    --ys-icon-color: var(--ys-text);
    --ys-icon-hover-color: var(--ys-text);
    --ys-icon-border: transparent;
    --ys-icon-bg: transparent;
    --ys-icon-hover-border: transparent;
    --ys-icon-hover-bg: transparent;
}

@keyframes ysDropdownIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ys-user-dropdown.ys-open {
    display: block;
}

.ys-user-dropdown-header {
    padding: 14px 16px;
    border-bottom: 1px solid var(--ys-border-light);
}

.ys-user-dropdown-header strong {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text);
}

.ys-user-dropdown-header small {
    display: block;
    font-size: 12px;
    color: var(--ys-text-muted);
    margin-top: 2px;
}

.ys-user-dropdown a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    color: var(--ys-text);
    text-decoration: none;
    transition: background var(--ys-transition);
}

.ys-user-dropdown a:hover {
    background: var(--ys-bg-hover);
}

.ys-user-dropdown a .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--ys-text-muted);
}

/* hover 時 dropdown 內的 icon 明確保持易讀色，不被父層 icon 顏色覆蓋 */
.ys-user-dropdown a:hover .dashicons,
.ys-user-icon:hover .ys-user-dropdown a .dashicons {
    color: var(--ys-text);
}

.ys-user-dropdown a.ys-user-logout {
    border-top: 1px solid var(--ys-border-light);
    color: var(--ys-danger);
}

.ys-user-dropdown a.ys-user-logout .dashicons,
.ys-user-dropdown a.ys-user-logout:hover .dashicons,
.ys-user-icon:hover .ys-user-dropdown a.ys-user-logout .dashicons {
    color: var(--ys-danger);
}

/* ============================================
   v3.0 - 帳號頂部區塊
   ============================================ */
.ys-account-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius);
    padding: 16px 20px;
    margin-bottom: 16px;
    box-shadow: var(--ys-shadow);
}

.ys-account-header-left {
    display: flex;
    align-items: center;
    gap: 14px;
}

.ys-account-avatar img {
    border-radius: 50%;
    width: 48px;
    height: 48px;
}

.ys-account-info h3 {
    margin: 0 0 2px;
    font-size: 16px;
    color: var(--ys-text);
}

.ys-account-info p {
    margin: 0;
    font-size: 13px;
    color: var(--ys-text-muted);
}

.ys-account-header-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ys-account-card {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ys-text-muted);
    background: var(--ys-bg-section);
    padding: 6px 12px;
    border-radius: var(--ys-radius-sm);
}

.ys-account-card .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ============================================
   v3.0 - 訂單列表區塊
   ============================================ */
.ys-orders-section {
    margin-top: 16px;
    padding-top: 14px;
    border-top: 1px solid var(--ys-border-light);
}

.ys-orders-section h4 {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text);
}

.ys-orders-pending h4 {
    color: var(--ys-warning);
}

.ys-orders-paid h4 {
    color: var(--ys-success);
}

.ys-order-failure-reason {
    font-size: 12px;
    color: var(--ys-danger);
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.ys-order-invoice {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ys-text-muted);
}

.ys-order-invoice .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

/* ============================================
   v3.0 - 卡片選擇 Modal
   ============================================ */
.ys-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ys-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(58, 74, 84, 0.5);
}

.ys-modal-content {
    position: relative;
    background: var(--ys-bg-card);
    border-radius: var(--ys-radius-lg);
    padding: 28px;
    max-width: 440px;
    width: 90%;
    box-shadow: 0 12px 40px rgba(107, 138, 154, 0.25);
    z-index: 1;
}

.ys-modal-content h3 {
    margin: 0 0 18px;
    font-size: 18px;
    color: var(--ys-text);
}

.ys-modal-close {
    position: absolute;
    top: 14px;
    right: 14px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ys-text-muted);
    padding: 4px;
}

.ys-modal-close:hover {
    color: var(--ys-text);
}

.ys-card-options {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
}

.ys-card-option {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-sm);
    cursor: pointer;
    transition: border-color 0.2s, background 0.2s;
    font-size: 14px;
}

.ys-card-option:hover {
    border-color: var(--ys-primary);
    background: var(--ys-primary-bg);
}

.ys-card-option input[type="radio"] {
    accent-color: var(--ys-primary);
}

.ys-card-option .dashicons {
    color: var(--ys-text-muted);
}

.ys-card-option small {
    color: var(--ys-text-light);
    margin-left: auto;
}

.ys-card-default-tag {
    font-size: 11px;
    background: var(--ys-primary-bg);
    color: var(--ys-primary-dark);
    padding: 2px 8px;
    border-radius: 10px;
    margin-left: 6px;
}

.ys-card-options-empty {
    text-align: center;
    color: var(--ys-text-muted);
    padding: 16px;
}

.ys-modal-actions {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* ============================================
   v3.1 - 訂閱摘要卡片（可展開）
   ============================================ */
.ys-sub-summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 22px;
    background: var(--ys-bg-section);
    cursor: pointer;
    transition: background var(--ys-transition);
    gap: 12px;
    flex-wrap: wrap;
    user-select: none;
}

.ys-sub-summary:hover {
    background: var(--ys-bg-hover);
}

.ys-sub-summary-left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ys-sub-summary-right {
    display: flex;
    align-items: center;
    gap: 16px;
    color: var(--ys-text-muted);
    font-size: 13px;
}

.ys-sub-summary-price {
    font-weight: 600;
    color: var(--ys-text);
}

.ys-sub-summary-date {
    color: var(--ys-text-light);
}

.ys-sub-toggle-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    transition: transform 0.25s ease;
    color: var(--ys-text-muted);
}

.ys-sub-toggle-icon.ys-icon-rotated {
    transform: rotate(180deg);
}

/* 訂閱內頁 */
.ys-sub-detail {
    padding: 20px 22px;
    border-top: 1px solid var(--ys-border-light);
}

/* ============================================
   v3.1 - 訂單可展開詳情
   ============================================ */
.ys-order-row-wrap {
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-sm);
    margin-bottom: 8px;
    overflow: hidden;
}

.ys-order-row-wrap .ys-sub-order-row {
    cursor: pointer;
    border-bottom: none;
    transition: background var(--ys-transition);
}

.ys-order-row-wrap .ys-sub-order-row:hover {
    background: var(--ys-bg-hover);
}

.ys-order-toggle-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    transition: transform 0.2s ease;
    color: var(--ys-text-light);
}

.ys-order-toggle-icon.ys-icon-rotated {
    transform: rotate(180deg);
}

.ys-order-detail {
    padding: 16px 18px;
    background: var(--ys-bg);
    border-top: 1px solid var(--ys-border-light);
}

.ys-order-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.ys-order-detail-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ys-order-detail-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--ys-text-light);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.ys-order-detail-value {
    font-size: 13px;
    color: var(--ys-text);
    word-break: break-all;
}

.ys-order-detail-actions {
    padding-top: 12px;
    border-top: 1px solid var(--ys-border-light);
}

.ys-text-danger {
    color: var(--ys-danger);
}

/* ============================================
   v3.1 - 首頁 Enhance 帳號
   ============================================ */
.ys-enhance-account .ys-dash-section-title .dashicons {
    font-size: 18px;
    width: 18px;
    height: 18px;
    vertical-align: text-bottom;
    margin-right: 4px;
}

.ys-enhance-account-info {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.ys-enhance-info-row {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 12px 16px;
    background: var(--ys-bg-section);
    border-radius: var(--ys-radius-sm);
    border: 1px solid var(--ys-border-light);
}

.ys-enhance-info-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-text-muted);
    min-width: 100px;
    flex-shrink: 0;
}

.ys-enhance-info-value {
    font-size: 14px;
    color: var(--ys-text);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.ys-password-field {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.ys-password-mask {
    font-family: monospace;
    font-size: 14px;
    letter-spacing: 2px;
    color: var(--ys-text);
    background: var(--ys-bg);
    padding: 4px 10px;
    border-radius: var(--ys-radius-sm);
}

.ys-enhance-actions {
    padding-top: 8px;
}

.ys-enhance-no-account {
    text-align: center;
    padding: 32px 20px;
}

.ys-enhance-no-account p {
    color: var(--ys-text-muted);
    margin: 12px 0 20px;
    font-size: 14px;
    line-height: 1.6;
}

/* ============================================
   v3.1 - 支付訂單 Tab
   ============================================ */
.ys-payment-orders-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ys-po-row {
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-sm);
    transition: box-shadow var(--ys-transition);
}

.ys-po-row:hover {
    box-shadow: var(--ys-shadow);
}

.ys-po-row-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 18px;
    gap: 12px;
    flex-wrap: wrap;
}

.ys-po-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 140px;
}

.ys-po-number {
    font-size: 14px;
    font-weight: 700;
    color: var(--ys-text);
    font-family: 'Courier New', monospace;
}

.ys-po-number-link {
    font-size: 14px;
    font-weight: 700;
    color: var(--ys-primary-dark);
    font-family: 'Courier New', monospace;
    text-decoration: none;
}

.ys-po-number-link:hover {
    color: var(--ys-primary);
    text-decoration: underline;
}

.ys-po-amount {
    font-size: 13px;
    color: var(--ys-text-muted);
}

.ys-po-badges {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.ys-po-meta {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 13px;
    color: var(--ys-text-light);
}

.ys-po-sub-link {
    color: var(--ys-primary-dark);
    text-decoration: none;
    font-weight: 600;
    font-size: 12px;
}

.ys-po-sub-link:hover {
    color: var(--ys-primary);
    text-decoration: underline;
}

.ys-badge-primary {
    background: var(--ys-primary-bg);
    color: var(--ys-primary-dark);
}

/* ============================================
   v3.1 RWD
   ============================================ */
@media (max-width: 768px) {
    .ys-account-header {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
    }

    .ys-account-header-right {
        width: 100%;
        justify-content: flex-start;
    }

    .ys-modal-content {
        padding: 20px;
    }

    .ys-modal-actions {
        flex-direction: column;
    }

    .ys-modal-actions .ys-btn {
        width: 100%;
        text-align: center;
    }

    .ys-sub-summary {
        flex-direction: column;
        align-items: flex-start;
    }

    .ys-sub-summary-right {
        width: 100%;
        justify-content: space-between;
    }

    .ys-order-detail-grid {
        grid-template-columns: 1fr;
    }

    .ys-enhance-info-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .ys-enhance-info-label {
        min-width: auto;
    }

    .ys-po-row-main {
        flex-direction: column;
        align-items: flex-start;
    }

    .ys-dashboard-nav {
        overflow-x: auto;
        flex-wrap: nowrap;
    }

    .ys-dashboard-tab {
        padding: 10px 14px;
        font-size: 13px;
    }
}

@media (max-width: 480px) {
    .ys-sub-meta {
        grid-template-columns: 1fr;
    }

    .ys-password-field {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }

    .ys-order-page-actions {
        flex-direction: column;
    }

    .ys-order-page-actions .ys-btn {
        width: 100%;
        text-align: center;
    }
}

/* ============================================
   v3.2 - 訂閱列表卡片式
   ============================================ */
.ys-sub-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ys-sub-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.ys-sub-card-link .ys-sub-card {
    transition: box-shadow var(--ys-transition), transform var(--ys-transition);
    cursor: pointer;
}

.ys-sub-card-link:hover .ys-sub-card {
    box-shadow: var(--ys-shadow-hover);
    transform: translateY(-1px);
}

.ys-sub-card-link .ys-sub-summary {
    cursor: pointer;
}

.ys-sub-arrow-icon {
    font-size: 18px;
    width: 18px;
    height: 18px;
    color: var(--ys-text-light);
    transition: color var(--ys-transition);
}

.ys-sub-card-link:hover .ys-sub-arrow-icon {
    color: var(--ys-primary);
}

/* ============================================
   v3.2 - 訂單列表連結（訂閱內頁用）
   ============================================ */
.ys-order-row-link {
    text-decoration: none;
    color: inherit;
    display: block;
}

.ys-order-row-link:hover .ys-order-row-wrap {
    border-color: var(--ys-primary-light);
    box-shadow: var(--ys-shadow);
}

.ys-order-arrow-icon {
    font-size: 16px;
    width: 16px;
    height: 16px;
    color: var(--ys-text-light);
    transition: color var(--ys-transition);
}

.ys-order-row-link:hover .ys-order-arrow-icon {
    color: var(--ys-primary);
}

/* ============================================
   v3.2 - 返回按鈕
   ============================================ */
.ys-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    margin-bottom: 12px;
    color: var(--ys-primary);
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    transition: color var(--ys-transition);
}

.ys-back-link:hover {
    color: var(--ys-primary-dark);
}

.ys-back-link .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
}

/* ============================================
   v3.2 - 訂閱/訂單內頁標頭
   ============================================ */
.ys-sub-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.ys-sub-detail-header .ys-dash-section-title {
    margin-bottom: 0;
}

/* ============================================
   v3.2 - 訂單內頁操作按鈕
   ============================================ */
.ys-order-page-actions {
    display: flex;
    gap: 10px;
    padding-top: 16px;
    border-top: 1px solid var(--ys-border-light);
    margin-top: 16px;
}

/* 訂單詳情全寬欄位 */
.ys-order-detail-item-full {
    grid-column: 1 / -1;
}

/* ================================================
   Checkout v3.4 — 全寬左右佈局（Shopify 風格）
   ================================================ */

/* === 全寬頁面覆蓋（隱藏主題 header/footer） === */
body.ys-checkout-fullwidth-page .site-header,
body.ys-checkout-fullwidth-page .site-footer,
body.ys-checkout-fullwidth-page .ct-header,
body.ys-checkout-fullwidth-page .ct-footer,
body.ys-checkout-fullwidth-page header,
body.ys-checkout-fullwidth-page footer,
body.ys-checkout-fullwidth-page .wp-site-blocks > header,
body.ys-checkout-fullwidth-page .wp-site-blocks > footer,
body.ys-checkout-fullwidth-page #masthead,
body.ys-checkout-fullwidth-page #colophon,
body.ys-checkout-fullwidth-page .sidebar,
body.ys-checkout-fullwidth-page aside.widget-area {
    display: none !important;
}

body.ys-checkout-fullwidth-page .site-content,
body.ys-checkout-fullwidth-page .entry-content,
body.ys-checkout-fullwidth-page .ct-container,
body.ys-checkout-fullwidth-page article,
body.ys-checkout-fullwidth-page .wp-site-blocks,
body.ys-checkout-fullwidth-page .content-area,
body.ys-checkout-fullwidth-page main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* === 全寬結帳 — 6:4 佈局，內容 1180px 置中，背景延伸全寬 === */
.ys-co-fullwidth {
    display: flex;
    min-height: 100vh;
    width: 100%;
    padding-top: var(--ys-co-top-padding, 0);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
}

/* 左側表單區 — 6 份，白色背景延伸到螢幕邊緣 */
.ys-co-left-wrap {
    flex: 6;
    min-width: 0;
    display: flex;
    justify-content: flex-end;
    background: #fff;
}
.ys-co-left {
    max-width: calc(1180px * 0.6);
}
.ys-co-left {
    padding: 40px 48px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    width: 100%;
}
.ys-co-left-inner {
    max-width: 100%;
    width: 100%;
}

/* 右側摘要 — 4 份，深色背景延伸到螢幕邊緣 */
.ys-co-right {
    flex: 4;
    flex-shrink: 0;
    background: var(--ys-co-sidebar-bg, #1a2332);
    color: #fff;
    padding: 40px 36px;
}
.ys-co-right-inner {
    max-width: calc(1180px * 0.4);
    position: sticky;
    top: 40px;
}

/* === Logo === */
.ys-co-logo {
    margin-bottom: 36px;
}
.ys-co-logo img {
    max-height: 40px;
    width: auto;
    display: block;
}
.ys-co-logo-text {
    font-size: 22px;
    font-weight: 700;
    color: var(--ys-text);
    text-decoration: none;
}
.ys-co-logo-text:hover {
    color: var(--ys-primary-dark);
}

/* === 警告提示 === */
.ys-co-alert {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    border-radius: var(--ys-radius);
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 24px;
}
.ys-co-alert svg {
    flex-shrink: 0;
    margin-top: 2px;
}
.ys-co-alert-warning {
    background: #fef9ee;
    border: 1px solid #f0c36d;
    color: #7a5e1e;
}

/* === 區段 === */
.ys-co-section {
    margin-bottom: 24px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 24px 28px;
}
.ys-co-section-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0 0 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid #f0f0f0;
    padding-bottom: 12px;
    border-bottom: 1px solid #e5e7eb;
    color: var(--ys-text);
    letter-spacing: -0.01em;
}

/* === 優惠碼 === */
.ys-co-coupon-row {
    display: flex;
    gap: 10px;
}
.ys-co-coupon-row .ys-co-input {
    flex: 1;
    margin-bottom: 0;
    height: 44px;
}
.ys-co-coupon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 20px;
    height: 44px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-primary-dark);
    background: transparent;
    border: 1.5px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    cursor: pointer;
    transition: all var(--ys-transition);
    white-space: nowrap;
}
.ys-co-coupon-btn:hover {
    background: var(--ys-primary-bg);
    border-color: var(--ys-primary);
}
#ys-coupon-result { margin-top: 8px; font-size: 13px; }
#ys-coupon-result .ys-coupon-success { color: var(--ys-success); }
#ys-coupon-result .ys-coupon-error { color: var(--ys-danger); }

/* === 帳號類型切換 === */
.ys-co-type-toggle { display: flex; gap: 8px; margin-bottom: 16px; }
.ys-co-type-label {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    height: 46px;
    box-sizing: border-box;
    border: 1.5px solid var(--ys-border);
    border-radius: var(--ys-radius-sm);
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all var(--ys-transition);
    color: var(--ys-text-muted);
    margin: 0;
    line-height: 1;
}
.ys-co-type-label:hover { border-color: var(--ys-primary); }
.ys-co-type-label.active { border-color: var(--ys-primary); background: var(--ys-primary-bg); color: var(--ys-primary-dark); }
.ys-co-type-label input[type="radio"] { display: none; }

/* === 表單欄位 === */
.ys-co-fields label { display: block; font-size: 13px; font-weight: 600; color: #6b7280; margin-bottom: 6px; letter-spacing: 0.01em; }
.ys-co-fields label .req,
.ys-auth-field .req,
.ys-form-field .req { color: #c08080; font-weight: 400; }

.ys-co-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #d1d5db;
    border-radius: 8px;
    font-size: 14px;
    color: var(--ys-text);
    background: #fff;
    transition: border-color var(--ys-transition), box-shadow var(--ys-transition);
    box-sizing: border-box;
}
.ys-co-input:focus {
    border-color: var(--ys-co-btn-bg, #2563eb);
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.ys-co-input::placeholder { color: #9ca3af; }
.ys-co-input-readonly {
    background: #f9fafb;
    cursor: not-allowed;
    color: #6b7280;
}

.ys-co-row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.ys-co-row-1 { margin-bottom: 12px; }
.ys-co-field { min-width: 0; }

/* === 網域輸入群組 === */
.ys-co-domain-input-group {
    display: flex;
    align-items: stretch;
}
.ys-co-domain-input-group .ys-co-input {
    flex: 1;
    border-radius: 8px 0 0 8px;
    border-right: 0;
    margin: 0;
}
.ys-co-domain-suffix {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: #f3f4f6;
    border: 1.5px solid #d1d5db;
    border-left: 0;
    border-right: 0;
    font-size: 14px;
    color: #6b7280;
    white-space: nowrap;
}
.ys-co-domain-check-btn {
    display: inline-flex;
    align-items: center;
    padding: 0 16px;
    background: transparent;
    border: 1.5px solid #d1d5db;
    border-left: 0;
    border-radius: 0 8px 8px 0;
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-primary-dark);
    cursor: pointer;
    white-space: nowrap;
    transition: all var(--ys-transition);
}
.ys-co-domain-check-btn:hover {
    background: var(--ys-primary-bg);
    border-color: var(--ys-primary);
}
.ys-co-domain-check-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.ys-co-domain-result {
    margin-top: 6px;
    font-size: 13px;
}
.ys-co-domain-success { color: var(--ys-success); }
.ys-co-domain-error { color: var(--ys-danger); }
.ys-co-hint {
    margin-top: 6px;
    font-size: 12px;
    color: #9ca3af;
}

/* === 付款按鈕 === */
.ys-co-submit-section {
    margin-top: 32px;
    text-align: center;
}
.ys-co-pay-btn {
    display: block;
    width: 100%;
    padding: 16px 24px;
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    background: var(--ys-co-btn-bg, #2563eb);
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, transform 0.1s ease;
    letter-spacing: 0.01em;
}
.ys-co-pay-btn:hover {
    background: var(--ys-co-btn-hover, #1d4ed8);
}
.ys-co-pay-btn:active {
    transform: scale(0.99);
}
.ys-co-pay-hint {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    margin-top: 10px;
}

/* === 右側摘要面板 === */
.ys-co-summary-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0 0 28px;
    letter-spacing: -0.01em;
}

/* 商品列表 — PayUni 風格虛線分隔 */
.ys-co-summary-items {
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
    padding-bottom: 20px;
    margin-bottom: 20px;
}
.ys-co-summary-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 14px 0;
}
.ys-co-summary-item + .ys-co-summary-item {
    border-top: 1px dashed rgba(255, 255, 255, 0.12);
}
.ys-co-summary-item-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    flex: 1;
    min-width: 0;
}
.ys-co-summary-item-name {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
}
.ys-co-summary-item-meta {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.45);
}
.ys-co-summary-item-price {
    font-size: 15px;
    font-weight: 600;
    color: #fff;
    margin-left: 16px;
    white-space: nowrap;
}

/* 合計區 */
.ys-co-summary-totals {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.ys-co-summary-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.7);
}
.ys-co-summary-discount .ys-co-discount-amount {
    color: #6ee7b7;
}
.ys-co-summary-grand-total {
    display: flex;
    justify-content: space-between;
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    padding-top: 16px;
    margin-top: 6px;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

/* === RWD — 手機改為上下排列 === */
@media (max-width: 960px) {
    .ys-co-fullwidth {
        flex-direction: column-reverse;
    }
    .ys-co-left-wrap {
        justify-content: center;
    }
    .ys-co-left,
    .ys-co-right {
        flex: none;
        width: 100%;
        padding: 24px;
    }
    .ys-co-left-inner,
    .ys-co-right-inner {
        max-width: 100%;
        position: static;
    }
}
@media (max-width: 600px) {
    .ys-co-left { padding: 24px 16px; }
    .ys-co-right { padding: 24px 16px; }
    .ys-co-row-2 { grid-template-columns: 1fr; }
    .ys-co-type-toggle { flex-direction: column; }
    .ys-co-coupon-row { flex-direction: column; }
    .ys-co-coupon-btn { width: 100%; }
    .ys-co-summary-grand-total { font-size: 18px; }
    .ys-co-domain-input-group { flex-wrap: wrap; }
    .ys-co-domain-input-group .ys-co-input { border-radius: 8px; border-right: 1.5px solid #d1d5db; }
    .ys-co-domain-suffix { display: none; }
    .ys-co-domain-check-btn { border-radius: 8px; border: 1.5px solid #d1d5db; margin-top: 8px; width: 100%; justify-content: center; padding: 10px; }
}

/* ============================================
   網站商品卡片 - [ys_hosting_website_products]
   ============================================ */

/* Grid 容器 */
.ys-wp-grid {
    display: grid;
    grid-template-columns: repeat(var(--ys-wp-columns, 3), 1fr);
    gap: 24px;
    margin: 24px 0;
}

.ys-wp-no-products {
    text-align: center;
    color: var(--ys-text-muted);
    padding: 40px 20px;
}

/* 卡片 */
.ys-wp-card {
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-lg);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
    box-shadow: var(--ys-shadow);
}

.ys-wp-card:hover {
    box-shadow: var(--ys-shadow-hover);
    transform: translateY(-2px);
}

/* 圖片區 */
.ys-wp-card-image-wrap {
    width: 100%;
    height: 200px;
    overflow: hidden;
    position: relative;
}

.ys-wp-card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ys-wp-card-image-placeholder {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, var(--ys-primary-light) 0%, var(--ys-primary-bg) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ys-wp-card-image-placeholder .dashicons {
    font-size: 48px;
    width: 48px;
    height: 48px;
    color: var(--ys-primary);
    opacity: 0.5;
}

/* 內容區 */
.ys-wp-card-body {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.ys-wp-card-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--ys-text);
    margin: 0 0 8px;
    line-height: 1.4;
}

.ys-wp-card-desc {
    font-size: 14px;
    color: var(--ys-text-muted);
    margin: 0 0 16px;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* 價格區 */
.ys-wp-card-pricing {
    margin-bottom: 16px;
}

.ys-wp-card-price {
    display: block;
}

.ys-wp-currency {
    font-size: 16px;
    font-weight: 600;
    color: var(--ys-primary-dark);
    vertical-align: super;
}

.ys-wp-amount {
    font-size: 32px;
    font-weight: 800;
    color: var(--ys-primary-dark);
    line-height: 1;
    margin-left: 2px;
}

.ys-wp-card-hosting {
    display: block;
    font-size: 13px;
    color: var(--ys-text-muted);
    margin-top: 4px;
}

/* 功能列表 */
.ys-wp-card-features {
    list-style: none;
    padding: 0;
    margin: 0 0 20px;
    flex: 1;
}

.ys-wp-card-features li {
    position: relative;
    padding-left: 22px;
    font-size: 14px;
    color: var(--ys-text);
    line-height: 1.5;
    margin-bottom: 8px;
}

.ys-wp-card-features li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--ys-success);
    font-weight: 700;
    font-size: 14px;
}

/* 操作按鈕區 */
.ys-wp-card-actions {
    display: flex;
    gap: 8px;
    margin-top: auto;
}

.ys-wp-card-demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--ys-radius-sm);
    border: 1.5px solid var(--ys-primary);
    color: var(--ys-primary);
    background: transparent;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.ys-wp-card-demo:hover {
    background: var(--ys-primary-bg);
    color: var(--ys-primary-dark);
    text-decoration: none;
}

.ys-wp-card-demo .dashicons {
    font-size: 16px;
    width: 16px;
    height: 16px;
    line-height: 16px;
}

.ys-wp-card-buy {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    font-size: 14px;
    font-weight: 600;
    border-radius: var(--ys-radius-sm);
    border: none;
    background: var(--ys-primary);
    color: #fff;
    cursor: pointer;
    transition: background 0.2s ease;
    white-space: nowrap;
}

.ys-wp-card-buy:hover {
    background: var(--ys-primary-dark);
}

.ys-wp-card-buy:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* RWD：平板以下改為 2 欄 */
@media (max-width: 960px) {
    .ys-wp-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
    }
}

/* RWD：手機改為 1 欄 */
@media (max-width: 768px) {
    .ys-wp-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .ys-wp-card-image-wrap {
        height: 180px;
    }

    .ys-wp-card-body {
        padding: 16px;
    }

    .ys-wp-amount {
        font-size: 28px;
    }

    .ys-wp-card-actions {
        flex-direction: column;
    }

    .ys-wp-card-demo {
        width: 100%;
    }
}

/* ============================================
   網站商品內頁（v3.4 全新設計）
   ============================================ */
.ys-wp-detail {
    max-width: 1200px;
    margin: 0 auto;
}

.ys-wp-back-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ys-text-muted);
    text-decoration: none;
    font-size: 14px;
    margin-bottom: 24px;
    transition: color 0.2s;
}
.ys-wp-back-link:hover {
    color: var(--ys-primary-dark);
}

/* 上半部：左右兩欄 */
.ys-wp-detail-top {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    margin-bottom: 40px;
}

/* 左欄：圖片 */
.ys-wp-detail-image img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
    display: block;
}

.ys-wp-detail-image-placeholder {
    width: 100%;
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--ys-primary-light, #e8eef2) 0%, var(--ys-primary-bg, #f5f8fa) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    border: 1px solid var(--ys-border-light);
}
.ys-wp-detail-image-placeholder .dashicons {
    font-size: 64px;
    width: 64px;
    height: 64px;
    color: var(--ys-text-light);
}

/* 右欄：資訊 */
.ys-wp-detail-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.ys-wp-detail-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ys-text);
    margin: 0 0 16px;
    line-height: 1.3;
}

.ys-wp-detail-price {
    margin-bottom: 8px;
}

.ys-wp-detail-price .ys-wp-currency {
    font-size: 18px;
    font-weight: 600;
    color: var(--ys-primary-dark);
    vertical-align: super;
}

.ys-wp-detail-price .ys-wp-amount {
    font-size: 36px;
    font-weight: 800;
    color: var(--ys-primary-dark);
    line-height: 1;
    margin-left: 2px;
}

.ys-wp-detail-hosting-fee {
    font-size: 14px;
    color: var(--ys-text-muted);
    margin-bottom: 20px;
}

.ys-wp-detail-desc {
    color: var(--ys-text-muted);
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 24px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ys-wp-detail-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

.ys-wp-detail-demo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.ys-wp-detail-buy {
    flex: 1;
    min-width: 160px;
}

/* 下半部：全寬內容區 */
.ys-wp-detail-bottom {
    margin-top: 0;
}

.ys-wp-detail-section {
    background: var(--ys-bg-card);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-lg, 12px);
    padding: 32px;
    margin-bottom: 24px;
}

.ys-wp-detail-section-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--ys-text);
    margin: 0 0 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ys-border-light);
}

/* 詳細介紹 prose */
.ys-wp-detail-content {
    font-size: 16px;
    line-height: 1.8;
    color: var(--ys-text);
}

.ys-wp-detail-content h2,
.ys-wp-detail-content h3,
.ys-wp-detail-content h4 {
    margin-top: 24px;
    margin-bottom: 12px;
    color: var(--ys-text);
}

.ys-wp-detail-content p {
    margin-bottom: 16px;
}

.ys-wp-detail-content ul,
.ys-wp-detail-content ol {
    margin-bottom: 16px;
    padding-left: 24px;
}

.ys-wp-detail-content li {
    margin-bottom: 8px;
}

.ys-wp-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 16px 0;
}

/* 功能規格列表 */
.ys-wp-detail-features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 24px;
}
.ys-wp-detail-features-list li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    font-size: 15px;
    color: var(--ys-text);
}
.ys-wp-detail-features-list .dashicons {
    color: var(--ys-success, #7dab8e);
    font-size: 18px;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ys-wp-not-found {
    text-align: center;
    padding: 60px 20px;
    color: var(--ys-text-muted);
}

/* 卡片標題連結 */
.ys-wp-card-title a {
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}
.ys-wp-card-title a:hover {
    color: var(--ys-primary-dark);
}

/* 卡片圖片連結 */
a.ys-wp-card-image-wrap {
    display: block;
    text-decoration: none;
}

/* RWD：768px 以下改為上下排列 */
@media (max-width: 768px) {
    .ys-wp-detail-top {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .ys-wp-detail-title {
        font-size: 22px;
    }

    .ys-wp-detail-price .ys-wp-amount {
        font-size: 28px;
    }

    .ys-wp-detail-section {
        padding: 20px;
    }

    .ys-wp-detail-features-list {
        grid-template-columns: 1fr;
    }

    .ys-wp-detail-actions {
        flex-direction: column;
    }

    .ys-wp-detail-buy {
        width: 100%;
    }
}

/* ============================================
   Dashboard 網站狀態區塊
   ============================================ */
.ys-sub-website-status {
    background: var(--ys-bg);
    border: 1px solid var(--ys-border-light);
    border-radius: var(--ys-radius-sm, 8px);
    padding: 16px;
    margin-bottom: 16px;
}
.ys-sub-website-status h4 {
    font-size: 14px;
    font-weight: 600;
    color: var(--ys-text);
    margin: 0 0 10px;
}

.ys-website-status-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
}
.ys-website-status-cloning {
    background: #fff8e6;
    color: #b8860b;
}
.ys-website-status-completed {
    background: #e8f5e9;
    color: #2e7d32;
}
.ys-website-status-completed .dashicons {
    color: #2e7d32;
}
.ys-website-status-failed {
    background: #ffeaea;
    color: #c62828;
}
.ys-website-status-failed .dashicons {
    color: #c62828;
}

.ys-spinner-sm {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid #e2e8f0;
    border-top-color: #b8860b;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.ys-website-domain-link {
    margin-top: 8px;
}
.ys-website-domain-link a {
    color: var(--ys-primary-dark);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.ys-website-domain-link a:hover {
    text-decoration: underline;
}
.ys-website-domain-link .dashicons {
    font-size: 14px;
    width: 14px;
    height: 14px;
}

.ys-website-error-msg {
    margin-top: 8px;
    color: #c62828;
    font-size: 13px;
    background: rgba(198, 40, 40, 0.05);
    padding: 8px 12px;
    border-radius: 6px;
    word-break: break-all;
}
.ys-website-contact-support {
    margin-top: 6px;
    font-size: 13px;
    color: var(--ys-text-muted);
}

/* Clone 建站進度動畫 */
.ys-clone-progress {
    text-align: center;
    padding: 24px 16px;
}
.ys-clone-spinner {
    width: 40px;
    height: 40px;
    border: 3px solid var(--ys-border, #e2e8ed);
    border-top-color: var(--ys-primary, #8fa8b8);
    border-radius: 50%;
    animation: ys-spin 1s linear infinite;
    margin: 0 auto 12px;
}
.ys-clone-status-text {
    color: var(--ys-text-muted, #718096);
    font-size: 14px;
    margin: 0;
}

/* ============================================
   資料中心篩選按鈕
   ============================================ */
.ys-pl-dc-filters { display: flex; gap: 8px; margin-bottom: 20px; flex-wrap: wrap; }
.ys-pl-dc-btn {
    padding: 8px 16px;
    border: 1.5px solid var(--ys-border, #e0e0e0);
    border-radius: 20px;
    background: var(--ys-bg-card, #fff);
    color: var(--ys-text, #333);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}
.ys-pl-dc-btn:hover { border-color: var(--ys-primary, #8fa8b8); color: var(--ys-primary, #8fa8b8); }
.ys-pl-dc-btn.active { background: var(--ys-primary, #8fa8b8); border-color: var(--ys-primary, #8fa8b8); color: #fff; }

/* 多年繳提示 */
/* 資料中心標籤 */
.ys-dc-tag {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--ys-primary, #8fa8b8);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    vertical-align: middle;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    line-height: 1.4;
}

/* 卡片標籤行（國家+多年繳） */
.ys-card-tags-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

/* 卡片標題行 */
.ys-card-title-row {
    margin-bottom: 4px;
}

.ys-card-title-row .ys-card-title {
    display: block;
    margin-top: 2px;
}

/* 多年繳優惠標籤（卡片內） */
.ys-card-badge-multiyear {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 4px;
    background: var(--ys-warning-bg, #faf2e5);
    color: #8a6a3a;
    font-size: 11px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.4;
}

/* 列表篩選工具列 */
.ys-pl-toolbar {
    display: flex;
    align-items: center;
    gap: 24px;
    margin-bottom: 20px;
    padding: 16px 20px;
    background: var(--ys-bg-section, #f8fafb);
    border: 1px solid var(--ys-border-light, #edf1f4);
    border-radius: 10px;
    flex-wrap: wrap;
}
.ys-pl-toolbar-group {
    display: flex;
    align-items: center;
    gap: 10px;
}
.ys-pl-toolbar-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-text-muted, #7b8a96);
    white-space: nowrap;
}
.ys-pl-dc-select {
    padding: 8px 14px;
    border: 1.5px solid var(--ys-border, #e2e8ed);
    border-radius: 8px;
    background: #fff;
    font-size: 13px;
    color: var(--ys-text, #2c3e50);
    min-width: 140px;
    cursor: pointer;
}
.ys-pl-cycle-tabs {
    display: flex;
    gap: 4px;
    background: #fff;
    border: 1.5px solid var(--ys-border, #e2e8ed);
    border-radius: 8px;
    padding: 3px;
}
.ys-pl-cycle-tab {
    padding: 8px 18px;
    border: none;
    border-radius: 6px;
    background: transparent;
    font-size: 13px;
    font-weight: 600;
    color: var(--ys-text-muted, #7b8a96);
    cursor: pointer;
    transition: all 0.2s;
}
.ys-pl-cycle-tab:hover {
    color: var(--ys-text, #2c3e50);
}
.ys-pl-cycle-tab.active {
    background: var(--ys-primary, #8fa8b8);
    color: #fff;
}

@media (max-width: 640px) {
    .ys-pl-toolbar { flex-direction: column; align-items: flex-start; }
}

/* ============================================
   註冊按鈕修正
   ============================================ */
.ys-register-action .ys-btn,
.ys-register-action button,
.ys-auth-inline .ys-btn-block {
    margin-bottom: 0;
}

/* SELECT 文字被切修正 */
.ys-form-field select,
.ys-auth-inline select,
.ys-auth-inline .ys-auth-input {
    line-height: normal;
    height: auto;
    min-height: 42px;
    padding: 10px 12px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236a8ca0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

/* ============================================
   國際化結帳 — 電話國碼 & 國家搜尋
   @since 3.6.0
   ============================================ */

/* 電話國碼 + 電話號碼並排 */
.ys-phone-with-code {
    display: flex;
    gap: 6px;
    align-items: stretch;
}
.ys-phone-code-select {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    flex-shrink: 0;
    padding: 10px 6px;
    border: 1px solid var(--ys-border, #c5d1d8);
    border-radius: 6px;
    font-size: 13px;
    background: #fff;
    color: var(--ys-text, #3a4a54);
    cursor: pointer;
    appearance: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ys-phone-code-select:focus {
    border-color: var(--ys-primary, #8fa8b8);
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 168, 184, 0.15);
}
.ys-phone-with-code input[type="tel"] {
    flex: 1;
    min-width: 0;
}

/* 結帳頁電話國碼 */
.ys-co-fields .ys-phone-with-code {
    display: flex;
    gap: 6px;
}
.ys-co-fields .ys-phone-code-select {
    width: 90px;
    min-width: 90px;
    max-width: 90px;
    flex-shrink: 0;
    padding: 10px 6px;
    border: 1px solid #dde5ea;
    border-radius: 8px;
    font-size: 13px;
    background: #fff;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ys-co-fields .ys-phone-with-code .ys-co-input {
    flex: 1;
    min-width: 0;
}

/* 可搜尋國家選擇器 */
.ys-country-search-container {
    position: relative;
    width: 100%;
}
.ys-country-search-input {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ys-border, #c5d1d8);
    border-radius: 6px;
    font-size: 14px;
    color: var(--ys-text, #3a4a54);
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.2s;
}
.ys-country-search-input:focus {
    border-color: var(--ys-primary, #8fa8b8);
    outline: none;
    box-shadow: 0 0 0 3px rgba(143, 168, 184, 0.15);
}
.ys-country-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    max-height: 220px;
    overflow-y: auto;
    background: #fff;
    border: 1px solid var(--ys-border, #c5d1d8);
    border-top: none;
    border-radius: 0 0 6px 6px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.1);
    z-index: 1000;
}
.ys-country-option {
    padding: 8px 12px;
    font-size: 14px;
    cursor: pointer;
    transition: background 0.15s;
    color: var(--ys-text, #3a4a54);
}
.ys-country-option:hover {
    background: var(--ys-bg-hover, #e8eff5);
}
.ys-country-option.ys-country-empty {
    color: var(--ys-text-muted, #7a8b95);
    cursor: default;
    font-style: italic;
}

/* 結帳頁內的國家搜尋輸入框用 checkout 風格 */
.ys-co-fields .ys-country-search-input {
    border: 1px solid #dde5ea;
    border-radius: 8px;
    padding: 12px 14px;
    font-size: 15px;
}
.ys-co-fields .ys-country-search-input:focus {
    border-color: var(--ys-co-btn-bg, #2563eb);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}
.ys-co-fields .ys-country-dropdown {
    border-radius: 0 0 8px 8px;
}

/* RWD */
@media (max-width: 540px) {
    .ys-phone-with-code {
        flex-direction: column;
        gap: 4px;
    }
    .ys-phone-code-select,
    .ys-co-fields .ys-phone-code-select {
        width: 100%;
        max-width: 100%;
    }
}

/* ============================================
   購物金（Batch 6）
   ============================================ */

/* 結帳頁購物金折抵行 */
.ys-co-summary-credit {
    color: #c4a67a;
}

.ys-co-credit-amount {
    font-weight: 600;
}

/* 結帳頁提示訊息 */
.ys-checkout-notice {
    padding: 8px 12px;
    background: #fef9e7;
    border: 1px solid #f0d78c;
    border-radius: 6px;
    font-size: 12px;
    color: #8a6d3b;
    line-height: 1.5;
}

/* 儀表板購物金卡片 */
.ys-credit-overview {
    margin-top: 20px;
}

.ys-credit-balance-card {
    transition: box-shadow 0.2s ease;
}

.ys-credit-balance-card:hover {
    box-shadow: var(--ys-shadow-hover);
}

/* 購物金 Tab — Hero 卡片 */
.ys-credit-hero-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 32px;
    background: linear-gradient(135deg, #f5efe6, #faf6f0, #f0ebe2);
    border-radius: 14px;
    box-shadow: var(--ys-shadow);
}
.ys-credit-hero-label {
    font-size: 13px;
    color: var(--ys-text-muted);
    margin-bottom: 6px;
}
.ys-credit-hero-amount {
    font-size: 36px;
    font-weight: 700;
    color: #c4a67a;
}

/* 購物金類型 Badges */
.ys-credit-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.6;
}
.ys-credit-badge-success { background: var(--ys-success-bg); color: #4a7a5a; }
.ys-credit-badge-danger  { background: #fce8e8; color: #c45050; }
.ys-credit-badge-info    { background: var(--ys-info-bg); color: #4a6a7a; }
.ys-credit-badge-gold    { background: #fef6e0; color: #b08d48; }

/* Toggle Switch */
.ys-toggle-row {
    padding: 14px 18px;
    background: var(--ys-bg-alt, #f5f8fa);
    border-radius: 10px;
}
.ys-toggle-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}
.ys-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.ys-toggle-slider {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: #ccc;
    border-radius: 24px;
    transition: 0.3s;
    cursor: pointer;
}
.ys-toggle-slider::before {
    content: '';
    position: absolute;
    width: 18px;
    height: 18px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: 0.3s;
}
.ys-toggle-switch input:checked + .ys-toggle-slider {
    background: #c4a67a;
}
.ys-toggle-switch input:checked + .ys-toggle-slider::before {
    transform: translateX(20px);
}

/* 結帳頁購物金區塊 */
.ys-co-credit-section .ys-co-hint {
    color: #c4a67a;
    font-weight: 500;
}

/* 管理員 — 金色 Badge */
.ys-badge-gold {
    background: #fef6e0;
    color: #b08d48;
}

/* ============================================
   結帳 - 金流選擇器
   ============================================ */
.ys-gateway-selector {
    margin-top: 24px;
}

.ys-gateway-selector .ys-co-section-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ys-text);
    margin: 0 0 12px;
}

.ys-gateway-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    border: 2px solid #e2e8ed;
    border-radius: 8px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: all 0.2s;
}

.ys-gateway-option:hover {
    border-color: #8fa8b8;
}

.ys-gateway-option.selected {
    border-color: #8fa8b8;
    background: rgba(143, 168, 184, 0.05);
}

.ys-gateway-option input[type="radio"] {
    margin: 0;
    accent-color: #8fa8b8;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.ys-gateway-icon {
    width: 40px;
    height: 40px;
    object-fit: contain;
    flex-shrink: 0;
}

.ys-gateway-option-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.ys-gateway-name {
    font-weight: 600;
    font-size: 15px;
    color: var(--ys-text, #3a4a54);
}

.ys-gateway-desc {
    font-size: 12px;
    color: #7a8a9a;
    line-height: 1.4;
}

/* ============================================
   庫存狀態
   ============================================ */
.ys-pl-sold-out {
    opacity: 0.6;
    pointer-events: none;
}

.ys-stock-badge {
    display: inline-block;
    font-size: 11px;
    padding: 2px 8px;
    border-radius: 4px;
    vertical-align: middle;
    margin-right: 6px;
    font-weight: 600;
    line-height: 1.4;
}

.ys-stock-badge.sold-out {
    background: var(--ys-danger-bg, #f8e8e8);
    color: var(--ys-danger, #c08080);
}

.ys-stock-badge.low-stock {
    background: var(--ys-warning-bg, #faf2e5);
    color: var(--ys-warning, #c4a67a);
}

/* ============================================
   Dark Theme — 深色科技風格
   ============================================ */

/* -- CSS Variables (dark) -- */
.ys-dark-theme {
    --ys-dark-bg: transparent;
    --ys-dark-card-bg: #1a2332;
    --ys-dark-card-border: #2a3a4e;
    --ys-dark-card-hover: #1e2940;
    --ys-dark-accent: #3b82f6;
    --ys-dark-accent-hover: #2563eb;
    --ys-dark-text: #ffffff;
    --ys-dark-text-muted: #94a3b8;
    --ys-dark-text-dim: #64748b;
    --ys-dark-spec-bg: #253345;
    --ys-dark-check: #3b82f6;
    --ys-dark-badge-bg: #3b82f6;
}

/* ---- 卡片版（.ys-hosting-products.ys-dark-theme） ---- */

.ys-dark-theme .ys-hosting-card {
    background: var(--ys-dark-card-bg);
    border: 1px solid var(--ys-dark-card-border);
    border-radius: 12px;
    padding: 32px 28px;
    transition: all 0.3s;
}

.ys-dark-theme .ys-hosting-card:hover {
    border-color: var(--ys-dark-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
}

/* 推薦卡片 */
.ys-dark-theme .ys-card-featured {
    border-color: var(--ys-dark-accent);
    position: relative;
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.1);
}

.ys-dark-theme .ys-card-featured-badge {
    position: absolute;
    top: -12px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ys-dark-accent);
    color: #fff;
    padding: 4px 16px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
    z-index: 1;
}

/* 標題 */
.ys-dark-theme .ys-card-title {
    color: var(--ys-dark-text);
    font-size: 22px;
    font-weight: 700;
    font-style: italic;
}

.ys-dark-theme .ys-card-desc {
    color: var(--ys-dark-text-muted);
}

/* 價格 */
.ys-dark-theme .ys-card-currency {
    color: var(--ys-dark-text);
    font-size: 18px;
}

.ys-dark-theme .ys-card-amount {
    color: var(--ys-dark-text);
    font-size: 42px;
    font-weight: 700;
}

.ys-dark-theme .ys-card-period {
    color: var(--ys-dark-text-muted);
    font-size: 16px;
}

/* 規格標籤列 */
.ys-dark-theme .ys-card-specs-row {
    display: flex;
    gap: 8px;
    margin: 16px 0;
    flex-wrap: wrap;
}

.ys-dark-theme .ys-spec-tag {
    background: var(--ys-dark-spec-bg);
    color: #e2e8f0;
    padding: 6px 14px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* 功能列表 */
.ys-dark-theme .ys-card-features {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

.ys-dark-theme .ys-card-features li {
    color: var(--ys-dark-text-muted);
    padding: 6px 0;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.ys-dark-theme .ys-check {
    color: var(--ys-dark-check);
    font-weight: 700;
}

/* 按鈕 — 普通（outline） */
.ys-dark-theme .ys-btn-dark-outline {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: transparent;
    border: 1.5px solid var(--ys-dark-accent);
    color: var(--ys-dark-accent);
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.ys-dark-theme .ys-btn-dark-outline:hover {
    background: var(--ys-dark-accent);
    color: #fff;
}

/* 按鈕 — 推薦（實心） */
.ys-dark-theme .ys-btn-dark-primary {
    display: block;
    width: 100%;
    padding: 14px 24px;
    background: var(--ys-dark-accent);
    border: 1.5px solid var(--ys-dark-accent);
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    text-align: center;
}

.ys-dark-theme .ys-btn-dark-primary:hover {
    background: var(--ys-dark-accent-hover);
    border-color: var(--ys-dark-accent-hover);
}

/* 已加入購物車 */
.ys-dark-theme .ys-btn-in-cart {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
}

/* 週期切換 */
.ys-dark-theme .ys-hosting-cycle-toggle {
    display: inline-flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: 32px;
    background: var(--ys-dark-card-bg);
    border-radius: 8px;
    padding: 4px;
}

.ys-dark-theme .ys-cycle-btn {
    padding: 10px 20px;
    border: none;
    background: transparent;
    color: var(--ys-dark-text-muted);
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.ys-dark-theme .ys-cycle-btn.active {
    background: var(--ys-dark-accent);
    color: #fff;
}

.ys-dark-theme .ys-cycle-save {
    background: rgba(59, 130, 246, 0.2);
    color: var(--ys-dark-accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 11px;
    margin-left: 4px;
}

/* Grid */
.ys-dark-theme .ys-hosting-grid {
    display: grid;
    grid-template-columns: repeat(var(--ys-columns, 3), 1fr);
    gap: 20px;
}

/* DC 標籤 */
.ys-dark-theme .ys-dc-tag {
    background: var(--ys-dark-spec-bg);
    color: #e2e8f0;
    border: 1px solid rgba(59, 130, 246, 0.2);
}

/* tags 行 */
.ys-dark-theme .ys-card-tags-row {
    margin-bottom: 6px;
}

/* 規格項目（icon+text 垂直） */
.ys-dark-theme .ys-card-specs .ys-spec-item {
    color: var(--ys-dark-text-muted);
}

.ys-dark-theme .ys-card-specs .ys-spec-item .dashicons {
    color: var(--ys-dark-accent);
}

.ys-dark-theme .ys-card-features li {
    color: var(--ys-dark-text-muted);
}

.ys-dark-theme .ys-check {
    color: var(--ys-dark-accent);
}

/* 多年繳 badge */
.ys-dark-theme .ys-card-badge-multiyear {
    background: rgba(59, 130, 246, 0.15);
    color: var(--ys-dark-accent);
}

/* RWD — 卡片版 */
@media (max-width: 960px) {
    .ys-dark-theme .ys-hosting-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 640px) {
    .ys-dark-theme .ys-hosting-grid {
        grid-template-columns: 1fr;
    }
}

/* ---- 列表版（.ys-product-list.ys-dark-theme） ---- */

.ys-dark-theme.ys-product-list .ys-pl-item {
    background: var(--ys-dark-card-bg);
    border: 1px solid var(--ys-dark-card-border);
    border-radius: 12px;
    padding: 24px;
    margin-bottom: 16px;
}

.ys-dark-theme.ys-product-list .ys-pl-item:hover {
    border-color: var(--ys-dark-accent);
}

.ys-dark-theme .ys-pl-title,
.ys-dark-theme .ys-pl-title a {
    color: #ffffff !important;
}

.ys-dark-theme .ys-pl-specs {
    color: #cbd5e0 !important;
}

.ys-dark-theme.ys-product-list .ys-dc-tag {
    background: var(--ys-dark-spec-bg) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.ys-dark-theme .ys-pl-badge {
    background: var(--ys-dark-accent) !important;
    color: #fff !important;
}

.ys-dark-theme .ys-pl-feature-tag {
    background: var(--ys-dark-spec-bg) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.ys-dark-theme .ys-pl-cycle-tag {
    background: rgba(59, 130, 246, 0.12) !important;
    color: var(--ys-dark-accent) !important;
    border: 1px solid rgba(59, 130, 246, 0.25) !important;
}

.ys-dark-theme .ys-pl-price {
    color: #ffffff !important;
}

.ys-dark-theme .ys-pl-price .ys-pl-currency,
.ys-dark-theme .ys-pl-price .ys-pl-amount,
.ys-dark-theme .ys-pl-price .ys-pl-suffix {
    color: #ffffff !important;
}

.ys-dark-theme .ys-pl-add-btn {
    background: var(--ys-dark-accent) !important;
    border: 1.5px solid var(--ys-dark-accent) !important;
    color: #ffffff !important;
}

.ys-dark-theme .ys-pl-add-btn:hover {
    background: var(--ys-dark-accent-hover) !important;
    border-color: var(--ys-dark-accent-hover) !important;
    color: #fff !important;
}

.ys-dark-theme .ys-pl-add-btn.ys-in-cart {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
}

/* 列表篩選工具列 */
.ys-dark-theme.ys-pl-toolbar,
.ys-dark-theme .ys-pl-toolbar {
    background: var(--ys-dark-card-bg) !important;
    border-color: var(--ys-dark-card-border) !important;
}

.ys-dark-theme .ys-pl-toolbar-label {
    color: #cbd5e0 !important;
}

.ys-dark-theme .ys-pl-cycle-tab {
    background: transparent !important;
    color: var(--ys-dark-text-muted) !important;
    border: none !important;
}

.ys-dark-theme .ys-pl-cycle-tab.active {
    background: var(--ys-dark-accent) !important;
    color: #fff !important;
}

.ys-dark-theme .ys-pl-dc-select {
    background: var(--ys-dark-spec-bg) !important;
    color: #e2e8f0 !important;
    border-color: var(--ys-dark-card-border) !important;
}

.ys-dark-theme .ys-pl-cycle-tabs {
    background: var(--ys-dark-spec-bg) !important;
    border-color: var(--ys-dark-card-border) !important;
}

.ys-dark-theme .ys-pl-cycle-tab:hover {
    color: #e2e8f0 !important;
}

.ys-dark-theme .ys-pl-demo-link {
    color: var(--ys-dark-accent) !important;
}

.ys-dark-theme .ys-pl-cycle-select {
    background: var(--ys-dark-spec-bg) !important;
    color: #ffffff !important;
    border-color: var(--ys-dark-card-border) !important;
}

.ys-dark-theme .ys-pl-cycle-select option {
    background: #1a2332;
    color: #ffffff;
}

.ys-dark-theme .ys-pl-dc-select option {
    background: #1a2332;
    color: #ffffff;
}

/* ---- 網站商品卡片 Dark ---- */

.ys-wp-grid.ys-dark-theme .ys-wp-card {
    background: var(--ys-dark-card-bg);
    border: 1px solid var(--ys-dark-card-border);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s;
}

.ys-wp-grid.ys-dark-theme .ys-wp-card:hover {
    border-color: var(--ys-dark-accent);
    transform: translateY(-4px);
    box-shadow: 0 8px 32px rgba(59, 130, 246, 0.15);
}

.ys-wp-grid.ys-dark-theme .ys-wp-card-title,
.ys-wp-grid.ys-dark-theme .ys-wp-card-title a {
    color: var(--ys-dark-text) !important;
}

.ys-wp-grid.ys-dark-theme .ys-wp-card-desc {
    color: var(--ys-dark-text-muted) !important;
}

.ys-wp-grid.ys-dark-theme .ys-wp-card-price {
    color: var(--ys-dark-text) !important;
}

.ys-wp-grid.ys-dark-theme .ys-wp-currency {
    color: var(--ys-dark-text) !important;
}

.ys-wp-grid.ys-dark-theme .ys-wp-amount {
    color: var(--ys-dark-text) !important;
}

.ys-wp-grid.ys-dark-theme .ys-wp-card-suffix {
    color: var(--ys-dark-text-muted) !important;
}

.ys-wp-grid.ys-dark-theme .ys-wp-card-features li {
    color: var(--ys-dark-text-muted) !important;
}

.ys-wp-grid.ys-dark-theme .ys-wp-card-hosting {
    color: var(--ys-dark-text-dim) !important;
}

.ys-wp-grid.ys-dark-theme .ys-wp-card-body {
    background: var(--ys-dark-card-bg);
}

/* 網站商品列表 Dark */
.ys-dark-theme.ys-website-list .ys-pl-item {
    background: var(--ys-dark-card-bg);
    border: 1px solid var(--ys-dark-card-border);
    border-radius: 12px;
}

.ys-dark-theme.ys-website-list .ys-pl-item:hover {
    border-color: var(--ys-dark-accent);
}

.ys-dark-theme.ys-website-list .ys-pl-title,
.ys-dark-theme.ys-website-list .ys-pl-title a {
    color: #ffffff !important;
}

.ys-dark-theme.ys-website-list .ys-pl-specs {
    color: #cbd5e0 !important;
}

.ys-dark-theme.ys-website-list .ys-pl-specs {
    color: var(--ys-dark-text-muted) !important;
}

.ys-dark-theme.ys-website-list .ys-pl-price,
.ys-dark-theme.ys-website-list .ys-pl-price * {
    color: #ffffff !important;
}

.ys-dark-theme.ys-website-list .ys-pl-demo-link {
    color: var(--ys-dark-accent) !important;
}

.ys-dark-theme.ys-website-list .ys-pl-feature-tag {
    background: var(--ys-dark-spec-bg) !important;
    color: #e2e8f0 !important;
    border: 1px solid rgba(59, 130, 246, 0.2) !important;
}

.ys-dark-theme.ys-website-list .ys-pl-add-btn {
    background: var(--ys-dark-accent) !important;
    border: 1.5px solid var(--ys-dark-accent) !important;
    color: #ffffff !important;
}

.ys-dark-theme.ys-website-list .ys-pl-add-btn:hover {
    background: var(--ys-dark-accent-hover) !important;
    border-color: var(--ys-dark-accent-hover) !important;
    color: #fff !important;
}

.ys-dark-theme.ys-website-list .ys-pl-add-btn.ys-in-cart {
    background: #22c55e !important;
    border-color: #22c55e !important;
    color: #fff !important;
}