/* ═══ Typography + base ═══ */
html, body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'cv02','cv03','cv04','cv11','ss01';
}

/* Tabular numerics class (Tailwind has `tabular-nums` too) */
.tabular-nums, .font-mono, td.text-right {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum';
}

/* hide elements while Alpine boots */
[x-cloak] { display: none !important; }

/* Card hover lift */
.rounded-2xl, .rounded-3xl {
  transition: transform 180ms ease-out, box-shadow 180ms ease-out, border-color 180ms ease-out;
}
.rounded-2xl.hover-lift:hover,
.rounded-3xl.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px -12px rgba(15, 22, 32, 0.12), 0 4px 10px -4px rgba(15, 22, 32, 0.06);
}

/* Table row hover */
tbody tr {
  transition: background-color 120ms ease-out;
}
tbody tr:hover { background-color: #f8fafb; }

/* Pretty scrollbars */
*::-webkit-scrollbar { height: 10px; width: 10px; }
*::-webkit-scrollbar-thumb {
  background: #d1d9e0; border-radius: 8px; border: 2px solid transparent; background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover { background: #b0bac6; background-clip: padding-box; }

/* HTMX fade-in on swap */
.htmx-added   { opacity: 0; transform: translateY(4px); }
.htmx-settling{ transition: opacity 240ms ease-out, transform 240ms ease-out; opacity: 1; transform: none; }

/* Buttons in Safari */
button { -webkit-appearance: none; }

/* Subtle gradient divider */
.gradient-divider {
  height: 1px;
  background: linear-gradient(to right, transparent, rgba(33,102,255, 0.15), transparent);
}

/* Sparkline container */
.sparkline { display: block; width: 100%; height: 36px; }

/* Tab underline smooth */
nav button { transition: color 160ms, border-color 160ms; }

/* Tag / badge crispness */
.badge-dot { width: 6px; height: 6px; border-radius: 999px; }

/* Selection color */
::selection { background: rgba(33,102,255, 0.2); color: #0f1620; }

/* Floating hero blob animation */
@keyframes float-slow {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(-10px, 14px); }
}
.animate-float { animation: float-slow 12s ease-in-out infinite; }

/* ─── Hero glow — multiple perimeter-crawling "fireflies" ───
   Several blobs travel independently along the inside border of the
   hero section. Each has its own colour, size, speed, direction, and
   phase offset — the overall effect reads as random specks of light
   catching different parts of the frame at different moments, not a
   single spotlight. Feels organic because no two blobs arrive at the
   same corner together.

   Implementation:
     - `.hero-glow` is the absolutely-positioned container.
     - `.hero-aura-blob` children are large blurred radial gradients
       pinned to the perimeter via CSS-variable offsets (top/right/
       bottom/left controlled per keyframe stop).
     - Each blob has a different `animation-duration`, optional
       `animation-direction: reverse`, and negative `animation-delay`
       to desync phases at load. */
.hero-glow {
  position: relative;
}
.hero-aura {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
  border-radius: inherit;
  /* A barely-visible tinted wash so the saturated blobs on top have
     something to blend into. Without this, 0.5-opacity blobs on pure
     white look washed out on every mobile browser we tested (iOS
     Safari in particular renders filter: blur on sub-pixels very
     differently from Chrome desktop). */
  background:
    radial-gradient(ellipse at 10% 20%,  rgba(33,102,255, 0.06) 0%, transparent 50%),
    radial-gradient(ellipse at 90% 80%,  rgba(236,72,153, 0.06) 0%, transparent 50%);
}
.hero-aura-blob {
  position: absolute;
  width: clamp(220px, 32vw, 380px);
  height: clamp(220px, 32vw, 380px);
  border-radius: 50%;
  /* No blend mode — relied on mix-blend-mode: multiply before but iOS
     Safari silently ignores it when the container animates, giving a
     washed-out result on phones. Plain radial-gradient with strong
     inner alpha + transparent edge reads reliably on every browser we
     tested. */
  filter: blur(40px);
  opacity: 0.85;
  will-change: transform, left, top;
}
@media (max-width: 640px) {
  /* Phones: two bigger, more saturated blobs. Small-but-not-tiny blur
     so the colour pocket stays a pocket, not a cloud. */
  .hero-aura-blob.b3, .hero-aura-blob.b4 { display: none; }
  .hero-aura-blob {
    width: clamp(260px, 70vw, 380px);
    height: clamp(260px, 70vw, 380px);
    filter: blur(24px);
    opacity: 0.9;
  }
  /* Mobile colour set — punchier so the halo READS against the
     near-white hero background even with blur-blur dampening. */
  .hero-aura-blob.b1 {
    background: radial-gradient(circle, rgba(56,109,255, 0.85) 0%, rgba(56,109,255, 0.2) 50%, transparent 75%);
  }
  .hero-aura-blob.b2 {
    background: radial-gradient(circle, rgba(236,72,153, 0.80) 0%, rgba(236,72,153, 0.2) 50%, transparent 75%);
  }
}
/* Each blob travels clockwise from top-left around the perimeter.
   25% top edge → 50% right edge → 75% bottom edge → 100% back to
   top-left. Translate(-50%,-50%) centres the blob on its point. */
@keyframes aura-crawl-cw {
  0%   { left: 0%;   top: 0%;   transform: translate(-50%, -50%); }
  25%  { left: 100%; top: 0%;   transform: translate(-50%, -50%); }
  50%  { left: 100%; top: 100%; transform: translate(-50%, -50%); }
  75%  { left: 0%;   top: 100%; transform: translate(-50%, -50%); }
  100% { left: 0%;   top: 0%;   transform: translate(-50%, -50%); }
}
/* Counter-clockwise variant — starts at top-right, wraps other way.
   Separate keyframe instead of `animation-direction: reverse` so
   different blobs can start at different anchors. */
@keyframes aura-crawl-ccw {
  0%   { left: 100%; top: 0%;   transform: translate(-50%, -50%); }
  25%  { left: 0%;   top: 0%;   transform: translate(-50%, -50%); }
  50%  { left: 0%;   top: 100%; transform: translate(-50%, -50%); }
  75%  { left: 100%; top: 100%; transform: translate(-50%, -50%); }
  100% { left: 100%; top: 0%;   transform: translate(-50%, -50%); }
}
/* Slow radial pulse layered on top — gives each blob a breathing
   pulse so it doesn't feel metronome-steady. */
@keyframes aura-pulse {
  0%, 100% { opacity: 0.55; filter: blur(60px); }
  50%      { opacity: 0.28; filter: blur(90px); }
}
.hero-aura-blob.b1 {
  background: radial-gradient(circle, rgba(33,102,255, 0.8) 0%, transparent 70%);
  animation:
    aura-crawl-cw  18s linear infinite,
    aura-pulse     7s ease-in-out infinite;
  animation-delay: 0s, -2s;
}
.hero-aura-blob.b2 {
  background: radial-gradient(circle, rgba(139,92,246, 0.75) 0%, transparent 70%);
  width: 24vw; height: 24vw; max-width: 280px; max-height: 280px;
  animation:
    aura-crawl-ccw 26s linear infinite,
    aura-pulse     11s ease-in-out infinite;
  animation-delay: -8s, -4s;
}
.hero-aura-blob.b3 {
  background: radial-gradient(circle, rgba(236,72,153, 0.8) 0%, transparent 70%);
  width: 20vw; height: 20vw; max-width: 240px; max-height: 240px;
  animation:
    aura-crawl-cw  32s linear infinite,
    aura-pulse     9s ease-in-out infinite;
  animation-delay: -14s, -1s;
}
.hero-aura-blob.b4 {
  background: radial-gradient(circle, rgba(56,189,248, 0.55) 0%, transparent 70%);
  width: 26vw; height: 26vw; max-width: 300px; max-height: 300px;
  animation:
    aura-crawl-ccw 22s linear infinite,
    aura-pulse     13s ease-in-out infinite;
  animation-delay: -5s, -7s;
}
.hero-content { position: relative; z-index: 10; }

@media (prefers-reduced-motion: reduce) {
  .hero-aura-blob { animation: none !important; }
}

/* ─── Animated gradient text ───
   Bigger background-size so the colours have room to slide across the
   letters; position shifts back and forth at 6s. Extra stops give a
   richer waterfall feel than a 2-stop gradient. */
.text-gradient-flow {
  background: linear-gradient(
    110deg,
    #2166ff 0%,
    #6366f1 25%,
    #a855f7 50%,
    #ec4899 75%,
    #2166ff 100%
  );
  background-size: 300% 300%;
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: text-gradient-shift 6s ease-in-out infinite;
}
@keyframes text-gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-glow::before { animation: none; opacity: 0.4; }
  .text-gradient-flow { animation: none; }
}

/* Small kbd */
kbd {
  display: inline-block; padding: 1px 5px; font-family: inherit; font-size: 11px;
  border: 1px solid #e4e9ee; border-radius: 4px; background: #f8fafb; color: #32404f;
  box-shadow: 0 1px 0 #e4e9ee;
}

/* Empty-state muted */
.muted-empty { color: #94a3b8; font-style: normal; }

/* ─── Horizontal-scroll fade hint ───
   Wrap any wide table in a container with .scroll-x-fade to get a thin
   gradient strip on the right edge that disappears once the user has
   scrolled to the end. Signals "swipe right for more" on touch devices
   where the scrollbar is invisible until interaction. */
.scroll-x-fade {
  position: relative;
}
.scroll-x-fade::after {
  content: "";
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 24px;
  pointer-events: none;
  background: linear-gradient(to left, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0));
  border-top-right-radius: inherit;
  border-bottom-right-radius: inherit;
  transition: opacity 200ms ease;
}
/* When the scroll container is fully scrolled-right, this class is
   toggled by a tiny JS listener on htmx:afterSwap + window scroll. Falls
   back gracefully if JS never sets it — the fade just stays on. */
.scroll-x-fade.is-end::after { opacity: 0; }

/* Touch-friendly scrollbar: thin, only on hover/scroll */
.scrollbar-thin::-webkit-scrollbar { height: 6px; width: 6px; }
.scrollbar-thin::-webkit-scrollbar-thumb { background: rgba(100,120,140,0.25); border-radius: 3px; }
.scrollbar-thin::-webkit-scrollbar-thumb:hover { background: rgba(100,120,140,0.45); }

/* Мелкие моно-подписи были светло-серо-синими: на 11-13px это ниже 4.5:1.
   Поднимаем до значений, проходящих проверку контраста. */
.eyebrow-mono { color: #475569; }

/* ── Шапка: плашка аккаунта ───────────────────────────────────────────
   pl-1 (4px) плюс рамка 1px давали слева 5px против 4px сверху и снизу —
   аватар не концентричен дуге, кольцо вокруг него разной толщины.
   Справа наоборот было 16.4px до знака шеврона: плашка выглядела съехавшей. */
header .hdr-acct { padding-left: 3px; padding-right: 10px; }

/* Имя без ограничения ширины растягивало плашку с 85 до 334px и уводило всё
   меню влево на четверть ширины. Класс .truncate из сборки не годится:
   в нём нет white-space:nowrap, обрезка не срабатывает. */
header .hdr-acct-name {
  max-width: 148px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Рамка тумблера темы давала контраст 1.22:1 к белому — кольцо почти не
   читалось, кнопка выглядела пустым бубликом. */
header button[onclick] { border-color: #d1d9e0; }

/* Cytoscape needs a non-zero container size before renderer initialisation.
   Explicit CSS is intentional: arbitrary Tailwind classes are absent from
   the precompiled production bundle. */
.relations-graph-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 260px;
}

.relations-graph-canvas {
  height: clamp(500px, 62vh, 620px);
  min-height: 500px;
}

@media (max-width: 1023px) {
  .relations-graph-layout { grid-template-columns: minmax(0, 1fr); }
  .relations-graph-canvas { height: 500px; min-height: 500px; }
}

/* ═══ ИНН с копированием (история проверок) ═══
   Раньше вся плитка была одной ссылкой: клик в любое место уводил на карточку,
   а сам ИНН выделить было нельзя. Теперь ИНН — отдельная цель: по наведению
   подчёркивается, рядом проявляется иконка, клик кладёт номер в буфер и
   никуда не переходит. */
.inn-copy {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  border-radius: 5px;
  padding: 1px 3px;
  margin: -1px -3px;
  transition: background-color .13s ease, color .13s ease;
  -webkit-user-select: text;
  user-select: text;
}
.inn-copy:hover { background: rgba(15, 22, 32, .05); }
.inn-copy:hover .inn-copy__val {
  text-decoration: underline;
  text-underline-offset: 2px;
  font-weight: 600;
}
.inn-copy__icon {
  width: 12px; height: 12px;
  flex: none;
  opacity: 0;
  transition: opacity .13s ease;
}
.inn-copy:hover .inn-copy__icon,
.inn-copy:focus-visible .inn-copy__icon { opacity: .55; }
.inn-copy:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
/* Состояние «скопировано» — подтверждение без всплывающих окон */
.inn-copy.is-copied .inn-copy__val::after {
  content: " скопировано";
  font-size: .82em;
  opacity: .7;
  text-decoration: none;
  font-weight: 400;
}
.inn-copy.is-copied .inn-copy__icon { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .inn-copy, .inn-copy__icon { transition: none; }
}

/* ═══ Подсказки при наведении (переиспользуемые) ═══
   Абстракция, а не разовое решение: чтобы объяснить любой элемент, достаточно
   дописать ему data-hint="текст" и, если нужно, data-hint-title="Заголовок".
   Разметку и позиционирование берёт на себя один обработчик в base.html.
   Работает и с клавиатуры: подсказка появляется при фокусе.

   Пузырёк белым по чёрному — намеренно контрастно и одинаково во всех темах,
   чтобы подсказку нельзя было спутать с содержимым страницы. */
[data-hint] { cursor: help; }
/* Пунктирное подчёркивание — единственный намёк, что элемент можно спросить.
   На ссылках и кнопках не рисуем: у них своя аффорданс-логика. */
[data-hint]:not(a):not(button):not(.dh-nohint-underline) {
  text-decoration: underline dotted rgba(107, 119, 133, .55);
  text-underline-offset: 3px;
}
.dh-hint-bubble {
  position: fixed;
  z-index: 2147483000;          /* выше модалок и липкой шапки */
  max-width: 320px;
  padding: 9px 12px;
  border-radius: 10px;
  background: #14171C;
  color: #F2F4F7;
  font-size: 12.5px;
  line-height: 1.5;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, .55), 0 2px 6px rgba(0, 0, 0, .25);
  pointer-events: none;          /* не перехватывает мышь у элемента */
  opacity: 0;
  transform: translateY(3px);
  transition: opacity .12s ease, transform .12s ease;
}
.dh-hint-bubble.is-open { opacity: 1; transform: translateY(0); }
.dh-hint-bubble b {
  display: block;
  font-weight: 600;
  margin-bottom: 3px;
  color: #FFFFFF;
}
.dh-hint-bubble i {
  font-style: normal;
  color: #9AA3AF;               /* приглушённая вторая строка */
}
.dh-hint-bubble::after {         /* хвостик */
  content: "";
  position: absolute;
  left: var(--tail-x, 50%);
  width: 0; height: 0;
  border: 6px solid transparent;
}
.dh-hint-bubble[data-side="top"]::after {
  bottom: -12px; border-top-color: #14171C;
}
.dh-hint-bubble[data-side="bottom"]::after {
  top: -12px; border-bottom-color: #14171C;
}
@media (prefers-reduced-motion: reduce) {
  .dh-hint-bubble { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   История проверок: переключатель режима и выбор диапазона дат.
   Собственные стили, а не утилиты Tailwind: сборка статична, новые
   классы в неё уже не попадут.
   ═══════════════════════════════════════════════════════════════════ */
.dh-seg {
  display: inline-flex;
  padding: 3px;
  gap: 2px;
  border-radius: 12px;
  background: rgba(15, 22, 32, .05);
}
.dh-seg__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 30px;
  padding: 0 12px;
  border-radius: 9px;
  font-size: 13px;
  color: #5b6472;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.dh-seg__item:hover { color: #0f1620; }
.dh-seg__item[aria-current="true"] {
  background: #fff;
  color: #0f1620;
  font-weight: 600;
  box-shadow: 0 1px 2px rgba(15, 22, 32, .10);
}

/* ── Диапазон дат: одно поле «от — до» с календарём ── */
.dh-range { position: relative; }
.dh-range__btn {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid #e2e6ec;
  border-radius: 12px;
  background: #fff;
  font-size: 14px;
  color: #0f1620;
  text-align: left;
  white-space: nowrap;
}
.dh-range__btn:hover { border-color: #cdd4de; }
.dh-range__btn[aria-expanded="true"] { border-color: var(--dh-accent, #1554e4); }
.dh-range__btn svg { width: 15px; height: 15px; flex: none; opacity: .5; }
.dh-range__ph { color: #8b95a3; }
/* Кнопка-крестик стоит рядом с полем, поверх его правого края */
.dh-range__row { position: relative; display: flex; align-items: center; }
.dh-range__clear {
  position: absolute;
  right: 8px;
  width: 20px; height: 20px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  font-size: 15px; line-height: 1;
  color: #8b95a3;
}
.dh-range__clear:hover { background: rgba(15, 22, 32, .08); color: #0f1620; }

.dh-range__pop {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  padding: 12px;
  border: 1px solid #e2e6ec;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 12px 32px rgba(15, 22, 32, .14);
}
/* У правого края формы календарь уезжал за экран */
.dh-range__pop[data-align="right"] { left: auto; right: 0; }

.dh-range__presets {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding-bottom: 10px;
  margin-bottom: 10px;
  border-bottom: 1px solid #eef1f5;
}
.dh-range__preset {
  height: 26px;
  padding: 0 9px;
  border-radius: 8px;
  background: rgba(15, 22, 32, .05);
  font-size: 12px;
  color: #5b6472;
}
.dh-range__preset:hover { background: rgba(15, 22, 32, .10); color: #0f1620; }

.dh-range__nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.dh-range__nav b {
  font-size: 13px;
  font-weight: 600;
  color: #0f1620;
  text-transform: capitalize;
}
.dh-range__arrow {
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px;
  color: #5b6472;
  font-size: 15px; line-height: 1;
}
.dh-range__arrow:hover { background: rgba(15, 22, 32, .07); color: #0f1620; }

.dh-range__grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.dh-range__dow {
  height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px;
  color: #8b95a3;
}
.dh-range__day {
  height: 30px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: #0f1620;
}
.dh-range__day:hover:not(:disabled) { background: rgba(15, 22, 32, .07); }
.dh-range__day:disabled { color: #c3cad4; cursor: default; }
.dh-range__day[data-out="1"] { color: #c3cad4; }
/* Середина диапазона — сплошной фон без скруглений, края скруглены */
.dh-range__day[data-in="1"] { background: rgba(21, 84, 228, .10); border-radius: 0; }
.dh-range__day[data-edge="from"] { border-radius: 8px 0 0 8px; }
.dh-range__day[data-edge="to"]   { border-radius: 0 8px 8px 0; }
.dh-range__day[data-edge="solo"] { border-radius: 8px; }
.dh-range__day[data-sel="1"] {
  background: var(--dh-accent, #1554e4);
  color: #fff;
  font-weight: 600;
}
.dh-range__day[data-today="1"]:not([data-sel="1"]) {
  box-shadow: inset 0 0 0 1px rgba(21, 84, 228, .45);
}
.dh-range__hint {
  margin-top: 8px;
  font-size: 11.5px;
  color: #8b95a3;
  text-align: center;
}

/* Заголовок дня при группировке ленты по датам */
.dh-daybar td {
  padding: 7px 16px;
  background: rgba(15, 22, 32, .035);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #5b6472;
}
.dh-daybar__n { font-weight: 400; text-transform: none; letter-spacing: 0; color: #8b95a3; }

/* ═══════════════════════════════════════════════════════════════════
   Раздел «Контакты» на карточке контрагента.
   Свои стили: сборка Tailwind статична, новых утилит в ней не появится.
   ═══════════════════════════════════════════════════════════════════ */
.dh-ct-grid {
  display: grid;
  /* 340px, а не 280: при трёх колонках одинокая карточка почты занимала
     треть ширины, и справа зияла пустота. Две колонки смотрятся собранно
     и при одной карточке, и при четырёх. */
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 14px;
}
.dh-ct-card {
  border: 1px solid #e8ebf0;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
}
.dh-ct-card__head {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 13px 16px 11px;
  border-bottom: 1px solid #f0f2f6;
}
.dh-ct-card__head svg { width: 16px; height: 16px; flex: none; color: #1554e4; }
.dh-ct-card__title {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  color: #5b6472;
}
.dh-ct-card__n {
  margin-left: auto;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px;
  background: rgba(21, 84, 228, .09);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #1554e4;
}
.dh-ct-list { padding: 6px 0; }
.dh-ct-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 16px;
}
.dh-ct-row + .dh-ct-row { border-top: 1px solid #f4f6f9; }
.dh-ct-val {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  color: #0f1620;
  word-break: break-word;
}
.dh-ct-val a { color: #0f1620; text-decoration: none; }
.dh-ct-val a:hover { color: #1554e4; text-decoration: underline; text-underline-offset: 2px; }
.dh-ct-tel { font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.dh-ct-meta {
  margin-top: 3px;
  font-size: 11.5px;
  color: #8b95a3;
}
/* Подпись вида адреса — юридический / почтовый / прежний */
.dh-ct-tag {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 6px;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .03em;
  text-transform: uppercase;
  vertical-align: 1px;
}
.dh-ct-tag[data-t="legal"]  { background: rgba(21, 84, 228, .09); color: #1554e4; }
.dh-ct-tag[data-t="postal"] { background: rgba(16, 140, 90, .11); color: #0f7a52; }
.dh-ct-tag[data-t="former"] { background: rgba(15, 22, 32, .06);  color: #6b7480; }

/* Ссылки на карты рядом с адресом */
.dh-ct-maps {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}
.dh-ct-map {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 9px;
  border: 1px solid #e2e6ec;
  border-radius: 8px;
  font-size: 11.5px;
  color: #5b6472;
  text-decoration: none;
  white-space: nowrap;
  transition: border-color .15s, color .15s, background .15s;
}
.dh-ct-map:hover { border-color: #c3cfe6; color: #1554e4; background: rgba(21, 84, 228, .04); }
.dh-ct-map__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; }
.dh-ct-map[data-m="yandex"] .dh-ct-map__dot { background: #fc3f1d; }
.dh-ct-map[data-m="google"] .dh-ct-map__dot { background: #34a853; }
.dh-ct-map[data-m="2gis"]   .dh-ct-map__dot { background: #19aa1e; }

.dh-ct-copy {
  flex: none;
  width: 26px; height: 26px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 7px;
  color: #b3bcc8;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
}
.dh-ct-row:hover .dh-ct-copy { opacity: 1; }
.dh-ct-copy:hover { background: rgba(15, 22, 32, .06); color: #0f1620; }
.dh-ct-copy svg { width: 13px; height: 13px; }
.dh-ct-copy.is-done { opacity: 1; color: #0f7a52; }

/* Пусто — не ошибка, а честный ответ; оформляем спокойно */
.dh-ct-empty {
  border: 1px dashed #dfe4eb;
  border-radius: 18px;
  padding: 30px 22px;
  text-align: center;
  color: #6b7480;
  font-size: 14px;
}
.dh-ct-note {
  margin-top: 14px;
  font-size: 12px;
  color: #8b95a3;
  line-height: 1.55;
}

/* ═══════════════════════════════════════════════════════════════════
   Шапка карточки контрагента — видна во всех разделах.
   Свои стили: в собранном Tailwind нет ни md:sticky, ни z-10/40,
   ни text-ink-400/600, ни pl-2 — половина нужного отсутствует.
   ═══════════════════════════════════════════════════════════════════ */
.dh-cohead {
  position: sticky;
  top: 3.5rem;                 /* = высота топбара h-14 */
  z-index: 20;                 /* под топбаром (30) и под всеми модалками */
  margin-bottom: 1rem;
  padding: 10px 16px;
  border: 1px solid #e4e9ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(15, 22, 32, .04);
}
.dh-cohead__name {
  font-family: 'Space Grotesk', 'Inter', system-ui, sans-serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #0f1620;
}
.dh-cohead__kind {
  flex: none;
  padding: 1px 7px;
  border-radius: 6px;
  background: rgba(21, 84, 228, .09);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #1554e4;
}
.dh-cohead__sep {
  width: 3px; height: 3px;
  border-radius: 50%;
  background: #c3cad4;
  flex: none;
}
.dh-cohead__tab {
  font-size: 12px;
  color: #6b7480;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dh-cohead__status {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11.5px;
  font-weight: 600;
  white-space: nowrap;
}
.dh-cohead__status[data-s="ok"]    { background: rgba(16, 140, 90, .11);  color: #0f7a52; }
.dh-cohead__status[data-s="warn"]  { background: rgba(214, 158, 46, .14); color: #9a6b12; }
.dh-cohead__status[data-s="bad"]   { background: rgba(229, 72, 77, .11);  color: #c02c30; }
.dh-cohead__status[data-s="ink"]   { background: rgba(15, 22, 32, .06);   color: #5b6472; }

/* На узком экране шапка занимает всю ширину и не липнет: там сайдбар —
   выдвижной, и липкий блок только съедал бы высоту. */
@media (max-width: 767px) {
  .dh-cohead { position: static; }
}

/* ═══════════════════════════════════════════════════════════════════
   Поиск по фото: загрузка, обрезка, результаты.
   ═══════════════════════════════════════════════════════════════════ */
.fs-root { position: fixed; inset: 0; z-index: 90; display: flex;
           align-items: center; justify-content: center; padding: 18px; }
.fs-back { position: absolute; inset: 0; background: rgba(10,22,45,.6);
           backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.fs-win {
  position: relative; width: 100%; max-width: 860px; max-height: 92vh;
  display: flex; flex-direction: column; overflow: hidden;
  background: #fff; border-radius: 22px;
  box-shadow: 0 40px 90px -30px rgba(10,22,45,.6);
}
.fs-head { padding: 17px 22px; border-bottom: 1px solid #eef1f5;
           display: flex; align-items: center; gap: 12px; }
.fs-head__t { font-family: 'Space Grotesk','Inter',sans-serif;
              font-size: 17px; font-weight: 600; color: #0f1620; }
.fs-head__x { margin-left: auto; height: 32px; width: 32px;
              display: inline-flex; align-items: center; justify-content: center;
              border-radius: 9px; color: #6b7785; font-size: 20px; line-height: 1; }
.fs-head__x:hover { background: rgba(15,22,32,.07); color: #0f1620; }
.fs-body { padding: 20px 22px; overflow-y: auto; }

/* Зона перетаскивания */
.fs-drop {
  position: relative; width: 100%; aspect-ratio: 16/10;
  border: 2px dashed #cdd6e2; border-radius: 18px;
  background: rgba(21,84,228,.03);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 22px; cursor: pointer;
  transition: border-color .18s, background .18s;
}
.fs-drop:hover, .fs-drop.is-over { border-color: #1554e4; background: rgba(21,84,228,.07); }
.fs-drop__fig { position: relative; width: 92px; height: 92px; color: #9fb2d4; }
.fs-drop__fig svg { width: 100%; height: 100%; }
.fs-drop__plus {
  position: absolute; right: -6px; bottom: -6px;
  width: 38px; height: 38px; border-radius: 50%;
  background: #1554e4; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; line-height: 1; font-weight: 300;
  box-shadow: 0 8px 18px -8px rgba(21,84,228,.9);
}
.fs-drop__hint { font-size: 13.5px; color: #5b6472; line-height: 1.55; max-width: 46ch; }

/* Обрезка */
/* Картинка должна ВПИСЫВАТЬСЯ целиком, а не обрезаться.
   Раньше у области стоял max-height с overflow:hidden, и у вертикального
   снимка низ просто срезало — пользователь не видел, что выделяет.
   Внешний блок центрирует, внутренний облегает картинку по её реальному
   размеру: рамка обрезки позиционируется относительно ИЗОБРАЖЕНИЯ, иначе
   при letterbox-полях её доли поехали бы относительно фото. */
.fs-crop {
  position: relative; width: 100%;
  display: flex; align-items: center; justify-content: center;
  border-radius: 16px; background: #0f1620; touch-action: none;
  padding: 8px; min-height: 220px;
}
.fs-crop__wrap { position: relative; line-height: 0; max-width: 100%; }
.fs-crop img {
  display: block; max-width: 100%; max-height: 52vh;
  width: auto; height: auto; user-select: none;
}
.fs-crop__mask { position: absolute; inset: 0; background: rgba(10,22,45,.55); }
.fs-crop__box { position: absolute; border: 2px solid #fff; cursor: move;
                box-shadow: 0 0 0 9999px rgba(10,22,45,.55); }
.fs-crop__h { position: absolute; width: 14px; height: 14px; background: #fff;
              border-radius: 3px; }
.fs-crop__h[data-h="nw"] { left: -8px; top: -8px; cursor: nwse-resize; }
.fs-crop__h[data-h="ne"] { right: -8px; top: -8px; cursor: nesw-resize; }
.fs-crop__h[data-h="sw"] { left: -8px; bottom: -8px; cursor: nesw-resize; }
.fs-crop__h[data-h="se"] { right: -8px; bottom: -8px; cursor: nwse-resize; }

.fs-foot { display: flex; gap: 10px; justify-content: flex-end;
           padding: 15px 22px; border-top: 1px solid #eef1f5; flex-wrap: wrap; }
.fs-btn { height: 42px; padding: 0 20px; border-radius: 12px;
          font-size: 14px; font-weight: 600; display: inline-flex;
          align-items: center; gap: 8px; transition: filter .16s, transform .16s; }
.fs-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }
.fs-btn--ghost { border: 1px solid #e4e9ee; background: #fff; color: #32404f; }
.fs-btn--go { background: #1554e4; color: #fff; }
.fs-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; filter: none; }

/* Ожидание */
.fs-wait { padding: 40px 20px; text-align: center; }
.fs-spin { width: 44px; height: 44px; margin: 0 auto 16px;
           border: 3px solid rgba(21,84,228,.18); border-top-color: #1554e4;
           border-radius: 50%; animation: fs-rot .9s linear infinite; }
@keyframes fs-rot { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .fs-spin { animation-duration: 3s; } }

/* Предупреждение о природе оценки — обязательное, не украшение */
.fs-warn {
  margin-bottom: 14px; padding: 12px 15px; border-radius: 13px;
  background: rgba(214,158,46,.10); border: 1px solid rgba(214,158,46,.3);
  font-size: 12.5px; color: #7a5510; line-height: 1.55;
}

/* Результаты */
.fs-hit { display: flex; gap: 13px; padding: 12px; border: 1px solid #e8ebf0;
          border-radius: 14px; margin-bottom: 10px; align-items: center; }
.fs-hit__img { width: 72px; height: 72px; border-radius: 11px; object-fit: cover;
               flex: none; background: #eef1f5; }
.fs-hit__b { flex: 1 1 auto; min-width: 0; }
.fs-hit__n { font-size: 14px; font-weight: 600; color: #0f1620; }
.fs-hit__m { margin-top: 3px; font-size: 12px; color: #6b7480; }
.fs-hit__l { margin-top: 5px; font-size: 12.5px; }
.fs-score { flex: none; text-align: center; min-width: 62px; }
.fs-score__v { font-family: 'Space Grotesk','Inter',sans-serif;
               font-size: 19px; font-weight: 700; color: #0f1620; }
.fs-score__l { font-size: 10.5px; color: #8b95a3; text-transform: uppercase;
               letter-spacing: .05em; }
.fs-pin { flex: none; width: 36px; height: 36px; border-radius: 10px;
          display: inline-flex; align-items: center; justify-content: center;
          color: #98a2ac; border: 1px solid #e8ebf0; background: #fff;
          position: relative; }
.fs-pin:hover { color: #1554e4; border-color: #c3cfe6; }
.fs-pin.is-on { color: #fff; background: #1554e4; border-color: #1554e4; }
.fs-pin[disabled] { opacity: .38; cursor: not-allowed; }
.fs-pin svg { width: 16px; height: 16px; }
/* Подсказка в чёрном попапе при наведении */
.fs-pin__tip {
  position: absolute; bottom: calc(100% + 8px); right: 0;
  padding: 7px 11px; border-radius: 9px; background: #14171C; color: #fff;
  font-size: 11.5px; line-height: 1.45; white-space: normal; width: 210px;
  text-align: left; opacity: 0; pointer-events: none; transition: opacity .15s;
  z-index: 5;
}
.fs-pin:hover .fs-pin__tip { opacity: 1; }

/* Аватар на карточке */
.fs-avatar { width: 46px; height: 46px; border-radius: 12px; object-fit: cover;
             flex: none; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(15,22,32,.15); }

.dark .fs-win { background: #121e33; }
.dark .fs-head, .dark .fs-foot { border-color: #1d2b45; }
.dark .fs-head__t, .dark .fs-hit__n, .dark .fs-score__v { color: #eef3fa; }
.dark .fs-drop { border-color: #33456b; background: rgba(111,155,255,.05); }
.dark .fs-drop__hint { color: #8794ab; }
.dark .fs-btn--ghost { background: rgba(255,255,255,.05); border-color: #26375a; color: #e8ecf2; }
.dark .fs-hit, .dark .fs-pin { background: rgba(255,255,255,.04); border-color: #26375a; }
.dark .fs-hit__m, .dark .fs-score__l { color: #8794ab; }
.dark .fs-warn { background: rgba(214,158,46,.12); border-color: rgba(214,158,46,.34); color: #e0b357; }

/* ═══════════════════════════════════════════════════════════════════
   Плавающие кнопки карточки: история проверок и возврат наверх.
   Стопка снизу справа; наверх появляется только после долгой прокрутки.
   ═══════════════════════════════════════════════════════════════════ */
.dh-fabs {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 44;                 /* под модалками (50+), над содержимым */
  display: flex; flex-direction: column-reverse; gap: 10px;
  align-items: center;
}
.dh-fab {
  width: 46px; height: 46px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: #1554e4; color: #fff;
  box-shadow: 0 10px 24px -10px rgba(21, 84, 228, .85);
  transition: transform .18s ease, filter .18s ease, opacity .22s ease;
  position: relative;
}
.dh-fab:hover { transform: translateY(-2px); filter: brightness(1.08); }
.dh-fab:active { transform: translateY(0); }
.dh-fab svg { width: 21px; height: 21px; }
/* Возврат наверх — тот же круг, но спокойнее: он служебный */
.dh-fab--up { background: #0f1620; box-shadow: 0 10px 24px -10px rgba(15, 22, 32, .8); }

.dh-fab__tip {
  position: absolute; right: calc(100% + 10px); top: 50%;
  transform: translateY(-50%);
  padding: 6px 11px; border-radius: 9px;
  background: #14171C; color: #fff;
  font-size: 12px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .15s;
}
.dh-fab:hover .dh-fab__tip { opacity: 1; }

/* На узком экране кнопки мельче и ближе к краю: там они соседствуют с
   плавающей кнопкой «Разделы», и крупные круги загораживали бы содержимое. */
@media (max-width: 767px) {
  .dh-fabs { right: 14px; bottom: 84px; gap: 8px; }
  .dh-fab { width: 40px; height: 40px; }
  .dh-fab svg { width: 18px; height: 18px; }
  .dh-fab__tip { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .dh-fab { transition: opacity .22s ease; }
}

/* ── Лента прошлых поисков по фото ── */
.fs-hist {
  display: flex; gap: 9px; overflow-x: auto; padding: 2px 2px 10px;
  margin-bottom: 14px; border-bottom: 1px solid #eef1f5;
}
.fs-hist__i {
  flex: none; width: 62px; text-align: center;
  border: 2px solid transparent; border-radius: 12px; padding: 3px;
  transition: border-color .15s, background .15s;
}
.fs-hist__i:hover { background: rgba(15,22,32,.04); }
.fs-hist__i[aria-current="true"] { border-color: #1554e4; background: rgba(21,84,228,.06); }
.fs-hist__ph {
  width: 52px; height: 52px; border-radius: 9px; object-fit: cover;
  background: #eef1f5; display: block; margin: 0 auto;
}
.fs-hist__ph--none {
  display: flex; align-items: center; justify-content: center;
  color: #b3bcc8; font-size: 18px;
}
.fs-hist__n { margin-top: 4px; font-size: 10.5px; color: #6b7480; line-height: 1.3; }

/* Кнопка «История поисков» рядом с загрузкой */
.fs-hist-btn {
  height: 40px; padding: 0 16px; border-radius: 8px;
  border: 1px solid #e4e9ee; background: #fff; color: #32404f;
  font-size: 14px; font-weight: 500;
  display: inline-flex; align-items: center; gap: 8px; transition: border-color .15s;
}
.fs-hist-btn:hover { border-color: #cdd4de; color: #0f1620; }
.fs-hist-btn__n {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px;
  background: rgba(21,84,228,.10); color: #1554e4;
  font-size: 11px; font-weight: 600;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Просмотр закреплённого фото в полный размер */
.fs-big__img {
  display: block; max-width: 100%; max-height: 58vh;
  margin: 0 auto; border-radius: 14px; background: #eef1f5;
}
.fs-avatar-btn { display: block; padding: 0; border: 0; background: none; cursor: zoom-in; }

.dark .fs-hist { border-bottom-color: #1d2b45; }
.dark .fs-hist__i:hover { background: rgba(255,255,255,.05); }
.dark .fs-hist__i[aria-current="true"] { background: rgba(111,155,255,.10); border-color: #6f9bff; }
.dark .fs-hist__n { color: #8794ab; }
.dark .fs-hist-btn { background: rgba(255,255,255,.05); border-color: #26375a; color: #e8ecf2; }