/* ============================================================
   UI Kit
   Используется во всех Bitrix24 приложениях.
   Подключение: <link href="https://py.app-avtomatizatory.ru/ui-kit/ui-kit.css">
   ============================================================ */

/* ─── TOKENS ─────────────────────────────────────────────── */
:root {
  /* Фон */
  --bg:           #FFFFFF;
  --bg-2:         #F7F6F3;
  --bg-hover:     #EFEEEB;
  --bg-active:    #E8E7E3;

  /* Рамки */
  --border:       #E3E2DE;
  --border-focus: #2383E2;

  /* Текст */
  --text-1:       #1A1A1A;
  --text-2:       #6F6F6F;
  --text-3:       #ABABAB;

  /* Акценты */
  --accent:       #2383E2;
  --accent-hover: #1A73D4;
  --accent-text:  #FFFFFF;

  /* Семантика */
  --danger:         #E03E3E;
  --danger-bg:      #FFF2F2;
  --danger-border:  #FFCCCC;
  --success:        #2D9D5A;
  --success-bg:     #F0FDF6;
  --success-border: #A7F3C4;
  --warning:        #C47B00;
  --warning-bg:     #FFFBEB;
  --warning-border: #FDE68A;
  --info-bg:        #EFF6FF;
  --info-border:    #BFDBFE;

  /* Форма */
  --radius-sm: 4px;
  --radius:    6px;
  --radius-lg: 10px;

  /* Тени */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow:    0 4px 16px rgba(0,0,0,.08);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.12);

  /* Анимация */
  --transition: 150ms ease;

  /* Шрифты — системные стеки (как в Bitrix24), чтобы kit «растворялся» в окружении. */
  --font:      -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, 'Liberation Mono', monospace;

  /* Кнопки */
  --btn-primary-bg:        #2383E2;
  --btn-primary-bg-hover:  #1A73D4;
  --btn-primary-text:      #FFFFFF;
  --btn-primary-border:    #2383E2;
  --btn-primary-border-hover: #1A73D4;
}

[data-theme="dark"] {
  --bg:           #191919;
  --bg-2:         #252525;
  --bg-hover:     #2E2E2E;
  --bg-active:    #363636;
  --border:       #383838;
  --border-focus: #4A9EE8;
  --text-1:       #ECECEC;
  --text-2:       #9A9A9A;
  --text-3:       #5A5A5A;
  --accent:       #4A9EE8;
  --accent-hover: #5BAAEE;
  --danger:         #F87171;
  --danger-bg:      #2D1515;
  --danger-border:  #5C2020;
  --success:        #4ADE80;
  --success-bg:     #112318;
  --success-border: #1A4A30;
  --warning:        #FBBF24;
  --warning-bg:     #2A200A;
  --warning-border: #4A3510;
  --info-bg:        #0F1F35;
  --info-border:    #1A3A60;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.3);
  --shadow:    0 4px 16px rgba(0,0,0,.4);
  --shadow-lg: 0 12px 40px rgba(0,0,0,.6);

  --btn-primary-bg:        #4A9EE8;
  --btn-primary-bg-hover:  #5BAAEE;
  --btn-primary-text:      #FFFFFF;
  --btn-primary-border:    #4A9EE8;
  --btn-primary-border-hover: #5BAAEE;
}

/* ─── BASE ───────────────────────────────────────────────── */
.uk-root,
.uk-root *,
.uk-root *::before,
.uk-root *::after { box-sizing: border-box; }

.uk-root h1, .uk-root h2, .uk-root h3,
.uk-root h4, .uk-root h5, .uk-root h6 {
  font-family: var(--font);
  color: var(--text-1);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -.2px;
  margin: 0;
}
.uk-root h1 { font-size: 22px; }
.uk-root h2 { font-size: 16px; }
.uk-root h3 { font-size: 16px; }
.uk-root h4 { font-size: 16px; font-weight: 500; }
.uk-root h5 { font-size: 13px; font-weight: 600; }
.uk-root h6 { font-size: 13px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: .5px; }

.uk-root {
  font-family: var(--font);
  color: var(--text-1);
  background: var(--bg);
  line-height: 1.6;
  font-size: 13px;
}

/* ─── BUTTONS ────────────────────────────────────────────── */
.uk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--radius);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition: all var(--transition);
  position: relative;
  overflow: hidden;
}
.uk-btn:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; }
.uk-btn:disabled      { opacity: .45; cursor: not-allowed; }

.uk-btn-primary   { background: var(--btn-primary-bg); color: var(--btn-primary-text); border-color: var(--btn-primary-border); }
.uk-btn-primary:hover:not(:disabled) { background: var(--btn-primary-bg-hover); border-color: var(--btn-primary-border-hover); }

.uk-btn-secondary { background: var(--info-bg); color: var(--accent); border-color: var(--info-bg); }
.uk-btn-secondary:hover:not(:disabled) { background: var(--info-border); border-color: var(--info-border); }

.uk-btn-ghost     { background: transparent; color: var(--text-2); border-color: transparent; }
.uk-btn-ghost:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-1); }

.uk-btn-accent    { background: var(--text-1); color: var(--bg); border-color: var(--text-1); }
.uk-btn-accent:hover:not(:disabled) { opacity: .85; }

.uk-btn-danger    { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.uk-btn-danger:hover:not(:disabled) { background: var(--danger); color: #fff; border-color: var(--danger); }

.uk-btn-sm { padding: 5px 10px; font-size: 12px; }
.uk-btn-lg { padding: 10px 20px; font-size: 14px; }

.uk-btn-loading { pointer-events: none; }
.uk-spinner {
  width: 13px; height: 13px;
  border: 1.5px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: uk-spin .7s linear infinite;
  opacity: .6;
  flex-shrink: 0;
}
@keyframes uk-spin { to { transform: rotate(360deg); } }

/* ─── INPUTS ─────────────────────────────────────────────── */
.uk-input,
.uk-textarea,
.uk-select {
  width: 100%;
  padding: 8px 12px;
  font-family: var(--font);
  font-size: 13px;
  color: var(--text-1);
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  outline: none;
  transition: border-color var(--transition), box-shadow var(--transition);
  line-height: 1.4;
  appearance: none;
}
.uk-input::placeholder,
.uk-textarea::placeholder { color: var(--text-3); }
.uk-input:hover:not(:disabled),
.uk-textarea:hover:not(:disabled),
.uk-select:hover:not(:disabled) { border-color: var(--text-3); }
.uk-input:focus,
.uk-textarea:focus,
.uk-select:focus { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(35,131,226,.12); }
.uk-input:disabled,
.uk-textarea:disabled,
.uk-select:disabled { opacity: .5; cursor: not-allowed; background: var(--bg-2); }
.uk-input.uk-error,
.uk-textarea.uk-error,
.uk-select.uk-error { border-color: var(--danger); }
.uk-input.uk-error:focus,
.uk-textarea.uk-error:focus,
.uk-select.uk-error:focus { box-shadow: 0 0 0 3px rgba(224,62,62,.12); }

.uk-input-wrap   { position: relative; display: flex; align-items: center; }
.uk-input-icon   { position: absolute; color: var(--text-3); pointer-events: none; display: flex; }
.uk-input-icon.left  { left: 10px; }
.uk-input-icon.right { right: 10px; }
.uk-input.has-icon-left  { padding-left: 34px; }
.uk-input.has-icon-right { padding-right: 34px; }

.uk-select {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23ABABAB' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 32px;
  cursor: pointer;
}

.uk-textarea {
  resize: none;
  line-height: 1.5;
  min-height: 76px;   /* ~3 строки */
  max-height: 308px;  /* ~15 строк */
  overflow-y: auto;
}

/* Input-стилизованный контейнер для группы тегов (picker и т.п.). */
.uk-input-tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 36px;
  padding: 6px 8px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  transition: border-color var(--transition), box-shadow var(--transition);
}
.uk-input-tags:focus-within { border-color: var(--border-focus); box-shadow: 0 0 0 3px rgba(35,131,226,.12); }

/* ─── FORM ───────────────────────────────────────────────── */
.uk-form-group   { display: flex; flex-direction: column; gap: 5px; }
.uk-form-label   { font-size: 13px; font-weight: 500; color: var(--text-1); }
.uk-form-label span { color: var(--danger); margin-left: 2px; }
.uk-form-hint    { font-size: 13px; color: var(--text-3); }
.uk-form-error   { font-size: 13px; color: var(--danger); }

/* Горизонтальный layout: label слева, поле справа.
   Ширина левой колонки настраивается через --uk-form-label-width.
   Hint прилипает к label сверху, не уезжает за высоким полем (textarea и т.п.). */
.uk-form-group-horizontal {
  display: grid;
  grid-template-columns: var(--uk-form-label-width, 260px) 1fr;
  grid-template-rows: min-content 1fr;
  align-items: start;
  gap: 4px 20px;
  padding: 8px 0;
}
.uk-form-group-horizontal > .uk-form-label { grid-row: 1; grid-column: 1; padding-top: 8px; }
.uk-form-group-horizontal > .uk-form-hint  { grid-row: 2; grid-column: 1; align-self: start; }
.uk-form-group-horizontal > .uk-form-error { grid-row: 2; grid-column: 2; align-self: start; }
.uk-form-group-horizontal > .uk-input,
.uk-form-group-horizontal > .uk-textarea,
.uk-form-group-horizontal > .uk-select,
.uk-form-group-horizontal > .uk-input-wrap { grid-row: 1 / -1; grid-column: 2; }

@media (max-width: 640px) {
  .uk-form-group-horizontal {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .uk-form-group-horizontal > .uk-form-label,
  .uk-form-group-horizontal > .uk-form-hint,
  .uk-form-group-horizontal > .uk-form-error,
  .uk-form-group-horizontal > .uk-input,
  .uk-form-group-horizontal > .uk-textarea,
  .uk-form-group-horizontal > .uk-select,
  .uk-form-group-horizontal > .uk-input-wrap { grid-column: 1; grid-row: auto; }
}

.uk-form-card {
  background: var(--bg);
  border-radius: var(--radius-lg);
  padding: 0 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* Секция формы с автоматически стилизованным заголовком (h2/h3/h4 → разделитель снизу). */
.uk-form-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 16px 0;
}
.uk-form-section > h2,
.uk-form-section > h3,
.uk-form-section > h4 { padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.uk-form-title {
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.2px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
}
.uk-form-actions {
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  padding-top: 8px;
}

/* ─── LAYOUT PRIMITIVES ──────────────────────────────────── */
/* Page-обёртка. Опциональное ограничение ширины через --uk-container-max-width
   или через готовые модификаторы .uk-container-narrow / .uk-container-wide. */
.uk-container {
  width: 100%;
  max-width: var(--uk-container-max-width, none);
  margin: 0 auto;
  padding: 24px 16px;
}
.uk-container-narrow { --uk-container-max-width: 720px; }
.uk-container-wide   { --uk-container-max-width: 1200px; }
.uk-container-left   { margin-left: 0;    margin-right: auto; }
.uk-container-right  { margin-left: auto; margin-right: 0; }

/* Универсальные модификаторы ширины — для коротких полей (числа, время, ID) и других элементов. */
.uk-w-xs { max-width: 80px; }
.uk-w-sm { max-width: 120px; }
.uk-w-md { max-width: 200px; }
.uk-w-lg { max-width: 320px; }

/* Блок длинного текста (описания, прозрачные секции) — ограничивает строку для читаемости. */
.uk-prose { max-width: 60ch; line-height: 1.6; color: var(--text-2); }

/* DEV/STAGING/PROD-маркер в углу. Ставить когда config.isDev / окружение != prod.
   Варианты: .uk-env-dev (красный), .uk-env-staging (жёлтый), .uk-env-prod (скрыт). */
.uk-env-badge {
  position: fixed;
  top: 4px;
  right: 8px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font);
  letter-spacing: .5px;
  text-transform: uppercase;
  z-index: 9999;
  pointer-events: none;
  color: #fff;
}
.uk-env-badge.uk-env-dev      { background: #E74C3C; }
.uk-env-badge.uk-env-staging  { background: #F39C12; }
.uk-env-badge.uk-env-prod     { display: none; }

/* Inline-группа кнопок (без верхнего отступа, в отличие от .uk-form-actions). */
.uk-btn-row {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--uk-gap, 8px);
}

/* Контейнер для группы .uk-tag — переносит на новую строку. */
.uk-tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--uk-gap, 6px);
}

/* Vertical flex stack с настраиваемым gap. */
.uk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--uk-gap, 12px);
}

/* Horizontal flex stack с настраиваемым gap. */
.uk-stack-horizontal {
  display: flex;
  align-items: center;
  gap: var(--uk-gap, 12px);
}

/* ─── CHECKBOX / RADIO / TOGGLE ──────────────────────────── */
.uk-check {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text-1);
  cursor: pointer;
  user-select: none;
}
.uk-check input[type=checkbox],
.uk-check input[type=radio] {
  appearance: none;
  width: 16px; height: 16px;
  border: 1.5px solid var(--border);
  border-radius: 3px;
  background: var(--bg);
  cursor: pointer;
  flex-shrink: 0;
  transition: all var(--transition);
  position: relative;
}
.uk-check input[type=radio] { border-radius: 50%; }
.uk-check input[type=checkbox]:checked { background: var(--text-1); border-color: var(--text-1); }
.uk-check input[type=checkbox]:checked::after {
  content: '';
  position: absolute;
  left: 4px; top: 1.5px;
  width: 5px; height: 8px;
  border: 1.5px solid var(--bg);
  border-top: none; border-left: none;
  transform: rotate(42deg);
}
.uk-check input[type=radio]:checked { border-color: var(--text-1); }
.uk-check input[type=radio]:checked::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--text-1);
  border-radius: 50%;
}

.uk-toggle-label { display: flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; }
.uk-toggle        { position: relative; width: 34px; height: 18px; flex-shrink: 0; }
.uk-toggle input  { opacity: 0; width: 0; height: 0; position: absolute; }
.uk-toggle-track  {
  position: absolute; inset: 0;
  background: var(--bg-active);
  border-radius: 9px;
  transition: background var(--transition);
  border: 1px solid var(--border);
}
.uk-toggle input:checked ~ .uk-toggle-track { background: var(--text-1); border-color: var(--text-1); }
.uk-toggle-thumb  {
  position: absolute;
  top: 2px; left: 2px;
  width: 12px; height: 12px;
  background: var(--text-3);
  border-radius: 50%;
  transition: transform var(--transition), background var(--transition);
}
.uk-toggle input:checked ~ .uk-toggle-thumb { transform: translateX(16px); background: var(--bg); }

/* ─── TABLE ──────────────────────────────────────────────── */
.uk-table-wrap { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.uk-table      { width: 100%; border-collapse: collapse; font-size: 13px; }
.uk-table thead { background: var(--bg-2); }
.uk-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--text-3);
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
  font-family: var(--font-mono);
  cursor: pointer;
  user-select: none;
}
.uk-table th:hover { color: var(--text-2); }
.uk-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--border);
  color: var(--text-1);
  vertical-align: middle;
}
.uk-table tr:last-child td { border-bottom: none; }
.uk-table tbody tr { transition: background var(--transition); }
.uk-table tbody tr:hover { background: var(--bg-2); }

.uk-table-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: var(--bg-2);
  border-top: 1px solid var(--border);
  font-size: 12px;
  color: var(--text-3);
}
.uk-pagination  { display: flex; gap: 4px; align-items: center; }
.uk-page-btn {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  font-size: 12px;
  color: var(--text-2);
  background: transparent;
  font-family: var(--font);
  transition: all var(--transition);
}
.uk-page-btn:hover  { background: var(--bg-hover); color: var(--text-1); }
.uk-page-btn.active { background: var(--text-1); color: var(--bg); border-color: var(--text-1); }

/* ─── LIST ───────────────────────────────────────────────── */
.uk-list      { border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; }
.uk-list-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  transition: background var(--transition);
  cursor: pointer;
}
.uk-list-item:last-child { border-bottom: none; }
.uk-list-item:hover      { background: var(--bg-2); }
.uk-list-avatar {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--bg-active);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600;
  color: var(--text-2);
  flex-shrink: 0;
}
.uk-list-body  { flex: 1; min-width: 0; }
.uk-list-name  { font-size: 13px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.uk-list-meta  { font-size: 13px; color: var(--text-3); margin-top: 1px; }
.uk-list-action { color: var(--text-3); display: flex; align-items: center; transition: color var(--transition); }
.uk-list-action:hover { color: var(--text-1); }

/* ─── BADGE ──────────────────────────────────────────────── */
.uk-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  font-family: var(--font-mono);
  border: 1px solid;
}
.uk-badge-green  { background: var(--success-bg);  color: var(--success); border-color: var(--success-border); }
.uk-badge-red    { background: var(--danger-bg);   color: var(--danger);  border-color: var(--danger-border); }
.uk-badge-yellow { background: var(--warning-bg);  color: var(--warning); border-color: var(--warning-border); }
.uk-badge-gray   { background: var(--bg-2);        color: var(--text-2);  border-color: var(--border); }
.uk-badge-blue   { background: var(--info-bg);     color: var(--accent);  border-color: var(--info-border); }

/* ─── ALERT ──────────────────────────────────────────────── */
.uk-alert {
  display: flex;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--radius);
  border: 1px solid;
  font-size: 13px;
  line-height: 1.5;
}
.uk-alert-icon  { flex-shrink: 0; display: flex; padding-top: 1px; }
.uk-alert-body  { flex: 1; }
.uk-alert-title { font-weight: 500; margin-bottom: 2px; }
.uk-alert-close {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .5;
  display: flex; flex-shrink: 0; padding: 0; padding-top: 1px;
  font-size: 16px; line-height: 1;
  transition: opacity var(--transition);
}
.uk-alert-close:hover { opacity: 1; }
.uk-alert-info    { background: var(--info-bg);    border-color: var(--info-border);    color: var(--accent); }
.uk-alert-success { background: var(--success-bg); border-color: var(--success-border); color: var(--success); }
.uk-alert-warning { background: var(--warning-bg); border-color: var(--warning-border); color: var(--warning); }
.uk-alert-danger  { background: var(--danger-bg);  border-color: var(--danger-border);  color: var(--danger); }

/* ─── MODAL ──────────────────────────────────────────────── */
.uk-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.35);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  backdrop-filter: blur(2px);
  padding: 20px;
  animation: uk-fadeIn .15s ease;
}
.uk-overlay.uk-hidden { display: none; }
@keyframes uk-fadeIn { from { opacity: 0; } to { opacity: 1; } }

.uk-modal {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  width: 100%;
  max-width: 440px;
  animation: uk-slideUp .2s ease;
}
@keyframes uk-slideUp {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0);   opacity: 1; }
}
.uk-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--border);
}
.uk-modal-title { font-size: 16px; font-weight: 600; letter-spacing: -.2px; }
.uk-modal-close {
  width: 28px; height: 28px;
  border-radius: var(--radius-sm);
  background: none; border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-3);
  font-size: 18px; line-height: 1;
  transition: all var(--transition);
}
.uk-modal-close:hover { background: var(--bg-hover); color: var(--text-1); }
.uk-modal-body   { padding: 20px; font-size: 13px; color: var(--text-2); line-height: 1.7; }
.uk-modal-footer {
  padding: 14px 20px 16px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

/* ─── TOAST ──────────────────────────────────────────────── */
.uk-toast-container {
  position: fixed;
  bottom: 24px; right: 24px;
  display: flex; flex-direction: column;
  gap: 8px;
  z-index: 2000;
  pointer-events: none;
}
.uk-toast {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--text-1);
  color: var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-family: var(--font);
  pointer-events: all;
  min-width: 240px; max-width: 340px;
  animation: uk-toastIn .25s ease forwards;
  position: relative;
  overflow: hidden;
}
.uk-toast::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  height: 2px;
  background: rgba(255,255,255,.25);
  animation: uk-toastTimer 3s linear forwards;
}
@keyframes uk-toastIn  { from { transform: translateY(12px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes uk-toastTimer { from { width: 100%; } to { width: 0; } }
.uk-toast.uk-toast-out { animation: uk-toastOut .2s ease forwards; }
@keyframes uk-toastOut { to { transform: translateY(8px); opacity: 0; } }
.uk-toast-icon     { font-size: 14px; flex-shrink: 0; }
.uk-toast-text     { flex: 1; }
.uk-toast-close    {
  background: none; border: none; cursor: pointer;
  color: inherit; opacity: .5; font-size: 16px;
  padding: 0; display: flex; flex-shrink: 0;
  transition: opacity var(--transition);
}
.uk-toast-close:hover { opacity: 1; }
.uk-toast-success::after { background: rgba(74,222,128,.5); }
.uk-toast-danger::after  { background: rgba(248,113,113,.5); }
.uk-toast-warning::after { background: rgba(251,191,36,.5); }

/* ─── MISC ───────────────────────────────────────────────── */
.uk-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  background: var(--bg-2);
  border: 1px solid var(--border);
  font-size: 11px;
  color: var(--text-2);
  transition: background var(--transition);
}
.uk-tag:hover { background: var(--bg-hover); }
.uk-tag-remove { opacity: .5; font-size: 13px; line-height: 1; cursor: pointer; }
.uk-tag-remove:hover { opacity: 1; }

/* ─── DROPDOWN (на базе native <details>/<summary>) ──────── */
.uk-dropdown { position: relative; display: inline-block; }
.uk-dropdown > summary { cursor: pointer; list-style: none; }
.uk-dropdown > summary::marker,
.uk-dropdown > summary::-webkit-details-marker { display: none; }
.uk-dropdown[open] > summary { background: var(--bg-hover); }

.uk-dropdown-list {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 20;
  min-width: 180px;
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 4px 0;
  overflow: hidden;
}
.uk-dropdown-list.uk-dropdown-list-left { right: auto; left: 0; }

.uk-dropdown-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  font-size: 13px;
  color: var(--text-1);
  text-decoration: none;
  white-space: nowrap;
  transition: background var(--transition);
  cursor: pointer;
}
.uk-dropdown-item:hover { background: var(--bg-hover); }
.uk-dropdown-icon {
  width: 18px; height: 18px;
  border-radius: 4px;
  object-fit: cover;
  flex-shrink: 0;
}

.uk-kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--bg-2);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-2);
  box-shadow: 0 1px 0 var(--border);
}

.uk-divider { height: 1px; background: var(--border); margin: 4px 0; }

.uk-skeleton {
  background: linear-gradient(90deg, var(--bg-2) 25%, var(--bg-hover) 50%, var(--bg-2) 75%);
  background-size: 200% 100%;
  animation: uk-shimmer 1.4s infinite;
  border-radius: var(--radius-sm);
}
@keyframes uk-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.uk-code {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 11px;
  padding: 1px 6px;
  background: var(--bg-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-2);
}

/* ─── TYPOGRAPHY UTILS ───────────────────────────────────── */
.uk-text-1 { color: var(--text-1); }
.uk-text-2 { color: var(--text-2); }
.uk-text-3 { color: var(--text-3); }
.uk-mono   { font-family: var(--font-mono); }
.uk-sm     { font-size: 12px; }
.uk-xs     { font-size: 11px; }