/* ==================== 全局基础重置 ==================== */
html, body {
    height: 100%;
    margin: 0;
    padding: 0;
}

/* ==================== 知识模块（ITERATION-02）
   ITERATION-18：按 UI_SPEC 整改 —— 旧蓝灰/紫蓝/杂色全部替换为 5 主色 + 中性灰阶令牌，
   圆角收敛到 8px（卡片 12px），阴影统一为极淡阴影。
   注：登录页样式已拆分到 static/css/login.css（仅 /login 加载），本文件只服务全站。 == */
/* 书籍详情页 Tab */
.kbook-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.kbook-tab { border: none; background: none; padding: 8px 16px; font-size: 15px; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; border-radius: 8px 8px 0 0; }
.kbook-tab.active { color: var(--accent); border-bottom-color: var(--accent); font-weight: 600; }
.kbook-pane { min-height: 320px; }
.kbook-iframe { width: 100%; height: 70vh; border: 1px solid var(--border); border-radius: var(--radius-card); background: var(--card); }
.kbook-md { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px 24px; font-size: 15px; line-height: 1.8; color: var(--text); }
.kbook-md h1, .kbook-md h2, .kbook-md h3 { margin: 16px 0 8px; }
.kbook-md h1 { font-size: 15px; }
.kbook-md h2 { font-size: 15px; }
.kbook-md h3 { font-size: 15px; }
.kbook-md pre { background: var(--bg); padding: 8px 16px; border-radius: var(--radius); overflow-x: auto; }
.kbook-md code { background: var(--bg); padding: 0 4px; border-radius: var(--radius); font-size: 13px; }
.kbook-md pre code { background: none; padding: 0; }
.kbook-md blockquote { border-left: 3px solid var(--border); margin: 8px 0; padding: 4px 16px; color: var(--muted); background: var(--card-soft); border-radius: 0 var(--radius) var(--radius) 0; }
.kbook-md ul, .kbook-md ol { padding-left: 24px; margin: 8px 0; }
.kbook-md hr { border: none; border-top: 1px solid var(--border); margin: 16px 0; }
.kbook-md a { color: var(--accent); }
/* 详情页闪卡 */
.kcard { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; margin-bottom: 8px; cursor: pointer; box-shadow: var(--shadow); }
.kcard-q { font-size: 15px; font-weight: 500; color: var(--text); }
.kcard-a { margin-top: 8px; font-size: 15px; color: var(--muted); border-top: 1px dashed var(--border); padding-top: 8px; }
.kcard-type { display: inline-block; margin-top: 8px; font-size: 13px; color: var(--muted); background: var(--bg); padding: 4px 8px; border-radius: var(--radius); }
/* 详情页知识条目（ITERATION-03） */
.kitem-list { display: flex; flex-direction: column; gap: 8px; }
.kitem { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius-card); padding: 16px; cursor: pointer; transition: box-shadow .15s, border-color .15s; box-shadow: var(--shadow); }
.kitem:hover { border-color: var(--accent); }
.kitem-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.kitem-id { font-size: 13px; font-weight: 600; color: var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: var(--radius); flex-shrink: 0; }
.kitem-title { font-size: 15px; font-weight: 600; color: var(--text); flex: 1; min-width: 0; }
.kitem-core { font-size: 13px; color: #fff; background: var(--accent); padding: 4px 8px; border-radius: var(--radius); flex-shrink: 0; }
.kitem-bloom { font-size: 13px; color: var(--accent); background: var(--accent-soft); padding: 4px 8px; border-radius: var(--radius); flex-shrink: 0; }
.kitem-arrow { color: var(--muted); flex-shrink: 0; }
.kitem-meta { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-top: 8px; font-size: 13px; color: var(--muted); }
.kitem-chapter i, .kitem-problems i { margin-right: 4px; }
.kitem-problems { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.kitem-chip { display: inline-block; font-size: 13px; color: var(--muted); background: var(--bg); padding: 4px 8px; border-radius: var(--radius); }
.kitem-detail { margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 8px; }
.kitem-section { margin-bottom: 8px; }
.kitem-label { display: inline-block; font-size: 13px; color: var(--accent); font-weight: 600; margin-bottom: 4px; }
.kitem-text { font-size: 13px; color: var(--text); line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.kitem-text .kitem-chip { margin-right: 4px; }
/* 移动端：详情页 Tab 横向滚动，知识条目紧凑展示 */
@media (max-width: 768px) {
    .kbook-tabs { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .kbook-tab { padding: 8px 16px; white-space: nowrap; }
    .kitem { padding: 16px; }
    .kitem-head { gap: 8px; }
    .kitem-meta { gap: 8px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   知行系统 UI_SPEC 设计令牌（ITERATION-18）
   依据 UI_SPEC.md：5 主色 / 界面 15px 无衬线 / 间距 8 倍数 / 圆角 8·12px /
   单一阴影 / 按钮两态。改 UI 前必读 UI_SPEC.md（DEVELOPMENT.md 第 7.8 条）。

   ⚠️ 本段必须放在登录页样式之后：登录页块内定义了 --primary / --accent 等
   同名变量供登录页使用，此处覆盖为全站规范值；登录页不使用这些变量，
   故登录页外观不受影响（UI_SPEC 第 11 节：登录页零改动）。
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
    /* ---- 5 个主色 ---- */
    --bg: #f5f6f7;                 /* 底色 */
    --card: #ffffff;               /* 卡片白 */
    --accent: #c2703a;             /* 暖琥珀：主按钮 / 选中态 / 关键数字 / 军师 */
    --success: #2e9e5b;            /* 成功绿 */
    --danger: #e53935;             /* 危险红 */

    /* ---- 中性灰阶（黑白色阶，不计入主色） ---- */
    --card-soft: #fafbfc;          /* 极浅卡片底 */
    --border: #e5e7eb;             /* 边框 / 分隔 */
    --text: #1f2328;               /* 正文 */
    --muted: #6b7280;              /* 次要文字 */
    --placeholder: #9ca3af;        /* 占位文字 */

    /* ---- 主色衍生（仅由 5 主色混合而来，不新增色相） ---- */
    --accent-hover: #a85c2c;       /* 暖琥珀加深 */
    --accent-soft: #fdf3ec;        /* 暖琥珀淡化底 */

    /* ---- 圆角 / 阴影 / 字体 ---- */
    --radius: 8px;                 /* 按钮 / 输入框 / 标签 */
    --radius-card: 12px;           /* 卡片 / 弹窗 / 下拉菜单 */
    --shadow: 0 1px 3px rgba(0, 0, 0, 0.06);          /* 唯一常规阴影 */
    --shadow-float: 0 8px 24px rgba(0, 0, 0, 0.10);   /* 浮层阴影 */
    --font-ui: -apple-system, "Segoe UI", "Microsoft YaHei", "PingFang SC", sans-serif;
    --font-serif: Georgia, "Songti SC", "SimSun", "Noto Serif SC", serif;

    /* ---- 结构高度 ---- */
    --sidebar-width: 175px;        /* 兼容旧变量，工作台已不用它做布局 */
    --wb-topbar-h: 48px;
}

/* ==================== UI_SPEC 基础组件 ==================== */
body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-ui);
    font-size: 15px;
    line-height: 1.6;
}

/* ----- 卡片 ----- */
.ui-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: var(--radius-card);
    padding: 16px;
    box-shadow: var(--shadow);
}

/* ----- 按钮：全站只有两种形态 ----- */
.ui-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 8px 16px; border-radius: var(--radius);
    font-size: 15px; font-family: var(--font-ui); cursor: pointer;
    border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.ui-btn-primary { background: var(--accent); color: #fff; }
.ui-btn-primary:hover { background: var(--accent-hover); }
.ui-btn-secondary { background: var(--card); color: var(--text); border-color: var(--border); }
.ui-btn-secondary:hover { background: var(--bg); }
.ui-btn:disabled, .ui-btn-primary:disabled, .ui-btn-secondary:disabled {
    background: var(--border); color: var(--placeholder); cursor: not-allowed; border-color: transparent;
}

/* ----- 表单控件 ----- */
.ui-input, .ui-select, .ui-textarea {
    width: 100%; padding: 8px 16px;
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); color: var(--text);
    font-size: 15px; font-family: var(--font-ui); outline: none;
}
.ui-input:focus, .ui-select:focus, .ui-textarea:focus { border-color: var(--accent); }
.ui-input::placeholder, .ui-textarea::placeholder { color: var(--placeholder); }

/* ----- 徽章 / 标签 ----- */
.ui-badge {
    display: inline-block; padding: 4px 8px;
    border-radius: var(--radius); font-size: 13px;
    background: var(--bg); color: var(--muted);
}
.ui-badge-accent { background: var(--accent-soft); color: var(--accent); }
.ui-badge-success { background: rgba(46, 158, 91, 0.12); color: var(--success); }
.ui-badge-danger { background: rgba(229, 57, 53, 0.12); color: var(--danger); }

/* ----- 弹窗（齿轮「我是谁」等） ----- */
.ui-modal-overlay {
    display: none; position: fixed; inset: 0; z-index: 2000;
    background: rgba(31, 35, 40, 0.35);
    align-items: center; justify-content: center; padding: 24px;
}
.ui-modal-overlay.show { display: flex; }
.ui-modal {
    width: 100%; max-width: 520px; max-height: 84vh;
    background: var(--card); border-radius: var(--radius-card);
    box-shadow: var(--shadow-float); overflow: hidden;
    display: flex; flex-direction: column;
}
.ui-modal-hd {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 24px; border-bottom: 1px solid var(--border);
    font-size: 15px; font-weight: 600;
}
.ui-modal-bd { padding: 16px 24px; overflow-y: auto; }
.ui-modal-ft { display: flex; gap: 8px; justify-content: flex-end; margin-top: 24px; }