/* ============================================================
   FoxChat · HUB — разделы «Обзор»: Главная, Справка, Эфир,
   Управление эфиром, Модераторы.
   Язык «аврора»: глубокий тёмный фон, живые пятна света, тонкие
   линии, моно-подписи, крупные цифры, мягкое появление блоков.
   Классы с префиксом hx-. Старые правила этих страниц в panel.css
   не используются новой разметкой.
   ============================================================ */

:root {
  --hx-bg: var(--bg);
  --hx-panel: rgb(var(--veil) / .028);
  --hx-panel-2: rgb(var(--veil) / .05);
  --hx-hair: rgb(var(--veil) / .075);
  --hx-hair-2: rgb(var(--veil) / .14);
  --hx-cyan: var(--cyan);
  --hx-ink-3: var(--text-3);
  --hx-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --hx-ease: cubic-bezier(.2, .7, .2, 1);
  --hx-live: var(--primary); /* live = эмбер, красный остаётся ошибкам */
}

/* ---------- появление блоков ---------- */
@keyframes hx-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.hx-in { animation: hx-in .6s var(--hx-ease) both; animation-delay: calc(var(--i, 0) * 70ms); }
.hx-page { display: grid; gap: 18px; }
.hx-page > * { min-width: 0; }

/* ---------- герой ---------- */
.hx-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(280px, .9fr);
  gap: 22px 32px;
  align-items: center;
  padding: 26px 28px 24px;
  border: 1px solid var(--hx-hair);
  border-radius: 2px;
  background: var(--hx-bg);
  box-shadow: 0 24px 60px rgb(var(--shade) / calc(.35 * var(--shadow-k))), inset 0 1px 0 rgb(var(--veil) / .04);
}
.hx-hero-bg { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.hx-blob {
  position: absolute;
  width: 560px;
  height: 340px;
  border-radius: 50%;
  filter: blur(52px);
  opacity: .55;
  will-change: transform;
}
.hx-blob-a { left: -160px; top: -190px; background: radial-gradient(circle, rgba(255, 106, 43, .55), transparent 65%); animation: hx-drift-a 17s ease-in-out infinite alternate; }
.hx-blob-b { right: -200px; bottom: -230px; background: radial-gradient(circle, rgba(207, 149, 62, .36), transparent 65%); animation: hx-drift-b 21s ease-in-out infinite alternate; }
@keyframes hx-drift-a { to { transform: translate3d(110px, 50px, 0) scale(1.12); } }
@keyframes hx-drift-b { to { transform: translate3d(-90px, -60px, 0) scale(1.08); } }
.hx-grid {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgb(var(--veil) / .05) 1px, transparent 1px),
    linear-gradient(90deg, rgb(var(--veil) / .05) 1px, transparent 1px);
  background-size: 30px 30px;
  -webkit-mask-image: radial-gradient(80% 100% at 75% 40%, #000 15%, transparent 80%);
          mask-image: radial-gradient(80% 100% at 75% 40%, #000 15%, transparent 80%);
}
.hx-scan {
  position: absolute;
  left: 0;
  right: 0;
  top: -2px;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(207, 149, 62, .5) 40%, rgba(255, 106, 43, .5) 60%, transparent);
  opacity: .55;
  animation: hx-scan 8s linear infinite;
}
@keyframes hx-scan { to { transform: translateY(260px); } }
/* Тон героя меняет цвет пятен, а не структуру. */
.hx-hero.is-live .hx-blob-a { background: radial-gradient(circle, rgba(255, 106, 43, .5), transparent 65%); }
.hx-hero.is-live .hx-blob-b { background: radial-gradient(circle, rgba(255, 106, 43, .4), transparent 65%); }
.hx-hero.is-live .hx-scan { background: linear-gradient(90deg, transparent, rgba(255, 180, 84, .55) 50%, transparent); }
.hx-hero.is-danger .hx-blob-a { background: radial-gradient(circle, rgba(229, 72, 77, .45), transparent 65%); }
.hx-hero.is-danger .hx-blob-b { background: radial-gradient(circle, rgba(240, 177, 83, .3), transparent 65%); }
.hx-hero.is-setup .hx-blob-a { background: radial-gradient(circle, rgba(90, 167, 255, .45), transparent 65%); }
.hx-hero.is-warn .hx-blob-b { background: radial-gradient(circle, rgba(240, 177, 83, .34), transparent 65%); }
.hx-hero.is-ready .hx-blob-b { background: radial-gradient(circle, rgba(62, 207, 154, .36), transparent 65%); }

.hx-hero-copy { display: grid; gap: 10px; min-width: 0; max-width: 640px; }
.hx-eyebrow { display: inline-flex; align-items: center; gap: 8px; color: var(--primary-soft); }
.hx-hero.is-live .hx-eyebrow { color: var(--primary-soft); }
.hx-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-3); flex: 0 0 auto; }
.hx-dot.is-ok { background: var(--success); box-shadow: 0 0 0 0 rgba(62, 207, 154, .6); animation: hx-pulse 2.4s ease-out infinite; }
.hx-dot.is-live { background: var(--hx-live); box-shadow: 0 0 0 0 rgba(255, 106, 43, .6); animation: hx-pulse 1.6s ease-out infinite; }
.hx-dot.is-info { background: var(--info); box-shadow: 0 0 0 0 rgba(90, 167, 255, .6); animation: hx-pulse 2.4s ease-out infinite; }
.hx-dot.is-warn { background: var(--warning); box-shadow: 0 0 0 0 rgba(240, 177, 83, .6); animation: hx-pulse 2.4s ease-out infinite; }
.hx-dot.is-err { background: var(--danger); box-shadow: 0 0 0 0 rgba(229, 72, 77, .6); animation: hx-pulse 1.8s ease-out infinite; }
@keyframes hx-pulse { 70% { box-shadow: 0 0 0 10px rgb(var(--veil) / 0); } 100% { box-shadow: 0 0 0 0 rgb(var(--veil) / 0); } }
.hx-title { margin: 0; font-size: clamp(26px, 2.6vw, 34px); font-weight: 800; letter-spacing: -.7px; line-height: 1.08; color: var(--text); }
.hx-accent {
  background: linear-gradient(90deg, var(--primary-soft), var(--cyan-soft));
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
}
.hx-hero.is-live .hx-accent { background-image: linear-gradient(90deg, var(--cyan-soft), var(--primary-soft)); }
.hx-hero.is-danger .hx-accent { background-image: linear-gradient(90deg, var(--danger-soft), var(--warning-soft)); }
.hx-hero.is-setup .hx-accent { background-image: linear-gradient(90deg, var(--info-soft), var(--primary-soft)); }
.hx-hero.is-ready .hx-accent { background-image: linear-gradient(90deg, var(--success-soft), var(--cyan-soft)); }
.hx-lead { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.6; max-width: 60ch; }
.hx-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.hx-chips .status-chip { backdrop-filter: blur(6px); }
.hx-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 6px; }
.hx-next { color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-cta { box-shadow: 0 10px 30px rgba(255, 106, 43, .35), inset 0 1px 0 rgb(var(--veil) / .16); }
.hx-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  border: 0;
  border-radius: 3px;
  background: transparent;
  color: var(--primary-soft);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.hx-link:hover { background: rgb(var(--veil) / .05); color: var(--text); }
.hx-link .line-icon { width: 14px; height: 14px; }
.hx-hero-side { min-width: 0; display: grid; gap: 12px; align-self: center; }

/* ---------- KPI ---------- */
.hx-kpis { display: grid; gap: 10px; }
.hx-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.hx-kpis-1 { grid-template-columns: 1fr; }
.hx-kpi {
  position: relative;
  display: grid;
  gap: 4px;
  min-width: 0;
  padding: 12px 14px 11px;
  border: 1px solid var(--hx-hair);
  border-radius: 4px;
  background: var(--hx-panel);
  backdrop-filter: blur(6px);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.hx-kpi:hover { border-color: var(--hx-hair-2); transform: translateY(-1px); }
.hx-kpi small { color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-kpi b { font-size: 26px; font-weight: 800; letter-spacing: -.6px; line-height: 1.05; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-kpi > span { color: var(--text-2); font-size: 12px; }
.hx-kpi .stat-trend { margin-top: 2px; }
.hx-kpi.is-live { border-color: rgba(255, 106, 43, .35); background: linear-gradient(180deg, rgba(255, 106, 43, .12), rgba(255, 106, 43, .03)); }
.hx-kpi.is-live b { color: var(--primary); }
.hx-kpi.is-ok { border-color: rgba(62, 207, 154, .3); }
.hx-kpi.is-ok b { color: var(--success-soft); font-size: 20px; }

/* ---------- список готовности ---------- */
.hx-ready { display: grid; gap: 8px; }
.hx-ready-row {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--hx-hair);
  border-radius: 3px;
  background: var(--hx-panel);
  animation: hx-in .5s var(--hx-ease) both;
  animation-delay: calc(var(--i, 0) * 80ms + 120ms);
}
.hx-ready-row .line-icon { grid-row: 1 / 3; width: 30px; height: 30px; padding: 7px; border-radius: 3px; border: 1px solid var(--hx-hair); background: rgb(var(--veil) / .04); color: var(--text-3); }
.hx-ready-row b { font-size: 13px; color: var(--text); }
.hx-ready-row small { font-size: 12px; color: var(--text-2); }
.hx-ready-row.is-ok .line-icon { color: var(--success-soft); border-color: color-mix(in srgb, var(--success) 34%, transparent); background: rgba(62, 207, 154, .12); }
.hx-ready-row.is-warn .line-icon { color: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 34%, transparent); background: rgba(240, 177, 83, .12); }
.hx-ready-row.is-err .line-icon { color: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 34%, transparent); background: rgba(229, 72, 77, .12); }

/* ---------- кольцо прогресса ---------- */
.hx-ring { position: relative; width: 84px; height: 84px; flex: 0 0 auto; }
.hx-ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.hx-ring-track { fill: none; stroke: rgba(255, 255, 255, .08); stroke-width: 6; }
.hx-ring-fill { fill: none; stroke: url(#hx-ring-grad, var(--primary)); stroke: var(--primary); stroke-width: 6; stroke-linecap: round; filter: drop-shadow(0 0 6px rgba(255, 106, 43, .6)); animation: hx-ring 1.2s var(--hx-ease) both; }
@keyframes hx-ring { from { stroke-dashoffset: 213.6; } }
.hx-ring.is-done .hx-ring-fill { stroke: var(--success); filter: drop-shadow(0 0 8px rgba(62, 207, 154, .7)); }
.hx-ring-copy { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 1px; }
.hx-ring-copy b { font-size: 19px; font-weight: 800; letter-spacing: -.4px; color: var(--text); font-variant-numeric: tabular-nums; }
.hx-ring-copy b i { font-style: normal; font-size: 12px; color: var(--text-3); }
.hx-ring-copy b .line-icon { width: 22px; height: 22px; color: var(--success-soft); }
.hx-ring-copy small { font-size: 10px; color: var(--hx-ink-3); text-transform: uppercase; letter-spacing: .08em; font-family: var(--hx-mono); }
.hx-setup-side { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }

/* ---------- карточка ---------- */
.hx-card {
  position: relative;
  display: grid;
  gap: 14px;
  min-width: 0;
  padding: 20px 22px;
  border: 1px solid var(--hx-hair);
  border-radius: 4px;
  background:
    linear-gradient(180deg, rgb(var(--veil) / .03), rgb(var(--veil) / 0) 60%),
    var(--surface);
  box-shadow: inset 0 1px 0 rgb(var(--veil) / .035), 0 12px 40px rgb(var(--shade) / calc(.25 * var(--shadow-k)));
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.hx-card:hover { border-color: var(--hx-hair-2); }
.hx-card-head { display: flex; align-items: flex-start; gap: 12px; min-width: 0; }
.hx-card-ico {
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border: 1px solid var(--hx-hair);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(255, 106, 43, .18), rgba(255, 106, 43, .04));
  color: var(--primary-soft);
  box-shadow: inset 0 1px 0 rgb(var(--veil) / .05);
}
.hx-card-ico .line-icon { width: 17px; height: 17px; }
.hx-card-copy { display: grid; gap: 3px; min-width: 0; flex: 1 1 auto; }
.hx-card-copy h2, .hx-card-copy h3 { margin: 0; font-size: 17px; font-weight: 750; letter-spacing: -.2px; color: var(--text); }
.hx-card-copy p { margin: 0; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.hx-card-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; flex: 0 0 auto; margin-left: auto; }
.hx-block-title { display: inline-flex; align-items: center; gap: 6px; color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx-block-title .line-icon { width: 13px; height: 13px; }
.hx-hint { margin: 0; color: var(--text-3); font-size: 12px; line-height: 1.5; }
.hx-hint b { color: var(--text-2); }

/* ---------- внимание ---------- */
.hx-attention {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 16px 18px;
  border: 1px solid rgba(240, 177, 83, .35);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(240, 177, 83, .12), rgba(240, 177, 83, .02) 60%), var(--surface);
}
.hx-attention::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--warning); box-shadow: 0 0 14px var(--warning); }
.hx-attention.is-danger { border-color: rgba(229, 72, 77, .4); background: linear-gradient(90deg, rgba(229, 72, 77, .14), rgba(229, 72, 77, .02) 60%), var(--surface); }
.hx-attention.is-danger::before { background: var(--danger); box-shadow: 0 0 14px var(--danger); }
.hx-attention-head { display: flex; align-items: center; gap: 12px; }
.hx-attention-mark { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 3px; background: rgba(240, 177, 83, .16); color: var(--warning-soft); }
.hx-attention.is-danger .hx-attention-mark { background: rgba(229, 72, 77, .16); color: var(--danger-soft); }
.hx-attention-mark .line-icon { width: 16px; height: 16px; }
.hx-attention-copy { display: grid; gap: 2px; }
.hx-attention-copy h2 { margin: 0; font-size: 16px; font-weight: 750; color: var(--text); }
.hx-attention-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hx-attention-row {
  display: grid;
  grid-template-columns: 28px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--hx-hair);
  border-radius: 3px;
  background: var(--well-2);
  animation: hx-in .5s var(--hx-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
}
.hx-attention-ico { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 3px; background: rgb(var(--veil) / .05); color: var(--text-2); }
.hx-attention-ico .line-icon { width: 14px; height: 14px; }
.hx-attention-text { display: grid; gap: 2px; min-width: 0; }
.hx-attention-text b { font-size: 13px; color: var(--text); }
.hx-attention-text small { font-size: 12px; color: var(--text-2); line-height: 1.45; }

/* ---------- подготовка ---------- */
.hx-setup-head { display: flex; align-items: center; gap: 18px; }
.hx-setup-copy { display: grid; gap: 3px; }
.hx-setup-copy h2 { margin: 0; font-size: 18px; font-weight: 750; color: var(--text); }
.hx-setup-copy p { margin: 0; color: var(--text-2); font-size: 13px; }
.hx-setup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.hx-step {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 11px 14px;
  border: 1px solid var(--hx-hair);
  border-radius: 3px;
  background: var(--hx-panel);
  animation: hx-in .5s var(--hx-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms + 100ms);
}
.hx-step-mark { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--hx-hair-2); border-radius: 50%; color: var(--text-2); font-size: 12.5px; font-weight: 800; font-family: var(--hx-mono); }
.hx-step.is-done .hx-step-mark { border-color: color-mix(in srgb, var(--success) 34%, transparent); background: rgba(62, 207, 154, .14); color: var(--success-soft); }
.hx-step-mark .line-icon { width: 14px; height: 14px; }
.hx-step-copy { display: grid; gap: 2px; min-width: 0; }
.hx-step-copy strong { font-size: 13.5px; color: var(--text); }
.hx-step.is-done .hx-step-copy strong { color: var(--text-2); }
.hx-step-copy small { color: var(--text-3); font-size: 12px; }
.hx-setup-optional { display: grid; gap: 8px; padding-top: 6px; border-top: 1px dashed var(--hx-hair-2); }
.hx-setup-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.hx-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid var(--hx-hair);
  border-radius: 3px;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.hx-opt:hover { border-color: rgba(255, 106, 43, .45); background: rgba(255, 106, 43, .08); transform: translateY(-1px); }
.hx-opt.is-off { cursor: default; opacity: .7; }
.hx-opt-copy { display: grid; gap: 2px; min-width: 0; flex: 1 1 auto; }
.hx-opt-copy b { font-size: 13px; color: var(--text); }
.hx-opt-copy small { font-size: 12px; color: var(--text-3); }
.hx-opt i { color: var(--text-3); }
.hx-opt i .line-icon { width: 14px; height: 14px; }

/* ---------- знакомство ---------- */
.hx-intro-head { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: start; }
.hx-intro-mark { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 3px; background: linear-gradient(135deg, rgba(255, 106, 43, .35), rgba(207, 149, 62, .25)); color: var(--primary-soft); box-shadow: 0 8px 24px rgba(255, 106, 43, .25); }
.hx-intro-mark .line-icon { width: 18px; height: 18px; }
.hx-intro-copy { display: grid; gap: 4px; }
.hx-intro-copy h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.hx-intro-copy p { margin: 0; color: var(--text-2); font-size: 13.5px; line-height: 1.55; max-width: 70ch; }
.hx-intro-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.hx-intro-tile {
  display: grid;
  gap: 6px;
  padding: 14px;
  border: 1px solid var(--hx-hair);
  border-radius: 4px;
  background: var(--hx-panel);
  animation: hx-in .5s var(--hx-ease) both;
  animation-delay: calc(var(--i, 0) * 70ms);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.hx-intro-tile:hover { border-color: var(--hx-hair-2); transform: translateY(-2px); }
.hx-intro-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; background: rgb(var(--veil) / .05); color: var(--primary-soft); }
.hx-intro-ico .line-icon { width: 15px; height: 15px; }
.hx-intro-tile b { font-size: 13.5px; color: var(--text); }
.hx-intro-tile small { color: var(--text-2); font-size: 12px; line-height: 1.5; }
.hx-intro-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; padding-top: 10px; border-top: 1px solid var(--hx-hair); }
.hx-intro-foot p { display: inline-flex; align-items: center; gap: 8px; margin: 0; color: var(--text-2); font-size: 13px; }
.hx-intro-foot p .line-icon { width: 15px; height: 15px; color: var(--success-soft); }

/* ---------- возможности канала ---------- */
.hx-seg { display: inline-flex; padding: 3px; border: 1px solid var(--hx-hair); border-radius: 999px; background: var(--well-2); }
.hx-seg button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 650;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.hx-seg button i { font-style: normal; font-family: var(--hx-mono); font-size: 11px; color: var(--text-3); }
.hx-seg button:hover { color: var(--text); }
.hx-seg button.is-active { background: rgba(255, 106, 43, .22); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .45); }
.hx-seg button.is-active i { color: var(--primary-soft); }
.hx-board-meter { display: flex; align-items: center; gap: 12px; }
.hx-board-meter i { position: relative; flex: 1 1 auto; height: 4px; border-radius: 999px; background: rgb(var(--veil) / .08); overflow: hidden; }
.hx-board-meter i::after { content: ""; position: absolute; inset: 0; width: calc(var(--hx-pct, 0) * 100%); border-radius: inherit; background: linear-gradient(90deg, var(--primary), var(--hx-cyan)); box-shadow: 0 0 12px rgba(255, 106, 43, .6); animation: hx-meter 1.2s var(--hx-ease) both; }
@keyframes hx-meter { from { width: 0; } }
.hx-board-meter span { color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; }
.hx-board-groups { display: grid; gap: 16px; }
.hx-board-group { display: grid; gap: 8px; }
.hx-board-title { display: inline-flex; align-items: center; gap: 7px; color: var(--text-2); font-size: 12.5px; font-weight: 700; }
.hx-board-title .line-icon { width: 14px; height: 14px; color: var(--text-3); }
.hx-board-title i { font-style: normal; color: var(--text-3); font-family: var(--hx-mono); font-size: 11px; }
.hx-fchips { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.hx-fchip {
  display: grid;
  grid-template-columns: 32px minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
  padding: 10px 12px;
  border: 1px solid var(--hx-hair);
  border-radius: 3px;
  background: var(--hx-panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  animation: hx-in .45s var(--hx-ease) both;
  animation-delay: calc(var(--i, 0) * 35ms + 120ms);
  transition: border-color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.hx-fchip:hover { border-color: var(--hx-hair-2); transform: translateY(-1px); background: var(--hx-panel-2); }
.hx-fchip.is-on { border-color: rgba(62, 207, 154, .3); background: linear-gradient(180deg, rgba(62, 207, 154, .09), rgba(62, 207, 154, .02)); }
.hx-fchip-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; background: rgb(var(--veil) / .05); color: var(--text-3); }
.hx-fchip.is-on .hx-fchip-ico { color: var(--success-soft); background: rgba(62, 207, 154, .14); }
.hx-fchip-ico .line-icon { width: 15px; height: 15px; }
.hx-fchip-copy { display: grid; gap: 1px; min-width: 0; }
.hx-fchip-copy b { font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-fchip-copy small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-fchip-state { display: inline-flex; align-items: center; gap: 5px; font-family: var(--hx-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-3); }
.hx-fchip-state i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-3); }
.hx-fchip.is-on .hx-fchip-state { color: var(--success-soft); }
.hx-fchip.is-on .hx-fchip-state i { background: var(--success); box-shadow: 0 0 8px rgba(62, 207, 154, .8); }
.hx-board-empty { margin: 0; padding: 18px; border: 1px dashed var(--hx-hair-2); border-radius: 3px; color: var(--text-2); font-size: 13px; text-align: center; }
.hx-board-hint { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--text-3); font-size: 12px; }
.hx-board-hint .line-icon { width: 14px; height: 14px; }
.hx-board-hint kbd { padding: 1px 6px; border: 1px solid var(--hx-hair-2); border-bottom-width: 2px; border-radius: 2px; font-family: var(--hx-mono); font-size: 11px; color: var(--text-2); background: var(--well-2); }

/* ---------- быстрые действия ---------- */
.hx-quick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.hx-quick {
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--hx-hair);
  border-radius: 4px;
  background: var(--hx-panel);
  color: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease);
}
.hx-quick:hover { border-color: rgba(255, 106, 43, .45); background: rgba(255, 106, 43, .08); transform: translateY(-2px); }
.hx-quick-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 3px; background: rgb(var(--veil) / .05); color: var(--primary-soft); }
.hx-quick-ico .line-icon { width: 17px; height: 17px; }
.hx-quick-copy { display: grid; gap: 2px; min-width: 0; }
.hx-quick-copy strong { font-size: 13.5px; color: var(--text); }
.hx-quick-copy small { font-size: 12px; color: var(--text-3); }
.hx-quick-arrow { color: var(--text-3); transition: transform var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.hx-quick:hover .hx-quick-arrow { transform: translateX(3px); color: var(--text); }
.hx-quick-arrow .line-icon { width: 14px; height: 14px; }

/* ---------- сводка ---------- */
.hx-summary .hs-chart { margin-top: 2px; }

/* ---------- справка ---------- */
.hx-search {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 14px;
  border: 1px solid var(--hx-hair-2);
  border-radius: 4px;
  background: var(--well-3);
  backdrop-filter: blur(6px);
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.hx-search:focus-within { border-color: rgba(255, 106, 43, .6); box-shadow: 0 0 0 4px rgba(255, 106, 43, .18), 0 10px 30px rgba(255, 106, 43, .15); }
.hx-search > .line-icon { width: 18px; height: 18px; color: var(--text-3); }
.hx-search .input { border: 0; background: transparent; padding: 6px 0; font-size: 14.5px; min-height: 36px; box-shadow: none; }
.hx-search .input:focus { box-shadow: none; }
.hx-search-count { display: grid; text-align: center; padding: 4px 10px; border-left: 1px solid var(--hx-hair); }
.hx-search-count b { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1; }
.hx-search-count small { font-size: 9.5px; color: var(--hx-ink-3); font-family: var(--hx-mono); text-transform: uppercase; letter-spacing: .08em; }
.hx-faq-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; }
.hx-rail {
  position: sticky;
  top: calc(var(--header-h) + 16px);
  display: grid;
  gap: 4px;
  padding: 12px;
  border: 1px solid var(--hx-hair);
  border-radius: 4px;
  background: var(--surface);
}
.hx-rail-title { padding: 2px 8px 8px; color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx-rail-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 9px 10px;
  border-radius: 3px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 650;
  text-decoration: none;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.hx-rail-item:hover { background: rgb(var(--veil) / .05); color: var(--text); }
.hx-rail-item i { font-style: normal; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary-soft); font-family: var(--hx-mono); font-size: 11px; text-align: center; }
.hx-rail-note { display: flex; align-items: center; gap: 6px; margin: 8px 0 0; padding: 10px 8px 2px; border-top: 1px solid var(--hx-hair); color: var(--text-3); font-size: 12px; }
.hx-rail-note .line-icon { width: 14px; height: 14px; }
.hx-rail-note kbd { padding: 1px 6px; border: 1px solid var(--hx-hair-2); border-bottom-width: 2px; border-radius: 2px; font-family: var(--hx-mono); font-size: 11px; color: var(--text-2); background: var(--well-2); }
.hx-faq-content { display: grid; gap: 22px; min-width: 0; }
.hx-faq-group { display: grid; gap: 10px; scroll-margin-top: calc(var(--header-h) + 16px); }
.hx-faq-group-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; padding: 0 4px; }
.hx-faq-group-title { font-size: 15px; font-weight: 800; letter-spacing: -.2px; color: var(--text); }
.hx-faq-group-head small { color: var(--text-3); font-size: 12.5px; }
.hx-faq-list { display: grid; gap: 8px; }
.hx-topic {
  border: 1px solid var(--hx-hair);
  border-radius: 4px;
  background: var(--surface);
  overflow: hidden;
  transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.hx-topic:hover { border-color: var(--hx-hair-2); }
.hx-topic.is-open { border-color: rgba(255, 106, 43, .4); box-shadow: 0 0 0 1px rgba(255, 106, 43, .15), 0 18px 40px rgb(var(--shade) / calc(.3 * var(--shadow-k))); }
.hx-topic-head {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  width: 100%;
  padding: 14px 16px;
  border: 0;
  background: transparent;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.hx-topic-ico { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid var(--hx-hair); border-radius: 3px; background: rgb(var(--veil) / .04); color: var(--primary-soft); transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease); }
.hx-topic.is-open .hx-topic-ico { background: rgba(255, 106, 43, .2); color: var(--text); }
.hx-topic-ico .line-icon { width: 17px; height: 17px; }
.hx-topic-copy { display: grid; gap: 3px; min-width: 0; }
.hx-topic-copy b { font-size: 14.5px; color: var(--text); }
.hx-topic-copy small { font-size: 12.5px; color: var(--text-2); line-height: 1.45; }
.hx-topic-meta { display: flex; align-items: center; gap: 10px; }
.hx-topic-meta i { font-style: normal; color: var(--text-3); font-family: var(--hx-mono); font-size: 11px; white-space: nowrap; }
.hx-topic-chevron { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: rgb(var(--veil) / .05); color: var(--text-3); transition: transform var(--dur-2) var(--ease), background var(--dur-2) var(--ease); }
.hx-topic-chevron .line-icon { width: 14px; height: 14px; }
.hx-topic.is-open .hx-topic-chevron { transform: rotate(180deg); background: rgba(255, 106, 43, .25); color: var(--text); }
.hx-topic-body { display: grid; gap: 14px; padding: 0 16px 16px 70px; animation: hx-in .35s var(--hx-ease) both; }
.hx-topic-body[hidden] { display: none; }
.hx-topic-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 14px; }
.hx-topic-block { display: grid; gap: 8px; align-content: start; padding: 14px; border: 1px solid var(--hx-hair); border-radius: 3px; background: var(--hx-panel); }
.hx-topic-block.is-notes { border-color: rgba(240, 177, 83, .3); background: rgba(240, 177, 83, .06); }
.hx-topic-block.is-notes .hx-block-title { color: var(--warning-soft); }
.hx-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; counter-reset: hx-step; }
.hx-steps li { position: relative; display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; color: var(--text-2); font-size: 13px; line-height: 1.5; counter-increment: hx-step; }
.hx-steps-mark::before { content: counter(hx-step); display: grid; place-items: center; width: 22px; height: 22px; border: 1px solid var(--hx-hair-2); border-radius: 50%; font-family: var(--hx-mono); font-size: 10.5px; font-weight: 700; color: var(--primary-soft); }
.hx-pages { display: grid; gap: 6px; }
.hx-page-tile { display: grid; gap: 2px; padding: 9px 11px; border-left: 2px solid rgba(255, 106, 43, .5); background: rgb(var(--veil) / .025); border-radius: 0 8px 8px 0; }
.hx-page-tile b { font-size: 13px; color: var(--text); }
.hx-page-tile small { font-size: 12px; color: var(--text-2); line-height: 1.45; }
.hx-notes { margin: 0; padding-left: 18px; display: grid; gap: 6px; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.hx-topic-foot { display: flex; justify-content: flex-start; }

/* ---------- эфир ---------- */
.hx-live-grid { display: grid; grid-template-columns: minmax(300px, 380px) minmax(0, 1fr); gap: 18px; align-items: start; }
.hx-live-stack { display: grid; gap: 18px; min-width: 0; }
.hx-linkrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px;
  border: 1px solid var(--hx-hair);
  border-radius: 3px;
  background: var(--hx-panel);
  color: var(--text);
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.hx-linkrow:hover { border-color: rgba(255, 106, 43, .45); background: rgba(255, 106, 43, .08); }
.hx-linkrow span { display: inline-flex; align-items: center; gap: 8px; }
.hx-linkrow .line-icon { width: 15px; height: 15px; color: var(--primary-soft); }
.hx-test-groups { display: grid; gap: 8px; }
.hx-test-group { border: 1px solid var(--hx-hair); border-radius: 3px; background: var(--hx-panel); overflow: hidden; }
.hx-test-group[open] { border-color: var(--hx-hair-2); }
.hx-test-group summary { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.hx-test-group summary::-webkit-details-marker { display: none; }
.hx-test-ico { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 3px; background: rgb(var(--veil) / .05); color: var(--primary-soft); }
.hx-test-ico .line-icon { width: 14px; height: 14px; }
.hx-test-group summary b { font-size: 13.5px; color: var(--text); }
.hx-test-group summary small { color: var(--text-3); font-size: 11.5px; font-family: var(--hx-mono); }
.hx-test-chevron { color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.hx-test-chevron .line-icon { width: 14px; height: 14px; }
.hx-test-group[open] .hx-test-chevron { transform: rotate(180deg); }
.hx-test-buttons { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 6px; padding: 2px 10px 10px; }
.hx-test-buttons button {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 11px;
  border: 1px solid var(--hx-hair);
  border-radius: 3px;
  background: var(--well-2);
  color: var(--text-2);
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.hx-test-buttons button .line-icon { width: 12px; height: 12px; color: var(--hx-cyan); opacity: .8; }
.hx-test-buttons button:hover { border-color: rgba(207, 149, 62, .45); color: var(--text); background: rgba(207, 149, 62, .08); transform: translateY(-1px); }
.hx-test-buttons button:disabled { opacity: .55; cursor: default; transform: none; }
.hx-monitor { padding: 0; overflow: hidden; gap: 0; background: var(--bg); }
.hx-monitor-bar { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 10px 14px; border-bottom: 1px solid var(--hx-hair); background: rgb(var(--veil) / .025); }
.hx-monitor-dots { display: inline-flex; gap: 5px; }
.hx-monitor-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgb(var(--veil) / .14); }
.hx-monitor-dots i:nth-child(1) { background: #f2688c88; }
.hx-monitor-dots i:nth-child(2) { background: #f0b15388; }
.hx-monitor-dots i:nth-child(3) { background: #3ecf9a88; }
.hx-monitor-title { display: grid; gap: 1px; min-width: 0; }
.hx-monitor-title b { font-size: 13px; color: var(--text); }
.hx-monitor-title small { font-size: 11.5px; color: var(--text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-monitor-led { display: inline-flex; align-items: center; gap: 7px; color: var(--hx-cyan); font-family: var(--hx-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-monitor-led i { width: 7px; height: 7px; border-radius: 50%; background: var(--hx-cyan); box-shadow: 0 0 0 0 rgba(207, 149, 62, .6); animation: hx-pulse 2s ease-out infinite; }
.hx-monitor-screen { position: relative; aspect-ratio: 16 / 10; min-height: 420px; background: var(--bg); }
.hx-monitor-screen iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* ---------- управление эфиром ---------- */
.hx-now { grid-template-columns: auto minmax(0, 1fr); grid-template-areas: "art copy" "auth auth"; gap: 16px 20px; align-items: center; }
.hx-now-art { grid-area: art; }
.hx-now-art .stream-game-art.is-lg { width: 72px; height: 96px; border-radius: 3px; box-shadow: 0 12px 30px rgb(var(--shade) / calc(.45 * var(--shadow-k))); }
.hx-now-art-empty { display: grid; place-items: center; width: 72px; height: 96px; border: 1px dashed var(--hx-hair-2); border-radius: 3px; color: var(--text-3); }
.hx-now-art-empty .line-icon { width: 22px; height: 22px; }
.hx-now-copy { grid-area: copy; display: grid; gap: 6px; min-width: 0; }
.hx-now-title { margin: 0; font-size: 20px; font-weight: 800; letter-spacing: -.3px; line-height: 1.25; color: var(--text); overflow-wrap: anywhere; }
.hx-now-cat { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-2); font-size: 13px; }
.hx-now-cat .line-icon { width: 15px; height: 15px; color: var(--primary-soft); }
.hx-now-cat b { color: var(--text); font-weight: 700; }
.hx-now-cat small { color: var(--text-3); font-family: var(--hx-mono); font-size: 11px; }
.hx-now-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.hx-now-tags em { font-style: normal; padding: 3px 9px; border: 1px solid var(--hx-hair); border-radius: 999px; background: rgb(var(--veil) / .04); color: var(--text-2); font-size: 12px; font-family: var(--hx-mono); }
.hx-now-tags small { color: var(--text-3); font-size: 12px; }
.hx-auth { grid-area: auth; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--hx-hair); border-radius: 3px; background: var(--hx-panel); }
.hx-auth-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; }
.hx-auth-ico .line-icon { width: 15px; height: 15px; }
.hx-auth.is-ready { border-color: rgba(62, 207, 154, .3); }
.hx-auth.is-ready .hx-auth-ico { background: rgba(62, 207, 154, .14); color: var(--success-soft); }
.hx-auth.is-warn { border-color: rgba(240, 177, 83, .35); background: rgba(240, 177, 83, .06); }
.hx-auth.is-warn .hx-auth-ico { background: rgba(240, 177, 83, .16); color: var(--warning-soft); }
.hx-auth b { display: block; font-size: 13px; color: var(--text); }
.hx-auth p { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.hx-auth code { font-family: var(--hx-mono); font-size: 11.5px; color: var(--primary-soft); }
.hx-stream-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.hx-form { gap: 12px; }
.hx-field { display: grid; gap: 6px; min-width: 0; position: relative; }
.hx-field .input, .hx-field .select { width: 100%; }
.hx-field textarea.input { resize: vertical; min-height: 84px; line-height: 1.45; }
.hx-counter { justify-self: end; color: var(--text-3); font-family: var(--hx-mono); font-size: 11px; font-variant-numeric: tabular-nums; }
.hx-form-foot { display: flex; justify-content: flex-end; }
.hx-category-field { position: relative; display: block; }
.hx-category-field .input { padding-right: 40px; }
.hx-category-field .stream-category-search-icon { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--text-3); pointer-events: none; }
.hx-category-field .stream-category-search-icon .line-icon { width: 15px; height: 15px; }
.hx-tags-add { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.hx-tags-add:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.hx-tags-hash { color: var(--primary-soft); font-family: var(--hx-mono); font-weight: 800; }
.hx-tags-add .input { border: 0; background: transparent; box-shadow: none; padding-left: 0; padding-right: 0; }
.hx-tags-add .input:focus { box-shadow: none; }
.hx-tags { display: flex; flex-wrap: wrap; gap: 6px; min-height: 34px; }
.hx-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-height: 30px;
  padding: 0 8px 0 10px;
  border: 1px solid rgba(255, 106, 43, .35);
  border-radius: 999px;
  background: rgba(255, 106, 43, .12);
  color: var(--text);
  font-size: 12.5px;
  cursor: pointer;
  animation: hx-in .3s var(--hx-ease) both;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
}
.hx-tag:hover:not(:disabled) { border-color: rgba(255, 106, 43, .5); background: rgba(255, 106, 43, .12); }
.hx-tag:disabled { cursor: default; opacity: .7; }
.hx-tag-hash { color: var(--primary-soft); font-family: var(--hx-mono); font-weight: 800; }
.hx-tag i { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgb(var(--veil) / .08); color: var(--text-2); }
.hx-tag i .line-icon { width: 10px; height: 10px; }
.hx-console { display: grid; gap: 4px; padding: 14px 16px; border: 1px solid var(--hx-hair); border-radius: 3px; background: var(--bg); font-family: var(--hx-mono); font-size: 13px; color: var(--text-2); box-shadow: inset 0 0 0 1px rgb(var(--veil) / .02), inset 0 20px 40px rgba(255, 106, 43, .05); }
.hx-console code, .hx-console-cursor { display: flex; align-items: center; gap: 10px; font-family: inherit; }
.hx-console i { font-style: normal; color: var(--hx-cyan); }
.hx-console-cursor b { display: inline-block; width: 8px; height: 14px; background: var(--primary-soft); animation: hx-blink 1s steps(2, end) infinite; }
@keyframes hx-blink { 50% { opacity: 0; } }

/* ---------- модераторы ---------- */
.hx-mods { display: grid; gap: 18px; }
.hx-invite-form { display: grid; gap: 14px; }
.hx-wstep { display: grid; gap: 10px; padding: 14px 16px; border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--hx-panel); }
.hx-wstep header { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 12px; align-items: center; }
.hx-wnum { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: linear-gradient(135deg, var(--primary), var(--hx-cyan)); color: #fff; font-family: var(--hx-mono); font-size: 12.5px; font-weight: 800; box-shadow: 0 6px 18px rgba(255, 106, 43, .35); }
.hx-wstep h3 { margin: 0; font-size: 14.5px; font-weight: 750; color: var(--text); }
.hx-wstep header p { margin: 2px 0 0; color: var(--text-2); font-size: 12.5px; }
.hx-wstep-body { padding-left: 42px; }
.hx-login { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 8px; padding-left: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--surface-2); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.hx-login:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.hx-login b { color: var(--primary-soft); font-family: var(--hx-mono); }
.hx-login .input { border: 0; background: transparent; box-shadow: none; padding-left: 0; }
.hx-login .input:focus { box-shadow: none; }
.hx-login-field { max-width: 360px; }
.hx-presets { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.hx-preset { position: relative; display: block; cursor: pointer; }
.hx-preset input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.hx-preset-body { position: relative; display: grid; gap: 6px; height: 100%; padding: 14px; border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--well-2); transition: border-color var(--dur-2) var(--ease), background var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.hx-preset:hover .hx-preset-body { border-color: var(--hx-hair-2); transform: translateY(-1px); }
.hx-preset input:checked + .hx-preset-body { border-color: rgba(255, 106, 43, .6); background: rgba(255, 106, 43, .12); box-shadow: 0 0 0 3px rgba(255, 106, 43, .16), 0 14px 30px rgba(255, 106, 43, .15); }
.hx-preset input:focus-visible + .hx-preset-body { outline: 2px solid var(--primary); outline-offset: 2px; }
.hx-preset-body em { position: absolute; top: 10px; right: 10px; padding: 2px 7px; border-radius: 999px; background: rgba(207, 149, 62, .16); color: var(--cyan-soft); font-style: normal; font-family: var(--hx-mono); font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; }
.hx-preset-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; background: rgb(var(--veil) / .06); color: var(--primary-soft); }
.hx-preset-ico .line-icon { width: 15px; height: 15px; }
.hx-preset-body b { font-size: 14px; color: var(--text); }
.hx-preset-body small { color: var(--text-2); font-size: 12px; line-height: 1.45; }
.hx-expiry { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.hx-expiry-opt { position: relative; display: block; cursor: pointer; }
.hx-expiry-opt input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.hx-expiry-opt span { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--hx-hair); border-radius: 3px; background: var(--well-2); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.hx-expiry-opt input:checked + span { border-color: rgba(207, 149, 62, .55); background: rgba(207, 149, 62, .1); }
.hx-expiry-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.hx-expiry-opt b { font-size: 13.5px; color: var(--text); }
.hx-expiry-opt small { font-size: 11.5px; color: var(--text-3); }
.hx-perm-editor { border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--hx-panel); }
.hx-perm-editor summary { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; }
.hx-perm-editor summary::-webkit-details-marker { display: none; }
.hx-perm-editor-title { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-size: 13.5px; }
.hx-perm-editor-title .line-icon { width: 15px; height: 15px; color: var(--primary-soft); }
.hx-perm-editor-title small { color: var(--text-3); font-size: 12px; font-weight: 500; }
.hx-perm-count { padding: 3px 9px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary-soft); font-family: var(--hx-mono); font-size: 11px; }
.hx-perm-editor-chevron { color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.hx-perm-editor-chevron .line-icon { width: 14px; height: 14px; }
.hx-perm-editor[open] .hx-perm-editor-chevron { transform: rotate(180deg); }
.hx-perm-editor-body { display: grid; gap: 10px; padding: 0 16px 16px; }
.hx-perms { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.hx-perm { position: relative; display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding: 10px 12px; border: 1px solid var(--hx-hair); border-radius: 3px; background: var(--well-2); cursor: pointer; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.hx-perm:hover { border-color: var(--hx-hair-2); }
.hx-perm input { position: absolute; opacity: 0; inset: 0; pointer-events: none; }
.hx-perm-box { display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border: 1px solid var(--hx-hair-2); border-radius: 2px; background: rgb(var(--veil) / .04); color: transparent; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.hx-perm-box .line-icon { width: 12px; height: 12px; }
.hx-perm input:checked ~ .hx-perm-box { background: var(--primary); border-color: var(--primary); color: #fff; box-shadow: 0 0 12px rgba(255, 106, 43, .5); }
.hx-perm input:checked ~ .hx-perm-copy b { color: var(--text); }
.hx-perm input:focus-visible ~ .hx-perm-box { outline: 2px solid var(--primary); outline-offset: 2px; }
.hx-perm.is-locked { cursor: default; opacity: .7; }
.hx-perm.is-elevated { border-style: dashed; }
.hx-perm-copy { display: grid; gap: 2px; min-width: 0; }
.hx-perm-copy b { font-size: 13px; color: var(--text); }
.hx-perm-copy small { font-size: 11.5px; color: var(--text-3); line-height: 1.4; }
.hx-invite-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; padding-top: 4px; }
.hx-security { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 12.5px; }
.hx-security .line-icon { width: 16px; height: 16px; color: var(--success-soft); flex: 0 0 auto; }
.hx-security span { display: grid; gap: 1px; }
.hx-security b { color: var(--text); font-size: 13px; }
.hx-security small { color: var(--text-3); font-size: 12px; }
.hx-invite-result { display: grid; gap: 10px; padding: 14px; border: 1px solid rgba(62, 207, 154, .35); border-radius: 4px; background: linear-gradient(180deg, rgba(62, 207, 154, .1), rgba(62, 207, 154, .02)); }
.hx-invite-result-copy { display: flex; align-items: center; gap: 12px; }
.hx-invite-result-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: rgba(62, 207, 154, .18); color: var(--success-soft); }
.hx-invite-result-ico .line-icon { width: 15px; height: 15px; }
.hx-invite-result b { display: block; color: var(--text); font-size: 13.5px; }
.hx-invite-result small { color: var(--text-2); font-size: 12.5px; }
.hx-pending-list { display: grid; gap: 8px; }
.hx-pending-row { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px 12px; border: 1px solid var(--hx-hair); border-radius: 3px; background: var(--hx-panel); }
.hx-pending-ico { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 3px; background: rgba(90, 167, 255, .14); color: var(--info-soft); }
.hx-pending-ico .line-icon { width: 14px; height: 14px; }
.hx-pending-copy { display: grid; gap: 2px; min-width: 0; }
.hx-pending-copy b { font-size: 13.5px; color: var(--text); }
.hx-pending-copy small { font-size: 12px; color: var(--text-3); }
.hx-pending-actions { display: inline-flex; gap: 6px; align-items: center; }
.hx-team { display: grid; gap: 12px; }
.hx-team-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 0 4px; }
.hx-team-head h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -.3px; color: var(--text); }
.hx-team-head p { margin: 2px 0 0; color: var(--text-2); font-size: 13px; }
.hx-team-count { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border: 1px solid var(--hx-hair); border-radius: 999px; background: var(--hx-panel); }
.hx-team-count b { font-size: 18px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.hx-team-count small { font-size: 11px; color: var(--text-3); font-family: var(--hx-mono); text-transform: uppercase; letter-spacing: .08em; }
.hx-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.hx-member { gap: 12px; }
.hx-member.is-ok { border-color: rgba(62, 207, 154, .22); }
.hx-member.is-warn { border-color: rgba(240, 177, 83, .3); }
.hx-member.is-off { opacity: .85; }
.hx-member-head { display: grid; grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px; align-items: center; }
.hx-member-avatar { position: relative; width: 44px; height: 44px; }
.hx-member-avatar img, .hx-member-avatar .avatar-fallback { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; }
.hx-member-pip { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--surface); background: var(--text-3); }
.hx-member.is-ok .hx-member-pip { background: var(--success); box-shadow: 0 0 8px rgba(62, 207, 154, .8); }
.hx-member.is-warn .hx-member-pip { background: var(--warning); }
.hx-member-copy { display: grid; gap: 2px; min-width: 0; }
.hx-member-copy h3 { margin: 0; font-size: 15px; font-weight: 750; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-member-copy p { margin: 0; color: var(--text-3); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-member-role { display: grid; grid-template-columns: minmax(0, 240px) minmax(0, 1fr); gap: 12px; align-items: end; }
.hx-member-links { border: 1px solid var(--hx-hair); border-radius: 3px; background: var(--hx-panel); }
.hx-member-links summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 10px 12px; cursor: pointer; list-style: none; }
.hx-member-links summary::-webkit-details-marker { display: none; }
.hx-member-links summary > .line-icon { width: 15px; height: 15px; color: var(--primary-soft); }
.hx-member-links summary b { font-size: 13px; color: var(--text); }
.hx-member-links summary small { display: block; color: var(--text-3); font-size: 11.5px; }
.hx-member-links summary i { color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.hx-member-links summary i .line-icon { width: 14px; height: 14px; }
.hx-member-links[open] summary i { transform: rotate(180deg); }
.hx-member-links .link-rows { display: grid; gap: 6px; padding: 0 12px 12px; }
.hx-member-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 4px; border-top: 1px solid var(--hx-hair); }
.hx-history summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 12px; align-items: center; cursor: pointer; list-style: none; }
.hx-history summary::-webkit-details-marker { display: none; }
.hx-history-copy { display: grid; gap: 2px; min-width: 0; }
.hx-history-copy b { font-size: 15px; color: var(--text); }
.hx-history-copy small { color: var(--text-3); font-size: 12px; }
.hx-history-chevron { color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.hx-history-chevron .line-icon { width: 15px; height: 15px; }
.hx-history[open] .hx-history-chevron { transform: rotate(180deg); }
.hx-history-body { display: grid; gap: 10px; padding-top: 4px; }
.hx-timeline { list-style: none; margin: 0; padding: 0 0 0 6px; display: grid; gap: 0; position: relative; }
.hx-timeline::before { content: ""; position: absolute; left: 11px; top: 10px; bottom: 10px; width: 1px; background: linear-gradient(180deg, rgba(255, 106, 43, .6), rgba(207, 149, 62, .2)); }
.hx-timeline li { position: relative; display: grid; grid-template-columns: 12px minmax(0, 1fr); gap: 14px; align-items: start; padding: 8px 0; animation: hx-in .4s var(--hx-ease) both; animation-delay: calc(var(--i, 0) * 40ms); }
.hx-timeline-dot { width: 11px; height: 11px; margin-top: 4px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary-soft); box-shadow: 0 0 10px rgba(255, 106, 43, .45); }
.hx-timeline li b { display: block; font-size: 13px; color: var(--text); }
.hx-timeline li small { color: var(--text-3); font-size: 12px; }
.hx-timeline-more { justify-self: start; }
.hx-history-empty { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px dashed var(--hx-hair-2); border-radius: 3px; color: var(--text-2); }
.hx-history-empty span { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 3px; background: rgb(var(--veil) / .05); color: var(--text-3); }
.hx-history-empty b { display: block; color: var(--text); font-size: 13.5px; }
.hx-history-empty p { margin: 2px 0 0; font-size: 12.5px; }

/* ---------- пусто и скелет ---------- */
.hx-empty { justify-items: center; text-align: center; gap: 8px; padding: 34px 22px; }
.hx-empty-ico { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 4px; background: rgb(var(--veil) / .05); color: var(--text-3); }
.hx-empty-ico .line-icon { width: 20px; height: 20px; }
.hx-empty strong { font-size: 15px; color: var(--text); }
.hx-empty p { margin: 0; max-width: 48ch; color: var(--text-2); font-size: 13px; line-height: 1.5; }
.hx-empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 6px; }
.hx-skeleton { gap: 10px; }
.hx-sk { height: 14px; border-radius: 3px; background: linear-gradient(90deg, rgb(var(--veil) / .04), rgb(var(--veil) / .1), rgb(var(--veil) / .04)); background-size: 200% 100%; animation: hx-shimmer 1.4s linear infinite; animation-delay: calc(var(--i, 0) * 90ms); }
.hx-sk-title { width: 40%; height: 20px; }
.hx-sk:nth-child(3) { width: 85%; }
.hx-sk:nth-child(4) { width: 70%; }
.hx-sk:nth-child(5) { width: 55%; }
@keyframes hx-shimmer { to { background-position: -200% 0; } }
.hx-sk-label { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; color: var(--text-3); font-size: 12.5px; }

/* ---------- адаптив ---------- */
@media (max-width: 1180px) {
  .hx-members { grid-template-columns: 1fr; }
}
@media (max-width: 1040px) {
  .hx-hero { grid-template-columns: 1fr; }
  .hx-hero-side { max-width: 640px; }
  .hx-live-grid { grid-template-columns: 1fr; }
  .hx-stream-grid { grid-template-columns: 1fr; }
  .hx-faq-layout { grid-template-columns: 1fr; }
  .hx-rail { position: static; }
}
@media (max-width: 760px) {
  .hx-hero { padding: 20px 18px; }
  .hx-card { padding: 16px; }
  .hx-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .hx-now { grid-template-columns: 1fr; grid-template-areas: "art" "copy" "auth"; }
  .hx-auth { grid-template-columns: auto minmax(0, 1fr); }
  .hx-auth .button { grid-column: 1 / -1; justify-self: start; }
  .hx-topic-body { padding-left: 16px; }
  .hx-member-role { grid-template-columns: 1fr; }
  .hx-wstep-body { padding-left: 0; }
  .hx-card-head { flex-wrap: wrap; }
  .hx-card-actions { margin-left: 0; }
}
@media (max-width: 520px) {
  .hx-kpis-4 { grid-template-columns: 1fr 1fr; }
  .hx-kpi b { font-size: 22px; }
  .hx-attention-row { grid-template-columns: 28px minmax(0, 1fr); }
  .hx-attention-row > .button, .hx-attention-row > a { grid-column: 1 / -1; }
  .hx-step { grid-template-columns: 32px minmax(0, 1fr); }
  .hx-step-action { grid-column: 1 / -1; justify-self: start; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-in, .hx-ready-row, .hx-attention-row, .hx-step, .hx-intro-tile, .hx-fchip, .hx-tag, .hx-timeline li, .hx-topic-body { animation: none !important; }
  .hx-blob, .hx-scan, .hx-dot, .hx-monitor-led i, .hx-console-cursor b, .hx-ring-fill, .hx-board-meter i::after, .hx-sk { animation: none !important; }
  .hx-kpi, .hx-quick, .hx-fchip, .hx-opt, .hx-intro-tile, .hx-preset-body { transition: none; }
}

/* Сводка во всю ширину — четыре KPI в ряд; на узких экранах по два. */
.hx-summary .hx-kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .hx-summary .hx-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---- Правки после первого просмотра ---- */
/* Карточки команды не тянутся под соседа: раскрытые OBS-ссылки не раздвигают чужую карточку. */
.hx-members { align-items: start; }
.hx-member { align-content: start; }
/* Шапка details: иконка · название · подпись · шеврон в одну строку. */
.hx-member-links summary { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.hx-member-links summary small { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Роль — тёмный селект с собственной стрелкой, не зависит от системного вида. */
.hx-member-role .select,
.hx-field .select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 36px;
  background-color: var(--surface-2);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23b6b0c4' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 14px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  color: var(--text);
  font: inherit;
  font-size: 13px;
  min-height: 38px;
  cursor: pointer;
}
.hx-member-role .select:focus-visible, .hx-field .select:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--ring); }
.hx-member-role .select:disabled { opacity: .6; cursor: default; }
/* Текстовый KPI («Подключён / Не подключён») — меньше кегль, чем у чисел. */
.hx-kpi.is-text b { font-size: 18px; letter-spacing: -.2px; }
/* Тестовые события: своя иконка у каждого, фирменные значки у донат-сервисов. */
.hx-test-buttons button { justify-content: flex-start; text-align: left; line-height: 1.2; padding: 6px 10px; min-height: 36px; }
.hx-test-btn-ico { display: grid; place-items: center; flex: 0 0 auto; width: 18px; height: 18px; }
.hx-test-btn-ico .line-icon { width: 13px; height: 13px; color: var(--hx-cyan); opacity: .85; }
.hx-test-brand { width: 14px; height: 14px; border-radius: 3px; object-fit: contain; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
/* Нечётная последняя кнопка тестов занимает всю строку — без сироты в две строки текста. */
.hx-test-buttons button:last-child:nth-child(odd) { grid-column: 1 / -1; }

/* ---- Роль модератора: сегмент из двух радио вместо селекта ---- */
.hx-role-seg { display: inline-flex; padding: 3px; border: 1px solid var(--hx-hair-2); border-radius: 3px; background: var(--well-2); }
.hx-role-opt { position: relative; display: block; cursor: pointer; }
.hx-role-opt input { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.hx-role-opt span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 34px;
  padding: 0 14px;
  border-radius: 3px;
  color: var(--text-2);
  font-size: 13px;
  font-weight: 650;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease);
}
.hx-role-opt span .line-icon { width: 14px; height: 14px; opacity: .75; }
.hx-role-opt:hover span { color: var(--text); }
.hx-role-opt input:checked + span { background: rgba(255, 106, 43, .22); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .5), 0 6px 18px rgba(255, 106, 43, .18); }
.hx-role-opt input:checked + span .line-icon { opacity: 1; color: var(--primary-soft); }
.hx-role-opt input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; }
.hx-role-seg.is-locked { opacity: .6; }
.hx-role-seg.is-locked .hx-role-opt { cursor: default; }
.hx-member-role { grid-template-columns: auto minmax(0, 1fr); align-items: end; }


/* ============================================================
   АНАЛИТИКА · хайтек-скин поверх существующих компонентов (tt-*, stream-page-*,
   follower-*, audience-*). Разметка графиков и таблиц прежняя, меняется
   оболочка: герой канала, период-сегмент, live-полоса, карточки hx-card.
   ============================================================ */

.hx-analytics { gap: 18px; }
.hx-analytics.analytics-streams-page { gap: 18px; }

/* Герой канала: аватар в заголовке, вкладки разделов — сегмент. */
.hx-an-identity { display: inline-flex; align-items: center; gap: 14px; }
.hx-an-avatar { width: 56px; height: 56px; border-radius: 4px; object-fit: cover; box-shadow: 0 0 0 1px rgb(var(--veil) / .12), 0 10px 30px rgb(var(--shade) / calc(.45 * var(--shadow-k))); }
.hx-an-avatar.avatar-fallback { display: grid; place-items: center; font-size: 22px; font-weight: 800; background: linear-gradient(135deg, var(--primary), var(--hx-cyan)); color: #fff; }
.hx-an-hero .hx-lead .tt-live-pill { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 999px; background: rgba(255, 106, 43, .16); color: var(--primary-soft); font-size: 12px; font-weight: 700; }
.hx-an-hero .hx-lead .tt-live-pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--hx-live); box-shadow: 0 0 8px var(--hx-live); }
.hx-analytics .tt-tabs {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
}
.hx-analytics .tt-tab { padding: 7px 2px; border-radius: 0; color: var(--text-2); font-size: 13px; font-weight: 600; transition: color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.hx-analytics .tt-tab:hover { background: transparent; color: var(--text); }
.hx-analytics .tt-tab.is-active { background: transparent; color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--primary); }
.hx-an-life .hx-kpi b { font-size: 24px; }

/* Период и обновление. */
.hx-an-period { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.hx-an-period-label { display: inline-flex; align-items: center; gap: 6px; color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.hx-an-period-label .line-icon { width: 13px; height: 13px; }
.hx-an-period .period-tabs { display: inline-flex; gap: 0; padding: 0; border: 1px solid var(--line-strong); border-radius: 2px; background: transparent; overflow: hidden; }
.hx-an-period .period-tab { min-height: 30px; padding: 0 13px; border-radius: 0; border-right: 1px solid var(--line); font-family: var(--font-mono, ui-monospace); font-size: 10px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; }
.hx-an-period .period-tab:last-child { border-right: 0; }
.hx-an-period .period-tab.is-active { background: var(--primary); color: #16110b; font-weight: 700; box-shadow: none; }
.hx-an-period #analytics-refresh { margin-left: auto; }

/* Live-полоса. */
.hx-live-strip {
  position: relative;
  overflow: hidden;
  display: grid;
  gap: 12px;
  padding: 14px 18px;
  border: 1px solid rgba(255, 106, 43, .35);
  border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 106, 43, .14), rgba(255, 106, 43, .03) 55%), var(--surface);
}
.hx-live-strip::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--hx-live); box-shadow: 0 0 14px var(--hx-live); }
.hx-live-strip-head { display: flex; align-items: center; gap: 10px; }
.hx-live-strip-head b { font-size: 14px; color: var(--text); }
.hx-live-strip-uptime { margin-left: auto; color: var(--danger-soft); font-family: var(--hx-mono); font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; }
.hx-live-strip-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 8px; }
.hx-live-stat { display: grid; gap: 2px; padding: 8px 10px; border: 1px solid rgb(var(--veil) / .07); border-radius: 3px; background: var(--well-2); }
.hx-live-stat strong { font-size: 17px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-live-stat small { color: var(--text-3); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Карточки аналитики (и старые .card внутри) — в языке hx-card. */
.hx-analytics .card:not(.hx-card) {
  border: 1px solid var(--hx-hair);
  border-radius: 4px;
  background: linear-gradient(180deg, rgb(var(--veil) / .03), rgb(var(--veil) / 0) 60%), var(--surface);
  box-shadow: inset 0 1px 0 rgb(var(--veil) / .035), 0 12px 40px rgb(var(--shade) / calc(.25 * var(--shadow-k)));
}
.hx-analytics .card-head h2, .hx-analytics .card-head h3 { letter-spacing: -.2px; }
.hx-an-count { display: inline-flex; align-items: baseline; gap: 6px; padding: 6px 12px; border: 1px solid var(--hx-hair); border-radius: 999px; background: var(--hx-panel); }
.hx-an-count b { font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.hx-an-count small { font-size: 11px; color: var(--text-3); }

/* KPI периода: нейтральная плитка на панели, активная — кольцо цвета серии (как было). */
.hx-analytics .tt-kpi { border-color: var(--hx-hair); background: var(--hx-panel); border-radius: 4px; opacity: .82; }
.hx-analytics .tt-kpi:hover { border-color: var(--hx-hair-2); }
.hx-analytics .tt-kpi small { font-family: var(--hx-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.hx-analytics .tt-kpi strong { font-size: 24px; }
.hx-analytics .tt-kpi.is-on { opacity: 1; }

/* Месяцы, игры, таблицы. */
.hx-analytics .tt-month-tile,
.hx-analytics .tt-game-card,
.hx-analytics .tt-stat-block,
.hx-analytics .tt-lifetime article { border-color: var(--hx-hair); background: var(--hx-panel); }
.hx-analytics .tt-month-tile:hover,
.hx-analytics .tt-game-card:hover { border-color: var(--hx-hair-2); }
.hx-analytics .tt-streams-table th,
.hx-analytics .follower-table th,
.hx-analytics .audience-table th,
.hx-analytics .tt-breakdown th { color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx-analytics .tt-streams-table tbody tr { transition: background var(--dur-1) var(--ease); }
.hx-analytics .tt-streams-table tbody tr:hover { background: rgba(255, 106, 43, .07); }
.hx-analytics .tt-streams-table tbody tr.is-live { background: rgba(255, 106, 43, .07); }

/* Страница эфира: блоки — карточки, итоги — KPI-плитки. */
.hx-analytics .stream-page { display: grid; gap: 18px; }
.hx-an-stream-hero .hx-title { font-size: clamp(22px, 2.2vw, 30px); overflow-wrap: anywhere; }
.hx-an-stream-hero .hx-lead time { font-family: var(--hx-mono); font-size: 13px; color: var(--text-2); }
.hx-an-game { display: inline-flex; align-items: center; gap: 10px; padding: 6px 12px 6px 6px; border: 1px solid var(--hx-hair); border-radius: 999px; background: var(--hx-panel); color: var(--text-2); font-size: 13px; }
.hx-an-game .stream-game-art.is-md { width: 26px; height: 34px; border-radius: 2px; }
.hx-analytics .stream-page-block {
  border: 1px solid var(--hx-hair);
  border-radius: 4px;
  background: linear-gradient(180deg, rgb(var(--veil) / .03), rgb(var(--veil) / 0) 60%), var(--surface);
  box-shadow: inset 0 1px 0 rgb(var(--veil) / .035), 0 12px 40px rgb(var(--shade) / calc(.25 * var(--shadow-k)));
  padding: 20px 22px;
  animation: hx-in .6s var(--hx-ease) both;
}
.hx-analytics .stream-page-block-head h3 { font-size: 16px; font-weight: 750; letter-spacing: -.2px; }
.hx-analytics .stream-summary-card { border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--hx-panel); transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); }
.hx-analytics .stream-summary-card:hover { border-color: var(--hx-hair-2); transform: translateY(-1px); }
.hx-analytics .stream-summary-card strong { font-size: 22px; letter-spacing: -.4px; }
.hx-analytics .stream-summary-card span { font-family: var(--hx-mono); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }

/* Фолловеры и аудит: вкладки-сегмент, чипы, тулбары. */
.hx-analytics .follower-tabs { gap: 2px; padding: 3px; border: 1px solid var(--hx-hair); border-radius: 999px; background: var(--well-2); }
.hx-analytics .follower-tab { border-radius: 999px; padding: 7px 13px; }
.hx-analytics .follower-tab.is-active { background: rgba(255, 106, 43, .22); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .45); }
.hx-analytics .follower-meta { color: var(--text-3); font-size: 12px; }
.hx-analytics .audience-chip { border: 1px solid var(--hx-hair); border-radius: 999px; background: var(--hx-panel); }
.hx-analytics .audience-funnel-step { border-color: var(--hx-hair); background: var(--hx-panel); }

@media (max-width: 900px) {
  .hx-an-life.hx-kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) {
  .hx-analytics .stream-page-block { animation: none; }
}
/* Заголовок месячной разбивки — обычный регистр (старый .tt-breakdown h3 был капсом). */
.hx-analytics .tt-breakdown .hx-card-copy h3 { text-transform: none; letter-spacing: -.2px; font-size: 17px; }


/* ============================================================
   АНАЛИТИКА · внутренности: факты под графиками, архив чата (блок и модалка
   «все чаттеры»), аудит эфира (воронка, состав, сигналы, таблицы, история).
   ============================================================ */

/* ---- Факты под графиком эфира: ровная сетка плиток вместо «забора» ---- */
.hx-analytics .stream-activity-facts,
.hx-analytics .stream-chart-facts {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 8px;
  margin: 14px 0;
}
.hx-analytics .stream-activity-facts > span,
.hx-analytics .stream-chart-facts > span {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-content: start;
  gap: 3px;
  min-width: 0;
  padding: 10px 12px;
  border: 1px solid var(--hx-hair);
  border-radius: 3px;
  background: var(--hx-panel);
}
.hx-analytics .stream-activity-facts > span:first-child,
.hx-analytics .stream-chart-facts > span:first-child { padding-left: 12px; border-left: 1px solid var(--hx-hair); }
.hx-analytics .stream-activity-facts b,
.hx-analytics .stream-chart-facts b { display: flex; align-items: center; gap: 6px; min-width: 0; font-size: 16px; font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; letter-spacing: -.2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-analytics .stream-activity-facts small,
.hx-analytics .stream-chart-facts small { display: flex; align-items: center; gap: 5px; min-width: 0; color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hx-analytics .stream-activity-facts small .fee-heart { display: inline-grid; place-items: center; width: 14px; height: 14px; }
.hx-analytics .stream-activity-facts small .fee-heart svg { width: 12px; height: 12px; fill: var(--danger); }
/* Донат-сервисы: логотип слева, число и подпись справа — одна высота с остальными. */
.hx-analytics .stream-activity-facts > span.donation-source-fact {
  grid-template-columns: 28px minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 10px;
  row-gap: 2px;
}
.hx-analytics .donation-source-fact .integration-logo { grid-row: 1 / 3; align-self: center; width: 28px; height: 28px; border-radius: 3px; overflow: hidden; background: rgb(var(--veil) / .06); display: grid; place-items: center; }
.hx-analytics .donation-source-fact .integration-logo img { width: 100%; height: 100%; object-fit: contain; }
.hx-analytics .donation-source-fact b { grid-column: 2; }
/* «2 · DonationAlerts» не влезает в одну строку рядом с логотипом — даём
   подписи переноситься вместо многоточия; плитка чуть выше, сетка ровняет. */
.hx-analytics .donation-source-fact small { grid-column: 2; white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; letter-spacing: .04em; }
.hx-analytics .stream-activity-facts > span.memecoin-fact small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.25; }

/* ---- Архив чата на странице эфира ---- */
.hx-analytics .chat-archive-block .stream-page-block-head h3 { display: flex; align-items: center; gap: 8px; }
.hx-analytics .chat-archive-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 14px; }
.hx-analytics .chat-archive-stats span { gap: 3px; padding: 10px 12px; border: 1px solid var(--hx-hair); border-radius: 3px; background: var(--hx-panel); }
.hx-analytics .chat-archive-stats b { font-size: 20px; color: var(--text); letter-spacing: -.3px; font-variant-numeric: tabular-nums; }
.hx-analytics .chat-archive-stats small { color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.hx-analytics .chat-top-head { display: flex; align-items: center; gap: 8px; margin: 6px 0 8px; color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10.5px; letter-spacing: .12em; }
.hx-analytics .chat-top-head::after { content: ""; flex: 1; height: 1px; background: var(--hx-hair); }
.hx-analytics .chat-top-item,
.panel-analytics-dialog .chat-top-item {
  grid-template-columns: 30px minmax(0, 1fr) auto;
  padding: 8px 12px 8px 8px;
  border: 1px solid var(--hx-hair, rgb(var(--veil) / .075));
  border-radius: 3px;
  background: rgb(var(--veil) / .025);
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.hx-analytics .chat-top-item:hover,
.panel-analytics-dialog .chat-top-item:hover { border-color: rgb(var(--veil) / .14); background: rgba(255, 106, 43, .07); transform: translateX(2px); }
.hx-analytics .chat-top-rank,
.panel-analytics-dialog .chat-top-rank {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgb(var(--veil) / .1);
  background: var(--well-2);
  color: var(--text-2);
  font-family: var(--hx-mono, ui-monospace, monospace);
  font-size: 11px;
  text-align: center;
}
.hx-analytics .chat-top-item:nth-child(1) .chat-top-rank,
.panel-analytics-dialog .chat-top-item:nth-child(1) .chat-top-rank { color: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 34%, transparent); box-shadow: 0 0 10px rgba(255, 212, 122, .25); }
.hx-analytics .chat-top-item:nth-child(2) .chat-top-rank,
.panel-analytics-dialog .chat-top-item:nth-child(2) .chat-top-rank { color: var(--text-2); border-color: rgba(223, 227, 234, .45); }
.hx-analytics .chat-top-item:nth-child(3) .chat-top-rank,
.panel-analytics-dialog .chat-top-item:nth-child(3) .chat-top-rank { color: #e0a877; border-color: color-mix(in srgb, var(--warning) 34%, transparent); }
.hx-analytics .chat-top-item .follower-avatar,
.panel-analytics-dialog .chat-top-item .follower-avatar { box-shadow: 0 0 0 1px rgb(var(--veil) / .1); }
.hx-analytics .chat-top-bar,
.panel-analytics-dialog .chat-top-bar { height: 5px; background: rgb(var(--veil) / .07); }
.hx-analytics .chat-top-bar i,
.panel-analytics-dialog .chat-top-bar i { background: linear-gradient(90deg, var(--primary), var(--hx-cyan, var(--cyan))); box-shadow: 0 0 10px rgba(255, 106, 43, .45); }
.hx-analytics .chat-archive-actions { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 12px; border-top: 1px solid var(--hx-hair); }
.hx-analytics .chat-archive-note { color: var(--hx-ink-3); font-size: 12px; }

/* Модалка «все чаттеры» (вне .hx-analytics — висит на body). */
.panel-analytics-dialog .chatters-dialog-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; margin-bottom: 12px; }
.panel-analytics-dialog .chatters-dialog-stats span { gap: 3px; padding: 10px 12px; border: 1px solid rgb(var(--veil) / .075); border-radius: 3px; background: rgb(var(--veil) / .028); }
.panel-analytics-dialog .chatters-dialog-stats b { font-size: 20px; color: var(--text); letter-spacing: -.3px; }
.panel-analytics-dialog .chatters-dialog-stats small { color: var(--text-3); font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.panel-analytics-dialog .chatters-dialog-search { min-height: 40px; border-radius: 3px; background: var(--well-2); }
.panel-analytics-dialog .chat-top-list-modal { gap: 6px; padding-right: 8px; }

/* ---- Аудит эфира ---- */
.hx-audience .audience-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 1px solid var(--hx-hair); }
.hx-audience .audience-toolbar .follower-meta { margin-left: auto; }
/* Воронка: три плитки с соединителями и полоса-каскад. */
.hx-audience .audience-funnel { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: 10px; margin-bottom: 12px; }
.hx-audience .audience-funnel-step {
  flex: none;
  min-width: 0;
  padding: 14px 16px;
  border: 1px solid var(--hx-hair);
  border-radius: 4px;
  background: linear-gradient(180deg, rgb(var(--veil) / .035), rgb(var(--veil) / .01)), var(--hx-panel);
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease);
}
.hx-audience .audience-funnel-step:hover { border-color: var(--hx-hair-2); transform: translateY(-1px); }
.hx-audience .audience-funnel-icon { width: 40px; height: 40px; border-radius: 3px; border: 1px solid var(--hx-hair); background: rgb(var(--veil) / .04); color: var(--text-2); }
.hx-audience .audience-funnel-label { color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10px; letter-spacing: .1em; }
.hx-audience .audience-funnel-step b { font-size: 28px; letter-spacing: -.6px; color: var(--text); }
.hx-audience .audience-funnel-step.is-chat b { color: var(--info-soft); }
.hx-audience .audience-funnel-step.is-speak b { color: var(--success-soft); }
.hx-audience .audience-funnel-step.is-chat .audience-funnel-icon { color: var(--info-soft); border-color: color-mix(in srgb, var(--info) 34%, transparent); background: rgba(143, 199, 255, .08); }
.hx-audience .audience-funnel-step.is-speak .audience-funnel-icon { color: var(--success-soft); border-color: color-mix(in srgb, var(--success) 34%, transparent); background: rgba(127, 224, 181, .08); }
.hx-audience .audience-funnel-arrow { display: grid; place-items: center; width: 26px; color: var(--hx-ink-3); font-size: 18px; }
.hx-audience .audience-funnel-bar { height: 12px; margin-bottom: 18px; background: rgb(var(--veil) / .05); }
.hx-audience .audience-funnel-bar .is-viewers { background: rgb(var(--veil) / .1); }
.hx-audience .audience-funnel-bar .is-chatters { background: linear-gradient(90deg, rgba(143, 199, 255, .55), rgba(143, 199, 255, .85)); box-shadow: 0 0 12px rgba(143, 199, 255, .35); }
.hx-audience .audience-funnel-bar .is-speakers { background: linear-gradient(90deg, var(--success), var(--success-soft)); box-shadow: 0 0 12px rgba(62, 207, 154, .45); }
/* Состав чата. */
.hx-audience .audience-composition { gap: 10px; padding: 14px 16px; border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--hx-panel); }
.hx-audience .audience-composition-head span { color: var(--text); font-family: inherit; font-size: 13.5px; font-weight: 750; letter-spacing: -.1px; text-transform: none; }
.hx-audience .audience-stack-bar { height: 12px; gap: 2px; background: rgb(var(--veil) / .06); }
.hx-audience .audience-stack-bar i { border-radius: 999px; }
.hx-audience .audience-stack-bar .is-followers { box-shadow: 0 0 12px rgba(62, 207, 154, .4); }
.hx-audience .audience-stack-bar .is-guests { box-shadow: 0 0 12px rgba(240, 177, 83, .35); }
.hx-audience .audience-legend { gap: 6px 8px; }
.hx-audience .audience-legend-item { padding: 5px 10px; border: 1px solid var(--hx-hair); border-radius: 999px; background: var(--well-2); font-size: 12px; }
.hx-audience .audience-legend-item i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 8px currentColor; }
.hx-audience .audience-chips { margin-top: 12px; }
.hx-audience .audience-chip { font-size: 12px; }
/* Сигналы. */
.hx-audience .audience-signals { gap: 8px; }
.hx-audience .audience-signal {
  display: grid;
  grid-template-columns: 36px minmax(0, 1fr);
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border: 1px solid var(--hx-hair);
  border-left: 3px solid var(--hx-hair-2);
  border-radius: 3px;
  background: rgb(var(--veil) / .02);
}
.hx-audience .audience-signal-icon { width: 36px; height: 36px; border-radius: 3px; }
.hx-audience .audience-signal.is-ok { border-left-color: var(--success); }
.hx-audience .audience-signal.is-warn { border-left-color: var(--warning); background: rgba(240, 177, 83, .05); }
.hx-audience .audience-signal.is-alert { border-left-color: var(--danger); background: rgba(242, 125, 152, .06); }
/* Таблицы аудита и фолловеров. */
.hx-analytics .follower-table { border-collapse: separate; border-spacing: 0; }
.hx-analytics .follower-table tbody tr { transition: background var(--dur-1) var(--ease); }
.hx-analytics .follower-table tbody tr:hover { background: rgba(255, 106, 43, .06); }
.hx-analytics .follower-table tbody tr.is-silent { opacity: .72; }
.hx-analytics .follower-table td { border-top: 1px solid var(--hx-hair); }
.hx-analytics .follower-avatar { width: 32px; height: 32px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px rgb(var(--veil) / .1); }
.hx-analytics .follower-avatar.avatar-fallback { display: grid; place-items: center; background: linear-gradient(135deg, var(--primary), var(--hx-cyan)); color: #fff; font-size: 13px; font-weight: 800; }
.hx-analytics .audience-no { color: var(--hx-ink-3); }
.hx-analytics .audience-tier { padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary-soft); font-size: 11px; font-weight: 750; }
.hx-analytics .audience-sit-count, .hx-analytics .audience-chat-count { color: var(--text); font-weight: 800; font-variant-numeric: tabular-nums; }
.hx-analytics .audience-viewer-btn { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid var(--hx-hair); border-radius: 3px; background: rgb(var(--veil) / .03); color: var(--text-2); cursor: pointer; transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease); }
.hx-analytics .audience-viewer-btn:hover { border-color: var(--primary); color: var(--text); }
.hx-analytics .audience-viewer-btn .line-icon { width: 14px; height: 14px; }
.hx-analytics .audience-trigger { padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hx-hair); font-size: 11px; color: var(--text-2); }
.hx-analytics .audience-trigger.is-manual { color: var(--primary-soft); border-color: color-mix(in srgb, var(--primary) 34%, transparent); }
/* История снимков: группы-эфиры. */
.hx-audience .audience-stream-groups { display: grid; gap: 8px; }
.hx-audience .audience-stream-group { border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--hx-panel); overflow: hidden; }
.hx-audience .audience-stream-group[open] { border-color: var(--hx-hair-2); }
.hx-audience .audience-stream-group summary { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 11px 14px; cursor: pointer; list-style: none; }
.hx-audience .audience-stream-group summary::-webkit-details-marker { display: none; }
.hx-audience .audience-stream-group summary > .line-icon { width: 14px; height: 14px; color: var(--text-3); transition: transform var(--dur-2) var(--ease); }
.hx-audience .audience-stream-group[open] summary > .line-icon { transform: rotate(180deg); }
.hx-audience .audience-stream-when { display: inline-flex; align-items: center; gap: 8px; color: var(--text); font-weight: 700; white-space: nowrap; }
.hx-audience .audience-stream-when .line-icon { width: 14px; height: 14px; color: var(--text-3); }
.hx-audience .audience-stream-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-2); font-size: 13px; }
.hx-audience .audience-stream-chips { display: inline-flex; gap: 6px; }
.hx-audience .audience-stream-group .table-wrap { padding: 0 10px 10px; }
.hx-audience .audience-history-row { cursor: pointer; }
.hx-audience .audience-history-hint { margin-top: 10px; }
@media (max-width: 820px) {
  .hx-audience .audience-funnel { grid-template-columns: 1fr; }
  .hx-audience .audience-funnel-arrow { transform: rotate(90deg); width: auto; height: 20px; }
}
/* Старое правило `.stream-activity-facts span` цепляет и вложенные span (логотип, сердечко) —
   сбрасываем им min-width/padding/border, иначе логотип раздувается до 108px. */
.hx-analytics .stream-activity-facts span span,
.hx-analytics .stream-chart-facts span span { min-width: 0; padding: 0; border-left: 0; display: inline-flex; }
.hx-analytics .stream-activity-facts small,
.hx-analytics .stream-chart-facts small { flex-wrap: nowrap; }
.hx-analytics .stream-activity-facts .fee-heart { width: 14px; min-width: 14px; max-width: 14px; margin-left: 0; }
.hx-analytics .donation-source-fact .integration-logo { display: grid; min-width: 28px; max-width: 28px; }
.hx-analytics .donation-source-fact .integration-logo img { width: 20px; height: 20px; }

/* ---- Календарь стримов: метрика — чипы с цветом серии, крупные ячейки, легенда ---- */
.hx-calendar { --heat: var(--cyan); }
.hx-calendar-best { gap: 8px; }
.hx-calendar-best .line-icon { width: 13px; height: 13px; color: var(--warning-soft); }
.hx-calendar-best b { font-size: 13px; }
.hx-metric-seg { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 16px; }
.hx-metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 28px;
  padding: 0 12px 0 9px;
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  background: transparent;
  font-family: var(--font-mono, ui-monospace);
  font-size: 9.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-2);
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), color var(--dur-1) var(--ease), transform var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease);
}
.hx-metric-chip .line-icon { width: 15px; height: 15px; color: var(--chip); opacity: .8; transition: opacity var(--dur-1) var(--ease); }
.hx-metric-chip:hover { border-color: var(--hx-hair-2); color: var(--text); transform: translateY(-1px); }
.hx-metric-chip.is-active {
  border-color: color-mix(in srgb, var(--chip) 55%, transparent);
  background: color-mix(in srgb, var(--chip) 16%, var(--well-2));
  color: var(--text);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--chip) 35%, transparent), 0 8px 22px color-mix(in srgb, var(--chip) 22%, transparent);
}
.hx-metric-chip.is-active .line-icon { opacity: 1; filter: drop-shadow(0 0 6px var(--chip)); }
.hx-calendar .tt-calendar-board { padding: 4px 0 0; }
.hx-calendar .stream-heatmap-weekdays span,
.hx-calendar .tt-calendar-months span { color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.hx-calendar .tt-calendar-heat { gap: 4px; }
.hx-calendar .heat-cell { width: 16px; height: 16px; border-radius: 2px; border: 1px solid rgb(var(--veil) / .04); transition: transform var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.hx-calendar .heat-cell.level-0 { background: rgb(var(--veil) / .05); }
.hx-calendar .heat-cell.level-1 { background: color-mix(in srgb, var(--heat) 28%, transparent); }
.hx-calendar .heat-cell.level-2 { background: color-mix(in srgb, var(--heat) 50%, transparent); }
.hx-calendar .heat-cell.level-3 { background: color-mix(in srgb, var(--heat) 75%, transparent); }
.hx-calendar .heat-cell.level-4 { background: var(--heat); box-shadow: 0 0 10px color-mix(in srgb, var(--heat) 55%, transparent); }
.hx-calendar .heat-cell.is-active { animation: hx-heat-in .5s var(--hx-ease) both; animation-delay: calc(var(--heat-i, 0) * 6ms); }
.hx-calendar .heat-cell.is-active:hover,
.hx-calendar .heat-cell.is-active:focus-visible { transform: scale(1.25); box-shadow: 0 0 0 2px rgb(var(--veil) / .25), 0 0 14px color-mix(in srgb, var(--heat) 70%, transparent); outline: none; z-index: 1; }
@keyframes hx-heat-in { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
.hx-heat-legend { display: flex; align-items: center; gap: 4px; margin-top: 14px; color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10px; letter-spacing: .06em; text-transform: uppercase; }
.hx-heat-legend i { width: 14px; height: 14px; border-radius: 4px; }
.hx-heat-legend i.level-0 { background: rgb(var(--veil) / .05); }
.hx-heat-legend i.level-1 { background: color-mix(in srgb, var(--heat) 28%, transparent); }
.hx-heat-legend i.level-2 { background: color-mix(in srgb, var(--heat) 50%, transparent); }
.hx-heat-legend i.level-3 { background: color-mix(in srgb, var(--heat) 75%, transparent); }
.hx-heat-legend i.level-4 { background: var(--heat); }
.hx-heat-legend span:first-child { margin-right: 4px; }
.hx-heat-legend span:nth-last-child(2) { margin-left: 4px; }
.hx-heat-legend small { margin-left: auto; text-transform: none; letter-spacing: 0; font-family: inherit; font-size: 12px; color: var(--text-3); }
@media (prefers-reduced-motion: reduce) { .hx-calendar .heat-cell.is-active { animation: none; } }
/* Ячейки календаря крупнее — сетка редко шире 12 недель, место есть. */
.hx-calendar .heat-cell { width: 18px; height: 18px; border-radius: 2px; }
.hx-calendar .tt-calendar-heat { gap: 5px; }
.hx-heat-legend i { width: 16px; height: 16px; border-radius: 2px; }


/* =========================================================================
   СЕРВИСЫ · хайтек-слой: Telegram (анонсы, пост), ВКонтакте, Сбор, Интеграции,
   Аккаунт, Фото-студия. Скоуп .hx-services; формы и хуки прежние.
   ========================================================================= */

.hx-services { gap: 18px; }
.hx-svc-hero.is-telegram { --hx-accent-a: #d99022; --hx-accent-b: #7fd4ff; }
.hx-svc-hero.is-vk { --hx-accent-a: #0077ff; --hx-accent-b: var(--info-soft); }
.hx-svc-hero.is-goal { --hx-accent-a: #ffc878; --hx-accent-b: #ffb86b; }
.hx-svc-hero.is-integrations { --hx-accent-a: var(--primary); --hx-accent-b: var(--cyan); }
.hx-svc-hero.is-account { --hx-accent-a: #ffa346; --hx-accent-b: var(--primary-soft); }
.hx-svc-hero .hx-blob.is-a { background: radial-gradient(circle, color-mix(in srgb, var(--hx-accent-a, var(--primary)) 55%, transparent), transparent 65%); }
.hx-svc-hero .hx-blob.is-b { background: radial-gradient(circle, color-mix(in srgb, var(--hx-accent-b, var(--cyan)) 40%, transparent), transparent 65%); }
.hx-svc-hero .hx-accent { background: linear-gradient(90deg, color-mix(in srgb, var(--hx-accent-a, var(--primary-soft)) 70%, var(--surface)), var(--hx-accent-b, var(--cyan-soft))); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hx-svc-hero .hx-actions .tg-tabs { margin: 0; border-color: var(--hx-hair-2); border-radius: 999px; background: var(--well-2); }
.hx-svc-hero .hx-actions .tg-tabs button { border-radius: 999px; padding: 7px 14px; }
.hx-svc-hero .hx-actions .tg-tabs button.is-active { background: rgba(255, 106, 43, .24); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .5); }
.hx-svc-hero .hx-lead a { color: var(--primary-soft); text-decoration: none; }
.hx-svc-hero .hx-lead a:hover { text-decoration: underline; }
.hx-special-side { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; align-items: center; }
.hx-special-side .hx-kpis { min-width: 200px; }
.hx-ring-label small { font-size: 14px; opacity: .7; }

/* ---- Общие карточки сервисов ---- */
.hx-services .card {
  border-color: var(--hx-hair);
  border-radius: 4px;
  background: linear-gradient(180deg, rgb(var(--veil) / .03), rgb(var(--veil) / 0) 60%), var(--surface);
  box-shadow: inset 0 1px 0 rgb(var(--veil) / .035), 0 12px 40px rgb(var(--shade) / calc(.25 * var(--shadow-k)));
}
.hx-services .tg-main > .card, .hx-services .compose-editor > .card { animation: hx-in .55s var(--hx-ease) both; }
.hx-services .tg-main > .card:nth-child(2), .hx-services .compose-editor > .card:nth-child(2) { animation-delay: 70ms; }
.hx-services .tg-main > .card:nth-child(3), .hx-services .compose-editor > .card:nth-child(3) { animation-delay: 140ms; }
.hx-services .tg-main > .card:nth-child(4), .hx-services .compose-editor > .card:nth-child(4) { animation-delay: 210ms; }
.hx-services .card-head h2, .hx-services .card-head h3 { letter-spacing: -.2px; }

/* ---- Telegram / VK: шаги, события, вкладки, превью ---- */
.hx-services .tg-step-head { gap: 12px; margin-bottom: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--hx-hair); }
.hx-services .tg-step-num { width: 30px; height: 30px; border-radius: 3px; border: 1px solid color-mix(in srgb, var(--primary) 34%, transparent); background: radial-gradient(circle at 30% 30%, rgba(255, 106, 43, .45), rgba(255, 106, 43, .1)); color: var(--primary-soft); font-family: var(--hx-mono); font-size: 12.5px; box-shadow: 0 0 14px rgba(255, 106, 43, .3); }
.hx-services .tg-step-head h2 { font-size: 16px; font-weight: 750; letter-spacing: -.2px; color: var(--text); }
.hx-services .tg-step-head p { color: var(--text-3); }
.hx-services .tg-event-card { border-color: var(--hx-hair); border-radius: 4px; background: var(--well-1); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.hx-services .tg-event-card:hover { border-color: var(--hx-hair-2); transform: translateY(-1px); }
.hx-services .tg-event-card:has(input:checked) { border-color: rgba(62, 207, 154, .35); background: rgba(62, 207, 154, .06); box-shadow: inset 0 0 0 1px rgba(62, 207, 154, .12); }
.hx-services .tg-event-switch { border-color: rgb(var(--veil) / .16); background: var(--well-3); }
.hx-services .tg-event-card input:checked ~ .tg-event-switch, .hx-services .tg-donor-amounts input:checked + .tg-event-switch { background: rgba(62, 207, 154, .35); border-color: rgba(62, 207, 154, .6); box-shadow: 0 0 10px rgba(62, 207, 154, .35); }
.hx-services .tg-stat-toggle { border-color: var(--hx-hair); background: var(--well-2); transition: border-color var(--dur-1) var(--ease), color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); }
.hx-services .tg-stat-toggle:has(input:checked), .hx-services .tg-stat-toggle.is-on { border-color: rgba(255, 106, 43, .5); background: rgba(255, 106, 43, .14); color: var(--text); }
.hx-services .tg-tabs { border-color: var(--hx-hair-2); border-radius: 999px; background: var(--well-2); }
.hx-services .tg-tabs button { border-radius: 999px; }
.hx-services .tg-tabs button.is-active { background: rgba(255, 106, 43, .24); color: var(--text); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .5); }
.hx-services .tg-block-editor, .hx-services .tg-top-donors { border-color: var(--hx-hair); border-radius: 4px; background: var(--well-1); }
.hx-services .template-vars button, .hx-services .tg-var-button { border-radius: 999px; border-color: var(--hx-hair-2); background: var(--well-2); font-family: var(--hx-mono); font-size: 11.5px; transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), transform var(--dur-1) var(--ease); }
.hx-services .template-vars button:hover, .hx-services .tg-var-button:hover { border-color: rgba(255, 106, 43, .5); background: rgba(255, 106, 43, .14); transform: translateY(-1px); }
.hx-services .tg-bot-help { border-color: var(--hx-hair); border-radius: 3px; background: var(--well-1); }
.hx-services .tg-field-status.is-ok { color: var(--success-soft); }
.hx-services .tg-actions { padding: 14px 16px; border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--well-1); }
.hx-services .tg-actions .button:not(.secondary):not(.danger):not(.ghost-button) { box-shadow: 0 10px 30px rgba(255, 106, 43, .3); }
.hx-services .unsaved-chip { border-radius: 999px; }
/* ---- Анонсы: выключатель, плашка паузы, защита от перезапусков (18.09.2026) ---- */
.hx-services .announce-master { margin-top: 14px; }
.hx-services .announce-master:not(:has(input:checked)) { border-color: rgba(240, 177, 83, .28); background: rgba(240, 177, 83, .04); }
.hx-services .announce-master:has(input:disabled) { cursor: default; opacity: .6; }
.hx-services .announce-pause { border-radius: 4px; }
.hx-services .announce-pause strong { color: var(--warning-soft, var(--text)); }
.announce-pause-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px; }
.announce-pause-actions .button .line-icon { width: 14px; height: 14px; }
.hx-services .tg-guard { display: grid; gap: 12px; margin-top: 12px; padding: 14px; border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--well-1); transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); }
.hx-services .tg-guard.is-on { border-color: rgba(62, 207, 154, .3); box-shadow: inset 0 0 0 1px rgba(62, 207, 154, .08); }
.hx-services .tg-guard-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; transition: opacity var(--dur-1) var(--ease); }
.hx-services .tg-guard:not(.is-on) .tg-guard-fields { opacity: .55; }
.hx-services .tg-guard-field { min-width: 0; }
.hx-services .tg-guard-input { display: flex; align-items: center; gap: 8px; }
.hx-services .tg-guard-input .input { max-width: 96px; font-family: var(--hx-mono); font-variant-numeric: tabular-nums; }
.hx-services .tg-guard-input > span { color: var(--hx-ink-3, var(--text-3)); font-family: var(--hx-mono); font-size: 12px; letter-spacing: .04em; }
.hx-services .tg-guard-field .field-hint { display: block; margin-top: 5px; line-height: 1.4; }
.hx-services .tg-guard-field .field-error[hidden], .hx-services .tg-guard-series[hidden] { display: none; }
.hx-services .tg-guard-series { display: grid; gap: 4px; margin: 0; padding: 10px 12px; border-left: 2px solid var(--primary); border-radius: 2px; background: rgb(var(--veil) / .03); color: var(--text-2); font-size: 12.5px; line-height: 1.45; }
.hx-services .tg-guard-series span:first-child { color: var(--text); font-family: var(--hx-mono); font-size: 12px; }
.hx-services .tg-actions-hint { flex-basis: 100%; margin: 0; }
@media (max-width: 640px) {
  .hx-services .tg-guard-fields { grid-template-columns: 1fr; }
  .announce-pause-actions .button { flex: 1 1 auto; }
}
/* Превью Telegram/VK — «телефон»: стеклянная рамка, шапка с точками. */
.hx-services .telegram-preview { border: 1px solid var(--hx-hair-2); border-radius: 2px; background: linear-gradient(180deg, rgb(var(--veil) / .03), rgb(var(--veil) / 0) 40%), var(--bg); box-shadow: inset 0 1px 0 rgb(var(--veil) / .05), 0 24px 60px rgb(var(--shade) / calc(.4 * var(--shadow-k))); overflow: hidden; }
.hx-services .telegram-preview-top { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--hx-hair); background: rgb(var(--veil) / .02); }
.hx-services .telegram-preview-top > span:first-child { width: 8px; height: 8px; border-radius: 50%; background: var(--tg-accent, #d99022); box-shadow: 0 0 10px var(--tg-accent, #d99022); animation: hx-pulse 2.2s ease-out infinite; }
.hx-services .telegram-preview-top strong { font-family: var(--hx-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--hx-ink-3); }
.hx-services .telegram-chat { background: radial-gradient(120% 80% at 50% 0%, rgba(217, 144, 34, .08), transparent 60%), var(--bg); }
.hx-services .telegram-post { animation: hx-in .5s var(--hx-ease) both; }
/* Пост в Telegram — редактор */
.hx-services .compose-dropzone { border: 1px dashed var(--hx-hair-2); border-radius: 4px; background: var(--well-1); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-2) var(--ease); }
.hx-services .compose-dropzone:hover, .hx-services .compose-dropzone.is-dragover { border-color: rgba(217, 144, 34, .6); background: rgba(217, 144, 34, .08); box-shadow: 0 0 0 4px rgba(217, 144, 34, .12); }
.hx-services .compose-dropzone.has-image { border-style: solid; }
.hx-services .compose-send-card { border-color: rgba(217, 144, 34, .35); background: radial-gradient(600px 200px at 0% 0%, rgba(217, 144, 34, .14), transparent 70%), linear-gradient(180deg, rgb(var(--veil) / .03), rgb(var(--veil) / 0) 60%), var(--surface); }
.hx-services .compose-send-button { background: linear-gradient(135deg, #d99022, #e49a2a); box-shadow: 0 10px 30px rgba(217, 144, 34, .35); }
.hx-services .compose-send-button:hover:not(:disabled) { filter: brightness(1.08); }
.hx-services .compose-history-list li { border-color: var(--hx-hair); border-radius: 3px; transition: background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease); }
.hx-services .compose-history-list li:hover { background: rgb(var(--veil) / .03); border-color: var(--hx-hair-2); }
.hx-services .compose-history-empty-ico { box-shadow: 0 0 16px rgba(217, 144, 34, .25); }

/* ---- Интеграции ---- */
.hx-services .integrations-group-title { color: var(--text); font-size: 16px; font-weight: 750; letter-spacing: -.2px; }
.hx-services .integrations-group-head { padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--hx-hair); }
.hx-services .integrations-group-head small { color: var(--hx-ink-3); }
.hx-services .integration-tile { position: relative; overflow: hidden; padding: 18px; transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.hx-services .integration-tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; background: radial-gradient(120% 80% at 0% 0%, rgba(255, 106, 43, .08), transparent 60%); opacity: 0; transition: opacity var(--dur-2) var(--ease); }
.hx-services .integration-tile:hover { transform: translateY(-3px); border-color: var(--hx-hair-2); box-shadow: 0 18px 44px rgb(var(--shade) / calc(.35 * var(--shadow-k))); }
.hx-services .integration-tile:hover::before { opacity: 1; }
.hx-services .integration-tile:has(.status-chip.is-ok) { border-color: rgba(62, 207, 154, .25); }
.hx-services .integration-tile:has(.status-chip.is-warn) { border-color: rgba(240, 177, 83, .35); box-shadow: inset 0 0 0 1px rgba(240, 177, 83, .12), 0 12px 40px rgb(var(--shade) / calc(.25 * var(--shadow-k))); }
.hx-services .integration-tile-head .integration-logo { width: 46px; height: 46px; border-radius: 4px; box-shadow: 0 0 18px rgb(var(--shade) / calc(.35 * var(--shadow-k))), inset 0 0 0 1px rgb(var(--veil) / .06); }
.hx-services .integration-tile-head h2 { font-size: 16px; font-weight: 750; letter-spacing: -.2px; color: var(--text); }
.hx-services .integration-tile-head p { color: var(--text-3); font-size: 12.5px; }
.hx-services .integration-tile-head .status-chip { margin-left: auto; }
.hx-services .integration-meta { border-color: var(--hx-hair); border-radius: 3px; background: var(--well-1); }
.hx-services .integration-meta dt { color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.hx-services .integration-problem { border-radius: 3px; }
.hx-services .integration-actions .button:not(.secondary):not(.danger):not(.ghost-button) { box-shadow: 0 10px 26px rgba(255, 106, 43, .3); }

/* ---- Сбор ---- */
.hx-services .special-hub-card > .card-head { padding-bottom: 14px; border-bottom: 1px solid var(--hx-hair); }
.hx-services .special-goal-active, .hx-services .special-goal-empty { border-color: rgba(255, 200, 120, .3); border-radius: 4px; background: radial-gradient(120% 90% at 8% 0%, rgba(255, 200, 120, .14), transparent 60%), var(--well-1); }
.hx-services .special-goal-active-bar { height: 12px; background: rgb(var(--veil) / .06); }
.hx-services .special-goal-active-bar i { background: linear-gradient(90deg, #ffc878, #ffb86b); box-shadow: 0 0 14px rgba(255, 200, 120, .5); border-radius: 999px; animation: hx-bar-grow 1s var(--hx-ease) both; transform-origin: left center; }
@keyframes hx-bar-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.hx-services .special-goal-stage { border: 1px solid var(--hx-hair); border-radius: 4px; background: radial-gradient(rgb(var(--veil) / .05) .7px, transparent .8px) 0 0 / 18px 18px, var(--bg); padding: 14px 16px 18px; }
.hx-services .special-skin-tile { border-color: var(--hx-hair); border-radius: 4px; background: var(--well-1); transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); }
.hx-services .special-skin-tile:hover { transform: translateY(-3px); border-color: var(--hx-hair-2); box-shadow: 0 18px 40px rgb(var(--shade) / calc(.35 * var(--shadow-k))); }
.hx-services .special-skin-tile.is-active { border-color: rgba(255, 200, 120, .55); box-shadow: inset 0 0 0 1px rgba(255, 200, 120, .35), 0 12px 36px rgba(255, 200, 120, .18); }
.hx-services .special-skin-tile.is-soon { border-style: dashed; opacity: .8; }
.hx-services .special-size-card, .hx-services .special-clear-plate { border-color: var(--hx-hair); border-radius: 3px; background: var(--well-1); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); }
.hx-services .special-size-card:hover, .hx-services .special-clear-plate:hover { border-color: var(--hx-hair-2); }
.hx-services .special-size-card.is-active { border-color: rgba(255, 106, 43, .55); background: rgba(255, 106, 43, .14); box-shadow: inset 0 0 0 1px rgba(255, 106, 43, .3); }
.hx-services .special-clear-plate:has(input:checked) { border-color: rgba(62, 207, 154, .35); background: rgba(62, 207, 154, .06); }
.hx-services .special-goal-list li, .hx-services .special-goal-history li { border-color: var(--hx-hair); border-radius: 3px; background: var(--well-1); transition: background var(--dur-1) var(--ease); }
.hx-services .special-goal-list li:hover { background: rgb(var(--veil) / .03); }
.hx-services .special-goal-list li.is-on-air { border-color: rgba(255, 200, 120, .4); box-shadow: inset 3px 0 0 rgba(255, 200, 120, .7); }
.hx-services .special-goal-form { border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--well-1); }
.hx-services .special-goal-link .scene-map { margin-top: 12px; }
.hx-services .special-skin-credit-chip { border-radius: 999px; }

/* ---- Аккаунт ---- */
.hx-services .account-row { border-top-color: var(--hx-hair); padding: 14px 0; }
.hx-services .account-row:first-child { border-top: 0; }
.hx-services .account-row strong { color: var(--text); font-weight: 700; }
.hx-services .account-row p { color: var(--text-2); }
.hx-services .danger-zone { border-color: rgba(229, 72, 77, .3); background: radial-gradient(600px 200px at 0% 0%, rgba(229, 72, 77, .1), transparent 70%), linear-gradient(180deg, rgb(var(--veil) / .03), rgb(var(--veil) / 0) 60%), var(--surface); }
.hx-services .danger-zone .card-icon { color: var(--danger-soft); box-shadow: 0 0 14px rgba(229, 72, 77, .25); }

@media (max-width: 900px) {
  .hx-special-side { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .hx-services .tg-main > .card, .hx-services .compose-editor > .card, .hx-services .telegram-post, .hx-services .telegram-preview-top > span:first-child, .hx-services .special-goal-active-bar i { animation: none !important; }
}
/* Заголовки групп интеграций — обычный регистр; дробь в кольце — в одну строку. */
.hx-services .integrations-group-title { text-transform: none; letter-spacing: -.2px; }
.hx-ring-label small, .hx-ring b small { display: inline; font-size: 13px; opacity: .7; }
/* Кольцо в герое сервисов: крупнее, число внутри, подпись под кольцом. */
.hx-special-side { gap: 22px; }
.hx-special-side .hx-ring { width: 108px; height: 108px; }
.hx-special-side .hx-ring-copy b { font-size: 26px; }
.hx-special-side .hx-ring-copy small { font-size: 10px; }
.hx-ring-wrap { display: grid; justify-items: center; gap: 8px; }
.hx-ring-sub { color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
/* Герой сервисов: KPI-плитки + ровная полоса прогресса (без колец). */
.hx-svc-side { display: grid; gap: 10px; min-width: 340px; }
.hx-kpis-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hx-meter-wrap { display: grid; gap: 8px; padding: 12px 14px; border: 1px solid var(--hx-hair); border-radius: 4px; background: var(--well-2); }
.hx-meter-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; color: var(--hx-ink-3); font-family: var(--hx-mono); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.hx-meter-head b { color: var(--text); font-family: inherit; font-size: 14px; font-weight: 800; letter-spacing: -.2px; text-transform: none; font-variant-numeric: tabular-nums; }
.hx-meter { height: 10px; border-radius: 999px; background: rgb(var(--veil) / .06); overflow: hidden; }
.hx-meter i { display: block; height: 100%; width: var(--p, 0%); border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--cyan)); box-shadow: 0 0 14px rgba(255, 106, 43, .5); transform-origin: left center; animation: hx-bar-grow .9s var(--hx-ease) both; }
.hx-meter-wrap.is-goal .hx-meter i { background: linear-gradient(90deg, #ffc878, #ffb86b); box-shadow: 0 0 14px rgba(255, 200, 120, .5); }
@media (max-width: 900px) { .hx-svc-side { min-width: 0; } .hx-kpis-3 { grid-template-columns: 1fr; } }
/* ---- Telegram · пост: карточки редактора ---- */
.hx-tg-post .hx-compose-card { gap: 14px; }
.hx-tg-post .hx-compose-card .hx-card-head { margin-bottom: 0; }
.hx-tg-post .hx-compose-tools .format-button { min-width: 36px; min-height: 36px; border-radius: 3px; border: 1px solid var(--hx-hair-2); background: var(--well-2); color: var(--text); font-weight: 800; }
.hx-tg-post .hx-compose-tools .format-button:hover { border-color: rgba(217, 144, 34, .6); background: rgba(217, 144, 34, .14); }
.hx-tg-post .hx-dropzone { min-height: 180px; gap: 12px; border-radius: 4px; }
.hx-tg-post .hx-dropzone p { margin: 0; display: grid; gap: 3px; text-align: center; }
.hx-tg-post .hx-dropzone p strong { color: var(--text); font-size: 14px; }
.hx-tg-post .hx-dropzone p span { color: var(--text-3); font-size: 12.5px; }
.hx-dropzone-ico { display: grid; place-items: center; width: 52px; height: 52px; border: 1px dashed rgba(217, 144, 34, .5); border-radius: 4px; color: var(--info-soft); background: rgba(217, 144, 34, .1); box-shadow: 0 0 18px rgba(217, 144, 34, .2); }
.hx-dropzone-ico .line-icon { width: 22px; height: 22px; }
.hx-tg-post .compose-dropzone.has-image { min-height: 0; }
.hx-tg-post .compose-dropzone-actions { background: var(--well-3); }
.hx-compose-send .compose-send-row { align-items: center; }
.hx-compose-send-ico { display: grid; place-items: center; flex: 0 0 auto; width: 44px; height: 44px; border-radius: 4px; border: 1px solid var(--hx-hair-2); background: var(--well-2); color: var(--text-3); }
.hx-compose-send-ico.is-ready { color: var(--info-soft); border-color: color-mix(in srgb, var(--info) 34%, transparent); background: rgba(217, 144, 34, .12); box-shadow: 0 0 18px rgba(217, 144, 34, .25); animation: hx-pulse 2.4s ease-out infinite; }
.hx-compose-send-ico .line-icon { width: 20px; height: 20px; }
.hx-tg-post .hx-empty { margin: 0; }
/* Третий блок «Поддержка за период» — сетка сводки больше не прибита к двум колонкам. */
.hx-analytics .tt-stat-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* Ленты людей на странице эфира (08.09.2026): у строк без ранга (.is-feed —
   фолловеры, рейдеры, подписчики) нет колонки под номер, а правило выше
   давало всем строкам три колонки: аватар с именем сжимался в 30 px, и ник
   пропадал (рейд veoshang показывался пустой строкой). */
.hx-analytics .chat-top-item.is-feed,
.panel-analytics-dialog .chat-top-item.is-feed { grid-template-columns: minmax(0, 1fr) auto; }

/* Сервис YouTube: красная марка канала в герое раздела. */
.hx-svc-hero.is-youtube { --hx-accent-a: #ff0033; --hx-accent-b: var(--warning-soft); }