/* ============================================================
   MyRAG 设计系统（ui-ux-pro-max · Minimalism & Swiss Style）
   令牌 -> 基础 -> 组件；加载顺序放在各页面样式之后，用于统一视觉
   颜色：石板灰中性 + 链接蓝强调；背景 #F8FAFC；无障碍对比 ≥4.5:1
   ============================================================ */
:root {
  /* 颜色令牌 */
  --color-primary: #475569;
  --color-on-primary: #ffffff;
  --color-secondary: #64748b;
  --color-accent: #2563eb;
  --color-on-accent: #ffffff;
  --color-brand: #2563eb;
  --color-brand-hover: #1d4ed8;
  --color-brand-soft: #eff6ff;
  --color-background: #f8fafc;
  --color-foreground: #1e293b;
  --color-card: #ffffff;
  --color-card-foreground: #1e293b;
  --color-muted: #eaeff3;
  --color-muted-foreground: #475569;
  --color-border: #e2e8f0;
  --color-destructive: #dc2626;
  --color-on-destructive: #ffffff;
  --color-ring: #2563eb;
  --color-success: #15803d;
  --color-warning: #b45309;

  /* 间距/圆角/阴影 */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px;
  --radius-sm: 8px; --radius: 10px; --radius-lg: 16px; --radius-xl: 20px; --radius-pill: 999px;
  --shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.05);
  --shadow-sm: 0 1px 3px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md: 0 8px 24px -12px rgba(16, 24, 40, 0.18);
  --shadow-lg: 0 20px 44px -22px rgba(16, 24, 40, 0.28);

  /* 字体与排版 */
  --font-sans: "Inter", "Segoe UI", system-ui, -apple-system, "PingFang SC",
               "Hiragino Sans GB", "Microsoft YaHei", "Source Han Sans SC", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --text-xs: 12px; --text-sm: 13px; --text-base: 15px; --text-lg: 18px;
  --text-xl: 22px; --text-2xl: 26px; --text-3xl: 32px;
  --leading: 1.75;

  /* 动效 */
  --transition: 180ms cubic-bezier(0.2, 0.7, 0.3, 1);
  --transition-slow: 260ms cubic-bezier(0.2, 0.7, 0.3, 1);
}

/* ---------- 基础 ---------- */
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading);
  color: var(--color-foreground);
  background: var(--color-background) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* 去掉旧的彩色光斑装饰，保持克制 */
body::before, body::after { display: none !important; }

h1, h2, h3, h4 { color: #0f172a; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3; }
h1 { font-size: var(--text-3xl); }
h2 { font-size: var(--text-2xl); }
h3 { font-size: var(--text-lg); }
p { color: var(--color-muted-foreground); }
a { color: var(--color-brand); }

:focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* 顶部导航占位 */
body.mx-has-nav { padding-top: 76px; }

/* ---------- 卡片 ---------- */
.card {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.card:hover { box-shadow: var(--shadow-sm); }

/* ---------- 按钮 ---------- */
.btn,
.btn-primary,
button.btn-primary,
.link-group a,
button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 11px 20px;
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--radius);
  background: var(--color-brand);
  color: var(--color-on-accent);
  font-family: inherit;
  font-size: var(--text-base);
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: background var(--transition), box-shadow var(--transition), transform var(--transition);
}
.btn:hover:not(:disabled),
.btn-primary:hover:not(:disabled),
.link-group a:hover,
button[type="submit"]:hover:not(:disabled) {
  background: var(--color-brand-hover);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active:not(:disabled),
.btn-primary:active:not(:disabled),
.link-group a:active { transform: translateY(0); box-shadow: var(--shadow-xs); }
.btn:disabled,
.btn-primary:disabled,
button:disabled {
  background: #cbd5e1 !important;
  color: #64748b !important;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}
.btn-block { width: 100%; }

/* 次级/幽灵按钮 */
.btn-secondary,
.back-btn,
button:not(.btn):not(.btn-primary):not(.btn-small):not(.ad-arrow):not(.mx-logout) {
  background: var(--color-card);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-xs);
}
.btn-secondary:hover,
.back-btn:hover,
button:not(.btn):not(.btn-primary):not(.btn-small):not(.ad-arrow):not(.mx-logout):hover {
  background: #f1f5f9;
  color: var(--color-brand);
  border-color: #bfdbfe;
  transform: translateY(-1px);
  box-shadow: var(--shadow-sm);
}
/* 危险按钮 */
.btn-danger,
.btn-small.danger {
  background: #fff !important;
  color: var(--color-destructive) !important;
  border: 1px solid #fecaca !important;
}
.btn-danger:hover,
.btn-small.danger:hover { background: #fef2f2 !important; }

/* 小按钮 */
.btn-small {
  padding: 6px 12px;
  min-height: 34px;
  font-size: var(--text-sm);
  border-radius: var(--radius-sm);
  background: var(--color-card);
  color: var(--color-foreground);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: var(--transition);
}
.btn-small:hover { border-color: #bfdbfe; color: var(--color-brand); background: #f8fafc; }

/* 首页入口按钮：实心蓝，去掉渐变 */
.link-group a {
  min-width: 150px;
  background: var(--color-brand) !important;
  border-radius: var(--radius);
  font-weight: 600;
}
.link-group a.logged-out { background: #94a3b8 !important; }
.link-group a.logged-out:hover { background: #7c8b9e !important; }
.link-group a.disabled { opacity: 0.45; }

/* ---------- 表单 ---------- */
input[type="text"], input[type="password"], input[type="number"], input[type="url"],
input[type="search"], input:not([type]), textarea, select {
  width: 100%;
  padding: 11px 14px;
  min-height: 44px;
  border: 1px solid #cbd5e1;
  border-radius: var(--radius);
  background: #fff;
  color: var(--color-foreground);
  font-family: inherit;
  font-size: var(--text-base);
  transition: border-color var(--transition), box-shadow var(--transition);
}
input::placeholder, textarea::placeholder { color: #94a3b8; }
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15);
}
textarea { resize: vertical; line-height: 1.7; }
label { display: block; margin-bottom: 6px; font-size: var(--text-sm); font-weight: 600; color: #334155; }
.hint { color: #94a3b8 !important; font-size: var(--text-xs); }

/* ---------- 消息/状态 ---------- */
.msg-box { color: var(--color-destructive); font-size: var(--text-sm); text-align: left; }
.msg-ok { color: var(--color-success); }
.status { color: var(--color-muted-foreground); font-size: var(--text-sm); margin-top: var(--space-3); white-space: pre-wrap; }
.status.error, #status.error { color: var(--color-destructive); }
.link { color: var(--color-brand); text-decoration: none; }
.link:hover { text-decoration: underline; }

/* ---------- 页面头 ---------- */
.page-header {
  max-width: 1200px;
  margin: 0 auto var(--space-4);
  padding: var(--space-4) var(--space-5);
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}
.page-header h2, .header-row h2 { font-size: var(--text-xl); margin: 0; }
.header-icon { font-size: 20px; margin-right: 8px; }
.header-desc { margin-top: 6px; font-size: var(--text-sm); color: #64748b; }
.header-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; }
.back-btn {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 16px; min-height: 40px;
  border-radius: var(--radius-pill);
  font-size: var(--text-sm); font-weight: 500;
  text-decoration: none; cursor: pointer;
}

/* ---------- 表格 ---------- */
table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--text-sm); background: var(--color-card); }
thead th {
  background: #f1f5f9; color: #334155; font-weight: 600;
  padding: 12px 14px; border-bottom: 1px solid var(--color-border); text-align: left;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid #f1f5f9; color: var(--color-foreground); }
tbody tr:hover td { background: #f8fafc; }
tbody tr:last-child td { border-bottom: 0; }

/* ---------- 结果/内容区 ---------- */
.result-box, .preview .summary, pre, code {
  font-family: inherit;
}
.result-box {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  line-height: var(--leading);
}
pre, code { font-family: var(--font-mono); }
pre { background: #f8fafc; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 12px; overflow: auto; }

/* ---------- 页脚 ---------- */
.site-footer {
  background: rgba(255, 255, 255, 0.92);
  border-top: 1px solid var(--color-border);
  color: #64748b;
  font-size: var(--text-xs);
  box-shadow: none;
}
.site-footer a { color: #64748b; }
.site-footer a:hover { color: var(--color-brand); }

/* ---------- 轮播 ---------- */
.ad-carousel {
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-sm);
  border-radius: var(--radius-lg);
  background: var(--color-card);
}
.ad-arrow { background: rgba(255, 255, 255, 0.92); color: #334155; box-shadow: var(--shadow-sm); }
.ad-arrow:hover { background: #fff; color: var(--color-brand); }
.ad-dots span { background: rgba(100, 116, 139, 0.45); }
.ad-dots span.active { background: var(--color-brand); }

/* ---------- 首页（收敛旧的多彩渐变） ---------- */
.container {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.container h1 { letter-spacing: -0.02em; }
.container .desc { color: #475569; }
.welcome {
  background: var(--color-brand-soft);
  border: 1px solid #bfdbfe;
  border-radius: var(--radius-pill);
  color: #1e3a8a;
}
.welcome strong { color: var(--color-brand); }
.admin-entry {
  background: var(--color-card);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
}
.admin-entry:hover { border-color: #bfdbfe; color: var(--color-brand); }

/* ============================================================
   全局顶栏导航（由 js/nav.js 注入）
   ============================================================ */
.mx-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: saturate(180%) blur(12px);
  -webkit-backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--color-border);
}
.mx-nav-inner {
  max-width: 1200px; margin: 0 auto;
  padding: 10px 16px;
  display: flex; align-items: center; gap: var(--space-4);
}
.mx-brand {
  display: inline-flex; align-items: center; gap: 10px;
  text-decoration: none; flex-shrink: 0;
}
.mx-brand-mark {
  width: 30px; height: 30px; border-radius: 9px;
  background: var(--color-brand); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 15px;
}
.mx-brand-name { font-weight: 700; color: #0f172a; font-size: var(--text-base); white-space: nowrap; }
.mx-links {
  display: flex; align-items: center; gap: 2px;
  overflow-x: auto; flex: 1; scrollbar-width: none;
}
.mx-links::-webkit-scrollbar { display: none; }
.mx-links a {
  padding: 8px 12px; border-radius: var(--radius-sm);
  color: #475569; text-decoration: none;
  font-size: var(--text-sm); font-weight: 500; white-space: nowrap;
  transition: background var(--transition), color var(--transition);
}
.mx-links a:hover { background: #f1f5f9; color: #0f172a; }
.mx-links a.active { background: var(--color-brand-soft); color: var(--color-brand-hover); font-weight: 600; }
.mx-user { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.mx-user-chip {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px; border-radius: var(--radius-pill);
  background: #f1f5f9; color: #334155; font-size: var(--text-sm);
  max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mx-user-chip strong { color: var(--color-brand-hover); font-weight: 600; }
.mx-logout {
  padding: 7px 14px; min-height: 36px;
  border: 1px solid var(--color-border); border-radius: var(--radius-pill);
  background: #fff; color: #475569; font-size: var(--text-sm); cursor: pointer;
  transition: var(--transition);
}
.mx-logout:hover { border-color: #fecaca; color: var(--color-destructive); background: #fef2f2; }

@media (max-width: 860px) {
  .mx-brand-name { display: none; }
  body.mx-has-nav { padding-top: 68px; }
  .mx-nav-inner { padding: 8px 12px; gap: 8px; }
  .mx-user-chip { display: none; }
}
@media (max-width: 640px) {
  .page-header { padding: 14px 16px; }
  .header-row { flex-direction: column; align-items: flex-start; }
  .link-group a { width: 100%; }
}

/* ---------- 无障碍：尊重减少动效 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* 页头 SVG 图标 */
.header-icon { display: inline-flex; align-items: center; color: var(--color-brand); }
.header-icon svg { width: 20px; height: 20px; }