/* Glass v2: clear material, bevelled edges and reflected light.
   CSS backdrop blur is a glass approximation, not physical ray tracing. */
html[data-glass="preview"] {
  --crystal-fill:rgba(24,39,58,.24);
  --crystal-edge:rgba(222,248,255,.45);
  --crystal-light:rgba(255,255,255,.66);
  --crystal-shade:rgba(2,10,24,.25);
  --crystal-text:#ecf7ff;
  --crystal-muted:#c4d6e5;
}
html[data-glass="preview"][data-theme="light"] {
  --crystal-fill:rgba(255,255,255,.28);
  --crystal-edge:rgba(255,255,255,.85);
  --crystal-light:rgba(255,255,255,.97);
  --crystal-shade:rgba(39,66,98,.12);
  --crystal-text:#172d43;
  --crystal-muted:#354e63;
}
html[data-glass="preview"] body {
  background:#091722!important;
}
html[data-glass="preview"] body::before {
  content:'';position:fixed;inset:-12%;z-index:0;pointer-events:none;
  opacity:.78;mask-image:none;-webkit-mask-image:none;filter:blur(48px);will-change:transform;
  background:
    radial-gradient(ellipse 30% 26% at 18% 20%,rgba(61,219,196,.26),transparent 76%),
    radial-gradient(ellipse 32% 28% at 80% 17%,rgba(117,133,255,.3),transparent 75%),
    radial-gradient(ellipse 29% 30% at 83% 75%,rgba(229,111,194,.19),transparent 78%),
    radial-gradient(ellipse 37% 30% at 27% 83%,rgba(48,148,191,.22),transparent 76%),
    #0b1421;
  background-size:150% 150%;
  animation:glass-color-drift 46s ease-in-out infinite alternate;
}
html[data-glass="preview"][data-theme="light"] body::before {
  opacity:.72;
  background:
    radial-gradient(ellipse 31% 28% at 18% 19%,rgba(85,210,194,.25),transparent 76%),
    radial-gradient(ellipse 34% 30% at 82% 19%,rgba(144,157,232,.26),transparent 76%),
    radial-gradient(ellipse 30% 28% at 80% 77%,rgba(234,158,199,.17),transparent 78%),
    radial-gradient(ellipse 37% 31% at 24% 84%,rgba(84,178,201,.2),transparent 76%),
    #e9f0f1;
}
html[data-glass="preview"] body::after {
  content:'';position:fixed;inset:-20%;z-index:0;pointer-events:none;
  opacity:.62;filter:blur(76px);will-change:transform;mix-blend-mode:screen;
  background:
    radial-gradient(ellipse 22% 19% at 33% 30%,rgba(171,251,240,.18),transparent 75%),
    radial-gradient(ellipse 22% 24% at 70% 64%,rgba(189,173,255,.16),transparent 76%),
    radial-gradient(ellipse 23% 19% at 49% 88%,rgba(115,205,220,.14),transparent 74%);
  animation:glass-color-drift-soft 58s ease-in-out infinite alternate;
}
@keyframes glass-color-drift {
  0% {transform:translate3d(-2.5%,-1.8%,0) scale(1)}
  50% {transform:translate3d(1.8%,2.5%,0) scale(1.035)}
  100% {transform:translate3d(2.7%,-1.4%,0) scale(1.015)}
}
@keyframes glass-color-drift-soft {
  0% {transform:translate3d(2%,1.5%,0) scale(1)}
  100% {transform:translate3d(-2%,-2.4%,0) scale(1.05)}
}
html[data-glass="preview"] #genBg {opacity:.18!important}
html[data-glass="preview"] header.app {
  background:linear-gradient(115deg,#ffffff0d,#ffffff02),rgba(12,26,43,.20)!important;
  border-bottom:1px solid #d8f5ff38!important;
  box-shadow:0 8px 32px #03101d24,inset 0 -1px #ffffff12!important;
  backdrop-filter:blur(16px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(135%)!important;
}
html[data-glass="preview"] :is(nav.tabs,.catalog-hero,.art,.quick-actions>button,.gallery-toolbar,.card,.hwitem) {
  position:relative;
  background:linear-gradient(132deg,#ffffff18,transparent 36%,transparent 62%,#bfefff0c),var(--crystal-fill)!important;
  border:1px solid var(--crystal-edge)!important;
  box-shadow:inset 0 2px 1px -1px var(--crystal-light),inset 2px 0 2px -1px #edfcff50,inset -1px -2px 2px #b7dfff38,inset 0 0 18px #ffffff08,0 16px 36px var(--crystal-shade)!important;
  backdrop-filter:blur(13px) saturate(145%)!important;
  -webkit-backdrop-filter:blur(13px) saturate(145%)!important;
}
/* Nested backdrop roots flatten the scene; keep copy unpainted. */
html[data-glass="preview"] .catalog-copy {background:transparent!important}
html[data-glass="preview"] :is(.catalog-hero,.art,.card,.hwitem)::after {
  content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  background:linear-gradient(128deg,#ffffff18,transparent 27%,transparent 70%,#d4f9ff09);
  box-shadow:inset 0 1px 0 #ffffff60,inset -1px -1px 0 #defbff35;
}
html[data-glass="preview"] nav.tabs {
  width:fit-content;max-width:calc(100% - 32px);margin:0 auto 16px;padding:7px;
  border-radius:999px;gap:5px;scrollbar-width:none;
  background:linear-gradient(180deg,#ffffff24,#ffffff06 48%,#92bdd70a),var(--crystal-fill)!important;
}
html[data-glass="preview"] nav.tabs button {border-radius:999px;color:var(--crystal-muted)}
html[data-glass="preview"] nav.tabs button.active {
  color:var(--crystal-text)!important;
  background:linear-gradient(160deg,#e0fffc4f,#a0f4e21f 45%,#b0edff16)!important;
  border:1px solid #efffffa6!important;
  box-shadow:inset 0 2px 2px #ffffff99,inset 0 -2px 3px #67caba45,0 3px 10px #05121f30!important;
}
html[data-glass="preview"] .gallery-toolbar {padding:23px;border-radius:24px}
html[data-glass="preview"] :is(.btn:not(.primary):not(.danger),.fchip:not(.on),.work-search) {
  background:linear-gradient(150deg,#ffffff18,#ffffff03),rgba(25,48,66,.13)!important;
  border:1px solid #d6f4ff50!important;
  box-shadow:inset 0 1px 1px #ffffff65,inset 0 -1px 1px #c4edff21,0 3px 9px #02122512!important;
  color:var(--crystal-text)!important;
}
html[data-glass="preview"] .art .body {background:linear-gradient(#0b1b2c12,#0b1b2c32);position:relative;z-index:4}
html[data-glass="preview"] :is(.art .desc,.catalog-copy>p:not(.catalog-kicker),.quick-actions small,.brand-tagline,.gallery-count) {color:var(--crystal-muted)!important}
html[data-glass="preview"] :is(.art .ttl,.gallery-toolbar h2,.quick-actions b) {color:var(--crystal-text)!important}
html[data-glass="preview"] .art:hover {border-color:#f0ffffb0!important;box-shadow:inset 0 2px 2px #ffffff99,0 18px 40px #00121c55!important}
html[data-glass="preview"][data-theme="light"] header.app {background:#ffffff24!important}
html[data-glass="preview"][data-theme="light"] .art .body {background:linear-gradient(#ffffff08,#ffffff32)}
/* Comparison control is outside application forms and does not re-render them. */
.glass-review {position:fixed;z-index:70;bottom:16px;right:16px;display:flex;align-items:center;gap:14px;padding:8px 9px 8px 17px;background:#112638ed;border:1px solid #bfeeff65;border-radius:99px;color:#eefaff;font:500 12px/1.4 var(--sans);box-shadow:0 5px 24px #0005}
.glass-review button {min-height:36px;padding:8px 13px;border-radius:99px;border:1px solid #d8ffff70;background:#ffffff20;color:#fff;font:inherit;cursor:pointer}
@media(max-width:600px) {
  html[data-glass="preview"] .gallery-toolbar {padding:17px}
  html[data-glass="preview"] nav.tabs {max-width:calc(100% - 24px);margin-bottom:13px}
  .glass-review{bottom:9px;right:9px;font-size:11px}
}
@media(prefers-reduced-transparency:reduce) {
  html[data-glass="preview"] {--crystal-fill:#142c3b}
  html[data-glass="preview"][data-theme="light"] {--crystal-fill:#eff5f7}
}
@media(prefers-reduced-motion:reduce) {
  html[data-glass="preview"] body::before,html[data-glass="preview"] body::after {
    animation:none;transform:none;will-change:auto
  }
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) {
  html[data-glass="preview"] {--crystal-fill:#142c3bee}
  html[data-glass="preview"][data-theme="light"] {--crystal-fill:#eff5f7ee}
}