/* 全局应用框架：品牌、地区切换、视图切换、章节导航。
 * 看板页与大事记页共用，不包含任何看板内容样式。 */

:root {
  --gm-bg: #070a0f;
  --gm-surface: #0e1520;
  --gm-surface-raised: #121b28;
  --gm-border: #1d2a3a;
  --gm-border-strong: #2a3a4f;
  --gm-text: #e6edf5;
  --gm-text-muted: #8b9bb0;
  --gm-gold: #f2b544;
  --gm-gold-deep: #d99423;
  --gm-blue: #5aa9ff;
  --gm-teal: #2dd4a7;
  --gm-red: #ff6b81;
  --gm-violet: #a78bfa;
  --gm-mask: rgba(7, 10, 15, .32);
  --gm-sans: -apple-system, BlinkMacSystemFont, "PingFang SC", "Microsoft YaHei", "Segoe UI", sans-serif;
  --gm-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }

.gm-appbar {
  position: sticky;
  top: 0;
  z-index: 90;
  background: rgba(7, 10, 15, .86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid #1d2a3a;
}
.gm-appbar-inner {
  max-width: 1480px;
  height: 58px;
  margin: 0 auto;
  padding: 0 28px;
  display: flex;
  align-items: center;
  gap: 22px;
}
.gm-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  color: inherit;
  flex-shrink: 0;
}
.gm-mark {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  background: linear-gradient(145deg, #f8c865, var(--accent-2, #d99423));
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent, #f2b544) 64%, #fff), var(--accent-2, #d99423));
  color: #150f05;
  font: 800 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: -.04em;
  box-shadow: 0 4px 18px var(--accent-soft, rgba(242, 181, 68, .16));
}
.gm-copy { display: flex; flex-direction: column; gap: 2px; }
.gm-title { font-size: 13px; font-weight: 650; letter-spacing: .01em; white-space: nowrap; }
.gm-sub { font: 9.5px ui-monospace, "SF Mono", Menlo, monospace; color: #5f7086; letter-spacing: .1em; white-space: nowrap; }

.gm-region-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #1d2a3a;
  border-radius: 10px;
  background: rgba(10, 16, 24, .7);
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.gm-region-tabs::-webkit-scrollbar { display: none; }
.gm-region-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 7px;
  color: #8b9bb0;
  text-decoration: none;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.gm-region-tab i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c, #65768c);
  opacity: .55;
  flex: 0 0 auto;
}
.gm-region-tab:hover { color: #e6edf5; background: rgba(255, 255, 255, .045); }
.gm-region-tab.active {
  color: #e6edf5;
  background: rgba(255, 255, 255, .075);
  box-shadow: inset 0 0 0 1px #2a3a4f;
}
.gm-region-tab.active i {
  opacity: 1;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c, #f2b544) 18%, transparent);
}
.gm-region-tab .rt-short { display: none; }

.gm-appbar-end {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  gap: 16px;
  margin-inline-start: auto;
}
.gm-appbar-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  color: #5f7086;
  font-size: 10.5px;
  white-space: nowrap;
}
.gm-appbar-meta b { color: #8b9bb0; font-weight: 500; }
.gm-live {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #2dd4a7;
  box-shadow: 0 0 0 4px rgba(45, 212, 167, .1);
  margin-right: 7px;
  vertical-align: 1px;
}
.gm-appbar-meta .gm-gen { color: #5f7086; }
.gm-appbar-meta .gm-gen b { font-family: ui-monospace, "SF Mono", Menlo, monospace; }

/* ── 二级栏：视图切换 + 章节导航 + 时间区间 ─────────────────── */
.gm-subbar {
  position: sticky;
  top: 58px;
  z-index: 80;
  background: rgba(7, 10, 15, .9);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(29, 42, 58, .85);
}
.gm-subbar-inner {
  max-width: 1480px;
  margin: 0 auto;
  min-height: 42px;
  padding: 5px 28px;
  display: flex;
  align-items: center;
  gap: 12px;
}
.gm-viewswitch {
  display: flex;
  padding: 2px;
  border: 1px solid #1d2a3a;
  border-radius: 8px;
  background: #0a1018;
  flex: 0 0 auto;
}
.gm-viewswitch a {
  padding: 5px 9px;
  border-radius: 6px;
  color: #8b9bb0;
  font-size: 11px;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
}
.gm-viewswitch a:hover { color: #e6edf5; }
.gm-viewswitch a.active { background: var(--accent-soft, rgba(242,181,68,.14)); color: var(--accent, #f2b544); }

.gm-subnav {
  display: flex;
  align-items: center;
  gap: 1px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.gm-subnav::-webkit-scrollbar { display: none; }
.gm-subnav a {
  padding: 5px 8px;
  border-radius: 6px;
  color: #5f7086;
  font-size: 11px;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: color .15s, background .15s;
}
.gm-subnav a:hover { color: #e6edf5; background: rgba(255, 255, 255, .04); }
.gm-subnav a.active { color: var(--accent, #f2b544); background: var(--accent-soft, rgba(242,181,68,.12)); }
.gm-subnav .sv-sep { width: 1px; height: 14px; background: #1d2a3a; margin: 0 4px; flex: 0 0 auto; }
.gm-subbar-context { color: #8b9bb0; font-size: 11px; white-space: nowrap; }
.gm-subbar-context b { color: #e6edf5; font-weight: 550; }

.gm-range {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}
.gm-range .range-label {
  color: #5f7086;
  font: 9.5px/1 ui-monospace, "SF Mono", Menlo, monospace;
  letter-spacing: .13em;
}
.gm-range .range-group {
  display: flex;
  gap: 2px;
  padding: 2px;
  border: 1px solid #1d2a3a;
  border-radius: 8px;
  background: #0a1018;
}
.gm-range .range-btn {
  border: 0;
  background: transparent;
  color: #8b9bb0;
  padding: 4px 9px;
  border-radius: 6px;
  font: 11px/1 ui-monospace, "SF Mono", Menlo, monospace;
  cursor: pointer;
}
.gm-range .range-btn:hover { color: #e6edf5; }
.gm-range .range-btn.active { background: var(--accent-soft, rgba(242,181,68,.14)); color: var(--accent, #f2b544); }
.gm-range .gm-range-hint { color: #5f7086; font-size: 9.5px; white-space: nowrap; }

@media (max-width: 1180px) {
  .gm-appbar-meta .gm-gen { display: none; }
}
@media (max-width: 980px) {
  .gm-appbar-inner { padding: 0 20px; gap: 14px; }
  .gm-subbar-inner { padding: 5px 20px; }
  .gm-copy { display: none; }
  .gm-region-tab { padding: 6px 8px; }
  .gm-appbar-meta { display: none; }
}
@media (max-width: 760px) {
  .gm-subnav { display: none; }
  .gm-appbar-inner { height: 52px; padding: 0 12px; gap: 10px; }
  .gm-subbar { top: 52px; }
  .gm-subbar-inner { padding: 4px 12px; gap: 8px; }
  .gm-mark { width: 31px; height: 31px; }
  .gm-region-tab .rt-long { display: none; }
  .gm-region-tab .rt-short { display: inline; }
  .gm-region-tab { padding: 6px 7px; font-size: 11.5px; }
  .gm-region-tabs { padding: 2px; }
  .gm-range .gm-range-hint, .gm-range .range-label { display: none; }
  .gm-range .range-btn { padding: 4px 7px; }
}
@media (max-width: 560px) {
  .gm-viewswitch a { padding: 5px 6px; font-size: 10.5px; }
  .gm-subnav a { padding: 5px 6px; font-size: 10.5px; }
  .gm-subbar-inner { overflow-x: auto; scrollbar-width: none; }
  .gm-subbar-inner::-webkit-scrollbar { display: none; }
}

[hidden] { display: none !important; }


/* 后端数据刷新提示 */
.data-updated-toast {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 1200;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--accent-line, rgba(242,181,68,.38));
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(18, 27, 40, .98), rgba(10, 16, 24, .98));
  box-shadow: 0 16px 40px rgba(0, 0, 0, .45);
  color: #e6edf5;
  font-size: 11px;
  animation: dut-in .18s ease-out;
}
.data-updated-toast .dut-text { display: flex; flex-direction: column; gap: 2px; }
.data-updated-toast .dut-text b { font-size: 11.5px; }
.data-updated-toast .dut-text span { color: #8b9bb0; font: 9.5px ui-monospace, Menlo, monospace; }
.data-updated-toast .dut-refresh {
  border: 1px solid var(--accent, #f2b544);
  border-radius: 7px;
  background: var(--accent, #f2b544);
  color: #140f06;
  font: 600 10.5px/1 var(--sans, sans-serif);
  padding: 6px 9px;
  cursor: pointer;
}
.data-updated-toast .dut-refresh:hover { filter: brightness(1.08); }
.data-updated-toast .dut-close {
  border: 0;
  background: transparent;
  color: #5f7086;
  font-size: 15px;
  line-height: 1;
  padding: 2px 3px;
  cursor: pointer;
}
.data-updated-toast .dut-close:hover { color: #e6edf5; }
@keyframes dut-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 560px) {
  .data-updated-toast { left: 12px; right: 12px; bottom: 12px; justify-content: space-between; }
}


.gm-account {
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.gm-account a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 10px;
  border-radius: 7px;
  color: #e6edf5;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}
.gm-account a:hover { background: rgba(255, 255, 255, .07); }
.gm-account a.gm-signup {
  background: var(--accent, #f2b544);
  color: #0b111a;
}
.gm-account a.gm-signup:hover {
  background: color-mix(in srgb, var(--accent, #f2b544) 84%, white);
}
.gm-account a:focus-visible, .macro-gate:focus-visible, .macro-gate a:focus-visible {
  outline: 2px solid var(--accent, #f2b544);
  outline-offset: 3px;
}

.macro-locked-card:not(details) {
  display: flex;
  flex-direction: column;
}
.macro-locked {
  flex: 1;
  min-height: 100px;
  position: relative;
  isolation: isolate;
  display: grid;
}
.macro-locked::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  border-radius: 8px;
  background: var(--gm-mask);
  content: "";
}
.macro-locked-content, .macro-locked > .macro-gate { grid-area: 1 / 1; }
.macro-locked-content { min-width: 0; }
.macro-locked-content .chart:empty {
  min-height: 220px;
  background: repeating-linear-gradient(to bottom, transparent 0 43px, rgba(148, 170, 200, .10) 43px 44px);
}
.macro-locked-content :is(.facts, .table-scroll, .matrix-scroll, #buildBox):empty {
  min-height: 112px;
}

.macro-gate {
  z-index: 2;
  text-align: center;
}
.macro-locked > .macro-gate {
  align-self: center;
  justify-self: center;
  margin: 8px;
}
.macro-card-gate {
  --gate-reveal: 0;
  display: grid;
  place-items: center;
  min-height: 40px;
  text-decoration: none;
}
.macro-card-gate > * {
  grid-area: 1 / 1;
  transition: opacity .16s ease, transform .18s cubic-bezier(.16, 1, .3, 1);
}
.macro-lock-icon {
  color: #8b9bb0;
  opacity: calc(1 - var(--gate-reveal));
  transform: scale(calc(1 - .16 * var(--gate-reveal)));
}
.macro-gate-action {
  opacity: var(--gate-reveal);
  transform: scale(calc(.92 + .08 * var(--gate-reveal)));
}
.macro-card-gate:is(:focus-visible, [data-revealed]) { --gate-reveal: 1; }
@media (hover: hover) {
  .macro-locked-card:hover > .macro-locked > .macro-card-gate { --gate-reveal: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .macro-card-gate > * {
    transition: opacity .1s linear;
    transform: none;
  }
}
.mini-card .macro-locked { min-height: 56px; }
.macro-gate h2 {
  margin: 0 0 12px;
  color: #e6edf5;
  font-size: 18px;
  font-weight: 650;
}
@media (max-width: 400px) {
  .gm-appbar-inner { gap: 6px; }
  .gm-region-tab { padding-inline: 3px; }
  .gm-account a { padding-inline: 7px; }
}