/* 市场透视 · MarketPulse — 象牙纸面 / 深鎏金 · 金融终端亮色风格 */

/* JS 用 hidden 属性控制显隐，需压过元素的 display 规则（如 #login-mask 的 flex） */
[hidden] { display: none !important; }

:root {
  --bg: #f4f5f7;
  --bg-soft: #eceef2;
  --panel: #ffffff;
  --panel-2: #f6f7f9;
  --line: #d4d9e2;
  --line-soft: #e3e7ee;
  --ink: #232a36;
  --ink-mut: #57627a;
  --ink-dim: #8b94a7;
  --slate: #57627a;
  --gold: #b8862f;
  --gold-dim: #b99a55;
  --steel: #5b8bb5;
  --teal: #2e8f6f;
  --red: #c05545;
  /* 主题差异色（暗色在 html[data-theme="dark"] 整组覆盖） */
  --scr-thumb: #b8c0cd;
  --scr-track: #f4f5f7;
  --sel: rgba(184, 134, 47, .22);
  --topbar: linear-gradient(180deg, #ffffff, #f8f9fb);
  --glow: rgba(184, 134, 47, .22);
  --ok-b: rgba(46, 143, 111, .4);
  --warn-b: rgba(184, 134, 47, .4);
  --err-b: rgba(192, 85, 69, .4);
  --chart-mask: rgba(244, 245, 247, .9);
  --seg-a: rgba(184, 134, 47, .12);
  --btn-g: linear-gradient(180deg, #cf9f45, #b8862f);
  --btn-bd: #e0bd7d;
  --btn-ink: #241a05;
  --row-hov: rgba(184, 134, 47, .07);
  --drawer-mask: rgba(28, 35, 50, .35);
  --login-mask: rgba(28, 35, 50, .42);
  --login-block: rgba(244, 245, 247, .98);
  --paid-ink: #3a2a08;
  --paid-g: linear-gradient(135deg, #e2b969, #c9973f);
  --login-sh: rgba(23, 32, 50, .16);
  --guest-bd: rgba(184, 134, 47, .45);
  --guest-bg: rgba(184, 134, 47, .05);
}
/* 暗色主题：整组覆盖调色板（顶栏按钮「暗色/亮色」切换，JS 同步重画图表） */
html[data-theme="dark"] {
  --bg: #0a0e17;
  --bg-soft: #0d1322;
  --panel: #101828;
  --panel-2: #141d31;
  --line: #1d2a44;
  --line-soft: #18233b;
  --ink: #e9edf5;
  --ink-mut: #96a2b8;
  --ink-dim: #5f6b80;
  --slate: #96a2b8;
  --gold: #d5ab5c;
  --gold-dim: #8a7040;
  --steel: #7fa8c9;
  --teal: #67b899;
  --red: #c9695a;
  --scr-thumb: #2a3952;
  --scr-track: #0a0e17;
  --sel: rgba(213, 171, 92, .25);
  --topbar: linear-gradient(180deg, #0c111e, #0a0e17);
  --glow: rgba(213, 171, 92, .35);
  --ok-b: rgba(103, 184, 153, .35);
  --warn-b: rgba(213, 171, 92, .4);
  --err-b: rgba(201, 105, 90, .4);
  --chart-mask: rgba(13, 19, 34, .84);
  --seg-a: rgba(213, 171, 92, .12);
  --btn-g: linear-gradient(180deg, #d9b262, #c39a49);
  --btn-bd: #e2c079;
  --btn-ink: #1c1503;
  --row-hov: rgba(213, 171, 92, .05);
  --drawer-mask: rgba(4, 7, 13, .6);
  --login-mask: rgba(4, 7, 13, .72);
  --login-block: rgba(5, 8, 14, .97);
  --paid-ink: #0a0e17;
  --paid-g: linear-gradient(135deg, #e6c07b, #d5ab5c);
  --login-sh: rgba(0, 0, 0, .5);
  --guest-bd: rgba(213, 171, 92, .45);
  --guest-bg: rgba(213, 171, 92, .06);
  --serif: "Noto Serif SC", "Source Han Serif SC", "STZhongsong", "SimSun", serif;
  --sans: "PingFang SC", "Microsoft YaHei", "Noto Sans CJK SC", "Segoe UI", sans-serif;
  --mono: "Cascadia Mono", Consolas, "SF Mono", monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scrollbar-color: var(--scr-thumb) var(--scr-track); }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.6;
  min-height: 100vh;
}
::selection { background: var(--sel); }

/* ---------- 顶栏 ---------- */
.topbar {
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  height: 64px;
  background: var(--topbar);
  border-bottom: 1px solid var(--line-soft);
  position: sticky;
  top: 0;
  z-index: 40;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand .mark {
  font-size: 22px;
  color: var(--gold);
  line-height: 1;
  text-shadow: 0 0 24px var(--glow);
}
.brand-text h1 {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .12em;
  color: var(--ink);
}
.brand-sub {
  font-size: 10px;
  letter-spacing: .28em;
  color: var(--gold-dim);
  text-transform: uppercase;
}
.nav { display: flex; gap: 4px; flex: 1; }
.nav button {
  appearance: none;
  background: none;
  border: none;
  color: var(--ink-mut);
  font-family: var(--sans);
  font-size: 14px;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 3px;
  position: relative;
  transition: color .15s;
}
.nav button:hover { color: var(--ink); }
.nav button.active { color: var(--gold); }
.nav button.active::after {
  content: "";
  position: absolute;
  left: 16px; right: 16px; bottom: -13px;
  height: 2px;
  background: var(--gold);
}
.topmeta { display: flex; align-items: center; gap: 10px; }
.chip {
  font-size: 12px;
  color: var(--ink-mut);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 12px;
  white-space: nowrap;
  background: var(--panel);
}
.chip.ok { color: var(--teal); border-color: var(--ok-b); }
.chip.warn { color: var(--gold); border-color: var(--warn-b); }
.chip.err { color: var(--red); border-color: var(--err-b); }
.admin-link { color: var(--ink-dim); font-size: 13px; text-decoration: none; }
.admin-link:hover { color: var(--gold); }

/* ---------- 布局 ---------- */
main { max-width: 1360px; margin: 0 auto; padding: 26px 28px 60px; }
.view { display: none; }
.view.active { display: block; animation: fade .25s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

.grid { display: grid; gap: 18px; margin-bottom: 18px; }
.grid-2 { grid-template-columns: 1fr 1fr; }
.ai-grid { align-items: start; }
@media (max-width: 1080px) { .grid-2 { grid-template-columns: 1fr; } }

.view-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  flex-wrap: wrap;
}
.view-note { color: var(--ink-dim); font-size: 12.5px; }

/* ---------- KPI ---------- */
.kpi-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr) 1.6fr;
  border: 1px solid var(--line-soft);
  border-left: 2px solid var(--gold);
  background: linear-gradient(180deg, var(--panel), var(--bg-soft));
  margin-bottom: 18px;
}
.kpi { padding: 20px 24px 16px; border-right: 1px solid var(--line-soft); }
.kpi:last-child { border-right: none; }
.kpi-num {
  font-family: var(--serif);
  font-size: 34px;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--ink);
  font-variant-numeric: tabular-nums;
  line-height: 1.2;
}
.kpi-label {
  color: var(--ink-mut);
  font-size: 13px;
  margin-top: 2px;
  letter-spacing: .08em;
}
.kpi-foot { color: var(--ink-dim); font-size: 12px; margin-top: 6px; min-height: 18px; }
@media (max-width: 1080px) { .kpi-strip { grid-template-columns: 1fr 1fr; } .kpi { border-bottom: 1px solid var(--line-soft); } }

/* ---------- 卡片 ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 4px;
  margin-bottom: 18px;
}
.card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 20px;
  border-bottom: 1px solid var(--line-soft);
}
.card-head h2 {
  font-family: var(--serif);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--ink);
}
.card-head h2::before {
  content: "▪";
  color: var(--gold);
  margin-right: 8px;
  font-size: 12px;
  vertical-align: 2px;
}
.card-note { color: var(--ink-dim); font-size: 12px; }
.chart { width: 100%; height: 320px; padding: 6px 8px; position: relative; }
.chart-half { height: 380px; }
/* 图表分享按钮（卡片头/抽屉头右端） */
.share-btn {
  margin-left: auto;
  appearance: none; background: none;
  border: 1px solid var(--line); border-radius: 3px;
  color: var(--ink-dim); font-size: 12px; font-family: var(--sans);
  padding: 3px 10px; cursor: pointer; letter-spacing: .05em;
  flex: none;
}
.share-btn:hover { color: var(--gold); border-color: var(--gold-dim); }
/* 抽屉头的 button 基础样式（无边框）会盖过 .share-btn，这里加回来 */
.drawer-head .share-btn { border: 1px solid var(--line); border-radius: 3px; font-size: 12px; }
/* 空态蒙版：盖在图表区上层，居中放大说明 */
.chart-mask {
  position: absolute; inset: 0; z-index: 2;
  display: flex; align-items: center; justify-content: center;
  background: var(--chart-mask);
  backdrop-filter: blur(2px);
}
.chart-mask span { font-size: 15px; color: var(--ink-mut); text-align: center; line-height: 1.9; padding: 0 28px; }

/* ---------- 分段选择 / 按钮 ---------- */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 3px; overflow: hidden; }
.seg button {
  appearance: none;
  background: transparent;
  border: none;
  color: var(--ink-mut);
  font-size: 13px;
  padding: 5px 14px;
  cursor: pointer;
  border-right: 1px solid var(--line);
  transition: all .15s;
}
.seg button:last-child { border-right: none; }
.seg button:hover { color: var(--ink); }
.seg button.active { background: var(--seg-a); color: var(--gold); }
.seg-lg button { padding: 7px 20px; font-size: 14px; }

.btn {
  appearance: none;
  background: var(--btn-g);
  border: 1px solid var(--btn-bd);
  color: var(--btn-ink);
  font-family: var(--sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  padding: 7px 18px;
  border-radius: 3px;
  cursor: pointer;
  transition: filter .15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn-ghost {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-mut);
}
.btn-ghost:hover { color: var(--ink); border-color: var(--ink-dim); filter: none; }
.btnrow { display: flex; gap: 10px; margin-top: 14px; }

/* ---------- 表格 ---------- */
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  color: var(--ink-dim);
  font-weight: 500;
  letter-spacing: .06em;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line);
  white-space: nowrap;
  font-size: 12px;
  user-select: none;
}
th.sortable { cursor: pointer; }
th.sortable:hover { color: var(--ink-mut); }
td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--line-soft);
  color: var(--ink-mut);
  vertical-align: top;
}
td.strong { color: var(--ink); font-weight: 500; }
td.num { font-variant-numeric: tabular-nums; text-align: right; }
tr.clickable { cursor: pointer; }
tr.clickable:hover td { background: var(--row-hov); color: var(--ink); }
.tag {
  display: inline-block;
  font-size: 11px;
  color: var(--ink-mut);
  border: 1px solid var(--line);
  border-radius: 2px;
  padding: 0 6px;
  margin: 1px 3px 1px 0;
  white-space: nowrap;
}
.delta-up { color: var(--teal); }
.delta-down { color: var(--red); }
.muted { color: var(--ink-dim); }

.pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 16px;
  font-size: 13px;
  color: var(--ink-mut);
}
.pager button {
  appearance: none;
  background: transparent;
  border: 1px solid var(--line);
  color: var(--ink-mut);
  padding: 4px 12px;
  border-radius: 3px;
  cursor: pointer;
}
.pager button:hover:not(:disabled) { color: var(--ink); }
.pager button:disabled { opacity: .35; cursor: not-allowed; }

/* ---------- 搜索 ---------- */
.searchbox { display: flex; align-items: center; gap: 10px; }
.searchbox input {
  background: var(--panel);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 13px;
  padding: 7px 14px;
  border-radius: 3px;
  width: 280px;
  outline: none;
}
.searchbox input:focus { border-color: var(--gold-dim); }
.search-count { color: var(--ink-dim); font-size: 12px; }

/* ---------- AI ---------- */
.ai-card { padding-bottom: 8px; }
.ai-desc { color: var(--ink-dim); font-size: 12.5px; padding: 10px 20px 0; }
.ai-meta { padding: 8px 20px; color: var(--ink-dim); font-size: 12px; }
.md { padding: 4px 20px 16px; max-height: 640px; overflow-y: auto; }
.md h1, .md h2, .md h3, .md h4 {
  font-family: var(--serif);
  color: var(--ink);
  margin: 18px 0 8px;
  letter-spacing: .06em;
}
.md h1 { font-size: 18px; border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
.md h2 { font-size: 16px; color: var(--gold); }
.md h3 { font-size: 14.5px; }
.md p { margin: 8px 0; color: var(--ink-mut); }
.md strong { color: var(--ink); }
.md ul, .md ol { margin: 8px 0 8px 22px; color: var(--ink-mut); }
.md li { margin: 4px 0; }
.md code {
  font-family: var(--mono);
  font-size: 12px;
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  border-radius: 2px;
  padding: 1px 5px;
  color: var(--steel);
}
.md table { margin: 12px 0; font-size: 12.5px; }
.md th { background: var(--panel-2); color: var(--ink-mut); }
.md td { color: var(--ink-mut); }
.md hr { border: none; border-top: 1px solid var(--line-soft); margin: 14px 0; }
.md blockquote { border-left: 2px solid var(--gold-dim); padding-left: 12px; color: var(--ink-dim); margin: 8px 0; }

.banner {
  padding: 14px 20px;
  color: var(--ink-mut);
  font-size: 13px;
  border-left: 2px solid var(--gold);
}

/* ---------- 设置 ---------- */
.kv { padding: 8px 20px 0; }
.kv .row {
  display: flex;
  justify-content: space-between;
  padding: 7px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 13px;
}
.kv .row span:first-child { color: var(--ink-dim); }
.kv .row span:last-child { color: var(--ink-mut); font-variant-numeric: tabular-nums; }
.field { padding: 12px 20px 0; }
.field label { display: block; color: var(--ink-dim); font-size: 12px; margin-bottom: 6px; letter-spacing: .05em; }
.field input, .field textarea {
  width: 100%;
  background: var(--bg-soft);
  border: 1px solid var(--line);
  color: var(--ink);
  font-family: var(--mono);
  font-size: 12.5px;
  padding: 8px 12px;
  border-radius: 3px;
  outline: none;
  resize: vertical;
}
.field input:focus, .field textarea:focus { border-color: var(--gold-dim); }
.hint { color: var(--ink-dim); font-size: 12px; padding: 12px 20px 4px; line-height: 1.7; }

/* ---------- 抽屉 ---------- */
#drawer-mask {
  position: fixed; inset: 0;
  background: var(--drawer-mask);
  backdrop-filter: blur(2px);
  z-index: 50;
}
#drawer {
  position: fixed; top: 0; right: 0; bottom: 0;
  width: min(560px, 92vw);
  background: var(--panel);
  border-left: 1px solid var(--line);
  z-index: 51;
  overflow-y: auto;
  animation: slide .2s ease;
}
@keyframes slide { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 22px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0;
  background: var(--panel);
}
.drawer-head h2 { font-family: var(--serif); font-size: 18px; letter-spacing: .06em; }
.drawer-head button {
  appearance: none; background: none; border: none;
  color: var(--ink-dim); font-size: 16px; cursor: pointer;
}
.drawer-head button:hover { color: var(--ink); }
#drawer-body { padding: 8px 22px 30px; }
#drawer-body .row {
  display: flex; gap: 14px;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line-soft);
  font-size: 13px;
}
#drawer-body .row b { flex: 0 0 96px; color: var(--ink-dim); font-weight: 500; }
#drawer-body .row span { color: var(--ink-mut); word-break: break-all; }
#drawer-body .spark { height: 140px; margin: 14px 0 4px; }
#drawer-body .spark-title { color: var(--ink-dim); font-size: 12px; margin-top: 12px; }

/* ---------- 登录 ---------- */
#login-mask {
  position: fixed; inset: 0;
  background: var(--login-mask);
  z-index: 60;
  display: flex; align-items: center; justify-content: center;
}
.login-box {
  width: 360px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-top: 2px solid var(--gold);
  border-radius: 4px;
  padding: 26px;
}
.login-box h2 { font-family: var(--serif); letter-spacing: .1em; margin-bottom: 14px; }
.login-box .field { padding: 8px 0 0; }
.login-box .hint { padding: 10px 0 0; min-height: 18px; color: var(--red); }
/* 整站门禁态 = 独立登录页：背景近乎全遮，页面内容不可见 */
#login-mask.blocking { background: var(--login-block); }
.login-brand {
  display: flex; align-items: center; gap: 8px;
  font-family: var(--serif); font-size: 13px; letter-spacing: .14em;
  color: var(--ink-mut); margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--line-soft);
}
.login-brand .mark { color: var(--gold); text-shadow: 0 0 24px rgba(184, 134, 47, .22); }

/* ---------- 管理控制台 ---------- */
.admin-hero {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 18px; padding: 4px 2px 20px;
}
.admin-hero-text h2 {
  font-family: var(--serif);
  font-size: 26px; font-weight: 700;
  letter-spacing: .14em; color: var(--ink);
  display: flex; align-items: center; gap: 10px;
}
.admin-hero-text h2::before {
  content: "◈"; color: var(--gold); font-size: 20px;
  text-shadow: 0 0 24px var(--glow);
}
.admin-hero-text p {
  margin-top: 6px; font-size: 11px; letter-spacing: .32em;
  color: var(--ink-dim); text-transform: uppercase;
}
.admin-hero-actions { display: flex; gap: 10px; padding-bottom: 2px; }
.admin-strip { grid-template-columns: repeat(4, 1fr); }
.admin-strip .kpi-num { font-size: 20px; line-height: 1.5; }
.admin-strip .kpi { padding: 14px 24px 12px; }
.admin-logout { color: var(--ink-mut); }
.admin-logout:hover { color: var(--red); }
@media (max-width: 1080px) {
  .admin-hero { flex-direction: column; align-items: flex-start; gap: 12px; }
}

/* 付费版标识：鎏金实底，与免费组件一眼区分 */
.pill-paid {
  display: inline-block;
  padding: 1px 8px 2px;
  margin-left: 6px;
  font-size: 11px;
  line-height: 1.5;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--paid-ink);
  background: var(--paid-g);
  border-radius: 3px;
  vertical-align: 1px;
}

/* ---------- Toast ---------- */
#toast {
  position: fixed;
  bottom: 28px; left: 50%; transform: translateX(-50%);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-left: 2px solid var(--gold);
  color: var(--ink);
  padding: 10px 22px;
  border-radius: 3px;
  font-size: 13px;
  z-index: 70;
  box-shadow: 0 6px 30px var(--login-sh);
  max-width: 80vw;
}
#toast.err { border-left-color: var(--red); }

/* ==================== 管理页（独立 /admin） ==================== */

/* 访客临时密码生成结果盒 */
.guest-gen-card { margin-bottom: 14px; }
.guest-code-box {
  border: 1px dashed var(--guest-bd);
  background: var(--guest-bg);
  border-radius: 8px;
  padding: 18px 20px;
  margin-bottom: 14px;
}
.guest-code-label { color: var(--slate); font-size: 12px; margin-bottom: 10px; }
.guest-code {
  font-family: "JetBrains Mono", Consolas, monospace;
  font-size: 30px;
  letter-spacing: .35em;
  color: var(--gold);
  text-align: center;
  padding: 10px 0 12px;
  user-select: all;
}
.guest-code-meta { color: var(--slate); font-size: 12px; text-align: center; margin-bottom: 12px; }
.guest-code-cell { font-family: Consolas, monospace; letter-spacing: .1em; }
.btn-sm { padding: 4px 10px; font-size: 12px; }