/* =================================================================
   Анимации панели: плавное появление страниц и карточек со ступенчатой задержкой,
   пружинные переключатели, раскрытие списков, заполнение шкал. Всё короткое (до ~0.7 с)
   и отключается при prefers-reduced-motion (общее правило в panel.css).
   ================================================================= */
:root { --ease-out: cubic-bezier(.16, 1, .3, 1); --spring: cubic-bezier(.34, 1.56, .64, 1); }
@keyframes m-rise { from { opacity: 0; transform: translateY(14px); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-fade-out { to { opacity: 0; } }
@keyframes m-sink { to { opacity: 0; transform: translateY(12px) scale(.985); } }
@keyframes m-drop { from { opacity: 0; transform: translateY(-6px) scale(.97); } }
@keyframes m-toast { from { opacity: 0; transform: translateX(24px) scale(.97); } }
@keyframes m-meter { from { clip-path: inset(0 100% 0 0 round 8px); } to { clip-path: inset(0 0 0 0 round 8px); } }
@keyframes m-pop { 0% { transform: scale(.6); opacity: 0; } 70% { transform: scale(1.08); } 100% { transform: scale(1); opacity: 1; } }

/* Страницы консоли: блоки выезжают по очереди */
.is-console .content { animation: none; }
.is-console .content > *, .is-console .tab-pane:not([hidden]) > * { animation: m-rise .55s var(--ease-out) both; }
.is-console .content > :nth-child(1) { animation-delay: 0ms; }
.is-console .content > :nth-child(2) { animation-delay: 60ms; }
.is-console .content > :nth-child(3) { animation-delay: 110ms; }
.is-console .content > :nth-child(4) { animation-delay: 160ms; }
.is-console .content > :nth-child(5) { animation-delay: 205ms; }
.is-console .content > :nth-child(6) { animation-delay: 245ms; }
.is-console .content > :nth-child(n+7) { animation-delay: 280ms; }
.is-console .tab-pane:not([hidden]) > :nth-child(2) { animation-delay: 50ms; }
.is-console .tab-pane:not([hidden]) > :nth-child(3) { animation-delay: 100ms; }
.is-console .tab-pane:not([hidden]) > :nth-child(n+4) { animation-delay: 140ms; }
.is-console .content > .stat-cards { animation: none; }
.is-console .content > .tab-pane { animation: none; }   /* сама вкладка не выезжает: выезжают её блоки (иначе вкладка и блок внутри «играли» бы появление вдвойне) */
.stat-card { animation: m-rise .6s var(--ease-out) both; }
.stat-card:nth-child(1) { animation-delay: 120ms; }
.stat-card:nth-child(2) { animation-delay: 180ms; }
.stat-card:nth-child(3) { animation-delay: 240ms; }
.stat-card:nth-child(4) { animation-delay: 300ms; }
.stat-card-icon { animation: m-pop .6s var(--spring) both; animation-delay: 200ms; }
.catalog-group { animation: m-rise .5s var(--ease-out) both; }
.catalog-group:nth-child(2) { animation-delay: 50ms; }
.catalog-group:nth-child(3) { animation-delay: 90ms; }
.catalog-group:nth-child(n+4) { animation-delay: 130ms; }
.server-card:nth-child(2) { animation-delay: 50ms; }
.server-card:nth-child(3) { animation-delay: 100ms; }
.server-card:nth-child(4) { animation-delay: 150ms; }
.server-card:nth-child(n+5) { animation-delay: 200ms; }
.todo, .notif-row, .cmd-row, .feature-row { animation: m-fade .5s ease both; }

/* Шкалы наполняются */
.meter span, .hbar-fill { animation: m-meter .9s var(--ease-out) .25s both; }

/* Переключатели: пружинный ползунок, «растягивание» при нажатии */
.switch span::after { transition: transform .32s var(--spring), width .2s ease; }
.switch:active span::after { width: 24px; }
.switch:active input:checked + span::after { transform: translateX(14px); }
.switch span { transition: background-color .25s ease, box-shadow .25s ease; }

/* Меню и списки */
.nav-item > .icon:first-child, .nav-item .emoji { transition: color .2s ease, transform .25s var(--spring); }
.nav-item:hover > .icon:first-child, .nav-item:hover .emoji { transform: scale(1.12); }
.nav-item { transition: background-color .18s ease, color .18s ease; }
.switcher-btn .chev { transition: transform .28s var(--ease-out); }
.switcher-btn[aria-expanded="true"] .chev { transform: rotate(180deg); }
.switcher-list:not([hidden]) { animation: m-drop .2s var(--ease-out) both; transform-origin: top center; }
.toast { animation: m-toast .4s var(--ease-out) both; }
.modal { animation: m-rise .35s var(--ease-out) both; }
.modal-backdrop { animation: m-fade .25s ease both; }
.modal-backdrop.closing { pointer-events: none; animation: m-fade-out .24s ease both; }
.modal-backdrop.closing .modal { animation: m-sink .24s var(--ease-out) both; }
.notice { animation: m-fade .4s ease both; }
.btn .icon { transition: transform .25s var(--spring); }
.btn:hover:not(:disabled) .icon { transform: translateX(1px) scale(1.08); }
.feature-row, .todo, .notif-row, .cmd-row { transition: background-color .2s ease; }

/* Публичные страницы: появление при прокрутке (классы ставит motion.js) */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .75s var(--ease-out), transform .75s var(--ease-out); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
.hero-in > div:first-child { animation: none !important; }
.hero-in > div:first-child > * { animation: m-rise .7s var(--ease-out) both; }
.hero-in > div:first-child > :nth-child(2) { animation-delay: 70ms; }
.hero-in > div:first-child > :nth-child(3) { animation-delay: 130ms; }
.hero-in > div:first-child > :nth-child(4) { animation-delay: 190ms; }
.hero-in > div:first-child > :nth-child(5) { animation-delay: 250ms; }
.hero-in > div:first-child > :nth-child(6) { animation-delay: 310ms; }

/* ---------- галочки (чекбоксы): своя рамка, заливка и «рисующаяся» галочка ---------- */
input[type="checkbox"]:not(.switch input) {
  -webkit-appearance: none; appearance: none; position: relative; flex: none; margin: 0; cursor: pointer;
  width: 20px; height: 20px; border-radius: 6px; border: 1.5px solid var(--border-strong); background: var(--surface);
  transition: background-color .18s ease, border-color .18s ease, box-shadow .2s ease, transform .3s var(--spring);
}
input[type="checkbox"]:not(.switch input)::after {
  content: ""; position: absolute; inset: 0; transform: scale(.55); clip-path: inset(0 100% 0 0);
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5.5 12.5 4.5 4.5 8.5-9.5'/%3E%3C/svg%3E") center / 76% no-repeat;
  transition: clip-path .26s var(--ease-out) .04s, transform .34s var(--spring);
}
input[type="checkbox"]:not(.switch input):hover:not(:disabled) { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 14%, transparent); }
input[type="checkbox"]:not(.switch input):active:not(:disabled) { transform: scale(.84); }
input[type="checkbox"]:not(.switch input):checked { background: var(--brand); border-color: var(--brand); }
input[type="checkbox"]:not(.switch input):checked::after { transform: none; clip-path: inset(0 0 0 0); }
input[type="checkbox"]:not(.switch input):focus-visible { outline: none; box-shadow: var(--focus); }
input[type="checkbox"]:not(.switch input):disabled { opacity: .5; cursor: not-allowed; }
.check { transition: color .15s ease; }
.check:hover label { color: var(--text); }


/* ---------- мастер первой настройки: красивое появление и отклик карточек ---------- */
.wizard-steps li { position: relative; }
.wizard-steps li:not(:last-child)::after { content: ""; width: 26px; height: 2px; margin-left: 8px; border-radius: 2px; background: var(--border-strong); transition: background-color .4s ease; }
.wizard-steps li.done:not(:last-child)::after { background: var(--ok); }
.choice-grid { gap: 14px; }
.choice { padding: 18px; }
.choice-text { padding-right: 26px; }
.choice-emoji { transition: transform .35s var(--spring), background-color .2s ease; }
.choice-mark { transition: background-color .2s ease, border-color .2s ease, transform .35s var(--spring); }
.choice-mark .icon { transform: scale(0) rotate(-30deg); transition: transform .4s var(--spring); }
.choice:has(input:checked) .choice-mark .icon { transform: none; }
.choice:has(input:checked) .choice-emoji { transform: scale(1.08) rotate(-5deg); }
@media (prefers-reduced-motion: no-preference) {
  .wizard-body > * { animation: wz-rise .5s var(--ease-out) both; }
  .wizard-body > :nth-child(2) { animation-delay: .06s; }
  .wizard-body > :nth-child(3) { animation-delay: .12s; }
  .wizard-body > :nth-child(4) { animation-delay: .18s; }
  .wizard-body > :nth-child(5) { animation-delay: .24s; }
  @keyframes wz-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
  .choice-grid { animation: none; }
  .choice-grid .choice { animation: wz-card .55s var(--spring) both; animation-delay: calc(var(--i, 0) * 55ms + 150ms); }
  @keyframes wz-card { from { opacity: 0; transform: translateY(18px) scale(.94); } to { opacity: 1; transform: none; } }
  .choice { transition: border-color .18s ease, box-shadow .25s ease, background-color .25s ease, transform .3s var(--spring); }
  .choice:hover { transform: translateY(-3px); }
  .choice:active { transform: scale(.975); }
  .choice.pop { animation: wz-select .45s var(--spring); }
  @keyframes wz-select { 0% { transform: scale(.96); } 100% { transform: none; } }
  /* кольцо вокруг текущего шага расходится масштабом и прозрачностью (видеокарта), а не тенью: тень перерисовывала страницу каждый кадр */
  .wizard-steps li.current .n { position: relative; }
  .wizard-steps li.current .n::after { content: ""; position: absolute; inset: 0; border-radius: inherit; border: 2px solid color-mix(in srgb, var(--brand) 55%, transparent); pointer-events: none; animation: wz-ring 2.4s ease-out infinite; }
  @keyframes wz-ring { 0% { transform: scale(1); opacity: .9; } 70%, 100% { transform: scale(1.7); opacity: 0; } }
  .wizard-steps li.done .n .icon { animation: pick-tick .5s var(--spring) both; }
  .wizard-count.bump { animation: wz-bump .35s var(--spring); }
  @keyframes wz-bump { 0% { transform: scale(.9); opacity: .5; } 100% { transform: none; opacity: 1; } }
  .wizard-foot .btn.primary .icon { transition: transform .25s var(--spring); }
  .wizard-foot .btn.primary:hover:not(:disabled) .icon { transform: translateX(4px); }
}


/* ---------- мастер: итоговый экран ---------- */
.wz-done-head { display: grid; gap: 4px; }
.wz-done-badge { width: 52px; height: 52px; margin-bottom: 10px; display: grid; place-items: center; border-radius: 50%; background: var(--ok-soft); color: var(--ok); box-shadow: 0 0 0 8px color-mix(in srgb, var(--ok) 10%, transparent); }
.wz-done-badge .icon { width: 26px; height: 26px; stroke-width: 2.5; }
.wz-cta { display: grid; gap: 14px; justify-items: start; }
.wizard .wz-open { min-height: 48px; padding: 0 26px; font-size: 1rem; }
.wz-enabled { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.wz-chip { padding: 3px 10px; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--border); color: var(--brand-text); font-size: 0.82rem; font-weight: 500; }
.todo-groups { display: grid; gap: 12px; padding-top: 22px; border-top: 1px solid var(--border); }
.todo-groups-title { margin: 0; font-size: 1.05rem; }
.todo-group { padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); display: grid; gap: 8px; }
.todo-group-head { display: flex; align-items: center; gap: 12px; }
.todo-group-head .todo-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 10px; background: var(--brand-50); color: var(--brand-text); flex: none; }
.todo-group-head .todo-icon .icon { width: 18px; height: 18px; }
.todo-group-count { margin-left: auto; color: var(--text-3); font-size: 0.82rem; }
.todo-group-line { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 8px 0 0 46px; color: var(--text-2); font-size: 0.9rem; }
.todo-group-line + .todo-group-line { border-top: 1px dashed var(--border); margin-top: 2px; }
.todo-more { display: grid; gap: 12px; }
.todo-more[hidden] { display: none; }
.todo-toggle { justify-self: start; }
.todo-toggle .icon { transition: transform .3s var(--spring); }
.todo-toggle.open .icon { transform: rotate(180deg); }
@media (max-width: 640px) { .todo-group-line { flex-wrap: wrap; padding-left: 0; } }
@media (prefers-reduced-motion: no-preference) {
  .wz-done-badge { animation: wz-badge .7s var(--spring) both; }
  @keyframes wz-badge { from { transform: scale(.3) rotate(-40deg); opacity: 0; } to { transform: none; opacity: 1; } }
  .wz-done-badge .icon { stroke-dasharray: 30; animation: wz-draw .5s ease-out .35s both; }
  @keyframes wz-draw { from { stroke-dashoffset: 30; } to { stroke-dashoffset: 0; } }
  .wz-open { animation: wz-pulse 2.6s ease-out 1.2s 3; }
  @keyframes wz-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); } 70%, 100% { box-shadow: 0 0 0 14px transparent; } }
  .wz-chip { animation: wz-card .5s var(--spring) both; }
  .wz-enabled .wz-chip:nth-child(2) { animation-delay: .25s; } .wz-enabled .wz-chip:nth-child(3) { animation-delay: .3s; }
  .wz-enabled .wz-chip:nth-child(4) { animation-delay: .35s; } .wz-enabled .wz-chip:nth-child(5) { animation-delay: .4s; }
  .todo-group { animation: wz-card .55s var(--spring) both; }
  .todo-groups > .todo-group:nth-of-type(1) { animation-delay: .3s; } .todo-groups > .todo-group:nth-of-type(2) { animation-delay: .38s; } .todo-groups > .todo-group:nth-of-type(3) { animation-delay: .46s; }
  .todo-more:not([hidden]) .todo-group { animation: wz-card .45s var(--spring) both; }
}


/* ---------- «Главная»: готовность кольцом, плитки действий, группы шагов ---------- */
@property --p { syntax: "<number>"; inherits: false; initial-value: 0; }
.todo-groups { display: grid; gap: 12px; }
.todo-group.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.todo-group.warn .todo-icon { background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.ov-readiness { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ov-readiness-text { display: grid; gap: 2px; }
.ov-readiness-text b { font-weight: 600; }
.ov-readiness-text span { color: var(--text-3); font-size: 0.84rem; }
.ov-ring { --p: 0; position: relative; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: conic-gradient(var(--brand) calc(var(--p) * 1%), var(--surface-3) 0); transition: --p 1.1s var(--ease-out); }
.ov-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: var(--surface); }
.ov-ring b { position: relative; font: 800 1.05rem/1 var(--font-head); font-variant-numeric: tabular-nums; }
.ov-stats .stat-card.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); text-decoration: none; color: inherit; cursor: pointer; }
.ov-stats .stat-card.warn .stat-card-icon { background: var(--warn); }
.ov-quick { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; margin-top: 14px; }
.ov-tile { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color .18s ease, transform .3s var(--spring), background-color .18s ease; }
.ov-tile:hover { border-color: var(--brand); transform: translateY(-3px); background: var(--brand-50); }
.ov-tile-icon { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--brand-50); color: var(--brand-text); transition: transform .35s var(--spring), background-color .2s ease, color .2s ease; }
.ov-tile-icon .icon { width: 20px; height: 20px; }
.ov-tile:hover .ov-tile-icon { transform: scale(1.1) rotate(-6deg); background: var(--brand); color: var(--on-brand); }
.ov-tile-text { display: grid; gap: 2px; min-width: 0; flex: 1; }
.ov-tile-text b { font-weight: 600; }
.ov-tile-text span { color: var(--text-3); font-size: 0.82rem; }
.ov-tile-go { width: 16px; height: 16px; color: var(--text-3); transition: transform .25s var(--spring), color .2s ease; }
.ov-tile:hover .ov-tile-go { transform: translateX(4px); color: var(--brand-text); }
@media (max-width: 760px) { .ov-readiness { margin-left: 0; width: 100%; } }
@media (prefers-reduced-motion: no-preference) {
  .ov-page > * { animation: wz-rise .5s var(--ease-out) both; }
  .ov-page > :nth-child(2) { animation-delay: .05s; } .ov-page > :nth-child(3) { animation-delay: .1s; }
  .ov-page > :nth-child(4) { animation-delay: .15s; } .ov-page > :nth-child(5) { animation-delay: .2s; }
  .ov-quick .ov-tile { animation: wz-card .5s var(--spring) both; }
  .ov-quick .ov-tile:nth-child(2) { animation-delay: .06s; } .ov-quick .ov-tile:nth-child(3) { animation-delay: .12s; }
  .ov-quick .ov-tile:nth-child(4) { animation-delay: .18s; } .ov-quick .ov-tile:nth-child(5) { animation-delay: .24s; }
}


/* ---------- «Главная» — сводка: следующий шаг, события и быстрые действия ---------- */
.support-banner.compact { display: flex; align-items: center; gap: 14px; padding: 12px 16px; margin-bottom: 12px; }
.support-banner.compact .support-art { position: static; width: 34px; height: 34px; flex: none; opacity: 1; }
.support-banner.compact .support-art .icon { width: 26px; height: 26px; }
.support-banner.compact .support-body { flex: 1; min-width: 0; display: grid; gap: 2px; }
.support-banner.compact .support-body span { color: var(--text-2); font-size: 0.86rem; }
.support-banner.compact .support-actions { display: flex; gap: 8px; flex: none; }
@media (max-width: 760px) { .support-banner.compact { flex-wrap: wrap; } }
.ov-warn { display: flex; align-items: center; gap: 12px; padding: 12px 16px; margin-bottom: 12px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border)); background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.ov-warn > .icon { width: 20px; height: 20px; color: var(--warn); flex: none; }
.ov-warn > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ov-warn span { color: var(--text-2); font-size: 0.88rem; }
.ov-next { margin-bottom: 18px; padding: 20px 22px; border-radius: var(--r-lg); border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border)); background: linear-gradient(135deg, color-mix(in srgb, var(--brand) 12%, var(--surface)), var(--surface) 70%); display: grid; gap: 14px; }
.ov-next-main { display: grid; gap: 14px; }
.ov-next-badge { display: inline-flex; align-items: center; gap: 6px; width: fit-content; padding: 3px 11px; border-radius: 999px; background: var(--brand); color: var(--on-brand); font-size: 0.78rem; font-weight: 600; }
.ov-next-badge .icon { width: 14px; height: 14px; }
.ov-next-title { display: flex; align-items: flex-start; gap: 14px; }
.ov-next-title .todo-icon { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 14px; background: var(--surface); color: var(--brand-text); flex: none; }
.ov-next-title .todo-icon .icon { width: 22px; height: 22px; }
.ov-next-title b { font-size: 1.15rem; }
.ov-next-title p { margin: 4px 0 0; color: var(--text-2); max-width: 70ch; }
.ov-next-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ov-next-actions .btn.primary { min-height: 44px; padding: 0 22px; }
.ov-next-actions .btn .icon { transition: transform .3s var(--spring); }
.ov-next-actions .btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.ov-next-actions .btn.primary:hover .icon { transform: translateX(4px); }
.ov-steps { display: grid; gap: 10px; padding-top: 6px; border-top: 1px solid var(--border); }
.ov-steps[hidden] { display: none; }
.ov-cols { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; align-items: start; margin-top: 4px; }
.ov-cols > .section { margin: 0; }
.ov-ev-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; }
.ov-ev-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 14px; padding: 10px 0; border-top: 1px solid var(--border); font-size: 0.9rem; }
.ov-ev-list li:first-child { border-top: 0; }
.ov-ev-text { min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.ov-ev-text b { color: var(--text); font-weight: 600; }
.ov-ev-list time { flex: none; color: var(--text-3); font-size: 0.8rem; }
.ov-quickcol .ov-quick { grid-template-columns: 1fr; gap: 8px; }
.ov-quickcol .ov-tile { padding: 10px 14px; }
.ov-more { margin-top: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 0 16px; }
.ov-more > summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--text-2); list-style: none; }
.ov-more > summary::-webkit-details-marker { display: none; }
.ov-more > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .25s var(--spring); }
.ov-more[open] > summary::before { transform: rotate(90deg); }
.ov-more[open] { padding-bottom: 16px; }
.ov-more .feature-mini { margin: 4px 0 12px; }
@media (max-width: 900px) { .ov-cols { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .ov-next { animation: wz-card .6s var(--spring) .1s both; }
  .ov-steps:not([hidden]) .todo-group { animation: wz-card .45s var(--spring) both; }
}

/* «Главная»: ровная сетка — одинаковые промежутки, колонки начинаются на одной линии, плитки без вложенных рамок */
.ov-page { display: grid; gap: 14px; }
.ov-page > * { margin: 0 !important; }
.ov-page > .ov-cols { align-items: stretch; }
.ov-page .ov-cols > .section { margin: 0 !important; align-self: stretch; }
.ov-quickcol .ov-quick { margin-top: 10px; }
.ov-quickcol .ov-tile { border-color: transparent; background: transparent; padding: 10px 8px; }
.ov-quickcol .ov-tile:hover { background: var(--brand-50); border-color: transparent; transform: translateX(3px); }
.ov-page > .ov-more { margin-top: 0 !important; }

/* окно настройки быстрых действий */
.qe { display: grid; gap: 12px; }
.qe-chosen { display: grid; gap: 6px; }
.qe-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); }
.qe-ico { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 9px; background: var(--brand-50); color: var(--brand-text); flex: none; }
.qe-ico .icon { width: 17px; height: 17px; }
.qe-name { flex: 1; min-width: 0; font-weight: 500; }
.qe-row .btn.small { padding: 0 8px; min-height: 30px; }
.sortable-item { cursor: grab; user-select: none; touch-action: none; transition: border-color .15s ease, background-color .15s ease, box-shadow .2s ease; }
.sortable-item:hover { border-color: var(--border-strong); }
.sortable-item.is-dragging { cursor: grabbing; position: relative; z-index: 3; border-color: var(--brand); background: var(--surface); box-shadow: var(--shadow-pop); }
.sortable-item button { cursor: pointer; }
.qe-row .btn.small { transition: transform .18s var(--spring), background-color .15s ease, opacity .15s ease; }
.qe-row .btn.small:active:not(:disabled) { transform: scale(.85); }
.qe-row .btn.small:disabled { opacity: .3; }
.qe-pool { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; }
.qe-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 8px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); font: inherit; font-size: 0.86rem; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .25s var(--spring); }
.qe-chip .icon { width: 13px; height: 13px; }
.qe-chip:hover:not(:disabled) { border-color: var(--brand); color: var(--brand-text); background: var(--brand-50); transform: translateY(-1px); }
.qe-chip:disabled { opacity: .4; cursor: not-allowed; }
.ov-quickcol .section-head { margin-bottom: 0; }
@media (prefers-reduced-motion: no-preference) { .qe-row { animation: wz-card .35s var(--spring) both; } }

/* «Настройка сервера» — тонкая полоса вместо крупного блока и кольца в шапке */
.ov-setup { padding: 10px 14px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface); display: grid; gap: 10px; }
.ov-setup-row { display: flex; align-items: center; gap: 14px; }
.ov-ring.small { width: 40px; height: 40px; }
.ov-ring.small::before { inset: 5px; }
.ov-ring.small b { font-size: 0.7rem; }
.ov-setup-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.ov-setup-text b { font-weight: 600; font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-setup-text span { color: var(--text-3); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ov-setup-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.ov-setup .btn .icon { transition: transform .3s var(--spring); }
.ov-setup .btn[aria-expanded="true"] .icon { transform: rotate(180deg); }
.ov-setup .ov-steps { border-top: 1px solid var(--border); padding-top: 10px; }
.ov-restore[hidden] { display: none; }
@media (max-width: 760px) { .ov-setup-row { flex-wrap: wrap; } .ov-setup-text { flex-basis: calc(100% - 60px); } }


/* ---------- достижения и значки ---------- */
.ach-dot { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: inset 0 0 0 2px rgb(255 255 255 / 0.25); }
.ach-dot .icon { width: 18px; height: 18px; fill: #fff; stroke: #fff; }
.ach-icon { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; display: block; }
.ach-order { display: inline-flex; }
.ach-order .btn.small { padding: 0 6px; }
.ach-empty { display: grid; gap: 14px; padding: 6px 0; }
.ach-empty-head { display: flex; align-items: center; gap: 12px; }
.ach-empty-head > .icon { width: 28px; height: 28px; color: var(--brand-text); }
.ach-empty-head b { display: block; }
.ach-empty-head span { color: var(--text-2); font-size: 0.9rem; }
.ach-quick, .ach-templates { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.ach-chip, .ach-template { display: flex; align-items: center; gap: 12px; padding: 12px 14px; text-align: left; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: inherit; font: inherit; cursor: pointer;
  transition: border-color .18s ease, background-color .18s ease, transform .3s var(--spring); }
.ach-chip:hover, .ach-template:hover { border-color: var(--brand); background: var(--brand-50); transform: translateY(-3px); }
.ach-chip span, .ach-template-text { display: grid; gap: 2px; min-width: 0; }
.ach-chip small, .ach-template small { color: var(--text-3); font-size: 0.8rem; }
.ach-pick { display: grid; gap: 14px; }
.ach-form { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.ach-preview { position: sticky; top: 0; display: grid; gap: 8px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.ach-pv-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.ach-pv-cond { margin: 0; font-weight: 600; }
.ach-thumb-ph { grid-row: span 3; grid-column: 2; }
.ach-thumb-ph .ach-dot { width: 64px; height: 64px; }
.ach-thumb-ph .ach-dot .icon { width: 32px; height: 32px; }
.ach-preview .dc-embed .e-thumb { border-radius: 50%; }
@media (max-width: 900px) { .ach-form { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .ach-quick .ach-chip, .ach-templates .ach-template { animation: wz-card .45s var(--spring) both; }
  .ach-templates .ach-template:nth-child(2n) { animation-delay: .05s; } .ach-templates .ach-template:nth-child(3n) { animation-delay: .1s; }
}
.ach-form .form-actions, .ach-pick .form-actions { justify-content: flex-start; }


/* ---------- выбор файла (js/fileify.js) ---------- */
input[data-fd-native] { display: none !important; }
.fd { position: relative; display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: var(--r-lg); border: 1.5px dashed var(--border-strong); background: var(--surface-2); cursor: pointer; outline: none;
  transition: border-color .2s ease, background-color .2s ease, transform .3s var(--spring), box-shadow .2s ease; }
.fd:hover, .fd:focus-visible { border-color: var(--brand); background: var(--brand-50); }
.fd:focus-visible { box-shadow: var(--focus); }
.fd.disabled { opacity: .5; pointer-events: none; }
.fd-thumb { width: 52px; height: 52px; flex: none; display: grid; place-items: center; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); color: var(--brand-text); overflow: hidden;
  transition: transform .35s var(--spring), background-color .2s ease; }
.fd-thumb .icon { width: 24px; height: 24px; }
.fd-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.fd:hover .fd-thumb { transform: translateY(-3px) rotate(-4deg); }
.fd-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.fd-title { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-sub { color: var(--text-3); font-size: 0.84rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-action { display: none; flex: none; color: var(--brand-text); font-size: 0.86rem; font-weight: 600; }
.fd-remove { display: none; flex: none; width: 30px; height: 30px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--text-3); place-items: center; cursor: pointer; transition: background-color .15s ease, color .15s ease, transform .25s var(--spring); }
.fd-remove .icon { width: 16px; height: 16px; }
.fd-remove:hover { background: var(--danger-soft); color: var(--danger); transform: scale(1.12) rotate(90deg); }
.fd.has-file { border-style: solid; border-color: color-mix(in srgb, var(--brand) 55%, var(--border)); background: var(--brand-50); }
.fd.has-file .fd-action { display: inline; }
.fd.has-file .fd-remove { display: grid; }
.fd.drag { border-color: var(--brand); background: var(--brand-50); transform: scale(1.015); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.fd.drag .fd-thumb { transform: translateY(-5px) scale(1.12); background: var(--brand); color: var(--on-brand); }
.fd.drag .fd-title::after { content: " — отпустите"; color: var(--brand-text); }
@media (prefers-reduced-motion: no-preference) {
  .fd.landed .fd-thumb { animation: fd-land .5s var(--spring); }
  @keyframes fd-land { 0% { transform: scale(.4) rotate(-14deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
  .fd.has-file { animation: wz-select .45s var(--spring); }
  .fd.shake { animation: fd-shake .4s ease; }
  @keyframes fd-shake { 0%, 100% { transform: none; } 20% { transform: translateX(-7px); } 40% { transform: translateX(6px); } 60% { transform: translateX(-4px); } 80% { transform: translateX(3px); } }
  .fd:not(.has-file):not(.drag) .fd-thumb .icon { animation: fd-float 3.2s ease-in-out infinite; }
  @keyframes fd-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
}


/* ---------- розыгрыши ---------- */
.dc-button.blurple { background: #5865f2; }
.gw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; }
.gw-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color .2s ease, transform .3s var(--spring); }
.gw-card:hover { border-color: var(--brand); transform: translateY(-3px); }
.gw-card-head { display: flex; align-items: center; gap: 12px; }
.gw-card-head h3 { margin: 0; font-size: 1.05rem; overflow-wrap: anywhere; }
.gw-card-icon { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 14px; background: var(--brand-50); font-size: 1.35rem; }
.gw-stats { display: grid; grid-template-columns: 1.5fr 1fr 1fr; gap: 8px; }
.gw-stats > div { display: grid; justify-items: start; gap: 2px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.gw-stats .icon { width: 15px; height: 15px; color: var(--brand-text); }
.gw-stats span { color: var(--text-3); font-size: 0.74rem; }
.gw-stats b { font-variant-numeric: tabular-nums; font-size: 0.92rem; white-space: nowrap; }
.gw-stats span { white-space: nowrap; }
.gw-ends { margin: 0; }
.gw-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.gw-chip { display: inline-flex; align-items: center; gap: 5px; padding: 3px 10px; border-radius: 999px; background: var(--brand-50); border: 1px solid var(--border); color: var(--brand-text); font-size: 0.82rem; }
.gw-chip .icon { width: 13px; height: 13px; }
.gw-chip.removable { padding-right: 4px; }
.gw-card-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
.gw-empty { display: grid; justify-items: center; gap: 8px; padding: 34px 16px; text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); margin-top: 14px; }
.gw-empty > span:not(.gw-empty-icon) { color: var(--text-2); max-width: 52ch; }
.gw-empty-icon { width: 56px; height: 56px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-50); color: var(--brand-text); }
.gw-empty-icon .icon { width: 28px; height: 28px; }
.gw-ended-wrap { margin-top: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); padding: 0 16px; }
.gw-ended-wrap > summary { cursor: pointer; padding: 14px 0; font-weight: 600; color: var(--text-2); list-style: none; }
.gw-ended-wrap > summary::-webkit-details-marker { display: none; }
.gw-ended-wrap > summary::before { content: "›"; display: inline-block; margin-right: 8px; transition: transform .25s var(--spring); }
.gw-ended-wrap[open] > summary::before { transform: rotate(90deg); }
.gw-ended-wrap[open] { padding-bottom: 8px; }
.gw-ended-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 12px 0; border-top: 1px solid var(--border); }
.gw-ended-main { display: grid; gap: 4px; min-width: 0; }
.gw-ended-actions { display: flex; gap: 8px; }
.gw-form { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.gw-preview { position: sticky; top: 0; display: grid; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.gw-pv-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.gw-pv-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.gw-modes { display: inline-flex; padding: 2px; border-radius: 999px; background: var(--surface-3); }
.gw-mode { border: 0; background: transparent; color: var(--text-2); font: inherit; font-size: 0.8rem; padding: 3px 12px; border-radius: 999px; cursor: pointer; transition: background-color .2s ease, color .2s ease; }
.gw-mode.on { background: var(--brand); color: var(--on-brand); }
.gw-quicks { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.gw-quick, .gw-type { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-2); font: inherit; font-size: 0.86rem; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, color .15s ease, transform .25s var(--spring); }
.gw-quick:hover, .gw-type:hover { border-color: var(--brand); color: var(--text); transform: translateY(-1px); }
.gw-quick.on, .gw-type.on { background: var(--brand-50); border-color: var(--brand); color: var(--brand-text); font-weight: 600; }
.gw-type .icon { width: 14px; height: 14px; }
.gw-types { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 4px; }
.gw-start { justify-content: flex-start; }
@media (max-width: 900px) { .gw-form { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .gw-card { animation: wz-card .5s var(--spring) both; }
  .gw-grid .gw-card:nth-child(2) { animation-delay: .06s; } .gw-grid .gw-card:nth-child(3) { animation-delay: .12s; }
  .gw-empty-icon { animation: gw-bob 3s ease-in-out infinite; }
  @keyframes gw-bob { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-5px) rotate(-6deg); } }
}
.gw-form .form-actions { justify-content: flex-start; }
.gw-types + .fields { margin-top: 12px; }


/* ---------- трекер приглашений ---------- */
.iv-page > .ov-warn { margin: 12px 0; }
.iv-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 14px 0 20px; }
.iv-stat { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color .2s ease, transform .3s var(--spring); }
.iv-stat:hover { border-color: var(--brand); transform: translateY(-2px); }
.iv-stat-icon { width: 38px; height: 38px; flex: none; display: grid; place-items: center; border-radius: 12px; background: var(--brand-50); color: var(--brand-text); }
.iv-stat-icon .icon { width: 19px; height: 19px; }
.iv-stat b { display: block; font: 800 1.45rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.iv-stat span:not(.iv-stat-icon) { display: block; color: var(--text-2); font-size: 0.84rem; margin-top: 2px; }
.iv-stat small { display: block; color: var(--text-3); font-size: 0.76rem; margin-top: 2px; }
.iv-col h3 { margin: 0 0 10px; }
.iv-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.iv-row { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-md); border: 1px solid transparent; transition: background-color .15s ease, border-color .15s ease; }
.iv-row:hover { background: var(--surface-2); border-color: var(--border); }
.iv-row.podium { background: var(--surface-2); border-color: var(--border); }
.iv-row.p1 { border-color: color-mix(in srgb, #f5a623 55%, var(--border)); }
.iv-place { width: 30px; flex: none; text-align: center; font-weight: 700; color: var(--text-3); font-size: 1.1rem; }
.iv-who { flex: 1; min-width: 0; display: grid; gap: 4px; }
.iv-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.iv-who small { color: var(--text-3); font-size: 0.78rem; }
.iv-bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.iv-bar span { display: block; height: 100%; width: var(--w); border-radius: inherit; background: linear-gradient(90deg, var(--brand), color-mix(in srgb, var(--brand) 60%, #fff)); }
.iv-count { font: 800 1.15rem/1 var(--font-head); font-variant-numeric: tabular-nums; min-width: 28px; text-align: right; }
.iv-remove { opacity: .45; transition: opacity .15s ease; }
.iv-row:hover .iv-remove, .iv-remove:focus-visible { opacity: 1; }
.iv-empty { display: grid; justify-items: center; gap: 6px; padding: 30px 12px; text-align: center; border: 1.5px dashed var(--border-strong); border-radius: var(--r-lg); color: var(--text-2); }
.iv-empty .icon { width: 30px; height: 30px; color: var(--brand-text); }
.iv-check { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--border); display: grid; gap: 10px; }
.iv-check h3 { margin: 0; }
.iv-check-row { display: flex; gap: 10px; align-items: flex-start; flex-wrap: wrap; }
.iv-check-row .pick { flex: 1 1 260px; max-width: 360px; }
.iv-card { display: grid; gap: 10px; padding: 14px 16px; border-radius: var(--r-lg); border: 1px solid var(--border); background: var(--surface-2); max-width: 460px; }
.iv-card-grid { display: grid; grid-template-columns: 1fr; gap: 8px; }
.iv-card-grid > div { display: grid; gap: 2px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface); }
.iv-card-grid b { font: 800 1.2rem/1 var(--font-head); }
.iv-card-grid span { color: var(--text-3); font-size: 0.76rem; }
.iv-card small { color: var(--text-3); }
.iv-stats.two { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 640px; }
@media (max-width: 760px) { .iv-stats, .iv-stats.two { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .iv-row { animation: wz-card .45s var(--spring) both; animation-delay: calc(var(--i, 0) * 45ms); }
  .iv-bar span { animation: iv-grow .9s var(--ease-out) both; }
  @keyframes iv-grow { from { width: 0; } to { width: var(--w); } }
  .iv-stat { animation: wz-card .5s var(--spring) both; }
  .iv-stats .iv-stat:nth-child(2) { animation-delay: .06s; } .iv-stats .iv-stat:nth-child(3) { animation-delay: .12s; } .iv-stats .iv-stat:nth-child(4) { animation-delay: .18s; }
  .iv-card { animation: wz-card .4s var(--spring) both; }
}


/* ---------- доска избранного ---------- */
.sbd-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 22px; align-items: start; margin-top: 14px; }
.sbd-form .fields { margin-top: 0; }
.sbd-preview { position: sticky; top: 8px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.sbd-msg { background: #313338; border-radius: var(--r-md); padding: 14px; color: #dbdee1; display: grid; gap: 8px; font: 400 15px/1.375 "gg sans", "Noto Sans", "Segoe UI", sans-serif; }
.sbd-head { display: flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.sbd-head .dc-mention { padding: 0 3px; }
.sbd-emoji { font-size: 1.1rem; }
.sbd-emoji.ep-emoji-img { width: 20px; height: 20px; }
.sbd-embed { border-left: 4px solid #4955d4; border-radius: 4px; background: #2b2d31; padding: 10px 14px 12px 12px; display: grid; gap: 8px; max-width: 420px; }
.sbd-author { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; }
.sbd-ava { width: 24px; height: 24px; border-radius: 50%; background: #5865f2 url("/panel/img/demo-avatar.jpg") center / cover; }
.sbd-embed p { margin: 0; font-size: 0.9rem; }
.sbd-image { height: 110px; border-radius: 6px; background: #1e1f22; display: grid; place-items: center; color: #4e5058; }
.sbd-image .icon { width: 30px; height: 30px; }
.sbd-field { font-size: 0.85rem; display: grid; gap: 1px; }
.sbd-field a { color: #00a8fc; text-decoration: none; }
.gw-pv-label { font-size: 0.74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); }
.sbd-hall { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; }
.sbd-hall li { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.sbd-hall li > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.sbd-hall small { color: var(--text-3); }
.sbd-rank { width: 30px; text-align: center; font-size: 1.1rem; font-weight: 700; color: var(--text-3); }
.sbd-links { display: flex; gap: 6px; flex: none; }
@media (max-width: 900px) { .sbd-grid { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: no-preference) {
  .sbd-hall li { animation: wz-card .45s var(--spring) both; animation-delay: calc(var(--i, 0) * 50ms); }
}
.sbd-time { font-size: 0.74rem; color: #949ba4; }
.sbd-form .rp-checks { display: grid; gap: 8px; }
.sbd-reset { margin: 4px 0 8px; }

.sbd-pv-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.sbd-pv-head .gw-pv-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sbd-edit { flex: none; }
.sbd-modal-pv { position: static; }
.sbd-preview > * { min-width: 0; }

/* Мероприятия */
.ev-status { width: auto; }
.ev-card.live { border-color: var(--ok); }
.ev-card { display: flex; flex-direction: column; }
.ev-info { display: grid; gap: 8px; padding: 12px; border-radius: var(--r-md); background: var(--surface-2); }
.ev-info > div { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 0.9rem; }
.ev-info .icon { width: 16px; height: 16px; flex: none; color: var(--brand-text); }
.ev-info span { flex: none; min-width: 96px; color: var(--text-3); font-size: 0.82rem; }
.ev-info b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ev-desc { margin: 0; color: var(--text-2); font-size: 0.88rem; overflow-wrap: anywhere; }
.ev-actions { align-items: center; justify-content: space-between; margin-top: auto; }
.ev-remind { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 0.82rem; }
.ev-remind .icon { width: 14px; height: 14px; }
.ev-remind.done { color: var(--ok); }
.ev-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-top: 12px; counter-reset: ev; }
.ev-step { position: relative; display: grid; align-content: start; gap: 6px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color .2s ease, transform .25s var(--spring), opacity .2s ease; }
.ev-step:hover { border-color: var(--brand); transform: translateY(-2px); }
.ev-step.off { opacity: .7; }
.ev-step-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.ev-step-num { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: var(--brand-50); color: var(--brand-text); }
.ev-step-num .icon { width: 17px; height: 17px; }
.ev-step .btn { justify-self: start; margin-top: 6px; }
.ev-dest { color: var(--text-2); font-size: 0.84rem; overflow-wrap: anywhere; }
.ev-dest.off { color: var(--text-3); }
.ev-dest.warn { color: var(--warn); }
.ev-when-note { color: var(--text-3); font-size: 0.8rem; }
.ev-ping-note { margin-top: 6px; color: var(--text-3); font-size: 0.84rem; }

/* Предложения */
.sg-filters { margin: 14px 0 6px; flex-wrap: wrap; max-width: 100%; }
.sg-list { display: grid; gap: 10px; margin-top: 8px; }
.sg-item { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 14px; padding: 14px 16px; border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color .2s ease, transform .25s var(--spring); }
.sg-item:hover { transform: translateY(-2px); border-color: var(--brand); }
.sg-item.approved { border-left-color: var(--ok); }
.sg-item.denied { border-left-color: var(--danger, #e74c3c); }
.sg-num { align-self: start; padding: 4px 10px; border-radius: 999px; background: var(--brand-50); color: var(--brand-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.sg-body { display: grid; gap: 8px; min-width: 0; }
.sg-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 12px; }
.sg-status { width: auto; }
.sg-status.approved .dot { background: var(--ok); }
.sg-status.denied .dot { background: var(--danger, #e74c3c); }
.sg-status.open .dot { background: var(--brand); }
.sg-text { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.5; }
.sg-reason { display: grid; gap: 2px; padding: 8px 12px; border-radius: var(--r-md); background: var(--surface-2); font-size: 0.9rem; }
.sg-reason b { font-size: 0.78rem; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; }
.sg-reason span { overflow-wrap: anywhere; }
.sg-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.sg-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 6px; }
.sg-quote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--brand); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-2); white-space: pre-wrap; overflow-wrap: anywhere; }
.sg-pv-title { font-weight: 700; }
.sg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.sg-react { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 6px; border-radius: 8px; border: 1px solid transparent; background: #2b2d31; cursor: default;
  transition: border-color .15s ease; }
.sg-react:hover { border-color: #4e5058; }
.sg-react-emoji { font-size: 16px; line-height: 1; }
.sg-react-count { color: #b5bac1; font-size: 14px; font-weight: 500; line-height: 1; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) { .sg-item { grid-template-columns: 1fr; } }
.sbd-preview .gw-modes { justify-self: start; }
.sbd-field .dc-mention { justify-self: start; width: fit-content; }

/* Голосования */
.pl-rows { display: grid; gap: 8px; margin: 10px 0 8px; }
.pl-row { display: flex; align-items: center; gap: 8px; }
.pl-row input { flex: 1; min-width: 0; }
.pl-num { flex: none; width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--brand-50); color: var(--brand-text); font-size: 0.8rem; font-weight: 700; }
.pl-page .sub-title { margin-top: 18px; }
.pl-page .check { margin-top: 14px; }
.pl-page details.advanced { margin-top: 14px; }
.pl-poll { display: grid; gap: 8px; padding: 14px; border-radius: 8px; background: #2b2d31; border: 1px solid #3f4147; }
.pl-q { font-size: 1.05rem; color: #f2f3f5; overflow-wrap: anywhere; }
.pl-hint { color: #949ba4; font-size: 0.82rem; }
.pl-answers { display: grid; gap: 6px; }
.pl-answer { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 6px; background: #1e1f22; color: #dbdee1; font-size: 0.92rem; overflow-wrap: anywhere; }
.pl-answer.empty { color: #6d6f78; }
.pl-mark { flex: none; width: 16px; height: 16px; border-radius: 50%; border: 2px solid #80848e; }
.pl-mark.square { border-radius: 4px; }
.pl-foot { color: #949ba4; font-size: 0.8rem; }
.pl-list-head { margin-top: 28px; }
.pl-list { display: grid; gap: 12px; margin-top: 10px; }
.pl-card { display: grid; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
  transition: border-color .2s ease, transform .25s var(--spring); }
.pl-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.pl-card.ended { opacity: .92; }
.pl-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.pl-card-head h3 { margin: 0 0 2px; font-size: 1.05rem; overflow-wrap: anywhere; }
.pl-card-head .fr-status { width: auto; }
.pl-results { display: grid; gap: 10px; }
.pl-res { display: grid; gap: 4px; }
.pl-res-line { display: flex; justify-content: space-between; gap: 12px; font-size: 0.92rem; }
.pl-res-line span { display: inline-flex; align-items: center; gap: 6px; overflow-wrap: anywhere; }
.pl-res-line .icon { width: 15px; height: 15px; color: var(--ok); }
.pl-res-line b { flex: none; font-variant-numeric: tabular-nums; }
.pl-res.win .pl-res-line span { font-weight: 700; }
.pl-bar { height: 8px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.pl-bar i { display: block; height: 100%; border-radius: 999px; background: var(--brand); transition: width .6s var(--spring); }
.pl-res.win .pl-bar i { background: var(--ok); }
.pl-card-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.pl-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* Меню ролей */
.rmx-grid { grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); }
.rmx-card { align-content: start; }
.rmx-status { width: auto; }
.rmx-roles { display: flex; flex-wrap: wrap; gap: 6px; }
.rmx-role { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-2); font-size: 0.84rem; }
.rmx-role i { flex: none; width: 9px; height: 9px; border-radius: 50%; }
.rmx-role.more { color: var(--text-3); }
.rmx-emoji { font-size: 1rem; line-height: 1; }
.rmx-actions { justify-content: flex-start; }
.rmx-rows { display: grid; gap: 10px; }
.rmx-row { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.rmx-row-top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 150px) auto; gap: 8px; align-items: center; }
.rmx-row-bottom { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.rmx-move { display: inline-flex; gap: 2px; }
.rmx-warn { color: var(--warn); font-size: 0.84rem; font-weight: 500; }
.rmx-warn:empty { display: none; }
.rmx-hint { margin: 0; color: var(--text-3); font-size: 0.84rem; }
.rmx-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.rmx-add { margin-top: 2px; }
.rmx-bulk { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.rmx-seg { display: grid; gap: 6px; justify-items: start; }
.rmx-preview { display: grid; gap: 10px; padding: 14px; border-radius: var(--r-lg); background: var(--surface-2); }
.rmx-desc { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.rmx-lines { display: grid; gap: 3px; }
.rmx-line { display: flex; align-items: center; flex-wrap: wrap; gap: 5px; overflow-wrap: anywhere; }
.rmx-line .dc-mention { background: color-mix(in srgb, currentColor 15%, transparent); }
.rmx-sub { color: #949ba4; font-size: 0.78rem; }
.rmx-buttons { display: flex; flex-wrap: wrap; gap: 8px; }
.rmx-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: 4px; background: #4e5058; color: #fff; font-size: 0.88rem; font-weight: 500; }
.rmx-select { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-radius: 6px; background: #1e1f22; border: 1px solid #3f4147; color: #b5bac1; font-size: 0.92rem; }
.rmx-select .icon { width: 16px; height: 16px; }
@media (max-width: 560px) { .rmx-row-top { grid-template-columns: 1fr; } .rmx-row-bottom { grid-template-columns: 1fr; } }
.sg-title { font-size: 1rem; overflow-wrap: anywhere; }
.sg-item.withdrawn { border-left-color: var(--text-3); opacity: .85; }
.sg-status.withdrawn .dot { background: var(--text-3); }
.sg-primary { background: #5865f2; }
.sbd-msg .rmx-buttons { margin-top: 2px; }
.sg-publish { display: grid; gap: 8px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border); }
.sg-publish > label { font-weight: 600; }
.sg-publish-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.sg-published a { color: var(--brand-text); }
@media (max-width: 560px) { .sg-publish-row { grid-template-columns: 1fr; } }
.sg-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; margin: 6px 0 4px; }
.sg-strip-item { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); min-width: 0; }
.sg-strip-item > .icon { flex: none; width: 20px; height: 20px; color: var(--ok); }
.sg-strip-item.warn { border-color: var(--warn); }
.sg-strip-item.warn > .icon { color: var(--warn); }
.sg-strip-item > div { display: grid; flex: 1; min-width: 0; }
.sg-strip-item b { font-size: 0.9rem; }
.sg-strip-item span { color: var(--text-3); font-size: 0.84rem; overflow-wrap: anywhere; }
.sg-strip-item.warn span { color: var(--warn); }
.sg-strip-item .btn { flex: none; }
.sg-open-link { justify-self: start; }
.ov-tile, .ov-tile:hover { text-decoration: none; }

/* ---------- каталог функций: строки Викс+ (фирменный #4955d4) и беты (золотые) — js/pages/catalog.js ---------- */
:root { --beta: #a8700f; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --beta: #f0c45c; } }
:root[data-theme="dark"] { --beta: #f0c45c; }
/* --tone — заливки и полоска, --tone-text — читаемый текст того же оттенка. */
.feature-row.is-premium { --tone: var(--brand); --tone-text: var(--brand-text); }
.feature-row.is-beta { --tone: var(--beta); --tone-text: var(--beta); }
.feature-row.is-premium, .feature-row.is-beta { position: relative; border-radius: var(--r-md);
  background: color-mix(in srgb, var(--tone) 8%, transparent); border-bottom-color: transparent; margin-block: 3px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 28%, transparent); }
.feature-row.is-premium:hover, .feature-row.is-beta:hover { background: color-mix(in srgb, var(--tone) 13%, transparent); }
.feature-row.is-premium .fr-icon, .feature-row.is-beta .fr-icon {
  background: color-mix(in srgb, var(--tone) 18%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tone) 32%, transparent); }
.feature-row.is-premium .fr-icon .icon, .feature-row.is-beta .fr-icon .icon { color: var(--tone-text); }
.feature-row.is-premium .fr-main:hover b, .feature-row.is-beta .fr-main:hover b { color: var(--tone-text); }
/* Бейдж «Бета» везде золотой — как строки беты в каталоге. */
.badge.beta { background: color-mix(in srgb, var(--beta) 16%, transparent); color: var(--beta); }
.feature-row.is-locked .fr-text > span { color: var(--text-3); }
.fr-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 6px; border-radius: var(--r-pill);
  font-size: 0.72rem; font-weight: 700; color: var(--brand-text); background: color-mix(in srgb, var(--brand) 18%, transparent); }
.fr-tag .icon { width: 12px; height: 12px; }
.fr-status.premium { color: var(--brand-text); font-weight: 600; }
.fr-status.premium .dot { background: var(--brand); }
.fr-premium-btn { color: var(--brand-text); border-color: color-mix(in srgb, var(--brand) 50%, var(--border)); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.fr-premium-btn:hover { color: var(--brand-text); background: color-mix(in srgb, var(--brand) 22%, transparent); border-color: var(--brand); }
/* Статус с названием тарифа длиннее обычного — колонка растёт под него. */
.fr-status.premium { width: auto; min-width: 136px; }

/* ---------- Экономика: витрина валюты, подиум, выдача, предпросмотр, кривая стрика — js/modules/economy.js ---------- */
.ec-hero { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; padding: 18px 20px; margin: 4px 0 18px;
  border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.ec-hero-coin { width: 64px; height: 64px; flex: none; display: grid; place-items: center; font-size: 2.1rem; line-height: 1;
  border-radius: var(--r-lg); background: var(--brand-50); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--brand) 22%, transparent); }
.ec-hero-coin img { width: 40px; height: 40px; }
.ec-hero-main { flex: 1; min-width: 220px; display: grid; gap: 8px; }
.ec-hero-name { display: flex; align-items: center; gap: 8px; font: 700 1.25rem/1.2 var(--font-head); }
.ec-hero-edit { width: 28px; height: 28px; display: grid; place-items: center; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-3); cursor: pointer; }
.ec-hero-edit:hover { background: var(--surface-2); color: var(--brand-text); }
.ec-hero-edit .icon { width: 16px; height: 16px; }
.ec-hero-stats { display: flex; flex-wrap: wrap; gap: 6px 28px; }
.ec-hero-stat { display: grid; gap: 1px; }
.ec-hero-stat b { font: 800 1.15rem/1.2 var(--font-head); font-variant-numeric: tabular-nums; }
.ec-hero-stat span { font-size: 0.8rem; color: var(--text-3); }
.ec-hero-stat.up b { color: var(--ok); }
.ec-hero-stat.down b { color: var(--danger); }
.ec-hero-chart { flex: none; }
.ec-spark { width: 168px; height: 44px; display: block; }
.ec-spark .up { fill: color-mix(in srgb, var(--ok) 75%, transparent); }
.ec-spark .down { fill: color-mix(in srgb, var(--danger) 70%, transparent); }
.ec-spark .flat { fill: var(--border-strong); }

.ec-tile { position: relative; }
.ec-tile-icon { position: absolute; top: 14px; right: 14px; width: 30px; height: 30px; display: grid; place-items: center; border-radius: var(--r-sm);
  background: color-mix(in srgb, var(--tone, var(--brand)) 14%, transparent); color: var(--tone, var(--brand-text)); }
.ec-tile-icon .icon { width: 16px; height: 16px; }
.ec-tile.brand { --tone: var(--brand-text); }
.ec-tile.in { --tone: var(--ok); }
.ec-tile.out { --tone: var(--danger); }
.ec-tile .st-tile-top { padding-right: 38px; }
.el-flow-label { display: inline-flex; align-items: center; gap: 8px; }
.el-flow-icon { width: 24px; height: 24px; flex: none; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--brand-50); color: var(--brand-text); }
.el-flow-icon .icon { width: 14px; height: 14px; }

.ec-give { display: grid; grid-template-columns: minmax(220px, 1.2fr) minmax(200px, 1fr) auto; grid-template-areas: "who amount actions" "note quick ."; gap: 10px 14px; align-items: center; }
.ec-give-who { grid-area: who; min-width: 0; }
.ec-give-amount { grid-area: amount; }
.ec-give-actions { grid-area: actions; display: flex; gap: 8px; }
.ec-give-note { grid-area: note; min-height: 1px; }
.ec-give-quick { grid-area: quick; margin: 0; }
/* одна высота у выбора участника, поля суммы и кнопок */
.ec-give .pick-trigger, .ec-give input, .ec-give-actions .btn { height: 46px; min-height: 46px; box-sizing: border-box; }
.ec-give-balance { font-size: 0.84rem; }
@media (max-width: 760px) { .ec-give { grid-template-columns: 1fr; grid-template-areas: "who" "note" "amount" "quick" "actions"; } }

.ec-podium { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.ec-podium-row { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); }
.ec-podium-row.p1 { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); background: color-mix(in srgb, var(--warn) 7%, var(--surface-2)); }
.ec-medal { font-size: 1.5rem; width: 30px; text-align: center; flex: none; }
.ec-avatar { width: 38px; height: 38px; border-radius: 50%; flex: none; object-fit: cover; background: var(--surface-3); }
.ec-avatar.empty { display: grid; place-items: center; color: var(--text-3); }
.ec-avatar.empty .icon { width: 18px; height: 18px; }
.ec-podium-who { flex: 1; min-width: 0; display: grid; gap: 6px; }
.ec-podium-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ec-podium-amount { font: 800 1.05rem/1 var(--font-head); font-variant-numeric: tabular-nums; white-space: nowrap; }
@media (prefers-reduced-motion: no-preference) {
  .ec-podium-row { animation: wz-card .45s var(--spring) both; animation-delay: calc(var(--i, 0) * 60ms); }
}

.ec-cur { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(260px, 1fr); gap: 24px; align-items: start; }
@media (max-width: 860px) { .ec-cur { grid-template-columns: 1fr; } }
.ec-preview { display: grid; gap: 10px; padding: 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); }
.ec-dc { display: flex; gap: 14px; justify-content: space-between; padding: 12px 14px; border-radius: var(--r-sm);
  background: var(--surface); border-left: 4px solid var(--brand); }
.ec-dc-body { display: grid; gap: 6px; min-width: 0; }
.ec-dc-title { font-size: 0.95rem; }
.ec-dc-amount { font-weight: 800; font-size: 1.05rem; overflow-wrap: anywhere; }
.ec-dc-avatar { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--surface-3); color: var(--text-3); }

.ec-streak-box { display: grid; gap: 8px; margin: 6px 0 18px; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border); background: var(--surface-2); }
.ec-streak-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.ec-streak { width: 100%; height: auto; display: block; }
.ec-streak .base { fill: var(--brand); }
.ec-streak .bonus { fill: var(--warn); }
.ec-streak rect { transition: y .25s var(--ease-out), height .25s var(--ease-out); }

/* Дни рождения */
.bd-today { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 10px 0 4px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.bd-today.live { border-color: var(--brand); background: var(--brand-50); }
.bd-today-body { display: grid; gap: 8px; flex: 1; min-width: 200px; }
.bd-today-body b { font-size: 1.05rem; }
.bd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.bd-chip { display: inline-flex; align-items: center; gap: 8px; padding: 3px 12px 3px 4px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); font-weight: 600; font-size: 0.9rem; }
.bd-ava { flex: none; width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.bd-ava-empty { display: grid; place-items: center; background: var(--brand-50); color: var(--brand-text); font-size: 0.8rem; font-weight: 700; }
.bd-cols { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 26px; align-items: start; margin-top: 8px; }
.bd-upcoming { display: grid; gap: 14px; }
.bd-group h4 { margin: 0 0 4px; color: var(--text-3); font-size: 0.74rem; text-transform: uppercase; letter-spacing: .06em; }
.bd-row { display: grid; grid-template-columns: 46px 30px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 7px 10px; border-radius: var(--r-md); transition: background-color .15s ease; }
.bd-row:hover { background: var(--surface-2); }
.bd-row.bd-full { grid-template-columns: 46px 30px minmax(0, 1fr) auto auto; }
.bd-row.gone { opacity: .6; }
.bd-leaf { display: flex; flex-direction: column; width: 46px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); text-align: center; }
.bd-leaf i { background: var(--brand); color: var(--on-brand); font-style: normal; font-size: 0.62rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 0; }
.bd-leaf b { font-size: 1.1rem; line-height: 1.5; font-variant-numeric: tabular-nums; }
.bd-who { display: grid; min-width: 0; }
.bd-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-who span { color: var(--text-3); font-size: 0.82rem; }
.bd-when { color: var(--text-2); font-size: 0.86rem; white-space: nowrap; }
.bd-actions { display: inline-flex; gap: 2px; }
.bd-year { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; height: 190px; padding-top: 6px; }
.bd-month { display: flex; flex-direction: column; align-items: stretch; gap: 4px; padding: 0; border: 0; background: transparent; color: var(--text-3); font: inherit; font-size: 0.74rem; cursor: pointer; text-align: center; }
.bd-bar { flex: 1; display: flex; align-items: flex-end; border-radius: 8px; background: var(--surface-2); overflow: hidden; border: 1px solid transparent; transition: border-color .15s ease; }
.bd-bar i { display: block; width: 100%; background: var(--brand); opacity: .45; border-radius: 6px 6px 0 0; transition: height .5s var(--spring), opacity .2s ease; }
.bd-month:hover .bd-bar i, .bd-month.on .bd-bar i { opacity: .85; }
.bd-month.now .bd-bar i { opacity: 1; }
.bd-month.on .bd-bar { border-color: var(--brand); }
.bd-month.now > span:last-child { color: var(--brand-text); font-weight: 700; }
.bd-month b { color: var(--text-2); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.bd-all-head { margin-top: 24px; }
.bd-toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 4px 0 10px; }
.bd-toolbar input { max-width: 320px; }
.bd-toolbar .gw-quick { margin-bottom: 0; }
@media (max-width: 900px) { .bd-cols { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .bd-year { grid-template-columns: repeat(6, minmax(0, 1fr)); height: auto; } .bd-bar { min-height: 70px; } .bd-row.bd-full { grid-template-columns: 46px 30px minmax(0, 1fr) auto; } .bd-row.bd-full .bd-when { display: none; } }
.bd-party { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: var(--brand-50); color: var(--brand-text); }
.bd-party .icon { width: 24px; height: 24px; }
.bd-today.live .bd-party { background: var(--brand); color: var(--on-brand); }
.bd-plate { cursor: pointer; transition: border-color .15s ease, transform .2s var(--spring); }
.bd-plate:hover { border-color: var(--brand); transform: translateY(-2px); }
.bd-plate:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.bd-plate-go { flex: none; display: inline-flex; align-items: center; gap: 4px; color: var(--text-3); font-size: 0.84rem; font-weight: 600; white-space: nowrap; }
.bd-plate:hover .bd-plate-go { color: var(--brand-text); }
.bd-go { width: 14px; height: 14px; transform: rotate(-90deg); transition: transform .2s var(--spring); }
.bd-plate:hover .bd-go { transform: rotate(-90deg) translateY(3px); }
.bd-row.bd-pick { width: 100%; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.bd-row.bd-pick:hover { background: var(--surface-2); }
.bd-when.soon { color: var(--brand-text); font-weight: 600; }
.bd-toolbar select { width: auto; min-width: 190px; }
.bd-toolbar .link-btn { margin-left: auto; font-size: 0.86rem; }

/* Приветствия и прощания */
.wl-group { margin-top: 20px; }
.wl-group .sub-title { margin-bottom: 8px; }
.wl-event { display: grid; gap: 12px; margin-top: 10px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color .2s ease; }
.wl-event:hover { border-color: var(--border-strong); }
.wl-head { display: flex; align-items: center; gap: 14px; }
.wl-title { display: grid; gap: 2px; flex: 1; min-width: 0; }
.wl-title span { color: var(--text-3); font-size: 0.86rem; }
.wl-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.wl-controls > .pick, .wl-controls > .select-wrap { flex: 1 1 260px; max-width: 420px; }
.wl-label { color: var(--text-3); font-size: 0.84rem; font-weight: 600; }
.wl-issue { color: var(--warn); font-size: 0.84rem; font-weight: 500; }
.wl-issue:empty { display: none; }
.wl-preview { max-width: 560px; transition: opacity .2s ease; }
.wl-event.off .wl-preview { opacity: .4; }
.wl-foot { margin-top: 18px; }
@media (max-width: 560px) { .wl-head { flex-wrap: wrap; } }

/* Модерация: наказания */
.mod-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin: 14px 0 24px; }
.mod-stat { --tone: var(--brand); display: flex; align-items: center; gap: 16px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: inherit; font: inherit; text-align: left; cursor: pointer;
  transition: border-color .2s ease, transform .25s var(--spring), background-color .2s ease; }
.mod-stat.warn { --tone: var(--warn); }
.mod-stat.ban { --tone: var(--danger); }
.mod-stat:hover { transform: translateY(-2px); border-color: var(--tone); }
.mod-stat.on { border-color: var(--tone); background: color-mix(in srgb, var(--tone) 9%, var(--surface)); }
.mod-stat-icon { flex: none; display: grid; place-items: center; width: 50px; height: 50px; border-radius: 15px; color: var(--tone); background: color-mix(in srgb, var(--tone) 16%, transparent); }
.mod-stat-icon .icon { width: 26px; height: 26px; }
.mod-stat-body { display: grid; min-width: 0; }
.mod-stat-body b { font-size: 1.9rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.mod-stat-body span { color: var(--text-2); }
.mod-stat-body small { color: var(--text-3); font-size: 0.8rem; }
.mod-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; margin-bottom: 12px; }
.mod-toolbar .sub-title { margin: 0; }
.mod-toolbar input { width: 240px; max-width: 100%; }
.mod-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; }
.mod-card { --tone: var(--warn); display: grid; gap: 12px; align-content: start; padding: 14px; border: 1px solid var(--border); border-top: 3px solid var(--tone); border-radius: var(--r-lg); background: var(--surface); }
.mod-card.mute { --tone: var(--brand); }
.mod-card.ban { --tone: var(--danger); }
.mod-card-head { display: flex; align-items: center; gap: 12px; }
.mod-card-head > div { display: grid; min-width: 0; }
.mod-card-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mod-card-head span { color: var(--text-3); font-size: 0.84rem; }
.mod-ava { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.mod-ava-empty { display: grid; place-items: center; background: var(--brand-50); color: var(--brand-text); font-weight: 700; }
.mod-lines { display: grid; gap: 8px; }
.mod-line { --k: var(--warn); display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--r-md); background: var(--surface-2); }
.mod-line.mute { --k: var(--brand); }
.mod-line.ban { --k: var(--danger); }
.mod-line-icon { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; color: var(--k); background: color-mix(in srgb, var(--k) 16%, transparent); }
.mod-line-icon .icon { width: 16px; height: 16px; }
.mod-line-text { display: grid; min-width: 0; }
.mod-line-text b { font-size: 0.86rem; }
.mod-line-text span { overflow-wrap: anywhere; font-size: 0.92rem; }
.mod-line-text small { color: var(--text-3); font-size: 0.8rem; }
.mod-line-actions { display: inline-flex; gap: 2px; }
.mod-more { justify-self: start; font-size: 0.86rem; }
.mod-empty { display: flex; align-items: center; gap: 10px; margin: 14px 0; color: var(--text-2); }
.mod-empty .icon { width: 18px; height: 18px; color: var(--ok); }
.mod-box { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.mod-box-head { display: flex; align-items: center; gap: 10px; }
.mod-box-head > .icon { width: 18px; height: 18px; color: var(--brand-text); }
.mod-box-head h3 { margin: 0; font-size: 1rem; }
.mod-box-link { margin-left: auto; font-size: 0.84rem; }
.mod-box-note { margin: -4px 0 0; color: var(--text-3); font-size: 0.86rem; }
.mod-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mod-step { --k: var(--brand); display: flex; align-items: center; gap: 4px; }
.mod-step.kick { --k: var(--warn); }
.mod-step.ban { --k: var(--danger); }
.mod-step-main { flex: 1; display: flex; align-items: center; gap: 12px; min-width: 0; padding: 8px 10px; border: 1px solid transparent; border-radius: var(--r-md); background: var(--surface-2); color: inherit; font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease; }
.mod-step-main:hover { border-color: var(--k); }
.mod-step-num { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; color: var(--k); background: color-mix(in srgb, var(--k) 18%, transparent); font-weight: 700; }
.mod-step-text { display: grid; min-width: 0; }
.mod-step-text small { color: var(--text-3); font-size: 0.8rem; }
.mod-rung-form { display: grid; gap: 10px; padding: 12px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.mod-rung-line { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mod-rung-line label { font-weight: 600; font-size: 0.9rem; }
.mod-rung-form .gw-quicks { margin-bottom: 0; }
.mod-rung-form .gw-quicks input { width: 150px; }
.mod-note { margin: 0; }
.mod-box .gw-quicks { align-items: center; margin-bottom: 0; }
.mod-box .gw-quicks input { width: 82px; }
.mod-field { display: grid; gap: 6px; }
.mod-field label { font-weight: 600; font-size: 0.9rem; }
.mod-switch-row { display: flex; align-items: center; gap: 12px; }
.mod-switch-row span { display: grid; }
.mod-switch-row small { color: var(--text-3); font-size: 0.82rem; }
.mod-feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.mod-feed li { display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 10px; font-size: 0.9rem; }
.mod-feed time { color: var(--text-3); font-size: 0.82rem; padding-top: 1px; }
.mod-feed small { color: var(--text-3); }
.mod-matrix { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); align-items: center; gap: 10px 14px; margin: 14px 0; padding: 14px 0; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); }
.mod-matrix > b { color: var(--text-3); font-size: 0.78rem; text-transform: uppercase; letter-spacing: .05em; }
.mod-matrix-name { font-weight: 600; }
.mod-cell { display: inline-flex; align-items: center; gap: 8px; }
.modal .section-note + .field { margin-top: 14px; }
@media (max-width: 700px) { .mod-stats { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .mod-cards { grid-template-columns: 1fr; } .mod-matrix { grid-template-columns: 1fr; } .mod-matrix > b { display: none; } }

/* Защита от рейдов: схема из шагов */
.ar-flow { display: grid; grid-template-columns: minmax(0, 1fr) 26px minmax(0, 1.3fr) 26px minmax(0, 1fr); gap: 10px; align-items: stretch; margin: 16px 0; }
.ar-arrow { display: grid; place-items: center; color: var(--text-3); }
.ar-arrow .icon { width: 20px; height: 20px; transform: rotate(-90deg); }
.ar-step, .ar-young { display: grid; gap: 14px; align-content: start; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.ar-young { max-width: 680px; }
.ar-step-head { display: flex; align-items: center; gap: 10px; }
.ar-step-head h3 { margin: 0; font-size: 1rem; }
.ar-step-num { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-size: 0.8rem; font-weight: 700; }
.ar-step-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--brand-50); color: var(--brand-text); }
.ar-step-icon .icon { width: 18px; height: 18px; }
.ar-row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ar-row > span:first-child { min-width: 64px; color: var(--text-2); }
.ar-options { display: grid; gap: 8px; }
.ar-option { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: transparent; color: var(--text-2); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s ease, background-color .15s ease; }
.ar-option:hover { border-color: var(--brand); }
.ar-option.on { border-color: var(--brand); background: var(--brand-50); color: var(--text); font-weight: 600; }
.ar-option .icon { width: 18px; height: 18px; color: var(--brand-text); }
.ar-timeout { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; color: var(--text-2); }
.ar-timeout:empty { display: none; }
.ar-active { margin: 0; color: var(--warn); font-weight: 600; }
.ar-active:empty { display: none; }
@media (max-width: 1000px) { .ar-flow { grid-template-columns: 1fr; } .ar-arrow .icon { transform: none; } }
.mod-auto-title { margin: 30px 0 12px; }
.mod-settings { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 14px; align-items: stretch; }
.mod-settings > div { display: grid; min-width: 0; }
.mod-settings > div:empty { display: none; }
.mod-settings .mod-box { align-content: start; }
.mod-head-note { display: block; margin: 0 0 0 6px; }
.mod-box-head:has(.mod-head-note) { flex-wrap: wrap; row-gap: 4px; }
.mod-steps { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.mod-rung-form { max-width: 620px; }
.mod-rung-group { display: grid; gap: 6px; }
.mod-rung-group > span { color: var(--text-3); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.mod-custom { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.mod-custom[hidden] { display: none; }

/* Числа со стрелками «−/+» (numberStepper в widgets.js): встроенных стрелок браузера нет, цифра «прокручивается» при шаге */
input[type="number"] { -moz-appearance: textfield; appearance: textfield; }
input[type="number"]::-webkit-outer-spin-button, input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.ns { display: inline-flex; align-items: center; gap: 6px; }
.ns-btn { width: 34px; padding: 0; background: var(--surface-2); font-size: 1.15rem; line-height: 1; user-select: none; touch-action: manipulation; transition: transform .18s var(--spring), background-color .15s ease, opacity .15s ease; }
.ns-btn:active:not(:disabled) { transform: scale(.88); }
.ns-btn:disabled { opacity: .35; cursor: default; }
.ns-field { display: inline-flex; overflow: hidden; width: 70px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s ease, box-shadow .15s ease; }
.ns-field:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.ns .ns-input, .ns .ns-input:focus { width: 100%; min-width: 0; padding-left: 4px; padding-right: 4px; border: 0; border-radius: 0; background: transparent; box-shadow: none; outline: none; text-align: center; font-variant-numeric: tabular-nums; font-weight: 600; }
.ns .ns-input.roll-up { animation: ns-up .26s var(--spring); }
.ns .ns-input.roll-down { animation: ns-down .26s var(--spring); }
.ns-unit { color: var(--text-3); margin-left: 2px; }
@keyframes ns-up { from { transform: translateY(70%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes ns-down { from { transform: translateY(-70%); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ns .ns-input.roll-up, .ns .ns-input.roll-down { animation: none; } .ns-btn { transition: none; } }

/* Стрелки «выше / ниже»: значок не переворачивается (у «выше» своя стрелка), при наведении сдвигается в свою сторону, при нажатии — «клюёт» */
.btn:hover:not(:disabled) .icon.nudge-up { transform: translateY(-3px); }
.btn:hover:not(:disabled) .icon.nudge-down { transform: translateY(3px); }
.btn:active:not(:disabled) .icon.nudge-up { transform: translateY(-5px) scale(.9); }
.btn:active:not(:disabled) .icon.nudge-down { transform: translateY(5px) scale(.9); }
.icon.nudge-up, .icon.nudge-down { transition: transform .2s var(--spring); }

/* Срок: число + переключатель единицы (durationInput в widgets.js) */
.dur { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.dur .dur-num { width: 96px; text-align: center; font-variant-numeric: tabular-nums; }
.dur-units { display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); }
.dur-unit { min-width: 46px; padding: 6px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: inherit; font-size: 0.9rem; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, transform .2s var(--spring); }
.dur-unit:hover:not(.on) { color: var(--text); background: var(--brand-50); }
.dur-unit:active { transform: scale(.92); }
.dur-unit.on { background: var(--brand); color: var(--on-brand); font-weight: 600; }

/* Вкладка «Команды» модуля: список как в подсказке слэш-команд Discord */
.mc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.mc-head .section-note { margin: 0 0 14px; }
.mc-bulk { display: inline-flex; align-items: center; gap: 8px; flex: none; }
.mc-list { display: grid; gap: 8px; }
.mc-row { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  transition: border-color .15s ease, background-color .15s ease; }
.mc-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
.mc-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--brand-50); color: var(--brand-text); transition: transform .25s var(--spring), background-color .2s ease, color .2s ease; }
.mc-ico .icon { width: 19px; height: 19px; }
.mc-row:hover .mc-ico { transform: rotate(-8deg) scale(1.06); }
.mc-main { display: grid; gap: 3px; min-width: 0; transition: opacity .2s ease; }
.mc-row.off .mc-main, .mc-row.off .mc-ico { opacity: .45; }
.mc-title { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; }
.mc-title b { font-size: 1rem; }
.mc-param { padding: 1px 9px; border: 1px dashed var(--border-strong); border-radius: 999px; color: var(--text-3); font-size: 0.8rem; line-height: 1.6; }
.mc-param.req { border-style: solid; border-color: transparent; color: var(--brand-text); background: var(--brand-50); }
.mc-desc { color: var(--text-2); overflow-wrap: anywhere; }
.mc-access { display: flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 0.84rem; }
.mc-access .icon { width: 14px; height: 14px; flex: none; }
.mc-side { display: flex; align-items: center; gap: 14px; }
.mc-all { display: inline-flex; align-items: center; gap: 4px; margin-top: 14px; font-size: 0.9rem; }
.mc-all .icon { width: 14px; height: 14px; }
@media (max-width: 720px) { .mc-row { grid-template-columns: 40px minmax(0, 1fr); } .mc-side { grid-column: 1 / -1; justify-content: space-between; } .mc-head { flex-direction: column; gap: 4px; } }

/* Рейтинг: начисление опыта — «рецепт» предложениями и калькулятор справа */
.lv-earn { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 36px; align-items: start; }
.lv-earn-main { display: grid; gap: 22px; min-width: 0; }
.lv-block { display: grid; gap: 10px; }
.lv-block-head { display: flex; align-items: center; gap: 10px; }
.lv-block-head > .icon { width: 18px; height: 18px; color: var(--brand-text); }
.lv-block-head h3 { margin: 0; font-size: 1.02rem; }
.lv-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; max-width: 640px; }
.lv-f { display: grid; gap: 6px; align-content: start; }
.lv-f label { color: var(--text-2); font-size: 0.86rem; }
.lv-inp { position: relative; display: flex; align-items: center; }
.lv-inp input.lv-in { width: 100%; padding-right: 46px; font-weight: 600; font-variant-numeric: tabular-nums; }
.lv-inp.before input.lv-in { padding-right: 12px; padding-left: 32px; }
.lv-inp .unit { position: absolute; right: 12px; color: var(--text-3); font-size: 0.84rem; pointer-events: none; }
.lv-inp.before .unit { right: auto; left: 12px; font-weight: 700; }
.lv-hint { display: block; margin: 0; max-width: 640px; color: var(--text-3); font-size: 0.86rem; line-height: 1.5; }
.lv-earn { margin-top: 18px; }
.lv-calc { position: sticky; top: 88px; display: grid; gap: 14px; padding: 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); }
.lv-calc-pick { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-2); }
.lv-calc-chips { margin: 0; }
.lv-calc-result { display: grid; gap: 10px; padding-top: 14px; border-top: 1px solid var(--border); }
.lv-calc-xp { display: grid; }
.lv-calc-xp b { font: 800 1.9rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.lv-calc-xp span { color: var(--text-3); font-size: 0.86rem; }
.lv-calc-line { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.lv-calc-line .icon { width: 17px; height: 17px; color: var(--brand-text); flex: none; }
.lv-calc-line b { color: var(--text); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .lv-earn { grid-template-columns: 1fr; } .lv-calc { position: static; } }

/* Рейтинг: награды — путь по уровням */
.lv-track { list-style: none; margin: 18px 0 0; padding: 0; display: grid; }
.lv-stop { position: relative; display: flex; align-items: center; gap: 16px; padding-bottom: 14px; }
.lv-stop:not(:last-child)::after { content: ""; position: absolute; left: 25px; top: 52px; bottom: -2px; width: 2px; border-radius: 2px; background: var(--border-strong); }
.lv-stop-level { flex: none; position: relative; z-index: 1; display: grid; place-items: center; align-content: center; width: 52px; height: 52px; border-radius: 50%;
  background: var(--brand-50); color: var(--brand-text); border: 2px solid var(--brand); line-height: 1; }
.lv-stop-level small { font-size: 0.62rem; letter-spacing: .06em; text-transform: uppercase; opacity: .8; }
.lv-stop-level b { font: 800 1.1rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.lv-stop-body { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; padding: 10px 12px 10px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  transition: border-color .15s ease, transform .25s var(--spring); }
.lv-stop:hover .lv-stop-body { border-color: var(--border-strong); transform: translateX(3px); }
.lv-reward { display: flex; align-items: center; gap: 10px; min-width: 0; }
.lv-reward b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-reward small { color: var(--text-3); }
.lv-reward .icon { width: 18px; height: 18px; color: var(--brand-text); }
.lv-dot { flex: none; width: 14px; height: 14px; border-radius: 50%; background: var(--text-3); }
@media (prefers-reduced-motion: no-preference) { .lv-stop { animation: wz-card .4s var(--spring) both; } .lv-stop:nth-child(2) { animation-delay: .05s; } .lv-stop:nth-child(3) { animation-delay: .1s; } .lv-stop:nth-child(4) { animation-delay: .15s; } }

/* Рейтинг: множители ролей и бусты */
.lv-sub { margin: 34px 0 14px; }
.lv-sub h2 { margin: 0; }
.lv-empty { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-2); line-height: 1.5; }
.lv-empty .icon { flex: none; width: 20px; height: 20px; color: var(--text-3); }
.lv-mult-field { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.lv-times { color: var(--text-3); font-weight: 700; }
.lv-mult-field input.lv-mult-input { width: 92px; text-align: center; font-weight: 600; }
.lv-mtiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; margin-top: 12px; }
.lv-mtile { display: flex; align-items: center; gap: 4px; padding: 4px 6px 4px 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s ease; }
.lv-mtile:hover { border-color: var(--border-strong); }
.lv-mtile-main { flex: 1; display: flex; align-items: center; gap: 10px; min-width: 0; padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.lv-mtile-main:hover { background: var(--surface-2); }
.lv-mtile-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-mtile-x { font: 800 1.15rem/1 var(--font-head); color: var(--brand-text); font-variant-numeric: tabular-nums; }
.lv-tz { margin: -6px 0 14px; color: var(--text-2); font-size: 0.9rem; }
.lv-tz .icon { width: 15px; height: 15px; margin-right: 6px; vertical-align: -3px; color: var(--text-3); }
.lv-boosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 12px; }
.lv-boost { --tone: var(--text-3); display: grid; gap: 12px; align-content: start; padding: 16px; border: 1px solid var(--border); border-left: 3px solid var(--tone); border-radius: var(--r-lg); background: var(--surface); }
.lv-boost.on { --tone: var(--ok); border-color: color-mix(in srgb, var(--ok) 45%, var(--border)); }
.lv-boost.wait { --tone: var(--brand); }
.lv-boost.off { opacity: .6; }
.lv-boost-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.lv-boost-top > div { display: grid; gap: 3px; min-width: 0; }
.lv-boost-name { overflow-wrap: anywhere; }
.lv-boost-status { display: inline-flex; align-items: center; gap: 6px; color: var(--text-3); font-size: 0.84rem; }
.lv-boost-status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tone); }
.lv-boost-x { font: 800 1.7rem/1 var(--font-head); color: var(--tone); font-variant-numeric: tabular-nums; }
.lv-boost.wait .lv-boost-x { color: var(--brand-text); }
.lv-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.lv-week span { padding: 5px 0; border-radius: var(--r-sm); background: var(--surface-2); color: var(--text-3); font-size: 0.78rem; text-align: center; }
.lv-week span.on { background: color-mix(in srgb, var(--tone) 22%, transparent); color: var(--text); font-weight: 600; }
.lv-boost-when { display: flex; align-items: center; gap: 6px; margin: 0; color: var(--text-2); font-size: 0.9rem; }
.lv-boost-when .icon { width: 15px; height: 15px; color: var(--text-3); flex: none; }
.lv-boost-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.lv-boost-form { display: grid; gap: 26px; margin-top: 6px; }
.lv-boost-form .field { display: grid; gap: 8px; align-content: start; }
.lv-group { display: grid; gap: 18px; }
.lv-group + .lv-group { padding-top: 24px; border-top: 1px solid var(--border); }
.lv-boost-form .lv-hint { margin-top: -6px; }
.lv-time-row { display: grid; grid-template-columns: repeat(2, minmax(0, 220px)); gap: 14px; }
.lv-boost-form .lv-form-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0; padding-top: 4px; }
.lv-foot-btns { display: flex; gap: 10px; }
.lv-days { display: flex; flex-wrap: wrap; gap: 6px; }
.lv-day { min-width: 46px; padding: 8px 0; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: transparent; color: var(--text-2); font: inherit; cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .2s var(--spring); }
.lv-day:hover { border-color: var(--brand); }
.lv-day:active { transform: scale(.92); }
.lv-day.on { background: var(--brand); border-color: var(--brand); color: var(--on-brand); font-weight: 600; }
.lv-presets { display: flex; gap: 16px; margin-top: 2px; font-size: 0.88rem; }
.lv-when { display: grid; gap: 16px; }
.lv-when[hidden], .lv-boost-form [hidden] { display: none; }

/* Рейтинг: участники — пьедестал и список со шкалой опыта */
.lv-ava { flex: none; width: 38px; height: 38px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.lv-ava.lg { width: 56px; height: 56px; }
.lv-ava.xl { width: 74px; height: 74px; }
.lv-ava-empty { display: grid; place-items: center; background: var(--brand-50); color: var(--brand-text); font-weight: 700; }
.lv-ava-empty.lg { font-size: 1.3rem; }
.lv-ava-empty.xl { font-size: 1.7rem; }
.lv-podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; margin: 10px auto 26px; max-width: 640px; }
.lv-pod { --tone: var(--text-3); flex: 1; display: grid; justify-items: center; align-content: start; gap: 4px; padding: 14px 8px 0; min-width: 0; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; }
.lv-pod.p1 { --tone: #e0a800; }
.lv-pod.p2 { --tone: #9aa4b2; }
.lv-pod.p3 { --tone: #c47a3d; }
.lv-pod .lv-ava { outline: 3px solid var(--tone); outline-offset: 2px; transition: transform .25s var(--spring); }
.lv-pod:hover .lv-ava { transform: translateY(-4px) scale(1.04); }
.lv-pod-name { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 6px; }
.lv-pod-lvl { color: var(--brand-text); font-weight: 600; font-size: 0.9rem; }
.lv-pod-xp { color: var(--text-3); font-size: 0.8rem; font-variant-numeric: tabular-nums; }
.lv-pod-step { display: grid; place-items: center; width: 100%; margin-top: 8px; border-radius: var(--r-md) var(--r-md) 0 0; font: 800 1.8rem/1 var(--font-head); color: var(--tone);
  background: color-mix(in srgb, var(--tone) 16%, var(--surface)); border: 1px solid color-mix(in srgb, var(--tone) 40%, var(--border)); border-bottom: 0; }
.lv-pod.p1 .lv-pod-step { height: 88px; }
.lv-pod.p2 .lv-pod-step { height: 64px; }
.lv-pod.p3 .lv-pod-step { height: 46px; }
.lv-rows { display: grid; gap: 6px; margin-top: 12px; }
.lv-row { display: grid; grid-template-columns: 34px 38px minmax(0, 1fr) auto auto auto; align-items: center; gap: 14px; padding: 8px 12px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
  transition: border-color .15s ease, background-color .15s ease; }
.lv-row:hover { border-color: var(--border-strong); background: var(--surface-2); }
.lv-place { color: var(--text-3); font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }
.lv-who { display: grid; gap: 4px; min-width: 0; }
.lv-who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lv-who small { color: var(--text-3); font-size: 0.78rem; }
.lv-bar { height: 5px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.lv-bar span { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .6s var(--spring); }
.lv-lvl { display: inline-flex; align-items: baseline; gap: 4px; padding: 4px 12px; border-radius: 99px; background: var(--brand-50); color: var(--brand-text); font-weight: 700; font-variant-numeric: tabular-nums; }
.lv-lvl small { font-size: 0.7rem; font-weight: 600; opacity: .8; }
.lv-voice { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 0.86rem; white-space: nowrap; }
.lv-voice .icon { width: 15px; height: 15px; color: var(--text-3); }
.lv-reset { margin-top: 28px; }
@media (max-width: 720px) { .lv-row { grid-template-columns: 28px 38px minmax(0, 1fr) auto; } .lv-voice { display: none; } .lv-podium { gap: 4px; } }
.lv-search { width: 280px; max-width: 100%; }
.lv-podium { border-bottom: 1px solid var(--border); }
.lv-extra { display: grid; gap: 20px; padding-top: 10px; }
.lv-extra .lv-block + .lv-block { padding-top: 20px; border-top: 1px solid var(--border); }
.lv-extra .lv-block-head h3 { font-size: 0.96rem; }

/* Аудит: настройки */
.au-set { display: grid; gap: 28px; max-width: 760px; }
.au-block { display: grid; gap: 14px; }
.au-block + .au-block { padding-top: 24px; border-top: 1px solid var(--border); }
.au-opts { display: grid; gap: 4px; }
.au-opt { display: flex; align-items: flex-start; gap: 14px; padding: 10px 12px; margin: 0 -12px; border-radius: var(--r-md); transition: background-color .15s ease; }
.au-opt:hover { background: var(--surface-2); }
.au-opt > div { display: grid; gap: 2px; min-width: 0; }
.au-opt b { font-weight: 600; }
.au-opt span { color: var(--text-3); font-size: 0.88rem; }
.au-keep { margin: 0; }
.au-days-row { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.au-days-row input.au-days { width: 100px; text-align: center; font-weight: 600; }

/* Аудит: журнал — лента по дням вместо таблицы */
.au-feed { display: grid; gap: 4px; margin-top: 8px; }
.au-day { margin: 18px 0 8px; color: var(--text-3); font-size: 0.8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.au-day:first-child { margin-top: 6px; }
.au-list { display: grid; gap: 6px; }
.au-item { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s ease; }
.au-item:hover, .au-item.open { border-color: var(--border-strong); }
.au-main { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto 16px; align-items: center; gap: 14px; width: 100%; padding: 10px 14px; border: 0; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; border-radius: var(--r-md); }
.au-main:hover { background: var(--surface-2); }
.au-ico { --k: var(--text-3); display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; color: var(--k); background: color-mix(in srgb, var(--k) 15%, transparent); }
.au-ico.warn { --k: var(--warn); } .au-ico.danger { --k: var(--danger); } .au-ico.ok { --k: var(--ok); } .au-ico:not(.warn):not(.danger):not(.ok) { --k: var(--brand-text); }
.au-ico .icon { width: 18px; height: 18px; }
.au-body { display: grid; gap: 4px; min-width: 0; }
.au-line { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.au-kind.warn { color: var(--warn); } .au-kind.danger { color: var(--danger); } .au-kind.ok { color: var(--ok); }
.au-cat { color: var(--text-3); font-size: 0.8rem; }
.au-who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.au-who b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-who small { color: var(--text-3); font-size: 0.84rem; white-space: nowrap; }
.au-ava { flex: none; width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.au-ava-empty { display: grid; place-items: center; background: var(--brand-50); color: var(--brand-text); font-size: 0.7rem; font-weight: 700; }
.au-sub { display: flex; align-items: center; gap: 12px; min-width: 0; }
.au-text { min-width: 0; color: var(--text-2); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.au-who + .au-text::before { content: "·"; margin-right: 12px; color: var(--text-3); }
.au-side { display: grid; justify-items: end; gap: 4px; color: var(--text-3); font-size: 0.84rem; font-variant-numeric: tabular-nums; }
.au-chev { width: 16px; height: 16px; color: var(--text-3); transition: transform .25s var(--spring); }
.au-item.open .au-chev { transform: rotate(180deg); }
.au-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px 20px; padding: 4px 16px 16px 66px; }
.au-detail b { display: block; margin-bottom: 2px; color: var(--text-3); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.au-detail p { margin: 0; overflow-wrap: anywhere; }
.au-wide { grid-column: 1 / -1; }
.au-actions { grid-column: 1 / -1; display: flex; gap: 8px; }
@media (max-width: 720px) { .au-main { grid-template-columns: 38px minmax(0, 1fr) auto; } .au-chev { display: none; } .au-detail { padding-left: 16px; } }

/* Аудит: каналы — куда уходит категория и короткие строки выключенных событий */
.sl-dest { color: var(--text-3); font-size: 0.86rem; white-space: nowrap; padding: 3px 10px; border-radius: 99px; background: var(--surface-2); }
.sl-dest.on { color: var(--brand-text); background: var(--brand-50); }
.sl-dest.warn { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); }
.sl-row.idle { opacity: .85; }
.sl-off { grid-column: 3 / 5; color: var(--text-3); font-size: 0.86rem; }
@media (max-width: 760px) { .sl-dest { display: none; } .sl-off { grid-column: 1 / -1; } }

/* Викс+: сравнение «бесплатно и тарифы» одной таблицей */
.pm-compare { width: 100%; border-collapse: separate; border-spacing: 0; min-width: 520px; }
.pm-compare th, .pm-compare td { padding: 12px 16px; text-align: center; border-bottom: 1px solid var(--border); }
.pm-compare th:first-child, .pm-compare td:first-child { text-align: left; }
.pm-compare thead th { position: relative; color: var(--text-2); font-weight: 600; font-size: 0.92rem; vertical-align: bottom; }
.pm-compare thead th small { display: block; margin-top: 2px; color: var(--brand-text); font-size: 0.72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.pm-compare tbody tr:last-child td { border-bottom: 0; }
.pm-compare .cur { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.pm-compare thead .cur { border-radius: var(--r-md) var(--r-md) 0 0; color: var(--text); }
.pm-compare tbody tr:last-child .cur { border-radius: 0 0 var(--r-md) var(--r-md); }
.pm-feat { display: inline-flex; align-items: center; gap: 10px; }
.pm-feat .icon { width: 18px; height: 18px; color: var(--brand-text); flex: none; }
.pm-yes { display: inline-grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: color-mix(in srgb, var(--ok) 18%, transparent); color: var(--ok); }
.pm-yes .icon { width: 14px; height: 14px; }
.pm-no { color: var(--text-3); }
.pm-free { margin: 14px 0 0; color: var(--text-3); font-size: 0.9rem; }
.pm-none { display: flex; align-items: center; gap: 14px; padding: 18px 20px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); color: var(--text-2); line-height: 1.5; }
.pm-none .icon { flex: none; width: 20px; height: 20px; color: var(--text-3); }

/* Аудит → Каналы: одна строка на категорию, подробности по событиям — в окне */
.sl2 { display: grid; gap: 10px; margin-top: 14px; }
.sl2-row { display: grid; grid-template-columns: 44px minmax(0, 1fr) 260px 178px 46px; align-items: center; gap: 16px; padding: 14px 18px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color .15s ease; }
.sl2-row:hover { border-color: var(--border-strong); }
.sl2-icon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 13px; background: var(--brand-50); color: var(--brand-text); }
.sl2-icon .icon { width: 21px; height: 21px; }
.sl2-text { display: grid; gap: 3px; min-width: 0; }
.sl2-text > span:not(.sl2-state) { color: var(--text-2); font-size: 0.88rem; }
.sl2-state { display: inline-flex; align-items: center; gap: 7px; color: var(--text-3); font-size: 0.84rem; }
.sl2-state .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.sl2-state.on { color: var(--ok); } .sl2-state.on .dot { background: var(--ok); }
.sl2-state.warn { color: var(--warn); } .sl2-state.warn .dot { background: var(--warn); }
.sl2-more { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; overflow: hidden; width: 100%; height: 42px; min-height: 42px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); color: var(--text); font: inherit; font-size: 0.92rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer;
  transition: border-color .15s ease, background-color .15s ease, transform .2s var(--spring); }
.sl2-more:hover { border-color: var(--brand); background: var(--brand-50); }
.sl2-more:active { transform: scale(.97); }
.sl2-more .icon { width: 16px; height: 16px; flex: none; color: var(--text-2); }
.sl2-n { display: inline-block; padding: 3px 8px; border-radius: 99px; line-height: 1; background: var(--surface-3); color: var(--text-2); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.sl2-events { display: grid; gap: 2px; margin-top: 10px; }
.sl2-event { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 12px 4px; border-top: 1px solid var(--border); }
.sl2-event:first-child { border-top: 0; }
.sl2-event.off .sl2-event-text b { color: var(--text-2); }
.sl2-event-text { display: grid; gap: 2px; min-width: 0; }
.sl2-event-text span { color: var(--text-3); font-size: 0.86rem; }
.sl2-event-ctl { display: flex; align-items: center; gap: 10px; }
.sl2-event-ctl > :first-child { width: 230px; }
@media (max-width: 900px) { .sl2-row { grid-template-columns: 44px minmax(0, 1fr) 178px 46px; } .sl2-row > .switch { grid-column: 4; } .sl2-ctl { grid-column: 1 / -1; order: 5; } .sl2-more { order: 4; } }
@media (max-width: 720px) { .sl2-event { grid-template-columns: auto 1fr; } .sl2-event-ctl { grid-column: 1 / -1; flex-wrap: wrap; } .sl2-event-ctl > :first-child { width: 100%; } }

/* Викс+: главная карточка с прогрессом, шаги подключения, оформление таблицы */
.pm-prog { display: grid; gap: 8px; margin-top: 16px; max-width: 460px; }
.pm-prog-text { color: var(--text-2); font-size: 0.92rem; }
.pm-prog-text b { color: var(--text); font: 800 1.2rem/1 var(--font-head); margin-right: 2px; }
.pm-bar { height: 8px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.pm-bar span { display: block; height: 100%; border-radius: 99px; background: var(--brand); transition: width .7s var(--spring); }
.pm-teaser { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.pm-teaser-label { color: var(--text-3); font-size: 0.84rem; margin-right: 2px; }
.pm-tchip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border: 1px solid var(--border-strong); border-radius: 99px; color: var(--text-2); font-size: 0.86rem; }
.pm-tchip .icon { width: 14px; height: 14px; color: var(--brand-text); }
.pm-tchip.more { color: var(--text-3); border-style: dashed; padding-left: 12px; }
.pm-how { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.pm-how li { display: flex; gap: 14px; padding: 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.pm-how li > div { display: grid; gap: 4px; align-content: start; min-width: 0; }
.pm-how p { margin: 0; color: var(--text-2); font-size: 0.9rem; line-height: 1.45; }
.pm-how .link-btn { justify-self: start; margin-top: 4px; font-size: 0.9rem; }
.pm-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 700; font-size: 0.9rem; }
.pm-compare { border: 1px solid var(--border); border-radius: var(--r-md); overflow: hidden; }
.pm-compare tbody tr { transition: background-color .15s ease; }
.pm-compare tbody tr:hover { background: var(--surface-2); }
.pm-compare thead th { padding-top: 16px; padding-bottom: 14px; color: var(--text); font-size: 1rem; background: var(--surface-2); }
.pm-compare thead th.cur { background: color-mix(in srgb, var(--brand) 16%, var(--surface-2)); border-radius: 0; }
.pm-compare tbody tr:last-child .cur { border-radius: 0; }
.pm-cmp-note { margin: 6px 0 18px; }
.pm-free { margin-top: 16px; }

/* Автоветки: список каналов, общие параметры и предпросмотр канала */
.at-layout { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 32px; align-items: start; }
.at-list { display: grid; gap: 8px; }
.at-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 12px 12px 12px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s ease; }
.at-row:hover { border-color: var(--border-strong); }
.at-row.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.at-row-main { display: grid; gap: 4px; min-width: 0; }
.at-row-name { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.at-row-name b { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.at-row-name small { color: var(--text-3); }
.at-problem { display: flex; align-items: flex-start; gap: 6px; color: var(--warn); font-size: 0.86rem; }
.at-problem .icon { flex: none; width: 15px; height: 15px; margin-top: 2px; }
.at-sw { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 0.88rem; cursor: pointer; }
.at-all { display: grid; gap: 16px; margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--border); }
.at-all > .field { max-width: 560px; }
.at-sec { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.at-sec input.at-seconds { width: 84px; text-align: center; font-weight: 600; }
.at-prev { position: sticky; top: 88px; display: grid; gap: 10px; }
.at-prev-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-3); font-size: 0.8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.at-seg { position: relative; isolation: isolate; display: inline-flex; padding: 3px; gap: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface-2); letter-spacing: 0; text-transform: none; }
.at-seg button { position: relative; z-index: 1; white-space: nowrap; padding: 5px 12px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--text-2); font: inherit; font-size: 0.84rem; cursor: pointer; transition: color .25s ease; }
.at-seg button:not(.on):hover { color: var(--text); }
.at-seg button.on { color: var(--on-brand); font-weight: 600; }
.seg-thumb { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; border-radius: var(--r-sm); background: var(--brand); transition: transform .32s var(--spring), width .32s var(--spring), height .32s var(--spring); pointer-events: none; }
.at-discord { display: grid; gap: 14px; min-height: 250px; align-content: start; }
.at-pic { display: grid; place-items: center; width: 100%; max-width: 280px; height: 140px; margin-top: 6px; border-radius: 6px; background: #1e1f22; color: #6d6f78; }
.at-pic .icon { width: 36px; height: 36px; }
.at-react { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; padding: 2px 8px; border-radius: 8px; background: rgba(88, 101, 242, 0.25); border: 1px solid #5865f2; color: #dbdee1; }
.at-react .icon { width: 14px; height: 14px; }
.at-react small, .at-note { color: #949ba4; font-size: 0.78rem; }
.at-note { display: block; margin-top: 4px; }
.at-gone { opacity: .5; text-decoration: line-through; }
.at-thread { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 8px; padding: 8px 12px; max-width: 360px; border-radius: 6px; background: #2b2d31; color: #dbdee1; }
.at-thread .icon { width: 16px; height: 16px; color: #949ba4; }
.at-thread small { flex-basis: 100%; color: #949ba4; font-size: 0.78rem; }
@media (max-width: 1100px) { .at-layout { grid-template-columns: 1fr; } .at-prev { position: static; } .at-row { grid-template-columns: minmax(0, 1fr) auto; } .at-sw { grid-column: 1 / -1; order: 3; } }

/* Закреплённые сообщения */
.st-note { margin: 0 0 16px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(380px, 1fr)); gap: 14px; align-items: start; }
.st-item { display: grid; gap: 12px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); transition: border-color .15s ease; }
.st-item:hover { border-color: var(--border-strong); }
.st-item.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.st-item-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.st-item-title { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-item-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-item-title small { color: var(--text-3); }
.st-hash { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-50); color: var(--brand-text); flex: none; }
.st-hash .icon { width: 16px; height: 16px; }
.st-item-actions { display: flex; align-items: center; gap: 6px; flex: none; }
.st-mock { padding: 12px 14px; max-height: 210px; overflow: hidden; position: relative; }
.st-mock .dc-embed { max-width: 100%; }
.st-mock .e-desc { overflow-wrap: anywhere; }
.st-empty-text { color: #949ba4; font-style: italic; }
.st-editor { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.st-form { display: grid; gap: 18px; }
.st-form .field { display: grid; gap: 8px; }
.st-form textarea { min-height: 190px; resize: vertical; }
.st-label-row { display: flex; align-items: baseline; justify-content: space-between; }
.st-count { color: var(--text-3); font-size: 0.82rem; font-variant-numeric: tabular-nums; }
.st-fixed { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); font-weight: 600; width: fit-content; }
.st-fixed .icon { width: 16px; height: 16px; color: var(--text-3); }
.st-side { position: sticky; top: 0; display: grid; gap: 10px; }
.st-side-title { color: var(--text-3); font-size: 0.8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.st-side .st-mock { max-height: none; }
@media (max-width: 900px) { .st-editor { grid-template-columns: 1fr; } .st-side { position: static; } .st-grid { grid-template-columns: 1fr; } }
.dc-line, .dc-quote, .dc-li, .dc-h { overflow-wrap: anywhere; }
.dc-line { min-height: 1.375em; }
.dc-emoji { width: 1.375em; height: 1.375em; object-fit: contain; vertical-align: -0.3em; }
.dc-code { padding: 1px 5px; border-radius: 4px; background: #1e1f22; font: 0.85em/1.4 ui-monospace, Consolas, monospace; }
.dc-link { color: #00a8fc; }
.dc-quote { padding-left: 12px; border-left: 4px solid #4e5058; margin: 2px 0; }
.dc-li { display: flex; gap: 10px; padding-left: 6px; }
.dc-h { font-weight: 700; margin-top: 6px; }
.dc-h1 { font-size: 1.4em; } .dc-h2 { font-size: 1.2em; } .dc-h3 { font-size: 1.05em; }
.st-style { width: fit-content; }
.st-plain { color: #dbdee1; }
.st-form .field[hidden] { display: none; }

/* Автоответы */
.ar-tools { margin-bottom: 12px; }
.ar-search { max-width: 320px; }
.ar-list { display: grid; gap: 8px; }
.ar-rule { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 16px; padding: 14px 14px 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); transition: border-color .15s ease; }
.ar-rule:hover { border-color: var(--border-strong); }
.ar-rule.warn { border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.ar-rule.off .ar-rule-main, .ar-rule.off .ar-place { opacity: .5; }
.ar-rule-main { display: grid; gap: 8px; min-width: 0; }
.ar-rule-trig { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.ar-rule-trig small { margin-left: 4px; color: var(--text-3); font-size: 0.8rem; }
.ar-more { color: var(--text-3); font-size: 0.84rem; }
.ar-rule-reply { display: flex; align-items: flex-start; gap: 8px; color: var(--text-2); font-size: 0.92rem; }
.ar-rule-reply .icon { flex: none; width: 15px; height: 15px; margin-top: 3px; color: var(--text-3); }
.ar-rule-reply span { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.ar-place { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 9px; border-radius: 99px; background: var(--surface-2); color: var(--text-2); font-size: 0.86rem; white-space: nowrap; }
.ar-place .icon { width: 14px; height: 14px; color: var(--text-3); }
.ar-place.all { background: var(--brand-50); color: var(--brand-text); } .ar-place.all .icon { color: var(--brand-text); }
.ar-rule-actions { display: flex; align-items: center; gap: 6px; }
.ar-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 6px 4px 12px; border-radius: 99px; background: var(--brand-50); color: var(--brand-text); font-size: 0.9rem; font-weight: 500; }
.ar-chip.static { padding: 4px 12px; }
.ar-chip button { display: grid; place-items: center; width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: inherit; cursor: pointer; transition: background-color .15s ease, transform .2s var(--spring); }
.ar-chip button:hover { background: color-mix(in srgb, var(--brand) 25%, transparent); }
.ar-chip button:active { transform: scale(.85); }
.ar-chip button .icon { width: 12px; height: 12px; }
.ar-chipbox { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; min-height: 46px; padding: 6px 10px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--surface); cursor: text; transition: border-color .15s ease, box-shadow .15s ease; }
.ar-chipbox:focus-within { border-color: var(--brand); box-shadow: 0 0 0 3px var(--brand-50); }
.ar-chips { display: contents; }
.ar-chipbox input.ar-chip-input { flex: 1; min-width: 160px; width: auto; padding: 6px 4px; border: 0; background: transparent; box-shadow: none; outline: none; }
.ar-verdict { display: inline-flex; align-items: center; gap: 8px; width: fit-content; padding: 6px 14px; border-radius: 99px; background: var(--surface-2); color: var(--text-3); font-size: 0.88rem; }
.ar-verdict .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); }
.ar-verdict.on { color: var(--ok); background: color-mix(in srgb, var(--ok) 14%, transparent); } .ar-verdict.on .dot { background: var(--ok); }
.ar-verdict.off { color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, transparent); } .ar-verdict.off .dot { background: var(--warn); }
.ar-mock { display: grid; gap: 14px; min-height: 150px; align-content: start; }
.ar-mock-empty { color: #6d6f78; font-style: italic; padding: 20px 0; text-align: center; }
.ar-ref { display: flex; align-items: center; gap: 6px; margin-bottom: 4px; color: #949ba4; font-size: 0.8rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.ar-ref .icon { width: 13px; height: 13px; transform: scaleX(-1); flex: none; }
.ar-ref b { color: #c9cdfb; font-weight: 500; }
.ar-reply .dc-avatar { align-self: end; }
@media (max-width: 900px) { .ar-rule { grid-template-columns: auto minmax(0, 1fr); } .ar-place, .ar-rule-actions { grid-column: 2; justify-self: start; } }
.ar-place { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }

/* Переключатели с подложкой в других раскладках: пилюли (gw-modes) и единицы срока (dur-units) */
.gw-modes.seg-slide, .dur-units.seg-slide { position: relative; isolation: isolate; }
.gw-modes.seg-slide .gw-mode, .dur-units.seg-slide .dur-unit { position: relative; z-index: 1; transition: color .25s ease; }
.gw-modes.seg-slide .gw-mode.on, .dur-units.seg-slide .dur-unit.on { background: transparent; color: var(--on-brand); }
.gw-modes.seg-slide .seg-thumb { border-radius: 999px; }
.dur-units.seg-slide .seg-thumb { border-radius: var(--r-sm); }
.dur-units.seg-slide .dur-unit:not(.on):hover { background: transparent; color: var(--text); }

/* Вкладки страницы модуля: подложка скользит к выбранной вкладке */
.segmented.seg-slide { position: relative; isolation: isolate; }
.segmented.seg-slide .seg { position: relative; z-index: 1; transition: color .25s ease; }
.segmented.seg-slide .seg[aria-selected="true"] { background: transparent; box-shadow: none; }
.segmented .seg-thumb.tab-thumb { background: var(--surface); box-shadow: 0 0 0 1px var(--border); border-radius: var(--r-sm); }

/* Тикеты: рабочий экран, категории, предпросмотры */
.tk-alert-box { display: grid; gap: 8px; padding: 14px 18px; margin-bottom: 18px; border: 1px solid var(--warn); border-radius: var(--r-md); background: var(--warn-soft); justify-items: start; }
.tk-alert-box .lv-block-head .icon { color: var(--warn); }
.tk-alert-box ul { margin: 0; padding-left: 18px; color: var(--text-2); line-height: 1.5; }
.tk-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; }
.tk-tile { display: grid; gap: 4px; text-align: left; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); color: var(--text); font: inherit; cursor: pointer; transition: border-color .2s ease, background .2s ease; }
.tk-tile:hover { border-color: var(--brand); }
.tk-tile.on { border-color: var(--brand); background: var(--brand-50); }
.tk-tile-n { font-size: 1.7rem; font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.tk-tile.warn .tk-tile-n { color: var(--warn); }
.tk-tile-l { display: flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 0.88rem; }
.tk-tile-l .icon { width: 15px; height: 15px; }
.tk-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 12px; }
.tk-search { flex: 1 1 200px; min-width: 0; }
.tk-list { display: grid; }
.tk-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.2fr) minmax(150px, 1.2fr) auto; gap: 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--border); }
.tk-row:first-child { border-top: 0; }
.tk-cat-badge { display: flex; align-items: center; gap: 8px; font-weight: 600; min-width: 0; }
.tk-cat-badge .icon { width: 18px; height: 18px; color: var(--brand-text); }
.tk-who, .tk-staff { display: flex; align-items: center; gap: 10px; min-width: 0; }
.tk-who > div, .tk-staff > div { display: grid; min-width: 0; line-height: 1.25; }
.tk-who b, .tk-staff b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tk-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.tk-ava-empty { display: grid; place-items: center; background: var(--brand-50); color: var(--brand-text); font-size: 0.85rem; font-weight: 700; }
.tk-wait, .tk-ok { display: inline-flex; align-items: center; gap: 8px; color: var(--text-2); }
.tk-wait .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warn); }
.tk-ok .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ok); }
.tk-actions { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
.tk-btn-emoji { margin-right: 0.4em; }
img.tk-btn-emoji { width: 1.15em; height: 1.15em; vertical-align: -0.2em; }
@media (max-width: 760px) { .tk-row { grid-template-columns: 1fr; gap: 8px; } .tk-actions { justify-content: flex-start; } }

.tk-cat-list { display: grid; }
.tk-cat-row { display: grid; grid-template-columns: auto minmax(140px, 220px) minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--border); background: var(--bg, transparent); }
.tk-cat-row:first-child { border-top: 0; }
.tk-grip { color: var(--text-3); cursor: grab; display: grid; }
.tk-grip .icon { width: 18px; height: 18px; }
.tk-cat-btn { justify-self: start; display: inline-flex; align-items: center; padding: 6px 16px; border-radius: 4px; background: #4e5058; color: #fff; font-size: 14px; font-weight: 500; }
.tk-cat-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; color: var(--text-2); font-size: 0.88rem; }
.tk-cat-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.tk-cat-meta .icon { width: 14px; height: 14px; color: var(--text-3); }
.tk-warn { color: var(--warn); }
.tk-warn .icon { color: var(--warn); }
.tk-cat-actions { display: flex; gap: 8px; align-items: center; }
.tk-templates { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.tk-pv-image { display: block; max-width: 100%; max-height: 200px; border-radius: 4px; margin-top: 6px; }
.dc-button.danger { background: #da373c; }
.tk-panel-status { font-size: 0.92rem; }
.tk-pv { position: sticky; top: 16px; }
@media (max-width: 760px) { .tk-cat-row { grid-template-columns: auto 1fr; } .tk-cat-meta, .tk-cat-actions { grid-column: 2; } }

/* Личные каналы */
.pc-ava { flex: none; width: 30px; height: 30px; border-radius: 50%; object-fit: cover; background: var(--surface-3); }
.pc-ava.big { width: 42px; height: 42px; }
.pc-ava-empty { display: grid; place-items: center; background: var(--brand-50); color: var(--brand-text); font-weight: 700; }
.pc-launch { display: grid; gap: 18px; padding: 18px 20px; margin-bottom: 18px; border: 1px solid var(--brand); border-radius: var(--r-md); background: var(--brand-50); }
.pc-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.pc-step { display: flex; align-items: center; gap: 12px; opacity: .6; }
.pc-step.now, .pc-step.done { opacity: 1; }
.pc-step > div { display: grid; line-height: 1.3; }
.pc-step span:not(.pc-step-n) { color: var(--text-2); font-size: 0.86rem; }
.pc-step-n { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 1px solid var(--border-strong); font-weight: 700; background: var(--surface); }
.pc-step.now .pc-step-n { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }
.pc-step.done .pc-step-n { background: var(--ok-soft); border-color: var(--ok); color: var(--ok); }
.pc-step-n .icon { width: 16px; height: 16px; }
.pc-launch-body { display: grid; gap: 12px; }
.pc-apps { display: grid; gap: 10px; margin-top: 12px; }
.pc-app { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.pc-app-top { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.pc-app-name { margin-top: 2px; font-weight: 600; color: var(--brand-text); overflow-wrap: anywhere; }
.pc-app-about { margin-top: 4px; color: var(--text-2); font-size: 0.9rem; overflow-wrap: anywhere; }
.pc-app-actions { display: flex; gap: 8px; align-items: center; }
.pc-main .lv-block-head { margin: 22px 0 4px; }
.pc-history { margin-top: 16px; }
.pc-hist { display: grid; margin-top: 8px; }
.pc-hist-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; padding: 8px 2px; border-top: 1px solid var(--border); }
.pc-hist-row:first-child { border-top: 0; }
.pc-hist-end { margin-left: auto; }
.pc-hist-state { color: var(--text-2); font-size: 0.86rem; }
.pc-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; align-self: center; background: var(--text-3); }
.pc-dot.ok { background: var(--ok); }
.pc-dot.no { background: var(--danger); }
.pc-list { display: grid; }
.pc-row { display: grid; grid-template-columns: minmax(130px, 1fr) minmax(150px, 1.2fr) minmax(150px, 1fr) auto; gap: 14px; align-items: center; padding: 12px 4px; border-top: 1px solid var(--border); }
.pc-row:first-child { border-top: 0; }
.pc-row-name { display: flex; align-items: center; gap: 6px; min-width: 0; overflow-wrap: anywhere; }
.pc-row-name .icon { width: 16px; height: 16px; color: var(--text-3); flex: none; }
.pc-row-owner { display: flex; align-items: center; gap: 10px; min-width: 0; }
.pc-row-owner > div { display: grid; min-width: 0; line-height: 1.25; }
.pc-row-owner b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-row-state { display: grid; grid-template-columns: auto 1fr; column-gap: 8px; align-items: center; }
.pc-row-state .muted { grid-column: 2; }
.pc-group { display: grid; gap: 12px; padding: 18px 0; border-top: 1px solid var(--border); }
.pc-group:first-of-type { border-top: 0; padding-top: 8px; }
.pc-group-head h3 { margin: 0; font-size: 1.02rem; }
@media (max-width: 760px) { .pc-app, .pc-row { grid-template-columns: 1fr; gap: 8px; } }

/* Приватные голосовые */
.vc-how { display: grid; gap: 4px; }
.vc-how span { color: var(--text-2); line-height: 1.5; }
.vc-row { grid-template-columns: minmax(130px, 1fr) minmax(150px, 1fr) minmax(170px, 1fr) auto; }
.vc-noimg { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 28px 18px; border: 1px dashed #4e5058; border-radius: 4px; color: #949ba4; }
.vc-noimg .icon { width: 18px; height: 18px; }
.vc-btnrows { display: grid; gap: 0; }
.dc-button.vc-sq { min-width: 40px; justify-content: center; padding: 2px 8px; }
.dc-button.vc-sq .icon { width: 16px; height: 16px; }
.vc-sample { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 8px; }
.vc-sample-name { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-sm); background: var(--surface-3); }
.vc-sample-name .icon { width: 15px; height: 15px; color: var(--text-3); }
@media (max-width: 760px) { .vc-row { grid-template-columns: 1fr; } }
.vc-tpl { display: grid; gap: 8px; }
.vc-tpl .gw-quicks { margin-bottom: 0; }
.vc-tpl .vc-sample { margin-top: 0; }

/* Участник в примерах — «Батон» с его аватаркой (как на сайте и в доске избранного) */
.dc-avatar.user { background: #5865f2 url("/panel/img/demo-avatar.jpg") center / cover; }
/* Проверка автоответов: между подписью-вердиктом и перепиской есть воздух, пустого места внизу нет */
.ar-check-gap { display: grid; gap: 12px; }
.ar-mock { min-height: 0; }

/* Каналы статистики: статус строки и число обновления в шапке списка */
.sc-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.sc-status.warn { color: var(--warn); }
.sc-status.bad { color: var(--danger); }
.sc-status { font-size: 0.88rem; }
.sc-interval { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 4px 0 6px; }

/* Точка «нужна настройка» на вкладке модуля */
.tab-dot { display: inline-block; width: 8px; height: 8px; margin-left: 8px; border-radius: 50%; background: var(--warn); vertical-align: middle; }
.tab-dot[hidden] { display: none; }
/* Развлечения: список ответов шара и «Счёт» */
.fn-count { margin: 10px 0 8px; font-size: 0.9rem; }
.fn-list { display: grid; gap: 6px; }
.fn-row { display: flex; align-items: center; gap: 6px; }
.fn-input { flex: 1; min-width: 0; }
.fn-add { display: flex; gap: 8px; margin-top: 12px; }
.fn-reply { margin-top: 16px; }
.fn-reply:empty { display: none; }
.sc-last { font-size: 1.2rem !important; }

/* ===== Конструктор сообщений ===== */
.mb-top { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 22px; margin-bottom: 16px; }
.mb-top .field { margin: 0; min-width: 0; }
.mb-channel { flex: 1 1 260px; max-width: 380px; }
.mb-top-actions { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }
.mb-sender-wrap { overflow: hidden; }
.mb-sender-wrap[hidden] { display: none; }
.mb-sender-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; margin: 0 0 18px; padding: 14px 16px; border: 1px dashed var(--border-strong); border-radius: var(--r-md); }
.mb-sender-fields[hidden] { display: none; }
.mb-sender-fields .field { margin: 0; }
.mb-wide { grid-column: 1 / -1; }
.mb-work { grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr); align-items: start; }
.mb-form { display: grid; gap: 22px; min-width: 0; }
.mb-block { display: grid; gap: 12px; padding-bottom: 22px; border-bottom: 1px solid var(--border); min-width: 0; }
.mb-block:last-child { border-bottom: 0; padding-bottom: 0; }
.mb-block.is-muted > :not(.mb-block-head) { opacity: .5; }
.mb-block-head { display: flex; align-items: center; gap: 10px; }
.mb-block-head h3 { margin: 0; font-size: 1.02rem; }
.mb-head-action { margin-left: auto; }
.mb-count { margin-left: auto; color: var(--text-3); font-size: 0.78rem; font-variant-numeric: tabular-nums; }
.mb-count.over { color: var(--danger); font-weight: 700; }
.field > .mb-count { display: block; margin: 4px 0 0; text-align: right; }
.mb-tools { display: flex; flex-wrap: wrap; gap: 4px; }
.mb-tool { min-width: 34px; height: 30px; padding: 0 8px; border-radius: var(--r-sm); border: 1px solid var(--border); background: transparent; color: var(--text-2); font: 700 0.85rem var(--font); cursor: pointer; transition: background .15s, color .15s; }
.mb-tool:hover { background: var(--surface-2); color: var(--text); }
.mb-text { min-height: 120px; resize: vertical; }
.mb-embeds { display: grid; gap: 10px; }
.mb-embed { border: 1px solid var(--border); border-left: 4px solid var(--c); border-radius: var(--r-md); background: var(--surface); transition: border-color .2s; }
.mb-ehead { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 2px; }
.mb-etoggle { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; padding: 9px 10px; background: none; border: 0; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.mb-ebar { flex: none; width: 10px; height: 10px; border-radius: 50%; background: var(--c); }
.mb-enum { font-weight: 700; white-space: nowrap; }
.mb-etitle { flex: 1; min-width: 0; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mb-chev { flex: none; width: 16px; height: 16px; transition: transform .25s; }
.mb-embed.open .mb-chev { transform: rotate(180deg); }
.mb-etools { display: flex; gap: 2px; flex: none; }
.mb-ebody { display: grid; gap: 16px; padding: 4px 16px 18px; animation: m-rise .35s var(--ease-out, ease) both; }
.mb-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 14px 26px; }
.mb-row .field { margin: 0; }
.mb-colors { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }
.mb-swatches { display: flex; gap: 7px; }
.mb-swatch { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 2px solid var(--surface); background: var(--sw); box-shadow: 0 0 0 1px var(--border-strong); cursor: pointer; transition: transform .15s; }
.mb-swatch:hover { transform: scale(1.18); }
.mb-ts { margin-bottom: 4px; }
.mb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.mb-grid .field, .mb-ebody > .field { margin: 0; }
.mb-fields-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mb-fields { display: grid; gap: 10px; }
.mb-field { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--r-sm); }
.mb-field-main { display: grid; gap: 8px; min-width: 0; }
.mb-field-main textarea { min-height: 54px; resize: vertical; }
.mb-field-side { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.mb-buttons { display: grid; gap: 8px; }
.mb-button-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.7fr) auto; gap: 8px; align-items: center; }
.mb-side .mb-preview .dc-preview { min-height: 130px; }
.mb-empty { display: flex; align-items: center; gap: 10px; padding: 26px 6px; color: #6d6f78; font-style: italic; }
.mb-empty .icon { width: 18px; height: 18px; flex: none; }
.mb-send { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-top: 14px; }
.mb-send .mb-status { flex: 1 1 180px; min-width: 0; font-size: 0.88rem; line-height: 1.35; }
.mb-problem, .mb-ok { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.mb-problem { color: var(--warn); }
.mb-ok { color: var(--ok); }
.mb-problem .icon, .mb-ok .icon { width: 16px; height: 16px; flex: none; }
.mb-sent { margin-top: 8px; }
.mb-sent a { display: inline-flex; align-items: center; gap: 6px; font-size: 0.9rem; }
.mb-sent .icon { width: 15px; height: 15px; }
.mb-tlist { display: grid; }
.mb-trow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 10px 0; border-top: 1px solid var(--border); }
.mb-trow:first-child { border-top: 0; }
.mb-tname { display: grid; flex: 1; min-width: 160px; }
.mb-tact { display: flex; gap: 6px; }
.mb-tsave { display: flex; gap: 8px; margin-top: 14px; }
.mb-tsave input { flex: 1; min-width: 0; }
.mb-json { width: 100%; box-sizing: border-box; font-family: var(--mono, ui-monospace, monospace); font-size: 0.82rem; line-height: 1.5; resize: vertical; }
@media (max-width: 900px) { .mb-work { grid-template-columns: 1fr; } .mb-side { position: static; } }
@media (max-width: 640px) { .mb-sender-fields, .mb-grid { grid-template-columns: 1fr; } .mb-button-row { grid-template-columns: 1fr auto; } .mb-button-row input:nth-child(2) { grid-column: 1; } }
.mb-note { color: var(--text-3); font-size: 0.86rem; line-height: 1.5; }
.mb-tool { display: inline-grid; place-items: center; } .mb-tool .icon { width: 17px; height: 17px; }
/* «Ж» должна быть жирной: у остальных значков штрих обычный, у неё — вдвое толще */
.mb-tool-bold .icon path { stroke-width: 3.6; stroke-linejoin: round; }
.mb-tool-italic .icon path, .mb-tool-underline .icon path { stroke-width: 2.4; }
/* спойлер в предпросмотрах Discord: чёрная плашка, по нажатию показывает текст */
.dc-spoiler { background: #1e1f22; color: transparent; border-radius: 4px; padding: 0 3px; cursor: pointer; transition: background .2s, color .2s; }
.dc-spoiler * { color: transparent; }
.dc-spoiler.shown { background: rgba(255, 255, 255, .1); color: inherit; }
.dc-spoiler.shown * { color: inherit; }
/* панель форматирования над полем: в полях эмбеда компактная и показывается, пока поле в фокусе */
.mb-withtools { display: grid; gap: 6px; min-width: 0; }
.mb-tools-compact { display: none; }
.mb-withtools:focus-within .mb-tools-compact { display: flex; }
.mb-tools-compact .mb-tool { min-width: 28px; height: 26px; }
.mb-tools-compact .mb-tool .icon { width: 15px; height: 15px; }
/* верхняя панель конструктора: поле канала, переключатель и кнопки одной высоты и на одной линии */
.mb-top { align-items: flex-end; }
.mb-top .seg-slide { height: 42px; box-sizing: border-box; align-items: stretch; }
.mb-top .seg-slide > button { display: inline-flex; align-items: center; }
.mb-top-actions { align-items: center; }
.mb-top-actions .btn { height: 42px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }

/* Аудит выравниваний: тарифы заполняют ширину, ряд действий на «Моих серверах» ровный */
.plans { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); }
.servers-head .user-chip { align-items: center; gap: 10px; }
.servers-head .user-chip .btn.small { height: 34px; box-sizing: border-box; padding-top: 0; padding-bottom: 0; }
.servers-head .user-chip .name { line-height: 34px; }

/* Аудит выравниваний (телефон и ряды инструментов) */
@media (max-width: 720px) {
  .sl2-row { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 12px 14px; }
  .sl2-row > .switch { grid-column: 3; grid-row: 1; }
  .sl2-ctl { grid-column: 1 / -1; order: 5; }
  .sl2-more { grid-column: 1 / -1; order: 4; width: 100%; min-width: 0; }
}
.tk-toolbar > .seg-slide, .tk-toolbar > select, .tk-toolbar > .tk-search, .tk-toolbar > .btn { height: 42px; box-sizing: border-box; }
.tk-toolbar > .seg-slide { align-items: stretch; }
.tk-toolbar > .seg-slide > button { display: inline-flex; align-items: center; }

/* Шапка страницы на телефоне: значок стоит у заголовка, а не посередине высокого блока */
@media (max-width: 720px) { .page-head .title { align-items: flex-start; } .page-head .title-icon { margin-top: 2px; } }

/* ===== Аудит анимаций: интерактивные элементы без плавности ===== */
a, summary, label, .switcher-btn, .side-brand, .fr-main, .am-body, .au-main, .ec-hero-edit, .link-btn, .mb-etoggle, .feedback-toggle {
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease, opacity .18s ease; }
summary { border-radius: var(--r-sm); }
summary:hover { color: var(--text); }
.switcher-btn:hover { border-color: var(--brand); background: var(--surface-2); }
.switcher-btn:active, .side-brand:active, .link-btn:active, .ec-hero-edit:active, .feedback-toggle:active { transform: scale(.97); }
.side-brand:hover { opacity: .88; }
.fr-main:hover, .au-main:hover { background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.ec-hero-edit:hover { background: var(--surface-2); }
/* строки списков (тикеты, личные каналы, каналы статистики, строки настроек): мягкая подсветка под курсором */
.tk-row, .pc-row, .sc-row, .pc-app, .toggle-row, .notif-row, .fn-row, .mb-trow {
  transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease; border-radius: var(--r-sm); }
.tk-row:hover, .pc-row:hover, .sc-row:hover, .toggle-row:hover, .notif-row:hover, .mb-trow:hover { background: color-mix(in srgb, var(--surface-2) 45%, transparent); }
.pc-app:hover { border-color: var(--border-strong); box-shadow: 0 6px 20px -12px rgba(8, 10, 40, .5); }
.mb-embed { transition: border-color .2s ease, box-shadow .2s ease; }
.mb-embed:hover { box-shadow: 0 6px 22px -14px var(--c); }
/* точки «ждёт / обновится» и состояния «в работе»: спокойное дыхание, чтобы взгляд цеплялся за то, что требует внимания */
.tk-wait .dot, .sc-status.warn .dot, .pc-dot.no { animation: tk-breathe 2.2s ease-in-out infinite; }
@keyframes tk-breathe { 50% { opacity: .35; transform: scale(.8); } }
/* ряды, появляющиеся при первом открытии вкладки: ступенчатое появление (повторно не играет — только у блоков, которые строятся один раз) */
.tab-pane:not([hidden]) .tk-cat-list > .tk-cat-row, .tab-pane:not([hidden]) .pc-apps > .pc-app { animation: m-rise .4s var(--ease-out, ease) both; }
.tab-pane:not([hidden]) .pc-apps > .pc-app:nth-child(2), .tab-pane:not([hidden]) .tk-cat-list > .tk-cat-row:nth-child(2) { animation-delay: 50ms; }
.tab-pane:not([hidden]) .pc-apps > .pc-app:nth-child(3), .tab-pane:not([hidden]) .tk-cat-list > .tk-cat-row:nth-child(3) { animation-delay: 100ms; }
.tab-pane:not([hidden]) .pc-apps > .pc-app:nth-child(n+4), .tab-pane:not([hidden]) .tk-cat-list > .tk-cat-row:nth-child(n+4) { animation-delay: 150ms; }
@media (prefers-reduced-motion: reduce) { .tk-wait .dot, .sc-status.warn .dot, .pc-dot.no, .tab-pane .pc-app, .tab-pane .tk-cat-row { animation: none !important; } }
.pc-app-top { align-items: baseline; }
.pc-app-top .tag, .tk-cat-meta .tag { align-self: center; display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px; background: var(--brand-50); color: var(--brand-text); font-size: 0.76rem; font-weight: 600; }
.pc-app { align-items: start; }
.pc-app-actions { align-self: center; }

/* плитки-фильтры: нажатие и плавная смена выбранной */
.tk-tile { transition: border-color .25s ease, background-color .25s ease, transform .15s ease, box-shadow .25s ease; }
.tk-tile:active { transform: scale(.98); }
.tk-tile.on { box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.tk-tile-n { display: inline-block; transition: color .25s ease; }
.mb .mb-sender-wrap, .mb .mb-work { margin-top: 0; }

/* Статистика: масштаб графика */
.st-chart-tools { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 18px; }
.st-zoom { display: inline-flex; align-items: center; gap: 4px; }
.st-zbtn { min-width: 34px; font-size: 1.15rem; line-height: 1; padding-left: 0; padding-right: 0; }
.st-nav { margin: 6px 0 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.st-nav[hidden] { display: none; }
.st-nav-svg { display: block; width: 100%; height: 44px; cursor: grab; touch-action: none; }
.st-nav-svg:active { cursor: grabbing; }
.st-nav-fill { opacity: .22; }
.st-nav-line { fill: none; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.st-nav-win { fill: color-mix(in srgb, var(--brand) 22%, transparent); stroke: var(--brand); stroke-width: 1.5; vector-effect: non-scaling-stroke; }
.st-nav-grip { fill: var(--brand); cursor: ew-resize; opacity: .9; }
.st-nav-grip:hover { opacity: 1; }
/* кнопки масштаба — группой в правом верхнем углу графика */
.st-chart-wrap { position: relative; }
.st-chart-wrap > .st-zoom { position: absolute; top: 6px; right: 6px; z-index: 3; gap: 0; padding: 2px; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: color-mix(in srgb, var(--surface) 92%, transparent); }
.st-chart-wrap > .st-zoom .btn { height: 30px; min-height: 30px; }
.st-chart-wrap > .st-zoom .st-zbtn { min-width: 32px; }
.st-chart-wrap > .st-zoom .btn:not(.st-zbtn) { font-size: 0.82rem; padding: 0 10px; }
.st-chart-wrap > .st-zoom .st-zbtn + .st-zbtn { border-left: 1px solid var(--border); border-radius: 0; }

/* ===== Достижения: список-плитки с перетаскиванием (js/modules/achievements.js) ===== */
.ach-dot.lg { width: 56px; height: 56px; }
.ach-dot.lg .icon { width: 28px; height: 28px; }
.ach-hint { margin: 14px 0 10px; }
.ach-list { display: grid; gap: 10px; }
.ach-row { display: grid; grid-template-columns: auto 56px minmax(0, 1fr) 118px auto; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); transition: border-color .15s ease, background-color .15s ease, box-shadow .2s ease, opacity .25s ease; }
.ach-row.off { opacity: .6; }
.ach-grip { color: var(--text-3); display: grid; place-items: center; }
.ach-grip .icon { width: 16px; height: 16px; }
.ach-icon-lg { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-3); }
.ach-main { min-width: 0; display: grid; gap: 4px; }
.ach-main > b { font-size: 1rem; }
.ach-desc { color: var(--text-2); font-size: 0.88rem; }
.ach-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 2px; }
.ach-chip-c, .ach-chip-r { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; font-size: 0.78rem; font-weight: 500; background: var(--surface-3); color: var(--text-2); }
.ach-chip-c { color: var(--brand-text); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.ach-chip-r .icon, .ach-chip-c .icon { width: 13px; height: 13px; }
.ach-chip-r.none { color: var(--text-3); background: transparent; border: 1px dashed var(--border-strong); }
.ach-stat { display: grid; gap: 2px; justify-items: start; padding: 6px 8px; margin: -6px -8px; border: 0; border-radius: var(--r-md); background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; transition: background-color .15s ease; }
.ach-stat:hover { background: var(--surface-3); }
.ach-stat > b { font: 800 1.35rem/1.1 var(--font-head); font-variant-numeric: tabular-nums; }
.ach-stat > span:not(.ach-bar) { color: var(--text-3); font-size: 0.78rem; }
.ach-stat small { color: var(--text-3); font-size: 0.76rem; }
.ach-bar { display: block; width: 100%; height: 4px; margin-top: 4px; border-radius: 3px; background: var(--border); overflow: hidden; }
.ach-bar i { display: block; height: 100%; border-radius: 3px; background: var(--brand); transition: width .4s ease; }
.ach-side { display: flex; align-items: center; gap: 12px; }
.ach-del { margin-left: auto; }
@media (max-width: 900px) {
  .ach-row { grid-template-columns: auto 48px minmax(0, 1fr); row-gap: 12px; }
  .ach-icon-lg, .ach-dot.lg { width: 48px; height: 48px; }
  .ach-stat, .ach-side { grid-column: 2 / -1; }
  .ach-side { justify-content: space-between; }
}

/* ===== Значки: образец карточки (js/modules/badges.js) ===== */
.bd-max { display: inline-flex; align-items: center; gap: 10px; color: var(--text-2); font-size: 0.88rem; }
.bd-card-wrap { position: relative; display: block; width: fit-content; max-width: 100%; margin-top: 4px; min-width: 320px; min-height: 100px; border-radius: var(--r-lg); background: var(--surface-2); overflow: hidden; }
.bd-card-img { display: block; max-width: 100%; height: auto; border-radius: var(--r-lg); transition: opacity .3s ease; }   /* картинка — в своём размере, без растягивания: иначе мутнеет */
.bd-card-wrap.loading .bd-card-img { opacity: .55; }
.bd-card-wrap.loading::after { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, color-mix(in srgb, var(--text) 8%, transparent) 50%, transparent 70%); background-size: 220% 100%; animation: bd-shimmer 1.2s linear infinite; pointer-events: none; }
@keyframes bd-shimmer { from { background-position: 120% 0; } to { background-position: -120% 0; } }
.bd-card-wrap.failed::before { content: "Не удалось нарисовать образец карточки"; position: absolute; inset: 0; display: grid; place-items: center; color: var(--text-3); font-size: 0.9rem; }
@media (prefers-reduced-motion: reduce) { .bd-card-wrap.loading::after { animation: none; } }
.bd-badge { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 50%; color: #fff; background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--c) 70%, #fff), var(--c)); box-shadow: inset 0 0 0 2px rgb(255 255 255 / .25); }
.bd-badge .icon { width: 17px; height: 17px; }
.bd-legend-img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.bd-legend-ach { display: inline-flex; gap: 4px; flex: none; }
.bd-legend-ach .bd-legend-img { border-radius: 50%; }
.bd-empty { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border: 1px dashed color-mix(in srgb, var(--brand) 55%, var(--border)); border-radius: var(--r-lg); background: color-mix(in srgb, var(--brand) 7%, transparent); }
.bd-empty > div { flex: 1 1 260px; display: grid; gap: 2px; min-width: 0; }
.bd-empty b { font-size: 1rem; }
.bd-empty span { color: var(--text-2); font-size: 0.88rem; }
.bd-empty .bd-badge { width: 40px; height: 40px; opacity: .85; }
.bd-caption { margin: 10px 0 0; }
.bd-legend { display: grid; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--border); }
.bd-legend-row { display: flex; align-items: center; gap: 14px; }
.bd-legend-row > div { display: grid; gap: 1px; }
.bd-legend-row > div > span { color: var(--text-2); font-size: 0.86rem; }
.bd-give { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.bd-give .field { flex: 1 1 280px; max-width: 420px; margin: 0; }
.bd-people { display: grid; gap: 8px; margin-top: 10px; }
.bd-person { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-2); }
.bd-person .avatar { width: 36px; height: 36px; }
.bd-person .avatar.ph { display: grid; place-items: center; background: var(--brand); color: #fff; font-weight: 700; }
.bd-person-text { flex: 1; min-width: 0; display: grid; gap: 1px; }
.bd-person-text span { color: var(--text-3); font-size: 0.82rem; }
@media (max-width: 760px) { .bd-give .btn { width: 100%; } }

/* Окно «Новое достижение»: «Своё» — главная кнопка, заготовки ниже (js/modules/achievements.js: pickTemplate) */
.ach-own { display: flex; align-items: center; gap: 16px; width: 100%; padding: 18px 22px; border: 0; border-radius: var(--r-lg); background: var(--brand); color: #fff; font: inherit; text-align: left; cursor: pointer; box-shadow: 0 10px 26px -14px var(--brand); transition: transform .15s ease, box-shadow .2s ease, filter .15s ease; }
.ach-own:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 14px 30px -14px var(--brand); }
.ach-own:active { transform: scale(.99); }
.ach-own-ic { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; background: rgb(255 255 255 / .2); }
.ach-own-ic .icon { width: 22px; height: 22px; color: #fff; }
.ach-own-text { flex: 1; min-width: 0; display: grid; gap: 2px; }
.ach-own-text b { font: 800 1.15rem/1.2 var(--font-head); }
.ach-own-text small { color: rgb(255 255 255 / .82); font-size: 0.9rem; }
.ach-own-go { flex: none; width: 20px; height: 20px; color: #fff; opacity: .85; transition: transform .2s ease; }
.ach-own:hover .ach-own-go { transform: translateX(3px); }
.ach-or { display: flex; align-items: center; gap: 14px; color: var(--text-3); font-size: 0.84rem; }
.ach-or::before, .ach-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.ach-pick .ach-templates { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.ach-pick .ach-template { padding: 10px 12px; gap: 10px; }
.ach-pick .ach-template .ach-dot { width: 30px; height: 30px; }
.ach-pick .ach-template .ach-dot .icon { width: 15px; height: 15px; }
.ach-pick-note { margin: 0; }

/* Достижения: как бот сообщает (блок над списком) и «Куда придёт объявление» в окне */
.ach-announce .wl-event { margin-top: 12px; }
.ach-side-col { position: sticky; top: 0; display: grid; gap: 12px; align-self: start; }
.ach-side-col .ach-preview { position: static; }
.ach-dest { display: grid; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface-2); }
.ach-dest .ach-pv-label { margin: 0; }
.ach-dest-status { margin: 0; font-size: 0.88rem; font-weight: 500; }
.ach-dest-status.ok { color: var(--ok); }
.ach-dest-status.warn { color: var(--warn); }
.ach-dest p.muted { margin: 0; }

/* Окно достижения: между заголовком раздела («Награда», «Значок») и первой подписью — нормальный зазор */
.ach-form-main .sub-title { margin-bottom: 14px; }

/* ===== Приватные голосовые: стартовый экран, пока нет канала-входа (js/modules/voice.js: launch) ===== */
.vc-start { padding: 22px 24px; margin-bottom: 18px; border: 1px solid color-mix(in srgb, var(--brand) 45%, var(--border)); border-radius: var(--r-lg); background: linear-gradient(160deg, color-mix(in srgb, var(--brand) 9%, var(--surface-2)), var(--surface-2) 60%); }
.vc-start-head h2 { margin: 0 0 6px; }
.vc-start-head p { margin: 0; color: var(--text-2); max-width: 64ch; }
.vc-start-body { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 28px; margin-top: 22px; align-items: start; }
.vc-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: none; }
.vc-step { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.vc-step:last-child { padding-bottom: 0; }
.vc-step:not(:last-child)::before { content: ""; position: absolute; left: 21px; top: 46px; bottom: 2px; width: 2px; background: repeating-linear-gradient(to bottom, var(--border-strong) 0 4px, transparent 4px 8px); }
.vc-step-ic { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: color-mix(in srgb, var(--brand) 16%, var(--surface-2)); color: var(--brand-text); }
.vc-step-ic .icon { width: 20px; height: 20px; }
.vc-step-ic em { position: absolute; right: -4px; top: -4px; display: flex; align-items: center; justify-content: center; box-sizing: border-box; width: 20px; height: 20px; padding: 1px 0 0; border-radius: 50%; background: var(--brand); color: #fff; font: 700 0.72rem/1 var(--font); font-style: normal; font-variant-numeric: tabular-nums; text-align: center; }
.vc-step > div { display: grid; gap: 2px; min-width: 0; padding-top: 2px; }
.vc-step b { font-size: 1rem; }
.vc-step span:not(.vc-step-ic) { color: var(--text-2); font-size: 0.9rem; line-height: 1.45; }
.vc-plan { display: grid; gap: 8px; }
.vc-plan-label { color: var(--text-3); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; }
.vc-chan-list { display: grid; gap: 2px; padding: 12px 10px; border-radius: var(--r-md); background: #2b2d31; color: #949ba4; font-size: 0.92rem; }
.vc-chan-cat { display: flex; align-items: center; gap: 4px; padding: 2px 6px 6px; font-size: 0.74rem; font-weight: 700; letter-spacing: .04em; }
.vc-chan-cat .icon { width: 12px; height: 12px; }
.vc-chan { display: flex; align-items: center; gap: 8px; padding: 7px 10px 7px 18px; border-radius: 6px; }
.vc-chan .icon { width: 17px; height: 17px; flex: none; }
.vc-chan.on { background: #404249; color: #f2f3f5; }
.vc-chan.ghost { opacity: .6; border: 1px dashed #4e5058; margin-top: 4px; }
.vc-chan-tag { margin-left: auto; padding-left: 10px; font-size: 0.72rem; color: #949ba4; text-align: right; }
.vc-chan.on .vc-chan-tag { color: #c9cdfb; }
.vc-start-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.vc-start-actions .btn { padding-left: 20px; padding-right: 22px; }
.vc-existing { margin-top: 18px; padding-top: 14px; border-top: 1px dashed var(--border-strong); }
@media (max-width: 860px) { .vc-start-body { grid-template-columns: 1fr; gap: 22px; } }

/* Телефон: плашка «Поддержите …» — значок и текст в первой строке, кнопки на всю ширину под ними (раньше кнопка налезала на текст) */
@media (max-width: 760px) {
  .support-banner.compact .support-body { flex: 1 1 calc(100% - 52px); }
  .support-banner.compact .support-actions { flex: 1 1 100%; }
  .support-banner.compact .support-actions .btn.primary { flex: 1; justify-content: center; }
}

/* Телефон: карта активности в статистике больше не растягивает страницу — колонка сетки может сжиматься, а сама карта прокручивается внутри */
@media (max-width: 900px) { .st-grid { grid-template-columns: minmax(0, 1fr); } }
.st-grid > * { min-width: 0; }
/* Юридические страницы: длинное слово в заголовке («конфиденциальности») не должно расширять страницу */
@media (max-width: 560px) { .legal .page-top h1 { font-size: clamp(1.4rem, 7.2vw, 2rem); overflow-wrap: anywhere; } }
@media (max-width: 760px) {
  .st-head { flex-wrap: wrap; }
  .st-head > * { min-width: 0; max-width: 100%; }
  .st-head-actions { flex-wrap: wrap; max-width: 100%; }
  .st-head-actions .segmented { max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .st-head-actions .segmented::-webkit-scrollbar { display: none; }
}

/* Вкладка модуля — сетка с одной колонкой: колонка должна уметь сжиматься до ширины экрана, иначе широкий блок (карта активности, таблица) растягивает всю страницу на телефоне */
.is-console .tab-pane { grid-template-columns: minmax(0, 1fr); }

/* ===== Телефон: мелкие правки по результатам обхода (проверка на 390 px) ===== */
@media (max-width: 560px) {
  /* «Осталось настроить»: текст шага на всю строку, ссылка-действие под ним, а не вплотную справа */
  .setup-issue { display: block; flex: 1 1 100%; }
  .setup-issue > a { display: inline-block; margin-top: 4px; font-weight: 600; }
  /* хлебные крошки в верхней панели: одна строка, длинное название сокращается многоточием вместо переноса */
  .topbar .crumbs { flex-wrap: nowrap; overflow: hidden; }
  .topbar .crumbs > * { white-space: nowrap; }
  .topbar .crumbs [aria-current="page"] { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
  /* предпросмотр сообщения со справа стоящей картинкой: на узком экране картинка уходит под текст, а не сжимает его в узкую колонку */
  .dc-embed { grid-template-columns: minmax(0, 1fr); }
  .dc-embed .e-thumb { grid-column: 1; grid-row: auto; width: 64px; height: 64px; }
  .dc-embed .ach-thumb-ph { grid-column: 1; grid-row: auto; }
  /* легенда значков: значок и подпись по одной линии и по левому краю */
  .bd-legend-row { align-items: flex-start; }
  .bd-legend-ach { flex-wrap: wrap; max-width: 120px; }
}
@media (max-width: 560px) {
  .setup-issue > a { display: block; }
  /* «Достижения» в легенде значков: несколько круглых значков идут под подписью, а не сдвигают её вправо */
  .bd-legend-row:has(.bd-legend-ach) { flex-direction: column-reverse; gap: 8px; }
  .bd-legend-ach { max-width: none; }
}

/* Телефон: подвал компактнее — меньше отступов, без длинного описания, плотнее ссылки */
@media (max-width: 560px) {
  .footer, .panel-foot .footer { margin-top: 36px; }
  .footer-in { padding: 20px 16px 18px; gap: 14px 16px; }
  .footer-in > div:first-child > p:not(.foot-copy) { display: none; }
  .footer-in > div:first-child { flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 6px 12px; }
  .footer .foot-copy { margin: 0; font-size: 0.74rem; }
  .footer h4 { margin-bottom: 6px; font-size: 0.78rem; }
  .footer ul { gap: 3px; }
  .footer ul a { font-size: 0.84rem; padding: 3px 0; }
}

/* все проблемы черновика видны сразу, каждая на своей строке */
.mb-problems { display: grid; gap: 4px; }