/* ============================================================
   Dream Factory AI — Design System
   靈感來源：foodie BrandTheme 語義色彩系統
   ============================================================ */

/* ------------------------------------------
   1. Design Tokens
   ------------------------------------------ */
:root {
  /* Brand — 紫藍漸層 (保留原 dream-factory 識別) */
  --color-primary: #a78bfa;
  --color-primary-hover: #8b5cf6;
  --color-primary-subtle: rgba(167, 139, 250, 0.12);
  --color-secondary: #60a5fa;
  --color-accent: #34d399;

  /* Surface & Background — 深色基底 */
  --color-background: #08080e;
  --color-surface: #12121c;
  --color-surface-hover: #1a1a2e;
  --color-surface-elevated: #1e1e30;

  /* Text — 淺灰到白 */
  --color-text: #e8e8ed;
  --color-text-secondary: #94949e;
  --color-text-muted: #5c5c66;

  /* Border */
  --color-border: #1e1e2e;
  --color-border-light: #16161f;

  /* Semantic */
  --color-success: #34d399;
  --color-warning: #fbbf24;
  --color-error: #ef4444;

  /* 觸控目標 (mobile-first) */
  --touch-target: 48px;
  --touch-target-lg: 52px;

  /* 圓角 */
  --radius-sm: 8px;
  --radius: 12px;
  --radius-lg: 16px;

  /* 間距 (以手機為基準) */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;

  /* 字級 */
  --text-xs: 0.75rem;
  --text-sm: 0.85rem;
  --text-base: 0.95rem;
  --text-lg: 1.05rem;
  --text-xl: 1.25rem;
  --text-2xl: 2rem;
  --text-3xl: 2.5rem;

  /* Banner (由 theme.js 動態覆蓋) */
  --banner-image: linear-gradient(135deg, rgba(167,139,250,0.15), rgba(96,165,250,0.08));

  /* 陰影 */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
  --shadow: 0 4px 12px rgba(0,0,0,0.4);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.5);
}

/* ------------------------------------------
   2. Reset
   ------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans TC', sans-serif;
  background: var(--color-background);
  color: var(--color-text);
  min-height: 100dvh;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { text-decoration: none; color: inherit; }
ul { list-style: none; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ------------------------------------------
   3. 粒子背景 (保留原始)
   ------------------------------------------ */
#particles {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* ------------------------------------------
   4. Layout — 手機優先容器
   ------------------------------------------ */
.page {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding: 0 var(--space-md);
}

@media (min-width: 640px) {
  .page { max-width: 600px; }
}
@media (min-width: 768px) {
  .page { max-width: 720px; padding: 0 var(--space-lg); }
}
@media (min-width: 1024px) {
  .page { max-width: 960px; padding: 0 var(--space-xl); }
}
@media (min-width: 1280px) {
  .page { max-width: 1120px; }
}

/* ------------------------------------------
   5. Components
   ------------------------------------------ */

/* --- 5a. Nav --- */
.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-md) 0;
  border-bottom: 1px solid var(--color-border);
}
.nav-links { display: flex; gap: var(--space-xs); }

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  min-width: var(--touch-target);
  padding: 0 var(--space-md);
  border-radius: var(--radius);
  color: var(--color-text-secondary);
  font-size: var(--text-sm);
  font-weight: 500;
  transition: background 0.2s, color 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.nav-btn:active { background: var(--color-surface); color: var(--color-text); }
.nav-btn--primary {
  color: var(--color-primary);
  background: var(--color-primary-subtle);
}
.nav-btn--primary:active { background: rgba(167,139,250,0.2); }

.logo {
  font-size: var(--text-xl);
  font-weight: 700;
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* --- 5b. Hero --- */
.hero {
  position: relative;
  overflow: hidden;
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-xl);
}
.hero-banner {
  position: absolute;
  inset: -40%;
  z-index: -1;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.6;
  background: var(--banner-image);
  background-size: 200% 200%;
  animation: bannerSlide 10s ease-in-out infinite;
}

@keyframes bannerSlide {
  0% { transform: translate(0, 0); }
  33% { transform: translate(-8%, 4%); }
  66% { transform: translate(6%, -6%); }
  100% { transform: translate(0, 0); }
}
.hero-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-sm);
  width: 100%;
}
.hero h1 {
  font-size: var(--text-2xl);
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: var(--space-md);
}
.hero .gradient {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary), var(--color-accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.hero p {
  font-size: var(--text-base);
  color: var(--color-text-secondary);
  line-height: 1.7;
  margin-bottom: var(--space-lg);
}

@media (min-width: 768px) {
  .hero { padding: var(--space-2xl) 0 var(--space-xl); }
  .hero h1 { font-size: var(--text-3xl); }
}

/* --- 5c. Buttons (touch-optimized) --- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: var(--touch-target);
  padding: 0 var(--space-lg);
  border-radius: var(--radius);
  font-size: var(--text-base);
  font-weight: 600;
  transition: transform 0.15s, box-shadow 0.15s, background 0.2s;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  width: 100%;
}
.btn:active { transform: scale(0.97); }
@media (min-width: 480px) { .btn { width: auto; } }

.btn--primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
  color: #fff;
  min-height: var(--touch-target-lg);
  box-shadow: 0 0 0 rgba(167,139,250,0);
}
.btn--primary:active {
  box-shadow: 0 0 24px rgba(167,139,250,0.3);
}

.btn--secondary {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-secondary);
}
.btn--secondary:active {
  background: var(--color-surface-hover);
  border-color: var(--color-primary);
  color: var(--color-text);
}

.btn--ghost {
  color: var(--color-text-secondary);
}
.btn--ghost:active { background: var(--color-surface); }

/* --- 5d. Section Headers --- */
.section-title {
  font-size: var(--text-lg);
  font-weight: 700;
  margin-bottom: var(--space-md);
  padding-top: var(--space-xl);
}
.section-subtitle {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin-bottom: var(--space-lg);
  line-height: 1.6;
}

/* --- 5e. Product Card (foodie card inspired) --- */
.products { display: flex; flex-direction: column; gap: var(--space-md); }
@media (min-width: 768px) {
  .products { display: grid; grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
  .products { grid-template-columns: repeat(3, 1fr); }
}

.product-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
  transition: border-color 0.2s, transform 0.15s;
}
.product-card:active { border-color: var(--color-primary); transform: scale(0.99); }

.product-card__icon {
  width: 44px; height: 44px;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--text-xl);
  margin-bottom: var(--space-md);
  background: var(--color-primary-subtle);
}

.product-card h3 {
  font-size: var(--text-lg);
  font-weight: 600;
  margin-bottom: var(--space-xs);
}
.product-card p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.product-card__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
  margin-bottom: var(--space-md);
}
.product-card__price {
  font-size: var(--text-lg);
  font-weight: 700;
  color: var(--color-primary);
}

/* Badge (foodie 的 tag 風格) */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 500;
}
.badge--success { background: rgba(52,211,153,0.12); color: var(--color-success); }
.badge--warning { background: rgba(251,191,36,0.12); color: var(--color-warning); }
.badge--error { background: rgba(239,68,68,0.12); color: var(--color-error); }

.btn--buy {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--touch-target);
  width: 100%;
  border-radius: var(--radius-sm);
  background: var(--color-primary);
  color: #fff;
  font-size: var(--text-sm);
  font-weight: 600;
  transition: background 0.2s, transform 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.btn--buy:active { background: var(--color-primary-hover); transform: scale(0.98); }
@media (min-width: 480px) { .btn--buy { width: 100%; } }

/* --- 5f. GPU Checker (產品區整合 GPU 檢測) --- */
.gpu-grid {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (min-width: 768px) {
  .gpu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  .gpu-card--large { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .gpu-grid { grid-template-columns: 1fr 1fr 1fr; }
  .gpu-card--large { grid-column: 1 / -1; }
}

.gpu-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}

.gpu-label {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-sm);
  color: var(--color-text-secondary);
}

.gpu-select {
  width: 100%;
  min-height: var(--touch-target-lg);
  padding: 0 var(--space-md);
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: var(--color-surface-elevated);
  color: var(--color-text);
  font-size: var(--text-base);
  font-family: inherit;
  cursor: pointer;
  appearance: auto;
}
.gpu-select:focus { border-color: var(--color-primary); outline: none; }

.gpu-status {
  text-align: center;
  padding: var(--space-xl);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* 結果卡片（產品） */
.gpu-results {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  grid-column: 1 / -1;
}
@media (min-width: 540px) {
  .gpu-results {
    grid-template-columns: 1fr 1fr;
  }
  .gpu-results .product-result--featured {
    grid-column: 1 / -1;
  }
}
@media (min-width: 1024px) {
  .gpu-results {
    grid-template-columns: 1fr 1fr 1fr;
  }
}

.product-result {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
}

/* Featured card — 一大 */
.product-result--featured {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  background: var(--color-surface-elevated);
  padding: var(--space-md);
  border-color: var(--color-primary);
}
.product-result__img {
  width: 72px; height: 72px;
  border-radius: var(--radius-sm);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--color-surface-elevated);
}
.product-result__img--featured {
  width: 100px;
  height: 100px;
}
@media (min-width: 1024px) {
  .product-result__img--featured {
    width: 128px;
    height: 128px;
  }
}
.product-result--featured .product-result__name {
  font-size: var(--text-base);
}
.product-result--featured .product-result__price {
  font-size: var(--text-lg);
}

/* N小 cards: full-bleed image + semi-transparent overlay */
.product-result:not(.product-result--featured) {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 180px;
  background: var(--color-surface);
  color: inherit;
  text-decoration: none;
}
.product-result:not(.product-result--featured) .product-result__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-result:not(.product-result--featured)::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.80) 20%, rgba(0,0,0,0.55) 40%, rgba(0,0,0,0.10) 60%, transparent 75%);
  pointer-events: none;
}
.product-result:not(.product-result--featured) .product-result__body {
  position: relative;
  z-index: 1;
  margin-top: auto;
  padding: var(--space-md);
  -webkit-text-stroke: 0.4px rgba(0,0,0,0.6);
  text-shadow:
     1px -1px 0 #000,
     1px  0px 0 #000,
     1px  1px 0 #000,
     0px -1px 0 #000,
     0px  1px 0 #000,
    -1px -1px 0 #000,
    -1px  0px 0 #000,
    -1px  1px 0 #000;
}
.product-result:not(.product-result--featured) .product-result__name {
  color: #fff;
  font-size: var(--text-base);
}
.product-result:not(.product-result--featured) .product-result__spec {
  margin-bottom: var(--space-xs);
}
.product-result:not(.product-result--featured) .product-result__tag {
  background: rgba(255,255,255,0.2);
  color: #fff;
}


.product-result__body { flex: 1; min-width: 0; }
.product-result__name {
  font-size: var(--text-sm);
  font-weight: 600;
  margin-bottom: var(--space-xs);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.product-result__spec {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
  margin-bottom: var(--space-sm);
}
.product-result__tag {
  font-size: 0.7rem;
  padding: 1px 8px;
  border-radius: 100px;
  font-weight: 500;
}
.tag-smooth { background: rgba(52,211,153,0.15); color: var(--color-success); }
.tag-minimum { background: rgba(251,191,36,0.15); color: var(--color-warning); }
.product-result__price {
  font-size: var(--text-base);
  font-weight: 700;
  color: var(--color-primary);
}
.product-result__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--touch-target);
  margin-top: var(--space-xs);
  font-size: var(--text-sm);
  color: var(--color-primary);
  text-decoration: none;
  font-weight: 500;
}
.product-result__link:active { color: var(--color-primary-hover); }

.show-more-btn {
  width: 100%;
  min-height: var(--touch-target);
  margin-top: var(--space-sm);
}

/* AI 模型 chips */
.model-section { margin-top: var(--space-md); }
.model-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}
.model-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: var(--text-xs);
  font-weight: 500;
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
}

details.checker-details { margin-top: var(--space-md); }
details.checker-details summary {
  cursor: pointer;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  padding: var(--space-sm) 0;
  -webkit-tap-highlight-color: transparent;
  min-height: var(--touch-target);
  display: flex;
  align-items: center;
}
details.checker-details summary:active { color: var(--color-text); }
details.checker-details[open] summary { color: var(--color-text); margin-bottom: var(--space-md); }

.empty-state {
  text-align: center;
  padding: var(--space-2xl) var(--space-md);
  color: var(--color-text-muted);
}
.empty-state p {
  font-size: var(--text-sm);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

/* --- 5g. Download Section --- */
.download-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-lg);
}
@media (min-width: 768px) {
  .download-card { flex-direction: row; align-items: flex-start; }
}

.download-preview {
  flex-shrink: 0;
}
.download-screenshot {
  width: 100%;
  max-width: 360px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border);
}
@media (min-width: 768px) {
  .download-screenshot { width: 320px; }
}

.download-info {
  flex: 1;
  min-width: 0;
}
.download-info p {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  line-height: 1.6;
  margin-bottom: var(--space-md);
}

.download-actions {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  flex-wrap: wrap;
}
.download-actions .btn { flex: 1; min-width: 180px; }
@media (min-width: 480px) { .download-actions .btn { width: auto; flex: none; } }

.download-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--touch-target);
  height: var(--touch-target);
  border-radius: var(--radius-sm);
  background: var(--color-surface-elevated);
  border: 1px solid var(--color-border);
  transition: border-color 0.2s;
}
.download-icon:active { border-color: var(--color-primary); }
.download-icon img {
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.download-screenshare-note {
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  margin: var(--space-lg) 0 var(--space-md);
  text-align: center;
}

.screenshare-steps {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
@media (min-width: 640px) {
  .screenshare-steps { flex-direction: row; }
}

.screenshare-step {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}
.screenshare-step img {
  width: 100%;
  display: block;
}
.screenshare-step figcaption {
  text-align: center;
  padding: var(--space-sm);
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
  border-top: 1px solid var(--color-border);
}

.download-disclaimer {
  text-align: center;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  margin-top: var(--space-md);
}

/* --- 5h. Footer --- */
.footer {
  text-align: center;
  padding: var(--space-2xl) 0 var(--space-lg);
  border-top: 1px solid var(--color-border);
  margin-top: var(--space-2xl);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
}
.footer a { color: var(--color-text-muted); transition: color 0.2s; }
.footer a:active { color: var(--color-primary); }

/* ------------------------------------------
   6. Utilities
   ------------------------------------------ */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}