/* @zhaoui style pack: glassmorphism
   Loaded after zhaoui.css. Activated by [data-style="glass"] on any element.
   Rules: translucent surfaces over a colourful backdrop; background blur only on top-level and floating surfaces
   (nested blur cannot see through its parent); a bright 1px edge; a soft brand-tinted shadow; primary actions stay solid.
   Text tokens are unchanged - the palette keeps every glass surface within contrast, and each surface falls back to a solid
   colour when blur is unsupported, transparency is reduced, or high contrast is requested. */

/* ---- backdrop: three blurred light spots derived from the brand hue ---- */
[data-style="glass"] body:not([data-style="flat"] *) {
  background-color: var(--zh-glass-base);
  background-image:
    radial-gradient(60vmax 48vmax at 6% -4%, var(--zh-glass-o1), transparent 62%),
    radial-gradient(52vmax 44vmax at 98% 14%, var(--zh-glass-o2), transparent 62%),
    radial-gradient(58vmax 46vmax at 42% 108%, var(--zh-glass-o3), transparent 64%);
  background-attachment: fixed;
}

/* ---- top-level and floating surfaces: these are the only elements that blur what is behind them ---- */
[data-style="glass"] .topbar:not([data-style="flat"] *),
[data-style="glass"] .stage:not([data-style="flat"] *),
[data-style="glass"] .zh-pop-body:not([data-style="flat"] *),
[data-style="glass"] dialog.zh-modal:not([data-style="flat"] *),
[data-style="glass"] .zh-drawer:not([data-style="flat"] *),
[data-style="glass"] .zh-sel-list:not([data-style="flat"] *),
[data-style="glass"] .zh-cas-panel:not([data-style="flat"] *),
[data-style="glass"] .zh-dp-panel:not([data-style="flat"] *),
[data-style="glass"] .zh-tp-panel:not([data-style="flat"] *),
[data-style="glass"] .zh-dd-menu:not([data-style="flat"] *),
[data-style="glass"] .zh-nav-panel:not([data-style="flat"] *),
[data-style="glass"] .zh-nav-menu:not([data-style="flat"] *),
[data-style="glass"] .zh-avatar-list:not([data-style="flat"] *),
[data-style="glass"] .zh-bdg-menu:not([data-style="flat"] *) {
  background: var(--zh-glass-fill);
  -webkit-backdrop-filter: blur(var(--zh-glass-blur)) saturate(var(--zh-glass-saturate));
  backdrop-filter: blur(var(--zh-glass-blur)) saturate(var(--zh-glass-saturate));
  border: 1px solid var(--zh-glass-border);
}
[data-style="glass"] .topbar:not([data-style="flat"] *) { box-shadow: 0 8px 24px -14px var(--zh-glass-shadow), inset 0 -1px 0 var(--zh-glass-border); border-bottom-color: transparent; }
[data-style="glass"] .stage:not([data-style="flat"] *) { box-shadow: var(--zh-shadow-lg); }
[data-style="glass"] .zh-pop-body:not([data-style="flat"] *),
[data-style="glass"] dialog.zh-modal:not([data-style="flat"] *),
[data-style="glass"] .zh-drawer:not([data-style="flat"] *),
[data-style="glass"] .zh-sel-list:not([data-style="flat"] *),
[data-style="glass"] .zh-cas-panel:not([data-style="flat"] *),
[data-style="glass"] .zh-dp-panel:not([data-style="flat"] *),
[data-style="glass"] .zh-tp-panel:not([data-style="flat"] *),
[data-style="glass"] .zh-dd-menu:not([data-style="flat"] *),
[data-style="glass"] .zh-nav-panel:not([data-style="flat"] *),
[data-style="glass"] .zh-nav-menu:not([data-style="flat"] *),
[data-style="glass"] .zh-avatar-list:not([data-style="flat"] *),
[data-style="glass"] .zh-bdg-menu:not([data-style="flat"] *) { background: var(--zh-glass-fill-strong); box-shadow: var(--zh-shadow-lg); }
[data-style="glass"] dialog.zh-modal:not([data-style="flat"] *)::backdrop { background: var(--zh-overlay); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
[data-style="glass"] section.block:not([data-style="flat"] *) { border-top-color: var(--zh-glass-border); }
[data-style="glass"] .toc a.active:not([data-style="flat"] *) { background: var(--zh-glass-fill); box-shadow: inset 0 1px 0 var(--zh-glass-hi); border-left-color: var(--zh-color-primary); }

/* ---- in-page surfaces: translucent fill and edge, no extra blur ---- */
[data-style="glass"] .zh-card:not([data-style="flat"] *),
[data-style="glass"] .zh-card.zh-card:not([data-style="flat"] *),
[data-style="glass"] .zh-alert:not([data-style="flat"] *),
[data-style="glass"] .zh-upload-card:not([data-style="flat"] *),
[data-style="glass"] .zh-upload-item:not([data-style="flat"] *),
[data-style="glass"] .zh-collapse-item:not([data-style="flat"] *),
[data-style="glass"] .zh-ai-msg:not([data-style="flat"] *),
[data-style="glass"] .zh-opt-msg:not([data-style="flat"] *),
[data-style="glass"] .icon-cell:not([data-style="flat"] *) { background: var(--zh-glass-fill); border-color: var(--zh-glass-border); box-shadow: var(--zh-shadow-sm); }
[data-style="glass"] .zh-card:not([data-style="flat"] *) { box-shadow: var(--zh-shadow-md); }
[data-style="glass"] .zh-table-wrap:not([data-style="flat"] *),
[data-style="glass"] .matrix-wrap:not([data-style="flat"] *) { background: var(--zh-glass-well); border-color: var(--zh-glass-border); }
[data-style="glass"] .zh-table th:not([data-style="flat"] *),
[data-style="glass"] .matrix th:not([data-style="flat"] *) { background: var(--zh-glass-fill); }
[data-style="glass"] .zh-table tbody tr:hover:not([data-style="flat"] *),
[data-style="glass"] .matrix tbody tr:hover:not([data-style="flat"] *) { background: var(--zh-glass-fill); }
[data-style="glass"] .zh-modal header:not([data-style="flat"] *),
[data-style="glass"] .zh-modal footer:not([data-style="flat"] *) { border-color: var(--zh-glass-border); }
[data-style="glass"] .tt:not([data-style="flat"] *) { background: var(--zh-glass-fill-strong); border-color: var(--zh-glass-border); }

/* ---- buttons: glass by default, solid brand for primary ---- */
[data-style="glass"] .zh-btn:not([data-style="flat"] *) {
  background: var(--zh-glass-fill); border-color: var(--zh-glass-border); box-shadow: var(--zh-shadow-sm);
  transition: background var(--zh-dur-fast) var(--zh-ease-standard), box-shadow var(--zh-dur-fast) var(--zh-ease-standard), transform var(--zh-dur-instant) var(--zh-ease-standard), border-color var(--zh-dur-fast);
}
[data-style="glass"] .zh-btn:hover:not([data-style="flat"] *) { background: var(--zh-glass-fill-strong); border-color: var(--zh-color-primary); color: var(--zh-color-primary-text); box-shadow: var(--zh-shadow-md); }
[data-style="glass"] .zh-btn:active:not([data-style="flat"] *) { transform: scale(.98); box-shadow: var(--zh-shadow-sm); }
[data-style="glass"] .zh-btn.primary:not([data-style="flat"] *) {
  color: var(--zh-on-primary); border-color: var(--zh-glass-border);
  background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%), var(--zh-color-primary);
  box-shadow: 0 8px 20px -6px var(--zh-primary-a35), inset 0 1px 0 rgba(255, 255, 255, .35);
}
[data-style="glass"] .zh-btn.primary:hover:not([data-style="flat"] *) { color: var(--zh-on-primary); background: linear-gradient(180deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, 0) 60%), var(--zh-color-primary-hover); box-shadow: 0 12px 26px -8px var(--zh-primary-a35), inset 0 1px 0 rgba(255, 255, 255, .35); }
[data-style="glass"] .zh-btn.primary:active:not([data-style="flat"] *) { background: var(--zh-color-primary-active); }
[data-style="glass"] .zh-btn.text:not([data-style="flat"] *),
[data-style="glass"] .zh-btn.text:hover:not([data-style="flat"] *) { background: transparent; border-color: transparent; box-shadow: none; }
[data-style="glass"] .zh-btn.text:hover:not([data-style="flat"] *) { background: var(--zh-glass-fill); }
[data-style="glass"] .zh-btn.danger:not([data-style="flat"] *) { color: var(--zh-text-danger); }
[data-style="glass"] .zh-btn.danger:hover:not([data-style="flat"] *) { background: var(--zh-danger); color: #fff; border-color: transparent; }
[data-style="glass"] .zh-btn[aria-disabled="true"]:not([data-style="flat"] *),
[data-style="glass"] .zh-btn:disabled:not([data-style="flat"] *) { box-shadow: none; }

/* ---- fields: a slightly denser pane with a visible edge ---- */
[data-style="glass"] .zh-input:not([data-style="flat"] *),
[data-style="glass"] .zh-select select:not([data-style="flat"] *),
[data-style="glass"] .zh-textarea:not([data-style="flat"] *),
[data-style="glass"] .zh-sel-trigger:not([data-style="flat"] *),
[data-style="glass"] .zh-sel-box:not([data-style="flat"] *),
[data-style="glass"] .zh-dp-field:not([data-style="flat"] *),
[data-style="glass"] .zh-inp-box:not([data-style="flat"] *),
[data-style="glass"] .zh-otp-cell:not([data-style="flat"] *),
[data-style="glass"] .zh-tag-input:not([data-style="flat"] *),
[data-style="glass"] .zh-cmd-input:not([data-style="flat"] *),
[data-style="glass"] .zh-pg-jumpbox:not([data-style="flat"] *),
[data-style="glass"] .zh-upload-drop:not([data-style="flat"] *),
[data-style="glass"] .zh-upload-avatarbox:not([data-style="flat"] *) {
  background: var(--zh-glass-well); border-color: var(--zh-glass-edge); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .06);
}
[data-style="glass"] .zh-input:hover:not([data-style="flat"] *),
[data-style="glass"] .zh-select select:hover:not([data-style="flat"] *),
[data-style="glass"] .zh-textarea:hover:not([data-style="flat"] *) { border-color: var(--zh-color-primary); }
[data-style="glass"] .zh-input:focus:not([data-style="flat"] *),
[data-style="glass"] .zh-select select:focus:not([data-style="flat"] *),
[data-style="glass"] .zh-textarea:focus:not([data-style="flat"] *),
[data-style="glass"] .zh-sel-trigger:focus-within:not([data-style="flat"] *),
[data-style="glass"] .zh-dp-field:focus-within:not([data-style="flat"] *),
[data-style="glass"] .zh-inp-box:focus-within:not([data-style="flat"] *) {
  background: var(--zh-glass-fill-strong); border-color: var(--zh-color-primary); box-shadow: 0 0 0 3px var(--zh-primary-a22);
}
[data-style="glass"] .zh-input[aria-invalid="true"]:not([data-style="flat"] *) { border-color: var(--zh-danger); }
[data-style="glass"] .zh-input[readonly]:not([data-style="flat"] *) { background: transparent; border-color: transparent; box-shadow: none; }
[data-style="glass"] .zh-inp-box .zh-input:not([data-style="flat"] *),
[data-style="glass"] .zh-inp-box input:not([data-style="flat"] *),
[data-style="glass"] .zh-sel-input:not([data-style="flat"] *) { background: transparent; box-shadow: none; border-color: transparent; }

/* ---- toggles ---- */
[data-style="glass"] .zh-switch:not([data-style="flat"] *) { background: var(--zh-glass-edge); box-shadow: inset 0 1px 2px rgba(15, 23, 42, .12); }
[data-style="glass"] .zh-switch:not([data-style="flat"] *)::after { background: #fff; box-shadow: 0 1px 4px rgba(15, 23, 42, .3); }
[data-style="glass"] .zh-switch:checked:not([data-style="flat"] *) { background: var(--zh-color-primary); }

/* ---- segmented control, tabs, menus, pager, tags ---- */
[data-style="glass"] .seg:not([data-style="flat"] *) { background: var(--zh-glass-well); border-color: var(--zh-glass-border); }
[data-style="glass"] .seg button[aria-pressed="true"]:not([data-style="flat"] *) { background: var(--zh-glass-fill-strong); box-shadow: var(--zh-shadow-sm); }
[data-style="glass"] .zh-tabs:not([data-style="flat"] *) { border-bottom-color: var(--zh-glass-border); }
[data-style="glass"] .zh-tabs button[aria-selected="true"]:not([data-style="flat"] *),
[data-style="glass"] .zh-tabs--card [aria-selected="true"]:not([data-style="flat"] *) { background: var(--zh-glass-fill-strong); border-radius: var(--zh-radius-md) var(--zh-radius-md) 0 0; }
[data-style="glass"] .zh-menu a:hover:not([data-style="flat"] *) { background: var(--zh-glass-fill); }
[data-style="glass"] .zh-menu a[aria-current="page"]:not([data-style="flat"] *),
[data-style="glass"] .zh-side-item[aria-current="page"]:not([data-style="flat"] *),
[data-style="glass"] .zh-side-item.is-active:not([data-style="flat"] *) { background: var(--zh-glass-fill-strong); box-shadow: var(--zh-shadow-sm); }
[data-style="glass"] .zh-side-item:hover:not([data-style="flat"] *),
[data-style="glass"] .zh-tree-row:hover:not([data-style="flat"] *) { background: var(--zh-glass-fill); }
[data-style="glass"] .zh-tree-row[aria-selected="true"]:not([data-style="flat"] *) { background: var(--zh-glass-fill-strong); }
[data-style="glass"] .zh-pager button:not([data-style="flat"] *),
[data-style="glass"] .zh-pg-btn:not([data-style="flat"] *),
[data-style="glass"] .zh-num-btn:not([data-style="flat"] *),
[data-style="glass"] .zh-inp-btn:not([data-style="flat"] *),
[data-style="glass"] .zh-inp-addon-btn:not([data-style="flat"] *),
[data-style="glass"] .zh-nav-iconbtn:not([data-style="flat"] *) {
  background: var(--zh-glass-fill); border-color: var(--zh-glass-border); box-shadow: var(--zh-shadow-sm);
}
[data-style="glass"] .zh-pager button:hover:not([data-style="flat"] *),
[data-style="glass"] .zh-pg-btn:hover:not([data-style="flat"] *) { background: var(--zh-glass-fill-strong); }
[data-style="glass"] .zh-pager button[aria-current="page"]:not([data-style="flat"] *),
[data-style="glass"] .zh-pg-btn[aria-current="page"]:not([data-style="flat"] *) { background: var(--zh-color-primary); color: var(--zh-on-primary); border-color: var(--zh-glass-border); }
[data-style="glass"] .zh-tag:not([data-style="flat"] *) { background: var(--zh-glass-well); border-color: var(--zh-glass-border); }

/* ---- tracks and fills ---- */
[data-style="glass"] .meter:not([data-style="flat"] *),
[data-style="glass"] .zh-slider-rail:not([data-style="flat"] *),
[data-style="glass"] .zh-progress-track:not([data-style="flat"] *),
[data-style="glass"] .zh-upload-bar:not([data-style="flat"] *),
[data-style="glass"] .zh-skeleton:not([data-style="flat"] *) { background: var(--zh-glass-well); border-color: var(--zh-glass-border); }
[data-style="glass"] .zh-slider-thumb:not([data-style="flat"] *) { background: #fff; border-color: var(--zh-glass-border); box-shadow: 0 2px 8px var(--zh-glass-shadow); }
[data-style="glass"] .zh-dp-day[aria-selected="true"]:not([data-style="flat"] *),
[data-style="glass"] .zh-dp-day.is-selected:not([data-style="flat"] *) { background: var(--zh-color-primary); color: var(--zh-on-primary); }
[data-style="glass"] .zh-dd-item:hover:not([data-style="flat"] *),
[data-style="glass"] .zh-sel-opt:hover:not([data-style="flat"] *),
[data-style="glass"] .zh-cas-item:hover:not([data-style="flat"] *),
[data-style="glass"] .zh-cmd-item:hover:not([data-style="flat"] *),
[data-style="glass"] .zh-tp-item:hover:not([data-style="flat"] *),
[data-style="glass"] .zh-dp-day:hover:not([data-style="flat"] *) { background: var(--zh-glass-well); }
[data-style="glass"] .zh-sel-opt[aria-selected="true"]:not([data-style="flat"] *),
[data-style="glass"] .zh-cas-item[aria-selected="true"]:not([data-style="flat"] *),
[data-style="glass"] .zh-cmd-item[aria-selected="true"]:not([data-style="flat"] *),
[data-style="glass"] .zh-tp-item[aria-selected="true"]:not([data-style="flat"] *) { background: var(--zh-color-primary-subtle); }
[data-style="glass"] .zh-step-icon:not([data-style="flat"] *),
[data-style="glass"] .zh-tl-dot:not([data-style="flat"] *) { background: var(--zh-glass-fill-strong); border-color: var(--zh-glass-border); box-shadow: var(--zh-shadow-sm); }
[data-style="glass"] .zh-inf-box:not([data-style="flat"] *),
[data-style="glass"] .zh-lng-box:not([data-style="flat"] *),
[data-style="glass"] .zh-log:not([data-style="flat"] *),
[data-style="glass"] .zh-tree-log:not([data-style="flat"] *),
[data-style="glass"] .zh-tselect-chip:not([data-style="flat"] *) { background: var(--zh-glass-well); border-color: var(--zh-glass-border); }

/* ---- fallbacks: a solid surface when blur or transparency is unavailable or unwanted ---- */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  [data-style="glass"] { --zh-glass-fill: var(--zh-glass-solid); --zh-glass-fill-strong: var(--zh-glass-solid); }
}
@media (prefers-reduced-transparency: reduce) {
  [data-style="glass"] { --zh-glass-fill: var(--zh-glass-solid); --zh-glass-fill-strong: var(--zh-glass-solid); --zh-glass-well: var(--zh-glass-solid); }
  [data-style="glass"] .topbar, [data-style="glass"] .stage, [data-style="glass"] .zh-pop-body, [data-style="glass"] dialog.zh-modal, [data-style="glass"] .zh-drawer { -webkit-backdrop-filter: none; backdrop-filter: none; }
}
@media (prefers-contrast: more), (forced-colors: active) {
  [data-style="glass"] .zh-card, [data-style="glass"] .zh-btn, [data-style="glass"] .zh-input, [data-style="glass"] .zh-select select, [data-style="glass"] .zh-textarea,
  [data-style="glass"] .zh-tag, [data-style="glass"] .seg, [data-style="glass"] .zh-alert, [data-style="glass"] .zh-sel-trigger, [data-style="glass"] .zh-dp-field,
  [data-style="glass"] .zh-inp-box, [data-style="glass"] .zh-upload-drop, [data-style="glass"] .zh-pg-btn { border: 1px solid CanvasText; box-shadow: none; }
  [data-style="glass"] body { background-image: none; }
}
@media (prefers-reduced-motion: reduce) { [data-style="glass"] * { transition: none !important; } }