/* Spotpris 落地页样式。手写、无框架、无 CDN。
   配色走"电"的语义：冷灰底 + 一抹青绿强调；柱状图四色（绿/黄/橙/红）与
   app 共用同一套阈值语义（阈值本身来自 /v1/config）。 */

:root {
  color-scheme: light dark;

  --bg: #f5f7f7;
  --surface: #ffffff;
  --border: #dde3e3;
  --text: #12201f;
  --text-dim: #5b6b6a;
  --accent: #0e7c66;
  --accent-contrast: #ffffff;

  --price-low: #2f9e44;
  --price-mid: #e8b923;
  --price-high: #f08c00;
  --price-peak: #e03131;

  --radius: 12px;
  --wrap: 960px;
}

/* 深色：默认跟随系统，除非用户用右上角开关显式选了 light。 */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1413;
    --surface: #141d1c;
    --border: #253231;
    --text: #e6efed;
    --text-dim: #91a5a2;
    --accent: #3ddca9;
    --accent-contrast: #08201a;
  }
}

:root[data-theme="dark"] {
  --bg: #0d1413;
  --surface: #141d1c;
  --border: #253231;
  --text: #e6efed;
  --text-dim: #91a5a2;
  --accent: #3ddca9;
  --accent-contrast: #08201a;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
        "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }

/* ---- 顶栏 ---- */

.topbar {
  border-bottom: 1px solid var(--border);
  background: var(--surface);
  position: sticky; top: 0; z-index: 10;
}
.topbar .wrap { display: flex; align-items: center; gap: 16px; height: 60px; }
.brand {
  font-weight: 700; font-size: 18px; letter-spacing: -0.01em;
  color: var(--text); text-decoration: none;
}
.topbar nav { display: flex; gap: 16px; margin-left: auto; }
.topbar nav a { color: var(--text-dim); text-decoration: none; font-size: 15px; }
.topbar nav a:hover { color: var(--text); }

.theme-toggle {
  background: none; border: 1px solid var(--border); border-radius: 8px;
  color: var(--text-dim); cursor: pointer; padding: 6px; line-height: 0;
}
.icon-moon { display: none; }
:root[data-theme="dark"] .icon-moon { display: block; }
:root[data-theme="dark"] .icon-sun { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .icon-moon { display: block; }
  :root:not([data-theme="light"]) .icon-sun { display: none; }
}

/* ---- Hero ---- */

.hero { padding: 56px 0 28px; }
.hero h1 {
  font-size: clamp(30px, 5vw, 46px); line-height: 1.15;
  letter-spacing: -0.02em; margin: 0 0 14px;
}
.hero .lead { font-size: 18px; color: var(--text-dim); max-width: 620px; margin: 0; }
/* 标注：正文说 "hour by hour"，这行把真实的 15 分钟粒度点出来，指向页面
   底部的完整说明（#granularity）。刻意做小 —— 是脚注，不是卖点。 */
.hero-note { font-size: 14px; margin: 14px 0 0; }
.hero-note a { color: var(--accent); text-decoration: none; }
.hero-note a:hover { text-decoration: underline; }

/* ---- 图表卡片 ---- */

.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 20px;
}

.chart-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: center; justify-content: space-between; margin-bottom: 16px;
}

.tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tabs button {
  font: inherit; font-size: 14px; padding: 6px 12px;
  border: 1px solid var(--border); border-radius: 999px;
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.tabs button[aria-pressed="true"] {
  background: var(--accent); color: var(--accent-contrast); border-color: var(--accent);
}

/* ---- 当前电价（页面视觉核心）----
   形态照 spotpris iOS 设计稿的 Today 页：巨号数字 + 单位 + 分色徽章。
   访客来这个站只有一个问题——"现在多少钱"——所以它比图表还靠前。 */

.now { text-align: center; padding: 4px 0 18px; }
.now-label { font-size: 13px; color: var(--text-dim); margin: 0; }
.now-value {
  font-size: clamp(44px, 9vw, 64px); font-weight: 800;
  letter-spacing: -0.03em; line-height: 1.05; margin: 2px 0 0;
}
.now-unit { font-size: 16px; font-weight: 500; color: var(--text-dim); letter-spacing: 0; }
.now-level {
  display: inline-block; margin: 10px 0 0;
  font-size: 13px; font-weight: 600; padding: 5px 16px; border-radius: 22px;
}
.now-level[hidden] { display: none; }
/* 徽章配色复用柱状图的四色语义（阈值本身仍来自 /v1/config）。
   color-mix 拿同一个变量兑出淡底，省得把颜色再抄一遍；老浏览器不支持时
   底色降级为透明，文字颜色仍在，可读性不受影响。 */
.now-level[data-level="low"]  { color: var(--price-low);  background: color-mix(in srgb, var(--price-low) 16%, transparent); }
.now-level[data-level="mid"]  { color: var(--price-mid);  background: color-mix(in srgb, var(--price-mid) 20%, transparent); }
.now-level[data-level="high"] { color: var(--price-high); background: color-mix(in srgb, var(--price-high) 18%, transparent); }
.now-level[data-level="peak"] { color: var(--price-peak); background: color-mix(in srgb, var(--price-peak) 16%, transparent); }

#chart { width: 100%; height: 260px; display: block; }
#chart .bar.now { stroke: var(--text); stroke-width: 2; }
#chart text { fill: var(--text-dim); font-size: 10px; }

.chart-status { color: var(--text-dim); font-size: 15px; padding: 40px 0; text-align: center; }
.chart-status[hidden] { display: none; }

.stats { display: flex; gap: 24px; flex-wrap: wrap; margin-top: 16px; }
.stat { min-width: 96px; }
.stat .label { font-size: 13px; color: var(--text-dim); display: block; }
.stat .value { font-size: 22px; font-weight: 650; letter-spacing: -0.01em; }
.stat .unit { font-size: 13px; color: var(--text-dim); }

.legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 14px; font-size: 13px; color: var(--text-dim); }
.legend span { display: inline-flex; align-items: center; gap: 6px; }
.legend i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---- 内容区块 ---- */

section.block { padding: 40px 0; }
section.block h2 { font-size: 24px; letter-spacing: -0.01em; margin: 0 0 12px; }
.features { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.feature h3 { font-size: 17px; margin: 0 0 6px; }
.feature p { margin: 0; color: var(--text-dim); font-size: 15px; }

/* 页面底部的粒度说明。压低视觉重量：它是解释，不跟 features 抢注意力。 */
.note-block { padding: 8px 0 40px; }
.note-block h2 { font-size: 19px; }
.note-block p { color: var(--text-dim); font-size: 15px; max-width: 640px; margin: 0; }

.cta { text-align: center; padding: 48px 0 64px; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: var(--accent-contrast);
  padding: 12px 22px; border-radius: 10px; text-decoration: none; font-weight: 600;
}
.price-note { color: var(--text-dim); font-size: 14px; margin-top: 12px; }

/* ---- 法务页 ---- */

.legal { padding: 40px 0 64px; max-width: 720px; }
.legal h1 { font-size: 30px; margin: 0 0 6px; }
.legal .subtitle { color: var(--text-dim); margin: 0 0 28px; }
.legal section { margin-bottom: 28px; }
.legal h2 { font-size: 19px; margin: 0 0 8px; }
.legal h3 { font-size: 16px; margin: 18px 0 6px; }
.legal p, .legal li { color: var(--text-dim); }
.legal a { color: var(--accent); }

/* ---- 页脚 ---- */

footer {
  border-top: 1px solid var(--border); padding: 28px 0 40px;
  color: var(--text-dim); font-size: 14px;
}
footer .wrap { display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between; }
footer a { color: var(--text-dim); }