/* ============================================================
   老三账户 — Liquid Glass 接入层
   配合 liquid-glass.global.js 与 liquid-glass.js 使用。
   目标：让既有卡片 / 面板 / 模态框 / 侧栏升级为「液态玻璃」，
   同时保持原有设计语言（冷调中性 + 单一品牌蓝 #0a59f7 + Apple 质感）。
   全部样式通过 .lg-host（被升级的 liquid-glass 宿主）选择器叠加，
   不改写原始卡片类本身，未升级或浏览器降级时视觉完全回退。
   ============================================================ */

/* === 页面背景光晕层：给玻璃提供可折射的细腻色彩（非大色块、非紫色渐变） === */
.lg-tint-layer {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 10% -4%, rgba(10, 89, 247, 0.12), transparent 62%),
    radial-gradient(55vw 55vh at 94% 8%, rgba(52, 199, 199, 0.10), transparent 60%),
    radial-gradient(72vw 62vh at 50% 108%, rgba(255, 159, 10, 0.08), transparent 62%),
    radial-gradient(48vw 44vh at 90% 84%, rgba(10, 89, 247, 0.07), transparent 60%);
}

/* 让主体内容浮在光晕层之上 */
body > nav.navbar,
body > .container,
body > main,
body > .account-shell,
body > .admin-shell,
body > .site-footer,
body > .design-header,
body > #top {
  position: relative;
  z-index: 1;
}

/* ============================================================
   一、布局修正：被升级的玻璃宿主按原元素性质恢复正常文档流
   liquid-glass 默认 inline-flex，块级容器统一改为块级宽度。
   ============================================================ */
liquid-glass.lg-host {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  -webkit-touch-callout: default;
}

/* 保持原卡片的圆角 / 阴影语气：玻璃自带折射高光，去掉原有硬阴影更通透 */
liquid-glass.lg-host {
  --liquid-glass-edge: rgba(255, 255, 255, 0.4);
}

/* ============================================================
   二、原卡片背景「去底」：把不透明/半透明白底与自带模糊换成通透，
   让 liquid-glass 的真实折射层（surface）透出来。
   只在元素确实被升级成 .lg-host 时才生效，未升级时保持原样。
   ============================================================ */

/* 原卡片/面板/模态框通常有 background + backdrop-filter，这里在玻璃内部清空。
   包裹式玻璃化后,原元素是 liquid-glass 的直接子级,用 > 精确命中。 */
.lg-host > .card,
.lg-host > .info-card,
.lg-host > .plan-card,
.lg-host > .dev-card,
.lg-host > .apply-card,
.lg-host > .form-card,
.lg-host > .auth-card,
.lg-host > .oauth-card,
.lg-host > .contact-card,
.lg-host > .project-card,
.lg-host > .blog-card,
.lg-host > .redeem-card,
.lg-host > .sub-card,
.lg-host > .sub-list-card,
.lg-host > .stat-tile,
.lg-host > .admin-panel,
.lg-host > .dev-panel,
.lg-host > .dash-panel,
.lg-host > .detail-panel,
.lg-host > .confirm-card,
.lg-host > .create-card,
.lg-host > .guide-card,
.lg-host > .avatar-card,
.lg-host > .message-box,
.lg-host > .detail-card,
.lg-host > .app-info-card,
.lg-host > .app-setting-card,
.lg-host > .sg-card,
.lg-host > .vw-card,
.lg-host > .np-card,
.lg-host > .pc-card,
.lg-host > .birthday-card,
.lg-host > .account-sidebar,
.lg-host > .admin-sidebar,
.lg-host > .empty-card,
.lg-host > .linked-card,
.lg-host > .harmony-card {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 包裹式玻璃的内容层不插手内部布局,让原卡片按自身规则渲染 */
liquid-glass.lg-host::part(content) {
  display: contents;
}

/* ============================================================
   三、按「玻璃类别」微调材质观感（通过 CSS 变量作用于 surface）
   ============================================================ */

/* 大型内容卡：通透、低染色 */
liquid-glass.lg-host.lg-kind-card {
  --liquid-glass-edge: rgba(255, 255, 255, 0.42);
}

/* 模态框：更实的底、更明显的边缘，保证可读性与层级 */
liquid-glass.lg-host.lg-kind-modal {
  --liquid-glass-edge: rgba(255, 255, 255, 0.55);
}

/* 侧栏：轻微染色压住底噪 */
liquid-glass.lg-host.lg-kind-sidebar {
  --liquid-glass-edge: rgba(255, 255, 255, 0.36);
}

/* ============================================================
   四、胶囊玻璃按钮（光学叠加，不改动原有按钮类）
   主按钮已是 0a59f7 胶囊；此处给次级/幽灵按钮加一层玻璃质感。
   ============================================================ */
.btn.btn-outline-primary,
.design-button-secondary,
.design-button-ghost {
  border-radius: var(--radius-pill, 999px) !important;
  background: rgba(255, 255, 255, 0.5) !important;
  backdrop-filter: blur(14px) saturate(1.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.5);
  border: 1px solid rgba(255, 255, 255, 0.6) !important;
}

/* ============================================================
   五、低帧率自动降级提示 & 兼容性
   库在低性能时会触发 liquid-glass-degraded；此时折射层退化为高斯模糊，
   页面依旧可用，无需额外样式，仅保证内容不被遮挡。
   ============================================================ */
liquid-glass[data-liquid-glass-mode="gaussian"] {
  /* 降级模式：surface 已是高斯模糊，确保有底色可读 */
  background: rgba(255, 255, 255, 0.6);
  border-radius: var(--liquid-glass-radius, 24px);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
}

/* ============================================================
   六、首页（index.html）专属：信息卡 / 项目卡 / 联系卡升级后保持间距
   ============================================================ */
liquid-glass.lg-host.info-card,
liquid-glass.lg-host.contact-card,
liquid-glass.lg-host.project-card,
liquid-glass.lg-host.blog-card {
  height: 100%;
}

/* 尊重减弱动态偏好：禁用镜面高光跟手动画 */
@media (prefers-reduced-motion: reduce) {
  liquid-glass.lg-host::part(specular) {
    transition: none;
  }
}

/* ============================================================
   七、渐进式模糊顶栏（liquid-glass-navbar）
   组件本身 position:fixed + z-index:9999，始终位于最上层，
   多层渐隐 mask 让模糊自上而下消散（苹果同款渐进模糊）。
   这里负责：内容区顶部留白 + 原 navbar 变透明（模糊由组件承载）。
   ============================================================ */
liquid-glass-navbar {
  --lg-nav-height: 56px;
}

/* 顶栏占位：liquid-glass-navbar 为 fixed 定位、脱离文档流。
   账户类页面由 JS 检测到 .navbar 后给 body 加 .lg-has-topnav，
   此处留白避免内容被遮。首页（design-header）不加，避免顶部空白。 */
body.lg-has-topnav {
  padding-top: 56px;
}

/* 原 navbar 变为透明容器，背景/模糊/边框交给 liquid-glass-navbar */
liquid-glass-navbar .navbar {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
  position: static !important;
  height: 56px;
}

/* 首页标题栏：背景/模糊交给玻璃顶栏，自身变透明并拉满宽度 */
liquid-glass-navbar .design-header {
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border-bottom: none !important;
  position: static !important;
  height: 60px;
  width: 100%;
}

/* navbar 内部内容占满组件宽度（组件 content 默认居中，这里拉满） */
liquid-glass-navbar::part(content) {
  justify-content: stretch;
  width: 100%;
}
liquid-glass-navbar .navbar,
liquid-glass-navbar .design-header {
  width: 100%;
}

/* 锚点滚动偏移：避免页内锚点（#about 等）被固定顶栏遮住 */
html {
  scroll-padding-top: 72px;
}

/* ============================================================
   八、染色液态玻璃按钮（包裹式）
   原 <button>/<a> 被包进 <liquid-glass class="lg-btn"> 容器：
   原元素保留全部交互(href 导航/表单提交/JS 事件),玻璃只做材质。
   玻璃内容层不再强制 flex 居中,让原按钮按自身布局正常显示。
   ============================================================ */
liquid-glass.lg-btn,
liquid-glass.lg-btn-ghost,
liquid-glass.lg-nav-link {
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  -webkit-touch-callout: none;
  /* 让包裹的原按钮决定玻璃尺寸，玻璃才有正确的折射/高光范围 */
  align-items: stretch;
  justify-content: stretch;
  /* 染色玻璃：让折射高光在品牌蓝上更清晰 */
  --liquid-glass-edge: rgba(255, 255, 255, 0.5);
}

/* 内容层：不额外加 padding(原按钮自带),不强制居中(原按钮自己居中)。
   注意：不能用 display:contents，否则玻璃宿主失去自身尺寸，
   折射/高光/形变都失去作用范围，文字也会糊掉。 */
liquid-glass.lg-btn::part(content),
liquid-glass.lg-btn-ghost::part(content),
liquid-glass.lg-nav-link::part(content) {
  display: flex;
  align-items: stretch;
  justify-content: stretch;
  width: 100%;
  padding: 0; /* 原按钮自带 padding，玻璃内容层不再叠加 */
}

/* 清空被包裹的原按钮/链接自身的背景/边框,让玻璃材质透出;
   保留其 padding/字体/颜色/交互。原按钮拉满玻璃内容层,决定玻璃尺寸。
   注意:不写 height:100%,否则原按钮自己的 height(如 50px)会被解析成
   内容层高度的 100% 而塌陷;宽度用 100% 让玻璃随内容撑开即可。 */
liquid-glass.lg-btn > .btn-primary,
liquid-glass.lg-btn > .design-button-primary,
liquid-glass.lg-btn-ghost > .design-button-secondary,
liquid-glass.lg-btn-ghost > .design-button-ghost,
liquid-glass.lg-btn-ghost > .btn-outline-primary,
liquid-glass.lg-nav-link > a {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-decoration: none;
  width: 100%;
  box-sizing: border-box;
}

/* 主按钮文字为白(染蓝玻璃上) */
liquid-glass.lg-btn > * {
  color: #fff;
}
/* 次级/幽灵按钮文字为主题蓝 */
liquid-glass.lg-btn-ghost > * {
  color: #0a59f7;
}
/* 顶栏链接文字继承导航色 */
liquid-glass.lg-nav-link > a {
  color: inherit;
}

/* 关掉玻璃内链接/按钮的原生拖拽与 iOS 长按预览,
   否则浏览器会拖出链接残影、抢走 pointer 事件,液态形变失效 */
liquid-glass.lg-btn a,
liquid-glass.lg-btn-ghost a,
liquid-glass.lg-nav-link a,
liquid-glass.lg-btn button,
liquid-glass.lg-btn-ghost button {
  -webkit-user-drag: none;
  -webkit-touch-callout: none;
}

/* 可交互玻璃内的所有内容不可选中,按压拖拽时文字不被选中 */
liquid-glass.lg-btn *,
liquid-glass.lg-btn-ghost *,
liquid-glass.lg-nav-link *,
liquid-glass[morph] *,
liquid-glass[draggable] * {
  user-select: none !important;
  -webkit-user-select: none !important;
  -webkit-touch-callout: none !important;
}

/* ============================================================
   九、一镜到底滚动动效
   由 liquid-glass.js 的 IntersectionObserver 统一驱动：
   元素进入视口时添加 .lg-in，平滑上浮淡入；滚动离开不反复。
   遵循 prefers-reduced-motion。
   ============================================================ */
.lg-reveal {
  opacity: 0;
  transform: translateY(22px);
  transition:
    opacity 0.7s cubic-bezier(0.16, 0.84, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 0.84, 0.3, 1);
  will-change: opacity, transform;
}

.lg-reveal.lg-in {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .lg-reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ============================================================
   十、玻璃按钮 Hover：提亮 + 边缘更清晰，而非填充实色
   原有 hover 规则会把背景改成实色(灰/实蓝),盖在玻璃上糊成一团。
   玻璃材质下,hover 只提亮染色、加强镜面高光与边缘,文字保持可读。
   ============================================================ */
/* 玻璃化按钮内部的原按钮:hover 不再改背景色(背景由玻璃承载) */
liquid-glass.lg-btn:hover > .btn-primary,
liquid-glass.lg-btn:hover > .design-button-primary,
liquid-glass.lg-btn-ghost:hover > .design-button-secondary,
liquid-glass.lg-btn-ghost:hover > .design-button-ghost,
liquid-glass.lg-btn-ghost:hover > .btn-outline-primary {
  background: transparent !important;
  border-color: transparent !important;
  box-shadow: none !important;
}

/* 主按钮(染蓝):hover 提亮染色 + 加强高光 */
liquid-glass.lg-btn:hover {
  --liquid-glass-edge: rgba(255, 255, 255, 0.7);
}
liquid-glass.lg-btn:hover::part(surface) {
  filter: brightness(1.1);
}

/* 幽灵/次级按钮(通透):hover 用主题蓝勾边 + 轻微提亮,文字仍清晰 */
liquid-glass.lg-btn-ghost:hover {
  --liquid-glass-edge: rgba(10, 89, 247, 0.55);
}
liquid-glass.lg-btn-ghost:hover::part(surface) {
  filter: brightness(1.05);
}
liquid-glass.lg-btn-ghost:hover > * {
  color: #084ac8; /* hover 时文字加深一档,保证可读 */
}

/* 顶栏链接玻璃:hover 轻微提亮,不改变文字色 */
liquid-glass.lg-nav-link:hover {
  --liquid-glass-edge: rgba(255, 255, 255, 0.65);
}
liquid-glass.lg-nav-link:hover::part(surface) {
  filter: brightness(1.08);
}

/* ============================================================
   十一、快速创建 FAB + 一镜到底面板（开发者中心）
   官方一镜到底丝滑的关键:触发器本身是染蓝玻璃,面板从它变形长出。
   面板走「无边框内联编辑」的苹果备忘录质感:标题/正文直接落在玻璃上,
   不做成一张漂起的白色表单卡片(那会与玻璃底色糊成一团)。
   ============================================================ */

/* 染蓝玻璃 FAB：固定右下角,按压/高光/回弹 */
#quick-add-fab {
  position: fixed;
  right: 28px;
  bottom: 28px;
  z-index: 60;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #fff;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
#quick-add-fab svg { pointer-events: none; display: block; }

/* 一镜到底面板内容(库会把内容搬进 fixed overlay,这里给完整样式)。
   关键是让内容「贴」在玻璃上：输入框无白底、只留细分隔线,
   玻璃自身的折射/模糊透出页面背景,质感与官方示例一致。 */
.quick-add-menu .quick-add-form {
  display: flex;
  flex-direction: column;
  height: 100%;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'PingFang SC', 'Helvetica Neue', sans-serif;
}
.quick-add-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 18px 10px;
}
.quick-add-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.2px;
  color: #14141C;
}
.quick-add-close {
  border: 0;
  cursor: pointer;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.14);
  color: #3A3A40;
  display: grid;
  place-items: center;
  padding: 0;
}
.quick-add-close:hover { background: rgba(120, 120, 128, 0.22); }
.quick-add-fields {
  display: flex;
  flex-direction: column;
  padding: 2px 18px 0;
}
/* 输入框：无框、无白底,只用底部分隔线区隔,贴在玻璃上 */
.quick-add-input {
  width: 100%;
  box-sizing: border-box;
  border: 0;
  outline: none;
  background: none;
  padding: 11px 0;
  font-size: 14.5px;
  font-family: inherit;
  color: #14141C;
  border-bottom: 1px solid rgba(60, 60, 67, 0.12);
}
.quick-add-input:last-child { border-bottom: 0; }
.quick-add-input::placeholder { color: rgba(60, 60, 67, 0.38); }
.quick-add-foot {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 12px 18px 16px;
  margin-top: auto;
}
.quick-add-submit {
  border: 0;
  cursor: pointer;
  background: #0a59f7;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: 8px 20px;
  border-radius: 999px;
  font-family: inherit;
}
.quick-add-submit:hover { background: #084ac8; }
.quick-add-submit:active { background: #0040b0; }