/* ============================================================
   8w8中转 · 二次元萝莉风皮肤 (loli-skin) v2
   通过覆盖层实现，仅作用于首页，不改动前端源码。
   配色：樱花粉 / 薰衣草紫 / 天空蓝 马卡龙渐变
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Baloo+2:wght@500;600;700;800&family=Zen+Maru+Gothic:wght@500;700;900&display=swap');

:root {
  --loli-pink:      #ff9ec7;
  --loli-pink-2:    #ffb3d9;
  --loli-pink-soft: #ffd1e3;
  --loli-lav:       #b8a4f0;
  --loli-lav-soft:  #e4d9ff;
  --loli-blue:      #9ad6ff;
  --loli-blue-soft: #d6f0ff;
  --loli-ink:       #6b4a63;
  --loli-ink-soft:  #a07d97;
  --loli-shadow:    rgba(255, 158, 199, 0.35);
  --loli-shadow-lav:rgba(184, 164, 240, 0.35);
}

/* 只在首页启用 */
body.loli-home {
  font-family: 'Zen Maru Gothic', 'Baloo 2', 'PingFang SC', 'Microsoft YaHei', sans-serif !important;
}

/* ============================================================
   背景：多层马卡龙渐变 + 柔光 + 波点
   ============================================================ */
body.loli-home .relative.flex.min-h-screen {
  background:
    radial-gradient(circle at 15% 18%, var(--loli-pink-soft) 0%, transparent 42%),
    radial-gradient(circle at 85% 12%, var(--loli-lav-soft) 0%, transparent 40%),
    radial-gradient(circle at 78% 88%, var(--loli-blue-soft) 0%, transparent 45%),
    radial-gradient(circle at 20% 92%, var(--loli-pink-soft) 0%, transparent 40%),
    linear-gradient(160deg, #fff6fb 0%, #fdf2ff 48%, #eef7ff 100%) !important;
}
/* 青色光斑 → 粉/紫/蓝柔光球，缓慢呼吸 */
body.loli-home .pointer-events-none.absolute.inset-0 > div {
  filter: blur(72px) !important;
  opacity: 0.5 !important;
  animation: loli-breathe 9s ease-in-out infinite !important;
}
body.loli-home .pointer-events-none.absolute.inset-0 > div:nth-child(1){ background: var(--loli-pink)!important; }
body.loli-home .pointer-events-none.absolute.inset-0 > div:nth-child(2){ background: var(--loli-lav)!important; animation-delay:-2s!important; }
body.loli-home .pointer-events-none.absolute.inset-0 > div:nth-child(3){ background: var(--loli-blue)!important; animation-delay:-4s!important; }
body.loli-home .pointer-events-none.absolute.inset-0 > div:nth-child(4){ background: var(--loli-pink-2)!important; animation-delay:-6s!important; }
/* 网格 → 柔和波点 */
body.loli-home .pointer-events-none.absolute.inset-0 > div:nth-child(5){
  background-image: radial-gradient(rgba(255,158,199,0.16) 2px, transparent 2px) !important;
  background-size: 30px 30px !important;
}
@keyframes loli-breathe {
  0%,100% { transform: scale(1) translateY(0); opacity:.42; }
  50%     { transform: scale(1.18) translateY(-10px); opacity:.58; }
}

/* ============================================================
   Logo：加个可爱描边圈
   ============================================================ */
body.loli-home header .h-10.w-10.rounded-xl {
  border-radius: 9999px !important;
  border: 2.5px solid #fff !important;
  box-shadow: 0 4px 14px var(--loli-shadow) !important;
}

/* ============================================================
   标题：流动渐变彩虹字
   ============================================================ */
body.loli-home h1 {
  font-family: 'Baloo 2', 'Zen Maru Gothic', sans-serif !important;
  font-weight: 800 !important;
  background: linear-gradient(100deg, #ff8bbd, #c9a0ff, #8fd0ff, #ff8bbd) !important;
  background-size: 260% auto !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: .02em !important;
  filter: drop-shadow(0 3px 10px var(--loli-shadow)) !important;
  animation: loli-flow 6s linear infinite !important;
}
@keyframes loli-flow { to { background-position: 260% center; } }
body.loli-home h2, body.loli-home h3 { color: var(--loli-ink) !important; font-weight: 700 !important; }
body.loli-home main > .mx-auto > .mb-12 p { color: var(--loli-ink-soft) !important; }

/* ============================================================
   Header 按钮
   ============================================================ */
body.loli-home header button,
body.loli-home header a { border-radius: 9999px !important; color: var(--loli-ink) !important; }
body.loli-home header button:hover {
  background: var(--loli-pink-soft) !important; color:#e06a9a !important;
}
body.loli-home header a[href="/login"] {
  background: linear-gradient(120deg, var(--loli-pink), var(--loli-lav)) !important;
  color:#fff !important; box-shadow: 0 6px 18px var(--loli-shadow) !important;
  padding: .4rem 1.1rem !important; font-weight: 700 !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s !important;
}
body.loli-home header a[href="/login"]:hover {
  transform: translateY(-2px) scale(1.05);
  box-shadow: 0 10px 24px var(--loli-shadow) !important;
}

/* ============================================================
   CTA 主按钮
   ============================================================ */
body.loli-home .btn-primary {
  position: relative !important; overflow: hidden !important;
  background: linear-gradient(120deg, var(--loli-pink) 0%, var(--loli-lav) 55%, var(--loli-blue) 110%) !important;
  border: none !important; border-radius: 9999px !important;
  color:#fff !important; font-weight: 800 !important; letter-spacing: .03em !important;
  box-shadow: 0 10px 26px var(--loli-shadow) !important;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s !important;
}
body.loli-home .btn-primary::after {
  content:""; position:absolute; top:0; left:-120%; width:60%; height:100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.6), transparent);
  transform: skewX(-20deg); animation: loli-sheen 3.4s ease-in-out infinite;
}
@keyframes loli-sheen { 0%,60%{ left:-120%; } 100%{ left:130%; } }
body.loli-home .btn-primary:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 16px 34px var(--loli-shadow) !important;
}

/* ============================================================
   特性 pill
   ============================================================ */
body.loli-home main .rounded-full.border {
  background: rgba(255,255,255,.72) !important;
  border: 2px solid var(--loli-pink-soft) !important; border-radius: 9999px !important;
  box-shadow: 0 6px 16px rgba(255,158,199,.18) !important;
  backdrop-filter: blur(8px) !important; transition: transform .2s ease, border-color .2s !important;
}
body.loli-home main .rounded-full.border:hover { transform: translateY(-3px) rotate(-1.5deg); border-color: var(--loli-lav) !important; }
body.loli-home main .rounded-full.border span { color: var(--loli-ink) !important; font-weight: 600 !important; }
body.loli-home main .rounded-full.border svg { color: var(--loli-pink) !important; }

/* ============================================================
   特性卡片：玻璃拟态 + 光泽扫过 + 悬浮
   ============================================================ */
body.loli-home .grid .group.rounded-2xl {
  position: relative !important; overflow: hidden !important;
  background: rgba(255,255,255,.55) !important;
  border: 2px solid rgba(255,209,227,.8) !important; border-radius: 28px !important;
  box-shadow: 0 10px 30px rgba(184,164,240,.18) !important;
  backdrop-filter: blur(12px) !important;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s, border-color .3s !important;
}
body.loli-home .grid .group.rounded-2xl::before {
  content:""; position:absolute; top:-60%; left:-120%; width:70%; height:220%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  transform: skewX(-18deg); transition: left .6s ease; pointer-events:none;
}
body.loli-home .grid .group.rounded-2xl:hover::before { left: 130%; }
body.loli-home .grid .group.rounded-2xl:hover {
  transform: translateY(-8px) !important; border-color: var(--loli-lav) !important;
  box-shadow: 0 20px 44px var(--loli-shadow-lav) !important;
}
body.loli-home .grid .group.rounded-2xl p { color: var(--loli-ink-soft) !important; }

/* 卡片图标底座：柔和渐变 + 圆润 + 浮动 */
body.loli-home .grid .group.rounded-2xl > div:first-child { border-radius: 20px !important; animation: loli-float 3.6s ease-in-out infinite !important; }
body.loli-home .grid .group.rounded-2xl:nth-child(1) > div:first-child { background: linear-gradient(135deg, var(--loli-blue), var(--loli-lav)) !important; box-shadow: 0 8px 20px rgba(154,214,255,.5) !important; }
body.loli-home .grid .group.rounded-2xl:nth-child(2) > div:first-child { background: linear-gradient(135deg, var(--loli-pink), var(--loli-pink-2)) !important; box-shadow: 0 8px 20px var(--loli-shadow) !important; animation-delay:.4s !important; }
body.loli-home .grid .group.rounded-2xl:nth-child(3) > div:first-child { background: linear-gradient(135deg, var(--loli-lav), #d0a4ff) !important; box-shadow: 0 8px 20px var(--loli-shadow-lav) !important; animation-delay:.8s !important; }
@keyframes loli-float { 0%,100%{ transform: translateY(0) rotate(-3deg);} 50%{ transform: translateY(-6px) rotate(3deg);} }

/* ============================================================
   终端窗口 → 粉化可爱终端
   ============================================================ */
body.loli-home .terminal-window {
  border-radius: 22px !important; border: 3px solid var(--loli-pink-soft) !important;
  box-shadow: 0 18px 44px var(--loli-shadow-lav) !important; overflow: hidden !important;
}
body.loli-home .terminal-window {
  background: linear-gradient(150deg, #fff0f7, #fce4ff) !important;
  transform: perspective(1000px) rotateX(1deg) rotateY(-2deg) !important;
}
body.loli-home .terminal-header {
  background: linear-gradient(90deg, #ffd8ea, #ffc7e4) !important;
  border-bottom: 1px solid rgba(255,158,199,.35) !important;
}
body.loli-home .terminal-buttons .btn-close    { background:#ff9ec7 !important; }
body.loli-home .terminal-buttons .btn-minimize { background:#ffd98a !important; }
body.loli-home .terminal-buttons .btn-maximize { background:#a6e3c0 !important; }
body.loli-home .terminal-title  { color:#d1568f !important; font-weight:700 !important; }
body.loli-home .terminal-window { width: 420px !important; max-width: 100% !important; }
body.loli-home .terminal-body   {
  background: rgba(255,255,255,.55) !important;
  padding: 20px 24px !important; line-height: 2 !important;
  font-family: ui-monospace, "Fira Code", monospace !important;
}
body.loli-home .code-line { display:flex !important; align-items:center !important; gap:8px !important; flex-wrap:wrap !important; }
body.loli-home .code-prompt   { color:#e06a9a !important; }
body.loli-home .code-cmd      { color:#8a5cc7 !important; }
body.loli-home .code-flag     { color:#c48fe0 !important; }
body.loli-home .code-url      { color:#4aa6d8 !important; }
body.loli-home .code-comment  { color:#b79ab0 !important; }
body.loli-home .code-success  { color:#3fae7d !important; background:#a6e3c033 !important; }
body.loli-home .code-response { color:#e08a3a !important; }
body.loli-home .cursor        { background:#e06a9a !important; }

/* ============================================================
   模型 pill
   ============================================================ */
body.loli-home main .mb-16 > div {
  border-radius: 9999px !important; border: 2px solid var(--loli-lav-soft) !important;
  background: rgba(255,255,255,.75) !important;
  transition: transform .2s ease, border-color .2s, box-shadow .2s !important;
}
body.loli-home main .mb-16 > div:hover {
  transform: translateY(-3px) scale(1.06) rotate(-1.5deg);
  border-color: var(--loli-pink) !important; box-shadow: 0 8px 20px var(--loli-shadow) !important;
}
body.loli-home main .mb-16 .rounded { background: var(--loli-pink-soft) !important; color:#d1568f !important; }

/* ============================================================
   Footer
   ============================================================ */
body.loli-home footer { border-top: 2px dashed var(--loli-pink-soft) !important; }
body.loli-home footer p, body.loli-home footer a { color: var(--loli-ink-soft) !important; }
body.loli-home footer a:hover { color: var(--loli-pink) !important; }

/* ============================================================
   漂浮装饰层：樱花瓣 / 星星 / 爱心
   ============================================================ */
#loli-decor-layer { position: fixed; inset: 0; z-index: 5; pointer-events: none; overflow: hidden; }
.loli-fx {
  position: absolute; top: -6%; will-change: transform;
  animation-name: loli-fall; animation-timing-function: linear; animation-iteration-count: infinite;
}
.loli-fx-star { color:#ffd98a; display:flex; align-items:center; justify-content:center; font-size:14px; filter: drop-shadow(0 0 4px rgba(255,217,138,.8)); }
.loli-fx-heart{ color:#ff9ec7; display:flex; align-items:center; justify-content:center; font-size:14px; }
.loli-fx-star, .loli-fx-heart { line-height:1; }
@keyframes loli-fall {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  100% { transform: translate3d(var(--drift,40px),112vh,0) rotate(var(--spin,420deg)); }
}

/* ============================================================
   看板娘（SVG 萝莉）
   ============================================================ */
#loli-mascot {
  position: fixed; right: 18px; bottom: 10px; z-index: 40;
  display: flex; flex-direction: column; align-items: flex-end; gap: 6px;
  cursor: pointer; user-select: none;
}
#loli-mascot .loli-bubble {
  position: relative; background:#fff; border: 2px solid var(--loli-pink-soft);
  color: var(--loli-ink); font-size: 13px; font-weight: 700; line-height: 1.5;
  padding: 9px 14px; border-radius: 16px 16px 16px 4px;
  box-shadow: 0 8px 20px var(--loli-shadow); white-space: nowrap; max-width: 70vw;
  margin-right: 8px;
}
#loli-mascot .loli-bubble-tail {
  position: absolute; left: 22px; bottom: -9px; width: 14px; height: 14px;
  background:#fff; border-right: 2px solid var(--loli-pink-soft); border-bottom: 2px solid var(--loli-pink-soft);
  transform: rotate(45deg);
}
#loli-mascot .loli-bubble.loli-pop { animation: loli-pop .4s cubic-bezier(.34,1.8,.6,1); }
@keyframes loli-pop { 0%{ transform: scale(.7);} 60%{ transform: scale(1.08);} 100%{ transform: scale(1);} }
#loli-mascot .loli-girl-wrap { animation: loli-idle 4s ease-in-out infinite; }
.loli-girl { display:block; filter: drop-shadow(0 10px 16px var(--loli-shadow-lav)); }
@keyframes loli-idle { 0%,100%{ transform: translateY(0) rotate(-1deg);} 50%{ transform: translateY(-7px) rotate(1deg);} }
.loli-girl.loli-jump { animation: loli-jump .5s ease; }
@keyframes loli-jump { 0%{ transform: translateY(0);} 35%{ transform: translateY(-22px);} 60%{ transform: translateY(-8px);} 100%{ transform: translateY(0);} }
.loli-twin { transform-origin: 50% 74px; }
.loli-twin-l { animation: loli-tail-l 3s ease-in-out infinite; }
.loli-twin-r { animation: loli-tail-r 3s ease-in-out infinite; }
@keyframes loli-tail-l { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(-5deg);} }
@keyframes loli-tail-r { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(5deg);} }
.loli-ahoge { transform-origin: 100px 34px; animation: loli-ahoge 2.4s ease-in-out infinite; }
@keyframes loli-ahoge { 0%,100%{ transform: rotate(0deg);} 50%{ transform: rotate(9deg);} }
.loli-pupil { transition: transform .12s ease-out; }

/* ============================================================
   移动端适配
   ============================================================ */
@media (max-width: 640px) {
  #loli-mascot .loli-girl { width: 104px; height: 125px; }
  #loli-mascot .loli-bubble { font-size: 12px; padding: 7px 11px; }
  #loli-decor-layer { opacity: .7; }
}

/* 尊重减少动效偏好 */
@media (prefers-reduced-motion: reduce) {
  body.loli-home *, .loli-fx, #loli-mascot * { animation: none !important; }
  #loli-decor-layer { display: none !important; }
}

/* ============================================================================
   ============================================================================
   控制台皮肤 (loli-console)
   作用域：body.loli-console —— 登录后的后台。
   原则：数据界面优先可读性，柔和粉紫点缀，不加樱花瓣/看板娘。
   全面适配暗色模式 (html.dark)。
   ============================================================================
   ============================================================================ */

/* ---------- 全局字体 & 主背景 ---------- */
body.loli-console {
  font-family: 'Zen Maru Gothic', 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif !important;
  background:
    radial-gradient(circle at 12% 8%, rgba(255,209,227,.35) 0%, transparent 30%),
    radial-gradient(circle at 90% 4%, rgba(228,217,255,.30) 0%, transparent 28%),
    #fdf5fa !important;
}
html.dark body.loli-console {
  background:
    radial-gradient(circle at 12% 8%, rgba(120,70,110,.25) 0%, transparent 32%),
    radial-gradient(circle at 90% 4%, rgba(90,70,140,.22) 0%, transparent 30%),
    #1a1420 !important;
}

/* ============================================================
   侧边栏
   ============================================================ */
body.loli-console .sidebar {
  background: linear-gradient(180deg, #fff6fb 0%, #fdeef8 100%) !important;
  border-right: 1px solid rgba(255,158,199,.30) !important;
}
html.dark body.loli-console .sidebar {
  background: linear-gradient(180deg, #221a29 0%, #1c1622 100%) !important;
  border-right: 1px solid rgba(184,164,240,.20) !important;
}
body.loli-console .sidebar-header {
  border-bottom: 1px solid rgba(255,158,199,.25) !important;
}
html.dark body.loli-console .sidebar-header { border-bottom: 1px solid rgba(184,164,240,.18) !important; }

/* 侧边栏链接 */
body.loli-console .sidebar-link { color: #7a5670 !important; border-radius: 12px !important; }
html.dark body.loli-console .sidebar-link { color: #d8c4d5 !important; }
body.loli-console .sidebar-link:hover {
  background: rgba(255,158,199,.16) !important; color: #d1568f !important;
}
html.dark body.loli-console .sidebar-link:hover {
  background: rgba(184,164,240,.16) !important; color: #f0d9ff !important;
}
/* 选中态：Vue 会给激活项加 bg-primary-50 / text-primary-600 等类，统一改粉紫渐变 */
body.loli-console .sidebar-link.bg-primary-50,
body.loli-console .sidebar-link.bg-primary-100,
body.loli-console .sidebar-link[class*="bg-primary"],
body.loli-console .sidebar-link.router-link-active,
body.loli-console .sidebar-link.active {
  background: linear-gradient(120deg, var(--loli-pink), var(--loli-lav)) !important;
  color: #fff !important;
  box-shadow: 0 6px 16px var(--loli-shadow) !important;
}
body.loli-console .sidebar-link[class*="bg-primary"] svg,
body.loli-console .sidebar-link.router-link-active svg,
body.loli-console .sidebar-link.active svg { color: #fff !important; }

/* ============================================================
   卡片 / 统计卡
   ============================================================ */
body.loli-console .card,
body.loli-console .stat-card {
  border-radius: 20px !important;
  border: 1px solid rgba(255,158,199,.28) !important;
  background: rgba(255,255,255,.75) !important;
  box-shadow: 0 6px 22px rgba(184,164,240,.14) !important;
  backdrop-filter: blur(6px) !important;
}
html.dark body.loli-console .card,
html.dark body.loli-console .stat-card {
  border: 1px solid rgba(184,164,240,.20) !important;
  background: rgba(40,30,50,.62) !important;
  box-shadow: 0 6px 22px rgba(0,0,0,.28) !important;
}
body.loli-console .card:hover,
body.loli-console .stat-card:hover { border-color: rgba(255,158,199,.5) !important; }

/* 统计卡图标底座 → 柔和粉紫渐变 */
body.loli-console .stat-icon {
  border-radius: 14px !important;
  background: linear-gradient(135deg, var(--loli-pink), var(--loli-lav)) !important;
  color: #fff !important;
}

/* ============================================================
   按钮
   ============================================================ */
body.loli-console .btn-primary {
  background-image: linear-gradient(120deg, var(--loli-pink), var(--loli-lav)) !important;
  border: none !important; border-radius: 12px !important;
  box-shadow: 0 6px 16px var(--loli-shadow) !important;
}
body.loli-console .btn-primary:hover {
  background-image: linear-gradient(120deg, #ff86b8, #a68ee8) !important;
  box-shadow: 0 10px 22px var(--loli-shadow) !important;
}
body.loli-console .btn-secondary {
  border-radius: 12px !important; border-color: rgba(255,158,199,.4) !important;
}
body.loli-console .btn-secondary:hover { background: rgba(255,158,199,.12) !important; }
body.loli-console .btn-ghost { border-radius: 12px !important; }
body.loli-console .btn-ghost:hover { background: rgba(255,158,199,.14) !important; color:#d1568f !important; }
html.dark body.loli-console .btn-ghost:hover { background: rgba(184,164,240,.16) !important; color:#f0d9ff !important; }

/* ============================================================
   徽章
   ============================================================ */
body.loli-console .badge-primary {
  background: rgba(255,158,199,.22) !important; color:#d1568f !important;
}
html.dark body.loli-console .badge-primary { background: rgba(255,158,199,.16) !important; color:#ffb3d9 !important; }

/* ============================================================
   输入框 / 选择框
   ============================================================ */
body.loli-console .input,
body.loli-console input.input,
body.loli-console select,
body.loli-console textarea {
  border-radius: 12px !important;
  border-color: rgba(255,158,199,.4) !important;
}
body.loli-console .input:focus,
body.loli-console select:focus,
body.loli-console textarea:focus {
  border-color: var(--loli-pink) !important;
  box-shadow: 0 0 0 3px rgba(255,158,199,.22) !important;
  outline: none !important;
}
html.dark body.loli-console .input,
html.dark body.loli-console select,
html.dark body.loli-console textarea { border-color: rgba(184,164,240,.3) !important; }

/* ============================================================
   表格 —— 保持清晰可读，仅表头 & 悬停染粉
   ============================================================ */
body.loli-console .table th {
  background: rgba(255,158,199,.12) !important;
  color: #a05683 !important;
  border-bottom: 1px solid rgba(255,158,199,.28) !important;
}
html.dark body.loli-console .table th {
  background: rgba(184,164,240,.12) !important;
  color: #d8b8d0 !important;
  border-bottom: 1px solid rgba(184,164,240,.20) !important;
}
body.loli-console .table tbody tr { transition: background-color .15s ease !important; }
body.loli-console .table tbody tr:hover { background: rgba(255,158,199,.07) !important; }
html.dark body.loli-console .table tbody tr:hover { background: rgba(184,164,240,.09) !important; }

/* ============================================================
   进度条 / 强调元素上的 primary 底色统一微调
   ============================================================ */
body.loli-console [class*="bg-primary-5"],
body.loli-console [class*="bg-primary-6"] {
  background-color: var(--loli-pink) !important;
}
body.loli-console [class*="text-primary-"] { color: #d1568f !important; }
html.dark body.loli-console [class*="text-primary-"] { color: #ffb3d9 !important; }
body.loli-console [class*="ring-primary"] { --tw-ring-color: rgba(255,158,199,.45) !important; }

/* 滚动条美化 */
body.loli-console ::-webkit-scrollbar { width: 10px; height: 10px; }
body.loli-console ::-webkit-scrollbar-thumb {
  background: rgba(255,158,199,.45); border-radius: 9999px; border: 2px solid transparent; background-clip: padding-box;
}
body.loli-console ::-webkit-scrollbar-thumb:hover { background: rgba(255,158,199,.7); background-clip: padding-box; }