html[data-glass="on"] .card {
  border-color: var(--glass-edge);
  box-shadow: var(--glass-highlight);
}

html[data-glass="on"] .btn-primary,
html[data-glass="on"] .btn-ghost,
html[data-glass="on"] .btn-danger {
  box-shadow:
    var(--glass-highlight),
    0 3px 3px color-mix(in srgb, var(--bg-well) 40%, transparent);
}
html[data-glass="on"] .btn-ghost {
  border-color: var(--glass-edge);
}

html[data-glass="on"] :is(.moon-badge:not(.is-full), .dr-pill, .big-cell, .pos-cell, .stat-cell, .mc-tile:not(.is-active), .placement-list, .moon-day:not(.is-today):not(.is-full), .mc-add-btn, .chip:not(.is-on),
    .house-cell, .ph-table, .ph-voc-row:not(.is-now), .mp-rows, .ax-card:not(.is-return):not(.is-parallel), .tx-pulse, .mc-balance,
    .dd:not(.is-open) .dd-trigger:not(:focus-visible), .mp-seg, .mp-switch, .dialog-btn-cancel) {
  border-color: var(--glass-edge);
}
html[data-glass="on"] :is(.moon-badge, .dr-pill, .big-cell, .pos-cell, .stat-cell, .mc-tile, .placement-list, .moon-day, .mc-add-btn,
    .house-cell, .ph-table, .ph-voc-row, .mp-rows, .ax-card, .tx-pulse, .mc-balance) {
  box-shadow: var(--glass-highlight);
}


@media (max-width: 849px) {
  html[data-glass="on"] {
    --tabbar-h: 79px;
  }
  html[data-glass="on"] #tabbar {
    left: 14px;
    right: 14px;
    bottom: calc(14px + env(safe-area-inset-bottom));
    padding: 8px 14px;
    border-radius: 22px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--bg-glass-top) 60%, transparent), transparent), var(--surface-base, transparent);
    border: 1px solid var(--glass-edge);
    box-shadow:
      var(--glass-highlight),
      0 3px 3px color-mix(in srgb, var(--bg-well) 60%, transparent);
  }
  html[data-glass="on"] .tab {
    justify-content: center;
  }

  html[data-glass="on"] .tab.is-active {
    position: relative;
    z-index: 0;
  }
  html[data-glass="on"] .tab.is-active::before {
    content: '';
    position: absolute;
    inset: -4px -5px;
    border-radius: 12px;
    background: linear-gradient(160deg, color-mix(in srgb, var(--purple-glow) 32%, transparent), color-mix(in srgb, var(--purple-bright) 14%, transparent));
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-highlight), 0 3px 10px color-mix(in srgb, var(--bg-well) 45%, transparent);
    z-index: -1;
  }
  html[data-glass="on"] .dock-pill {
    background: linear-gradient(160deg, color-mix(in srgb, var(--purple-glow) 32%, transparent), color-mix(in srgb, var(--purple-bright) 14%, transparent));
    border: 1px solid var(--glass-edge);
    box-shadow: var(--glass-highlight), 0 3px 10px color-mix(in srgb, var(--bg-well) 45%, transparent);
  }
  html[data-glass="on"] .tab svg { transition: none; animation: none; transform: none; }
}

html[data-glass="on"] .wheel-holder::before {
  background: var(--surface-tint), var(--glass-fill);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-highlight);
  -webkit-backdrop-filter: var(--glass-filter);
  backdrop-filter: var(--glass-filter);
}