/* ============================================================
   base.css · 重置、排版、滚动条、动画、工具类
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-13);
  line-height: var(--lh-base);
  color: var(--text);
  background: var(--bg);
  /* 关键：不要设置 -webkit-font-smoothing: antialiased。
     Windows 下该属性会关闭 ClearType 次像素抗锯齿，中文立刻发虚。
     保留系统默认渲染即可获得最清晰的效果。 */
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}

h1, h2, h3, h4, h5, h6, p, figure, dl, dd { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

a { color: var(--brand-600); text-decoration: none; }
a:hover { text-decoration: underline; }

button, input, select, textarea {
  font-family: inherit;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}
button { background: none; border: none; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }

svg { display: block; flex: none; }
img { max-width: 100%; display: block; }

/* 表单控件在部分浏览器需要显式继承字重，否则会退化为默认粗体 */
input, textarea, select { font-weight: 400; }

:focus-visible {
  outline: 2px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-100); color: var(--brand-800); }

/* ---------------- 滚动条 ---------------- */
.scroll, .navbar__body, .viewport, .sidepanel__body, .modal__body,
.scroll-area {
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--line-dark) transparent;
}
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: #c8cfdb;
  border: 3px solid transparent;
  background-clip: content-box;
  border-radius: var(--r-full);
}
::-webkit-scrollbar-thumb:hover { background: #aab3c3; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------------- 工具类 ---------------- */
.row { display: flex; align-items: center; }
.row-top { display: flex; align-items: flex-start; }
.col { display: flex; flex-direction: column; }
.wrap { flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }
.center { align-items: center; justify-content: center; }
.between { justify-content: space-between; }
.end { justify-content: flex-end; }
.middle { align-items: center; }

.g-2 { gap: 2px; }  .g-4 { gap: 4px; }  .g-6 { gap: 6px; }
.g-8 { gap: 8px; }  .g-10 { gap: 10px; } .g-12 { gap: 12px; }
.g-14 { gap: 14px; } .g-16 { gap: 16px; } .g-20 { gap: 20px; }
.g-24 { gap: 24px; } .g-28 { gap: 28px; } .g-32 { gap: 32px; }

.mt-2 { margin-top: 2px; } .mt-4 { margin-top: 4px; } .mt-6 { margin-top: 6px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; }
.mt-20 { margin-top: 20px; } .mt-24 { margin-top: 24px; } .mt-32 { margin-top: 32px; }
.mb-4 { margin-bottom: 4px; } .mb-8 { margin-bottom: 8px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.mb-20 { margin-bottom: 20px; } .mb-24 { margin-bottom: 24px; }

.p-12 { padding: 12px; } .p-16 { padding: 16px; } .p-20 { padding: 20px; }
.p-24 { padding: 24px; }

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.clamp-3 { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

.t-xs { font-size: var(--fs-11); }
.t-sm { font-size: var(--fs-12); }
.t-md { font-size: var(--fs-13); }
.t-lg { font-size: var(--fs-15); }
.t-xl { font-size: var(--fs-18); }
.t-2xl { font-size: var(--fs-20); }
.t-3xl { font-size: var(--fs-24); }

.fw-4 { font-weight: 400; }
.fw-6 { font-weight: 600; }
.fw-6 { font-weight: 600; }
.fw-7 { font-weight: 700; }
.muted { color: var(--text-3); }
.muted-2 { color: var(--text-2); }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }
.tnum { font-variant-numeric: tabular-nums; }
.upper { text-transform: uppercase; letter-spacing: .05em; }
.nowrap { white-space: nowrap; }
.rel { position: relative; }
.hide { display: none !important; }
.pointer { cursor: pointer; }
.no-shrink { flex: none; }

.hairline { height: 1px; background: var(--line); border: 0; margin: 0; }
.vline { width: 1px; align-self: stretch; background: var(--line); flex: none; }

.grad-text {
  background: var(--ai-grad);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ---------------- 动画 ---------------- */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes riseIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@keyframes popIn { from { opacity: 0; transform: translateY(10px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes slideRight { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes shimmer { 0% { background-position: -420px 0; } 100% { background-position: 420px 0; } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulseDot { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1); } }
@keyframes barGrow { from { transform: scaleY(.02); } to { transform: scaleY(1); } }
@keyframes dash { to { stroke-dashoffset: 0; } }

.anim-in { animation: riseIn .34s var(--ease-out) both; }
.anim-fade { animation: fadeIn .28s var(--ease) both; }
.anim-pop { animation: popIn .26s var(--ease-out) both; }
/* 视图切换入场：比 fade 更有方向感，时长短、不拖沓 */
.view-enter { animation: viewIn .24s var(--ease-out) both; }
@keyframes viewIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.stagger > * { animation: riseIn .38s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .01s; }
.stagger > *:nth-child(2) { animation-delay: .05s; }
.stagger > *:nth-child(3) { animation-delay: .09s; }
.stagger > *:nth-child(4) { animation-delay: .13s; }
.stagger > *:nth-child(5) { animation-delay: .17s; }
.stagger > *:nth-child(6) { animation-delay: .21s; }
.stagger > *:nth-child(7) { animation-delay: .25s; }
.stagger > *:nth-child(8) { animation-delay: .29s; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}