/* =========================================================================
   sokaster · Единая дизайн-система веба
   Направление B «веб помягче»: та же палитра и акцент, что в десктоп-клиенте
   и дев-панели, но крупнее типографика и больше воздуха. LCD-хром остаётся
   привилегией дев-панели (dev-panel.css, префикс `dp-`).

   Токены сверены с Resources/Themes/Dark.xaml (десктоп) и css/dev-panel.css —
   значения обязаны совпадать, иначе веб и десктоп поедут в разные стороны.
   Все классы префиксованы `sk-`.
   ========================================================================= */

:root {
  color-scheme: dark;

  /* Подложки */
  --sk-bg:          #0E1014;
  --sk-bg-2:        #161A20;
  --sk-bg-3:        #1D222A;
  --sk-surface:     #1A1F27;
  --sk-surface-hi:  #232932;
  --sk-surface-top: #2E3540;
  --sk-well:        #11151B;

  /* Границы */
  --sk-edge:        rgba(255, 255, 255, 0.06);
  --sk-edge-strong: rgba(255, 255, 255, 0.10);
  --sk-edge-soft:   rgba(255, 255, 255, 0.04);

  /* Текст */
  --sk-text:        #E7ECF3;
  --sk-text-soft:   #AAB3C0;
  --sk-text-dim:    #6A7383;
  --sk-text-mute:   #4A525E;

  /* Акцент и статусы */
  --sk-accent:      #3CE584;
  --sk-accent-hi:   #6BF0A4;
  --sk-accent-wash: rgba(60, 229, 132, 0.12);
  --sk-accent-edge: rgba(60, 229, 132, 0.40);
  --sk-warn:        #F0B03C;
  --sk-warn-wash:   rgba(240, 176, 60, 0.12);
  --sk-danger:      #FF5560;
  --sk-danger-wash: rgba(255, 85, 96, 0.12);
  --sk-info:        #6BB6FF;

  /* Скругления — направление B */
  --sk-r-card:      12px;
  --sk-r-ctl:       8px;
  --sk-r-sm:        6px;
  --sk-r-pill:      999px;

  /* Шрифты */
  --sk-font:        "Inter Tight", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --sk-mono:        "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* Ритм */
  --sk-gap:         12px;
  --sk-gap-lg:      24px;
  --sk-pad-card:    22px;
  --sk-nav-h:       60px;
  --sk-page-w:      960px;
}

*, *::before, *::after { box-sizing: border-box; }

body.sk {
  margin: 0;
  background: var(--sk-bg);
  color: var(--sk-text);
  font-family: var(--sk-font);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

.sk a { color: var(--sk-accent); text-decoration: none; }
.sk a:hover { color: var(--sk-accent-hi); }

.sk-mono { font-family: var(--sk-mono); font-variant-numeric: tabular-nums; }
.sk-dim  { color: var(--sk-text-dim); }
.sk-soft { color: var(--sk-text-soft); }

/* ════════════════════════════════════════════════════════════════
   ШАПКА-МЕНЮ — общая для profile / admin / dev / лендинга
   Разметку рендерит js/nav.js, чтобы не расходилась между страницами.
   ════════════════════════════════════════════════════════════════ */
.sk-nav {
  height: var(--sk-nav-h);
  display: flex;
  align-items: center;
  gap: 28px;
  padding: 0 28px;
  border-bottom: 1px solid var(--sk-edge);
  background: var(--sk-bg);
}
.sk-nav-brand { display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.sk-nav-logo { display: block; width: 20px; height: 20px; object-fit: contain; }
.sk-nav-brand b {
  font-size: 16px; font-weight: 600; letter-spacing: -0.015em; color: var(--sk-text);
}
.sk-nav-links { display: flex; align-items: center; gap: 22px; }
.sk-nav-links a {
  font-size: 14px; font-weight: 500; color: var(--sk-text-dim);
  padding-bottom: 4px; border-bottom: 2px solid transparent;
}
.sk-nav-links a:hover { color: var(--sk-text-soft); }
.sk-nav-links a.is-active { color: var(--sk-text); border-bottom-color: var(--sk-accent); }
.sk-nav-spacer { flex-grow: 1; }
.sk-nav-user { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.sk-nav-user img,
.sk-nav-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--sk-surface-top); object-fit: cover;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 600; color: var(--sk-text-soft);
}
.sk-nav-user a { font-size: 14px; font-weight: 500; color: var(--sk-text-dim); white-space: nowrap; }
.sk-nav-user a:hover { color: var(--sk-text-soft); }
.sk-nav-narrow { display: none; }

/* ════════════════════════════════════════════════════════════════
   СТРАНИЦА
   ════════════════════════════════════════════════════════════════ */
.sk-page { max-width: var(--sk-page-w); margin: 0 auto; padding: 32px 28px 64px; }
.sk-page-wide { max-width: 1280px; }

.sk-h1 { font-size: 26px; font-weight: 600; letter-spacing: -0.02em; margin: 0; }
.sk-h2 { font-size: 16px; font-weight: 600; letter-spacing: -0.005em; margin: 0; }
.sk-sub { font-size: 13px; color: var(--sk-text-soft); margin: 0; }

.sk-stack { display: flex; flex-direction: column; gap: var(--sk-gap-lg); }
.sk-row   { display: flex; align-items: center; gap: var(--sk-gap); }
.sk-grow  { flex-grow: 1; min-width: 0; }

/* ════════════════════════════════════════════════════════════════
   КАРТОЧКА
   ════════════════════════════════════════════════════════════════ */
.sk-card {
  background: var(--sk-surface);
  border: 1px solid var(--sk-edge);
  border-radius: var(--sk-r-card);
  padding: var(--sk-pad-card);
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.sk-card-head { display: flex; flex-direction: column; gap: 5px; }

/* ════════════════════════════════════════════════════════════════
   КНОПКИ
   ════════════════════════════════════════════════════════════════ */
.sk-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 20px;
  border: 1px solid transparent;
  border-radius: var(--sk-r-ctl);
  font-family: var(--sk-font); font-size: 13px; font-weight: 600; line-height: 1;
  cursor: pointer;
  background: var(--sk-accent); color: #0C1117;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.sk-btn:hover { background: var(--sk-accent-hi); }
.sk-btn:disabled { opacity: .45; cursor: default; }

.sk-btn-ghost {
  background: transparent; color: var(--sk-text);
  border-color: var(--sk-edge-strong); font-weight: 500;
}
.sk-btn-ghost:hover { background: rgba(255,255,255,0.04); border-color: var(--sk-edge-strong); }

.sk-btn-danger {
  background: transparent; color: var(--sk-danger);
  border-color: rgba(255,85,96,0.35); font-weight: 500;
}
.sk-btn-danger:hover { background: var(--sk-danger-wash); }

.sk-btn-sm { padding: 8px 13px; font-size: 12px; font-weight: 500; }

/* Кнопка-ссылка: без этого `.sk a { color: accent }` перебивает цвет кнопки
   по специфичности — на сплошном акценте текст сливался с фоном. */
.sk a.sk-btn { color: #0C1117; }
.sk a.sk-btn-ghost { color: var(--sk-text); }
.sk a.sk-btn-danger { color: var(--sk-danger); }

/* ════════════════════════════════════════════════════════════════
   ПОЛЯ
   ════════════════════════════════════════════════════════════════ */
.sk-input {
  width: 100%;
  padding: 13px 15px;
  background: var(--sk-bg);
  border: 1px solid var(--sk-edge);
  border-radius: var(--sk-r-ctl);
  color: var(--sk-text);
  font-family: var(--sk-font); font-size: 13px; line-height: 1.4;
}
.sk-input:focus { outline: none; border-color: var(--sk-accent); }
.sk-input::placeholder { color: var(--sk-text-dim); }
.sk-input-mono { font-family: var(--sk-mono); color: var(--sk-text-soft); word-break: break-all; }

/* Значение только для чтения (overlay URL, ключ) */
.sk-value {
  padding: 13px 15px;
  background: var(--sk-bg);
  border: 1px solid var(--sk-edge);
  border-radius: var(--sk-r-ctl);
  font-family: var(--sk-mono); font-size: 13px; line-height: 1.4;
  color: var(--sk-text-soft);
  word-break: break-all;
}
.sk-value-accent { border-color: var(--sk-accent-edge); color: var(--sk-accent); }

/* ════════════════════════════════════════════════════════════════
   ЧИПЫ-СТАТУСЫ
   ════════════════════════════════════════════════════════════════ */
.sk-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 13px;
  border-radius: var(--sk-r-pill);
  font-size: 12px; font-weight: 500; line-height: 1;
  background: rgba(255,255,255,0.05); color: var(--sk-text-soft);
  white-space: nowrap;
}
.sk-chip-live   { background: var(--sk-accent-wash); color: var(--sk-accent); }
.sk-chip-warn   { background: var(--sk-warn-wash);   color: var(--sk-warn); }
.sk-chip-error  { background: var(--sk-danger-wash); color: var(--sk-danger); }

/* ════════════════════════════════════════════════════════════════
   ТАБЛИЦА
   ════════════════════════════════════════════════════════════════ */
.sk-table {
  background: var(--sk-surface);
  border: 1px solid var(--sk-edge);
  border-radius: var(--sk-r-card);
  overflow: hidden;
}
.sk-table-head,
.sk-table-row { display: grid; gap: 16px; align-items: center; padding: 15px 22px; }
.sk-table-head {
  padding-top: 14px; padding-bottom: 14px;
  border-bottom: 1px solid var(--sk-edge);
  font-size: 12px; font-weight: 500; color: var(--sk-text-dim);
}
.sk-table-row { border-bottom: 1px solid var(--sk-edge-soft); }
.sk-table-row:last-child { border-bottom: 0; }
.sk-table-row:hover { background: rgba(255,255,255,0.02); }
.sk-table-empty { padding: 32px 22px; text-align: center; color: var(--sk-text-dim); }

.sk-user { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sk-user-av {
  width: 36px; height: 36px; border-radius: 50%; flex: 0 0 auto;
  background: var(--sk-surface-hi); object-fit: cover;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 600; color: var(--sk-text-soft);
}
.sk-user-av.is-live  { border: 2px solid var(--sk-accent); color: var(--sk-accent); }
.sk-user-av.is-error { border: 2px solid var(--sk-danger); color: var(--sk-danger); }
.sk-user-name { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.sk-user-name b { font-size: 15px; font-weight: 500; }
.sk-user-name span { font-size: 12px; color: var(--sk-text-dim); }

/* ════════════════════════════════════════════════════════════════
   МЕЛОЧИ
   ════════════════════════════════════════════════════════════════ */
.sk-hint { font-size: 13px; line-height: 1.5; color: var(--sk-text-soft); }
.sk-note { font-size: 12px; color: var(--sk-text-dim); }
.sk-hidden { display: none !important; }

.sk-toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%);
  padding: 12px 20px;
  background: var(--sk-surface-hi);
  border: 1px solid var(--sk-edge-strong);
  border-radius: var(--sk-r-ctl);
  font-size: 13px; color: var(--sk-text);
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
  z-index: 50;
}
.sk-toast.is-on { opacity: 1; }

@media (max-width: 720px) {
  .sk-nav { gap: 14px; padding: 0 14px; }
  .sk-nav-links { gap: 14px; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .sk-nav-links::-webkit-scrollbar { display: none; }
  .sk-nav-links a { font-size: 13px; white-space: nowrap; }
  .sk-nav-brand b { font-size: 15px; }
  .sk-nav-wide { display: none; }
  .sk-nav-narrow { display: inline; }
  .sk-page { padding: 24px 16px 48px; }
  .sk-h1 { font-size: 22px; }

  /* Ряды «значение + кнопка» на узком экране складываем в колонку —
     иначе длинный overlay URL распирает строку. */
  .sk-card .sk-row { flex-wrap: wrap; }
  .sk-card .sk-btn { flex: 1 1 auto; }
}