/* ============================================================
   QuickFind 官网 · 统一设计令牌层（R59）
   ------------------------------------------------------------
   唯一真源：R59_重构规范.md §1
   变量名与取值必须与 admin / 用户中心 / 桌面端保持一致。

   规则（见规范 §1「禁止事项」）：
   - 禁止硬编码色值 —— 一律消费本文件的变量
   - 禁止紫色系（#8B5CF6 / #6366F1 / #4f46e5 / #818cf8 …）
   - 暖色仅用于 警告 / 危险 / 成功 语义，不可作装饰
   - 禁止 3px 左侧彩色状态条；结构分隔线用 1px 中性色
   ============================================================ */

:root {
  /* ---------- 主色（蓝色系，全站去紫） ---------- */
  --qf-primary:        #2563EB;   /* blue-600 */
  --qf-primary-hover:  #1D4ED8;   /* blue-700 */
  --qf-primary-soft:   rgba(37, 99, 235, 0.12);
  --qf-primary-ring:   rgba(37, 99, 235, 0.35);
  --qf-accent:         #0891B2;   /* cyan-600，作为次级强调 */

  /* ---------- 语义色（仅状态表达，不可装饰） ---------- */
  --qf-success: #0E9F5B;
  --qf-warning: #B26A00;
  --qf-danger:  #D92D20;
  --qf-info:    #2563EB;

  /* ---------- 中性色 ---------- */
  --qf-bg:            #F6F7FA;
  --qf-surface:       #FFFFFF;
  --qf-surface-hover: #F0F2F7;
  --qf-border:        #E3E7EF;
  --qf-border-soft:   #EEF1F6;
  --qf-text:          #101828;
  --qf-text-muted:    #5A6478;

  /* ---------- 尺度 ---------- */
  --qf-space-1: 4px;  --qf-space-2: 8px;  --qf-space-3: 12px;
  --qf-space-4: 16px; --qf-space-5: 24px; --qf-space-6: 32px;
  --qf-radius-sm: 8px; --qf-radius-md: 12px; --qf-radius-lg: 16px;
  --qf-shadow-sm: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.08);
  --qf-shadow-md: 0 4px 12px rgba(16,24,40,.08), 0 2px 4px rgba(16,24,40,.05);
  --qf-shadow-lg: 0 18px 44px rgba(16,24,40,.16), 0 4px 12px rgba(16,24,40,.08);

  /* ---------- 响应式断点（规范 §5，只写这四档） ---------- */
  --bp-sm: 640px;   /* 大手机 */
  --bp-md: 768px;   /* 平板   */
  --bp-lg: 1024px;  /* 小笔记本 */
  --bp-xl: 1280px;  /* 桌面   */

  /* ---------- 派生：品牌渐变与光晕 ---------- */
  --qf-brand-grad: linear-gradient(135deg, #2563EB 0%, #1D4ED8 55%, #0891B2 100%);
  --qf-brand-grad-soft: linear-gradient(135deg, rgba(37,99,235,.12) 0%, rgba(8,145,178,.12) 100%);
  --qf-brand-glow: rgba(37, 99, 235, .28);

  /* ---------- 语义底色（用于徽标/提示，禁止做按钮底） ---------- */
  --qf-success-soft: rgba(14, 159, 91, .12);
  --qf-warning-soft: rgba(178, 106, 0, .13);
  --qf-danger-soft:  rgba(217, 45, 32, .12);
  --qf-info-soft:    rgba(37, 99, 235, .10);

  /* ---------- 信息提示组件（R67）
     全站 43 处提示（.callout 22 + .note 21 + .note-box/.legal-highlight）原先各用
     各自的硬编码色值（rgba(59,130,246,.08) / --brand-grad-soft / rgba(5,150,105,.09)…），
     同一语义出现三套取值，换主题不跟随、深色下全部偏亮。

     改为消费令牌，并把「边框」整个去掉 —— 用户明确要求无顶边/底边强调线。
     层级改由三重手段表达：
       1) 底色（--qf-*-note）区分语义
       2) 图标实心色块（--qf-*-note-ic）作为唯一强调点
       3) 文字：标题 --qf-*-note-title / 正文 --qf-*-note-text，保证浅底上可读
     ------------------------------------------------------------------ */
  --qf-info-note:        rgba(37, 99, 235, .07);
  --qf-info-note-ic:     var(--qf-primary);
  --qf-info-note-title:  #1D4ED8;
  --qf-info-note-text:   var(--qf-text);

  --qf-success-note:      rgba(14, 159, 91, .08);
  --qf-success-note-ic:   var(--qf-success);
  --qf-success-note-title:#046C4E;
  --qf-success-note-text: var(--qf-text);

  --qf-warning-note:      rgba(178, 106, 0, .09);
  --qf-warning-note-ic:   var(--qf-warning);
  --qf-warning-note-title:#8A4B00;
  --qf-warning-note-text: var(--qf-text);

  --qf-danger-note:       rgba(217, 45, 32, .07);
  --qf-danger-note-ic:    var(--qf-danger);
  --qf-danger-note-title: #A81E14;
  --qf-danger-note-text:  var(--qf-text);

  /* 中性提示（无语义色，用于补充说明类 .note） */
  --qf-note-neutral:      rgba(16, 24, 40, .035);

  /* ---------- 代码块（固定终端样式：深底浅字，不随主题切换） ---------- */
  --qf-code-bg:   #0D1B24;
  --qf-code-text: #C7E4F5;   /* 原 #A7F3D0（teal 亮绿），改为蓝体系的浅青，对比度 ≥ 7:1 */
  --qf-code-border: rgba(37, 99, 235, .28);

  --qf-focus-ring: 0 0 0 3px var(--qf-primary-ring);
}

/* ============================================================
   深色模式
   ============================================================ */
[data-theme="dark"] {
  --qf-primary:        #60A5FA;
  --qf-primary-hover:  #93C5FD;
  --qf-primary-soft:   rgba(96, 165, 250, .16);
  --qf-primary-ring:   rgba(96, 165, 250, .40);
  --qf-accent:         #22D3EE;

  --qf-success: #34D399;
  --qf-warning: #FBBF24;
  --qf-danger:  #F87171;
  --qf-info:    #60A5FA;

  --qf-bg:            #0E1116;
  --qf-surface:       #1A2029;
  --qf-surface-hover: #222A35;
  --qf-border:        #262D38;
  --qf-border-soft:   #1E242E;
  --qf-text:          #E7ECF3;
  --qf-text-muted:    #97A4B8;

  --qf-shadow-sm: 0 1px 2px rgba(0,0,0,.40);
  --qf-shadow-md: 0 4px 12px rgba(0,0,0,.45);
  --qf-shadow-lg: 0 18px 44px rgba(0,0,0,.55);

  --qf-brand-grad:      linear-gradient(135deg, #60A5FA 0%, #3B82F6 55%, #22D3EE 100%);
  --qf-brand-grad-soft: linear-gradient(135deg, rgba(96,165,250,.16) 0%, rgba(34,211,238,.16) 100%);
  --qf-brand-glow:      rgba(96, 165, 250, .32);

  --qf-success-soft: rgba(52, 211, 153, .16);
  --qf-warning-soft: rgba(251, 191, 36, .16);
  --qf-danger-soft:  rgba(248, 113, 113, .16);
  --qf-info-soft:    rgba(96, 165, 250, .16);

  /* ---------- 信息提示组件 · 深色（R67）
     深色下浅色语义色在深底上对比度不足（#1D4ED8 on #0E1116 约 2.6:1），
     故标题色一律提亮到 blue-300 / emerald-300 / amber-300 / red-300 一档；
     底色透明度也降低 —— 深底上 .12 的着色会显得「发灰脏」，.07-.09 更干净。 */
  --qf-info-note:        rgba(96, 165, 250, .10);
  --qf-info-note-ic:     #93C5FD;
  --qf-info-note-title:  #BFDBFE;
  --qf-info-note-text:   var(--qf-text);

  --qf-success-note:      rgba(52, 211, 153, .10);
  --qf-success-note-ic:   #6EE7B7;
  /* green-300。不可用 #A7F3D0 —— 那是 R60 清除的 teal 亮绿（见 --qf-code-text 注释）*/
  --qf-success-note-title:#86EFAC;
  --qf-success-note-text: var(--qf-text);

  --qf-warning-note:      rgba(251, 191, 36, .09);
  --qf-warning-note-ic:   #FCD34D;
  --qf-warning-note-title:#FDE68A;
  --qf-warning-note-text: var(--qf-text);

  --qf-danger-note:       rgba(248, 113, 113, .09);
  --qf-danger-note-ic:    #FCA5A5;
  --qf-danger-note-title: #FECACA;
  --qf-danger-note-text:  var(--qf-text);

  --qf-note-neutral:      rgba(255, 255, 255, .045);
}

/* ============================================================
   组件三态（规范 §4：加载 / 空 / 错误）
   —— 数据驱动区块统一使用，禁止出现「白屏 + 控制台报错」
   ============================================================ */

/* 加载态：骨架屏 */
.qf-skeleton {
  display: block;
  border-radius: var(--qf-radius-sm);
  background:
    linear-gradient(90deg, transparent 0%, var(--qf-surface-hover) 50%, transparent 100%)
      var(--qf-surface-hover);
  background-size: 220% 100%;
  animation: qf-skeleton-sweep 1.35s ease-in-out infinite;
  min-height: 1em;
}
@keyframes qf-skeleton-sweep {
  0%   { background-position: 140% 0; }
  100% { background-position: -40% 0; }
}
.qf-skeleton--title { height: 20px; width: 62%; margin-bottom: 10px; }
.qf-skeleton--line  { height: 13px; margin-bottom: 8px; }
.qf-skeleton--card  { height: 96px; border: 1px solid var(--qf-border); border-radius: var(--qf-radius-md); }
.qf-skeleton-stack   { display: grid; gap: 12px; }

/* 加载态：spinner */
.qf-spinner {
  display: inline-block; width: 18px; height: 18px;
  border: 2px solid var(--qf-primary-soft);
  border-top-color: var(--qf-primary);
  border-radius: 50%;
  animation: qf-spin .7s linear infinite;
  vertical-align: -3px;
}
@keyframes qf-spin { to { transform: rotate(360deg); } }

.qf-loading {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: var(--qf-space-5);
  color: var(--qf-text-muted); font-size: 14px;
}

/* 空态：说明 + 下一步引导 */
.qf-empty, .qf-error {
  padding: var(--qf-space-5) var(--qf-space-4);
  text-align: center;
  border: 1px dashed var(--qf-border);
  border-radius: var(--qf-radius-md);
  background: var(--qf-surface);
}
.qf-empty-title, .qf-error-title {
  font-weight: 700; color: var(--qf-text);
  font-size: 15px; margin-bottom: 6px;
}
.qf-empty-body, .qf-error-body {
  font-size: 13.5px; color: var(--qf-text-muted);
  line-height: 1.7; margin-bottom: var(--qf-space-3);
}
.qf-empty-hint { font-size: 13px; color: var(--qf-text-muted); }

/* 错误态：可读原因 + 重试（不用左侧色条，用徽标/底色） */
.qf-error {
  border-style: solid;
  border-color: var(--qf-danger-soft);
  background: var(--qf-danger-soft);
}
.qf-error-title { color: var(--qf-danger); }
.qf-error-title::before {
  content: "!"; display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; margin-right: 7px; border-radius: 50%;
  background: var(--qf-danger); color: var(--qf-surface);
  font-size: 12px; font-weight: 800; vertical-align: -3px;
}

@media (prefers-reduced-motion: reduce) {
  .qf-skeleton, .qf-spinner { animation: none; }
}

/* ---------- 按钮（规范 §4） ---------- */
.qf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 44px; padding: 10px 22px;
  border-radius: var(--qf-radius-md);
  font-size: 14.5px; font-weight: 600; line-height: 1.4;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .16s ease, box-shadow .16s ease,
              background .2s ease, color .2s ease, border-color .2s ease;
}
.qf-btn:active { transform: translateY(1px); }
.qf-btn--primary {
  background: var(--qf-brand-grad); color: #fff;
  box-shadow: 0 6px 18px -6px var(--qf-brand-glow);
}
.qf-btn--primary:hover { color: #fff; transform: translateY(-1px); }
.qf-btn--ghost {
  background: var(--qf-surface); color: var(--qf-text);
  border-color: var(--qf-border);
}
.qf-btn--ghost:hover { border-color: var(--qf-primary); color: var(--qf-primary); transform: translateY(-1px); }
.qf-btn--danger { background: var(--qf-danger); color: #fff; }
.qf-btn--danger:hover { color: #fff; transform: translateY(-1px); }
.qf-btn[disabled], .qf-btn.disabled { opacity: .55; cursor: not-allowed; pointer-events: none; }

/* ---------- 表单字段错误（规范 §4） ---------- */
.qf-field-error {
  display: block; margin-top: 5px;
  font-size: 12.5px; font-weight: 600; color: var(--qf-danger);
}
.qf-field-error:empty { display: none; }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] {
  border-color: var(--qf-danger) !important;
  box-shadow: var(--qf-focus-ring);
}

/* ---------- 焦点可见（规范 §4 可访问性底线） ---------- */
:focus-visible {
  outline: 2px solid var(--qf-primary);
  outline-offset: 2px;
}