/* 厂庆活动平台 · Design Tokens（阶段三 §4 落地，[v11.7 I6]）
   统一配色 / 按钮三态 / 间距栅格 / 字号 / 反馈组件。全平台新页面引用本文件，根除"各页各色"。
   颜色延续品牌：深蓝主色 + 橙色强调（与 KPI PPT 一致）。 */
:root {
  /* 品牌色 */
  --primary:   #16335B;   /* 主色 深蓝 */
  --primary-d: #0F2440;   /* 主色按下/深 */
  --accent:    #FF7A1A;   /* 强调 橙（主 CTA） */
  --accent-d:  #E66A08;   /* 强调按下 */
  --success:   #2BA471;   /* 通过/已发/已兑 */
  --success-d: #23895F;
  --danger:    #D93030;   /* 拒绝/删除/超额 */
  --danger-d:  #B52525;
  --warning:   #E8A33D;   /* 待确认/即将过期 */
  /* 中性 */
  --text:   #1F2329;      /* 正文 */
  --mut:    #76808F;      /* 次要文字 */
  --line:   #E3E8F0;      /* 描边/分隔 */
  --bg:     #F5F6F8;      /* 页面底 */
  --card:   #FFFFFF;      /* 卡片底 */
  /* 间距栅格（4 倍数） */
  --sp-1: 8px;  --sp-2: 16px; --sp-3: 24px;
  /* 字号 */
  --fs-12: 12px; --fs-14: 14px; --fs-16: 16px; --fs-18: 18px; --fs-22: 22px;
  /* 按钮高度：桌面 40 / 移动 56（触控友好，≥44 达标） */
  --btn-h: 44px; --btn-h-lg: 52px;
  --radius: 10px; --radius-lg: 14px;
  --shadow: 0 1px 3px rgba(20,40,80,.06);
}

/* ---------- 按钮三态（同一动作全平台同色同文案） ---------- */
.kq-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  height: var(--btn-h); padding: 0 18px; border: 1px solid transparent; border-radius: var(--radius);
  font-size: var(--fs-14); font-weight: 600; cursor: pointer; line-height: 1; text-decoration: none;
  transition: background .15s, border-color .15s, opacity .15s; white-space: nowrap;
}
a.kq-btn:hover { text-decoration: none; }
.kq-btn:disabled { opacity: .5; cursor: not-allowed; }
.kq-btn--primary { background: var(--accent); color: #fff; }      /* 主按钮：实心橙 */
.kq-btn--primary:hover:not(:disabled) { background: var(--accent-d); }
.kq-btn--secondary { background: #fff; color: var(--primary); border-color: var(--primary); } /* 次按钮：描边蓝 */
.kq-btn--secondary:hover:not(:disabled) { background: #eef2f8; }
.kq-btn--danger { background: var(--danger); color: #fff; }        /* 危险按钮：实心红 */
.kq-btn--danger:hover:not(:disabled) { background: var(--danger-d); }
.kq-btn--ghost { background: transparent; color: var(--mut); border-color: var(--line); }
.kq-btn--ghost:hover:not(:disabled) { background: #f0f2f5; }
.kq-btn--lg { height: var(--btn-h-lg); padding: 0 22px; font-size: var(--fs-16); }
.kq-btn--block { width: 100%; }

/* ---------- [v11.113] 管理页面入口：等比两列按钮网格 ----------
   ★ 缺陷（全哥 2026-09-28 截图「文字出格」）：`.kq-linkgrid` **一直只有类名、没有任何样式定义**
     （本文件里搜不到），里面的 a.kq-btn 是 inline-flex + white-space:nowrap + 固定高
     ⇒ 长文案横向硬挤、顶到格边、与相邻按钮连成一片。
   ★ 这里只覆盖「网格内」的按钮，不动 .kq-btn 本身（它是全站通用件，ddz/chess 等页面依赖它的高度与不换行）。 */
.kq-linkgrid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 10px;
}
.kq-linkgrid .kq-btn {
  width: 100%; min-width: 0; height: auto; min-height: var(--btn-h);
  padding: 10px 12px; white-space: normal; line-height: 1.35; text-align: center;
  overflow-wrap: break-word;   /* 兜底：极端长词也不溢出 */
}
/* 奇数个时最后一项占满整行（5 个按钮 → 2+2+1，整齐且不留空洞） */
.kq-linkgrid .kq-btn:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---------- 卡片 / 区块 ---------- */
.kq-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: var(--sp-2); margin-bottom: var(--sp-2); box-shadow: var(--shadow); }
.kq-card > h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-18); color: var(--primary); }
.kq-sec-title { font-size: var(--fs-14); font-weight: 700; color: var(--success); margin: var(--sp-2) 0 var(--sp-1); }
.kq-hint { font-size: var(--fs-12); color: var(--mut); }

/* ---------- 标签 ---------- */
.kq-tag { display: inline-block; font-size: var(--fs-12); padding: 2px 9px; border-radius: 20px; background: #eaf1fb; color: var(--primary); margin-right: 6px; }
.kq-tag.t { background: #fdeede; color: var(--accent-d); }
.kq-tag.p { background: #eafaf0; color: var(--success-d); }
.kq-tag.warn { background: #fdeaea; color: var(--danger); }

/* ---------- 提示条 ---------- */
.kq-alert { background: #fff4e5; border: 1px solid #ffd8a8; color: #a85b00; padding: 12px 14px; border-radius: var(--radius); font-size: var(--fs-14); margin-bottom: var(--sp-2); }
.kq-alert.warn { background: #fdeaea; border-color: #f5b5b5; color: #a33; }

/* ---------- 表单 ---------- */
.kq-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: var(--sp-2); }
.kq-field > label { font-size: var(--fs-14); font-weight: 600; color: var(--text); }
.kq-field .kq-hint { font-weight: 400; }
.kq-input, .kq-select {
  height: var(--btn-h); padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius);
  font-size: var(--fs-14); color: var(--text); background: #fff; width: 100%; max-width: 320px;
}
.kq-input:focus, .kq-select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 2px rgba(22,51,91,.12); }
.kq-input.bad { border-color: var(--danger); box-shadow: 0 0 0 2px rgba(217,48,48,.12); }
.kq-row { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end; }
.kq-check { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-14); cursor: pointer; }

/* ---------- Toast（结果导向，禁止静默） ---------- */
.kq-toast {
  position: fixed; left: 50%; top: 22px; transform: translateX(-50%) translateY(-12px);
  min-width: 220px; max-width: 86vw; padding: 12px 18px; border-radius: var(--radius);
  font-size: var(--fs-14); font-weight: 600; color: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.18);
  opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 9999;
}
.kq-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.kq-toast.ok   { background: var(--success); }
.kq-toast.err  { background: var(--danger); }
.kq-toast.info { background: var(--primary); }

/* ---------- 二次确认 Modal（阶段三 §3.1） ---------- */
.kq-modal-mask { position: fixed; inset: 0; background: rgba(15,23,40,.45); display: none; align-items: center; justify-content: center; z-index: 9998; padding: var(--sp-2); }
.kq-modal-mask.show { display: flex; }
.kq-modal { background: #fff; border-radius: var(--radius-lg); width: 100%; max-width: 420px; padding: var(--sp-3); box-shadow: 0 10px 30px rgba(0,0,0,.25); }
.kq-modal h3 { margin: 0 0 var(--sp-1); font-size: var(--fs-18); color: var(--text); }
.kq-modal .kq-scope { background: #f6f8fb; border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 12px; font-size: var(--fs-14); color: var(--text); margin: var(--sp-1) 0 var(--sp-2); }
.kq-modal .kq-modal-actions { display: flex; gap: var(--sp-1); justify-content: flex-end; }

@media (max-width: 480px) {
  .kq-btn { height: 52px; }              /* 移动主操 ≥56 近似达标 */
  .kq-input, .kq-select { max-width: 100%; }
}