/* =============================================================================
   Рассылка — оформление «Обсерватория» (ui3), 01.10.2026.

   Слой поверх app.css. Разметку и поведение не меняет: только токены и вид.
   Включается классом на <body>:
     · body.ui3        — весь экран в новом оформлении;
     · body.ui3-shell  — только шапка и рельс (Входящие и Исходящие: рабочие
                         экраны менеджеров остаются в привычном светлом виде,
                         меняется лишь рамка вокруг них — как в amoCRM).
   Выключается у человека ссылкой ?ui=classic (кука), обратно — ?ui=new.

   Характер: ночная смена в обсерватории. Парк личностей — созвездие,
   ядро рассылки — светило, золото — знак PERSONO и премии «Лидеры эпохи».
   Золото — только действие и выбранное; статусы — своими цветами и словом.
   ============================================================================= */

/* ------------------------------------------------------------- токены ---- */
body.ui3,
body.ui3-shell .topbar,
body.ui3-shell .rail {
  --paper:        #080b15;
  --card:         #0f1425;
  --card-sunken:  #0b1020;
  --ink:          #eceef6;
  --ink-soft:     #c3c8da;
  --muted:        #8c93af;
  --faint:        #5e6585;
  --line:         #1d2440;
  --line-strong:  #2b3456;

  --accent:       #e7bf6b;
  --accent-hover: #f3d089;
  --accent-soft:  rgba(231, 191, 107, .10);
  --accent-line:  rgba(231, 191, 107, .34);
  --on-accent:    #1d1606;
  --link:         #a9b9ff;
  --link-hover:   #d0d9ff;
  --aurora:       #8a7cff;

  --ok:           #45d89d;
  --ok-soft:      rgba(69, 216, 157, .10);
  --ok-line:      rgba(69, 216, 157, .30);
  --warn:         #f5a65b;
  --warn-soft:    rgba(245, 166, 91, .10);
  --warn-line:    rgba(245, 166, 91, .32);
  --danger:       #ff6f86;
  --danger-soft:  rgba(255, 111, 134, .10);
  --danger-line:  rgba(255, 111, 134, .34);
  --info:         #74b9ff;
  --info-soft:    rgba(116, 185, 255, .10);
  --info-line:    rgba(116, 185, 255, .30);

  --ch-telegram:  #2f9ae6;
  --ch-sms:       #9a7df2;
  --ch-whatsapp:  #2fb36f;
  --ch-vk:        #5a7fd0;
  --ch-max:       #8b6cf0;
  --ch-instagram: #e2558f;
  --ch-email:     #5f6a8c;
  --ch-phone:     #56627f;
  --ch-website:   #5f6a8c;

  --r-sm: 8px; --r: 12px; --r-lg: 18px; --r-pill: 999px;
  /* имена, на которые ссылается app.css, но не объявляет */
  --r1: 6px; --r2: 10px; --r-md: 12px;
  --wash: rgba(255, 255, 255, .035);
  --fill:   rgba(255, 255, 255, .04);
  --fill-2: rgba(255, 255, 255, .065);
  --fill-3: rgba(255, 255, 255, .09);
  --hover-line: #3c4775;
  --input-focus: #0d1326;
  --glow: 1;
  --sans: var(--font);
  --t-label: 10.5px;

  --shadow-sm:  inset 0 1px 0 rgba(255, 255, 255, .035),
                0 12px 30px -20px rgba(0, 0, 0, .9);
  --shadow-md:  inset 0 1px 0 var(--fill),
                0 18px 40px -22px rgba(0, 0, 0, .95);
  --shadow-pop: 0 24px 60px -18px rgba(0, 0, 0, .85),
                0 0 0 1px var(--line-strong);
  --ring: 0 0 0 3px rgba(231, 191, 107, .26);

  --font: "Onest", "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, sans-serif;
  --font-display: "Unbounded", "Onest", sans-serif;
  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  --t-page: 28px;
  --ease-out: cubic-bezier(.16, .84, .24, 1);
}

/* ------------------------------------------------------------- основа ---- */
body.ui3 {
  color-scheme: dark;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font);
  font-feature-settings: "tnum" 1;
}
/* Небо: медленное полярное сияние за всем экраном. Рисуется под содержимым
   и никогда не перехватывает курсор. */
body.ui3::before {
  content: ""; position: fixed; inset: -25%; z-index: -2; pointer-events: none;
  background:
    radial-gradient(38% 30% at 18% 12%, rgba(138, 124, 255, .16), transparent 70%),
    radial-gradient(34% 28% at 84% 6%, rgba(231, 191, 107, .09), transparent 70%),
    radial-gradient(40% 34% at 70% 92%, rgba(47, 154, 230, .10), transparent 70%),
    radial-gradient(30% 26% at 6% 86%, rgba(69, 216, 157, .06), transparent 70%);
  animation: ui3-aurora 46s ease-in-out infinite alternate;
}
@keyframes ui3-aurora {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
  50%  { transform: translate3d(3%, 2%, 0) rotate(4deg) scale(1.06); }
  100% { transform: translate3d(-2%, 3%, 0) rotate(-3deg) scale(1.02); }
}
/* Зерно плёнки — глубина без картинок. */
body.ui3::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .035 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
#ui3-sky { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1;
           pointer-events: none; opacity: .9; }

body.ui3 a { color: var(--link); transition: color var(--fast); }
body.ui3 a:hover { color: var(--link-hover); }
body.ui3 ::selection { background: rgba(231, 191, 107, .32); color: #fff; }
body.ui3 :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* полосы прокрутки в тон */
body.ui3 { scrollbar-color: #2b3456 transparent; }
body.ui3 ::-webkit-scrollbar { width: 10px; height: 10px; }
body.ui3 ::-webkit-scrollbar-thumb { background: #232b4a; border-radius: 10px;
  border: 2px solid transparent; background-clip: padding-box; }
body.ui3 ::-webkit-scrollbar-thumb:hover { background-color: #34406a; }
body.ui3 ::-webkit-scrollbar-track { background: transparent; }

/* =========================================================== шапка ======= */
body.ui3 .topbar, body.ui3-shell .topbar {
  background: rgba(8, 11, 21, .74);
  backdrop-filter: saturate(1.5) blur(16px);
  -webkit-backdrop-filter: saturate(1.5) blur(16px);
  border-bottom: 1px solid var(--line);
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font);
}
/* Нить света под шапкой — золото гаснет к краям. */
body.ui3 .topbar::after, body.ui3-shell .topbar::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(231, 191, 107, .55) 30%,
              rgba(138, 124, 255, .45) 70%, transparent);
  opacity: .55; pointer-events: none;
}
body.ui3 .brand, body.ui3-shell .brand {
  position: relative; display: inline-flex; align-items: center; gap: 11px;
  font: 600 13px/1 var(--font-display); letter-spacing: .06em; text-transform: uppercase;
  color: var(--ink);
}
/* Знак: орбита и спутник, который обходит её раз в девять секунд. */
body.ui3 .brand::before, body.ui3-shell .brand::before {
  content: ""; width: 16px; height: 16px; border-radius: 50%; flex: none;
  background: radial-gradient(circle at 50% 50%, #ffe7b0 0 2.5px, transparent 3.5px);
  box-shadow: inset 0 0 0 1.5px rgba(231, 191, 107, .75), 0 0 14px rgba(231, 191, 107, .35);
}
body.ui3 .brand::after, body.ui3-shell .brand::after {
  content: ""; position: absolute; left: 6px; top: 50%; width: 4px; height: 4px;
  margin-top: -2px; border-radius: 50%; background: #c9bfff;
  box-shadow: 0 0 8px #a99cff;
  transform-origin: 2px 2px;
  animation: ui3-orbit 9s linear infinite;
}
@keyframes ui3-orbit {
  from { transform: rotate(0deg) translateX(9px); }
  to   { transform: rotate(360deg) translateX(9px); }
}
body.ui3 .brand a, body.ui3-shell .brand a { color: inherit; }
body.ui3 .brand a:hover, body.ui3-shell .brand a:hover { color: var(--accent); text-decoration: none; }

body.ui3 .nav a, body.ui3-shell .nav a {
  position: relative; color: var(--muted); font-weight: 500; border-radius: var(--r-pill);
  background: transparent;
}
body.ui3 .nav a:hover, body.ui3-shell .nav a:hover {
  color: var(--ink); background: var(--fill-2); text-decoration: none;
}
body.ui3 .nav a.is-active, body.ui3-shell .nav a.is-active {
  color: var(--accent); background: rgba(231, 191, 107, .09); font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(231, 191, 107, .28), 0 0 22px -6px rgba(231, 191, 107, .45);
}
body.ui3 .nav a.is-active:hover, body.ui3-shell .nav a.is-active:hover {
  color: var(--accent-hover); background: rgba(231, 191, 107, .13);
}
body.ui3 .nav .badge-count, body.ui3-shell .nav .badge-count {
  background: rgba(245, 166, 91, .16); color: #ffc58d; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(245, 166, 91, .35);
}
body.ui3 .nav .badge-count--warn, body.ui3-shell .nav .badge-count--warn {
  background: rgba(255, 111, 134, .16); color: #ff9fb0;
  box-shadow: inset 0 0 0 1px rgba(255, 111, 134, .38);
}
body.ui3 .whoami, body.ui3-shell .whoami { color: var(--faint); }
body.ui3 .whoami b, body.ui3-shell .whoami b { color: var(--ink-soft); }
body.ui3 .bell, body.ui3-shell .bell { color: var(--muted); border-radius: 50%; }
body.ui3 .bell:hover, body.ui3-shell .bell:hover { background: var(--fill-2); color: var(--ink); }
body.ui3 .bell--on, body.ui3-shell .bell--on { color: var(--accent); }
body.ui3 .bell i, body.ui3-shell .bell i { background: var(--danger); color: #fff;
  font-family: var(--font); box-shadow: 0 0 10px rgba(255, 111, 134, .6); }
body.ui3 .topbar .btn--ghost, body.ui3-shell .topbar .btn--ghost {
  color: var(--muted); background: transparent; border-color: transparent; font-family: var(--font);
}
body.ui3 .topbar .btn--ghost:hover, body.ui3-shell .topbar .btn--ghost:hover {
  color: var(--ink); background: var(--fill-2);
}
body.ui3 .tag--demo, body.ui3-shell .tag--demo {
  background: rgba(138, 124, 255, .14); color: #c5bcff; border-color: rgba(138, 124, 255, .4);
}

/* ============================================= рельс: приборная строка === */
body.ui3 .rail, body.ui3-shell .rail {
  background: rgba(10, 14, 27, .82);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line); color: var(--muted); font-family: var(--font);
}
body.ui3 .rail__state, body.ui3-shell .rail__state { letter-spacing: .01em; }
body.ui3 .rail--off .rail__state, body.ui3-shell .rail--off .rail__state { color: var(--ink-soft); }
body.ui3 .rail--on .rail__state, body.ui3-shell .rail--on .rail__state { color: #ff96a7; }
body.ui3 .rail b, body.ui3-shell .rail b { font-family: var(--mono); font-weight: 700; letter-spacing: .02em; }
body.ui3 .rail__state b, body.ui3-shell .rail__state b { font-size: 12px; }
body.ui3 .lamp, body.ui3-shell .lamp {
  background: #4a5274; box-shadow: 0 0 0 3px rgba(74, 82, 116, .25);
}
body.ui3 .rail--on .lamp, body.ui3-shell .rail--on .lamp {
  background: var(--danger); box-shadow: 0 0 0 3px rgba(255, 111, 134, .22), 0 0 12px rgba(255, 111, 134, .8);
  animation: ui3-lamp 2.2s ease-in-out infinite;
}
@keyframes ui3-lamp { 50% { box-shadow: 0 0 0 7px rgba(255, 111, 134, .06), 0 0 18px rgba(255, 111, 134, .9); } }
body.ui3 .rail .rail__state--reply, body.ui3-shell .rail .rail__state--reply { color: var(--ok); }
body.ui3 .rail .rail__state--reply .lamp, body.ui3-shell .rail .rail__state--reply .lamp {
  background: var(--ok); box-shadow: 0 0 0 3px rgba(69, 216, 157, .18), 0 0 10px rgba(69, 216, 157, .7);
  animation: none;
}
body.ui3 .rail .rail__state--reply .lamp--off, body.ui3-shell .rail .rail__state--reply .lamp--off {
  background: #4a5274; box-shadow: 0 0 0 3px rgba(74, 82, 116, .25);
}
body.ui3 .rail .rail__state--reply:has(.lamp--off), body.ui3-shell .rail .rail__state--reply:has(.lamp--off) { color: var(--muted); }
body.ui3 .rail__live, body.ui3-shell .rail__live { color: var(--muted); }
body.ui3 .rail__live b, body.ui3-shell .rail__live b { color: var(--ink); }
body.ui3 .rail__live a:hover b, body.ui3-shell .rail__live a:hover b { color: var(--accent); }
body.ui3 .rail summary, body.ui3-shell .rail summary { color: var(--muted); }
body.ui3 .rail__pop, body.ui3-shell .rail__pop {
  background: rgba(15, 20, 37, .96); backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong); color: var(--ink-soft); box-shadow: var(--shadow-pop);
}
body.ui3 .rail__pop dt, body.ui3-shell .rail__pop dt { color: var(--accent); font-family: var(--mono);
  font-size: 10px; letter-spacing: .1em; }

/* ===================================================== макет и заголовки == */
body.ui3 main { padding-top: 30px; }
body.ui3 .page-head {
  position: relative; border-bottom: 0; padding-bottom: var(--s5); margin-bottom: var(--s6);
}
body.ui3 .page-head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, rgba(231, 191, 107, .5), rgba(138, 124, 255, .25) 35%,
              rgba(29, 36, 64, .9) 60%, transparent);
}
body.ui3 .eyebrow {
  display: inline-flex; align-items: center; gap: 4px 10px; flex-wrap: wrap; max-width: 100%;
  font: 500 10.5px/1.4 var(--mono); letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent); opacity: 1; margin-bottom: 9px;
}
body.ui3 .eyebrow::before {
  content: ""; width: 18px; height: 1px; flex: none;
  background: linear-gradient(90deg, transparent, var(--accent));
}
body.ui3 h1, body.ui3 .page-head h1 {
  font: 500 var(--t-page)/1.15 var(--font-display); letter-spacing: -.01em; color: var(--ink);
  text-wrap: balance;
}
body.ui3 h2 { font-family: var(--font); font-weight: 600; letter-spacing: -.005em; color: var(--ink); }
body.ui3 h3 { font-family: var(--font); font-weight: 600; color: var(--ink); }
body.ui3 .lede, body.ui3 .sub, body.ui3 .muted { color: var(--muted); }
body.ui3 .faint { color: var(--faint); }
body.ui3 .mono { font-family: var(--mono); font-size: 12px; }
body.ui3 code { font-family: var(--mono); font-size: .92em; color: var(--ink-soft);
  background: var(--fill-2); padding: 1px 5px; border-radius: 5px; }
body.ui3 hr, body.ui3 .divider { background: var(--line); border-color: var(--line); }

/* Появление: экран собирается сверху вниз за полсекунды.
   Заливка — только «до» (backwards), не «после»: с `both` после анимации у
   блока оставался transform (единичная матрица), и всё `position: fixed`
   внутри — окна «Напомнить», «В архив», «Не связываться» на телефоне —
   прижималось не к экрану, а к низу инбокса, за краем экрана (08.10.2026). */
body.ui3 main > * { animation: ui3-rise .6s var(--ease-out) backwards; }
body.ui3 main > *:nth-child(2) { animation-delay: .05s; }
body.ui3 main > *:nth-child(3) { animation-delay: .10s; }
body.ui3 main > *:nth-child(4) { animation-delay: .15s; }
body.ui3 main > *:nth-child(5) { animation-delay: .20s; }
body.ui3 main > *:nth-child(6) { animation-delay: .25s; }
body.ui3 main > *:nth-child(n+7) { animation-delay: .30s; }
@keyframes ui3-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================================================ карточки === */
/* Под курсором по карточке скользит мягкий отсвет (координаты ставит
   скрипт в base.html). Без скрипта — просто карточка. */
body.ui3 .card,
body.ui3 .metrics,
body.ui3 .tile,
body.ui3 .crm-kpi,
body.ui3 .crm-table,
body.ui3 .crm-filters,
body.ui3 .crm-money3,
body.ui3 details.collapse {
  background:
    radial-gradient(560px circle at var(--mx, -900px) var(--my, -900px), rgba(231, 191, 107, .06), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0) 120px),
    var(--card);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-sm);
  color: var(--ink);
}
body.ui3 .card { transition: border-color var(--base), box-shadow var(--base); }
body.ui3 .card:hover { border-color: var(--line-strong); }
body.ui3 .card--sunken { background: var(--card-sunken); }
body.ui3 .card--accent {
  border-color: var(--accent-line);
  background:
    radial-gradient(560px circle at var(--mx, -900px) var(--my, -900px), rgba(231, 191, 107, .08), transparent 42%),
    linear-gradient(180deg, rgba(231, 191, 107, .07), rgba(231, 191, 107, 0) 160px),
    var(--card);
}
body.ui3 .card--danger { border-color: var(--danger-line); }
body.ui3 .card--crm { border-left: 3px solid var(--accent); }

/* ===================================================== полоса показателей = */
body.ui3 .metric { border-left-color: var(--line); }
body.ui3 .metric__label, body.ui3 .tile__label, body.ui3 .crm-kpi__l {
  font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--faint);
}
body.ui3 .metric__value, body.ui3 .tile__value, body.ui3 .crm-kpi__v, body.ui3 .wiz-head__count {
  font-family: var(--font-display); font-weight: 500; letter-spacing: -.02em; color: var(--ink);
}
body.ui3 .metric__value { font-size: 27px; }
body.ui3 .metrics--primary .metric__value { font-size: 38px; letter-spacing: -.03em; }
body.ui3 .metrics--secondary .metric__value { font-size: 21px; }
body.ui3 .metric__value--na, body.ui3 .tile__value--na {
  font-family: var(--font); color: var(--faint); font-weight: 500; letter-spacing: 0;
}
body.ui3 .metric__value--accent { color: var(--accent); text-shadow: 0 0 26px rgba(231, 191, 107, .35); }
body.ui3 .metric__value--danger, body.ui3 .metric--danger .metric__value { color: var(--danger); }
body.ui3 .metric--warn .metric__value { color: var(--warn); }
body.ui3 .metric__note, body.ui3 .tile__note, body.ui3 .crm-kpi__n { color: var(--muted); }
body.ui3 .metric--link { transition: background var(--fast); }
body.ui3 .metric--link:hover { background: rgba(231, 191, 107, .05); border-color: var(--line); }
body.ui3 .metric--link:hover .metric__value { color: var(--accent); }
body.ui3 .crm-kpi__i { border-left-color: var(--line); }
/* Unbounded широкий: девятизначные суммы в плитке шириной 150 px не влезали
   и наезжали на соседнюю. Кегль меньше, межбуквенный — плотнее. */
body.ui3 .crm-kpi__v { font-size: 16.5px; letter-spacing: -.035em; }
body.ui3 .crm-money3 b { font-size: 17px; letter-spacing: -.03em; }
body.ui3 .crm-kpi__i--paid .crm-kpi__v { color: var(--accent); }
body.ui3 .crm-kpi__i--unpaid .crm-kpi__v { color: var(--warn); }
body.ui3 .crm-kpi__i--alert { background: var(--warn-soft); }
body.ui3 .crm-money3 > div { border-left-color: var(--line); }
body.ui3 .crm-money3 b { font-family: var(--font-display); font-weight: 500; }

/* «Продажи»: полоса итогов. В базовом слое у неё стилей не было вовсе —
   пять цифр стояли голым списком. */
body.ui3 .an-kpi {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  margin: 0 0 var(--s4); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden;
  background:
    radial-gradient(560px circle at var(--mx, -900px) var(--my, -900px), rgba(231, 191, 107, .06), transparent 42%),
    linear-gradient(180deg, rgba(255, 255, 255, .022), rgba(255, 255, 255, 0) 120px), var(--card);
  box-shadow: var(--shadow-sm);
}
body.ui3 .an-kpi__i { display: flex; flex-direction: column; gap: 8px; padding: var(--s4) var(--s5);
  border-left: 1px solid var(--line); min-width: 0; }
body.ui3 .an-kpi__i:first-child { border-left: 0; }
body.ui3 .an-kpi__i b { font: 500 21px/1.1 var(--font-display); letter-spacing: -.03em; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
body.ui3 .an-kpi__i span { font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); }
body.ui3 .an-kpi__i--hero { background: linear-gradient(180deg, rgba(231, 191, 107, .08), transparent); }
body.ui3 .an-kpi__i--hero b { color: var(--accent); text-shadow: 0 0 26px rgba(231, 191, 107, .35); }

/* ============================================================== плашки === */
body.ui3 .tag { font-weight: 560; border-color: transparent; }
body.ui3 .tag--mute, body.ui3 .tag--sm { background: var(--fill); color: var(--muted); border-color: var(--line); }
body.ui3 .tag--parser { background: rgba(138, 124, 255, .13); color: #c3b9ff; border-color: rgba(138, 124, 255, .35); }
body.ui3 .tag--vip { background: rgba(231, 191, 107, .14); color: #f6d58f; border-color: rgba(231, 191, 107, .42); }
body.ui3 .tag--client { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
body.ui3 .tag--st-dnc { background: #eceef6; color: #0b1020; border-color: #eceef6; }
body.ui3 .tag .dot { box-shadow: 0 0 6px currentColor; }
body.ui3 .ch { color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
body.ui3 .ch--ghost { background: transparent; color: var(--faint); box-shadow: inset 0 0 0 1px var(--line-strong); }
body.ui3 .st { background: var(--fill); border-color: var(--line); color: var(--muted); }
body.ui3 .st--PAID_CONFIRMED, body.ui3 .st--PAID { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
body.ui3 .st--PARTIAL_PAYMENT, body.ui3 .st--PARTIALLY_PAID { background: var(--info-soft); color: var(--info); border-color: var(--info-line); }
body.ui3 .st--DEAL_ONLY, body.ui3 .st--PAYMENT_UNVERIFIED { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
body.ui3 .st--REFUND, body.ui3 .st--LOST { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }

/* ============================================================== кнопки === */
body.ui3 button, body.ui3 .btn {
  font-family: var(--font); font-weight: 560;
  background: var(--fill); border-color: var(--line-strong); color: var(--ink);
  border-radius: 10px;
}
body.ui3 button:hover, body.ui3 .btn:hover {
  background: var(--fill-3); border-color: var(--hover-line); color: var(--ink);
}
body.ui3 button:disabled, body.ui3 .btn.is-disabled {
  background: var(--fill); border-color: var(--line); color: var(--faint); opacity: .7;
}
/* Главное действие — золото со светом, который пробегает под курсором. */
body.ui3 .btn--primary, body.ui3 button.primary {
  position: relative; overflow: hidden; isolation: isolate;
  color: var(--on-accent); font-weight: 650; border-color: transparent;
  background: linear-gradient(180deg, #f5d491 0%, #e3b55c 55%, #d7a54a 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 1px rgba(231, 191, 107, .5),
              0 8px 24px -10px rgba(231, 191, 107, .65);
}
body.ui3 .btn--primary::after, body.ui3 button.primary::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .55) 48%, transparent 66%);
  transform: translateX(-110%); transition: transform .7s var(--ease-out);
}
body.ui3 .btn--primary:hover, body.ui3 button.primary:hover {
  color: var(--on-accent); border-color: transparent;
  background: linear-gradient(180deg, #ffe2a6 0%, #ecc06a 55%, #e0ae52 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 1px rgba(231, 191, 107, .7),
              0 10px 30px -10px rgba(231, 191, 107, .85);
}
body.ui3 .btn--primary:hover::after, body.ui3 button.primary:hover::after { transform: translateX(110%); }
body.ui3 .btn--primary:disabled, body.ui3 button.primary:disabled {
  background: rgba(231, 191, 107, .18); color: rgba(29, 22, 6, .7); box-shadow: none;
}
body.ui3 .btn--danger, body.ui3 button.danger {
  background: rgba(255, 111, 134, .05); border-color: var(--danger-line); color: #ff9aac;
}
body.ui3 .btn--danger:hover, body.ui3 button.danger:hover {
  background: var(--danger-soft); border-color: var(--danger); color: #ffc0cb;
}
body.ui3 .btn--solid-danger { background: #e2485f; border-color: #e2485f; color: #fff;
  box-shadow: 0 8px 24px -10px rgba(255, 111, 134, .7); }
body.ui3 .btn--solid-danger:hover { background: #f05a71; border-color: #f05a71; color: #fff; }
body.ui3 .btn--ghost { background: transparent; border-color: transparent; color: var(--muted); }
body.ui3 .btn--ghost:hover { background: var(--fill-2); color: var(--ink); border-color: transparent; }
body.ui3 .btn--danger-ghost { color: #ff9aac; }

/* ================================================================ поля === */
body.ui3 input, body.ui3 select, body.ui3 textarea {
  background: var(--card-sunken); border-color: var(--line-strong); color: var(--ink);
  font-family: var(--font); border-radius: 10px;
}
body.ui3 input::placeholder, body.ui3 textarea::placeholder { color: var(--faint); }
body.ui3 input:hover, body.ui3 select:hover, body.ui3 textarea:hover { border-color: var(--hover-line); }
body.ui3 input:focus, body.ui3 select:focus, body.ui3 textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px rgba(231, 191, 107, .16);
  background: var(--input-focus);
}
body.ui3 input[type=checkbox], body.ui3 input[type=radio] { accent-color: var(--accent); }
body.ui3 select option { background: var(--card); color: var(--ink); }
body.ui3 label { color: var(--muted); }

/* ============================================================= таблицы === */
body.ui3 table { color: var(--ink-soft); }
body.ui3 th {
  font: 500 10px/1.4 var(--mono); letter-spacing: .1em; text-transform: uppercase;
  color: var(--faint); border-bottom-color: var(--line-strong);
}
body.ui3 td { border-bottom-color: var(--line); }
body.ui3 tbody tr:hover { background: rgba(231, 191, 107, .035); }
body.ui3 .t-strong { color: var(--ink); }
body.ui3 .t-second { color: var(--muted); }
body.ui3 tr.is-muted td { color: var(--faint); }
body.ui3 .crm-table th { background: var(--card); }
body.ui3 .crm-table th a.is-sorted { color: var(--accent); }
body.ui3 .crm-table tbody tr:hover { background: rgba(231, 191, 107, .035); }
body.ui3 .crm-name { color: var(--ink); }

/* ======================================================== сообщения ====== */
body.ui3 .note { background: var(--fill); border-color: var(--line); color: var(--ink-soft); }
body.ui3 .note--info   { background: var(--info-soft);   border-color: var(--info-line);   color: #b6d9ff; }
body.ui3 .note--warn   { background: var(--warn-soft);   border-color: var(--warn-line);   color: #ffd2a6; }
body.ui3 .note--danger { background: var(--danger-soft); border-color: var(--danger-line); color: #ffb8c4; }
body.ui3 .note--ok     { background: var(--ok-soft);     border-color: var(--ok-line);     color: #a9f0cf; }
body.ui3 .note b { color: inherit; }
body.ui3 .msg, body.ui3 .bubble--in { background: var(--card-sunken); border-color: var(--line); color: var(--ink-soft); }
body.ui3 .bubble--out { background: rgba(231, 191, 107, .08); border-color: var(--accent-line); color: var(--ink); }

/* тосты: стеклянная пластина с золотой отметкой */
body.ui3 .toast {
  background: rgba(17, 23, 42, .92); backdrop-filter: blur(16px); color: var(--ink);
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-pop);
}
body.ui3 .toast__mark { color: var(--accent); }
body.ui3 .toast--error { background: rgba(62, 18, 30, .94); border-color: var(--danger-line); }
body.ui3 .toast--error .toast__mark { color: var(--danger); }

/* пустое состояние */
body.ui3 .empty__mark {
  background: radial-gradient(circle, rgba(231, 191, 107, .18), transparent 70%), var(--card-sunken);
  border-color: var(--accent-line); color: var(--accent); border-radius: 50%;
  box-shadow: 0 0 30px -6px rgba(231, 191, 107, .45);
}

/* ============================================================== графики == */
body.ui3 .chart .grid-line { stroke: var(--line); }
body.ui3 .chart .axis-text { fill: var(--faint); font-family: var(--mono); }
body.ui3 .chart .dot-marker { stroke: var(--card); }
body.ui3 .chart .series-area { opacity: .2; }
body.ui3 .chart .series-line { filter: drop-shadow(0 0 6px rgba(231, 191, 107, .35)); }
body.ui3 .bar-track, body.ui3 .usage__track, body.ui3 .progress {
  background: var(--fill); border-color: var(--line);
}
body.ui3 .bar-fill, body.ui3 .usage__fill, body.ui3 .progress__fill, body.ui3 .crm-bars__f {
  background: linear-gradient(90deg, #b88a3a, var(--accent) 70%, #ffe3a6);
  box-shadow: 0 0 12px rgba(231, 191, 107, .45);
}
body.ui3 .bar-fill--muted { background: var(--line-strong); box-shadow: none; }
body.ui3 .bar-fill--warn, body.ui3 .usage__fill--warn { background: var(--warn); box-shadow: 0 0 10px rgba(245, 166, 91, .4); }
body.ui3 .usage__fill--danger { background: var(--danger); box-shadow: 0 0 10px rgba(255, 111, 134, .4); }
body.ui3 .crm-bars__t { background: var(--fill); }
body.ui3 .crm-bars__f--deal { background: repeating-linear-gradient(135deg, #2b3456 0 4px, #141a30 4px 8px); box-shadow: none; }
body.ui3 .funnel__step { border-bottom-color: var(--line); }
body.ui3 .funnel__bar {
  background: linear-gradient(90deg, rgba(231, 191, 107, .32), rgba(231, 191, 107, .12));
  border-color: var(--accent-line);
}
body.ui3 .funnel__bar--na {
  background: repeating-linear-gradient(135deg, #10162a, #10162a 5px, #0b1020 5px, #0b1020 10px);
  border-color: var(--line);
}
body.ui3 .funnel__num { font-family: var(--font-display); font-weight: 500; }
body.ui3 .signal i, body.ui3 .sig i, body.ui3 .signalbars i { background: var(--line-strong); }
body.ui3 .signal i.on, body.ui3 .sig i.on, body.ui3 .signalbars i.is-on { background: var(--ok); box-shadow: 0 0 6px rgba(69, 216, 157, .6); }
body.ui3 .skeleton {
  background: linear-gradient(90deg, #10162a 25%, #1a2140 37%, #10162a 63%);
  background-size: 400% 100%;
}

/* ============================================================== разное === */
body.ui3 details.collapse > summary { color: var(--ink); }
body.ui3 details.collapse > summary::after { color: var(--accent); }
body.ui3 .tabs { border-bottom-color: var(--line); }
body.ui3 .tabs a { color: var(--muted); }
body.ui3 .tabs a:hover { color: var(--ink); }
body.ui3 .tabs a.is-active { color: var(--ink); border-bottom-color: var(--accent);
  text-shadow: 0 0 18px rgba(231, 191, 107, .35); }
body.ui3 .tabs .count { color: var(--faint); font-family: var(--mono); font-size: 11px; }
body.ui3 .pill { background: var(--fill); border-color: var(--line-strong); color: var(--muted); }
body.ui3 .pill:hover { border-color: var(--hover-line); color: var(--ink); }
body.ui3 .pill.is-active {
  background: rgba(231, 191, 107, .12); border-color: var(--accent-line); color: var(--accent);
  box-shadow: 0 0 18px -6px rgba(231, 191, 107, .5);
}
body.ui3 .tabbar { border-bottom-color: var(--line); }
body.ui3 .tabx { color: var(--muted); }
body.ui3 .tabx:hover { background: var(--fill-2); color: var(--ink); }
body.ui3 .tabx.is-active { background: rgba(231, 191, 107, .12); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-line); }
body.ui3 .tabx.is-active i { color: var(--accent); opacity: .75; }
body.ui3 .tabx--warn i { color: var(--danger); }
body.ui3 .seg { background: var(--card-sunken); border-color: var(--line); }
body.ui3 .seg button { background: transparent; color: var(--muted); }
body.ui3 .seg button.is-active { background: rgba(231, 191, 107, .14); color: var(--accent); }
body.ui3 .avatar { background: rgba(231, 191, 107, .12); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-line); }
body.ui3 .kv dt { color: var(--muted); }
body.ui3 .kv dd { color: var(--ink-soft); }
body.ui3 .crm-dl dt { color: var(--muted); }
body.ui3 .chain__link { background: var(--fill); border-color: var(--line); color: var(--muted); }
body.ui3 .chain__link--node { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
body.ui3 .step__num, body.ui3 .wiz__num {
  background: var(--card-sunken); color: var(--muted); border: 1px solid var(--line-strong);
  font-family: var(--mono);
}
body.ui3 .step__num { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
body.ui3 .wiz__item { border-bottom-color: var(--line); }
body.ui3 .wiz__item--done .wiz__num { background: var(--accent); color: var(--on-accent); border-color: var(--accent);
  box-shadow: 0 0 14px -2px rgba(231, 191, 107, .6); }
body.ui3 .wiz__item--next .wiz__num { border-color: var(--accent); color: var(--accent); }
body.ui3 .wiz__item--blocked .wiz__num { background: var(--warn-soft); color: var(--warn); border-color: var(--warn); }
body.ui3 .choice { background: var(--fill); border-color: var(--line); }
body.ui3 .choice:hover { border-color: var(--line-strong); }
body.ui3 .choice:has(input:checked) { background: var(--accent-soft); border-color: var(--accent);
  box-shadow: 0 0 22px -10px rgba(231, 191, 107, .7); }
body.ui3 .checks label { color: var(--ink-soft); }
body.ui3 .phone { background: var(--card-sunken); border-color: var(--line-strong); }
body.ui3 .phone__head { border-bottom-color: var(--line); }
body.ui3 .varchip { background: var(--fill); border-color: var(--line-strong); color: var(--muted); }
body.ui3 .varchip:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); }
body.ui3 .flash-insert { animation-name: ui3-flash; }
@keyframes ui3-flash { 0% { background: rgba(231, 191, 107, .2); } 100% { background: var(--card-sunken); } }
body.ui3 .checkbox { background: var(--card-sunken); border-color: var(--line-strong); }
body.ui3 .is-done .checkbox { background: var(--accent); color: var(--on-accent); border-color: var(--accent); }
body.ui3 .checklist__item, body.ui3 .labtodo__item, body.ui3 .asset, body.ui3 .authlist__item,
body.ui3 .notif__item, body.ui3 .fulist__item, body.ui3 .minilist li, body.ui3 .attnlist li,
body.ui3 .notelist li, body.ui3 .plain li, body.ui3 .fu li, body.ui3 .preflight tr,
body.ui3 .crm-tl { border-bottom-color: var(--line); }
body.ui3 .minilist a:hover .minilist__body b,
body.ui3 .attnlist a:hover .attnlist__who b { color: var(--accent); }
body.ui3 .crm-nav { border-bottom-color: var(--line); }
body.ui3 .crm-nav a { color: var(--ink-soft); }
body.ui3 .crm-nav a:hover { background: var(--fill-2); }
body.ui3 .crm-nav a.is-active { background: rgba(231, 191, 107, .12); color: var(--accent);
  box-shadow: inset 0 0 0 1px var(--accent-line); }
body.ui3 .crm-tabs { border-bottom-color: var(--line); }
body.ui3 .crm-tabs a.is-active { border-bottom-color: var(--accent); color: var(--ink); }
body.ui3 .crm-seg { border-color: var(--line); }
body.ui3 .crm-seg a.is-active { background: rgba(231, 191, 107, .14); color: var(--accent); }
body.ui3 .crm-chip { background: var(--fill); border-color: var(--line); color: var(--ink-soft); }
body.ui3 .crm-filters > summary { color: var(--ink); }
body.ui3 .crm-filters > summary::before { color: var(--accent); }

/* Светлые вставки базового слоя: перекрашиваем в тон ночи. */
body.ui3 .dnc { background: var(--danger-soft); border-color: var(--danger-line); }
body.ui3 .attn, body.ui3 .tl--note .notebox { background: var(--warn-soft); color: var(--ink-soft); }
body.ui3 .notebox-form textarea { background: var(--card-sunken); }
body.ui3 .summary { background: var(--fill); border-color: var(--line); }
body.ui3 .summary--hint { background: var(--accent-soft); border-color: var(--accent-line); }
body.ui3 .dealcard { background: var(--accent-soft); border-color: var(--accent-line); }
body.ui3 .dealcard__amt { font-family: var(--font-display); font-weight: 500; }
body.ui3 .owner, body.ui3 .side-next, body.ui3 .personacard, body.ui3 .asset--net {
  background: var(--fill); border-color: var(--line);
}
body.ui3 .asset--ok { border-color: var(--accent-line); }
body.ui3 .asset--error { background: var(--danger-soft); border-color: var(--danger-line); }
body.ui3 .asset--warning { background: var(--warn-soft); border-color: var(--warn-line); }
body.ui3 .is-ours .authlist__mark { background: var(--accent); color: var(--on-accent); }
body.ui3 .is-foreign .authlist__mark { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
body.ui3 .blockers__item { background: var(--fill); border-left-color: var(--line-strong); }
body.ui3 .blockers__item--blocking { background: var(--danger-soft); border-left-color: var(--danger); }
body.ui3 .blockers__item--warning { background: var(--warn-soft); border-left-color: var(--warn); }
body.ui3 .avatarcard { background: var(--card); border-color: var(--line); }
body.ui3 .avatarcard--pending_approval { border-color: var(--warn-line); }
body.ui3 .avatarcard--assigned { border-color: var(--accent-line); }
body.ui3 .personacard__blank { background: var(--line); color: var(--muted); }
body.ui3 .modem { background: var(--card); border-color: var(--line); }
body.ui3 .modem::before { background: var(--line-strong); }
body.ui3 .modem--ready::before { background: var(--ok); box-shadow: 0 0 10px var(--ok); }
body.ui3 .modem--warn::before { background: var(--warn); }
body.ui3 .modem--error::before { background: var(--danger); }
/* QR остаётся на белом: камера телефона читает только контраст. */
body.ui3 .qrbox { background: #fff; border-color: var(--line-strong); }
body.ui3 .crmcard { background: var(--card-sunken); border-color: var(--line); }
body.ui3 .crmcard__money { background: var(--card); border-color: var(--line); }
body.ui3 .assignee, body.ui3 .own { background: var(--card); border-color: var(--line); }
body.ui3 .assignee--none { background: var(--warn-soft); border-color: var(--warn-line); }
body.ui3 .own--shared { background: var(--accent-soft); border-color: var(--accent-line); }
body.ui3 .bulkbar { background: var(--accent-soft); border-color: var(--accent-line); }
body.ui3 .draft { background: var(--card-sunken); border-color: var(--accent); }
body.ui3 .timeline::before { background: var(--line-strong); }
body.ui3 .tl::before { background: var(--card); border-color: var(--line-strong); }
body.ui3 .tl--outbound::before { border-color: var(--accent); box-shadow: 0 0 8px rgba(231, 191, 107, .5); }
body.ui3 .tl--inbound::before { border-color: var(--warn); background: var(--warn); }
body.ui3 .tl--suppression::before { border-color: var(--danger); background: var(--danger); }
body.ui3 .tl--stage::before, body.ui3 .tl--campaign::before { border-color: var(--info); }
body.ui3 .sysline__dot { background: var(--line-strong); }

/* ======================================= «Личности» — свой стиль страницы */
body.ui3 .idn h1 { font: 500 26px/1.15 var(--font-display); }
body.ui3 .idn__sub, body.ui3 .kpi__l, body.ui3 .meta, body.ui3 .note-card { color: var(--muted); }
body.ui3 .kpi__card, body.ui3 .tbl-wrap {
  background: linear-gradient(180deg, rgba(255, 255, 255, .022), transparent 120px), var(--card);
  border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
body.ui3 .kpi__n { font-family: var(--font-display); font-weight: 500; color: var(--ink); }
body.ui3 .kpi__n small, body.ui3 .sec-title .cnt, body.ui3 .who__uid { color: var(--faint); }
body.ui3 .kpi__l { font: 500 10px/1.4 var(--mono); letter-spacing: .1em; }
body.ui3 .kpi__card--ok .kpi__n { color: var(--ok); }
body.ui3 .kpi__card--warn .kpi__n { color: var(--warn); }
body.ui3 .kpi__card--bad .kpi__n, body.ui3 .mm, body.ui3 .uname--none { color: var(--danger); }
body.ui3 .idn-tbl th { color: var(--faint); border-bottom-color: var(--line-strong);
  font: 500 10px/1.4 var(--mono); letter-spacing: .1em; }
body.ui3 .idn-tbl td { border-bottom-color: var(--line); color: var(--ink-soft); }
body.ui3 .idn-tbl tr.mismatch td { background: var(--danger-soft); }
body.ui3 .ava { background: #1a2140; box-shadow: 0 0 0 1px var(--line-strong); }
body.ui3 .ava--ph { color: var(--muted); }
body.ui3 .who__name { color: var(--ink); }
body.ui3 .who__name a:hover, body.ui3 .uname { color: var(--accent); }
body.ui3 .meta b, body.ui3 .note-card b { color: var(--ink-soft); }
body.ui3 .f--ok { background: var(--ok-soft); color: var(--ok); }
body.ui3 .f--no { background: var(--danger-soft); color: var(--danger); }
body.ui3 .f--warn { background: var(--warn-soft); color: var(--warn); }
body.ui3 .f--muted, body.ui3 .pill--muted { background: var(--fill-2); color: var(--muted); }
body.ui3 .dot--on { background: var(--ok); box-shadow: 0 0 6px var(--ok); }
body.ui3 .dot--off { background: #3a4366; }
body.ui3 .bar { background: var(--fill-2); }
body.ui3 .bar > i { background: var(--accent); }
body.ui3 .bar--warn > i { background: var(--warn); }
body.ui3 .note-card { background: var(--fill); border-color: var(--line); }
body.ui3 details.arch summary { color: var(--muted); }

/* ============================================================== доступ === */
@media (prefers-reduced-motion: reduce) {
  body.ui3::before, body.ui3 .brand::after, body.ui3-shell .brand::after,
  body.ui3 main > * { animation: none !important; }
  #ui3-sky { display: none; }
}
@media (max-width: 720px) {
  body.ui3 h1, body.ui3 .page-head h1 { font-size: 22px; }
  body.ui3 .metrics--primary .metric__value { font-size: 30px; }
}

/* =================================================== меню: группы ====== */
/* Семнадцать пунктов в одну строку не помещались. Частое — на виду,
   остальное — в группах; адреса и порядок внутри те же. */
body.ui3 .nav--grouped { flex-wrap: nowrap; gap: 2px; align-items: center; }
body.ui3 .navg { position: relative; }
body.ui3 .navg__btn {
  display: inline-flex; align-items: center; gap: 7px; padding: 7px 13px;
  border: 0; border-radius: var(--r-pill); background: transparent; box-shadow: none;
  color: var(--muted); font: 500 var(--t-meta)/1.4 var(--font); cursor: pointer;
}
body.ui3 .navg__btn i {
  width: 6px; height: 6px; margin-top: -3px; opacity: .6;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform var(--fast);
}
body.ui3 .navg.is-open .navg__btn i { transform: rotate(225deg); margin-top: 3px; }
body.ui3 .navg:hover > .navg__btn, body.ui3 .navg.is-open > .navg__btn {
  color: var(--ink); background: var(--fill-2); border-color: transparent;
}
body.ui3 .navg.is-active > .navg__btn {
  color: var(--accent); font-weight: 600; background: rgba(231, 191, 107, .09);
  box-shadow: inset 0 0 0 1px rgba(231, 191, 107, .28), 0 0 22px -6px rgba(231, 191, 107, .45);
}
body.ui3 .navg__menu {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 70; min-width: 220px;
  display: none; flex-direction: column; gap: 2px; padding: 6px;
  background: rgba(13, 17, 34, .97); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  border: 1px solid var(--line-strong); border-radius: 14px; box-shadow: var(--shadow-pop);
  animation: ui3-drop .16s var(--ease-out) both;
}
body.ui3 .navg__menu::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
@keyframes ui3-drop { from { opacity: 0; transform: translateY(-4px); } }
@media (hover: hover) { body.ui3 .navg:hover > .navg__menu { display: flex; } }
body.ui3 .navg.is-open > .navg__menu, body.ui3 .navg:focus-within > .navg__menu { display: flex; }
body.ui3 .navg__menu a { border-radius: 10px; padding: 9px 12px; white-space: nowrap; }
body.ui3 .navg__menu a.is-active { box-shadow: inset 2px 0 0 var(--accent); }

body.ui3 .theme-toggle {
  width: 32px; height: 32px; padding: 0; justify-content: center; border-radius: 50%;
  background: transparent; border: 1px solid var(--line-strong); color: var(--muted);
  font-size: 15px; line-height: 1;
}
body.ui3 .theme-toggle:hover { color: var(--accent); border-color: var(--accent-line); background: rgba(231, 191, 107, .08); }

@media (max-width: 720px) {
  body.ui3 .nav--grouped { overflow: visible; flex-wrap: wrap; }
  body.ui3 .navg.is-open > .navg__menu, body.ui3 .navg:focus-within > .navg__menu {
    position: fixed; left: 16px; right: 16px; top: var(--navg-top, 110px); min-width: 0;
  }
}

/* =========================================== Входящие и Исходящие ======= */
body.ui3 .inbox__list, body.ui3 .inbox__thread, body.ui3 .inbox__side {
  background: var(--card); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm);
}
body.ui3 .conv { border-radius: 10px; }
body.ui3 .conv:hover { background: var(--fill-2); }
body.ui3 .conv.is-active { background: var(--accent-soft); box-shadow: inset 2px 0 0 var(--accent); }
body.ui3 .conv__name { color: var(--ink); }
body.ui3 .unread-dot { background: var(--accent); box-shadow: 0 0 8px rgba(231, 191, 107, calc(.7 * var(--glow))); }
body.ui3 .conv--sla { box-shadow: inset 3px 0 0 var(--danger); }
body.ui3 .ibx-chip { background: var(--fill); border-color: var(--line); color: var(--muted); }
body.ui3 .ibx-chip:hover { border-color: var(--accent-line); color: var(--ink); }
body.ui3 .ibx-chip.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
body.ui3 .ibx-filters__grid { background: var(--card); border-color: var(--line); border-radius: var(--r); }
body.ui3 .thread__head, body.ui3 .qa, body.ui3 .pager { border-color: var(--line); }
body.ui3 .qa__menu > summary { background: var(--fill); border-color: var(--line-strong); color: var(--ink); }
body.ui3 .qa__menu[open] > summary { background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line); }
body.ui3 .qa__pop { background: var(--card); border-color: var(--line-strong); box-shadow: var(--shadow-pop); }
body.ui3 .chip-radio { border-color: var(--line); }
body.ui3 .chip-radio:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
body.ui3 .crmcard__stop { background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-line); }
body.ui3 .tabbar__sep { background: var(--line); }
body.ui3 .ibx-panels { background: var(--paper); border-bottom-color: var(--line); }
body.ui3 .ibx-panels button { background: var(--card); border-color: var(--line); color: var(--ink-soft); }
body.ui3 .inbox[data-panel="list"] .ibx-panels [data-show="list"],
body.ui3 .inbox[data-panel="thread"] .ibx-panels [data-show="thread"],
body.ui3 .inbox[data-panel="side"] .ibx-panels [data-show="side"] {
  background: var(--accent-soft); color: var(--accent); border-color: var(--accent-line);
}
body.ui3 .ibx-back { color: var(--accent); background: none; border: 0; }

body.ui3 .ob-kpi { background: var(--line); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
body.ui3 .ob-kpi__cell { background: var(--card); }
body.ui3 a.ob-kpi__cell:hover { background: var(--fill-2); }
body.ui3 .ob-kpi__cell--total { background: linear-gradient(180deg, var(--accent-soft), var(--card)); }
body.ui3 .ob-kpi__cell--total::before { background: linear-gradient(90deg, var(--accent), #ffe3a6); }
body.ui3 .ob-kpi__n { font: 500 24px/1 var(--font-display); letter-spacing: -.02em; }
body.ui3 .ob-kpi__l, body.ui3 .ob-kpi__cap { font-family: var(--mono); font-size: 9.5px; letter-spacing: .1em; color: var(--faint); }
body.ui3 .ob-tabs { background: var(--card-sunken); border-color: var(--line); box-shadow: none; }
body.ui3 .ob-tab { color: var(--muted); }
body.ui3 .ob-tab:hover { background: var(--fill-2); color: var(--ink); }
body.ui3 .ob-tab.is-active { background: var(--card); color: var(--ink); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--line); }
body.ui3 .ob-tab__n { background: var(--fill-2); color: var(--muted); }
body.ui3 .ob-tab.is-active .ob-tab__n { background: var(--accent-soft); color: var(--accent); }
body.ui3 .ob-tab__dot--live { background: var(--ok); box-shadow: 0 0 0 3px var(--ok-line); }
body.ui3 .ob-tab__dot--farm { background: var(--faint); box-shadow: 0 0 0 3px var(--line); }
body.ui3 .ob-win { background: var(--card); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
body.ui3 .ob-win__table thead th { font-family: var(--mono); font-size: 9.5px; letter-spacing: .08em; }
body.ui3 .ob-win__table td { color: var(--ink); }
body.ui3 .ob-win__row--total th, body.ui3 .ob-win__row--total td { border-top-color: var(--line); }
body.ui3 .ob-table-wrap { background: var(--card); border-color: var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-sm); }
body.ui3 .ob-table thead th {
  background: var(--card-sunken); color: var(--faint); border-bottom-color: var(--line-strong);
  font: 500 10px/1.4 var(--mono); letter-spacing: .1em;
}
body.ui3 .ob-table tbody td { border-bottom-color: var(--line); }
body.ui3 .ob-table tbody tr:hover { background: var(--accent-soft); }
body.ui3 .ob-client { color: var(--ink); }
body.ui3 .ob-client:hover { color: var(--accent); }
body.ui3 .ob-stf { background: var(--card); border-color: var(--line); color: var(--ink-soft); }
body.ui3 .ob-stf:hover { border-color: var(--line-strong); color: var(--ink); }
body.ui3 .ob-stf.is-active { background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent); }
body.ui3 .ob-st { background: var(--fill); border-color: var(--line); color: var(--muted); }
body.ui3 .ob-st--sent      { background: var(--info-soft);   color: var(--info);   border-color: var(--info-line); }
body.ui3 .ob-st--delivered { background: var(--ok-soft);     color: var(--ok);     border-color: var(--ok-line); }
body.ui3 .ob-st--sending, body.ui3 .ob-st--blocked_sender_pause { background: var(--warn-soft); color: var(--warn); border-color: var(--warn-line); }
body.ui3 .ob-st--failed, body.ui3 .ob-st--blocked { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-line); }
body.ui3 .ob-why { background: var(--card-sunken); border-left-color: var(--warn); }
body.ui3 .ob-win__table td a { border-bottom-color: var(--line-strong); }

/* ======================================================== светлая тема == */
/* Не «всё белое»: шапка — ночная, как у amoCRM, сцена фермы — тоже ночь,
   рабочее поле светлое, на холодном лавандовом фоне, с тёмным золотом. */
body.ui3.ui3-light {
  color-scheme: light;
  --paper:        #eef0f6;
  --card:         #ffffff;
  --card-sunken:  #f6f7fb;
  --ink:          #141726;
  --ink-soft:     #3b4058;
  --muted:        #656b88;
  --faint:        #9298b2;
  --line:         #e3e6ef;
  --line-strong:  #d2d6e3;

  --accent:       #a9781f;
  --accent-hover: #8e6418;
  --accent-soft:  rgba(184, 134, 47, .10);
  --accent-line:  rgba(184, 134, 47, .36);
  --link:         #4752c4;
  --link-hover:   #2d37a3;

  --ok:           #138a57;
  --ok-soft:      rgba(19, 138, 87, .09);
  --ok-line:      rgba(19, 138, 87, .28);
  --warn:         #b8620f;
  --warn-soft:    rgba(196, 106, 18, .10);
  --warn-line:    rgba(196, 106, 18, .32);
  --danger:       #cf3651;
  --danger-soft:  rgba(207, 54, 81, .08);
  --danger-line:  rgba(207, 54, 81, .30);
  --info:         #2a6fc0;
  --info-soft:    rgba(42, 111, 192, .09);
  --info-line:    rgba(42, 111, 192, .28);

  --fill:   rgba(22, 26, 48, .035);
  --fill-2: rgba(22, 26, 48, .06);
  --fill-3: rgba(22, 26, 48, .085);
  --hover-line: #b4b9cf;
  --input-focus: #ffffff;
  --glow: .35;

  --shadow-sm:  0 1px 2px rgba(20, 24, 40, .05), 0 10px 26px -18px rgba(20, 24, 40, .22);
  --shadow-md:  0 2px 4px rgba(20, 24, 40, .06), 0 16px 34px -20px rgba(20, 24, 40, .28);
  --shadow-pop: 0 20px 50px -16px rgba(20, 24, 40, .32), 0 0 0 1px var(--line-strong);
  --ring: 0 0 0 3px rgba(184, 134, 47, .22);
}
body.ui3.ui3-light::before {
  background:
    radial-gradient(38% 30% at 14% 8%, rgba(138, 124, 255, .13), transparent 70%),
    radial-gradient(34% 28% at 86% 4%, rgba(231, 191, 107, .16), transparent 70%),
    radial-gradient(40% 34% at 72% 96%, rgba(47, 154, 230, .08), transparent 70%);
}
body.ui3.ui3-light::after { opacity: .18; }
body.ui3.ui3-light #ui3-sky { display: none; }
body.ui3.ui3-light { scrollbar-color: #c9cede transparent; }
body.ui3.ui3-light ::-webkit-scrollbar-thumb { background-color: #cfd3e1; }
body.ui3.ui3-light ::selection { background: rgba(184, 134, 47, .25); color: inherit; }

/* шапка и рельс — сплошная ночь, без просвечивания светлого поля */
/* шапка и рельс в светлой теме — см. «ПОЛНАЯ СВЕТЛАЯ ТЕМА» в конце файла */
body.ui3.ui3-light .page-head::after {
  background: linear-gradient(90deg, rgba(184, 134, 47, .6), rgba(138, 124, 255, .25) 35%, var(--line) 60%, transparent);
}
body.ui3.ui3-light .card, body.ui3.ui3-light .metrics, body.ui3.ui3-light .tile,
body.ui3.ui3-light .crm-kpi, body.ui3.ui3-light .crm-table, body.ui3.ui3-light .crm-filters,
body.ui3.ui3-light .crm-money3, body.ui3.ui3-light details.collapse, body.ui3.ui3-light .an-kpi {
  background:
    radial-gradient(560px circle at var(--mx, -900px) var(--my, -900px), rgba(184, 134, 47, .07), transparent 42%),
    var(--card);
}
body.ui3.ui3-light .card--accent { background: linear-gradient(180deg, rgba(184, 134, 47, .07), var(--card) 160px); }
body.ui3.ui3-light .metric__value--accent, body.ui3.ui3-light .an-kpi__i--hero b,
body.ui3.ui3-light .tabs a.is-active { text-shadow: none; }
body.ui3.ui3-light .chart .series-line { filter: none; }
body.ui3.ui3-light .bar-fill, body.ui3.ui3-light .usage__fill, body.ui3.ui3-light .progress__fill,
body.ui3.ui3-light .crm-bars__f { background: linear-gradient(90deg, #c99a45, #a9781f); box-shadow: none; }
body.ui3.ui3-light .crm-bars__f--deal { background: repeating-linear-gradient(135deg, #d2d6e3 0 4px, #f2f3f8 4px 8px); }
body.ui3.ui3-light .funnel__bar--na { background: repeating-linear-gradient(135deg, #f2f3f8, #f2f3f8 5px, #e7e9f1 5px, #e7e9f1 10px); }
body.ui3.ui3-light .skeleton { background: linear-gradient(90deg, #eef0f6 25%, #e2e5ee 37%, #eef0f6 63%); background-size: 400% 100%; }
body.ui3.ui3-light .note--info   { color: var(--info); }
body.ui3.ui3-light .note--warn   { color: var(--warn); }
body.ui3.ui3-light .note--danger { color: var(--danger); }
body.ui3.ui3-light .note--ok     { color: var(--ok); }
body.ui3.ui3-light .tag--parser { background: rgba(110, 92, 220, .09); color: #5b48c4; border-color: rgba(110, 92, 220, .3); }
body.ui3.ui3-light .tag--vip { background: rgba(184, 134, 47, .12); color: #8a5f12; border-color: rgba(184, 134, 47, .4); }
body.ui3.ui3-light .tag--st-dnc { background: #141726; color: #fff; border-color: #141726; }
body.ui3.ui3-light .btn--danger, body.ui3.ui3-light button.danger { color: var(--danger); background: var(--card); }
body.ui3.ui3-light .btn--danger:hover, body.ui3.ui3-light button.danger:hover { color: var(--danger); background: var(--danger-soft); }
body.ui3.ui3-light .btn--danger-ghost { color: var(--danger); }
body.ui3.ui3-light .ava { background: var(--card-sunken); }
body.ui3.ui3-light .dot--off { background: var(--line-strong); }
body.ui3.ui3-light .signal i.on, body.ui3.ui3-light .sig i.on, body.ui3.ui3-light .signalbars i.is-on { box-shadow: none; }
body.ui3.ui3-light .wiz__item--done .wiz__num { box-shadow: none; }
body.ui3.ui3-light .empty__mark { box-shadow: none; }


/* Ферма в светлой теме: плитки и пульс — светлые карточки, сцена — ночь. */
body.ui3.ui3-light .fm-upd { color: var(--muted); }
body.ui3.ui3-light .fm-tally .fm-t { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); }
body.ui3.ui3-light .fm-tally .fm-t:hover { background: var(--card); border-color: var(--line-strong); }
body.ui3.ui3-light .fm-tally .fm-t b { text-shadow: none; }
body.ui3.ui3-light .fm-tally .fm-t span { color: var(--muted); }
body.ui3.ui3-light .fm-tally .fm-t--all { color: var(--accent); }
body.ui3.ui3-light .fm-tally .fm-t--ready { color: var(--ok); }
body.ui3.ui3-light .fm-tally .fm-t--reply { color: var(--info); }
body.ui3.ui3-light .fm-tally .fm-t--warn { color: var(--warn); }
body.ui3.ui3-light .fm-tally .fm-t--lost, body.ui3.ui3-light .fm-tally .fm-t--bad { color: var(--danger); }
body.ui3.ui3-light .fm-tally .fm-t--noad { color: #6c55d8; }
body.ui3.ui3-light .fm-tally .fm-t--idle, body.ui3.ui3-light .fm-tally .fm-t--lab { color: var(--muted); }
body.ui3.ui3-light .fm-pulse { background: var(--card); border-color: var(--line); box-shadow: var(--shadow-sm); }
body.ui3.ui3-light .fm-pulse-ttl, body.ui3.ui3-light .fm-pulse-num { color: var(--muted); }
body.ui3.ui3-light .fm-pulse-num b { color: var(--accent); text-shadow: none; }
body.ui3.ui3-light .fm-bars i { background: linear-gradient(180deg, rgba(184, 134, 47, .55), rgba(184, 134, 47, .15)); }
body.ui3.ui3-light .fm-bars i.hot { background: linear-gradient(180deg, #d9ab55, #a9781f); box-shadow: none; }
body.ui3.ui3-light .fm-axis { color: var(--faint); }
body.ui3.ui3-light .fm-lists { color: var(--muted); }
body.ui3.ui3-light .fm-lists a { color: var(--link); border-bottom-color: var(--line-strong); }
body.ui3.ui3-light .fm-ch { border-bottom-color: var(--line); }
body.ui3.ui3-light .fm-panel__note { color: var(--muted); }
body.ui3.ui3-light .fm-members span { background: var(--ok-soft); color: var(--ok); border-color: var(--ok-line); }
body.ui3.ui3-light .fm-ready__ch i { box-shadow: none; }

/* ============================================ ПОЛНАЯ СВЕТЛАЯ ТЕМА (04.10) */
/* До 04.10 шапка, рельс, тосты и сцена фермы оставались ночными и в светлом
   режиме. Владелец попросил полноценную светлую тему портала целиком. */
body.ui3.ui3-light .topbar {
  background: rgba(255, 255, 255, .86);
  backdrop-filter: saturate(1.4) blur(16px); -webkit-backdrop-filter: saturate(1.4) blur(16px);
  border-bottom: 1px solid var(--line); color: var(--ink);
  box-shadow: 0 1px 0 rgba(20, 24, 40, .03), 0 8px 24px -20px rgba(20, 24, 40, .35);
}
body.ui3.ui3-light .topbar::after {
  background: linear-gradient(90deg, transparent, rgba(184, 134, 47, .5) 30%, rgba(110, 92, 220, .35) 70%, transparent);
  opacity: .45;
}
body.ui3.ui3-light .brand { color: var(--ink); }
body.ui3.ui3-light .brand::before {
  background: radial-gradient(circle at 50% 50%, #f1c46f 0 2.5px, transparent 3.5px);
  box-shadow: inset 0 0 0 1.5px rgba(169, 120, 31, .8), 0 0 12px rgba(184, 134, 47, .25);
}
body.ui3.ui3-light .brand::after { background: #6c5ad8; box-shadow: 0 0 6px rgba(108, 90, 216, .6); }
body.ui3.ui3-light .nav a:hover { background: var(--fill-2); }
body.ui3.ui3-light .nav a.is-active, body.ui3.ui3-light .navg.is-active > .navg__btn {
  color: var(--accent); background: rgba(184, 134, 47, .10);
  box-shadow: inset 0 0 0 1px rgba(184, 134, 47, .32);
}
body.ui3.ui3-light .nav a.is-active:hover { color: var(--accent-hover); background: rgba(184, 134, 47, .14); }
body.ui3.ui3-light .nav .badge-count {
  background: var(--warn-soft); color: var(--warn); box-shadow: inset 0 0 0 1px var(--warn-line);
}
body.ui3.ui3-light .nav .badge-count--warn {
  background: var(--danger-soft); color: var(--danger); box-shadow: inset 0 0 0 1px var(--danger-line);
}
body.ui3.ui3-light .tag--demo { background: rgba(110, 92, 220, .10); color: #5b48c4; border-color: rgba(110, 92, 220, .3); }
body.ui3.ui3-light .bell--on { color: var(--accent); }
body.ui3.ui3-light .navg__menu {
  background: rgba(255, 255, 255, .98); border-color: var(--line-strong);
  box-shadow: 0 18px 44px -16px rgba(20, 24, 40, .35), 0 0 0 1px var(--line);
}
body.ui3.ui3-light .rail {
  background: rgba(246, 247, 251, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line); color: var(--muted);
}
body.ui3.ui3-light .rail--off .rail__state { color: var(--ink-soft); }
body.ui3.ui3-light .rail--on .rail__state { color: var(--danger); }
body.ui3.ui3-light .lamp { background: #b4b9cf; box-shadow: 0 0 0 3px rgba(180, 185, 207, .3); }
body.ui3.ui3-light .rail--on .lamp { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
body.ui3.ui3-light .rail .rail__state--reply .lamp { box-shadow: 0 0 0 3px var(--ok-soft); }
body.ui3.ui3-light .rail__pop {
  background: #fff; border-color: var(--line-strong); color: var(--ink-soft);
  box-shadow: 0 18px 44px -16px rgba(20, 24, 40, .35);
}
body.ui3.ui3-light .toast {
  background: rgba(255, 255, 255, .97); color: var(--ink); border: 1px solid var(--line-strong);
  box-shadow: 0 16px 40px -14px rgba(20, 24, 40, .35);
}
body.ui3.ui3-light .toast__mark { color: var(--accent); }
body.ui3.ui3-light .toast--error { background: #fff4f6; border-color: var(--danger-line); }
body.ui3.ui3-light .toast--error .toast__mark { color: var(--danger); }
body.ui3.ui3-light .theme-toggle { border-color: var(--line-strong); color: var(--muted); }


/* Планшет и узкий ноутбук: шапка в одну строку не помещалась (меню с
   подписями «· 12 свободных» шире 1100px), и вся страница уезжала вбок.
   До 1200px меню встаёт второй строкой шапки и само переносится. */
@media (max-width: 1200px) {
  body.ui3 .topbar__inner { flex-wrap: wrap; gap: 6px 12px; padding-top: 6px; padding-bottom: 6px; }
  body.ui3 .topbar__right { margin-left: auto; }
  body.ui3 .nav--grouped { order: 3; flex: 1 0 100%; flex-wrap: wrap; overflow: visible; }
  /* Шапка стала выше 56px — полоса состояния больше не липнет под ней, а то
     заезжала под шапку. */
  body.ui3 .rail, body.ui3-shell .rail { position: relative; top: auto; }
}
/* Телефон: шапка в три строки занимала пятую часть экрана и не уходила при
   прокрутке. Здесь она прокручивается вместе со страницей. */
@media (max-width: 720px) {
  body.ui3 .topbar, body.ui3-shell .topbar { position: relative; }
}