/* ============================================
   www.nian869.com - 自定义主题覆盖
   干净 · 整洁 · 现代
   ============================================ */

/* --- 基础色调 --- */
:root {
  --ui-bg-page: #f5f6f8;
  --ui-bg-elevated: #ffffff;
  --ui-bg-overlay: #fafbfc;
  --ui-bg-overlay-strong: #ffffff;
  --ui-bg-soft: #f0f1f3;
  --ui-bg-muted: #e8e9ed;

  --ui-text-primary: #1a1a2e;
  --ui-text-secondary: #4a4a5a;
  --ui-text-muted: #8e8ea0;

  --ui-accent: #2563eb;
  --ui-accent-hover: #1d4ed8;
  --ui-accent-soft: rgba(37, 99, 235, 0.06);

  --ui-border: #e2e4e9;
  --ui-border-strong: #c8cad0;

  --ui-text-on-accent: #ffffff;
  --ui-focus-ring: rgba(37, 99, 235, 0.15);

  --ui-price-primary: #1a1a2e;
  --ui-price-promotion: #dc2626;
  --ui-price-original: #9ca3af;

  --ui-success: #059669;
  --ui-success-soft: rgba(5, 150, 105, 0.08);
  --ui-danger: #dc2626;
  --ui-danger-soft: rgba(220, 38, 38, 0.08);
  --ui-warning: #d97706;
  --ui-warning-soft: rgba(217, 119, 6, 0.08);
  --ui-info: #2563eb;
  --ui-info-soft: rgba(37, 99, 235, 0.08);

  --ui-shadow-1: 0 1px 3px rgba(0,0,0,0.04), 0 1px 2px rgba(0,0,0,0.06);
  --ui-shadow-2: 0 4px 6px rgba(0,0,0,0.04), 0 6px 12px rgba(0,0,0,0.04);

  --ui-radius-sm: 6px;
  --ui-radius-lg: 10px;
  --ui-radius-xl: 12px;
}

/* --- 暗色模式 --- */
.dark {
  --ui-bg-page: #0f0f14;
  --ui-bg-elevated: #18181f;
  --ui-bg-overlay: #1a1a22;
  --ui-bg-overlay-strong: #1e1e28;
  --ui-bg-soft: #22222c;
  --ui-bg-muted: #2a2a36;

  --ui-text-primary: #e4e4ec;
  --ui-text-secondary: #a0a0b8;
  --ui-text-muted: #6b6b80;

  --ui-accent: #3b82f6;
  --ui-accent-hover: #60a5fa;
  --ui-accent-soft: rgba(59, 130, 246, 0.08);

  --ui-border: #2a2a3a;
  --ui-border-strong: #3a3a4a;

  --ui-shadow-1: 0 1px 3px rgba(0,0,0,0.2), 0 1px 2px rgba(0,0,0,0.3);
  --ui-shadow-2: 0 4px 6px rgba(0,0,0,0.2), 0 6px 12px rgba(0,0,0,0.2);
}

/* --- 页面背景 --- */
.theme-page {
  background-color: var(--ui-bg-page) !important;
}

/* ============================================
   商品卡片网格布局优化
   ============================================ */

/* 商品网格间距 */
.grid {
  gap: 16px !important;
}

/* --- 产品卡片 --- */
.theme-card-interactive {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  border-radius: var(--ui-radius-xl) !important;
  overflow: hidden !important;
}

.theme-card-interactive:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.1) !important;
}

/* 商品图片固定 1:1 比例 */
.theme-card-interactive img {
  width: 100% !important;
  aspect-ratio: 1 / 1 !important;
  object-fit: cover !important;
  transition: transform 0.4s ease !important;
}

.theme-card-interactive:hover img {
  transform: scale(1.05) !important;
}

/* --- 按钮美化 --- */
.theme-btn-primary {
  border-radius: 100px !important;
  font-weight: 600 !important;
}
.theme-btn-neutral {
  border-radius: 100px !important;
}
.theme-btn-secondary {
  border-radius: 100px !important;
}
.theme-btn-ghost {
  border-radius: 100px !important;
}

/* --- 导航链接美化 --- */
.theme-nav-link {
  border-radius: 100px !important;
}

/* --- 价格展示 --- */
.theme-price-lg {
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-weight: 700 !important;
}
.theme-price-sm {
  font-family: -apple-system, 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
  font-weight: 600 !important;
}

/* --- 表格/列表展示 --- */
.theme-personal-card {
  border-radius: var(--ui-radius-xl) !important;
}

/* --- 品牌文字 --- */
.theme-wordmark {
  border-radius: 100px !important;
}

/* --- 输入框 --- */
.form-input,
.form-input-lg,
.form-input-compact {
  border-radius: var(--ui-radius-lg) !important;
  transition: all 0.2s ease !important;
}

/* --- 分类标签 --- */
.theme-badge,
.theme-badge-meta {
  border-radius: 100px !important;
}

/* --- 产品网格布局美化 --- */
.grid > .theme-card-interactive {
  overflow: hidden !important;
}

/* --- 商品详情页 --- */
.theme-auth-card {
  border-radius: var(--ui-radius-xl) !important;
}

/* --- 侧边栏 --- */
.space-y-1 > .theme-nav-link {
  padding: 10px 16px !important;
}

/* --- 搜索框 --- */
.theme-panel-soft {
  border-radius: var(--ui-radius-xl) !important;
}

/* --- 区分度更高的卡片阴影 --- */
.theme-panel {
  background-color: var(--ui-bg-elevated) !important;
  border-radius: var(--ui-radius-xl) !important;
  box-shadow: var(--ui-shadow-1) !important;
}
.theme-panel-strong {
  box-shadow: var(--ui-shadow-2) !important;
}

/* --- 分类按钮圆角 --- */
.theme-pill-neutral {
  border-radius: 100px !important;
}

/* --- 滚动条美化 --- */
::-webkit-scrollbar {
  width: 5px !important;
  height: 5px !important;
}
::-webkit-scrollbar-track {
  background: transparent !important;
}
::-webkit-scrollbar-thumb {
  background: var(--ui-border) !important;
  border-radius: 100px !important;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--ui-border-strong) !important;
}

/* --- Logo 区域 --- */
.theme-wordmark-text {
  font-weight: 700 !important;
}

/* --- 底部固定导航 --- */
.lg\\:hidden.fixed.bottom-0 {
  border-radius: 0 !important;
}

/* ============================================
   响应式布局 - 商品网格列数
   ============================================ */

/* 手机端：2 列 */
@media (max-width: 640px) {
  .grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 12px !important;
  }
}

/* 平板端：3 列 */
@media (min-width: 641px) and (max-width: 1024px) {
  .grid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
}

/* 桌面端：4 列 */
@media (min-width: 1025px) {
  .grid {
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 20px !important;
  }
}