/* Anime overlay + glass UI (auto-injected)
   - keeps existing layout/functionality
   - improves readability, depth, and dark-mode support
*/

:root{
  /* Watermark */
  --anime-overlay-opacity: 0.50;

  /* Glass tokens (light) */
  --glass-bg: rgba(255,255,255,0.18);
  --glass-bg-strong: rgba(255,255,255,0.28);
  --glass-border: rgba(255,255,255,0.28);
  --glass-shadow: 0 14px 34px rgba(0,0,0,.10);
  --glass-blur: 14px;
  --glass-radius: 12px;

  /* App background */
  --page-grad-1: rgba(255,255,255,.94);
  --page-grad-2: rgba(232,241,255,.94);
  --page-noise-opacity: 0.06;
}

@media (prefers-color-scheme: dark){
  :root{
    /* Glass tokens (dark) */
    --glass-bg: rgba(18,18,24,0.52);
    --glass-bg-strong: rgba(18,18,24,0.64);
    --glass-border: rgba(255,255,255,0.14);
    --glass-shadow: 0 18px 44px rgba(0,0,0,.38);
    --glass-blur: 16px;

    /* App background */
    --page-grad-1: rgba(10,10,14,.92);
    --page-grad-2: rgba(22,28,44,.92);
    --page-noise-opacity: 0.10;
  }
}

/* fixed corner anime watermark */
.anime-overlay{
  position: fixed;
  right: 24px;
  bottom: 0;
  width: 360px;
  height: 560px;
  background: url('/common/anime-overlay.png') no-repeat right bottom;
  background-size: contain;
  opacity: var(--anime-overlay-opacity);
  z-index: 998; /* keep below topmost dialogs if they use 999+ */
  pointer-events: none;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,.18));
}
@media (max-width: 768px){
  .anime-overlay{ right: 12px; width: 240px; height: 380px; opacity: 0.12; }
}

/* Softer page background + subtle noise (no layout impact) */
html, body{ height: 100%; }
body{
  background: linear-gradient(135deg, var(--page-grad-1), var(--page-grad-2)) !important;
}
body::before{
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  opacity: var(--page-noise-opacity);
  /* lightweight noise (no external image dependency) */
  background-image:
    radial-gradient(circle at 25% 20%, rgba(255,255,255,.35) 0 1px, transparent 1px),
    radial-gradient(circle at 70% 65%, rgba(0,0,0,.25) 0 1px, transparent 1px),
    radial-gradient(circle at 40% 80%, rgba(255,255,255,.20) 0 1px, transparent 1px);
  background-size: 140px 140px, 220px 220px, 180px 180px;
  background-position: 0 0, 40px 30px, 90px 70px;
  mix-blend-mode: overlay;
}

/* Glass feel for layui cards/panels */
.layui-card,
.layui-layer,
.layui-table-view,
.layui-form,
.layuiadmin-card-header-auto{
  background: var(--glass-bg) !important;
  border: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(1.15);
  border-radius: var(--glass-radius);
  box-shadow: var(--glass-shadow);
}

/* Gentle lift on hover for cards (visual only) */
.layui-card{
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.layui-card:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 44px rgba(0,0,0,.14);
  background: var(--glass-bg-strong) !important;
}

/* Keep table headers readable */
.layui-table thead tr{
  background: var(--glass-bg-strong) !important;
}

/* Improve text contrast inside glass containers without breaking theme */
.layui-card, .layui-layer, .layui-table-view, .layui-form{
  color: rgba(0,0,0,.82);
}
@media (prefers-color-scheme: dark){
  .layui-card, .layui-layer, .layui-table-view, .layui-form{
    color: rgba(255,255,255,.84);
  }
}