/* ==========================================================================
   AZRA Glass — glassmorphism layer for Community, Community Hub and AZRA AI
   Load LAST (after azra-pure-black.css). Purely visual: no markup changes.

   - Top bars, search boxes, dropdowns, sheets, modals  → frosted glass
   - Bottom navigation + AI composer                    → floating glass, detached from the screen edge
   - Text inputs / textareas / selects                  → glass fields with gold focus glow
   - Feed cards                                         → wave-in animation (driven by azra-glass.js)

   Tweak the look from the variables below.
   ========================================================================== */

@property --azg-spot{syntax:"<number>";inherits:true;initial-value:0}

:root{
  --azg-blur:24px;
  --azg-sat:185%;
  --azg-border:rgba(255,255,255,.17);
  --azg-border-soft:rgba(255,255,255,.10);
  --azg-tint:rgba(18,18,24,.34);          /* glass body colour   */
  --azg-tint-strong:rgba(14,14,19,.62);   /* overlays / dropdowns */
  --azg-gold:255,213,0;
  --azg-float-gap:12px;                   /* distance of floating bars from screen edge */
  --azg-sheen:linear-gradient(118deg,rgba(255,255,255,.17) 0%,rgba(255,255,255,.05) 26%,rgba(255,255,255,0) 52%,rgba(255,255,255,.05) 100%);
  --azg-spotlight:radial-gradient(240px circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,calc(var(--azg-spot)*.16)),transparent 62%);
  --azg-rim:inset 1px 1px 0 rgba(255,255,255,.30),inset -1px -1px 0 rgba(255,255,255,.07),inset 0 0 26px rgba(255,255,255,.035);
  --azg-drop:0 14px 44px rgba(0,0,0,.62),0 3px 10px rgba(0,0,0,.45);
}

/* ---------- ambient light: gives the glass something to refract on a pure-black canvas ---------- */
html::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(46vmax 34vmax at 12% 8%,rgba(var(--azg-gold),.085),transparent 62%),
    radial-gradient(40vmax 32vmax at 92% 30%,rgba(92,120,255,.075),transparent 64%),
    radial-gradient(44vmax 30vmax at 38% 104%,rgba(255,92,150,.06),transparent 64%);
  mix-blend-mode:screen;
  animation:azg-drift 26s ease-in-out infinite alternate;
}
@keyframes azg-drift{
  from{transform:translate3d(0,0,0) scale(1)}
  to{transform:translate3d(-2.5%,2%,0) scale(1.08)}
}

/* =====================================================================
   1) TOP BARS
   ===================================================================== */
html body .topbar,
html body .hub-head.hub-top{
  background:var(--azg-spotlight),var(--azg-sheen),var(--azg-tint)!important;
  -webkit-backdrop-filter:blur(var(--azg-blur)) saturate(var(--azg-sat))!important;
  backdrop-filter:blur(var(--azg-blur)) saturate(var(--azg-sat))!important;
  border-bottom:1px solid var(--azg-border-soft)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -1px 0 rgba(255,255,255,.04),0 12px 34px rgba(0,0,0,.38)!important;
}

/* =====================================================================
   2) SEARCH BOXES + ICON CHIPS
   ===================================================================== */
html body .gsearch input,
html body .hub-search,
html body .hx-filter input,
html body .hx-filter-inline input,
html body .hx-pal-input,
html body .ai-lang,
html body .az-lang{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.035))!important;
  border:1px solid rgba(255,255,255,.15)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.20),inset 0 -10px 18px -14px rgba(255,255,255,.10),0 6px 18px rgba(0,0,0,.32)!important;
  -webkit-backdrop-filter:blur(16px) saturate(170%);
  backdrop-filter:blur(16px) saturate(170%);
  transition:border-color .22s,box-shadow .22s,background .22s,transform .22s;
}
html body .hx-pal-input{border-radius:0!important;border-width:0 0 1px!important;box-shadow:none!important;background:transparent!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html body .hub-search:hover,
html body .gsearch input:hover{
  border-color:rgba(255,255,255,.28)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.14),rgba(255,255,255,.05))!important;
}
html body .gsearch input:focus,
html body .hx-filter input:focus,
html body .hx-filter-inline input:focus,
html body .hub-search:focus-visible{
  border-color:rgba(var(--azg-gold),.65)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.05))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 0 0 4px rgba(var(--azg-gold),.12),0 0 30px rgba(var(--azg-gold),.20)!important;
}
html body .hub-search kbd{
  background:rgba(255,255,255,.08)!important;border-color:rgba(255,255,255,.18)!important;color:#c9c9d0!important;
}

/* round icon buttons living in bars */
html body .topbar .icon-btn,
html body .hub-ic,
html body .ai-icon,
html body .ai-pill{
  background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
}
html body .topbar .icon-btn:hover,
html body .hub-ic:hover,
html body .ai-icon:hover,
html body .ai-pill:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.17),rgba(255,255,255,.06))!important;
  border-color:rgba(255,255,255,.26)!important;
}
html body .ai-lang button[aria-pressed=true],
html body .az-lang button[aria-pressed=true]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 4px 14px rgba(var(--azg-gold),.30);
}

/* =====================================================================
   3) DROPDOWNS / OVERLAYS / SHEETS / MODALS
   (nested inside blurred bars, so they carry a stronger tint of their own)
   ===================================================================== */
html body .results,
html body .hx-pal-box,
html body .modal,
html body .hxm-panel,
html body .ai-modal-card,
html body .ai-gate-card{
  background:var(--azg-sheen),var(--azg-tint-strong)!important;
  -webkit-backdrop-filter:blur(30px) saturate(190%)!important;
  backdrop-filter:blur(30px) saturate(190%)!important;
  border:1px solid var(--azg-border)!important;
  box-shadow:var(--azg-rim),var(--azg-drop)!important;
}
html body .results{background:var(--azg-sheen),rgba(12,12,16,.84)!important}
html body .modal-head,
html body .modal-foot{background:rgba(12,12,16,.35)!important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:var(--azg-border-soft)!important}
html body .overlay,
html body .hx-pal,
html body .hxm-back,
html body .ai-modal-overlay,
html body .ai-gate{
  background:rgba(0,0,0,.50)!important;
  -webkit-backdrop-filter:blur(10px) saturate(130%)!important;
  backdrop-filter:blur(10px) saturate(130%)!important;
}
html body .results a:hover,
html body .results button.row:hover,
html body .results .sel,
html body .hx-pal-item.sel,
html body .hx-pal-item:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.05))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14)!important;
}

/* =====================================================================
   4) FLOATING BOTTOM NAVIGATION  (Community + Hub)
   ===================================================================== */
html body .bottomnav,
html body .hxm-bar{
  position:fixed!important;
  inset:auto var(--azg-float-gap) calc(var(--azg-float-gap) + env(safe-area-inset-bottom)) var(--azg-float-gap)!important;
  max-width:540px;margin-inline:auto!important;
  height:auto!important;min-height:66px;
  padding:6px!important;gap:3px!important;
  border:1px solid var(--azg-border)!important;border-top:1px solid rgba(255,255,255,.26)!important;
  border-radius:30px!important;
  background:var(--azg-spotlight),var(--azg-sheen),var(--azg-tint)!important;
  -webkit-backdrop-filter:blur(26px) saturate(190%)!important;
  backdrop-filter:blur(26px) saturate(190%)!important;
  box-shadow:var(--azg-rim),0 18px 50px rgba(0,0,0,.7),0 4px 14px rgba(0,0,0,.5)!important;
  animation:azg-float-in .7s cubic-bezier(.2,1.1,.3,1) both;
}
@keyframes azg-float-in{from{opacity:0;transform:translateY(34px) scale(.96)}to{opacity:1;transform:none}}

html body .bottomnav button,
html body .hxm-bar>*{
  height:54px!important;border-radius:23px!important;
  transition:background .25s,color .25s,transform .25s cubic-bezier(.3,1.5,.5,1),box-shadow .25s!important;
}
html body .bottomnav button:active,
html body .hxm-bar>*:active{transform:scale(.9)}
html body .bottomnav button.active,
html body .hxm-bar>.on{
  background:linear-gradient(180deg,rgba(var(--azg-gold),.22),rgba(var(--azg-gold),.06))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.30),inset 0 0 0 1px rgba(var(--azg-gold),.18),0 0 24px rgba(var(--azg-gold),.14)!important;
}
/* the central “create” button: gold glass bead */
html body .bottomnav .plus{
  width:54px!important;height:54px!important;border-radius:50%!important;flex:none;
  transform:translateY(-9px);
  background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.65),rgba(255,255,255,0) 46%),linear-gradient(145deg,rgba(255,228,80,.96),rgba(255,184,0,.88))!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.75),inset 0 -7px 14px rgba(170,100,0,.35),0 10px 28px rgba(255,200,0,.38),0 0 0 4px rgba(0,0,0,.35)!important;
}
html body .bottomnav .plus:active{transform:translateY(-9px) scale(.92)}

/* keep content and toasts clear of the floating bar */
@media(max-width:1020px){
  html body .layout,html body .layout.no-right{padding-bottom:calc(var(--bottombar,60px) + 64px + env(safe-area-inset-bottom))!important}
  html body .toasts{bottom:calc(var(--bottombar,60px) + 36px + env(safe-area-inset-bottom))!important}
}
@media(max-width:900px){
  html body .hub-main{padding-bottom:calc(112px + env(safe-area-inset-bottom))!important}
  html body .toasts{bottom:calc(104px + env(safe-area-inset-bottom))!important}
  html body .hxm-panel{border-radius:28px 28px 0 0!important}
}

/* =====================================================================
   5) WRITING BOXES  (inputs, textareas, selects, composers)
   ===================================================================== */
html body :is(#view,.modal,.hub-main,.hxm-panel,.composer,.ai-modal-card,.hx-pal-box,.card,.field)
  :is(input:not([type]),input[type=text],input[type=search],input[type=email],input[type=url],input[type=password],input[type=number],input[type=tel],input[type=date],input[type=datetime-local],textarea,select),
html body .composer textarea,
html body .profile-readme-editor textarea{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-top-color:rgba(255,255,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),inset 0 -12px 22px -18px rgba(255,255,255,.12),0 6px 20px rgba(0,0,0,.30)!important;
  -webkit-backdrop-filter:blur(14px) saturate(165%);
  backdrop-filter:blur(14px) saturate(165%);
  color:#fff;
  transition:border-color .22s,box-shadow .22s,background .22s;
}
html body :is(#view,.modal,.hub-main,.hxm-panel,.composer,.ai-modal-card,.card,.field)
  :is(input,textarea,select)::placeholder,
html body .composer textarea::placeholder{color:rgba(255,255,255,.42)!important}
html body :is(#view,.modal,.hub-main,.hxm-panel,.composer,.ai-modal-card,.card,.field)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]),textarea,select):focus,
html body .composer textarea:focus,
html body .profile-readme-editor textarea:focus{
  outline:0!important;
  border-color:rgba(var(--azg-gold),.62)!important;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.045))!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.26),0 0 0 4px rgba(var(--azg-gold),.12),0 0 32px rgba(var(--azg-gold),.18)!important;
}
html body .composer{
  background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015))!important;
  border-top:1px solid var(--azg-border-soft)!important;
}

/* =====================================================================
   6) AZRA AI  — floating glass header + floating glass composer
   ===================================================================== */
html body .ai-top{
  position:absolute;z-index:6;top:max(10px,env(safe-area-inset-top));inset-inline:var(--azg-float-gap);
  padding:8px 12px!important;border-radius:24px;
  border:1px solid var(--azg-border);
  background:var(--azg-spotlight),var(--azg-sheen),var(--azg-tint);
  -webkit-backdrop-filter:blur(var(--azg-blur)) saturate(var(--azg-sat));
  backdrop-filter:blur(var(--azg-blur)) saturate(var(--azg-sat));
  box-shadow:var(--azg-rim),0 14px 40px rgba(0,0,0,.55);
}
html body .ai-scroll{padding-top:92px!important;padding-bottom:230px!important}
/* the empty-state hero used true centering, which clips its top edge once the scroller has bar-sized padding */
html body .ai-empty{justify-content:flex-start;justify-content:safe center;min-height:auto}

html body .ai-composer-wrap{
  position:absolute;z-index:6;inset-inline:0;bottom:0;
  background:none!important;pointer-events:none;
  padding:0 var(--azg-float-gap) calc(16px + env(safe-area-inset-bottom))!important;
}
html body .ai-composer-wrap>*{pointer-events:auto}
html body .ai-composer{pointer-events:none}
html body .ai-composer>*{pointer-events:auto}
html body .ai-box{
  padding:8px 8px 8px 22px;
  border-radius:30px!important;
  border:1px solid var(--azg-border)!important;border-top-color:rgba(255,255,255,.30)!important;
  background:var(--azg-spotlight),var(--azg-sheen),var(--azg-tint)!important;
  -webkit-backdrop-filter:blur(28px) saturate(195%)!important;
  backdrop-filter:blur(28px) saturate(195%)!important;
  box-shadow:var(--azg-rim),0 20px 56px rgba(0,0,0,.7),0 4px 14px rgba(0,0,0,.45)!important;
}
html[dir=rtl] body .ai-box{padding:8px 22px 8px 8px}
html body .ai-box:focus-within{
  border-color:rgba(var(--azg-gold),.55)!important;
  box-shadow:var(--azg-rim),0 20px 56px rgba(0,0,0,.7),0 0 0 4px rgba(var(--azg-gold),.10),0 0 40px rgba(var(--azg-gold),.16)!important;
}
/* the textarea sits inside the glass box — it must stay flat */
html body .ai-box textarea{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html body .ai-send{
  background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.6),rgba(255,255,255,0) 46%),linear-gradient(145deg,rgba(255,228,80,.96),rgba(255,184,0,.9));
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -6px 12px rgba(170,100,0,.3),0 8px 22px rgba(255,200,0,.32);
}
html body .ai-mode{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(16px) saturate(170%);backdrop-filter:blur(16px) saturate(170%);
}
html body .ai-mode[aria-pressed=true]{
  background:linear-gradient(145deg,rgba(255,228,80,.95),rgba(255,190,0,.85))!important;border-color:rgba(255,235,120,.8)!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.65),0 6px 18px rgba(255,200,0,.28);
}
html body .ai-jump{
  background:var(--azg-sheen),var(--azg-tint-strong)!important;border:1px solid var(--azg-border)!important;
  -webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px);box-shadow:var(--azg-rim),0 10px 26px rgba(0,0,0,.6)!important;
}
html body .ai-foot{text-shadow:0 1px 8px #000}

@media(max-width:900px){
  html body .ai-side{
    background:var(--azg-sheen),rgba(10,10,14,.62)!important;
    -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
    border-inline-end:1px solid var(--azg-border)!important;box-shadow:var(--azg-rim),0 0 70px rgba(0,0,0,.7);
  }
  html body .ai-scrim{background:rgba(0,0,0,.5)!important;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
  html body .ai-scroll{padding-bottom:218px!important}
}

/* =====================================================================
   7) FEED WAVE-IN  (classes added by azra-glass.js)
   ===================================================================== */
.azg-js .azg-pre{opacity:0;transform:translate3d(0,44px,0) scale(.95)}
.azg-js .azg-in{
  animation:azg-wave 1.05s both;
  animation-delay:calc(var(--azg-i,0)*75ms);
  will-change:transform,opacity;
}
/* a damped wave: slides up sideways, overshoots, swings back, then locks into place */
@keyframes azg-wave{
  0%  {opacity:0;transform:translate3d(var(--azg-x,0px),52px,0) rotate(var(--azg-r,0deg)) scale(.94);animation-timing-function:cubic-bezier(.2,.75,.3,1)}
  46% {opacity:1;transform:translate3d(calc(var(--azg-x,0px)*-.38),-11px,0) rotate(calc(var(--azg-r,0deg)*-.45)) scale(1.012);animation-timing-function:cubic-bezier(.4,0,.3,1)}
  68% {opacity:1;transform:translate3d(calc(var(--azg-x,0px)*.14),4px,0) rotate(calc(var(--azg-r,0deg)*.15)) scale(.998);animation-timing-function:ease-in-out}
  86% {opacity:1;transform:translate3d(calc(var(--azg-x,0px)*-.04),-1px,0) rotate(0deg) scale(1)}
  100%{opacity:1;transform:none}
}

@media(prefers-reduced-motion:reduce){
  html::before,
  html body .bottomnav,html body .hxm-bar{animation:none!important}
  .azg-js .azg-pre{opacity:1;transform:none}
  .azg-js .azg-in{animation:none}
}

/* fallback for browsers without backdrop-filter: make the glass a bit more opaque so text stays readable */
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  :root{--azg-tint:rgba(14,14,18,.88);--azg-tint-strong:rgba(12,12,16,.94)}
}

/* =====================================================================
   8) ULTRA SEARCH + WORKSPACE  (same glass language)
   ===================================================================== */
html body .azn-header.azn-in-shell{
  position:sticky;top:0;z-index:80;padding:0 24px;border-radius:0 0 26px 26px;
  border:1px solid var(--azg-border-soft);border-top:0;
  background:var(--azg-spotlight),var(--azg-sheen),var(--azg-tint);
  -webkit-backdrop-filter:blur(var(--azg-blur)) saturate(var(--azg-sat));
  backdrop-filter:blur(var(--azg-blur)) saturate(var(--azg-sat));
  box-shadow:var(--azg-rim),0 14px 38px rgba(0,0,0,.45);
}
html body .us-search{
  border-radius:26px!important;
  border:1px solid var(--azg-border)!important;border-top-color:rgba(255,255,255,.30)!important;
  background:var(--azg-spotlight),var(--azg-sheen),var(--azg-tint)!important;
  -webkit-backdrop-filter:blur(26px) saturate(190%);backdrop-filter:blur(26px) saturate(190%);
  box-shadow:var(--azg-rim),0 18px 50px rgba(0,0,0,.6)!important;
}
html body .us-search:focus-within{
  border-color:rgba(var(--azg-gold),.6)!important;
  box-shadow:var(--azg-rim),0 18px 50px rgba(0,0,0,.6),0 0 0 4px rgba(var(--azg-gold),.11),0 0 40px rgba(var(--azg-gold),.16)!important;
}
html body .us-search input{background:none!important;border:0!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
html body .us-search button{
  background:radial-gradient(circle at 30% 18%,rgba(255,255,255,.55),rgba(255,255,255,0) 48%),linear-gradient(145deg,rgba(255,228,80,.97),rgba(255,184,0,.9))!important;
  box-shadow:inset 0 1px 1px rgba(255,255,255,.7),inset 0 -6px 12px rgba(170,100,0,.3),0 8px 22px rgba(255,200,0,.3)!important;
  border-radius:20px!important;
}
html body .us-filter-row button,
html body .us-provider-chip,
html body .us-tool-buttons button,
html body .us-pager button{
  background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(14px) saturate(170%);backdrop-filter:blur(14px) saturate(170%);
}
html body .us-filter-row button.active,
html body .us-provider-chip.active{
  background:linear-gradient(180deg,rgba(var(--azg-gold),.26),rgba(var(--azg-gold),.08))!important;
  border-color:rgba(var(--azg-gold),.5)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 0 22px rgba(var(--azg-gold),.16)!important;
}
html body .us-results-area,
html body .us-side-card,
html body .us-direct-panel,
html body .us-gate,
html body .us-ai-answer-panel{
  background:var(--azg-sheen),rgba(14,15,19,.52)!important;
  -webkit-backdrop-filter:blur(20px) saturate(170%);backdrop-filter:blur(20px) saturate(170%);
  border-color:var(--azg-border-soft)!important;
  box-shadow:var(--azg-rim),0 12px 36px rgba(0,0,0,.4)!important;
}
html body .us-ai-answer-panel{border-color:rgba(var(--azg-gold),.30)!important}
html body :is(.us-side-card,.us-result-tools,.us-direct-panel,.us-engine-catalog-tools,.ws-main,.ws-dialog-inner)
  :is(input:not([type=checkbox]):not([type=radio]),select,textarea){
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.14)!important;border-top-color:rgba(255,255,255,.24)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 6px 18px rgba(0,0,0,.28)!important;
  border-radius:14px!important;
  transition:border-color .22s,box-shadow .22s;
}
html body :is(.us-side-card,.us-result-tools,.us-direct-panel,.us-engine-catalog-tools,.ws-main,.ws-dialog-inner)
  :is(input,select,textarea):focus{
  outline:0!important;border-color:rgba(var(--azg-gold),.6)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 0 0 4px rgba(var(--azg-gold),.12),0 0 28px rgba(var(--azg-gold),.16)!important;
}
html body .us-image-dialog,
html body .ws-dialog-inner{
  background:var(--azg-sheen),var(--azg-tint-strong)!important;
  -webkit-backdrop-filter:blur(30px) saturate(190%);backdrop-filter:blur(30px) saturate(190%);
  border:1px solid var(--azg-border)!important;box-shadow:var(--azg-rim),var(--azg-drop)!important;
}
html body .ws-top{
  background:var(--azg-spotlight),var(--azg-sheen),var(--azg-tint)!important;
  -webkit-backdrop-filter:blur(var(--azg-blur)) saturate(var(--azg-sat));backdrop-filter:blur(var(--azg-blur)) saturate(var(--azg-sat));
  border-bottom:1px solid var(--azg-border-soft)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 12px 34px rgba(0,0,0,.38);
}