@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════════
   XHE UI 元件庫
   ──────────────────────────────────────────────────────────────────
   規則：

   1. 這裡只准用 theme-ref-ofa377.css 的語意 token（--ref-*）。
      --color-w100 / w65 / w25 / w18 / w10 / --color-b44 一律 deprecated：
      那組變數描述的是顏色不是用途，同一個名字在深色與淺色主題下語意相反，
      是先前「修 A 壞 B」的根源。

   2. 金色只出現在三種地方：VIP 等級、金額數字、得獎徽章。
      卡片邊、標題底線、分隔線一律不鑲金。

   3. 階層靠底色分區、字級字重對比、留白建立，不靠裝飾線。

   4. 載入順序必須是所有 profile 樣式的最後一支，否則會被舊規則蓋掉。
   ══════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────
   x-card：有 header 的卡片
   ────────────────────────────────────────────── */

.x-card {
    background: var(--ref-surface);
    border: 1px solid var(--ref-border);
    border-radius: var(--ref-r-lg);
    box-shadow: var(--ref-elev-1);
    overflow: hidden;
    transition: box-shadow 0.22s ease, border-color 0.22s ease;
}

.x-card:hover {
    box-shadow: var(--ref-elev-2);
}

.x-card__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ref-sp-3);
    padding: var(--ref-sp-3) var(--ref-sp-4);
    background: var(--ref-surface-2);
    border-bottom: 1px solid var(--ref-border);
}

.x-card__title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ref-primary);
    letter-spacing: 0.2px;
}

.x-card__title i {
    margin-right: var(--ref-sp-2);
    font-size: 0.92em;
    opacity: 0.72;
}

.x-card__desc {
    margin: 2px 0 0;
    font-size: 0.8rem;
    font-weight: 400;
    color: var(--ref-text-muted);
}

.x-card__actions {
    display: flex;
    align-items: center;
    gap: var(--ref-sp-2);
    flex-shrink: 0;
}

.x-card__body {
    padding: var(--ref-sp-4);
}

.x-card__body--flush {
    padding: 0;
}

/* ──────────────────────────────────────────────
   x-table：深藍表頭、斑馬紋、等寬數字
   ────────────────────────────────────────────── */

.x-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.x-table {
    width: 100%;
    border-collapse: collapse;
    border: 0;
}

.x-table th {
    padding: 11px 12px;
    background: linear-gradient(180deg, #004e99, var(--ref-primary));
    color: var(--ref-on-accent);
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.3px;
    text-align: center;
    white-space: nowrap;
    border: 0;
}

.x-table th:first-child {
    border-radius: var(--ref-r-sm) 0 0 0;
}

.x-table th:last-child {
    border-radius: 0 var(--ref-r-sm) 0 0;
}

.x-table td {
    padding: 12px;
    background: var(--ref-surface);
    color: var(--ref-text-muted);
    font-size: 0.78rem;
    text-align: center;
    vertical-align: middle;
    border: 0;
    border-bottom: 1px solid var(--ref-border);
}

.x-table tbody tr:nth-child(even) td {
    background: var(--ref-surface-2);
}

.x-table tbody tr:hover td {
    background: var(--ref-primary-soft);
}

.x-table tbody tr:last-child td {
    border-bottom: 0;
}

/* 金額欄：等寬數字讓位數對齊 */
.x-table td.x-num,
.x-table tfoot td {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.x-table tfoot td {
    background: var(--ref-primary-soft);
    color: var(--ref-primary);
    font-size: 0.9rem;
    font-weight: 700;
    border-top: 1px solid var(--ref-border-strong);
    border-bottom: 0;
}

/* ──────────────────────────────────────────────
   x-btn
   ────────────────────────────────────────────── */

.x-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ref-sp-2);
    min-height: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--ref-r-sm);
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease,
        color 0.18s ease, box-shadow 0.18s ease;
}

.x-btn:disabled,
.x-btn.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

.x-btn--primary {
    background: var(--ref-primary);
    border-color: var(--ref-primary);
    color: var(--ref-on-accent);
    box-shadow: var(--ref-elev-1);
}

.x-btn--primary:hover {
    background: var(--ref-primary-hover);
    border-color: var(--ref-primary-hover);
    color: var(--ref-on-accent);
    box-shadow: var(--ref-elev-2);
}

.x-btn--ghost {
    background: var(--ref-surface);
    border-color: var(--ref-border-strong);
    color: var(--ref-primary);
}

.x-btn--ghost:hover {
    background: var(--ref-primary-soft);
    border-color: var(--ref-primary);
    color: var(--ref-primary);
}

.x-btn--danger {
    background: var(--ref-surface);
    border-color: rgba(217, 45, 32, 0.4);
    color: var(--ref-danger);
}

.x-btn--danger:hover {
    background: rgba(217, 45, 32, 0.08);
    border-color: var(--ref-danger);
    color: var(--ref-danger);
}

.x-btn--sm {
    min-height: 30px;
    padding: 0 12px;
    font-size: 0.78rem;
}

.x-btn--block {
    width: 100%;
}

/* 深色底（彈窗內）用的變體 */
.x-btn--on-dark.x-btn--ghost {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ref-border-dark);
    color: var(--ref-on-dark);
}

.x-btn--on-dark.x-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--ref-on-dark);
}

/* ──────────────────────────────────────────────
   x-chip：金額快選、日期快選、篩選標籤
   ────────────────────────────────────────────── */

.x-chip {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ref-sp-2);
    min-height: 32px;
    padding: 0 14px;
    background: var(--ref-surface);
    border: 1px solid var(--ref-border);
    border-radius: var(--ref-r-pill);
    color: var(--ref-text-muted);
    font-size: 0.82rem;
    font-weight: 500;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.x-chip:hover {
    background: var(--ref-primary-soft);
    border-color: var(--ref-primary);
    color: var(--ref-primary);
}

.x-chip.is-active {
    background: var(--ref-primary);
    border-color: var(--ref-primary);
    color: var(--ref-on-accent);
}

.x-chip.is-active:hover {
    background: var(--ref-primary-hover);
    border-color: var(--ref-primary-hover);
    color: var(--ref-on-accent);
}

.x-chip.is-disabled {
    opacity: 0.45;
    cursor: not-allowed;
    pointer-events: none;
}

/* ──────────────────────────────────────────────
   x-field：表單欄位
   ────────────────────────────────────────────── */

.x-field {
    display: flex;
    flex-direction: column;
    gap: var(--ref-sp-2);
}

.x-field__label {
    display: flex;
    align-items: center;
    gap: var(--ref-sp-1);
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ref-text-muted);
    letter-spacing: 0.2px;
}

.x-field__label .x-req {
    color: var(--ref-danger);
}

.x-field__input,
select.x-field__input,
textarea.x-field__input {
    width: 100%;
    min-height: 42px;
    padding: 0 14px;
    background: var(--ref-surface);
    border: 1px solid var(--ref-border-strong);
    border-radius: var(--ref-r-sm);
    color: var(--ref-text);
    font-size: 0.92rem;
    transition: border-color 0.18s ease, box-shadow 0.18s ease;
    -moz-appearance: textfield;
}

textarea.x-field__input {
    padding: 10px 14px;
    min-height: 88px;
    line-height: 1.6;
}

.x-field__input:focus {
    outline: none;
    border-color: var(--ref-primary);
    box-shadow: 0 0 0 3px var(--ref-primary-soft);
}

.x-field__input::placeholder {
    color: var(--ref-text-subtle);
}

.x-field__input:disabled {
    background: var(--ref-surface-sunken);
    color: var(--ref-text-subtle);
    cursor: not-allowed;
}

.x-field__hint {
    font-size: 0.76rem;
    color: var(--ref-text-subtle);
    line-height: 1.5;
}

/* 深色底（彈窗內）的欄位：白色 input 在深底上太跳 */
.x-field--on-dark .x-field__label {
    color: var(--ref-on-dark-muted);
}

.x-field--on-dark .x-field__input {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ref-border-dark);
    color: var(--ref-on-dark);
}

.x-field--on-dark .x-field__input:focus {
    border-color: var(--ref-secondary);
    box-shadow: 0 0 0 3px rgba(137, 196, 244, 0.18);
}

.x-field--on-dark .x-field__input::placeholder {
    color: rgba(255, 255, 255, 0.42);
}

.x-field--on-dark select.x-field__input option {
    background: var(--ref-surface-dark);
    color: var(--ref-on-dark);
}

/* ──────────────────────────────────────────────
   x-badge：狀態徽章
   ────────────────────────────────────────────── */

.x-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--ref-sp-1);
    padding: 3px 10px;
    border-radius: var(--ref-r-pill);
    background: var(--ref-primary-soft);
    color: var(--ref-primary);
    font-size: 0.76rem;
    font-weight: 600;
    line-height: 1.5;
    white-space: nowrap;
}

.x-badge--success {
    background: rgba(27, 127, 79, 0.1);
    color: var(--ref-success);
}

.x-badge--pending {
    background: rgba(161, 92, 0, 0.1);
    color: var(--ref-warn);
}

.x-badge--failed {
    background: rgba(217, 45, 32, 0.1);
    color: var(--ref-danger);
}

/* 金色徽章：只給 VIP 等級與得獎用 */
.x-badge--gold {
    background: var(--ref-gold-fill);
    color: var(--ref-gold-deep);
}

/* 狀態點：徽章前的小圓燈 */
.x-dot {
    flex: 0 0 auto;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

/* ──────────────────────────────────────────────
   x-empty：空狀態
   ────────────────────────────────────────────── */

.x-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--ref-sp-2);
    padding: 48px 16px;
    text-align: center;
}

.x-empty__icon {
    font-size: 2.4rem;
    color: var(--ref-border-strong);
    line-height: 1;
}

.x-empty__text {
    font-size: 0.88rem;
    color: var(--ref-text-subtle);
}

/* ──────────────────────────────────────────────
   x-stat：數字強調區塊（金色唯一的常駐位置）
   ────────────────────────────────────────────── */

.x-stat {
    display: flex;
    flex-direction: column;
    gap: var(--ref-sp-1);
    padding: var(--ref-sp-3) var(--ref-sp-4);
    background: var(--ref-surface-2);
    border: 1px solid var(--ref-border);
    border-radius: var(--ref-r-md);
}

.x-stat__label {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--ref-text-muted);
    letter-spacing: 0.4px;
}

.x-stat__value {
    display: flex;
    align-items: baseline;
    gap: var(--ref-sp-1);
    font-size: 1.6rem;
    font-weight: 700;
    color: var(--ref-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.15;
}

.x-stat__unit {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ref-text-muted);
}

.x-stat--gold .x-stat__value {
    color: var(--ref-gold-deep);
}

.x-stat--on-dark {
    background: rgba(255, 255, 255, 0.06);
    border-color: var(--ref-border-dark);
}

.x-stat--on-dark .x-stat__label {
    color: var(--ref-on-dark-muted);
}

.x-stat--on-dark .x-stat__value {
    color: var(--ref-gold-hi);
}

.x-stat--on-dark .x-stat__unit {
    color: var(--ref-on-dark-muted);
}

/* ──────────────────────────────────────────────
   x-hero：頁面深藍標題帶
   取代原本孤立的 .profile-sub-title，讓主色在頁面上有存在感
   ────────────────────────────────────────────── */

.x-hero {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--ref-sp-4);
    padding: var(--ref-sp-5) var(--ref-sp-5);
    margin-bottom: var(--ref-sp-5);
    background:
        radial-gradient(120% 180% at 100% 0%, rgba(137, 196, 244, 0.22) 0%, rgba(137, 196, 244, 0) 58%),
        linear-gradient(135deg, var(--ref-primary) 0%, #002a54 100%);
    border-radius: var(--ref-r-lg);
    box-shadow: var(--ref-elev-2);
}

.x-hero__title {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ref-on-dark);
    letter-spacing: 0.5px;
}

.x-hero__desc {
    margin: 6px 0 0;
    font-size: 0.85rem;
    color: var(--ref-on-dark-muted);
}

.x-hero__aside {
    display: flex;
    align-items: center;
    gap: var(--ref-sp-3);
    flex-wrap: wrap;
}

@media screen and (max-width: 767px) {
    .x-hero {
        padding: var(--ref-sp-4);
        margin-bottom: var(--ref-sp-4);
    }

    .x-hero__title {
        font-size: 1.25rem;
    }

    .x-card__body {
        padding: var(--ref-sp-3);
    }
}

/* profile 各頁的 h1.profile-sub-title 直接升級成 hero 帶。
   用 h1 限定是因為 games.ejs / forget.ejs 也用同一個 class，但那是 h2，
   不該套 hero。 */
h1.profile-sub-title {
    padding: var(--ref-sp-5);
    margin-bottom: var(--ref-sp-5);
    background:
        radial-gradient(120% 180% at 100% 0%, rgba(137, 196, 244, 0.22) 0%, rgba(137, 196, 244, 0) 58%),
        linear-gradient(135deg, var(--ref-primary) 0%, #002a54 100%);
    border-radius: var(--ref-r-lg);
    box-shadow: var(--ref-elev-2);
    color: var(--ref-on-dark);
    font-size: 1.5rem;
    letter-spacing: 0.5px;
}

/* ──────────────────────────────────────────────
   .point-section 升級成 x-card 結構

   舊樣板是「section > h2 > 內容」的扁平結構，沒有 header 可以包。
   這裡用負 margin 讓 h2 滿版成為卡片 header，不必動 14 頁 EJS 就能拿到
   跟 x-card 一致的結構感。逐頁改寫成 x-card 之後可以刪掉這段。
   ────────────────────────────────────────────── */

.point-section {
    padding: 16px;
    border-radius: var(--ref-r-lg);
    box-shadow: var(--ref-elev-1);
}

.point-section:hover {
    box-shadow: var(--ref-elev-2);
}

.point-section > h2 {
    margin: -16px -16px 16px;
    padding: 12px 16px 12px 28px;
    background: var(--ref-surface-2);
    border-bottom: 1px solid var(--ref-border);
    border-radius: 15px 15px 0 0;
    font-size: 1rem;
    letter-spacing: 0.2px;
}

.point-section > h2::before {
    left: 16px;
}

/* ──────────────────────────────────────────────
   會員側欄 #profile_model
   ────────────────────────────────────────────── */

#profile_model {
    padding: 20px 16px;
}

/* 餘額區改成 x-stat 的樣子：標籤小、數字大，金色只落在金額本身 */
#profile_model .person_money {
    padding: var(--ref-sp-3) var(--ref-sp-4);
    background: var(--ref-surface-2);
    border: 1px solid var(--ref-border);
    border-radius: var(--ref-r-md);
    text-align: left;
}

#profile_model .person_money .money_title {
    margin-bottom: var(--ref-sp-1);
    padding-left: 0;
    border-left: 0;
    color: var(--ref-text-muted);
    font-size: 0.76rem;
    font-weight: 500;
    letter-spacing: 0.4px;
}

#profile_model .person_money > p {
    margin: 0;
    text-align: left;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--ref-text-muted);
}

#profile_model .person_money > p > span {
    margin-right: 3px;
    color: var(--ref-gold-deep);
    font-size: 1.55rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

#profile_model .save_btn {
    margin: var(--ref-sp-4) 0 var(--ref-sp-5);
    gap: var(--ref-sp-2);
}

#profile_model .save_btn > .btn {
    flex: 1 1 0;
}

/* 原本項目間距 32px，十一個項目撐得又高又空。收到 2px 靠底色分隔。 */
#profile_model .profile_nav_wrapper {
    gap: 2px;
}

#profile_model .profile_nav_item {
    justify-content: flex-start;
    gap: var(--ref-sp-3);
    padding: 10px 12px;
    border-radius: var(--ref-r-sm);
    color: var(--ref-text);
    font-size: 0.92rem;
}

#profile_model .profile_nav_item i {
    width: 18px;
    text-align: center;
    color: var(--ref-text-subtle);
    transition: color 0.18s ease;
}

/* 選中態走主色實心指示條，不用金 */
#profile_model .profile_nav_wrapper a.is-active,
#profile_model .profile_nav_wrapper a.active,
#profile_model .profile_nav_wrapper a.is-active .profile_nav_item {
    background: var(--ref-primary-soft);
    box-shadow: inset 3px 0 0 var(--ref-primary);
}

#profile_model .profile_nav_wrapper a.is-active i,
#profile_model .profile_nav_wrapper a.active i {
    color: var(--ref-primary);
}

#profile_model .profile_nav_wrapper a:not(.is-active):not(.active):hover .profile_nav_item,
#profile_model .profile_nav_wrapper a:not(.is-active):not(.active):hover {
    background: var(--ref-primary-softer);
    color: var(--ref-primary);
}

#profile_model .profile_nav_wrapper a:not(.is-active):not(.active):hover i {
    color: var(--ref-primary);
}

/* ──────────────────────────────────────────────
   .gift 的三種情境接到 x-chip
   （存款方式格、金額快選格、篩選膠囊）
   ────────────────────────────────────────────── */

.saveWay .gift,
.save-amount-grid .gift {
    background-color: var(--ref-surface);
    border: 1px solid var(--ref-border);
    border-radius: var(--ref-r-md);
    color: var(--ref-text-muted);
    box-shadow: none;
}

.saveWay .gift i {
    color: var(--ref-text-subtle);
    font-size: 1rem;
}

.saveWay .gift:hover,
.save-amount-grid .gift:hover {
    background-color: var(--ref-primary-softer);
    border-color: var(--ref-primary);
    color: var(--ref-primary);
}

.saveWay .gift:hover i {
    color: var(--ref-primary);
}

/* 選中態：原本是 rgba(220,38,38,.08) 紅底，紅色不在白藍金裡 */
.saveWay .gift.light,
.save-amount-grid .gift.light,
.filter-card .save-amount-grid .gift.light {
    background: var(--ref-primary);
    border-color: var(--ref-primary);
    color: var(--ref-on-accent);
}

.saveWay .gift.light i,
.filter-card .save-amount-grid .gift.light i {
    color: var(--ref-on-accent);
}

.saveWay .gift.false {
    color: var(--ref-text-subtle);
    border-color: var(--ref-border);
}

/* 篩選膠囊 */
.filter-card .save-amount-grid .gift {
    background: var(--ref-surface);
    border-color: var(--ref-border);
    color: var(--ref-text-muted);
}

.filter-card .save-amount-grid .gift i {
    color: var(--ref-text-subtle);
}

.filter-card .save-amount-grid .gift:hover {
    background: var(--ref-primary-softer);
    border-color: var(--ref-primary);
    color: var(--ref-primary);
}

.filter-card .save-amount-grid .gift:hover i {
    color: var(--ref-primary);
}

/* ──────────────────────────────────────────────
   表單欄位：舊 class 統一到 x-field 的視覺
   ────────────────────────────────────────────── */

.save-input-field,
.text_money,
.filter-card .filter-input-row .save-input-field {
    background-color: var(--ref-surface);
    border: 1px solid var(--ref-border-strong);
    border-radius: var(--ref-r-sm);
    color: var(--ref-text);
}

.save-input-field:focus,
.text_money:focus {
    outline: none;
    border-color: var(--ref-primary);
    /* 原本是 rgba(220,38,38,.12) 紅光暈與 caret-color:#ffd4c7 */
    box-shadow: 0 0 0 3px var(--ref-primary-soft);
    caret-color: var(--ref-primary);
}

.save-input-field::placeholder,
.text_money::placeholder {
    color: var(--ref-text-subtle);
}

/* ══════════════════════════════════════════════════════════════════
   舊 class 銜接層
   ──────────────────────────────────────────────────────────────────
   下面這些是舊樣板還在用、且現值明顯不屬於白藍金主色的規則。
   逐頁遷移完成後可以刪除。
   ══════════════════════════════════════════════════════════════════ */

/* .savemoney_btn / .gobank_btn 原本是 #dec6c4 粉底、hover #a75953 磚紅，
   與白藍金完全無關，這裡直接接到 x-btn--primary 的外觀。 */
.savemoney_btn,
.gobank_btn {
    background-color: var(--ref-primary);
    border: 1px solid var(--ref-primary);
    border-radius: var(--ref-r-sm);
    color: var(--ref-on-accent);
    font-weight: 600;
    box-shadow: var(--ref-elev-1);
    transition: background-color 0.18s ease, box-shadow 0.18s ease;
}

.savemoney_btn:hover,
.gobank_btn:hover {
    background-color: var(--ref-primary-hover);
    box-shadow: var(--ref-elev-2);
}

.gobank_btn > a {
    color: var(--ref-on-accent);
}

/* .fix（維護中膠囊）原本是 --color-b44 黑 44% 底配 --color-w100 深灰字，
   淺色主題下等於深灰字壓深灰底。 */
.fix {
    background-color: var(--ref-primary-soft);
    color: var(--ref-primary);
}

/* .money_title 的左側粗紅條在主色化之後是深藍，收細一點才不會搶戲 */
.money_title {
    border-left-width: 3px;
    border-left-color: var(--ref-primary);
    color: var(--ref-text);
    font-weight: 500;
}

/* 狀態語意色統一。
   原本成功用土黃 #ca8a04、待審亮橘 #f59e0b、失敗有時是主色深藍有時是
   #f87171 淺紅，同一個「成功」在不同頁面是三種顏色。 */
.status-table td.status-success,
.verify-progress-step--success .verify-progress-state,
.verify-password-hint i.fa-circle-check {
    color: var(--ref-success);
}

.status-table td.status-pending,
.verify-progress-step--pending .verify-progress-state {
    color: var(--ref-warn);
}

.status-table td.status-failed,
.verify-progress-step--failed .verify-progress-state {
    color: var(--ref-danger);
}

/* 進度膠囊與註冊手機膠囊原本用 --color-w10 半透明藍當底，疊在 hero 的淡藍
   漸層上會變成中間調，配 --color-w65 的次要文字只剩 4.0。改白底卡片，
   文字對比拉到 5.7 以上，視覺上也和其他 x-card 一致。 */
.verify-progress-step,
.verify-hero-phone {
    background: var(--ref-surface);
    border-color: var(--ref-border);
}

/* 未驗證的步驟編號原本是灰底(--color-w18)灰字(--color-w65)，只有 3.0 對比。
   改淡藍底＋主文字色。 */
.verify-progress-num {
    background: var(--ref-primary-soft);
    color: var(--ref-text);
}

.verify-progress-step--success .verify-progress-num {
    background: rgba(20, 102, 63, 0.12);
    color: var(--ref-success);
}

.verify-progress-step--pending .verify-progress-num {
    background: rgba(161, 92, 0, 0.12);
    color: var(--ref-warn);
}

.verify-progress-step--failed .verify-progress-num {
    background: rgba(217, 45, 32, 0.12);
    color: var(--ref-danger);
}

.verify-status--success {
    background: rgba(27, 127, 79, 0.1);
    color: var(--ref-success);
    border-color: rgba(27, 127, 79, 0.3);
}

.verify-status--pending {
    background: rgba(161, 92, 0, 0.1);
    color: var(--ref-warn);
    border-color: rgba(161, 92, 0, 0.3);
}

.verify-status--failed {
    background: rgba(217, 45, 32, 0.1);
    color: var(--ref-danger);
    border-color: rgba(217, 45, 32, 0.3);
}

.verify-status--unverified {
    background: var(--ref-surface-2);
    color: var(--ref-text-muted);
    border-color: var(--ref-border);
}

/* 標題原本是 #003d79 → #f59e0b 的文字漸層，中段會混成濁褐 */
.agent-hero-title,
.vip-hero-level {
    background: none;
    -webkit-text-fill-color: currentColor;
    color: var(--ref-primary);
}

/* 儲值頁的 ATM 尾數徽章原本是紅色系 */
.save-atm-suffix-badge {
    background-color: var(--ref-primary-soft);
    border: 1px solid var(--ref-border-strong);
    color: var(--ref-primary);
}

.agent-reward-tiers li strong {
    color: var(--ref-gold-deep);
}

/* 剩餘的裝飾性金邊全部收掉。金色只留在 VIP 卡、VIP/推薦頁的徽章圖示、
   以及餘額金額這三處。 */
.status-table tfoot tr.report-total-row td {
    border-top: 1px solid var(--ref-border-strong);
}

.save-atm-summary,
.verify-hero-card {
    border-color: var(--ref-border);
}

/* VIP 對照表的表頭被 .vip-col-name / .vip-col-level 的 --color-w10 蓋成淡灰，
   跟其他頁的深藍表頭對不起來。表頭一律深藍，當前等級那欄用金色標出來。 */
.status-table.vip-table thead th.vip-col-name,
.status-table.vip-table thead th.vip-col-level {
    background: linear-gradient(180deg, #004e99, var(--ref-primary));
    color: var(--ref-on-accent);
}

.status-table.vip-table thead th.vip-col-level--active {
    background: var(--ref-gold);
    color: var(--ref-on-gold);
    font-weight: 700;
}

a.js-order-detail:hover {
    border-color: var(--ref-primary);
}

/* 分頁器整組還在 --color-w* 灰底，選中頁又是金色漸層 */
.lux-pager-btn,
.lux-pager-jump-input {
    background: var(--ref-surface);
    border-color: var(--ref-border-strong);
    color: var(--ref-text-muted);
}

.lux-pager-btn:hover:not([disabled]) {
    background: var(--ref-primary-soft);
    border-color: var(--ref-primary);
    color: var(--ref-primary);
}

.lux-pager-btn.active {
    background: var(--ref-primary);
    border-color: var(--ref-primary);
    color: var(--ref-on-accent);
}

.lux-pager-jump-input:focus {
    border-color: var(--ref-primary);
    background: var(--ref-surface);
}

.lux-pager-ellipsis,
.lux-pager-info {
    color: var(--ref-text-muted);
}

.lux-pager-status strong {
    color: var(--ref-primary);
}