/* stylelint-disable no-descending-specificity */
/* stylelint-disable scss/at-rule-no-unknown */

// 材质只覆盖统一表面 token；质量档只替换光学层，不改变业务组件契约。
html[data-theme='glass'] {
  --glass-surface: rgba(11, 19, 34, calc(0.3 - var(--glass-transparency, 0.5) * 0.24));
  --glass-surface-soft: rgba(11, 19, 34, calc(0.36 - var(--glass-transparency, 0.5) * 0.24));
  --glass-surface-raised: rgba(11, 19, 34, calc(0.44 - var(--glass-transparency, 0.5) * 0.24));
  --glass-control: rgba(11, 19, 34, 52%);
  --glass-control-prominent: rgba(255, 255, 255, 7%);
  --glass-control-prominent-focus: color-mix(in srgb, rgba(255, 255, 255, 10%) 84%, rgba(var(--v-theme-primary), 24%));
  --glass-border: rgba(255, 255, 255, calc(0.04 + var(--glass-reflection, 0.5) * 0.12));
  --glass-border-raised: rgba(255, 255, 255, calc(0.06 + var(--glass-reflection, 0.5) * 0.16));
  --glass-border-hover: rgba(255, 255, 255, calc(0.1 + var(--glass-reflection, 0.5) * 0.2));
  --glass-control-prominent-border: rgba(255, 255, 255, 14%);
  --glass-highlight: rgba(255, 255, 255, calc(0.06 + var(--glass-reflection, 0.5) * 0.16));
  --glass-transmission-brightness: 1;
  --glass-sheen: linear-gradient(
    135deg,
    rgba(255, 255, 255, 9%),
    transparent 28%,
    rgba(255, 255, 255, 3%) 72%,
    transparent
  );
  --glass-shadow:
    0 10px 28px rgba(3, 7, 18, 24%), inset 0 1px 0 var(--glass-highlight), inset 0 -1px 0 rgba(2, 6, 16, 14%);
  --glass-dashboard-shadow: inset 0 1px 0 var(--glass-highlight);
  --glass-dashboard-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, calc(0.16 + var(--glass-reflection, 0.5) * 0.24)),
    inset -1px 0 0 rgba(2, 6, 16, calc(0.12 + var(--glass-reflection, 0.5) * 0.1)),
    inset 0 -1px 0 rgba(2, 6, 16, calc(0.14 + var(--glass-reflection, 0.5) * 0.1));
  --glass-shadow-raised:
    0 16px 40px rgba(3, 7, 18, 32%), inset 0 1px 0 rgba(255, 255, 255, 24%), inset 0 -1px 0 rgba(2, 6, 16, 18%);
  --glass-shadow-hover:
    0 18px 44px rgba(3, 7, 18, 36%), inset 0 1px 0 rgba(255, 255, 255, 28%), inset 0 -1px 0 rgba(2, 6, 16, 18%);
  --glass-navbar-shadow:
    0 3px 12px rgba(3, 7, 18, 18%), inset 0 1px 0 rgba(255, 255, 255, 10%), inset 0 -1px 0 rgba(2, 6, 16, 12%);
  --glass-control-shadow: inset 0 1px 0 rgba(255, 255, 255, 12%), inset 0 -1px 0 rgba(2, 6, 16, 14%);
  --glass-control-shadow-hover: inset 0 1px 0 rgba(255, 255, 255, 18%), inset 0 -1px 0 rgba(2, 6, 16, 12%);
  --glass-control-shadow-active: inset 0 1px 0 rgba(255, 255, 255, 7%), inset 0 -1px 0 rgba(2, 6, 16, 20%);
  --glass-control-prominent-shadow: inset 0 1px 0 rgba(255, 255, 255, 18%), inset 0 -1px 0 rgba(2, 6, 16, 18%);
  --glass-control-prominent-focus-shadow:
    0 0 0 2px rgba(var(--v-theme-primary), 16%), inset 0 1px 0 rgba(255, 255, 255, 24%),
    inset 0 -1px 0 rgba(2, 6, 16, 16%);
  --glass-surface-backdrop-filter: brightness(var(--glass-transmission-brightness));
  --glass-raised-backdrop-filter: brightness(var(--glass-transmission-brightness));
  --glass-control-backdrop-filter: none;
  --glass-control-prominent-backdrop-filter: none;
  --glass-navbar-backdrop-filter: var(--glass-raised-backdrop-filter);
  --glass-overlay-surface: var(--glass-surface-raised);
  --glass-overlay-blur: 3px;
  --glass-overlay-saturate: 135%;
  --glass-overlay-backdrop-filter: blur(var(--glass-overlay-blur)) saturate(var(--glass-overlay-saturate));
  --glass-control-icon-color: rgba(242, 245, 250, 70%);
  --glass-control-placeholder-color: rgba(242, 245, 250, 54%);
  --glass-control-shortcut-background: rgba(255, 255, 255, 8%);
  --glass-control-shortcut-border: rgba(255, 255, 255, 12%);
  --glass-control-shortcut-color: rgba(242, 245, 250, 68%);
  --glass-button-surface: rgba(255, 255, 255, 8%);
  --glass-button-surface-hover: rgba(255, 255, 255, 12%);
  --glass-nav-active-background: linear-gradient(
    90deg,
    rgba(var(--v-theme-primary), 22%),
    rgba(var(--v-theme-primary), 48%)
  );
  --glass-nav-active-border: 1px solid rgba(var(--v-theme-primary), 36%);
  --glass-nav-active-shadow: inset 0 1px 0 rgba(255, 255, 255, 14%);
  --glass-dashboard-backdrop-filter: none;
  --glass-blur-surface: 16px;
  --glass-blur: 22px;
  --glass-blur-raised: 32px;
  --glass-saturate: 145%;
  --glass-content-reveal-duration: 160ms;
  --glass-motion: 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
  --app-card-rest-shadow: var(--glass-shadow);
  --app-card-hover-shadow: var(--glass-shadow-hover);
  --app-fab-shadow: var(--glass-control-shadow);
  --app-fab-shadow-strong: var(--glass-control-shadow-hover);
  --app-fab-shadow-hover: var(--glass-control-shadow-hover);
  --app-fab-shadow-strong-hover: var(--glass-control-shadow-hover);
  --app-fab-shadow-active: var(--glass-control-shadow-active);
  --app-overlay-shadow: var(--glass-shadow-raised);
  --app-surface-shadow: var(--glass-shadow);
  --app-surface-hover-shadow: var(--glass-shadow-hover);
  --app-surface-border-width: 1px;
  --app-surface-border-opacity: 0.15;
  --app-surface-border: 1px solid var(--glass-border);
  --app-card-light-border-width: 1px;
  --app-card-light-border-opacity: 0.15;
  --app-card-light-border: 1px solid var(--glass-border);
  --app-overlay-border: 1px solid var(--glass-border);
  --app-grouped-list-background: var(--glass-surface);
  --app-grouped-list-backdrop-filter: var(--glass-surface-backdrop-filter);
  --app-grouped-list-border: 1px solid var(--glass-border);
  --app-grouped-list-separator-color: rgba(255, 255, 255, 10%);
  --app-grouped-list-header-color: rgba(242, 245, 250, 68%);
  --app-grouped-list-chevron-color: rgba(242, 245, 250, 56%);
  --app-grouped-list-hover-background: rgba(255, 255, 255, 8%);
  --app-grouped-list-active-background: rgba(var(--v-theme-primary), 16%);
  --mp-motion-duration-page: 180ms;
  --mp-motion-duration-overlay: 180ms;
  --mp-motion-ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1);

  background-color: #0b1322;
  color-scheme: dark;

  body {
    background-color: #0b1322;
  }

  // 色调保持与透明材质接近的透光度，只叠加主色语义。
  &[data-glass-appearance='tinted'] {
    --glass-surface: color-mix(
      in srgb,
      rgba(11, 19, 34, calc(0.3 - var(--glass-transparency, 0.5) * 0.24)) 88%,
      rgba(var(--v-theme-primary), 28%)
    );
    --glass-surface-soft: color-mix(
      in srgb,
      rgba(11, 19, 34, calc(0.36 - var(--glass-transparency, 0.5) * 0.24)) 89%,
      rgba(var(--v-theme-primary), 26%)
    );
    --glass-surface-raised: color-mix(
      in srgb,
      rgba(11, 19, 34, calc(0.44 - var(--glass-transparency, 0.5) * 0.24)) 84%,
      rgba(var(--v-theme-primary), 32%)
    );
    --glass-control: color-mix(in srgb, rgba(11, 19, 34, 52%) 88%, rgba(var(--v-theme-primary), 28%));
    --glass-control-prominent: color-mix(in srgb, rgba(255, 255, 255, 7%) 82%, rgba(var(--v-theme-primary), 24%));
    --glass-control-prominent-focus: color-mix(
      in srgb,
      rgba(255, 255, 255, 10%) 76%,
      rgba(var(--v-theme-primary), 32%)
    );
    --glass-border: color-mix(
      in srgb,
      rgba(255, 255, 255, calc(0.04 + var(--glass-reflection, 0.5) * 0.12)) 82%,
      rgba(var(--v-theme-primary), 26%)
    );
    --glass-border-raised: color-mix(
      in srgb,
      rgba(255, 255, 255, calc(0.06 + var(--glass-reflection, 0.5) * 0.16)) 80%,
      rgba(var(--v-theme-primary), 30%)
    );
    --glass-border-hover: color-mix(
      in srgb,
      rgba(255, 255, 255, calc(0.1 + var(--glass-reflection, 0.5) * 0.2)) 78%,
      rgba(var(--v-theme-primary), 36%)
    );
    --glass-control-prominent-border: color-mix(
      in srgb,
      rgba(255, 255, 255, 14%) 78%,
      rgba(var(--v-theme-primary), 32%)
    );
    --glass-highlight: color-mix(
      in srgb,
      rgba(255, 255, 255, calc(0.06 + var(--glass-reflection, 0.5) * 0.16)) 86%,
      rgba(var(--v-theme-primary), 18%)
    );
    --glass-sheen: linear-gradient(
      135deg,
      rgba(255, 255, 255, 9%),
      transparent 28%,
      rgba(var(--v-theme-primary), 6%) 72%,
      transparent
    );
  }

  // 磨砂材质使用更亮的散射表面，但仍只让高价值层执行实时背景采样。
  &[data-glass-appearance='frosted'] {
    --glass-surface: rgba(255, 255, 255, calc(0.14 - var(--glass-transparency, 0.5) * 0.1));
    --glass-surface-soft: rgba(255, 255, 255, calc(0.13 - var(--glass-transparency, 0.5) * 0.08));
    --glass-surface-raised: rgba(255, 255, 255, calc(0.18 - var(--glass-transparency, 0.5) * 0.11));
    --glass-control: rgba(255, 255, 255, 9%);
    --glass-control-prominent: rgba(255, 255, 255, 10%);
    --glass-control-prominent-focus: rgba(255, 255, 255, 13%);
    --glass-border: rgba(255, 255, 255, calc(0.07 + var(--glass-reflection, 0.5) * 0.16));
    --glass-border-raised: rgba(255, 255, 255, calc(0.08 + var(--glass-reflection, 0.5) * 0.2));
    --glass-border-hover: rgba(255, 255, 255, calc(0.14 + var(--glass-reflection, 0.5) * 0.28));
    --glass-control-prominent-border: rgba(255, 255, 255, 18%);
    --glass-highlight: rgba(255, 255, 255, calc(0.1 + var(--glass-reflection, 0.5) * 0.24));
    --glass-sheen: linear-gradient(
      135deg,
      rgba(255, 255, 255, 7%),
      transparent 24%,
      rgba(255, 255, 255, 2%) 72%,
      transparent
    );
    --glass-control-prominent-shadow: inset 0 1px 0 rgba(255, 255, 255, 28%), inset 0 -1px 0 rgba(2, 6, 16, 20%);
    --glass-control-prominent-focus-shadow:
      0 0 0 2px rgba(var(--v-theme-primary), 17%), inset 0 1px 0 rgba(255, 255, 255, 34%),
      inset 0 -1px 0 rgba(2, 6, 16, 18%);
    --glass-surface-backdrop-filter: blur(var(--glass-blur-surface)) saturate(var(--glass-saturate))
      brightness(var(--glass-transmission-brightness));
    --glass-raised-backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate))
      brightness(var(--glass-transmission-brightness));
    --glass-control-prominent-backdrop-filter: blur(24px) saturate(150%);
    --glass-overlay-surface: rgba(
      var(--v-theme-background),
      calc(0.76 - var(--glass-transparency, 0.5) * 0.12)
    );
    --glass-overlay-blur: var(--glass-blur-raised);
    --glass-overlay-saturate: var(--glass-saturate);
    --glass-blur-surface: 40px;
    --glass-blur: 40px;
    --glass-blur-raised: 60px;
    --glass-saturate: 180%;
    --glass-control-icon-color: rgba(242, 245, 250, 78%);
    --glass-control-placeholder-color: rgba(242, 245, 250, 62%);
    --glass-control-shortcut-background: rgba(255, 255, 255, 11%);
    --glass-control-shortcut-border: rgba(255, 255, 255, 16%);
    --glass-control-shortcut-color: rgba(242, 245, 250, 76%);
    --glass-button-surface: rgba(255, 255, 255, 10%);
    --glass-button-surface-hover: rgba(255, 255, 255, 14%);
    --glass-dashboard-backdrop-filter: blur(var(--glass-blur-surface)) saturate(var(--glass-saturate))
      brightness(var(--glass-transmission-brightness));

    .v-overlay__scrim {
      background: rgba(3, 7, 18, 62%);
    }

    // 磨砂弹窗只由最外层表面采样背景，内部卡片与自定义分组表面保持扁平。
    .v-overlay__content > :where(.v-card, .v-sheet),
    .v-overlay__content > form > :where(.v-card, .v-sheet) {
      --app-grouped-list-backdrop-filter: none;
      --app-grouped-list-background: transparent;

      :where(.app-surface, .v-card, .v-sheet, .v-list, .v-table, .v-expansion-panel, .v-stepper) {
        border-color: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
        background-color: transparent !important;
        background-image: none !important;
        box-shadow: none !important;
        will-change: auto;
      }
    }

    .logging-dialog-card .logging-view {
      --logging-record-bg-even: transparent;
      --logging-record-bg-odd: transparent;
      --logging-shadow: none;
      --logging-shell-backdrop-filter: none;
      --logging-shell-background: transparent;
    }
  }

  &[data-theme-radius='none'] {
    --app-theme-surface-radius: 8px;
    --app-field-radius: 8px;
    --app-control-radius: 8px;
    --app-overlay-radius: 10px;
  }

  &[data-theme-radius='small'] {
    --app-theme-surface-radius: 12px;
    --app-field-radius: 12px;
    --app-control-radius: 10px;
    --app-overlay-radius: 14px;
  }

  &[data-theme-radius='default'] {
    --app-theme-surface-radius: 20px;
    --app-field-radius: 16px;
    --app-control-radius: 14px;
    --app-overlay-radius: 22px;
  }

  &[data-theme-radius='large'] {
    --app-theme-surface-radius: 24px;
    --app-field-radius: 20px;
    --app-control-radius: 16px;
    --app-overlay-radius: 26px;
  }

  &[data-theme-radius='extra'] {
    --app-theme-surface-radius: 28px;
    --app-field-radius: 24px;
    --app-control-radius: 18px;
    --app-overlay-radius: 30px;
  }

  .app-wrapper::before {
    position: fixed;
    z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.82' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='.7'/%3E%3C/svg%3E");
    block-size: 100%;
    content: '';
    inline-size: 100%;
    inset: 0;
    opacity: 0.025;
    pointer-events: none;
  }

  .v-application,
  .v-layout,
  .v-main,
  .layout-wrapper,
  .layout-content-wrapper,
  .page-content-container {
    background: transparent;
  }

  // 页面容器不承担玻璃材质，避免内容高度结束处与透明 footer 形成整宽明暗边界。
  .layout-page-content {
    background-color: transparent;
  }

  .v-application {
    position: relative;
    z-index: 1;
  }

  // 页面 DOM 与 scroll renderer 共用同一 motion 时钟；canvas 本身保持壁纸坐标不动。
  .mp-page-route--entering {
    animation: none;
    filter: none;
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  &[data-page-presentation-motion='active'] .mp-page-route {
    filter: none;
    opacity: var(--mp-page-motion-opacity, 1);
    transform: translate3d(0, var(--mp-page-motion-translate-y, 0), 0);
    transform-origin: center top;
    will-change: opacity, transform;
  }

  :where(
    .app-surface:not(.no-blur),
    .v-card:not(.no-blur, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
    .v-sheet:not(.no-blur, .bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
    .v-expansion-panel,
    .v-stepper,
    .v-table
  ) {
    border-color: var(--glass-border) !important;
    -webkit-backdrop-filter: var(--glass-surface-backdrop-filter);
    backdrop-filter: var(--glass-surface-backdrop-filter);
    background-color: var(--glass-surface) !important;
    background-image: var(--glass-sheen) !important;
    box-shadow: var(--glass-shadow) !important;
  }

  :where(.v-list, .v-footer) {
    border-color: var(--glass-border);
    -webkit-backdrop-filter: var(--glass-surface-backdrop-filter);
    backdrop-filter: var(--glass-surface-backdrop-filter);
    background-color: var(--glass-surface) !important;
  }

  // 海报完成绘制后已完全遮住卡片底面，释放不可见的实时背景采样。
  .media-card.media-card--image-loaded {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .media-card .v-img__img {
    opacity: 0;
    transition: opacity var(--glass-content-reveal-duration) cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  .media-card--image-loaded .v-img__img {
    opacity: 1;
  }

  .v-toolbar {
    border-color: var(--glass-border);
    -webkit-backdrop-filter: var(--glass-raised-backdrop-filter);
    backdrop-filter: var(--glass-raised-backdrop-filter);
    background-color: var(--glass-surface) !important;
  }

  // Dashboard 顶层工作卡片允许一层业务布局容器，内部图表、列表与海报只使用静态光学表面。
  .dashboard-grid-item-content > .dashboard-grid-auto-size > .dashboard-grid-content-measure > .v-card,
  .dashboard-grid-item-content > .dashboard-grid-auto-size > .dashboard-grid-content-measure > :first-child > .v-card {
    -webkit-backdrop-filter: var(--glass-dashboard-backdrop-filter);
    backdrop-filter: var(--glass-dashboard-backdrop-filter);
    box-shadow: var(--glass-dashboard-shadow) !important;
  }

  @media (hover: hover) {
    // Dashboard 悬停沿左上来光增强顶部高光，并在右下背光面保留轻吸收。
    .dashboard-grid-item-content > .dashboard-grid-auto-size > .dashboard-grid-content-measure > .v-card:hover,
    .dashboard-grid-item-content
      > .dashboard-grid-auto-size
      > .dashboard-grid-content-measure
      > :first-child
      > .v-card:hover {
      box-shadow: var(--glass-dashboard-shadow-hover) !important;
    }
  }

  :where(.layout-navbar, .Vue-Toastification__toast) {
    border-color: var(--glass-border-raised) !important;
    -webkit-backdrop-filter: var(--glass-raised-backdrop-filter);
    backdrop-filter: var(--glass-raised-backdrop-filter);
    background-color: var(--glass-surface-raised) !important;
    background-image: var(--glass-sheen) !important;
    box-shadow: var(--glass-shadow-raised) !important;
  }

  // 固定浮层、移动底栏与 Vuetify 弹出层共用材质参数，避免各入口出现不同的模糊和底色。
  :where(.theme-customizer-panel-host, .agent-assistant-panel, .footer-nav-card) {
    border-color: var(--glass-border-raised) !important;
    -webkit-backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
    backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
    background-color: var(--glass-overlay-surface) !important;
    background-image: var(--glass-sheen) !important;
    box-shadow: var(--glass-shadow-raised) !important;
  }

  // 快速访问面板保留全屏无边框结构，但材质与其他弹出层完全一致。
  .plugin-quick-access.v-card {
    -webkit-backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
    backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
    background-color: var(--glass-overlay-surface) !important;
    background-image: var(--glass-sheen) !important;
  }

  // 顶栏使用更轻的投影，避免与下方内容形成内陷感。
  .layout-navbar {
    box-shadow: var(--glass-navbar-shadow) !important;
  }

  .layout-vertical-nav {
    isolation: isolate;
    border-inline-end: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: transparent !important;
    box-shadow: none !important;

    // 导航材质与可变菜单内容分层，路由激活态切换不应重栅格化整块全高背板。
    &::before {
      position: absolute;
      z-index: -1;
      border-inline-end: 1px solid var(--glass-border-raised);
      -webkit-backdrop-filter: var(--glass-raised-backdrop-filter);
      backdrop-filter: var(--glass-raised-backdrop-filter);
      background-color: var(--glass-surface-raised);
      background-image: var(--glass-sheen);
      box-shadow: var(--glass-shadow-raised);
      content: '';
      inset: 0;
      pointer-events: none;
    }
  }

  // 滚动条与导航材质边界保持间距，避免窄轨道参与全高背板的合成。
  .layout-vertical-nav .ps__rail-y {
    inset-inline-end: 0.5rem !important;
    transition: opacity 120ms linear;
  }

  .layout-vertical-nav .ps__thumb-y,
  .layout-vertical-nav .ps__rail-y:focus > .ps__thumb-y,
  .layout-vertical-nav .ps__rail-y:hover > .ps__thumb-y,
  .layout-vertical-nav .ps__rail-y.ps--clicking .ps__thumb-y {
    background-color: rgba(255, 255, 255, 28%) !important;
    inline-size: 2px !important;
    inset-inline-end: 0.1875rem;
  }

  .layout-vertical-nav .nav-items.ps--scrolling-y > .ps__rail-y {
    opacity: 0.42;
  }

  .layout-vertical-nav .nav-link > .router-link-exact-active {
    border: var(--glass-nav-active-border);
    background: var(--glass-nav-active-background) !important;
    box-shadow: var(--glass-nav-active-shadow) !important;
  }

  // 水平导航的基础样式会在滚动时被组件覆盖，需要显式恢复玻璃顶栏材质。
  .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed .layout-navbar {
    border-color: var(--glass-border-raised) !important;
    -webkit-backdrop-filter: var(--glass-navbar-backdrop-filter) !important;
    backdrop-filter: var(--glass-navbar-backdrop-filter) !important;
    background-color: var(--glass-surface-raised) !important;
    background-image: var(--glass-sheen) !important;
    box-shadow: var(--glass-navbar-shadow) !important;
  }

  .layout-wrapper.window-scrolled.layout-navbar-fixed .layout-navbar .navbar-content-container,
  .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed
    .navbar-content-container {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  :where(.search-desktop-activator, .search-header) .search-input-wrapper {
    border: 1px solid var(--glass-control-prominent-border) !important;
    -webkit-backdrop-filter: var(--glass-control-prominent-backdrop-filter);
    backdrop-filter: var(--glass-control-prominent-backdrop-filter);
    background-color: var(--glass-control-prominent) !important;
    background-image: var(--glass-sheen) !important;
    box-shadow: var(--glass-control-prominent-shadow);
  }

  :where(.search-desktop-activator, .search-header) .search-input-wrapper:focus-within {
    border-color: rgba(var(--v-theme-primary), 70%) !important;
    background: var(--glass-control-prominent-focus) !important;
    box-shadow: var(--glass-control-prominent-focus-shadow);
  }

  :where(.search-desktop-activator, .search-header) .search-input-icon {
    color: var(--glass-control-icon-color) !important;
  }

  :where(.search-desktop-activator, .search-header) .search-native-input::placeholder {
    color: var(--glass-control-placeholder-color);
  }

  :where(.search-desktop-activator, .search-header) .search-shortcut-badge {
    border: 1px solid var(--glass-control-shortcut-border);
    background: var(--glass-control-shortcut-background);
    color: var(--glass-control-shortcut-color);
  }

  .theme-customizer-panel,
  .agent-assistant-shell {
    background-color: transparent !important;
  }

  :where(.theme-customizer-border-scene, .theme-customizer-radius-scene) {
    border-color: var(--glass-border) !important;
    background:
      linear-gradient(180deg, rgba(255, 255, 255, 4%), rgba(255, 255, 255, 7%)), rgba(255, 255, 255, 3%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 12%),
      inset 0 -1px 0 rgba(2, 6, 16, 18%);
  }

  :where(
    .theme-customizer-border-scene__card,
    .theme-customizer-border-scene__dialog,
    .theme-customizer-border-scene__menu,
    .theme-customizer-radius-scene__card
  ) {
    border-color: rgba(255, 255, 255, 18%);
    background: rgba(255, 255, 255, 7%) !important;
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 14%),
      inset 0 -1px 0 rgba(2, 6, 16, 20%);
  }

  .theme-customizer-preview-option.is-active > :where(.theme-customizer-border-scene, .theme-customizer-radius-scene) {
    border-color: rgb(var(--v-theme-primary)) !important;
    background: rgba(var(--v-theme-primary), 8%) !important;
  }

  .agent-assistant-shell {
    --agent-assistant-panel-bg: var(--glass-overlay-surface);
    --agent-assistant-panel-blur: var(--glass-overlay-blur);
    --agent-assistant-assistant-bg: var(--glass-surface);
  }

  .agent-assistant-fab__bubble,
  .nav-button,
  .compact-fab .v-btn,
  .global-action-buttons .v-btn {
    border: 1px solid var(--glass-border) !important;
    -webkit-backdrop-filter: var(--glass-raised-backdrop-filter);
    backdrop-filter: var(--glass-raised-backdrop-filter);
    background-color: var(--glass-surface-raised) !important;
    background-image: var(--glass-sheen) !important;
    box-shadow: var(--glass-control-shadow) !important;
  }

  .v-overlay__scrim {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: rgba(3, 7, 18, 48%);
  }

  .v-dialog--fullscreen {
    background-color: transparent !important;
  }

  .v-overlay__content {
    border-radius: var(--app-overlay-radius);

    > :where(.v-card, .v-sheet, .v-list),
    > form > :where(.v-card, .v-sheet) {
      -webkit-backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
      backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
      background-color: var(--glass-overlay-surface) !important;
      background-image: var(--glass-sheen) !important;
      box-shadow: var(--glass-shadow-raised) !important;
    }
  }

  // 透明材质在内容上滚后复用移动底栏材质，顶部时则保持原有透光感。
  &[data-glass-appearance='clear'] {
    .layout-wrapper.window-scrolled.layout-navbar-fixed .layout-navbar,
    .layout-wrapper.layout-horizontal-nav-active.layout-horizontal-nav-scrolled.layout-navbar-fixed .layout-navbar {
      border-color: var(--glass-border-raised) !important;
      -webkit-backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
      backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
      background-color: var(--glass-overlay-surface) !important;
      background-image: var(--glass-sheen) !important;
    }

    // contained navbar 会把 %blurry-bg 扩展到内部容器，透明材质不生成这层滚动磨砂。
    .navbar-blur.layout-navbar .navbar-content-container::before {
      display: none !important;
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: transparent !important;
      content: none !important;
    }

    // 移动端主导航抽屉属于弹出侧栏，桌面常驻导航继续沿用原透明表面。
    .layout-vertical-nav.overlay-nav::before {
      background-color: var(--glass-overlay-surface) !important;
    }
  }

  .v-tooltip > .v-overlay__content,
  .v-snackbar__wrapper {
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-overlay-backdrop-filter);
    backdrop-filter: var(--glass-overlay-backdrop-filter);
    background: var(--glass-overlay-surface) !important;
    box-shadow: var(--glass-shadow);
  }

  .v-field {
    --v-field-border-opacity: 0.14;
    --v-field-border-width: 1px;

    border-radius: var(--app-field-radius);
    -webkit-backdrop-filter: var(--glass-control-backdrop-filter);
    backdrop-filter: var(--glass-control-backdrop-filter);
    background-color: var(--glass-control) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 8%);
    transition:
      background-color var(--glass-motion),
      box-shadow var(--glass-motion);
  }

  .v-field--focused {
    --v-field-border-opacity: 0.32;

    background-color: color-mix(in srgb, var(--glass-control) 84%, rgba(var(--v-theme-primary), 32%)) !important;
    background-image: none !important;
    box-shadow:
      0 0 0 3px rgba(var(--v-theme-primary), 14%),
      inset 0 1px 0 rgba(255, 255, 255, 10%);
  }

  // Outlined 描边自身会为浮动标签留出缺口，移除贯穿整个顶部的 field 阴影线。
  .v-field.v-field--variant-outlined {
    box-shadow: inset 0 -1px 0 rgba(2, 6, 16, 22%);
  }

  .v-field.v-field--variant-underlined,
  .v-field.v-field--variant-plain {
    border-radius: 0;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: transparent !important;
    box-shadow: none !important;
  }

  .v-field.v-field--variant-underlined.v-field--focused,
  .v-field.v-field--variant-plain.v-field--focused {
    background-color: transparent !important;
    box-shadow: none !important;
  }

  .v-field input::placeholder,
  .v-field textarea::placeholder {
    color: rgba(242, 245, 250, 38%);
    opacity: 1;
  }

  // Ace 编辑器自带主题会绘制不透明底色，这里让它与普通输入框一样呈现玻璃质感。
  .ace_editor {
    border-radius: var(--app-field-radius);
    -webkit-backdrop-filter: var(--glass-control-backdrop-filter);
    backdrop-filter: var(--glass-control-backdrop-filter);
    background-color: var(--glass-control) !important;
    box-shadow:
      inset 0 0 0 1px var(--glass-border),
      inset 0 1px 0 rgba(255, 255, 255, 8%);
    transition:
      background-color var(--glass-motion),
      box-shadow var(--glass-motion);
  }

  .ace_editor .ace_gutter,
  .ace_editor .ace_scroller,
  .ace_editor .ace_content,
  .ace_editor .ace_gutter-active-line {
    background: transparent !important;
  }

  .ace_editor,
  .ace_editor .ace_gutter,
  .ace_editor .ace_scroller,
  .ace_editor .ace_content {
    color: rgb(var(--v-theme-on-surface)) !important;
  }

  .ace_editor .ace_gutter {
    color: rgba(242, 245, 250, 44%) !important;
  }

  .ace_editor .ace_marker-layer .ace_active-line,
  .ace_editor .ace_marker-layer .ace_selection {
    background: rgba(255, 255, 255, 8%) !important;
  }

  .ace_editor .ace_cursor {
    color: rgb(var(--v-theme-primary)) !important;
  }

  .ace_editor.ace_focus {
    background-color: color-mix(in srgb, var(--glass-control) 84%, rgba(var(--v-theme-primary), 32%)) !important;
    box-shadow:
      0 0 0 3px rgba(var(--v-theme-primary), 14%),
      inset 0 0 0 1px rgba(var(--v-theme-primary), 32%),
      inset 0 1px 0 rgba(255, 255, 255, 10%);
  }

  .v-btn {
    letter-spacing: 0;
    transition:
      background-color var(--glass-motion),
      border-color var(--glass-motion),
      box-shadow var(--glass-motion);
  }

  .v-btn:not(.v-btn--variant-text, .v-btn--variant-plain) {
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-control-backdrop-filter);
    backdrop-filter: var(--glass-control-backdrop-filter);
    background-color: var(--glass-button-surface) !important;
    background-image: none !important;
    box-shadow: var(--glass-control-shadow) !important;
  }

  .v-btn.bg-primary {
    border-color: rgba(var(--v-theme-primary), 48%);
    background-color: rgba(var(--v-theme-primary), 34%) !important;
  }

  .v-btn.bg-success {
    border-color: rgba(var(--v-theme-success), 48%);
    background-color: rgba(var(--v-theme-success), 34%) !important;
  }

  .v-btn.bg-info {
    border-color: rgba(var(--v-theme-info), 48%);
    background-color: rgba(var(--v-theme-info), 34%) !important;
  }

  .v-btn.bg-warning {
    border-color: rgba(var(--v-theme-warning), 48%);
    background-color: rgba(var(--v-theme-warning), 34%) !important;
  }

  .v-btn.bg-error {
    border-color: rgba(var(--v-theme-error), 48%);
    background-color: rgba(var(--v-theme-error), 34%) !important;
  }

  :where(.v-btn, .v-card--link, [role='button']):focus-visible {
    outline: 0;
    box-shadow:
      0 0 0 3px rgba(var(--v-theme-primary), 18%),
      var(--glass-control-shadow) !important;
  }

  .v-chip {
    border-color: rgba(255, 255, 255, 16%);
    background-color: rgba(255, 255, 255, 7%);
  }

  .v-table {
    .v-table__wrapper > table > thead {
      background-color: rgba(255, 255, 255, 6%);
    }

    .v-table__wrapper > table > tbody > tr:hover > td {
      background-color: rgba(255, 255, 255, 6%);
    }
  }

  .v-skeleton-loader {
    background-color: var(--glass-surface-soft);
  }

  .app-card-colorful {
    --app-card-accent-start-opacity: 0.018;
    --app-card-accent-end-opacity: 0.008;
    --app-card-border-opacity: 0.15;
    --app-card-hover-border-opacity: 0.28;
    --app-card-stripe-opacity: 0.12;
    --app-card-surface-opacity: 0.08;

    -webkit-backdrop-filter: var(--glass-surface-backdrop-filter);
    backdrop-filter: var(--glass-surface-backdrop-filter);
  }

  // 插件卡片头部改为染色玻璃：图标主色只作为透光色相，压暗遮罩换成玻璃吸收与高光。
  .plugin-card__banner {
    border-block-end: 1px solid var(--glass-border);

    --plugin-card-banner-scrim: linear-gradient(
      rgba(11, 19, 34, calc(0.34 - var(--glass-transparency, 0.5) * 0.14)) 0%,
      rgba(11, 19, 34, calc(0.46 - var(--glass-transparency, 0.5) * 0.16)) 100%
    );
    --plugin-card-banner-tint: linear-gradient(
      135deg,
      rgba(var(--plugin-card-accent-rgb), 0.42) 0%,
      rgba(var(--plugin-card-accent-rgb), 0.24) 58%,
      rgba(var(--plugin-card-accent-rgb), 0.12) 100%
    );
  }

  // 卡片主体已经承担实时背景采样，头部只叠加静态色层与镜面高光。
  .plugin-card__banner::before {
    position: absolute;
    background-image: var(--glass-sheen);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    content: '';
    inset: 0;
    pointer-events: none;
  }

  .plugin-card__banner > * {
    position: relative;
  }

  // 磨砂材质透光更强，染色需要同步减弱以免头部压过卡片本体。
  &[data-glass-appearance='frosted'] .plugin-card__banner {
    --plugin-card-banner-scrim: linear-gradient(
      rgba(11, 19, 34, calc(0.24 - var(--glass-transparency, 0.5) * 0.12)) 0%,
      rgba(11, 19, 34, calc(0.34 - var(--glass-transparency, 0.5) * 0.14)) 100%
    );
    --plugin-card-banner-tint: linear-gradient(
      135deg,
      rgba(var(--plugin-card-accent-rgb), 0.32) 0%,
      rgba(var(--plugin-card-accent-rgb), 0.18) 58%,
      rgba(var(--plugin-card-accent-rgb), 0.08) 100%
    );
  }

  // 色调材质本身带主色语义，头部染色向主色收敛保持整页同一色温。
  &[data-glass-appearance='tinted'] .plugin-card__banner {
    --plugin-card-banner-tint: linear-gradient(
      135deg,
      color-mix(in srgb, rgba(var(--plugin-card-accent-rgb), 0.42) 74%, rgba(var(--v-theme-primary), 0.42)) 0%,
      color-mix(in srgb, rgba(var(--plugin-card-accent-rgb), 0.24) 74%, rgba(var(--v-theme-primary), 0.24)) 58%,
      rgba(var(--plugin-card-accent-rgb), 0.12) 100%
    );
  }

  // 文件夹卡片保留用户自选渐变作为色相，只降低不透明度让卡片本体的玻璃透出来。
  .plugin-folder-card__bg {
    opacity: calc(0.5 - var(--glass-transparency, 0.5) * 0.14);
  }

  .plugin-folder-card__bg::after {
    position: absolute;
    background-image: var(--glass-sheen);
    box-shadow: inset 0 1px 0 var(--glass-highlight);
    content: '';
    inset: 0;
    pointer-events: none;
  }

  .plugin-folder-card__overlay {
    background: linear-gradient(
      rgba(11, 19, 34, calc(0.34 - var(--glass-transparency, 0.5) * 0.14)) 0%,
      rgba(11, 19, 34, calc(0.46 - var(--glass-transparency, 0.5) * 0.16)) 100%
    );
  }

  // 捷径菜单的嵌套卡片会被通用弹层折叠规则抹平描边与高光，需要完整补齐标准玻璃表面。
  .shortcut-card-hover-area > .v-card {
    border-color: var(--glass-border) !important;
    -webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
    backdrop-filter: var(--glass-surface-backdrop-filter) !important;
    background-color: var(--glass-surface) !important;
    background-image: var(--glass-sheen) !important;
    box-shadow: var(--glass-shadow) !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .shortcut-card-hover-area:hover > .v-card {
      border-color: var(--glass-border-hover) !important;
      box-shadow: var(--glass-shadow-hover) !important;
    }
  }

  // “更多”应用列表的分组卡片存在局部固定模糊，需要在完整小屏区间跟随玻璃材质。
  .settings-section-card.app-grouped-list {
    -webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
    backdrop-filter: var(--glass-surface-backdrop-filter) !important;
  }

  // 文件整理、日历和缓存使用自定义容器，需要同时覆盖桌面与移动端表面。
  .transfer-history-mobile-page {
    --transfer-history-mobile-search-bg: var(--glass-surface-soft);
    --transfer-history-mobile-muted-bg: var(--glass-surface-soft);
    --transfer-history-mobile-border: var(--glass-border);
    --transfer-history-mobile-surface-blur: var(--glass-surface-backdrop-filter);
  }

  .transfer-history-mobile-record,
  .calendar-event-card,
  .mobile-calendar-filter-card,
  .mobile-calendar-event-card,
  .cache-desktop-stat,
  .cache-mobile-stat,
  .cache-mobile-card,
  .cache-panel-stat,
  .recognition-cache-mobile-item {
    border: 1px solid var(--glass-border);
    -webkit-backdrop-filter: var(--glass-surface-backdrop-filter);
    backdrop-filter: var(--glass-surface-backdrop-filter);
    background: var(--glass-surface);
  }

  // 日志和定时服务的自定义表面通过变量接入主题，避免组件局部样式覆盖玻璃材质。
  .logging-view,
  .logging-view.is-dark-theme {
    --logging-border: var(--glass-border);
    --logging-record-bg-even: rgba(255, 255, 255, 6%);
    --logging-record-bg-odd: rgba(255, 255, 255, 3%);
    --logging-shadow: inset 0 1px 0 rgba(255, 255, 255, 10%);
    --logging-shell-backdrop-filter: var(--glass-surface-backdrop-filter);
    --logging-shell-background: var(--glass-surface-soft);
  }

  .mobile-scheduler-view {
    --mobile-scheduler-card-backdrop-filter: var(--glass-surface-backdrop-filter);
    --mobile-scheduler-card-background: var(--glass-surface);
    --mobile-scheduler-card-border: 1px solid var(--glass-border);
    --mobile-scheduler-card-shadow: var(--glass-shadow);
  }

  .mobile-subscribe-calendar {
    --mobile-calendar-control-bg: var(--glass-surface-soft);
    --mobile-calendar-placeholder-bg: var(--glass-surface-soft);
    --mobile-calendar-surface-blur: var(--glass-surface-backdrop-filter);
  }

  // 用户权限编辑器由普通容器构成，通过主题变量接入玻璃表面材质。
  .user-permission-editor {
    --permission-editor-border: 1px solid var(--glass-border);
    --permission-editor-muted-border: 1px solid rgba(255, 255, 255, 10%);
    --permission-editor-panel-bg: var(--glass-surface-soft);
    --permission-editor-hover-bg: rgba(255, 255, 255, 8%);
    --permission-editor-active-bg: rgba(var(--v-theme-primary), 16%);
    --permission-editor-selected-bg: rgba(var(--v-theme-primary), 12%);
    --permission-editor-backdrop-filter: none;
    --permission-editor-shadow: inset 0 1px 0 rgba(255, 255, 255, 8%);
  }

  // 智能助手折叠区使用均匀的玻璃描边，替换普通主题渐变产生的顶部黑边。
  .ai-agent-settings-card {
    border: 1px solid rgba(255, 255, 255, 10%) !important;
    -webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
    backdrop-filter: var(--glass-surface-backdrop-filter) !important;
    background: var(--glass-surface-soft) !important;
    box-shadow: none !important;
  }

  // 横向榜单的滚动容器需要完整容纳玻璃卡片向上下扩散的阴影。
  .slider-container {
    --slider-shadow-bleed-start: 48px;
    --slider-shadow-bleed-end: 96px;
    --slider-shadow-bleed-inline: 32px;
  }

  :where(.v-card, .v-sheet) :where(.app-surface, .v-card, .v-sheet, .v-list, .v-table, .v-expansion-panel, .v-stepper) {
    border-color: transparent !important;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
    will-change: auto;
  }

  :where(.v-card, .v-sheet)
    :where(
      .app-surface:not(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
      .v-card:not(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
      .v-sheet:not(.bg-primary, .bg-success, .bg-info, .bg-warning, .bg-error),
      .v-list,
      .v-table,
      .v-expansion-panel,
      .v-stepper
    ) {
    background-color: transparent !important;
  }

  @media (hover: hover) and (pointer: fine) {
    .v-btn:not(.v-btn--variant-text, .v-btn--variant-plain):hover {
      border-color: var(--glass-border-hover);
      background-color: var(--glass-button-surface-hover) !important;
      box-shadow: var(--glass-control-shadow-hover) !important;
    }

    .v-btn.bg-primary:hover {
      border-color: rgba(var(--v-theme-primary), 62%);
      background-color: rgba(var(--v-theme-primary), 42%) !important;
    }

    .v-btn.bg-success:hover {
      border-color: rgba(var(--v-theme-success), 62%);
      background-color: rgba(var(--v-theme-success), 42%) !important;
    }

    .v-btn.bg-info:hover {
      border-color: rgba(var(--v-theme-info), 62%);
      background-color: rgba(var(--v-theme-info), 42%) !important;
    }

    .v-btn.bg-warning:hover {
      border-color: rgba(var(--v-theme-warning), 62%);
      background-color: rgba(var(--v-theme-warning), 42%) !important;
    }

    .v-btn.bg-error:hover {
      border-color: rgba(var(--v-theme-error), 62%);
      background-color: rgba(var(--v-theme-error), 42%) !important;
    }

    .v-card--link:hover {
      border-color: var(--glass-border-hover) !important;
      box-shadow: var(--glass-shadow-hover) !important;
    }
  }

  .v-btn:not(.v-btn--variant-text, .v-btn--variant-plain):active {
    box-shadow: var(--glass-control-shadow-active) !important;
  }

  @media (width <= 960px) {
    // 全屏快捷弹窗释放外层玻璃背景，让定时服务卡片直接采样全局壁纸。
    &[data-glass-appearance='frosted'] .scheduler-shortcut-dialog-card {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background: transparent !important;
      box-shadow: none !important;
    }
  }

  @supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
    :where(
      .app-surface,
      .v-card,
      .v-sheet,
      .v-list,
      .v-toolbar,
      .v-expansion-panel,
      .layout-vertical-nav,
      .layout-navbar,
      .theme-customizer-panel-host,
      .agent-assistant-panel
    ) {
      background-color: rgba(18, 28, 45, 94%) !important;
    }
  }

  @media (prefers-reduced-transparency: reduce) {
    :where(
      .app-surface,
      .v-card,
      .v-sheet,
      .v-list,
      .v-toolbar,
      .layout-vertical-nav,
      .layout-navbar,
      .v-overlay__content
    ) {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background-color: rgb(11, 19, 34) !important;
    }

    .layout-vertical-nav::before {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background-color: rgb(11, 19, 34) !important;
    }

    .playing-card__percent {
      -webkit-backdrop-filter: none !important;
      backdrop-filter: none !important;
      background-color: rgba(11, 19, 34, 88%) !important;
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .v-btn,
    .v-card,
    .v-field,
    .background-image {
      transition-duration: 0.01ms !important;
    }

    .media-card .v-img__img {
      transition-duration: 0.01ms;
    }
  }
}

// 光学档位只在 renderer ready 后接管背景采样，加载与失败状态继续使用标准 CSS 材质。
.glass-optical-layer {
  z-index: 0;
  block-size: 100%;
  inline-size: 100%;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms ease-out;
}

.glass-optical-layer--fixed {
  position: fixed;
}

// 文档表面与该呈现层共享滚动坐标，canvas backing buffer 仍由 renderer 的质量预算约束。
.glass-optical-layer--scroll {
  position: absolute;
}

html:is([data-glass-quality='balanced'], [data-glass-quality='high'])[data-glass-renderer-state='ready']
  .glass-optical-layer {
  opacity: 1;
}

// 登录页强制使用高质量能力，但不改写用户保存的全局质量属性。
html[data-glass-renderer-state='ready'] .app-wrapper--login-glass-high .glass-optical-layer {
  opacity: 1;
}

// 光学档位下顶栏滚动前后共用同一 filter，避免滚动态重新叠加高强度模糊。
html[data-theme='glass']:is(
    [data-glass-quality='balanced'],
    [data-glass-quality='high']
  )[data-glass-renderer-state='ready'] {
  --glass-surface-backdrop-filter: none;
  --glass-raised-backdrop-filter: none;
  --glass-navbar-backdrop-filter: var(--glass-surface-backdrop-filter);
}

html[data-theme='glass'][data-glass-appearance='frosted']:is(
    [data-glass-quality='balanced'],
    [data-glass-quality='high']
  )[data-glass-renderer-state='ready'] {
  --glass-navbar-backdrop-filter: none;
  --glass-overlay-blur: 0px;
  --glass-overlay-saturate: 100%;
}

html:is([data-glass-quality='balanced'], [data-glass-quality='high'])[data-glass-renderer-state='ready']
  body[data-theme='glass'] {
  .layout-vertical-nav::before,
  .layout-navbar {
    -webkit-backdrop-filter: var(--glass-surface-backdrop-filter) !important;
    backdrop-filter: var(--glass-surface-backdrop-filter) !important;
  }

  .v-overlay__content > :where(.v-card, .v-sheet, .v-list) {
    -webkit-backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
    backdrop-filter: var(--glass-overlay-backdrop-filter) !important;
  }

  .dashboard-grid-item-content > .dashboard-grid-auto-size > .dashboard-grid-content-measure > .v-card,
  .dashboard-grid-item-content > .dashboard-grid-auto-size > .dashboard-grid-content-measure > :first-child > .v-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

// 磨砂材质的散射由 renderer 统一完成，避免 CSS 再次模糊折射结果。
html[data-glass-appearance='frosted']:is(
    [data-glass-quality='balanced'],
    [data-glass-quality='high']
  )[data-glass-renderer-state='ready']
  body[data-theme='glass'] {
  .layout-vertical-nav::before,
  .layout-navbar {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  .dashboard-grid-item-content > .dashboard-grid-auto-size > .dashboard-grid-content-measure > .v-card,
  .dashboard-grid-item-content > .dashboard-grid-auto-size > .dashboard-grid-content-measure > :first-child > .v-card {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
}

// 登录页只保留内容保护表面；折射、方向反射和唯一动态焦散均由共享 renderer 负责。
html[data-theme='glass'] body[data-theme='glass'] {
  .login-card {
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, 0.14),
      inset 0 1px 0 rgba(255, 255, 255, 0.18),
      0 24px 64px rgba(1, 6, 15, 0.22) !important;
  }

  .login-card__surface {
    -webkit-backdrop-filter: brightness(var(--glass-transmission-brightness));
    backdrop-filter: brightness(var(--glass-transmission-brightness));
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.08), transparent 34%),
      linear-gradient(rgba(7, 14, 25, 0.04), rgba(7, 14, 25, 0.1)) !important;
  }

  .native-login-field {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(7, 16, 28, 0.2);
    -webkit-backdrop-filter: var(--glass-control-backdrop-filter);
    backdrop-filter: var(--glass-control-backdrop-filter);
  }
}

html[data-theme='glass'][data-glass-renderer-state='fallback'] body[data-theme='glass'] {
  .app-wrapper--login-glass-high .login-card__surface {
    filter: url('#login-glass-static-refraction');
  }
}

html[data-theme='glass'][data-glass-appearance='tinted'] body[data-theme='glass'] {
  .login-card__surface {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.1), transparent 36%),
      linear-gradient(rgba(var(--v-theme-primary), 0.08), rgba(var(--v-theme-primary), 0.03)),
      linear-gradient(rgba(7, 14, 25, 0.16), rgba(7, 14, 25, 0.3)) !important;
  }

  .native-login-field {
    border-color: rgba(255, 255, 255, 0.15);
    background:
      linear-gradient(rgba(var(--v-theme-primary), 0.07), rgba(var(--v-theme-primary), 0.07)), rgba(7, 16, 28, 0.2);
  }
}

html[data-theme='glass'][data-glass-appearance='frosted'] body[data-theme='glass'] {
  .login-card {
    box-shadow: var(--glass-shadow-raised) !important;
  }

  .login-card__surface {
    -webkit-backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate))
      brightness(var(--glass-transmission-brightness));
    backdrop-filter: blur(var(--glass-blur-raised)) saturate(var(--glass-saturate))
      brightness(var(--glass-transmission-brightness));
    background: var(--glass-sheen), linear-gradient(rgba(8, 15, 27, 0.34), rgba(8, 15, 27, 0.48)) !important;
  }

  .native-login-field {
    border-color: var(--glass-control-prominent-border);
    background: var(--glass-control-prominent);
    -webkit-backdrop-filter: var(--glass-control-prominent-backdrop-filter);
    backdrop-filter: var(--glass-control-prominent-backdrop-filter);
    box-shadow: var(--glass-control-prominent-shadow);
  }
}

html[data-theme='glass'] body[data-theme='glass'] .native-login-field:focus-within {
  border-color: rgba(var(--v-theme-primary), 70%);
  background: var(--glass-control-prominent-focus);
  box-shadow: var(--glass-control-prominent-focus-shadow);
}

@media (prefers-reduced-motion: reduce) {
  .glass-optical-layer {
    transition: none;
  }
}
