/**
 * 收藏夹页 · 样式（doc/15，紫色 elearn）
 * 左侧目录树 + 右侧列表；句子搜索页也复用本文件的表格/分页/按钮样式。
 */
.fav-wrap {
  --fav-accent: #7c3aed;
  --fav-accent-soft: #f3e8ff;
  --fav-border: var(--border, #e5e7eb);
  --fav-muted: var(--text-3, #64748b);
  --fav-text: var(--text, #1e293b);
  display: flex; gap: 18px; align-items: flex-start;
  max-width: 1200px; margin: 0 auto; width: 100%;
}

/* 未登录守卫 */
.fav-guard {
  flex: 1; text-align: center; padding: 64px 20px; color: var(--fav-muted);
}
.fav-guard i { font-size: 40px; color: #cbd5e1; }
.fav-guard p { margin: 14px 0 18px; }

/* ---------------------------------------------------------- 侧边栏 */
.fav-side { width: 260px; flex-shrink: 0; display: flex; flex-direction: column; gap: 14px; }
.fav-group { background: var(--surface); border: 1px solid var(--fav-border); border-radius: 14px; padding: 8px; }
.fav-group__head { display: flex; align-items: center; gap: 4px; }
.fav-group__title {
  flex: 1; display: flex; align-items: center; gap: 8px; border: none; background: transparent;
  cursor: pointer; padding: 8px 10px; border-radius: 8px; font-weight: 700; font-size: 15px; color: var(--fav-text);
}
.fav-group__title > i:first-child { color: #f59e0b; }
.fav-group__caret { margin-left: auto; font-size: 12px; color: var(--fav-muted); transition: transform .2s; }
.fav-group.is-collapsed .fav-group__caret { transform: rotate(-90deg); }
.fav-group.is-collapsed .fav-dirs { display: none; }
.fav-group__add {
  width: 32px; height: 32px; flex-shrink: 0; border: none; background: transparent; cursor: pointer;
  color: var(--fav-muted); border-radius: 8px;
}
.fav-group__add:hover { background: var(--fav-accent-soft); color: var(--fav-accent); }

.fav-dirs { list-style: none; margin: 4px 0 0; padding: 0; }
.fav-dir {
  display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px;
  cursor: pointer; color: var(--fav-text); font-size: 14px;
}
.fav-dir:hover { background: #f8fafc; }
.fav-dir.is-active { background: var(--fav-accent); color: #fff; }
.fav-dir.is-active .fav-dir__count { color: #f3e8ff; }
.fav-dir.is-active .fav-dir__edit { color: #f3e8ff; }
.fav-dir__ico { color: #f59e0b; }
.fav-dir.is-active .fav-dir__ico { color: #fde68a; }
.fav-dir__name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav-dir__count { font-size: 12px; color: var(--fav-muted); }
.fav-dir__edit { border: none; background: transparent; cursor: pointer; color: var(--fav-muted); padding: 2px 4px; border-radius: 6px; }
.fav-dir__edit:hover { color: var(--fav-accent); }

/* ---------------------------------------------------------- 主区 */
.fav-main { flex: 1; min-width: 0; background: var(--surface); border: 1px solid var(--fav-border); border-radius: 14px; padding: 18px 20px; }
.fav-main__title { margin: 0 0 16px; font-size: 20px; font-weight: 700; color: var(--fav-text); }

.fav-table { width: 100%; border-collapse: collapse; }
.fav-table th {
  text-align: left; font-size: 13px; color: var(--fav-muted); font-weight: 600;
  padding: 12px 10px; border-bottom: 1px solid var(--fav-border);
}
.fav-table td { padding: 14px 10px; border-bottom: 1px solid #f1f5f9; font-size: 14px; color: var(--fav-text); vertical-align: middle; }
.fav-td-passage { color: var(--fav-accent); font-weight: 600; max-width: 220px; }
.fav-td-sentence { line-height: 1.6; }
.fav-td-op { white-space: nowrap; text-align: right; }
.fav-td-word { font-size: 16px; font-weight: 700; }

/* 音标列 */
.fav-phon { display: flex; flex-direction: column; gap: 4px; }
.fav-phon__row { display: flex; align-items: center; gap: 6px; color: var(--fav-muted); font-size: 13px; }
.fav-phon__tag { font-size: 11px; font-weight: 700; color: var(--fav-accent); background: var(--fav-accent-soft); border-radius: 4px; padding: 1px 5px; }
.fav-phon__ipa { font-family: "Times New Roman", "Segoe UI", serif; }
.fav-spk { border: none; background: transparent; cursor: pointer; color: #3b82f6; padding: 2px; }
.fav-spk:hover { color: #2563eb; }

/* 操作按钮 */
.fav-btn {
  display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--fav-border); background: var(--surface);
  color: #334155; border-radius: 8px; padding: 7px 12px; font-size: 13px; cursor: pointer; transition: all .15s;
}
.fav-btn:hover { border-color: var(--fav-accent); color: var(--fav-accent); }
.fav-btn--primary { background: #f97316; border-color: #f97316; color: #fff; }
.fav-btn--primary:hover { background: #ea580c; border-color: #ea580c; color: #fff; }
.fav-op { display: inline-flex; gap: 8px; }
.fav-op .fav-btn { background: #f97316; border-color: #f97316; color: #fff; }
.fav-op .fav-btn:hover { background: #ea580c; border-color: #ea580c; }
.fav-op .fav-btn--ghost { background: var(--surface); border-color: var(--fav-border); color: #64748b; }
.fav-op .fav-btn--ghost:hover { border-color: #f43f5e; color: #e11d48; background: rgba(225, 29, 72, .12); }

/* 空态 / 分页 */
.fav-empty { text-align: center; color: var(--fav-muted); padding: 48px 10px; }
.fav-pager { display: flex; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 16px; color: var(--fav-muted); font-size: 13px; }
.fav-pager__btn { border: 1px solid var(--fav-border); background: var(--surface); border-radius: 6px; width: 30px; height: 30px; cursor: pointer; color: #475569; }
.fav-pager__btn:disabled { opacity: .4; cursor: not-allowed; }
.fav-pager__cur { min-width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #f97316; color: #f97316; border-radius: 6px; }

/* 目录操作浮层 */
.fav-dirmenu {
  position: fixed; z-index: 1100; background: var(--surface); border: 1px solid var(--fav-border);
  border-radius: 10px; box-shadow: 0 14px 40px rgba(15, 23, 42, .18); padding: 6px; min-width: 130px;
}
.fav-dirmenu[hidden] { display: none; }
.fav-dirmenu button {
  width: 100%; display: flex; align-items: center; gap: 8px; border: none; background: transparent;
  padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 14px; color: var(--fav-text); text-align: left;
}
.fav-dirmenu button:hover { background: #f8fafc; }
.fav-dirmenu button[data-act="delete"] { color: #e11d48; }

/* 命名弹窗 */
.fav-modal-overlay { position: fixed; inset: 0; z-index: 1150; background: rgba(15, 23, 42, .45); display: flex; align-items: center; justify-content: center; padding: 16px; }
.fav-modal-overlay[hidden] { display: none; }
.fav-modal { width: min(400px, 100%); background: var(--surface); border-radius: 14px; padding: 20px; box-shadow: 0 24px 60px rgba(15, 23, 42, .28); }
.fav-modal__title { margin: 0 0 14px; font-size: 17px; font-weight: 700; }
.fav-modal__input { width: 100%; box-sizing: border-box; border: 1px solid var(--fav-border); border-radius: 9px; padding: 10px 12px; font-size: 14px; outline: none; }
.fav-modal__input:focus { border-color: var(--fav-accent); box-shadow: 0 0 0 3px rgba(168, 85, 247, .15); }
.fav-modal__btns { display: flex; justify-content: flex-end; gap: 10px; margin-top: 16px; }

/* ---------------------------------------------------------- 句子搜索页（复用上面表格/分页/按钮） */
.ss-wrap { max-width: 1000px; margin: 0 auto; width: 100%; }
.ss-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  background: var(--surface); border: 1px solid var(--fav-border, #e5e7eb); border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.ss-search {
  flex: 1; min-width: 220px; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--fav-border, #e5e7eb); border-radius: 10px; padding: 9px 12px; color: #94a3b8;
}
.ss-search:focus-within { border-color: #7c3aed; box-shadow: 0 0 0 3px rgba(168, 85, 247, .15); }
.ss-search input { flex: 1; border: none; outline: none; font-size: 15px; color: var(--text, #1e293b); background: transparent; }
.ss-check { display: inline-flex; align-items: center; gap: 6px; color: #475569; font-size: 14px; cursor: pointer; white-space: nowrap; }
.ss-eye.is-on { border-color: #7c3aed; color: #7c3aed; }

.ss-main { background: var(--surface); border: 1px solid var(--fav-border, #e5e7eb); border-radius: 14px; padding: 18px 20px; }
.ss-passage { color: #7c3aed; font-weight: 600; text-decoration: none; }
.ss-passage:hover { text-decoration: underline; }
.ss-passage i { font-size: 11px; }
.ss-eye-row { border: none; background: transparent; cursor: pointer; color: #94a3b8; padding: 2px 4px; }
.ss-eye-row:hover { color: #7c3aed; }
.ss-sent-preview { color: #475569; }
.ss-mark { background: #fde68a; color: #92400e; border-radius: 3px; padding: 0 2px; font-weight: 700; }

/* 让句子搜索页也有卡片背景（表格/分页放在同一张卡里） */
.ss-wrap .fav-table-wrap { background: var(--surface); border: 1px solid var(--fav-border, #e5e7eb); border-radius: 14px; padding: 8px 16px; }
.ss-wrap .fav-pager { padding: 0 4px; }

/* ---------------------------------------------------------- 响应式 */
@media (max-width: 820px) {
  .fav-wrap { flex-direction: column; }
  .fav-side { width: 100%; flex-direction: row; flex-wrap: wrap; }
  .fav-group { flex: 1; min-width: 240px; }
  .fav-td-passage { max-width: 120px; }
  .fav-op { flex-direction: column; gap: 6px; }
  .ss-bar { gap: 8px; }
}

html[data-theme="dark"] .fav-wrap {
  --fav-accent: #a78bfa;
  --fav-accent-soft: rgba(124, 58, 237, .22);
}
html[data-theme="dark"] .fav-dir:hover,
html[data-theme="dark"] .fav-dirmenu button:hover { background: var(--surface-2); }
html[data-theme="dark"] .fav-modal__input {
  background: var(--surface-2);
  color: var(--text);
  border-color: var(--border);
}
html[data-theme="dark"] .ss-check,
html[data-theme="dark"] .ss-sent-preview { color: var(--text-2); }
html[data-theme="dark"] .ss-mark { background: rgba(251, 191, 36, .28); color: #fde68a; }