/* ============================================
   Liquid Glass 液态玻璃视觉语言（Apple 风格 · 性能校准版）
   原则（对照 Apple 平台规范实践）：
   1. 毛玻璃只用在"大表面"（卡片/侧栏/弹窗/Toast）——
      小控件（按钮/输入框/徽章）不做 backdrop-filter，
      每个滤镜层都要求合成器持续重算，层越多整页越卡；
   2. 背景层保持静止——极光漂移等无限动画会迫使所有玻璃层
      逐帧重算模糊，是"整页抖动"的主要来源；
   3. 动效预算留给有意义的交互（hover/按压/页面切换），
      微交互用轻盈的 ease-out，只在小元素上用弹性曲线。
   ============================================ */
:root {
  --lg-blur: 36px;
  --lg-blur-heavy: 48px;
  --lg-blur-light: 20px;
  --lg-saturation: 160%;
  --lg-opacity: 0.45;
  --lg-opacity-hover: 0.6;
  --lg-opacity-active: 0.75;
  --lg-edge-highlight: rgba(255, 255, 255, 0.7);
  --lg-edge-highlight-soft: rgba(255, 255, 255, 0.35);
  --lg-shadow-ambient: 0 4px 16px rgba(0, 0, 0, 0.08);
  --lg-shadow-float: 0 8px 32px rgba(0, 0, 0, 0.12);
  --lg-shadow-deep: 0 16px 48px rgba(0, 0, 0, 0.16);
  --lg-shadow-hover: 0 16px 48px rgba(0, 0, 0, 0.18);
  --lg-inner-glow: inset 0 1px 1px rgba(255, 255, 255, 0.5);
  --lg-inner-glow-strong: inset 0 1px 2px rgba(255,255,255,0.8), inset 0 -1px 1px rgba(255,255,255,0.25);
  /* Apple 风格曲线：大表面用轻盈 ease-out，小元素才允许弹性 */
  --lg-transition: 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --lg-spring: 0.35s cubic-bezier(0.22, 0.61, 0.36, 1);
  --lg-spring-bounce: 0.45s cubic-bezier(0.34, 1.4, 0.5, 1);
}

/* ---------- 卡片入场动画 ----------
   仅在显式添加 .lg-enter 时播放（页面切换时由 JS 添加后自动移除），
   不能常驻在 .card 上——任何局部重渲染都会让动画重播，视觉上持续脉动 */
@keyframes lg-card-enter {
  0% { opacity: 0; transform: translateY(12px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

.card.lg-enter {
  animation: lg-card-enter 0.4s var(--lg-spring) backwards;
}

/* ---------- 卡片液态玻璃 ---------- */
.card {
  position: relative;
  background: rgba(255, 255, 255, var(--lg-opacity));
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  border: 1px solid var(--lg-edge-highlight-soft);
  box-shadow: var(--lg-shadow-ambient), var(--lg-inner-glow);
  transition: var(--lg-spring);
  overflow: hidden;
}

/* 135° 对角高光层 */
.card::before {
  content: '';
  position: absolute;
  inset: 0;
  height: auto;
  background: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 35%, transparent 65%, rgba(255,255,255,0.15) 100%);
  pointer-events: none;
  opacity: 0.9;
  z-index: 0;
}

/* 鼠标跟随光晕层（由 JS 设置 --mouse-x/--mouse-y） */
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle 250px at var(--mouse-x, 50%) var(--mouse-y, 50%), rgba(255,255,255,0.35), transparent 60%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 0;
}

.card:hover::after {
  opacity: 1;
}

.card > * {
  position: relative;
  z-index: 1;
}

.card:hover {
  background: rgba(255, 255, 255, var(--lg-opacity-hover));
  box-shadow: var(--lg-shadow-hover), var(--lg-inner-glow-strong);
  transform: translateY(-2px);
  border-color: var(--lg-edge-highlight);
}

/* ---------- 按钮 ----------
   小控件不做 backdrop-filter（滤镜层过多会拖垮整页合成），
   用半透明底 + 边缘高光 + 内阴影营造玻璃质感 */
.btn,
.btn-primary,
.btn-secondary,
.btn-ghost {
  position: relative;
  border: 1px solid var(--lg-edge-highlight-soft);
  box-shadow: var(--lg-shadow-ambient), var(--lg-inner-glow);
  transition: var(--lg-spring-bounce);
  overflow: hidden;
}

/* 流光扫过效果（增强） */
.btn::before,
.btn-primary::before,
.btn-secondary::before,
.btn-ghost::before {
  content: '';
  position: absolute;
  top: 0;
  left: -150%;
  width: 150%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
  transition: left 0.7s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: 0;
}

.btn:hover::before,
.btn-primary:hover::before,
.btn-secondary:hover::before,
.btn-ghost:hover::before {
  left: 150%;
}

.btn > *,
.btn-primary > *,
.btn-secondary > *,
.btn-ghost > * {
  position: relative;
  z-index: 1;
}

.btn:hover,
.btn-secondary:hover,
.btn-ghost:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: var(--lg-shadow-float), var(--lg-inner-glow-strong);
  border-color: var(--lg-edge-highlight);
}

.btn:active,
.btn-primary:active,
.btn-secondary:active,
.btn-ghost:active {
  transform: translateY(0) scale(0.96);
  transition: 0.1s ease;
}

/* ---------- 主按钮（Apple 黑色风格） ---------- */
.btn-primary {
  background: rgba(20, 20, 22, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.18);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.25), inset 0 -1px 1px rgba(0, 0, 0, 0.3);
}

.btn-primary:hover {
  background: rgba(30, 30, 32, 0.85);
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), inset 0 1px 2px rgba(255, 255, 255, 0.35), inset 0 -1px 1px rgba(0, 0, 0, 0.4);
}

/* ---------- 侧边栏液态玻璃 ---------- */
.sidebar {
  backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturation));
  -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturation));
  background: rgba(255, 255, 255, 0.5);
  border-right: 1px solid var(--lg-edge-highlight-soft);
}

.nav-item {
  position: relative;
  background: transparent;
  border: 1px solid transparent;
  transition: var(--lg-spring);
  overflow: hidden;
}

.nav-item:hover {
  background: rgba(255, 255, 255, 0.45);
  border-color: var(--lg-edge-highlight-soft);
  box-shadow: var(--lg-shadow-ambient), var(--lg-inner-glow);
  transform: translateX(2px);
}

/* active 静态高亮：不用无限脉冲动画（见文件头原则 2） */
.nav-item.active {
  background: rgba(255, 255, 255, 0.6);
  border-color: var(--lg-edge-highlight);
  box-shadow: var(--lg-shadow-float), var(--lg-inner-glow-strong);
}

/* 退出按钮（红色调，与常规导航区分） */
.nav-item.nav-exit {
  color: var(--color-error, #ff453a);  /* U3: 危险红统一 token */
  margin-top: 6px;
}
.nav-item.nav-exit:hover {
  background: rgba(255, 69, 58, 0.08);
  border-color: rgba(255, 69, 58, 0.25);
}

.nav-item.active::after {
  content: '';
  position: absolute;
  left: 0;
  top: 20%;
  bottom: 20%;
  width: 3px;
  background: linear-gradient(180deg, #0071E3, #5E5CE6);
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(0, 113, 227, 0.5);
}

/* ---------- 移动端顶部栏液态玻璃 ---------- */
.mobile-topbar {
  backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturation));
  -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturation));
  background: rgba(255, 255, 255, 0.6);
  border-bottom: 1px solid var(--lg-edge-highlight-soft);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* ---------- 弹窗液态玻璃 ---------- */
.modal,
.modal-content,
.modal-body {
  backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturation));
  -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturation));
  background: rgba(255, 255, 255, 0.75);
  border: 1px solid var(--lg-edge-highlight);
  box-shadow: var(--lg-shadow-deep), var(--lg-inner-glow-strong);
}

/* ---------- 输入框（不做 backdrop-filter，小控件） ---------- */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
textarea,
select {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--lg-edge-highlight-soft);
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.04);
  transition: var(--lg-transition);
}

input:focus,
textarea:focus,
select:focus {
  background: rgba(255, 255, 255, 0.75);
  border-color: #0071E3;
  box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.18), inset 0 1px 2px rgba(0, 0, 0, 0.04);
}

/* ---------- 向导面板液态玻璃 ---------- */
.wizard-panel {
  backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  -webkit-backdrop-filter: blur(var(--lg-blur)) saturate(var(--lg-saturation));
  background: rgba(255, 255, 255, 0.5);
  border: 1px solid var(--lg-edge-highlight-soft);
  box-shadow: var(--lg-shadow-ambient), var(--lg-inner-glow);
}

/* ---------- Toast 液态玻璃 ---------- */
.toast {
  backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturation));
  -webkit-backdrop-filter: blur(var(--lg-blur-heavy)) saturate(var(--lg-saturation));
  background: rgba(255, 255, 255, 0.8);
  border: 1px solid var(--lg-edge-highlight);
  box-shadow: var(--lg-shadow-float), var(--lg-inner-glow-strong);
}

/* ---------- 标签 / 徽章（小控件，不做 backdrop-filter） ---------- */
.badge,
.tag,
.chip {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid var(--lg-edge-highlight-soft);
  box-shadow: var(--lg-inner-glow);
}

/* ---------- 滚动条 ---------- */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 4px;
}
::-webkit-scrollbar-thumb:hover {
  background: rgba(0, 0, 0, 0.35);
}

/* ---------- 响应式：移动端降低模糊强度 ---------- */
@media (max-width: 768px) {
  :root {
    --lg-blur: 30px;
    --lg-blur-heavy: 40px;
    --lg-blur-light: 15px;
  }
  .card:hover,
  .btn:hover,
  .btn-primary:hover,
  .btn-secondary:hover,
  .btn-ghost:hover {
    transform: none;
  }
  body::before {
    animation: none;
  }
  .nav-item.active {
    animation: none;
  }
}

@media (max-width: 480px) {
  :root {
    --lg-blur: 20px;
    --lg-blur-heavy: 25px;
    --lg-blur-light: 10px;
    --lg-opacity: 0.75;
  }
  .card::before,
  .card::after,
  .btn::before,
  .btn-primary::before,
  .btn-secondary::before,
  .btn-ghost::before {
    display: none;
  }
}

/* ---------- 无障碍：降低透明度偏好 ---------- */
@media (prefers-reduced-transparency: reduce) {
  :root {
    --lg-blur: 0px;
    --lg-blur-heavy: 0px;
    --lg-blur-light: 0px;
    --lg-opacity: 0.95;
    --lg-opacity-hover: 0.98;
  }
  body::before {
    animation: none;
  }
  .card,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .nav-item,
  .modal,
  .modal-content,
  .modal-body,
  .wizard-panel,
  .toast {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* ---------- 无障碍：降低动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
  .card,
  .btn,
  .btn-primary,
  .btn-secondary,
  .btn-ghost,
  .nav-item {
    transition: none;
    animation: none;
  }
  .nav-item.active {
    animation: none;
  }
  .btn::before,
  .btn-primary::before,
  .btn-secondary::before,
  .btn-ghost::before,
  .card::before,
  .card::after {
    display: none;
  }
}