/* ══════════════════════════════════════
   全站基礎設定
   ══════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=DM+Serif+Display&display=swap');

/* 基準字體：所有 em 單位以此為基準等比縮放 */
html {
  font-size: 18px;
}

body {
  font-family: 'DM Sans', system-ui, -apple-system, sans-serif;
}

/* ══════════════════════════════════════
   卡片視覺升級（圓角 / 陰影）
   ══════════════════════════════════════ */

.stat-card {
  border-radius: 18px !important;
  box-shadow: 0 4px 14px rgba(44,40,34,0.08) !important;
  transition: box-shadow 0.25s, transform 0.25s !important;
}
.stat-card:hover {
  box-shadow: 0 12px 32px rgba(44,40,34,0.15) !important;
  transform: translateY(-4px) !important;
}
.stat-card:active {
  transform: translateY(-1px) !important;
  box-shadow: 0 5px 14px rgba(44,40,34,0.10) !important;
}

.stock-card {
  border-radius: 20px !important;
  box-shadow: 0 4px 14px rgba(44,40,34,0.08) !important;
  transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s !important;
}
.stock-card:hover {
  box-shadow: 0 16px 40px rgba(44,40,34,0.16) !important;
  transform: translateY(-6px) !important;
}
.stock-card:active {
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 18px rgba(44,40,34,0.11) !important;
}

.sys-card {
  border-radius: 22px !important;
  box-shadow: 0 2px 12px rgba(44,40,34,0.06) !important;
  transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s !important;
}
.sys-card:hover {
  box-shadow: 0 8px 28px rgba(44,40,34,0.12) !important;
  transform: translateY(-2px) !important;
}

.filter-btn {
  border-radius: 20px !important;
  padding: 7px 16px !important;
}
.filter-btn.active {
  box-shadow: 0 2px 10px rgba(26,110,66,0.25) !important;
}
.search-input {
  border-radius: 20px !important;
  padding: 8px 16px !important;
}
.pool-tabs { border-radius: 14px !important; }
.pool-tab  { border-radius: 10px !important; }
.pool-tab.active {
  box-shadow: 0 2px 8px rgba(26,110,66,0.3) !important;
}
.run-btn {
  border-radius: 20px !important;
  box-shadow: 0 2px 8px rgba(26,110,66,0.25) !important;
  padding: 8px 18px !important;
}
.position-badge {
  border-radius: 20px !important;
  padding: 5px 14px !important;
}

/* ══════════════════════════════════════
   手機版面配置（768px 以下）
   ══════════════════════════════════════ */

@media (max-width: 768px) {

  html { font-size: 16px; }

  /* ── Header ── */
  header {
    height: auto !important;
    min-height: 52px;
    padding: 8px 12px !important;
    flex-wrap: wrap;
    gap: 8px;
  }
  .header-left { gap: 8px !important; flex: 1; min-width: 0; }
  .header-right { gap: 6px !important; }
  .back-btn { font-size: 0.88em !important; white-space: nowrap; }
  .pool-tabs { gap: 2px !important; padding: 2px !important; }
  .pool-tab  { padding: 5px 10px !important; font-size: 0.84em !important; white-space: nowrap; }
  .update-info { display: none !important; }
  .run-btn { padding: 6px 12px !important; font-size: 0.84em !important; white-space: nowrap; }

  /* ── Main padding ── */
  main { padding: 14px 12px !important; }

  /* ── Stats row：2欄網格 ── */
  .stats-row {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-bottom: 16px !important;
  }
  .stat-card { min-width: 0 !important; padding: 14px 16px !important; }

  /* ── Filter bar：橫向捲動 ── */
  .filter-bar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    gap: 8px !important;
    padding-bottom: 6px !important;
    margin-bottom: 14px !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .filter-bar::-webkit-scrollbar { display: none; }
  .filter-btn { white-space: nowrap; flex-shrink: 0; padding: 6px 14px !important; }
  .search-input { width: 130px !important; flex-shrink: 0; }

  /* ── Stocks grid：單欄 ── */
  .stocks-grid { grid-template-columns: 1fr !important; gap: 10px !important; }
  .stock-card  { padding: 16px 18px !important; }

  /* ── 首頁卡片 ── */
  .systems-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    padding: 0 12px 32px !important;
  }
  .sys-card {
    padding: 20px 16px !important;
    min-height: 110px !important;
    gap: 10px !important;
  }
  .card-icon { font-size: 26px !important; }

}