/* css/base.css — 基础层（自 style.css 逐值迁移，R1 模块化重构）
 * 承接：reset / 通用元素 / 滚动条 / 空状态 / 横幅 / toast / relay token 输入页 */

* { box-sizing: border-box; margin: 0; padding: 0; }

/* ---------------- 基础 ---------------- */

/* mobile-fix 4：viewport meta 已禁缩放；manipulation 消双击缩放延迟（平移/滚动不受限） */
html, body { height: 100%; touch-action: manipulation; }

body {
  font-family: var(--font-ui);
  font-size: var(--font-size-base);
  color: var(--color-text);
  background: var(--color-bg);
  overflow: hidden;
}

.hidden { display: none !important; }

button { font-family: inherit; }

input, select, textarea { font-family: inherit; color: var(--color-text); }

/* 焦点可见性（契约 §3.4 末条：全站可交互元素统一焦点环） */
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }

/* ---------------- 滚动条（暖灰基调） ---------------- */

::-webkit-scrollbar { width: 8px; height: 8px; }

::-webkit-scrollbar-thumb { background: var(--color-border); border-radius: var(--radius-sm); }

::-webkit-scrollbar-thumb:hover { background: var(--color-text-weak); }

::-webkit-scrollbar-track { background: transparent; }

/* ---------------- 空状态（契约 §5.7） ---------------- */

.empty-state {
  text-align: center; color: var(--color-text-weak);
  font-size: var(--font-size-base); padding: var(--spacing-lg) 0;
}

/* ---------------- 横幅（401 鉴权，契约 §5.8） ---------------- */

.banner {
  display: flex; gap: var(--spacing-sm); align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  font-size: var(--font-size-base); flex-shrink: 0;
}

.banner-error {
  background: var(--color-danger-bg);
  color: var(--color-danger);
  border-bottom: 1px solid var(--color-danger);
}

/* ---------------- Toast（契约 §5.8） ---------------- */

.toast {
  position: fixed; right: 20px; bottom: 20px; z-index: var(--z-toast);
  max-width: 420px; padding: 10px 14px;
  border-radius: var(--radius-md);
  background: var(--color-text); color: #FFFFFF;
  font-size: var(--font-size-base);
  box-shadow: var(--shadow-2); word-break: break-all;
}

.toast.toast-error { background: var(--color-danger); }

/* ---------------- v7 relay token 输入页（全屏居中卡片；令牌全复用） ---------------- */

.token-page {
  position: fixed; inset: 0; z-index: calc(var(--z-modal) + 10);
  background: var(--color-bg);
  display: flex; align-items: center; justify-content: center;
  padding: var(--spacing-lg);
}

.token-card {
  width: 380px; max-width: 100%;
  background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-xl);
  box-shadow: var(--shadow-3);
  padding: var(--spacing-lg);
  display: flex; flex-direction: column; gap: var(--spacing-sm);
}

.token-brand {
  display: flex; align-items: center; gap: var(--spacing-xs);
}

.token-logo { width: 32px; height: 32px; border-radius: var(--radius-md); flex-shrink: 0; }

.token-title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }

.token-hint {
  font-size: var(--font-size-sm); color: var(--color-text-weak);
  line-height: var(--line-height-normal); word-break: break-word;
}

.token-field { display: flex; flex-direction: column; gap: var(--spacing-xxs); }

.token-field input {
  background: var(--color-card);
  border: 1px solid var(--color-border); border-radius: var(--radius-md);
  padding: var(--spacing-xs); font-family: var(--font-mono);
  font-size: var(--font-size-base); width: 100%;
  transition: border-color var(--duration-fast) var(--ease-out);
}

.token-field input:focus { border-color: var(--color-accent); outline: none; }

.token-submit { margin-top: var(--spacing-xs); }

.token-card .form-error { margin: 0; }