/* ═══════════════════════════════════════════════════════════════
   暗金色主题  Dark-Gold Theme
   主色  #c9a84c  背景  #131208  卡片  #1e1c10  边框  #3a3318
   ═══════════════════════════════════════════════════════════════ */

/* ─── CSS 变量 ──────────────────────────────────────────────── */
:root {
  --gold:        #c9a84c;
  --gold-light:  #e8c96a;
  --gold-dim:    #7a6428;
  --gold-glow:   rgba(201,168,76,.18);
  --bg:          #131208;
  --bg-card:     #1e1c10;
  --bg-card2:    #252210;
  --bg-input:    #2a2710;
  --border:      #3a3318;
  --border-soft: #2e2b14;
  --text:        #e8dfc0;
  --text-muted:  #8a7d52;
  --text-dim:    #5a5030;
  --red:         #e05c5c;
  --green:       #52c97a;
}

/* ─── 基础 ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  font-size: 0.875rem;
  background: var(--bg);
  color: var(--text);
  font-family: 'Segoe UI', 'PingFang SC', 'Microsoft YaHei', sans-serif;
}

/* ─── 滚动条 ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--gold-dim); border-radius: 3px; }

/* ─── Bootstrap 覆盖：导航栏 ────────────────────────────────── */
.navbar {
  position: sticky; top: 0; z-index: 1030;
  background: linear-gradient(90deg, #0d0c05 0%, #1e1a08 100%) !important;
  border-bottom: 1px solid var(--gold-dim);
  box-shadow: 0 2px 12px rgba(0,0,0,.6);
}

.nav-item{
  margin-right: 1rem;
}

.navbar-brand {
  color: var(--gold) !important;
  font-weight: 700;
  letter-spacing: .04em;
  font-size: 1rem;
}
#nav-last-update { color: var(--text-muted) !important; font-size: .75rem; }

/* ─── Bootstrap 覆盖：主 Tab ────────────────────────────────── */
.nav-tabs {
  border-bottom: 1px solid var(--border);
}
.nav-tabs .nav-link {
  color: var(--text-muted);
  border: 1px solid transparent;
  border-radius: 6px 6px 0 0;
  padding: .45rem .9rem;
  font-size: .82rem;
  transition: color .15s, background .15s;
}
.nav-tabs .nav-link:hover { color: var(--gold-light); background: var(--bg-card2); }
.nav-tabs .nav-link.active {
  color: var(--gold);
  background: var(--bg-card);
  border-color: var(--border) var(--border) transparent;
}

/* ─── Bootstrap 覆盖：子 Tab (pills) ───────────────────────── */
.nav-pills .nav-link {
  color: var(--text-muted);
  padding: .25rem .75rem;
  font-size: .8rem;
  border-radius: 20px;
  border: 1px solid var(--border-soft);
}
.nav-pills .nav-link:hover { color: var(--gold-light); background: var(--bg-card2); }
.nav-pills .nav-link.active {
  background: var(--gold-dim);
  color: var(--gold-light);
  border-color: var(--gold-dim);
}

/* ─── Bootstrap 覆盖：卡片 / 容器 ──────────────────────────── */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}
.card-header {
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
  color: var(--gold-light);
}

/* ─── Bootstrap 覆盖：表单控件 ─────────────────────────────── */
.form-control, .form-select {
  background: var(--bg-input);
  border: 1px solid var(--border);
  color: var(--text);
}
.form-control:focus, .form-select:focus {
  background: var(--bg-input);
  border-color: var(--gold-dim);
  color: var(--text);
  box-shadow: 0 0 0 .2rem var(--gold-glow);
}
.form-control::placeholder { color: var(--text-dim); }
.form-label { color: var(--text-muted); }

/* ─── Bootstrap 覆盖：按钮 ──────────────────────────────────── */
.btn-primary {
  background: var(--gold-dim);
  border-color: var(--gold-dim);
  color: var(--gold-light);
}
.btn-primary:hover, .btn-primary:focus {
  background: #9a7d30;
  border-color: #9a7d30;
  color: #f0e0a0;
}
.btn-outline-primary {
  border-color: var(--gold-dim);
  color: var(--gold);
}
.btn-outline-primary:hover { background: var(--gold-dim); color: var(--gold-light); }

.btn-outline-secondary {
  border-color: var(--border);
  color: var(--text-muted);
}
.btn-outline-secondary:hover { background: var(--bg-card2); color: var(--text); border-color: var(--text-dim); }

.btn-outline-success  { border-color: #3a7a50; color: var(--green); }
.btn-outline-success:hover { background: #1e4030; color: var(--green); border-color: var(--green); }

.btn-outline-warning  { border-color: #7a6020; color: #d4a030; }
.btn-outline-warning:hover { background: #3a2e10; color: #e8b840; border-color: #d4a030; }

.btn-outline-danger   { border-color: #6a2828; color: var(--red); }
.btn-outline-danger:hover { background: #3a1818; color: #f07070; border-color: var(--red); }

.btn-close { filter: invert(1) sepia(1) saturate(2) hue-rotate(10deg); opacity: .5; }
.btn-close:hover { opacity: 1; }

/* ─── Bootstrap 覆盖：badge ─────────────────────────────────── */
.badge.bg-secondary { background: var(--bg-card2) !important; color: var(--text-muted); border: 1px solid var(--border); }
.badge.bg-success   { background: #1e4a2e !important; color: var(--green); }
.badge.bg-danger    { background: #4a1e1e !important; color: var(--red); }
.badge.bg-primary   { background: var(--gold-dim) !important; color: var(--gold-light); }
.badge.bg-info      { background: #a5c7dc !important; color: #6ab8d8; }

/* ─── Bootstrap 覆盖：표格 ──────────────────────────────────── */
.table {
  --bs-table-bg: transparent;
  --bs-table-striped-bg: rgba(201,168,76,.04);
  --bs-table-hover-bg: rgba(201,168,76,.08);
  --bs-table-color: var(--text);
  --bs-table-border-color: var(--border-soft);
  color: var(--text);
}
.table-dark, thead.table-dark {
  --bs-table-bg: #0e0d06;
  --bs-table-color: var(--gold-light);
  --bs-table-border-color: var(--border);
}
.table-light {
  --bs-table-bg: var(--bg-card2);
  --bs-table-color: var(--text-muted);
}
.table-striped > tbody > tr:nth-of-type(odd) > td { background: rgba(201,168,76,.03); }
.table-hover > tbody > tr:hover > td { background: rgba(201,168,76,.07); }
.table th, .table td { border-color: var(--border-soft); }
.sticky-top { position: sticky; top: 0; z-index: 2; }

/* ─── Bootstrap 覆盖：modal ─────────────────────────────────── */
.modal-content {
  background: var(--bg-card);
  border: 1px solid var(--border);
  color: var(--text);
}
.modal-header {
  background: var(--bg-card2);
  border-bottom: 1px solid var(--border);
}
.modal-title { color: var(--gold-light); }
.modal-footer { border-top: 1px solid var(--border); }
.modal-backdrop { background: rgba(0,0,0,.75); }

/* ─── Bootstrap 覆盖：分页 ─────────────────────────────────── */
.page-link {
  background: var(--bg-card2);
  border-color: var(--border);
  color: var(--text-muted);
}
.page-link:hover { background: var(--bg-card); color: var(--gold); border-color: var(--gold-dim); }
.page-item.active .page-link { background: var(--gold-dim); border-color: var(--gold-dim); color: var(--gold-light); }
.page-item.disabled .page-link { background: var(--bg); color: var(--text-dim); border-color: var(--border-soft); }

/* ─── Bootstrap 覆盖：alert ─────────────────────────────────── */
.alert-success { background: #1a3a24; border-color: #2a5a34; color: #8de0a8; }
.alert-warning { background: #2e2408; border-color: #5a4210; color: #d4aa50; }
.alert-danger  { background: #3a1010; border-color: #6a2020; color: #e89090; }
.alert-info    { background: #0e2030; border-color: #1a3850; color: #80c8e8; }

/* ─── Bootstrap 覆盖：form-switch ──────────────────────────── */
.form-check-input { background-color: var(--bg-card2); border-color: var(--border); }
.form-check-input:checked { background-color: var(--gold-dim); border-color: var(--gold-dim); }
.form-check-input:focus { box-shadow: 0 0 0 .2rem var(--gold-glow); }

/* ─── Bootstrap 覆盖：hr ────────────────────────────────────── */
hr { border-color: var(--border); opacity: 1; }

/* ─── 导航栏 ────────────────────────────────────────────────── */
.container-fluid { padding-top: 0; }

/* ─── 市场行情表格 ──────────────────────────────────────────── */
#market-table th, #market-table td,
.mst-tbody td, .mst-tbody th { white-space: nowrap; }

.mst-refresh-time {
  font-size: .72rem;
  color: var(--text-muted);
  padding: .15rem 0 .3rem;
  min-height: 1.1rem;
}

.price-up   { color: var(--red);   font-weight: 600; }
.price-down { color: var(--green); font-weight: 600; }
.price-flat { color: var(--text-muted); }

/* price tick flash */
@keyframes flash-up   { 0%,100%{background:transparent} 30%{background:rgba(224,92,92,.2)} }
@keyframes flash-down { 0%,100%{background:transparent} 30%{background:rgba(82,201,122,.15)} }
.price-tick { transition: color .2s; }
.price-up.price-tick   { animation: flash-up   1.2s ease; }
.price-down.price-tick { animation: flash-down 1.2s ease; }
.price-tick small { font-size: .65rem; vertical-align: middle; opacity: .75; }

/* ─── 模板卡片 ──────────────────────────────────────────────── */
.tmpl-card {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.7rem 0.9rem;
  margin-bottom: 0.45rem;
  background: var(--bg-card);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.tmpl-card:hover {
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 2px var(--gold-glow);
}
.tmpl-card.active {
  border-color: var(--gold);
  background: #272210;
  box-shadow: 0 0 0 2px var(--gold-glow);
}
.tmpl-card .tmpl-name { font-weight: 600; color: var(--gold-light); }
.tmpl-card .tmpl-meta { font-size: 0.73rem; color: var(--text-muted); margin-top: .1rem; }

/* ─── 列配置行 ──────────────────────────────────────────────── */
.col-config-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.45rem;
}

/* ─── 公式配置行 ─────────────────────────────────────────────── */
.formula-row {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.55rem 0.7rem;
  margin-bottom: 0.45rem;
}
.col-config-row .var-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--gold-dim);
  color: var(--gold-light);
  font-weight: 700;
  font-size: 0.8rem;
  flex-shrink: 0;
  border: 1px solid var(--gold);
}

/* ─── 比对区块 ──────────────────────────────────────────────── */
.compare-section {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 1.5rem;
}
.compare-section .section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7rem;
  flex-wrap: wrap;
  gap: .5rem;
  padding-bottom: .6rem;
  border-bottom: 1px solid var(--border-soft);
}
.compare-section .section-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--gold-light);
}

.countdown-badge {
  font-size: 0.73rem;
  padding: 0.18rem 0.5rem;
  border-radius: 12px;
  background: var(--bg-card2);
  color: var(--text-muted);
  border: 1px solid var(--border-soft);
}
.countdown-badge.soon {
  background: #2e1e04;
  color: #c8940a;
  border-color: #6a4a10;
}

/* ─── 筛选栏 ────────────────────────────────────────────────── */
.filter-bar {
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
  align-items: center;
  padding: .45rem .7rem;
  background: var(--bg-card2);
  border-radius: 6px;
  border: 1px solid var(--border-soft);
  margin-bottom: .55rem;
}
.filter-bar label { font-size: .77rem; color: var(--text-muted); margin-bottom: 0; white-space: nowrap; }

/* ─── 比对表格 ──────────────────────────────────────────────── */
.compare-table-wrap { max-height: 52vh; overflow-y: auto; }
.compare-table { font-size: 0.82rem; }
.compare-table thead {
  position: sticky; top: 0;
  background: #0e0c04;
  color: var(--gold-light);
}
.compare-table thead th {
  border-color: var(--border);
  font-weight: 600;
  letter-spacing: .02em;
  white-space: pre-wrap;
}
.compare-table thead th::before {
  /* 关键：保留换行符 */
  white-space: pre-wrap; 
}
.compare-table td.result-col, .compare-table th.result-col {
  font-weight: 700;
  color: var(--gold);
}

/* ─── 分页栏 ────────────────────────────────────────────────── */
.pagination-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .4rem;
  padding: .4rem .5rem 0;
  font-size: .8rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border-soft);
  margin-top: .3rem;
}
.pagination-bar .page-info { white-space: nowrap; }
.pagination-bar .pagination { margin-bottom: 0; }
.pagination-bar .pagination .page-link { padding: .2rem .5rem; font-size: .78rem; }
.page-size-select { width: 100px; }

/* ─── Symbol 选择器 ─────────────────────────────────────────── */
.symbol-picker-wrap { position: relative; }
.symbol-picker      { position: relative; }

.sp-display {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .25rem .5rem;
  background: var(--bg-input);
  border: 1px solid var(--border);
  border-radius: .375rem;
  cursor: pointer;
  font-size: .8rem;
  min-height: 31px;
  user-select: none;
  color: var(--text);
}
.sp-display:focus {
  outline: none;
  border-color: var(--gold-dim);
  box-shadow: 0 0 0 .2rem var(--gold-glow);
}
.sp-value-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-arrow { font-size: .7rem; color: var(--text-dim); margin-left: .3rem; flex-shrink: 0; }

.sp-dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  z-index: 1050;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: .375rem;
  box-shadow: 0 6px 24px rgba(0,0,0,.6);
  min-width: 260px;
  width: max-content;
  max-width: 340px;
}
.sp-search-wrap {
  padding: .4rem .5rem;
  border-bottom: 1px solid var(--border-soft);
}
.sp-list { max-height: 260px; overflow-y: auto; }

.sp-group-label {
  padding: .3rem .65rem .15rem;
  font-size: .68rem;
  font-weight: 700;
  color: var(--gold-dim);
  text-transform: uppercase;
  letter-spacing: .06em;
  background: #0e0d06;
  position: sticky;
  top: 0;
  border-bottom: 1px solid var(--border-soft);
}
.sp-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .3rem .65rem;
  cursor: pointer;
  font-size: .8rem;
  gap: .5rem;
  transition: background .1s;
}
.sp-item:hover { background: #2a2510; }
.sp-item.active { background: var(--gold-dim); color: var(--gold-light); }
.sp-item.active .sp-item-sym { color: rgba(232,201,106,.7); }
.sp-item-name { flex: 1; color: var(--text); }
.sp-item-sym { font-size: .72rem; color: var(--text-dim); white-space: nowrap; font-family: monospace; }
.sp-empty { padding: .6rem .65rem; color: var(--text-dim); font-size: .8rem; }

/* ─── 市场管理表格 ───────────────────────────────────────────── */
.table-bordered td, .table-bordered th { border-color: var(--border) !important; }

/* ─── 通用 ──────────────────────────────────────────────────── */
.btn .spinner-border { vertical-align: middle; }
code { color: var(--gold); background: rgba(201,168,76,.08); padding: .1rem .3rem; border-radius: 3px; }

/* fw-semibold / fw-bold in dark context */
.fw-semibold, .fw-bold { color: var(--text); }
.section-title, .modal-title, .card-header .fw-semibold { color: var(--gold-light) !important; }

/* ─── 主 Tab 切换（避免与子 tab-content 冲突）──────────────── */
.main-tab-content { padding-top: .75rem; }
.main-tab-pane    { display: none; }
.main-tab-pane.show.active { display: block; }

/* ─── 分割线金色装饰 ─────────────────────────────────────────── */
.tab-content { padding-top: .75rem; }
.market-subtabs-wrap {
  display: flex;
  align-items: center;
  overflow-x: auto;
  overflow-y: hidden;
  width: 100%;
  scrollbar-width: thin;
}
.market-subtabs-wrap::-webkit-scrollbar { height: 4px; }
.market-subtabs-wrap::-webkit-scrollbar-thumb { background: var(--border); border-radius: 2px; }
#market-subtabs { flex-wrap: nowrap; white-space: nowrap; }

/* ─── 区域统计面板 ───────────────────────────────────────────── */
.zone-stats-panel {
  margin-bottom: .55rem;
}
.zone-stats-inner {
  background: var(--bg-card2);
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  padding: .55rem .75rem;
}
.zone-stats-title {
  font-size: .78rem;
  font-weight: 700;
  color: var(--gold-light);
  margin-bottom: .4rem;
}
.zone-stats-total {
  font-weight: 400;
  color: var(--text-muted);
  margin-left: .3rem;
}
.zone-stats-body {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
}
.zone-formula-block {
  flex: 1;
  min-width: 220px;
}
.zone-formula-label {
  font-size: .73rem;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: .25rem;
  border-bottom: 1px solid var(--border-soft);
  padding-bottom: .15rem;
}
.zone-items {
  display: flex;
  flex-direction: column;
  gap: .18rem;
}
.zone-item {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .75rem;
}
.zone-item-name {
  width: 110px;
  flex-shrink: 0;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.zone-bar-wrap {
  flex: 1;
  background: var(--bg);
  border-radius: 3px;
  height: 10px;
  overflow: hidden;
  min-width: 60px;
}
.zone-bar {
  height: 100%;
  background: var(--gold-dim);
  border-radius: 3px;
  transition: width .3s ease;
}
.zone-bar-other {
  background: var(--text-dim);
}
.zone-item-pct {
  width: 42px;
  text-align: right;
  color: var(--gold-light);
  font-weight: 600;
  flex-shrink: 0;
}
.zone-item-count {
  width: 42px;
  text-align: right;
  color: var(--text-muted);
  flex-shrink: 0;
}
.zone-item-other .zone-item-name { color: var(--text-muted); }
.zone-item-other .zone-item-pct  { color: var(--text-muted); font-weight: 400; }