/* Shared frosted surfaces. Text and media stay sharp; depth never adds a hit layer. */
:root {
  --glass-fill: var(--vizurai-panel, #1b1d1f);
  --glass-rail-fill: var(--vizurai-bg, #0f1112);
  --glass-edge: var(--vizurai-border, #353739);
  --glass-highlight: transparent;
  --glass-shadow: #00000024;
  --glass-sheen: none;
  --glass-blur: 22px;
  --glass-muted: var(--vizurai-muted, #a0a2a4);
}

@supports (background: color-mix(in srgb, black, transparent)) {
  :root {
    --glass-edge: color-mix(in srgb, var(--vizurai-text, #fff) 15%, transparent);
    --glass-highlight: color-mix(in srgb, var(--vizurai-text, #fff) 24%, transparent);
    --glass-shadow: color-mix(in srgb, var(--vizurai-shadow, #000) 38%, transparent);
  }
  :root, body[data-page="home"] .top-preset-section, dialog.home-auth-dialog, dialog.trend-dialog {
    --glass-sheen: radial-gradient(ellipse at var(--glass-light-x, 18%) var(--glass-light-y, 0%),
      color-mix(in srgb, var(--vizurai-text, #fff) 13%, transparent), transparent 57%),
      linear-gradient(145deg, color-mix(in srgb, var(--vizurai-text, #fff) 5%, transparent),
      transparent 48%, color-mix(in srgb, var(--vizurai-accent, #ff0065) 5%, transparent));
  }
}

/* One frosted plane per structural container, rather than per media card. */
body.site-shell .vizurai-sidebar,
body.site-shell > :is(.home-header, .app-header, .topbar),
body.admin-workspace > header {
  --vizurai-muted: var(--glass-muted);
  background-color: var(--glass-rail-fill);
  background-image: var(--glass-sheen);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 0 var(--glass-highlight);
}

body[data-page="home"] .top-preset-section,
body.site-shell[data-tab] #composer,
dialog.home-auth-dialog,
dialog.trend-dialog {
  --vizurai-muted: var(--glass-muted);
  --dock-muted: var(--glass-muted);
  background-color: var(--glass-fill);
  background-image: var(--glass-sheen);
  border-color: var(--glass-edge);
  border-top-color: var(--glass-highlight);
  border-bottom-color: color-mix(in srgb, var(--vizurai-shadow, #000) 35%, transparent);
  box-shadow: inset 0 1px 1px var(--glass-highlight), inset 1px 0 0 #ffffff08,
    inset 0 -3px 4px #00000024, 0 3px 7px #00000024, 0 24px 64px var(--glass-shadow);
}

/* Repeated cards share the tint and thin rim, without additional blur passes.
   Art panels, video, images and administrative theme previews keep their skin. */
body[data-page="home"] :is(.hero-card, .activity-card, .model-card),
body.site-shell :is(.auth-card, .content-card, .balance-card, .mini-card),
body.admin-workspace :is(.admin-check-card, .grid > article),
body.admin-workspace .panel:not(.preview-panel) {
  --vizurai-muted: var(--glass-muted);
  background-color: var(--glass-fill);
  background-image: var(--glass-sheen);
  border-color: var(--glass-edge);
  box-shadow: inset 0 1px 1px var(--glass-highlight), inset 0 -2px 3px #0000001c, 0 10px 28px var(--glass-shadow);
}

/* Keep the discovery caption on the same plane; its artwork stays untouched. */
body[data-page="home"] .hero-card .hero-copy {
  background-color: transparent;
  background-image: none;
}

/* Form controls and actual artwork keep their contrast on a single frosted plane. */
dialog.home-auth-dialog :is(.home-auth-layout, .home-auth-panel, #home-auth-form),
dialog.trend-dialog .trend-form {
  background: transparent;
}

@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) and
          (background: color-mix(in srgb, black, transparent)) {
  :root {
    --glass-fill: color-mix(in srgb, var(--vizurai-panel, #1b1d1f) 59%, transparent);
    --glass-rail-fill: color-mix(in srgb, var(--vizurai-bg, #0f1112) 74%, transparent);
    /* Lift secondary text to retain contrast over the more transparent tint. */
    --glass-muted: color-mix(in srgb, var(--vizurai-text, #fff) 55%, var(--vizurai-muted, #a0a2a4));
  }
  body.site-shell .vizurai-sidebar,
  body.site-shell > :is(.home-header, .app-header, .topbar),
  body.admin-workspace > header,
  body[data-page="home"] .top-preset-section,
  body.site-shell[data-tab] #composer,
  dialog.home-auth-dialog,
  dialog.trend-dialog {
    -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(135%);
    backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  }
}

/* Frost only the dialog itself, never an expensive full-viewport backdrop. */
dialog.home-auth-dialog::backdrop,
dialog.trend-dialog::backdrop {
  background: #080a0c94;
  background: color-mix(in srgb, var(--vizurai-bg, #0f1112) 38%, transparent);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

dialog.home-auth-dialog .home-auth-art {
  background:radial-gradient(ellipse at 48% 30%,color-mix(in srgb,var(--vizurai-lime,#d2ff02) 11%,transparent),transparent 57%),
    linear-gradient(150deg,#ffffff07,transparent 60%,#00000020);
  border-right-color:#ffffff0d;
}
dialog.trend-dialog .trend-large-preview {background:color-mix(in srgb,var(--vizurai-bg,#0f1112) 24%,transparent)}
/* Blend the transformed orbit as a group so the raster black disappears into the glass. */
dialog.home-auth-dialog .home-auth-orbit {mix-blend-mode:screen}
/* Keep every colored blade: only the outer dark corners are masked away. */
dialog.home-auth-dialog .home-auth-orbit>img {
  width:212px;height:212px;object-fit:contain;border-radius:50%;
  -webkit-mask-image:radial-gradient(circle closest-side at center,#000 91%,#000d 95%,transparent 100%);
  mask-image:radial-gradient(circle closest-side at center,#000 91%,#000d 95%,transparent 100%);
  filter:none;mix-blend-mode:screen;
}
dialog.home-auth-dialog .home-auth-orbit::after {
  content:'';position:absolute;left:50%;top:50%;width:208px;height:208px;
  transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,#06c9ef12 28%,#4834f51a 58%,transparent 72%);
  box-shadow:0 0 36px #03cfe41f,0 8px 70px color-mix(in srgb,var(--vizurai-accent,#ff0065) 18%,transparent);
}
/* Enabled only after entry animations finish. The original transform is retained. */
[data-glass-depth] {transform:perspective(1300px) var(--glass-tilt,rotate3d(0,0,1,0deg)) var(--glass-base-transform,translateZ(0))!important;transition:transform .16s ease-out}
@media(pointer:coarse),(prefers-reduced-motion:reduce) {
  [data-glass-depth] {transform:var(--glass-base-transform,none)!important;transition:none!important}
}

@media (max-width: 700px), (pointer: coarse) {
  :root { --glass-blur: 7px; }
}

@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  :root {
    --glass-fill: var(--vizurai-panel, #1b1d1f);
    --glass-rail-fill: var(--vizurai-bg, #0f1112);
    --glass-edge: var(--vizurai-muted, #a0a2a4);
    --glass-sheen: none;
    --glass-muted: var(--vizurai-muted, #a0a2a4);
  }
  body[data-page="home"] .top-preset-section, dialog.home-auth-dialog, dialog.trend-dialog {--glass-sheen:none}
  [data-glass-depth] {transform:var(--glass-base-transform,none)!important;transition:none!important}
  body.site-shell .vizurai-sidebar,
  body.site-shell > :is(.home-header, .app-header, .topbar),
  body.admin-workspace > header,
  body[data-page="home"] .top-preset-section,
  body.site-shell[data-tab] #composer,
  dialog.home-auth-dialog,
  dialog.trend-dialog {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@media (forced-colors: active) {
  body.site-shell .vizurai-sidebar,
  body.site-shell > :is(.home-header, .app-header, .topbar),
  body.admin-workspace > header,
  body[data-page="home"] .top-preset-section,
  body.site-shell[data-tab] #composer,
  dialog.home-auth-dialog,
  dialog.trend-dialog,
  body[data-page="home"] :is(.hero-card, .activity-card, .model-card),
  body.site-shell :is(.auth-card, .content-card, .balance-card, .mini-card),
  body.admin-workspace :is(.admin-check-card, .grid > article),
  body.admin-workspace .panel:not(.preview-panel) {
    background: Canvas;
    border-color: CanvasText;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* Cards remain mostly opaque so moving backgrounds cannot compete with their content. */
:root {--glass-card-fill:var(--vizurai-panel,#1b1d1f)}
@supports(background:color-mix(in srgb,black,transparent)) {
 :root {--glass-card-fill:color-mix(in srgb,var(--vizurai-panel,#1b1d1f) 88%,transparent)}
}
:root :is(.hero-card,.activity-card,.model-card,.model-family,.preset-card,.trend-card,.media-card,.showcase-card,.auth-card,.content-card,.balance-card,.mini-card,.subscription-card,.credit-lot,.rate-family,.plan-editor,.notice-card,.recovery-card,.review-card,.security-status-card,.provider-balance-card,.admin-check-card,.dialog-card,.modal-card,.scene-panel,.users-panel,.users-list-panel,body:is(.admin-workspace,.design-editor) .panel:not(.preview-panel):not(.preview),body.admin-workspace .grid > article,body[data-page="home"] .top-preset-section,dialog.home-auth-dialog[open],dialog.trend-dialog[open]):not(dialog) {background-color:var(--glass-card-fill)}
/* Surface depth matches panel-surfaces.js; no additional nested backdrop filters. */
:root:not([data-panel-depth="off"]) :is(.hero-card,.activity-card,.model-card,.model-family,.preset-card,.trend-card,.media-card,.showcase-card,.auth-card,.content-card,.balance-card,.mini-card,.subscription-card,.credit-lot,.rate-family,.plan-editor,.notice-card,.recovery-card,.review-card,.security-status-card,.provider-balance-card,.admin-check-card,.dialog-card,.modal-card,.scene-panel,.users-panel,.users-list-panel,body:is(.admin-workspace,.design-editor) .panel:not(.preview-panel):not(.preview),body.admin-workspace .grid > article,body[data-page="home"] .top-preset-section,dialog.home-auth-dialog[open],dialog.trend-dialog[open]) {
 --glass-sheen:radial-gradient(ellipse at var(--glass-light-x,18%) var(--glass-light-y,0%),#ffffff17,transparent 57%),linear-gradient(145deg,#ffffff08,transparent 48%,color-mix(in srgb,var(--vizurai-accent,#ff0065) 4%,transparent));
 background-image:var(--glass-sheen);
 border-top-color:var(--glass-highlight);border-bottom-color:#00000050;
 box-shadow:inset 0 1px 1px var(--glass-highlight),inset 1px 0 0 #ffffff09,inset 0 -3px 4px #00000024,0 3px 7px #00000024,0 18px 42px var(--glass-shadow);
}
:root[data-panel-depth="off"] :is(.hero-card,.activity-card,.model-card,.model-family,.preset-card,.trend-card,.media-card,.showcase-card,.auth-card,.content-card,.balance-card,.mini-card,.subscription-card,.credit-lot,.rate-family,.plan-editor,.notice-card,.recovery-card,.review-card,.security-status-card,.provider-balance-card,.admin-check-card,.dialog-card,.modal-card,.scene-panel,.users-panel,.users-list-panel,body:is(.admin-workspace,.design-editor) .panel:not(.preview-panel):not(.preview),body.admin-workspace .grid > article,body[data-page="home"] .top-preset-section,dialog.home-auth-dialog[open],dialog.trend-dialog[open]) {
 --glass-sheen:none;background-image:none;box-shadow:none;border-color:var(--glass-edge);
}
@media(prefers-contrast:more),(forced-colors:active) {
 :root:not([data-panel-depth="off"]) :is(.hero-card,.activity-card,.model-card,.model-family,.preset-card,.trend-card,.media-card,.showcase-card,.auth-card,.content-card,.balance-card,.mini-card,.subscription-card,.credit-lot,.rate-family,.plan-editor,.notice-card,.recovery-card,.review-card,.security-status-card,.provider-balance-card,.admin-check-card,.dialog-card,.modal-card,.scene-panel,.users-panel,.users-list-panel,body:is(.admin-workspace,.design-editor) .panel:not(.preview-panel):not(.preview),body.admin-workspace .grid > article,body[data-page="home"] .top-preset-section,dialog.home-auth-dialog[open],dialog.trend-dialog[open]) {--glass-sheen:none;background-image:none;box-shadow:none}
}

:root[data-panel-depth="off"] :is(.vizurai-sidebar,#composer,body.site-shell > .home-header,body.site-shell > .app-header,body.site-shell > .topbar,body.admin-workspace > header) {background-image:none;box-shadow:none}

/* Native modals keep their existing frosted plane; no wash is layered over artwork. */
:root :is(dialog.home-auth-dialog[open],dialog.trend-dialog[open]) {background-color:var(--glass-fill)}

@media(prefers-reduced-transparency:reduce),(prefers-contrast:more) {
 :root {--glass-card-fill:var(--vizurai-panel,#1b1d1f)}
 :root :is(.hero-card,.activity-card,.model-card,.model-family,.preset-card,.trend-card,.media-card,.showcase-card,.auth-card,.content-card,.balance-card,.mini-card,.subscription-card,.credit-lot,.rate-family,.plan-editor,.notice-card,.recovery-card,.review-card,.security-status-card,.provider-balance-card,.admin-check-card,.dialog-card,.modal-card,.scene-panel,.users-panel,.users-list-panel,body:is(.admin-workspace,.design-editor) .panel:not(.preview-panel):not(.preview),body.admin-workspace .grid > article,body[data-page="home"] .top-preset-section,dialog.home-auth-dialog[open],dialog.trend-dialog[open]) {--glass-sheen:none;background-color:var(--vizurai-panel,#1b1d1f)!important;background-image:none!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}
@media(forced-colors:active) {
 :root :is(.hero-card,.activity-card,.model-card,.model-family,.preset-card,.trend-card,.media-card,.showcase-card,.auth-card,.content-card,.balance-card,.mini-card,.subscription-card,.credit-lot,.rate-family,.plan-editor,.notice-card,.recovery-card,.review-card,.security-status-card,.provider-balance-card,.admin-check-card,.dialog-card,.modal-card,.scene-panel,.users-panel,.users-list-panel,body:is(.admin-workspace,.design-editor) .panel:not(.preview-panel):not(.preview),body.admin-workspace .grid > article,body[data-page="home"] .top-preset-section,dialog.home-auth-dialog[open],dialog.trend-dialog[open]) {background:Canvas!important;border-color:CanvasText!important;box-shadow:none!important;-webkit-backdrop-filter:none;backdrop-filter:none}
}

/* Hover strength is separate from the background. Independent translate keeps tilt intact. */
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
 :root [data-viz-hover="on"]{translate:0 var(--hover-lift,0px);transition:translate .2s ease;outline:1px solid color-mix(in srgb,var(--vizurai-accent,#ff0065) calc(var(--hover-glow,0)*100%),transparent);outline-offset:0;box-shadow:inset 0 1px 1px #ffffff20,0 10px 32px rgb(0 0 0 / .24),0 0 22px color-mix(in srgb,var(--vizurai-accent,#ff0065) calc(var(--hover-glow,0)*100%),transparent)!important}
 :root [data-viz-hover="on"]:not(button):not(.button){background-image:radial-gradient(ellipse at var(--hover-x,50%) var(--hover-y,50%),rgb(255 255 255 / var(--hover-shine,0)),transparent 65%),var(--glass-sheen,linear-gradient(transparent,transparent))}
}

/* Editing surfaces stay still even when the public card treatment is enabled. */
body:is(.admin-workspace,.design-editor) :is(.trend-card,.builder-card),
body:is(.admin-workspace,.design-editor) :is(.trend-card,.builder-card):hover {
  transform:none!important;
  translate:none!important;
  rotate:none!important;
  scale:none!important;
}
body:is(.admin-workspace,.design-editor) :is(.trend-card,.builder-card):hover {
  box-shadow:none!important;
}