/* ==========================================================
   🌸 全站共享 · 可爱樱花粉风装饰动画
   - 所有页面（首页 / 登录 / 后台 / 插件）由 app.py 自动 <link> 引入
   - 只做视觉美化，不改变布局；背景装饰全部 z-index:-1，不挡交互
   ========================================================== */

:root{
  --se-c1:#ff7aa8; --se-c2:#ffb6d5; --se-c3:#ffe0ee; --se-c4:#fff7fb;
  --se-c5:#ffd1e6; --se-shadow:0 8px 28px rgba(255,122,168,.18);
  --se-shadow-strong:0 18px 48px rgba(255,122,168,.32);
  --se-tw:.38s cubic-bezier(.34,1.56,.64,1);
}

/* ---------- 1) 背景浮动可爱装饰（由 site-effects.js 在 DOM ready 自动创建） ---------- */
.bg-deco{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;}
.bg-deco span{position:absolute;opacity:.55;user-select:none;will-change:transform;}
.bg-deco .s1{top:6%;  left:7%;  font-size:26px;animation:floatY 9s ease-in-out infinite, spinSlow 18s linear infinite;}
.bg-deco .s2{top:20%; left:82%; font-size:30px;animation:floatY 11s ease-in-out .8s infinite reverse, spinSlow 22s linear infinite reverse;}
.bg-deco .s3{top:42%; left:3%;  font-size:22px;animation:floatY 8.5s ease-in-out 1.2s infinite;}
.bg-deco .s4{top:62%; left:92%; font-size:24px;animation:floatY 10s ease-in-out .4s infinite, spinSlow 20s linear infinite;}
.bg-deco .s5{top:78%; left:14%; font-size:28px;animation:floatY 9.5s ease-in-out 1.6s infinite reverse;}
.bg-deco .s6{top:12%; left:58%; font-size:20px;animation:floatY 12s ease-in-out 2.2s infinite;}
.bg-deco .s7{top:88%; left:70%; font-size:23px;animation:floatY 10.5s ease-in-out .6s infinite reverse, spinSlow 24s linear infinite;}
.bg-deco .s8{top:32%; left:38%; font-size:18px;opacity:.4;animation:floatY 11.5s ease-in-out 2.6s infinite;}
.bg-deco .s9{top:54%; left:72%; font-size:22px;opacity:.45;animation:floatY 9.2s ease-in-out 3.2s infinite reverse;}
.bg-deco .s10{top:68%; left:46%; font-size:20px;opacity:.42;animation:floatY 10.8s ease-in-out 1s infinite;}
.bg-deco .s11{top:4%;  left:44%; font-size:16px;opacity:.38;animation:floatY 12.4s ease-in-out 1.8s infinite reverse;}
.bg-deco .s12{top:94%; left:30%; font-size:19px;opacity:.42;animation:floatY 10.2s ease-in-out 3s infinite;}

/* ---------- 2) 标题入场 + 渐变呼吸 ---------- */
h1.title, h2.title, h3.title, .se-title{
  animation: bounceInDown 1s var(--se-tw) both;
}
h1.title, h2.title, h3.title, .se-title, .gradient-text{
  background:linear-gradient(110deg,#ff5d97 0%,#ff9ec4 25%,#ffd1e6 50%,#ff9ec4 75%,#ff5d97 100%);
  background-size:200% 200%;animation:bounceInDown 1s var(--se-tw) both, gradientShift 7s ease-in-out infinite;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  letter-spacing:.5px;
}
.subtitle, .se-subtitle{animation:fadeInUp .8s ease .25s both;color:#c26b90;}

/* ---------- 3) 输入框：弹性 focus + placeholder 柔和呼吸 ---------- */
input[type=text], input[type=password], input[type=url], input[type=search],
input[type=number], input[type=email], textarea, select, .input{
  transition:transform var(--se-tw), box-shadow .5s ease, border-color .5s ease, background-color .5s ease !important;
  will-change:transform;
}
input[type=text]:focus, input[type=password]:focus, input[type=url]:focus,
textarea:focus, select:focus, .input:focus{
  transform:scale(1.012);
  box-shadow:0 0 0 4px rgba(255,182,213,.22), 0 10px 28px rgba(255,122,168,.14) !important;
  animation:haloBreath 3.6s ease-in-out infinite;
  outline:none;
}
input::placeholder, textarea::placeholder{animation:placeholderBlink 3.4s ease-in-out infinite;}

/* ---------- 4) 通用按钮：弹性 hover / active ---------- */
.btn, button, input[type=submit], .pill, a[role=button]{
  transition:transform var(--se-tw), box-shadow var(--se-tw), background var(--se-tw), opacity var(--se-tw), filter var(--se-tw) !important;
  will-change:transform, box-shadow;
}
.btn:hover, button:hover, input[type=submit]:hover, a[role=button]:hover, .pill:hover{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.04);
}
.btn:active, button:active, input[type=submit]:active, .pill:active{
  transform:translateY(1px) scale(.96);
}

/* ---------- 5) 主按钮：粉色渐变 + halo 光晕 + 左右装饰小爱心🌸 ---------- */
.btn-primary, button.primary, input.primary[type=submit]{
  position:relative;overflow:visible;
  background:linear-gradient(135deg,#ff7aa8,#ff9ec4 50%,#ffc6dd);
  background-size:200% 200%;animation:gradientShift 8s ease-in-out infinite;
  box-shadow:var(--se-shadow);
}
.btn-primary:hover, button.primary:hover{
  box-shadow:var(--se-shadow-strong);
  background-position:100% 50%;
}
.btn-primary::before, .btn-primary::after,
button.primary::before, button.primary::after{
  content:"🩷";position:absolute;pointer-events:none;
  top:-10px;left:-8px;font-size:16px;opacity:0;
  transform:translateY(6px) scale(.5) rotate(-20deg);
  transition:all .45s cubic-bezier(.34,1.56,.64,1);
}
.btn-primary::after, button.primary::after{content:"🌸";top:auto;bottom:-12px;left:auto;right:-10px;transform:translateY(-6px) scale(.5) rotate(24deg);}
.btn-primary:hover::before, button.primary:hover::before{opacity:1;transform:translateY(0) scale(1) rotate(-10deg);}
.btn-primary:hover::after,  button.primary:hover::after {opacity:1;transform:translateY(0) scale(1) rotate(18deg);}

/* ---------- 6) 卡片 / 面板：浮上来入场 + 上浮 + 呼吸光晕 ---------- */
.card, .panel, section.panel, .se-card, .login-form, .wrap{
  animation:floatInUp .8s var(--se-tw) both;
  transition:transform var(--se-tw), box-shadow var(--se-tw);
}
.card::before, .panel::before, section.panel::before, .se-card::before, .login-form::before, .wrap::before{
  content:"";position:absolute;inset:-2px;border-radius:inherit;
  background:radial-gradient(420px 180px at 50% -10px, rgba(255,182,213,.35), transparent 65%);
  filter:blur(2px);opacity:.95;pointer-events:none;z-index:-1;animation:haloBreath 6s ease-in-out infinite;
}
.card:hover, .panel:hover, .se-card:hover{transform:translateY(-4px);box-shadow:var(--se-shadow-strong);}

/* ---------- 7) 徽章 / 标签：wiggle 入场 + badgePop hover + 呼吸 ---------- */
.badge, .tag, .pill, .platform-badge{
  display:inline-block;animation:wiggle 2.2s var(--se-tw) .15s both;
}
.badge:hover, .tag:hover, .pill:hover, .platform-badge:hover{animation:badgePop .5s var(--se-tw);}
.tag-soft, .stat-pill{display:inline-flex;align-items:center;gap:6px;animation:tagBreath 3.2s ease-in-out infinite;}

/* ---------- 8) 封面：弹性放大光晕 ---------- */
.cover, img.cover, .video-cover, .song-cover, .se-cover{
  transition:transform var(--se-tw), box-shadow var(--se-tw), border-color var(--se-tw);
  border:2px solid transparent;
}
.cover:hover, .video-cover:hover, .song-cover:hover, .se-cover:hover{
  transform:scale(1.035);
  box-shadow:0 0 0 6px rgba(255,182,213,.18), 0 18px 46px rgba(255,122,168,.28);
  border-color:#ffb6d5;
}

/* ---------- 9) 统计 pill： stagger 入场（每颗延迟 0.05s），自动加 ♡ 前缀 ---------- */
.stats .stat-pill, .pill-row .stat-pill{
  opacity:0;animation:fadeInUp .55s var(--se-tw) forwards;
}
.stats .stat-pill:nth-child(1), .pill-row>:nth-child(1){animation-delay:.02s}
.stats .stat-pill:nth-child(2), .pill-row>:nth-child(2){animation-delay:.07s}
.stats .stat-pill:nth-child(3), .pill-row>:nth-child(3){animation-delay:.12s}
.stats .stat-pill:nth-child(4), .pill-row>:nth-child(4){animation-delay:.17s}
.stats .stat-pill:nth-child(5), .pill-row>:nth-child(5){animation-delay:.22s}
.stats .stat-pill:nth-child(6), .pill-row>:nth-child(6){animation-delay:.27s}
.stat-pill::before{content:"♡";color:#ff7aa8;margin-right:4px;font-weight:700;}

/* ---------- 10) 播放器：呼吸光晕 + 锥形光晕自转 ---------- */
.video-player, .player, audio-player, .audio-shell, .se-player{
  position:relative;overflow:visible;
}
.video-player::before, .player::before, .se-player::before{
  content:"";position:absolute;inset:-6px;border-radius:inherit;
  background:conic-gradient(from 0deg, #ffb6d5, #ffd1e6, #fff7fb, #ffd1e6, #ffb6d5);
  filter:blur(10px);opacity:.55;animation:haloSpin 10s linear infinite;z-index:-1;
}
.video-player::after, .player::after, .se-player::after{
  content:"";position:absolute;inset:0;border-radius:inherit;
  background:radial-gradient(420px 200px at 50% 0%, rgba(255,182,213,.28), transparent 70%);
  pointer-events:none;animation:haloBreath 4s ease-in-out infinite;
}

/* ---------- 11) 错误框：摇晃入场 ---------- */
.error, .error-box, .alert, .alert-danger, .flask-flash.error, .se-error{
  animation:shakeIn .55s var(--se-tw) both;
}

/* ---------- 12) 可爱粒子（sprayHearts 生成） ---------- */
.cute-heart, .cute-particle{
  position:fixed;z-index:99999;pointer-events:none;user-select:none;
  opacity:0;will-change:transform, opacity;
  transform:translate(0,0) scale(.2) rotate(0deg);
  animation:heartBurst .95s ease-out forwards;
}

/* ---------- 13) 歌词显示：上入 → 中显 → 下出（四态）+ mask 上下渐隐 ---------- */
.lyric-wrap{
  position:relative;pointer-events:none;z-index:2;
  min-height:56px;text-align:center;overflow:visible;
  /* 上下边缘自然渐隐，避免黑块覆盖（Experience #428888 教训） */
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 18%, rgba(0,0,0,1) 42%, rgba(0,0,0,1) 60%, rgba(0,0,0,.72) 84%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.72) 18%, rgba(0,0,0,1) 42%, rgba(0,0,0,1) 60%, rgba(0,0,0,.72) 84%, rgba(0,0,0,0) 100%);
}
/* 默认态：所有行先藏在"上方"，淡透明缩小（准备入场，从上方滑入） */
.lyric-line{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) translateY(-28px) scale(.82);
  width:100%;box-sizing:border-box;
  display:flex;align-items:center;justify-content:center;
  padding:4px 14px;
  font-size:15px;line-height:1.55;color:#8c4a6b;
  opacity:0;
  transition:opacity .5s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1), filter .5s ease, color .4s ease;
  letter-spacing:.3px;
  text-shadow:0 2px 10px rgba(255,255,255,.65), 0 0 18px rgba(255,182,213,.22);
  will-change: transform, opacity;
}
/* near-top：上一句（或将要到的上一行）→ 露出在容器上方，半透明小一号 */
.lyric-line.near-top{opacity:.42;transform:translate(-50%,-50%) translateY(-15px) scale(.92);filter:saturate(.95);}
/* active：当前句中央放大加粗 → 中显 */
.lyric-line.active{
  opacity:1;transform:translate(-50%,-50%) translateY(0) scale(1.07);
  color:#c63e7f;font-weight:700;
  filter:drop-shadow(0 4px 10px rgba(255,122,168,.32));
}
/* near-bottom：下一句 → 露出在容器下方，淡透明更小 */
.lyric-line.near-bottom{opacity:.28;transform:translate(-50%,-50%) translateY(+15px) scale(.91);}
/* exiting：旧 active 切出 → 向下飘+缩小+淡出（下出），540ms 后由 JS 清除 */
.lyric-line.exiting{opacity:0;transform:translate(-50%,-50%) translateY(+24px) scale(.86);pointer-events:none;}

/* 向后兼容旧三态名，避免老页面残留调用导致直接空白 */
.lyric-line.prev{opacity:0;transform:translate(-50%,-50%) translateY(+24px) scale(.86);pointer-events:none;}
.lyric-line.near{opacity:.32;transform:translate(-50%,-50%) translateY(-14px) scale(.92);}

/* =====================================================================
   🌸 keyframes（全站共享，避免重复写）
   ===================================================================== */
@keyframes bounceInDown{
  0%  {opacity:0;transform:translateY(-48px) scale(.75);}
  58% {opacity:1;transform:translateY(6px) scale(1.06);}
  78% {transform:translateY(-3px) scale(.985);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes floatInUp{
  0%  {opacity:0;transform:translateY(32px) scale(.97) rotateX(2deg);}
  55% {opacity:1;transform:translateY(-4px) scale(1.01);}
  100%{opacity:1;transform:translateY(0) scale(1);}
}
@keyframes fadeInUp{
  from{opacity:0;transform:translateY(14px);}
  to  {opacity:1;transform:translateY(0);}
}
@keyframes wiggle{
  0%,60%,100%{transform:rotate(0);}
  70% {transform:rotate(-8deg);}
  80% {transform:rotate(6deg);}
  90% {transform:rotate(-3deg);}
}
@keyframes badgePop{
  0% {transform:scale(1);}
  55%{transform:scale(1.16);}
  100%{transform:scale(1);}
}
@keyframes haloBreath{
  0%,100%{opacity:.7; transform:scale(1);}
  50%    {opacity:1;  transform:scale(1.02);}
}
@keyframes haloSpin{to{filter:blur(10px) hue-rotate(8deg); transform:rotate(360deg);}}
@keyframes tagBreath{
  0%,100%{box-shadow:0 0 0 0 rgba(255,182,213,.28);}
  50%    {box-shadow:0 0 0 8px rgba(255,182,213,0);}
}
@keyframes placeholderBlink{
  0%,100%{opacity:.55; filter:hue-rotate(0deg);}
  50%    {opacity:.85; filter:hue-rotate(6deg);}
}
@keyframes shakeIn{
  0%  {opacity:0;transform:translateX(-18px) rotate(-1deg);}
  25% {opacity:1;transform:translateX(10px) rotate(.8deg);}
  50% {transform:translateX(-6px) rotate(-.4deg);}
  75% {transform:translateX(3px) rotate(.2deg);}
  100%{opacity:1;transform:translateX(0) rotate(0);}
}
@keyframes heartBurst{
  0%   {opacity:0;   transform:translate(0,0) scale(.15) rotate(0deg);}
  18%  {opacity:1;   transform:translate(calc(var(--hx)*.18), calc(var(--hy)*.18 + -6px)) scale(.8) rotate(calc(var(--hr)*.25));}
  72%  {opacity:.95; transform:translate(var(--hx), var(--hy)) scale(1) rotate(var(--hr));}
  100% {opacity:0;   transform:translate(var(--hx), calc(var(--hy) + 18px)) scale(.7) rotate(calc(var(--hr) + 18deg));}
}
@keyframes gradientShift{
  0%,100%{background-position:0% 50%;}
  50%    {background-position:100% 50%;}
}
@keyframes floatY{
  0%,100%{transform:translateY(0);}
  50%    {transform:translateY(-20px);}
}
@keyframes spinSlow{to{transform:rotate(360deg);}