/* ============================================================
   22331 API — 二次元风格主题 (Custom CSS for new-api)
   注入方式: 后台页脚 HTML 中引入, 或 Caddy 静态路由 /custom.css
   技术约束: 基于 shadcn CSS 变量体系, light+dark 双套覆盖,
   oklch 需带 hex 回退(旧浏览器), 不引用带 hash 的产物文件
   ============================================================ */

/* ---------- 1. 全局字体:圆体优先 ---------- */
:root {
  font-family: "PingFang SC", "Hiragino Sans GB", "Yuanti SC", "幼圆", "YouYuan",
               "HarmonyOS Sans SC", "Microsoft YaHei", sans-serif !important;
  --font-mono: "Comic Sans MS", "Yuanti SC", monospace;
  letter-spacing: 0.01em;
}

/* ---------- 2. 调色板:樱花粉+天空蓝(二次元标配) ---------- */
:root, .dark {
  /* 主色:樱花粉 */
  --primary: #ff8fb3;                 /* fallback */
  --primary: oklch(0.78 0.13 350);
  --primary-foreground: #ffffff;

  /* 背景女孩白 */
  --background: #fff5f8;
  --background: oklch(0.975 0.02 350);
  --foreground: #52374a;

  /* 卡片 */
  --card: #ffffff;
  --card-foreground: #52374a;

  /* 强调色:天空蓝 */
  --accent: #ffe3f0;
  --accent: oklch(0.94 0.04 350);
  --accent-foreground: #d4507d;

  /* 侧边栏:淡粉雾 */
  --sidebar: #fff0f5;
  --sidebar-foreground: #6b4a5e;

  /* 边框:粉色柔光 */
  --border: #ffd6e5;
  --input: #ffd6e5;
  --ring: #ff8fb3;

  /* 全局圆角:二次元大圆角 */
  --radius: 1.5rem;

  /* 图表马卡龙色 */
  --chart-1: #ff8fb3;
  --chart-2: #7ec8f5;
  --chart-3: #ffd166;
  --chart-4: #b8f1d4;
  --chart-5: #cdb9ff;
}

/* 暗色模式:夜樱粉(保留深底但整体偏紫粉) */
.dark {
  --primary: #ff7fae;
  --primary: oklch(0.75 0.14 350);
  --primary-foreground: #2b1520;
  --background: #221722;
  --background: oklch(0.21 0.02 350);
  --foreground: #f5e4ef;
  --card: #2c1e2c;
  --card-foreground: #f5e4ef;
  --accent: #3a2438;
  --accent-foreground: #ffb3cf;
  --sidebar: #261a26;
  --sidebar-foreground: #e8d0df;
  --border: #3d2a3c;
  --input: #3d2a3c;
  --ring: #ff7fae;
}

/* ---------- 3. 卡片风格:浮起+樱花描边 ---------- */
:root [class*="rounded-2xl"], :root [class*="rounded-xl"],
:root [class*="rounded-lg"] {
  /* 确保大圆角不被具体类压制 */
  border-radius: clamp(14px, 2vw, 24px);
}

:root [class*="rounded-full"] {
  border-radius: 9999px;
  overflow: hidden;
}

/* 卡片柔光阴影 + hover 浮起 */
main .rounded-2xl, main .rounded-xl, main .rounded-lg {
  box-shadow: 0 4px 20px -6px rgba(255, 143, 179, 0.25);
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease;
}
main .rounded-2xl:hover, main .rounded-xl:hover, main .rounded-lg:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 30px -8px rgba(255, 143, 179, 0.45);
}

/* ---------- 4. 按钮风格:果冻按钮 ---------- */
button[class*="bg-primary"]:not(:disabled):hover,
a[class*="bg-primary"]:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 6px 18px -4px rgba(255, 143, 179, 0.6);
  transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

/* 主按钮弹性按下 */
button[class*="bg-primary"]:not(:disabled):active,
a[class*="bg-primary"]:active {
  transform: scale(0.96);
}

/* ---------- 5. 樱花飘落动画(登录/首页氛围) ---------- */
@keyframes sakura-fall {
  0%   { transform: translateY(-8vh) rotate(0deg) translateX(0); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translateY(110vh) rotate(360deg) translateX(8vw); opacity: 0.7; }
}

@keyframes float-sway {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(4px); }
}

/* 未登录首页/登录页的柔光渐变背景 */
main::before, .min-h-screen::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 60% 40% at 12% 8%, rgba(255, 182, 208, 0.35), transparent 60%),
    radial-gradient(ellipse 50% 35% at 88% 15%, rgba(169, 220, 255, 0.32), transparent 60%),
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(255, 214, 230, 0.4), transparent 65%);
}

.dark main::before, .dark .min-h-screen::before {
  background:
    radial-gradient(ellipse 60% 40% at 12% 8%, rgba(255, 143, 179, 0.08), transparent 60%),
    radial-gradient(ellipse 50% 35% at 88% 15%, rgba(126, 200, 245, 0.07), transparent 60%),
    radial-gradient(ellipse 55% 45% at 50% 100%, rgba(205, 185, 255, 0.07), transparent 65%);
}

/* ---------- 6. 表格与表单 ---------- */
/* 表格行 hover 粉色高亮 */
[class*="tbody"]:hover [class*="bg-muted"],
tr:hover td {
  background-color: rgba(255, 227, 240, 0.5);
}

.dark tr:hover td {
  background-color: rgba(255, 143, 179, 0.06);
}

/* 输入框聚焦:粉色呼吸光圈 */
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: #ff8fb3;
  box-shadow: 0 0 0 4px rgba(255, 143, 179, 0.18);
}

/* ---------- 7. 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #ffb3cf, #7ec8f5);
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.6);
}

/* ---------- 8. 选中文本 ---------- */
::selection {
  background: #ffb3cf;
  color: #52374a;
}

/* ---------- 9. 顶栏毛玻璃 ---------- */
header, [class*="sticky"][class*="top-0"], [class*="sticky"][class*="top-\["] {
  backdrop-filter: blur(14px) saturate(1.4);
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  background: rgba(255, 245, 248, 0.75) !important;
}
.dark header, .dark [class*="sticky"][class*="top-0"] {
  background: rgba(34, 23, 34, 0.75) !important;
}

/* ---------- 10. Logo 区域微微摇摆彩蛋 ---------- */
img[src*="logo"], img[alt*="logo"], img[alt*="Logo"] {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}
img[src*="logo"]:hover, img[alt*="logo"]:hover {
  transform: rotate(-8deg) scale(1.12);
  animation: float-sway 0.6s ease-in-out infinite;
}

/* ---------- 11. 减少动效偏好(无障碍) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 12. 移动端适配 ---------- */
@media (max-width: 640px) {
  main .rounded-2xl:hover, main .rounded-xl:hover, main .rounded-lg:hover {
    transform: none;  /* 手机上禁浮起,避免误触布局 */
  }
  button[class*="bg-primary"]:hover {
    transform: none;
  }
}