/* ==========================================================================
   今日黄金价格 — 样式表
   规则顺序与原单文件版本保持一致，避免层叠结果发生变化。
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 设计令牌 — 深色（默认）
   -------------------------------------------------------------------------- */
:root{
  --bg:#0b0d10;
  --bg-gradient: radial-gradient(1200px 600px at 70% -10%, #1a2030 0%, #0c0f14 45%, #0b0d10 70%) fixed;
  --card:#12161c;
  --text:#e8edf4;
  --muted:#8a93a6;
  --border:#1b222b;
  --divider:rgba(255,255,255,.08);
  --accent:#7aa2f7;
  --rise:#ff6574;              /* 涨：国内习惯用红 */
  --fall:#28d17c;              /* 跌：国内习惯用绿 */
  --shadow:0 10px 30px rgba(0,0,0,.35);
  --skeleton-bg:#0f1319;
  --skeleton-sheen:rgba(255,255,255,.08);
  --radius:20px;
  --space:18px;
  --fz-price:44px;
  --fz-chg:16px;
  --fz-title:22px;
}

/* --------------------------------------------------------------------------
   2. 设计令牌 — 浅色覆盖
   -------------------------------------------------------------------------- */
[data-theme="light"]{
  --bg:#f6f7fb;
  --bg-gradient: radial-gradient(1200px 600px at 70% -10%, #ffffff 0%, #eef2f9 60%, #f6f7fb 100%) fixed;
  --card:#ffffff;
  --text:#0c1116;
  --muted:#6b7280;
  --border:#e5e7eb;
  --divider:rgba(0,0,0,.08);
  --accent:#2563eb;
  --rise:#e11d48;
  --fall:#16a34a;
  --shadow:0 8px 24px rgba(0,0,0,.08);
  --skeleton-bg:#eef2f7;
  --skeleton-sheen:rgba(0,0,0,.06);
}

/* --------------------------------------------------------------------------
   3. 基础重置与页面容器
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:16px/1.5 -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  color:var(--text);
  background:var(--bg-gradient), var(--bg);
  transition: background-color .25s ease, color .2s ease;
  padding-left:max(16px, env(safe-area-inset-left));
  padding-right:max(16px, env(safe-area-inset-right));
}
.wrap{max-width:980px;margin:24px auto 28px; padding-bottom:calc(var(--space)*2);}

/* --------------------------------------------------------------------------
   4. 页头
   -------------------------------------------------------------------------- */
.hdr{
  display:grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title tools"
    "updated tools";
  align-items:center;
  gap:10px 14px;
  margin-bottom:12px;
}
.hdr-title{ grid-area:title; font-weight:800; font-size:var(--fz-title); letter-spacing:.4px; }
.hdr-tools{
  grid-area:tools;
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:flex-end;
}
.hdr-updated{ grid-area:updated; color:var(--muted); font-size:14px; }

/* 实时指示灯：每次拉到新数据脉冲一次 */
.badge{
  display:inline-flex; align-items:center; gap:8px; font-size:12px;
  color:#c7d2fe; background:rgba(122,162,247,.12); border:1px solid rgba(122,162,247,.25);
  padding:8px 12px; border-radius:999px;
}
[data-theme="light"] .badge{color:#1d4ed8;background:rgba(37,99,235,.08);border-color:rgba(37,99,235,.25);}
.dot{width:8px;height:8px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 0 rgba(122,162,247,.7)}
.dot.pulse{animation:pulse 1.4s ease-out 1}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(122,162,247,.7)}70%{box-shadow:0 0 0 14px rgba(122,162,247,0)}100%{box-shadow:0 0 0 0 rgba(122,162,247,0)}}

/* 主题切换按钮 */
.tbtn{
  border:1px solid var(--border); background:var(--card); color:var(--text);
  padding:9px 12px; border-radius:999px; cursor:pointer; font-size:12px; line-height:1;
  display:inline-flex; align-items:center; gap:6px; box-shadow:var(--shadow);
  transition:background .2s,border-color .2s,transform .06s,color .2s;
}
.tbtn:hover{ border-color:var(--accent) }
.tbtn:active{ transform:translateY(1px) }

/* 窄屏：页头改为三行居中 */
@media (max-width:600px){
  :root{ --fz-title:20px; }
  .hdr{
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "tools"
      "updated";
    justify-items:center;
    gap:8px;
    margin-bottom:6px;
  }
  .hdr-tools{ justify-content:center; }
  .tbtn{ padding:10px 14px; font-size:13px; }
  .badge{ padding:9px 12px; }
  .hdr-updated{ font-size:13px; }
}

/* --------------------------------------------------------------------------
   5. 卡片
   -------------------------------------------------------------------------- */
.grid{display:grid;grid-template-columns:1fr;gap:var(--space);}

.card{
  background:linear-gradient(180deg, rgba(255,255,255,.02), rgba(255,255,255,0)) , var(--card);
  border:1px solid var(--border); border-radius:var(--radius);
  box-shadow:var(--shadow); overflow:hidden; position:relative;
  transition: background-color .25s ease, border-color .25s ease, box-shadow .25s ease;
}
.card-head{ padding:16px 18px 10px; border-bottom:1px dashed var(--divider); }
.card-title{ font-weight:800; font-size:20px; letter-spacing:.2px; }
.card-sub{ color:var(--muted); font-size:13px; margin-top:4px; }
.card-body{ padding:18px; display:grid; grid-template-columns:1fr; gap:12px; align-items:center; }
.card-body--two{ grid-template-columns:1fr; }

/* 宽屏：伦敦金卡片左右分栏（左行情、右价差） */
@media (min-width: 900px){
  .card-body--two{ grid-template-columns:1fr 1fr; grid-auto-rows:min-content; }
  .card-body--two .kv{ grid-column:1 / -1; }
  .side-stat{ justify-self:center; align-self:center; }
}
.mainpair{ display:grid; gap:12px; }
.side-stat{ text-align:center; display:grid; gap:8px; }

/* --------------------------------------------------------------------------
   6. 价格与涨跌
   -------------------------------------------------------------------------- */
.price{ font-size:var(--fz-price); font-weight:900; letter-spacing:.6px; text-align:center; transition:color .2s; }
.price.up{ color:var(--rise) }
.price.down{ color:var(--fall) }
.chg{ text-align:center; font-weight:800; font-size:var(--fz-chg); margin-top:-2px; transition:color .2s; }
.chg.up{ color:var(--rise) }
.chg.down{ color:var(--fall) }

/* --------------------------------------------------------------------------
   7. 四项指标（今开/昨收/最高/最低）与卡片底栏
   -------------------------------------------------------------------------- */
.kv{
  display:grid; grid-template-columns:repeat(2,1fr); gap:12px; text-align:center;
  border-top:1px dashed var(--divider); padding-top:14px;
}
@media (min-width:700px){ .kv{ grid-template-columns:repeat(4,1fr); } }
.kv small{ display:block; color:var(--muted); font-size:12px; letter-spacing:.2px; }
.kv b{ font-weight:800; font-size:15px }
.foot{
  padding: 0 18px 14px; color:var(--muted); font-size:12px;
  display:flex; gap:10px; justify-content:space-between; align-items:center; flex-wrap:wrap;
}

/* --------------------------------------------------------------------------
   8. 骨架屏（首屏数据到达前的占位）
   -------------------------------------------------------------------------- */
.skeleton{ position:relative; overflow:hidden; background:var(--skeleton-bg); border-radius:12px; height:54px; }
.skeleton::after{ content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,rgba(255,255,255,0) 0%, var(--skeleton-sheen) 50%, rgba(255,255,255,0) 100%);
  animation: shimmer 1.4s infinite; }
@keyframes shimmer{ 100% { transform: translateX(100%); } }

/* --------------------------------------------------------------------------
   9. 工具类
   -------------------------------------------------------------------------- */
.unit{ font-size:14px; color:#a0a9bb; font-weight:700; margin-left:6px; }
[data-theme="light"] .unit{ color:#6b7280; }

/* 原单文件版本里 .muted / .err 在 HTML 和 JS 中被引用，但样式表里漏了定义，
   导致卡片底栏文字和错误提示都拿不到应有的颜色。这里补上。 */
.muted{ color:var(--muted); }
.err{ color:var(--rise); }

/* --------------------------------------------------------------------------
   10. 数据新鲜度提示
   -------------------------------------------------------------------------- */

/* 单张卡片的滞后标记，跟在时间后面 */
.age{
  margin-left:8px; padding:2px 8px; border-radius:999px;
  font-size:11px; font-weight:700; white-space:nowrap;
  color:#f0b429; background:rgba(240,180,41,.12); border:1px solid rgba(240,180,41,.3);
}
[data-theme="light"] .age{ color:#a16207; background:rgba(240,180,41,.14); border-color:rgba(161,98,7,.3); }

/* 全部品种都严重滞后时的横幅 */
.banner{
  margin:0 0 var(--space); padding:12px 16px; border-radius:14px;
  font-size:14px; font-weight:700; line-height:1.5;
  color:#f0b429; background:rgba(240,180,41,.10); border:1px solid rgba(240,180,41,.32);
}
[data-theme="light"] .banner{ color:#92400e; background:rgba(240,180,41,.16); border-color:rgba(161,98,7,.3); }
.banner[hidden]{ display:none; }

/* 底部数据源说明 */
.srcinfo{
  margin:10px 6px 0; color:var(--muted); font-size:12px; line-height:1.6;
}
.srcinfo:empty{ display:none; }