:root{
  --primary-color:#4A89DC;
  --primary-light:#6A9DF0;
  --primary-dark:#3B7DDD;
  --gold-color:#FFD700;
  --gold-light:#FFED4E;
  --gold-dark:#B8860B;
  --accent-color:#f72585;
  --light-color:#F5F5F5;
  --surface-color:#FFFFFF;
  --dark-color:#333333;
  --gray-color:#999999;
  --border-color:#E0E0E0;
  --card-shadow:0 2px 8px rgba(0,0,0,.1);
  --hover-shadow:0 4px 12px rgba(0,0,0,.15);
  --transition:all .3s cubic-bezier(.25,.8,.25,1);
}
*{margin:0;padding:0;box-sizing:border-box}
body{background:#f5f8ff;color:#1a2b4c;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;min-height:100vh}
.splash{max-width:560px;margin:0 auto;padding:40px 24px;text-align:center;position:relative}
.bg-blur{width:220px;height:220px;background:radial-gradient(circle at 30% 30%, #8ec5ff 0%, #d9ecff 60%, transparent 70%);filter:blur(30px);border-radius:50%;position:absolute;left:50%;transform:translateX(-50%);top:40px;opacity:.5}
.app-icon{width:92px;height:92px;border-radius:20px;box-shadow:0 8px 24px rgba(0,120,255,.15);border:3px solid rgba(0,120,255,.08);object-fit:cover;margin:80px auto 16px;display:block;background:#fff}
.app-name{font-size:22px;font-weight:600;color:#2b6fd9;margin-bottom:28px}
.notes{color:#5a718a;font-size:14px;line-height:1.7;text-align:left;max-width:520px;margin:0 auto 20px}
.notes a{color:#2b6fd9;text-decoration:none}
.notes a:hover{text-decoration:underline}
.agree-row{display:flex;align-items:center;justify-content:center;gap:8px;margin:18px 0;color:#2b6fd9;font-size:14px}
.agree-row input{width:18px;height:18px;accent-color:#2b6fd9}
.start-btn{width:100%;max-width:520px;height:52px;border:none;border-radius:26px;background:linear-gradient(90deg,#2b6fd9,#65a6ff);color:#fff;font-size:18px;font-weight:600;box-shadow:0 10px 24px rgba(43,111,217,.25);cursor:pointer}
.start-btn:disabled{background:#c7d7f5;color:#fff;cursor:not-allowed;box-shadow:none}
.helper{font-size:12px;color:#8aa0b8;margin-top:10px}
.sms-wrap{display:none;margin-top:22px;text-align:left}
.input-group{margin-bottom:14px}
.input-group input{width:100%;height:44px;border:1px solid #d9e6ff;border-radius:10px;padding:0 12px;font-size:15px}
.sms-actions{display:flex;gap:10px;margin-top:8px}
.btn{flex:1;height:44px;border:none;border-radius:12px;cursor:pointer}
.btn-primary{background:#2b6fd9;color:#fff}
.btn-ghost{background:#eef5ff;color:#2b6fd9}
.detect-layer{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.85);backdrop-filter:blur(10px);display:none;flex-direction:column;align-items:center;justify-content:center;z-index:999}
.detect-layer .loading{width:44px;height:44px;border:3px solid #2b6fd9;border-top:3px solid transparent;border-radius:50%;animation:spin 1s linear infinite;margin-bottom:16px}
.detect-layer .text{color:#2b6fd9;font-size:16px}
@keyframes spin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
/* 本地字体定义 - 使用系统字体作为Poppins的替�?*/
@font-face {
    font-family: 'Poppins-Local';
    src: local('Segoe UI'), local('Helvetica Neue'), local('Arial'), local('sans-serif');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-Local';
    src: local('Segoe UI Semibold'), local('Helvetica Neue Medium'), local('Arial Bold'), local('sans-serif');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-Local';
    src: local('Segoe UI Semibold'), local('Helvetica Neue Semibold'), local('Arial Bold'), local('sans-serif');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins-Local';
    src: local('Segoe UI Bold'), local('Helvetica Neue Bold'), local('Arial Bold'), local('sans-serif');
    font-weight: 700;
    font-style: normal;
}

/* 全局字体设置 */
body, * {
    font-family: "Poppins-Local", "PingFang SC", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif !important;
}
/**
 * 图片加载效果样式
 * 提供平滑的加载动画和过渡效果
 */

/* 图片基础样式 */
img {
    /* 默认透明，加载完成后显示 */
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    
    /* 防止图片闪烁 */
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
    
    /* 确保图片不会超出容器 */
    max-width: 100%;
    height: auto;
}

/* 加载完成的图�?*/
img.loaded {
    opacity: 1;
}

/* 加载中的图片 */
img.loading {
    opacity: 0.3;
    animation: pulse 1.5s ease-in-out infinite;
}

/* 加载失败的图�?*/
img.load-error {
    opacity: 0.5;
    filter: grayscale(100%);
}

/* 脉冲动画 */
@keyframes pulse {
    0% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
    100% {
        opacity: 0.3;
    }
}

/* 骨架屏效�?*/
.image-skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

@keyframes loading {
    0% {
        background-position: 200% 0;
    }
    100% {
        background-position: -200% 0;
    }
}

/* 特定元素的图片加载效�?*/

/* Logo图片 */
.logo {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.3s ease;
}

.logo.loaded {
    opacity: 1;
}

.logo:hover {
    transform: scale(1.05);
}

/* 轮播图片 */
.banner-swiper img {
    opacity: 0;
    transition: opacity 0.6s ease;
}

.banner-swiper img.loaded {
    opacity: 1;
}

/* 商品图片 */
.product-image {
    opacity: 0;
    transition: opacity 0.4s ease, transform 0.3s ease;
    background: linear-gradient(135deg, #f5f7fa 0%, #e4e7eb 100%);
}

.product-image.loaded {
    opacity: 1;
}

.product-image.loading {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
}

/* 分类图标 */
.category-icon img {
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.2s ease;
}

.category-icon img.loaded {
    opacity: 1;
}

.category-icon:hover img {
    transform: scale(1.1);
}

/* 公告图标 */
.announcement-icon img {
    opacity: 0;
    transition: opacity 0.3s ease;
}

.announcement-icon img.loaded {
    opacity: 1;
}

/* 搜索按钮图标 */
.search-button img {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.search-button img.loaded {
    opacity: 1;
}

/* 推广横幅 */
.promo-banner img {
    opacity: 0;
    transition: opacity 0.5s ease, transform 0.3s ease;
}

.promo-banner img.loaded {
    opacity: 1;
}

.promo-banner:hover img {
    transform: scale(1.02);
}

/* 响应式图片加载效�?*/
@media (max-width: 768px) {
    img {
        transition: opacity 0.2s ease;
    }
    
    .product-image.loading {
        animation-duration: 1s;
    }
}

/* 减少动画效果（用户偏好） */
@media (prefers-reduced-motion: reduce) {
    img,
    .logo,
    .banner-swiper img,
    .product-image,
    .category-icon img,
    .announcement-icon img,
    .search-button img,
    .promo-banner img {
        transition: opacity 0.1s ease;
    }
    
    .image-skeleton,
    .product-image.loading {
        animation: none;
        background: #f0f0f0;
    }
    
    @keyframes pulse {
        0%, 100% {
            opacity: 0.5;
        }
    }
}

/* 高对比度模式 */
@media (prefers-contrast: high) {
    img.load-error {
        filter: contrast(150%) grayscale(100%);
        border: 2px solid #ff0000;
    }
}

/* 暗色模式适配 */
@media (prefers-color-scheme: dark) {
    .image-skeleton {
        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    }
    
    .product-image {
        background: linear-gradient(135deg, #2a2a2a 0%, #3a3a3a 100%);
    }
    
    .product-image.loading {
        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
    }
}

/* 图片容器样式 */
.image-container {
    position: relative;
    overflow: hidden;
}

.image-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: loading 1.5s infinite;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container.loading::before {
    opacity: 1;
}

.image-container img {
    position: relative;
    z-index: 2;
}

/* 图片加载提示 */
.image-loading-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container.loading .image-loading-tip {
    opacity: 1;
}

/* 图片错误提示 */
.image-error-tip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 8px 12px;
    border-radius: 4px;
    font-size: 12px;
    z-index: 3;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-container.error .image-error-tip {
    opacity: 1;
}

/* 图片重试按钮 */
.image-retry-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #4361ee;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    z-index: 4;
    opacity: 0;
    transition: opacity 0.3s ease, background 0.2s ease;
}

.image-retry-btn:hover {
    background: #3730a3;
}

.image-container.error .image-retry-btn {
    opacity: 1;
}

/* 图片加载成功动画 */
@keyframes imageLoadSuccess {
    0% {
        opacity: 0;
        transform: scale(0.9);
    }
    50% {
        transform: scale(1.05);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

.image-load-success {
    animation: imageLoadSuccess 0.5s ease-out;
}

/* 图片懒加载占位符 */
.lazy-placeholder {
    background: #f0f0f0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #999;
    font-size: 14px;
    min-height: 100px;
}

.lazy-placeholder::before {
    content: '📷';
    font-size: 24px;
    margin-bottom: 8px;
}

/* 图片质量优化提示 */
.image-quality-notice {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 12px 16px;
    border-radius: 8px;
    font-size: 12px;
    z-index: 9998;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.image-quality-notice.show {
    opacity: 1;
    transform: translateY(0);
}

/* 网络状态指示器 */
.network-status {
    position: fixed;
    top: 50px;
    right: 20px;
    background: rgba(255, 255, 255, 0.95);
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 12px;
    z-index: 9997;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.network-status.show {
    opacity: 1;
}

.network-status.slow {
    background: rgba(255, 193, 7, 0.95);
    border-color: #ffc107;
}

.network-status.offline {
    background: rgba(220, 53, 69, 0.95);
    border-color: #dc3545;
    color: white;
}
/* 本地图标样式 - 使用Unicode字符替代Font Awesome */
.fa, .fas, .far, .fab { font-family: Arial, sans-serif; font-style: normal; font-weight: normal; display: inline-block; text-decoration: none; }
.fa:before, .fas:before, .far:before, .fab:before { content: ""; display: inline-block; width: 1em; height: 1em; background-color: currentColor; -webkit-mask: var(--icon-url) no-repeat center / contain; mask: var(--icon-url) no-repeat center / contain; }

/* 常用图标映射 */
.fa-bullhorn:before { content: "📢"; }
.fa-gamepad:before { content: "🎮"; }
.fa-tag:before { content: "🏷�?; }
.fa-box-open:before { content: "📦"; }
.fa-home:before { content: "🏠"; }
.fa-user:before { content: "👤"; }
.fa-list:before { content: "📋"; }
.fa-phone:before { content: "📞"; }
.fa-chart-bar:before { content: "📊"; }
.fa-shopping-cart:before { --icon-url: url('../images/buy-icon.svg'); }
.fa-heart:before { content: "❤️"; }
.fa-star:before { content: "�?; }
.fa-search:before { --icon-url: url('../images/icons/search.svg'); }
.fa-magnifying-glass:before { --icon-url: url('../images/icons/search.svg'); }
.fa-menu:before { content: "�?; }
.fa-close:before { content: "�?; }
.fa-check:before { content: "�?; }
.fa-arrow-left:before { content: "�?; }
.fa-arrow-right:before { content: "�?; }
.fa-arrow-up:before { content: "�?; }
.fa-arrow-down:before { content: "�?; }

/* 扩展图标映射（覆盖项目内使用的fa-类） */
.fa-id-card:before { content: "🪪"; }
.fa-user-plus:before { content: "�?; }
.fa-exclamation-circle:before { content: "⚠️"; }
.fa-check-circle:before { content: "�?; }
.fa-spinner:before { content: "�?; }
.fa-exclamation-triangle:before { content: "⚠️"; }
.fa-info-circle:before { content: "ℹ️"; }
.fa-user-tie:before { content: "👔"; }
.fa-clock:before { content: "🕒"; }
.fa-comment:before { content: "💬"; }
.fa-comment-dots:before { content: "💬"; }
.fa-store:before { --icon-url: url('../images/icons/store.svg'); }
.fa-store-alt:before { content: "🏬"; }
.fa-chevron-left:before { content: "◀"; }
.fa-chevron-right:before { content: "�?; }
.fa-plus:before { content: "�?; }
.fa-plus-circle:before { --icon-url: url('../images/icons/plus-circle.svg'); }
.fa-inbox:before { content: "📥"; }
.fa-wallet:before { --icon-url: url('../images/icons/wallet.svg'); }
.fa-headset:before { content: "🎧"; }
.fa-paper-plane:before { content: "📨"; }
.fa-circle:before { content: "�?; }
.fa-gift:before { --icon-url: url('../images/icons/gift.svg'); }
.fa-trophy:before { content: "🏆"; }
.fa-ellipsis-v:before { content: "�?; }
.fa-ellipsis-h:before { content: "�?; }
.fa-times:before { content: "�?; }
.fa-times-circle:before { --icon-url: url('../images/icons/x-circle.svg'); }
.fa-angle-right:before { content: "�?; }
.fa-sync-alt:before { content: "🔄"; }
.fa-mobile-alt:before { content: "📱"; }
.fa-recycle:before { content: "♻️"; }
.fa-box:before { --icon-url: url('../images/default-product.svg'); }
.fa-image:before { --icon-url: url('../images/icons/image.svg'); }
.fa-user-circle:before { --icon-url: url('../images/nav-user.svg'); }
.fa-user-check:before { content: "�?; }
.fa-user-shield:before { content: "🛡�?; }
.fa-random:before { content: "🔀"; }
.fa-clipboard-list:before { content: "📋"; }
.fa-pen:before { content: "🖊�?; }
.fa-sign-out-alt:before { --icon-url: url('../images/icons/sign-out.svg'); }
.fa-chart-line:before { --icon-url: url('../images/sales-rank.svg'); }
.fa-user-edit:before { content: "�?; }
.fa-download:before { content: "⬇️"; }
.fa-history:before { content: "�?; }
.fa-reply:before { content: "↩️"; }
.fa-comments:before { content: "💬"; }
.fa-file-invoice:before { content: "🧾"; }
.fa-th:before { content: "�?; }
.fa-gear:before { --icon-url: url('../images/icons/gear.svg'); }
.fa-coin:before { --icon-url: url('../images/icons/coin.svg'); }
.fa-lightbulb:before { --icon-url: url('../images/icons/lightbulb.svg'); }
.fa-eye:before { --icon-url: url('../images/icons/eye.svg'); }

/* 品牌图标（简化映射） */
.fa-weixin:before { content: "�?; }

/* 图标大小 */
.fa-lg { font-size: 1.25em; }
.fa-2x { font-size: 2em; }
.fa-3x { font-size: 3em; }
.fa-list-ul:before { --icon-url: url('../images/icons/list-ul.svg'); }
.fa-file-invoice:before { --icon-url: url('../images/icons/receipt.svg'); }
.fa-exclamation-circle:before { --icon-url: url('../images/icons/exclamation-circle.svg'); }
.fa-check-circle:before { --icon-url: url('../images/icons/check-circle.svg'); }
.fa-hourglass:before { --icon-url: url('../images/icons/hourglass.svg'); }
.fa-hourglass-half:before { --icon-url: url('../images/icons/hourglass.svg'); }
.fa-arrow-left:before { --icon-url: url('../images/icons/arrow-left.svg'); }

/* 图标动画 */
.fa-spin {
    animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}