/* =========================================================================
   CS2 Parser — UI Kit (Iteration 1: tokens + atoms + molecules)
   All new component classes are prefixed with `.uk-` so this file
   coexists with style.css until full migration.
   ========================================================================= */

/* -------------------------------------------------------------------------
   0. FONTS (self-hosted Roboto variable)
   ------------------------------------------------------------------------- */
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/static/roboto_5.2.10_latin-wght-normal.woff2') format('woff2');
}

/* -------------------------------------------------------------------------
   1. TOKENS
   ------------------------------------------------------------------------- */

:root {
  --color-background: rgb(12, 13, 16);
  /* Только бекграунд */
  --color-containers: rgb(22, 22, 26);
  /* Первый переход после бекграунда */
  --color-containers2: rgb(28, 28, 34);
  /* Переход с контейнера на второй контейнер */
  /* если 1 контейнер то используем --color-containers2, если контейнеров 2 то первым берем --color-containers далее --color-containers2 */
  --color-atoms: rgb(38, 39, 48);
  /* стандартная заливка атома */
  --color-active: rgb(50, 52, 66);
  /* акцент атома */

  /* --- Colors / Text (сильный контраст к canvas) ------------------------- */
  --text-primary: #fafafa;
  --text-secondary: #d4d4d4;
  --text-muted: #a3a3a3;
  --text-disabled: #6e6e6e;
  --text-inverse: #16171a;

  /* --- Colors / Accent (Классический синий вернулся) ---------------------- */
  --accent: #58a6ff;
  --accent-hover: #79c0ff;
  --accent-pressed: #1f6feb;
  --accent-bg: rgba(88, 166, 255, 0.12);
  --accent-border: rgba(88, 166, 255, 0.4);

  /* --- Colors / Semantic ------------------------------------------------- */
  --success: #3fb950;
  --success-hover: #56d364;
  --success-bg: rgba(63, 185, 80, 0.12);
  --success-border: rgba(63, 185, 80, 0.4);

  --danger: #f85149;
  --danger-hover: #ff7b72;
  --danger-bg: rgba(248, 81, 73, 0.12);
  --danger-border: rgba(248, 81, 73, 0.4);

  --warning: #d29922;
  --warning-hover: #e3b341;
  --warning-bg: rgba(210, 153, 34, 0.12);
  --warning-border: rgba(210, 153, 34, 0.4);

  --info: #79c0ff;
  --info-hover: #a5d6ff;
  --info-bg: rgba(121, 192, 255, 0.10);
  --info-border: rgba(121, 192, 255, 0.35);

  /* --- Colors / Category (CS2) ------------------------------------------ */
  --stattrak: #cf6a32;
  --souvenir: #ffd700;

  /* --- Colors / Rarity (CS2) --------------------------------------------- */
  --rarity-consumer: #b0c3d9;
  --rarity-industrial: #5e98d9;
  --rarity-milspec: #4b69ff;
  --rarity-restricted: #8847ff;
  --rarity-classified: #d32ce6;
  --rarity-covert: #eb4b4b;
  --rarity-contraband: #e4ae39;

  /* --- Colors / Doppler phase (CS2 knives) ------------------------------ */
  --phase-default: #b090ff;
  /* Phase 1-4 */
  --phase-ruby: #e5202a;
  --phase-sapphire: #2a7dff;
  --phase-emerald: #10b981;
  --phase-black-pearl: #754c8f;

  /* --- Colors / Float quality ------------------------------------------- */
  --float-fn: #3fb950;
  --float-mw: #7ed957;
  --float-ft: #ffd700;
  --float-ww: #ff9800;
  --float-bs: #f85149;
  --float-out: rgba(80, 80, 80, 0.7);

  /* --- Colors / Border (в тон новой палитры) ---------------------------- */
  --border-default: #313238;
  --border-muted: #22232a;
  --border-subtle: #1a1b20;

  /* --- Typography ------------------------------------------------------- */
  --font-sans: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
  --font-mono: Consolas, Menlo, Monaco, 'Liberation Mono', monospace;

  /* Шкала: xs=10 / s=12 / m=14 / l=16 / xl=18 / 2xl=20 / 3xl=24 / 4xl=32.
     --text-xs — только для ancillary-лейблов внутри overlay-панелей
     (sticker-wear, pricediff-head); не использовать для body-текста. */
  --text-xs: 10px;
  --text-s: 12px;
  --text-m: 14px;
  --text-l: 16px;
  --text-xl: 18px;
  --text-2xl: 20px;
  --text-3xl: 24px;
  --text-4xl: 32px;

  --weight-regular: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  --leading-tight: 1.25;
  --leading-normal: 1.5;
  --leading-relaxed: 1.7;

  /* --- Spacing (4px scale) ---------------------------------------------- */
  --space-0: 0;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;

  /* --- Radius ----------------------------------------------------------- */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-pill: 999px;
  --radius-circle: 50%;

  /* --- Shadow / Elevation ----------------------------------------------- */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.4);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.5);
  --shadow-popover: 0 10px 28px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.4);
  --focus-ring: 0 0 0 3px rgba(88, 166, 255, 0.35);
  --focus-ring-danger: 0 0 0 3px rgba(248, 81, 73, 0.35);
  --glow-success: 0 0 20px rgba(63, 185, 80, 0.55);
  --glow-success-sm: 0 0 8px rgba(63, 185, 80, 0.55);
  --glow-danger: 0 0 16px rgba(248, 81, 73, 0.45);

  /* Прозрачные подложки для tooltip и modal overlay */
  --tooltip-bg: rgba(20, 20, 20, 0.92);
  --modal-overlay-bg: rgba(0, 0, 0, 0.65);

  /* --- Overlay (для action-иконок и .uk-overlay-panel поверх картинок) -- */
  --overlay-bg-faint: rgba(42, 42, 42, 0.6);
  --overlay-bg: rgba(42, 42, 42, 0.55);
  --overlay-bg-strong: rgba(42, 42, 42, 0.8);
  --overlay-bg-solid: rgba(42, 42, 42, 0.9);
  --overlay-bg-solid-hover: rgba(42, 42, 42, 0.95);

  /* Тень текста поверх картинки (для названия, float, phase, seed) */
  --text-shadow-on-image: 0 1px 3px rgba(0, 0, 0, 0.85);
  --text-shadow-on-image-lg: 0 2px 4px rgba(0, 0, 0, 0.85);

  /* --- Transitions ------------------------------------------------------ */
  --easing: cubic-bezier(0.2, 0, 0, 1);
  --transition-fast: 120ms var(--easing);
  --transition-base: 200ms var(--easing);
  --transition-slow: 300ms var(--easing);

  /* --- Z-index ladder --------------------------------------------------- */
  --z-base: 1;
  --z-sticky: 1020;
  --z-dropdown: 1000;
  --z-modal: 1040;
  --z-popover: 1050;
  --z-tooltip: 9999;
}

/* -------------------------------------------------------------------------
   2. BASE / RESET (only inside .uk-scope so existing site is untouched)
   ------------------------------------------------------------------------- */

.uk-scope,
.uk-scope * {
  box-sizing: border-box;
}

.uk-scope {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-m);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--color-background);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.uk-scope h1,
.uk-scope h2,
.uk-scope h3,
.uk-scope h4 {
  margin: 0;
  font-weight: var(--weight-bold);
  line-height: var(--leading-tight);
  color: var(--text-primary);
}

/* Dark custom scrollbar (Firefox + WebKit) */
.uk-scope {
  scrollbar-width: thin;
  scrollbar-color: #313238 transparent;
}

.uk-scope * {
  scrollbar-width: thin;
  scrollbar-color: #313238 transparent;
}

.uk-scope ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

.uk-scope ::-webkit-scrollbar-track {
  background: transparent;
}

.uk-scope ::-webkit-scrollbar-thumb {
  background: #313238;
  border: 2px solid var(--color-background);
  border-radius: 6px;
}

.uk-scope ::-webkit-scrollbar-thumb:hover {
  background: #3d3e46;
}

.uk-scope ::-webkit-scrollbar-corner {
  background: transparent;
}

.uk-scope p {
  margin: 0;
}

.uk-scope code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-containers);
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   3. LAYOUT PRIMITIVES
   ------------------------------------------------------------------------- */

.uk-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 var(--space-6);
}

.uk-container--narrow {
  max-width: 720px;
}

.uk-container--medium {
  /* 1100px usable inside the container's 0 var(--space-6) horizontal padding */
  max-width: 1148px;
}

.uk-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.uk-stack--sm {
  gap: var(--space-2);
}

.uk-stack--lg {
  gap: var(--space-6);
}

.uk-cluster {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
}

.uk-cluster--md {
  gap: var(--space-3);
}

.uk-cluster--lg {
  gap: var(--space-4);
}

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

/* -------------------------------------------------------------------------
   4. ATOMS
   ------------------------------------------------------------------------- */

/* --- Button ------------------------------------------------------------- */
.uk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 0 var(--space-4);
  height: 32px;
  font-family: inherit;
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast), box-shadow var(--transition-fast),
    transform var(--transition-fast);
}

.uk-btn:hover {
  background: var(--color-active);
  border-color: var(--text-muted);
  text-decoration: none;
}

.uk-btn:active {
  transform: translateY(1px);
}

.uk-btn:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.uk-btn:disabled,
.uk-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.uk-btn--primary {
  background: var(--color-atoms);
  border-color: var(--accent);
  color: var(--accent);
}

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

.uk-btn--primary:active {
  background: color-mix(in srgb, var(--accent) 18%, transparent);
  transform: translateY(1px);
}

.uk-btn--secondary {
  background: var(--color-atoms);
  border-color: var(--border-default);
  color: var(--text-primary);
}

.uk-btn--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--text-secondary);
}

.uk-btn--ghost:hover {
  background: var(--color-active);
  border-color: transparent;
  color: var(--text-primary);
}

.uk-btn--danger {
  background: var(--danger-bg);
  border-color: var(--danger-border);
  color: var(--danger);
}

.uk-btn--danger:hover {
  background: color-mix(in srgb, var(--danger) 22%, transparent);
  border-color: var(--danger);
  color: var(--danger-hover);
}

.uk-btn--success {
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success);
}

.uk-btn--success:hover {
  background: color-mix(in srgb, var(--success) 22%, transparent);
  border-color: var(--success);
  color: var(--success-hover);
}

/* Rarity-tinted chip — uses --rarity-color set inline (var(--rarity-covert) etc.).
   Подсветка через color-mix, без хардкода. */
.uk-btn--rarity {
  background: transparent;
  border-color: color-mix(in srgb, var(--rarity-color) 35%, transparent);
  color: var(--rarity-color);
}

.uk-btn--rarity:hover {
  background: color-mix(in srgb, var(--rarity-color) 10%, transparent);
  border-color: var(--rarity-color);
  color: var(--rarity-color);
}

.uk-btn--rarity[aria-pressed="true"],
.uk-btn--rarity.uk-btn--active {
  background: color-mix(in srgb, var(--rarity-color) 18%, transparent);
  border-color: var(--rarity-color);
  color: var(--rarity-color);
}

.uk-btn--sm {
  height: var(--space-6);
  padding: 0 var(--space-3);
  font-size: var(--text-s);
  border-radius: var(--radius-sm);
}

.uk-btn--lg {
  height: var(--space-10);
  padding: 0 var(--space-5);
  font-size: var(--text-l);
  border-radius: var(--radius-lg);
}

.uk-btn--icon {
  width: var(--space-8);
  padding: 0;
  border-radius: var(--radius-md);
}

.uk-btn--icon.uk-btn--sm {
  width: var(--space-6);
}

.uk-btn--icon.uk-btn--lg {
  width: var(--space-10);
}

.uk-btn--loading {
  position: relative;
  color: transparent !important;
  pointer-events: none;
}

.uk-btn--loading::after {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 14px;
  height: 14px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--text-primary);
  animation: uk-spin 0.7s linear infinite;
}

.uk-btn--primary.uk-btn--loading::after,
.uk-btn--danger.uk-btn--loading::after {
  color: #fff;
}

@keyframes uk-spin {
  to {
    transform: rotate(360deg);
  }
}

/* --- Input -------------------------------------------------------------- */
.uk-input,
.uk-textarea,
.uk-select {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: var(--text-m);
  line-height: var(--leading-normal);
  color: var(--text-primary);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  padding: var(--space-2) var(--space-3);
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast),
    background var(--transition-fast);
  outline: none;
}

.uk-input {
  height: 32px;
}

.uk-input--sm {
  height: var(--space-6);
  padding: 0 var(--space-2);
  font-size: var(--text-s);
  border-radius: var(--radius-sm);
}

.uk-input::placeholder,
.uk-textarea::placeholder {
  color: var(--text-disabled);
}

/* Убираем спиннеры у number inputs */
.uk-input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

.uk-input[type="number"]::-webkit-outer-spin-button,
.uk-input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.uk-input:hover,
.uk-textarea:hover,
.uk-select:hover {
  border-color: var(--text-muted);
}

.uk-input:focus,
.uk-textarea:focus,
.uk-select:focus {
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.uk-input:disabled,
.uk-textarea:disabled,
.uk-select:disabled {
  background: var(--color-containers);
  color: var(--text-disabled);
  cursor: not-allowed;
}

.uk-input--error,
.uk-textarea--error {
  border-color: var(--danger);
}

.uk-input--error:focus,
.uk-textarea--error:focus {
  box-shadow: var(--focus-ring-danger);
}

.uk-input--success,
.uk-textarea--success {
  border-color: var(--success);
}

.uk-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

/* Inline ×-кнопка для очистки инпута. Wrapper:
   <div class="uk-input-clearable">
     <input class="uk-input" ...>
     <button class="uk-input-clearable__clear">×</button>
   </div>
   Кнопка появляется только когда инпут не пустой (через :placeholder-shown). */
.uk-input-clearable {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
}

.uk-input-clearable>.uk-input {
  padding-right: var(--space-7);
}

.uk-input-clearable__clear {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-l);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.uk-input-clearable:has(input:not(:placeholder-shown))>.uk-input-clearable__clear {
  display: inline-flex;
}

.uk-input-clearable__clear:hover {
  background: var(--color-active);
  color: var(--text-primary);
}

.uk-input-group__icon {
  position: absolute;
  top: 50%;
  left: var(--space-3);
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  line-height: 1;
  pointer-events: none;
  color: var(--text-muted);
  font-size: var(--text-m);
}

.uk-input-group__icon--right {
  left: auto;
  right: var(--space-3);
}

.uk-input-group .uk-input {
  padding-left: var(--space-8);
}

.uk-input-group .uk-input.uk-input--icon-right {
  padding-left: var(--space-3);
  padding-right: var(--space-8);
}

.uk-textarea {
  resize: vertical;
  min-height: 80px;
  padding: var(--space-2) var(--space-3);
}

.uk-textarea--code {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  background: var(--color-background);
  color: var(--text-secondary);
}

/* --- Select ------------------------------------------------------------- */
.uk-select {
  height: 32px;
  line-height: 1;
  padding: 0 var(--space-8) 0 var(--space-3);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path fill='%239ea7b1' d='M2 4l4 4 4-4'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--space-3) center;
  cursor: pointer;
}

.uk-select--sm {
  height: var(--space-6);
  padding: 0 var(--space-6) 0 var(--space-2);
  font-size: var(--text-s);
  border-radius: var(--radius-sm);
  background-position: right var(--space-2) center;
}

/* Match the open <select> popup to .uk-fdrop__body fill (var(--color-atoms)).
   Native option list is browser-rendered; only background-color and color
   can be set reliably (Chromium 117+, Firefox). */
.uk-select option {
  background: var(--color-atoms);
  color: var(--text-primary);
}

.uk-select option:disabled {
  color: var(--text-disabled);
}

/* --- Checkbox / Radio --------------------------------------------------- */
.uk-checkbox,
.uk-radio {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-m);
  color: var(--text-secondary);
  cursor: pointer;
  user-select: none;
}

.uk-checkbox input[type="checkbox"],
.uk-radio input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  margin: 0;
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  display: inline-grid;
  place-content: center;
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
  flex-shrink: 0;
}

.uk-radio input[type="radio"] {
  border-radius: 50%;
}

.uk-checkbox input[type="checkbox"]:hover,
.uk-radio input[type="radio"]:hover {
  border-color: var(--text-muted);
}

.uk-checkbox input[type="checkbox"]:focus-visible,
.uk-radio input[type="radio"]:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.uk-checkbox input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.uk-checkbox input[type="checkbox"]:checked::after {
  content: "";
  width: 9px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(1px, -1px);
}

.uk-radio input[type="radio"]:checked {
  border-color: var(--accent);
  background: var(--color-atoms);
}

.uk-radio input[type="radio"]:checked::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.uk-checkbox input:disabled,
.uk-radio input:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.uk-checkbox:has(input:disabled),
.uk-radio:has(input:disabled) {
  cursor: not-allowed;
  color: var(--text-disabled);
}

.uk-checkbox:has(input:disabled) input,
.uk-radio:has(input:disabled) input {
  opacity: 0.5;
}

/* --- Slider (dual-thumb range) ----------------------------------------- */
/* Структура:
   <div class="uk-slider" data-min-input="..." data-max-input="..." data-min="0" data-max="1" data-step="0.01">
     <div class="uk-slider__track"></div>
     <div class="uk-slider__fill"></div>
     <input type="range" class="uk-slider__thumb uk-slider__thumb--min">
     <input type="range" class="uk-slider__thumb uk-slider__thumb--max">
   </div>
   Оба <input type=range> положены друг на друга через position:absolute.
   pointer-events на самом input'е выключен — но включён на ::thumb,
   чтобы можно было хватать оба бегунка. */
.uk-slider {
  position: relative;
  height: 20px;
  margin: var(--space-1) 0;
  /* padding на половину ширины бегунка (7px), чтобы центр шарика
     совпадал с концом линии в крайних значениях. */
  padding: 0 7px;
}

.uk-slider__track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  transform: translateY(-50%);
  background: var(--color-atoms);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.uk-slider__fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--accent);
  border-radius: var(--radius-pill);
  pointer-events: none;
}

.uk-slider__thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
  margin: 0;
  padding: 0;
  outline: none;
}

.uk-slider__thumb::-webkit-slider-runnable-track {
  background: transparent;
  border: 0;
  height: 4px;
}

.uk-slider__thumb::-moz-range-track {
  background: transparent;
  border: 0;
  height: 4px;
}

.uk-slider__thumb::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--color-itembackground);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
  /* WebKit ставит thumb в track-top + margin-top; центрируем шарик
     относительно 4px track'а: -(14-4)/2 = -5px. */
  margin-top: -5px;
}

.uk-slider__thumb::-moz-range-thumb {
  width: 14px;
  height: 14px;
  background: var(--accent);
  border: 2px solid var(--color-itembackground);
  border-radius: 50%;
  pointer-events: auto;
  cursor: pointer;
}

/* --- Switch ------------------------------------------------------------ */
.uk-switch {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  cursor: pointer;
  font-size: var(--text-m);
  color: var(--text-secondary);
  user-select: none;
}

.uk-switch input {
  display: none;
}

.uk-switch__track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-pill);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.uk-switch__thumb {
  position: absolute;
  top: 1px;
  left: 1px;
  width: 16px;
  height: 16px;
  background: var(--text-secondary);
  border-radius: 50%;
  transition: transform var(--transition-base), background var(--transition-fast);
}

.uk-switch input:checked+.uk-switch__track {
  background: var(--accent);
  border-color: var(--accent);
}

.uk-switch input:checked+.uk-switch__track .uk-switch__thumb {
  transform: translateX(16px);
  background: #fff;
}

.uk-switch input:focus-visible+.uk-switch__track {
  box-shadow: var(--focus-ring);
}

/* --- Item action (round icon button, overlay on item cards) ------------ */
.uk-item-actions {
  display: inline-flex;
  flex-direction: column;
  gap: var(--space-2);
}

.uk-item-action {
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--overlay-bg-solid);
  border: 1px solid var(--border-default);
  border-radius: 50%;
  color: var(--text-primary);
  cursor: pointer;
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    transform var(--transition-fast);
}

.uk-item-action:hover {
  background: var(--accent);
  border-color: var(--accent-hover);
  transform: scale(1.1);
}

.uk-item-action:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
}

.uk-item-action svg,
.uk-item-action img {
  width: 18px;
  height: 18px;
  fill: currentColor;
  object-fit: contain;
  display: block;
}

.uk-item-action--static {
  cursor: default;
}

.uk-item-action--static:hover {
  background: var(--overlay-bg-solid);
  border-color: var(--border-default);
  transform: none;
}

.uk-item-action--static.time-icon:hover {
  background: var(--accent);
  border-color: var(--accent-hover);
  transform: scale(1.1);
}

/* --- Overlay panel (translucent container for stickers / charms rows) -- */
.uk-overlay-panel {
  display: inline-flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--overlay-bg);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.uk-overlay-panel:hover {
  background: var(--overlay-bg-solid-hover);
  border-color: var(--accent);
}

.uk-overlay-panel--tight {
  padding: 0 var(--space-1);
  gap: 0;
}

/* --- Status dot --------------------------------------------------------- */
.uk-status-dot {
  --dot-color: var(--text-muted);
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot-color);
  border: 2px solid color-mix(in srgb, var(--dot-color) 60%, transparent);
  flex-shrink: 0;
}

.uk-status-dot--online {
  --dot-color: var(--success);
  box-shadow: var(--glow-success-sm);
}

.uk-status-dot--offline {
  --dot-color: var(--danger);
}

.uk-status-dot--idle {
  --dot-color: var(--warning);
}

/* --- Link --------------------------------------------------------------- */
.uk-link {
  color: var(--accent);
  text-decoration: none;
  cursor: pointer;
  transition: color var(--transition-fast);
}

.uk-link:hover {
  color: var(--accent-hover);
  text-decoration: underline;
}

/* --- Kbd ---------------------------------------------------------------- */
.uk-kbd {
  display: inline-block;
  padding: 0 var(--space-2);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-secondary);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-bottom-width: 2px;
  border-radius: var(--radius-sm);
  line-height: var(--leading-normal);
}

/* --- Tooltip (JS-positioned, stylized like existing .custom-tooltip) --- */
.uk-tooltip {
  position: fixed;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-m);
  line-height: var(--leading-normal);
  color: var(--text-secondary);
  background: var(--tooltip-bg);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  white-space: pre;
  width: max-content;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--transition-base);
  z-index: var(--z-tooltip);
}

.uk-tooltip--visible {
  opacity: 1;
}

/* Невидимый тултип не должен перехватывать клики (актуально для prices-режима,
   где pointer-events: auto). */
.uk-tooltip:not(.uk-tooltip--visible) {
  pointer-events: none;
}

/* Price-table tooltip — кастомный контент для .uk-item__pricediff hover.
   Сетка [icon name bid ask] с разделителем между group1 (best/buff/csfloat/steam)
   и group2 (остальные). Тултип использует те же токены, что обычный uk-tooltip. */
.uk-tooltip--prices {
  white-space: normal;
  padding: var(--space-3) var(--space-4);
  background: rgba(20, 20, 20, 0.98);
  border: 1px solid var(--border-default);
  pointer-events: auto;
}

.uk-pricetable {
  display: grid;
  grid-template-columns: 18px auto auto auto;
  column-gap: var(--space-5);
  row-gap: var(--space-1);
  align-items: center;
}

.uk-pricetable__head {
  font-size: var(--text-s);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.uk-pricetable__head--num {
  text-align: right;
}

.uk-pricetable__icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: block;
}

.uk-pricetable__name {
  color: var(--text-secondary);
  font-size: var(--text-m);
}

.uk-pricetable__bid,
.uk-pricetable__ask {
  font-family: var(--font-mono);
  font-size: var(--text-m);
  color: var(--text-primary);
  text-align: right;
}

.uk-pricetable__ask--good,
.uk-pricetable__bid--good {
  color: var(--success);
}

.uk-pricetable__ask--bad,
.uk-pricetable__bid--bad {
  color: var(--warning);
}

.uk-pricetable__sep {
  grid-column: 1 / -1;
  height: 1px;
  background: var(--border-default);
  margin: var(--space-1) 0;
}

.uk-pricetable__changes {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  gap: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-m);
  color: var(--text-primary);
}

.uk-pricetable__change {
  display: inline-flex;
  align-items: baseline;
  gap: var(--space-2);
}

.uk-pricetable__change-label {
  font-family: var(--font-sans);
  font-size: var(--text-s);
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.uk-pricetable__change--pos {
  color: var(--success);
}

.uk-pricetable__change--neg {
  color: var(--danger);
}

/* Row-anchor: 4 cells become grid items via display:contents.
   Hover/focus highlights all 4 cells of the row at once. */
.uk-pricetable__row {
  display: contents;
  color: inherit;
  text-decoration: none;
}

.uk-pricetable__row:hover .uk-pricetable__name,
.uk-pricetable__row:focus-visible .uk-pricetable__name {
  color: var(--text-primary);
  text-decoration: underline;
}


.uk-pricetable__msg {
  font-family: var(--font-mono);
  font-size: var(--text-s);
  color: var(--text-muted);
}

/* --- Skeleton / Shimmer ------------------------------------------------- */
.uk-skeleton {
  display: block;
  background: linear-gradient(90deg,
      var(--color-containers) 0%,
      var(--color-atoms) 50%,
      var(--color-containers) 100%);
  background-size: 200% 100%;
  border-radius: var(--radius-sm);
  animation: uk-shimmer 1.4s ease-in-out infinite;
}

@keyframes uk-shimmer {
  0% {
    background-position: 200% 0;
  }

  100% {
    background-position: -200% 0;
  }
}

/* -------------------------------------------------------------------------
   5. MOLECULES
   ------------------------------------------------------------------------- */

/* --- Form group --------------------------------------------------------- */
.uk-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.uk-form-group__label {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.uk-form-group__label>span {
  flex: 1 1 auto;
}

.uk-form-group__label--required::after {
  content: " *";
  color: var(--danger);
}

.uk-form-group__hint {
  font-size: var(--text-s);
  color: var(--text-muted);
}

.uk-form-group__error {
  font-size: var(--text-s);
  color: var(--danger);
}

.uk-form-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: stretch;
}

.uk-form-row>* {
  flex: 1 1 auto;
  min-width: 0;
}

/* --- Filter block ------------------------------------------------------- */
.uk-filter-block {
  background: var(--color-containers);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-3);
}

.uk-filter-block__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  margin-bottom: var(--space-2);
}

.uk-filter-block__title {
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: var(--text-muted);
}

.uk-filter-block__reset {
  font-size: var(--text-xs);
  color: var(--text-muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  padding: 0 var(--space-2);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.uk-filter-block__reset:hover {
  color: var(--text-primary);
  background: var(--color-active);
}

.uk-filter-block__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* --- Fdrop (floating dropdown) ----------------------------------------- */
.uk-fdrop {
  position: relative;
  display: inline-block;
  width: 100%;
}

.uk-fdrop__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 32px;
  padding: 0 var(--space-3);
  font-family: inherit;
  font-size: var(--text-m);
  color: var(--text-primary);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast);
}

.uk-fdrop__toggle:hover {
  border-color: var(--text-muted);
}

.uk-fdrop__toggle:focus-visible {
  outline: none;
  box-shadow: var(--focus-ring);
  border-color: var(--accent);
}

.uk-fdrop__label {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.uk-fdrop__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 var(--space-1);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  color: #fff;
  background: var(--accent);
  border-radius: var(--radius-pill);
  line-height: 1;
}

.uk-fdrop__arrow {
  font-size: var(--text-l);
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.uk-fdrop--open .uk-fdrop__arrow {
  transform: rotate(180deg);
}

.uk-fdrop--open .uk-fdrop__toggle {
  border-color: var(--accent);
}

.uk-fdrop__body {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 100%;
  max-height: 320px;
  overflow-y: auto;
  padding: var(--space-2);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-dropdown);
  display: none;
}

.uk-fdrop--open .uk-fdrop__body {
  display: block;
}

/* --- Searchable list dropdown ------------------------------------------ */
.uk-searchlist {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 260px;
}

.uk-searchlist__list {
  max-height: 240px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: var(--space-1) 0;
}

.uk-searchlist__item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-m);
  color: var(--text-secondary);
  transition: background var(--transition-fast);
}

.uk-searchlist__item:hover {
  background: var(--color-active);
  color: var(--text-primary);
}

/* --- Combo (text input with an autocomplete menu) ----------------------- */
.uk-combo {
  position: relative;
  width: 100%;
}

/* kill the native datalist / picker indicator if a `list` is ever attached */
.uk-combo .uk-input::-webkit-calendar-picker-indicator {
  display: none !important;
}

.uk-combo__menu {
  position: absolute;
  top: 100%;            /* flush under the input — no gap */
  left: 0;
  width: 100%;          /* exactly the input width */
  max-height: 220px;
  overflow-y: auto;
  margin: 0;
  padding: var(--space-1);
  list-style: none;
  background: var(--color-atoms);
  border: 1px solid var(--accent);
  border-top: 0;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  box-shadow: var(--shadow-popover);
  z-index: var(--z-dropdown);
  display: none;
}

.uk-combo--open .uk-combo__menu {
  display: block;
}

.uk-combo__option {
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: var(--text-m);
  color: var(--text-secondary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background var(--transition-fast);
}

.uk-combo__option:hover,
.uk-combo__option--active {
  background: var(--color-active);
  color: var(--text-primary);
}

/* --- Tabs --------------------------------------------------------------- */
.uk-tabs {
  display: flex;
  gap: var(--space-1);
  padding: var(--space-1);
  background: var(--color-containers);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  width: fit-content;
}

.uk-tab {
  padding: var(--space-1) var(--space-3);
  font-family: inherit;
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  background: transparent;
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.uk-tab:hover {
  color: var(--text-primary);
}

.uk-tab--active {
  background: var(--color-atoms);
  color: var(--text-primary);
  box-shadow: var(--shadow-sm);
}

/* --- Pagination --------------------------------------------------------- */
.uk-pagination {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  flex-wrap: wrap;
}

.uk-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 var(--space-2);
  font-family: inherit;
  font-size: var(--text-m);
  color: var(--text-secondary);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast),
    border-color var(--transition-fast);
}

.uk-page-btn:hover {
  background: var(--color-active);
  color: var(--text-primary);
  border-color: var(--text-muted);
}

.uk-page-btn--current {
  background: var(--color-atoms);
  border-color: var(--accent);
  color: var(--accent);
  font-weight: var(--weight-bold);
  cursor: default;
}

.uk-page-btn--current:hover {
  background: var(--color-atoms);
  border-color: var(--accent);
  color: var(--accent);
}

.uk-page-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.uk-pagination__ellipsis {
  padding: 0 var(--space-2);
  color: var(--text-muted);
  font-size: var(--text-m);
}

/* Jump-to-page input — компактный numeric input внутри .uk-pagination */
.uk-pagination__input {
  width: var(--space-12);
  height: var(--space-8);
  padding: 0 var(--space-2);
  font-family: inherit;
  font-size: var(--text-m);
  text-align: center;
  color: var(--text-secondary);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  margin-left: var(--space-1);
  font-variant-numeric: tabular-nums;
}

.uk-pagination__input:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: var(--focus-ring);
}

.uk-pagination__input::placeholder {
  color: var(--text-disabled);
}

.uk-pagination__input::-webkit-outer-spin-button,
.uk-pagination__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* --- Card --------------------------------------------------------------- */
.uk-card {
  background: var(--color-containers);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.uk-card:hover {
  border-color: var(--border-default);
}

.uk-card--interactive {
  cursor: pointer;
}

.uk-card--interactive:hover {
  border-color: var(--accent-border);
  box-shadow: var(--shadow-md);
}

.uk-card--selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-bg);
}

/* Hover на выделенной карточке не должен стирать glow и border от
   .uk-card--selected. .uk-card--interactive:hover перебивает оба:
   border-color на --accent-border (40% alpha) и box-shadow на shadow-md без
   кольца. Возвращаем full-opacity border и накладываем кольцо поверх тени. */
.uk-card--interactive.uk-card--selected:hover {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent), var(--shadow-md);
}

.uk-card--solo {
  background: var(--color-containers);
}

.uk-card--solo>.uk-card__header,
.uk-card--solo>.uk-card__footer {
  background: var(--color-containers2);
}

.uk-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border-bottom: 1px solid var(--border-subtle);
}

.uk-card__title {
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

.uk-card__title-icon {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-sm);
}

.uk-card__title--lg {
  font-size: var(--text-xl);
}

.uk-card__hint {
  color: var(--text-muted);
  font-size: var(--text-s);
}

.uk-card__body {
  padding: var(--space-4);
  color: var(--text-secondary);
  font-size: var(--text-m);
  line-height: var(--leading-normal);
}

.uk-card__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  background: var(--color-containers);
}

.uk-card__footer--start {
  justify-content: flex-start;
}

.uk-card__details {
  color: var(--text-muted);
  font-size: var(--text-s);
}

.uk-card__details>summary {
  cursor: pointer;
  color: var(--text-secondary);
  list-style: none;
}

.uk-card__details>summary::-webkit-details-marker {
  display: none;
}

.uk-card__details>ol {
  margin: var(--space-2) 0 0;
  padding-left: var(--space-5);
  line-height: var(--leading-relaxed);
}

/* --- Empty state -------------------------------------------------------- */
.uk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-3);
  padding: var(--space-12) var(--space-6);
  color: var(--text-muted);
}

.uk-empty__icon {
  font-size: var(--text-4xl);
  color: var(--text-disabled);
  margin-bottom: var(--space-2);
}

.uk-empty__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}

.uk-empty__text {
  font-size: var(--text-m);
  color: var(--text-muted);
  max-width: 360px;
}

/* --- Toast / Notification ---------------------------------------------- */
.uk-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  min-width: 300px;
  max-width: 420px;
  font-size: var(--text-m);
  color: var(--text-primary);
}

.uk-toast--success {
  border-left-color: var(--success);
}

.uk-toast--danger {
  border-left-color: var(--danger);
}

.uk-toast--warning {
  border-left-color: var(--warning);
}

.uk-toast__icon {
  flex-shrink: 0;
  width: 18px;
  font-size: var(--text-l);
  line-height: var(--leading-tight);
}

.uk-toast--success .uk-toast__icon {
  color: var(--success);
}

.uk-toast--danger .uk-toast__icon {
  color: var(--danger);
}

.uk-toast--warning .uk-toast__icon {
  color: var(--warning);
}

.uk-toast__body {
  flex: 1;
}

.uk-toast__title {
  font-weight: var(--weight-bold);
  margin-bottom: var(--space-1);
}

.uk-toast__desc {
  font-size: var(--text-s);
  color: var(--text-muted);
  line-height: var(--leading-normal);
}

.uk-toast__close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-l);
  line-height: 1;
  padding: var(--space-1);
  border-radius: var(--radius-sm);
  transition: color var(--transition-fast), background var(--transition-fast);
}

.uk-toast__close:hover {
  color: var(--text-primary);
  background: var(--color-active);
}

/* --- Modal / Dialog ---------------------------------------------------- */
.uk-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--modal-overlay-bg);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
  z-index: var(--z-modal);
}

.uk-modal {
  width: 100%;
  max-width: 480px;
  background: var(--color-containers);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 32px);
}

.uk-modal--lg {
  max-width: 800px;
}

.uk-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4) var(--space-5);
  border-bottom: 1px solid var(--border-subtle);
}

.uk-modal__title {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.uk-modal__close {
  background: transparent;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  font-size: var(--text-2xl);
  line-height: 1;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.uk-modal__close:hover {
  color: var(--text-primary);
  background: var(--color-active);
}

.uk-modal__body {
  padding: var(--space-5);
  overflow-y: auto;
  color: var(--text-secondary);
  font-size: var(--text-m);
}

.uk-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-5);
  border-top: 1px solid var(--border-subtle);
  background: var(--color-containers);
}

/* --- Dropzone ---------------------------------------------------------- */
.uk-dropzone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: var(--space-10) var(--space-6);
  background: var(--color-atoms);
  border: 2px dashed var(--border-default);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
  font-size: var(--text-m);
  cursor: pointer;
  transition: border-color var(--transition-fast), background var(--transition-fast),
    color var(--transition-fast);
}

.uk-dropzone:hover,
.uk-dropzone--active {
  border-color: var(--accent);
  background: var(--accent-bg);
  color: var(--text-primary);
}

.uk-dropzone__icon {
  font-size: var(--text-4xl);
  opacity: 0.7;
}

.uk-dropzone__hint {
  font-size: var(--text-s);
  color: var(--text-disabled);
}

/* --- Section header ---------------------------------------------------- */
.uk-section-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.uk-toolbar-divider {
  flex: 0 0 auto;
  width: 1px;
  align-self: stretch;
  background: var(--border-default);
  margin: 0 var(--space-1);
}

.uk-section-header__title {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.uk-section-header__actions {
  display: flex;
  gap: var(--space-2);
}

.uk-section-header__subtitle {
  color: var(--text-muted);
  font-size: var(--text-s);
}

/* --- Sortable table header --------------------------------------------- */
.uk-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: var(--text-m);
  color: var(--text-secondary);
  background: var(--color-containers);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.uk-table th,
.uk-table td {
  padding: var(--space-2) var(--space-3);
  text-align: left;
  border-bottom: 1px solid var(--border-subtle);
}

.uk-table thead {
  background: var(--color-atoms);
}

.uk-table th {
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-default);
}

.uk-table tbody tr:hover {
  background: var(--color-active);
}

.uk-table tbody tr:last-child td {
  border-bottom: 0;
}

/* Click / drag-selectable table rows (Bids management) */
.uk-table tbody tr.uk-bid-row {
  cursor: pointer;
  user-select: none;
}

.uk-table tbody tr.is-selected td,
.uk-table tbody tr.is-selected:hover td {
  background: var(--accent-bg);
}

.uk-th--sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--transition-fast);
}

.uk-th--sortable:hover {
  color: var(--text-primary);
}

.uk-th__sort-indicator {
  display: inline-block;
  margin-left: var(--space-1);
  font-size: var(--text-xs);
  color: var(--text-disabled);
}

.uk-th--sorted-asc .uk-th__sort-indicator::before {
  content: "▲";
  color: var(--accent);
}

.uk-th--sorted-desc .uk-th__sort-indicator::before {
  content: "▼";
  color: var(--accent);
}

.uk-th--sortable:not(.uk-th--sorted-asc):not(.uk-th--sorted-desc) .uk-th__sort-indicator::before {
  content: "↕";
}

/* --- Price table (modifier of .uk-table) ------------------------------ */
/* Inspired by legacy #price-table from style.css. Per-item занимает 2 строки
   (ask + bid). Часть колонок (img, hashname, best, diff, change, count) —
   rowspan=2; рыночные колонки — ask в верхней строке, bid в нижней. */

.uk-table--prices {
  /* Сумма ширин колонок: 72+240+40+80+(68*9)+(60*3)+(68*2)+60 = 1420.
     Явный пиксельный width нужен, чтобы table-layout: fixed заработал
     стабильно — с width: max-content некоторые движки игнорируют <col>
     widths при ререндере и колонки начинают "плясать". */
  width: 1420px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: fixed;
  font-size: var(--text-m);
  background: var(--color-containers2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  /* overflow: clip — клиппинг под border-radius без создания scroll-контейнера,
     иначе position:sticky thead вычисляется относительно <table>, а не обёртки,
     и заголовок уезжает при вертикальном скролле .uk-pricepage__main. */
  overflow: clip;
}

/* Lock every column's width — both via colgroup <col> and per-cell nth-child,
   so content can never push a column wider. */

/* img (col 1) — 72px. Не вешаем width на th:nth-child(1), потому что
   первая th — это search с colspan="2" (накрывает img+name). */
.uk-table--prices col:nth-child(1) {
  width: 72px;
}

/* hashname (col 2, no th — merged into search th colspan=2) — 240px */
.uk-table--prices col:nth-child(2) {
  width: 240px;
}

/* ВАЖНО: th-селекторы ниже скоупим на :first-child строки thead, иначе они
   цепляют ths второй строки thead (Best/Buff/Steam diff sub-headers) и
   назначают им чужие ширины — браузер из-за этого пляшет колонки. */

/* type (col 3, th 2 в row 1) — 40px */
.uk-table--prices col:nth-child(3),
.uk-table--prices>thead>tr:first-child>th:nth-child(2) {
  width: 40px;
}

/* best (col 4, th 3 в row 1) — 80px */
.uk-table--prices col:nth-child(4),
.uk-table--prices>thead>tr:first-child>th:nth-child(3) {
  width: 80px;
}

/* markets (cols 5-13, ths 4-12 в row 1) — 68px */
.uk-table--prices col:nth-child(n+5):nth-child(-n+13),
.uk-table--prices>thead>tr:first-child>th:nth-child(n+4):nth-child(-n+12) {
  width: 68px;
}

/* diff sub-cols (cols 14-16) — 60px (под colspan=3 group header) */
.uk-table--prices col:nth-child(n+14):nth-child(-n+16) {
  width: 60px;
}

/* 7d / 30d (cols 17-18, ths 14-15 в row 1) — 68px */
.uk-table--prices col:nth-child(n+17):nth-child(-n+18),
.uk-table--prices>thead>tr:first-child>th:nth-child(n+14):nth-child(-n+15) {
  width: 68px;
}

/* count (col 19, th 16 в row 1) — 60px */
.uk-table--prices col:nth-child(19),
.uk-table--prices>thead>tr:first-child>th:nth-child(16) {
  width: 60px;
}

/* Body cells: clip overflow without ellipsis dots — text just gets cut at the column edge. */
.uk-table--prices td {
  overflow: hidden;
  text-overflow: clip;
}

/* Lock body row height so content variation can't change row height.
   36px per row → 72px per ask/bid pair, matches the 64px image + padding in the
   rowspan=2 image cell. Cells need an explicit height too because table cells
   treat tr `height` as a minimum unless their own height is also set. */
.uk-table--prices tbody tr {
  height: 36px;
}

.uk-table--prices tbody td {
  height: 36px;
}

.uk-table--prices tbody td[rowspan="2"] {
  height: 72px;
}

/* Header */
.uk-table--prices thead {
  background: var(--color-containers2);
  position: sticky;
  top: 0;
  z-index: 2;
}

.uk-table--prices th {
  padding: var(--space-1) var(--space-2);
  text-align: center;
  font-weight: var(--weight-bold);
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
  text-transform: uppercase;
  font-size: var(--text-xs);
  letter-spacing: 0.5px;
  white-space: nowrap;
  vertical-align: middle;
}

.uk-table--prices th.uk-th--sortable {
  cursor: pointer;
  user-select: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.uk-table--prices th.uk-th--sortable:hover {
  background: var(--color-active);
  color: var(--text-secondary);
}

.uk-table--prices th.uk-th--sorted-asc,
.uk-table--prices th.uk-th--sorted-desc {
  color: var(--text-primary);
}

/* Search column (combined img + name header) */
.uk-table--prices th.uk-th--search {
  text-align: left;
  white-space: normal;
  padding: var(--space-1) var(--space-2);
  vertical-align: middle;
}

.uk-table--prices th.uk-th--search .uk-input {
  height: var(--space-6);
  padding: 0 var(--space-2);
  font-size: var(--text-s);
  font-weight: var(--weight-regular);
  text-transform: none;
  letter-spacing: 0;
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
}

/* Diff group header (col 14-16: Best/Buff/Steam under shared label) */
.uk-table--prices .uk-prices__diff-group {
  border-bottom: 1px solid var(--border-default);
  color: var(--text-muted);
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

.uk-table--prices .uk-prices__diff-sub {
  font-size: var(--text-xs);
  padding: var(--space-1) var(--space-2);
}

/* Body rows ---------------------------------------------------------- */

.uk-table--prices tbody tr {
  transition: background var(--transition-fast);
}

.uk-table--prices tbody tr.uk-prices__row--ask {
  background: var(--color-background);
}

.uk-table--prices tbody tr.uk-prices__row--bid {
  background: var(--color-containers2);
}

/* Rarity gradient overlay — вспышка возле картинки, тянется чуть дальше колонки img */
.uk-table--prices tbody tr.uk-prices__row--ask[data-rarity-color] {
  background:
    linear-gradient(to right, color-mix(in srgb, var(--rarity-color) 65%, transparent) 0, transparent 320px),
    var(--color-background);
}

/* Hover both rows of one item — каждый item обернут в свой <tbody>,
   поэтому tbody:hover подхватывает обе строки. JS-класс hover-pair оставлен
   для совместимости с future-runtime. */
.uk-table--prices tbody:hover tr.uk-prices__row--ask,
.uk-table--prices tbody:hover tr.uk-prices__row--bid,
.uk-table--prices tbody tr.uk-prices__row--ask.uk-prices__row--hover-pair,
.uk-table--prices tbody tr.uk-prices__row--bid.uk-prices__row--hover-pair {
  background: var(--color-active);
}

.uk-table--prices tbody:hover tr.uk-prices__row--ask[data-rarity-color],
.uk-table--prices tbody:hover tr.uk-prices__row--bid[data-rarity-color],
.uk-table--prices tbody tr.uk-prices__row--ask[data-rarity-color].uk-prices__row--hover-pair,
.uk-table--prices tbody tr.uk-prices__row--bid[data-rarity-color].uk-prices__row--hover-pair {
  background:
    linear-gradient(to right, color-mix(in srgb, var(--rarity-color) 35%, transparent) 0, transparent 80px),
    var(--color-active);
}

.uk-table--prices td {
  padding: var(--space-1) var(--space-2);
  text-align: center;
  vertical-align: middle;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--border-subtle);
}

/* Граница между item'ами заметнее, чем линия ask/bid внутри item'a:
   на rowspan=2 ячейках (низ совпадает с низом bid) и на td второго ряда. */
.uk-table--prices tbody tr.uk-prices__row--ask td[rowspan],
.uk-table--prices tbody tr.uk-prices__row--bid td {
  border-bottom: 1px solid var(--border-default);
}

/* Image cell (rowspan=2) */
.uk-prices__img {
  padding: var(--space-1);
}

.uk-prices__img img {
  width: var(--space-16);
  height: var(--space-16);
  object-fit: contain;
  border-radius: var(--radius-sm);
  display: block;
  margin: 0 auto;
}

/* Hashname cell (rowspan=2). Specificity raised to beat `.uk-table--prices td`
   which sets text-align: center on every body cell. */
.uk-table--prices td.uk-prices__name {
  text-align: left;
  padding-left: var(--space-3);
  overflow: hidden;
}

.uk-prices__name-text .stattrak {
  color: var(--stattrak);
  font-weight: var(--weight-medium);
}

.uk-prices__name-text .souvenir {
  color: var(--souvenir);
  font-weight: var(--weight-medium);
}

.uk-prices__name-text {
  color: var(--text-primary);
  font-weight: var(--weight-medium);
  font-size: var(--text-m);
  line-height: var(--leading-tight);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-word;
}

.uk-prices__name-btns {
  display: flex;
  gap: var(--space-1);
  margin-top: var(--space-1);
}

.uk-prices__name-btn {
  background: transparent;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-xs);
  padding: 0 var(--space-2);
  text-decoration: none;
  transition: background var(--transition-fast), border-color var(--transition-fast),
    color var(--transition-fast);
}

.uk-prices__name-btn:hover {
  color: var(--text-secondary);
  border-color: var(--text-disabled);
  background: var(--color-active);
}

/* Type cell (ask / bid label) */
.uk-prices__type {
  color: var(--text-disabled);
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Best cell (rowspan=2) */
.uk-table--prices td.uk-prices__best {
  white-space: nowrap;
  line-height: var(--leading-tight);
  padding: var(--space-2) var(--space-2);
}

.uk-prices__best-price {
  display: block;
  color: var(--success);
  font-weight: var(--weight-bold);
  font-size: var(--text-m);
  font-variant-numeric: tabular-nums;
}

.uk-prices__best-market {
  display: block;
  color: var(--text-muted);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  margin-top: var(--space-0);
}

/* Market price cell — clickable link styled as compact pill */
.uk-prices__price {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uk-prices__price-link {
  padding: var(--space-1) var(--space-1);
  border-radius: var(--radius-sm);
  display: inline-block;
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-weight: var(--weight-medium);
  font-size: var(--text-m);
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.uk-prices__price-link:hover {
  background: var(--color-active);
  color: var(--text-primary);
}

.uk-prices__price-link--best {
  background: var(--success-bg);
  color: var(--success);
  font-weight: var(--weight-bold);
}

.uk-prices__price-link--best:hover {
  background: var(--success-border);
  color: var(--success-hover);
}

.uk-prices__price-link--outlier {
  color: var(--warning);
}

.uk-prices__price-link--outlier:hover {
  background: var(--warning-bg);
  color: var(--warning-hover);
}

/* Diff and Change cells */
.uk-prices__diff,
.uk-prices__change {
  font-weight: var(--weight-medium);
  white-space: nowrap;
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
}

.uk-prices__diff--good {
  color: var(--success);
  font-weight: var(--weight-bold);
}

.uk-prices__change--pos {
  color: var(--success);
}

.uk-prices__change--neg {
  color: var(--danger);
}

/* Count cell */
.uk-prices__count {
  color: var(--text-muted);
  font-size: var(--text-s);
  font-variant-numeric: tabular-nums;
}

/* Sort indicator — позиционируем абсолютно справа, чтобы он не сдвигал
   текст заголовка из центра. */
.uk-table--prices th.uk-th--sortable {
  position: relative;
}

.uk-prices__sort-indicator {
  position: absolute;
  right: var(--space-1);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-s);
  pointer-events: none;
}

.uk-th--sorted-asc .uk-prices__sort-indicator::before {
  content: "▲";
  color: var(--accent);
}

.uk-th--sorted-desc .uk-prices__sort-indicator::before {
  content: "▼";
  color: var(--accent);
}

/* Wrapper — horizontal scroll on narrow viewports + vertical clamp.
   --visible-items: how many items fit in the viewport before scroll kicks
   in (set by JS on items-per-page change: 5 → 5 visible, 25/100 → 10). */
.uk-pricepage__main {
  --visible-items: 5;
  min-width: 0;
  max-height: calc(var(--visible-items) * 94px + 50px);
  overflow: auto;
}

/* --- Price page (filters sidebar + table + footer + collapse) ----------- */

.uk-prices-page {
  background: var(--color-containers);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  margin-inline: auto;
  /* Без clip фон strip/footer вылазит за скруглённые углы и видно стык. */
  overflow: clip;
}

/* Collapse strip — реализован через <details>/<summary>. Стрелка
   поворачивается в open-состоянии. */
.uk-prices-page__collapsible {
  background: transparent;
}

.uk-prices-page__strip {
  list-style: none;
  cursor: pointer;
  text-align: center;
  padding: var(--space-1) 0;
  background: var(--color-containers2);
  border-bottom: 1px solid var(--border-subtle);
  transition: background var(--transition-fast);
}

.uk-prices-page__strip::-webkit-details-marker {
  display: none;
}

.uk-prices-page__strip:hover {
  background: var(--color-active);
}

.uk-prices-page__strip-icon {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--text-disabled);
  transition: transform var(--transition-fast);
}

.uk-prices-page__collapsible[open]>.uk-prices-page__strip {
  border-bottom-color: var(--border-default);
}

.uk-prices-page__collapsible[open]>.uk-prices-page__strip .uk-prices-page__strip-icon {
  transform: rotate(90deg);
}

/* Closed state: keep the layout in the flow so the section's content-sized
   width (driven by .uk-prices-page { margin-inline: auto }) stays stable.
   In modern browsers <details> exposes its slotted content via the
   ::details-content pseudo-element and uses content-visibility:hidden when
   closed, which removes the layout from layout flow. We force it visible,
   then collapse it to zero height with overflow clipped. The inner
   .uk-prices-page__layout still has its grid + padding overridden so
   nothing shows visually, and the section keeps its open-state width. */
.uk-prices-page__collapsible::details-content {
  content-visibility: visible;
  display: block;
}

.uk-prices-page__collapsible:not([open])::details-content {
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

.uk-prices-page__collapsible:not([open])>.uk-prices-page__layout {
  padding-block: 0;
}

/* Layout: sidebar 280px + main 1fr.
   minmax(0, 1fr) обязателен — не даёт max-content таблицы расширять колонку
   и тащить footer за собой. */
.uk-prices-page__layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr);
  gap: var(--space-3);
  align-items: start;
  padding: var(--space-3);
}

.uk-prices-page__main {
  min-width: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

.uk-prices-page__main .uk-pricepage__main {
  width: 100%;
  min-width: 0;
  border-radius: var(--radius-md);
}

/* Footer: info + items-per-page + pagination.
   width: 100% + min-width: 0 — гарантия, что footer всегда в пределах
   главной колонки и не уезжает за таблицей при горизонтальном скролле. */
.uk-prices-page__footer {
  width: 100%;
  min-width: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-3);
}

.uk-prices-page__info {
  color: var(--text-muted);
  font-size: var(--text-s);
}

.uk-prices-page__footer-right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-mono);
}

/* --- Filters panel (single block with internal dividers) -------------- */

.uk-prices-filters {
  position: sticky;
  top: var(--space-3);
  max-height: calc(100vh - var(--space-6));
  overflow-y: auto;
  background: var(--color-containers2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  min-width: 0;
}

.uk-prices-filters__section {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  min-width: 0;
}

/* Между секциями, в которых только uk-fdrop (rarity/type/weapons/collections/cases),
   gap уменьшаем с space-3 (12) до space-2 (8). */
.uk-prices-filters__section:has(.uk-fdrop)+.uk-prices-filters__section:has(.uk-fdrop) {
  margin-top: calc(var(--space-2) - var(--space-3));
}

.uk-prices-filters__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
}

.uk-prices-filters__title>span {
  flex: 1 1 auto;
}

.uk-prices-filters__reset {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-secondary);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-s);
  padding: 0 var(--space-2);
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.uk-prices-filters__reset:hover {
  color: var(--danger);
  border-color: var(--danger);
}

/* Compact horizontal row: select + min/max inputs */
.uk-prices-filters__row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.uk-prices-filters__row>.uk-select,
.uk-prices-filters__row>.uk-select--sm {
  flex: 1 1 auto;
  min-width: 0;
}

.uk-prices-filters__row>.uk-input,
.uk-prices-filters__row>.uk-input--sm {
  flex: 0 0 auto;
  width: var(--space-12);
}

/* Compact chip cluster — overrides default cluster gap */
.uk-prices-filters__chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
}

/* Чипы внутри sidebar — растягиваются по доступной ширине, делят пространство
   равномерно. */
.uk-prices-filters__chips>.uk-btn--sm {
  padding: 0 var(--space-2);
  flex: 1 1 0;
  min-width: 0;
}

.uk-prices-filters__chips--col {
  flex-direction: column;
  align-items: stretch;
}

.uk-prices-filters__chips--grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-1);
}

/* Вариант A: равномерные N колонок — все чипы в одну строку, ширина равная.
   Используется через --cols inline (style="--cols: 4"). */
.uk-prices-filters__chips--grid {
  display: grid;
  grid-template-columns: repeat(var(--cols, 4), 1fr);
  gap: var(--space-1);
}

.uk-prices-filters__chips--grid>.uk-btn--sm {
  padding: 0 var(--space-1);
  min-width: 0;
}

/* Compact fdrop variant — denser toggle for sidebar */
.uk-prices-filters .uk-fdrop {
  width: 100%;
}

.uk-prices-filters .uk-fdrop__toggle {
  height: var(--space-8);
  padding: 0 var(--space-2);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  background: var(--color-atoms);
  border-color: var(--border-default);
  border-radius: var(--radius-sm);
}

.uk-prices-filters .uk-fdrop__toggle:hover {
  color: var(--text-primary);
  background: var(--color-active);
}

.uk-prices-filters .uk-fdrop--open .uk-fdrop__toggle {
  color: var(--accent);
  background: var(--accent-bg);
  border-color: var(--accent-border);
}

.uk-prices-filters .uk-fdrop__count {
  min-width: var(--space-4);
  height: var(--space-4);
  padding: 0 var(--space-1);
  font-size: var(--text-m);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  color: var(--accent);
}

.uk-prices-filters .uk-fdrop__body {
  min-width: 100%;
  padding: var(--space-2);
}

/* Title row inside .uk-prices-filters with fdrop toggle + reset */
.uk-prices-filters__fdrop-row {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.uk-prices-filters__fdrop-row>.uk-fdrop {
  flex: 1 1 auto;
  min-width: 0;
}

/* Searchable list panel inside fdrop body */
.uk-prices-filters__listpanel {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.uk-prices-filters__list {
  max-height: var(--space-16);
  overflow-y: auto;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: var(--color-background);
  padding: var(--space-1) 0;
}

.uk-prices-filters__list-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2);
  cursor: pointer;
  font-size: var(--text-m);
  color: var(--text-secondary);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.uk-prices-filters__list-item:hover {
  background: var(--color-active);
  color: var(--text-primary);
}

.uk-prices-filters__list-item input[type="checkbox"] {
  accent-color: var(--accent);
  width: 12px;
  height: 12px;
  margin: 0;
  cursor: pointer;
}

/* Cases: input сверху, чипсы (Cases/Capsules/Packages/Other) горизонтально под ним */
.uk-prices-filters__cases-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.uk-prices-filters__cases-row>.uk-input,
.uk-prices-filters__cases-row>.uk-input--sm {
  width: 100%;
}

.uk-prices-filters__cases-row>.uk-prices-filters__chips {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-1);
  flex-wrap: nowrap;
}

.uk-prices-filters__cases-row>.uk-prices-filters__chips>.uk-btn--sm {
  padding: 0 var(--space-1);
  min-width: 0;
}

/* Inputs / selects внутри sidebar — текст secondary; селекты text-s, инпуты text-xs */
.uk-prices-filters .uk-input,
.uk-prices-filters .uk-input--sm,
.uk-prices-filters .uk-select,
.uk-prices-filters .uk-select--sm {
  color: var(--text-secondary);
}

.uk-prices-filters .uk-input,
.uk-prices-filters .uk-input--sm {
  font-size: var(--text-s);
}

.uk-prices-filters .uk-select,
.uk-prices-filters .uk-select--sm {
  font-size: var(--text-m);
}

.uk-prices-filters .uk-btn--sm {
  font-size: var(--text-m);
  color: var(--text-secondary);
}

/* -------------------------------------------------------------------------
   6. ORGANISMS
   ------------------------------------------------------------------------- */

/* --- Item card ---------------------------------------------------------- */
/* Главная карточка снайпленного предмета. Компактнее чем .item из style.css. */

.uk-item {
  --rarity-color: transparent;
  position: relative;
  display: flex;
  flex-direction: column;
  width: 300px;
  background: var(--color-containers2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-lg);
  overflow: hidden;
  transition: border-color var(--transition-base);
}

.uk-item:hover {
  border-color: var(--accent);
}

.uk-item--new {
  border-color: var(--success);
}

/* Rarity modifiers — overlay только в верхней половине картинки */
.uk-item[data-rarity="consumer"] {
  --rarity-color: var(--rarity-consumer);
}

.uk-item[data-rarity="industrial"] {
  --rarity-color: var(--rarity-industrial);
}

.uk-item[data-rarity="milspec"] {
  --rarity-color: var(--rarity-milspec);
}

.uk-item[data-rarity="restricted"] {
  --rarity-color: var(--rarity-restricted);
}

.uk-item[data-rarity="classified"] {
  --rarity-color: var(--rarity-classified);
}

.uk-item[data-rarity="covert"] {
  --rarity-color: var(--rarity-covert);
}

.uk-item[data-rarity="contraband"] {
  --rarity-color: var(--rarity-contraband);
}

/* --- Image area (верхняя часть карточки) ------------------------------- */
.uk-item__image {
  position: relative;
  height: 280px;
  background: var(--color-containers2);
  overflow: hidden;
}

.uk-item__image::before {
  content: "";
  position: absolute;
  inset: 0 0 20% 0;
  background: linear-gradient(to bottom,
      color-mix(in srgb, var(--rarity-color) 20%, transparent) 0%,
      transparent 100%);
  pointer-events: none;
  z-index: 0;
}

.uk-item__weapon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 85%;
  height: 85%;
  object-fit: contain;
  opacity: 0.95;
  z-index: 1;
  pointer-events: none;
}

/* --- Top section: hashname + action icons ------------------------------ */
.uk-item__top {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  right: var(--space-3);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-2);
}

.uk-item__name {
  cursor: pointer;
  transition: opacity var(--transition-fast);
}

.uk-item__name:hover {
  opacity: 0.8;
}

.uk-item__name-weapon {
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-shadow: var(--text-shadow-on-image-lg);
  line-height: var(--leading-tight);
  margin-bottom: var(--space-1);
}

.uk-item__name-details {
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--text-secondary);
  text-shadow: var(--text-shadow-on-image);
}

.uk-item__name-details .stattrak {
  color: var(--stattrak);
  font-weight: var(--weight-medium);
}

.uk-item__name-details .souvenir {
  color: var(--souvenir);
  font-weight: var(--weight-medium);
}

/* Action icons column — используется дефолтный .uk-item-action (32px). */
.uk-item .uk-item-actions {
  gap: var(--space-2);
}

/* --- Float info (bottom left) ----------------------------------------- */
.uk-item__float-info {
  position: absolute;
  bottom: var(--space-3);
  left: var(--space-3);
  z-index: 2;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.uk-item__phase {
  font-family: var(--font-sans);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--phase-default);
}

.uk-item__phase[data-phase="ruby"] {
  color: var(--phase-ruby);
}

.uk-item__phase[data-phase="sapphire"] {
  color: var(--phase-sapphire);
}

.uk-item__phase[data-phase="emerald"] {
  color: var(--phase-emerald);
}

.uk-item__phase[data-phase="black-pearl"] {
  color: var(--phase-black-pearl);
}

.uk-item__quirk {
  font-family: var(--font-sans);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.uk-item__quirk[data-quirk="fade"] {
  color: var(--rarity-contraband);
}

.uk-item__quirk[data-quirk="bluegem"] {
  color: var(--phase-sapphire);
}

.uk-item__quirk[data-quirk="marble_fade"] {
  color: var(--phase-ruby);
}

.uk-item__seed {
  font-family: var(--font-sans);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

/* Wrapper для float + range — невидимый контейнер, держит общий
   data-tooltip, чтобы при наведении на любую часть (включая зазор)
   не сбрасывался hover-target Tooltip-модуля. */
.uk-item__float-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.uk-item__float {
  font-family: var(--font-sans);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}

.uk-item__float.edge-green {
  color: var(--success);
}

.uk-item__float.edge-red {
  color: var(--danger);
}

.uk-item__float-range {
  position: relative;
  width: 128px;
  height: var(--space-1);
  margin-top: var(--space-1);
  background: var(--overlay-bg-strong);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  overflow: visible;
}

.uk-item__float-range-seg {
  position: absolute;
  top: 0;
  height: 100%;
}

.uk-item__float-range-seg--fn {
  background: var(--float-fn);
}

.uk-item__float-range-seg--mw {
  background: var(--float-mw);
}

.uk-item__float-range-seg--ft {
  background: var(--float-ft);
}

.uk-item__float-range-seg--ww {
  background: var(--float-ww);
}

.uk-item__float-range-seg--bs {
  background: var(--float-bs);
}

.uk-item__float-range-seg--out {
  background: var(--float-out);
}

.uk-item__float-indicator {
  position: absolute;
  width: 2px;
  height: 300%;
  top: -100%;
  background: var(--text-primary);
  z-index: 2;
}

/* --- Stickers / Charms overlay (right side) --------------------------- */
.uk-item__stickers {
  position: absolute;
  right: var(--space-3);
  top: var(--space-16);
  bottom: var(--space-3);
  z-index: 2;
  display: flex;
  flex-direction: column-reverse;
  align-items: flex-end;
  gap: var(--space-1);
}

.uk-item__sticker-row,
.uk-item__charm-row {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  padding: var(--space-1) var(--space-2);
  background: var(--overlay-bg-faint);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.uk-item__sticker-row:hover,
.uk-item__charm-row:hover {
  background: var(--overlay-bg-faint);
  border-color: var(--accent);
}

.uk-item__icon-wrap {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.uk-item__sticker-wear,
.uk-item__charm-seed {
  font-size: var(--text-xs);
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}

.uk-item__sticker-img {
  width: var(--space-7);
  height: var(--space-6);
  object-fit: contain;
  flex-shrink: 0;
}

.uk-item__charm-img {
  width: var(--space-7);
  height: var(--space-6);
  object-fit: contain;
  flex-shrink: 0;
}

.uk-item__sticker-price,
.uk-item__charm-price {
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
  white-space: nowrap;
  text-align: right;
}

.uk-item .sp-green {
  color: var(--success);
}

.uk-item .sp-orange {
  color: var(--warning);
}

.uk-item .sp-red {
  color: var(--danger);
}

/* --- Footer ----------------------------------------------------------- */
/* Сверху filtername (full-width), ниже ряд: price-buy | divider | pricediff. */
.uk-item__footer {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-containers);
  border-top: 1px solid var(--border-default);
}

.uk-item__footer-row {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: var(--space-3);
}

.uk-item__footer-left {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  flex: 1 1 auto;
}

.uk-item__price-buy {
  display: flex;
  align-items: center;
  gap: var(--space-3);
}

.uk-item__price-wrap {
  display: flex;
  flex-direction: column;
  line-height: var(--leading-tight);
  text-align: center;
}

.uk-item__price {
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.2px;
  text-align: center;
}

.uk-item__price-diff {
  font-family: var(--font-sans);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  white-space: nowrap;
  margin-top: var(--space-1);
}

.uk-item__price-diff--positive {
  color: var(--success);
}

.uk-item__price-diff--negative {
  color: var(--danger);
}

.uk-item__buy {
  padding: 0 var(--space-3);
  height: 26px;
  font-family: inherit;
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
  color: var(--color-background);
  background: var(--text-primary);
  border: 0;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.uk-item__buy:hover {
  background: var(--text-secondary);
}

.uk-item__buy--bought {
  background: var(--success);
  color: var(--text-primary);
}

.uk-item__buy--failed {
  background: var(--danger);
  color: var(--text-primary);
}

.uk-item__filtername {
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  line-height: var(--leading-tight);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Price diff mini-table (right of footer) */
.uk-item__pricediff {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: var(--space-3);
  row-gap: var(--space-1);
  align-items: center;
  white-space: nowrap;
  padding-left: var(--space-3);
  border-left: 1px solid var(--border-default);
}

.uk-item__pricediff-head {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--text-muted);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.uk-item__pricediff-value {
  font-family: var(--font-sans);
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  text-align: center;
}

.uk-item__pricediff-value--good {
  color: var(--success);
  font-weight: var(--weight-bold);
}

.uk-item__pricediff-value--bad {
  color: var(--danger);
  font-weight: var(--weight-bold);
}

/* --- Card style variants ---------------------------------------------- */
/* v1 — baseline (no overrides) */

/* v2 — compact + monospaced price, uppercase metadata */
.uk-item--v2 .uk-item__name-weapon {
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.uk-item--v2 .uk-item__name-details {
  font-size: var(--text-s);
  font-weight: var(--weight-regular);
}

.uk-item--v2 .uk-item__price {
  font-family: var(--font-mono);
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  letter-spacing: 0;
}

.uk-item--v2 .uk-item__price-diff {
  font-family: var(--font-mono);
  font-size: var(--text-s);
}

.uk-item--v2 .uk-item__filtername {
  font-size: var(--text-s);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-secondary);
}

.uk-item--v2 .uk-item__buy {
  font-size: var(--text-xs);
  height: 20px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.uk-item--v2 .uk-item__pricediff-value {
  font-family: var(--font-mono);
}

/* v3 — prominent / display */
.uk-item--v3 .uk-item__name-weapon {
  font-size: var(--text-xl);
  font-weight: var(--weight-bold);
}

.uk-item--v3 .uk-item__name-details {
  font-size: var(--text-s);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.uk-item--v3 .uk-item__price {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  letter-spacing: -0.5px;
}

.uk-item--v3 .uk-item__price-diff {
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
}

.uk-item--v3 .uk-item__filtername {
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
}

.uk-item--v3 .uk-item__buy {
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
  height: 26px;
  padding: 0 var(--space-3);
}

/* v4 — editorial / soft (regular weights, accent-tinted filtername) */
.uk-item--v4 .uk-item__name-weapon {
  font-size: var(--text-l);
  font-weight: var(--weight-medium);
}

.uk-item--v4 .uk-item__name-details {
  font-size: var(--text-m);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
}

.uk-item--v4 .uk-item__price {
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  color: var(--text-secondary);
  letter-spacing: 0;
}

.uk-item--v4 .uk-item__price-diff {
  font-size: var(--text-s);
  font-weight: var(--weight-medium);
}

.uk-item--v4 .uk-item__filtername {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--accent);
}

.uk-item--v4 .uk-item__buy {
  font-size: var(--text-s);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.uk-item--v4 .uk-item__pricediff-head {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

/* -------------------------------------------------------------------------
   7. SHOWCASE PAGE STYLES (only used by ui-kit.html itself)
   ------------------------------------------------------------------------- */

.uk-showcase {
  display: grid;
  grid-template-columns: 220px 1fr;
  min-height: 100vh;
}

.uk-showcase__nav {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  overflow-y: auto;
  padding: var(--space-6) var(--space-4);
  background: var(--color-containers);
  border-right: 1px solid var(--border-subtle);
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}

.uk-showcase__brand {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.uk-showcase__brand-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
}

.uk-showcase__nav-group {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.uk-showcase__nav-title {
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-disabled);
  padding: 0 var(--space-2);
  margin-bottom: var(--space-1);
}

.uk-showcase__nav a {
  display: block;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-m);
  color: var(--text-muted);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.uk-showcase__nav a:hover {
  background: var(--color-active);
  color: var(--text-primary);
}

.uk-showcase__main {
  padding: var(--space-8) var(--space-8) var(--space-16);
  max-width: 1400px;
}

.uk-showcase__hero {
  margin-bottom: var(--space-12);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--border-subtle);
}

.uk-showcase__hero h1 {
  font-size: var(--text-4xl);
  margin-bottom: var(--space-2);
}

.uk-showcase__hero p {
  color: var(--text-muted);
  font-size: var(--text-l);
  max-width: 640px;
  line-height: var(--leading-relaxed);
}

.uk-section {
  margin-bottom: var(--space-12);
  scroll-margin-top: var(--space-4);
}

.uk-section__title {
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  margin-bottom: var(--space-2);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.uk-section__desc {
  font-size: var(--text-m);
  color: var(--text-muted);
  margin-bottom: var(--space-5);
  max-width: 720px;
  line-height: var(--leading-relaxed);
}

.uk-subsection {
  margin-bottom: var(--space-8);
  scroll-margin-top: var(--space-4);
}

.uk-subsection__title {
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  color: var(--text-secondary);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.uk-subsection__title::before {
  content: "";
  width: 3px;
  height: var(--text-m);
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.uk-demo {
  padding: var(--space-5);
  background: var(--color-containers);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.uk-demo+.uk-code {
  margin-top: 0;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.uk-demo:has(+ .uk-code) {
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom: 0;
}

.uk-code {
  margin-top: var(--space-1);
  background: var(--color-background);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  font-family: var(--font-mono);
  font-size: var(--text-s);
}

.uk-code summary {
  cursor: pointer;
  padding: var(--space-2) var(--space-3);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--text-s);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  user-select: none;
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.uk-code summary::-webkit-details-marker {
  display: none;
}

.uk-code summary::before {
  content: "▶";
  font-size: var(--text-xs);
  transition: transform var(--transition-fast);
}

.uk-code[open] summary::before {
  transform: rotate(90deg);
}

.uk-code summary:hover {
  color: var(--text-primary);
}

.uk-code pre {
  margin: 0;
  padding: var(--space-3) var(--space-4);
  border-top: 1px solid var(--border-subtle);
  overflow-x: auto;
  color: var(--text-secondary);
  white-space: pre;
  line-height: var(--leading-normal);
}

/* --- Token swatches ---------------------------------------------------- */
.uk-swatch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-3);
}

.uk-swatch {
  display: flex;
  flex-direction: column;
  background: var(--color-containers);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.uk-swatch__color {
  height: 64px;
  background: var(--swatch-color, #000);
  border-bottom: 1px solid var(--border-subtle);
}

.uk-swatch__meta {
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-xs);
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}

.uk-swatch__name {
  font-family: var(--font-mono);
  color: var(--text-primary);
  font-size: var(--text-xs);
}

.uk-swatch__value {
  font-family: var(--font-mono);
  color: var(--text-muted);
  font-size: var(--text-xs);
}

.uk-swatch__role {
  color: var(--text-disabled);
  font-size: var(--text-xs);
}

/* --- Spacing / Radius scale rows -------------------------------------- */
.uk-scale-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  font-family: var(--font-mono);
  font-size: var(--text-s);
  color: var(--text-muted);
}

.uk-scale-row__bar {
  height: var(--space-4);
  background: var(--accent);
  border-radius: var(--radius-sm);
}

.uk-scale-row__name {
  width: 80px;
  color: var(--text-primary);
}

.uk-scale-row__value {
  width: 60px;
  color: var(--text-secondary);
}

.uk-radius-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: var(--space-3);
}

.uk-radius-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-containers);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
}

.uk-radius-tile__box {
  width: 64px;
  height: 64px;
  background: var(--accent-bg);
  border: 2px solid var(--accent);
}

.uk-radius-tile__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
}

.uk-radius-tile__value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.uk-shadow-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: var(--space-4);
}

.uk-shadow-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5);
  background: var(--color-background);
  border-radius: var(--radius-md);
}

.uk-shadow-tile__box {
  width: 80px;
  height: 60px;
  background: var(--color-atoms);
  border-radius: var(--radius-md);
}

.uk-shadow-tile__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
}

/* --- Typography demo -------------------------------------------------- */
.uk-typo-row {
  display: grid;
  grid-template-columns: 100px 80px 1fr;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--border-subtle);
}

.uk-typo-row:last-child {
  border-bottom: 0;
}

.uk-typo-row__name {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-primary);
}

.uk-typo-row__value {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  color: var(--text-muted);
}

.uk-typo-row__sample {
  color: var(--text-secondary);
}

/* --- Float quality preview bar ---------------------------------------- */
.uk-float-bar {
  display: flex;
  height: 18px;
  border-radius: var(--radius-pill);
  overflow: hidden;
  border: 1px solid var(--border-subtle);
  width: 100%;
  max-width: 320px;
}

.uk-float-bar__seg {
  flex: 1;
}

.uk-float-bar__seg--fn {
  background: var(--float-fn);
}

.uk-float-bar__seg--mw {
  background: var(--float-mw);
}

.uk-float-bar__seg--ft {
  background: var(--float-ft);
}

.uk-float-bar__seg--ww {
  background: var(--float-ww);
}

.uk-float-bar__seg--bs {
  background: var(--float-bs);
}

.uk-float-bar__seg--out {
  background: var(--float-out);
}

/* -------------------------------------------------------------------------
   Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .uk-showcase {
    grid-template-columns: 1fr;
  }

  .uk-showcase__nav {
    position: relative;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--border-subtle);
  }

  .uk-showcase__main {
    padding: var(--space-5);
  }
}

@media (max-width: 480px) {
  .uk-typo-row {
    grid-template-columns: 1fr;
    gap: var(--space-1);
  }

  .uk-swatch-grid {
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  }
}

/* -------------------------------------------------------------------------
   7. CSBOT APP ORGANISMS
   ------------------------------------------------------------------------- */

/* --- App header --------------------------------------------------------- */
.uk-app-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-2) var(--space-4);
  background: var(--color-containers2);
  border-bottom: 1px solid var(--border-subtle);
  border-bottom-left-radius: var(--radius-lg);
  border-bottom-right-radius: var(--radius-lg);
}

.uk-app-header__logo {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-primary);
  text-decoration: none;
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  flex: 0 0 auto;
}

.uk-app-header__logo img {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

.uk-app-header__nav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  margin-left: var(--space-4);
  flex: 1 1 auto;
  min-width: 0;
}

.uk-app-header__nav .uk-link {
  color: var(--text-secondary);
  font-size: var(--text-m);
  font-weight: var(--weight-medium);
  text-decoration: none;
  padding: var(--space-1) 0;
  border-bottom: 1px solid transparent;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}

.uk-app-header__nav .uk-link:hover {
  color: var(--text-primary);
}

.uk-link--active {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.uk-app-header__status {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  flex: 0 0 auto;
}

.uk-app-header__sound {
  background: transparent;
  border: 0;
  color: var(--text-secondary);
  font-size: var(--text-l);
  cursor: pointer;
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
  line-height: 1;
  transition: background var(--transition-fast), color var(--transition-fast);
}

.uk-app-header__sound:hover {
  background: var(--color-active);
  color: var(--text-primary);
}

.uk-app-header__user {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-secondary);
  font-size: var(--text-m);
  flex: 0 0 auto;
}

.uk-app-header__avatar {
  width: 28px;
  height: 28px;
  border-radius: var(--radius-circle);
  object-fit: cover;
  border: 1px solid var(--border-subtle);
}

@media (max-width: 760px) {
  .uk-app-header {
    flex-wrap: wrap;
  }

  .uk-app-header__nav {
    margin-left: 0;
    order: 3;
    flex-basis: 100%;
    overflow-x: auto;
  }
}

/* --- Pressed-state for toggle buttons (filter chips, etc.) -------------- */
.uk-btn[aria-pressed="true"]:not(.uk-btn--rarity) {
  background: var(--accent-bg);
  border-color: var(--accent-border);
  color: var(--accent);
}

.uk-btn[aria-pressed="true"]:not(.uk-btn--rarity):hover {
  background: color-mix(in srgb, var(--accent) 22%, transparent);
  border-color: var(--accent);
  color: var(--accent-hover);
}

/* --- Collapsible card (uses native <details>/<summary>) ----------------- */
.uk-card--collapsible {
  display: block;
}

.uk-card--collapsible>.uk-card__header {
  list-style: none;
  cursor: pointer;
  user-select: none;
}

.uk-card--collapsible>.uk-card__header::-webkit-details-marker {
  display: none;
}

.uk-card--collapsible:not([open])>.uk-card__header {
  border-bottom-color: transparent;
}

.uk-card__title-arrow {
  font-size: var(--text-m);
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.uk-card--collapsible[open]>.uk-card__header .uk-card__title-arrow {
  transform: rotate(180deg);
}

.uk-card__header-end {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
}

#items-log-container {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* --- Items grid (sniped items rendered into #log) ----------------------- */
/* Items keep their fixed 300px width (defined on .uk-item / .uk-item--v1);
   the column count adapts to the viewport, and justify-content:space-between
   makes the column gap grow dynamically to fill the row — cards align flush
   with the section's left/right edges and the empty space between them
   scales with the container width. row-gap stays at --space-3 minimum. */
.uk-items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 300px);
  justify-content: space-between;
  column-gap: var(--space-2);
  row-gap: var(--space-3);
  width: 100%;
}

/* Step price-diff font down (kit text-s → text-xs). */
.uk-item .uk-item__price-diff {
  font-size: var(--text-s);
}

/* --- Items-log filter card (popover; doesn't shift the items grid) ------ */
.uk-hist-filter {
  position: relative;
  display: inline-block;
  width: 240px;
}

.uk-hist-filter__toggle {
  list-style: none;
  cursor: pointer;
  display: flex;
  width: 100%;
  align-items: center;
  gap: var(--space-2);
  height: var(--space-10);
  padding: 0 var(--space-3);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  color: var(--text-primary);
  font-family: inherit;
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  transition: background var(--transition-fast), border-color var(--transition-fast);
}

.uk-hist-filter__toggle>span:first-child {
  flex: 1 1 auto;
}

.uk-hist-filter__toggle::-webkit-details-marker {
  display: none;
}

.uk-hist-filter__toggle:hover {
  background: var(--color-active);
  border-color: var(--text-muted);
}

.uk-hist-filter__arrow {
  font-size: var(--text-l);
  color: var(--text-muted);
  transition: transform var(--transition-fast);
}

.uk-hist-filter[open] .uk-hist-filter__arrow {
  transform: rotate(180deg);
}

.uk-hist-filter[open] .uk-hist-filter__toggle {
  border-color: var(--accent);
  color: var(--accent);
}

.uk-hist-filter__panel {
  position: absolute;
  left: 0;
  top: calc(100% + var(--space-1));
  z-index: var(--z-popover);
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--color-containers2);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-popover);
}

/* Внутри панели form-row ставит min/max инпуты в одну строку (раньше
   родительский --width: 100% input'а заставлял их переноситься). */
.uk-hist-filter__panel .uk-form-row {
  flex-wrap: nowrap;
}

.uk-hist-filter__panel .uk-form-row>.uk-input,
.uk-hist-filter__panel .uk-form-row>.uk-input--sm {
  flex: 1 1 0;
  min-width: 0;
}

/* Label + 2 input'а в одну строку (Float / Price / Buffbid). */
.uk-hist-filter__inline-row {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.uk-hist-filter__inline-row>label {
  flex: 0 0 auto;
  width: 96px;
}

.uk-hist-filter__inline-row>input {
  flex: 1 1 0;
  min-width: 0;
}

.uk-hist-filter__footer {
  display: flex;
  justify-content: flex-end;
  padding-top: var(--space-2);
  border-top: 1px solid var(--border-subtle);
}

/* --- Sidebar lift: z-index above #log so fdrop popovers paint over item cards.
       (Kit's .uk-prices-filters is position:sticky, which creates its own
       stacking context — we just bump it above the items-log section.) ----- */
.uk-prices-filters {
  z-index: 5;
}

/* JS (PriceTable._syncSidebarHeight) writes a per-render --sidebar-h custom
   property based on the main column height; the sidebar uses min() so it
   never exceeds the table's height, but still scrolls internally.
   min-height — пол, чтобы при пустой таблице sidebar не сжимался в полоску. */
.uk-prices-filters {
  min-height: min(200px, calc(100vh - var(--space-6)));
  max-height: min(var(--sidebar-h, calc(100vh - var(--space-6))), calc(100vh - var(--space-6)));
}

/* Searchable list panels in the sidebar — kit default 64px is too small. */
.uk-prices-filters__list {
  max-height: 240px;
}

/* --- Main page wrapper (csbot index.html) ------------------------------ */
.uk-scope main {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
}

/* --- Hidden utility ----------------------------------------------------- */
.uk-hidden,
[hidden] {
  display: none !important;
}

/* --- Status / message inline (api_keys page) ---------------------------- */
.uk-msg {
  font-size: var(--text-s);
  padding: var(--space-1) var(--space-2);
  border-radius: var(--radius-sm);
}

.uk-msg--ok {
  color: var(--success);
  background: var(--success-bg);
}

.uk-msg--err {
  color: var(--danger);
  background: var(--danger-bg);
}

/* Кит .uk-tabs по умолчанию = --color-containers (как .uk-card__body).
   Когда tabs внутри карточки, опускаем полосу до --color-background, чтобы
   активный таб (--color-atoms) читался как явный lift, а не same-shade blur. */
.uk-card__body .uk-tabs {
  background: var(--color-background);
}

/* --- Filtermaker mapping grid: fixed-width items, count adapts to viewport.
   Items keep the same width at any screen size; only how many fit per row
   changes. */
.uk-fm-mapping-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, 260px);
  gap: var(--space-2);
}

.uk-fm-mapping-group-title {
  grid-column: 1 / -1;
  font-size: var(--text-xs);
  font-weight: var(--weight-bold);
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-muted);
  border-bottom: 1px solid var(--border-subtle);
  padding-bottom: var(--space-1);
  margin-top: var(--space-2);
}

.uk-fm-mapping-group-title:first-child {
  margin-top: 0;
}

/* Inner contrast: card body is --color-containers, items sit on
   --color-containers2 so the inputs (atoms, lighter) stand out. */
.fm-mapping-item {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  height: 32px;
  padding: 0 var(--space-2);
  background: var(--color-containers2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  min-width: 0;
  overflow: hidden;
}

/* Fixed label width — keeps the col-input aligned across all items. */
.fm-mapping-item>label {
  flex: 0 0 110px;
  color: var(--text-secondary);
  font-size: var(--text-s);
  font-weight: var(--weight-regular);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Kit's .uk-input/.uk-select default to width:100% — that overflows our
   narrow item. Force natural-width inside the item. */
.fm-mapping-item .uk-input,
.fm-mapping-item .uk-select {
  flex: 0 0 auto;
  width: auto;
  max-width: 100%;
  min-width: 0;
}

/* Column-letter input: holds 1–3 chars (Excel column letter). Specificity
   higher than the rule above so width sticks. */
.fm-mapping-item .fm-col-input {
  flex: 0 0 36px;
  width: 36px;
  text-align: center;
  text-transform: uppercase;
  font-family: var(--font-mono);
}

.fm-col-input.has-auto {
  border-color: var(--success);
  color: var(--success);
}

/* Mode selects (autobuy / not_contains) — cap so long options don't grow. */
.fm-mapping-item>.uk-select {
  max-width: 92px;
}

/* Filtername prefix input — narrow so the row still fits one cell. */
.fm-mapping-item>#fmFnPrefix {
  flex: 0 0 64px;
  width: 64px;
}

/* Hint takes whatever's left; truncates with ellipsis. */
.fm-header-hint {
  flex: 1 1 auto;
  min-width: 0;
  font-size: var(--text-s);
  color: var(--text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Remove-field button on optional mapping items. */
.fm-remove-btn {
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: var(--text-l);
  line-height: 1;
  cursor: pointer;
  border-radius: var(--radius-sm);
  transition: background var(--transition-fast), color var(--transition-fast);
}

.fm-remove-btn:hover {
  background: var(--color-active);
  color: var(--text-primary);
}

/* Per-group "+ Add field" picker — sits at the end of each group. */
.fm-mapping-adder {
  display: flex;
  align-items: center;
  height: 32px;
}

.fm-mapping-adder>.uk-select {
  width: 100%;
  color: var(--text-muted);
  border-style: dashed;
  background: transparent;
}

/* --- Filtermaker data preview table — compact, sticky head, hover rows --- */
.uk-fm-table-scroll {
  max-height: 500px;
  overflow: auto;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.uk-fm-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-s);
  color: var(--text-secondary);
}

.uk-fm-table th,
.uk-fm-table td {
  padding: var(--space-1) var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
  text-align: left;
  white-space: nowrap;
  max-width: 300px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.uk-fm-table th {
  background: var(--color-atoms);
  position: sticky;
  top: 0;
  z-index: 1;
  color: var(--text-muted);
  font-weight: var(--weight-bold);
}

.uk-fm-table tbody tr:hover {
  background: var(--color-active);
}

.uk-fm-table td.formula {
  color: var(--accent);
  font-family: var(--font-mono);
}

/* Columns currently mapped in step 3 are tinted via <col> + th highlight. */
.uk-fm-table col.is-used {
  background: var(--success-bg);
}

.uk-fm-table thead th.is-used {
  color: var(--success);
  border-bottom: 2px solid var(--success);
}

/* --- Filters rule editor: layout containers only (no input/button styling).
   Inputs/selects/buttons emit .uk-input/.uk-select/.uk-btn directly in JS. */
#filter-rules-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

/* scroll-margin-top резервирует место под sticky .uk-app-header (~48px),
   чтобы при scrollIntoView (FilterManager.goToPage) верх первой карточки не
   уходил под шапку. */
#filtersListContainer {
  scroll-margin-top: 56px;
}

/* --- Filter card body: one rule per line (server emits .rule-line) ------ */
/* ID-pill в заголовке карточки фильтра — рядом с filtername, muted. */
.uk-filter-card__id {
  font-weight: var(--weight-regular);
  font-size: var(--text-s);
  margin-left: var(--space-2);
  font-family: var(--font-sans);
}

.uk-card--filter>.uk-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
}

.rule-line {
  /* block, not flex — long value strings (e.g. seed: 90, 123, …) flow inline
     filling the row with the label, then wrap at word boundaries instead of
     getting punted to the next line as a single flex item. */
  font-size: var(--text-m);
  color: var(--text-primary);
  line-height: 1.5;
}

.rule-line .rule-key {
  color: var(--accent);
  font-weight: var(--weight-bold);
  font-family: var(--font-sans);
  font-size: var(--text-m);
  text-transform: uppercase;
}

.rule-line .op {
  font-family: var(--font-mono);
  font-size: var(--text-m);
  font-weight: var(--weight-bold);
  letter-spacing: 0.5px;
  padding: 0 var(--space-1);
  border-radius: var(--radius-sm);
}

.rule-line .op-and {
  color: var(--success);
}

.rule-line .op-or {
  color: var(--accent);
}

.rule-line .op-not {
  color: var(--danger);
}

/* --- Rules Guide grid (filters.html documentation card) -----------------
   CSS columns instead of grid: каждый item hugs его контент, нет inflate
   высоты ряда от самого большого блока (например, Quirk). */
.uk-rules-guide-grid {
  column-width: 300px;
  column-gap: var(--space-4);
  font-size: var(--text-s);
  color: var(--text-secondary);
}

.uk-rules-guide-grid>div {
  break-inside: avoid;
  margin-bottom: var(--space-4);
  display: block;
}

.uk-rules-guide-grid strong {
  color: var(--accent);
}

.uk-rules-guide-grid kbd {
  font-family: var(--font-mono);
  color: var(--text-primary);
  background: transparent;
  padding: 0;
  border: 0;
  font-size: inherit;
}

.filter-rule-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  padding: var(--space-3);
  background: var(--color-containers2);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.filter-rule-row .row-header {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.filter-rule-row .rule-key-select {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: var(--weight-medium);
}

.rule-controls-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.condition-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3);
}

/* Override the global `.uk-input/.uk-select { width: 100% }` so flex sizing
   wins inside condition rows; otherwise the value input claims a full line
   and wraps below the operator. */
.condition-item .uk-input,
.condition-item .uk-select {
  width: auto;
}

.condition-item .filter-value {
  flex: 1 1 120px;
  min-width: 100px;
}

.condition-item .filter-operator {
  flex: 0 0 auto;
  min-width: 150px;
}

.condition-item .uk-checkbox {
  flex: 0 0 auto;
}

.condition-item .remove-condition-button {
  flex: 0 0 auto;
  margin-left: auto;
}

/* Chip-style condition checkboxes (market / phase / rarity / fire_and_ice):
   каждый label — отдельный filled chip с границей. Rarity — у каждого свой
   inline color из rarity-токена, поэтому color из правил ниже не перебьёт его.
   fire-ice-checkboxes — вложенный wrapper внутри quirk-condition-item (там же
   живут range-inputs), поэтому селектор без `.condition-item.` префикса. */
.condition-item.market-checkboxes,
.condition-item.phase-checkboxes,
.condition-item.rarity-checkboxes,
.fire-ice-checkboxes {
  gap: var(--space-2);
}

.fire-ice-checkboxes {
  display: flex;
  flex-wrap: wrap;
}

.condition-item.market-checkboxes>.uk-checkbox,
.condition-item.phase-checkboxes>.uk-checkbox,
.condition-item.rarity-checkboxes>.uk-checkbox,
.fire-ice-checkboxes>.uk-checkbox {
  padding: var(--space-1) var(--space-3);
  background: var(--color-atoms);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  font-size: var(--text-s);
  color: var(--text-secondary);
}

.condition-item.market-checkboxes>.uk-checkbox:has(input:checked),
.condition-item.phase-checkboxes>.uk-checkbox:has(input:checked),
.condition-item.rarity-checkboxes>.uk-checkbox:has(input:checked),
.fire-ice-checkboxes>.uk-checkbox:has(input:checked) {
  border-color: var(--accent);
  color: var(--text-primary);
}

.add-condition-button {
  align-self: flex-start;
}

/* --- Inline price-history chart (rendered inside <tr> in the prices table) */
.uk-table--prices tr.chart-row>.chart-cell {
  background: var(--color-containers);
  border-bottom: 1px solid var(--border-default);
  padding: var(--space-3) var(--space-4);
}

.chart-container {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
}

.chart-toolbar {
  display: flex;
  gap: var(--space-1);
  justify-content: flex-end;
}

.chart-range-btn {
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-sm);
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-s);
  padding: 0 var(--space-2);
  height: var(--space-6);
  transition: color var(--transition-fast), border-color var(--transition-fast),
    background var(--transition-fast);
}

.chart-range-btn:hover {
  color: var(--text-secondary);
  border-color: var(--text-disabled);
  background: var(--color-active);
}

.chart-range-btn.active {
  color: var(--accent);
  border-color: var(--accent-border);
  background: var(--accent-bg);
}

.chart-canvas-wrap {
  position: relative;
  height: 320px;
  width: 100%;
}

.chart-loading {
  color: var(--text-muted);
  font-size: var(--text-m);
  text-align: center;
  padding: var(--space-6);
}

/* =========================================================================
   Profit page
   ========================================================================= */

/* Always-visible top summary cards (Today / This month). */
.profit-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.profit-summary__card {
  flex: 1 1 0;
  min-width: 180px;
  padding: 12px 16px;
  background: var(--color-containers);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.profit-summary__label {
  color: var(--text-muted);
  font-size: var(--text-s, 12px);
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.profit-summary__value {
  font-size: var(--text-2xl, 22px);
  font-weight: 700;
  color: var(--text-primary);
  margin-top: 4px;
}

.profit-summary__value.positive {
  color: var(--success);
}

.profit-summary__value.negative {
  color: var(--danger);
}

.profit-summary__card small {
  color: var(--text-muted);
  margin-left: 2px;
}

.profit-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
}

/* Search input в section header — над заголовком на полную ширину header'a. */
.profit-section__search {
  width: 100%;
  max-width: 320px;
}

.profit-toolbar__periods {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.profit-toolbar__custom {
  display: flex;
  align-items: center;
  gap: 6px;
}

.profit-toolbar__summary {
  color: var(--text-secondary);
  font-size: var(--text-l, 16px);
}

.profit-toolbar__summary small {
  color: var(--text-muted);
  margin-left: 4px;
}

.profit-toolbar__total {
  font-weight: 600;
  font-size: var(--text-xl, 18px);
  color: var(--text-primary);
}

.profit-toolbar__total.positive {
  color: var(--success);
}

.profit-toolbar__total.negative {
  color: var(--danger);
}

/* Header секции: search сверху (по всей ширине), под ним title-row (title + action). */
.profit-section__header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 28px 0 12px;
}

.profit-section__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.profit-section__title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 6px 0;
  color: var(--text-primary);
  font-size: var(--text-xl, 18px);
}

.profit-section__count {
  font-size: var(--text-m, 14px);
  color: var(--text-muted);
  font-weight: normal;
}

.profit-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Footer пагинации на /profit (info + per-page + uk-pagination) — добавляем
   вертикальный/горизонтальный падинг (на дашборде он уже находится внутри
   панели с своим padding'ом, поэтому глобальное правило не трогаем). */
.profit-list~.uk-prices-page__footer {
  padding: var(--space-3) var(--space-2);
}

.profit-empty {
  color: var(--text-muted);
  padding: 12px 4px;
}

.profit-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* Manual purchase dialog */
.profit-dialog {
  border: 1px solid var(--border-default);
  background: var(--color-containers);
  color: var(--text-primary);
  border-radius: 8px;
  padding: 16px;
  min-width: 360px;
  max-width: 90vw;
}

.profit-dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
}

.profit-dialog h3 {
  margin: 0 0 12px;
  color: var(--text-primary);
}

.profit-dialog__actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}

/* Horizontal purchase card (layout-shell для item-row + controls) */
.purchase-card {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  background: var(--color-containers);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  overflow: hidden;
}

.purchase-card__item {
  flex: 0 0 400px;
  width: 400px;
  min-width: 0;
}

/* Скрываем кнопку Buy внутри карточки на /profit — у нас свои controls. */
.purchase-card .uk-item__buy {
  display: none;
}

/* Анимация "новинки" не нужна на статической странице. */
.purchase-card .uk-item--new {
  animation: none;
}

/* =========================================================================
   .uk-item--row — на /profit карточка как обычная (300×280), но шире (400)
   и с парой точечных правок:
   - footer скрыт (все данные в controls);
   - actions под хешнеймом идут горизонтальным рядом, а не вертикальной колонкой;
   - стикеры 2..5 (всё кроме первого с SP-ценой) уезжают в свой
     горизонтальный sub-ряд, чтобы не складываться столбиком.
   ========================================================================= */
.uk-item.uk-item--row {
  width: 400px;
}

/* Сжимаем высоту image-area: 280px дашборд-дефолт слишком высокий для row-карточки. */
.uk-item--row .uk-item__image {
  height: 180px;
}

/* Action icons (маркет/инспект/время) — горизонтальный ряд под именем. */
.uk-item--row .uk-item-actions {
  flex-direction: row;
  align-items: center;
}

/* Sub-ряд для стикеров 2..5 (горизонтальный). Положение справа,
   потому что родительский .uk-item__stickers выровнен по правому краю. */
.uk-item--row .uk-item__stickers-row {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: flex-end;
  gap: var(--space-1);
}

/* Стикеры без uk-item__sticker-price — wear-текст над иконкой. */
.uk-item--row .uk-item__sticker-row:not(:has(.uk-item__sticker-price)) .uk-item__icon-wrap {
  flex-direction: column;
  align-items: center;
  gap: 0;
}

/* Phase, перенесённая в seed: рендерится инлайн с пробелом, цвет phase сохраняется. */
.uk-item--row .uk-item__seed .uk-item__phase {
  display: inline;
}

/* Footer (filtername / price / pricediff) скрыт — все данные в controls. */
.uk-item--row .uk-item__footer {
  display: none;
}

/* На узких экранах карточка сжимается до полной ширины контейнера. */
@media (max-width: 900px) {
  .uk-item.uk-item--row {
    width: 100%;
  }

  .purchase-card__item {
    flex: 1 1 auto;
    width: 100%;
  }
}

.purchase-card__controls {
  position: relative;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
  padding: 12px 14px;
  border-left: 1px solid var(--border-muted);
  background: var(--color-containers2);
  font-size: var(--text-m, 14px);
  color: var(--text-secondary);
  min-width: 0;
}

/* Top row controls: dates слева (closed) + actions справа.
   В open mode дат нет — actions упирается в правый край через margin-left: auto. */
.purchase-card__top {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
}

.purchase-card__top .purchase-card__dates {
  flex: 1 1 auto;
}

.purchase-card__top .purchase-card__actions {
  margin-left: auto;
  display: flex;
  gap: 6px;
}

.purchase-card__row {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Заголовок не ужимается, имеет одинаковую min-width во всех рядах —
   значения (float, seed, bought, sold) начинаются с одного x по всей панели. */
.purchase-card__row .key {
  flex: 0 0 auto;
  white-space: nowrap;
  min-width: 90px;
}

/* Inputs компактные, не флексятся в полный ряд. */
.purchase-card__row--input .uk-input,
.purchase-card__row--has-edit .uk-input {
  flex: 0 0 auto;
  width: 90px;
  min-width: 0;
}

/* Edit-кнопка возле "Bought for:" — компактная, без ужимания. */
.purchase-card__edit {
  flex: 0 0 auto;
  padding: 2px 6px;
}


.purchase-card__controls .key {
  color: var(--text-muted);
  margin-right: 4px;
}

.purchase-card__controls .val {
  color: var(--text-primary);
  font-weight: 600;
}

.purchase-card__controls .val.muted {
  color: var(--text-muted);
  font-weight: normal;
}

.purchase-card__profit .val {
  font-weight: 700;
  font-size: var(--text-l, 16px);
}

.purchase-card__profit--positive .val {
  color: var(--success);
}

.purchase-card__profit--negative .val {
  color: var(--danger);
}

.purchase-card__dates,
.purchase-card__dates small {
  color: var(--text-muted);
  font-size: var(--text-s, 13px);
}

.purchase-card__actions {
  display: flex;
  gap: 6px;
  margin-top: 6px;
}

@media (max-width: 720px) {
  .purchase-card {
    flex-direction: column;
  }

  .purchase-card__controls {
    flex-basis: auto;
    border-left: none;
    border-top: 1px solid var(--border-muted);
  }
}

/* === Landing === */

.uk-landing {
  display: block;
  padding-bottom: var(--space-12);
}

.uk-landing__section {
  padding: var(--space-10) 0;
}

.uk-landing__section--hero {
  padding-top: var(--space-16);
  padding-bottom: var(--space-10);
}

.uk-scope .uk-landing__section-title {
  margin: 0 0 var(--space-4) 0;
  font-size: var(--text-3xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

/* Hero */
.uk-landing__hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-4);
}

.uk-landing__brand {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}

.uk-landing__brand-logo {
  width: 48px;
  height: 48px;
  object-fit: contain;
}

.uk-landing__brand-name {
  font-size: var(--text-2xl);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.01em;
}

.uk-landing__hero-title {
  margin: 0;
  font-size: clamp(28px, 5vw, 48px);
  line-height: 1.15;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
  letter-spacing: -0.02em;
  max-width: 880px;
}

.uk-landing__hero-subtitle {
  margin: 0;
  max-width: 720px;
  font-size: var(--text-l);
  line-height: 1.6;
  color: var(--text-secondary);
}

.uk-landing__hero-cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-3);
  margin-top: var(--space-2);
}

/* Features */
.uk-landing__features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--space-4);
}

.uk-landing__feature {
  padding: var(--space-5);
  background: var(--color-containers);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color 150ms ease, transform 150ms ease;
}

.uk-landing__feature:hover {
  border-color: var(--accent);
  transform: translateY(-1px);
}

.uk-landing__feature-title {
  margin-bottom: var(--space-2);
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.uk-landing__feature-text {
  font-size: var(--text-m);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* Steps */
.uk-landing__steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
}

.uk-landing__step {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "num title"
    "text text";
  align-content: start;
  column-gap: var(--space-3);
  row-gap: var(--space-3);
  padding: var(--space-5);
  background: var(--color-containers);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
}

.uk-landing__step-num {
  grid-area: num;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  color: var(--accent);
  background: var(--accent-bg);
  border: 1px solid var(--accent-border);
  border-radius: var(--radius-circle);
}

.uk-landing__step-title {
  grid-area: title;
  display: flex;
  align-items: center;
  min-height: 32px;
  font-size: var(--text-l);
  line-height: 1.2;
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.uk-landing__step-text {
  grid-area: text;
  font-size: var(--text-m);
  line-height: 1.6;
  color: var(--text-secondary);
}

/* FAQ */
.uk-landing__faq {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
}

.uk-landing__faq-item {
  padding: var(--space-4) var(--space-5);
  background: var(--color-containers);
  border: 1px solid var(--border-default);
  border-radius: var(--radius-md);
  transition: border-color 150ms ease;
}

.uk-landing__faq-item[open] {
  border-color: var(--accent-border);
}

.uk-landing__faq-q {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  font-size: var(--text-l);
  font-weight: var(--weight-bold);
  color: var(--text-primary);
}

.uk-landing__faq-q::-webkit-details-marker {
  display: none;
}

.uk-landing__faq-q::after {
  content: "+";
  font-size: var(--text-xl);
  font-weight: var(--weight-regular);
  color: var(--text-muted);
  transition: transform 150ms ease;
}

.uk-landing__faq-item[open] .uk-landing__faq-q::after {
  content: "\2212";
  color: var(--accent);
}

.uk-landing__faq-a {
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid var(--border-subtle);
  font-size: var(--text-m);
  line-height: 1.6;
  color: var(--text-secondary);
}

.uk-landing__faq-a ol {
  margin: 0;
  padding-left: var(--space-5);
}

.uk-landing__faq-a ol li+li {
  margin-top: var(--space-1);
}

.uk-landing__faq-a ol li::marker {
  color: var(--accent);
}

/* Footer */
.uk-landing__footer {
  padding-top: var(--space-8);
  border-top: 1px solid var(--border-subtle);
  text-align: center;
  font-size: var(--text-s);
  color: var(--text-muted);
}

/* Landing responsive */
@media (max-width: 960px) {
  .uk-landing__steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .uk-landing__section {
    padding: var(--space-8) 0;
  }

  .uk-landing__section--hero {
    padding-top: var(--space-12);
  }

  .uk-landing__steps {
    grid-template-columns: 1fr;
  }
}