/**
 * Douliu Visual Layer — 液态玻璃 / 浅入浅出 / 克制动效
 * 仅叠加视觉，不改布局语义与交互行为。
 */
:root {
  --dl-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --dl-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dl-ease-soft: cubic-bezier(0.33, 0.1, 0.15, 1);
  --dl-ease-silk: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dl-dur: 0.7s;
  --dl-dur-fast: 0.28s;
  --dl-dur-enter: 0.92s;
  --dl-dur-leave: 0.26s;
  --dl-stagger: 0.08s;
  --dl-glass: rgba(255, 255, 255, 0.62);
  --dl-glass-strong: rgba(255, 255, 255, 0.78);
  --dl-glass-dark: rgba(15, 26, 46, 0.72);
  --dl-glass-border: rgba(255, 255, 255, 0.45);
  --dl-glass-border-dark: rgba(255, 255, 255, 0.12);
  --dl-blur: 18px;
  --dl-blur-strong: 28px;
  --dl-shadow: 0 8px 32px rgba(15, 26, 46, 0.08);
  --dl-shadow-hover: 0 14px 40px rgba(15, 26, 46, 0.12);
  --dl-ink: #13233f;
  --dl-accent: #2f6fed;
  --dl-ambient-a: #e8eef8;
  --dl-ambient-b: #f3f6fb;
  --dl-ambient-c: #e4ecf7;
}

/* —— 全局平滑 —— */
html {
  scroll-behavior: smooth;
}
body {
  background:
    radial-gradient(1200px 600px at 12% -10%, rgba(77, 163, 255, 0.14), transparent 55%),
    radial-gradient(900px 500px at 88% 0%, rgba(47, 111, 237, 0.08), transparent 50%),
    linear-gradient(180deg, var(--dl-ambient-b) 0%, var(--dl-ambient-a) 48%, var(--dl-ambient-c) 100%);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
}
body.dl-ready {
  animation: dl-page-in 0.7s var(--dl-ease-silk) both;
}

@keyframes dl-page-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
/* 入场仅用透明度 + 整像素位移，禁止 scale/filter，避免文字发糊 */
@keyframes dl-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dl-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dl-scale-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dl-shell-in {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes dl-pane-in-next {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes dl-pane-in-prev {
  from { opacity: 0; transform: translateX(-18px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes dl-cascade {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes dl-cascade-alt {
  from { opacity: 0; transform: translate(10px, 12px); }
  to { opacity: 1; transform: translate(0, 0); }
}
@keyframes dl-title-reveal {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
@keyframes dl-underline {
  from { transform: scaleX(0); opacity: 0; }
  to { transform: scaleX(1); opacity: 1; }
}
@keyframes dl-ink-bar {
  from { transform: scaleY(0); opacity: 0; }
  to { transform: scaleY(1); opacity: 1; }
}
@keyframes dl-press-pop {
  0% { transform: translateY(0); }
  45% { transform: translateY(1px); }
  100% { transform: translateY(0); }
}
@keyframes dl-soft-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}
@keyframes dl-shimmer {
  0% { background-position: 0% 50%; }
  100% { background-position: 100% 50%; }
}

/* —— 液态玻璃工具类 —— */
.dl-glass {
  background: var(--dl-glass);
  -webkit-backdrop-filter: saturate(1.35) blur(var(--dl-blur));
  backdrop-filter: saturate(1.35) blur(var(--dl-blur));
  border: 1px solid var(--dl-glass-border);
  box-shadow: var(--dl-shadow);
}
.dl-enter {
  animation: dl-cascade var(--dl-dur-enter) var(--dl-ease-silk) both;
}
.dl-enter-stagger > *:nth-child(odd) {
  animation: dl-cascade var(--dl-dur-enter) var(--dl-ease-silk) both;
}
.dl-enter-stagger > *:nth-child(even) {
  animation: dl-cascade-alt var(--dl-dur-enter) var(--dl-ease-silk) both;
}
.dl-enter-stagger > *:nth-child(1) { animation-delay: 0.05s; }
.dl-enter-stagger > *:nth-child(2) { animation-delay: 0.12s; }
.dl-enter-stagger > *:nth-child(3) { animation-delay: 0.19s; }
.dl-enter-stagger > *:nth-child(4) { animation-delay: 0.26s; }
.dl-enter-stagger > *:nth-child(5) { animation-delay: 0.33s; }
.dl-enter-stagger > *:nth-child(6) { animation-delay: 0.4s; }
.dl-enter-stagger > *:nth-child(7) { animation-delay: 0.47s; }
.dl-enter-stagger > *:nth-child(8) { animation-delay: 0.54s; }

/* —— 登录 / 注册（分栏 + 液态玻璃） —— */
body.auth-page {
  background: #eef3fa !important;
  animation: none;
}
body.auth-page.dl-ready {
  animation: dl-page-in 0.55s var(--dl-ease-silk) both;
}

.auth-shell.login-container,
.login-container {
  position: relative;
  overflow: hidden;
  background: transparent !important;
}
.login-container::before {
  display: none;
}

.auth-brand {
  animation: dl-fade-in 0.7s var(--dl-ease-silk) both;
}
.auth-logo {
  animation: dl-fade-up 0.85s var(--dl-ease-silk) both;
}
.auth-brand-name,
.auth-brand-desc {
  animation: dl-fade-up 0.85s var(--dl-ease-silk) both;
  animation-delay: 0.08s;
}

.auth-stage {
  animation: dl-fade-in 0.6s var(--dl-ease-silk) both;
}

.auth-card,
.login-card {
  position: relative;
  z-index: 1;
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(1.35) blur(22px);
  backdrop-filter: saturate(1.35) blur(22px);
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  border-radius: 14px !important;
  box-shadow:
    0 20px 50px rgba(19, 42, 77, 0.12),
    inset 0 1px 0 rgba(255, 255, 255, 0.75) !important;
  animation: dl-scale-in 0.7s var(--dl-ease-silk) both;
}

.login-form input[type="text"],
.login-form input[type="password"],
.login-form input[type="email"] {
  background: rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(19, 35, 63, 0.12) !important;
  border-radius: 10px !important;
  transition:
    border-color var(--dl-dur-fast) var(--dl-ease),
    box-shadow var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease) !important;
}
.login-form input:focus {
  background: rgba(255, 255, 255, 0.96) !important;
  border-color: rgba(47, 111, 237, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12) !important;
}

.login-form .btn-primary,
.login-card .btn-primary,
.auth-submit.btn-primary {
  border-radius: 10px !important;
  transition:
    transform var(--dl-dur-fast) var(--dl-ease),
    box-shadow var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease) !important;
  box-shadow: 0 8px 20px rgba(22, 58, 107, 0.24);
}
.login-form .btn-primary:hover,
.login-card .btn-primary:hover,
.auth-submit.btn-primary:hover {
  transform: translateY(-1px);
  filter: none;
  box-shadow: 0 12px 26px rgba(22, 58, 107, 0.3);
}
.login-form .btn-primary:active,
.login-card .btn-primary:active,
.auth-submit.btn-primary:active {
  transform: translateY(0);
}

.auth-switch {
  animation: dl-fade-up 0.75s var(--dl-ease-silk) both;
  animation-delay: 0.12s;
}

.error-msg,
.success-msg {
  animation: dl-fade-up 0.55s var(--dl-ease-silk) both;
  border-radius: 10px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* —— 顶栏液态玻璃 —— */
.top-nav {
  background: var(--dl-glass-dark) !important;
  -webkit-backdrop-filter: saturate(1.45) blur(22px);
  backdrop-filter: saturate(1.45) blur(22px);
  border-bottom: 1px solid var(--dl-glass-border-dark);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
}
.top-nav-menu .nav-item {
  position: relative;
  border-radius: 10px !important;
  transition:
    color var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease),
    transform var(--dl-dur-fast) var(--dl-ease) !important;
}
.top-nav-menu .nav-item:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  transform: translateY(-1px);
}
.top-nav-menu .nav-item.active {
  background: rgba(255, 255, 255, 0.16) !important;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
}
.top-nav-menu .nav-item.active::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 4px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #4da3ff, rgba(77, 163, 255, 0.2));
  transform-origin: center;
  animation: dl-underline 0.55s var(--dl-ease-soft) both;
}
.user-balance {
  background: rgba(255, 214, 102, 0.12) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 8px !important;
  transition: transform var(--dl-dur-fast) var(--dl-ease), box-shadow var(--dl-dur-fast) var(--dl-ease);
}
.user-balance:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(255, 214, 102, 0.12);
}
.top-nav .btn-recharge {
  color: #f4f8ff !important;
  -webkit-text-fill-color: #f4f8ff !important;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.3) 0%,
    rgba(77, 163, 255, 0.24) 50%,
    rgba(47, 111, 237, 0.3) 100%
  ) !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
  border-radius: 10px !important;
  -webkit-backdrop-filter: saturate(1.4) blur(14px) !important;
  backdrop-filter: saturate(1.4) blur(14px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.48),
    0 4px 14px rgba(47, 111, 237, 0.18) !important;
  transition:
    color var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease),
    border-color var(--dl-dur-fast) var(--dl-ease),
    box-shadow var(--dl-dur-fast) var(--dl-ease) !important;
}
.top-nav .btn-recharge:hover {
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.42) 0%,
    rgba(77, 163, 255, 0.34) 50%,
    rgba(47, 111, 237, 0.4) 100%
  ) !important;
  border-color: rgba(255, 255, 255, 0.58) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.58),
    0 6px 18px rgba(47, 111, 237, 0.24) !important;
}
.top-nav .btn-recharge:active {
  background: linear-gradient(
    160deg,
    rgba(255, 255, 255, 0.22) 0%,
    rgba(47, 111, 237, 0.32) 100%
  ) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.32),
    0 2px 8px rgba(47, 111, 237, 0.14) !important;
}
.user-avatar {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.18);
  transition: transform var(--dl-dur-fast) var(--dl-ease);
}
.user-avatar:hover {
  transform: scale(1.05);
}
.top-nav .btn-outline {
  border-radius: 8px !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition:
    color var(--dl-dur-fast) var(--dl-ease),
    border-color var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease),
    transform var(--dl-dur-fast) var(--dl-ease) !important;
}
.top-nav .btn-outline:hover {
  background: rgba(255, 255, 255, 0.08);
  transform: translateY(-1px);
}

/* —— 侧栏 —— */
.side-nav {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(1.3) blur(var(--dl-blur));
  backdrop-filter: saturate(1.3) blur(var(--dl-blur));
  border-right: 1px solid rgba(19, 35, 63, 0.06) !important;
  box-shadow: 4px 0 24px rgba(15, 26, 46, 0.03);
}
.side-menu-group.active {
  animation: dl-fade-in 0.65s var(--dl-ease-silk) both;
}
.side-menu-item {
  position: relative;
  border-radius: 0 10px 10px 0;
  margin-right: 8px;
  transition:
    color var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease),
    border-color var(--dl-dur-fast) var(--dl-ease),
    transform var(--dl-dur-fast) var(--dl-ease),
    padding-left var(--dl-dur-fast) var(--dl-ease) !important;
}
.side-menu-item:hover {
  transform: translateX(3px);
  background: rgba(47, 111, 237, 0.06) !important;
}
.side-menu-item.active {
  background: rgba(47, 111, 237, 0.1) !important;
  box-shadow: inset 0 0 0 1px rgba(47, 111, 237, 0.08);
  border-left-color: transparent !important;
}
.side-menu-item.active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--dl-accent);
  transform-origin: center top;
  animation: dl-ink-bar 0.45s var(--dl-ease-soft) both;
}
.side-menu-badge {
  transition: transform var(--dl-dur-fast) var(--dl-ease);
  box-shadow: 0 2px 8px rgba(245, 34, 45, 0.35);
}
.side-menu-item:hover .side-menu-badge {
  transform: scale(1.06);
}

/* —— 内容区：方向性切换（无模糊过渡） —— */
.content-area {
  background: transparent !important;
}
.content-header h2 {
  position: relative;
  display: inline-block;
  letter-spacing: 0.02em;
  padding-bottom: 6px;
}
.content-header h2.dl-enter {
  animation: dl-title-reveal 0.7s var(--dl-ease-silk) both;
}
.content-header h2.dl-enter::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, var(--dl-accent), rgba(77, 163, 255, 0.15));
  transform-origin: left center;
  animation: dl-underline 0.75s var(--dl-ease-silk) 0.08s both;
}
.content-body {
  background: var(--dl-glass-strong) !important;
  -webkit-backdrop-filter: saturate(1.25) blur(var(--dl-blur));
  backdrop-filter: saturate(1.25) blur(var(--dl-blur));
  border: 1px solid rgba(255, 255, 255, 0.65);
  border-radius: 16px !important;
  box-shadow: var(--dl-shadow);
  transition:
    box-shadow var(--dl-dur) var(--dl-ease),
    opacity var(--dl-dur-leave) var(--dl-ease-silk);
}
/* 切换瞬间关闭毛玻璃合成，避免文字“糊一下再清晰” */
.content-body.dl-pane-leave,
.content-body.dl-pane-enter {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background: rgba(255, 255, 255, 0.96) !important;
}
.content-body.dl-pane-leave {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dl-dur-leave) var(--dl-ease-silk);
}
.content-body.dl-pane-leave.dl-dir-next,
.content-body.dl-pane-leave.dl-dir-prev {
  transform: none;
}
/* 外壳只做淡入；位移交给子元素，避免整层变换导致字体栅格发糊 */
.content-body.dl-pane-enter.dl-dir-next,
.content-body.dl-pane-enter.dl-dir-prev,
.content-body.dl-pane-enter:not(.dl-dir-next):not(.dl-dir-prev) {
  animation: dl-shell-in 0.45s var(--dl-ease-silk) both;
}
.content-body.dl-pane-enter > * {
  animation: dl-cascade var(--dl-dur-enter) var(--dl-ease-silk) both;
}
.content-body.dl-pane-enter.dl-dir-next > * {
  animation-name: dl-pane-in-next;
}
.content-body.dl-pane-enter.dl-dir-prev > * {
  animation-name: dl-pane-in-prev;
}
.content-body.dl-pane-enter .ov-stats > *:nth-child(odd),
.content-body.dl-pane-enter .ov-shortcut-grid > *:nth-child(odd),
.content-body.dl-pane-enter .mall-grid > *:nth-child(odd),
.content-body.dl-pane-enter .announce-list > *:nth-child(odd) {
  animation: dl-cascade var(--dl-dur-enter) var(--dl-ease-silk) both;
}
.content-body.dl-pane-enter .ov-stats > *:nth-child(even),
.content-body.dl-pane-enter .ov-shortcut-grid > *:nth-child(even),
.content-body.dl-pane-enter .mall-grid > *:nth-child(even),
.content-body.dl-pane-enter .announce-list > *:nth-child(even) {
  animation: dl-cascade-alt var(--dl-dur-enter) var(--dl-ease-silk) both;
}
.content-body.dl-pane-enter .ov-stats > *:nth-child(1),
.content-body.dl-pane-enter .ov-shortcut-grid > *:nth-child(1),
.content-body.dl-pane-enter .mall-grid > *:nth-child(1),
.content-body.dl-pane-enter .announce-list > *:nth-child(1) { animation-delay: 0.06s; }
.content-body.dl-pane-enter .ov-stats > *:nth-child(2),
.content-body.dl-pane-enter .ov-shortcut-grid > *:nth-child(2),
.content-body.dl-pane-enter .mall-grid > *:nth-child(2),
.content-body.dl-pane-enter .announce-list > *:nth-child(2) { animation-delay: 0.12s; }
.content-body.dl-pane-enter .ov-stats > *:nth-child(3),
.content-body.dl-pane-enter .ov-shortcut-grid > *:nth-child(3),
.content-body.dl-pane-enter .mall-grid > *:nth-child(3),
.content-body.dl-pane-enter .announce-list > *:nth-child(3) { animation-delay: 0.18s; }
.content-body.dl-pane-enter .ov-stats > *:nth-child(4),
.content-body.dl-pane-enter .ov-shortcut-grid > *:nth-child(4),
.content-body.dl-pane-enter .mall-grid > *:nth-child(4),
.content-body.dl-pane-enter .announce-list > *:nth-child(4) { animation-delay: 0.24s; }
.content-body.dl-pane-enter .ov-stats > *:nth-child(5),
.content-body.dl-pane-enter .ov-shortcut-grid > *:nth-child(5),
.content-body.dl-pane-enter .mall-grid > *:nth-child(5),
.content-body.dl-pane-enter .announce-list > *:nth-child(5) { animation-delay: 0.3s; }
.content-body.dl-pane-enter .ov-stats > *:nth-child(6),
.content-body.dl-pane-enter .ov-shortcut-grid > *:nth-child(6),
.content-body.dl-pane-enter .mall-grid > *:nth-child(6),
.content-body.dl-pane-enter .announce-list > *:nth-child(6) { animation-delay: 0.36s; }
.content-body.dl-pane-enter .ov-stats > *:nth-child(n+7),
.content-body.dl-pane-enter .ov-shortcut-grid > *:nth-child(n+7),
.content-body.dl-pane-enter .mall-grid > *:nth-child(n+7),
.content-body.dl-pane-enter .announce-list > *:nth-child(n+7) { animation-delay: 0.42s; }

/* —— 概览 / 卡片 —— */
.ov-hero {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.82), rgba(244, 248, 255, 0.7)),
    linear-gradient(120deg, rgba(220, 232, 255, 0.55) 0%, rgba(238, 245, 255, 0.4) 100%) !important;
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
  backdrop-filter: saturate(1.3) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7) !important;
  box-shadow: var(--dl-shadow);
  transition: transform var(--dl-dur) var(--dl-ease), box-shadow var(--dl-dur) var(--dl-ease);
}
.ov-hero:hover {
  box-shadow: var(--dl-shadow-hover);
}
.ov-card,
.ov-panel,
.ov-shortcut,
.stat-card,
.announce-card,
.settings-feature-item,
.va-hero,
.mall-card,
.dt-card,
.uo-card,
.om-card,
.pm-card,
.chat-panel,
.msg-thread-item {
  transition:
    transform var(--dl-dur) var(--dl-ease),
    box-shadow var(--dl-dur) var(--dl-ease),
    border-color var(--dl-dur) var(--dl-ease),
    background var(--dl-dur) var(--dl-ease) !important;
}
.ov-card,
.stat-card,
.announce-card,
.settings-feature-item {
  background: rgba(255, 255, 255, 0.72) !important;
  -webkit-backdrop-filter: saturate(1.2) blur(12px);
  backdrop-filter: saturate(1.2) blur(12px);
  border-color: rgba(19, 35, 63, 0.07) !important;
  box-shadow: 0 4px 18px rgba(15, 26, 46, 0.04);
}
.ov-card:hover,
.stat-card:hover,
.announce-card:hover,
.settings-feature-item:hover,
.ov-shortcut:hover {
  transform: translateY(-3px);
  box-shadow: var(--dl-shadow-hover) !important;
  border-color: rgba(47, 111, 237, 0.18) !important;
}
.ov-panel {
  background: rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border-radius: 14px;
  border: 1px solid rgba(19, 35, 63, 0.06);
  box-shadow: 0 4px 18px rgba(15, 26, 46, 0.04);
}
.ov-chip {
  background: rgba(255, 255, 255, 0.75) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: transform var(--dl-dur-fast) var(--dl-ease);
}
.ov-chip:hover {
  transform: translateY(-1px);
}
.ov-shortcut {
  background: rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(19, 35, 63, 0.06);
  border-radius: 12px;
}
.ov-recent-item {
  transition:
    transform var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease),
    border-color var(--dl-dur-fast) var(--dl-ease) !important;
}
.ov-recent-item:hover {
  transform: translateX(3px);
}

/* —— 视频分析 —— */
.va-hero {
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.85), rgba(238, 245, 255, 0.65)) !important;
  -webkit-backdrop-filter: saturate(1.25) blur(14px);
  backdrop-filter: saturate(1.25) blur(14px);
  border: 1px solid rgba(255, 255, 255, 0.7);
  box-shadow: var(--dl-shadow);
  border-radius: 14px;
}
.va-tab {
  transition:
    color var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease),
    transform var(--dl-dur-fast) var(--dl-ease) !important;
}
.va-tab:hover:not(:disabled) {
  transform: translateY(-1px);
}
.va-tab.active {
  box-shadow: 0 2px 10px rgba(26, 115, 232, 0.15);
}
.va-tab-panel.active {
  animation: dl-fade-up var(--dl-dur-enter) var(--dl-ease-silk) both;
}
.va-pipe-step {
  transition: color var(--dl-dur-fast) var(--dl-ease), transform var(--dl-dur-fast) var(--dl-ease);
}
.va-pipe-step.active {
  transform: translateY(-1px);
}
.va-pipe-dot {
  transition: background var(--dl-dur-fast) var(--dl-ease), box-shadow var(--dl-dur-fast) var(--dl-ease);
}
.va-pipe-step.active .va-pipe-dot {
  box-shadow: 0 0 0 4px rgba(26, 115, 232, 0.15);
}

/* —— 商城卡片 —— */
.mall-grid .mall-card,
.traffic-mall .mall-card,
#contentBody .mall-card {
  background: rgba(255, 255, 255, 0.74) !important;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(19, 35, 63, 0.07);
  box-shadow: 0 4px 18px rgba(15, 26, 46, 0.04);
  border-radius: 14px;
}
#contentBody .mall-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--dl-shadow-hover);
}

/* —— 表格 —— */
.content-body table,
#contentBody table {
  border-collapse: separate;
  border-spacing: 0;
}
.content-body table thead th,
#contentBody table thead th {
  background: rgba(244, 247, 251, 0.85) !important;
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.content-body table tbody tr,
#contentBody table tbody tr {
  transition: background var(--dl-dur-fast) var(--dl-ease), transform var(--dl-dur-fast) var(--dl-ease);
}
.content-body table tbody tr:hover,
#contentBody table tbody tr:hover {
  background: rgba(47, 111, 237, 0.04) !important;
}

/* —— 按钮通用微动效 —— */
.content-area .btn,
.login-card .btn {
  transition:
    transform var(--dl-dur-fast) var(--dl-ease),
    box-shadow var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease),
    border-color var(--dl-dur-fast) var(--dl-ease),
    color var(--dl-dur-fast) var(--dl-ease),
    filter var(--dl-dur-fast) var(--dl-ease) !important;
}
.content-area .btn:hover:not(:disabled) {
  transform: translateY(-1px);
}
.content-area .btn:active:not(:disabled) {
  transform: translateY(1px);
}
.content-area .btn-primary {
  box-shadow: 0 4px 14px rgba(26, 115, 232, 0.22);
}
.content-area .btn-primary:hover:not(:disabled) {
  box-shadow: 0 8px 20px rgba(26, 115, 232, 0.3);
}

/* —— 表单 —— */
.content-body input[type="text"],
.content-body input[type="password"],
.content-body input[type="email"],
.content-body input[type="number"],
.content-body input[type="search"],
.content-body select,
.content-body textarea,
.settings-form-group input {
  transition:
    border-color var(--dl-dur-fast) var(--dl-ease),
    box-shadow var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease) !important;
}
.content-body input:focus,
.content-body select:focus,
.content-body textarea:focus,
.settings-form-group input:focus {
  box-shadow: 0 0 0 3px rgba(47, 111, 237, 0.12) !important;
}

/* —— 充值弹窗：与主视觉层对齐（细节增强） —— */
.recharge-modal-mask.is-visible .recharge-modal {
  animation: dl-scale-in 0.7s var(--dl-ease-silk) both;
}
.recharge-chip,
.recharge-plan,
.recharge-cta,
.recharge-tab,
.recharge-close {
  transition:
    transform var(--dl-dur-fast) var(--dl-ease),
    box-shadow var(--dl-dur-fast) var(--dl-ease),
    background var(--dl-dur-fast) var(--dl-ease),
    border-color var(--dl-dur-fast) var(--dl-ease),
    color var(--dl-dur-fast) var(--dl-ease),
    filter var(--dl-dur-fast) var(--dl-ease) !important;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .recharge-modal-mask {
    background: rgba(10, 18, 32, 0.55) !important;
  }
  .recharge-modal,
  .recharge-field-box,
  .recharge-chip,
  .recharge-plan {
    background: #fff !important;
  }
  .recharge-hero {
    background: #f4f7fb !important;
  }
  .recharge-modal-ft {
    background: #f8fafc !important;
  }
}

/* —— 设置 / 公告 —— */
.settings-feature-panel {
  animation: dl-fade-up 0.8s var(--dl-ease-silk) both;
}
.settings-feature-item.is-open {
  box-shadow: 0 8px 28px rgba(15, 26, 46, 0.08);
}
.announce-card {
  border-radius: 12px !important;
}
.announce-list.dl-enter-stagger .announce-card {
  animation: dl-fade-up var(--dl-dur-enter) var(--dl-ease-silk) both;
}

/* —— 消息 / 聊天常见容器 —— */
#contentBody .chat-layout,
#contentBody .msg-layout,
#contentBody .om-layout,
#contentBody .pm-layout {
  animation: dl-fade-up var(--dl-dur-enter) var(--dl-ease-silk) both;
}

/* —— 滚动条克制美化 —— */
.content-area::-webkit-scrollbar,
.side-nav::-webkit-scrollbar,
.content-body::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
.content-area::-webkit-scrollbar-thumb,
.side-nav::-webkit-scrollbar-thumb,
.content-body::-webkit-scrollbar-thumb {
  background: rgba(19, 35, 63, 0.18);
  border-radius: 8px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
.content-area::-webkit-scrollbar-thumb:hover,
.side-nav::-webkit-scrollbar-thumb:hover,
.content-body::-webkit-scrollbar-thumb:hover {
  background: rgba(19, 35, 63, 0.28);
  background-clip: padding-box;
}

/* —— 商城分区 / 数据追踪微块 —— */
.mall-section {
  animation: dl-fade-up var(--dl-dur-enter) var(--dl-ease-silk) both;
}
.mall-section:nth-child(2) { animation-delay: 0.1s; }
.mall-section:nth-child(3) { animation-delay: 0.2s; }
.mall-section-hd {
  margin-bottom: 12px;
}
.dt-metric,
.dt-delta-cell,
.dt-verdict,
.dt-overview {
  background: rgba(255, 255, 255, 0.7) !important;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(19, 35, 63, 0.06);
  border-radius: 12px;
  transition: transform var(--dl-dur-fast) var(--dl-ease), box-shadow var(--dl-dur-fast) var(--dl-ease);
}
.dt-metric:hover,
.dt-delta-cell:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(15, 26, 46, 0.08);
}
#contentBody .uo-item,
#contentBody .dt-item,
#contentBody .om-row,
#contentBody .msg-thread-item,
#contentBody .plat-user-row {
  transition:
    background var(--dl-dur-fast) var(--dl-ease),
    transform var(--dl-dur-fast) var(--dl-ease),
    box-shadow var(--dl-dur-fast) var(--dl-ease);
}
#contentBody .uo-item:hover,
#contentBody .dt-item:hover,
#contentBody .msg-thread-item:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(15, 26, 46, 0.06);
}

/* —— 独特微交互：按压缩放 / 卡片倾斜感 —— */
.content-area .btn:active:not(:disabled),
.recharge-cta:active:not(:disabled),
.recharge-chip:active,
.mall-buy:active:not(:disabled) {
  animation: dl-press-pop 0.38s var(--dl-ease-soft);
}
.ov-card:hover,
.stat-card:hover,
.announce-card:hover,
#contentBody .mall-card:hover,
.ov-shortcut:hover {
  transform: translateY(-4px);
}
.ov-card:active,
.stat-card:active,
.announce-card:active,
#contentBody .mall-card:active,
.ov-shortcut:active {
  transform: translateY(-1px);
  transition-duration: 0.12s;
}
.recharge-plan:hover:not(.is-locked) {
  transform: translateX(4px);
}
.recharge-tab.is-on {
  transform: translateY(-1px);
}
.va-tab.active {
  transform: translateY(-1px);
}

/* —— 无障碍：减少动效 —— */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .login-container::before {
    display: none !important;
  }
}

/* —— 不支持 backdrop-filter 时回退 —— */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .top-nav {
    background: #0f1a2e !important;
  }
  .top-nav .btn-recharge {
    background: rgba(47, 111, 237, 0.55) !important;
    border-color: rgba(255, 255, 255, 0.35) !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
  }
  .side-nav {
    background: #fff !important;
  }
  .content-body,
  .login-card,
  .auth-card,
  .ov-card,
  .ov-hero,
  .ov-panel,
  .stat-card,
  .announce-card,
  .settings-feature-item {
    background: #fff !important;
  }
}