/* Noir — кабинет v3 «Живой Noir». Тёплая ночь / кремовый день, янтарь — только «глаза» и акценты.
   Onest для текста, Unbounded для заголовков и цифр. Кот сидит на карточке подписки и выглядывает
   из-за нижнего меню, по полоске трафика ходит его голова, загрузка — моргающие глаза.
   Цвета задаёт тема кабинета (CABINET_THEME_COLORS), живые детали добавляет noir-cabinet.js. */
@import url('https://fonts.googleapis.com/css2?family=Onest:wght@400;500;600;700;800&family=Unbounded:wght@600;800&display=swap');

:root {
  --bento-radius: 24px !important;
  --bento-radius-lg: 28px !important;
  --bento-padding: 22px !important;
  --radius-medium: 18px !important;
  --radius-large: 24px !important;
  --linear-radius: 14px !important;
  --linear-radius-lg: 18px !important;
  --noir-amber: 242, 179, 61;
  --noir-red: 200, 72, 59;
  --noir-line: rgba(var(--color-dark-50), 0.09);
  --noir-line-strong: rgba(var(--color-dark-50), 0.16);
  --noir-cat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 6 104 66'><g fill='%23EEE6DA'><path d='M14.5 68V32.6A30.6 30.6 0 0 1 75.7 32.6V68H65.8V46.1A20.7 20.7 0 0 0 24.4 46.1V68Z'/><circle cx='12' cy='26.8' r='12'/><path d='M0.7 22.7L2.6 8.5L9.9 15Z'/><path d='M14.1 15L21.9 8.8L21.2 19.1Z'/><ellipse cx='18.3' cy='67.8' rx='6.2' ry='1.4'/><ellipse cx='71.8' cy='67.8' rx='6.2' ry='1.4'/><rect x='88' y='63.6' width='11.8' height='4.2'/></g><path d='M70.5 52.5C77.5 62.5 81.5 65.7 88.5 65.7' fill='none' stroke='%23EEE6DA' stroke-width='4.2'/><ellipse cx='7.2' cy='27' rx='2.8' ry='1.7' fill='%23F2B33D'><animate attributeName='ry' values='1.7;1.7;0.15;1.7;1.7' keyTimes='0;0.86;0.9;0.94;1' dur='4.6s' repeatCount='indefinite'/></ellipse><ellipse cx='16.1' cy='27' rx='2.8' ry='1.7' fill='%23F2B33D'><animate attributeName='ry' values='1.7;1.7;0.15;1.7;1.7' keyTimes='0;0.86;0.9;0.94;1' dur='4.6s' repeatCount='indefinite'/></ellipse></svg>");
  --noir-peek: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 7 25 22'><g fill='%23EEE6DA'><circle cx='12' cy='26.8' r='12'/><path d='M0.7 22.7L2.6 8.5L9.9 15Z'/><path d='M14.1 15L21.9 8.8L21.2 19.1Z'/></g><ellipse cx='7.2' cy='25.6' rx='2.8' ry='1.7' fill='%23F2B33D'><animate attributeName='ry' values='1.7;1.7;0.15;1.7;1.7' keyTimes='0;0.86;0.9;0.94;1' dur='4.6s' repeatCount='indefinite'/></ellipse><ellipse cx='16.1' cy='25.6' rx='2.8' ry='1.7' fill='%23F2B33D'><animate attributeName='ry' values='1.7;1.7;0.15;1.7;1.7' keyTimes='0;0.86;0.9;0.94;1' dur='4.6s' repeatCount='indefinite'/></ellipse></svg>");
}
.light {
  --noir-line: rgba(var(--color-champagne-900), 0.10);
  --noir-line-strong: rgba(var(--color-champagne-900), 0.18);
  --noir-cat: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-2 6 104 66'><g fill='%23141312'><path d='M14.5 68V32.6A30.6 30.6 0 0 1 75.7 32.6V68H65.8V46.1A20.7 20.7 0 0 0 24.4 46.1V68Z'/><circle cx='12' cy='26.8' r='12'/><path d='M0.7 22.7L2.6 8.5L9.9 15Z'/><path d='M14.1 15L21.9 8.8L21.2 19.1Z'/><ellipse cx='18.3' cy='67.8' rx='6.2' ry='1.4'/><ellipse cx='71.8' cy='67.8' rx='6.2' ry='1.4'/><rect x='88' y='63.6' width='11.8' height='4.2'/></g><path d='M70.5 52.5C77.5 62.5 81.5 65.7 88.5 65.7' fill='none' stroke='%23141312' stroke-width='4.2'/><ellipse cx='7.2' cy='27' rx='2.8' ry='1.7' fill='%23F2B33D'><animate attributeName='ry' values='1.7;1.7;0.15;1.7;1.7' keyTimes='0;0.86;0.9;0.94;1' dur='4.6s' repeatCount='indefinite'/></ellipse><ellipse cx='16.1' cy='27' rx='2.8' ry='1.7' fill='%23F2B33D'><animate attributeName='ry' values='1.7;1.7;0.15;1.7;1.7' keyTimes='0;0.86;0.9;0.94;1' dur='4.6s' repeatCount='indefinite'/></ellipse></svg>");
  --noir-peek: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-1 7 25 22'><g fill='%23141312'><circle cx='12' cy='26.8' r='12'/><path d='M0.7 22.7L2.6 8.5L9.9 15Z'/><path d='M14.1 15L21.9 8.8L21.2 19.1Z'/></g><ellipse cx='7.2' cy='25.6' rx='2.8' ry='1.7' fill='%23F2B33D'><animate attributeName='ry' values='1.7;1.7;0.15;1.7;1.7' keyTimes='0;0.86;0.9;0.94;1' dur='4.6s' repeatCount='indefinite'/></ellipse><ellipse cx='16.1' cy='25.6' rx='2.8' ry='1.7' fill='%23F2B33D'><animate attributeName='ry' values='1.7;1.7;0.15;1.7;1.7' keyTimes='0;0.86;0.9;0.94;1' dur='4.6s' repeatCount='indefinite'/></ellipse></svg>");
}

/* ---------- Шрифт и типографика ---------- */
html body,
body *:not(code):not(pre):not(kbd):not(samp):not([class*="font-mono"]) {
  font-family: 'Twemoji Country Flags', 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif !important;
}
body { font-variant-numeric: tabular-nums; }
html body :is(h1, h2, .text-2xl, .text-3xl, .text-4xl, .text-5xl, .font-display, .stat-value, .noir-display):not(#n):not(#o) {
  font-family: 'Unbounded', 'Onest', system-ui, sans-serif !important; font-weight: 800 !important; letter-spacing: -0.03em;
}
h3 { font-weight: 700 !important; letter-spacing: -0.02em; }
main h1 { font-size: 26px !important; line-height: 1.12 !important; }
.text-gradient { background: none !important; -webkit-text-fill-color: currentColor !important; color: rgb(var(--color-dark-50)) !important; }
::selection { background: rgba(var(--noir-amber), 0.35); }

/* ---------- Фон: ровная ночь, без анимаций и сеток ---------- */
body { background: rgb(var(--color-dark-950)) !important; }
.light body { background: rgb(var(--color-champagne-200)) !important; }
.admin-orb, [class*="bg-grid"], [class*="bg-noise"] { display: none !important; }

/* ---------- Карточки: плоские, с тонкой линией ---------- */
.bento-card, .card, .bento-card-hover, .bento-card-glow, .card-hover, .card-glow, .card-animated, .glass:not(.app-mobile-header) {
  background: rgb(var(--color-dark-800)) !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1.2px var(--noir-line) !important;
  border-radius: var(--bento-radius) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  animation: none !important;
}
.light :is(.bento-card, .card, .bento-card-hover, .bento-card-glow, .card-hover, .card-glow, .card-animated) {
  background: rgb(var(--color-champagne-50)) !important;
}
.bento-card-hover:hover, .bento-card-glow:hover, .card-hover:hover, .card-glow:hover {
  transform: none !important;
  box-shadow: inset 0 0 0 1.2px var(--noir-line-strong) !important;
}
.bento-card-hover::after, .bento-card-glow::before, .bento-card-glow::after { display: none !important; }
.rounded-2xl, .rounded-3xl { border-radius: 22px !important; }
.rounded-xl { border-radius: 16px !important; }

/* Внутренние плашки (bg-dark-800/xx внутри карточек) — тише, без рамок */
:is(.bento-card, .card) :is([class*="bg-dark-800"], [class*="bg-dark-900"]) {
  background: rgba(var(--color-dark-50), 0.045) !important;
  border-color: transparent !important;
}
.light :is(.bento-card, .card) :is([class*="bg-dark-800"], [class*="bg-dark-900"], [class*="bg-champagne-100"], [class*="bg-champagne-200"]) {
  background: rgba(var(--color-champagne-900), 0.045) !important;
}

/* Никаких свечений, бликов, переливов */
[class*="shadow-glow"], [class*="shadow-accent"], [class*="shadow-linear-glow"], [class*="shadow-lg"], [class*="shadow-xl"], [class*="shadow-2xl"] { box-shadow: none !important; }
[class*="animate-glow"], [class*="animate-pulse-glow"], [class*="animate-shimmer"], .animate-wheel-glow { animation: none !important; }
.glow-accent, .glow-success { box-shadow: none !important; text-shadow: none !important; }
.hover-border-gradient::before, .hover-border-gradient::after { display: none !important; }

/* Цветные градиентные заливки → ровный цвет */
[class*="bg-gradient-to"]:not(img):not(svg) { background-image: none !important; }
[class*="bg-gradient-to"][class*="from-accent"] { background-color: rgba(var(--noir-amber), 0.10) !important; }

/* ---------- Кнопки ---------- */
.btn { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: -0.01em; min-height: 46px; }
.btn-primary, .bg-accent-500.text-on-accent:is(button, a), button[class*="bg-[#54a9eb]"] {
  background: rgb(var(--color-dark-50)) !important;
  color: rgb(var(--color-dark-950)) !important;
  box-shadow: none !important; border: 0 !important;
}
.light :is(.btn-primary, .bg-accent-500.text-on-accent:is(button, a), button[class*="bg-[#54a9eb]"]) {
  background: rgb(var(--color-champagne-900)) !important;
  color: rgb(var(--color-champagne-50)) !important;
}
.btn-primary:hover { opacity: .9; }
.btn-primary:active, .btn-secondary:active { transform: scale(0.98); }
.btn-primary:disabled { opacity: .45 !important; }
.btn-secondary, .btn-ghost {
  background: transparent !important;
  color: rgb(var(--color-dark-50)) !important;
  border: 1.2px solid var(--noir-line-strong) !important;
  box-shadow: none !important;
}
.light :is(.btn-secondary, .btn-ghost) { color: rgb(var(--color-champagne-900)) !important; }
.btn-secondary:hover, .btn-ghost:hover { background: rgba(var(--color-dark-50), 0.06) !important; }
.btn-danger {
  background: transparent !important; color: rgb(var(--noir-red)) !important;
  border: 1.2px solid rgba(var(--noir-red), 0.45) !important; box-shadow: none !important;
}
.btn-highlight { box-shadow: none !important; }
.btn-icon { border-radius: 999px !important; }
button[class*="bg-[#54a9eb]"] { border-radius: 999px !important; padding: 14px 26px !important; font-weight: 700 !important; }

/* Переключатель «Вход / Регистрация» и прочие сегменты — капсулы */
.flex.rounded-lg.bg-dark-800.p-1, [role="tablist"] {
  border-radius: 999px !important; background: rgba(var(--color-dark-50), 0.05) !important;
  box-shadow: inset 0 0 0 1.2px var(--noir-line); padding: 4px !important;
}
.flex.rounded-lg.bg-dark-800.p-1 > button, [role="tablist"] > button { border-radius: 999px !important; }

/* ---------- Поля ---------- */
.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="search"], textarea, select {
  border-radius: 16px !important;
  background: rgba(var(--color-dark-50), 0.04) !important;
  border: 1.2px solid var(--noir-line-strong) !important;
  box-shadow: none !important;
}
.light :is(.input, input[type="text"], input[type="email"], input[type="password"], input[type="number"], textarea, select) {
  background: rgb(var(--color-champagne-50)) !important;
}
.input:focus, input:focus-visible, textarea:focus-visible {
  outline: none !important; border-color: rgba(var(--noir-amber), .8) !important;
  box-shadow: 0 0 0 3px rgba(var(--noir-amber), 0.18) !important;
}

/* ---------- Бейджи — капсулы с линией ---------- */
.badge, [class*="badge-"] { border-radius: 999px !important; font-weight: 600 !important; letter-spacing: 0; }

/* ---------- Шапка (телефон) ---------- */
.app-mobile-header {
  background: rgba(var(--color-dark-950), 0.94) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  box-shadow: inset 0 -1px 0 var(--noir-line) !important;
}
.light .app-mobile-header { background: rgba(var(--color-champagne-200), 0.95) !important; }
.app-mobile-header .rounded-linear-lg, .app-mobile-header [class*="rounded-xl"] {
  border-color: transparent !important; background: transparent !important; box-shadow: none !important;
}
.app-mobile-header .text-base.font-semibold { font-weight: 800 !important; font-size: 19px !important; letter-spacing: -0.03em; }

/* ---------- Нижнее меню: плоская капсула, активный пункт — «глаз», кот выглядывает ---------- */
nav.fixed.lg\:hidden {
  background: rgb(var(--color-dark-800)) !important;
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  border: 0 !important;
  box-shadow: inset 0 0 0 1.2px var(--noir-line), 0 10px 30px rgba(0,0,0,.35) !important;
  border-radius: 28px !important;
  overflow: visible !important;
}
.light nav.fixed.lg\:hidden { background: rgb(var(--color-champagne-50)) !important; box-shadow: inset 0 0 0 1.2px var(--noir-line), 0 10px 30px rgba(20,19,18,.10) !important; }
nav.fixed.lg\:hidden::before {
  content: ""; position: absolute; right: 30px; top: -25px; width: 34px; height: 30px;
  background: var(--noir-peek) center bottom / contain no-repeat;
  pointer-events: none; z-index: -1;
}
nav.fixed.lg\:hidden a > div.absolute { background: transparent !important; }
nav.fixed.lg\:hidden a { color: rgb(var(--color-dark-400)) !important; }
nav.fixed.lg\:hidden a.text-accent-400 { color: rgb(var(--color-dark-50)) !important; }
.light nav.fixed.lg\:hidden a.text-accent-400 { color: rgb(var(--color-champagne-900)) !important; }
nav.fixed.lg\:hidden a.text-accent-400 span { font-weight: 700; }
nav.fixed.lg\:hidden a.text-accent-400::after {
  content: ""; position: absolute; top: 3px; left: calc(50% + 9px); width: 8px; height: 5px; border-radius: 50%;
  background: rgb(var(--noir-amber));
}

/* Меню навигации (выпадающее и боковое) */
.nav-item, .nav-item-active { border-radius: 999px !important; }
.nav-item-active {
  background: rgba(var(--color-dark-50), 0.07) !important; color: rgb(var(--color-dark-50)) !important;
  box-shadow: inset 3px 0 0 rgb(var(--noir-amber));
}
.mobile-menu-content { background: rgb(var(--color-dark-950)) !important; backdrop-filter: none !important; }

/* Переключатели Radix: включено — янтарный «глаз» */
button[role="switch"][data-state="checked"] { background: rgb(var(--noir-amber)) !important; }
button[role="switch"] { box-shadow: inset 0 0 0 1.2px var(--noir-line-strong) !important; }

/* ---------- Загрузка: вместо крутилки моргают глаза ---------- */
div.animate-spin.rounded-full, span.animate-spin.rounded-full {
  animation: none !important; border: 0 !important; border-radius: 0 !important;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 16'><g fill='%23F2B33D'><ellipse cx='9' cy='8' rx='7' ry='4.6'><animate attributeName='ry' values='4.6;4.6;0.4;4.6;4.6' keyTimes='0;0.7;0.78;0.86;1' dur='1.6s' repeatCount='indefinite'/></ellipse><ellipse cx='31' cy='8' rx='7' ry='4.6'><animate attributeName='ry' values='4.6;4.6;0.4;4.6;4.6' keyTimes='0;0.7;0.78;0.86;1' dur='1.6s' repeatCount='indefinite'/></ellipse></g><g fill='%23141312'><rect x='8.2' y='5' width='1.6' height='6' rx='.8'><animate attributeName='x' values='6.6;10;6.6' dur='3.2s' repeatCount='indefinite'/></rect><rect x='30.2' y='5' width='1.6' height='6' rx='.8'><animate attributeName='x' values='28.6;32;28.6' dur='3.2s' repeatCount='indefinite'/></rect></g></svg>") center / contain no-repeat !important;
  min-width: 32px; min-height: 14px;
}

/* ---------- Вход: большой кот над названием ---------- */
.min-h-\[100dvh\] .max-w-md > div.text-center > div:first-child { display: none !important; }
.min-h-\[100dvh\] .max-w-md > div.text-center::before {
  content: ""; display: block; width: 132px; height: 86px; margin: 8px auto 14px;
  background: var(--noir-cat) center / contain no-repeat;
}
.min-h-\[100dvh\] .max-w-md > div.text-center h1 { font-size: 34px !important; }

.min-h-\[100dvh\] .max-w-md > .card { padding: 26px 22px !important; }
.min-h-\[100dvh\] .max-w-md > .card .h-px { background: var(--noir-line) !important; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ---------- Полоска трафика: ровная янтарная, без бликов и рисок ---------- */
[role="progressbar"] { position: relative; padding-top: 18px; }
[role="progressbar"] > div:first-child {
  height: 6px !important; border: 0 !important; border-radius: 999px !important;
  background: rgba(var(--color-dark-50), 0.08) !important; overflow: visible !important;
}
.light [role="progressbar"] > div:first-child { background: rgba(var(--color-champagne-900), 0.08) !important; }
[role="progressbar"] > div:first-child > div.absolute.inset-0.flex,
[role="progressbar"] > div:first-child > div.absolute.bottom-0.top-0:not(.origin-left),
[role="progressbar"] > div:first-child > div.pointer-events-none,
[role="progressbar"] .animate-traffic-shimmer,
[role="progressbar"] .origin-left > div:not(:first-child) { display: none !important; }
[role="progressbar"] .origin-left { border-radius: 999px !important; overflow: hidden !important; }
[role="progressbar"] .origin-left > div:first-child, [role="progressbar"] .animate-unlimited-flow { background: rgb(var(--noir-amber)) !important; animation: none !important; }
.noir-walker { position: absolute; top: 0; width: 22px; height: 20px; margin-left: -11px; pointer-events: none; transition: left 1.2s cubic-bezier(.16,1,.3,1); }
.noir-walker svg { display: block; width: 22px; height: 20px; animation: noir-step .9s ease-in-out infinite; }
@keyframes noir-step { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-1.5px) } }

/* ---------- Карточка подписки: кот сидит сверху ---------- */
.noir-perch { position: relative; height: 66px; pointer-events: none; }
.noir-perch svg { position: absolute; right: 26px; bottom: -6px; width: 104px; height: 68px; z-index: 2; }
.noir-card { background: rgb(var(--color-dark-800)) !important; border: 0 !important; box-shadow: inset 0 0 0 1.2px var(--noir-line) !important; border-radius: 28px !important; overflow: visible !important; }
.light .noir-card { background: rgb(var(--color-champagne-50)) !important; }

/* Приветствие над карточкой */
.noir-hello { display: flex; flex-direction: column; gap: 4px; margin: 4px 4px 0; }
.noir-hello small { font-size: 14px; color: rgb(var(--color-dark-400)); }
.noir-hello strong { font-family: 'Unbounded', 'Onest', sans-serif !important; font-weight: 800; font-size: 26px; line-height: 1.12; letter-spacing: -0.03em; color: rgb(var(--color-dark-50)); text-wrap: balance; }
.light .noir-hello strong { color: rgb(var(--color-champagne-900)); }

/* Дни подписки — ряд «глаз» */
.noir-days { display: flex; flex-direction: column; gap: 10px; margin: 18px 0 4px; }
.noir-days-head { display: flex; justify-content: space-between; align-items: baseline; font-size: 14px; color: rgb(var(--color-dark-400)); }
.noir-days-head b { font-family: 'Unbounded', 'Onest', sans-serif !important; font-weight: 800; font-size: 20px; color: rgb(var(--color-dark-50)); }
.noir-days-head b span { font-family: 'Onest', sans-serif !important; font-size: 13px; font-weight: 600; color: rgb(var(--color-dark-400)); }
.noir-days-grid { display: grid; grid-template-columns: repeat(15, minmax(0, 1fr)); gap: 7px 6px; }
.noir-days-grid i { height: 7px; border-radius: 50%; background: rgba(var(--color-dark-50), 0.1); }
.noir-days-grid i.on { background: rgb(var(--noir-amber)); }
.noir-days.low .noir-days-grid i.on { background: rgb(var(--color-warning-500)); }

/* Подписи под главными кнопками */
[data-noir-sub] { flex-wrap: wrap; }
[data-noir-sub]::after { content: attr(data-noir-sub); flex-basis: 100%; display: block; font-size: 12px; font-weight: 500; opacity: .7; margin-top: 1px; }