/* ================================================================
   异次元图床 · 樱花霓虹 — 兰空图床 Lsky Pro V2 皮肤
   Tailwind 覆盖 + 极光背景 + 玻璃卡片 + 樱花飘落
   ================================================================ */

:root {
  --an-pink: #ff7eb6;
  --an-pink-deep: #ff4d94;
  --an-purple: #a678ff;
  --an-cyan: #6ee7ff;
  --an-bg: #fdf4fa;
  --an-ink: #1c1330;
  --an-ink-soft: #6b6382;
  --an-card: rgba(255, 255, 255, .78);
  --an-border: rgba(255, 126, 182, .26);
  --an-shadow: 0 18px 42px -20px rgba(160, 107, 255, .42);
  --an-font: "Noto Sans SC", "HarmonyOS Sans SC", "PingFang SC", "Hiragino Sans GB",
             "Microsoft YaHei", system-ui, -apple-system, sans-serif;
}

/* ---------- 背景 ---------- */
html, body {
  font-family: var(--an-font) !important;
  color: var(--an-ink);
}

body {
  background:
    radial-gradient(1100px 620px at 84% -10%, rgba(255, 126, 182, .36), transparent 62%),
    radial-gradient(920px 560px at 6% 2%, rgba(166, 120, 255, .32), transparent 60%),
    radial-gradient(780px 640px at 58% 110%, rgba(110, 231, 255, .26), transparent 64%),
    var(--an-bg) !important;
  background-attachment: fixed !important;
  min-height: 100vh;
}

/* 樱花层 */
body::before {
  content: "";
  position: fixed;
  inset: -10% 0 0 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='%23ff9ccb' fill-opacity='0.7'%3E%3Cpath d='M30 18c3.5 0 6 3.6 6 8s-2.5 8-6 8-6-3.6-6-8 2.5-8 6-8z'/%3E%3Cpath d='M110 62c2.6 0 4.5 2.7 4.5 6s-1.9 6-4.5 6-4.5-2.7-4.5-6 1.9-6 4.5-6z'/%3E%3C/g%3E%3Cg fill='%23c9a6ff' fill-opacity='0.55'%3E%3Cpath d='M138 16c2 0 3.4 2.1 3.4 4.6s-1.4 4.6-3.4 4.6-3.4-2.1-3.4-4.6S136 16 138 16z'/%3E%3Cpath d='M18 88c2.2 0 3.8 2.4 3.8 5.2s-1.6 5.2-3.8 5.2-3.8-2.4-3.8-5.2S15.8 88 18 88z'/%3E%3C/g%3E%3C/svg%3E");
  animation: anPetalFall 26s linear infinite;
}

@keyframes anPetalFall {
  0%   { background-position: 0 -160px, 40px -80px; }
  100% { background-position: 120px 480px, -60px 520px; }
}

@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

/* ---------- 覆盖 Tailwind 的灰底 ---------- */
.bg-gray-100 { background: transparent !important; }
.bg-white { background: var(--an-card) !important; backdrop-filter: blur(16px) saturate(150%); }
.bg-gray-700, .bg-gray-800, .bg-gray-900 {
  background: linear-gradient(102deg, rgba(255, 77, 148, .92), rgba(166, 120, 255, .92)) !important;
  backdrop-filter: blur(12px);
}
.text-gray-900, .text-gray-800, .text-gray-700 { color: var(--an-ink) !important; }
.text-gray-600, .text-gray-500, .text-gray-400 { color: var(--an-ink-soft) !important; }

/* ---------- 顶部导航 ---------- */
header.bg-gray-700 {
  box-shadow: 0 10px 30px -18px rgba(255, 77, 148, .9);
  border-bottom: 1px solid rgba(255, 255, 255, .16);
}

/* ---------- 卡片 / 面板 ---------- */
.rounded-md, .rounded-lg, .rounded-xl, .rounded-2xl {
  border-radius: 16px !important;
}

.shadow, .shadow-md, .shadow-lg, .shadow-xl {
  box-shadow: var(--an-shadow) !important;
}

/* ---------- 按钮 ---------- */
.bg-indigo-600, .bg-indigo-500, .bg-blue-600, .bg-blue-500 {
  background: linear-gradient(118deg, var(--an-pink-deep) 0%, var(--an-purple) 70%) !important;
  color: #fff !important;
  box-shadow: 0 14px 28px -16px var(--an-pink-deep);
  transition: transform .16s ease, filter .2s ease;
}
.bg-indigo-600:hover, .bg-indigo-500:hover, .bg-blue-600:hover, .bg-blue-500:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
}

.border-gray-300 {
  border-color: var(--an-border) !important;
}

.text-indigo-600, .text-blue-600, .text-indigo-500 { color: var(--an-pink-deep) !important; }
.hover\:bg-gray-100:hover, .hover\:bg-gray-200:hover { background: rgba(166, 120, 255, .12) !important; }

/* ---------- 表单 ---------- */
input[type="text"], input[type="email"], input[type="password"], input[type="number"],
input[type="search"], select, textarea {
  background: rgba(255, 255, 255, .82) !important;
  border: 1px solid var(--an-border) !important;
  border-radius: 12px !important;
  color: var(--an-ink) !important;
  transition: box-shadow .18s ease, border-color .18s ease;
}

input:focus, select:focus, textarea:focus {
  border-color: var(--an-pink) !important;
  box-shadow: 0 0 0 4px rgba(255, 126, 182, .2) !important;
  outline: none !important;
}

::placeholder { color: #b3a9c9 !important; }

/* ---------- 表格 ---------- */
table thead th {
  background: linear-gradient(96deg, rgba(255, 126, 182, .14), rgba(166, 120, 255, .12)) !important;
  color: var(--an-ink) !important;
  font-weight: 700;
}
table tbody tr:hover { background: rgba(166, 120, 255, .08) !important; }

/* ---------- 上传区 ---------- */
#drop-zone, .dropzone, .upload-area {
  border: 2px dashed var(--an-border) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .55) !important;
  transition: border-color .2s ease, background .2s ease, transform .2s ease;
}
#drop-zone:hover, .dropzone:hover {
  border-color: var(--an-pink) !important;
  transform: translateY(-2px);
}

/* ---------- 侧边栏 / 用户中心 ---------- */
aside, .sidebar { border-right: 1px solid var(--an-border) !important; }

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, var(--an-pink), var(--an-purple));
  border: 2px solid transparent;
  background-clip: padding-box;
}

/* ---------- 标题 ---------- */
h1, h2, h3 { font-weight: 800; letter-spacing: .02em; }

/* ---------- 品牌字效 ---------- */
.an-brand {
  background: linear-gradient(96deg, var(--an-pink-deep), var(--an-purple) 55%, var(--an-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  font-weight: 900;
  letter-spacing: .06em;
}

/* ---------- 页脚 ---------- */
footer { color: var(--an-ink-soft) !important; }