/**
 * Prism theme — public pages (landing, reg).
 * Requires prism-functional.css (+ prism-studio.css for orbs/glass glow).
 */

body.prism-app #space-bg-static,
body.prism-app #space-bg-live,
body.prism-app #cyber-canvas,
body.prism-app > .noise,
body.prism-app > .vignette {
  display: none !important;
}

body.prism-app.lp-page,
body.prism-app.auth-shell {
  color: var(--prism-ink);
}

body.prism-app.lp-page > main,
body.prism-app.lp-page > footer,
body.prism-app.auth-shell > main {
  position: relative;
  z-index: 2;
}

body.prism-app.lp-page > header.lp-header {
  position: fixed;
  z-index: 120;
  overflow: visible;
}

body.prism-app.auth-shell > header.auth-topbar {
  position: fixed;
  z-index: 120;
  overflow: visible;
}

/* Landing — floating header like dash */
body.prism-app .lp-header,
body.prism-app .auth-topbar {
  top: calc(8px + env(safe-area-inset-top, 0px));
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 24px;
  background:
    linear-gradient(110deg, rgba(255, 255, 255, 0.035), transparent 34%),
    rgba(var(--prism-surface-rgb), 0.88) !important;
  box-shadow: 0 10px 28px rgba(4, 1, 6, 0.34), inset 0 1px rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

body.prism-app .auth-topbar {
  width: min(28rem, calc(100% - 24px));
}

.lite-onboarding[hidden] {
  display: none !important;
}

.lite-onboarding__launcher {
  position: fixed;
  right: max(1rem, env(safe-area-inset-right));
  bottom: max(1rem, env(safe-area-inset-bottom));
  z-index: 180;
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  color: rgba(250, 250, 250, 0.96);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.035)), rgba(13, 13, 16, 0.94);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.55), inset 0 1px rgba(255, 255, 255, 0.12);
  cursor: pointer;
  animation: lite-launcher-arrive 0.55s cubic-bezier(0.16, 1, 0.3, 1) both, lite-launcher-float 3.2s 0.55s ease-in-out infinite;
}

.lite-onboarding__launcher svg,
.lite-onboarding__icon svg {
  width: 1.65rem;
  height: 1.65rem;
}

.lite-onboarding__launcher:hover {
  border-color: rgba(255, 255, 255, 0.38);
}

.lite-onboarding__launcher:focus-visible,
.lite-onboarding__close:focus-visible,
.lite-onboarding__done:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.55);
  outline-offset: 3px;
}

.lite-onboarding__backdrop {
  position: fixed;
  inset: 0;
  z-index: 190;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  padding: max(1rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) max(1rem, env(safe-area-inset-bottom)) max(1rem, env(safe-area-inset-left));
  background: rgba(4, 4, 7, 0.78);
  -webkit-backdrop-filter: blur(7px);
  backdrop-filter: blur(7px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.24s ease, visibility 0s linear 0.24s;
}

.lite-onboarding__backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition-delay: 0s;
}

.lite-onboarding__card {
  position: relative;
  width: min(100%, 25rem);
  max-height: calc(100dvh - 2rem);
  box-sizing: border-box;
  overflow-y: auto;
  padding: 1.75rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 1.25rem;
  color: rgba(235, 235, 240, 0.94);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.055), transparent 48%), rgba(12, 12, 15, 0.98);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.66);
  transform: translateY(1rem) scale(0.97);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.lite-onboarding__backdrop.is-open .lite-onboarding__card {
  transform: none;
}

.lite-onboarding__close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  display: grid;
  place-items: center;
  width: 2.2rem;
  height: 2.2rem;
  padding: 0;
  border: 0;
  border-radius: 0.6rem;
  color: rgba(180, 180, 188, 0.9);
  background: transparent;
  cursor: pointer;
}

.lite-onboarding__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.07);
}

.lite-onboarding__close svg {
  width: 1.2rem;
  height: 1.2rem;
}

.lite-onboarding__icon {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  margin: 0 auto 1rem;
  border: 1px solid rgba(255, 255, 255, 0.13);
  border-radius: 1rem;
  color: rgba(245, 245, 248, 0.92);
  background: rgba(255, 255, 255, 0.045);
}

.lite-onboarding__card h2 {
  margin: 0;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 650;
  text-align: center;
}

.lite-onboarding__card > p {
  margin: 0.75rem 0 0;
  color: rgba(170, 170, 180, 0.94);
  font-size: 0.82rem;
  line-height: 1.55;
  text-align: center;
}

.lite-onboarding__toggle {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  margin-top: 1.25rem;
  padding: 0.85rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 0.85rem;
  background: rgba(255, 255, 255, 0.035);
  cursor: pointer;
}

.lite-onboarding__toggle > span:first-child {
  display: grid;
  gap: 0.2rem;
  flex: 1;
  min-width: 0;
}

.lite-onboarding__toggle strong {
  color: rgba(245, 245, 248, 0.96);
  font-size: 0.82rem;
  font-weight: 600;
}

.lite-onboarding__toggle small {
  color: rgba(145, 145, 155, 0.94);
  font-size: 0.68rem;
}

.lite-onboarding__toggle input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.lite-onboarding__track {
  position: relative;
  width: 2.65rem;
  height: 1.45rem;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.17);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  transition: background 0.2s ease, border-color 0.2s ease;
}

.lite-onboarding__track::after {
  content: "";
  position: absolute;
  top: 0.18rem;
  left: 0.18rem;
  width: 0.95rem;
  height: 0.95rem;
  border-radius: 50%;
  background: rgba(210, 210, 216, 0.9);
  transition: transform 0.22s ease, background 0.22s ease;
}

.lite-onboarding__toggle input:checked + .lite-onboarding__track {
  border-color: rgba(255, 255, 255, 0.42);
  background: rgba(255, 255, 255, 0.2);
}

.lite-onboarding__toggle input:checked + .lite-onboarding__track::after {
  transform: translateX(1.18rem);
  background: #fff;
}

.lite-onboarding__toggle input:focus-visible + .lite-onboarding__track {
  outline: 2px solid rgba(255, 255, 255, 0.45);
  outline-offset: 3px;
}

.lite-onboarding__card .lite-onboarding__note {
  color: rgba(125, 125, 136, 0.95);
  font-size: 0.7rem;
}

.lite-onboarding__done {
  width: 100%;
  margin-top: 1.25rem;
  padding: 0.78rem 1rem;
  border: 1px solid #ececee;
  border-radius: 0.75rem;
  color: #09090b;
  background: #ececee;
  font: 600 0.72rem/1 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
}

@keyframes lite-launcher-arrive {
  from { opacity: 0; transform: translateY(1rem) scale(0.75); }
  to { opacity: 1; transform: none; }
}

@keyframes lite-launcher-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-0.3rem); }
}

@media (prefers-reduced-motion: reduce) {
  .lite-onboarding__launcher {
    animation: none;
  }
}

/* Lite mode: no live blur on any viewport, only painted glass surfaces. */
html.prism-safe-mode-boot body.prism-app
  :is(
    .lp-header,
    .auth-topbar,
    .lp-lang__menu,
    .auth-lang__trigger,
    .auth-lang__menu,
    .glass-card,
    .domain-hoster-card,
    .design-card,
    .modal-panel,
    .modal-backdrop
  ),
body.prism-app.prism-safe-mode
  :is(
    .lp-header,
    .auth-topbar,
    .lp-lang__menu,
    .auth-lang__trigger,
    .auth-lang__menu,
    .glass-card,
    .domain-hoster-card,
    .design-card,
    .modal-panel,
    .modal-backdrop
  ) {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}

html.prism-safe-mode-boot body.prism-app
  :is(.lp-header, .auth-topbar, .glass-card, .domain-hoster-card, .design-card, .modal-panel),
body.prism-app.prism-safe-mode
  :is(.lp-header, .auth-topbar, .glass-card, .domain-hoster-card, .design-card, .modal-panel) {
  background:
    linear-gradient(135deg, rgba(255, 255, 255, 0.018), transparent 48%),
    rgba(var(--prism-surface-rgb), 0.94) !important;
}

html.prism-safe-mode-boot body.prism-app .glass-card::after,
html.prism-safe-mode-boot body.prism-app .domain-hoster-card::after,
body.prism-app.prism-safe-mode .glass-card::after,
body.prism-app.prism-safe-mode .domain-hoster-card::after {
  filter: none !important;
}

html.prism-safe-mode-boot body.prism-app .modal-backdrop,
body.prism-app.prism-safe-mode .modal-backdrop {
  background: rgba(5, 2, 6, 0.86) !important;
}

body.prism-app .lp-header {
  width: min(72rem, calc(100% - 24px));
}

body.prism-app .lp-header::after {
  display: none;
}

body.prism-app .auth-topbar__brand:hover .auth-topbar__brand-main {
  color: var(--prism-pearl);
}

body.prism-app .lp-wordmark,
body.prism-app .lp-lang__trigger {
  color: var(--prism-muted);
}

body.prism-app .lp-nav a:hover,
body.prism-app .lp-nav a.is-active,
body.prism-app .lp-wordmark:hover {
  color: var(--prism-ink);
}

body.prism-app .lp-lang__trigger {
  border-color: rgba(210, 210, 218, 0.14);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
}

body.prism-app .lp-lang__trigger:hover,
body.prism-app .lp-lang.is-open .lp-lang__trigger {
  border-color: rgba(var(--prism-accent-rgb), 0.34);
  background: rgba(var(--prism-accent-rgb), 0.1);
  color: var(--prism-ink);
}

body.prism-app .lp-lang__menu {
  border-color: var(--prism-line);
  border-radius: 16px;
  background: rgba(var(--prism-surface-rgb), 0.96);
  box-shadow: var(--prism-shadow);
}

body.prism-app .lp-btn-ghost,
body.prism-app a.lp-btn-ghost,
body.prism-app button.lp-btn-ghost {
  border-color: rgba(210, 210, 218, 0.15);
  border-radius: 13px;
  color: var(--prism-ink);
  background: rgba(255, 255, 255, 0.045);
}

body.prism-app .lp-btn-ghost:hover,
body.prism-app a.lp-btn-ghost:hover,
body.prism-app button.lp-btn-ghost:hover {
  border-color: rgba(var(--prism-accent-rgb), 0.38);
  background: rgba(var(--prism-accent-rgb), 0.13);
}

body.prism-app .lp-btn-solid,
body.prism-app a.lp-btn-solid {
  border-radius: 13px;
  color: var(--prism-on-accent);
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(255, 255, 255, 0.88);
}

body.prism-app .lp-btn-solid:hover,
body.prism-app a.lp-btn-solid:hover {
  background: #fff;
  border-color: #fff;
}

body.prism-app .lp-hero,
body.prism-app .lp-section {
  border-color: var(--prism-line) !important;
}

body.prism-app .lp-kicker,
body.prism-app .lp-btn-line,
body.prism-app a.lp-btn-line {
  color: var(--prism-muted);
}

body.prism-app .lp-btn-line:hover,
body.prism-app a.lp-btn-line:hover {
  color: var(--prism-ink);
  border-color: rgba(var(--prism-accent-rgb), 0.4);
}

/* Auth — login / register */
body.prism-app .auth-page .glass-card {
  border-radius: 22px !important;
  border-color: var(--prism-line) !important;
  background: var(--prism-panel) !important;
  box-shadow: var(--prism-shadow) !important;
}

body.prism-app .auth-brand-panel,
body.prism-app .auth-hint,
body.prism-app .auth-footer-note {
  color: var(--prism-muted);
}

body.prism-app .auth-lang__trigger {
  border-color: rgba(210, 210, 218, 0.14);
  border-radius: 14px;
  background: rgba(var(--prism-surface-rgb), 0.88);
  color: var(--prism-ink);
  box-shadow: 0 10px 28px rgba(4, 1, 6, 0.22);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

body.prism-app .auth-lang__trigger:hover,
body.prism-app .auth-lang.is-open .auth-lang__trigger {
  border-color: rgba(var(--prism-accent-rgb), 0.34);
  background: rgba(var(--prism-accent-rgb), 0.12);
}

body.prism-app .auth-lang__menu {
  border-color: var(--prism-line);
  border-radius: 16px;
  background: rgba(var(--prism-surface-rgb), 0.96);
  box-shadow: var(--prism-shadow);
}

body.prism-app .auth-lang__option {
  border-radius: 12px;
  color: var(--prism-muted);
}

body.prism-app .auth-lang__option:hover,
body.prism-app .auth-lang__option.is-active {
  color: var(--prism-ink);
  background: rgba(var(--prism-accent-rgb), 0.12);
}

/*
 * Mobile performance: cheaper real glass by default, painted glass in Lite.
 */
@media (max-width: 1023px) {
  body.prism-app::before,
  body.prism-app::after {
    width: 26rem;
    height: 26rem;
    filter: blur(32px);
  }

  body.prism-app .lp-header,
  body.prism-app .auth-topbar,
  body.prism-app .lp-lang__menu,
  body.prism-app .auth-lang__trigger,
  body.prism-app .auth-lang__menu,
  body.prism-app .glass-card,
  body.prism-app .domain-hoster-card,
  body.prism-app .design-card,
  body.prism-app .modal-panel,
  body.prism-app .modal-backdrop {
    -webkit-backdrop-filter: blur(8px) !important;
    backdrop-filter: blur(8px) !important;
  }

  body.prism-app .lp-header,
  body.prism-app .auth-topbar {
    background:
      linear-gradient(110deg, rgba(255, 255, 255, 0.025), transparent 36%),
      rgba(var(--prism-surface-rgb), 0.93) !important;
  }

  body.prism-app .glass-card,
  body.prism-app .domain-hoster-card,
  body.prism-app .design-card,
  body.prism-app .modal-panel {
    background:
      linear-gradient(145deg, rgba(255, 255, 255, 0.025), transparent 44%),
      rgba(var(--prism-surface-rgb), 0.91) !important;
  }

  body.prism-app .glass-card::after,
  body.prism-app .domain-hoster-card::after {
    filter: none !important;
    background: linear-gradient(
      110deg,
      rgba(255, 255, 255, 0.045),
      transparent 72%
    ) !important;
  }

  body.prism-app .modal-backdrop {
    background: rgba(5, 2, 6, 0.82) !important;
    -webkit-backdrop-filter: blur(4px) !important;
    backdrop-filter: blur(4px) !important;
  }

  html.prism-safe-mode-boot body.prism-app
    :is(
      .lp-header,
      .auth-topbar,
      .lp-lang__menu,
      .auth-lang__trigger,
      .auth-lang__menu,
      .glass-card,
      .domain-hoster-card,
      .design-card,
      .modal-panel,
      .modal-backdrop
    ),
  body.prism-app.prism-safe-mode
    :is(
      .lp-header,
      .auth-topbar,
      .lp-lang__menu,
      .auth-lang__trigger,
      .auth-lang__menu,
      .glass-card,
      .domain-hoster-card,
      .design-card,
      .modal-panel,
      .modal-backdrop
    ) {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }

  html.prism-safe-mode-boot body.prism-app
    :is(.lp-header, .auth-topbar, .glass-card, .domain-hoster-card, .design-card, .modal-panel),
  body.prism-app.prism-safe-mode
    :is(.lp-header, .auth-topbar, .glass-card, .domain-hoster-card, .design-card, .modal-panel) {
    background:
      linear-gradient(135deg, rgba(255, 255, 255, 0.018), transparent 48%),
      rgba(var(--prism-surface-rgb), 0.94) !important;
  }
}

body.prism-app .auth-page {
  padding-top: calc(4.75rem + env(safe-area-inset-top, 0px));
  box-sizing: border-box;
}

body.prism-app .auth-hint-panel {
  border-color: var(--prism-line);
  border-radius: 16px;
  background: rgba(var(--prism-surface-rgb), 0.72);
}

body.prism-app .auth-form .btn-chrome,
body.prism-app #btn-login-submit,
body.prism-app #btn-register-submit {
  border-color: rgba(255, 255, 255, 0.18) !important;
  background: rgba(255, 255, 255, 0.14) !important;
  color: var(--prism-ink) !important;
  font-weight: 600;
}

body.prism-app .auth-form .btn-chrome:hover:not(:disabled),
body.prism-app #btn-login-submit:hover:not(:disabled),
body.prism-app #btn-register-submit:hover:not(:disabled) {
  border-color: rgba(var(--prism-accent-rgb), 0.38) !important;
  background: rgba(var(--prism-accent-rgb), 0.16) !important;
}

/* Auth inputs — contrast against glass card */
body.prism-app .auth-page .glass-card .input-field {
  border: 1px solid rgba(255, 255, 255, 0.18) !important;
  background: rgba(6, 6, 8, 0.78) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

body.prism-app .auth-page .glass-card .input-field::placeholder {
  color: rgba(144, 144, 154, 0.72) !important;
}

body.prism-app .auth-page .glass-card .input-field:focus {
  border-color: rgba(var(--prism-accent-rgb), 0.58) !important;
  background: rgba(4, 4, 6, 0.9) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.06),
    0 0 0 3px rgba(var(--prism-accent-rgb), 0.12) !important;
}

body.prism-app .auth-page .glass-card .input-field.input-invalid {
  border-color: rgba(248, 113, 113, 0.88) !important;
  box-shadow: 0 0 0 2px rgba(248, 113, 113, 0.14) !important;
}

body.prism-app .auth-page .glass-card .input-field.input-invalid:focus {
  border-color: rgba(248, 180, 180, 0.85) !important;
  box-shadow: 0 0 0 3px rgba(248, 113, 113, 0.14) !important;
}

/* Settings menu — gear dropdown (lang + lite mode) */
body.prism-app .lp-settings__menu {
  min-width: 14.5rem;
  padding: 0.35rem;
}

body.prism-app .lp-settings__group {
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
  padding: 0.15rem 0.1rem 0.2rem;
}

body.prism-app .lp-settings__label {
  margin: 0 0 0.15rem;
  padding: 0.2rem 0.55rem 0.35rem;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(144, 144, 154, 0.88);
}

body.prism-app .lp-settings__divider {
  height: 1px;
  margin: 0.25rem 0.35rem;
  background: rgba(255, 255, 255, 0.08);
}

body.prism-app .lp-settings__safe {
  padding: 0.1rem 0;
}

body.prism-app .lp-settings__safe .dash-user-dropdown-safe__row {
  border-radius: 10px;
}

body.prism-app .lp-settings__safe .dash-user-dropdown-item__icon {
  width: 1rem;
  height: 1rem;
  flex-shrink: 0;
  opacity: 0.72;
  transition: opacity 0.18s ease;
}

body.prism-app .lp-settings__safe .dash-user-dropdown-safe__row:hover .dash-user-dropdown-item__icon {
  opacity: 1;
}

body.prism-app .auth-topbar__end {
  display: flex;
  align-items: center;
}

body.prism-app .auth-topbar {
  width: min(28rem, calc(100% - 24px));
}