/* ─────────────────────────────────────────────────────────────────────────
   Панель по образцу Hex VPN Franchise, движение — по образцу Raion.

   От Hex (скриншоты мини-приложения и hexpartners.pro):
   * группы настроек — тёмные карточки-аккордеоны: значок в круглой плитке,
     заголовок, шеврон; поверхность — градиент 168° от #1b1c1f к #151517,
     волосяная рамка rgba(255,255,255,.06) и блик сверху, как «surface-card»;
   * нижняя панель — пилюля, подпись видна только у открытого раздела;
   * одна большая кнопка «Сохранить» внизу (в Telegram — его MainButton).

   От Raion (raionchick.live):
   * мягкое появление блоков по очереди, замедление cubic-bezier(.16,1,.3,1);
   * тонкая полоска загрузки, растущая слева направо (loadTrack);
   * моноширинные подписи капсом с разрядкой.

   Отдельным файлом поверх app.css и hex.css: тут только то, что отличает
   панель, — сравнивать с образцами проще по одному файлу.
   ───────────────────────────────────────────────────────────────────────── */

:root {
  --hx-ease: cubic-bezier(0.16, 1, 0.3, 1);
  --hx-surface: linear-gradient(168deg, #1b1c1f, #151517);
  --hx-line: rgba(255, 255, 255, 0.06);
  --hx-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  --hx-tile: color-mix(in srgb, var(--accent) 14%, #121317);
  --hx-radius: 26px;
}
:root[data-theme="light"] {
  --hx-surface: linear-gradient(168deg, #ffffff, #f7f8fa);
  --hx-line: rgba(17, 17, 17, 0.08);
  --hx-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --hx-tile: color-mix(in srgb, var(--accent) 12%, #ffffff);
}

/* ─── появление экрана (Raion) ─── */
@keyframes hx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: none; }
}
.view--reveal > *,
[data-inner].view--reveal > * {
  animation: hx-rise 0.62s var(--hx-ease) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

/* ─── полоска загрузки под шапкой (Raion loadTrack) ─── */
@keyframes hx-track {
  0% { transform: scaleX(0); opacity: 1; }
  70% { transform: scaleX(0.82); opacity: 1; }
  100% { transform: scaleX(0.96); opacity: 1; }
}
.header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent));
  transform-origin: left;
  transform: scaleX(0);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}
body.is-loading .header::after { animation: hx-track 1.6s var(--hx-ease) forwards; }

@media (prefers-reduced-motion: reduce) {
  .view--reveal > *, [data-inner].view--reveal > * { animation: none; }
  body.is-loading .header::after { animation: none; }
}

/* ─── нижняя панель как у Hex: подпись только у открытого раздела ─── */
@media (max-width: 899px) {
  .tabbar {
    left: 16px;
    right: 16px;
    height: 68px;
    padding: 6px;
    border-radius: 34px;
    gap: 4px;
    border-color: var(--hx-line);
  }
  .tab {
    flex: 1 1 0;
    flex-direction: row;
    gap: 8px;
    border-radius: 28px;
    font-size: 15px;
    font-weight: 700;
    transition: flex-grow 0.5s var(--hx-ease), background 0.3s, color 0.3s;
  }
  .tab span:not(.tab__badge) {
    max-width: 0;
    overflow: hidden;
    white-space: nowrap;
    opacity: 0;
    transition: max-width 0.5s var(--hx-ease), opacity 0.25s;
  }
  .tab[aria-current="page"] {
    flex-grow: 2.4;
    background: color-mix(in srgb, var(--accent) 22%, #0d1522);
    color: color-mix(in srgb, var(--accent) 88%, #fff);
  }
  :root[data-theme="light"] .tab[aria-current="page"] { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); }
  .tab[aria-current="page"] span:not(.tab__badge) { max-width: 120px; opacity: 1; }
  .tab__badge { top: 8px; right: auto; left: calc(50% + 4px); }
  .tab[aria-current="page"] .tab__badge { left: 30px; }
}

/* ─── группы-аккордеоны (Hex) ─── */
.hx-list { display: grid; gap: 12px; margin-top: 12px; }

.hx-acc {
  border-radius: var(--hx-radius);
  background: var(--hx-surface);
  border: 1px solid var(--hx-line);
  box-shadow: var(--hx-highlight), 0 16px 34px -22px rgba(0, 0, 0, 0.8);
  overflow: hidden;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.hx-acc--open { border-color: color-mix(in srgb, var(--accent) 22%, var(--hx-line)); }
.hx-acc__head {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  padding: 18px 20px;
  border: 0;
  background: none;
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.hx-acc__head:active { background: color-mix(in srgb, var(--fg) 4%, transparent); }
.hx-acc__tile {
  flex: none;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--hx-tile);
  color: var(--accent);
  transition: transform 0.5s var(--hx-ease);
}
.hx-acc--open .hx-acc__tile { transform: rotate(-8deg) scale(1.04); }
.hx-acc--danger .hx-acc__tile { background: color-mix(in srgb, var(--bad) 14%, #151517); color: var(--bad); }
.hx-acc__titles { flex: 1; min-width: 0; display: grid; gap: 2px; }
.hx-acc__title { font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.hx-acc__sub { font-size: 12px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-acc__chev { flex: none; color: var(--fg-3); transition: transform 0.45s var(--hx-ease); }
.hx-acc--open .hx-acc__chev { transform: rotate(180deg); color: var(--fg-2); }
.hx-acc__wrap {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.5s var(--hx-ease);
}
.hx-acc--open > .hx-acc__wrap { grid-template-rows: 1fr; }
.hx-acc__body { min-height: 0; overflow: hidden; }
.hx-acc--open .hx-acc__body { border-top: 1px solid var(--hx-line); }

/* ─── поля внутри групп ─── */
.hx-fields { display: grid; gap: 14px; padding: 16px 20px 20px; }
.hx-card.hx-fields { border-radius: var(--hx-radius); background: var(--hx-surface); border: 1px solid var(--hx-line); margin-top: 12px; }
.hx-field { display: grid; gap: 6px; }
.hx-field__label { font-size: 13px; font-weight: 700; color: var(--fg-2); }
.hx-field__hint { font-size: 11.5px; line-height: 1.45; color: var(--fg-3); display: block; }
.hx-field__error { font-size: 12px; color: var(--bad); }
.hx-field__error:empty { display: none; }
.hx-field__control { position: relative; display: block; }
.hx-field__control .input, .hx-field__control .textarea, .hx-field__control select.input {
  width: 100%;
  background: var(--inset);
  border-color: var(--inset-line);
  transition: border-color 0.2s, box-shadow 0.3s var(--hx-ease);
}
.hx-field__unit { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); color: var(--fg-3); font-weight: 700; pointer-events: none; }
.hx-field--dirty .input, .hx-field--dirty .textarea {
  border-color: color-mix(in srgb, var(--accent) 60%, transparent);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 12%, transparent);
}
.hx-field--bad .input, .hx-field--bad .textarea { border-color: var(--bad); }
.hx-dot { display: inline-block; width: 6px; height: 6px; margin-left: 4px; border-radius: 50%; background: var(--accent); vertical-align: middle; }
.hx-switch { padding: 4px 0; border: 0; }
.hx-sublabel {
  margin: 6px 0 -4px;
  font-family: "JetBrains Mono", monospace;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--label, var(--fg-3));
}
.hx-wide { width: 100%; }
.hx-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin: 14px 0 4px;
  padding: 12px;
  border: 0;
  background: none;
  color: var(--fg-3);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}

/* ─── фильтр-чипы ─── */
.hx-chips { display: flex; gap: 8px; margin: 10px 0 12px; overflow-x: auto; scrollbar-width: none; }
.hx-chip {
  flex: none;
  padding: 8px 14px;
  border-radius: 999px;
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
  color: var(--fg-2);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.25s, color 0.25s, border-color 0.25s;
}
.hx-chip--on { background: color-mix(in srgb, var(--accent) 20%, #0d1522); color: color-mix(in srgb, var(--accent) 88%, #fff); border-color: transparent; }
:root[data-theme="light"] .hx-chip--on { background: color-mix(in srgb, var(--accent) 14%, #fff); color: var(--accent); }

/* ─── кнопки бота: значок + подпись ─── */
.hx-card { border-radius: var(--hx-radius); background: var(--hx-surface); border: 1px solid var(--hx-line); box-shadow: var(--hx-highlight); }
.hx-buttons { padding: 6px 0; }
.hx-btnrow {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 10px 14px 10px 12px;
}
.hx-btnrow + .hx-btnrow { border-top: 1px solid var(--hx-line); }
.hx-btnrow__main { display: grid; gap: 4px; min-width: 0; }
.hx-btnrow__input { background: transparent; border-color: transparent; padding-left: 8px; font-weight: 600; }
.hx-btnrow__input:focus { background: var(--inset); }
.hx-btnrow--dirty .hx-btnrow__input { border-color: color-mix(in srgb, var(--accent) 60%, transparent); background: var(--inset); }
.hx-btnrow__meta { padding-left: 8px; font-size: 11px; color: var(--fg-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.hx-emoji {
  position: relative;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 15px;
  border: 1px solid var(--hx-line);
  background: var(--inset);
  color: var(--fg-3);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.3s var(--hx-ease), border-color 0.2s;
}
.hx-emoji:active { transform: scale(0.92); }
.hx-emoji--own { border-color: color-mix(in srgb, var(--accent) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent); }
.hx-emoji--premium::after {
  content: "";
  position: absolute;
  top: 5px;
  right: 5px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--warn);
  box-shadow: 0 0 8px var(--warn);
}
.hx-emoji--none { cursor: default; font-size: 16px; opacity: 0.5; }

.hx-emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(150px, 100%), 1fr)); gap: 10px; margin-top: 12px; }
.hx-emoji-tile {
  display: grid;
  gap: 6px;
  justify-items: start;
  padding: 14px;
  border-radius: 20px;
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
  color: var(--fg);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: transform 0.35s var(--hx-ease), border-color 0.2s;
}
.hx-emoji-tile:hover { border-color: color-mix(in srgb, var(--accent) 40%, var(--hx-line)); }
.hx-emoji-tile:active { transform: scale(0.97); }
.hx-emoji-tile__glyph { font-size: 28px; line-height: 1; }
.hx-emoji-tile__title { font-size: 13.5px; font-weight: 700; line-height: 1.3; }
.hx-emoji-tile__meta { font-size: 10.5px; color: var(--fg-3); letter-spacing: 0.06em; }

/* ─── фото экранов ─── */
.hx-media { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(160px, 100%), 1fr)); gap: 12px; margin-top: 12px; }
.hx-media__card {
  display: grid;
  gap: 10px;
  padding: 10px 10px 12px;
  border-radius: 22px;
  border: 1px solid var(--hx-line);
  background: var(--hx-surface);
}
.hx-media__pic {
  position: relative;
  aspect-ratio: 1200 / 630;
  border-radius: 14px;
  overflow: hidden;
  background: var(--inset);
}
.hx-media__pic img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--hx-ease); }
.hx-media__card:hover .hx-media__pic img { transform: scale(1.04); }
.hx-media__pic--empty { display: grid; place-items: center; color: var(--fg-4); }
.hx-media__pic--empty span { display: grid; justify-items: center; gap: 4px; font-size: 11px; }
.hx-media__badge {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-family: "JetBrains Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
}
.hx-media__title { padding: 0 4px; font-size: 13.5px; font-weight: 700; }
.hx-media__actions { display: flex; gap: 6px; }

/* ─── своя кнопка «Сохранить» в браузере: широкая, как у Hex ─── */
.savebar .btn { min-height: 54px; border-radius: 18px; font-size: 16px; letter-spacing: 0.04em; text-transform: uppercase; }

/* Свой цвет: круглая плитка вместо прямоугольника системной палитры. */
.swatch--own { position: relative; cursor: pointer; }
.swatch--own input[type="color"] {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: conic-gradient(#ff4d4d, #ffd24d, #4dff88, #4dd2ff, #7a4dff, #ff4dd2, #ff4d4d);
  cursor: pointer;
}
.swatch--own input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.swatch--own input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 50%; opacity: 0; }
.swatch--own input[type="color"]::-moz-color-swatch { border: 0; border-radius: 50%; opacity: 0; }