/* 荔枝记账 · 全站液态玻璃主题
 * 由 localStorage.display_glass 和导航栏“显示设置”统一控制。
 */
:root {
  --liquid-surface: rgba(255, 255, 255, 0.54);
  --liquid-surface-strong: rgba(255, 255, 255, 0.74);
  --liquid-rim: rgba(255, 255, 255, 0.84);
  --liquid-field: rgba(255, 255, 255, 0.62);
  --liquid-shadow: 0 18px 44px rgba(93, 48, 36, 0.10),
    0 3px 12px rgba(93, 48, 36, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.94),
    inset 0 -1px 0 rgba(255, 255, 255, 0.28);
}

:root[data-theme="dark"] {
  --liquid-surface: rgba(35, 30, 28, 0.56);
  --liquid-surface-strong: rgba(35, 30, 28, 0.76);
  --liquid-rim: rgba(255, 255, 255, 0.18);
  --liquid-field: rgba(35, 31, 29, 0.66);
  --liquid-shadow: 0 20px 48px rgba(0, 0, 0, 0.34),
    0 3px 14px rgba(0, 0, 0, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.16),
    inset 0 -1px 0 rgba(255, 255, 255, 0.05);
}

body {
  min-height: 100vh;
  background:
    radial-gradient(circle at 9% 7%, rgba(255, 154, 146, 0.22), transparent 31rem),
    radial-gradient(circle at 91% 14%, rgba(255, 205, 132, 0.20), transparent 28rem),
    radial-gradient(circle at 50% 96%, rgba(135, 197, 150, 0.15), transparent 32rem),
    var(--bg, #faf8f5) !important;
  background-attachment: fixed !important;
}

:root[data-theme="dark"] body {
  background:
    radial-gradient(circle at 9% 7%, rgba(240, 112, 90, 0.14), transparent 31rem),
    radial-gradient(circle at 91% 14%, rgba(224, 165, 80, 0.10), transparent 28rem),
    radial-gradient(circle at 50% 96%, rgba(107, 174, 107, 0.08), transparent 32rem),
    var(--bg, #1a1816) !important;
  background-attachment: fixed !important;
}

.site-nav,
.nav {
  background: linear-gradient(115deg, rgba(255, 255, 255, 0.80), rgba(255, 255, 255, 0.46)) !important;
  backdrop-filter: blur(30px) saturate(170%) !important;
  -webkit-backdrop-filter: blur(30px) saturate(170%) !important;
  border-color: rgba(255, 255, 255, 0.72) !important;
  box-shadow: 0 8px 28px rgba(93, 48, 36, 0.06), inset 0 -1px 0 rgba(255, 255, 255, 0.55) !important;
}

:root[data-theme="dark"] .site-nav,
:root[data-theme="dark"] .nav {
  background: linear-gradient(115deg, rgba(38, 34, 31, 0.82), rgba(25, 22, 20, 0.58)) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
}

.glass-card,
.card,
.auth-card,
.modal-card,
.ann-popup-card,
.dash-stat-card,
.ann-card,
.faq-item,
.support-card,
.app-card,
.file-item,
.trust-item,
.feature-card-sm,
.demo-card,
.step-card,
.scene-card,
.ai-preset-card,
.ai-result-card,
.sec-card,
.flow-step,
.pricing-card {
  --glass-x: 18%;
  --glass-y: 8%;
  position: relative;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(135deg, var(--liquid-surface-strong), var(--liquid-surface));
  backdrop-filter: blur(26px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%) !important;
  border: 1px solid var(--liquid-rim) !important;
  box-shadow: var(--liquid-shadow) !important;
}

/* 公告与下载中心即使处于空状态，也保留完整的玻璃主体。 */
.ann-hero,
.ann-empty,
.empty-state,
.modal {
  --glass-x: 18%;
  --glass-y: 8%;
  position: relative;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.76), transparent 28%),
    linear-gradient(135deg, var(--liquid-surface-strong), var(--liquid-surface)) !important;
  backdrop-filter: blur(26px) saturate(165%) !important;
  -webkit-backdrop-filter: blur(26px) saturate(165%) !important;
  border: 1px solid var(--liquid-rim) !important;
  border-radius: var(--radius, 16px);
  box-shadow: var(--liquid-shadow) !important;
}

:root[data-theme="dark"] .ann-hero,
:root[data-theme="dark"] .ann-empty,
:root[data-theme="dark"] .empty-state,
:root[data-theme="dark"] .modal {
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.13), transparent 30%),
    linear-gradient(135deg, var(--liquid-surface-strong), var(--liquid-surface)) !important;
}

/* 独立管理页使用自己的组件命名，同样纳入全站玻璃系统。 */
.login-card,
header,
.panel,
.stat-card,
.table-wrap,
.ip-form,
.web-frame-wrap {
  --glass-x: 18%;
  --glass-y: 8%;
  position: relative;
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.72), transparent 28%),
    linear-gradient(135deg, var(--liquid-surface-strong), var(--liquid-surface)) !important;
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
  border-color: var(--liquid-rim) !important;
  box-shadow: var(--liquid-shadow) !important;
}

:root[data-theme="dark"] .login-card,
:root[data-theme="dark"] header,
:root[data-theme="dark"] .panel,
:root[data-theme="dark"] .stat-card,
:root[data-theme="dark"] .table-wrap,
:root[data-theme="dark"] .ip-form,
:root[data-theme="dark"] .web-frame-wrap {
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.12), transparent 30%),
    linear-gradient(135deg, var(--liquid-surface-strong), var(--liquid-surface)) !important;
}

.glass-card {
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.78), transparent 28%),
    linear-gradient(135deg, var(--liquid-surface-strong), var(--liquid-surface)) !important;
}

:root[data-theme="dark"] .glass-card,
:root[data-theme="dark"] .card,
:root[data-theme="dark"] .auth-card,
:root[data-theme="dark"] .modal-card,
:root[data-theme="dark"] .ann-popup-card,
:root[data-theme="dark"] .dash-stat-card,
:root[data-theme="dark"] .ann-card,
:root[data-theme="dark"] .faq-item,
:root[data-theme="dark"] .support-card,
:root[data-theme="dark"] .app-card,
:root[data-theme="dark"] .file-item,
:root[data-theme="dark"] .trust-item,
:root[data-theme="dark"] .feature-card-sm,
:root[data-theme="dark"] .demo-card,
:root[data-theme="dark"] .step-card,
:root[data-theme="dark"] .scene-card,
:root[data-theme="dark"] .ai-preset-card,
:root[data-theme="dark"] .ai-result-card,
:root[data-theme="dark"] .sec-card,
:root[data-theme="dark"] .flow-step,
:root[data-theme="dark"] .pricing-card {
  background:
    radial-gradient(circle at var(--glass-x) var(--glass-y), rgba(255, 255, 255, 0.13), transparent 30%),
    linear-gradient(135deg, var(--liquid-surface-strong), var(--liquid-surface)) !important;
}

.glass-card::after,
.card::after,
.auth-card::after,
.modal-card::after,
.ann-popup-card::after,
.dash-stat-card::after,
.ann-card::after,
.faq-item::after,
.support-card::after,
.app-card::after,
.file-item::after,
.trust-item::after,
.feature-card-sm::after,
.demo-card::after,
.step-card::after,
.scene-card::after,
.ai-preset-card::after,
.ai-result-card::after,
.sec-card::after,
.flow-step::after,
.pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, 0.52), inset -1px -1px 0 rgba(255, 255, 255, 0.10);
}

.input,
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
select,
textarea {
  background: var(--liquid-field) !important;
  border-color: color-mix(in srgb, var(--liquid-rim) 72%, var(--border, transparent)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.48);
  backdrop-filter: blur(12px) saturate(140%);
  -webkit-backdrop-filter: blur(12px) saturate(140%);
}

.btn-secondary,
.nav-settings-btn,
.nav-ann-bell,
.theme-toggle,
.lang-switch,
.nav-theme {
  background: color-mix(in srgb, var(--liquid-surface-strong) 84%, transparent) !important;
  border-color: var(--liquid-rim) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.60), 0 5px 14px rgba(93, 48, 36, 0.06) !important;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}

/* 关闭液态玻璃时，所有页面统一恢复普通实色界面。 */
.no-glass body {
  background: var(--bg, #faf8f5) !important;
}

.no-glass .site-nav,
.no-glass .nav,
.no-glass .glass-card,
.no-glass .card,
.no-glass .auth-card,
.no-glass .modal-card,
.no-glass .ann-popup-card,
.no-glass .dash-stat-card,
.no-glass .ann-card,
.no-glass .faq-item,
.no-glass .support-card,
.no-glass .app-card,
.no-glass .file-item,
.no-glass .trust-item,
.no-glass .feature-card-sm,
.no-glass .demo-card,
.no-glass .step-card,
.no-glass .scene-card,
.no-glass .ai-preset-card,
.no-glass .ai-result-card,
.no-glass .sec-card,
.no-glass .flow-step,
.no-glass .pricing-card {
  background: var(--card, #fff) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--border, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: var(--shadow, 0 4px 16px rgba(0, 0, 0, 0.06)) !important;
}

.no-glass .login-card,
.no-glass header,
.no-glass .panel,
.no-glass .stat-card,
.no-glass .table-wrap,
.no-glass .ip-form,
.no-glass .web-frame-wrap {
  background: var(--card, #fff) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--border, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: var(--shadow, 0 4px 16px rgba(0, 0, 0, 0.06)) !important;
}

.no-glass .ann-hero,
.no-glass .ann-empty,
.no-glass .empty-state,
.no-glass .modal {
  background: var(--card, var(--surface, #fff)) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--border, rgba(0, 0, 0, 0.08)) !important;
  box-shadow: var(--shadow, 0 4px 16px rgba(0, 0, 0, 0.06)) !important;
}

.no-glass .input,
.no-glass input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
.no-glass select,
.no-glass textarea,
.no-glass .btn-secondary,
.no-glass .nav-settings-btn,
.no-glass .nav-ann-bell,
.no-glass .theme-toggle,
.no-glass .lang-switch,
.no-glass .nav-theme {
  background: var(--card, #fff) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: var(--border, rgba(0, 0, 0, 0.08)) !important;
}

.no-glass .glass-card::after,
.no-glass .card::after,
.no-glass .auth-card::after,
.no-glass .modal-card::after,
.no-glass .ann-popup-card::after,
.no-glass .dash-stat-card::after,
.no-glass .ann-card::after,
.no-glass .faq-item::after,
.no-glass .support-card::after,
.no-glass .app-card::after,
.no-glass .file-item::after,
.no-glass .trust-item::after,
.no-glass .feature-card-sm::after,
.no-glass .demo-card::after,
.no-glass .step-card::after,
.no-glass .scene-card::after,
.no-glass .ai-preset-card::after,
.no-glass .ai-result-card::after,
.no-glass .sec-card::after,
.no-glass .flow-step::after,
.no-glass .pricing-card::after {
  display: none;
}

@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .glass-card, .card, .auth-card, .modal-card, .ann-popup-card, .dash-stat-card,
  .ann-card, .faq-item, .support-card, .app-card, .file-item, .trust-item,
  .feature-card-sm, .demo-card, .step-card, .scene-card, .ai-preset-card,
  .ai-result-card, .sec-card, .flow-step, .pricing-card, .site-nav, .nav {
    background: color-mix(in srgb, var(--card, #fff) 94%, transparent) !important;
  }
}

@media (max-width: 768px) {
  .glass-card, .card, .auth-card, .modal-card, .ann-popup-card, .dash-stat-card,
  .ann-card, .faq-item, .support-card, .app-card, .file-item, .trust-item,
  .feature-card-sm, .demo-card, .step-card, .scene-card, .ai-preset-card,
  .ai-result-card, .sec-card, .flow-step, .pricing-card {
    backdrop-filter: blur(18px) saturate(145%) !important;
    -webkit-backdrop-filter: blur(18px) saturate(145%) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-orbs .orb { animation: none !important; }
}