/* ==========================================================================
   Orderful 设计系统 — tokens + 共享组件
   工业控制台风格：近纯中性表面 + 单一朱红强调色
   ========================================================================== */

:root {
  /* Colors */
  --color-vermillion-signal: #e42b0c;
  --gradient-vermillion-signal: linear-gradient(94deg, rgb(255, 2, 1) -33.85%, rgb(255, 120, 2) -1.54%, rgb(255, 2, 1) 73.55%);
  --color-ink-black: #000000;
  --color-carbon: #1f1f1f;
  --color-slate-900: #101828;
  --color-slate-700: #364153;
  --color-slate-600: #4a5565;
  --color-steel: #676767;
  --color-iron: #8a8a8a;
  --color-mist: #99a1af;
  --color-cloud: #d4d4d4;
  --color-frost: #e5e7eb;
  --color-paper: #ffffff;
  --color-vellum: #f5f5f5;
  /* 状态绿 —— 目前只有群列表里「启用迎新」那个 8px 小圆点用它。
     取值跟卡片模板色里的绿一致，全站就这一个绿 */
  --color-signal-green: #34c759;

  /* Typography — telegraf 的回退栈，补中文字体 */
  --font-telegraf: 'telegraf', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "PingFang SC", "Hiragino Sans GB",
    "Microsoft YaHei", sans-serif;

  /* Typography — Scale */
  --text-micro: 12px;
  --leading-micro: 1.5;
  --tracking-micro: 0.3px;
  --text-caption: 14px;
  --leading-caption: 1.43;
  --text-body-sm: 16px;
  --leading-body-sm: 1.5;
  --text-body: 18px;
  --leading-body: 1.5;
  --text-body-lg: 20px;
  --leading-body-lg: 1.43;
  --text-subheading: 24px;
  --leading-subheading: 1.38;
  --text-heading-sm: 30px;
  --leading-heading-sm: 1.33;

  /* Spacing */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-40: 40px;
  --spacing-48: 48px;
  --spacing-64: 64px;

  /* Radius — 全系统统一 8px */
  --radius-lg: 8px;

  /* Shadow — 唯一的两层阴影栈 */
  --shadow-subtle: rgba(0, 0, 0, 0.1) 0px 1px 3px 0px, rgba(0, 0, 0, 0.1) 0px 1px 2px -1px;
}

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

body {
  font-family: var(--font-telegraf);
  font-size: var(--text-body-sm);
  line-height: var(--leading-body-sm);
  color: var(--color-slate-900);
  background: var(--color-vellum);
  font-feature-settings: "case" on, "dlig" on;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  font-family: inherit;
  font-size: var(--text-caption);
  font-weight: 500;
  letter-spacing: 0.025em;
  text-transform: uppercase;
  border-radius: var(--radius-lg);
  padding: 12px 24px;
  border: 1px solid transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  white-space: nowrap;
  transition: opacity .15s, background .15s, border-color .15s, color .15s;
}
.btn:disabled { opacity: .45; cursor: not-allowed; }

/* 朱红填充 — 全页仅用于主操作 */
.btn-primary {
  background: var(--color-vermillion-signal);
  color: var(--color-paper);
}
.btn-primary:hover:not(:disabled) { opacity: .88; }

/* 碳黑次要操作 */
.btn-dark {
  background: var(--color-carbon);
  color: var(--color-paper);
}
.btn-dark:hover:not(:disabled) { background: var(--color-ink-black); }

/* 描边幽灵按钮 */
.btn-ghost {
  background: transparent;
  color: var(--color-slate-700);
  border-color: var(--color-cloud);
}
.btn-ghost:hover:not(:disabled) {
  border-color: var(--color-slate-900);
  color: var(--color-slate-900);
}

/* 描边危险操作 —— 朱红只画在框和字上，不填充。
   填充红是 .btn-primary 的（全页的主操作），删除不该跟它抢那个语义；
   但它又得一眼看出「这个会毁东西」，所以借朱红来画框和字，悬停才填实 */
.btn-danger {
  background: transparent;
  color: var(--color-vermillion-signal);
  border-color: var(--color-vermillion-signal);
}
.btn-danger:hover:not(:disabled) {
  background: var(--color-vermillion-signal);
  color: var(--color-paper);
}

.btn-sm { padding: 8px 16px; font-size: var(--text-micro); }
.btn-block { width: 100%; }

/* --- Inputs ------------------------------------------------------------- */

.input, .textarea {
  font-family: inherit;
  width: 100%;
  background: var(--color-paper);
  border: 1px solid var(--color-cloud);
  border-radius: var(--radius-lg);
  padding: 12px 16px;
  font-size: var(--text-body-sm);
  font-weight: 400;
  color: var(--color-slate-900);
  outline: none;
  transition: border-color .15s;
}
.input { height: 48px; }
.input::placeholder, .textarea::placeholder { color: var(--color-mist); }
.input:focus, .textarea:focus { border-color: var(--color-slate-900); }

/* --- Eyebrow badge (描边胶囊) -------------------------------------------- */

.eyebrow {
  display: inline-block;
  border: 1px solid var(--color-cloud);
  border-radius: var(--radius-lg);
  padding: 4px 12px;
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-slate-600);
}

/* --- Card --------------------------------------------------------------- */

.card {
  background: var(--color-paper);
  border: 1px solid var(--color-frost);
  border-radius: var(--radius-lg);
}

/* --- 微标签 / 辅助文字 ---------------------------------------------------- */

.label {
  display: block;
  font-size: var(--text-micro);
  font-weight: 500;
  letter-spacing: var(--tracking-micro);
  text-transform: uppercase;
  color: var(--color-slate-600);
  margin-bottom: var(--spacing-8);
}

.muted { color: var(--color-slate-600); }
.hint { font-size: var(--text-micro); color: var(--color-iron); line-height: var(--leading-micro); }

/* --- 开关 --------------------------------------------------------------- */

.toggle { position: relative; width: 44px; height: 24px; flex-shrink: 0; }
.toggle input { opacity: 0; width: 0; height: 0; }
.toggle .slider {
  position: absolute; inset: 0;
  background: var(--color-cloud);
  border-radius: var(--radius-lg);
  cursor: pointer;
  transition: background .2s;
}
.toggle .slider::before {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  left: 4px; top: 4px;
  background: var(--color-paper);
  border-radius: var(--radius-lg);
  transition: transform .2s;
}
.toggle input:checked + .slider { background: var(--color-slate-900); }
.toggle input:checked + .slider::before { transform: translateX(20px); }

/* --- Spinner ------------------------------------------------------------ */

@keyframes spin { to { transform: rotate(360deg); } }
.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--color-frost);
  border-top-color: var(--color-vermillion-signal);
  border-radius: 50%;
  animation: spin .6s linear infinite;
  flex-shrink: 0;
}

/* --- 滚动条 ------------------------------------------------------------- */

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: var(--color-cloud);
  border-radius: var(--radius-lg);
  border: 3px solid var(--color-vellum);
}
::-webkit-scrollbar-thumb:hover { background: var(--color-mist); }