/* =========================================================================
   P2P Machine — дизайн-система v2.1
   Слой поверх UIkit 3.23. Подключать СТРОГО после uikit.min.css.

   Архитектура:
     :root      — светлая тема (публичный сайт, лендинг, документы)
     .pm-dark   — тёмная тема (личный кабинет, админка) — переопределяет токены
   Все правила ниже написаны через var(), поэтому одна и та же перекраска
   UIkit-компонентов работает в обеих темах автоматически.

   Правило проекта: инлайновый style="" в шаблоне допустим ТОЛЬКО для
   вычисляемой величины (ширина прогресс-бара, высота столбца графика,
   цвет аватара). Всё остальное — класс здесь.
   ========================================================================= */

/* ---------------------------------------------------------------- 1. Токены

   Палитра подобрана расчётом по WCAG 2.1, а не на глаз:
     · весь текст (включая мету 12px) — минимум 4.5:1 на ЛЮБОЙ своей подложке;
     · рамка поля ввода — 3:1 (критерий 1.4.11, рамка опознаёт компонент);
     · разделительная граница — ≈1.7:1 к поверхности в тёмной теме
       (ориентир GitHub dark: #30363D / #161B22 = 1.63) и ≈1.35:1 в светлой
       (в светлой теме выше физически не сделать, не превратив линию в чёрную).
   Серые взяты с одного холодного тона (hue 218), поэтому оттенки текста,
   границ и поверхностей не спорят друг с другом.                            */
:root {
  /* Поверхности */
  --pm-bg:            #F5F7FA;
  --pm-surface:       #FFFFFF;
  --pm-surface-2:     #EFF2F7;
  --pm-surface-3:     #E1E7F0;
  --pm-border:        #D7DEE8;
  --pm-border-strong: #8A96AA;   /* 2.99:1 к белому — рамка инпута */

  /* Текст */
  --pm-text:   #0D1421;   /* 18.4:1 */
  --pm-text-2: #48546A;   /*  7.6:1 */
  --pm-text-3: #5F6B80;   /*  5.4:1 — мета читается, а не «шепчет» */
  --pm-text-on-accent: #FFFFFF;
  --pm-on-solid: #FFFFFF;   /* текст на сплошном зелёном/жёлтом/красном */

  /* Акцент */
  --pm-accent:       #1D4ED8;   /* белый текст на кнопке — 6.7:1 */
  --pm-accent-hover: #1A43B8;
  --pm-accent-text:  #1D4ED8;
  --pm-accent-soft:  rgba(29, 78, 216, .10);
  --pm-accent-line:  rgba(29, 78, 216, .30);

  /* Семантика: связки */
  --pm-pos:       #047857;   /* рабочая связка, прибыль */
  --pm-pos-text:  #065F46;   /* темнее фона-плашки: 6.2:1 даже на бейдже */
  --pm-pos-soft:  rgba(4, 120, 87, .11);
  --pm-pos-line:  rgba(4, 120, 87, .30);

  --pm-warn:      #B45309;   /* средняя ликвидность */
  --pm-warn-text: #92400E;   /* 5.7:1 на бейдже */
  --pm-warn-soft: rgba(180, 83, 9, .11);
  --pm-warn-line: rgba(180, 83, 9, .30);

  --pm-neg:       #B91C1C;   /* ловушка, убыток */
  --pm-neg-text:  #B91C1C;
  --pm-neg-soft:  rgba(185, 28, 28, .09);
  --pm-neg-line:  rgba(185, 28, 28, .28);

  --pm-info-soft: rgba(29, 78, 216, .08);
  /* Чип поверх любой подложки, в т.ч. цветной строки связки */
  --pm-chip-bg:   rgba(13, 20, 33, .07);
  --pm-chip-line: rgba(13, 20, 33, .12);

  /* Типографика */
  --pm-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --pm-font-display: 'Manrope', 'Inter', sans-serif;

  --pm-fs-xs:   12px;
  --pm-fs-sm:   13px;
  --pm-fs-base: 14px;
  --pm-fs-md:   15px;
  --pm-fs-lg:   17px;
  --pm-fs-xl:   20px;
  --pm-fs-2xl:  26px;
  --pm-fs-3xl:  34px;
  --pm-fs-4xl:  46px;

  /* Скругления — три ступени, больше не изобретаем */
  --pm-r-sm:   6px;
  --pm-r-md:   10px;
  --pm-r-lg:   14px;
  --pm-r-full: 999px;

  /* Тени — только две. Цветных «свечений» в проекте нет. */
  --pm-sh-1: 0 1px 2px rgba(13, 20, 33, .05);
  --pm-sh-2: 0 6px 24px rgba(13, 20, 33, .08);

  /* Геометрия шелла */
  --pm-sidebar-w: 244px;
  --pm-topbar-h:  58px;
  --pm-page-max:  1180px;
}

/* Тёмная тема — кабинет и админка.
   Первая версия была слишком контрастно-бедной: карточка отличалась от фона на
   1.08:1, граница — на 1.25:1, мета-текст давал 3.4:1. Интерфейс сливался.
   Значения ниже подобраны расчётом, каждое проверено (см. комментарий выше). */
.pm-dark {
  --pm-bg:            #0D1219;
  --pm-surface:       #161D27;   /* 1.11:1 к фону — ступенька видна */
  --pm-surface-2:     #212A36;
  --pm-surface-3:     #2E3947;
  --pm-border:        #38445A;   /* 1.73:1 к карточке — линию видно */
  --pm-border-strong: #5B687D;   /* 3.0:1 — рамка инпута */

  --pm-on-solid: #0B1017;   /* на ярком зелёном 8.4:1, жёлтом 8.9:1, красном 5.1:1 */
  --pm-text:   #EDF1F6;   /* 14.9:1 */
  --pm-text-2: #B4BECD;   /*  9.0:1 */
  --pm-text-3: #8B97A8;   /*  5.7:1 на карточке, 4.9:1 на шапке таблицы */

  --pm-accent:       #3971E3;   /* белый текст на кнопке — 4.5:1 */
  --pm-accent-hover: #2B5FCC;
  --pm-accent-text:  #8DBBFF;   /* ссылка на тёмном — 8.6:1 */
  --pm-accent-soft:  rgba(94, 152, 255, .16);
  --pm-accent-line:  rgba(94, 152, 255, .38);

  --pm-pos:       #22C55E;
  --pm-pos-text:  #4ADE80;
  --pm-pos-soft:  rgba(34, 197, 94, .15);
  --pm-pos-line:  rgba(34, 197, 94, .34);

  --pm-warn:      #F59E0B;
  --pm-warn-text: #FBBF24;
  --pm-warn-soft: rgba(245, 158, 11, .15);
  --pm-warn-line: rgba(245, 158, 11, .34);

  --pm-neg:       #EF4444;
  --pm-neg-text:  #FB8F8F;
  --pm-neg-soft:  rgba(239, 68, 68, .15);
  --pm-neg-line:  rgba(239, 68, 68, .34);

  --pm-info-soft: rgba(94, 152, 255, .12);
  --pm-chip-bg:   rgba(233, 240, 250, .10);
  --pm-chip-line: rgba(233, 240, 250, .16);

  --pm-sh-1: 0 1px 2px rgba(0, 0, 0, .35);
  --pm-sh-2: 0 10px 34px rgba(0, 0, 0, .50);
}

/* ------------------------------------------------------------- 2. Основа */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--pm-font);
  font-size: var(--pm-fs-base);
  line-height: 1.55;
  color: var(--pm-text);
  background: var(--pm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* Цифры в интерфейсе не должны «прыгать» при обновлении данных */
  font-variant-numeric: tabular-nums;
}

h1, h2, h3, h4, h5 {
  font-family: var(--pm-font);
  color: var(--pm-text);
  font-weight: 700;
  letter-spacing: -.015em;
  margin: 0;
  line-height: 1.25;
}
h1 { font-size: var(--pm-fs-2xl); }
h2 { font-size: var(--pm-fs-xl); }
h3 { font-size: var(--pm-fs-lg); }
h4 { font-size: var(--pm-fs-md); }
p  { margin: 0 0 12px; }
p:last-child { margin-bottom: 0; }

a { color: var(--pm-accent-text); text-decoration: none; }
a:hover { color: var(--pm-accent-hover); text-decoration: none; }
.pm-dark a:hover { color: #B3D2FF; }

hr, .uk-hr { border-top: 1px solid var(--pm-border); margin: 20px 0; }

::selection { background: var(--pm-accent-soft); color: var(--pm-text); }
summary::-webkit-details-marker { display: none; }

:focus-visible {
  outline: 2px solid var(--pm-accent);
  outline-offset: 2px;
  border-radius: var(--pm-r-sm);
}

/* Скроллбары в тёмной теме — иначе белые полосы рвут картинку */
.pm-dark ::-webkit-scrollbar { width: 10px; height: 10px; }
.pm-dark ::-webkit-scrollbar-track { background: var(--pm-bg); }
.pm-dark ::-webkit-scrollbar-thumb { background: var(--pm-border); border-radius: var(--pm-r-full); border: 2px solid var(--pm-bg); }
.pm-dark ::-webkit-scrollbar-thumb:hover { background: var(--pm-border-strong); }
.pm-dark { scrollbar-color: var(--pm-border) var(--pm-bg); }

@keyframes pm-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes pm-spin  { to { transform: rotate(360deg); } }

/* ------------------------------------------- 3. Перекраска UIkit: типографика */
.uk-h1, .uk-h2, .uk-h3, .uk-h4, .uk-heading-small, .uk-heading-medium {
  font-family: var(--pm-font);
  color: var(--pm-text);
  letter-spacing: -.015em;
}
.uk-text-muted   { color: var(--pm-text-2) !important; }
.uk-text-meta    { color: var(--pm-text-3) !important; font-size: var(--pm-fs-xs); }
.uk-text-lead    { color: var(--pm-text-2); font-size: var(--pm-fs-lg); font-weight: 400; line-height: 1.6; }
.uk-text-primary { color: var(--pm-accent-text) !important; }
.uk-text-success { color: var(--pm-pos-text) !important; }
.uk-text-warning { color: var(--pm-warn-text) !important; }
.uk-text-danger  { color: var(--pm-neg-text) !important; }
.uk-text-small   { font-size: var(--pm-fs-sm); }
.uk-text-xsmall  { font-size: var(--pm-fs-xs); }
.uk-text-emphasis { color: var(--pm-text) !important; }

/* ------------------------------------------------ 4. Перекраска UIkit: карточки */
.uk-card {
  border-radius: var(--pm-r-lg);
  transition: border-color .15s ease, background-color .15s ease;
}
.uk-card-default {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  box-shadow: none;
  color: var(--pm-text);
}
.uk-card-default .uk-card-title { color: var(--pm-text); }
.uk-card-body   { padding: 22px; }
.uk-card-small > .uk-card-body { padding: 16px; }
.uk-card-large > .uk-card-body { padding: 32px; }
.uk-card-title {
  font-size: var(--pm-fs-lg);
  font-weight: 700;
  letter-spacing: -.01em;
  margin: 0 0 14px;
}
.uk-card-hover:hover {
  background: var(--pm-surface);
  border-color: var(--pm-border-strong);
  box-shadow: var(--pm-sh-2);
}
.uk-card-primary {
  background: var(--pm-accent);
  color: var(--pm-text-on-accent);
  border: none;
}
.uk-card-primary .uk-card-title { color: #fff; }

/* -------------------------------------------------- 5. Перекраска UIkit: кнопки */
.uk-button {
  font-family: var(--pm-font);
  font-size: var(--pm-fs-base);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--pm-r-md);
  border: 1px solid transparent;
  padding: 0 18px;
  line-height: 38px;
  min-height: 38px;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.uk-button-small  { font-size: var(--pm-fs-sm); line-height: 32px; min-height: 32px; padding: 0 13px; border-radius: var(--pm-r-sm); }
.uk-button-large  { font-size: var(--pm-fs-md); line-height: 46px; min-height: 46px; padding: 0 26px; }

.uk-button-primary { background: var(--pm-accent); color: #fff; }
.uk-button-primary:hover, .uk-button-primary:focus { background: var(--pm-accent-hover); color: #fff; }

.uk-button-default {
  background: var(--pm-surface);
  border-color: var(--pm-border-strong);
  color: var(--pm-text);
}
.uk-button-default:hover, .uk-button-default:focus {
  background: var(--pm-surface-2);
  border-color: var(--pm-border-strong);
  color: var(--pm-text);
}

.uk-button-secondary { background: var(--pm-surface-3); color: var(--pm-text); }
.uk-button-secondary:hover, .uk-button-secondary:focus { background: var(--pm-border-strong); color: var(--pm-text); }

.uk-button-danger { background: var(--pm-neg); color: var(--pm-on-solid); }
.uk-button-danger:hover, .uk-button-danger:focus { background: var(--pm-neg); filter: brightness(1.08); color: var(--pm-on-solid); }

.uk-button-text {
  color: var(--pm-accent-text);
  font-weight: 600;
  min-height: 0;
  line-height: 1.4;
  padding: 0;
  text-transform: none;
}
.uk-button-text::before { display: none; }
.uk-button-text:hover { color: var(--pm-accent-hover); }

.uk-button-link { color: var(--pm-accent-text); text-transform: none; font-weight: 600; }

/* Успех = зелёная кнопка действия (открыть доступ, оплатить).
   Цвет надписи берём из --pm-on-solid: на светлой теме заливка тёмная и нужен
   белый, на тёмной заливка яркая — белый давал 2.3:1, поэтому текст чернильный. */
.uk-button-success, .pm-btn-success { background: var(--pm-pos); color: var(--pm-on-solid); border-color: transparent; }
.uk-button-success:hover, .pm-btn-success:hover { filter: brightness(1.06); color: var(--pm-on-solid); }

.uk-button:disabled, .uk-button.pm-is-disabled {
  background: var(--pm-surface-2);
  color: var(--pm-text-3);
  border-color: var(--pm-border);
  cursor: not-allowed;
}

/* --------------------------------------------------- 6. Перекраска UIkit: формы */
.uk-input, .uk-select, .uk-textarea {
  font-family: var(--pm-font);
  font-size: var(--pm-fs-base);
  color: var(--pm-text);
  background: var(--pm-surface);
  border: 1px solid var(--pm-border-strong);
  border-radius: var(--pm-r-md);
  height: 38px;
  padding: 0 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.pm-dark .uk-input, .pm-dark .uk-select, .pm-dark .uk-textarea { background: var(--pm-surface-2); }
.uk-textarea { height: auto; padding: 10px 12px; line-height: 1.6; }
.uk-input:focus, .uk-select:focus, .uk-textarea:focus {
  background: var(--pm-surface);
  border-color: var(--pm-accent);
  box-shadow: 0 0 0 3px var(--pm-accent-soft);
  outline: none;
}
.pm-dark .uk-input:focus, .pm-dark .uk-select:focus, .pm-dark .uk-textarea:focus { background: var(--pm-surface-2); }
.uk-input::placeholder, .uk-textarea::placeholder { color: var(--pm-text-3); }
.uk-input:disabled, .uk-select:disabled, .uk-textarea:disabled { background: var(--pm-surface-2); color: var(--pm-text-3); }
.uk-form-small { height: 32px; font-size: var(--pm-fs-sm); padding: 0 10px; border-radius: var(--pm-r-sm); }
.uk-form-large { height: 46px; font-size: var(--pm-fs-md); }
.uk-form-label {
  display: block;
  font-size: var(--pm-fs-sm);
  font-weight: 600;
  color: var(--pm-text-2);
  margin-bottom: 6px;
}
.uk-checkbox, .uk-radio {
  width: 17px; height: 17px;
  background-color: var(--pm-surface);
  border: 1px solid var(--pm-border-strong);
  border-radius: 4px;
  margin-top: -2px;
}
.uk-radio { border-radius: 50%; }
.pm-dark .uk-checkbox, .pm-dark .uk-radio { background-color: var(--pm-surface-2); }
.uk-checkbox:checked, .uk-radio:checked, .uk-checkbox:indeterminate {
  background-color: var(--pm-accent);
  border-color: var(--pm-accent);
}
.uk-form-danger { border-color: var(--pm-neg) !important; }

/* ------------------------------------------------- 7. Перекраска UIkit: таблицы */
.uk-table {
  font-size: var(--pm-fs-base);
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
}
.uk-table th {
  font-family: var(--pm-font);
  font-size: var(--pm-fs-xs);
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--pm-text-3);
  padding: 11px 14px;
  border-bottom: 1px solid var(--pm-border);
  background: var(--pm-surface-2);
  white-space: nowrap;
  text-align: left;
}
.uk-table td {
  padding: 13px 14px;
  border-bottom: 1px solid var(--pm-border);
  color: var(--pm-text);
  vertical-align: middle;
}
/* Шапку таблицы отделяем не только фоном, но и линией потолще:
   на плотных данных это главный ориентир для глаза. */
.uk-table thead th { border-bottom-width: 2px; }
.uk-table tbody tr:last-child td { border-bottom: none; }
.uk-table-hover tbody tr:hover { background: var(--pm-surface-2); }
.uk-table-striped tbody tr:nth-of-type(odd) { background: transparent; border: none; }
.uk-table-small th { padding: 8px 12px; }
.uk-table-small td { padding: 9px 12px; }

/* --------------------------------------------------- 8. Перекраска UIkit: прочее */
.uk-label {
  font-family: var(--pm-font);
  font-size: var(--pm-fs-xs);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  border-radius: var(--pm-r-full);
  padding: 3px 10px;
  background: var(--pm-accent-soft);
  color: var(--pm-accent-text);
  line-height: 1.5;
}
.uk-label-success { background: var(--pm-pos-soft); color: var(--pm-pos-text); }
.uk-label-warning { background: var(--pm-warn-soft); color: var(--pm-warn-text); }
.uk-label-danger  { background: var(--pm-neg-soft);  color: var(--pm-neg-text); }

.uk-badge {
  background: var(--pm-accent);
  color: #fff;
  font-size: var(--pm-fs-xs);
  font-weight: 700;
  min-width: 20px; height: 20px;
  line-height: 20px;
}

.uk-alert {
  background: var(--pm-surface-2);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-md);
  color: var(--pm-text);
  padding: 13px 16px;
  margin-bottom: 18px;
  font-size: var(--pm-fs-base);
}
.uk-alert-primary { background: var(--pm-accent-soft); border-color: var(--pm-accent-line); color: var(--pm-text); }
.uk-alert-success { background: var(--pm-pos-soft);   border-color: var(--pm-pos-line);   color: var(--pm-text); }
.uk-alert-warning { background: var(--pm-warn-soft);  border-color: var(--pm-warn-line);  color: var(--pm-text); }
.uk-alert-danger  { background: var(--pm-neg-soft);   border-color: var(--pm-neg-line);   color: var(--pm-text); }
.uk-alert-close   { color: var(--pm-text-3); }

.uk-nav-default > li > a { color: var(--pm-text-2); font-size: var(--pm-fs-base); }
.uk-nav-default > li > a:hover { color: var(--pm-text); }
.uk-nav-default > li.uk-active > a { color: var(--pm-accent-text); }
.uk-nav-divider { border-top: 1px solid var(--pm-border); }

.uk-dropdown, .uk-dropbar {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  box-shadow: var(--pm-sh-2);
  color: var(--pm-text);
  padding: 10px;
  min-width: 210px;
}
.uk-dropdown-nav > li > a { color: var(--pm-text-2); border-radius: var(--pm-r-sm); padding: 7px 10px; display: block; font-size: var(--pm-fs-base); }
.uk-dropdown-nav > li > a:hover { color: var(--pm-text); background: var(--pm-surface-2); }
.uk-dropdown-nav .uk-nav-divider { margin: 8px 0; }

.uk-modal-dialog {
  background: var(--pm-surface);
  border: 1px solid var(--pm-border);
  border-radius: var(--pm-r-lg);
  color: var(--pm-text);
  box-shadow: var(--pm-sh-2);
}
.uk-modal-header, .uk-modal-footer { background: transparent; border-color: var(--pm-border); }
.uk-modal-title { font-family: var(--pm-font); font-size: var(--pm-fs-xl); font-weight: 700; letter-spacing: -.015em; }
.uk-modal { background: rgba(6, 10, 18, .62); }

.uk-tab { border-bottom: 1px solid var(--pm-border); margin-left: 0; }
.uk-tab::before { border-bottom: none; }
.uk-tab > * { padding-left: 0; }
.uk-tab > * > a {
  font-family: var(--pm-font);
  font-size: var(--pm-fs-base);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--pm-text-2);
  padding: 10px 16px;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.uk-tab > * > a:hover { color: var(--pm-text); border-bottom-color: var(--pm-border-strong); }
.uk-tab > .uk-active > a { color: var(--pm-accent-text); border-bottom-color: var(--pm-accent); }

.uk-subnav-pill > * > :first-child {
  background: var(--pm-surface-2);
  color: var(--pm-text-2);
  border-radius: var(--pm-r-full);
  padding: 7px 15px;
  font-size: var(--pm-fs-sm);
  font-weight: 600;
  text-transform: none;
}
.uk-subnav-pill > .uk-active > a { background: var(--pm-accent); color: #fff; }

.uk-accordion-title {
  font-family: var(--pm-font);
  font-size: var(--pm-fs-md);
  font-weight: 600;
  color: var(--pm-text);
  padding: 16px 0;
}
.uk-accordion-title::before { background-image: none; content: '+'; font-size: 20px; color: var(--pm-text-3); line-height: 1; width: auto; }
.uk-open > .uk-accordion-title::before { content: '\2212'; }
.uk-accordion > :nth-child(n+2) { border-top: 1px solid var(--pm-border); margin-top: 0; }
.uk-accordion-content { margin-top: 0; padding-bottom: 18px; color: var(--pm-text-2); }

.uk-progress { background: var(--pm-surface-3); border-radius: var(--pm-r-full); height: 7px; }
.uk-progress::-webkit-progress-value { background: var(--pm-accent); border-radius: var(--pm-r-full); }
.uk-progress::-moz-progress-bar { background: var(--pm-accent); border-radius: var(--pm-r-full); }

.uk-tooltip {
  background: #0D1421;
  color: #F1F5F9;
  border-radius: var(--pm-r-sm);
  font-size: var(--pm-fs-xs);
  line-height: 1.5;
  padding: 7px 10px;
  max-width: 260px;
}
.pm-dark .uk-tooltip { background: var(--pm-surface-3); color: var(--pm-text); }

.uk-offcanvas-bar { background: var(--pm-surface); color: var(--pm-text); padding: 18px 14px; width: 264px; }
.uk-offcanvas-overlay::before { background: rgba(6, 10, 18, .62); }

.uk-icon { color: inherit; }
.uk-close { color: var(--pm-text-3); }
.uk-close:hover { color: var(--pm-text); }

.uk-container { max-width: 1200px; padding-left: 24px; padding-right: 24px; }
.uk-container-small { max-width: 860px; }
.uk-container-xsmall { max-width: 640px; }

.uk-divider-small::after { border-top-color: var(--pm-border-strong); }
.uk-list > li { color: var(--pm-text-2); }
.uk-article-title { font-family: var(--pm-font); letter-spacing: -.02em; }