/* ===== ТОКЕНЫ ПОРТАЛА =====
   Цвета заданы в одном месте — UI.Components/Theme/PortalPalette.cs (палитра MudBlazor).
   Токены ниже — только имена портала для её переменных, поэтому светлую и тёмную тему
   переключает провайдер, а чисел здесь нет. Числами под [data-theme] остаётся лишь то,
   чего в палитре нет: тени. */
:root {
  /* Фирменные цвета как есть — для экрана загрузки (палитры там ещё нет) и декора:
     тёмный фон, акцент и светлый текст на тёмном. */
  --brand-dark: #103E40;
  --brand-accent: #71C6C4;
  /* Высота знака: в шапке, в шапке с меню по кнопке (ниже 960px она ниже) и в подвале. */
  --logo-height: 56px;
  --logo-height-compact: 48px;
  --logo-height-footer: 44px;
  --brand-light: #F7E5CE;
  /* Фирменное поле — тёмный градиент под героями разделов в тёмной теме (.catalog-hero), фоном входа и экрана загрузки.
     От палитры темы оно не зависит, поэтому задано числами. Слои сверху вниз: затемнение под текст (shade)
     и свечения (glow; на телефоне проще). */
  --brand-field-shade: linear-gradient(90deg, #021A1CC4 0%, #021A1C40 46%, transparent 77%);
  --brand-field-glow:
    radial-gradient(ellipse at 83% -24%, #15897D 0%, #0A5B56 20%, transparent 58%),
    radial-gradient(ellipse at 13% 135%, #09685C 0%, #07463F 22%, transparent 56%),
    linear-gradient(110deg, #021213 5%, #032B2B 60%, #041B1D);
  --brand-field-glow-phone:
    radial-gradient(ellipse at 100% 0%, #096E64 0%, transparent 66%),
    radial-gradient(ellipse at 10% 150%, #075247, transparent 55%),
    #031B1D;
  --brand-login-shade:
    radial-gradient(ellipse at 51% 54%, #00181ABF 0%, #00181A30 47%, transparent 75%),
    linear-gradient(0deg, #00090B99, transparent 45%);
  --brand-login-glow:
    radial-gradient(ellipse at 78% 3%, #158577 0%, #075449 22%, transparent 52%),
    radial-gradient(ellipse at 4% 60%, #06554B 0%, #03332F 26%, transparent 56%),
    linear-gradient(135deg, #010909 0%, #031E20 46%, #010A0D 100%);
  --brand-login-glow-phone:
    radial-gradient(ellipse at 100% 0%, #11796D 0%, transparent 58%),
    radial-gradient(ellipse at 0% 90%, #07554B, transparent 60%),
    #031719;
  /* Текст на фирменном поле: основной, пояснение и подпись. */
  --brand-field-text: #F5F8F6;
  --brand-field-text-secondary: #CADBD6;
  --brand-field-text-muted: #B3D1CB;

  --bg: var(--mud-palette-background);
  --bg-card: var(--mud-palette-surface);
  --bg-panel: var(--mud-palette-background-gray);
  --bg-input: var(--mud-palette-surface);
  --bg-dropdown: var(--mud-palette-surface);
  --bg-hover: color-mix(in srgb, var(--mud-palette-text-primary) 5%, var(--mud-palette-surface));
  --bg-active: var(--accent-light);
  --card-bg: var(--mud-palette-surface);
  --tab-bg: var(--mud-palette-background-gray);
  --footer-bg: var(--mud-palette-appbar-background);
  --overlay-bg: var(--mud-palette-overlay-dark);

  --text-primary: var(--mud-palette-text-primary);
  --text-secondary: var(--mud-palette-text-secondary);
  --text-muted: var(--mud-palette-gray-dark);
  --text-on-accent: var(--mud-palette-primary-text);

  --accent: var(--mud-palette-primary);
  --accent-hover: var(--mud-palette-primary-darken);
  --accent-light: rgba(var(--tint-rgb), 0.12);
  --accent-subtle: rgba(var(--tint-rgb), 0.06);

  /* Второй акцент — подсветки, счётчики и ссылки в тексте. По умолчанию это основной цвет;
     портал с двумя фирменными цветами направляет эти четыре токена на другой цвет палитры. */
  --tint-rgb: var(--mud-palette-tertiary-rgb);
  --highlight: var(--mud-palette-tertiary-lighten);
  --text-on-highlight: var(--mud-palette-black);
  --link: var(--mud-palette-tertiary);

  --success: var(--mud-palette-success);
  --success-bg: rgba(var(--mud-palette-success-rgb), 0.12);
  --warning: var(--mud-palette-warning);
  --warning-bg: rgba(var(--mud-palette-warning-rgb), 0.12);
  --danger: var(--mud-palette-error);
  --danger-bg: rgba(var(--mud-palette-error-rgb), 0.12);
  --info: var(--mud-palette-info);

  --border: var(--mud-palette-lines-default);
  --border-light: var(--mud-palette-divider);
  --border-input: var(--mud-palette-lines-inputs);
  --border-input-hover: var(--mud-palette-text-secondary);
  --border-color: var(--mud-palette-lines-default);

  --tag-green-bg: var(--success-bg);
  --tag-green-text: var(--mud-palette-success);
  --tag-blue-bg: rgba(var(--mud-palette-info-rgb), 0.12);
  --tag-blue-text: var(--mud-palette-info);
  --tag-orange-bg: var(--warning-bg);
  --tag-orange-text: var(--mud-palette-warning);
  --tag-red-bg: var(--danger-bg);
  --tag-red-text: var(--mud-palette-error);
  /* Декоративный тег без смысла статуса — второй фирменный цвет палитры (у заказчика это бронза).
     Имя историческое: раньше тег был фиолетовым, но такого цвета в палитре заказчика нет. */
  /* Подложка слабая, 8 %: при 14 % мелкий текст тега на ней не дотягивал до контраста 4,5:1 в обеих темах. */
  --tag-purple-bg: color-mix(in srgb, var(--mud-palette-secondary) 8%, transparent);
  --tag-purple-text: var(--mud-palette-secondary);

  --scrollbar-thumb: var(--mud-palette-gray-light);

  --font-display: 'Merriweather', Georgia, serif;
  --font-body: 'Commissioner', system-ui, sans-serif;
  /* Боковое поле оболочки: одно для шапки, содержимого и подвала. */
  --page-gutter: 24px;

  --portal-action-height: 46px;
  --portal-person-avatar-size: 48px;
  --portal-person-avatar-bg: color-mix(in srgb, var(--highlight) 14%, var(--bg-card));
  --portal-person-avatar-color: color-mix(in srgb, var(--accent) 80%, var(--text-primary));
  --portal-person-avatar-border: color-mix(in srgb, var(--highlight) 20%, var(--border));
}

/* Тёмная тема — по умолчанию, светлая — по выбору человека. */
:root, [data-theme="dark"] {
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.35);
  --shadow-modal: 0 20px 60px rgba(0, 0, 0, 0.5);
}

[data-theme="light"] {
  --shadow-sm: 0 1px 3px rgba(11, 34, 36, 0.05);
  --shadow-md: 0 4px 16px rgba(11, 34, 36, 0.07);
  --shadow-lg: 0 8px 32px rgba(11, 34, 36, 0.10);
  --shadow-modal: 0 20px 60px rgba(11, 34, 36, 0.15);
}

/* Reset MudButton defaults before the existing portal classes set each action's design. */
.portal-action {
  display: inline-block;
  min-width: 0;
  padding: 0;
  font: inherit;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
  justify-content: normal;
}
.portal-action:hover, .portal-action:active, .portal-action:focus-visible { background-color: transparent; }
.portal-action:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.portal-action > .mud-button-label { display: contents; }

/* Primary page actions use the same box and icon geometry across modules. */
.portal-primary-action.mud-button-root.mud-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  height: var(--portal-action-height);
  min-height: var(--portal-action-height);
  padding: 0 18px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  color: var(--text-on-accent);
  box-shadow: none;
  font-size: 14px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: normal;
  text-transform: none;
}
.portal-primary-action.mud-button-root.mud-button:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
}
.portal-primary-action.mud-button-root.mud-button > .mud-button-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.portal-primary-action.mud-button-root.mud-button .mud-button-icon-start { margin: 0; }
.portal-primary-action.mud-button-root.mud-button .mud-icon-root { font-size: 18px; }

/* ====== RESPONSIVE BREAKPOINTS (канонический набор для всего public-фронта) ======
   Используется max-width (mobile-last каскад):
     1200px — wide desktop  → standard desktop
      960px — desktop       → tablet landscape
      768px — tablet        → mobile (основной перелом, самый частый)
      600px — large phone   → small phone
      480px — small phone   → tiny phone
   Исключение: 380px — ультра-узкие экраны (Galaxy Fold и т.п.),
   используется только в одном блоке для агрессивного сжатия календаря.
   Новые @media-правила добавлять только из этого набора.
======================================================================= */


/* Плавный переход при смене темы */
body,
.card,
.dropdown,
input, select, textarea,
button {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Смена темы волной (js/theme.js): новая тема проявляется поверх снимка старой по маске, которую скрипт
   перерисовывает каждый кадр; частицы — отдельный слой над обоими снимками. */
.theme-wave {
  position: fixed;
  inset: 0;
  z-index: 100;
  pointer-events: none;
  view-transition-name: theme-wave;
}

/* Плавное перекрашивание выше иначе шло бы внутри снимка новой темы. */
html[data-theme-animating] *,
html[data-theme-animating] *::before,
html[data-theme-animating] *::after {
  transition: none !important;
}

html[data-theme-animating]::view-transition { pointer-events: none; }

/* Переход живёт, пока идёт эта анимация; волну рисует и заканчивает скрипт. */
html[data-theme-animating]::view-transition-group(root) {
  animation: theme-wave-hold 2s linear both;
  z-index: 1;
}

html[data-theme-animating]::view-transition-old(root),
html[data-theme-animating]::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

html[data-theme-animating]::view-transition-old(root) { z-index: 1; }

html[data-theme-animating]::view-transition-new(root) {
  z-index: 2;
  mask-image: var(--theme-wave-mask);
  mask-size: 100% 100%;
  mask-repeat: no-repeat;
}

html[data-theme-animating]::view-transition-group(theme-wave) {
  animation: none;
  z-index: 2;
}

html[data-theme-animating]::view-transition-old(theme-wave) {
  animation: none;
  opacity: 0;
}

html[data-theme-animating]::view-transition-new(theme-wave) {
  animation: none;
  mix-blend-mode: normal;
}

@keyframes theme-wave-hold {
  from { opacity: 1; }
  to { opacity: 1; }
}

/* Скроллбар */
::-webkit-scrollbar { width: 8px; height: 8px; }

/* ──────────── Text utilities ──────────── */
.text-muted { color: var(--text-muted) !important; }

* { margin: 0; padding: 0; box-sizing: border-box; }

body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--text-primary);
  min-height: 100vh;
  /* Clip horizontal overflow without creating a scroll container for sticky children. */
  overflow-x: clip;
  line-height: 1.6;
}
html {
  overflow-x: clip;
  scroll-behavior: smooth;
}

body::before, body::after { display: none; }

@media (max-width: 480px) {
  :root { --page-gutter: 16px; }
}

/* ===== USER AVATAR DROPDOWN ===== */
.user-avatar {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent), var(--accent-hover, var(--accent)));
  color: var(--text-on-accent);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.5px;
  user-select: none;
  transition: box-shadow 0.2s;
}
.user-avatar-lg {
  width: 40px;
  height: 40px;
  font-size: 16px;
}
@keyframes dropdownFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}
.user-dropdown-header {
  text-decoration: none;
  transition: background 0.15s;
}
.user-dropdown-header:hover {
  background: var(--bg-hover);
}
.user-dropdown-header-text {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
}
.user-dropdown-name {
  color: var(--text-primary);
  font-size: 15px;
  font-weight: 600;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-dropdown-email {
  color: var(--text-muted);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.35;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.user-dropdown-chevron {
  flex-shrink: 0;
  color: var(--text-muted);
}

/* ═══ Notification Bell ═══ */
/* notif-bell-wrap uses inline style for position:relative */
.notif-bell, .notif-bell.mud-button-root {
  width: 40px; height: 40px;
  border-radius: 50%; border: none;
  background: var(--mud-palette-action-default-hover);
  color: var(--text-secondary);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.2s, color 0.2s;
  position: relative;
}
.notif-bell:hover, .notif-bell.mud-button-root:hover { background: rgba(var(--mud-palette-text-primary-rgb), 0.12); color: var(--text-primary); }
.notif-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--danger);
  color: var(--mud-palette-error-text);
  font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  line-height: 1;
  pointer-events: none;
}
.notif-overlay {
  position: fixed; inset: 0; z-index: 199;
}
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  width: 380px;
  max-height: 480px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.12);
  z-index: 200;
  display: flex; flex-direction: column;
  animation: dropdownFadeIn 0.18s ease-out;
}
.notif-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.notif-panel-title {
  font-size: 15px; font-weight: 600; color: var(--text-primary);
}
.notif-mark-all.mud-button-root {
  background: none; border: none;
  color: var(--accent); font-size: 13px; font-weight: 500;
  cursor: pointer; padding: 0;
  transition: opacity 0.2s;
}
.notif-mark-all.mud-button-root:hover { opacity: 0.8; }
.notif-panel-body {
  overflow-y: auto; flex: 1;
  max-height: 420px;
}
.notif-empty {
  padding: 40px 16px;
  text-align: center;
  color: var(--text-muted);
  font-size: 14px;
}
.notif-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background 0.15s;
  border-bottom: 1px solid var(--border);
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--bg-hover); }
.notif-item--unread { background: color-mix(in srgb, var(--accent) 6%, transparent); }
.notif-item--unread:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }
.notif-item-icon {
  width: 32px; height: 32px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-muted);
  border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 10%, transparent);
}
.notif-item-icon svg { width: 100%; height: 100%; }
.notif-item-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 2px;
}
.notif-item-type {
  font-size: 13px; font-weight: 600; color: var(--text-primary);
}
.notif-item-message {
  font-size: 13px; color: var(--text-secondary);
}
.notif-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--highlight);
  flex-shrink: 0;
  margin-top: 6px;
}
.notif-loading {
  display: flex; justify-content: center; padding: 12px;
}
.notif-sentinel { height: 1px; }
@media (max-width: 600px) {
  .notif-panel {
    position: fixed !important;
    top: var(--header-h) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: calc(100vh - var(--header-h) - 24px);
  }
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 20px 0 16px;
  color: var(--text-secondary);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
.auth-divider::before,
.auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

/* Scrollbar */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--text-muted); }

/* Blazor-specific */
#blazor-error-ui {
    background: var(--brand-dark);
    color: var(--brand-light);
    padding: 12px 24px;
    position: fixed;
    bottom: 0;
    width: 100%;
    z-index: 1000;
    display: none;
}

#blazor-error-ui .reload, #blazor-error-ui .dismiss {
    color: var(--brand-accent);
    margin-left: 12px;
}

/* ===== «Страж» бесконечной ленты (крошки портала — в стилях общего компонента, portal-breadcrumbs.css) ===== */
.np-sentinel { height: 1px; padding: 16px 0; text-align: center; }

/* ===== Article Content (mirrors article-content.css from UI.Shared) ===== */
.article-content {
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.75;
    word-wrap: break-word;
    overflow-wrap: break-word;
    overflow: hidden;
}
.article-content p,
.article-content ol,
.article-content ul,
.article-content pre,
.article-content blockquote,
.article-content h1, .article-content h2, .article-content h3,
.article-content h4, .article-content h5, .article-content h6 {
    margin: 0;
    color: var(--text-secondary);
}
.article-content h1 { font-size: 2em; font-weight: 700; margin-bottom: 20px; letter-spacing: -0.02em; line-height: 1.2; color: var(--text-primary); }
.article-content h2 { font-size: 1.6em; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.01em; line-height: 1.3; color: var(--text-primary); }
.article-content h3 { font-size: 1.3em; font-weight: 600; margin-bottom: 14px; color: var(--text-primary); }
.article-content h4 { font-size: 1.1em; font-weight: 600; margin-bottom: 12px; color: var(--text-primary); }
.article-content h5, .article-content h6 { font-size: 1em; font-weight: 600; margin-bottom: 10px; color: var(--text-muted); }
.article-content p { line-height: 1.8; margin-bottom: 12px; }
.article-content a { color: var(--link); text-decoration: none; transition: color 0.2s; }
.article-content a:hover { color: var(--accent-hover); text-decoration: underline; }
.article-content ul, .article-content ol { padding-left: 24px; }
.article-content li { margin-bottom: 8px; line-height: 1.7; }
.article-content li::marker { color: var(--accent); }
.article-content blockquote {
    border-left: 3px solid var(--accent);
    background: var(--bg-hover);
    padding: 14px 20px;
    margin: 16px 0;
    border-radius: 0 8px 8px 0;
    color: var(--text-primary);
}
.article-content code {
    background: var(--accent-subtle);
    color: var(--accent);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: "Fira Code", monospace;
    font-size: 0.9em;
}
.article-content pre {
    background: var(--bg-card);
    border: 1px solid var(--border-light);
    border-radius: 10px;
    padding: 16px;
    overflow-x: auto;
    margin: 16px 0;
}
.article-content pre code { background: transparent; padding: 0; color: inherit; display: block; }
.article-content img { max-width: 100% !important; height: auto !important; border-radius: 10px; margin: 16px 0; display: block; }
.article-content strong { font-weight: 700; }
.article-content em { font-style: italic; }
.article-content u { text-decoration: underline; text-underline-offset: 3px; }
.article-content s { text-decoration: line-through; opacity: 0.7; }
.article-content hr { border: none; height: 1px; background: var(--border-light); margin: 24px 0; }
.article-content .ql-mention-link {
    color: var(--accent);
    text-decoration: none;
    background: var(--accent-subtle);
    padding: 1px 4px;
    border-radius: 3px;
    font-weight: 500;
    cursor: pointer;
    transition: color 0.2s, background 0.2s;
}
.article-content .ql-mention-link:hover {
    color: var(--accent-hover);
    background: var(--accent-light);
    text-decoration: underline;
}
.article-content .ql-callout {
    position: relative;
    background: var(--accent-subtle);
    border: 1px solid var(--accent-light);
    border-left: 4px solid var(--accent);
    border-radius: 0 10px 10px 0;
    padding: 16px 20px;
    margin: 16px 0;
    color: var(--text-primary);
    line-height: 1.7;
}

/* ===== INLINE COMMENTS SECTION ===== */

.comment-success {
    padding: 12px 16px;
    background: var(--success-bg);
    border: 1px solid color-mix(in srgb, var(--success) 25%, transparent);
    border-radius: 8px;
    color: var(--success);
    font-family: var(--font-body);
    font-size: 13px;
    margin-bottom: 20px;
}

.comment-error {
    padding: 12px 16px;
    background: var(--danger-bg);
    border: 1px solid color-mix(in srgb, var(--danger) 25%, transparent);
    border-radius: 8px;
    color: var(--danger);
    font-family: var(--font-body);
    font-size: 13px;
    margin-bottom: 20px;
}

.comment-auth-prompt {
    font-family: var(--font-body);
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.comment-auth-link {
    background: none;
    border: none;
    padding: 0;
    color: var(--accent);
    font-family: var(--font-body);
    font-size: 13px;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.comment-auth-link:hover { opacity: 0.8; }

.comment-form {
    margin-bottom: 32px;
}

.comment-reply-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--accent-subtle);
    border: 1px solid var(--accent-light);
    border-radius: 8px;
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-size: 12px;
    color: var(--accent);
}

.comment-reply-badge svg { opacity: 0.7; flex-shrink: 0; }
.comment-reply-badge span { flex: 1; font-weight: 600; }

.comment-reply-cancel {
    background: none;
    border: none;
    padding: 2px;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    line-height: 1;
}

.comment-reply-cancel:hover { color: var(--text-primary); }

.comment-input-row {
    display: flex;
    gap: 10px;
    align-items: flex-end;
}

.comment-textarea {
    flex: 1;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    font-family: var(--font-body);
    font-size: 14px;
    padding: 12px 14px;
    resize: vertical;
    min-height: 80px;
    line-height: 1.5;
    transition: border-color 0.15s;
}

.comment-textarea:focus {
    outline: none;
    border-color: var(--accent);
}

.comment-textarea::placeholder { color: var(--text-secondary); }

.comment-submit {
    background: var(--accent);
    color: var(--text-on-accent);
    border: none;
    border-radius: 8px;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: opacity 0.15s;
}

.comment-submit:hover { opacity: 0.85; }

.comment-item {
    padding: 16px 0;
    border-bottom: 1px solid var(--border);
}

.comment-item:last-child { border-bottom: none; }

.comment-item--reply {
    border-bottom: none;
    padding-bottom: 8px;
}

.comment-item-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.comment-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--accent), var(--accent-hover));
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-size: 13px;
    font-weight: 700;
    color: var(--text-on-accent);
    flex-shrink: 0;
    text-transform: uppercase;
}

.comment-item-meta {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.comment-author {
    font-family: var(--font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.comment-time {
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
}

.comment-reply-ref {
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-body);
    font-size: 11px;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.comment-reply-ref svg { opacity: 0.5; flex-shrink: 0; }

.comment-text {
    font-family: var(--font-body);
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.55;
    word-break: break-word;
}

.comment-reply-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    padding: 6px 0 0;
    color: var(--text-secondary);
    font-family: var(--font-body);
    font-size: 12px;
    cursor: pointer;
    transition: color 0.15s;
}

.comment-reply-btn:hover { color: var(--accent); }

/* ===== SCROLL TO TOP ===== */
.scroll-to-top {
    position: fixed;
    bottom: 32px;
    right: 32px;
    z-index: 999;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-hover);
    border: 1px solid var(--border);
    border-radius: 12px;
    color: var(--accent);
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.25s ease, transform 0.25s ease, background 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
}
[data-theme="light"] .scroll-to-top {
    background: var(--bg-card);
    border-color: var(--border);
    color: var(--accent);
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
[data-theme="light"] .scroll-to-top:hover {
    background: var(--accent-subtle);
    color: var(--accent);
    box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

.scroll-to-top.visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
}

.scroll-to-top:hover {
    background: var(--accent);
    color: var(--text-on-accent);
    box-shadow: 0 6px 20px rgba(0,0,0,0.5);
    transform: translateY(-2px);
}

@media (max-width: 768px) {
    .scroll-to-top {
        bottom: 20px;
        right: 16px;
        width: 40px;
        height: 40px;
        border-radius: 10px;
    }
}

/* На странице с панелью сохранения (SaveChangesBar) кнопки нет: обе стоят в правом нижнем углу окна, кнопка
   закрывала главную кнопку панели, и нажатие прокручивало страницу вместо сохранения. Поднять кнопку над панелью
   мало: в конце страницы панель уходит со своего места у края окна и снова попадает под кнопку. */
body:has(.portal-save-bar) .scroll-to-top { display: none; }

/* ===== Каркас каталога: герой раздела и контейнер под ним ===== */
/* Герой один на весь портал: главная, новости, сообщества, опросы, афиша, сотрудники, оргструктура, благодарности.
   Отступ сверху равен отступу каркаса карточки (.container.*-wrap): крошки каталога и карточки стоят на одной высоте.
   В тёмной теме герой стоит на фирменном поле, в светлой — на спокойном фоне страницы с лёгким свечением акцента. */
.catalog-hero {
    padding: 28px 0 32px;
    position: relative;
    overflow: hidden;
}
/* Светлая тема: фон и свечение из палитры темы, содержимое красится обычными токенами темы. */
[data-theme="light"] .catalog-hero {
    background: linear-gradient(135deg, var(--mud-palette-background-gray) 0%, var(--mud-palette-background) 100%);
}
[data-theme="light"] .catalog-hero::before {
    content: '';
    position: absolute; top: -40%; right: -15%;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(var(--tint-rgb), 0.10) 0%, transparent 70%);
    pointer-events: none;
}
/* Тёмная тема (она по умолчанию): фирменное поле. Токены, которыми красится содержимое героя — крошки, заголовок,
   подписи, кнопки, карточка внутри, — герой задаёт сам, фирменными цветами. */
:root:not([data-theme="light"]) .catalog-hero {
    background: var(--brand-field-shade), var(--brand-field-glow);
    color: var(--brand-field-text);
    --text-primary: var(--brand-field-text);
    --text-secondary: var(--brand-field-text-secondary);
    --text-muted: var(--brand-field-text-muted);
    --accent: var(--brand-accent);
    --accent-hover: color-mix(in srgb, var(--brand-accent) 80%, var(--brand-dark));
    --text-on-accent: var(--brand-dark);
    --bg-card: var(--brand-dark);
    --border-light: color-mix(in srgb, var(--brand-accent) 12%, var(--brand-dark));
    /* Этим MudBlazor красит своё: кнопку без заливки — цветом текста палитры, под курсором и в фокусе — подсветкой. */
    --mud-palette-text-primary: var(--brand-field-text);
    --mud-palette-action-default-hover: color-mix(in srgb, var(--brand-field-text) 8%, transparent);
    --mud-palette-skeleton: color-mix(in srgb, var(--brand-accent) 10%, transparent);
}
/* Фокус с клавиатуры в герое: MudBlazor гасит обводку ссылок, а правила модулей до героя не достают —
   он лежит над их контейнерами. */
.catalog-hero :is(a, button):focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.catalog-hero-title {
    font-family: var(--font-display);
    color: var(--text-primary);
    font-size: clamp(24px, 3vw, 36px);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin-bottom: 8px;
    position: relative;
}
.catalog-hero-sub {
    color: var(--text-secondary);
    font-size: 15px;
    position: relative;
}
.catalog-wrap {
    padding-top: 24px;
    padding-bottom: 60px;
}

.catalog-empty {
    text-align: center;
    padding: 64px 24px;
    color: var(--text-muted);
    font-size: 15px;
}

/* skeleton cards */
.skel {
    background: var(--border-light);
    border-radius: 8px;
    position: relative;
    overflow: hidden;
}
.skel::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, var(--bg-hover, rgba(255,255,255,0.06)) 50%, transparent 100%);
    animation: skel-shimmer 1.4s ease-in-out infinite;
}
@keyframes skel-shimmer {
    0%   { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}
.skel-card { pointer-events: none; }
.skel-line {
    width: 100%;
    height: 14px;
    margin-top: 8px;
}
.skel-line--short {
    width: 60%;
}
.skel-author {
    width: 100px;
    height: 14px;
}

@media (max-width: 600px) {
    .catalog-hero { padding: 20px 0 32px; }
    :root:not([data-theme="light"]) .catalog-hero { background: var(--brand-field-shade), var(--brand-field-glow-phone); }
    .catalog-hero-title { font-size: 24px; }
}