/* ============================================================
   components.css — 跨频道通用组件单源（语文桥）
   原则：本文件只定义"基础形态"（边框/圆角/内边距/字号/状态），
        配色一律走 CSS 变量，由各频道私有 CSS 通过 body/容器
        变量覆盖或修饰类实现个性化。
   用法：HTML 元素同时挂频道类与对应 .ui-* 类，例如
        <button class="tb-btn ui-btn">、<span class="tag ui-tag">
   频道私有 CSS 只需保留"配色 / 独有版式"，删掉与 .ui-* 重复的
   基础声明，即可一改尽改。
   ============================================================ */
/* 通用 reset：清 body/html 默认 margin（2026-08-14 修复 mingshipu 等无私有CSS频道四周白边） */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

/* 滚动条轨道：全站统一透明，露出容器自身背景色
   —— 2026-09-23 桥哥：教材库滚动条不要白底色。
   原先各页只写 ::-webkit-scrollbar-thumb，轨道走浏览器默认（纯白），
   在米白/深色底上都会突兀成一条白带。此处只补 track，不动任何 thumb。 */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-track-piece { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbbd96; border-radius: 5px; border: 2px solid transparent;
                            background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #b8922e; background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* ============================================================
   文字选中：全站统一（原先无任何 ::selection 定义，
   浏览器默认只改背景不改字色 → 用户看不出选中了什么）
   —— 2026-09-23 桥哥：选中时字色要有变化
   ============================================================ */
::selection { background: rgba(201, 162, 77, .32); color: #103c56; }
::-moz-selection { background: rgba(201, 162, 77, .32); color: #103c56; }
/* 输入框内选中要更明显（正在打字时最需要看清单选范围） */
input::selection, textarea::selection { background: rgba(184, 146, 46, .40); color: #1a2b36; }
input::-moz-selection, textarea::-moz-selection { background: rgba(184, 146, 46, .40); color: #1a2b36; }

/* ============================================================
   输入区字色：原先无定义 → 走浏览器默认纯黑 (#000) 配纯白底，刺眼
   —— 2026-09-23 桥哥：输入的文字变暗一点点
   改用站点已有的暖深棕 #3a3226，底色配暖白 #fdfcf9
   ============================================================ */
#aiInput, .ai-input-area textarea, .ai-box textarea {
  color: #3a3226 !important;
  background: #fdfcf9 !important;
  caret-color: #b8922e;
}
#aiInput::placeholder, .ai-input-area textarea::placeholder { color: #a89c88; }
#searchInput { color: #3a3226; background: #fdfcf9; }
#searchInput::placeholder { color: #a89c88; }
:root { scrollbar-color: #cbbd96 transparent; scrollbar-width: thin; }
:root{
  /* 按钮 */
  --ui-btn-fs: 13px; --ui-btn-fw: 400; --ui-btn-pad: 6px 13px;
  --ui-btn-radius: 20px; --ui-btn-bg: #fff; --ui-btn-border: #ece6da;
  --ui-btn-color: #5b554a; --ui-btn-hover-border: #e8c95c; --ui-btn-hover-color: #b8902f;
  /* 标签 / 徽章 */
  --ui-tag-fs: .8rem; --ui-tag-fw: 500; --ui-tag-pad: .1rem .7rem;
  --ui-tag-radius: 30px; --ui-tag-bg: #faf6ea; --ui-tag-color: #b8902f;
  /* 卡片外框（仅外框，不含内部布局） */
  --ui-card-radius: 14px; --ui-card-border: 1px solid #ece6da;
  --ui-card-pad: 1rem 1.1rem; --ui-card-bg: #fff;
  --ui-card-shadow: 0 2px 10px rgba(120,90,30,.05);
  /* 区块标题条 */
  --ui-sec-fs: 1.2rem; --ui-sec-fw: 700; --ui-sec-color: #1a1a2e;
  --ui-sec-gap: .6rem;
  /* 面包屑 */
  --ui-crumb-fs: 13px; --ui-crumb-color: #7a6a5a; --ui-crumb-sep: #c0b8a8;
  /* 输入框 */
  --ui-input-fs: 13px; --ui-input-pad: 6px 10px; --ui-input-radius: 8px;
  --ui-input-border: 1px solid #ece6da; --ui-input-bg: #fff;
}
.ui-btn, .tb-btn{
  font-family: var(--font-ui, -apple-system,"Segoe UI",Roboto,sans-serif);
  font-size: var(--ui-btn-fs); font-weight: var(--ui-btn-fw);
  padding: var(--ui-btn-pad); border: 1px solid var(--ui-btn-border);
  background: var(--ui-btn-bg); color: var(--ui-btn-color);
  border-radius: var(--ui-btn-radius); cursor: pointer;
  text-decoration: none; display: inline-flex; align-items: center;
  transition: all .15s; white-space: nowrap;
}
.ui-btn:hover, .tb-btn:hover{ border-color: var(--ui-btn-hover-border); color: var(--ui-btn-hover-color); }
.ui-tag{
  display: inline-block; font-size: var(--ui-tag-fs); font-weight: var(--ui-tag-fw);
  padding: var(--ui-tag-pad); border-radius: var(--ui-tag-radius);
  background: var(--ui-tag-bg); color: var(--ui-tag-color); line-height: 1.4;
}
.ui-card{
  border: var(--ui-card-border); border-radius: var(--ui-card-radius);
  background: var(--ui-card-bg); box-shadow: var(--ui-card-shadow);
  padding: var(--ui-card-pad);
}
.ui-section{
  font-size: var(--ui-sec-fs); font-weight: var(--ui-sec-fw);
  color: var(--ui-sec-color); margin: 2.2rem 0 1rem;
  display: flex; align-items: center; gap: var(--ui-sec-gap);
}
.ui-crumb{ font-size: var(--ui-crumb-fs); color: var(--ui-crumb-color); }
.ui-crumb a{ color: inherit; text-decoration: none; }
.ui-crumb a:hover{ color: var(--ui-btn-hover-color); }
.ui-input{
  font-size: var(--ui-input-fs); padding: var(--ui-input-pad);
  border: var(--ui-input-border); border-radius: var(--ui-input-radius);
  background: var(--ui-input-bg); color: #3a342c; font-family: inherit;
}
.ui-input:focus{ outline: none; border-color: var(--ui-btn-hover-border); }