/* ==========================================================================
   Sub2API 前端美化 v3 —— 花哨版（纯样式覆盖，nginx 注入，不改任何后端）
   ========================================================================== */

/* ---------- 基础 ---------- */
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
::selection { background: rgba(20, 184, 166, .3); }

* { scrollbar-width: thin; scrollbar-color: rgba(20, 184, 166, .45) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #5eead4, #0ea5e9);
  border: 2px solid transparent; background-clip: content-box; border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #2dd4bf, #0284c7); background-clip: content-box; }

/* ================= 1. 彩色 mesh 背景（全站） ================= */
body { background: #eef3f9 !important; }
.bg-gray-50 {
  background-color: #eef3f9 !important;
  background-image:
    radial-gradient(1100px 620px at 4% -12%, rgba(45, 212, 191, .38), transparent 62%),
    radial-gradient(920px 560px at 98% -6%, rgba(167, 139, 250, .34), transparent 60%),
    radial-gradient(900px 640px at 80% 110%, rgba(96, 165, 250, .30), transparent 62%),
    radial-gradient(780px 540px at 10% 98%, rgba(244, 114, 182, .24), transparent 62%);
  background-attachment: fixed !important;
  background-repeat: no-repeat !important;
  animation: s2mesh 30s ease-in-out infinite alternate;
}
@keyframes s2mesh {
  0%   { background-position: 0% 0%, 100% 0%, 100% 100%, 0% 100%; }
  100% { background-position: 6% 8%, 92% 6%, 94% 92%, 6% 94%; }
}

/* ================= 2. 卡片：玻璃拟态 ================= */
.card, .stat-card {
  background: rgba(255, 255, 255, .66) !important;
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border-radius: 20px !important;
  border: 1px solid rgba(255, 255, 255, .75) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 22px 46px -30px rgba(16, 24, 40, .55) !important;
  transition: transform .3s cubic-bezier(.2, .7, .3, 1), box-shadow .3s ease, background .3s ease !important;
}
.card:hover, .stat-card:hover {
  transform: translateY(-4px) scale(1.004);
  background: rgba(255, 255, 255, .84) !important;
  box-shadow: 0 4px 12px rgba(16, 24, 40, .08), 0 38px 70px -34px rgba(16, 24, 40, .6) !important;
}
.stat-card { position: relative; overflow: hidden; }
.stat-card::after {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
  background: linear-gradient(90deg, #5eead4, #14b8a6 40%, #0ea5e9 75%, #a78bfa);
}

/* 统计卡数字：渐变文字 */
.stat-card .text-xl, .stat-card .text-2xl {
  background: linear-gradient(120deg, #0f766e, #0891b2 60%, #7c3aed);
  -webkit-background-clip: text; background-clip: text;
  color: transparent !important; font-weight: 800 !important; letter-spacing: -.02em;
}

/* ================= 3. 侧边栏：玻璃 + 渐变选中 ================= */
.sidebar {
  background: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-right: 1px solid rgba(255, 255, 255, .65) !important;
  box-shadow: 10px 0 36px -30px rgba(15, 23, 42, .6) !important;
}
.sidebar-link {
  border-radius: 12px !important; position: relative;
  transition: background .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease !important;
}
.sidebar-link:hover {
  background: linear-gradient(90deg, rgba(20, 184, 166, .14), rgba(14, 165, 233, .05)) !important;
}
.sidebar-label { transition: transform .22s ease; }
.sidebar-link:hover .sidebar-label { transform: translateX(2px); }

.sidebar-link-active {
  background-image: linear-gradient(115deg, #2dd4bf, #14b8a6 35%, #0ea5e9 70%, #8b5cf6) !important;
  background-size: 220% 100% !important;
  color: #fff !important;
  box-shadow: 0 12px 26px -12px rgba(13, 148, 136, .95) !important;
  animation: s2sheen 7s ease-in-out infinite;
}
@keyframes s2sheen { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
.sidebar-link-active:hover {
  background-image: linear-gradient(115deg, #5eead4, #14b8a6 35%, #38bdf8 70%, #a78bfa) !important;
}
.sidebar-link-active svg, .sidebar-link-active svg * { color: #fff !important; stroke: #fff !important; }
.sidebar-link-active .sidebar-label { color: #fff !important; font-weight: 600; }

/* ================= 4. 顶栏玻璃加强 ================= */
.glass {
  background: rgba(255, 255, 255, .6) !important;
  backdrop-filter: blur(22px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(22px) saturate(170%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, .6) !important;
}

/* ================= 5. 页面标题：渐变文字 ================= */
h1 {
  background: linear-gradient(120deg, #0f766e, #0891b2 55%, #7c3aed);
  -webkit-background-clip: text; background-clip: text; color: transparent !important;
}

/* ================= 6. 按钮 ================= */
.btn { border-radius: 12px !important; }
.btn-primary {
  background-image: linear-gradient(115deg, #14b8a6, #0ea5e9) !important;
  box-shadow: 0 10px 24px -12px rgba(14, 165, 233, .95) !important;
  transition: transform .18s ease, box-shadow .2s ease, filter .2s ease !important;
}
.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 18px 34px -14px rgba(14, 165, 233, 1) !important;
  filter: saturate(1.1);
}
.btn-secondary, .btn-ghost {
  backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .7) !important;
  transition: transform .18s ease, background-color .2s ease, border-color .2s ease !important;
}
.btn-secondary:hover, .btn-ghost:hover { transform: translateY(-1px); background: #fff !important; }
.btn-icon { border-radius: 10px !important; }

/* ================= 7. 输入框 ================= */
.input, input[type="text"], input[type="password"], input[type="email"], input[type="number"], select, textarea {
  border-radius: 12px !important;
  background: rgba(255, 255, 255, .78) !important;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease !important;
}
.input:focus, input:focus, select:focus, textarea:focus {
  background: #fff !important;
  border-color: #2dd4bf !important;
  box-shadow: 0 0 0 4px rgba(20, 184, 166, .18) !important;
  outline: none !important;
}

/* ================= 8. 徽章 / 表格 ================= */
.badge { font-weight: 600; border-radius: 8px !important; }
table { font-variant-numeric: tabular-nums; }
thead th { font-weight: 600 !important; letter-spacing: .03em; background: rgba(247, 250, 251, .8) !important; }
tbody tr { transition: background .15s ease; }
tbody tr:hover { background: rgba(20, 184, 166, .07) !important; }

/* ================= 9. 弹窗 / 过渡 ================= */
.fixed.inset-0 { backdrop-filter: saturate(130%) blur(4px); }
a, button { transition: color .15s ease, background-color .18s ease, border-color .18s ease; }

/* ================= 10. 深色模式 ================= */
.dark body { background: #070d19 !important; }
.dark .bg-gray-50 {
  background-color: #070d19 !important;
  background-image:
    radial-gradient(1000px 560px at 4% -10%, rgba(20, 184, 166, .22), transparent 60%),
    radial-gradient(900px 520px at 98% -6%, rgba(139, 92, 246, .22), transparent 58%),
    radial-gradient(900px 620px at 80% 110%, rgba(59, 130, 246, .20), transparent 60%) !important;
}
.dark .card, .dark .stat-card {
  background: rgba(30, 41, 59, .6) !important;
  border-color: rgba(148, 163, 184, .18) !important;
}
.dark .sidebar { background: rgba(15, 23, 42, .72) !important; border-right-color: rgba(148, 163, 184, .15) !important; }
.dark .glass { background: rgba(15, 23, 42, .62) !important; border-bottom-color: rgba(148, 163, 184, .15) !important; }
.dark thead th { background: rgba(23, 32, 51, .8) !important; }
.dark h1 { background: linear-gradient(120deg, #5eead4, #38bdf8 55%, #a78bfa); -webkit-background-clip: text; background-clip: text; }