/* ==========================================================================
   北印工具集 —— 全站样式
   ==========================================================================
   设计原则:
     1. 纯手写 CSS,零依赖、零构建步骤(与本项目的零依赖约束一致)
     2. 明确定义 .ad-slot / .premium-card 的样式,保证广告与付费占位
        不会破坏布局、不产生 CLS(布局偏移)
     3. 移动端优先:大学生大量使用手机访问,窄屏下表格转为卡片式布局
     4. **主题化设计**:所有颜色走语义变量(--bg / --surface / --text 等),
        切换 data-theme 即可整体换肤,支持夜间模式
     5. **动效克制**:统一使用 --ease / --dur 令牌,并整体尊重
        prefers-reduced-motion(无障碍要求)
   ========================================================================== */

/* ---------- 设计令牌 ---------- */
:root {
  /* 品牌色阶(不随主题变化) */
  --brand-50: #eff6ff;
  --brand-100: #dbeafe;
  --brand-200: #bfdbfe;
  --brand-300: #93c5fd;
  --brand-500: #3b82f6;
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --brand-900: #1e3a8a;

  /* 中性色阶(浅色主题原值,保留以兼容既有选择器) */
  --slate-50: #f8fafc;
  --slate-100: #f1f5f9;
  --slate-200: #e2e8f0;
  --slate-300: #cbd5e1;
  --slate-400: #94a3b8;
  --slate-500: #64748b;
  --slate-600: #475569;
  --slate-700: #334155;
  --slate-800: #1e293b;
  --slate-900: #0f172a;

  --green-50: #f0fdf4;
  --green-600: #16a34a;
  --green-700: #15803d;
  --amber-50: #fffbeb;
  --amber-200: #fde68a;
  --amber-600: #d97706;
  --red-50: #fef2f2;
  --red-600: #dc2626;
  --red-700: #b91c1c;

  /* ---- 语义化主题变量:浅色主题 ---- */
  --bg: #ffffff;
  --bg-subtle: #f8fafc;        /* 页面级浅底(如 hero、表头) */
  --surface: #ffffff;          /* 卡片表面 */
  --surface-2: #f8fafc;        /* 次级表面(如输入框内底) */
  --surface-hover: #f8fafc;
  --border: #e2e8f0;
  --border-strong: #cbd5e1;
  --text: #0f172a;             /* 主文字 */
  --text-muted: #475569;       /* 次要文字 */
  --text-subtle: #94a3b8;      /* 弱化文字(占位、脚注) */
  --accent: #2563eb;
  --accent-hover: #1d4ed8;
  --accent-soft: #eff6ff;      /* 主色的极浅底 */
  --accent-border: #bfdbfe;

  /* 页头/页脚在浅色下也用深色,保证品牌一致 */
  --header-bg: rgba(255, 255, 255, 0.82);
  --header-border: #e2e8f0;
  --footer-bg: #0f172a;
  --footer-text: #94a3b8;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;
  --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow: 0 2px 8px rgba(15, 23, 42, 0.08);
  --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08);
  --shadow-lg: 0 12px 32px rgba(15, 23, 42, 0.12);

  /* 动效令牌:统一时长与缓动,保证全站过渡手感一致 */
  --dur-fast: 140ms;
  --dur: 220ms;
  --dur-slow: 380ms;
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --maxw: 72rem;
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Consolas, "Liberation Mono",
    monospace;

  color-scheme: light;
}

/* ---------- 夜间模式 ----------
   两种触发方式:
     1. 用户手动切换 → html[data-theme="dark"]
     2. 未手动设置时跟随系统 → @media (prefers-color-scheme: dark)
   为了不用 JS 也能有合理表现,系统偏好那条在无 data-theme 时生效。
*/
html[data-theme="dark"] {
  --slate-50: #0b1220;
  --slate-100: #1e293b;
  --slate-200: #334155;
  --slate-300: #475569;
  --slate-400: #64748b;
  --slate-500: #94a3b8;
  --slate-600: #cbd5e1;
  --slate-700: #e2e8f0;
  --slate-800: #f1f5f9;
  --slate-900: #f8fafc;

  --brand-50: #132a4d;
  --brand-100: #17325e;
  --brand-200: #1e4178;
  --brand-900: #bfdbfe;

  --green-50: #0d2b1a;
  --green-700: #4ade80;
  --amber-50: #33270a;
  --amber-200: #78560f;
  --amber-600: #fbbf24;
  --red-50: #3a1414;
  --red-700: #fca5a5;

  --bg: #0b1220;
  --bg-subtle: #0f1829;
  --surface: #141d2f;
  --surface-2: #1a2437;
  --surface-hover: #1a2437;
  --border: #263349;
  --border-strong: #35455f;
  --text: #e8eefb;
  --text-muted: #a9b6cc;
  --text-subtle: #7b8aa3;
  --accent: #60a5fa;
  --accent-hover: #93c5fd;
  --accent-soft: #132a4d;
  --accent-border: #1e4178;

  --header-bg: rgba(15, 24, 41, 0.86);
  --header-border: #263349;
  --footer-bg: #070d18;
  --footer-text: #7b8aa3;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

  color-scheme: dark;
}

/* 未手动设置主题时,跟随系统偏好 */
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) {
    --slate-50: #0b1220;
    --slate-100: #1e293b;
    --slate-200: #334155;
    --slate-300: #475569;
    --slate-400: #64748b;
    --slate-500: #94a3b8;
    --slate-600: #cbd5e1;
    --slate-700: #e2e8f0;
    --slate-800: #f1f5f9;
    --slate-900: #f8fafc;

    --brand-50: #132a4d;
    --brand-100: #17325e;
    --brand-200: #1e4178;
    --brand-900: #bfdbfe;

    --green-50: #0d2b1a;
    --green-700: #4ade80;
    --amber-50: #33270a;
    --amber-200: #78560f;
    --amber-600: #fbbf24;
    --red-50: #3a1414;
    --red-700: #fca5a5;

    --bg: #0b1220;
    --bg-subtle: #0f1829;
    --surface: #141d2f;
    --surface-2: #1a2437;
    --surface-hover: #1a2437;
    --border: #263349;
    --border-strong: #35455f;
    --text: #e8eefb;
    --text-muted: #a9b6cc;
    --text-subtle: #7b8aa3;
    --accent: #60a5fa;
    --accent-hover: #93c5fd;
    --accent-soft: #132a4d;
    --accent-border: #1e4178;

    --header-bg: rgba(15, 24, 41, 0.86);
    --header-border: #263349;
    --footer-bg: #070d18;
    --footer-text: #7b8aa3;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
    --shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5);
    --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.55);

    color-scheme: dark;
  }
}

/* 主题切换时给整体一个柔和的过渡(避免瞬间闪白/闪黑) */
html.theme-transition,
html.theme-transition *,
html.theme-transition *::before,
html.theme-transition *::after {
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              color var(--dur) var(--ease) !important;
}

/* ---------- 基础重置 ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.75;
  color: var(--text);
  background: var(--bg-subtle);
  /* 中文排版:适当增加字间距提升可读性 */
  letter-spacing: 0.01em;
  /* 主题切换时的整体过渡(颜色变化柔和,不闪) */
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}

img, svg { max-width: 100%; height: auto; }

a { color: var(--accent); text-decoration: none; transition: color var(--dur-fast) var(--ease); }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  line-height: 1.35;
  color: var(--text);
  font-weight: 700;
  /* 标题字重较粗,字间距收紧一点更精神 */
  letter-spacing: -0.01em;
}
h1 { font-size: 1.9rem; margin: 0 0 0.6rem; }
h2 { font-size: 1.45rem; margin: 2rem 0 0.9rem; }
h3 { font-size: 1.12rem; margin: 1.5rem 0 0.6rem; }
p { margin: 0 0 1rem; }

/* ---------- 无障碍工具类 ---------- */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: #fff; padding: 0.6rem 1rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* 键盘焦点可见性 */
a:focus-visible, button:focus-visible, input:focus-visible,
select:focus-visible, summary:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--brand-500);
  outline-offset: 2px;
  border-radius: 3px;
}

/* ---------- 尊重「减少动态效果」系统偏好 ----------
   部分用户会因为前庭功能敏感而在系统里开启「减少动态效果」,
   此时所有动画与过渡都应关闭。这是无障碍的基本要求,不是可选优化。
*/
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 布局容器 ---------- */
.container {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 0 1rem 3rem;
}
.container-narrow { max-width: 48rem; }

/* ---------- 头部 ---------- */
.site-header {
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  position: sticky; top: 0; z-index: 20;
  /* 毛玻璃:让滚动时内容从下方隐约透出,层次更清楚 */
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
/* 滚动后加一点阴影,强化"悬浮"感(由 JS 加 .is-scrolled 类触发) */
.site-header.is-scrolled { box-shadow: var(--shadow); }

.header-inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding: 0.7rem 1rem; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 0.55rem; font-weight: 700; color: var(--text); }
.brand:hover { text-decoration: none; }
.brand-mark {
  display: grid; place-items: center; width: 32px; height: 32px;
  background: linear-gradient(135deg, var(--brand-500), var(--brand-700));
  color: #fff; border-radius: 9px; font-size: 1rem;
  box-shadow: 0 2px 6px rgba(37, 99, 235, 0.3);
  transition: transform var(--dur) var(--ease-out);
}
.brand:hover .brand-mark { transform: rotate(-6deg) scale(1.06); }
.brand-text { font-size: 1.08rem; letter-spacing: -0.01em; }
.brand-sub {
  display: block; font-size: 0.72rem; font-weight: 500;
  color: var(--text-subtle); letter-spacing: 0; line-height: 1.2;
}

/* ---------- 页头右侧操作区(导航开关 + 主题开关) ---------- */
.header-actions {
  display: flex; align-items: center; gap: 0.5rem; flex: none;
}

/* ---------- 主导航:可收缩面板 ----------
   渐进增强:
     无 JS  → 导航保持展开(下方 .site-nav 默认可见),用户仍能点
     有 JS  → html 上会带 .has-js,导航默认收起,由按钮控制
   这样即使脚本挂了,导航也不会变成打不开的死菜单。
*/
.site-nav {
  border-top: 1px solid var(--border);
  background: var(--header-bg);
}
.site-nav-inner {
  display: grid; gap: 0.3rem;
  grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
  padding: 0.85rem 1rem 1rem;
  /* 工具较多时限制高度并允许滚动,避免菜单铺满整个屏幕 */
  max-height: min(70vh, 32rem);
  overflow-y: auto;
}
.site-nav .nav-link {
  display: block; padding: 0.45rem 0.7rem; border-radius: var(--radius-sm);
  color: var(--text-muted); font-size: 0.93rem; font-weight: 500;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.site-nav .nav-link:hover {
  color: var(--accent); background: var(--accent-soft); text-decoration: none;
}

/* 有 JS 时默认收起 —— 这是「收缩起来」的关键规则 */
.has-js .site-nav { display: none; }
.has-js .site-nav.is-open {
  display: block;
  animation: nav-drop var(--dur) var(--ease-out);
}
@keyframes nav-drop {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ==========================================================================
   管理员公告横幅
   ==========================================================================
   默认 [hidden],没有公告时完全不占位 —— 避免布局跳动。
   内容由 scripts/lib/announce.mjs 从后端拉取后渲染。
   ========================================================================== */
.announce-bar {
  background: var(--accent-soft);
  border-bottom: 1px solid var(--accent-border);
}
.announce-item {
  display: flex; align-items: flex-start; gap: 0.6rem;
  max-width: var(--container, 1080px);
  margin: 0 auto; padding: 0.65rem 2.4rem 0.65rem 1rem;
  position: relative;
}
.announce-item.is-important {
  background: var(--warn-soft, #fffbeb);
  border-bottom: 1px solid var(--border);
}
.announce-icon { flex: none; line-height: 1.5; }
.announce-body { flex: 1; min-width: 0; }
.announce-text {
  margin: 0; font-size: 0.92rem; line-height: 1.55;
  color: var(--text); white-space: pre-wrap; word-break: break-word;
}
.announce-time {
  display: block; font-size: 0.75rem; color: var(--text-subtle); margin-top: 0.15rem;
}
.announce-close {
  position: absolute; top: 0.45rem; right: 0.6rem;
  width: 26px; height: 26px; padding: 0; line-height: 1;
  display: grid; place-items: center;
  background: transparent; border: 1px solid transparent;
  border-radius: 6px; color: var(--text-muted);
  font-size: 1.15rem; cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease);
}
.announce-close:hover {
  color: var(--text); background: var(--surface); border-color: var(--border);
}

/* 打印时不显示公告(它属于时效性提示,不该出现在打印稿上) */
@media print { .announce-bar { display: none !important; } }

/* ---------- 导航开关按钮 ---------- */.nav-toggle {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.4rem 0.7rem; cursor: pointer;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  font: inherit; font-size: 0.9rem; font-weight: 500;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.nav-toggle:hover {
  color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border);
}
.nav-toggle[aria-expanded="true"] {
  color: var(--accent); background: var(--accent-soft); border-color: var(--accent-border);
}
.nav-toggle-icon {
  width: 15px; height: 15px; flex: none;
  transition: transform var(--dur) var(--ease-out);
}
/* 展开时箭头翻转,给出明确的方向暗示 */
.nav-toggle[aria-expanded="true"] .nav-toggle-icon { transform: rotate(180deg); }

/* 无 JS 时不显示开关(因为导航本来就是展开的,按钮没意义) */
html:not(.has-js) .nav-toggle { display: none; }

/* ---------- 主题切换按钮 ---------- */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  background: transparent; border: 1px solid var(--border);
  border-radius: var(--radius-sm); color: var(--text-muted);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease),
              background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              transform var(--dur) var(--ease-out);
}
.theme-toggle:hover {
  color: var(--accent); background: var(--accent-soft);
  border-color: var(--accent-border); transform: scale(1.06);
}
.theme-toggle:active { transform: scale(0.94); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
/* 图标切换:浅色显示月亮(点了变暗),深色显示太阳 */
.theme-toggle .icon-sun { display: none; }
html[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
html[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) .theme-toggle .icon-sun { display: block; }
  html:not([data-theme]) .theme-toggle .icon-moon { display: none; }
}

/* ---------- 面包屑 ---------- */
.breadcrumbs { font-size: 0.85rem; color: var(--text-subtle); margin: 1rem 0 0.75rem; }
.breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; color: var(--border-strong); }
.breadcrumbs a { color: var(--text-subtle); }
.breadcrumbs a:hover { color: var(--accent); }

/* ---------- 页面标题区 ---------- */
.page-head { margin-bottom: 1.5rem; }
.lede { font-size: 1.05rem; color: var(--text-muted); margin: 0; }

.hero {
  position: relative;
  padding: 2.75rem 0 2rem;
  background:
    radial-gradient(ellipse 60% 90% at 15% 0%, var(--accent-soft) 0%, transparent 60%),
    radial-gradient(ellipse 50% 80% at 85% 10%, var(--brand-50) 0%, transparent 55%);
  border-bottom: 1px solid var(--border);
  margin: 0 0 1.75rem;
}
.hero h1 {
  font-size: 2.15rem;
  letter-spacing: -0.025em;
  /* 入场动画:轻微上浮,避免生硬 */
  animation: hero-rise var(--dur-slow) var(--ease-out) both;
}
.hero .lede { max-width: 46rem; font-size: 1.08rem; animation: hero-rise var(--dur-slow) var(--ease-out) 60ms both; }
.hero strong { color: var(--accent); font-weight: 700; }
.hero-actions {
  display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.4rem;
  animation: hero-rise var(--dur-slow) var(--ease-out) 120ms both;
}
@keyframes hero-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 区块 ---------- */
.section { margin-bottom: 2.5rem; }
.section > h2 {
  padding-bottom: 0.55rem; border-bottom: 2px solid var(--border);
}

/* ---------- 工具卡片网格 ---------- */
.tool-category { margin-bottom: 2rem; }
.category-title {
  font-size: 1.08rem; color: var(--text-subtle); font-weight: 600;
  text-transform: none; margin-bottom: 0.85rem;
  display: flex; align-items: center; gap: 0.5rem;
}
/* 分类标题前的小色条,让分组一眼可辨 */
.category-title::before {
  content: ""; width: 3px; height: 1em; border-radius: 2px;
  background: var(--accent); flex: none;
}
.tool-grid, .related-grid, .feature-grid {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.tool-card, .related-card {
  position: relative;
  display: block; padding: 1.2rem 1.3rem;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease);
  color: inherit;
  overflow: hidden;
}
.tool-card:hover, .related-card:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  text-decoration: none;
}
.tool-card h3, .related-card h3 { margin: 0 0 0.4rem; font-size: 1.08rem; }
.tool-card p, .related-card p { margin: 0 0 0.7rem; color: var(--text-muted); font-size: 0.94rem; }
.tool-card-more, .related-more { color: var(--accent); font-size: 0.9rem; font-weight: 600; }

/* ---------- 特性网格 ---------- */
.feature {
  padding: 1rem 1.15rem; background: var(--surface-2);
  border-radius: var(--radius); border: 1px solid var(--border);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.feature h3 { margin: 0 0 0.35rem; font-size: 1rem; }
.feature p { margin: 0; font-size: 0.92rem; color: var(--text-muted); }

/* ---------- 工具交互区 ---------- */
.tool-widget, .tool-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1.25rem; box-shadow: var(--shadow-sm);
  transition: background-color var(--dur) var(--ease),
              border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

/* 工具内的行布局与字段 */
.tool-row { display: flex; gap: 0.9rem; flex-wrap: wrap; align-items: flex-end; margin-bottom: 0.9rem; }
.tool-row-stack { align-items: stretch; }
.field { display: flex; flex-direction: column; gap: 0.3rem; min-width: 9rem; flex: 1 1 9rem; }
.field-wide { flex: 1 1 100%; }
.field-label { font-size: 0.86rem; font-weight: 600; color: var(--text-muted); }
.field-hint { font-size: 0.8rem; color: var(--text-subtle); margin: 0.35rem 0 0.9rem; }
.tool-actions { display: flex; gap: 0.55rem; flex-wrap: wrap; align-items: center; }
.tool-subhead {
  font-size: 1rem; margin: 1.6rem 0 0.7rem; padding-top: 0.9rem;
  border-top: 1px solid var(--border); color: var(--text);
}
.tool-footnote {
  font-size: 0.82rem; color: var(--text-subtle); line-height: 1.7;
  margin: 1.2rem 0 0; padding-top: 0.85rem; border-top: 1px solid var(--border);
}
.tool-details { margin-top: 1rem; font-size: 0.88rem; color: var(--text-muted); }
.tool-details summary { cursor: pointer; font-weight: 600; color: var(--accent); }

/* 工具内的输入控件(工具组件用 id 直接引用,这里统一外观) */
.tool-card input[type="text"],
.tool-card input[type="number"],
.tool-card input[type="date"],
.tool-card select,
.tool-card textarea {
  font: inherit; font-size: 0.94rem; width: 100%;
  padding: 0.5rem 0.65rem; color: var(--text);
  background: var(--bg); border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease),
              box-shadow var(--dur-fast) var(--ease),
              background-color var(--dur) var(--ease);
}
.tool-card input:focus, .tool-card select:focus, .tool-card textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.tool-card textarea { resize: vertical; min-height: 5rem; font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.65; }
.tool-card input::placeholder, .tool-card textarea::placeholder { color: var(--text-subtle); }

/* 结果区 */
.tool-result {
  margin-top: 1.1rem; padding: 1rem 1.1rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.result-placeholder { color: var(--text-subtle); margin: 0; font-size: 0.92rem; }
.result-main { font-size: 1.05rem; font-weight: 600; color: var(--text); margin: 0 0 0.4rem; }
.result-main strong { color: var(--accent); font-size: 1.28em; }
.result-main-warn, .result-warn { color: var(--red-600); font-weight: 600; }
.result-sub { color: var(--text-muted); font-size: 0.93rem; margin: 0 0 0.6rem; }
.result-subhead { font-size: 0.95rem; margin: 1.1rem 0 0.6rem; color: var(--text); }
.result-note { font-size: 0.83rem; color: var(--text-subtle); line-height: 1.7; margin: 0.7rem 0 0; }
.result-value { font-weight: 700; }

/* 统计数字网格 */
.stat-grid {
  display: grid; gap: 0.6rem; margin: 0.8rem 0;
  grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr));
}
.stat {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.6rem 0.75rem;
  display: flex; flex-direction: column; gap: 0.15rem;
}
.stat-k { font-size: 0.76rem; color: var(--text-subtle); }
.stat-v { font-size: 1.12rem; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }

/* 进度条(字数上限、排名位置等复用) */
.progress-bar {
  height: 7px; background: var(--border); border-radius: 999px;
  overflow: hidden; margin: 0.5rem 0 0.75rem;
}
.progress-bar > span {
  display: block; height: 100%; background: var(--accent);
  border-radius: 999px; transition: width var(--dur-slow) var(--ease-out);
}

/* 数据表格 */
.data-table {
  width: 100%; border-collapse: collapse; font-size: 0.9rem;
  margin: 0.6rem 0; background: var(--surface);
}
.data-table th, .data-table td {
  padding: 0.45rem 0.6rem; text-align: left;
  border-bottom: 1px solid var(--border);
}
.data-table thead th { background: var(--surface-2); font-weight: 600; color: var(--text-muted); }
.data-table code { font-family: var(--font-mono); font-size: 0.88em; color: var(--accent); }

/* 算法/类型切换选项卡 */
.algo-tabs {
  display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.25rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0.85rem;
}
.algo-tab {
  font: inherit; font-size: 0.92rem; cursor: pointer;
  padding: 0.45rem 0.9rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.algo-tab:hover { border-color: var(--accent-border); color: var(--accent); }
.algo-tab.is-active {
  background: var(--accent); border-color: var(--accent);
  color: #fff; font-weight: 600;
}

/* 课程表格 */
.table-wrap { overflow-x: auto; margin-bottom: 1rem; }
.course-table { width: 100%; border-collapse: collapse; min-width: 34rem; }
.course-table th, .course-table td {
  text-align: left; padding: 0.5rem 0.5rem; vertical-align: middle;
}
.course-table thead th {
  font-size: 0.85rem; color: var(--text-subtle); font-weight: 600;
  border-bottom: 1px solid var(--border); padding-bottom: 0.6rem;
}
.course-table tbody tr + tr td { border-top: 1px solid var(--border); }
.cell-action { width: 5rem; text-align: right; }

/* 表单控件(旧类名保留兼容) */
.input {
  font: inherit; font-size: 0.95rem; width: 100%;
  padding: 0.5rem 0.65rem; border: 1px solid var(--border-strong);
  border-radius: var(--radius-sm); background: var(--bg); color: var(--text);
}
.input::placeholder { color: var(--text-subtle); }
.input:focus { border-color: var(--accent); }

/* 按钮 */
.btn {
  font: inherit; font-size: 0.95rem; cursor: pointer; display: inline-flex;
  align-items: center; justify-content: center; gap: 0.35rem;
  padding: 0.55rem 1.1rem; border-radius: var(--radius-sm);
  border: 1px solid transparent; font-weight: 500;
  transition: background-color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-fast) var(--ease);
}
.btn:active { transform: translateY(1px) scale(0.99); }
.btn-primary {
  background: var(--accent); color: #fff; font-weight: 600;
  box-shadow: 0 1px 3px rgba(37, 99, 235, 0.28);
}
.btn-primary:hover { background: var(--accent-hover); box-shadow: 0 3px 10px rgba(37, 99, 235, 0.32); }
.btn-secondary {
  background: var(--surface); border-color: var(--border-strong); color: var(--text-muted);
}
.btn-secondary:hover { border-color: var(--text-subtle); background: var(--surface-hover); }
.btn-ghost {
  background: transparent; border-color: transparent; color: var(--slate-500);
  padding: 0.35rem 0.55rem; font-size: 0.88rem;
}
.btn-ghost {
  background: transparent; color: var(--text-subtle);
  border-color: var(--border);
}
.btn-ghost:hover {
  color: var(--red-600); background: var(--red-50);
  border-color: transparent; border-radius: var(--radius-sm);
}
.btn-small { padding: 0.3rem 0.65rem; font-size: 0.82rem; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; }

.widget-actions { display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; margin-top: 0.5rem; }

/* ---------- 结果面板 ---------- */
.result-panel {
  margin-top: 1.25rem; padding: 1.15rem 1.25rem;
  background: var(--accent-soft); border: 1px solid var(--accent-border);
  border-radius: var(--radius);
}
.result-title { margin: 0 0 0.85rem; font-size: 1rem; color: var(--text); }
.result-grid {
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  margin-bottom: 0.85rem;
}
.result-item {
  background: var(--surface); border-radius: var(--radius-sm); padding: 0.7rem 0.85rem;
  border: 1px solid var(--border);
}
.result-item-main { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.result-label { display: block; font-size: 0.8rem; color: var(--text-subtle); }
.result-value {
  display: block; font-size: 1.5rem; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1.3;
  font-weight: 700;
}
.result-item-main .result-value { font-size: 1.75rem; }
.result-formula {
  margin: 0 0 0.5rem; font-size: 0.85rem; color: var(--text-muted);
  background: var(--surface); padding: 0.5rem 0.7rem; border-radius: var(--radius-sm);
  border-left: 3px solid var(--accent);
}
.result-hint { margin: 0 0 0.85rem; font-size: 0.88rem; color: var(--text-muted); }
.copy-feedback { font-size: 0.88rem; color: var(--green-700); font-weight: 600; }

/* 参考文献输出 */
.ref-output {
  font-family: var(--font-mono); font-size: 0.92rem; line-height: 1.7;
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border: 1px solid var(--accent-border); border-radius: var(--radius-sm);
  padding: 0.85rem 1rem; margin: 0 0 0.75rem; color: var(--text);
}

/* 表单字段 */
.field-grid { display: grid; gap: 0.9rem; grid-template-columns: repeat(2, 1fr); }
/* 注意:.field 的基础定义在「工具交互区」一节,这里只补充 grid 场景下的跨度 */
.field-grid .field { grid-column: 1 / -1; }
.field-half { grid-column: span 1; }
.field label { font-size: 0.88rem; font-weight: 600; color: var(--text-muted); }
.field .req { color: var(--red-600); }
.field-hint { font-size: 0.78rem; color: var(--text-subtle); }
.ref-panel { display: none; }
.ref-panel.is-active { display: block; }
.option-row { margin-top: 1rem; }
.checkbox-label {
  display: inline-flex; align-items: center; gap: 0.45rem;
  font-size: 0.9rem; color: var(--text-muted); cursor: pointer;
}

/* 隐私提示条 */
.privacy-badge {
  margin: 1.1rem 0 0; padding: 0.6rem 0.85rem; font-size: 0.86rem;
  background: var(--green-50); border: 1px solid var(--green-600);
  border-radius: var(--radius-sm); color: var(--green-700);
  opacity: 0.95;
}

/* ---------- 使用说明 ---------- */
.guide-block { margin-bottom: 1.6rem; }
.guide-block h3 { color: var(--text); }
.guide-block ul, .article-body ul, .article-body ol,
.guide-block ol { padding-left: 1.4rem; margin: 0 0 1rem; }
.guide-block li, .article-body li { margin-bottom: 0.45rem; }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 0.6rem; }
.faq-item {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              background-color var(--dur) var(--ease);
}
.faq-item[open] { border-color: var(--accent-border); box-shadow: var(--shadow-sm); }
.faq-item summary {
  cursor: pointer; padding: 0.85rem 1rem; list-style: none;
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: var(--surface-2);
  transition: background-color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::before {
  content: "?"; flex: 0 0 auto; display: grid; place-items: center;
  width: 1.35rem; height: 1.35rem; border-radius: 50%;
  background: var(--accent); color: #fff; font-size: 0.8rem; font-weight: 700;
  margin-top: 0.15rem;
}
.faq-item summary h3 { margin: 0; font-size: 1rem; font-weight: 600; }
.faq-item[open] summary { background: var(--accent-soft); }
.faq-answer { padding: 0.9rem 1rem 0.9rem 3rem; animation: faq-open var(--dur) var(--ease-out); }
.faq-answer p:last-child { margin-bottom: 0; }
@keyframes faq-open {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: none; }
}

/* ---------- 内容页正文 ---------- */
.article-head { margin-bottom: 1.5rem; }
.article-meta { font-size: 0.85rem; color: var(--text-subtle); display: flex; gap: 0.5rem; flex-wrap: wrap; }
.article-body { font-size: 1.02rem; }
.article-body h2 {
  margin-top: 2.2rem; padding-top: 0.4rem;
  border-top: 1px solid var(--border);
}
.article-body h3 { color: var(--text); }

.data-table caption {
  caption-side: top; text-align: left; font-size: 0.86rem;
  color: var(--text-subtle); padding-bottom: 0.5rem;
}

/* ==========================================================================
   广告位
   ==========================================================================
   【防 CLS 的关键】
   .ad-slot 有固定的 min-height(由 ads.mjs 内联注入具体数值),
   广告加载前容器就已经占住了对应高度,广告到达后页面不会发生位移。
   如果没有这个固定高度,广告异步加载完成会把下方内容整体推下去,
   直接恶化 CLS 指标 → 影响 Google 搜索排名。
   ========================================================================== */
.ad-slot {
  display: block;
  width: 100%;
  margin: 1.25rem 0;
  background: var(--surface-2);
  border: 1px dashed var(--border-strong);
  border-radius: var(--radius-sm);
  overflow: hidden;
  /* 兜底:即使内联 min-height 没生效,也给一个最小高度 */
  min-height: 100px;
  /* 使用 contain 隔离布局影响,进一步避免 CLS */
  contain: layout;
}
/* 广告位未填充时的占位提示(仅开发期可见) */
.ad-slot:empty::after {
  content: "广告位";
  display: grid; place-items: center; height: 100%; min-height: 100px;
  color: var(--text-subtle); font-size: 0.8rem;
}

/* ==========================================================================
   付费功能占位(高级版)
   ========================================================================== */
.premium-card {
  background: linear-gradient(180deg, var(--amber-50) 0%, var(--surface) 60%);
  border: 1px solid var(--amber-200);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.premium-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 0.6rem;
}
.premium-head h2 { margin: 0; border: 0; font-size: 1.3rem; }
.premium-price {
  margin: 0; font-weight: 700; color: var(--amber-600); font-size: 1.05rem;
}
.premium-lead { color: var(--text-muted); font-size: 0.95rem; }
.premium-features {
  list-style: none; padding: 0; margin: 1rem 0 1.25rem;
  display: grid; gap: 0.75rem;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
}
.premium-features li {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.75rem 0.9rem;
}
.premium-feature-title { display: block; font-weight: 600; color: var(--text); }
.premium-feature-desc { display: block; font-size: 0.86rem; color: var(--text-subtle); margin-top: 0.2rem; }
.premium-action { display: flex; align-items: center; gap: 0.85rem; flex-wrap: wrap; }
.premium-note { margin: 0; font-size: 0.85rem; color: var(--text-subtle); }

/* ---------- 页脚 ---------- */
.site-footer {
  background: var(--footer-bg); color: var(--footer-text);
  padding: 2.5rem 0 1.5rem; margin-top: 3rem;
}
.site-footer .container { padding-bottom: 0; }
.footer-grid {
  display: grid; gap: 1.75rem;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
.footer-title { font-size: 0.95rem; color: #fff; margin: 0 0 0.6rem; }
.footer-text { font-size: 0.85rem; color: var(--footer-text); margin: 0 0 0.6rem; line-height: 1.75; }
.footer-text strong { color: #e2e8f0; }
.footer-text a { color: #93c5fd; }
.footer-text a:hover { color: #bfdbfe; }
.footer-contact { color: var(--footer-text); opacity: 0.85; }
.footer-bottom {
  margin-top: 2rem; padding-top: 1.1rem; border-top: 1px solid rgba(148, 163, 184, 0.25);
  display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap;
  font-size: 0.8rem; color: var(--footer-text);
}
.footer-bottom p { margin: 0; }

/* ==========================================================================
   响应式:窄屏适配
   ========================================================================== */
@media (max-width: 640px) {
  h1 { font-size: 1.5rem; }
  .hero h1 { font-size: 1.6rem; }
  h2 { font-size: 1.25rem; }

  /* 课程表格在手机上前两列改为堆叠,避免横向滚动 */
  .course-table { min-width: 0; }
  .course-table thead { display: none; }
  .course-table, .course-table tbody, .course-table tr, .course-table td {
    display: block; width: 100%;
  }
  .course-table tr {
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    padding: 0.6rem; margin-bottom: 0.6rem;
  }
  .course-table tbody tr + tr td { border-top: 0; }
  .course-table td { padding: 0.25rem 0; }
  .cell-action { text-align: left; }

  .field-grid { grid-template-columns: 1fr; }
  .field-half { grid-column: 1 / -1; }

  .result-value { font-size: 1.3rem; }
  .result-item-main .result-value { font-size: 1.5rem; }

  .faq-answer { padding-left: 1rem; }
  .site-nav { gap: 0.15rem; font-size: 0.9rem; }
  .nav-link { padding: 0.3rem 0.5rem; font-size: 0.88rem; }
  .stat-grid { grid-template-columns: repeat(auto-fit, minmax(6.5rem, 1fr)); }
  .timer-clock { font-size: 3.5rem; }
  .brand-sub { display: none; }
}

/* ==========================================================================
   专注计时器
   ========================================================================== */
.timer-display {
  text-align: center; padding: 1.75rem 1rem;
  background:
    radial-gradient(ellipse 70% 100% at 50% 0%, var(--accent-soft) 0%, transparent 70%),
    var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-lg);
  margin: 1rem 0 1.5rem;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.timer-phase {
  font-size: 0.9rem; font-weight: 600; letter-spacing: 0.08em;
  color: var(--text-subtle); text-transform: uppercase;
  transition: color var(--dur) var(--ease);
}
.timer-phase.is-focus { color: var(--accent); }
.timer-phase.is-break { color: var(--green-600); }
.timer-clock {
  font-family: var(--font-mono);
  font-size: 4.5rem; font-weight: 700; line-height: 1.1;
  color: var(--text); letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  margin: 0.3rem 0 0.8rem;
  /* 数字变化时不做位移动画,避免视觉跳动 */
  transition: color var(--dur) var(--ease);
}
.timer-progress {
  height: 8px; background: var(--border); border-radius: 999px;
  overflow: hidden; max-width: 28rem; margin: 0 auto 0.8rem;
}
.timer-progress > span {
  display: block; height: 100%; width: 0;
  background: linear-gradient(90deg, var(--brand-500), var(--accent));
  border-radius: 999px;
  transition: width 400ms linear;
}
.timer-rounds { font-size: 0.85rem; color: var(--text-subtle); }
.timer-rounds strong { color: var(--accent); font-size: 1.05rem; }

/* 全屏模式 */
.timer-fullscreen {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: var(--bg);
  padding: 2rem;
  animation: fs-in var(--dur-slow) var(--ease-out);
}
@keyframes fs-in {
  from { opacity: 0; transform: scale(0.985); }
  to { opacity: 1; transform: none; }
}
.timer-fullscreen .timer-clock { font-size: clamp(5rem, 22vw, 16rem); margin: 0.5rem 0 1.5rem; }
.timer-fullscreen .timer-phase { font-size: 1.1rem; }
.timer-fullscreen .timer-progress { max-width: min(40rem, 80vw); height: 10px; }
.timer-fullscreen .timer-rounds { font-size: 1rem; margin-top: 1rem; }
.fs-exit {
  position: fixed; top: 1.25rem; right: 1.25rem;
  z-index: 10000;
}
.fs-hint {
  position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%);
  font-size: 0.8rem; color: var(--text-subtle);
  opacity: 0; animation: fs-hint-in var(--dur-slow) var(--ease-out) 1.2s forwards;
  pointer-events: none;
}
@keyframes fs-hint-in { to { opacity: 1; } }
/* 全屏时隐藏页面其余部分,避免误操作 */
body.timer-fs-active { overflow: hidden; }

.plan-list { list-style: none; padding: 0; margin: 0.75rem 0 0; }
.plan-list li {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.45rem 0; border-bottom: 1px dashed var(--border);
  font-size: 0.9rem;
}
.plan-list li:last-child { border-bottom: 0; }
.plan-block {
  font-weight: 600; padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.82rem;
}
.plan-focus { background: var(--accent-soft); color: var(--accent); }
.plan-break { background: var(--green-50); color: var(--green-700); }
.plan-flex { background: var(--amber-50); color: var(--amber-600); }
.plan-time { color: var(--text-subtle); font-size: 0.84rem; }
.plan-tip {
  color: var(--text-subtle); font-size: 0.82rem; font-style: italic;
  justify-content: center; border-bottom: 0 !important;
  padding: 0.3rem 0 !important;
}

/* ==========================================================================
   AI 导航
   ========================================================================== */
.ai-group { margin-bottom: 2rem; }
.ai-group-title {
  font-size: 1.05rem; margin: 0 0 0.3rem; color: var(--text);
  display: flex; align-items: center; gap: 0.5rem;
}
.ai-group-title::before {
  content: ""; width: 3px; height: 1em; border-radius: 2px;
  background: var(--accent); flex: none;
}
.ai-group-desc { font-size: 0.88rem; color: var(--text-subtle); margin: 0 0 0.85rem; }
.ai-grid {
  display: grid; gap: 0.85rem;
  grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
}
.ai-card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 1rem 1.1rem;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease-out);
}
.ai-card:hover { border-color: var(--accent-border); box-shadow: var(--shadow-md); transform: translateY(-2px); }
.ai-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.6rem; }
.ai-name { font-weight: 700; font-size: 1.02rem; color: var(--text); }
.ai-name:hover { color: var(--accent); }
.ai-access {
  font-size: 0.72rem; font-weight: 600; padding: 0.15rem 0.5rem;
  border-radius: 999px; white-space: nowrap; flex: none;
}
.ai-access-ok { background: var(--green-50); color: var(--green-700); }
.ai-access-mid { background: var(--amber-50); color: var(--amber-600); }
.ai-access-warn { background: var(--red-50); color: var(--red-600); }
.ai-card p { font-size: 0.86rem; margin: 0 0 0.4rem; color: var(--text-muted); line-height: 1.65; }
.ai-card p strong { color: var(--text-subtle); font-weight: 600; }
.ai-free { padding-bottom: 0.4rem; border-bottom: 1px dashed var(--border); }
.ai-bad { color: var(--text-subtle) !important; }
.ai-note {
  background: var(--accent-soft); border-radius: var(--radius-sm);
  padding: 0.45rem 0.6rem; color: var(--text-muted) !important;
  font-size: 0.83rem !important;
}
.ai-visit {
  margin-top: auto; padding-top: 0.7rem;
  font-size: 0.86rem; font-weight: 600; color: var(--accent);
}
.scenario-list { display: grid; gap: 0.75rem; margin-bottom: 1.5rem; }
.scenario {
  background: var(--surface-2); border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 0.85rem 1rem;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.scenario-task { font-weight: 700; margin: 0 0 0.3rem; color: var(--text); font-size: 0.98rem; }
.scenario-pick { margin: 0 0 0.25rem; font-size: 0.9rem; color: var(--accent); }
.scenario-why { margin: 0; font-size: 0.85rem; color: var(--text-subtle); line-height: 1.7; }

/* ==========================================================================
   句式速查 / 术语表
   ========================================================================== */
.phrase-group { margin-bottom: 1.4rem; }
.phrase-group-title {
  font-size: 0.98rem; margin: 0 0 0.5rem; color: var(--text);
}
.phrase-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.4rem; }
.phrase-list li {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.55rem 0.75rem; background: var(--surface-2);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: background-color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.phrase-list li:hover { border-color: var(--accent-border); }
.phrase-en { font-family: var(--font-mono); font-size: 0.88rem; color: var(--accent); }
.phrase-cn { font-size: 0.86rem; color: var(--text-muted); }
.glossary-grid {
  display: grid; gap: 0.5rem;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
}
.glossary-item {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 0.6rem; padding: 0.5rem 0.7rem;
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.g-en { font-family: var(--font-mono); font-size: 0.84rem; color: var(--accent); }
.g-cn { font-size: 0.84rem; color: var(--text-muted); }

/* ==========================================================================
   检查结果列表(论文格式自查)
   ========================================================================== */
.check-group { margin-bottom: 1.1rem; }
.check-title {
  font-size: 0.95rem; margin: 0 0 0.25rem; color: var(--red-600);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.check-count {
  font-size: 0.75rem; font-weight: 600; background: var(--red-50);
  color: var(--red-600); padding: 0.1rem 0.5rem; border-radius: 999px;
}
.check-desc { font-size: 0.83rem; color: var(--text-subtle); margin: 0 0 0.45rem; }
.check-list { margin: 0; padding-left: 1.2rem; font-size: 0.86rem; color: var(--text-muted); }
.check-list li { margin-bottom: 0.3rem; }
.check-list code {
  font-family: var(--font-mono); font-size: 0.85em;
  background: var(--surface); border: 1px solid var(--border);
  padding: 0.05rem 0.35rem; border-radius: 4px; color: var(--red-600);
}

/* ==========================================================================
   考试倒计时 / 校园导航 / 学校卡片(通用卡片式列表)
   ========================================================================== */
.exam-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; }
.exam-item {
  display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap;
  padding: 0.65rem 0.9rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  transition: border-color var(--dur-fast) var(--ease), background-color var(--dur) var(--ease);
}
.exam-item:hover { border-color: var(--accent-border); }
.exam-item-empty { color: var(--text-subtle); font-size: 0.88rem; justify-content: center; }
.exam-name { font-weight: 600; flex: 1 1 8rem; color: var(--text); }
.exam-date { color: var(--text-subtle); font-size: 0.86rem; }
.exam-countdown {
  font-weight: 700; color: var(--accent); font-size: 0.9rem;
  font-variant-numeric: tabular-nums;
}
.exam-countdown.is-urgent { color: var(--red-600); }
.exam-countdown.is-past { color: var(--text-subtle); font-weight: 500; }
.exam-note { font-size: 0.8rem; color: var(--text-subtle); }
.empty-state {
  padding: 1.25rem; background: var(--surface-2);
  border: 1px dashed var(--border-strong); border-radius: var(--radius);
  font-size: 0.9rem; color: var(--text-muted); text-align: center;
}
.empty-state p { margin: 0 0 0.5rem; }
.empty-state p:last-child { margin-bottom: 0; }
.empty-hint { font-size: 0.85rem; color: var(--text-subtle); }
.term-progress { margin-bottom: 1rem; }
.term-line { margin: 0 0 0.35rem; font-size: 0.94rem; color: var(--text-muted); }
.term-line strong { color: var(--text); }
.term-note { font-size: 0.84rem; color: var(--text-subtle); line-height: 1.7; margin: 0.5rem 0 0; }
.cd-custom-wrap { margin-top: 0.6rem; }

.nav-grid {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
}
.nav-card {
  display: flex; flex-direction: column; gap: 0.15rem;
  padding: 0.8rem 0.95rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  color: inherit;
  transition: border-color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              transform var(--dur) var(--ease-out),
              background-color var(--dur) var(--ease);
}
.nav-card:hover {
  border-color: var(--accent-border); box-shadow: var(--shadow);
  transform: translateY(-2px); text-decoration: none;
}
.nav-name { font-weight: 600; font-size: 0.95rem; color: var(--text); }
.nav-note { font-size: 0.82rem; color: var(--text-subtle); }
.nav-card-sm { padding: 0.6rem 0.9rem; }

.notice-box {
  background: var(--amber-50); border: 1px solid var(--amber-200);
  border-radius: var(--radius); padding: 1rem 1.15rem;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.notice-title { font-weight: 700; margin: 0 0 0.5rem; color: var(--amber-600); }
.notice-list { margin: 0; padding-left: 1.2rem; font-size: 0.88rem; color: var(--text-muted); }
.notice-list li { margin-bottom: 0.4rem; line-height: 1.75; }

/* ==========================================================================
   课程表
   ========================================================================== */
.import-tabs, .view-tabs {
  display: flex; gap: 0.4rem; flex-wrap: wrap; margin-bottom: 1rem;
  border-bottom: 1px solid var(--border); padding-bottom: 0.75rem;
}
.view-tabs { margin-top: 0.5rem; }
.import-tab, .view-tab {
  font: inherit; font-size: 0.9rem; cursor: pointer;
  padding: 0.4rem 0.85rem; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2);
  color: var(--text-muted);
  transition: all var(--dur-fast) var(--ease);
}
.import-tab:hover, .view-tab:hover { border-color: var(--accent-border); color: var(--accent); }
.import-tab.is-active, .view-tab.is-active {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600;
}
.import-panel { animation: panel-in var(--dur) var(--ease-out); }
@keyframes panel-in {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

.course-form {
  display: grid; gap: 0.7rem;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  margin-bottom: 1rem;
}

.week-nav { display: inline-flex; align-items: center; gap: 0.5rem; float: right; font-weight: 400; }
.week-label {
  font-size: 0.92rem; font-weight: 700; color: var(--accent);
  min-width: 4.5rem; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 课表网格 */
.schedule-grid {
  width: 100%; border-collapse: separate; border-spacing: 0;
  min-width: 44rem; table-layout: fixed;
}
.schedule-grid th, .schedule-grid td {
  border: 1px solid var(--border); padding: 0.3rem;
  font-size: 0.78rem; vertical-align: top; text-align: center;
}
.schedule-grid .sg-corner { width: 3.2rem; background: var(--surface-2); }
.schedule-grid .sg-day {
  background: var(--surface-2); font-weight: 600; color: var(--text-muted);
  padding: 0.45rem 0.2rem; font-size: 0.82rem;
}
.schedule-grid .sg-weekend { color: var(--red-600); }
.schedule-grid .sg-period {
  background: var(--surface-2); font-weight: 600; color: var(--text-subtle);
  width: 3.2rem; vertical-align: middle; font-size: 0.82rem;
}
.schedule-grid .sg-empty { background: var(--surface); }
.schedule-grid .sg-empty[data-weekend] { background: var(--surface-2); opacity: 0.5; }

/* 课程块:颜色由内联 --c 变量驱动 */
.schedule-grid .sg-course {
  background: color-mix(in srgb, var(--c) 12%, var(--surface));
  border-left: 3px solid var(--c);
  text-align: left; vertical-align: top;
  padding: 0.4rem 0.45rem;
  transition: background-color var(--dur-fast) var(--ease);
}
/* color-mix 在旧浏览器不支持时的兜底 */
@supports not (background: color-mix(in srgb, red 10%, white)) {
  .schedule-grid .sg-course { background: var(--surface-2); }
}
.sg-name { display: block; font-weight: 700; color: var(--c); font-size: 0.8rem; line-height: 1.35; }
.sg-room, .sg-teacher, .sg-weeks {
  display: block; color: var(--text-subtle); font-size: 0.7rem; line-height: 1.4; margin-top: 0.1rem;
}
.schedule-grid .sg-course:hover { background: color-mix(in srgb, var(--c) 20%, var(--surface)); }

/* 列表视图 */
.sl-day { margin-bottom: 1.1rem; }
.sl-day h4 {
  font-size: 0.92rem; margin: 0 0 0.5rem; color: var(--text);
  padding-bottom: 0.3rem; border-bottom: 1px solid var(--border);
}
.sl-item {
  display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap;
  padding: 0.5rem 0.7rem; margin-bottom: 0.4rem;
  background: var(--surface-2); border-left: 3px solid var(--c);
  border-radius: var(--radius-sm); font-size: 0.85rem;
}
.sl-time { font-weight: 700; color: var(--c); flex: none; font-size: 0.8rem; }
.sl-name { font-weight: 600; color: var(--text); }
.sl-meta { color: var(--text-subtle); font-size: 0.8rem; }

/* 打印课表时只留表格 */
@media print {
  .import-tabs, .import-panel, .view-tabs, .week-nav,
  #sc-courses, #sc-msg, .tool-footnote { display: none !important; }
}

/* ==========================================================================
   Bug 反馈
   ========================================================================== */
.feedback-intro {
  font-size: 0.95rem; color: var(--text-muted);
  padding: 0.85rem 1rem; margin: 0 0 1.1rem;
  background: var(--accent-soft); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); line-height: 1.75;
}
.feedback-intro strong { color: var(--accent); }
.shot-list {
  display: grid; gap: 0.6rem; margin-top: 0.7rem;
  grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr));
}
.shot-item {
  position: relative; border: 1px solid var(--border);
  border-radius: var(--radius-sm); overflow: hidden;
  background: var(--surface-2); padding: 0.4rem;
  display: flex; flex-direction: column; gap: 0.3rem;
}
.shot-item img {
  width: 100%; height: 6rem; object-fit: cover;
  border-radius: 4px; background: var(--border);
}
.shot-meta {
  font-size: 0.72rem; color: var(--text-subtle);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.feedback-copy {
  width: 100%; font-family: var(--font-mono); font-size: 0.82rem;
  line-height: 1.6; margin: 0.6rem 0; padding: 0.7rem 0.85rem;
  background: var(--bg); color: var(--text);
  border: 1px solid var(--border-strong); border-radius: var(--radius-sm);
  resize: vertical;
}

/* ==========================================================================
   「我的反馈」:用户查看自己提交的反馈与管理员回复
   ========================================================================== */
.my-feedback {
  margin-top: 1.5rem; padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}
.mine-card {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.7rem 0.85rem; margin-bottom: 0.6rem;
}
.mine-head {
  display: flex; align-items: center; gap: 0.5rem;
  flex-wrap: wrap; margin-bottom: 0.35rem;
}
.mine-badge {
  display: inline-block; padding: 0.1rem 0.5rem; border-radius: 99px;
  font-size: 0.75rem; font-weight: 600;
}
.mine-badge.wait { background: var(--warn-soft, #fffbeb); color: var(--warn, #d97706); }
.mine-badge.done { background: var(--ok-soft, #f0fdf4); color: var(--ok, #16a34a); }
.mine-badge.has-reply { background: var(--accent-soft); color: var(--accent); }
.mine-time { font-size: 0.78rem; color: var(--text-subtle); }
.mine-msg {
  margin: 0.3rem 0 0; font-size: 0.9rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word; color: var(--text-muted);
}
.mine-offline { margin: 0.35rem 0 0; font-size: 0.8rem; color: var(--text-subtle); }
.mine-replies { margin-top: 0.5rem; }
.mine-reply {
  border-left: 3px solid var(--accent); background: var(--accent-soft);
  border-radius: 0 6px 6px 0; padding: 0.45rem 0.7rem; margin-bottom: 0.4rem;
}
.mine-reply-time { font-size: 0.75rem; color: var(--text-subtle); margin-bottom: 0.15rem; }
.mine-reply-text {
  font-size: 0.9rem; line-height: 1.6;
  white-space: pre-wrap; word-break: break-word;
}

/* 「有新回复」提示:自动刷新拿到新回复时短暂出现,
   否则用户不知道有变化 —— 静默更新等于没更新 */
.mine-new-badge {
  display: inline-block; margin-left: 0.5rem; padding: 0.1rem 0.5rem;
  border-radius: 99px; font-size: 0.72rem; font-weight: 600;
  background: var(--accent); color: #fff; vertical-align: middle;
  animation: badge-pop var(--dur) var(--ease-out);
}
@keyframes badge-pop {
  from { opacity: 0; transform: scale(0.8); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mine-new-badge { animation: none; }
}

/* ==========================================================================
   论文工具页的「红线警告」区块
   ==========================================================================
   用醒目的红色边框 + 浅红底,与普通卡片明确区分。
   这不是装饰:它承载的是「哪些事会被撤销学位」这类必须被看到的信息。
   ========================================================================== */
.redline-box {
  border: 2px solid var(--danger, #dc2626);
  border-radius: var(--radius);
  background: var(--danger-soft, #fef2f2);
  padding: 1rem 1.1rem 1.1rem;
}
.redline-title {
  margin: 0 0 0.6rem; font-size: 1.08rem;
  color: var(--danger, #dc2626); font-weight: 700;
}
.redline-lead {
  margin: 0 0 0.9rem; font-size: 0.92rem; line-height: 1.7;
  color: var(--text);
}
.redline-cols {
  display: grid; gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.redline-sub {
  margin: 0 0 0.4rem; font-size: 0.92rem; font-weight: 700; color: var(--text);
}
.redline-list {
  margin: 0; padding-left: 1.15rem; font-size: 0.88rem; line-height: 1.75;
  color: var(--text-muted);
}
.redline-list li { margin-bottom: 0.2rem; }
.redline-list strong { color: var(--text); }
.redline-foot {
  margin: 0.9rem 0 0; padding-top: 0.8rem;
  border-top: 1px solid var(--danger-border, rgba(220, 38, 38, 0.25));
  font-size: 0.9rem; line-height: 1.7; color: var(--text);
}

/* 打印时保留警告区(学生可能想打印出来看),但去掉背景色省墨 */
@media print {
  .redline-box { background: none; }
}

/* ==========================================================================
   印刷出版工具:印张计算 结果网格
   ========================================================================== */
.paper-grid {
  display: grid; gap: 0.6rem;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  margin: 0.6rem 0;
}
.paper-cell {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 0.6rem 0.7rem;
}
.paper-cell-label { font-size: 0.78rem; color: var(--text-subtle); margin-bottom: 0.15rem; }
.paper-cell-value {
  font-size: 1.12rem; font-weight: 700; color: var(--accent);
  font-variant-numeric: tabular-nums; line-height: 1.3;
}
.paper-cell-sub { font-size: 0.74rem; color: var(--text-subtle); margin-top: 0.15rem; }

/* ==========================================================================
   ISBN / 色彩转换:键值表格
   ========================================================================== */
.isbn-table {
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  overflow: hidden; margin: 0.5rem 0;
}
.isbn-row {
  display: grid; gap: 0.5rem; padding: 0.45rem 0.7rem;
  grid-template-columns: 8.5rem 1fr;
  border-bottom: 1px solid var(--border);
  font-size: 0.88rem;
}
.isbn-row:last-child { border-bottom: none; }
.isbn-row:nth-child(odd) { background: var(--surface-2); }
.isbn-row-label { color: var(--text-subtle); font-size: 0.85rem; }
.isbn-row-value {
  font-family: var(--font-mono); color: var(--text); word-break: break-all;
  font-variant-numeric: tabular-nums;
}
.isbn-row-note { grid-column: 2; font-size: 0.76rem; color: var(--text-subtle); }
@media (min-width: 560px) {
  .isbn-row { grid-template-columns: 8.5rem 1fr auto; align-items: baseline; }
  .isbn-row-note { grid-column: 3; text-align: right; }
}

/* ==========================================================================
   色彩转换:预览块、用色提示、色板
   ========================================================================== */
.color-preview {
  height: 84px; border-radius: var(--radius-sm); margin: 0.3rem 0 0.7rem;
  display: grid; place-items: center; border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 1.05rem; font-weight: 700;
  letter-spacing: 0.06em;
}
.color-tips {
  background: var(--warn-soft, #fffbeb); border: 1px solid var(--border);
  border-left: 3px solid var(--warn, #d97706);
  border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; margin: 0.7rem 0;
}
.color-tips-title {
  margin: 0 0 0.3rem; font-size: 0.85rem; font-weight: 700; color: var(--warn, #d97706);
}
.color-tips ul { margin: 0; padding-left: 1.15rem; font-size: 0.86rem; line-height: 1.65; }
.color-tips li { margin-bottom: 0.25rem; color: var(--text-muted); }

.swatch-row { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.5rem 0 1rem; }
.swatch {
  display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
  padding: 0.3rem 0.35rem 0.35rem; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  cursor: pointer; transition: border-color var(--dur-fast) var(--ease),
                              transform var(--dur) var(--ease-out);
}
.swatch:hover { border-color: var(--accent); transform: translateY(-2px); }
.swatch-chip {
  width: 34px; height: 34px; border-radius: 6px;
  border: 1px solid rgba(0, 0, 0, 0.14);
}
.swatch-label { font-size: 0.7rem; color: var(--text-subtle); white-space: nowrap; }

/* 课表格式示例(展示北印教务系统的原始结构,帮助用户确认该复制哪些内容) */.format-sample {
  font-family: var(--font-mono); font-size: 0.8rem; line-height: 1.7;
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm); padding: 0.7rem 0.9rem;
  margin: 0.6rem 0; overflow-x: auto; white-space: pre;
}

/* ==========================================================================
   首页「我的课表」区块
   ==========================================================================
   这块内容由 JS 从 localStorage 渲染,所以初始状态是隐藏的
   (未保存课表时不显示,避免出现空白区块)。
   ========================================================================== */
.home-schedule { margin-bottom: 2rem; }
.home-schedule > h2 {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap;
}
.home-sched-tools {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-weight: 400; flex-wrap: wrap;
}
.home-schedule-empty { margin-bottom: 2rem; }
/* 首页课表在窄屏下允许横向滚动,而不是压缩到看不清 */
.home-schedule .table-wrap { overflow-x: auto; }

/* 打印时首页课表也保留(学生可能想打印自己的课表) */
@media print {
  .home-schedule { display: block !important; }
  .home-sched-tools { display: none !important; }
}

/* ---------- 打印样式:方便学生把结果打印出来 ---------- */
@media print {
  .site-header, .site-footer, .ad-slot, .premium-card,
  .widget-actions, .site-nav, .breadcrumbs, .theme-toggle,
  .fs-exit, .fs-hint { display: none !important; }
  body { font-size: 12pt; background: #fff; color: #000; }
  .result-panel, .tool-result { border: 1px solid #000; background: #fff; }
  .tool-card, .tool-widget { border: 1px solid #999; box-shadow: none; }
}