/* ============================================================
   DemItems — тема в стиле сайта DemStudios
   (шрифты Inter + Unbounded, тёмный фон, карточки white/4%,
   акцент #3670E2, иконки Lucide). Подключается последней и
   переопределяет токены/компоненты из style.css и остальных.
   ============================================================ */

/* ── Шрифты сайта ── */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/9c72aa0f40e4eef8-s.18a48cbc.woff2') format('woff2');
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/1bffadaabf893a1e-s.7cd81963.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 100 900; font-display: swap;
  src: url('fonts/83afe278b6a6bb3c-s.p.3a6ba036.woff2') format('woff2');
  unicode-range: U+00-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/4e1c87b7aa9e2f2f-s.ab54a6c0.woff2') format('woff2');
  unicode-range: U+301, U+400-45F, U+490-491, U+4B0-4B1, U+2116; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/dd14639a62c56cb2-s.aaba70fa.woff2') format('woff2');
  unicode-range: U+100-2BA, U+2BD-2C5, U+2C7-2CC, U+2CE-2D7, U+2DD-2FF, U+304, U+308, U+329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Unbounded'; font-style: normal; font-weight: 200 900; font-display: swap;
  src: url('fonts/b59689b1142d37ce-s.p.0d06c9b2.woff2') format('woff2');
  unicode-range: U+00-FF, U+131, U+152-153, U+2BB-2BC, U+2C6, U+2DA, U+2DC, U+304, U+308, U+329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ── Токены сайта ── */
:root {
  --ds-bg: #0a0a0a;
  --ds-card: rgba(255, 255, 255, 0.04);
  --ds-card-2: rgba(255, 255, 255, 0.06);
  --ds-card-hover: rgba(255, 255, 255, 0.08);
  --ds-line: rgba(255, 255, 255, 0.04);
  --ds-line-2: rgba(255, 255, 255, 0.08);
  --ds-input: #131313;
  --ds-input-hover: #181818;
  --ds-input-line: rgba(255, 255, 255, 0.09);
  --ds-input-line-hover: rgba(255, 255, 255, 0.16);
  --ds-popover: #101010;
  --ds-text: #ffffff;
  --ds-text-2: #D1D5DC;
  --ds-text-3: rgba(255, 255, 255, 0.45);
  --ds-text-4: rgba(255, 255, 255, 0.28);
  --ds-accent: #3670E2;
  --ds-accent-hover: #2d5fc4;
  --ds-accent-text: #8fb5ff;
  --ds-accent-soft: rgba(54, 112, 226, 0.10);
  --ds-accent-line: rgba(54, 112, 226, 0.25);
  --ds-focus-bg: #111a33;
  --ds-green: #34d399;
  --ds-amber: #fbbf24;
  --ds-red: #f87171;
  --ds-red-soft: rgba(239, 68, 68, 0.10);
  --nav-w: 288px;

  /* перекладываем старые токены на палитру сайта */
  --color-bg-app: var(--ds-bg);
  --color-bg-sidebar: transparent;
  --color-bg-card: rgba(255, 255, 255, 0.04);
  --color-bg-input: var(--ds-input);
  --color-bg-input-hover: var(--ds-input-hover);
  --color-bg-hover: rgba(255, 255, 255, 0.08);
  --color-bg-active: rgba(255, 255, 255, 0.10);
  --color-bg-glass: rgba(16, 16, 16, 0.82);
  --color-bg-glass-strong: rgba(16, 16, 16, 0.94);
  --color-text-1: var(--ds-text);
  --color-text-2: var(--ds-text-2);
  --color-text-3: var(--ds-text-3);
  --color-text-4: var(--ds-text-4);
  --color-accent: var(--ds-accent);
  --color-accent-hover: var(--ds-accent-hover);
  --color-accent-press: #2752a8;
  --color-accent-soft: var(--ds-accent-soft);
  --color-accent-ring: rgba(54, 112, 226, 0.35);
  --gradient-accent: var(--ds-accent);
  --color-cam-accent: var(--ds-accent);
  --color-cam-soft: var(--ds-accent-soft);
  --color-success: var(--ds-green);
  --color-warning: var(--ds-amber);
  --color-danger: var(--ds-red);
  --color-info: #6ea1ff;
  --color-success-soft: rgba(52, 211, 153, 0.10);
  --color-warning-soft: rgba(251, 191, 36, 0.10);
  --color-danger-soft: var(--ds-red-soft);
  --color-axis-x: #f87171;
  --color-axis-y: #34d399;
  --color-axis-z: #6ea1ff;
  --font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: 'Unbounded', 'Inter', sans-serif;
  --tracking-label: 0;
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --shadow-1: none;
  --shadow-2: 0 12px 32px -16px rgba(0, 0, 0, 0.8);
  --shadow-3: 0 24px 90px -38px rgba(0, 0, 0, 0.95);
  --shadow-glass: 0 24px 60px -30px rgba(0, 0, 0, 0.9);
  --topbar-h: auto;
  --sidebar-w: 360px;
}

/* ── База ── */
html, body {
  background: var(--ds-bg);
  color: var(--ds-text-2);
  font-family: var(--font-sans);
  font-size: 14px;
}
/* Никакого капса и разрядки */
*, *::before, *::after { text-transform: none !important; letter-spacing: normal !important; }
code, kbd { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; }
code {
  padding: 1px 6px; border-radius: 6px;
  background: rgba(255, 255, 255, 0.06); color: var(--ds-text);
  font-size: 0.92em;
}
.is-gone { display: none !important; }
button { font-family: inherit; }
*::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.10); }

/* ── Боковое меню (как AdminLayout сайта) ── */
.dnav {
  position: fixed; z-index: 300;
  top: 16px; bottom: 16px; left: 16px; width: calc(var(--nav-w) - 32px);
  display: flex; flex-direction: column;
  padding: 22px 14px 14px;
  border-radius: 26px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--ds-line);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  overflow-y: auto; scrollbar-width: none;
}
.dnav::-webkit-scrollbar { display: none; }
.dnav__brand {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  margin-bottom: 22px; text-decoration: none;
}
.dnav__brand img { width: 32px; height: 32px; }
.dnav__brand-text { font: 700 21px/1 var(--font-display); color: #fff; }
.dnav__list { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.dnav__item {
  position: relative;
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 13px 14px;
  border: 0; border-radius: 12px; background: transparent;
  color: var(--ds-text-2); text-align: left; cursor: pointer;
  transition: background-color .3s, color .3s;
}
.dnav__item:hover { background: rgba(255, 255, 255, 0.08); color: #fff; }
.dnav__item.is-active { background: var(--ds-accent); color: #fff; }
.dnav__item.is-active::before {
  content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
  width: 4px; height: 30px; border-radius: 0 999px 999px 0; background: #fff;
}
.dnav__icon { width: 20px; height: 20px; flex-shrink: 0; }
.dnav__text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.dnav__label { font: 500 15px/1.25 var(--font-sans); }
.dnav__sub { font-size: 12px; opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dnav__chev { width: 16px; height: 16px; flex-shrink: 0; opacity: 0; transition: opacity .3s; }
.dnav__item:hover .dnav__chev { opacity: .5; }
.dnav__item.is-active .dnav__chev { opacity: 1; }
.dnav__item:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.dnav__foot { padding-top: 14px; margin-top: 10px; border-top: 1px solid var(--ds-line); }
.dnav__rp { display: flex; align-items: flex-start; gap: 12px; padding: 10px 14px; color: var(--ds-text-2); }
.dnav__rp > svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.dnav__rp-text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.dnav__rp-label { font: 500 15px/1.25 var(--font-sans); }
.dnav .rp-status { position: static; display: block; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; font-size: 12px; color: var(--ds-text-3); white-space: normal; }

/* ── Общие элементы ── */
.page-head {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 8px 8px 0; height: auto; min-height: 0;
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.page-head__text { min-width: 0; }
.page-head__title { font: 700 26px/1.2 var(--font-display); color: #fff; margin: 0; }
.page-head__sub { margin-top: 4px; font-size: 14px; color: var(--ds-text-2); display: flex; align-items: center; gap: 8px; min-height: 20px; }
.page-head__actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.search-field { position: relative; display: flex; align-items: center; flex: 1; min-width: 0; }
.search-field > svg { position: absolute; left: 12px; width: 16px; height: 16px; color: rgba(255, 255, 255, 0.28); pointer-events: none; }
.search-field input {
  width: 100%; height: 42px; padding: 0 14px 0 36px;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.06);
  background: rgba(255, 255, 255, 0.06); color: #fff;
  font: 400 14px var(--font-sans); outline: none; transition: border-color .2s;
}
.search-field input::placeholder { color: rgba(255, 255, 255, 0.28); }
.search-field input:focus { border-color: rgba(54, 112, 226, 0.5); }

.icon-btn {
  flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 12px;
  border: 1px solid var(--ds-line-2); background: rgba(255, 255, 255, 0.06);
  color: var(--ds-text-2); cursor: pointer; transition: background-color .2s, color .2s;
}
.icon-btn:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.icon-btn svg { width: 17px; height: 17px; }

.empty-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--ds-accent-soft); color: #6ea1ff; border: 1px solid var(--ds-accent-line);
}

/* Поля ввода в стиле AdminSelect / input сайта */
input[type="text"], input[type="number"], input:not([type]), textarea, select {
  font-family: var(--font-sans);
}
.cfg-field input, .cfg-field textarea, .cfg-field select,
.bp-field input, .bp-field textarea, .bp-field select,
.ie-props input[type="number"], .rp-target__select, .rp-player-manual, .rp-player-select,
.mobs-select, .bld-type-sel, #int-form input, #int-form select, #int-form textarea {
  background-color: var(--ds-input) !important;
  border: 1px solid var(--ds-input-line) !important;
  border-radius: 12px !important;
  color: #fff !important;
  font-size: 14px !important;
  box-shadow: none !important;
  outline: none;
  transition: border-color .2s, background-color .2s;
}
.cfg-field input:hover, .cfg-field textarea:hover, .cfg-field select:hover,
.bp-field input:hover, .bp-field textarea:hover, .bp-field select:hover,
.mobs-select:hover, .bld-type-sel:hover { border-color: var(--ds-input-line-hover) !important; background-color: var(--ds-input-hover) !important; }
.cfg-field input:focus, .cfg-field textarea:focus, .cfg-field select:focus,
.bp-field input:focus, .bp-field textarea:focus, .bp-field select:focus,
.ie-props input:focus, .rp-player-manual:focus, #int-form input:focus, #int-form textarea:focus {
  border-color: rgba(54, 112, 226, 0.7) !important; background-color: var(--ds-focus-bg) !important;
  box-shadow: 0 10px 30px -18px rgba(54, 112, 226, 0.85) !important;
}
select option { background: #101010; color: #fff; }

/* Кнопки */
.btn, .bld-btn, .skins-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 40px; padding: 0 16px;
  border-radius: 12px !important;
  border: 1px solid var(--ds-line-2) !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #fff !important;
  font: 500 14px/1 var(--font-sans) !important;
  box-shadow: none !important;
  cursor: pointer; transition: background-color .2s, opacity .2s;
}
.btn:hover, .bld-btn:hover, .skins-btn:hover { background: rgba(255, 255, 255, 0.10) !important; }
.btn-primary, .bld-btn--accent, .skins-btn--accent {
  background: var(--ds-accent) !important; border-color: var(--ds-accent) !important; color: #fff !important; font-weight: 600 !important;
}
.btn-primary:hover, .bld-btn--accent:hover, .skins-btn--accent:hover { background: var(--ds-accent-hover) !important; }
.bld-btn--danger { background: var(--ds-red-soft) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; }
.bld-btn--danger:hover { background: rgba(239, 68, 68, 0.16) !important; }
.btn:disabled, .bld-btn:disabled { opacity: .5; cursor: not-allowed; }
.btn svg, .bld-btn svg { width: 16px; height: 16px; flex-shrink: 0; }

/* Переключатели (тумблеры) */
.cfg-toggle__track, .bp-toggle__t { background: rgba(255, 255, 255, 0.12) !important; border: 0 !important; }
.cfg-toggle input:checked + .cfg-toggle__track, .bp-toggle input:checked + .bp-toggle__t { background: var(--ds-accent) !important; }

/* Сегменты / вкладки-пилюли (как фильтры сайта) */
.seg-tabs, .gui-mode-toggle, .bp-pal-tabs, .if-layer {
  display: flex; gap: 4px; padding: 4px;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
  border-radius: 14px !important;
}
.seg-tab, .gui-mode-toggle__btn, .bp-pal-tab, .if-layer-btn {
  flex: 1; height: 34px; padding: 0 12px;
  border: 0 !important; border-radius: 10px !important;
  background: transparent !important; color: var(--ds-text-2) !important;
  font: 500 13px/1 var(--font-sans) !important; cursor: pointer; box-shadow: none !important;
  transition: background-color .25s, color .25s;
}
.seg-tab:hover, .gui-mode-toggle__btn:hover, .bp-pal-tab:hover, .if-layer-btn:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
.seg-tab.is-active, .gui-mode-toggle__btn.is-active, .bp-pal-tab.is-active, .if-layer-btn.is-active {
  background: var(--ds-accent) !important; color: #fff !important;
}

/* Всплывашки */
#toast-container { right: 24px; bottom: 24px; }
.toast {
  background: rgba(16, 16, 16, 0.95) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 14px !important;
  color: #fff !important;
  font: 500 14px/1.4 var(--font-sans) !important;
  box-shadow: var(--shadow-3) !important;
  backdrop-filter: blur(16px);
}

kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px;
  border-radius: 7px; border: 1px solid var(--ds-line-2); background: rgba(255, 255, 255, 0.06);
  color: #fff; font-size: 12px; box-shadow: none;
}

/* ── Экран загрузки ── */
.boot-splash { background: var(--ds-bg) !important; }
.boot-splash__card {
  display: flex; flex-direction: column; align-items: center; gap: 14px;
  padding: 36px 40px; min-width: 340px;
  border-radius: 26px; background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--ds-line); box-shadow: none;
}
.boot-splash__logo { width: 44px; height: 44px; }
.boot-splash__text { text-align: center; }
.boot-splash__title { font: 700 24px/1.2 var(--font-display) !important; color: #fff; }
.boot-splash__sub { margin-top: 4px; font-size: 14px; color: var(--ds-text-2); }
.boot-splash__bar { width: 100%; }
.boot-splash__bar-track { display: block; height: 6px; border-radius: 99px; background: rgba(255, 255, 255, 0.08); overflow: hidden; }
.boot-splash__bar-fill { display: block; height: 100%; background: var(--ds-accent) !important; border-radius: 99px; }
.boot-splash__status { font-size: 14px; color: #fff; }
.boot-splash__hint { font-size: 12px; color: var(--ds-text-3); }

/* ════════════════════════════════════════════════════════════
   Раздел «Шляпы»
   ════════════════════════════════════════════════════════════ */
#app {
  position: fixed; top: 0; right: 0; bottom: 0; left: var(--nav-w);
  width: auto; height: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: var(--sidebar-w) minmax(0, 1fr);
  grid-template-areas: "topbar topbar" "sidebar canvas";
  gap: 16px;
  padding: 24px 24px 16px 8px;
  background: var(--ds-bg);
}
.topbar { grid-area: topbar; }
.topbar-right { display: flex; align-items: center; gap: 10px; }
.current-hat { font: 500 14px var(--font-sans); color: var(--ds-text-2); }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 14px;
  border-radius: 12px; background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--ds-line-2) !important;
  color: var(--ds-text-2) !important; font: 500 13px var(--font-sans) !important;
}

.sidebar {
  grid-area: sidebar;
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ds-line) !important;
  border-radius: 20px;
  overflow: hidden;
}
.sidebar-body { padding: 10px; display: flex; flex-direction: column; gap: 8px; }

.panel {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
  border-radius: 14px; margin: 0;
}
.panel + .panel { border-top: 1px solid var(--ds-line) !important; border-radius: 0; padding-top: 4px; }
.panel__header {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 10px; background: transparent !important; border: 0; border-radius: 12px;
  color: #fff; cursor: pointer;
}
.panel__header:hover { background: rgba(255, 255, 255, 0.04) !important; }
.panel__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 10px; flex-shrink: 0;
  background: var(--ds-accent-soft); color: #6ea1ff;
}
.panel__icon svg { width: 17px; height: 17px; }
.panel__title { flex: 1; text-align: left; font: 600 15px/1.2 var(--font-sans) !important; color: #fff !important; }
.panel__chev { color: var(--ds-text-3); display: inline-flex; transition: transform .25s; }
.panel__chev svg { width: 18px; height: 18px; }
.panel.is-collapsed .panel__chev { transform: rotate(-90deg); }
.panel__body { padding: 4px 10px 14px; display: flex; flex-direction: column; gap: 12px; }

/* Список шляп */
.hat-list-tools { display: flex; gap: 8px; }
.hat-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 300px; overflow-y: auto; margin: 0 -4px; padding: 2px 4px;
}
.hat-list__empty { padding: 18px 8px; text-align: center; font-size: 13px; color: var(--ds-text-3); }
.hat-item {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 12px; background: transparent;
  color: var(--ds-text-2); text-align: left; cursor: pointer; transition: background-color .2s, color .2s;
}
.hat-item:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.hat-item.is-active { background: var(--ds-accent); color: #fff; }
.hat-item__icon {
  display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
  width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, 0.06);
}
.hat-item.is-active .hat-item__icon { background: rgba(255, 255, 255, 0.18); }
.hat-item__icon svg { width: 16px; height: 16px; }
.hat-item__text { display: flex; flex-direction: column; min-width: 0; }
.hat-item__name { font: 500 14px/1.3 var(--font-sans); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hat-item__id { font-size: 12px; opacity: .6; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.source-tab-pane + .source-tab-pane { margin-top: 4px; }
.drop-zone {
  display: flex !important; flex-direction: row !important; align-items: center; gap: 12px;
  padding: 12px 14px !important; min-height: 0 !important;
  border-radius: 14px !important;
  border: 2px dashed rgba(255, 255, 255, 0.10) !important;
  background: rgba(255, 255, 255, 0.02) !important;
  text-align: left !important; cursor: pointer; transition: border-color .2s, background-color .2s;
}
.drop-zone:hover, .drop-zone.drag-over { border-color: rgba(255, 255, 255, 0.20) !important; background: rgba(255, 255, 255, 0.04) !important; }
.drop-zone.drag-over { border-color: rgba(54, 112, 226, 0.6) !important; }
.drop-icon {
  display: inline-flex !important; align-items: center; justify-content: center; flex-shrink: 0;
  width: 36px; height: 36px; margin: 0 !important; border-radius: 10px; background: rgba(255, 255, 255, 0.06); color: var(--ds-text-2) !important;
}
.drop-icon svg { width: 18px; height: 18px; }
.drop-title { font: 500 14px/1.3 var(--font-sans) !important; color: #fff !important; margin: 0 !important; }
.drop-hint { font-size: 12px !important; color: var(--ds-text-3) !important; margin: 2px 0 0 !important; }

/* Посадка */
.xform-target-hint { font-size: 12px; color: var(--ds-text-3); margin: -2px 2px 0; }
.xform-group { background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--ds-line) !important; border-radius: 14px !important; padding: 10px 12px !important; }
.xform-group__head { gap: 8px; }
.xform-title { font: 600 14px var(--font-sans) !important; color: #fff !important; }
.xform-icon { color: #6ea1ff !important; }
.xform-icon svg, .xform-reset svg, .xform-tool svg { width: 15px; height: 15px; }
.xform-reset, .xform-tool, .nf-reset { border-radius: 8px !important; color: var(--ds-text-3) !important; }
.xform-reset:hover, .xform-tool:hover, .nf-reset:hover { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
.nf-reset svg { width: 13px; height: 13px; }
.nf-label { font: 600 12px var(--font-sans) !important; border-radius: 6px !important; }
.nf-num { border-radius: 10px !important; background: var(--ds-input) !important; border: 1px solid var(--ds-input-line) !important; }
.nf-input { color: #fff !important; font: 500 13px var(--font-sans) !important; }
.nf-unit { color: var(--ds-text-3) !important; }
.uniform-chip { border-radius: 999px !important; font-size: 12px !important; }
input[type="range"].slider { accent-color: var(--ds-accent); }

/* Параметры */
.cfg-field label { font: 500 13px var(--font-sans) !important; color: var(--ds-text-2) !important; }
.cfg-hint { font-size: 12px !important; color: var(--ds-text-3) !important; font-weight: 400 !important; }
.cfg-field input, .cfg-field select { height: 42px; padding: 0 12px; }
.cfg-field textarea { padding: 10px 12px; }
.cfg-switch-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ds-line); cursor: pointer;
}
.cfg-switch-row__text { display: flex; flex-direction: column; gap: 2px; }
.cfg-switch-row__title { font: 500 14px var(--font-sans); color: #fff; }
.cfg-switch-row__hint { font-size: 12px; color: var(--ds-text-3); }

/* Горячие клавиши */
.help-list { gap: 6px !important; }
.help-row { display: flex !important; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--ds-text-2); }
.help-keys { display: inline-flex; gap: 4px; flex-shrink: 0; }

/* Нижняя панель с кнопкой */
.sidebar-footer { background: transparent !important; border-top: 1px solid var(--ds-line) !important; padding: 12px !important; box-shadow: none !important; }
.cta { border-radius: 12px !important; height: 46px !important; box-shadow: none !important; }
.cta-primary { background: var(--ds-accent) !important; color: #fff !important; font: 600 14px var(--font-sans) !important; border: 0 !important; }
.cta-primary:hover { background: var(--ds-accent-hover) !important; }
.cta-primary[data-phase="done"] { background: #10b981 !important; }
.cta-primary[data-phase="error"] { background: #dc2626 !important; }
.cta-more { background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--ds-line-2) !important; color: #fff !important; width: 46px !important; }
.cta-more:hover { background: rgba(255, 255, 255, 0.10) !important; }
.more-menu {
  background: rgba(16, 16, 16, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.10) !important;
  border-radius: 16px !important; box-shadow: var(--shadow-3) !important; padding: 6px !important;
  backdrop-filter: blur(16px);
}
.more-item { border-radius: 10px !important; padding: 10px !important; }
.more-item:hover { background: rgba(255, 255, 255, 0.06) !important; }
.more-item__icon { color: #6ea1ff !important; }
.more-item__icon svg { width: 17px; height: 17px; }
.more-item__title { font: 500 14px var(--font-sans) !important; color: #fff !important; }
.more-item__hint { font-size: 12px !important; color: var(--ds-text-3) !important; }
.more-item-danger .more-item__icon, .more-item-danger .more-item__title { color: #fca5a5 !important; }
.more-sep { background: var(--ds-line-2) !important; }
.rp-target__label, .rp-player-label { font: 500 13px var(--font-sans) !important; color: var(--ds-text-2) !important; }
.status-message { font-size: 12px !important; color: var(--ds-text-3) !important; }

/* 3D-область */
.canvas-container {
  grid-area: canvas;
  border-radius: 20px; overflow: hidden;
  border: 1px solid var(--ds-line);
  background: #0d0d0f;
}
.canvas-placeholder { background: rgba(10, 10, 10, 0.55) !important; backdrop-filter: blur(6px); }
.canvas-placeholder__box {
  display: flex; flex-direction: column; align-items: center; gap: 12px; max-width: 420px;
  padding: 32px !important; border-radius: 20px !important; text-align: center;
  background: rgba(16, 16, 16, 0.92) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; box-shadow: var(--shadow-3) !important;
}
.canvas-placeholder__art {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; background: var(--ds-accent-soft) !important; color: #6ea1ff !important; border: 1px solid var(--ds-accent-line);
}
.canvas-placeholder__title { font: 600 18px/1.3 var(--font-display) !important; color: #fff !important; }
.canvas-placeholder__hint { font-size: 14px !important; line-height: 1.5; color: var(--ds-text-2) !important; }
.canvas-placeholder__actions { display: flex; gap: 8px; justify-content: center; margin-top: 4px; }

.cam-overlay {
  background: rgba(16, 16, 16, 0.88) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important; box-shadow: var(--shadow-2) !important; backdrop-filter: blur(16px);
}
.cam-btn {
  width: auto !important; min-width: 38px; height: 36px !important; padding: 0 10px !important;
  border-radius: 10px !important; color: var(--ds-text-2) !important; background: transparent !important; border: 0 !important;
}
.cam-btn:hover { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
.cam-btn.is-active, .cam-btn-accent { background: var(--ds-accent) !important; color: #fff !important; box-shadow: none !important; }
.cam-btn-accent:hover { background: var(--ds-accent-hover) !important; }
.cam-btn__txt { font: 500 13px var(--font-sans); white-space: nowrap; }
.cam-chip {
  height: 32px !important; padding: 0 10px !important; gap: 6px; border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--ds-line-2) !important;
  color: var(--ds-text-2) !important; font: 500 12px var(--font-sans) !important;
}
.cam-chip[aria-pressed="true"] { background: var(--ds-accent) !important; border-color: var(--ds-accent) !important; color: #fff !important; }
.cam-sep { background: var(--ds-line-2) !important; }
.cam-status { display: none !important; }
.cam-collapse { border-radius: 10px !important; color: var(--ds-text-3) !important; }

.slot-preview { background: rgba(16, 16, 16, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; border-radius: 16px !important; }
.slot-preview__title { font: 500 12px var(--font-sans) !important; color: var(--ds-text-2) !important; }

.canvas-loader__card {
  background: rgba(16, 16, 16, 0.94) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important; box-shadow: var(--shadow-3) !important;
}
.canvas-loader__title { font: 600 15px var(--font-sans) !important; color: #fff !important; }
.canvas-loader__spinner { color: #6ea1ff !important; }
.canvas-loader__bar-track { background: rgba(255, 255, 255, 0.08) !important; border-radius: 99px !important; }
.canvas-loader__bar-fill { background: var(--ds-accent) !important; border-radius: 99px !important; }
.canvas-loader__phases li { font-size: 12px !important; }
.canvas-loader__phases li.is-active { color: #6ea1ff !important; }
.canvas-loader__phases li.is-done { color: var(--ds-green) !important; }

.dirty-dot[data-state="dirty"] .dirty-pulse { background: var(--ds-amber) !important; }

/* ════════════════════════════════════════════════════════════
   Остальные разделы — полноэкранные справа от меню
   ════════════════════════════════════════════════════════════ */
.gui-view, .builder-view {
  inset: 0 0 0 var(--nav-w) !important;
  background: var(--ds-bg) !important;
  padding: 24px 24px 16px 8px;
  gap: 16px;
}
.gui-view__top, .builder-top { padding: 8px 8px 0 !important; }

/* Иконки — каталог */
.gui-view__count { font-size: 14px; color: var(--ds-text-2); }
.gui-view__search { max-width: 360px; min-width: 240px; }
.gui-groups { padding: 0 !important; gap: 6px !important; background: transparent !important; border: 0 !important; }
.gui-chip {
  height: 36px; padding: 0 14px !important; border-radius: 12px !important;
  background: rgba(255, 255, 255, 0.06) !important; border: 1px solid rgba(255, 255, 255, 0.06) !important;
  color: var(--ds-text-2) !important; font: 500 13px var(--font-sans) !important;
}
.gui-chip:hover { background: rgba(255, 255, 255, 0.10) !important; color: #fff !important; }
.gui-chip.is-active { background: var(--ds-accent) !important; border-color: var(--ds-accent) !important; color: #fff !important; }
.gui-grid { padding: 0 !important; gap: 12px !important; }
.gui-card {
  border-radius: 16px !important; background: rgba(255, 255, 255, 0.04) !important;
  border: 1px solid var(--ds-line) !important; box-shadow: none !important; transition: background-color .2s, border-color .2s;
}
.gui-card:hover { background: rgba(255, 255, 255, 0.07) !important; border-color: var(--ds-line-2) !important; }
.gui-card__thumb { background: #0d0d0f !important; border-radius: 12px !important; }
.gui-card__name { font: 500 13px var(--font-sans) !important; color: #fff !important; }
.gui-card__group, .gui-card__meta { font-size: 12px !important; color: var(--ds-text-3) !important; }
.gui-empty, .skins-empty { gap: 10px; }
.gui-empty__title, .skins-empty__title { font: 600 18px/1.3 var(--font-display) !important; color: #fff !important; }
.gui-empty__hint, .skins-empty__hint { font-size: 14px !important; color: var(--ds-text-2) !important; max-width: 440px; line-height: 1.5; }

/* Скины */
.skins-body { padding: 0 8px !important; }
.skins-search { display: flex; align-items: center; gap: 10px; max-width: 560px; }
.skins-status { font-size: 13px; color: var(--ds-text-3); }
.skin-card { border-radius: 20px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--ds-line) !important; }
.skin-card__title { font: 600 15px var(--font-sans) !important; color: #fff !important; }
.skin-card__art { background: #0d0d0f !important; border-radius: 14px !important; }
.skins-meta { border-radius: 20px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--ds-line) !important; }
.skins-meta__k { font: 400 13px var(--font-sans) !important; color: var(--ds-text-3) !important; flex-basis: 120px !important; }
.skins-meta__v { font-size: 13px !important; color: #fff !important; }
.skins-link { color: #6ea1ff !important; }

/* Интеграции */
.int-layout { padding: 0 8px; display: flex; flex-direction: column; gap: 16px; }
.int-group, .ie-list__item { border-radius: 14px !important; }
#int-form-wrap { border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ds-line); padding: 20px; }
#int-form-title, #ie-props-title { font: 600 16px var(--font-display) !important; color: #fff !important; }
.ie-empty-hint { font-size: 14px !important; color: var(--ds-text-3) !important; }

/* Меню (конструктор) */
.builder-current { font-size: 14px; color: var(--ds-text-2); }
.builder-actions { gap: 8px !important; }
.builder-body { gap: 16px !important; padding: 0 !important; }
.builder-list, .builder-panel {
  background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--ds-line) !important;
  border-radius: 20px !important; box-shadow: none !important;
}
.builder-list { padding: 10px !important; }
.builder-list__head { padding: 6px 6px 10px !important; }
.builder-list__title { font: 600 15px var(--font-sans) !important; color: #fff !important; }
.bld-icon-btn { border-radius: 10px !important; color: var(--ds-text-3) !important; }
.bld-icon-btn:hover { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
.builder-menu-item { border-radius: 12px !important; padding: 10px 12px !important; }
.builder-menu-item:hover { background: rgba(255, 255, 255, 0.06) !important; }
.builder-menu-item.is-active { background: var(--ds-accent) !important; color: #fff !important; }
.builder-menu-item.is-active .bmi-meta { color: rgba(255, 255, 255, 0.75) !important; }
.bmi-title { font: 500 14px var(--font-sans) !important; }
.bmi-meta { font-size: 12px !important; color: var(--ds-text-3) !important; }
.builder-create { width: 100%; height: 44px !important; margin-top: 8px; }
.builder-stage {
  background: rgba(255, 255, 255, 0.02) !important; border: 1px solid var(--ds-line) !important;
  border-radius: 20px !important;
}
.builder-empty__art {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 16px; background: var(--ds-accent-soft) !important; color: #6ea1ff !important; border: 1px solid var(--ds-accent-line);
}
.builder-empty__title { font: 600 18px/1.3 var(--font-display) !important; color: #fff !important; }
.builder-empty__hint { font-size: 14px !important; color: var(--ds-text-2) !important; max-width: 420px; line-height: 1.5; }
.bld-toolbar {
  background: rgba(16, 16, 16, 0.9) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 16px !important; box-shadow: var(--shadow-2) !important; padding: 6px !important; gap: 6px !important;
}
.bld-tool {
  height: 36px !important; padding: 0 12px !important; gap: 6px; border-radius: 10px !important;
  background: transparent !important; border: 0 !important; color: var(--ds-text-2) !important;
  font: 500 13px var(--font-sans) !important;
}
.bld-tool:hover:not(:disabled) { background: rgba(255, 255, 255, 0.08) !important; color: #fff !important; }
.bld-tool.is-active { background: var(--ds-accent) !important; color: #fff !important; }
.bld-tool--icon { width: 36px !important; padding: 0 !important; justify-content: center; }
.bld-tool-sep { background: var(--ds-line-2) !important; }
.bld-rows, .bld-zoom { font: 500 13px var(--font-sans) !important; color: #fff !important; }
.bld-type-sel { height: 36px !important; padding: 0 10px !important; border-radius: 10px !important; }
.bp-card { background: transparent !important; border: 0 !important; border-bottom: 1px solid var(--ds-line) !important; border-radius: 0 !important; box-shadow: none !important; }
.bp-card:last-child { border-bottom: 0 !important; }
.bp-head { padding: 14px 16px 6px !important; background: transparent !important; border: 0 !important; }
.bp-head > span { font: 600 15px var(--font-sans) !important; color: #fff !important; }
.bp-body { padding: 8px 16px 16px !important; gap: 10px !important; }
.bp-field > span { font: 500 13px var(--font-sans) !important; color: var(--ds-text-2) !important; }
.bp-field > span i { font-style: normal; font-weight: 400; color: var(--ds-text-3); margin-left: 4px; }
.bp-field input, .bp-field select { height: 40px; padding: 0 12px; }
.bp-field textarea { padding: 10px 12px; }
.bp-hint, .cg-hint { font-size: 12px !important; line-height: 1.5 !important; color: var(--ds-text-3) !important; }
.bp-sub { font: 600 13px var(--font-sans) !important; color: #fff !important; margin-top: 4px; }
.bp-mini-btn {
  height: 32px; padding: 0 12px !important; border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--ds-line-2) !important;
  color: var(--ds-text-2) !important; font: 500 12px var(--font-sans) !important;
}
.bp-mini-btn:hover { background: rgba(255, 255, 255, 0.10) !important; color: #fff !important; }
.bp-mini-btn--accent { background: var(--ds-accent-soft) !important; border-color: var(--ds-accent-line) !important; color: var(--ds-accent-text) !important; }
.bp-mini-btn--danger { background: var(--ds-red-soft) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; margin-top: 8px; }
.bp-preview { border-radius: 10px !important; }
.bp-brush { border-radius: 12px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--ds-line) !important; }
.bp-brush__label { font-size: 13px !important; color: var(--ds-text-2) !important; }
.bp-search { flex: none; }
.bp-cell { border-radius: 10px !important; }
.bp-cell.is-active, .bp-cell.is-sel { outline: 2px solid var(--ds-accent) !important; }
.bld-skin-banner { border-radius: 14px !important; background: var(--ds-accent-soft) !important; border: 1px solid var(--ds-accent-line) !important; color: var(--ds-text-2) !important; font-size: 13px !important; }
.bld-skin-banner__ic { color: #6ea1ff; display: inline-flex; }
.bld-preview-exit { border-radius: 12px !important; background: var(--ds-accent) !important; color: #fff !important; font: 600 14px var(--font-sans) !important; border: 0 !important; }
.bld-cmd-input { border-radius: 12px !important; }
.bld-modal__backdrop { background: rgba(0, 0, 0, 0.72) !important; backdrop-filter: blur(4px); }
.bld-modal__card {
  background: rgba(16, 16, 16, 0.96) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-radius: 20px !important; box-shadow: var(--shadow-3) !important; padding: 22px !important; gap: 14px !important;
}
.bld-modal__title { font: 600 18px var(--font-display) !important; color: #fff !important; }

/* Мобы */
.mobs-body { gap: 16px !important; padding: 0 !important; }
.mobs-viewport-wrap { border-radius: 20px !important; overflow: hidden; border: 1px solid var(--ds-line) !important; background: #0d0d0f !important; }
.mobs-panel { background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--ds-line) !important; border-radius: 20px !important; }
.mobs-panel-lead { font-size: 13px !important; line-height: 1.5 !important; color: var(--ds-text-2) !important; }
.mobs-panel-lead b { color: #fff; font-weight: 600; }
.mobs-top-actions { display: flex; align-items: center; gap: 10px; }
.mobs-select { height: 42px !important; padding: 0 12px !important; min-width: 220px; }
.mobs-chk { font-size: 13px !important; color: var(--ds-text-2) !important; display: inline-flex; align-items: center; gap: 8px; }
.mobs-hud-chip { border-radius: 12px !important; background: rgba(16, 16, 16, 0.85) !important; border: 1px solid rgba(255, 255, 255, 0.08) !important; color: var(--ds-text-2) !important; font: 400 12px var(--font-sans) !important; }
.mobs-bone-card { border-radius: 14px !important; background: rgba(255, 255, 255, 0.03) !important; border: 1px solid var(--ds-line) !important; }
.mobs-bone-name { font: 600 14px var(--font-sans) !important; color: #fff !important; }
.mobs-chip { border-radius: 8px !important; }
.mobs-empty { color: var(--ds-text-3) !important; gap: 10px; }
.mobs-empty .empty-icon svg { animation: ds-spin 1s linear infinite; }
@keyframes ds-spin { to { transform: rotate(360deg); } }

/* Редактор иконок */
.ie-list, .ie-props { border-radius: 20px !important; background: rgba(255, 255, 255, 0.04) !important; border: 1px solid var(--ds-line) !important; }
.ie-canvas-wrap { border-radius: 20px !important; background: rgba(255, 255, 255, 0.02) !important; border: 1px solid var(--ds-line) !important; }
.ie-props label { font: 500 13px var(--font-sans) !important; color: var(--ds-text-2) !important; }
.ie-props input[type="number"] { height: 38px; padding: 0 10px; }
.ie-props__actions { gap: 8px !important; }

/* ── Адаптив ── */
@media (max-width: 1280px) {
  :root { --nav-w: 96px; --sidebar-w: 330px; }
  .dnav { padding: 18px 10px; }
  .dnav__brand-text, .dnav__text, .dnav__chev, .dnav__rp-text { display: none; }
  .dnav__item { justify-content: center; padding: 13px 0; }
  .dnav__rp { justify-content: center; padding: 10px 0; }
}

/* ── Правки после первого просмотра ── */
#toast-container { top: 24px !important; right: 24px !important; bottom: auto !important; }
.cam-chip .cam-chip-text { display: none; }
.cam-chip#cam-fov-toggle .cam-chip-text { display: inline; }
.cam-chip { width: auto; min-width: 34px; justify-content: center; }
.cam-overlay { max-width: calc(100% - 24px); }
.sidebar { display: grid; grid-template-rows: minmax(0, 1fr) auto; }
.sidebar-body { overflow-y: auto; min-height: 0; }
.panel { flex-shrink: 0; overflow: visible !important; }
:root { --font-mono: 'Inter', system-ui, sans-serif; }
input, textarea, select, .nf-input { font-variant-numeric: tabular-nums; }
.cfg-hint {
  font-family: var(--font-sans) !important; background: none !important; border: 0 !important;
  padding: 0 !important; margin-left: 4px; font-size: 12px !important; color: var(--ds-text-3) !important;
}
#toast-container { top: 96px !important; }
[hidden] { display: none !important; }
.builder-stage, .ie-canvas-wrap, .mobs-viewport-wrap { background-image: none !important; }

/* Без сеток, шахматок и штриховок */
.builder-stage::before { display: none !important; }
.builder-stage { background: rgba(255, 255, 255, 0.02) !important; }
.skin-card__art, .gui-card__thumb, .bld-img-row img { background: #0d0d0f !important; background-image: none !important; }
.ie-canvas-wrap { background: rgba(255, 255, 255, 0.02) !important; }
.mc-item--custom { background: var(--ds-accent) !important; opacity: .75; }
.mc-slot[data-erased="1"]::after { background: rgba(255, 255, 255, 0.12) !important; border-radius: 50%; inset: 42% !important; }
.gui-view__search { height: auto !important; padding: 0 !important; border: 0 !important; background: none !important; margin-left: 0 !important; }
.gui-view__search input { border: 1px solid rgba(255, 255, 255, 0.06) !important; background: rgba(255, 255, 255, 0.06) !important; font: 400 14px var(--font-sans) !important; }
.gui-view__search input:focus { border-color: rgba(54, 112, 226, 0.5) !important; }
.skins-search .search-field { flex: 0 1 380px; }
.skins-search .skins-btn { height: 42px; }

/* Мобы: читаемые карточки частей */
.mobs-bone-raw { font: 400 12px var(--font-sans) !important; color: var(--ds-text-4) !important; }
.mobs-axis-label { font: 500 12px var(--font-sans) !important; color: var(--ds-text-3) !important; }
.mobs-bone-reset {
  height: 28px; padding: 0 10px !important; border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.06) !important; border: 1px solid var(--ds-line-2) !important;
  color: var(--ds-text-2) !important; font: 500 12px var(--font-sans) !important;
}
.mobs-bone-reset:hover { background: var(--ds-red-soft) !important; border-color: rgba(239, 68, 68, 0.2) !important; color: #fca5a5 !important; }
.mobs-num { background: var(--ds-input) !important; border: 1px solid var(--ds-input-line) !important; border-radius: 8px !important; color: #fff !important; font: 500 13px var(--font-sans) !important; }
.mobs-chip {
  height: 24px; padding: 0 8px !important; border-radius: 8px !important;
  background: rgba(255, 255, 255, 0.05) !important; border: 1px solid var(--ds-line-2) !important;
  color: var(--ds-text-3) !important; font: 500 11px var(--font-sans) !important;
}
.mobs-chip:hover { color: #fff !important; border-color: var(--ds-accent-line) !important; background: var(--ds-accent-soft) !important; }

/* Стрелка у выпадающих списков */
.cfg-field select, .bp-field select, .mobs-select, .bld-type-sel, .rp-target__select, #int-form select {
  -webkit-appearance: none; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-opacity='.5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important; background-position: right 12px center !important;
  padding-right: 36px !important; cursor: pointer;
}

/* Конструктор меню: панели не сплющиваются, тулбар переносится */
.builder-panel { width: 320px !important; padding: 0 !important; gap: 0 !important; }
.bp-card { flex-shrink: 0; }
.bp-card--grow { flex: 1 0 auto; }
.bld-toolbar { max-width: calc(100% - 24px); flex-wrap: wrap; justify-content: center; row-gap: 6px !important; }
.bld-type-sel { min-width: 150px; }

/* Пустые состояния — одинаково во всех разделах */
.int-layout { flex: 1; min-height: 0; }
.int-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 48px 16px; }
.int-empty[hidden] { display: none !important; }
.int-empty__title { font: 600 18px/1.3 var(--font-display); color: #fff; }
.int-empty__hint { font-size: 14px; line-height: 1.5; color: var(--ds-text-2); max-width: 440px; }
#integrations-view { display: flex; flex-direction: column; }
@media (max-width: 1280px) {
  .cam-btn { padding: 0 8px !important; min-width: 32px; }
  .cam-btn__txt { font-size: 12px; }
}
.more-menu { background: #101010 !important; right: 12px !important; bottom: 76px !important; }
.rp-target__row { display: flex; align-items: center; gap: 10px; }
.rp-target__label { white-space: nowrap; flex-shrink: 0; }
.rp-target__select { flex: 1; height: 38px; padding-left: 12px; }
.skins-search .search-field { flex: 0 0 360px; }
.skins-search .search-field input { flex: none; width: 100%; height: 42px !important; padding: 0 14px 0 36px !important; border-radius: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important; background: rgba(255, 255, 255, 0.06) !important; box-shadow: none !important; font: 400 14px var(--font-sans) !important; }
.skins-search .search-field input:focus { border-color: rgba(54, 112, 226, 0.5) !important; }
.skins-status { flex-basis: 100%; margin-top: 2px; }
.toast { position: relative; padding-left: 18px !important; overflow: hidden; }
.toast::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: #6ea1ff; }
.toast-success::before { background: var(--ds-green); }
.toast-error::before { background: var(--ds-red); }
.toast-warning::before, .toast-warn::before { background: var(--ds-amber); }

/* Редактор иконок */
#icon-editor-root { flex: 1; min-height: 0; grid-template-columns: 260px 1fr 300px; gap: 16px; }
.ie-list { padding: 10px !important; display: flex; flex-direction: column; gap: 2px; }
.ie-list__item {
  display: flex !important; flex-direction: column; gap: 2px; padding: 10px 12px !important;
  border-radius: 12px !important; color: var(--ds-text-2) !important; font: 500 14px var(--font-sans) !important;
}
.ie-list__item:hover { background: rgba(255, 255, 255, 0.06) !important; color: #fff !important; }
.ie-list__item.is-active { background: var(--ds-accent) !important; color: #fff !important; }
.ie-list__group { font-size: 12px; opacity: .6; font-weight: 400; }
.ie-props { padding: 18px !important; gap: 12px !important; }
.ie-props label { gap: 6px !important; }
.ie-props__check { flex-direction: row !important; flex-wrap: wrap; align-items: center; gap: 8px !important; }
.ie-props__check input[type="number"] { flex-basis: 100%; }
.ie-props input[type="checkbox"] { accent-color: var(--ds-accent); width: 16px; height: 16px; }
.ie-baseline { background: rgba(248, 113, 113, 0.7) !important; }
.ie-ascent-line { background: rgba(110, 161, 255, 0.7) !important; }
.ie-drag-handle { background: var(--ds-accent) !important; }
.ie-resize-handle { border-color: var(--ds-accent) !important; border-radius: 4px; }
.gui-card__edit {
  top: 8px !important; right: 8px !important; width: 28px !important; height: 28px !important; line-height: 28px !important;
  border-radius: 8px !important; background: rgba(16, 16, 16, 0.85) !important; border: 1px solid var(--ds-line-2) !important; font-size: 13px !important;
}
.gui-card__edit:hover { background: var(--ds-accent) !important; }
.int-list { padding: 0 !important; display: flex; flex-direction: column; gap: 12px; }
.int-group { margin: 0 !important; padding: 12px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ds-line); }
.int-group h4 { font: 600 15px var(--font-sans) !important; color: #fff !important; margin: 4px 6px 8px !important; }
#int-form-wrap { max-width: 520px !important; display: flex; flex-direction: column; gap: 12px; }

/* ════════════════════════════════════════════════════════════
   Раздел «Броня»
   ════════════════════════════════════════════════════════════ */
.armor-view { display: flex; flex-direction: column; }
.armor-layout {
  flex: 1; min-height: 0; display: grid; gap: 16px;
  grid-template-columns: 300px minmax(0, 1fr) 400px;
}
.armor-list {
  display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 12px;
  border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ds-line);
}
.armor-filter { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.armor-filter__btn {
  flex: 1; height: 32px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent;
  color: var(--ds-text-2); font: 500 13px var(--font-sans); cursor: pointer; transition: background-color .25s, color .25s;
}
.armor-filter__btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.armor-filter__btn.is-active { background: var(--ds-accent); color: #fff; }
.armor-items { flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; margin: 0 -4px; padding: 0 4px; }
.armor-create { width: 100%; height: 44px !important; }

.armor-stage { position: relative; min-height: 0; border-radius: 20px; overflow: hidden; border: 1px solid var(--ds-line); background: #0d0d0f; }
#armor-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; touch-action: none; }
.armor-stage__empty {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; text-align: center; padding: 32px; background: #0d0d0f; z-index: 2;
}
.armor-stage__empty[hidden] { display: none !important; }
.armor-stage__title { font: 600 18px/1.3 var(--font-display); color: #fff; }
.armor-stage__hint { font-size: 14px; line-height: 1.5; color: var(--ds-text-2); max-width: 440px; }
.armor-stage__bar {
  position: absolute; left: 50%; bottom: 16px; transform: translateX(-50%); z-index: 3;
  display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-radius: 16px;
  background: rgba(16, 16, 16, 0.88); border: 1px solid rgba(255, 255, 255, 0.08); backdrop-filter: blur(16px);
}
.armor-stage__bar[hidden] { display: none !important; }
.armor-stage__bar-label { font-size: 13px; color: var(--ds-text-3); margin-right: 2px; }
.armor-stage__bar .cam-chip .cam-chip-text { display: inline; }
.armor-stage__note {
  position: absolute; left: 16px; right: 16px; top: 16px; z-index: 3; margin: 0; padding: 10px 14px; border-radius: 12px;
  background: rgba(16, 16, 16, 0.88); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--ds-text-2); font-size: 13px; line-height: 1.45;
}
.armor-stage__note[hidden] { display: none !important; }

.armor-panel { min-height: 0; overflow-y: auto; border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ds-line); }
.armor-panel[hidden] { display: none !important; }
.armor-panel .bp-card .bld-btn { width: 100%; margin-top: 8px; }
.armor-dirty { font-size: 13px; color: var(--ds-amber); }
.armor-dirty[hidden] { display: none !important; }
#armor-save.is-ready { box-shadow: 0 10px 30px -14px rgba(54, 112, 226, 0.9) !important; }

.armor-pieces { display: flex; flex-direction: column; gap: 10px; }
.armor-piece { border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ds-line); overflow: hidden; }
.armor-piece.is-on { border-color: var(--ds-line-2); }
.armor-piece__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px; cursor: pointer; }
.armor-piece__name { font: 600 14px var(--font-sans); color: #fff; }
.armor-piece__body { display: flex; flex-direction: column; gap: 12px; padding: 4px 14px 14px; }
.armor-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.armor-stats .bp-field--sm { min-width: 0; }

.armor-icon, .armor-tex { display: flex; align-items: center; gap: 12px; }
.armor-icon { padding: 10px 12px; border-radius: 12px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ds-line); flex-wrap: wrap; }
.armor-icon__thumb {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0; overflow: hidden; display: inline-flex; align-items: center; justify-content: center;
  background: #0d0d0f; border: 1px solid var(--ds-line);
}
.armor-icon__thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.armor-icon__text { flex: 1; min-width: 120px; font-size: 13px; color: var(--ds-text-2); line-height: 1.35; }
.armor-icon__text i { font-style: normal; color: var(--ds-text-3); font-size: 12px; }

.armor-tex { padding: 10px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ds-line); }
.armor-tex + .armor-tex { margin-top: 2px; }
.armor-tex__thumb {
  width: 112px; height: 56px; border-radius: 10px; flex-shrink: 0; overflow: hidden; display: flex; align-items: center; justify-content: center;
  background: #0d0d0f; border: 1px solid var(--ds-line); font-size: 12px; color: var(--ds-text-3);
}
.armor-tex__thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.armor-tex__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; color: var(--ds-text-3); }
.armor-tex__text b { font: 600 14px var(--font-sans); color: #fff; }
.armor-tex__btns { display: flex; gap: 6px; margin-top: 4px; }

.armor-cmd { display: flex; align-items: center; gap: 8px; }
.armor-cmd__label { width: 108px; flex-shrink: 0; font-size: 12px; color: var(--ds-text-3); }
.armor-cmd code { flex: 1; min-width: 0; padding: 8px 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 10px; background: var(--ds-input); border: 1px solid var(--ds-input-line); font-size: 12px; color: #fff; }
.armor-cmd__copy { width: 34px !important; height: 34px !important; border-radius: 10px !important; }
.armor-cmd__copy svg { width: 15px !important; height: 15px !important; }

@media (max-width: 1500px) { .armor-layout { grid-template-columns: 260px minmax(0, 1fr) 360px; } }
@media (max-width: 1280px) { .armor-layout { grid-template-columns: 240px minmax(0, 1fr) 340px; } }
.armor-list .search-field { flex: none; }
.armor-panel .bp-field--toggle { flex-direction: row; align-items: center; justify-content: space-between; }
.armor-cmd { flex-wrap: wrap; row-gap: 4px; }
.armor-cmd__label { width: 100%; }

/* ─── Иконки: группы, меню карточки, загрузка ─── */
.gui-groups { flex-wrap: wrap; }
.gui-chip__n { margin-left: 4px; font-size: 12px; opacity: 0.6; font-variant-numeric: tabular-nums; }
.gui-chip.is-active .gui-chip__n { opacity: 0.85; }
.gui-chip--add { display: inline-flex; align-items: center; gap: 6px; border-style: dashed !important; background: transparent !important; color: var(--ds-text-2) !important; }
.gui-chip--add:hover { color: #fff !important; border-color: var(--ds-accent) !important; }
.gui-gt { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 12px 8px 0; padding: 12px 16px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 16px; }
.gui-gt[hidden] { display: none; }
.gui-gt__info { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gui-gt__info b { font: 600 15px var(--font-display); color: #fff; }
.gui-gt__info span { font-size: 13px; color: var(--ds-text-3); }
.gui-gt__actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gui-card { position: relative; cursor: pointer; }
.gui-card:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }
.gui-card__more { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: 8px; background: rgba(0, 0, 0, 0.55); color: #fff; cursor: pointer; opacity: 0; transition: opacity 0.15s, background 0.15s; }
.gui-card:hover .gui-card__more, .gui-card:focus-within .gui-card__more { opacity: 1; }
.gui-card__more:hover { background: var(--ds-accent); }
@media (hover: none) { .gui-card__more { opacity: 1; } }
.gui-menu { position: fixed; z-index: 700; min-width: 240px; padding: 6px; background: #17171a; border: 1px solid rgba(255, 255, 255, 0.10); border-radius: 14px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55); }
.gui-menu__item { display: block; width: 100%; padding: 9px 12px; border: 0; border-radius: 9px; background: none; color: #fff; font: 400 14px var(--font-sans); text-align: left; cursor: pointer; }
.gui-menu__item:hover, .gui-menu__item:focus-visible { background: rgba(255, 255, 255, 0.08); outline: none; }
.gui-menu__item.is-danger { color: #ff7a7a; }
.gui-menu__sep { height: 1px; margin: 5px 4px; background: rgba(255, 255, 255, 0.08); }
.ig-defaults { display: flex; gap: 12px; }
.ig-defaults .bp-field { flex: 1; min-width: 0; }
.ig-error { color: #ff7a7a; }
.bld-modal__card--wide { width: min(560px, calc(100vw - 32px)); }
.iu-list { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; padding-right: 4px; }
.iu-row { display: flex; align-items: center; gap: 10px; }
.iu-row img { width: 36px; height: 36px; object-fit: contain; flex: none; background: #0d0d0f; border-radius: 8px; image-rendering: pixelated; }
.iu-row input { flex: 1; min-width: 0; }
.iu-row__rm { flex: none; width: 28px; height: 28px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, 0.06); color: var(--ds-text-2); font-size: 18px; line-height: 1; cursor: pointer; }
.iu-row__rm:hover { background: rgba(255, 90, 90, 0.2); color: #ff7a7a; }
#gui-view.is-dropping { outline: 2px dashed var(--ds-accent); outline-offset: -8px; border-radius: 16px; }

/* Раздел «Броня»: когда панель настроек скрыта, сцена занимает всё место */
.armor-layout:has(> .armor-panel[hidden]) { grid-template-columns: 300px minmax(0, 1fr); }
@media (max-width: 1500px) { .armor-layout:has(> .armor-panel[hidden]) { grid-template-columns: 260px minmax(0, 1fr); } }
@media (max-width: 1280px) { .armor-layout:has(> .armor-panel[hidden]) { grid-template-columns: 240px minmax(0, 1fr); } }
.armor-filter__btn { white-space: nowrap; }

/* Окно загрузки картинок: поля названий в стиле остальных полей */
.iu-row input {
  height: 38px; padding: 0 12px; font-family: var(--font-sans);
  background-color: var(--ds-input) !important; border: 1px solid var(--ds-input-line) !important; border-radius: 12px !important;
  color: #fff !important; font-size: 14px !important; outline: none; transition: border-color .2s, background-color .2s;
}
.iu-row input:hover { border-color: var(--ds-input-line-hover) !important; background-color: var(--ds-input-hover) !important; }
.iu-row input:focus { border-color: rgba(54, 112, 226, 0.7) !important; background-color: var(--ds-focus-bg) !important; }

/* Меню, которое наполняет другой плагин */
.bmi-badge { display: inline-block; padding: 1px 8px; margin-left: 2px; border-radius: 999px; background: var(--ds-accent-soft); border: 1px solid var(--ds-accent-line); color: #8db4ff; font-size: 11px; font-weight: 500; }
.mc-slot.is-zone { background: rgba(54, 112, 226, 0.30) !important; outline: 1px dashed rgba(110, 161, 255, 0.75); outline-offset: -2px; cursor: not-allowed; position: relative; }
.mc-slot.is-zone::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(135deg, rgba(0,0,0,0) 0 6px, rgba(110,161,255,.22) 6px 12px); }
.bld-managed-text { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ds-text-2); }
.bld-managed-text b { color: #fff; }
.bld-managed-card { border-color: var(--ds-accent-line) !important; background: var(--ds-accent-soft) !important; }

/* ─── Раздел «Сервис» ─── */
.care-layout { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; padding: 0 8px; }
@media (max-width: 1180px) { .care-layout { grid-template-columns: minmax(0, 1fr); } }
.care-card { padding: 18px; border-radius: 20px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--ds-line); }
.care-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.care-card__title { margin: 0 0 4px; font: 600 18px var(--font-display); color: #fff; }
.care-card__sub { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ds-text-3); }
.care-sum { margin-bottom: 12px; padding: 12px 14px; border-radius: 14px; font-size: 14px; border: 1px solid transparent; }
.care-sum.is-good { background: rgba(34, 197, 94, 0.10); border-color: rgba(34, 197, 94, 0.30); color: #86efac; }
.care-sum.is-warn { background: rgba(245, 158, 11, 0.10); border-color: rgba(245, 158, 11, 0.30); color: #fcd34d; }
.care-sum.is-bad { background: rgba(239, 68, 68, 0.10); border-color: rgba(239, 68, 68, 0.30); color: #fca5a5; }
.care-list { display: flex; flex-direction: column; gap: 8px; }
.care-empty { margin: 8px 0; font-size: 14px; color: var(--ds-text-3); }
.care-row { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); }
.care-row__ic { flex: none; display: inline-flex; margin-top: 1px; color: var(--ds-text-3); }
.care-row--error .care-row__ic { color: #f87171; }
.care-row--warning .care-row__ic { color: #fbbf24; }
.care-row--info .care-row__ic { color: #60a5fa; }
.care-row--ok .care-row__ic { color: #4ade80; }
.care-row__body { flex: 1; min-width: 0; }
.care-row__title { font-size: 14px; line-height: 1.45; color: #fff; word-break: break-word; }
.care-row__area { display: inline-block; margin-right: 8px; font-size: 12px; color: var(--ds-text-3); }
.care-row__hint { margin-top: 4px; font-size: 13px; line-height: 1.45; color: var(--ds-text-2); }
.care-row__actions { flex: none; display: flex; gap: 8px; align-items: center; }
.care-tag { margin-left: 8px; padding: 1px 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); font-size: 11px; color: var(--ds-text-2); }
.care-save { display: flex; gap: 8px; margin-bottom: 12px; }
.care-save input {
  flex: 1; min-width: 0; height: 40px; padding: 0 12px; font: 400 14px var(--font-sans);
  background-color: var(--ds-input) !important; border: 1px solid var(--ds-input-line) !important; border-radius: 12px !important; color: #fff !important; outline: none;
}
.care-save input:focus { border-color: rgba(54, 112, 226, 0.7) !important; background-color: var(--ds-focus-bg) !important; }
.care-check { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; font-size: 14px; color: var(--ds-text-2); cursor: pointer; }
.care-check[hidden] { display: none; }
.care-check input { width: 16px; height: 16px; accent-color: var(--ds-accent); }

/* Раздел «Сервис»: прокрутка внутри экрана и аккуратные кнопки */
.care-view { overflow-y: auto; padding-bottom: 24px; }
.care-card__head .bld-btn { white-space: nowrap; flex: none; }

/* ─── Раздел «Предметы» ─── */
.items-cats { flex-wrap: wrap; }
.items-cats .armor-filter__btn { flex: none; padding: 0 12px; }
.items-stage { display: flex; align-items: center; justify-content: center; overflow-y: auto; }
.items-card { width: 100%; padding: 32px 24px; display: flex; flex-direction: column; align-items: center; gap: 20px; }
.items-card[hidden] { display: none !important; }
.item-preview { display: flex; align-items: flex-start; gap: 28px; flex-wrap: wrap; justify-content: center; }
.item-preview__icon { display: grid; place-items: center; width: 160px; height: 160px; border-radius: 24px; background: #17171a; border: 1px solid var(--ds-line); }
.item-ic { display: inline-block; flex: none; background-repeat: no-repeat; }
.item-ic img { width: 100%; height: 100%; object-fit: contain; display: block; }
.item-ic.is-blank { background: rgba(255, 255, 255, 0.06); border-radius: 8px; }
.mc-tooltip.item-tip { position: static; pointer-events: auto; min-width: 220px; }
.item-card__hint { max-width: 460px; margin: 0; text-align: center; font-size: 13px; line-height: 1.5; color: var(--ds-text-3); }
.hat-item .item-ic { margin-right: 10px; }
.item-seg { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); margin-bottom: 10px; }
.item-seg__btn { flex: 1; height: 34px; padding: 0 8px; border: 0; border-radius: 10px; background: transparent; color: var(--ds-text-2); font: 500 13px var(--font-sans); cursor: pointer; white-space: nowrap; transition: background-color .25s, color .25s; }
.item-seg__btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }
.item-seg__btn.is-active { background: var(--ds-accent); color: #fff; }
.item-file { margin-top: 12px; padding: 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ds-line); }
.item-file__head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.item-file__head b { font: 600 14px var(--font-sans); color: #fff; }
.item-file__head span { font-size: 12px; color: var(--ds-text-3); }
.item-file__row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.item-file__thumb { width: 44px; height: 44px; border-radius: 10px; display: grid; place-items: center; background: #0d0d0f; border: 1px solid var(--ds-line); overflow: hidden; }
.item-file__thumb img { width: 100%; height: 100%; object-fit: contain; }
.item-file__info { flex: 1; min-width: 80px; font-size: 13px; color: var(--ds-text-2); }
.item-actions { margin-top: 14px; }
.item-actions__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.item-actions__head b { font: 600 14px var(--font-sans); color: #fff; }
.item-actions__head select, .item-af select { height: 34px; padding: 0 10px; font: 400 13px var(--font-sans); background-color: var(--ds-input) !important; border: 1px solid var(--ds-input-line) !important; border-radius: 10px !important; color: #fff !important; }
.item-actions__empty { margin: 0; font-size: 13px; color: var(--ds-text-3); }
.item-action, .item-recipe { margin-bottom: 8px; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, 0.03); border: 1px solid var(--ds-line); }
.item-recipe { margin-top: 8px; }
.item-action__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.item-action__ops { display: flex; gap: 4px; }
.item-action__fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; margin-top: 6px; }
.item-af { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.item-af > span { font-size: 12px; color: var(--ds-text-3); }
.item-af > span i { font-style: normal; opacity: 0.7; }
.item-af.is-bool { flex-direction: row; align-items: center; gap: 8px; }
.item-af.is-bool input { width: 16px; height: 16px; accent-color: var(--ds-accent); }
.item-af input[type="text"], .item-af input[type="number"], .item-grid input {
  height: 34px; padding: 0 10px; font: 400 13px var(--font-sans); min-width: 0; width: 100%;
  background-color: var(--ds-input) !important; border: 1px solid var(--ds-input-line) !important; border-radius: 10px !important; color: #fff !important; outline: none;
}
.item-af input:focus, .item-grid input:focus, .ic-newcat:focus { border-color: rgba(54, 112, 226, 0.7) !important; background-color: var(--ds-focus-bg) !important; }
.item-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.ic-newcat { height: 40px; padding: 0 12px; margin: -4px 0 8px; font: 400 14px var(--font-sans); background-color: var(--ds-input) !important; border: 1px solid var(--ds-input-line) !important; border-radius: 12px !important; color: #fff !important; outline: none; }
.ic-newcat[hidden] { display: none; }

.armor-panel .item-file__row .bld-btn { width: auto; margin-top: 0; }
.item-file__row { align-items: center; }


/* ── Пиксельные значки бокового меню (16×16, увеличение ровно в 2 раза, чтобы пиксели были чёткими) ── */
.dnav__icon--px { width: 32px; height: 32px; image-rendering: pixelated; }
.dnav__item .dnav__icon--px { margin: -6px -6px -6px -6px; }

/* ── Вкладки типов экипировки в шапках «Комплекты» и «Шляпы» ── */
.equip-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.equip-tab {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 14px;
  border: 1px solid var(--ds-line); border-radius: 999px; background: transparent; cursor: pointer;
  color: var(--ds-text-2); font: 600 13px/1 var(--font-sans); transition: background .15s, color .15s, border-color .15s;
}
.equip-tab:hover:not(:disabled) { color: #fff; background: rgba(255,255,255,0.06); }
.equip-tab.is-active { background: var(--ds-accent); border-color: transparent; color: #fff; }
.equip-tab i { font-style: normal; font-weight: 500; font-size: 10px; opacity: .6; text-transform: lowercase; }
.equip-tab.is-soon { opacity: .45; cursor: not-allowed; border-style: dashed; }
.equip-tab:focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; }


/* ── Скины: карточка с данными игрока ── */
.skins-meta { display: flex !important; flex-direction: column; gap: 0 !important; width: 100%; max-width: 620px !important; padding: 6px 22px !important; overflow: hidden; }
.skins-meta__row { display: flex; align-items: center; gap: 20px; min-height: 52px; padding: 12px 0; flex-wrap: wrap; }
.skins-meta__row + .skins-meta__row { border-top: 1px solid var(--ds-line); }
.skins-meta__k { flex: 0 0 120px !important; }
.skins-meta__v { flex: 1 1 200px; min-width: 0; font: 500 14px/1.35 var(--font-sans) !important; overflow-wrap: anywhere; }
#skin-meta-uuid { font: 500 13px/1.35 var(--font-mono) !important; padding: 6px 10px !important; margin: -6px 0; border-radius: 10px; color: #fff; background: transparent; border: 0; cursor: pointer; text-align: left; transition: background .15s; }
#skin-meta-uuid:hover { background: rgba(255, 255, 255, 0.07); color: #fff; }
.skins-chip { flex: 0 0 auto !important; display: inline-flex; align-items: center; height: 26px; padding: 0 12px; border-radius: 999px; background: rgba(54, 112, 226, 0.18); color: #8fb4ff !important; font: 600 12px/1 var(--font-sans) !important; }
.skins-meta .skins-link { flex: 0 0 auto; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.06); color: #fff !important; text-decoration: none; font: 600 13px/1 var(--font-sans) !important; }
.skins-meta .skins-link:hover { background: rgba(255, 255, 255, 0.11); text-decoration: none; }
@media (max-width: 520px) { .skins-meta__k { flex-basis: 100% !important; } .skins-meta__row { gap: 6px; } }

.item-file__msg { margin-top: 10px; font: 500 13px/1.45 var(--font-sans); color: #5fd48f; }
.item-file__msg.is-err { color: #ff7a7a; }


/* ── Блик зачарованного предмета: по форме самой картинки ── */
.item-ic { position: relative; }
.item-ic__glint { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  background: linear-gradient(115deg, rgba(120, 50, 220, .35) 0%, rgba(190, 130, 255, .85) 45%, rgba(120, 50, 220, .35) 60%, rgba(120, 50, 220, .35) 100%) 0 0 / 300% 100%;
  animation: itemGlint 2.4s linear infinite; }
@keyframes itemGlint { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── Подсказка предмета: ширина по тексту, как в игре (строки сами не переносятся, пока хватает места) ── */
.mc-tooltip.item-tip { width: max-content; max-width: 100%; min-width: 220px; white-space: pre-wrap; overflow-wrap: anywhere; }
.item-preview { align-items: flex-start; }

/* ── Панель стиля текста ── */
.ts-wrap { margin: 2px 0 8px; }
.ts-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.ts-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 32px; height: 32px; padding: 0 8px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--ds-input-line); background: var(--ds-input); color: #fff; font: 600 13px/1 var(--font-sans); transition: background .15s, border-color .15s; }
.ts-btn:hover { background: var(--ds-input-hover); border-color: var(--ds-input-line-hover); }
.ts-btn--txt { padding: 0 10px; font-weight: 500; color: var(--ds-text-2); white-space: nowrap; }
.ts-dot { display: inline-block; width: 12px; height: 12px; border-radius: 50%; }
.ts-sep { width: 1px; height: 20px; background: var(--ds-line-2); margin: 0 4px; }
.ts-pop { margin-top: 8px; padding: 12px; border-radius: 14px; background: var(--ds-input); border: 1px solid var(--ds-input-line); display: flex; flex-direction: column; gap: 10px; }
.ts-pop[hidden] { display: none; }
.ts-swatches { display: grid; grid-template-columns: repeat(8, 1fr); gap: 6px; }
.ts-sw { aspect-ratio: 1; min-width: 0; border-radius: 8px; border: 1px solid rgba(255,255,255,.18); cursor: pointer; padding: 0; }
.ts-sw:hover { transform: scale(1.1); }
.ts-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ts-pop input.ts-color, .ts-stop input[type=color] { width: 40px; height: 34px; padding: 2px; border-radius: 8px; background: transparent; border: 1px solid var(--ds-input-line); cursor: pointer; }
.ts-pop input.ts-hex { flex: 1 1 90px; min-width: 0; height: 34px; padding: 0 10px; font-family: var(--font-mono); }
.ts-apply { height: 34px; padding: 0 14px; border-radius: 10px; border: 0; background: var(--ds-accent); color: #fff; font: 600 13px/1 var(--font-sans); cursor: pointer; align-self: flex-start; }
.ts-apply:hover { background: var(--ds-accent-hover); }
.ts-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.ts-preset { height: 28px; padding: 0 10px; border: 0; border-radius: 8px; color: #fff; font: 600 12px/1 var(--font-sans); cursor: pointer; text-shadow: 0 1px 2px rgba(0,0,0,.6); }
.ts-strip { height: 14px; border-radius: 7px; border: 1px solid rgba(255,255,255,.12); }
.ts-stops { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ts-stop { position: relative; display: inline-flex; }
.ts-x { position: absolute; top: -6px; right: -6px; width: 16px; height: 16px; padding: 0; border-radius: 50%; border: 0; background: #444; color: #fff; font: 700 11px/1 var(--font-sans); cursor: pointer; }
.ts-add { width: 34px; height: 34px; border-radius: 8px; border: 1px dashed var(--ds-input-line-hover); background: transparent; color: var(--ds-text-2); font-size: 18px; cursor: pointer; }
.ts-note { margin: 0; font: 400 12px/1.45 var(--font-sans); color: var(--ds-text-3); }
.mc-obf { display: inline-block; }
.skins-result:not([hidden]) { display: flex; flex-direction: column; gap: 20px; }
#skin-meta-uuid { margin-left: -10px; }

/* HEX-поле у остановок градиента и подсветка неверного кода */
.ts-pop input.ts-hex--stop { flex: 0 0 auto; width: 84px; margin-left: 6px; }
.ts-pop input.ts-bad { border-color: #ff5400 !important; box-shadow: 0 0 0 1px #ff5400; }
.ts-stop { align-items: center; }