/* ============================================================
   LP Analytics
   照住 design-system/lp-analytics/MASTER.md
     Style      Data-Dense Dashboard
     Palette    Blue data + amber highlights
     Type       Fira Sans（介面）+ Fira Code（數字，等寬對齊）
     Density    8/10（2 / 4 / 8 / 12 / 16 / 24 / 32）
   ============================================================ */

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

:root {
  /* 色（design system） */
  --primary:      #1E40AF;
  --on-primary:   #FFFFFF;
  --secondary:    #3B82F6;
  --accent:       #D97706;
  --bg:           #F8FAFC;
  --fg:           #1E3A8A;
  --muted:        #E9EEF6;
  --border:       #DBEAFE;
  --destructive:  #DC2626;
  --ring:         #1E40AF;

  --surface:      #FFFFFF;
  --text:         #0F172A;
  --text-2:       #475569;
  --text-3:       #64748B;
  --success:      #047857;

  /* 間距（density 8/10） */
  --space-xs: 2px;  --space-sm: 4px;  --space-md: 8px;
  --space-lg: 12px; --space-xl: 16px; --space-2xl: 24px; --space-3xl: 32px;

  --shadow-sm: 0 1px 2px rgba(15, 23, 42, .05);
  --shadow-md: 0 4px 6px rgba(15, 23, 42, .07);

  --radius: 10px;
  --radius-sm: 7px;

  --font-ui:   'Fira Sans', -apple-system, BlinkMacSystemFont, 'Noto Sans TC', 'PingFang HK', sans-serif;
  --font-data: 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:      #0B1220;
    --surface: #131C2E;
    --muted:   #1B2740;
    --border:  #24314D;
    --text:    #E8EDF7;
    --text-2:  #A3B0C9;
    --text-3:  #7C8AA5;
    --fg:      #BFD3FF;
    --primary: #3B82F6;
    --secondary: #60A5FA;
    --accent:  #F59E0B;
    --success: #34D399;
    --destructive: #F87171;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 4px 8px rgba(0, 0, 0, .45);
  }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: contain;
  padding-bottom: calc(var(--space-3xl) + env(safe-area-inset-bottom));
}

:focus-visible {
  outline: 2px solid var(--ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

.num { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ---------- 版頭 ---------- */
.topbar {
  position: sticky; top: 0; z-index: 20;
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-lg);
  padding: calc(var(--space-lg) + env(safe-area-inset-top)) var(--space-xl) var(--space-lg);
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--border);
}

.brand { display: flex; align-items: center; gap: var(--space-md); font-size: 15px; font-weight: 600; letter-spacing: -.01em; }
.brand svg { width: 18px; height: 18px; color: var(--primary); flex: none; }

.iconbtn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm);
  min-height: 44px; min-width: 44px; padding: 0 var(--space-lg);
  background: none; border: 1px solid transparent; border-radius: var(--radius-sm);
  color: var(--text-2); font: inherit; font-size: 13px; cursor: pointer;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease;
}
.iconbtn:hover { background: var(--muted); color: var(--text); }
.iconbtn svg { width: 15px; height: 15px; }

/* ---------- 時間範圍 ---------- */
.ranges {
  display: flex; gap: var(--space-md);
  padding: var(--space-xl) var(--space-xl) var(--space-md);
  overflow-x: auto; scrollbar-width: none;
}
.ranges::-webkit-scrollbar { display: none; }

.range {
  flex: 0 0 auto; min-height: 44px; padding: 0 var(--space-xl);
  border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); color: var(--text-2);
  font: inherit; font-size: 13.5px; cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease;
}
.range:hover { border-color: var(--secondary); color: var(--text); }
.range[aria-pressed="true"] {
  background: var(--primary); border-color: var(--primary);
  color: var(--on-primary); font-weight: 600;
}

/* ---------- 版面 ---------- */
main { padding: 0 var(--space-xl); display: grid; gap: var(--space-xl); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

.card-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--space-lg); padding: var(--space-xl) var(--space-xl) var(--space-lg);
}
.card-title { font-size: 15.5px; font-weight: 600; letter-spacing: -.01em; }
.card-sub { font-size: 12px; color: var(--text-3); font-family: var(--font-data); }

/* ---------- KPI ---------- */
.kpis {
  display: grid; grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}
.kpi { padding: var(--space-lg) var(--space-xl); border-right: 1px solid var(--border); }
.kpi:last-child { border-right: none; }
.kpi-label {
  font-size: 11px; color: var(--text-3); font-weight: 500;
  letter-spacing: .03em; text-transform: uppercase;
}
.kpi-value {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 24px; font-weight: 600; letter-spacing: -.02em;
  margin-top: var(--space-sm); line-height: 1.15;
}
.kpi-value.hero { color: var(--accent); }

/* ---------- 走勢（line/area，≥4 點先畫） ---------- */
.chart { padding: var(--space-lg) var(--space-xl) var(--space-xl); border-top: 1px solid var(--border); }
.chart-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11.5px; color: var(--text-3); margin-bottom: var(--space-md);
  text-transform: uppercase; letter-spacing: .03em; font-weight: 500;
}
.chart svg { display: block; width: 100%; height: 78px; overflow: visible; }
.chart .axis {
  display: flex; justify-content: space-between;
  margin-top: var(--space-md); font-size: 10.5px; color: var(--text-3);
  font-family: var(--font-data);
}
.dot { fill: var(--surface); stroke: var(--primary); stroke-width: 2; }

/* ---------- 資料表 ---------- */
.table { border-top: 1px solid var(--border); padding: var(--space-lg) 0 var(--space-md); }
.table h3 {
  font-size: 11px; font-weight: 500; color: var(--text-3);
  letter-spacing: .03em; text-transform: uppercase;
  padding: 0 var(--space-xl) var(--space-md);
}
.row {
  display: grid; grid-template-columns: 1fr auto auto;
  align-items: center; gap: var(--space-lg);
  padding: var(--space-md) var(--space-xl);
  font-size: 13.5px;
  transition: background 150ms ease;
}
.row:hover { background: var(--muted); }
.row-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: var(--space-md); }
.row-name .tag {
  font-family: var(--font-data); font-size: 11px; font-weight: 600;
  padding: 1px var(--space-md); border-radius: 4px;
  background: var(--muted); color: var(--text-2);
}
.row-name .tag.lead { background: var(--primary); color: var(--on-primary); }
.row-meta { font-family: var(--font-data); font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
.row-rate {
  font-family: var(--font-data); font-variant-numeric: tabular-nums;
  font-size: 13.5px; font-weight: 600; min-width: 52px; text-align: right;
}

/* ---------- 提示 ---------- */
.note {
  display: flex; gap: var(--space-md); align-items: flex-start;
  padding: var(--space-lg) var(--space-xl);
  font-size: 12.5px; line-height: 1.5;
  border-top: 1px solid var(--border);
}
.note svg { width: 15px; height: 15px; flex: none; margin-top: 2px; }
.note b { font-weight: 600; }
.note.info   { background: color-mix(in srgb, var(--secondary) 8%, transparent);  color: var(--text-2); }
.note.info svg   { color: var(--secondary); }
.note.warn   { background: color-mix(in srgb, var(--accent) 10%, transparent);    color: var(--text-2); }
.note.warn svg   { color: var(--accent); }
.note.danger { background: color-mix(in srgb, var(--destructive) 8%, transparent); color: var(--text-2); }
.note.danger svg { color: var(--destructive); }

/* ---------- 空狀態 ---------- */
.empty { text-align: center; padding: var(--space-3xl) var(--space-2xl); }
.empty svg { width: 30px; height: 30px; color: var(--text-3); margin-bottom: var(--space-lg); }
.empty h2 { font-size: 15px; font-weight: 600; margin-bottom: var(--space-md); }
.empty p { font-size: 13px; color: var(--text-3); line-height: 1.6; max-width: 30ch; margin: 0 auto; }

.skeleton {
  height: 208px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--surface);
  position: relative; overflow: hidden;
}
.skeleton::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--muted) 70%, transparent), transparent);
  animation: shimmer 1.4s infinite;
}
@keyframes shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ---------- 登入 ---------- */
.login-wrap { min-height: 100dvh; display: grid; place-items: center; padding: var(--space-2xl); }
.login-card {
  width: 100%; max-width: 348px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow-md);
  padding: var(--space-3xl) var(--space-2xl);
}
.login-card .brand { margin-bottom: var(--space-2xl); font-size: 16px; }
.login-card label { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-2); margin-bottom: var(--space-md); }

.field {
  width: 100%; min-height: 46px; padding: 0 var(--space-lg);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text);
  font-family: var(--font-data); font-size: 16px; /* 16px：防 iOS 自動放大 */
  transition: border-color 200ms ease, box-shadow 200ms ease;
}
.field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent); }

.btn {
  width: 100%; min-height: 46px; margin-top: var(--space-lg);
  background: var(--accent); color: #FFFFFF;
  border: none; border-radius: var(--radius-sm);
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  transition: opacity 200ms ease, transform 120ms ease;
}
.btn:hover { opacity: .9; }
.btn:active { transform: scale(.99); }
.btn:disabled { opacity: .55; cursor: not-allowed; }

.error {
  display: flex; align-items: center; gap: var(--space-md);
  color: var(--destructive); font-size: 12.5px;
  margin-top: var(--space-lg); min-height: 18px;
}
.error svg { width: 14px; height: 14px; flex: none; }

/* ---------- 桌面 ---------- */
@media (min-width: 768px) {
  .topbar, .ranges, main { max-width: 1060px; margin-inline: auto; }
  main { grid-template-columns: repeat(2, 1fr); align-items: start; }
  .kpi-value { font-size: 26px; }
}
@media (min-width: 1280px) {
  .topbar, .ranges, main { max-width: 1280px; }
  main { grid-template-columns: repeat(3, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}