/* ============================================================
   鸡腿小站 · ShareLLM 风格主题
   ------------------------------------------------------------
   参考：淡紫粉渐变背景 + 白色胶囊顶栏 + 大圆角卡片 + 浅蓝主色
   ============================================================ */

/* ---------- 1. 字体 ---------- */
html,
html:root,
html[data-theme-preset],
html[data-theme-preset="default"] {
  --font-ui-sans: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text",
    "Helvetica Neue", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei",
    system-ui, sans-serif !important;
  --font-body: var(--font-ui-sans) !important;
  --font-sans: var(--font-ui-sans) !important;

  --radius: 1rem !important;
  --radius-xs: 0.5rem !important;
  --radius-sm: 0.625rem !important;
  --radius-md: 0.75rem !important;
  --radius-lg: 1rem !important;
  --radius-xl: 1.25rem !important;
  --radius-2xl: 1.5rem !important;
}

html {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

body {
  font-family: var(--font-ui-sans) !important;
  letter-spacing: -0.008em;
}

/* 代码等宽 */
code, pre, kbd, samp, .font-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace !important;
}

/* ---------- 2. 浅色主题色板（ShareLLM 风） ---------- */
html:not(.dark),
html[data-theme-preset]:not(.dark) {
  --background: #f7f5fb !important;
  --foreground: #1f2937 !important;

  --card: #ffffff !important;
  --card-foreground: #1f2937 !important;
  --popover: #ffffff !important;
  --popover-foreground: #1f2937 !important;

  --primary: #93c5fd !important;
  --primary-foreground: #1e3a5f !important;

  --secondary: #eff6ff !important;
  --secondary-foreground: #1e3a5f !important;

  --muted: #f3f4f6 !important;
  --muted-foreground: #9ca3af !important;

  --accent: #dbeafe !important;
  --accent-foreground: #1d4ed8 !important;

  --destructive: #f87171 !important;
  --destructive-foreground: #ffffff !important;

  --border: rgba(0, 0, 0, 0.06) !important;
  --input: rgba(0, 0, 0, 0.08) !important;
  --ring: #93c5fd !important;
}

/* 深色主题 */
html.dark {
  --background: #0f1117 !important;
  --foreground: #e5e7eb !important;
  --card: #1a1d26 !important;
  --card-foreground: #e5e7eb !important;
  --popover: #1a1d26 !important;
  --popover-foreground: #e5e7eb !important;
  --primary: #3b82f6 !important;
  --primary-foreground: #ffffff !important;
  --secondary: #252a36 !important;
  --secondary-foreground: #e5e7eb !important;
  --muted: #252a36 !important;
  --muted-foreground: #9ca3af !important;
  --accent: #1e3a5f !important;
  --accent-foreground: #93c5fd !important;
  --border: rgba(255, 255, 255, 0.08) !important;
  --input: rgba(255, 255, 255, 0.1) !important;
  --ring: #3b82f6 !important;
}

/* ---------- 3. 渐变背景 ---------- */
html:not(.dark) body {
  background: #f7f5fb !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 8% 0%, rgba(196, 181, 253, 0.30), transparent 62%),
    radial-gradient(ellipse 65% 55% at 95% 100%, rgba(165, 243, 252, 0.30), transparent 62%),
    radial-gradient(ellipse 55% 45% at 75% 8%, rgba(251, 207, 232, 0.22), transparent 60%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

html.dark body {
  background: #0f1117 !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 8% 0%, rgba(99, 102, 241, 0.12), transparent 62%),
    radial-gradient(ellipse 65% 55% at 95% 100%, rgba(6, 182, 212, 0.10), transparent 62%) !important;
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
}

/* 移除之前 Apple 主题的顶部装饰 */
body::before,
body::after {
  display: none !important;
}

/* ---------- 4. 顶栏：白色胶囊 ---------- */
header,
[class*="header"]:not([class*="table"]):not([class*="card"]) {
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
}

html:not(.dark) header {
  background-color: rgba(255, 255, 255, 0.78) !important;
  border-bottom: none !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04), 0 4px 20px rgba(0, 0, 0, 0.03) !important;
}

/* 顶栏内的导航胶囊 */
html:not(.dark) header a,
html:not(.dark) header button {
  border-radius: 999px !important;
  transition: background-color 0.2s ease, color 0.2s ease !important;
}

html:not(.dark) header a:hover,
html:not(.dark) header button:hover {
  background-color: rgba(219, 234, 254, 0.7) !important;
}

/* ---------- 5. 侧栏 ---------- */
html:not(.dark) aside,
html:not(.dark) [class*="sidebar"],
html:not(.dark) nav[class*="side"] {
  background-color: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  backdrop-filter: saturate(180%) blur(20px);
  border-right: 1px solid rgba(0, 0, 0, 0.04) !important;
}

/* 侧栏菜单项：大圆角 + 淡蓝底选中 */
html:not(.dark) aside a,
html:not(.dark) aside button,
html:not(.dark) [class*="sidebar"] a,
html:not(.dark) [class*="sidebar"] button {
  border-radius: 11px !important;
  transition: background-color 0.18s ease, color 0.18s ease !important;
  font-size: 13.5px !important;
}

html:not(.dark) aside a:hover,
html:not(.dark) aside button:hover {
  background-color: rgba(239, 246, 255, 0.9) !important;
}

/* 选中项：淡蓝填充 */
html:not(.dark) aside [data-active="true"],
html:not(.dark) aside [aria-current="page"],
html:not(.dark) [class*="sidebar"] [data-active="true"] {
  background-color: #dbeafe !important;
  color: #1d4ed8 !important;
  font-weight: 600 !important;
}

/* ---------- 6. 卡片：纯白大圆角 ---------- */
html:not(.dark) [class*="bg-card"],
html:not(.dark) .glass-1,
html:not(.dark) .glass-2,
html:not(.dark) .glass-3,
html:not(.dark) .glass-4,
html:not(.dark) .glass-5 {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.045) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02), 0 8px 28px rgba(0, 0, 0, 0.035) !important;
  border-radius: 18px !important;
}

/* 卡片内嵌套卡片时用淡灰底 */
html:not(.dark) [class*="bg-card"] [class*="bg-card"] {
  background-color: #fafafa !important;
  box-shadow: none !important;
  border: 1px solid rgba(0, 0, 0, 0.04) !important;
  border-radius: 14px !important;
}

/* ---------- 7. 表格 ---------- */
table {
  border-collapse: separate !important;
  border-spacing: 0 !important;
}

html:not(.dark) table {
  background: #ffffff !important;
  border-radius: 16px !important;
  overflow: hidden;
}

thead th {
  font-weight: 600 !important;
  font-size: 12.5px !important;
  letter-spacing: 0.01em !important;
  color: #9ca3af !important;
  background-color: transparent !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
}

html.dark thead th {
  color: #9ca3af !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07) !important;
}

tbody tr {
  transition: background-color 0.15s ease !important;
}

html:not(.dark) tbody tr:hover {
  background-color: #f8fafc !important;
}

html:not(.dark) tbody tr[data-state="selected"],
html:not(.dark) tbody tr[aria-selected="true"] {
  background-color: #eff6ff !important;
}

html.dark tbody tr:hover {
  background-color: rgba(255, 255, 255, 0.04) !important;
}

table td {
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid rgba(0, 0, 0, 0.035) !important;
}

/* ---------- 8. 按钮 ---------- */
button, .btn, [role="button"] {
  transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1) !important;
  font-weight: 500 !important;
  border-radius: 11px !important;
  letter-spacing: -0.005em !important;
}

button:active, .btn:active {
  transform: scale(0.975) !important;
}

/* 主按钮：浅蓝填充 + 深蓝字 */
html:not(.dark) .bg-blue-500,
html:not(.dark) .bg-blue-600,
html:not(.dark) [class*="bg-primary"] {
  background-color: #93c5fd !important;
  color: #1e3a5f !important;
  border: none !important;
  box-shadow: 0 1px 2px rgba(147, 197, 253, 0.4) !important;
}

html:not(.dark) .bg-blue-500:hover,
html:not(.dark) .bg-blue-600:hover,
html:not(.dark) [class*="bg-primary"]:hover {
  background-color: #bfdbfe !important;
  box-shadow: 0 4px 14px rgba(147, 197, 253, 0.45) !important;
}

/* 次要按钮：淡灰底 */
html:not(.dark) button[class*="outline"],
html:not(.dark) .btn-secondary {
  background-color: #f3f4f6 !important;
  border-color: transparent !important;
  color: #374151 !important;
}

html:not(.dark) button[class*="outline"]:hover {
  background-color: #e5e7eb !important;
}

/* ---------- 9. 输入框 ---------- */
input, textarea, select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease !important;
  border-radius: 11px !important;
}

html:not(.dark) input,
html:not(.dark) textarea,
html:not(.dark) select {
  background-color: #ffffff !important;
  border: 1px solid rgba(0, 0, 0, 0.09) !important;
}

html:not(.dark) input:focus,
html:not(.dark) textarea:focus,
html:not(.dark) select:focus {
  outline: none !important;
  border-color: #93c5fd !important;
  box-shadow: 0 0 0 3.5px rgba(147, 197, 253, 0.25) !important;
}

html.dark input:focus,
html.dark textarea:focus,
html.dark select:focus {
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3.5px rgba(59, 130, 246, 0.25) !important;
}

/* ---------- 10. 徽章/标签胶囊化 ---------- */
[class*="badge"], [class*="Badge"], [class*="tag"], [class*="chip"] {
  border-radius: 999px !important;
  font-weight: 500 !important;
  font-size: 11.5px !important;
}

/* ---------- 11. 弹窗/浮层 ---------- */
[role="dialog"], [class*="popover"], [class*="dropdown"], [class*="Dialog"], [class*="Sheet"] {
  border-radius: 20px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.04) !important;
  border: none !important;
}

html.dark [role="dialog"],
html.dark [class*="popover"],
html.dark [class*="dropdown"] {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(255, 255, 255, 0.08) !important;
}

/* ---------- 12. 滚动条 ---------- */
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.14);
  border-radius: 999px;
  border: 2.5px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.26);
  background-clip: content-box;
}
html.dark ::-webkit-scrollbar-thumb {
  background-color: rgba(255, 255, 255, 0.18);
  background-clip: content-box;
}

/* ---------- 13. 链接 ---------- */
a { transition: color 0.18s ease, opacity 0.18s ease; }
a:hover { opacity: 0.8; }

/* ---------- 14. 图标容器：圆形浅蓝底 ---------- */
html:not(.dark) [class*="rounded-lg"][class*="bg-"],
html:not(.dark) [class*="rounded-md"][class*="bg-"] {
  border-radius: 11px !important;
}

/* ---------- 15. 数字等宽 ---------- */
[class*="tabular"], table td {
  font-variant-numeric: tabular-nums;
}

/* ---------- 16. 动效曲线 ---------- */
*, *::before, *::after {
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}