/**
 * NEUROFUNGI AI — Editorial Grain (2026)
 * build: editorial-grain-v3 — если не видите изменений: жёсткое обновление (Ctrl+Shift+R)
 * и проверьте, что грузится этот файл с ?v=3 в base.html
 */

/* ── NEUROFUNGI AI brand shimmer ── */
.nf-brand {
  background: linear-gradient(
    90deg,
    #3dd4e0 0%,
    #7ef7ff 22%,
    #5ee8f0 48%,
    #b85fa3 72%,
    #3dd4e0 100%
  );
  background-size: 250% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: nf-shimmer 4s linear infinite;
}
@keyframes nf-shimmer {
  0%   { background-position: 0%   center; }
  100% { background-position: 250% center; }
}
:root {
  --neo-bg: #070708;
  --neo-bg-elevated: #0c0c0f;
  --neo-surface: rgba(11, 11, 14, 0.75);
  --neo-surface-strong: rgba(14, 14, 18, 0.9);
  /* Акцент: один основной */
  --neo-cyan: #3dd4e0;
  --neo-cyan-dim: #1a6d75;
  --neo-cyan-soft: rgba(61, 212, 224, 0.1);
  --neo-cyan-glow: rgba(61, 212, 224, 0.25);
  /* Второй акцент — точечно (eyebrow, редкие CTA) */
  --neo-magenta: #b85fa3;
  --neo-magenta-dim: #6b3d5c;
  --neo-magenta-soft: rgba(184, 95, 163, 0.1);
  --neo-magenta-glow: rgba(184, 95, 163, 0.2);
  --neo-blur: 16px;
  --neo-radius: 20px;
  --neo-radius-sm: 14px;
  --neo-border: rgba(255, 255, 255, 0.07);
  --neo-text: #eaeaec;
  --neo-muted: #8e8e96;
  --neo-shadow: 0 16px 48px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.04);
  --neo-shadow-magenta: 0 8px 32px rgba(0, 0, 0, 0.35);
  --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Syne", var(--font-ui);
  /* Шкала типографики */
  --neo-text-xs: 0.6875rem;
  --neo-text-sm: 0.8125rem;
  --neo-text-base: 0.9375rem;
  --neo-text-lg: 1.125rem;
  --neo-text-xl: 1.5rem;
  --neo-text-2xl: clamp(1.5rem, 4vw, 2.25rem);
  --neo-leading-tight: 1.2;
  --neo-leading-body: 1.45;
}

/* ── Base typography ── */
body.bg-bg {
  font-family: var(--font-ui);
  font-size: var(--neo-text-base);
  line-height: var(--neo-leading-body);
  color: var(--neo-text);
}
/* Фон «редакционный» только для темы по умолчанию; иначе фон задаёт profile-ui-themes + base.html */
body.bg-bg[data-profile-ui="default"],
body.bg-bg:not([data-profile-ui]) {
  background-color: var(--neo-bg) !important;
  background-image: linear-gradient(180deg, #070708 0%, #0a0a0c 55%, #080809 100%),
    radial-gradient(ellipse 90% 50% at 50% -15%, rgba(61, 212, 224, 0.07), transparent 52%) !important;
  background-attachment: fixed;
}

/* Явный маркер темы: тонкая линия сверху — только для фона по умолчанию */
html[data-ui-theme="editorial-grain"] body.bg-bg[data-profile-ui="default"],
html[data-ui-theme="editorial-grain"] body.bg-bg:not([data-profile-ui]) {
  box-shadow: inset 0 1px 0 0 rgba(61, 212, 224, 0.22);
}

.font-display {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: var(--neo-leading-tight);
}

/* ── Glass: спокойнее, меньше «неона» ── */
.glass {
  background: var(--neo-surface-strong) !important;
  backdrop-filter: blur(var(--neo-blur)) !important;
  -webkit-backdrop-filter: blur(var(--neo-blur)) !important;
  border: 1px solid var(--neo-border) !important;
  box-shadow: var(--neo-shadow);
}

.neo-glass {
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(12, 12, 16, 0.82) 50%,
    rgba(8, 8, 10, 0.94) 100%
  );
  backdrop-filter: blur(var(--neo-blur));
  -webkit-backdrop-filter: blur(var(--neo-blur));
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--neo-radius);
  box-shadow: var(--neo-shadow);
}

.panel-rise {
  border-radius: var(--neo-radius) !important;
  border: 1px solid var(--neo-border) !important;
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(12, 12, 16, 0.88) 48%,
    rgba(7, 7, 9, 0.96) 100%
  ) !important;
  box-shadow: var(--neo-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

.section-eyebrow {
  color: var(--neo-muted) !important;
  text-shadow: none;
  letter-spacing: 0.18em;
}

/* ── Icons (stroke) — без сильного свечения ── */
.stroke-ico {
  color: var(--neo-cyan);
  filter: none;
}

/* ── Grain: полное правило в custom.css ── */

/* ── Scrollbars ── */
.custom-scroll::-webkit-scrollbar-thumb {
  background: rgba(61, 212, 224, 0.22);
}
.custom-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(184, 95, 163, 0.28);
}
* {
  scrollbar-color: rgba(61, 212, 224, 0.28) rgba(10, 10, 12, 0.85);
}

:focus-visible {
  outline: 2px solid rgba(61, 212, 224, 0.45);
  outline-offset: 2px;
}

::selection {
  background: rgba(61, 212, 224, 0.2);
  color: #fff;
}

/* ── Tailwind bridge: gold → neo ── */
.text-gold,
.hover\:text-gold:hover,
.group-hover\:text-gold:hover {
  color: var(--neo-cyan) !important;
  text-shadow: none;
}

.border-gold\/80,
.border-gold\/40 {
  border-color: rgba(61, 212, 224, 0.35) !important;
}

.bg-gold\/\[0\.06\],
.bg-gold\/\[0\.03\],
.bg-gold\/10,
.bg-gold\/20,
.hover\:bg-gold\/\[0\.12\]:hover,
.hover\:bg-gold\/10:hover,
.hover\:border-gold:hover {
  background-color: var(--neo-cyan-soft) !important;
  border-color: rgba(61, 212, 224, 0.28) !important;
}

.shadow-\[0_0_20px_rgba\(0\,245\,255\,0\.25\)\] {
  box-shadow: 0 0 20px var(--neo-cyan-glow) !important;
}

.shadow-\[0_0_14px_rgba\(0\,245\,255\,0\.15\)\] {
  box-shadow: 0 0 16px rgba(61, 212, 224, 0.12) !important;
}

/* ── Scoped neo: shop / admin ── */
.neo-app-surface .bg-surface {
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.04) 0%,
    rgba(12, 12, 16, 0.9) 45%,
    rgba(7, 7, 9, 0.96) 100%
  ) !important;
  backdrop-filter: blur(var(--neo-blur));
  -webkit-backdrop-filter: blur(var(--neo-blur));
  box-shadow: var(--neo-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.neo-app-surface .border-border {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

.neo-app-surface input[type="text"],
.neo-app-surface input[type="email"],
.neo-app-surface input[type="tel"],
.neo-app-surface input[type="number"],
.neo-app-surface input[type="search"],
.neo-app-surface input[type="password"],
.neo-app-surface input[type="url"],
.neo-app-surface select,
.neo-app-surface textarea {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  color: var(--neo-text) !important;
}

.neo-app-surface input::placeholder,
.neo-app-surface textarea::placeholder {
  color: var(--neo-muted) !important;
  opacity: 0.85;
}

.neo-app-surface .bg-bg\/80 {
  background: rgba(7, 7, 8, 0.65) !important;
  backdrop-filter: blur(var(--neo-blur));
  -webkit-backdrop-filter: blur(var(--neo-blur));
  border-color: rgba(255, 255, 255, 0.06) !important;
}

/* ── Telegram Mini App ── */
html.neo-twa nav.fixed.top-0 {
  padding-top: env(safe-area-inset-top, 0px);
}

html.neo-twa body {
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

html.neo-twa main > .pt-24:first-child {
  padding-top: calc(6rem + env(safe-area-inset-top, 0px)) !important;
}

html.neo-twa main > .pt-20:first-child {
  padding-top: calc(5rem + env(safe-area-inset-top, 0px)) !important;
}

html.neo-twa main > .pt-16:first-child {
  padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
}

html.neo-twa main > .min-h-screen.pt-16:first-child {
  padding-top: calc(4rem + env(safe-area-inset-top, 0px)) !important;
}

html.neo-twa main > .pt-28:first-child {
  padding-top: calc(7rem + env(safe-area-inset-top, 0px)) !important;
}

/* ── Hero / карточки / модалки ── */
.neo-page-hero {
  position: relative;
  border-radius: var(--neo-radius);
  padding: 1.35rem 1.35rem 1.5rem;
  margin-bottom: 1.75rem;
  overflow: hidden;
  background: linear-gradient(
    145deg,
    rgba(61, 212, 224, 0.08) 0%,
    rgba(12, 12, 16, 0.85) 55%,
    rgba(7, 7, 9, 0.95) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: var(--neo-shadow), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.neo-page-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
  background: radial-gradient(ellipse 70% 50% at 100% 0%, rgba(184, 95, 163, 0.06), transparent 55%);
  opacity: 1;
}
.neo-page-hero > * {
  position: relative;
  z-index: 1;
}

.neo-product-card {
  position: relative;
  border-radius: var(--neo-radius-sm);
  padding: 1.25rem;
  background: linear-gradient(
    168deg,
    rgba(255, 255, 255, 0.035) 0%,
    rgba(12, 12, 16, 0.9) 42%,
    rgba(7, 7, 9, 0.98) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--neo-shadow);
  transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.2s ease;
}
.neo-product-card:hover {
  border-color: rgba(61, 212, 224, 0.22);
  box-shadow: var(--neo-shadow), 0 0 32px rgba(61, 212, 224, 0.06);
  transform: translateY(-2px);
}

.neo-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(3, 3, 5, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.neo-modal-overlay.neo-modal-overlay--open {
  display: flex;
}

.neo-modal-panel {
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  overflow-y: auto;
  border-radius: var(--neo-radius);
  padding: 1.5rem;
  background: linear-gradient(
    168deg,
    rgba(16, 16, 20, 0.98) 0%,
    rgba(8, 8, 10, 0.99) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(61, 212, 224, 0.06);
}

.neo-btn-ghost {
  min-height: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid rgba(61, 212, 224, 0.25);
  color: var(--neo-cyan);
  background: rgba(61, 212, 224, 0.05);
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.neo-btn-ghost:hover {
  background: rgba(61, 212, 224, 0.1);
  border-color: rgba(61, 212, 224, 0.4);
  color: #fff;
}

.neo-btn-danger-ghost {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13px;
  border: 1px solid rgba(248, 113, 113, 0.35);
  color: #f87171;
  background: transparent;
  cursor: pointer;
  touch-action: manipulation;
  transition: background 0.15s;
}
.neo-btn-danger-ghost:hover {
  background: rgba(248, 113, 113, 0.12);
}

/* Заголовки страниц без отдельного класса — через наследование display */
main h1,
main .text-4xl.font-display,
main .text-5xl.font-display {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

/* Упоминания @user_id в тексте постов и комментариев */
a.nf-mention {
  color: #67e8f9;
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1px solid rgba(103, 232, 249, 0.38);
  cursor: pointer;
}
a.nf-mention:hover {
  color: #a5f3fc;
  border-bottom-color: rgba(165, 243, 252, 0.55);
}

/* Бейдж ID на профиле (для копирования @id в комментарии) */
.cp-user-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(200, 230, 238, 0.95);
  background: rgba(61, 212, 224, 0.12);
  border: 1px solid rgba(61, 212, 224, 0.38);
  border-radius: 999px;
  padding: 4px 11px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.15s, border-color 0.15s;
}
.cp-user-id-pill:hover {
  background: rgba(61, 212, 224, 0.2);
  border-color: rgba(61, 212, 224, 0.55);
}
.cp-user-id-pill__k {
  opacity: 0.72;
  font-weight: 600;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}