/* ========== base.css：基础与布局 ========== */
html,
body {
  height: 100%;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-text);
  background-color: var(--color-bg);
  background-image:
    radial-gradient(circle at 12% 18%, rgba(13, 148, 136, 0.08), transparent 38%),
    radial-gradient(circle at 88% 82%, rgba(249, 115, 22, 0.06), transparent 42%);
  background-attachment: fixed;
  overflow: hidden;
}

#app {
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* 移动端：放开 body 滚动，#app 跟随软键盘收缩 */
@media (max-width: 768px) {
  body { overflow: auto; }
  #app {
    height: var(--app-vh, 100dvh);
    /* 让 menu 子页等长内容可滚动 */
    overflow: auto;
  }
}

/* 文本工具类 */
.text-secondary { color: var(--color-text-secondary); }
.text-tertiary { color: var(--color-text-tertiary); }
.text-center { text-align: center; }
.text-mono { font-family: var(--font-family-mono); }

/* 容器 */
.container {
  width: 100%;
  max-width: var(--app-max-width);
  margin-inline: auto;
  padding-inline: var(--spacing-xl);
}

/* 隐藏与可见性 */
.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* 加载动画通用 */
@keyframes spin {
  to { transform: rotate(360deg); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.5; }
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes slideUp {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInRight {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to { opacity: 1; transform: scale(1); }
}

/* 焦点可见性（键盘可达） */
:focus-visible {
  outline: 3px solid var(--color-primary-light);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* SVG 图标基线 */
.icon {
  width: 1em;
  height: 1em;
  fill: currentColor;
  flex-shrink: 0;
}

/* 链接默认 */
.link {
  color: var(--color-primary);
  font-weight: var(--font-weight-medium);
  transition: color var(--duration-fast) var(--ease-out);
}
.link:hover { color: var(--color-primary-dark); }
.link:active { color: var(--color-primary-darker); }