/* ============================================================
   layout.css — 骨架层
   页面栅格 / 顶栏 / 响应式断点
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.55;
  color: var(--text);
  background: var(--bg-grad), var(--bg);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button, select { font: inherit; color: inherit; }
a { color: var(--blue); text-decoration: none; }

/* 滚动条 */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--line-strong);
  border-radius: var(--r-pill);
}
::-webkit-scrollbar-thumb:hover { background: var(--text-mute); }

/* ══════════════ 顶栏 ══════════════ */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid var(--line);
}

.topbar__left,
.topbar__right {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

/* ══════════════ 主容器 ══════════════ */
.wrap {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: var(--sp-4) var(--sp-5) var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* ══════════════ 栅格 ══════════════ */
.grid {
  display: grid;
  gap: var(--gap);
}

.grid--hero {
  grid-template-columns: 1.35fr 1fr 0.95fr;
}

.grid--2 {
  grid-template-columns: 1fr 1fr;
}

.grid--3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--kline {
  grid-template-columns: 2.15fr 1fr;
}

.grid--wide {
  grid-template-columns: 1.5fr 1fr;
}

.grid--bottom {
  grid-template-columns: 1.45fr 0.85fr 0.85fr;
}

/* ══════════════ 页脚 ══════════════ */
.footer {
  max-width: var(--wrap-max);
  margin: 0 auto;
  padding: 0 var(--sp-5) var(--sp-6);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-4);
  color: var(--text-mute);
  font-size: var(--fs-xs);
}

/* ══════════════ 响应式 ══════════════ */
@media (max-width: 1440px) {
  .grid--hero { grid-template-columns: 1.4fr 1fr; }
  .card--position { grid-column: 1 / -1; }
  .card--position .pos { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
  .card--position .minis { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 1180px) {
  .grid--3,
  .grid--bottom { grid-template-columns: 1fr 1fr; }
  .grid--kline { grid-template-columns: 1fr; }
  .card--narrative { grid-column: 1 / -1; }
}

@media (max-width: 900px) {
  :root { --gap: 10px; }
  .wrap { padding: var(--sp-3); }
  .grid--hero,
  .grid--2,
  .grid--3,
  .grid--wide,
  .grid--bottom { grid-template-columns: 1fr; }
  .topbar { padding: 0 var(--sp-3); gap: var(--sp-2); }
  .brand__sub { display: none; }
  .topbar__right .btn { padding: 5px 8px; }
  .tick { display: none; }
}

@media (max-width: 620px) {
  .brand__name { font-size: var(--fs-md); }
  .grid--hero { grid-template-columns: 1fr; }
  .footer { flex-direction: column; gap: 4px; }
}