* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
    background-color: #f5f5f5;
    color: #333;
}

.container {
    max-width: 414px;
    margin: 0 auto;
    background: white;
    min-height: 100vh;
    position: relative;
    padding-bottom: 60px;
}

/* 导航栏 */
.nav-bar {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 20px;
    text-align: center;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 414px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2000;
}

.nav-back-btn {
    position: absolute;
    left: 20px;
    background: none;
    border: none;
    color: white;
    font-size: 20px;
    font-weight: bold;
    cursor: pointer;
    padding: 8px 12px;
    border-radius: 8px;
    transition: all 0.3s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.nav-back-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    transform: translateX(-2px);
}

.nav-title {
    font-size: 18px;
    font-weight: 600;
    flex: 1;
}

/* 页面内容区域 */
.page {
    display: none;
    padding: 20px;
    padding-top: 80px;
    animation: fadeIn 0.3s ease-in-out;
}

.page.active {
    display: block;
}

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

/* 首页样式 - 已移除未使用的hero样式 */

/* 公司简介美化样式 */
.company-intro {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 20px;
    padding: 0;
    margin-bottom: 20px;
    box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
    overflow: hidden;
    position: relative;
}

.company-intro::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
    pointer-events: none;
}

.intro-header {
    background: rgba(255, 255, 255, 0.95);
    padding: 25px;
    text-align: center;
    position: relative;
    z-index: 1;
}

.intro-icon {
    font-size: 48px;
    margin-bottom: 10px;
    display: block;
}

.intro-title {
    font-size: 24px;
    font-weight: 700;
    color: #333;
    margin-bottom: 5px;
}

.intro-subtitle {
    font-size: 14px;
    color: #666;
    opacity: 0.8;
}

.company-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
    background: rgba(255, 255, 255, 0.95);
    margin: 20px 20px 0 20px;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.stat-card {
    padding: 20px 15px;
    text-align: center;
    background: white;
    border-right: 1px solid #f0f0f0;
    transition: all 0.3s ease;
    position: relative;
}

.stat-card:last-child {
    border-right: none;
}

.stat-card:hover {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    transform: translateY(-2px);
}

.stat-number {
    font-size: 20px;
    font-weight: 700;
    color: #667eea;
    margin-bottom: 5px;
    transition: color 0.3s ease;
}

.stat-card:hover .stat-number {
    color: white;
}

.stat-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 3px;
    transition: color 0.3s ease;
}

.stat-card:hover .stat-label {
    color: rgba(255, 255, 255, 0.9);
}

.stat-desc {
    font-size: 11px;
    color: #999;
    transition: color 0.3s ease;
}

.stat-card:hover .stat-desc {
    color: rgba(255, 255, 255, 0.8);
}

.company-description {
    padding: 25px;
    background: rgba(255, 255, 255, 0.95);
    margin: 20px;
    border-radius: 15px;
    position: relative;
    z-index: 1;
}

.desc-section {
    display: flex;
    align-items: flex-start;
    margin-bottom: 20px;
    padding: 15px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.desc-section:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
}

.desc-section:last-child {
    margin-bottom: 0;
}

.desc-icon {
    font-size: 24px;
    margin-right: 15px;
    flex-shrink: 0;
    margin-top: 2px;
}

.desc-content h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin: 0 0 8px 0;
}

.desc-content p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* 产品特色列表样式 - 现代化设计 */
.feature-list {
    margin-left: -36px;
    margin-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}

.feature-item-text {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding: 12px 0;
    transition: all 0.3s ease;
    opacity: 0;
    transform: translateX(-20px);
    animation: featureItemSlideIn 0.6s ease-out forwards;
}

.feature-item-text:nth-child(1) { animation-delay: 0.1s; }
.feature-item-text:nth-child(2) { animation-delay: 0.2s; }
.feature-item-text:nth-child(3) { animation-delay: 0.3s; }
.feature-item-text:nth-child(4) { animation-delay: 0.4s; }

.feature-item-text:last-child {
    margin-bottom: 0;
}

.feature-item-text:hover {
    transform: translateX(4px);
    padding-left: 2px;
}

/* 特色图标样式 */
.feature-bullet {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 600;
    color: white;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* 不同特色项的渐变背景 */
.feature-item-text:nth-child(1) .feature-bullet {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.feature-item-text:nth-child(2) .feature-bullet {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.feature-item-text:nth-child(3) .feature-bullet {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.feature-item-text:nth-child(4) .feature-bullet {
    background: linear-gradient(135deg, #96fbc4 0%, #f9f047 100%);
}

.feature-bullet::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    transform: scale(0);
    transition: transform 0.3s ease;
}

.feature-item-text:hover .feature-bullet::before {
    transform: scale(1);
}

.feature-bullet:hover {
    transform: scale(1.1);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

/* 特色文字样式 */
.feature-item-text span:last-child {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    font-weight: 500;
    transition: color 0.3s ease;
}

.feature-item-text:hover span:last-child {
    color: #667eea;
    font-weight: 600;
}

/* 进入动画 */
@keyframes featureItemSlideIn {
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* 响应式设计 */
@media (max-width: 375px) {
    .feature-bullet {
        width: 28px;
        height: 28px;
        margin-right: 12px;
        font-size: 14px;
    }

    .feature-item-text span:last-child {
        font-size: 13px;
    }

    .feature-item-text {
        margin-bottom: 14px;
        padding: 10px 0;
    }
}

/* 保留使用中的样式 */
.info-title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 15px;
    color: #333;
}

/* 已删除未使用的 .company-info 和 .info-content 样式 */

/* 产品特色网格 - 现代化设计 */
.features-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    margin-top: 24px;
    padding: 0 4px;
}

/* 特色卡片基础样式 */
.feature-card {
    position: relative;
    border-radius: 16px;
    padding: 0;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    cursor: pointer;
    min-height: 140px;
}

.feature-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.2);
}

/* 渐变背景层 */
.feature-background {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    opacity: 0.9;
    transition: opacity 0.3s ease;
}

.feature-card:hover .feature-background {
    opacity: 1;
}

/* 不同类型的渐变背景 */
.well-salt .feature-background {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}

.sea-salt .feature-background {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}

.lake-salt .feature-background {
    background: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
}

.bamboo-salt .feature-background {
    background: linear-gradient(135deg, #96fbc4 0%, #f9f047 100%);
}

/* 内容容器 */
.feature-content {
    position: relative;
    z-index: 2;
    padding: 20px 16px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
}

/* 图标样式 */
.feature-icon {
    font-size: 32px;
    margin-bottom: 8px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
    animation: iconFloat 3s ease-in-out infinite;
}

@keyframes iconFloat {
    0%, 100% { transform: translateY(0px); }
    50% { transform: translateY(-4px); }
}

/* 信息区域 */
.feature-info {
    flex: 1;
}

/* 标题样式 */
.feature-title {
    font-size: 16px;
    font-weight: 700;
    color: white;
    margin-bottom: 4px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* 描述样式 */
.feature-desc {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    margin-bottom: 12px;
    font-weight: 500;
}

/* 标签容器 */
.feature-tags {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

/* 标签样式 */
.feature-tag {
    background: rgba(255, 255, 255, 0.25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    color: white;
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 10px;
    font-weight: 600;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.3s ease;
}

.feature-tag:hover {
    background: rgba(255, 255, 255, 0.35);
    transform: scale(1.05);
}

/* 卡片进入动画 */
.feature-card {
    animation: cardSlideIn 0.6s ease-out forwards;
    opacity: 0;
    transform: translateY(30px);
}

.feature-card:nth-child(1) { animation-delay: 0.1s; }
.feature-card:nth-child(2) { animation-delay: 0.2s; }
.feature-card:nth-child(3) { animation-delay: 0.3s; }
.feature-card:nth-child(4) { animation-delay: 0.4s; }

@keyframes cardSlideIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 响应式设计优化 */
@media (max-width: 375px) {
    .features-grid {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .feature-card {
        min-height: 120px;
    }

    .feature-content {
        padding: 16px 14px;
    }

    .feature-icon {
        font-size: 28px;
    }

    .feature-title {
        font-size: 15px;
    }
}

/* 商城页面样式 */
.search-bar {
    background: #f8f8f8;
    border-radius: 25px;
    padding: 12px 20px;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.search-input {
    border: none;
    background: none;
    flex: 1;
    outline: none;
    font-size: 14px;
}

.category-tabs {
    display: flex;
    margin-bottom: 20px;
    background: #f8f8f8;
    border-radius: 25px;
    padding: 5px;
}

.tab-btn {
    flex: 1;
    padding: 10px 15px;
    text-align: center;
    border: none;
    background: transparent;
    border-radius: 20px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.tab-btn.active {
    background: white;
    color: #667eea;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

.products-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
}

.product-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.08);
    transition: transform 0.3s;
    display: flex;
    flex-direction: column;
    min-height: 220px;
}

.product-card:hover {
    transform: translateY(-5px);
}

.product-image {
    width: 100%;
    height: 120px;
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #999;
}

.product-info {
    padding: 15px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

.product-name {
    font-size: 13px;
    font-weight: 600;
    margin-bottom: 6px;
    color: #333;
    line-height: 1.3;
    min-height: 32px;
}

.product-specs {
    font-size: 11px;
    color: #999;
    margin-bottom: 8px;
    line-height: 1.2;
}

.product-price {
    color: #f5576c;
    font-weight: bold;
    font-size: 16px;
    margin-bottom: 10px;
    margin-top: auto;
}

.add-cart-btn {
    width: 100%;
    padding: 8px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.add-cart-btn:hover {
    background: #5a6fd8;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.3);
}

.add-cart-btn:active {
    transform: translateY(0);
    transition: transform 0.1s;
}

.add-cart-btn.adding {
    background: #27ae60;
    transform: scale(0.95);
}

.add-cart-btn.added {
    background: #27ae60;
    animation: addToCartSuccess 0.6s ease-in-out;
}

@keyframes addToCartSuccess {
    0% { background: #667eea; transform: scale(1); }
    50% { background: #27ae60; transform: scale(1.05); }
    100% { background: #27ae60; transform: scale(1); }
}

/* 个人中心样式 */
.profile-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px;
    border-radius: 15px;
    margin-bottom: 25px;
    text-align: center;
}

.avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    margin: 0 auto 15px;
}

.profile-name {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 5px;
}

.profile-desc {
    font-size: 14px;
    opacity: 0.9;
}

.menu-list {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

.menu-item {
    display: flex;
    align-items: center;
    padding: 18px 20px;
    border-bottom: 1px solid #f0f0f0;
    cursor: pointer;
    transition: background 0.3s;
}

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

.menu-item:hover {
    background: #f8f8f8;
}

.menu-icon {
    width: 24px;
    height: 24px;
    margin-right: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #667eea;
    font-size: 18px;
}

.menu-text {
    flex: 1;
    font-size: 15px;
    color: #333;
}

.menu-arrow {
    color: #999;
    font-size: 14px;
}

/* 底部导航 */
.bottom-nav {
    position: fixed;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 414px;
    background: white;
    border-top: 1px solid #eee;
    display: flex;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 1000;
}

.nav-item {
    flex: 1;
    padding: 8px 4px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s;
    border: none;
    background: none;
}

.nav-item.active {
    color: #667eea;
}

.nav-icon {
    font-size: 20px;
    margin-bottom: 2px;
    display: block;
}

/* 简约白色图标样式 */
.nav-icon.icon-home,
.nav-icon.icon-shop,
.nav-icon.icon-cart,
.nav-icon.icon-profile {
    width: 24px;
    height: 24px;
    margin: 0 auto 2px;
    position: relative;
    display: block;
    font-size: 0; /* 隐藏emoji文字 */
}

.nav-icon.icon-home::before,
.nav-icon.icon-shop::before,
.nav-icon.icon-cart::before,
.nav-icon.icon-profile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #999;
    transition: background-color 0.3s ease;
}

/* 首页图标 - 房子 */
.nav-icon.icon-home::before {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 12L5 10M5 10L12 3L19 10M5 10V20C5 20.5523 5.44772 21 6 21H9M19 10L21 12M19 10V20C19 20.5523 18.5523 21 18 21H15M9 21C9.55228 21 10 20.5523 10 20V16C10 15.4477 10.4477 15 11 15H13C13.5523 15 14 15.4477 14 16V20C14 20.5523 14.4477 21 15 21M9 21H15' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
}

/* 商城图标 - 商店 */
.nav-icon.icon-shop::before {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V7M3 7L5 19C5.10557 19.9045 5.89445 20.6955 6.8 20.8L17.2 20.8C18.1056 20.6955 18.8944 19.9045 19 19L21 7M3 7H21M9 11V13M15 11V13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 7V5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V7M3 7L5 19C5.10557 19.9045 5.89445 20.6955 6.8 20.8L17.2 20.8C18.1056 20.6955 18.8944 19.9045 19 19L21 7M3 7H21M9 11V13M15 11V13' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
}

/* 购物车图标 */
.nav-icon.icon-cart::before {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.7 15.3C4.3 15.7 4.6 16.5 5.1 16.5H17M17 13V17C17 17.5523 17.4477 18 18 18C18.5523 18 19 17.5523 19 17C19 16.4477 18.5523 16 18 16C17.4477 16 17 16.4477 17 17ZM9 19C9 19.5523 8.55228 20 8 20C7.44772 20 7 19.5523 7 19C7 18.4477 7.44772 18 8 18C8.55228 18 9 18.4477 9 19Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 3H5L5.4 5M7 13H17L21 5H5.4M7 13L5.4 5M7 13L4.7 15.3C4.3 15.7 4.6 16.5 5.1 16.5H17M17 13V17C17 17.5523 17.4477 18 18 18C18.5523 18 19 17.5523 19 17C19 16.4477 18.5523 16 18 16C17.4477 16 17 16.4477 17 17ZM9 19C9 19.5523 8.55228 20 8 20C7.44772 20 7 19.5523 7 19C7 18.4477 7.44772 18 8 18C8.55228 18 9 18.4477 9 19Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
}

/* 个人中心图标 - 用户 */
.nav-icon.icon-profile::before {
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20 21V19C20 17.9391 19.5786 16.9217 18.8284 16.1716C18.0783 15.4214 17.0609 15 16 15H8C6.93913 15 5.92172 15.4214 5.17157 16.1716C4.42143 16.9217 4 17.9391 4 19V21M16 7C16 9.20914 14.2091 11 12 11C9.79086 11 8 9.20914 8 7C8 4.79086 9.79086 3 12 3C14.2091 3 16 4.79086 16 7Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
}

/* 激活状态的图标颜色 */
.nav-item.active .nav-icon.icon-home::before,
.nav-item.active .nav-icon.icon-shop::before,
.nav-item.active .nav-icon.icon-cart::before,
.nav-item.active .nav-icon.icon-profile::before {
    background-color: #667eea;
}

/* ==================== 个人中心菜单简约图标 ==================== */

/* 菜单图标基础样式 */
.menu-icon.icon-health,
.menu-icon.icon-address,
.menu-icon.icon-favorite,
.menu-icon.icon-orders,
.menu-icon.icon-recommend,
.menu-icon.icon-settings {
    width: 20px;
    height: 20px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0; /* 隐藏emoji文字 */
}

.menu-icon.icon-health::before,
.menu-icon.icon-address::before,
.menu-icon.icon-favorite::before,
.menu-icon.icon-orders::before,
.menu-icon.icon-recommend::before,
.menu-icon.icon-settings::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #667eea;
    transition: background-color 0.3s ease;
}

/* 健康信息图标 */
.menu-icon.icon-health::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 12H18L15 21L9 3L6 12H2' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M22 12H18L15 21L9 3L6 12H2' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* 地址图标 */
.menu-icon.icon-address::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10Z' stroke='white' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='3' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M21 10C21 17 12 23 12 23C12 23 3 17 3 10C3 5.02944 7.02944 1 12 1C16.9706 1 21 5.02944 21 10Z' stroke='white' stroke-width='2'/%3E%3Ccircle cx='12' cy='10' r='3' stroke='white' stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* 收藏图标 */
.menu-icon.icon-favorite::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.5783 8.50903 2.9987 7.05 2.9987C5.59096 2.9987 4.19169 3.5783 3.16 4.61C2.1283 5.6417 1.5487 7.04097 1.5487 8.5C1.5487 9.95903 2.1283 11.3583 3.16 12.39L12 21.23L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3095 9.93789 22.4518 9.22248 22.4518 8.5C22.4518 7.77752 22.3095 7.06211 22.0329 6.39467C21.7563 5.72723 21.351 5.1208 20.84 4.61V4.61Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 2.99817C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.5783 8.50903 2.9987 7.05 2.9987C5.59096 2.9987 4.19169 3.5783 3.16 4.61C2.1283 5.6417 1.5487 7.04097 1.5487 8.5C1.5487 9.95903 2.1283 11.3583 3.16 12.39L12 21.23L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3095 9.93789 22.4518 9.22248 22.4518 8.5C22.4518 7.77752 22.3095 7.06211 22.0329 6.39467C21.7563 5.72723 21.351 5.1208 20.84 4.61V4.61Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* 订单图标 */
.menu-icon.icon-orders::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 4H18C19.1046 4 20 4.89543 20 6V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V6C4 4.89543 4.89543 4 6 4H8M16 4C16 2.89543 15.1046 2 14 2H10C8.89543 2 8 2.89543 8 4M16 4C16 5.10457 15.1046 6 14 6H10C8.89543 6 8 5.10457 8 4M9 12L11 14L15 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M16 4H18C19.1046 4 20 4.89543 20 6V20C20 21.1046 19.1046 22 18 22H6C4.89543 22 4 21.1046 4 20V6C4 4.89543 4.89543 4 6 4H8M16 4C16 2.89543 15.1046 2 14 2H10C8.89543 2 8 2.89543 8 4M16 4C16 5.10457 15.1046 6 14 6H10C8.89543 6 8 5.10457 8 4M9 12L11 14L15 10' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* 推荐图标 */
.menu-icon.icon-recommend::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.77L5.82 21L7 14L2 9L8.91 8.26L12 2Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 2L15.09 8.26L22 9L17 14L18.18 21L12 17.77L5.82 21L7 14L2 9L8.91 8.26L12 2Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

/* 设置图标 */
.menu-icon.icon-settings::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.2579 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.01127 9.77251C4.28053 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 15C13.6569 15 15 13.6569 15 12C15 10.3431 13.6569 9 12 9C10.3431 9 9 10.3431 9 12C9 13.6569 10.3431 15 12 15Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M19.4 15C19.2669 15.3016 19.2272 15.6362 19.286 15.9606C19.3448 16.285 19.4995 16.5843 19.73 16.82L19.79 16.88C19.976 17.0657 20.1235 17.2863 20.2241 17.5291C20.3248 17.7719 20.3766 18.0322 20.3766 18.295C20.3766 18.5578 20.3248 18.8181 20.2241 19.0609C20.1235 19.3037 19.976 19.5243 19.79 19.71C19.6043 19.896 19.3837 20.0435 19.1409 20.1441C18.8981 20.2448 18.6378 20.2966 18.375 20.2966C18.1122 20.2966 17.8519 20.2448 17.6091 20.1441C17.3663 20.0435 17.1457 19.896 16.96 19.71L16.9 19.65C16.6643 19.4195 16.365 19.2648 16.0406 19.206C15.7162 19.1472 15.3816 19.1869 15.08 19.32C14.7842 19.4468 14.532 19.6572 14.3543 19.9255C14.1766 20.1938 14.0813 20.5082 14.08 20.83V21C14.08 21.5304 13.8693 22.0391 13.4942 22.4142C13.1191 22.7893 12.6104 23 12.08 23C11.5496 23 11.0409 22.7893 10.6658 22.4142C10.2907 22.0391 10.08 21.5304 10.08 21V20.91C10.0723 20.579 9.96512 20.2579 9.77251 19.9887C9.5799 19.7194 9.31074 19.5143 9 19.4C8.69838 19.2669 8.36381 19.2272 8.03941 19.286C7.71502 19.3448 7.41568 19.4995 7.18 19.73L7.12 19.79C6.93425 19.976 6.71368 20.1235 6.47088 20.2241C6.22808 20.3248 5.96783 20.3766 5.705 20.3766C5.44217 20.3766 5.18192 20.3248 4.93912 20.2241C4.69632 20.1235 4.47575 19.976 4.29 19.79C4.10405 19.6043 3.95653 19.3837 3.85588 19.1409C3.75523 18.8981 3.70343 18.6378 3.70343 18.375C3.70343 18.1122 3.75523 17.8519 3.85588 17.6091C3.95653 17.3663 4.10405 17.1457 4.29 16.96L4.35 16.9C4.58054 16.6643 4.73519 16.365 4.794 16.0406C4.85282 15.7162 4.81312 15.3816 4.68 15.08C4.55324 14.7842 4.34276 14.532 4.07447 14.3543C3.80618 14.1766 3.49179 14.0813 3.17 14.08H3C2.46957 14.08 1.96086 13.8693 1.58579 13.4942C1.21071 13.1191 1 12.6104 1 12.08C1 11.5496 1.21071 11.0409 1.58579 10.6658C1.96086 10.2907 2.46957 10.08 3 10.08H3.09C3.42099 10.0723 3.742 9.96512 4.01127 9.77251C4.28053 9.5799 4.48572 9.31074 4.6 9C4.73312 8.69838 4.77282 8.36381 4.714 8.03941C4.65519 7.71502 4.50054 7.41568 4.27 7.18L4.21 7.12C4.02405 6.93425 3.87653 6.71368 3.77588 6.47088C3.67523 6.22808 3.62343 5.96783 3.62343 5.705C3.62343 5.44217 3.67523 5.18192 3.77588 4.93912C3.87653 4.69632 4.02405 4.47575 4.21 4.29C4.39575 4.10405 4.61632 3.95653 4.85912 3.85588C5.10192 3.75523 5.36217 3.70343 5.625 3.70343C5.88783 3.70343 6.14808 3.75523 6.39088 3.85588C6.63368 3.95653 6.85425 4.10405 7.04 4.29L7.1 4.35C7.33568 4.58054 7.63502 4.73519 7.95941 4.794C8.28381 4.85282 8.61838 4.81312 8.92 4.68H9C9.29577 4.55324 9.54802 4.34276 9.72569 4.07447C9.90337 3.80618 9.99872 3.49179 10 3.17V3C10 2.46957 10.2107 1.96086 10.5858 1.58579C10.9609 1.21071 11.4696 1 12 1C12.5304 1 13.0391 1.21071 13.4142 1.58579C13.7893 1.96086 14 2.46957 14 3V3.09C14.0013 3.41179 14.0966 3.72618 14.2743 3.99447C14.452 4.26276 14.7042 4.47324 15 4.6C15.3016 4.73312 15.6362 4.77282 15.9606 4.714C16.285 4.65519 16.5843 4.50054 16.82 4.27L16.88 4.21C17.0657 4.02405 17.2863 3.87653 17.5291 3.77588C17.7719 3.67523 18.0322 3.62343 18.295 3.62343C18.5578 3.62343 18.8181 3.67523 19.0609 3.77588C19.3037 3.87653 19.5243 4.02405 19.71 4.21C19.896 4.39575 20.0435 4.61632 20.1441 4.85912C20.2448 5.10192 20.2966 5.36217 20.2966 5.625C20.2966 5.88783 20.2448 6.14808 20.1441 6.39088C20.0435 6.63368 19.896 6.85425 19.71 7.04L19.65 7.1C19.4195 7.33568 19.2648 7.63502 19.206 7.95941C19.1472 8.28381 19.1869 8.61838 19.32 8.92V9C19.4468 9.29577 19.6572 9.54802 19.9255 9.72569C20.1938 9.90337 20.5082 9.99872 20.83 10H21C21.5304 10 22.0391 10.2107 22.4142 10.5858C22.7893 10.9609 23 11.4696 23 12C23 12.5304 22.7893 13.0391 22.4142 13.4142C22.0391 13.7893 21.5304 14 21 14H20.91C20.5882 14.0013 20.2738 14.0966 20.0055 14.2743C19.7372 14.452 19.5268 14.7042 19.4 15Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
}

.nav-text {
    font-size: 11px;
    color: #666;
}

.nav-item.active .nav-text {
    color: #667eea;
}

/* 购物车图标容器和小红点 */
.nav-icon-wrapper {
    position: relative;
    display: inline-block;
}

.cart-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4757;
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 12px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 1;
    animation: cartBadgePulse 0.3s ease-in-out;
}

@keyframes cartBadgePulse {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

/* 健康信息表单 */
.health-form {
    background: white;
    border-radius: 15px;
    padding: 25px;
    margin-bottom: 20px;
    box-shadow: 0 2px 15px rgba(0,0,0,0.08);
}

.form-group {
    margin-bottom: 25px;
    position: relative;
}

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

.form-input, .form-select {
    width: 100%;
    padding: 15px;
    border: 2px solid #e1e5e9;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s ease;
    background: #fafbfc;
}

.form-input:focus, .form-select:focus {
    border-color: #667eea;
    background: white;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
    transform: translateY(-1px);
}

.form-input::placeholder {
    color: #a0a6b1;
    font-style: italic;
}

.submit-btn {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 18px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.3s ease;
    margin-top: 15px;
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
    letter-spacing: 0.5px;
}

.submit-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}

/* 登录页面样式 */
.login-container {
    width: 100%;
    height: 100vh;
    padding: 60px 30px 30px;
    background: white;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.login-title {
    text-align: center;
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 15px;
    margin-top: 40px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.login-subtitle {
    text-align: center;
    font-size: 16px;
    color: #999;
    margin-bottom: 60px;
}

.country-phone-group {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
}

.country-code {
    width: 85px;
    padding: 18px 12px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
    background: white;
}

.country-code:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.country-phone-group .phone-input {
    flex: 1;
    padding: 18px 20px;
}

.send-code-btn-full {
    width: 100%;
    padding: 18px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s;
    margin-bottom: 30px;
}

.send-code-btn-full:hover {
    transform: translateY(-2px);
}

.send-code-btn-full:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.password-login {
    text-align: center;
    color: #667eea;
    cursor: pointer;
    font-size: 16px;
    margin: 30px 0;
    padding: 18px;
    background: #f8f8f8;
    border-radius: 12px;
    transition: background 0.3s;
}

.password-login:hover {
    background: #f0f0f0;
}

.agreement-section {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: auto;
    margin-bottom: 40px;
    font-size: 14px;
    color: #666;
    padding: 0 5px;
}

.agreement-section input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
}

.agreement-section label {
    cursor: pointer;
    line-height: 1.5;
}

.phone-input-group {
    position: relative;
    margin-bottom: 20px;
}

.phone-input {
    width: 100%;
    padding: 15px 20px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
}

.phone-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.code-input-group {
    display: flex;
    gap: 10px;
    margin-bottom: 30px;
}

.code-input {
    flex: 1;
    padding: 15px 20px;
    border: 2px solid #f0f0f0;
    border-radius: 12px;
    font-size: 16px;
    outline: none;
    transition: all 0.3s;
}

.code-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}

.send-code-btn {
    padding: 15px 16px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.3s;
    min-width: 80px;
    max-width: 100px;
    flex-shrink: 0;
}

.send-code-btn:hover {
    transform: translateY(-2px);
}

.send-code-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.login-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.3s;
    margin-bottom: 20px;
}

.login-btn:hover {
    transform: translateY(-2px);
}

.register-link {
    text-align: center;
    color: #667eea;
    cursor: pointer;
    font-size: 14px;
    text-decoration: underline;
}

/* 注册页面样式 */
.register-container {
    max-width: 380px;
    margin: 20px auto;
    padding: 0;
    background: transparent;
    border-radius: 0;
    box-shadow: none;
}

.register-header {
    text-align: center;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 40px 30px;
    border-radius: 20px 20px 0 0;
    margin-bottom: 0;
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

.register-icon {
    font-size: 48px;
    margin-bottom: 15px;
    opacity: 0.9;
}

.register-title {
    font-size: 28px;
    font-weight: bold;
    margin-bottom: 8px;
    color: white;
    background: none;
    -webkit-background-clip: initial;
    -webkit-text-fill-color: initial;
    background-clip: initial;
}

.register-subtitle {
    font-size: 14px;
    opacity: 0.9;
    color: white;
}

#registerForm {
    background: white;
    padding: 30px;
    border-radius: 0 0 20px 20px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
}

.form-row {
    display: flex;
    gap: 15px;
    margin-bottom: 25px;
}

.form-row-item {
    flex: 1;
}

.form-row .form-input, .form-row .form-select {
    margin-bottom: 0;
}

.readonly-input {
    background-color: #f8f9fa !important;
    color: #6c757d;
    cursor: not-allowed;
}

.back-btn {
    background: #f0f0f0;
    color: #666;
    border: none;
    padding: 10px 20px;
    border-radius: 8px;
    cursor: pointer;
    margin-bottom: 20px;
    font-size: 14px;
}

/* 推荐消息样式 - 弹窗模式 */
.modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease;
}

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(2px);
}

.modal-content {
    position: relative;
    width: 90%;
    max-width: 380px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    animation: slideUp 0.4s ease;
    overflow: hidden;
}

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

.modal-close {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 50%;
    font-size: 20px;
    color: #666;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    z-index: 1;
}

.modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

.modal-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    padding: 35px 20px 25px;
    text-align: center;
    color: white;
}

.modal-icon {
    font-size: 48px;
    margin-bottom: 10px;
    animation: bounce 1s ease infinite;
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.modal-title {
    font-size: 20px;
    font-weight: bold;
}

.modal-body {
    padding: 25px 20px;
    max-height: 400px;
    overflow-y: auto;
}

.modal-description {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    margin-bottom: 20px;
    text-align: center;
}

.recommendation-products {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.recommended-product {
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    padding: 15px;
    border-radius: 12px;
    font-size: 14px;
    line-height: 1.5;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s;
}

.recommended-product:hover {
    transform: translateX(5px);
}

.recommended-product small {
    display: block;
    margin-top: 5px;
    color: #666;
    font-size: 12px;
}

.modal-footer {
    display: flex;
    gap: 10px;
    padding: 15px 20px 20px;
    border-top: 1px solid #f0f0f0;
}

.modal-btn {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.modal-btn-secondary {
    background: #f5f5f5;
    color: #666;
}

.modal-btn-secondary:hover {
    background: #e8e8e8;
}

.modal-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.modal-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}



/* 商品详情页面样式 */
.product-detail-header {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    padding: 30px 20px;
    text-align: center;
    color: white;
    margin: -20px -20px 20px -20px;
}

.product-detail-image {
    font-size: 60px;
    margin-bottom: 15px;
    animation: bounce 2s ease infinite;
}

.product-detail-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 8px;
}

.product-detail-subtitle {
    font-size: 14px;
    opacity: 0.9;
}

.detail-section {
    padding: 20px 0;
    border-bottom: 1px solid #f0f0f0;
}

.detail-section:last-child {
    border-bottom: none;
}

.detail-section h3 {
    font-size: 18px;
    font-weight: bold;
    color: #333;
    margin: 0 0 15px 0;
    display: flex;
    align-items: center;
}

.detail-section h3:before {
    content: '';
    width: 4px;
    height: 18px;
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    margin-right: 10px;
    border-radius: 2px;
}

.detail-section p {
    font-size: 14px;
    line-height: 1.6;
    color: #666;
    margin: 0;
}

/* 规格网格 */
.spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.spec-item {
    background: #f8f9fa;
    padding: 12px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.spec-label {
    font-size: 13px;
    color: #666;
}

.spec-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* 营养成分表 */
.nutrition-table {
    background: #f8f9fa;
    border-radius: 8px;
    overflow: hidden;
}

.nutrition-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 15px;
    border-bottom: 1px solid #e9ecef;
}

.nutrition-row:last-child {
    border-bottom: none;
}

.nutrition-label {
    font-size: 14px;
    color: #666;
}

.nutrition-value {
    font-size: 14px;
    font-weight: 600;
    color: #333;
}

/* 产品特点列表 */
.features-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.feature-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.feature-icon {
    font-size: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.feature-content strong {
    font-size: 15px;
    color: #333;
    display: block;
    margin-bottom: 4px;
}

.feature-content p {
    font-size: 13px;
    color: #666;
    margin: 0;
    line-height: 1.4;
}

/* 适用人群标签 */
.suitable-groups {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.group-tag {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 500;
}

.group-note {
    font-size: 13px;
    color: #666;
    margin: 0;
    font-style: italic;
}

/* 使用建议 */
.usage-tips {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tip-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.tip-number {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    flex-shrink: 0;
}

.tip-text {
    font-size: 14px;
    color: #666;
    line-height: 1.5;
    margin-top: 2px;
}

/* 商品详情页面底部按钮 */
.product-detail-footer {
    position: fixed;
    bottom: 70px;
    left: 20px;
    right: 20px;
    max-width: 400px;
    margin: 0 auto;
    background: white;
    padding: 15px 20px;
    border-top: 1px solid #f0f0f0;
    border-radius: 12px 12px 0 0;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 100;
    box-sizing: border-box;
}

.detail-btn {
    width: 100%;
    max-width: 100%;
    padding: 12px 16px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.detail-btn-primary {
    background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    color: white;
}

.detail-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(79, 172, 254, 0.4);
}

/* 商品卡片悬停效果 */
.product-card {
    cursor: pointer;
    transition: all 0.3s ease;
}

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

/* 个人信息页面样式 */
.user-info-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 30px 20px;
    text-align: center;
    border-radius: 15px;
    margin-bottom: 20px;
}

.user-avatar {
    font-size: 60px;
    margin-bottom: 10px;
}

.user-name {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.user-phone {
    font-size: 14px;
    opacity: 0.9;
}

.user-info-sections {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 30px;
}

.info-section {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.section-title {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
    padding-bottom: 8px;
    border-bottom: 2px solid #f0f0f0;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f8f8f8;
}

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

.info-label {
    font-size: 14px;
    color: #666;
    font-weight: 500;
}

.info-value {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.user-info-actions {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.action-btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.action-btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-icon {
    font-size: 16px;
}

/* 设置页面退出登录样式 */
.logout-item {
    border-top: 1px solid #f0f0f0;
    margin-top: 10px;
    padding-top: 20px;
}

.logout-item .setting-title {
    color: #ff6b6b !important;
    font-weight: 600;
}

/* 个人中心头像点击样式 */
.profile-header {
    transition: all 0.3s ease;
}

.profile-header:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}

/* 功能性CSS类 - 代码质量优化 */
.hidden {
    display: none;
}

.login-section {
    text-align: center;
    padding: 20px;
}

.login-button-primary {
    width: 80%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.login-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.register-button-primary {
    width: 80%;
    padding: 15px;
    background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-bottom: 15px;
    transition: all 0.3s ease;
}

.register-button-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}

.login-section-text {
    color: #999;
    font-size: 14px;
}

.register-link {
    color: #667eea;
    cursor: pointer;
    text-decoration: underline;
    transition: color 0.3s ease;
}

.register-link:hover {
    color: #5a67d8;
}

.form-row-item {
    margin-bottom: 0;
}

.readonly-input {
    background-color: #f5f5f5;
}

.logout-text {
    color: #ff6b6b !important;
}

.search-icon {
    font-size: 16px;
    color: #999;
}

.clickable {
    cursor: pointer;
}

/* 收藏功能样式 */
.favorite-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255, 255, 255, 0.8);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    z-index: 10;
    font-size: 0; /* 隐藏emoji文字 */
}

.favorite-btn::before {
    content: '';
    width: 16px;
    height: 16px;
    background-color: #999;
    transition: background-color 0.3s ease;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 3C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.5783 8.50903 2.9987 7.05 3C5.59096 2.9987 4.19169 3.5783 3.16 4.61C2.1283 5.6417 1.5487 7.041 1.55 8.5C1.5487 9.959 2.1283 11.3583 3.16 12.39L12 21.23L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3095 9.93789 22.4518 9.22248 22.45 8.5C22.4518 7.77752 22.3095 7.06211 22.0329 6.39467C21.7563 5.72723 21.351 5.1208 20.84 4.61V4.61Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 3C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.5783 8.50903 2.9987 7.05 3C5.59096 2.9987 4.19169 3.5783 3.16 4.61C2.1283 5.6417 1.5487 7.041 1.55 8.5C1.5487 9.959 2.1283 11.3583 3.16 12.39L12 21.23L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3095 9.93789 22.4518 9.22248 22.45 8.5C22.4518 7.77752 22.3095 7.06211 22.0329 6.39467C21.7563 5.72723 21.351 5.1208 20.84 4.61V4.61Z' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
}

.favorite-btn:hover {
    transform: scale(1.05);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.favorite-btn:hover::before {
    background-color: #667eea;
}

.favorite-btn.favorited::before {
    background-color: #ff4757;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 3C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.5783 8.50903 2.9987 7.05 3C5.59096 2.9987 4.19169 3.5783 3.16 4.61C2.1283 5.6417 1.5487 7.041 1.55 8.5C1.5487 9.959 2.1283 11.3583 3.16 12.39L12 21.23L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3095 9.93789 22.4518 9.22248 22.45 8.5C22.4518 7.77752 22.3095 7.06211 22.0329 6.39467C21.7563 5.72723 21.351 5.1208 20.84 4.61V4.61Z' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: contain;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M20.84 4.61C20.3292 4.099 19.7228 3.69364 19.0554 3.41708C18.3879 3.14052 17.6725 2.99817 16.95 3C16.2275 2.99817 15.5121 3.14052 14.8446 3.41708C14.1772 3.69364 13.5708 4.099 13.06 4.61L12 5.67L10.94 4.61C9.9083 3.5783 8.50903 2.9987 7.05 3C5.59096 2.9987 4.19169 3.5783 3.16 4.61C2.1283 5.6417 1.5487 7.041 1.55 8.5C1.5487 9.959 2.1283 11.3583 3.16 12.39L12 21.23L20.84 12.39C21.351 11.8792 21.7563 11.2728 22.0329 10.6053C22.3095 9.93789 22.4518 9.22248 22.45 8.5C22.4518 7.77752 22.3095 7.06211 22.0329 6.39467C21.7563 5.72723 21.351 5.1208 20.84 4.61V4.61Z' fill='white' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: contain;
}

.favorite-btn.favorited {
    animation: favoriteAdded 0.6s ease;
}

@keyframes favoriteAdded {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* 商品卡片需要相对定位以支持收藏按钮 */
.product-card {
    position: relative;
}

/* 增强的提示样式 */
.enhanced-toast {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 15px 25px;
    border-radius: 25px;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 16px;
    font-weight: 500;
    z-index: 10000;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: all 0.3s ease;
    backdrop-filter: blur(10px);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

.enhanced-toast.show {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.toast-icon {
    font-size: 20px;
}

.toast-message {
    white-space: nowrap;
}

/* 收藏页面样式 */
.favorites-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 25px 20px;
    text-align: center;
    border-radius: 15px;
    margin-bottom: 20px;
}

.favorites-title {
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 5px;
}

.favorites-count {
    font-size: 14px;
    opacity: 0.9;
}

.favorites-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.favorite-item {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.3s ease;
}

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

.favorite-item-icon {
    font-size: 40px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 12px;
}

.favorite-item-info {
    flex: 1;
}

.favorite-item-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.favorite-item-specs {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.favorite-item-price {
    font-size: 18px;
    font-weight: 600;
    color: #667eea;
}

.favorite-item-actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.favorite-action-btn {
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.favorite-action-btn.primary {
    background: #667eea;
    color: white;
}

.favorite-action-btn.primary:hover {
    background: #5a67d8;
}

.favorite-action-btn.secondary {
    background: #f8f9fa;
    color: #666;
    border: 1px solid #e9ecef;
}

.favorite-action-btn.secondary:hover {
    background: #e9ecef;
}

/* 收藏空状态样式 */
.favorites-empty {
    text-align: center;
    padding: 60px 20px;
    color: #666;
}

.empty-icon {
    font-size: 80px;
    margin-bottom: 20px;
    opacity: 0.5;
}

.empty-text {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 10px;
}

.empty-desc {
    font-size: 14px;
    margin-bottom: 30px;
    opacity: 0.8;
}

.empty-action-btn {
    padding: 12px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.empty-action-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* 结算页面样式 */
.checkout-section {
    background: white;
    border-radius: 12px;
    margin-bottom: 15px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

.section-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px;
    background: #f8f9fa;
    border-bottom: 1px solid #e9ecef;
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.section-icon {
    font-size: 18px;
    margin-right: 8px;
}

.add-address-btn {
    padding: 6px 12px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 6px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.add-address-btn:hover {
    background: #5a67d8;
}

.add-address-btn.primary {
    padding: 10px 20px;
    font-size: 14px;
    border-radius: 8px;
}

/* 商品确认区域 */
.checkout-products {
    padding: 20px;
}

.checkout-product {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px 0;
    border-bottom: 1px solid #f0f0f0;
}

.checkout-product:last-child {
    border-bottom: none;
}

.checkout-product-icon {
    font-size: 40px;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f8f9fa;
    border-radius: 12px;
}

.checkout-product-info {
    flex: 1;
}

.checkout-product-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.checkout-product-specs {
    font-size: 12px;
    color: #666;
    margin-bottom: 5px;
}

.checkout-product-quantity {
    font-size: 14px;
    color: #666;
}

.checkout-product-price {
    font-size: 18px;
    font-weight: 600;
    color: #667eea;
}

/* 地址选择区域 */
.address-selector {
    padding: 20px;
}

.no-address {
    text-align: center;
    padding: 40px 20px;
    color: #666;
}

.no-address-text {
    font-size: 16px;
    margin-bottom: 20px;
}

.selected-address {
    border: 2px solid #667eea;
    border-radius: 12px;
    padding: 20px;
    background: #f8f9ff;
}

.address-info {
    margin-bottom: 10px;
}

.address-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 5px;
}

.address-phone {
    font-size: 14px;
    color: #666;
    margin-bottom: 10px;
}

.address-detail {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
}

.address-actions {
    margin-top: 15px;
    display: flex;
    gap: 10px;
}

.address-action-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.address-action-btn:hover {
    background: #f8f9fa;
}

.address-action-btn.primary {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

/* 支付方式区域 */
.payment-methods {
    padding: 20px;
}

.payment-method {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border: 2px solid #e9ecef;
    border-radius: 12px;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.payment-method:last-child {
    margin-bottom: 0;
}

.payment-method:hover {
    border-color: #667eea;
    background: #f8f9ff;
}

.payment-method.active {
    border-color: #667eea;
    background: #f8f9ff;
}

.payment-icon {
    font-size: 24px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.payment-info {
    flex: 1;
}

.payment-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 3px;
}

.payment-desc {
    font-size: 12px;
    color: #666;
}

.payment-radio {
    font-size: 20px;
    color: #667eea;
}

/* 费用明细区域 */
.price-details {
    padding: 20px;
}

.price-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #f0f0f0;
    font-size: 14px;
}

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

.price-item.total {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    padding-top: 15px;
    border-top: 2px solid #e9ecef;
}

/* 结算底部操作栏 */
.checkout-footer {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 414px;
    background: white;
    border-top: 1px solid #eee;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.checkout-total {
    display: flex;
    align-items: center;
    gap: 5px;
}

.total-label {
    font-size: 14px;
    color: #666;
}

.total-price {
    font-size: 20px;
    font-weight: 600;
    color: #ff6b6b;
}

.submit-order-btn {
    padding: 12px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.submit-order-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.submit-order-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* 地址管理页面样式 */
.address-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.address-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border: 2px solid transparent;
    transition: all 0.3s ease;
}

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

.address-item.default {
    border-color: #667eea;
    background: #f8f9ff;
}

.address-item.selected {
    border-color: #667eea;
    background: #f8f9ff;
}

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

.address-name-phone {
    display: flex;
    align-items: center;
    gap: 15px;
}

.address-name {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.address-phone {
    font-size: 14px;
    color: #666;
}

.address-tags {
    display: flex;
    gap: 8px;
}

.address-tag {
    padding: 2px 8px;
    background: #667eea;
    color: white;
    border-radius: 4px;
    font-size: 10px;
    font-weight: 500;
}

.address-tag.default {
    background: #ff6b6b;
}

.address-detail {
    font-size: 14px;
    color: #333;
    line-height: 1.5;
    margin-bottom: 15px;
}

.address-actions {
    display: flex;
    gap: 10px;
}

.address-action-btn {
    padding: 6px 12px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.address-action-btn:hover {
    background: #f8f9fa;
}

.address-action-btn.primary {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

.address-action-btn.danger {
    background: #ff6b6b;
    color: white;
    border-color: #ff6b6b;
}

.add-new-address-btn {
    width: 100%;
    padding: 15px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.add-new-address-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

.btn-icon {
    font-size: 18px;
}

/* 地址表单样式 */
.region-selector {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
}

.form-textarea {
    width: 100%;
    min-height: 80px;
    padding: 12px;
    border: 2px solid #e9ecef;
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    transition: border-color 0.3s ease;
}

.form-textarea:focus {
    outline: none;
    border-color: #667eea;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: #667eea;
}

.checkbox-text {
    user-select: none;
}

.form-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.form-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 8px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.form-btn.secondary {
    background: #f8f9fa;
    color: #666;
    border: 1px solid #e9ecef;
}

.form-btn.secondary:hover {
    background: #e9ecef;
}

.form-btn.primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
}

.form-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}

/* 二级页面样式 */
.page-content {
    padding: 20px;
    padding-bottom: 80px;
}

/* 订单页面样式 */
.order-tabs {
    display: flex;
    background: #f8f8f8;
    border-radius: 25px;
    padding: 5px;
    margin-bottom: 20px;
}

.orders-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.order-item {
    background: white;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
}

.order-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.order-id {
    font-size: 14px;
    color: #666;
}

.order-status {
    padding: 4px 12px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
}

.order-status.pending {
    background: #fff3cd;
    color: #856404;
}

.order-status.shipped {
    background: #d4edda;
    color: #155724;
}

.order-status.completed {
    background: #cce7ff;
    color: #004085;
}

.order-products {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 15px;
}

.order-product {
    display: flex;
    align-items: center;
    gap: 12px;
}

.order-product-icon {
    width: 40px;
    height: 40px;
    background: #f5f5f5;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
}

.order-product-info {
    flex: 1;
}

.order-product-name {
    font-size: 14px;
    color: #333;
    margin-bottom: 2px;
}

.order-product-spec {
    font-size: 12px;
    color: #999;
}

.order-product-price {
    font-size: 16px;
    color: #f5576c;
    font-weight: 600;
}

.order-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.order-total {
    font-size: 16px;
    font-weight: 600;
    color: #333;
}

.order-actions {
    display: flex;
    gap: 8px;
}

.order-btn {
    padding: 6px 16px;
    border: 1px solid #ddd;
    border-radius: 6px;
    background: white;
    color: #666;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.order-btn.primary {
    background: #667eea;
    color: white;
    border-color: #667eea;
}

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

/* 购物车页面样式 */
.cart-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-bottom: 20px;
}

.cart-item {
    background: white;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    border: 1px solid #eee;
    margin-bottom: 15px;
    transition: transform 0.2s ease;
}

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

.cart-item-main {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 10px;
}

.cart-item-icon {
    width: 60px;
    height: 60px;
    background: linear-gradient(45deg, #f0f0f0, #e0e0e0);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    color: #999;
    flex-shrink: 0;
}

.cart-item-info {
    flex: 1;
    min-width: 0;
}

.cart-item-name {
    font-size: 15px;
    color: #333;
    margin-bottom: 5px;
    font-weight: 600;
    line-height: 1.3;
}

.cart-item-specs {
    font-size: 12px;
    color: #999;
    margin-bottom: 5px;
}

.cart-item-price {
    font-size: 16px;
    color: #f5576c;
    font-weight: 600;
}

.cart-item-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.cart-item-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: 10px;
    border-top: 1px solid #f0f0f0;
}

.cart-item-subtotal {
    font-size: 14px;
    color: #333;
    font-weight: 600;
}

.quantity-controls {
    display: flex;
    align-items: center;
    gap: 10px;
}

.quantity-btn {
    width: 28px;
    height: 28px;
    border: 1px solid #ddd;
    border-radius: 50%;
    background: white;
    color: #666;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.quantity-btn:hover {
    background: #667eea;
    color: white;
    border-color: #667eea;
    transform: scale(1.1);
}

.quantity-btn:disabled {
    background: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
    border-color: #e0e0e0;
    opacity: 1;
}

.quantity-btn.disabled {
    background: #f5f5f5;
    color: #ccc;
    cursor: not-allowed;
    border-color: #e0e0e0;
}

.quantity-input {
    width: 50px;
    height: 32px;
    text-align: center;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 4px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s;
}

.quantity-input:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 2px rgba(102, 126, 234, 0.2);
}

/* 简约红色删除按钮 - 与底部菜单风格一致 */
.remove-btn {
    width: 28px;
    height: 28px;
    border: none;
    background: white;
    border: 1px solid #e74c3c;
    border-radius: 50%;
    cursor: pointer;
    font-size: 0; /* 隐藏emoji文字 */
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    position: relative;
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.15);
}

.remove-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #e74c3c;
    transition: background-color 0.3s ease;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 6H5H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V6H19ZM10 11V17M14 11V17' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    -webkit-mask-size: 16px 16px;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M3 6H5H21M8 6V4C8 3.44772 8.44772 3 9 3H15C15.5523 3 16 3.44772 16 4V6M19 6V20C19 21.1046 18.1046 22 17 22H7C5.89543 22 5 21.1046 5 20V6H19ZM10 11V17M14 11V17' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center;
    mask-size: 16px 16px;
}

.remove-btn:hover {
    background: #fff5f5;
    border-color: #c0392b;
    transform: scale(1.1);
    box-shadow: 0 4px 12px rgba(231, 76, 60, 0.25);
}

.remove-btn:hover::before {
    background-color: #c0392b;
}

.remove-btn:active {
    transform: scale(0.95);
    box-shadow: 0 2px 6px rgba(231, 76, 60, 0.2);
}

/* 空购物车样式完善 */
.empty-cart-desc {
    font-size: 14px;
    color: #999;
    margin: 10px 0 20px;
    line-height: 1.5;
}

/* 购物车动画效果 */
@keyframes quantityChange {
    0% { transform: scale(1); }
    50% { transform: scale(1.1); background-color: #e3f2fd; }
    100% { transform: scale(1); }
}

/* 库存状态标签 */
.stock-label {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 10px;
    margin-left: 5px;
    font-weight: bold;
}

.stock-label.out-of-stock {
    background: #ffebee;
    color: #f44336;
}

.stock-label.low-stock {
    background: #fff3e0;
    color: #ff9800;
    animation: stockWarning 2s infinite;
}

.stock-label.limited-stock {
    background: #f3e5f5;
    color: #9c27b0;
}

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

.cart-footer {
    position: fixed;
    bottom: 70px;
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 414px;
    background: white;
    border-top: 1px solid #eee;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.1);
    z-index: 999;
}

.cart-total {
    font-size: 18px;
    font-weight: 600;
    color: #333;
}

.checkout-btn {
    padding: 12px 30px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
}

.checkout-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}

.checkout-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
    transform: none;
}

.empty-cart {
    text-align: center;
    padding: 60px 20px;
    color: #999;
}

.empty-cart-icon {
    font-size: 64px;
    margin-bottom: 20px;
}

.empty-cart-text {
    font-size: 16px;
    margin-bottom: 20px;
}

.shop-now-btn {
    padding: 12px 30px;
    background: #667eea;
    color: white;
    border: none;
    border-radius: 25px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

/* 设置页面样式 */
.settings-list {
    display: flex;
    flex-direction: column;
    gap: 1px;
    background: #f0f0f0;
    border-radius: 12px;
    overflow: hidden;
}

.setting-item {
    background: white;
    padding: 18px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    transition: background 0.3s;
}

.setting-item:hover {
    background: #f8f8f8;
}

.setting-info {
    flex: 1;
}

.setting-title {
    font-size: 16px;
    color: #333;
    margin-bottom: 4px;
}

.setting-desc {
    font-size: 13px;
    color: #666;
    line-height: 1.4;
}

.setting-toggle {
    display: flex;
    align-items: center;
}

.toggle-switch {
    position: relative;
    width: 44px;
    height: 24px;
    background: #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
}

.toggle-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    background: white;
    border-radius: 50%;
    transition: all 0.3s;
}

input[type="checkbox"]:checked + .toggle-switch {
    background: #667eea;
}

input[type="checkbox"]:checked + .toggle-switch::after {
    transform: translateX(20px);
}

input[type="checkbox"] {
    display: none;
}

.setting-arrow {
    color: #999;
    font-size: 16px;
}

/* 响应式设计 */
@media (max-width: 375px) {
    .products-grid {
        grid-template-columns: 1fr;
    }

    .features-grid {
        grid-template-columns: 1fr;
    }

    .login-container {
        padding: 40px 20px 30px;
    }

    .login-title {
        font-size: 24px;
        margin-top: 20px;
    }

    .login-subtitle {
        font-size: 14px;
        margin-bottom: 40px;
    }

    .country-phone-group {
        gap: 8px;
        margin-bottom: 25px;
    }

    .country-code {
        width: 75px;
        padding: 16px 10px;
        font-size: 15px;
    }

    .country-phone-group .phone-input {
        padding: 16px 18px;
        font-size: 15px;
    }

    .send-code-btn-full {
        padding: 16px;
        font-size: 15px;
        margin-bottom: 25px;
    }

    .password-login {
        padding: 16px;
        margin: 25px 0;
        font-size: 15px;
    }

    .agreement-section {
        font-size: 13px;
        margin-bottom: 30px;
    }

    .register-container {
        margin: 20px auto;
        padding: 20px;
    }

    .form-row {
        flex-direction: column;
        gap: 15px;
    }

    .modal-content {
        width: 95%;
    }

    .modal-header {
        padding: 30px 15px 20px;
    }

    .modal-icon {
        font-size: 40px;
    }

    .modal-title {
        font-size: 18px;
    }

    .modal-body {
        padding: 20px 15px;
    }

    .modal-description {
        font-size: 14px;
    }

    .recommended-product {
        padding: 12px;
        font-size: 13px;
    }

    .modal-footer {
        padding: 12px 15px 15px;
        flex-direction: column;
    }

    .modal-btn {
        width: 100%;
    }

    .nav-back-btn {
        left: 15px;
        padding: 6px 10px;
        font-size: 18px;
    }

    .nav-title {
        font-size: 16px;
    }
}

/* ==================== 浮动购物车按钮样式 ==================== */

/* 浮动购物车按钮基础样式 - 京东风格 */
.floating-cart-btn {
    position: fixed;
    bottom: 90px;
    right: 16px;
    width: 50px;
    height: 50px;
    background: #ffffff;
    border-radius: 50%;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    z-index: 1000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    -webkit-user-select: none;
    user-select: none;
    border: 1px solid #e5e5e5;
    outline: none;
}

.floating-cart-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
    border-color: #d5d5d5;
}

.floating-cart-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
    transition: all 0.1s;
}

/* 浮动按钮图标 - 京东风格 */
.floating-cart-icon {
    font-size: 22px;
    color: #666666;
    position: relative;
    z-index: 1;
}

/* 浮动按钮徽章 - 京东风格 */
.floating-cart-badge {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #e93b3d;
    color: white;
    border-radius: 50%;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    z-index: 2;
    border: 1px solid white;
    animation: floatingBadgePulse 0.3s ease-in-out;
}

/* 浮动按钮动画效果 */
@keyframes floatingBadgePulse {
    0% { transform: scale(0.3); opacity: 0; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 1; }
}

@keyframes floatingCartShow {
    0% {
        transform: translateY(20px) scale(0.8);
        opacity: 0;
    }
    100% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
}

@keyframes floatingCartHide {
    0% {
        transform: translateY(0) scale(1);
        opacity: 1;
    }
    100% {
        transform: translateY(20px) scale(0.8);
        opacity: 0;
    }
}

@keyframes floatingCartBounce {
    0% { transform: translateY(0) scale(1); }
    30% { transform: translateY(-8px) scale(1.1); }
    60% { transform: translateY(-4px) scale(1.05); }
    100% { transform: translateY(0) scale(1); }
}

/* 浮动按钮显示/隐藏状态 */
.floating-cart-btn.show {
    animation: floatingCartShow 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.floating-cart-btn.hide {
    animation: floatingCartHide 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.floating-cart-btn.bounce {
    animation: floatingCartBounce 0.6s ease-in-out;
}

/* 空购物车状态 - 京东风格 */
.floating-cart-btn.empty {
    background: #f5f5f5;
    border-color: #e0e0e0;
    opacity: 0.7;
}

.floating-cart-btn.empty .floating-cart-icon {
    color: #999999;
}

.floating-cart-btn.empty:hover {
    opacity: 1;
    background: #ffffff;
    border-color: #d5d5d5;
}

/* 响应式设计 - 京东风格 */
@media (max-width: 375px) {
    .floating-cart-btn {
        width: 46px;
        height: 46px;
        bottom: 85px;
        right: 12px;
    }

    .floating-cart-icon {
        font-size: 20px;
    }

    .floating-cart-badge {
        min-width: 16px;
        height: 16px;
        font-size: 10px;
        top: -5px;
        right: -5px;
    }
}

@media (min-width: 415px) {
    .floating-cart-btn {
        right: calc((100vw - 414px) / 2 + 16px);
    }
}

/* 隐藏状态 */
.floating-cart-btn.hidden {
    display: none;
}

/* 底部导航购物车图标动画 */
@keyframes cartIconBounce {
    0% { transform: scale(1); }
    30% { transform: scale(1.2); }
    60% { transform: scale(1.1); }
    100% { transform: scale(1); }
}

/* ==================== 商品购物车状态标记 ==================== */

/* 商品购物车状态标记 - 京东风格 */
.product-cart-status {
    position: absolute;
    top: 8px;
    left: 8px;
    background: #e93b3d;
    color: white;
    border-radius: 10px;
    padding: 3px 6px;
    font-size: 10px;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 3px;
    z-index: 15;
    box-shadow: 0 1px 4px rgba(233, 59, 61, 0.3);
    border: 1px solid white;
    animation: cartStatusShow 0.3s ease-out;
}

.product-cart-status .status-icon {
    font-size: 10px;
}

.product-cart-status .status-count {
    background: rgba(255, 255, 255, 0.25);
    border-radius: 6px;
    padding: 1px 3px;
    min-width: 14px;
    text-align: center;
    line-height: 1.1;
    font-size: 9px;
}

/* 商品购物车状态动画 */
@keyframes cartStatusShow {
    0% {
        transform: scale(0.5) translateY(-10px);
        opacity: 0;
    }
    100% {
        transform: scale(1) translateY(0);
        opacity: 1;
    }
}

@keyframes cartStatusUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

.product-cart-status.update {
    animation: cartStatusUpdate 0.4s ease-in-out;
}

/* 隐藏状态 */
.product-cart-status.hidden {
    display: none;
}

/* ==================== 京东风格商品购物车按钮 ==================== */

/* 商品按钮容器 */
.product-cart-container {
    width: 100%;
    height: 32px;
    position: relative;
    overflow: hidden;
}

/* 京东风格加号按钮 - 柔和版 */
.jd-add-btn {
    width: 100%;
    height: 32px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    color: #666666;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
    position: relative;
    overflow: hidden;
}

.jd-add-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.05), transparent);
    transition: left 0.5s;
}

.jd-add-btn:hover {
    background: #f8f9fa;
    border-color: #007bff;
    color: #007bff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 123, 255, 0.15);
}

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

.jd-add-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 123, 255, 0.1);
}

/* 京东风格数量控制器 - 柔和版 */
.jd-quantity-controller {
    width: 100%;
    height: 32px;
    background: #ffffff;
    border: 1px solid #e0e0e0;
    border-radius: 16px;
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.jd-quantity-controller.active {
    opacity: 1;
    transform: scale(1);
}

.jd-quantity-btn {
    width: 28px;
    height: 28px;
    background: #ffffff;
    border: none;
    color: #666666;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    margin: 2px;
    position: relative;
}

.jd-quantity-btn:hover {
    background: #f0f8ff;
    color: #007bff;
    transform: scale(1.1);
}

.jd-quantity-btn:active {
    transform: scale(0.95);
    background: #e6f3ff;
}

.jd-quantity-btn.disabled {
    color: #cccccc;
    cursor: not-allowed;
    opacity: 0.5;
}

.jd-quantity-btn.disabled:hover {
    background: #ffffff;
    transform: none;
}

.jd-quantity-display {
    flex: 1;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #007bff;
    min-width: 20px;
    background: #f0f8ff;
    border-radius: 8px;
    padding: 2px 4px;
    margin: 0 2px;
    transition: all 0.2s ease;
}

/* 按钮状态切换动画 */
@keyframes quantityUpdate {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); color: #e93b3d; }
    100% { transform: scale(1); }
}

/* 按钮容器状态 */
.product-cart-container.add-mode .jd-add-btn {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}

.product-cart-container.add-mode .jd-quantity-controller {
    opacity: 0;
    transform: scale(0.8);
    z-index: 1;
}

.product-cart-container.quantity-mode .jd-add-btn {
    opacity: 0;
    transform: scale(0.8);
    z-index: 1;
}

.product-cart-container.quantity-mode .jd-quantity-controller {
    opacity: 1;
    transform: scale(1);
    z-index: 2;
}