/* ============================================================
       全局重置 - 高端黑色渐变
       ============================================================ */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    body { 
      font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; 
      background: #0a0a0f; 
      color: #ffffff; 
      -webkit-font-smoothing: antialiased;
      min-height: 100vh;
    }
    a { text-decoration: none; color: inherit; }
    button { cursor: pointer; font-family: inherit; border: none; background: none; color: inherit; }

    /* ============================================================
       黑色渐变背景
       ============================================================ */
    .app-container {
      min-height: 100vh;
      background: linear-gradient(180deg, #0a0a0f 0%, #14141e 30%, #1a1a28 60%, #0f0f18 100%);
      position: relative;
    }
    .app-container::before {
      content: '';
      position: fixed;
      top: -50%;
      left: -50%;
      width: 200%;
      height: 200%;
      background: 
        radial-gradient(ellipse at 20% 50%, rgba(108,92,231,0.03) 0%, transparent 50%),
        radial-gradient(ellipse at 80% 20%, rgba(253,121,168,0.02) 0%, transparent 50%),
        radial-gradient(ellipse at 50% 80%, rgba(0,184,148,0.01) 0%, transparent 50%);
      pointer-events: none;
      z-index: 0;
    }

    /* ============================================================
       顶部导航
       ============================================================ */
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 14px 20px;
      background: rgba(10, 10, 15, 0.8);
      backdrop-filter: blur(20px);
      border-bottom: 1px solid rgba(255,255,255,0.04);
      position: sticky;
      top: 0;
      z-index: 100;
    }
    @media (min-width: 768px) { .header { padding: 18px 32px; } }
    @media (min-width: 1024px) { .header { padding: 20px 40px; } }

    .logo-group { display: flex; align-items: center; gap: 10px; }
    .logo-group .logo-icon { font-size: 1.6rem; }
    .logo-group .logo-text { 
      font-size: 1.4rem; 
      font-weight: 300; 
      letter-spacing: 4px;
      color: #ffffff;
    }
    .logo-group .logo-text .highlight { 
      font-weight: 700;
      background: linear-gradient(135deg, #c9a84c, #f5d78e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .header-right { display: flex; align-items: center; gap: 16px; }
    
    .lang-btn { 
      display: flex; 
      align-items: center; 
      gap: 4px; 
      padding: 6px 14px; 
      border-radius: 30px; 
      background: rgba(255,255,255,0.04); 
      color: rgba(255,255,255,0.5); 
      font-size: 0.75rem; 
      font-weight: 400; 
      transition: all 0.3s; 
      border: 1px solid rgba(255,255,255,0.04);
      letter-spacing: 0.5px;
    }
    .lang-btn:hover { background: rgba(255,255,255,0.08); color: #fff; }
    
    .icon-btn { 
      font-size: 1.2rem; 
      color: rgba(255,255,255,0.3); 
      transition: all 0.3s; 
      position: relative; 
      padding: 4px;
    }
    .icon-btn:hover { color: #fff; }
    .icon-btn .badge { 
      position: absolute; 
      top: -4px; 
      right: -4px; 
      background: linear-gradient(135deg, #c9a84c, #f5d78e); 
      color: #0a0a0f; 
      font-size: 0.45rem; 
      font-weight: 700; 
      min-width: 16px; 
      height: 16px; 
      border-radius: 9999px; 
      display: flex; 
      align-items: center; 
      justify-content: center; 
      padding: 0 3px; 
    }
    
    .avatar { 
      width: 34px; 
      height: 34px; 
      border-radius: 50%; 
      border: 1px solid rgba(255,255,255,0.1); 
      object-fit: cover; 
      transition: all 0.3s; 
    }
    .avatar:hover { border-color: rgba(201,168,76,0.4); }

    /* ============================================================
       搜索栏
       ============================================================ */
    .search-bar {
      padding: 16px 20px;
      background: rgba(10, 10, 15, 0.4);
      border-bottom: 1px solid rgba(255,255,255,0.03);
      display: flex;
      justify-content: center;
    }
    @media (min-width: 768px) { .search-bar { padding: 20px 32px; } }

    .search-box {
      max-width: 720px;
      width: 100%;
      display: flex;
      align-items: center;
      background: rgba(255,255,255,0.04);
      border-radius: 50px;
      border: 1px solid rgba(255,255,255,0.06);
      transition: all 0.4s;
    }
    .search-box:focus-within {
      border-color: rgba(201,168,76,0.3);
      background: rgba(255,255,255,0.06);
      box-shadow: 0 0 40px rgba(201,168,76,0.02);
    }
    .search-box .search-icon {
      padding: 0 12px 0 20px;
      color: rgba(255,255,255,0.2);
      font-size: 1rem;
    }
    .search-box .search-input {
      flex: 1;
      padding: 12px 0;
      border: none;
      outline: none;
      font-size: 0.9rem;
      color: #ffffff;
      background: transparent;
      font-family: inherit;
      font-weight: 300;
    }
    .search-box .search-input::placeholder { color: rgba(255,255,255,0.2); }
    .search-box .search-btn {
      padding: 12px 28px;
      background: linear-gradient(135deg, rgba(201,168,76,0.2), rgba(245,215,142,0.1));
      color: #c9a84c;
      border: none;
      border-radius: 0 50px 50px 0;
      font-size: 0.85rem;
      font-weight: 500;
      transition: all 0.3s;
      font-family: inherit;
      letter-spacing: 0.5px;
      border-left: 1px solid rgba(255,255,255,0.04);
    }
    .search-box .search-btn:hover { 
      background: linear-gradient(135deg, rgba(201,168,76,0.3), rgba(245,215,142,0.15));
    }

    /* ============================================================
       轮播图
       ============================================================ */
    .banner-section {
      padding: 16px 20px 8px;
      max-width: 1440px;
      margin: 0 auto;
    }
    @media (min-width: 768px) { .banner-section { padding: 20px 32px 12px; } }

    .banner-wrapper {
      position: relative;
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      aspect-ratio: 16/5;
      min-height: 120px;
    }
    @media (min-width: 768px) { .banner-wrapper { min-height: 180px; } }
    @media (min-width: 1024px) { .banner-wrapper { min-height: 240px; } }

    .banner-slides {
      display: flex;
      width: 100%;
      height: 100%;
      transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .banner-slide {
      flex: 0 0 100%;
      height: 100%;
      background-size: cover;
      background-position: center;
      position: relative;
      display: flex;
      align-items: center;
      padding: 20px 28px;
    }
    @media (min-width: 768px) { .banner-slide { padding: 30px 40px; } }
    @media (min-width: 1024px) { .banner-slide { padding: 40px 56px; } }

    .banner-slide .banner-overlay {
      position: absolute;
      inset: 0;
      background: linear-gradient(135deg, rgba(10,10,15,0.3) 0%, transparent 60%);
    }

    .banner-slide .banner-content {
      position: relative;
      z-index: 1;
      max-width: 60%;
    }
    @media (max-width: 480px) { .banner-slide .banner-content { max-width: 80%; } }

    .banner-slide .banner-content .banner-tag {
      display: inline-block;
      padding: 2px 14px;
      border-radius: 30px;
      font-size: 0.6rem;
      font-weight: 500;
      color: #c9a84c;
      background: rgba(201,168,76,0.12);
      border: 1px solid rgba(201,168,76,0.08);
      letter-spacing: 0.5px;
      text-transform: uppercase;
      margin-bottom: 8px;
    }

    .banner-slide .banner-content .banner-title {
      font-size: 1.4rem;
      font-weight: 700;
      color: #ffffff;
      letter-spacing: -0.5px;
      line-height: 1.2;
      margin-bottom: 4px;
    }
    @media (min-width: 768px) { .banner-slide .banner-content .banner-title { font-size: 2rem; } }
    @media (min-width: 1024px) { .banner-slide .banner-content .banner-title { font-size: 2.6rem; } }

    .banner-slide .banner-content .banner-desc {
      font-size: 0.85rem;
      color: rgba(255,255,255,0.5);
      font-weight: 300;
      letter-spacing: 0.5px;
    }
    @media (min-width: 768px) { .banner-slide .banner-content .banner-desc { font-size: 1rem; } }

    .banner-slide .banner-content .banner-btn {
      display: inline-block;
      margin-top: 12px;
      padding: 8px 24px;
      border-radius: 30px;
      background: linear-gradient(135deg, rgba(201,168,76,0.15), rgba(245,215,142,0.05));
      color: #c9a84c;
      font-size: 0.75rem;
      font-weight: 500;
      border: 1px solid rgba(201,168,76,0.1);
      transition: all 0.3s;
      cursor: pointer;
      letter-spacing: 0.5px;
    }
    .banner-slide .banner-content .banner-btn:hover {
      background: rgba(201,168,76,0.15);
      border-color: rgba(201,168,76,0.2);
    }

    .banner-dots {
      position: absolute;
      bottom: 14px;
      right: 20px;
      display: flex;
      gap: 8px;
      z-index: 5;
    }
    @media (min-width: 768px) { .banner-dots { bottom: 18px; right: 28px; gap: 10px; } }

    .banner-dots .dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: rgba(255,255,255,0.1);
      cursor: pointer;
      transition: all 0.4s;
      border: 1px solid rgba(255,255,255,0.02);
    }
    .banner-dots .dot.active {
      background: #c9a84c;
      width: 24px;
      border-radius: 4px;
      box-shadow: 0 0 20px rgba(201,168,76,0.1);
    }
    .banner-dots .dot:hover { background: rgba(255,255,255,0.2); }
    .banner-dots .dot.active:hover { background: #c9a84c; }

    .banner-arrows {
      position: absolute;
      top: 50%;
      transform: translateY(-50%);
      width: 100%;
      display: flex;
      justify-content: space-between;
      padding: 0 12px;
      z-index: 5;
      pointer-events: none;
    }
    @media (max-width: 480px) { .banner-arrows { display: none; } }

    .banner-arrows .arrow {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      background: rgba(10,10,15,0.5);
      backdrop-filter: blur(10px);
      border: 1px solid rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.3);
      font-size: 1.2rem;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.3s;
      pointer-events: auto;
    }
    .banner-arrows .arrow:hover {
      background: rgba(10,10,15,0.8);
      color: #fff;
      border-color: rgba(201,168,76,0.1);
    }

    /* ============================================================
       分类导航
       ============================================================ */
    .category-nav {
      padding: 8px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.03);
      display: flex;
      gap: 4px;
      overflow-x: auto;
      scrollbar-width: none;
      -webkit-overflow-scrolling: touch;
      background: rgba(10, 10, 15, 0.2);
    }
    @media (min-width: 768px) { .category-nav { padding: 10px 32px; gap: 6px; } }
    .category-nav::-webkit-scrollbar { display: none; }
    .category-nav .cat-item {
      white-space: nowrap;
      padding: 6px 18px;
      border-radius: 30px;
      font-size: 0.75rem;
      font-weight: 400;
      color: rgba(255,255,255,0.3);
      cursor: pointer;
      transition: all 0.3s;
      flex-shrink: 0;
      letter-spacing: 0.3px;
    }
    .category-nav .cat-item:hover { 
      color: rgba(255,255,255,0.6); 
      background: rgba(255,255,255,0.03); 
    }
    .category-nav .cat-item.active {
      color: #c9a84c;
      background: rgba(201,168,76,0.08);
      border: 1px solid rgba(201,168,76,0.1);
    }
    .category-nav .cat-item .cat-icon { margin-right: 6px; }

    /* ============================================================
       主内容
       ============================================================ */
    .main-content {
      padding: 16px 20px 20px;
      max-width: 1440px;
      margin: 0 auto;
      position: relative;
      z-index: 1;
    }
    @media (min-width: 768px) { .main-content { padding: 24px 32px 30px; } }

    /* ============================================================
       商品区块标题
       ============================================================ */
    .section-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20px;
    }
    .section-header .section-title {
      font-size: 1.1rem;
      font-weight: 300;
      color: rgba(255,255,255,0.6);
      letter-spacing: 2px;
    }
    .section-header .section-title .highlight { 
      font-weight: 700;
      background: linear-gradient(135deg, #c9a84c, #f5d78e);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
    .section-header .section-title .count {
      font-size: 0.75rem;
      font-weight: 300;
      color: rgba(255,255,255,0.15);
      margin-left: 8px;
    }
    .section-header .section-actions .action-btn {
      padding: 6px 18px;
      border-radius: 30px;
      font-size: 0.75rem;
      font-weight: 400;
      color: rgba(255,255,255,0.3);
      border: 1px solid rgba(255,255,255,0.04);
      transition: all 0.3s;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: 0.3px;
      background: transparent;
    }
    .section-header .section-actions .action-btn:hover {
      border-color: rgba(201,168,76,0.2);
      color: #c9a84c;
    }

    /* ============================================================
       商品网格
       ============================================================ */
    .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 16px;
    }
    @media (min-width: 480px) { .product-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (min-width: 768px) { .product-grid { grid-template-columns: repeat(4, 1fr); gap: 20px; } }
    @media (min-width: 1024px) { .product-grid { grid-template-columns: repeat(5, 1fr); gap: 24px; } }
    @media (min-width: 1280px) { .product-grid { grid-template-columns: repeat(6, 1fr); } }

    /* ============================================================
       商品卡片
       ============================================================ */
    .product-card {
      background: rgba(255,255,255,0.02);
      border-radius: 12px;
      overflow: hidden;
      transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      cursor: pointer;
      border: 1px solid rgba(255,255,255,0.04);
      backdrop-filter: blur(10px);
    }
    .product-card:hover {
      transform: translateY(-8px);
      border-color: rgba(201,168,76,0.15);
      background: rgba(255,255,255,0.04);
      box-shadow: 0 12px 60px rgba(0,0,0,0.4);
    }

    .product-card .product-img {
      position: relative;
      width: 100%;
      aspect-ratio: 1/1;
      background: rgba(255,255,255,0.01);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .product-card .product-img img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform 0.6s;
    }
    .product-card:hover .product-img img { transform: scale(1.05); }

    .product-card .product-img .product-tag {
      position: absolute;
      top: 10px;
      left: 10px;
      padding: 3px 14px;
      border-radius: 30px;
      font-size: 0.5rem;
      font-weight: 600;
      letter-spacing: 0.5px;
      text-transform: uppercase;
      backdrop-filter: blur(10px);
    }
    .product-card .product-img .product-tag.hot { 
      background: rgba(201,168,76,0.15); 
      color: #c9a84c; 
      border: 1px solid rgba(201,168,76,0.1);
    }
    .product-card .product-img .product-tag.new { 
      background: rgba(255,255,255,0.05); 
      color: rgba(255,255,255,0.5); 
      border: 1px solid rgba(255,255,255,0.04);
    }

    .product-card .product-body {
      padding: 14px 16px 16px;
    }
    .product-card .product-body .product-name {
      font-size: 0.85rem;
      font-weight: 400;
      color: rgba(255,255,255,0.8);
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      line-height: 1.4;
      min-height: 2.4rem;
      margin-bottom: 6px;
      letter-spacing: 0.2px;
    }

    .product-card .product-body .product-price {
      display: flex;
      align-items: center;
      gap: 8px;
    }
    .product-card .product-body .product-price .current {
      font-size: 1.1rem;
      font-weight: 600;
      color: #ffffff;
      letter-spacing: -0.3px;
    }
    .product-card .product-body .product-price .original {
      font-size: 0.75rem;
      color: rgba(255,255,255,0.15);
      text-decoration: line-through;
    }
    .product-card .product-body .product-price .discount {
      font-size: 0.65rem;
      font-weight: 500;
      color: #c9a84c;
      background: rgba(201,168,76,0.08);
      padding: 1px 8px;
      border-radius: 30px;
      border: 1px solid rgba(201,168,76,0.06);
    }

    .product-card .product-body .product-meta {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 10px;
      padding-top: 10px;
      border-top: 1px solid rgba(255,255,255,0.03);
      font-size: 0.65rem;
      color: rgba(255,255,255,0.15);
      letter-spacing: 0.3px;
    }
    .product-card .product-body .product-meta .seller {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    .product-card .product-body .product-meta .seller .badge {
      background: rgba(255,255,255,0.02);
      padding: 1px 8px;
      border-radius: 30px;
      font-size: 0.5rem;
      color: rgba(255,255,255,0.2);
      border: 1px solid rgba(255,255,255,0.02);
    }

    /* ============================================================
       加载状态
       ============================================================ */
    .loading-state {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      padding: 60px 0;
      color: rgba(255,255,255,0.1);
      grid-column: 1 / -1;
    }
    .loading-state .spinner {
      width: 32px;
      height: 32px;
      border: 1px solid rgba(255,255,255,0.04);
      border-top-color: #c9a84c;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
    }
    @keyframes spin { to { transform: rotate(360deg); } }
    .loading-state .loading-text { font-size: 0.8rem; font-weight: 300; letter-spacing: 1px; }

    .empty-state {
      text-align: center;
      padding: 60px 0;
      color: rgba(255,255,255,0.1);
      grid-column: 1 / -1;
    }
    .empty-state .empty-icon { font-size: 3rem; display: block; margin-bottom: 12px; opacity: 0.3; }
    .empty-state .empty-text { font-size: 0.85rem; font-weight: 300; letter-spacing: 1px; }

    /* ============================================================
       加载更多
       ============================================================ */
    .load-more {
      text-align: center;
      padding: 24px 0 8px;
    }
    .load-more .load-btn {
      padding: 10px 40px;
      border-radius: 50px;
      background: rgba(255,255,255,0.02);
      border: 1px solid rgba(255,255,255,0.04);
      color: rgba(255,255,255,0.2);
      font-size: 0.8rem;
      font-weight: 400;
      transition: all 0.3s;
      cursor: pointer;
      font-family: inherit;
      letter-spacing: 0.5px;
    }
    .load-more .load-btn:hover {
      border-color: rgba(201,168,76,0.15);
      color: #c9a84c;
      background: rgba(201,168,76,0.03);
    }

    /* ============================================================
       底部
       ============================================================ */
    .footer {
      border-top: 1px solid rgba(255,255,255,0.02);
      padding: 16px 20px;
      text-align: center;
      font-size: 0.7rem;
      color: rgba(255,255,255,0.06);
      margin-top: 20px;
      letter-spacing: 0.5px;
    }
    @media (min-width: 768px) { .footer { padding: 20px 32px; } }
    .footer .footer-links {
      display: flex;
      justify-content: center;
      gap: 20px;
      margin-bottom: 8px;
    }
    .footer .footer-links a {
      color: rgba(255,255,255,0.1);
      transition: color 0.3s;
      font-weight: 300;
    }
    .footer .footer-links a:hover { color: rgba(255,255,255,0.3); }

    /* ============================================================
       语言弹窗
       ============================================================ */
    .lang-overlay { 
      display: none; 
      position: fixed; 
      inset: 0; 
      background: rgba(0,0,0,0.6); 
      backdrop-filter: blur(20px); 
      z-index: 200; 
      align-items: flex-end; 
      justify-content: center; 
    }
    .lang-overlay.active { display: flex; }
    .lang-panel { 
      background: rgba(20,20,30,0.95); 
      backdrop-filter: blur(20px); 
      border-radius: 20px 20px 0 0; 
      max-width: 480px; 
      width: 100%; 
      max-height: 70vh; 
      overflow-y: auto; 
      padding: 24px 20px 30px; 
      animation: slideUp 0.3s ease-out; 
      border-top: 1px solid rgba(255,255,255,0.04);
    }
    @keyframes slideUp { 
      from { transform: translateY(100%); opacity: 0; } 
      to { transform: translateY(0%); opacity: 1; } 
    }
    .lang-panel .lang-header { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      padding-bottom: 16px; 
      border-bottom: 1px solid rgba(255,255,255,0.04); 
    }
    .lang-panel .lang-header .lang-title { 
      font-size: 1rem; 
      font-weight: 400; 
      color: rgba(255,255,255,0.6); 
      letter-spacing: 1px; 
    }
    .lang-panel .lang-header .close-btn { 
      font-size: 1.4rem; 
      color: rgba(255,255,255,0.1); 
      transition: all 0.3s; 
      background: none; 
      border: none; 
    }
    .lang-panel .lang-header .close-btn:hover { color: #fff; }
    .lang-panel .lang-item { 
      display: flex; 
      justify-content: space-between; 
      align-items: center; 
      padding: 12px 16px; 
      border-radius: 10px; 
      cursor: pointer; 
      transition: all 0.3s; 
      margin-top: 4px; 
      color: rgba(255,255,255,0.3);
    }
    .lang-panel .lang-item:hover { 
      background: rgba(255,255,255,0.03); 
      color: #fff; 
    }
    .lang-panel .lang-item.active { 
      background: rgba(201,168,76,0.05); 
      border: 1px solid rgba(201,168,76,0.05); 
      color: #c9a84c; 
    }
    .lang-panel .lang-item .lang-name { font-size: 0.9rem; font-weight: 400; }
    .lang-panel .lang-item .lang-native { font-size: 0.75rem; color: rgba(255,255,255,0.1); }
    .lang-panel .lang-item .lang-check { color: #c9a84c; font-size: 1.1rem; display: none; }
    .lang-panel .lang-item.active .lang-check { display: block; }

    /* ============================================================
       响应式
       ============================================================ */
    @media (max-width: 480px) {
      .header { padding: 10px 14px; }
      .logo-group .logo-text { font-size: 1rem; letter-spacing: 2px; }
      .search-bar { padding: 10px 14px; }
      .search-box .search-btn { padding: 8px 16px; font-size: 0.75rem; }
      .banner-section { padding: 10px 12px 6px; }
      .banner-wrapper { min-height: 90px; aspect-ratio: 16/6; }
      .banner-slide { padding: 12px 16px; }
      .banner-slide .banner-content .banner-title { font-size: 1rem; }
      .banner-slide .banner-content .banner-desc { font-size: 0.65rem; }
      .banner-slide .banner-content .banner-btn { font-size: 0.6rem; padding: 4px 16px; }
      .banner-dots { bottom: 8px; right: 12px; gap: 6px; }
      .banner-dots .dot { width: 6px; height: 6px; }
      .banner-dots .dot.active { width: 16px; }
      .category-nav { padding: 6px 14px; }
      .category-nav .cat-item { font-size: 0.65rem; padding: 4px 12px; }
      .main-content { padding: 12px 14px 16px; }
      .product-grid { gap: 10px; }
      .product-card .product-body { padding: 10px 12px 12px; }
      .product-card .product-body .product-name { font-size: 0.75rem; min-height: 2rem; }
      .product-card .product-body .product-price .current { font-size: 0.9rem; }
      .section-header .section-title { font-size: 0.9rem; }
    }

    @media (max-width: 380px) {
      .banner-slide .banner-content .banner-title { font-size: 0.85rem; }
      .banner-slide .banner-content .banner-desc { font-size: 0.55rem; display: none; }
    }