/* ===== MONIQ — Alert / Toast component =====
   Переиспользуемый компонент уведомлений.
   Стилистика согласована с остальными страницами сервиса:
   палитра #ffffff / #f3f4f6 / #1f242e + фирменный красный #e11d48,
   шрифт Roboto, единый радиус скругления плашек (14px) и кнопок (10px).
   Акцентные цвета состояний подобраны в духе сервиса — приглушённые. */

:root {
  /* Смысловые акценты состояний */
  --alert-success: #10b981;
  --alert-success-bg: #ecfdf5;
  --alert-warning: #f59e0b;
  --alert-warning-bg: #fffbeb;
  --alert-info: #3b82f6;
  --alert-info-bg: #eff6ff;
  --alert-danger: #e11d48; /* фирменный красный — тот же, что в логотипе */
  --alert-danger-bg: #fef2f2;
}

/* ===== Sticky footer =====
   На страницах с подвалом прижимаем футер к низу окна, когда контента мало.
   Контентная область (main) растягивается и «выдавливает» футер вниз —
   пустое пространство заполняется фоном контента, а не футера.
   Футер остаётся в обычном потоке (без position: fixed/absolute). */
body:has(> footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body:has(> footer) > main {
  flex: 1 0 auto;
}
body:has(> footer) > header,
body:has(> footer) > footer {
  flex-shrink: 0;
}


/* ===== Базовая плашка ===== */
.alert {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  padding: 14px 14px 14px 18px;
  background: #fff;
  border: 1px solid rgba(31, 36, 46, 0.08);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(31, 36, 46, .04), 0 8px 24px -12px rgba(31, 36, 46, .12);
  color: var(--ink, #1f242e);
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;
  overflow: hidden;
}
@media (min-width: 640px) {
  .alert { padding: 16px 16px 16px 20px; gap: 14px; }
}

/* Цветная полоса слева — маркер типа */
.alert::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: var(--alert-accent, var(--ink, #1f242e));
}

/* Тонкий тонированный фон в цвет акцента (вариант с лёгкой заливкой) */
.alert--tint { background: var(--alert-tint, #fff); }

/* ===== Иконка состояния ===== */
.alert-icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  color: var(--alert-accent, var(--ink, #1f242e));
  margin-top: 1px;
}
.alert-icon svg { width: 22px; height: 22px; display: block; }

/* ===== Текстовый блок ===== */
.alert-body {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-top: 1px;
}
.alert-title {
  font-size: 15px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink, #1f242e);
  margin: 0;
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .alert-title { font-size: 16px; }
}
.alert-text {
  font-size: 14px;
  line-height: 1.5;
  color: #4b5563;
  margin: 0;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}
@media (min-width: 640px) {
  .alert-text { font-size: 15px; }
}

/* Ссылка внутри описания — акцентный цвет состояния */
.alert-link {
  color: var(--alert-accent, var(--ink, #1f242e));
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color .15s;
}
.alert-link:hover { border-bottom-color: currentColor; }

/* Ряд компактных inline-кнопок действий */
.alert-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
}
.alert-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  border-radius: 10px;
  font: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s;
  white-space: nowrap;
}
/* Заполненная кнопка — в цвет акцента состояния */
.alert-btn--solid {
  background: var(--alert-accent, var(--ink, #1f242e));
  color: #fff;
}
.alert-btn--solid:hover { filter: brightness(.94); }
/* Контурная кнопка */
.alert-btn--ghost {
  background: transparent;
  color: var(--ink, #1f242e);
  border-color: rgba(31, 36, 46, 0.16);
}
.alert-btn--ghost:hover { background: rgba(31, 36, 46, 0.05); }

/* ===== Кнопка закрытия ===== */
.alert-close {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  margin: -4px -4px 0 0;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: #9ca3af;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.alert-close:hover { background: rgba(31, 36, 46, 0.06); color: var(--ink, #1f242e); }
.alert-close:focus-visible {
  outline: 2px solid var(--alert-accent, #1f242e);
  outline-offset: 1px;
}
.alert-close svg { width: 18px; height: 18px; display: block; }

/* ===== Цвета состояний ===== */
.alert--success { --alert-accent: var(--alert-success); --alert-tint: var(--alert-success-bg); }
.alert--warning { --alert-accent: var(--alert-warning); --alert-tint: var(--alert-warning-bg); }
.alert--info    { --alert-accent: var(--alert-info);    --alert-tint: var(--alert-info-bg); }
.alert--danger  { --alert-accent: var(--alert-danger);  --alert-tint: var(--alert-danger-bg); }

/* Тонированный вариант: фон в цвет акцента + граница в акцент с прозрачностью */
.alert--tint.alert--success { background: var(--alert-success-bg); border-color: rgba(16, 185, 129, 0.22); }
.alert--tint.alert--warning { background: var(--alert-warning-bg); border-color: rgba(245, 158, 11, 0.24); }
.alert--tint.alert--info    { background: var(--alert-info-bg);    border-color: rgba(59, 130, 246, 0.20); }
.alert--tint.alert--danger  { background: var(--alert-danger-bg);  border-color: rgba(225, 29, 72, 0.18); }

/* ===== Toast-контейнер (стек уведомлений) ===== */
.toast-stack {
  position: fixed;
  z-index: 80;
  display: flex;
  flex-direction: column;
  gap: 12px;
  pointer-events: none; /* клики проходят сквозь пустую область */
}
/* Десктоп: правый нижний угол, фиксированная ширина */
@media (min-width: 640px) {
  .toast-stack {
    right: 20px;
    bottom: 20px;
    width: 400px;
    max-width: calc(100vw - 40px);
  }
}
/* Мобильная: крепится к верху, почти на всю ширину с отступами 16px */
@media (max-width: 639px) {
  .toast-stack {
    top: 12px;
    left: 16px;
    right: 16px;
    width: auto;
  }
}

/* Toast наследует стиль .alert; включаем события указателя */
.toast-stack .alert { pointer-events: auto; }

/* ===== Анимации появления / исчезновения ===== */
@keyframes alertIn {
  from { opacity: 0; transform: translateY(10px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes alertInMobile {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alert--toast { animation: alertIn .26s cubic-bezier(.22, .61, .36, 1); }
@media (max-width: 639px) {
  .alert--toast { animation: alertInMobile .26s cubic-bezier(.22, .61, .36, 1); }
}

/* Состояние «закрывается» — для inline и toast */
.alert.is-leaving {
  opacity: 0;
  transform: translateY(-4px);
  transition: opacity .2s ease, transform .2s ease,
              max-height .25s ease, margin .25s ease, padding .25s ease;
  max-height: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
/* Toast при закрытии уезжает вбок (десктоп) */
@media (min-width: 640px) {
  .alert--toast.is-leaving { transform: translateX(12px); max-height: 0 !important; }
}

/* Тонкая полоса таймера авто-закрытия */
.alert-timer {
  position: absolute;
  left: 0;
  bottom: 0;
  height: 3px;
  width: 100%;
  transform-origin: left center;
  background: var(--alert-accent, var(--ink, #1f242e));
  opacity: .5;
}
.alert-timer.is-running { animation: alertTimer linear forwards; }
.alert-timer.is-paused { animation-play-state: paused; }
@keyframes alertTimer { from { transform: scaleX(1); } to { transform: scaleX(0); } }

@media (prefers-reduced-motion: reduce) {
  .alert--toast, .alert.is-leaving, .alert-timer.is-running { animation: none !important; transition: none !important; }
}

/* ===== Демо-блок (можно убрать) ===== */
.alert-demo-section {
  margin-top: 28px;
  padding: 22px;
  background: #fff;
  border: 1px solid rgba(31, 36, 46, 0.08);
  border-radius: 20px;
}
@media (min-width: 768px) {
  .alert-demo-section { padding: 28px; margin-top: 36px; }
}
.alert-demo-head { margin-bottom: 18px; }
.alert-demo-h {
  font-size: 20px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink, #1f242e);
  margin: 0;
}
@media (min-width: 768px) { .alert-demo-h { font-size: 22px; } }
.alert-demo-sub {
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
  margin: 6px 0 0;
  max-width: 60ch;
  text-wrap: pretty;
}
@media (min-width: 768px) { .alert-demo-sub { font-size: 15px; } }

.alert-demo { display: flex; flex-direction: column; gap: 14px; }

.alert-demo-triggers {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid rgba(31, 36, 46, 0.08);
}

/* Кнопки-триггеры toast — контурные, с акцентом состояния */
.alert-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  background: #fff;
  border: 1px solid #e5e7eb;
  color: var(--ink, #1f242e);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.alert-trigger::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--alert-accent, var(--ink, #1f242e));
  flex-shrink: 0;
}
.alert-trigger:hover { background: #f3f4f6; border-color: #d1d5db; }
.alert-trigger--success { --alert-accent: var(--alert-success); }
.alert-trigger--warning { --alert-accent: var(--alert-warning); }
.alert-trigger--info    { --alert-accent: var(--alert-info); }
.alert-trigger--danger  { --alert-accent: var(--alert-danger); }





/* ===== MONIQ — Облигации ===== */

:root {
  --ink: #1f242e;
  --bg: #ffffff;
  --bg-2: #f3f4f6;
  --red: #e11d48;
  --radius-btn: 10px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Roboto', system-ui, -apple-system, Segoe UI, sans-serif;
  color: var(--ink);
  background: var(--bg);
}

/* ===== Sticky footer =====
   На страницах с подвалом прижимаем футер к низу окна, когда контента мало.
   Контентная область (main) растягивается и «выдавливает» футер вниз —
   пустое пространство заполняется фоном контента, а не футера.
   Футер остаётся в обычном потоке (без position: fixed/absolute). */
body:has(> footer) {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
}
body:has(> footer) > main {
  flex: 1 0 auto;
}
body:has(> footer) > header,
body:has(> footer) > footer {
  flex-shrink: 0;
}

/* Fluid heading for hero (smaller than v1) */
.heading-fluid {
  font-size: clamp(2.25rem, 4.5vw + 0.8rem, 4rem);
  letter-spacing: -0.02em;
  line-height: 1;
}

/* Skip link (a11y) */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 8px;
  background: var(--ink);
  color: #fff;
  padding: 8px 14px;
  border-radius: var(--radius-btn);
  z-index: 100;
  font-size: 14px;
}
.skip-link:focus { left: 8px; }

/* ===== Section blend (grey → white) ===== */
.section-blend {
  background: linear-gradient(to bottom, #f3f4f6 0%, #f3f4f6 40%, #ffffff 100%);
}

/* ===== Adaptive container padding ===== */
/* 16px on mobile, 24px on desktop (lg breakpoint) */
.site-px { padding-left: 16px; padding-right: 16px; }
@media (min-width: 1024px) {
  .site-px { padding-left: 24px; padding-right: 24px; }
}

/* ===== HEADER nav ===== */
.nav-link {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink);
  position: relative;
  padding: 6px 0;
  transition: color .15s;
  background: transparent;
  border: none;
  cursor: pointer;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--ink);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform .2s ease;
}
/* Active link: no underline indicator. Underline only on hover. */
.nav-link:hover::after { transform: scaleX(1); }
.nav-link:hover { color: var(--ink); }

.nav-icon-btn {
  height: 40px;
  width: 40px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color .15s;
}
.nav-icon-btn:hover { background: #f3f4f6; }

/* Mobile "Меню" button — dark filled, matches primary button style */
.menu-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color .15s;
}
.menu-btn:hover { background: #000; }

/* Light button — white fill, dark text, same radius as other buttons */
.btn-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  color: var(--ink);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-btn);
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.btn-light:hover { background: #f3f4f6; border-color: #d1d5db; }

/* ===== Breadcrumbs ===== */
/* Match hero background so breadcrumbs read as part of the page-title section. */
.breadcrumb-nav { background: #f3f4f6; }

.breadcrumb {
  list-style: none;
  padding: 0;
  margin: 0;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.4;
}
@media (min-width: 768px) { .breadcrumb { font-size: 14px; } }
.breadcrumb li { display: inline-flex; align-items: center; }
.breadcrumb a {
  color: #6b7280;
  transition: color .15s;
}
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }
.breadcrumb-sep { color: #9ca3af; user-select: none; }
.breadcrumb-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-weight: 500;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-btn);
  font-weight: 500;
  transition: background-color .15s;
  border: none;
  cursor: pointer;
}
.btn-primary:hover { background: #000; }

/* ===== MOBILE menu ===== */
.mobile-link {
  display: block;
  padding: 12px 0;
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
}
.mobile-link.is-active { color: var(--ink); }
.mobile-link:hover { color: #000; }

@keyframes slideInRight {
  from { transform: translateX(8%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.modal-slide-right { animation: slideInRight .22s ease-out; }

/* ===== HERO illustration =====
   Плоская финтех-иллюстрация в красных тонах: фигура уверенного инвестора
   у растущего графика. Без тени, без чётких прямоугольных границ —
   края мягко растворяются в фоне секции через mask-image. */
.hero-illustration {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  max-height: 320px;
  overflow: hidden;
  background:
    radial-gradient(circle at 24% 22%, oklch(75% 0.14 22 / .65), transparent 58%),
    radial-gradient(circle at 82% 84%, oklch(55% 0.20 16 / .9), transparent 62%),
    linear-gradient(135deg, #ef2152 0%, #e11d48 55%, #a50f37 100%);
  /* Feathered edges — изображение сливается с фоном #f3f4f6, без рамки и тени */
  -webkit-mask-image: radial-gradient(125% 115% at 50% 44%, #000 50%, transparent 80%);
          mask-image: radial-gradient(125% 115% at 50% 44%, #000 50%, transparent 80%);
}
.hero-illustration::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.06) 0 2px, transparent 2px 16px);
  pointer-events: none;
}
/* Фигура инвестора — простой плоский силуэт */
.hi-figure {
  position: absolute;
  left: 10%;
  bottom: 12%;
  width: 26%;
  height: 72%;
  z-index: 1;
}
.hi-head {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 46%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: #1f242e;
}
.hi-body {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 60%;
  background: #1f242e;
  border-radius: 46% 46% 16px 16px / 70% 70% 16px 16px;
}
.hi-coin {
  position: absolute;
  border-radius: 9999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  backdrop-filter: blur(2px);
  z-index: 2;
}
.hi-coin--1 { width: 15%; aspect-ratio: 1; right: 30%; top: 14%; background: rgba(255,255,255,.22); }
.hi-coin--2 { width: 11%; aspect-ratio: 1; right: 15%; top: 28%; background: rgba(31,36,46,.4); border-color: rgba(255,255,255,.12); }
.hi-coin--3 { width: 8%;  aspect-ratio: 1; left: 42%; bottom: 16%; background: rgba(255,255,255,.32); }
.hi-bar {
  position: absolute;
  bottom: 16%;
  width: 8%;
  background: rgba(255,255,255,.85);
  border-radius: 4px 4px 0 0;
  z-index: 1;
}
.hi-bar--1 { left: 52%; height: 16%; background: rgba(255,255,255,.55); }
.hi-bar--2 { left: 62%; height: 26%; background: rgba(255,255,255,.7); }
.hi-bar--3 { left: 72%; height: 36%; background: #fff; }
.hi-bar--4 { left: 82%; height: 50%; background: #1f242e; }
.hi-tag {
  position: absolute;
  bottom: 18px;
  left: 20px;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  color: rgba(255,255,255,.9);
  letter-spacing: 0.02em;
  z-index: 3;
}

/* ===== Filter summary stats (dl) =====
   Сводные показатели текущей подборки под блоком фильтров. */
.filter-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px 24px;
}
@media (min-width: 1024px) {
  .filter-stats { grid-template-columns: repeat(4, 1fr); }
}
.filter-stat-v {
  font-size: 26px;
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .filter-stat-v { font-size: 30px; } }
.filter-stat-v.accent { color: var(--red); }
.filter-stat-k {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.35;
  color: #6b7280;
}

/* ===== Select control ===== */
.select-wrap {
  position: relative;
  display: block;
}
.select-label {
  position: absolute;
  top: 8px;
  left: 14px;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  pointer-events: none;
}
.select-input {
  width: 100%;
  height: 60px;
  padding: 22px 40px 8px 14px;
  background-color: #f3f4f6;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit;
  color: var(--ink);
  font-weight: 500;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231f242e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='m6 9 6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px 18px;
  transition: background-color .15s, border-color .15s;
  cursor: pointer;
}
.select-input:hover { background-color: #ebecef; }
.select-input:focus {
  outline: none;
  background-color: #fff;
  border-color: rgba(31,36,46,.2);
}

/* ===== Chip ===== */
.chip {
  display: inline-flex;
  align-items: center;
  height: 36px;
  padding: 0 14px;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid transparent;
  transition: background-color .15s, border-color .15s, color .15s;
  cursor: pointer;
}
.chip:hover { background: #e5e7eb; }
.chip.is-active {
  background: var(--ink);
  color: #fff;
}

/* ===== Bond card ===== */
.bond-card {
  background: #f3f4f6;
  border-radius: 20px;
  padding: 22px;
  display: grid;
  gap: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.bond-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -16px rgba(31,36,46,.18);
}
@media (min-width: 768px) {
  .bond-card { padding: 26px; }
}
.bond-head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.bond-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  flex-shrink: 0;
  background-color: #f3f4f6;
  border: 1px solid var(--neutral-200, #e5e7eb);
}
/* Image variant */
img.bond-logo {
  display: block;
  object-fit: cover;
}
/* Fallback abbreviation variant */
.bond-logo--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background-color: #1f242e;
  border-color: #1f242e;
  color: #ffffff;
  font-weight: 700;
  font-size: 17px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  user-select: none;
}
.bond-head-text { flex: 1; min-width: 0; }
.bond-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.25;
  color: var(--ink);
}
.bond-issuer { font-size: 14px; color: #6b7280; margin-top: 2px; }
.bond-rating {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--ink);
  background: #fff;
  border-radius: var(--radius-btn);
  flex-shrink: 0;
}
.bond-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
@media (min-width: 640px) {
  .bond-grid { grid-template-columns: repeat(4, 1fr); }
}
.bond-metric .k { font-size: 13px; color: #6b7280; }
@media (min-width: 1024px) { .bond-metric .k { font-size: 14px; } }
.bond-metric .v {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  margin-top: 4px;
}
@media (min-width: 1024px) { .bond-metric .v { font-size: 19px; } }
.bond-metric .v.accent { font-size: 22px; }
@media (min-width: 1024px) { .bond-metric .v.accent { font-size: 24px; } }
.bond-metric .v.type-v { font-size: 14px; font-weight: 600; }
@media (min-width: 1024px) { .bond-metric .v.type-v { font-size: 15px; } }

.bond-foot {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(31,36,46,.08);
}
@media (min-width: 640px) {
  .bond-foot {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
}
.bond-type { font-size: 13px; color: #6b7280; }
@media (min-width: 1024px) { .bond-type { font-size: 14px; } }
.bond-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  height: 44px;
  padding: 0 20px;
  width: 100%;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s;
  border: none;
  cursor: pointer;
}
@media (min-width: 640px) {
  .bond-cta { width: auto; height: 42px; }
}
.bond-cta:hover { background: #000; }

/* "Ещё" — load more */
.load-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 200px;
  height: 48px;
  padding: 0 28px;
  background: #fff;
  color: var(--ink);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, color .15s;
}
.load-more-btn:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}
@media (min-width: 768px) {
  .load-more-btn { height: 52px; min-width: 220px; font-size: 16px; }
}

/* ===== Journal carousel ===== */
.journal-nav-btn {
  height: 44px;
  width: 44px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: #fff;
  border: 1px solid #e5e7eb;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s, color .15s, border-color .15s;
}
.journal-nav-btn:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

/* Journal track edge-bleed on mobile so cards align with site padding */
.journal-track--bleed {
  margin-left: -16px;
  margin-right: -16px;
  padding-left: 16px;
  padding-right: 16px;
}
@media (min-width: 640px) {
  .journal-track--bleed {
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
  }
}

.journal-track {
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
}
.journal-track::-webkit-scrollbar { display: none; }
.journal-track.is-dragging { cursor: grabbing; scroll-behavior: auto; }
.journal-track.is-dragging * { pointer-events: none; user-select: none; }

.journal-card {
  flex: 0 0 86%;
  scroll-snap-align: start;
  background: #fff;
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
  position: relative;
}
.journal-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 32px -18px rgba(31,36,46,.2);
}
@media (min-width: 640px) { .journal-card { flex-basis: 48%; } }
@media (min-width: 1024px) { .journal-card { flex-basis: 31%; } }
@media (min-width: 1280px) { .journal-card { flex-basis: 23.5%; } }

.journal-thumb {
  position: relative;
  overflow: hidden;
}
.journal-cover {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  object-position: center;
  background-color: #f3f4f6;
}
.journal-cat {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  backdrop-filter: blur(4px);
}

.journal-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
}
.journal-title {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
}

.journal-title .card-link-stretched {
  color: inherit;
  text-decoration: none;
  outline: none;
}
/* Stretched link: псевдо-элемент растянут на всю карточку,
   поэтому клик/тап в любую её область ведёт по ссылке-заголовку. */
.card-link-stretched::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
@media (hover: hover) {
  .journal-card:hover .card-link-stretched {
    text-decoration: underline;
    text-underline-offset: 2px;
    text-decoration-thickness: 1px;
  }
}
/* Доступность: видимая фокусная рамка вокруг карточки при навигации с клавиатуры. */
.card-link-stretched:focus-visible::after {
  outline: 2px solid var(--ink);
  outline-offset: -2px;
  border-radius: 20px;
}

.journal-date { font-size: 12px; color: #6b7280; margin-top: auto; }
.journal-meta { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: auto; font-size: 12px; color: #6b7280; }
.journal-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: #cbd0d6; flex-shrink: 0; }

/* ===== FAQ ===== */
.faq-item {
  background: #f3f4f6;
  border-radius: 14px;
  overflow: hidden;
  transition: background-color .2s;
}
.faq-item.is-open { background: #ebecef; }
.faq-trigger {
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  font-weight: 500;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ink);
  cursor: pointer;
  background: transparent;
  border: none;
}
@media (min-width: 768px) { .faq-trigger { padding: 22px 26px; font-size: 17px; } }
.faq-icon {
  flex-shrink: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: #fff;
  color: var(--ink);
  transition: transform .25s ease, background-color .2s, color .2s;
}
.faq-item.is-open .faq-icon {
  transform: rotate(45deg);
  background: var(--ink);
  color: #fff;
}
.faq-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.faq-panel > div { overflow: hidden; }
.faq-item.is-open .faq-panel { grid-template-rows: 1fr; }
.faq-body {
  padding: 0 22px 20px;
  color: #4b5563;
  line-height: 1.6;
  font-size: 15px;
}
@media (min-width: 768px) { .faq-body { padding: 0 26px 24px; font-size: 16px; } }
.faq-body p + p { margin-top: 0.9em; }

/* ===== Store buttons ===== */
.store-btn {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  height: 56px;
  padding: 0 20px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-btn);
  transition: background-color .15s;
  border: none;
  cursor: pointer;
}
.store-btn:hover { background: #000; }

/* ===== Chat modal ===== */
.chat-msg {
  max-width: 85%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.chat-msg--bot {
  background: #fff;
  color: var(--ink);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(31,36,46,.04);
}
.chat-msg--user {
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
  margin-left: auto;
}
.chat-typing {
  display: inline-flex;
  gap: 4px;
  align-items: center;
}
.chat-typing span {
  width: 6px;
  height: 6px;
  background: #9ca3af;
  border-radius: 999px;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.chat-typing span:nth-child(2) { animation-delay: .15s; }
.chat-typing span:nth-child(3) { animation-delay: .3s; }
@keyframes typingBounce {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30% { opacity: 1; transform: translateY(-3px); }
}

/* ===== Modal animations ===== */
@keyframes modalPop {
  from { opacity: 0; transform: translateY(-8px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-pop { animation: modalPop .18s ease-out; }

@keyframes overlayFade { from { opacity: 0; } to { opacity: 1; } }
#search-modal:not(.hidden) #search-overlay,
#chat-modal:not(.hidden) #chat-overlay,
#mobile-menu:not(.hidden) #menu-overlay { animation: overlayFade .18s ease-out; }

/* ===== No-motion preference ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}




/* ===== MONIQ — Login page ===== */

.login-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
}

/* Top bar with back link */
.login-topbar {
  flex-shrink: 0;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  padding: 8px 12px;
  margin-left: -12px;
  border-radius: var(--radius-btn);
  transition: background-color .15s;
}
.back-link:hover { background: #e5e7eb; }
.back-link svg { transition: transform .15s ease; }
.back-link:hover svg { transform: translateX(-2px); }

/* Card wrapper — center the card */
.login-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 40px;
  gap: 18px;
}
@media (min-width: 768px) {
  .login-wrap { padding: 32px 24px 56px; }
}

/* Card */
.login-card {
  width: 100%;
  max-width: 460px;
  background: #fff;
  border-radius: 20px;
  padding: 28px 22px;
  box-shadow:
    0 1px 2px rgba(31, 36, 46, .04),
    0 24px 60px -28px rgba(31, 36, 46, .25);
  display: flex;
  flex-direction: column;
  gap: 22px;
}
@media (min-width: 480px) {
  .login-card { padding: 36px 32px; }
}
@media (min-width: 768px) {
  .login-card { padding: 44px 40px; border-radius: 24px; }
}

.login-logo {
  display: inline-flex;
  align-self: center;
  margin-bottom: 4px;
}

.login-head { text-align: center; }
.login-title {
  font-size: clamp(1.5rem, 1rem + 2vw, 1.875rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.login-sub {
  margin-top: 8px;
  font-size: 14px;
  line-height: 1.5;
  color: #6b7280;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .login-sub { font-size: 15px; }
}

/* Form */
.login-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
}
.field-link {
  font-size: 13px;
  font-weight: 500;
  color: var(--red);
  transition: color .15s;
}
.field-link:hover { color: #be123c; }
.field-link:focus-visible {
  outline: 2px solid rgba(225, 29, 72, .4);
  outline-offset: 2px;
  border-radius: 4px;
}

.field-control {
  position: relative;
}

.field-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background-color: #f3f4f6;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.field-input::placeholder { color: #9ca3af; }
.field-input:hover { background-color: #ebecef; }
.field-input:focus {
  outline: none;
  background-color: #fff;
  border-color: rgba(31, 36, 46, .25);
  box-shadow: 0 0 0 3px rgba(31, 36, 46, .06);
}
.field-input.has-suffix { padding-right: 48px; }

.field-input.is-invalid {
  border-color: var(--red);
  background-color: #fff;
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .12);
}
.field-input.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(225, 29, 72, .18);
}

.field-suffix {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  height: 40px;
  width: 40px;
  display: grid;
  place-items: center;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: color .15s, background-color .15s;
}
.field-suffix:hover { color: var(--ink); background: rgba(31, 36, 46, .05); }
.field-suffix:focus-visible {
  outline: 2px solid rgba(31, 36, 46, .25);
  outline-offset: 1px;
}

.field-error {
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--red);
  min-height: 0;
  margin: 0;
  display: none;
}
.field-error.is-visible {
  display: block;
  margin-top: 2px;
}

/* Remember me checkbox */
.login-remember {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  width: fit-content;
  margin-top: -4px;
}
/* Нативный input скрыт, но доступен для клавиатуры/скринридеров */
.login-remember input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.login-remember-box {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  color: #fff;
  transition: background-color .15s, border-color .15s;
}
.login-remember-box svg { opacity: 0; transition: opacity .12s; }
.login-remember:hover .login-remember-box { border-color: #9ca3af; }
.login-remember input:checked ~ .login-remember-box {
  background: var(--ink);
  border-color: var(--ink);
}
.login-remember input:checked ~ .login-remember-box svg { opacity: 1; }
.login-remember input:focus-visible ~ .login-remember-box {
  outline: 2px solid rgba(31, 36, 46, .4);
  outline-offset: 2px;
}
.login-remember-text {
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  user-select: none;
}

/* Submit button */
.login-submit {
  height: 52px;
  font-size: 15px;
  font-weight: 500;
  margin-top: 4px;
  position: relative;
}
.login-submit:focus-visible {
  outline: 2px solid rgba(31, 36, 46, .35);
  outline-offset: 2px;
}
.login-submit[disabled] {
  opacity: .7;
  cursor: not-allowed;
}
.login-submit-spinner {
  display: none;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: #fff;
  margin-left: 10px;
  animation: spin .8s linear infinite;
}
.login-submit.is-loading .login-submit-spinner { display: inline-block; }
@keyframes spin { to { transform: rotate(360deg); } }

.login-status {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
  margin: 0;
  display: none;
}
.login-status.is-visible { display: block; }
.login-status.is-error { color: var(--red); }
.login-status.is-success { color: #047857; }

/* Divider */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #9ca3af;
  font-size: 13px;
  text-transform: lowercase;
  letter-spacing: 0.02em;
}
.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* Google button */
.btn-google {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 52px;
  background: #fff;
  color: var(--ink);
  border: 1px solid #e5e7eb;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.btn-google:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}
.btn-google:focus-visible {
  outline: none;
  border-color: rgba(31, 36, 46, .35);
  box-shadow: 0 0 0 3px rgba(31, 36, 46, .08);
}

/* Footer link */
.login-foot {
  text-align: center;
  font-size: 14px;
  color: #6b7280;
  margin: 0;
}
.login-foot-link {
  color: var(--red);
  font-weight: 500;
  margin-left: 4px;
  transition: color .15s;
}
.login-foot-link:hover { color: #be123c; }
.login-foot-link:focus-visible {
  outline: 2px solid rgba(225, 29, 72, .4);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Legal small print */
.login-legal {
  max-width: 460px;
  text-align: center;
  font-size: 12px;
  line-height: 1.5;
  color: #9ca3af;
  margin: 0;
}
.login-legal a {
  color: #6b7280;
  text-decoration: underline;
  text-decoration-color: #d1d5db;
  text-underline-offset: 2px;
  transition: color .15s, text-decoration-color .15s;
}
.login-legal a:hover {
  color: var(--ink);
  text-decoration-color: var(--ink);
}




/* ===== MONIQ — Register page (extends login.css) ===== */

/* Helper hint shown under the password field.
   Reuses login.css tokens; only the muted colour differs from .field-error. */
.field-hint {
  font-size: 12.5px;
  line-height: 1.4;
  color: #9ca3af;
  margin: 2px 0 0;
}

/* Hide the hint once a validation error is shown for the same field,
   so the user sees one message at a time. */
.field.has-error .field-hint {
  display: none;
}





/* ===== MONIQ — Панель управления (dashboard.css) ===== */
/* Дополняет styles.css. Только компоненты страницы личного кабинета.
   Палитра, кнопки, радиусы и типографика переиспользуются из styles.css. */

:root {
  --green: #1f8a5b;  /* поступления / купон */
  --blue:  #3d6fb4;  /* погашение / возврат номинала */
}

/* ============ ШАПКА: навигация (активное состояние) ============ */
/* Подход к активному пункту такой же, как на странице облигаций:
   активный пункт НЕ подчёркивается. Различие — по цвету/насыщенности. */
.dash-nav .nav-link { color: #6b7280; }
.dash-nav .nav-link:hover { color: var(--ink); }
.dash-nav .nav-link.is-active { color: var(--ink); font-weight: 700; }

/* ============ ШАПКА: индикатор валюты (только текст, без плашки) ============ */
.cur-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 4px;
  border-radius: 0;
  background: transparent;
  border: none;
  color: var(--ink);
  cursor: pointer;
  transition: color .15s;
}
.cur-btn:hover { color: var(--red); }
.cur-btn:hover .cur-sym,
.cur-btn:hover .cur-chev,
.cur-btn:hover .cur-globe { color: var(--red); }
.cur-btn .cur-code { font-size: 15px; font-weight: 700; line-height: 1; }
.cur-btn .cur-sym  { font-size: 12px; color: #6b7280; line-height: 1; margin-top: 3px; transition: color .15s; }
.cur-btn .cur-text { display: flex; flex-direction: column; }
.cur-btn .cur-chev { color: #9ca3af; transition: color .15s; }
.cur-btn .cur-globe { color: #6b7280; transition: color .15s; }

/* Компактный индикатор для мобильной шапки */
.cur-btn--mini {
  height: 40px;
  gap: 6px;
  padding: 0 4px;
}
.cur-btn--mini .cur-sym { display: none; }

/* ============ ШАПКА: аватар + dropdown профиля ============ */
.avatar-btn {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  padding: 0;
  border: 1px solid #e5e7eb;
  background: transparent;
  cursor: pointer;
  overflow: hidden;
  flex-shrink: 0;
  transition: box-shadow .15s, border-color .15s;
}
.avatar-btn:hover { border-color: #cbd0d6; box-shadow: 0 0 0 3px #f3f4f6; }
.avatar-img {
  display: block;
  width: 100%;
  height: 100%;
}

.profile-wrap { position: relative; }
.profile-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: 248px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(31,36,46,.04), 0 18px 40px -18px rgba(31,36,46,.28);
  padding: 8px;
  z-index: 60;
}
.profile-menu[hidden] { display: none; }
.profile-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 10px 12px;
  border-bottom: 1px solid #f3f4f6;
  margin-bottom: 6px;
}
.profile-head .ph-ava { width: 40px; height: 40px; border-radius: 9999px; overflow: hidden; flex-shrink: 0; }
.profile-head .ph-name { font-size: 15px; font-weight: 700; color: var(--ink); line-height: 1.2; }
.profile-head .ph-mail { font-size: 13px; color: #6b7280; margin-top: 2px; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 11px 12px;
  border: none;
  background: transparent;
  border-radius: 10px;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s;
}
.menu-item:hover { background: #f3f4f6; }
.menu-item svg { flex-shrink: 0; color: #6b7280; }
.menu-item--danger { color: var(--red); }
.menu-item--danger svg { color: var(--red); }
.menu-item--danger:hover { background: rgba(225,29,72,.08); }
.menu-sep { height: 1px; background: #f3f4f6; margin: 6px 4px; }

/* ============ СЕКЦИЯ ФОНА #f3f4f6 ============ */
.dash-main { background: #f3f4f6; }
.dash-section { padding-top: 28px; padding-bottom: 56px; }
@media (min-width: 768px) { .dash-section { padding-top: 36px; padding-bottom: 80px; } }

/* ============ ЗАГОЛОВОК СТРАНИЦЫ (приветствие) ============ */
.dash-hello {
  display: block;
}
.dash-hello-title {
  font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.dash-hello-sub {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: #4b5563;
  text-wrap: pretty;
}

/* ============ КАРТОЧКИ ВЫПЛАТ (3 шт.) ============ */
.payout-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Мобильная версия — горизонтальная карусель со snap */
@media (max-width: 767px) {
  .payout-grid {
    display: flex;
    grid-template-columns: none;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-left: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    /* края за границы паддинга контейнера, чтобы листать от края */
    margin-left: -16px;
    margin-right: -16px;
    padding: 4px 16px;
  }
  .payout-grid::-webkit-scrollbar { display: none; }
  .payout {
    flex: 0 0 85%;
    scroll-snap-align: start;
  }
}

.payout {
  position: relative;
  overflow: hidden;
  border-radius: 20px;
  padding: 22px 24px;
  display: flex;
  flex-direction: column;
  isolation: isolate;
}
@media (min-width: 768px) { .payout { padding: 26px; } }
.payout > * { position: relative; z-index: 1; }

/* Декоративный фоновый паттерн */
.payout-deco {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  color: var(--ink);
  opacity: 0.10;
}

.payout-label { font-size: 14px; font-weight: 500; }
.payout-amount {
  margin-top: 12px;
  font-size: clamp(1.6rem, 1.2vw + 1.2rem, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
}
@media (min-width: 768px) { .payout-amount { margin-top: 14px; } }

/* Вариант 1 — прохладный светло-серый */
.payout--c1 {
  background: linear-gradient(155deg, #f5f6f8 0%, #e8eaee 100%);
  border: 1px solid #e5e7eb;
  color: var(--ink);
}
.payout--c1 .payout-label,
.payout--c1 .payout-note { color: #6b7280; }
.payout--c1 .payout-deco { color: #1f242e; opacity: 0.07; }

/* Вариант 2 — тёплый песочный */
.payout--c2 {
  background: linear-gradient(155deg, #f4f0ea 0%, #e9e1d5 100%);
  border: 1px solid #e7ddcf;
  color: var(--ink);
}
.payout--c2 .payout-label,
.payout--c2 .payout-note { color: #8a7d6a; }
.payout--c2 .payout-deco { color: #8a6d3b; opacity: 0.12; }

/* Вариант 3 — приглушённый розовый (красный — как акцент) */
.payout--c3 {
  background: linear-gradient(155deg, #f9eef1 0%, #f1dde2 100%);
  border: 1px solid #f0d6dc;
  color: var(--ink);
}
.payout--c3 .payout-label,
.payout--c3 .payout-note { color: #9a6a76; }
.payout--c3 .payout-amount { color: var(--red); }
.payout--c3 .payout-deco { color: #e11d48; opacity: 0.12; }

/* ============ КАЛЕНДАРЬ + СПИСОК ВЫПЛАТ ============ */
.cal-layout {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 1024px) {
  /* та же сетка-обёртка, что и у карточек (3 колонки, gap 18px):
     календарь = 2 карточки + gap, список = 1 карточка */
  .cal-layout { grid-template-columns: repeat(3, 1fr); gap: 18px; align-items: stretch; }
  .cal-layout > .panel-card:first-child { grid-column: span 2; }
}

.panel-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
@media (min-width: 640px) { .panel-card { padding: 20px; } }
@media (min-width: 768px) { .panel-card { padding: 24px; } }

.panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: nowrap;
  margin-bottom: 16px;
}
.panel-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  white-space: nowrap;
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 640px) { .panel-title { font-size: 18px; } }
@media (min-width: 768px) { .panel-title { font-size: 20px; } }

/* ===== Навигация по месяцам ===== */
.cal-nav { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.cal-nav-label {
  min-width: 62px;
  max-width: 80px;
  text-align: center;
  font-size: 11px;
  font-weight: 600;
  color: var(--ink);
  text-transform: capitalize;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.cal-nav-btn {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  border: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s;
}
.cal-nav-btn svg { width: 18px; height: 18px; }
.cal-nav-btn:hover { background: #e5e7eb; }
@media (min-width: 640px) {
  .cal-nav { gap: 6px; }
  .cal-nav-label { min-width: 140px; max-width: none; font-size: 15px; }
  .cal-nav-btn { width: 38px; height: 38px; }
  .cal-nav-btn svg { width: 20px; height: 20px; }
}

/* ===== Сетка календаря ===== */
.cal-weekdays,
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}
.cal-weekday {
  text-align: center;
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
  font-weight: 600;
  padding-bottom: 8px;
}
.cal-grid { gap: 6px; }

.cal-day {
  position: relative;
  min-height: 56px;
  padding: 7px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #eef0f2;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
@media (min-width: 640px) { .cal-day { min-height: 86px; padding: 9px; } }
.cal-day--blank { background: transparent; border-color: transparent; }
.cal-day--has { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.cal-day--has:hover { border-color: #cbd0d6; box-shadow: 0 6px 18px -12px rgba(31,36,46,.3); }
.cal-day--today { border-color: var(--ink); }
.cal-daynum { font-size: 13px; font-weight: 600; color: var(--ink); line-height: 1; }
.cal-day--today .cal-daynum {
  display: inline-grid;
  place-items: center;
  width: 22px; height: 22px;
  background: var(--ink);
  color: #fff;
  border-radius: 999px;
  font-size: 12px;
}
.cal-day--blank .cal-daynum { color: #cbd0d6; font-weight: 400; }
.cal-markers { display: flex; gap: 4px; flex-wrap: wrap; }
.cal-dot { width: 7px; height: 7px; border-radius: 999px; flex-shrink: 0; }
.cal-amt {
  margin-top: auto;
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}
.cal-amt--pos { color: var(--green); }
.cal-amt--neg { color: var(--red); }
/* На узких экранах суммы скрываем — оставляем маркеры (детали в модалке) */
@media (max-width: 639px) { .cal-amt { display: none; } }

/* Цвета типов событий (маркеры/легенда) */
.ev-coupon   { background: var(--green); }
.ev-maturity { background: var(--green); }
.ev-buy      { background: var(--red); }
.ev-sell     { background: var(--ink); }

/* ===== Легенда ===== */
.cal-legend {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #f3f4f6;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.legend-item { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; color: #4b5563; }
.legend-dot { width: 9px; height: 9px; border-radius: 999px; flex-shrink: 0; }

/* ============ СПИСОК БЛИЖАЙШИХ ВЫПЛАТ ============ */
.upcoming-card { min-width: 0; }
.upcoming-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 0;
}
@media (min-width: 1024px) {
  /* высота = высоте календаря, внутренняя прокрутка */
  .upcoming-list {
    flex: 1 1 auto;
    overflow-y: auto;
    padding-right: 4px;
    scrollbar-width: thin;
    scrollbar-color: #cbd0d6 transparent;
  }
  .upcoming-list::-webkit-scrollbar { width: 6px; }
  .upcoming-list::-webkit-scrollbar-track { background: transparent; }
  .upcoming-list::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 999px; }
  .upcoming-list::-webkit-scrollbar-thumb:hover { background: #b6bcc4; }
}

.up-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #f3f4f6;
  border-radius: 14px;
  color: var(--ink);
  transition: background-color .15s;
}
.up-item:hover { background: #ebecef; }
.up-date {
  flex-shrink: 0;
  width: 42px;
  text-align: center;
  display: flex;
  flex-direction: column;
  line-height: 1;
}
.up-date .d { font-size: 17px; font-weight: 800; }
.up-date .m { font-size: 11px; text-transform: uppercase; color: #6b7280; margin-top: 3px; letter-spacing: 0.03em; }
.up-divider { width: 1px; align-self: stretch; background: #e0e2e6; flex-shrink: 0; }

/* Правая колонка: две строки */
.up-body {
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.up-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
}
.up-row--top { gap: 10px; justify-content: space-between; }

/* Заголовок события (тип) — крупнее, обрезается многоточием */
.up-type {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-width: 0;
  flex: 1 1 auto;
}
.up-type .legend-dot { width: 8px; height: 8px; flex-shrink: 0; }
.up-type-text {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Сумма — не сжимается, выровнена по правому краю */
.up-amount {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  text-align: right;
}
.up-amount--pos { color: var(--green); }
.up-amount--neg { color: var(--red); }

/* «От кого» — эмитент / тикер, мельче, обрезается многоточием */
.up-name {
  font-size: 12.5px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Ссылка «Все выплаты →» внизу списка */
.up-all {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid #f3f4f6;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.up-all svg { transition: transform .15s; }
.up-all:hover svg { transform: translateX(3px); }

/* \u041c\u043e\u0431\u0438\u043b\u044c\u043d\u0430\u044f \u0432\u0435\u0440\u0441\u0438\u044f \u2014 \u043a\u043e\u043c\u043f\u0430\u043a\u0442\u043d\u044b\u0435 \u044d\u043b\u0435\u043c\u0435\u043d\u0442\u044b */
@media (max-width: 420px) {
  .up-item { gap: 9px; padding: 11px 12px; }
  .up-date { width: 38px; }
  .up-date .d { font-size: 16px; }
  .up-date .m { font-size: 10px; margin-top: 2px; }
  .up-row--top { gap: 8px; }
  .up-type-text { font-size: 13px; }
  .up-amount { font-size: 13px; }
  .up-name { font-size: 11.5px; }
}

/* ============ МОДАЛЬНЫЕ ОКНА ============ */
.modal-root { position: fixed; inset: 0; z-index: 80; }
.modal-root[hidden] { display: none; }
.modal-overlay { position: absolute; inset: 0; background: rgba(31,36,46,.6); backdrop-filter: blur(2px); }
.modal-shell {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal-panel {
  width: 100%;
  max-width: 440px;
  max-height: 86vh;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 60px -20px rgba(31,36,46,.45);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
/* Широкая модалка — для событий дня */
.modal-panel--wide { max-width: 680px; }
.modal-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 20px;
  border-bottom: 1px solid #f3f4f6;
}
.modal-panel-title { font-size: 17px; font-weight: 700; color: var(--ink); }
.modal-panel-sub { font-size: 13px; color: #6b7280; margin-top: 2px; }
.modal-close {
  width: 38px; height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  border: none;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s;
}
.modal-close:hover { background: #e5e7eb; }
.modal-body { padding: 12px; overflow-y: auto; }

/* Список выбора (валюта / язык) */
.choice {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 13px 14px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 12px;
  color: var(--ink);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s;
}
.choice:hover { background: #f3f4f6; }
.choice.is-current { background: #f3f4f6; }
.choice-badge {
  width: 42px; height: 42px;
  flex-shrink: 0;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 700;
}
.choice-text { flex: 1; min-width: 0; }
.choice-name { font-size: 15px; font-weight: 600; }
.choice-meta { font-size: 13px; color: #6b7280; margin-top: 1px; }
.choice-check { color: var(--red); opacity: 0; flex-shrink: 0; }
.choice.is-current .choice-check { opacity: 1; }

/* Событие дня в модалке */
.day-event {
  display: block;
  padding: 14px;
  border-radius: 14px;
  background: #f3f4f6;
  color: var(--ink);
  transition: background-color .15s;
}
.day-event + .day-event { margin-top: 10px; }
.day-event:hover { background: #ebecef; }
.day-event-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.day-event-type { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #6b7280; }
.day-event-amt { font-size: 15px; font-weight: 800; white-space: nowrap; }
.day-event-amt--pos { color: var(--green); }
.day-event-amt--neg { color: var(--red); }
.day-event-name { font-size: 15px; font-weight: 700; margin-top: 8px; }
.day-event-desc { font-size: 13px; line-height: 1.5; color: #4b5563; margin-top: 4px; text-wrap: pretty; }
.day-event-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
}
.day-event-link svg { transition: transform .15s; }
.day-event:hover .day-event-link svg { transform: translateX(3px); }

/* ============ БУРГЕР-МЕНЮ (мобильная шапка) ============ */
.burger-cur { display: flex; flex-wrap: wrap; gap: 8px; }
.burger-cur .chip.is-active { background: var(--ink); color: #fff; }
.burger-label {
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #9ca3af;
  font-weight: 600;
  margin-bottom: 10px;
}
.burger-user {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f3f4f6;
  border-radius: 14px;
}
.burger-user .bu-ava { width: 44px; height: 44px; border-radius: 9999px; overflow: hidden; flex-shrink: 0; }
.burger-user .bu-name { font-size: 15px; font-weight: 700; color: var(--ink); }
.burger-user .bu-mail { font-size: 13px; color: #6b7280; margin-top: 2px; }





/* ===== MONIQ — Счета (accounts.css) ===== */
/* Дополняет styles.css и dashboard.css. Палитра, кнопки, радиусы, типографика,
   шапка, футер, модалки и индикатор валюты переиспользуются из общих файлов.
   Здесь — только компоненты страницы списка счетов. */

/* ============ ФОНОВАЯ СЕКЦИЯ #f3f4f6 ============ */
.acc-main { background: #f3f4f6; }
.acc-section { padding-top: 14px; padding-bottom: 56px; }
@media (min-width: 768px) { .acc-section { padding-top: 20px; padding-bottom: 80px; } }

/* ============ ЗАГОЛОВОК СТРАНИЦЫ ============ */
.acc-head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 768px) {
  .acc-head {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
  }
}
.acc-title {
  font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.25rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.acc-subtitle {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.55;
  color: #4b5563;
  text-wrap: pretty;
}

/* Кнопка «Открыть новый счёт» */
.acc-add-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  padding: 0 20px;
  width: 100%;
  flex-shrink: 0;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s;
}
.acc-add-btn:hover { background: #000; }
.acc-add-btn svg { flex-shrink: 0; }
@media (min-width: 768px) {
  .acc-add-btn { width: auto; height: 44px; }
}

/* ============ СВОДНАЯ ПЛАШКА ============ */
.acc-summary {
  margin-top: 22px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 18px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
@media (min-width: 768px) {
  .acc-summary {
    grid-template-columns: repeat(4, 1fr);
    padding: 22px 26px;
    gap: 8px;
  }
}
.acc-sum-item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
  position: relative;
}
/* Разделители между показателями на десктопе */
@media (min-width: 768px) {
  .acc-sum-item { padding-left: 26px; }
  .acc-sum-item + .acc-sum-item::before {
    content: "";
    position: absolute;
    left: 0;
    top: 2px;
    bottom: 2px;
    width: 1px;
    background: #e5e7eb;
  }
  .acc-sum-item:first-child { padding-left: 0; }
}
.acc-sum-k {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.3;
}
.acc-sum-v {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) { .acc-sum-v { font-size: 22px; } }
.acc-sum-v.acc-pos { color: var(--green); }
.acc-sum-v.acc-neg { color: var(--red); }

/* ============ БЛОК БРОКЕРА (аккордеон) ============ */
.acc-brokers {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 768px) { .acc-brokers { margin-top: 18px; gap: 18px; } }

.broker {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  overflow: hidden;
}

/* Заголовок брокера — кликабельный триггер аккордеона */
.broker-head {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  color: var(--ink);
  font: inherit;
  transition: background-color .15s;
}
@media (min-width: 768px) { .broker-head { padding: 20px 24px; } }
.broker-head:hover { background: #fafbfc; }

.broker-logo {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 16px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
}
.broker-logo--1 { background: #1f242e; }
.broker-logo--2 { background: #2b3645; }
.broker-logo--3 { background: #46505f; }

.broker-id { flex: 1 1 auto; min-width: 0; }
.broker-name {
  font-size: 17px;
  font-weight: 700;
  line-height: 1.25;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 768px) { .broker-name { font-size: 19px; } }
.broker-tag {
  font-size: 13px;
  color: #6b7280;
  margin-top: 2px;
}

/* Сводка по брокеру — справа от названия */
.broker-sum {
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 2px;
}
.broker-sum-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
@media (min-width: 768px) { .broker-sum-v { font-size: 18px; } }
.broker-sum-k {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}
/* На очень узких экранах прячем денежную сводку брокера (видна внутри карточек) */
@media (max-width: 479px) {
  .broker-sum { display: none; }
}

/* Шеврон аккордеона */
.broker-chev {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  color: var(--ink);
  transition: transform .25s ease, background-color .15s;
}
.broker.is-open .broker-chev { transform: rotate(180deg); }
.broker-head:hover .broker-chev { background: #e5e7eb; }

/* Панель со списком счетов (аккордеон) */
.broker-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease;
}
.broker.is-open .broker-panel { grid-template-rows: 1fr; }
.broker-panel > div { overflow: hidden; }
.broker-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px 16px;
}
@media (min-width: 768px) { .broker-list { padding: 0 24px 24px; } }

/* ============ КАРТОЧКА СЧЁТА ============ */
.acc-row {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "ident  action"
    "figs   figs"
    "meta   meta";
  gap: 14px 12px;
  padding: 16px;
  background: #f3f4f6;
  border-radius: 14px;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s, box-shadow .15s, transform .15s;
}
.acc-row:hover {
  background: #ebecef;
  box-shadow: 0 8px 22px -16px rgba(31,36,46,.3);
}
.acc-row:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* Идентификатор: номер счёта + бейдж типа */
.acc-ident {
  grid-area: ident;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  min-width: 0;
}
.acc-num {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  white-space: nowrap;
}
@media (min-width: 1024px) { .acc-num { font-size: 19px; } }

.acc-badge {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
/* ИИС — тонкая красная подсветка */
.acc-badge--iis {
  background: rgba(225,29,72,.08);
  color: var(--red);
}
/* Депозитный — нейтральный */
.acc-badge--dep {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e0e2e6;
}

/* Блок показателей */
.acc-figs {
  grid-area: figs;
  display: flex;
  flex-wrap: wrap;
  gap: 14px 22px;
  min-width: 0;
}
.acc-fig {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 130px;
}
.acc-fig-k {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}
.acc-fig-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acc-fig--value .acc-fig-v { font-size: 18px; }
@media (min-width: 1024px) {
  .acc-fig-v { font-size: 16px; }
  .acc-fig--value .acc-fig-v { font-size: 19px; }
}

/* Доход: сумма + процент */
.acc-income {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  white-space: nowrap;
}
.acc-income .acc-pct {
  font-size: 13px;
  font-weight: 700;
}
.acc-pos, .acc-pos .acc-pct { color: var(--green); }
.acc-neg, .acc-neg .acc-pct { color: var(--red); }

/* Мета: дата открытия / последней операции */
.acc-meta {
  grid-area: meta;
  font-size: 12.5px;
  color: #9ca3af;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Зона действий: меню ⋯ + стрелка */
.acc-action {
  grid-area: action;
  display: flex;
  align-items: center;
  gap: 6px;
  align-self: start;
}

.acc-menu-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.acc-menu-btn:hover { background: #fff; color: var(--ink); }

.acc-arrow {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  transition: background-color .15s, color .15s;
}
.acc-row:hover .acc-arrow { background: var(--ink); color: #fff; }

/* Контекстное меню карточки (⋯) */
.acc-menu-wrap { position: relative; }
.acc-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 200px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(31,36,46,.04), 0 18px 40px -18px rgba(31,36,46,.28);
  padding: 6px;
  z-index: 40;
}
.acc-menu[hidden] { display: none; }
.acc-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border: none;
  background: transparent;
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s;
}
.acc-menu-item:hover { background: #f3f4f6; }
.acc-menu-item svg { flex-shrink: 0; color: #6b7280; }
.acc-menu-item--danger { color: var(--red); }
.acc-menu-item--danger svg { color: var(--red); }
.acc-menu-item--danger:hover { background: rgba(225,29,72,.08); }

/* ===== Десктоп: счёт в одну строку ===== */
@media (min-width: 1024px) {
  .acc-row {
    grid-template-columns: minmax(180px, 1.3fr) minmax(0, 2.6fr) auto auto;
    grid-template-areas: "ident figs meta action";
    align-items: center;
    gap: 24px;
    padding: 18px 22px;
  }
  .acc-figs { flex-wrap: nowrap; gap: 24px; }
  .acc-fig { flex: 0 1 auto; }
  .acc-fig--value { min-width: 110px; }
  .acc-fig--income { min-width: 140px; }
  .acc-meta { text-align: right; }
  .acc-action { align-self: center; }
}

/* ============ ПУСТОЕ СОСТОЯНИЕ ============ */
.acc-empty {
  margin-top: 18px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 48px 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}
@media (min-width: 768px) { .acc-empty { padding: 64px 32px; } }
.acc-empty-ic {
  width: 72px;
  height: 72px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  background: #f3f4f6;
  color: var(--ink);
  margin-bottom: 20px;
}
.acc-empty-ic svg { width: 32px; height: 32px; }
.acc-empty-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.acc-empty-text {
  margin-top: 10px;
  max-width: 420px;
  font-size: 15px;
  line-height: 1.55;
  color: #6b7280;
  text-wrap: pretty;
}
.acc-empty-btn {
  margin-top: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 24px;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s;
}
.acc-empty-btn:hover { background: #000; }

/* ============ МОДАЛКА «ОТКРЫТЬ СЧЁТ» — форма ============ */
.acc-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 8px 8px 10px;
}

/* Поле формы — единый стиль с формами логина/регистрации */
.acc-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
.acc-field-label {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink);
  letter-spacing: 0.01em;
  padding: 0;
}

.acc-field-input {
  width: 100%;
  height: 52px;
  padding: 0 16px;
  background-color: #f3f4f6;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  font: inherit;
  font-size: 15px;
  color: var(--ink);
  transition: background-color .15s, border-color .15s, box-shadow .15s;
}
.acc-field-input::placeholder { color: #9ca3af; }
.acc-field-input:hover { background-color: #ebecef; }
.acc-field-input:focus {
  outline: none;
  background-color: #fff;
  border-color: rgba(31, 36, 46, .25);
  box-shadow: 0 0 0 3px rgba(31, 36, 46, .06);
}

/* ===== Кастомный select с поиском (комбобокс) ===== */
.combo { position: relative; }
.combo-control { position: relative; }
.combo-input { padding-right: 44px; }
.combo-chevron {
  position: absolute;
  top: 50%;
  right: 14px;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  color: #6b7280;
  pointer-events: none;
  transition: transform .2s ease, color .15s;
}
.combo.is-open .combo-chevron { transform: translateY(-50%) rotate(180deg); color: var(--ink); }

.combo-list {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 6px);
  max-height: 232px;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(31,36,46,.04), 0 18px 40px -18px rgba(31,36,46,.3);
  padding: 6px;
  z-index: 50;
  list-style: none;
  margin: 0;
}
.combo-list[hidden] { display: none; }
.combo-option {
  padding: 11px 12px;
  border-radius: 9px;
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .12s;
}
.combo-option[hidden] { display: none; }
.combo-option:hover,
.combo-option.is-active { background: #f3f4f6; }
.combo-option.is-selected { background: #f3f4f6; }
.combo-empty {
  padding: 12px;
  font-size: 14px;
  color: #9ca3af;
  text-align: center;
}
.combo-empty[hidden] { display: none; }

/* ===== Тип счёта — кастомные радиокнопки ===== */
.acc-typeset { gap: 10px; }
.acc-type-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.acc-type-opt {
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 13px 14px;
  background: #f3f4f6;
  border: 1px solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.acc-type-opt:hover { background: #ebecef; }
/* Нативный input скрыт, но доступен для клавиатуры/скринридеров */
.acc-type-opt input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.acc-type-box {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 7px;
  background: #fff;
  border: 1.5px solid #d1d5db;
  color: #fff;
  transition: background-color .15s, border-color .15s;
}
.acc-type-box svg { opacity: 0; transition: opacity .12s; }
.acc-type-opt input:checked ~ .acc-type-box {
  background: var(--ink);
  border-color: var(--ink);
}
.acc-type-opt input:checked ~ .acc-type-box svg { opacity: 1; }
.acc-type-opt input:checked ~ .acc-type-text .acc-type-name { color: var(--ink); }
.acc-type-opt:has(input:checked) {
  background: #fff;
  border-color: rgba(31,36,46,.2);
}
.acc-type-opt input:focus-visible ~ .acc-type-box {
  outline: 2px solid rgba(31,36,46,.4);
  outline-offset: 2px;
}
.acc-type-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-type-name { font-size: 15px; font-weight: 600; color: var(--ink); }
.acc-type-meta { font-size: 12.5px; color: #6b7280; line-height: 1.35; }

/* Кнопка отправки формы */
.acc-form-submit {
  height: 52px;
  width: 100%;
  font-size: 15px;
  font-weight: 500;
  margin-top: 2px;
}




/* ===== MONIQ — Описание счёта (account.css) ===== */
/* Дополняет styles.css, dashboard.css и accounts.css. Палитра, кнопки, радиусы,
   шапка, футер, модалки, индикатор валюты, поля формы, бейджи и сводные плашки
   переиспользуются. Здесь — только компоненты страницы описания счёта. */

/* Фоновая серая секция переиспользуется из accounts.css: .acc-main / .acc-section */

/* ============ ЗАГОЛОВОК СТРАНИЦЫ (двухколоночный) ============ */
.adt-head {
  display: flex;
  flex-direction: column;
  gap: 18px;
  align-items: flex-start;
}
@media (min-width: 768px) {
  .adt-head {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
  }
}

/* Левая часть — идентификация счёта */
.adt-ident {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}
.adt-logo {
  width: 60px;
  height: 60px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  background: #1f242e;
}
@media (min-width: 768px) { .adt-logo { width: 68px; height: 68px; font-size: 24px; } }

.adt-ident-text { min-width: 0; }
.adt-name {
  font-size: clamp(1.5rem, 1.1vw + 1.15rem, 2rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
}
.adt-sub {
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.adt-num {
  font-size: 15px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
}
@media (min-width: 768px) { .adt-num { font-size: 16px; } }

/* Правая часть — действия */
.adt-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}
@media (min-width: 768px) { .adt-actions { width: auto; } }

.adt-import-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 48px;
  padding: 0 22px;
  flex: 1 1 auto;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s;
}
.adt-import-btn:hover { background: #000; }
.adt-import-btn svg { flex-shrink: 0; }
@media (min-width: 768px) { .adt-import-btn { flex: 0 0 auto; height: 46px; } }

/* Компактное меню дополнительных действий (⋯) */
.adt-more-wrap { position: relative; flex-shrink: 0; }
.adt-more-btn {
  width: 48px;
  height: 48px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: #fff;
  border: 1px solid #e5e7eb;
  color: var(--ink);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.adt-more-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
@media (min-width: 768px) { .adt-more-btn { width: 46px; height: 46px; } }

.adt-more-menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  width: 220px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(31,36,46,.04), 0 18px 40px -18px rgba(31,36,46,.28);
  padding: 6px;
  z-index: 40;
}
.adt-more-menu[hidden] { display: none; }
.adt-more-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px 11px;
  border: none;
  background: transparent;
  border-radius: 9px;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  text-align: left;
  cursor: pointer;
  transition: background-color .15s;
}
.adt-more-item:hover { background: #f3f4f6; }
.adt-more-item svg { flex-shrink: 0; color: #6b7280; }
.adt-more-item--danger { color: var(--red); }
.adt-more-item--danger svg { color: var(--red); }
.adt-more-item--danger:hover { background: rgba(225,29,72,.08); }
.adt-more-sep { height: 1px; background: #f3f4f6; margin: 6px 4px; }

/* ============ СВОДКА ПО СЧЁТУ — плашки #f3f4f6 ============ */
.adt-stats {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (min-width: 1024px) {
  .adt-stats { grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 26px; }
}

/* На мобильной (<640px) — горизонтальная карусель плашек */
@media (max-width: 639px) {
  .adt-stats {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;
    scrollbar-width: none;
    margin-left: -16px;
    margin-right: -16px;
    padding: 0 16px 4px;
  }
  .adt-stats::-webkit-scrollbar { display: none; }
  .adt-stat {
    flex: 0 0 62%;
    scroll-snap-align: start;
  }
}

.adt-stat {
  background: #f3f4f6;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
@media (min-width: 1024px) { .adt-stat { padding: 20px 22px; } }
.adt-stat-k {
  font-size: 13px;
  color: #6b7280;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.adt-stat-v {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--ink);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) { .adt-stat-v { font-size: 23px; } }
.adt-stat-v.acc-pos { color: var(--green); }
.adt-stat-v.acc-neg { color: var(--red); }
/* Доход: процент рядом с суммой */
.adt-stat-pct {
  font-size: 14px;
  font-weight: 700;
  margin-left: 8px;
}

/* ============ КАРТОЧКА-СЕКЦИЯ (белая) ============ */
.adt-card {
  margin-top: 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 22px;
}
@media (min-width: 768px) { .adt-card { margin-top: 18px; padding: 28px; } }

.adt-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.adt-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .adt-section-title { font-size: 24px; } }
.adt-count { color: #9ca3af; font-weight: 700; }

/* ============ ПУСТОЕ СОСТОЯНИЕ — нет бумаг на счёте ============ */
.sec-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  background: #f6f7f9;
  border: 1px solid #eceef1;
  border-radius: 16px;
}
@media (min-width: 768px) { .sec-empty { padding: 64px 40px; } }

.sec-empty-ic {
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #eceef1;
  color: #1f242e;
}
@media (min-width: 768px) { .sec-empty-ic { width: 112px; height: 112px; } }
.sec-empty-ic svg { width: 52px; height: 52px; opacity: 0.4; }
@media (min-width: 768px) { .sec-empty-ic svg { width: 60px; height: 60px; } }

.sec-empty-title {
  margin-top: 22px;
  font-size: 19px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: #1f242e;
}
@media (min-width: 768px) { .sec-empty-title { font-size: 24px; } }

.sec-empty-text {
  margin-top: 10px;
  max-width: 48ch;
  font-size: 15px;
  line-height: 1.55;
  color: #1f242e;
  opacity: 0.66;
  text-wrap: pretty;
}
@media (min-width: 768px) { .sec-empty-text { font-size: 16px; } }

.sec-empty-actions {
  margin-top: 26px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}
.sec-empty-actions .adt-import-btn { flex: 0 0 auto; }

.sec-empty-link {
  font-size: 15px;
  font-weight: 500;
  color: #1f242e;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: #c7ccd3;
  transition: text-decoration-color .15s;
}
.sec-empty-link:hover { text-decoration-color: #1f242e; }

/* ============ КОМИССИИ БРОКЕРА — таблица ============ */
.fee-table {
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 639px) { .fee-table { grid-template-columns: 1fr; } }

.fee-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 15px 18px;
  background: #f3f4f6;
  border-radius: 14px;
  min-width: 0;
}
.fee-k {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.35;
  min-width: 0;
}
@media (min-width: 1024px) { .fee-k { font-size: 15px; } }
.fee-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  flex-shrink: 0;
}
.fee-v--free { color: var(--green); }

.fee-more {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 500;
  color: var(--red);
  transition: gap .15s;
}
.fee-more:hover { gap: 9px; }
.fee-more svg { flex-shrink: 0; }

/* ============ ФИЛЬТРЫ БУМАГ ============ */
.sec-filters {
  margin-top: 16px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ============ СПИСОК БУМАГ НА СЧЁТЕ ============ */
.sec-list {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.sec-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #f3f4f6;
  border-radius: 14px;
  color: var(--ink);
  transition: background-color .15s;
}
@media (min-width: 1024px) { .sec-row { padding: 16px 22px; gap: 20px; } }
.sec-row:hover { background: #ebecef; }
.sec-row[hidden] { display: none; }

.sec-logo {
  width: 44px;
  height: 44px;
  border-radius: 9999px;
  display: grid;
  place-items: center;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: -0.01em;
  flex-shrink: 0;
  background: #1f242e;
}
.sec-logo--1 { background: #1f242e; }
.sec-logo--2 { background: #2b3645; }
.sec-logo--3 { background: #46505f; }
.sec-logo--4 { background: #5a6675; }

/* Идентификатор бумаги: тикер + тип */
.sec-ident {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sec-ticker {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.sec-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
@media (min-width: 1024px) { .sec-name { font-size: 17px; } }
.sec-qty {
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}

/* Бейдж типа бумаги */
.sec-badge {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 7px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.sec-badge--bond {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e0e2e6;
}
.sec-badge--share {
  background: rgba(225,29,72,.08);
  color: var(--red);
}

/* Числовые колонки */
.sec-fig {
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: flex-end;
  text-align: right;
  flex-shrink: 0;
}
.sec-fig-k {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
}
.sec-fig-v {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
.sec-fig--value { min-width: 96px; }
.sec-fig--yield { min-width: 70px; }
.sec-fig--yield .sec-fig-v.acc-pos { color: var(--green); }
.sec-fig--yield .sec-fig-v.acc-neg { color: var(--red); }

/* На планшете/мобильной прячем колонку стоимости (видна доходность + стрелка) */
@media (max-width: 767px) {
  .sec-fig--value { display: none; }
}

.sec-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  transition: background-color .15s, color .15s;
}
.sec-row:hover .sec-arrow { background: var(--ink); color: #fff; }

/* Кнопка «Ещё» — переиспользуем .load-more-btn из styles.css */
.sec-more-wrap {
  margin-top: 18px;
  display: flex;
  justify-content: center;
}
.sec-more-wrap[hidden] { display: none; }

/* ============ МОДАЛКА ИМПОРТА СДЕЛОК ============ */
/* Базовая механика (.modal-root / .modal-panel / .modal-body) — из dashboard.css */
.imp-panel { max-width: 520px; }

.imp-body { padding: 16px 20px 22px; }

/* ============ МОДАЛКА КОМИССИЙ БРОКЕРА ============ */
.fee-panel { max-width: 860px; }
.fee-body { padding: 16px 16px 20px; }
@media (min-width: 768px) { .fee-body { padding: 20px 24px 24px; } }

/* Список комиссий — карточки-плашки в один столбец */
.fee-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.fee-item {
  background: #f3f4f6;
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}
@media (min-width: 768px) { .fee-item { padding: 18px 22px; } }

/* Верхняя строка: заголовок (тип сделки) + бейдж типа комиссии */
.fee-item-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.fee-item-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
  min-width: 0;
  text-wrap: pretty;
}
@media (min-width: 768px) { .fee-item-title { font-size: 17px; } }

/* Бейдж типа комиссии — в духе .acc-badge со страницы «Счета» */
.fee-chip {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  flex-shrink: 0;
}
.fee-chip--pct {
  background: rgba(225,29,72,.08);
  color: var(--red);
}
.fee-chip--fixed {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e0e2e6;
}

/* Значение комиссии — главное число карточки */
.fee-value {
  font-size: 28px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
  color: var(--ink);
}
@media (min-width: 768px) { .fee-value { font-size: 32px; } }

/* Сетка параметров: валюта, дата начала действия */
.fee-params {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 28px;
}
.fee-param {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 13px;
  line-height: 1.4;
}
@media (min-width: 768px) { .fee-param { font-size: 14px; } }
.fee-param-k { color: #6b7280; }
.fee-param-v { color: var(--ink); font-weight: 600; }
.fee-param--muted .fee-param-k,
.fee-param--muted .fee-param-v { color: #9ca3af; font-weight: 500; }

/* Примечание — мелким приглушённым шрифтом, с переносом */
.fee-note {
  font-size: 12.5px;
  line-height: 1.5;
  color: #6b7280;
  text-wrap: pretty;
  min-width: 0;
}
.fee-note-k { font-weight: 700; color: #4b5563; }

/* ============ МОДАЛКА УДАЛЕНИЯ СЧЁТА ============ */
.del-panel { max-width: 480px; }
.del-head { border-bottom: 1px solid #f3f4f6; }
.del-body {
  padding: 22px 22px 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 14px;
}
.del-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: rgba(225,29,72,.08);
  color: var(--red);
}
.del-text {
  font-size: 14.5px;
  line-height: 1.55;
  color: #4b5563;
  text-wrap: pretty;
}
.del-text strong { color: var(--ink); font-weight: 700; white-space: nowrap; }
.del-form { width: 100%; margin-top: 6px; }
.del-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
@media (max-width: 479px) { .del-actions { justify-content: stretch; } }
.del-btn {
  height: 46px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color .15s, opacity .15s;
}
@media (max-width: 479px) { .del-btn { flex: 1 1 0; } }
.del-btn--cancel {
  background: #f3f4f6;
  color: var(--ink);
}
.del-btn--cancel:hover { background: #e5e7eb; }
.del-btn--confirm {
  background: var(--red);
  color: #fff;
}
.del-btn--confirm:hover { background: #be123c; }
.del-btn:disabled { opacity: .6; cursor: progress; }
.del-btn--cancel:disabled { cursor: not-allowed; }

/* Спиннер — скрыт, появляется при отправке формы */
.del-spinner { display: none; animation: del-spin .7s linear infinite; }
.del-form.is-submitting .del-spinner { display: inline-block; }
@keyframes del-spin { to { transform: rotate(360deg); } }

/* ============ МОДАЛКА ИМПОРТА СДЕЛОК (продолжение) ============ */
@media (min-width: 768px) { .imp-body { padding: 18px 24px 26px; } }

/* Информационная плашка с описанием */
.imp-info {
  background: #f3f4f6;
  border-radius: 14px;
  padding: 16px 18px;
}
.imp-info-text {
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
  text-wrap: pretty;
}
.imp-info-text strong { color: var(--ink); font-weight: 700; }
.imp-links {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
@media (min-width: 480px) { .imp-links { flex-direction: row; flex-wrap: wrap; gap: 18px; } }
.imp-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  transition: color .15s;
}
.imp-link:hover { color: var(--red); }
.imp-link-ic {
  width: 26px;
  height: 26px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: var(--red);
  color: #fff;
}
.imp-link-ic--ext {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e0e2e6;
}

/* Форма импорта */
.imp-form {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Диапазон дат — два поля в строку на десктопе */
.imp-dates {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  border: none;
  margin: 0;
  padding: 0;
  min-width: 0;
}
@media (min-width: 480px) { .imp-dates { grid-template-columns: 1fr 1fr; } }

/* Нативный date-input под общий стиль полей (.acc-field-input из accounts.css) */
.imp-date::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .6; }
.imp-date::-webkit-calendar-picker-indicator:hover { opacity: 1; }

/* Dropzone поверх скрытого <input type="file"> */
.imp-file-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.imp-drop {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 28px 20px;
  background: #f3f4f6;
  border: 1.5px dashed #c7cad1;
  border-radius: var(--radius-btn);
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.imp-drop:hover { background: #ebecef; border-color: #9ca3af; }
.imp-drop.is-dragover { background: rgba(225,29,72,.05); border-color: var(--red); }
.imp-drop-ic {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 9999px;
  background: #fff;
  color: var(--ink);
}
.imp-drop-title { font-size: 14px; font-weight: 600; color: var(--ink); }
.imp-drop-title strong { color: var(--red); font-weight: 700; }
.imp-drop-note { font-size: 12.5px; color: #9ca3af; }
/* Нативный input скрыт, но доступен */
.imp-file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Выбранный файл */
.imp-chosen {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  background: #fff;
  border: 1px solid #e0e2e6;
  border-radius: var(--radius-btn);
}
.imp-chosen[hidden] { display: none; }
.imp-chosen-ic {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 9px;
  background: #f3f4f6;
  color: var(--ink);
}
.imp-chosen-name {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.imp-chosen-remove {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  background: transparent;
  border: none;
  color: #6b7280;
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.imp-chosen-remove:hover { background: rgba(225,29,72,.08); color: var(--red); }

/* Кнопка отправки */
.imp-submit {
  height: 52px;
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--ink);
  color: #fff;
  border: none;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s;
}
.imp-submit:hover { background: #000; }
.imp-submit[disabled] { opacity: .45; cursor: not-allowed; }
.imp-submit[disabled]:hover { background: var(--ink); }
.imp-submit.is-loading { cursor: progress; }











/* ===== MONIQ — Карточка облигации (bond.css) ===== */
/* Дополняет styles.css. Только компоненты, специфичные для страницы облигации. */

/* ============ ПЛАВНЫЙ ФОН #f3f4f6 → #ffffff ============ */
/* Охватывает хлебные крошки + карточку облигации (секции 1–6).
   Точка перехода серый→белый — примерно в середине секции
   «Другие бумаги эмитента» (последняя секция левой колонки). */
.bd-page-grad {
  background: linear-gradient(to bottom, #f3f4f6 0%, #f3f4f6 80%, #ffffff 95%);
}
.bd-page-grad .breadcrumb-nav { background: transparent; }
.bd-detail-section { background: transparent; }

/* ============ ДВУХКОЛОНОЧНЫЙ ЛЕЙАУТ + STICKY ============ */
/* Якорь sticky-зоны = grid-контейнер, охватывающий заголовок (1) и
   остальные секции левой колонки до «Похожих облигаций» (6) включительно. */
.bd-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
.bd-main {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
}
.bd-side-inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Мобильный порядок (одна колонка): заголовок → «Открыть аккаунт» → остальное.
   На десктопе размещение задаётся grid-template-areas и `order` игнорируется. */
.bd-area-header { order: 1; }
.bd-area-side   { order: 2; }
.bd-area-rest   { order: 3; }

@media (min-width: 1024px) {
  .bd-layout {
    /* левая колонка 2/3, правая 1/3 */
    grid-template-columns: 2fr 1fr;
    grid-template-areas:
      "header side"
      "rest   side";
    column-gap: 32px;
    row-gap: 28px;
    align-items: start;
  }
  .bd-area-header { grid-area: header; }
  .bd-area-rest   { grid-area: rest; }
  /* align-self: stretch — растягиваем колонку на всю высоту grid (секции 1–6),
     чтобы sticky-обёртка имела пространство для перемещения */
  .bd-area-side   { grid-area: side; align-self: stretch; }

  /* sticky действует в пределах grid-контейнера (секции 1–6),
     останавливаясь у нижней границы секции «Другие бумаги эмитента» */
  .bd-side-inner {
    position: sticky;
    top: 24px;
  }
}

/* ============ ЗАГОЛОВОК ОБЛИГАЦИИ (секция 1) ============ */
.bd-head {
  display: flex;
  align-items: flex-start;
  gap: 18px;
}

/* Общий класс — габариты и форма для обоих вариантов (img и div) */
.bd-head-logo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: none; /* скрыт на мобильных (оба варианта) */
  flex-shrink: 0;
}
/* Вариант <img> — реальный логотип эмитента */
img.bd-head-logo {
  object-fit: cover;
}
/* Вариант <div> — фоллбек с аббревиатурой */
div.bd-head-logo {
  place-items: center;
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  font-size: 20px;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  user-select: none;
}
@media (min-width: 768px) {
  .bd-head-logo { display: block; width: 64px; height: 64px; }
  div.bd-head-logo { display: grid; font-size: 22px; }
}

.bd-head-text { min-width: 0; flex: 1; }
.bd-head-isin {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #6b7280;
}
@media (min-width: 768px) { .bd-head-isin { font-size: 13px; } }
.bd-head-title {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--ink);
  font-size: clamp(1.75rem, 2.2vw + 1rem, 2.5rem);
  margin-top: 2px;
}
.bd-head-issuer {
  font-size: 15px;
  color: #6b7280;
  margin-top: 6px;
}
@media (min-width: 768px) { .bd-head-issuer { font-size: 16px; } }
.bd-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.bd-badge {
  display: inline-flex;
  align-items: center;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  color: var(--ink);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.bd-badge--rating {
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

/* ============ ТАБЫ: График / Стакан (секция 2) ============ */
.bd-tabs-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.bd-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 4px;
  background: #f3f4f6;
  border-radius: 12px;
}
.bd-tab {
  appearance: none;
  border: none;
  cursor: pointer;
  height: 40px;
  padding: 0 20px;
  border-radius: 9px;
  background: transparent;
  color: #6b7280;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .18s, color .18s, box-shadow .18s;
}
.bd-tab:hover { color: var(--ink); }
.bd-tab.is-active {
  background: #fff;
  color: var(--ink);
  box-shadow: 0 1px 2px rgba(31,36,46,.06), 0 4px 12px -6px rgba(31,36,46,.18);
}

/* Бейдж «Рынок открыт/закрыт» — начальное состояние с сервера
   (TradingCalendarService::isMarketOpenNow()), дальше живо переключается
   market-widget.js (updateMarketStatus()) каждую минуту. */
.bd-market-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-btn);
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
}
.bd-market-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex: none;
}
.bd-market-status.is-open {
  background: rgba(16, 185, 129, .12);
  color: #10b981;
}
.bd-market-status.is-open .bd-market-status-dot { background: #10b981; }
.bd-market-status.is-closed {
  background: #f3f4f6;
  color: #6b7280;
}
.bd-market-status.is-closed .bd-market-status-dot { background: #9ca3af; }

.bd-widget {
  margin-top: 18px;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
}
.bd-panel { display: none; }
.bd-panel.is-active { display: block; }

/* TradingView Advanced Charts — полный тулбар (инструменты рисования,
   индикаторы, переключатель разрешений и т.п.) требует заметно больше
   вертикального места, чем прежний компактный график без тулбара. */
.bd-chart {
  height: 480px;
}
@media (min-width: 768px) { .bd-chart { height: 620px; } }

/* ============ СТАКАН (order book) ============ */
/* Вертикальная раскладка: продажи сверху, спред посередине, покупки снизу. */
.ob {
  display: flex;
  flex-direction: column;
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 13px;
}
.ob-head {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  padding: 12px 18px;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  border-bottom: 1px solid #eef0f2;
}
.ob-head span:nth-child(2) { text-align: center; }
.ob-head span:nth-child(3) { text-align: right; }
.ob-rows {
  display: flex;
  flex-direction: column;
  padding: 6px 0;
}
.ob-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  align-items: center;
  padding: 6px 18px;
  color: var(--ink);
  isolation: isolate;
}
.ob-row .ob-vol { color: #6b7280; }
.ob-row .ob-price { text-align: center; font-weight: 500; }
.ob-row .ob-total { text-align: right; color: #9ca3af; }
.ob-row::before {
  content: "";
  position: absolute;
  top: 1px;
  bottom: 1px;
  right: 0;
  width: var(--depth, 0%);
  z-index: -1;
  border-radius: 4px 0 0 4px;
}
.ob-row--ask::before { background: rgba(225,29,72,.10); }
.ob-row--ask .ob-price { color: var(--red); }
.ob-row--bid::before { background: rgba(31,36,46,.07); }
.ob-spread {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 10px 18px;
  margin: 4px 0;
  background: #f3f4f6;
  font-family: 'Roboto', sans-serif;
  font-size: 12px;
  color: #6b7280;
}
.ob-spread strong { color: var(--ink); font-weight: 600; }
.bd-widget-note {
  padding: 10px 18px 14px;
  font-size: 12px;
  color: #9ca3af;
}

/* ============ ОПИСАНИЕ + ПАРАМЕТРЫ (секция 3) ============ */
.bd-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 24px;
}
@media (min-width: 768px) { .bd-card { padding: 30px; } }
.bd-section-title {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
}
@media (min-width: 768px) { .bd-section-title { font-size: 24px; } }
.bd-prose {
  margin-top: 12px;
  color: #4b5563;
  line-height: 1.65;
  font-size: 15px;
}
@media (min-width: 768px) { .bd-prose { font-size: 16px; } }
.bd-params {
  margin-top: 22px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: #eef0f2;
  border-radius: 14px;
  overflow: hidden;
}
@media (min-width: 640px) { .bd-params { grid-template-columns: repeat(3, 1fr); } }
.bd-param {
  background: #fff;
  padding: 16px 18px;
}
@media (min-width: 1024px) { .bd-param { padding: 20px 22px; } }
.bd-param .k { font-size: 13px; color: #6b7280; }
@media (min-width: 1024px) { .bd-param .k { font-size: 15px; } }
.bd-param .v {
  margin-top: 4px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
@media (min-width: 1024px) { .bd-param .v { font-size: 22px; margin-top: 6px; } }
.bd-param .v.accent { color: var(--red); }

/* ============ ГРАФИК КУПОННЫХ ВЫПЛАТ (секция 4) ============ */
.coupon-paid {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.coupon-paid .num {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
}
.coupon-progress {
  margin-top: 14px;
  height: 8px;
  border-radius: 999px;
  background: #eef0f2;
  overflow: hidden;
}
.coupon-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: var(--ink);
}
.coupon-years {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 22px;
}
.coupon-year {
  appearance: none;
  border: 1px solid transparent;
  cursor: pointer;
  height: 38px;
  padding: 0 16px;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  color: var(--ink);
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s, color .15s;
}
.coupon-year:hover { background: #e5e7eb; }
.coupon-year.is-active { background: var(--ink); color: #fff; }

.coupon-table { margin-top: 18px; }
.coupon-table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.coupon-table th:nth-child(1), .coupon-table td:nth-child(1) { width: 26%; }
.coupon-table th:nth-child(2), .coupon-table td:nth-child(2) { width: 32%; }
.coupon-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 500;
  padding: 0 0 10px;
  border-bottom: 1px solid #eef0f2;
}
.coupon-table th:last-child,
.coupon-table td:last-child { text-align: right; }
.coupon-table td {
  padding: 14px 0;
  border-bottom: 1px solid #f3f4f6;
  font-size: 15px;
  color: var(--ink);
  vertical-align: middle;
}
.coupon-table tr:last-child td { border-bottom: none; }
.coupon-date { font-weight: 500; }
.coupon-amount { font-weight: 700; }

@media (max-width: 520px) {
  .coupon-table table,
  .coupon-table tbody { display: block; }
  .coupon-table thead { display: none; }
  .coupon-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    column-gap: 12px;
    padding: 12px 0;
    border-bottom: 1px solid #f3f4f6;
  }
  .coupon-table tr:last-child { border-bottom: none; }
  .coupon-table td {
    display: block;
    padding: 0;
    border: none;
    font-size: 14px;
    text-align: left;
  }
  .coupon-table td:nth-child(1) { grid-column: 1; grid-row: 1; }
  .coupon-table td:nth-child(2) { grid-column: 1; grid-row: 2; margin-top: 3px; }
  .coupon-table td:nth-child(3) { grid-column: 2; grid-row: 1 / 3; align-self: center; text-align: right; }
}
.coupon-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 500;
}
.coupon-status--paid { color: var(--ink); }
.coupon-status--paid .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ink); }
.coupon-status--planned { color: #9ca3af; }
.coupon-status--planned .dot { width: 8px; height: 8px; border-radius: 999px; border: 1.5px solid #cbd0d6; }

/* ============ ПУЛЬС (секция 5) ============ */
.pulse-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pulse-post {
  display: flex;
  gap: 14px;
  padding: 18px;
  background: #f3f4f6;
  border-radius: 14px;
}
.pulse-ava {
  width: 42px;
  height: 42px;
  border-radius: 999px;
  flex-shrink: 0;
  display: none; /* скрыт на мобильных */
  place-items: center;
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  background: var(--ink);
}
@media (min-width: 768px) { .pulse-ava { display: grid; } }
.pulse-ava--2 { background: #46505f; }
.pulse-ava--3 { background: #5a6675; }
.pulse-body { min-width: 0; flex: 1; }
.pulse-meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pulse-name { font-weight: 600; font-size: 14px; color: var(--ink); }
.pulse-handle, .pulse-time { font-size: 13px; color: #9ca3af; }
.pulse-text {
  margin-top: 6px;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
  text-wrap: pretty;
}
.pulse-stats {
  margin-top: 10px;
  display: flex;
  gap: 18px;
  font-size: 13px;
  color: #6b7280;
}
.pulse-stat { display: inline-flex; align-items: center; gap: 6px; }

/* ============ ДРУГИЕ БУМАГИ ЭМИТЕНТА — светлый список (секция 6) ============ */
.issuer-list {
  margin-top: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.issuer-row {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: #f3f4f6;
  border-radius: 14px;
  color: var(--ink);
  transition: background-color .15s;
}
@media (min-width: 1024px) { .issuer-row { padding: 20px 24px; gap: 24px; } }
.issuer-row:hover { background: #ebecef; }
.issuer-col {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.issuer-col--ticker { flex: 1 1 auto; }
.issuer-col--coupon { flex: 0 1 200px; }
.issuer-col--yield  { flex: 0 0 auto; min-width: 80px; }
.issuer-col--mat    { flex: 0 0 auto; min-width: 92px; }
.issuer-meta {
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #6b7280;
}
.issuer-val {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) { .issuer-val { font-size: 16px; } }
.issuer-val--ticker { font-weight: 700; }
.issuer-val.accent { color: var(--red); font-weight: 700; }
.issuer-link {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  transition: background-color .15s, color .15s;
}
.issuer-row:hover .issuer-link { background: var(--ink); color: #fff; }

/* Планшет/мобильная: скрываем «Вид купона», если не помещается */
@media (max-width: 767px) {
  .issuer-col--coupon { display: none; }
}

/* ============ ПРАВАЯ КОЛОНКА — «Открыть аккаунт» ============ */
.acct-card {
  background: var(--red);
  color: #fff;
  border-radius: 20px;
  padding: 24px;
}
@media (min-width: 768px) { .acct-card { padding: 28px; } }
.acct-title { font-size: 22px; font-weight: 800; letter-spacing: -0.01em; line-height: 1.15; }
.acct-sub { margin-top: 8px; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.85); }
.acct-calc {
  margin-top: 20px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 14px;
  padding: 16px;
}
.acct-calc-label { font-size: 12px; letter-spacing: 0.03em; text-transform: uppercase; color: rgba(255,255,255,.8); }
.acct-stepper {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.acct-step-btn {
  width: 38px;
  height: 38px;
  flex-shrink: 0;
  border-radius: var(--radius-btn);
  border: 1px solid rgba(255,255,255,.35);
  background: rgba(255,255,255,.1);
  color: #fff;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: background-color .15s;
}
.acct-step-btn:hover { background: rgba(255,255,255,.22); }
.acct-qty {
  width: 100%;
  text-align: center;
  background: transparent;
  border: none;
  color: #fff;
  font: inherit;
  font-size: 20px;
  font-weight: 700;
  -moz-appearance: textfield;
}
.acct-qty::-webkit-outer-spin-button,
.acct-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.acct-qty:focus { outline: none; }
.acct-result {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.18);
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.acct-result .k { font-size: 13px; color: rgba(255,255,255,.85); }
.acct-result .v { font-size: 22px; font-weight: 800; }
.acct-btn {
  margin-top: 18px;
  width: 100%;
  height: 50px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  transition: background-color .15s;
}
.acct-btn:hover { background: #f3f4f6; }
.acct-ghost {
  margin-top: 10px;
  width: 100%;
  height: 46px;
  border: 1px solid rgba(255,255,255,.4);
  cursor: pointer;
  border-radius: var(--radius-btn);
  background: transparent;
  color: #fff;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s;
}
.acct-ghost:hover { background: rgba(255,255,255,.12); }

/* ============ ПРАВАЯ КОЛОНКА — ИИ-ассистент ============ */
.ai-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 20px;
  padding: 24px;
}
.ai-head { display: flex; align-items: center; gap: 12px; }
.ai-icon {
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
}
.ai-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.ai-sub { font-size: 13px; color: #6b7280; margin-top: 2px; }

/* Область диалога: история сообщений с прокруткой */
.ai-log {
  margin-top: 16px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px;
  background: #f3f4f6;
  border-radius: 14px;
  scroll-behavior: smooth;
  overscroll-behavior: contain;
}
.ai-msg {
  max-width: 88%;
  padding: 10px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  word-wrap: break-word;
}
.ai-msg--bot {
  background: #fff;
  color: var(--ink);
  border-bottom-left-radius: 4px;
  box-shadow: 0 1px 2px rgba(31,36,46,.05);
}
.ai-msg--user {
  background: var(--ink);
  color: #fff;
  border-bottom-right-radius: 4px;
  align-self: flex-end;
}
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span {
  width: 6px; height: 6px;
  background: #9ca3af;
  border-radius: 999px;
  animation: typingBounce 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .15s; }
.ai-typing span:nth-child(3) { animation-delay: .3s; }

.ai-chips { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }

/* Поле ввода + кнопка отправки (под областью диалога) */
.ai-form { margin-top: 12px; display: flex; align-items: center; gap: 8px; }
.ai-input {
  flex: 1;
  min-width: 0;
  height: 48px;
  padding: 0 14px;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14px;
  color: var(--ink);
  transition: background-color .15s, border-color .15s;
}
.ai-input::placeholder { color: #9ca3af; }
.ai-input:focus {
  outline: none;
  background: #fff;
  border-color: rgba(31,36,46,.2);
}
.ai-send {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border: none;
  cursor: pointer;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  transition: background-color .15s;
}
.ai-send:hover { background: #000; }

/* Скрыть ИИ-ассистента на мобильных */
.bd-hide-mobile { display: none; }
@media (min-width: 1024px) { .bd-hide-mobile { display: block; } }

/* ============ ДРУГИЕ БУМАГИ КОМПАНИИ (full width) ============ */
.other-table {
  width: 100%;
  border-collapse: collapse;
}
.other-table thead { display: none; }
@media (min-width: 768px) {
  .other-table thead { display: table-header-group; }
}
.other-table th {
  text-align: left;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6b7280;
  font-weight: 500;
  padding: 0 16px 14px;
}
.other-table th:last-child { text-align: right; }
/* Mobile: render rows as cards */
.other-table tr {
  display: block;
  background: #f3f4f6;
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 12px;
}
.other-table td {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 6px 0;
  font-size: 15px;
  color: var(--ink);
}
.other-table td::before {
  content: attr(data-label);
  font-size: 13px;
  color: #6b7280;
  font-weight: 400;
}
.other-name { font-weight: 700; }
.other-issuer-sub { font-size: 13px; color: #6b7280; font-weight: 400; }
.other-yield { color: var(--red); font-weight: 700; }
.other-cta {
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-btn);
  background: var(--ink);
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: background-color .15s;
  width: 100%;
}
.other-cta:hover { background: #000; }

@media (min-width: 768px) {
  .other-table tr {
    display: table-row;
    background: transparent;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .other-table tbody tr { border-bottom: 1px solid #f3f4f6; }
  .other-table tbody tr:hover { background: #f3f4f6; }
  .other-table td {
    display: table-cell;
    padding: 18px 16px;
    vertical-align: middle;
  }
  .other-table td::before { display: none; }
  .other-table td:last-child { text-align: right; }
  .other-cta { width: auto; height: 40px; }
}

/* ===== MONIQ — Журнал ===== */
/* Расширяет styles.css. Палитра, кнопки, чипы, карусели-кнопки, шапка и
   футер — из styles.css. Здесь — компоненты страницы журнала:
   заголовок, двухколоночный лейаут со sticky-сайдбаром, карточка-герой,
   карусель новостей, карточки статей, телеграм-баннер, рассылка. */

/* ===== Page title (centered) ===== */
.jr-pagehead {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.jr-pagehead-eyebrow {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
  margin-bottom: 14px;
}
@media (min-width: 768px) { .jr-pagehead-eyebrow { font-size: 13px; } }
.jr-pagehead-title {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-size: clamp(1.875rem, 3vw + 0.7rem, 3rem);
}
.jr-pagehead-lead {
  margin-top: 18px;
  max-width: 64ch;
  font-size: 16px;
  line-height: 1.6;
  color: #4b5563;
  text-wrap: pretty;
}
@media (min-width: 768px) { .jr-pagehead-lead { font-size: 18px; margin-top: 20px; } }

/* ===== Two-column layout ===== */
.jr-layout {
  display: grid;
  grid-template-columns: 1fr;
  gap: 28px;
}
@media (min-width: 1024px) {
  .jr-layout {
    grid-template-columns: minmax(0, 3fr) minmax(0, 1fr);
    gap: 32px;
    align-items: start;
  }
}
.jr-content {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 768px) { .jr-content { gap: 56px; } }

/* Right column — sticky on desktop, hidden on mobile */
.jr-aside { display: none; }
@media (min-width: 1024px) {
  .jr-aside {
    display: block;
    position: sticky;
    top: 24px;
  }
}

/* ===== Sidebar category panel ===== */
.jr-side {
  background: #fff;
  border: 1px solid rgba(31,36,46,.08);
  border-radius: 18px;
  padding: 20px;
}
.jr-side-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 14px;
  margin-bottom: 8px;
  border-bottom: 1px solid rgba(31,36,46,.08);
}
.jr-side-ic {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  color: var(--ink);
  flex-shrink: 0;
}
.jr-side-ic svg { width: 18px; height: 18px; }
.jr-side-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ink);
}
.jr-side-list {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.jr-side-link {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 11px 14px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color .15s, color .15s;
}
.jr-side-link:hover { background: #f3f4f6; }
.jr-side-link.is-active {
  background: #f3f4f6;
  color: var(--ink);
  font-weight: 700;
}
.jr-side-link-ic { width: 20px; height: 20px; flex-shrink: 0; color: var(--ic-clr, #6b7280); transition: color .15s; }
.jr-side-link:hover .jr-side-link-ic,
.jr-side-link.is-active .jr-side-link-ic { color: var(--ink); }

/* ===== Mobile category trigger ===== */
.jr-cat-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid rgba(31,36,46,.08);
  border-radius: 16px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.jr-cat-trigger:hover { background: #fcfcfd; border-color: rgba(31,36,46,.14); }
.jr-cat-trigger-l { display: inline-flex; align-items: center; gap: 12px; }
.jr-cat-trigger-l svg { color: var(--red); }

/* ===== Mobile categories modal links ===== */
.jr-modal-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px;
  border-radius: var(--radius-btn);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  transition: background-color .15s;
}
.jr-modal-link:hover { background: #f3f4f6; }
.jr-modal-link.is-active { background: #f3f4f6; font-weight: 700; }
.jr-modal-link:hover .jr-side-link-ic { color: var(--ink); }

/* ===== Section heads ===== */
.jr-sec { scroll-margin-top: 24px; }
.jr-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}
@media (min-width: 768px) { .jr-sec-head { margin-bottom: 24px; } }
.jr-sec-title {
  font-size: 24px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--ink);
}
@media (min-width: 768px) { .jr-sec-title { font-size: 30px; } }
.jr-sec-nav { display: none; gap: 8px; flex-shrink: 0; }
@media (min-width: 768px) { .jr-sec-nav { display: flex; } }
/* News arrows: desktop carousel only — hidden below ≥lg (mobile = vertical list) */
@media (max-width: 1023px) { #news .jr-sec-nav { display: none; } }
/* Category sections no longer use a mobile carousel — arrows removed entirely */
.jr-sec-nav--cat { display: none; }
.jr-sec-foot {
  margin-top: 22px;
  display: flex;
  justify-content: center;
}

/* Text link with arrow */
.jr-textlink {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
.jr-textlink svg { width: 18px; height: 18px; transition: transform .2s ease; }
.jr-textlink:hover svg { transform: translateX(4px); }
.jr-textlink--sm { font-size: 14px; color: #4b5563; }
.jr-textlink--sm:hover { color: var(--ink); }
.jr-textlink--sm svg { width: 16px; height: 16px; }

/* ===== Feature: popular + latest ===== */
.jr-feat-plate {
  background: #fff;
  border: 1px solid rgba(31,36,46,.08);
  border-radius: 24px;
  overflow: hidden;
}
.jr-feat-grid { display: grid; grid-template-columns: 1fr; }
@media (min-width: 900px) { .jr-feat-grid { grid-template-columns: 1.08fr 0.92fr; } }

.jr-feat-main { position: relative; }
.jr-feat-main-link {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
}
@media (min-width: 768px) { .jr-feat-main-link { padding: 22px; } }
.jr-feat-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 16px;
}
.jr-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #f3f4f6;
}
.jr-feat-main-body {
  padding: 18px 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  flex: 1;
}
@media (min-width: 768px) { .jr-feat-main-body { padding: 22px 4px 6px; } }
.jr-feat-flag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--red);
}
.jr-feat-flag .pulse { width: 7px; height: 7px; border-radius: 999px; background: var(--red); }
.jr-feat-title {
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.14;
  color: var(--ink);
  font-size: clamp(1.4rem, 1.4vw + 0.8rem, 2rem);
  text-wrap: balance;
}
.jr-feat-main-link:hover .jr-feat-title { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.jr-feat-lead {
  color: #4b5563;
  line-height: 1.6;
  font-size: 15px;
  max-width: 52ch;
}
@media (min-width: 768px) { .jr-feat-lead { font-size: 16px; } }
.jr-feat-meta { border-top: none; padding-top: 4px; margin-top: 0; }

/* Latest list — gray inset panel */
.jr-feat-list {
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
  border-radius: 16px;
  padding: 6px 18px;
  margin: 0 16px 16px;
}
@media (min-width: 768px) { .jr-feat-list { margin: 0 22px 22px; } }
@media (min-width: 900px) {
  .jr-feat-list { margin: 22px 22px 22px 0; padding: 8px 20px; }
}
.jr-mini { position: relative; }
.jr-mini-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 4px;
  border-top: 1px solid rgba(31,36,46,.12);
  transition: background-color .15s;
}
.jr-mini:first-of-type .jr-mini-link { border-top: none; }
.jr-mini-tx { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.jr-mini-title {
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jr-mini-link:hover .jr-mini-title { text-decoration: underline; text-underline-offset: 2px; }
.jr-mini-date { font-size: 13px; color: rgba(31,36,46,.6); }

/* ===== News carousel (text cards) ===== */
/* Mobile: vertical stack, full width, no carousel */
.news-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Extra news cards beyond the first 3 — hidden on mobile until «Показать ещё» */
@media (max-width: 1023px) {
  .news-track .news-card--extra { display: none; }
  .news-track.is-expanded .news-card--extra { display: flex; }
}
/* Desktop: 2 rows × 3 columns horizontal carousel (arrows) */
@media (min-width: 1024px) {
  .news-track {
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, 1fr);
    grid-auto-columns: calc((100% - 2 * 16px) / 3);
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .news-track::-webkit-scrollbar { display: none; }
}
.news-card {
  position: relative;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: #fff;
  border: 1px solid rgba(31,36,46,.08);
  border-radius: 16px;
  padding: 18px 20px;
  min-height: 132px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .news-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 30px -18px rgba(31,36,46,.22);
    border-color: rgba(31,36,46,.14);
  }
}
.news-badge {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 9px;
  border-radius: 6px;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.news-title {
  font-size: 16px;
  font-weight: 700;
  line-height: 1.32;
  color: var(--ink);
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.news-title .card-link-stretched { color: inherit; text-decoration: none; outline: none; }
@media (hover: hover) {
  .news-card:hover .card-link-stretched { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
}
.card-link-stretched:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 16px; }
/* Meta row under title: «Важно» left, date right (justify-between). */
.news-meta { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.news-date { font-size: 12px; color: #9ca3af; margin-left: auto; }
.news-card--important {
  background: #fef2f2;
  border-color: rgba(225,29,72,.22);
  border-left: 3px solid var(--red);
}

/* «Показать ещё» — mobile only, solid accent button */
.news-more { display: none; margin-top: 22px; justify-content: center; }
@media (max-width: 1023px) { .news-more { display: flex; } }
.news-more-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  min-width: 200px;
  background: var(--ink);
  color: #fff;
  border: 1px solid var(--ink);
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s;
}
.news-more-btn:hover { background: #000; }

/* ===== Category carousel (3 cards: grid ≥lg, swipe carousel below) ===== */
/* Mobile: vertical stack, full width, no carousel */
.jr-carousel {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
/* Desktop: 3 columns in one row */
@media (min-width: 1024px) {
  .jr-carousel {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
  }
}

/* ===== Article cards (image covers) ===== */
.jr-grid-3 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 640px) { .jr-grid-3 { grid-template-columns: repeat(2, 1fr); gap: 18px; } }
@media (min-width: 1100px) { .jr-grid-3 { grid-template-columns: repeat(3, 1fr); gap: 20px; } }

.art-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid rgba(31,36,46,.08);
  border-radius: 18px;
  overflow: hidden;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
@media (hover: hover) {
  .art-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 36px -20px rgba(31,36,46,.24);
    border-color: rgba(31,36,46,.14);
  }
}
.art-thumb {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}
.art-cover {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  background: #f3f4f6;
}
.art-cat {
  position: absolute;
  z-index: 2;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,.92);
  color: var(--ink);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
  backdrop-filter: blur(4px);
}
.art-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px 20px 20px;
  flex: 1;
}
.art-title {
  font-size: 18px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
  letter-spacing: -0.005em;
  text-wrap: pretty;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-title .card-link-stretched { color: inherit; text-decoration: none; outline: none; }
@media (hover: hover) {
  .art-card:hover .card-link-stretched { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
}
.art-card .card-link-stretched:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 18px; }
.art-lead {
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.art-meta {
  margin-top: auto;
  padding-top: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #9ca3af;
  border-top: 1px solid rgba(31,36,46,.07);
}
.art-meta .dot { width: 3px; height: 3px; border-radius: 999px; background: #cbd0d6; }

/* ===== Telegram banner ===== */
.jr-tg-sec { /* spacing handled by .jr-content gap */ }
.jr-tg {
  position: relative;
  overflow: hidden;
  border-radius: 24px;
  background: linear-gradient(135deg, #2aabee 0%, #229ed9 100%);
  color: #fff;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (min-width: 768px) {
  .jr-tg {
    flex-direction: row;
    align-items: center;
    gap: 28px;
    padding: 32px 40px;
  }
}
.jr-tg-deco {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  width: 220px;
  height: 220px;
  color: rgba(255,255,255,.12);
  pointer-events: none;
}
.jr-tg-deco svg { width: 100%; height: 100%; }
.jr-tg-body { position: relative; z-index: 1; flex: 1; }
.jr-tg-title {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.18;
  text-wrap: balance;
}
@media (min-width: 768px) { .jr-tg-title { font-size: 26px; } }
.jr-tg-sub {
  margin-top: 8px;
  font-size: 15px;
  line-height: 1.5;
  color: rgba(255,255,255,.85);
  max-width: 46ch;
}
.jr-tg-btn {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 50px;
  padding: 0 26px;
  border-radius: var(--radius-btn);
  background: #fff;
  color: #1b8ec2;
  font-size: 15px;
  font-weight: 600;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background-color .15s, transform .1s;
}
.jr-tg-btn:hover { background: #f3f4f6; }
.jr-tg-btn:active { transform: translateY(1px); }
@media (max-width: 767px) { .jr-tg-btn { width: 100%; } }

/* ===== Newsletter ===== */
.jr-news {
  background: var(--ink);
  border-radius: 24px;
  padding: 36px 24px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 768px) { .jr-news { padding: 52px 56px; } }
.jr-news::after {
  content: "";
  position: absolute;
  right: -6%;
  top: -40%;
  width: 42%;
  aspect-ratio: 1;
  border-radius: 999px;
  background: radial-gradient(circle at 30% 30%, rgba(225,29,72,.55), transparent 65%);
  pointer-events: none;
}
.jr-news-inner {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 24px;
  align-items: center;
}
@media (min-width: 900px) { .jr-news-inner { grid-template-columns: 1.1fr 1fr; gap: 40px; } }
.jr-news-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: oklch(72% 0.17 18);
  margin-bottom: 12px;
}
.jr-news-title {
  color: #fff;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  font-size: clamp(1.5rem, 1.6vw + 0.9rem, 2.1rem);
}
.jr-news-sub {
  margin-top: 12px;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  font-size: 15px;
  max-width: 42ch;
}
.jr-news-form { display: flex; flex-direction: column; gap: 12px; }
@media (min-width: 480px) { .jr-news-form { flex-direction: row; } }
.jr-news-input {
  flex: 1;
  height: 52px;
  padding: 0 18px;
  border-radius: var(--radius-btn);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.16);
  color: #fff;
  font: inherit;
  font-size: 15px;
  transition: border-color .15s, background-color .15s;
}
.jr-news-input::placeholder { color: rgba(255,255,255,.5); }
.jr-news-input:focus { outline: none; background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.4); }
.jr-news-btn {
  height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--ink);
  font-weight: 600;
  font-size: 15px;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color .15s, transform .1s;
}
.jr-news-btn:hover { background: #f3f4f6; }
.jr-news-btn:active { transform: translateY(1px); }
.jr-news-note {
  margin-top: 14px;
  font-size: 12px;
  color: rgba(255,255,255,.45);
  line-height: 1.5;
}
.jr-news-note a { color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: 2px; }
.jr-news-note a:hover { color: #fff; }



/* ===== Белая плашка статьи (единая с .jr-feat-plate из journal.css) ===== */
.article-plate {
  background: #fff;
  border: 1px solid rgba(31,36,46,.08);
  border-radius: 24px;
  padding: 24px 16px;
}
@media (min-width: 768px) { .article-plate { padding: 44px 48px; } }
@media (min-width: 1024px) { .article-plate { padding: 56px 64px; } }

/* ===== Узкая центрированная колонка статьи ===== */
.article-shell {
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

/* ===== 4.1 Верхняя строка: категория + «Поделиться» ===== */
.article-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}
.article-cat-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b7280;
  transition: color .15s;
}
.article-cat-link:hover { color: var(--ink); }
.article-cat-link .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--red); }

/* Share button + popover */
.share-wrap { position: relative; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-btn);
  background: #fff;
  border: 1px solid #e5e7eb;
  color: var(--ink);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color .15s, border-color .15s;
}
.share-btn:hover { background: #f3f4f6; border-color: #d1d5db; }
.share-btn svg { width: 18px; height: 18px; }
.share-btn-label { white-space: nowrap; }
@media (max-width: 639px) {
  .share-btn { width: 40px; padding: 0; justify-content: center; }
  .share-btn-label { display: none; }
}

.share-pop {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px;
  background: #fff;
  border: 1px solid rgba(31,36,46,.08);
  border-radius: 14px;
  box-shadow: 0 18px 44px -22px rgba(31,36,46,.34), 0 6px 16px -10px rgba(31,36,46,.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s;
  z-index: 30;
}
/* Невидимый «мостик», чтобы курсор не терял hover между кнопкой и popover */
.share-pop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -10px;
  height: 10px;
}
.share-wrap.is-open .share-pop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.share-link {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  color: var(--ink);
  transition: background-color .15s, color .15s;
}
.share-link:hover { background: var(--ink); color: #fff; }
.share-link svg { width: 19px; height: 19px; }

/* ===== 4.2 Заголовок ===== */
.article-h1 {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.08;
  color: var(--ink);
  font-size: clamp(1.875rem, 2.6vw + 0.9rem, 3rem);
  text-wrap: balance;
}

/* ===== 4.3 Лид ===== */
.article-lead {
  margin-top: 20px;
  font-size: 18px;
  line-height: 1.55;
  color: #4b5563;
  text-wrap: pretty;
}
@media (min-width: 768px) { .article-lead { font-size: 20px; } }

/* ===== 4.4 Метаданные ===== */
.article-byline {
  margin-top: 22px;
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 10px;
  font-size: 13px;
  color: rgba(31,36,46,.6);
  min-width: 0;
}
.article-byline > * { min-width: 0; white-space: nowrap; }
.article-byline .sep { width: 3px; height: 3px; border-radius: 999px; background: #cbd0d6; flex-shrink: 0; }
.article-byline .byline-author { font-weight: 600; color: rgba(31,36,46,.72); overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 374px) {
  .article-byline { gap: 7px; font-size: 12px; }
}

/* ===== 4.5 Обложка ===== */
.article-figure {
  margin-top: 28px;
}
@media (min-width: 768px) { .article-figure { margin-top: 32px; } }
.article-cover {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  object-position: center;
  background: #f3f4f6;
  border-radius: 18px;
}
.article-figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #9ca3af;
  text-wrap: pretty;
}

/* ===== 4.6 Тело статьи ===== */
.article-body {
  margin-top: 32px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.75;
}
@media (min-width: 768px) { .article-body { margin-top: 40px; font-size: 18px; } }

.article-body > * + * { margin-top: 1.25em; }

.article-body p { text-wrap: pretty; }

.article-body h2 {
  margin-top: 1.8em;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.22;
  color: var(--ink);
}
@media (min-width: 768px) { .article-body h2 { font-size: 30px; } }
.article-body h3 {
  margin-top: 1.5em;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--ink);
}
@media (min-width: 768px) { .article-body h3 { font-size: 22px; } }

.article-body a {
  color: var(--red);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color .15s;
}
.article-body a:hover { color: #b3123a; }
.article-body .issuer-row,
.article-body .issuer-row:hover { color: inherit; text-decoration: none; }

.article-body ul,
.article-body ol {
  padding-left: 1.4em;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li { padding-left: 6px; }
.article-body li::marker { color: var(--red); }
.article-body ol li::marker { color: #9ca3af; font-weight: 700; }

.article-body blockquote {
  margin-top: 1.6em;
  margin-bottom: 1.6em;
  padding: 4px 0 4px 22px;
  border-left: 3px solid var(--red);
  font-size: 20px;
  line-height: 1.5;
  font-style: italic;
  color: var(--ink);
  text-wrap: pretty;
}
@media (min-width: 768px) { .article-body blockquote { font-size: 22px; padding-left: 26px; } }
.article-body blockquote cite {
  display: block;
  margin-top: 10px;
  font-size: 14px;
  font-style: normal;
  font-weight: 600;
  color: #6b7280;
}

.article-body figure { margin-top: 1.8em; margin-bottom: 1.8em; }
.article-body figure img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 16px;
  background: #f3f4f6;
}
.article-body figcaption {
  margin-top: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: #9ca3af;
}

/* Выделенный info-блок */
.article-callout {
  margin-top: 1.8em;
  margin-bottom: 1.8em;
  display: flex;
  gap: 14px;
  padding: 20px 22px;
  background: #f3f4f6;
  border-radius: 16px;
  font-size: 16px;
  line-height: 1.6;
}
@media (min-width: 768px) { .article-callout { font-size: 17px; padding: 24px 26px; } }
.article-callout-ic {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: var(--radius-btn);
  background: #fff;
  color: var(--red);
}
.article-callout-ic svg { width: 20px; height: 20px; }

/* ===== MONIQ — Адаптивная таблица в статье ===== */
/* Редактор вставляет ТОЛЬКО чистую вёрстку: <table><thead>…</thead><tbody>…</tbody></table>.
   Ни классов, ни обёрток, ни data-* писать не нужно.
   Desktop: обычная таблица, вписанная в ширину статьи (table-layout:fixed — колонки
   не выходят за пределы контента, длинный текст переносится).
   Mobile (<768px): каждая строка превращается в карточку; подпись к значению берётся
   из data-label, который проставляется автоматически из шапки (article.js). */
.article-body table {
  width: 100%;
  max-width: 100%;
  table-layout: fixed;
  margin-top: 1.8em;
  margin-bottom: 1.8em;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  border-collapse: separate; /* separate — чтобы внешняя рамка таблицы была видна */
  border-spacing: 0;
  overflow: hidden; /* скругление углов у крайних ячеек */
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
}
.article-body table thead th,
.article-body table tbody td {
  padding: 14px 18px;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid #eceef1;
  word-wrap: break-word;
  overflow-wrap: break-word;
}
.article-body table thead th {
  background: #f3f4f6;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .01em;
  color: #4b5563;
  vertical-align: middle;
  border-bottom: 1px solid #e5e7eb;
}
.article-body table tbody td { padding: 16px 18px; }
.article-body table tbody tr:last-child td { border-bottom: 0; }
.article-body table tbody tr:hover td { background: #fafafb; }
.article-body table td strong { font-weight: 700; color: var(--ink); }

/* Mobile: строки → карточки, значения с подписями (data-label из шапки). */
@media (max-width: 767px) {
  .article-body table {
    display: block;
    border: 0;
    border-radius: 0;
    overflow: visible;
    table-layout: auto;
  }
  .article-body table thead { display: none; }
  .article-body table tbody,
  .article-body table tr,
  .article-body table td { display: block; width: 100%; }
  .article-body table tr {
    background: #f3f4f6;
    border-radius: 16px;
    padding: 6px 4px;
    margin-bottom: 14px;
  }
  .article-body table tr:last-child { margin-bottom: 0; }
  .article-body table td {
    padding: 10px 16px;
    border-bottom: 1px solid #e5e7eb;
  }
  .article-body table tr td:last-child { border-bottom: 0; }
  .article-body table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .01em;
    color: #6b7280;
    margin-bottom: 3px;
  }
  /* Первая ячейка строки — заголовок карточки, без подписи */
  .article-body table td:first-child {
    font-size: 17px;
  }
  .article-body table td:first-child::before { display: none; }
}
.article-callout-body > * + * { margin-top: 8px; }
.article-callout-title { font-weight: 700; color: var(--ink); }
.article-callout p { color: #4b5563; }

/* Telegram-баннер под белой плашкой — самостоятельный акцентный блок,
   наследует .jr-tg из journal.css */
.article-tg { margin-top: 24px; }
@media (min-width: 768px) { .article-tg { margin-top: 32px; } }

/* Источник новости */
.article-source {
  margin-top: 28px;
  padding-top: 16px;
  border-top: 1px solid #e5e7eb;
  font-size: 13px;
  color: #9ca3af;
}
.article-source a {
  color: var(--red);
  text-decoration: none;
  word-break: break-all;
}
.article-source a:hover { text-decoration: underline; }

/* ===== Infinite-scroll sentinel ===== */
#jr-next-sentinel {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 1px;
}
#jr-next-sentinel.is-loading {
  min-height: 56px;
}
#jr-next-sentinel.is-loading::after {
  content: '';
  width: 28px;
  height: 28px;
  border: 3px solid rgba(31,36,46,.12);
  border-top-color: var(--red, #e0143c);
  border-radius: 50%;
  animation: jr-spin .7s linear infinite;
}
@keyframes jr-spin { to { transform: rotate(360deg); } }




/* ===== HEADER: "Журнал" dropdown (mega-menu) ===== */
.nav-dd { position: relative; }
.nav-dd-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.nav-dd-chev {
  width: 15px;
  height: 15px;
  transition: transform .2s ease;
}
.nav-dd.is-open .nav-dd-chev { transform: rotate(180deg); }

.nav-mega {
  /* Горизонтальный сдвиг от центра триггера; пересчитывается в JS
     (initMegaDropdown → positionMega), чтобы меню не вылезало за
     границы окна у крайних пунктов навигации. По умолчанию 0 — меню
     остаётся отцентрированным, как раньше. */
  --shift: 0px;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(calc(-50% + var(--shift))) translateY(8px);
  max-width: calc(100vw - 32px);
  background: #fff;
  border: 1px solid rgba(31,36,46,.08);
  border-radius: 16px;
  box-shadow: 0 24px 60px -24px rgba(31,36,46,.32), 0 8px 20px -12px rgba(31,36,46,.16);
  padding: 14px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 40;
  width: 680px;
}
/* Невидимый «мостик» между триггером и меню, чтобы курсор не терял hover. */
.nav-mega::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -14px;
  height: 14px;
}
.nav-dd.is-open .nav-mega {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(calc(-50% + var(--shift))) translateY(0);
}
/* Универсальная раскладка мега-меню: узкая колонка триггеров + широкая колонка содержимого */
.nav-mega-2col {
  display: grid;
  grid-template-columns: 150px minmax(0, 1fr);
  gap: 14px;
}
.nav-mega-cats {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding-right: 12px;
  border-right: 1px solid rgba(31,36,46,.08);
}
.nav-mega-cat {
  text-align: left;
  padding: 11px 14px;
  border-radius: var(--radius-btn);
  font-size: 15px;
  font-weight: 400;
  color: var(--ink);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: background-color .15s;
}
.nav-mega-cat:hover { background: #f3f4f6; }
.nav-mega-cat.is-active { background: #f3f4f6; font-weight: 700; }

.nav-mega-mid { min-width: 0; }
.nav-mega-panel { display: none; flex-direction: column; gap: 2px; }
.nav-mega-panel.is-active { display: flex; }
.nav-mega-panel-all {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 8px 12px;
  margin-bottom: 2px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: background-color .15s;
}
.nav-mega-panel-all:hover { background: #f3f4f6; }
.nav-mega-panel-all svg { width: 16px; height: 16px; transition: transform .2s ease; }
.nav-mega-panel-all:hover svg { transform: translate(3px, -3px); }
.nav-mega-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.nav-mega-link {
  display: inline-flex;
  align-items: flex-start;
  gap: 9px;
  padding: 9px 12px;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 500;
  line-height: 1.35;
  color: #4b5563;
  transition: background-color .15s, color .15s;
}
.nav-mega-link:hover { background: #f3f4f6; color: var(--ink); }
.nav-mega-arr { width: 15px; height: 15px; margin-top: 2px; color: #9ca3af; flex-shrink: 0; transition: color .15s, transform .2s ease; }
.nav-mega-link:hover .nav-mega-arr { color: var(--ink); transform: translate(2px, -2px); }

.nav-mega-badge {
  display: inline-flex;
  align-items: center;
  height: 18px;
  padding: 0 7px;
  border-radius: 5px;
  background: var(--red);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

/* ===== HEADER: "Инвестиции" dropdown — группы фильтров (Bonds/Stocks) ===== */
.nav-mega--wide { width: 760px; }
.nav-mega-filters {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 24px;
  margin-top: 6px;
}
.nav-mega-fgroup { min-width: 0; }
.nav-mega-fgroup-title {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: #9ca3af;
  margin: 0 0 8px;
  padding: 0 4px;
}
.nav-mega-fgroup-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.nav-mega-fgroup-links--scroll {
  max-height: 132px;
  overflow-y: auto;
  padding-right: 2px;
}
.nav-mega-flink {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  white-space: nowrap;
  transition: background-color .15s, color .15s;
}
.nav-mega-flink:hover { background: var(--ink); color: #fff; }


/* ===== MOBILE menu: "Журнал" accordion ===== */
.mobile-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.mobile-acc-chev { width: 18px; height: 18px; transition: transform .25s ease; color: #6b7280; }
.mobile-acc.is-open .mobile-acc-chev { transform: rotate(180deg); }
.mobile-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.mobile-acc-panel > .mobile-acc-inner { overflow: hidden; }
.mobile-acc.is-open .mobile-acc-panel { grid-template-rows: 1fr; }
.mobile-acc-inner {
  display: flex;
  flex-direction: column;
  padding-left: 6px;
}
.mobile-sub-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 500;
  color: #4b5563;
  border-left: 2px solid #e5e7eb;
  transition: color .15s, border-color .15s, background-color .15s;
}
.mobile-sub-link:hover { color: var(--ink); border-color: var(--ink); background: #f3f4f6; border-radius: 0 8px 8px 0; }
.mobile-sub-link--lead { font-weight: 700; color: var(--ink); }

/* Level-2 accordion (Статьи / Новости / Другое) */
.mobile-sub-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 11px 12px;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  border-left: 2px solid #e5e7eb;
  cursor: pointer;
}
.mobile-acc2-chev { width: 16px; height: 16px; color: #9ca3af; transition: transform .25s ease; }
.mobile-acc2.is-open .mobile-acc2-chev { transform: rotate(180deg); }
.mobile-acc2.is-open .mobile-sub-trigger { color: var(--ink); border-color: var(--ink); }
.mobile-acc2-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s ease;
}
.mobile-acc2-panel > .mobile-acc2-inner { overflow: hidden; }
.mobile-acc2.is-open .mobile-acc2-panel { grid-template-rows: 1fr; }
.mobile-acc2-inner { display: flex; flex-direction: column; padding-left: 12px; }
.mobile-sub2-link {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 500;
  color: #4b5563;
  border-left: 2px solid #eef0f2;
  transition: color .15s, border-color .15s, background-color .15s;
}
.mobile-sub2-link:hover { color: var(--ink); border-color: var(--ink); background: #f3f4f6; border-radius: 0 8px 8px 0; }

/* Level-3 accordion (группы фильтров: Доходность / Срок / Тип / Отрасль) */
.mobile-fgroup-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  background: transparent;
  border: none;
  border-left: 2px solid #eef0f2;
  cursor: pointer;
}
.mobile-acc3-chev { width: 15px; height: 15px; color: #9ca3af; transition: transform .25s ease; }
.mobile-acc3.is-open .mobile-acc3-chev { transform: rotate(180deg); }


/* ===== MONIQ — Инвестиции (хаб-страница) ===== */
/* Дополняет styles.css. Палитра, кнопки, радиусы, типографика, шапка, футер,
   .page-head, .section-blend, .stock-card, .bond-card, .journal-card,
   .faq-item, .card-link-stretched, .chip — переиспользуются из styles.css.
   Здесь — только компоненты, специфичные для хаба: карточки-направления
   (Акции/Облигации) и шаги «Как начать» (перенесены сюда из home.css,
   т.к. этот блок общий и для хаба, и для главной страницы). */

/* ---------- Big CTA band (тёмная), перенесено из home.css ----------
   Используется на index.html и invest.html; при переводе home.css на
   общий styles.css эти правила отсюда переиспользуются, не дублируются. */
.cta-band {
  position: relative;
  background: var(--ink);
  border-radius: 28px;
  overflow: hidden;
  isolation: isolate;
}
@media (min-width: 768px) { .cta-band { border-radius: 36px; } }
.cta-band-deco { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cta-shape {
  position: absolute;
  border-radius: 999px;
}
.cta-shape--1 {
  width: 420px; height: 420px;
  right: -120px; top: -160px;
  background: radial-gradient(circle, oklch(55% 0.20 16 / .55), transparent 68%);
}
.cta-shape--2 {
  width: 300px; height: 300px;
  left: -100px; bottom: -150px;
  background: radial-gradient(circle, oklch(55% 0.20 16 / .35), transparent 70%);
}
.cta-ring {
  position: absolute;
  border: 1.5px solid rgba(225,29,72,.45);
  border-radius: 999px;
}
.cta-ring--1 { width: 220px; height: 220px; right: 8%; top: 18%; }
.cta-ring--2 { width: 130px; height: 130px; right: 4%; bottom: 8%; border-color: rgba(255,255,255,.12); }
.cta-stripes {
  position: absolute;
  inset: 0;
  background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.04) 0 2px, transparent 2px 20px);
}
.cta-band-inner { position: relative; z-index: 1; }
.cta-band-title {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1.04;
  color: #fff;
  font-size: clamp(2rem, 4.5vw + 0.5rem, 3.5rem);
  text-wrap: balance;
}
.cta-band-lead {
  color: rgba(255,255,255,.72);
  font-size: clamp(1rem, 0.6vw + 0.9rem, 1.25rem);
  line-height: 1.55;
}
.cta-invert {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 58px;
  padding: 0 34px;
  background: #fff;
  color: var(--ink);
  border-radius: var(--radius-btn);
  font-size: 17px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, background-color .15s;
  box-shadow: 0 12px 30px -12px rgba(0,0,0,.5);
}
.cta-invert:hover {
  transform: translateY(-1px);
  background: #f3f4f6;
  box-shadow: 0 18px 38px -14px rgba(0,0,0,.55);
}
.cta-invert .arrow { transition: transform .2s ease; }
.cta-invert:hover .arrow { transform: translateX(3px); }
@media (min-width: 768px) { .cta-invert { height: 62px; padding: 0 40px; font-size: 18px; } }
.cta-band-login {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,.85);
  font-size: 15px;
  font-weight: 500;
  transition: color .15s;
}
.cta-band-login:hover { color: #fff; }

/* ---------- Карточки-направления (Акции / Облигации) ---------- */
.dir-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 768px) { .dir-card { padding: 36px 40px; border-radius: 24px; } }
@media (hover: hover) {
  .dir-card:hover { box-shadow: 0 12px 32px rgba(31,36,46,.08); transform: translateY(-2px); }
}
.dir-icon {
  width: 52px; height: 52px; border-radius: 14px;
  display: grid; place-items: center;
  background: #f3f4f6; color: var(--ink);
  margin-bottom: 20px;
}
.dir-card--bonds .dir-icon { background: rgba(225,29,72,.08); color: var(--red); }
.dir-title { font-size: 24px; font-weight: 900; letter-spacing: -0.01em; color: var(--ink); }
@media (min-width: 768px) { .dir-title { font-size: 28px; } }
.dir-title .card-link-stretched:focus-visible::after { outline: 2px solid var(--ink); outline-offset: -2px; border-radius: 20px; }
.dir-desc { margin-top: 10px; font-size: 15px; line-height: 1.6; color: #6b7280; }
.dir-stats { margin-top: 22px; display: flex; gap: 28px; }
.dir-stats .v { display: block; font-size: 20px; font-weight: 800; color: var(--ink); }
.dir-stats .v.accent { color: var(--red); }
.dir-stats .k { margin-top: 2px; font-size: 12px; color: #9ca3af; }
.dir-cta { margin-top: auto; padding-top: 24px; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 600; color: var(--ink); }
.dir-cta svg { transition: transform .2s ease; }
@media (hover: hover) { .dir-card:hover .dir-cta svg { transform: translateX(4px); } }

/* ---------- Шаги «Как начать» ---------- */
.step-card {
  position: relative;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 18px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
}
.step-num { display: inline-flex; align-items: baseline; gap: 2px; font-size: 40px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--ink); }
.step-num .d { color: var(--red); }
.step-icon { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: #f3f4f6; color: var(--ink); }
.step-title { font-size: 16px; font-weight: 700; color: var(--ink); }
.step-desc { font-size: 14px; line-height: 1.55; color: #6b7280; text-wrap: pretty; }

/* ---------- Мобильная адаптация: скрыть декоративные иконки ----------
   Идёт ПОСЛЕ базовых правил .dir-icon/.step-icon (та же специфичность),
   чтобы display:none гарантированно применялся на мобильных. */
@media (max-width: 767px) {
  .dir-icon,
  .step-icon { display: none; }
}

.mobile-acc3.is-open .mobile-fgroup-trigger { color: var(--ink); border-color: var(--ink); }
/* max-height (не grid-template-rows: 0fr) — контент этого уровня это
   flex-wrap чипы, а не однострочные ссылки, поэтому у некоторых движков
   их вклад в авто-минимум трека не зануляется даже при overflow:hidden
   на прямом grid-item потомке, и часть фона чипов остаётся видна поверх
   свёрнутой панели. max-height:0 + overflow:hidden однозначно обнуляет
   высоту независимо от этой особенности. */
.mobile-acc3-panel {
  max-height: 0;
  overflow: hidden;
  transition: max-height .28s ease;
}
.mobile-acc3.is-open .mobile-acc3-panel { max-height: 400px; }
.mobile-acc3-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 12px 8px 20px;
}
.mobile-fgroup-link {
  display: inline-flex;
  align-items: center;
  padding: 6px 11px;
  border-radius: 999px;
  background: #f3f4f6;
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
  transition: background-color .15s, color .15s;
}
.mobile-fgroup-link:hover { background: var(--ink); color: #fff; }

/* ===== No-motion preference ===== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
  html { scroll-behavior: auto; }
}





/* ===== HERO illustration — Stocks variant =====
   Та же красная плашка с растворяющимися краями, что и на bonds.html,
   но вместо фигуры инвестора — абстрактный график со свечами и трендовой
   линией. Так раздел «Акции» считывается визуально иначе, чем «Облигации». */
.hero-illustration--stocks {
  background:
    radial-gradient(circle at 80% 20%, oklch(75% 0.14 22 / .6), transparent 56%),
    radial-gradient(circle at 18% 86%, oklch(55% 0.20 16 / .9), transparent 60%),
    linear-gradient(135deg, #ef2152 0%, #e11d48 55%, #a50f37 100%);
}
.hi-trend {
  position: absolute;
  inset: 16% 8% 24% 9%;
  width: auto;
  height: auto;
  z-index: 1;
}
.hi-trend polyline {
  fill: none;
  stroke: rgba(255, 255, 255, .92);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.hi-candle {
  position: absolute;
  bottom: 20%;
  width: 4.5%;
  border-radius: 2px;
  z-index: 2;
}
.hi-candle::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -22%;
  transform: translateX(-50%);
  width: 2px;
  height: 144%;
  background: inherit;
  border-radius: 2px;
  opacity: .55;
}
.hi-candle--1 { left: 16%; height: 18%; background: rgba(255,255,255,.5); }
.hi-candle--2 { left: 30%; height: 30%; background: #1f242e; }
.hi-candle--3 { left: 44%; height: 24%; background: rgba(255,255,255,.72); }
.hi-candle--4 { left: 58%; height: 40%; background: #fff; }
.hi-candle--5 { left: 72%; height: 34%; background: #1f242e; }
.hi-candle--6 { left: 84%; height: 54%; background: #fff; }
.hi-dot {
  position: absolute;
  right: 9%;
  top: 15%;
  width: 3.4%;
  aspect-ratio: 1;
  background: #fff;
  border-radius: 999px;
  box-shadow: 0 0 0 4px rgba(255,255,255,.22);
  z-index: 3;
}

/* ===== Stock card =====
   Та же плашка, что у .bond-card (фон #f3f4f6, радиус 20px, отступы, hover,
   кнопка .stock-cta = .bond-cta), но другой набор и расположение данных:
   цена + дневное изменение с цветом, дивиденды, капитализация, спарклайн. */
.stock-card {
  background: #f3f4f6;
  border-radius: 20px;
  padding: 22px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.stock-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -16px rgba(31,36,46,.18);
}
@media (min-width: 768px) { .stock-card { padding: 26px; } }

.stock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 18px 26px;
}

/* --- Identity: логотип + тикер + название + бейджи --- */
.stock-id {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 16px;
}
@media (min-width: 1024px) { .stock-id { flex: 1.2 1 0; } }
.stock-id-text { min-width: 0; }
.stock-ticker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.stock-ticker {
  font-size: 20px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ink);
}
.stock-name {
  font-size: 14px;
  color: #6b7280;
  margin-top: 6px;
  line-height: 1.3;
}
.stock-industry {
  display: inline-block;
  font-size: 12px;
  color: #6b7280;
  margin-top: 8px;
}

/* Бейдж типа акции — форма и цвета отличаются от .bond-rating, чтобы
   пользователь не путал «Обыкновенная/Привилегированная» с рейтингом облигаций. */
.stock-type {
  display: inline-flex;
  align-items: center;
  height: 24px;
  padding: 0 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  flex-shrink: 0;
}
.stock-type--ordinary {
  background: #fff;
  color: var(--ink);
  border: 1px solid #e5e7eb;
}
.stock-type--preferred {
  background: oklch(95% 0.03 16);
  color: var(--red);
  border: 1px solid oklch(86% 0.07 16);
}

/* --- Метрики: Цена, Дивиденды, Капитализация, Объём за день ---
   Единая структура каждого блока: подпись (строка 1) → значение (строка 2),
   у «Цены» добавляется дневное изменение (строка 3). align-content: start
   держит подписи всех метрик на одной горизонтальной линии, значения — на
   следующей. Блок «Цены» просто продолжается ниже одной строкой. */
.stock-metrics {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px 18px;
}
.stock-metric {
  display: grid;
  align-content: start;
  row-gap: 4px;
  min-width: 0;
}
.stock-metric-k {
  font-size: 13px;
  color: #6b7280;
}
.stock-metric-v {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
}
@media (min-width: 1024px) { .stock-metric-v { font-size: 20px; } }
/* Цена — главный визуальный маркер, крупнее остальных значений */
.stock-price {
  font-size: 22px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1.1;
  white-space: nowrap;
}
@media (min-width: 1024px) { .stock-price { font-size: 24px; } }
.stock-price .cur {
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  margin-left: 5px;
}
.stock-change {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
  font-size: 14px;
  font-weight: 600;
}
.stock-change .arr { font-size: 11px; line-height: 1; }
.stock-change--up { color: #10b981; }
.stock-change--down { color: var(--red); }
.stock-change--flat { color: var(--ink); }

/* --- Кнопка «Подробнее» --- */
.stock-aside {
  flex: 1 1 100%;
  display: flex;
}
.stock-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  width: 100%;
  height: 44px;
  padding: 0 20px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 500;
  transition: background-color .15s;
  border: none;
  cursor: pointer;
}
.stock-cta:hover { background: #000; }

/* На очень узких экранах — метрики в один столбец */
@media (max-width: 360px) {
  .stock-metrics { grid-template-columns: 1fr; }
}

/* Планшет: информация сверху, метрики строкой (4 колонки), кнопка справа */
@media (min-width: 640px) {
  .stock-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px 26px; }
  .stock-aside { flex: 0 0 auto; margin-left: auto; align-items: center; }
  .stock-cta { width: auto; }
}

/* Десктоп: всё в одну горизонтальную линию */
@media (min-width: 1024px) {
  .stock-row { flex-wrap: nowrap; gap: 30px; }
  .stock-metrics {
    flex: 2.4 1 0;
    display: flex;
    justify-content: space-between;
    gap: 26px;
  }
  .stock-metric { flex: 1 1 0; }
  .stock-aside { flex: 0 0 auto; align-self: flex-start; }
}

/* ===== Карточка акции (stock.html) — дополнения к bd-* из bond.css ===== */

/* Цветной акцент роста/падения в сетке ключевых показателей */
.bd-param .v.up { color: #10b981; }
.bd-param .v.down { color: var(--red); }

/* Featured-блок: крупная текущая цена + дневное изменение — общий для
   страницы акции и страницы облигации (Stocks/view.php, Bonds/view.php),
   как и market_widget/stock_card/bond_card; раньше назывался .stk-hero
   (был только у акций), переименован при переносе на облигации. */
.bd-hero {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  margin-top: 16px;
}
.bd-hero-label {
  font-size: 13px;
  color: #6b7280;
}
.bd-hero-price {
  font-size: clamp(2rem, 3vw + 1rem, 2.75rem);
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
}
.bd-hero-price .cur {
  font-size: 0.46em;
  font-weight: 500;
  color: #6b7280;
  margin-left: 8px;
  letter-spacing: 0;
}
.bd-hero-change {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 16px;
  font-weight: 700;
}
.bd-hero-change .arr { font-size: 12px; line-height: 1; }
.bd-hero-change--up { color: #10b981; }
.bd-hero-change--down { color: var(--red); }
.bd-hero-change--flat { color: var(--ink); }
.bd-hero-sub { font-size: 13px; color: #9ca3af; }

/* bond-card: изменение цены в компактной плитке .bond-metric (не hero) —
   мельче, чем .bd-hero-change, вписывается в высоту строки грида. */
.bond-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 700;
  margin-top: 2px;
}
.bond-change .arr { font-size: 10px; line-height: 1; }
.bond-change--up { color: #10b981; }
.bond-change--down { color: var(--red); }
.bond-change--flat { color: var(--ink); }

/* ============ ГРАФИК ДИВИДЕНДНЫХ ВЫПЛАТ (столбчатая диаграмма) ============ */
.divchart { margin-top: 20px; }
.divchart-bars {
  display: flex;
  align-items: stretch;
  gap: 8px;
  height: 200px;
}
@media (min-width: 768px) { .divchart-bars { gap: 14px; height: 230px; } }
.divchart-col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.divchart-val {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
@media (min-width: 768px) { .divchart-val { font-size: 13px; } }
.divchart-track {
  flex: 1;
  width: 100%;
  max-width: 56px;
  display: flex;
  align-items: flex-end;
}
.divchart-fill {
  width: 100%;
  min-height: 4px;
  border-radius: 8px 8px 0 0;
  background: #cbd0d6;
  transition: background-color .15s;
}
.divchart-col:hover .divchart-fill { background: #46505f; }
.divchart-fill--accent { background: var(--ink); }
.divchart-col:hover .divchart-fill--accent { background: var(--red); }
.divchart-year {
  font-size: 12px;
  color: #6b7280;
}
@media (min-width: 768px) { .divchart-year { font-size: 13px; } }

/* Цветной акцент роста/падения в строке «Другие бумаги эмитента» */
.issuer-val--up { color: #10b981; font-weight: 700; }
.issuer-val--down { color: var(--red); font-weight: 700; }

/* Вторая строка результата в калькуляторе «Открыть аккаунт» */
.acct-result + .acct-result {
  margin-top: 10px;
  padding-top: 10px;
}
.acct-result .v.small { font-size: 18px; }




/* ===== Centered page title (как на journal.html) ===== */
.page-head {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.page-head-title {
  font-weight: 900;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--ink);
  font-size: clamp(1.875rem, 3vw + 0.7rem, 3rem);
}
.page-head-lead {
  margin-top: 18px;
  max-width: 64ch;
  margin-left: auto;
  margin-right: auto;
  font-size: 16px;
  line-height: 1.6;
  color: #4b5563;
  text-wrap: pretty;
}
@media (min-width: 768px) { .page-head-lead { font-size: 18px; margin-top: 20px; } }



/* ===== Таблица истории дивидендов (.dividend-table) =====
   Расширяет .coupon-table (bond.css). Scoped модификатором, чтобы
   не затрагивать таблицу купонов на bond.html. */

/* Десктоп/планшет (≥768px): фиксированные ширины 4 колонок,
   суммы «На акцию» по правому краю, «Доходность» ближе к центру. */
@media (min-width: 768px) {
  .dividend-table table { table-layout: fixed; }
  .dividend-table th:nth-child(1),
  .dividend-table td:nth-child(1) { width: 30%; }
  .dividend-table th:nth-child(2),
  .dividend-table td:nth-child(2) {
    width: 22%;
    text-align: right;
    padding-right: 28px;
  }
  .dividend-table th:nth-child(3),
  .dividend-table td:nth-child(3) {
    width: 22%;
    text-align: left;
  }
  .dividend-table th:nth-child(4),
  .dividend-table td:nth-child(4) { width: 26%; }
}

/* Мобильная (<768px): каждую строку в двухстрочную карточку.
   1-я строка: дата слева, сумма справа (крупнее, акцентно, без переноса).
   2-я строка: доходность слева (мелко, приглушённо), тип справа. */
@media (max-width: 767px) {
  .dividend-table thead { display: none; }
  .dividend-table table,
  .dividend-table tbody,
  .dividend-table tr { display: block; }
  /* Двойной класс .coupon-table.dividend-table поднимает специфичность выше
     базовых правил bond.css (.coupon-table td { padding/border }), которые
     грузятся позже и иначе рисовали бы линию и большой отступ ВНУТРИ выплаты. */
  .coupon-table.dividend-table tr {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: baseline;
    column-gap: 14px;
    row-gap: 6px;              /* компактный зазор между строками одной выплаты */
    padding: 16px 0;          /* отступ между выплатами (заметно больше row-gap) */
    border-bottom: 1px solid #f3f4f6;  /* разделитель ТОЛЬКО между выплатами */
  }
  .coupon-table.dividend-table tr:last-child { border-bottom: none; }
  .coupon-table.dividend-table td {
    padding: 0;               /* убираем построчные отступы bond.css */
    border-bottom: none;      /* убираем линию между строками внутри выплаты */
  }
  .dividend-table td.coupon-date {
    grid-column: 1;
    grid-row: 1;
    font-size: 14px;
    color: #6b7280;
    font-weight: 500;
  }
  .dividend-table td.coupon-amount {
    grid-column: 2;
    grid-row: 1;
    text-align: right;
    font-size: 17px;
    font-weight: 700;
    white-space: nowrap;
  }
  .dividend-table td.dividend-yield {
    grid-column: 1;
    grid-row: 2;
    font-size: 13px;
    color: #9ca3af;
  }
  .dividend-table td.dividend-yield::before {
    content: "доходность ";
  }
  .dividend-table td:last-child {
    grid-column: 2;
    grid-row: 2;
    text-align: right;
  }
}


/* ===== MONIQ — Брокеры (brokers.html / broker.html) ===== */
/* Специфичные компоненты справочника брокеров: hero-иллюстрация (brokers-
   вариант), дополнения к мега-меню «Справочник», карточка брокера. Общие
   токены, кнопки, чипы, шапка и футер переиспользуются выше по файлу. */

/* ===== HERO illustration — Brokers variant =====
   Та же красная плашка с растворяющимися краями, что и на bonds.html / stocks.html,
   но вместо фигуры инвестора или графика — абстрактная композиция «договор /
   документы / подпись». Так раздел «Брокеры» считывается визуально как отдельный. */
.hero-illustration--brokers {
  background:
    radial-gradient(circle at 20% 22%, oklch(75% 0.14 22 / .55), transparent 56%),
    radial-gradient(circle at 86% 82%, oklch(55% 0.20 16 / .9), transparent 60%),
    linear-gradient(135deg, #ef2152 0%, #e11d48 55%, #a50f37 100%);
}
.hi-doc {
  position: absolute;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 18px 40px -20px rgba(31,36,46,.55);
  z-index: 1;
}
.hi-doc--back {
  width: 33%;
  height: 62%;
  left: 16%;
  top: 16%;
  transform: rotate(-9deg);
  background: rgba(255,255,255,.7);
}
.hi-doc--front {
  width: 37%;
  height: 66%;
  left: 39%;
  top: 20%;
  z-index: 2;
  transform: rotate(5deg);
}
.hi-line {
  position: absolute;
  border-radius: 999px;
  background: #e5e7eb;
}
.hi-line--1 { top: 15%; left: 12%; width: 62%; height: 7%; background: #1f242e; }
.hi-line--2 { top: 33%; left: 12%; width: 76%; height: 5.5%; }
.hi-line--3 { top: 46%; left: 12%; width: 56%; height: 5.5%; }
.hi-sign {
  position: absolute;
  left: 12%;
  bottom: 16%;
  width: 50%;
  height: 0;
  border-bottom: 3px solid #e11d48;
}
.hi-sign::before {
  content: "";
  position: absolute;
  left: 2%;
  bottom: 0;
  width: 34%;
  height: 130%;
  border: 3px solid #1f242e;
  border-top-color: transparent;
  border-left-color: transparent;
  border-radius: 0 60% 0 0;
  transform: rotate(-8deg);
}
.hi-pen {
  position: absolute;
  right: 11%;
  top: 22%;
  width: 4.2%;
  height: 44%;
  background: linear-gradient(180deg, #1f242e 0 68%, #f9fafb 68% 82%, #e11d48 82% 100%);
  border-radius: 3px;
  transform: rotate(33deg);
  box-shadow: 0 12px 22px -10px rgba(31,36,46,.6);
  z-index: 3;
}
.hi-stamp {
  position: absolute;
  right: 17%;
  bottom: 15%;
  width: 13%;
  aspect-ratio: 1;
  border-radius: 999px;
  border: 3px solid rgba(255,255,255,.9);
  background: rgba(31,36,46,.32);
  z-index: 3;
}
.hi-stamp::after {
  content: "";
  position: absolute;
  inset: 24%;
  border-radius: 999px;
  border: 2px solid rgba(255,255,255,.72);
}

/* ===== Справочник: дополнения к универсальному мега-меню ===== */
/* Популярные брокеры — компактная сетка ссылок в две колонки */
.nav-mega-links--grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px 8px;
}
/* Раздел-заглушка справочника (Эмитенты, Биржи и т.д.) */
.nav-mega-soon {
  padding: 10px 12px;
  font-size: 13px;
  line-height: 1.45;
  color: #9ca3af;
}
/* Ведущая ссылка раздела в мобильном двухуровневом аккордеоне */
.mobile-sub2-link--lead { font-weight: 700; color: var(--ink); }

/* ===== Broker card (brokers.html) =====
   Та же плашка #f3f4f6 и радиус, что у .bond-card / .stock-card, но набор
   данных — статистика андеррайтинга (выпуски, объём размещений), без цен
   и дневной динамики. Раскладка — горизонтальная строка как у карточек акций. */
.broker-card {
  background: #f3f4f6;
  border-radius: 20px;
  padding: 18px;
  transition: transform .2s ease, box-shadow .2s ease;
}
.broker-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px -16px rgba(31,36,46,.18);
}
@media (min-width: 768px) { .broker-card { padding: 26px; } }

.broker-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 24px;
}
.broker-id {
  flex: 1 1 100%;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 14px;
}
@media (min-width: 1024px) { .broker-id { flex: 1 1 0; } }
.broker-id-text { min-width: 0; }
.broker-name {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.2;
  color: var(--ink);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) { .broker-name { font-size: 20px; } }
.broker-tag {
  margin-top: 3px;
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (min-width: 1024px) { .broker-tag { font-size: 14px; } }

.broker-stats {
  flex: 1 1 100%;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px 18px;
}
@media (min-width: 640px) { .broker-stats { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 1024px) { .broker-stats { flex: 1 1 auto; display: flex; gap: 22px 34px; } }
.broker-stat .k { font-size: 13px; color: #6b7280; }
@media (min-width: 1024px) { .broker-stat .k { font-size: 14px; } }
.broker-stat .v {
  margin-top: 4px;
  font-size: 18px;
  font-weight: 700;
  color: var(--ink);
  white-space: nowrap;
}
@media (min-width: 1024px) { .broker-stat .v { font-size: 20px; } }
.broker-stat .v .unit { font-size: 13px; font-weight: 500; color: #6b7280; margin-left: 3px; }

.broker-aside { flex: 1 1 100%; }
@media (min-width: 640px) { .broker-aside { flex: 0 0 auto; margin-left: auto; } }
.broker-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  padding: 0 22px;
  background: var(--ink);
  color: #fff;
  border-radius: var(--radius-btn);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: background-color .15s;
  border: none;
  cursor: pointer;
}
@media (min-width: 640px) { .broker-cta { width: auto; height: 42px; } }
.broker-cta:hover { background: #000; }


/* ===== MONIQ — Восстановление пароля (forgot-password.html) ===== */
/* Расширяет секцию Login. Здесь — только дополнения экрана успеха. */

/* Inherits the full login layout from login.css.
   Only the success-state additions live here. */

.forgot-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 12px;
  padding: 4px 0 2px;
  animation: forgot-fade-in .3s ease both;
}

@keyframes forgot-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.forgot-success-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 999px;
  background: rgba(225, 29, 72, .1);
  color: var(--red);
  margin-bottom: 2px;
}

.forgot-success-title {
  font-size: clamp(1.25rem, 1rem + 1.2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}

.forgot-success-text {
  font-size: 14px;
  line-height: 1.55;
  color: #6b7280;
  text-wrap: pretty;
  max-width: 36ch;
}
@media (min-width: 768px) {
  .forgot-success-text { font-size: 15px; }
}

.forgot-success-email {
  color: var(--ink);
  font-weight: 500;
  white-space: nowrap;
}

.forgot-resend {
  margin-top: 8px;
  width: 100%;
}


/* ===== MONIQ — Страницы ошибок (404 / 500) ===== */
/* Визуальная преемственность со страницами логина/регистрации:
   те же токены (--ink, --red), карточка, кнопки и отступы. */

/* Визуальная преемственность со страницами логина / регистрации:
   те же токены, карточка, кнопки и отступы. */

.error-page {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: #f3f4f6;
}

/* Center the card vertically + horizontally */
.error-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 16px 40px;
  gap: 18px;
}
@media (min-width: 768px) {
  .error-wrap { padding: 32px 24px 56px; }
}

/* Content block — no card chrome (plain centered block on grey bg) */
.error-card {
  width: 100%;
  max-width: 460px;
  padding: 24px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
@media (min-width: 768px) {
  .error-card { padding: 32px 16px; }
}

.error-logo {
  display: inline-flex;
  align-self: center;
}

/* Big error code — central accent */
.error-code {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 0.9;
  color: var(--ink);
  font-size: clamp(5rem, 2rem + 22vw, 9rem);
  margin: 2px 0 -2px;
}
/* Красная акцентная точка справа от числа — связь с логотипом */
.error-code-dot {
  width: clamp(0.6rem, 0.3rem + 1.6vw, 1rem);
  height: clamp(0.6rem, 0.3rem + 1.6vw, 1rem);
  border-radius: 9999px;
  background: var(--red);
  margin-left: clamp(6px, 1.4vw, 12px);
  align-self: flex-end;
  margin-bottom: clamp(8px, 1.6vw, 16px);
  flex-shrink: 0;
}

.error-head { display: flex; flex-direction: column; gap: 10px; }
.error-title {
  font-size: clamp(1.375rem, 1rem + 1.8vw, 1.75rem);
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--ink);
}
.error-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 36ch;
  margin: 0 auto;
  text-wrap: pretty;
}
@media (min-width: 768px) {
  .error-text { font-size: 16px; }
}

/* Actions */
.error-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 4px;
}

.error-home {
  height: 52px;
  width: 100%;
  max-width: 280px;
  padding: 0 24px;
  font-size: 15px;
  font-weight: 500;
}
.error-home:focus-visible {
  outline: 2px solid rgba(31, 36, 46, .35);
  outline-offset: 2px;
}

/* Secondary text link — "Обновить страницу" (500) */
.error-reload {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  background: transparent;
  border: none;
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  transition: color .15s;
}
.error-reload:hover { color: var(--ink); }
.error-reload:focus-visible {
  outline: 2px solid rgba(31, 36, 46, .25);
  outline-offset: 2px;
}
.error-reload svg { transition: transform .4s ease; }
.error-reload:hover svg { transform: rotate(-180deg); }


/* ===== MONIQ — Header «Журнал» мега-меню (сетка разделов) ===== */
/* Восстанавливает раскладку карточного меню «Журнал»: двухколоночная сетка
   пунктов «иконка + текст» и футер «Все материалы». Скоуп — внутри .nav-mega. */
.nav-mega .nav-mega-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2px;
}
.nav-mega .nav-mega-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: var(--radius-btn);
  color: var(--ink);
  transition: background-color .15s;
}
.nav-mega .nav-mega-item:hover { background: #f3f4f6; }
.nav-mega .nav-mega-ic {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: 10px;
  background: #f3f4f6;
  color: var(--ink);
  transition: background-color .15s, color .15s;
}
.nav-mega .nav-mega-item:hover .nav-mega-ic { background: var(--ink); color: #fff; }
.nav-mega .nav-mega-ic svg { width: 20px; height: 20px; }
.nav-mega .nav-mega-tx {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.nav-mega .nav-mega-t {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--ink);
}
.nav-mega .nav-mega-s {
  font-size: 12.5px;
  line-height: 1.3;
  color: #6b7280;
}
.nav-mega .nav-mega-all {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
  padding-top: 12px;
  border-top: 1px solid rgba(31,36,46,.08);
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  transition: color .15s;
}
.nav-mega .nav-mega-all svg { width: 16px; height: 16px; transition: transform .2s ease; }
.nav-mega .nav-mega-all:hover svg { transform: translate(3px, 0); }

/* ===== MONIQ — Контакты ===== */
/* Скоуп: .contacts-page. Переиспользует .page-head, .section-blend, .faq-item,
   .store-btn-подобные паттерны, --ink/--red/--radius-btn/--radius-*. */

.contact-card {
  position: relative;
  background: #fff;
  border-radius: 20px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  height: 100%;
  box-shadow: 0 10px 30px -16px rgba(31,36,46,.18);
  transition: box-shadow .2s ease, transform .2s ease;
}
@media (min-width: 768px) { .contact-card { padding: 32px 28px; } }
@media (hover: hover) {
  .contact-card:hover { box-shadow: 0 12px 32px rgba(31,36,46,.08); transform: translateY(-2px); }
}
.contact-card-icon {
  width: 48px;
  height: 48px;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  display: grid;
  place-items: center;
  color: var(--ink);
  flex-shrink: 0;
}
@media (max-width: 767px) {
  .contact-card-icon { display: none; }
  .contact-card-title { margin-top: 0; }
}
.contact-card-title {
  margin-top: 18px;
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
}
.contact-card-value {
  display: block;
  margin-top: 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.4;
  text-decoration: none;
  transition: color .15s;
}
a.contact-card-value:hover { color: var(--red); text-decoration: underline; text-underline-offset: 3px; }
.contact-card-meta {
  margin-top: 10px;
  font-size: 13px;
  color: #6b7280;
  line-height: 1.5;
}
.contact-card-text {
  margin-top: 12px;
  font-size: 14px;
  color: #4b5563;
  line-height: 1.55;
}
.contact-card address { font-style: normal; }
.contact-card-link {
  margin-top: auto;
  padding-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  text-decoration: none;
  transition: gap .15s, color .15s;
}
.contact-card-link:hover { gap: 10px; color: var(--red); }
.contact-card-link svg { width: 16px; height: 16px; }
.contact-card-btn {
  margin-top: 16px;
  align-self: flex-start;
}

/* Соцсети */
.social-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.social-btn {
  width: 52px;
  height: 52px;
  border-radius: var(--radius-btn);
  background: #f3f4f6;
  color: var(--ink);
  display: grid;
  place-items: center;
  transition: background-color .15s, color .15s;
}
.social-btn:hover { background: var(--ink); color: #fff; }
.social-btn svg { width: 22px; height: 22px; }

/* Карта */
.map-frame-wrap {
  border-radius: 20px;
  overflow: hidden;
  background: #f3f4f6;
  height: 300px;
}
@media (min-width: 768px) { .map-frame-wrap { height: 420px; } }
.map-frame-wrap iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.map-info {
  background: #f3f4f6;
  border-radius: 20px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  height: 100%;
}
.map-info-row {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.map-info-row svg {
  width: 20px;
  height: 20px;
  color: var(--ink);
  flex-shrink: 0;
  margin-top: 2px;
}
.map-info-k {
  font-size: 12.5px;
  color: #6b7280;
  margin-bottom: 2px;
}
.map-info-v { font-size: 14.5px; color: var(--ink); line-height: 1.5; }
.map-route-link {
  margin-top: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink);
  text-decoration: none;
  transition: gap .15s;
}
.map-route-link:hover { gap: 10px; }
.map-route-link svg { width: 16px; height: 16px; margin-top: 0; color: var(--ink); }