/* ============================================================
   base.css · 重置 / 排版 / 布局工具类
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--bg); color: var(--ink);
  font-family: var(--font-ui); font-size: 14px; line-height: 1.6;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, h5, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2, h3, h4 { line-height: 1.3; font-weight: 650; letter-spacing: -.01em; text-wrap: balance; }
h1 { font-size: 26px; } h2 { font-size: 20px; } h3 { font-size: 16px; } h4 { font-size: 14px; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
a.plain, a.plain:hover { color: inherit; text-decoration: none; }
img, svg, video, canvas { display: block; max-width: 100%; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
button:disabled { cursor: not-allowed; opacity: .5; }
table { border-collapse: collapse; width: 100%; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
[hidden] { display: none !important; }
::selection { background: rgba(0, 144, 213, .25); }
.ico { flex: 0 0 auto; display: inline-block; vertical-align: -0.2em; }

/* 滚动条 */
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-track { background: transparent; }

/* —— 文本工具 —— */
.muted { color: var(--ink-3); } .ink-2 { color: var(--ink-2); }
.small { font-size: 12.5px; } .tiny { font-size: 11.5px; } .big { font-size: 16px; }
.bold { font-weight: 600; } .center-text { text-align: center; } .right-text { text-align: right; }
.mono { font-family: var(--font-mono); font-size: .92em; letter-spacing: 0; }
.num { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.nowrap { white-space: nowrap; }
.clamp-1, .clamp-2, .clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-1 { -webkit-line-clamp: 1; } .clamp-2 { -webkit-line-clamp: 2; } .clamp-3 { -webkit-line-clamp: 3; }
.label-mono { font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }
.c-ok { color: var(--ok); } .c-warn { color: var(--warn); } .c-danger { color: var(--danger); } .c-primary { color: var(--primary); } .c-amber { color: var(--amber-deep); }

/* —— 布局工具 —— */
.row { display: flex; align-items: center; gap: 12px; }
.row.top { align-items: flex-start; } .row.bottom { align-items: flex-end; } .row.stretch { align-items: stretch; }
.row.between { justify-content: space-between; } .row.end { justify-content: flex-end; } .row.center { justify-content: center; }
.row.wrap { flex-wrap: wrap; } .row.tight { gap: 6px; } .row.loose { gap: 20px; }
.col { display: flex; flex-direction: column; gap: 12px; }
.col.tight { gap: 6px; } .col.loose { gap: 20px; }
.grow { flex: 1 1 0; min-width: 0; } .shrink-0 { flex-shrink: 0; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-auto { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.grid-side { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
.grid-side-l { grid-template-columns: 300px minmax(0, 1fr); align-items: start; }
.span-2 { grid-column: span 2; } .span-3 { grid-column: span 3; } .span-all { grid-column: 1 / -1; }
.mt-0 { margin-top: 0; } .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; }
.mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; }
.p-0 { padding: 0 !important; } .p-3 { padding: 12px; } .p-4 { padding: 16px; } .p-6 { padding: 24px; }
.w-full { width: 100%; } .h-full { height: 100%; } .rel { position: relative; } .scroll-y { overflow-y: auto; } .scroll-x { overflow-x: auto; }
.divider-v { width: 1px; align-self: stretch; background: var(--line); }
.sticky-top { position: sticky; top: 0; z-index: 5; }

@media (max-width: 1100px) {
  .grid-4, .grid-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-side, .grid-side-l { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 680px) {
  .grid-2, .grid-3, .grid-4, .grid-5 { grid-template-columns: minmax(0, 1fr); }
  .span-2, .span-3 { grid-column: auto; }
}

/* —— 动画 —— */
@keyframes spin { to { transform: rotate(1turn); } }
@keyframes fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes shimmer { to { background-position: -200% 0; } }
@keyframes blink { 50% { opacity: 0; } }
.spin { animation: spin 1s linear infinite; }
.fade-in { animation: fade-in .28s ease both; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; } }