/* Final liquid-glass visual layer. Navigation geometry is intentionally left exactly as in production. */

/* Preserve the production active-icon geometry exactly as it is now. */
#nav a.active .icon{
  position:absolute!important;
  left:50%!important;
  top:-5px!important;
  width:21px!important;
  height:21px!important;
  transform:translateX(-50%)!important;
}

/* Transparent material + independently tunable lens effect. */
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) :is(.card,.metric,.tile,.lesson,.list-row,.option,.feedback,.badge,.answer-reviewed,.settings-card,.mode-switch,.segmented,.course-cover){
  background:
    radial-gradient(155% 48% at 50% -20%,var(--lg-glint) 0%,transparent 48%),
    linear-gradient(98deg,var(--lg-prism-cyan) 0%,transparent 8%,transparent 91%,var(--lg-prism-warm) 100%),
    linear-gradient(118deg,var(--lg-specular-strong) 0%,transparent 18%,transparent 72%,var(--lg-edge-soft) 100%),
    color-mix(in srgb,var(--surface) var(--lg-fill),transparent)!important;
  border-color:var(--lg-edge)!important;
  -webkit-backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness)) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness)) contrast(var(--lg-contrast))!important;
  box-shadow:
    inset 0 1.7px 0 var(--lg-glint),
    inset 1.2px 0 0 var(--lg-prism-cyan),
    inset -1.2px 0 0 var(--lg-prism-warm),
    inset 0 -1px 0 rgba(255,255,255,.15),
    inset 0 0 var(--lg-inner-glow) rgba(255,255,255,.035),
    0 10px 27px var(--lg-drop)!important;
}
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) .hero{
  background:
    radial-gradient(170% 52% at 50% -22%,var(--lg-glint) 0%,transparent 48%),
    linear-gradient(98deg,var(--lg-prism-cyan) 0%,transparent 9%,transparent 90%,var(--lg-prism-warm) 100%),
    linear-gradient(118deg,var(--lg-specular-strong) 0%,transparent 20%,transparent 72%,var(--lg-edge-soft) 100%),
    color-mix(in srgb,var(--hero) var(--lg-hero-fill),transparent)!important;
  border:1px solid var(--lg-edge)!important;
  -webkit-backdrop-filter:blur(var(--lg-hero-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness)) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-hero-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness)) contrast(var(--lg-contrast))!important;
  box-shadow:
    inset 0 1.8px 0 var(--lg-glint),
    inset 1.25px 0 0 var(--lg-prism-cyan),
    inset -1.25px 0 0 var(--lg-prism-warm),
    inset 0 -1px 0 rgba(255,255,255,.16),
    inset 0 0 var(--lg-inner-glow) rgba(255,255,255,.04),
    0 14px 32px var(--lg-drop)!important;
}
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) :is(input:not([type=checkbox]):not([type=range]),select,textarea,.secondary){
  background:
    radial-gradient(145% 46% at 50% -18%,var(--lg-glint-soft),transparent 50%),
    linear-gradient(98deg,var(--lg-prism-cyan),transparent 9%,transparent 91%,var(--lg-prism-warm)),
    color-mix(in srgb,var(--surface) var(--lg-control-fill),transparent)!important;
  border-color:var(--lg-edge-soft)!important;
  -webkit-backdrop-filter:blur(var(--lg-control-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-control-blur)) saturate(var(--lg-saturate)) contrast(var(--lg-contrast))!important;
  box-shadow:inset 0 1.2px 0 var(--lg-edge),inset 1px 0 0 var(--lg-prism-cyan),inset -1px 0 0 var(--lg-prism-warm),inset 0 -1px 0 rgba(255,255,255,.09)!important;
}
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) #nav{
  background:
    radial-gradient(170% 56% at 50% -28%,var(--lg-glint) 0%,transparent 50%),
    linear-gradient(98deg,var(--lg-prism-cyan) 0%,transparent 8%,transparent 91%,var(--lg-prism-warm) 100%),
    linear-gradient(116deg,var(--lg-specular-strong) 0%,transparent 24%,transparent 74%,var(--lg-edge-soft) 100%),
    color-mix(in srgb,var(--surface) var(--lg-nav-fill),transparent)!important;
  border-color:var(--lg-edge)!important;
  -webkit-backdrop-filter:blur(var(--lg-nav-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness)) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-nav-blur)) saturate(var(--lg-saturate)) brightness(var(--lg-brightness)) contrast(var(--lg-contrast))!important;
  box-shadow:
    inset 0 1.8px 0 var(--lg-glint),
    inset 1.2px 0 0 var(--lg-prism-cyan),
    inset -1.2px 0 0 var(--lg-prism-warm),
    inset 0 -1px 0 rgba(255,255,255,.14),
    0 14px 32px var(--lg-drop)!important;
}
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) .header-actions .icon-button{
  background:
    radial-gradient(circle at 34% 6%,var(--lg-glint),transparent 46%),
    linear-gradient(100deg,var(--lg-prism-cyan),transparent 28%,transparent 72%,var(--lg-prism-warm)),
    color-mix(in srgb,var(--surface) var(--lg-control-fill),transparent)!important;
  border:1px solid var(--lg-edge-soft)!important;
  -webkit-backdrop-filter:blur(var(--lg-control-blur)) saturate(var(--lg-saturate))!important;
  backdrop-filter:blur(var(--lg-control-blur)) saturate(var(--lg-saturate))!important;
  box-shadow:inset 0 1.2px 0 var(--lg-edge),inset 1px 0 0 var(--lg-prism-cyan),inset -1px 0 0 var(--lg-prism-warm),inset 0 -1px 0 rgba(255,255,255,.11),0 6px 15px var(--lg-drop)!important;
}
html[data-liquid-glass="on"]:not([data-wallpaper="plain"]) .hero .primary{
  background:
    radial-gradient(150% 50% at 50% -16%,var(--lg-glint-soft),transparent 52%),
    linear-gradient(100deg,var(--lg-prism-cyan),transparent 18%,transparent 82%,var(--lg-prism-warm)),
    color-mix(in srgb,#d7efc4 var(--lg-button-fill),transparent)!important;
  border:1px solid color-mix(in srgb,#fff var(--lg-button-edge),transparent)!important;
  -webkit-backdrop-filter:blur(var(--lg-control-blur)) saturate(1.18) contrast(var(--lg-contrast))!important;
  backdrop-filter:blur(var(--lg-control-blur)) saturate(1.18) contrast(var(--lg-contrast))!important;
  box-shadow:inset 0 1.5px 0 rgba(255,255,255,.48),inset 1px 0 0 var(--lg-prism-cyan),inset -1px 0 0 var(--lg-prism-warm),inset 0 -1px 0 rgba(255,255,255,.12),0 7px 18px rgba(0,0,0,.08)!important;
}