/* ============================================================
   金钥匙 · 蓝白规范 v1  (2026-11-12)
   小程序 / H5 共用一套色值与组件尺寸，改这里一处即可
   ============================================================ */
:root {
  /* ── 品牌深蓝（页头 / 主标题底） ── */
  --navy-900: #1A365D;
  --navy-700: #2A5A8C;
  --navy-head: linear-gradient(135deg, #1A365D 0%, #2A5A8C 100%);

  /* ── 页面与卡片（蓝白底） ── */
  --bg:        #F5F6F8;
  --card:      #FFFFFF;
  --line:      #EFF1F5;
  --field:     #F4F6FA;

  /* ── 文字 ── */
  --text-1:    #1B2233;   /* 标题 */
  --text-2:    #5A6476;   /* 正文 / 标签 */
  --text-3:    #8A94A6;   /* 说明、次要 */
  --text-4:    #9AA2B0;   /* 极小字 */

  /* ── 主色：AI 蓝 → 青 ── */
  --primary:       #1E6BFF;
  --primary-2:     #2CE8DB;
  --primary-grad:  linear-gradient(100deg, #1E6BFF 0%, #2CE8DB 100%);
  --primary-soft:  rgba(44, 232, 219, 0.55);

  /* ── 品牌金（金钥匙 / 徽标点缀，不当主按钮） ── */
  --gold:      #D4A843;

  /* ── 提醒色（只用于"待办 / 逾期"，不当主按钮） ── */
  --warn:      #FF6B35;

  /* ── 圆角 ── */
  --r-card: 18px;
  --r-btn:  12px;
  --r-chip: 10px;

  /* ── 阴影 ── */
  --sh-card: 0 4px 14px rgba(25, 40, 70, .06);
  --sh-float: 0 12px 40px rgba(20, 30, 50, .16);

  /* ── 字号（H5 用 px；小程序 ×2 即 rpx） ── */
  --fs-title: 22px;
  --fs-body:  14px;
  --fs-label: 13px;
  --fs-hint:  11px;   /* 按钮说明条 = 22rpx */
}

/* ── 组件：页头 ── */
.kq-head {
  background: var(--navy-head);
  color: #fff;
  padding: 22px 20px 26px;
  border-radius: 0 0 var(--r-card) var(--r-card);
}
.kq-head .t { font-size: var(--fs-title); font-weight: 600; letter-spacing: .5px; }
.kq-head .s { font-size: 12.5px; opacity: .75; margin-top: 6px; }

/* ── 组件：卡片 ── */
.kq-card {
  background: var(--card);
  border-radius: var(--r-card);
  box-shadow: var(--sh-card);
  padding: 18px 16px;
}

/* ── 组件：主按钮 ── */
.kq-btn {
  height: 50px;
  border-radius: var(--r-btn);
  background: var(--primary-grad);
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
}
/* 次按钮 */
.kq-btn--ghost {
  background: var(--field);
  color: #3A4558;
  font-weight: 500;
}

/* ── 组件：按钮上方的"好处说明"条（小程序 22rpx） ── */
.kq-hint {
  display: flex; align-items: flex-start; gap: 7px;
  border-left: 3px solid var(--primary-soft);
  padding-left: 11px;
  margin: 0 0 9px 4px;
}
.kq-hint .t { font-size: var(--fs-hint); line-height: 1.6; color: var(--text-3); }
.kq-hint .link { margin-left: auto; color: #2CB8D8; text-decoration: underline; }

/* ── 组件：列表行 / 开关 ── */
.kq-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 15px 0; border-bottom: 1px solid var(--line);
}
.kq-row:last-child { border-bottom: none; }
.kq-row .l { font-size: var(--fs-body); color: var(--text-1); }
.kq-row .d { font-size: var(--fs-hint); color: var(--text-4); margin-top: 4px; }
.kq-sw {
  width: 50px; height: 29px; border-radius: 15px;
  background: var(--primary-2); position: relative;
}
.kq-sw i {
  position: absolute; top: 3px; left: 24px;
  width: 23px; height: 23px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .2);
}

/* ── 反面示例：H5 现在的深底（本次要改掉的） ── */
.kq-dark-legacy { background: #0B1220; color: #EAF0FA; }
.kq-dark-legacy .accent { color: #7DD3FC; }
.kq-dark-legacy .cta { background: linear-gradient(90deg, #FF8A5B, #FF6B35); }