/*
  主题与设计规范：
  - 主色：#5B6AFF；辅助色：#8C54FF
  - 背景：#FFFFFF / #F5F7FA
  - 字体：Roboto, system-ui, -apple-system, Segoe UI, Noto Sans SC
  - 阴影、圆角与8px倍数间距
*/

:root {
  --color-primary: #5B6AFF;
  --color-secondary: #8C54FF;
  --color-bg: #F5F7FA;
  --color-surface: #FFFFFF;
  --color-text: #333333;
  --color-text-muted: #666666;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  --radius: 12px;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --grad: linear-gradient(135deg, var(--color-primary), var(--color-secondary));
}

/* 暗色主题变量覆盖 */
html[data-theme="dark"] {
  --color-bg: #0f1220;
  --color-surface: #14182b;
  --color-text: #e6e6e6;
  --color-text-muted: #a3a7b3;
  --shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: 'Roboto', system-ui, -apple-system, 'Segoe UI', 'Noto Sans SC', sans-serif;
  color: var(--color-text);
  background: var(--color-bg);
}

/* 顶部导航栏 */
.topbar {
  position: sticky;
  top: 0;
  z-index: 1000;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}
.logo {
  font-weight: 700;
  font-size: 20px;
  color: var(--color-primary);
  text-decoration: none;
  margin-right: var(--space-3);
}
.topbar-left { display: flex; align-items: center; gap: var(--space-2); }
.search-wrap { display: flex; gap: var(--space-1); align-items: center; }
.search-wrap input {
  padding: 10px 12px;
  border: 1px solid #e2e6ef;
  border-radius: var(--radius);
  background: var(--color-surface);
  color: var(--color-text);
  min-width: 220px;
}
.topbar-right { display: flex; align-items: center; gap: var(--space-2); }
.lang-switch select {
  padding: 10px 12px;
  border-radius: var(--radius);
  border: 1px solid #e2e6ef;
  background: var(--color-surface);
  color: var(--color-text);
}

/* 通用按钮 */
.btn {
  cursor: pointer;
  border: none;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-weight: 500;
}
.btn.primary {
  background: var(--color-primary);
  color: #fff;
}
.btn.gradient {
  background: var(--grad);
  color: #fff;
}
.btn.ghost {
  background: transparent;
  color: var(--color-text);
}
.btn.icon {
  width: 32px; height: 32px; padding: 0;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
}
.btn:hover { filter: brightness(1.05); }
.btn:active { transform: translateY(1px); }

/* 主布局 */
.layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-3);
  padding: var(--space-3);
}

/* 左侧侧边栏 */
.sidebar {
  position: sticky;
  top: 76px; /* 顶栏高度近似 */
  align-self: start;
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-2);
}
.sidebar-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--space-2); }
.sidebar-title { font-weight: 600; }
.category-nav { display: flex; flex-direction: column; gap: var(--space-2); }
.category-group { border: 1px solid #e2e6ef; border-radius: var(--radius); overflow: hidden; background: var(--color-surface); }
.category-group-toggle {
  width: 100%;
  display: flex; align-items: center; gap: var(--space-1);
  padding: var(--space-2);
  background: transparent;
  border: none; cursor: pointer; color: var(--color-text);
}
.category-group-toggle:hover { background: rgba(91,106,255,0.08); }
.category-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid #e2e6ef; }
.category-item {
  display: flex; align-items: center; gap: var(--space-1);
  padding: 10px var(--space-2);
  cursor: pointer; color: var(--color-text);
}
.category-item .icon { width: 20px; text-align: center; }
.category-item:hover { background: rgba(91,106,255,0.08); }
.category-item.active { background: rgba(140,84,255,0.12); color: var(--color-primary); font-weight: 600; }

/* 错误提示与可点击表头样式 */
.error { color: #c0342f; font-size: 12px; }
th[data-sort] { position: relative; }
th[data-sort]::after { content: '\25B4'; /* ▲ */ position: absolute; right: 8px; color: var(--color-text-muted); opacity: 0.6; }
th[data-sort]:hover { background: rgba(91,106,255,0.08); }

/* 主内容与卡片网格 */
.content {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}
.content-header { margin-bottom: var(--space-3); }
.content-header h1 { margin: 0 0 var(--space-1) 0; }
.content-header p { margin: 0; color: var(--color-text-muted); }

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: var(--space-3);
}
.tool-card {
  background: var(--color-surface);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
  transition: transform 220ms ease, box-shadow 220ms ease;
}
.tool-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,0.12); }
.card-icon { font-size: 28px; margin-bottom: var(--space-2); }
.card-title { margin: 0 0 var(--space-1) 0; font-size: 18px; }
.card-desc { margin: 0 0 var(--space-2) 0; color: var(--color-text-muted); }
.card-actions { display: flex; gap: var(--space-1); }

/* 平滑滚动 */
html { scroll-behavior: smooth; }

/* 响应式设计 */
@media (max-width: 1024px) {
  .layout { grid-template-columns: 240px 1fr; }
}
@media (max-width: 768px) {
  .layout { grid-template-columns: 1fr; }
  .sidebar { position: relative; top: 0; order: 2; }
  .content { order: 1; }
  .topbar { flex-wrap: wrap; gap: var(--space-2); }
  .search-wrap input { min-width: 160px; }
}