/* ARTEMIDA V54 — crisp procedural background shaders. No blur on shader canvas. */
body{position:relative;isolation:isolate}
.shader-background-canvas{position:fixed;inset:0;z-index:-8;width:100%;height:100%;pointer-events:none;opacity:.78;transition:opacity .34s ease;contain:strict;image-rendering:auto;filter:none!important}
html[data-theme="pearl"] .shader-background-canvas{opacity:.48;filter:none!important}
body.shader-off .shader-background-canvas{opacity:0}
/* When a shader is active, the old giant background circles disappear completely. */
body.shader-active .background-glow,.landing-page.shader-active .background-glow{opacity:0!important;visibility:hidden!important;animation:none!important}
body.shader-off .background-glow,.landing-page.shader-off .background-glow{visibility:visible}
body::before{z-index:-5!important}.landing-grid{z-index:-5!important}.landing-page .landing-grid{z-index:-5!important}
body[data-page="faq"]::after{z-index:-4!important;opacity:1!important}

.shader-control{position:relative;display:flex;align-items:center;z-index:8}
.shader-trigger{width:42px;height:42px;min-width:42px;padding:0!important;display:grid;place-items:center;border-radius:13px!important;cursor:pointer;color:var(--muted);transition:color .2s ease,border-color .24s ease,background .24s ease,box-shadow .28s ease!important}
.shader-trigger svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.55;stroke-linecap:round;stroke-linejoin:round}
.shader-trigger:hover,.shader-control.open .shader-trigger{color:var(--text);border-color:rgb(var(--theme-rgb)/.28)!important;background:rgb(var(--theme-rgb)/.055)!important;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 9px 25px rgba(0,0,0,.13)!important;transform:none!important}
.shader-popover{position:fixed;z-index:1100;width:min(370px,calc(100vw - 20px));max-height:min(76vh,620px);overflow:auto;padding:11px;border:1px solid rgba(255,255,255,.13);border-radius:17px;color:var(--text);background:linear-gradient(145deg,rgba(255,255,255,.065),rgb(var(--theme-rgb)/.014)),rgba(7,9,13,.78);-webkit-backdrop-filter:blur(14px) saturate(138%);backdrop-filter:blur(14px) saturate(138%);box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 22px 65px rgba(0,0,0,.28);opacity:0;visibility:hidden;transform:translateY(-5px) scale(.985);transition:opacity .2s ease,transform .24s cubic-bezier(.18,.78,.2,1),visibility .2s ease}
.shader-popover.open{opacity:1;visibility:visible;transform:none}
.shader-popover-head{position:sticky;top:-11px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:10px;margin:-11px -11px 9px;padding:11px;background:rgba(8,9,13,.84);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.shader-popover-head div{display:grid;gap:2px}.shader-popover-head small{color:var(--primary);font-size:.52rem;font-weight:850;letter-spacing:.12em}.shader-popover-head b{font-size:.78rem}.shader-popover-head button{width:28px;height:28px;border:1px solid rgba(255,255,255,.10);border-radius:9px;color:var(--muted);background:rgba(255,255,255,.035);cursor:pointer}
.shader-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.shader-choice{min-height:48px;display:grid;grid-template-columns:32px minmax(0,1fr);align-items:center;gap:9px;padding:7px 9px;border:1px solid rgba(255,255,255,.075);border-radius:12px;color:var(--muted);background:rgba(255,255,255,.025);cursor:pointer;text-align:left;transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}.shader-choice:hover,.shader-choice.active{color:var(--text);border-color:rgb(var(--theme-rgb)/.26);background:rgb(var(--theme-rgb)/.055);box-shadow:inset 0 1px 0 rgba(255,255,255,.10)}
.shader-preview{width:32px;height:32px;border-radius:9px;border:1px solid rgba(255,255,255,.14);box-shadow:inset 0 1px 0 rgba(255,255,255,.20);background:var(--preview)}.shader-choice b{font-size:.61rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.shader-intensity{display:grid;grid-template-columns:auto minmax(0,1fr) 34px;align-items:center;gap:8px;margin-top:10px;padding:8px 5px 2px;color:var(--muted-2);font-size:.55rem}.shader-intensity input{width:100%;accent-color:var(--primary)}.shader-intensity output{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
html[data-theme="pearl"] .shader-popover{color:#1e1720;background:linear-gradient(145deg,rgba(255,255,255,.88),rgba(255,255,255,.68));border-color:rgba(58,43,53,.12);box-shadow:inset 0 1px 0 #fff,0 20px 55px rgba(61,47,57,.12)}
html[data-theme="pearl"] .shader-popover-head{background:rgba(250,247,250,.88)}html[data-theme="pearl"] .shader-choice{color:#6b5d67;border-color:rgba(58,43,53,.10);background:rgba(255,255,255,.46)}html[data-theme="pearl"] .shader-choice:hover,html[data-theme="pearl"] .shader-choice.active{color:#1f1820;background:rgb(var(--theme-rgb)/.08)}
@media(max-width:820px){.shader-trigger{width:40px;height:40px;min-width:40px}.shader-popover{right:9px!important;left:auto!important;top:66px!important;width:min(360px,calc(100vw - 18px))}.shader-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.shader-grid{grid-template-columns:1fr}.shader-popover{max-height:72vh}}
@media(prefers-reduced-motion:reduce){.shader-background-canvas{display:none}.shader-trigger,.shader-popover,.shader-choice{transition:none!important}}


/* V55 — shader cleanup: no block artifacts, hide all grids under shaders, restore brighter glass. */
.shader-background-canvas{z-index:-9!important;opacity:1!important;mix-blend-mode:normal!important;filter:none!important}
body.shader-active .landing-grid,
body.shader-active[data-page="faq"]::after,
body.shader-active::after,
body.shader-active .background-glow{opacity:0!important;visibility:hidden!important;animation:none!important}
body.shader-active .glass-panel,
body.shader-active .glass-card,
body.shader-active .glass-mini,
body.shader-active .theme-popover,
body.shader-active .shader-popover,
body.shader-active .network-float,
body.shader-active .network-float-body,
body.shader-active .site-top-hub,
body.shader-active .page-topbar,
body.shader-active .legal-topbar,
body.shader-active .faq-item,
body.shader-active .purchase-auto-note,
body.shader-active .modal{
  background:linear-gradient(145deg,rgba(255,255,255,.11),rgba(255,255,255,.035)),rgba(8,10,14,.26)!important;
  border-color:rgba(255,255,255,.15)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 16px 42px rgba(0,0,0,.18),0 0 18px rgb(var(--theme-rgb)/.05)!important;
}
html[data-theme="pearl"] body.shader-active .glass-panel,
html[data-theme="pearl"] body.shader-active .glass-card,
html[data-theme="pearl"] body.shader-active .glass-mini,
html[data-theme="pearl"] body.shader-active .theme-popover,
html[data-theme="pearl"] body.shader-active .shader-popover,
html[data-theme="pearl"] body.shader-active .network-float,
html[data-theme="pearl"] body.shader-active .network-float-body,
html[data-theme="pearl"] body.shader-active .site-top-hub,
html[data-theme="pearl"] body.shader-active .page-topbar,
html[data-theme="pearl"] body.shader-active .legal-topbar,
html[data-theme="pearl"] body.shader-active .faq-item,
html[data-theme="pearl"] body.shader-active .purchase-auto-note,
html[data-theme="pearl"] body.shader-active .modal{
  background:linear-gradient(145deg,rgba(255,255,255,.62),rgba(255,255,255,.42)),rgba(255,248,251,.26)!important;
  border-color:rgba(60,44,54,.14)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 14px 34px rgba(69,50,61,.10),0 0 14px rgb(var(--theme-rgb)/.045)!important;
}


/* V56 — user-facing rename: these are authored animated backgrounds, not shader tech. */
.shader-popover-head b{letter-spacing:-.01em}
.shader-choice b{font-size:.72rem!important}
.shader-preview{box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 8px 18px rgba(0,0,0,.16)!important}


/* V57 — combined appearance popover and full background cleanup under authored backgrounds. */
[data-shader-grid].shader-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
[data-shader-grid] .shader-choice{min-height:56px;display:grid;grid-template-columns:34px minmax(0,1fr);align-items:center;gap:9px;padding:8px 10px;border:1px solid rgba(255,255,255,.08);border-radius:14px;color:var(--muted);background:rgba(255,255,255,.028);cursor:pointer;text-align:left;transition:border-color .2s ease,background .2s ease,color .2s ease,box-shadow .2s ease}
[data-shader-grid] .shader-choice:hover,[data-shader-grid] .shader-choice.active{color:var(--text);border-color:rgb(var(--theme-rgb)/.28);background:rgb(var(--theme-rgb)/.06);box-shadow:inset 0 1px 0 rgba(255,255,255,.11),0 10px 24px rgb(var(--theme-rgb)/.05)}
[data-shader-grid] .shader-preview{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.16);background:var(--preview)}
[data-shader-grid] .shader-choice b{font-size:.7rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.combined-shader-intensity{display:grid!important;grid-template-columns:auto minmax(0,1fr) 38px;align-items:center;gap:10px;margin-top:10px;padding:4px 2px 0;color:var(--muted-2);font-size:.56rem}
.combined-shader-intensity input{width:100%;accent-color:var(--primary)}
.combined-shader-intensity output{text-align:right;color:var(--muted);font-variant-numeric:tabular-nums}
html[data-theme="pearl"] [data-shader-grid] .shader-choice{color:#685967;border-color:rgba(58,43,53,.10);background:rgba(255,255,255,.46)}
html[data-theme="pearl"] [data-shader-grid] .shader-choice:hover,html[data-theme="pearl"] [data-shader-grid] .shader-choice.active{color:#1f1820;background:rgb(var(--theme-rgb)/.08)}
@media(max-width:560px){[data-shader-grid].shader-grid{grid-template-columns:1fr}}


/* V59 final material pass: active backgrounds keep clear glass, never grey slabs. */
body.shader-active .glass-panel,body.shader-active .glass-card,body.shader-active .glass-mini,body.shader-active .theme-popover,body.shader-active .network-float,body.shader-active .site-top-hub,body.shader-active .page-topbar,body.shader-active .legal-topbar,body.shader-active .faq-item,body.shader-active .purchase-auto-note,body.shader-active .modal{
  background:linear-gradient(145deg,rgba(255,255,255,.070),rgb(var(--theme-rgb)/.018)),rgba(3,5,9,.105)!important;
  border-color:rgba(255,255,255,.145)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.25),inset 0 -1px 0 rgba(255,255,255,.045),0 15px 42px rgba(0,0,0,.14)!important;
}
body.shader-active .landing-grid,body.shader-active::before,body.shader-active::after,body.shader-active[data-page="faq"]::after,body.shader-active .background-glow{opacity:0!important;visibility:hidden!important;animation:none!important}
body.shader-off .background-glow{visibility:visible!important}