/* ============================================================
   design-refresh.css — 清荷 · 薄荷浅色精修层
   目标：对选品系统主界面做彻底视觉整改。
   设计概念「清荷」：清爽浅色、薄荷绿主色、圆角卡片、柔和层叠阴影、
   舒展排印与克制的微动效，规避 AI 同质化审美。
   策略：作为最后一层样式(加载于既有精修层之后)，
   通过更高特异性 + 末尾加载稳赢旧规则，不改动任何业务结构。
   覆盖范围：主站 public/index.html 全部视图 + 登录页 login.html。
   ============================================================ */

/* ============ 0. 设计令牌 ============ */
:root {
  --dr-mint: #6ec6a0;
  --dr-mint-bright: #8fd8b8;
  --dr-mint-soft: #e7f5ee;
  --dr-mint-softer: #f2faf6;
  --dr-mint-deep: #2b9c77;        /* 白字/正文可用的深薄荷(AA) */
  --dr-teal-ink: #0f6a58;
  --dr-ink: #1c2b26;
  --dr-text: #25342f;
  --dr-muted: #5c6b65;
  --dr-faint: #84908b;
  --dr-line: #dfe9e3;
  --dr-line-soft: #edf3ef;
  --dr-bg: #f3f7f4;
  --dr-bg-soft: #eaf3ee;
  --dr-card: #ffffff;
  --dr-glow: rgba(110, 198, 160, 0.22);
  --dr-shadow-sm: 0 1px 2px rgba(28, 43, 38, 0.04), 0 2px 6px rgba(28, 43, 38, 0.05);
  --dr-shadow: 0 8px 24px rgba(28, 43, 38, 0.07), 0 2px 6px rgba(28, 43, 38, 0.04);
  --dr-shadow-lg: 0 20px 48px rgba(28, 43, 38, 0.12), 0 6px 16px rgba(28, 43, 38, 0.06);
  --dr-focus: 0 0 0 4px rgba(110, 198, 160, 0.28);
  --dr-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
}

/* 深色模式：绿调深空，保持清爽、非纯黑 */
html[data-theme="dark"]:root {
  --dr-mint: #7fd4ae;
  --dr-mint-bright: #9fe6c5;
  --dr-mint-soft: rgba(127, 212, 174, 0.16);
  --dr-mint-softer: rgba(127, 212, 174, 0.08);
  --dr-mint-deep: #7fd4ae;
  --dr-teal-ink: #8febc6;
  --dr-ink: #e6f0eb;
  --dr-text: #d6e2dc;
  --dr-muted: #96a69f;
  --dr-faint: #7c8a84;
  --dr-line: #26332e;
  --dr-line-soft: #212c27;
  --dr-bg: #0f1614;
  --dr-bg-soft: #131d19;
  --dr-card: #17211d;
  --dr-glow: rgba(127, 212, 174, 0.18);
  --dr-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --dr-shadow: 0 8px 24px rgba(0, 0, 0, 0.34);
  --dr-shadow-lg: 0 20px 48px rgba(0, 0, 0, 0.42);
  --dr-focus: 0 0 0 4px rgba(127, 212, 174, 0.28);
}

/* ---------- 全局底色 & 字体平滑 ---------- */
html body {
  background-color: var(--dr-bg) !important;
  background-image: var(--dr-grain) !important;
  background-attachment: fixed !important;
  color: var(--dr-text) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
html[data-theme="dark"] body {
  background-color: var(--dr-bg) !important;
}

/* ============ 1. 顶部栏：浅色磨砂 + 薄荷强调 ============ */
html body .topbar {
  color: var(--dr-ink) !important;
  background: rgba(255, 255, 255, 0.86) !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px);
  backdrop-filter: saturate(1.4) blur(14px);
  border-bottom: 1px solid var(--dr-line) !important;
  box-shadow: 0 1px 0 rgba(28, 43, 38, 0.02), 0 6px 18px rgba(28, 43, 38, 0.05) !important;
}
html[data-theme="dark"] body .topbar {
  color: var(--dr-ink) !important;
  background: rgba(23, 33, 29, 0.9) !important;
  border-bottom: 1px solid var(--dr-line) !important;
}
html body .topbar::after {
  height: 2px !important;
  background: linear-gradient(90deg, var(--dr-mint), var(--dr-mint-bright) 45%, transparent) !important;
  opacity: 1 !important;
}

html body .brand-mark {
  width: 38px !important;
  height: 38px !important;
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.4), transparent 55%),
    linear-gradient(135deg, var(--dr-mint) 0%, var(--dr-mint-deep) 100%) !important;
  border: 1px solid rgba(28, 43, 38, 0.06) !important;
  border-radius: 11px !important;
  box-shadow: 0 6px 16px var(--dr-glow), inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  color: #fff !important;
  font-weight: 900 !important;
}
html body .brand-word {
  color: var(--dr-mint-deep) !important;
}
html[data-theme="dark"] body .brand-word {
  color: var(--dr-mint) !important;
}

/* 状态区各控件：浅色描边胶囊 */
html body .connection-status,
html body .theme-toggle,
html body .notification-button,
html body .avatar-button {
  color: var(--dr-muted) !important;
  background: var(--dr-card) !important;
  border: 1px solid var(--dr-line) !important;
  box-shadow: var(--dr-shadow-sm) !important;
}
html body .connection-status {
  color: var(--dr-mint-deep) !important;
  background: var(--dr-mint-soft) !important;
  border-color: rgba(43, 156, 119, 0.32) !important;
}
html body .theme-toggle:hover,
html body .notification-button:hover,
html body .avatar-button:hover {
  color: var(--dr-mint-deep) !important;
  border-color: rgba(43, 156, 119, 0.45) !important;
  background: var(--dr-mint-softer) !important;
  box-shadow: var(--dr-shadow-sm) !important;
}
html body .notification-badge {
  background: var(--dr-mint-deep) !important;
  color: #fff !important;
  box-shadow: 0 2px 6px var(--dr-glow) !important;
}

/* ============ 2. 主导航：浅色胶囊 ============ */
html body .primary-nav {
  background: var(--dr-card) !important;
  border-bottom: 1px solid var(--dr-line) !important;
  box-shadow: var(--dr-shadow-sm) !important;
}
html body .nav-link {
  color: var(--dr-muted) !important;
  border-radius: 999px 999px 0 0 !important;
}
html body .nav-link:hover {
  color: var(--dr-mint-deep) !important;
  background: var(--dr-mint-soft) !important;
}
html body .nav-link.active,
html body .nav-link[aria-expanded="true"] {
  color: var(--dr-mint-deep) !important;
  background: transparent !important;
}
html body .nav-link.active::after {
  background: linear-gradient(90deg, var(--dr-mint), var(--dr-mint-deep)) !important;
  border-radius: 999px 999px 0 0 !important;
}

/* 下拉菜单 */
html body .nav-dropdown {
  background: var(--dr-card) !important;
  border: 1px solid var(--dr-line) !important;
  border-radius: 14px !important;
  box-shadow: var(--dr-shadow) !important;
}
html body .nav-dropdown button:hover {
  color: var(--dr-mint-deep) !important;
  background: var(--dr-mint-soft) !important;
}

/* ============ 3. 左侧数据导航：浅色清爽 ============ */
html body .knowledge-data-sidebar.selection-workflow {
  background:
    linear-gradient(180deg, var(--dr-card) 0%, var(--dr-mint-softer) 130%) !important;
  border-right: 1px solid var(--dr-line) !important;
  box-shadow: 6px 0 24px rgba(28, 43, 38, 0.04) !important;
}
html[data-theme="dark"] body .knowledge-data-sidebar.selection-workflow {
  background: linear-gradient(180deg, #15201b 0%, #121a16 140%) !important;
  border-right: 1px solid var(--dr-line) !important;
}
html body .knowledge-sidebar-brand {
  border-bottom: 1px solid var(--dr-line) !important;
}
html body .knowledge-sidebar-mark {
  background: linear-gradient(135deg, var(--dr-mint) 0%, var(--dr-mint-deep) 100%) !important;
  box-shadow: 0 4px 12px var(--dr-glow) !important;
  color: #fff !important;
}
html body .knowledge-sidebar-name strong {
  color: var(--dr-ink) !important;
}
html body .knowledge-sidebar-name span {
  color: var(--dr-faint) !important;
}
html body .knowledge-sidebar-caption,
html body .knowledge-nav-group h2 {
  color: var(--dr-faint) !important;
}
html body .knowledge-group-toggle {
  color: var(--dr-muted) !important;
  background: var(--dr-line-soft) !important;
}
html body .knowledge-group-toggle:hover {
  background: var(--dr-mint-soft) !important;
  color: var(--dr-mint-deep) !important;
}
html body .knowledge-nav-link {
  color: var(--dr-muted) !important;
}
html body .knowledge-nav-link:hover {
  background: var(--dr-mint-soft) !important;
  color: var(--dr-teal-ink) !important;
}
html body .knowledge-nav-icon {
  color: var(--dr-faint) !important;
}
html body .knowledge-nav-link.is-active {
  background: linear-gradient(90deg, var(--dr-mint) 0%, var(--dr-mint-deep) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px var(--dr-glow) !important;
}
html body .knowledge-nav-link.is-active .knowledge-nav-icon,
html body .knowledge-nav-link:hover .knowledge-nav-icon {
  color: inherit !important;
}
html body .knowledge-nav-link:hover .knowledge-nav-icon {
  color: var(--dr-mint-deep) !important;
}
html body .product-development-nav-entry {
  border: 1px solid rgba(43, 156, 119, 0.28) !important;
  background: var(--dr-mint-soft) !important;
  color: var(--dr-teal-ink) !important;
}
html body .product-development-nav-entry .knowledge-nav-icon {
  color: var(--dr-mint-deep) !important;
}
html body .selection-workflow-toggle {
  color: #fff !important;
  background: linear-gradient(135deg, var(--dr-mint), var(--dr-mint-deep)) !important;
  box-shadow: 0 6px 16px var(--dr-glow) !important;
}

/* ============ 4. 搜索面板与控件 ============ */
html body .panel.search-panel {
  background: var(--dr-card) !important;
  border: 1px solid var(--dr-line) !important;
  border-radius: 18px !important;
  box-shadow: var(--dr-shadow) !important;
}
html body .panel.search-panel:hover {
  box-shadow: var(--dr-shadow-lg) !important;
}
html body .search-copy .eyebrow {
  background: var(--dr-mint-soft) !important;
  color: var(--dr-teal-ink) !important;
}
html body .search-copy .eyebrow::before {
  background: var(--dr-mint) !important;
}
html body .search-copy h2 {
  color: var(--dr-ink) !important;
}
html body .search-copy > p:not(.eyebrow) {
  color: var(--dr-muted) !important;
}
html body .search-control {
  background: var(--dr-bg-soft) !important;
  border: 1px solid var(--dr-line) !important;
  border-radius: 16px !important;
}
html body .search-control textarea {
  background: var(--dr-card) !important;
  color: var(--dr-text) !important;
  border-radius: 12px !important;
}
html body .search-control textarea:focus {
  border-color: rgba(43, 156, 119, 0.5) !important;
  box-shadow: var(--dr-focus) !important;
}
html body .search-control textarea::placeholder {
  color: var(--dr-faint) !important;
  opacity: 1 !important;
}

html body .search-submit-btn,
html body .search-submit-btn[type="submit"] {
  background: linear-gradient(135deg, var(--dr-mint) 0%, var(--dr-mint-deep) 100%) !important;
  color: #fff !important;
  box-shadow: 0 5px 14px var(--dr-glow) !important;
}
html body .search-submit-btn:hover {
  box-shadow: 0 8px 20px var(--dr-glow) !important;
}
html body .search-history-button {
  background: var(--dr-card) !important;
  border-color: var(--dr-line) !important;
  color: var(--dr-muted) !important;
}
html body .menglar-mode-button,
html body .filter-collapse-button {
  background: var(--dr-card) !important;
  border-color: var(--dr-line) !important;
  color: var(--dr-muted) !important;
}
html body .search-history-button:hover,
html body .menglar-mode-button:hover,
html body .filter-collapse-button:hover {
  border-color: var(--dr-mint-deep) !important;
  color: var(--dr-mint-deep) !important;
  background: var(--dr-mint-softer) !important;
}
html body .menglar-mode-button[aria-pressed="true"] {
  background: var(--dr-mint-soft) !important;
  border-color: rgba(43, 156, 119, 0.4) !important;
  color: var(--dr-teal-ink) !important;
}

html body .search-status {
  background: var(--dr-bg-soft) !important;
  border: 1px solid var(--dr-line) !important;
  border-radius: 14px !important;
}

/* ============ 5. 筛选面板 & 统计卡 ============ */
html body .filter-suite {
  background: var(--dr-card) !important;
  border: 1px solid var(--dr-line) !important;
  border-radius: 16px !important;
  box-shadow: var(--dr-shadow-sm) !important;
}
html body .filter-suite-head h3 {
  color: var(--dr-ink) !important;
}
html body .filter-stats article {
  background: var(--dr-mint-softer) !important;
  border: 1px solid var(--dr-line) !important;
  border-radius: 12px !important;
}
html body .filter-stats article strong {
  color: var(--dr-mint-deep) !important;
}

/* ============ 6. 通用面板 / 卡片 / 表格 ============ */
html body .panel {
  background: var(--dr-card) !important;
  border-color: var(--dr-line) !important;
}

/* 表格容器与表格本体 */
html body .table-wrap {
  scrollbar-color: var(--dr-mint-bright) transparent;
}
html body .table-wrap table {
  border-color: var(--dr-line) !important;
}
html body .table-wrap th {
  color: var(--dr-ink) !important;
  background: linear-gradient(180deg, var(--dr-mint-softer), var(--dr-bg-soft)) !important;
  border-bottom: 1px solid var(--dr-line) !important;
}
html body .table-wrap td {
  border-color: var(--dr-line-soft) !important;
}
html body .table-wrap tbody tr:hover td {
  background: var(--dr-mint-softer) !important;
}

/* 通用按钮体系 */
html body .primary-button,
html body .continue-collect-button {
  background: linear-gradient(135deg, var(--dr-mint) 0%, var(--dr-mint-deep) 100%) !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: 0 4px 12px var(--dr-glow) !important;
}
html body .primary-button:hover,
html body .continue-collect-button:hover {
  background: linear-gradient(135deg, var(--dr-mint-deep) 0%, var(--dr-teal-ink) 100%) !important;
  box-shadow: 0 6px 18px var(--dr-glow) !important;
}
html body .secondary-button,
html body .link-button {
  color: var(--dr-mint-deep) !important;
  background: var(--dr-card) !important;
  border-color: rgba(43, 156, 119, 0.4) !important;
}
html body .secondary-button:hover,
html body .link-button:hover {
  color: var(--dr-teal-ink) !important;
  border-color: var(--dr-mint-deep) !important;
  background: var(--dr-mint-softer) !important;
}
html body .text-button {
  color: var(--dr-mint-deep) !important;
}
html body .text-button:hover {
  color: var(--dr-teal-ink) !important;
}
html body .tab-button.active {
  background: linear-gradient(135deg, var(--dr-mint) 0%, var(--dr-mint-deep) 100%) !important;
  color: #fff !important;
  box-shadow: 0 4px 12px var(--dr-glow) !important;
}

/* AI 助手发送按钮 */
html body #agentSubmit,
html body #agentWorkbenchSubmit,
html body .agent-send-button {
  background: linear-gradient(135deg, var(--dr-mint) 0%, var(--dr-mint-deep) 100%) !important;
  border-color: var(--dr-mint-deep) !important;
  color: #fff !important;
}
html body #agentSubmit:hover,
html body #agentWorkbenchSubmit:hover,
html body .agent-send-button:hover {
  background: linear-gradient(135deg, var(--dr-mint-deep) 0%, var(--dr-teal-ink) 100%) !important;
  border-color: var(--dr-teal-ink) !important;
}

/* 标签 / 徽章 / 药丸 */
html body .pill,
html body [class*="badge"],
html body [class*="tag"] {
  border-radius: 999px !important;
}

/* 空状态与提示文字：统一用到位的灰色 */
html body .empty-state,
html body .empty-state p,
html body [class*="empty"],
html body [class*="placeholder"] {
  color: var(--dr-faint) !important;
}

/* 输入框 / 下拉 / 多行文本 焦点态 */
html body input:focus,
html body select:focus,
html body textarea:focus {
  border-color: rgba(43, 156, 119, 0.5) !important;
  box-shadow: var(--dr-focus) !important;
  outline: none !important;
}

/* 短滚动条 */
html body ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
html body ::-webkit-scrollbar-track {
  background: transparent;
}
html body ::-webkit-scrollbar-thumb {
  background: var(--dr-line);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: content-box;
}
html body ::-webkit-scrollbar-thumb:hover {
  background: var(--dr-mint-bright);
  background-clip: content-box;
  border: 2px solid transparent;
}

/* ============ 7. 登录页：清荷薄荷浅色 ============ */
html body.login-page {
  background:
    var(--dr-grain),
    radial-gradient(1200px 600px at 18% 12%, rgba(110, 198, 160, 0.20), transparent 60%),
    radial-gradient(900px 520px at 88% 88%, rgba(110, 198, 160, 0.14), transparent 60%),
    linear-gradient(160deg, #eaf6f0 0%, #f3f7f4 45%, #eef6f2 100%) !important;
}
html[data-theme="dark"] body.login-page {
  background:
    var(--dr-grain),
    radial-gradient(1100px 560px at 16% 10%, rgba(127, 212, 174, 0.14), transparent 60%),
    linear-gradient(160deg, #0e1512 0%, #101814 60%, #0d130f 100%) !important;
}

html body .login-shell {
  background: var(--dr-card) !important;
  border: 1px solid var(--dr-line) !important;
  border-radius: 26px !important;
  box-shadow: 0 40px 110px rgba(28, 43, 38, 0.18), 0 6px 20px rgba(28, 43, 38, 0.05) !important;
}

/* 登录左侧内容面板：薄荷渐变浅色 */
html body .login-head {
  color: var(--dr-ink) !important;
  background:
    linear-gradient(150deg, var(--dr-mint-softer) 0%, transparent 55%),
    linear-gradient(180deg, #f6fbf8 0%, #e8f4ee 100%) !important;
}
html body .login-head .brand-mark {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.5), transparent 55%),
    linear-gradient(135deg, var(--dr-mint) 0%, var(--dr-mint-deep) 100%) !important;
  box-shadow: 0 18px 38px var(--dr-glow) !important;
  color: #fff !important;
}
html body .login-head h1 {
  color: var(--dr-ink) !important;
}
html body .login-head p:not(.eyebrow) {
  color: var(--dr-muted) !important;
}
html body .login-head .eyebrow {
  color: var(--dr-teal-ink) !important;
}

html body .login-preview {
  background:
    linear-gradient(150deg, rgba(110, 198, 160, 0.14), transparent 50%),
    var(--dr-card) !important;
  border: 1px solid var(--dr-line) !important;
  box-shadow: 0 24px 55px rgba(28, 43, 38, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}
html body .preview-toolbar {
  color: var(--dr-muted) !important;
}
html body .preview-toolbar strong {
  color: var(--dr-faint) !important;
}
html body .preview-toolbar span:nth-child(1) {
  background: var(--dr-mint);
}
html body .preview-toolbar span:nth-child(2) {
  background: var(--dr-mint-bright);
}
html body .preview-toolbar span:nth-child(3) {
  background: var(--dr-mint-deep);
}
html body .preview-metric {
  background: var(--dr-bg-soft) !important;
  border-color: var(--dr-line) !important;
}
html body .preview-metric span {
  color: var(--dr-muted) !important;
}
html body .preview-metric strong {
  color: var(--dr-ink) !important;
}
html body .preview-row span {
  background: var(--dr-mint-soft) !important;
  border-color: rgba(43, 156, 119, 0.28) !important;
  color: var(--dr-teal-ink) !important;
}
html body .preview-row span:nth-child(2),
html body .preview-row span:nth-child(3) {
  color: var(--dr-mint-deep) !important;
  background: var(--dr-mint-softer) !important;
  border-color: rgba(43, 156, 119, 0.2) !important;
}
html body .preview-chart {
  background: var(--dr-bg-soft) !important;
  border-color: var(--dr-line) !important;
}
html body .preview-chart i {
  background: linear-gradient(180deg, var(--dr-mint-bright), var(--dr-mint-deep)) !important;
}
html body .preview-chart i:nth-child(2),
html body .preview-chart i:nth-child(4) {
  background: linear-gradient(180deg, var(--dr-mint), var(--dr-teal-ink)) !important;
}

/* 登录表单：浅色清爽 */
html body .login-form {
  background: linear-gradient(180deg, var(--dr-card), var(--dr-mint-softer)) !important;
}
html body .login-form label {
  color: var(--dr-ink) !important;
}
html body .login-form input {
  background: var(--dr-bg-soft) !important;
  border-color: var(--dr-line) !important;
  color: var(--dr-ink) !important;
}
html body .login-form input:focus {
  border-color: rgba(43, 156, 119, 0.5) !important;
  box-shadow: var(--dr-focus) !important;
}
html body .login-form input::placeholder {
  color: var(--dr-faint) !important;
}
html body .login-form > button[type="submit"] {
  background: linear-gradient(135deg, var(--dr-mint) 0%, var(--dr-mint-deep) 100%) !important;
  color: #fff !important;
  box-shadow: 0 14px 34px var(--dr-glow) !important;
}
html body .login-form > button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--dr-mint-deep) 0%, var(--dr-teal-ink) 100%) !important;
  box-shadow: 0 16px 40px var(--dr-glow) !important;
  transform: translateY(-1px);
}

html body .auth-tabs {
  background: var(--dr-bg-soft) !important;
  border-color: var(--dr-line) !important;
}
html body .auth-tab {
  color: var(--dr-muted) !important;
}
html body .auth-tab:hover {
  color: var(--dr-mint-deep) !important;
  background: var(--dr-mint-softer) !important;
}
html body .auth-tab.active {
  color: var(--dr-mint-deep) !important;
  background: var(--dr-card) !important;
  box-shadow: var(--dr-shadow-sm) !important;
}

html body .password-toggle:hover,
html body .password-toggle:focus-visible,
html body .password-toggle.is-visible {
  color: var(--dr-mint-deep) !important;
  background: var(--dr-mint-soft) !important;
}
html body .remember-me {
  color: var(--dr-muted) !important;
}
html body .login-error {
  color: #c0392b !important;
}

/* ============ 8. 深色模式补齐（绿调深空） ============ */
html[data-theme="dark"] body .topbar .brand-word {
  color: var(--dr-mint) !important;
}
html[data-theme="dark"] body .brand-mark {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.16), transparent 55%),
    linear-gradient(135deg, #5fbe97 0%, #2b9c77 100%) !important;
}
html[data-theme="dark"] body .panel.search-panel,
html[data-theme="dark"] body .filter-suite,
html[data-theme="dark"] body .panel,
html[data-theme="dark"] body .nav-dropdown {
  background: var(--dr-card) !important;
  border-color: var(--dr-line) !important;
}
html[data-theme="dark"] body .search-control,
html[data-theme="dark"] body .search-status,
html[data-theme="dark"] body .filter-stats article,
html[data-theme="dark"] body .login-form input,
html[data-theme="dark"] body .login-form input:focus {
  background: var(--dr-bg) !important;
  border-color: var(--dr-line) !important;
}
html[data-theme="dark"] body .search-control textarea,
html[data-theme="dark"] body .search-history-button,
html[data-theme="dark"] body .menglar-mode-button,
html[data-theme="dark"] body .filter-collapse-button,
html[data-theme="dark"] body .secondary-button,
html[data-theme="dark"] body .link-button {
  background: var(--dr-card) !important;
  border-color: var(--dr-line) !important;
  color: var(--dr-muted) !important;
}
html[data-theme="dark"] body .search-control textarea {
  color: var(--dr-ink) !important;
}
html[data-theme="dark"] body .auth-tab.active {
  background: var(--dr-card) !important;
}
html[data-theme="dark"] body .login-head {
  background:
    linear-gradient(150deg, rgba(127, 212, 174, 0.1) 0%, transparent 55%),
    linear-gradient(180deg, #12201a 0%, #0d1712 100%) !important;
}
html[data-theme="dark"] body .preview-metric,
html[data-theme="dark"] body .preview-chart {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: var(--dr-line) !important;
}
html[data-theme="dark"] body .preview-metric strong {
  color: var(--dr-ink) !important;
}

/* ============ 9. 微动效 & 交互 ============ */
html body button,
html body .nav-link,
html body .knowledge-nav-link,
html body .auth-tab,
html body .search-submit-btn,
html body .search-history-button,
html body .filter-collapse-button,
html body .menglar-mode-button {
  cursor: pointer !important;
  transition: background 180ms ease, color 180ms ease, border-color 180ms ease,
    box-shadow 240ms ease, transform 140ms ease, filter 200ms ease !important;
}
html body .primary-button:hover,
html body .search-submit-btn:hover {
  transform: translateY(-1px) !important;
}
html body .primary-button:active,
html body .search-submit-btn:active,
html body .auth-tab.active:active {
  transform: translateY(0) scale(0.98) !important;
}

/* 键盘焦点可见性 */
html body a:focus-visible,
html body button:focus-visible {
  outline: none !important;
  box-shadow: var(--dr-focus) !important;
}

/* ============ 10. 响应式微调 ============ */
@media (max-width: 640px) {
  html body .topbar {
    background: rgba(255, 255, 255, 0.94) !important;
  }
}