/* ============================================================
   ЗИП. Редизайн: монохром с красным акцентом. Этап 1.
   Подключается ПОСЛЕ app.css, поэтому переопределяет его токены.
   Откат = удалить одну строку <link> в index.html.

   ГРАНИЦЫ (решение Артура, 2026-08-04):
     - Liquid Glass НЕ трогаем: --nav-bg, --scrim, --frame остаются из app.css,
       прозрачности --field/--sec-bg/--hover/--line в тёмной теме сохранены,
       иначе стекло станет матовым.
     - Звезда-змейка на фоне остаётся как есть.
     - Убирается только диагональная сетка на фоне.
     - Свет (пятна) переводится на медленное дыхание.
   ============================================================ */

/* ---------- ШРИФТЫ ---------- */
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/sofia-sans-extra-condensed-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Sofia Sans Extra Condensed';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/sofia-sans-extra-condensed-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/montserrat-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/fonts/montserrat-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('/fonts/jetbrains-mono-cyrillic.woff2') format('woff2');
  unicode-range:U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 800;font-display:swap;
  src:url('/fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

/* ---------- ТОКЕНЫ. Светлая ---------- */
:root{
  /* шкалы */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-pill:999px;
  --dur-1:.15s; --dur-2:.28s; --dur-3:.45s;
  --spring:cubic-bezier(.34,1.4,.64,1);
  --ease:cubic-bezier(.4,0,.2,1);

  --f-head:'Sofia Sans Extra Condensed','Bounded',sans-serif;
  --f-text:'Montserrat',-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --f-num:'JetBrains Mono',ui-monospace,monospace;

  /* поверхности */
  --bg:#F4F4F2;
  --desk-bg:#E9E9E6;
  --card:#FFFFFF;
  --card-solid:#FFFFFF;
  --panel:#FFFFFF;
  --sec-bg:#EDEDEA;
  --hover:#F2F2F0;
  --field:#F6F6F4;
  --field-focus:#FFFFFF;
  --line:#E4E4E1;

  /* текст */
  --ink:#0D0E11;
  --muted:#5C5E64;
  --faint:#8A8C92;
  --nav-muted:#6E7076;
  --placeholder:#9A9CA3;
  --chev:#9A9CA3;

  /* акцент: заливка фирменная, текст темнее (контраст 4.38 против 5.88) */
  --red:#ED1C24;
  --red2:#C8102E;
  --red-txt:#C8102E;
  --redsoft:rgba(237,28,36,.10);

  /* главное действие чёрное */
  --btn:#111318;
  --btn2:#0D0E11;
  --btn-hover:#24262B;
  --btn-ink:#FFFFFF;
  --sel:#111318;
  --sel-ink:#FFFFFF;

  /* статусы: заливка и форма вместо цвета, красный только отказу */
  --b-new-bg:transparent;        --b-new-c:#0D0E11;  --b-new-line:#C9CAC6;
  --b-call-bg:#EDEDEA;           --b-call-c:#4A4C52;
  --b-deal-bg:#111318;           --b-deal-c:#FFFFFF;
  --b-no-bg:rgba(237,28,36,.10); --b-no-c:#C8102E;

  --ok:#0D0E11; --ok-bg:#EDEDEA; --ok-line:#C9CAC6;
  --danger-bg:rgba(237,28,36,.08); --danger-line:rgba(237,28,36,.35);

  --shadow:0 1px 2px rgba(13,14,17,.06);
  --shadow-lift:0 12px 32px rgba(13,14,17,.12);
  /* --nav-bg, --scrim, --frame НЕ трогаем: на них держится стекло и рамка */
}

/* ---------- ТОКЕНЫ. Тёмная ---------- */
html[data-theme="dark"]{
  --bg:#0A0A0C;
  --desk-bg:#121215;
  --card:#141519;
  --card-solid:#16171C;
  --panel:#101014;
  --sec-bg:rgba(255,255,255,.08);      /* прозрачность сохранена ради стекла */
  --hover:rgba(255,255,255,.07);
  --field:rgba(255,255,255,.06);
  --field-focus:rgba(255,255,255,.10);
  --line:rgba(255,255,255,.09);

  --ink:#F2F2F3;
  --muted:#9A9CA3;
  --faint:#6E7076;
  --nav-muted:#9A9CA3;
  --placeholder:#6B6F79;
  --chev:#5A5E68;

  --red:#ED1C24;
  --red2:#FF5A5F;
  --red-txt:#FF5A5F;                    /* светлее, иначе на тёмном контраст 4.16 */
  --redsoft:rgba(237,28,36,.16);

  --btn:#F2F2F3;                        /* в темноте главное действие светлое */
  --btn2:#DDDEE2;
  --btn-hover:#FFFFFF;
  --btn-ink:#0B0B0D;
  --sel:#F2F2F3;
  --sel-ink:#0B0B0D;

  --b-new-bg:transparent;               --b-new-c:#F2F2F3; --b-new-line:rgba(255,255,255,.22);
  --b-call-bg:rgba(255,255,255,.08);    --b-call-c:#BEC0C6;
  --b-deal-bg:#F2F2F3;                  --b-deal-c:#0B0B0D;
  --b-no-bg:rgba(255,90,95,.14);        --b-no-c:#FF5A5F;

  --ok:#F2F2F3; --ok-bg:rgba(255,255,255,.08); --ok-line:rgba(255,255,255,.18);
  --danger-bg:rgba(255,90,95,.12); --danger-line:rgba(255,90,95,.38);

  --shadow:0 1px 2px rgba(0,0,0,.5);
  --shadow-lift:0 14px 36px rgba(0,0,0,.6);
}

/* ---------- ТИПОГРАФИКА ----------
   Текст Montserrat, заголовки и числа узким Sofia. */
body{
  font-family:var(--f-text);
  letter-spacing:0;
}
/* Заголовки и крупные числа узким Sofia. Классы взяты из app.css,
   а не выдуманы: список собран разбором правил с кеглем 18px и выше. */
h1,h2,h3,
.logo-txt,.login-title,.desktop-brand-name,.panel-title,
.wel-hi,.greet .n,.desktop-home-head .greet .n,
.rolecard .val,.stat .v,.case-stage-name,.profile-name,.integration-title,
.crm-kpi b,.task-kpi b,.integration-kpi b,.user-kpi b,.meta-sum{
  font-family:var(--f-head);
  letter-spacing:.01em;
}
/* Sofia узкая: при том же кегле она читается мельче, поэтому
   крупным заголовкам добавляем веса, иначе теряют голос */
.logo-txt,.login-title,.desktop-brand-name,.panel-title,.stat .v,.wel-hi{
  font-weight:700;
}
/* числа в столбце не должны прыгать по ширине */
.stat .v,.crm-kpi b,.task-kpi b,.integration-kpi b,.user-kpi b,
.meta-sum,.perf-table td.num,.perf-table th.num{
  font-variant-numeric:tabular-nums;
}
/* в таблицах цифры моноширинные: колонки выравниваются сами */
.perf-table td.num{ font-family:var(--f-num); font-size:13px; }

/* ---------- КНОПКИ ----------
   ⚠️ порядок правил важен: .btn идёт ПЕРВЫМ, иначе его !important
   перебьёт вторичную и опасную кнопки. */
.btn{
  background:var(--btn) !important;
  color:var(--btn-ink) !important;
  box-shadow:var(--shadow) !important;
  border-radius:var(--r-md) !important;
  transition:background var(--dur-1) var(--ease), transform var(--dur-1) var(--spring) !important;
}
.btn:hover{ background:var(--btn-hover) !important; }
.btn:active{ transform:scale(.97) !important; }

.btn-secondary{
  background:var(--card) !important;
  color:var(--ink) !important;
  border:1px solid var(--line) !important;
}
.btn-danger{
  background:var(--danger-bg) !important;
  color:var(--red-txt) !important;
  border:1px solid var(--danger-line) !important;
}
.btn-more{
  background:var(--sec-bg) !important;
  color:var(--ink) !important;
  box-shadow:none !important;
}

/* выбранный фильтр чёрный, а не красный: красный остаётся сигналом */
.chip.on{
  background:var(--sel) !important;
  color:var(--sel-ink) !important;
  border-color:var(--sel) !important;
}

/* статус «новый» держится контуром */
.b-new{ border:1px solid var(--b-new-line); }

/* ---------- ФОН ----------
   Убираем диагональную сетку. Звезду не трогаем.
   Пятна переводим на медленное дыхание: разные периоды, картинка не зацикливается. */
.bg-deco::before{ display:none !important; }

.bg-deco i{ filter:blur(30px); mix-blend-mode:screen; }
.bg-deco .b1{ animation:zip-drift-1 34s var(--ease) infinite !important; }
.bg-deco .b2{ animation:zip-drift-2 44s var(--ease) infinite !important; }
.bg-deco .b3{ animation:zip-drift-3 52s var(--ease) infinite !important; }

html[data-theme="dark"] .bg-deco .b1{ background:radial-gradient(circle, rgba(237,28,36,.34), transparent 68%); }
html[data-theme="dark"] .bg-deco .b2{ background:radial-gradient(circle, rgba(255,90,95,.20), transparent 70%); }
html[data-theme="dark"] .bg-deco .b3{ background:radial-gradient(circle, rgba(158,12,36,.24), transparent 72%); }

html[data-theme="light"] .bg-deco i{ mix-blend-mode:normal; filter:blur(40px); }
html[data-theme="light"] .bg-deco .b1{ background:radial-gradient(circle, rgba(237,28,36,.10), transparent 70%); }
html[data-theme="light"] .bg-deco .b2{ background:radial-gradient(circle, rgba(237,28,36,.06), transparent 72%); }
html[data-theme="light"] .bg-deco .b3{ background:radial-gradient(circle, rgba(13,14,17,.05), transparent 74%); }

@keyframes zip-drift-1{0%,100%{transform:translate(0,0) scale(1)}33%{transform:translate(9vw,7vh) scale(1.14)}66%{transform:translate(-5vw,12vh) scale(.92)}}
@keyframes zip-drift-2{0%,100%{transform:translate(0,0) scale(1.05)}50%{transform:translate(-11vw,10vh) scale(.88)}}
@keyframes zip-drift-3{0%,100%{transform:translate(0,0) scale(1)}40%{transform:translate(8vw,-7vh) scale(1.18)}}

@media (prefers-reduced-motion:reduce){
  .bg-deco i{ animation:none !important; }
}