/* ===== Red音游窝 - 统一版样式（强制生效） ===== */

:root {
    --primary-red: #FF4757;
    --secondary-red: #FF3742;
    --dark-red: #C44569;
    --light-red: #FFE0E6;
    --bg-gray: #F7F7F7;
    --card-bg: #FFFFFF;
    --text-dark: #2C2C2C;
    --text-medium: #5A5A5A;
    --text-light: #8E8E8E;
    --border-color: #E8E8E8;
    --success: #2ED573;
    --warning: #FFA502;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

body {
    font-family: var(--font-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif);
    background: var(--md-bg, linear-gradient(135deg, #ffffff 0%, #fff5f5 100%));
    color: var(--md-text, var(--text-dark));
    min-height: 100vh;
    padding-bottom: 80px;
    -webkit-font-smoothing: antialiased;
}

/* ===== 统一标题栏 ===== */
.page-title-bar {
    padding: 15px 20px;
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--md-surface);
    border-bottom: 1px solid var(--md-outline);
    position: sticky;
    top: 0;
    z-index: 50;
    box-shadow: var(--md-elev-1);
}

/* 充值页标题栏：使用与全站一致的 M3 顶部 App Bar（取消悬浮卡片感） */
.page-title-bar.recharge-title-bar {
    margin: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
    border-top: none;
    border-bottom: 1px solid var(--md-outline);
    background: var(--md-surface);
    box-shadow: var(--md-elev-1);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    padding: 14px 20px;
}

.page-title-bar.recharge-title-bar .main-title {
    font-size: 18px;
    font-weight: 900;
    letter-spacing: 0.2px;
}

.page-title-bar.recharge-title-bar .sub-title {
    display: none;
}

/* 返回按钮：M3 Text Button 风格（适配深浅色） */
.m3-back-btn {
    background: color-mix(in srgb, var(--md-surface) 90%, transparent);
    border: 1px solid color-mix(in srgb, var(--md-outline) 85%, transparent);
    color: var(--md-text);
    font-size: 14px;
    padding: 9px 12px;
    cursor: pointer;
    margin-right: 0;
    border-radius: 999px;
    transition: transform var(--md-dur-2) var(--md-ease), filter var(--md-dur-2) var(--md-ease), background var(--md-dur-2) var(--md-ease), border-color var(--md-dur-2) var(--md-ease);
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 900;
}

.m3-back-btn:hover {
    filter: brightness(1.03);
    background: color-mix(in srgb, var(--md-brand) 10%, transparent);
}

.m3-back-btn:active {
    transform: scale(0.98);
}

.m3-back-btn i {
    font-size: 14px;
}

.page-title-bar .logo {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    border: 1px solid rgba(255, 71, 87, 0.1);
}

.title-text-group {
    display: flex;
    flex-direction: column;
}

.main-title {
    font-size: 20px;
    font-weight: 700;
    color: var(--md-text);
}

.sub-title {
    font-size: 12px;
    color: var(--md-text-3);
}

/* 渐变标题（核心风格） */
.gradient-text {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: -0.5px;
}

/* ===== 容器 ===== */
.container {
    padding: 0 20px 20px;
}

/* ===== 统一样式 - 模态弹窗 (M3 Style) ===== */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    transition: all 0.3s var(--md-ease);
}

/* 统一 M3 模态弹窗规范 (基于方案 A) */
.m3-modal-content {
    background: var(--md-surface);
    color: var(--md-text);
    border-radius: 28px;
    padding: 24px;
    width: min(420px, 90vw);
    border: 1px solid var(--md-outline);
    box-shadow: var(--md-elev-3);
    animation: modalSlideUp 0.3s var(--md-ease);
    display: flex;
    flex-direction: column;
    max-height: 85vh; /* 确保不超出屏幕高度 */
}

.m3-modal-title {
    font-size: 20px;
    font-weight: 900;
    color: var(--md-text);
    margin-bottom: 16px;
    line-height: 1.2;
    display: flex;
    align-items: center;
    gap: 12px;
}

.m3-modal-body {
    font-size: 14px;
    line-height: 1.6;
    color: var(--md-text-2);
    margin-bottom: 0; /* 由内容区域自身控制间距，避免产生“上下大空隙” */
    overflow-y: auto; /* 内部内容过多时允许滚动 */
    padding-right: 4px;
}

/* 兼容原有 modal-content 以平滑过渡 */
.modal-content {
    background: var(--md-surface);
    color: var(--md-text);
    border-radius: 28px;
    padding: 24px;
    width: min(420px, 90vw);
    border: 1px solid var(--md-outline);
    box-shadow: var(--md-elev-2);
    animation: modalSlideUp 0.3s var(--md-ease);
}

.m3-modal-actions {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    margin-top: auto; /* 始终推到底部 */
}

/* 底部导航栏联动模糊 */
/* 强制隐藏导航栏，增加 !important 确保优先级 */
body.modal-open .bottom-nav {
    display: none !important;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(20px) scale(0.95); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ===== 人口计数器样式 ===== */
.people-counter {
    display: block;
    text-align: center;
    background: var(--md-surface);
    margin: 15px 20px;
    padding: 20px;
    border-radius: 16px;
    box-shadow: var(--md-elev-1);
    border: 1px solid var(--md-outline);
}

.people-counter .counter-label {
    font-size: 14px;
    color: var(--md-text-2);
    margin-bottom: 8px;
    display: block;
}

.people-counter .counter-number-group {
    display: inline-block;
}

.people-counter .counter-number {
    font-size: 36px;
    font-weight: 800;
    color: var(--brand-1);
}

.people-counter .counter-unit {
    font-size: 16px;
    color: var(--md-text-3);
    margin-left: 4px;
}

/* recharge 相关样式已迁移至 components.css，这里不再重复定义空规则，避免 lints */

@media (max-width: 375px) {
    .amount-btn {
        flex: 1 1 calc(50% - 5px);
    }
}

/* ===== 个人中心统计卡片均匀分布 ===== */
.user-info-card .stats-grid {
    display: flex;
    justify-content: space-around;
    align-items: center;
    width: 100%;
}

.user-info-card .stats-item {
    text-align: center;
    flex: 1;
}

/* ===== 其他原有样式（保持不变） ===== */

/* 状态卡片 */
.status-card {
    padding: 15px;
    text-align: center;
}

.status-icon {
    width: 50px;
    height: 50px;
    margin: 0 auto 10px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
}

.status-icon.checked-in {
    background: var(--light-red);
    color: var(--primary-red);
}

.status-icon.checked-out {
    background: #E8F5E9;
    color: var(--success);
}

.status-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.status-subtext {
    font-size: 14px;
    color: var(--text-light);
}

/* 用户信息卡片 */
.user-info-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
}

.user-avatar-medium {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    border: 3px solid var(--light-red);
    object-fit: cover;
}

.user-info-content {
    flex: 1;
}

.user-name-display {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 4px;
}

.user-points-display {
    font-size: 14px;
    color: var(--text-medium);
}

.user-points-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-red);
}

.user-status-badge {
    display: inline-block;
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
}

.user-status-badge.in-store {
    background: var(--light-red);
    color: var(--primary-red);
}

.user-status-badge.out-store {
    background: #E8F5E9;
    color: var(--success);
}

/* 点数卡片 */
.points-card {
    background: linear-gradient(135deg, var(--primary-red), var(--dark-red));
    color: white;
    text-align: center;
}

.points-amount {
    font-size: 32px;
    font-weight: 700;
}

/* 操作按钮 */
.action-btn {
    width: 100%;
    padding: 16px;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.action-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
}

.btn-primary {
    background: var(--action-blue);
    color: white;
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.btn-primary:hover:not(:disabled) {
    background: #2980B9;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

.btn-gray {
    background: #6C757D;
    color: white;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.btn-gray:hover:not(:disabled) {
    background: #5A6268;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(108, 117, 125, 0.4);
}

.short-btn {
    width: auto !important;
    min-width: 160px;
    padding: 12px 30px !important;
    margin: 10px auto !important;
}

/* 计时器 */
.timer-display {
    background: rgba(255, 71, 87, 0.1);
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-red);
    text-align: center;
    font-family: 'Courier New', monospace;
    border: 2px solid rgba(255, 71, 87, 0.2);
    display: none;
}

/* 二维码弹窗 */
.qr-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
}

.qr-modal.active {
    display: flex;
}

.qr-modal-content {
    background: white;
    border-radius: 20px;
    padding: 30px 20px;
    text-align: center;
    position: relative;
    max-width: 90%;
    width: 320px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(50px) scale(0.9);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.qr-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--light-red);
    color: var(--primary-red);
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.qr-modal-close:hover {
    background: var(--primary-red);
    color: white;
}

.qr-modal-image {
    width: 240px;
    height: 240px;
    margin: 0 auto;
    border-radius: 12px;
    border: 2px solid var(--border-color);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

.qr-modal-hint {
    margin-top: 15px;
    font-size: 13px;
    color: var(--text-light);
    line-height: 1.5;
}

.qr-manual-code {
    margin-top: 20px;
    padding: 15px;
    background: #FFF9E6;
    border-radius: 10px;
    border: 1px solid #FFE599;
}

.qr-manual-code-title {
    font-size: 12px;
    color: #D97706;
    margin-bottom: 8px;
}

.qr-manual-code-display {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-red);
    font-family: 'Courier New', monospace;
    letter-spacing: 2px;
    user-select: all;
    cursor: pointer;
}

/* 进窝二维码弹窗（M3 增强版：大码高对比 + 手动码） */
.entry-qr-modal-card {
    position: relative;
    text-align: center;
    border-radius: 22px;
    border: 1px solid rgba(144, 162, 188, 0.45);
    box-shadow: 0 20px 40px rgba(8, 23, 63, 0.2);
    overflow: hidden;
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(24, 119, 242, 0.12) 0%, rgba(24, 119, 242, 0) 60%),
        radial-gradient(90% 70% at 0% 100%, rgba(255, 71, 87, 0.1) 0%, rgba(255, 71, 87, 0) 65%),
        var(--md-surface);
}

.entry-qr-modal-card--checkin {
    background:
        radial-gradient(120% 80% at 100% 0%, rgba(24, 119, 242, 0.12) 0%, rgba(24, 119, 242, 0) 60%),
        radial-gradient(90% 70% at 0% 100%, rgba(255, 71, 87, 0.1) 0%, rgba(255, 71, 87, 0) 65%),
        var(--md-surface);
}

.entry-qr-modal-card--checkout {
    background:
        radial-gradient(120% 82% at 100% 0%, rgba(34, 197, 166, 0.18) 0%, rgba(34, 197, 166, 0) 60%),
        radial-gradient(90% 72% at 0% 100%, rgba(22, 119, 255, 0.14) 0%, rgba(22, 119, 255, 0) 65%),
        var(--md-surface);
}

.modal-content-card.entry-qr-modal-card {
    width: min(92vw, 460px);
    max-width: 460px;
    box-sizing: border-box;
}

.entry-qr-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
}

.entry-qr-modal-title {
    margin-bottom: 10px;
    justify-content: center;
}

.entry-qr-modal-subtitle {
    font-size: 13px;
    color: var(--md-text-3);
    margin-bottom: 14px;
    line-height: 1.6;
}

.entry-qr-modal-qr-wrap {
    border: 1px solid rgba(198, 209, 225, 0.75);
    border-radius: 16px;
    background: rgba(248, 251, 255, 0.96);
    padding: 14px 12px 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    overflow: hidden;
}

.entry-qr-modal-qr-wrap--checkout {
    background: rgba(240, 252, 255, 0.98);
    border-color: rgba(102, 184, 255, 0.45);
}

.entry-qr-modal-qr-surface {
    width: min(100%, 320px);
    aspect-ratio: 1 / 1;
    margin: 0 auto;
    border-radius: 14px;
    border: 1px solid rgba(198, 209, 225, 0.72);
    background: #F5F7FC;
    padding: 14px;
    box-sizing: border-box;
    overflow: hidden;
}

.entry-qr-modal-qr-surface--checkout {
    background: linear-gradient(180deg, #F7FEFF 0%, #ECFBFF 100%);
    border-color: rgba(56, 189, 248, 0.42);
}

.entry-qr-modal-qr-image {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;
    border-radius: 0;
    border: none;
    box-shadow: none;
    background: transparent;
    object-fit: contain;
    transform: none;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

.entry-qr-modal-qr-hint {
    margin-top: 10px;
    font-size: 12px;
    color: #5B6676;
}

.entry-qr-modal-code-card {
    margin-top: 12px;
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--md-outline);
    background: rgba(255, 255, 255, 0.9);
    text-align: left;
}

.entry-qr-modal-code-card--checkout {
    background: rgba(239, 250, 255, 0.92);
    border-color: rgba(56, 189, 248, 0.28);
}

.entry-qr-modal-code-title {
    font-size: 12px;
    color: var(--brand-2);
    margin-bottom: 8px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.entry-qr-modal-code-title--checkout {
    color: #0F766E;
}

.entry-qr-modal-code-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.entry-qr-modal-code-display {
    font-size: 26px;
    font-weight: 900;
    color: var(--brand-1);
    font-family: 'Roboto Mono', 'Consolas', monospace;
    letter-spacing: 2px;
}

.entry-qr-modal-code-display--checkout {
    color: #0F766E;
}

.entry-qr-modal-copy-btn {
    padding: 8px 12px;
    font-size: 12px;
    border-radius: 10px;
    white-space: nowrap;
}

.entry-qr-modal-copy-btn--checkout {
    background: linear-gradient(135deg, #0F766E, #1677FF);
}

.entry-qr-modal-code-footnote {
    margin-top: 8px;
    font-size: 12px;
    color: var(--md-text-3);
    line-height: 1.5;
}

.entry-qr-modal-qr-hint--checkout {
    color: #155E75;
}

.entry-qr-modal-summary-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 12px;
}

.entry-qr-modal-summary-card {
    border-radius: 14px;
    border: 1px solid rgba(198, 209, 225, 0.7);
    background: rgba(255, 255, 255, 0.88);
    padding: 12px 13px;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.entry-qr-modal-summary-card strong {
    font-size: 15px;
    color: var(--md-text);
}

.entry-qr-modal-summary-card--checkout {
    border-color: rgba(56, 189, 248, 0.24);
    background: rgba(245, 252, 255, 0.92);
}

.entry-qr-modal-summary-card--warn {
    background: rgba(255, 244, 229, 0.94);
    border-color: rgba(245, 158, 11, 0.35);
}

.entry-qr-modal-summary-label {
    font-size: 11px;
    letter-spacing: 0.04em;
    color: var(--md-text-3);
}

.entry-qr-modal-inline-note {
    border-radius: 12px;
    padding: 12px 14px;
    margin: 0 0 12px;
    font-size: 13px;
    line-height: 1.6;
    text-align: left;
}

.entry-qr-modal-inline-note--checkout {
    background: rgba(22, 119, 255, 0.08);
    border: 1px solid rgba(22, 119, 255, 0.16);
    color: var(--md-text);
}

.checkout-confirm-modal {
    width: min(92vw, 420px);
    max-width: 420px;
    box-sizing: border-box;
    text-align: left;
    border-radius: 22px;
    border: 1px solid rgba(144, 162, 188, 0.45);
    box-shadow: 0 20px 40px rgba(8, 23, 63, 0.18);
    background:
        radial-gradient(120% 82% at 100% 0%, rgba(34, 197, 166, 0.14) 0%, rgba(34, 197, 166, 0) 60%),
        radial-gradient(90% 72% at 0% 100%, rgba(22, 119, 255, 0.1) 0%, rgba(22, 119, 255, 0) 65%),
        var(--md-surface);
}

.checkout-confirm-modal__title {
    justify-content: center;
    margin-bottom: 10px;
}

.checkout-confirm-modal__meta,
.checkout-confirm-modal__detail {
    text-align: center;
    line-height: 1.6;
}

.checkout-confirm-modal__meta {
    font-size: 13px;
    color: var(--md-text-2);
}

.checkout-confirm-modal__detail {
    font-size: 12px;
    color: var(--md-text-3);
    margin-bottom: 14px;
}

.checkout-confirm-modal__summary {
    margin-bottom: 12px;
}

.checkout-confirm-modal__actions {
    display: flex;
    gap: 10px;
}

@media (max-width: 520px) {
    .entry-qr-modal-summary-grid {
        grid-template-columns: 1fr;
    }
}

:root[data-theme="dark"] .entry-qr-modal-qr-wrap {
    background: rgba(24, 27, 34, 0.94);
    border-color: rgba(255, 255, 255, 0.18);
}

:root[data-theme="dark"] .entry-qr-modal-qr-surface {
    background: #EEF2FA;
    border-color: rgba(148, 163, 184, 0.45);
}

:root[data-theme="dark"] .entry-qr-modal-card {
    border-color: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .entry-qr-modal-card--checkout {
    border-color: rgba(86, 202, 222, 0.32);
}

:root[data-theme="dark"] .entry-qr-modal-code-card {
    background: rgba(34, 29, 29, 0.92);
    border-color: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .entry-qr-modal-code-card--checkout {
    background: rgba(18, 40, 48, 0.92);
    border-color: rgba(86, 202, 222, 0.24);
}

:root[data-theme="dark"] .entry-qr-modal-qr-wrap--checkout {
    background: rgba(16, 35, 44, 0.94);
    border-color: rgba(86, 202, 222, 0.24);
}

:root[data-theme="dark"] .entry-qr-modal-summary-card {
    background: rgba(30, 33, 40, 0.92);
    border-color: rgba(255, 255, 255, 0.14);
}

:root[data-theme="dark"] .entry-qr-modal-summary-card--checkout {
    background: rgba(14, 41, 48, 0.9);
    border-color: rgba(86, 202, 222, 0.24);
}

:root[data-theme="dark"] .checkout-confirm-modal {
    border-color: rgba(86, 202, 222, 0.28);
    background:
        radial-gradient(120% 82% at 100% 0%, rgba(34, 197, 166, 0.18) 0%, rgba(34, 197, 166, 0) 60%),
        radial-gradient(90% 72% at 0% 100%, rgba(22, 119, 255, 0.14) 0%, rgba(22, 119, 255, 0) 65%),
        rgba(16, 24, 33, 0.96);
}

@media (prefers-color-scheme: dark) {
    :root:not([data-theme="light"]) .entry-qr-modal-qr-wrap {
        background: rgba(24, 27, 34, 0.94);
        border-color: rgba(255, 255, 255, 0.18);
    }

    :root:not([data-theme="light"]) .entry-qr-modal-qr-surface {
        background: #EEF2FA;
        border-color: rgba(148, 163, 184, 0.45);
    }

    :root:not([data-theme="light"]) .entry-qr-modal-card {
        border-color: rgba(255, 255, 255, 0.14);
    }

    :root:not([data-theme="light"]) .entry-qr-modal-code-card {
        background: rgba(34, 29, 29, 0.92);
        border-color: rgba(255, 255, 255, 0.14);
    }
}

/* ===== Bottom Navigation (Material Design 3 Style) ===== */
:root {
    --md-nav-bg: var(--md-surface);
    --md-nav-active-bg: var(--md-brand-soft);
    --md-nav-text-active: var(--md-brand);
    --md-nav-text-inactive: var(--md-text-3);
    --md-elevation-1: var(--md-elev-nav);
}

.bottom-nav {
    position: fixed;
    left: 16px;
    right: 16px;
    bottom: 16px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 4px;
    box-shadow: var(--md-elev-nav);
    z-index: 1000;
    border-radius: 28px;
}

/* 统一应用玻璃拟态类 */
.bottom-nav {
    background: var(--md-glass-bg);
    border: 1px solid var(--md-glass-border);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    -webkit-backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
}

.nav-item {
    flex: 1;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    color: var(--md-nav-text-inactive);
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    gap: 2px;
}

.nav-item i, .nav-item svg {
    font-size: 20px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s;
    z-index: 2;
}

/* Material 3 Active Indicator (The Pill) */
.nav-item::before {
    content: '';
    position: absolute;
    top: 6px;
    width: 56px;
    height: 28px;
    background: transparent;
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.nav-item.active {
    color: var(--md-nav-text-active);
}

.nav-item.active::before {
    background: var(--md-nav-active-bg);
}

.nav-item.active i {
    transform: translateY(-2px);
    font-weight: bold;
}

.nav-item span {
    font-size: 12px;
    font-weight: 500;
    z-index: 2;
}

.nav-item.active span {
    font-weight: 700;
}

/* Desktop Optimization (M3 Rail-like or Floating) */
@media (min-width: 768px) {
    .bottom-nav {
        max-width: 400px;
        left: 50%;
        transform: translateX(-50%);
        bottom: 24px;
        border-radius: 40px; /* Pill shape for desktop */
        height: 72px;
        padding: 0 16px;
        box-shadow: 0 10px 30px rgba(0,0,0,0.1);
        border: 1px solid rgba(0, 0, 0, 0.05);
    }
}

/* 机种选择按钮样式 */
.machine-btn {
    padding: 8px 16px;
    border: 1px solid #E8E8E8;
    border-radius: 6px;
    background: white;
    color: #666;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
}

.machine-btn.selected {
    background: #FF4757;
    color: white;
    border-color: #FF4757;
}

/* ===== 预约提示条（预约页）===== */
/* 已迁移至 /assets/reserve.css（M3 风格 + 深色模式），此处不再定义，避免全局样式冲突 */

.temp-reservation-help:active {
  transform: scale(0.98);
}

/* 临时预约说明弹窗 */
.temp-reservation-modal-content {
  width: min(520px, calc(100vw - 40px));
  max-height: min(70vh, 520px);
  overflow: auto;
  background: var(--md-surface);
  border-radius: 28px;
  padding: 20px;
  border: 1px solid var(--md-outline);
  box-shadow: var(--md-elev-2);
}

.temp-reservation-modal-title {
  font-size: 18px;
  font-weight: 900;
  color: var(--md-text);
  margin-bottom: 12px;
  font-family: var(--font-ui);
}

.temp-reservation-modal-text {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.65;
  color: var(--md-text-2);
  margin: 0 0 14px 0;
  font-family: var(--font-ui);
  background: var(--md-surface-2);
  border: 1px solid var(--md-outline);
  border-radius: 16px;
  padding: 14px;
}

.temp-reservation-modal-close {
  width: 100%;
  padding: 12px 16px;
  border: none;
  border-radius: 999px;
  background: var(--brand-1);
  color: #FFFFFF;
  font-weight: 900;
  cursor: pointer;
  font-family: var(--font-ui);
  box-shadow: var(--md-elev-1);
}

.temp-reservation-modal-close:active {
  transform: scale(0.98);
}

/* 预约记录页面样式 */
.reservation-tabs {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border: 1px solid rgba(232, 232, 232, 0.8);
}

.reservation-tab {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reservation-tab:hover {
    transform: translateY(-1px);
}

.reservation-tab:active {
    transform: translateY(0) scale(0.98);
}

.tab-content {
    display: none;
    animation: fadeIn 0.3s ease-in-out;
}

.tab-content.active {
    display: block;
}

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

@keyframes selectedPulse {
    0% {
        transform: translateY(0) scale(1);
        box-shadow: 0 4px 12px rgba(255, 71, 87, 0.2);
    }
    50% {
        transform: translateY(-4px) scale(1.05);
        box-shadow: 0 12px 24px rgba(255, 71, 87, 0.5);
    }
    100% {
        transform: translateY(-3px) scale(1.02);
        box-shadow: 0 8px 20px rgba(255, 71, 87, 0.4);
    }
}

.reservation-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border: 1px solid rgba(232, 232, 232, 0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.reservation-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

.status-badge.completed {
    background: rgba(46, 213, 115, 0.1);
    color: #2ED573;
}

.status-badge.cancelled {
    background: rgba(255, 193, 7, 0.1);
    color: #FFC107;
}

.status-badge.missed {
    background: rgba(255, 71, 87, 0.1);
    color: #FF4757;
}

.cancel-reservation-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.cancel-reservation-btn:hover {
    background: #FF4757;
    color: white;
    transform: translateY(-1px);
}

.cancel-reservation-btn:active {
    transform: translateY(0) scale(0.98);
}

.modal-overlay {
    backdrop-filter: blur(4px);
    animation: modalFadeIn 0.3s ease-out;
}

.modal-content {
    animation: modalSlideUp 0.3s ease-out;
}

@keyframes modalFadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes modalSlideUp {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-btn {
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.modal-btn:hover {
    transform: translateY(-1px);
}

.modal-btn:active {
    transform: translateY(0) scale(0.98);
}

/* 响应式设计 */
@media (max-width: 480px) {
    .reservation-tabs {
        margin: 15px 15px 0;
    }

    .reservation-content {
        padding: 0 15px 30px;
    }

    .reservation-card {
        padding: 12px;
    }

    .card-content {
        flex-direction: column;
        gap: 12px;
    }

    .card-actions {
        margin-left: 0;
        align-self: flex-end;
    }
}

/* 菜单列表 */
.menu-list {
    background: var(--card-bg);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid var(--border-color);
    text-decoration: none;
    color: var(--text-dark);
    transition: background 0.3s;
}

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

.menu-item:hover {
    background: rgba(255, 71, 87, 0.05);
}

.menu-item i {
    font-size: 20px;
    width: 24px;
    margin-right: 15px;
    color: var(--primary-red);
}

.menu-item-text {
    flex: 1;
    font-size: 16px;
}

.menu-item-arrow {
    color: var(--text-light);
    font-size: 14px;
}

/* 提示框 */
.tips-box {
    margin: 15px 20px;
    padding: 15px;
    background: #FFF9E6;
    border-radius: 8px;
    font-size: 12px;
    color: #D97706;
    border-left: 4px solid var(--warning);
}

/* ===== 支付弹窗关闭按钮修复 ===== */
.qr-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--light-red);
    color: var(--primary-red);
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex !important;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

.qr-modal-close:hover {
    background: var(--primary-red);
    color: white;
    transform: rotate(90deg);
}

.qr-modal-close i {
    font-size: 18px;
    line-height: 1;
}

/* ===== 支付宝直接跳转按钮样式 ===== */
.action-btn.btn-primary {
    background: linear-gradient(135deg, #3498DB, #2980B9);
    box-shadow: 0 4px 12px rgba(52, 152, 219, 0.3);
}

.action-btn.btn-primary:hover {
    background: linear-gradient(135deg, #2980B9, #1F5F99);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(52, 152, 219, 0.4);
}

/* ===== 历史记录模态框样式 ===== */
/* ===== 历史记录模态框样式（旧版，已弃用；请使用 `.modal-overlay` + `.m3-modal-content`） ===== */
.history-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.85);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    pointer-events: none;
}

.history-modal.active {
    display: flex;
}

.history-modal-content {
    background: white;
    border-radius: 20px;
    padding: 25px 20px;
    text-align: center;
    position: relative;
    max-width: 90%;
    width: 380px;
    max-height: 80vh;
    box-shadow: 0 15px 40px rgba(0,0,0,0.4);
    animation: modalSlideUp 0.3s ease-out;
    display: flex;
    flex-direction: column;
}

.history-modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--light-red);
    color: var(--primary-red);
    border: none;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 10;
}

.history-modal-close:hover {
    background: var(--primary-red);
    color: white;
    transform: rotate(90deg);
}

.history-modal-title {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 20px;
    color: var(--text-dark);
}

/* 标签切换按钮 */
.history-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
    border-bottom: 1px solid var(--border-color);
    padding-bottom: 10px;
}

.tab-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid var(--border-color);
    border-radius: 10px;
    background: white;
    color: var(--text-medium);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab-btn.active {
    border-color: var(--primary-red);
    background: var(--primary-red);
    color: white;
}

.tab-btn i {
    font-size: 16px;
}

/* 面板内容 */
.tab-panel {
    display: none;
    flex: 1;
    overflow-y: auto;
    max-height: 50vh;
}

.tab-panel.active {
    display: block;
}

/* 记录列表 */
.record-list {
    text-align: left;
}

.record-item {
    padding: 15px;
    border-bottom: 1px solid var(--border-color);
    transition: background 0.2s;
}

.record-item:hover {
    background: rgba(255, 71, 87, 0.05);
}

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

.record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
}

.record-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-dark);
    display: flex;
    align-items: center;
    gap: 6px;
}

.record-time {
    font-size: 12px;
    color: var(--text-light);
}

.record-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.record-amount {
    font-size: 18px;
    font-weight: 700;
}

.record-amount.negative {
    color: var(--primary-red);
}

.record-amount.positive {
    color: var(--success);
}

.record-detail-text {
    font-size: 12px;
    color: var(--text-light);
}

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

.empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.3;
}

/* 加载动画 */
.loading {
    text-align: center;
    padding: 30px;
    color: var(--text-light);
}

/* 移动端优化 */
@media (max-width: 768px) {
    .container {
        padding: 0 15px 15px;
    }
    
    .user-card, .user-info-card, .points-card, .recharge-card {
        margin-bottom: 15px;
    }
    
    .action-btn {
        padding: 14px;
    }
}

/* ===== 状态切换动画 ===== */
.status-transitioning {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== 点数不足按钮样式（橙红色+脉冲）===== */
.action-btn.btn-insufficient {
    background: linear-gradient(135deg, #FF9557, #FF6B35);
    color: white;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0% { box-shadow: 0 4px 12px rgba(255, 149, 87, 0.3); transform: scale(1); }
    50% { box-shadow: 0 6px 20px rgba(255, 149, 87, 0.5); transform: scale(1.02); }
    100% { box-shadow: 0 4px 12px rgba(255, 149, 87, 0.3); transform: scale(1); }
}

/* ===== 计时中文字绿色渐变 ===== */
.status-main-text.checked-in {
    background: linear-gradient(135deg, #2ED573, #1E8449);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 确保在 style.css 中有这个样式 */
.action-btn.btn-gray {
    background: #6C757D !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3) !important;
}

.action-btn.btn-gray:hover:not(:disabled) {
    background: #5A6268 !important;
    transform: translateY(-2px) !important;
}


/* ===== 点数页专属样式 ===== */

/* 优化后的点数卡片 - 样式已迁移至 components.css（移除空规则，避免 lints） */

/* 功能切换标签 */
.function-tabs {
    display: flex;
    margin: 0 20px 16px;
    background: var(--md-surface);
    border-radius: 14px;
    box-shadow: var(--md-elev-1);
    border: 1px solid var(--md-outline);
    overflow: hidden;
}

.tab-btn {
    flex: 1;
    padding: 16px;
    border: none;
    background: var(--md-surface);
    color: var(--md-text-3);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.tab-btn.active {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: white;
}

.tab-btn:hover:not(.active) {
    background: var(--md-surface-2);
}

/* 点数详情卡片 */
.points-detail-card {
    background: var(--md-surface);
    border-radius: 14px;
    padding: 20px;
    margin: 15px 0;
    box-shadow: var(--md-elev-1);
    border: 1px solid var(--md-outline);
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}

.detail-row.bonus {
    color: #2ED573;
}

.detail-row.total {
    font-size: 16px;
    font-weight: 700;
    color: #FF4757;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed #E8E8E8;
}

.detail-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, #E8E8E8, transparent);
    margin: 10px 0;
}

/* 支付摘要 */
.payment-summary {
    background: var(--md-surface-2);
    border-radius: 14px;
    padding: 15px;
    margin: 15px 0;
    box-shadow: var(--md-elev-1);
    border: 1px solid var(--md-outline);
}

.payment-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

.payment-label {
    color: var(--md-text-2);
}

.payment-value {
    font-size: 24px;
    font-weight: 800;
    color: var(--brand-1);
}

/* 支付方式选择样式 */
.payment-method-selection {
    background: var(--md-surface-2);
    border-radius: 14px;
    padding: 15px 20px;
    margin: 15px 0;
    border: 1px solid var(--md-outline);
}

.payment-method-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--md-text);
    margin-bottom: 12px;
    text-align: center;
}

.payment-methods {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.payment-method-btn {
    display: flex;
    align-items: center;
    padding: 14px 16px;
    border: 2px solid var(--md-outline);
    border-radius: 12px;
    background: var(--md-surface);
    color: var(--md-text);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.payment-method-btn:hover:not(.selected) {
    border-color: var(--brand-1);
    transform: translateY(-2px);
    box-shadow: var(--md-elev-2);
}

.payment-method-btn.selected {
    border-color: var(--brand-1);
    background: var(--md-brand-soft);
    box-shadow: 0 4px 12px rgba(211, 47, 47, 0.2);
}

.payment-method-icon {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    background: var(--md-surface-2);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 12px;
    font-size: 18px;
    color: var(--brand-1);
    position: relative;
    overflow: hidden;
}

.payment-method-btn.selected .payment-method-icon {
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    color: white;
}

.payment-method-info {
    flex: 1;
    text-align: left;
}

.payment-method-name {
    font-size: 16px;
    font-weight: 600;
    color: var(--md-text);
    margin-bottom: 2px;
}

.payment-method-desc {
    font-size: 12px;
    color: var(--md-text-3);
}

.payment-method-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--md-outline);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 12px;
    transition: all 0.3s ease;
}

.payment-method-btn.selected .payment-method-check {
    background: var(--brand-1);
    border-color: var(--brand-1);
}

/* 转移卡片 */
.transfer-card {
    background: white;
    border-radius: 16px;
    padding: 20px;
    margin: 15px 20px 80px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid #E8E8E8;
    animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.transfer-section {
    margin-bottom: 20px;
}

.transfer-label {
    display: block;
    font-size: 14px;
    font-weight: 600;
    color: #2C2C2C;
    margin-bottom: 8px;
}

#transfer-uid, #transfer-amount {
    width: 100%;
    padding: 12px;
    border: 2px solid #E8E8E8;
    border-radius: 10px;
    font-size: 16px;
    transition: all 0.3s;
}

#transfer-uid:focus, #transfer-amount:focus {
    outline: none;
    border-color: #FF4757;
    box-shadow: 0 0 0 3px rgba(255, 71, 87, 0.1);
}

.transfer-info {
    background: #FFF9E6;
    border-radius: 10px;
    padding: 15px;
    margin: 15px 0;
    border-left: 4px solid #FFA502;
}

.transfer-confirm-row {
    display: flex;
    justify-content: space-between;
    margin: 8px 0;
    font-size: 14px;
}

.transfer-btn {
    width: 100%;
    padding: 16px;
    background: linear-gradient(135deg, #2ED573, #1E8449);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 12px rgba(46, 213, 115, 0.3);
}

.transfer-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(46, 213, 115, 0.4);
}

.transfer-btn:disabled {
    background: #B0B0B0;
    cursor: not-allowed;
}

/* 隐藏类 */
.hidden {
    display: none !important;
}

/* 通用卡片阴影优化 */
.user-info-section, .contact-section, .faq-section, 
.management-section, .status-card, .manual-input-section {
    animation: cardAppear 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* 按钮点击动画 */
.action-btn, .nav-item, .amount-btn, .transfer-btn, .tab-btn {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-btn:hover, .nav-item:hover, .amount-btn:hover, 
.transfer-btn:hover, .tab-btn:hover {
    transform: translateY(-2px);
}

.action-btn:active, .nav-item:active, .amount-btn:active,
.transfer-btn:active, .tab-btn:active {
    transform: translateY(0) scale(0.98);
}

/* 加载动画 */
.loading-skeleton {
    position: relative;
    overflow: hidden;
}

.loading-skeleton::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 71, 87, 0.1), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

/* ===== 点数页专属高级样式 ===== */

/* 功能切换标签 - 玻璃拟态效果 */
.function-tabs {
    margin: 0 20px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid rgba(255, 71, 87, 0.1);
    display: flex;
    overflow: hidden;
    animation: slideUp 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.tab-btn {
    flex: 1;
    padding: 16px;
    border: none;
    background: transparent;
    color: #8E8E8E;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
}

.tab-btn i {
    font-size: 18px;
    transition: transform 0.3s;
}

.tab-btn:hover i {
    transform: scale(1.1);
}

.tab-btn.active {
    color: #FF4757;
    background: rgba(255, 71, 87, 0.05);
}

.tab-btn.active::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 20%;
    right: 20%;
    height: 3px;
    background: linear-gradient(90deg, #FF4757, #C44569);
    border-radius: 2px;
    animation: tabUnderline 0.3s ease-out;
}

@keyframes tabUnderline {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* 专业标题卡片 */
.section-title-card {
    margin: 15px 20px;
    padding: 20px;
    background: linear-gradient(135deg, #ffffff 0%, #fff9f9 100%);
    border-radius: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 1px solid rgba(255, 71, 87, 0.08);
    display: flex;
    align-items: center;
    gap: 15px;
    animation: fadeIn 0.5s ease-out;
}

.title-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, #FF4757, #C44569);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 20px;
    flex-shrink: 0;
}

.title-text {
    flex: 1;
}

.title-main {
    font-size: 18px;
    font-weight: 700;
    color: #2C2C2C;
    margin-bottom: 4px;
}

.title-sub {
    font-size: 13px;
    color: #8E8E8E;
}

/* 充值选项卡片 - 玻璃拟态 */
.recharge-options-card {
    margin: 16px 20px 80px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(255, 71, 87, 0.1);
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* 金额按钮网格 - 悬浮效果 */
.recharge-amounts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 12px;
    margin: 20px 0;
}

/* amount-btn 样式已由 components.css 接管，此处移除避免重复与空规则 lint */

/* 点数详情卡片 - 样式统一 */
.points-detail-card {
    background: var(--md-surface-2);
    border-radius: 14px;
    padding: 20px;
    margin: 15px 0;
    border: 1px solid var(--md-outline);
    animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

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

.detail-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
    color: var(--md-text-2);
}

.detail-row.bonus {
    color: var(--brand-1);
    font-weight: 800;
}

.detail-divider {
    height: 1px;
    background: var(--md-outline);
    margin: 8px 0;
}

.detail-row.total {
    font-size: 16px;
    font-weight: 700;
    color: #FF4757;
    margin-top: 8px;
    padding-top: 12px;
    border-top: 1px dashed rgba(255, 71, 87, 0.3);
}

/* 支付摘要 - 玻璃拟态 */
.payment-summary {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 14px;
    padding: 15px 20px;
    margin: 15px 0;
    border: 1px solid rgba(255, 71, 87, 0.1);
}

.payment-amount {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 16px;
}

.payment-label {
    color: #8E8E8E;
    font-weight: 500;
}

.payment-value {
    font-size: 24px;
    font-weight: 800;
    background: linear-gradient(135deg, #FF4757, #C44569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* 确认支付按钮 - 专业级设计 */
.pay-btn {
    width: 100%;
    padding: 18px 24px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #FF4757, #C44569);
    color: white;
    box-shadow: 0 4px 15px rgba(255, 71, 87, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.pay-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}

.pay-btn:hover::before {
    left: 100%;
}

.pay-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 71, 87, 0.4);
}

.pay-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.pay-btn:disabled {
    background: #E0E0E0;
    color: #B0B0B0;
    cursor: not-allowed;
    box-shadow: none;
}

.pay-btn.processing {
    background: linear-gradient(135deg, #B0B0B0, #9E9E9E);
}

/* 转移按钮 - 蓝紫色渐变（避免红绿） */
.transfer-btn {
    width: 100%;
    padding: 18px 24px;
    border: none;
    border-radius: 14px;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: linear-gradient(135deg, #6C5CE7, #5F3DC4);
    color: white;
    box-shadow: 0 4px 15px rgba(108, 92, 231, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.transfer-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}

.transfer-btn:hover::before {
    left: 100%;
}

.transfer-btn:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(108, 92, 231, 0.4);
}

.transfer-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.transfer-btn:disabled {
    background: #E0E0E0;
    color: #B0B0B0;
    cursor: not-allowed;
    box-shadow: none;
}

/* 提示卡片 - 玻璃拟态 */
.tips-card {
    margin: 15px 0;
    padding: 15px;
    background: rgba(255, 249, 230, 0.7);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 10px;
    font-size: 13px;
    color: #D97706;
    border-left: 4px solid #FFA502;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tips-card i {
    font-size: 16px;
    flex-shrink: 0;
}

/* 转移卡片 - 玻璃拟态 */
.transfer-card {
    margin: 15px 20px 80px;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(108, 92, 231, 0.1);
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.transfer-section {
    margin-bottom: 20px;
}

.transfer-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: #2C2C2C;
    margin-bottom: 10px;
}

#transfer-uid, #transfer-amount {
    width: 100%;
    padding: 14px;
    border: 2px solid #E8E8E8;
    border-radius: 12px;
    font-size: 16px;
    transition: all 0.3s;
    background: rgba(255, 255, 255, 0.8);
}

#transfer-uid:focus, #transfer-amount:focus {
    outline: none;
    border-color: #6C5CE7;
    box-shadow: 0 0 0 3px rgba(108, 92, 231, 0.1);
}

.transfer-info {
    background: rgba(230, 243, 255, 0.7);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    border-left: 4px solid #6C5CE7;
}

.transfer-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 14px;
}

.transfer-confirm-row span:first-child {
    color: #5A5A5A;
}

.transfer-confirm-row span:last-child {
    font-weight: 600;
    color: #2C2C2C;
}

/* 隐藏类 */
.hidden {
    display: none !important;
}

/* ===== 个人中心专属视觉增强样式 ===== */

/* 玻璃拟态基础卡片 */
.glass-card {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    -webkit-backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 20px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    border: 1px solid rgba(255, 71, 87, 0.1);
    animation: slideUp 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* 用户卡片 - 玻璃拟态风格 */
.profile-user-card {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 20px;
}

.user-avatar-section {
    position: relative;
}

.profile-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid rgba(255, 71, 87, 0.2);
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.15);
    object-fit: cover;
}

.status-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
}

.status-indicator.in-store {
    background: #2ED573;
}

.status-indicator.out-store {
    background: #B0B0B0;
}

.user-info-section {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.user-name {
    font-size: 20px;
    font-weight: 700;
    color: #2C2C2C;
}

/* 关键：UID渐变加粗效果 */
.user-uid {
    font-size: 15px;
    font-weight: 700; /* 加粗 */
    font-family: 'Courier New', monospace;
    background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    letter-spacing: 0.5px;
}

.user-status {
    font-size: 13px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border-radius: 20px;
    width: fit-content;
}

.user-status.in-store {
    background: rgba(46, 213, 115, 0.1);
    color: #2ED573;
}

.user-status.out-store {
    background: rgba(176, 176, 176, 0.1);
    color: #8E8E8E;
}

/* 统计卡片 - 玻璃拟态 */
.profile-stats-card {
    padding: 20px;
}

.profile-stats-grid {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.stat-item {
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.stat-value {
    font-size: 28px;
    font-weight: 800;
    background: linear-gradient(135deg, #FF4757, #C44569);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 12px;
    color: #8E8E8E;
    font-weight: 500;
}

.stat-divider {
    width: 1px;
    height: 40px;
    background: linear-gradient(to bottom, transparent, #E8E8E8, transparent);
}

/* 菜单列表 - 玻璃拟态 */
.profile-menu-list {
    overflow: hidden;
}

.profile-menu-item {
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.profile-menu-item:hover {
    background: rgba(255, 71, 87, 0.03);
}

.profile-menu-item:hover .menu-icon {
    transform: scale(1.05);
}

.profile-menu-item:hover .fa-chevron-right {
    transform: translateX(4px);
}

.menu-icon {
    transition: transform 0.3s;
}

.menu-content {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.menu-title {
    transition: color 0.3s;
}

.profile-menu-item:hover .menu-title {
    color: #FF4757;
}

/* 模态框 - 玻璃拟态优化 */
.custom-modal-content {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 20px;
    padding: 25px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* 记录项 - 玻璃拟态 */
.record-item.glass-item {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s;
}

.record-item.glass-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* 加载动画 */
.loading-skeleton > * {
    animation: pulse 1.5s infinite;
}

@keyframes pulse {
    0% { opacity: 0.6; }
    50% { opacity: 1; }
    100% { opacity: 0.6; }
}

/* 骨架屏样式 */
.skeleton-avatar, .skeleton-text, .skeleton-stat-value, .skeleton-stat-label {
    background: #f0f0f0;
    border-radius: 4px;
}

/* 空状态 - 玻璃拟态 */
.empty-state {
    text-align: center;
    padding: 40px;
    color: #8E8E8E;
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 14px;
    margin: 10px;
}

.empty-state i {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.5;
}

/* ===== 历史记录模态框专用样式（关键修复） ===== */

.history-modal .tab-content-wrapper {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.history-modal .tab-panel {
    display: none !important;
    flex: 1;
    overflow-y: auto;
    max-height: 50vh;
}

.history-modal .tab-panel.active {
    display: block !important;
}

/* 标签按钮基础样式 */
.history-modal .tab-btn {
    flex: 1;
    padding: 12px;
    border: 2px solid #E8E8E8;
    border-radius: 10px;
    background: white;
    color: #5A5A5A;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.history-modal .tab-btn.active {
    border-color: #FF4757;
    background: #FF4757;
    color: white;
}

/* 记录卡片优化 */
.record-item.glass-item {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(var(--md-glass-blur)) saturate(var(--md-glass-sat)) brightness(var(--md-glass-bright));
    border-radius: 12px;
    padding: 15px;
    margin-bottom: 10px;
    border: 1px solid rgba(0,0,0,0.05);
    transition: all 0.3s;
}

.record-item.glass-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* ===== 年轻化简洁版新增样式 ===== */

/* 现代Header */
.modern-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px;
    margin-bottom: 10px;
}

.logo-anim {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.logo-anim:hover {
    transform: scale(1.1) rotate(5deg);
}

/* 在线指示器 */
.pulse-dot {
    animation: pulse-dot 2s infinite;
}

@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.7; transform: scale(1.2); }
}

/* 现代用户卡片 */
.user-card-modern {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.user-card-modern:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(0,0,0,0.12);
}

.avatar-modern {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.avatar-modern:hover {
    transform: scale(1.05);
}

.points-chip {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.points-chip:hover {
    transform: scale(1.05);
}

.refresh-btn:hover {
    background: rgba(255, 71, 87, 0.2) !important;
    transform: rotate(180deg);
}

/* 快速操作瓷砖 */
.action-tile {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.action-tile:hover {
    transform: translateY(-4px) scale(1.02);
}

.action-tile:active {
    transform: translateY(0) scale(0.98);
}

.tile-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 帮助区域 */
.help-header:hover {
    opacity: 0.8;
}

.help-header i {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 联系栏 */
.contact-bar {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-bar:hover {
    transform: translateY(-2px);
}

.copy-mini {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.copy-mini:hover {
    transform: scale(1.05);
}

/* FAQ项悬停效果 */
.faq-item {
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item:hover {
    background: rgba(255, 71, 87, 0.03);
}

/* 响应式优化 */
@media (max-width: 375px) {
    .quick-actions {
        grid-template-columns: 1fr;
    }
    .modern-header {
        padding: 15px 20px;
    }
}

/* ===== 统一模态弹窗动画 ===== */

.modal-slide {
    animation: modalSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* 支付成功弹窗微动效（M3） */
.payment-success-pop {
    animation: paymentSuccessPopIn 0.42s cubic-bezier(0.2, 0.8, 0.2, 1);
}

.payment-success-pop__icon {
    animation: paymentSuccessIconIn 0.55s cubic-bezier(0.2, 0.8, 0.2, 1);
    box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.28);
}

@keyframes paymentSuccessPopIn {
    from {
        opacity: 0;
        transform: translateY(10px) scale(0.96);
    }
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

@keyframes paymentSuccessIconIn {
    0% {
        transform: scale(0.7);
        box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.28);
    }
    60% {
        transform: scale(1.08);
        box-shadow: 0 0 0 10px rgba(46, 213, 115, 0.0);
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 213, 115, 0.0);
    }
}

/* 转移预览样式 */
.transfer-preview {
    animation: slideDown 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

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

/* 渐变红色按钮 */
.action-btn.btn-red {
    background: linear-gradient(135deg, #FF4757, #C44569) !important;
    color: white !important;
    box-shadow: 0 4px 12px rgba(255, 71, 87, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.action-btn.btn-red:hover:not(:disabled) {
    background: linear-gradient(135deg, #C44569, #A8446F) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 16px rgba(255, 71, 87, 0.4) !important;
}

.action-btn.btn-red:active:not(:disabled) {
    transform: translateY(0) scale(0.98) !important;
}

/* 转移确认模态框样式 */
.transfer-confirm-content {
    text-align: center;
}

.transfer-avatar {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    border: 3px solid #6C5CE7;
    margin-bottom: 10px;
}

.transfer-confirm-info {
    background: rgba(230, 243, 255, 0.7);
    border-radius: 12px;
    padding: 15px;
    margin: 15px 0;
    border-left: 4px solid #6C5CE7;
}

/* 在style.css末尾添加以下代码 */

/* ===== 统一预约记录卡片模板 ===== */
.res-card { background:#FFFFFF; border:1px solid var(--border-color); border-radius:12px; padding:14px; transition:background .2s; }
.res-card:hover { background:#FAFAFA; }
.res-card__header { display:flex; align-items:center; justify-content:space-between; margin-bottom:8px; }
.res-card__title { font-size:15px; font-weight:700; color:var(--text-dark); }
.res-card__badges { display:flex; align-items:center; gap:6px; }
.res-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid var(--border-color); color:var(--text-medium); background:#FFF; }
.res-badge--pending { color:#2ED573; border-color:rgba(46,213,115,.35); background:rgba(46,213,115,.08); }
.res-badge--missed { color:#FF4757; border-color:rgba(255,71,87,.35); background:rgba(255,71,87,.08); }
.res-badge--completed { color:#1ABC9C; border-color:rgba(26,188,156,.35); background:rgba(26,188,156,.08); }
.res-badge--cancelled { color:#FFC107; border-color:rgba(255,193,7,.35); background:rgba(255,193,7,.08); }
.res-badge--temp { color:#333333; border-color:#FFD24D; background:#FFE066; }
.res-card__body { display:grid; row-gap:8px; }
.res-row { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.res-label { font-size:12px; color:var(--text-light); }
.res-value { font-size:14px; color:var(--text-dark); font-weight:600; text-align:right; }
.res-sub { font-size:12px; color:var(--text-medium); }
.res-card__footer { display:flex; align-items:center; justify-content:flex-end; gap:8px; margin-top:10px; }
.res-action { padding:8px 12px; border:1px solid var(--border-color); border-radius:8px; background:#FFF; color:var(--text-dark); font-size:13px; cursor:pointer; }
.res-action--danger { border-color:rgba(255,71,87,.35); color:#FF4757; }
@media (max-width: 420px) { .res-row { flex-direction:column; align-items:flex-start; } .res-value { text-align:left; } }

/* 兼容旧标记（若仍有 temp-badge 输出则保持同样黄色标签风格） */
.temp-badge { display:inline-block; padding:2px 8px; border-radius:999px; font-size:11px; font-weight:700; border:1px solid #FFD24D; background:#FFE066; color:#333333; }

/* ===== 统一按钮动画效果 ===== */
.main-action-btn, .pay-btn, .transfer-btn, .btn-red {
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-action-btn::before, .pay-btn::before, .transfer-btn::before, .btn-red::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    transition: left 0.6s;
}

.main-action-btn:hover::before, .pay-btn:hover::before, .transfer-btn:hover::before, .btn-red:hover::before {
    left: 100%;
}

.main-action-btn:hover:not(:disabled), .pay-btn:hover:not(:disabled), .transfer-btn:hover:not(:disabled), .btn-red:hover:not(:disabled) {
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(255, 71, 87, 0.4);
}

.main-action-btn:active:not(:disabled), .pay-btn:active:not(:disabled), .transfer-btn:active:not(:disabled), .btn-red:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}

.main-action-btn:disabled, .pay-btn:disabled, .transfer-btn:disabled, .btn-red:disabled {
    background: #E0E0E0;
    color: #B0B0B0;
    cursor: not-allowed;
    box-shadow: none;
}

/* ================= Pixel Theme Overrides (Font Only) ================= */
/* 仅保留像素字体配置，移除对 Material 风格有冲突的视觉强覆盖 */
@font-face {
  font-family: 'Zpix';
  src: url('/assets/fonts/zpix.woff2') format('woff2'),
       url('/assets/fonts/zpix.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Zpix';
  src: url('/assets/fonts/zpix.woff2') format('woff2'),
       url('/assets/fonts/zpix.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html, body, button, input, select, textarea {
  font-family: 'Zpix', 'FZ Pixel', monospace, sans-serif !important;
  -webkit-font-smoothing: none !important;
  text-rendering: optimizeSpeed;
}

/* 强制全站使用像素体，但不再使用 !important 禁用动效和层级 */
p, span, div, a, h1, h2, h3, h4, h5, h6,
ul, ol, li, dl, dt, dd, label, small, strong, em, b {
  font-family: 'Zpix', monospace, sans-serif;
}

/* 避免覆盖图标字体 */
i.fa, i.fas, i.far, i.fab, i.fa-solid, i[class^="fa-"], i[class*=" fa-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

/* 键盘焦点可视化 */
a:focus-visible, button:focus-visible, .action-btn:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible,
.tab-btn:focus-visible, .amount-btn:focus-visible, .nav-item:focus-visible {
  outline: 2px solid var(--primary-red);
  outline-offset: 2px;
}


/* ===== Remix Icon overlay (online, fallback to FA) ===== */
/* Debug helpers */
.ri-debug i { outline:1px dashed #0ea5e9; }
.ri-debug .ri-load-ok { outline:2px solid #22c55e !important; }
.ri-debug .ri-load-fail { outline:2px solid #ef4444 !important; position:relative; }
.ri-debug .ri-load-fail::after { content:'×'; position:absolute; top:-6px; right:-6px; background:#ef4444; color:#fff; font-size:10px; border-radius:50%; width:14px; height:14px; display:flex; align-items:center; justify-content:center; }

/* 启用remixicon伪元素 */
.ri-enabled .ri-loader-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-image: url('/vendor/remixicon/icons/System/loader-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/loader-line.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

.ri-enabled .ri-arrow-left-line::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: currentColor;
  -webkit-mask-image: url('/vendor/remixicon/icons/Arrows/arrow-left-line.svg');
  mask-image: url('/vendor/remixicon/icons/Arrows/arrow-left-line.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
}

/* 统一控制i元素尺寸与禁用旧背景，避免方框与404 */
.ri-enabled i { display:inline-block; width:1em; height:1em; line-height:1; vertical-align:-0.125em; }
.ri-enabled i[class^="fa-"], .ri-enabled i[class*=" fa-"] { background: none !important; }

/* 默认所有图标使用相对定位（用于Remix Icon映射） */
.ri-enabled i { position: relative; }
/* 注意：不在这里设置 content: none，让Font Awesome图标正常显示 */
/* 只有对有Remix映射的图标，在后面的规则中会设置 content: '' 来启用伪元素 */

/* ===== 图标显示修复：确保所有图标都能正常显示 ===== */
/* 核心策略：对于没有Remix映射的图标，强制使用原生Font Awesome */

/* 对于没有Remix映射的图标，确保使用原生Font Awesome，禁用伪元素 */
.ri-enabled .fa-list::before,
.ri-enabled .fa-times-circle::before,
.ri-enabled .fa-credit-card::before,
.ri-enabled .fa-trash-alt::before {
  content: none !important;
  display: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.ri-enabled .fa-list,
.ri-enabled .fa-times-circle,
.ri-enabled .fa-credit-card,
.ri-enabled .fa-trash-alt {
  position: static !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

/* 取消订单按钮中的 fa-times（排除关闭按钮） */
.ri-enabled button[onclick*="cancelOrder"]:not(.payment-modal-close):not(.qr-modal-close):not(.history-modal-close) .fa-times::before,
.ri-enabled button[onclick*="cancelOrder"]:not(.payment-modal-close):not(.qr-modal-close):not(.history-modal-close) i.fa-times::before {
  content: none !important;
  display: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.ri-enabled button[onclick*="cancelOrder"]:not(.payment-modal-close):not(.qr-modal-close):not(.history-modal-close) .fa-times,
.ri-enabled button[onclick*="cancelOrder"]:not(.payment-modal-close):not(.qr-modal-close):not(.history-modal-close) i.fa-times {
  position: static !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

/* 订单状态标签中的图标 - 只对没有Remix映射的图标使用原生Font Awesome */
/* fa-clock 和 fa-check-circle 有Remix映射，应该使用Remix Icon，不要禁用 */
/* 只有 fa-times-circle 没有映射，需要使用原生Font Awesome */
.ri-enabled .order-status-badge .fa-times-circle::before {
  content: none !important;
  display: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.ri-enabled .order-status-badge .fa-times-circle {
  position: static !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

/* 按钮中的图标 - 只对没有Remix映射的图标使用原生Font Awesome */
/* fa-credit-card 没有映射，需要使用原生Font Awesome */
.ri-enabled button .fa-credit-card::before {
  content: none !important;
  display: none !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  background: none !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
}
.ri-enabled button .fa-credit-card {
  position: static !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands", "Font Awesome 5 Free", "Font Awesome 5 Brands" !important;
}

/* fa-times 在关闭按钮中有Remix映射，但在取消订单按钮中没有映射 */
/* 取消订单按钮中的 fa-times 已经在上面处理了 */
/* 启用已映射伪元素（只对这些选择器生成内容，避免未映射fa变方框） */
.ri-enabled .nav-item[data-page="home"] i::before,
.ri-enabled .nav-item[data-page="reserve"] i::before,
.ri-enabled .nav-item[data-page="profile"] i::before,
.ri-enabled .function-tabs .tab-btn[data-tab="recharge"] i::before,
.ri-enabled .function-tabs .tab-btn[data-tab="transfer"] i::before,
.ri-enabled .profile-menu-item[data-action="show-history"] .menu-icon i::before,
.ri-enabled .profile-menu-item[data-action="show-about"] .menu-icon i::before,
.ri-enabled .profile-menu-item[data-action="feedback"] .menu-icon i::before,
.ri-enabled .profile-menu-item[data-action="logout"] .menu-icon i::before,
/* Profile Tiles 图标映射 */
.ri-enabled .profile-tile .fa-calendar-check::before,
.ri-enabled .profile-tile .fa-calendar-alt::before,
.ri-enabled .profile-tile .fa-trophy::before,
.ri-enabled .profile-tile .fa-comment-dots::before,
.ri-enabled .profile-tile .fa-info-circle::before,
.ri-enabled .profile-tile .fa-sign-out-alt::before,
.ri-enabled .info-module-help.fa-question-circle::before,
.ri-enabled .pay-btn i::before,
.ri-enabled .action-btn.btn-gray i::before,
.ri-enabled .qr-modal-title i::before, .ri-enabled .payment-modal-title i::before,
.ri-enabled .payment-modal-close i::before, .ri-enabled .qr-modal-close i::before, .ri-enabled .history-modal-close i::before,
.ri-enabled #main-action-btn i::before,
.ri-enabled .transfer-btn i::before,
/* Points & Home 页面图标映射 */
.ri-enabled .fa-coins::before,
.ri-enabled .fa-plus-circle::before,
.ri-enabled .fa-exchange-alt::before,
.ri-enabled .fa-gem::before,
.ri-enabled .fa-edit::before,
.ri-enabled .fa-check-circle::before,
.ri-enabled .fa-user::before,
.ri-enabled .fa-user-check::before,
.ri-enabled .fa-paper-plane::before,
.ri-enabled .fa-shield-alt::before,
.ri-enabled .fa-exclamation-triangle::before,
.ri-enabled .fa-clock::before,
.ri-enabled .fa-calendar-check::before,
.ri-enabled .fa-external-link-alt::before,
.ri-enabled .fa-sync-alt::before,
.ri-enabled .fa-users::before,
.ri-enabled .fa-qq::before, .ri-enabled .fab.fa-qq::before,
.ri-enabled .fa-wallet::before,
.ri-enabled .fa-chevron-down::before,
.ri-enabled .fa-chevron-up::before,
.ri-enabled .fa-keyboard::before,
.ri-enabled .fa-walking::before {
  content: '';
  position: absolute;
  inset: 0;
  width: 1em;
  height: 1em;
  margin: auto;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
/* 底部导航 */
.ri-enabled .nav-item[data-page="home"] i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Buildings/home-2-line.svg');
  mask-image: url('/vendor/remixicon/icons/Buildings/home-2-line.svg');
}
.ri-enabled .nav-item[data-page="reserve"] i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Business/calendar-line.svg');
  mask-image: url('/vendor/remixicon/icons/Business/calendar-line.svg');
}
.ri-enabled .nav-item[data-page="profile"] i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/user-line.svg');
  mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/user-line.svg');
}
/* 点数页标签 */
.ri-enabled .function-tabs .tab-btn[data-tab="recharge"] i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/add-circle-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/add-circle-line.svg');
}
.ri-enabled .function-tabs .tab-btn[data-tab="transfer"] i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/exchange-box-line.svg');
  mask-image: url('/vendor/remixicon/icons/Finance/exchange-box-line.svg');
}
/* 个人页菜单 */
.ri-enabled .profile-menu-item[data-action="show-about"] .menu-icon i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/information-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/information-line.svg');
}
.ri-enabled .profile-menu-item[data-action="feedback"] .menu-icon i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Communication/chat-3-line.svg');
  mask-image: url('/vendor/remixicon/icons/Communication/chat-3-line.svg');
}
.ri-enabled .profile-menu-item[data-action="logout"] .menu-icon i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/logout-box-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/logout-box-line.svg');
}
/* Profile Tiles 图标映射 */
.ri-enabled .profile-tile .fa-calendar-check::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Business/calendar-check-line.svg');
  mask-image: url('/vendor/remixicon/icons/Business/calendar-check-line.svg');
}
.ri-enabled .profile-tile .fa-calendar-alt::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Business/calendar-line.svg');
  mask-image: url('/vendor/remixicon/icons/Business/calendar-line.svg');
}
.ri-enabled .profile-tile .fa-trophy::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/trophy-line.svg');
  mask-image: url('/vendor/remixicon/icons/Finance/trophy-line.svg');
}
.ri-enabled .profile-tile .fa-comment-dots::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Communication/chat-3-line.svg');
  mask-image: url('/vendor/remixicon/icons/Communication/chat-3-line.svg');
}
.ri-enabled .profile-tile .fa-info-circle::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/information-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/information-line.svg');
}
.ri-enabled .profile-tile .fa-sign-out-alt::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/logout-box-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/logout-box-line.svg');
}
.ri-enabled .info-module-help.fa-question-circle::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/question-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/question-line.svg');
}
/* 常用操作 */
.ri-enabled .pay-btn i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/external-link-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/external-link-line.svg');
}
.ri-enabled .action-btn.btn-gray i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/refresh-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/refresh-line.svg');
}
.ri-enabled .qr-modal-title i::before, .ri-enabled .payment-modal-title i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Device/qr-code-line.svg');
  mask-image: url('/vendor/remixicon/icons/Device/qr-code-line.svg');
}
.ri-enabled .payment-modal-close i::before, .ri-enabled .qr-modal-close i::before, .ri-enabled .history-modal-close i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/close-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/close-line.svg');
}
.ri-enabled #main-action-btn .fa-qrcode::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Device/qr-code-line.svg');
  mask-image: url('/vendor/remixicon/icons/Device/qr-code-line.svg');
}
.ri-enabled #main-action-btn .fa-calendar-check::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Business/calendar-check-line.svg');
  mask-image: url('/vendor/remixicon/icons/Business/calendar-check-line.svg');
}
.ri-enabled #main-action-btn .fa-sign-out-alt::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/logout-box-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/logout-box-line.svg');
}
.ri-enabled .transfer-btn i::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Business/send-plane-line.svg');
  mask-image: url('/vendor/remixicon/icons/Business/send-plane-line.svg');
}
/* Points & Home 页面图标映射 */
.ri-enabled .fa-coins::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/coin-line.svg');
  mask-image: url('/vendor/remixicon/icons/Finance/coin-line.svg');
}
.ri-enabled .fa-plus-circle::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/add-circle-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/add-circle-line.svg');
}
.ri-enabled .fa-exchange-alt::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/exchange-box-line.svg');
  mask-image: url('/vendor/remixicon/icons/Finance/exchange-box-line.svg');
}
.ri-enabled .fa-gem::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/vip-diamond-line.svg');
  mask-image: url('/vendor/remixicon/icons/Finance/vip-diamond-line.svg');
}
.ri-enabled .fa-edit::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Design/edit-line.svg');
  mask-image: url('/vendor/remixicon/icons/Design/edit-line.svg');
}
.ri-enabled .fa-check-circle::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/check-double-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/check-double-line.svg');
}
.ri-enabled .fa-user::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/user-line.svg');
  mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/user-line.svg');
}
.ri-enabled .fa-user-check::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/user-line.svg');
  mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/user-line.svg');
}
.ri-enabled .fa-paper-plane::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Business/send-plane-line.svg');
  mask-image: url('/vendor/remixicon/icons/Business/send-plane-line.svg');
}
.ri-enabled .fa-shield-alt::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/shield-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/shield-line.svg');
}
.ri-enabled .fa-exclamation-triangle::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/alert-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/alert-line.svg');
}
.ri-enabled .fa-clock::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/time-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/time-line.svg');
}
.ri-enabled .fa-calendar-check::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Business/calendar-check-line.svg');
  mask-image: url('/vendor/remixicon/icons/Business/calendar-check-line.svg');
}
.ri-enabled .fa-external-link-alt::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/external-link-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/external-link-line.svg');
}
.ri-enabled .fa-sync-alt::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/System/refresh-line.svg');
  mask-image: url('/vendor/remixicon/icons/System/refresh-line.svg');
}
.ri-enabled .fa-users::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/team-line.svg');
  mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/team-line.svg');
}
.ri-enabled .fa-qq::before, .ri-enabled .fab.fa-qq::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Logos/qq-line.svg');
  mask-image: url('/vendor/remixicon/icons/Logos/qq-line.svg');
}
.ri-enabled .fa-wallet::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/wallet-line.svg');
  mask-image: url('/vendor/remixicon/icons/Finance/wallet-line.svg');
}
.ri-enabled .fa-chevron-down::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Arrows/arrow-down-s-line.svg');
  mask-image: url('/vendor/remixicon/icons/Arrows/arrow-down-s-line.svg');
}
.ri-enabled .fa-chevron-up::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Arrows/arrow-up-s-line.svg');
  mask-image: url('/vendor/remixicon/icons/Arrows/arrow-up-s-line.svg');
}
.ri-enabled .fa-keyboard::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Device/keyboard-line.svg');
  mask-image: url('/vendor/remixicon/icons/Device/keyboard-line.svg');
}
.ri-enabled .fa-walking::before {
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Map/walk-line.svg');
  mask-image: url('/vendor/remixicon/icons/Map/walk-line.svg');
}
/* Home: points chip coin icon */
.ri-enabled .user-card-modern .points-chip i.fa-coins::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/coin-line.svg'); mask-image: url('/vendor/remixicon/icons/Finance/coin-line.svg');
}
.ri-enabled .home-time-panel .home-cost i.fa-gamepad::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Device/gamepad-line.svg'); mask-image: url('/vendor/remixicon/icons/Device/gamepad-line.svg');
}
.ri-enabled .home-time-panel .home-cost i.fa-moon::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Weather/moon-line.svg'); mask-image: url('/vendor/remixicon/icons/Weather/moon-line.svg');
}
.ri-enabled .home-time-panel .home-cost i.fa-bed::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Map/hotel-bed-line.svg'); mask-image: url('/vendor/remixicon/icons/Map/hotel-bed-line.svg');
}
/* Home: contact bar icons */
.ri-enabled .contact-bar .fa-users::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/team-line.svg'); mask-image: url('/vendor/remixicon/icons/User%20%26%20Faces/team-line.svg');
}
.ri-enabled .contact-bar .fa-qq::before, .ri-enabled .contact-bar .fab.fa-qq::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Logos/qq-line.svg'); mask-image: url('/vendor/remixicon/icons/Logos/qq-line.svg');
}
/* Home: FAQ icons */
.ri-enabled .faq-section-modern .fa-qrcode::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Device/qr-code-line.svg'); mask-image: url('/vendor/remixicon/icons/Device/qr-code-line.svg');
}
.ri-enabled .faq-section-modern .fa-coins::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/coin-line.svg'); mask-image: url('/vendor/remixicon/icons/Finance/coin-line.svg');
}
.ri-enabled .faq-section-modern .fa-wallet::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/wallet-line.svg'); mask-image: url('/vendor/remixicon/icons/Finance/wallet-line.svg');
}
/* Points: current points icon */
.ri-enabled #points-card .points-card-icon i::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/coin-line.svg'); mask-image: url('/vendor/remixicon/icons/Finance/coin-line.svg');
}
/* Points: section title gem icon */
.ri-enabled .section-title-card .title-icon i.fa-gem::before {
  content:''; position:absolute; inset:0; width:1em; height:1em; margin:auto;
  background: currentColor; -webkit-mask-image: url('/vendor/remixicon/icons/Finance/vip-diamond-line.svg'); mask-image: url('/vendor/remixicon/icons/Finance/vip-diamond-line.svg');
}

/* ===== Profile Tiles (大图标+小字，横向瓷砖) ===== */
.profile-tiles {
  display: grid;
  gap: 12px;
}
#activity-card .profile-tiles { grid-template-columns: repeat(2, 1fr); }
#action-card .profile-tiles { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 360px) {
  #action-card .profile-tiles { grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .profile-tile { padding: 10px 6px; }
  .profile-tile .tile-icon { font-size: 24px; }
  .profile-tile .tile-label { font-size: 11px; }
}
.profile-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 14px 10px;
  border: none;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text-dark);
  background: #FFFFFF;
}
.profile-tile .tile-icon { font-size: 28px; line-height: 1; }
.profile-tile .tile-label { margin-top: 6px; font-size: 12px; color: var(--text-medium); }
.profile-tile:hover { background: #F5F5F5; }
.profile-tile[role="button"], .profile-tile[data-action] { cursor: pointer; }
@media (max-width: 360px) {
  .profile-tiles { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Profile 信息模块样式 ===== */
.info-modules-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.info-module {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.info-module-value {
  font-size: 28px;
  font-weight: 800;
  color: #2C2C2C;
  margin-bottom: 8px;
  line-height: 1.2;
}

.info-module-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.info-module-label {
  font-size: 13px;
  color: #8E8E8E;
}

.info-module-help {
  font-size: 14px;
  color: #8E8E8E;
  cursor: pointer;
  transition: color 0.3s;
}

.info-module-help:hover {
  color: #FF4757;
}

.info-module-buttons {
  display: flex;
  gap: 8px;
  width: 100%;
  margin-top: 4px;
}

.info-module-btn {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid;
  border-radius: 6px;
  background: white;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.3s;
  font-weight: 600;
}

.info-module-btn[data-action="recharge"] {
  border-color: #FF4757;
  color: #FF4757;
}

.info-module-btn[data-action="recharge"]:hover {
  background: #FF4757;
  color: white;
}

.info-module-btn[data-action="transfer"] {
  border-color: #6C5CE7;
  color: #6C5CE7;
}

.info-module-btn[data-action="transfer"]:hover {
  background: #6C5CE7;
  color: white;
}

@media (max-width: 520px) {
  .info-modules-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .info-module-value {
    font-size: 24px;
  }

/* ===== 出勤记录页面样式 ===== */
.chuqin-back-icon {
  background: currentColor;
  -webkit-mask-image: url('/vendor/remixicon/icons/Arrows/arrow-left-s-line.svg');
  mask-image: url('/vendor/remixicon/icons/Arrows/arrow-left-s-line.svg');
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

/* 移动端支付方式选择样式 */
@media (max-width: 768px) {
  .payment-method-selection {
    margin: 15px 0;
    padding: 15px;
    border-radius: 12px;
  }

  .payment-method-btn {
    padding: 12px 14px;
  }

  .payment-method-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .payment-method-name {
    font-size: 15px;
  }

  .payment-method-desc {
    font-size: 11px;
  }
}
}