/*
 * 令元 Liquid Glass 选择式视觉系统
 *
 * 默认不再自动套全站按钮/卡片/表单。
 * 只有显式添加 .ly-glass 或 data-liquid-glass 的元素才会获得液态玻璃效果。
 *
 * Examples:
 * <a class="but ly-glass ly-glass-btn">按钮</a>
 * <div class="theme-box ly-glass ly-glass-card">卡片</div>
 * <nav class="navbar-top ly-glass ly-glass-nav">导航</nav>
 * <input class="form-control ly-glass ly-glass-input">
 */

:root {
  --ly-glass-bg: rgba(255, 255, 255, .14);
  --ly-glass-bg-strong: rgba(255, 255, 255, .22);
  --ly-glass-bg-soft: rgba(255, 255, 255, .08);
  --ly-glass-border: rgba(255, 255, 255, .42);
  --ly-glass-border-soft: rgba(255, 255, 255, .22);
  --ly-glass-shadow: 0 18px 50px rgba(8, 13, 26, .16), inset 0 1px 0 rgba(255, 255, 255, .28);
  --ly-glass-shadow-hover: 0 26px 70px rgba(8, 13, 26, .24), inset 0 1px 0 rgba(255, 255, 255, .42);
  --ly-glass-radius: 18px;
  --ly-glass-radius-sm: 12px;
  --ly-glass-radius-lg: 28px;
  --ly-glass-blur: 20px;
  --ly-glass-saturate: 180%;
  --ly-glass-highlight-x: 50%;
  --ly-glass-highlight-y: 0%;
  --ly-glass-text: inherit;
}

body.origin-liquid-glass-enabled {
  min-height: 100vh;
}

/* 基础：只作用在手动标记的元素 */
body.origin-liquid-glass-enabled :where(.ly-glass, [data-liquid-glass]) {
  --ly-glass-highlight-x: 50%;
  --ly-glass-highlight-y: 0%;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--ly-glass-radius) !important;
  border: 1px solid var(--ly-glass-border-soft) !important;
  color: var(--ly-glass-text) !important;
  text-decoration: none !important;
  background:
    radial-gradient(circle at var(--ly-glass-highlight-x) var(--ly-glass-highlight-y), rgba(255,255,255,.54), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.23), rgba(255,255,255,.075)) !important;
  backdrop-filter: blur(var(--ly-glass-blur)) saturate(var(--ly-glass-saturate));
  -webkit-backdrop-filter: blur(var(--ly-glass-blur)) saturate(var(--ly-glass-saturate));
  box-shadow: var(--ly-glass-shadow) !important;
  transform: translateZ(0);
  transition:
    transform .22s cubic-bezier(.2,.8,.2,1),
    box-shadow .22s ease,
    border-color .22s ease,
    background .22s ease,
    opacity .22s ease;
}

/* 开放溢出：用于下拉菜单、父容器等不想裁切子元素的情况 */
body.origin-liquid-glass-enabled :where(.ly-glass-open, [data-liquid-overflow="visible"]) {
  overflow: visible !important;
}

body.origin-liquid-glass-enabled :where(.ly-glass, [data-liquid-glass]):not(input):not(textarea):not(select)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: .82;
  background:
    linear-gradient(120deg, rgba(255,255,255,.44), transparent 30%, transparent 68%, rgba(255,255,255,.18)),
    radial-gradient(circle at var(--ly-glass-highlight-x) var(--ly-glass-highlight-y), rgba(255,255,255,.68), transparent 26%);
  mix-blend-mode: screen;
  transition: opacity .22s ease;
}

body.origin-liquid-glass-enabled :where(.ly-glass, [data-liquid-glass]):not(input):not(textarea):not(select)::after {
  content: "";
  position: absolute;
  inset: 1px;
  z-index: -1;
  pointer-events: none;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.22), transparent 42%, rgba(255,255,255,.10));
}

body.origin-liquid-glass-enabled :where(.ly-glass, [data-liquid-glass]):hover {
  border-color: var(--ly-glass-border) !important;
  box-shadow: var(--ly-glass-shadow-hover) !important;
}

/* 按钮 */
body.origin-liquid-glass-enabled :where(.ly-glass-btn, [data-liquid-glass="button"]) {
  border-radius: var(--ly-glass-radius-sm) !important;
  box-shadow:
    0 10px 30px rgba(8, 13, 26, .13),
    inset 0 1px 0 rgba(255,255,255,.35),
    inset 0 -1px 0 rgba(255,255,255,.08) !important;
}

body.origin-liquid-glass-enabled :where(.ly-glass-btn, [data-liquid-glass="button"]):hover {
  transform: translateY(-1px) scale(1.012);
}

body.origin-liquid-glass-enabled :where(.ly-glass-btn, [data-liquid-glass="button"]):active {
  transform: translateY(0) scale(.985);
}

/* 圆形图标按钮 */
body.origin-liquid-glass-enabled :where(.ly-glass-icon, [data-liquid-glass="icon"]) {
  border-radius: 999px !important;
  aspect-ratio: 1 / 1;
}

/* 卡片 / 面板 */
body.origin-liquid-glass-enabled :where(.ly-glass-card, [data-liquid-glass="card"]) {
  border-radius: var(--ly-glass-radius-lg) !important;
  background:
    radial-gradient(circle at 15% 0%, rgba(255,255,255,.20), transparent 38%),
    linear-gradient(135deg, rgba(255,255,255,.20), rgba(255,255,255,.075)) !important;
}

body.origin-liquid-glass-enabled :where(.ly-glass-panel, [data-liquid-glass="panel"]) {
  border-radius: var(--ly-glass-radius) !important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.18), transparent 42%),
    linear-gradient(135deg, rgba(255,255,255,.17), rgba(255,255,255,.065)) !important;
}

/* 导航条 */
body.origin-liquid-glass-enabled :where(.ly-glass-nav, [data-liquid-glass="nav"]) {
  border-radius: 0 !important;
  background: linear-gradient(135deg, rgba(255,255,255,.24), rgba(255,255,255,.08)) !important;
  box-shadow: 0 14px 50px rgba(10, 17, 34, .12) !important;
}

/* 输入框：必须手动加 ly-glass-input 或 data-liquid-glass="input" */
body.origin-liquid-glass-enabled :where(.ly-glass-input, [data-liquid-glass="input"]) {
  border-radius: var(--ly-glass-radius-sm) !important;
  border: 1px solid rgba(255,255,255,.24) !important;
  background:
    radial-gradient(circle at 20% 0%, rgba(255,255,255,.22), transparent 42%),
    rgba(255,255,255,.10) !important;
  backdrop-filter: blur(16px) saturate(170%);
  -webkit-backdrop-filter: blur(16px) saturate(170%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.26), 0 10px 30px rgba(8,13,26,.08) !important;
}

body.origin-liquid-glass-enabled :where(.ly-glass-input, [data-liquid-glass="input"]):focus {
  border-color: rgba(92, 142, 255, .55) !important;
  box-shadow: 0 0 0 3px rgba(92, 142, 255, .16), inset 0 1px 0 rgba(255,255,255,.30) !important;
  outline: none !important;
}

/* 强弱变体 */
body.origin-liquid-glass-enabled :where(.ly-glass-soft, [data-liquid-strength="soft"]) {
  --ly-glass-bg: rgba(255,255,255,.08);
  --ly-glass-border-soft: rgba(255,255,255,.16);
  --ly-glass-blur: 14px;
  background:
    radial-gradient(circle at var(--ly-glass-highlight-x) var(--ly-glass-highlight-y), rgba(255,255,255,.32), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.14), rgba(255,255,255,.05)) !important;
}

body.origin-liquid-glass-enabled :where(.ly-glass-strong, [data-liquid-strength="strong"]) {
  --ly-glass-bg: rgba(255,255,255,.22);
  --ly-glass-border-soft: rgba(255,255,255,.30);
  --ly-glass-blur: 26px;
  background:
    radial-gradient(circle at var(--ly-glass-highlight-x) var(--ly-glass-highlight-y), rgba(255,255,255,.64), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.30), rgba(255,255,255,.10)) !important;
}

/* 颜色变体：只在手动加类时生效 */
body.origin-liquid-glass-enabled :where(.ly-glass-blue, [data-liquid-color="blue"]) {
  color: #fff !important;
  background:
    radial-gradient(circle at var(--ly-glass-highlight-x) var(--ly-glass-highlight-y), rgba(255,255,255,.55), transparent 35%),
    linear-gradient(135deg, rgba(86,129,255,.66), rgba(86,129,255,.22)) !important;
}

body.origin-liquid-glass-enabled :where(.ly-glass-green, [data-liquid-color="green"]) {
  color: #fff !important;
  background:
    radial-gradient(circle at var(--ly-glass-highlight-x) var(--ly-glass-highlight-y), rgba(255,255,255,.52), transparent 35%),
    linear-gradient(135deg, rgba(40,206,148,.62), rgba(40,206,148,.20)) !important;
}

body.origin-liquid-glass-enabled :where(.ly-glass-red, [data-liquid-color="red"]) {
  color: #fff !important;
  background:
    radial-gradient(circle at var(--ly-glass-highlight-x) var(--ly-glass-highlight-y), rgba(255,255,255,.52), transparent 35%),
    linear-gradient(135deg, rgba(255,91,117,.64), rgba(255,91,117,.20)) !important;
}

body.origin-liquid-glass-enabled :where(.ly-glass-yellow, [data-liquid-color="yellow"]) {
  color: #fff !important;
  background:
    radial-gradient(circle at var(--ly-glass-highlight-x) var(--ly-glass-highlight-y), rgba(255,255,255,.50), transparent 35%),
    linear-gradient(135deg, rgba(255,190,86,.65), rgba(255,190,86,.22)) !important;
}

/* 背景网格/光斑也改成选择式，需要时给 body 或外层容器加 ly-glass-page-bg */
body.origin-liquid-glass-enabled :where(.ly-glass-page-bg, [data-liquid-glass="page-bg"]) {
  background:
    radial-gradient(circle at 12% 8%, rgba(88, 116, 255, .14), transparent 34vw),
    radial-gradient(circle at 90% 14%, rgba(95, 229, 214, .12), transparent 32vw),
    radial-gradient(circle at 50% 100%, rgba(255, 255, 255, .08), transparent 42vw),
    var(--body-bg, #f6f8fb) !important;
}

/* 深色模式下只影响手动标记的元素 */
body.dark-theme.origin-liquid-glass-enabled,
body.dark.origin-liquid-glass-enabled,
body.night.origin-liquid-glass-enabled {
  --ly-glass-bg: rgba(10, 14, 24, .42);
  --ly-glass-bg-strong: rgba(18, 24, 38, .58);
  --ly-glass-bg-soft: rgba(10, 14, 24, .26);
  --ly-glass-border: rgba(255, 255, 255, .24);
  --ly-glass-border-soft: rgba(255, 255, 255, .14);
}

body.dark-theme.origin-liquid-glass-enabled :where(.ly-glass-card, .ly-glass-panel, [data-liquid-glass="card"], [data-liquid-glass="panel"]),
body.dark.origin-liquid-glass-enabled :where(.ly-glass-card, .ly-glass-panel, [data-liquid-glass="card"], [data-liquid-glass="panel"]),
body.night.origin-liquid-glass-enabled :where(.ly-glass-card, .ly-glass-panel, [data-liquid-glass="card"], [data-liquid-glass="panel"]) {
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.14), transparent 38%),
    linear-gradient(135deg, rgba(20,26,42,.72), rgba(10,14,24,.42)) !important;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  body.origin-liquid-glass-enabled :where(.ly-glass, [data-liquid-glass]) {
    background: rgba(255,255,255,.92) !important;
  }
}

@media (max-width: 768px) {
  :root {
    --ly-glass-blur: 14px;
    --ly-glass-radius: 15px;
  }

  body.origin-liquid-glass-enabled :where(.ly-glass-btn, [data-liquid-glass="button"]):hover {
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.origin-liquid-glass-enabled :where(.ly-glass, [data-liquid-glass]),
  body.origin-liquid-glass-enabled :where(.ly-glass, [data-liquid-glass])::before,
  body.origin-liquid-glass-enabled :where(.ly-glass, [data-liquid-glass])::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}