/* Демо ClickGUI. Размеры в дизайн-пикселях окна 1024x640 (MenuDimensions), весь блок
   масштабируется через transform, как меню под GUI scale в игре. Значения из MenuStyle.java. */

.gui {
  position: absolute; left: 0; top: 0;
  width: 1024px; height: 640px;
  transform-origin: 0 0;
  display: flex; gap: 5px; padding: 8px;
  border-radius: 29px;
  background: var(--window);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.06), 0 34px 89px rgba(0, 0, 0, 0.55);
  font-size: 13px; line-height: 1.25; color: var(--ink);
  user-select: none; -webkit-user-select: none;
  transition: background-color 0.3s;
}
/* «Размытие меню»: окно становится матовым стеклом поверх мира (GuiBackdrop, kawase blur). */
.gui[data-blur="on"] {
  background: rgba(14, 14, 16, 0.62);
  backdrop-filter: blur(21px) saturate(1.25);
  -webkit-backdrop-filter: blur(21px) saturate(1.25);
}
.gui svg { width: 16px; height: 16px; flex: none; }
:where(.gui) button { border: 0; background: none; padding: 0; cursor: pointer; }

.gui__panel { background: var(--panel); border-radius: 21px; position: relative; }

/* --- Рейл --- */
.rail {
  width: 182px; flex: none;
  display: flex; flex-direction: column;
  padding: 0 13px 13px;
}
.rail__top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 5px 0 13px; }
.rail__logo { width: 34px; height: 32px; object-fit: contain; }
.rail__collapse { width: 24px; height: 24px; display: grid; place-items: center; color: var(--muted); border-radius: 8px; }
.rail__collapse:hover { background: var(--control); color: var(--ink); }
.rail__collapse svg { width: 14px; height: 14px; }
.rail__group { color: var(--muted); font-size: 11px; padding: 13px 13px 5px; }
.rail__item {
  position: relative; display: flex; align-items: center; gap: 13px;
  width: 100%; height: 34px; padding: 0 13px 0 13px;
  border-radius: 13px; color: var(--muted); font-size: 13px; text-align: left;
  transition: color 0.18s;
}
.rail__item:hover { color: var(--ink); }
.rail__item[aria-current="true"] { color: var(--ink); font-weight: 500; }
.rail__item .n { margin-left: auto; color: var(--faint); font-size: 11px; font-variant-numeric: tabular-nums; font-weight: 400; }
.rail__item > * { position: relative; z-index: 1; }
/* Плашка выбора: ведущий конец приходит вдвое быстрее (RAIL_MOVE_MS 380). */
.rail__pill {
  position: absolute; left: 0; right: 0; height: 34px; top: 0;
  border-radius: 13px; background: var(--selected);
  transition: transform 0.38s var(--ease-out), height 0.38s var(--ease-out);
  pointer-events: none;
}
.rail__nav { position: relative; }
.rail__user {
  margin-top: auto; display: flex; align-items: center; gap: 8px;
  height: 54px; padding: 0 13px; border-radius: 13px; background: var(--tile);
}
.rail__user .av { flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; background: var(--control); color: var(--muted); }
.rail__user .av svg { width: 18px; height: 18px; }
.rail__user .who { min-width: 0; }
.rail__user b, .rail__user small { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rail__user b { font-weight: 500; font-size: 12.5px; }
.rail__user small { color: var(--muted); font-size: 11px; margin-top: 1px; }

/* --- Контент --- */
.content { flex: 1; min-width: 0; display: flex; flex-direction: column; overflow: hidden; }
.content__head { display: flex; align-items: center; gap: 8px; height: 55px; padding: 14px 21px 0; flex: none; }
.crumbs { display: flex; align-items: baseline; gap: 8px; min-width: 0; white-space: nowrap; }
.crumbs .arrows { display: flex; gap: 2px; align-self: center; margin-right: 5px; }
.crumbs .arrows span { width: 22px; height: 22px; display: grid; place-items: center; color: var(--faint); }
.crumbs .arrows svg { width: 13px; height: 13px; }
.crumbs .root { color: var(--muted); font-size: 14px; }
.crumbs .sep { color: var(--faint); }
.crumbs .here { font-size: 14px; font-weight: 600; }
.crumbs .meta { color: var(--muted); font-size: 11px; margin-left: 3px; }
.content__tools { margin-left: auto; display: flex; gap: 8px; }

.sel {
  position: relative; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  height: 27px; padding: 0 8px 0 11px; border-radius: 8px;
  background: var(--control); color: var(--ink); font-size: 12.5px; min-width: 134px;
  transition: background-color 0.15s;
}
.sel:hover, .sel[aria-expanded="true"] { background: var(--control-hover); }
.sel svg { width: 13px; height: 13px; color: var(--muted); transition: transform 0.3s var(--spring); }
.sel[aria-expanded="true"] svg { transform: rotate(180deg); }
.sel--row { height: 21px; min-width: 118px; font-size: 12px; padding: 0 6px 0 9px; }

.search {
  display: flex; align-items: center; gap: 8px;
  width: 170px; height: 27px; padding: 0 10px; border-radius: 8px;
  background: var(--control); color: var(--muted);
}
.search:focus-within { background: var(--control-hover); }
.search svg { width: 13px; height: 13px; }
.search input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--ink); font-size: 12.5px; }
.search input::placeholder { color: var(--muted); }

.view {
  position: relative; flex: 1; min-height: 0;
  overflow-y: auto;
  padding: 8px 21px 21px;
  scrollbar-width: thin; scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.view::-webkit-scrollbar { width: 4px; }
.view::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 2px; }

/* Смена страницы: подъём на 13 в сторону хода плашки, уход 140 мс, приход 360 мс. */
.page { transition: opacity 0.36s var(--ease-out), transform 0.36s var(--ease-out); }
.page.is-leaving { opacity: 0; transition-duration: 0.14s; }
.page.is-entering { opacity: 0; transform: translateY(calc(13px * var(--dir, 1))); transition: none; }

.cols { display: flex; gap: 13px; align-items: flex-start; }
.col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 13px; }

/* --- Карточка модуля --- */
.card { background: var(--tile); border-radius: 13px; animation: card-in 0.42s var(--ease-out) both; animation-delay: calc(var(--i, 0) * 35ms); }
@keyframes card-in { from { opacity: 0; transform: translateY(8px); } }
.card__head { display: flex; align-items: center; gap: 8px; height: 55px; padding: 0 13px; }
.card__title { flex: 1; min-width: 0; }
.card__title b { display: block; font-size: 14px; font-weight: 500; }
.card__title b mark { background: rgba(255,255,255,0.18); color: inherit; border-radius: 3px; padding: 0 1px; }
.card__title small { display: block; margin-top: 2px; color: var(--muted); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.card__fold { width: 21px; height: 21px; display: grid; place-items: center; color: var(--muted); border-radius: 6px; }
.card__fold:hover { color: var(--ink); background: var(--control); }
.card__fold svg { width: 13px; height: 13px; transition: transform 0.4s var(--spring); }
.card[data-folded] .card__fold svg { transform: rotate(-90deg); }
.card__info { color: var(--muted); display: grid; place-items: center; width: 18px; height: 18px; }
.card__info svg { width: 13px; height: 13px; }
.card__body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 0.42s var(--spring); }
.card[data-folded] .card__body { grid-template-rows: 0fr; }
.card__inner { overflow: hidden; min-height: 0; }
.card__rows { padding: 0 13px 8px; }

.row { display: flex; align-items: center; gap: 8px; min-height: 34px; }
.row--stack { flex-wrap: wrap; padding: 5px 0 8px; row-gap: 5px; }
.row__label { display: flex; align-items: center; gap: 5px; white-space: nowrap; font-size: 13px; }
.row__label .tip { color: var(--faint); display: grid; place-items: center; cursor: help; }
.row__label .tip svg { width: 12px; height: 12px; }
.row__label .tip:hover { color: var(--ink); }
.row__end { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.row__count { margin-left: auto; color: var(--muted); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.value {
  height: 17px; padding: 0 5px; border-radius: 5px; background: var(--control);
  color: var(--muted); font-size: 11px; line-height: 17px; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Переключатель 32x18 */
.switch { position: relative; width: 32px; height: 18px; border-radius: 9px; background: var(--control-hover); flex: none; transition: background-color 0.22s; }
.switch::after {
  content: ""; position: absolute; left: 3px; top: 3px; width: 12px; height: 12px; border-radius: 50%;
  background: #c8c8cd; transition: transform 0.32s var(--spring), background-color 0.22s;
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(14px); background: var(--accent-ink); }

/* Чекбокс 15 */
.check { width: 15px; height: 15px; border-radius: 4px; background: var(--control-hover); display: grid; place-items: center; color: transparent; flex: none; transition: background-color 0.18s, color 0.18s; }
.check svg { width: 11px; height: 11px; stroke-width: 3; transform: scale(0.4); transition: transform 0.3s var(--spring); }
.check[aria-checked="true"] { background: var(--accent); color: var(--accent-ink); }
.check[aria-checked="true"] svg { transform: scale(1); }

/* Чипы мультивыбора */
.chips { display: flex; flex-wrap: wrap; gap: 5px; width: 100%; }
.chip {
  height: 21px; padding: 0 8px; border-radius: 6px; background: var(--control);
  color: var(--muted); font-size: 11.5px; transition: background-color 0.18s, color 0.18s;
}
.gui .chip:hover { background: var(--control-hover); color: var(--ink); }
.gui .chip[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }

/* Слайдер 116 */
.slider { position: relative; width: 116px; height: 16px; cursor: pointer; flex: none; touch-action: none; }
.slider::before { content: ""; position: absolute; left: 0; right: 0; top: 7px; height: 3px; border-radius: 2px; background: var(--control-hover); }
.slider__fill { position: absolute; left: 0; top: 7px; height: 3px; border-radius: 2px; background: var(--accent); }
.slider__knob {
  position: absolute; top: 2px; width: 12px; height: 12px; margin-left: -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,0.5); transition: transform 0.2s var(--spring);
}
.slider:hover .slider__knob, .slider.is-drag .slider__knob { transform: scale(1.18); }

.bind { height: 21px; min-width: 34px; padding: 0 8px; border-radius: 6px; background: var(--control); color: var(--muted); font-size: 11.5px; }
.gui .bind:hover { background: var(--control-hover); color: var(--ink); }
.bind.is-listening { color: var(--ink); background: var(--control-hover); animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { color: var(--faint); } }

/* --- Выпадающий список: растёт из-под поля, пункты приходят по очереди --- */
.popup {
  position: absolute; z-index: 30; min-width: 134px;
  padding: 5px; border-radius: 13px;
  background: #1b1b1e; box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 13px 34px rgba(0,0,0,0.55);
  transform-origin: top center;
  animation: popup-in 0.26s var(--ease-out);
}
@keyframes popup-in { from { opacity: 0; transform: translateY(-5px) scaleY(0.85); } }
.popup button {
  display: flex; align-items: center; justify-content: space-between; gap: 13px; width: 100%;
  height: 28px; padding: 0 8px; border-radius: 8px; color: var(--muted); font-size: 12.5px; text-align: left;
  animation: row-in 0.3s var(--ease-out) both; animation-delay: calc(var(--i) * 25ms);
}
@keyframes row-in { from { opacity: 0; transform: translateY(-4px); } }
.popup button:hover { background: var(--control); color: var(--ink); }
.popup button[aria-selected="true"] { color: var(--ink); }
.popup button svg { width: 13px; height: 13px; }

.tooltip {
  position: absolute; z-index: 40; width: 250px; padding: 10px 13px 11px;
  border-radius: 13px; background: #1b1b1e; box-shadow: 0 0 0 1px rgba(255,255,255,0.07), 0 13px 34px rgba(0,0,0,0.55);
  pointer-events: none; animation: popup-in 0.2s var(--ease-out);
}
.tooltip b { display: block; font-size: 12.5px; font-weight: 500; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--hairline); }
.tooltip p { color: var(--muted); font-size: 11.5px; line-height: 1.4; }

/* --- Страницы группы «Клиент» --- */
.ptitle { font-size: 21px; font-weight: 600; letter-spacing: -0.01em; margin: 8px 0 3px; }
.psub { color: var(--muted); font-size: 12px; margin-bottom: 21px; }
.accents { display: grid; grid-template-columns: repeat(9, 1fr); gap: 8px; padding: 5px 0 13px; width: 100%; }
.accent { aspect-ratio: 1; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.12); transition: transform 0.25s var(--spring); }
.gui .accent:hover { transform: scale(1.12); }
.gui .accent[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--panel-solid), 0 0 0 3.5px var(--ink); }
.list-row { display: flex; align-items: center; gap: 13px; height: 44px; padding: 0 13px; border-radius: 10px; }
.list-row + .list-row { margin-top: 3px; }
.list-row:hover { background: var(--tile-hover); }
.list-row .av { width: 26px; height: 26px; border-radius: 50%; background: var(--control); display: grid; place-items: center; color: var(--muted); font-size: 11px; font-weight: 600; }
.list-row .grow { flex: 1; min-width: 0; }
.list-row small { display: block; color: var(--muted); font-size: 11px; }
.tag { height: 19px; padding: 0 7px; border-radius: 5px; background: var(--control); color: var(--muted); font-size: 10.5px; line-height: 19px; }
.tag--on { background: var(--accent); color: var(--accent-ink); }
.kbd { min-width: 26px; height: 21px; padding: 0 7px; border-radius: 6px; background: var(--control); color: var(--ink); font-size: 11.5px; line-height: 21px; text-align: center; }
.empty { color: var(--muted); padding: 55px 0; text-align: center; font-size: 13px; }