/* ==========================================================================
   多猫鱼学雅思 · 品牌令牌层（brand.css）
   三页共用：index.html（学习面板） / docs.html（帮助） / extension.html（下载）
   --------------------------------------------------------------------------
   约定：
   1. 本文件只放「令牌 + 品牌标识 + 顶栏 + 页脚 + 通用组件」，页面特有布局留在各页 <style>
   2. 旧的变量名（--bg/--panel/--panel2/--line/--text/--muted/--accent/--accent2/--danger）
      全部保留并指向新令牌，页面里几千行既有样式无需改动即自动生效
   3. 色彩只有 5 个语义色：品牌蓝（标识） / 行动黄（操作） / 学习绿（掌握）
      / 警示红（危险） / 界面底（深色）
   ========================================================================== */

@font-face {
  font-family: 'Source Sans 3';
  src: url('sourcesans3-var.woff2') format('woff2');
  font-weight: 200 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- 品牌标识 ---------- */
  --brand:        #2E86E0;   /* 标识、链接、选中态 */
  --brand-deep:   #1B5FAE;   /* 按压 / 描边加重 */
  --brand-soft:   #8FC0F2;   /* 深底上的浅蓝文字 */
  --brand-tint:   rgba(46, 134, 224, .14);
  --brand-line:   rgba(46, 134, 224, .38);

  /* ---------- 语义色（旧名保留，页面既有引用自动生效） ---------- */
  --bg:       #0F1420;       /* 界面底 */
  --panel:    #171E2E;       /* 面板 / 卡片 */
  --panel2:   #1E2740;       /* 次级面板 / 输入框 */
  --line:     #3E4B70;       /* 分隔线/卡片边界。2026-10-16 提亮：#2A3450 对 --panel 只有 1.36:1，卡片/按钮/输入框边界几乎不可见 */
  --text:     #E8ECF4;       /* 主文字 */
  --muted:    #8B95AB;       /* 次要文字 */
  --accent:   #FCAB00;       /* 行动黄：主按钮、重点词 */
  --accent2:  #53C79A;       /* 学习绿：已掌握、成功 */
  --ok:       #53C79A;       /* docs/extension 用的旧别名 */
  --danger:   #FF5F6D;       /* 警示红 */
  --danger-soft: #FF9AA2;    /* 深底上的柔红文字（危险按钮常态） */
  --learn-tint:  rgba(83, 199, 154, .14);   /* 已掌握态的浅底 */
  --bad-tint:    rgba(255, 95, 109, .14);   /* 答错 / 忘了 的浅底（与 learn-tint 对称） */
  --bad-line:    rgba(255, 95, 109, .38);   /* 答错的描边 */
  --code-bg:  #0B101B;       /* 代码 / 等宽块底 */

  /* ---------- 阅读器语义色（收敛原 10 个硬编码色） ---------- */
  --ink-en:    #E8ECF4;      /* 英文原文 */
  --ink-zh:    #A9B4C8;      /* 译文 */
  --ink-key:   #E7C876;      /* 语法 / 重点标注 */
  --ink-note:  #A7D0BD;      /* 要点归纳（与学习绿同族但更柔和） */
  --ink-quiet: #9AA5BB;      /* 弱化说明 */
  --ink-block: #232C44;      /* 引用块底 */

  /* ---------- 字体 ---------- */
  --font-ui:   'Source Sans 3', -apple-system, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif;
  --font-read: Georgia, "Songti SC", "Noto Serif SC", serif;

  /* ---------- 字号层级 ---------- */
  --fs-display: 22px;   /* 页面主数字 / 大标题 */
  --fs-h1:      16px;   /* 顶栏字标、区块主标题 */
  --fs-h2:      14px;   /* 面板标题 */
  --fs-body:    14px;   /* 正文 */
  --fs-sm:      12px;   /* 辅助信息 */

  /* ---------- 圆角 / 间距 ---------- */
  --r-sm:  8px;
  --r-md:  12px;
  --r-lg:  16px;
  --r-pill: 24px;
  --sp-1: 6px;
  --sp-2: 10px;
  --sp-3: 16px;
  --sp-4: 24px;

  /* 统一阴影（深色界面下只用极轻的一层，避免发灰） */
  --shadow-1: 0 2px 10px rgba(0, 0, 0, .22);
}

/* ==========================================================================
   基础
   ========================================================================== */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a { color: var(--brand); }

::selection { background: var(--brand-line); color: #fff; }

/* 焦点可见性：键盘操作时有清晰指示，鼠标点击不打扰 */
:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ==========================================================================
   品牌标识（几何 mark：文本行 + 落在行上的琥珀点 = 「划词」这个动作）
   说明：mark 底色用品牌蓝而非深色，因为在 #171E2E 顶栏上深色方块没有边界
   ========================================================================== */
a.brand {
  display: flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  color: inherit;
  text-decoration: none;
}
.brand-mark { flex: 0 0 auto; display: block; border-radius: 9px; }
.brand-text { min-width: 0; }
.brand-text h1 {
  margin: 0;
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-text h1 span { color: var(--muted); font-weight: 500; }
.brand-text .meta {
  color: var(--muted);
  font-size: var(--fs-sm);
  margin-top: 1px;
  white-space: nowrap;
}

/* ==========================================================================
   顶栏（三页共用；index 的 <header> 元素加 .site-header 类即可）
   ========================================================================== */
.site-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 14px 28px;
  border-bottom: 1px solid var(--line);
  background: var(--panel);
  position: relative;
  z-index: 5;
}
/* 顶栏下沿的品牌色细线：低成本的一致性线索 */
.site-header::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--brand-line), transparent 62%);
  pointer-events: none;
}

.site-header .actions {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* ==========================================================================
   按钮
   ========================================================================== */
.btn-brand {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--accent);
  color: #1A1200;
  border: 1px solid var(--accent);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: filter .12s, background .12s, border-color .12s, color .12s;
}
.btn-brand:hover { filter: brightness(1.08); }

.btn-quiet {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 8px 16px;
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: border-color .12s, color .12s;
}
.btn-quiet:hover { border-color: var(--brand); color: var(--brand-soft); }

/* 图标与文字并排时，统一图标尺寸与对齐 */
.btn-brand .ico,
.btn-quiet .ico { display: inline-flex; flex: 0 0 auto; }

/* ==========================================================================
   导航页签（.tabs / .tab 沿用原类名 —— body.is-mobile 下会被改写为底部导航，
   所以这里的桌面样式必须留在同一套选择器上，不能换名）
   ========================================================================== */
.tabs {
  display: flex;
  align-items: stretch;
  gap: 2px;
  padding: 0 28px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  overflow-x: auto;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }

.tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--muted);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  padding: 12px 16px 10px;
  cursor: pointer;
  transition: color .12s, border-color .12s;
}
.tab:hover { color: var(--text); }
.tab.active { color: var(--brand-soft); border-bottom-color: var(--brand); }
.tab .ico { display: inline-flex; flex: 0 0 auto; }
.tab .ico svg { display: block; }

/* ==========================================================================
   通用小件
   ========================================================================== */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  padding: 4px 11px;
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
}
.chip.brand { color: var(--brand-soft); border-color: var(--brand-line); background: var(--brand-tint); }
.chip.learn { color: var(--accent2); border-color: rgba(83, 199, 154, .38); background: rgba(83, 199, 154, .12); }

/* 区块小标题（比 h2 轻一级，用于次级区与折叠区） */
.sect-kicker {
  color: var(--muted);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

/* ==========================================================================
   页脚（docs / extension 共用）
   ========================================================================== */
.site-footer {
  margin-top: 44px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 12.5px;
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.site-footer a { color: var(--muted); text-decoration: none; }
.site-footer a:hover { color: var(--brand-soft); }

/* ==========================================================================
   文档页（docs / extension）通用排版
   ========================================================================== */
.doc-wrap { max-width: 1000px; margin: 0 auto; padding: 26px 18px 90px; }
.doc-wrap.narrow { max-width: 760px; }

.doc-title { font-size: 26px; margin: 6px 0 6px; line-height: 1.3; }
.doc-title .brandword { color: var(--accent); }
.doc-sub { color: var(--muted); margin: 0 0 26px; font-size: 15px; line-height: 1.7; }

.doc-section h2 {
  font-size: 19px;
  margin: 34px 0 14px;
  padding-left: 11px;
  border-left: 3px solid var(--brand);
}

.doc-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 20px;
  margin: 12px 0;
}

.doc-tag {
  display: inline-block;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 2px 10px;
  font-size: 12.5px;
  color: var(--ok);
  margin-right: 6px;
}

.doc-code {
  background: #0B101B;
  border: 1px solid var(--line);
  border-radius: 5px;
  padding: 1px 6px;
  font-size: 13px;
  color: var(--accent);
  font-family: ui-monospace, Menlo, Consolas, monospace;
}

/* 面包屑（docs / extension 顶部返回） */
.crumb {
  display: flex;
  gap: var(--sp-2);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 20px;
}
.crumb .sep { color: var(--line); }
.crumb .here { color: var(--muted); font-size: 13px; }

/* ==========================================================================
   极简顶栏 + 侧边抽屉（学习面板）
   设计意图：阅读时屏幕上只留一条 44px 的标题条；页签、登录态、下载、模型
   全部收进抽屉，靠点击标题召唤，避免长期占据视觉带宽。
   ========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 44px;
  padding: 6px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  position: sticky;
  top: 0;
  z-index: 60;
}
.topbar-r { display: flex; align-items: center; gap: 8px; min-width: 0; }
.topbar .status {
  color: var(--muted);
  font-size: var(--fs-sm);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 46vw;
}

/* 标题按钮 = 抽屉开关 */
.brand-btn {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  background: transparent;
  border: 0;
  padding: 4px 8px 4px 2px;
  border-radius: var(--r-sm);
  color: var(--text);
  font-family: inherit;
  cursor: pointer;
  transition: background .12s;
}
.brand-btn:hover { background: var(--panel2); }
.brand-btn .bt-title {
  font-size: var(--fs-h1);
  font-weight: 600;
  letter-spacing: .2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.brand-btn .caret {
  flex: 0 0 auto;
  color: var(--muted);
  transition: transform .16s ease;
}
.brand-btn[aria-expanded="true"] .caret { transform: rotate(180deg); }

/* 遮罩与抽屉本体（层级：抽屉 150 < 登录门禁 200 < 弹窗 300） */
.drawer-mask {
  position: fixed;
  inset: 0;
  z-index: 140;
  background: rgba(8, 11, 19, .55);
  backdrop-filter: blur(2px);
}
.drawer-mask[hidden] { display: none; }

.drawer {
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 150;
  width: 288px;
  max-width: 84vw;
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border-right: 1px solid var(--line);
  box-shadow: var(--shadow-1);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: drawer-in .16s ease-out;
}
.drawer[hidden] { display: none; }
@keyframes drawer-in {
  from { transform: translateX(-16px); opacity: .5; }
  to   { transform: none; opacity: 1; }
}

.drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 16px 16px 14px;
  border-bottom: 1px solid var(--line);
}
.drawer-head .dw-title { font-size: var(--fs-h1); font-weight: 600; }
.drawer-head .dw-sub {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-top: 3px;
}
.dw-close {
  margin-left: auto;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  padding: 5px 7px;
  border-radius: 6px;
  cursor: pointer;
}
.dw-close:hover { color: var(--text); background: var(--panel2); }

.dw-sect { padding: 14px 16px; border-bottom: 1px solid var(--line); }
/* 大模型未配置（chip 被 JS 隐藏）时整节收起，避免留一块空标题 */
.dw-sect:has(#llmModel[hidden]) { display: none; }
.dw-kicker {
  color: var(--muted);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.dw-hint { color: var(--muted); font-size: 12px; line-height: 1.6; margin-top: 8px; }

.dw-user { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

.dw-nav { display: flex; flex-direction: column; gap: 2px; }
.dw-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: 0;
  color: var(--muted);
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 12px;
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: background .12s, color .12s;
}
.dw-item:hover { background: var(--panel2); color: var(--text); }
.dw-item.active { color: var(--brand-soft); background: var(--brand-tint); }
.dw-item[hidden] { display: none; }
.dw-item .ico { display: inline-flex; flex: 0 0 auto; }

.dw-links { display: flex; flex-direction: column; gap: 4px; }
.dw-link {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: var(--r-sm);
  color: var(--text);
  text-decoration: none;
  font-size: 13.5px;
  font-weight: 600;
  transition: background .12s;
}
.dw-link:hover { background: var(--panel2); }
.dw-link .ico { display: inline-flex; flex: 0 0 auto; color: var(--muted); }
.dw-link .tail {
  margin-left: auto;
  color: var(--muted);
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
}

.dw-foot {
  margin-top: auto;
  padding: 14px 16px 18px;
  border-top: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
.dw-foot .dw-upd { color: var(--muted); font-size: var(--fs-sm); }
.dw-foot #refresh { margin-left: auto; }

/* 桌面端页签收进抽屉；移动端保留底部页签（body.is-mobile 下 .tabs 变底部导航） */
body:not(.is-mobile) .tabs { display: none; }

/* ==========================================================================
   移动端：顶栏换行不挤压，页签横向滚动
   ========================================================================== */
@media (max-width: 720px) {
  .site-header { padding: 12px 16px; align-items: flex-start; }
  .site-header .actions { gap: 6px; }
  .site-header .actions .hb-t { display: none; }   /* 窄屏只留图标，避免顶栏炸开 */
  .tabnav { padding: 0 12px; }
  .doc-wrap { padding: 20px 16px 70px; }
  .doc-title { font-size: 22px; }
}