/* ===== CSS 变量 + Reset — 暗色 teal 设计系统 ===== */
:root {
  /* 背景色阶 */
  --bg-0: #0d1117;       /* 最深背景 */
  --bg-1: #161b22;       /* 卡片背景 */
  --bg-2: #21262d;       /* 悬浮/激活 */
  --bg-3: #30363d;       /* 边框/分割 */

  /* 文字色阶 */
  --text-0: #e6edf3;     /* 主文字 */
  --text-1: #8b949e;     /* 次要文字 */
  --text-2: #6e7681;     /* 弱化文字 */

  /* 强调色 teal */
  --accent: #2dd4bf;
  --accent-hover: #14b8a6;
  --accent-dim: rgba(45, 212, 191, 0.15);

  /* 状态色 */
  --danger: #f85149;
  --warning: #d29922;
  --success: #3fb950;

  /* 尺寸 */
  --radius: 8px;
  --radius-sm: 4px;
  --gap: 16px;
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --mono: 'SF Mono', 'Cascadia Code', Consolas, monospace;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg-0);
  color: var(--text-0);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-hover); }
button { font-family: var(--font); cursor: pointer; border: none; }
input, textarea { font-family: var(--font); }

/* 通用按钮 */
.btn {
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  color: var(--text-0);
  font-size: 14px;
  transition: background 0.15s;
}
.btn:hover { background: var(--bg-3); }
.btn-primary { background: var(--accent); color: var(--bg-0); font-weight: 600; }
.btn-primary:hover { background: var(--accent-hover); }
.btn-danger { background: var(--danger); color: #fff; }

/* 通用输入框 */
.input {
  width: 100%;
  padding: 10px 14px;
  background: var(--bg-0);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius-sm);
  color: var(--text-0);
  font-size: 14px;
  transition: border-color 0.15s;
}
.input:focus { outline: none; border-color: var(--accent); }

/* 通用卡片 */
.card {
  background: var(--bg-1);
  border: 1px solid var(--bg-3);
  border-radius: var(--radius);
  padding: var(--gap);
}

/* Toast 提示 */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  padding: 10px 20px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--bg-3);
  color: var(--text-0);
  font-size: 14px;
  z-index: 9999;
  animation: toast-in 0.2s ease;
}
.toast.error { border-color: var(--danger); }
.toast.success { border-color: var(--success); }
@keyframes toast-in {
  from { opacity: 0; transform: translate(-50%, 10px); }
  to { opacity: 1; transform: translate(-50%, 0); }
}