/* ─── Snapro design system ─────────────────────────────────────────────
   Inter font, dark cinematic palette, gradient accents (violet→rose).
   Минимум inline-стилей — всё через утилитарные tailwind-классы плюс
   локальные компоненты ниже.                                              */

:root {
  /* Surfaces / lines (theme-independent) */
  --line:        rgba(255, 255, 255, 0.08);
  --line-strong: rgba(255, 255, 255, 0.18);
  --bg-deep:     #07090c;
  --bg-card:     rgba(255, 255, 255, 0.025);
  /* Accent vars are defined in themes.css; aurora is the default fallback */
}

html { scroll-behavior: smooth; }
body { font-feature-settings: 'cv11', 'ss01', 'ss03'; }

::selection { background: rgba(168, 85, 247, 0.32); color: #fff; }

/* ─── Ambient gradients (decorative bg) ─────────────────────────────── */

.ambient-bg {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
}
.orb {
  position: absolute; border-radius: 50%;
  /* Smooth glow without banding: the orb IS a radial-gradient that fades the
     accent colour to its own 0-alpha (color-mix, oklab) — no fade-to-black, no
     hard mask. oklab interpolation + heavy blur kills the 8-bit stair-stepping.
     Each orb sets --orb to its accent. */
  background: radial-gradient(circle at center,
      color-mix(in oklab, var(--orb), transparent 12%) 0%,
      color-mix(in oklab, var(--orb), transparent 55%) 32%,
      color-mix(in oklab, var(--orb), transparent 100%) 70%);
  filter: blur(90px);
  opacity: 0.5;
  will-change: transform;
}
.orb-purple { --orb: var(--accent-1);    width: 680px; height: 680px; top: -220px; left: -180px; }
.orb-rose   { --orb: var(--accent-2);    width: 600px; height: 600px; top: 360px;  right: -240px; opacity: .42; }
.orb-cyan   { --orb: var(--accent-text); width: 560px; height: 560px; bottom: -240px; left: 28%;  opacity: .32; }

/* Dither grain — breaks any residual banding with sub-pixel noise centred on
   mid-grey so `overlay` blend only dithers, never adds visible film grain.
   SVG fractal noise, GPU-friendly, ~1 KB. */
.ambient-bg::after {
  content: '';
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: 0.05;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 160px 160px;
}

/* Subtle grid pattern overlay */
body::before {
  content: '';
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,0.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.018) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 50% 0%, black 30%, transparent 80%);
}

/* ─── Logo mark ─────────────────────────────────────────────────────── */

.logo-mark {
  width: 30px; height: 30px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: var(--accent-grad);
  color: white; font-weight: 700; font-size: 16px;
  letter-spacing: -0.02em;
  box-shadow: 0 4px 16px var(--accent-button-shadow), inset 0 0 0 1px rgba(255,255,255,0.12);
}
.logo-mark--xs { width: 22px; height: 22px; font-size: 12px; border-radius: 6px; }
.logo-mark--lg { width: 56px; height: 56px; font-size: 28px; border-radius: 14px; }

/* ─── Nav links ─────────────────────────────────────────────────────── */

.nav-link {
  padding: 0.45rem 0.85rem;
  border-radius: 9999px;
  color: rgb(203 213 225 / 0.9);
  font-weight: 500;
  font-size: 14px;
  transition: color .15s ease, background-color .15s ease;
}
.nav-link:hover { color: white; background: rgba(255,255,255,0.04); }
.nav-link.is-active { background: var(--accent-soft); color: var(--accent-text); }

/* ─── Buttons ───────────────────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.5rem; padding: 0.7rem 1.25rem;
  border-radius: 9999px;
  font-weight: 600; font-size: 14px; line-height: 1;
  letter-spacing: -0.005em;
  transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease, background-color .12s ease;
  cursor: pointer; user-select: none;
  border: 1px solid transparent;
}
.btn:disabled, .btn[aria-disabled="true"] {
  opacity: 0.5; cursor: not-allowed; pointer-events: none;
}
.btn-primary {
  color: white;
  background: var(--accent-grad);
  box-shadow: 0 8px 24px var(--accent-button-shadow), inset 0 0 0 1px rgba(255,255,255,0.18);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 32px var(--accent-glow); }
.btn-secondary {
  color: white;
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.10);
  backdrop-filter: blur(8px);
}
.btn-secondary:hover { background: rgba(255,255,255,0.10); border-color: rgba(255,255,255,0.18); }
.btn-ghost {
  color: rgb(203 213 225);
  background: transparent;
}
.btn-ghost:hover { color: white; background: rgba(255,255,255,0.04); }
.btn-lg { padding: 0.95rem 1.7rem; font-size: 15px; }
.btn-sm { padding: 0.4rem 0.85rem; font-size: 13px; }

/* ─── Cards (glassmorphic) ──────────────────────────────────────────── */

.card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 18px;
  transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.card-hoverable { cursor: pointer; }
.card-hoverable:hover {
  transform: translateY(-3px);
  border-color: var(--line-strong);
  box-shadow: 0 18px 48px rgba(0,0,0,0.45);
}

/* Card with gradient border (for highlight) */
.card-glow {
  position: relative;
  background: var(--bg-card);
  border-radius: 18px;
}
.card-glow::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--accent-grad);
  opacity: 0.6;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}

/* Eyebrow chip */
.eyebrow {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.4rem 0.85rem;
  font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-text);
  background: var(--accent-soft);
  border: 1px solid var(--accent-strong);
  border-radius: 9999px;
}
.eyebrow .dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--accent-text);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: pulse 2s ease-in-out infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.5; } }

/* ─── Language toggle ───────────────────────────────────────────────── */

.lang-toggle {
  display: inline-flex;
  margin-left: 0.5rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 2px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.lang-toggle__opt {
  padding: 4px 10px;
  border-radius: 9999px;
  color: rgb(148, 163, 184);
  transition: color .15s ease, background-color .15s ease;
}
.lang-toggle__opt.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
}

/* ─── Forms ─────────────────────────────────────────────────────────── */

input[type="text"], input[type="email"], input[type="number"],
input[type="password"], input[type="search"], input[type="url"],
input[type="tel"], input:not([type]), select, textarea {
  background: rgba(255,255,255,0.04) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 10px;
  color: rgb(241, 245, 249) !important;
  padding: 0.65rem 0.9rem;
  font-size: 14px;
  transition: border-color .15s ease, background-color .15s ease;
}
/* Placeholder + autofill — keep readable on dark */
input::placeholder, textarea::placeholder { color: rgb(100, 116, 139); }
input:-webkit-autofill {
  -webkit-text-fill-color: rgb(241, 245, 249);
  -webkit-box-shadow: 0 0 0 1000px rgba(20, 24, 34, 1) inset;
}

/* Native select needs a custom chevron — we hide the OS one and draw our own
   so the field reads as «dropdown» instead of plain text input. */
select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.85rem center !important;
  padding-right: 2.2rem !important;
  cursor: pointer;
}
select:hover { border-color: var(--accent-strong) !important; }
input[type="color"] {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  height: 40px; width: 56px;
  padding: 3px;
  cursor: pointer;
}
input:focus, select:focus, textarea:focus, button:focus-visible {
  outline: none;
  border-color: var(--accent-1) !important;
  box-shadow: 0 0 0 3px var(--accent-soft);
}
.field-label {
  display: block;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgb(148, 163, 184);
  margin-bottom: 0.45rem;
}

/* ─── Dropzone ──────────────────────────────────────────────────────── */

.dropzone {
  position: relative;
  border: 1.5px dashed rgba(255,255,255,0.14);
  border-radius: 18px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease;
  min-height: 240px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(255,255,255,0.015);
}
/* Compact variant for additional reference slots */
.dropzone--mini {
  min-height: 140px;
  padding: 1rem;
  border-radius: 14px;
}

/* Reference slot tile (after upload) */
.ref-slot {
  position: relative;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
  display: flex; flex-direction: column; gap: 8px;
}
.ref-slot__badge {
  position: absolute; top: -8px; left: 12px;
  background: var(--accent-grad);
  color: white;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 9999px;
  box-shadow: 0 4px 12px var(--accent-button-shadow);
}
.ref-slot__thumb {
  position: relative;
  width: 100%;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
}
.ref-slot__thumb img { width: 100%; height: 100%; object-fit: cover; }
.ref-slot__remove {
  position: absolute; top: 6px; right: 6px;
  width: 24px; height: 24px;
  border-radius: 50%;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: white; font-size: 12px;
  transition: background-color .15s;
}
.ref-slot__remove:hover { background: rgba(244, 63, 94, 0.8); }
.ref-slot__role {
  width: 100%;
  font-size: 12px;
  padding: 6px 10px !important;
  border-radius: 8px !important;
}

.ref-add-tile {
  border: 1.5px dashed rgba(255,255,255,0.14);
  border-radius: 14px;
  aspect-ratio: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  color: rgb(148, 163, 184);
  font-size: 12px;
  transition: border-color .15s, color .15s, background-color .15s;
}
.ref-add-tile:hover {
  border-color: var(--accent-strong);
  color: var(--accent-text);
  background: var(--accent-soft);
}
.ref-add-tile__plus { font-size: 28px; line-height: 1; margin-bottom: 4px; opacity: 0.7; }
.dropzone:hover {
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}
.dropzone.is-active {
  border-color: var(--accent-1);
  border-style: solid;
  background: var(--accent-soft);
}

/* ─── Spinner / loaders ─────────────────────────────────────────────── */

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}

.spinner {
  width: 16px; height: 16px;
  border: 2px solid rgba(255,255,255,0.18);
  border-top-color: var(--accent-text);
  border-radius: 50%;
  display: inline-block;
  animation: spin 0.7s linear infinite;
}
.spinner-lg { width: 32px; height: 32px; border-width: 3px; }

.skeleton {
  background: linear-gradient(90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.08) 50%,
    rgba(255,255,255,0.04) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
  border-radius: 8px;
}

/* ─── Page transitions ──────────────────────────────────────────────── */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-enter > * { animation: fadeUp .35s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.page-enter > *:nth-child(1) { animation-delay: 0.00s; }
.page-enter > *:nth-child(2) { animation-delay: 0.06s; }
.page-enter > *:nth-child(3) { animation-delay: 0.12s; }
.page-enter > *:nth-child(4) { animation-delay: 0.18s; }
.page-enter > *:nth-child(5) { animation-delay: 0.24s; }
.page-enter > *:nth-child(6) { animation-delay: 0.30s; }

/* ─── Toasts ────────────────────────────────────────────────────────── */

.toast {
  pointer-events: auto;
  background: rgba(20, 24, 34, 0.92);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  color: white; font-size: 14px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  display: flex; align-items: center; gap: 0.6rem;
  min-width: 220px; max-width: 340px;
  animation: toastIn .25s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.toast.is-success { border-color: rgba(16, 185, 129, 0.4); }
.toast.is-error   { border-color: rgba(239, 68, 68, 0.5); }
.toast.is-info    { border-color: var(--accent-strong); }
.toast.is-fading { animation: toastOut .3s forwards; }
@keyframes toastIn  { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to   { opacity: 0; transform: translateY(8px) scale(.98); } }

/* ─── Pricing tier highlight ────────────────────────────────────────── */

.tier-pop {
  position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
  background: var(--accent-grad);
  color: white;
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  padding: 0.2rem 0.7rem; border-radius: 9999px;
  box-shadow: 0 6px 18px var(--accent-glow);
}

/* ─── Compare slider (для до/после) ─────────────────────────────────── */

.compare {
  position: relative; overflow: hidden; border-radius: 14px;
  user-select: none;
}
.compare img { display: block; width: 100%; height: auto; pointer-events: none; }
.compare .compare-after {
  position: absolute; inset: 0; overflow: hidden; width: 50%;
  border-right: 2px solid white;
}
.compare .compare-after img { width: 200%; max-width: none; }
.compare .compare-handle {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 32px; transform: translateX(-50%);
  cursor: ew-resize;
  display: flex; align-items: center; justify-content: center;
}
.compare .compare-handle::after {
  content: '⇆'; color: white; font-size: 14px;
  background: var(--accent-1);
  width: 28px; height: 28px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
}

/* ─── Step pipeline (генерация) ─────────────────────────────────────── */

.pipeline {
  display: flex; align-items: center; gap: 8px;
  padding: 14px 18px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  backdrop-filter: blur(10px);
}
.pipeline-step {
  flex: 1;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  color: rgb(148, 163, 184);
  transition: all .25s ease;
}
.pipeline-step .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  flex: none;
}
.pipeline-step.is-current {
  color: white;
  background: var(--accent-soft);
}
.pipeline-step.is-current .dot {
  background: var(--accent-text);
  box-shadow: 0 0 12px var(--accent-glow);
  animation: pulse 1.4s ease-in-out infinite;
}
.pipeline-step.is-done .dot {
  background: rgb(16, 185, 129);
}
.pipeline-arrow {
  color: rgba(255,255,255,0.18);
  font-size: 12px;
  flex: none;
}

/* ─── Modal (also used by admin) ────────────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(7, 9, 12, 0.78);
  backdrop-filter: blur(8px);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 4vh 16px; overflow-y: auto;
  animation: fadeIn .15s ease;
}
.modal-card {
  width: 100%;
  max-width: 760px;
  background: rgb(15, 18, 24);
  border: 1px solid var(--line);
  border-radius: 18px;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
  animation: modalIn .2s cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes modalIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }

/* Code-style textarea for prompt template editing */
.code-editor {
  font-family: 'JetBrains Mono', ui-monospace, monospace !important;
  font-size: 12.5px !important;
  line-height: 1.55 !important;
  background: rgba(0,0,0,0.35) !important;
  border-color: rgba(255,255,255,0.06) !important;
  resize: vertical;
  min-height: 60px;
}

/* Read-only prompt preview <pre>. Forces wrapping so long lines never
   overflow the card on narrow viewports. */
.code-preview {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  line-height: 1.6;
  background: rgba(0,0,0,0.4);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px;
  color: rgb(203 213 225);
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  max-width: 100%;
  max-height: 360px;
  overflow-y: auto;
  overflow-x: hidden;
}
.code-preview .placeholder {
  color: var(--accent-text);
  background: var(--accent-soft);
  padding: 1px 5px;
  border-radius: 4px;
}

.field-label {
  display: block;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  color: rgb(148, 163, 184);
  margin-bottom: 0.45rem;
}

/* ─── Theme-picker tiles (used in admin + user /settings) ───────────── */

.theme-tile {
  display: flex; align-items: center; gap: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 14px;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
  width: 100%;
}
.theme-tile:hover {
  border-color: var(--line-strong);
  transform: translateY(-1px);
}
.theme-tile.is-active {
  border-color: var(--accent-1);
  background: var(--accent-soft);
}
.theme-tile-swatch {
  width: 56px; height: 56px;
  border-radius: 12px;
  flex: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12);
}
.theme-tile-meta { flex: 1; min-width: 0; }
.theme-tile-name {
  font-size: 14px; font-weight: 600; color: rgb(241, 245, 249);
  letter-spacing: -0.01em;
}
.theme-tile-sub {
  font-size: 11.5px; color: rgb(148, 163, 184);
  margin-top: 2px;
}
.theme-tile-check {
  position: absolute; top: 8px; right: 10px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--accent-1);
  color: white;
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 10px var(--accent-button-shadow);
}

/* ─── Settings page sections ────────────────────────────────────────── */

.settings-card {
  background: var(--bg-card);
  backdrop-filter: blur(12px);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 24px;
  margin-bottom: 16px;
}
.settings-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.settings-card__title {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgb(203, 213, 225);
}
.settings-card__sub {
  font-size: 12px;
  color: rgb(100, 116, 139);
}

.settings-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 12px 0;
  border-top: 1px solid var(--line-soft);
}
.settings-row:first-child { border-top: 0; padding-top: 0; }
.settings-row__label { font-size: 14px; color: rgb(226, 232, 240); }
.settings-row__hint { font-size: 11px; color: rgb(100, 116, 139); margin-top: 2px; }

/* Toggle switch (lightweight, no library) */
.switch {
  position: relative;
  width: 38px; height: 22px;
  background: rgba(255,255,255,0.08);
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color .2s ease;
  flex: none;
}
.switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: white;
  border-radius: 50%;
  transition: transform .2s ease;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.switch.is-on { background: var(--accent-grad); }
.switch.is-on::after { transform: translateX(16px); }
.switch.is-disabled { opacity: 0.45; cursor: not-allowed; }

/* ─── Service status block (lives on /settings page) ────────────────── */
.status-banner {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: rgba(74, 222, 128, 0.06);
  border: 1px solid rgba(74, 222, 128, 0.18);
  margin-bottom: 16px;
}
.status-banner.is-warn { background: rgba(251, 191, 36, 0.06); border-color: rgba(251, 191, 36, 0.22); }
.status-banner.is-down { background: rgba(248, 113, 113, 0.06); border-color: rgba(248, 113, 113, 0.25); }
.status-banner.is-unknown { background: rgba(148, 163, 184, 0.05); border-color: rgba(148, 163, 184, 0.18); }
.status-banner__dot {
  width: 10px; height: 10px; flex: none;
  border-radius: 50%;
  background: rgb(74, 222, 128);
  box-shadow: 0 0 10px rgba(74, 222, 128, 0.55);
}
.status-banner.is-warn .status-banner__dot { background: rgb(251, 191, 36); box-shadow: 0 0 10px rgba(251, 191, 36, 0.55); }
.status-banner.is-down .status-banner__dot { background: rgb(248, 113, 113); box-shadow: 0 0 10px rgba(248, 113, 113, 0.55); }
.status-banner.is-unknown .status-banner__dot { background: rgb(148, 163, 184); box-shadow: none; }
.status-banner__text { flex: 1; min-width: 0; }
.status-banner__title {
  font-size: 14px; font-weight: 600;
  color: rgb(241, 245, 249);
  letter-spacing: -0.01em;
}
.status-banner__sub {
  font-size: 11.5px; color: rgb(100, 116, 139);
  margin-top: 2px;
}

/* Component rows under the banner */
.status-rows { display: flex; flex-direction: column; }
.status-row {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 4px;
  border-top: 1px solid var(--line-soft);
  font-size: 13.5px;
}
.status-row:first-child { border-top: 0; }
.status-row__dot {
  width: 8px; height: 8px; flex: none;
  border-radius: 50%;
  background: rgb(74, 222, 128);
}
.status-row__dot.is-warn { background: rgb(251, 191, 36); }
.status-row__dot.is-down { background: rgb(248, 113, 113); }
.status-row__dot.is-unknown { background: rgb(100, 116, 139); }
.status-row__label { flex: 1; color: rgb(203, 213, 225); }
.status-row__state {
  font-size: 11.5px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.04em;
  color: rgb(148, 163, 184);
}

/* Onboarding overlay (4-step intro for fresh accounts) */
.onb-overlay {
  position: fixed; inset: 0;
  background: rgba(7, 9, 12, 0.85);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  animation: fade-in .3s ease;
}
@keyframes fade-in { from { opacity: 0; } to { opacity: 1; } }
.onb-card {
  width: 100%; max-width: 480px;
  background: #13161e;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 22px;
  padding: 36px 32px 28px;
  position: relative;
  box-shadow: 0 30px 80px rgba(0,0,0,0.6);
}
.onb-card__step {
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--accent-text);
  margin-bottom: 14px;
}
.onb-card__title {
  font-size: 24px; font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 10px;
  color: rgb(241, 245, 249);
}
.onb-card__desc {
  font-size: 14.5px; line-height: 1.55;
  color: rgb(148, 163, 184);
  margin-bottom: 28px;
}
.onb-card__art {
  display: flex; align-items: center; justify-content: center;
  font-size: 64px; line-height: 1;
  margin: -8px 0 24px;
  filter: drop-shadow(0 8px 24px var(--accent-button-shadow));
}
.onb-card__nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.onb-card__dots {
  display: flex; gap: 6px;
}
.onb-card__dots span {
  width: 22px; height: 4px; border-radius: 9999px;
  background: rgba(255,255,255,0.1);
  transition: background-color .25s;
}
.onb-card__dots span.is-on { background: var(--accent-1); }
.onb-card__skip {
  background: transparent;
  border: 0;
  color: rgb(100, 116, 139);
  font-size: 12px;
  cursor: pointer;
  padding: 4px 8px;
}
.onb-card__skip:hover { color: rgb(203, 213, 225); }

/* Token-balance pill in header */
.balance-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px;
  font-size: 12px; font-weight: 600;
  background: var(--accent-soft);
  border: 1px solid var(--accent-strong);
  border-radius: 9999px;
  color: var(--accent-text);
}

/* Quota pill with embedded progress — replaces the plain balance pill.
   `--bar-color` is set per tier (ok/warn/danger). */
.quota-pill {
  position: relative; display: inline-flex; align-items: center;
  padding: 4px 10px;
  font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 9999px;
  color: var(--accent-text, #e2e8f0);
  overflow: hidden;
  min-width: 110px;
}
.quota-pill__bar {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.12);
  z-index: 0;
}
.quota-pill__fill {
  display: block; height: 100%;
  background: var(--bar-color, #a855f7);
  opacity: 0.32;
  transition: width .35s ease;
}
.quota-pill__text {
  position: relative; z-index: 1;
  letter-spacing: -0.01em;
}
.quota-pill--ok     { --bar-color: #a855f7; border-color: rgba(168,85,247,0.30); }
.quota-pill--warn   { --bar-color: #f59e0b; border-color: rgba(245,158,11,0.45); color: #fde68a; }
.quota-pill--danger { --bar-color: #f43f5e; border-color: rgba(244,63,94,0.55);  color: #fda4af; }
.quota-pill--danger .quota-pill__fill { opacity: 0.45; }

/* ─── Help & Guide page ──────────────────────────────────────────────── */
.help-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}
@media (max-width: 900px) {
  .help-layout { grid-template-columns: 1fr; gap: 16px; }
  .help-sidebar { position: static !important; max-height: none; }
}
.help-sidebar {
  position: sticky; top: 88px;
  display: flex; flex-direction: column; gap: 2px;
  padding: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  max-height: calc(100vh - 110px);
  overflow-y: auto;
}
.help-nav-link {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px;
  font-size: 13px;
  color: rgb(148, 163, 184);
  border-radius: 8px;
  text-decoration: none;
  transition: all .12s ease;
}
.help-nav-link:hover {
  background: rgba(255,255,255,0.04);
  color: rgb(226, 232, 240);
}
.help-nav-link.is-active {
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(244,63,94,0.10));
  color: #ffffff;
  font-weight: 600;
}
.help-nav-link .icon {
  width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  font-size: 12px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}

/* Markdown body */
.prose-snapro {
  color: rgb(203, 213, 225);
  font-size: 15px;
  line-height: 1.65;
  max-width: 760px;
}
.prose-snapro h1 {
  font-size: 28px; font-weight: 700; letter-spacing: -0.02em;
  color: #ffffff; margin: 0 0 16px;
}
.prose-snapro h2 {
  font-size: 22px; font-weight: 700; letter-spacing: -0.01em;
  color: #ffffff; margin: 32px 0 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.prose-snapro h2:first-child { border-top: none; padding-top: 0; margin-top: 0; }
.prose-snapro h3 {
  font-size: 16px; font-weight: 600;
  color: #e2e8f0; margin: 22px 0 8px;
}
.prose-snapro p { margin: 0 0 14px; }
.prose-snapro ul { margin: 0 0 14px; padding-left: 22px; }
.prose-snapro li { margin: 4px 0; }
.prose-snapro strong { color: #ffffff; font-weight: 600; }
.prose-snapro em { color: rgb(226, 232, 240); font-style: italic; }
.prose-snapro code {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 13px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 5px;
  padding: 1px 6px;
  color: #c084fc;
}
.prose-snapro a {
  color: #c084fc; text-decoration: underline;
  text-decoration-color: rgba(192, 132, 252, 0.4);
  text-underline-offset: 3px;
}
.prose-snapro a:hover { text-decoration-color: #c084fc; }
.prose-snapro table {
  border-collapse: collapse;
  width: 100%;
  margin: 14px 0 22px;
  font-size: 13.5px;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  overflow: hidden;
}
.prose-snapro thead { background: rgba(255,255,255,0.04); }
.prose-snapro th, .prose-snapro td {
  padding: 9px 14px;
  text-align: left;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  vertical-align: top;
}
.prose-snapro th { font-weight: 600; color: #ffffff; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
.prose-snapro tr:last-child td { border-bottom: none; }

/* ─── Help search ────────────────────────────────────────────────────── */
.help-search {
  width: 100%; max-width: 560px;
  padding: 11px 16px;
  font-size: 14px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 10px;
  color: #ffffff;
  transition: all .15s ease;
}
.help-search:focus {
  outline: none;
  border-color: rgba(168,85,247,0.55);
  background: rgba(168,85,247,0.08);
  box-shadow: 0 0 0 4px rgba(168,85,247,0.10);
}
.help-search::placeholder { color: rgb(100, 116, 139); }

.help-results-head {
  font-size: 12px;
  color: rgb(148, 163, 184);
  margin-bottom: 16px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.help-result {
  display: block;
  padding: 14px 18px;
  margin-bottom: 8px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all .12s ease;
}
.help-result:hover {
  background: rgba(168,85,247,0.06);
  border-color: rgba(168,85,247,0.35);
  transform: translateY(-1px);
}
.help-result__head {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 6px;
}
.help-result__icon {
  width: 24px; height: 24px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
}
.help-result__title {
  flex: 1;
  font-weight: 600;
  color: #ffffff;
  font-size: 15px;
}
.help-result__score {
  font-size: 10px;
  color: rgb(100, 116, 139);
  font-variant-numeric: tabular-nums;
}
.help-result__snippet {
  font-size: 13px;
  line-height: 1.55;
  color: rgb(203, 213, 225);
  padding-left: 34px;
}
.help-result__snippet mark {
  background: rgba(192, 132, 252, 0.30);
  color: #ffffff;
  padding: 0 2px;
  border-radius: 3px;
}
.help-empty {
  text-align: center;
  padding: 60px 20px;
  color: rgb(148, 163, 184);
}
.help-empty__title { font-size: 16px; font-weight: 600; color: #e2e8f0; margin-bottom: 6px; }
.help-empty__sub   { font-size: 13px; }

/* ─── Smart Brief Card on home ──────────────────────────────────────── */
.brief-card {
  position: relative;
  margin: 0 auto;
  max-width: 760px;
  padding: 32px;
  border-radius: 20px;
  background: linear-gradient(135deg,
    rgba(168, 85, 247, 0.08),
    rgba(244, 63, 94, 0.04) 50%,
    rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(168, 85, 247, 0.20);
  box-shadow: 0 20px 60px -20px rgba(168, 85, 247, 0.20);
}
/* Subtle attention pulse — ON only while the user hasn't engaged yet.
   Toggled via .brief-card.is-new in JS using localStorage. */
.brief-card.is-new {
  animation: briefGlow 5s ease-in-out infinite;
}
.brief-card.is-new::before {
  content: "NEW";
  position: absolute;
  top: -10px; right: 24px;
  background: linear-gradient(135deg, #a855f7, #f43f5e);
  color: white;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  padding: 4px 11px;
  border-radius: 999px;
  box-shadow: 0 4px 14px rgba(168, 85, 247, 0.50);
}
@keyframes briefGlow {
  0%, 100% { box-shadow: 0 20px 60px -20px rgba(168, 85, 247, 0.20); border-color: rgba(168, 85, 247, 0.20); }
  50%      { box-shadow: 0 24px 70px -10px rgba(168, 85, 247, 0.42); border-color: rgba(168, 85, 247, 0.40); }
}
@media (max-width: 640px) { .brief-card { padding: 22px; border-radius: 16px; } }

.brief-card__eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.14em;
  color: #c084fc;
  margin-bottom: 12px;
}
.brief-card__title {
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0 0 8px;
  line-height: 1.2;
}
.brief-card__sub {
  font-size: 14px;
  color: rgb(148, 163, 184);
  margin-bottom: 16px;
  line-height: 1.5;
}
.brief-examples {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 14px;
}
.brief-example {
  font-size: 12px;
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgb(203, 213, 225);
  cursor: pointer;
  transition: all .15s ease;
}
.brief-example:hover {
  background: rgba(168, 85, 247, 0.12);
  border-color: rgba(168, 85, 247, 0.35);
  color: #ffffff;
}
.brief-input {
  width: 100%;
  padding: 14px 18px;
  font-size: 15px;
  line-height: 1.5;
  border-radius: 12px;
  background: rgba(7, 9, 12, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  color: #ffffff;
  resize: none;
  transition: all .15s ease;
  font-family: inherit;
}
.brief-input:focus {
  outline: none;
  border-color: rgba(168, 85, 247, 0.55);
  background: rgba(7, 9, 12, 0.7);
  box-shadow: 0 0 0 4px rgba(168, 85, 247, 0.10);
}
.brief-input::placeholder { color: rgb(100, 116, 139); }
.brief-actions {
  display: flex; align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.brief-hint {
  font-size: 11px;
  color: rgb(100, 116, 139);
}
.brief-status {
  font-size: 13px;
  color: rgb(252, 165, 165);
  margin-top: 8px;
}

/* Result card under the input */
.brief-result {
  margin-top: 20px;
  padding: 18px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(168, 85, 247, 0.30);
  animation: briefResultIn .25s ease-out;
}
@keyframes briefResultIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.brief-result__head {
  display: flex; align-items: flex-start; gap: 14px;
  margin-bottom: 10px;
}
.brief-result__icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(168,85,247,0.18), rgba(244,63,94,0.10));
  border: 1px solid rgba(168, 85, 247, 0.30);
  font-size: 22px;
  flex-shrink: 0;
}
.brief-result__title {
  font-size: 16px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 2px;
}
.brief-result__sub {
  font-size: 13px;
  color: rgb(203, 213, 225);
  line-height: 1.45;
}
.brief-conf {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 999px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.brief-conf--high { background: rgba(34, 197, 94, 0.14);  color: #86efac; border: 1px solid rgba(34,197,94,0.30); }
.brief-conf--mid  { background: rgba(245, 158, 11, 0.14); color: #fde68a; border: 1px solid rgba(245,158,11,0.30); }
.brief-conf--low  { background: rgba(244, 63, 94, 0.14);  color: #fda4af; border: 1px solid rgba(244,63,94,0.30); }
.brief-params {
  display: flex; flex-wrap: wrap; gap: 5px;
  margin: 10px 0;
}
.brief-param {
  font-size: 11px;
  padding: 3px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.05);
  color: rgb(203, 213, 225);
  font-family: ui-monospace, monospace;
}
.brief-notes {
  font-size: 13px;
  color: rgb(203, 213, 225);
  padding: 9px 12px;
  margin-top: 10px;
  border-radius: 8px;
  background: rgba(6, 182, 212, 0.06);
  border-left: 3px solid rgba(6, 182, 212, 0.50);
}
.brief-notes__label {
  font-weight: 600;
  color: #67e8f9;
}
.brief-clarify {
  font-size: 13px;
  color: rgb(252, 211, 77);
  padding: 9px 12px;
  margin-top: 10px;
  border-radius: 8px;
  background: rgba(245, 158, 11, 0.08);
  border-left: 3px solid rgba(245, 158, 11, 0.50);
}
.brief-clarify__label { font-weight: 700; }
.brief-result__actions {
  display: flex; gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* Brief banner on a preset page (после клика «открыть сценарий») */
.brief-banner {
  margin-bottom: 24px;
  padding: 14px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168,85,247,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(168, 85, 247, 0.22);
}
.brief-banner__pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: #c084fc;
  margin-bottom: 4px;
}
.brief-banner__quote {
  font-size: 14px;
  font-style: italic;
  color: #e2e8f0;
  margin-bottom: 4px;
}
.brief-banner__expl {
  font-size: 12.5px;
  color: rgb(148, 163, 184);
}
.brief-banner__notes {
  margin-top: 6px;
  font-size: 12.5px;
  padding-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  color: rgb(203, 213, 225);
}
.brief-banner__notes-label { font-weight: 600; color: #67e8f9; }
.brief-banner__notes-hint  { color: rgb(100, 116, 139); }
.dot--accent { background: #c084fc !important; box-shadow: 0 0 8px rgba(192,132,252,0.6); }

/* ─── Quick-refine pills (on result page Refine block) ──────────────── */
.quick-refine {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-bottom: 12px;
}
.quick-refine__pill {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: rgb(203, 213, 225);
  cursor: pointer;
  transition: all .13s ease;
}
.quick-refine__pill:hover {
  background: rgba(168,85,247,0.12);
  border-color: rgba(168,85,247,0.35);
  color: #ffffff;
  transform: translateY(-1px);
}
.quick-refine__pill:active { transform: translateY(0); }

/* ─── Tooltip — plain-language hints for non-tech users ──────────────── */
.tip-wrap {
  position: relative;
  display: inline-flex;
  vertical-align: baseline;
  margin-left: 5px;
}
.tip-trigger {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  color: rgb(148, 163, 184);
  font-size: 10px;
  cursor: help;
  transition: all .12s ease;
  font-family: ui-monospace, monospace;
  line-height: 1;
  padding: 0;
}
.tip-trigger:hover {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.45);
  color: #c084fc;
}
.tip-trigger:focus-visible {
  outline: 2px solid rgba(168, 85, 247, 0.55);
  outline-offset: 2px;
}
.tip-popover {
  position: absolute;
  bottom: calc(100% + 8px);
  z-index: 50;
  width: max-content;
  max-width: 280px;
  padding: 9px 12px;
  background: #1a1f2c;
  color: #e2e8f0;
  font-size: 12px;
  line-height: 1.45;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 10px 30px rgba(0,0,0,0.45);
  opacity: 0;
  pointer-events: none;
  transition: opacity .14s ease, transform .14s ease;
  transform: translateY(4px);
  font-weight: 400;
  letter-spacing: 0;
  white-space: normal;
  text-align: left;
}
.tip-popover--right { left: 0; }
.tip-popover--left  { right: 0; }
.tip-popover--center { left: 50%; transform: translateX(-50%) translateY(4px); }

.tip-wrap:hover .tip-popover,
.tip-trigger:focus-visible + .tip-popover,
.tip-wrap.is-open .tip-popover {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.tip-popover--center.tip-wrap:hover ~ .tip-popover {
  transform: translateX(-50%) translateY(0);
}
@media (max-width: 640px) {
  .tip-popover { max-width: 240px; }
}

/* ─── Telegram link card (Settings) ───────────────────────────────────── */
.tg-code-slot:empty { display: none; }
.tg-code {
  margin-top: 18px;
  padding: 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(34, 158, 217, 0.10), rgba(255,255,255,0.02));
  border: 1px solid rgba(34, 158, 217, 0.32);
  text-align: center;
}
.tg-code__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: rgb(148, 163, 184);
  margin-bottom: 6px;
}
.tg-code__value {
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: 28px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: #ffffff;
  margin-bottom: 6px;
}
.tg-code__hint {
  font-size: 11px;
  color: rgb(100, 116, 139);
}
.tg-code__actions {
  display: flex; gap: 8px; justify-content: center; flex-wrap: wrap;
  margin-top: 12px;
}
.tg-code__instructions {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-size: 12px;
  color: rgb(203, 213, 225);
  text-align: left;
  white-space: pre-line;
  line-height: 1.5;
}

/* ─── Feedback bar on Order page ─────────────────────────────────────── */
.feedback-bar {
  display: flex; align-items: center;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
}
.feedback-btn {
  font-size: 18px;
  padding: 4px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  cursor: pointer;
  transition: all .12s ease;
  margin-right: 6px;
  line-height: 1;
}
.feedback-btn:hover { background: rgba(168,85,247,0.16); border-color: rgba(168,85,247,0.40); }
.feedback-btn.is-on {
  background: rgba(34, 197, 94, 0.18);
  border-color: rgba(34, 197, 94, 0.55);
  transform: scale(1.05);
}
.feedback-btn.is-on:hover { background: rgba(34, 197, 94, 0.22); }

/* ─── Product description block ──────────────────────────────────────── */
.describe-block {
  margin-top: 18px;
  padding: 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  position: relative;
}
.describe-block__label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: rgb(100, 116, 139);
  margin-bottom: 8px;
}
.describe-block__title {
  font-size: 18px;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 8px;
  letter-spacing: -0.01em;
}
.describe-block__list {
  margin: 4px 0 8px 18px;
  padding: 0;
  color: rgb(203, 213, 225);
}
.describe-block__list li { margin: 4px 0; }
.describe-block__body {
  color: rgb(226, 232, 240);
  line-height: 1.55;
  margin: 4px 0 8px;
  font-size: 14px;
}
.describe-block .btn { margin-top: 8px; }
.kw-pill {
  font-size: 11px;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(168, 85, 247, 0.10);
  border: 1px solid rgba(168, 85, 247, 0.25);
  color: rgb(216, 180, 254);
}
.describe-out:not(.hidden) {
  animation: describeFadeIn .25s ease-out;
}
@keyframes describeFadeIn {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ─── Brand asset auto-apply toggle ──────────────────────────────────── */
.auto-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 8px;
  font-size: 11px;
  color: rgb(148, 163, 184);
  cursor: pointer;
  user-select: none;
}
.auto-toggle input[type="checkbox"] {
  width: 14px; height: 14px;
  accent-color: #c084fc;
  cursor: pointer;
}
.auto-toggle__label { letter-spacing: 0.04em; }
.auto-toggle input[type="checkbox"]:checked + .auto-toggle__label {
  color: #c084fc; font-weight: 600;
}
.card.is-auto {
  border-color: rgba(168, 85, 247, 0.40);
  box-shadow: 0 0 0 1px rgba(168, 85, 247, 0.18);
}

/* ─── Batch upload page ──────────────────────────────────────────────── */
.batch-drop {
  max-width: 64rem;
  margin: 0 auto;
  padding: 60px 24px;
  text-align: center;
  border: 2px dashed rgba(168, 85, 247, 0.32);
  border-radius: 16px;
  background: linear-gradient(135deg, rgba(168,85,247,0.04), rgba(255,255,255,0.02));
  cursor: pointer;
  transition: all .15s ease;
}
.batch-drop:hover, .batch-drop.is-over {
  border-color: rgba(168, 85, 247, 0.60);
  background: linear-gradient(135deg, rgba(168,85,247,0.10), rgba(255,255,255,0.03));
  transform: translateY(-1px);
}
.batch-drop__icon { font-size: 42px; margin-bottom: 12px; }
.batch-drop__title { font-size: 18px; font-weight: 600; color: #fff; margin-bottom: 6px; }
.batch-drop__hint { font-size: 12.5px; color: rgb(148, 163, 184); }

.batch-summary {
  margin-top: 12px;
  display: flex; flex-wrap: wrap; gap: 18px;
  font-size: 13px;
}
.batch-summary__row { color: rgb(203, 213, 225); }

.batch-progress {
  margin-top: 16px;
  padding: 12px 16px;
  background: rgba(255,255,255,0.04);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.06);
}
.batch-progress.is-done {
  background: rgba(34, 197, 94, 0.10);
  border-color: rgba(34, 197, 94, 0.30);
}
.batch-progress__bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 8px;
}
.batch-progress__fill {
  height: 100%;
  background: linear-gradient(90deg, #a855f7, #f43f5e);
  border-radius: 999px;
  transition: width .35s ease;
}
.batch-progress__text { font-size: 12px; color: rgb(203, 213, 225); }

.batch-grid {
  max-width: 64rem;
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
}
.batch-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  cursor: default;
}
.batch-tile__img {
  width: 100%; height: 100%; object-fit: cover;
  display: block;
}
.batch-tile__img.is-result {
  cursor: zoom-in;
}
.batch-tile__overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45);
  backdrop-filter: blur(3px);
  font-size: 22px;
  color: #fff;
  font-weight: 700;
}
.batch-tile__overlay--done {
  background: rgba(34, 197, 94, 0.30);
  color: #86efac;
}
.batch-tile__overlay--error {
  background: rgba(244, 63, 94, 0.30);
  color: #fda4af;
  cursor: help;
}
.batch-tile__remove {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.7);
  color: #fff;
  font-size: 11px;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity .12s ease;
  cursor: pointer;
  border: none;
}
.batch-tile:hover .batch-tile__remove { opacity: 1; }
.user-avatar {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--accent-grad);
  color: white; font-weight: 700; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center;
  letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.16);
}

/* Auth pages — login / register */
.auth-card {
  max-width: 420px;
  margin: 60px auto 0;
  background: var(--bg-card);
  backdrop-filter: blur(14px);
  border: 1px solid var(--line);
  border-radius: 22px;
  padding: 32px;
}
.auth-card .field-label { margin-top: 14px; }

/* ─── Motion: scroll-progress, cursor glow, ripple, reveal, tilt ─────── */

#scroll-progress {
  position: fixed; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--accent-grad);
  transform-origin: 0 0;
  transform: scaleX(0);
  z-index: 100;
  pointer-events: none;
  box-shadow: 0 0 12px var(--accent-glow);
}

/* The .ambient-bg .orb need will-change so parallax stays GPU-cheap */
.ambient-bg .orb {
  will-change: transform;
  transition: opacity .4s ease;
}

/* ─── Fluent spotlight (inside .btn / .preset-card / .card-glow / .theme-tile) ─
   motion.js writes --mx / --my as the cursor moves over the element, and
   we paint a localized radial-gradient anchored to that point. Stays inside
   the element via overflow:hidden + clip on each rule. */
.btn, .preset-card, .card-glow, .theme-tile, .pricing-card { --mx: -200px; --my: -200px; }

.btn::after,
.preset-card::after,
.card-glow::after,
.theme-tile::after,
.pricing-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(220px circle at var(--mx) var(--my),
              rgba(255,255,255,0.10), transparent 50%);
  opacity: 0;
  transition: opacity .25s ease;
  z-index: 1;
}
.btn:hover::after,
.preset-card:hover::after,
.card-glow:hover::after,
.theme-tile:hover::after,
.pricing-card:hover::after { opacity: 1; }

/* Bigger spotlight + accent tint inside primary CTAs */
.btn-primary::after {
  background: radial-gradient(260px circle at var(--mx) var(--my),
              rgba(255,255,255,0.22), transparent 55%);
}

/* Ripple — appended by motion.js on .btn click */
.btn { position: relative; overflow: hidden; }
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  background: rgba(255, 255, 255, 0.28);
  pointer-events: none;
  animation: ripple-out .55s ease-out forwards;
  mix-blend-mode: overlay;
}
@keyframes ripple-out {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.55; }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 0; }
}

/* Press-down feedback on .btn (subtle scale, snappy) */
.btn { transition: transform .12s ease, box-shadow .15s ease, background-color .15s ease, color .15s ease; }
.btn:active { transform: scale(0.97); }
.btn-primary:active { box-shadow: 0 4px 12px var(--accent-button-shadow); }

/* (magnetic effect removed in v=11) */

/* Scroll-reveal — cards start hidden + slightly translated, reveal on intersect */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .55s cubic-bezier(.2,.7,.2,1),
              transform .55s cubic-bezier(.2,.7,.2,1);
}
.reveal.is-revealed { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .btn:active { transform: none; }
}

/* ─── Preset cards 2.0 (Higgsfield-style) ───────────────────────────── */

.preset-card {
  position: relative;
  display: flex; flex-direction: column;
  gap: 14px;
  padding: 22px 22px 20px;
  border-radius: 22px;
  background: linear-gradient(180deg,
              rgba(255,255,255,0.025) 0%,
              rgba(255,255,255,0.012) 100%);
  border: 1px solid var(--line);
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transform-style: preserve-3d;
  transition: border-color .25s ease, transform .25s cubic-bezier(.2,.7,.2,1);
  text-decoration: none !important;
  color: inherit;
}

/* 3D tilt — controlled by motion.js via CSS vars */
.preset-card {
  --tilt-x: 0deg;
  --tilt-y: 0deg;
  transform: perspective(900px) rotateX(var(--tilt-x)) rotateY(var(--tilt-y));
}

.preset-card::before {
  /* glow blob behind card emoji — reveals on hover */
  content: '';
  position: absolute;
  inset: -40% -10% auto auto;
  width: 60%; aspect-ratio: 1;
  background: radial-gradient(circle, var(--accent-1) 0%, transparent 60%);
  filter: blur(45px);
  opacity: 0;
  z-index: -1;
  transition: opacity .35s ease;
}
.preset-card:hover {
  border-color: var(--accent-strong);
}
.preset-card:hover::before { opacity: 0.45; }

.preset-card__head {
  display: flex; align-items: flex-start; gap: 14px;
}
.preset-card__icon {
  width: 56px; height: 56px;
  border-radius: 16px;
  display: flex; align-items: center; justify-content: center;
  font-size: 30px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  flex: none;
  transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s ease;
}
.preset-card:hover .preset-card__icon {
  transform: translateY(-3px) scale(1.04);
  border-color: var(--accent-strong);
  background: var(--accent-soft);
}
/* Unified glass preset icon (img) — fills any of the fixed-size icon slots
   (.preset-card__icon 56 · .brief-result__icon 44 · .scenario-switch__emoji 36
   · .logo-mark--lg 56). `contain` keeps the object un-cropped; the icons carry
   transparent alpha + baked-in padding, so they float cleanly inside the tile. */
.preset-icon-img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
}
.preset-card__title {
  font-size: 18px; font-weight: 600;
  letter-spacing: -0.015em;
  color: rgb(241, 245, 249);
  line-height: 1.2;
}
.preset-card__provider {
  position: absolute; top: 16px; right: 16px;
  font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em;
  color: rgb(100, 116, 139);
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.06);
  padding: 3px 8px;
  border-radius: 9999px;
  transition: color .25s ease, border-color .25s ease;
}
.preset-card:hover .preset-card__provider {
  color: var(--accent-text);
  border-color: var(--accent-strong);
}
.preset-card__desc {
  font-size: 13.5px; line-height: 1.55;
  color: rgb(148, 163, 184);
  flex: 1;
}
.preset-card__cta {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 500;
  color: rgb(148, 163, 184);
  margin-top: 4px;
  transition: color .25s ease, gap .25s cubic-bezier(.2,.7,.2,1);
}
.preset-card:hover .preset-card__cta {
  color: var(--accent-text);
  gap: 10px;
}
.preset-card__cta svg { transition: transform .3s ease; }
.preset-card:hover .preset-card__cta svg { transform: translateX(2px); }

/* (sweep-highlight removed in v=11 — Fluent spotlight is enough) */

/* ─── Scenario switcher (preset page header dropdown) ────────────────── */

.scenario-switch {
  position: relative;
  flex: none;
}
.scenario-switch__trigger {
  white-space: nowrap;
}
.scenario-switch__pop {
  position: absolute; right: 0; top: calc(100% + 8px);
  /* Solid surface — popup must NOT bleed selects/cards behind it. */
  background: #13161e;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 16px;
  padding: 6px;
  min-width: 320px;
  max-height: 60vh;
  overflow-y: auto;
  /* Sits above selects (z-index 1), site header (30), tooltips. */
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.65),
    0 4px 16px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
  z-index: 90;
  animation: switch-in .18s ease-out;
}
@keyframes switch-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: none; }
}
.scenario-switch__group {
  font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.12em;
  color: rgb(100, 116, 139);
  padding: 8px 12px 4px;
}
.scenario-switch__item {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 10px;
  border-radius: 10px;
  cursor: pointer;
  text-decoration: none !important;
  color: rgb(226, 232, 240);
  transition: background-color .15s ease, color .15s ease;
}
.scenario-switch__item:hover {
  background: rgba(255,255,255,0.04);
}
.scenario-switch__item.is-current {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.scenario-switch__emoji {
  width: 36px; height: 36px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  flex: none;
}
.scenario-switch__meta { flex: 1; min-width: 0; }
.scenario-switch__name {
  font-size: 14px; font-weight: 500;
  letter-spacing: -0.01em;
}
.scenario-switch__sub {
  font-size: 11px; color: rgb(100, 116, 139);
  margin-top: 1px; text-transform: uppercase; letter-spacing: 0.08em;
}
.scenario-switch__check {
  font-size: 12px; font-weight: 700;
  color: var(--accent-text);
}
.scenario-switch__divider {
  height: 1px; margin: 6px 6px;
  background: var(--line-soft);
}
.scenario-switch__item--meta .scenario-switch__name {
  color: rgb(148, 163, 184);
}

/* ─── Submit action bar (preset page) ────────────────────────────────── */

.submit-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 16px 20px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--line);
  border-radius: 16px;
  flex-wrap: wrap;
}
.submit-row__cost {
  display: flex; align-items: center; gap: 10px;
  font-size: 13px; color: rgb(148, 163, 184);
  flex-wrap: wrap;
}
.submit-row__cost-text {
  font-size: 13px;
}
.submit-row__balance {
  margin-left: auto;
  font-size: 12px; color: rgb(100, 116, 139);
  padding-left: 12px;
  border-left: 1px solid var(--line);
}

/* ─── A/B variations selector ─────────────────────────────────────────── */
.variations-row {
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 0 4px;
}
.variations-row__label {
  font-size: 13px; font-weight: 600; color: rgb(203, 213, 225);
}
.variations-row__hint {
  font-size: 12px; color: rgb(100, 116, 139);
}
.variations-pills {
  display: inline-flex; gap: 6px;
}
.variations-pill {
  min-width: 40px;
  padding: 6px 12px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.025);
  color: rgb(148, 163, 184);
  font-size: 14px; font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}
.variations-pill:hover {
  color: rgb(241, 245, 249);
  border-color: var(--line-strong);
}
.variations-pill.is-on {
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.5);
  color: rgb(216, 180, 254);
}

/* ─── Preset card — preview slot (placeholder until backend ships URLs) ─ */

.preset-card__preview {
  position: relative;
  width: calc(100% + 44px);
  margin: -22px -22px 4px;     /* extends to card edges */
  /* 3:2 fits product shots naturally — wide enough for «hero» feel,
     short enough not to push cards into a giant column. Matches the
     aspect we generate previews in. */
  aspect-ratio: 3 / 2;
  border-top-left-radius: inherit;
  border-top-right-radius: inherit;
  overflow: hidden;
  background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
  border-bottom: 1px solid var(--line-soft);
}

.preset-card__preview img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.2,.7,.2,1);
}
.preset-card:hover .preset-card__preview img { transform: scale(1.04); }
.preset-card__preview--ph {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 30% 30%, var(--accent-soft) 0%, transparent 50%),
    radial-gradient(circle at 75% 70%, rgba(255,255,255,0.04) 0%, transparent 60%);
}
.preset-card__preview-emoji {
  font-size: 64px;
  filter: blur(0.5px);
  opacity: 0.35;
  transition: opacity .25s ease, transform .25s ease;
}
.preset-card:hover .preset-card__preview-emoji {
  opacity: 0.55;
  transform: scale(1.05);
}

/* ─── Voice → Prompt UI (Step 3 «Voice» tab) ─────────────────────────── */

.voice-tabs {
  display: inline-flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 9999px;
  padding: 3px;
  margin-bottom: 18px;
}
.voice-tabs button {
  border: 0; background: transparent;
  font-size: 12.5px; font-weight: 500;
  padding: 7px 14px;
  border-radius: 9999px;
  color: rgb(148, 163, 184);
  cursor: pointer;
  transition: background-color .2s, color .2s;
}
.voice-tabs button.is-active {
  background: var(--accent-soft);
  color: var(--accent-text);
}
.voice-tabs button:hover:not(.is-active) {
  color: rgb(203, 213, 225);
}

.voice-rec-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 22px;
  border-radius: 9999px;
  background: var(--accent-grad);
  color: white; font-weight: 600;
  border: 0; cursor: pointer;
  transition: transform .15s, box-shadow .2s;
  box-shadow: 0 6px 22px var(--accent-button-shadow);
}
.voice-rec-btn.is-recording {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%);
  box-shadow: 0 6px 22px rgba(239, 68, 68, 0.4);
}
.voice-rec-btn.is-recording .voice-rec-btn__dot { animation: voice-pulse 1.1s ease-in-out infinite; }
.voice-rec-btn:active { transform: scale(0.97); }
.voice-rec-btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

.voice-rec-btn__dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: white;
}
@keyframes voice-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

.voice-timer {
  font-variant-numeric: tabular-nums;
  font-size: 14px;
  color: rgb(148, 163, 184);
  margin-left: 6px;
}

.voice-status {
  font-size: 12.5px;
  color: rgb(100, 116, 139);
  margin-top: 10px;
  display: inline-flex; align-items: center; gap: 8px;
}

.voice-clear-btn {
  font-size: 11px;
  color: rgb(148, 163, 184);
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.10);
  background: transparent;
  transition: all .15s ease;
  cursor: pointer;
}
.voice-clear-btn:hover:not(:disabled) {
  color: rgb(244, 63, 94);
  border-color: rgba(244, 63, 94, 0.40);
  background: rgba(244, 63, 94, 0.06);
}
.voice-clear-btn:disabled { opacity: 0.35; cursor: not-allowed; }

/* ─── Invite banner (register page when ?invite=… is present) ─────────── */
.invite-banner {
  margin-bottom: 22px;
  padding: 16px 18px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(168,85,247,0.16), rgba(244,63,94,0.10));
  border: 1px solid rgba(168,85,247,0.35);
}
.invite-banner__pill {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #c084fc;
  margin-bottom: 6px;
}
.invite-banner__title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: #ffffff;
  margin-bottom: 4px;
}
.invite-banner__sub {
  font-size: 12.5px;
  color: rgb(203, 213, 225);
  line-height: 1.45;
}
.invite-banner--error {
  background: rgba(244,63,94,0.10);
  border-color: rgba(244,63,94,0.40);
  color: rgb(252, 165, 165);
  font-size: 13px;
}

/* ─── Lightbox ──────────────────────────────────────────────────────── */

.lightbox {
  position: fixed; inset: 0; z-index: 60;
  background: rgba(7, 9, 12, 0.92);
  backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  padding: 2rem;
  animation: fadeIn .18s ease;
}
.lightbox img { max-width: 100%; max-height: calc(100vh - 80px); border-radius: 14px; }
.lightbox-close {
  position: absolute; top: 1rem; right: 1rem;
  background: rgba(255,255,255,0.08);
  width: 40px; height: 40px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  transition: background-color .15s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.18); }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }