:root { --sky-base: var(--bg-deep); }
html[data-glass="on"] { --sky-base: var(--glass-fill); }

:root { --surface-tint: linear-gradient(color-mix(in srgb, var(--bg-dock) 90%, transparent), color-mix(in srgb, var(--bg-dock) 90%, transparent)); }
html[data-glass="on"] { --surface-tint: linear-gradient(180deg, color-mix(in srgb, var(--bg-glass-top) 60%, transparent), transparent); }

:where(.card, #tabbar, .update-bar, .dialog-panel, .auth-card, .moon-badge, .dr-pill, .big-cell, .pos-cell, .stat-cell,
    .house-cell, .mc-tile, .mc-add-btn, .moon-day, .chip, .btn-primary, .btn-ghost, .btn-danger, .btn-back,
    .placement-list, .ph-table, .ph-voc-row, .ph-hero, .mp-seg, .mp-switch, .mp-chip, .mp-rows, .ax-card, .tx-pulse, .mc-balance, .skeleton-wheel, .skeleton-list, .strip-skeleton, .ph-meta-chip, .ax-compute, .dd-trigger, .sl-sign) {
  --surface-base: var(--sky-base);
}
:where(.card, #tabbar, .update-bar, .dialog-panel, .auth-card, .moon-badge, .dr-pill, .big-cell, .pos-cell, .stat-cell,
    .house-cell, .mc-tile, .mc-add-btn, .moon-day, .chip, .btn-primary, .btn-ghost, .btn-danger, .btn-back,
    .placement-list, .ph-table, .ph-voc-row, .ph-hero, .mp-seg, .mp-switch, .mp-chip, .mp-rows, .ax-card, .tx-pulse, .mc-balance, .skeleton-wheel, .skeleton-list, .strip-skeleton, .ph-meta-chip, .ax-compute, .dd-trigger, .sl-sign, .cube-face)
  :where(.card, #tabbar, .update-bar, .dialog-panel, .auth-card, .moon-badge, .dr-pill, .big-cell, .pos-cell, .stat-cell,
    .house-cell, .mc-tile, .mc-add-btn, .moon-day, .chip, .btn-primary, .btn-ghost, .btn-danger, .btn-back,
    .placement-list, .ph-table, .ph-voc-row, .ph-hero, .mp-seg, .mp-switch, .mp-chip, .mp-rows, .ax-card, .tx-pulse, .mc-balance, .skeleton-wheel, .skeleton-list, .strip-skeleton, .ph-meta-chip, .ax-compute, .dd-trigger, .sl-sign) {
  --surface-base: transparent;
}

html[data-glass="on"] .view-head { --surface-base: var(--sky-base); }
html[data-glass="on"] .view-head :where(.card, .moon-badge, .dr-pill, .chip, .btn-primary, .btn-ghost, .btn-danger, .btn-back, .mc-add-btn) {
  --surface-base: transparent;
}

html[data-glass="on"] :where(.card, #tabbar, .update-bar, .dialog-panel, .auth-card, .moon-badge, .big-cell, .pos-cell, .stat-cell,
    .house-cell, .mc-tile, .mc-add-btn, .moon-day, .dr-pill, .chip, .btn-primary, .btn-ghost, .btn-danger, .btn-back,
    .placement-list, .ph-table, .ph-voc-row, .ph-hero, .mp-seg, .mp-switch, .mp-chip, .mp-rows, .ax-card, .tx-pulse, .mc-balance, .skeleton-wheel, .skeleton-list, .strip-skeleton, .ph-meta-chip, .ax-compute, .dd-trigger, .sl-sign, .view-head):not(:where(.card, #tabbar, .update-bar, .dialog-panel, .auth-card, .moon-badge, .big-cell, .pos-cell, .stat-cell,
    .house-cell, .mc-tile, .mc-add-btn, .moon-day, .dr-pill, .chip, .btn-primary, .btn-ghost, .btn-danger, .btn-back,
    .placement-list, .ph-table, .ph-voc-row, .ph-hero, .mp-seg, .mp-switch, .mp-chip, .mp-rows, .ax-card, .tx-pulse, .mc-balance, .skeleton-wheel, .skeleton-list, .strip-skeleton, .ph-meta-chip, .ax-compute, .dd-trigger, .sl-sign, .view-head, .cube-face) *) {
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}
html[data-glass="on"] .dialog-overlay { -webkit-backdrop-filter: none; backdrop-filter: none; }
html[data-glass="on"] .dialog-panel {
  -webkit-backdrop-filter: var(--ua-sheet-filter);
  backdrop-filter: var(--ua-sheet-filter);
}

html:not([data-glass="on"]) .pad-view > .bt-note {
  background: linear-gradient(color-mix(in srgb, var(--gold) 7%, transparent), color-mix(in srgb, var(--gold) 7%, transparent)), var(--sky-base);
}