/* ============================================================
   思洋智脑 UI Kit v1.0 — 设计令牌 + 统一页面骨架
   所有功能子页面引入本文件，变量统一引用 --xk-* 令牌。
   新增页面禁止再自定义一套颜色/圆角/字号。
   ============================================================ */
:root {
    /* ---- 品牌色（★ 2026-08-11 对齐主站清爽色板） ---- */
    --xk-primary: #2f6fed;
    --xk-primary-hover: #2457c9;
    --xk-primary-light: rgba(47, 111, 237, .08);
    --xk-primary-border: rgba(47, 111, 237, .25);

    /* ---- 文字三级 ---- */
    --xk-text-1: #17181c;
    --xk-text-2: #4b4d55;
    --xk-text-3: #8b8d97;

    /* ---- 背景 ---- */
    --xk-bg-page: #f7f7fa;
    --xk-bg-card: #ffffff;
    --xk-bg-hover: #f1f1f5;

    /* ---- 边框 ---- */
    --xk-border: #e8e8ee;

    /* ---- 圆角 ---- */
    --xk-radius-sm: 8px;
    --xk-radius: 12px;
    --xk-radius-lg: 16px;

    /* ---- 阴影（带色调） ---- */
    --xk-shadow-card: 0 1px 2px rgba(23, 24, 28, .04), 0 4px 12px rgba(23, 24, 28, .04);
    --xk-shadow-pop: 0 8px 24px rgba(23, 24, 28, .12);

    /* ---- 字号阶梯 ---- */
    --xk-fs-title: 24px;
    --xk-fs-h2: 17px;
    --xk-fs-body: 14px;
    --xk-fs-small: 13px;
    --xk-fs-tiny: 12px;

    /* ---- 语义色 ---- */
    --xk-success: #059669;
    --xk-warning: #d97706;
    --xk-danger: #ef4444;

    /* ---- 字体（引用 ui-font.css 的权威栈） ---- */
    --xk-font: var(--font-ui);
    --xk-font-display: var(--font-display);
}

/* ============ 统一页面骨架 ============ */
.xk-wrap {
    max-width: 960px;
    margin: 0 auto;
    padding: 28px 20px 80px;
    font-family: var(--xk-font);
}

/* 顶部条：左面包屑 + 右操作 */
.xk-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 22px;
    min-height: 32px;
    flex-wrap: wrap;
}
.xk-crumb {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--xk-text-2);
    text-decoration: none;
    font-size: var(--xk-fs-body);
    line-height: 1;
}
.xk-crumb:hover { color: var(--xk-primary); }
.xk-crumb svg { flex: none; }
.xk-crumb .sep { color: var(--xk-text-3); }
.xk-crumb .cur { color: var(--xk-text-1); font-weight: 600; }
.xk-topbar-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.xk-topbar-actions a {
    color: var(--xk-text-2);
    text-decoration: none;
    font-size: var(--xk-fs-body);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.xk-topbar-actions a:hover { color: var(--xk-primary); }

/* 页面头：标题 + 副标题 + 主CTA */
.xk-page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 18px;
}
.xk-page-title { font-size: var(--xk-fs-title); font-weight: 700; color: var(--xk-text-1); margin: 0; }
.xk-page-sub { color: var(--xk-text-2); font-size: var(--xk-fs-small); margin-top: 6px; line-height: 1.7; }

/* ============ 通用按钮 ============ */
.xk-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 10px;
    border: none;
    background: var(--xk-primary);
    color: #fff;
    font-size: var(--xk-fs-small);
    font-weight: 600;
    cursor: pointer;
    font-family: var(--xk-font);
    text-decoration: none;
    transition: background .15s;
}
.xk-btn:hover { background: var(--xk-primary-hover); }
.xk-btn.ghost {
    background: var(--xk-bg-card);
    color: var(--xk-primary);
    border: 1px solid var(--xk-primary-border);
}
.xk-btn.ghost:hover { background: var(--xk-primary-light); }
.xk-btn.sm { padding: 6px 14px; font-size: var(--xk-fs-tiny); }

/* ============ 统一空态组件 ============ */
.xk-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 72px 20px;
}
.xk-empty-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--xk-radius-lg);
    background: var(--xk-primary-light);
    color: var(--xk-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}
.xk-empty-title { font-size: 15px; font-weight: 600; color: var(--xk-text-1); margin-bottom: 6px; }
.xk-empty-sub { font-size: var(--xk-fs-small); color: var(--xk-text-2); line-height: 1.7; max-width: 420px; }
.xk-empty .xk-btn { margin-top: 18px; }

/* ===== 深色模式令牌（跟随主应用 localStorage.theme → html[data-theme]） ===== */
:root[data-theme="dark"] {
  --xk-primary: #5b8df5;
  --xk-primary-hover: #7ba4f8;
  --xk-primary-light: rgba(91, 141, 245, 0.14);
  --xk-primary-border: rgba(91, 141, 245, .3);
  --xk-text-1: #eef0f4;
  --xk-text-2: #b6b9c3;
  --xk-text-3: #767a87;
  --xk-bg-page: #141518;
  --xk-bg-card: #1b1c20;
  --xk-bg-hover: #2a2c33;
  --xk-border: rgba(255, 255, 255, 0.09);
  --xk-shadow-card: 0 1px 2px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.16);
  --xk-shadow-pop: 0 8px 28px rgba(0,0,0,0.4);
  --xk-success: #10b981;
  --xk-warning: #f59e0b;
  --xk-danger: #f87171;
}

/* ===== 移动端适配（2026-07-31 手机版优化：触控目标≥36px、防 iOS 聚焦缩放） ===== */
@media (max-width: 768px) {
    .xk-wrap { padding: 18px 14px 64px; }
    .xk-topbar { min-height: 40px; gap: 8px; margin-bottom: 16px; }
    .xk-crumb { font-size: var(--xk-fs-small); padding: 10px 2px; min-height: 40px; }
    .xk-topbar-actions a { padding: 10px 4px; min-height: 40px; font-size: var(--xk-fs-small); }
    .xk-page-title { font-size: 20px; }
    .xk-btn { padding: 10px 18px; min-height: 40px; }
    .xk-btn.sm { padding: 8px 14px; min-height: 36px; }
    input, select, textarea { font-size: 16px !important; }
}

/* ============================================================
   ★ 2026-08-11 UI 全面优化层（ui-kit 页面：文字/间距/交互统一）
   ============================================================ */
body, .page, .container { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body { line-height: 1.6; }
h1, h2, h3, h4 { letter-spacing: -0.015em; line-height: 1.35; color: var(--xk-text-1, #17181c); }
h1 { font-size: 26px; font-weight: 700; }
h2 { font-size: 18px; font-weight: 650; }
h3 { font-size: 15px; font-weight: 600; }
p { line-height: 1.65; }
button, .btn, .xk-btn { transition: background-color .2s, color .2s, transform .15s, box-shadow .2s, border-color .2s; }
button:active:not(:disabled), .btn:active:not(:disabled) { transform: scale(.97); }
input, textarea, select { transition: border-color .2s, box-shadow .2s; }
input:focus, textarea:focus, select:focus { border-color: var(--xk-primary, #2f6fed); box-shadow: 0 0 0 3px var(--xk-primary-light, rgba(47,111,237,.1)); }
.card, .panel, .box { box-shadow: var(--xk-shadow-card, 0 1px 2px rgba(23,24,28,.04)); }
.modal, .popover, .dropdown-menu { box-shadow: var(--xk-shadow-pop, 0 8px 24px rgba(23,24,28,.12)); }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(120,124,140,.35); border-radius: 999px; }
::-webkit-scrollbar-thumb:hover { background: rgba(120,124,140,.55); }
.stat, .count, [class*="num"], [class*="count"] { font-variant-numeric: tabular-nums; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ★ 2026-08-12 老板指令:统一前端搜索框 UI —— 全局兜底样式(高度38px/圆角10px/统一边框与聚焦态)
   :where() 零优先级,任何已有容器/内联样式均优先,只兜底未定制的裸搜索框 */
:where(input[type="search"], input[type="text"][placeholder*="搜索"]) {
    -webkit-appearance: none;
    appearance: none;
    height: 38px;
    padding: 0 12px;
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    font-size: 13px;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #1e293b);
    outline: none;
    box-sizing: border-box;
    transition: border-color .15s, box-shadow .15s;
}
:where(input[type="search"], input[type="text"][placeholder*="搜索"]):focus {
    border-color: var(--xk-primary);
    box-shadow: 0 0 0 3px var(--xk-primary-light);
}