/* OOEG 学习工具页 ·「墨笺书房」共享样式（与 index.html 同一调色板） */
:root {
  --bg: #FCFBF7; --bg2: #F1F0EA; --sidebar: #FCFBF7;
  --sb-line: rgba(31,39,51,.055);
  --text: #1F2733; --text2: #5A6472; --text3: #8B93A0;
  --input-bg: #FFFFFF; --input-border: #DDD9CC;
  --btn: #33539E; --btn-hover: #2A4480; --btn-text: #FDFCFA;
  --accent: #33539E; --accent-light: #E9EDF8;
  --cinnabar: #B03A2E; --cinnabar-light: #F6EBE9;
  --border: rgba(31,39,51,.10); --border-hover: rgba(31,39,51,.18);
  --card: #FFFFFF; --line: #DDD9CC;            /* 实体面板/描边（cf-box 确认弹层用） */
  --shadow: 0 1px 4px rgba(31,39,51,.05); --shadow-lg: 0 6px 24px rgba(31,39,51,.10);
  --shadow-sm: 0 1px 2px rgba(31,39,51,.08);
  --org: #A05E0B; --org-light: #F7EFDF;          /* 主题橙（corpus 重点卡/收藏徽标） */
  --jade: #2E7D5B; --jade-light: #EAF3EE;        /* 答案绿 */
  --scrollbar: #D3CFC4; --scrollbar-hover: #B5B0A2;
  --serif: Georgia, 'Times New Roman', 'Noto Serif SC', 'Source Han Serif SC', SimSun, serif;
}
.dark {
  --bg: #151A22; --bg2: #1C222C; --sidebar: #151A22;
  --sb-line: rgba(233,230,220,.07);
  --text: #E9E6DC; --text2: #A8ACB8; --text3: #7C828E;
  --input-bg: #1C222C; --input-border: #333C4C;
  --btn: #7C9BE8; --btn-hover: #9AB2EE; --btn-text: #151A22;
  --accent: #7C9BE8; --accent-light: rgba(124,155,232,.14);
  --cinnabar: #E0705F; --cinnabar-light: rgba(224,112,95,.12);
  --border: rgba(233,230,220,.08); --border-hover: rgba(233,230,220,.16);
  --card: #1C222C; --line: #333C4C;
  --shadow: 0 1px 4px rgba(0,0,0,.25); --shadow-lg: 0 6px 24px rgba(0,0,0,.4);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --org: #D99A45; --org-light: rgba(217,154,69,.14);
  --jade: #6FBF9B; --jade-light: rgba(111,191,155,.12);
  --scrollbar: rgba(233,230,220,.15); --scrollbar-hover: rgba(233,230,220,.28);
}
.dark .tag { color: #A3BBEF; }
.dark .meta-line { color: var(--text3); }
.dark .card .ipa, .dark .dict-ipa { color: var(--text3); }
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, 'Segoe UI', 'Microsoft YaHei', sans-serif;
  font-size: 14px; background: var(--bg); color: var(--text);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--accent); text-decoration: none; }
::selection { background: rgba(51,83,158,.18); }
.dark ::selection { background: rgba(124,155,232,.30); }

/* 顶栏 */
.tool-top {
  display: flex; align-items: center; gap: 10px;
  border-bottom: 1px solid var(--sb-line); flex-shrink: 0;
}
.tool-title { font-family: var(--serif); font-weight: 600; letter-spacing: .5px; }
.tool-sub { font-size: 11.5px; color: var(--text3); }
.tool-nav { margin-left: auto; display: flex; gap: 4px; flex-wrap: wrap; }
.tool-link {
  padding: 5px 12px; border-radius: 8px; font-size: 12.5px; color: var(--text2);
  border: 1px solid transparent; cursor: pointer; background: none;
}
.tool-link:hover { background: var(--bg2); color: var(--text); }
/* 全局导航弱化为文字指示（页面内 tab 才是主角，避免双导航竞争） */
.tool-link.active { color: var(--accent); font-weight: 600; background: none; }
.tool-back { padding: 5px 12px; border-radius: 8px; font-size: 12.5px; color: var(--text2);
  border: 1px solid var(--border); background: var(--bg); cursor: pointer; }
.tool-back:hover { color: var(--accent); border-color: var(--accent); }

/* 主体 */
.tool-main { flex: 1; overflow-y: auto; padding: 20px 24px 40px; }
.tool-inner { max-width: 860px; margin: 0 auto; }
.toolbar-row { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; align-items: center; }
.tool-input {
  flex: 1; min-width: 200px; padding: 8px 14px; border-radius: 10px;
  border: 1.5px solid var(--input-border); background: var(--input-bg); color: var(--text); font-size: 13px;
}
.tool-input:focus { outline: none; border-color: var(--accent); }
.btn {
  padding: 8px 18px; border-radius: 10px; border: none; cursor: pointer;
  background: var(--btn); color: var(--btn-text); font-size: 13px; font-weight: 500;
}
.btn:hover { background: var(--btn-hover); }
.btn.ghost { background: none; color: var(--text2); border: 1.5px solid var(--border); font-weight: 400; }
.btn.ghost:hover { color: var(--accent); border-color: var(--accent); }
.btn.danger { background: none; color: var(--cinnabar); border: 1.5px solid var(--cinnabar); font-weight: 400; }

/* 卡片 */
.card {
  border: 1px solid var(--border); border-radius: 12px; background: var(--bg);
  padding: 14px 16px; margin-bottom: 10px; box-shadow: var(--shadow);
}
.card .row1 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.card .en { font-family: var(--serif); font-size: 16px; font-weight: 600; }
.card .ipa { font-size: 11.5px; color: var(--text3); font-family: 'Segoe UI', Tahoma, var(--serif); }
.card .zh { font-size: 13px; color: var(--text2); margin-top: 4px; }
.card .ctx { font-size: 12px; color: var(--text3); margin-top: 6px; font-family: var(--serif);
  border-left: 2px solid var(--sb-line); padding-left: 8px; overflow-wrap: anywhere; }
.card .ops { margin-left: auto; display: flex; gap: 6px; }
.tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; background: var(--accent-light); color: var(--accent); }
.tag.cn { background: var(--cinnabar-light); color: var(--cinnabar); }
.empty { text-align: center; color: var(--text3); font-size: 13px; padding: 48px 0; }
.pager { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }

.spin { color: var(--text3); font-size: 13px; padding: 12px 0; }
.spin::after { content: '…'; animation: dots 1s steps(4) infinite; }
@keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

/* 划选浮条（阅读类页面共用） */
.sel-pop {
  position: fixed; z-index: 60; display: none; gap: 4px; padding: 5px 7px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
.sel-pop button {
  border: none; background: none; color: var(--accent); font-size: 12px;
  padding: 4px 8px; border-radius: 8px; cursor: pointer; white-space: nowrap;
}
.sel-pop button:hover { background: var(--accent-light); }
.sel-pop button.cn { color: var(--cinnabar); }
.sel-pop button.cn:hover { background: var(--cinnabar-light); }

/* 深色切换钮（右上角小图标） */
.theme-mini {
  width: 32px; height: 32px; border-radius: 8px; border: none; cursor: pointer;
  background: none; color: var(--text2); font-size: 15px;
}
.theme-mini:hover { background: var(--bg2); }

/* 卡片删除钮：悬停才显示，降低视觉权重 */
.card .btn.danger { opacity: .35; transition: opacity .15s; }
.card:hover .btn.danger { opacity: 1; }

/* 卡片元信息行（时间/来源）——与上下文例句区分 */
.meta-line { font-size: 11px; color: var(--text3); margin-top: 6px; opacity: .8; }

/* ── 共享组件（common.js 配套） ── */
/* Toast */
.ooeg-toast {
  display: flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 10px;
  background: var(--accent-light); color: var(--accent); font-size: 13px; font-weight: 500;
  border: 1px solid rgba(51,83,158,.25); box-shadow: var(--shadow-lg);
  animation: toastIn .25s ease; max-width: 340px;
}
.ooeg-toast.err { background: var(--cinnabar-light); color: var(--cinnabar); border-color: rgba(176,58,46,.25); }
.ooeg-toast, .cf-box { box-shadow: var(--shadow-lg); }
.ooeg-toast.out { opacity: 0; transform: translateY(-6px); transition: all .3s; }
@keyframes toastIn { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

/* 自定义文件选择 */
.file-pick { display: inline-flex; align-items: center; gap: 10px; }
.file-pick .fp-name { font-size: 12px; color: var(--text3); max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-pick .fp-name.has { color: var(--text2); }

/* select 统一 */
select.tool-input {
  appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238B93A0' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 10px center;
}

/* 按钮禁用态 */
.btn:disabled, .btn.ghost:disabled { opacity: .4; cursor: not-allowed; pointer-events: none; }

/* 空状态（与语料库 .empty-card 同款：图标浅底圆角块） */
.empty-box { text-align: center; padding: 34px 24px; color: var(--text3);
  border: 1px dashed var(--border-hover); border-radius: 16px; background: var(--bg); }
.empty-box .eb-ico { display: flex; align-items: center; justify-content: center;
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 16px;
  background: var(--bg2); color: var(--accent); }
.empty-box .eb-main { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 5px; }
.empty-box .eb-sub { font-size: 12.5px; line-height: 1.8; }

/* 滚动条（与主应用同款） */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-hover); }

/* 呼吸点加载态 */
.spin { color: var(--text3); font-size: 13px; padding: 14px 0; display: flex; align-items: center; gap: 8px; }
.spin::before {
  content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
  animation: breathe 1s ease-in-out infinite;
}
@keyframes breathe { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }

/* ══════════ 2026-09 视觉升级层（五页共享） ══════════ */
/* 页头：朱砂方点标记（呼应主应用 logo 的印章感） */
.tool-title { font-size: 16px; display: inline-flex; align-items: center; }
.tool-title::before {
  content: ''; width: 8px; height: 8px; border-radius: 2.5px; background: var(--cinnabar);
  margin-right: 10px; transform: rotate(45deg); box-shadow: 0 1px 2px rgba(176,58,46,.3);
}
.tool-top { padding: 12px 20px; background: var(--bg); }

/* 卡片：悬浮提升＋入场动画（stagger 由 common.js stagger() 设 --i） */
.card {
  transition: border-color .18s, box-shadow .18s, transform .18s;
  animation: cardIn .35s cubic-bezier(.2,.7,.3,1) backwards;
  animation-delay: calc(var(--i, 0) * 35ms);
}
.card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-lg); transform: translateY(-1px); }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* 骨架屏 */
.skel {
  border-radius: 12px; margin-bottom: 10px;
  background: linear-gradient(100deg, var(--bg2) 40%, var(--input-bg) 50%, var(--bg2) 60%);
  background-size: 200% 100%; animation: skelMove 1s linear infinite;
}
@keyframes skelMove { to { background-position: -200% 0; } }

/* 搜索命中高亮 */
mark, .hl {
  background: rgba(201,162,39,.30); color: inherit;
  padding: 0 2px; border-radius: 4px; font-weight: 600;
}
.dark mark, .dark .hl { background: rgba(214,171,60,.26); }

/* chips（搜索历史/快捷词） */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 2px; align-items: center; }
.chip {
  padding: 4px 12px; border-radius: 999px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); background: var(--bg); color: var(--text2);
  transition: .15s; user-select: none;
}
.chip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.chip .x { margin-left: 5px; opacity: .5; }
.chip .x:hover { opacity: 1; color: var(--cinnabar); }
.chip-label { font-size: 11.5px; color: var(--text3); margin-right: 2px; }

/* 词典卡（快速查词结果） */
.dict-card {
  border: 1px solid var(--border); border-radius: 16px; background: var(--input-bg);
  padding: 18px 22px; margin-bottom: 14px; box-shadow: var(--shadow);
  animation: cardIn .35s ease backwards; position: relative; overflow: hidden;
}
.dict-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); border-radius: 3px 0 0 3px; }
.dict-word { font-family: var(--serif); font-size: 24px; font-weight: 700; letter-spacing: .3px; }
.dict-ipa { font-size: 12.5px; color: var(--text3); margin-left: 10px; font-family: 'Segoe UI', Tahoma, var(--serif); }
.dict-sec { margin-top: 10px; font-size: 13px; line-height: 1.75; }
.dict-sec b { color: var(--accent); font-weight: 600; margin-right: 6px; }
.dict-sec.ex { font-family: var(--serif); color: var(--text); }
.dict-sec.ex-tr { color: var(--text2); font-size: 12.5px; }
.dict-ops { display: flex; gap: 8px; margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--border); }

/* 按钮手感：统一过渡节拍与按压反馈 */
.btn { transition: background .15s, transform .1s, box-shadow .15s; box-shadow: var(--shadow-sm); }
.btn:active, button:not(:disabled):active, .chip:active { transform: scale(.97); }
.tool-link, .tool-back, .theme-mini { transition: color .15s, background .15s, border-color .15s; }
.tool-link:active, .tool-back:active { transform: scale(.97); }
.btn.ghost { box-shadow: none; }
.btn:focus-visible, .tool-input:focus-visible, .chip:focus-visible, .tool-link:focus-visible, .tool-back:focus-visible, .theme-mini:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

/* 统计行（生词本等） */
.stat-row { display: flex; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.stat {
  flex: 1; min-width: 110px; border: 1px solid var(--border); border-radius: 12px;
  padding: 10px 14px; background: var(--bg);
}
.stat .s-num { font-family: var(--serif); font-size: 20px; font-weight: 700; color: var(--accent); }
.stat .s-label { font-size: 11.5px; color: var(--text3); margin-top: 2px; }

/* 分组标题（笔记本日期分组） */
.group-h {
  display: flex; align-items: center; gap: 8px; margin: 18px 0 10px;
  font-size: 12.5px; color: var(--text3); letter-spacing: 1px;
}
.group-h::after { content: ''; flex: 1; height: 1px; background: var(--sb-line); }
.group-h .g-cnt { font-size: 11px; background: var(--bg2); border-radius: 8px; padding: 1px 8px; }

/* ── 手机层（≤760px）：标题行换行、主区贴边、触控加大 ── */
@media (max-width:760px) {
  .tool-top { flex-wrap: wrap; padding: 10px 14px 6px; gap: 6px 10px; }
  .tool-sub { display: none; }
  .tool-nav { margin-left: 0; width: 100%; }
  .tool-back { margin-left: auto; }
  .tool-main { padding: 12px 14px 90px; }
  .tool-inner { max-width: none; }
  .toolbar-row { gap: 6px; }
  .tool-input { font-size: 15px; }
  .card { padding: 12px 14px; }
  .card .ops { margin-left: 0; width: 100%; justify-content: flex-end; }
}

/* 动效弱化（与主应用同款） */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* 确认弹层（confirmBox） */
.cf-veil { position: fixed; inset: 0; background: rgba(15,19,26,.38); z-index: 220;
  display: flex; align-items: center; justify-content: center; }
.cf-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 24px; width: 340px; max-width: 88vw; }
.cf-msg { font-size: 14px; color: var(--text); line-height: 1.7; }
.cf-ops { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }