/* 🌸 日漫风格 - 专业炫酷版 🌸 */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@300;400;500;700&family=Poppins:wght@400;600;700&display=swap');

/* ===== 全局背景 - 超炫渐变动画 ===== */
body,
#root {
  background:
    linear-gradient(135deg,
      #667eea 0%,
      #764ba2 20%,
      #f093fb 40%,
      #f5576c 60%,
      #ffd89b 80%,
      #667eea 100%) !important;
  background-size: 600% 600% !important;
  animation: gradientFlow 20s ease infinite !important;
  font-family: 'Noto Sans SC', 'Poppins', sans-serif !important;
  position: relative !important;
}

@keyframes gradientFlow {
  0% { background-position: 0% 50%; }
  25% { background-position: 50% 100%; }
  50% { background-position: 100% 50%; }
  75% { background-position: 50% 0%; }
  100% { background-position: 0% 50%; }
}

/* 动态光斑层 */
body::before {
  content: "" !important;
  position: fixed !important;
  inset: 0 !important;
  background:
    radial-gradient(circle at 20% 30%, rgba(255, 192, 203, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(161, 140, 209, 0.35) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(132, 250, 176, 0.25) 0%, transparent 50%) !important;
  pointer-events: none !important;
  z-index: 0 !important;
  animation: orbs 15s ease-in-out infinite !important;
}

@keyframes orbs {
  0%, 100% {
    background:
      radial-gradient(circle at 20% 30%, rgba(255, 192, 203, 0.35) 0%, transparent 50%),
      radial-gradient(circle at 80% 70%, rgba(161, 140, 209, 0.35) 0%, transparent 50%),
      radial-gradient(circle at 50% 50%, rgba(132, 250, 176, 0.25) 0%, transparent 50%);
  }
  33% {
    background:
      radial-gradient(circle at 70% 60%, rgba(255, 192, 203, 0.35) 0%, transparent 50%),
      radial-gradient(circle at 30% 20%, rgba(161, 140, 209, 0.35) 0%, transparent 50%),
      radial-gradient(circle at 60% 80%, rgba(132, 250, 176, 0.25) 0%, transparent 50%);
  }
  66% {
    background:
      radial-gradient(circle at 40% 80%, rgba(255, 192, 203, 0.35) 0%, transparent 50%),
      radial-gradient(circle at 90% 40%, rgba(161, 140, 209, 0.35) 0%, transparent 50%),
      radial-gradient(circle at 20% 60%, rgba(132, 250, 176, 0.25) 0%, transparent 50%);
  }
}

/* 顶部可爱装饰 */
body::after {
  content: "✨ 🌸 💖 ✨ 🌸 💖 ✨ 🌸 💖" !important;
  position: fixed !important;
  top: 20px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  font-size: 22px !important;
  letter-spacing: 28px !important;
  opacity: 0 !important;
  pointer-events: none !important;
  z-index: 10 !important;
  animation: fadeInTwinkle 2s ease-out 0.5s forwards, twinkle 4s ease-in-out 2.5s infinite !important;
}

@keyframes fadeInTwinkle {
  to { opacity: 0.8; }
}

@keyframes twinkle {
  0%, 100% { opacity: 0.8; transform: translateX(-50%) scale(1); }
  50% { opacity: 1; transform: translateX(-50%) scale(1.05); }
}

/* ===== 主容器 ===== */
#root > div {
  background: transparent !important;
  position: relative !important;
  z-index: 2 !important;
}

/* ===== 登录卡片 - 超炫毛玻璃 ===== */
div[class*="MuiPaper-root"]:not([class*="MuiMenu"]):not([class*="MuiPopover"]),
div[class*="MuiCard-root"] {
  background: linear-gradient(145deg,
    rgba(255, 255, 255, 0.3),
    rgba(255, 255, 255, 0.15)) !important;
  backdrop-filter: blur(40px) saturate(200%) !important;
  -webkit-backdrop-filter: blur(40px) saturate(200%) !important;
  border: 2px solid rgba(255, 255, 255, 0.5) !important;
  box-shadow:
    0 8px 32px rgba(255, 154, 158, 0.5),
    0 20px 60px rgba(161, 140, 209, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 -1px 0 rgba(255, 255, 255, 0.2) !important;
  position: relative !important;
  animation: cardEntrance 1s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards,
             cardFloat 8s ease-in-out 1.3s infinite !important;
}

@keyframes cardEntrance {
  from {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes cardFloat {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  25% { transform: translateY(-8px) rotate(0.5deg); }
  50% { transform: translateY(-5px) rotate(0deg); }
  75% { transform: translateY(-8px) rotate(-0.5deg); }
}

/* 卡片顶部光晕 */
div[class*="MuiPaper-root"]:not([class*="MuiMenu"]):not([class*="MuiPopover"])::before,
div[class*="MuiCard-root"]::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: 80% !important;
  height: 3px !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 192, 203, 0.8),
    rgba(161, 140, 209, 0.8),
    transparent) !important;
  filter: blur(8px) !important;
  animation: shimmer 3s ease-in-out infinite !important;
}

@keyframes shimmer {
  0%, 100% { opacity: 0.5; width: 80%; }
  50% { opacity: 1; width: 90%; }
}

/* ===== 标题 - 闪光文字 ===== */
h1, h2, h3, h4, h5, h6,
div[class*="MuiTypography-h"] {
  color: #ffffff !important;
  font-weight: 700 !important;
  background: linear-gradient(135deg,
    #ffffff 0%,
    #ffd4e5 25%,
    #e9d5ff 50%,
    #ffd4e5 75%,
    #ffffff 100%) !important;
  background-size: 200% 200% !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  animation: textShine 4s ease-in-out infinite !important;
  text-shadow: 0 0 20px rgba(255, 192, 203, 0.5) !important;
  letter-spacing: 1px !important;
}

@keyframes textShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ===== 普通文字 ===== */
p, span:not([class*="MuiButton"]), label {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 500 !important;
}

/* ===== 输入框 - 发光效果 ===== */
div[class*="MuiOutlinedInput-root"] {
  background: rgba(255, 255, 255, 0.2) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  position: relative !important;
}

div[class*="MuiOutlinedInput-root"]::before {
  content: "" !important;
  position: absolute !important;
  inset: -2px !important;
  border-radius: inherit !important;
  padding: 2px !important;
  background: linear-gradient(135deg,
    rgba(255, 192, 203, 0.5),
    rgba(161, 140, 209, 0.5)) !important;
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0) !important;
  -webkit-mask-composite: xor !important;
  mask-composite: exclude !important;
  opacity: 0 !important;
  transition: opacity 0.4s ease !important;
}

div[class*="MuiOutlinedInput-root"]:hover {
  background: rgba(255, 255, 255, 0.25) !important;
  transform: translateY(-2px) !important;
}

div[class*="MuiOutlinedInput-root"]:hover::before {
  opacity: 0.6 !important;
}

div[class*="MuiOutlinedInput-root"].Mui-focused {
  background: rgba(255, 255, 255, 0.3) !important;
  box-shadow:
    0 0 0 4px rgba(255, 107, 157, 0.2),
    0 8px 25px rgba(255, 154, 158, 0.4) !important;
  transform: translateY(-3px) !important;
}

div[class*="MuiOutlinedInput-root"].Mui-focused::before {
  opacity: 1 !important;
  animation: borderRotate 3s linear infinite !important;
}

@keyframes borderRotate {
  to {
    background: linear-gradient(495deg,
      rgba(255, 192, 203, 0.5),
      rgba(161, 140, 209, 0.5)) !important;
  }
}

/* 输入框边框 */
fieldset {
  border-color: rgba(255, 255, 255, 0.5) !important;
  border-width: 2px !important;
  transition: all 0.3s ease !important;
}

div[class*="MuiOutlinedInput-root"]:hover fieldset {
  border-color: rgba(255, 255, 255, 0.7) !important;
}

div[class*="MuiOutlinedInput-root"].Mui-focused fieldset {
  border-color: rgba(255, 154, 158, 0.9) !important;
  border-width: 2px !important;
}

/* 输入框文字 */
input {
  color: #ffffff !important;
  font-weight: 500 !important;
}

input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

/* ===== 按钮 - 超炫渐变 ===== */
button[class*="MuiButton-contained"] {
  background: linear-gradient(135deg,
    #ff9a9e 0%,
    #fecfef 50%,
    #feca57 100%) !important;
  background-size: 200% 200% !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  text-transform: none !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) !important;
  box-shadow:
    0 8px 25px rgba(255, 154, 158, 0.5),
    0 4px 10px rgba(255, 107, 157, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.5) !important;
  border: none !important;
  position: relative !important;
  overflow: hidden !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  animation: buttonPulse 3s ease-in-out infinite !important;
}

@keyframes buttonPulse {
  0%, 100% {
    background-position: 0% 50%;
    box-shadow:
      0 8px 25px rgba(255, 154, 158, 0.5),
      0 4px 10px rgba(255, 107, 157, 0.3),
      inset 0 1px 0 rgba(255, 255, 255, 0.5);
  }
  50% {
    background-position: 100% 50%;
    box-shadow:
      0 12px 35px rgba(255, 154, 158, 0.6),
      0 6px 15px rgba(255, 107, 157, 0.4),
      inset 0 1px 0 rgba(255, 255, 255, 0.6);
  }
}

/* 按钮光泽动画 */
button[class*="MuiButton-contained"]::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: -100% !important;
  width: 50% !important;
  height: 100% !important;
  background: linear-gradient(90deg,
    transparent,
    rgba(255, 255, 255, 0.4),
    transparent) !important;
  transform: skewX(-20deg) !important;
  transition: left 0.6s !important;
}

button[class*="MuiButton-contained"]:hover {
  background-position: 100% 50% !important;
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow:
    0 15px 45px rgba(255, 154, 158, 0.6),
    0 8px 20px rgba(255, 107, 157, 0.5),
    inset 0 1px 0 rgba(255, 255, 255, 0.6) !important;
}

button[class*="MuiButton-contained"]:hover::before {
  left: 150% !important;
}

button[class*="MuiButton-contained"]:active {
  transform: translateY(-1px) scale(0.98) !important;
}

/* 次要按钮 */
button[class*="MuiButton-text"],
button[class*="MuiButton-outlined"] {
  color: rgba(255, 255, 255, 0.95) !important;
  border-color: rgba(255, 255, 255, 0.4) !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(10px) !important;
  transition: all 0.3s ease !important;
}

button[class*="MuiButton-text"]:hover,
button[class*="MuiButton-outlined"]:hover {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(255, 255, 255, 0.6) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.2) !important;
}

/* ===== 复选框 ===== */
span[class*="MuiCheckbox-root"] {
  color: rgba(255, 255, 255, 0.8) !important;
  filter: drop-shadow(0 2px 4px rgba(255, 192, 203, 0.3)) !important;
}

span[class*="MuiCheckbox-root"].Mui-checked {
  color: #ff9a9e !important;
  animation: checkBounce 0.5s ease !important;
}

@keyframes checkBounce {
  0% { transform: scale(1); }
  50% { transform: scale(1.2); }
  100% { transform: scale(1); }
}

/* ===== 链接 ===== */
a {
  color: rgba(255, 255, 255, 0.95) !important;
  text-decoration: none !important;
  position: relative !important;
  transition: all 0.3s ease !important;
}

a::after {
  content: "" !important;
  position: absolute !important;
  bottom: -2px !important;
  left: 0 !important;
  width: 0 !important;
  height: 2px !important;
  background: linear-gradient(90deg, #ff9a9e, #fecfef) !important;
  transition: width 0.3s ease !important;
}

a:hover {
  color: #ffffff !important;
}

a:hover::after {
  width: 100% !important;
}

/* ===== 语言按钮 ===== */
button[aria-label*="language"],
button[class*="language"] {
  background: rgba(255, 154, 158, 0.3) !important;
  backdrop-filter: blur(15px) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

/* ===== 头像替换 ===== */
/* 隐藏默认的 SVG 图标 */
div[class*="Avatar"] svg,
div[class*="avatar"] svg {
  display: none !important;
  opacity: 0 !important;
}

/* 替换头像背景 */
div[class*="Avatar"],
div[class*="avatar"] {
  position: relative !important;
  background-image: url('/authelia-skin/avatar.jpg') !important;
  background-size: cover !important;
  background-position: center !important;
  border: 4px solid rgba(255, 255, 255, 0.9) !important;
  box-shadow:
    0 8px 32px rgba(255, 154, 158, 0.6),
    0 0 0 8px rgba(255, 255, 255, 0.3),
    inset 0 2px 8px rgba(0, 0, 0, 0.1) !important;
  overflow: visible !important;
  animation: avatarFloat 6s ease-in-out infinite,
             avatarEntrance 1.2s cubic-bezier(0.34, 1.56, 0.64, 1) backwards !important;
}

/* 头像外环装饰 */
div[class*="Avatar"]::before,
div[class*="avatar"]::before {
  content: "" !important;
  position: absolute !important;
  inset: -10px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg,
    rgba(255, 192, 203, 0.6),
    rgba(161, 140, 209, 0.6),
    rgba(132, 250, 176, 0.6)) !important;
  animation: ringRotate 10s linear infinite !important;
  z-index: -1 !important;
  pointer-events: none !important;
}

@keyframes avatarEntrance {
  from {
    opacity: 0;
    transform: scale(0.3) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

@keyframes avatarFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes ringRotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* 头像悬停效果 */
div[class*="Avatar"]:hover,
div[class*="avatar"]:hover {
  transform: scale(1.1) !important;
  box-shadow:
    0 12px 40px rgba(255, 154, 158, 0.7),
    0 0 0 10px rgba(255, 255, 255, 0.4),
    inset 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

/* ===== Logo 美化 ===== */
img:not([class*="avatar" i]):not([class*="Avatar" i]),
svg:not([class*="avatar" i]):not([class*="Avatar" i]) {
  filter: drop-shadow(0 4px 20px rgba(255, 255, 255, 0.4)) !important;
  animation: logoGlow 3s ease-in-out infinite !important;
}

@keyframes logoGlow {
  0%, 100% { filter: drop-shadow(0 4px 20px rgba(255, 255, 255, 0.4)); }
  50% { filter: drop-shadow(0 6px 30px rgba(255, 192, 203, 0.6)); }
}

/* ===== 提示框 ===== */
div[class*="MuiAlert-error"] {
  background: rgba(239, 68, 68, 0.25) !important;
  border: 2px solid rgba(239, 68, 68, 0.6) !important;
  color: #ffe0e9 !important;
  backdrop-filter: blur(15px) !important;
  border-radius: 12px !important;
}

div[class*="MuiAlert-success"] {
  background: rgba(132, 250, 176, 0.25) !important;
  border: 2px solid rgba(132, 250, 176, 0.6) !important;
  color: #e0ffe9 !important;
  backdrop-filter: blur(15px) !important;
  border-radius: 12px !important;
}

/* ===== 下拉菜单 ===== */
div[class*="MuiMenu-paper"],
div[class*="MuiPopover-paper"] {
  background: rgba(255, 255, 255, 0.25) !important;
  backdrop-filter: blur(30px) !important;
  border: 2px solid rgba(255, 255, 255, 0.4) !important;
  box-shadow: 0 10px 40px rgba(161, 140, 209, 0.3) !important;
  max-height: 60vh !important;
  overflow-y: auto !important;
}

/* 下拉菜单容器 */
div[class*="MuiMenu-list"],
ul[class*="MuiMenu-list"] {
  max-height: inherit !important;
  overflow-y: auto !important;
}

li[class*="MuiMenuItem"] {
  color: #ffffff !important;
  transition: all 0.2s ease !important;
}

li[class*="MuiMenuItem"]:hover {
  background: rgba(255, 154, 158, 0.3) !important;
}

/* ===== 滚动条 ===== */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg,
    rgba(255, 154, 158, 0.6),
    rgba(161, 140, 209, 0.6));
  border-radius: 10px;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg,
    rgba(255, 154, 158, 0.8),
    rgba(161, 140, 209, 0.8));
}

/* ===== 加载动画 ===== */
div[class*="MuiCircularProgress"] {
  color: #ff9a9e !important;
  filter: drop-shadow(0 0 10px rgba(255, 154, 158, 0.6)) !important;
}

/* ===== 表单标签 ===== */
label[class*="MuiFormLabel"],
label[class*="MuiInputLabel"] {
  color: rgba(255, 255, 255, 0.9) !important;
  font-weight: 600 !important;
}

label[class*="MuiInputLabel"].Mui-focused {
  color: #ffffff !important;
  font-weight: 700 !important;
}

/* ===== 选中文字 ===== */
::selection {
  background: rgba(255, 154, 158, 0.4);
  color: white;
}

/* ===== 移动端适配 ===== */
@media (max-width: 640px) {
  body::after {
    font-size: 16px !important;
    letter-spacing: 18px !important;
  }
}